@zumer/orbit
Version:
Orbit builds radial interfaces with CSS geometry and a small JavaScript layout runtime
251 lines (250 loc) • 7.79 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "dist/orbit.mjs",
"declarations": [
{
"kind": "class",
"name": "OrbitArc",
"tagName": "o-arc",
"customElement": true,
"description": "A segment of its ring. Without value, sibling arcs split the range equally; with value, they stack in DOM order. Text content is drawn along the arc. Place it directly in a ring.",
"superclass": {
"name": "HTMLElement"
},
"attributes": [
{
"name": "value",
"description": "Share of the ring's range, relative to max. Without it, sibling arcs split the range equally.",
"type": {
"text": "number"
}
},
{
"name": "max",
"description": "Value that fills the ring's range. Must be positive.",
"type": {
"text": "number"
},
"default": "100"
},
{
"name": "shape",
"description": "Ending of the band.",
"type": {
"text": "'none' | 'rounded' | 'circle' | 'circle-a' | 'circle-b' | 'bullet' | 'arrow' | 'slash' | 'backslash' | 'zigzag'"
},
"default": "none"
},
{
"name": "interactive",
"description": "Let the band receive pointer events, even where it is transparent. Decorative by default.",
"type": {
"text": "boolean"
}
},
{
"name": "hit-width",
"description": "Extra touch area in px on each side of an interactive band.",
"type": {
"text": "number"
},
"default": "0"
},
{
"name": "text-anchor",
"description": "Where curved text sits on the arc. With range=\"auto\", an explicit value anchors the arc at its angle: middle centers it, end ends it there.",
"type": {
"text": "'start' | 'middle' | 'end'"
},
"default": "middle"
},
{
"name": "flip",
"description": "Reverse the direction of curved text.",
"type": {
"text": "boolean"
}
},
{
"name": "fit-range",
"description": "Squeeze curved text to the length of the arc.",
"type": {
"text": "boolean"
}
},
{
"name": "range",
"description": "Size the arc to its text. Consecutive range=\"auto\" arcs follow each other.",
"type": {
"text": "'auto'"
}
}
],
"cssProperties": [
{
"name": "--o-fill",
"description": "Band color."
},
{
"name": "--o-stroke",
"description": "Outline color."
},
{
"name": "--o-stroke-width",
"description": "Outline width, unitless."
},
{
"name": "--o-color",
"description": "Text color."
},
{
"name": "--o-gap",
"description": "Space between sibling arcs. Default 1; cascades from the ring or system."
}
],
"events": [
{
"name": "o-rendered",
"description": "Fired after the element redraws. Bubbles and crosses shadow roots."
}
]
},
{
"kind": "class",
"name": "OrbitProgress",
"tagName": "o-progress",
"customElement": true,
"description": "A progress band over a background track that spans its ring's range. Place it directly in a ring.",
"superclass": {
"name": "HTMLElement"
},
"attributes": [
{
"name": "value",
"description": "Value relative to max.",
"type": {
"text": "number"
}
},
{
"name": "max",
"description": "Value that fills the ring's range. Must be positive.",
"type": {
"text": "number"
},
"default": "100"
},
{
"name": "shape",
"description": "Ending of the band.",
"type": {
"text": "'none' | 'rounded' | 'circle' | 'circle-a' | 'circle-b' | 'bullet' | 'arrow' | 'slash' | 'backslash' | 'zigzag'"
},
"default": "none"
},
{
"name": "interactive",
"description": "Let the band receive pointer events, even where it is transparent. Decorative by default.",
"type": {
"text": "boolean"
}
},
{
"name": "hit-width",
"description": "Extra touch area in px on each side of an interactive band.",
"type": {
"text": "number"
},
"default": "0"
},
{
"name": "variant",
"description": "Draw open lines colored by --o-stroke and --o-back-stroke instead of filled bands.",
"type": {
"text": "'stroke'"
}
}
],
"cssProperties": [
{
"name": "--o-fill",
"description": "Band color."
},
{
"name": "--o-stroke",
"description": "Outline color."
},
{
"name": "--o-stroke-width",
"description": "Outline width, unitless."
},
{
"name": "--o-back-fill",
"description": "Track color."
},
{
"name": "--o-back-stroke",
"description": "Track outline color."
},
{
"name": "--o-back-stroke-width",
"description": "Track outline width, unitless."
},
{
"name": "--o-progress",
"description": "Progress value; overrides the value attribute."
}
],
"events": [
{
"name": "o-rendered",
"description": "Fired after the element redraws. Bubbles and crosses shadow roots."
}
]
}
],
"exports": [
{
"kind": "js",
"name": "OrbitArc",
"declaration": {
"name": "OrbitArc",
"module": "dist/orbit.mjs"
}
},
{
"kind": "custom-element-definition",
"name": "o-arc",
"declaration": {
"name": "OrbitArc",
"module": "dist/orbit.mjs"
}
},
{
"kind": "js",
"name": "OrbitProgress",
"declaration": {
"name": "OrbitProgress",
"module": "dist/orbit.mjs"
}
},
{
"kind": "custom-element-definition",
"name": "o-progress",
"declaration": {
"name": "OrbitProgress",
"module": "dist/orbit.mjs"
}
}
]
}
],
"package": {
"name": "@zumer/orbit",
"version": "2.0.1"
}
}