@kodaris/krubble-components 1.0.0

package/dist/krubble.umd.min.js

@@ -0,0 +1,739 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).kr={})}(this,(function(e){"use strict";
+/**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */const t=globalThis,i=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,o=Symbol(),s=new WeakMap;let r=class{constructor(e,t,i){if(this._$cssResult$=!0,i!==o)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(i&&void 0===e){const i=void 0!==t&&1===t.length;i&&(e=s.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&s.set(t,e))}return e}toString(){return this.cssText}};const n=(e,...t)=>{const i=1===e.length?e[0]:t.reduce(((t,i,o)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+e[o+1]),e[0]);return new r(i,e,o)},l=i?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new r("string"==typeof e?e:e+"",void 0,o))(t)})(e):e
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */,{is:a,defineProperty:d,getOwnPropertyDescriptor:c,getOwnPropertyNames:h,getOwnPropertySymbols:p,getPrototypeOf:u}=Object,f=globalThis,g=f.trustedTypes,b=g?g.emptyScript:"",v=f.reactiveElementPolyfillSupport,y=(e,t)=>e,m={toAttribute(e,t){switch(t){case Boolean:e=e?b:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},_=(e,t)=>!a(e,t),$={attribute:!0,type:String,converter:m,reflect:!1,useDefault:!1,hasChanged:_};Symbol.metadata??=Symbol("metadata"),f.litPropertyMetadata??=new WeakMap;let x=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=$){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(e,i,t);void 0!==o&&d(this.prototype,e,o)}}static getPropertyDescriptor(e,t,i){const{get:o,set:s}=c(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:o,set(t){const r=o?.call(this);s?.call(this,t),this.requestUpdate(e,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??$}static _$Ei(){if(this.hasOwnProperty(y("elementProperties")))return;const e=u(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(y("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(y("properties"))){const e=this.properties,t=[...h(e),...p(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const i=this._$Eu(e,t);void 0!==i&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(l(e))}else void 0!==e&&t.push(l(e));return t}static _$Eu(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((e,o)=>{if(i)e.adoptedStyleSheets=o.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const i of o){const o=document.createElement("style"),s=t.litNonce;void 0!==s&&o.setAttribute("nonce",s),o.textContent=i.cssText,e.appendChild(o)}})(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ET(e,t){const i=this.constructor.elementProperties.get(e),o=this.constructor._$Eu(e,i);if(void 0!==o&&!0===i.reflect){const s=(void 0!==i.converter?.toAttribute?i.converter:m).toAttribute(t,i.type);this._$Em=e,null==s?this.removeAttribute(o):this.setAttribute(o,s),this._$Em=null}}_$AK(e,t){const i=this.constructor,o=i._$Eh.get(e);if(void 0!==o&&this._$Em!==o){const e=i.getPropertyOptions(o),s="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:m;this._$Em=o;const r=s.fromAttribute(t,e.type);this[o]=r??this._$Ej?.get(o)??r,this._$Em=null}}requestUpdate(e,t,i){if(void 0!==e){const o=this.constructor,s=this[e];if(i??=o.getPropertyOptions(e),!((i.hasChanged??_)(s,t)||i.useDefault&&i.reflect&&s===this._$Ej?.get(e)&&!this.hasAttribute(o._$Eu(e,i))))return;this.C(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:i,reflect:o,wrapped:s},r){i&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,r??t??this[e]),!0!==s||void 0!==r)||(this._$AL.has(e)||(this.hasUpdated||i||(t=void 0),this._$AL.set(e,t)),!0===o&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e){const{wrapped:e}=i,o=this[t];!0!==e||this._$AL.has(t)||void 0===o||this.C(t,void 0,i,o)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach((e=>e.hostUpdate?.())),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach((e=>this._$ET(e,this[e]))),this._$EM()}updated(e){}firstUpdated(e){}};x.elementStyles=[],x.shadowRootOptions={mode:"open"},x[y("elementProperties")]=new Map,x[y("finalized")]=new Map,v?.({ReactiveElement:x}),(f.reactiveElementVersions??=[]).push("2.1.1");
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+const w=globalThis,k=w.trustedTypes,A=k?k.createPolicy("lit-html",{createHTML:e=>e}):void 0,R="$lit$",E=`lit$${Math.random().toFixed(9).slice(2)}$`,C="?"+E,S=`<${C}>`,P=document,T=()=>P.createComment(""),K=e=>null===e||"object"!=typeof e&&"function"!=typeof e,O=Array.isArray,M="[ \t\n\f\r]",H=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,D=/-->/g,j=/>/g,U=RegExp(`>|${M}(?:([^\\s"'>=/]+)(${M}*=${M}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),z=/'/g,B=/"/g,N=/^(?:script|style|textarea|title)$/i,L=(e=>(t,...i)=>({_$litType$:e,strings:t,values:i}))(1),F=Symbol.for("lit-noChange"),V=Symbol.for("lit-nothing"),q=new WeakMap,I=P.createTreeWalker(P,129);function W(e,t){if(!O(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==A?A.createHTML(t):t}const J=(e,t)=>{const i=e.length-1,o=[];let s,r=2===t?"<svg>":3===t?"<math>":"",n=H;for(let t=0;t<i;t++){const i=e[t];let l,a,d=-1,c=0;for(;c<i.length&&(n.lastIndex=c,a=n.exec(i),null!==a);)c=n.lastIndex,n===H?"!--"===a[1]?n=D:void 0!==a[1]?n=j:void 0!==a[2]?(N.test(a[2])&&(s=RegExp("</"+a[2],"g")),n=U):void 0!==a[3]&&(n=U):n===U?">"===a[0]?(n=s??H,d=-1):void 0===a[1]?d=-2:(d=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?U:'"'===a[3]?B:z):n===B||n===z?n=U:n===D||n===j?n=H:(n=U,s=void 0);const h=n===U&&e[t+1].startsWith("/>")?" ":"";r+=n===H?i+S:d>=0?(o.push(l),i.slice(0,d)+R+i.slice(d)+E+h):i+E+(-2===d?t:h)}return[W(e,r+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),o]};class Z{constructor({strings:e,_$litType$:t},i){let o;this.parts=[];let s=0,r=0;const n=e.length-1,l=this.parts,[a,d]=J(e,t);if(this.el=Z.createElement(a,i),I.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(o=I.nextNode())&&l.length<n;){if(1===o.nodeType){if(o.hasAttributes())for(const e of o.getAttributeNames())if(e.endsWith(R)){const t=d[r++],i=o.getAttribute(e).split(E),n=/([.?@])?(.*)/.exec(t);l.push({type:1,index:s,name:n[2],strings:i,ctor:"."===n[1]?ee:"?"===n[1]?te:"@"===n[1]?ie:Y}),o.removeAttribute(e)}else e.startsWith(E)&&(l.push({type:6,index:s}),o.removeAttribute(e));if(N.test(o.tagName)){const e=o.textContent.split(E),t=e.length-1;if(t>0){o.textContent=k?k.emptyScript:"";for(let i=0;i<t;i++)o.append(e[i],T()),I.nextNode(),l.push({type:2,index:++s});o.append(e[t],T())}}}else if(8===o.nodeType)if(o.data===C)l.push({type:2,index:s});else{let e=-1;for(;-1!==(e=o.data.indexOf(E,e+1));)l.push({type:7,index:s}),e+=E.length-1}s++}}static createElement(e,t){const i=P.createElement("template");return i.innerHTML=e,i}}function G(e,t,i=e,o){if(t===F)return t;let s=void 0!==o?i._$Co?.[o]:i._$Cl;const r=K(t)?void 0:t._$litDirective$;return s?.constructor!==r&&(s?._$AO?.(!1),void 0===r?s=void 0:(s=new r(e),s._$AT(e,i,o)),void 0!==o?(i._$Co??=[])[o]=s:i._$Cl=s),void 0!==s&&(t=G(e,s._$AS(e,t.values),s,o)),t}class Q{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,o=(e?.creationScope??P).importNode(t,!0);I.currentNode=o;let s=I.nextNode(),r=0,n=0,l=i[0];for(;void 0!==l;){if(r===l.index){let t;2===l.type?t=new X(s,s.nextSibling,this,e):1===l.type?t=new l.ctor(s,l.name,l.strings,this,e):6===l.type&&(t=new oe(s,this,e)),this._$AV.push(t),l=i[++n]}r!==l?.index&&(s=I.nextNode(),r++)}return I.currentNode=P,o}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class X{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,o){this.type=2,this._$AH=V,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=G(this,e,t),K(e)?e===V||null==e||""===e?(this._$AH!==V&&this._$AR(),this._$AH=V):e!==this._$AH&&e!==F&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>O(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==V&&K(this._$AH)?this._$AA.nextSibling.data=e:this.T(P.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,o="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=Z.createElement(W(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===o)this._$AH.p(t);else{const e=new Q(o,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=q.get(e.strings);return void 0===t&&q.set(e.strings,t=new Z(e)),t}k(e){O(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,o=0;for(const s of e)o===t.length?t.push(i=new X(this.O(T()),this.O(T()),this,this.options)):i=t[o],i._$AI(s),o++;o<t.length&&(this._$AR(i&&i._$AB.nextSibling,o),t.length=o)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class Y{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,o,s){this.type=1,this._$AH=V,this._$AN=void 0,this.element=e,this.name=t,this._$AM=o,this.options=s,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=V}_$AI(e,t=this,i,o){const s=this.strings;let r=!1;if(void 0===s)e=G(this,e,t,0),r=!K(e)||e!==this._$AH&&e!==F,r&&(this._$AH=e);else{const o=e;let n,l;for(e=s[0],n=0;n<s.length-1;n++)l=G(this,o[i+n],t,n),l===F&&(l=this._$AH[n]),r||=!K(l)||l!==this._$AH[n],l===V?e=V:e!==V&&(e+=(l??"")+s[n+1]),this._$AH[n]=l}r&&!o&&this.j(e)}j(e){e===V?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class ee extends Y{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===V?void 0:e}}class te extends Y{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==V)}}class ie extends Y{constructor(e,t,i,o,s){super(e,t,i,o,s),this.type=5}_$AI(e,t=this){if((e=G(this,e,t,0)??V)===F)return;const i=this._$AH,o=e===V&&i!==V||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,s=e!==V&&(i===V||o);o&&this.element.removeEventListener(this.name,this,i),s&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class oe{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){G(this,e)}}const se=w.litHtmlPolyfillSupport;se?.(Z,X),(w.litHtmlVersions??=[]).push("3.3.1");const re=globalThis;
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */let ne=class extends x{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=((e,t,i)=>{const o=i?.renderBefore??t;let s=o._$litPart$;if(void 0===s){const e=i?.renderBefore??null;o._$litPart$=s=new X(t.insertBefore(T(),e),e,void 0,i??{})}return s._$AI(e),s})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return F}};ne._$litElement$=!0,ne.finalized=!0,re.litElementHydrateSupport?.({LitElement:ne});const le=re.litElementPolyfillSupport;le?.({LitElement:ne}),(re.litElementVersions??=[]).push("4.2.1");
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+const ae=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)})):customElements.define(e,t)}
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */,de={attribute:!0,type:String,converter:m,reflect:!1,hasChanged:_},ce=(e=de,t,i)=>{const{kind:o,metadata:s}=i;let r=globalThis.litPropertyMetadata.get(s);if(void 0===r&&globalThis.litPropertyMetadata.set(s,r=new Map),"setter"===o&&((e=Object.create(e)).wrapped=!0),r.set(i.name,e),"accessor"===o){const{name:o}=i;return{set(i){const s=t.get.call(this);t.set.call(this,i),this.requestUpdate(o,s,e)},init(t){return void 0!==t&&this.C(o,void 0,e,t),t}}}if("setter"===o){const{name:o}=i;return function(i){const s=this[o];t.call(this,i),this.requestUpdate(o,s,e)}}throw Error("Unsupported decorator location: "+o)};function he(e){return(t,i)=>"object"==typeof i?ce(e,t,i):((e,t,i)=>{const o=t.hasOwnProperty(i);return t.constructor.createProperty(i,e),o?Object.getOwnPropertyDescriptor(t,i):void 0})(e,t,i)
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */}function pe(e){return he({...e,state:!0,attribute:!1})}
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */var ue=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};e.KRAccordion=class extends ne{constructor(){super(...arguments),this.header="",this.expanded=!1}toggle(){this.expanded=!this.expanded}render(){return L`
+      <div class="header" @click=${this.toggle}>
+        <span class="header__title">${this.header}</span>
+        <svg class="header__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M6 9l6 6 6-6"/>
+        </svg>
+      </div>
+      <div class="content">
+        <div class="content__inner">
+          <div class="content__body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `}},e.KRAccordion.styles=n`
+    :host {
+      display: block;
+      margin-bottom: 16px;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: #f7f8f9;
+      border-radius: 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .header__title {
+      font-size: 15px;
+      font-weight: 600;
+      color: #111827;
+    }
+
+    .header__icon {
+      width: 20px;
+      height: 20px;
+      color: #9ca3af;
+      transition: transform 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    :host([expanded]) .header__icon {
+      transform: rotate(180deg);
+    }
+
+    .content {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 0.2s ease;
+    }
+
+    :host([expanded]) .content {
+      grid-template-rows: 1fr;
+    }
+
+    .content__inner {
+      overflow: hidden;
+    }
+
+    .content__body {
+      padding: 16px 16px 8px 16px;
+    }
+  `,ue([he({type:String})],e.KRAccordion.prototype,"header",void 0),ue([he({type:Boolean,reflect:!0})],e.KRAccordion.prototype,"expanded",void 0),e.KRAccordion=ue([ae("kr-accordion")],e.KRAccordion);
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+const fe=1,ge=2,be=3,ve=4,ye=e=>(...t)=>({_$litDirective$:e,values:t});class me{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,i){this._$Ct=e,this._$AM=t,this._$Ci=i}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}
+/**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */const _e=ye(class extends me{constructor(e){if(super(e),e.type!==fe||"class"!==e.name||e.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter((t=>e[t])).join(" ")+" "}update(e,[t]){if(void 0===this.st){this.st=new Set,void 0!==e.strings&&(this.nt=new Set(e.strings.join(" ").split(/\s/).filter((e=>""!==e))));for(const e in t)t[e]&&!this.nt?.has(e)&&this.st.add(e);return this.render(t)}const i=e.element.classList;for(const e of this.st)e in t||(i.remove(e),this.st.delete(e));for(const e in t){const o=!!t[e];o===this.st.has(e)||this.nt?.has(e)||(o?(i.add(e),this.st.add(e)):(i.remove(e),this.st.delete(e)))}return F}});var $e=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};e.KRAlert=class extends ne{constructor(){super(...arguments),this.type="info",this.dismissible=!1,this.visible=!0}_handleDismiss(){this.visible=!1,this.dispatchEvent(new CustomEvent("dismiss",{bubbles:!0,composed:!0}))}render(){const e={info:L`<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`,success:L`<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`,warning:L`<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>`,error:L`<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>`};return L`
+      <div
+        class=${_e({alert:!0,["alert--"+this.type]:!0,"alert--hidden":!this.visible})}
+        role="alert"
+      >
+        ${e[this.type]}
+        <div class="content">
+          ${this.header?L`<h4 class="header">${this.header}</h4>`:V}
+          <div class="message">
+            <slot></slot>
+          </div>
+        </div>
+        ${this.dismissible?L`
+              <button
+                class="dismiss"
+                type="button"
+                aria-label="Dismiss alert"
+                @click=${this._handleDismiss}
+              >
+                <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
+                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+                </svg>
+              </button>
+            `:V}
+      </div>
+    `}},e.KRAlert.styles=n`
+    :host {
+      display: block;
+    }
+
+    .alert {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      border-radius: 8px;
+      border-left: 4px solid;
+    }
+
+    .alert--hidden {
+      display: none;
+    }
+      
+    /* Variants */
+    .alert--info {
+      background-color: #eff6ff;
+      border-left-color: #3b82f6;
+    }
+
+    .alert--info .icon {
+      color: #2563eb;
+    }
+
+    .alert--success {
+      background-color: #f0fdf4;
+      border-left-color: #22c55e;
+    }
+
+    .alert--success .icon {
+      color: #16a34a;
+    }
+
+    .alert--warning {
+      background-color: #fffbeb;
+      border-left-color: #f59e0b;
+    }
+
+    .alert--warning .icon {
+      color: #d97706;
+    }
+
+    .alert--error {
+      background-color: #fef2f2;
+      border-left-color: #ef4444;
+    }
+
+    .alert--error .icon {
+      color: #dc2626;
+    }
+
+    .icon {
+      flex-shrink: 0;
+      width: 20px;
+      height: 20px;
+    }
+
+    .content {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .header {
+      font-size: 14px;
+      font-weight: 600;
+      color: #111827;
+      margin: 0;
+    }
+
+    .message {
+      font-size: 14px;
+      color: #374151;
+      margin: 0;
+    }
+
+    .dismiss {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: 4px;
+      color: #6b7280;
+      cursor: pointer;
+      transition: background 0.15s ease, color 0.15s ease;
+    }
+
+    .dismiss:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+      color: #374151;
+    }
+
+    .dismiss:focus-visible {
+      outline: 2px solid #3b82f6;
+      outline-offset: 2px;
+    }
+  `,$e([he({type:String})],e.KRAlert.prototype,"type",void 0),$e([he({type:String})],e.KRAlert.prototype,"header",void 0),$e([he({type:Boolean})],e.KRAlert.prototype,"dismissible",void 0),$e([he({type:Boolean})],e.KRAlert.prototype,"visible",void 0),e.KRAlert=$e([ae("kr-alert")],e.KRAlert);var xe=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};e.KRButton=class extends ne{constructor(){super(...arguments),this.variant="primary",this.size="medium",this.disabled=!1}render(){const e="medium"!==this.size?this.size:"";return L`
+      <button
+        part="button"
+        class="${this.variant} ${e}"
+        ?disabled=${this.disabled}
+      >
+        <slot></slot>
+      </button>
+    `}},e.KRButton.styles=n`
+    :host {
+      display: inline-block;
+    }
+
+    button {
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: 0.01em;
+      padding: 0 22px;
+      height: 36px;
+      line-height: 36px;
+      border: none;
+      border-radius: 20px;
+      cursor: pointer;
+      transition: background 0.15s ease;
+    }
+
+    button:active:not(:disabled) {
+      transform: scale(0.98);
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Variants */
+    button.primary {
+      background: #163052;
+      color: white;
+    }
+
+    button.primary:hover:not(:disabled) {
+      background: #0e1f35;
+    }
+
+    button.secondary {
+      background: #f3f4f6;
+      color: #374151;
+    }
+
+    button.secondary:hover:not(:disabled) {
+      background: #e5e7eb;
+    }
+
+    button.outline {
+      background: transparent;
+      border: 1px solid #d1d5db;
+      color: #374151;
+      box-shadow: none;
+    }
+
+    button.outline:hover:not(:disabled) {
+      background: #f9fafb;
+      border-color: #9ca3af;
+      box-shadow: none;
+    }
+
+    /* Sizes */
+    button.small {
+      font-size: 0.75rem;
+      height: 28px;
+      line-height: 28px;
+      padding: 0 10px;
+    }
+
+    button.large {
+      font-size: 1rem;
+      height: 44px;
+      line-height: 44px;
+      padding: 0 24px;
+    }
+  `,xe([he({type:String})],e.KRButton.prototype,"variant",void 0),xe([he({type:String})],e.KRButton.prototype,"size",void 0),xe([he({type:Boolean})],e.KRButton.prototype,"disabled",void 0),e.KRButton=xe([ae("kr-button")],e.KRButton);
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+class we extends me{constructor(e){if(super(e),this.it=V,e.type!==ge)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===V||null==e)return this._t=void 0,this.it=e;if(e===F)return e;if("string"!=typeof e)throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;const t=[e];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}}we.directiveName="unsafeHTML",we.resultType=1;const ke=ye(we);var Ae=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};e.KRCodeDemo=class extends ne{constructor(){super(...arguments),this.language="html",this.code="",this.activeTab="preview",this.copied=!1}setTab(e){this.activeTab=e}getHighlightedCode(){return this.code?window.Prism&&window.Prism.languages[this.language]?window.Prism.highlight(this.code,window.Prism.languages[this.language],this.language):this.escapeHtml(this.code):""}escapeHtml(e){const t=document.createElement("div");return t.textContent=e,t.innerHTML}async copyCode(){if(this.code)try{await navigator.clipboard.writeText(this.code),this.copied=!0,setTimeout((()=>{this.copied=!1}),2e3)}catch(e){console.error("Failed to copy code:",e)}}render(){return L`
+      <div class="tabs">
+        <button
+          class=${_e({tab:!0,"tab--active":"preview"===this.activeTab})}
+          @click=${()=>this.setTab("preview")}
+        >
+          Preview
+        </button>
+        <button
+          class=${_e({tab:!0,"tab--active":"code"===this.activeTab})}
+          @click=${()=>this.setTab("code")}
+        >
+          Code
+        </button>
+      </div>
+
+      <div class=${_e({panel:!0,"panel--active":"preview"===this.activeTab,preview:!0})}>
+        <slot name="preview"></slot>
+      </div>
+
+      <div class=${_e({panel:!0,"panel--active":"code"===this.activeTab,"code-container":!0})}>
+        <button
+          class=${_e({"copy-btn":!0,"copy-btn--copied":this.copied})}
+          @click=${this.copyCode}
+        >
+          ${this.copied?"Copied!":"Copy"}
+        </button>
+        <pre class="code"><code>${ke(this.getHighlightedCode())}</code></pre>
+      </div>
+
+    `}},e.KRCodeDemo.styles=n`
+    :host {
+      display: block;
+      border: 1px solid #e9ecef;
+      border-radius: 8px;
+      overflow: hidden;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    .tabs {
+      display: flex;
+      background: #f8f9fa;
+      border-bottom: 1px solid #e9ecef;
+    }
+
+    .tab {
+      padding: 10px 20px;
+      background: none;
+      border: none;
+      color: #6c757d;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      position: relative;
+      transition: color 0.15s;
+    }
+
+    .tab:hover {
+      color: #495057;
+    }
+
+    .tab--active {
+      color: #1a1a2e;
+    }
+
+    .tab--active::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: #4f46e5;
+    }
+
+    .panel {
+      display: none;
+    }
+
+    .panel--active {
+      display: block;
+    }
+
+    .preview {
+      padding: 24px;
+      background: #ffffff;
+    }
+
+    .code-container {
+      position: relative;
+    }
+
+    .code {
+      margin: 0;
+      padding: 20px;
+      background: #1e1e2e;
+      overflow-x: auto;
+      font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
+      font-size: 13px;
+      line-height: 1.6;
+      color: #cdd6f4;
+    }
+
+    .code code {
+      font-family: inherit;
+    }
+
+    .copy-btn {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      padding: 6px 12px;
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 12px;
+      font-family: inherit;
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+    }
+
+    .copy-btn:hover {
+      background: rgba(255, 255, 255, 0.15);
+      color: white;
+    }
+
+    .copy-btn--copied {
+      background: rgba(34, 197, 94, 0.2);
+      border-color: rgba(34, 197, 94, 0.3);
+      color: #4ade80;
+    }
+
+    /* Prism.js theme overrides for dark mode */
+    .code .token.comment,
+    .code .token.prolog,
+    .code .token.doctype,
+    .code .token.cdata {
+      color: #6c7086;
+    }
+
+    .code .token.punctuation {
+      color: #9399b2;
+    }
+
+    .code .token.property,
+    .code .token.tag,
+    .code .token.boolean,
+    .code .token.number,
+    .code .token.constant,
+    .code .token.symbol,
+    .code .token.deleted {
+      color: #f38ba8;
+    }
+
+    .code .token.selector,
+    .code .token.attr-name,
+    .code .token.string,
+    .code .token.char,
+    .code .token.builtin,
+    .code .token.inserted {
+      color: #a6e3a1;
+    }
+
+    .code .token.operator,
+    .code .token.entity,
+    .code .token.url,
+    .code .language-css .token.string,
+    .code .style .token.string {
+      color: #94e2d5;
+    }
+
+    .code .token.atrule,
+    .code .token.attr-value,
+    .code .token.keyword {
+      color: #cba6f7;
+    }
+
+    .code .token.function,
+    .code .token.class-name {
+      color: #89b4fa;
+    }
+
+    .code .token.regex,
+    .code .token.important,
+    .code .token.variable {
+      color: #fab387;
+    }
+  `,Ae([he({type:String})],e.KRCodeDemo.prototype,"language",void 0),Ae([he({type:String})],e.KRCodeDemo.prototype,"code",void 0),Ae([pe()],e.KRCodeDemo.prototype,"activeTab",void 0),Ae([pe()],e.KRCodeDemo.prototype,"copied",void 0),e.KRCodeDemo=Ae([ae("kr-code-demo")],e.KRCodeDemo);var Re=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};e.KRContextMenu=class extends ne{constructor(){super(...arguments),this.items=[],this.resolvePromise=null,this.boundHandleOutsideClick=this.handleOutsideClick.bind(this),this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static async open(e){const t=document.querySelector("kr-context-menu");t&&t.remove();const i=document.createElement("kr-context-menu");return document.body.appendChild(i),i.show(e)}async show(e){this.items=e.items,this.style.left=`${e.x}px`,this.style.top=`${e.y}px`,await this.updateComplete;const t=this.getBoundingClientRect();return t.right>window.innerWidth&&(this.style.left=e.x-t.width+"px"),t.bottom>window.innerHeight&&(this.style.top=e.y-t.height+"px"),requestAnimationFrame((()=>{document.addEventListener("click",this.boundHandleOutsideClick),document.addEventListener("contextmenu",this.boundHandleOutsideClick),document.addEventListener("keydown",this.boundHandleKeyDown)})),new Promise((e=>{this.resolvePromise=e}))}handleOutsideClick(e){this.contains(e.target)||this.close(null)}handleKeyDown(e){"Escape"===e.key&&this.close(null)}handleItemClick(e){e.disabled||e.divider||this.close(e)}close(e){document.removeEventListener("click",this.boundHandleOutsideClick),document.removeEventListener("contextmenu",this.boundHandleOutsideClick),document.removeEventListener("keydown",this.boundHandleKeyDown),this.resolvePromise&&(this.resolvePromise(e),this.resolvePromise=null),this.remove()}render(){return L`
+      <div class="menu">
+        ${this.items.map((e=>e.divider?L`<div class="menu__divider"></div>`:L`
+              <button
+                class="menu__item"
+                ?disabled=${e.disabled}
+                @click=${()=>this.handleItemClick(e)}
+              >
+                ${e.icon?L`<span class="menu__item-icon">${e.icon}</span>`:null}
+                ${e.label}
+              </button>
+            `))}
+      </div>
+    `}},e.KRContextMenu.styles=n`
+    :host {
+      position: fixed;
+      z-index: 10000;
+    }
+
+    .menu {
+      background: #1a1a2e;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      padding: 4px;
+      min-width: 180px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    }
+
+    .menu__item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+      padding: 10px 12px;
+      background: none;
+      border: none;
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 13px;
+      font-family: inherit;
+      text-align: left;
+      cursor: pointer;
+      border-radius: 6px;
+      transition: background 0.15s ease;
+    }
+
+    .menu__item:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.05);
+      color: #ffffff;
+    }
+
+    .menu__item:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .menu__item-icon {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .menu__divider {
+      height: 1px;
+      background: rgba(255, 255, 255, 0.1);
+      margin: 4px 0;
+    }
+  `,Re([pe()],e.KRContextMenu.prototype,"items",void 0),e.KRContextMenu=Re([ae("kr-context-menu")],e.KRContextMenu);var Ee=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};class Ce{constructor(){this.resolvePromise=null,this.dialogElement=null,this.promise=new Promise((e=>{this.resolvePromise=e}))}setDialogElement(e){this.dialogElement=e}close(e){this.resolvePromise&&(this.resolvePromise(e),this.resolvePromise=null),this.dialogElement?.remove()}afterClosed(){return this.promise}}e.KRDialog=class extends ne{constructor(){super(...arguments),this.contentElement=null,this.dialogRef=null,this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static open(e,t){const i=document.querySelector("kr-dialog");i&&i.remove();const o=new Ce,s=document.createElement("kr-dialog");o.setDialogElement(s),s.dialogRef=o;const r=new e;return r.dialogRef=o,t?.data&&(r.data=t.data),s.contentElement=r,document.body.appendChild(s),document.addEventListener("keydown",s.boundHandleKeyDown),o}handleKeyDown(e){"Escape"===e.key&&this.dialogRef?.close(void 0)}handleBackdropClick(e){e.target.classList.contains("backdrop")&&this.dialogRef?.close(void 0)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.boundHandleKeyDown)}render(){return L`
+      <div class="backdrop" @click=${this.handleBackdropClick}></div>
+      <div class="dialog">
+        ${this.contentElement}
+      </div>
+    `}},e.KRDialog.styles=n`
+    :host {
+      position: fixed;
+      inset: 0;
+      z-index: 10000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .backdrop {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    .dialog {
+      position: relative;
+      background: #1a1a2e;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 12px;
+      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+      max-height: 90vh;
+      overflow: auto;
+    }
+  `,Ee([pe()],e.KRDialog.prototype,"contentElement",void 0),e.KRDialog=Ee([ae("kr-dialog")],e.KRDialog);
+/**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+const Se={},Pe=ye(class extends me{constructor(e){if(super(e),e.type!==be&&e.type!==fe&&e.type!==ve)throw Error("The `live` directive is not allowed on child or event bindings");if(!(e=>void 0===e.strings)(e))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[t]){if(t===F||t===V)return t;const i=e.element,o=e.name;if(e.type===be){if(t===i[o])return F}else if(e.type===ve){if(!!t===i.hasAttribute(o))return F}else if(e.type===fe&&i.getAttribute(o)===t+"")return F;return((e,t=Se)=>{e._$AH=t;
+/**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */})(e),t}});var Te=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};e.KRTextField=class extends ne{constructor(){super(),this.label="",this.name="",this.value="",this.placeholder="",this.type="text",this.required=!1,this.disabled=!1,this.readonly=!1,this.autocomplete="",this.hint="",this._touched=!1,this._dirty=!1,this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value="",this._touched=!1,this._dirty=!1,this._internals.setFormValue(""),this._internals.setValidity({})}formStateRestoreCallback(e){this.value=e}_handleInput(e){this.value=e.target.value,this._dirty=!0,this._internals.setFormValue(this.value),this._internals.setValidity(this._input.validity,this._input.validationMessage,this._input)}_handleChange(e){this.value=e.target.value,this._internals.setFormValue(this.value)}_handleBlur(){this._touched=!0,this._internals.setValidity(this._input.validity,this._input.validationMessage,this._input)}render(){let e="";return this._touched&&this._input&&!this._input.validity.valid&&(e=this._input.validationMessage),L`
+      <div class="wrapper">
+        ${this.label?L`
+              <label for="input">
+                ${this.label}
+                ${this.required?L`<span class="required" aria-hidden="true">*</span>`:""}
+              </label>
+            `:""}
+        <input
+          id="input"
+          type=${this.type}
+          name=${this.name}
+          .value=${Pe(this.value)}
+          placeholder=${this.placeholder}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          minlength=${this.minlength??""}
+          maxlength=${this.maxlength??""}
+          pattern=${this.pattern??""}
+          autocomplete=${this.autocomplete}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+          @blur=${this._handleBlur}
+        />
+        ${e?L`<div class="validation-message">${e}</div>`:this.hint?L`<div class="hint">${this.hint}</div>`:""}
+      </div>
+    `}focus(){this._input?.focus()}blur(){this._input?.blur()}select(){this._input?.select()}},e.KRTextField.styles=n`
+    :host {
+      display: block;
+      font-family: inherit;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    label {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--kr-text-field-label-color, #374151);
+    }
+
+    .required {
+      color: var(--kr-text-field-required-color, #ef4444);
+      margin-left: 0.125rem;
+    }
+
+    input {
+      font-family: inherit;
+      font-size: 14px;
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--kr-text-field-border-color, #d1d5db);
+      border-radius: 4px;
+      background-color: var(--kr-text-field-bg, #fff);
+      color: var(--kr-text-field-color, #111827);
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    input:focus {
+      outline: none;
+      border-color: var(--kr-text-field-focus-border-color, #2563eb);
+      box-shadow: 0 0 0 3px var(--kr-text-field-focus-ring-color, rgba(37, 99, 235, 0.1));
+    }
+
+    input:disabled {
+      background-color: var(--kr-text-field-disabled-bg, #f3f4f6);
+      color: var(--kr-text-field-disabled-color, #9ca3af);
+      cursor: not-allowed;
+    }
+
+    input::placeholder {
+      color: var(--kr-text-field-placeholder-color, #9ca3af);
+    }
+
+    :host(:invalid) input {
+      border-color: var(--kr-text-field-error-border-color, #ef4444);
+    }
+
+    :host(:invalid) input:focus {
+      box-shadow: 0 0 0 3px var(--kr-text-field-error-ring-color, rgba(239, 68, 68, 0.1));
+    }
+
+    .validation-message {
+      font-size: 0.75rem;
+      color: var(--kr-text-field-error-color, #ef4444);
+    }
+
+    .hint {
+      font-size: 0.75rem;
+      color: var(--kr-text-field-helper-color, #6b7280);
+    }
+  `,e.KRTextField.formAssociated=!0,Te([he({type:String})],e.KRTextField.prototype,"label",void 0),Te([he({type:String})],e.KRTextField.prototype,"name",void 0),Te([he({type:String})],e.KRTextField.prototype,"value",void 0),Te([he({type:String})],e.KRTextField.prototype,"placeholder",void 0),Te([he({type:String})],e.KRTextField.prototype,"type",void 0),Te([he({type:Boolean})],e.KRTextField.prototype,"required",void 0),Te([he({type:Boolean})],e.KRTextField.prototype,"disabled",void 0),Te([he({type:Boolean})],e.KRTextField.prototype,"readonly",void 0),Te([he({type:Number})],e.KRTextField.prototype,"minlength",void 0),Te([he({type:Number})],e.KRTextField.prototype,"maxlength",void 0),Te([he({type:String})],e.KRTextField.prototype,"pattern",void 0),Te([he({type:String})],e.KRTextField.prototype,"autocomplete",void 0),Te([he({type:String})],e.KRTextField.prototype,"hint",void 0),Te([
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+function(e){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,i),i))(t,i,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}("input")],e.KRTextField.prototype,"_input",void 0),Te([pe()],e.KRTextField.prototype,"_touched",void 0),Te([pe()],e.KRTextField.prototype,"_dirty",void 0),e.KRTextField=Te([ae("kr-text-field")],e.KRTextField),e.DialogRef=Ce})),function(e){Object.keys(e).forEach((function(t){t.startsWith("KR")&&"function"==typeof e[t]&&(e[t.slice(2)]=e[t],delete e[t])}))}(kr);
+//# sourceMappingURL=krubble.umd.min.js.map