@ixfx/components 0.11.6 → 0.11.8

package/dist/checkbox.d.ts

@@ -6,9 +6,12 @@ declare class Checkbox extends LitElement {
   checked: boolean;
   disabled: boolean;
   indeterminate: boolean;
+  readonly: boolean;
   label: string;
   name: string;
   value: string;
+  /** Focus the inner input, so the host can be focused like a native checkbox. */
+  focus(options?: FocusOptions): void;
   render(): ReturnType<typeof html>;
 }
 type CheckboxChangeDetail = {

package/dist/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../src/checkbox/checkbox.ts"],"mappings":";;cA2Ca,iBAAiB;;SACrB,sBAAM;EAiKgB;EACA;EACA;EACD;EACA;EACA;EAanB,UAAU,kBAAkB;;KAoB3B;WACD;;KAGC,sBAAsB,YAAY;QAEtC;YACI;IACR,iBAAiB;;;UAIJ;EACf,QAAQ;;UAGO;EACf,oBAAoB,gBAAgB,kBAClC,MAAM,GACN,WAAW,MAAM,UAAU,OAAO,iBAAiB,aACnD,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
+{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../src/checkbox/checkbox.ts"],"mappings":";;cA4Ca,iBAAiB;;SACrB,sBAAM;EA2KgB;EACA;EACA;EACe;EAChB;EACA;EACA;;EAGnB,MAAM,UAAU;EAiBhB,UAAU,kBAAkB;;KAsB3B;WACD;;KAGC,sBAAsB,YAAY;QAEtC;YACI;IACR,iBAAiB;;;UAIJ;EACf,QAAQ;;UAGO;EACf,oBAAoB,gBAAgB,kBAClC,MAAM,GACN,WAAW,MAAM,UAAU,OAAO,iBAAiB,aACnD,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}

package/dist/checkbox.js

@@ -1,7 +1,7 @@
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 //#region src/checkbox/checkbox.ts
 /**
@@ -14,6 +14,7 @@ import { property } from "lit/decorators.js";
 * Properties
 *   checked   – checkbox state (default: false)
 *   disabled  – disabled state (default: false)
+*   readonly  – display-only: no pointer/keyboard interaction, full opacity (default: false)
 *   label     – label text
 *   name      – form field name
 *   value     – form field value
@@ -45,12 +46,14 @@ let Checkbox = class Checkbox extends LitElement {
 		this.checked = false;
 		this.disabled = false;
 		this.indeterminate = false;
+		this.readonly = false;
 		this.label = ``;
 		this.name = ``;
 		this.value = ``;
 		this.#handleChange = (e) => {
 			const target = e.target;
 			this.checked = target.checked;
+			this.indeterminate = false;
 			this.dispatchEvent(new CustomEvent(`change`, {
 				detail: { checked: this.checked },
 				bubbles: true,
@@ -113,6 +116,16 @@ let Checkbox = class Checkbox extends LitElement {
       opacity: var(--box-opacity-checked);
     }
 
+    /* Display-only: inert, keeps full opacity, no hover reveal */
+    :host([readonly]) {
+      pointer-events: none;
+    }
+    :host([readonly]) label,
+    :host([readonly]) label:hover {
+      cursor: default;
+      opacity: var(--box-opacity-checked);
+    }
+
     input {
       position: absolute;
       opacity: 0;
@@ -224,6 +237,10 @@ let Checkbox = class Checkbox extends LitElement {
   `
 		];
 	}
+	/** Focus the inner input, so the host can be focused like a native checkbox. */
+	focus(options) {
+		this.renderRoot.querySelector(`input`)?.focus(options);
+	}
 	#handleChange;
 	render() {
 		return html`
@@ -233,6 +250,8 @@ let Checkbox = class Checkbox extends LitElement {
           type="checkbox"
           .checked=${this.checked}
           .disabled=${this.disabled}
+          tabindex=${this.readonly ? `-1` : nothing}
+          aria-hidden=${this.readonly ? `true` : nothing}
           .indeterminate=${this.indeterminate}
           .name=${this.name}
           .value=${this.value}
@@ -247,6 +266,10 @@ let Checkbox = class Checkbox extends LitElement {
 __decorate([property({ type: Boolean })], Checkbox.prototype, "checked", void 0);
 __decorate([property({ type: Boolean })], Checkbox.prototype, "disabled", void 0);
 __decorate([property({ type: Boolean })], Checkbox.prototype, "indeterminate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Checkbox.prototype, "readonly", void 0);
 __decorate([property({ type: String })], Checkbox.prototype, "label", void 0);
 __decorate([property({ type: String })], Checkbox.prototype, "name", void 0);
 __decorate([property({ type: String })], Checkbox.prototype, "value", void 0);

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["#handleChange","customElement"],"sources":["../src/checkbox/checkbox.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\n/**\n * <x-checkbox> — Custom checkbox with diagonal line indicator.\n *\n * A brutalist checkbox component featuring a thick diagonal line\n * (top-left to bottom-right) when checked. Uses shadow DOM with\n * CSS variables for appearance customization.\n *\n * Properties\n *   checked   – checkbox state (default: false)\n *   disabled  – disabled state (default: false)\n *   label     – label text\n *   name      – form field name\n *   value     – form field value\n *\n * Events\n *   change – CustomEvent { detail: { checked: boolean } }, bubbles + composed\n *\n * CSS Variables\n *   --box-size               – box size (default: 18px)\n *   --box-border-width       – border width (default: 2px)\n *   --box-border-color       – border color\n *   --box-bg-unchecked       – background when unchecked\n *   --box-bg-checked         – background when checked\n *   --check-line-color         – diagonal line color\n *   --check-line-width         – diagonal line thickness (default: 6px)\n *   --box-opacity-unchecked  – opacity when unchecked (default: 0.5)\n *   --box-opacity-checked    – opacity when checked (default: 1)\n *   --box-opacity-hover      – opacity on hover (default: 1)\n *   --box-opacity-disabled   – opacity when disabled (default: 0.3)\n *   --box-label-gap          – gap between box and label (default: 8px)\n *   --label-font-size    – label font size (default: 14px)\n *   --label-opacity      – label opacity (default: 1)\n *   --label-opacity-unchecked – label opacity when unchecked (default: uses --label-opacity)\n *   --transition-duration – animation duration (default: 0.2s)\n */\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { prominenceStyles } from '../styles/prominence.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n@customElement(`ixfx-checkbox`)\nexport class Checkbox extends LitElement {\n  static styles = [prominenceStyles, themeFallbacks, css`\n    :host {\n      /* Box */\n      --box-size: 18px;\n      --box-border-color: var(--surface-4);\n      --box-bg-unchecked: color-mix(in oklch, var(--surface-3) 50%, var(--surface-2));\n      --box-bg-checked: color-mix(in oklch, var(--surface-3) 50%, var(--surface-2));\n      --box-opacity-checked: 1;\n      --box-opacity-hover: var(--prominence-tickled-opacity);\n      --box-opacity-disabled: var(--prominence-disabled-opacity);\n      --box-border-width: 2px;\n      \n      /* Check */\n      --check-line-width: 6px;\n      --check-line-color: var(--accent);\n\n      /* Spacing & borders */\n      --label-gap: var(--space-m);\n\n      /* Label */\n      --label-opacity: 1;\n      --label-opacity-unchecked: var(--label-opacity);\n      --label-fg: var(--surface-3-text);\n      --label-active: var(--surface-2-text);\n      --label-hover: var(--surface-2-text);\n\n      /* Animation */\n      --transition-duration: var(--transition);\n\n      display: inline-flex;\n      user-select: none;\n    }\n\n    label {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--label-gap);\n      cursor: pointer;\n      position: relative;\n      opacity: var(--box-opacity-unchecked);\n      transition: opacity var(--transition-duration);\n    }\n\n    label:hover {\n      opacity: var(--box-opacity-hover);\n    }\n\n    label:has(input:checked) {\n      opacity: var(--box-opacity-checked);\n    }\n\n    input {\n      position: absolute;\n      opacity: 0;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      clip: rect(0, 0, 0, 0);\n    }\n\n    .box {\n      position: relative;\n      width: var(--box-size);\n      height: var(--box-size);\n      border: var(--border, 1px solid #999);\n      background: var(--box-bg-unchecked);\n      flex-shrink: 0;\n      transition: background var(--transition-duration);\n      overflow: hidden;\n      box-shadow: inset 1px 1px 0px 1px color-mix(in oklch, var(--surface-2) 60%, transparent);\n    }\n    label:has(input:not(:disabled)) {\n      .box:hover {\n        background: color-mix(in oklch, var(--surface-4) 80%, transparent);\n        border-color: var(--accent, #666);\n        box-shadow: unset;\n      }\n    }\n\n    input:checked ~ .box {\n      background: var(--box-bg-checked);\n    }\n\n    /* Diagonal line from top-left to bottom-right */\n    .box::after {\n      content: '';\n      position: absolute;\n      width: 141.4%; /* sqrt(2) × 100% to span corner-to-corner */\n      height: var(--check-line-width);\n      background: var(--check-line-color);\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%) rotate(45deg);\n      opacity: 0;\n      transition: opacity var(--transition-duration);\n    }\n\n    input:checked ~ .box::after {\n      opacity: 1;\n    }\n\n    /* Horizontal line for indeterminate state */\n    .box::before {\n      content: '';\n      position: absolute;\n      width: 60%;\n      height: var(--check-line-width);\n      background: var(--check-line-color);\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      opacity: 0;\n      transition: opacity var(--transition-duration);\n    }\n\n    input:indeterminate ~ .box::before {\n      opacity: 1;\n    }\n\n    /* Hide diagonal checkmark when indeterminate (must come after checked rule) */\n    input:indeterminate ~ .box::after {\n      opacity: 0;\n    }\n\n    /* Focus state */\n    input:focus-visible ~ .box {\n      outline: 2px solid var(--check-line-color);\n      outline-offset: 2px;\n    }\n\n    /* Disabled state */\n    label:has(input:disabled) {\n      opacity: var(--box-opacity-disabled);\n      cursor: not-allowed;\n      .box {\n        box-shadow: unset;\n      }    \n    }\n\n    .label {\n      color: var(--label-fg);\n      opacity: var(--label-opacity);\n      transition: opacity var(--transition-duration);\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    .label:hover {\n      color: var(--label-hover);\n    }\n    .label:has(+ :hover) {\n      color: var(--label-hover);\n    }\n    .label:has(+ :active) {\n      color: var(--label-active);\n    }\n    input:not(:checked) ~ .label {\n      opacity: var(--label-opacity-unchecked);\n    }\n  `];\n\n  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean }) indeterminate = false;\n  @property({ type: String }) label = ``;\n  @property({ type: String }) name = ``;\n  @property({ type: String }) value = ``;\n\n  #handleChange = (e: Event): void => {\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.dispatchEvent(new CustomEvent<CheckboxChangeDetail>(`change`, {\n      detail: { checked: this.checked },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  override render(): ReturnType<typeof html> {\n    return html`\n      <label>\n        <input\n          name=\"checkbox\"\n          type=\"checkbox\"\n          .checked=${this.checked}\n          .disabled=${this.disabled}\n          .indeterminate=${this.indeterminate}\n          .name=${this.name}\n          .value=${this.value}\n          @change=${this.#handleChange}\n        />\n        <span class=\"box\"></span>\n        ${this.label ? html`<span class=\"label\">${this.label}</span>` : ``}\n      </label>\n    `;\n  }\n}\n\nexport type CheckboxChangeDetail = {\n  readonly checked: boolean;\n};\n\nexport type CheckboxChangeEvent = CustomEvent<CheckboxChangeDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-checkbox': Checkbox;\n  }\n}\n\nexport interface CheckboxEventMap {\n  change: CheckboxChangeEvent;\n}\n\nexport interface Checkbox {\n  addEventListener: (<K extends keyof CheckboxEventMap>(\n    type: K,\n    listener: (this: Checkbox, event: CheckboxEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CO,IAAM,WAAN,MAAM,iBAAiB,WAAW;;;EAkKA,KAAA,UAAA;EACC,KAAA,WAAA;EACK,KAAA,gBAAA;EACT,KAAA,QAAA;EACD,KAAA,OAAA;EACC,KAAA,QAAA;EAEnB,KAAA,iBAAA,MAAmB;GAClC,MAAM,SAAS,EAAE;GACjB,KAAK,UAAU,OAAO;GAEtB,KAAK,cAAc,IAAI,YAAkC,UAAU;IACjE,QAAQ,EAAE,SAAS,KAAK,QAAQ;IAChC,SAAS;IACT,UAAU;GACZ,CAAC,CAAC;EACJ;;;EAjLgB,KAAA,SAAA;GAAC;GAAkB;GAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+JrD;;CASD;CAWA,SAA2C;EACzC,OAAO,IAAI;;;;;qBAKM,KAAK,QAAQ;sBACZ,KAAK,SAAS;2BACT,KAAK,cAAc;kBAC5B,KAAK,KAAK;mBACT,KAAK,MAAM;oBACV,KAAKA,cAAc;;;UAG7B,KAAK,QAAQ,IAAI,uBAAuB,KAAK,MAAM,WAAW,GAAG;;;CAGzE;AACF;AApCG,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,SAAA,WAAA,WAAA,KAAA,CAAA;AAC1B,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,SAAA,WAAA,YAAA,KAAA,CAAA;AAC1B,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,SAAA,WAAA,iBAAA,KAAA,CAAA;AAC1B,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,SAAA,WAAA,SAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,SAAA,WAAA,QAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,SAAA,WAAA,SAAA,KAAA,CAAA;AAxK3BC,WAAAA,WAAAA,CAAAA,kBAAc,eAAe,CAAA,GAAA,QAAA"}
+{"version":3,"file":"checkbox.js","names":["#handleChange","customElement"],"sources":["../src/checkbox/checkbox.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\n/**\n * <x-checkbox> — Custom checkbox with diagonal line indicator.\n *\n * A brutalist checkbox component featuring a thick diagonal line\n * (top-left to bottom-right) when checked. Uses shadow DOM with\n * CSS variables for appearance customization.\n *\n * Properties\n *   checked   – checkbox state (default: false)\n *   disabled  – disabled state (default: false)\n *   readonly  – display-only: no pointer/keyboard interaction, full opacity (default: false)\n *   label     – label text\n *   name      – form field name\n *   value     – form field value\n *\n * Events\n *   change – CustomEvent { detail: { checked: boolean } }, bubbles + composed\n *\n * CSS Variables\n *   --box-size               – box size (default: 18px)\n *   --box-border-width       – border width (default: 2px)\n *   --box-border-color       – border color\n *   --box-bg-unchecked       – background when unchecked\n *   --box-bg-checked         – background when checked\n *   --check-line-color         – diagonal line color\n *   --check-line-width         – diagonal line thickness (default: 6px)\n *   --box-opacity-unchecked  – opacity when unchecked (default: 0.5)\n *   --box-opacity-checked    – opacity when checked (default: 1)\n *   --box-opacity-hover      – opacity on hover (default: 1)\n *   --box-opacity-disabled   – opacity when disabled (default: 0.3)\n *   --box-label-gap          – gap between box and label (default: 8px)\n *   --label-font-size    – label font size (default: 14px)\n *   --label-opacity      – label opacity (default: 1)\n *   --label-opacity-unchecked – label opacity when unchecked (default: uses --label-opacity)\n *   --transition-duration – animation duration (default: 0.2s)\n */\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { prominenceStyles } from '../styles/prominence.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n@customElement(`ixfx-checkbox`)\nexport class Checkbox extends LitElement {\n  static styles = [prominenceStyles, themeFallbacks, css`\n    :host {\n      /* Box */\n      --box-size: 18px;\n      --box-border-color: var(--surface-4);\n      --box-bg-unchecked: color-mix(in oklch, var(--surface-3) 50%, var(--surface-2));\n      --box-bg-checked: color-mix(in oklch, var(--surface-3) 50%, var(--surface-2));\n      --box-opacity-checked: 1;\n      --box-opacity-hover: var(--prominence-tickled-opacity);\n      --box-opacity-disabled: var(--prominence-disabled-opacity);\n      --box-border-width: 2px;\n      \n      /* Check */\n      --check-line-width: 6px;\n      --check-line-color: var(--accent);\n\n      /* Spacing & borders */\n      --label-gap: var(--space-m);\n\n      /* Label */\n      --label-opacity: 1;\n      --label-opacity-unchecked: var(--label-opacity);\n      --label-fg: var(--surface-3-text);\n      --label-active: var(--surface-2-text);\n      --label-hover: var(--surface-2-text);\n\n      /* Animation */\n      --transition-duration: var(--transition);\n\n      display: inline-flex;\n      user-select: none;\n    }\n\n    label {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--label-gap);\n      cursor: pointer;\n      position: relative;\n      opacity: var(--box-opacity-unchecked);\n      transition: opacity var(--transition-duration);\n    }\n\n    label:hover {\n      opacity: var(--box-opacity-hover);\n    }\n\n    label:has(input:checked) {\n      opacity: var(--box-opacity-checked);\n    }\n\n    /* Display-only: inert, keeps full opacity, no hover reveal */\n    :host([readonly]) {\n      pointer-events: none;\n    }\n    :host([readonly]) label,\n    :host([readonly]) label:hover {\n      cursor: default;\n      opacity: var(--box-opacity-checked);\n    }\n\n    input {\n      position: absolute;\n      opacity: 0;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      clip: rect(0, 0, 0, 0);\n    }\n\n    .box {\n      position: relative;\n      width: var(--box-size);\n      height: var(--box-size);\n      border: var(--border, 1px solid #999);\n      background: var(--box-bg-unchecked);\n      flex-shrink: 0;\n      transition: background var(--transition-duration);\n      overflow: hidden;\n      box-shadow: inset 1px 1px 0px 1px color-mix(in oklch, var(--surface-2) 60%, transparent);\n    }\n    label:has(input:not(:disabled)) {\n      .box:hover {\n        background: color-mix(in oklch, var(--surface-4) 80%, transparent);\n        border-color: var(--accent, #666);\n        box-shadow: unset;\n      }\n    }\n\n    input:checked ~ .box {\n      background: var(--box-bg-checked);\n    }\n\n    /* Diagonal line from top-left to bottom-right */\n    .box::after {\n      content: '';\n      position: absolute;\n      width: 141.4%; /* sqrt(2) × 100% to span corner-to-corner */\n      height: var(--check-line-width);\n      background: var(--check-line-color);\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%) rotate(45deg);\n      opacity: 0;\n      transition: opacity var(--transition-duration);\n    }\n\n    input:checked ~ .box::after {\n      opacity: 1;\n    }\n\n    /* Horizontal line for indeterminate state */\n    .box::before {\n      content: '';\n      position: absolute;\n      width: 60%;\n      height: var(--check-line-width);\n      background: var(--check-line-color);\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      opacity: 0;\n      transition: opacity var(--transition-duration);\n    }\n\n    input:indeterminate ~ .box::before {\n      opacity: 1;\n    }\n\n    /* Hide diagonal checkmark when indeterminate (must come after checked rule) */\n    input:indeterminate ~ .box::after {\n      opacity: 0;\n    }\n\n    /* Focus state */\n    input:focus-visible ~ .box {\n      outline: 2px solid var(--check-line-color);\n      outline-offset: 2px;\n    }\n\n    /* Disabled state */\n    label:has(input:disabled) {\n      opacity: var(--box-opacity-disabled);\n      cursor: not-allowed;\n      .box {\n        box-shadow: unset;\n      }    \n    }\n\n    .label {\n      color: var(--label-fg);\n      opacity: var(--label-opacity);\n      transition: opacity var(--transition-duration);\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    .label:hover {\n      color: var(--label-hover);\n    }\n    .label:has(+ :hover) {\n      color: var(--label-hover);\n    }\n    .label:has(+ :active) {\n      color: var(--label-active);\n    }\n    input:not(:checked) ~ .label {\n      opacity: var(--label-opacity-unchecked);\n    }\n  `];\n\n  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean }) indeterminate = false;\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  @property({ type: String }) label = ``;\n  @property({ type: String }) name = ``;\n  @property({ type: String }) value = ``;\n\n  /** Focus the inner input, so the host can be focused like a native checkbox. */\n  override focus(options?: FocusOptions): void {\n    this.renderRoot.querySelector(`input`)?.focus(options);\n  }\n\n  #handleChange = (e: Event): void => {\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n    // A native click clears the input's indeterminate flag; keep the property in step\n    this.indeterminate = false;\n\n    this.dispatchEvent(new CustomEvent<CheckboxChangeDetail>(`change`, {\n      detail: { checked: this.checked },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  override render(): ReturnType<typeof html> {\n    return html`\n      <label>\n        <input\n          name=\"checkbox\"\n          type=\"checkbox\"\n          .checked=${this.checked}\n          .disabled=${this.disabled}\n          tabindex=${this.readonly ? `-1` : nothing}\n          aria-hidden=${this.readonly ? `true` : nothing}\n          .indeterminate=${this.indeterminate}\n          .name=${this.name}\n          .value=${this.value}\n          @change=${this.#handleChange}\n        />\n        <span class=\"box\"></span>\n        ${this.label ? html`<span class=\"label\">${this.label}</span>` : ``}\n      </label>\n    `;\n  }\n}\n\nexport type CheckboxChangeDetail = {\n  readonly checked: boolean;\n};\n\nexport type CheckboxChangeEvent = CustomEvent<CheckboxChangeDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-checkbox': Checkbox;\n  }\n}\n\nexport interface CheckboxEventMap {\n  change: CheckboxChangeEvent;\n}\n\nexport interface Checkbox {\n  addEventListener: (<K extends keyof CheckboxEventMap>(\n    type: K,\n    listener: (this: Checkbox, event: CheckboxEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CO,IAAM,WAAN,MAAM,iBAAiB,WAAW;;;EA4KA,KAAA,UAAA;EACC,KAAA,WAAA;EACK,KAAA,gBAAA;EACU,KAAA,WAAA;EACnB,KAAA,QAAA;EACD,KAAA,OAAA;EACC,KAAA,QAAA;EAOnB,KAAA,iBAAA,MAAmB;GAClC,MAAM,SAAS,EAAE;GACjB,KAAK,UAAU,OAAO;GAEtB,KAAK,gBAAgB;GAErB,KAAK,cAAc,IAAI,YAAkC,UAAU;IACjE,QAAQ,EAAE,SAAS,KAAK,QAAQ;IAChC,SAAS;IACT,UAAU;GACZ,CAAC,CAAC;EACJ;;;EAnMgB,KAAA,SAAA;GAAC;GAAkB;GAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyKrD;;;CAWD,MAAe,SAA8B;EAC3C,KAAK,WAAW,cAAc,OAAO,CAAC,EAAE,MAAM,OAAO;CACvD;CAEA;CAaA,SAA2C;EACzC,OAAO,IAAI;;;;;qBAKM,KAAK,QAAQ;sBACZ,KAAK,SAAS;qBACf,KAAK,WAAW,OAAO,QAAQ;wBAC5B,KAAK,WAAW,SAAS,QAAQ;2BAC9B,KAAK,cAAc;kBAC5B,KAAK,KAAK;mBACT,KAAK,MAAM;oBACV,KAAKA,cAAc;;;UAG7B,KAAK,QAAQ,IAAI,uBAAuB,KAAK,MAAM,WAAW,GAAG;;;CAGzE;AACF;AA9CG,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,SAAA,WAAA,WAAA,KAAA,CAAA;AAC1B,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,SAAA,WAAA,YAAA,KAAA,CAAA;AAC1B,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,SAAA,WAAA,iBAAA,KAAA,CAAA;AAC1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,SAAA,WAAA,YAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,SAAA,WAAA,SAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,SAAA,WAAA,QAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,SAAA,WAAA,SAAA,KAAA,CAAA;AAnL3BC,WAAAA,WAAAA,CAAAA,kBAAc,eAAe,CAAA,GAAA,QAAA"}

package/dist/checked-select-CglRukbP.d.ts

@@ -0,0 +1,59 @@
+import "./checkbox.js";
+import { LitElement, PropertyValues } from "lit";
+//#region src/checked-select/types.d.ts
+type CheckState = `true` | `false` | `indeterminate`;
+type CheckedSelectItem = {
+  readonly value: string;
+  readonly label: string;
+  readonly checked: CheckState;
+};
+type ItemDisplay = `checkbox` | `text`;
+type ItemOrientation = `horizontal` | `vertical`;
+//#endregion
+//#region src/checked-select/checked-select.d.ts
+declare class CheckedSelect extends LitElement {
+  #private;
+  static styles: import("lit").CSSResult[];
+  items: readonly CheckedSelectItem[];
+  multiline: boolean;
+  /** At-rest checkboxes are display-only; clicking them just opens the popup. (Not `inert`: that native attribute would block the whole element.) */
+  itemsInert: boolean;
+  /** How at-rest items are shown: as `checkbox`es, or as comma-separated `text`. */
+  itemDisplay: ItemDisplay;
+  /** Direction the resting items flow: `horizontal` (default) or `vertical` (one per row). */
+  orientation: ItemOrientation;
+  placeholder: string;
+  disabled: boolean;
+  private _open;
+  private _draft;
+  private _order;
+  private _size;
+  get isOpen(): boolean;
+  disconnectedCallback(): void;
+  willUpdate(changed: PropertyValues): void;
+  open(): Promise<void>;
+  commit(): void;
+  cancel(): void;
+  protected render(): import("lit").TemplateResult<1>;
+}
+type CheckedSelectChangeDetail = {
+  /** Every item, with its committed state. */
+  readonly items: readonly CheckedSelectItem[];
+  /** Only the items whose state changed. */
+  readonly changed: readonly CheckedSelectItem[];
+};
+type CheckedSelectChangeEvent = CustomEvent<CheckedSelectChangeDetail>;
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-checked-select': CheckedSelect;
+  }
+}
+interface CheckedSelectEventMap {
+  change: CheckedSelectChangeEvent;
+}
+interface CheckedSelect {
+  addEventListener: (<K extends keyof CheckedSelectEventMap>(type: K, listener: (this: CheckedSelect, event: CheckedSelectEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+//#endregion
+export { CheckState as a, ItemOrientation as c, CheckedSelectEventMap as i, CheckedSelectChangeDetail as n, CheckedSelectItem as o, CheckedSelectChangeEvent as r, ItemDisplay as s, CheckedSelect as t };
+//# sourceMappingURL=checked-select-CglRukbP.d.ts.map

package/dist/checked-select-CglRukbP.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checked-select-CglRukbP.d.ts","names":[],"sources":["../src/checked-select/types.ts","../src/checked-select/checked-select.ts"],"mappings":";;;KAAY;KAEA;WACD;WACA;WACA,SAAS;;KAGR;KAEA;;;cCwCC,sBAAsB;;SACjB,sBAAM;EA6LK,gBAAgB;EACC;;EAE0B;;EAEA,aAAa;;EAExC,aAAa;EAC5B;EACgB;UAE3B;UACA;UACA;UACA;MAQb;EAsBK;EAKA,WAAW,SAAS;EAOvB,QAAQ;EAed;EAsCA;YAmMmB,wBAAM;;KA6Cf;;WAED,gBAAgB;;WAEhB,kBAAkB;;KAGjB,2BAA2B,YAAY;QAE3C;YACI;IACR,uBAAuB;;;UAIV;EACf,QAAQ;;UAGO;EACf,oBAAoB,gBAAgB,uBAClC,MAAM,GACN,WAAW,MAAM,eAAe,OAAO,sBAAsB,aAC7D,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}