@jxsuite/ui 0.0.0 → 0.1.0

package/stylebook/jx-select.json

@@ -0,0 +1,407 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookSelect",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-field.json"
+    },
+    {
+      "$ref": "../components/jx-select.json"
+    }
+  ],
+  "state": {
+    "face": "\"Courier New\", monospace",
+    "swatch": "danger",
+    "faces": [
+      {
+        "id": "project",
+        "label": "This project",
+        "rows": [
+          {
+            "face": "Georgia, serif",
+            "label": "Georgia",
+            "value": "Georgia, serif"
+          },
+          {
+            "face": "\"Courier New\", monospace",
+            "label": "Courier New",
+            "value": "\"Courier New\", monospace"
+          },
+          {
+            "face": "\"Times New Roman\", serif",
+            "label": "Times New Roman",
+            "value": "\"Times New Roman\", serif"
+          }
+        ]
+      },
+      {
+        "id": "generic",
+        "label": "Generic",
+        "rows": [
+          {
+            "description": "system",
+            "face": "system-ui",
+            "label": "system-ui",
+            "value": "system-ui"
+          },
+          {
+            "face": "serif",
+            "label": "serif",
+            "value": "serif"
+          },
+          {
+            "face": "monospace",
+            "label": "monospace",
+            "value": "monospace"
+          },
+          {
+            "disabled": true,
+            "face": "fantasy",
+            "label": "fantasy",
+            "value": "fantasy"
+          }
+        ]
+      }
+    ],
+    "swatches": [
+      {
+        "label": "Danger",
+        "swatch": "var(--jx-danger)",
+        "value": "danger"
+      },
+      {
+        "label": "Success",
+        "swatch": "var(--jx-success)",
+        "value": "success"
+      },
+      {
+        "label": "Warning",
+        "swatch": "var(--jx-warning)",
+        "value": "warning"
+      },
+      {
+        "label": "Accent",
+        "swatch": "var(--jx-accent)",
+        "value": "accent"
+      }
+    ],
+    "lines": [
+      {
+        "label": "Solid",
+        "line": "solid",
+        "value": "solid"
+      },
+      {
+        "label": "Dashed",
+        "line": "dashed",
+        "value": "dashed"
+      },
+      {
+        "label": "Dotted",
+        "line": "dotted",
+        "value": "dotted"
+      },
+      {
+        "label": "Double",
+        "line": "double",
+        "value": "double"
+      }
+    ],
+    "note": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/face"
+          },
+          "value": {
+            "$ref": "event#/target/value"
+          }
+        }
+      ]
+    }
+  },
+  "style": {
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "background": "var(--jx-bg)",
+    "padding": "var(--jx-space-6)",
+    "minHeight": "100vh",
+    "& > h1": {
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > h2": {
+      "fontSize": "var(--jx-text-md)",
+      "fontWeight": "600",
+      "margin": "var(--jx-space-6) 0 var(--jx-space-3)"
+    },
+    "& > p": {
+      "color": "var(--jx-fg-dim)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& [role=\"group\"]": {
+      "display": "flex",
+      "alignItems": "flex-start",
+      "flexWrap": "wrap",
+      "gap": "var(--jx-space-3)",
+      "margin": "0 0 var(--jx-space-4)"
+    },
+    "& [role=\"group\"] > span": {
+      "width": "160px",
+      "color": "var(--jx-fg-muted)",
+      "fontSize": "var(--jx-text-sm)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-select"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A native select with appearance: base-select. The platform brings typeahead, the arrow keys, disabled-row skipping, form participation and the top-layer picker; the document brings the rows, their faces, their swatches and the heading that delimits one group from the next."
+    },
+    {
+      "tagName": "h2",
+      "textContent": "A font picker, grouped"
+    },
+    {
+      "tagName": "p",
+      "textContent": "Each row draws in its own face, in the picker and in the closed trigger. The legend inside each optgroup is what draws the heading; the optgroup's own label is what names the group to a reader."
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Bound value"
+      },
+      "children": [
+        {
+          "tagName": "jx-select",
+          "$props": {
+            "label": "Font",
+            "groups": {
+              "$ref": "#/state/faces"
+            },
+            "value": {
+              "$ref": "#/state/face"
+            }
+          },
+          "onchange": {
+            "$ref": "#/state/note"
+          }
+        },
+        {
+          "tagName": "span",
+          "textContent": "${state.face}"
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Swatches, rules, and a row that is only a value"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Drawing channels"
+      },
+      "children": [
+        {
+          "tagName": "jx-select",
+          "$props": {
+            "label": "Colour",
+            "options": {
+              "$ref": "#/state/swatches"
+            },
+            "value": {
+              "$ref": "#/state/swatch"
+            }
+          }
+        },
+        {
+          "tagName": "jx-select",
+          "$props": {
+            "label": "Border style",
+            "options": {
+              "$ref": "#/state/lines"
+            },
+            "value": "dashed"
+          }
+        },
+        {
+          "tagName": "jx-select",
+          "$props": {
+            "label": "Unlisted value",
+            "options": {
+              "$ref": "#/state/lines"
+            },
+            "value": "groove",
+            "help": "groove is in no row, so the element stands one in rather than falling silently to the first."
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Static rows, from the call site"
+    },
+    {
+      "tagName": "p",
+      "textContent": "The default slot takes native option and optgroup elements. Slotted rows are distributed once, at mount, which is why the data path above exists. The first row's value is the empty string: a real, arrow-reachable choice that means inherit, not a placeholder."
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Slotted"
+      },
+      "children": [
+        {
+          "tagName": "jx-select",
+          "$props": {
+            "label": "Alignment"
+          },
+          "children": [
+            {
+              "tagName": "option",
+              "attributes": {
+                "value": ""
+              },
+              "textContent": "Inherit"
+            },
+            {
+              "tagName": "option",
+              "attributes": {
+                "value": "start"
+              },
+              "textContent": "Start"
+            },
+            {
+              "tagName": "option",
+              "attributes": {
+                "value": "center"
+              },
+              "textContent": "Center"
+            },
+            {
+              "tagName": "option",
+              "attributes": {
+                "value": "end"
+              },
+              "textContent": "End"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Sizes and states"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Sizes"
+      },
+      "children": [
+        {
+          "tagName": "jx-select",
+          "$props": {
+            "label": "Small",
+            "size": "sm",
+            "options": {
+              "$ref": "#/state/lines"
+            },
+            "value": "solid"
+          }
+        },
+        {
+          "tagName": "jx-select",
+          "$props": {
+            "label": "Medium",
+            "options": {
+              "$ref": "#/state/lines"
+            },
+            "value": "solid"
+          }
+        },
+        {
+          "tagName": "jx-select",
+          "$props": {
+            "label": "Large",
+            "size": "lg",
+            "options": {
+              "$ref": "#/state/lines"
+            },
+            "value": "solid"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "States"
+      },
+      "children": [
+        {
+          "tagName": "jx-select",
+          "$props": {
+            "label": "Refused",
+            "invalid": true,
+            "error": "Pick a font this project ships.",
+            "options": {
+              "$ref": "#/state/lines"
+            },
+            "value": "dotted"
+          }
+        },
+        {
+          "tagName": "jx-select",
+          "$props": {
+            "label": "Disabled",
+            "disabled": true,
+            "options": {
+              "$ref": "#/state/lines"
+            },
+            "value": "solid"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "In a field row"
+    },
+    {
+      "tagName": "jx-field",
+      "$props": {
+        "label": "Heading font",
+        "description": "Used for every heading in this layout."
+      },
+      "attributes": {
+        "data-prop": "headingFont"
+      },
+      "children": [
+        {
+          "tagName": "jx-select",
+          "$props": {
+            "groups": {
+              "$ref": "#/state/faces"
+            },
+            "value": "system-ui"
+          }
+        }
+      ]
+    }
+  ]
+}

package/stylebook/jx-spinner.json

@@ -0,0 +1,111 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookSpinner",
+  "tagName": "main",
+  "$elements": [
+    { "$ref": "../components/jx-icon.json" },
+    { "$ref": "../components/jx-spinner.json" },
+    { "$ref": "../components/jx-button.json" },
+    { "$ref": "../components/jx-action-button.json" }
+  ],
+  "state": {
+    "steps": ["0", "25", "60", "100"]
+  },
+  "style": {
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "background": "var(--jx-bg)",
+    "padding": "var(--jx-space-6)",
+    "minHeight": "100vh",
+    "& > h1": {
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > p": { "color": "var(--jx-fg-dim)", "margin": "0 0 var(--jx-space-5)" },
+    "& [role=\"group\"]": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "var(--jx-space-3)",
+      "margin": "0 0 var(--jx-space-4)"
+    },
+    "& [role=\"group\"] > span": {
+      "width": "120px",
+      "color": "var(--jx-fg-muted)",
+      "fontSize": "var(--jx-text-sm)"
+    }
+  },
+  "children": [
+    { "tagName": "h1", "textContent": "jx-spinner" },
+    {
+      "tagName": "p",
+      "textContent": "A busy ring. Empty value is indeterminate and spins; a value fills the ring instead. Reduced motion slows the rotation rather than stopping it, because a frozen spinner reads as a hang. It paints in the text colour around it, so it stays visible on a filled button; --jx-spin-color and --jx-spin-track-color are the override."
+    },
+    {
+      "tagName": "div",
+      "attributes": { "role": "group", "aria-label": "Indeterminate sizes" },
+      "children": [
+        { "tagName": "span", "textContent": "indeterminate" },
+        { "tagName": "jx-spinner", "$props": { "size": "sm", "label": "Loading" } },
+        { "tagName": "jx-spinner", "$props": { "label": "Loading" } },
+        { "tagName": "jx-spinner", "$props": { "size": "lg", "label": "Loading" } }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": { "role": "group", "aria-label": "Determinate values" },
+      "children": [
+        { "tagName": "span", "textContent": "determinate" },
+        {
+          "$prototype": "Array",
+          "items": { "$ref": "#/state/steps" },
+          "key": { "$ref": "$map/item" },
+          "map": {
+            "tagName": "jx-spinner",
+            "$props": {
+              "value": { "$ref": "$map/item" },
+              "label": "Importing"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": { "role": "group", "aria-label": "Overridden colours" },
+      "children": [
+        { "tagName": "span", "textContent": "recoloured" },
+        {
+          "tagName": "jx-spinner",
+          "style": { "--jx-spin-color": "var(--jx-accent)" },
+          "$props": { "label": "Loading" }
+        },
+        {
+          "tagName": "jx-spinner",
+          "style": {
+            "--jx-spin-color": "var(--jx-danger)",
+            "--jx-spin-track-color": "var(--jx-border-strong)"
+          },
+          "$props": { "value": "70", "label": "Importing" }
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": { "role": "group", "aria-label": "Buttons that are working" },
+      "children": [
+        { "tagName": "span", "textContent": "in a button" },
+        {
+          "tagName": "jx-button",
+          "$props": { "loading": true, "variant": "accent" },
+          "children": [{ "tagName": "span", "textContent": "Saving" }]
+        },
+        {
+          "tagName": "jx-action-button",
+          "$props": { "icon": "arrows-clockwise", "label": "Refresh", "loading": true }
+        }
+      ]
+    }
+  ]
+}

package/stylebook/jx-split.json

@@ -0,0 +1,170 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookSplit",
+  "tagName": "main",
+  "$elements": [{ "$ref": "../components/jx-split.json" }],
+  "state": {
+    "columns": 0.5,
+    "rows": 0.6,
+    "onColumns": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": { "$ref": "#/state/columns" },
+          "value": { "$ref": "event#/target/value" }
+        }
+      ]
+    },
+    "onRows": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": { "$ref": "#/state/rows" },
+          "value": { "$ref": "event#/target/value" }
+        }
+      ]
+    }
+  },
+  "style": {
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "background": "var(--jx-bg)",
+    "padding": "var(--jx-space-6)",
+    "minHeight": "100vh",
+    "& > h1": {
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > h2": {
+      "fontSize": "var(--jx-text-md)",
+      "fontWeight": "600",
+      "margin": "var(--jx-space-6) 0 var(--jx-space-3)"
+    },
+    "& > p": { "color": "var(--jx-fg-dim)", "margin": "0 0 var(--jx-space-5)" },
+    "& [data-columns]": {
+      "display": "grid",
+      "gridTemplateColumns": "minmax(0, ${state.columns}fr) auto minmax(0, ${1 - state.columns}fr)",
+      "height": "180px",
+      "width": "min(640px, 100%)",
+      "border": "1px solid var(--jx-border)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "overflow": "hidden",
+      "background": "var(--jx-bg-panel)"
+    },
+    "& [data-rows]": {
+      "display": "grid",
+      "gridTemplateRows": "minmax(0, ${state.rows}fr) auto minmax(0, ${1 - state.rows}fr)",
+      "height": "240px",
+      "width": "min(320px, 100%)",
+      "border": "1px solid var(--jx-border)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "overflow": "hidden",
+      "background": "var(--jx-bg-panel)"
+    },
+    "& [data-fixed]": {
+      "display": "grid",
+      "gridTemplateColumns": "minmax(0, 1fr) auto minmax(0, 1fr)",
+      "height": "120px",
+      "width": "min(640px, 100%)",
+      "border": "1px solid var(--jx-border)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "overflow": "hidden",
+      "background": "var(--jx-bg-panel)"
+    },
+    "& [data-side]": {
+      "display": "flex",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "minWidth": "0",
+      "minHeight": "0",
+      "color": "var(--jx-fg-dim)"
+    }
+  },
+  "children": [
+    { "tagName": "h1", "textContent": "jx-split" },
+    {
+      "tagName": "p",
+      "textContent": "A window splitter: role=separator, a real tab stop, and a value that is the leading side's share of the box it divides. It measures that box itself at the start of every gesture, so the gap floor below is honoured in pixels while the value it stores stays a fraction — the same layout survives a window resize with no listener anywhere."
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Vertical — the upright line between two side-by-side panes"
+    },
+    {
+      "tagName": "p",
+      "textContent": "Drag it, or put the caret on it and press Left and Right. Shift takes the larger step, Home and End go to the ends of its legal range, and Enter collapses the split and restores it. gap=120 keeps 120px on each side however the box is resized."
+    },
+    {
+      "tagName": "div",
+      "attributes": { "data-columns": "", "role": "none" },
+      "children": [
+        { "tagName": "div", "attributes": { "data-side": "" }, "textContent": "Navigator" },
+        {
+          "tagName": "jx-split",
+          "$props": {
+            "label": "Navigator and editor",
+            "value": { "$ref": "#/state/columns" },
+            "min": 0.2,
+            "max": 0.8,
+            "gap": 120,
+            "collapse": 0.5
+          },
+          "oninput": { "$ref": "#/state/onColumns" }
+        },
+        { "tagName": "div", "attributes": { "data-side": "" }, "textContent": "Editor" }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Horizontal — the flat line between a stage and a dock"
+    },
+    {
+      "tagName": "p",
+      "textContent": "orientation names the SEPARATOR rather than the axis it moves on, which is ARIA's meaning: a horizontal splitter is the flat line between two stacked boxes, dragged up and down with Up and Down."
+    },
+    {
+      "tagName": "div",
+      "attributes": { "data-rows": "", "role": "none" },
+      "children": [
+        { "tagName": "div", "attributes": { "data-side": "" }, "textContent": "Stage" },
+        {
+          "tagName": "jx-split",
+          "$props": {
+            "label": "Stage and console",
+            "orientation": "horizontal",
+            "value": { "$ref": "#/state/rows" },
+            "min": 0.15,
+            "max": 0.85,
+            "gap": 48
+          },
+          "oninput": { "$ref": "#/state/onRows" }
+        },
+        { "tagName": "div", "attributes": { "data-side": "" }, "textContent": "Console" }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Disabled"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A disabled splitter keeps its box and its announcement and drops out of the tab order: a layout a reader cannot explain is worse than one they cannot change."
+    },
+    {
+      "tagName": "div",
+      "attributes": { "data-fixed": "", "role": "none" },
+      "children": [
+        { "tagName": "div", "attributes": { "data-side": "" }, "textContent": "Fixed" },
+        {
+          "tagName": "jx-split",
+          "$props": { "label": "Fixed split", "disabled": true }
+        },
+        { "tagName": "div", "attributes": { "data-side": "" }, "textContent": "Fixed" }
+      ]
+    }
+  ]
+}