@kodaris/krubble-components 1.0.4 → 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."
         },
         {
@@ -373,27 +373,27 @@
         {
           "kind": "variable",
           "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=${$t({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> `}}"
+          "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": "At",
-          "default": "class extends nt{constructor(){super(...arguments),this.variant=\"primary\",this.size=\"medium\",this.disabled=!1}render(){const t=\"medium\"!==this.size?this.size:\"\";return V` <button part=\"button\" class=\"${this.variant} ${t}\" ?disabled=${this.disabled} > <slot></slot> </button> `}}"
+          "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": "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=${$t({tab:!0,\"tab--active\":\"preview\"===this.activeTab})} @click=${()=>this.setTab(\"preview\")} > Preview </button> <button class=${$t({tab:!0,\"tab--active\":\"code\"===this.activeTab})} @click=${()=>this.setTab(\"code\")} > Code </button> </div> <div class=${$t({panel:!0,\"panel--active\":\"preview\"===this.activeTab,preview:!0})}> <slot name=\"preview\"></slot> </div> <div class=${$t({panel:!0,\"panel--active\":\"code\"===this.activeTab,\"code-container\":!0})}> <button class=${$t({\"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> `}}"
+          "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": "Mt",
+          "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": "Tt",
+          "name": "Rt",
           "members": [
             {
               "kind": "method",
@@ -443,11 +443,11 @@
         {
           "kind": "variable",
           "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 Tt,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> `}}"
+          "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": "Lt"
+          "name": "jt"
         },
         {
           "kind": "variable",
@@ -476,7 +476,7 @@
           "kind": "js",
           "name": "DialogRef",
           "declaration": {
-            "name": "Tt",
+            "name": "Rt",
             "module": "dist/krubble.bundled.min.js"
           }
         },
@@ -516,7 +516,7 @@
           "kind": "js",
           "name": "KRContextMenu",
           "declaration": {
-            "name": "Mt",
+            "name": "Ot",
             "module": "dist/krubble.bundled.min.js"
           }
         },
@@ -532,7 +532,7 @@
           "kind": "js",
           "name": "KRSnackbar",
           "declaration": {
-            "name": "Lt",
+            "name": "jt",
             "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": {

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"}