@f-ewald/components 1.0.0 → 1.0.3

package/dist/index.js

@@ -33,6 +33,7 @@ export { TileGrid } from "./tile-grid.js";
 export { PopoverPanel } from "./popover-panel.js";
 export { DropdownButton } from "./dropdown-button.js";
 export { IconButton } from "./icon-button.js";
+export { KbdHint } from "./kbd-hint.js";
 export { FrameBox } from "./frame-box.js";
 export { CalendarEntry } from "./calendar-entry.js";
 export { CalendarMonth } from "./calendar-month.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EACL,YAAY,GAIb,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GAEX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAmB,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAA0B,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,eAAe,EAAwB,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAsB,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EACL,mBAAmB,GAEpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,iBAAiB,GAElB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAsB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EACL,WAAW,GAGZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAqB,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAwB,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAuB,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAuB,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,cAAc,YAAY,CAAC","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.js\";\nexport { GalleryItem } from \"./gallery-item.js\";\nexport { GalleryItemVariant } from \"./gallery-item-variant.js\";\nexport {\n  PhotoGallery,\n  type PhotoGalleryChangeReason,\n  type PhotoGalleryObjectFit,\n  type PhotoGallerySlideChangeDetail,\n} from \"./photo-gallery.js\";\nexport { RevealButton } from \"./reveal-button.js\";\nexport { RomanNumeral } from \"./roman-numeral.js\";\nexport { ConfirmDialog } from \"./confirm-dialog.js\";\nexport {\n  ToastNotification,\n  notifySuccess,\n  notifyError,\n  notifyInfo,\n  type ToastVariant,\n} from \"./toast-notification.js\";\nexport { SlidePanel } from \"./slide-panel.js\";\nexport { CopyLinkButton } from \"./copy-link-button.js\";\nexport { RelativeTime } from \"./relative-time.js\";\nexport { DistanceValue } from \"./distance-value.js\";\nexport { PriceHistoryChart, type PricePoint } from \"./price-history-chart.js\";\nexport { DistributionChart, type DistributionValue } from \"./distribution-chart.js\";\nexport { PercentBarChart, type PercentBarGroup } from \"./percent-bar-chart.js\";\nexport { WeightBarChart, type WeightBarItem } from \"./weight-bar-chart.js\";\nexport {\n  AddressAutocomplete,\n  type AddressSuggestion,\n} from \"./address-autocomplete.js\";\nexport {\n  AutocompleteInput,\n  type AutocompleteOption,\n} from \"./autocomplete-input.js\";\nexport { UserAvatar } from \"./user-avatar.js\";\nexport { MapPin } from \"./map-pin.js\";\nexport { MapCircle } from \"./map-circle.js\";\nexport { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { StatMeter } from \"./stat-meter.js\";\nexport { StatusPill, type StatusPillColor } from \"./status-pill.js\";\nexport { EditableText } from \"./editable-text.js\";\nexport { LiveTimer } from \"./live-timer.js\";\nexport {\n  ChatMessage,\n  type ChatMessageRole,\n  type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { PopoverPanel } from \"./popover-panel.js\";\nexport { DropdownButton, type DropdownOption } from \"./dropdown-button.js\";\nexport { IconButton } from \"./icon-button.js\";\nexport { FrameBox } from \"./frame-box.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EACL,YAAY,GAIb,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GAEX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAmB,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAA0B,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,eAAe,EAAwB,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAsB,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EACL,mBAAmB,GAEpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,iBAAiB,GAElB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAsB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EACL,WAAW,GAGZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAqB,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAwB,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAuB,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAoB,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAuB,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,cAAc,YAAY,CAAC","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.js\";\nexport { GalleryItem } from \"./gallery-item.js\";\nexport { GalleryItemVariant } from \"./gallery-item-variant.js\";\nexport {\n  PhotoGallery,\n  type PhotoGalleryChangeReason,\n  type PhotoGalleryObjectFit,\n  type PhotoGallerySlideChangeDetail,\n} from \"./photo-gallery.js\";\nexport { RevealButton } from \"./reveal-button.js\";\nexport { RomanNumeral } from \"./roman-numeral.js\";\nexport { ConfirmDialog } from \"./confirm-dialog.js\";\nexport {\n  ToastNotification,\n  notifySuccess,\n  notifyError,\n  notifyInfo,\n  type ToastVariant,\n} from \"./toast-notification.js\";\nexport { SlidePanel } from \"./slide-panel.js\";\nexport { CopyLinkButton } from \"./copy-link-button.js\";\nexport { RelativeTime } from \"./relative-time.js\";\nexport { DistanceValue } from \"./distance-value.js\";\nexport { PriceHistoryChart, type PricePoint } from \"./price-history-chart.js\";\nexport { DistributionChart, type DistributionValue } from \"./distribution-chart.js\";\nexport { PercentBarChart, type PercentBarGroup } from \"./percent-bar-chart.js\";\nexport { WeightBarChart, type WeightBarItem } from \"./weight-bar-chart.js\";\nexport {\n  AddressAutocomplete,\n  type AddressSuggestion,\n} from \"./address-autocomplete.js\";\nexport {\n  AutocompleteInput,\n  type AutocompleteOption,\n} from \"./autocomplete-input.js\";\nexport { UserAvatar } from \"./user-avatar.js\";\nexport { MapPin } from \"./map-pin.js\";\nexport { MapCircle } from \"./map-circle.js\";\nexport { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { StatMeter } from \"./stat-meter.js\";\nexport { StatusPill, type StatusPillColor } from \"./status-pill.js\";\nexport { EditableText } from \"./editable-text.js\";\nexport { LiveTimer } from \"./live-timer.js\";\nexport {\n  ChatMessage,\n  type ChatMessageRole,\n  type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { PopoverPanel } from \"./popover-panel.js\";\nexport { DropdownButton, type DropdownOption } from \"./dropdown-button.js\";\nexport { IconButton } from \"./icon-button.js\";\nexport { KbdHint, type KbdPlatform } from \"./kbd-hint.js\";\nexport { FrameBox } from \"./frame-box.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}

package/dist/kbd-hint.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from "lit";
+/** Platform mode used to render modifier keys. */
+export type KbdPlatform = "auto" | "mac" | "other";
+/**
+ * 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.
+ *
+ * @element kbd-hint
+ */
+export declare class KbdHint extends LitElement {
+    /** Shortcut as case-insensitive, `+`-separated tokens, e.g. `"Mod+Enter"`. */
+    keys: string;
+    /** Platform override; `auto` detects macOS from the browser. */
+    platform: KbdPlatform;
+    static styles: import("lit").CSSResult[];
+    /** Whether modifier aliases should use macOS glyphs. */
+    private get isMac();
+    /** Parses the shortcut into visual/spoken key descriptors. */
+    private get parsedKeys();
+    /** Renders nothing for an empty shortcut, otherwise an accessible keycap group. */
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "kbd-hint": KbdHint;
+    }
+}
+//# sourceMappingURL=kbd-hint.d.ts.map

package/dist/kbd-hint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-hint.d.ts","sourceRoot":"","sources":["../src/kbd-hint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,kDAAkD;AAClD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;AA4FnD;;;;;;;GAOG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,8EAA8E;IAClE,IAAI,SAAM;IAEtB,gEAAgE;IACpD,QAAQ,EAAE,WAAW,CAAU;IAE3C,OAAgB,MAAM,4BAqCpB;IAEF,wDAAwD;IACxD,OAAO,KAAK,KAAK,GAIhB;IAED,8DAA8D;IAC9D,OAAO,KAAK,UAAU,GAOrB;IAED,mFAAmF;IAC1E,MAAM,yCASd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/kbd-hint.js

@@ -0,0 +1,184 @@
+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";
+/**
+ * Detects macOS via User-Agent Client Hints when available, with legacy
+ * navigator fields as fallbacks.
+ */
+function detectMac() {
+    if (typeof window === "undefined" ||
+        typeof document === "undefined" ||
+        typeof navigator === "undefined") {
+        return false;
+    }
+    const nav = navigator;
+    const source = nav.userAgentData?.platform || nav.platform || nav.userAgent || "";
+    return /mac/i.test(source);
+}
+/**
+ * Maps one case-insensitive shortcut token to its visual keycap and spoken
+ * name. Unknown tokens remain literal; single letters are uppercased.
+ */
+function keyLabel(raw, mac) {
+    switch (raw.trim().toLowerCase()) {
+        case "mod":
+            return mac ? { label: "⌘", name: "Command" } : { label: "Ctrl", name: "Control" };
+        case "cmd":
+        case "command":
+            return mac ? { label: "⌘", name: "Command" } : { label: "Cmd", name: "Command" };
+        case "meta":
+            return mac ? { label: "⌘", name: "Command" } : { label: "Meta", name: "Meta" };
+        case "super":
+            return mac ? { label: "⌘", name: "Command" } : { label: "Super", name: "Super" };
+        case "win":
+        case "windows":
+            return { label: "Win", name: "Windows" };
+        case "ctrl":
+        case "control":
+            return mac ? { label: "⌃", name: "Control" } : { label: "Ctrl", name: "Control" };
+        case "alt":
+        case "opt":
+        case "option":
+            return mac ? { label: "⌥", name: "Option" } : { label: "Alt", name: "Alt" };
+        case "shift":
+            return mac ? { label: "⇧", name: "Shift" } : { label: "Shift", name: "Shift" };
+        case "enter":
+        case "return":
+            return { label: "⏎", name: "Enter" };
+        case "tab":
+            return { label: "⇥", name: "Tab" };
+        case "backspace":
+            return { label: "⌫", name: "Backspace" };
+        case "delete":
+        case "del":
+            return { label: "⌦", name: "Delete" };
+        case "esc":
+        case "escape":
+            return { label: "Esc", name: "Escape" };
+        case "space":
+        case "spacebar":
+            return { label: "Space", name: "Space" };
+        case "up":
+        case "arrowup":
+            return { label: "↑", name: "Up arrow" };
+        case "down":
+        case "arrowdown":
+            return { label: "↓", name: "Down arrow" };
+        case "left":
+        case "arrowleft":
+            return { label: "←", name: "Left arrow" };
+        case "right":
+        case "arrowright":
+            return { label: "→", name: "Right arrow" };
+        case "pageup":
+            return { label: "PgUp", name: "Page Up" };
+        case "pagedown":
+            return { label: "PgDn", name: "Page Down" };
+        default: {
+            const token = raw.trim();
+            const label = token.length === 1 ? token.toUpperCase() : token;
+            return { label, name: label };
+        }
+    }
+}
+/**
+ * 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.
+ *
+ * @element kbd-hint
+ */
+let KbdHint = class KbdHint extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Shortcut as case-insensitive, `+`-separated tokens, e.g. `"Mod+Enter"`. */
+        this.keys = "";
+        /** Platform override; `auto` detects macOS from the browser. */
+        this.platform = "auto";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-flex;
+        vertical-align: middle;
+      }
+      .wrap {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
+      kbd {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        min-width: 1.25em;
+        height: 1.5em;
+        padding: 0 0.25rem;
+        color: currentColor;
+        background: color-mix(in srgb, currentColor 14%, transparent);
+        border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        font-family: var(
+          --ui-font-mono,
+          ui-monospace,
+          SFMono-Regular,
+          Menlo,
+          Monaco,
+          Consolas,
+          monospace
+        );
+        font-size: var(--ui-font-size-xs, 0.6875rem);
+        line-height: 1;
+      }
+    `,
+    ]; }
+    /** Whether modifier aliases should use macOS glyphs. */
+    get isMac() {
+        if (this.platform === "mac")
+            return true;
+        if (this.platform === "other")
+            return false;
+        return detectMac();
+    }
+    /** Parses the shortcut into visual/spoken key descriptors. */
+    get parsedKeys() {
+        const mac = this.isMac;
+        return (this.keys ?? "")
+            .split("+")
+            .map((token) => token.trim())
+            .filter(Boolean)
+            .map((token) => keyLabel(token, mac));
+    }
+    /** Renders nothing for an empty shortcut, otherwise an accessible keycap group. */
+    render() {
+        const parsedKeys = this.parsedKeys;
+        if (parsedKeys.length === 0)
+            return html ``;
+        const label = parsedKeys.map((key) => key.name).join(" ");
+        return html `
+      <span class="wrap" role="img" aria-label=${label}>
+        ${parsedKeys.map((key) => html `<kbd aria-hidden="true">${key.label}</kbd>`)}
+      </span>
+    `;
+    }
+};
+__decorate([
+    property()
+], KbdHint.prototype, "keys", void 0);
+__decorate([
+    property()
+], KbdHint.prototype, "platform", void 0);
+KbdHint = __decorate([
+    customElement("kbd-hint")
+], KbdHint);
+export { KbdHint };
+//# sourceMappingURL=kbd-hint.js.map

package/dist/kbd-hint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-hint.js","sourceRoot":"","sources":["../src/kbd-hint.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/** Platform mode used to render modifier keys. */\nexport type KbdPlatform = \"auto\" | \"mac\" | \"other\";\n\n/** Visual and spoken representations of one shortcut key. */\ninterface KeyRender {\n  label: string;\n  name: string;\n}\n\n/**\n * Detects macOS via User-Agent Client Hints when available, with legacy\n * navigator fields as fallbacks.\n */\nfunction detectMac(): boolean {\n  if (\n    typeof window === \"undefined\" ||\n    typeof document === \"undefined\" ||\n    typeof navigator === \"undefined\"\n  ) {\n    return false;\n  }\n  const nav = navigator as Navigator & { userAgentData?: { platform?: string } };\n  const source = nav.userAgentData?.platform || nav.platform || nav.userAgent || \"\";\n  return /mac/i.test(source);\n}\n\n/**\n * Maps one case-insensitive shortcut token to its visual keycap and spoken\n * name. Unknown tokens remain literal; single letters are uppercased.\n */\nfunction keyLabel(raw: string, mac: boolean): KeyRender {\n  switch (raw.trim().toLowerCase()) {\n    case \"mod\":\n      return mac ? { label: \"⌘\", name: \"Command\" } : { label: \"Ctrl\", name: \"Control\" };\n    case \"cmd\":\n    case \"command\":\n      return mac ? { label: \"⌘\", name: \"Command\" } : { label: \"Cmd\", name: \"Command\" };\n    case \"meta\":\n      return mac ? { label: \"⌘\", name: \"Command\" } : { label: \"Meta\", name: \"Meta\" };\n    case \"super\":\n      return mac ? { label: \"⌘\", name: \"Command\" } : { label: \"Super\", name: \"Super\" };\n    case \"win\":\n    case \"windows\":\n      return { label: \"Win\", name: \"Windows\" };\n    case \"ctrl\":\n    case \"control\":\n      return mac ? { label: \"⌃\", name: \"Control\" } : { label: \"Ctrl\", name: \"Control\" };\n    case \"alt\":\n    case \"opt\":\n    case \"option\":\n      return mac ? { label: \"⌥\", name: \"Option\" } : { label: \"Alt\", name: \"Alt\" };\n    case \"shift\":\n      return mac ? { label: \"⇧\", name: \"Shift\" } : { label: \"Shift\", name: \"Shift\" };\n    case \"enter\":\n    case \"return\":\n      return { label: \"⏎\", name: \"Enter\" };\n    case \"tab\":\n      return { label: \"⇥\", name: \"Tab\" };\n    case \"backspace\":\n      return { label: \"⌫\", name: \"Backspace\" };\n    case \"delete\":\n    case \"del\":\n      return { label: \"⌦\", name: \"Delete\" };\n    case \"esc\":\n    case \"escape\":\n      return { label: \"Esc\", name: \"Escape\" };\n    case \"space\":\n    case \"spacebar\":\n      return { label: \"Space\", name: \"Space\" };\n    case \"up\":\n    case \"arrowup\":\n      return { label: \"↑\", name: \"Up arrow\" };\n    case \"down\":\n    case \"arrowdown\":\n      return { label: \"↓\", name: \"Down arrow\" };\n    case \"left\":\n    case \"arrowleft\":\n      return { label: \"←\", name: \"Left arrow\" };\n    case \"right\":\n    case \"arrowright\":\n      return { label: \"→\", name: \"Right arrow\" };\n    case \"pageup\":\n      return { label: \"PgUp\", name: \"Page Up\" };\n    case \"pagedown\":\n      return { label: \"PgDn\", name: \"Page Down\" };\n    default: {\n      const token = raw.trim();\n      const label = token.length === 1 ? token.toUpperCase() : token;\n      return { label, name: label };\n    }\n  }\n}\n\n/**\n * Renders a keyboard shortcut as one boxed keycap per `+`-separated token.\n * Modifier keys are platform-aware: `Mod` becomes Command on macOS and\n * Control elsewhere. Keycaps derive their presentation from `currentColor`,\n * so the hint works inside neutral and accent-colored controls.\n *\n * @element kbd-hint\n */\n@customElement(\"kbd-hint\")\nexport class KbdHint extends LitElement {\n  /** Shortcut as case-insensitive, `+`-separated tokens, e.g. `\"Mod+Enter\"`. */\n  @property() keys = \"\";\n\n  /** Platform override; `auto` detects macOS from the browser. */\n  @property() platform: KbdPlatform = \"auto\";\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n        vertical-align: middle;\n      }\n      .wrap {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n      }\n      kbd {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        box-sizing: border-box;\n        min-width: 1.25em;\n        height: 1.5em;\n        padding: 0 0.25rem;\n        color: currentColor;\n        background: color-mix(in srgb, currentColor 14%, transparent);\n        border: 1px solid color-mix(in srgb, currentColor 38%, transparent);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        font-family: var(\n          --ui-font-mono,\n          ui-monospace,\n          SFMono-Regular,\n          Menlo,\n          Monaco,\n          Consolas,\n          monospace\n        );\n        font-size: var(--ui-font-size-xs, 0.6875rem);\n        line-height: 1;\n      }\n    `,\n  ];\n\n  /** Whether modifier aliases should use macOS glyphs. */\n  private get isMac(): boolean {\n    if (this.platform === \"mac\") return true;\n    if (this.platform === \"other\") return false;\n    return detectMac();\n  }\n\n  /** Parses the shortcut into visual/spoken key descriptors. */\n  private get parsedKeys(): KeyRender[] {\n    const mac = this.isMac;\n    return (this.keys ?? \"\")\n      .split(\"+\")\n      .map((token) => token.trim())\n      .filter(Boolean)\n      .map((token) => keyLabel(token, mac));\n  }\n\n  /** Renders nothing for an empty shortcut, otherwise an accessible keycap group. */\n  override render() {\n    const parsedKeys = this.parsedKeys;\n    if (parsedKeys.length === 0) return html``;\n    const label = parsedKeys.map((key) => key.name).join(\" \");\n    return html`\n      <span class=\"wrap\" role=\"img\" aria-label=${label}>\n        ${parsedKeys.map((key) => html`<kbd aria-hidden=\"true\">${key.label}</kbd>`)}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"kbd-hint\": KbdHint;\n  }\n}\n"]}

package/dist/live-timer.d.ts

@@ -8,7 +8,6 @@ import { type DurationFormat } from "./utils/duration.js";
  * @element live-timer
  */
 export declare class LiveTimer extends LitElement {
-    static styles: import("lit").CSSResult;
     /** ISO-8601 start instant; elapsed time is measured from here. */
     since: string | null;
     /** `"seconds"` -> "1 second", "12 seconds"; `"compact"` -> "12s", "3m 12s", "1h 03m 12s". */

package/dist/live-timer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"live-timer.d.ts","sourceRoot":"","sources":["../src/live-timer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAI1E;;;;;;GAMG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAIpB;IAEF,kEAAkE;IACtD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IACxC,6FAA6F;IACjF,MAAM,EAAE,cAAc,CAAa;IAC/C,gDAAgD;IAC3B,MAAM,SAAM;IACjC,+CAA+C;IACnC,MAAM,SAAM;IAEf,OAAO,CAAC,IAAI,CAAc;IAEnC,OAAO,CAAC,MAAM,CAA+C;IAEpD,iBAAiB,SAKzB;IAEQ,oBAAoB,SAI5B;IAEQ,MAAM,yCAMd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"live-timer.d.ts","sourceRoot":"","sources":["../src/live-timer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAI1E;;;;;;GAMG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,kEAAkE;IACtD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IACxC,6FAA6F;IACjF,MAAM,EAAE,cAAc,CAAa;IAC/C,gDAAgD;IAC3B,MAAM,SAAM;IACjC,+CAA+C;IACnC,MAAM,SAAM;IAEf,OAAO,CAAC,IAAI,CAAc;IAEnC,OAAO,CAAC,MAAM,CAA+C;IAEpD,iBAAiB,SAKzB;IAEQ,oBAAoB,SAI5B;IAEQ,MAAM,yCAMd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/live-timer.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, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { formatDuration } from "./utils/duration.js";
 const TICK_INTERVAL_MS = 1000;
@@ -29,11 +29,6 @@ let LiveTimer = class LiveTimer extends LitElement {
         this._now = Date.now();
         this._timer = null;
     }
-    static { this.styles = css `
-    :host {
-      display: inline;
-    }
-  `; }
     connectedCallback() {
         super.connectedCallback();
         this._timer = setInterval(() => {

package/dist/live-timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"live-timer.js","sourceRoot":"","sources":["../src/live-timer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAuB,MAAM,qBAAqB,CAAC;AAE1E,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAE9B;;;;;;GAMG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAOL,kEAAkE;QACtD,UAAK,GAAkB,IAAI,CAAC;QACxC,6FAA6F;QACjF,WAAM,GAAmB,SAAS,CAAC;QAC/C,gDAAgD;QAC3B,WAAM,GAAG,EAAE,CAAC;QACjC,+CAA+C;QACnC,WAAM,GAAG,EAAE,CAAC;QAEP,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAE3B,WAAM,GAA0C,IAAI,CAAC;IAsB/D,CAAC;aAvCiB,WAAM,GAAG,GAAG,CAAA;;;;GAI3B,AAJqB,CAIpB;IAeO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACzB,CAAC,EAAE,gBAAgB,CAAC,CAAC;IACvB,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI;YAAE,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QACvC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC;QAC/C,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IACnF,CAAC;CACF,CAAA;AAhCa;IAAX,QAAQ,EAAE;wCAA6B;AAE5B;IAAX,QAAQ,EAAE;yCAAoC;AAE1B;IAApB,QAAQ,EAAE;yCAAsB;AAErB;IAAX,QAAQ,EAAE;yCAAa;AAEP;IAAhB,KAAK,EAAE;uCAA2B;AAhBxB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAwCrB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\n\nconst TICK_INTERVAL_MS = 1000;\n\n/**\n * Per-second ticking count-up timer, e.g. a live \"running for 12s\" or\n * \"Sleeping for 3 seconds\" indicator. Renders nothing while `since` is unset\n * or unparseable.\n *\n * @element live-timer\n */\n@customElement(\"live-timer\")\nexport class LiveTimer extends LitElement {\n  static override styles = css`\n    :host {\n      display: inline;\n    }\n  `;\n\n  /** ISO-8601 start instant; elapsed time is measured from here. */\n  @property() since: string | null = null;\n  /** `\"seconds\"` -> \"1 second\", \"12 seconds\"; `\"compact\"` -> \"12s\", \"3m 12s\", \"1h 03m 12s\". */\n  @property() format: DurationFormat = \"seconds\";\n  /** Text rendered before the formatted value. */\n  @property() override prefix = \"\";\n  /** Text rendered after the formatted value. */\n  @property() suffix = \"\";\n\n  @state() private _now = Date.now();\n\n  private _timer: ReturnType<typeof setInterval> | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._timer = setInterval(() => {\n      this._now = Date.now();\n    }, TICK_INTERVAL_MS);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._timer != null) clearInterval(this._timer);\n    this._timer = null;\n  }\n\n  override render() {\n    if (!this.since) return html``;\n    const start = Date.parse(this.since);\n    if (Number.isNaN(start)) return html``;\n    const elapsed = Math.max(0, this._now - start);\n    return html`${this.prefix}${formatDuration(elapsed, this.format)}${this.suffix}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"live-timer\": LiveTimer;\n  }\n}\n"]}
+{"version":3,"file":"live-timer.js","sourceRoot":"","sources":["../src/live-timer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAuB,MAAM,qBAAqB,CAAC;AAE1E,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAE9B;;;;;;GAMG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACL,kEAAkE;QACtD,UAAK,GAAkB,IAAI,CAAC;QACxC,6FAA6F;QACjF,WAAM,GAAmB,SAAS,CAAC;QAC/C,gDAAgD;QAC3B,WAAM,GAAG,EAAE,CAAC;QACjC,+CAA+C;QACnC,WAAM,GAAG,EAAE,CAAC;QAEP,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAE3B,WAAM,GAA0C,IAAI,CAAC;IAsB/D,CAAC;IApBU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACzB,CAAC,EAAE,gBAAgB,CAAC,CAAC;IACvB,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI;YAAE,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QACvC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC;QAC/C,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IACnF,CAAC;CACF,CAAA;AAhCa;IAAX,QAAQ,EAAE;wCAA6B;AAE5B;IAAX,QAAQ,EAAE;yCAAoC;AAE1B;IAApB,QAAQ,EAAE;yCAAsB;AAErB;IAAX,QAAQ,EAAE;yCAAa;AAEP;IAAhB,KAAK,EAAE;uCAA2B;AAVxB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAkCrB","sourcesContent":["import { LitElement, html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\n\nconst TICK_INTERVAL_MS = 1000;\n\n/**\n * Per-second ticking count-up timer, e.g. a live \"running for 12s\" or\n * \"Sleeping for 3 seconds\" indicator. Renders nothing while `since` is unset\n * or unparseable.\n *\n * @element live-timer\n */\n@customElement(\"live-timer\")\nexport class LiveTimer extends LitElement {\n  /** ISO-8601 start instant; elapsed time is measured from here. */\n  @property() since: string | null = null;\n  /** `\"seconds\"` -> \"1 second\", \"12 seconds\"; `\"compact\"` -> \"12s\", \"3m 12s\", \"1h 03m 12s\". */\n  @property() format: DurationFormat = \"seconds\";\n  /** Text rendered before the formatted value. */\n  @property() override prefix = \"\";\n  /** Text rendered after the formatted value. */\n  @property() suffix = \"\";\n\n  @state() private _now = Date.now();\n\n  private _timer: ReturnType<typeof setInterval> | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._timer = setInterval(() => {\n      this._now = Date.now();\n    }, TICK_INTERVAL_MS);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._timer != null) clearInterval(this._timer);\n    this._timer = null;\n  }\n\n  override render() {\n    if (!this.since) return html``;\n    const start = Date.parse(this.since);\n    if (Number.isNaN(start)) return html``;\n    const elapsed = Math.max(0, this._now - start);\n    return html`${this.prefix}${formatDuration(elapsed, this.format)}${this.suffix}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"live-timer\": LiveTimer;\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"map-circle.d.ts","sourceRoot":"","sources":["../src/map-circle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C;;;;;;;;;;;;;GAaG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA8BpB;IAEF,4FAA4F;IAChF,KAAK,SAAa;IAC9B,+BAA+B;IACH,IAAI,SAAM;IACtC,wFAAwF;IACnC,SAAS,SAAK;IACnE,sFAAsF;IAC1C,WAAW,UAAS;IAEhE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IAE3D,MAAM,yCAuBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"map-circle.d.ts","sourceRoot":"","sources":["../src/map-circle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C;;;;;;;;;;;;;GAaG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA4CpB;IAEF,4FAA4F;IAChF,KAAK,SAAa;IAC9B,+BAA+B;IACH,IAAI,SAAM;IACtC,wFAAwF;IACnC,SAAS,SAAK;IACnE,sFAAsF;IAC1C,WAAW,UAAS;IAEhE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IAE3D,MAAM,yCAwBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/map-circle.js

@@ -58,13 +58,27 @@ let MapCircle = class MapCircle extends LitElement {
         left: 50%;
         transform: translate(-50%, -50%);
         color: #fff;
-        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
         font-weight: 700;
         line-height: 1;
         text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
         pointer-events: none;
         white-space: nowrap;
       }
+      @media (prefers-reduced-motion: reduce) {
+        svg {
+          transition: none;
+        }
+      }
     `,
     ]; }
     render() {
@@ -72,6 +86,7 @@ let MapCircle = class MapCircle extends LitElement {
         const dark = mixHex(this.color, "#000000", 30);
         return html `
       <svg
+        aria-hidden="true"
         width=${this.size}
         height=${this.size}
         viewBox="0 0 32 32"

package/dist/map-circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"map-circle.js","sourceRoot":"","sources":["../src/map-circle.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;;;;;;;;;;;;;GAaG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAiCL,4FAA4F;QAChF,UAAK,GAAG,SAAS,CAAC;QAC9B,+BAA+B;QACH,SAAI,GAAG,EAAE,CAAC;QACtC,wFAAwF;QACnC,cAAS,GAAG,CAAC,CAAC;QACnE,sFAAsF;QAC1C,gBAAW,GAAG,KAAK,CAAC;QAE/C,YAAO,GAAG,mBAAmB,iBAAiB,EAAE,EAAE,CAAC;IA0BtE,CAAC;aAnEiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;KACF,AA9BqB,CA8BpB;IAaO,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;;8CAEpE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AAlCa;IAAX,QAAQ,EAAE;wCAAmB;AAEF;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAW;AAEe;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CAAe;AAEvB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAqB;AAxCrD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAoErB","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 plain circular map marker: a light-to-dark gradient fill with a white\n * outer ring, no point/tail (unlike `<map-pin>`) — for markers that don't\n * need to visually \"point\" at their exact coordinate. Purely a visual\n * primitive — it has no `mapbox-gl` (or any mapping library) dependency;\n * the consumer positions it, e.g. via `new mapboxgl.Marker({ element: el })`.\n * It can also replace the former `<map-point>` dense-layer primitive: use\n * `size=\"14\" ring-width=\"3\"`, leave the slot empty, and rasterize one marker\n * per color for use as a map `icon-image`.\n *\n * @element map-circle\n * @slot - Optional badge content shown centered on the circle — a rank\n *   number, an emoji, a small icon.\n */\n@customElement(\"map-circle\")\nexport class MapCircle extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        line-height: 0;\n      }\n      svg {\n        display: block;\n        transition: transform 120ms ease, filter 120ms ease;\n      }\n      :host([highlighted]) svg {\n        transform: scale(1.12);\n        filter: brightness(1.08) drop-shadow(0 0 5px rgb(0 0 0 / 0.35));\n      }\n      .content {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        color: #fff;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-weight: 700;\n        line-height: 1;\n        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);\n        pointer-events: none;\n        white-space: nowrap;\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 = 18;\n  /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */\n  @property({ type: Number, attribute: \"ring-width\" }) ringWidth = 4;\n  /** Scales and glows the circle — a generic emphasis state (e.g. hover, selection). */\n  @property({ type: Boolean, reflect: true }) highlighted = false;\n\n  private readonly _gradId = `map-circle-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      <div class=\"content\" style=\"font-size:${Math.round(this.size * 0.4)}px\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"map-circle\": MapCircle;\n  }\n}\n"]}
+{"version":3,"file":"map-circle.js","sourceRoot":"","sources":["../src/map-circle.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;;;;;;;;;;;;;GAaG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QA+CL,4FAA4F;QAChF,UAAK,GAAG,SAAS,CAAC;QAC9B,+BAA+B;QACH,SAAI,GAAG,EAAE,CAAC;QACtC,wFAAwF;QACnC,cAAS,GAAG,CAAC,CAAC;QACnE,sFAAsF;QAC1C,gBAAW,GAAG,KAAK,CAAC;QAE/C,YAAO,GAAG,mBAAmB,iBAAiB,EAAE,EAAE,CAAC;IA2BtE,CAAC;aAlFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;KACF,AA5CqB,CA4CpB;IAaO,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;;;gBAGC,IAAI,CAAC,IAAI;iBACR,IAAI,CAAC,IAAI;;;;;;+BAMK,IAAI,CAAC,OAAO;2CACA,KAAK;6CACH,IAAI;;;oDAGG,IAAI,CAAC,OAAO,oCAAoC,IAAI,CAAC,SAAS;;8CAEpE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AAnCa;IAAX,QAAQ,EAAE;wCAAmB;AAEF;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAW;AAEe;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CAAe;AAEvB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAqB;AAtDrD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAmFrB","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 plain circular map marker: a light-to-dark gradient fill with a white\n * outer ring, no point/tail (unlike `<map-pin>`) — for markers that don't\n * need to visually \"point\" at their exact coordinate. Purely a visual\n * primitive — it has no `mapbox-gl` (or any mapping library) dependency;\n * the consumer positions it, e.g. via `new mapboxgl.Marker({ element: el })`.\n * It can also replace the former `<map-point>` dense-layer primitive: use\n * `size=\"14\" ring-width=\"3\"`, leave the slot empty, and rasterize one marker\n * per color for use as a map `icon-image`.\n *\n * @element map-circle\n * @slot - Optional badge content shown centered on the circle — a rank\n *   number, an emoji, a small icon.\n */\n@customElement(\"map-circle\")\nexport class MapCircle extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        line-height: 0;\n      }\n      svg {\n        display: block;\n        transition: transform 120ms ease, filter 120ms ease;\n      }\n      :host([highlighted]) svg {\n        transform: scale(1.12);\n        filter: brightness(1.08) drop-shadow(0 0 5px rgb(0 0 0 / 0.35));\n      }\n      .content {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        color: #fff;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-weight: 700;\n        line-height: 1;\n        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);\n        pointer-events: none;\n        white-space: nowrap;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        svg {\n          transition: none;\n        }\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 = 18;\n  /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */\n  @property({ type: Number, attribute: \"ring-width\" }) ringWidth = 4;\n  /** Scales and glows the circle — a generic emphasis state (e.g. hover, selection). */\n  @property({ type: Boolean, reflect: true }) highlighted = false;\n\n  private readonly _gradId = `map-circle-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        aria-hidden=\"true\"\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      <div class=\"content\" style=\"font-size:${Math.round(this.size * 0.4)}px\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"map-circle\": MapCircle;\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"map-pin.d.ts","sourceRoot":"","sources":["../src/map-pin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C;;;;;;;;;GASG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAiCpB;IAEF,4FAA4F;IAChF,KAAK,SAAa;IAC9B,oDAAoD;IACxB,IAAI,SAAM;IACtC,mFAAmF;IACvC,WAAW,UAAS;IAEhE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAyC;IAExD,MAAM,yCA6Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"map-pin.d.ts","sourceRoot":"","sources":["../src/map-pin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C;;;;;;;;;GASG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BA+CpB;IAEF,4FAA4F;IAChF,KAAK,SAAa;IAC9B,oDAAoD;IACxB,IAAI,SAAM;IACtC,mFAAmF;IACvC,WAAW,UAAS;IAEhE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAyC;IAExD,MAAM,yCA8Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/map-pin.js

@@ -55,13 +55,27 @@ let MapPin = class MapPin extends LitElement {
         left: 50%;
         transform: translate(-50%, -50%);
         color: #fff;
-        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
         font-weight: 700;
         line-height: 1;
         text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
         pointer-events: none;
         white-space: nowrap;
       }
+      @media (prefers-reduced-motion: reduce) {
+        svg {
+          transition: none;
+        }
+      }
     `,
     ]; }
     render() {
@@ -70,6 +84,7 @@ let MapPin = class MapPin extends LitElement {
         const height = Math.round(this.size * (34 / 32));
         return html `
       <svg
+        aria-hidden="true"
         width=${this.size}
         height=${height}
         viewBox="0 0 32 34"

package/dist/map-pin.js.map

@@ -1 +1 @@
-{"version":3,"file":"map-pin.js","sourceRoot":"","sources":["../src/map-pin.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;;;;;;;;;GASG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAoCL,4FAA4F;QAChF,UAAK,GAAG,SAAS,CAAC;QAC9B,oDAAoD;QACxB,SAAI,GAAG,EAAE,CAAC;QACtC,mFAAmF;QACvC,gBAAW,GAAG,KAAK,CAAC;QAE/C,YAAO,GAAG,gBAAgB,iBAAiB,EAAE,EAAE,CAAC;IAgCnE,CAAC;aA1EiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;KACF,AAjCqB,CAiCpB;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,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACjD,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;iBACR,MAAM;;;;;;+BAMQ,IAAI,CAAC,OAAO;2CACA,KAAK;6CACH,IAAI;;;;;uBAK1B,IAAI,CAAC,OAAO;;;;;8CAKW,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AAtCa;IAAX,QAAQ,EAAE;qCAAmB;AAEF;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAW;AAEM;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAqB;AAzCrD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA2ElB","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 circular \"Apple Maps\"-style map pin: a light-to-dark gradient fill with\n * a slight point at the bottom. Purely a visual primitive — it has no\n * `mapbox-gl` (or any mapping library) dependency; the consumer positions\n * it, e.g. via `new mapboxgl.Marker({ element: pinEl })`.\n *\n * @element map-pin\n * @slot - Badge content shown centered on the pin's circular head — a rank\n *   number, an emoji, a small icon.\n */\n@customElement(\"map-pin\")\nexport class MapPin extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        line-height: 0;\n      }\n      svg {\n        display: block;\n        transition: transform 120ms ease, filter 120ms ease;\n      }\n      :host([highlighted]) svg {\n        transform: scale(1.12);\n        filter: brightness(1.08) drop-shadow(0 0 5px rgb(0 0 0 / 0.35));\n      }\n      .content {\n        position: absolute;\n        /* The path's circular head is centered at viewBox y=13 of 34 total\n           (13/34 ≈ 38%) — not the pin's full bounding box, which is pulled\n           down by the point below the circle. */\n        top: 38%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        color: #fff;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-weight: 700;\n        line-height: 1;\n        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);\n        pointer-events: none;\n        white-space: nowrap;\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 of the circular head, in CSS pixels. */\n  @property({ type: Number }) size = 32;\n  /** Scales and glows the pin — a generic emphasis state (e.g. hover, selection). */\n  @property({ type: Boolean, reflect: true }) highlighted = false;\n\n  private readonly _gradId = `map-pin-grad-${gradientIdCounter++}`;\n\n  override render() {\n    const light = mixHex(this.color, \"#ffffff\", 30);\n    const dark = mixHex(this.color, \"#000000\", 30);\n    const height = Math.round(this.size * (34 / 32));\n    return html`\n      <svg\n        width=${this.size}\n        height=${height}\n        viewBox=\"0 0 32 34\"\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        <path\n          d=\"M16 30 C10 24 4 19.5 4 13 A12 12 0 1 1 28 13 C28 19.5 22 24 16 30 Z\"\n          fill=\"url(#${this._gradId})\"\n          stroke=\"#ffffff\"\n          stroke-width=\"1.5\"\n        />\n      </svg>\n      <div class=\"content\" style=\"font-size:${Math.round(this.size * 0.4)}px\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"map-pin\": MapPin;\n  }\n}\n"]}
+{"version":3,"file":"map-pin.js","sourceRoot":"","sources":["../src/map-pin.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;;;;;;;;;GASG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAkDL,4FAA4F;QAChF,UAAK,GAAG,SAAS,CAAC;QAC9B,oDAAoD;QACxB,SAAI,GAAG,EAAE,CAAC;QACtC,mFAAmF;QACvC,gBAAW,GAAG,KAAK,CAAC;QAE/C,YAAO,GAAG,gBAAgB,iBAAiB,EAAE,EAAE,CAAC;IAiCnE,CAAC;aAzFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CF;KACF,AA/CqB,CA+CpB;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,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACjD,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,IAAI;iBACR,MAAM;;;;;;+BAMQ,IAAI,CAAC,OAAO;2CACA,KAAK;6CACH,IAAI;;;;;uBAK1B,IAAI,CAAC,OAAO;;;;;8CAKW,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AAvCa;IAAX,QAAQ,EAAE;qCAAmB;AAEF;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAW;AAEM;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAqB;AAvDrD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA0FlB","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 circular \"Apple Maps\"-style map pin: a light-to-dark gradient fill with\n * a slight point at the bottom. Purely a visual primitive — it has no\n * `mapbox-gl` (or any mapping library) dependency; the consumer positions\n * it, e.g. via `new mapboxgl.Marker({ element: pinEl })`.\n *\n * @element map-pin\n * @slot - Badge content shown centered on the pin's circular head — a rank\n *   number, an emoji, a small icon.\n */\n@customElement(\"map-pin\")\nexport class MapPin extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        line-height: 0;\n      }\n      svg {\n        display: block;\n        transition: transform 120ms ease, filter 120ms ease;\n      }\n      :host([highlighted]) svg {\n        transform: scale(1.12);\n        filter: brightness(1.08) drop-shadow(0 0 5px rgb(0 0 0 / 0.35));\n      }\n      .content {\n        position: absolute;\n        /* The path's circular head is centered at viewBox y=13 of 34 total\n           (13/34 ≈ 38%) — not the pin's full bounding box, which is pulled\n           down by the point below the circle. */\n        top: 38%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        color: #fff;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-weight: 700;\n        line-height: 1;\n        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);\n        pointer-events: none;\n        white-space: nowrap;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        svg {\n          transition: none;\n        }\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 of the circular head, in CSS pixels. */\n  @property({ type: Number }) size = 32;\n  /** Scales and glows the pin — a generic emphasis state (e.g. hover, selection). */\n  @property({ type: Boolean, reflect: true }) highlighted = false;\n\n  private readonly _gradId = `map-pin-grad-${gradientIdCounter++}`;\n\n  override render() {\n    const light = mixHex(this.color, \"#ffffff\", 30);\n    const dark = mixHex(this.color, \"#000000\", 30);\n    const height = Math.round(this.size * (34 / 32));\n    return html`\n      <svg\n        aria-hidden=\"true\"\n        width=${this.size}\n        height=${height}\n        viewBox=\"0 0 32 34\"\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        <path\n          d=\"M16 30 C10 24 4 19.5 4 13 A12 12 0 1 1 28 13 C28 19.5 22 24 16 30 Z\"\n          fill=\"url(#${this._gradId})\"\n          stroke=\"#ffffff\"\n          stroke-width=\"1.5\"\n        />\n      </svg>\n      <div class=\"content\" style=\"font-size:${Math.round(this.size * 0.4)}px\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"map-pin\": MapPin;\n  }\n}\n"]}

package/dist/percent-bar-chart.d.ts

@@ -17,6 +17,9 @@ export declare class PercentBarChart extends LitElement {
     groups: PercentBarGroup[];
     private _width;
     private _ro;
+    private readonly _gradIdBase;
+    /** Per-row gradient id, unique across instances and rows. */
+    private _gradId;
     firstUpdated(): void;
     disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/percent-bar-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"percent-bar-chart.d.ts","sourceRoot":"","sources":["../src/percent-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKjD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAOD;;;;;GAKG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAYpB;IAEF,qCAAqC;IACL,MAAM,EAAE,eAAe,EAAE,CAAM;IACtD,OAAO,CAAC,MAAM,CAAK;IAE5B,OAAO,CAAC,GAAG,CAA+B;IAEjC,YAAY,SAMpB;IAEQ,oBAAoB,SAI5B;IAEQ,MAAM,yCA4Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"percent-bar-chart.d.ts","sourceRoot":"","sources":["../src/percent-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMjD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AASD;;;;;GAKG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA+BpB;IAEF,qCAAqC;IACL,MAAM,EAAE,eAAe,EAAE,CAAM;IACtD,OAAO,CAAC,MAAM,CAAK;IAE5B,OAAO,CAAC,GAAG,CAA+B;IAC1C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA6C;IAEzE,6DAA6D;IAC7D,OAAO,CAAC,OAAO;IAIN,YAAY,SAMpB;IAEQ,oBAAoB,SAI5B;IAEQ,MAAM,yCA2Dd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/percent-bar-chart.js

@@ -6,12 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, css, html, svg } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { scaleLinear } from "d3-scale";
 import { tokens } from "./tokens.js";
 const ROW_H = 20;
 const LABEL_W = 56;
 const PCT_W = 36;
 const PAD = { top: 4, right: 4, bottom: 4, left: 4 };
+let gradientIdCounter = 0;
 /**
  * Horizontal bar chart for labeled percentage rows, using D3's linear scale.
  * Each group gets its own labeled row; bars are proportional to percentage of 100.
@@ -25,6 +27,7 @@ let PercentBarChart = class PercentBarChart extends LitElement {
         this.groups = [];
         this._width = 0;
         this._ro = null;
+        this._gradIdBase = `percent-bar-grad-${gradientIdCounter++}`;
     }
     static { this.styles = [
         tokens,
@@ -36,9 +39,32 @@ let PercentBarChart = class PercentBarChart extends LitElement {
       svg {
         display: block;
         overflow: visible;
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+      }
+      .chart-label {
+        fill: var(--ui-text-muted, #64748b);
+      }
+      .gradient-start {
+        stop-color: color-mix(in srgb, var(--percent-bar-color) 70%, #ffffff);
+      }
+      .gradient-end {
+        stop-color: color-mix(in srgb, var(--percent-bar-color) 70%, #000000);
       }
     `,
     ]; }
+    /** Per-row gradient id, unique across instances and rows. */
+    _gradId(index) {
+        return `${this._gradIdBase}-${index}`;
+    }
     firstUpdated() {
         this._ro = new ResizeObserver((entries) => {
             const w = Math.floor(entries[0].contentRect.width);
@@ -59,21 +85,51 @@ let PercentBarChart = class PercentBarChart extends LitElement {
         const barMaxW = innerW - LABEL_W - PCT_W;
         const svgH = PAD.top + this.groups.length * ROW_H + PAD.bottom;
         const xScale = scaleLinear().domain([0, 100]).range([0, barMaxW]);
+        // CSS stop styles preserve every valid CSS color format while matching
+        // map-circle's 30% white/black vertical depth.
+        const rowFills = this.groups.map((g, i) => {
+            const color = g.color.trim();
+            const gradId = this._gradId(i);
+            return {
+                fill: `url(#${gradId})`,
+                gradient: svg `
+          <linearGradient
+            id=${gradId}
+            x1="0"
+            y1="0"
+            x2="0"
+            y2="1"
+            style=${styleMap({ "--percent-bar-color": color })}
+          >
+            <stop class="gradient-start" offset="0%" />
+            <stop class="gradient-end" offset="100%" />
+          </linearGradient>
+        `,
+            };
+        });
+        const gradients = rowFills.map((row) => row.gradient);
         const rows = this.groups.map((g, i) => {
             const cy = PAD.top + i * ROW_H + ROW_H / 2;
             const bw = Math.max(0, xScale(g.pct));
             return svg `
-        <text x=${PAD.left} y=${cy} font-size="10" fill="#64748b"
+        <text class="chart-label" x=${PAD.left} y=${cy} font-size="10"
               text-anchor="start" dominant-baseline="middle">${g.label}</text>
         <rect x=${PAD.left + LABEL_W} y=${cy - 5}
               width=${bw} height="10" rx="2"
-              fill=${g.color} fill-opacity="0.82" />
-        <text x=${PAD.left + LABEL_W + barMaxW + 4} y=${cy} font-size="10" fill="#64748b"
+              fill=${rowFills[i].fill} />
+        <text class="chart-label" x=${PAD.left + LABEL_W + barMaxW + 4} y=${cy} font-size="10"
               text-anchor="start" dominant-baseline="middle">${g.pct.toFixed(1)}%</text>
       `;
         });
         return html `
-      <svg viewBox="0 0 ${this._width} ${svgH}" width=${this._width} height=${svgH}>
+      <svg
+        viewBox="0 0 ${this._width} ${svgH}"
+        width=${this._width}
+        height=${svgH}
+        role="img"
+        aria-label=${`Percentages: ${this.groups.map((group) => `${group.label} ${group.pct.toFixed(1)}%`).join(", ")}`}
+      >
+        <defs>${gradients}</defs>
         ${rows}
       </svg>
     `;