@f-ewald/components 1.14.0 → 1.15.0

package/README.md

@@ -79,6 +79,8 @@ import "@f-ewald/components/roman-numeral.js";
 | `<link-card>` | [API reference](https://f-ewald.github.io/components/docs/link-card.html) |
 | `<live-timer>` | [API reference](https://f-ewald.github.io/components/docs/live-timer.html) |
 | `<load-more>` | [API reference](https://f-ewald.github.io/components/docs/load-more.html) |
+| `<loading-dots>` | [API reference](https://f-ewald.github.io/components/docs/loading-dots.html) |
+| `<loading-spinner>` | [API reference](https://f-ewald.github.io/components/docs/loading-spinner.html) |
 | `<map-circle>` | [API reference](https://f-ewald.github.io/components/docs/map-circle.html) |
 | `<map-pin>` | [API reference](https://f-ewald.github.io/components/docs/map-pin.html) |
 | `<markdown-view>` | [API reference](https://f-ewald.github.io/components/docs/markdown-view.html) |

package/custom-elements.json

@@ -6755,6 +6755,22 @@
             "module": "./load-more.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "LoadingSpinner",
+          "declaration": {
+            "name": "LoadingSpinner",
+            "module": "./loading-spinner.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LoadingDots",
+          "declaration": {
+            "name": "LoadingDots",
+            "module": "./loading-dots.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ChatMessage",
@@ -8575,13 +8591,167 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/loading-dots.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Three dots that bounce one after another as a lightweight, indeterminate\n\"working\" / \"typing\" indicator. Purely presentational and property-driven —\nshow it while a short operation is pending and remove it when done.\n\nExposes an accessible `role=\"status\"` with `label` as its name, so assistive\ntechnology announces the loading state; the dots themselves are decorative.\nUnder `prefers-reduced-motion` the bounce is removed and the dots rest.",
+          "name": "LoadingDots",
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"sm\" | \"md\" | \"lg\""
+              },
+              "default": "\"md\"",
+              "description": "Dot-size step — `sm`, `md` (default), or `lg`.",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Loading\"",
+              "description": "Accessible name announced by the `role=\"status\"` live region.",
+              "attribute": "label"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"sm\" | \"md\" | \"lg\""
+              },
+              "default": "\"md\"",
+              "description": "Dot-size step — `sm`, `md` (default), or `lg`.",
+              "fieldName": "size"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Loading\"",
+              "description": "Accessible name announced by the `role=\"status\"` live region.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "loading-dots",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LoadingDots",
+          "declaration": {
+            "name": "LoadingDots",
+            "module": "src/loading-dots.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "loading-dots",
+          "declaration": {
+            "name": "LoadingDots",
+            "module": "src/loading-dots.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/loading-spinner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Indeterminate circular loading spinner: a rotating arc over a faint track,\nin the style of a browser page-load indicator. Purely presentational and\nproperty-driven — show it while work is in flight and remove it when done.\n\nExposes an accessible `role=\"status\"` with `label` as its name, so assistive\ntechnology announces the loading state; the arc itself is decorative. Under\n`prefers-reduced-motion` it stops rotating and stays a static ring.",
+          "name": "LoadingSpinner",
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"sm\" | \"md\" | \"lg\""
+              },
+              "default": "\"md\"",
+              "description": "Diameter step — `sm` ≈ 1rem, `md` ≈ 1.5rem (default), `lg` ≈ 2rem.",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Loading\"",
+              "description": "Accessible name announced by the `role=\"status\"` live region.",
+              "attribute": "label"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"sm\" | \"md\" | \"lg\""
+              },
+              "default": "\"md\"",
+              "description": "Diameter step — `sm` ≈ 1rem, `md` ≈ 1.5rem (default), `lg` ≈ 2rem.",
+              "fieldName": "size"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Loading\"",
+              "description": "Accessible name announced by the `role=\"status\"` live region.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "loading-spinner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LoadingSpinner",
+          "declaration": {
+            "name": "LoadingSpinner",
+            "module": "src/loading-spinner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "loading-spinner",
+          "declaration": {
+            "name": "LoadingSpinner",
+            "module": "src/loading-spinner.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/map-circle.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A plain circular map marker: a radial-gradient fill with a soft highlight\nand a translucent white outer ring, no point/tail (unlike `<map-pin>`) —\nfor markers that don't need to visually \"point\" at their exact\ncoordinate. Purely a visual primitive — it has no `mapbox-gl` (or any\nmapping library) dependency; the consumer positions it, e.g. via\n`new mapboxgl.Marker({ element: el })`. It can also replace the former\n`<map-point>` dense-layer primitive: use `size=\"14\" ring-width=\"3\"`, leave\nthe slot empty, and rasterize one marker per color for use as a map\n`icon-image`.",
+          "description": "A plain circular map marker: a radial-gradient fill with a soft highlight\nand a solid white outer ring, no point/tail (unlike `<map-pin>`) —\nfor markers that don't need to visually \"point\" at their exact\ncoordinate. Purely a visual primitive — it has no `mapbox-gl` (or any\nmapping library) dependency; the consumer positions it, e.g. via\n`new mapboxgl.Marker({ element: el })`. It can also replace the former\n`<map-point>` dense-layer primitive: use `size=\"14\" ring-width=\"3\"`, leave\nthe slot empty, and rasterize one marker per color for use as a map\n`icon-image`.",
           "name": "MapCircle",
           "slots": [
             {
@@ -8616,7 +8786,7 @@
               "type": {
                 "text": "number"
               },
-              "default": "4",
+              "default": "2",
               "description": "White outer ring thickness, in the same viewBox units as `size` (scales with it).",
               "attribute": "ring-width"
             },
@@ -8626,8 +8796,8 @@
               "type": {
                 "text": "number"
               },
-              "default": "0.6",
-              "description": "Outer ring opacity, 0-1 (Apple Maps-style rings are translucent, not solid white).",
+              "default": "1",
+              "description": "Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring).",
               "attribute": "ring-opacity"
             },
             {
@@ -8673,7 +8843,7 @@
               "type": {
                 "text": "number"
               },
-              "default": "4",
+              "default": "2",
               "description": "White outer ring thickness, in the same viewBox units as `size` (scales with it).",
               "fieldName": "ringWidth"
             },
@@ -8682,8 +8852,8 @@
               "type": {
                 "text": "number"
               },
-              "default": "0.6",
-              "description": "Outer ring opacity, 0-1 (Apple Maps-style rings are translucent, not solid white).",
+              "default": "1",
+              "description": "Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring).",
               "fieldName": "ringOpacity"
             },
             {
@@ -8764,8 +8934,8 @@
               "type": {
                 "text": "number"
               },
-              "default": "0.6",
-              "description": "Outer ring opacity, 0-1 (Apple Maps-style rings are translucent, not solid white).",
+              "default": "1",
+              "description": "Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring).",
               "attribute": "ring-opacity"
             },
             {
@@ -8811,8 +8981,8 @@
               "type": {
                 "text": "number"
               },
-              "default": "0.6",
-              "description": "Outer ring opacity, 0-1 (Apple Maps-style rings are translucent, not solid white).",
+              "default": "1",
+              "description": "Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring).",
               "fieldName": "ringOpacity"
             },
             {

package/dist/index.d.ts

@@ -31,6 +31,8 @@ export { StatusPill, type StatusPillColor } from "./status-pill.js";
 export { EditableText } from "./editable-text.js";
 export { LiveTimer } from "./live-timer.js";
 export { LoadMore } from "./load-more.js";
+export { LoadingSpinner } from "./loading-spinner.js";
+export { LoadingDots } from "./loading-dots.js";
 export { ChatMessage, type ChatMessageRole, type ChatMessageVariant, } from "./chat-message.js";
 export { UiCheckbox } from "./ui-checkbox.js";
 export { FormField } from "./form-field.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -31,6 +31,8 @@ export { StatusPill } from "./status-pill.js";
 export { EditableText } from "./editable-text.js";
 export { LiveTimer } from "./live-timer.js";
 export { LoadMore } from "./load-more.js";
+export { LoadingSpinner } from "./loading-spinner.js";
+export { LoadingDots } from "./loading-dots.js";
 export { ChatMessage, } from "./chat-message.js";
 export { UiCheckbox } from "./ui-checkbox.js";
 export { FormField } from "./form-field.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","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 { ContentDivider } from \"./content-divider.js\";\nexport {\n  ToastNotification,\n  notifySuccess,\n  notifyError,\n  notifyInfo,\n  type ToastVariant,\n} from \"./toast-notification.js\";\nexport { ScrollToBottom } from \"./scroll-to-bottom.js\";\nexport { ScrollToTop } from \"./scroll-to-top.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 { ButtonGroup, type ButtonGroupOption } from \"./button-group.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 { LoadMore } from \"./load-more.js\";\nexport {\n  ChatMessage,\n  type ChatMessageRole,\n  type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { UiCheckbox } from \"./ui-checkbox.js\";\nexport { FormField } from \"./form-field.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport {\n  MultiSelect,\n  type MultiSelectOption,\n  type MultiSelectVariant,\n} from \"./multi-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { TreeView, type TreeNode } from \"./tree-view.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 { AppShell, type SidebarToggleDetail } from \"./app-shell.js\";\nexport { AppSidebar } from \"./app-sidebar.js\";\nexport { ActionBar } from \"./action-bar.js\";\nexport { PageHeader } from \"./page-header.js\";\nexport { PaginationNav, type PageChangeDetail } from \"./pagination-nav.js\";\nexport { FormActions } from \"./form-actions.js\";\nexport { TimelineContainer } from \"./timeline-container.js\";\nexport { TimelineEntry } from \"./timeline-entry.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport {\n  KanbanBoard,\n  type KanbanCardData,\n  type KanbanColumnData,\n  type KanbanCardMoveDetail,\n  type KanbanCardOpenDetail,\n} from \"./kanban-board.js\";\nexport { KanbanColumn } from \"./kanban-column.js\";\nexport { KanbanCard } from \"./kanban-card.js\";\nexport { TextArea } from \"./text-area.js\";\nexport { LinkCard, type LinkCardStatus } from \"./link-card.js\";\nexport { CardGrid } from \"./card-grid.js\";\nexport { MarkdownView } from \"./markdown-view.js\";\nexport { AutoScroll } from \"./auto-scroll.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":"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","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 { ContentDivider } from \"./content-divider.js\";\nexport {\n  ToastNotification,\n  notifySuccess,\n  notifyError,\n  notifyInfo,\n  type ToastVariant,\n} from \"./toast-notification.js\";\nexport { ScrollToBottom } from \"./scroll-to-bottom.js\";\nexport { ScrollToTop } from \"./scroll-to-top.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 { ButtonGroup, type ButtonGroupOption } from \"./button-group.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 { LoadMore } from \"./load-more.js\";\nexport { LoadingSpinner } from \"./loading-spinner.js\";\nexport { LoadingDots } from \"./loading-dots.js\";\nexport {\n  ChatMessage,\n  type ChatMessageRole,\n  type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { UiCheckbox } from \"./ui-checkbox.js\";\nexport { FormField } from \"./form-field.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport {\n  MultiSelect,\n  type MultiSelectOption,\n  type MultiSelectVariant,\n} from \"./multi-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { TreeView, type TreeNode } from \"./tree-view.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 { AppShell, type SidebarToggleDetail } from \"./app-shell.js\";\nexport { AppSidebar } from \"./app-sidebar.js\";\nexport { ActionBar } from \"./action-bar.js\";\nexport { PageHeader } from \"./page-header.js\";\nexport { PaginationNav, type PageChangeDetail } from \"./pagination-nav.js\";\nexport { FormActions } from \"./form-actions.js\";\nexport { TimelineContainer } from \"./timeline-container.js\";\nexport { TimelineEntry } from \"./timeline-entry.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport {\n  KanbanBoard,\n  type KanbanCardData,\n  type KanbanColumnData,\n  type KanbanCardMoveDetail,\n  type KanbanCardOpenDetail,\n} from \"./kanban-board.js\";\nexport { KanbanColumn } from \"./kanban-column.js\";\nexport { KanbanCard } from \"./kanban-card.js\";\nexport { TextArea } from \"./text-area.js\";\nexport { LinkCard, type LinkCardStatus } from \"./link-card.js\";\nexport { CardGrid } from \"./card-grid.js\";\nexport { MarkdownView } from \"./markdown-view.js\";\nexport { AutoScroll } from \"./auto-scroll.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}

package/dist/loading-dots.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, type PropertyValues } from "lit";
+/**
+ * Three dots that bounce one after another as a lightweight, indeterminate
+ * "working" / "typing" indicator. Purely presentational and property-driven —
+ * show it while a short operation is pending and remove it when done.
+ *
+ * Exposes an accessible `role="status"` with `label` as its name, so assistive
+ * technology announces the loading state; the dots themselves are decorative.
+ * Under `prefers-reduced-motion` the bounce is removed and the dots rest.
+ *
+ * @element loading-dots
+ */
+export declare class LoadingDots extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Dot-size step — `sm`, `md` (default), or `lg`. */
+    size: "sm" | "md" | "lg";
+    /** Accessible name announced by the `role="status"` live region. */
+    label: string;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "loading-dots": LoadingDots;
+    }
+}
+//# sourceMappingURL=loading-dots.d.ts.map

package/dist/loading-dots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-dots.d.ts","sourceRoot":"","sources":["../src/loading-dots.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIjE;;;;;;;;;;GAUG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAyDpB;IAEF,qDAAqD;IACzC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC5C,oEAAoE;IACxD,KAAK,SAAa;IAErB,iBAAiB,IAAI,IAAI,CAGjC;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAExD;IAEQ,MAAM,yCAQd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/loading-dots.js

@@ -0,0 +1,116 @@
+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";
+/**
+ * Three dots that bounce one after another as a lightweight, indeterminate
+ * "working" / "typing" indicator. Purely presentational and property-driven —
+ * show it while a short operation is pending and remove it when done.
+ *
+ * Exposes an accessible `role="status"` with `label` as its name, so assistive
+ * technology announces the loading state; the dots themselves are decorative.
+ * Under `prefers-reduced-motion` the bounce is removed and the dots rest.
+ *
+ * @element loading-dots
+ */
+let LoadingDots = class LoadingDots extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Dot-size step — `sm`, `md` (default), or `lg`. */
+        this.size = "md";
+        /** Accessible name announced by the `role="status"` live region. */
+        this.label = "Loading";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-flex;
+        line-height: var(--ui-line-height-glyph, 1);
+      }
+      .dots {
+        display: inline-flex;
+        align-items: flex-end;
+        gap: 0.25rem;
+      }
+      .dot {
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 999px;
+        background: var(--ui-primary, #4f46e5);
+        animation: loading-dots-bounce 1.4s ease-in-out infinite;
+      }
+      .dot:nth-child(2) {
+        animation-delay: 0.16s;
+      }
+      .dot:nth-child(3) {
+        animation-delay: 0.32s;
+      }
+      .dots.sm .dot {
+        width: 0.375rem;
+        height: 0.375rem;
+      }
+      .dots.lg .dot {
+        width: 0.625rem;
+        height: 0.625rem;
+      }
+      @keyframes loading-dots-bounce {
+        0%,
+        80%,
+        100% {
+          transform: translateY(0);
+          opacity: 0.5;
+        }
+        40% {
+          transform: translateY(-0.375rem);
+          opacity: 1;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .dot {
+          animation: none;
+          opacity: 1;
+        }
+      }
+      @media (forced-colors: active) {
+        .dot {
+          background: CanvasText;
+        }
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "status");
+    }
+    updated(changed) {
+        if (changed.has("label"))
+            this.setAttribute("aria-label", this.label);
+    }
+    render() {
+        return html `
+      <span class="dots ${this.size}" aria-hidden="true">
+        <span class="dot"></span>
+        <span class="dot"></span>
+        <span class="dot"></span>
+      </span>
+    `;
+    }
+};
+__decorate([
+    property()
+], LoadingDots.prototype, "size", void 0);
+__decorate([
+    property()
+], LoadingDots.prototype, "label", void 0);
+LoadingDots = __decorate([
+    customElement("loading-dots")
+], LoadingDots);
+export { LoadingDots };
+//# sourceMappingURL=loading-dots.js.map

package/dist/loading-dots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-dots.js","sourceRoot":"","sources":["../src/loading-dots.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;GAUG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QA4DL,qDAAqD;QACzC,SAAI,GAAuB,IAAI,CAAC;QAC5C,oEAAoE;QACxD,UAAK,GAAG,SAAS,CAAC;IAoBhC,CAAC;aAlFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDF;KACF,AAzDqB,CAyDpB;IAOO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtE,CAAC;IAEkB,OAAO,CAAC,OAAuB;QAChD,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACxE,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,IAAI;;;;;KAK9B,CAAC;IACJ,CAAC;CACF,CAAA;AAtBa;IAAX,QAAQ,EAAE;yCAAiC;AAEhC;IAAX,QAAQ,EAAE;0CAAmB;AA/DnB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmFvB","sourcesContent":["import { LitElement, css, html, type PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Three dots that bounce one after another as a lightweight, indeterminate\n * \"working\" / \"typing\" indicator. Purely presentational and property-driven —\n * show it while a short operation is pending and remove it when done.\n *\n * Exposes an accessible `role=\"status\"` with `label` as its name, so assistive\n * technology announces the loading state; the dots themselves are decorative.\n * Under `prefers-reduced-motion` the bounce is removed and the dots rest.\n *\n * @element loading-dots\n */\n@customElement(\"loading-dots\")\nexport class LoadingDots extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n        line-height: var(--ui-line-height-glyph, 1);\n      }\n      .dots {\n        display: inline-flex;\n        align-items: flex-end;\n        gap: 0.25rem;\n      }\n      .dot {\n        width: 0.5rem;\n        height: 0.5rem;\n        border-radius: 999px;\n        background: var(--ui-primary, #4f46e5);\n        animation: loading-dots-bounce 1.4s ease-in-out infinite;\n      }\n      .dot:nth-child(2) {\n        animation-delay: 0.16s;\n      }\n      .dot:nth-child(3) {\n        animation-delay: 0.32s;\n      }\n      .dots.sm .dot {\n        width: 0.375rem;\n        height: 0.375rem;\n      }\n      .dots.lg .dot {\n        width: 0.625rem;\n        height: 0.625rem;\n      }\n      @keyframes loading-dots-bounce {\n        0%,\n        80%,\n        100% {\n          transform: translateY(0);\n          opacity: 0.5;\n        }\n        40% {\n          transform: translateY(-0.375rem);\n          opacity: 1;\n        }\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .dot {\n          animation: none;\n          opacity: 1;\n        }\n      }\n      @media (forced-colors: active) {\n        .dot {\n          background: CanvasText;\n        }\n      }\n    `,\n  ];\n\n  /** Dot-size step — `sm`, `md` (default), or `lg`. */\n  @property() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** Accessible name announced by the `role=\"status\"` live region. */\n  @property() label = \"Loading\";\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute(\"role\")) this.setAttribute(\"role\", \"status\");\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has(\"label\")) this.setAttribute(\"aria-label\", this.label);\n  }\n\n  override render() {\n    return html`\n      <span class=\"dots ${this.size}\" aria-hidden=\"true\">\n        <span class=\"dot\"></span>\n        <span class=\"dot\"></span>\n        <span class=\"dot\"></span>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"loading-dots\": LoadingDots;\n  }\n}\n"]}

package/dist/loading-spinner.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, type PropertyValues } from "lit";
+/**
+ * Indeterminate circular loading spinner: a rotating arc over a faint track,
+ * in the style of a browser page-load indicator. Purely presentational and
+ * property-driven — show it while work is in flight and remove it when done.
+ *
+ * Exposes an accessible `role="status"` with `label` as its name, so assistive
+ * technology announces the loading state; the arc itself is decorative. Under
+ * `prefers-reduced-motion` it stops rotating and stays a static ring.
+ *
+ * @element loading-spinner
+ */
+export declare class LoadingSpinner extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Diameter step — `sm` ≈ 1rem, `md` ≈ 1.5rem (default), `lg` ≈ 2rem. */
+    size: "sm" | "md" | "lg";
+    /** Accessible name announced by the `role="status"` live region. */
+    label: string;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "loading-spinner": LoadingSpinner;
+    }
+}
+//# sourceMappingURL=loading-spinner.d.ts.map

package/dist/loading-spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-spinner.d.ts","sourceRoot":"","sources":["../src/loading-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIjE;;;;;;;;;;GAUG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAmDpB;IAEF,yEAAyE;IAC7D,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC5C,oEAAoE;IACxD,KAAK,SAAa;IAErB,iBAAiB,IAAI,IAAI,CAGjC;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAExD;IAEQ,MAAM,yCAOd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

package/dist/loading-spinner.js

@@ -0,0 +1,109 @@
+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";
+/**
+ * Indeterminate circular loading spinner: a rotating arc over a faint track,
+ * in the style of a browser page-load indicator. Purely presentational and
+ * property-driven — show it while work is in flight and remove it when done.
+ *
+ * Exposes an accessible `role="status"` with `label` as its name, so assistive
+ * technology announces the loading state; the arc itself is decorative. Under
+ * `prefers-reduced-motion` it stops rotating and stays a static ring.
+ *
+ * @element loading-spinner
+ */
+let LoadingSpinner = class LoadingSpinner extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Diameter step — `sm` ≈ 1rem, `md` ≈ 1.5rem (default), `lg` ≈ 2rem. */
+        this.size = "md";
+        /** Accessible name announced by the `role="status"` live region. */
+        this.label = "Loading";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-flex;
+        line-height: var(--ui-line-height-glyph, 1);
+      }
+      .spinner {
+        width: 1.5rem;
+        height: 1.5rem;
+        animation: spin 0.8s linear infinite;
+      }
+      .spinner.sm {
+        width: 1rem;
+        height: 1rem;
+      }
+      .spinner.lg {
+        width: 2rem;
+        height: 2rem;
+      }
+      .track {
+        fill: none;
+        stroke: var(--ui-border, #e2e8f0);
+        stroke-width: 3;
+      }
+      .arc {
+        fill: none;
+        stroke: var(--ui-primary, #4f46e5);
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-dasharray: 42 100;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .spinner {
+          animation: none;
+        }
+      }
+      @media (forced-colors: active) {
+        .track {
+          stroke: GrayText;
+        }
+        .arc {
+          stroke: CanvasText;
+        }
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "status");
+    }
+    updated(changed) {
+        if (changed.has("label"))
+            this.setAttribute("aria-label", this.label);
+    }
+    render() {
+        return html `
+      <svg class="spinner ${this.size}" viewBox="0 0 24 24" aria-hidden="true">
+        <circle class="track" cx="12" cy="12" r="9"></circle>
+        <circle class="arc" cx="12" cy="12" r="9"></circle>
+      </svg>
+    `;
+    }
+};
+__decorate([
+    property()
+], LoadingSpinner.prototype, "size", void 0);
+__decorate([
+    property()
+], LoadingSpinner.prototype, "label", void 0);
+LoadingSpinner = __decorate([
+    customElement("loading-spinner")
+], LoadingSpinner);
+export { LoadingSpinner };
+//# sourceMappingURL=loading-spinner.js.map

package/dist/loading-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-spinner.js","sourceRoot":"","sources":["../src/loading-spinner.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;GAUG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAsDL,yEAAyE;QAC7D,SAAI,GAAuB,IAAI,CAAC;QAC5C,oEAAoE;QACxD,UAAK,GAAG,SAAS,CAAC;IAmBhC,CAAC;aA3EiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDF;KACF,AAnDqB,CAmDpB;IAOO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtE,CAAC;IAEkB,OAAO,CAAC,OAAuB;QAChD,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACxE,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,IAAI;;;;KAIhC,CAAC;IACJ,CAAC;CACF,CAAA;AArBa;IAAX,QAAQ,EAAE;4CAAiC;AAEhC;IAAX,QAAQ,EAAE;6CAAmB;AAzDnB,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CA4E1B","sourcesContent":["import { LitElement, css, html, type PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Indeterminate circular loading spinner: a rotating arc over a faint track,\n * in the style of a browser page-load indicator. Purely presentational and\n * property-driven — show it while work is in flight and remove it when done.\n *\n * Exposes an accessible `role=\"status\"` with `label` as its name, so assistive\n * technology announces the loading state; the arc itself is decorative. Under\n * `prefers-reduced-motion` it stops rotating and stays a static ring.\n *\n * @element loading-spinner\n */\n@customElement(\"loading-spinner\")\nexport class LoadingSpinner extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n        line-height: var(--ui-line-height-glyph, 1);\n      }\n      .spinner {\n        width: 1.5rem;\n        height: 1.5rem;\n        animation: spin 0.8s linear infinite;\n      }\n      .spinner.sm {\n        width: 1rem;\n        height: 1rem;\n      }\n      .spinner.lg {\n        width: 2rem;\n        height: 2rem;\n      }\n      .track {\n        fill: none;\n        stroke: var(--ui-border, #e2e8f0);\n        stroke-width: 3;\n      }\n      .arc {\n        fill: none;\n        stroke: var(--ui-primary, #4f46e5);\n        stroke-width: 3;\n        stroke-linecap: round;\n        stroke-dasharray: 42 100;\n      }\n      @keyframes spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .spinner {\n          animation: none;\n        }\n      }\n      @media (forced-colors: active) {\n        .track {\n          stroke: GrayText;\n        }\n        .arc {\n          stroke: CanvasText;\n        }\n      }\n    `,\n  ];\n\n  /** Diameter step — `sm` ≈ 1rem, `md` ≈ 1.5rem (default), `lg` ≈ 2rem. */\n  @property() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** Accessible name announced by the `role=\"status\"` live region. */\n  @property() label = \"Loading\";\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute(\"role\")) this.setAttribute(\"role\", \"status\");\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has(\"label\")) this.setAttribute(\"aria-label\", this.label);\n  }\n\n  override render() {\n    return html`\n      <svg class=\"spinner ${this.size}\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <circle class=\"track\" cx=\"12\" cy=\"12\" r=\"9\"></circle>\n        <circle class=\"arc\" cx=\"12\" cy=\"12\" r=\"9\"></circle>\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"loading-spinner\": LoadingSpinner;\n  }\n}\n"]}

package/dist/map-circle.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 /**
  * A plain circular map marker: a radial-gradient fill with a soft highlight
- * and a translucent white outer ring, no point/tail (unlike `<map-pin>`) —
+ * and a solid white 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
@@ -22,7 +22,7 @@ export declare class MapCircle extends LitElement {
     size: number;
     /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */
     ringWidth: number;
-    /** Outer ring opacity, 0-1 (Apple Maps-style rings are translucent, not solid white). */
+    /** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */
     ringOpacity: number;
     /** Scales and glows the circle — a generic emphasis state (e.g. hover, selection). */
     highlighted: boolean;

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;;;;;;;;;;;;;;GAcG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA6CpB;IAEF,gGAAgG;IACpF,KAAK,SAAa;IAC9B,+BAA+B;IACH,IAAI,SAAM;IACtC,wFAAwF;IACnC,SAAS,SAAK;IACnE,yFAAyF;IAClC,WAAW,SAAO;IACzE,sFAAsF;IAC1C,WAAW,UAAS;IAEhE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IAE3D,MAAM,yCA+Bd;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;;;;;;;;;;;;;;GAcG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA6CpB;IAEF,gGAAgG;IACpF,KAAK,SAAa;IAC9B,+BAA+B;IACH,IAAI,SAAM;IACtC,wFAAwF;IACnC,SAAS,SAAK;IACnE,+GAA+G;IACxD,WAAW,SAAK;IACvE,sFAAsF;IAC1C,WAAW,UAAS;IAEhE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IAE3D,MAAM,yCA8Cd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/map-circle.js

@@ -11,7 +11,7 @@ import { mixHex } from "./utils/color.js";
 let gradientIdCounter = 0;
 /**
  * A plain circular map marker: a radial-gradient fill with a soft highlight
- * and a translucent white outer ring, no point/tail (unlike `<map-pin>`) —
+ * and a solid white 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
@@ -32,9 +32,9 @@ let MapCircle = class MapCircle extends LitElement {
         /** Diameter, in CSS pixels. */
         this.size = 18;
         /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */
-        this.ringWidth = 4;
-        /** Outer ring opacity, 0-1 (Apple Maps-style rings are translucent, not solid white). */
-        this.ringOpacity = 0.6;
+        this.ringWidth = 2;
+        /** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */
+        this.ringOpacity = 1;
         /** Scales and glows the circle — a generic emphasis state (e.g. hover, selection). */
         this.highlighted = false;
         this._gradId = `map-circle-grad-${gradientIdCounter++}`;
@@ -88,6 +88,13 @@ let MapCircle = class MapCircle extends LitElement {
     render() {
         const light = mixHex(this.color, "#ffffff", 30);
         const dark = mixHex(this.color, "#000000", 30);
+        // A fixed outer radius keeps the marker footprint constant as `ring-width`
+        // varies; the ring sits entirely outside the fill (the fill meets the
+        // ring's inner edge) so the stroke never straddles the fill edge — which
+        // is what used to read as two rings.
+        const outerR = 15;
+        const fillR = outerR - this.ringWidth;
+        const ringR = outerR - this.ringWidth / 2;
         return html `
       <svg
         aria-hidden="true"
@@ -104,10 +111,18 @@ let MapCircle = class MapCircle extends LitElement {
           </radialGradient>
         </defs>
         <circle
+          class="fill"
           cx="16"
           cy="16"
-          r="13"
+          r=${fillR}
           fill="url(#${this._gradId})"
+        />
+        <circle
+          class="ring"
+          cx="16"
+          cy="16"
+          r=${ringR}
+          fill="none"
           stroke="rgb(255 255 255 / ${this.ringOpacity})"
           stroke-width=${this.ringWidth}
         />

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;;;;;;;;;;;;;;GAcG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAgDL,gGAAgG;QACpF,UAAK,GAAG,SAAS,CAAC;QAC9B,+BAA+B;QACH,SAAI,GAAG,EAAE,CAAC;QACtC,wFAAwF;QACnC,cAAS,GAAG,CAAC,CAAC;QACnE,yFAAyF;QAClC,gBAAW,GAAG,GAAG,CAAC;QACzE,sFAAsF;QAC1C,gBAAW,GAAG,KAAK,CAAC;QAE/C,YAAO,GAAG,mBAAmB,iBAAiB,EAAE,EAAE,CAAC;IAkCtE,CAAC;aA5FiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CF;KACF,AA7CqB,CA6CpB;IAeO,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;;;;;;;uBAO1B,IAAI,CAAC,OAAO;sCACG,IAAI,CAAC,WAAW;yBAC7B,IAAI,CAAC,SAAS;;;8CAGO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AA5Ca;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;AAEZ;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CAAmB;AAE7B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAqB;AAzDrD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA6FrB","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 radial-gradient fill with a soft highlight\n * and a translucent white outer ring, no point/tail (unlike `<map-pin>`) —\n * for markers that don't need to visually \"point\" at their exact\n * coordinate. Purely a visual primitive — it has no `mapbox-gl` (or any\n * mapping library) dependency; the consumer positions it, e.g. via\n * `new mapboxgl.Marker({ element: el })`. It can also replace the former\n * `<map-point>` dense-layer primitive: use `size=\"14\" ring-width=\"3\"`, leave\n * the slot empty, and rasterize one marker per color for use as a map\n * `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        filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));\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: var(--ui-font-weight-bold, 700);\n        line-height: var(--ui-line-height-glyph, 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 (highlight) and dark (edge) 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  /** Outer ring opacity, 0-1 (Apple Maps-style rings are translucent, not solid white). */\n  @property({ type: Number, attribute: \"ring-opacity\" }) ringOpacity = 0.6;\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          <radialGradient id=${this._gradId} cx=\"35%\" cy=\"30%\" r=\"75%\">\n            <stop offset=\"0%\" stop-color=${light} />\n            <stop offset=\"100%\" stop-color=${dark} />\n          </radialGradient>\n        </defs>\n        <circle\n          cx=\"16\"\n          cy=\"16\"\n          r=\"13\"\n          fill=\"url(#${this._gradId})\"\n          stroke=\"rgb(255 255 255 / ${this.ringOpacity})\"\n          stroke-width=${this.ringWidth}\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-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;;;;;;;;;;;;;;GAcG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAgDL,gGAAgG;QACpF,UAAK,GAAG,SAAS,CAAC;QAC9B,+BAA+B;QACH,SAAI,GAAG,EAAE,CAAC;QACtC,wFAAwF;QACnC,cAAS,GAAG,CAAC,CAAC;QACnE,+GAA+G;QACxD,gBAAW,GAAG,CAAC,CAAC;QACvE,sFAAsF;QAC1C,gBAAW,GAAG,KAAK,CAAC;QAE/C,YAAO,GAAG,mBAAmB,iBAAiB,EAAE,EAAE,CAAC;IAiDtE,CAAC;aA3GiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CF;KACF,AA7CqB,CA6CpB;IAeO,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,2EAA2E;QAC3E,sEAAsE;QACtE,yEAAyE;QACzE,qCAAqC;QACrC,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,MAAM,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;QACtC,MAAM,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QAC1C,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,IAAI;iBACR,IAAI,CAAC,IAAI;;;;;;+BAMK,IAAI,CAAC,OAAO;2CACA,KAAK;6CACH,IAAI;;;;;;;cAOnC,KAAK;uBACI,IAAI,CAAC,OAAO;;;;;;cAMrB,KAAK;;sCAEmB,IAAI,CAAC,WAAW;yBAC7B,IAAI,CAAC,SAAS;;;8CAGO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AA3Da;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;AAEZ;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CAAiB;AAE3B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAqB;AAzDrD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA4GrB","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 radial-gradient fill with a soft highlight\n * and a solid white outer ring, no point/tail (unlike `<map-pin>`) —\n * for markers that don't need to visually \"point\" at their exact\n * coordinate. Purely a visual primitive — it has no `mapbox-gl` (or any\n * mapping library) dependency; the consumer positions it, e.g. via\n * `new mapboxgl.Marker({ element: el })`. It can also replace the former\n * `<map-point>` dense-layer primitive: use `size=\"14\" ring-width=\"3\"`, leave\n * the slot empty, and rasterize one marker per color for use as a map\n * `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        filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));\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: var(--ui-font-weight-bold, 700);\n        line-height: var(--ui-line-height-glyph, 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 (highlight) and dark (edge) 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 = 2;\n  /** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */\n  @property({ type: Number, attribute: \"ring-opacity\" }) ringOpacity = 1;\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    // A fixed outer radius keeps the marker footprint constant as `ring-width`\n    // varies; the ring sits entirely outside the fill (the fill meets the\n    // ring's inner edge) so the stroke never straddles the fill edge — which\n    // is what used to read as two rings.\n    const outerR = 15;\n    const fillR = outerR - this.ringWidth;\n    const ringR = outerR - this.ringWidth / 2;\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          <radialGradient id=${this._gradId} cx=\"35%\" cy=\"30%\" r=\"75%\">\n            <stop offset=\"0%\" stop-color=${light} />\n            <stop offset=\"100%\" stop-color=${dark} />\n          </radialGradient>\n        </defs>\n        <circle\n          class=\"fill\"\n          cx=\"16\"\n          cy=\"16\"\n          r=${fillR}\n          fill=\"url(#${this._gradId})\"\n        />\n        <circle\n          class=\"ring\"\n          cx=\"16\"\n          cy=\"16\"\n          r=${ringR}\n          fill=\"none\"\n          stroke=\"rgb(255 255 255 / ${this.ringOpacity})\"\n          stroke-width=${this.ringWidth}\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-circle\": MapCircle;\n  }\n}\n"]}

package/dist/map-pin.d.ts

@@ -15,7 +15,7 @@ export declare class MapPin extends LitElement {
     color: string;
     /** Diameter of the circular head, in CSS pixels. */
     size: number;
-    /** Outer ring opacity, 0-1 (Apple Maps-style rings are translucent, not solid white). */
+    /** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */
     ringOpacity: number;
     /** Scales and glows the pin — a generic emphasis state (e.g. hover, selection). */
     highlighted: boolean;

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,4BAgDpB;IAEF,gGAAgG;IACpF,KAAK,SAAa;IAC9B,oDAAoD;IACxB,IAAI,SAAM;IACtC,yFAAyF;IAClC,WAAW,SAAO;IACzE,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"}
+{"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,4BAgDpB;IAEF,gGAAgG;IACpF,KAAK,SAAa;IAC9B,oDAAoD;IACxB,IAAI,SAAM;IACtC,+GAA+G;IACxD,WAAW,SAAK;IACvE,mFAAmF;IACvC,WAAW,UAAS;IAEhE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAyC;IAExD,MAAM,yCA4Cd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/map-pin.js

@@ -26,8 +26,8 @@ let MapPin = class MapPin extends LitElement {
         this.color = "#4f46e5";
         /** Diameter of the circular head, in CSS pixels. */
         this.size = 32;
-        /** Outer ring opacity, 0-1 (Apple Maps-style rings are translucent, not solid white). */
-        this.ringOpacity = 0.6;
+        /** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */
+        this.ringOpacity = 1;
         /** Scales and glows the pin — a generic emphasis state (e.g. hover, selection). */
         this.highlighted = false;
         this._gradId = `map-pin-grad-${gradientIdCounter++}`;
@@ -85,6 +85,13 @@ let MapPin = class MapPin extends LitElement {
         const light = mixHex(this.color, "#ffffff", 30);
         const dark = mixHex(this.color, "#000000", 30);
         const height = Math.round(this.size * (34 / 32));
+        const shape = "M16 30 C10 24 4 19.5 4 13 A12 12 0 1 1 28 13 C28 19.5 22 24 16 30 Z";
+        const ringWidth = 2;
+        // Inset the fill so its head edge meets the ring's inner edge instead of the
+        // ring straddling the fill (which reads as two rings): the head arc has
+        // radius 12, so scale the fill to (12 - ringWidth / 2) / 12 about the head
+        // center (16, 13). The ring is the same outline drawn behind, stroke only.
+        const fillScale = (12 - ringWidth / 2) / 12;
         return html `
       <svg
         aria-hidden="true"
@@ -101,10 +108,17 @@ let MapPin = class MapPin extends LitElement {
           </radialGradient>
         </defs>
         <path
-          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"
-          fill="url(#${this._gradId})"
+          class="ring"
+          d=${shape}
+          fill="none"
           stroke="rgb(255 255 255 / ${this.ringOpacity})"
-          stroke-width="1.5"
+          stroke-width=${ringWidth}
+        />
+        <path
+          class="fill"
+          d=${shape}
+          fill="url(#${this._gradId})"
+          transform="translate(16 13) scale(${fillScale}) translate(-16 -13)"
         />
       </svg>
       <div class="content" style="font-size:${Math.round(this.size * 0.4)}px">

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;;QAmDL,gGAAgG;QACpF,UAAK,GAAG,SAAS,CAAC;QAC9B,oDAAoD;QACxB,SAAI,GAAG,EAAE,CAAC;QACtC,yFAAyF;QAClC,gBAAW,GAAG,GAAG,CAAC;QACzE,mFAAmF;QACvC,gBAAW,GAAG,KAAK,CAAC;QAE/C,YAAO,GAAG,gBAAgB,iBAAiB,EAAE,EAAE,CAAC;IAiCnE,CAAC;aA5FiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6CF;KACF,AAhDqB,CAgDpB;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,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;sCACG,IAAI,CAAC,WAAW;;;;8CAIR,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AAzCa;IAAX,QAAQ,EAAE;qCAAmB;AAEF;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAW;AAEiB;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CAAmB;AAE7B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAqB;AA1DrD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA6FlB","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 radial-gradient fill with a soft\n * highlight and a slight point at the bottom. Purely a visual primitive —\n * it has no `mapbox-gl` (or any mapping library) dependency; the consumer\n * positions 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        filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));\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: var(--ui-font-weight-bold, 700);\n        line-height: var(--ui-line-height-glyph, 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 (highlight) and dark (edge) 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  /** Outer ring opacity, 0-1 (Apple Maps-style rings are translucent, not solid white). */\n  @property({ type: Number, attribute: \"ring-opacity\" }) ringOpacity = 0.6;\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          <radialGradient id=${this._gradId} gradientUnits=\"userSpaceOnUse\" cx=\"12\" cy=\"9\" r=\"18\">\n            <stop offset=\"0%\" stop-color=${light} />\n            <stop offset=\"100%\" stop-color=${dark} />\n          </radialGradient>\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=\"rgb(255 255 255 / ${this.ringOpacity})\"\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;;QAmDL,gGAAgG;QACpF,UAAK,GAAG,SAAS,CAAC;QAC9B,oDAAoD;QACxB,SAAI,GAAG,EAAE,CAAC;QACtC,+GAA+G;QACxD,gBAAW,GAAG,CAAC,CAAC;QACvE,mFAAmF;QACvC,gBAAW,GAAG,KAAK,CAAC;QAE/C,YAAO,GAAG,gBAAgB,iBAAiB,EAAE,EAAE,CAAC;IA+CnE,CAAC;aA1GiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6CF;KACF,AAhDqB,CAgDpB;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,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACjD,MAAM,KAAK,GAAG,qEAAqE,CAAC;QACpF,MAAM,SAAS,GAAG,CAAC,CAAC;QACpB,6EAA6E;QAC7E,wEAAwE;QACxE,2EAA2E;QAC3E,2EAA2E;QAC3E,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,SAAS,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,IAAI;iBACR,MAAM;;;;;;+BAMQ,IAAI,CAAC,OAAO;2CACA,KAAK;6CACH,IAAI;;;;;cAKnC,KAAK;;sCAEmB,IAAI,CAAC,WAAW;yBAC7B,SAAS;;;;cAIpB,KAAK;uBACI,IAAI,CAAC,OAAO;8CACW,SAAS;;;8CAGT,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AAvDa;IAAX,QAAQ,EAAE;qCAAmB;AAEF;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAW;AAEiB;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CAAiB;AAE3B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAqB;AA1DrD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA2GlB","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 radial-gradient fill with a soft\n * highlight and a slight point at the bottom. Purely a visual primitive —\n * it has no `mapbox-gl` (or any mapping library) dependency; the consumer\n * positions 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        filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));\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: var(--ui-font-weight-bold, 700);\n        line-height: var(--ui-line-height-glyph, 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 (highlight) and dark (edge) 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  /** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */\n  @property({ type: Number, attribute: \"ring-opacity\" }) ringOpacity = 1;\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    const shape = \"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    const ringWidth = 2;\n    // Inset the fill so its head edge meets the ring's inner edge instead of the\n    // ring straddling the fill (which reads as two rings): the head arc has\n    // radius 12, so scale the fill to (12 - ringWidth / 2) / 12 about the head\n    // center (16, 13). The ring is the same outline drawn behind, stroke only.\n    const fillScale = (12 - ringWidth / 2) / 12;\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          <radialGradient id=${this._gradId} gradientUnits=\"userSpaceOnUse\" cx=\"12\" cy=\"9\" r=\"18\">\n            <stop offset=\"0%\" stop-color=${light} />\n            <stop offset=\"100%\" stop-color=${dark} />\n          </radialGradient>\n        </defs>\n        <path\n          class=\"ring\"\n          d=${shape}\n          fill=\"none\"\n          stroke=\"rgb(255 255 255 / ${this.ringOpacity})\"\n          stroke-width=${ringWidth}\n        />\n        <path\n          class=\"fill\"\n          d=${shape}\n          fill=\"url(#${this._gradId})\"\n          transform=\"translate(16 13) scale(${fillScale}) translate(-16 -13)\"\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/docs/loading-dots.md

@@ -0,0 +1,45 @@
+# `<loading-dots>`
+
+Three dots that bounce one after another as a lightweight, indeterminate
+"working" / "typing" indicator. Purely presentational and property-driven —
+show it while a short operation is pending and remove it when done.
+
+Exposes an accessible `role="status"` with `label` as its name, so assistive
+technology announces the loading state; the dots themselves are decorative.
+Under `prefers-reduced-motion` the bounce is removed and the dots rest.
+
+## Install
+
+```js
+import "@f-ewald/components/loading-dots.js";
+```
+
+## Usage
+
+```html
+<loading-dots></loading-dots>
+<loading-dots size="sm"></loading-dots>
+<loading-dots size="lg" label="Sending message"></loading-dots>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `size` | `size` | `"sm" | "md" | "lg"` | `"md"` | Dot-size step — `sm`, `md` (default), or `lg`. |
+| `label` | `label` | `string` | `"Loading"` | Accessible name announced by the `role="status"` live region. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-line-height-glyph` |
+| `--ui-primary` |

package/docs/loading-spinner.md

@@ -0,0 +1,46 @@
+# `<loading-spinner>`
+
+Indeterminate circular loading spinner: a rotating arc over a faint track,
+in the style of a browser page-load indicator. Purely presentational and
+property-driven — show it while work is in flight and remove it when done.
+
+Exposes an accessible `role="status"` with `label` as its name, so assistive
+technology announces the loading state; the arc itself is decorative. Under
+`prefers-reduced-motion` it stops rotating and stays a static ring.
+
+## Install
+
+```js
+import "@f-ewald/components/loading-spinner.js";
+```
+
+## Usage
+
+```html
+<loading-spinner></loading-spinner>
+<loading-spinner size="sm"></loading-spinner>
+<loading-spinner size="lg" label="Loading results"></loading-spinner>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `size` | `size` | `"sm" | "md" | "lg"` | `"md"` | Diameter step — `sm` ≈ 1rem, `md` ≈ 1.5rem (default), `lg` ≈ 2rem. |
+| `label` | `label` | `string` | `"Loading"` | Accessible name announced by the `role="status"` live region. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-line-height-glyph` |
+| `--ui-primary` |

package/docs/map-circle.md

@@ -1,7 +1,7 @@
 # `<map-circle>`
 
 A plain circular map marker: a radial-gradient fill with a soft highlight
-and a translucent white outer ring, no point/tail (unlike `<map-pin>`) —
+and a solid white 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
@@ -30,8 +30,8 @@ import "@f-ewald/components/map-circle.js";
 | --- | --- | --- | --- | --- |
 | `color` | `color` | `string` | `"#4f46e5"` | Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this. |
 | `size` | `size` | `number` | `18` | Diameter, in CSS pixels. |
-| `ringWidth` | `ring-width` | `number` | `4` | White outer ring thickness, in the same viewBox units as `size` (scales with it). |
-| `ringOpacity` | `ring-opacity` | `number` | `0.6` | Outer ring opacity, 0-1 (Apple Maps-style rings are translucent, not solid white). |
+| `ringWidth` | `ring-width` | `number` | `2` | White outer ring thickness, in the same viewBox units as `size` (scales with it). |
+| `ringOpacity` | `ring-opacity` | `number` | `1` | Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). |
 | `highlighted` | `highlighted` | `boolean` | `false` | Scales and glows the circle — a generic emphasis state (e.g. hover, selection). |
 
 ## Events

package/docs/map-pin.md

@@ -24,7 +24,7 @@ import "@f-ewald/components/map-pin.js";
 | --- | --- | --- | --- | --- |
 | `color` | `color` | `string` | `"#4f46e5"` | Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this. |
 | `size` | `size` | `number` | `32` | Diameter of the circular head, in CSS pixels. |
-| `ringOpacity` | `ring-opacity` | `number` | `0.6` | Outer ring opacity, 0-1 (Apple Maps-style rings are translucent, not solid white). |
+| `ringOpacity` | `ring-opacity` | `number` | `1` | Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). |
 | `highlighted` | `highlighted` | `boolean` | `false` | Scales and glows the pin — a generic emphasis state (e.g. hover, selection). |
 
 ## Events

package/llms.txt

@@ -992,10 +992,56 @@ Example:
 <load-more></load-more>
 ```
 
+## <loading-dots>
+
+Three dots that bounce one after another as a lightweight, indeterminate
+"working" / "typing" indicator. Purely presentational and property-driven —
+show it while a short operation is pending and remove it when done.
+
+Exposes an accessible `role="status"` with `label` as its name, so assistive
+technology announces the loading state; the dots themselves are decorative.
+Under `prefers-reduced-motion` the bounce is removed and the dots rest.
+
+Import: `import "@f-ewald/components/loading-dots.js";`
+
+Properties: `size` (attribute `size`) : "sm" | "md" | "lg", default "md"; `label` (attribute `label`) : string, default "Loading"
+Events: none
+CSS custom properties: `--ui-line-height-glyph`, `--ui-primary`
+
+Example:
+```html
+<loading-dots></loading-dots>
+<loading-dots size="sm"></loading-dots>
+<loading-dots size="lg" label="Sending message"></loading-dots>
+```
+
+## <loading-spinner>
+
+Indeterminate circular loading spinner: a rotating arc over a faint track,
+in the style of a browser page-load indicator. Purely presentational and
+property-driven — show it while work is in flight and remove it when done.
+
+Exposes an accessible `role="status"` with `label` as its name, so assistive
+technology announces the loading state; the arc itself is decorative. Under
+`prefers-reduced-motion` it stops rotating and stays a static ring.
+
+Import: `import "@f-ewald/components/loading-spinner.js";`
+
+Properties: `size` (attribute `size`) : "sm" | "md" | "lg", default "md"; `label` (attribute `label`) : string, default "Loading"
+Events: none
+CSS custom properties: `--ui-border`, `--ui-line-height-glyph`, `--ui-primary`
+
+Example:
+```html
+<loading-spinner></loading-spinner>
+<loading-spinner size="sm"></loading-spinner>
+<loading-spinner size="lg" label="Loading results"></loading-spinner>
+```
+
 ## <map-circle>
 
 A plain circular map marker: a radial-gradient fill with a soft highlight
-and a translucent white outer ring, no point/tail (unlike `<map-pin>`) —
+and a solid white 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
@@ -1006,7 +1052,7 @@ the slot empty, and rasterize one marker per color for use as a map
 
 Import: `import "@f-ewald/components/map-circle.js";`
 
-Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 18; `ringWidth` (attribute `ring-width`) : number, default 4; `ringOpacity` (attribute `ring-opacity`) : number, default 0.6; `highlighted` (attribute `highlighted`) : boolean, default false
+Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 18; `ringWidth` (attribute `ring-width`) : number, default 2; `ringOpacity` (attribute `ring-opacity`) : number, default 1; `highlighted` (attribute `highlighted`) : boolean, default false
 Events: none
 CSS custom properties: `--ui-font`, `--ui-font-weight-bold`, `--ui-line-height-glyph`
 
@@ -1026,7 +1072,7 @@ positions it, e.g. via `new mapboxgl.Marker({ element: pinEl })`.
 
 Import: `import "@f-ewald/components/map-pin.js";`
 
-Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 32; `ringOpacity` (attribute `ring-opacity`) : number, default 0.6; `highlighted` (attribute `highlighted`) : boolean, default false
+Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 32; `ringOpacity` (attribute `ring-opacity`) : number, default 1; `highlighted` (attribute `highlighted`) : boolean, default false
 Events: none
 CSS custom properties: `--ui-font`, `--ui-font-weight-bold`, `--ui-line-height-glyph`
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@f-ewald/components",
   "private": false,
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "A collection of universally usable web components for various tasks.",
   "type": "module",
   "main": "dist/index.js",