@ktbsh/ui 0.1.0

package/dist/vanilla/breadcrumb.js

@@ -0,0 +1,93 @@
+var d=(_,U,Y,z,J)=>{let X=Y.length,Q=U.length,I=X,O=0,$=0,W=null;while(O<Q||$<I)if(Q===O){let B=I<X?$?z(Y[$-1],-0).nextSibling:z(Y[I],0):J;while($<I)_.insertBefore(z(Y[$++],1),B)}else if(I===$)while(O<Q){if(!W||!W.has(U[O]))_.removeChild(z(U[O],-1));O++}else if(U[O]===Y[$])O++,$++;else if(U[Q-1]===Y[I-1])Q--,I--;else if(U[O]===Y[I-1]&&Y[$]===U[Q-1]){let B=z(U[--Q],-0).nextSibling;_.insertBefore(z(Y[$++],1),z(U[O++],-0).nextSibling),_.insertBefore(z(Y[--I],1),B),U[Q]=Y[I]}else{if(!W){W=new Map;let B=$;while(B<I)W.set(Y[B],B++)}if(W.has(U[O])){let B=W.get(U[O]);if($<B&&B<I){let Z=O,K=1;while(++Z<Q&&Z<I&&W.get(U[Z])===B+K)K++;if(K>B-$){let D=z(U[O],0);while($<B)_.insertBefore(z(Y[$++],1),D)}else _.replaceChild(z(Y[$++],1),z(U[O++],-1))}else O++}else _.removeChild(z(U[O++],-1))}return Y};var{isArray:E}=Array,{getPrototypeOf:R1,getOwnPropertyDescriptor:D1}=Object;var m="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),M=(_,U,Y)=>{return _.set(U,Y),Y},i=(_,U)=>{let Y;do Y=D1(_,U);while(!Y&&(_=R1(_)));return Y},o=(_,U)=>U.reduceRight(M1,_),M1=(_,U)=>_.childNodes[U];var s=1;var r=8;var l=11;var{setPrototypeOf:T1}=Object,n=(_)=>{function U(Y){return T1(Y,new.target.prototype)}return U.prototype=_.prototype,U};var T,V=(_,U,Y)=>{if(!T)T=N();if(Y)T.setStartAfter(_);else T.setStartBefore(_);return T.setEndAfter(U),T.deleteContents(),_};var x=({firstChild:_,lastChild:U},Y)=>V(_,U,Y),t=!1,j=(_,U)=>t&&_.nodeType===l?1/U<0?U?x(_,!0):_.lastChild:U?_.valueOf():_.firstChild:_,a=(_)=>document.createComment(_);class w extends n(DocumentFragment){#U=a("<>");#Y=a("</>");#_=q;constructor(_){super(_);this.replaceChildren(...[this.#U,..._.childNodes,this.#Y]),t=!0}get firstChild(){return this.#U}get lastChild(){return this.#Y}get parentNode(){return this.#U.parentNode}remove(){x(this,!1)}replaceWith(_){x(this,!0).replaceWith(_)}valueOf(){let{parentNode:_}=this;if(_===this){if(this.#_===q)this.#_=[...this.childNodes]}else{if(_){let{firstChild:U,lastChild:Y}=this;this.#_=[U];while(U!==Y)this.#_.push(U=U.nextSibling)}this.replaceChildren(...this.#_)}return this}}var e=(_,U,Y)=>_.setAttribute(U,Y),P=(_,U)=>_.removeAttribute(U),H1=(_,U)=>{for(let Y in U){let z=U[Y],J=Y==="role"?Y:`aria-${Y}`;if(z==null)P(_,J);else e(_,J,z)}return U},C,P1=(_,U,Y)=>{if(Y=Y.slice(1),!C)C=new WeakMap;let z=C.get(_)||M(C,_,{}),J=z[Y];if(J&&J[0])_.removeEventListener(Y,...J);if(J=E(U)?U:[U,!1],z[Y]=J,J[0])_.addEventListener(Y,...J);return U};var G=(_,U)=>{let{t:Y,n:z}=_,J=!1;switch(typeof U){case"object":if(U!==null){(z||Y).replaceWith(_.n=U.valueOf());break}case"undefined":J=!0;default:if(Y.data=J?"":U,z)_.n=null,z.replaceWith(Y);break}return U},F1=(_,U)=>f(_,U,U==null?"class":"className"),A1=(_,U)=>{let{dataset:Y}=_;for(let z in U)if(U[z]==null)delete Y[z];else Y[z]=U[z];return U},k=(_,U,Y)=>_[Y]=U,E1=(_,U,Y)=>k(_,U,Y.slice(1)),f=(_,U,Y)=>U==null?(P(_,Y),U):k(_,U,Y),_1=(_,U)=>(typeof U==="function"?U(_):U.current=_,U),y=(_,U,Y)=>(U==null?P(_,Y):e(_,Y,U),U),N1=(_,U)=>U==null?f(_,U,"style"):k(_.style,U,"cssText"),V1=(_,U,Y)=>(_.toggleAttribute(Y.slice(1),U),U),R=(_,U,Y)=>{let{length:z}=U;if(_.data=`[${z}]`,z)return d(_.parentNode,Y,U,j,_);switch(Y.length){case 1:Y[0].remove();case 0:break;default:V(j(Y[0],0),j(Y.at(-1),-0),!1);break}return q},U1=new Map([["aria",H1],["class",F1],["data",A1],["ref",_1],["style",N1]]),Y1=(_,U,Y)=>{switch(U[0]){case".":return E1;case"?":return V1;case"@":return P1;default:return Y||"ownerSVGElement"in _?U==="ref"?_1:y:U1.get(U)||(U in _?U.startsWith("on")?k:i(_,U)?.set?f:y:y)}},z1=(_,U)=>(_.textContent=U==null?"":U,U);var H=(_,U,Y)=>({a:_,b:U,c:Y}),I1=(_,U)=>({b:_,c:U}),J1=(_,U,Y,z)=>({v:q,u:_,t:U,n:Y,c:z}),L=()=>H(null,null,q);var b=(_)=>(U,Y)=>{let{a:z,b:J,c:X}=_(U,Y),Q=document.importNode(z,!0),I=q;if(J!==q){I=[];for(let O,$,W=0;W<J.length;W++){let{a:B,b:Z,c:K}=J[W],D=B===$?O:O=o(Q,$=B);I[W]=J1(Z,D,K,Z===R?[]:Z===G?L():null)}}return I1(X?Q.firstChild:new w(Q),I)};var O1=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Q1=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;var j1=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,C1=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,k1=/[\x01\x02]/g,W1=(_,U,Y)=>{let z=0;return _.join("\x01").trim().replace(j1,(J,X,Q,I)=>`<${X}${Q.replace(C1,"\x02=$2$1").trimEnd()}${I?Y||Q1.test(X)?" /":`></${X}`:""}>`).replace(k1,(J)=>J==="\x01"?`<!--${U+z++}-->`:U+z++)};var S=document.createElement("template"),g,h,X1=(_,U)=>{if(U){if(!g)g=document.createElementNS(m,"svg"),h=N(),h.selectNodeContents(g);return h.createContextualFragment(_)}S.innerHTML=_;let{content:Y}=S;return S=S.cloneNode(!1),Y};var c=(_)=>{let U=[],Y;while(Y=_.parentNode)U.push(U.indexOf.call(Y.childNodes,_)),_=Y;return U},$1=()=>document.createTextNode(""),S1=(_,U,Y)=>{let z=X1(W1(_,F,Y),Y),{length:J}=_,X=q;if(J>1){let O=[],$=document.createTreeWalker(z,129),W=0,B=`${F}${W++}`;X=[];while(W<J){let Z=$.nextNode();if(Z.nodeType===r){if(Z.data===B){let K=E(U[W-1])?R:G;if(K===G)O.push(Z);X.push(H(c(Z),K,null)),B=`${F}${W++}`}}else{let K;while(Z.hasAttribute(B)){if(!K)K=c(Z);let D=Z.getAttribute(B);X.push(H(K,Y1(Z,D,Y),D)),P(Z,B),B=`${F}${W++}`}if(!Y&&O1.test(Z.localName)&&Z.textContent.trim()===`<!--${B}-->`)X.push(H(K||c(Z),z1,null)),B=`${F}${W++}`}}for(W=0;W<O.length;W++)O[W].replaceWith($1())}let{childNodes:Q}=z,{length:I}=Q;if(I<1)I=1,z.appendChild($1());else if(I===1&&J!==1&&Q[0].nodeType!==s)I=0;return M(B1,_,H(z,X,I===1))},B1=new WeakMap,F="isµ",v=(_)=>(U,Y)=>B1.get(U)||S1(U,Y,_);var x1=b(v(!1)),w1=b(v(!0)),p=(_,{s:U,t:Y,v:z})=>{if(_.a!==Y){let{b:J,c:X}=(U?w1:x1)(Y,z);_.a=Y,_.b=J,_.c=X}for(let{c:J}=_,X=0;X<J.length;X++){let Q=z[X],I=J[X];switch(I.u){case R:I.v=R(I.t,y1(I.c,Q),I.v);break;case G:let O=Q instanceof A?p(I.c||(I.c=L()),Q):(I.c=null,Q);if(O!==I.v)I.v=G(I,O);break;default:if(Q!==I.v)I.v=I.u(I.t,Q,I.n,I.v);break}}return _.b},y1=(_,U)=>{let Y=0,{length:z}=U;if(z<_.length)_.splice(z);for(;Y<z;Y++){let J=U[Y];if(J instanceof A)U[Y]=p(_[Y]||(_[Y]=L()),J);else _[Y]=null}return U};class A{constructor(_,U,Y){this.s=_,this.t=U,this.v=Y}toDOM(_=L()){return p(_,this)}}var Z1=new WeakMap,u=(_,U)=>{let Y=Z1.get(_)||M(Z1,_,L()),{b:z}=Y;if(z!==(typeof U==="function"?U():U).toDOM(Y))_.replaceChildren(Y.b.valueOf());return _};/*! (c) Andrea Giammarchi - MIT */var K1=(_)=>(U,...Y)=>new A(_,U,Y),q1=K1(!1),C_=K1(!0);var G1=new CSSStyleSheet;G1.replaceSync(`:host {
+--kb-color-bg-canvas: #ffffff;
+--kb-color-bg-surface: #f6f8fa;
+--kb-color-bg-subtle: #eef1f4;
+--kb-color-bg-inverse: #1f2328;
+--kb-color-fg-default: #1f2328;
+--kb-color-fg-muted: #656d76;
+--kb-color-fg-subtle: #8c959f;
+--kb-color-fg-on-accent: #ffffff;
+--kb-color-fg-on-inverse: #ffffff;
+--kb-color-border-default: #d0d7de;
+--kb-color-border-muted: #e6ebf0;
+--kb-color-border-focus: #0969da;
+--kb-color-accent-default: #0969da;
+--kb-color-accent-hover: #0860ca;
+--kb-color-accent-subtle: #ddf4ff;
+--kb-color-danger-default: #cf222e;
+--kb-color-danger-subtle: #ffebe9;
+--kb-color-success-default: #1a7f37;
+--kb-color-success-subtle: #dafbe1;
+--kb-color-warning-default: #9a6700;
+--kb-color-warning-subtle: #fff8c5;
+--kb-space-2xs: 2px;
+--kb-space-xs: 4px;
+--kb-space-sm: 8px;
+--kb-space-md: 16px;
+--kb-space-lg: 24px;
+--kb-space-xl: 32px;
+--kb-space-2xl: 48px;
+--kb-radius-sm: 4px;
+--kb-radius-md: 8px;
+--kb-radius-lg: 12px;
+--kb-radius-full: 9999px;
+--kb-font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+--kb-font-size-sm: 0.875rem;
+--kb-font-size-md: 1rem;
+--kb-font-size-lg: 1.125rem;
+--kb-font-size-xl: 1.25rem;
+--kb-font-weight-regular: 400;
+--kb-font-weight-medium: 500;
+--kb-font-weight-semibold: 600;
+--kb-line-height-tight: 1.25;
+--kb-line-height-normal: 1.5;
+--kb-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08);
+--kb-shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1);
+--kb-focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.35);
+}
+
+
+    :host {
+      display: block;
+      font-family: var(--kb-font-family-sans);
+      font-size: var(--kb-font-size-sm);
+      color: var(--kb-color-fg-muted);
+    }
+    nav {
+      display: block;
+    }
+    ol {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--kb-space-xs);
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    li {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--kb-space-xs);
+      min-height: 1.5rem;
+    }
+    .sep {
+      color: var(--kb-color-fg-subtle);
+      user-select: none;
+    }
+    ::slotted(a) {
+      color: var(--kb-color-accent-default);
+      text-decoration: none;
+    }
+    ::slotted(a:hover) {
+      text-decoration: underline;
+    }
+    slot {
+      display: none;
+    }
+  `);class L1 extends HTMLElement{static get observedAttributes(){return["label"]}static get propTypes(){return{label:"String"}}get label(){return this._props.label}set label(_){this._assignProp("label",_),this.update()}constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!1}),this.shadowRoot.adoptedStyleSheets=[G1],this._defaults={label:"Breadcrumb"},this._state={},this._props={...this._defaults},this._eventHandlers={"slotchange slot":function(_){let U=_.target,Y=U.getRootNode(),z=Y.querySelector("ol"),J=Y.host;if(!z||!J)return;let X=()=>{while(z.firstChild)z.removeChild(z.firstChild);let Q=U.assignedNodes({flatten:!0}).filter((I)=>{if(I.nodeType!==1)return!1;let O=I;return O.tagName!=="SCRIPT"&&O.tagName!=="STYLE"});Q.forEach((I,O)=>{let $=document.createElement("li");if($.setAttribute("part","breadcrumb-item"),$.appendChild(I.cloneNode(!0)),z.appendChild($),O<Q.length-1){let W=document.createElement("li");W.className="sep",W.setAttribute("part","breadcrumb-separator"),W.setAttribute("aria-hidden","true"),W.textContent="/",z.appendChild(W)}})};if(J.__kbBcSync=X,X(),!J.__kbBcObs){let Q=new MutationObserver((I)=>{if(I.some((O)=>O.target!==J||O.type!=="attributes"))J.__kbBcSync?.()});Q.observe(J,{childList:!0,subtree:!0,characterData:!0}),J.__kbBcObs=Q}}},this._eventCleanup=[],this._renderFn=function({props:_,html:U}){let Y=typeof _.label==="string"&&_.label.length>0?_.label:"Breadcrumb";return U`
+      <nav part="breadcrumb-root" aria-label=${Y}>
+        <ol part="breadcrumb-list"></ol>
+        <slot></slot>
+      </nav>
+    `},this._reflecting=!1}connectedCallback(){this.update()}disconnectedCallback(){this.cleanupEvents()}attributeChangedCallback(_,U,Y){if(this._reflecting)return;if(U===Y)return;let z=this.constructor.propTypes[_],J=Y;if(Y===null||Y===void 0)J=this._defaults[_];else if(z==="Number"&&Y!=="")J=Number(Y);else if(z==="Boolean")J=Y!==null&&Y!=="false";this._props[_]=J,this.update()}_assignProp(_,U){let Y=this.constructor.propTypes[_],z=U;if(Y==="Boolean")z=U===!0||U==="";else if(Y==="Number"&&U!==null&&U!==void 0&&U!=="")z=Number(U);this._props[_]=z;let J=z===null||z===void 0||typeof z==="string"||typeof z==="number"||typeof z==="boolean";this._reflecting=!0;try{if(Y==="Boolean")if(z)this.setAttribute(_,"");else this.removeAttribute(_);else if(!J)this.removeAttribute(_);else if(z===null||z===void 0)this.removeAttribute(_);else this.setAttribute(_,String(z))}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 Y=this.constructor.propTypes||{};for(let z of Object.keys(U.props)){if(!Object.prototype.hasOwnProperty.call(Y,z))continue;this._assignProp(z,U.props[z])}}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(){u(this.shadowRoot,this._renderFn({...this._handlerCtx(),html:q1})),this.cleanupEvents(),this.bindEvents()}bindEvents(){Object.keys(this._eventHandlers).forEach((_)=>{let U=_.split(" "),Y=U[0],z=U.slice(1).join(" ");(z?this.shadowRoot.querySelectorAll(z):[this]).forEach((X)=>{let Q=(I)=>{this._eventHandlers[_](I,this._handlerCtx())};X.addEventListener(Y,Q),this._eventCleanup.push(()=>X.removeEventListener(Y,Q))})})}}if(!customElements.get("kitbash-breadcrumb"))customElements.define("kitbash-breadcrumb",L1);export{L1 as KitbashBreadcrumb};

package/dist/vanilla/breadcrumb.src.js

@@ -0,0 +1,255 @@
+
+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      font-size: var(--kb-font-size-sm);\n      color: var(--kb-color-fg-muted);\n    }\n    nav {\n      display: block;\n    }\n    ol {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: var(--kb-space-xs);\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n    li {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--kb-space-xs);\n      min-height: 1.5rem;\n    }\n    .sep {\n      color: var(--kb-color-fg-subtle);\n      user-select: none;\n    }\n    ::slotted(a) {\n      color: var(--kb-color-accent-default);\n      text-decoration: none;\n    }\n    ::slotted(a:hover) {\n      text-decoration: underline;\n    }\n    slot {\n      display: none;\n    }\n  ");
+
+export class KitbashBreadcrumb extends HTMLElement {
+  
+  static get observedAttributes() {
+    return ["label"];
+  }
+  
+  static get propTypes() {
+    return {"label":"String"};
+  }
+
+
+  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();
+  }
+
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: false });
+    
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+    
+    this._defaults = {"label":"Breadcrumb"};
+    
+    this._state = {};
+    this._props = { ...this._defaults };
+    this._eventHandlers = { 'slotchange slot': function(e) {
+      const slot = e.target, root = slot.getRootNode(), list = root.querySelector("ol"), host = root.host;
+      if (!list || !host)
+        return;
+      const sync = () => {
+        while (list.firstChild)
+          list.removeChild(list.firstChild);
+        const nodes = slot.assignedNodes({ flatten: !0 }).filter((n) => {
+          if (n.nodeType !== 1)
+            return !1;
+          const el = n;
+          return el.tagName !== "SCRIPT" && el.tagName !== "STYLE";
+        });
+        nodes.forEach((node, i) => {
+          const li = document.createElement("li");
+          li.setAttribute("part", "breadcrumb-item");
+          li.appendChild(node.cloneNode(!0));
+          list.appendChild(li);
+          if (i < nodes.length - 1) {
+            const sep = document.createElement("li");
+            sep.className = "sep";
+            sep.setAttribute("part", "breadcrumb-separator");
+            sep.setAttribute("aria-hidden", "true");
+            sep.textContent = "/";
+            list.appendChild(sep);
+          }
+        });
+      };
+      host.__kbBcSync = sync;
+      sync();
+      if (!host.__kbBcObs) {
+        const obs = new MutationObserver((mutations) => {
+          if (mutations.some((m) => m.target !== host || m.type !== "attributes"))
+            host.__kbBcSync?.();
+        });
+        obs.observe(host, {
+          childList: !0,
+          subtree: !0,
+          characterData: !0
+        });
+        host.__kbBcObs = obs;
+      }
+    } };
+    this._eventCleanup = [];
+    this._renderFn = function({ props, html }) {
+    const label = typeof props.label === "string" && props.label.length > 0 ? props.label : "Breadcrumb";
+    return html`
+      <nav part="breadcrumb-root" aria-label=${label}>
+        <ol part="breadcrumb-list"></ol>
+        <slot></slot>
+      </nav>
+    `;
+  };
+    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-breadcrumb')) {
+  customElements.define('kitbash-breadcrumb', KitbashBreadcrumb);
+}

package/dist/vanilla/button.d.ts

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

package/dist/vanilla/button.js

@@ -0,0 +1,135 @@
+var p=(_,U,Y,z,J)=>{let X=Y.length,O=U.length,I=X,Q=0,B=0,$=null;while(Q<O||B<I)if(O===Q){let W=I<X?B?z(Y[B-1],-0).nextSibling:z(Y[I],0):J;while(B<I)_.insertBefore(z(Y[B++],1),W)}else if(I===B)while(Q<O){if(!$||!$.has(U[Q]))_.removeChild(z(U[Q],-1));Q++}else if(U[Q]===Y[B])Q++,B++;else if(U[O-1]===Y[I-1])O--,I--;else if(U[Q]===Y[I-1]&&Y[B]===U[O-1]){let W=z(U[--O],-0).nextSibling;_.insertBefore(z(Y[B++],1),z(U[Q++],-0).nextSibling),_.insertBefore(z(Y[--I],1),W),U[O]=Y[I]}else{if(!$){$=new Map;let W=B;while(W<I)$.set(Y[W],W++)}if($.has(U[Q])){let W=$.get(U[Q]);if(B<W&&W<I){let Z=Q,K=1;while(++Z<O&&Z<I&&$.get(U[Z])===W+K)K++;if(K>W-B){let D=z(U[Q],0);while(B<W)_.insertBefore(z(Y[B++],1),D)}else _.replaceChild(z(Y[B++],1),z(U[Q++],-1))}else Q++}else _.removeChild(z(U[Q++],-1))}return Y};var{isArray:E}=Array,{getPrototypeOf:R1,getOwnPropertyDescriptor:D1}=Object;var i="http://www.w3.org/2000/svg",q=[],N=()=>document.createRange(),M=(_,U,Y)=>{return _.set(U,Y),Y},m=(_,U)=>{let Y;do Y=D1(_,U);while(!Y&&(_=R1(_)));return Y},o=(_,U)=>U.reduceRight(M1,_),M1=(_,U)=>_.childNodes[U];var s=1;var r=8;var l=11;var{setPrototypeOf:T1}=Object,n=(_)=>{function U(Y){return T1(Y,new.target.prototype)}return U.prototype=_.prototype,U};var T,V=(_,U,Y)=>{if(!T)T=N();if(Y)T.setStartAfter(_);else T.setStartBefore(_);return T.setEndAfter(U),T.deleteContents(),_};var x=({firstChild:_,lastChild:U},Y)=>V(_,U,Y),t=!1,j=(_,U)=>t&&_.nodeType===l?1/U<0?U?x(_,!0):_.lastChild:U?_.valueOf():_.firstChild:_,a=(_)=>document.createComment(_);class w extends n(DocumentFragment){#U=a("<>");#Y=a("</>");#_=q;constructor(_){super(_);this.replaceChildren(...[this.#U,..._.childNodes,this.#Y]),t=!0}get firstChild(){return this.#U}get lastChild(){return this.#Y}get parentNode(){return this.#U.parentNode}remove(){x(this,!1)}replaceWith(_){x(this,!0).replaceWith(_)}valueOf(){let{parentNode:_}=this;if(_===this){if(this.#_===q)this.#_=[...this.childNodes]}else{if(_){let{firstChild:U,lastChild:Y}=this;this.#_=[U];while(U!==Y)this.#_.push(U=U.nextSibling)}this.replaceChildren(...this.#_)}return this}}var e=(_,U,Y)=>_.setAttribute(U,Y),P=(_,U)=>_.removeAttribute(U),H1=(_,U)=>{for(let Y in U){let z=U[Y],J=Y==="role"?Y:`aria-${Y}`;if(z==null)P(_,J);else e(_,J,z)}return U},C,P1=(_,U,Y)=>{if(Y=Y.slice(1),!C)C=new WeakMap;let z=C.get(_)||M(C,_,{}),J=z[Y];if(J&&J[0])_.removeEventListener(Y,...J);if(J=E(U)?U:[U,!1],z[Y]=J,J[0])_.addEventListener(Y,...J);return U};var G=(_,U)=>{let{t:Y,n:z}=_,J=!1;switch(typeof U){case"object":if(U!==null){(z||Y).replaceWith(_.n=U.valueOf());break}case"undefined":J=!0;default:if(Y.data=J?"":U,z)_.n=null,z.replaceWith(Y);break}return U},F1=(_,U)=>f(_,U,U==null?"class":"className"),A1=(_,U)=>{let{dataset:Y}=_;for(let z in U)if(U[z]==null)delete Y[z];else Y[z]=U[z];return U},k=(_,U,Y)=>_[Y]=U,E1=(_,U,Y)=>k(_,U,Y.slice(1)),f=(_,U,Y)=>U==null?(P(_,Y),U):k(_,U,Y),_1=(_,U)=>(typeof U==="function"?U(_):U.current=_,U),y=(_,U,Y)=>(U==null?P(_,Y):e(_,Y,U),U),N1=(_,U)=>U==null?f(_,U,"style"):k(_.style,U,"cssText"),V1=(_,U,Y)=>(_.toggleAttribute(Y.slice(1),U),U),R=(_,U,Y)=>{let{length:z}=U;if(_.data=`[${z}]`,z)return p(_.parentNode,Y,U,j,_);switch(Y.length){case 1:Y[0].remove();case 0:break;default:V(j(Y[0],0),j(Y.at(-1),-0),!1);break}return q},U1=new Map([["aria",H1],["class",F1],["data",A1],["ref",_1],["style",N1]]),Y1=(_,U,Y)=>{switch(U[0]){case".":return E1;case"?":return V1;case"@":return P1;default:return Y||"ownerSVGElement"in _?U==="ref"?_1:y:U1.get(U)||(U in _?U.startsWith("on")?k:m(_,U)?.set?f:y:y)}},z1=(_,U)=>(_.textContent=U==null?"":U,U);var H=(_,U,Y)=>({a:_,b:U,c:Y}),I1=(_,U)=>({b:_,c:U}),J1=(_,U,Y,z)=>({v:q,u:_,t:U,n:Y,c:z}),L=()=>H(null,null,q);var b=(_)=>(U,Y)=>{let{a:z,b:J,c:X}=_(U,Y),O=document.importNode(z,!0),I=q;if(J!==q){I=[];for(let Q,B,$=0;$<J.length;$++){let{a:W,b:Z,c:K}=J[$],D=W===B?Q:Q=o(O,B=W);I[$]=J1(Z,D,K,Z===R?[]:Z===G?L():null)}}return I1(X?O.firstChild:new w(O),I)};var O1=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Q1=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;var j1=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,C1=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,k1=/[\x01\x02]/g,W1=(_,U,Y)=>{let z=0;return _.join("\x01").trim().replace(j1,(J,X,O,I)=>`<${X}${O.replace(C1,"\x02=$2$1").trimEnd()}${I?Y||Q1.test(X)?" /":`></${X}`:""}>`).replace(k1,(J)=>J==="\x01"?`<!--${U+z++}-->`:U+z++)};var S=document.createElement("template"),g,h,X1=(_,U)=>{if(U){if(!g)g=document.createElementNS(i,"svg"),h=N(),h.selectNodeContents(g);return h.createContextualFragment(_)}S.innerHTML=_;let{content:Y}=S;return S=S.cloneNode(!1),Y};var c=(_)=>{let U=[],Y;while(Y=_.parentNode)U.push(U.indexOf.call(Y.childNodes,_)),_=Y;return U},$1=()=>document.createTextNode(""),S1=(_,U,Y)=>{let z=X1(W1(_,F,Y),Y),{length:J}=_,X=q;if(J>1){let Q=[],B=document.createTreeWalker(z,129),$=0,W=`${F}${$++}`;X=[];while($<J){let Z=B.nextNode();if(Z.nodeType===r){if(Z.data===W){let K=E(U[$-1])?R:G;if(K===G)Q.push(Z);X.push(H(c(Z),K,null)),W=`${F}${$++}`}}else{let K;while(Z.hasAttribute(W)){if(!K)K=c(Z);let D=Z.getAttribute(W);X.push(H(K,Y1(Z,D,Y),D)),P(Z,W),W=`${F}${$++}`}if(!Y&&O1.test(Z.localName)&&Z.textContent.trim()===`<!--${W}-->`)X.push(H(K||c(Z),z1,null)),W=`${F}${$++}`}}for($=0;$<Q.length;$++)Q[$].replaceWith($1())}let{childNodes:O}=z,{length:I}=O;if(I<1)I=1,z.appendChild($1());else if(I===1&&J!==1&&O[0].nodeType!==s)I=0;return M(B1,_,H(z,X,I===1))},B1=new WeakMap,F="isµ",v=(_)=>(U,Y)=>B1.get(U)||S1(U,Y,_);var x1=b(v(!1)),w1=b(v(!0)),u=(_,{s:U,t:Y,v:z})=>{if(_.a!==Y){let{b:J,c:X}=(U?w1:x1)(Y,z);_.a=Y,_.b=J,_.c=X}for(let{c:J}=_,X=0;X<J.length;X++){let O=z[X],I=J[X];switch(I.u){case R:I.v=R(I.t,y1(I.c,O),I.v);break;case G:let Q=O instanceof A?u(I.c||(I.c=L()),O):(I.c=null,O);if(Q!==I.v)I.v=G(I,Q);break;default:if(O!==I.v)I.v=I.u(I.t,O,I.n,I.v);break}}return _.b},y1=(_,U)=>{let Y=0,{length:z}=U;if(z<_.length)_.splice(z);for(;Y<z;Y++){let J=U[Y];if(J instanceof A)U[Y]=u(_[Y]||(_[Y]=L()),J);else _[Y]=null}return U};class A{constructor(_,U,Y){this.s=_,this.t=U,this.v=Y}toDOM(_=L()){return u(_,this)}}var Z1=new WeakMap,d=(_,U)=>{let Y=Z1.get(_)||M(Z1,_,L()),{b:z}=Y;if(z!==(typeof U==="function"?U():U).toDOM(Y))_.replaceChildren(Y.b.valueOf());return _};/*! (c) Andrea Giammarchi - MIT */var K1=(_)=>(U,...Y)=>new A(_,U,Y),q1=K1(!1),C_=K1(!0);var G1=new CSSStyleSheet;G1.replaceSync(`:host {
+--kb-color-bg-canvas: #ffffff;
+--kb-color-bg-surface: #f6f8fa;
+--kb-color-bg-subtle: #eef1f4;
+--kb-color-bg-inverse: #1f2328;
+--kb-color-fg-default: #1f2328;
+--kb-color-fg-muted: #656d76;
+--kb-color-fg-subtle: #8c959f;
+--kb-color-fg-on-accent: #ffffff;
+--kb-color-fg-on-inverse: #ffffff;
+--kb-color-border-default: #d0d7de;
+--kb-color-border-muted: #e6ebf0;
+--kb-color-border-focus: #0969da;
+--kb-color-accent-default: #0969da;
+--kb-color-accent-hover: #0860ca;
+--kb-color-accent-subtle: #ddf4ff;
+--kb-color-danger-default: #cf222e;
+--kb-color-danger-subtle: #ffebe9;
+--kb-color-success-default: #1a7f37;
+--kb-color-success-subtle: #dafbe1;
+--kb-color-warning-default: #9a6700;
+--kb-color-warning-subtle: #fff8c5;
+--kb-space-2xs: 2px;
+--kb-space-xs: 4px;
+--kb-space-sm: 8px;
+--kb-space-md: 16px;
+--kb-space-lg: 24px;
+--kb-space-xl: 32px;
+--kb-space-2xl: 48px;
+--kb-radius-sm: 4px;
+--kb-radius-md: 8px;
+--kb-radius-lg: 12px;
+--kb-radius-full: 9999px;
+--kb-font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+--kb-font-size-sm: 0.875rem;
+--kb-font-size-md: 1rem;
+--kb-font-size-lg: 1.125rem;
+--kb-font-size-xl: 1.25rem;
+--kb-font-weight-regular: 400;
+--kb-font-weight-medium: 500;
+--kb-font-weight-semibold: 600;
+--kb-line-height-tight: 1.25;
+--kb-line-height-normal: 1.5;
+--kb-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08);
+--kb-shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1);
+--kb-focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.35);
+}
+
+
+    :host {
+      display: inline-block;
+      --kitbash-btn-padding-y: var(--kb-space-sm);
+      --kitbash-btn-padding-x: var(--kb-space-md);
+      --kitbash-btn-radius: var(--kb-radius-sm);
+      --kitbash-btn-font: var(--kb-font-size-md);
+      --kitbash-btn-focus-ring: var(--kb-focus-ring);
+      font-family: var(--kb-font-family-sans);
+    }
+    :host([size="sm"]) {
+      --kitbash-btn-padding-y: var(--kb-space-xs);
+      --kitbash-btn-padding-x: var(--kb-space-sm);
+      --kitbash-btn-font: var(--kb-font-size-sm);
+    }
+    :host([size="lg"]) {
+      --kitbash-btn-padding-y: var(--kb-space-md);
+      --kitbash-btn-padding-x: var(--kb-space-lg);
+      --kitbash-btn-font: var(--kb-font-size-lg);
+    }
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--kb-space-xs);
+      box-sizing: border-box;
+      min-height: 2.25rem;
+      min-width: 2.25rem;
+      padding: var(--kitbash-btn-padding-y) var(--kitbash-btn-padding-x);
+      border-width: 1px;
+      border-style: solid;
+      border-radius: var(--kitbash-btn-radius);
+      cursor: pointer;
+      font-size: var(--kitbash-btn-font);
+      font-family: inherit;
+      font-weight: var(--kb-font-weight-medium);
+      line-height: var(--kb-line-height-tight);
+    }
+    :host([size="sm"]) button {
+      min-height: 2rem;
+      min-width: 2rem;
+    }
+    :host([size="lg"]) button {
+      min-height: 2.75rem;
+      min-width: 2.75rem;
+    }
+    button:focus-visible {
+      outline: none;
+      box-shadow: var(--kitbash-btn-focus-ring);
+    }
+    button:disabled {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+    .primary {
+      background-color: var(--kitbash-btn-bg, var(--kb-color-accent-default));
+      color: var(--kitbash-btn-color, var(--kb-color-fg-on-accent));
+      border-color: var(--kitbash-btn-border-color, transparent);
+    }
+    .secondary {
+      background-color: var(--kitbash-btn-bg, var(--kb-color-bg-subtle));
+      color: var(--kitbash-btn-color, var(--kb-color-fg-default));
+      border-color: var(
+        --kitbash-btn-border-color,
+        var(--kb-color-border-default)
+      );
+    }
+    .ghost {
+      background-color: var(--kitbash-btn-bg, transparent);
+      color: var(--kitbash-btn-color, var(--kb-color-fg-default));
+      border-color: var(--kitbash-btn-border-color, transparent);
+    }
+    .danger {
+      background-color: var(--kitbash-btn-bg, var(--kb-color-danger-default));
+      color: var(--kitbash-btn-color, var(--kb-color-fg-on-accent));
+      border-color: var(--kitbash-btn-border-color, transparent);
+    }
+  `);class L1 extends HTMLElement{static get observedAttributes(){return["variant","size","disabled","type"]}static get propTypes(){return{variant:"String",size:"String",disabled:"Boolean",type:"String"}}get variant(){return this._props.variant}set variant(_){this._assignProp("variant",_),this.update()}get size(){return this._props.size}set size(_){this._assignProp("size",_),this.update()}get disabled(){return this._props.disabled}set disabled(_){this._assignProp("disabled",_),this.update()}get type(){return this._props.type}set type(_){this._assignProp("type",_),this.update()}constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.adoptedStyleSheets=[G1],this._defaults={variant:"primary",size:"md",disabled:!1,type:"button"},this._state={},this._props={...this._defaults},this._eventHandlers={"click button":function(_,{props:U}){if(U.disabled)return;let Y=U.type==="submit"||U.type==="reset"?U.type:"button";if(Y==="button")return;let z=_.currentTarget.getRootNode().host?.closest?.("form");if(!z)return;if(Y==="submit")z.requestSubmit();else z.reset()}},this._eventCleanup=[],this._renderFn=function({props:_,html:U}){let Y=_.variant==="secondary"||_.variant==="ghost"||_.variant==="danger"?_.variant:"primary",z=_.type==="submit"||_.type==="reset"?_.type:"button";return U`
+      <button
+        part="button-root"
+        class=${Y}
+        type=${z}
+        ?disabled=${_.disabled}
+      >
+        <slot></slot>
+      </button>
+    `},this._reflecting=!1}connectedCallback(){this.update()}disconnectedCallback(){this.cleanupEvents()}attributeChangedCallback(_,U,Y){if(this._reflecting)return;if(U===Y)return;let z=this.constructor.propTypes[_],J=Y;if(Y===null||Y===void 0)J=this._defaults[_];else if(z==="Number"&&Y!=="")J=Number(Y);else if(z==="Boolean")J=Y!==null&&Y!=="false";this._props[_]=J,this.update()}_assignProp(_,U){let Y=this.constructor.propTypes[_],z=U;if(Y==="Boolean")z=U===!0||U==="";else if(Y==="Number"&&U!==null&&U!==void 0&&U!=="")z=Number(U);this._props[_]=z;let J=z===null||z===void 0||typeof z==="string"||typeof z==="number"||typeof z==="boolean";this._reflecting=!0;try{if(Y==="Boolean")if(z)this.setAttribute(_,"");else this.removeAttribute(_);else if(!J)this.removeAttribute(_);else if(z===null||z===void 0)this.removeAttribute(_);else this.setAttribute(_,String(z))}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 Y=this.constructor.propTypes||{};for(let z of Object.keys(U.props)){if(!Object.prototype.hasOwnProperty.call(Y,z))continue;this._assignProp(z,U.props[z])}}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(" "),Y=U[0],z=U.slice(1).join(" ");(z?this.shadowRoot.querySelectorAll(z):[this]).forEach((X)=>{let O=(I)=>{this._eventHandlers[_](I,this._handlerCtx())};X.addEventListener(Y,O),this._eventCleanup.push(()=>X.removeEventListener(Y,O))})})}}if(!customElements.get("kitbash-button"))customElements.define("kitbash-button",L1);export{L1 as KitbashButton};