@f-ewald/components 0.2.1 → 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",
@@ -3784,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/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/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.

package/package.json

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