@jxsuite/ui 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Shenk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+# `@jxsuite/ui`
+
+The Jx UI kit: interface elements authored as Jx documents, with the theme and the icons they draw on. Jx Studio's own chrome is built from it, and a site can register the same elements with `registerUi()`.
+
+- `components/`: one document per element (`jx-icon.json`, and so on). Each is a custom-element definition the runtime interprets; nothing here is compiled.
+- `project.json`: the kit as a Jx project. Its `style` block is the theme: every design token, on `:root`, in `light-dark()` pairs. Open this file in Studio to edit the kit on the canvas.
+- `icons/`: `list.json` names the Phosphor glyphs the kit ships; `manifest.json` is generated from it by `bun run build:icons` and committed.
+- `stylebook/`: one page per element showing every variant and state.
+- `src/`: `registerUi()` (registers every element from bundled JSON, with no network), the theme builder, and the icon lookup.
+
+Contract: [`specs/ui.md`](../../specs/ui.md). Embedding contract the kit relies on: [`specs/embedding.md`](../../specs/embedding.md).

package/components/jx-action-button.json

@@ -0,0 +1,414 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxActionButton",
+  "tagName": "jx-action-button",
+  "observedAttributes": [
+    "label",
+    "hint",
+    "icon",
+    "mirror",
+    "weight",
+    "toggles",
+    "selected",
+    "quiet",
+    "emphasized",
+    "size",
+    "disabled",
+    "popovertarget",
+    "popovertargetaction",
+    "command",
+    "commandfor",
+    "stacked",
+    "haspopup",
+    "expanded",
+    "badge"
+  ],
+  "$elements": [
+    {
+      "$ref": "./jx-icon.json"
+    }
+  ],
+  "state": {
+    "label": {
+      "type": "string",
+      "default": "",
+      "attribute": "label",
+      "description": "The accessible name, required: an action button is icon-first, so its name is not on screen. Also its tooltip."
+    },
+    "hint": {
+      "type": "string",
+      "default": "",
+      "attribute": "hint",
+      "description": "The tooltip when it is more than the name: the name with its chord, or with why the button is off. Empty means the label is the tooltip."
+    },
+    "icon": {
+      "type": "string",
+      "default": "",
+      "attribute": "icon",
+      "description": "The glyph, by its name in the kit's manifest. Empty for a text-only action button."
+    },
+    "mirror": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "mirror",
+      "description": "Draw the glyph flipped horizontally: one shipped glyph serves both sides of a pair."
+    },
+    "weight": {
+      "type": "string",
+      "default": "regular",
+      "attribute": "weight",
+      "description": "The glyph's weight: regular, bold or fill. A selected toggle draws fill by convention."
+    },
+    "toggles": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "toggles",
+      "description": "A two-state button: selected flips on activation and aria-pressed says which state it is in."
+    },
+    "selected": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "selected",
+      "description": "The pressed state of a toggling button. A host may hold it: the property wins over the flip."
+    },
+    "quiet": {
+      "type": "boolean",
+      "default": true,
+      "attribute": "quiet",
+      "description": "No fill and no border until hovered, which is what a toolbar wants. Off for a standalone tool button."
+    },
+    "emphasized": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "emphasized",
+      "description": "Draws the selected state in the accent rather than a neutral fill."
+    },
+    "size": {
+      "type": "string",
+      "default": "md",
+      "attribute": "size",
+      "description": "sm, md or lg."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "disabled",
+      "description": "Cannot act. Disabled, never absent."
+    },
+    "stacked": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "stacked",
+      "description": "Icon above the label, the label visible and small: the shape of a rail button. The label is then on screen, so it is the accessible name by itself."
+    },
+    "haspopup": {
+      "type": "string",
+      "default": "",
+      "attribute": "haspopup",
+      "description": "What the button opens instead of running a command: menu, dialog or listbox. Forwarded to the control as aria-haspopup."
+    },
+    "expanded": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "expanded",
+      "description": "Whether what haspopup names is showing. Forwarded to the control as aria-expanded, only when haspopup is set."
+    },
+    "badge": {
+      "type": "string",
+      "default": "",
+      "attribute": "badge",
+      "description": "A count or a mark drawn over the button's corner; empty for none."
+    },
+    "popovertarget": {
+      "type": "string",
+      "default": "",
+      "attribute": "popovertarget",
+      "description": "The popover this button invokes; forwarded to the inner control."
+    },
+    "popovertargetaction": {
+      "type": "string",
+      "default": "",
+      "attribute": "popovertargetaction",
+      "description": "toggle, show or hide; forwarded with popovertarget."
+    },
+    "command": {
+      "type": "string",
+      "default": "",
+      "attribute": "command",
+      "description": "The invoker command this button sends; forwarded to the inner control."
+    },
+    "commandfor": {
+      "type": "string",
+      "default": "",
+      "attribute": "commandfor",
+      "description": "The element the command is sent to; forwarded to the inner control."
+    },
+    "noIcon": {
+      "$expression": {
+        "operator": "!",
+        "target": {
+          "$ref": "#/state/icon"
+        }
+      }
+    },
+    "hasBadge": {
+      "$expression": {
+        "operator": "!==",
+        "target": {
+          "$ref": "#/state/badge"
+        },
+        "value": ""
+      }
+    },
+    "onClick": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "if": {
+            "operator": "&&",
+            "target": {
+              "$ref": "#/state/toggles"
+            },
+            "value": {
+              "operator": "!",
+              "target": {
+                "$ref": "#/state/disabled"
+              }
+            }
+          },
+          "then": [
+            {
+              "operator": "=",
+              "target": {
+                "$ref": "#/state/selected"
+              },
+              "value": {
+                "operator": "!",
+                "target": {
+                  "$ref": "#/state/selected"
+                }
+              }
+            },
+            {
+              "dispatchEvent": "change",
+              "detail": {
+                "$ref": "#/state/selected"
+              },
+              "bubbles": true
+            }
+          ]
+        }
+      ],
+      "emits": [
+        {
+          "name": "change",
+          "description": "A toggling button flipped; detail is the new selected state."
+        }
+      ],
+      "description": "A toggling button flips selected and says so with change. A plain one leaves the click to the host, which listens for it on the element."
+    }
+  },
+  "onclick": {
+    "$ref": "#/state/onClick"
+  },
+  "attributes": {
+    "data-size": "${state.size}",
+    "data-quiet": "${state.quiet ? '' : null}",
+    "data-emphasized": "${state.emphasized ? '' : null}",
+    "data-selected": "${state.toggles && state.selected ? '' : null}",
+    "data-stacked": "${state.stacked ? '' : null}"
+  },
+  "style": {
+    "display": "inline-flex",
+    "verticalAlign": "middle",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "& > [part=\"control\"]": {
+      "appearance": "none",
+      "font": "inherit",
+      "fontFamily": "var(--jx-font-sans)",
+      "fontSize": "var(--jx-text-md)",
+      "display": "inline-flex",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "gap": "var(--jx-space-2)",
+      "minWidth": "var(--jx-control-h)",
+      "minHeight": "var(--jx-control-h)",
+      "margin": "0",
+      "padding": "0 var(--jx-space-2)",
+      "border": "1px solid var(--jx-border-strong)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "background": "var(--jx-bg-input)",
+      "color": "var(--jx-fg-dim)",
+      "cursor": "pointer",
+      "whiteSpace": "nowrap",
+      "outline": "none",
+      "transition": "background var(--jx-dur-1) var(--jx-ease-out), color var(--jx-dur-1) var(--jx-ease-out)",
+      ":hover": {
+        "background": "var(--jx-hover-bg)",
+        "color": "var(--jx-fg)"
+      },
+      ":focus-visible": {
+        "outline": "var(--jx-focus-ring)",
+        "outlineOffset": "2px"
+      },
+      ":disabled": {
+        "opacity": "0.5",
+        "cursor": "default"
+      },
+      "position": "relative"
+    },
+    "&[data-quiet] > [part=\"control\"]": {
+      "background": "transparent",
+      "borderColor": "transparent",
+      ":hover": {
+        "background": "var(--jx-hover-bg)"
+      }
+    },
+    "&[data-stacked] > [part=\"control\"]": {
+      "flexDirection": "column",
+      "gap": "2px",
+      "width": "100%",
+      "minWidth": "0",
+      "padding": "var(--jx-space-2) var(--jx-space-1)",
+      "borderRadius": "0",
+      "fontSize": "var(--jx-text-xs)",
+      "lineHeight": "var(--jx-leading-xs)"
+    },
+    "&[data-stacked] > [part=\"control\"] > [part=\"label\"]": {
+      "maxWidth": "100%",
+      "overflow": "hidden",
+      "textOverflow": "ellipsis",
+      "whiteSpace": "nowrap"
+    },
+    "&[data-selected] > [part=\"control\"]": {
+      "background": "var(--jx-accent-15)",
+      "color": "var(--jx-fg)"
+    },
+    "&[data-selected][data-emphasized] > [part=\"control\"]": {
+      "background": "var(--jx-accent-solid)",
+      "color": "var(--jx-accent-fg)"
+    },
+    "&[data-size=\"sm\"] > [part=\"control\"]": {
+      "minWidth": "calc(var(--jx-control-h) - 4px)",
+      "minHeight": "calc(var(--jx-control-h) - 4px)",
+      "padding": "0 var(--jx-space-1)"
+    },
+    "&[data-size=\"lg\"] > [part=\"control\"]": {
+      "minWidth": "calc(var(--jx-control-h) + 8px)",
+      "minHeight": "calc(var(--jx-control-h) + 8px)",
+      "padding": "0 var(--jx-space-3)"
+    },
+    "& [part=\"icon\"]": {
+      "display": "inline-flex",
+      "color": "inherit"
+    },
+    "& [part=\"icon\"][hidden]": {
+      "display": "none"
+    },
+    "& [part=\"label\"]:empty": {
+      "display": "none"
+    },
+    "& [part=\"badge\"]": {
+      "position": "absolute",
+      "top": "2px",
+      "right": "2px",
+      "minWidth": "16px",
+      "height": "16px",
+      "padding": "0 4px",
+      "boxSizing": "border-box",
+      "borderRadius": "8px",
+      "background": "var(--jx-accent-solid)",
+      "color": "var(--jx-accent-fg)",
+      "fontSize": "var(--jx-text-xs)",
+      "lineHeight": "16px",
+      "textAlign": "center",
+      "pointerEvents": "none"
+    }
+  },
+  "children": [
+    {
+      "tagName": "button",
+      "attributes": {
+        "part": "control",
+        "type": "button",
+        "disabled": {
+          "$ref": "#/state/disabled"
+        },
+        "aria-label": "${state.label || null}",
+        "title": "${state.hint || state.label || null}",
+        "aria-pressed": "${state.toggles ? (state.selected ? 'true' : 'false') : null}",
+        "popovertarget": "${state.popovertarget || null}",
+        "popovertargetaction": "${state.popovertargetaction || null}",
+        "command": "${state.command || null}",
+        "commandfor": "${state.commandfor || null}",
+        "aria-haspopup": "${state.haspopup || null}",
+        "aria-expanded": "${state.haspopup ? (state.expanded ? 'true' : 'false') : null}"
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "attributes": {
+            "part": "icon"
+          },
+          "hidden": {
+            "$ref": "#/state/noIcon"
+          },
+          "children": [
+            {
+              "tagName": "jx-icon",
+              "$props": {
+                "name": {
+                  "$ref": "#/state/icon"
+                },
+                "weight": {
+                  "$ref": "#/state/weight"
+                },
+                "mirror": {
+                  "$ref": "#/state/mirror"
+                }
+              },
+              "attributes": {
+                "part": "icon-glyph"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "span",
+          "attributes": {
+            "part": "label"
+          },
+          "children": [
+            {
+              "tagName": "slot",
+              "attributes": {
+                "part": "label-slot"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "span",
+          "attributes": {
+            "part": "badge-slot"
+          },
+          "$switch": {
+            "$ref": "#/state/hasBadge"
+          },
+          "cases": {
+            "true": {
+              "tagName": "span",
+              "attributes": {
+                "part": "badge",
+                "aria-hidden": "true"
+              },
+              "textContent": "${state.badge}"
+            }
+          }
+        }
+      ]
+    }
+  ]
+}