@f-ewald/components 1.9.0 → 1.11.0

package/README.md

@@ -50,6 +50,7 @@ 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) |
@@ -77,6 +78,7 @@ import "@f-ewald/components/roman-numeral.js";
 | `<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) |
+| `<markdown-view>` | [API reference](https://f-ewald.github.io/components/docs/markdown-view.html) |
 | `<multi-select>` | [API reference](https://f-ewald.github.io/components/docs/multi-select.html) |
 | `<page-header>` | [API reference](https://f-ewald.github.io/components/docs/page-header.html) |
 | `<pagination-nav>` | [API reference](https://f-ewald.github.io/components/docs/pagination-nav.html) |

package/custom-elements.json

@@ -1877,6 +1877,141 @@
         }
       ]
     },
+    {
+      "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": "iconOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides labels visually (icons only) while keeping them as the accessible name.",
+              "attribute": "icon-only",
+              "reflects": true
+            },
+            {
+              "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"
+            },
+            {
+              "name": "icon-only",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides labels visually (icons only) while keeping them as the accessible name.",
+              "fieldName": "iconOnly"
+            }
+          ],
+          "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",
@@ -5490,6 +5625,46 @@
               "default": "16"
             }
           ]
+        },
+        {
+          "kind": "function",
+          "name": "iconMoon",
+          "parameters": [
+            {
+              "name": "size",
+              "default": "16"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "iconComputerDesktop",
+          "parameters": [
+            {
+              "name": "size",
+              "default": "16"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "iconCodeBracketSquare",
+          "parameters": [
+            {
+              "name": "size",
+              "default": "16"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "iconPuzzlePiece",
+          "parameters": [
+            {
+              "name": "size",
+              "default": "18"
+            }
+          ]
         }
       ],
       "exports": [
@@ -5844,6 +6019,38 @@
             "name": "iconExclamationTriangle",
             "module": "src/icons.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "iconMoon",
+          "declaration": {
+            "name": "iconMoon",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "iconComputerDesktop",
+          "declaration": {
+            "name": "iconComputerDesktop",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "iconCodeBracketSquare",
+          "declaration": {
+            "name": "iconCodeBracketSquare",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "iconPuzzlePiece",
+          "declaration": {
+            "name": "iconPuzzlePiece",
+            "module": "src/icons.ts"
+          }
         }
       ]
     },
@@ -6164,6 +6371,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",
@@ -6556,6 +6779,14 @@
             "module": "./card-grid.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "MarkdownView",
+          "declaration": {
+            "name": "MarkdownView",
+            "module": "./markdown-view.js"
+          }
+        },
         {
           "kind": "js",
           "name": "formatDuration",
@@ -8078,6 +8309,74 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/markdown-view.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Renders a markdown string as sanitized, styled HTML — headings, lists,\ncode, tables, blockquotes, and links all get token-driven styling, with\nwide content (code blocks, tables) scrolling in its own container instead\nof widening the page.\n\nThe markdown source is treated as untrusted: it is always parsed with\n`marked` and sanitized with `DOMPurify` before being injected, never\nrendered as-is.",
+          "name": "MarkdownView",
+          "members": [
+            {
+              "kind": "field",
+              "name": "markdown",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Raw markdown source to render.",
+              "attribute": "markdown"
+            },
+            {
+              "kind": "method",
+              "name": "_renderedHtml",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "markdown",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Raw markdown source to render.",
+              "fieldName": "markdown"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "markdown-view",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MarkdownView",
+          "declaration": {
+            "name": "MarkdownView",
+            "module": "src/markdown-view.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "markdown-view",
+          "declaration": {
+            "name": "MarkdownView",
+            "module": "src/markdown-view.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/mcp-server.ts",
@@ -12048,6 +12347,16 @@
               "description": "Visual weight.",
               "attribute": "variant"
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"sm\" | \"md\""
+              },
+              "default": "\"md\"",
+              "description": "Size — `sm` reduces height/padding/font-size one step below the default.",
+              "attribute": "size"
+            },
             {
               "kind": "field",
               "name": "href",
@@ -12119,6 +12428,15 @@
               "description": "Visual weight.",
               "fieldName": "variant"
             },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"sm\" | \"md\""
+              },
+              "default": "\"md\"",
+              "description": "Size — `sm` reduces height/padding/font-size one step below the default.",
+              "fieldName": "size"
+            },
             {
               "name": "href",
               "type": {

package/dist/button-group.d.ts

@@ -0,0 +1,40 @@
+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;
+    /** Hides labels visually (icons only) while keeping them as the accessible name. */
+    iconOnly: 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,4BA4GpB;IAEF,2CAA2C;IACX,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClE,gCAAgC;IACpB,KAAK,SAAM;IACvB,gDAAgD;IACnB,QAAQ,UAAS;IAC9C,oFAAoF;IAChB,QAAQ,UAAS;IAIrF,OAAO,CAAC,SAAS;IAQR,MAAM,sBAwBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/button-group.js

@@ -0,0 +1,191 @@
+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;
+        /** Hides labels visually (icons only) while keeping them as the accessible name. */
+        this.iconOnly = 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;
+      }
+      :host([icon-only]) .segment {
+        padding: 0.5rem;
+      }
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+      @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}
+                aria-label=${this.iconOnly ? opt.label : nothing}
+                title=${this.iconOnly ? opt.label : nothing}
+                @change=${() => this._onChange(opt.value)}
+              />
+              ${opt.icon ?? nothing}
+              <span class=${this.iconOnly ? "sr-only" : ""}>${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);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "icon-only" })
+], ButtonGroup.prototype, "iconOnly", 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;;QA+GL,2CAA2C;QACX,YAAO,GAAwB,EAAE,CAAC;QAClE,gCAAgC;QACpB,UAAK,GAAG,EAAE,CAAC;QACvB,gDAAgD;QACnB,aAAQ,GAAG,KAAK,CAAC;QAC9C,oFAAoF;QAChB,aAAQ,GAAG,KAAK,CAAC;QAE5E,UAAK,GAAG,gBAAgB,EAAE,aAAa,EAAE,CAAC;IAmCrD,CAAC;aA1JiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyGF;KACF,AA5GqB,CA4GpB;IAWO,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;6BACZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;wBACxC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;0BACjC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;;gBAEzC,GAAG,CAAC,IAAI,IAAI,OAAO;4BACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC,KAAK;;WAE5D,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AA3CiC;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;AAEsB;IAAnE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CAAkB;AAtH1E,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA2JvB","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      :host([icon-only]) .segment {\n        padding: 0.5rem;\n      }\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\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  /** Hides labels visually (icons only) while keeping them as the accessible name. */\n  @property({ type: Boolean, reflect: true, attribute: \"icon-only\" }) iconOnly = 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                aria-label=${this.iconOnly ? opt.label : nothing}\n                title=${this.iconOnly ? opt.label : nothing}\n                @change=${() => this._onChange(opt.value)}\n              />\n              ${opt.icon ?? nothing}\n              <span class=${this.iconOnly ? \"sr-only\" : \"\"}>${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/icons.d.ts

@@ -42,4 +42,8 @@ export declare const iconArrowTopRightOnSquare: (size?: number) => import("lit-h
 export declare const iconAcademicCap: (size?: number) => import("lit-html").TemplateResult<2>;
 export declare const iconQueueList: (size?: number) => import("lit-html").TemplateResult<2>;
 export declare const iconExclamationTriangle: (size?: number) => import("lit-html").TemplateResult<2>;
+export declare const iconMoon: (size?: number) => import("lit-html").TemplateResult<2>;
+export declare const iconComputerDesktop: (size?: number) => import("lit-html").TemplateResult<2>;
+export declare const iconCodeBracketSquare: (size?: number) => import("lit-html").TemplateResult<2>;
+export declare const iconPuzzlePiece: (size?: number) => import("lit-html").TemplateResult<2>;
 //# sourceMappingURL=icons.d.ts.map

package/dist/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK,yDAC2O,CAAC;AAE9P,eAAO,MAAM,SAAS,yDAC+P,CAAC;AAEtR,eAAO,MAAM,eAAe,yDACwO,CAAC;AAErQ,eAAO,MAAM,gBAAgB,yDACqO,CAAC;AAEnQ,eAAO,MAAM,OAAO,yDAC2xC,CAAC;AAEhzC,eAAO,MAAM,QAAQ,yDAC4W,CAAC;AAElY,eAAO,MAAM,sBAAsB,yDAC6Y,CAAC;AAEjb,eAAO,MAAM,UAAU,yDACqX,CAAC;AAE7Y,eAAO,MAAM,SAAS,yDACgnB,CAAC;AAEvoB,eAAO,MAAM,QAAQ,yDAC0O,CAAC;AAEhQ,eAAO,MAAM,cAAc,yDACme,CAAC;AAE/f,eAAO,MAAM,kBAAkB,yDACob,CAAC;AAEpd,eAAO,MAAM,QAAQ,yDAC8b,CAAC;AAEpd,eAAO,MAAM,UAAU,yDACiY,CAAC;AAEzZ,eAAO,MAAM,SAAS,yDACmQ,CAAC;AAE1R,eAAO,MAAM,OAAO,yDACif,CAAC;AAEtgB,eAAO,MAAM,YAAY,yDACib,CAAC;AAE3c,eAAO,MAAM,qBAAqB,yDAC4V,CAAC;AAE/X,eAAO,MAAM,OAAO,yDACyhB,CAAC;AAE9iB,eAAO,MAAM,eAAe,yDAC2Q,CAAC;AAExS,eAAO,MAAM,OAAO,yDACsZ,CAAC;AAE3a,eAAO,MAAM,qBAAqB,yDACma,CAAC;AAEtc,eAAO,MAAM,aAAa,yDACsX,CAAC;AAEjZ,eAAO,MAAM,cAAc,yDACiP,CAAC;AAE7Q,eAAO,MAAM,iBAAiB,yDACuT,CAAC;AAEtV,eAAO,MAAM,mBAAmB,yDACmR,CAAC;AAEpT,eAAO,MAAM,QAAQ,yDAC6X,CAAC;AAEnZ,eAAO,MAAM,SAAS,yDACgX,CAAC;AAEvY,eAAO,MAAM,cAAc,yDAC8f,CAAC;AAE1hB,eAAO,MAAM,OAAO,yDAC4e,CAAC;AAEjgB,eAAO,MAAM,YAAY,yDAC4hB,CAAC;AAEtjB,eAAO,MAAM,eAAe,yDAC+Z,CAAC;AAE5b,eAAO,MAAM,cAAc,yDACqZ,CAAC;AAEjb,eAAO,MAAM,yBAAyB,yDACuxB,CAAC;AAE9zB,eAAO,MAAM,WAAW,yDACge,CAAC;AAEzf,eAAO,MAAM,UAAU,yDACqd,CAAC;AAE7e,eAAO,MAAM,eAAe,yDACuO,CAAC;AAEpQ,eAAO,MAAM,YAAY,yDACid,CAAC;AAE3e,eAAO,MAAM,cAAc,yDACosB,CAAC;AAEhuB,eAAO,MAAM,uBAAuB,yDAC2sB,CAAC;AAEhvB,eAAO,MAAM,yBAAyB,yDACuU,CAAC;AAE9W,eAAO,MAAM,eAAe,yDAC6pB,CAAC;AAE1rB,eAAO,MAAM,aAAa,yDACoU,CAAC;AAE/V,eAAO,MAAM,uBAAuB,yDACqX,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK,yDAC2O,CAAC;AAE9P,eAAO,MAAM,SAAS,yDAC+P,CAAC;AAEtR,eAAO,MAAM,eAAe,yDACwO,CAAC;AAErQ,eAAO,MAAM,gBAAgB,yDACqO,CAAC;AAEnQ,eAAO,MAAM,OAAO,yDAC2xC,CAAC;AAEhzC,eAAO,MAAM,QAAQ,yDAC4W,CAAC;AAElY,eAAO,MAAM,sBAAsB,yDAC6Y,CAAC;AAEjb,eAAO,MAAM,UAAU,yDACqX,CAAC;AAE7Y,eAAO,MAAM,SAAS,yDACgnB,CAAC;AAEvoB,eAAO,MAAM,QAAQ,yDAC0O,CAAC;AAEhQ,eAAO,MAAM,cAAc,yDACme,CAAC;AAE/f,eAAO,MAAM,kBAAkB,yDACob,CAAC;AAEpd,eAAO,MAAM,QAAQ,yDAC8b,CAAC;AAEpd,eAAO,MAAM,UAAU,yDACiY,CAAC;AAEzZ,eAAO,MAAM,SAAS,yDACmQ,CAAC;AAE1R,eAAO,MAAM,OAAO,yDACif,CAAC;AAEtgB,eAAO,MAAM,YAAY,yDACib,CAAC;AAE3c,eAAO,MAAM,qBAAqB,yDAC4V,CAAC;AAE/X,eAAO,MAAM,OAAO,yDACyhB,CAAC;AAE9iB,eAAO,MAAM,eAAe,yDAC2Q,CAAC;AAExS,eAAO,MAAM,OAAO,yDACsZ,CAAC;AAE3a,eAAO,MAAM,qBAAqB,yDACma,CAAC;AAEtc,eAAO,MAAM,aAAa,yDACsX,CAAC;AAEjZ,eAAO,MAAM,cAAc,yDACiP,CAAC;AAE7Q,eAAO,MAAM,iBAAiB,yDACuT,CAAC;AAEtV,eAAO,MAAM,mBAAmB,yDACmR,CAAC;AAEpT,eAAO,MAAM,QAAQ,yDAC6X,CAAC;AAEnZ,eAAO,MAAM,SAAS,yDACgX,CAAC;AAEvY,eAAO,MAAM,cAAc,yDAC8f,CAAC;AAE1hB,eAAO,MAAM,OAAO,yDAC4e,CAAC;AAEjgB,eAAO,MAAM,YAAY,yDAC4hB,CAAC;AAEtjB,eAAO,MAAM,eAAe,yDAC+Z,CAAC;AAE5b,eAAO,MAAM,cAAc,yDACqZ,CAAC;AAEjb,eAAO,MAAM,yBAAyB,yDACuxB,CAAC;AAE9zB,eAAO,MAAM,WAAW,yDACge,CAAC;AAEzf,eAAO,MAAM,UAAU,yDACqd,CAAC;AAE7e,eAAO,MAAM,eAAe,yDACuO,CAAC;AAEpQ,eAAO,MAAM,YAAY,yDACid,CAAC;AAE3e,eAAO,MAAM,cAAc,yDACosB,CAAC;AAEhuB,eAAO,MAAM,uBAAuB,yDAC2sB,CAAC;AAEhvB,eAAO,MAAM,yBAAyB,yDACuU,CAAC;AAE9W,eAAO,MAAM,eAAe,yDAC6pB,CAAC;AAE1rB,eAAO,MAAM,aAAa,yDACoU,CAAC;AAE/V,eAAO,MAAM,uBAAuB,yDACqX,CAAC;AAE1Z,eAAO,MAAM,QAAQ,yDACwY,CAAC;AAE9Z,eAAO,MAAM,mBAAmB,yDACqd,CAAC;AAEtf,eAAO,MAAM,qBAAqB,yDACgX,CAAC;AAEnZ,eAAO,MAAM,eAAe,yDAC+vC,CAAC"}