@f-ewald/components 1.16.0 → 1.17.0

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/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
 

package/llms.txt

@@ -1082,6 +1082,44 @@ Example:
 <map-pin color="#22c55e" size="26" highlighted>🏠</map-pin>
 ```
 
+## <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.
+
+Import: `import "@f-ewald/components/mapbox-map.js";`
+
+Properties: `accessToken` (attribute `access-token`) : string, default ""; `styleUrl` (attribute `style-url`) : string, default ""; `center` (JS property only) : [number, number], default [0, 0]; `zoom` (attribute `zoom`) : number, default 0
+Events: `map-style-reloaded`, `map-ready`
+CSS custom properties: none
+
+Example:
+```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>
+```
+
 ## <markdown-view>
 
 Renders a markdown string as sanitized, styled HTML — headings, lists,
@@ -1418,6 +1456,33 @@ Example:
 </script>
 ```
 
+## <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`.
+
+Import: `import "@f-ewald/components/range-slider.js";`
+
+Properties: `min` (attribute `min`) : number, default 0; `max` (attribute `max`) : number, default 100; `step` (attribute `step`) : number, default 1; `value` (attribute `value`) : number, default 0; `disabled` (attribute `disabled`) : boolean, default false; `name` (attribute `name`) : string, default ""
+Events: `input`, `change`
+CSS custom properties: `--ui-focus-ring`, `--ui-primary`, `--ui-surface`, `--ui-surface-muted`, `--ui-text-muted`
+
+Example:
+```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>
+```
+
 ## <relative-time>
 
 Inline relative-time display (e.g. "3 hours ago"). Accepts either a
@@ -1828,11 +1893,15 @@ 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.
 
 Import: `import "@f-ewald/components/ui-checkbox.js";`
 
-Properties: `checked` (attribute `checked`) : boolean, default false; `indeterminate` (attribute `indeterminate`) : boolean, default false; `disabled` (attribute `disabled`) : boolean, default false; `required` (attribute `required`) : boolean, default false; `name` (attribute `name`) : string, default ""; `label` (attribute `label`) : string, default ""
+Properties: `checked` (attribute `checked`) : boolean, default false; `indeterminate` (attribute `indeterminate`) : boolean, default false; `disabled` (attribute `disabled`) : boolean, default false; `required` (attribute `required`) : boolean, default false; `name` (attribute `name`) : string, default ""; `label` (attribute `label`) : string, default ""; `icon` (JS property only) : TemplateResult | null, default null; `iconSize` (attribute `iconSize`) : number, default 14
 Events: `change`
 CSS custom properties: `--ui-danger`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-line-height-tight`, `--ui-primary`, `--ui-radius-sm`, `--ui-text`
 
@@ -1840,6 +1909,8 @@ Example:
 ```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>
 ```
 
 ## <user-avatar>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@f-ewald/components",
   "private": false,
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "A collection of universally usable web components for various tasks.",
   "type": "module",
   "main": "dist/index.js",
@@ -65,6 +65,7 @@
     "d3-shape": "^3.2.0",
     "dompurify": "^3.4.12",
     "lit": "^3.3.3",
+    "mapbox-gl": "^3.9.0",
     "marked": "^18.0.7",
     "zod": "^4.4.3"
   },
@@ -79,6 +80,7 @@
     "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
+    "@types/mapbox-gl": "^3.4.1",
     "@types/node": "^26.1.1",
     "heroicons": "^2.2.0",
     "tailwindcss": "^4.3.3",