@f-ewald/components 0.7.0 → 1.0.2

package/llms.txt

@@ -33,9 +33,9 @@ Supports two suggestion sources:
 
 Import: `import "@f-ewald/components/address-autocomplete.js";`
 
-Properties: `value` (attribute `value`) : string, default ""; `placeholder` (attribute `placeholder`) : string, default ""; `required` (attribute `required`) : boolean, default false; `types` (attribute `types`) : string, default "address"; `endpoint` (attribute `endpoint`) : string, default "https://api.mapbox.com/search/geocode/v6/forward"; `accessToken` (attribute `access-token`) : string, default ""; `bbox` (attribute `bbox`) : string, default ""; `proximity` (attribute `proximity`) : string, default ""; `debounce` (attribute `debounce`) : number, default 300; `minLength` (attribute `min-length`) : number, default 3; `suggestions` (JS property only) : AddressSuggestion[] | null, default null; `selectedSuggestion` (JS property only) : AddressSuggestion | null, default —
+Properties: `value` (attribute `value`) : string, default ""; `placeholder` (attribute `placeholder`) : string, default ""; `required` (attribute `required`) : boolean, default false; `disabled` (attribute `disabled`) : boolean, default false; `types` (attribute `types`) : string, default "address"; `endpoint` (attribute `endpoint`) : string, default "https://api.mapbox.com/search/geocode/v6/forward"; `accessToken` (attribute `access-token`) : string, default ""; `bbox` (attribute `bbox`) : string, default ""; `proximity` (attribute `proximity`) : string, default ""; `debounce` (attribute `debounce`) : number, default 300; `minLength` (attribute `min-length`) : number, default 3; `suggestions` (JS property only) : AddressSuggestion[] | null, default null; `selectedSuggestion` (JS property only) : AddressSuggestion | null, default —
 Events: `address-select`
-CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size-sm`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
@@ -83,9 +83,9 @@ Supports two suggestion sources:
 
 Import: `import "@f-ewald/components/autocomplete-input.js";`
 
-Properties: `value` (attribute `value`) : string, default ""; `placeholder` (attribute `placeholder`) : string, default ""; `required` (attribute `required`) : boolean, default false; `endpoint` (attribute `endpoint`) : string, default ""; `queryParam` (attribute `query-param`) : string, default "q"; `debounce` (attribute `debounce`) : number, default 300; `minLength` (attribute `min-length`) : number, default 3; `options` (JS property only) : AutocompleteOption[] | null, default null; `selectedOption` (JS property only) : AutocompleteOption | null, default —
+Properties: `value` (attribute `value`) : string, default ""; `placeholder` (attribute `placeholder`) : string, default ""; `required` (attribute `required`) : boolean, default false; `disabled` (attribute `disabled`) : boolean, default false; `endpoint` (attribute `endpoint`) : string, default ""; `queryParam` (attribute `query-param`) : string, default "q"; `debounce` (attribute `debounce`) : number, default 300; `minLength` (attribute `min-length`) : number, default 3; `options` (JS property only) : AutocompleteOption[] | null, default null; `selectedOption` (JS property only) : AutocompleteOption | null, default —
 Events: `option-select`
-CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size-sm`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
@@ -104,6 +104,104 @@ Example:
 </script>
 ```
 
+## <calendar-entry>
+
+Declarative metadata for one calendar event, consumed by a parent
+`calendar-month` or `calendar-year`. Read-only/non-interactive; renders
+nothing itself.
+
+Import: `import "@f-ewald/components/calendar-entry.js";`
+
+Properties: `start` (attribute `start`) : string, default ""; `end` (attribute `end`) : string, default ""; `label` (attribute `label`) : string, default ""; `color` (attribute `color`) : StatusPillColor, default "neutral"; `href` (attribute `href`) : string | undefined, default —
+Events: none
+CSS custom properties: none
+
+Example:
+```html
+<calendar-entry
+  start="2026-07-10"
+  end="2026-07-18"
+  label="Vacation"
+  color="success"
+>
+  <span slot="title">Vacation</span>
+  <span slot="detail">Out of office</span>
+  <span slot="detail">Road trip along the California coast with several scenic stops</span>
+  <span slot="footer">Return July 19 at 6 PM</span>
+</calendar-entry>
+```
+
+## <calendar-month>
+
+One month rendered as a top-to-bottom list of days — weekends and today
+highlighted, with declarative `calendar-entry` children shown as colored
+bars spanning the days they cover. An entry's title uses its first visible
+day; every remaining visible day becomes one shared body for wrapped
+details and an optional ending footer. Overlapping entries stack into
+side-by-side lanes rather than being layered/hidden. Read-only.
+
+Lanes are computed independently per instance, from only the entries
+overlapping this month — an entry spanning a month boundary may therefore
+land in a different lane index in the adjacent month's `calendar-month`.
+This is an accepted v1 limitation: cross-month lane continuity would
+require a shared parent (`calendar-year`) to assign lanes globally.
+
+Entry attributes and slotted title/detail text are observed, so a
+standalone month re-renders when consumers update declarative metadata.
+
+Import: `import "@f-ewald/components/calendar-month.js";`
+
+Properties: `year` (attribute `year`) : number, default —; `month` (attribute `month`) : number, default 1
+Events: none
+CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-font-size-xs`, `--ui-hover-overlay`, `--ui-info`, `--ui-primary`, `--ui-radius-sm`, `--ui-success`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`, `--ui-warning`
+
+Example:
+```html
+<calendar-month year="2026" month="7">
+  <calendar-entry start="2026-07-10" end="2026-07-18" label="Vacation" color="success">
+    <span slot="title">Vacation</span>
+    <span slot="detail">Out of office</span>
+    <span slot="detail">Road trip along the California coast with several scenic stops</span>
+    <span slot="footer">Return July 19 at 6 PM</span>
+  </calendar-entry>
+  <calendar-entry start="2026-07-15" end="2026-07-20" label="Conference" color="warning" href="#conf">
+    <span slot="detail">Talks and workshops</span>
+    <span slot="footer">Closing keynote · July 20</span>
+  </calendar-entry>
+</calendar-month>
+```
+
+## <calendar-year>
+
+A full year of `calendar-month` blocks, generated from declarative
+`calendar-entry` children. Each entry is re-projected into the
+`calendar-month` blocks it overlaps as a freshly-created `calendar-entry`
+element — the original elements stay slotted here and are never moved,
+since a DOM node can only have one parent. Read-only.
+
+Import: `import "@f-ewald/components/calendar-year.js";`
+
+Properties: `year` (attribute `year`) : number, default —
+Events: none
+CSS custom properties: `--ui-font`
+
+Example:
+```html
+<calendar-year year="2026">
+  <calendar-entry start="2026-01-28" end="2026-02-03" label="Offsite" color="primary" href="#offsite">
+    <span slot="detail">New York</span>
+    <span slot="detail">Team workshops</span>
+    <span slot="footer">Closing dinner Friday</span>
+  </calendar-entry>
+  <calendar-entry start="2026-03-05" end="2026-03-18" label="Product launch" color="success" href="#launch">
+    <span slot="detail">Coordinate the release across engineering, design, support, and marketing.</span>
+    <span slot="detail">Monitor adoption and production health throughout the rollout.</span>
+    <span slot="footer">Public launch · March 18 at 9 AM</span>
+  </calendar-entry>
+  <calendar-entry start="2026-07-10" end="2026-07-18" label="Vacation" color="success"></calendar-entry>
+</calendar-year>
+```
+
 ## <chat-message>
 
 One conversation entry in a chat-style activity feed. Tool calls and
@@ -115,7 +213,7 @@ Import: `import "@f-ewald/components/chat-message.js";`
 
 Properties: `role` (attribute `role`) : ChatMessageRole, default "agent"; `variant` (attribute `variant`) : ChatMessageVariant, default "normal"; `author` (attribute `author`) : string, default ""; `timestamp` (attribute `timestamp`) : string | null, default null; `summary` (attribute `summary`) : string, default ""; `collapsible` (attribute `collapsible`) : boolean, default false; `collapsed` (attribute `collapsed`) : boolean, default false
 Events: `toggle`
-CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size`, `--ui-primary`, `--ui-radius`, `--ui-surface`, `--ui-text`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-mono`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius`, `--ui-radius-sm`, `--ui-surface`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
@@ -140,7 +238,7 @@ Import: `import "@f-ewald/components/confirm-dialog.js";`
 
 Properties: `open` (attribute `open`) : boolean, default false; `confirmLabel` (attribute `confirm-label`) : string, default "Delete"; `cancelLabel` (attribute `cancel-label`) : string, default "Cancel"; `danger` (attribute `danger`) : boolean, default true; `busy` (attribute `busy`) : boolean, default false; `error` (attribute `error`) : string | null, default null
 Events: `confirm`, `cancel`
-CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-danger-hover`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-overlay`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-text`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-danger-hover`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-on-accent`, `--ui-overlay`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
@@ -159,9 +257,9 @@ without a toast element can react. Defaults to the current page URL if
 
 Import: `import "@f-ewald/components/copy-link-button.js";`
 
-Properties: `value` (attribute `value`) : string, default ""; `label` (attribute `label`) : string, default "Copy link"
+Properties: `value` (attribute `value`) : string, default ""; `label` (attribute `label`) : string, default "Copy link"; `disabled` (attribute `disabled`) : boolean, default false
 Events: `copy-success`, `copy-error`
-CSS custom properties: `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+CSS custom properties: `--ui-focus-ring`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
@@ -181,9 +279,9 @@ cell's rendered content might contain.
 
 Import: `import "@f-ewald/components/data-table.js";`
 
-Properties: `columns` (JS property only) : DataTableColumn[], default []; `rows` (JS property only) : unknown[], default []; `rowKey` (JS property only) : (row: unknown, index: number) => string | number, default —; `renderCell` (JS property only) : (row: unknown, key: string) => unknown, default —; `rowHref` (JS property only) : ((row: unknown) => string | null) | null, default null
+Properties: `columns` (JS property only) : DataTableColumn[], default []; `rows` (JS property only) : unknown[], default []; `rowKey` (JS property only) : (row: unknown, index: number) => string | number, default —; `renderCell` (JS property only) : (row: unknown, key: string) => unknown, default —; `rowHref` (JS property only) : ((row: unknown) => string | null) | null, default null; `rowLabel` (JS property only) : ((row: unknown) => string) | null, default null
 Events: none
-CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
@@ -236,7 +334,7 @@ Import: `import "@f-ewald/components/distribution-chart.js";`
 
 Properties: `metric` (attribute `metric`) : string, default ""; `values` (JS property only) : DistributionValue[], default []; `markerColors` (JS property only) : string[], default ["#4f46e5", "#d97706", "#0d9488", "#e11d48"]; `fontSize` (attribute `font-size`) : number, default 11
 Events: none
-CSS custom properties: `--ui-danger`, `--ui-font-size-sm`, `--ui-radius-sm`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text-muted`
 
 Example:
 ```html
@@ -257,7 +355,7 @@ Import: `import "@f-ewald/components/dropdown-button.js";`
 
 Properties: `label` (attribute `label`) : string, default ""; `options` (JS property only) : DropdownOption[], default []; `disabled` (attribute `disabled`) : boolean, default false
 Events: `select`
-CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-on-accent`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`
 
 Example:
 ```html
@@ -306,21 +404,32 @@ pushes the chevron to the far edge), but the host itself stays
 bar, a status picker) keep shrink-to-fit auto-width unchanged. To make an
 instance full-width, size the host itself: `form-select { width: 100%; }`.
 
+Set `searchable` to replace the button trigger with an editable combobox
+that filters the predefined options by case-insensitive label infix. Typed
+text is only a query: `value` changes exclusively when an actual option is
+selected, and an uncommitted query is discarded when the list closes.
+Each option may also provide a pre-rendered `icon` and square `iconSize`;
+iconless options reserve no leading space.
+
 Import: `import "@f-ewald/components/form-select.js";`
 
-Properties: `options` (JS property only) : SelectOption[], default []; `value` (attribute `value`) : string, default ""; `label` (attribute `label`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false
+Properties: `options` (JS property only) : SelectOption[], default []; `value` (attribute `value`) : string, default ""; `label` (attribute `label`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false; `searchable` (attribute `searchable`) : boolean, default false
 Events: `change`
 CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
-<form-select label="Task state"></form-select>
+<form-select label="Task state" searchable></form-select>
 <script type="module">
+  import { iconArrowPath, iconCheckCircle, iconListBullet } from "@f-ewald/components/icons.js";
+
   const select = document.querySelector("form-select");
   select.options = [
+    { value: "backlog", label: "Backlog", icon: iconListBullet(14), iconSize: 14 },
     { value: "open", label: "Open" },
-    { value: "in_progress", label: "In progress" },
-    { value: "done", label: "Done" },
+    { value: "in_progress", label: "In progress", icon: iconArrowPath(16), iconSize: 16 },
+    { value: "review", label: "Needs review" },
+    { value: "done", label: "Done", icon: iconCheckCircle(16), iconSize: 16 },
   ];
   select.value = "open";
   select.addEventListener("change", (e) => console.log(e.detail.value));
@@ -338,7 +447,7 @@ Import: `import "@f-ewald/components/frame-box.js";`
 
 Properties: `label` (attribute `label`) : string, default ""
 Events: none
-CSS custom properties: `--ui-border`, `--ui-radius-sm`, `--ui-surface`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size-xs`, `--ui-radius-sm`, `--ui-surface`, `--ui-text-muted`
 
 Example:
 ```html
@@ -413,6 +522,25 @@ Example:
 </script>
 ```
 
+## <kbd-hint>
+
+Renders a keyboard shortcut as one boxed keycap per `+`-separated token.
+Modifier keys are platform-aware: `Mod` becomes Command on macOS and
+Control elsewhere. Keycaps derive their presentation from `currentColor`,
+so the hint works inside neutral and accent-colored controls.
+
+Import: `import "@f-ewald/components/kbd-hint.js";`
+
+Properties: `keys` (attribute `keys`) : string, default ""; `platform` (attribute `platform`) : KbdPlatform, default "auto"
+Events: none
+CSS custom properties: `--ui-font-mono`, `--ui-font-size-xs`, `--ui-radius-sm`
+
+Example:
+```html
+<kbd-hint keys="Mod+K"></kbd-hint>
+<kbd-hint keys="Mod+Shift+Enter" platform="mac"></kbd-hint>
+```
+
 ## <live-timer>
 
 Per-second ticking count-up timer, e.g. a live "running for 12s" or
@@ -438,6 +566,9 @@ outer ring, no point/tail (unlike `<map-pin>`) — for markers that don't
 need to visually "point" at their exact coordinate. Purely a visual
 primitive — it has no `mapbox-gl` (or any mapping library) dependency;
 the consumer positions it, e.g. via `new mapboxgl.Marker({ element: el })`.
+It can also replace the former `<map-point>` dense-layer primitive: use
+`size="14" ring-width="3"`, leave the slot empty, and rasterize one marker
+per color for use as a map `icon-image`.
 
 Import: `import "@f-ewald/components/map-circle.js";`
 
@@ -448,6 +579,7 @@ CSS custom properties: `--ui-font`
 Example:
 ```html
 <map-circle color="#6b7280"></map-circle>
+<map-circle color="#0099D8" size="14" ring-width="3"></map-circle>
 <map-circle color="#1a73e8" size="24" ring-width="5" highlighted>1</map-circle>
 ```
 
@@ -470,30 +602,6 @@ Example:
 <map-pin color="#22c55e" size="26" highlighted>🏠</map-pin>
 ```
 
-## <map-point>
-
-A small plain-colored map marker for dense point layers (transit stops,
-amenities, hazard points, etc.): a light-to-dark gradient fill with a thin
-white ring, no badge/content slot — every instance on a given layer shares
-the same look, so there's nothing to render per-feature (unlike
-`<map-pin>`/`<map-circle>`, which carry per-marker slotted content).
-Purely a visual primitive — it has no `mapbox-gl` (or any mapping library)
-dependency; typically rasterized once per color and used as a Mapbox
-`icon-image` on a `symbol` layer rather than mounted as individual DOM
-markers, so a whole layer's worth of points shares one icon image.
-
-Import: `import "@f-ewald/components/map-point.js";`
-
-Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 14; `ringWidth` (attribute `ring-width`) : number, default 3
-Events: none
-CSS custom properties: none
-
-Example:
-```html
-<map-point color="#0099D8"></map-point>
-<map-point color="#fb8072" size="10" ring-width="2"></map-point>
-```
-
 ## <percent-bar-chart>
 
 Horizontal bar chart for labeled percentage rows, using D3's linear scale.
@@ -503,7 +611,7 @@ Import: `import "@f-ewald/components/percent-bar-chart.js";`
 
 Properties: `groups` (JS property only) : PercentBarGroup[], default []
 Events: none
-CSS custom properties: none
+CSS custom properties: `--ui-font`, `--ui-text-muted`
 
 Example:
 ```html
@@ -525,7 +633,7 @@ Import: `import "@f-ewald/components/photo-gallery.js";`
 
 Properties: `currentIndex` (attribute `current-index`) : number, default 0; `delay` (attribute `delay`) : number, default 0; `showControls` (attribute `show-controls`) : boolean, default true; `showCounter` (attribute `show-counter`) : boolean, default false; `showIndicators` (attribute `show-indicators`) : boolean, default false; `showAutoplayControl` (attribute `show-autoplay-control`) : boolean, default true; `paused` (attribute `paused`) : boolean, default false; `aspectRatio` (attribute `aspect-ratio`) : string, default "16 / 9"; `objectFit` (attribute `object-fit`) : PhotoGalleryObjectFit, default "cover"
 Events: `slide-change`
-CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-overlay`, `--ui-primary`, `--ui-radius`, `--ui-radius-sm`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-on-accent`, `--ui-overlay`, `--ui-primary`, `--ui-radius`, `--ui-radius-sm`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
@@ -565,7 +673,7 @@ Import: `import "@f-ewald/components/popover-panel.js";`
 
 Properties: `open` (attribute `open`) : boolean, default false; `heading` (attribute `heading`) : string, default ""; `centered` (attribute `centered`) : boolean, default false
 Events: `panel-close`
-CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-overlay`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
@@ -593,7 +701,7 @@ Import: `import "@f-ewald/components/price-history-chart.js";`
 
 Properties: `history` (attribute `history`) : PricePoint[], default []; `yLabels` (attribute `y-labels`) : "auto" | "always" | "never", default "auto"; `maxXLabels` (attribute `max-x-labels`) : number, default 3
 Events: none
-CSS custom properties: none
+CSS custom properties: `--ui-border`, `--ui-font`, `--ui-on-accent`, `--ui-primary`, `--ui-text-muted`, `--ui-tooltip`
 
 Example:
 ```html
@@ -616,9 +724,9 @@ keyboard/a11y and fires `change` rather than relying on form submission.
 
 Import: `import "@f-ewald/components/radio-cards.js";`
 
-Properties: `options` (JS property only) : RadioCardOption[], default []; `value` (attribute `value`) : string, default ""
+Properties: `options` (JS property only) : RadioCardOption[], default []; `value` (attribute `value`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false
 Events: `change`
-CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
@@ -644,9 +752,9 @@ relying on form submission.
 
 Import: `import "@f-ewald/components/radio-pills.js";`
 
-Properties: `options` (JS property only) : RadioPillOption[], default []; `value` (attribute `value`) : string, default ""
+Properties: `options` (JS property only) : RadioPillOption[], default []; `value` (attribute `value`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false
 Events: `change`
-CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-surface-muted`, `--ui-text`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-surface-muted`, `--ui-text`
 
 Example:
 ```html
@@ -687,9 +795,9 @@ Button that reveals hidden slotted content when clicked.
 
 Import: `import "@f-ewald/components/reveal-button.js";`
 
-Properties: `label` (attribute `label`) : string, default "Reveal hidden content"
+Properties: `label` (attribute `label`) : string, default "Reveal hidden content"; `disabled` (attribute `disabled`) : boolean, default false
 Events: none
-CSS custom properties: `--ui-font`, `--ui-font-size`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`
+CSS custom properties: `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-on-accent`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`
 
 Example:
 ```html
@@ -719,14 +827,14 @@ Generic sliding panel shell. Handles positioning, open/close animation,
 header chrome, and a close button. Body content is provided via the
 default slot; the consumer controls its own padding and overflow.
 
-Desktop: 300 px fixed right-side panel that slides from the right.
-Mobile (≤768px): bottom-sheet drawer (60vh) — reserved for future use.
+Desktop: fixed right-side panel that slides from the right.
+Mobile (≤48rem): bottom-sheet drawer (60vh) — reserved for future use.
 
 Import: `import "@f-ewald/components/slide-panel.js";`
 
 Properties: `open` (attribute `open`) : boolean, default false; `heading` (attribute `heading`) : string, default ""
 Events: `panel-close`
-CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
@@ -765,7 +873,7 @@ Import: `import "@f-ewald/components/status-pill.js";`
 
 Properties: `label` (attribute `label`) : string, default ""; `color` (attribute `color`) : StatusPillColor, default "neutral"; `spinner` (attribute `spinner`) : boolean, default false
 Events: none
-CSS custom properties: `--ui-danger`, `--ui-font`, `--ui-primary`, `--ui-success`, `--ui-text-muted`
+CSS custom properties: `--ui-danger`, `--ui-font`, `--ui-font-size-sm`, `--ui-info`, `--ui-primary`, `--ui-success`, `--ui-text-muted`, `--ui-warning`
 
 Example:
 ```html
@@ -784,15 +892,21 @@ Optional `itemHref` makes whole tiles clickable (navigating via
 `location.hash`), without hijacking clicks on nested interactive elements
 (links/buttons) a tile's rendered content might contain.
 
+Optional `fileIcon` prefixes each tile with a decorative Heroicons
+"document" glyph, for grids whose items represent files — the icon never
+carries its own accessible name since the rendered tile content (e.g. a
+filename) already identifies the item. Off by default, so it consumes no
+layout space or markup for grids of non-file items.
+
 Import: `import "@f-ewald/components/tile-grid.js";`
 
-Properties: `items` (JS property only) : unknown[], default []; `itemKey` (JS property only) : (item: unknown, index: number) => string | number, default —; `renderTile` (JS property only) : (item: unknown) => unknown, default —; `itemHref` (JS property only) : ((item: unknown) => string | null) | null, default null
+Properties: `items` (JS property only) : unknown[], default []; `itemKey` (JS property only) : (item: unknown, index: number) => string | number, default —; `renderTile` (JS property only) : (item: unknown) => unknown, default —; `itemHref` (JS property only) : ((item: unknown) => string | null) | null, default null; `fileIcon` (attribute `file-icon`) : boolean, default false
 Events: none
-CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size-sm`, `--ui-radius`, `--ui-surface-muted`, `--ui-text`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-radius`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
-<tile-grid></tile-grid>
+<tile-grid file-icon></tile-grid>
 <script type="module">
   const grid = document.querySelector("tile-grid");
   grid.items = [
@@ -818,7 +932,7 @@ Import: `import "@f-ewald/components/toast-notification.js";`
 
 Properties: none
 Events: none
-CSS custom properties: `--ui-danger`, `--ui-font`, `--ui-font-size`, `--ui-primary`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-success`, `--ui-text`
+CSS custom properties: `--ui-danger`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-hover-overlay`, `--ui-info`, `--ui-on-accent`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-success`, `--ui-text`
 
 Example:
 ```html
@@ -848,7 +962,7 @@ Import: `import "@f-ewald/components/ui-button.js";`
 
 Properties: `variant` (attribute `variant`) : ButtonVariant, default "primary"; `href` (attribute `href`) : string | null, default null; `type` (attribute `type`) : "button" | "submit" | "reset", default "button"; `disabled` (attribute `disabled`) : boolean, default false; `busy` (attribute `busy`) : boolean, default false
 Events: none
-CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-danger-hover`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-text`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-danger-hover`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-on-accent`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
@@ -872,7 +986,7 @@ Import: `import "@f-ewald/components/user-avatar.js";`
 
 Properties: `src` (attribute `src`) : string | null, default null; `name` (attribute `name`) : string | null, default null; `size` (attribute `size`) : string | number, default 32
 Events: none
-CSS custom properties: `--ui-font`, `--ui-primary`
+CSS custom properties: `--ui-font`, `--ui-on-accent`, `--ui-primary`
 
 Example:
 ```html

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@f-ewald/components",
   "private": false,
-  "version": "0.7.0",
+  "version": "1.0.2",
   "description": "A collection of universally usable web components for various tasks.",
   "type": "module",
   "main": "dist/index.js",
@@ -30,17 +30,25 @@
     "docs"
   ],
   "sideEffects": [
-    "./dist/**/*.js"
+    "./dist/**/*.js",
+    "./src/**/*.ts"
   ],
   "scripts": {
     "dev": "vite",
+    "typecheck": "tsc --noEmit",
     "build": "rm -rf dist && tsc && node scripts/generate-tokens-css.mjs && chmod +x dist/mcp-server.js",
     "build:demo": "vite build",
+    "build:site": "node scripts/generate-docs.mjs --site && vite build --base=./ --outDir=pages-dist/playground",
+    "preview:site": "vite preview --outDir=pages-dist",
     "analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
     "docs": "npm run analyze && node scripts/generate-docs.mjs",
     "icons": "node scripts/generate-icons.mjs",
     "mcp": "node dist/mcp-server.js",
     "test": "playwright test",
+    "test:design": "playwright test --config playwright.design.config.ts",
+    "test:visual": "playwright test --config playwright.visual.config.ts",
+    "test:visual:update": "playwright test --config playwright.visual.config.ts --update-snapshots",
+    "test:site": "playwright test --config playwright.site.config.ts",
     "prepublishOnly": "npm run build && npm run docs && npm run test"
   },
   "keywords": [
@@ -48,6 +56,10 @@
   ],
   "author": "Friedrich Ewald",
   "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/f-ewald/components.git"
+  },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",
     "d3-array": "^3.2.4",

package/dist/map-point.d.ts

@@ -1,31 +0,0 @@
-import { LitElement } from "lit";
-/**
- * A small plain-colored map marker for dense point layers (transit stops,
- * amenities, hazard points, etc.): a light-to-dark gradient fill with a thin
- * white ring, no badge/content slot — every instance on a given layer shares
- * the same look, so there's nothing to render per-feature (unlike
- * `<map-pin>`/`<map-circle>`, which carry per-marker slotted content).
- * Purely a visual primitive — it has no `mapbox-gl` (or any mapping library)
- * dependency; typically rasterized once per color and used as a Mapbox
- * `icon-image` on a `symbol` layer rather than mounted as individual DOM
- * markers, so a whole layer's worth of points shares one icon image.
- *
- * @element map-point
- */
-export declare class MapPoint extends LitElement {
-    static styles: import("lit").CSSResult[];
-    /** Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. */
-    color: string;
-    /** Diameter, in CSS pixels. */
-    size: number;
-    /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */
-    ringWidth: number;
-    private readonly _gradId;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "map-point": MapPoint;
-    }
-}
-//# sourceMappingURL=map-point.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"map-point.d.ts","sourceRoot":"","sources":["../src/map-point.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAWpB;IAEF,4FAA4F;IAChF,KAAK,SAAa;IAC9B,+BAA+B;IACH,IAAI,SAAM;IACtC,wFAAwF;IACnC,SAAS,SAAK;IAEnE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2C;IAE1D,MAAM,yCAoBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/map-point.js

@@ -1,83 +0,0 @@
-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";
-import { mixHex } from "./utils/color.js";
-let gradientIdCounter = 0;
-/**
- * A small plain-colored map marker for dense point layers (transit stops,
- * amenities, hazard points, etc.): a light-to-dark gradient fill with a thin
- * white ring, no badge/content slot — every instance on a given layer shares
- * the same look, so there's nothing to render per-feature (unlike
- * `<map-pin>`/`<map-circle>`, which carry per-marker slotted content).
- * Purely a visual primitive — it has no `mapbox-gl` (or any mapping library)
- * dependency; typically rasterized once per color and used as a Mapbox
- * `icon-image` on a `symbol` layer rather than mounted as individual DOM
- * markers, so a whole layer's worth of points shares one icon image.
- *
- * @element map-point
- */
-let MapPoint = class MapPoint extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. */
-        this.color = "#4f46e5";
-        /** Diameter, in CSS pixels. */
-        this.size = 14;
-        /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */
-        this.ringWidth = 3;
-        this._gradId = `map-point-grad-${gradientIdCounter++}`;
-    }
-    static { this.styles = [
-        tokens,
-        css `
-      :host {
-        display: inline-block;
-        line-height: 0;
-      }
-      svg {
-        display: block;
-      }
-    `,
-    ]; }
-    render() {
-        const light = mixHex(this.color, "#ffffff", 30);
-        const dark = mixHex(this.color, "#000000", 30);
-        return html `
-      <svg
-        width=${this.size}
-        height=${this.size}
-        viewBox="0 0 32 32"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <defs>
-          <linearGradient id=${this._gradId} x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stop-color=${light} />
-            <stop offset="100%" stop-color=${dark} />
-          </linearGradient>
-        </defs>
-        <circle cx="16" cy="16" r="13" fill="url(#${this._gradId})" stroke="#ffffff" stroke-width=${this.ringWidth} />
-      </svg>
-    `;
-    }
-};
-__decorate([
-    property()
-], MapPoint.prototype, "color", void 0);
-__decorate([
-    property({ type: Number })
-], MapPoint.prototype, "size", void 0);
-__decorate([
-    property({ type: Number, attribute: "ring-width" })
-], MapPoint.prototype, "ringWidth", void 0);
-MapPoint = __decorate([
-    customElement("map-point")
-], MapPoint);
-export { MapPoint };
-//# sourceMappingURL=map-point.js.map

package/dist/map-point.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"map-point.js","sourceRoot":"","sources":["../src/map-point.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;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAE1B;;;;;;;;;;;;GAYG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAcL,4FAA4F;QAChF,UAAK,GAAG,SAAS,CAAC;QAC9B,+BAA+B;QACH,SAAI,GAAG,EAAE,CAAC;QACtC,wFAAwF;QACnC,cAAS,GAAG,CAAC,CAAC;QAElD,YAAO,GAAG,kBAAkB,iBAAiB,EAAE,EAAE,CAAC;IAuBrE,CAAC;aA3CiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;KAQF;KACF,AAXqB,CAWpB;IAWO,MAAM;QACb,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAC/C,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;iBACR,IAAI,CAAC,IAAI;;;;;;+BAMK,IAAI,CAAC,OAAO;2CACA,KAAK;6CACH,IAAI;;;oDAGG,IAAI,CAAC,OAAO,oCAAoC,IAAI,CAAC,SAAS;;KAE7G,CAAC;IACJ,CAAC;CACF,CAAA;AA7Ba;IAAX,QAAQ,EAAE;uCAAmB;AAEF;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAW;AAEe;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CAAe;AAnBxD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA4CpB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\nimport { mixHex } from \"./utils/color.js\";\n\nlet gradientIdCounter = 0;\n\n/**\n * A small plain-colored map marker for dense point layers (transit stops,\n * amenities, hazard points, etc.): a light-to-dark gradient fill with a thin\n * white ring, no badge/content slot — every instance on a given layer shares\n * the same look, so there's nothing to render per-feature (unlike\n * `<map-pin>`/`<map-circle>`, which carry per-marker slotted content).\n * Purely a visual primitive — it has no `mapbox-gl` (or any mapping library)\n * dependency; typically rasterized once per color and used as a Mapbox\n * `icon-image` on a `symbol` layer rather than mounted as individual DOM\n * markers, so a whole layer's worth of points shares one icon image.\n *\n * @element map-point\n */\n@customElement(\"map-point\")\nexport class MapPoint extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        line-height: 0;\n      }\n      svg {\n        display: block;\n      }\n    `,\n  ];\n\n  /** Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. */\n  @property() color = \"#4f46e5\";\n  /** Diameter, in CSS pixels. */\n  @property({ type: Number }) size = 14;\n  /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */\n  @property({ type: Number, attribute: \"ring-width\" }) ringWidth = 3;\n\n  private readonly _gradId = `map-point-grad-${gradientIdCounter++}`;\n\n  override render() {\n    const light = mixHex(this.color, \"#ffffff\", 30);\n    const dark = mixHex(this.color, \"#000000\", 30);\n    return html`\n      <svg\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <defs>\n          <linearGradient id=${this._gradId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stop-color=${light} />\n            <stop offset=\"100%\" stop-color=${dark} />\n          </linearGradient>\n        </defs>\n        <circle cx=\"16\" cy=\"16\" r=\"13\" fill=\"url(#${this._gradId})\" stroke=\"#ffffff\" stroke-width=${this.ringWidth} />\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"map-point\": MapPoint;\n  }\n}\n"]}