@f-ewald/components 1.10.0 → 1.12.0

package/README.md

@@ -78,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) |
@@ -98,6 +99,7 @@ import "@f-ewald/components/roman-numeral.js";
 | `<timeline-container>` | [API reference](https://f-ewald.github.io/components/docs/timeline-container.html) |
 | `<timeline-entry>` | [API reference](https://f-ewald.github.io/components/docs/timeline-entry.html) |
 | `<toast-notification>` | [API reference](https://f-ewald.github.io/components/docs/toast-notification.html) |
+| `<tree-view>` | [API reference](https://f-ewald.github.io/components/docs/tree-view.html) |
 | `<ui-button>` | [API reference](https://f-ewald.github.io/components/docs/ui-button.html) |
 | `<user-avatar>` | [API reference](https://f-ewald.github.io/components/docs/user-avatar.html) |
 | `<weight-bar-chart>` | [API reference](https://f-ewald.github.io/components/docs/weight-bar-chart.html) |

package/custom-elements.json

@@ -1915,6 +1915,17 @@
               "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",
@@ -1963,6 +1974,15 @@
               "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": {
@@ -5605,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": [
@@ -5959,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"
+          }
         }
       ]
     },
@@ -6439,6 +6531,22 @@
             "module": "./tile-grid.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "TreeView",
+          "declaration": {
+            "name": "TreeView",
+            "module": "./tree-view.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TreeNode",
+          "declaration": {
+            "name": "TreeNode",
+            "module": "./tree-view.js"
+          }
+        },
         {
           "kind": "js",
           "name": "PopoverPanel",
@@ -6687,6 +6795,14 @@
             "module": "./card-grid.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "MarkdownView",
+          "declaration": {
+            "name": "MarkdownView",
+            "module": "./markdown-view.js"
+          }
+        },
         {
           "kind": "js",
           "name": "formatDuration",
@@ -8209,6 +8325,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",
@@ -12136,6 +12320,237 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tree-view.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A generic, presentational tree shell: renders `nodes` recursively, one row\nper node, with each row's content produced by `renderNode` (default: plain\nlabel). Modeled on `data-table`'s headless pattern — knows nothing about\nwhat a node's `data` means beyond what `renderNode` does with it.\n\nA node with a `children` array (even empty) is a folder: clicking or\nactivating its row toggles expand/collapse instead of firing `node-click`.\nA node with no `children` is a leaf: clicking or activating its row fires\n`node-click`. Folders start collapsed; set `default-expanded` to start\nevery folder expanded instead. Expansion state is otherwise managed\ninternally and untouched by later `nodes` updates, so a user's manual\ntoggles survive a data refresh.",
+          "name": "TreeView",
+          "members": [
+            {
+              "kind": "field",
+              "name": "nodes",
+              "type": {
+                "text": "TreeNode[]"
+              },
+              "default": "[]",
+              "description": "Tree data; opaque to this component beyond what `renderNode` does with it."
+            },
+            {
+              "kind": "field",
+              "name": "renderNode",
+              "type": {
+                "text": "(node: TreeNode) => unknown"
+              },
+              "description": "Produces a row's rendered content for `node`. Default: plain label text."
+            },
+            {
+              "kind": "field",
+              "name": "defaultExpanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Start every folder expanded instead of the default all-collapsed.",
+              "attribute": "default-expanded"
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "privacy": "private",
+              "default": "new Set<string>()"
+            },
+            {
+              "kind": "field",
+              "name": "#initializedExpansion",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "#toggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "id",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#activate",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "node",
+                  "type": {
+                    "text": "TreeNode"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#onKeydown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "node",
+                  "type": {
+                    "text": "TreeNode"
+                  }
+                },
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#onRowClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "node",
+                  "type": {
+                    "text": "TreeNode"
+                  }
+                },
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#isNestedInteractive",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "path",
+                  "type": {
+                    "text": "EventTarget[]"
+                  }
+                },
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "EventTarget | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#renderNode",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "node",
+                  "type": {
+                    "text": "TreeNode"
+                  }
+                },
+                {
+                  "name": "depth",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "node-click",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "A leaf row was activated; detail is `{ id, data }`."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "default-expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Start every folder expanded instead of the default all-collapsed.",
+              "fieldName": "defaultExpanded"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "tree-view",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TreeView",
+          "declaration": {
+            "name": "TreeView",
+            "module": "src/tree-view.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "tree-view",
+          "declaration": {
+            "name": "TreeView",
+            "module": "src/tree-view.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/ui-button.ts",
@@ -12179,6 +12594,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",
@@ -12250,6 +12675,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

@@ -27,6 +27,8 @@ export declare class ButtonGroup extends LitElement {
     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>;
 }

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

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

@@ -30,6 +30,8 @@ let ButtonGroup = class ButtonGroup extends LitElement {
         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 = [
@@ -110,6 +112,20 @@ let ButtonGroup = class ButtonGroup extends LitElement {
         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;
@@ -144,10 +160,12 @@ let ButtonGroup = class ButtonGroup extends LitElement {
                 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>${opt.label}</span>
+              <span class=${this.iconOnly ? "sr-only" : ""}>${opt.label}</span>
             </label>
           `)}
       </div>
@@ -163,6 +181,9 @@ __decorate([
 __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);

package/dist/button-group.js.map

@@ -1 +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"]}
+{"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"}

package/dist/icons.js

@@ -45,4 +45,8 @@ export const iconArrowTopRightOnSquare = (size = 16) => svg `<svg xmlns="http://
 export const iconAcademicCap = (size = 18) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"/></svg>`;
 export const iconQueueList = (size = 16) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z"/></svg>`;
 export const iconExclamationTriangle = (size = 16) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>`;
+export const iconMoon = (size = 16) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"/></svg>`;
+export const iconComputerDesktop = (size = 16) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"/></svg>`;
+export const iconCodeBracketSquare = (size = 16) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"/></svg>`;
+export const iconPuzzlePiece = (size = 18) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z"/></svg>`;
 //# sourceMappingURL=icons.js.map