@xenosystem/components 0.11.0 → 0.11.2

package/dist/catalog.json

@@ -549,11 +549,17 @@
               "optional": true,
               "doc": "Stretch segments to fill the available width."
             },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "optional": true,
+              "doc": "Extra classes."
+            },
             {
               "name": "className",
               "type": "string",
               "optional": true,
-              "doc": "Extra classes."
+              "doc": ""
             }
           ]
         },
@@ -582,11 +588,17 @@
               "doc": "Accessible name. Required — a bare switch has no visible label."
             },
             {
-              "name": "disabled",
+              "name": "mixed",
               "type": "boolean",
               "optional": true,
               "doc": "Disabled treatment."
             },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "optional": true,
+              "doc": ""
+            },
             {
               "name": "size",
               "type": "'sm' | 'md'",

package/dist/chrome/index.d.ts

@@ -603,6 +603,8 @@ interface SegmentedControlProps<T extends string> {
     /** Stretch segments to fill the available width. */
     stretch?: boolean;
     /** Extra classes. */
+    /** Disable the whole control (every segment). */
+    disabled?: boolean;
     className?: string;
 }
 /**
@@ -634,7 +636,7 @@ interface SegmentedControlProps<T extends string> {
  * @returns The next value, or `value` if the move is a no-op.
  */
 declare function nextSegmentValue<T extends string>(options: ReadonlyArray<SegmentOption<T>>, value: T, delta: number): T;
-declare function SegmentedControl<T extends string>({ options, value, onChange, label, size, stretch, className, }: SegmentedControlProps<T>): ReactNode;
+declare function SegmentedControl<T extends string>({ options, value, onChange, label, size, stretch, className, disabled, }: SegmentedControlProps<T>): ReactNode;
 /** Props for {@link Toggle}. */
 interface ToggleProps {
     /** On/off state. */
@@ -644,6 +646,8 @@ interface ToggleProps {
     /** Accessible name. Required — a bare switch has no visible label. */
     label: string;
     /** Disabled treatment. */
+    /** The value differs across a multi-selection: `aria-checked="mixed"`, the knob at half weight. */
+    mixed?: boolean;
     disabled?: boolean;
     /** `sm` = 16px track height, `md` = 18px (default). */
     size?: 'sm' | 'md';
@@ -654,7 +658,7 @@ interface ToggleProps {
  * The signature XENO toggle: a rectangular track with a SQUARE knob whose corner radius softens
  * when it moves to the ON position (DESIGN_SYSTEM §3 "The Toggle Switch"). Never a pill.
  */
-declare function Toggle({ checked, onChange, label, disabled, size, className, }: ToggleProps): ReactNode;
+declare function Toggle({ checked, onChange, label, disabled, mixed, size, className, }: ToggleProps): ReactNode;
 /** Props for {@link FieldGroup}. */
 interface FieldGroupProps {
     /** {@link Field} children. */

package/dist/chrome/index.js

@@ -682,6 +682,10 @@ div.xc-section-trigger {
 .xc-stack--pad-gutter { padding: ${PANEL_METRICS.gutter}px; }
 .xc-stack--pad-inset { padding: 0 ${PANEL_METRICS.gutter}px ${PANEL_METRICS.gutter}px; }
 .xc-stack--pad-none { padding: 0; }
+/* inside a row, a field shares the line instead of claiming it \u2014 the inspector's X / Y cells */
+.xc-stack--row > .xc-input,
+.xc-stack--row > .xc-number,
+.xc-stack--row > .xc-swatch { flex: 1 1 0; width: auto; min-width: 0; }
 
 /* \u2500\u2500 Text \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .xc-text {
@@ -1098,6 +1102,9 @@ div.xc-section-trigger {
 }
 /* Both layers, per DESIGN_SYSTEM \xA73.1 "Cursors \u2014 two layers, both required": the modifier class
    for callers that style a wrapper, and the attribute selector for the real disabled control. */
+.xc-toggle--mixed .xc-toggle-knob {
+  opacity: 0.4;
+}
 .xc-toggle--disabled,
 .xc-toggle[disabled] {
   opacity: ${PANEL_DISABLED_OPACITY};
@@ -1612,7 +1619,8 @@ function SegmentedControl({
   label,
   size = "md",
   stretch,
-  className
+  className,
+  disabled
 }) {
   usePanelPrimitives();
   const move = (delta) => {
@@ -1649,7 +1657,7 @@ function SegmentedControl({
             "aria-checked": checked,
             title: o.title,
             "aria-label": o.title,
-            disabled: o.disabled,
+            disabled: disabled || o.disabled,
             tabIndex: checked ? 0 : -1,
             className: cx(CLS_SEGMENT, checked && `${CLS_SEGMENT}--checked`),
             onClick: () => {
@@ -1668,6 +1676,7 @@ function Toggle({
   onChange,
   label,
   disabled,
+  mixed,
   size = "md",
   className
 }) {
@@ -1677,7 +1686,7 @@ function Toggle({
     {
       type: "button",
       role: "switch",
-      "aria-checked": checked,
+      "aria-checked": mixed ? "mixed" : checked,
       "aria-label": label,
       title: label,
       disabled,
@@ -1687,6 +1696,7 @@ function Toggle({
         `${CLS_TOGGLE}--${size}`,
         checked && `${CLS_TOGGLE}--on`,
         disabled && `${CLS_TOGGLE}--disabled`,
+        mixed && `${CLS_TOGGLE}--mixed`,
         className
       ),
       children: /* @__PURE__ */ jsx2("span", { className: CLS_TOGGLE_KNOB })
@@ -2303,6 +2313,7 @@ function gallery() {
   form("SegmentedControl", "last", () => /* @__PURE__ */ jsx7(SegmentedControl, { options: SEGMENTS, value: "warnings", onChange: noop, label: "Level" }));
   form("Toggle", "off", () => /* @__PURE__ */ jsx7(Toggle, { checked: false, onChange: noop, label: "Follow output" }));
   form("Toggle", "on", () => /* @__PURE__ */ jsx7(Toggle, { checked: true, onChange: noop, label: "Follow output" }));
+  form("Toggle", "mixed", () => /* @__PURE__ */ jsx7(Toggle, { checked: false, mixed: true, onChange: noop, label: "Visible" }));
   form("Toggle", "disabled-on", () => /* @__PURE__ */ jsx7(Toggle, { checked: true, onChange: noop, label: "Follow output", disabled: true }));
   form("Field", "default", () => /* @__PURE__ */ jsx7(Field, { label: "Name", htmlFor: "chrome-field-name", children: /* @__PURE__ */ jsx7("input", { id: "chrome-field-name", defaultValue: "Untitled" }) }));
   form("Field", "hint", () => /* @__PURE__ */ jsx7(Field, { label: "Timeout", hint: "Milliseconds; 0 never times out.", htmlFor: "chrome-field-timeout", children: /* @__PURE__ */ jsx7("input", { id: "chrome-field-timeout", defaultValue: "30000" }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/components",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "XENO Components \u2014 rung 2 of the front ladder: molecules composed from @xenosystem/elements, with no host contract. Families as subpaths: /auth, /navigation, /feedback, /data.",
   "license": "UNLICENSED",
   "type": "module",