@jxsuite/ui 0.0.0 → 0.2.0

package/components/jx-spinner.json

@@ -0,0 +1,129 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxSpinner",
+  "tagName": "jx-spinner",
+  "observedAttributes": ["value", "label", "size"],
+  "$elements": [
+    {
+      "$ref": "./jx-icon.json"
+    }
+  ],
+  "state": {
+    "value": {
+      "type": "string",
+      "default": "",
+      "attribute": "value",
+      "description": "How far along, 0 to 100. Empty is the indeterminate state: an ARIA progressbar with no aria-valuenow IS indeterminate, so an empty value writes none of the value attributes and the ring spins instead of filling. A string, never a number, because a numeric state entry turns a removed attribute into 0 and could never say empty. A host that writes a number through the property door anyway is read through #/state/progress, which is the ONE predicate the whole element renders from."
+    },
+    "label": {
+      "type": "string",
+      "default": "",
+      "attribute": "label",
+      "description": "What is being waited for, announced. Empty hides the spinner from assistive technology, which is right whenever the surrounding text already says the app is busy; a bare \"progressbar\" announcement is not."
+    },
+    "size": {
+      "type": "string",
+      "default": "md",
+      "attribute": "size",
+      "description": "sm, md or lg. md matches the kit's icon size, so a spinner swapped in for an icon does not move the row."
+    },
+    "progress": "${state.value === '' || state.value === null || state.value === undefined ? '' : '' + state.value}",
+    "isDeterminate": {
+      "$expression": {
+        "operator": "!==",
+        "target": {
+          "$ref": "#/state/progress"
+        },
+        "value": ""
+      }
+    },
+    "ring": "${state.progress === '' ? 'none' : 'conic-gradient(var(--jx-spin-color) ' + state.progress + '%, var(--jx-spin-track-color) 0)'}"
+  },
+  "attributes": {
+    "role": "progressbar",
+    "aria-label": "${state.label || null}",
+    "aria-hidden": "${state.label ? null : 'true'}",
+    "aria-valuenow": "${state.progress || null}",
+    "aria-valuemin": "${state.progress ? '0' : null}",
+    "aria-valuemax": "${state.progress ? '100' : null}",
+    "data-size": "${state.size}",
+    "data-determinate": "${state.progress ? '' : null}"
+  },
+  "style": {
+    "display": "inline-flex",
+    "verticalAlign": "middle",
+    "flex": "none",
+    "--jx-spin-size": "var(--jx-icon-size, 16px)",
+    "--jx-spin-track": "2px",
+    "--jx-spin-dur": "900ms",
+    "--jx-spin-color": "currentColor",
+    "--jx-spin-track-color": "var(--jx-border)",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "&[data-size=\"sm\"]": {
+      "--jx-spin-size": "12px"
+    },
+    "&[data-size=\"lg\"]": {
+      "--jx-spin-size": "20px"
+    },
+    "& [part=\"glyph\"]": {
+      "display": "inline-flex",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "boxSizing": "border-box",
+      "width": "var(--jx-spin-size)",
+      "height": "var(--jx-spin-size)",
+      "borderRadius": "50%",
+      "color": "var(--jx-spin-color)",
+      "animation": "jx-spin var(--jx-spin-dur) linear infinite"
+    },
+    "& [part=\"glyph-icon\"]": {
+      "--jx-icon-size": "var(--jx-spin-size)"
+    },
+    "&[data-determinate] [part=\"glyph\"]": {
+      "animation": "none",
+      "mask": "radial-gradient(farthest-side, transparent calc(100% - var(--jx-spin-track)), black 0)"
+    },
+    "@(prefers-reduced-motion: reduce)": {
+      "--jx-spin-dur": "2400ms"
+    },
+    "@(forced-colors: active)": {
+      "--jx-spin-track": "3px"
+    },
+    "@keyframes jx-spin": {
+      "from": {
+        "rotate": "0deg"
+      },
+      "to": {
+        "rotate": "360deg"
+      }
+    }
+  },
+  "children": [
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "glyph"
+      },
+      "style": {
+        "background": "${state.ring}"
+      },
+      "children": [
+        {
+          "tagName": "jx-icon",
+          "attributes": {
+            "part": "glyph-icon"
+          },
+          "hidden": {
+            "$ref": "#/state/isDeterminate"
+          },
+          "$props": {
+            "name": "spinner",
+            "weight": "bold"
+          }
+        }
+      ]
+    }
+  ]
+}

package/components/jx-split.json

@@ -0,0 +1,221 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxSplit",
+  "tagName": "jx-split",
+  "observedAttributes": [
+    "orientation",
+    "label",
+    "value",
+    "min",
+    "max",
+    "gap",
+    "step",
+    "large-step",
+    "collapse",
+    "disabled"
+  ],
+  "state": {
+    "orientation": {
+      "type": "string",
+      "default": "vertical",
+      "attribute": "orientation",
+      "description": "vertical or horizontal — the separator's OWN orientation, which is ARIA's meaning and the opposite of the axis it moves on: a vertical splitter is the upright line between two side-by-side panes, dragged left and right. Only \"horizontal\" turns it; every other value, the default included, is the upright one."
+    },
+    "label": {
+      "type": "string",
+      "default": "Split",
+      "attribute": "label",
+      "description": "The accessible name. A separator is in neither the accessibility lint's content-named roles nor its labelled ones, so an unnamed one is invisible to every gate and a reader arriving on it is told they have landed on a separator and nothing more. Name every splitter after the thing it divides."
+    },
+    "value": {
+      "type": "number",
+      "default": 0.5,
+      "attribute": "value",
+      "description": "Where the splitter sits: the LEADING side's share of the box it divides, 0-1. A fraction rather than pixels because a splitter has no size of its own to report, and because the same stored number survives a window resize. It is aria-valuenow, and the element is its own writer during a gesture — a host reads it back off the input and change events."
+    },
+    "min": {
+      "type": "number",
+      "default": 0,
+      "attribute": "min",
+      "description": "The smallest share the leading side may have, and aria-valuemin. A policy about the split, which is why it is a constant a host declares rather than something derived: gap answers the other question, and the two are intersected."
+    },
+    "max": {
+      "type": "number",
+      "default": 1,
+      "attribute": "max",
+      "description": "The largest share, and aria-valuemax."
+    },
+    "gap": {
+      "type": "number",
+      "default": 0,
+      "attribute": "gap",
+      "description": "The smallest EITHER side may be, in pixels of the measured track. Converted into the value's own units at gesture time, so it needs no listener and cannot go stale when the window resizes — which a fractional floor computed from a width by a host always does. A track too narrow for two gaps has no legal position, and the splitter goes to the middle of its crossed bounds."
+    },
+    "step": {
+      "type": "number",
+      "default": 0.02,
+      "attribute": "step",
+      "description": "What one arrow key moves the value by. Two per cent of the track is a nudge a reader can aim with; a value that is not a positive number falls back to it."
+    },
+    "largeStep": {
+      "type": "number",
+      "default": 0.1,
+      "attribute": "large-step",
+      "description": "What Shift+Arrow moves it by — the same coarse gesture jx-number-field and jx-color-slider add, and one the platform has on nothing."
+    },
+    "collapse": {
+      "type": "number",
+      "default": -1,
+      "attribute": "collapse",
+      "description": "The value Enter and a double click move to, and back from. The default is below every legal share, so it clamps to min: collapsing means going to the floor unless a host says otherwise. A splitter whose two sides are both real panes points it wherever its double click has always gone."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "disabled",
+      "description": "Cannot be moved, by pointer or by key, and drops out of the tab order. aria-disabled rather than removal, because a splitter a reader cannot find is a layout they cannot explain."
+    },
+    "dragging": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether a pointer gesture is live. Written by the behaviour and mirrored as data-dragging, so the splitter stays lit for the length of a drag that has left it — which is the whole point of the pointer capture."
+    },
+    "restore": {
+      "type": "number",
+      "default": -1,
+      "description": "Where the collapse toggle returns to, recorded on the way down. Negative until a collapse has recorded one, which is a value no share can be."
+    },
+    "valueText": "${Math.round(((state.value - state.min) / ((state.max - state.min) || 1)) * 100) + '%'}",
+    "onPointerDown": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/split.ts",
+      "$export": "onSplitPointerDown",
+      "description": "Measures the track once, captures the gesture on the element and takes the focus, so the arrow keys carry on from where the pointer stopped. The value does not jump: the splitter is already the thing under the cursor."
+    },
+    "onPointerMove": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/split.ts",
+      "$export": "onSplitPointerMove",
+      "description": "The drag, against the length measured at pointerdown. Nothing moves without a press first, so a hover moves no split.",
+      "emits": [
+        {
+          "name": "input",
+          "description": "The splitter is moving under the reader's hand. It comes from the ELEMENT, so e.target.value is where it is — and detail is the modifiers this step was made with, { altKey, ctrlKey, metaKey, shiftKey }, for a host whose own snap needs a way through. The element gives none of them a meaning here; what a breakpoint is, and which key skips it, is the host's to say."
+        }
+      ]
+    },
+    "onPointerUp": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/split.ts",
+      "$export": "onSplitPointerUp",
+      "description": "Ends the gesture and commits once. Bound to pointercancel and lostpointercapture as well as pointerup: a capture lost any other way is still a gesture that is over, and a splitter left in the dragging state would follow the next pointer that crossed it with no button down.",
+      "emits": [
+        {
+          "name": "change",
+          "description": "The reader let go; e.target is the element, and detail is the modifiers the release carried. Dispatched even when the last move changed nothing, because the commit is about the gesture ending."
+        }
+      ]
+    },
+    "onKeydown": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/split.ts",
+      "$export": "onSplitKeydown",
+      "description": "The splitter keyboard: the arrows of its own axis with Shift for the larger step, Home and End for the extremes, and Enter for the collapse toggle. A keystroke is a move AND a commit. Every other key reaches the host untouched.",
+      "emits": [
+        {
+          "name": "input",
+          "description": "A key moved the splitter; detail is the modifiers it was pressed with. Shift is reported even though the element spent it on the large step: what a host makes of a modifier is the host's business."
+        },
+        {
+          "name": "change",
+          "description": "The same key committed it, with the same detail."
+        }
+      ]
+    },
+    "onDoubleClick": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/split.ts",
+      "$export": "onSplitDoubleClick",
+      "description": "Collapses the split, and restores it on the next one. This is the SC 2.5.7 door — a single-pointer alternative to dragging — and it is deliberately the same function Enter runs, so the two cannot drift.",
+      "emits": [
+        {
+          "name": "input",
+          "description": "The toggle moved the splitter; detail is the click's modifiers."
+        },
+        {
+          "name": "change",
+          "description": "And committed it, with the same detail."
+        }
+      ]
+    }
+  },
+  "attributes": {
+    "role": "separator",
+    "tabindex": "${state.disabled ? '-1' : '0'}",
+    "aria-label": "${state.label}",
+    "aria-orientation": "${state.orientation}",
+    "aria-valuenow": "${state.value}",
+    "aria-valuemin": "${state.min}",
+    "aria-valuemax": "${state.max}",
+    "aria-valuetext": "${state.valueText}",
+    "aria-disabled": "${state.disabled ? 'true' : null}",
+    "orientation": "${state.orientation}",
+    "data-dragging": "${state.dragging ? '' : null}"
+  },
+  "onpointerdown": {
+    "$ref": "#/state/onPointerDown"
+  },
+  "onpointermove": {
+    "$ref": "#/state/onPointerMove"
+  },
+  "onpointerup": {
+    "$ref": "#/state/onPointerUp"
+  },
+  "onpointercancel": {
+    "$ref": "#/state/onPointerUp"
+  },
+  "onlostpointercapture": {
+    "$ref": "#/state/onPointerUp"
+  },
+  "onkeydown": {
+    "$ref": "#/state/onKeydown"
+  },
+  "ondblclick": {
+    "$ref": "#/state/onDoubleClick"
+  },
+  "style": {
+    "display": "block",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "flex": "none",
+    "position": "relative",
+    "zIndex": "1",
+    "touchAction": "none",
+    "background": "var(--jx-border)",
+    "cursor": "col-resize",
+    "inlineSize": "5px",
+    "outline": "none",
+    "&[orientation=\"horizontal\"]": {
+      "cursor": "row-resize",
+      "inlineSize": "auto",
+      "blockSize": "5px"
+    },
+    "&:hover, &[data-dragging]": {
+      "background": "var(--jx-accent)",
+      "opacity": "0.5"
+    },
+    "&:focus-visible": {
+      "outline": "var(--jx-focus-ring)",
+      "outlineOffset": "-2px"
+    },
+    "&[aria-disabled=\"true\"]": {
+      "cursor": "default"
+    },
+    "&[aria-disabled=\"true\"]:hover": {
+      "background": "var(--jx-border)",
+      "opacity": "1"
+    }
+  },
+  "children": []
+}

package/components/jx-swatch-group.json

@@ -0,0 +1,107 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxSwatchGroup",
+  "tagName": "jx-swatch-group",
+  "observedAttributes": ["value", "label", "columns"],
+  "state": {
+    "value": {
+      "type": "string",
+      "default": "",
+      "attribute": "value",
+      "description": "What the chosen swatch stands for; the empty string when none is. The group is the one writer of its children's checked state and of the roving caret, so a host owns this and nothing else — writing a child's checked directly puts the two into a disagreement only a re-render can settle."
+    },
+    "label": {
+      "type": "string",
+      "default": "Colours",
+      "attribute": "label",
+      "description": "The accessible name of the group. A radiogroup is named by nothing else — it takes no name from its members — and no lint can say so, because a bound role switches the naming rules off. Name every group: \"Theme palette\" and \"Recent colours\" are two different questions and a reader hears only this."
+    },
+    "columns": {
+      "type": "number",
+      "default": 0,
+      "attribute": "columns",
+      "description": "How many swatches to a row, or 0 to let them wrap on their own. A fixed grid is what makes a palette's rows line up when the swatches carry labels of different lengths; zero means unset rather than a grid of no columns, because a numeric prop coerces a removed attribute through the current value's type."
+    },
+    "applySelection": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/swatch-group.ts",
+      "$export": "applySwatchSelection",
+      "parameters": ["scope"],
+      "description": "Writes the selection onto the swatches and returns it. Idempotent: it runs inside a render effect."
+    },
+    "sync": "${state.applySelection(state)}",
+    "onSelect": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/swatch-group.ts",
+      "$export": "onSwatchGroupSelect",
+      "emits": [
+        {
+          "name": "change",
+          "description": "The selection moved; detail is what the newly chosen swatch stands for, and e.target.value is the same string."
+        }
+      ],
+      "description": "A swatch was activated: value is written first, then change is dispatched, so a listener reading e.target.value sees the new one. Re-choosing the swatch that is already chosen says nothing."
+    },
+    "onKeydown": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/swatch-group.ts",
+      "$export": "onSwatchGroupKeydown",
+      "description": "The radio group's keyboard contract: either arrow pair moves the caret between enabled swatches with wrap, Home and End go to the ends, and the swatch the caret lands on is chosen. Both pairs move, because a palette wraps into rows and Down on a grid means the next one."
+    },
+    "onReady": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/swatch-group.ts",
+      "$export": "onSwatchGroupMount",
+      "description": "Gives the group its first sight of itself, syncs the swatches, and watches the set. Not optional: applyAttributes runs before distributeSlots, so no swatch exists when the root's bindings first evaluate."
+    },
+    "onMount": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "dispatchEvent": "jx-ready",
+          "bubbles": true
+        }
+      ],
+      "emits": [
+        {
+          "name": "jx-ready",
+          "description": "The group has rendered and taken its slotted swatches, which is how onReady reaches the element itself."
+        }
+      ],
+      "description": "Announces that the group has rendered. Its own onReady listens for it, and a host may too."
+    }
+  },
+  "attributes": {
+    "role": "radiogroup",
+    "aria-label": "${state.label}",
+    "data-selection": "${state.sync}",
+    "data-columns": "${state.columns > 0 ? '' : null}"
+  },
+  "onselect": {
+    "$ref": "#/state/onSelect"
+  },
+  "onkeydown": {
+    "$ref": "#/state/onKeydown"
+  },
+  "onjx-ready": {
+    "$ref": "#/state/onReady"
+  },
+  "style": {
+    "display": "flex",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "flexWrap": "wrap",
+    "alignItems": "center",
+    "gap": "var(--jx-space-1)",
+    "&[data-columns]": {
+      "display": "grid",
+      "gridTemplateColumns": "repeat(${state.columns}, minmax(0, 1fr))"
+    }
+  },
+  "children": [
+    {
+      "tagName": "slot"
+    }
+  ]
+}