@f-ewald/components 0.6.0 → 1.0.0

package/llms.txt

@@ -104,6 +104,104 @@ Example:
 </script>
 ```
 
+## <calendar-entry>
+
+Declarative metadata for one calendar event, consumed by a parent
+`calendar-month` or `calendar-year`. Read-only/non-interactive; renders
+nothing itself.
+
+Import: `import "@f-ewald/components/calendar-entry.js";`
+
+Properties: `start` (attribute `start`) : string, default ""; `end` (attribute `end`) : string, default ""; `label` (attribute `label`) : string, default ""; `color` (attribute `color`) : StatusPillColor, default "neutral"; `href` (attribute `href`) : string | undefined, default —
+Events: none
+CSS custom properties: none
+
+Example:
+```html
+<calendar-entry
+  start="2026-07-10"
+  end="2026-07-18"
+  label="Vacation"
+  color="success"
+>
+  <span slot="title">Vacation</span>
+  <span slot="detail">Out of office</span>
+  <span slot="detail">Road trip along the California coast with several scenic stops</span>
+  <span slot="footer">Return July 19 at 6 PM</span>
+</calendar-entry>
+```
+
+## <calendar-month>
+
+One month rendered as a top-to-bottom list of days — weekends and today
+highlighted, with declarative `calendar-entry` children shown as colored
+bars spanning the days they cover. An entry's title uses its first visible
+day; every remaining visible day becomes one shared body for wrapped
+details and an optional ending footer. Overlapping entries stack into
+side-by-side lanes rather than being layered/hidden. Read-only.
+
+Lanes are computed independently per instance, from only the entries
+overlapping this month — an entry spanning a month boundary may therefore
+land in a different lane index in the adjacent month's `calendar-month`.
+This is an accepted v1 limitation: cross-month lane continuity would
+require a shared parent (`calendar-year`) to assign lanes globally.
+
+Entry attributes and slotted title/detail text are observed, so a
+standalone month re-renders when consumers update declarative metadata.
+
+Import: `import "@f-ewald/components/calendar-month.js";`
+
+Properties: `year` (attribute `year`) : number, default —; `month` (attribute `month`) : number, default 1
+Events: none
+CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-font-size-xs`, `--ui-hover-overlay`, `--ui-primary`, `--ui-radius-sm`, `--ui-success`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+
+Example:
+```html
+<calendar-month year="2026" month="7">
+  <calendar-entry start="2026-07-10" end="2026-07-18" label="Vacation" color="success">
+    <span slot="title">Vacation</span>
+    <span slot="detail">Out of office</span>
+    <span slot="detail">Road trip along the California coast with several scenic stops</span>
+    <span slot="footer">Return July 19 at 6 PM</span>
+  </calendar-entry>
+  <calendar-entry start="2026-07-15" end="2026-07-20" label="Conference" color="warning" href="#conf">
+    <span slot="detail">Talks and workshops</span>
+    <span slot="footer">Closing keynote · July 20</span>
+  </calendar-entry>
+</calendar-month>
+```
+
+## <calendar-year>
+
+A full year of `calendar-month` blocks, generated from declarative
+`calendar-entry` children. Each entry is re-projected into the
+`calendar-month` blocks it overlaps as a freshly-created `calendar-entry`
+element — the original elements stay slotted here and are never moved,
+since a DOM node can only have one parent. Read-only.
+
+Import: `import "@f-ewald/components/calendar-year.js";`
+
+Properties: `year` (attribute `year`) : number, default —
+Events: none
+CSS custom properties: `--ui-font`
+
+Example:
+```html
+<calendar-year year="2026">
+  <calendar-entry start="2026-01-28" end="2026-02-03" label="Offsite" color="primary" href="#offsite">
+    <span slot="detail">New York</span>
+    <span slot="detail">Team workshops</span>
+    <span slot="footer">Closing dinner Friday</span>
+  </calendar-entry>
+  <calendar-entry start="2026-03-05" end="2026-03-18" label="Product launch" color="success" href="#launch">
+    <span slot="detail">Coordinate the release across engineering, design, support, and marketing.</span>
+    <span slot="detail">Monitor adoption and production health throughout the rollout.</span>
+    <span slot="footer">Public launch · March 18 at 9 AM</span>
+  </calendar-entry>
+  <calendar-entry start="2026-07-10" end="2026-07-18" label="Vacation" color="success"></calendar-entry>
+</calendar-year>
+```
+
 ## <chat-message>
 
 One conversation entry in a chat-style activity feed. Tool calls and
@@ -246,6 +344,33 @@ Example:
 </script>
 ```
 
+## <dropdown-button>
+
+A primary-styled button with a label and chevron that opens an anchored
+menu of actions — essentially `form-select` minus "current value"
+semantics: a menu, not a select. Use for a set of mutually exclusive
+next-step actions (e.g. a failed task's Retry / Close / Backlog).
+
+Import: `import "@f-ewald/components/dropdown-button.js";`
+
+Properties: `label` (attribute `label`) : string, default ""; `options` (JS property only) : DropdownOption[], default []; `disabled` (attribute `disabled`) : boolean, default false
+Events: `select`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`
+
+Example:
+```html
+<dropdown-button label="Resolve…"></dropdown-button>
+<script type="module">
+  const dropdown = document.querySelector("dropdown-button");
+  dropdown.options = [
+    { value: "retry", label: "Retry" },
+    { value: "close", label: "Close" },
+    { value: "backlog", label: "Backlog" },
+  ];
+  dropdown.addEventListener("select", (e) => console.log(e.detail.value));
+</script>
+```
+
 ## <editable-text>
 
 Jira/GitHub-style click-to-edit text: a display span that turns into an
@@ -273,27 +398,64 @@ a native `<select>` wherever consistent cross-browser styling and a
 `change` event carrying `{ value }` are wanted (e.g. a task's status
 picker).
 
+The trigger fills its host's width (`justify-content: space-between`
+pushes the chevron to the far edge), but the host itself stays
+`display: inline-block` — so usages that never size the host (a filter
+bar, a status picker) keep shrink-to-fit auto-width unchanged. To make an
+instance full-width, size the host itself: `form-select { width: 100%; }`.
+
+Set `searchable` to replace the button trigger with an editable combobox
+that filters the predefined options by case-insensitive label infix. Typed
+text is only a query: `value` changes exclusively when an actual option is
+selected, and an uncommitted query is discarded when the list closes.
+Each option may also provide a pre-rendered `icon` and square `iconSize`;
+iconless options reserve no leading space.
+
 Import: `import "@f-ewald/components/form-select.js";`
 
-Properties: `options` (JS property only) : SelectOption[], default []; `value` (attribute `value`) : string, default ""; `label` (attribute `label`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false
+Properties: `options` (JS property only) : SelectOption[], default []; `value` (attribute `value`) : string, default ""; `label` (attribute `label`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false; `searchable` (attribute `searchable`) : boolean, default false
 Events: `change`
 CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
-<form-select label="Task state"></form-select>
+<form-select label="Task state" searchable></form-select>
 <script type="module">
+  import { iconArrowPath, iconCheckCircle, iconListBullet } from "@f-ewald/components/icons.js";
+
   const select = document.querySelector("form-select");
   select.options = [
+    { value: "backlog", label: "Backlog", icon: iconListBullet(14), iconSize: 14 },
     { value: "open", label: "Open" },
-    { value: "in_progress", label: "In progress" },
-    { value: "done", label: "Done" },
+    { value: "in_progress", label: "In progress", icon: iconArrowPath(16), iconSize: 16 },
+    { value: "review", label: "Needs review" },
+    { value: "done", label: "Done", icon: iconCheckCircle(16), iconSize: 16 },
   ];
   select.value = "open";
   select.addEventListener("change", (e) => console.log(e.detail.value));
 </script>
 ```
 
+## <frame-box>
+
+A titled frame around a slot: a gray border with a small uppercase,
+muted label overlapping the top edge (fieldset/legend-style). Generic —
+the label text is entirely up to the consumer (e.g. "Debug" to visually
+fence off dev-only chrome from the product UI).
+
+Import: `import "@f-ewald/components/frame-box.js";`
+
+Properties: `label` (attribute `label`) : string, default ""
+Events: none
+CSS custom properties: `--ui-border`, `--ui-radius-sm`, `--ui-surface`, `--ui-text-muted`
+
+Example:
+```html
+<frame-box label="Debug">
+  Framed content goes here.
+</frame-box>
+```
+
 ## <gallery-item>
 
 Declarative image metadata consumed by a parent `photo-gallery`.
@@ -336,6 +498,30 @@ Example:
 ></gallery-item-variant>
 ```
 
+## <icon-button>
+
+A borderless button wrapping a passed-in icon, with a rounded
+hover-highlight background. Use for a low-emphasis affordance next to
+content it acts on (e.g. an "Edit" pencil at the end of a table row)
+where a bordered `ui-button` would be too heavy.
+
+Import: `import "@f-ewald/components/icon-button.js";`
+
+Properties: `icon` (JS property only) : TemplateResult | null, default null; `label` (attribute `label`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false
+Events: `click`
+CSS custom properties: `--ui-focus-ring`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+
+Example:
+```html
+<icon-button label="Edit"></icon-button>
+<script type="module">
+  import { iconPencil } from "@f-ewald/components/icons.js";
+  const btn = document.querySelector("icon-button");
+  btn.icon = iconPencil(16);
+  btn.addEventListener("click", () => console.log("edit clicked"));
+</script>
+```
+
 ## <live-timer>
 
 Per-second ticking count-up timer, e.g. a live "running for 12s" or
@@ -361,6 +547,9 @@ 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";`
 
@@ -371,6 +560,7 @@ CSS custom properties: `--ui-font`
 Example:
 ```html
 <map-circle color="#6b7280"></map-circle>
+<map-circle color="#0099D8" size="14" ring-width="3"></map-circle>
 <map-circle color="#1a73e8" size="24" ring-width="5" highlighted>1</map-circle>
 ```
 
@@ -393,30 +583,6 @@ 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.

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@f-ewald/components",
   "private": false,
-  "version": "0.6.0",
+  "version": "1.0.0",
   "description": "A collection of universally usable web components for various tasks.",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "bin": {
+    "f-ewald-components-mcp": "dist/mcp-server.js"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -27,16 +30,21 @@
     "docs"
   ],
   "sideEffects": [
-    "./dist/**/*.js"
+    "./dist/**/*.js",
+    "./src/**/*.ts"
   ],
   "scripts": {
     "dev": "vite",
-    "build": "rm -rf dist && tsc && node scripts/generate-tokens-css.mjs",
+    "build": "rm -rf dist && tsc && node scripts/generate-tokens-css.mjs && chmod +x dist/mcp-server.js",
     "build:demo": "vite build",
+    "build:site": "node scripts/generate-docs.mjs --site && vite build --base=./ --outDir=pages-dist/playground",
+    "preview:site": "vite preview --outDir=pages-dist",
     "analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
     "docs": "npm run analyze && node scripts/generate-docs.mjs",
     "icons": "node scripts/generate-icons.mjs",
+    "mcp": "node dist/mcp-server.js",
     "test": "playwright test",
+    "test:site": "playwright test --config playwright.site.config.ts",
     "prepublishOnly": "npm run build && npm run docs && npm run test"
   },
   "keywords": [
@@ -44,11 +52,17 @@
   ],
   "author": "Friedrich Ewald",
   "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/f-ewald/components.git"
+  },
   "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "lit": "^3.3.3"
+    "lit": "^3.3.3",
+    "zod": "^4.4.3"
   },
   "publishConfig": {
     "access": "public"
@@ -61,6 +75,7 @@
     "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
+    "@types/node": "^26.1.1",
     "heroicons": "^2.2.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^7.0.2",

package/dist/map-point.d.ts

@@ -1,31 +0,0 @@
-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

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

@@ -1,83 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/docs/map-point.md

@@ -1,44 +0,0 @@
-# `<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._