@kodaris/krubble-components 1.0.30 → 1.0.31

package/breaking-changes.json

@@ -1 +1,6 @@
-[]
+[
+  {
+    "version": "1.0.30",
+    "description": "<kr-tab> \"title\" attribute renamed to \"label\" to avoid native HTML title tooltip"
+  }
+]

package/custom-elements.json

@@ -276,13 +276,13 @@
         {
           "kind": "variable",
           "name": "KRTabGroup",
-          "default": "class KRTabGroup extends i$2 { constructor() { super(...arguments); /** * Whether tabs should stretch to fill the full width evenly */ this.justified = false; /** * Size of the tabs: 'small' | 'medium' | 'large' */ this.size = 'medium'; } updated(changes) { if (changes.has('activeTabId')) { this._updateActiveTab(); } } firstUpdated() { this._updateActiveTab(); } _getTabs() { return Array.from(this.querySelectorAll('kr-tab')); } _updateActiveTab() { const tabs = this._getTabs(); if (tabs.length === 0) return; if (!this.activeTabId) { this.activeTabId = tabs[0]?.id; } tabs.forEach((tab) => { tab.active = tab.id === this.activeTabId; }); this.requestUpdate(); } _handleTabClick(tab) { if (tab.disabled) return; this.activeTabId = tab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: tab.id }, bubbles: true, composed: true, })); } _handleTabDismiss(tab, e) { e.stopPropagation(); this.dispatchEvent(new CustomEvent('tab-dismiss', { detail: { tabId: tab.id }, bubbles: true, composed: true, })); } _handleKeyDown(e) { const enabledTabs = this._getTabs().filter((t) => !t.disabled); const currentIndex = enabledTabs.findIndex((t) => t.id === this.activeTabId); let newIndex = -1; switch (e.key) { case 'ArrowLeft': newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1; break; case 'ArrowRight': newIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0; break; case 'Home': newIndex = 0; break; case 'End': newIndex = enabledTabs.length - 1; break; } if (newIndex >= 0) { e.preventDefault(); const newTab = enabledTabs[newIndex]; this.activeTabId = newTab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: newTab.id }, bubbles: true, composed: true, })); const tabButtons = this.shadowRoot?.querySelectorAll('.label'); const targetButton = Array.from(tabButtons || []).find((btn) => btn.getAttribute('data-tab-id') === newTab.id); targetButton?.focus(); } } _renderTabIcon(tab) { const iconElement = tab.getIconElement(); if (!iconElement) return A; // Clone the icon element to render in the header const clonedIcon = iconElement.cloneNode(true); clonedIcon.removeAttribute('slot'); return b `<span class=\"label-icon\">${clonedIcon}</span>`; } render() { return b ` <div class=\"header\" role=\"tablist\" @keydown=${this._handleKeyDown}> ${this._getTabs().map((tab) => b ` <button class=${e$1({ label: true, 'label--active': tab.id === this.activeTabId, 'label--justified': this.justified, })} role=\"tab\" data-tab-id=${tab.id} aria-selected=${tab.id === this.activeTabId} aria-controls=${`panel-${tab.id}`} tabindex=${tab.id === this.activeTabId ? 0 : -1} ?disabled=${tab.disabled} @click=${() => this._handleTabClick(tab)} > ${this._renderTabIcon(tab)} <span>${tab.title}</span> ${tab.badge ? b `<span class=\"label-badge\" style=${o$1({ backgroundColor: tab.badgeBackground, color: tab.badgeColor })}>${tab.badge}</span>` : A} ${tab.dismissible ? b ` <button class=\"label-dismiss\" type=\"button\" aria-label=\"Close tab\" @click=${(e) => this._handleTabDismiss(tab, e)} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"12\" height=\"12\"><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> ` : A} </button> `)} </div> <div class=\"content\" role=\"tabpanel\" aria-labelledby=${this.activeTabId || ''}> <slot @slotchange=${this._updateActiveTab}></slot> </div> `; } }",
+          "default": "class KRTabGroup extends i$2 { constructor() { super(...arguments); /** * Whether tabs should stretch to fill the full width evenly */ this.justified = false; /** * Size of the tabs: 'small' | 'medium' | 'large' */ this.size = 'medium'; } updated(changes) { if (changes.has('activeTabId')) { this._updateActiveTab(); } } firstUpdated() { this._updateActiveTab(); } _getTabs() { return Array.from(this.querySelectorAll('kr-tab')); } _updateActiveTab() { const tabs = this._getTabs(); if (tabs.length === 0) return; if (!this.activeTabId) { this.activeTabId = tabs[0]?.id; } tabs.forEach((tab) => { tab.active = tab.id === this.activeTabId; }); this.requestUpdate(); } _handleTabClick(tab) { if (tab.disabled) return; this.activeTabId = tab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: tab.id }, bubbles: true, composed: true, })); } _handleTabDismiss(tab, e) { e.stopPropagation(); this.dispatchEvent(new CustomEvent('tab-dismiss', { detail: { tabId: tab.id }, bubbles: true, composed: true, })); } _handleKeyDown(e) { const enabledTabs = this._getTabs().filter((t) => !t.disabled); const currentIndex = enabledTabs.findIndex((t) => t.id === this.activeTabId); let newIndex = -1; switch (e.key) { case 'ArrowLeft': newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1; break; case 'ArrowRight': newIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0; break; case 'Home': newIndex = 0; break; case 'End': newIndex = enabledTabs.length - 1; break; } if (newIndex >= 0) { e.preventDefault(); const newTab = enabledTabs[newIndex]; this.activeTabId = newTab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: newTab.id }, bubbles: true, composed: true, })); const tabButtons = this.shadowRoot?.querySelectorAll('.label'); const targetButton = Array.from(tabButtons || []).find((btn) => btn.getAttribute('data-tab-id') === newTab.id); targetButton?.focus(); } } _renderTabIcon(tab) { const iconElement = tab.getIconElement(); if (!iconElement) return A; // Clone the icon element to render in the header const clonedIcon = iconElement.cloneNode(true); clonedIcon.removeAttribute('slot'); return b `<span class=\"label-icon\">${clonedIcon}</span>`; } render() { return b ` <div class=\"header\" role=\"tablist\" @keydown=${this._handleKeyDown}> ${this._getTabs().map((tab) => b ` <button class=${e$1({ label: true, 'label--active': tab.id === this.activeTabId, 'label--justified': this.justified, })} role=\"tab\" data-tab-id=${tab.id} aria-selected=${tab.id === this.activeTabId} aria-controls=${`panel-${tab.id}`} tabindex=${tab.id === this.activeTabId ? 0 : -1} ?disabled=${tab.disabled} @click=${() => this._handleTabClick(tab)} > ${this._renderTabIcon(tab)} <span>${tab.label}</span> ${tab.badge ? b `<span class=\"label-badge\" style=${o$1({ backgroundColor: tab.badgeBackground, color: tab.badgeColor })}>${tab.badge}</span>` : A} ${tab.dismissible ? b ` <button class=\"label-dismiss\" type=\"button\" aria-label=\"Close tab\" @click=${(e) => this._handleTabDismiss(tab, e)} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"12\" height=\"12\"><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> ` : A} </button> `)} </div> <div class=\"content\" role=\"tabpanel\" aria-labelledby=${this.activeTabId || ''}> <slot @slotchange=${this._updateActiveTab}></slot> </div> `; } }",
           "description": "A tabbed navigation component for switching between content sections."
         },
         {
           "kind": "variable",
           "name": "KRTab",
-          "default": "class KRTab extends i$2 { constructor() { super(...arguments); /** * Unique identifier for the tab */ this.id = ''; /** * Display title for the tab */ this.title = ''; /** * Badge text displayed next to title (e.g. notification count) */ this.badge = ''; /** * Badge background color */ this.badgeBackground = ''; /** * Badge text color */ this.badgeColor = ''; /** * Whether the tab is disabled */ this.disabled = false; /** * Whether the tab can be dismissed/closed */ this.dismissible = false; /** * Whether this tab is currently active (set by parent) */ this.active = false; } /** * Gets the icon element from the icon slot (if any) */ getIconElement() { return this.querySelector('[slot=\"icon\"]'); } render() { return b `<slot></slot>`; } }",
+          "default": "class KRTab extends i$2 { constructor() { super(...arguments); /** * Unique identifier for the tab */ this.id = ''; /** * Display label for the tab */ this.label = ''; /** * Badge text displayed next to label (e.g. notification count) */ this.badge = ''; /** * Badge background color */ this.badgeBackground = ''; /** * Badge text color */ this.badgeColor = ''; /** * Whether the tab is disabled */ this.disabled = false; /** * Whether the tab can be dismissed/closed */ this.dismissible = false; /** * Whether this tab is currently active (set by parent) */ this.active = false; } /** * Gets the icon element from the icon slot (if any) */ getIconElement() { return this.querySelector('[slot=\"icon\"]'); } render() { console.log('tab render'); return b `<slot></slot>`; } }",
           "description": "A tab for the kr-tab-group component."
         },
         {
@@ -595,12 +595,12 @@
         {
           "kind": "variable",
           "name": "We",
-          "default": "class extends re{constructor(){super(...arguments),this.justified=!1,this.size=\"medium\"}updated(e){e.has(\"activeTabId\")&&this._updateActiveTab()}firstUpdated(){this._updateActiveTab()}_getTabs(){return Array.from(this.querySelectorAll(\"kr-tab\"))}_updateActiveTab(){const e=this._getTabs();0!==e.length&&(this.activeTabId||(this.activeTabId=e[0]?.id),e.forEach((e=>{e.active=e.id===this.activeTabId})),this.requestUpdate())}_handleTabClick(e){e.disabled||(this.activeTabId=e.id,this.dispatchEvent(new CustomEvent(\"tab-change\",{detail:{activeTabId:e.id},bubbles:!0,composed:!0})))}_handleTabDismiss(e,t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(\"tab-dismiss\",{detail:{tabId:e.id},bubbles:!0,composed:!0}))}_handleKeyDown(e){const t=this._getTabs().filter((e=>!e.disabled)),i=t.findIndex((e=>e.id===this.activeTabId));let o=-1;switch(e.key){case\"ArrowLeft\":o=i>0?i-1:t.length-1;break;case\"ArrowRight\":o=i<t.length-1?i+1:0;break;case\"Home\":o=0;break;case\"End\":o=t.length-1}if(o>=0){e.preventDefault();const i=t[o];this.activeTabId=i.id,this.dispatchEvent(new CustomEvent(\"tab-change\",{detail:{activeTabId:i.id},bubbles:!0,composed:!0}));const s=this.shadowRoot?.querySelectorAll(\".label\"),r=Array.from(s||[]).find((e=>e.getAttribute(\"data-tab-id\")===i.id));r?.focus()}}_renderTabIcon(e){const t=e.getIconElement();if(!t)return U;const i=t.cloneNode(!0);return i.removeAttribute(\"slot\"),H`<span class=\"label-icon\">${i}</span>`}render(){return H` <div class=\"header\" role=\"tablist\" @keydown=${this._handleKeyDown}> ${this._getTabs().map((e=>H` <button class=${ke({label:!0,\"label--active\":e.id===this.activeTabId,\"label--justified\":this.justified})} role=\"tab\" data-tab-id=${e.id} aria-selected=${e.id===this.activeTabId} aria-controls=${`panel-${e.id}`} tabindex=${e.id===this.activeTabId?0:-1} ?disabled=${e.disabled} @click=${()=>this._handleTabClick(e)} > ${this._renderTabIcon(e)} <span>${e.title}</span> ${e.badge?H`<span class=\"label-badge\" style=${Ne({backgroundColor:e.badgeBackground,color:e.badgeColor})}>${e.badge}</span>`:U} ${e.dismissible?H` <button class=\"label-dismiss\" type=\"button\" aria-label=\"Close tab\" @click=${t=>this._handleTabDismiss(e,t)} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"12\" height=\"12\"><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> `:U} </button> `))} </div> <div class=\"content\" role=\"tabpanel\" aria-labelledby=${this.activeTabId||\"\"}> <slot @slotchange=${this._updateActiveTab}></slot> </div> `}}"
+          "default": "class extends re{constructor(){super(...arguments),this.justified=!1,this.size=\"medium\"}updated(e){e.has(\"activeTabId\")&&this._updateActiveTab()}firstUpdated(){this._updateActiveTab()}_getTabs(){return Array.from(this.querySelectorAll(\"kr-tab\"))}_updateActiveTab(){const e=this._getTabs();0!==e.length&&(this.activeTabId||(this.activeTabId=e[0]?.id),e.forEach((e=>{e.active=e.id===this.activeTabId})),this.requestUpdate())}_handleTabClick(e){e.disabled||(this.activeTabId=e.id,this.dispatchEvent(new CustomEvent(\"tab-change\",{detail:{activeTabId:e.id},bubbles:!0,composed:!0})))}_handleTabDismiss(e,t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(\"tab-dismiss\",{detail:{tabId:e.id},bubbles:!0,composed:!0}))}_handleKeyDown(e){const t=this._getTabs().filter((e=>!e.disabled)),i=t.findIndex((e=>e.id===this.activeTabId));let o=-1;switch(e.key){case\"ArrowLeft\":o=i>0?i-1:t.length-1;break;case\"ArrowRight\":o=i<t.length-1?i+1:0;break;case\"Home\":o=0;break;case\"End\":o=t.length-1}if(o>=0){e.preventDefault();const i=t[o];this.activeTabId=i.id,this.dispatchEvent(new CustomEvent(\"tab-change\",{detail:{activeTabId:i.id},bubbles:!0,composed:!0}));const s=this.shadowRoot?.querySelectorAll(\".label\"),r=Array.from(s||[]).find((e=>e.getAttribute(\"data-tab-id\")===i.id));r?.focus()}}_renderTabIcon(e){const t=e.getIconElement();if(!t)return U;const i=t.cloneNode(!0);return i.removeAttribute(\"slot\"),H`<span class=\"label-icon\">${i}</span>`}render(){return H` <div class=\"header\" role=\"tablist\" @keydown=${this._handleKeyDown}> ${this._getTabs().map((e=>H` <button class=${ke({label:!0,\"label--active\":e.id===this.activeTabId,\"label--justified\":this.justified})} role=\"tab\" data-tab-id=${e.id} aria-selected=${e.id===this.activeTabId} aria-controls=${`panel-${e.id}`} tabindex=${e.id===this.activeTabId?0:-1} ?disabled=${e.disabled} @click=${()=>this._handleTabClick(e)} > ${this._renderTabIcon(e)} <span>${e.label}</span> ${e.badge?H`<span class=\"label-badge\" style=${Ne({backgroundColor:e.badgeBackground,color:e.badgeColor})}>${e.badge}</span>`:U} ${e.dismissible?H` <button class=\"label-dismiss\" type=\"button\" aria-label=\"Close tab\" @click=${t=>this._handleTabDismiss(e,t)} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"12\" height=\"12\"><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> `:U} </button> `))} </div> <div class=\"content\" role=\"tabpanel\" aria-labelledby=${this.activeTabId||\"\"}> <slot @slotchange=${this._updateActiveTab}></slot> </div> `}}"
         },
         {
           "kind": "variable",
           "name": "Ze",
-          "default": "class extends re{constructor(){super(...arguments),this.id=\"\",this.title=\"\",this.badge=\"\",this.badgeBackground=\"\",this.badgeColor=\"\",this.disabled=!1,this.dismissible=!1,this.active=!1}getIconElement(){return this.querySelector('[slot=\"icon\"]')}render(){return H`<slot></slot>`}}"
+          "default": "class extends re{constructor(){super(...arguments),this.id=\"\",this.label=\"\",this.badge=\"\",this.badgeBackground=\"\",this.badgeColor=\"\",this.disabled=!1,this.dismissible=!1,this.active=!1}getIconElement(){return this.querySelector('[slot=\"icon\"]')}render(){return console.log(\"tab render\"),H`<slot></slot>`}}"
         },
         {
           "kind": "variable",
@@ -1491,7 +1491,7 @@
         {
           "kind": "variable",
           "name": "KRTab",
-          "default": "class KRTab extends LitElement { constructor() { super(...arguments); /** * Unique identifier for the tab */ this.id = ''; /** * Display title for the tab */ this.title = ''; /** * Badge text displayed next to title (e.g. notification count) */ this.badge = ''; /** * Badge background color */ this.badgeBackground = ''; /** * Badge text color */ this.badgeColor = ''; /** * Whether the tab is disabled */ this.disabled = false; /** * Whether the tab can be dismissed/closed */ this.dismissible = false; /** * Whether this tab is currently active (set by parent) */ this.active = false; } /** * Gets the icon element from the icon slot (if any) */ getIconElement() { return this.querySelector('[slot=\"icon\"]'); } render() { return html `<slot></slot>`; } }",
+          "default": "class KRTab extends LitElement { constructor() { super(...arguments); /** * Unique identifier for the tab */ this.id = ''; /** * Display label for the tab */ this.label = ''; /** * Badge text displayed next to label (e.g. notification count) */ this.badge = ''; /** * Badge background color */ this.badgeBackground = ''; /** * Badge text color */ this.badgeColor = ''; /** * Whether the tab is disabled */ this.disabled = false; /** * Whether the tab can be dismissed/closed */ this.dismissible = false; /** * Whether this tab is currently active (set by parent) */ this.active = false; } /** * Gets the icon element from the icon slot (if any) */ getIconElement() { return this.querySelector('[slot=\"icon\"]'); } render() { console.log('tab render'); return html `<slot></slot>`; } }",
           "description": "A tab for the kr-tab-group component."
         }
       ],
@@ -1513,7 +1513,7 @@
         {
           "kind": "variable",
           "name": "KRTabGroup",
-          "default": "class KRTabGroup extends LitElement { constructor() { super(...arguments); /** * Whether tabs should stretch to fill the full width evenly */ this.justified = false; /** * Size of the tabs: 'small' | 'medium' | 'large' */ this.size = 'medium'; } updated(changes) { if (changes.has('activeTabId')) { this._updateActiveTab(); } } firstUpdated() { this._updateActiveTab(); } _getTabs() { return Array.from(this.querySelectorAll('kr-tab')); } _updateActiveTab() { const tabs = this._getTabs(); if (tabs.length === 0) return; if (!this.activeTabId) { this.activeTabId = tabs[0]?.id; } tabs.forEach((tab) => { tab.active = tab.id === this.activeTabId; }); this.requestUpdate(); } _handleTabClick(tab) { if (tab.disabled) return; this.activeTabId = tab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: tab.id }, bubbles: true, composed: true, })); } _handleTabDismiss(tab, e) { e.stopPropagation(); this.dispatchEvent(new CustomEvent('tab-dismiss', { detail: { tabId: tab.id }, bubbles: true, composed: true, })); } _handleKeyDown(e) { const enabledTabs = this._getTabs().filter((t) => !t.disabled); const currentIndex = enabledTabs.findIndex((t) => t.id === this.activeTabId); let newIndex = -1; switch (e.key) { case 'ArrowLeft': newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1; break; case 'ArrowRight': newIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0; break; case 'Home': newIndex = 0; break; case 'End': newIndex = enabledTabs.length - 1; break; } if (newIndex >= 0) { e.preventDefault(); const newTab = enabledTabs[newIndex]; this.activeTabId = newTab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: newTab.id }, bubbles: true, composed: true, })); const tabButtons = this.shadowRoot?.querySelectorAll('.label'); const targetButton = Array.from(tabButtons || []).find((btn) => btn.getAttribute('data-tab-id') === newTab.id); targetButton?.focus(); } } _renderTabIcon(tab) { const iconElement = tab.getIconElement(); if (!iconElement) return nothing; // Clone the icon element to render in the header const clonedIcon = iconElement.cloneNode(true); clonedIcon.removeAttribute('slot'); return html `<span class=\"label-icon\">${clonedIcon}</span>`; } render() { return html ` <div class=\"header\" role=\"tablist\" @keydown=${this._handleKeyDown}> ${this._getTabs().map((tab) => html ` <button class=${classMap({ label: true, 'label--active': tab.id === this.activeTabId, 'label--justified': this.justified, })} role=\"tab\" data-tab-id=${tab.id} aria-selected=${tab.id === this.activeTabId} aria-controls=${`panel-${tab.id}`} tabindex=${tab.id === this.activeTabId ? 0 : -1} ?disabled=${tab.disabled} @click=${() => this._handleTabClick(tab)} > ${this._renderTabIcon(tab)} <span>${tab.title}</span> ${tab.badge ? html `<span class=\"label-badge\" style=${styleMap({ backgroundColor: tab.badgeBackground, color: tab.badgeColor })}>${tab.badge}</span>` : nothing} ${tab.dismissible ? html ` <button class=\"label-dismiss\" type=\"button\" aria-label=\"Close tab\" @click=${(e) => this._handleTabDismiss(tab, e)} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"12\" height=\"12\"><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> ` : nothing} </button> `)} </div> <div class=\"content\" role=\"tabpanel\" aria-labelledby=${this.activeTabId || ''}> <slot @slotchange=${this._updateActiveTab}></slot> </div> `; } }",
+          "default": "class KRTabGroup extends LitElement { constructor() { super(...arguments); /** * Whether tabs should stretch to fill the full width evenly */ this.justified = false; /** * Size of the tabs: 'small' | 'medium' | 'large' */ this.size = 'medium'; } updated(changes) { if (changes.has('activeTabId')) { this._updateActiveTab(); } } firstUpdated() { this._updateActiveTab(); } _getTabs() { return Array.from(this.querySelectorAll('kr-tab')); } _updateActiveTab() { const tabs = this._getTabs(); if (tabs.length === 0) return; if (!this.activeTabId) { this.activeTabId = tabs[0]?.id; } tabs.forEach((tab) => { tab.active = tab.id === this.activeTabId; }); this.requestUpdate(); } _handleTabClick(tab) { if (tab.disabled) return; this.activeTabId = tab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: tab.id }, bubbles: true, composed: true, })); } _handleTabDismiss(tab, e) { e.stopPropagation(); this.dispatchEvent(new CustomEvent('tab-dismiss', { detail: { tabId: tab.id }, bubbles: true, composed: true, })); } _handleKeyDown(e) { const enabledTabs = this._getTabs().filter((t) => !t.disabled); const currentIndex = enabledTabs.findIndex((t) => t.id === this.activeTabId); let newIndex = -1; switch (e.key) { case 'ArrowLeft': newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1; break; case 'ArrowRight': newIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0; break; case 'Home': newIndex = 0; break; case 'End': newIndex = enabledTabs.length - 1; break; } if (newIndex >= 0) { e.preventDefault(); const newTab = enabledTabs[newIndex]; this.activeTabId = newTab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: newTab.id }, bubbles: true, composed: true, })); const tabButtons = this.shadowRoot?.querySelectorAll('.label'); const targetButton = Array.from(tabButtons || []).find((btn) => btn.getAttribute('data-tab-id') === newTab.id); targetButton?.focus(); } } _renderTabIcon(tab) { const iconElement = tab.getIconElement(); if (!iconElement) return nothing; // Clone the icon element to render in the header const clonedIcon = iconElement.cloneNode(true); clonedIcon.removeAttribute('slot'); return html `<span class=\"label-icon\">${clonedIcon}</span>`; } render() { return html ` <div class=\"header\" role=\"tablist\" @keydown=${this._handleKeyDown}> ${this._getTabs().map((tab) => html ` <button class=${classMap({ label: true, 'label--active': tab.id === this.activeTabId, 'label--justified': this.justified, })} role=\"tab\" data-tab-id=${tab.id} aria-selected=${tab.id === this.activeTabId} aria-controls=${`panel-${tab.id}`} tabindex=${tab.id === this.activeTabId ? 0 : -1} ?disabled=${tab.disabled} @click=${() => this._handleTabClick(tab)} > ${this._renderTabIcon(tab)} <span>${tab.label}</span> ${tab.badge ? html `<span class=\"label-badge\" style=${styleMap({ backgroundColor: tab.badgeBackground, color: tab.badgeColor })}>${tab.badge}</span>` : nothing} ${tab.dismissible ? html ` <button class=\"label-dismiss\" type=\"button\" aria-label=\"Close tab\" @click=${(e) => this._handleTabDismiss(tab, e)} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"12\" height=\"12\"><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> ` : nothing} </button> `)} </div> <div class=\"content\" role=\"tabpanel\" aria-labelledby=${this.activeTabId || ''}> <slot @slotchange=${this._updateActiveTab}></slot> </div> `; } }",
           "description": "A tabbed navigation component for switching between content sections."
         }
       ],
@@ -3549,13 +3549,13 @@
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Display title for the tab",
-              "attribute": "title"
+              "description": "Display label for the tab",
+              "attribute": "label"
             },
             {
               "kind": "field",
@@ -3564,7 +3564,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Badge text displayed next to title (e.g. notification count)",
+              "description": "Badge text displayed next to label (e.g. notification count)",
               "attribute": "badge"
             },
             {
@@ -3640,13 +3640,13 @@
               "fieldName": "id"
             },
             {
-              "name": "title",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Display title for the tab",
-              "fieldName": "title"
+              "description": "Display label for the tab",
+              "fieldName": "label"
             },
             {
               "name": "badge",
@@ -3654,7 +3654,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Badge text displayed next to title (e.g. notification count)",
+              "description": "Badge text displayed next to label (e.g. notification count)",
               "fieldName": "badge"
             },
             {

package/dist/button/button.js

@@ -450,8 +450,8 @@ KRButton.styles = css `
     }
 
     :host(.kr-button--small) ::slotted([slot="icon"]) {
-      width: 14px;
-      height: 14px;
+      width: 16px;
+      height: 16px;
     }
 
     :host(.kr-button--large) ::slotted([slot="icon"]) {

package/dist/krubble-components.bundled.js

@@ -883,8 +883,8 @@ KRButton.styles = i$5 `
     }
 
     :host(.kr-button--small) ::slotted([slot="icon"]) {
-      width: 14px;
-      height: 14px;
+      width: 16px;
+      height: 16px;
     }
 
     :host(.kr-button--large) ::slotted([slot="icon"]) {
@@ -1888,11 +1888,11 @@ var __decorate$9 = (undefined && undefined.__decorate) || function (decorators,
  * @example
  * ```html
  * <kr-tab-group active-tab-id="settings">
- *   <kr-tab id="home" title="Home">
+ *   <kr-tab id="home" label="Home">
  *     <svg slot="icon" viewBox="0 0 20 20" fill="currentColor" width="16" height="16">...</svg>
  *     <p>Home content here</p>
  *   </kr-tab>
- *   <kr-tab id="settings" title="Settings" badge="3">
+ *   <kr-tab id="settings" label="Settings" badge="3">
  *     <svg slot="icon" viewBox="0 0 20 20" fill="currentColor" width="16" height="16">...</svg>
  *     <p>Settings content here</p>
  *   </kr-tab>
@@ -2012,7 +2012,7 @@ let KRTabGroup = class KRTabGroup extends i$2 {
               @click=${() => this._handleTabClick(tab)}
             >
               ${this._renderTabIcon(tab)}
-              <span>${tab.title}</span>
+              <span>${tab.label}</span>
               ${tab.badge ? b `<span class="label-badge" style=${o$1({ backgroundColor: tab.badgeBackground, color: tab.badgeColor })}>${tab.badge}</span>` : A}
               ${tab.dismissible
             ? b `
@@ -2206,11 +2206,11 @@ let KRTab = class KRTab extends i$2 {
          */
         this.id = '';
         /**
-         * Display title for the tab
+         * Display label for the tab
          */
-        this.title = '';
+        this.label = '';
         /**
-         * Badge text displayed next to title (e.g. notification count)
+         * Badge text displayed next to label (e.g. notification count)
          */
         this.badge = '';
         /**
@@ -2241,6 +2241,7 @@ let KRTab = class KRTab extends i$2 {
         return this.querySelector('[slot="icon"]');
     }
     render() {
+        console.log('tab render');
         return b `<slot></slot>`;
     }
 };
@@ -2263,7 +2264,7 @@ __decorate$8([
 ], KRTab.prototype, "id", void 0);
 __decorate$8([
     n$1({ type: String })
-], KRTab.prototype, "title", void 0);
+], KRTab.prototype, "label", void 0);
 __decorate$8([
     n$1({ type: String })
 ], KRTab.prototype, "badge", void 0);