luxen-ui 0.18.3 → 0.19.0

package/dist/elements/color-scheme-icon/color-scheme-icon.js

@@ -0,0 +1,138 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, svg, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { colorScheme } from '../../color-scheme.js';
+import { LuxenElement } from '../../shared/luxen-element.js';
+import hostStyles from '../../shared/styles/host.styles.js';
+import rawStyles from './color-scheme-icon.css?inline';
+const styles = unsafeCSS(rawStyles);
+/** Eight ray dots on a circle of radius 9.2 around the glyph's centre. */
+const RAYS = Array.from({ length: 8 }, (_, i) => {
+    const angle = (i * Math.PI) / 4;
+    return {
+        i,
+        cx: (12 + Math.cos(angle) * 9.2).toFixed(2),
+        cy: (12 + Math.sin(angle) * 9.2).toFixed(2),
+    };
+});
+/**
+ * @summary A sun that morphs into a moon. Purely presentational: it shows a
+ * color scheme, it does not choose or store one.
+ *
+ * The two glyphs are a single shape — the disc grows, a mask slides in to carve
+ * the crescent, and the rays retract in a ripple — so the change reads as one
+ * object turning rather than two icons swapping. That is why this is authored
+ * SVG rather than an `<l-icon>`: an Iconify icon is opaque, and you cannot grow
+ * one into another or animate a mask inside it.
+ *
+ * Use it wherever a scheme needs a glyph and the surrounding element is already
+ * the control — a `menuitemcheckbox` row, a button, a legend. With no `scheme`
+ * it follows the page's scheme from `luxen-ui/color-scheme`, so it needs no
+ * wiring; set `scheme` to pin it.
+ *
+ * @example In a menu row, where the row is the control
+ * ```html
+ * <l-dropdown-item type="checkbox" checked>
+ *   <l-color-scheme-icon slot="prefix" scheme="dark"></l-color-scheme-icon>
+ *   Dark theme
+ * </l-dropdown-item>
+ * ```
+ *
+ * @cssproperty [--size=1em] - Width and height of the glyph.
+ * @cssproperty [--color=currentColor] - Glyph color.
+ *
+ * @csspart base - The root `<svg>`, for overriding the morph's timing or tilt.
+ *
+ * @customElement l-color-scheme-icon
+ */
+export class ColorSchemeIcon extends LuxenElement {
+    connectedCallback() {
+        super.connectedCallback();
+        // Follows the page's scheme, not the OS directly: an override chosen
+        // elsewhere on the page — or in another tab — has to move this glyph too.
+        this._unsubscribe = colorScheme.subscribe(() => this.requestUpdate());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribe?.();
+        this._unsubscribe = undefined;
+    }
+    willUpdate() {
+        // Set *before* the first render, not after: the shapes are then created
+        // already carrying the right values, and a page that loads in dark mode
+        // shows a moon instead of a sun animating into one.
+        //
+        // The CSS keys off `data-scheme` rather than the `scheme` attribute so the
+        // inherited value styles exactly like an explicit one — one selector, not two.
+        this.dataset.scheme = this.scheme ?? colorScheme.current;
+        // Not gated on a changed `label`: the decorative default has to be applied
+        // on the very first update too, when nothing has changed yet.
+        if (this.label) {
+            this.setAttribute('role', 'img');
+            this.setAttribute('aria-label', this.label);
+            this.removeAttribute('aria-hidden');
+        }
+        else {
+            this.removeAttribute('role');
+            this.removeAttribute('aria-label');
+            this.setAttribute('aria-hidden', 'true');
+        }
+    }
+    render() {
+        return html `
+      <svg
+        part="base"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <mask id="crescent">
+          <rect
+            width="24"
+            height="24"
+            fill="#fff"
+          />
+          <circle
+            class="biter"
+            cx="12"
+            cy="12"
+            r="11"
+            fill="#000"
+          />
+        </mask>
+
+        <circle
+          class="disc"
+          cx="12"
+          cy="12"
+          r="9"
+          mask="url(#crescent)"
+        />
+
+        <!-- \`svg\`, not \`html\`: a nested template is parsed as HTML even when it
+             sits inside an <svg>, so these circles would land in the HTML
+             namespace and render nothing at all. -->
+        ${RAYS.map((ray) => svg `
+            <circle
+              class="ray"
+              cx=${ray.cx}
+              cy=${ray.cy}
+              r="1.5"
+              style="--i:${ray.i}"
+            />
+          `)}
+      </svg>
+    `;
+    }
+}
+ColorSchemeIcon.styles = [hostStyles, styles];
+__decorate([
+    property({ reflect: true })
+], ColorSchemeIcon.prototype, "scheme", void 0);
+__decorate([
+    property()
+], ColorSchemeIcon.prototype, "label", void 0);

package/dist/elements/color-scheme-icon/index.d.ts

@@ -0,0 +1,2 @@
+export * from './color-scheme-icon.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/color-scheme-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/color-scheme-icon/index.ts"],"names":[],"mappings":"AAEA,cAAc,wBAAwB,CAAC"}

package/dist/elements/color-scheme-icon/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define.js';
+import { ColorSchemeIcon } from './color-scheme-icon.js';
+export * from './color-scheme-icon.js';
+define('color-scheme-icon', ColorSchemeIcon);

package/dist/elements/dropdown-item/dropdown-item.d.ts

@@ -4,7 +4,7 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * A menu item for use inside `<l-dropdown>`.
  *
  * @slot - Label text.
- * @slot prefix - Leading content (e.g. icon).
+ * @slot prefix - Leading content (e.g. icon). A `type="checkbox"` item ignores it unless `check-placement="end"` frees the leading column.
  * @slot suffix - Trailing content.
  * @slot submenu - Nested `l-dropdown-item` elements rendered in a submenu panel anchored to this item. Drop an `<hr>` between them for a separator.
  *
@@ -31,6 +31,13 @@ export declare class DropdownItem extends LuxenElement {
     accessor checked: boolean;
     /** Whether this item's submenu is open. Managed by the parent `l-dropdown`. */
     accessor submenuOpen: boolean;
+    /**
+     * Which side of a `type="checkbox"` item carries the check mark. `start` (the
+     * default) puts it in the leading column, where it takes the place of any
+     * `prefix`. `end` moves it to the trailing edge, freeing that column so the
+     * item can show its own icon alongside the state.
+     */
+    accessor checkPlacement: 'start' | 'end';
     private accessor _hasSubmenu;
     /** Whether this item has nested `slot="submenu"` items. */
     get hasSubmenu(): boolean;
@@ -47,6 +54,7 @@ export declare class DropdownItem extends LuxenElement {
     updated(changed: PropertyValues<this>): void;
     private _getDuration;
     private _handleSubmenuOpenChange;
+    private _renderCheck;
     private _onSubmenuSlotChange;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/elements/dropdown-item/dropdown-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown-item/dropdown-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAU7D;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,gBAAgB,CAIrB;IAEH,2CAA2C;IAE3C,QAAQ,CAAC,KAAK,SAAM;IAEpB,yBAAyB;IAEzB,QAAQ,CAAC,QAAQ,UAAS;IAE1B,gDAAgD;IAEhD,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEhD,wEAAwE;IAExE,QAAQ,CAAC,OAAO,EAAE,aAAa,GAAG,SAAS,CAAa;IAExD,4CAA4C;IAE5C,QAAQ,CAAC,OAAO,UAAS;IAEzB,+EAA+E;IAE/E,QAAQ,CAAC,WAAW,UAAS;IAG7B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAS;IAErC,2DAA2D;IAC3D,IAAI,UAAU,IAAI,OAAO,CAExB;IAEQ,iBAAiB;IAU1B,OAAO,KAAK,UAAU,GAErB;IAED,2EAA2E;IAC3E,YAAY,IAAI,MAAM;IAUtB,uFAAuF;IACvF,eAAe,IAAI,YAAY,EAAE;IAQjC,oEAAoE;IACpE,WAAW;IAKX,4EAA4E;IAC5E,YAAY;IAKH,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAM9C,OAAO,CAAC,YAAY;YAKN,wBAAwB;IA2BtC,OAAO,CAAC,oBAAoB,CAK1B;IAEO,MAAM;CAiEhB"}
+{"version":3,"file":"dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown-item/dropdown-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAU7D;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,gBAAgB,CAIrB;IAEH,2CAA2C;IAE3C,QAAQ,CAAC,KAAK,SAAM;IAEpB,yBAAyB;IAEzB,QAAQ,CAAC,QAAQ,UAAS;IAE1B,gDAAgD;IAEhD,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEhD,wEAAwE;IAExE,QAAQ,CAAC,OAAO,EAAE,aAAa,GAAG,SAAS,CAAa;IAExD,4CAA4C;IAE5C,QAAQ,CAAC,OAAO,UAAS;IAEzB,+EAA+E;IAE/E,QAAQ,CAAC,WAAW,UAAS;IAE7B;;;;;OAKG;IAEH,QAAQ,CAAC,cAAc,EAAE,OAAO,GAAG,KAAK,CAAW;IAGnD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAS;IAErC,2DAA2D;IAC3D,IAAI,UAAU,IAAI,OAAO,CAExB;IAEQ,iBAAiB;IAU1B,OAAO,KAAK,UAAU,GAErB;IAED,2EAA2E;IAC3E,YAAY,IAAI,MAAM;IAUtB,uFAAuF;IACvF,eAAe,IAAI,YAAY,EAAE;IAQjC,oEAAoE;IACpE,WAAW;IAKX,4EAA4E;IAC5E,YAAY;IAKH,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAM9C,OAAO,CAAC,YAAY;YAKN,wBAAwB;IA2BtC,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,oBAAoB,CAK1B;IAEO,MAAM;CAqDhB"}

package/dist/elements/dropdown-item/dropdown-item.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _DropdownItem_value_accessor_storage, _DropdownItem_disabled_accessor_storage, _DropdownItem_type_accessor_storage, _DropdownItem_variant_accessor_storage, _DropdownItem_checked_accessor_storage, _DropdownItem_submenuOpen_accessor_storage, _DropdownItem__hasSubmenu_accessor_storage;
+var _DropdownItem_value_accessor_storage, _DropdownItem_disabled_accessor_storage, _DropdownItem_type_accessor_storage, _DropdownItem_variant_accessor_storage, _DropdownItem_checked_accessor_storage, _DropdownItem_submenuOpen_accessor_storage, _DropdownItem_checkPlacement_accessor_storage, _DropdownItem__hasSubmenu_accessor_storage;
 import { html, nothing, unsafeCSS } from 'lit';
 import { LuxenElement } from '../../shared/luxen-element.js';
 import { property, state } from 'lit/decorators.js';
@@ -28,7 +28,7 @@ const styles = unsafeCSS(rawStyles);
  * A menu item for use inside `<l-dropdown>`.
  *
  * @slot - Label text.
- * @slot prefix - Leading content (e.g. icon).
+ * @slot prefix - Leading content (e.g. icon). A `type="checkbox"` item ignores it unless `check-placement="end"` frees the leading column.
  * @slot suffix - Trailing content.
  * @slot submenu - Nested `l-dropdown-item` elements rendered in a submenu panel anchored to this item. Drop an `<hr>` between them for a separator.
  *
@@ -54,6 +54,7 @@ export class DropdownItem extends LuxenElement {
         _DropdownItem_variant_accessor_storage.set(this, undefined);
         _DropdownItem_checked_accessor_storage.set(this, false);
         _DropdownItem_submenuOpen_accessor_storage.set(this, false);
+        _DropdownItem_checkPlacement_accessor_storage.set(this, 'start');
         _DropdownItem__hasSubmenu_accessor_storage.set(this, false);
         this._onSubmenuSlotChange = (e) => {
             const slot = e.target;
@@ -80,6 +81,14 @@ export class DropdownItem extends LuxenElement {
     /** Whether this item's submenu is open. Managed by the parent `l-dropdown`. */
     get submenuOpen() { return __classPrivateFieldGet(this, _DropdownItem_submenuOpen_accessor_storage, "f"); }
     set submenuOpen(value) { __classPrivateFieldSet(this, _DropdownItem_submenuOpen_accessor_storage, value, "f"); }
+    /**
+     * Which side of a `type="checkbox"` item carries the check mark. `start` (the
+     * default) puts it in the leading column, where it takes the place of any
+     * `prefix`. `end` moves it to the trailing edge, freeing that column so the
+     * item can show its own icon alongside the state.
+     */
+    get checkPlacement() { return __classPrivateFieldGet(this, _DropdownItem_checkPlacement_accessor_storage, "f"); }
+    set checkPlacement(value) { __classPrivateFieldSet(this, _DropdownItem_checkPlacement_accessor_storage, value, "f"); }
     get _hasSubmenu() { return __classPrivateFieldGet(this, _DropdownItem__hasSubmenu_accessor_storage, "f"); }
     set _hasSubmenu(value) { __classPrivateFieldSet(this, _DropdownItem__hasSubmenu_accessor_storage, value, "f"); }
     /** Whether this item has nested `slot="submenu"` items. */
@@ -169,8 +178,32 @@ export class DropdownItem extends LuxenElement {
                 panel.hidePopover();
         }
     }
+    _renderCheck() {
+        return html `
+      <span
+        class="check"
+        aria-hidden="true"
+      >
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+        >
+          <path
+            d="M3.5 8.5L6.5 11.5L12.5 4.5"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+    `;
+    }
     render() {
         const isCheckbox = this.type === 'checkbox';
+        const leadingCheck = isCheckbox && this.checkPlacement === 'start';
         return html `
       <div
         class="item"
@@ -182,35 +215,22 @@ export class DropdownItem extends LuxenElement {
         aria-controls=${this._hasSubmenu ? 'submenu' : nothing}
         tabindex="-1"
       >
-        ${isCheckbox
-            ? html `
-              <span
-                class="check"
-                aria-hidden="true"
-              >
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none"
-                >
-                  <path
-                    d="M3.5 8.5L6.5 11.5L12.5 4.5"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                </svg>
-              </span>
-            `
-            : html ` <slot name="prefix"></slot> `}
+        <!-- The check owns the leading column by default, which is why a
+             checkbox item has no room for a prefix there. Moving it to the
+             trailing edge frees that column, so an item can carry its own icon
+             and still show whether it is on — a theme row with a sun/moon, a
+             Show-grid row with a grid glyph. The aria-checked above is what
+             assistive tech reads, and it is unaffected by where the mark sits.
+             (No backticks in this comment: it lives inside a template literal.) -->
+        ${leadingCheck ? this._renderCheck() : nothing}
+        ${leadingCheck ? nothing : html `<slot name="prefix"></slot>`}
         <span
           class="label"
           id="label"
           ><slot></slot
         ></span>
         <slot name="suffix"></slot>
+        ${isCheckbox && this.checkPlacement === 'end' ? this._renderCheck() : nothing}
         ${this._hasSubmenu
             ? html `<span
               class="submenu-indicator"
@@ -234,7 +254,7 @@ export class DropdownItem extends LuxenElement {
     `;
     }
 }
-_DropdownItem_value_accessor_storage = new WeakMap(), _DropdownItem_disabled_accessor_storage = new WeakMap(), _DropdownItem_type_accessor_storage = new WeakMap(), _DropdownItem_variant_accessor_storage = new WeakMap(), _DropdownItem_checked_accessor_storage = new WeakMap(), _DropdownItem_submenuOpen_accessor_storage = new WeakMap(), _DropdownItem__hasSubmenu_accessor_storage = new WeakMap();
+_DropdownItem_value_accessor_storage = new WeakMap(), _DropdownItem_disabled_accessor_storage = new WeakMap(), _DropdownItem_type_accessor_storage = new WeakMap(), _DropdownItem_variant_accessor_storage = new WeakMap(), _DropdownItem_checked_accessor_storage = new WeakMap(), _DropdownItem_submenuOpen_accessor_storage = new WeakMap(), _DropdownItem_checkPlacement_accessor_storage = new WeakMap(), _DropdownItem__hasSubmenu_accessor_storage = new WeakMap();
 DropdownItem.styles = [hostStyles, styles];
 __decorate([
     property()
@@ -254,6 +274,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'submenu-open' })
 ], DropdownItem.prototype, "submenuOpen", null);
+__decorate([
+    property({ reflect: true, attribute: 'check-placement' })
+], DropdownItem.prototype, "checkPlacement", null);
 __decorate([
     state()
 ], DropdownItem.prototype, "_hasSubmenu", null);

package/dist/elements/segmented-control/segmented-control.d.ts

@@ -40,6 +40,8 @@ export declare class SegmentedControl extends LuxenFormAssociatedElement {
     private _setupTimer;
     private _buttons;
     private _resizeObserver;
+    /** Segments the consumer authored `aria-disabled` on — never ours to clear. */
+    private _authoredDisabled;
     /** Value of the selected segment (its `value` attribute, else its index). */
     value: string;
     /** Control height, aligned with buttons and form controls at the same size. */

package/dist/elements/segmented-control/segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/html/elements/segmented-control/segmented-control.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAE3F,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7D,sEAAsE;AACtE,qBAAa,kBAAmB,SAAQ,KAAK;IAC3C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;gBACX,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;CAKzC;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,kBAAkB,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,qBAAa,gBAAiB,SAAQ,0BAA0B;IACrD,gBAAgB;IAIzB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,eAAe,CAA+B;IAEtD,6EAA6E;IAE7E,KAAK,SAAM;IAEX,+EAA+E;IAE/E,IAAI,EAAE,oBAAoB,CAAQ;IAElC,yEAAyE;IAEzE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oDAAoD;IAEpD,SAAS,UAAS;IAIT,iBAAiB;IAUjB,oBAAoB;IAM7B,mFAAmF;IACnF,OAAO,CAAC,SAAS;IAOR,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAsBrC,iBAAiB;IAMjB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,cAAc;IAOjF,OAAO,CAAC,MAAM;IAoDd,OAAO,CAAC,SAAS;IAUjB,wFAAwF;IACxF,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,OAAO;IAuBf,qFAAqF;IACrF,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,WAAW;IAInB,8EAA8E;IAC9E,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,QAAQ,CAQd;IAKF,OAAO,CAAC,UAAU,CAkChB;CACH;AAQD,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EACvD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,mBAAmB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EAC1D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IACR,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT"}
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/html/elements/segmented-control/segmented-control.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAE3F,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7D,sEAAsE;AACtE,qBAAa,kBAAmB,SAAQ,KAAK;IAC3C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;gBACX,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;CAKzC;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,kBAAkB,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,qBAAa,gBAAiB,SAAQ,0BAA0B;IACrD,gBAAgB;IAIzB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,eAAe,CAA+B;IACtD,+EAA+E;IAC/E,OAAO,CAAC,iBAAiB,CAAoC;IAE7D,6EAA6E;IAE7E,KAAK,SAAM;IAEX,+EAA+E;IAE/E,IAAI,EAAE,oBAAoB,CAAQ;IAElC,yEAAyE;IAEzE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oDAAoD;IAEpD,SAAS,UAAS;IAIT,iBAAiB;IAUjB,oBAAoB;IAM7B,mFAAmF;IACnF,OAAO,CAAC,SAAS;IAOR,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAsBrC,iBAAiB;IAMjB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,cAAc;IAOjF,OAAO,CAAC,MAAM;IAyDd,OAAO,CAAC,SAAS;IAUjB,wFAAwF;IACxF,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,OAAO;IAuBf,qFAAqF;IACrF,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,WAAW;IAInB,8EAA8E;IAC9E,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,QAAQ,CAQd;IAKF,OAAO,CAAC,UAAU,CAkChB;CACH;AAQD,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EACvD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,mBAAmB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EAC1D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IACR,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT"}

package/dist/elements/segmented-control/segmented-control.js

@@ -47,6 +47,8 @@ export class SegmentedControl extends LuxenFormAssociatedElement {
         this._setupTimer = 0;
         this._buttons = [];
         this._resizeObserver = null;
+        /** Segments the consumer authored `aria-disabled` on — never ours to clear. */
+        this._authoredDisabled = new WeakSet();
         /** Value of the selected segment (its `value` attribute, else its index). */
         this.value = '';
         /** Control height, aligned with buttons and form controls at the same size. */
@@ -181,6 +183,11 @@ export class SegmentedControl extends LuxenFormAssociatedElement {
             btn.setAttribute('role', 'radio');
             btn.setAttribute('aria-checked', String(i === activeIndex));
             btn.setAttribute('tabindex', i === activeIndex ? '0' : '-1');
+            // Record an authored `aria-disabled` before the host-level state is
+            // mirrored onto the segments: `_applyDisabledState()` clears that mirror
+            // whenever the control is enabled, and must not take this one with it.
+            if (btn.getAttribute('aria-disabled') === 'true')
+                this._authoredDisabled.add(btn);
             // A segment with no visible text is icon-only: square it and require an
             // accessible name (the icon itself is decorative to assistive tech).
             if ((btn.textContent ?? '').trim() === '') {
@@ -278,7 +285,10 @@ export class SegmentedControl extends LuxenFormAssociatedElement {
                 btn.setAttribute('tabindex', '-1');
             }
             else {
-                btn.removeAttribute('aria-disabled');
+                // Only clear the mirror this method set: a segment the consumer marked
+                // `aria-disabled` stays disabled when the control is re-enabled.
+                if (!this._authoredDisabled.has(btn))
+                    btn.removeAttribute('aria-disabled');
                 // Restore the roving tabindex (only the selected segment is tabbable).
                 btn.setAttribute('tabindex', btn.getAttribute('aria-checked') === 'true' ? '0' : '-1');
             }

package/dist/elements/tabs/tabs.d.ts

@@ -73,8 +73,13 @@ export declare class Tabs extends LuxenElement {
     private _teardown;
     private _selectTab;
     /**
-     * Both spellings count: native `disabled` (unfocusable) and `aria-disabled`
-     * (focusable, so a user can still land on it — navigation must move off it).
+     * Both spellings count, and they behave identically here. `aria-disabled`
+     * leaves the button focusable in principle, but a roving tabindex hands
+     * `tabindex="0"` to the selected tab only — so a tab that can never be
+     * selected is never in the tab sequence either, and the arrow keys skip it
+     * like a native one. It is the escape hatch for consumers who cannot set the
+     * native attribute (a framework binding, a non-`button` element), not a
+     * "reachable but inert" variant.
      */
     private _isDisabled;
     private _isSelectable;

package/dist/elements/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tabs/tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAG7D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AAExD,gEAAgE;AAChE,qBAAa,eAAgB,SAAQ,KAAK;IACxC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;gBACjB,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAK/C;AAED,UAAU,YAAY;IACpB,MAAM,EAAE,eAAe,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,qBAAa,IAAK,SAAQ,YAAY;IAC3B,gBAAgB;IAIzB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,eAAe,CAA+B;IAEtD,sBAAsB;IAEtB,OAAO,EAAE,WAAW,CAAU;IAE9B,yCAAyC;IAEzC,KAAK,SAAO;IAEZ,4CAA4C;IAE5C,SAAS,UAAS;IAElB,uBAAuB;IAEvB,WAAW,EAAE,eAAe,CAAgB;IAInC,iBAAiB;IAUjB,oBAAoB;IAM7B,mFAAmF;IACnF,OAAO,CAAC,SAAS;IAOR,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAuB9C,OAAO,CAAC,MAAM;IAgEd,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,UAAU;IAmClB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IASrB,mEAAmE;IACnE,OAAO,CAAC,YAAY;IAKpB,yFAAyF;IACzF,OAAO,CAAC,mBAAmB;IAS3B,4EAA4E;IAC5E,OAAO,CAAC,YAAY;IASpB,mEAAmE;IACnE,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,UAAU,CAqChB;CACH;AA8BD,MAAM,WAAW,IAAI;IACnB,gBAAgB,CAAC,CAAC,SAAS,MAAM,YAAY,EAC3C,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,EACnD,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,mBAAmB,CAAC,CAAC,SAAS,MAAM,YAAY,EAC9C,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,EACnD,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IACR,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tabs/tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAG7D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AAExD,gEAAgE;AAChE,qBAAa,eAAgB,SAAQ,KAAK;IACxC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;gBACjB,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAK/C;AAED,UAAU,YAAY;IACpB,MAAM,EAAE,eAAe,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,qBAAa,IAAK,SAAQ,YAAY;IAC3B,gBAAgB;IAIzB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,eAAe,CAA+B;IAEtD,sBAAsB;IAEtB,OAAO,EAAE,WAAW,CAAU;IAE9B,yCAAyC;IAEzC,KAAK,SAAO;IAEZ,4CAA4C;IAE5C,SAAS,UAAS;IAElB,uBAAuB;IAEvB,WAAW,EAAE,eAAe,CAAgB;IAInC,iBAAiB;IAUjB,oBAAoB;IAM7B,mFAAmF;IACnF,OAAO,CAAC,SAAS;IAOR,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAuB9C,OAAO,CAAC,MAAM;IAgEd,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,UAAU;IAmClB;;;;;;;;OAQG;IACH,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IASrB,mEAAmE;IACnE,OAAO,CAAC,YAAY;IAKpB,yFAAyF;IACzF,OAAO,CAAC,mBAAmB;IAS3B,4EAA4E;IAC5E,OAAO,CAAC,YAAY;IASpB,mEAAmE;IACnE,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,UAAU,CAqChB;CACH;AA8BD,MAAM,WAAW,IAAI;IACnB,gBAAgB,CAAC,CAAC,SAAS,MAAM,YAAY,EAC3C,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,EACnD,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,mBAAmB,CAAC,CAAC,SAAS,MAAM,YAAY,EAC9C,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,EACnD,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IACR,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT"}

package/dist/elements/tabs/tabs.js

@@ -265,8 +265,13 @@ export class Tabs extends LuxenElement {
     }
     // --- Disabled tabs ---
     /**
-     * Both spellings count: native `disabled` (unfocusable) and `aria-disabled`
-     * (focusable, so a user can still land on it — navigation must move off it).
+     * Both spellings count, and they behave identically here. `aria-disabled`
+     * leaves the button focusable in principle, but a roving tabindex hands
+     * `tabindex="0"` to the selected tab only — so a tab that can never be
+     * selected is never in the tab sequence either, and the arrow keys skip it
+     * like a native one. It is the escape hatch for consumers who cannot set the
+     * native attribute (a framework binding, a non-`button` element), not a
+     * "reachable but inert" variant.
      */
     _isDisabled(tab) {
         return tab.disabled || tab.getAttribute('aria-disabled') === 'true';

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export * from './events/index.js';
 export { define } from './define.js';
 export { setPrefix, getPrefix, tagName, cls } from './registry.js';
 export type { ElementBaseName } from './registry.js';
+export { colorScheme } from './color-scheme.js';
+export type { ColorScheme, ColorSchemeConfig, ColorSchemeListener } from './color-scheme.js';
 export { defineConfig } from './config.js';
 export type { LuxenConfig, LuxenEmitTypesConfig } from './config.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/html/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/html/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -3,4 +3,5 @@ export { LuxenFormAssociatedElement } from './shared/luxen-form-associated-eleme
 export * from './events/index.js';
 export { define } from './define.js';
 export { setPrefix, getPrefix, tagName, cls } from './registry.js';
+export { colorScheme } from './color-scheme.js';
 export { defineConfig } from './config.js';

package/dist/metadata/color-scheme-icon.json

@@ -0,0 +1,66 @@
+{
+  "name": "color-scheme-icon",
+  "displayName": "Color scheme icon",
+  "type": "shadow",
+  "isCustomElement": true,
+  "tag": "l-color-scheme-icon",
+  "nativeTag": null,
+  "selector": "l-color-scheme-icon",
+  "subItemOf": null,
+  "summary": "A sun that morphs into a moon. Purely presentational: it shows a\ncolor scheme, it does not choose or store one.\n\nThe two glyphs are a single shape — the disc grows, a mask slides in to carve\nthe crescent, and the rays retract in a ripple — so the change reads as one\nobject turning rather than two icons swapping. That is why this is authored\nSVG rather than an `<l-icon>`: an Iconify icon is opaque, and you cannot grow\none into another or animate a mask inside it.\n\nUse it wherever a scheme needs a glyph and the surrounding element is already\nthe control — a `menuitemcheckbox` row, a button, a legend. With no `scheme`\nit follows the page's scheme from `luxen-ui/color-scheme`, so it needs no\nwiring; set `scheme` to pin it.",
+  "status": "stable",
+  "appearances": [],
+  "import": {
+    "css": null,
+    "js": "luxen-ui/color-scheme-icon"
+  },
+  "properties": [
+    {
+      "name": "scheme",
+      "attribute": "scheme",
+      "type": "ColorScheme | undefined",
+      "default": null,
+      "reflects": true,
+      "description": "Which glyph to show. Leave it unset and the icon follows the page's scheme\n(`colorScheme.current` — a stored override, else the OS preference), so it\nstays in step with every other control without wiring. Set it to pin the\nglyph, for a legend or a preview that must not move."
+    },
+    {
+      "name": "label",
+      "attribute": "label",
+      "type": "string | undefined",
+      "default": null,
+      "reflects": false,
+      "description": "Accessible label. When set, the glyph becomes meaningful (`role=\"img\"`);\nwhen absent it is decorative and hidden from assistive tech — the right\ndefault inside a row or button that already carries the name."
+    }
+  ],
+  "attributes": [],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "cssClasses": [],
+  "cssParts": [
+    {
+      "name": "base",
+      "description": "The root `<svg>`, for overriding the morph's timing or tilt."
+    }
+  ],
+  "cssProperties": [
+    {
+      "name": "--size",
+      "default": "1em",
+      "description": "Width and height of the glyph."
+    },
+    {
+      "name": "--color",
+      "default": "currentColor",
+      "description": "Glyph color."
+    }
+  ],
+  "commands": [],
+  "examples": [
+    {
+      "title": "In a menu row, where the row is the control",
+      "language": "html",
+      "code": "```html\n<l-dropdown-item type=\"checkbox\" checked>\n<l-color-scheme-icon slot=\"prefix\" scheme=\"dark\"></l-color-scheme-icon>\nDark theme\n</l-dropdown-item>\n```"
+    }
+  ]
+}

package/dist/metadata/dropdown-item.json

@@ -63,6 +63,14 @@
       "reflects": true,
       "description": "Whether this item's submenu is open. Managed by the parent `l-dropdown`."
     },
+    {
+      "name": "checkPlacement",
+      "attribute": "check-placement",
+      "type": "'start' | 'end'",
+      "default": "'start'",
+      "reflects": true,
+      "description": "Which side of a `type=\"checkbox\"` item carries the check mark. `start` (the\ndefault) puts it in the leading column, where it takes the place of any\n`prefix`. `end` moves it to the trailing edge, freeing that column so the\nitem can show its own icon alongside the state."
+    },
     {
       "name": "hasSubmenu",
       "attribute": null,
@@ -114,7 +122,7 @@
     },
     {
       "name": "prefix",
-      "description": "Leading content (e.g. icon)."
+      "description": "Leading content (e.g. icon). A `type=\"checkbox\"` item ignores it unless `check-placement=\"end\"` frees the leading column."
     },
     {
       "name": "suffix",