@f-ewald/components 1.14.0 → 1.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +11 -11
- package/dist/map-circle.d.ts +2 -2
- package/dist/map-circle.d.ts.map +1 -1
- package/dist/map-circle.js +20 -5
- package/dist/map-circle.js.map +1 -1
- package/dist/map-pin.d.ts +1 -1
- package/dist/map-pin.d.ts.map +1 -1
- package/dist/map-pin.js +19 -5
- package/dist/map-pin.js.map +1 -1
- package/docs/map-circle.md +3 -3
- package/docs/map-pin.md +1 -1
- package/llms.txt +3 -3
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -8581,7 +8581,7 @@
|
|
|
8581
8581
|
"declarations": [
|
|
8582
8582
|
{
|
|
8583
8583
|
"kind": "class",
|
|
8584
|
-
"description": "A plain circular map marker: a radial-gradient fill with a soft highlight\nand a
|
|
8584
|
+
"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`.",
|
|
8585
8585
|
"name": "MapCircle",
|
|
8586
8586
|
"slots": [
|
|
8587
8587
|
{
|
|
@@ -8616,7 +8616,7 @@
|
|
|
8616
8616
|
"type": {
|
|
8617
8617
|
"text": "number"
|
|
8618
8618
|
},
|
|
8619
|
-
"default": "
|
|
8619
|
+
"default": "2",
|
|
8620
8620
|
"description": "White outer ring thickness, in the same viewBox units as `size` (scales with it).",
|
|
8621
8621
|
"attribute": "ring-width"
|
|
8622
8622
|
},
|
|
@@ -8626,8 +8626,8 @@
|
|
|
8626
8626
|
"type": {
|
|
8627
8627
|
"text": "number"
|
|
8628
8628
|
},
|
|
8629
|
-
"default": "
|
|
8630
|
-
"description": "Outer ring opacity, 0-1 (Apple Maps-style
|
|
8629
|
+
"default": "1",
|
|
8630
|
+
"description": "Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring).",
|
|
8631
8631
|
"attribute": "ring-opacity"
|
|
8632
8632
|
},
|
|
8633
8633
|
{
|
|
@@ -8673,7 +8673,7 @@
|
|
|
8673
8673
|
"type": {
|
|
8674
8674
|
"text": "number"
|
|
8675
8675
|
},
|
|
8676
|
-
"default": "
|
|
8676
|
+
"default": "2",
|
|
8677
8677
|
"description": "White outer ring thickness, in the same viewBox units as `size` (scales with it).",
|
|
8678
8678
|
"fieldName": "ringWidth"
|
|
8679
8679
|
},
|
|
@@ -8682,8 +8682,8 @@
|
|
|
8682
8682
|
"type": {
|
|
8683
8683
|
"text": "number"
|
|
8684
8684
|
},
|
|
8685
|
-
"default": "
|
|
8686
|
-
"description": "Outer ring opacity, 0-1 (Apple Maps-style
|
|
8685
|
+
"default": "1",
|
|
8686
|
+
"description": "Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring).",
|
|
8687
8687
|
"fieldName": "ringOpacity"
|
|
8688
8688
|
},
|
|
8689
8689
|
{
|
|
@@ -8764,8 +8764,8 @@
|
|
|
8764
8764
|
"type": {
|
|
8765
8765
|
"text": "number"
|
|
8766
8766
|
},
|
|
8767
|
-
"default": "
|
|
8768
|
-
"description": "Outer ring opacity, 0-1 (Apple Maps-style
|
|
8767
|
+
"default": "1",
|
|
8768
|
+
"description": "Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring).",
|
|
8769
8769
|
"attribute": "ring-opacity"
|
|
8770
8770
|
},
|
|
8771
8771
|
{
|
|
@@ -8811,8 +8811,8 @@
|
|
|
8811
8811
|
"type": {
|
|
8812
8812
|
"text": "number"
|
|
8813
8813
|
},
|
|
8814
|
-
"default": "
|
|
8815
|
-
"description": "Outer ring opacity, 0-1 (Apple Maps-style
|
|
8814
|
+
"default": "1",
|
|
8815
|
+
"description": "Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring).",
|
|
8816
8816
|
"fieldName": "ringOpacity"
|
|
8817
8817
|
},
|
|
8818
8818
|
{
|
package/dist/map-circle.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { LitElement } from "lit";
|
|
2
2
|
/**
|
|
3
3
|
* A plain circular map marker: a radial-gradient fill with a soft highlight
|
|
4
|
-
* and a
|
|
4
|
+
* and a solid white outer ring, no point/tail (unlike `<map-pin>`) —
|
|
5
5
|
* for markers that don't need to visually "point" at their exact
|
|
6
6
|
* coordinate. Purely a visual primitive — it has no `mapbox-gl` (or any
|
|
7
7
|
* mapping library) dependency; the consumer positions it, e.g. via
|
|
@@ -22,7 +22,7 @@ export declare class MapCircle extends LitElement {
|
|
|
22
22
|
size: number;
|
|
23
23
|
/** White outer ring thickness, in the same viewBox units as `size` (scales with it). */
|
|
24
24
|
ringWidth: number;
|
|
25
|
-
/** Outer ring opacity, 0-1 (Apple Maps-style
|
|
25
|
+
/** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */
|
|
26
26
|
ringOpacity: number;
|
|
27
27
|
/** Scales and glows the circle — a generic emphasis state (e.g. hover, selection). */
|
|
28
28
|
highlighted: boolean;
|
package/dist/map-circle.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"map-circle.d.ts","sourceRoot":"","sources":["../src/map-circle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C;;;;;;;;;;;;;;GAcG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA6CpB;IAEF,gGAAgG;IACpF,KAAK,SAAa;IAC9B,+BAA+B;IACH,IAAI,SAAM;IACtC,wFAAwF;IACnC,SAAS,SAAK;IACnE
|
|
1
|
+
{"version":3,"file":"map-circle.d.ts","sourceRoot":"","sources":["../src/map-circle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C;;;;;;;;;;;;;;GAcG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA6CpB;IAEF,gGAAgG;IACpF,KAAK,SAAa;IAC9B,+BAA+B;IACH,IAAI,SAAM;IACtC,wFAAwF;IACnC,SAAS,SAAK;IACnE,+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
CHANGED
|
@@ -11,7 +11,7 @@ import { mixHex } from "./utils/color.js";
|
|
|
11
11
|
let gradientIdCounter = 0;
|
|
12
12
|
/**
|
|
13
13
|
* A plain circular map marker: a radial-gradient fill with a soft highlight
|
|
14
|
-
* and a
|
|
14
|
+
* and a solid white outer ring, no point/tail (unlike `<map-pin>`) —
|
|
15
15
|
* for markers that don't need to visually "point" at their exact
|
|
16
16
|
* coordinate. Purely a visual primitive — it has no `mapbox-gl` (or any
|
|
17
17
|
* mapping library) dependency; the consumer positions it, e.g. via
|
|
@@ -32,9 +32,9 @@ let MapCircle = class MapCircle extends LitElement {
|
|
|
32
32
|
/** Diameter, in CSS pixels. */
|
|
33
33
|
this.size = 18;
|
|
34
34
|
/** White outer ring thickness, in the same viewBox units as `size` (scales with it). */
|
|
35
|
-
this.ringWidth =
|
|
36
|
-
/** Outer ring opacity, 0-1 (Apple Maps-style
|
|
37
|
-
this.ringOpacity =
|
|
35
|
+
this.ringWidth = 2;
|
|
36
|
+
/** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */
|
|
37
|
+
this.ringOpacity = 1;
|
|
38
38
|
/** Scales and glows the circle — a generic emphasis state (e.g. hover, selection). */
|
|
39
39
|
this.highlighted = false;
|
|
40
40
|
this._gradId = `map-circle-grad-${gradientIdCounter++}`;
|
|
@@ -88,6 +88,13 @@ let MapCircle = class MapCircle extends LitElement {
|
|
|
88
88
|
render() {
|
|
89
89
|
const light = mixHex(this.color, "#ffffff", 30);
|
|
90
90
|
const dark = mixHex(this.color, "#000000", 30);
|
|
91
|
+
// A fixed outer radius keeps the marker footprint constant as `ring-width`
|
|
92
|
+
// varies; the ring sits entirely outside the fill (the fill meets the
|
|
93
|
+
// ring's inner edge) so the stroke never straddles the fill edge — which
|
|
94
|
+
// is what used to read as two rings.
|
|
95
|
+
const outerR = 15;
|
|
96
|
+
const fillR = outerR - this.ringWidth;
|
|
97
|
+
const ringR = outerR - this.ringWidth / 2;
|
|
91
98
|
return html `
|
|
92
99
|
<svg
|
|
93
100
|
aria-hidden="true"
|
|
@@ -104,10 +111,18 @@ let MapCircle = class MapCircle extends LitElement {
|
|
|
104
111
|
</radialGradient>
|
|
105
112
|
</defs>
|
|
106
113
|
<circle
|
|
114
|
+
class="fill"
|
|
107
115
|
cx="16"
|
|
108
116
|
cy="16"
|
|
109
|
-
r
|
|
117
|
+
r=${fillR}
|
|
110
118
|
fill="url(#${this._gradId})"
|
|
119
|
+
/>
|
|
120
|
+
<circle
|
|
121
|
+
class="ring"
|
|
122
|
+
cx="16"
|
|
123
|
+
cy="16"
|
|
124
|
+
r=${ringR}
|
|
125
|
+
fill="none"
|
|
111
126
|
stroke="rgb(255 255 255 / ${this.ringOpacity})"
|
|
112
127
|
stroke-width=${this.ringWidth}
|
|
113
128
|
/>
|
package/dist/map-circle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"map-circle.js","sourceRoot":"","sources":["../src/map-circle.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAgDL,gGAAgG;QACpF,UAAK,GAAG,SAAS,CAAC;QAC9B,+BAA+B;QACH,SAAI,GAAG,EAAE,CAAC;QACtC,wFAAwF;QACnC,cAAS,GAAG,CAAC,CAAC;QACnE
|
|
1
|
+
{"version":3,"file":"map-circle.js","sourceRoot":"","sources":["../src/map-circle.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAgDL,gGAAgG;QACpF,UAAK,GAAG,SAAS,CAAC;QAC9B,+BAA+B;QACH,SAAI,GAAG,EAAE,CAAC;QACtC,wFAAwF;QACnC,cAAS,GAAG,CAAC,CAAC;QACnE,+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
CHANGED
|
@@ -15,7 +15,7 @@ export declare class MapPin extends LitElement {
|
|
|
15
15
|
color: string;
|
|
16
16
|
/** Diameter of the circular head, in CSS pixels. */
|
|
17
17
|
size: number;
|
|
18
|
-
/** Outer ring opacity, 0-1 (Apple Maps-style
|
|
18
|
+
/** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */
|
|
19
19
|
ringOpacity: number;
|
|
20
20
|
/** Scales and glows the pin — a generic emphasis state (e.g. hover, selection). */
|
|
21
21
|
highlighted: boolean;
|
package/dist/map-pin.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"map-pin.d.ts","sourceRoot":"","sources":["../src/map-pin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C;;;;;;;;;GASG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAgDpB;IAEF,gGAAgG;IACpF,KAAK,SAAa;IAC9B,oDAAoD;IACxB,IAAI,SAAM;IACtC
|
|
1
|
+
{"version":3,"file":"map-pin.d.ts","sourceRoot":"","sources":["../src/map-pin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C;;;;;;;;;GASG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAgDpB;IAEF,gGAAgG;IACpF,KAAK,SAAa;IAC9B,oDAAoD;IACxB,IAAI,SAAM;IACtC,+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
CHANGED
|
@@ -26,8 +26,8 @@ let MapPin = class MapPin extends LitElement {
|
|
|
26
26
|
this.color = "#4f46e5";
|
|
27
27
|
/** Diameter of the circular head, in CSS pixels. */
|
|
28
28
|
this.size = 32;
|
|
29
|
-
/** Outer ring opacity, 0-1 (Apple Maps-style
|
|
30
|
-
this.ringOpacity =
|
|
29
|
+
/** Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). */
|
|
30
|
+
this.ringOpacity = 1;
|
|
31
31
|
/** Scales and glows the pin — a generic emphasis state (e.g. hover, selection). */
|
|
32
32
|
this.highlighted = false;
|
|
33
33
|
this._gradId = `map-pin-grad-${gradientIdCounter++}`;
|
|
@@ -85,6 +85,13 @@ let MapPin = class MapPin extends LitElement {
|
|
|
85
85
|
const light = mixHex(this.color, "#ffffff", 30);
|
|
86
86
|
const dark = mixHex(this.color, "#000000", 30);
|
|
87
87
|
const height = Math.round(this.size * (34 / 32));
|
|
88
|
+
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";
|
|
89
|
+
const ringWidth = 2;
|
|
90
|
+
// Inset the fill so its head edge meets the ring's inner edge instead of the
|
|
91
|
+
// ring straddling the fill (which reads as two rings): the head arc has
|
|
92
|
+
// radius 12, so scale the fill to (12 - ringWidth / 2) / 12 about the head
|
|
93
|
+
// center (16, 13). The ring is the same outline drawn behind, stroke only.
|
|
94
|
+
const fillScale = (12 - ringWidth / 2) / 12;
|
|
88
95
|
return html `
|
|
89
96
|
<svg
|
|
90
97
|
aria-hidden="true"
|
|
@@ -101,10 +108,17 @@ let MapPin = class MapPin extends LitElement {
|
|
|
101
108
|
</radialGradient>
|
|
102
109
|
</defs>
|
|
103
110
|
<path
|
|
104
|
-
|
|
105
|
-
|
|
111
|
+
class="ring"
|
|
112
|
+
d=${shape}
|
|
113
|
+
fill="none"
|
|
106
114
|
stroke="rgb(255 255 255 / ${this.ringOpacity})"
|
|
107
|
-
stroke-width
|
|
115
|
+
stroke-width=${ringWidth}
|
|
116
|
+
/>
|
|
117
|
+
<path
|
|
118
|
+
class="fill"
|
|
119
|
+
d=${shape}
|
|
120
|
+
fill="url(#${this._gradId})"
|
|
121
|
+
transform="translate(16 13) scale(${fillScale}) translate(-16 -13)"
|
|
108
122
|
/>
|
|
109
123
|
</svg>
|
|
110
124
|
<div class="content" style="font-size:${Math.round(this.size * 0.4)}px">
|
package/dist/map-pin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"map-pin.js","sourceRoot":"","sources":["../src/map-pin.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAE1B;;;;;;;;;GASG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAmDL,gGAAgG;QACpF,UAAK,GAAG,SAAS,CAAC;QAC9B,oDAAoD;QACxB,SAAI,GAAG,EAAE,CAAC;QACtC
|
|
1
|
+
{"version":3,"file":"map-pin.js","sourceRoot":"","sources":["../src/map-pin.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAE1B;;;;;;;;;GASG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAmDL,gGAAgG;QACpF,UAAK,GAAG,SAAS,CAAC;QAC9B,oDAAoD;QACxB,SAAI,GAAG,EAAE,CAAC;QACtC,+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
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# `<map-circle>`
|
|
2
2
|
|
|
3
3
|
A plain circular map marker: a radial-gradient fill with a soft highlight
|
|
4
|
-
and a
|
|
4
|
+
and a solid white outer ring, no point/tail (unlike `<map-pin>`) —
|
|
5
5
|
for markers that don't need to visually "point" at their exact
|
|
6
6
|
coordinate. Purely a visual primitive — it has no `mapbox-gl` (or any
|
|
7
7
|
mapping library) dependency; the consumer positions it, e.g. via
|
|
@@ -30,8 +30,8 @@ import "@f-ewald/components/map-circle.js";
|
|
|
30
30
|
| --- | --- | --- | --- | --- |
|
|
31
31
|
| `color` | `color` | `string` | `"#4f46e5"` | Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this. |
|
|
32
32
|
| `size` | `size` | `number` | `18` | Diameter, in CSS pixels. |
|
|
33
|
-
| `ringWidth` | `ring-width` | `number` | `
|
|
34
|
-
| `ringOpacity` | `ring-opacity` | `number` | `
|
|
33
|
+
| `ringWidth` | `ring-width` | `number` | `2` | White outer ring thickness, in the same viewBox units as `size` (scales with it). |
|
|
34
|
+
| `ringOpacity` | `ring-opacity` | `number` | `1` | Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). |
|
|
35
35
|
| `highlighted` | `highlighted` | `boolean` | `false` | Scales and glows the circle — a generic emphasis state (e.g. hover, selection). |
|
|
36
36
|
|
|
37
37
|
## Events
|
package/docs/map-pin.md
CHANGED
|
@@ -24,7 +24,7 @@ import "@f-ewald/components/map-pin.js";
|
|
|
24
24
|
| --- | --- | --- | --- | --- |
|
|
25
25
|
| `color` | `color` | `string` | `"#4f46e5"` | Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this. |
|
|
26
26
|
| `size` | `size` | `number` | `32` | Diameter of the circular head, in CSS pixels. |
|
|
27
|
-
| `ringOpacity` | `ring-opacity` | `number` | `
|
|
27
|
+
| `ringOpacity` | `ring-opacity` | `number` | `1` | Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). |
|
|
28
28
|
| `highlighted` | `highlighted` | `boolean` | `false` | Scales and glows the pin — a generic emphasis state (e.g. hover, selection). |
|
|
29
29
|
|
|
30
30
|
## Events
|
package/llms.txt
CHANGED
|
@@ -995,7 +995,7 @@ Example:
|
|
|
995
995
|
## <map-circle>
|
|
996
996
|
|
|
997
997
|
A plain circular map marker: a radial-gradient fill with a soft highlight
|
|
998
|
-
and a
|
|
998
|
+
and a solid white outer ring, no point/tail (unlike `<map-pin>`) —
|
|
999
999
|
for markers that don't need to visually "point" at their exact
|
|
1000
1000
|
coordinate. Purely a visual primitive — it has no `mapbox-gl` (or any
|
|
1001
1001
|
mapping library) dependency; the consumer positions it, e.g. via
|
|
@@ -1006,7 +1006,7 @@ the slot empty, and rasterize one marker per color for use as a map
|
|
|
1006
1006
|
|
|
1007
1007
|
Import: `import "@f-ewald/components/map-circle.js";`
|
|
1008
1008
|
|
|
1009
|
-
Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 18; `ringWidth` (attribute `ring-width`) : number, default
|
|
1009
|
+
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
|
|
1010
1010
|
Events: none
|
|
1011
1011
|
CSS custom properties: `--ui-font`, `--ui-font-weight-bold`, `--ui-line-height-glyph`
|
|
1012
1012
|
|
|
@@ -1026,7 +1026,7 @@ positions it, e.g. via `new mapboxgl.Marker({ element: pinEl })`.
|
|
|
1026
1026
|
|
|
1027
1027
|
Import: `import "@f-ewald/components/map-pin.js";`
|
|
1028
1028
|
|
|
1029
|
-
Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 32; `ringOpacity` (attribute `ring-opacity`) : number, default
|
|
1029
|
+
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
|
|
1030
1030
|
Events: none
|
|
1031
1031
|
CSS custom properties: `--ui-font`, `--ui-font-weight-bold`, `--ui-line-height-glyph`
|
|
1032
1032
|
|