@f-ewald/components 0.2.0 → 0.3.0

package/README.md

@@ -48,6 +48,8 @@ import "@f-ewald/components/roman-numeral.js";
 | `<copy-link-button>` | [docs/copy-link-button.md](./docs/copy-link-button.md) |
 | `<distance-value>` | [docs/distance-value.md](./docs/distance-value.md) |
 | `<distribution-chart>` | [docs/distribution-chart.md](./docs/distribution-chart.md) |
+| `<map-circle>` | [docs/map-circle.md](./docs/map-circle.md) |
+| `<map-pin>` | [docs/map-pin.md](./docs/map-pin.md) |
 | `<percent-bar-chart>` | [docs/percent-bar-chart.md](./docs/percent-bar-chart.md) |
 | `<price-history-chart>` | [docs/price-history-chart.md](./docs/price-history-chart.md) |
 | `<radio-cards>` | [docs/radio-cards.md](./docs/radio-cards.md) |

package/custom-elements.json

@@ -2488,6 +2488,22 @@
             "module": "./user-avatar.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "MapPin",
+          "declaration": {
+            "name": "MapPin",
+            "module": "./map-pin.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MapCircle",
+          "declaration": {
+            "name": "MapCircle",
+            "module": "./map-circle.js"
+          }
+        },
         {
           "kind": "js",
           "name": "RadioCards",
@@ -2562,6 +2578,245 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/map-circle.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A plain circular map marker: a light-to-dark gradient fill with a white\nouter ring, no point/tail (unlike `<map-pin>`) — for markers that don't\nneed to visually \"point\" at their exact coordinate. Purely a visual\nprimitive — it has no `mapbox-gl` (or any mapping library) dependency;\nthe consumer positions it, e.g. via `new mapboxgl.Marker({ element: el })`.",
+          "name": "MapCircle",
+          "slots": [
+            {
+              "description": "Optional badge content shown centered on the circle — a rank number, an emoji, a small icon.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"#4f46e5\"",
+              "description": "Fill color; the gradient's light (top) and dark (bottom) stops are derived from this.",
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number"
+              },
+              "default": "18",
+              "description": "Diameter, in CSS pixels.",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "ringWidth",
+              "type": {
+                "text": "number"
+              },
+              "default": "4",
+              "description": "White outer ring thickness, in the same viewBox units as `size` (scales with it).",
+              "attribute": "ring-width"
+            },
+            {
+              "kind": "field",
+              "name": "highlighted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Scales and glows the circle — a generic emphasis state (e.g. hover, selection).",
+              "attribute": "highlighted",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_gradId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`map-circle-grad-${gradientIdCounter++}`"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"#4f46e5\"",
+              "description": "Fill color; the gradient's light (top) and dark (bottom) stops are derived from this.",
+              "fieldName": "color"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number"
+              },
+              "default": "18",
+              "description": "Diameter, in CSS pixels.",
+              "fieldName": "size"
+            },
+            {
+              "name": "ring-width",
+              "type": {
+                "text": "number"
+              },
+              "default": "4",
+              "description": "White outer ring thickness, in the same viewBox units as `size` (scales with it).",
+              "fieldName": "ringWidth"
+            },
+            {
+              "name": "highlighted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Scales and glows the circle — a generic emphasis state (e.g. hover, selection).",
+              "fieldName": "highlighted"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "map-circle",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MapCircle",
+          "declaration": {
+            "name": "MapCircle",
+            "module": "src/map-circle.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "map-circle",
+          "declaration": {
+            "name": "MapCircle",
+            "module": "src/map-circle.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/map-pin.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A circular \"Apple Maps\"-style map pin: a light-to-dark gradient fill with\na slight point at the bottom. Purely a visual primitive — it has no\n`mapbox-gl` (or any mapping library) dependency; the consumer positions\nit, e.g. via `new mapboxgl.Marker({ element: pinEl })`.",
+          "name": "MapPin",
+          "slots": [
+            {
+              "description": "Badge content shown centered on the pin's circular head — a rank number, an emoji, a small icon.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"#4f46e5\"",
+              "description": "Fill color; the gradient's light (top) and dark (bottom) stops are derived from this.",
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number"
+              },
+              "default": "32",
+              "description": "Diameter of the circular head, in CSS pixels.",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "highlighted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Scales and glows the pin — a generic emphasis state (e.g. hover, selection).",
+              "attribute": "highlighted",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_gradId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`map-pin-grad-${gradientIdCounter++}`"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"#4f46e5\"",
+              "description": "Fill color; the gradient's light (top) and dark (bottom) stops are derived from this.",
+              "fieldName": "color"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number"
+              },
+              "default": "32",
+              "description": "Diameter of the circular head, in CSS pixels.",
+              "fieldName": "size"
+            },
+            {
+              "name": "highlighted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Scales and glows the pin — a generic emphasis state (e.g. hover, selection).",
+              "fieldName": "highlighted"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "map-pin",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MapPin",
+          "declaration": {
+            "name": "MapPin",
+            "module": "src/map-pin.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "map-pin",
+          "declaration": {
+            "name": "MapPin",
+            "module": "src/map-pin.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/percent-bar-chart.ts",
@@ -3475,7 +3730,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Button (or link styled as one) with an optional leading icon, in three\nvisual weights. Set `href` to render an `<a>` instead of a `<button>` —\nsame styling either way — for cross-page navigation that should look like\nan action button; a disabled/busy link stays a real `<a>` with\n`aria-disabled` + `pointer-events: none` rather than losing its href.\nPut the icon in the `icon` slot and the label in the default slot.",
+          "description": "Button (or link styled as one) with an optional leading icon, in three\nvisual weights. Set `href` to render an `<a>` instead of a `<button>` —\nsame styling either way — for cross-page navigation that should look like\nan action button; a disabled/busy link stays a real `<a>` with\n`aria-disabled` + `pointer-events: none` rather than losing its href.\nPut the icon in the `icon` slot and the label in the default slot.\n\nForm-associated (`type=\"submit\"`/`\"reset\"`): the actual `<button>` lives in\nthis element's shadow root, which native HTML form association does not\ncross into from an ancestor light-DOM `<form>`. `type=\"submit\"`/`\"reset\"`\nis instead wired through `ElementInternals.form` — the same mechanism\n`address-autocomplete` uses to associate with an ancestor form.",
           "name": "UiButton",
           "slots": [
             {
@@ -3488,6 +3743,20 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -3537,6 +3806,12 @@
               "default": "false",
               "description": "Shows a spinner in place of the icon slot and disables the control.",
               "attribute": "busy"
+            },
+            {
+              "kind": "method",
+              "name": "_onClick",
+              "privacy": "private",
+              "description": "Drives submit/reset on the ancestor form via ElementInternals, since a shadow-DOM button can't do it natively."
             }
           ],
           "attributes": [
@@ -3764,6 +4039,52 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/color.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "mixHex",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "base",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "weightPercent",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "Linearly interpolates `base` toward `target` by `weightPercent`% (0-100)\nin RGB space, returning a 6-digit hex string. Used to derive gradient\nlight/dark stops from a single base color — SVG presentation attributes\n(`stop-color`) can't consume `color-mix()`/CSS custom properties, so this\ncomputes plain hex instead (see CLAUDE.md's SVG token rule)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "mixHex",
+          "declaration": {
+            "name": "mixHex",
+            "module": "src/utils/color.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/utils/distance.ts",

package/dist/index.d.ts

@@ -14,6 +14,8 @@ export { WeightBarChart, type WeightBarItem } from "./weight-bar-chart.js";
 export { AddressAutocomplete, type AddressSuggestion, } from "./address-autocomplete.js";
 export { AutocompleteInput, type AutocompleteOption, } from "./autocomplete-input.js";
 export { UserAvatar } from "./user-avatar.js";
+export { MapPin } from "./map-pin.js";
+export { MapCircle } from "./map-circle.js";
 export { RadioCards, type RadioCardOption } from "./radio-cards.js";
 export { RadioPills, type RadioPillOption } from "./radio-pills.js";
 export { UiButton, type ButtonVariant } from "./ui-button.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,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,EACV,KAAK,YAAY,GAClB,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,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EACL,mBAAmB,EACnB,KAAK,iBAAiB,GACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,iBAAiB,EACjB,KAAK,kBAAkB,GACxB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAClD,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,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,EACV,KAAK,YAAY,GAClB,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,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EACL,mBAAmB,EACnB,KAAK,iBAAiB,GACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,iBAAiB,EACjB,KAAK,kBAAkB,GACxB,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,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAClD,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -14,6 +14,8 @@ export { WeightBarChart } from "./weight-bar-chart.js";
 export { AddressAutocomplete, } from "./address-autocomplete.js";
 export { AutocompleteInput, } from "./autocomplete-input.js";
 export { UserAvatar } from "./user-avatar.js";
+export { MapPin } from "./map-pin.js";
+export { MapCircle } from "./map-circle.js";
 export { RadioCards } from "./radio-cards.js";
 export { RadioPills } from "./radio-pills.js";
 export { UiButton } from "./ui-button.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,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,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAsB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAClD,cAAc,YAAY,CAAC","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.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 { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { tokens, tokenValues } 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,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,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAClD,cAAc,YAAY,CAAC","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.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 { tokens, tokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}

package/dist/map-circle.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from "lit";
+/**
+ * A plain circular map marker: a light-to-dark gradient fill with a 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 `new mapboxgl.Marker({ element: el })`.
+ *
+ * @element map-circle
+ * @slot - Optional badge content shown centered on the circle — a rank
+ *   number, an emoji, a small icon.
+ */
+export declare class MapCircle extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. */
+    color: string;
+    /** Diameter, in CSS pixels. */
+    size: number;
+    /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */
+    ringWidth: number;
+    /** Scales and glows the circle — a generic emphasis state (e.g. hover, selection). */
+    highlighted: boolean;
+    private readonly _gradId;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "map-circle": MapCircle;
+    }
+}
+//# sourceMappingURL=map-circle.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;GAUG;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"}

package/dist/map-circle.js

@@ -0,0 +1,108 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+import { mixHex } from "./utils/color.js";
+let gradientIdCounter = 0;
+/**
+ * A plain circular map marker: a light-to-dark gradient fill with a 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 `new mapboxgl.Marker({ element: el })`.
+ *
+ * @element map-circle
+ * @slot - Optional badge content shown centered on the circle — a rank
+ *   number, an emoji, a small icon.
+ */
+let MapCircle = class MapCircle extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. */
+        this.color = "#4f46e5";
+        /** Diameter, in CSS pixels. */
+        this.size = 18;
+        /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */
+        this.ringWidth = 4;
+        /** Scales and glows the circle — a generic emphasis state (e.g. hover, selection). */
+        this.highlighted = false;
+        this._gradId = `map-circle-grad-${gradientIdCounter++}`;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-block;
+        position: relative;
+        line-height: 0;
+      }
+      svg {
+        display: block;
+        transition: transform 120ms ease, filter 120ms ease;
+      }
+      :host([highlighted]) svg {
+        transform: scale(1.12);
+        filter: brightness(1.08) drop-shadow(0 0 5px rgb(0 0 0 / 0.35));
+      }
+      .content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #fff;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-weight: 700;
+        line-height: 1;
+        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
+        pointer-events: none;
+        white-space: nowrap;
+      }
+    `,
+    ]; }
+    render() {
+        const light = mixHex(this.color, "#ffffff", 30);
+        const dark = mixHex(this.color, "#000000", 30);
+        return html `
+      <svg
+        width=${this.size}
+        height=${this.size}
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <linearGradient id=${this._gradId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color=${light} />
+            <stop offset="100%" stop-color=${dark} />
+          </linearGradient>
+        </defs>
+        <circle cx="16" cy="16" r="13" fill="url(#${this._gradId})" stroke="#ffffff" stroke-width=${this.ringWidth} />
+      </svg>
+      <div class="content" style="font-size:${Math.round(this.size * 0.4)}px">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], MapCircle.prototype, "color", void 0);
+__decorate([
+    property({ type: Number })
+], MapCircle.prototype, "size", void 0);
+__decorate([
+    property({ type: Number, attribute: "ring-width" })
+], MapCircle.prototype, "ringWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MapCircle.prototype, "highlighted", void 0);
+MapCircle = __decorate([
+    customElement("map-circle")
+], MapCircle);
+export { MapCircle };
+//# sourceMappingURL=map-circle.js.map

package/dist/map-circle.js.map

@@ -0,0 +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;;;;;;;;;;GAUG;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 *\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"]}

package/dist/map-pin.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+/**
+ * A circular "Apple Maps"-style map pin: a light-to-dark gradient fill with
+ * a slight point at the bottom. Purely a visual primitive — it has no
+ * `mapbox-gl` (or any mapping library) dependency; the consumer positions
+ * it, e.g. via `new mapboxgl.Marker({ element: pinEl })`.
+ *
+ * @element map-pin
+ * @slot - Badge content shown centered on the pin's circular head — a rank
+ *   number, an emoji, a small icon.
+ */
+export declare class MapPin extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. */
+    color: string;
+    /** Diameter of the circular head, in CSS pixels. */
+    size: number;
+    /** Scales and glows the pin — a generic emphasis state (e.g. hover, selection). */
+    highlighted: boolean;
+    private readonly _gradId;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "map-pin": MapPin;
+    }
+}
+//# sourceMappingURL=map-pin.d.ts.map

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

@@ -0,0 +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"}

package/dist/map-pin.js

@@ -0,0 +1,111 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+import { mixHex } from "./utils/color.js";
+let gradientIdCounter = 0;
+/**
+ * A circular "Apple Maps"-style map pin: a light-to-dark gradient fill with
+ * a slight point at the bottom. Purely a visual primitive — it has no
+ * `mapbox-gl` (or any mapping library) dependency; the consumer positions
+ * it, e.g. via `new mapboxgl.Marker({ element: pinEl })`.
+ *
+ * @element map-pin
+ * @slot - Badge content shown centered on the pin's circular head — a rank
+ *   number, an emoji, a small icon.
+ */
+let MapPin = class MapPin extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. */
+        this.color = "#4f46e5";
+        /** Diameter of the circular head, in CSS pixels. */
+        this.size = 32;
+        /** Scales and glows the pin — a generic emphasis state (e.g. hover, selection). */
+        this.highlighted = false;
+        this._gradId = `map-pin-grad-${gradientIdCounter++}`;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-block;
+        position: relative;
+        line-height: 0;
+      }
+      svg {
+        display: block;
+        transition: transform 120ms ease, filter 120ms ease;
+      }
+      :host([highlighted]) svg {
+        transform: scale(1.12);
+        filter: brightness(1.08) drop-shadow(0 0 5px rgb(0 0 0 / 0.35));
+      }
+      .content {
+        position: absolute;
+        /* The path's circular head is centered at viewBox y=13 of 34 total
+           (13/34 ≈ 38%) — not the pin's full bounding box, which is pulled
+           down by the point below the circle. */
+        top: 38%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #fff;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-weight: 700;
+        line-height: 1;
+        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
+        pointer-events: none;
+        white-space: nowrap;
+      }
+    `,
+    ]; }
+    render() {
+        const light = mixHex(this.color, "#ffffff", 30);
+        const dark = mixHex(this.color, "#000000", 30);
+        const height = Math.round(this.size * (34 / 32));
+        return html `
+      <svg
+        width=${this.size}
+        height=${height}
+        viewBox="0 0 32 34"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <linearGradient id=${this._gradId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color=${light} />
+            <stop offset="100%" stop-color=${dark} />
+          </linearGradient>
+        </defs>
+        <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})"
+          stroke="#ffffff"
+          stroke-width="1.5"
+        />
+      </svg>
+      <div class="content" style="font-size:${Math.round(this.size * 0.4)}px">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], MapPin.prototype, "color", void 0);
+__decorate([
+    property({ type: Number })
+], MapPin.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MapPin.prototype, "highlighted", void 0);
+MapPin = __decorate([
+    customElement("map-pin")
+], MapPin);
+export { MapPin };
+//# sourceMappingURL=map-pin.js.map

package/dist/map-pin.js.map

@@ -0,0 +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"]}

package/dist/ui-button.d.ts

@@ -8,11 +8,19 @@ export type ButtonVariant = "primary" | "secondary" | "danger";
  * `aria-disabled` + `pointer-events: none` rather than losing its href.
  * Put the icon in the `icon` slot and the label in the default slot.
  *
+ * Form-associated (`type="submit"`/`"reset"`): the actual `<button>` lives in
+ * this element's shadow root, which native HTML form association does not
+ * cross into from an ancestor light-DOM `<form>`. `type="submit"`/`"reset"`
+ * is instead wired through `ElementInternals.form` — the same mechanism
+ * `address-autocomplete` uses to associate with an ancestor form.
+ *
  * @element ui-button
  * @slot icon - Optional leading icon (e.g. an inline SVG).
  * @slot - Button label.
  */
 export declare class UiButton extends LitElement {
+    #private;
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult[];
     /** Visual weight. */
     variant: ButtonVariant;
@@ -24,6 +32,8 @@ export declare class UiButton extends LitElement {
     disabled: boolean;
     /** Shows a spinner in place of the icon slot and disables the control. */
     busy: boolean;
+    /** Drives submit/reset on the ancestor form via ElementInternals, since a shadow-DOM button can't do it natively. */
+    private _onClick;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/ui-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-button.d.ts","sourceRoot":"","sources":["../src/ui-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE/D;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BA6DpB;IAEF,qBAAqB;IACT,OAAO,EAAE,aAAa,CAAa;IAC/C,oEAAoE;IACxD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC,wDAAwD;IAC5C,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC3D,wCAAwC;IACX,QAAQ,UAAS;IAC9C,0EAA0E;IAC7C,IAAI,UAAS;IAEjC,MAAM,yCAmBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"ui-button.d.ts","sourceRoot":"","sources":["../src/ui-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE/D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,QAAS,SAAQ,UAAU;;IACtC,MAAM,CAAC,cAAc,UAAQ;IAG7B,OAAgB,MAAM,4BA6DpB;IAEF,qBAAqB;IACT,OAAO,EAAE,aAAa,CAAa;IAC/C,oEAAoE;IACxD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC,wDAAwD;IAC5C,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC3D,wCAAwC;IACX,QAAQ,UAAS;IAC9C,0EAA0E;IAC7C,IAAI,UAAS;IAE1C,qHAAqH;IACrH,OAAO,CAAC,QAAQ;IAKP,MAAM,yCAmBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/ui-button.js

@@ -16,6 +16,12 @@ import { tokens } from "./tokens.js";
  * `aria-disabled` + `pointer-events: none` rather than losing its href.
  * Put the icon in the `icon` slot and the label in the default slot.
  *
+ * Form-associated (`type="submit"`/`"reset"`): the actual `<button>` lives in
+ * this element's shadow root, which native HTML form association does not
+ * cross into from an ancestor light-DOM `<form>`. `type="submit"`/`"reset"`
+ * is instead wired through `ElementInternals.form` — the same mechanism
+ * `address-autocomplete` uses to associate with an ancestor form.
+ *
  * @element ui-button
  * @slot icon - Optional leading icon (e.g. an inline SVG).
  * @slot - Button label.
@@ -23,6 +29,7 @@ import { tokens } from "./tokens.js";
 let UiButton = class UiButton extends LitElement {
     constructor() {
         super(...arguments);
+        this.#internals = this.attachInternals();
         /** Visual weight. */
         this.variant = "primary";
         /** Renders an `<a href="...">` instead of a `<button>` when set. */
@@ -34,6 +41,8 @@ let UiButton = class UiButton extends LitElement {
         /** Shows a spinner in place of the icon slot and disables the control. */
         this.busy = false;
     }
+    static { this.formAssociated = true; }
+    #internals;
     static { this.styles = [
         tokens,
         css `
@@ -96,6 +105,13 @@ let UiButton = class UiButton extends LitElement {
       }
     `,
     ]; }
+    /** Drives submit/reset on the ancestor form via ElementInternals, since a shadow-DOM button can't do it natively. */
+    _onClick() {
+        if (this.type === "submit")
+            this.#internals.form?.requestSubmit();
+        else if (this.type === "reset")
+            this.#internals.form?.reset();
+    }
     render() {
         const classes = `btn ${this.variant}`;
         const isDisabled = this.disabled || this.busy;
@@ -109,7 +125,7 @@ let UiButton = class UiButton extends LitElement {
       `;
         }
         return html `
-      <button class=${classes} type=${this.type} ?disabled=${isDisabled}>
+      <button class=${classes} type="button" ?disabled=${isDisabled} @click=${this._onClick}>
         <span class="spin" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>
         <slot name="icon" ?hidden=${this.busy}></slot>
         <slot></slot>

package/dist/ui-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-button.js","sourceRoot":"","sources":["../src/ui-button.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,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC;;;;;;;;;;;GAWG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAgEL,qBAAqB;QACT,YAAO,GAAkB,SAAS,CAAC;QAC/C,oEAAoE;QACxD,SAAI,GAAkB,IAAI,CAAC;QACvC,wDAAwD;QAC5C,SAAI,GAAkC,QAAQ,CAAC;QAC3D,wCAAwC;QACX,aAAQ,GAAG,KAAK,CAAC;QAC9C,0EAA0E;QAC7C,SAAI,GAAG,KAAK,CAAC;IAsB5C,CAAC;aA9FiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;KACF,AA7DqB,CA6DpB;IAaO,MAAM;QACb,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC;QAC9C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAA;mBACE,OAAO,SAAS,IAAI,CAAC,IAAI,kBAAkB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;uCACpD,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;sCAChC,IAAI,CAAC,IAAI;;;OAGxC,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAA;sBACO,OAAO,SAAS,IAAI,CAAC,IAAI,cAAc,UAAU;qCAClC,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;oCAChC,IAAI,CAAC,IAAI;;;KAGxC,CAAC;IACJ,CAAC;CACF,CAAA;AA9Ba;IAAX,QAAQ,EAAE;yCAAoC;AAEnC;IAAX,QAAQ,EAAE;sCAA4B;AAE3B;IAAX,QAAQ,EAAE;sCAAgD;AAE9B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCAAc;AAzE/B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA+FpB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconArrowPath } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"danger\";\n\n/**\n * Button (or link styled as one) with an optional leading icon, in three\n * visual weights. Set `href` to render an `<a>` instead of a `<button>` —\n * same styling either way — for cross-page navigation that should look like\n * an action button; a disabled/busy link stays a real `<a>` with\n * `aria-disabled` + `pointer-events: none` rather than losing its href.\n * Put the icon in the `icon` slot and the label in the default slot.\n *\n * @element ui-button\n * @slot icon - Optional leading icon (e.g. an inline SVG).\n * @slot - Button label.\n */\n@customElement(\"ui-button\")\nexport class UiButton extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.35rem;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 0.9rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        cursor: pointer;\n        border: 1px solid transparent;\n        text-decoration: none;\n        box-sizing: border-box;\n      }\n      .btn.primary {\n        background: var(--ui-primary, #4f46e5);\n        color: #fff;\n      }\n      .btn.primary:hover:not(:disabled) {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n      .btn.secondary {\n        background: none;\n        border-color: var(--ui-border, #e2e8f0);\n        color: var(--ui-text, #0f172a);\n      }\n      .btn.secondary:hover:not(:disabled) {\n        border-color: var(--ui-text-muted, #64748b);\n      }\n      .btn.danger {\n        background: var(--ui-danger, #dc2626);\n        color: #fff;\n      }\n      .btn.danger:hover:not(:disabled) {\n        background: var(--ui-danger-hover, #b91c1c);\n      }\n      .btn:disabled,\n      .btn[aria-disabled=\"true\"] {\n        opacity: 0.6;\n        cursor: default;\n        pointer-events: none;\n      }\n      .spin {\n        display: inline-flex;\n        animation: spin 0.8s linear infinite;\n      }\n      .spin[hidden] {\n        display: none;\n      }\n      @keyframes spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n    `,\n  ];\n\n  /** Visual weight. */\n  @property() variant: ButtonVariant = \"primary\";\n  /** Renders an `<a href=\"...\">` instead of a `<button>` when set. */\n  @property() href: string | null = null;\n  /** Native button `type`. Ignored when `href` is set. */\n  @property() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /** Disables the control and dims it. */\n  @property({ type: Boolean }) disabled = false;\n  /** Shows a spinner in place of the icon slot and disables the control. */\n  @property({ type: Boolean }) busy = false;\n\n  override render() {\n    const classes = `btn ${this.variant}`;\n    const isDisabled = this.disabled || this.busy;\n    if (this.href) {\n      return html`\n        <a class=${classes} href=${this.href} aria-disabled=${isDisabled ? \"true\" : \"false\"}>\n          <span class=\"spin\" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>\n          <slot name=\"icon\" ?hidden=${this.busy}></slot>\n          <slot></slot>\n        </a>\n      `;\n    }\n    return html`\n      <button class=${classes} type=${this.type} ?disabled=${isDisabled}>\n        <span class=\"spin\" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>\n        <slot name=\"icon\" ?hidden=${this.busy}></slot>\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ui-button\": UiButton;\n  }\n}\n"]}
+{"version":3,"file":"ui-button.js","sourceRoot":"","sources":["../src/ui-button.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,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,eAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAgEpC,qBAAqB;QACT,YAAO,GAAkB,SAAS,CAAC;QAC/C,oEAAoE;QACxD,SAAI,GAAkB,IAAI,CAAC;QACvC,wDAAwD;QAC5C,SAAI,GAAkC,QAAQ,CAAC;QAC3D,wCAAwC;QACX,aAAQ,GAAG,KAAK,CAAC;QAC9C,0EAA0E;QAC7C,SAAI,GAAG,KAAK,CAAC;IA4B5C,CAAC;aAvGQ,mBAAc,GAAG,IAAI,AAAP,CAAQ;IAE7B,UAAU,CAA0B;aACpB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;KACF,AA7DqB,CA6DpB;IAaF,qHAAqH;IAC7G,QAAQ;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;aAC7D,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAChE,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC;QAC9C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAA;mBACE,OAAO,SAAS,IAAI,CAAC,IAAI,kBAAkB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;uCACpD,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;sCAChC,IAAI,CAAC,IAAI;;;OAGxC,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAA;sBACO,OAAO,4BAA4B,UAAU,WAAW,IAAI,CAAC,QAAQ;qCACtD,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;oCAChC,IAAI,CAAC,IAAI;;;KAGxC,CAAC;IACJ,CAAC;CACF,CAAA;AApCa;IAAX,QAAQ,EAAE;yCAAoC;AAEnC;IAAX,QAAQ,EAAE;sCAA4B;AAE3B;IAAX,QAAQ,EAAE;sCAAgD;AAE9B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCAAc;AA5E/B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAwGpB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconArrowPath } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"danger\";\n\n/**\n * Button (or link styled as one) with an optional leading icon, in three\n * visual weights. Set `href` to render an `<a>` instead of a `<button>` —\n * same styling either way — for cross-page navigation that should look like\n * an action button; a disabled/busy link stays a real `<a>` with\n * `aria-disabled` + `pointer-events: none` rather than losing its href.\n * Put the icon in the `icon` slot and the label in the default slot.\n *\n * Form-associated (`type=\"submit\"`/`\"reset\"`): the actual `<button>` lives in\n * this element's shadow root, which native HTML form association does not\n * cross into from an ancestor light-DOM `<form>`. `type=\"submit\"`/`\"reset\"`\n * is instead wired through `ElementInternals.form` — the same mechanism\n * `address-autocomplete` uses to associate with an ancestor form.\n *\n * @element ui-button\n * @slot icon - Optional leading icon (e.g. an inline SVG).\n * @slot - Button label.\n */\n@customElement(\"ui-button\")\nexport class UiButton extends LitElement {\n  static formAssociated = true;\n\n  #internals = this.attachInternals();\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.35rem;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 0.9rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        cursor: pointer;\n        border: 1px solid transparent;\n        text-decoration: none;\n        box-sizing: border-box;\n      }\n      .btn.primary {\n        background: var(--ui-primary, #4f46e5);\n        color: #fff;\n      }\n      .btn.primary:hover:not(:disabled) {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n      .btn.secondary {\n        background: none;\n        border-color: var(--ui-border, #e2e8f0);\n        color: var(--ui-text, #0f172a);\n      }\n      .btn.secondary:hover:not(:disabled) {\n        border-color: var(--ui-text-muted, #64748b);\n      }\n      .btn.danger {\n        background: var(--ui-danger, #dc2626);\n        color: #fff;\n      }\n      .btn.danger:hover:not(:disabled) {\n        background: var(--ui-danger-hover, #b91c1c);\n      }\n      .btn:disabled,\n      .btn[aria-disabled=\"true\"] {\n        opacity: 0.6;\n        cursor: default;\n        pointer-events: none;\n      }\n      .spin {\n        display: inline-flex;\n        animation: spin 0.8s linear infinite;\n      }\n      .spin[hidden] {\n        display: none;\n      }\n      @keyframes spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n    `,\n  ];\n\n  /** Visual weight. */\n  @property() variant: ButtonVariant = \"primary\";\n  /** Renders an `<a href=\"...\">` instead of a `<button>` when set. */\n  @property() href: string | null = null;\n  /** Native button `type`. Ignored when `href` is set. */\n  @property() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /** Disables the control and dims it. */\n  @property({ type: Boolean }) disabled = false;\n  /** Shows a spinner in place of the icon slot and disables the control. */\n  @property({ type: Boolean }) busy = false;\n\n  /** Drives submit/reset on the ancestor form via ElementInternals, since a shadow-DOM button can't do it natively. */\n  private _onClick() {\n    if (this.type === \"submit\") this.#internals.form?.requestSubmit();\n    else if (this.type === \"reset\") this.#internals.form?.reset();\n  }\n\n  override render() {\n    const classes = `btn ${this.variant}`;\n    const isDisabled = this.disabled || this.busy;\n    if (this.href) {\n      return html`\n        <a class=${classes} href=${this.href} aria-disabled=${isDisabled ? \"true\" : \"false\"}>\n          <span class=\"spin\" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>\n          <slot name=\"icon\" ?hidden=${this.busy}></slot>\n          <slot></slot>\n        </a>\n      `;\n    }\n    return html`\n      <button class=${classes} type=\"button\" ?disabled=${isDisabled} @click=${this._onClick}>\n        <span class=\"spin\" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>\n        <slot name=\"icon\" ?hidden=${this.busy}></slot>\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ui-button\": UiButton;\n  }\n}\n"]}

package/dist/utils/color.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Linearly interpolates `base` toward `target` by `weightPercent`% (0-100)
+ * in RGB space, returning a 6-digit hex string. Used to derive gradient
+ * light/dark stops from a single base color — SVG presentation attributes
+ * (`stop-color`) can't consume `color-mix()`/CSS custom properties, so this
+ * computes plain hex instead (see CLAUDE.md's SVG token rule).
+ */
+export declare function mixHex(base: string, target: string, weightPercent: number): string;
+//# sourceMappingURL=color.d.ts.map

package/dist/utils/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAQA;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAOlF"}

package/dist/utils/color.js

@@ -0,0 +1,23 @@
+/** Parses a 3- or 6-digit hex color string into 0-255 RGB channels. */
+function parseHex(hex) {
+    const h = hex.replace("#", "");
+    const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+    const num = parseInt(full, 16);
+    return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };
+}
+/**
+ * Linearly interpolates `base` toward `target` by `weightPercent`% (0-100)
+ * in RGB space, returning a 6-digit hex string. Used to derive gradient
+ * light/dark stops from a single base color — SVG presentation attributes
+ * (`stop-color`) can't consume `color-mix()`/CSS custom properties, so this
+ * computes plain hex instead (see CLAUDE.md's SVG token rule).
+ */
+export function mixHex(base, target, weightPercent) {
+    const b = parseHex(base);
+    const t = parseHex(target);
+    const w = Math.min(100, Math.max(0, weightPercent)) / 100;
+    const mix = (a, c) => Math.round(a + (c - a) * w);
+    const channels = [mix(b.r, t.r), mix(b.g, t.g), mix(b.b, t.b)];
+    return `#${channels.map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
+//# sourceMappingURL=color.js.map

package/dist/utils/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,SAAS,QAAQ,CAAC,GAAW;IAC3B,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAC/B,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzE,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAC/B,OAAO,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;AACrE,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,MAAM,CAAC,IAAY,EAAE,MAAc,EAAE,aAAqB;IACxE,MAAM,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzB,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC3B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,GAAG,GAAG,CAAC;IAC1D,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAClE,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/D,OAAO,IAAI,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;AAC7E,CAAC","sourcesContent":["/** Parses a 3- or 6-digit hex color string into 0-255 RGB channels. */\nfunction parseHex(hex: string): { r: number; g: number; b: number } {\n  const h = hex.replace(\"#\", \"\");\n  const full = h.length === 3 ? h.split(\"\").map((c) => c + c).join(\"\") : h;\n  const num = parseInt(full, 16);\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\n/**\n * Linearly interpolates `base` toward `target` by `weightPercent`% (0-100)\n * in RGB space, returning a 6-digit hex string. Used to derive gradient\n * light/dark stops from a single base color — SVG presentation attributes\n * (`stop-color`) can't consume `color-mix()`/CSS custom properties, so this\n * computes plain hex instead (see CLAUDE.md's SVG token rule).\n */\nexport function mixHex(base: string, target: string, weightPercent: number): string {\n  const b = parseHex(base);\n  const t = parseHex(target);\n  const w = Math.min(100, Math.max(0, weightPercent)) / 100;\n  const mix = (a: number, c: number) => Math.round(a + (c - a) * w);\n  const channels = [mix(b.r, t.r), mix(b.g, t.g), mix(b.b, t.b)];\n  return `#${channels.map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n"]}

package/docs/map-circle.md

@@ -0,0 +1,45 @@
+# `<map-circle>`
+
+A plain circular map marker: a light-to-dark gradient fill with a 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 `new mapboxgl.Marker({ element: el })`.
+
+## Install
+
+```js
+import "@f-ewald/components/map-circle.js";
+```
+
+## Usage
+
+```html
+<map-circle color="#6b7280"></map-circle>
+<map-circle color="#1a73e8" size="24" ring-width="5" highlighted>1</map-circle>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `color` | `string` | `"#4f46e5"` | Fill color; the gradient's light (top) and dark (bottom) 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). |
+| `highlighted` | `highlighted` | `boolean` | `false` | Scales and glows the circle — a generic emphasis state (e.g. hover, selection). |
+
+## Events
+
+_None._
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| `(default)` | Optional badge content shown centered on the circle — a rank number, an emoji, a small icon. |
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-font` |

package/docs/map-pin.md

@@ -0,0 +1,43 @@
+# `<map-pin>`
+
+A circular "Apple Maps"-style map pin: a light-to-dark gradient fill with
+a slight point at the bottom. Purely a visual primitive — it has no
+`mapbox-gl` (or any mapping library) dependency; the consumer positions
+it, e.g. via `new mapboxgl.Marker({ element: pinEl })`.
+
+## Install
+
+```js
+import "@f-ewald/components/map-pin.js";
+```
+
+## Usage
+
+```html
+<map-pin color="#1a73e8" size="30">3</map-pin>
+<map-pin color="#22c55e" size="26" highlighted>🏠</map-pin>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `color` | `string` | `"#4f46e5"` | Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. |
+| `size` | `size` | `number` | `32` | Diameter of the circular head, in CSS pixels. |
+| `highlighted` | `highlighted` | `boolean` | `false` | Scales and glows the pin — a generic emphasis state (e.g. hover, selection). |
+
+## Events
+
+_None._
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| `(default)` | Badge content shown centered on the pin's circular head — a rank number, an emoji, a small icon. |
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-font` |

package/docs/ui-button.md

@@ -7,6 +7,12 @@ an action button; a disabled/busy link stays a real `<a>` with
 `aria-disabled` + `pointer-events: none` rather than losing its href.
 Put the icon in the `icon` slot and the label in the default slot.
 
+Form-associated (`type="submit"`/`"reset"`): the actual `<button>` lives in
+this element's shadow root, which native HTML form association does not
+cross into from an ancestor light-DOM `<form>`. `type="submit"`/`"reset"`
+is instead wired through `ElementInternals.form` — the same mechanism
+`address-autocomplete` uses to associate with an ancestor form.
+
 ## Install
 
 ```js

package/llms.txt

@@ -188,6 +188,45 @@ Example:
 </script>
 ```
 
+## <map-circle>
+
+A plain circular map marker: a light-to-dark gradient fill with a 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 `new mapboxgl.Marker({ element: el })`.
+
+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; `highlighted` (attribute `highlighted`) : boolean, default false
+Events: none
+CSS custom properties: `--ui-font`
+
+Example:
+```html
+<map-circle color="#6b7280"></map-circle>
+<map-circle color="#1a73e8" size="24" ring-width="5" highlighted>1</map-circle>
+```
+
+## <map-pin>
+
+A circular "Apple Maps"-style map pin: a light-to-dark gradient fill with
+a slight point at the bottom. Purely a visual primitive — it has no
+`mapbox-gl` (or any mapping library) dependency; the consumer positions
+it, e.g. via `new mapboxgl.Marker({ element: pinEl })`.
+
+Import: `import "@f-ewald/components/map-pin.js";`
+
+Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 32; `highlighted` (attribute `highlighted`) : boolean, default false
+Events: none
+CSS custom properties: `--ui-font`
+
+Example:
+```html
+<map-pin color="#1a73e8" size="30">3</map-pin>
+<map-pin color="#22c55e" size="26" highlighted>🏠</map-pin>
+```
+
 ## <percent-bar-chart>
 
 Horizontal bar chart for labeled percentage rows, using D3's linear scale.
@@ -398,6 +437,12 @@ an action button; a disabled/busy link stays a real `<a>` with
 `aria-disabled` + `pointer-events: none` rather than losing its href.
 Put the icon in the `icon` slot and the label in the default slot.
 
+Form-associated (`type="submit"`/`"reset"`): the actual `<button>` lives in
+this element's shadow root, which native HTML form association does not
+cross into from an ancestor light-DOM `<form>`. `type="submit"`/`"reset"`
+is instead wired through `ElementInternals.form` — the same mechanism
+`address-autocomplete` uses to associate with an ancestor form.
+
 Import: `import "@f-ewald/components/ui-button.js";`
 
 Properties: `variant` (attribute `variant`) : ButtonVariant, default "primary"; `href` (attribute `href`) : string | null, default null; `type` (attribute `type`) : "button" | "submit" | "reset", default "button"; `disabled` (attribute `disabled`) : boolean, default false; `busy` (attribute `busy`) : boolean, default false

package/package.json

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