@viax.io/uxm 4.38.0 → 4.40.0

package/dist/studio/lib/registry/composite/side-flexpane.cjs

@@ -0,0 +1,51 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var side_flexpane_exports = {};
+__export(side_flexpane_exports, {
+  sideFlexpaneDef: () => sideFlexpaneDef
+});
+module.exports = __toCommonJS(side_flexpane_exports);
+const sideFlexpaneDef = {
+  id: "side-flexpane",
+  name: "Side Flexpane",
+  category: "Composite",
+  description: "Right-sliding edit panel with header, scrollable body, and footer actions.",
+  styleProperties: [
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+    { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 0, min: 0, max: 20, step: 1, unit: "px" },
+    { key: "width", label: "Width", control: "number", defaultValue: 380, min: 280, max: 520, step: 20, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 24, min: 12, max: 40, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 16, min: 8, max: 32, step: 2, unit: "px" },
+    { key: "titleSize", label: "Title Size", control: "number", defaultValue: 16, min: 13, max: 22, step: 1, unit: "px" },
+    { key: "labelColor", label: "Label Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" }
+  ],
+  layoutVariants: [],
+  events: [
+    { name: "onClose", description: "Fires when the user dismisses the flexpane via the close affordance or backdrop click.", payload: "void" },
+    { name: "onResize", description: "Fires while the user drags the left-edge handle to resize. Final width on drag end.", payload: "{ width: number }" },
+    { name: "onBack", description: "Fires when the user clicks the back-link bar (rendered only when `onBack` is set).", payload: "void" },
+    { name: "onExpandedChange", description: "Fires with the next expanded state when the maximize toggle is clicked (`expandable`).", payload: "{ expanded: boolean }" }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  sideFlexpaneDef
+});
+//# sourceMappingURL=side-flexpane.cjs.map

package/dist/studio/lib/registry/composite/side-flexpane.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/side-flexpane.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const sideFlexpaneDef: ComponentDef = {\n  id: 'side-flexpane',\n  name: 'Side Flexpane',\n  category: 'Composite',\n  description: 'Right-sliding edit panel with header, scrollable body, and footer actions.',\n  styleProperties: [\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n    { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 0, min: 0, max: 20, step: 1, unit: 'px' },\n    { key: 'width', label: 'Width', control: 'number', defaultValue: 380, min: 280, max: 520, step: 20, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 24, min: 12, max: 40, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 16, min: 8, max: 32, step: 2, unit: 'px' },\n    { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 16, min: 13, max: 22, step: 1, unit: 'px' },\n    { key: 'labelColor', label: 'Label Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n  ],\n  layoutVariants: [],\n  events: [\n    { name: 'onClose', description: 'Fires when the user dismisses the flexpane via the close affordance or backdrop click.', payload: 'void' },\n    { name: 'onResize', description: 'Fires while the user drags the left-edge handle to resize. Final width on drag end.', payload: '{ width: number }' },\n    { name: 'onBack', description: 'Fires when the user clicks the back-link bar (rendered only when `onBack` is set).', payload: 'void' },\n    { name: 'onExpandedChange', description: 'Fires with the next expanded state when the maximize toggle is clicked (`expandable`).', payload: '{ expanded: boolean }' },\n  ],\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,kBAAgC;AAAA,EAC3C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,SAAS,cAAc,uBAAuB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxH,EAAE,KAAK,SAAS,OAAO,SAAS,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,KAAK,MAAM,IAAI,MAAM,KAAK;AAAA,IAC/G,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAClH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACjH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACpH,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,SAAS,cAAc,2BAA2B,SAAS,SAAS;AAAA,EAC1H;AAAA,EACA,gBAAgB,CAAC;AAAA,EACjB,QAAQ;AAAA,IACN,EAAE,MAAM,WAAW,aAAa,0FAA0F,SAAS,OAAO;AAAA,IAC1I,EAAE,MAAM,YAAY,aAAa,uFAAuF,SAAS,oBAAoB;AAAA,IACrJ,EAAE,MAAM,UAAU,aAAa,sFAAsF,SAAS,OAAO;AAAA,IACrI,EAAE,MAAM,oBAAoB,aAAa,0FAA0F,SAAS,wBAAwB;AAAA,EACtK;AACF;","names":[]}

package/dist/studio/lib/registry/composite/side-flexpane.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentDef } from '../../types.js';
+export declare const sideFlexpaneDef: ComponentDef;
+//# sourceMappingURL=side-flexpane.d.ts.map

package/dist/studio/lib/registry/composite/side-flexpane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-flexpane.d.ts","sourceRoot":"","sources":["../../../../../src/studio/lib/registry/composite/side-flexpane.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,eAAe,EAAE,YAsB7B,CAAC"}

package/dist/studio/lib/registry/composite/side-flexpane.js

@@ -0,0 +1,27 @@
+const sideFlexpaneDef = {
+  id: "side-flexpane",
+  name: "Side Flexpane",
+  category: "Composite",
+  description: "Right-sliding edit panel with header, scrollable body, and footer actions.",
+  styleProperties: [
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+    { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 0, min: 0, max: 20, step: 1, unit: "px" },
+    { key: "width", label: "Width", control: "number", defaultValue: 380, min: 280, max: 520, step: 20, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 24, min: 12, max: 40, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 16, min: 8, max: 32, step: 2, unit: "px" },
+    { key: "titleSize", label: "Title Size", control: "number", defaultValue: 16, min: 13, max: 22, step: 1, unit: "px" },
+    { key: "labelColor", label: "Label Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" }
+  ],
+  layoutVariants: [],
+  events: [
+    { name: "onClose", description: "Fires when the user dismisses the flexpane via the close affordance or backdrop click.", payload: "void" },
+    { name: "onResize", description: "Fires while the user drags the left-edge handle to resize. Final width on drag end.", payload: "{ width: number }" },
+    { name: "onBack", description: "Fires when the user clicks the back-link bar (rendered only when `onBack` is set).", payload: "void" },
+    { name: "onExpandedChange", description: "Fires with the next expanded state when the maximize toggle is clicked (`expandable`).", payload: "{ expanded: boolean }" }
+  ]
+};
+export {
+  sideFlexpaneDef
+};
+//# sourceMappingURL=side-flexpane.js.map

package/dist/studio/lib/registry/composite/side-flexpane.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/side-flexpane.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const sideFlexpaneDef: ComponentDef = {\n  id: 'side-flexpane',\n  name: 'Side Flexpane',\n  category: 'Composite',\n  description: 'Right-sliding edit panel with header, scrollable body, and footer actions.',\n  styleProperties: [\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n    { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 0, min: 0, max: 20, step: 1, unit: 'px' },\n    { key: 'width', label: 'Width', control: 'number', defaultValue: 380, min: 280, max: 520, step: 20, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 24, min: 12, max: 40, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 16, min: 8, max: 32, step: 2, unit: 'px' },\n    { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 16, min: 13, max: 22, step: 1, unit: 'px' },\n    { key: 'labelColor', label: 'Label Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n  ],\n  layoutVariants: [],\n  events: [\n    { name: 'onClose', description: 'Fires when the user dismisses the flexpane via the close affordance or backdrop click.', payload: 'void' },\n    { name: 'onResize', description: 'Fires while the user drags the left-edge handle to resize. Final width on drag end.', payload: '{ width: number }' },\n    { name: 'onBack', description: 'Fires when the user clicks the back-link bar (rendered only when `onBack` is set).', payload: 'void' },\n    { name: 'onExpandedChange', description: 'Fires with the next expanded state when the maximize toggle is clicked (`expandable`).', payload: '{ expanded: boolean }' },\n  ],\n};\n"],"mappings":"AAEO,MAAM,kBAAgC;AAAA,EAC3C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,SAAS,cAAc,uBAAuB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxH,EAAE,KAAK,SAAS,OAAO,SAAS,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,KAAK,MAAM,IAAI,MAAM,KAAK;AAAA,IAC/G,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAClH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACjH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACpH,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,SAAS,cAAc,2BAA2B,SAAS,SAAS;AAAA,EAC1H;AAAA,EACA,gBAAgB,CAAC;AAAA,EACjB,QAAQ;AAAA,IACN,EAAE,MAAM,WAAW,aAAa,0FAA0F,SAAS,OAAO;AAAA,IAC1I,EAAE,MAAM,YAAY,aAAa,uFAAuF,SAAS,oBAAoB;AAAA,IACrJ,EAAE,MAAM,UAAU,aAAa,sFAAsF,SAAS,OAAO;AAAA,IACrI,EAAE,MAAM,oBAAoB,aAAa,0FAA0F,SAAS,wBAAwB;AAAA,EACtK;AACF;","names":[]}

package/dist/studio/lib/registry/composite/sidebar-nav-item.cjs

@@ -0,0 +1,95 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var sidebar_nav_item_exports = {};
+__export(sidebar_nav_item_exports, {
+  sidebarNavItemDef: () => sidebarNavItemDef
+});
+module.exports = __toCommonJS(sidebar_nav_item_exports);
+const sidebarNavItemDef = {
+  id: "sidebar-nav-item",
+  name: "Sidebar Nav Item",
+  category: "Composite",
+  description: 'Icon + label row used in the left navigation. State knobs cover default / hover / focus / active / disabled across the row \u2014 the active state is the currently-selected nav item (renders with `aria-current="page"`). Icon tile and sizing are shared across every state.',
+  styleProperties: [
+    // ── Per-state row colors. Filtered into a single "States" section
+    // by the State variant. Each state owns both bg and text knobs
+    // (the row is opaque enough that bg matters). Focus is the
+    // exception — text knob plus the standalone ring.
+    { key: "inactiveBg", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "default" } },
+    { key: "inactiveText", label: "Text Color", control: "color", defaultValue: "var(--color-text-strong)", section: "states", showWhen: { state: "default" } },
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-surface) 60%, transparent)", section: "states", showWhen: { state: "hover" } },
+    { key: "hoverText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+    { key: "focusText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+    { key: "activeBg", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { state: "active" } },
+    { key: "activeText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "disabled" } },
+    { key: "disabledText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+    // Focus ring + disabled opacity in their own sections.
+    { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // ── Shared sizing (applies to every state)
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 10, min: 4, max: 16, step: 1, unit: "px" },
+    { key: "gap", label: "Icon Gap", control: "number", defaultValue: 10, min: 4, max: 20, step: 1, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px" },
+    { key: "fontWeight", label: "Font Weight", control: "select", defaultValue: "500", options: ["400", "500", "600", "700"] },
+    // ── Icon tile (sub-element, shared across every state)
+    { key: "iconBg", label: "Icon Tile Bg", control: "color", defaultValue: "var(--color-surface-alt)", section: "icon" },
+    { key: "iconColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "icon" },
+    { key: "iconBoxSize", label: "Icon Tile Size", control: "number", defaultValue: 24, min: 16, max: 36, step: 2, unit: "px", section: "icon" },
+    { key: "iconRadius", label: "Icon Tile Radius", control: "slider", defaultValue: 6, min: 0, max: 12, step: 1, unit: "px", section: "icon" },
+    { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 14, min: 10, max: 24, step: 1, unit: "px", section: "icon" }
+  ],
+  layoutVariants: [
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "active", label: "Active" },
+        { value: "disabled", label: "Disabled" }
+      ],
+      defaultValue: "default"
+    },
+    {
+      // Persistent badge slot demo — the preview renders a sample marker
+      // (a checkmark or a count pill) in the always-visible `badge` slot so
+      // its look can be verified next to the hover-reveal trailing slot.
+      key: "badge",
+      label: "Badge",
+      options: [
+        { value: "off", label: "Off" },
+        { value: "check", label: "Checkmark" },
+        { value: "count", label: "Count" }
+      ],
+      defaultValue: "off"
+    }
+  ],
+  events: [
+    { name: "onClick", description: "Fires when the user clicks the nav item (or activates it via Enter).", payload: "MouseEvent" }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  sidebarNavItemDef
+});
+//# sourceMappingURL=sidebar-nav-item.cjs.map

package/dist/studio/lib/registry/composite/sidebar-nav-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/sidebar-nav-item.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const sidebarNavItemDef: ComponentDef = {\n  id: 'sidebar-nav-item',\n  name: 'Sidebar Nav Item',\n  category: 'Composite',\n  description: 'Icon + label row used in the left navigation. State knobs cover default / hover / focus / active / disabled across the row — the active state is the currently-selected nav item (renders with `aria-current=\"page\"`). Icon tile and sizing are shared across every state.',\n  styleProperties: [\n    // ── Per-state row colors. Filtered into a single \"States\" section\n    // by the State variant. Each state owns both bg and text knobs\n    // (the row is opaque enough that bg matters). Focus is the\n    // exception — text knob plus the standalone ring.\n    { key: 'inactiveBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'states', showWhen: { state: 'default' } },\n    { key: 'inactiveText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'states', showWhen: { state: 'default' } },\n    { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-surface) 60%, transparent)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'hoverText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'focusText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n    { key: 'activeBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'activeText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'states', showWhen: { state: 'disabled' } },\n    { key: 'disabledText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n    // Focus ring + disabled opacity in their own sections.\n    { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // ── Shared sizing (applies to every state)\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 10, min: 4, max: 16, step: 1, unit: 'px' },\n    { key: 'gap', label: 'Icon Gap', control: 'number', defaultValue: 10, min: 4, max: 20, step: 1, unit: 'px' },\n    { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 13, min: 11, max: 18, step: 1, unit: 'px' },\n    { key: 'fontWeight', label: 'Font Weight', control: 'select', defaultValue: '500', options: ['400', '500', '600', '700'] },\n    // ── Icon tile (sub-element, shared across every state)\n    { key: 'iconBg', label: 'Icon Tile Bg', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'icon' },\n    { key: 'iconColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'icon' },\n    { key: 'iconBoxSize', label: 'Icon Tile Size', control: 'number', defaultValue: 24, min: 16, max: 36, step: 2, unit: 'px', section: 'icon' },\n    { key: 'iconRadius', label: 'Icon Tile Radius', control: 'slider', defaultValue: 6, min: 0, max: 12, step: 1, unit: 'px', section: 'icon' },\n    { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 14, min: 10, max: 24, step: 1, unit: 'px', section: 'icon' },\n  ],\n  layoutVariants: [\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'active', label: 'Active' },\n        { value: 'disabled', label: 'Disabled' },\n      ],\n      defaultValue: 'default',\n    },\n    {\n      // Persistent badge slot demo — the preview renders a sample marker\n      // (a checkmark or a count pill) in the always-visible `badge` slot so\n      // its look can be verified next to the hover-reveal trailing slot.\n      key: 'badge',\n      label: 'Badge',\n      options: [\n        { value: 'off', label: 'Off' },\n        { value: 'check', label: 'Checkmark' },\n        { value: 'count', label: 'Count' },\n      ],\n      defaultValue: 'off',\n    },\n  ],\n  events: [\n    { name: 'onClick', description: 'Fires when the user clicks the nav item (or activates it via Enter).', payload: 'MouseEvent' },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/composite/sidebar-nav-item.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentDef } from '../../types.js';
+export declare const sidebarNavItemDef: ComponentDef;
+//# sourceMappingURL=sidebar-nav-item.d.ts.map

package/dist/studio/lib/registry/composite/sidebar-nav-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-nav-item.d.ts","sourceRoot":"","sources":["../../../../../src/studio/lib/registry/composite/sidebar-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,iBAAiB,EAAE,YAkE/B,CAAC"}

package/dist/studio/lib/registry/composite/sidebar-nav-item.js

@@ -0,0 +1,71 @@
+const sidebarNavItemDef = {
+  id: "sidebar-nav-item",
+  name: "Sidebar Nav Item",
+  category: "Composite",
+  description: 'Icon + label row used in the left navigation. State knobs cover default / hover / focus / active / disabled across the row \u2014 the active state is the currently-selected nav item (renders with `aria-current="page"`). Icon tile and sizing are shared across every state.',
+  styleProperties: [
+    // ── Per-state row colors. Filtered into a single "States" section
+    // by the State variant. Each state owns both bg and text knobs
+    // (the row is opaque enough that bg matters). Focus is the
+    // exception — text knob plus the standalone ring.
+    { key: "inactiveBg", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "default" } },
+    { key: "inactiveText", label: "Text Color", control: "color", defaultValue: "var(--color-text-strong)", section: "states", showWhen: { state: "default" } },
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-surface) 60%, transparent)", section: "states", showWhen: { state: "hover" } },
+    { key: "hoverText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+    { key: "focusText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+    { key: "activeBg", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { state: "active" } },
+    { key: "activeText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "disabled" } },
+    { key: "disabledText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+    // Focus ring + disabled opacity in their own sections.
+    { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // ── Shared sizing (applies to every state)
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 10, min: 4, max: 16, step: 1, unit: "px" },
+    { key: "gap", label: "Icon Gap", control: "number", defaultValue: 10, min: 4, max: 20, step: 1, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px" },
+    { key: "fontWeight", label: "Font Weight", control: "select", defaultValue: "500", options: ["400", "500", "600", "700"] },
+    // ── Icon tile (sub-element, shared across every state)
+    { key: "iconBg", label: "Icon Tile Bg", control: "color", defaultValue: "var(--color-surface-alt)", section: "icon" },
+    { key: "iconColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "icon" },
+    { key: "iconBoxSize", label: "Icon Tile Size", control: "number", defaultValue: 24, min: 16, max: 36, step: 2, unit: "px", section: "icon" },
+    { key: "iconRadius", label: "Icon Tile Radius", control: "slider", defaultValue: 6, min: 0, max: 12, step: 1, unit: "px", section: "icon" },
+    { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 14, min: 10, max: 24, step: 1, unit: "px", section: "icon" }
+  ],
+  layoutVariants: [
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "active", label: "Active" },
+        { value: "disabled", label: "Disabled" }
+      ],
+      defaultValue: "default"
+    },
+    {
+      // Persistent badge slot demo — the preview renders a sample marker
+      // (a checkmark or a count pill) in the always-visible `badge` slot so
+      // its look can be verified next to the hover-reveal trailing slot.
+      key: "badge",
+      label: "Badge",
+      options: [
+        { value: "off", label: "Off" },
+        { value: "check", label: "Checkmark" },
+        { value: "count", label: "Count" }
+      ],
+      defaultValue: "off"
+    }
+  ],
+  events: [
+    { name: "onClick", description: "Fires when the user clicks the nav item (or activates it via Enter).", payload: "MouseEvent" }
+  ]
+};
+export {
+  sidebarNavItemDef
+};
+//# sourceMappingURL=sidebar-nav-item.js.map

package/dist/studio/lib/registry/composite/sidebar-nav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/sidebar-nav-item.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const sidebarNavItemDef: ComponentDef = {\n  id: 'sidebar-nav-item',\n  name: 'Sidebar Nav Item',\n  category: 'Composite',\n  description: 'Icon + label row used in the left navigation. State knobs cover default / hover / focus / active / disabled across the row — the active state is the currently-selected nav item (renders with `aria-current=\"page\"`). Icon tile and sizing are shared across every state.',\n  styleProperties: [\n    // ── Per-state row colors. Filtered into a single \"States\" section\n    // by the State variant. Each state owns both bg and text knobs\n    // (the row is opaque enough that bg matters). Focus is the\n    // exception — text knob plus the standalone ring.\n    { key: 'inactiveBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'states', showWhen: { state: 'default' } },\n    { key: 'inactiveText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'states', showWhen: { state: 'default' } },\n    { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-surface) 60%, transparent)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'hoverText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'focusText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n    { key: 'activeBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'activeText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'states', showWhen: { state: 'disabled' } },\n    { key: 'disabledText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n    // Focus ring + disabled opacity in their own sections.\n    { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // ── Shared sizing (applies to every state)\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 10, min: 4, max: 16, step: 1, unit: 'px' },\n    { key: 'gap', label: 'Icon Gap', control: 'number', defaultValue: 10, min: 4, max: 20, step: 1, unit: 'px' },\n    { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 13, min: 11, max: 18, step: 1, unit: 'px' },\n    { key: 'fontWeight', label: 'Font Weight', control: 'select', defaultValue: '500', options: ['400', '500', '600', '700'] },\n    // ── Icon tile (sub-element, shared across every state)\n    { key: 'iconBg', label: 'Icon Tile Bg', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'icon' },\n    { key: 'iconColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'icon' },\n    { key: 'iconBoxSize', label: 'Icon Tile Size', control: 'number', defaultValue: 24, min: 16, max: 36, step: 2, unit: 'px', section: 'icon' },\n    { key: 'iconRadius', label: 'Icon Tile Radius', control: 'slider', defaultValue: 6, min: 0, max: 12, step: 1, unit: 'px', section: 'icon' },\n    { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 14, min: 10, max: 24, step: 1, unit: 'px', section: 'icon' },\n  ],\n  layoutVariants: [\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'active', label: 'Active' },\n        { value: 'disabled', label: 'Disabled' },\n      ],\n      defaultValue: 'default',\n    },\n    {\n      // Persistent badge slot demo — the preview renders a sample marker\n      // (a checkmark or a count pill) in the always-visible `badge` slot so\n      // its look can be verified next to the hover-reveal trailing slot.\n      key: 'badge',\n      label: 'Badge',\n      options: [\n        { value: 'off', label: 'Off' },\n        { value: 'check', label: 'Checkmark' },\n        { value: 'count', label: 'Count' },\n      ],\n      defaultValue: 'off',\n    },\n  ],\n  events: [\n    { name: 'onClick', description: 'Fires when the user clicks the nav item (or activates it via Enter).', payload: 'MouseEvent' },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/composite/sidebar-nav-trigger.cjs

@@ -0,0 +1,224 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var sidebar_nav_trigger_exports = {};
+__export(sidebar_nav_trigger_exports, {
+  sidebarNavTriggerDef: () => sidebarNavTriggerDef
+});
+module.exports = __toCommonJS(sidebar_nav_trigger_exports);
+const sidebarNavTriggerDef = {
+  id: "sidebar-nav-trigger",
+  name: "Sidebar Nav Trigger",
+  category: "Composite",
+  description: "A rail row that OPENS something rather than navigating to it \u2014 a workspace switcher, an account menu, an environment picker. A <button> extending ButtonHTMLAttributes, so a Menu's or Listbox's `triggerProps` spread straight onto it, ref and ARIA included. Four optional slots: icon (a bare Icon in a switcher, an Avatar in the account row), caption (the small line beside the value; captionPlacement 'above' | 'below', default above \u2014 above LABELS the level this control changes, below QUALIFIES the value), children (the value) and trailing (the chevron \u2014 shown as soon as it is passed; no hover-reveal, unlike Sidebar Nav Item's trailing slot. The Trailing picker here decides whether the showcase PASSES the slot at all, exactly like Mark and Caption \u2014 it is not a visibility gate in the component). The atom draws NO tile behind the icon: it reserves the slot, sizes it, aligns it, and paints nothing. And it reserves nothing it was not given \u2014 no icon and the text starts at the padding edge, no caption and the value centres, no trailing and there is no gap where a chevron would have been. Sibling of Sidebar Nav Item rather than a variant of it: that one renders an <a>, hides trailing until hover, paints an icon tile and has a single-line label. `collapsed` renders it for a 64px rail: a 46px tile, the chevron dropped, and caption + value clipped but kept in the DOM so the accessible name survives. Pair it with a 32px mark. See the collapsed prop below for the reasoning.",
+  styleProperties: [
+    // ── Per-state surface. Hover and open paint the SAME thing in both
+    // variants, so they share one knob — a second one would only let a
+    // designer make them disagree, and they mean the same thing to the eye.
+    // Open has no prop: it is read from [aria-expanded="true"], which Menu
+    // and Listbox already set through triggerProps.
+    { key: "bg", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "default" } },
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { state: ["hover", "open"] } },
+    { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Dimmed, not recoloured — a disabled `outlined` trigger has to stay the
+    // same box. One opacity covers both variants, so there is nothing to keep
+    // in sync between them.
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.45, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // ── The outlined variant's resting chrome. The border is deliberately
+    // NOT per-state: it holds through hover and open, because a border that
+    // moved too would be a second signal for a fact the surface carries.
+    { key: "outlinedBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "outlined", showWhen: { variant: "outlined" } },
+    { key: "outlinedBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "outlined", showWhen: { variant: "outlined" } },
+    // ── The value.
+    // Gated on `collapsed: no` — the collapsed row clips its text away, so
+    // every type knob below is a slider with no visible effect there. Same
+    // reasoning for the caption group, the trailing colour, and padding/gap.
+    { key: "valueColor", label: "Color", control: "color", defaultValue: "var(--color-text)", section: "value", showWhen: { collapsed: "no" } },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 11, max: 18, step: 1, unit: "px", section: "value", showWhen: { collapsed: "no" } },
+    { key: "fontWeight", label: "Font Weight", control: "select", defaultValue: "500", options: ["400", "500", "600", "700"], section: "value", showWhen: { collapsed: "no" } },
+    // ── The caption. Muted is under the AA text floor on the card surface
+    // (2.54:1), which is acceptable here ONLY because a caption names the
+    // control rather than carrying content — the value beneath it is the
+    // content. Swap to --color-text-strong if that ever stops being true.
+    { key: "captionColor", label: "Color", control: "color", defaultValue: "var(--color-text-muted)", section: "caption", showWhen: { withCaption: "yes", collapsed: "no" } },
+    { key: "captionFontSize", label: "Font Size", control: "number", defaultValue: 10, min: 8, max: 14, step: 1, unit: "px", section: "caption", showWhen: { withCaption: "yes", collapsed: "no" } },
+    { key: "captionFontWeight", label: "Font Weight", control: "select", defaultValue: "500", options: ["400", "500", "600", "700"], section: "caption", showWhen: { withCaption: "yes", collapsed: "no" } },
+    // Uppercase is the DEFAULT, not the definition — an eyebrow in most rails,
+    // but a sentence-case caption under an address is the same slot read
+    // differently, and a brand font may not carry caps well. Paired knob: the
+    // tracking below exists to open up caps, so turning this off usually means
+    // turning that down too.
+    { key: "captionTextTransform", label: "Text Transform", control: "select", defaultValue: "uppercase", options: ["uppercase", "none", "capitalize", "lowercase"], section: "caption", showWhen: { withCaption: "yes", collapsed: "no" } },
+    // A number in `em`, not a free-text CSS length: the unit is fixed, so the
+    // only thing a text field adds is the chance to type `6px` (catastrophic
+    // tracking at a 10px caption) or a bare `0.06`, which is invalid CSS the
+    // browser drops in silence. `em` and not `px` so the tracking scales with
+    // the caption's own size — and with the brand font, which Brand Settings
+    // can change under it.
+    { key: "captionLetterSpacing", label: "Letter Spacing", control: "number", defaultValue: 0.06, min: 0, max: 0.2, step: 0.01, unit: "em", section: "caption", showWhen: { withCaption: "yes", collapsed: "no" } },
+    { key: "captionGap", label: "Row Gap", control: "number", defaultValue: 2, min: 0, max: 8, step: 1, unit: "px", section: "caption", showWhen: { withCaption: "yes", collapsed: "no" } },
+    // ── The mark. `iconSize` is a MIN box, not a fixed one: it reserves and
+    // aligns without squeezing a child that brings its own size (an Avatar).
+    // Gated to the Icon mark alone. Being a FLOOR, it does nothing while it
+    // sits below the mark's own size — measured, a 32px `Avatar size='small'`
+    // in a 28px slot yields a 32px slot, and Avatar's 40px default is further
+    // out still. Exposed for Avatar it was a knob a designer drags through its
+    // whole default range for no visible effect, waking up only past 32. The
+    // lever that actually sizes an avatar is Avatar's own `size` preset; two
+    // knobs competing to answer "how big is the mark" is worse than one.
+    { key: "iconSize", label: "Slot Size", control: "number", defaultValue: 28, min: 16, max: 44, step: 2, unit: "px", section: "icon", showWhen: { mark: "icon" } },
+    // Only the Icon mark inherits this colour — an Avatar paints itself.
+    { key: "iconColor", label: "Color", control: "color", defaultValue: "var(--color-text-strong)", section: "icon", showWhen: { mark: "icon" } },
+    { key: "trailingColor", label: "Color", control: "color", defaultValue: "var(--color-text-muted)", section: "trailing", showWhen: { withTrailing: "yes", collapsed: "no" } },
+    // ── Shared sizing. Padding and gap are the two that STOP applying when
+    // collapsed (the tile sets `padding: 0` and has one in-flow child left),
+    // so they are gated; radius still paints the 32x32 box and stays.
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 1, unit: "px", showWhen: { collapsed: "no" } },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 8, min: 4, max: 16, step: 1, unit: "px", showWhen: { collapsed: "no" } },
+    { key: "gap", label: "Gap", control: "number", defaultValue: 10, min: 2, max: 20, step: 1, unit: "px", showWhen: { collapsed: "no" } },
+    { key: "borderRadius", label: "Radius", control: "slider", defaultValue: 8, min: 0, max: 20, step: 1, unit: "px" },
+    // The collapsed tile's own footprint — a MINIMUM, so a mark larger than it
+    // (an `Avatar`) grows the row rather than being clipped. 46px deliberately
+    // differs from the 32px `app-sidebar` gives its collapsed nav items: a
+    // trigger has lost its chevron and its text at rail width, so footprint is
+    // the only thing left saying it opens something rather than navigating.
+    // It is also a composition choice: the tile is a surface AROUND the mark,
+    // so a 32px mark (`Avatar size="small"`) sits with ~7px on every side,
+    // mirroring `sidebar-nav-item`'s 32px tile around a smaller icon.
+    { key: "collapsedSize", label: "Tile Size", control: "number", defaultValue: 46, min: 24, max: 64, step: 2, unit: "px", showWhen: { collapsed: "yes" } }
+  ],
+  layoutVariants: [
+    {
+      key: "variant",
+      label: "Variant",
+      options: [
+        { value: "outlined", label: "Outlined" },
+        { value: "plain", label: "Plain" }
+      ],
+      defaultValue: "outlined"
+    },
+    {
+      // `open` and `disabled` are not classes the showcase fakes — it applies
+      // the real `aria-expanded="true"` and the real `disabled` attribute,
+      // which ARE the atom's selectors for those states, so the picker
+      // exercises the production mechanism. Only `hover` / `focus` need the
+      // kit's `--state-*` forced classes (a pointer and the tab ring cannot be
+      // parked on demand); those share a declaration block with the real
+      // pseudo-selectors and so cannot drift from them.
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "open", label: "Open" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" }
+      ],
+      defaultValue: "default"
+    },
+    {
+      // The mark slot takes either kind of child, and `Avatar` is the case
+      // worth being able to see: it proves the slot paints no tile and does
+      // not squeeze a child that brings its own size. `None` is here for the
+      // same reason as the other two slot pickers — to show what the atom
+      // does NOT reserve: turn a slot off and the row closes up rather than
+      // leaving a hole. The showcase's caption and value follow this pick,
+      // since an avatar beside a workspace name would misrepresent the atom.
+      key: "mark",
+      label: "Mark",
+      options: [
+        { value: "icon", label: "Icon" },
+        { value: "avatar", label: "Avatar" },
+        { value: "none", label: "None" }
+      ],
+      defaultValue: "icon"
+    },
+    {
+      // The 64px rail. Its own picker rather than a value on `state`, because
+      // it is orthogonal to every state — a collapsed row still hovers, opens
+      // and disables, and folding the two would make five of those
+      // combinations unreachable.
+      key: "collapsed",
+      label: "Rail",
+      options: [
+        { value: "no", label: "Expanded" },
+        { value: "yes", label: "Collapsed" }
+      ],
+      defaultValue: "no"
+    },
+    {
+      key: "withCaption",
+      label: "Caption",
+      options: [
+        { value: "yes", label: "On" },
+        { value: "no", label: "Off" }
+      ],
+      defaultValue: "yes",
+      // Collapsed clips the caption and drops the chevron, so both slot
+      // toggles (and the placement picker) would be no-ops there — they
+      // disappear rather than sit dead, per the list-item precedent.
+      showWhen: { collapsed: "no" }
+    },
+    {
+      // Above the value the caption LABELS the level ("Workspace"); below it,
+      // it QUALIFIES the value ("Tenant owner" under an address). Swapped in
+      // the markup, not with `column-reverse` — reversing visually while the
+      // DOM stays put would split reading order from visual order (WCAG
+      // 1.3.2) and keep announcing the pair the wrong way round.
+      key: "captionPlacement",
+      label: "Caption Position",
+      options: [
+        { value: "above", label: "Above" },
+        { value: "below", label: "Below" }
+      ],
+      defaultValue: "above",
+      showWhen: { withCaption: "yes", collapsed: "no" }
+    },
+    {
+      key: "withTrailing",
+      label: "Trailing",
+      options: [
+        { value: "yes", label: "On" },
+        { value: "no", label: "Off" }
+      ],
+      defaultValue: "yes",
+      showWhen: { collapsed: "no" }
+    }
+  ],
+  events: [
+    { name: "onClick", description: "Fires when the row is activated. Wired for you when the trigger is spread with a Menu/Listbox `triggerProps` \u2014 do not add your own on top, it would override theirs.", payload: "MouseEvent" }
+  ],
+  api: {
+    importPath: "@viax.io/uxm/ui",
+    importNames: "SidebarNavTrigger",
+    props: [
+      { name: "icon", type: "ReactNode", description: "The mark on the left \u2014 a bare Icon in a switcher, an Avatar in an account row. No tile is drawn behind it: the slot is reserved, sized and aligned, and paints nothing." },
+      { name: "caption", type: "ReactNode", description: "The small line beside the value. It sits inside the button, so it joins the accessible name \u2014 pass an explicit aria-label if a pairing reads badly." },
+      { name: "captionPlacement", type: '"above" | "below"', defaultValue: '"above"', description: `Which side of the value the caption sits on. Above it LABELS the level this control changes (a switcher's "Workspace"); below it QUALIFIES the value (an account row's "Tenant owner" under the address). Swapped in the markup rather than with flex-direction: column-reverse, so reading order keeps matching visual order (WCAG 1.3.2) and the accessible name follows the row.` },
+      { name: "children", type: "ReactNode", description: "The value \u2014 the workspace name, the signed-in address." },
+      { name: "trailing", type: "ReactNode", description: "The chevron. Visible at rest, with no reveal-on-hover behaviour: a control that opens something has to advertise it before you point at it." },
+      { name: "variant", type: '"plain" | "outlined"', defaultValue: '"plain"', description: "plain \u2014 nothing at rest, for the account row at the foot of the rail. outlined \u2014 a hairline plus the card surface, for the switcher, which stands in a box because it names the level everything below it belongs to." },
+      { name: "collapsed", type: "boolean", defaultValue: "false", description: 'Render for a 64px rail: a 46px tile (--uxm-sidebar-nav-trigger-collapsed-size, a MINIMUM rather than a clamp \u2014 a mark larger than it grows the row instead of being clipped), the trailing chevron dropped, and caption + value kept in the DOM but visually hidden \u2014 so the button announces identically collapsed and expanded rather than becoming a nameless icon. 46 deliberately differs from the 32px AppSidebar gives its collapsed nav items: a trigger has lost both chevron and text at this width, so footprint is the only signal left that it opens something. The tile is a surface AROUND the mark rather than a frame hugging it \u2014 pair it with Avatar size="small" (32px) for ~7px on every side. outlined keeps its border at this size, since the box is then the only thing distinguishing a switcher from a plain account row. Pass title as well: with the chevron gone, only position and the mark still say the row opens something.' }
+    ]
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  sidebarNavTriggerDef
+});
+//# sourceMappingURL=sidebar-nav-trigger.cjs.map