@diwacopilot/components 1.0.0

package/dist/cjs/diwa-table-body.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-table-body.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;CAM5C;;MCAY,aAAa;IAD1B;;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,gBAAa,IAAI,CAAC,KAAK,IAC1CD,oEAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvCA,oEAAQ,CACH,EACP;KACH;;;;;","names":["h","Host"],"sources":["src/components/diwa-table-body/diwa-table-body-styles.ts","src/components/diwa-table-body/diwa-table-body.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\r\n  :host { display: table-row-group; }\r\n  :host([hidden]) { display: none; }\r\n  ::slotted(:nth-child(even)) {\r\n    background: var(--diwa-table-stripe-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-body-styles';\r\n\r\n/** @component diwa-table-body — Maps to <tbody> inside diwa-table. */\r\n@Component({ tag: 'diwa-table-body', shadow: true })\r\nexport class DiwaTableBody {\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/cjs/diwa-table-cell.cjs.entry.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+
+const getComponentCss = (multiline) => `
+  :host {
+    display: table-cell;
+    padding: var(--diwa-table-padding, var(--diwa-space-fluid-md));
+    font-size: var(--diwa-font-size-sm);
+    color: var(--diwa-text-primary);
+    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-table-border-color, var(--diwa-border));
+    border-right: var(--diwa-table-column-border, none);
+    vertical-align: middle;
+    line-height: var(--diwa-line-height-normal);
+    white-space: ${multiline ? 'normal' : 'nowrap'};
+  }
+  :host(:last-child) { border-right: none; }
+  :host([hidden]) { display: none; }
+`;
+
+const DiwaTableCell = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.theme = 'dark';
+        this.multiline = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '6940c2ca96ade3969829050cd472541073e14e10', role: "cell" }, index.h("style", { key: '9268605b392a8e0d63c036a94aaf06b1f8921d19', innerHTML: getComponentCss(this.multiline) }), index.h("slot", { key: 'ce6ec575f27242e9bb5892a9b4417bbcf31a7dd1' })));
+    }
+};
+
+exports.diwa_table_cell = DiwaTableCell;
+
+//# sourceMappingURL=diwa-table-cell.cjs.entry.js.map

package/dist/cjs/diwa-table-cell.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-table-cell.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,eAAe,GAAG,CAAC,SAAkB,KAAa;;;;;;;;;;mBAU5C,SAAS,GAAG,QAAQ,GAAG,QAAQ;;;;CAIjD;;MCRY,aAAa;IAD1B;;QAE2B,UAAK,GAAU,MAAM,CAAC;QACvC,cAAS,GAAY,KAAK,CAAC;KAUpC;IARC,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,MAAM,IACfD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,GAAI,EACrDA,oEAAQ,CACH,EACP;KACH;;;;;","names":["h","Host"],"sources":["src/components/diwa-table-cell/diwa-table-cell-styles.ts","src/components/diwa-table-cell/diwa-table-cell.tsx"],"sourcesContent":["export const getComponentCss = (multiline: boolean): string => `\r\n  :host {\r\n    display: table-cell;\r\n    padding: var(--diwa-table-padding, var(--diwa-space-fluid-md));\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: var(--diwa-text-primary);\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-table-border-color, var(--diwa-border));\r\n    border-right: var(--diwa-table-column-border, none);\r\n    vertical-align: middle;\r\n    line-height: var(--diwa-line-height-normal);\r\n    white-space: ${multiline ? 'normal' : 'nowrap'};\r\n  }\r\n  :host(:last-child) { border-right: none; }\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-cell-styles';\r\n\r\n/** @component diwa-table-cell — Maps to <td> inside a diwa-table-row. */\r\n@Component({ tag: 'diwa-table-cell', shadow: true })\r\nexport class DiwaTableCell {\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n  @Prop() multiline: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"cell\">\r\n        <style innerHTML={getComponentCss(this.multiline)} />\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/diwa-table-head-cell.cjs.entry.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+
+const getComponentCss = (sortable, multiline) => `
+  :host {
+    display: table-cell;
+    padding: var(--diwa-table-padding, var(--diwa-space-fluid-md));
+    background: var(--diwa-table-header-bg, var(--diwa-bg-elevated));
+    text-align: start;
+    font-size: var(--diwa-font-size-sm);
+    font-weight: var(--diwa-font-weight-semibold);
+    color: var(--diwa-text-secondary);
+    border-bottom: var(--diwa-border-width-base) solid var(--diwa-table-border-color, var(--diwa-border));
+    border-right: var(--diwa-table-column-border, none);
+    white-space: ${multiline ? 'normal' : 'nowrap'};
+    vertical-align: middle;
+  }
+  :host(:last-child) { border-right: none; }
+  :host([hidden]) { display: none; }
+
+  .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;
+  }
+
+  ${sortable ? `
+  .sort-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--diwa-space-1);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    font: inherit;
+    color: inherit;
+    padding: 0;
+    text-align: start;
+    outline-offset: 2px;
+    transition: color var(--diwa-transition-base);
+    white-space: ${multiline ? 'normal' : 'nowrap'};
+  }
+  .sort-btn:hover {
+    color: var(--diwa-text-primary);
+  }
+  ` : ''}
+`;
+
+const DiwaTableHeadCell = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.theme = 'dark';
+        this.hideLabel = false;
+        this.multiline = false;
+        this.handleSort = () => {
+            if (!this.sort)
+                return;
+            const next = this.sort.active
+                ? this.sort.direction === 'asc' ? 'desc' : 'asc'
+                : this.sort.direction;
+            this.host.dispatchEvent(new CustomEvent('diwaTableUpdate', {
+                bubbles: true,
+                composed: true,
+                detail: { id: this.sort.id, active: true, direction: next },
+            }));
+        };
+    }
+    render() {
+        const { sort, hideLabel, multiline } = this;
+        const isSortable = !!sort;
+        const ariaSort = !isSortable
+            ? undefined
+            : sort.active
+                ? sort.direction === 'asc' ? 'ascending' : 'descending'
+                : 'none';
+        const labelEl = (index.h("span", { key: '3763494f5c22dc12b37dcac58c213597c84e6711', class: hideLabel ? 'sr-only' : undefined }, index.h("slot", { key: '0b5b5c768b9c225e73c45a257ce26d4521777266' })));
+        const sortIcon = (index.h("svg", { key: '12e03df96dcd7ba962cdd00a6d013833e23a86b0', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: {
+                opacity: (sort === null || sort === void 0 ? void 0 : sort.active) ? '1' : '0.4',
+                transform: (sort === null || sort === void 0 ? void 0 : sort.direction) === 'desc' ? 'rotate(180deg)' : 'none',
+                transition: 'opacity 150ms ease, transform 150ms ease',
+                flexShrink: '0',
+                display: 'block',
+            } }, index.h("path", { key: 'd2ecf59d26781da72b37a4be364aa293531c79cd', d: "M4 10L8 6L12 10", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+        return (index.h(index.Host, { key: 'd34447c382406fccd6da18cd313524c0fa7572ae', role: "columnheader", "aria-sort": ariaSort }, index.h("style", { key: '867bd55aad47be3565ac1393f02d5e8473293c99', innerHTML: getComponentCss(isSortable, multiline) }), isSortable ? (index.h("button", { type: "button", class: "sort-btn", onClick: this.handleSort }, labelEl, sortIcon)) : (labelEl)));
+    }
+    get host() { return index.getElement(this); }
+};
+
+exports.diwa_table_head_cell = DiwaTableHeadCell;
+
+//# sourceMappingURL=diwa-table-head-cell.cjs.entry.js.map

package/dist/cjs/diwa-table-head-cell.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-table-head-cell.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,eAAe,GAAG,CAAC,QAAiB,EAAE,SAAkB,KAAa;;;;;;;;;;;mBAW/D,SAAS,GAAG,QAAQ,GAAG,QAAQ;;;;;;;;;;;;;;;;;;IAkB9C,QAAQ,GAAG;;;;;;;;;;;;;;mBAcI,SAAS,GAAG,QAAQ,GAAG,QAAQ;;;;;GAK/C,GAAG,EAAE;CACP;;MC1CY,iBAAiB;IAD9B;;QAI2B,UAAK,GAAU,MAAM,CAAC;QAEvC,cAAS,GAAY,KAAK,CAAC;QAC3B,cAAS,GAAY,KAAK,CAAC;QAE3B,eAAU,GAAG;YACnB,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,OAAO;YACvB,MAAM,IAAI,GAAc,IAAI,CAAC,IAAI,CAAC,MAAM;kBACpC,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK;kBAC9C,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,aAAa,CACrB,IAAI,WAAW,CAAyB,iBAAiB,EAAE;gBACzD,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE;aAC5D,CAAC,CACH,CAAC;SACH,CAAC;KAwDH;IAtDC,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC5C,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC;QAC1B,MAAM,QAAQ,GAAG,CAAC,UAAU;cACxB,SAAS;cACT,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,SAAS,KAAK,KAAK,GAAG,WAAW,GAAG,YAAY;kBACrD,MAAM,CAAC;QAEb,MAAM,OAAO,IACXA,mEAAM,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,IAC5CA,oEAAQ,CACH,CACR,CAAC;QAEF,MAAM,QAAQ,IACZA,kEACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACC,MAAM,EAClB,KAAK,EAAE;gBACL,OAAO,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,IAAG,GAAG,GAAG,KAAK;gBACnC,SAAS,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,MAAK,MAAM,GAAG,gBAAgB,GAAG,MAAM;gBACjE,UAAU,EAAE,0CAA0C;gBACtD,UAAU,EAAE,GAAG;gBACf,OAAO,EAAE,OAAO;aACjB,IAEDA,mEACE,CAAC,EAAC,iBAAiB,EACnB,MAAM,EAAC,cAAc,kBACR,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CAAC;QAEF,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,cAAc,eAAY,QAAQ,IAC3CD,oEAAO,SAAS,EAAE,eAAe,CAAC,UAAU,EAAE,SAAS,CAAC,GAAI,EAC3D,UAAU,IACTA,oBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,IAC5D,OAAO,EACP,QAAQ,CACF,KAET,OAAO,CACR,CACI,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/diwa-table-head-cell/diwa-table-head-cell-styles.ts","src/components/diwa-table-head-cell/diwa-table-head-cell.tsx"],"sourcesContent":["export const getComponentCss = (sortable: boolean, multiline: boolean): string => `\r\n  :host {\r\n    display: table-cell;\r\n    padding: var(--diwa-table-padding, var(--diwa-space-fluid-md));\r\n    background: var(--diwa-table-header-bg, var(--diwa-bg-elevated));\r\n    text-align: start;\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    border-bottom: var(--diwa-border-width-base) solid var(--diwa-table-border-color, var(--diwa-border));\r\n    border-right: var(--diwa-table-column-border, none);\r\n    white-space: ${multiline ? 'normal' : 'nowrap'};\r\n    vertical-align: middle;\r\n  }\r\n  :host(:last-child) { border-right: none; }\r\n  :host([hidden]) { display: none; }\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  ${sortable ? `\r\n  .sort-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-1);\r\n    background: transparent;\r\n    border: 0;\r\n    cursor: pointer;\r\n    font: inherit;\r\n    color: inherit;\r\n    padding: 0;\r\n    text-align: start;\r\n    outline-offset: 2px;\r\n    transition: color var(--diwa-transition-base);\r\n    white-space: ${multiline ? 'normal' : 'nowrap'};\r\n  }\r\n  .sort-btn:hover {\r\n    color: var(--diwa-text-primary);\r\n  }\r\n  ` : ''}\r\n`;\r\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { Direction, TableHeadCellSort, TableUpdateEventDetail } from './types';\r\nimport { getComponentCss } from './diwa-table-head-cell-styles';\r\n\r\n/** @component diwa-table-head-cell — Maps to <th> inside a diwa-table-head row. */\r\n@Component({ tag: 'diwa-table-head-cell', shadow: true })\r\nexport class DiwaTableHeadCell {\r\n  @Element() host!: HTMLElement;\r\n\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n  @Prop() sort?: TableHeadCellSort;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() multiline: boolean = false;\r\n\r\n  private handleSort = (): void => {\r\n    if (!this.sort) return;\r\n    const next: Direction = this.sort.active\r\n      ? this.sort.direction === 'asc' ? 'desc' : 'asc'\r\n      : this.sort.direction;\r\n    this.host.dispatchEvent(\r\n      new CustomEvent<TableUpdateEventDetail>('diwaTableUpdate', {\r\n        bubbles: true,\r\n        composed: true,\r\n        detail: { id: this.sort.id, active: true, direction: next },\r\n      }),\r\n    );\r\n  };\r\n\r\n  render() {\r\n    const { sort, hideLabel, multiline } = this;\r\n    const isSortable = !!sort;\r\n    const ariaSort = !isSortable\r\n      ? undefined\r\n      : sort.active\r\n        ? sort.direction === 'asc' ? 'ascending' : 'descending'\r\n        : 'none';\r\n\r\n    const labelEl = (\r\n      <span class={hideLabel ? 'sr-only' : undefined}>\r\n        <slot />\r\n      </span>\r\n    );\r\n\r\n    const sortIcon = (\r\n      <svg\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 16 16\"\r\n        fill=\"none\"\r\n        aria-hidden=\"true\"\r\n        style={{\r\n          opacity: sort?.active ? '1' : '0.4',\r\n          transform: sort?.direction === 'desc' ? 'rotate(180deg)' : 'none',\r\n          transition: 'opacity 150ms ease, transform 150ms ease',\r\n          flexShrink: '0',\r\n          display: 'block',\r\n        }}\r\n      >\r\n        <path\r\n          d=\"M4 10L8 6L12 10\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    );\r\n\r\n    return (\r\n      <Host role=\"columnheader\" aria-sort={ariaSort}>\r\n        <style innerHTML={getComponentCss(isSortable, multiline)} />\r\n        {isSortable ? (\r\n          <button type=\"button\" class=\"sort-btn\" onClick={this.handleSort}>\r\n            {labelEl}\r\n            {sortIcon}\r\n          </button>\r\n        ) : (\r\n          labelEl\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.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 DiwaTableHead = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.theme = 'dark';
+    }
+    render() {
+        return (index.h(index.Host, { key: '4a79b101f25908a4c8d952a6cabeba242d361d45', role: "rowgroup", "data-theme": this.theme }, index.h("style", { key: '2fe92018084cd53e3eecfa6fa7cfcd314609d383', innerHTML: getComponentCss() }), index.h("slot", { key: 'f9d45fc32ddc9eb5532dd8e85fadac06df35cfb3' })));
+    }
+};
+
+exports.diwa_table_head = DiwaTableHead;
+
+//# sourceMappingURL=diwa-table-head.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-table-head.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;CAU5C;;MCJY,aAAa;IAD1B;;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,gBAAa,IAAI,CAAC,KAAK,IAC1CD,oEAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvCA,oEAAQ,CACH,EACP;KACH;;;;;","names":["h","Host"],"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}

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.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 DiwaTableRow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.theme = 'dark';
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f931d12bc8db13a256549d53e08596154fe99633', role: "row", "data-theme": this.theme }, index.h("style", { key: '5492581027421a4455b3831766e0f6126cc32a30', innerHTML: getComponentCss() }), index.h("slot", { key: 'e66bff1a9c8d1661227bcefa9f6fa835c2109df8' })));
+    }
+};
+
+exports.diwa_table_row = DiwaTableRow;
+
+//# sourceMappingURL=diwa-table-row.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-table-row.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;CAS5C;;MCHY,YAAY;IADzB;;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,IAAI,CAAC,KAAK,IACrCD,oEAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvCA,oEAAQ,CACH,EACP;KACH;;;;;","names":["h","Host"],"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}

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

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.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 DiwaTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "update", 1);
+        this.theme = 'dark';
+        this.caption = '';
+        this.compact = false;
+        this.layout = 'auto';
+        this.bordered = false;
+        this.striped = false;
+    }
+    handleTableUpdate(e) {
+        e.stopPropagation();
+        this.update.emit(e.detail);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f44c979bd3fe3e5dac8c82d74519f433ae6617f3', "data-theme": this.theme }, index.h("style", { key: '864a46be2b5682fc4876bb392b6e85484fed3a92', innerHTML: getComponentCss(this.compact, this.layout, this.bordered, this.striped) }), index.h("table", { key: 'f79f51a9cccc9df05c92b16b013a5e7400d30012', class: "table" }, this.caption && index.h("caption", { key: 'd7bc36ebb05f3e452c953fc772dfb3988705c04a', class: "sr-only" }, this.caption), index.h("slot", { key: '4586f22dd7b51da6ec44ca11773297db6a75e1e6' }))));
+    }
+};
+
+exports.diwa_table = DiwaTable;
+
+//# sourceMappingURL=diwa-table.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-table.entry.cjs.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,QACEA,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EAC7FA,oEAAO,KAAK,EAAC,OAAO,IACjB,IAAI,CAAC,OAAO,IAAIA,sEAAS,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAW,EAClEA,oEAAQ,CACF,CACH,EACP;KACH;;;;;","names":["h","Host"],"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}

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

@@ -0,0 +1,231 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+const styles = require('./styles-6342300d.js');
+
+const getComponentCss = () => `
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+    color: var(--diwa-text-primary);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .bar {
+    display: flex;
+    align-items: stretch;
+    gap: 0;
+    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .bar::-webkit-scrollbar {
+    display: none;
+  }
+
+  ::slotted(a),
+  ::slotted(button) {
+    /* !important guards against light-DOM author styles (e.g. Tailwind preflight
+       padding: 0 on button) overriding ::slotted() rules per the CSS shadow-DOM
+       cascade spec where light-DOM author styles win over ::slotted(). */
+    display: inline-flex !important;
+    align-items: center;
+    min-height: var(--diwa-touch-target-min-size, 44px) !important;
+    gap: var(--diwa-space-2);
+    padding: var(--diwa-space-4) var(--diwa-space-7) !important;
+    border: none !important;
+    border-bottom: var(--diwa-border-width-base) solid transparent !important;
+    background: transparent !important;
+    color: var(--diwa-text-secondary) !important;
+    font-size: var(--diwa-font-size-base) !important;
+    font-family: inherit !important;
+    font-weight: var(--diwa-font-weight-medium) !important;
+    text-decoration: none !important;
+    white-space: nowrap !important;
+    cursor: pointer !important;
+    transition:
+      color var(--diwa-transition-base),
+      border-color var(--diwa-transition-base);
+    margin-bottom: -1px;
+    outline: none;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    ::slotted(a:hover),
+    ::slotted(button:hover) {
+      color: var(--diwa-text-primary) !important;
+    }
+  }
+
+  ::slotted(a[data-active]),
+  ::slotted(button[data-active]),
+  ::slotted(a.active),
+  ::slotted(button.active),
+  ::slotted([aria-selected="true"]) {
+    color: var(--diwa-accent) !important;
+    border-bottom-color: var(--diwa-accent) !important;
+    font-weight: var(--diwa-font-weight-medium) !important;
+  }
+
+  ::slotted(a:focus-visible),
+  ::slotted(button:focus-visible) {
+    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);
+    outline-offset: var(--diwa-focus-ring-offset);
+  }
+
+  ::slotted(a:focus:not(:focus-visible)),
+  ::slotted(button:focus:not(:focus-visible)) {
+    outline: none;
+  }
+
+  ::slotted(button:disabled) {
+    background: transparent !important;
+    color: var(--diwa-text-muted) !important;
+    opacity: 0.5 !important;
+    cursor: not-allowed !important;
+    pointer-events: none !important;
+  }
+
+  ${styles.getReducedMotionStyle('::slotted(a)', '::slotted(button)')}
+`;
+
+const DiwaTabsBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "update", 1);
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** Zero-based index of the active tab. */
+        this.activeTabIndex = 0;
+    }
+    handleIndexChange() {
+        this.syncTabs();
+    }
+    componentDidLoad() {
+        this.syncTabs();
+    }
+    handleClick(event) {
+        const tabs = this.getTabElements();
+        const idx = this.getTabIndexFromEventTarget(event.target, tabs);
+        if (idx === -1 || idx === this.activeTabIndex || this.isTabDisabled(tabs[idx])) {
+            return;
+        }
+        this.setActiveTab(idx);
+    }
+    handleKeydown(event) {
+        var _a;
+        const tabs = this.getTabElements();
+        const currentIndex = this.getTabIndexFromEventTarget(event.target, tabs);
+        if (currentIndex === -1) {
+            return;
+        }
+        let nextIndex = -1;
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                nextIndex = this.getNextEnabledIndex(currentIndex, -1, tabs);
+                break;
+            case 'ArrowRight':
+            case 'ArrowDown':
+                nextIndex = this.getNextEnabledIndex(currentIndex, 1, tabs);
+                break;
+            case 'Home':
+                nextIndex = this.getBoundaryEnabledIndex('start', tabs);
+                break;
+            case 'End':
+                nextIndex = this.getBoundaryEnabledIndex('end', tabs);
+                break;
+            default:
+                return;
+        }
+        if (nextIndex === -1) {
+            return;
+        }
+        event.preventDefault();
+        this.setActiveTab(nextIndex);
+        (_a = tabs[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    getTabElements() {
+        var _a;
+        const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (!slot)
+            return [];
+        return slot
+            .assignedElements({ flatten: true })
+            .filter((el) => el instanceof HTMLElement);
+    }
+    getTabIndexFromEventTarget(target, tabs) {
+        if (!(target instanceof Node)) {
+            return -1;
+        }
+        return tabs.findIndex((tab) => tab === target || tab.contains(target));
+    }
+    isTabDisabled(tab) {
+        if (!tab) {
+            return true;
+        }
+        return tab.hasAttribute('disabled') || tab.getAttribute('aria-disabled') === 'true';
+    }
+    getNextEnabledIndex(currentIndex, direction, tabs) {
+        for (let step = 1; step <= tabs.length; step += 1) {
+            const candidateIndex = (currentIndex + direction * step + tabs.length) % tabs.length;
+            if (!this.isTabDisabled(tabs[candidateIndex])) {
+                return candidateIndex;
+            }
+        }
+        return -1;
+    }
+    getBoundaryEnabledIndex(edge, tabs) {
+        const candidates = edge === 'start' ? tabs : [...tabs].reverse();
+        const match = candidates.find((tab) => !this.isTabDisabled(tab));
+        if (!match) {
+            return -1;
+        }
+        return tabs.indexOf(match);
+    }
+    setActiveTab(index) {
+        this.activeTabIndex = index;
+        this.update.emit({ activeTabIndex: this.activeTabIndex });
+        this.syncTabs();
+    }
+    syncTabs() {
+        const tabs = this.getTabElements();
+        tabs.forEach((tab, i) => {
+            const isActive = i === this.activeTabIndex;
+            tab.setAttribute('role', 'tab');
+            tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
+            if (this.isTabDisabled(tab)) {
+                tab.setAttribute('aria-disabled', 'true');
+                tab.setAttribute('tabindex', '-1');
+                tab.removeAttribute('data-active');
+                return;
+            }
+            tab.removeAttribute('aria-disabled');
+            if (isActive) {
+                tab.setAttribute('data-active', '');
+                tab.setAttribute('tabindex', '0');
+            }
+            else {
+                tab.removeAttribute('data-active');
+                tab.setAttribute('tabindex', '-1');
+            }
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: '5d85c7ca55c93cf266fb1f9469f602c8d17194b4', role: "tablist", "data-theme": this.theme }, index.h("style", { key: 'd4e17c0bcdd6d656990ac95f72bec8bd2a33ce46', innerHTML: getComponentCss() }), index.h("div", { key: '5850b9e2b9551db5b1c7651c167d4a0927d94ffb', class: "bar" }, index.h("slot", { key: '01727b6bf42cce8dfdca1d886ca717d154babdb3' }))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "activeTabIndex": ["handleIndexChange"]
+    }; }
+};
+
+exports.diwa_tabs_bar = DiwaTabsBar;
+
+//# sourceMappingURL=diwa-tabs-bar.cjs.entry.js.map

package/dist/cjs/diwa-tabs-bar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-tabs-bar.entry.cjs.js","mappings":"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","names":["getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-tabs-bar/diwa-tabs-bar-styles.ts","src/components/diwa-tabs-bar/diwa-tabs-bar.tsx"],"sourcesContent":["import { 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    color: var(--diwa-text-primary);\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: stretch;\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  ::slotted(a),\n  ::slotted(button) {\n    /* !important guards against light-DOM author styles (e.g. Tailwind preflight\r\n       padding: 0 on button) overriding ::slotted() rules per the CSS shadow-DOM\r\n       cascade spec where light-DOM author styles win over ::slotted(). */\r\n    display: inline-flex !important;\n    align-items: center;\n    min-height: var(--diwa-touch-target-min-size, 44px) !important;\n    gap: var(--diwa-space-2);\n    padding: var(--diwa-space-4) var(--diwa-space-7) !important;\r\n    border: none !important;\r\n    border-bottom: var(--diwa-border-width-base) solid transparent !important;\r\n    background: transparent !important;\r\n    color: var(--diwa-text-secondary) !important;\r\n    font-size: var(--diwa-font-size-base) !important;\r\n    font-family: inherit !important;\r\n    font-weight: var(--diwa-font-weight-medium) !important;\r\n    text-decoration: none !important;\r\n    white-space: nowrap !important;\r\n    cursor: pointer !important;\r\n    transition:\r\n      color var(--diwa-transition-base),\r\n      border-color var(--diwa-transition-base);\r\n    margin-bottom: -1px;\r\n    outline: none;\r\n  }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\n    ::slotted(a:hover),\n    ::slotted(button:hover) {\n      color: var(--diwa-text-primary) !important;\n    }\n  }\n\r\n  ::slotted(a[data-active]),\r\n  ::slotted(button[data-active]),\r\n  ::slotted(a.active),\r\n  ::slotted(button.active),\r\n  ::slotted([aria-selected=\"true\"]) {\r\n    color: var(--diwa-accent) !important;\r\n    border-bottom-color: var(--diwa-accent) !important;\r\n    font-weight: var(--diwa-font-weight-medium) !important;\r\n  }\r\n\r\n  ::slotted(a:focus-visible),\r\n  ::slotted(button:focus-visible) {\r\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\r\n    outline-offset: var(--diwa-focus-ring-offset);\r\n  }\r\n\r\n  ::slotted(a:focus:not(:focus-visible)),\r\n  ::slotted(button:focus:not(:focus-visible)) {\r\n    outline: none;\r\n  }\r\n\r\n  ::slotted(button:disabled) {\r\n    background: transparent !important;\r\n    color: var(--diwa-text-muted) !important;\r\n    opacity: 0.5 !important;\r\n    cursor: not-allowed !important;\r\n    pointer-events: none !important;\r\n  }\r\n\r\n  ${getReducedMotionStyle('::slotted(a)', '::slotted(button)')}\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Listen, Prop, Watch, h } from '@stencil/core';\r\nimport type { TabsBarUpdateEventDetail } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-tabs-bar-styles';\r\n\r\n/**\r\n * @component diwa-tabs-bar\r\n *\r\n * A styled tab navigation bar. Accepts `<a>` or `<button>` elements in the\r\n * default slot and tracks the active index. Mark the active tab with the\r\n * `data-active` attribute or the `active` CSS class, or let the component\r\n * manage it by providing `activeTabIndex`.\r\n *\r\n * Usage:\r\n *   <diwa-tabs-bar active-tab-index={1} onupdate={e => setTab(e.detail.activeTabIndex)}>\r\n *     <button>Tab 1</button>\r\n *     <button>Tab 2</button>\r\n *     <button>Tab 3</button>\r\n *   </diwa-tabs-bar>\r\n */\r\n@Component({\r\n  tag: 'diwa-tabs-bar',\r\n  shadow: true,\r\n})\r\nexport class DiwaTabsBar {\r\n  @Element() host!: HTMLDiwaTabsBarElement;\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 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 active tab changes.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<TabsBarUpdateEventDetail>;\r\n\r\n  @Watch('activeTabIndex')\r\n  handleIndexChange() {\r\n    this.syncTabs();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.syncTabs();\r\n  }\r\n\r\n  @Listen('click')\r\n  handleClick(event: Event) {\r\n    const tabs = this.getTabElements();\r\n    const idx = this.getTabIndexFromEventTarget(event.target, tabs);\r\n\r\n    if (idx === -1 || idx === this.activeTabIndex || this.isTabDisabled(tabs[idx])) {\r\n      return;\r\n    }\r\n\r\n    this.setActiveTab(idx);\r\n  }\r\n\r\n  @Listen('keydown')\r\n  handleKeydown(event: KeyboardEvent) {\r\n    const tabs = this.getTabElements();\r\n    const currentIndex = this.getTabIndexFromEventTarget(event.target, tabs);\r\n\r\n    if (currentIndex === -1) {\r\n      return;\r\n    }\r\n\r\n    let nextIndex = -1;\r\n\r\n    switch (event.key) {\r\n      case 'ArrowLeft':\r\n      case 'ArrowUp':\r\n        nextIndex = this.getNextEnabledIndex(currentIndex, -1, tabs);\r\n        break;\r\n      case 'ArrowRight':\r\n      case 'ArrowDown':\r\n        nextIndex = this.getNextEnabledIndex(currentIndex, 1, tabs);\r\n        break;\r\n      case 'Home':\r\n        nextIndex = this.getBoundaryEnabledIndex('start', tabs);\r\n        break;\r\n      case 'End':\r\n        nextIndex = this.getBoundaryEnabledIndex('end', tabs);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n\r\n    if (nextIndex === -1) {\r\n      return;\r\n    }\r\n\r\n    event.preventDefault();\r\n    this.setActiveTab(nextIndex);\r\n    tabs[nextIndex]?.focus();\r\n  }\r\n\r\n  private getTabElements(): HTMLElement[] {\r\n    const slot = this.host.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\r\n    if (!slot) return [];\r\n    return slot\r\n      .assignedElements({ flatten: true })\r\n      .filter((el): el is HTMLElement => el instanceof HTMLElement);\r\n  }\r\n\r\n  private getTabIndexFromEventTarget(target: EventTarget | null, tabs: HTMLElement[]): number {\r\n    if (!(target instanceof Node)) {\r\n      return -1;\r\n    }\r\n\r\n    return tabs.findIndex((tab) => tab === target || tab.contains(target));\r\n  }\r\n\r\n  private isTabDisabled(tab: HTMLElement | undefined): boolean {\r\n    if (!tab) {\r\n      return true;\r\n    }\r\n\r\n    return tab.hasAttribute('disabled') || tab.getAttribute('aria-disabled') === 'true';\r\n  }\r\n\r\n  private getNextEnabledIndex(\r\n    currentIndex: number,\r\n    direction: -1 | 1,\r\n    tabs: HTMLElement[],\r\n  ): number {\r\n    for (let step = 1; step <= tabs.length; step += 1) {\r\n      const candidateIndex = (currentIndex + direction * step + tabs.length) % tabs.length;\r\n      if (!this.isTabDisabled(tabs[candidateIndex])) {\r\n        return candidateIndex;\r\n      }\r\n    }\r\n\r\n    return -1;\r\n  }\r\n\r\n  private getBoundaryEnabledIndex(edge: 'start' | 'end', tabs: HTMLElement[]): number {\r\n    const candidates = edge === 'start' ? tabs : [...tabs].reverse();\r\n    const match = candidates.find((tab) => !this.isTabDisabled(tab));\r\n\r\n    if (!match) {\r\n      return -1;\r\n    }\r\n\r\n    return tabs.indexOf(match);\r\n  }\r\n\r\n  private setActiveTab(index: number) {\r\n    this.activeTabIndex = index;\r\n    this.update.emit({ activeTabIndex: this.activeTabIndex });\r\n    this.syncTabs();\r\n  }\r\n\r\n  private syncTabs() {\r\n    const tabs = this.getTabElements();\r\n    tabs.forEach((tab, i) => {\r\n      const isActive = i === this.activeTabIndex;\r\n      tab.setAttribute('role', 'tab');\r\n      tab.setAttribute('aria-selected', isActive ? 'true' : 'false');\r\n\r\n      if (this.isTabDisabled(tab)) {\r\n        tab.setAttribute('aria-disabled', 'true');\r\n        tab.setAttribute('tabindex', '-1');\r\n        tab.removeAttribute('data-active');\r\n        return;\r\n      }\r\n\r\n      tab.removeAttribute('aria-disabled');\r\n\r\n      if (isActive) {\r\n        tab.setAttribute('data-active', '');\r\n        tab.setAttribute('tabindex', '0');\r\n      } else {\r\n        tab.removeAttribute('data-active');\r\n        tab.setAttribute('tabindex', '-1');\r\n      }\r\n    });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"tablist\" data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <div class=\"bar\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+
+const getComponentCss = (active) => `
+  :host {
+    display: ${active ? 'block' : 'none'};
+    font-family: var(--diwa-font-family-base);
+    color: var(--diwa-text-primary);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+`;
+
+const DiwaTabsItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** Tab button label. Rendered by the parent diwa-tabs component. */
+        this.label = '';
+        /** Whether this panel is currently visible. Managed by the parent diwa-tabs. */
+        this.active = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f6ec3970642fee656b67bd7af43c37121ebf4c93', role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', "data-theme": this.theme }, index.h("style", { key: '2ab72810f41d6680c657f375186f03839f5a9d78', innerHTML: getComponentCss(this.active) }), index.h("slot", { key: '7508c2bd4a5e797400b26446f9531b80ee38cc2a' })));
+    }
+    get host() { return index.getElement(this); }
+};
+
+exports.diwa_tabs_item = DiwaTabsItem;
+
+//# sourceMappingURL=diwa-tabs-item.cjs.entry.js.map

package/dist/cjs/diwa-tabs-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-tabs-item.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,eAAe,GAAG,CAAC,MAAe,KAAa;;eAE7C,MAAM,GAAG,OAAO,GAAG,MAAM;;;;;;;;CAQvC;;MCOY,YAAY;IAJzB;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAGvC,UAAK,GAAW,EAAE,CAAC;;QAGa,WAAM,GAAY,KAAK,CAAC;KAUjE;IARC,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,iBAAc,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,gBAAc,IAAI,CAAC,KAAK,IACvFD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,GAAI,EAClDA,oEAAQ,CACH,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/diwa-tabs-item/diwa-tabs-item-styles.ts","src/components/diwa-tabs-item/diwa-tabs-item.tsx"],"sourcesContent":["export const getComponentCss = (active: boolean): string => `\r\n  :host {\r\n    display: ${active ? 'block' : 'none'};\r\n    font-family: var(--diwa-font-family-base);\r\n    color: var(--diwa-text-primary);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n`;\r\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-tabs-item-styles';\r\n\r\n/**\r\n * @component diwa-tabs-item\r\n *\r\n * A single panel used inside `diwa-tabs`. The parent renders the tab button\r\n * from the `label` prop, and shows/hides this panel via `active`.\r\n *\r\n * Usage:\r\n *   <diwa-tabs-item label=\"Overview\">Panel content here</diwa-tabs-item>\r\n */\r\n@Component({\r\n  tag: 'diwa-tabs-item',\r\n  shadow: true,\r\n})\r\nexport class DiwaTabsItem {\r\n  @Element() host!: HTMLDiwaTabsItemElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Tab button label. Rendered by the parent diwa-tabs component. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Whether this panel is currently visible. Managed by the parent diwa-tabs. */\r\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"tabpanel\" aria-hidden={this.active ? 'false' : 'true'} data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.active)} />\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}