@f-ewald/components 1.16.0 → 1.17.0

package/dist/mapbox-map.d.ts

@@ -0,0 +1,59 @@
+import { LitElement } from "lit";
+/**
+ * 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.
+ *
+ * @element mapbox-map
+ * @fires map-ready - The map (and, if `styleUrl` changed before the initial
+ *   load finished, its final requested style) has finished loading;
+ *   detail: `{ map: mapboxgl.Map }`.
+ * @fires 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 }`.
+ */
+export declare class MapboxMap extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Mapbox access token. Required before the map can be constructed. */
+    accessToken: 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.
+     */
+    styleUrl: string;
+    /** Initial center as `[lng, lat]`. Only read at construction time. */
+    center: [number, number];
+    /** Initial zoom level. Only read at construction time. */
+    zoom: number;
+    private mapContainer;
+    private map?;
+    private mapLoaded;
+    private currentStyleUrl?;
+    private resizeObserver?;
+    /** The live `mapboxgl.Map` instance, once constructed (also available via `map-ready`'s event detail). */
+    getMap(): mapboxgl.Map | undefined;
+    protected firstUpdated(): void;
+    protected updated(changed: Map<PropertyKey, unknown>): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mapbox-map": MapboxMap;
+    }
+}
+//# sourceMappingURL=mapbox-map.d.ts.map

package/dist/mapbox-map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapbox-map.d.ts","sourceRoot":"","sources":["../src/mapbox-map.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,SAAU,SAAQ,UAAU;;IACvC,OAAgB,MAAM,4BAcpB;IAEF,uEAAuE;IAC9B,WAAW,SAAM;IAC1D;;;OAGG;IACmC,QAAQ,SAAM;IACpD,sEAAsE;IACtC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAU;IAClE,0DAA0D;IAC9B,IAAI,SAAK;IAEtB,OAAO,CAAC,YAAY,CAAkB;IAErD,OAAO,CAAC,GAAG,CAAC,CAAe;IAC3B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC,0GAA0G;IAC1G,MAAM,IAAI,QAAQ,CAAC,GAAG,GAAG,SAAS,CAEjC;IAED,UAAmB,YAAY,IAAI,IAAI,CAItC;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI,CAYnE;IA4BQ,oBAAoB,IAAI,IAAI,CAIpC;IAEQ,MAAM,yCAKd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/mapbox-map.js

@@ -0,0 +1,144 @@
+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, query } from "lit/decorators.js";
+import mapboxgl from "mapbox-gl";
+import { tokens } from "./tokens.js";
+const MAPBOX_GL_VERSION = "3.9.0";
+/**
+ * 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.
+ *
+ * @element mapbox-map
+ * @fires map-ready - The map (and, if `styleUrl` changed before the initial
+ *   load finished, its final requested style) has finished loading;
+ *   detail: `{ map: mapboxgl.Map }`.
+ * @fires 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 }`.
+ */
+let MapboxMap = class MapboxMap extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Mapbox access token. Required before the map can be constructed. */
+        this.accessToken = "";
+        /**
+         * 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.
+         */
+        this.styleUrl = "";
+        /** Initial center as `[lng, lat]`. Only read at construction time. */
+        this.center = [0, 0];
+        /** Initial zoom level. Only read at construction time. */
+        this.zoom = 0;
+        this.mapLoaded = false;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+      #map {
+        width: 100%;
+        height: 100%;
+      }
+    `,
+    ]; }
+    /** The live `mapboxgl.Map` instance, once constructed (also available via `map-ready`'s event detail). */
+    getMap() {
+        return this.map;
+    }
+    firstUpdated() {
+        this.resizeObserver = new ResizeObserver(() => this.map?.resize());
+        this.resizeObserver.observe(this);
+        if (this.accessToken && this.styleUrl)
+            this.#initializeMap();
+    }
+    updated(changed) {
+        if ((changed.has("accessToken") || changed.has("styleUrl")) && !this.map && this.accessToken && this.styleUrl) {
+            this.#initializeMap();
+            return;
+        }
+        if (changed.has("styleUrl") && this.map && this.mapLoaded && this.styleUrl !== this.currentStyleUrl) {
+            this.currentStyleUrl = this.styleUrl;
+            this.map.setStyle(this.styleUrl);
+            this.map.once("style.load", () => this.dispatchEvent(new CustomEvent("map-style-reloaded", { detail: { map: this.map }, bubbles: true, composed: true })));
+        }
+    }
+    #initializeMap() {
+        mapboxgl.accessToken = this.accessToken;
+        this.currentStyleUrl = this.styleUrl;
+        this.map = new mapboxgl.Map({
+            container: this.mapContainer,
+            style: this.currentStyleUrl,
+            center: this.center,
+            zoom: this.zoom,
+        });
+        this.map.once("load", () => {
+            this.mapLoaded = true;
+            // `updated()`'s style-swap branch requires `mapLoaded` to already be
+            // true, so a `styleUrl` change that arrives between construction and
+            // this "load" event is not caught there — reconcile it here instead.
+            if (this.styleUrl !== this.currentStyleUrl) {
+                this.currentStyleUrl = this.styleUrl;
+                this.map?.setStyle(this.styleUrl);
+                this.map?.once("style.load", () => this.dispatchEvent(new CustomEvent("map-ready", { detail: { map: this.map }, bubbles: true, composed: true })));
+                return;
+            }
+            this.dispatchEvent(new CustomEvent("map-ready", { detail: { map: this.map }, bubbles: true, composed: true }));
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+        this.map?.remove();
+    }
+    render() {
+        return html `
+      <link href="https://api.mapbox.com/mapbox-gl-js/v${MAPBOX_GL_VERSION}/mapbox-gl.css" rel="stylesheet" />
+      <div id="map"></div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: "access-token" })
+], MapboxMap.prototype, "accessToken", void 0);
+__decorate([
+    property({ attribute: "style-url" })
+], MapboxMap.prototype, "styleUrl", void 0);
+__decorate([
+    property({ attribute: false })
+], MapboxMap.prototype, "center", void 0);
+__decorate([
+    property({ type: Number })
+], MapboxMap.prototype, "zoom", void 0);
+__decorate([
+    query("#map")
+], MapboxMap.prototype, "mapContainer", void 0);
+MapboxMap = __decorate([
+    customElement("mapbox-map")
+], MapboxMap);
+export { MapboxMap };
+//# sourceMappingURL=mapbox-map.js.map

package/dist/mapbox-map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapbox-map.js","sourceRoot":"","sources":["../src/mapbox-map.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport mapboxgl from \"mapbox-gl\";\nimport { tokens } from \"./tokens.js\";\n\nconst MAPBOX_GL_VERSION = \"3.9.0\";\n\n/**\n * A thin, generic wrapper around a `mapboxgl.Map` — construction, access\n * token, style loading/switching, and container resizing only. It carries no\n * domain logic: no layer registry, no click-handler system, no markers or\n * popups. A consumer registers its own sources/layers/handlers against the\n * `mapboxgl.Map` instance handed back on `map-ready`, the same instance\n * `mapbox-map` continues to own (this component never calls `map.remove()`\n * except on disconnect, so a consumer's own registrations survive style\n * reloads exactly as they would using `mapboxgl.Map` directly).\n *\n * Deliberately does not construct the map until `styleUrl` is a non-empty\n * string — if a consumer knows the desired style only after an async\n * lookup (e.g. a saved user preference), delay setting `styleUrl` rather\n * than setting a default and swapping it later, which would visibly flash\n * the wrong basemap before the real one loads.\n *\n * @element mapbox-map\n * @fires map-ready - The map (and, if `styleUrl` changed before the initial\n *   load finished, its final requested style) has finished loading;\n *   detail: `{ map: mapboxgl.Map }`.\n * @fires map-style-reloaded - A subsequent `styleUrl` change finished\n *   loading its new style (sources/layers registered by a consumer via the\n *   `map-ready` instance do not survive a style change and must be\n *   re-registered — same behavior as calling `map.setStyle()` directly);\n *   detail: `{ map: mapboxgl.Map }`.\n */\n@customElement(\"mapbox-map\")\nexport class MapboxMap extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        height: 100%;\n      }\n      #map {\n        width: 100%;\n        height: 100%;\n      }\n    `,\n  ];\n\n  /** Mapbox access token. Required before the map can be constructed. */\n  @property({ attribute: \"access-token\" }) accessToken = \"\";\n  /**\n   * Style URL (e.g. `mapbox://styles/mapbox/light-v11`). The map is not\n   * constructed until this is a non-empty string — see the class doc.\n   */\n  @property({ attribute: \"style-url\" }) styleUrl = \"\";\n  /** Initial center as `[lng, lat]`. Only read at construction time. */\n  @property({ attribute: false }) center: [number, number] = [0, 0];\n  /** Initial zoom level. Only read at construction time. */\n  @property({ type: Number }) zoom = 0;\n\n  @query(\"#map\") private mapContainer!: HTMLDivElement;\n\n  private map?: mapboxgl.Map;\n  private mapLoaded = false;\n  private currentStyleUrl?: string;\n  private resizeObserver?: ResizeObserver;\n\n  /** The live `mapboxgl.Map` instance, once constructed (also available via `map-ready`'s event detail). */\n  getMap(): mapboxgl.Map | undefined {\n    return this.map;\n  }\n\n  protected override firstUpdated(): void {\n    this.resizeObserver = new ResizeObserver(() => this.map?.resize());\n    this.resizeObserver.observe(this);\n    if (this.accessToken && this.styleUrl) this.#initializeMap();\n  }\n\n  protected override updated(changed: Map<PropertyKey, unknown>): void {\n    if ((changed.has(\"accessToken\") || changed.has(\"styleUrl\")) && !this.map && this.accessToken && this.styleUrl) {\n      this.#initializeMap();\n      return;\n    }\n    if (changed.has(\"styleUrl\") && this.map && this.mapLoaded && this.styleUrl !== this.currentStyleUrl) {\n      this.currentStyleUrl = this.styleUrl;\n      this.map.setStyle(this.styleUrl);\n      this.map.once(\"style.load\", () =>\n        this.dispatchEvent(new CustomEvent(\"map-style-reloaded\", { detail: { map: this.map }, bubbles: true, composed: true })),\n      );\n    }\n  }\n\n  #initializeMap(): void {\n    mapboxgl.accessToken = this.accessToken;\n    this.currentStyleUrl = this.styleUrl;\n    this.map = new mapboxgl.Map({\n      container: this.mapContainer,\n      style: this.currentStyleUrl,\n      center: this.center,\n      zoom: this.zoom,\n    });\n    this.map.once(\"load\", () => {\n      this.mapLoaded = true;\n      // `updated()`'s style-swap branch requires `mapLoaded` to already be\n      // true, so a `styleUrl` change that arrives between construction and\n      // this \"load\" event is not caught there — reconcile it here instead.\n      if (this.styleUrl !== this.currentStyleUrl) {\n        this.currentStyleUrl = this.styleUrl;\n        this.map?.setStyle(this.styleUrl);\n        this.map?.once(\"style.load\", () =>\n          this.dispatchEvent(new CustomEvent(\"map-ready\", { detail: { map: this.map }, bubbles: true, composed: true })),\n        );\n        return;\n      }\n      this.dispatchEvent(new CustomEvent(\"map-ready\", { detail: { map: this.map }, bubbles: true, composed: true }));\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    this.map?.remove();\n  }\n\n  override render() {\n    return html`\n      <link href=\"https://api.mapbox.com/mapbox-gl-js/v${MAPBOX_GL_VERSION}/mapbox-gl.css\" rel=\"stylesheet\" />\n      <div id=\"map\"></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mapbox-map\": MapboxMap;\n  }\n}\n"]}

package/dist/range-slider.d.ts

@@ -0,0 +1,48 @@
+import { LitElement, type PropertyValues } from "lit";
+/**
+ * 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`.
+ *
+ * @element range-slider
+ * @fires input - Fires continuously while dragging/typing; detail: `{ value }`.
+ * @fires change - Fires once the value is committed (drag released, arrow
+ *   key released); detail: `{ value }`.
+ */
+export declare class RangeSlider extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult[];
+    /** Minimum value. */
+    min: number;
+    /** Maximum value. */
+    max: number;
+    /** Step increment. */
+    step: number;
+    /** Current value. */
+    value: number;
+    /** Disables interaction; merged with an ancestor `<fieldset disabled>`. */
+    disabled: boolean;
+    /** Form field name. */
+    name: string;
+    private _formDisabled;
+    protected willUpdate(changed: PropertyValues): void;
+    /** Resets to the value present at first render, per the form contract. */
+    formResetCallback(): void;
+    /** Mirrors an ancestor fieldset's disabled state. */
+    formDisabledCallback(disabled: boolean): void;
+    /** Restores the value from saved form state (bfcache/autofill). */
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "range-slider": RangeSlider;
+    }
+}
+//# sourceMappingURL=range-slider.d.ts.map

package/dist/range-slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider.d.ts","sourceRoot":"","sources":["../src/range-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIjE;;;;;;;;;;;;;;GAcG;AACH,qBACa,WAAY,SAAQ,UAAU;;IACzC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BAuGpB;IAEF,qBAAqB;IACO,GAAG,SAAK;IACpC,qBAAqB;IACO,GAAG,SAAO;IACtC,sBAAsB;IACM,IAAI,SAAK;IACrC,qBAAqB;IACO,KAAK,SAAK;IACtC,2EAA2E;IAC9C,QAAQ,UAAS;IAC9C,uBAAuB;IACX,IAAI,SAAM;IAEb,OAAO,CAAC,aAAa,CAAS;IAevC,UAAmB,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAG3D;IAED,0EAA0E;IAC1E,iBAAiB,IAAI,IAAI,CAExB;IAED,qDAAqD;IACrD,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAE5C;IAED,mEAAmE;IACnE,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,CAIrE;IAsBQ,MAAM,yCAcd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/range-slider.js

@@ -0,0 +1,240 @@
+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, state } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * 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`.
+ *
+ * @element range-slider
+ * @fires input - Fires continuously while dragging/typing; detail: `{ value }`.
+ * @fires change - Fires once the value is committed (drag released, arrow
+ *   key released); detail: `{ value }`.
+ */
+let RangeSlider = class RangeSlider extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Minimum value. */
+        this.min = 0;
+        /** Maximum value. */
+        this.max = 100;
+        /** Step increment. */
+        this.step = 1;
+        /** Current value. */
+        this.value = 0;
+        /** Disables interaction; merged with an ancestor `<fieldset disabled>`. */
+        this.disabled = false;
+        /** Form field name. */
+        this.name = "";
+        this._formDisabled = false;
+        this.#internals = this.attachInternals();
+        this.#defaultValue = 0;
+    }
+    static { this.formAssociated = true; }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+      }
+      input[type="range"] {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 2rem;
+        margin: 0;
+        background: transparent;
+        cursor: pointer;
+      }
+      input[type="range"]:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+      /* Track */
+      input[type="range"]::-webkit-slider-runnable-track {
+        height: 0.375rem;
+        border-radius: 9999px;
+        background: linear-gradient(
+          to right,
+          var(--ui-primary, #4f46e5) 0%,
+          var(--ui-primary, #4f46e5) var(--range-percent, 0%),
+          var(--ui-surface-muted, #f8fafc) var(--range-percent, 0%),
+          var(--ui-surface-muted, #f8fafc) 100%
+        );
+      }
+      input[type="range"]::-moz-range-track {
+        height: 0.375rem;
+        border-radius: 9999px;
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      input[type="range"]::-moz-range-progress {
+        height: 0.375rem;
+        border-radius: 9999px;
+        background: var(--ui-primary, #4f46e5);
+      }
+      /* Thumb */
+      input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 1rem;
+        height: 1rem;
+        /* WebKit centers the thumb on the input's full 2rem box, not the
+           thinner custom track — nudge it up to align with the track.
+           A transform offset (not margin) so it isn't a spacing-grid value. */
+        transform: translateY(-0.3125rem);
+        border-radius: 50%;
+        background: var(--ui-primary, #4f46e5);
+        border: 2px solid var(--ui-surface, #ffffff);
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
+      }
+      input[type="range"]::-moz-range-thumb {
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        background: var(--ui-primary, #4f46e5);
+        border: 2px solid var(--ui-surface, #ffffff);
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
+      }
+      input[type="range"]:disabled::-webkit-slider-thumb {
+        background: var(--ui-text-muted, #64748b);
+      }
+      input[type="range"]:disabled::-moz-range-thumb {
+        background: var(--ui-text-muted, #64748b);
+      }
+      input[type="range"]:focus-visible {
+        outline: none;
+      }
+      input[type="range"]:focus-visible::-webkit-slider-thumb {
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      input[type="range"]:focus-visible::-moz-range-thumb {
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        input[type="range"]::-webkit-slider-thumb {
+          transition: box-shadow 120ms ease;
+        }
+        input[type="range"]::-moz-range-thumb {
+          transition: box-shadow 120ms ease;
+        }
+      }
+      @media (forced-colors: active) {
+        input[type="range"]::-webkit-slider-runnable-track {
+          background: Canvas;
+          border: 1px solid CanvasText;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+          background: Highlight;
+          border-color: Canvas;
+        }
+        input[type="range"]:focus-visible::-webkit-slider-thumb {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+      }
+    `,
+    ]; }
+    #internals;
+    #defaultValue;
+    /** Whether the host or an ancestor fieldset currently disables the control. */
+    get #isDisabled() {
+        return this.disabled || this._formDisabled;
+    }
+    get #percent() {
+        const range = this.max - this.min || 1;
+        return ((this.value - this.min) / range) * 100;
+    }
+    willUpdate(changed) {
+        if (!this.hasUpdated)
+            this.#defaultValue = this.value;
+        if (changed.has("value"))
+            this.#internals.setFormValue(String(this.value));
+    }
+    /** Resets to the value present at first render, per the form contract. */
+    formResetCallback() {
+        this.value = this.#defaultValue;
+    }
+    /** Mirrors an ancestor fieldset's disabled state. */
+    formDisabledCallback(disabled) {
+        this._formDisabled = disabled;
+    }
+    /** Restores the value from saved form state (bfcache/autofill). */
+    formStateRestoreCallback(state) {
+        if (typeof state !== "string")
+            return;
+        const parsed = Number(state);
+        if (!Number.isNaN(parsed))
+            this.value = parsed;
+    }
+    // The native input's own "input"/"change" events are composed (cross the
+    // shadow boundary) — stop them so only our re-dispatched CustomEvent
+    // (carrying `detail.value`) reaches consumers, matching text-area.ts's fix
+    // for the same issue. Otherwise the native event bubbles out afterwards
+    // too, re-invoking the same listener with a plain Event whose `detail` is
+    // undefined, crashing consumer code that reads `e.detail.value`.
+    #onInput(e) {
+        e.stopPropagation();
+        const input = e.target;
+        this.value = Number(input.value);
+        this.dispatchEvent(new CustomEvent("input", { detail: { value: this.value }, bubbles: true, composed: true }));
+    }
+    #onChange(e) {
+        e.stopPropagation();
+        const input = e.target;
+        this.value = Number(input.value);
+        this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value }, bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <input
+        type="range"
+        style=${`--range-percent: ${this.#percent}%`}
+        min=${this.min}
+        max=${this.max}
+        step=${this.step}
+        .value=${String(this.value)}
+        ?disabled=${this.#isDisabled}
+        @input=${(e) => this.#onInput(e)}
+        @change=${(e) => this.#onChange(e)}
+      />
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], RangeSlider.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], RangeSlider.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], RangeSlider.prototype, "step", void 0);
+__decorate([
+    property({ type: Number })
+], RangeSlider.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], RangeSlider.prototype, "disabled", void 0);
+__decorate([
+    property()
+], RangeSlider.prototype, "name", void 0);
+__decorate([
+    state()
+], RangeSlider.prototype, "_formDisabled", void 0);
+RangeSlider = __decorate([
+    customElement("range-slider")
+], RangeSlider);
+export { RangeSlider };
+//# sourceMappingURL=range-slider.js.map

package/dist/range-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../src/range-slider.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 { tokens } from \"./tokens.js\";\n\n/**\n * A form-associated numeric range slider, usable standalone or inside a\n * native `<form>`. Wraps a native `<input type=\"range\">` (kept for its free\n * keyboard, drag, and screen-reader support) restyled to match this\n * package's track/fill visual language (`stat-meter`, `percent-bar-chart`)\n * instead of the browser-default appearance. Purely a value control — no\n * built-in label; wrap in `form-field` for a labeled field, or render a\n * value readout next to it (see the playground example), matching\n * `autocomplete-input`/`form-select`.\n *\n * @element range-slider\n * @fires input - Fires continuously while dragging/typing; detail: `{ value }`.\n * @fires change - Fires once the value is committed (drag released, arrow\n *   key released); detail: `{ value }`.\n */\n@customElement(\"range-slider\")\nexport class RangeSlider extends LitElement {\n  static formAssociated = true;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      input[type=\"range\"] {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 100%;\n        height: 2rem;\n        margin: 0;\n        background: transparent;\n        cursor: pointer;\n      }\n      input[type=\"range\"]:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      /* Track */\n      input[type=\"range\"]::-webkit-slider-runnable-track {\n        height: 0.375rem;\n        border-radius: 9999px;\n        background: linear-gradient(\n          to right,\n          var(--ui-primary, #4f46e5) 0%,\n          var(--ui-primary, #4f46e5) var(--range-percent, 0%),\n          var(--ui-surface-muted, #f8fafc) var(--range-percent, 0%),\n          var(--ui-surface-muted, #f8fafc) 100%\n        );\n      }\n      input[type=\"range\"]::-moz-range-track {\n        height: 0.375rem;\n        border-radius: 9999px;\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      input[type=\"range\"]::-moz-range-progress {\n        height: 0.375rem;\n        border-radius: 9999px;\n        background: var(--ui-primary, #4f46e5);\n      }\n      /* Thumb */\n      input[type=\"range\"]::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 1rem;\n        height: 1rem;\n        /* WebKit centers the thumb on the input's full 2rem box, not the\n           thinner custom track — nudge it up to align with the track.\n           A transform offset (not margin) so it isn't a spacing-grid value. */\n        transform: translateY(-0.3125rem);\n        border-radius: 50%;\n        background: var(--ui-primary, #4f46e5);\n        border: 2px solid var(--ui-surface, #ffffff);\n        box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);\n      }\n      input[type=\"range\"]::-moz-range-thumb {\n        width: 1rem;\n        height: 1rem;\n        border-radius: 50%;\n        background: var(--ui-primary, #4f46e5);\n        border: 2px solid var(--ui-surface, #ffffff);\n        box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);\n      }\n      input[type=\"range\"]:disabled::-webkit-slider-thumb {\n        background: var(--ui-text-muted, #64748b);\n      }\n      input[type=\"range\"]:disabled::-moz-range-thumb {\n        background: var(--ui-text-muted, #64748b);\n      }\n      input[type=\"range\"]:focus-visible {\n        outline: none;\n      }\n      input[type=\"range\"]:focus-visible::-webkit-slider-thumb {\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      input[type=\"range\"]:focus-visible::-moz-range-thumb {\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      @media (prefers-reduced-motion: no-preference) {\n        input[type=\"range\"]::-webkit-slider-thumb {\n          transition: box-shadow 120ms ease;\n        }\n        input[type=\"range\"]::-moz-range-thumb {\n          transition: box-shadow 120ms ease;\n        }\n      }\n      @media (forced-colors: active) {\n        input[type=\"range\"]::-webkit-slider-runnable-track {\n          background: Canvas;\n          border: 1px solid CanvasText;\n        }\n        input[type=\"range\"]::-webkit-slider-thumb {\n          background: Highlight;\n          border-color: Canvas;\n        }\n        input[type=\"range\"]:focus-visible::-webkit-slider-thumb {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Minimum value. */\n  @property({ type: Number }) min = 0;\n  /** Maximum value. */\n  @property({ type: Number }) max = 100;\n  /** Step increment. */\n  @property({ type: Number }) step = 1;\n  /** Current value. */\n  @property({ type: Number }) value = 0;\n  /** Disables interaction; merged with an ancestor `<fieldset disabled>`. */\n  @property({ type: Boolean }) disabled = false;\n  /** Form field name. */\n  @property() name = \"\";\n\n  @state() private _formDisabled = false;\n\n  #internals = this.attachInternals();\n  #defaultValue = 0;\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  get #percent(): number {\n    const range = this.max - this.min || 1;\n    return ((this.value - this.min) / range) * 100;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    if (!this.hasUpdated) this.#defaultValue = this.value;\n    if (changed.has(\"value\")) this.#internals.setFormValue(String(this.value));\n  }\n\n  /** Resets to the value present at first render, per the form contract. */\n  formResetCallback(): void {\n    this.value = this.#defaultValue;\n  }\n\n  /** Mirrors an ancestor fieldset's disabled state. */\n  formDisabledCallback(disabled: boolean): void {\n    this._formDisabled = disabled;\n  }\n\n  /** Restores the value from saved form state (bfcache/autofill). */\n  formStateRestoreCallback(state: string | File | FormData | null): void {\n    if (typeof state !== \"string\") return;\n    const parsed = Number(state);\n    if (!Number.isNaN(parsed)) this.value = parsed;\n  }\n\n  // The native input's own \"input\"/\"change\" events are composed (cross the\n  // shadow boundary) — stop them so only our re-dispatched CustomEvent\n  // (carrying `detail.value`) reaches consumers, matching text-area.ts's fix\n  // for the same issue. Otherwise the native event bubbles out afterwards\n  // too, re-invoking the same listener with a plain Event whose `detail` is\n  // undefined, crashing consumer code that reads `e.detail.value`.\n  #onInput(e: Event): void {\n    e.stopPropagation();\n    const input = e.target as HTMLInputElement;\n    this.value = Number(input.value);\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: { value: this.value }, bubbles: true, composed: true }));\n  }\n\n  #onChange(e: Event): void {\n    e.stopPropagation();\n    const input = e.target as HTMLInputElement;\n    this.value = Number(input.value);\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: { value: this.value }, bubbles: true, composed: true }));\n  }\n\n  override render() {\n    return html`\n      <input\n        type=\"range\"\n        style=${`--range-percent: ${this.#percent}%`}\n        min=${this.min}\n        max=${this.max}\n        step=${this.step}\n        .value=${String(this.value)}\n        ?disabled=${this.#isDisabled}\n        @input=${(e: Event) => this.#onInput(e)}\n        @change=${(e: Event) => this.#onChange(e)}\n      />\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"range-slider\": RangeSlider;\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"}