@f-ewald/components 0.3.0 → 0.5.0

package/README.md

@@ -50,6 +50,7 @@ import "@f-ewald/components/roman-numeral.js";
 | `<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) |
+| `<map-point>` | [docs/map-point.md](./docs/map-point.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) |
@@ -58,6 +59,7 @@ import "@f-ewald/components/roman-numeral.js";
 | `<reveal-button>` | [docs/reveal-button.md](./docs/reveal-button.md) |
 | `<roman-numeral>` | [docs/roman-numeral.md](./docs/roman-numeral.md) |
 | `<slide-panel>` | [docs/slide-panel.md](./docs/slide-panel.md) |
+| `<stat-meter>` | [docs/stat-meter.md](./docs/stat-meter.md) |
 | `<toast-notification>` | [docs/toast-notification.md](./docs/toast-notification.md) |
 | `<ui-button>` | [docs/ui-button.md](./docs/ui-button.md) |
 | `<user-avatar>` | [docs/user-avatar.md](./docs/user-avatar.md) |

package/custom-elements.json

@@ -2504,6 +2504,14 @@
             "module": "./map-circle.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "MapPoint",
+          "declaration": {
+            "name": "MapPoint",
+            "module": "./map-point.js"
+          }
+        },
         {
           "kind": "js",
           "name": "RadioCards",
@@ -2552,6 +2560,14 @@
             "module": "./ui-button.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "StatMeter",
+          "declaration": {
+            "name": "StatMeter",
+            "module": "./stat-meter.js"
+          }
+        },
         {
           "kind": "js",
           "name": "tokens",
@@ -2817,6 +2833,109 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/map-point.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A small plain-colored map marker for dense point layers (transit stops,\namenities, hazard points, etc.): a light-to-dark gradient fill with a thin\nwhite ring, no badge/content slot — every instance on a given layer shares\nthe same look, so there's nothing to render per-feature (unlike\n`<map-pin>`/`<map-circle>`, which carry per-marker slotted content).\nPurely a visual primitive — it has no `mapbox-gl` (or any mapping library)\ndependency; typically rasterized once per color and used as a Mapbox\n`icon-image` on a `symbol` layer rather than mounted as individual DOM\nmarkers, so a whole layer's worth of points shares one icon image.",
+          "name": "MapPoint",
+          "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": "14",
+              "description": "Diameter, in CSS pixels.",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "ringWidth",
+              "type": {
+                "text": "number"
+              },
+              "default": "3",
+              "description": "White outer ring thickness, in the same viewBox units as `size` (scales with it).",
+              "attribute": "ring-width"
+            },
+            {
+              "kind": "field",
+              "name": "_gradId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`map-point-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": "14",
+              "description": "Diameter, in CSS pixels.",
+              "fieldName": "size"
+            },
+            {
+              "name": "ring-width",
+              "type": {
+                "text": "number"
+              },
+              "default": "3",
+              "description": "White outer ring thickness, in the same viewBox units as `size` (scales with it).",
+              "fieldName": "ringWidth"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "map-point",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MapPoint",
+          "declaration": {
+            "name": "MapPoint",
+            "module": "src/map-point.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "map-point",
+          "declaration": {
+            "name": "MapPoint",
+            "module": "src/map-point.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/percent-bar-chart.ts",
@@ -3520,6 +3639,102 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/stat-meter.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A compact labeled meter for a single percentage reading — e.g. CPU or\nmemory usage in a dashboard header. `percent` may be `null` when no\nreading is available yet (e.g. the first tick of a polling metric); the\nbar then renders empty and the value shows an em dash instead of \"0%\".",
+          "name": "StatMeter",
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Short label shown before the bar, e.g. \"CPU\" or \"MEM\".",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "percent",
+              "type": {
+                "text": "number | null"
+              },
+              "default": "null",
+              "description": "Percentage 0-100. `null` renders an empty bar and a \"—\" value instead of \"0%\".",
+              "attribute": "percent"
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Fill color override; falls back to the `--ui-success` token.",
+              "attribute": "color"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Short label shown before the bar, e.g. \"CPU\" or \"MEM\".",
+              "fieldName": "label"
+            },
+            {
+              "name": "percent",
+              "type": {
+                "text": "number | null"
+              },
+              "default": "null",
+              "description": "Percentage 0-100. `null` renders an empty bar and a \"—\" value instead of \"0%\".",
+              "fieldName": "percent"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Fill color override; falls back to the `--ui-success` token.",
+              "fieldName": "color"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "stat-meter",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "StatMeter",
+          "declaration": {
+            "name": "StatMeter",
+            "module": "src/stat-meter.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "stat-meter",
+          "declaration": {
+            "name": "StatMeter",
+            "module": "src/stat-meter.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/toast-notification.ts",

package/dist/index.d.ts

@@ -16,9 +16,11 @@ export { AutocompleteInput, type AutocompleteOption, } from "./autocomplete-inpu
 export { UserAvatar } from "./user-avatar.js";
 export { MapPin } from "./map-pin.js";
 export { MapCircle } from "./map-circle.js";
+export { MapPoint } from "./map-point.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";
+export { StatMeter } from "./stat-meter.js";
 export { tokens, tokenValues } from "./tokens.js";
 export * from "./icons.js";
 //# sourceMappingURL=index.d.ts.map

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,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"}
+{"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,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,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,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAClD,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -16,9 +16,11 @@ 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 { MapPoint } from "./map-point.js";
 export { RadioCards } from "./radio-cards.js";
 export { RadioPills } from "./radio-pills.js";
 export { UiButton } from "./ui-button.js";
+export { StatMeter } from "./stat-meter.js";
 export { tokens, tokenValues } from "./tokens.js";
 export * from "./icons.js";
 //# sourceMappingURL=index.js.map

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,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"]}
+{"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,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,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,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,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 { MapPoint } from \"./map-point.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 { StatMeter } from \"./stat-meter.js\";\nexport { tokens, tokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}

package/dist/map-point.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from "lit";
+/**
+ * A small plain-colored map marker for dense point layers (transit stops,
+ * amenities, hazard points, etc.): a light-to-dark gradient fill with a thin
+ * white ring, no badge/content slot — every instance on a given layer shares
+ * the same look, so there's nothing to render per-feature (unlike
+ * `<map-pin>`/`<map-circle>`, which carry per-marker slotted content).
+ * Purely a visual primitive — it has no `mapbox-gl` (or any mapping library)
+ * dependency; typically rasterized once per color and used as a Mapbox
+ * `icon-image` on a `symbol` layer rather than mounted as individual DOM
+ * markers, so a whole layer's worth of points shares one icon image.
+ *
+ * @element map-point
+ */
+export declare class MapPoint 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;
+    private readonly _gradId;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "map-point": MapPoint;
+    }
+}
+//# sourceMappingURL=map-point.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"map-point.d.ts","sourceRoot":"","sources":["../src/map-point.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAWpB;IAEF,4FAA4F;IAChF,KAAK,SAAa;IAC9B,+BAA+B;IACH,IAAI,SAAM;IACtC,wFAAwF;IACnC,SAAS,SAAK;IAEnE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2C;IAE1D,MAAM,yCAoBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/map-point.js

@@ -0,0 +1,83 @@
+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 small plain-colored map marker for dense point layers (transit stops,
+ * amenities, hazard points, etc.): a light-to-dark gradient fill with a thin
+ * white ring, no badge/content slot — every instance on a given layer shares
+ * the same look, so there's nothing to render per-feature (unlike
+ * `<map-pin>`/`<map-circle>`, which carry per-marker slotted content).
+ * Purely a visual primitive — it has no `mapbox-gl` (or any mapping library)
+ * dependency; typically rasterized once per color and used as a Mapbox
+ * `icon-image` on a `symbol` layer rather than mounted as individual DOM
+ * markers, so a whole layer's worth of points shares one icon image.
+ *
+ * @element map-point
+ */
+let MapPoint = class MapPoint 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 = 14;
+        /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */
+        this.ringWidth = 3;
+        this._gradId = `map-point-grad-${gradientIdCounter++}`;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-block;
+        line-height: 0;
+      }
+      svg {
+        display: block;
+      }
+    `,
+    ]; }
+    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>
+    `;
+    }
+};
+__decorate([
+    property()
+], MapPoint.prototype, "color", void 0);
+__decorate([
+    property({ type: Number })
+], MapPoint.prototype, "size", void 0);
+__decorate([
+    property({ type: Number, attribute: "ring-width" })
+], MapPoint.prototype, "ringWidth", void 0);
+MapPoint = __decorate([
+    customElement("map-point")
+], MapPoint);
+export { MapPoint };
+//# sourceMappingURL=map-point.js.map

package/dist/map-point.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-point.js","sourceRoot":"","sources":["../src/map-point.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;;;;;;;;;;;;GAYG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAcL,4FAA4F;QAChF,UAAK,GAAG,SAAS,CAAC;QAC9B,+BAA+B;QACH,SAAI,GAAG,EAAE,CAAC;QACtC,wFAAwF;QACnC,cAAS,GAAG,CAAC,CAAC;QAElD,YAAO,GAAG,kBAAkB,iBAAiB,EAAE,EAAE,CAAC;IAuBrE,CAAC;aA3CiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;KAQF;KACF,AAXqB,CAWpB;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,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;;KAE7G,CAAC;IACJ,CAAC;CACF,CAAA;AA7Ba;IAAX,QAAQ,EAAE;uCAAmB;AAEF;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAW;AAEe;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CAAe;AAnBxD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA4CpB","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 small plain-colored map marker for dense point layers (transit stops,\n * amenities, hazard points, etc.): a light-to-dark gradient fill with a thin\n * white ring, no badge/content slot — every instance on a given layer shares\n * the same look, so there's nothing to render per-feature (unlike\n * `<map-pin>`/`<map-circle>`, which carry per-marker slotted content).\n * Purely a visual primitive — it has no `mapbox-gl` (or any mapping library)\n * dependency; typically rasterized once per color and used as a Mapbox\n * `icon-image` on a `symbol` layer rather than mounted as individual DOM\n * markers, so a whole layer's worth of points shares one icon image.\n *\n * @element map-point\n */\n@customElement(\"map-point\")\nexport class MapPoint extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        line-height: 0;\n      }\n      svg {\n        display: block;\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 = 14;\n  /** White outer ring thickness, in the same viewBox units as `size` (scales with it). */\n  @property({ type: Number, attribute: \"ring-width\" }) ringWidth = 3;\n\n  private readonly _gradId = `map-point-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    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"map-point\": MapPoint;\n  }\n}\n"]}

package/dist/stat-meter.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+/**
+ * A compact labeled meter for a single percentage reading — e.g. CPU or
+ * memory usage in a dashboard header. `percent` may be `null` when no
+ * reading is available yet (e.g. the first tick of a polling metric); the
+ * bar then renders empty and the value shows an em dash instead of "0%".
+ *
+ * @element stat-meter
+ */
+export declare class StatMeter extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Short label shown before the bar, e.g. "CPU" or "MEM". */
+    label: string;
+    /** Percentage 0-100. `null` renders an empty bar and a "—" value instead of "0%". */
+    percent: number | null;
+    /** Fill color override; falls back to the `--ui-success` token. */
+    color: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "stat-meter": StatMeter;
+    }
+}
+//# sourceMappingURL=stat-meter.d.ts.map

package/dist/stat-meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-meter.d.ts","sourceRoot":"","sources":["../src/stat-meter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAmDpB;IAEF,6DAA6D;IACjD,KAAK,SAAM;IAEvB,qFAAqF;IACzD,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1D,mEAAmE;IACvD,KAAK,SAAM;IAEd,MAAM,yCAWd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/stat-meter.js

@@ -0,0 +1,106 @@
+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";
+/**
+ * A compact labeled meter for a single percentage reading — e.g. CPU or
+ * memory usage in a dashboard header. `percent` may be `null` when no
+ * reading is available yet (e.g. the first tick of a polling metric); the
+ * bar then renders empty and the value shows an em dash instead of "0%".
+ *
+ * @element stat-meter
+ */
+let StatMeter = class StatMeter extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Short label shown before the bar, e.g. "CPU" or "MEM". */
+        this.label = "";
+        /** Percentage 0-100. `null` renders an empty bar and a "—" value instead of "0%". */
+        this.percent = null;
+        /** Fill color override; falls back to the `--ui-success` token. */
+        this.color = "";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+      }
+
+      .label {
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        color: var(--ui-text-muted, #64748b);
+      }
+
+      .track {
+        display: block;
+        width: 64px;
+        height: 6px;
+        border-radius: 3px;
+        background: var(--ui-surface-muted, #f8fafc);
+        overflow: hidden;
+      }
+
+      .fill {
+        display: block;
+        height: 100%;
+        background: var(--fill-color, var(--ui-success, #16a34a));
+        transition: width 0.3s ease;
+      }
+
+      .value {
+        min-width: 32px;
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        font-weight: 500;
+        color: var(--ui-text, #0f172a);
+        font-variant-numeric: tabular-nums;
+        text-align: right;
+      }
+    `,
+    ]; }
+    render() {
+        const pct = this.percent;
+        const clamped = pct === null ? 0 : Math.min(100, Math.max(0, pct));
+        const fillStyle = this.color ? `width: ${clamped}%; --fill-color: ${this.color}` : `width: ${clamped}%`;
+        return html `
+      <span class="label">${this.label}</span>
+      <span class="track" role="img" aria-label="${this.label} ${pct === null ? "no reading" : `${pct}%`}">
+        <span class="fill" style=${fillStyle}></span>
+      </span>
+      <span class="value">${pct === null ? "—" : `${pct}%`}</span>
+    `;
+    }
+};
+__decorate([
+    property()
+], StatMeter.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], StatMeter.prototype, "percent", void 0);
+__decorate([
+    property()
+], StatMeter.prototype, "color", void 0);
+StatMeter = __decorate([
+    customElement("stat-meter")
+], StatMeter);
+export { StatMeter };
+//# sourceMappingURL=stat-meter.js.map

package/dist/stat-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-meter.js","sourceRoot":"","sources":["../src/stat-meter.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;AAErC;;;;;;;GAOG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAsDL,6DAA6D;QACjD,UAAK,GAAG,EAAE,CAAC;QAEvB,qFAAqF;QACzD,YAAO,GAAkB,IAAI,CAAC;QAE1D,mEAAmE;QACvD,UAAK,GAAG,EAAE,CAAC;IAczB,CAAC;aA1EiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDF;KACF,AAnDqB,CAmDpB;IAWO,MAAM;QACb,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC;QACzB,MAAM,OAAO,GAAG,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QACnE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,OAAO,oBAAoB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,OAAO,GAAG,CAAC;QACxG,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,KAAK;mDACa,IAAI,CAAC,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG;mCACrE,SAAS;;4BAEhB,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG;KACrD,CAAC;IACJ,CAAC;CACF,CAAA;AApBa;IAAX,QAAQ,EAAE;wCAAY;AAGK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA+B;AAG9C;IAAX,QAAQ,EAAE;wCAAY;AA7DZ,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA2ErB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A compact labeled meter for a single percentage reading — e.g. CPU or\n * memory usage in a dashboard header. `percent` may be `null` when no\n * reading is available yet (e.g. the first tick of a polling metric); the\n * bar then renders empty and the value shows an em dash instead of \"0%\".\n *\n * @element stat-meter\n */\n@customElement(\"stat-meter\")\nexport class StatMeter extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\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      }\n\n      .label {\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 600;\n        letter-spacing: 0.04em;\n        color: var(--ui-text-muted, #64748b);\n      }\n\n      .track {\n        display: block;\n        width: 64px;\n        height: 6px;\n        border-radius: 3px;\n        background: var(--ui-surface-muted, #f8fafc);\n        overflow: hidden;\n      }\n\n      .fill {\n        display: block;\n        height: 100%;\n        background: var(--fill-color, var(--ui-success, #16a34a));\n        transition: width 0.3s ease;\n      }\n\n      .value {\n        min-width: 32px;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        color: var(--ui-text, #0f172a);\n        font-variant-numeric: tabular-nums;\n        text-align: right;\n      }\n    `,\n  ];\n\n  /** Short label shown before the bar, e.g. \"CPU\" or \"MEM\". */\n  @property() label = \"\";\n\n  /** Percentage 0-100. `null` renders an empty bar and a \"—\" value instead of \"0%\". */\n  @property({ type: Number }) percent: number | null = null;\n\n  /** Fill color override; falls back to the `--ui-success` token. */\n  @property() color = \"\";\n\n  override render() {\n    const pct = this.percent;\n    const clamped = pct === null ? 0 : Math.min(100, Math.max(0, pct));\n    const fillStyle = this.color ? `width: ${clamped}%; --fill-color: ${this.color}` : `width: ${clamped}%`;\n    return html`\n      <span class=\"label\">${this.label}</span>\n      <span class=\"track\" role=\"img\" aria-label=\"${this.label} ${pct === null ? \"no reading\" : `${pct}%`}\">\n        <span class=\"fill\" style=${fillStyle}></span>\n      </span>\n      <span class=\"value\">${pct === null ? \"—\" : `${pct}%`}</span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"stat-meter\": StatMeter;\n  }\n}\n"]}

package/docs/map-point.md

@@ -0,0 +1,44 @@
+# `<map-point>`
+
+A small plain-colored map marker for dense point layers (transit stops,
+amenities, hazard points, etc.): a light-to-dark gradient fill with a thin
+white ring, no badge/content slot — every instance on a given layer shares
+the same look, so there's nothing to render per-feature (unlike
+`<map-pin>`/`<map-circle>`, which carry per-marker slotted content).
+Purely a visual primitive — it has no `mapbox-gl` (or any mapping library)
+dependency; typically rasterized once per color and used as a Mapbox
+`icon-image` on a `symbol` layer rather than mounted as individual DOM
+markers, so a whole layer's worth of points shares one icon image.
+
+## Install
+
+```js
+import "@f-ewald/components/map-point.js";
+```
+
+## Usage
+
+```html
+<map-point color="#0099D8"></map-point>
+<map-point color="#fb8072" size="10" ring-width="2"></map-point>
+```
+
+## 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` | `14` | Diameter, in CSS pixels. |
+| `ringWidth` | `ring-width` | `number` | `3` | White outer ring thickness, in the same viewBox units as `size` (scales with it). |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+_None._

package/docs/stat-meter.md

@@ -0,0 +1,48 @@
+# `<stat-meter>`
+
+A compact labeled meter for a single percentage reading — e.g. CPU or
+memory usage in a dashboard header. `percent` may be `null` when no
+reading is available yet (e.g. the first tick of a polling metric); the
+bar then renders empty and the value shows an em dash instead of "0%".
+
+## Install
+
+```js
+import "@f-ewald/components/stat-meter.js";
+```
+
+## Usage
+
+```html
+<stat-meter label="CPU" percent="42"></stat-meter>
+<stat-meter label="MEM" percent="76"></stat-meter>
+<stat-meter label="I/O"></stat-meter> <!-- percent unset -> null -> renders "—" -->
+<stat-meter label="GPU" percent="88" color="#dc2626"></stat-meter>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `label` | `label` | `string` | `""` | Short label shown before the bar, e.g. "CPU" or "MEM". |
+| `percent` | `percent` | `number | null` | `null` | Percentage 0-100. `null` renders an empty bar and a "—" value instead of "0%". |
+| `color` | `color` | `string` | `""` | Fill color override; falls back to the `--ui-success` token. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-font` |
+| `--ui-font-size-sm` |
+| `--ui-success` |
+| `--ui-surface-muted` |
+| `--ui-text` |
+| `--ui-text-muted` |

package/llms.txt

@@ -227,6 +227,30 @@ Example:
 <map-pin color="#22c55e" size="26" highlighted>🏠</map-pin>
 ```
 
+## <map-point>
+
+A small plain-colored map marker for dense point layers (transit stops,
+amenities, hazard points, etc.): a light-to-dark gradient fill with a thin
+white ring, no badge/content slot — every instance on a given layer shares
+the same look, so there's nothing to render per-feature (unlike
+`<map-pin>`/`<map-circle>`, which carry per-marker slotted content).
+Purely a visual primitive — it has no `mapbox-gl` (or any mapping library)
+dependency; typically rasterized once per color and used as a Mapbox
+`icon-image` on a `symbol` layer rather than mounted as individual DOM
+markers, so a whole layer's worth of points shares one icon image.
+
+Import: `import "@f-ewald/components/map-point.js";`
+
+Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 14; `ringWidth` (attribute `ring-width`) : number, default 3
+Events: none
+CSS custom properties: none
+
+Example:
+```html
+<map-point color="#0099D8"></map-point>
+<map-point color="#fb8072" size="10" ring-width="2"></map-point>
+```
+
 ## <percent-bar-chart>
 
 Horizontal bar chart for labeled percentage rows, using D3's linear scale.
@@ -402,6 +426,27 @@ Example:
 </slide-panel>
 ```
 
+## <stat-meter>
+
+A compact labeled meter for a single percentage reading — e.g. CPU or
+memory usage in a dashboard header. `percent` may be `null` when no
+reading is available yet (e.g. the first tick of a polling metric); the
+bar then renders empty and the value shows an em dash instead of "0%".
+
+Import: `import "@f-ewald/components/stat-meter.js";`
+
+Properties: `label` (attribute `label`) : string, default ""; `percent` (attribute `percent`) : number | null, default null; `color` (attribute `color`) : string, default ""
+Events: none
+CSS custom properties: `--ui-font`, `--ui-font-size-sm`, `--ui-success`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+
+Example:
+```html
+<stat-meter label="CPU" percent="42"></stat-meter>
+<stat-meter label="MEM" percent="76"></stat-meter>
+<stat-meter label="I/O"></stat-meter> <!-- percent unset -> null -> renders "—" -->
+<stat-meter label="GPU" percent="88" color="#dc2626"></stat-meter>
+```
+
 ## <toast-notification>
 
 Fixed-position stack of dismissible notifications, anchored top-right

package/package.json

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