@ktbsh/ui 0.1.0

package/dist/vanilla/stack.js

@@ -0,0 +1,83 @@
+var p=(_,U,B,Y,I)=>{let Q=B.length,J=U.length,z=Q,O=0,$=0,X=null;while(O<J||$<z)if(J===O){let W=z<Q?$?Y(B[$-1],-0).nextSibling:Y(B[z],0):I;while($<z)_.insertBefore(Y(B[$++],1),W)}else if(z===$)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[z-1])J--,z--;else if(U[O]===B[z-1]&&B[$]===U[J-1]){let W=Y(U[--J],-0).nextSibling;_.insertBefore(Y(B[$++],1),Y(U[O++],-0).nextSibling),_.insertBefore(Y(B[--z],1),W),U[J]=B[z]}else{if(!X){X=new Map;let W=$;while(W<z)X.set(B[W],W++)}if(X.has(U[O])){let W=X.get(U[O]);if($<W&&W<z){let Z=O,K=1;while(++Z<J&&Z<z&&X.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 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],I=B==="role"?B:`aria-${B}`;if(Y==null)P(_,I);else e(_,I,Y)}return U},C,P1=(_,U,B)=>{if(B=B.slice(1),!C)C=new WeakMap;let Y=C.get(_)||M(C,_,{}),I=Y[B];if(I&&I[0])_.removeEventListener(B,...I);if(I=E(U)?U:[U,!1],Y[B]=I,I[0])_.addEventListener(B,...I);return U};var G=(_,U)=>{let{t:B,n:Y}=_,I=!1;switch(typeof U){case"object":if(U!==null){(Y||B).replaceWith(_.n=U.valueOf());break}case"undefined":I=!0;default:if(B.data=I?"":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 p(_.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}),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:I,c:Q}=_(U,B),J=document.importNode(Y,!0),z=q;if(I!==q){z=[];for(let O,$,X=0;X<I.length;X++){let{a:W,b:Z,c:K}=I[X],D=W===$?O:O=o(J,$=W);z[X]=I1(Z,D,K,Z===R?[]:Z===G?L():null)}}return z1(Q?J.firstChild:new w(J),z)};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,(I,Q,J,z)=>`<${Q}${J.replace(C1,"\x02=$2$1").trimEnd()}${z?B||O1.test(Q)?" /":`></${Q}`:""}>`).replace(k1,(I)=>I==="\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(_,F,B),B),{length:I}=_,Q=q;if(I>1){let O=[],$=document.createTreeWalker(Y,129),X=0,W=`${F}${X++}`;Q=[];while(X<I){let Z=$.nextNode();if(Z.nodeType===r){if(Z.data===W){let K=E(U[X-1])?R:G;if(K===G)O.push(Z);Q.push(H(c(Z),K,null)),W=`${F}${X++}`}}else{let K;while(Z.hasAttribute(W)){if(!K)K=c(Z);let D=Z.getAttribute(W);Q.push(H(K,B1(Z,D,B),D)),P(Z,W),W=`${F}${X++}`}if(!B&&J1.test(Z.localName)&&Z.textContent.trim()===`<!--${W}-->`)Q.push(H(K||c(Z),Y1,null)),W=`${F}${X++}`}}for(X=0;X<O.length;X++)O[X].replaceWith(X1())}let{childNodes:J}=Y,{length:z}=J;if(z<1)z=1,Y.appendChild(X1());else if(z===1&&I!==1&&J[0].nodeType!==s)z=0;return M($1,_,H(Y,Q,z===1))},$1=new WeakMap,F="isµ",v=(_)=>(U,B)=>$1.get(U)||S1(U,B,_);var x1=b(v(!1)),w1=b(v(!0)),u=(_,{s:U,t:B,v:Y})=>{if(_.a!==B){let{b:I,c:Q}=(U?w1:x1)(B,Y);_.a=B,_.b=I,_.c=Q}for(let{c:I}=_,Q=0;Q<I.length;Q++){let J=Y[Q],z=I[Q];switch(z.u){case R:z.v=R(z.t,y1(z.c,J),z.v);break;case G:let O=J instanceof A?u(z.c||(z.c=L()),J):(z.c=null,J);if(O!==z.v)z.v=G(z,O);break;default:if(J!==z.v)z.v=z.u(z.t,J,z.n,z.v);break}}return _.b},y1=(_,U)=>{let B=0,{length:Y}=U;if(Y<_.length)_.splice(Y);for(;B<Y;B++){let I=U[B];if(I instanceof A)U[B]=u(_[B]||(_[B]=L()),I);else _[B]=null}return U};class A{constructor(_,U,B){this.s=_,this.t=U,this.v=B}toDOM(_=L()){return u(_,this)}}var Z1=new WeakMap,d=(_,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);
+}
+
+
+    :host {
+      display: block;
+      font-family: var(--kb-font-family-sans);
+    }
+    .root {
+      display: flex;
+      box-sizing: border-box;
+      width: 100%;
+    }
+    .dir-column { flex-direction: column; }
+    .dir-row { flex-direction: row; }
+    .gap-none { gap: 0; }
+    .gap-2xs { gap: var(--kb-space-2xs); }
+    .gap-xs { gap: var(--kb-space-xs); }
+    .gap-sm { gap: var(--kb-space-sm); }
+    .gap-md { gap: var(--kb-space-md); }
+    .gap-lg { gap: var(--kb-space-lg); }
+    .gap-xl { gap: var(--kb-space-xl); }
+    .gap-2xl { gap: var(--kb-space-2xl); }
+    .align-start { align-items: flex-start; }
+    .align-center { align-items: center; }
+    .align-end { align-items: flex-end; }
+    .align-stretch { align-items: stretch; }
+    .justify-start { justify-content: flex-start; }
+    .justify-center { justify-content: center; }
+    .justify-end { justify-content: flex-end; }
+    .justify-between { justify-content: space-between; }
+    .justify-around { justify-content: space-around; }
+    .wrap { flex-wrap: wrap; }
+  `);class L1 extends HTMLElement{static get observedAttributes(){return["direction","gap","align","justify","wrap"]}static get propTypes(){return{direction:"String",gap:"String",align:"String",justify:"String",wrap:"Boolean"}}get direction(){return this._props.direction}set direction(_){this._assignProp("direction",_),this.update()}get gap(){return this._props.gap}set gap(_){this._assignProp("gap",_),this.update()}get align(){return this._props.align}set align(_){this._assignProp("align",_),this.update()}get justify(){return this._props.justify}set justify(_){this._assignProp("justify",_),this.update()}get wrap(){return this._props.wrap}set wrap(_){this._assignProp("wrap",_),this.update()}constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!1}),this.shadowRoot.adoptedStyleSheets=[G1],this._defaults={direction:"column",gap:"md",align:"stretch",justify:"start",wrap:!1},this._state={},this._props={...this._defaults},this._eventHandlers={},this._eventCleanup=[],this._renderFn=function({props:_,html:U}){let B=["none","2xs","xs","sm","md","lg","xl","2xl"],Y=_.direction==="row"?"row":"column",I=typeof _.gap==="string"&&B.includes(_.gap)?_.gap:"md",Q=_.align==="start"||_.align==="center"||_.align==="end"?_.align:"stretch",J=_.justify==="center"||_.justify==="end"||_.justify==="between"||_.justify==="around"?_.justify:"start",z=["root",`dir-${Y}`,`gap-${I}`,`align-${Q}`,`justify-${J}`,_.wrap?"wrap":""].filter(Boolean).join(" ");return U`
+      <div part="stack-root" class=${z}>
+        <slot></slot>
+      </div>
+    `},this._reflecting=!1}connectedCallback(){this.update()}disconnectedCallback(){this.cleanupEvents()}attributeChangedCallback(_,U,B){if(this._reflecting)return;if(U===B)return;let Y=this.constructor.propTypes[_],I=B;if(B===null||B===void 0)I=this._defaults[_];else if(Y==="Number"&&B!=="")I=Number(B);else if(Y==="Boolean")I=B!==null&&B!=="false";this._props[_]=I,this.update()}_assignProp(_,U){let B=this.constructor.propTypes[_],Y=U;if(B==="Boolean")Y=U===!0||U==="";else if(B==="Number"&&U!==null&&U!==void 0&&U!=="")Y=Number(U);this._props[_]=Y;let I=Y===null||Y===void 0||typeof Y==="string"||typeof Y==="number"||typeof Y==="boolean";this._reflecting=!0;try{if(B==="Boolean")if(Y)this.setAttribute(_,"");else this.removeAttribute(_);else if(!I)this.removeAttribute(_);else if(Y===null||Y===void 0)this.removeAttribute(_);else this.setAttribute(_,String(Y))}finally{this._reflecting=!1}}_emitChange(){this.dispatchEvent(new CustomEvent("kitbash-change",{detail:{state:{...this._state},props:{...this._props}},bubbles:!0,composed:!0}))}commit(_){let U=_||{};if(U.props){let B=this.constructor.propTypes||{};for(let Y of Object.keys(U.props)){if(!Object.prototype.hasOwnProperty.call(B,Y))continue;this._assignProp(Y,U.props[Y])}}if(U.state)this._state={...this._state,...U.state};this.update(),this._emitChange()}setState(_){this.commit({state:_})}setProps(_){this.commit({props:_})}_handlerCtx(){return{props:{...this._props},state:{...this._state},setState:this.setState.bind(this),setProps:this.setProps.bind(this),commit:this.commit.bind(this)}}cleanupEvents(){this._eventCleanup.forEach((_)=>_()),this._eventCleanup=[]}update(){d(this.shadowRoot,this._renderFn({...this._handlerCtx(),html:q1})),this.cleanupEvents(),this.bindEvents()}bindEvents(){Object.keys(this._eventHandlers).forEach((_)=>{let U=_.split(" "),B=U[0],Y=U.slice(1).join(" ");(Y?this.shadowRoot.querySelectorAll(Y):[this]).forEach((Q)=>{let J=(z)=>{this._eventHandlers[_](z,this._handlerCtx())};Q.addEventListener(B,J),this._eventCleanup.push(()=>Q.removeEventListener(B,J))})})}}if(!customElements.get("kitbash-stack"))customElements.define("kitbash-stack",L1);export{L1 as KitbashStack};

package/dist/vanilla/stack.src.js

@@ -0,0 +1,259 @@
+
+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    .root {\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n    }\n    .dir-column { flex-direction: column; }\n    .dir-row { flex-direction: row; }\n    .gap-none { gap: 0; }\n    .gap-2xs { gap: var(--kb-space-2xs); }\n    .gap-xs { gap: var(--kb-space-xs); }\n    .gap-sm { gap: var(--kb-space-sm); }\n    .gap-md { gap: var(--kb-space-md); }\n    .gap-lg { gap: var(--kb-space-lg); }\n    .gap-xl { gap: var(--kb-space-xl); }\n    .gap-2xl { gap: var(--kb-space-2xl); }\n    .align-start { align-items: flex-start; }\n    .align-center { align-items: center; }\n    .align-end { align-items: flex-end; }\n    .align-stretch { align-items: stretch; }\n    .justify-start { justify-content: flex-start; }\n    .justify-center { justify-content: center; }\n    .justify-end { justify-content: flex-end; }\n    .justify-between { justify-content: space-between; }\n    .justify-around { justify-content: space-around; }\n    .wrap { flex-wrap: wrap; }\n  ");
+
+export class KitbashStack extends HTMLElement {
+  
+  static get observedAttributes() {
+    return ["direction","gap","align","justify","wrap"];
+  }
+  
+  static get propTypes() {
+    return {"direction":"String","gap":"String","align":"String","justify":"String","wrap":"Boolean"};
+  }
+
+
+  get direction() {
+    return this._props['direction'];
+  }
+  set direction(val) {
+    // External / framework property writes: re-render, do not emit kitbash-change
+    // (caller already knows the value they set).
+    this._assignProp('direction', val);
+    this.update();
+  }
+
+  get gap() {
+    return this._props['gap'];
+  }
+  set gap(val) {
+    // External / framework property writes: re-render, do not emit kitbash-change
+    // (caller already knows the value they set).
+    this._assignProp('gap', val);
+    this.update();
+  }
+
+  get align() {
+    return this._props['align'];
+  }
+  set align(val) {
+    // External / framework property writes: re-render, do not emit kitbash-change
+    // (caller already knows the value they set).
+    this._assignProp('align', val);
+    this.update();
+  }
+
+  get justify() {
+    return this._props['justify'];
+  }
+  set justify(val) {
+    // External / framework property writes: re-render, do not emit kitbash-change
+    // (caller already knows the value they set).
+    this._assignProp('justify', val);
+    this.update();
+  }
+
+  get wrap() {
+    return this._props['wrap'];
+  }
+  set wrap(val) {
+    // External / framework property writes: re-render, do not emit kitbash-change
+    // (caller already knows the value they set).
+    this._assignProp('wrap', val);
+    this.update();
+  }
+
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: false });
+    
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+    
+    this._defaults = {"direction":"column","gap":"md","align":"stretch","justify":"start","wrap":false};
+    
+    this._state = {};
+    this._props = { ...this._defaults };
+    this._eventHandlers = {};
+    this._eventCleanup = [];
+    this._renderFn = function({ props, html }) {
+    const spaces = ["none", "2xs", "xs", "sm", "md", "lg", "xl", "2xl"], direction = props.direction === "row" ? "row" : "column", gap = typeof props.gap === "string" && spaces.includes(props.gap) ? props.gap : "md", align = props.align === "start" || props.align === "center" || props.align === "end" ? props.align : "stretch", justify = props.justify === "center" || props.justify === "end" || props.justify === "between" || props.justify === "around" ? props.justify : "start", classes = [
+      "root",
+      `dir-${direction}`,
+      `gap-${gap}`,
+      `align-${align}`,
+      `justify-${justify}`,
+      props.wrap ? "wrap" : ""
+    ].filter(Boolean).join(" ");
+    return html`
+      <div part="stack-root" class=${classes}>
+        <slot></slot>
+      </div>
+    `;
+  };
+    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-stack')) {
+  customElements.define('kitbash-stack', KitbashStack);
+}

package/dist/vanilla/switch.d.ts

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

package/dist/vanilla/switch.js

@@ -0,0 +1,166 @@
+var u=(_,U,B,Y,I)=>{let W=B.length,J=U.length,z=W,O=0,$=0,X=null;while(O<J||$<z)if(J===O){let Q=z<W?$?Y(B[$-1],-0).nextSibling:Y(B[z],0):I;while($<z)_.insertBefore(Y(B[$++],1),Q)}else if(z===$)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[z-1])J--,z--;else if(U[O]===B[z-1]&&B[$]===U[J-1]){let Q=Y(U[--J],-0).nextSibling;_.insertBefore(Y(B[$++],1),Y(U[O++],-0).nextSibling),_.insertBefore(Y(B[--z],1),Q),U[J]=B[z]}else{if(!X){X=new Map;let Q=$;while(Q<z)X.set(B[Q],Q++)}if(X.has(U[O])){let Q=X.get(U[O]);if($<Q&&Q<z){let Z=O,K=1;while(++Z<J&&Z<z&&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,j=(_,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)=>j(_,U,B),t=!1,V=(_,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],I=B==="role"?B:`aria-${B}`;if(Y==null)P(_,I);else e(_,I,Y)}return U},C,P1=(_,U,B)=>{if(B=B.slice(1),!C)C=new WeakMap;let Y=C.get(_)||M(C,_,{}),I=Y[B];if(I&&I[0])_.removeEventListener(B,...I);if(I=E(U)?U:[U,!1],Y[B]=I,I[0])_.addEventListener(B,...I);return U};var G=(_,U)=>{let{t:B,n:Y}=_,I=!1;switch(typeof U){case"object":if(U!==null){(Y||B).replaceWith(_.n=U.valueOf());break}case"undefined":I=!0;default:if(B.data=I?"":U,Y)_.n=null,Y.replaceWith(B);break}return U},F1=(_,U)=>b(_,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)),b=(_,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?b(_,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 u(_.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?b: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 f=(_)=>(U,B)=>{let{a:Y,b:I,c:W}=_(U,B),J=document.importNode(Y,!0),z=q;if(I!==q){z=[];for(let O,$,X=0;X<I.length;X++){let{a:Q,b:Z,c:K}=I[X],D=Q===$?O:O=o(J,$=Q);z[X]=I1(Z,D,K,Z===R?[]:Z===G?L():null)}}return z1(W?J.firstChild:new w(J),z)};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,(I,W,J,z)=>`<${W}${J.replace(C1,"\x02=$2$1").trimEnd()}${z?B||O1.test(W)?" /":`></${W}`:""}>`).replace(k1,(I)=>I==="\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:I}=_,W=q;if(I>1){let O=[],$=document.createTreeWalker(Y,129),X=0,Q=`${F}${X++}`;W=[];while(X<I){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:z}=J;if(z<1)z=1,Y.appendChild(X1());else if(z===1&&I!==1&&J[0].nodeType!==s)z=0;return M($1,_,H(Y,W,z===1))},$1=new WeakMap,F="isµ",v=(_)=>(U,B)=>$1.get(U)||S1(U,B,_);var x1=f(v(!1)),w1=f(v(!0)),p=(_,{s:U,t:B,v:Y})=>{if(_.a!==B){let{b:I,c:W}=(U?w1:x1)(B,Y);_.a=B,_.b=I,_.c=W}for(let{c:I}=_,W=0;W<I.length;W++){let J=Y[W],z=I[W];switch(z.u){case R:z.v=R(z.t,y1(z.c,J),z.v);break;case G:let O=J instanceof A?p(z.c||(z.c=L()),J):(z.c=null,J);if(O!==z.v)z.v=G(z,O);break;default:if(J!==z.v)z.v=z.u(z.t,J,z.n,z.v);break}}return _.b},y1=(_,U)=>{let B=0,{length:Y}=U;if(Y<_.length)_.splice(Y);for(;B<Y;B++){let I=U[B];if(I instanceof A)U[B]=p(_[B]||(_[B]=L()),I);else _[B]=null}return U};class A{constructor(_,U,B){this.s=_,this.t=U,this.v=B}toDOM(_=L()){return p(_,this)}}var Z1=new WeakMap,d=(_,U)=>{let B=Z1.get(_)||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);
+}
+
+
+    :host {
+      display: inline-flex;
+      vertical-align: middle;
+      font-family: var(--kb-font-family-sans);
+      font-size: var(--kb-font-size-md);
+      color: var(--kb-color-fg-default);
+      --kitbash-switch-w: 2.75rem;
+      --kitbash-switch-h: 1.5rem;
+      --kitbash-switch-pad: 2px;
+      --kitbash-switch-thumb: calc(
+        var(--kitbash-switch-h) - 2 * var(--kitbash-switch-pad)
+      );
+      --kitbash-switch-track: var(--kb-color-bg-subtle);
+      --kitbash-switch-track-on: var(--kb-color-accent-default);
+      --kitbash-switch-knob: #ffffff;
+    }
+    .label-wrap {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--kb-space-sm);
+      cursor: pointer;
+      user-select: none;
+    }
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: var(--kitbash-switch-w);
+      height: var(--kitbash-switch-h);
+      flex-shrink: 0;
+    }
+    input {
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
+    input:disabled {
+      cursor: not-allowed;
+    }
+    .track {
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      box-sizing: border-box;
+      border-radius: 999px;
+      background: var(--kitbash-switch-track);
+      border: 1px solid var(--kb-color-border-default);
+      transition: background 0.15s ease, border-color 0.15s ease;
+      pointer-events: none;
+    }
+    .thumb {
+      position: absolute;
+      z-index: 1;
+      top: var(--kitbash-switch-pad);
+      left: var(--kitbash-switch-pad);
+      width: var(--kitbash-switch-thumb);
+      height: var(--kitbash-switch-thumb);
+      border-radius: 999px;
+      background: var(--kitbash-switch-knob);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+      transition: transform 0.15s ease;
+      pointer-events: none;
+    }
+    input:checked + .track {
+      background: var(--kitbash-switch-track-on);
+      border-color: var(--kitbash-switch-track-on);
+    }
+    input:checked + .track .thumb {
+      transform: translateX(
+        calc(
+          var(--kitbash-switch-w) - var(--kitbash-switch-thumb) - 2 *
+            var(--kitbash-switch-pad)
+        )
+      );
+    }
+    input:focus-visible + .track {
+      box-shadow: var(--kb-focus-ring);
+    }
+    input:disabled + .track {
+      opacity: 0.55;
+    }
+    input[aria-invalid="true"] + .track {
+      border-color: var(--kb-color-danger-default);
+    }
+    .label {
+      line-height: var(--kb-line-height-normal);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .track,
+      .thumb {
+        transition: none;
+      }
+    }
+  `);class L1 extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["name","value","checked","disabled","invalid"]}static get propTypes(){return{name:"String",value:"String",checked:"Boolean",disabled:"Boolean",invalid:"Boolean"}}get name(){return this._props.name}set name(_){this._assignProp("name",_),this.update()}get value(){return this._props.value}set value(_){this._assignProp("value",_),this.update()}get checked(){return this._props.checked}set checked(_){this._assignProp("checked",_),this.update()}get disabled(){return this._props.disabled}set disabled(_){this._assignProp("disabled",_),this.update()}get invalid(){return this._props.invalid}set invalid(_){this._assignProp("invalid",_),this.update()}constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!0}),this._internals=this.attachInternals(),this.shadowRoot.adoptedStyleSheets=[G1],this._defaults={name:"",value:"on",checked:!1,disabled:!1,invalid:!1},this._state={},this._props={...this._defaults},this._eventHandlers={click:function(_){let U=_.currentTarget;if(_.composedPath()[0]!==U)return;let B=U.shadowRoot?.querySelector("input");if(!B||B.disabled)return;B.click()},"change input":function(_,{commit:U}){let B=_.target;U({props:{checked:B.checked}})}},this._eventCleanup=[],this._renderFn=function({props:_,html:U}){return U`
+      <label part="switch-container" class="label-wrap">
+        <span class="switch" part="switch-wrap">
+          <input
+            part="switch-input"
+            type="checkbox"
+            role="switch"
+            name=${_.name}
+            value=${_.value}
+            .checked=${_.checked}
+            ?disabled=${_.disabled}
+            aria-invalid=${_.invalid?"true":"false"}
+          />
+          <span class="track" part="switch-track" aria-hidden="true">
+            <span class="thumb" part="switch-thumb"></span>
+          </span>
+        </span>
+        <span class="label" part="switch-label"><slot></slot></span>
+      </label>
+    `},this._reflecting=!1}connectedCallback(){if(this.update(),this.value!==void 0)this._internals.setFormValue(this.value==null?null:String(this.value))}disconnectedCallback(){this.cleanupEvents()}attributeChangedCallback(_,U,B){if(this._reflecting)return;if(U===B)return;let Y=this.constructor.propTypes[_],I=B;if(B===null||B===void 0)I=this._defaults[_];else if(Y==="Number"&&B!=="")I=Number(B);else if(Y==="Boolean")I=B!==null&&B!=="false";if(this._props[_]=I,_==="value"&&this._internals)this._internals.setFormValue(I==null?null:String(I));this.update()}_assignProp(_,U){let B=this.constructor.propTypes[_],Y=U;if(B==="Boolean")Y=U===!0||U==="";else if(B==="Number"&&U!==null&&U!==void 0&&U!=="")Y=Number(U);this._props[_]=Y;let I=Y===null||Y===void 0||typeof Y==="string"||typeof Y==="number"||typeof Y==="boolean";this._reflecting=!0;try{if(B==="Boolean")if(Y)this.setAttribute(_,"");else this.removeAttribute(_);else if(!I)this.removeAttribute(_);else if(Y===null||Y===void 0)this.removeAttribute(_);else this.setAttribute(_,String(Y))}finally{this._reflecting=!1}if(_==="value"&&this._internals)this._internals.setFormValue(Y==null?null:String(Y))}_emitChange(){this.dispatchEvent(new CustomEvent("kitbash-change",{detail:{state:{...this._state},props:{...this._props}},bubbles:!0,composed:!0}))}commit(_){let U=_||{};if(U.props){let B=this.constructor.propTypes||{};for(let Y of Object.keys(U.props)){if(!Object.prototype.hasOwnProperty.call(B,Y))continue;this._assignProp(Y,U.props[Y])}}if(U.state)this._state={...this._state,...U.state};this.update(),this._emitChange()}setState(_){this.commit({state:_})}setProps(_){this.commit({props:_})}_handlerCtx(){return{props:{...this._props},state:{...this._state},setState:this.setState.bind(this),setProps:this.setProps.bind(this),commit:this.commit.bind(this)}}cleanupEvents(){this._eventCleanup.forEach((_)=>_()),this._eventCleanup=[]}update(){d(this.shadowRoot,this._renderFn({...this._handlerCtx(),html:q1})),this.cleanupEvents(),this.bindEvents(),this.syncFormState()}syncFormState(){let _={},U="";if(this._props.invalid)_.customError=!0,U="Invalid field.";else if(this._props.required&&!this._props.value)_.valueMissing=!0,U="This field is required.";if(Object.keys(_).length>0)this._internals.setValidity(_,U);else this._internals.setValidity({})}bindEvents(){Object.keys(this._eventHandlers).forEach((_)=>{let U=_.split(" "),B=U[0],Y=U.slice(1).join(" ");(Y?this.shadowRoot.querySelectorAll(Y):[this]).forEach((W)=>{let J=(z)=>{this._eventHandlers[_](z,this._handlerCtx())};W.addEventListener(B,J),this._eventCleanup.push(()=>W.removeEventListener(B,J))})})}}if(!customElements.get("kitbash-switch"))customElements.define("kitbash-switch",L1);export{L1 as KitbashSwitch};