@kodaris/krubble-components 1.0.3 → 1.0.5

package/custom-elements.json

@@ -130,7 +130,7 @@
         {
           "kind": "variable",
           "name": "KRButton",
-          "default": "class KRButton extends i$1 { constructor() { super(...arguments); /** * The button variant style */ this.variant = 'primary'; /** * The button size */ this.size = 'medium'; /** * Whether the button is disabled */ this.disabled = false; } render() { const sizeClass = this.size !== 'medium' ? this.size : ''; return b ` <button part=\"button\" class=\"${this.variant} ${sizeClass}\" ?disabled=${this.disabled} > <slot></slot> </button> `; } }",
+          "default": "class KRButton extends i$1 { constructor() { super(...arguments); /** * The button variant (shape) */ this.variant = 'flat'; /** * The button color */ this.color = 'primary'; /** * The button size */ this.size = 'medium'; /** * Whether the button is disabled */ this.disabled = false; this._state = 'idle'; this._stateText = ''; this._handleKeydown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); } }; } connectedCallback() { super.connectedCallback(); this.setAttribute('role', 'button'); this.setAttribute('tabindex', '0'); this.addEventListener('keydown', this._handleKeydown); } disconnectedCallback() { super.disconnectedCallback(); this.removeEventListener('keydown', this._handleKeydown); } /** * Shows a loading spinner and disables the button. */ showLoading() { this._clearStateTimeout(); this._state = 'loading'; this._stateText = ''; } /** * Shows a success state with optional custom text. * @param text - Text to display (default: \"Saved\") * @param duration - Duration in ms before auto-reset (default: 2000) */ showSuccess(text = 'Success', duration = 2000) { this._clearStateTimeout(); this._state = 'success'; this._stateText = text; this._stateTimeout = window.setTimeout(() => this.reset(), duration); } /** * Shows an error state with optional custom text. * @param text - Text to display (default: \"Error\") * @param duration - Duration in ms before auto-reset (default: 2000) */ showError(text = 'Error', duration = 2000) { this._clearStateTimeout(); this._state = 'error'; this._stateText = text; this._stateTimeout = window.setTimeout(() => this.reset(), duration); } /** * Resets the button to its idle state. */ reset() { this._clearStateTimeout(); this._state = 'idle'; this._stateText = ''; } _clearStateTimeout() { if (this._stateTimeout) { clearTimeout(this._stateTimeout); this._stateTimeout = undefined; } } updated(changedProperties) { // Reflect state classes to host this.classList.toggle('kr-button--loading', this._state === 'loading'); this.classList.toggle('kr-button--success', this._state === 'success'); this.classList.toggle('kr-button--error', this._state === 'error'); this.classList.toggle(`kr-button--${this.variant}`, true); this.classList.toggle(`kr-button--${this.color}`, true); this.classList.toggle('kr-button--small', this.size === 'small'); this.classList.toggle('kr-button--large', this.size === 'large'); } render() { return b ` <slot></slot> ${this._state !== 'idle' ? b `<span class=\"state-overlay\"> ${this._state === 'loading' ? b `<span class=\"spinner\"></span>` : this._stateText} </span>` : ''} `; } }",
           "description": "A customizable button component."
         },
         {
@@ -358,49 +358,49 @@
       "declarations": [
         {
           "kind": "variable",
-          "name": "e",
+          "name": "t",
           "default": "globalThis"
         },
         {
           "kind": "variable",
-          "name": "t"
+          "name": "e"
         },
         {
           "kind": "variable",
-          "name": "fe",
-          "default": "class extends ne{constructor(){super(...arguments),this.header=\"\",this.expanded=!1}toggle(){this.expanded=!this.expanded}render(){return V` <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> `}}"
+          "name": "ft",
+          "default": "class extends nt{constructor(){super(...arguments),this.header=\"\",this.expanded=!1}toggle(){this.expanded=!this.expanded}render(){return V` <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> `}}"
         },
         {
           "kind": "variable",
-          "name": "ke",
-          "default": "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:V`<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:V`<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:V`<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:V`<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 V` <div class=${$e({alert:!0,[\"alert--\"+this.type]:!0,\"alert--hidden\":!this.visible})} role=\"alert\" > ${e[this.type]} <div class=\"content\"> ${this.header?V`<h4 class=\"header\">${this.header}</h4>`:q} <div class=\"message\"> <slot></slot> </div> </div> ${this.dismissible?V` <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> `:q} </div> `}}"
+          "name": "kt",
+          "default": "class extends nt{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 t={info:V`<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:V`<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:V`<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:V`<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 V` <div class=${xt({alert:!0,[\"alert--\"+this.type]:!0,\"alert--hidden\":!this.visible})} role=\"alert\" > ${t[this.type]} <div class=\"content\"> ${this.header?V`<h4 class=\"header\">${this.header}</h4>`:q} <div class=\"message\"> <slot></slot> </div> </div> ${this.dismissible?V` <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> `:q} </div> `}}"
         },
         {
           "kind": "variable",
-          "name": "Ae",
-          "default": "class extends ne{constructor(){super(...arguments),this.variant=\"primary\",this.size=\"medium\",this.disabled=!1}render(){const e=\"medium\"!==this.size?this.size:\"\";return V` <button part=\"button\" class=\"${this.variant} ${e}\" ?disabled=${this.disabled} > <slot></slot> </button> `}}"
+          "name": "At",
+          "default": "class extends nt{constructor(){super(...arguments),this.variant=\"flat\",this.color=\"primary\",this.size=\"medium\",this.disabled=!1,this._state=\"idle\",this._stateText=\"\",this._handleKeydown=t=>{\"Enter\"!==t.key&&\" \"!==t.key||(t.preventDefault(),this.click())}}connectedCallback(){super.connectedCallback(),this.setAttribute(\"role\",\"button\"),this.setAttribute(\"tabindex\",\"0\"),this.addEventListener(\"keydown\",this._handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(\"keydown\",this._handleKeydown)}showLoading(){this._clearStateTimeout(),this._state=\"loading\",this._stateText=\"\"}showSuccess(t=\"Success\",e=2e3){this._clearStateTimeout(),this._state=\"success\",this._stateText=t,this._stateTimeout=window.setTimeout(()=>this.reset(),e)}showError(t=\"Error\",e=2e3){this._clearStateTimeout(),this._state=\"error\",this._stateText=t,this._stateTimeout=window.setTimeout(()=>this.reset(),e)}reset(){this._clearStateTimeout(),this._state=\"idle\",this._stateText=\"\"}_clearStateTimeout(){this._stateTimeout&&(clearTimeout(this._stateTimeout),this._stateTimeout=void 0)}updated(t){this.classList.toggle(\"kr-button--loading\",\"loading\"===this._state),this.classList.toggle(\"kr-button--success\",\"success\"===this._state),this.classList.toggle(\"kr-button--error\",\"error\"===this._state),this.classList.toggle(`kr-button--${this.variant}`,!0),this.classList.toggle(`kr-button--${this.color}`,!0),this.classList.toggle(\"kr-button--small\",\"small\"===this.size),this.classList.toggle(\"kr-button--large\",\"large\"===this.size)}render(){return V` <slot></slot> ${\"idle\"!==this._state?V`<span class=\"state-overlay\"> ${\"loading\"===this._state?V`<span class=\"spinner\"></span>`:this._stateText} </span>`:\"\"} `}}"
         },
         {
           "kind": "variable",
-          "name": "Pe",
-          "default": "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 V` <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>${Se(this.getHighlightedCode())}</code></pre> </div> `}}"
+          "name": "Pt",
+          "default": "class extends nt{constructor(){super(...arguments),this.language=\"html\",this.code=\"\",this.activeTab=\"preview\",this.copied=!1}setTab(t){this.activeTab=t}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(t){const e=document.createElement(\"div\");return e.textContent=t,e.innerHTML}async copyCode(){if(this.code)try{await navigator.clipboard.writeText(this.code),this.copied=!0,setTimeout(()=>{this.copied=!1},2e3)}catch(t){console.error(\"Failed to copy code:\",t)}}render(){return V` <div class=\"tabs\"> <button class=${xt({tab:!0,\"tab--active\":\"preview\"===this.activeTab})} @click=${()=>this.setTab(\"preview\")} > Preview </button> <button class=${xt({tab:!0,\"tab--active\":\"code\"===this.activeTab})} @click=${()=>this.setTab(\"code\")} > Code </button> </div> <div class=${xt({panel:!0,\"panel--active\":\"preview\"===this.activeTab,preview:!0})}> <slot name=\"preview\"></slot> </div> <div class=${xt({panel:!0,\"panel--active\":\"code\"===this.activeTab,\"code-container\":!0})}> <button class=${xt({\"copy-btn\":!0,\"copy-btn--copied\":this.copied})} @click=${this.copyCode} > ${this.copied?\"Copied!\":\"Copy\"} </button> <pre class=\"code\"><code>${St(this.getHighlightedCode())}</code></pre> </div> `}}"
         },
         {
           "kind": "variable",
-          "name": "Me",
-          "default": "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 V` <div class=\"menu\"> ${this.items.map(e=>e.divider?V`<div class=\"menu__divider\"></div>`:V` <button class=\"menu__item\" ?disabled=${e.disabled} @click=${()=>this.handleItemClick(e)} > ${e.icon?V`<span class=\"menu__item-icon\">${e.icon}</span>`:null} ${e.label} </button> `)} </div> `}}"
+          "name": "Ot",
+          "default": "class extends nt{constructor(){super(...arguments),this.items=[],this.resolvePromise=null,this.boundHandleOutsideClick=this.handleOutsideClick.bind(this),this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static async open(t){const e=document.querySelector(\"kr-context-menu\");e&&e.remove();const i=document.createElement(\"kr-context-menu\");return document.body.appendChild(i),i.show(t)}async show(t){this.items=t.items,this.style.left=`${t.x}px`,this.style.top=`${t.y}px`,await this.updateComplete;const e=this.getBoundingClientRect();return e.right>window.innerWidth&&(this.style.left=t.x-e.width+\"px\"),e.bottom>window.innerHeight&&(this.style.top=t.y-e.height+\"px\"),requestAnimationFrame(()=>{document.addEventListener(\"click\",this.boundHandleOutsideClick),document.addEventListener(\"contextmenu\",this.boundHandleOutsideClick),document.addEventListener(\"keydown\",this.boundHandleKeyDown)}),new Promise(t=>{this.resolvePromise=t})}handleOutsideClick(t){this.contains(t.target)||this.close(null)}handleKeyDown(t){\"Escape\"===t.key&&this.close(null)}handleItemClick(t){t.disabled||t.divider||this.close(t)}close(t){document.removeEventListener(\"click\",this.boundHandleOutsideClick),document.removeEventListener(\"contextmenu\",this.boundHandleOutsideClick),document.removeEventListener(\"keydown\",this.boundHandleKeyDown),this.resolvePromise&&(this.resolvePromise(t),this.resolvePromise=null),this.remove()}render(){return V` <div class=\"menu\"> ${this.items.map(t=>t.divider?V`<div class=\"menu__divider\"></div>`:V` <button class=\"menu__item\" ?disabled=${t.disabled} @click=${()=>this.handleItemClick(t)} > ${t.icon?V`<span class=\"menu__item-icon\">${t.icon}</span>`:null} ${t.label} </button> `)} </div> `}}"
         },
         {
           "kind": "class",
           "description": "",
-          "name": "Te",
+          "name": "Rt",
           "members": [
             {
               "kind": "method",
               "name": "setDialogElement",
               "parameters": [
                 {
-                  "name": "e"
+                  "name": "t"
                 }
               ]
             },
@@ -409,7 +409,7 @@
               "name": "close",
               "parameters": [
                 {
-                  "name": "e"
+                  "name": "t"
                 }
               ]
             },
@@ -436,39 +436,39 @@
             {
               "kind": "field",
               "name": "promise",
-              "default": "new Promise(e=>{this.resolvePromise=e})"
+              "default": "new Promise(t=>{this.resolvePromise=t})"
             }
           ]
         },
         {
           "kind": "variable",
-          "name": "ze",
-          "default": "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 Te,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 V` <div class=\"backdrop\" @click=${this.handleBackdropClick}></div> <div class=\"dialog\"> ${this.contentElement} </div> `}}"
+          "name": "zt",
+          "default": "class extends nt{constructor(){super(...arguments),this.contentElement=null,this.dialogRef=null,this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static open(t,e){const i=document.querySelector(\"kr-dialog\");i&&i.remove();const o=new Rt,s=document.createElement(\"kr-dialog\");o.setDialogElement(s),s.dialogRef=o;const r=new t;return r.dialogRef=o,e?.data&&(r.data=e.data),s.contentElement=r,document.body.appendChild(s),document.addEventListener(\"keydown\",s.boundHandleKeyDown),o}handleKeyDown(t){\"Escape\"===t.key&&this.dialogRef?.close(void 0)}handleBackdropClick(t){t.target.classList.contains(\"backdrop\")&&this.dialogRef?.close(void 0)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(\"keydown\",this.boundHandleKeyDown)}render(){return V` <div class=\"backdrop\" @click=${this.handleBackdropClick}></div> <div class=\"dialog\"> ${this.contentElement} </div> `}}"
         },
         {
           "kind": "variable",
-          "name": "Le"
+          "name": "jt"
         },
         {
           "kind": "variable",
-          "name": "Be",
-          "default": "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),V` <div class=\"wrapper\"> ${this.label?V` <label for=\"input\"> ${this.label} ${this.required?V`<span class=\"required\" aria-hidden=\"true\">*</span>`:\"\"} </label> `:\"\"} <input id=\"input\" type=${this.type} name=${this.name} .value=${De(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?V`<div class=\"validation-message\">${e}</div>`:this.hint?V`<div class=\"hint\">${this.hint}</div>`:\"\"} </div> `}focus(){this._input?.focus()}blur(){this._input?.blur()}select(){this._input?.select()}}"
+          "name": "Bt",
+          "default": "class extends nt{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(t){this.value=t}_handleInput(t){this.value=t.target.value,this._dirty=!0,this._internals.setFormValue(this.value),this._internals.setValidity(this._input.validity,this._input.validationMessage,this._input)}_handleChange(t){this.value=t.target.value,this._internals.setFormValue(this.value)}_handleBlur(){this._touched=!0,this._internals.setValidity(this._input.validity,this._input.validationMessage,this._input)}render(){let t=\"\";return this._touched&&this._input&&!this._input.validity.valid&&(t=this._input.validationMessage),V` <div class=\"wrapper\"> ${this.label?V` <label for=\"input\"> ${this.label} ${this.required?V`<span class=\"required\" aria-hidden=\"true\">*</span>`:\"\"} </label> `:\"\"} <input id=\"input\" type=${this.type} name=${this.name} .value=${Dt(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} /> ${t?V`<div class=\"validation-message\">${t}</div>`:this.hint?V`<div class=\"hint\">${this.hint}</div>`:\"\"} </div> `}focus(){this._input?.focus()}blur(){this._input?.blur()}select(){this._input?.select()}}"
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "e",
+          "name": "t",
           "declaration": {
-            "name": "t",
+            "name": "e",
             "module": "dist/krubble.bundled.min.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "e",
+          "name": "t",
           "declaration": {
-            "name": "t",
+            "name": "e",
             "module": "dist/krubble.bundled.min.js"
           }
         },
@@ -476,7 +476,7 @@
           "kind": "js",
           "name": "DialogRef",
           "declaration": {
-            "name": "Te",
+            "name": "Rt",
             "module": "dist/krubble.bundled.min.js"
           }
         },
@@ -484,7 +484,7 @@
           "kind": "js",
           "name": "KRAccordion",
           "declaration": {
-            "name": "fe",
+            "name": "ft",
             "module": "dist/krubble.bundled.min.js"
           }
         },
@@ -492,7 +492,7 @@
           "kind": "js",
           "name": "KRAlert",
           "declaration": {
-            "name": "ke",
+            "name": "kt",
             "module": "dist/krubble.bundled.min.js"
           }
         },
@@ -500,7 +500,7 @@
           "kind": "js",
           "name": "KRButton",
           "declaration": {
-            "name": "Ae",
+            "name": "At",
             "module": "dist/krubble.bundled.min.js"
           }
         },
@@ -508,7 +508,7 @@
           "kind": "js",
           "name": "KRCodeDemo",
           "declaration": {
-            "name": "Pe",
+            "name": "Pt",
             "module": "dist/krubble.bundled.min.js"
           }
         },
@@ -516,7 +516,7 @@
           "kind": "js",
           "name": "KRContextMenu",
           "declaration": {
-            "name": "Me",
+            "name": "Ot",
             "module": "dist/krubble.bundled.min.js"
           }
         },
@@ -524,7 +524,7 @@
           "kind": "js",
           "name": "KRDialog",
           "declaration": {
-            "name": "ze",
+            "name": "zt",
             "module": "dist/krubble.bundled.min.js"
           }
         },
@@ -532,7 +532,7 @@
           "kind": "js",
           "name": "KRSnackbar",
           "declaration": {
-            "name": "Le",
+            "name": "jt",
             "module": "dist/krubble.bundled.min.js"
           }
         },
@@ -540,7 +540,7 @@
           "kind": "js",
           "name": "KRTextField",
           "declaration": {
-            "name": "Be",
+            "name": "Bt",
             "module": "dist/krubble.bundled.min.js"
           }
         }
@@ -641,28 +641,28 @@
       "declarations": [
         {
           "kind": "variable",
-          "name": "t",
+          "name": "e",
           "default": "globalThis"
         },
         {
           "kind": "variable",
-          "name": "e"
+          "name": "t"
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "e",
+          "name": "t",
           "declaration": {
-            "name": "t",
+            "name": "e",
             "module": "dist/krubble.umd.min.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "e",
+          "name": "t",
           "declaration": {
-            "name": "t",
+            "name": "e",
             "module": "dist/krubble.umd.min.js"
           }
         }
@@ -942,7 +942,7 @@
         {
           "kind": "variable",
           "name": "KRButton",
-          "default": "class KRButton extends LitElement { constructor() { super(...arguments); /** * The button variant style */ this.variant = 'primary'; /** * The button size */ this.size = 'medium'; /** * Whether the button is disabled */ this.disabled = false; } render() { const sizeClass = this.size !== 'medium' ? this.size : ''; return html ` <button part=\"button\" class=\"${this.variant} ${sizeClass}\" ?disabled=${this.disabled} > <slot></slot> </button> `; } }",
+          "default": "class KRButton extends LitElement { constructor() { super(...arguments); /** * The button variant (shape) */ this.variant = 'flat'; /** * The button color */ this.color = 'primary'; /** * The button size */ this.size = 'medium'; /** * Whether the button is disabled */ this.disabled = false; this._state = 'idle'; this._stateText = ''; this._handleKeydown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); } }; } connectedCallback() { super.connectedCallback(); this.setAttribute('role', 'button'); this.setAttribute('tabindex', '0'); this.addEventListener('keydown', this._handleKeydown); } disconnectedCallback() { super.disconnectedCallback(); this.removeEventListener('keydown', this._handleKeydown); } /** * Shows a loading spinner and disables the button. */ showLoading() { this._clearStateTimeout(); this._state = 'loading'; this._stateText = ''; } /** * Shows a success state with optional custom text. * @param text - Text to display (default: \"Saved\") * @param duration - Duration in ms before auto-reset (default: 2000) */ showSuccess(text = 'Success', duration = 2000) { this._clearStateTimeout(); this._state = 'success'; this._stateText = text; this._stateTimeout = window.setTimeout(() => this.reset(), duration); } /** * Shows an error state with optional custom text. * @param text - Text to display (default: \"Error\") * @param duration - Duration in ms before auto-reset (default: 2000) */ showError(text = 'Error', duration = 2000) { this._clearStateTimeout(); this._state = 'error'; this._stateText = text; this._stateTimeout = window.setTimeout(() => this.reset(), duration); } /** * Resets the button to its idle state. */ reset() { this._clearStateTimeout(); this._state = 'idle'; this._stateText = ''; } _clearStateTimeout() { if (this._stateTimeout) { clearTimeout(this._stateTimeout); this._stateTimeout = undefined; } } updated(changedProperties) { // Reflect state classes to host this.classList.toggle('kr-button--loading', this._state === 'loading'); this.classList.toggle('kr-button--success', this._state === 'success'); this.classList.toggle('kr-button--error', this._state === 'error'); this.classList.toggle(`kr-button--${this.variant}`, true); this.classList.toggle(`kr-button--${this.color}`, true); this.classList.toggle('kr-button--small', this.size === 'small'); this.classList.toggle('kr-button--large', this.size === 'large'); } render() { return html ` <slot></slot> ${this._state !== 'idle' ? html `<span class=\"state-overlay\"> ${this._state === 'loading' ? html `<span class=\"spinner\"></span>` : this._stateText} </span>` : ''} `; } }",
           "description": "A customizable button component."
         }
       ],
@@ -1205,12 +1205,6 @@
           "kind": "class",
           "description": "A customizable button component.",
           "name": "KRButton",
-          "cssParts": [
-            {
-              "description": "The button element",
-              "name": "button"
-            }
-          ],
           "slots": [
             {
               "description": "The button content",
@@ -1222,11 +1216,23 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'primary' | 'secondary' | 'outline'"
+                "text": "'flat' | 'outline'"
+              },
+              "default": "'flat'",
+              "description": "The button variant (shape)",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "'primary' | 'secondary'"
               },
               "default": "'primary'",
-              "description": "The button variant style",
-              "attribute": "variant"
+              "description": "The button color",
+              "attribute": "color",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -1236,7 +1242,8 @@
               },
               "default": "'medium'",
               "description": "The button size",
-              "attribute": "size"
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -1246,7 +1253,88 @@
               },
               "default": "false",
               "description": "Whether the button is disabled",
-              "attribute": "disabled"
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_state",
+              "type": {
+                "text": "'idle' | 'loading' | 'success' | 'error'"
+              },
+              "privacy": "private",
+              "default": "'idle'"
+            },
+            {
+              "kind": "field",
+              "name": "_stateText",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_stateTimeout",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_handleKeydown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "showLoading",
+              "description": "Shows a loading spinner and disables the button."
+            },
+            {
+              "kind": "method",
+              "name": "showSuccess",
+              "parameters": [
+                {
+                  "name": "text",
+                  "default": "'Success'",
+                  "description": "Text to display (default: \"Saved\")"
+                },
+                {
+                  "name": "duration",
+                  "default": "2000",
+                  "description": "Duration in ms before auto-reset (default: 2000)"
+                }
+              ],
+              "description": "Shows a success state with optional custom text."
+            },
+            {
+              "kind": "method",
+              "name": "showError",
+              "parameters": [
+                {
+                  "name": "text",
+                  "default": "'Error'",
+                  "description": "Text to display (default: \"Error\")"
+                },
+                {
+                  "name": "duration",
+                  "default": "2000",
+                  "description": "Duration in ms before auto-reset (default: 2000)"
+                }
+              ],
+              "description": "Shows an error state with optional custom text."
+            },
+            {
+              "kind": "method",
+              "name": "reset",
+              "description": "Resets the button to its idle state."
+            },
+            {
+              "kind": "method",
+              "name": "_clearStateTimeout",
+              "privacy": "private"
             }
           ],
           "events": [
@@ -1259,12 +1347,21 @@
             {
               "name": "variant",
               "type": {
-                "text": "'primary' | 'secondary' | 'outline'"
+                "text": "'flat' | 'outline'"
               },
-              "default": "'primary'",
-              "description": "The button variant style",
+              "default": "'flat'",
+              "description": "The button variant (shape)",
               "fieldName": "variant"
             },
+            {
+              "name": "color",
+              "type": {
+                "text": "'primary' | 'secondary'"
+              },
+              "default": "'primary'",
+              "description": "The button color",
+              "fieldName": "color"
+            },
             {
               "name": "size",
               "type": {
@@ -1820,23 +1917,15 @@
                 }
               },
               "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The message to display"
-                },
                 {
                   "name": "options",
-                  "optional": true,
                   "type": {
                     "text": "KRSnackbarOptions"
                   },
-                  "description": "Optional configuration for type and duration"
+                  "description": "Configuration including message, optional title, type, and duration"
                 }
               ],
-              "description": "Show a snackbar with the given message and options."
+              "description": "Show a snackbar with the given options."
             },
             {
               "kind": "field",
@@ -1857,6 +1946,16 @@
               "description": "The snackbar type/severity. Controls the color scheme and icon.",
               "attribute": "type"
             },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional title to display above the message.",
+              "attribute": "title"
+            },
             {
               "kind": "field",
               "name": "message",
@@ -1907,6 +2006,15 @@
               "description": "The snackbar type/severity. Controls the color scheme and icon.",
               "fieldName": "type"
             },
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional title to display above the message.",
+              "fieldName": "title"
+            },
             {
               "name": "message",
               "type": {

package/dist/button/button.d.ts

@@ -3,15 +3,18 @@ import { LitElement } from 'lit';
  * A customizable button component.
  *
  * @slot - The button content
- * @csspart button - The button element
  * @fires click - Fired when the button is clicked
  */
 export declare class KRButton extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * The button variant style
+     * The button variant (shape)
      */
-    variant: 'primary' | 'secondary' | 'outline';
+    variant: 'flat' | 'outline';
+    /**
+     * The button color
+     */
+    color: 'primary' | 'secondary';
     /**
      * The button size
      */
@@ -20,6 +23,34 @@ export declare class KRButton extends LitElement {
      * Whether the button is disabled
      */
     disabled: boolean;
+    private _state;
+    private _stateText;
+    private _stateTimeout?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleKeydown;
+    /**
+     * Shows a loading spinner and disables the button.
+     */
+    showLoading(): void;
+    /**
+     * Shows a success state with optional custom text.
+     * @param text - Text to display (default: "Saved")
+     * @param duration - Duration in ms before auto-reset (default: 2000)
+     */
+    showSuccess(text?: string, duration?: number): void;
+    /**
+     * Shows an error state with optional custom text.
+     * @param text - Text to display (default: "Error")
+     * @param duration - Duration in ms before auto-reset (default: 2000)
+     */
+    showError(text?: string, duration?: number): void;
+    /**
+     * Resets the button to its idle state.
+     */
+    reset(): void;
+    private _clearStateTimeout;
+    protected updated(changedProperties: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;GAMG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BA0EpB;IAEF;;OAEG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAa;IAEzD;;OAEG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C;;OAEG;IAEH,QAAQ,UAAS;IAER,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAiJpB;IAEF;;OAEG;IAEH,OAAO,EAAE,MAAM,GAAG,SAAS,CAAU;IAErC;;OAEG;IAEH,KAAK,EAAE,SAAS,GAAG,WAAW,CAAa;IAE3C;;OAEG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C;;OAEG;IAEH,QAAQ,UAAS;IAGjB,OAAO,CAAC,MAAM,CAAoD;IAGlE,OAAO,CAAC,UAAU,CAAM;IAExB,OAAO,CAAC,aAAa,CAAC,CAAS;IAE/B,iBAAiB;IAOjB,oBAAoB;IAKpB,OAAO,CAAC,cAAc,CAKpB;IAEF;;OAEG;IACH,WAAW;IAMX;;;;OAIG;IACH,WAAW,CAAC,IAAI,SAAY,EAAE,QAAQ,SAAO;IAO7C;;;;OAIG;IACH,SAAS,CAAC,IAAI,SAAU,EAAE,QAAQ,SAAO;IAOzC;;OAEG;IACH,KAAK;IAML,OAAO,CAAC,kBAAkB;cAOP,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAWzD,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}