@f-ewald/components 1.13.0 → 1.14.1

package/custom-elements.json

@@ -8581,7 +8581,7 @@
       "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 })`.\nIt can also replace the former `<map-point>` dense-layer primitive: use\n`size=\"14\" ring-width=\"3\"`, leave the slot empty, and rasterize one marker\nper color for use as a map `icon-image`.",
+          "description": "A plain circular map marker: a radial-gradient fill with a soft highlight\nand a solid white outer ring, no point/tail (unlike `<map-pin>`) —\nfor markers that don't need to visually \"point\" at their exact\ncoordinate. Purely a visual primitive — it has no `mapbox-gl` (or any\nmapping library) dependency; the consumer positions it, e.g. via\n`new mapboxgl.Marker({ element: el })`. It can also replace the former\n`<map-point>` dense-layer primitive: use `size=\"14\" ring-width=\"3\"`, leave\nthe slot empty, and rasterize one marker per color for use as a map\n`icon-image`.",
           "name": "MapCircle",
           "slots": [
             {
@@ -8597,7 +8597,7 @@
                 "text": "string"
               },
               "default": "\"#4f46e5\"",
-              "description": "Fill color; the gradient's light (top) and dark (bottom) stops are derived from this.",
+              "description": "Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this.",
               "attribute": "color"
             },
             {
@@ -8616,10 +8616,20 @@
               "type": {
                 "text": "number"
               },
-              "default": "4",
+              "default": "2",
               "description": "White outer ring thickness, in the same viewBox units as `size` (scales with it).",
               "attribute": "ring-width"
             },
+            {
+              "kind": "field",
+              "name": "ringOpacity",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring).",
+              "attribute": "ring-opacity"
+            },
             {
               "kind": "field",
               "name": "highlighted",
@@ -8646,7 +8656,7 @@
                 "text": "string"
               },
               "default": "\"#4f46e5\"",
-              "description": "Fill color; the gradient's light (top) and dark (bottom) stops are derived from this.",
+              "description": "Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this.",
               "fieldName": "color"
             },
             {
@@ -8663,10 +8673,19 @@
               "type": {
                 "text": "number"
               },
-              "default": "4",
+              "default": "2",
               "description": "White outer ring thickness, in the same viewBox units as `size` (scales with it).",
               "fieldName": "ringWidth"
             },
+            {
+              "name": "ring-opacity",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring).",
+              "fieldName": "ringOpacity"
+            },
             {
               "name": "highlighted",
               "type": {
@@ -8710,7 +8729,7 @@
       "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 })`.",
+          "description": "A circular \"Apple Maps\"-style map pin: a radial-gradient fill with a soft\nhighlight and a slight point at the bottom. Purely a visual primitive —\nit has no `mapbox-gl` (or any mapping library) dependency; the consumer\npositions it, e.g. via `new mapboxgl.Marker({ element: pinEl })`.",
           "name": "MapPin",
           "slots": [
             {
@@ -8726,7 +8745,7 @@
                 "text": "string"
               },
               "default": "\"#4f46e5\"",
-              "description": "Fill color; the gradient's light (top) and dark (bottom) stops are derived from this.",
+              "description": "Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this.",
               "attribute": "color"
             },
             {
@@ -8739,6 +8758,16 @@
               "description": "Diameter of the circular head, in CSS pixels.",
               "attribute": "size"
             },
+            {
+              "kind": "field",
+              "name": "ringOpacity",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring).",
+              "attribute": "ring-opacity"
+            },
             {
               "kind": "field",
               "name": "highlighted",
@@ -8765,7 +8794,7 @@
                 "text": "string"
               },
               "default": "\"#4f46e5\"",
-              "description": "Fill color; the gradient's light (top) and dark (bottom) stops are derived from this.",
+              "description": "Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this.",
               "fieldName": "color"
             },
             {
@@ -8777,6 +8806,15 @@
               "description": "Diameter of the circular head, in CSS pixels.",
               "fieldName": "size"
             },
+            {
+              "name": "ring-opacity",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring).",
+              "fieldName": "ringOpacity"
+            },
             {
               "name": "highlighted",
               "type": {

package/dist/map-circle.d.ts

@@ -1,13 +1,14 @@
 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 })`.
- * It can also replace the former `<map-point>` dense-layer primitive: use
- * `size="14" ring-width="3"`, leave the slot empty, and rasterize one marker
- * per color for use as a map `icon-image`.
+ * A plain circular map marker: a radial-gradient fill with a soft highlight
+ * and a solid white outer ring, no point/tail (unlike `<map-pin>`) —
+ * for markers that don't need to visually "point" at their exact
+ * coordinate. Purely a visual primitive — it has no `mapbox-gl` (or any
+ * mapping library) dependency; the consumer positions it, e.g. via
+ * `new mapboxgl.Marker({ element: el })`. It can also replace the former
+ * `<map-point>` dense-layer primitive: use `size="14" ring-width="3"`, leave
+ * the slot empty, and rasterize one marker per color for use as a map
+ * `icon-image`.
  *
  * @element map-circle
  * @slot - Optional badge content shown centered on the circle — a rank
@@ -15,12 +16,14 @@ import { LitElement } from "lit";
  */
 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. */
+    /** Fill color; the gradient's light (highlight) and dark (edge) 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;
+    /** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */
+    ringOpacity: number;
     /** Scales and glows the circle — a generic emphasis state (e.g. hover, selection). */
     highlighted: boolean;
     private readonly _gradId;

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

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

package/dist/map-circle.js

@@ -10,14 +10,15 @@ 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 })`.
- * It can also replace the former `<map-point>` dense-layer primitive: use
- * `size="14" ring-width="3"`, leave the slot empty, and rasterize one marker
- * per color for use as a map `icon-image`.
+ * A plain circular map marker: a radial-gradient fill with a soft highlight
+ * and a solid white outer ring, no point/tail (unlike `<map-pin>`) —
+ * for markers that don't need to visually "point" at their exact
+ * coordinate. Purely a visual primitive — it has no `mapbox-gl` (or any
+ * mapping library) dependency; the consumer positions it, e.g. via
+ * `new mapboxgl.Marker({ element: el })`. It can also replace the former
+ * `<map-point>` dense-layer primitive: use `size="14" ring-width="3"`, leave
+ * the slot empty, and rasterize one marker per color for use as a map
+ * `icon-image`.
  *
  * @element map-circle
  * @slot - Optional badge content shown centered on the circle — a rank
@@ -26,12 +27,14 @@ let gradientIdCounter = 0;
 let MapCircle = class MapCircle extends LitElement {
     constructor() {
         super(...arguments);
-        /** Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. */
+        /** Fill color; the gradient's light (highlight) and dark (edge) 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;
+        this.ringWidth = 2;
+        /** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */
+        this.ringOpacity = 1;
         /** Scales and glows the circle — a generic emphasis state (e.g. hover, selection). */
         this.highlighted = false;
         this._gradId = `map-circle-grad-${gradientIdCounter++}`;
@@ -46,6 +49,7 @@ let MapCircle = class MapCircle extends LitElement {
       }
       svg {
         display: block;
+        filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));
         transition: transform 120ms ease, filter 120ms ease;
       }
       :host([highlighted]) svg {
@@ -84,6 +88,13 @@ let MapCircle = class MapCircle extends LitElement {
     render() {
         const light = mixHex(this.color, "#ffffff", 30);
         const dark = mixHex(this.color, "#000000", 30);
+        // A fixed outer radius keeps the marker footprint constant as `ring-width`
+        // varies; the ring sits entirely outside the fill (the fill meets the
+        // ring's inner edge) so the stroke never straddles the fill edge — which
+        // is what used to read as two rings.
+        const outerR = 15;
+        const fillR = outerR - this.ringWidth;
+        const ringR = outerR - this.ringWidth / 2;
         return html `
       <svg
         aria-hidden="true"
@@ -94,12 +105,27 @@ let MapCircle = class MapCircle extends LitElement {
         xmlns="http://www.w3.org/2000/svg"
       >
         <defs>
-          <linearGradient id=${this._gradId} x1="0" y1="0" x2="0" y2="1">
+          <radialGradient id=${this._gradId} cx="35%" cy="30%" r="75%">
             <stop offset="0%" stop-color=${light} />
             <stop offset="100%" stop-color=${dark} />
-          </linearGradient>
+          </radialGradient>
         </defs>
-        <circle cx="16" cy="16" r="13" fill="url(#${this._gradId})" stroke="#ffffff" stroke-width=${this.ringWidth} />
+        <circle
+          class="fill"
+          cx="16"
+          cy="16"
+          r=${fillR}
+          fill="url(#${this._gradId})"
+        />
+        <circle
+          class="ring"
+          cx="16"
+          cy="16"
+          r=${ringR}
+          fill="none"
+          stroke="rgb(255 255 255 / ${this.ringOpacity})"
+          stroke-width=${this.ringWidth}
+        />
       </svg>
       <div class="content" style="font-size:${Math.round(this.size * 0.4)}px">
         <slot></slot>
@@ -116,6 +142,9 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: "ring-width" })
 ], MapCircle.prototype, "ringWidth", void 0);
+__decorate([
+    property({ type: Number, attribute: "ring-opacity" })
+], MapCircle.prototype, "ringOpacity", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], MapCircle.prototype, "highlighted", void 0);

package/dist/map-circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"map-circle.js","sourceRoot":"","sources":["../src/map-circle.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAE1B;;;;;;;;;;;;;GAaG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QA+CL,4FAA4F;QAChF,UAAK,GAAG,SAAS,CAAC;QAC9B,+BAA+B;QACH,SAAI,GAAG,EAAE,CAAC;QACtC,wFAAwF;QACnC,cAAS,GAAG,CAAC,CAAC;QACnE,sFAAsF;QAC1C,gBAAW,GAAG,KAAK,CAAC;QAE/C,YAAO,GAAG,mBAAmB,iBAAiB,EAAE,EAAE,CAAC;IA2BtE,CAAC;aAlFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;KACF,AA5CqB,CA4CpB;IAaO,MAAM;QACb,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAC/C,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,IAAI;iBACR,IAAI,CAAC,IAAI;;;;;;+BAMK,IAAI,CAAC,OAAO;2CACA,KAAK;6CACH,IAAI;;;oDAGG,IAAI,CAAC,OAAO,oCAAoC,IAAI,CAAC,SAAS;;8CAEpE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AAnCa;IAAX,QAAQ,EAAE;wCAAmB;AAEF;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAW;AAEe;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CAAe;AAEvB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAqB;AAtDrD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAmFrB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\nimport { mixHex } from \"./utils/color.js\";\n\nlet gradientIdCounter = 0;\n\n/**\n * A plain circular map marker: a light-to-dark gradient fill with a white\n * outer ring, no point/tail (unlike `<map-pin>`) — for markers that don't\n * need to visually \"point\" at their exact coordinate. Purely a visual\n * primitive — it has no `mapbox-gl` (or any mapping library) dependency;\n * the consumer positions it, e.g. via `new mapboxgl.Marker({ element: el })`.\n * It can also replace the former `<map-point>` dense-layer primitive: use\n * `size=\"14\" ring-width=\"3\"`, leave the slot empty, and rasterize one marker\n * per color for use as a map `icon-image`.\n *\n * @element map-circle\n * @slot - Optional badge content shown centered on the circle — a rank\n *   number, an emoji, a small icon.\n */\n@customElement(\"map-circle\")\nexport class MapCircle extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        line-height: 0;\n      }\n      svg {\n        display: block;\n        transition: transform 120ms ease, filter 120ms ease;\n      }\n      :host([highlighted]) svg {\n        transform: scale(1.12);\n        filter: brightness(1.08) drop-shadow(0 0 5px rgb(0 0 0 / 0.35));\n      }\n      .content {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        color: #fff;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-weight: var(--ui-font-weight-bold, 700);\n        line-height: var(--ui-line-height-glyph, 1);\n        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);\n        pointer-events: none;\n        white-space: nowrap;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        svg {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  /** Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. */\n  @property() color = \"#4f46e5\";\n  /** Diameter, in CSS pixels. */\n  @property({ type: Number }) size = 18;\n  /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */\n  @property({ type: Number, attribute: \"ring-width\" }) ringWidth = 4;\n  /** Scales and glows the circle — a generic emphasis state (e.g. hover, selection). */\n  @property({ type: Boolean, reflect: true }) highlighted = false;\n\n  private readonly _gradId = `map-circle-grad-${gradientIdCounter++}`;\n\n  override render() {\n    const light = mixHex(this.color, \"#ffffff\", 30);\n    const dark = mixHex(this.color, \"#000000\", 30);\n    return html`\n      <svg\n        aria-hidden=\"true\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <defs>\n          <linearGradient id=${this._gradId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stop-color=${light} />\n            <stop offset=\"100%\" stop-color=${dark} />\n          </linearGradient>\n        </defs>\n        <circle cx=\"16\" cy=\"16\" r=\"13\" fill=\"url(#${this._gradId})\" stroke=\"#ffffff\" stroke-width=${this.ringWidth} />\n      </svg>\n      <div class=\"content\" style=\"font-size:${Math.round(this.size * 0.4)}px\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"map-circle\": MapCircle;\n  }\n}\n"]}
+{"version":3,"file":"map-circle.js","sourceRoot":"","sources":["../src/map-circle.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAgDL,gGAAgG;QACpF,UAAK,GAAG,SAAS,CAAC;QAC9B,+BAA+B;QACH,SAAI,GAAG,EAAE,CAAC;QACtC,wFAAwF;QACnC,cAAS,GAAG,CAAC,CAAC;QACnE,+GAA+G;QACxD,gBAAW,GAAG,CAAC,CAAC;QACvE,sFAAsF;QAC1C,gBAAW,GAAG,KAAK,CAAC;QAE/C,YAAO,GAAG,mBAAmB,iBAAiB,EAAE,EAAE,CAAC;IAiDtE,CAAC;aA3GiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CF;KACF,AA7CqB,CA6CpB;IAeO,MAAM;QACb,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAC/C,2EAA2E;QAC3E,sEAAsE;QACtE,yEAAyE;QACzE,qCAAqC;QACrC,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,MAAM,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;QACtC,MAAM,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QAC1C,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,IAAI;iBACR,IAAI,CAAC,IAAI;;;;;;+BAMK,IAAI,CAAC,OAAO;2CACA,KAAK;6CACH,IAAI;;;;;;;cAOnC,KAAK;uBACI,IAAI,CAAC,OAAO;;;;;;cAMrB,KAAK;;sCAEmB,IAAI,CAAC,WAAW;yBAC7B,IAAI,CAAC,SAAS;;;8CAGO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AA3Da;IAAX,QAAQ,EAAE;wCAAmB;AAEF;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAW;AAEe;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CAAe;AAEZ;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CAAiB;AAE3B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAqB;AAzDrD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA4GrB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\nimport { mixHex } from \"./utils/color.js\";\n\nlet gradientIdCounter = 0;\n\n/**\n * A plain circular map marker: a radial-gradient fill with a soft highlight\n * and a solid white outer ring, no point/tail (unlike `<map-pin>`) —\n * for markers that don't need to visually \"point\" at their exact\n * coordinate. Purely a visual primitive — it has no `mapbox-gl` (or any\n * mapping library) dependency; the consumer positions it, e.g. via\n * `new mapboxgl.Marker({ element: el })`. It can also replace the former\n * `<map-point>` dense-layer primitive: use `size=\"14\" ring-width=\"3\"`, leave\n * the slot empty, and rasterize one marker per color for use as a map\n * `icon-image`.\n *\n * @element map-circle\n * @slot - Optional badge content shown centered on the circle — a rank\n *   number, an emoji, a small icon.\n */\n@customElement(\"map-circle\")\nexport class MapCircle extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        line-height: 0;\n      }\n      svg {\n        display: block;\n        filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));\n        transition: transform 120ms ease, filter 120ms ease;\n      }\n      :host([highlighted]) svg {\n        transform: scale(1.12);\n        filter: brightness(1.08) drop-shadow(0 0 5px rgb(0 0 0 / 0.35));\n      }\n      .content {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        color: #fff;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-weight: var(--ui-font-weight-bold, 700);\n        line-height: var(--ui-line-height-glyph, 1);\n        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);\n        pointer-events: none;\n        white-space: nowrap;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        svg {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  /** Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this. */\n  @property() color = \"#4f46e5\";\n  /** Diameter, in CSS pixels. */\n  @property({ type: Number }) size = 18;\n  /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */\n  @property({ type: Number, attribute: \"ring-width\" }) ringWidth = 2;\n  /** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */\n  @property({ type: Number, attribute: \"ring-opacity\" }) ringOpacity = 1;\n  /** Scales and glows the circle — a generic emphasis state (e.g. hover, selection). */\n  @property({ type: Boolean, reflect: true }) highlighted = false;\n\n  private readonly _gradId = `map-circle-grad-${gradientIdCounter++}`;\n\n  override render() {\n    const light = mixHex(this.color, \"#ffffff\", 30);\n    const dark = mixHex(this.color, \"#000000\", 30);\n    // A fixed outer radius keeps the marker footprint constant as `ring-width`\n    // varies; the ring sits entirely outside the fill (the fill meets the\n    // ring's inner edge) so the stroke never straddles the fill edge — which\n    // is what used to read as two rings.\n    const outerR = 15;\n    const fillR = outerR - this.ringWidth;\n    const ringR = outerR - this.ringWidth / 2;\n    return html`\n      <svg\n        aria-hidden=\"true\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <defs>\n          <radialGradient id=${this._gradId} cx=\"35%\" cy=\"30%\" r=\"75%\">\n            <stop offset=\"0%\" stop-color=${light} />\n            <stop offset=\"100%\" stop-color=${dark} />\n          </radialGradient>\n        </defs>\n        <circle\n          class=\"fill\"\n          cx=\"16\"\n          cy=\"16\"\n          r=${fillR}\n          fill=\"url(#${this._gradId})\"\n        />\n        <circle\n          class=\"ring\"\n          cx=\"16\"\n          cy=\"16\"\n          r=${ringR}\n          fill=\"none\"\n          stroke=\"rgb(255 255 255 / ${this.ringOpacity})\"\n          stroke-width=${this.ringWidth}\n        />\n      </svg>\n      <div class=\"content\" style=\"font-size:${Math.round(this.size * 0.4)}px\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"map-circle\": MapCircle;\n  }\n}\n"]}

package/dist/map-pin.d.ts

@@ -1,9 +1,9 @@
 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 })`.
+ * A circular "Apple Maps"-style map pin: a radial-gradient fill with a soft
+ * highlight and 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
@@ -11,10 +11,12 @@ import { LitElement } from "lit";
  */
 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. */
+    /** Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this. */
     color: string;
     /** Diameter of the circular head, in CSS pixels. */
     size: number;
+    /** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */
+    ringOpacity: number;
     /** Scales and glows the pin — a generic emphasis state (e.g. hover, selection). */
     highlighted: boolean;
     private readonly _gradId;

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

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

package/dist/map-pin.js

@@ -10,10 +10,10 @@ 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 })`.
+ * A circular "Apple Maps"-style map pin: a radial-gradient fill with a soft
+ * highlight and 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
@@ -22,10 +22,12 @@ let gradientIdCounter = 0;
 let MapPin = class MapPin extends LitElement {
     constructor() {
         super(...arguments);
-        /** Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. */
+        /** Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this. */
         this.color = "#4f46e5";
         /** Diameter of the circular head, in CSS pixels. */
         this.size = 32;
+        /** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */
+        this.ringOpacity = 1;
         /** Scales and glows the pin — a generic emphasis state (e.g. hover, selection). */
         this.highlighted = false;
         this._gradId = `map-pin-grad-${gradientIdCounter++}`;
@@ -40,6 +42,7 @@ let MapPin = class MapPin extends LitElement {
       }
       svg {
         display: block;
+        filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));
         transition: transform 120ms ease, filter 120ms ease;
       }
       :host([highlighted]) svg {
@@ -82,6 +85,13 @@ let MapPin = class MapPin extends LitElement {
         const light = mixHex(this.color, "#ffffff", 30);
         const dark = mixHex(this.color, "#000000", 30);
         const height = Math.round(this.size * (34 / 32));
+        const shape = "M16 30 C10 24 4 19.5 4 13 A12 12 0 1 1 28 13 C28 19.5 22 24 16 30 Z";
+        const ringWidth = 2;
+        // Inset the fill so its head edge meets the ring's inner edge instead of the
+        // ring straddling the fill (which reads as two rings): the head arc has
+        // radius 12, so scale the fill to (12 - ringWidth / 2) / 12 about the head
+        // center (16, 13). The ring is the same outline drawn behind, stroke only.
+        const fillScale = (12 - ringWidth / 2) / 12;
         return html `
       <svg
         aria-hidden="true"
@@ -92,16 +102,23 @@ let MapPin = class MapPin extends LitElement {
         xmlns="http://www.w3.org/2000/svg"
       >
         <defs>
-          <linearGradient id=${this._gradId} x1="0" y1="0" x2="0" y2="1">
+          <radialGradient id=${this._gradId} gradientUnits="userSpaceOnUse" cx="12" cy="9" r="18">
             <stop offset="0%" stop-color=${light} />
             <stop offset="100%" stop-color=${dark} />
-          </linearGradient>
+          </radialGradient>
         </defs>
         <path
-          d="M16 30 C10 24 4 19.5 4 13 A12 12 0 1 1 28 13 C28 19.5 22 24 16 30 Z"
+          class="ring"
+          d=${shape}
+          fill="none"
+          stroke="rgb(255 255 255 / ${this.ringOpacity})"
+          stroke-width=${ringWidth}
+        />
+        <path
+          class="fill"
+          d=${shape}
           fill="url(#${this._gradId})"
-          stroke="#ffffff"
-          stroke-width="1.5"
+          transform="translate(16 13) scale(${fillScale}) translate(-16 -13)"
         />
       </svg>
       <div class="content" style="font-size:${Math.round(this.size * 0.4)}px">
@@ -116,6 +133,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], MapPin.prototype, "size", void 0);
+__decorate([
+    property({ type: Number, attribute: "ring-opacity" })
+], MapPin.prototype, "ringOpacity", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], MapPin.prototype, "highlighted", void 0);

package/dist/map-pin.js.map

@@ -1 +1 @@
-{"version":3,"file":"map-pin.js","sourceRoot":"","sources":["../src/map-pin.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAE1B;;;;;;;;;GASG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAkDL,4FAA4F;QAChF,UAAK,GAAG,SAAS,CAAC;QAC9B,oDAAoD;QACxB,SAAI,GAAG,EAAE,CAAC;QACtC,mFAAmF;QACvC,gBAAW,GAAG,KAAK,CAAC;QAE/C,YAAO,GAAG,gBAAgB,iBAAiB,EAAE,EAAE,CAAC;IAiCnE,CAAC;aAzFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CF;KACF,AA/CqB,CA+CpB;IAWO,MAAM;QACb,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACjD,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,IAAI;iBACR,MAAM;;;;;;+BAMQ,IAAI,CAAC,OAAO;2CACA,KAAK;6CACH,IAAI;;;;;uBAK1B,IAAI,CAAC,OAAO;;;;;8CAKW,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AAvCa;IAAX,QAAQ,EAAE;qCAAmB;AAEF;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAW;AAEM;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAqB;AAvDrD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA0FlB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\nimport { mixHex } from \"./utils/color.js\";\n\nlet gradientIdCounter = 0;\n\n/**\n * A circular \"Apple Maps\"-style map pin: a light-to-dark gradient fill with\n * a slight point at the bottom. Purely a visual primitive — it has no\n * `mapbox-gl` (or any mapping library) dependency; the consumer positions\n * it, e.g. via `new mapboxgl.Marker({ element: pinEl })`.\n *\n * @element map-pin\n * @slot - Badge content shown centered on the pin's circular head — a rank\n *   number, an emoji, a small icon.\n */\n@customElement(\"map-pin\")\nexport class MapPin extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        line-height: 0;\n      }\n      svg {\n        display: block;\n        transition: transform 120ms ease, filter 120ms ease;\n      }\n      :host([highlighted]) svg {\n        transform: scale(1.12);\n        filter: brightness(1.08) drop-shadow(0 0 5px rgb(0 0 0 / 0.35));\n      }\n      .content {\n        position: absolute;\n        /* The path's circular head is centered at viewBox y=13 of 34 total\n           (13/34 ≈ 38%) — not the pin's full bounding box, which is pulled\n           down by the point below the circle. */\n        top: 38%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        color: #fff;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-weight: var(--ui-font-weight-bold, 700);\n        line-height: var(--ui-line-height-glyph, 1);\n        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);\n        pointer-events: none;\n        white-space: nowrap;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        svg {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  /** Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. */\n  @property() color = \"#4f46e5\";\n  /** Diameter of the circular head, in CSS pixels. */\n  @property({ type: Number }) size = 32;\n  /** Scales and glows the pin — a generic emphasis state (e.g. hover, selection). */\n  @property({ type: Boolean, reflect: true }) highlighted = false;\n\n  private readonly _gradId = `map-pin-grad-${gradientIdCounter++}`;\n\n  override render() {\n    const light = mixHex(this.color, \"#ffffff\", 30);\n    const dark = mixHex(this.color, \"#000000\", 30);\n    const height = Math.round(this.size * (34 / 32));\n    return html`\n      <svg\n        aria-hidden=\"true\"\n        width=${this.size}\n        height=${height}\n        viewBox=\"0 0 32 34\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <defs>\n          <linearGradient id=${this._gradId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stop-color=${light} />\n            <stop offset=\"100%\" stop-color=${dark} />\n          </linearGradient>\n        </defs>\n        <path\n          d=\"M16 30 C10 24 4 19.5 4 13 A12 12 0 1 1 28 13 C28 19.5 22 24 16 30 Z\"\n          fill=\"url(#${this._gradId})\"\n          stroke=\"#ffffff\"\n          stroke-width=\"1.5\"\n        />\n      </svg>\n      <div class=\"content\" style=\"font-size:${Math.round(this.size * 0.4)}px\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"map-pin\": MapPin;\n  }\n}\n"]}
+{"version":3,"file":"map-pin.js","sourceRoot":"","sources":["../src/map-pin.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAE1B;;;;;;;;;GASG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAmDL,gGAAgG;QACpF,UAAK,GAAG,SAAS,CAAC;QAC9B,oDAAoD;QACxB,SAAI,GAAG,EAAE,CAAC;QACtC,+GAA+G;QACxD,gBAAW,GAAG,CAAC,CAAC;QACvE,mFAAmF;QACvC,gBAAW,GAAG,KAAK,CAAC;QAE/C,YAAO,GAAG,gBAAgB,iBAAiB,EAAE,EAAE,CAAC;IA+CnE,CAAC;aA1GiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6CF;KACF,AAhDqB,CAgDpB;IAaO,MAAM;QACb,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACjD,MAAM,KAAK,GAAG,qEAAqE,CAAC;QACpF,MAAM,SAAS,GAAG,CAAC,CAAC;QACpB,6EAA6E;QAC7E,wEAAwE;QACxE,2EAA2E;QAC3E,2EAA2E;QAC3E,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,SAAS,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,IAAI;iBACR,MAAM;;;;;;+BAMQ,IAAI,CAAC,OAAO;2CACA,KAAK;6CACH,IAAI;;;;;cAKnC,KAAK;;sCAEmB,IAAI,CAAC,WAAW;yBAC7B,SAAS;;;;cAIpB,KAAK;uBACI,IAAI,CAAC,OAAO;8CACW,SAAS;;;8CAGT,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AAvDa;IAAX,QAAQ,EAAE;qCAAmB;AAEF;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAW;AAEiB;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CAAiB;AAE3B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAqB;AA1DrD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA2GlB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\nimport { mixHex } from \"./utils/color.js\";\n\nlet gradientIdCounter = 0;\n\n/**\n * A circular \"Apple Maps\"-style map pin: a radial-gradient fill with a soft\n * highlight and a slight point at the bottom. Purely a visual primitive —\n * it has no `mapbox-gl` (or any mapping library) dependency; the consumer\n * positions it, e.g. via `new mapboxgl.Marker({ element: pinEl })`.\n *\n * @element map-pin\n * @slot - Badge content shown centered on the pin's circular head — a rank\n *   number, an emoji, a small icon.\n */\n@customElement(\"map-pin\")\nexport class MapPin extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        line-height: 0;\n      }\n      svg {\n        display: block;\n        filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));\n        transition: transform 120ms ease, filter 120ms ease;\n      }\n      :host([highlighted]) svg {\n        transform: scale(1.12);\n        filter: brightness(1.08) drop-shadow(0 0 5px rgb(0 0 0 / 0.35));\n      }\n      .content {\n        position: absolute;\n        /* The path's circular head is centered at viewBox y=13 of 34 total\n           (13/34 ≈ 38%) — not the pin's full bounding box, which is pulled\n           down by the point below the circle. */\n        top: 38%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        color: #fff;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-weight: var(--ui-font-weight-bold, 700);\n        line-height: var(--ui-line-height-glyph, 1);\n        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);\n        pointer-events: none;\n        white-space: nowrap;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        svg {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  /** Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this. */\n  @property() color = \"#4f46e5\";\n  /** Diameter of the circular head, in CSS pixels. */\n  @property({ type: Number }) size = 32;\n  /** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */\n  @property({ type: Number, attribute: \"ring-opacity\" }) ringOpacity = 1;\n  /** Scales and glows the pin — a generic emphasis state (e.g. hover, selection). */\n  @property({ type: Boolean, reflect: true }) highlighted = false;\n\n  private readonly _gradId = `map-pin-grad-${gradientIdCounter++}`;\n\n  override render() {\n    const light = mixHex(this.color, \"#ffffff\", 30);\n    const dark = mixHex(this.color, \"#000000\", 30);\n    const height = Math.round(this.size * (34 / 32));\n    const shape = \"M16 30 C10 24 4 19.5 4 13 A12 12 0 1 1 28 13 C28 19.5 22 24 16 30 Z\";\n    const ringWidth = 2;\n    // Inset the fill so its head edge meets the ring's inner edge instead of the\n    // ring straddling the fill (which reads as two rings): the head arc has\n    // radius 12, so scale the fill to (12 - ringWidth / 2) / 12 about the head\n    // center (16, 13). The ring is the same outline drawn behind, stroke only.\n    const fillScale = (12 - ringWidth / 2) / 12;\n    return html`\n      <svg\n        aria-hidden=\"true\"\n        width=${this.size}\n        height=${height}\n        viewBox=\"0 0 32 34\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <defs>\n          <radialGradient id=${this._gradId} gradientUnits=\"userSpaceOnUse\" cx=\"12\" cy=\"9\" r=\"18\">\n            <stop offset=\"0%\" stop-color=${light} />\n            <stop offset=\"100%\" stop-color=${dark} />\n          </radialGradient>\n        </defs>\n        <path\n          class=\"ring\"\n          d=${shape}\n          fill=\"none\"\n          stroke=\"rgb(255 255 255 / ${this.ringOpacity})\"\n          stroke-width=${ringWidth}\n        />\n        <path\n          class=\"fill\"\n          d=${shape}\n          fill=\"url(#${this._gradId})\"\n          transform=\"translate(16 13) scale(${fillScale}) translate(-16 -13)\"\n        />\n      </svg>\n      <div class=\"content\" style=\"font-size:${Math.round(this.size * 0.4)}px\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"map-pin\": MapPin;\n  }\n}\n"]}

package/docs/map-circle.md

@@ -1,13 +1,14 @@
 # `<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 })`.
-It can also replace the former `<map-point>` dense-layer primitive: use
-`size="14" ring-width="3"`, leave the slot empty, and rasterize one marker
-per color for use as a map `icon-image`.
+A plain circular map marker: a radial-gradient fill with a soft highlight
+and a solid white outer ring, no point/tail (unlike `<map-pin>`) —
+for markers that don't need to visually "point" at their exact
+coordinate. Purely a visual primitive — it has no `mapbox-gl` (or any
+mapping library) dependency; the consumer positions it, e.g. via
+`new mapboxgl.Marker({ element: el })`. It can also replace the former
+`<map-point>` dense-layer primitive: use `size="14" ring-width="3"`, leave
+the slot empty, and rasterize one marker per color for use as a map
+`icon-image`.
 
 ## Install
 
@@ -27,9 +28,10 @@ import "@f-ewald/components/map-circle.js";
 
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
-| `color` | `color` | `string` | `"#4f46e5"` | Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. |
+| `color` | `color` | `string` | `"#4f46e5"` | Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this. |
 | `size` | `size` | `number` | `18` | Diameter, in CSS pixels. |
-| `ringWidth` | `ring-width` | `number` | `4` | White outer ring thickness, in the same viewBox units as `size` (scales with it). |
+| `ringWidth` | `ring-width` | `number` | `2` | White outer ring thickness, in the same viewBox units as `size` (scales with it). |
+| `ringOpacity` | `ring-opacity` | `number` | `1` | Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). |
 | `highlighted` | `highlighted` | `boolean` | `false` | Scales and glows the circle — a generic emphasis state (e.g. hover, selection). |
 
 ## Events

package/docs/map-pin.md

@@ -1,9 +1,9 @@
 # `<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 })`.
+A circular "Apple Maps"-style map pin: a radial-gradient fill with a soft
+highlight and 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
 
@@ -22,8 +22,9 @@ import "@f-ewald/components/map-pin.js";
 
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
-| `color` | `color` | `string` | `"#4f46e5"` | Fill color; the gradient's light (top) and dark (bottom) stops are derived from this. |
+| `color` | `color` | `string` | `"#4f46e5"` | Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this. |
 | `size` | `size` | `number` | `32` | Diameter of the circular head, in CSS pixels. |
+| `ringOpacity` | `ring-opacity` | `number` | `1` | Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). |
 | `highlighted` | `highlighted` | `boolean` | `false` | Scales and glows the pin — a generic emphasis state (e.g. hover, selection). |
 
 ## Events

package/llms.txt

@@ -994,18 +994,19 @@ Example:
 
 ## <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 })`.
-It can also replace the former `<map-point>` dense-layer primitive: use
-`size="14" ring-width="3"`, leave the slot empty, and rasterize one marker
-per color for use as a map `icon-image`.
+A plain circular map marker: a radial-gradient fill with a soft highlight
+and a solid white outer ring, no point/tail (unlike `<map-pin>`) —
+for markers that don't need to visually "point" at their exact
+coordinate. Purely a visual primitive — it has no `mapbox-gl` (or any
+mapping library) dependency; the consumer positions it, e.g. via
+`new mapboxgl.Marker({ element: el })`. It can also replace the former
+`<map-point>` dense-layer primitive: use `size="14" ring-width="3"`, leave
+the slot empty, and rasterize one marker per color for use as a map
+`icon-image`.
 
 Import: `import "@f-ewald/components/map-circle.js";`
 
-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
+Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 18; `ringWidth` (attribute `ring-width`) : number, default 2; `ringOpacity` (attribute `ring-opacity`) : number, default 1; `highlighted` (attribute `highlighted`) : boolean, default false
 Events: none
 CSS custom properties: `--ui-font`, `--ui-font-weight-bold`, `--ui-line-height-glyph`
 
@@ -1018,14 +1019,14 @@ Example:
 
 ## <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 })`.
+A circular "Apple Maps"-style map pin: a radial-gradient fill with a soft
+highlight and 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
+Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 32; `ringOpacity` (attribute `ring-opacity`) : number, default 1; `highlighted` (attribute `highlighted`) : boolean, default false
 Events: none
 CSS custom properties: `--ui-font`, `--ui-font-weight-bold`, `--ui-line-height-glyph`
 

package/package.json

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