luxen-ui 0.18.3 → 0.19.0

package/README.md

@@ -35,6 +35,7 @@ Visit https://luxen-ui.com to explore the documentation.
 | Carousel item     | `<l-carousel-item>`     | ⬢ Custom HTML Element (with Shadow DOM) |
 | Checkbox          | `<input>`               | ⏣ Native HTML Element                   |
 | Close button      | `<button>`              | ⏣ Native HTML Element                   |
+| Color scheme icon | `<l-color-scheme-icon>` | ⬢ Custom HTML Element (with Shadow DOM) |
 | Combobox          | `<l-combobox>`          | ⬢ Custom HTML Element (with Shadow DOM) |
 | Dialog            | `<l-dialog>`            | ⬢ Custom HTML Element (with Shadow DOM) |
 | Disclosure        | `<details>`             | ⏣ Native HTML Element                   |

package/cdn/color-scheme.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Page-level light/dark state, shared by every control that shows or changes it.
+ *
+ * Deliberately not an element: the scheme is one value per document, and a
+ * document can hold several controls for it — a header button, a menu row, a
+ * settings page. Whichever one the user touches, all of them have to agree, so
+ * the state belongs to the page rather than to any of them.
+ *
+ * The model is the one argued in Lea Verou's *Dark mode toggles should be a
+ * two-state switch* (2026): three values — an explicit `light`, an explicit
+ * `dark`, or no preference at all — but only two ever shown. That falls out of
+ * two rules, both implemented here:
+ *
+ * 1. An override is stored **only when it differs from the OS preference**.
+ *    Choosing the scheme the OS already reports removes the override instead,
+ *    handing control back to the system. So a user on a dark OS who switches to
+ *    light and back is following the system again, not pinned to dark — and
+ *    "system" stays reachable without a third button.
+ * 2. The stored value is read **only when the user acts**. If the OS flips while
+ *    an explicit override exists, the override survives: the user asked for it,
+ *    and nothing they did says otherwise.
+ *
+ * SSR-safe: nothing here touches `window`, `document` or `localStorage` at
+ * module scope, and listeners are attached lazily on the first subscription.
+ */
+export type ColorScheme = 'light' | 'dark';
+/** Called whenever the effective scheme changes, from any source. */
+export type ColorSchemeListener = (scheme: ColorScheme, overridden: boolean) => void;
+/** Where the store writes `color-scheme`, if anywhere. */
+export type ColorSchemeApply = 'root' | false;
+export interface ColorSchemeConfig {
+    /**
+     * `localStorage` key holding the override. Set to `''` to disable persistence
+     * entirely — the choice then lasts for the session only.
+     */
+    storageKey?: string;
+    /**
+     * Write `color-scheme` on `<html>` when the scheme changes. Off by default:
+     * most applications already own a color-mode story, and silently rewriting
+     * `documentElement` would fight it. Turn it on for a plain page.
+     */
+    apply?: ColorSchemeApply;
+}
+declare class ColorSchemeStore {
+    #private;
+    /** The scheme actually in effect: a stored override, else the OS preference. */
+    get current(): ColorScheme;
+    /** Whether an override is in place, rather than the OS preference being followed. */
+    get overridden(): boolean;
+    /**
+     * Choose a scheme. Rule 1 lives here: the override is written only when it
+     * disagrees with the OS, and released when it agrees.
+     */
+    set(next: ColorScheme): void;
+    /** Flip to the other scheme. Returns the scheme now in effect. */
+    toggle(): ColorScheme;
+    /**
+     * Observe the effective scheme. The listener is called **immediately with the
+     * current value**, then on a user change, on an OS change with no override in
+     * place, and on a change made in another tab. Returns an unsubscribe function;
+     * the last unsubscribe releases the listeners.
+     *
+     * The immediate call is deliberate. A subscriber's job is almost always to
+     * mirror the scheme somewhere — an `aria-pressed`, a `checked`, a class — and
+     * a change-only contract leaves that mirror wrong until the first change,
+     * which is a bug nobody sees until a screen reader hits it. Callers that only
+     * want transitions can ignore the first call.
+     */
+    subscribe(listener: ColorSchemeListener): () => void;
+    /** Set the storage key and whether the store writes `color-scheme` on `<html>`. */
+    configure(config: ColorSchemeConfig): void;
+}
+/** The document's light/dark state. One instance per page. */
+export declare const colorScheme: ColorSchemeStore;
+export {};
+//# sourceMappingURL=color-scheme.d.ts.map

package/cdn/color-scheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme.d.ts","sourceRoot":"","sources":["../src/html/color-scheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,qEAAqE;AACrE,MAAM,MAAM,mBAAmB,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AAErF,0DAA0D;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,KAAK,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AA8BD,cAAM,gBAAgB;;IAuBpB,gFAAgF;IAChF,IAAI,OAAO,IAAI,WAAW,CAEzB;IAED,qFAAqF;IACrF,IAAI,UAAU,IAAI,OAAO,CAExB;IAMD;;;OAGG;IACH,GAAG,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAuB5B,kEAAkE;IAClE,MAAM,IAAI,WAAW;IAKrB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,QAAQ,EAAE,mBAAmB,GAAG,MAAM,IAAI;IAUpD,mFAAmF;IACnF,SAAS,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI;CAuD3C;AAED,8DAA8D;AAC9D,eAAO,MAAM,WAAW,kBAAyB,CAAC"}

package/cdn/color-scheme.js

@@ -0,0 +1,2 @@
+var e=`luxen-color-scheme`,t=!1,n=`(prefers-color-scheme: dark)`;function r(){return globalThis.matchMedia?.(n).matches?`dark`:`light`}function i(e){if(!e)return null;try{let t=localStorage.getItem(e);return t===`light`||t===`dark`?t:null}catch{return null}}var a=new class{#e=null;#t=new Set;#n=null;#r=null;#i=!1;#a=()=>this.#l();#o=t=>{t.key!==null&&t.key!==e||(e&&(this.#e=null),this.#l())};get current(){return this.#s??r()}get overridden(){return this.#s!==null}get#s(){return i(e)??this.#e}set(t){let n=t===r();if(e)try{n?localStorage.removeItem(e):localStorage.setItem(e,t),this.#e=null,this.#c(),this.#l();return}catch{}this.#e=n?null:t,this.#c(),this.#l()}toggle(){return this.set(this.current===`dark`?`light`:`dark`),this.current}subscribe(e){return this.#t.add(e),this.#u(),e(this.current,this.overridden),()=>{this.#t.delete(e),this.#t.size===0&&this.#d()}}configure(n){if(n.storageKey!==void 0&&(e=n.storageKey),n.apply!==void 0){let e=t===`root`;t=n.apply,e&&n.apply===!1&&globalThis.document?.documentElement.style.removeProperty(`color-scheme`)}this.#c(),this.#l()}#c(){if(t!==`root`)return;let e=globalThis.document?.documentElement;e&&(e.style.colorScheme=this.#s??`light dark`)}#l(){let e=this.current,t=this.overridden;if(!(e===this.#r&&t===this.#i)){this.#r=e,this.#i=t;for(let n of this.#t)n(e,t)}}#u(){this.#n||(this.#n=globalThis.matchMedia?.(n)??null,this.#n?.addEventListener(`change`,this.#a),globalThis.addEventListener?.(`storage`,this.#o),this.#r=this.current,this.#i=this.overridden,this.#c())}#d(){this.#n?.removeEventListener(`change`,this.#a),this.#n=null,globalThis.removeEventListener?.(`storage`,this.#o)}};export{a as colorScheme};
+//# sourceMappingURL=color-scheme.js.map

package/cdn/color-scheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme.js","names":["#notify","#session","#override","#applyToRoot","#listeners","#bind","#unbind","#last","#lastOverridden","#media","#onOsChange","#onStorageChange"],"sources":["../src/html/color-scheme.ts"],"sourcesContent":["/**\n * Page-level light/dark state, shared by every control that shows or changes it.\n *\n * Deliberately not an element: the scheme is one value per document, and a\n * document can hold several controls for it — a header button, a menu row, a\n * settings page. Whichever one the user touches, all of them have to agree, so\n * the state belongs to the page rather than to any of them.\n *\n * The model is the one argued in Lea Verou's *Dark mode toggles should be a\n * two-state switch* (2026): three values — an explicit `light`, an explicit\n * `dark`, or no preference at all — but only two ever shown. That falls out of\n * two rules, both implemented here:\n *\n * 1. An override is stored **only when it differs from the OS preference**.\n *    Choosing the scheme the OS already reports removes the override instead,\n *    handing control back to the system. So a user on a dark OS who switches to\n *    light and back is following the system again, not pinned to dark — and\n *    \"system\" stays reachable without a third button.\n * 2. The stored value is read **only when the user acts**. If the OS flips while\n *    an explicit override exists, the override survives: the user asked for it,\n *    and nothing they did says otherwise.\n *\n * SSR-safe: nothing here touches `window`, `document` or `localStorage` at\n * module scope, and listeners are attached lazily on the first subscription.\n */\n\nexport type ColorScheme = 'light' | 'dark';\n\n/** Called whenever the effective scheme changes, from any source. */\nexport type ColorSchemeListener = (scheme: ColorScheme, overridden: boolean) => void;\n\n/** Where the store writes `color-scheme`, if anywhere. */\nexport type ColorSchemeApply = 'root' | false;\n\nexport interface ColorSchemeConfig {\n  /**\n   * `localStorage` key holding the override. Set to `''` to disable persistence\n   * entirely — the choice then lasts for the session only.\n   */\n  storageKey?: string;\n  /**\n   * Write `color-scheme` on `<html>` when the scheme changes. Off by default:\n   * most applications already own a color-mode story, and silently rewriting\n   * `documentElement` would fight it. Turn it on for a plain page.\n   */\n  apply?: ColorSchemeApply;\n}\n\n/*\n * Defaults live as module-level bindings, not class fields, so that\n * `luxen-ui/vite-plugin` can bake a project's `luxen.config.mjs` values in at\n * build time by rewriting these two initialisers — the same mechanism it uses\n * for `_elementPrefix` / `_cssPrefix` in `registry.ts`. `configure()` stays the\n * runtime path for anything the build cannot know.\n */\nlet _storageKey = 'luxen-color-scheme';\nlet _apply: ColorSchemeApply = false;\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\n\n/** The OS-level preference. `light` when the query is unsupported. */\nfunction osScheme(): ColorScheme {\n  return globalThis.matchMedia?.(DARK_QUERY).matches ? 'dark' : 'light';\n}\n\nfunction readStored(key: string): ColorScheme | null {\n  if (!key) return null;\n  try {\n    const value = localStorage.getItem(key);\n    return value === 'light' || value === 'dark' ? value : null;\n  } catch {\n    // Safari private mode, disabled storage, sandboxed iframe.\n    return null;\n  }\n}\n\nclass ColorSchemeStore {\n  /**\n   * In-memory copy of the override, used when persistence is off or when the\n   * browser refuses to write. Without it a blocked write would leave every\n   * control unable to move at all.\n   */\n  #session: ColorScheme | null = null;\n  #listeners = new Set<ColorSchemeListener>();\n  #media: MediaQueryList | null = null;\n  #last: ColorScheme | null = null;\n  #lastOverridden = false;\n\n  #onOsChange = () => this.#notify();\n\n  #onStorageChange = (event: StorageEvent) => {\n    // `key === null` means the whole store was cleared.\n    if (event.key !== null && event.key !== _storageKey) return;\n    // Another tab is the authority now: drop this page's session copy so a\n    // release made over there is not undone by a stale local value.\n    if (_storageKey) this.#session = null;\n    this.#notify();\n  };\n\n  /** The scheme actually in effect: a stored override, else the OS preference. */\n  get current(): ColorScheme {\n    return this.#override ?? osScheme();\n  }\n\n  /** Whether an override is in place, rather than the OS preference being followed. */\n  get overridden(): boolean {\n    return this.#override !== null;\n  }\n\n  get #override(): ColorScheme | null {\n    return readStored(_storageKey) ?? this.#session;\n  }\n\n  /**\n   * Choose a scheme. Rule 1 lives here: the override is written only when it\n   * disagrees with the OS, and released when it agrees.\n   */\n  set(next: ColorScheme): void {\n    const release = next === osScheme();\n\n    if (_storageKey) {\n      try {\n        if (release) localStorage.removeItem(_storageKey);\n        else localStorage.setItem(_storageKey, next);\n        // Storage took it, so it is the single authority — drop any session copy\n        // left over from a period when it was unavailable.\n        this.#session = null;\n        this.#applyToRoot();\n        this.#notify();\n        return;\n      } catch {\n        // Refused — fall through to memory.\n      }\n    }\n\n    this.#session = release ? null : next;\n    this.#applyToRoot();\n    this.#notify();\n  }\n\n  /** Flip to the other scheme. Returns the scheme now in effect. */\n  toggle(): ColorScheme {\n    this.set(this.current === 'dark' ? 'light' : 'dark');\n    return this.current;\n  }\n\n  /**\n   * Observe the effective scheme. The listener is called **immediately with the\n   * current value**, then on a user change, on an OS change with no override in\n   * place, and on a change made in another tab. Returns an unsubscribe function;\n   * the last unsubscribe releases the listeners.\n   *\n   * The immediate call is deliberate. A subscriber's job is almost always to\n   * mirror the scheme somewhere — an `aria-pressed`, a `checked`, a class — and\n   * a change-only contract leaves that mirror wrong until the first change,\n   * which is a bug nobody sees until a screen reader hits it. Callers that only\n   * want transitions can ignore the first call.\n   */\n  subscribe(listener: ColorSchemeListener): () => void {\n    this.#listeners.add(listener);\n    this.#bind();\n    listener(this.current, this.overridden);\n    return () => {\n      this.#listeners.delete(listener);\n      if (this.#listeners.size === 0) this.#unbind();\n    };\n  }\n\n  /** Set the storage key and whether the store writes `color-scheme` on `<html>`. */\n  configure(config: ColorSchemeConfig): void {\n    if (config.storageKey !== undefined) _storageKey = config.storageKey;\n\n    if (config.apply !== undefined) {\n      const wasApplying = _apply === 'root';\n      _apply = config.apply;\n      // Leave no trace when application is switched off.\n      if (wasApplying && config.apply === false) {\n        globalThis.document?.documentElement.style.removeProperty('color-scheme');\n      }\n    }\n\n    this.#applyToRoot();\n    this.#notify();\n  }\n\n  /**\n   * With no override, writes `light dark` rather than nothing: it declares\n   * support for both schemes, so the used value follows `prefers-color-scheme`\n   * and \"follow the system\" comes from the platform instead of being simulated.\n   */\n  #applyToRoot(): void {\n    if (_apply !== 'root') return;\n    const root = globalThis.document?.documentElement;\n    if (root) root.style.colorScheme = this.#override ?? 'light dark';\n  }\n\n  #notify(): void {\n    const next = this.current;\n    const overridden = this.overridden;\n    // Both halves of the payload are compared, not just the scheme: releasing an\n    // override that already agreed with the OS leaves `current` untouched while\n    // `overridden` flips, and a subscriber mirroring it — a \"following the\n    // system\" badge, a tri-state settings control — would never hear about it.\n    if (next === this.#last && overridden === this.#lastOverridden) return;\n    this.#last = next;\n    this.#lastOverridden = overridden;\n    for (const listener of this.#listeners) listener(next, overridden);\n  }\n\n  #bind(): void {\n    if (this.#media) return;\n    this.#media = globalThis.matchMedia?.(DARK_QUERY) ?? null;\n    this.#media?.addEventListener('change', this.#onOsChange);\n    globalThis.addEventListener?.('storage', this.#onStorageChange);\n    this.#last = this.current;\n    this.#lastOverridden = this.overridden;\n    this.#applyToRoot();\n  }\n\n  #unbind(): void {\n    this.#media?.removeEventListener('change', this.#onOsChange);\n    this.#media = null;\n    globalThis.removeEventListener?.('storage', this.#onStorageChange);\n  }\n}\n\n/** The document's light/dark state. One instance per page. */\nexport const colorScheme = new ColorSchemeStore();\n"],"mappings":"AAuDA,IAAI,EAAc,qBACd,EAA2B,GAEzB,EAAa,+BAGnB,SAAS,GAAwB,CAC/B,OAAO,WAAW,aAAa,CAAU,CAAC,CAAC,QAAU,OAAS,OAChE,CAEA,SAAS,EAAW,EAAiC,CACnD,GAAI,CAAC,EAAK,OAAO,KACjB,GAAI,CACF,IAAM,EAAQ,aAAa,QAAQ,CAAG,EACtC,OAAO,IAAU,SAAW,IAAU,OAAS,EAAQ,IACzD,MAAQ,CAEN,OAAO,IACT,CACF,CAyJA,IAAa,EAAc,IAAI,KAvJR,CAMrB,GAA+B,KAC/B,GAAa,IAAI,IACjB,GAAgC,KAChC,GAA4B,KAC5B,GAAkB,GAElB,OAAoB,KAAKA,GAAQ,EAEjC,GAAoB,GAAwB,CAEtC,EAAM,MAAQ,MAAQ,EAAM,MAAQ,IAGpC,IAAa,KAAKC,GAAW,MACjC,KAAKD,GAAQ,EACf,EAGA,IAAI,SAAuB,CACzB,OAAO,KAAKE,IAAa,EAAS,CACpC,CAGA,IAAI,YAAsB,CACxB,OAAO,KAAKA,KAAc,IAC5B,CAEA,GAAIA,IAAgC,CAClC,OAAO,EAAW,CAAW,GAAK,KAAKD,EACzC,CAMA,IAAI,EAAyB,CAC3B,IAAM,EAAU,IAAS,EAAS,EAElC,GAAI,EACF,GAAI,CACE,EAAS,aAAa,WAAW,CAAW,EAC3C,aAAa,QAAQ,EAAa,CAAI,EAG3C,KAAKA,GAAW,KAChB,KAAKE,GAAa,EAClB,KAAKH,GAAQ,EACb,MACF,MAAQ,CAER,CAGF,KAAKC,GAAW,EAAU,KAAO,EACjC,KAAKE,GAAa,EAClB,KAAKH,GAAQ,CACf,CAGA,QAAsB,CAEpB,OADA,KAAK,IAAI,KAAK,UAAY,OAAS,QAAU,MAAM,EAC5C,KAAK,OACd,CAcA,UAAU,EAA2C,CAInD,OAHA,KAAKI,GAAW,IAAI,CAAQ,EAC5B,KAAKC,GAAM,EACX,EAAS,KAAK,QAAS,KAAK,UAAU,MACzB,CACX,KAAKD,GAAW,OAAO,CAAQ,EAC3B,KAAKA,GAAW,OAAS,GAAG,KAAKE,GAAQ,CAC/C,CACF,CAGA,UAAU,EAAiC,CAGzC,GAFI,EAAO,aAAe,IAAA,KAAW,EAAc,EAAO,YAEtD,EAAO,QAAU,IAAA,GAAW,CAC9B,IAAM,EAAc,IAAW,OAC/B,EAAS,EAAO,MAEZ,GAAe,EAAO,QAAU,IAClC,WAAW,UAAU,gBAAgB,MAAM,eAAe,cAAc,CAE5E,CAEA,KAAKH,GAAa,EAClB,KAAKH,GAAQ,CACf,CAOA,IAAqB,CACnB,GAAI,IAAW,OAAQ,OACvB,IAAM,EAAO,WAAW,UAAU,gBAC9B,IAAM,EAAK,MAAM,YAAc,KAAKE,IAAa,aACvD,CAEA,IAAgB,CACd,IAAM,EAAO,KAAK,QACZ,EAAa,KAAK,WAKpB,SAAS,KAAKK,IAAS,IAAe,KAAKC,IAE/C,CADA,KAAKD,GAAQ,EACb,KAAKC,GAAkB,EACvB,IAAK,IAAM,KAAY,KAAKJ,GAAY,EAAS,EAAM,CAAU,CAD1C,CAEzB,CAEA,IAAc,CACR,KAAKK,KACT,KAAKA,GAAS,WAAW,aAAa,CAAU,GAAK,KACrD,KAAKA,IAAQ,iBAAiB,SAAU,KAAKC,EAAW,EACxD,WAAW,mBAAmB,UAAW,KAAKC,EAAgB,EAC9D,KAAKJ,GAAQ,KAAK,QAClB,KAAKC,GAAkB,KAAK,WAC5B,KAAKL,GAAa,EACpB,CAEA,IAAgB,CACd,KAAKM,IAAQ,oBAAoB,SAAU,KAAKC,EAAW,EAC3D,KAAKD,GAAS,KACd,WAAW,sBAAsB,UAAW,KAAKE,EAAgB,CACnE,CACF"}

package/cdn/config.d.ts

@@ -43,6 +43,24 @@ export interface LuxenEmitTypesConfig {
     /** Overwrite the file even when it exists. Default `false`. */
     force?: boolean;
 }
+/** Build-time defaults for the `luxen-ui/color-scheme` store. */
+export interface LuxenColorSchemeConfig {
+    /**
+     * `localStorage` key holding the light/dark override. Default
+     * `'luxen-color-scheme'`. Set to `''` to disable persistence entirely.
+     *
+     * Change it here and the before-first-paint snippet in your `<head>` has to
+     * read the same key — that snippet runs before any module and cannot be
+     * rewritten by the build.
+     */
+    storageKey?: string;
+    /**
+     * Have the store write `color-scheme` on `<html>` itself. Default `false`,
+     * because most applications already own a color-mode story; `'root'` is the
+     * batteries-included path for a plain page.
+     */
+    apply?: 'root' | false;
+}
 /**
  * Shape of `luxen.config.mjs`. Both the Vite plugin and the CLI read this
  * file; each tool ignores the fields that don't apply to it.
@@ -66,6 +84,11 @@ export interface LuxenConfig {
     cssImportPath?: string;
     /** npm specifier used in `import` examples in `references/`. Default `'luxen-ui'`. */
     jsImportPath?: string;
+    /**
+     * Defaults for `luxen-ui/color-scheme`, baked in at build time so a project
+     * never has to call `colorScheme.configure()` from its entry point.
+     */
+    colorScheme?: LuxenColorSchemeConfig;
     /**
      * Emit a prefix-aware `.d.ts` for `HTMLElementTagNameMap` (and optionally
      * Vue's `GlobalComponents`). Pass a path string for the default behaviour,

package/cdn/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/html/config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,kEAAkE;AAClE,MAAM,WAAW,oBAAoB;IACnC,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC3C;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAE1B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,oBAAoB,CAAC;CAC3C;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAEhE"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/html/config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,kEAAkE;AAClE,MAAM,WAAW,oBAAoB;IACnC,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC3C;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,iEAAiE;AACjE,MAAM,WAAW,sBAAsB;IACrC;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAE1B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB;;;OAGG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAC;IAGrC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,oBAAoB,CAAC;CAC3C;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAEhE"}

package/cdn/custom-elements.json

@@ -2205,6 +2205,121 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/color-scheme-icon/color-scheme-icon.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ColorSchemeIcon",
+          "cssProperties": [
+            {
+              "description": "Width and height of the glyph.",
+              "name": "--size",
+              "default": "1em"
+            },
+            {
+              "description": "Glyph color.",
+              "name": "--color",
+              "default": "currentColor"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The root `<svg>`, for overriding the morph's timing or tilt.",
+              "name": "base"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "scheme",
+              "type": {
+                "text": "ColorScheme | undefined"
+              },
+              "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.",
+              "attribute": "scheme",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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.",
+              "attribute": "label"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "scheme",
+              "type": {
+                "text": "ColorScheme | undefined"
+              },
+              "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.",
+              "fieldName": "scheme"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LuxenElement",
+            "module": "/src/html/shared/luxen-element.js"
+          },
+          "tagName": "l-color-scheme-icon",
+          "customElement": true,
+          "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.",
+          "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```"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColorScheme",
+          "declaration": {
+            "name": "ColorScheme",
+            "module": "src/html/elements/color-scheme-icon/color-scheme-icon.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColorSchemeIcon",
+          "declaration": {
+            "name": "ColorSchemeIcon",
+            "module": "src/html/elements/color-scheme-icon/color-scheme-icon.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/color-scheme-icon/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/color-scheme-icon/color-scheme-icon.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/combobox/combobox.ts",
@@ -3706,7 +3821,7 @@
               "name": ""
             },
             {
-              "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": "prefix"
             },
             {
@@ -3783,6 +3898,17 @@
               "attribute": "submenu-open",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "checkPlacement",
+              "type": {
+                "text": "'start' | 'end'"
+              },
+              "default": "'start'",
+              "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.",
+              "attribute": "check-placement",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "hasSubmenu",
@@ -3877,6 +4003,15 @@
               "default": "false",
               "description": "Whether this item's submenu is open. Managed by the parent `l-dropdown`.",
               "fieldName": "submenuOpen"
+            },
+            {
+              "name": "check-placement",
+              "type": {
+                "text": "'start' | 'end'"
+              },
+              "default": "'start'",
+              "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.",
+              "fieldName": "checkPlacement"
             }
           ],
           "superclass": {

package/cdn/elements/color-scheme-icon/color-scheme-icon.d.ts

@@ -0,0 +1,55 @@
+import { ColorScheme } from '../../color-scheme.js';
+import { LuxenElement } from '../../shared/luxen-element.js';
+export type { ColorScheme };
+/**
+ * @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 declare class ColorSchemeIcon extends LuxenElement {
+    static styles: import('lit').CSSResult[];
+    /**
+     * Which glyph to show. Leave it unset and the icon follows the page's scheme
+     * (`colorScheme.current` — a stored override, else the OS preference), so it
+     * stays in step with every other control without wiring. Set it to pin the
+     * glyph, for a legend or a preview that must not move.
+     */
+    scheme?: ColorScheme;
+    /**
+     * Accessible label. When set, the glyph becomes meaningful (`role="img"`);
+     * when absent it is decorative and hidden from assistive tech — the right
+     * default inside a row or button that already carries the name.
+     */
+    label?: string;
+    private _unsubscribe?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=color-scheme-icon.d.ts.map

package/cdn/elements/color-scheme-icon/color-scheme-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme-icon.d.ts","sourceRoot":"","sources":["../../../src/html/elements/color-scheme-icon/color-scheme-icon.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAM7D,YAAY,EAAE,WAAW,EAAE,CAAC;AAY5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,eAAgB,SAAQ,YAAY;IAC/C,OAAgB,MAAM,4BAAwB;IAE9C;;;;;OAKG;IAEH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;;OAIG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,YAAY,CAAC,CAAa;IAEzB,iBAAiB;IAOjB,oBAAoB;IAMpB,UAAU;IAsBV,MAAM;CA+ChB"}

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

@@ -0,0 +1,44 @@
+import{colorScheme as e}from"../../color-scheme.js";import{i as t}from"../../chunks/lit.js";import{i as n,t as r}from"../../chunks/decorate.js";import{a as i,o as a}from"../../chunks/lit-html.js";import{LuxenElement as o}from"../../shared/luxen-element.js";import s from"../../shared/styles/host.styles.js";var c=t(`:host{--size:1em;--color:currentColor;inline-size:var(--size);block-size:var(--size);color:var(--color);flex:none;display:inline-flex}svg{fill:currentColor;block-size:100%;inline-size:100%;transition:rotate .5s cubic-bezier(.16,1,.3,1);rotate:0deg}.disc,.ray,.biter{transform-box:fill-box;transform-origin:50%}.disc{transition:scale .5s cubic-bezier(.16,1,.3,1);scale:.56}.biter{transition:translate .5s cubic-bezier(.16,1,.3,1);translate:16px -16px}.ray{transition:scale .3s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i) * 18ms);scale:1}:host([data-scheme=dark]) svg{rotate:40deg}:host([data-scheme=dark]) .disc{scale:1}:host([data-scheme=dark]) .biter{translate:5px -5px}:host([data-scheme=dark]) .ray{scale:0}@media (prefers-reduced-motion:reduce){svg,.disc,.biter,.ray{transition-duration:0s;transition-delay:0s}}`),l=Array.from({length:8},(e,t)=>{let n=t*Math.PI/4;return{i:t,cx:(12+Math.cos(n)*9.2).toFixed(2),cy:(12+Math.sin(n)*9.2).toFixed(2)}}),u=class extends o{static{this.styles=[s,c]}connectedCallback(){super.connectedCallback(),this._unsubscribe=e.subscribe(()=>this.requestUpdate())}disconnectedCallback(){super.disconnectedCallback(),this._unsubscribe?.(),this._unsubscribe=void 0}willUpdate(){this.dataset.scheme=this.scheme??e.current,this.label?(this.setAttribute(`role`,`img`),this.setAttribute(`aria-label`,this.label),this.removeAttribute(`aria-hidden`)):(this.removeAttribute(`role`),this.removeAttribute(`aria-label`),this.setAttribute(`aria-hidden`,`true`))}render(){return i`
+      <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. -->
+        ${l.map(e=>a`
+            <circle
+              class="ray"
+              cx=${e.cx}
+              cy=${e.cy}
+              r="1.5"
+              style="--i:${e.i}"
+            />
+          `)}
+      </svg>
+    `}};r([n({reflect:!0})],u.prototype,`scheme`,void 0),r([n()],u.prototype,`label`,void 0);export{u as ColorSchemeIcon};
+//# sourceMappingURL=color-scheme-icon.js.map

package/cdn/elements/color-scheme-icon/color-scheme-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme-icon.js","names":[],"sources":["../../../src/html/elements/color-scheme-icon/color-scheme-icon.css?inline","../../../src/html/elements/color-scheme-icon/color-scheme-icon.ts"],"sourcesContent":["/* Sun ↔ moon, morphed rather than swapped.\n\n   The two glyphs are one shape: a disc that grows, a mask circle that slides in\n   to bite a crescent out of it, and eight ray dots that collapse to nothing.\n   Nothing is added or removed between the states — which is the whole reason\n   this is authored SVG and not an `<l-icon>`. An Iconify icon is an opaque\n   document fetched from a set: you can cross-fade two of them, but you cannot\n   grow one into the other or animate a mask inside it.\n\n   Shadow DOM is doing real work here beyond encapsulation: the mask needs an\n   `id`, and ids are global in light DOM. Two icons on one page would collide and\n   the second would render through the first's mask. A shadow root scopes them\n   per instance for free. */\n\n:host {\n  --size: 1em;\n  --color: currentColor;\n\n  flex: none;\n  display: inline-flex;\n  inline-size: var(--size);\n  block-size: var(--size);\n  color: var(--color);\n}\n\nsvg {\n  inline-size: 100%;\n  block-size: 100%;\n  fill: currentColor;\n  /* The tilt is what sells the transition: the glyph turns as it changes, so the\n     eye reads one object moving instead of two states cross-fading. */\n  rotate: 0deg;\n  transition: rotate 500ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n/* Every animated part scales about its own centre. `fill-box` is what makes\n   `center` mean the shape's own box rather than the whole viewBox. */\n.disc,\n.ray,\n.biter {\n  transform-box: fill-box;\n  transform-origin: center;\n}\n\n.disc {\n  /* Sun-sized. The dark state grows it to the full radius; the mask then takes\n     the bite that turns it into a crescent. */\n  scale: 0.56;\n  transition: scale 500ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.biter {\n  /* Parked far enough out that it clears the sun entirely. The clearance must be\n     computed against the disc's *authored* r=9, not the 5.04 the sun appears to\n     be: masking happens in the element's own user space, before its `scale` is\n     applied, so the mask sees the full-size circle. 16px on both axes puts the\n     centres 22.6 apart against a 9+11 sum — the earlier 13px looked ample and\n     still bit a notch out of the sun's upper right.\n     It slides in rather than fading, so the crescent is carved, never dissolved. */\n  translate: 16px -16px;\n  transition: translate 500ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.ray {\n  scale: 1;\n  transition: scale 300ms cubic-bezier(0.34, 1.56, 0.64, 1);\n  /* Staggered from the index each ray carries, so they retract and return as a\n     ripple around the disc instead of blinking in unison. */\n  transition-delay: calc(var(--i) * 18ms);\n}\n\n:host([data-scheme='dark']) {\n  svg {\n    rotate: 40deg;\n  }\n\n  .disc {\n    scale: 1;\n  }\n\n  .biter {\n    translate: 5px -5px;\n  }\n\n  .ray {\n    scale: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  svg,\n  .disc,\n  .biter,\n  .ray {\n    transition-duration: 0ms;\n    transition-delay: 0ms;\n  }\n}\n","import { html, svg, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { colorScheme, type ColorScheme } from '../../color-scheme.js';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport rawStyles from './color-scheme-icon.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\nexport type { ColorScheme };\n\n/** Eight ray dots on a circle of radius 9.2 around the glyph's centre. */\nconst RAYS = Array.from({ length: 8 }, (_, i) => {\n  const angle = (i * Math.PI) / 4;\n  return {\n    i,\n    cx: (12 + Math.cos(angle) * 9.2).toFixed(2),\n    cy: (12 + Math.sin(angle) * 9.2).toFixed(2),\n  };\n});\n\n/**\n * @summary A sun that morphs into a moon. Purely presentational: it shows a\n * color scheme, it does not choose or store one.\n *\n * The two glyphs are a single shape — the disc grows, a mask slides in to carve\n * the crescent, and the rays retract in a ripple — so the change reads as one\n * object turning rather than two icons swapping. That is why this is authored\n * SVG rather than an `<l-icon>`: an Iconify icon is opaque, and you cannot grow\n * one into another or animate a mask inside it.\n *\n * Use it wherever a scheme needs a glyph and the surrounding element is already\n * the control — a `menuitemcheckbox` row, a button, a legend. With no `scheme`\n * it follows the page's scheme from `luxen-ui/color-scheme`, so it needs no\n * wiring; set `scheme` to pin it.\n *\n * @example In a menu row, where the row is the control\n * ```html\n * <l-dropdown-item type=\"checkbox\" checked>\n *   <l-color-scheme-icon slot=\"prefix\" scheme=\"dark\"></l-color-scheme-icon>\n *   Dark theme\n * </l-dropdown-item>\n * ```\n *\n * @cssproperty [--size=1em] - Width and height of the glyph.\n * @cssproperty [--color=currentColor] - Glyph color.\n *\n * @csspart base - The root `<svg>`, for overriding the morph's timing or tilt.\n *\n * @customElement l-color-scheme-icon\n */\nexport class ColorSchemeIcon extends LuxenElement {\n  static override styles = [hostStyles, styles];\n\n  /**\n   * 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\n   * stays in step with every other control without wiring. Set it to pin the\n   * glyph, for a legend or a preview that must not move.\n   */\n  @property({ reflect: true })\n  scheme?: ColorScheme;\n\n  /**\n   * Accessible label. When set, the glyph becomes meaningful (`role=\"img\"`);\n   * when absent it is decorative and hidden from assistive tech — the right\n   * default inside a row or button that already carries the name.\n   */\n  @property()\n  label?: string;\n\n  private _unsubscribe?: () => void;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Follows the page's scheme, not the OS directly: an override chosen\n    // elsewhere on the page — or in another tab — has to move this glyph too.\n    this._unsubscribe = colorScheme.subscribe(() => this.requestUpdate());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._unsubscribe?.();\n    this._unsubscribe = undefined;\n  }\n\n  override willUpdate() {\n    // Set *before* the first render, not after: the shapes are then created\n    // already carrying the right values, and a page that loads in dark mode\n    // shows a moon instead of a sun animating into one.\n    //\n    // The CSS keys off `data-scheme` rather than the `scheme` attribute so the\n    // inherited value styles exactly like an explicit one — one selector, not two.\n    this.dataset.scheme = this.scheme ?? colorScheme.current;\n\n    // Not gated on a changed `label`: the decorative default has to be applied\n    // on the very first update too, when nothing has changed yet.\n    if (this.label) {\n      this.setAttribute('role', 'img');\n      this.setAttribute('aria-label', this.label);\n      this.removeAttribute('aria-hidden');\n    } else {\n      this.removeAttribute('role');\n      this.removeAttribute('aria-label');\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  override render() {\n    return html`\n      <svg\n        part=\"base\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n        <mask id=\"crescent\">\n          <rect\n            width=\"24\"\n            height=\"24\"\n            fill=\"#fff\"\n          />\n          <circle\n            class=\"biter\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"11\"\n            fill=\"#000\"\n          />\n        </mask>\n\n        <circle\n          class=\"disc\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"9\"\n          mask=\"url(#crescent)\"\n        />\n\n        <!-- \\`svg\\`, not \\`html\\`: a nested template is parsed as HTML even when it\n             sits inside an <svg>, so these circles would land in the HTML\n             namespace and render nothing at all. -->\n        ${RAYS.map(\n          (ray) => svg`\n            <circle\n              class=\"ray\"\n              cx=${ray.cx}\n              cy=${ray.cy}\n              r=\"1.5\"\n              style=\"--i:${ray.i}\"\n            />\n          `,\n        )}\n      </svg>\n    `;\n  }\n}\n"],"mappings":"mTCOA,IAAM,EAAS,EAAU,i0BAAS,EAK5B,EAAO,MAAM,KAAK,CAAE,OAAQ,CAAE,GAAI,EAAG,IAAM,CAC/C,IAAM,EAAS,EAAI,KAAK,GAAM,EAC9B,MAAO,CACL,IACA,IAAK,GAAK,KAAK,IAAI,CAAK,EAAI,IAAA,CAAK,QAAQ,CAAC,EAC1C,IAAK,GAAK,KAAK,IAAI,CAAK,EAAI,IAAA,CAAK,QAAQ,CAAC,CAC5C,CACF,CAAC,EAgCY,EAAb,cAAqC,CAAa,oBACvB,CAAC,EAAY,CAAM,EAqB5C,mBAA6B,CAC3B,MAAM,kBAAkB,EAGxB,KAAK,aAAe,EAAY,cAAgB,KAAK,cAAc,CAAC,CACtE,CAEA,sBAAgC,CAC9B,MAAM,qBAAqB,EAC3B,KAAK,eAAe,EACpB,KAAK,aAAe,IAAA,EACtB,CAEA,YAAsB,CAOpB,KAAK,QAAQ,OAAS,KAAK,QAAU,EAAY,QAI7C,KAAK,OACP,KAAK,aAAa,OAAQ,KAAK,EAC/B,KAAK,aAAa,aAAc,KAAK,KAAK,EAC1C,KAAK,gBAAgB,aAAa,IAElC,KAAK,gBAAgB,MAAM,EAC3B,KAAK,gBAAgB,YAAY,EACjC,KAAK,aAAa,cAAe,MAAM,EAE3C,CAEA,QAAkB,CAChB,MAAO,EAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAgCL,EAAK,IACJ,GAAQ,CAAG;;;mBAGH,EAAI,GAAG;mBACP,EAAI,GAAG;;2BAEC,EAAI,EAAE;;WAGzB,EAAE;;KAGR,CACF,KA/FG,EAAS,CAAE,QAAS,EAAK,CAAC,CAAA,EAAA,EAAA,UAAA,SAAA,IAAA,EAAA,KAQ1B,EAAS,CAAA,EAAA,EAAA,UAAA,QAAA,IAAA,EAAA"}

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

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

package/cdn/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/cdn/elements/color-scheme-icon/index.js

@@ -0,0 +1,2 @@
+import{define as e}from"../../define.js";import{ColorSchemeIcon as t}from"./color-scheme-icon.js";e(`color-scheme-icon`,t);
+//# sourceMappingURL=index.js.map

package/cdn/elements/color-scheme-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/color-scheme-icon/index.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { ColorSchemeIcon } from './color-scheme-icon.js';\nexport * from './color-scheme-icon.js';\ndefine('color-scheme-icon', ColorSchemeIcon);\n"],"mappings":"kGAGA,EAAO,oBAAqB,CAAe"}

package/cdn/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/cdn/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/cdn/elements/dropdown-item/dropdown-item.js

@@ -1,4 +1,24 @@
-import{tagName as e}from"../../registry.js";import{i as t}from"../../chunks/lit.js";import{i as n,r,t as i}from"../../chunks/decorate.js";import{a,t as o}from"../../chunks/lit-html.js";import{LuxenElement as s}from"../../shared/luxen-element.js";import c from"../../shared/styles/host.styles.js";import{PopoverController as l}from"../../shared/controllers/popover.js";var u=t(`:host{display:block}:host([disabled]){pointer-events:none;opacity:.5}.item{box-sizing:border-box;cursor:pointer;min-block-size:36px;color:var(--l-color-text-primary);white-space:nowrap;text-align:start;border-radius:4px;outline:none;align-items:center;gap:8px;padding:.375rem .5rem;font-size:.875rem;line-height:1.5;display:flex}.item:focus-visible{background:var(--l-color-bg-state-hover);outline:2px solid var(--l-focus-ring);outline-offset:-2px}@media (hover:hover){.item:hover{background:var(--l-color-bg-state-hover)}}:host([submenu-open]) .item{background:var(--l-color-bg-state-hover)}:host([variant=destructive]) .item{color:var(--l-color-text-danger)}:host([variant=destructive]) .item:focus-visible{background:var(--l-color-bg-fill-danger-soft);outline-color:var(--l-color-text-danger)}@media (hover:hover){:host([variant=destructive]) .item:hover{background:var(--l-color-bg-fill-danger-soft)}}.check{flex-shrink:0;width:16px;display:flex}.submenu-indicator{background-color:currentColor;flex-shrink:0;block-size:16px;inline-size:16px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat}:host(:dir(rtl)) .submenu-indicator{scale:-1 1}.submenu{inset:unset;box-sizing:border-box;width:max-content;padding:var(--padding,.25rem);border:1px solid var(--l-color-border-overlay);border-radius:var(--border-radius,6px);background:var(--background,var(--l-color-surface-overlay));color:var(--l-color-text-primary);box-shadow:var(--shadow,0 4px 6px -1px #00000014, 0 2px 4px -2px #0000000f);margin:0;font-size:.875rem;line-height:1.5;overflow:visible}slot[name=submenu]::slotted(hr){height:1px;margin-block:var(--padding,.25rem);margin-inline:calc(var(--padding,.25rem) * -1);background:var(--l-color-divider);border:0;display:block}:host(:not([checked])) .check svg{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;display:flex}.label{flex:1}`),d=class extends s{constructor(...t){super(...t),this._submenuFloating=new l(this,{getTriggerElement:()=>this,getFloatingElement:()=>this._submenuEl,getArrowElement:()=>null}),this.#e=``,this.#t=!1,this.#n=`normal`,this.#r=void 0,this.#i=!1,this.#a=!1,this.#o=!1,this._onSubmenuSlotChange=t=>{let n=t.target;this._hasSubmenu=n.assignedElements().some(t=>t.tagName===e(`dropdown-item`).toUpperCase())}}static{this.styles=[c,u]}#e;get value(){return this.#e}set value(e){this.#e=e}#t;get disabled(){return this.#t}set disabled(e){this.#t=e}#n;get type(){return this.#n}set type(e){this.#n=e}#r;get variant(){return this.#r}set variant(e){this.#r=e}#i;get checked(){return this.#i}set checked(e){this.#i=e}#a;get submenuOpen(){return this.#a}set submenuOpen(e){this.#a=e}#o;get _hasSubmenu(){return this.#o}set _hasSubmenu(e){this.#o=e}get hasSubmenu(){return this._hasSubmenu}connectedCallback(){super.connectedCallback(),this.hasAttribute(`role`)||this.setAttribute(`role`,`none`)}get _submenuEl(){return this.shadowRoot.querySelector(`.submenu`)}getTextLabel(){let e=this.shadowRoot?.querySelector(`slot:not([name])`);return e?e.assignedNodes({flatten:!0}).map(e=>e.textContent??``).join(``).trim():(this.textContent??``).trim()}getSubmenuItems(){let t=this.shadowRoot?.querySelector(`slot[name="submenu"]`);return t?t.assignedElements().filter(t=>t.tagName===e(`dropdown-item`).toUpperCase()&&!t.disabled):[]}openSubmenu(){!this._hasSubmenu||this.disabled||this.submenuOpen||(this.submenuOpen=!0)}closeSubmenu(){for(let e of this.getSubmenuItems())e.closeSubmenu();this.submenuOpen&&=!1}updated(e){e.has(`submenuOpen`)&&this._handleSubmenuOpenChange()}_getDuration(e){let t=parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(t)?150:t}async _handleSubmenuOpenChange(){let e=this._submenuEl;if(!e)return;let t={placement:getComputedStyle(this).direction===`rtl`?`left-start`:`right-start`,distance:0,skidding:-parseFloat(getComputedStyle(e).paddingTop||`0`)};if(this.submenuOpen){if(!this.isConnected||(e.showPopover(),await this._submenuFloating.updatePosition(t),!this.submenuOpen))return;await this._submenuFloating.animateShow(e,this._getDuration(`--show-duration`)),this._submenuFloating.startPositioning(t)}else{if(!e.matches(`:popover-open`))return;this._submenuFloating.stopPositioning(),await this._submenuFloating.animateHide(e,this._getDuration(`--hide-duration`)),e.matches(`:popover-open`)&&e.hidePopover()}}render(){let e=this.type===`checkbox`;return a`
+import{tagName as e}from"../../registry.js";import{i as t}from"../../chunks/lit.js";import{i as n,r,t as i}from"../../chunks/decorate.js";import{a,t as o}from"../../chunks/lit-html.js";import{LuxenElement as s}from"../../shared/luxen-element.js";import c from"../../shared/styles/host.styles.js";import{PopoverController as l}from"../../shared/controllers/popover.js";var u=t(`:host{display:block}:host([disabled]){pointer-events:none;opacity:.5}.item{box-sizing:border-box;cursor:pointer;min-block-size:36px;color:var(--l-color-text-primary);white-space:nowrap;text-align:start;border-radius:4px;outline:none;align-items:center;gap:8px;padding:.375rem .5rem;font-size:.875rem;line-height:1.5;display:flex}.item:focus-visible{background:var(--l-color-bg-state-hover);outline:2px solid var(--l-focus-ring);outline-offset:-2px}@media (hover:hover){.item:hover{background:var(--l-color-bg-state-hover)}}:host([submenu-open]) .item{background:var(--l-color-bg-state-hover)}:host([variant=destructive]) .item{color:var(--l-color-text-danger)}:host([variant=destructive]) .item:focus-visible{background:var(--l-color-bg-fill-danger-soft);outline-color:var(--l-color-text-danger)}@media (hover:hover){:host([variant=destructive]) .item:hover{background:var(--l-color-bg-fill-danger-soft)}}.check{flex-shrink:0;width:16px;display:flex}.submenu-indicator{background-color:currentColor;flex-shrink:0;block-size:16px;inline-size:16px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat}:host(:dir(rtl)) .submenu-indicator{scale:-1 1}.submenu{inset:unset;box-sizing:border-box;width:max-content;padding:var(--padding,.25rem);border:1px solid var(--l-color-border-overlay);border-radius:var(--border-radius,6px);background:var(--background,var(--l-color-surface-overlay));color:var(--l-color-text-primary);box-shadow:var(--shadow,0 4px 6px -1px #00000014, 0 2px 4px -2px #0000000f);margin:0;font-size:.875rem;line-height:1.5;overflow:visible}slot[name=submenu]::slotted(hr){height:1px;margin-block:var(--padding,.25rem);margin-inline:calc(var(--padding,.25rem) * -1);background:var(--l-color-divider);border:0;display:block}:host(:not([checked])) .check svg{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;display:flex}.label{flex:1}`),d=class extends s{constructor(...t){super(...t),this._submenuFloating=new l(this,{getTriggerElement:()=>this,getFloatingElement:()=>this._submenuEl,getArrowElement:()=>null}),this.#e=``,this.#t=!1,this.#n=`normal`,this.#r=void 0,this.#i=!1,this.#a=!1,this.#o=`start`,this.#s=!1,this._onSubmenuSlotChange=t=>{let n=t.target;this._hasSubmenu=n.assignedElements().some(t=>t.tagName===e(`dropdown-item`).toUpperCase())}}static{this.styles=[c,u]}#e;get value(){return this.#e}set value(e){this.#e=e}#t;get disabled(){return this.#t}set disabled(e){this.#t=e}#n;get type(){return this.#n}set type(e){this.#n=e}#r;get variant(){return this.#r}set variant(e){this.#r=e}#i;get checked(){return this.#i}set checked(e){this.#i=e}#a;get submenuOpen(){return this.#a}set submenuOpen(e){this.#a=e}#o;get checkPlacement(){return this.#o}set checkPlacement(e){this.#o=e}#s;get _hasSubmenu(){return this.#s}set _hasSubmenu(e){this.#s=e}get hasSubmenu(){return this._hasSubmenu}connectedCallback(){super.connectedCallback(),this.hasAttribute(`role`)||this.setAttribute(`role`,`none`)}get _submenuEl(){return this.shadowRoot.querySelector(`.submenu`)}getTextLabel(){let e=this.shadowRoot?.querySelector(`slot:not([name])`);return e?e.assignedNodes({flatten:!0}).map(e=>e.textContent??``).join(``).trim():(this.textContent??``).trim()}getSubmenuItems(){let t=this.shadowRoot?.querySelector(`slot[name="submenu"]`);return t?t.assignedElements().filter(t=>t.tagName===e(`dropdown-item`).toUpperCase()&&!t.disabled):[]}openSubmenu(){!this._hasSubmenu||this.disabled||this.submenuOpen||(this.submenuOpen=!0)}closeSubmenu(){for(let e of this.getSubmenuItems())e.closeSubmenu();this.submenuOpen&&=!1}updated(e){e.has(`submenuOpen`)&&this._handleSubmenuOpenChange()}_getDuration(e){let t=parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(t)?150:t}async _handleSubmenuOpenChange(){let e=this._submenuEl;if(!e)return;let t={placement:getComputedStyle(this).direction===`rtl`?`left-start`:`right-start`,distance:0,skidding:-parseFloat(getComputedStyle(e).paddingTop||`0`)};if(this.submenuOpen){if(!this.isConnected||(e.showPopover(),await this._submenuFloating.updatePosition(t),!this.submenuOpen))return;await this._submenuFloating.animateShow(e,this._getDuration(`--show-duration`)),this._submenuFloating.startPositioning(t)}else{if(!e.matches(`:popover-open`))return;this._submenuFloating.stopPositioning(),await this._submenuFloating.animateHide(e,this._getDuration(`--hide-duration`)),e.matches(`:popover-open`)&&e.hidePopover()}}_renderCheck(){return a`
+      <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(){let e=this.type===`checkbox`,t=e&&this.checkPlacement===`start`;return a`
       <div
         class="item"
         role=${e?`menuitemcheckbox`:`menuitem`}
@@ -9,33 +29,22 @@ import{tagName as e}from"../../registry.js";import{i as t}from"../../chunks/lit.
         aria-controls=${this._hasSubmenu?`submenu`:o}
         tabindex="-1"
       >
-        ${e?a`
-              <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>
-            `:a` <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.) -->
+        ${t?this._renderCheck():o}
+        ${t?o:a`<slot name="prefix"></slot>`}
         <span
           class="label"
           id="label"
           ><slot></slot
         ></span>
         <slot name="suffix"></slot>
+        ${e&&this.checkPlacement===`end`?this._renderCheck():o}
         ${this._hasSubmenu?a`<span
               class="submenu-indicator"
               aria-hidden="true"
@@ -54,5 +63,5 @@ import{tagName as e}from"../../registry.js";import{i as t}from"../../chunks/lit.
           @slotchange=${this._onSubmenuSlotChange}
         ></slot>
       </div>
-    `}};i([n()],d.prototype,`value`,null),i([n({type:Boolean,reflect:!0})],d.prototype,`disabled`,null),i([n()],d.prototype,`type`,null),i([n({reflect:!0})],d.prototype,`variant`,null),i([n({type:Boolean,reflect:!0})],d.prototype,`checked`,null),i([n({type:Boolean,reflect:!0,attribute:`submenu-open`})],d.prototype,`submenuOpen`,null),i([r()],d.prototype,`_hasSubmenu`,null);export{d as DropdownItem};
+    `}};i([n()],d.prototype,`value`,null),i([n({type:Boolean,reflect:!0})],d.prototype,`disabled`,null),i([n()],d.prototype,`type`,null),i([n({reflect:!0})],d.prototype,`variant`,null),i([n({type:Boolean,reflect:!0})],d.prototype,`checked`,null),i([n({type:Boolean,reflect:!0,attribute:`submenu-open`})],d.prototype,`submenuOpen`,null),i([n({reflect:!0,attribute:`check-placement`})],d.prototype,`checkPlacement`,null),i([r()],d.prototype,`_hasSubmenu`,null);export{d as DropdownItem};
 //# sourceMappingURL=dropdown-item.js.map