@f-ewald/components 1.16.0 → 1.18.0

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
@@ -1552,6 +1617,33 @@ Example:
 </slide-panel>
 ```
 
+## <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`).
+
+Import: `import "@f-ewald/components/split-hero.js";`
+
+Properties: `src` (attribute `src`) : string, default ""; `alt` (attribute `alt`) : string, default ""
+Events: none
+CSS custom properties: `--ui-font`, `--ui-radius`, `--ui-shadow-lg`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`
+
+Example:
+```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>
+```
+
 ## <stat-meter>
 
 A compact labeled meter for a single percentage reading — e.g. CPU or
@@ -1828,11 +1920,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 +1936,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.18.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",