@f-ewald/components 1.8.0 → 1.10.0

package/README.md

@@ -50,9 +50,11 @@ import "@f-ewald/components/roman-numeral.js";
 | `<app-shell>` | [API reference](https://f-ewald.github.io/components/docs/app-shell.html) |
 | `<app-sidebar>` | [API reference](https://f-ewald.github.io/components/docs/app-sidebar.html) |
 | `<autocomplete-input>` | [API reference](https://f-ewald.github.io/components/docs/autocomplete-input.html) |
+| `<button-group>` | [API reference](https://f-ewald.github.io/components/docs/button-group.html) |
 | `<calendar-entry>` | [API reference](https://f-ewald.github.io/components/docs/calendar-entry.html) |
 | `<calendar-month>` | [API reference](https://f-ewald.github.io/components/docs/calendar-month.html) |
 | `<calendar-year>` | [API reference](https://f-ewald.github.io/components/docs/calendar-year.html) |
+| `<card-grid>` | [API reference](https://f-ewald.github.io/components/docs/card-grid.html) |
 | `<chat-message>` | [API reference](https://f-ewald.github.io/components/docs/chat-message.html) |
 | `<confirm-dialog>` | [API reference](https://f-ewald.github.io/components/docs/confirm-dialog.html) |
 | `<content-divider>` | [API reference](https://f-ewald.github.io/components/docs/content-divider.html) |
@@ -72,6 +74,7 @@ import "@f-ewald/components/roman-numeral.js";
 | `<kanban-card>` | [API reference](https://f-ewald.github.io/components/docs/kanban-card.html) |
 | `<kanban-column>` | [API reference](https://f-ewald.github.io/components/docs/kanban-column.html) |
 | `<kbd-hint>` | [API reference](https://f-ewald.github.io/components/docs/kbd-hint.html) |
+| `<link-card>` | [API reference](https://f-ewald.github.io/components/docs/link-card.html) |
 | `<live-timer>` | [API reference](https://f-ewald.github.io/components/docs/live-timer.html) |
 | `<map-circle>` | [API reference](https://f-ewald.github.io/components/docs/map-circle.html) |
 | `<map-pin>` | [API reference](https://f-ewald.github.io/components/docs/map-pin.html) |

package/custom-elements.json

@@ -1877,6 +1877,121 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/button-group.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Single-select segmented control — a strip of buttons joined into one\nshared-border shape, for a small, persistent set of mutually exclusive\nchoices (a view switcher, a theme picker) where the *currently selected*\noption should read as visually \"pressed,\" not just checked. For many\nshort, individually pill-shaped choices, use `radio-pills` instead. Wraps\nnative radio inputs for keyboard/a11y and fires `change` rather than\nrelying on form submission.",
+          "name": "ButtonGroup",
+          "members": [
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "ButtonGroupOption[]"
+              },
+              "default": "[]",
+              "description": "Options to render, one segment each."
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Currently selected value.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables every native radio in the group.",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "#name",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`button-group-${++instanceCount}`"
+            },
+            {
+              "kind": "method",
+              "name": "_onChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "A segment was selected; detail: { value }."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Currently selected value.",
+              "fieldName": "value"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables every native radio in the group.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "button-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonGroup",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/button-group.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "button-group",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/button-group.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/calendar-entry.ts",
@@ -2545,6 +2660,48 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/card-grid.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A responsive auto-filling grid shell for `link-card` (or any card-shaped\ncontent) — each slotted child becomes a grid item, wrapping to a new row\nonce the container is too narrow for another `15rem` column.",
+          "name": "CardGrid",
+          "slots": [
+            {
+              "description": "`link-card` elements (or other card-shaped content).",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "card-grid",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CardGrid",
+          "declaration": {
+            "name": "CardGrid",
+            "module": "src/card-grid.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "card-grid",
+          "declaration": {
+            "name": "CardGrid",
+            "module": "src/card-grid.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/chat-message.ts",
@@ -6122,6 +6279,22 @@
             "module": "./radio-pills.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ButtonGroup",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "./button-group.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ButtonGroupOption",
+          "declaration": {
+            "name": "ButtonGroupOption",
+            "module": "./button-group.js"
+          }
+        },
         {
           "kind": "js",
           "name": "UiButton",
@@ -6490,6 +6663,30 @@
             "module": "./text-area.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "LinkCard",
+          "declaration": {
+            "name": "LinkCard",
+            "module": "./link-card.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LinkCardStatus",
+          "declaration": {
+            "name": "LinkCardStatus",
+            "module": "./link-card.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CardGrid",
+          "declaration": {
+            "name": "CardGrid",
+            "module": "./card-grid.js"
+          }
+        },
         {
           "kind": "js",
           "name": "formatDuration",
@@ -7501,6 +7698,149 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/link-card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A single linked-resource tile — logo (or an initial-letter fallback),\nheading, optional description, and an optional reachability status dot.\nRenders as a real `<a>` (opening in a new tab) when `href` is set, or a\nnon-interactive `<div>` otherwise. Meant to be laid out inside\n`card-grid`, mirroring how `gallery-item` pairs with `photo-gallery`.",
+          "name": "LinkCard",
+          "members": [
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Card title.",
+              "attribute": "heading"
+            },
+            {
+              "kind": "field",
+              "name": "description",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Optional supporting text shown below the heading.",
+              "attribute": "description"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Destination URL. When set, the card renders as a link (opened in a new tab); when unset, a non-interactive tile.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "logo",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Logo image URL. Falls back to the first letter of `heading` if unset or it fails to load.",
+              "attribute": "logo"
+            },
+            {
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "LinkCardStatus"
+              },
+              "default": "\"\"",
+              "description": "Reachability state for the corner status dot. `\"\"` (default) renders no dot.",
+              "attribute": "status"
+            },
+            {
+              "kind": "field",
+              "name": "_imgError",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "heading",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Card title.",
+              "fieldName": "heading"
+            },
+            {
+              "name": "description",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Optional supporting text shown below the heading.",
+              "fieldName": "description"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Destination URL. When set, the card renders as a link (opened in a new tab); when unset, a non-interactive tile.",
+              "fieldName": "href"
+            },
+            {
+              "name": "logo",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Logo image URL. Falls back to the first letter of `heading` if unset or it fails to load.",
+              "fieldName": "logo"
+            },
+            {
+              "name": "status",
+              "type": {
+                "text": "LinkCardStatus"
+              },
+              "default": "\"\"",
+              "description": "Reachability state for the corner status dot. `\"\"` (default) renders no dot.",
+              "fieldName": "status"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "link-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LinkCard",
+          "declaration": {
+            "name": "LinkCard",
+            "module": "src/link-card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "link-card",
+          "declaration": {
+            "name": "LinkCard",
+            "module": "src/link-card.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/live-timer.ts",
@@ -10874,6 +11214,16 @@
               "default": "\"\"",
               "description": "Fill color override; falls back to the `--ui-success` token.",
               "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "trackColor",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Track (inactive portion) background override; falls back to the `--ui-surface-muted` token.",
+              "attribute": "track-color"
             }
           ],
           "attributes": [
@@ -10903,6 +11253,15 @@
               "default": "\"\"",
               "description": "Fill color override; falls back to the `--ui-success` token.",
               "fieldName": "color"
+            },
+            {
+              "name": "track-color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Track (inactive portion) background override; falls back to the `--ui-surface-muted` token.",
+              "fieldName": "trackColor"
             }
           ],
           "superclass": {

package/dist/button-group.d.ts

@@ -0,0 +1,38 @@
+import type { TemplateResult } from "lit";
+import { LitElement } from "lit";
+export interface ButtonGroupOption {
+    value: string;
+    label: string;
+    /** Optional pre-rendered icon template displayed before the label. */
+    icon?: TemplateResult;
+}
+/**
+ * Single-select segmented control — a strip of buttons joined into one
+ * shared-border shape, for a small, persistent set of mutually exclusive
+ * choices (a view switcher, a theme picker) where the *currently selected*
+ * option should read as visually "pressed," not just checked. For many
+ * short, individually pill-shaped choices, use `radio-pills` instead. Wraps
+ * native radio inputs for keyboard/a11y and fires `change` rather than
+ * relying on form submission.
+ *
+ * @element button-group
+ * @fires change - A segment was selected; detail: { value }.
+ */
+export declare class ButtonGroup extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Options to render, one segment each. */
+    options: ButtonGroupOption[];
+    /** Currently selected value. */
+    value: string;
+    /** Disables every native radio in the group. */
+    disabled: boolean;
+    private _onChange;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "button-group": ButtonGroup;
+    }
+}
+//# sourceMappingURL=button-group.d.ts.map

package/dist/button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../src/button-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAID;;;;;;;;;;;GAWG;AACH,qBACa,WAAY,SAAQ,UAAU;;IACzC,OAAgB,MAAM,4BA8FpB;IAEF,2CAA2C;IACX,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClE,gCAAgC;IACpB,KAAK,SAAM;IACvB,gDAAgD;IACnB,QAAQ,UAAS;IAI9C,OAAO,CAAC,SAAS;IAQR,MAAM,sBAsBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/button-group.js

@@ -0,0 +1,170 @@
+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, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { tokens } from "./tokens.js";
+let instanceCount = 0;
+/**
+ * Single-select segmented control — a strip of buttons joined into one
+ * shared-border shape, for a small, persistent set of mutually exclusive
+ * choices (a view switcher, a theme picker) where the *currently selected*
+ * option should read as visually "pressed," not just checked. For many
+ * short, individually pill-shaped choices, use `radio-pills` instead. Wraps
+ * native radio inputs for keyboard/a11y and fires `change` rather than
+ * relying on form submission.
+ *
+ * @element button-group
+ * @fires change - A segment was selected; detail: { value }.
+ */
+let ButtonGroup = class ButtonGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Options to render, one segment each. */
+        this.options = [];
+        /** Currently selected value. */
+        this.value = "";
+        /** Disables every native radio in the group. */
+        this.disabled = false;
+        this.#name = `button-group-${++instanceCount}`;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-block;
+      }
+      .group {
+        display: flex;
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        overflow: hidden;
+      }
+      .segment {
+        position: relative;
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        justify-content: center;
+        gap: 0.25rem;
+        height: 2rem;
+        box-sizing: border-box;
+        padding: 0.5rem 0.75rem;
+        border-left: 1px solid var(--ui-border, #e2e8f0);
+        cursor: pointer;
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        font-weight: var(--ui-font-weight-medium, 500);
+        line-height: var(--ui-line-height-tight, 1.25);
+        color: var(--ui-text, #0f172a);
+        white-space: nowrap;
+      }
+      .segment:first-child {
+        border-left: none;
+        border-top-left-radius: var(--ui-radius-sm, 0.25rem);
+        border-bottom-left-radius: var(--ui-radius-sm, 0.25rem);
+      }
+      .segment:last-child {
+        border-top-right-radius: var(--ui-radius-sm, 0.25rem);
+        border-bottom-right-radius: var(--ui-radius-sm, 0.25rem);
+      }
+      .segment:has(input:checked) {
+        background: var(--ui-primary, #4f46e5);
+        color: var(--ui-on-accent, #ffffff);
+      }
+      .segment:not(:has(input:checked)):hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      .segment input {
+        /* Fills the whole segment (not visually-hidden-offscreen) so a real
+           click anywhere in the segment — including a test driver clicking
+           the input by its accessible role — lands on the input itself,
+           not just via native <label> click delegation. */
+        position: absolute;
+        inset: 0;
+        margin: 0;
+        opacity: 0;
+        cursor: pointer;
+      }
+      /* Clipped by the group's own overflow:hidden unless promoted above its
+         neighbors — the focus ring needs a stacking context of its own. */
+      .segment:has(input:focus-visible) {
+        z-index: 1;
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      .segment:has(input:disabled) {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+      @media (forced-colors: active) {
+        .segment:has(input:focus-visible) {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+        .segment:has(input:checked) {
+          background: Highlight;
+          color: HighlightText;
+        }
+        .segment:has(input:disabled) {
+          color: GrayText;
+          opacity: 1;
+        }
+      }
+    `,
+    ]; }
+    #name;
+    _onChange(value) {
+        if (this.disabled)
+            return;
+        this.value = value;
+        this.dispatchEvent(new CustomEvent("change", { detail: { value }, bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <div class="group">
+        ${repeat(this.options, (opt) => opt.value, (opt) => html `
+            <label class="segment">
+              <input
+                type="radio"
+                name=${this.#name}
+                ?checked=${this.value === opt.value}
+                ?disabled=${this.disabled}
+                @change=${() => this._onChange(opt.value)}
+              />
+              ${opt.icon ?? nothing}
+              <span>${opt.label}</span>
+            </label>
+          `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], ButtonGroup.prototype, "options", void 0);
+__decorate([
+    property()
+], ButtonGroup.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], ButtonGroup.prototype, "disabled", void 0);
+ButtonGroup = __decorate([
+    customElement("button-group")
+], ButtonGroup);
+export { ButtonGroup };
+//# sourceMappingURL=button-group.js.map

package/dist/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","sourceRoot":"","sources":["../src/button-group.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AASrC,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB;;;;;;;;;;;GAWG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAiGL,2CAA2C;QACX,YAAO,GAAwB,EAAE,CAAC;QAClE,gCAAgC;QACpB,UAAK,GAAG,EAAE,CAAC;QACvB,gDAAgD;QACnB,aAAQ,GAAG,KAAK,CAAC;QAErC,UAAK,GAAG,gBAAgB,EAAE,aAAa,EAAE,CAAC;IAiCrD,CAAC;aAxIiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2FF;KACF,AA9FqB,CA8FpB;IASO,KAAK,CAAqC;IAE3C,SAAS,CAAC,KAAa;QAC7B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAChF,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,MAAM,CACN,IAAI,CAAC,OAAO,EACZ,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,EAClB,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;;;;uBAIA,IAAI,CAAC,KAAK;2BACN,IAAI,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK;4BACvB,IAAI,CAAC,QAAQ;0BACf,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;;gBAEzC,GAAG,CAAC,IAAI,IAAI,OAAO;sBACb,GAAG,CAAC,KAAK;;WAEpB,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAvCiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CAAmC;AAEtD;IAAX,QAAQ,EAAE;0CAAY;AAEM;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAtGnC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAyIvB","sourcesContent":["import type { TemplateResult } from \"lit\";\nimport { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport interface ButtonGroupOption {\n  value: string;\n  label: string;\n  /** Optional pre-rendered icon template displayed before the label. */\n  icon?: TemplateResult;\n}\n\nlet instanceCount = 0;\n\n/**\n * Single-select segmented control — a strip of buttons joined into one\n * shared-border shape, for a small, persistent set of mutually exclusive\n * choices (a view switcher, a theme picker) where the *currently selected*\n * option should read as visually \"pressed,\" not just checked. For many\n * short, individually pill-shaped choices, use `radio-pills` instead. Wraps\n * native radio inputs for keyboard/a11y and fires `change` rather than\n * relying on form submission.\n *\n * @element button-group\n * @fires change - A segment was selected; detail: { value }.\n */\n@customElement(\"button-group\")\nexport class ButtonGroup extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n      }\n      .group {\n        display: flex;\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        overflow: hidden;\n      }\n      .segment {\n        position: relative;\n        display: flex;\n        flex: 1 1 auto;\n        align-items: center;\n        justify-content: center;\n        gap: 0.25rem;\n        height: 2rem;\n        box-sizing: border-box;\n        padding: 0.5rem 0.75rem;\n        border-left: 1px solid var(--ui-border, #e2e8f0);\n        cursor: pointer;\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-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: var(--ui-font-weight-medium, 500);\n        line-height: var(--ui-line-height-tight, 1.25);\n        color: var(--ui-text, #0f172a);\n        white-space: nowrap;\n      }\n      .segment:first-child {\n        border-left: none;\n        border-top-left-radius: var(--ui-radius-sm, 0.25rem);\n        border-bottom-left-radius: var(--ui-radius-sm, 0.25rem);\n      }\n      .segment:last-child {\n        border-top-right-radius: var(--ui-radius-sm, 0.25rem);\n        border-bottom-right-radius: var(--ui-radius-sm, 0.25rem);\n      }\n      .segment:has(input:checked) {\n        background: var(--ui-primary, #4f46e5);\n        color: var(--ui-on-accent, #ffffff);\n      }\n      .segment:not(:has(input:checked)):hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .segment input {\n        /* Fills the whole segment (not visually-hidden-offscreen) so a real\n           click anywhere in the segment — including a test driver clicking\n           the input by its accessible role — lands on the input itself,\n           not just via native <label> click delegation. */\n        position: absolute;\n        inset: 0;\n        margin: 0;\n        opacity: 0;\n        cursor: pointer;\n      }\n      /* Clipped by the group's own overflow:hidden unless promoted above its\n         neighbors — the focus ring needs a stacking context of its own. */\n      .segment:has(input:focus-visible) {\n        z-index: 1;\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .segment:has(input:disabled) {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      @media (forced-colors: active) {\n        .segment:has(input:focus-visible) {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        .segment:has(input:checked) {\n          background: Highlight;\n          color: HighlightText;\n        }\n        .segment:has(input:disabled) {\n          color: GrayText;\n          opacity: 1;\n        }\n      }\n    `,\n  ];\n\n  /** Options to render, one segment each. */\n  @property({ attribute: false }) options: ButtonGroupOption[] = [];\n  /** Currently selected value. */\n  @property() value = \"\";\n  /** Disables every native radio in the group. */\n  @property({ type: Boolean }) disabled = false;\n\n  readonly #name = `button-group-${++instanceCount}`;\n\n  private _onChange(value: string) {\n    if (this.disabled) return;\n    this.value = value;\n    this.dispatchEvent(\n      new CustomEvent(\"change\", { detail: { value }, bubbles: true, composed: true }),\n    );\n  }\n\n  override render() {\n    return html`\n      <div class=\"group\">\n        ${repeat(\n          this.options,\n          (opt) => opt.value,\n          (opt) => html`\n            <label class=\"segment\">\n              <input\n                type=\"radio\"\n                name=${this.#name}\n                ?checked=${this.value === opt.value}\n                ?disabled=${this.disabled}\n                @change=${() => this._onChange(opt.value)}\n              />\n              ${opt.icon ?? nothing}\n              <span>${opt.label}</span>\n            </label>\n          `,\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"button-group\": ButtonGroup;\n  }\n}\n"]}

package/dist/card-grid.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+/**
+ * A responsive auto-filling grid shell for `link-card` (or any card-shaped
+ * content) — each slotted child becomes a grid item, wrapping to a new row
+ * once the container is too narrow for another `15rem` column.
+ *
+ * @element card-grid
+ * @slot - `link-card` elements (or other card-shaped content).
+ */
+export declare class CardGrid extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "card-grid": CardGrid;
+    }
+}
+//# sourceMappingURL=card-grid.d.ts.map

package/dist/card-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-grid.d.ts","sourceRoot":"","sources":["../src/card-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;GAOG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAYpB;IAEO,MAAM,yCAMd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}