@f-ewald/components 1.16.0 → 1.18.0

package/dist/split-hero.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+/**
+ * Full-viewport split layout: a user-supplied photo fills one half, the
+ * default slot (typically a sign-in/sign-up form) fills the other. Below the
+ * shared 48rem breakpoint the photo becomes a blurred, full-bleed backdrop
+ * behind a solid content card instead of disappearing outright.
+ *
+ * Give the host a height the same way as `app-shell` (e.g. `height: 100vh`).
+ *
+ * @element split-hero
+ * @slot - Form or other content for the non-image half.
+ */
+export declare class SplitHero extends LitElement {
+    /** URL of the image filling the visual half; omit to render content full-width. */
+    src: string;
+    /** Accessible alternative text for the image; leave empty for a decorative photo. */
+    alt: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "split-hero": SplitHero;
+    }
+}
+//# sourceMappingURL=split-hero.d.ts.map

package/dist/split-hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-hero.d.ts","sourceRoot":"","sources":["../src/split-hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;GAUG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,mFAAmF;IACvE,GAAG,SAAM;IAErB,qFAAqF;IACzE,GAAG,SAAM;IAErB,OAAgB,MAAM,4BAiFpB;IAEO,MAAM,yCASd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/split-hero.js

@@ -0,0 +1,132 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * Full-viewport split layout: a user-supplied photo fills one half, the
+ * default slot (typically a sign-in/sign-up form) fills the other. Below the
+ * shared 48rem breakpoint the photo becomes a blurred, full-bleed backdrop
+ * behind a solid content card instead of disappearing outright.
+ *
+ * Give the host a height the same way as `app-shell` (e.g. `height: 100vh`).
+ *
+ * @element split-hero
+ * @slot - Form or other content for the non-image half.
+ */
+let SplitHero = class SplitHero extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** URL of the image filling the visual half; omit to render content full-width. */
+        this.src = "";
+        /** Accessible alternative text for the image; leave empty for a decorative photo. */
+        this.alt = "";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: flex;
+        block-size: 100%;
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+      }
+      .visual {
+        flex: 1 1 0;
+        min-width: 0;
+        margin: 0;
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      .visual img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .content {
+        position: relative;
+        flex: 1 1 0;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        padding: 2rem;
+        overflow-y: auto;
+        background: var(--ui-surface, #ffffff);
+        color: var(--ui-text, #0f172a);
+      }
+      .backdrop {
+        display: none;
+      }
+      .content-inner {
+        position: relative;
+        z-index: 1;
+        width: 100%;
+        max-width: 25rem;
+      }
+      @media (max-width: 48rem) {
+        .visual {
+          display: none;
+        }
+        .content {
+          padding: 1.5rem;
+        }
+        .backdrop {
+          display: block;
+          position: absolute;
+          inset: 0;
+          z-index: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          filter: blur(2.5rem);
+          pointer-events: none;
+        }
+        .content-inner.card {
+          background: var(--ui-surface, #ffffff);
+          border-radius: var(--ui-radius, 0.5rem);
+          box-shadow: var(
+            --ui-shadow-lg,
+            0 20px 25px -5px rgb(0 0 0 / 0.1),
+            0 8px 10px -6px rgb(0 0 0 / 0.1)
+          );
+          padding: 1.5rem;
+        }
+      }
+    `,
+    ]; }
+    render() {
+        const hasPhoto = Boolean(this.src);
+        return html `
+      ${hasPhoto ? html `<figure class="visual"><img src=${this.src} alt=${this.alt} /></figure>` : ""}
+      <div class="content">
+        ${hasPhoto ? html `<img class="backdrop" src=${this.src} alt="" aria-hidden="true" />` : ""}
+        <div class="content-inner ${hasPhoto ? "card" : ""}"><slot></slot></div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], SplitHero.prototype, "src", void 0);
+__decorate([
+    property()
+], SplitHero.prototype, "alt", void 0);
+SplitHero = __decorate([
+    customElement("split-hero")
+], SplitHero);
+export { SplitHero };
+//# sourceMappingURL=split-hero.js.map

package/dist/split-hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-hero.js","sourceRoot":"","sources":["../src/split-hero.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;GAUG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACL,mFAAmF;QACvE,QAAG,GAAG,EAAE,CAAC;QAErB,qFAAqF;QACzE,QAAG,GAAG,EAAE,CAAC;IA+FvB,CAAC;aA7FiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8EF;KACF,AAjFqB,CAiFpB;IAEO,MAAM;QACb,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACnC,OAAO,IAAI,CAAA;QACP,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,GAAG,QAAQ,IAAI,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;;UAE3F,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,GAAG,+BAA+B,CAAC,CAAC,CAAC,EAAE;oCAC9D,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;KAErD,CAAC;IACJ,CAAC;CACF,CAAA;AAlGa;IAAX,QAAQ,EAAE;sCAAU;AAGT;IAAX,QAAQ,EAAE;sCAAU;AALV,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAoGrB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Full-viewport split layout: a user-supplied photo fills one half, the\n * default slot (typically a sign-in/sign-up form) fills the other. Below the\n * shared 48rem breakpoint the photo becomes a blurred, full-bleed backdrop\n * behind a solid content card instead of disappearing outright.\n *\n * Give the host a height the same way as `app-shell` (e.g. `height: 100vh`).\n *\n * @element split-hero\n * @slot - Form or other content for the non-image half.\n */\n@customElement(\"split-hero\")\nexport class SplitHero extends LitElement {\n  /** URL of the image filling the visual half; omit to render content full-width. */\n  @property() src = \"\";\n\n  /** Accessible alternative text for the image; leave empty for a decorative photo. */\n  @property() alt = \"\";\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: flex;\n        block-size: 100%;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n      }\n      .visual {\n        flex: 1 1 0;\n        min-width: 0;\n        margin: 0;\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .visual img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n      .content {\n        position: relative;\n        flex: 1 1 0;\n        min-width: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        box-sizing: border-box;\n        padding: 2rem;\n        overflow-y: auto;\n        background: var(--ui-surface, #ffffff);\n        color: var(--ui-text, #0f172a);\n      }\n      .backdrop {\n        display: none;\n      }\n      .content-inner {\n        position: relative;\n        z-index: 1;\n        width: 100%;\n        max-width: 25rem;\n      }\n      @media (max-width: 48rem) {\n        .visual {\n          display: none;\n        }\n        .content {\n          padding: 1.5rem;\n        }\n        .backdrop {\n          display: block;\n          position: absolute;\n          inset: 0;\n          z-index: 0;\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n          filter: blur(2.5rem);\n          pointer-events: none;\n        }\n        .content-inner.card {\n          background: var(--ui-surface, #ffffff);\n          border-radius: var(--ui-radius, 0.5rem);\n          box-shadow: var(\n            --ui-shadow-lg,\n            0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1)\n          );\n          padding: 1.5rem;\n        }\n      }\n    `,\n  ];\n\n  override render() {\n    const hasPhoto = Boolean(this.src);\n    return html`\n      ${hasPhoto ? html`<figure class=\"visual\"><img src=${this.src} alt=${this.alt} /></figure>` : \"\"}\n      <div class=\"content\">\n        ${hasPhoto ? html`<img class=\"backdrop\" src=${this.src} alt=\"\" aria-hidden=\"true\" />` : \"\"}\n        <div class=\"content-inner ${hasPhoto ? \"card\" : \"\"}\"><slot></slot></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"split-hero\": SplitHero;\n  }\n}\n"]}

package/dist/ui-checkbox.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, type PropertyValues } from "lit";
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
 /**
  * A form-associated boolean checkbox, usable standalone or inside a native
  * `<form>`. Submits `name=on` when checked (matching native
@@ -8,7 +8,11 @@ import { LitElement, type PropertyValues } from "lit";
  * Renders a native `<input type="checkbox">` wrapped in a `<label>`, styled
  * via `:has()` on the wrapping label (matching `radio-pills`/`radio-cards`)
  * rather than styling the native input directly; the checkbox itself renders
- * at `1rem`, matching the existing radio-input convention.
+ * at `1rem`, matching the existing radio-input convention. An optional
+ * pre-rendered `icon` (matching `form-select`'s per-option icon convention)
+ * renders between the box and the label, inside the same clickable `<label>`
+ * — for a row that pairs a checkbox with an icon/swatch and needs the whole
+ * row, icon included, to stay one click target.
  *
  * @element ui-checkbox
  * @fires change - The checkbox was toggled by the user, in either direction;
@@ -30,6 +34,10 @@ export declare class UiCheckbox extends LitElement {
     name: string;
     /** Visible label text rendered next to the box. */
     label: string;
+    /** Pre-rendered icon template displayed between the box and the label, e.g. `iconPencil(14)` from this package's icon set. */
+    icon: TemplateResult | null;
+    /** Square icon size in pixels — 14 (inline icon size) by default. */
+    iconSize: number;
     private _formDisabled;
     protected willUpdate(_changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
@@ -39,7 +47,7 @@ export declare class UiCheckbox extends LitElement {
     formDisabledCallback(disabled: boolean): void;
     /** Restores the checked state from saved form state (bfcache/autofill). */
     formStateRestoreCallback(state: string | File | FormData | null): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/ui-checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-checkbox.d.ts","sourceRoot":"","sources":["../src/ui-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjE;;;;;;;;;;;;;;GAcG;AACH,qBACa,UAAW,SAAQ,UAAU;;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BAkEpB;IAEF,kCAAkC;IACL,OAAO,UAAS;IAC7C,8EAA8E;IACjD,aAAa,UAAS;IACnD,2EAA2E;IAC9C,QAAQ,UAAS;IAC9C,wEAAwE;IAC3C,QAAQ,UAAS;IAC9C,kEAAkE;IACtD,IAAI,SAAM;IACtB,mDAAmD;IACvC,KAAK,SAAM;IAEd,OAAO,CAAC,aAAa,CAAS;IAWvC,UAAmB,UAAU,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAE5D;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAQxD;IAED,kFAAkF;IAClF,iBAAiB,IAAI,IAAI,CAGxB;IAED,qDAAqD;IACrD,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAE5C;IAED,2EAA2E;IAC3E,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,CAGrE;IAwCQ,MAAM,yCAoBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"ui-checkbox.d.ts","sourceRoot":"","sources":["../src/ui-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK/F;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,UAAW,SAAQ,UAAU;;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BA4EpB;IAEF,kCAAkC;IACL,OAAO,UAAS;IAC7C,8EAA8E;IACjD,aAAa,UAAS;IACnD,2EAA2E;IAC9C,QAAQ,UAAS;IAC9C,wEAAwE;IAC3C,QAAQ,UAAS;IAC9C,kEAAkE;IACtD,IAAI,SAAM;IACtB,mDAAmD;IACvC,KAAK,SAAM;IACvB,8HAA8H;IAC9F,IAAI,EAAE,cAAc,GAAG,IAAI,CAAQ;IACnE,qEAAqE;IACzC,QAAQ,SAAM;IAEjC,OAAO,CAAC,aAAa,CAAS;IAWvC,UAAmB,UAAU,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAE5D;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAQxD;IAED,kFAAkF;IAClF,iBAAiB,IAAI,IAAI,CAGxB;IAED,qDAAqD;IACrD,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAE5C;IAED,2EAA2E;IAC3E,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,CAGrE;IAwCQ,MAAM,sBAyBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/ui-checkbox.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ref } from "lit/directives/ref.js";
 import { tokens } from "./tokens.js";
@@ -17,7 +17,11 @@ import { tokens } from "./tokens.js";
  * Renders a native `<input type="checkbox">` wrapped in a `<label>`, styled
  * via `:has()` on the wrapping label (matching `radio-pills`/`radio-cards`)
  * rather than styling the native input directly; the checkbox itself renders
- * at `1rem`, matching the existing radio-input convention.
+ * at `1rem`, matching the existing radio-input convention. An optional
+ * pre-rendered `icon` (matching `form-select`'s per-option icon convention)
+ * renders between the box and the label, inside the same clickable `<label>`
+ * — for a row that pairs a checkbox with an icon/swatch and needs the whole
+ * row, icon included, to stay one click target.
  *
  * @element ui-checkbox
  * @fires change - The checkbox was toggled by the user, in either direction;
@@ -38,6 +42,10 @@ let UiCheckbox = class UiCheckbox extends LitElement {
         this.name = "";
         /** Visible label text rendered next to the box. */
         this.label = "";
+        /** Pre-rendered icon template displayed between the box and the label, e.g. `iconPencil(14)` from this package's icon set. */
+        this.icon = null;
+        /** Square icon size in pixels — 14 (inline icon size) by default. */
+        this.iconSize = 14;
         this._formDisabled = false;
         this.#internals = this.attachInternals();
         this.#defaultChecked = false;
@@ -91,6 +99,16 @@ let UiCheckbox = class UiCheckbox extends LitElement {
       .required-mark {
         color: var(--ui-danger, #dc2626);
       }
+      .checkbox-icon {
+        display: inline-flex;
+        width: var(--checkbox-icon-size);
+        height: var(--checkbox-icon-size);
+        flex: 0 0 var(--checkbox-icon-size);
+      }
+      .checkbox-icon > svg {
+        width: 100%;
+        height: 100%;
+      }
       .sr-only {
         position: absolute;
         width: 1px;
@@ -189,6 +207,11 @@ let UiCheckbox = class UiCheckbox extends LitElement {
           ?required=${this.required}
           @change=${(e) => this.#onChange(e)}
         />
+        ${this.icon
+            ? html `<span class="checkbox-icon" style=${`--checkbox-icon-size: ${this.iconSize}px`} aria-hidden="true"
+              >${this.icon}</span
+            >`
+            : nothing}
         <span
           >${this.label}${this.required
             ? html `<span class="required-mark" aria-hidden="true"> *</span><span class="sr-only">
@@ -218,6 +241,12 @@ __decorate([
 __decorate([
     property()
 ], UiCheckbox.prototype, "label", void 0);
+__decorate([
+    property({ attribute: false })
+], UiCheckbox.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number })
+], UiCheckbox.prototype, "iconSize", void 0);
 __decorate([
     state()
 ], UiCheckbox.prototype, "_formDisabled", void 0);

package/dist/ui-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-checkbox.js","sourceRoot":"","sources":["../src/ui-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A form-associated boolean checkbox, usable standalone or inside a native\n * `<form>`. Submits `name=on` when checked (matching native\n * `<input type=\"checkbox\">` semantics) and participates fully in form\n * `reset()`, ancestor `<fieldset disabled>`, and `required` validity.\n *\n * Renders a native `<input type=\"checkbox\">` wrapped in a `<label>`, styled\n * via `:has()` on the wrapping label (matching `radio-pills`/`radio-cards`)\n * rather than styling the native input directly; the checkbox itself renders\n * at `1rem`, matching the existing radio-input convention.\n *\n * @element ui-checkbox\n * @fires change - The checkbox was toggled by the user, in either direction;\n *   detail: `{ checked }`. Programmatic `checked` assignments do not fire it.\n */\n@customElement(\"ui-checkbox\")\nexport class UiCheckbox extends LitElement {\n  static formAssociated = true;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n      }\n      .checkbox {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.5rem;\n        min-height: 2rem;\n        cursor: pointer;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        line-height: var(--ui-line-height-tight, 1.25);\n        color: var(--ui-text, #0f172a);\n      }\n      .checkbox input {\n        width: 1rem;\n        height: 1rem;\n        margin: 0;\n        accent-color: var(--ui-primary, #4f46e5);\n        cursor: pointer;\n      }\n      .checkbox:has(input:focus-visible) {\n        outline: none;\n      }\n      .checkbox:has(input:focus-visible) input {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n        border-radius: var(--ui-radius-sm, 0.25rem);\n      }\n      .checkbox:has(input:disabled) {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      .checkbox:has(input:disabled) input {\n        cursor: not-allowed;\n      }\n      .required-mark {\n        color: var(--ui-danger, #dc2626);\n      }\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        margin: -1px;\n        padding: 0;\n        overflow: hidden;\n        clip: rect(0 0 0 0);\n        clip-path: inset(50%);\n        white-space: nowrap;\n        border: 0;\n      }\n      @media (forced-colors: active) {\n        .checkbox:has(input:focus-visible) input {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        .checkbox:has(input:disabled) {\n          color: GrayText;\n          opacity: 1;\n        }\n      }\n    `,\n  ];\n\n  /** Whether the box is checked. */\n  @property({ type: Boolean }) checked = false;\n  /** Visual \"partial selection\" state; cleared on the next user interaction. */\n  @property({ type: Boolean }) indeterminate = false;\n  /** Disables interaction; merged with an ancestor `<fieldset disabled>`. */\n  @property({ type: Boolean }) disabled = false;\n  /** Marks the control invalid via `ElementInternals` while unchecked. */\n  @property({ type: Boolean }) required = false;\n  /** Form field name; submitted as `name=on` only while checked. */\n  @property() name = \"\";\n  /** Visible label text rendered next to the box. */\n  @property() label = \"\";\n\n  @state() private _formDisabled = false;\n\n  #internals = this.attachInternals();\n  #defaultChecked = false;\n  #inputEl: HTMLInputElement | null = null;\n\n  /** Whether the host or an ancestor fieldset currently disables the control. */\n  get #isDisabled(): boolean {\n    return this.disabled || this._formDisabled;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    if (!this.hasUpdated) this.#defaultChecked = this.checked;\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has(\"checked\") || changed.has(\"name\")) this.#syncFormValue();\n    if (changed.has(\"checked\") || changed.has(\"required\") || changed.has(\"disabled\") || changed.has(\"_formDisabled\")) {\n      this.#syncValidity();\n    }\n    if (changed.has(\"indeterminate\") && this.#inputEl) {\n      this.#inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  /** Restores the checked state captured at first render, per the form contract. */\n  formResetCallback(): void {\n    this.checked = this.#defaultChecked;\n    this.indeterminate = false;\n  }\n\n  /** Mirrors an ancestor fieldset's disabled state. */\n  formDisabledCallback(disabled: boolean): void {\n    this._formDisabled = disabled;\n  }\n\n  /** Restores the checked state from saved form state (bfcache/autofill). */\n  formStateRestoreCallback(state: string | File | FormData | null): void {\n    if (typeof state !== \"string\") return;\n    this.checked = state === \"on\";\n  }\n\n  #syncFormValue(): void {\n    if (!this.name || !this.checked) {\n      this.#internals.setFormValue(null);\n      return;\n    }\n    this.#internals.setFormValue(\"on\");\n  }\n\n  #syncValidity(): void {\n    if (this.#isDisabled) {\n      this.#internals.setValidity({});\n      return;\n    }\n    if (this.required && !this.checked) {\n      this.#internals.setValidity(\n        { valueMissing: true },\n        \"Please check this box to continue.\",\n        this.#inputEl ?? undefined,\n      );\n    } else {\n      this.#internals.setValidity({});\n    }\n  }\n\n  #onChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.indeterminate = false;\n    this.dispatchEvent(\n      new CustomEvent(\"change\", { detail: { checked: this.checked }, bubbles: true, composed: true }),\n    );\n  }\n\n  #onInputRef = (el: Element | undefined): void => {\n    this.#inputEl = (el as HTMLInputElement | undefined) ?? null;\n    if (this.#inputEl) this.#inputEl.indeterminate = this.indeterminate;\n  };\n\n  override render() {\n    return html`\n      <label class=\"checkbox\">\n        <input\n          ${ref(this.#onInputRef)}\n          type=\"checkbox\"\n          .checked=${this.checked}\n          ?disabled=${this.#isDisabled}\n          ?required=${this.required}\n          @change=${(e: Event) => this.#onChange(e)}\n        />\n        <span\n          >${this.label}${this.required\n            ? html`<span class=\"required-mark\" aria-hidden=\"true\"> *</span><span class=\"sr-only\">\n                  (required)</span\n                >`\n            : \"\"}</span\n        >\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ui-checkbox\": UiCheckbox;\n  }\n}\n"]}
+{"version":3,"file":"ui-checkbox.js","sourceRoot":"","sources":["../src/ui-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues, type TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A form-associated boolean checkbox, usable standalone or inside a native\n * `<form>`. Submits `name=on` when checked (matching native\n * `<input type=\"checkbox\">` semantics) and participates fully in form\n * `reset()`, ancestor `<fieldset disabled>`, and `required` validity.\n *\n * Renders a native `<input type=\"checkbox\">` wrapped in a `<label>`, styled\n * via `:has()` on the wrapping label (matching `radio-pills`/`radio-cards`)\n * rather than styling the native input directly; the checkbox itself renders\n * at `1rem`, matching the existing radio-input convention. An optional\n * pre-rendered `icon` (matching `form-select`'s per-option icon convention)\n * renders between the box and the label, inside the same clickable `<label>`\n * — for a row that pairs a checkbox with an icon/swatch and needs the whole\n * row, icon included, to stay one click target.\n *\n * @element ui-checkbox\n * @fires change - The checkbox was toggled by the user, in either direction;\n *   detail: `{ checked }`. Programmatic `checked` assignments do not fire it.\n */\n@customElement(\"ui-checkbox\")\nexport class UiCheckbox extends LitElement {\n  static formAssociated = true;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n      }\n      .checkbox {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.5rem;\n        min-height: 2rem;\n        cursor: pointer;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        line-height: var(--ui-line-height-tight, 1.25);\n        color: var(--ui-text, #0f172a);\n      }\n      .checkbox input {\n        width: 1rem;\n        height: 1rem;\n        margin: 0;\n        accent-color: var(--ui-primary, #4f46e5);\n        cursor: pointer;\n      }\n      .checkbox:has(input:focus-visible) {\n        outline: none;\n      }\n      .checkbox:has(input:focus-visible) input {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n        border-radius: var(--ui-radius-sm, 0.25rem);\n      }\n      .checkbox:has(input:disabled) {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      .checkbox:has(input:disabled) input {\n        cursor: not-allowed;\n      }\n      .required-mark {\n        color: var(--ui-danger, #dc2626);\n      }\n      .checkbox-icon {\n        display: inline-flex;\n        width: var(--checkbox-icon-size);\n        height: var(--checkbox-icon-size);\n        flex: 0 0 var(--checkbox-icon-size);\n      }\n      .checkbox-icon > svg {\n        width: 100%;\n        height: 100%;\n      }\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        margin: -1px;\n        padding: 0;\n        overflow: hidden;\n        clip: rect(0 0 0 0);\n        clip-path: inset(50%);\n        white-space: nowrap;\n        border: 0;\n      }\n      @media (forced-colors: active) {\n        .checkbox:has(input:focus-visible) input {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        .checkbox:has(input:disabled) {\n          color: GrayText;\n          opacity: 1;\n        }\n      }\n    `,\n  ];\n\n  /** Whether the box is checked. */\n  @property({ type: Boolean }) checked = false;\n  /** Visual \"partial selection\" state; cleared on the next user interaction. */\n  @property({ type: Boolean }) indeterminate = false;\n  /** Disables interaction; merged with an ancestor `<fieldset disabled>`. */\n  @property({ type: Boolean }) disabled = false;\n  /** Marks the control invalid via `ElementInternals` while unchecked. */\n  @property({ type: Boolean }) required = false;\n  /** Form field name; submitted as `name=on` only while checked. */\n  @property() name = \"\";\n  /** Visible label text rendered next to the box. */\n  @property() label = \"\";\n  /** Pre-rendered icon template displayed between the box and the label, e.g. `iconPencil(14)` from this package's icon set. */\n  @property({ attribute: false }) icon: TemplateResult | null = null;\n  /** Square icon size in pixels — 14 (inline icon size) by default. */\n  @property({ type: Number }) iconSize = 14;\n\n  @state() private _formDisabled = false;\n\n  #internals = this.attachInternals();\n  #defaultChecked = false;\n  #inputEl: HTMLInputElement | null = null;\n\n  /** Whether the host or an ancestor fieldset currently disables the control. */\n  get #isDisabled(): boolean {\n    return this.disabled || this._formDisabled;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    if (!this.hasUpdated) this.#defaultChecked = this.checked;\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has(\"checked\") || changed.has(\"name\")) this.#syncFormValue();\n    if (changed.has(\"checked\") || changed.has(\"required\") || changed.has(\"disabled\") || changed.has(\"_formDisabled\")) {\n      this.#syncValidity();\n    }\n    if (changed.has(\"indeterminate\") && this.#inputEl) {\n      this.#inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  /** Restores the checked state captured at first render, per the form contract. */\n  formResetCallback(): void {\n    this.checked = this.#defaultChecked;\n    this.indeterminate = false;\n  }\n\n  /** Mirrors an ancestor fieldset's disabled state. */\n  formDisabledCallback(disabled: boolean): void {\n    this._formDisabled = disabled;\n  }\n\n  /** Restores the checked state from saved form state (bfcache/autofill). */\n  formStateRestoreCallback(state: string | File | FormData | null): void {\n    if (typeof state !== \"string\") return;\n    this.checked = state === \"on\";\n  }\n\n  #syncFormValue(): void {\n    if (!this.name || !this.checked) {\n      this.#internals.setFormValue(null);\n      return;\n    }\n    this.#internals.setFormValue(\"on\");\n  }\n\n  #syncValidity(): void {\n    if (this.#isDisabled) {\n      this.#internals.setValidity({});\n      return;\n    }\n    if (this.required && !this.checked) {\n      this.#internals.setValidity(\n        { valueMissing: true },\n        \"Please check this box to continue.\",\n        this.#inputEl ?? undefined,\n      );\n    } else {\n      this.#internals.setValidity({});\n    }\n  }\n\n  #onChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.indeterminate = false;\n    this.dispatchEvent(\n      new CustomEvent(\"change\", { detail: { checked: this.checked }, bubbles: true, composed: true }),\n    );\n  }\n\n  #onInputRef = (el: Element | undefined): void => {\n    this.#inputEl = (el as HTMLInputElement | undefined) ?? null;\n    if (this.#inputEl) this.#inputEl.indeterminate = this.indeterminate;\n  };\n\n  override render() {\n    return html`\n      <label class=\"checkbox\">\n        <input\n          ${ref(this.#onInputRef)}\n          type=\"checkbox\"\n          .checked=${this.checked}\n          ?disabled=${this.#isDisabled}\n          ?required=${this.required}\n          @change=${(e: Event) => this.#onChange(e)}\n        />\n        ${this.icon\n          ? html`<span class=\"checkbox-icon\" style=${`--checkbox-icon-size: ${this.iconSize}px`} aria-hidden=\"true\"\n              >${this.icon}</span\n            >`\n          : nothing}\n        <span\n          >${this.label}${this.required\n            ? html`<span class=\"required-mark\" aria-hidden=\"true\"> *</span><span class=\"sr-only\">\n                  (required)</span\n                >`\n            : \"\"}</span\n        >\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ui-checkbox\": UiCheckbox;\n  }\n}\n"]}

package/docs/mapbox-map.md

@@ -0,0 +1,62 @@
+# `<mapbox-map>`
+
+A thin, generic wrapper around a `mapboxgl.Map` — construction, access
+token, style loading/switching, and container resizing only. It carries no
+domain logic: no layer registry, no click-handler system, no markers or
+popups. A consumer registers its own sources/layers/handlers against the
+`mapboxgl.Map` instance handed back on `map-ready`, the same instance
+`mapbox-map` continues to own (this component never calls `map.remove()`
+except on disconnect, so a consumer's own registrations survive style
+reloads exactly as they would using `mapboxgl.Map` directly).
+
+Deliberately does not construct the map until `styleUrl` is a non-empty
+string — if a consumer knows the desired style only after an async
+lookup (e.g. a saved user preference), delay setting `styleUrl` rather
+than setting a default and swapping it later, which would visibly flash
+the wrong basemap before the real one loads.
+
+## Install
+
+```js
+import "@f-ewald/components/mapbox-map.js";
+```
+
+## Usage
+
+```html
+<mapbox-map
+  access-token="pk.your-token"
+  style-url="mapbox://styles/mapbox/light-v11"
+></mapbox-map>
+<script type="module">
+  document.querySelector("mapbox-map").addEventListener("map-ready", (e) => {
+    const map = e.detail.map; // the underlying mapboxgl.Map
+    map.addSource("mine", { type: "geojson", data: "/mine.geojson" });
+    map.addLayer({ id: "mine", type: "circle", source: "mine", paint: { "circle-color": "#4f46e5" } });
+  });
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `accessToken` | `access-token` | `string` | `""` | Mapbox access token. Required before the map can be constructed. |
+| `styleUrl` | `style-url` | `string` | `""` | Style URL (e.g. `mapbox://styles/mapbox/light-v11`). The map is not constructed until this is a non-empty string — see the class doc. |
+| `center` | _(JS property only)_ | `[number, number]` | `[0, 0]` | Initial center as `[lng, lat]`. Only read at construction time. |
+| `zoom` | `zoom` | `number` | `0` | Initial zoom level. Only read at construction time. |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `map-style-reloaded` | A subsequent `styleUrl` change finished loading its new style (sources/layers registered by a consumer via the `map-ready` instance do not survive a style change and must be re-registered — same behavior as calling `map.setStyle()` directly); detail: `{ map: mapboxgl.Map }`. |
+| `map-ready` | The map (and, if `styleUrl` changed before the initial load finished, its final requested style) has finished loading; detail: `{ map: mapboxgl.Map }`. |
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+_None._

package/docs/range-slider.md

@@ -0,0 +1,59 @@
+# `<range-slider>`
+
+A form-associated numeric range slider, usable standalone or inside a
+native `<form>`. Wraps a native `<input type="range">` (kept for its free
+keyboard, drag, and screen-reader support) restyled to match this
+package's track/fill visual language (`stat-meter`, `percent-bar-chart`)
+instead of the browser-default appearance. Purely a value control — no
+built-in label; wrap in `form-field` for a labeled field, or render a
+value readout next to it (see the playground example), matching
+`autocomplete-input`/`form-select`.
+
+## Install
+
+```js
+import "@f-ewald/components/range-slider.js";
+```
+
+## Usage
+
+```html
+<range-slider min="100" max="5000" step="50" value="1000"></range-slider>
+<script type="module">
+  document.querySelector("range-slider").addEventListener("input", (e) => {
+    console.log(e.detail.value);
+  });
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `min` | `min` | `number` | `0` | Minimum value. |
+| `max` | `max` | `number` | `100` | Maximum value. |
+| `step` | `step` | `number` | `1` | Step increment. |
+| `value` | `value` | `number` | `0` | Current value. |
+| `disabled` | `disabled` | `boolean` | `false` | Disables interaction; merged with an ancestor `<fieldset disabled>`. |
+| `name` | `name` | `string` | `""` | Form field name. |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `input` | Fires continuously while dragging/typing; detail: `{ value }`. |
+| `change` | Fires once the value is committed (drag released, arrow key released); detail: `{ value }`. |
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-focus-ring` |
+| `--ui-primary` |
+| `--ui-surface` |
+| `--ui-surface-muted` |
+| `--ui-text-muted` |

package/docs/split-hero.md

@@ -0,0 +1,55 @@
+# `<split-hero>`
+
+Full-viewport split layout: a user-supplied photo fills one half, the
+default slot (typically a sign-in/sign-up form) fills the other. Below the
+shared 48rem breakpoint the photo becomes a blurred, full-bleed backdrop
+behind a solid content card instead of disappearing outright.
+
+Give the host a height the same way as `app-shell` (e.g. `height: 100vh`).
+
+## Install
+
+```js
+import "@f-ewald/components/split-hero.js";
+```
+
+## Usage
+
+```html
+<split-hero src="/photos/coast.jpg" alt="Coastal road" style="height: 100vh">
+  <form>
+    <h1>Sign in</h1>
+    <form-field label="Email"><input type="email" name="email" /></form-field>
+    <form-field label="Password"><input type="password" name="password" /></form-field>
+    <ui-button type="submit" variant="primary">Sign in</ui-button>
+  </form>
+</split-hero>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `src` | `src` | `string` | `""` | URL of the image filling the visual half; omit to render content full-width. |
+| `alt` | `alt` | `string` | `""` | Accessible alternative text for the image; leave empty for a decorative photo. |
+
+## Events
+
+_None._
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| `(default)` | Form or other content for the non-image half. |
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-font` |
+| `--ui-radius` |
+| `--ui-shadow-lg` |
+| `--ui-surface` |
+| `--ui-surface-muted` |
+| `--ui-text` |

package/docs/ui-checkbox.md

@@ -8,7 +8,11 @@ A form-associated boolean checkbox, usable standalone or inside a native
 Renders a native `<input type="checkbox">` wrapped in a `<label>`, styled
 via `:has()` on the wrapping label (matching `radio-pills`/`radio-cards`)
 rather than styling the native input directly; the checkbox itself renders
-at `1rem`, matching the existing radio-input convention.
+at `1rem`, matching the existing radio-input convention. An optional
+pre-rendered `icon` (matching `form-select`'s per-option icon convention)
+renders between the box and the label, inside the same clickable `<label>`
+— for a row that pairs a checkbox with an icon/swatch and needs the whole
+row, icon included, to stay one click target.
 
 ## Install
 
@@ -21,6 +25,8 @@ import "@f-ewald/components/ui-checkbox.js";
 ```html
 <ui-checkbox label="Subscribe to updates"></ui-checkbox>
 <ui-checkbox name="terms" label="I agree to the terms" required></ui-checkbox>
+<!-- .icon is set programmatically (a pre-rendered TemplateResult), not an attribute -->
+<ui-checkbox label="Show list view"></ui-checkbox>
 ```
 
 ## Attributes / properties
@@ -33,6 +39,8 @@ import "@f-ewald/components/ui-checkbox.js";
 | `required` | `required` | `boolean` | `false` | Marks the control invalid via `ElementInternals` while unchecked. |
 | `name` | `name` | `string` | `""` | Form field name; submitted as `name=on` only while checked. |
 | `label` | `label` | `string` | `""` | Visible label text rendered next to the box. |
+| `icon` | _(JS property only)_ | `TemplateResult | null` | `null` | Pre-rendered icon template displayed between the box and the label, e.g. `iconPencil(14)` from this package's icon set. |
+| `iconSize` | `iconSize` | `number` | `14` | Square icon size in pixels — 14 (inline icon size) by default. |
 
 ## Events