@ktbsh/ui 0.1.0 → 0.3.0

package/dist/vanilla/scroll-top.src.js

@@ -0,0 +1,251 @@
+
+import { render, html } from 'uhtml';
+
+const sheet = new CSSStyleSheet();
+sheet.replaceSync("\n\n    :host {\n      position: fixed;\n      bottom: var(--kb-space-lg);\n      right: var(--kb-space-md);\n      z-index: 40;\n      font-family: var(--kb-font-family-sans);\n      /* Hidden unless visible — keeps focusable only when shown */\n      display: none;\n    }\n    :host([visible]) {\n      display: block;\n    }\n    button {\n      box-sizing: border-box;\n      min-height: 2.25rem;\n      min-width: 2.25rem;\n      padding: var(--kb-space-sm) var(--kb-space-md);\n      border: 1px 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-accent-default);\n      font: inherit;\n      font-size: var(--kb-font-size-sm);\n      font-weight: var(--kb-font-weight-medium);\n      letter-spacing: 0.25em;\n      text-transform: uppercase;\n      cursor: pointer;\n      box-shadow: var(--kb-shadow-sm);\n      transition:\n        color 0.2s ease,\n        background-color 0.2s ease,\n        border-color 0.2s ease;\n    }\n    button:hover {\n      color: var(--kb-color-fg-default);\n      background: var(--kb-color-bg-surface);\n      border-color: var(--kb-color-border-focus);\n    }\n    button:focus-visible {\n      outline: none;\n      box-shadow: var(--kb-focus-ring);\n    }\n    .caption {\n      display: inline-block;\n    }\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      button {\n        transition: none;\n      }\n    }\n  ");
+
+export class KitbashScrollTop extends HTMLElement {
+  
+  static get observedAttributes() {
+    return ["visible","label","caption","behavior"];
+  }
+  
+  static get propTypes() {
+    return {"visible":"Boolean","label":"String","caption":"String","behavior":"String"};
+  }
+
+
+  get visible() {
+    return this._props['visible'];
+  }
+  set visible(val) {
+    // External / framework property writes: re-render, do not emit kitbash-change
+    // (caller already knows the value they set).
+    this._assignProp('visible', val);
+    this.update();
+  }
+
+  get label() {
+    return this._props['label'];
+  }
+  set label(val) {
+    // External / framework property writes: re-render, do not emit kitbash-change
+    // (caller already knows the value they set).
+    this._assignProp('label', val);
+    this.update();
+  }
+
+  get caption() {
+    return this._props['caption'];
+  }
+  set caption(val) {
+    // External / framework property writes: re-render, do not emit kitbash-change
+    // (caller already knows the value they set).
+    this._assignProp('caption', val);
+    this.update();
+  }
+
+  get behavior() {
+    return this._props['behavior'];
+  }
+  set behavior(val) {
+    // External / framework property writes: re-render, do not emit kitbash-change
+    // (caller already knows the value they set).
+    this._assignProp('behavior', val);
+    this.update();
+  }
+
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+    
+    this._defaults = {"visible":false,"label":"Scroll to top","caption":"$ top","behavior":"smooth"};
+    
+    this._state = {};
+    this._props = { ...this._defaults };
+    this._eventHandlers = { 'click button': function(_e, { props }) {
+      if (typeof window > "u")
+        return;
+      const behavior = props.behavior === "auto" || props.behavior === "instant" ? "auto" : "smooth", reduce = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+      window.scrollTo({
+        top: 0,
+        behavior: reduce ? "auto" : behavior
+      });
+    } };
+    this._eventCleanup = [];
+    this._renderFn = function({ props, html }) {
+    const label = typeof props.label === "string" && props.label.length > 0 ? props.label : "Scroll to top", caption = typeof props.caption === "string" && props.caption.length > 0 ? props.caption : "$ top";
+    return html`
+      <button part="scroll-top-root" type="button" aria-label=${label}>
+        <span class="sr-only">${label}</span>
+        <span class="caption" aria-hidden="true">${caption}</span>
+      </button>
+    `;
+  };
+    this._reflecting = false;
+  }
+
+  connectedCallback() {
+    // Initial attribute values are parsed by attributeChangedCallback before connectedCallback fires
+    this.update();
+    
+  }
+
+  disconnectedCallback() {
+    this.cleanupEvents();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Skip when we caused the attribute write ourselves (avoids double update)
+    if (this._reflecting) return;
+    if (oldValue === newValue) return;
+
+    const type = this.constructor.propTypes[name];
+    
+    let parsedValue = newValue;
+    if (newValue === null || newValue === undefined) {
+      parsedValue = this._defaults[name];
+    } else if (type === 'Number' && newValue !== '') {
+      // Match property coercion: empty string is not Number('') → 0
+      parsedValue = Number(newValue);
+    } else if (type === 'Boolean') {
+      parsedValue = newValue !== null && newValue !== 'false';
+    }
+    
+    this._props[name] = parsedValue;
+    
+    this.update();
+  }
+
+  /** Coerce + reflect a single prop; no re-render (caller decides). */
+  _assignProp(key, val) {
+    const type = this.constructor.propTypes[key];
+    let next = val;
+    if (type === 'Boolean') {
+      next = val === true || val === '';
+    } else if (type === 'Number' && val !== null && val !== undefined && val !== '') {
+      next = Number(val);
+    }
+    this._props[key] = next;
+
+    // Only reflect primitives — objects/arrays stay as properties (no [object Object] attrs)
+    const isPrimitive =
+      next === null ||
+      next === undefined ||
+      typeof next === 'string' ||
+      typeof next === 'number' ||
+      typeof next === 'boolean';
+
+    this._reflecting = true;
+    try {
+      if (type === 'Boolean') {
+        if (next) this.setAttribute(key, '');
+        else this.removeAttribute(key);
+      } else if (!isPrimitive) {
+        // property-only; drop stale attribute if any
+        this.removeAttribute(key);
+      } else if (next === null || next === undefined) {
+        this.removeAttribute(key);
+      } else {
+        this.setAttribute(key, String(next));
+      }
+    } finally {
+      this._reflecting = false;
+    }
+    
+  }
+
+  _emitChange() {
+    // Shallow-copy both bags so listeners cannot mutate internal state/props via event.detail
+    this.dispatchEvent(new CustomEvent('kitbash-change', {
+      detail: {
+        state: { ...this._state },
+        props: { ...this._props },
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  /**
+   * Batch props and/or state: one uhtml update, one kitbash-change.
+   * Prefer this in event handlers (e.g. controlled inputs).
+   */
+  commit(patch) {
+    const p = patch || {};
+    if (p.props) {
+      const allowed = this.constructor.propTypes || {};
+      for (const key of Object.keys(p.props)) {
+        // Only declared props — ignore typos / stray keys
+        if (!Object.prototype.hasOwnProperty.call(allowed, key)) continue;
+        this._assignProp(key, p.props[key]);
+      }
+    }
+    if (p.state) {
+      this._state = { ...this._state, ...p.state };
+    }
+    this.update();
+    this._emitChange();
+  }
+
+  setState(newState) {
+    this.commit({ state: newState });
+  }
+
+  setProps(nextProps) {
+    this.commit({ props: nextProps });
+  }
+
+  _handlerCtx() {
+    // Snapshots so handlers/render cannot mutate internal bags by accident
+    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(cleanup => cleanup());
+    this._eventCleanup = [];
+  }
+
+  update() {
+    // Run the uhtml DOM diffing render cycle
+    render(this.shadowRoot, this._renderFn({ 
+      ...this._handlerCtx(),
+      html 
+    }));
+    this.cleanupEvents();
+    this.bindEvents();
+    
+  }
+
+
+
+  bindEvents() {
+    Object.keys(this._eventHandlers).forEach(eventSelector => {
+      const parts = eventSelector.split(' ');
+      const eventName = parts[0];
+      const selector = parts.slice(1).join(' ');
+      
+      const targets = selector ? this.shadowRoot.querySelectorAll(selector) : [this];
+      targets.forEach(target => {
+        const handler = (e) => {
+          this._eventHandlers[eventSelector](e, this._handlerCtx());
+        };
+        target.addEventListener(eventName, handler);
+        this._eventCleanup.push(() => target.removeEventListener(eventName, handler));
+      });
+    });
+  }
+}
+
+if (!customElements.get('kitbash-scroll-top')) {
+  customElements.define('kitbash-scroll-top', KitbashScrollTop);
+}

package/dist/vanilla/select.js

@@ -1,51 +1,4 @@
-var d=(_,U,B,Y,z)=>{let X=B.length,J=U.length,I=X,O=0,$=0,Q=null;while(O<J||$<I)if(J===O){let W=I<X?$?Y(B[$-1],-0).nextSibling:Y(B[I],0):z;while($<I)_.insertBefore(Y(B[$++],1),W)}else if(I===$)while(O<J){if(!Q||!Q.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 W=Y(U[--J],-0).nextSibling;_.insertBefore(Y(B[$++],1),Y(U[O++],-0).nextSibling),_.insertBefore(Y(B[--I],1),W),U[J]=B[I]}else{if(!Q){Q=new Map;let W=$;while(W<I)Q.set(B[W],W++)}if(Q.has(U[O])){let W=Q.get(U[O]);if($<W&&W<I){let Z=O,K=1;while(++Z<J&&Z<I&&Q.get(U[Z])===W+K)K++;if(K>W-$){let D=Y(U[O],0);while($<W)_.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,j=(_,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)=>j(_,U,B),t=!1,V=(_,U)=>t&&_.nodeType===l?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),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"),j1=(_,U,B)=>(_.toggleAttribute(B.slice(1),U),U),R=(_,U,B)=>{let{length:Y}=U;if(_.data=`[${Y}]`,Y)return d(_.parentNode,B,U,V,_);switch(B.length){case 1:B[0].remove();case 0:break;default:j(V(B[0],0),V(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 j1;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:X}=_(U,B),J=document.importNode(Y,!0),I=q;if(z!==q){I=[];for(let O,$,Q=0;Q<z.length;Q++){let{a:W,b:Z,c:K}=z[Q],D=W===$?O:O=o(J,$=W);I[Q]=I1(Z,D,K,Z===R?[]:Z===G?L():null)}}return z1(X?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 V1=/<([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(V1,(z,X,J,I)=>`<${X}${J.replace(C1,"\x02=$2$1").trimEnd()}${I?B||O1.test(X)?" /":`></${X}`:""}>`).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}=_,X=q;if(z>1){let O=[],$=document.createTreeWalker(Y,129),Q=0,W=`${F}${Q++}`;X=[];while(Q<z){let Z=$.nextNode();if(Z.nodeType===r){if(Z.data===W){let K=E(U[Q-1])?R:G;if(K===G)O.push(Z);X.push(H(c(Z),K,null)),W=`${F}${Q++}`}}else{let K;while(Z.hasAttribute(W)){if(!K)K=c(Z);let D=Z.getAttribute(W);X.push(H(K,B1(Z,D,B),D)),P(Z,W),W=`${F}${Q++}`}if(!B&&J1.test(Z.localName)&&Z.textContent.trim()===`<!--${W}-->`)X.push(H(K||c(Z),Y1,null)),W=`${F}${Q++}`}}for(Q=0;Q<O.length;Q++)O[Q].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,X,I===1))},$1=new WeakMap,F="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:X}=(U?x1:w1)(B,Y);_.a=B,_.b=z,_.c=X}for(let{c:z}=_,X=0;X<z.length;X++){let J=Y[X],I=z[X];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 X=B.length,J=U.length,I=X,O=0,$=0,Q=null;while(O<J||$<I)if(J===O){let W=I<X?$?Y(B[$-1],-0).nextSibling:Y(B[I],0):z;while($<I)_.insertBefore(Y(B[$++],1),W)}else if(I===$)while(O<J){if(!Q||!Q.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 W=Y(U[--J],-0).nextSibling;_.insertBefore(Y(B[$++],1),Y(U[O++],-0).nextSibling),_.insertBefore(Y(B[--I],1),W),U[J]=B[I]}else{if(!Q){Q=new Map;let W=$;while(W<I)Q.set(B[W],W++)}if(Q.has(U[O])){let W=Q.get(U[O]);if($<W&&W<I){let Z=O,K=1;while(++Z<J&&Z<I&&Q.get(U[Z])===W+K)K++;if(K>W-$){let D=Y(U[O],0);while($<W)_.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,j=(_,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)=>j(_,U,B),t=!1,V=(_,U)=>t&&_.nodeType===l?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),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"),j1=(_,U,B)=>(_.toggleAttribute(B.slice(1),U),U),R=(_,U,B)=>{let{length:Y}=U;if(_.data=`[${Y}]`,Y)return d(_.parentNode,B,U,V,_);switch(B.length){case 1:B[0].remove();case 0:break;default:j(V(B[0],0),V(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 j1;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:X}=_(U,B),J=document.importNode(Y,!0),I=q;if(z!==q){I=[];for(let O,$,Q=0;Q<z.length;Q++){let{a:W,b:Z,c:K}=z[Q],D=W===$?O:O=o(J,$=W);I[Q]=I1(Z,D,K,Z===R?[]:Z===G?L():null)}}return z1(X?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 V1=/<([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(V1,(z,X,J,I)=>`<${X}${J.replace(C1,"\x02=$2$1").trimEnd()}${I?B||O1.test(X)?" /":`></${X}`:""}>`).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}=_,X=q;if(z>1){let O=[],$=document.createTreeWalker(Y,129),Q=0,W=`${F}${Q++}`;X=[];while(Q<z){let Z=$.nextNode();if(Z.nodeType===r){if(Z.data===W){let K=E(U[Q-1])?R:G;if(K===G)O.push(Z);X.push(H(c(Z),K,null)),W=`${F}${Q++}`}}else{let K;while(Z.hasAttribute(W)){if(!K)K=c(Z);let D=Z.getAttribute(W);X.push(H(K,B1(Z,D,B),D)),P(Z,W),W=`${F}${Q++}`}if(!B&&J1.test(Z.localName)&&Z.textContent.trim()===`<!--${W}-->`)X.push(H(K||c(Z),Y1,null)),W=`${F}${Q++}`}}for(Q=0;Q<O.length;Q++)O[Q].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,X,I===1))},$1=new WeakMap,F="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:X}=(U?x1:w1)(B,Y);_.a=B,_.b=z,_.c=X}for(let{c:z}=_,X=0;X<z.length;X++){let J=Y[X],I=z[X];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: inline-block;
@@ -53,24 +6,58 @@ var d=(_,U,B,Y,z)=>{let X=B.length,J=U.length,I=X,O=0,$=0,Q=null;while(O<J||$<I)
       font-family: var(--kb-font-family-sans);
     }
     select {
+      appearance: none;
+      -webkit-appearance: none;
       box-sizing: border-box;
       width: 100%;
       min-height: 2.25rem;
-      padding: var(--kb-space-sm) var(--kb-space-md);
+      padding: var(--kb-space-sm) 2.5rem var(--kb-space-sm) var(--kb-space-md);
       border: 1px solid var(--kb-color-border-default);
       border-radius: var(--kb-radius-sm);
-      background: var(--kb-color-bg-canvas);
+      background-color: var(--kb-color-bg-canvas);
+      /* Custom chevron (token-colored); listbox chrome is still browser-native */
+      background-image:
+        linear-gradient(
+          45deg,
+          transparent 50%,
+          var(--kb-color-fg-muted) 50%
+        ),
+        linear-gradient(
+          135deg,
+          var(--kb-color-fg-muted) 50%,
+          transparent 50%
+        ),
+        linear-gradient(
+          to right,
+          transparent,
+          transparent
+        );
+      background-position:
+        calc(100% - 1.15rem) calc(50% - 0.1rem),
+        calc(100% - 0.8rem) calc(50% - 0.1rem),
+        100% 0;
+      background-size:
+        0.35rem 0.35rem,
+        0.35rem 0.35rem,
+        2.25rem 100%;
+      background-repeat: no-repeat;
       color: var(--kb-color-fg-default);
       font-size: var(--kb-font-size-md);
       font-family: inherit;
       line-height: var(--kb-line-height-normal);
       cursor: pointer;
       outline: none;
+      transition:
+        border-color 0.12s ease,
+        box-shadow 0.12s ease;
+    }
+    select:hover:not(:disabled) {
+      border-color: var(--kb-color-border-focus);
     }
     :host([size="sm"]) select {
       min-height: 2rem;
       font-size: var(--kb-font-size-sm);
-      padding: var(--kb-space-xs) var(--kb-space-sm);
+      padding: var(--kb-space-xs) 2.25rem var(--kb-space-xs) var(--kb-space-sm);
     }
     :host([size="lg"]) select {
       min-height: 2.75rem;
@@ -87,6 +74,11 @@ var d=(_,U,B,Y,z)=>{let X=B.length,J=U.length,I=X,O=0,$=0,Q=null;while(O<J||$<I)
     select[aria-invalid="true"] {
       border-color: var(--kb-color-danger-default);
     }
+    option,
+    optgroup {
+      background: var(--kb-color-bg-canvas);
+      color: var(--kb-color-fg-default);
+    }
     /* Light-DOM options are cloned into <select>; keep the source slot out of layout */
     slot {
       display: none;

package/dist/vanilla/select.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-block;\n      width: 100%;\n      font-family: var(--kb-font-family-sans);\n    }\n    select {\n      box-sizing: border-box;\n      width: 100%;\n      min-height: 2.25rem;\n      padding: var(--kb-space-sm) var(--kb-space-md);\n      border: 1px 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-default);\n      font-size: var(--kb-font-size-md);\n      font-family: inherit;\n      line-height: var(--kb-line-height-normal);\n      cursor: pointer;\n      outline: none;\n    }\n    :host([size=\"sm\"]) select {\n      min-height: 2rem;\n      font-size: var(--kb-font-size-sm);\n      padding: var(--kb-space-xs) var(--kb-space-sm);\n    }\n    :host([size=\"lg\"]) select {\n      min-height: 2.75rem;\n      font-size: var(--kb-font-size-lg);\n    }\n    select:focus {\n      border-color: var(--kb-color-border-focus);\n      box-shadow: var(--kb-focus-ring);\n    }\n    select:disabled {\n      opacity: 0.55;\n      cursor: not-allowed;\n    }\n    select[aria-invalid=\"true\"] {\n      border-color: var(--kb-color-danger-default);\n    }\n    /* Light-DOM options are cloned into <select>; keep the source slot out of layout */\n    slot {\n      display: none;\n    }\n  ");
+sheet.replaceSync("\n\n    :host {\n      display: inline-block;\n      width: 100%;\n      font-family: var(--kb-font-family-sans);\n    }\n    select {\n      appearance: none;\n      -webkit-appearance: none;\n      box-sizing: border-box;\n      width: 100%;\n      min-height: 2.25rem;\n      padding: var(--kb-space-sm) 2.5rem var(--kb-space-sm) var(--kb-space-md);\n      border: 1px solid var(--kb-color-border-default);\n      border-radius: var(--kb-radius-sm);\n      background-color: var(--kb-color-bg-canvas);\n      /* Custom chevron (token-colored); listbox chrome is still browser-native */\n      background-image:\n        linear-gradient(\n          45deg,\n          transparent 50%,\n          var(--kb-color-fg-muted) 50%\n        ),\n        linear-gradient(\n          135deg,\n          var(--kb-color-fg-muted) 50%,\n          transparent 50%\n        ),\n        linear-gradient(\n          to right,\n          transparent,\n          transparent\n        );\n      background-position:\n        calc(100% - 1.15rem) calc(50% - 0.1rem),\n        calc(100% - 0.8rem) calc(50% - 0.1rem),\n        100% 0;\n      background-size:\n        0.35rem 0.35rem,\n        0.35rem 0.35rem,\n        2.25rem 100%;\n      background-repeat: no-repeat;\n      color: var(--kb-color-fg-default);\n      font-size: var(--kb-font-size-md);\n      font-family: inherit;\n      line-height: var(--kb-line-height-normal);\n      cursor: pointer;\n      outline: none;\n      transition:\n        border-color 0.12s ease,\n        box-shadow 0.12s ease;\n    }\n    select:hover:not(:disabled) {\n      border-color: var(--kb-color-border-focus);\n    }\n    :host([size=\"sm\"]) select {\n      min-height: 2rem;\n      font-size: var(--kb-font-size-sm);\n      padding: var(--kb-space-xs) 2.25rem var(--kb-space-xs) var(--kb-space-sm);\n    }\n    :host([size=\"lg\"]) select {\n      min-height: 2.75rem;\n      font-size: var(--kb-font-size-lg);\n    }\n    select:focus {\n      border-color: var(--kb-color-border-focus);\n      box-shadow: var(--kb-focus-ring);\n    }\n    select:disabled {\n      opacity: 0.55;\n      cursor: not-allowed;\n    }\n    select[aria-invalid=\"true\"] {\n      border-color: var(--kb-color-danger-default);\n    }\n    option,\n    optgroup {\n      background: var(--kb-color-bg-canvas);\n      color: var(--kb-color-fg-default);\n    }\n    /* Light-DOM options are cloned into <select>; keep the source slot out of layout */\n    slot {\n      display: none;\n    }\n  ");
 
 export class KitbashSelect extends HTMLElement {
   static formAssociated = true;

package/dist/vanilla/skeleton.js

@@ -1,51 +1,4 @@
-var d=(_,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 D=Y(U[Q],0);while($<W)_.insertBefore(Y(B[$++],1),D)}else _.replaceChild(Y(B[$++],1),Y(U[Q++],-1))}else Q++}else _.removeChild(Y(U[Q++],-1))}return B};var{isArray:E}=Array,{getPrototypeOf:R1,getOwnPropertyDescriptor:D1}=Object;var m="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),M=(_,U,B)=>{return _.set(U,B),B},i=(_,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),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(_)||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},A1=(_,U)=>f(_,U,U==null?"class":"className"),P1=(_,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),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",A1],["data",P1],["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:i(_,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],D=W===$?Q:Q=o(J,$=W);I[X]=I1(Z,D,K,Z===R?[]:Z===G?L():null)}}return z1(O?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,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(m,"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(_,A,B),B),{length:z}=_,O=q;if(z>1){let Q=[],$=document.createTreeWalker(Y,129),X=0,W=`${A}${X++}`;O=[];while(X<z){let Z=$.nextNode();if(Z.nodeType===r){if(Z.data===W){let K=E(U[X-1])?R:G;if(K===G)Q.push(Z);O.push(H(c(Z),K,null)),W=`${A}${X++}`}}else{let K;while(Z.hasAttribute(W)){if(!K)K=c(Z);let D=Z.getAttribute(W);O.push(H(K,B1(Z,D,B),D)),F(Z,W),W=`${A}${X++}`}if(!B&&J1.test(Z.localName)&&Z.textContent.trim()===`<!--${W}-->`)O.push(H(K||c(Z),Y1,null)),W=`${A}${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 M($1,_,H(Y,O,I===1))},$1=new WeakMap,A="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:O}=(U?w1:x1)(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 R:I.v=R(I.t,y1(I.c,J),I.v);break;case G:let Q=J instanceof P?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 P)U[B]=p(_[B]||(_[B]=L()),z);else _[B]=null}return U};class P{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 P(_,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 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 D=Y(U[Q],0);while($<W)_.insertBefore(Y(B[$++],1),D)}else _.replaceChild(Y(B[$++],1),Y(U[Q++],-1))}else Q++}else _.removeChild(Y(U[Q++],-1))}return B};var{isArray:E}=Array,{getPrototypeOf:R1,getOwnPropertyDescriptor:D1}=Object;var m="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),M=(_,U,B)=>{return _.set(U,B),B},i=(_,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),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(_)||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},A1=(_,U)=>f(_,U,U==null?"class":"className"),P1=(_,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),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",A1],["data",P1],["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:i(_,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],D=W===$?Q:Q=o(J,$=W);I[X]=I1(Z,D,K,Z===R?[]:Z===G?L():null)}}return z1(O?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,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(m,"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(_,A,B),B),{length:z}=_,O=q;if(z>1){let Q=[],$=document.createTreeWalker(Y,129),X=0,W=`${A}${X++}`;O=[];while(X<z){let Z=$.nextNode();if(Z.nodeType===r){if(Z.data===W){let K=E(U[X-1])?R:G;if(K===G)Q.push(Z);O.push(H(c(Z),K,null)),W=`${A}${X++}`}}else{let K;while(Z.hasAttribute(W)){if(!K)K=c(Z);let D=Z.getAttribute(W);O.push(H(K,B1(Z,D,B),D)),F(Z,W),W=`${A}${X++}`}if(!B&&J1.test(Z.localName)&&Z.textContent.trim()===`<!--${W}-->`)O.push(H(K||c(Z),Y1,null)),W=`${A}${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 M($1,_,H(Y,O,I===1))},$1=new WeakMap,A="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:O}=(U?w1:x1)(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 R:I.v=R(I.t,y1(I.c,J),I.v);break;case G:let Q=J instanceof P?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 P)U[B]=p(_[B]||(_[B]=L()),z);else _[B]=null}return U};class P{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 P(_,U,B),q1=K1(!1),C_=K1(!0);var G1=new CSSStyleSheet;G1.replaceSync(`
 
     :host {
       display: block;
@@ -53,14 +6,18 @@ var d=(_,U,B,Y,z)=>{let O=B.length,J=U.length,I=O,Q=0,$=0,X=null;while(Q<J||$<I)
     .root {
       display: block;
       box-sizing: border-box;
+      /* Use accent-subtle + border for contrast in dark / terminal (surface≈subtle fails) */
       background: linear-gradient(
         90deg,
         var(--kb-color-bg-subtle) 0%,
-        var(--kb-color-bg-surface) 50%,
+        var(--kb-color-accent-subtle) 40%,
+        var(--kb-color-border-muted) 50%,
+        var(--kb-color-accent-subtle) 60%,
         var(--kb-color-bg-subtle) 100%
       );
-      background-size: 200% 100%;
-      animation: kitbash-skeleton 1.2s ease-in-out infinite;
+      background-size: 220% 100%;
+      border: 1px solid var(--kb-color-border-muted);
+      animation: kitbash-skeleton 1.35s ease-in-out infinite;
     }
     .text {
       height: 0.875em;
@@ -87,6 +44,7 @@ var d=(_,U,B,Y,z)=>{let O=B.length,J=U.length,I=O,Q=0,$=0,X=null;while(Q<J||$<I)
       .root {
         animation: none;
         background: var(--kb-color-bg-subtle);
+        border-color: var(--kb-color-border-default);
       }
     }
   `);class L1 extends HTMLElement{static get observedAttributes(){return["variant","width","height"]}static get propTypes(){return{variant:"String",width:"String",height:"String"}}get variant(){return this._props.variant}set variant(_){this._assignProp("variant",_),this.update()}get width(){return this._props.width}set width(_){this._assignProp("width",_),this.update()}get height(){return this._props.height}set height(_){this._assignProp("height",_),this.update()}constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!1}),this.shadowRoot.adoptedStyleSheets=[G1],this._defaults={variant:"text",width:"100%",height:""},this._state={},this._props={...this._defaults},this._eventHandlers={},this._eventCleanup=[],this._renderFn=function({props:_,html:U}){let B=_.variant==="rect"||_.variant==="circle"?_.variant:"text",Y=typeof _.width==="string"&&_.width.length>0?_.width:B==="circle"?"":"100%",z=typeof _.height==="string"&&_.height.length>0?_.height:"",O=[];if(Y)O.push(`width: ${Y}`);if(z)O.push(`height: ${z}`);let J=O.length>0?O.join("; "):null;return U`

package/dist/vanilla/skeleton.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    }\n    .root {\n      display: block;\n      box-sizing: border-box;\n      background: linear-gradient(\n        90deg,\n        var(--kb-color-bg-subtle) 0%,\n        var(--kb-color-bg-surface) 50%,\n        var(--kb-color-bg-subtle) 100%\n      );\n      background-size: 200% 100%;\n      animation: kitbash-skeleton 1.2s ease-in-out infinite;\n    }\n    .text {\n      height: 0.875em;\n      border-radius: var(--kb-radius-sm);\n    }\n    .rect {\n      height: 6rem;\n      border-radius: var(--kb-radius-md);\n    }\n    .circle {\n      width: 2.5rem;\n      height: 2.5rem;\n      border-radius: var(--kb-radius-full);\n    }\n    @keyframes kitbash-skeleton {\n      0% {\n        background-position: 100% 0;\n      }\n      100% {\n        background-position: -100% 0;\n      }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .root {\n        animation: none;\n        background: var(--kb-color-bg-subtle);\n      }\n    }\n  ");
+sheet.replaceSync("\n\n    :host {\n      display: block;\n    }\n    .root {\n      display: block;\n      box-sizing: border-box;\n      /* Use accent-subtle + border for contrast in dark / terminal (surface≈subtle fails) */\n      background: linear-gradient(\n        90deg,\n        var(--kb-color-bg-subtle) 0%,\n        var(--kb-color-accent-subtle) 40%,\n        var(--kb-color-border-muted) 50%,\n        var(--kb-color-accent-subtle) 60%,\n        var(--kb-color-bg-subtle) 100%\n      );\n      background-size: 220% 100%;\n      border: 1px solid var(--kb-color-border-muted);\n      animation: kitbash-skeleton 1.35s ease-in-out infinite;\n    }\n    .text {\n      height: 0.875em;\n      border-radius: var(--kb-radius-sm);\n    }\n    .rect {\n      height: 6rem;\n      border-radius: var(--kb-radius-md);\n    }\n    .circle {\n      width: 2.5rem;\n      height: 2.5rem;\n      border-radius: var(--kb-radius-full);\n    }\n    @keyframes kitbash-skeleton {\n      0% {\n        background-position: 100% 0;\n      }\n      100% {\n        background-position: -100% 0;\n      }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .root {\n        animation: none;\n        background: var(--kb-color-bg-subtle);\n        border-color: var(--kb-color-border-default);\n      }\n    }\n  ");
 
 export class KitbashSkeleton extends HTMLElement {
   

package/dist/vanilla/spinner.js

@@ -1,51 +1,4 @@
-var d=(_,U,B,Y,J)=>{let X=B.length,O=U.length,I=X,Q=0,z=0,$=null;while(Q<O||z<I)if(O===Q){let W=I<X?z?Y(B[z-1],-0).nextSibling:Y(B[I],0):J;while(z<I)_.insertBefore(Y(B[z++],1),W)}else if(I===z)while(Q<O){if(!$||!$.has(U[Q]))_.removeChild(Y(U[Q],-1));Q++}else if(U[Q]===B[z])Q++,z++;else if(U[O-1]===B[I-1])O--,I--;else if(U[Q]===B[I-1]&&B[z]===U[O-1]){let W=Y(U[--O],-0).nextSibling;_.insertBefore(Y(B[z++],1),Y(U[Q++],-0).nextSibling),_.insertBefore(Y(B[--I],1),W),U[O]=B[I]}else{if(!$){$=new Map;let W=z;while(W<I)$.set(B[W],W++)}if($.has(U[Q])){let W=$.get(U[Q]);if(z<W&&W<I){let Z=Q,K=1;while(++Z<O&&Z<I&&$.get(U[Z])===W+K)K++;if(K>W-z){let D=Y(U[Q],0);while(z<W)_.insertBefore(Y(B[z++],1),D)}else _.replaceChild(Y(B[z++],1),Y(U[Q++],-1))}else Q++}else _.removeChild(Y(U[Q++],-1))}return B};var{isArray:E}=Array,{getPrototypeOf:R1,getOwnPropertyDescriptor:D1}=Object;var m="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),M=(_,U,B)=>{return _.set(U,B),B},i=(_,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],J=B==="role"?B:`aria-${B}`;if(Y==null)P(_,J);else e(_,J,Y)}return U},C,P1=(_,U,B)=>{if(B=B.slice(1),!C)C=new WeakMap;let Y=C.get(_)||M(C,_,{}),J=Y[B];if(J&&J[0])_.removeEventListener(B,...J);if(J=E(U)?U:[U,!1],Y[B]=J,J[0])_.addEventListener(B,...J);return U};var G=(_,U)=>{let{t:B,n:Y}=_,J=!1;switch(typeof U){case"object":if(U!==null){(Y||B).replaceWith(_.n=U.valueOf());break}case"undefined":J=!0;default:if(B.data=J?"":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:i(_,U)?.set?f:y:y)}},Y1=(_,U)=>(_.textContent=U==null?"":U,U);var H=(_,U,B)=>({a:_,b:U,c:B}),I1=(_,U)=>({b:_,c:U}),J1=(_,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:J,c:X}=_(U,B),O=document.importNode(Y,!0),I=q;if(J!==q){I=[];for(let Q,z,$=0;$<J.length;$++){let{a:W,b:Z,c:K}=J[$],D=W===z?Q:Q=o(O,z=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,B)=>{let Y=0;return _.join("\x01").trim().replace(j1,(J,X,O,I)=>`<${X}${O.replace(C1,"\x02=$2$1").trimEnd()}${I?B||Q1.test(X)?" /":`></${X}`:""}>`).replace(k1,(J)=>J==="\x01"?`<!--${U+Y++}-->`:U+Y++)};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: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},$1=()=>document.createTextNode(""),S1=(_,U,B)=>{let Y=X1(W1(_,F,B),B),{length:J}=_,X=q;if(J>1){let Q=[],z=document.createTreeWalker(Y,129),$=0,W=`${F}${$++}`;X=[];while($<J){let Z=z.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,B1(Z,D,B),D)),P(Z,W),W=`${F}${$++}`}if(!B&&O1.test(Z.localName)&&Z.textContent.trim()===`<!--${W}-->`)X.push(H(K||c(Z),Y1,null)),W=`${F}${$++}`}}for($=0;$<Q.length;$++)Q[$].replaceWith($1())}let{childNodes:O}=Y,{length:I}=O;if(I<1)I=1,Y.appendChild($1());else if(I===1&&J!==1&&O[0].nodeType!==s)I=0;return M(z1,_,H(Y,X,I===1))},z1=new WeakMap,F="isµ",v=(_)=>(U,B)=>z1.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:J,c:X}=(U?w1:x1)(B,Y);_.a=B,_.b=J,_.c=X}for(let{c:J}=_,X=0;X<J.length;X++){let O=Y[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 B=0,{length:Y}=U;if(Y<_.length)_.splice(Y);for(;B<Y;B++){let J=U[B];if(J instanceof A)U[B]=p(_[B]||(_[B]=L()),J);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,J)=>{let X=B.length,O=U.length,I=X,Q=0,z=0,$=null;while(Q<O||z<I)if(O===Q){let W=I<X?z?Y(B[z-1],-0).nextSibling:Y(B[I],0):J;while(z<I)_.insertBefore(Y(B[z++],1),W)}else if(I===z)while(Q<O){if(!$||!$.has(U[Q]))_.removeChild(Y(U[Q],-1));Q++}else if(U[Q]===B[z])Q++,z++;else if(U[O-1]===B[I-1])O--,I--;else if(U[Q]===B[I-1]&&B[z]===U[O-1]){let W=Y(U[--O],-0).nextSibling;_.insertBefore(Y(B[z++],1),Y(U[Q++],-0).nextSibling),_.insertBefore(Y(B[--I],1),W),U[O]=B[I]}else{if(!$){$=new Map;let W=z;while(W<I)$.set(B[W],W++)}if($.has(U[Q])){let W=$.get(U[Q]);if(z<W&&W<I){let Z=Q,K=1;while(++Z<O&&Z<I&&$.get(U[Z])===W+K)K++;if(K>W-z){let D=Y(U[Q],0);while(z<W)_.insertBefore(Y(B[z++],1),D)}else _.replaceChild(Y(B[z++],1),Y(U[Q++],-1))}else Q++}else _.removeChild(Y(U[Q++],-1))}return B};var{isArray:E}=Array,{getPrototypeOf:R1,getOwnPropertyDescriptor:D1}=Object;var m="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),M=(_,U,B)=>{return _.set(U,B),B},i=(_,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],J=B==="role"?B:`aria-${B}`;if(Y==null)P(_,J);else e(_,J,Y)}return U},C,P1=(_,U,B)=>{if(B=B.slice(1),!C)C=new WeakMap;let Y=C.get(_)||M(C,_,{}),J=Y[B];if(J&&J[0])_.removeEventListener(B,...J);if(J=E(U)?U:[U,!1],Y[B]=J,J[0])_.addEventListener(B,...J);return U};var G=(_,U)=>{let{t:B,n:Y}=_,J=!1;switch(typeof U){case"object":if(U!==null){(Y||B).replaceWith(_.n=U.valueOf());break}case"undefined":J=!0;default:if(B.data=J?"":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:i(_,U)?.set?f:y:y)}},Y1=(_,U)=>(_.textContent=U==null?"":U,U);var H=(_,U,B)=>({a:_,b:U,c:B}),I1=(_,U)=>({b:_,c:U}),J1=(_,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:J,c:X}=_(U,B),O=document.importNode(Y,!0),I=q;if(J!==q){I=[];for(let Q,z,$=0;$<J.length;$++){let{a:W,b:Z,c:K}=J[$],D=W===z?Q:Q=o(O,z=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,B)=>{let Y=0;return _.join("\x01").trim().replace(j1,(J,X,O,I)=>`<${X}${O.replace(C1,"\x02=$2$1").trimEnd()}${I?B||Q1.test(X)?" /":`></${X}`:""}>`).replace(k1,(J)=>J==="\x01"?`<!--${U+Y++}-->`:U+Y++)};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: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},$1=()=>document.createTextNode(""),S1=(_,U,B)=>{let Y=X1(W1(_,F,B),B),{length:J}=_,X=q;if(J>1){let Q=[],z=document.createTreeWalker(Y,129),$=0,W=`${F}${$++}`;X=[];while($<J){let Z=z.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,B1(Z,D,B),D)),P(Z,W),W=`${F}${$++}`}if(!B&&O1.test(Z.localName)&&Z.textContent.trim()===`<!--${W}-->`)X.push(H(K||c(Z),Y1,null)),W=`${F}${$++}`}}for($=0;$<Q.length;$++)Q[$].replaceWith($1())}let{childNodes:O}=Y,{length:I}=O;if(I<1)I=1,Y.appendChild($1());else if(I===1&&J!==1&&O[0].nodeType!==s)I=0;return M(z1,_,H(Y,X,I===1))},z1=new WeakMap,F="isµ",v=(_)=>(U,B)=>z1.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:J,c:X}=(U?w1:x1)(B,Y);_.a=B,_.b=J,_.c=X}for(let{c:J}=_,X=0;X<J.length;X++){let O=Y[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 B=0,{length:Y}=U;if(Y<_.length)_.splice(Y);for(;B<Y;B++){let J=U[B];if(J instanceof A)U[B]=p(_[B]||(_[B]=L()),J);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: inline-flex;