@ktbsh/ui 0.2.0 → 0.3.0

package/dist/custom-elements.json

@@ -207,6 +207,45 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "vanilla/preset-toggle.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KitbashPresetToggle",
+          "customElement": true,
+          "tagName": "kitbash-preset-toggle",
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "String"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "storageKey",
+              "type": {
+                "text": "String"
+              },
+              "default": "\"ui-mode\""
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "kitbash-preset-toggle",
+          "declaration": {
+            "name": "KitbashPresetToggle",
+            "module": "vanilla/preset-toggle.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "vanilla/toast.js",
@@ -564,6 +603,98 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "vanilla/theme-toggle.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KitbashThemeToggle",
+          "customElement": true,
+          "tagName": "kitbash-theme-toggle",
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "String"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "storageKey",
+              "type": {
+                "text": "String"
+              },
+              "default": "\"theme\""
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "kitbash-theme-toggle",
+          "declaration": {
+            "name": "KitbashThemeToggle",
+            "module": "vanilla/theme-toggle.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "vanilla/scroll-top.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KitbashScrollTop",
+          "customElement": true,
+          "tagName": "kitbash-scroll-top",
+          "attributes": [
+            {
+              "name": "visible",
+              "type": {
+                "text": "Boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "String"
+              },
+              "default": "\"Scroll to top\""
+            },
+            {
+              "name": "caption",
+              "type": {
+                "text": "String"
+              },
+              "default": "\"$ top\""
+            },
+            {
+              "name": "behavior",
+              "type": {
+                "text": "String"
+              },
+              "default": "\"smooth\""
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "kitbash-scroll-top",
+          "declaration": {
+            "name": "KitbashScrollTop",
+            "module": "vanilla/scroll-top.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "vanilla/switch.js",
@@ -744,6 +875,30 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "vanilla/toggle-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KitbashToggleGroup",
+          "customElement": true,
+          "tagName": "kitbash-toggle-group",
+          "attributes": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "kitbash-toggle-group",
+          "declaration": {
+            "name": "KitbashToggleGroup",
+            "module": "vanilla/toggle-group.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "vanilla/stack.js",

package/dist/react/preset-toggle.d.ts

@@ -0,0 +1,18 @@
+
+import * as React from 'react';
+
+export interface KitbashPresetToggleProps extends React.HTMLAttributes<HTMLElement> {
+  'value'?: string;
+  'storageKey'?: string;
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-preset-toggle': KitbashPresetToggleProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashPresetToggle: React.ForwardRefExoticComponent<KitbashPresetToggleProps & React.RefAttributes<HTMLElement>>;

package/dist/react/preset-toggle.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/preset-toggle.js';
+
+export const KitbashPresetToggle = React.forwardRef(({ children, onKitbashChange, ...props }, ref) => {
+  const innerRef = React.useRef(null);
+
+  // kitbash-change is a CustomEvent — bridge manually. Native events (onClick, etc.)
+  // stay on ...props so React 19 binds them once (no double-fire).
+  React.useEffect(() => {
+    const el = innerRef.current;
+    if (!el || !onKitbashChange) return;
+
+    const handleCustomChange = (e) => onKitbashChange(e);
+    el.addEventListener('kitbash-change', handleCustomChange);
+    return () => el.removeEventListener('kitbash-change', handleCustomChange);
+  }, [onKitbashChange]);
+
+  // Callback ref: assign + clear on unmount / ref change (object + function refs).
+  const setRefs = React.useCallback((node) => {
+    innerRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref && typeof ref === 'object') {
+      ref.current = node;
+    }
+  }, [ref]);
+
+  return React.createElement('kitbash-preset-toggle', { ref: setRefs, ...props }, children);
+});

package/dist/react/scroll-top.d.ts

@@ -0,0 +1,20 @@
+
+import * as React from 'react';
+
+export interface KitbashScrollTopProps extends React.HTMLAttributes<HTMLElement> {
+  'visible'?: boolean;
+  'label'?: string;
+  'caption'?: string;
+  'behavior'?: string;
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-scroll-top': KitbashScrollTopProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashScrollTop: React.ForwardRefExoticComponent<KitbashScrollTopProps & React.RefAttributes<HTMLElement>>;

package/dist/react/scroll-top.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/scroll-top.js';
+
+export const KitbashScrollTop = React.forwardRef(({ children, onKitbashChange, ...props }, ref) => {
+  const innerRef = React.useRef(null);
+
+  // kitbash-change is a CustomEvent — bridge manually. Native events (onClick, etc.)
+  // stay on ...props so React 19 binds them once (no double-fire).
+  React.useEffect(() => {
+    const el = innerRef.current;
+    if (!el || !onKitbashChange) return;
+
+    const handleCustomChange = (e) => onKitbashChange(e);
+    el.addEventListener('kitbash-change', handleCustomChange);
+    return () => el.removeEventListener('kitbash-change', handleCustomChange);
+  }, [onKitbashChange]);
+
+  // Callback ref: assign + clear on unmount / ref change (object + function refs).
+  const setRefs = React.useCallback((node) => {
+    innerRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref && typeof ref === 'object') {
+      ref.current = node;
+    }
+  }, [ref]);
+
+  return React.createElement('kitbash-scroll-top', { ref: setRefs, ...props }, children);
+});

package/dist/react/theme-toggle.d.ts

@@ -0,0 +1,18 @@
+
+import * as React from 'react';
+
+export interface KitbashThemeToggleProps extends React.HTMLAttributes<HTMLElement> {
+  'value'?: string;
+  'storageKey'?: string;
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-theme-toggle': KitbashThemeToggleProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashThemeToggle: React.ForwardRefExoticComponent<KitbashThemeToggleProps & React.RefAttributes<HTMLElement>>;

package/dist/react/theme-toggle.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/theme-toggle.js';
+
+export const KitbashThemeToggle = React.forwardRef(({ children, onKitbashChange, ...props }, ref) => {
+  const innerRef = React.useRef(null);
+
+  // kitbash-change is a CustomEvent — bridge manually. Native events (onClick, etc.)
+  // stay on ...props so React 19 binds them once (no double-fire).
+  React.useEffect(() => {
+    const el = innerRef.current;
+    if (!el || !onKitbashChange) return;
+
+    const handleCustomChange = (e) => onKitbashChange(e);
+    el.addEventListener('kitbash-change', handleCustomChange);
+    return () => el.removeEventListener('kitbash-change', handleCustomChange);
+  }, [onKitbashChange]);
+
+  // Callback ref: assign + clear on unmount / ref change (object + function refs).
+  const setRefs = React.useCallback((node) => {
+    innerRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref && typeof ref === 'object') {
+      ref.current = node;
+    }
+  }, [ref]);
+
+  return React.createElement('kitbash-theme-toggle', { ref: setRefs, ...props }, children);
+});

package/dist/react/toggle-group.d.ts

@@ -0,0 +1,17 @@
+
+import * as React from 'react';
+
+export interface KitbashToggleGroupProps extends React.HTMLAttributes<HTMLElement> {
+  
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-toggle-group': KitbashToggleGroupProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashToggleGroup: React.ForwardRefExoticComponent<KitbashToggleGroupProps & React.RefAttributes<HTMLElement>>;

package/dist/react/toggle-group.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/toggle-group.js';
+
+export const KitbashToggleGroup = React.forwardRef(({ children, onKitbashChange, ...props }, ref) => {
+  const innerRef = React.useRef(null);
+
+  // kitbash-change is a CustomEvent — bridge manually. Native events (onClick, etc.)
+  // stay on ...props so React 19 binds them once (no double-fire).
+  React.useEffect(() => {
+    const el = innerRef.current;
+    if (!el || !onKitbashChange) return;
+
+    const handleCustomChange = (e) => onKitbashChange(e);
+    el.addEventListener('kitbash-change', handleCustomChange);
+    return () => el.removeEventListener('kitbash-change', handleCustomChange);
+  }, [onKitbashChange]);
+
+  // Callback ref: assign + clear on unmount / ref change (object + function refs).
+  const setRefs = React.useCallback((node) => {
+    innerRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref && typeof ref === 'object') {
+      ref.current = node;
+    }
+  }, [ref]);
+
+  return React.createElement('kitbash-toggle-group', { ref: setRefs, ...props }, children);
+});

package/dist/vanilla/checkbox.js

@@ -9,29 +9,73 @@ var d=(_,U,B,Y,I)=>{let W=B.length,J=U.length,z=W,O=0,$=0,X=null;while(O<J||$<z)
       color: var(--kb-color-fg-default);
     }
     input {
-      width: 1.125rem;
-      height: 1.125rem;
-      min-width: 1.125rem;
-      min-height: 1.125rem;
+      appearance: none;
+      -webkit-appearance: none;
+      box-sizing: border-box;
+      width: 1.15em;
+      height: 1.15em;
+      min-width: 1.15em;
+      min-height: 1.15em;
       margin: 0;
-      accent-color: var(--kb-color-accent-default);
+      flex-shrink: 0;
+      display: grid;
+      place-content: center;
+      border: 2px solid var(--kb-color-border-default);
+      border-radius: var(--kb-radius-sm);
+      background: var(--kb-color-bg-canvas);
+      color: var(--kb-color-fg-on-accent);
       cursor: pointer;
+      transition:
+        background-color 0.12s ease,
+        border-color 0.12s ease,
+        box-shadow 0.12s ease;
+    }
+    input::before {
+      content: '';
+      width: 0.65em;
+      height: 0.65em;
+      transform: scale(0);
+      transition: transform 0.12s ease;
+      box-shadow: inset 1em 1em currentColor;
+      clip-path: polygon(
+        14% 44%,
+        0 65%,
+        50% 100%,
+        100% 16%,
+        80% 0%,
+        43% 62%
+      );
+    }
+    input:hover:not(:disabled) {
+      border-color: var(--kb-color-border-focus);
+    }
+    input:checked {
+      background: var(--kb-color-accent-default);
+      border-color: var(--kb-color-accent-default);
+    }
+    input:checked::before {
+      transform: scale(1);
     }
     input:focus-visible {
       outline: none;
       box-shadow: var(--kb-focus-ring);
-      border-radius: var(--kb-radius-sm);
     }
     input:disabled {
       cursor: not-allowed;
-      opacity: 0.55;
+      opacity: 0.5;
     }
-    input[aria-invalid="true"] {
-      outline: 1px solid var(--kb-color-danger-default);
+    input[aria-invalid='true'] {
+      border-color: var(--kb-color-danger-default);
     }
     .label {
       line-height: var(--kb-line-height-normal);
     }
+    @media (prefers-reduced-motion: reduce) {
+      input,
+      input::before {
+        transition: none;
+      }
+    }
   `);class L1 extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["name","value","checked","disabled","required","invalid"]}static get propTypes(){return{name:"String",value:"String",checked:"Boolean",disabled:"Boolean",required:"Boolean",invalid:"Boolean"}}get name(){return this._props.name}set name(_){this._assignProp("name",_),this.update()}get value(){return this._props.value}set value(_){this._assignProp("value",_),this.update()}get checked(){return this._props.checked}set checked(_){this._assignProp("checked",_),this.update()}get disabled(){return this._props.disabled}set disabled(_){this._assignProp("disabled",_),this.update()}get required(){return this._props.required}set required(_){this._assignProp("required",_),this.update()}get invalid(){return this._props.invalid}set invalid(_){this._assignProp("invalid",_),this.update()}constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!0}),this._internals=this.attachInternals(),this.shadowRoot.adoptedStyleSheets=[G1],this._defaults={name:"",value:"on",checked:!1,disabled:!1,required:!1,invalid:!1},this._state={},this._props={...this._defaults},this._eventHandlers={"change input":function(_,{commit:U}){let B=_.target;U({props:{checked:B.checked}})}},this._eventCleanup=[],this._renderFn=function({props:_,html:U}){return U`
       <input
         part="checkbox-root"

package/dist/vanilla/checkbox.src.js

@@ -2,7 +2,7 @@
 import { render, html } from 'uhtml';
 
 const sheet = new CSSStyleSheet();
-sheet.replaceSync("\n\n    :host {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--kb-space-sm);\n      font-family: var(--kb-font-family-sans);\n      font-size: var(--kb-font-size-md);\n      color: var(--kb-color-fg-default);\n    }\n    input {\n      width: 1.125rem;\n      height: 1.125rem;\n      min-width: 1.125rem;\n      min-height: 1.125rem;\n      margin: 0;\n      accent-color: var(--kb-color-accent-default);\n      cursor: pointer;\n    }\n    input:focus-visible {\n      outline: none;\n      box-shadow: var(--kb-focus-ring);\n      border-radius: var(--kb-radius-sm);\n    }\n    input:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n    input[aria-invalid=\"true\"] {\n      outline: 1px solid var(--kb-color-danger-default);\n    }\n    .label {\n      line-height: var(--kb-line-height-normal);\n    }\n  ");
+sheet.replaceSync("\n\n    :host {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--kb-space-sm);\n      font-family: var(--kb-font-family-sans);\n      font-size: var(--kb-font-size-md);\n      color: var(--kb-color-fg-default);\n    }\n    input {\n      appearance: none;\n      -webkit-appearance: none;\n      box-sizing: border-box;\n      width: 1.15em;\n      height: 1.15em;\n      min-width: 1.15em;\n      min-height: 1.15em;\n      margin: 0;\n      flex-shrink: 0;\n      display: grid;\n      place-content: center;\n      border: 2px solid var(--kb-color-border-default);\n      border-radius: var(--kb-radius-sm);\n      background: var(--kb-color-bg-canvas);\n      color: var(--kb-color-fg-on-accent);\n      cursor: pointer;\n      transition:\n        background-color 0.12s ease,\n        border-color 0.12s ease,\n        box-shadow 0.12s ease;\n    }\n    input::before {\n      content: '';\n      width: 0.65em;\n      height: 0.65em;\n      transform: scale(0);\n      transition: transform 0.12s ease;\n      box-shadow: inset 1em 1em currentColor;\n      clip-path: polygon(\n        14% 44%,\n        0 65%,\n        50% 100%,\n        100% 16%,\n        80% 0%,\n        43% 62%\n      );\n    }\n    input:hover:not(:disabled) {\n      border-color: var(--kb-color-border-focus);\n    }\n    input:checked {\n      background: var(--kb-color-accent-default);\n      border-color: var(--kb-color-accent-default);\n    }\n    input:checked::before {\n      transform: scale(1);\n    }\n    input:focus-visible {\n      outline: none;\n      box-shadow: var(--kb-focus-ring);\n    }\n    input:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n    input[aria-invalid='true'] {\n      border-color: var(--kb-color-danger-default);\n    }\n    .label {\n      line-height: var(--kb-line-height-normal);\n    }\n    @media (prefers-reduced-motion: reduce) {\n      input,\n      input::before {\n        transition: none;\n      }\n    }\n  ");
 
 export class KitbashCheckbox extends HTMLElement {
   static formAssociated = true;

package/dist/vanilla/input.js

@@ -38,6 +38,12 @@ var p=(_,U,B,Y,z)=>{let X=B.length,O=U.length,J=X,Q=0,Z=0,$=null;while(Q<O||Z<J)
       outline: none;
       font-family: inherit;
       line-height: var(--kb-line-height-normal);
+      transition:
+        border-color 0.12s ease,
+        box-shadow 0.12s ease;
+    }
+    input:hover:not(:disabled):not(:read-only) {
+      border-color: var(--kitbash-input-border-focus);
     }
     :host([size="sm"]) input {
       min-height: 2rem;

package/dist/vanilla/input.src.js

@@ -2,7 +2,7 @@
 import { render, html } from 'uhtml';
 
 const sheet = new CSSStyleSheet();
-sheet.replaceSync("\n\n    :host {\n      display: inline-block;\n      width: 100%;\n      --kitbash-input-border: var(--kb-color-border-default);\n      --kitbash-input-border-focus: var(--kb-color-border-focus);\n      --kitbash-input-border-invalid: var(--kb-color-danger-default);\n      --kitbash-input-padding-y: var(--kb-space-sm);\n      --kitbash-input-padding-x: var(--kb-space-md);\n      --kitbash-input-radius: var(--kb-radius-sm);\n      --kitbash-input-bg: var(--kb-color-bg-canvas);\n      --kitbash-input-fg: var(--kb-color-fg-default);\n      --kitbash-input-focus-ring: var(--kb-focus-ring);\n      --kitbash-input-font: var(--kb-font-size-md);\n      font-family: var(--kb-font-family-sans);\n    }\n    :host([size=\"sm\"]) {\n      --kitbash-input-padding-y: var(--kb-space-xs);\n      --kitbash-input-padding-x: var(--kb-space-sm);\n      --kitbash-input-font: var(--kb-font-size-sm);\n    }\n    :host([size=\"lg\"]) {\n      --kitbash-input-padding-y: var(--kb-space-md);\n      --kitbash-input-padding-x: var(--kb-space-md);\n      --kitbash-input-font: var(--kb-font-size-lg);\n    }\n    input {\n      box-sizing: border-box;\n      width: 100%;\n      min-height: 2.25rem;\n      padding: var(--kitbash-input-padding-y) var(--kitbash-input-padding-x);\n      border: 1px solid var(--kitbash-input-border);\n      border-radius: var(--kitbash-input-radius);\n      background-color: var(--kitbash-input-bg);\n      color: var(--kitbash-input-fg);\n      font-size: var(--kitbash-input-font);\n      outline: none;\n      font-family: inherit;\n      line-height: var(--kb-line-height-normal);\n    }\n    :host([size=\"sm\"]) input {\n      min-height: 2rem;\n    }\n    :host([size=\"lg\"]) input {\n      min-height: 2.75rem;\n    }\n    input::placeholder {\n      color: var(--kb-color-fg-subtle);\n    }\n    input:focus {\n      border-color: var(--kitbash-input-border-focus);\n      box-shadow: var(--kitbash-input-focus-ring);\n    }\n    input:disabled {\n      opacity: 0.55;\n      cursor: not-allowed;\n    }\n    input[aria-invalid=\"true\"] {\n      border-color: var(--kitbash-input-border-invalid);\n    }\n  ");
+sheet.replaceSync("\n\n    :host {\n      display: inline-block;\n      width: 100%;\n      --kitbash-input-border: var(--kb-color-border-default);\n      --kitbash-input-border-focus: var(--kb-color-border-focus);\n      --kitbash-input-border-invalid: var(--kb-color-danger-default);\n      --kitbash-input-padding-y: var(--kb-space-sm);\n      --kitbash-input-padding-x: var(--kb-space-md);\n      --kitbash-input-radius: var(--kb-radius-sm);\n      --kitbash-input-bg: var(--kb-color-bg-canvas);\n      --kitbash-input-fg: var(--kb-color-fg-default);\n      --kitbash-input-focus-ring: var(--kb-focus-ring);\n      --kitbash-input-font: var(--kb-font-size-md);\n      font-family: var(--kb-font-family-sans);\n    }\n    :host([size=\"sm\"]) {\n      --kitbash-input-padding-y: var(--kb-space-xs);\n      --kitbash-input-padding-x: var(--kb-space-sm);\n      --kitbash-input-font: var(--kb-font-size-sm);\n    }\n    :host([size=\"lg\"]) {\n      --kitbash-input-padding-y: var(--kb-space-md);\n      --kitbash-input-padding-x: var(--kb-space-md);\n      --kitbash-input-font: var(--kb-font-size-lg);\n    }\n    input {\n      box-sizing: border-box;\n      width: 100%;\n      min-height: 2.25rem;\n      padding: var(--kitbash-input-padding-y) var(--kitbash-input-padding-x);\n      border: 1px solid var(--kitbash-input-border);\n      border-radius: var(--kitbash-input-radius);\n      background-color: var(--kitbash-input-bg);\n      color: var(--kitbash-input-fg);\n      font-size: var(--kitbash-input-font);\n      outline: none;\n      font-family: inherit;\n      line-height: var(--kb-line-height-normal);\n      transition:\n        border-color 0.12s ease,\n        box-shadow 0.12s ease;\n    }\n    input:hover:not(:disabled):not(:read-only) {\n      border-color: var(--kitbash-input-border-focus);\n    }\n    :host([size=\"sm\"]) input {\n      min-height: 2rem;\n    }\n    :host([size=\"lg\"]) input {\n      min-height: 2.75rem;\n    }\n    input::placeholder {\n      color: var(--kb-color-fg-subtle);\n    }\n    input:focus {\n      border-color: var(--kitbash-input-border-focus);\n      box-shadow: var(--kitbash-input-focus-ring);\n    }\n    input:disabled {\n      opacity: 0.55;\n      cursor: not-allowed;\n    }\n    input[aria-invalid=\"true\"] {\n      border-color: var(--kitbash-input-border-invalid);\n    }\n  ");
 
 export class KitbashInput extends HTMLElement {
   static formAssociated = true;

package/dist/vanilla/preset-toggle.d.ts

@@ -0,0 +1,2 @@
+/** Side-effect import — registers the custom element. */
+export {};

package/dist/vanilla/preset-toggle.js

@@ -0,0 +1,72 @@
+var u=(_,U,B,Y,z)=>{let O=B.length,J=U.length,I=O,Q=0,$=0,X=null;while(Q<J||$<I)if(J===Q){let W=I<O?$?Y(B[$-1],-0).nextSibling:Y(B[I],0):z;while($<I)_.insertBefore(Y(B[$++],1),W)}else if(I===$)while(Q<J){if(!X||!X.has(U[Q]))_.removeChild(Y(U[Q],-1));Q++}else if(U[Q]===B[$])Q++,$++;else if(U[J-1]===B[I-1])J--,I--;else if(U[Q]===B[I-1]&&B[$]===U[J-1]){let W=Y(U[--J],-0).nextSibling;_.insertBefore(Y(B[$++],1),Y(U[Q++],-0).nextSibling),_.insertBefore(Y(B[--I],1),W),U[J]=B[I]}else{if(!X){X=new Map;let W=$;while(W<I)X.set(B[W],W++)}if(X.has(U[Q])){let W=X.get(U[Q]);if($<W&&W<I){let Z=Q,K=1;while(++Z<J&&Z<I&&X.get(U[Z])===W+K)K++;if(K>W-$){let M=Y(U[Q],0);while($<W)_.insertBefore(Y(B[$++],1),M)}else _.replaceChild(Y(B[$++],1),Y(U[Q++],-1))}else Q++}else _.removeChild(Y(U[Q++],-1))}return B};var{isArray:E}=Array,{getPrototypeOf:D1,getOwnPropertyDescriptor:M1}=Object;var i="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),R=(_,U,B)=>{return _.set(U,B),B},m=(_,U)=>{let B;do B=M1(_,U);while(!B&&(_=D1(_)));return B},o=(_,U)=>U.reduceRight(R1,_),R1=(_,U)=>_.childNodes[U];var s=1;var l=8;var r=11;var{setPrototypeOf:T1}=Object,n=(_)=>{function U(B){return T1(B,new.target.prototype)}return U.prototype=_.prototype,U};var T,V=(_,U,B)=>{if(!T)T=N();if(B)T.setStartAfter(_);else T.setStartBefore(_);return T.setEndAfter(U),T.deleteContents(),_};var w=({firstChild:_,lastChild:U},B)=>V(_,U,B),t=!1,j=(_,U)=>t&&_.nodeType===r?1/U<0?U?w(_,!0):_.lastChild:U?_.valueOf():_.firstChild:_,a=(_)=>document.createComment(_);class x extends n(DocumentFragment){#U=a("<>");#B=a("</>");#_=q;constructor(_){super(_);this.replaceChildren(...[this.#U,..._.childNodes,this.#B]),t=!0}get firstChild(){return this.#U}get lastChild(){return this.#B}get parentNode(){return this.#U.parentNode}remove(){w(this,!1)}replaceWith(_){w(this,!0).replaceWith(_)}valueOf(){let{parentNode:_}=this;if(_===this){if(this.#_===q)this.#_=[...this.childNodes]}else{if(_){let{firstChild:U,lastChild:B}=this;this.#_=[U];while(U!==B)this.#_.push(U=U.nextSibling)}this.replaceChildren(...this.#_)}return this}}var e=(_,U,B)=>_.setAttribute(U,B),F=(_,U)=>_.removeAttribute(U),H1=(_,U)=>{for(let B in U){let Y=U[B],z=B==="role"?B:`aria-${B}`;if(Y==null)F(_,z);else e(_,z,Y)}return U},C,F1=(_,U,B)=>{if(B=B.slice(1),!C)C=new WeakMap;let Y=C.get(_)||R(C,_,{}),z=Y[B];if(z&&z[0])_.removeEventListener(B,...z);if(z=E(U)?U:[U,!1],Y[B]=z,z[0])_.addEventListener(B,...z);return U};var G=(_,U)=>{let{t:B,n:Y}=_,z=!1;switch(typeof U){case"object":if(U!==null){(Y||B).replaceWith(_.n=U.valueOf());break}case"undefined":z=!0;default:if(B.data=z?"":U,Y)_.n=null,Y.replaceWith(B);break}return U},P1=(_,U)=>f(_,U,U==null?"class":"className"),A1=(_,U)=>{let{dataset:B}=_;for(let Y in U)if(U[Y]==null)delete B[Y];else B[Y]=U[Y];return U},k=(_,U,B)=>_[B]=U,E1=(_,U,B)=>k(_,U,B.slice(1)),f=(_,U,B)=>U==null?(F(_,B),U):k(_,U,B),_1=(_,U)=>(typeof U==="function"?U(_):U.current=_,U),y=(_,U,B)=>(U==null?F(_,B):e(_,B,U),U),N1=(_,U)=>U==null?f(_,U,"style"):k(_.style,U,"cssText"),V1=(_,U,B)=>(_.toggleAttribute(B.slice(1),U),U),D=(_,U,B)=>{let{length:Y}=U;if(_.data=`[${Y}]`,Y)return u(_.parentNode,B,U,j,_);switch(B.length){case 1:B[0].remove();case 0:break;default:V(j(B[0],0),j(B.at(-1),-0),!1);break}return q},U1=new Map([["aria",H1],["class",P1],["data",A1],["ref",_1],["style",N1]]),B1=(_,U,B)=>{switch(U[0]){case".":return E1;case"?":return V1;case"@":return F1;default:return B||"ownerSVGElement"in _?U==="ref"?_1:y:U1.get(U)||(U in _?U.startsWith("on")?k:m(_,U)?.set?f:y:y)}},Y1=(_,U)=>(_.textContent=U==null?"":U,U);var H=(_,U,B)=>({a:_,b:U,c:B}),z1=(_,U)=>({b:_,c:U}),I1=(_,U,B,Y)=>({v:q,u:_,t:U,n:B,c:Y}),L=()=>H(null,null,q);var b=(_)=>(U,B)=>{let{a:Y,b:z,c:O}=_(U,B),J=document.importNode(Y,!0),I=q;if(z!==q){I=[];for(let Q,$,X=0;X<z.length;X++){let{a:W,b:Z,c:K}=z[X],M=W===$?Q:Q=o(J,$=W);I[X]=I1(Z,M,K,Z===D?[]:Z===G?L():null)}}return z1(O?J.firstChild:new x(J),I)};var J1=/^(?:plaintext|script|style|textarea|title|xmp)$/i,O1=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;var j1=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,C1=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,k1=/[\x01\x02]/g,Q1=(_,U,B)=>{let Y=0;return _.join("\x01").trim().replace(j1,(z,O,J,I)=>`<${O}${J.replace(C1,"\x02=$2$1").trimEnd()}${I?B||O1.test(O)?" /":`></${O}`:""}>`).replace(k1,(z)=>z==="\x01"?`<!--${U+Y++}-->`:U+Y++)};var S=document.createElement("template"),g,h,W1=(_,U)=>{if(U){if(!g)g=document.createElementNS(i,"svg"),h=N(),h.selectNodeContents(g);return h.createContextualFragment(_)}S.innerHTML=_;let{content:B}=S;return S=S.cloneNode(!1),B};var c=(_)=>{let U=[],B;while(B=_.parentNode)U.push(U.indexOf.call(B.childNodes,_)),_=B;return U},X1=()=>document.createTextNode(""),S1=(_,U,B)=>{let Y=W1(Q1(_,P,B),B),{length:z}=_,O=q;if(z>1){let Q=[],$=document.createTreeWalker(Y,129),X=0,W=`${P}${X++}`;O=[];while(X<z){let Z=$.nextNode();if(Z.nodeType===l){if(Z.data===W){let K=E(U[X-1])?D:G;if(K===G)Q.push(Z);O.push(H(c(Z),K,null)),W=`${P}${X++}`}}else{let K;while(Z.hasAttribute(W)){if(!K)K=c(Z);let M=Z.getAttribute(W);O.push(H(K,B1(Z,M,B),M)),F(Z,W),W=`${P}${X++}`}if(!B&&J1.test(Z.localName)&&Z.textContent.trim()===`<!--${W}-->`)O.push(H(K||c(Z),Y1,null)),W=`${P}${X++}`}}for(X=0;X<Q.length;X++)Q[X].replaceWith(X1())}let{childNodes:J}=Y,{length:I}=J;if(I<1)I=1,Y.appendChild(X1());else if(I===1&&z!==1&&J[0].nodeType!==s)I=0;return R($1,_,H(Y,O,I===1))},$1=new WeakMap,P="isµ",v=(_)=>(U,B)=>$1.get(U)||S1(U,B,_);var w1=b(v(!1)),x1=b(v(!0)),p=(_,{s:U,t:B,v:Y})=>{if(_.a!==B){let{b:z,c:O}=(U?x1:w1)(B,Y);_.a=B,_.b=z,_.c=O}for(let{c:z}=_,O=0;O<z.length;O++){let J=Y[O],I=z[O];switch(I.u){case D:I.v=D(I.t,y1(I.c,J),I.v);break;case G:let Q=J instanceof A?p(I.c||(I.c=L()),J):(I.c=null,J);if(Q!==I.v)I.v=G(I,Q);break;default:if(J!==I.v)I.v=I.u(I.t,J,I.n,I.v);break}}return _.b},y1=(_,U)=>{let B=0,{length:Y}=U;if(Y<_.length)_.splice(Y);for(;B<Y;B++){let z=U[B];if(z instanceof A)U[B]=p(_[B]||(_[B]=L()),z);else _[B]=null}return U};class A{constructor(_,U,B){this.s=_,this.t=U,this.v=B}toDOM(_=L()){return p(_,this)}}var Z1=new WeakMap,d=(_,U)=>{let B=Z1.get(_)||R(Z1,_,L()),{b:Y}=B;if(Y!==(typeof U==="function"?U():U).toDOM(B))_.replaceChildren(B.b.valueOf());return _};/*! (c) Andrea Giammarchi - MIT */var K1=(_)=>(U,...B)=>new A(_,U,B),q1=K1(!1),C_=K1(!0);var G1=new CSSStyleSheet;G1.replaceSync(`
+
+    :host {
+      display: inline-block;
+      font-family: var(--kb-font-family-sans);
+    }
+    button {
+      box-sizing: border-box;
+      margin: 0;
+      min-height: 2.25rem;
+      padding: 0.45rem 0.8rem;
+      border: 1px solid var(--kb-color-border-default);
+      border-radius: var(--kb-radius-sm);
+      background: var(--kb-color-bg-subtle);
+      color: var(--kb-color-accent-default);
+      font: inherit;
+      font-size: var(--kb-font-size-sm);
+      font-weight: var(--kb-font-weight-medium);
+      line-height: 1;
+      letter-spacing: 0.08em;
+      text-transform: lowercase;
+      cursor: pointer;
+      transition:
+        color 0.2s ease,
+        background-color 0.2s ease,
+        border-color 0.2s ease;
+    }
+    button:hover {
+      color: var(--kb-color-fg-default);
+      background: var(--kb-color-bg-surface);
+      border-color: var(--kb-color-border-focus);
+    }
+    button:focus-visible {
+      outline: 2px solid var(--kb-color-border-focus);
+      outline-offset: 2px;
+      color: var(--kb-color-fg-default);
+      background: var(--kb-color-bg-surface);
+    }
+    :host([data-group-pos="start"]) button {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-right-width: 0;
+    }
+    :host([data-group-pos="end"]) button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    :host([data-group-pos="mid"]) button {
+      border-radius: 0;
+      border-right-width: 0;
+    }
+    :host([data-group-pos]:hover),
+    :host([data-group-pos]:focus-within) {
+      position: relative;
+      z-index: 1;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      button {
+        transition: none;
+      }
+    }
+  `);class L1 extends HTMLElement{static get observedAttributes(){return["value","storageKey"]}static get propTypes(){return{value:"String",storageKey:"String"}}get value(){return this._props.value}set value(_){this._assignProp("value",_),this.update()}get storageKey(){return this._props.storageKey}set storageKey(_){this._assignProp("storageKey",_),this.update()}constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.adoptedStyleSheets=[G1],this._defaults={value:"",storageKey:"ui-mode"},this._state={},this._props={...this._defaults},this._eventHandlers={"click button":function(_,{props:U,commit:B}){let Y=U.value==="default"||U.value==="terminal"?U.value:"";if(!Y&&typeof document<"u"){let J=document.documentElement;if(J.dataset.kbPreset==="terminal")Y="terminal";else if(J.dataset.uiMode==="terminal")Y="terminal";else Y="default"}if(!Y)Y="default";let z=Y==="terminal"?"default":"terminal";if(typeof document<"u"){let J=document.documentElement;if(z==="terminal")J.dataset.kbPreset="terminal",J.dataset.uiMode="terminal";else delete J.dataset.kbPreset,J.dataset.uiMode="regular"}let O=typeof U.storageKey==="string"?U.storageKey:"ui-mode";if(O&&typeof localStorage<"u")try{let J=O==="ui-mode"?z==="terminal"?"terminal":"regular":z;localStorage.setItem(O,J)}catch{}B({props:{value:z}})}},this._eventCleanup=[],this._renderFn=function({props:_,html:U}){let B=_.value==="default"||_.value==="terminal"?_.value:"";if(!B&&typeof document<"u"){let z=document.documentElement;if(z.dataset.kbPreset==="terminal")B="terminal";else if(z.dataset.uiMode==="terminal")B="terminal";else B="default"}if(!B)B="default";let Y=B==="default";return U`
+      <button
+        part="toggle-root"
+        type="button"
+        aria-pressed=${Y?"true":"false"}
+        aria-label=${Y?"Switch to terminal UI preset":"Switch to regular UI preset"}
+        title="Toggle UI mode"
+      >
+        ${Y?"ui=regular":"ui=terminal"}
+      </button>
+    `},this._reflecting=!1}connectedCallback(){this.update()}disconnectedCallback(){this.cleanupEvents()}attributeChangedCallback(_,U,B){if(this._reflecting)return;if(U===B)return;let Y=this.constructor.propTypes[_],z=B;if(B===null||B===void 0)z=this._defaults[_];else if(Y==="Number"&&B!=="")z=Number(B);else if(Y==="Boolean")z=B!==null&&B!=="false";this._props[_]=z,this.update()}_assignProp(_,U){let B=this.constructor.propTypes[_],Y=U;if(B==="Boolean")Y=U===!0||U==="";else if(B==="Number"&&U!==null&&U!==void 0&&U!=="")Y=Number(U);this._props[_]=Y;let z=Y===null||Y===void 0||typeof Y==="string"||typeof Y==="number"||typeof Y==="boolean";this._reflecting=!0;try{if(B==="Boolean")if(Y)this.setAttribute(_,"");else this.removeAttribute(_);else if(!z)this.removeAttribute(_);else if(Y===null||Y===void 0)this.removeAttribute(_);else this.setAttribute(_,String(Y))}finally{this._reflecting=!1}}_emitChange(){this.dispatchEvent(new CustomEvent("kitbash-change",{detail:{state:{...this._state},props:{...this._props}},bubbles:!0,composed:!0}))}commit(_){let U=_||{};if(U.props){let B=this.constructor.propTypes||{};for(let Y of Object.keys(U.props)){if(!Object.prototype.hasOwnProperty.call(B,Y))continue;this._assignProp(Y,U.props[Y])}}if(U.state)this._state={...this._state,...U.state};this.update(),this._emitChange()}setState(_){this.commit({state:_})}setProps(_){this.commit({props:_})}_handlerCtx(){return{props:{...this._props},state:{...this._state},setState:this.setState.bind(this),setProps:this.setProps.bind(this),commit:this.commit.bind(this)}}cleanupEvents(){this._eventCleanup.forEach((_)=>_()),this._eventCleanup=[]}update(){d(this.shadowRoot,this._renderFn({...this._handlerCtx(),html:q1})),this.cleanupEvents(),this.bindEvents()}bindEvents(){Object.keys(this._eventHandlers).forEach((_)=>{let U=_.split(" "),B=U[0],Y=U.slice(1).join(" ");(Y?this.shadowRoot.querySelectorAll(Y):[this]).forEach((O)=>{let J=(I)=>{this._eventHandlers[_](I,this._handlerCtx())};O.addEventListener(B,J),this._eventCleanup.push(()=>O.removeEventListener(B,J))})})}}if(!customElements.get("kitbash-preset-toggle"))customElements.define("kitbash-preset-toggle",L1);export{L1 as KitbashPresetToggle};