@diwacopilot/components 1.0.0 → 1.1.1

package/dist/esm/diwa-table-head.entry.js

@@ -1,15 +1,20 @@
 import { r as registerInstance, h, H as Host } from './index-3fa02c74.js';
 
-const getComponentCss = () => `
-  :host {
-    display: table-header-group;
-    background: var(--diwa-table-header-bg, var(--diwa-bg-elevated));
-    font-size: var(--diwa-font-size-sm);
-    font-weight: var(--diwa-font-weight-semibold);
-    color: var(--diwa-text-secondary);
-    --diwa-table-hover-color: transparent;
-  }
-  :host([hidden]) { display: none; }
+const getComponentCss = () => `
+  :host {
+    display: table-header-group;
+    background: var(--diwa-table-header-bg, transparent);
+    font-size: var(--diwa-font-size-sm);
+    line-height: var(--diwa-line-height-normal);
+    font-weight: var(--diwa-font-weight-semibold);
+    color: var(--diwa-text-secondary);
+    border-bottom: var(--diwa-border-width-thin, 1px) solid var(--diwa-table-border-color, var(--diwa-border)) !important;
+  }
+  ::slotted(*) {
+    --diwa-table-row-border-width: 0px;
+    --diwa-table-hover-color: transparent;
+  }
+  :host([hidden]) { display: none; }
 `;
 
 const DiwaTableHead = class {
@@ -18,7 +23,7 @@ const DiwaTableHead = class {
         this.theme = 'dark';
     }
     render() {
-        return (h(Host, { key: '4a79b101f25908a4c8d952a6cabeba242d361d45', role: "rowgroup", "data-theme": this.theme }, h("style", { key: '2fe92018084cd53e3eecfa6fa7cfcd314609d383', innerHTML: getComponentCss() }), h("slot", { key: 'f9d45fc32ddc9eb5532dd8e85fadac06df35cfb3' })));
+        return (h(Host, { key: '8b9ea28317fea6188af61dad423fe63058910913', role: "rowgroup", "data-theme": this.theme }, h("style", { key: '70d40b87e2b9a76d20424845492cd6d2addb775a', innerHTML: getComponentCss() }), h("slot", { key: 'af8f4b4e1e404c7c23a3d6d35b8b961167047c3c' })));
     }
 };
 

package/dist/esm/diwa-table-head.entry.js.map

@@ -1 +1 @@
-{"file":"diwa-table-head.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;CAU5C;;MCJY,aAAa;IAD1B;;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,gBAAa,IAAI,CAAC,KAAK,IAC1C,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,8DAAQ,CACH,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-table-head/diwa-table-head-styles.ts","src/components/diwa-table-head/diwa-table-head.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\r\n  :host {\r\n    display: table-header-group;\r\n    background: var(--diwa-table-header-bg, var(--diwa-bg-elevated));\r\n    font-size: var(--diwa-font-size-sm);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    color: var(--diwa-text-secondary);\r\n    --diwa-table-hover-color: transparent;\r\n  }\r\n  :host([hidden]) { display: none; }\r\n`;\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-table-head-styles';\r\n\r\n/** @component diwa-table-head — Maps to <thead> inside diwa-table. */\r\n@Component({ tag: 'diwa-table-head', shadow: true })\r\nexport class DiwaTableHead {\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"rowgroup\" data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"diwa-table-head.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;CAe5C;;MCTY,aAAa;IAD1B;;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,gBAAa,IAAI,CAAC,KAAK,IAC1C,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,8DAAQ,CACH,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-table-head/diwa-table-head-styles.ts","src/components/diwa-table-head/diwa-table-head.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\n  :host {\n    display: table-header-group;\n    background: var(--diwa-table-header-bg, transparent);\n    font-size: var(--diwa-font-size-sm);\n    line-height: var(--diwa-line-height-normal);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-secondary);\n    border-bottom: var(--diwa-border-width-thin, 1px) solid var(--diwa-table-border-color, var(--diwa-border)) !important;\n  }\n  ::slotted(*) {\n    --diwa-table-row-border-width: 0px;\n    --diwa-table-hover-color: transparent;\n  }\n  :host([hidden]) { display: none; }\n`;\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-table-head-styles';\r\n\r\n/** @component diwa-table-head — Maps to <thead> inside diwa-table. */\r\n@Component({ tag: 'diwa-table-head', shadow: true })\r\nexport class DiwaTableHead {\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"rowgroup\" data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-table-row.entry.js

@@ -1,14 +1,15 @@
 import { r as registerInstance, h, H as Host } from './index-3fa02c74.js';
 
-const getComponentCss = () => `
-  :host {
-    display: table-row;
-    transition: background var(--diwa-transition-base);
-  }
-  :host([hidden]) { display: none; }
-  :host(:hover) {
-    background: var(--diwa-table-hover-color, transparent);
-  }
+const getComponentCss = () => `
+  :host {
+    display: table-row;
+    border-bottom: var(--diwa-table-row-border-width, var(--diwa-border-width-thin, 1px)) solid var(--diwa-table-border-color, var(--diwa-border)) !important;
+    transition: background var(--diwa-transition-base);
+  }
+  :host([hidden]) { display: none; }
+  :host(:hover) {
+    background: var(--diwa-table-hover-color, transparent);
+  }
 `;
 
 const DiwaTableRow = class {
@@ -17,7 +18,7 @@ const DiwaTableRow = class {
         this.theme = 'dark';
     }
     render() {
-        return (h(Host, { key: 'f931d12bc8db13a256549d53e08596154fe99633', role: "row", "data-theme": this.theme }, h("style", { key: '5492581027421a4455b3831766e0f6126cc32a30', innerHTML: getComponentCss() }), h("slot", { key: 'e66bff1a9c8d1661227bcefa9f6fa835c2109df8' })));
+        return (h(Host, { key: '7f50afcd2d670ddfce8c868977c8662984e8a92d', role: "row", "data-theme": this.theme }, h("style", { key: '95d0cc4eb479e1ad4e3e03b87c82e8c7f99be540', innerHTML: getComponentCss() }), h("slot", { key: '8d02b0f44a1b06304bcfa7e1b7d582c0ec2b2db8' })));
     }
 };
 

package/dist/esm/diwa-table-row.entry.js.map

@@ -1 +1 @@
-{"file":"diwa-table-row.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;CAS5C;;MCHY,YAAY;IADzB;;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,IAAI,CAAC,KAAK,IACrC,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,8DAAQ,CACH,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-table-row/diwa-table-row-styles.ts","src/components/diwa-table-row/diwa-table-row.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\r\n  :host {\r\n    display: table-row;\r\n    transition: background var(--diwa-transition-base);\r\n  }\r\n  :host([hidden]) { display: none; }\r\n  :host(:hover) {\r\n    background: var(--diwa-table-hover-color, transparent);\r\n  }\r\n`;\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-table-row-styles';\r\n\r\n/** @component diwa-table-row — Maps to <tr> inside diwa-table-head or diwa-table-body. */\r\n@Component({ tag: 'diwa-table-row', shadow: true })\r\nexport class DiwaTableRow {\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"row\" data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"diwa-table-row.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;CAU5C;;MCJY,YAAY;IADzB;;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,IAAI,CAAC,KAAK,IACrC,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,8DAAQ,CACH,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-table-row/diwa-table-row-styles.ts","src/components/diwa-table-row/diwa-table-row.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\n  :host {\n    display: table-row;\n    border-bottom: var(--diwa-table-row-border-width, var(--diwa-border-width-thin, 1px)) solid var(--diwa-table-border-color, var(--diwa-border)) !important;\n    transition: background var(--diwa-transition-base);\n  }\n  :host([hidden]) { display: none; }\n  :host(:hover) {\n    background: var(--diwa-table-hover-color, transparent);\n  }\n`;\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-table-row-styles';\r\n\r\n/** @component diwa-table-row — Maps to <tr> inside diwa-table-head or diwa-table-body. */\r\n@Component({ tag: 'diwa-table-row', shadow: true })\r\nexport class DiwaTableRow {\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"row\" data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-table.entry.js

@@ -1,47 +1,86 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-3fa02c74.js';
 
-const getComponentCss = (compact, layout, bordered, striped) => `
-  :host {
-    display: block;
-    font-family: var(--diwa-font-family-base);
-    width: 100%;
-    overflow-x: auto;
-    background: var(--diwa-bg-surface);
-    border-radius: var(--diwa-radius-lg);
-    --diwa-table-padding: ${compact ? 'var(--diwa-space-fluid-xs)' : 'var(--diwa-space-fluid-md)'};
-    --diwa-table-hover-color: var(--diwa-bg-hover);
-    --diwa-table-border-color: var(--diwa-border);
-    --diwa-table-column-border: ${bordered ? 'var(--diwa-border-width-thin) solid var(--diwa-border)' : 'none'};
-    --diwa-table-stripe-color: ${striped ? 'var(--diwa-bg-elevated)' : 'transparent'};
-    --diwa-table-header-bg: var(--diwa-bg-elevated);
-    ${bordered ? `
-    border: var(--diwa-border-width-thin) solid var(--diwa-border);
-    overflow: hidden;
-    ` : ''}
-  }
-
-  :host([hidden]) { display: none; }
-
-  .table {
-    width: 100%;
-    border-collapse: collapse;
-    background: var(--diwa-bg-surface);
-    font-size: var(--diwa-font-size-base);
-    color: var(--diwa-text-primary);
-    ${layout === 'fixed' ? 'table-layout: fixed;' : ''}
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
+const getComponentCss = (compact, layout, bordered, striped) => `
+  ${compact
+    ? `
+  :host {
+    --diwa-table-padding-y: 6px;
+    --diwa-table-padding-y: var(--diwa-space-2, 6px);
+    --diwa-table-padding-x: 12px;
+    --diwa-table-padding-x: var(--diwa-space-5, 12px);
+  }
+  `
+    : `
+  :host {
+    --diwa-table-padding-y: 12px;
+    --diwa-table-padding-y: var(--diwa-space-5, 12px);
+    --diwa-table-padding-x: 16px;
+    --diwa-table-padding-x: var(--diwa-space-7, 16px);
+  }
+  `}
+
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+    width: 100%;
+    overflow-x: auto;
+    background: var(--diwa-bg-surface);
+    border-radius: var(--diwa-radius-lg);
+    color: var(--diwa-text-primary);
+    text-align: start;
+    --diwa-table-hover-color: var(--diwa-bg-hover, transparent);
+    --diwa-table-border-color: var(--diwa-border, currentColor);
+    --diwa-table-row-border-width: var(--diwa-border-width-thin, 1px);
+    --diwa-table-column-border: ${bordered ? 'var(--diwa-border-width-thin, 1px) solid var(--diwa-border, currentColor)' : 'none'};
+    --diwa-table-stripe-color: ${striped ? 'var(--diwa-bg-elevated, transparent)' : 'transparent'};
+    --diwa-table-header-bg: transparent;
+    ${bordered ? `
+    border: var(--diwa-border-width-thin, 1px) solid var(--diwa-border, currentColor) !important;
+    overflow: hidden;
+    ` : ''}
+  }
+
+  :host([hidden]) { display: none; }
+
+  ::slotted(*) {
+    --diwa-table-padding-y: ${compact ? '6px' : '12px'} !important;
+    --diwa-table-padding-y: ${compact ? 'var(--diwa-space-2, 6px)' : 'var(--diwa-space-5, 12px)'} !important;
+    --diwa-table-padding-x: ${compact ? '12px' : '16px'} !important;
+    --diwa-table-padding-x: ${compact ? 'var(--diwa-space-5, 12px)' : 'var(--diwa-space-7, 16px)'} !important;
+    --diwa-table-hover-color: var(--diwa-bg-hover, transparent);
+    --diwa-table-border-color: var(--diwa-border, currentColor);
+    --diwa-table-row-border-width: var(--diwa-border-width-thin, 1px);
+    --diwa-table-column-border: ${bordered ? 'var(--diwa-border-width-thin, 1px) solid var(--diwa-border, currentColor)' : 'none'};
+    --diwa-table-stripe-color: ${striped ? 'var(--diwa-bg-elevated, transparent)' : 'transparent'};
+    --diwa-table-header-bg: transparent;
+  }
+
+  .table {
+    display: table;
+    border-collapse: collapse;
+    background: var(--diwa-bg-surface);
+    font-size: var(--diwa-font-size-base);
+    color: var(--diwa-text-primary);
+    white-space: nowrap;
+    ${layout === 'fixed'
+    ? `
+    table-layout: fixed;
+    min-width: 100%;
+    `
+    : 'width: 100%;'}
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 `;
 
 const DiwaTable = class {
@@ -60,7 +99,8 @@ const DiwaTable = class {
         this.update.emit(e.detail);
     }
     render() {
-        return (h(Host, { key: 'f44c979bd3fe3e5dac8c82d74519f433ae6617f3', "data-theme": this.theme }, h("style", { key: '864a46be2b5682fc4876bb392b6e85484fed3a92', innerHTML: getComponentCss(this.compact, this.layout, this.bordered, this.striped) }), h("table", { key: 'f79f51a9cccc9df05c92b16b013a5e7400d30012', class: "table" }, this.caption && h("caption", { key: 'd7bc36ebb05f3e452c953fc772dfb3988705c04a', class: "sr-only" }, this.caption), h("slot", { key: '4586f22dd7b51da6ec44ca11773297db6a75e1e6' }))));
+        const tableLabel = this.caption || undefined;
+        return (h(Host, { key: 'dcecc9c66f8edbe62c2f7d705ffda0a1f2d76f97', "data-theme": this.theme }, h("style", { key: '183ada7a6f59ba400c6c6132dfb7685718ee2a40', innerHTML: getComponentCss(this.compact, this.layout, this.bordered, this.striped) }), h("div", { key: '707f325328eba674677122a67f737bb47843d6ed', class: "table", role: "table", "aria-label": tableLabel }, h("slot", { key: '00a709c094a8a06a85dff9ad388cfdf8c5a8a7cf' }))));
     }
 };
 

package/dist/esm/diwa-table.entry.js.map

@@ -1 +1 @@
-{"file":"diwa-table.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,CAC7B,OAAgB,EAChB,MAAwB,EACxB,QAAiB,EACjB,OAAgB,KACL;;;;;;;;4BAQe,OAAO,GAAG,4BAA4B,GAAG,4BAA4B;;;kCAG/D,QAAQ,GAAG,wDAAwD,GAAG,MAAM;iCAC7E,OAAO,GAAG,yBAAyB,GAAG,aAAa;;MAE9E,QAAQ,GAAG;;;KAGZ,GAAG,EAAE;;;;;;;;;;;MAWJ,MAAM,KAAK,OAAO,GAAG,sBAAsB,GAAG,EAAE;;;;;;;;;;;;;;CAcrD;;MCnCY,SAAS;IADtB;;;QAE2B,UAAK,GAAU,MAAM,CAAC;QACvC,YAAO,GAAW,EAAE,CAAC;QACrB,YAAO,GAAY,KAAK,CAAC;QACzB,WAAM,GAAqB,MAAM,CAAC;QAClC,aAAQ,GAAY,KAAK,CAAC;QAC1B,YAAO,GAAY,KAAK,CAAC;KAsBlC;IAhBW,iBAAiB,CAAC,CAAsC;QAChE,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;KAC5B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EAC7F,8DAAO,KAAK,EAAC,OAAO,IACjB,IAAI,CAAC,OAAO,IAAI,gEAAS,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAW,EAClE,8DAAQ,CACF,CACH,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-table/diwa-table-styles.ts","src/components/diwa-table/diwa-table.tsx"],"sourcesContent":["export const getComponentCss = (\r\n  compact: boolean,\r\n  layout: 'auto' | 'fixed',\r\n  bordered: boolean,\r\n  striped: boolean,\r\n): string => `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    width: 100%;\r\n    overflow-x: auto;\r\n    background: var(--diwa-bg-surface);\r\n    border-radius: var(--diwa-radius-lg);\r\n    --diwa-table-padding: ${compact ? 'var(--diwa-space-fluid-xs)' : 'var(--diwa-space-fluid-md)'};\r\n    --diwa-table-hover-color: var(--diwa-bg-hover);\r\n    --diwa-table-border-color: var(--diwa-border);\r\n    --diwa-table-column-border: ${bordered ? 'var(--diwa-border-width-thin) solid var(--diwa-border)' : 'none'};\r\n    --diwa-table-stripe-color: ${striped ? 'var(--diwa-bg-elevated)' : 'transparent'};\r\n    --diwa-table-header-bg: var(--diwa-bg-elevated);\r\n    ${bordered ? `\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    overflow: hidden;\r\n    ` : ''}\r\n  }\r\n\r\n  :host([hidden]) { display: none; }\r\n\r\n  .table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    background: var(--diwa-bg-surface);\r\n    font-size: var(--diwa-font-size-base);\r\n    color: var(--diwa-text-primary);\r\n    ${layout === 'fixed' ? 'table-layout: fixed;' : ''}\r\n  }\r\n\r\n  .sr-only {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 1px;\r\n    padding: 0;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    clip: rect(0, 0, 0, 0);\r\n    white-space: nowrap;\r\n    border: 0;\r\n  }\r\n`;\r\n","import { Component, Event, type EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TableUpdateEventDetail } from '../diwa-table-head-cell/types';\r\nimport { getComponentCss } from './diwa-table-styles';\r\n\r\n/**\r\n * @component diwa-table\r\n * Wrapper for a data table. Uses native HTML table layout via display CSS.\r\n * Structure: diwa-table > diwa-table-head > diwa-table-row > diwa-table-head-cell\r\n *                       > diwa-table-body > diwa-table-row > diwa-table-cell\r\n */\r\n@Component({ tag: 'diwa-table', shadow: true })\r\nexport class DiwaTable {\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n  @Prop() caption: string = '';\r\n  @Prop() compact: boolean = false;\r\n  @Prop() layout: 'auto' | 'fixed' = 'auto';\r\n  @Prop() bordered: boolean = false;\r\n  @Prop() striped: boolean = false;\r\n\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<TableUpdateEventDetail>;\r\n\r\n  @Listen('diwaTableUpdate')\r\n  protected handleTableUpdate(e: CustomEvent<TableUpdateEventDetail>): void {\r\n    e.stopPropagation();\r\n    this.update.emit(e.detail);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.compact, this.layout, this.bordered, this.striped)} />\r\n        <table class=\"table\">\r\n          {this.caption && <caption class=\"sr-only\">{this.caption}</caption>}\r\n          <slot />\r\n        </table>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"diwa-table.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,CAC7B,OAAgB,EAChB,MAAwB,EACxB,QAAiB,EACjB,OAAgB,KACL;IACT,OAAO;MACL;;;;;;;GAOH;MACG;;;;;;;GAOH;;;;;;;;;;;;;;kCAc+B,QAAQ,GAAG,2EAA2E,GAAG,MAAM;iCAChG,OAAO,GAAG,sCAAsC,GAAG,aAAa;;MAE3F,QAAQ,GAAG;;;KAGZ,GAAG,EAAE;;;;;;8BAMoB,OAAO,GAAG,KAAK,GAAG,MAAM;8BACxB,OAAO,GAAG,0BAA0B,GAAG,2BAA2B;8BAClE,OAAO,GAAG,MAAM,GAAG,MAAM;8BACzB,OAAO,GAAG,2BAA2B,GAAG,2BAA2B;;;;kCAI/D,QAAQ,GAAG,2EAA2E,GAAG,MAAM;iCAChG,OAAO,GAAG,sCAAsC,GAAG,aAAa;;;;;;;;;;;MAW3F,MAAM,KAAK,OAAO;MAChB;;;KAGH;MACG,cAAc;;;;;;;;;;;;;;CAcrB;;MC1EY,SAAS;IADtB;;;QAE2B,UAAK,GAAU,MAAM,CAAC;QACvC,YAAO,GAAW,EAAE,CAAC;QACrB,YAAO,GAAY,KAAK,CAAC;QACzB,WAAM,GAAqB,MAAM,CAAC;QAClC,aAAQ,GAAY,KAAK,CAAC;QAC1B,YAAO,GAAY,KAAK,CAAC;KAuBlC;IAjBW,iBAAiB,CAAC,CAAsC;QAChE,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;KAC5B;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC;QAE7C,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EAC7F,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,gBAAa,UAAU,IACpD,8DAAQ,CACJ,CACD,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-table/diwa-table-styles.ts","src/components/diwa-table/diwa-table.tsx"],"sourcesContent":["export const getComponentCss = (\n  compact: boolean,\n  layout: 'auto' | 'fixed',\n  bordered: boolean,\n  striped: boolean,\n): string => `\n  ${compact\n    ? `\n  :host {\n    --diwa-table-padding-y: 6px;\n    --diwa-table-padding-y: var(--diwa-space-2, 6px);\n    --diwa-table-padding-x: 12px;\n    --diwa-table-padding-x: var(--diwa-space-5, 12px);\n  }\n  `\n    : `\n  :host {\n    --diwa-table-padding-y: 12px;\n    --diwa-table-padding-y: var(--diwa-space-5, 12px);\n    --diwa-table-padding-x: 16px;\n    --diwa-table-padding-x: var(--diwa-space-7, 16px);\n  }\n  `}\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    width: 100%;\n    overflow-x: auto;\n    background: var(--diwa-bg-surface);\n    border-radius: var(--diwa-radius-lg);\n    color: var(--diwa-text-primary);\n    text-align: start;\n    --diwa-table-hover-color: var(--diwa-bg-hover, transparent);\n    --diwa-table-border-color: var(--diwa-border, currentColor);\n    --diwa-table-row-border-width: var(--diwa-border-width-thin, 1px);\n    --diwa-table-column-border: ${bordered ? 'var(--diwa-border-width-thin, 1px) solid var(--diwa-border, currentColor)' : 'none'};\n    --diwa-table-stripe-color: ${striped ? 'var(--diwa-bg-elevated, transparent)' : 'transparent'};\n    --diwa-table-header-bg: transparent;\n    ${bordered ? `\n    border: var(--diwa-border-width-thin, 1px) solid var(--diwa-border, currentColor) !important;\n    overflow: hidden;\n    ` : ''}\n  }\n\n  :host([hidden]) { display: none; }\n\n  ::slotted(*) {\n    --diwa-table-padding-y: ${compact ? '6px' : '12px'} !important;\n    --diwa-table-padding-y: ${compact ? 'var(--diwa-space-2, 6px)' : 'var(--diwa-space-5, 12px)'} !important;\n    --diwa-table-padding-x: ${compact ? '12px' : '16px'} !important;\n    --diwa-table-padding-x: ${compact ? 'var(--diwa-space-5, 12px)' : 'var(--diwa-space-7, 16px)'} !important;\n    --diwa-table-hover-color: var(--diwa-bg-hover, transparent);\n    --diwa-table-border-color: var(--diwa-border, currentColor);\n    --diwa-table-row-border-width: var(--diwa-border-width-thin, 1px);\n    --diwa-table-column-border: ${bordered ? 'var(--diwa-border-width-thin, 1px) solid var(--diwa-border, currentColor)' : 'none'};\n    --diwa-table-stripe-color: ${striped ? 'var(--diwa-bg-elevated, transparent)' : 'transparent'};\n    --diwa-table-header-bg: transparent;\n  }\n\n  .table {\n    display: table;\n    border-collapse: collapse;\n    background: var(--diwa-bg-surface);\n    font-size: var(--diwa-font-size-base);\n    color: var(--diwa-text-primary);\n    white-space: nowrap;\n    ${layout === 'fixed'\n      ? `\n    table-layout: fixed;\n    min-width: 100%;\n    `\n      : 'width: 100%;'}\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { Component, Event, type EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TableUpdateEventDetail } from '../diwa-table-head-cell/types';\r\nimport { getComponentCss } from './diwa-table-styles';\r\n\r\n/**\n * @component diwa-table\n * Wrapper for a data table. Uses CSS table layout with ARIA roles.\n * Structure: diwa-table > diwa-table-head > diwa-table-row > diwa-table-head-cell\n *                       > diwa-table-body > diwa-table-row > diwa-table-cell\n */\n@Component({ tag: 'diwa-table', shadow: true })\nexport class DiwaTable {\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n  @Prop() caption: string = '';\r\n  @Prop() compact: boolean = false;\r\n  @Prop() layout: 'auto' | 'fixed' = 'auto';\r\n  @Prop() bordered: boolean = false;\r\n  @Prop() striped: boolean = false;\r\n\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<TableUpdateEventDetail>;\r\n\r\n  @Listen('diwaTableUpdate')\r\n  protected handleTableUpdate(e: CustomEvent<TableUpdateEventDetail>): void {\r\n    e.stopPropagation();\r\n    this.update.emit(e.detail);\r\n  }\r\n\r\n  render() {\n    const tableLabel = this.caption || undefined;\n\n    return (\n      <Host data-theme={this.theme}>\n        <style innerHTML={getComponentCss(this.compact, this.layout, this.bordered, this.striped)} />\n        <div class=\"table\" role=\"table\" aria-label={tableLabel}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/diwa-tabs-bar.entry.js

@@ -214,7 +214,7 @@ const DiwaTabsBar = class {
         });
     }
     render() {
-        return (h(Host, { key: '5d85c7ca55c93cf266fb1f9469f602c8d17194b4', role: "tablist", "data-theme": this.theme }, h("style", { key: 'd4e17c0bcdd6d656990ac95f72bec8bd2a33ce46', innerHTML: getComponentCss() }), h("div", { key: '5850b9e2b9551db5b1c7651c167d4a0927d94ffb', class: "bar" }, h("slot", { key: '01727b6bf42cce8dfdca1d886ca717d154babdb3' }))));
+        return (h(Host, { key: '0dc13736a3b995d469880639e2af554544c5e5ea', role: "tablist", "data-theme": this.theme }, h("style", { key: '7792f75ccf668f4ab60ad8817bd504507b025797', innerHTML: getComponentCss() }), h("div", { key: '728725f33c758c38a6e99335d4b7741ea4064b76', class: "bar" }, h("slot", { key: '87f09b4877890425b2b2c5187d62f9fc41ecd5d7' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/diwa-tabs-item.entry.js

@@ -23,7 +23,7 @@ const DiwaTabsItem = class {
         this.active = false;
     }
     render() {
-        return (h(Host, { key: 'f6ec3970642fee656b67bd7af43c37121ebf4c93', role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', "data-theme": this.theme }, h("style", { key: '2ab72810f41d6680c657f375186f03839f5a9d78', innerHTML: getComponentCss(this.active) }), h("slot", { key: '7508c2bd4a5e797400b26446f9531b80ee38cc2a' })));
+        return (h(Host, { key: '28fc39ff87fcb65a40522bf64eb5a0e9e2c0ed2b', role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', "data-theme": this.theme }, h("style", { key: '3cc6d2b31959fd573f8abde754b66ee99824f298', innerHTML: getComponentCss(this.active) }), h("slot", { key: 'b71bbd0c4836013b48c588e6c74670292fa2c36c' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/diwa-tabs.entry.js

@@ -24,11 +24,11 @@ const getComponentCss = () => `
     display: none;
   }
 
-  .tab-btn {
-    display: inline-flex;
-    align-items: center;
-    min-height: var(--diwa-touch-target-min-size, 44px);
-    padding: var(--diwa-space-4) var(--diwa-space-7);
+  .tab-btn {
+    display: inline-flex;
+    align-items: center;
+    min-height: var(--diwa-touch-target-min-size, 44px);
+    padding: var(--diwa-space-4) var(--diwa-space-7);
     border: none;
     border-bottom: var(--diwa-border-width-base) solid transparent;
     background: transparent;
@@ -42,11 +42,11 @@ const getComponentCss = () => `
     font-weight: var(--diwa-font-weight-medium);
   }
 
-  @media (hover: hover) and (pointer: fine) {
-    .tab-btn:hover {
-      color: var(--diwa-text-primary);
-    }
-  }
+  @media (hover: hover) and (pointer: fine) {
+    .tab-btn:hover {
+      color: var(--diwa-text-primary);
+    }
+  }
 
   .tab-btn[aria-selected="true"] {
     color: var(--diwa-accent);
@@ -57,7 +57,7 @@ const getComponentCss = () => `
   ${getFocusStyle('.tab-btn')}
 
   .panels {
-    padding-top: var(--diwa-space-4);
+    padding: var(--diwa-space-4) var(--diwa-space-7);
   }
 
   ${getReducedMotionStyle('.tab-btn')}
@@ -100,7 +100,7 @@ const DiwaTabs = class {
     }
     render() {
         const items = this.getItems();
-        return (h(Host, { key: 'fc8d9535c8fc57e335842f9687e864679320a5ea', "data-theme": this.theme }, h("style", { key: '471a5b372635bef38e38198b5793b3e3f96cb17b', innerHTML: getComponentCss() }), h("div", { key: '0321394c0b6cdd768025d9fd7cee711a05197cfa', class: "bar", role: "tablist" }, items.map((item, i) => (h("button", { class: "tab-btn", key: i, role: "tab", type: "button", "aria-selected": i === this.activeTabIndex ? 'true' : 'false', "aria-controls": `panel-${i}`, tabindex: i === this.activeTabIndex ? 0 : -1, onClick: () => this.handleTabClick(i) }, item.label || `Tab ${i + 1}`)))), h("div", { key: 'a1480ac6ff722ffc09449141e79070801e5886c7', class: "panels" }, h("slot", { key: '98c11b57681a9e9831c233adcf2be283c5fdb0b7' }))));
+        return (h(Host, { key: '58e19e00620feeab361bb40e4b8ae53a5aae0bd4', "data-theme": this.theme }, h("style", { key: '3ff3a46b7df5caeaf1c670f72ca725f8218618c7', innerHTML: getComponentCss() }), h("div", { key: 'a1473f8f9bb7d88176d8825879985eed0a3fabba', class: "bar", role: "tablist" }, items.map((item, i) => (h("button", { class: "tab-btn", key: i, role: "tab", type: "button", "aria-selected": i === this.activeTabIndex ? 'true' : 'false', "aria-controls": `panel-${i}`, tabindex: i === this.activeTabIndex ? 0 : -1, onClick: () => this.handleTabClick(i) }, item.label || `Tab ${i + 1}`)))), h("div", { key: '49a664dd1f219421c05963cea3c4172e118b280a', class: "panels" }, h("slot", { key: '41c47202452a8de31d9e64c20cb4728047a53b5a' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/diwa-tabs.entry.js.map

@@ -1 +1 @@
-{"file":"diwa-tabs.entry.js","mappings":";;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqDzC,aAAa,CAAC,UAAU,CAAC;;;;;;IAMzB,qBAAqB,CAAC,UAAU,CAAC;CACpC;;MCvCY,QAAQ;IAJrB;;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAI/C,mBAAc,GAAW,CAAC,CAAC;KAoE5B;IA3DC,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,kBAAkB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAEO,QAAQ;QACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAA8B,CAAC;KAC9F;IAEO,SAAS;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC;YACnB,IAAY,CAAC,MAAM,GAAG,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC;YACjD,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC;SACvC,CAAC,CAAC;KACJ;IAEO,cAAc,CAAC,KAAa;QAClC,IAAI,KAAK,KAAK,IAAI,CAAC,cAAc;YAAE,OAAO;QAC1C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAE9B,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,4DAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,IAC5B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACjB,cACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,mBACE,CAAC,KAAK,IAAI,CAAC,cAAc,GAAG,MAAM,GAAG,OAAO,mBAC5C,SAAS,CAAC,EAAE,EAC3B,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,cAAc,GAAG,CAAC,GAAG,CAAC,CAAC,EAC5C,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAEnC,IAAY,CAAC,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAC/B,CACV,CAAC,CACE,EACN,4DAAK,KAAK,EAAC,QAAQ,IACjB,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/diwa-tabs/diwa-tabs-styles.ts","src/components/diwa-tabs/diwa-tabs.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .bar {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    gap: 0;\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    overflow-x: auto;\r\n    scrollbar-width: none;\r\n  }\r\n\r\n  .bar::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  .tab-btn {\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--diwa-touch-target-min-size, 44px);\n    padding: var(--diwa-space-4) var(--diwa-space-7);\n    border: none;\r\n    border-bottom: var(--diwa-border-width-base) solid transparent;\r\n    background: transparent;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-family: inherit;\r\n    white-space: nowrap;\r\n    cursor: pointer;\r\n    margin-bottom: -1px;\r\n    transition: color var(--diwa-transition-base), border-color var(--diwa-transition-base);\r\n    color: var(--diwa-text-secondary);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n  }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\n    .tab-btn:hover {\n      color: var(--diwa-text-primary);\n    }\n  }\n\r\n  .tab-btn[aria-selected=\"true\"] {\r\n    color: var(--diwa-accent);\r\n    border-bottom-color: var(--diwa-accent);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n  }\r\n\r\n  ${getFocusStyle('.tab-btn')}\r\n\r\n  .panels {\r\n    padding-top: var(--diwa-space-4);\r\n  }\r\n\r\n  ${getReducedMotionStyle('.tab-btn')}\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\r\nimport type { TabsUpdateEventDetail } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-tabs-styles';\r\n\r\n/**\r\n * @component diwa-tabs\r\n *\r\n * A full tabs component consisting of an integrated tab bar and panel area.\r\n * Accepts `diwa-tabs-item` elements as children. The component renders\r\n * its own horizontal tab buttons and shows only the panel for the active\r\n * tab.\r\n *\r\n * Usage:\r\n *   <diwa-tabs active-tab-index={0} onupdate={e => setTab(e.detail.activeTabIndex)}>\r\n *     <diwa-tabs-item label=\"Overview\">Content A</diwa-tabs-item>\r\n *     <diwa-tabs-item label=\"Details\">Content B</diwa-tabs-item>\r\n *   </diwa-tabs>\r\n */\r\n@Component({\r\n  tag: 'diwa-tabs',\r\n  shadow: true,\r\n})\r\nexport class DiwaTabs {\r\n  @Element() host!: HTMLDiwaTabsElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Zero-based index of the currently active tab. */\r\n  @Prop({ mutable: true, attribute: 'active-tab-index' })\r\n  activeTabIndex: number = 0;\r\n\r\n  /**\r\n   * Emitted when the user selects a different tab.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<TabsUpdateEventDetail>;\r\n\r\n  @Watch('activeTabIndex')\r\n  handleIndexChange() {\r\n    this.syncItems();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.syncItems();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.syncItems();\r\n  }\r\n\r\n  private getItems(): HTMLDiwaTabsItemElement[] {\r\n    return Array.from(this.host.querySelectorAll('diwa-tabs-item')) as HTMLDiwaTabsItemElement[];\r\n  }\r\n\r\n  private syncItems() {\r\n    const items = this.getItems();\r\n    items.forEach((item, i) => {\r\n      (item as any).active = i === this.activeTabIndex;\r\n      item.setAttribute('id', `panel-${i}`);\r\n    });\r\n  }\r\n\r\n  private handleTabClick(index: number) {\r\n    if (index === this.activeTabIndex) return;\r\n    this.activeTabIndex = index;\r\n    this.update.emit({ activeTabIndex: index });\r\n    this.syncItems();\r\n  }\r\n\r\n  render() {\r\n    const items = this.getItems();\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <div class=\"bar\" role=\"tablist\">\r\n          {items.map((item, i) => (\r\n            <button\r\n              class=\"tab-btn\"\r\n              key={i}\r\n              role=\"tab\"\r\n              type=\"button\"\r\n              aria-selected={i === this.activeTabIndex ? 'true' : 'false'}\r\n              aria-controls={`panel-${i}`}\r\n              tabindex={i === this.activeTabIndex ? 0 : -1}\r\n              onClick={() => this.handleTabClick(i)}\r\n            >\r\n              {(item as any).label || `Tab ${i + 1}`}\r\n            </button>\r\n          ))}\r\n        </div>\r\n        <div class=\"panels\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"diwa-tabs.entry.js","mappings":";;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqDzC,aAAa,CAAC,UAAU,CAAC;;;;;;IAMzB,qBAAqB,CAAC,UAAU,CAAC;CACpC;;MCvCY,QAAQ;IAJrB;;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAI/C,mBAAc,GAAW,CAAC,CAAC;KAoE5B;IA3DC,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,kBAAkB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAEO,QAAQ;QACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAA8B,CAAC;KAC9F;IAEO,SAAS;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC;YACnB,IAAY,CAAC,MAAM,GAAG,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC;YACjD,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC;SACvC,CAAC,CAAC;KACJ;IAEO,cAAc,CAAC,KAAa;QAClC,IAAI,KAAK,KAAK,IAAI,CAAC,cAAc;YAAE,OAAO;QAC1C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAE9B,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,4DAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,IAC5B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACjB,cACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,mBACE,CAAC,KAAK,IAAI,CAAC,cAAc,GAAG,MAAM,GAAG,OAAO,mBAC5C,SAAS,CAAC,EAAE,EAC3B,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,cAAc,GAAG,CAAC,GAAG,CAAC,CAAC,EAC5C,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAEnC,IAAY,CAAC,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAC/B,CACV,CAAC,CACE,EACN,4DAAK,KAAK,EAAC,QAAQ,IACjB,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/diwa-tabs/diwa-tabs-styles.ts","src/components/diwa-tabs/diwa-tabs.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .bar {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    gap: 0;\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    overflow-x: auto;\r\n    scrollbar-width: none;\r\n  }\r\n\r\n  .bar::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  .tab-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    min-height: var(--diwa-touch-target-min-size, 44px);\r\n    padding: var(--diwa-space-4) var(--diwa-space-7);\r\n    border: none;\r\n    border-bottom: var(--diwa-border-width-base) solid transparent;\r\n    background: transparent;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-family: inherit;\r\n    white-space: nowrap;\r\n    cursor: pointer;\r\n    margin-bottom: -1px;\r\n    transition: color var(--diwa-transition-base), border-color var(--diwa-transition-base);\r\n    color: var(--diwa-text-secondary);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n  }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\r\n    .tab-btn:hover {\r\n      color: var(--diwa-text-primary);\r\n    }\r\n  }\r\n\r\n  .tab-btn[aria-selected=\"true\"] {\r\n    color: var(--diwa-accent);\r\n    border-bottom-color: var(--diwa-accent);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n  }\r\n\r\n  ${getFocusStyle('.tab-btn')}\r\n\r\n  .panels {\r\n    padding: var(--diwa-space-4) var(--diwa-space-7);\r\n  }\r\n\r\n  ${getReducedMotionStyle('.tab-btn')}\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\r\nimport type { TabsUpdateEventDetail } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-tabs-styles';\r\n\r\n/**\r\n * @component diwa-tabs\r\n *\r\n * A full tabs component consisting of an integrated tab bar and panel area.\r\n * Accepts `diwa-tabs-item` elements as children. The component renders\r\n * its own horizontal tab buttons and shows only the panel for the active\r\n * tab.\r\n *\r\n * Usage:\r\n *   <diwa-tabs active-tab-index={0} onupdate={e => setTab(e.detail.activeTabIndex)}>\r\n *     <diwa-tabs-item label=\"Overview\">Content A</diwa-tabs-item>\r\n *     <diwa-tabs-item label=\"Details\">Content B</diwa-tabs-item>\r\n *   </diwa-tabs>\r\n */\r\n@Component({\r\n  tag: 'diwa-tabs',\r\n  shadow: true,\r\n})\r\nexport class DiwaTabs {\r\n  @Element() host!: HTMLDiwaTabsElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Zero-based index of the currently active tab. */\r\n  @Prop({ mutable: true, attribute: 'active-tab-index' })\r\n  activeTabIndex: number = 0;\r\n\r\n  /**\r\n   * Emitted when the user selects a different tab.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<TabsUpdateEventDetail>;\r\n\r\n  @Watch('activeTabIndex')\r\n  handleIndexChange() {\r\n    this.syncItems();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.syncItems();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.syncItems();\r\n  }\r\n\r\n  private getItems(): HTMLDiwaTabsItemElement[] {\r\n    return Array.from(this.host.querySelectorAll('diwa-tabs-item')) as HTMLDiwaTabsItemElement[];\r\n  }\r\n\r\n  private syncItems() {\r\n    const items = this.getItems();\r\n    items.forEach((item, i) => {\r\n      (item as any).active = i === this.activeTabIndex;\r\n      item.setAttribute('id', `panel-${i}`);\r\n    });\r\n  }\r\n\r\n  private handleTabClick(index: number) {\r\n    if (index === this.activeTabIndex) return;\r\n    this.activeTabIndex = index;\r\n    this.update.emit({ activeTabIndex: index });\r\n    this.syncItems();\r\n  }\r\n\r\n  render() {\r\n    const items = this.getItems();\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <div class=\"bar\" role=\"tablist\">\r\n          {items.map((item, i) => (\r\n            <button\r\n              class=\"tab-btn\"\r\n              key={i}\r\n              role=\"tab\"\r\n              type=\"button\"\r\n              aria-selected={i === this.activeTabIndex ? 'true' : 'false'}\r\n              aria-controls={`panel-${i}`}\r\n              tabindex={i === this.activeTabIndex ? 0 : -1}\r\n              onClick={() => this.handleTabClick(i)}\r\n            >\r\n              {(item as any).label || `Tab ${i + 1}`}\r\n            </button>\r\n          ))}\r\n        </div>\r\n        <div class=\"panels\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-tag-dismissible.entry.js

@@ -31,8 +31,8 @@ const getComponentCss = (variant, compact) => {
     const border = VARIANT_BORDER[variant];
     const paddingY = compact ? '1px' : '2px';
     const paddingX = compact ? '6px' : '10px';
+    const paddingXRight = compact ? '4px' : '6px';
     const fontSize = compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-md)';
-    const iconSize = compact ? '12px' : '14px';
     return `
     :host {
       display: inline-flex;
@@ -44,11 +44,11 @@ const getComponentCss = (variant, compact) => {
       display: inline-flex;
       align-items: center;
       gap: var(--diwa-space-1);
-      padding: ${paddingY} ${paddingX};
+      padding: ${paddingY} ${paddingXRight} ${paddingY} ${paddingX};
       font-family: var(--diwa-font-family-base);
       font-size: ${fontSize};
       font-weight: var(--diwa-font-weight-medium);
-      line-height: var(--diwa-line-height-tight);
+      line-height: 1;
       color: ${color};
       background: ${bg};
       border: var(--diwa-border-width-thin) solid ${border};
@@ -60,9 +60,8 @@ const getComponentCss = (variant, compact) => {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: ${iconSize};
-      height: ${iconSize};
-      margin-left: var(--diwa-space-0-5);
+      width: 12px;
+      height: 12px;
       padding: 0;
       background: none;
       border: none;
@@ -99,8 +98,7 @@ const DiwaTagDismissible = class {
         };
     }
     render() {
-        const iconSize = this.compact ? 12 : 14;
-        return (h(Host, { key: 'c8ec3a53f5d72a1a8c3f7395287261167408263c', "data-theme": this.theme }, h("style", { key: 'b89acb19c8df5f132aa1a4eeeca2f81333340fdd', innerHTML: getComponentCss(this.variant, this.compact) }), h("span", { key: '6a82c4cb61b84eb631b7cc441314929ab2ab2496', class: "tag" }, h("slot", { key: '4236c4d1ac0f0579804b0a1994ced421670b685c' }), h("button", { key: '831e2295cbd23372f7ba0daa114bef27e0d8c25a', class: "dismiss", type: "button", "aria-label": this.label, onClick: this.handleDismiss }, h("svg", { key: '8172fd785be3d5cea0a0b38243aac3a1e9f2afa8', xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("line", { key: '632af21cd22791194ffdd4a3127b699b359191b6', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: '45285993ae6ae899a06dab3d903c883632ef262a', x1: "6", y1: "6", x2: "18", y2: "18" }))))));
+        return (h(Host, { key: 'e38cfaa8ab96522f4fe516b64efcadd9a8c12661', "data-theme": this.theme }, h("style", { key: '3e8c178617ab71f172ee6878ad8f1260f6389aa7', innerHTML: getComponentCss(this.variant, this.compact) }), h("span", { key: '5b3f671bdb71327e7f2fb227ce29b6d9c8dea36f', class: "tag" }, h("slot", { key: 'e8372472821b469f1e3a262415595c3bd58345c5' }), h("button", { key: '093dfd628497cac1a886543eeb48927e68753822', class: "dismiss", type: "button", "aria-label": this.label, onClick: this.handleDismiss }, h("svg", { key: 'd56cdca4db4fbd9144a9c06eb4d12c44478fa3af', xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("line", { key: '047c1338afb7d612853d76c468ab926d810e77de', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: 'f2576ea09474cb17cb4dbe74b878ccf62debf03e', x1: "6", y1: "6", x2: "18", y2: "18" }))))));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/esm/diwa-tag-dismissible.entry.js.map

@@ -1 +1 @@
-{"file":"diwa-tag-dismissible.entry.js","mappings":";;;AAGA,MAAM,UAAU,GAA+B;IAC7C,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,uBAAuB;IAChC,IAAI,EAAK,oCAAoC;IAC7C,OAAO,EAAE,uCAAuC;IAChD,OAAO,EAAE,uCAAuC;IAChD,KAAK,EAAI,qCAAqC;CAC/C,CAAC;AACF,MAAM,aAAa,GAA+B;IAChD,OAAO,EAAE,0BAA0B;IACnC,OAAO,EAAE,oBAAoB;IAC7B,IAAI,EAAK,+BAA+B;IACxC,OAAO,EAAE,kCAAkC;IAC3C,OAAO,EAAE,kCAAkC;IAC3C,KAAK,EAAI,gCAAgC;CAC1C,CAAC;AACF,MAAM,cAAc,GAA+B;IACjD,OAAO,EAAE,oBAAoB;IAC7B,OAAO,EAAE,oBAAoB;IAC7B,IAAI,EAAK,4BAA4B;IACrC,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAI,aAAa;CACvB,CAAC;AAEK,MAAM,eAAe,GAAG,CAAC,OAAmB,EAAE,OAAgB;IACnE,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC;IACzC,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAC1C,MAAM,QAAQ,GAAG,OAAO,GAAG,0BAA0B,GAAG,0BAA0B,CAAC;IACnF,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAE3C,OAAO;;;;;;;;;;;iBAWQ,QAAQ,IAAI,QAAQ;;mBAElB,QAAQ;;;eAGZ,KAAK;oBACA,EAAE;oDAC8B,MAAM;;;;;;;;;eAS3C,QAAQ;gBACP,QAAQ;;;;;;;;;;;;;;;MAelB,aAAa,CAAC,UAAU,CAAC;;MAEzB,qBAAqB,CAAC,UAAU,CAAC;GACpC,CAAC;AACJ,CAAC;;MCxEY,kBAAkB;IAJ/B;;;;QAM2B,YAAO,GAAe,SAAS,CAAC;;QAGhC,YAAO,GAAY,KAAK,CAAC;;QAG1C,UAAK,GAAY,QAAQ,CAAC;;QAGT,UAAK,GAAU,MAAM,CAAC;QAKvC,kBAAa,GAAG;YACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB,CAAC;KAoCH;IAlCC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,CAAC;QAExC,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EACjE,6DAAM,KAAK,EAAC,KAAK,IACf,8DAAQ,EACR,+DACE,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,aAAa,IAE3B,4DACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,iBACX,MAAM,IAElB,6DAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,EACtC,6DAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,CAClC,CACC,CACJ,CACF,EACP;KACH;;;;;;","names":[],"sources":["src/components/diwa-tag-dismissible/diwa-tag-dismissible-styles.ts","src/components/diwa-tag-dismissible/diwa-tag-dismissible.tsx"],"sourcesContent":["import type { TagVariant } from '../diwa-tag/types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nconst VARIANT_BG: Record<TagVariant, string> = {\r\n  neutral: 'var(--diwa-bg-surface)',\r\n  primary: 'var(--diwa-accent-bg)',\r\n  info:    'var(--diwa-notification-info-soft)',\r\n  success: 'var(--diwa-notification-success-soft)',\r\n  warning: 'var(--diwa-notification-warning-soft)',\r\n  error:   'var(--diwa-notification-error-soft)',\r\n};\r\nconst VARIANT_COLOR: Record<TagVariant, string> = {\r\n  neutral: 'var(--diwa-text-primary)',\r\n  primary: 'var(--diwa-accent)',\r\n  info:    'var(--diwa-notification-info)',\r\n  success: 'var(--diwa-notification-success)',\r\n  warning: 'var(--diwa-notification-warning)',\r\n  error:   'var(--diwa-notification-error)',\r\n};\r\nconst VARIANT_BORDER: Record<TagVariant, string> = {\r\n  neutral: 'var(--diwa-border)',\r\n  primary: 'var(--diwa-accent)',\r\n  info:    'var(--diwa-color-info-300)',\r\n  success: 'transparent',\r\n  warning: 'transparent',\r\n  error:   'transparent',\r\n};\r\n\r\nexport const getComponentCss = (variant: TagVariant, compact: boolean): string => {\r\n  const bg = VARIANT_BG[variant];\r\n  const color = VARIANT_COLOR[variant];\r\n  const border = VARIANT_BORDER[variant];\r\n  const paddingY = compact ? '1px' : '2px';\r\n  const paddingX = compact ? '6px' : '10px';\r\n  const fontSize = compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-md)';\r\n  const iconSize = compact ? '12px' : '14px';\r\n\r\n  return `\r\n    :host {\r\n      display: inline-flex;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .tag {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--diwa-space-1);\r\n      padding: ${paddingY} ${paddingX};\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${fontSize};\r\n      font-weight: var(--diwa-font-weight-medium);\r\n      line-height: var(--diwa-line-height-tight);\r\n      color: ${color};\r\n      background: ${bg};\r\n      border: var(--diwa-border-width-thin) solid ${border};\r\n      border-radius: var(--diwa-radius-sm);\r\n      white-space: nowrap;\r\n      user-select: none;\r\n    }\r\n    .dismiss {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: ${iconSize};\r\n      height: ${iconSize};\r\n      margin-left: var(--diwa-space-0-5);\r\n      padding: 0;\r\n      background: none;\r\n      border: none;\r\n      border-radius: var(--diwa-radius-xs);\r\n      color: inherit;\r\n      cursor: pointer;\r\n      flex-shrink: 0;\r\n      opacity: var(--diwa-opacity-muted);\r\n      transition: opacity var(--diwa-transition-base);\r\n    }\r\n    .dismiss:hover {\r\n      opacity: 1;\r\n    }\r\n    ${getFocusStyle('.dismiss')}\r\n\r\n    ${getReducedMotionStyle('.dismiss')}\r\n  `;\r\n};\r\n","import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TagVariant } from './types';\r\nimport { getComponentCss } from './diwa-tag-dismissible-styles';\r\n\r\n/**\r\n * @slot default — Tag label content.\r\n */\r\n@Component({\r\n  tag: 'diwa-tag-dismissible',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaTagDismissible {\r\n  /** Visual style variant. */\r\n  @Prop({ reflect: true }) variant: TagVariant = 'neutral';\r\n\r\n  /** Renders a compact (smaller) version of the tag. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /** Accessible label for the dismiss button. */\r\n  @Prop() label?: string = 'Remove';\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Emitted when the dismiss button is clicked. */\r\n  @Event({ bubbles: false, composed: false }) dismiss!: EventEmitter<void>;\r\n\r\n  private handleDismiss = (): void => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  render() {\r\n    const iconSize = this.compact ? 12 : 14;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.variant, this.compact)} />\r\n        <span class=\"tag\">\r\n          <slot />\r\n          <button\r\n            class=\"dismiss\"\r\n            type=\"button\"\r\n            aria-label={this.label}\r\n            onClick={this.handleDismiss}\r\n          >\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width={iconSize}\r\n              height={iconSize}\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n            </svg>\r\n          </button>\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"diwa-tag-dismissible.entry.js","mappings":";;;AAGA,MAAM,UAAU,GAA+B;IAC7C,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,uBAAuB;IAChC,IAAI,EAAK,oCAAoC;IAC7C,OAAO,EAAE,uCAAuC;IAChD,OAAO,EAAE,uCAAuC;IAChD,KAAK,EAAI,qCAAqC;CAC/C,CAAC;AACF,MAAM,aAAa,GAA+B;IAChD,OAAO,EAAE,0BAA0B;IACnC,OAAO,EAAE,oBAAoB;IAC7B,IAAI,EAAK,+BAA+B;IACxC,OAAO,EAAE,kCAAkC;IAC3C,OAAO,EAAE,kCAAkC;IAC3C,KAAK,EAAI,gCAAgC;CAC1C,CAAC;AACF,MAAM,cAAc,GAA+B;IACjD,OAAO,EAAE,oBAAoB;IAC7B,OAAO,EAAE,oBAAoB;IAC7B,IAAI,EAAK,4BAA4B;IACrC,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAI,aAAa;CACvB,CAAC;AAEK,MAAM,eAAe,GAAG,CAAC,OAAmB,EAAE,OAAgB;IACnE,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC;IACzC,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAC1C,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC;IAC9C,MAAM,QAAQ,GAAG,OAAO,GAAG,0BAA0B,GAAG,0BAA0B,CAAC;IAEnF,OAAO;;;;;;;;;;;iBAWQ,QAAQ,IAAI,aAAa,IAAI,QAAQ,IAAI,QAAQ;;mBAE/C,QAAQ;;;eAGZ,KAAK;oBACA,EAAE;oDAC8B,MAAM;;;;;;;;;;;;;;;;;;;;;;;;MAwBpD,aAAa,CAAC,UAAU,CAAC;;MAEzB,qBAAqB,CAAC,UAAU,CAAC;GACpC,CAAC;AACJ,CAAC;;MCvEY,kBAAkB;IAJ/B;;;;QAM2B,YAAO,GAAe,SAAS,CAAC;;QAGhC,YAAO,GAAY,KAAK,CAAC;;QAG1C,UAAK,GAAY,QAAQ,CAAC;;QAGT,UAAK,GAAU,MAAM,CAAC;QAKvC,kBAAa,GAAG;YACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB,CAAC;KAkCH;IAhCC,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EACjE,6DAAM,KAAK,EAAC,KAAK,IACf,8DAAQ,EACR,+DACE,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,aAAa,IAE3B,4DACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,iBACX,MAAM,IAElB,6DAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,EACtC,6DAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,CAClC,CACC,CACJ,CACF,EACP;KACH;;;;;;","names":[],"sources":["src/components/diwa-tag-dismissible/diwa-tag-dismissible-styles.ts","src/components/diwa-tag-dismissible/diwa-tag-dismissible.tsx"],"sourcesContent":["import type { TagVariant } from '../diwa-tag/types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nconst VARIANT_BG: Record<TagVariant, string> = {\r\n  neutral: 'var(--diwa-bg-surface)',\r\n  primary: 'var(--diwa-accent-bg)',\r\n  info:    'var(--diwa-notification-info-soft)',\r\n  success: 'var(--diwa-notification-success-soft)',\r\n  warning: 'var(--diwa-notification-warning-soft)',\r\n  error:   'var(--diwa-notification-error-soft)',\r\n};\r\nconst VARIANT_COLOR: Record<TagVariant, string> = {\r\n  neutral: 'var(--diwa-text-primary)',\r\n  primary: 'var(--diwa-accent)',\r\n  info:    'var(--diwa-notification-info)',\r\n  success: 'var(--diwa-notification-success)',\r\n  warning: 'var(--diwa-notification-warning)',\r\n  error:   'var(--diwa-notification-error)',\r\n};\r\nconst VARIANT_BORDER: Record<TagVariant, string> = {\r\n  neutral: 'var(--diwa-border)',\r\n  primary: 'var(--diwa-accent)',\r\n  info:    'var(--diwa-color-info-300)',\r\n  success: 'transparent',\r\n  warning: 'transparent',\r\n  error:   'transparent',\r\n};\r\n\r\nexport const getComponentCss = (variant: TagVariant, compact: boolean): string => {\r\n  const bg = VARIANT_BG[variant];\r\n  const color = VARIANT_COLOR[variant];\r\n  const border = VARIANT_BORDER[variant];\r\n  const paddingY = compact ? '1px' : '2px';\r\n  const paddingX = compact ? '6px' : '10px';\r\n  const paddingXRight = compact ? '4px' : '6px';\r\n  const fontSize = compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-md)';\r\n\r\n  return `\r\n    :host {\r\n      display: inline-flex;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .tag {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--diwa-space-1);\r\n      padding: ${paddingY} ${paddingXRight} ${paddingY} ${paddingX};\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${fontSize};\r\n      font-weight: var(--diwa-font-weight-medium);\r\n      line-height: 1;\r\n      color: ${color};\r\n      background: ${bg};\r\n      border: var(--diwa-border-width-thin) solid ${border};\r\n      border-radius: var(--diwa-radius-sm);\r\n      white-space: nowrap;\r\n      user-select: none;\r\n    }\r\n    .dismiss {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: 12px;\r\n      height: 12px;\r\n      padding: 0;\r\n      background: none;\r\n      border: none;\r\n      border-radius: var(--diwa-radius-xs);\r\n      color: inherit;\r\n      cursor: pointer;\r\n      flex-shrink: 0;\r\n      opacity: var(--diwa-opacity-muted);\r\n      transition: opacity var(--diwa-transition-base);\r\n    }\r\n    .dismiss:hover {\r\n      opacity: 1;\r\n    }\r\n    ${getFocusStyle('.dismiss')}\r\n\r\n    ${getReducedMotionStyle('.dismiss')}\r\n  `;\r\n};\r\n","import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TagVariant } from './types';\r\nimport { getComponentCss } from './diwa-tag-dismissible-styles';\r\n\r\n/**\r\n * @slot default — Tag label content.\r\n */\r\n@Component({\r\n  tag: 'diwa-tag-dismissible',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaTagDismissible {\r\n  /** Visual style variant. */\r\n  @Prop({ reflect: true }) variant: TagVariant = 'neutral';\r\n\r\n  /** Renders a compact (smaller) version of the tag. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /** Accessible label for the dismiss button. */\r\n  @Prop() label?: string = 'Remove';\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Emitted when the dismiss button is clicked. */\r\n  @Event({ bubbles: false, composed: false }) dismiss!: EventEmitter<void>;\r\n\r\n  private handleDismiss = (): void => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.variant, this.compact)} />\r\n        <span class=\"tag\">\r\n          <slot />\r\n          <button\r\n            class=\"dismiss\"\r\n            type=\"button\"\r\n            aria-label={this.label}\r\n            onClick={this.handleDismiss}\r\n          >\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width={12}\r\n              height={12}\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n            </svg>\r\n          </button>\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-tag.entry.js

@@ -52,7 +52,7 @@ const getComponentCss = (variant, compact) => {
       font-family: var(--diwa-font-family-base);
       font-size: ${fontSize};
       font-weight: var(--diwa-font-weight-medium);
-      line-height: var(--diwa-line-height-tight);
+      line-height: 1;
       color: ${color};
       background: ${bg};
       border: var(--diwa-border-width-thin) solid ${border};
@@ -79,7 +79,7 @@ const DiwaTag = class {
         this.theme = 'dark';
     }
     render() {
-        return (h(Host, { key: 'dfa84844b35c6b8235c98e808a9b9dd6d477d1fa', "data-theme": this.theme }, h("style", { key: '8e4f31a14ed706ab4ed23f29b1cc2e0f62ad2574', innerHTML: getComponentCss(this.variant, this.compact) }), h("span", { key: '6114522f5907c57eb3431943cd54d74cda2efc2b', class: "tag" }, this.icon && (h("span", { key: 'a5ab13a007c58c6ad70b3d50f3432513a6c50158', class: "icon" }, h("diwa-icon", { key: 'd8a27e315e5cd715bb6eddd17fe776d9ac2b04a2', name: this.icon, size: this.compact ? 12 : 14 }))), h("slot", { key: 'a0009c67eb1a12d3fb4de706b22d15cc68f17942' }))));
+        return (h(Host, { key: 'd42fb54eff16c99a228aadb0705555b46f12e32f', "data-theme": this.theme }, h("style", { key: '5a970176294cd830196d20211c3de04bafe432cb', innerHTML: getComponentCss(this.variant, this.compact) }), h("span", { key: 'cf96cb76fd620897df59dab8cd85c49b2905112c', class: "tag" }, this.icon && (h("span", { key: 'e5f269560d17a45c0072dadeab04018592b13f1a', class: "icon" }, h("diwa-icon", { key: '355758d40a0a2539b0ec7eba9710e57a308e510e', name: this.icon, size: this.compact ? 12 : 14 }))), h("slot", { key: '640ad0e5c11ecaebd98fe846f48b81938c7c9db2' }))));
     }
 };
 

package/dist/esm/diwa-tag.entry.js.map

@@ -1 +1 @@
-{"file":"diwa-tag.entry.js","mappings":";;AAEA,MAAM,WAAW,GAAsE;IACrF,OAAO,EAAE;QACP,EAAE,EAAE,wBAAwB;QAC5B,KAAK,EAAE,0BAA0B;QACjC,MAAM,EAAE,oBAAoB;KAC7B;IACD,OAAO,EAAE;QACP,EAAE,EAAE,uBAAuB;QAC3B,KAAK,EAAE,oBAAoB;QAC3B,MAAM,EAAE,oBAAoB;KAC7B;IACD,IAAI,EAAE;QACJ,EAAE,EAAE,oCAAoC;QACxC,KAAK,EAAE,+BAA+B;QACtC,MAAM,EAAE,4BAA4B;KACrC;IACD,OAAO,EAAE;QACP,EAAE,EAAE,uCAAuC;QAC3C,KAAK,EAAE,kCAAkC;QACzC,MAAM,EAAE,aAAa;KACtB;IACD,OAAO,EAAE;QACP,EAAE,EAAE,uCAAuC;QAC3C,KAAK,EAAE,kCAAkC;QACzC,MAAM,EAAE,aAAa;KACtB;IACD,KAAK,EAAE;QACL,EAAE,EAAE,qCAAqC;QACzC,KAAK,EAAE,gCAAgC;QACvC,MAAM,EAAE,aAAa;KACtB;CACF,CAAC;AAEK,MAAM,eAAe,GAAG,CAAC,OAAmB,EAAE,OAAgB;IACnE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC;IACzC,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAC1C,MAAM,QAAQ,GAAG,OAAO,GAAG,0BAA0B,GAAG,0BAA0B,CAAC;IAEnF,OAAO;;;;;;;;;;;iBAWQ,QAAQ,IAAI,QAAQ;;mBAElB,QAAQ;;;eAGZ,KAAK;oBACA,EAAE;oDAC8B,MAAM;;;;;;;;;;GAUvD,CAAC;AACJ,CAAC;;MC1DY,OAAO;IAJpB;;;QAM2B,YAAO,GAAe,SAAS,CAAC;;QAGhC,YAAO,GAAY,KAAK,CAAC;;QAMzB,UAAK,GAAU,MAAM,CAAC;KAiBhD;IAfC,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EACjE,6DAAM,KAAK,EAAC,KAAK,IACd,IAAI,CAAC,IAAI,KACR,6DAAM,KAAK,EAAC,MAAM,IAChB,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,GAAI,CACvD,CACR,EACD,8DAAQ,CACH,CACF,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-tag/diwa-tag-styles.ts","src/components/diwa-tag/diwa-tag.tsx"],"sourcesContent":["import type { TagVariant } from './types';\r\n\r\nconst VARIANT_MAP: Record<TagVariant, { bg: string; color: string; border: string }> = {\r\n  neutral: {\r\n    bg: 'var(--diwa-bg-surface)',\r\n    color: 'var(--diwa-text-primary)',\r\n    border: 'var(--diwa-border)',\r\n  },\r\n  primary: {\r\n    bg: 'var(--diwa-accent-bg)',\r\n    color: 'var(--diwa-accent)',\r\n    border: 'var(--diwa-accent)',\r\n  },\r\n  info: {\r\n    bg: 'var(--diwa-notification-info-soft)',\r\n    color: 'var(--diwa-notification-info)',\r\n    border: 'var(--diwa-color-info-300)',\r\n  },\r\n  success: {\r\n    bg: 'var(--diwa-notification-success-soft)',\r\n    color: 'var(--diwa-notification-success)',\r\n    border: 'transparent',\r\n  },\r\n  warning: {\r\n    bg: 'var(--diwa-notification-warning-soft)',\r\n    color: 'var(--diwa-notification-warning)',\r\n    border: 'transparent',\r\n  },\r\n  error: {\r\n    bg: 'var(--diwa-notification-error-soft)',\r\n    color: 'var(--diwa-notification-error)',\r\n    border: 'transparent',\r\n  },\r\n};\r\n\r\nexport const getComponentCss = (variant: TagVariant, compact: boolean): string => {\r\n  const { bg, color, border } = VARIANT_MAP[variant];\r\n  const paddingY = compact ? '1px' : '2px';\r\n  const paddingX = compact ? '6px' : '10px';\r\n  const fontSize = compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-md)';\r\n\r\n  return `\r\n    :host {\r\n      display: inline-flex;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .tag {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--diwa-space-1);\r\n      padding: ${paddingY} ${paddingX};\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${fontSize};\r\n      font-weight: var(--diwa-font-weight-medium);\r\n      line-height: var(--diwa-line-height-tight);\r\n      color: ${color};\r\n      background: ${bg};\r\n      border: var(--diwa-border-width-thin) solid ${border};\r\n      border-radius: var(--diwa-radius-sm);\r\n      white-space: nowrap;\r\n      user-select: none;\r\n    }\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      flex-shrink: 0;\r\n    }\r\n  `;\r\n};\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TagVariant } from './types';\r\nimport { getComponentCss } from './diwa-tag-styles';\r\n\r\n/**\r\n * @slot default — Tag label content.\r\n */\r\n@Component({\r\n  tag: 'diwa-tag',\r\n  shadow: true,\r\n})\r\nexport class DiwaTag {\r\n  /** Visual style variant. */\r\n  @Prop({ reflect: true }) variant: TagVariant = 'neutral';\r\n\r\n  /** Renders a compact (smaller) version of the tag. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /** Lucide icon name to display before the label, or omit for no icon. */\r\n  @Prop() icon?: string;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.variant, this.compact)} />\r\n        <span class=\"tag\">\r\n          {this.icon && (\r\n            <span class=\"icon\">\r\n              <diwa-icon name={this.icon} size={this.compact ? 12 : 14} />\r\n            </span>\r\n          )}\r\n          <slot />\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"diwa-tag.entry.js","mappings":";;AAEA,MAAM,WAAW,GAAsE;IACrF,OAAO,EAAE;QACP,EAAE,EAAE,wBAAwB;QAC5B,KAAK,EAAE,0BAA0B;QACjC,MAAM,EAAE,oBAAoB;KAC7B;IACD,OAAO,EAAE;QACP,EAAE,EAAE,uBAAuB;QAC3B,KAAK,EAAE,oBAAoB;QAC3B,MAAM,EAAE,oBAAoB;KAC7B;IACD,IAAI,EAAE;QACJ,EAAE,EAAE,oCAAoC;QACxC,KAAK,EAAE,+BAA+B;QACtC,MAAM,EAAE,4BAA4B;KACrC;IACD,OAAO,EAAE;QACP,EAAE,EAAE,uCAAuC;QAC3C,KAAK,EAAE,kCAAkC;QACzC,MAAM,EAAE,aAAa;KACtB;IACD,OAAO,EAAE;QACP,EAAE,EAAE,uCAAuC;QAC3C,KAAK,EAAE,kCAAkC;QACzC,MAAM,EAAE,aAAa;KACtB;IACD,KAAK,EAAE;QACL,EAAE,EAAE,qCAAqC;QACzC,KAAK,EAAE,gCAAgC;QACvC,MAAM,EAAE,aAAa;KACtB;CACF,CAAC;AAEK,MAAM,eAAe,GAAG,CAAC,OAAmB,EAAE,OAAgB;IACnE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC;IACzC,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAC1C,MAAM,QAAQ,GAAG,OAAO,GAAG,0BAA0B,GAAG,0BAA0B,CAAC;IAEnF,OAAO;;;;;;;;;;;iBAWQ,QAAQ,IAAI,QAAQ;;mBAElB,QAAQ;;;eAGZ,KAAK;oBACA,EAAE;oDAC8B,MAAM;;;;;;;;;;GAUvD,CAAC;AACJ,CAAC;;MC1DY,OAAO;IAJpB;;;QAM2B,YAAO,GAAe,SAAS,CAAC;;QAGhC,YAAO,GAAY,KAAK,CAAC;;QAMzB,UAAK,GAAU,MAAM,CAAC;KAiBhD;IAfC,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EACjE,6DAAM,KAAK,EAAC,KAAK,IACd,IAAI,CAAC,IAAI,KACR,6DAAM,KAAK,EAAC,MAAM,IAChB,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,GAAI,CACvD,CACR,EACD,8DAAQ,CACH,CACF,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-tag/diwa-tag-styles.ts","src/components/diwa-tag/diwa-tag.tsx"],"sourcesContent":["import type { TagVariant } from './types';\r\n\r\nconst VARIANT_MAP: Record<TagVariant, { bg: string; color: string; border: string }> = {\r\n  neutral: {\r\n    bg: 'var(--diwa-bg-surface)',\r\n    color: 'var(--diwa-text-primary)',\r\n    border: 'var(--diwa-border)',\r\n  },\r\n  primary: {\r\n    bg: 'var(--diwa-accent-bg)',\r\n    color: 'var(--diwa-accent)',\r\n    border: 'var(--diwa-accent)',\r\n  },\r\n  info: {\r\n    bg: 'var(--diwa-notification-info-soft)',\r\n    color: 'var(--diwa-notification-info)',\r\n    border: 'var(--diwa-color-info-300)',\r\n  },\r\n  success: {\r\n    bg: 'var(--diwa-notification-success-soft)',\r\n    color: 'var(--diwa-notification-success)',\r\n    border: 'transparent',\r\n  },\r\n  warning: {\r\n    bg: 'var(--diwa-notification-warning-soft)',\r\n    color: 'var(--diwa-notification-warning)',\r\n    border: 'transparent',\r\n  },\r\n  error: {\r\n    bg: 'var(--diwa-notification-error-soft)',\r\n    color: 'var(--diwa-notification-error)',\r\n    border: 'transparent',\r\n  },\r\n};\r\n\r\nexport const getComponentCss = (variant: TagVariant, compact: boolean): string => {\r\n  const { bg, color, border } = VARIANT_MAP[variant];\r\n  const paddingY = compact ? '1px' : '2px';\r\n  const paddingX = compact ? '6px' : '10px';\r\n  const fontSize = compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-md)';\r\n\r\n  return `\r\n    :host {\r\n      display: inline-flex;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .tag {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--diwa-space-1);\r\n      padding: ${paddingY} ${paddingX};\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${fontSize};\r\n      font-weight: var(--diwa-font-weight-medium);\r\n      line-height: 1;\r\n      color: ${color};\r\n      background: ${bg};\r\n      border: var(--diwa-border-width-thin) solid ${border};\r\n      border-radius: var(--diwa-radius-sm);\r\n      white-space: nowrap;\r\n      user-select: none;\r\n    }\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      flex-shrink: 0;\r\n    }\r\n  `;\r\n};\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TagVariant } from './types';\r\nimport { getComponentCss } from './diwa-tag-styles';\r\n\r\n/**\r\n * @slot default — Tag label content.\r\n */\r\n@Component({\r\n  tag: 'diwa-tag',\r\n  shadow: true,\r\n})\r\nexport class DiwaTag {\r\n  /** Visual style variant. */\r\n  @Prop({ reflect: true }) variant: TagVariant = 'neutral';\r\n\r\n  /** Renders a compact (smaller) version of the tag. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /** Lucide icon name to display before the label, or omit for no icon. */\r\n  @Prop() icon?: string;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.variant, this.compact)} />\r\n        <span class=\"tag\">\r\n          {this.icon && (\r\n            <span class=\"icon\">\r\n              <diwa-icon name={this.icon} size={this.compact ? 12 : 14} />\r\n            </span>\r\n          )}\r\n          <slot />\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-text-list-item.entry.js

@@ -21,7 +21,7 @@ const DiwaTextListItem = class {
         this.theme = 'dark';
     }
     render() {
-        return (h(Host, { key: '47380c135fb14278e005d237c7dfc0ae1e8d2982', "data-theme": this.theme }, h("style", { key: '61e2d7744729759cad4eb82f1af96d033a817a3f', innerHTML: getItemCss() }), h("slot", { key: '916a0c9ebd931b61ae4d76ab172ab437cd2cbd3d' })));
+        return (h(Host, { key: 'ca389afc2ee236afaf0ef1aa73da52621300309c', "data-theme": this.theme }, h("style", { key: '0b89865d665c4abc37ed2d6e044b7160480acf79', innerHTML: getItemCss() }), h("slot", { key: 'd49ee74ef96e916912a16889b33b05a08fd4027b' })));
     }
 };
 

package/dist/esm/diwa-text-list.entry.js

@@ -36,7 +36,7 @@ const DiwaTextList = class {
     }
     render() {
         const Tag = this.type === 'ordered' ? 'ol' : 'ul';
-        return (h(Host, { key: '3ccc05828614ee75fb0bace58508d9868a609945', "data-theme": this.theme }, h("style", { key: '1109012ff5b89b6224909a63cba6d0645132816e', innerHTML: getComponentCss(this.type) }), h(Tag, { key: '9e406cd57d961661f10e68f2c4b18a7dfbed8abe', class: "list" }, h("slot", { key: '3e6efc18da3aa512cc1eac696ed6619aef4f39e5' }))));
+        return (h(Host, { key: '46a42d0fad4e36c43294095336094028eba05e28', "data-theme": this.theme }, h("style", { key: 'fac6f5dfc2f131e718e808465e7bac609cf46665', innerHTML: getComponentCss(this.type) }), h(Tag, { key: '40e9fc80b433d58834b3b1465a49c53ed968f171', class: "list" }, h("slot", { key: '25af80ba0ae2f8dc8ff98e5fc5321fa271b52ebb' }))));
     }
 };
 

package/dist/esm/diwa-text.entry.js

@@ -74,7 +74,7 @@ const DiwaText = class {
     // ──────────────────────────────────────────────────────────────
     render() {
         const Tag = this.tag; // eslint-disable-line @typescript-eslint/no-explicit-any
-        return (h(Host, { key: '9f5fd3cbc2cd12f7fef7b55c095aff9cddbbfe30', "data-theme": this.theme }, h("style", { key: 'a83a6f78e4bc7474ce28cf1d3010a021e1bbf099', innerHTML: getComponentCss(this.size, this.weight, this.align, this.color, this.ellipsis) }), h(Tag, { key: '24f5ac5e6bcbeaad882089d9a4a996184e712b7d', class: "text" }, h("slot", { key: '027dc2c754f75aa59d4616565c53599051497748' }))));
+        return (h(Host, { key: '78b4446a7e87098e2b5c91eeafa452af9746b3f4', "data-theme": this.theme }, h("style", { key: '4d35e7cd05ba8b6169481a3e29562e606eb11504', innerHTML: getComponentCss(this.size, this.weight, this.align, this.color, this.ellipsis) }), h(Tag, { key: '0c9634ebb578a91e3abf14957ad588f3350070cf', class: "text" }, h("slot", { key: '1a173a8d617c7f903da682122dbd96767d3af2b3' }))));
     }
 };
 

package/dist/esm/diwa-textarea.entry.js

@@ -144,7 +144,7 @@ const DiwaTextarea = class {
         const taId = 'textarea';
         const descId = 'desc';
         const msgId = 'msg';
-        return (h(Host, { key: 'd4f47cf2f3be23a0df6c1f2dc24c8f11647fadc4', "data-theme": this.theme }, h("style", { key: '66ab29c8d8633795ed2fbc8403486496c36a356d', innerHTML: getComponentCss(this.state, this.disabled, this.readOnly, this.resize, this.compact) }), h("div", { key: '5a28099aa65e5b3b4588007479203360949c2dcf', class: "root" }, !this.hideLabel && this.label && (h("div", { key: 'a292c7d30962fc7db056cf9dca05552196b4532d', class: "label-row" }, h("label", { key: '38a4700dc55d557ef437efe0e54c0121bb0f172c', class: "label", htmlFor: taId }, this.label, this.required && h("span", { key: '8bef937a0727b2c51dabe30b9b74927053f7840f', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: '36169954033c2e1abcba95ccb445f7cb9f6460c0', name: "label-after" }))), h("div", { key: '05de702c20d30ff01af79245daf06e72bc013025', class: "textarea-wrapper" }, h("textarea", { key: 'ac18d6a3a4b2d724f1bd78f16e17f72dccc751f7', class: "ta", id: taId, name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readOnly, rows: this.rows, maxLength: this.maxLength, minLength: this.minLength, "aria-label": this.hideLabel && this.label ? this.label : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.message ? msgId : this.description ? descId : undefined, onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur })), !this.message && this.description && (h("p", { key: '973b18b1bafa587c7d98684d73a80e8357434c0e', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'dc389f318bfc3e674e1cb4c8ca6d8e2ffe348480', id: msgId, class: "message" }, this.message)))));
+        return (h(Host, { key: 'bc8c28e4261d600dcd7279fbf83f3c69598bede9', "data-theme": this.theme }, h("style", { key: '6424b2957223222e398afbd46110e7da11e074d0', innerHTML: getComponentCss(this.state, this.disabled, this.readOnly, this.resize, this.compact) }), h("div", { key: 'f99c09858acafd13e43389f0fdeef23352016658', class: "root" }, !this.hideLabel && this.label && (h("div", { key: '19062e869778b9f486c110a8a501fbdd77c7a629', class: "label-row" }, h("label", { key: '6b7e15fd5794920731f84abb408f4c73c212a03a', class: "label", htmlFor: taId }, this.label, this.required && h("span", { key: '2fce6e00c084737d175057e6d0fe291962152f9f', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: '20de835c3283696e786370a8b9e667ad14811f65', name: "label-after" }))), h("div", { key: '5ce3c0798d9085266c19623aec5c84809e8abe2f', class: "textarea-wrapper" }, h("textarea", { key: '76b21ac80b5f7609692af0dd78badc4bbdc1c8c2', class: "ta", id: taId, name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readOnly, rows: this.rows, maxLength: this.maxLength, minLength: this.minLength, "aria-label": this.hideLabel && this.label ? this.label : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.message ? msgId : this.description ? descId : undefined, onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur })), !this.message && this.description && (h("p", { key: '8b8914744e47cedda2ceeea9dc004cfb8712fa15', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'f3678d9d8eeb81e12bd98aac8186df07c7b17369', id: msgId, class: "message" }, this.message)))));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/esm/diwa-toast-item.entry.js

@@ -111,7 +111,7 @@ const DiwaToastItem = class {
         };
     }
     render() {
-        return (h(Host, { key: '5ca70d89e0dcf38887c4911ba4a7d4c4687f6e9a', "data-theme": this.theme }, h("style", { key: 'b77d3924036bea1e8613e429ef9095092b8aede4', innerHTML: getComponentCss(this.state) }), h("div", { key: '6ce3268afcb611334446b86b1a1d24aaba56d97f', class: "toast" }, h("span", { key: 'b52ea94a3bce267374add9e7672d475e5011cdcf', class: "icon", "aria-hidden": "true", innerHTML: STATE_ICONS[this.state] }), h("span", { key: '6d6c2bfe94a296d8e9cef85a52dd2fe875dc6e82', class: "text" }, this.text), h("button", { key: '9666a6fc76813134644e8fdd3a0cfbb273025eb8', type: "button", class: "close", "aria-label": "Dismiss notification", onClick: this.handleClose, innerHTML: CLOSE_ICON }))));
+        return (h(Host, { key: '333dc3ff2ce58d508fb129b7d415c431ca1c7090', "data-theme": this.theme }, h("style", { key: '33587d5ee1d57a09e175b3c6563fe04d57986ec2', innerHTML: getComponentCss(this.state) }), h("div", { key: 'f613e6c5351afcf85eeee2423b9c67fb4691e543', class: "toast" }, h("span", { key: '6f2c5d046eef9c9c37ddb74e711e91a196fd89b6', class: "icon", "aria-hidden": "true", innerHTML: STATE_ICONS[this.state] }), h("span", { key: 'ed412934617f70359b612d6e220410be69f47575', class: "text" }, this.text), h("button", { key: 'a71b252002e9573792860b6b068ccbd71dfa210e', type: "button", class: "close", "aria-label": "Dismiss notification", onClick: this.handleClose, innerHTML: CLOSE_ICON }))));
     }
     static get delegatesFocus() { return true; }
 };