@ktbsh/ui 0.1.0 → 0.2.0

package/README.md

@@ -49,8 +49,10 @@ dist/
 | `@ktbsh/ui` | Tokens helpers + shared types |
 | `@ktbsh/ui/vanilla/<name>` | Register `kitbash-<name>` custom element |
 | `@ktbsh/ui/react/<name>` | React wrapper (`Kitbash*`) + types |
-| `@ktbsh/ui/themes/light.css` | Light theme (`:root` default) |
-| `@ktbsh/ui/themes/dark.css` | Dark theme (`:root[data-theme="dark"]`) |
+| `@ktbsh/ui/themes/light.css` | Default preset light (`:root` default) |
+| `@ktbsh/ui/themes/dark.css` | Default preset dark (`:root[data-theme="dark"]`) |
+| `@ktbsh/ui/themes/terminal/light.css` | Terminal preset light |
+| `@ktbsh/ui/themes/terminal/dark.css` | Terminal preset dark (Matrix night) |
 | `@ktbsh/ui/tokens` | Token API only |
 | `@ktbsh/ui/types` | Shared TypeScript unions |
 | `@ktbsh/ui/custom-elements.json` | Custom Elements Manifest |
@@ -87,13 +89,20 @@ Load theme CSS in the host app (variables inherit into shadow roots):
 ```ts
 import '@ktbsh/ui/themes/light.css';
 import '@ktbsh/ui/themes/dark.css';
-import { applyTheme } from '@ktbsh/ui';
-
-applyTheme('dark'); // document.documentElement dataset.theme
-// light is default via :root even without data-theme
+// Optional Matrix-style preset (blog terminal mode):
+import '@ktbsh/ui/themes/terminal/light.css';
+import '@ktbsh/ui/themes/terminal/dark.css';
+import { applyPreset, applyTheme } from '@ktbsh/ui';
+
+applyTheme('dark'); // data-theme — light | dark (night)
+applyPreset('terminal'); // data-kb-preset — default | terminal
+// light + default when attributes omitted
 ```
 
-Components use semantic vars such as `var(--kb-color-accent-default)`. Kitbash also injects light defaults onto `:host` from `tokens.json`.
+Two axes (same idea as the personal blog): **theme** (light/dark) × **preset** (default/terminal).  
+Components use only semantic vars such as `var(--kb-color-accent-default)`, **inherited from document** theme CSS.
+
+> **Required:** load theme stylesheets on the app shell (`:root`). We do **not** bake absolute token values onto each component `:host` — that sealed the shadow tree and blocked theme toggles (see `docs/sdk-feedback.md` P0 #0).
 
 ## Consume
 

package/dist/index.d.ts

@@ -8,6 +8,10 @@
  * Theme CSS (load once in the app shell):
  *   import '@ktbsh/ui/themes/light.css'
  *   import '@ktbsh/ui/themes/dark.css'
+ *   import '@ktbsh/ui/themes/terminal/light.css' // optional
+ *   import '@ktbsh/ui/themes/terminal/dark.css'
+ *
+ * applyTheme('light'|'dark'); applyPreset('default'|'terminal');
  */
-export { applyTheme, cssVar, cssVarName, getTheme, type KitbashTheme, type SemanticTokenName, semanticTokens, type TokenValue, } from './tokens/index.ts';
+export { applyPreset, applyTheme, cssVar, cssVarName, getPreset, getTheme, type KitbashPreset, type KitbashTheme, type SemanticTokenName, semanticTokens, type TokenValue, } from './tokens/index.ts';
 export type { KitbashBadgeTone, KitbashButtonVariant, KitbashContainerWidth, KitbashFeedbackTone, KitbashHeadingLevel, KitbashLinkTone, KitbashSize, KitbashSkeletonVariant, KitbashSpace, KitbashStackAlign, KitbashStackDirection, KitbashStackJustify, KitbashTextTone, } from './types/index.ts';

package/dist/index.js

@@ -8,5 +8,9 @@
  * Theme CSS (load once in the app shell):
  *   import '@ktbsh/ui/themes/light.css'
  *   import '@ktbsh/ui/themes/dark.css'
+ *   import '@ktbsh/ui/themes/terminal/light.css' // optional
+ *   import '@ktbsh/ui/themes/terminal/dark.css'
+ *
+ * applyTheme('light'|'dark'); applyPreset('default'|'terminal');
  */
-export { applyTheme, cssVar, cssVarName, getTheme, semanticTokens, } from "./tokens/index.js";
+export { applyPreset, applyTheme, cssVar, cssVarName, getPreset, getTheme, semanticTokens, } from "./tokens/index.js";

package/dist/themes/dark.css

@@ -1,6 +1,6 @@
 /**
  * GENERATED FILE — do not edit by hand.
- * Source: src/tokens/semantic.ts
+ * Source: src/tokens/semantic.ts (+ presets)
  * Regenerate: bun run tokens:build
  */
 :root[data-theme="dark"] {

package/dist/themes/light.css

@@ -1,6 +1,6 @@
 /**
  * GENERATED FILE — do not edit by hand.
- * Source: src/tokens/semantic.ts
+ * Source: src/tokens/semantic.ts (+ presets)
  * Regenerate: bun run tokens:build
  */
 :root,

package/dist/themes/terminal/dark.css

@@ -0,0 +1,52 @@
+/**
+ * GENERATED FILE — do not edit by hand.
+ * Source: src/tokens/semantic.ts (+ presets)
+ * Regenerate: bun run tokens:build
+ */
+:root[data-kb-preset="terminal"][data-theme="dark"] {
+  --kb-color-bg-canvas: #050a05;
+  --kb-color-bg-surface: #0a120a;
+  --kb-color-bg-subtle: #0f1a0f;
+  --kb-color-bg-inverse: #d1fae5;
+  --kb-color-fg-default: #4ade80;
+  --kb-color-fg-muted: #a3f2b0;
+  --kb-color-fg-subtle: #00cc33;
+  --kb-color-fg-on-accent: #050a05;
+  --kb-color-fg-on-inverse: #050a05;
+  --kb-color-border-default: #00e637;
+  --kb-color-border-muted: #00b42d;
+  --kb-color-border-focus: #00ff41;
+  --kb-color-accent-default: #00ff41;
+  --kb-color-accent-hover: #00e637;
+  --kb-color-accent-subtle: rgba(74, 222, 128, 0.1);
+  --kb-color-danger-default: #f85149;
+  --kb-color-danger-subtle: #2d1214;
+  --kb-color-success-default: #4ade80;
+  --kb-color-success-subtle: #12261e;
+  --kb-color-warning-default: #d29922;
+  --kb-color-warning-subtle: #2a2111;
+  --kb-space-2xs: 2px;
+  --kb-space-xs: 4px;
+  --kb-space-sm: 8px;
+  --kb-space-md: 16px;
+  --kb-space-lg: 24px;
+  --kb-space-xl: 32px;
+  --kb-space-2xl: 48px;
+  --kb-radius-sm: 2px;
+  --kb-radius-md: 4px;
+  --kb-radius-lg: 6px;
+  --kb-radius-full: 9999px;
+  --kb-font-family-sans: 'VT323', ui-monospace, 'Courier New', monospace;
+  --kb-font-size-sm: 0.875rem;
+  --kb-font-size-md: 1rem;
+  --kb-font-size-lg: 1.125rem;
+  --kb-font-size-xl: 1.25rem;
+  --kb-font-weight-regular: 400;
+  --kb-font-weight-medium: 500;
+  --kb-font-weight-semibold: 600;
+  --kb-line-height-tight: 1.25;
+  --kb-line-height-normal: 1.625;
+  --kb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --kb-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
+  --kb-focus-ring: 0 0 0 3px rgba(0, 255, 65, 0.35);
+}

package/dist/themes/terminal/light.css

@@ -0,0 +1,53 @@
+/**
+ * GENERATED FILE — do not edit by hand.
+ * Source: src/tokens/semantic.ts (+ presets)
+ * Regenerate: bun run tokens:build
+ */
+:root[data-kb-preset="terminal"],
+:root[data-kb-preset="terminal"][data-theme="light"] {
+  --kb-color-bg-canvas: #f8f9fa;
+  --kb-color-bg-surface: #ffffff;
+  --kb-color-bg-subtle: #eef2ee;
+  --kb-color-bg-inverse: #212529;
+  --kb-color-fg-default: #212529;
+  --kb-color-fg-muted: #495057;
+  --kb-color-fg-subtle: #6c757d;
+  --kb-color-fg-on-accent: #ffffff;
+  --kb-color-fg-on-inverse: #f8f9fa;
+  --kb-color-border-default: rgba(0, 102, 0, 0.25);
+  --kb-color-border-muted: rgba(0, 102, 0, 0.15);
+  --kb-color-border-focus: #006600;
+  --kb-color-accent-default: #006600;
+  --kb-color-accent-hover: #008000;
+  --kb-color-accent-subtle: rgba(0, 102, 0, 0.08);
+  --kb-color-danger-default: #b42318;
+  --kb-color-danger-subtle: #fee4e2;
+  --kb-color-success-default: #006600;
+  --kb-color-success-subtle: rgba(0, 102, 0, 0.08);
+  --kb-color-warning-default: #9a6700;
+  --kb-color-warning-subtle: #fff8c5;
+  --kb-space-2xs: 2px;
+  --kb-space-xs: 4px;
+  --kb-space-sm: 8px;
+  --kb-space-md: 16px;
+  --kb-space-lg: 24px;
+  --kb-space-xl: 32px;
+  --kb-space-2xl: 48px;
+  --kb-radius-sm: 2px;
+  --kb-radius-md: 4px;
+  --kb-radius-lg: 6px;
+  --kb-radius-full: 9999px;
+  --kb-font-family-sans: 'VT323', ui-monospace, 'Courier New', monospace;
+  --kb-font-size-sm: 0.875rem;
+  --kb-font-size-md: 1rem;
+  --kb-font-size-lg: 1.125rem;
+  --kb-font-size-xl: 1.25rem;
+  --kb-font-weight-regular: 400;
+  --kb-font-weight-medium: 500;
+  --kb-font-weight-semibold: 600;
+  --kb-line-height-tight: 1.25;
+  --kb-line-height-normal: 1.625;
+  --kb-shadow-sm: 0 1px 2px rgba(0, 102, 0, 0.08);
+  --kb-shadow-md: 0 4px 12px rgba(0, 102, 0, 0.1);
+  --kb-focus-ring: 0 0 0 3px rgba(0, 102, 0, 0.35);
+}

package/dist/tokens/index.d.ts

@@ -3,5 +3,9 @@
  * Import theme CSS in the app (or Storybook) so variables resolve:
  *   import '@ktbsh/ui/themes/light.css'
  *   import '@ktbsh/ui/themes/dark.css'
+ *   import '@ktbsh/ui/themes/terminal/light.css'  // optional preset
+ *   import '@ktbsh/ui/themes/terminal/dark.css'
+ *
+ * Axes: applyTheme('light'|'dark') + applyPreset('default'|'terminal')
  */
-export { applyTheme, cssVar, cssVarName, getTheme, type KitbashTheme, type SemanticTokenName, semanticTokens, type TokenValue, } from './semantic.ts';
+export { applyPreset, applyTheme, cssVar, cssVarName, getPreset, getTheme, type KitbashPreset, type KitbashTheme, type SemanticTokenName, semanticTokens, type TokenValue, } from './semantic.ts';

package/dist/tokens/index.js

@@ -3,5 +3,9 @@
  * Import theme CSS in the app (or Storybook) so variables resolve:
  *   import '@ktbsh/ui/themes/light.css'
  *   import '@ktbsh/ui/themes/dark.css'
+ *   import '@ktbsh/ui/themes/terminal/light.css'  // optional preset
+ *   import '@ktbsh/ui/themes/terminal/dark.css'
+ *
+ * Axes: applyTheme('light'|'dark') + applyPreset('default'|'terminal')
  */
-export { applyTheme, cssVar, cssVarName, getTheme, semanticTokens, } from "./semantic.js";
+export { applyPreset, applyTheme, cssVar, cssVarName, getPreset, getTheme, semanticTokens, } from "./semantic.js";

package/dist/tokens/semantic.d.ts

@@ -1,10 +1,23 @@
 /**
- * Design tokens — single source of truth for names and light/dark values.
- * CSS themes + kitbash `tokens.json` are generated from this module.
+ * Design tokens — single source of truth for names and **default** light/dark values.
+ * CSS themes + kitbash `tokens.json` are generated from this module + presets.
  *
  * CSS custom property for key `color-bg-canvas` → `--kb-color-bg-canvas`
+ *
+ * **Presets** (UI chrome / brand pack), orthogonal to light/dark:
+ * - `default` — neutral/blue DS (no `data-kb-preset` or `data-kb-preset="default"`)
+ * - `terminal` — Matrix-style pack from consumer blog (`data-kb-preset="terminal"`)
+ *
+ * See `docs/consumer-astro-blog-md.md`.
  */
+/** Color scheme axis (night = dark). */
 export type KitbashTheme = 'light' | 'dark';
+/**
+ * Brand / UI-mode axis. Maps to blog `data-ui-mode`:
+ * - default ≈ regular
+ * - terminal ≈ terminal
+ */
+export type KitbashPreset = 'default' | 'terminal';
 export type TokenValue = {
     readonly light: string;
     readonly dark: string;
@@ -201,9 +214,16 @@ export declare function cssVarName(token: SemanticTokenName): `--kb-${SemanticTo
 /** `var(--kb-…)` reference for use in component styles. */
 export declare function cssVar(token: SemanticTokenName): string;
 /**
- * Apply theme on an element (default: document root in browsers).
+ * Apply color scheme on an element (default: document root in browsers).
  * No-op without a DOM root (SSR) unless `root` is passed explicitly.
  */
 export declare function applyTheme(theme: KitbashTheme, root?: HTMLElement): void;
 /** Defaults to `light` when no DOM / no data-theme (SSR-safe). */
 export declare function getTheme(root?: HTMLElement): KitbashTheme;
+/**
+ * Apply brand preset (`data-kb-preset`). Omit/`default` uses base theme CSS only.
+ * Load matching CSS: `@ktbsh/ui/themes/terminal/light.css` + `dark.css` for terminal.
+ */
+export declare function applyPreset(preset: KitbashPreset, root?: HTMLElement): void;
+/** Defaults to `default` when unset (SSR-safe). */
+export declare function getPreset(root?: HTMLElement): KitbashPreset;

package/dist/tokens/semantic.js

@@ -1,8 +1,14 @@
 /**
- * Design tokens — single source of truth for names and light/dark values.
- * CSS themes + kitbash `tokens.json` are generated from this module.
+ * Design tokens — single source of truth for names and **default** light/dark values.
+ * CSS themes + kitbash `tokens.json` are generated from this module + presets.
  *
  * CSS custom property for key `color-bg-canvas` → `--kb-color-bg-canvas`
+ *
+ * **Presets** (UI chrome / brand pack), orthogonal to light/dark:
+ * - `default` — neutral/blue DS (no `data-kb-preset` or `data-kb-preset="default"`)
+ * - `terminal` — Matrix-style pack from consumer blog (`data-kb-preset="terminal"`)
+ *
+ * See `docs/consumer-astro-blog-md.md`.
  */
 /**
  * Flat semantic map. Keys are stable public IDs (kebab after `--kb-`).
@@ -83,20 +89,42 @@ export function cssVarName(token) {
 export function cssVar(token) {
     return `var(${cssVarName(token)})`;
 }
+function resolveRoot(root) {
+    return (root ??
+        (typeof document !== 'undefined' ? document.documentElement : undefined));
+}
 /**
- * Apply theme on an element (default: document root in browsers).
+ * Apply color scheme on an element (default: document root in browsers).
  * No-op without a DOM root (SSR) unless `root` is passed explicitly.
  */
 export function applyTheme(theme, root) {
-    const el = root ??
-        (typeof document !== 'undefined' ? document.documentElement : undefined);
+    const el = resolveRoot(root);
     if (el) {
         el.dataset.theme = theme;
     }
 }
 /** Defaults to `light` when no DOM / no data-theme (SSR-safe). */
 export function getTheme(root) {
-    const el = root ??
-        (typeof document !== 'undefined' ? document.documentElement : undefined);
+    const el = resolveRoot(root);
     return el?.dataset.theme === 'dark' ? 'dark' : 'light';
 }
+/**
+ * Apply brand preset (`data-kb-preset`). Omit/`default` uses base theme CSS only.
+ * Load matching CSS: `@ktbsh/ui/themes/terminal/light.css` + `dark.css` for terminal.
+ */
+export function applyPreset(preset, root) {
+    const el = resolveRoot(root);
+    if (!el)
+        return;
+    if (preset === 'default') {
+        delete el.dataset.kbPreset;
+    }
+    else {
+        el.dataset.kbPreset = preset;
+    }
+}
+/** Defaults to `default` when unset (SSR-safe). */
+export function getPreset(root) {
+    const el = resolveRoot(root);
+    return el?.dataset.kbPreset === 'terminal' ? 'terminal' : 'default';
+}

package/dist/vanilla/alert.js

@@ -1,51 +1,4 @@
-var d=(_,U,B,Y,z)=>{let W=B.length,J=U.length,I=W,O=0,$=0,X=null;while(O<J||$<I)if(J===O){let Q=I<W?$?Y(B[$-1],-0).nextSibling:Y(B[I],0):z;while($<I)_.insertBefore(Y(B[$++],1),Q)}else if(I===$)while(O<J){if(!X||!X.has(U[O]))_.removeChild(Y(U[O],-1));O++}else if(U[O]===B[$])O++,$++;else if(U[J-1]===B[I-1])J--,I--;else if(U[O]===B[I-1]&&B[$]===U[J-1]){let Q=Y(U[--J],-0).nextSibling;_.insertBefore(Y(B[$++],1),Y(U[O++],-0).nextSibling),_.insertBefore(Y(B[--I],1),Q),U[J]=B[I]}else{if(!X){X=new Map;let Q=$;while(Q<I)X.set(B[Q],Q++)}if(X.has(U[O])){let Q=X.get(U[O]);if($<Q&&Q<I){let Z=O,K=1;while(++Z<J&&Z<I&&X.get(U[Z])===Q+K)K++;if(K>Q-$){let D=Y(U[O],0);while($<Q)_.insertBefore(Y(B[$++],1),D)}else _.replaceChild(Y(B[$++],1),Y(U[O++],-1))}else O++}else _.removeChild(Y(U[O++],-1))}return B};var{isArray:E}=Array,{getPrototypeOf:R1,getOwnPropertyDescriptor:D1}=Object;var i="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),M=(_,U,B)=>{return _.set(U,B),B},m=(_,U)=>{let B;do B=D1(_,U);while(!B&&(_=R1(_)));return B},o=(_,U)=>U.reduceRight(M1,_),M1=(_,U)=>_.childNodes[U];var s=1;var r=8;var l=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 x=({firstChild:_,lastChild:U},B)=>V(_,U,B),t=!1,j=(_,U)=>t&&_.nodeType===l?1/U<0?U?x(_,!0):_.lastChild:U?_.valueOf():_.firstChild:_,a=(_)=>document.createComment(_);class w 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(){x(this,!1)}replaceWith(_){x(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),P=(_,U)=>_.removeAttribute(U),H1=(_,U)=>{for(let B in U){let Y=U[B],z=B==="role"?B:`aria-${B}`;if(Y==null)P(_,z);else e(_,z,Y)}return U},C,P1=(_,U,B)=>{if(B=B.slice(1),!C)C=new WeakMap;let Y=C.get(_)||M(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},F1=(_,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?(P(_,B),U):k(_,U,B),_1=(_,U)=>(typeof U==="function"?U(_):U.current=_,U),y=(_,U,B)=>(U==null?P(_,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),R=(_,U,B)=>{let{length:Y}=U;if(_.data=`[${Y}]`,Y)return d(_.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",F1],["data",A1],["ref",_1],["style",N1]]),B1=(_,U,B)=>{switch(U[0]){case".":return E1;case"?":return V1;case"@":return P1;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:W}=_(U,B),J=document.importNode(Y,!0),I=q;if(z!==q){I=[];for(let O,$,X=0;X<z.length;X++){let{a:Q,b:Z,c:K}=z[X],D=Q===$?O:O=o(J,$=Q);I[X]=I1(Z,D,K,Z===R?[]:Z===G?L():null)}}return z1(W?J.firstChild:new w(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,W,J,I)=>`<${W}${J.replace(C1,"\x02=$2$1").trimEnd()}${I?B||O1.test(W)?" /":`></${W}`:""}>`).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(_,F,B),B),{length:z}=_,W=q;if(z>1){let O=[],$=document.createTreeWalker(Y,129),X=0,Q=`${F}${X++}`;W=[];while(X<z){let Z=$.nextNode();if(Z.nodeType===r){if(Z.data===Q){let K=E(U[X-1])?R:G;if(K===G)O.push(Z);W.push(H(c(Z),K,null)),Q=`${F}${X++}`}}else{let K;while(Z.hasAttribute(Q)){if(!K)K=c(Z);let D=Z.getAttribute(Q);W.push(H(K,B1(Z,D,B),D)),P(Z,Q),Q=`${F}${X++}`}if(!B&&J1.test(Z.localName)&&Z.textContent.trim()===`<!--${Q}-->`)W.push(H(K||c(Z),Y1,null)),Q=`${F}${X++}`}}for(X=0;X<O.length;X++)O[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 M($1,_,H(Y,W,I===1))},$1=new WeakMap,F="isµ",v=(_)=>(U,B)=>$1.get(U)||S1(U,B,_);var x1=b(v(!1)),w1=b(v(!0)),p=(_,{s:U,t:B,v:Y})=>{if(_.a!==B){let{b:z,c:W}=(U?w1:x1)(B,Y);_.a=B,_.b=z,_.c=W}for(let{c:z}=_,W=0;W<z.length;W++){let J=Y[W],I=z[W];switch(I.u){case R:I.v=R(I.t,y1(I.c,J),I.v);break;case G:let O=J instanceof A?p(I.c||(I.c=L()),J):(I.c=null,J);if(O!==I.v)I.v=G(I,O);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,u=(_,U)=>{let B=Z1.get(_)||M(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 {
---kb-color-bg-canvas: #ffffff;
---kb-color-bg-surface: #f6f8fa;
---kb-color-bg-subtle: #eef1f4;
---kb-color-bg-inverse: #1f2328;
---kb-color-fg-default: #1f2328;
---kb-color-fg-muted: #656d76;
---kb-color-fg-subtle: #8c959f;
---kb-color-fg-on-accent: #ffffff;
---kb-color-fg-on-inverse: #ffffff;
---kb-color-border-default: #d0d7de;
---kb-color-border-muted: #e6ebf0;
---kb-color-border-focus: #0969da;
---kb-color-accent-default: #0969da;
---kb-color-accent-hover: #0860ca;
---kb-color-accent-subtle: #ddf4ff;
---kb-color-danger-default: #cf222e;
---kb-color-danger-subtle: #ffebe9;
---kb-color-success-default: #1a7f37;
---kb-color-success-subtle: #dafbe1;
---kb-color-warning-default: #9a6700;
---kb-color-warning-subtle: #fff8c5;
---kb-space-2xs: 2px;
---kb-space-xs: 4px;
---kb-space-sm: 8px;
---kb-space-md: 16px;
---kb-space-lg: 24px;
---kb-space-xl: 32px;
---kb-space-2xl: 48px;
---kb-radius-sm: 4px;
---kb-radius-md: 8px;
---kb-radius-lg: 12px;
---kb-radius-full: 9999px;
---kb-font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
---kb-font-size-sm: 0.875rem;
---kb-font-size-md: 1rem;
---kb-font-size-lg: 1.125rem;
---kb-font-size-xl: 1.25rem;
---kb-font-weight-regular: 400;
---kb-font-weight-medium: 500;
---kb-font-weight-semibold: 600;
---kb-line-height-tight: 1.25;
---kb-line-height-normal: 1.5;
---kb-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08);
---kb-shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1);
---kb-focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.35);
-}
-
+var d=(_,U,B,Y,z)=>{let W=B.length,J=U.length,I=W,O=0,$=0,X=null;while(O<J||$<I)if(J===O){let Q=I<W?$?Y(B[$-1],-0).nextSibling:Y(B[I],0):z;while($<I)_.insertBefore(Y(B[$++],1),Q)}else if(I===$)while(O<J){if(!X||!X.has(U[O]))_.removeChild(Y(U[O],-1));O++}else if(U[O]===B[$])O++,$++;else if(U[J-1]===B[I-1])J--,I--;else if(U[O]===B[I-1]&&B[$]===U[J-1]){let Q=Y(U[--J],-0).nextSibling;_.insertBefore(Y(B[$++],1),Y(U[O++],-0).nextSibling),_.insertBefore(Y(B[--I],1),Q),U[J]=B[I]}else{if(!X){X=new Map;let Q=$;while(Q<I)X.set(B[Q],Q++)}if(X.has(U[O])){let Q=X.get(U[O]);if($<Q&&Q<I){let Z=O,K=1;while(++Z<J&&Z<I&&X.get(U[Z])===Q+K)K++;if(K>Q-$){let D=Y(U[O],0);while($<Q)_.insertBefore(Y(B[$++],1),D)}else _.replaceChild(Y(B[$++],1),Y(U[O++],-1))}else O++}else _.removeChild(Y(U[O++],-1))}return B};var{isArray:E}=Array,{getPrototypeOf:R1,getOwnPropertyDescriptor:D1}=Object;var i="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),M=(_,U,B)=>{return _.set(U,B),B},m=(_,U)=>{let B;do B=D1(_,U);while(!B&&(_=R1(_)));return B},o=(_,U)=>U.reduceRight(M1,_),M1=(_,U)=>_.childNodes[U];var s=1;var r=8;var l=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 x=({firstChild:_,lastChild:U},B)=>V(_,U,B),t=!1,j=(_,U)=>t&&_.nodeType===l?1/U<0?U?x(_,!0):_.lastChild:U?_.valueOf():_.firstChild:_,a=(_)=>document.createComment(_);class w 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(){x(this,!1)}replaceWith(_){x(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),P=(_,U)=>_.removeAttribute(U),H1=(_,U)=>{for(let B in U){let Y=U[B],z=B==="role"?B:`aria-${B}`;if(Y==null)P(_,z);else e(_,z,Y)}return U},C,P1=(_,U,B)=>{if(B=B.slice(1),!C)C=new WeakMap;let Y=C.get(_)||M(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},F1=(_,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?(P(_,B),U):k(_,U,B),_1=(_,U)=>(typeof U==="function"?U(_):U.current=_,U),y=(_,U,B)=>(U==null?P(_,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),R=(_,U,B)=>{let{length:Y}=U;if(_.data=`[${Y}]`,Y)return d(_.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",F1],["data",A1],["ref",_1],["style",N1]]),B1=(_,U,B)=>{switch(U[0]){case".":return E1;case"?":return V1;case"@":return P1;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:W}=_(U,B),J=document.importNode(Y,!0),I=q;if(z!==q){I=[];for(let O,$,X=0;X<z.length;X++){let{a:Q,b:Z,c:K}=z[X],D=Q===$?O:O=o(J,$=Q);I[X]=I1(Z,D,K,Z===R?[]:Z===G?L():null)}}return z1(W?J.firstChild:new w(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,W,J,I)=>`<${W}${J.replace(C1,"\x02=$2$1").trimEnd()}${I?B||O1.test(W)?" /":`></${W}`:""}>`).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(_,F,B),B),{length:z}=_,W=q;if(z>1){let O=[],$=document.createTreeWalker(Y,129),X=0,Q=`${F}${X++}`;W=[];while(X<z){let Z=$.nextNode();if(Z.nodeType===r){if(Z.data===Q){let K=E(U[X-1])?R:G;if(K===G)O.push(Z);W.push(H(c(Z),K,null)),Q=`${F}${X++}`}}else{let K;while(Z.hasAttribute(Q)){if(!K)K=c(Z);let D=Z.getAttribute(Q);W.push(H(K,B1(Z,D,B),D)),P(Z,Q),Q=`${F}${X++}`}if(!B&&J1.test(Z.localName)&&Z.textContent.trim()===`<!--${Q}-->`)W.push(H(K||c(Z),Y1,null)),Q=`${F}${X++}`}}for(X=0;X<O.length;X++)O[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 M($1,_,H(Y,W,I===1))},$1=new WeakMap,F="isµ",v=(_)=>(U,B)=>$1.get(U)||S1(U,B,_);var x1=b(v(!1)),w1=b(v(!0)),p=(_,{s:U,t:B,v:Y})=>{if(_.a!==B){let{b:z,c:W}=(U?w1:x1)(B,Y);_.a=B,_.b=z,_.c=W}for(let{c:z}=_,W=0;W<z.length;W++){let J=Y[W],I=z[W];switch(I.u){case R:I.v=R(I.t,y1(I.c,J),I.v);break;case G:let O=J instanceof A?p(I.c||(I.c=L()),J):(I.c=null,J);if(O!==I.v)I.v=G(I,O);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,u=(_,U)=>{let B=Z1.get(_)||M(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: block;

package/dist/vanilla/alert.src.js

@@ -2,7 +2,7 @@
 import { render, html } from 'uhtml';
 
 const sheet = new CSSStyleSheet();
-sheet.replaceSync(":host {\n--kb-color-bg-canvas: #ffffff;\n--kb-color-bg-surface: #f6f8fa;\n--kb-color-bg-subtle: #eef1f4;\n--kb-color-bg-inverse: #1f2328;\n--kb-color-fg-default: #1f2328;\n--kb-color-fg-muted: #656d76;\n--kb-color-fg-subtle: #8c959f;\n--kb-color-fg-on-accent: #ffffff;\n--kb-color-fg-on-inverse: #ffffff;\n--kb-color-border-default: #d0d7de;\n--kb-color-border-muted: #e6ebf0;\n--kb-color-border-focus: #0969da;\n--kb-color-accent-default: #0969da;\n--kb-color-accent-hover: #0860ca;\n--kb-color-accent-subtle: #ddf4ff;\n--kb-color-danger-default: #cf222e;\n--kb-color-danger-subtle: #ffebe9;\n--kb-color-success-default: #1a7f37;\n--kb-color-success-subtle: #dafbe1;\n--kb-color-warning-default: #9a6700;\n--kb-color-warning-subtle: #fff8c5;\n--kb-space-2xs: 2px;\n--kb-space-xs: 4px;\n--kb-space-sm: 8px;\n--kb-space-md: 16px;\n--kb-space-lg: 24px;\n--kb-space-xl: 32px;\n--kb-space-2xl: 48px;\n--kb-radius-sm: 4px;\n--kb-radius-md: 8px;\n--kb-radius-lg: 12px;\n--kb-radius-full: 9999px;\n--kb-font-family-sans: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n--kb-font-size-sm: 0.875rem;\n--kb-font-size-md: 1rem;\n--kb-font-size-lg: 1.125rem;\n--kb-font-size-xl: 1.25rem;\n--kb-font-weight-regular: 400;\n--kb-font-weight-medium: 500;\n--kb-font-weight-semibold: 600;\n--kb-line-height-tight: 1.25;\n--kb-line-height-normal: 1.5;\n--kb-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08);\n--kb-shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1);\n--kb-focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.35);\n}\n\n\n    :host {\n      display: block;\n      font-family: var(--kb-font-family-sans);\n    }\n    :host([open]) {\n      display: block;\n    }\n    :host(:not([open])) {\n      display: none;\n    }\n    .root {\n      display: flex;\n      gap: var(--kb-space-md);\n      align-items: flex-start;\n      box-sizing: border-box;\n      padding: var(--kb-space-md);\n      border-radius: var(--kb-radius-md);\n      border: 1px solid var(--kb-color-border-default);\n      font-size: var(--kb-font-size-md);\n      line-height: var(--kb-line-height-normal);\n    }\n    .info {\n      background: var(--kb-color-accent-subtle);\n      border-color: var(--kb-color-accent-default);\n      color: var(--kb-color-fg-default);\n    }\n    .success {\n      background: var(--kb-color-success-subtle);\n      border-color: var(--kb-color-success-default);\n      color: var(--kb-color-fg-default);\n    }\n    .warning {\n      background: var(--kb-color-warning-subtle);\n      border-color: var(--kb-color-warning-default);\n      color: var(--kb-color-fg-default);\n    }\n    .danger {\n      background: var(--kb-color-danger-subtle);\n      border-color: var(--kb-color-danger-default);\n      color: var(--kb-color-fg-default);\n    }\n    .body {\n      flex: 1;\n      min-width: 0;\n    }\n    .title {\n      margin: 0 0 var(--kb-space-2xs);\n      font-weight: var(--kb-font-weight-semibold);\n      font-size: var(--kb-font-size-md);\n    }\n    .close {\n      flex-shrink: 0;\n      min-width: 2rem;\n      min-height: 2rem;\n      border: none;\n      border-radius: var(--kb-radius-sm);\n      background: transparent;\n      color: inherit;\n      cursor: pointer;\n      font-size: var(--kb-font-size-lg);\n      line-height: 1;\n      font-family: inherit;\n    }\n    .close:focus-visible {\n      outline: none;\n      box-shadow: var(--kb-focus-ring);\n    }\n  ");
+sheet.replaceSync("\n\n    :host {\n      display: block;\n      font-family: var(--kb-font-family-sans);\n    }\n    :host([open]) {\n      display: block;\n    }\n    :host(:not([open])) {\n      display: none;\n    }\n    .root {\n      display: flex;\n      gap: var(--kb-space-md);\n      align-items: flex-start;\n      box-sizing: border-box;\n      padding: var(--kb-space-md);\n      border-radius: var(--kb-radius-md);\n      border: 1px solid var(--kb-color-border-default);\n      font-size: var(--kb-font-size-md);\n      line-height: var(--kb-line-height-normal);\n    }\n    .info {\n      background: var(--kb-color-accent-subtle);\n      border-color: var(--kb-color-accent-default);\n      color: var(--kb-color-fg-default);\n    }\n    .success {\n      background: var(--kb-color-success-subtle);\n      border-color: var(--kb-color-success-default);\n      color: var(--kb-color-fg-default);\n    }\n    .warning {\n      background: var(--kb-color-warning-subtle);\n      border-color: var(--kb-color-warning-default);\n      color: var(--kb-color-fg-default);\n    }\n    .danger {\n      background: var(--kb-color-danger-subtle);\n      border-color: var(--kb-color-danger-default);\n      color: var(--kb-color-fg-default);\n    }\n    .body {\n      flex: 1;\n      min-width: 0;\n    }\n    .title {\n      margin: 0 0 var(--kb-space-2xs);\n      font-weight: var(--kb-font-weight-semibold);\n      font-size: var(--kb-font-size-md);\n    }\n    .close {\n      flex-shrink: 0;\n      min-width: 2rem;\n      min-height: 2rem;\n      border: none;\n      border-radius: var(--kb-radius-sm);\n      background: transparent;\n      color: inherit;\n      cursor: pointer;\n      font-size: var(--kb-font-size-lg);\n      line-height: 1;\n      font-family: inherit;\n    }\n    .close:focus-visible {\n      outline: none;\n      box-shadow: var(--kb-focus-ring);\n    }\n  ");
 
 export class KitbashAlert extends HTMLElement {
   

package/dist/vanilla/badge.js

@@ -1,51 +1,4 @@
-var d=(_,U,Y,z,J)=>{let X=Y.length,O=U.length,I=X,Q=0,B=0,$=null;while(Q<O||B<I)if(O===Q){let W=I<X?B?z(Y[B-1],-0).nextSibling:z(Y[I],0):J;while(B<I)_.insertBefore(z(Y[B++],1),W)}else if(I===B)while(Q<O){if(!$||!$.has(U[Q]))_.removeChild(z(U[Q],-1));Q++}else if(U[Q]===Y[B])Q++,B++;else if(U[O-1]===Y[I-1])O--,I--;else if(U[Q]===Y[I-1]&&Y[B]===U[O-1]){let W=z(U[--O],-0).nextSibling;_.insertBefore(z(Y[B++],1),z(U[Q++],-0).nextSibling),_.insertBefore(z(Y[--I],1),W),U[O]=Y[I]}else{if(!$){$=new Map;let W=B;while(W<I)$.set(Y[W],W++)}if($.has(U[Q])){let W=$.get(U[Q]);if(B<W&&W<I){let Z=Q,K=1;while(++Z<O&&Z<I&&$.get(U[Z])===W+K)K++;if(K>W-B){let D=z(U[Q],0);while(B<W)_.insertBefore(z(Y[B++],1),D)}else _.replaceChild(z(Y[B++],1),z(U[Q++],-1))}else Q++}else _.removeChild(z(U[Q++],-1))}return Y};var{isArray:E}=Array,{getPrototypeOf:R1,getOwnPropertyDescriptor:D1}=Object;var i="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),M=(_,U,Y)=>{return _.set(U,Y),Y},m=(_,U)=>{let Y;do Y=D1(_,U);while(!Y&&(_=R1(_)));return Y},o=(_,U)=>U.reduceRight(M1,_),M1=(_,U)=>_.childNodes[U];var s=1;var r=8;var l=11;var{setPrototypeOf:T1}=Object,n=(_)=>{function U(Y){return T1(Y,new.target.prototype)}return U.prototype=_.prototype,U};var T,V=(_,U,Y)=>{if(!T)T=N();if(Y)T.setStartAfter(_);else T.setStartBefore(_);return T.setEndAfter(U),T.deleteContents(),_};var x=({firstChild:_,lastChild:U},Y)=>V(_,U,Y),t=!1,j=(_,U)=>t&&_.nodeType===l?1/U<0?U?x(_,!0):_.lastChild:U?_.valueOf():_.firstChild:_,a=(_)=>document.createComment(_);class w extends n(DocumentFragment){#U=a("<>");#Y=a("</>");#_=q;constructor(_){super(_);this.replaceChildren(...[this.#U,..._.childNodes,this.#Y]),t=!0}get firstChild(){return this.#U}get lastChild(){return this.#Y}get parentNode(){return this.#U.parentNode}remove(){x(this,!1)}replaceWith(_){x(this,!0).replaceWith(_)}valueOf(){let{parentNode:_}=this;if(_===this){if(this.#_===q)this.#_=[...this.childNodes]}else{if(_){let{firstChild:U,lastChild:Y}=this;this.#_=[U];while(U!==Y)this.#_.push(U=U.nextSibling)}this.replaceChildren(...this.#_)}return this}}var e=(_,U,Y)=>_.setAttribute(U,Y),P=(_,U)=>_.removeAttribute(U),H1=(_,U)=>{for(let Y in U){let z=U[Y],J=Y==="role"?Y:`aria-${Y}`;if(z==null)P(_,J);else e(_,J,z)}return U},C,P1=(_,U,Y)=>{if(Y=Y.slice(1),!C)C=new WeakMap;let z=C.get(_)||M(C,_,{}),J=z[Y];if(J&&J[0])_.removeEventListener(Y,...J);if(J=E(U)?U:[U,!1],z[Y]=J,J[0])_.addEventListener(Y,...J);return U};var G=(_,U)=>{let{t:Y,n:z}=_,J=!1;switch(typeof U){case"object":if(U!==null){(z||Y).replaceWith(_.n=U.valueOf());break}case"undefined":J=!0;default:if(Y.data=J?"":U,z)_.n=null,z.replaceWith(Y);break}return U},F1=(_,U)=>f(_,U,U==null?"class":"className"),A1=(_,U)=>{let{dataset:Y}=_;for(let z in U)if(U[z]==null)delete Y[z];else Y[z]=U[z];return U},k=(_,U,Y)=>_[Y]=U,E1=(_,U,Y)=>k(_,U,Y.slice(1)),f=(_,U,Y)=>U==null?(P(_,Y),U):k(_,U,Y),_1=(_,U)=>(typeof U==="function"?U(_):U.current=_,U),y=(_,U,Y)=>(U==null?P(_,Y):e(_,Y,U),U),N1=(_,U)=>U==null?f(_,U,"style"):k(_.style,U,"cssText"),V1=(_,U,Y)=>(_.toggleAttribute(Y.slice(1),U),U),R=(_,U,Y)=>{let{length:z}=U;if(_.data=`[${z}]`,z)return d(_.parentNode,Y,U,j,_);switch(Y.length){case 1:Y[0].remove();case 0:break;default:V(j(Y[0],0),j(Y.at(-1),-0),!1);break}return q},U1=new Map([["aria",H1],["class",F1],["data",A1],["ref",_1],["style",N1]]),Y1=(_,U,Y)=>{switch(U[0]){case".":return E1;case"?":return V1;case"@":return P1;default:return Y||"ownerSVGElement"in _?U==="ref"?_1:y:U1.get(U)||(U in _?U.startsWith("on")?k:m(_,U)?.set?f:y:y)}},z1=(_,U)=>(_.textContent=U==null?"":U,U);var H=(_,U,Y)=>({a:_,b:U,c:Y}),I1=(_,U)=>({b:_,c:U}),J1=(_,U,Y,z)=>({v:q,u:_,t:U,n:Y,c:z}),L=()=>H(null,null,q);var b=(_)=>(U,Y)=>{let{a:z,b:J,c:X}=_(U,Y),O=document.importNode(z,!0),I=q;if(J!==q){I=[];for(let Q,B,$=0;$<J.length;$++){let{a:W,b:Z,c:K}=J[$],D=W===B?Q:Q=o(O,B=W);I[$]=J1(Z,D,K,Z===R?[]:Z===G?L():null)}}return I1(X?O.firstChild:new w(O),I)};var O1=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Q1=/^(?: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,W1=(_,U,Y)=>{let z=0;return _.join("\x01").trim().replace(j1,(J,X,O,I)=>`<${X}${O.replace(C1,"\x02=$2$1").trimEnd()}${I?Y||Q1.test(X)?" /":`></${X}`:""}>`).replace(k1,(J)=>J==="\x01"?`<!--${U+z++}-->`:U+z++)};var S=document.createElement("template"),g,h,X1=(_,U)=>{if(U){if(!g)g=document.createElementNS(i,"svg"),h=N(),h.selectNodeContents(g);return h.createContextualFragment(_)}S.innerHTML=_;let{content:Y}=S;return S=S.cloneNode(!1),Y};var c=(_)=>{let U=[],Y;while(Y=_.parentNode)U.push(U.indexOf.call(Y.childNodes,_)),_=Y;return U},$1=()=>document.createTextNode(""),S1=(_,U,Y)=>{let z=X1(W1(_,F,Y),Y),{length:J}=_,X=q;if(J>1){let Q=[],B=document.createTreeWalker(z,129),$=0,W=`${F}${$++}`;X=[];while($<J){let Z=B.nextNode();if(Z.nodeType===r){if(Z.data===W){let K=E(U[$-1])?R:G;if(K===G)Q.push(Z);X.push(H(c(Z),K,null)),W=`${F}${$++}`}}else{let K;while(Z.hasAttribute(W)){if(!K)K=c(Z);let D=Z.getAttribute(W);X.push(H(K,Y1(Z,D,Y),D)),P(Z,W),W=`${F}${$++}`}if(!Y&&O1.test(Z.localName)&&Z.textContent.trim()===`<!--${W}-->`)X.push(H(K||c(Z),z1,null)),W=`${F}${$++}`}}for($=0;$<Q.length;$++)Q[$].replaceWith($1())}let{childNodes:O}=z,{length:I}=O;if(I<1)I=1,z.appendChild($1());else if(I===1&&J!==1&&O[0].nodeType!==s)I=0;return M(B1,_,H(z,X,I===1))},B1=new WeakMap,F="isµ",v=(_)=>(U,Y)=>B1.get(U)||S1(U,Y,_);var x1=b(v(!1)),w1=b(v(!0)),p=(_,{s:U,t:Y,v:z})=>{if(_.a!==Y){let{b:J,c:X}=(U?w1:x1)(Y,z);_.a=Y,_.b=J,_.c=X}for(let{c:J}=_,X=0;X<J.length;X++){let O=z[X],I=J[X];switch(I.u){case R:I.v=R(I.t,y1(I.c,O),I.v);break;case G:let Q=O instanceof A?p(I.c||(I.c=L()),O):(I.c=null,O);if(Q!==I.v)I.v=G(I,Q);break;default:if(O!==I.v)I.v=I.u(I.t,O,I.n,I.v);break}}return _.b},y1=(_,U)=>{let Y=0,{length:z}=U;if(z<_.length)_.splice(z);for(;Y<z;Y++){let J=U[Y];if(J instanceof A)U[Y]=p(_[Y]||(_[Y]=L()),J);else _[Y]=null}return U};class A{constructor(_,U,Y){this.s=_,this.t=U,this.v=Y}toDOM(_=L()){return p(_,this)}}var Z1=new WeakMap,u=(_,U)=>{let Y=Z1.get(_)||M(Z1,_,L()),{b:z}=Y;if(z!==(typeof U==="function"?U():U).toDOM(Y))_.replaceChildren(Y.b.valueOf());return _};/*! (c) Andrea Giammarchi - MIT */var K1=(_)=>(U,...Y)=>new A(_,U,Y),q1=K1(!1),C_=K1(!0);var G1=new CSSStyleSheet;G1.replaceSync(`:host {
---kb-color-bg-canvas: #ffffff;
---kb-color-bg-surface: #f6f8fa;
---kb-color-bg-subtle: #eef1f4;
---kb-color-bg-inverse: #1f2328;
---kb-color-fg-default: #1f2328;
---kb-color-fg-muted: #656d76;
---kb-color-fg-subtle: #8c959f;
---kb-color-fg-on-accent: #ffffff;
---kb-color-fg-on-inverse: #ffffff;
---kb-color-border-default: #d0d7de;
---kb-color-border-muted: #e6ebf0;
---kb-color-border-focus: #0969da;
---kb-color-accent-default: #0969da;
---kb-color-accent-hover: #0860ca;
---kb-color-accent-subtle: #ddf4ff;
---kb-color-danger-default: #cf222e;
---kb-color-danger-subtle: #ffebe9;
---kb-color-success-default: #1a7f37;
---kb-color-success-subtle: #dafbe1;
---kb-color-warning-default: #9a6700;
---kb-color-warning-subtle: #fff8c5;
---kb-space-2xs: 2px;
---kb-space-xs: 4px;
---kb-space-sm: 8px;
---kb-space-md: 16px;
---kb-space-lg: 24px;
---kb-space-xl: 32px;
---kb-space-2xl: 48px;
---kb-radius-sm: 4px;
---kb-radius-md: 8px;
---kb-radius-lg: 12px;
---kb-radius-full: 9999px;
---kb-font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
---kb-font-size-sm: 0.875rem;
---kb-font-size-md: 1rem;
---kb-font-size-lg: 1.125rem;
---kb-font-size-xl: 1.25rem;
---kb-font-weight-regular: 400;
---kb-font-weight-medium: 500;
---kb-font-weight-semibold: 600;
---kb-line-height-tight: 1.25;
---kb-line-height-normal: 1.5;
---kb-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08);
---kb-shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1);
---kb-focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.35);
-}
-
+var d=(_,U,Y,z,J)=>{let X=Y.length,O=U.length,I=X,Q=0,B=0,$=null;while(Q<O||B<I)if(O===Q){let W=I<X?B?z(Y[B-1],-0).nextSibling:z(Y[I],0):J;while(B<I)_.insertBefore(z(Y[B++],1),W)}else if(I===B)while(Q<O){if(!$||!$.has(U[Q]))_.removeChild(z(U[Q],-1));Q++}else if(U[Q]===Y[B])Q++,B++;else if(U[O-1]===Y[I-1])O--,I--;else if(U[Q]===Y[I-1]&&Y[B]===U[O-1]){let W=z(U[--O],-0).nextSibling;_.insertBefore(z(Y[B++],1),z(U[Q++],-0).nextSibling),_.insertBefore(z(Y[--I],1),W),U[O]=Y[I]}else{if(!$){$=new Map;let W=B;while(W<I)$.set(Y[W],W++)}if($.has(U[Q])){let W=$.get(U[Q]);if(B<W&&W<I){let Z=Q,K=1;while(++Z<O&&Z<I&&$.get(U[Z])===W+K)K++;if(K>W-B){let D=z(U[Q],0);while(B<W)_.insertBefore(z(Y[B++],1),D)}else _.replaceChild(z(Y[B++],1),z(U[Q++],-1))}else Q++}else _.removeChild(z(U[Q++],-1))}return Y};var{isArray:E}=Array,{getPrototypeOf:R1,getOwnPropertyDescriptor:D1}=Object;var i="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),M=(_,U,Y)=>{return _.set(U,Y),Y},m=(_,U)=>{let Y;do Y=D1(_,U);while(!Y&&(_=R1(_)));return Y},o=(_,U)=>U.reduceRight(M1,_),M1=(_,U)=>_.childNodes[U];var s=1;var r=8;var l=11;var{setPrototypeOf:T1}=Object,n=(_)=>{function U(Y){return T1(Y,new.target.prototype)}return U.prototype=_.prototype,U};var T,V=(_,U,Y)=>{if(!T)T=N();if(Y)T.setStartAfter(_);else T.setStartBefore(_);return T.setEndAfter(U),T.deleteContents(),_};var x=({firstChild:_,lastChild:U},Y)=>V(_,U,Y),t=!1,j=(_,U)=>t&&_.nodeType===l?1/U<0?U?x(_,!0):_.lastChild:U?_.valueOf():_.firstChild:_,a=(_)=>document.createComment(_);class w extends n(DocumentFragment){#U=a("<>");#Y=a("</>");#_=q;constructor(_){super(_);this.replaceChildren(...[this.#U,..._.childNodes,this.#Y]),t=!0}get firstChild(){return this.#U}get lastChild(){return this.#Y}get parentNode(){return this.#U.parentNode}remove(){x(this,!1)}replaceWith(_){x(this,!0).replaceWith(_)}valueOf(){let{parentNode:_}=this;if(_===this){if(this.#_===q)this.#_=[...this.childNodes]}else{if(_){let{firstChild:U,lastChild:Y}=this;this.#_=[U];while(U!==Y)this.#_.push(U=U.nextSibling)}this.replaceChildren(...this.#_)}return this}}var e=(_,U,Y)=>_.setAttribute(U,Y),P=(_,U)=>_.removeAttribute(U),H1=(_,U)=>{for(let Y in U){let z=U[Y],J=Y==="role"?Y:`aria-${Y}`;if(z==null)P(_,J);else e(_,J,z)}return U},C,P1=(_,U,Y)=>{if(Y=Y.slice(1),!C)C=new WeakMap;let z=C.get(_)||M(C,_,{}),J=z[Y];if(J&&J[0])_.removeEventListener(Y,...J);if(J=E(U)?U:[U,!1],z[Y]=J,J[0])_.addEventListener(Y,...J);return U};var G=(_,U)=>{let{t:Y,n:z}=_,J=!1;switch(typeof U){case"object":if(U!==null){(z||Y).replaceWith(_.n=U.valueOf());break}case"undefined":J=!0;default:if(Y.data=J?"":U,z)_.n=null,z.replaceWith(Y);break}return U},F1=(_,U)=>f(_,U,U==null?"class":"className"),A1=(_,U)=>{let{dataset:Y}=_;for(let z in U)if(U[z]==null)delete Y[z];else Y[z]=U[z];return U},k=(_,U,Y)=>_[Y]=U,E1=(_,U,Y)=>k(_,U,Y.slice(1)),f=(_,U,Y)=>U==null?(P(_,Y),U):k(_,U,Y),_1=(_,U)=>(typeof U==="function"?U(_):U.current=_,U),y=(_,U,Y)=>(U==null?P(_,Y):e(_,Y,U),U),N1=(_,U)=>U==null?f(_,U,"style"):k(_.style,U,"cssText"),V1=(_,U,Y)=>(_.toggleAttribute(Y.slice(1),U),U),R=(_,U,Y)=>{let{length:z}=U;if(_.data=`[${z}]`,z)return d(_.parentNode,Y,U,j,_);switch(Y.length){case 1:Y[0].remove();case 0:break;default:V(j(Y[0],0),j(Y.at(-1),-0),!1);break}return q},U1=new Map([["aria",H1],["class",F1],["data",A1],["ref",_1],["style",N1]]),Y1=(_,U,Y)=>{switch(U[0]){case".":return E1;case"?":return V1;case"@":return P1;default:return Y||"ownerSVGElement"in _?U==="ref"?_1:y:U1.get(U)||(U in _?U.startsWith("on")?k:m(_,U)?.set?f:y:y)}},z1=(_,U)=>(_.textContent=U==null?"":U,U);var H=(_,U,Y)=>({a:_,b:U,c:Y}),I1=(_,U)=>({b:_,c:U}),J1=(_,U,Y,z)=>({v:q,u:_,t:U,n:Y,c:z}),L=()=>H(null,null,q);var b=(_)=>(U,Y)=>{let{a:z,b:J,c:X}=_(U,Y),O=document.importNode(z,!0),I=q;if(J!==q){I=[];for(let Q,B,$=0;$<J.length;$++){let{a:W,b:Z,c:K}=J[$],D=W===B?Q:Q=o(O,B=W);I[$]=J1(Z,D,K,Z===R?[]:Z===G?L():null)}}return I1(X?O.firstChild:new w(O),I)};var O1=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Q1=/^(?: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,W1=(_,U,Y)=>{let z=0;return _.join("\x01").trim().replace(j1,(J,X,O,I)=>`<${X}${O.replace(C1,"\x02=$2$1").trimEnd()}${I?Y||Q1.test(X)?" /":`></${X}`:""}>`).replace(k1,(J)=>J==="\x01"?`<!--${U+z++}-->`:U+z++)};var S=document.createElement("template"),g,h,X1=(_,U)=>{if(U){if(!g)g=document.createElementNS(i,"svg"),h=N(),h.selectNodeContents(g);return h.createContextualFragment(_)}S.innerHTML=_;let{content:Y}=S;return S=S.cloneNode(!1),Y};var c=(_)=>{let U=[],Y;while(Y=_.parentNode)U.push(U.indexOf.call(Y.childNodes,_)),_=Y;return U},$1=()=>document.createTextNode(""),S1=(_,U,Y)=>{let z=X1(W1(_,F,Y),Y),{length:J}=_,X=q;if(J>1){let Q=[],B=document.createTreeWalker(z,129),$=0,W=`${F}${$++}`;X=[];while($<J){let Z=B.nextNode();if(Z.nodeType===r){if(Z.data===W){let K=E(U[$-1])?R:G;if(K===G)Q.push(Z);X.push(H(c(Z),K,null)),W=`${F}${$++}`}}else{let K;while(Z.hasAttribute(W)){if(!K)K=c(Z);let D=Z.getAttribute(W);X.push(H(K,Y1(Z,D,Y),D)),P(Z,W),W=`${F}${$++}`}if(!Y&&O1.test(Z.localName)&&Z.textContent.trim()===`<!--${W}-->`)X.push(H(K||c(Z),z1,null)),W=`${F}${$++}`}}for($=0;$<Q.length;$++)Q[$].replaceWith($1())}let{childNodes:O}=z,{length:I}=O;if(I<1)I=1,z.appendChild($1());else if(I===1&&J!==1&&O[0].nodeType!==s)I=0;return M(B1,_,H(z,X,I===1))},B1=new WeakMap,F="isµ",v=(_)=>(U,Y)=>B1.get(U)||S1(U,Y,_);var x1=b(v(!1)),w1=b(v(!0)),p=(_,{s:U,t:Y,v:z})=>{if(_.a!==Y){let{b:J,c:X}=(U?w1:x1)(Y,z);_.a=Y,_.b=J,_.c=X}for(let{c:J}=_,X=0;X<J.length;X++){let O=z[X],I=J[X];switch(I.u){case R:I.v=R(I.t,y1(I.c,O),I.v);break;case G:let Q=O instanceof A?p(I.c||(I.c=L()),O):(I.c=null,O);if(Q!==I.v)I.v=G(I,Q);break;default:if(O!==I.v)I.v=I.u(I.t,O,I.n,I.v);break}}return _.b},y1=(_,U)=>{let Y=0,{length:z}=U;if(z<_.length)_.splice(z);for(;Y<z;Y++){let J=U[Y];if(J instanceof A)U[Y]=p(_[Y]||(_[Y]=L()),J);else _[Y]=null}return U};class A{constructor(_,U,Y){this.s=_,this.t=U,this.v=Y}toDOM(_=L()){return p(_,this)}}var Z1=new WeakMap,u=(_,U)=>{let Y=Z1.get(_)||M(Z1,_,L()),{b:z}=Y;if(z!==(typeof U==="function"?U():U).toDOM(Y))_.replaceChildren(Y.b.valueOf());return _};/*! (c) Andrea Giammarchi - MIT */var K1=(_)=>(U,...Y)=>new A(_,U,Y),q1=K1(!1),C_=K1(!0);var G1=new CSSStyleSheet;G1.replaceSync(`
 
     :host {
       display: inline-flex;

package/dist/vanilla/badge.src.js

@@ -2,7 +2,7 @@
 import { render, html } from 'uhtml';
 
 const sheet = new CSSStyleSheet();
-sheet.replaceSync(":host {\n--kb-color-bg-canvas: #ffffff;\n--kb-color-bg-surface: #f6f8fa;\n--kb-color-bg-subtle: #eef1f4;\n--kb-color-bg-inverse: #1f2328;\n--kb-color-fg-default: #1f2328;\n--kb-color-fg-muted: #656d76;\n--kb-color-fg-subtle: #8c959f;\n--kb-color-fg-on-accent: #ffffff;\n--kb-color-fg-on-inverse: #ffffff;\n--kb-color-border-default: #d0d7de;\n--kb-color-border-muted: #e6ebf0;\n--kb-color-border-focus: #0969da;\n--kb-color-accent-default: #0969da;\n--kb-color-accent-hover: #0860ca;\n--kb-color-accent-subtle: #ddf4ff;\n--kb-color-danger-default: #cf222e;\n--kb-color-danger-subtle: #ffebe9;\n--kb-color-success-default: #1a7f37;\n--kb-color-success-subtle: #dafbe1;\n--kb-color-warning-default: #9a6700;\n--kb-color-warning-subtle: #fff8c5;\n--kb-space-2xs: 2px;\n--kb-space-xs: 4px;\n--kb-space-sm: 8px;\n--kb-space-md: 16px;\n--kb-space-lg: 24px;\n--kb-space-xl: 32px;\n--kb-space-2xl: 48px;\n--kb-radius-sm: 4px;\n--kb-radius-md: 8px;\n--kb-radius-lg: 12px;\n--kb-radius-full: 9999px;\n--kb-font-family-sans: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n--kb-font-size-sm: 0.875rem;\n--kb-font-size-md: 1rem;\n--kb-font-size-lg: 1.125rem;\n--kb-font-size-xl: 1.25rem;\n--kb-font-weight-regular: 400;\n--kb-font-weight-medium: 500;\n--kb-font-weight-semibold: 600;\n--kb-line-height-tight: 1.25;\n--kb-line-height-normal: 1.5;\n--kb-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08);\n--kb-shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1);\n--kb-focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.35);\n}\n\n\n    :host {\n      display: inline-flex;\n      font-family: var(--kb-font-family-sans);\n    }\n    span {\n      display: inline-flex;\n      align-items: center;\n      max-width: 100%;\n      padding: var(--kb-space-2xs) var(--kb-space-sm);\n      border-radius: var(--kb-radius-full);\n      font-size: var(--kb-font-size-sm);\n      font-weight: var(--kb-font-weight-medium);\n      line-height: var(--kb-line-height-tight);\n      white-space: nowrap;\n    }\n    .neutral {\n      background: var(--kb-color-bg-subtle);\n      color: var(--kb-color-fg-default);\n    }\n    .accent {\n      background: var(--kb-color-accent-subtle);\n      color: var(--kb-color-accent-default);\n    }\n    .success {\n      background: var(--kb-color-success-subtle);\n      color: var(--kb-color-success-default);\n    }\n    .warning {\n      background: var(--kb-color-warning-subtle);\n      color: var(--kb-color-warning-default);\n    }\n    .danger {\n      background: var(--kb-color-danger-subtle);\n      color: var(--kb-color-danger-default);\n    }\n  ");
+sheet.replaceSync("\n\n    :host {\n      display: inline-flex;\n      font-family: var(--kb-font-family-sans);\n    }\n    span {\n      display: inline-flex;\n      align-items: center;\n      max-width: 100%;\n      padding: var(--kb-space-2xs) var(--kb-space-sm);\n      border-radius: var(--kb-radius-full);\n      font-size: var(--kb-font-size-sm);\n      font-weight: var(--kb-font-weight-medium);\n      line-height: var(--kb-line-height-tight);\n      white-space: nowrap;\n    }\n    .neutral {\n      background: var(--kb-color-bg-subtle);\n      color: var(--kb-color-fg-default);\n    }\n    .accent {\n      background: var(--kb-color-accent-subtle);\n      color: var(--kb-color-accent-default);\n    }\n    .success {\n      background: var(--kb-color-success-subtle);\n      color: var(--kb-color-success-default);\n    }\n    .warning {\n      background: var(--kb-color-warning-subtle);\n      color: var(--kb-color-warning-default);\n    }\n    .danger {\n      background: var(--kb-color-danger-subtle);\n      color: var(--kb-color-danger-default);\n    }\n  ");
 
 export class KitbashBadge extends HTMLElement {
   

package/dist/vanilla/box.js

@@ -1,51 +1,4 @@
-var p=(_,U,Y,z,J)=>{let W=Y.length,O=U.length,I=W,Q=0,B=0,$=null;while(Q<O||B<I)if(O===Q){let X=I<W?B?z(Y[B-1],-0).nextSibling:z(Y[I],0):J;while(B<I)_.insertBefore(z(Y[B++],1),X)}else if(I===B)while(Q<O){if(!$||!$.has(U[Q]))_.removeChild(z(U[Q],-1));Q++}else if(U[Q]===Y[B])Q++,B++;else if(U[O-1]===Y[I-1])O--,I--;else if(U[Q]===Y[I-1]&&Y[B]===U[O-1]){let X=z(U[--O],-0).nextSibling;_.insertBefore(z(Y[B++],1),z(U[Q++],-0).nextSibling),_.insertBefore(z(Y[--I],1),X),U[O]=Y[I]}else{if(!$){$=new Map;let X=B;while(X<I)$.set(Y[X],X++)}if($.has(U[Q])){let X=$.get(U[Q]);if(B<X&&X<I){let Z=Q,K=1;while(++Z<O&&Z<I&&$.get(U[Z])===X+K)K++;if(K>X-B){let D=z(U[Q],0);while(B<X)_.insertBefore(z(Y[B++],1),D)}else _.replaceChild(z(Y[B++],1),z(U[Q++],-1))}else Q++}else _.removeChild(z(U[Q++],-1))}return Y};var{isArray:E}=Array,{getPrototypeOf:R1,getOwnPropertyDescriptor:D1}=Object;var m="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),M=(_,U,Y)=>{return _.set(U,Y),Y},i=(_,U)=>{let Y;do Y=D1(_,U);while(!Y&&(_=R1(_)));return Y},o=(_,U)=>U.reduceRight(M1,_),M1=(_,U)=>_.childNodes[U];var s=1;var r=8;var l=11;var{setPrototypeOf:T1}=Object,n=(_)=>{function U(Y){return T1(Y,new.target.prototype)}return U.prototype=_.prototype,U};var T,V=(_,U,Y)=>{if(!T)T=N();if(Y)T.setStartAfter(_);else T.setStartBefore(_);return T.setEndAfter(U),T.deleteContents(),_};var w=({firstChild:_,lastChild:U},Y)=>V(_,U,Y),t=!1,j=(_,U)=>t&&_.nodeType===l?1/U<0?U?w(_,!0):_.lastChild:U?_.valueOf():_.firstChild:_,a=(_)=>document.createComment(_);class x extends n(DocumentFragment){#U=a("<>");#Y=a("</>");#_=q;constructor(_){super(_);this.replaceChildren(...[this.#U,..._.childNodes,this.#Y]),t=!0}get firstChild(){return this.#U}get lastChild(){return this.#Y}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:Y}=this;this.#_=[U];while(U!==Y)this.#_.push(U=U.nextSibling)}this.replaceChildren(...this.#_)}return this}}var e=(_,U,Y)=>_.setAttribute(U,Y),P=(_,U)=>_.removeAttribute(U),H1=(_,U)=>{for(let Y in U){let z=U[Y],J=Y==="role"?Y:`aria-${Y}`;if(z==null)P(_,J);else e(_,J,z)}return U},C,P1=(_,U,Y)=>{if(Y=Y.slice(1),!C)C=new WeakMap;let z=C.get(_)||M(C,_,{}),J=z[Y];if(J&&J[0])_.removeEventListener(Y,...J);if(J=E(U)?U:[U,!1],z[Y]=J,J[0])_.addEventListener(Y,...J);return U};var G=(_,U)=>{let{t:Y,n:z}=_,J=!1;switch(typeof U){case"object":if(U!==null){(z||Y).replaceWith(_.n=U.valueOf());break}case"undefined":J=!0;default:if(Y.data=J?"":U,z)_.n=null,z.replaceWith(Y);break}return U},F1=(_,U)=>f(_,U,U==null?"class":"className"),A1=(_,U)=>{let{dataset:Y}=_;for(let z in U)if(U[z]==null)delete Y[z];else Y[z]=U[z];return U},k=(_,U,Y)=>_[Y]=U,E1=(_,U,Y)=>k(_,U,Y.slice(1)),f=(_,U,Y)=>U==null?(P(_,Y),U):k(_,U,Y),_1=(_,U)=>(typeof U==="function"?U(_):U.current=_,U),y=(_,U,Y)=>(U==null?P(_,Y):e(_,Y,U),U),N1=(_,U)=>U==null?f(_,U,"style"):k(_.style,U,"cssText"),V1=(_,U,Y)=>(_.toggleAttribute(Y.slice(1),U),U),R=(_,U,Y)=>{let{length:z}=U;if(_.data=`[${z}]`,z)return p(_.parentNode,Y,U,j,_);switch(Y.length){case 1:Y[0].remove();case 0:break;default:V(j(Y[0],0),j(Y.at(-1),-0),!1);break}return q},U1=new Map([["aria",H1],["class",F1],["data",A1],["ref",_1],["style",N1]]),Y1=(_,U,Y)=>{switch(U[0]){case".":return E1;case"?":return V1;case"@":return P1;default:return Y||"ownerSVGElement"in _?U==="ref"?_1:y:U1.get(U)||(U in _?U.startsWith("on")?k:i(_,U)?.set?f:y:y)}},z1=(_,U)=>(_.textContent=U==null?"":U,U);var H=(_,U,Y)=>({a:_,b:U,c:Y}),I1=(_,U)=>({b:_,c:U}),J1=(_,U,Y,z)=>({v:q,u:_,t:U,n:Y,c:z}),L=()=>H(null,null,q);var b=(_)=>(U,Y)=>{let{a:z,b:J,c:W}=_(U,Y),O=document.importNode(z,!0),I=q;if(J!==q){I=[];for(let Q,B,$=0;$<J.length;$++){let{a:X,b:Z,c:K}=J[$],D=X===B?Q:Q=o(O,B=X);I[$]=J1(Z,D,K,Z===R?[]:Z===G?L():null)}}return I1(W?O.firstChild:new x(O),I)};var O1=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Q1=/^(?: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,W1=(_,U,Y)=>{let z=0;return _.join("\x01").trim().replace(j1,(J,W,O,I)=>`<${W}${O.replace(C1,"\x02=$2$1").trimEnd()}${I?Y||Q1.test(W)?" /":`></${W}`:""}>`).replace(k1,(J)=>J==="\x01"?`<!--${U+z++}-->`:U+z++)};var S=document.createElement("template"),g,h,X1=(_,U)=>{if(U){if(!g)g=document.createElementNS(m,"svg"),h=N(),h.selectNodeContents(g);return h.createContextualFragment(_)}S.innerHTML=_;let{content:Y}=S;return S=S.cloneNode(!1),Y};var c=(_)=>{let U=[],Y;while(Y=_.parentNode)U.push(U.indexOf.call(Y.childNodes,_)),_=Y;return U},$1=()=>document.createTextNode(""),S1=(_,U,Y)=>{let z=X1(W1(_,F,Y),Y),{length:J}=_,W=q;if(J>1){let Q=[],B=document.createTreeWalker(z,129),$=0,X=`${F}${$++}`;W=[];while($<J){let Z=B.nextNode();if(Z.nodeType===r){if(Z.data===X){let K=E(U[$-1])?R:G;if(K===G)Q.push(Z);W.push(H(c(Z),K,null)),X=`${F}${$++}`}}else{let K;while(Z.hasAttribute(X)){if(!K)K=c(Z);let D=Z.getAttribute(X);W.push(H(K,Y1(Z,D,Y),D)),P(Z,X),X=`${F}${$++}`}if(!Y&&O1.test(Z.localName)&&Z.textContent.trim()===`<!--${X}-->`)W.push(H(K||c(Z),z1,null)),X=`${F}${$++}`}}for($=0;$<Q.length;$++)Q[$].replaceWith($1())}let{childNodes:O}=z,{length:I}=O;if(I<1)I=1,z.appendChild($1());else if(I===1&&J!==1&&O[0].nodeType!==s)I=0;return M(B1,_,H(z,W,I===1))},B1=new WeakMap,F="isµ",v=(_)=>(U,Y)=>B1.get(U)||S1(U,Y,_);var w1=b(v(!1)),x1=b(v(!0)),u=(_,{s:U,t:Y,v:z})=>{if(_.a!==Y){let{b:J,c:W}=(U?x1:w1)(Y,z);_.a=Y,_.b=J,_.c=W}for(let{c:J}=_,W=0;W<J.length;W++){let O=z[W],I=J[W];switch(I.u){case R:I.v=R(I.t,y1(I.c,O),I.v);break;case G:let Q=O instanceof A?u(I.c||(I.c=L()),O):(I.c=null,O);if(Q!==I.v)I.v=G(I,Q);break;default:if(O!==I.v)I.v=I.u(I.t,O,I.n,I.v);break}}return _.b},y1=(_,U)=>{let Y=0,{length:z}=U;if(z<_.length)_.splice(z);for(;Y<z;Y++){let J=U[Y];if(J instanceof A)U[Y]=u(_[Y]||(_[Y]=L()),J);else _[Y]=null}return U};class A{constructor(_,U,Y){this.s=_,this.t=U,this.v=Y}toDOM(_=L()){return u(_,this)}}var Z1=new WeakMap,d=(_,U)=>{let Y=Z1.get(_)||M(Z1,_,L()),{b:z}=Y;if(z!==(typeof U==="function"?U():U).toDOM(Y))_.replaceChildren(Y.b.valueOf());return _};/*! (c) Andrea Giammarchi - MIT */var K1=(_)=>(U,...Y)=>new A(_,U,Y),q1=K1(!1),C_=K1(!0);var G1=new CSSStyleSheet;G1.replaceSync(`:host {
---kb-color-bg-canvas: #ffffff;
---kb-color-bg-surface: #f6f8fa;
---kb-color-bg-subtle: #eef1f4;
---kb-color-bg-inverse: #1f2328;
---kb-color-fg-default: #1f2328;
---kb-color-fg-muted: #656d76;
---kb-color-fg-subtle: #8c959f;
---kb-color-fg-on-accent: #ffffff;
---kb-color-fg-on-inverse: #ffffff;
---kb-color-border-default: #d0d7de;
---kb-color-border-muted: #e6ebf0;
---kb-color-border-focus: #0969da;
---kb-color-accent-default: #0969da;
---kb-color-accent-hover: #0860ca;
---kb-color-accent-subtle: #ddf4ff;
---kb-color-danger-default: #cf222e;
---kb-color-danger-subtle: #ffebe9;
---kb-color-success-default: #1a7f37;
---kb-color-success-subtle: #dafbe1;
---kb-color-warning-default: #9a6700;
---kb-color-warning-subtle: #fff8c5;
---kb-space-2xs: 2px;
---kb-space-xs: 4px;
---kb-space-sm: 8px;
---kb-space-md: 16px;
---kb-space-lg: 24px;
---kb-space-xl: 32px;
---kb-space-2xl: 48px;
---kb-radius-sm: 4px;
---kb-radius-md: 8px;
---kb-radius-lg: 12px;
---kb-radius-full: 9999px;
---kb-font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
---kb-font-size-sm: 0.875rem;
---kb-font-size-md: 1rem;
---kb-font-size-lg: 1.125rem;
---kb-font-size-xl: 1.25rem;
---kb-font-weight-regular: 400;
---kb-font-weight-medium: 500;
---kb-font-weight-semibold: 600;
---kb-line-height-tight: 1.25;
---kb-line-height-normal: 1.5;
---kb-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08);
---kb-shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1);
---kb-focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.35);
-}
-
+var p=(_,U,Y,z,J)=>{let W=Y.length,O=U.length,I=W,Q=0,B=0,$=null;while(Q<O||B<I)if(O===Q){let X=I<W?B?z(Y[B-1],-0).nextSibling:z(Y[I],0):J;while(B<I)_.insertBefore(z(Y[B++],1),X)}else if(I===B)while(Q<O){if(!$||!$.has(U[Q]))_.removeChild(z(U[Q],-1));Q++}else if(U[Q]===Y[B])Q++,B++;else if(U[O-1]===Y[I-1])O--,I--;else if(U[Q]===Y[I-1]&&Y[B]===U[O-1]){let X=z(U[--O],-0).nextSibling;_.insertBefore(z(Y[B++],1),z(U[Q++],-0).nextSibling),_.insertBefore(z(Y[--I],1),X),U[O]=Y[I]}else{if(!$){$=new Map;let X=B;while(X<I)$.set(Y[X],X++)}if($.has(U[Q])){let X=$.get(U[Q]);if(B<X&&X<I){let Z=Q,K=1;while(++Z<O&&Z<I&&$.get(U[Z])===X+K)K++;if(K>X-B){let D=z(U[Q],0);while(B<X)_.insertBefore(z(Y[B++],1),D)}else _.replaceChild(z(Y[B++],1),z(U[Q++],-1))}else Q++}else _.removeChild(z(U[Q++],-1))}return Y};var{isArray:E}=Array,{getPrototypeOf:R1,getOwnPropertyDescriptor:D1}=Object;var m="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),M=(_,U,Y)=>{return _.set(U,Y),Y},i=(_,U)=>{let Y;do Y=D1(_,U);while(!Y&&(_=R1(_)));return Y},o=(_,U)=>U.reduceRight(M1,_),M1=(_,U)=>_.childNodes[U];var s=1;var r=8;var l=11;var{setPrototypeOf:T1}=Object,n=(_)=>{function U(Y){return T1(Y,new.target.prototype)}return U.prototype=_.prototype,U};var T,V=(_,U,Y)=>{if(!T)T=N();if(Y)T.setStartAfter(_);else T.setStartBefore(_);return T.setEndAfter(U),T.deleteContents(),_};var w=({firstChild:_,lastChild:U},Y)=>V(_,U,Y),t=!1,j=(_,U)=>t&&_.nodeType===l?1/U<0?U?w(_,!0):_.lastChild:U?_.valueOf():_.firstChild:_,a=(_)=>document.createComment(_);class x extends n(DocumentFragment){#U=a("<>");#Y=a("</>");#_=q;constructor(_){super(_);this.replaceChildren(...[this.#U,..._.childNodes,this.#Y]),t=!0}get firstChild(){return this.#U}get lastChild(){return this.#Y}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:Y}=this;this.#_=[U];while(U!==Y)this.#_.push(U=U.nextSibling)}this.replaceChildren(...this.#_)}return this}}var e=(_,U,Y)=>_.setAttribute(U,Y),P=(_,U)=>_.removeAttribute(U),H1=(_,U)=>{for(let Y in U){let z=U[Y],J=Y==="role"?Y:`aria-${Y}`;if(z==null)P(_,J);else e(_,J,z)}return U},C,P1=(_,U,Y)=>{if(Y=Y.slice(1),!C)C=new WeakMap;let z=C.get(_)||M(C,_,{}),J=z[Y];if(J&&J[0])_.removeEventListener(Y,...J);if(J=E(U)?U:[U,!1],z[Y]=J,J[0])_.addEventListener(Y,...J);return U};var G=(_,U)=>{let{t:Y,n:z}=_,J=!1;switch(typeof U){case"object":if(U!==null){(z||Y).replaceWith(_.n=U.valueOf());break}case"undefined":J=!0;default:if(Y.data=J?"":U,z)_.n=null,z.replaceWith(Y);break}return U},F1=(_,U)=>f(_,U,U==null?"class":"className"),A1=(_,U)=>{let{dataset:Y}=_;for(let z in U)if(U[z]==null)delete Y[z];else Y[z]=U[z];return U},k=(_,U,Y)=>_[Y]=U,E1=(_,U,Y)=>k(_,U,Y.slice(1)),f=(_,U,Y)=>U==null?(P(_,Y),U):k(_,U,Y),_1=(_,U)=>(typeof U==="function"?U(_):U.current=_,U),y=(_,U,Y)=>(U==null?P(_,Y):e(_,Y,U),U),N1=(_,U)=>U==null?f(_,U,"style"):k(_.style,U,"cssText"),V1=(_,U,Y)=>(_.toggleAttribute(Y.slice(1),U),U),R=(_,U,Y)=>{let{length:z}=U;if(_.data=`[${z}]`,z)return p(_.parentNode,Y,U,j,_);switch(Y.length){case 1:Y[0].remove();case 0:break;default:V(j(Y[0],0),j(Y.at(-1),-0),!1);break}return q},U1=new Map([["aria",H1],["class",F1],["data",A1],["ref",_1],["style",N1]]),Y1=(_,U,Y)=>{switch(U[0]){case".":return E1;case"?":return V1;case"@":return P1;default:return Y||"ownerSVGElement"in _?U==="ref"?_1:y:U1.get(U)||(U in _?U.startsWith("on")?k:i(_,U)?.set?f:y:y)}},z1=(_,U)=>(_.textContent=U==null?"":U,U);var H=(_,U,Y)=>({a:_,b:U,c:Y}),I1=(_,U)=>({b:_,c:U}),J1=(_,U,Y,z)=>({v:q,u:_,t:U,n:Y,c:z}),L=()=>H(null,null,q);var b=(_)=>(U,Y)=>{let{a:z,b:J,c:W}=_(U,Y),O=document.importNode(z,!0),I=q;if(J!==q){I=[];for(let Q,B,$=0;$<J.length;$++){let{a:X,b:Z,c:K}=J[$],D=X===B?Q:Q=o(O,B=X);I[$]=J1(Z,D,K,Z===R?[]:Z===G?L():null)}}return I1(W?O.firstChild:new x(O),I)};var O1=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Q1=/^(?: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,W1=(_,U,Y)=>{let z=0;return _.join("\x01").trim().replace(j1,(J,W,O,I)=>`<${W}${O.replace(C1,"\x02=$2$1").trimEnd()}${I?Y||Q1.test(W)?" /":`></${W}`:""}>`).replace(k1,(J)=>J==="\x01"?`<!--${U+z++}-->`:U+z++)};var S=document.createElement("template"),g,h,X1=(_,U)=>{if(U){if(!g)g=document.createElementNS(m,"svg"),h=N(),h.selectNodeContents(g);return h.createContextualFragment(_)}S.innerHTML=_;let{content:Y}=S;return S=S.cloneNode(!1),Y};var c=(_)=>{let U=[],Y;while(Y=_.parentNode)U.push(U.indexOf.call(Y.childNodes,_)),_=Y;return U},$1=()=>document.createTextNode(""),S1=(_,U,Y)=>{let z=X1(W1(_,F,Y),Y),{length:J}=_,W=q;if(J>1){let Q=[],B=document.createTreeWalker(z,129),$=0,X=`${F}${$++}`;W=[];while($<J){let Z=B.nextNode();if(Z.nodeType===r){if(Z.data===X){let K=E(U[$-1])?R:G;if(K===G)Q.push(Z);W.push(H(c(Z),K,null)),X=`${F}${$++}`}}else{let K;while(Z.hasAttribute(X)){if(!K)K=c(Z);let D=Z.getAttribute(X);W.push(H(K,Y1(Z,D,Y),D)),P(Z,X),X=`${F}${$++}`}if(!Y&&O1.test(Z.localName)&&Z.textContent.trim()===`<!--${X}-->`)W.push(H(K||c(Z),z1,null)),X=`${F}${$++}`}}for($=0;$<Q.length;$++)Q[$].replaceWith($1())}let{childNodes:O}=z,{length:I}=O;if(I<1)I=1,z.appendChild($1());else if(I===1&&J!==1&&O[0].nodeType!==s)I=0;return M(B1,_,H(z,W,I===1))},B1=new WeakMap,F="isµ",v=(_)=>(U,Y)=>B1.get(U)||S1(U,Y,_);var w1=b(v(!1)),x1=b(v(!0)),u=(_,{s:U,t:Y,v:z})=>{if(_.a!==Y){let{b:J,c:W}=(U?x1:w1)(Y,z);_.a=Y,_.b=J,_.c=W}for(let{c:J}=_,W=0;W<J.length;W++){let O=z[W],I=J[W];switch(I.u){case R:I.v=R(I.t,y1(I.c,O),I.v);break;case G:let Q=O instanceof A?u(I.c||(I.c=L()),O):(I.c=null,O);if(Q!==I.v)I.v=G(I,Q);break;default:if(O!==I.v)I.v=I.u(I.t,O,I.n,I.v);break}}return _.b},y1=(_,U)=>{let Y=0,{length:z}=U;if(z<_.length)_.splice(z);for(;Y<z;Y++){let J=U[Y];if(J instanceof A)U[Y]=u(_[Y]||(_[Y]=L()),J);else _[Y]=null}return U};class A{constructor(_,U,Y){this.s=_,this.t=U,this.v=Y}toDOM(_=L()){return u(_,this)}}var Z1=new WeakMap,d=(_,U)=>{let Y=Z1.get(_)||M(Z1,_,L()),{b:z}=Y;if(z!==(typeof U==="function"?U():U).toDOM(Y))_.replaceChildren(Y.b.valueOf());return _};/*! (c) Andrea Giammarchi - MIT */var K1=(_)=>(U,...Y)=>new A(_,U,Y),q1=K1(!1),C_=K1(!0);var G1=new CSSStyleSheet;G1.replaceSync(`
 
     :host {
       display: block;

package/dist/vanilla/box.src.js

@@ -2,7 +2,7 @@
 import { render, html } from 'uhtml';
 
 const sheet = new CSSStyleSheet();
-sheet.replaceSync(":host {\n--kb-color-bg-canvas: #ffffff;\n--kb-color-bg-surface: #f6f8fa;\n--kb-color-bg-subtle: #eef1f4;\n--kb-color-bg-inverse: #1f2328;\n--kb-color-fg-default: #1f2328;\n--kb-color-fg-muted: #656d76;\n--kb-color-fg-subtle: #8c959f;\n--kb-color-fg-on-accent: #ffffff;\n--kb-color-fg-on-inverse: #ffffff;\n--kb-color-border-default: #d0d7de;\n--kb-color-border-muted: #e6ebf0;\n--kb-color-border-focus: #0969da;\n--kb-color-accent-default: #0969da;\n--kb-color-accent-hover: #0860ca;\n--kb-color-accent-subtle: #ddf4ff;\n--kb-color-danger-default: #cf222e;\n--kb-color-danger-subtle: #ffebe9;\n--kb-color-success-default: #1a7f37;\n--kb-color-success-subtle: #dafbe1;\n--kb-color-warning-default: #9a6700;\n--kb-color-warning-subtle: #fff8c5;\n--kb-space-2xs: 2px;\n--kb-space-xs: 4px;\n--kb-space-sm: 8px;\n--kb-space-md: 16px;\n--kb-space-lg: 24px;\n--kb-space-xl: 32px;\n--kb-space-2xl: 48px;\n--kb-radius-sm: 4px;\n--kb-radius-md: 8px;\n--kb-radius-lg: 12px;\n--kb-radius-full: 9999px;\n--kb-font-family-sans: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n--kb-font-size-sm: 0.875rem;\n--kb-font-size-md: 1rem;\n--kb-font-size-lg: 1.125rem;\n--kb-font-size-xl: 1.25rem;\n--kb-font-weight-regular: 400;\n--kb-font-weight-medium: 500;\n--kb-font-weight-semibold: 600;\n--kb-line-height-tight: 1.25;\n--kb-line-height-normal: 1.5;\n--kb-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08);\n--kb-shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1);\n--kb-focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.35);\n}\n\n\n    :host {\n      display: block;\n      box-sizing: border-box;\n      font-family: var(--kb-font-family-sans);\n      color: var(--kb-color-fg-default);\n    }\n    .root {\n      box-sizing: border-box;\n      display: block;\n      width: 100%;\n    }\n    .p-none { padding: 0; }\n    .p-2xs { padding: var(--kb-space-2xs); }\n    .p-xs { padding: var(--kb-space-xs); }\n    .p-sm { padding: var(--kb-space-sm); }\n    .p-md { padding: var(--kb-space-md); }\n    .p-lg { padding: var(--kb-space-lg); }\n    .p-xl { padding: var(--kb-space-xl); }\n    .p-2xl { padding: var(--kb-space-2xl); }\n    .px-none { padding-left: 0; padding-right: 0; }\n    .px-2xs { padding-left: var(--kb-space-2xs); padding-right: var(--kb-space-2xs); }\n    .px-xs { padding-left: var(--kb-space-xs); padding-right: var(--kb-space-xs); }\n    .px-sm { padding-left: var(--kb-space-sm); padding-right: var(--kb-space-sm); }\n    .px-md { padding-left: var(--kb-space-md); padding-right: var(--kb-space-md); }\n    .px-lg { padding-left: var(--kb-space-lg); padding-right: var(--kb-space-lg); }\n    .px-xl { padding-left: var(--kb-space-xl); padding-right: var(--kb-space-xl); }\n    .px-2xl { padding-left: var(--kb-space-2xl); padding-right: var(--kb-space-2xl); }\n    .py-none { padding-top: 0; padding-bottom: 0; }\n    .py-2xs { padding-top: var(--kb-space-2xs); padding-bottom: var(--kb-space-2xs); }\n    .py-xs { padding-top: var(--kb-space-xs); padding-bottom: var(--kb-space-xs); }\n    .py-sm { padding-top: var(--kb-space-sm); padding-bottom: var(--kb-space-sm); }\n    .py-md { padding-top: var(--kb-space-md); padding-bottom: var(--kb-space-md); }\n    .py-lg { padding-top: var(--kb-space-lg); padding-bottom: var(--kb-space-lg); }\n    .py-xl { padding-top: var(--kb-space-xl); padding-bottom: var(--kb-space-xl); }\n    .py-2xl { padding-top: var(--kb-space-2xl); padding-bottom: var(--kb-space-2xl); }\n    .r-sm { border-radius: var(--kb-radius-sm); }\n    .r-md { border-radius: var(--kb-radius-md); }\n    .r-lg { border-radius: var(--kb-radius-lg); }\n    .r-full { border-radius: var(--kb-radius-full); }\n    .r-none { border-radius: 0; }\n    .border {\n      border: 1px solid var(--kb-color-border-default);\n    }\n    .surface {\n      background: var(--kb-color-bg-surface);\n    }\n  ");
+sheet.replaceSync("\n\n    :host {\n      display: block;\n      box-sizing: border-box;\n      font-family: var(--kb-font-family-sans);\n      color: var(--kb-color-fg-default);\n    }\n    .root {\n      box-sizing: border-box;\n      display: block;\n      width: 100%;\n    }\n    .p-none { padding: 0; }\n    .p-2xs { padding: var(--kb-space-2xs); }\n    .p-xs { padding: var(--kb-space-xs); }\n    .p-sm { padding: var(--kb-space-sm); }\n    .p-md { padding: var(--kb-space-md); }\n    .p-lg { padding: var(--kb-space-lg); }\n    .p-xl { padding: var(--kb-space-xl); }\n    .p-2xl { padding: var(--kb-space-2xl); }\n    .px-none { padding-left: 0; padding-right: 0; }\n    .px-2xs { padding-left: var(--kb-space-2xs); padding-right: var(--kb-space-2xs); }\n    .px-xs { padding-left: var(--kb-space-xs); padding-right: var(--kb-space-xs); }\n    .px-sm { padding-left: var(--kb-space-sm); padding-right: var(--kb-space-sm); }\n    .px-md { padding-left: var(--kb-space-md); padding-right: var(--kb-space-md); }\n    .px-lg { padding-left: var(--kb-space-lg); padding-right: var(--kb-space-lg); }\n    .px-xl { padding-left: var(--kb-space-xl); padding-right: var(--kb-space-xl); }\n    .px-2xl { padding-left: var(--kb-space-2xl); padding-right: var(--kb-space-2xl); }\n    .py-none { padding-top: 0; padding-bottom: 0; }\n    .py-2xs { padding-top: var(--kb-space-2xs); padding-bottom: var(--kb-space-2xs); }\n    .py-xs { padding-top: var(--kb-space-xs); padding-bottom: var(--kb-space-xs); }\n    .py-sm { padding-top: var(--kb-space-sm); padding-bottom: var(--kb-space-sm); }\n    .py-md { padding-top: var(--kb-space-md); padding-bottom: var(--kb-space-md); }\n    .py-lg { padding-top: var(--kb-space-lg); padding-bottom: var(--kb-space-lg); }\n    .py-xl { padding-top: var(--kb-space-xl); padding-bottom: var(--kb-space-xl); }\n    .py-2xl { padding-top: var(--kb-space-2xl); padding-bottom: var(--kb-space-2xl); }\n    .r-sm { border-radius: var(--kb-radius-sm); }\n    .r-md { border-radius: var(--kb-radius-md); }\n    .r-lg { border-radius: var(--kb-radius-lg); }\n    .r-full { border-radius: var(--kb-radius-full); }\n    .r-none { border-radius: 0; }\n    .border {\n      border: 1px solid var(--kb-color-border-default);\n    }\n    .surface {\n      background: var(--kb-color-bg-surface);\n    }\n  ");
 
 export class KitbashBox extends HTMLElement {