@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-table-head/diwa-table-head.js

@@ -0,0 +1,44 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-table-head-styles";
+/** @component diwa-table-head — Maps to <thead> inside diwa-table. */
+export class DiwaTableHead {
+    constructor() {
+        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' })));
+    }
+    static get is() { return "diwa-table-head"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=diwa-table-head.js.map

package/dist/collection/components/diwa-table-head/diwa-table-head.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-table-head.js","sourceRoot":"","sources":["../../../src/components/diwa-table-head/diwa-table-head.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,sEAAsE;AAEtE,MAAM,OAAO,aAAa;IAD1B;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,gBAAa,IAAI,CAAC,KAAK;YAC1C,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI;YACvC,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/diwa-table-head-cell/diwa-table-head-cell-styles.js

@@ -0,0 +1,51 @@
+export 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);
+  }
+  ` : ''}
+`;
+//# sourceMappingURL=diwa-table-head-cell-styles.js.map

package/dist/collection/components/diwa-table-head-cell/diwa-table-head-cell-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-table-head-cell-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-table-head-cell/diwa-table-head-cell-styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAiB,EAAE,SAAkB,EAAU,EAAE,CAAC;;;;;;;;;;;mBAW/D,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;;;;;;;;;;;;;;;;;;IAkB9C,QAAQ,CAAC,CAAC,CAAC;;;;;;;;;;;;;;mBAcI,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;;;;;GAK/C,CAAC,CAAC,CAAC,EAAE;CACP,CAAC","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"]}

package/dist/collection/components/diwa-table-head-cell/diwa-table-head-cell.js

@@ -0,0 +1,137 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-table-head-cell-styles";
+/** @component diwa-table-head-cell — Maps to <th> inside a diwa-table-head row. */
+export class DiwaTableHeadCell {
+    constructor() {
+        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 = (h("span", { key: '3763494f5c22dc12b37dcac58c213597c84e6711', class: hideLabel ? 'sr-only' : undefined }, h("slot", { key: '0b5b5c768b9c225e73c45a257ce26d4521777266' })));
+        const sortIcon = (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',
+            } }, h("path", { key: 'd2ecf59d26781da72b37a4be364aa293531c79cd', d: "M4 10L8 6L12 10", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+        return (h(Host, { key: 'd34447c382406fccd6da18cd313524c0fa7572ae', role: "columnheader", "aria-sort": ariaSort }, h("style", { key: '867bd55aad47be3565ac1393f02d5e8473293c99', innerHTML: getComponentCss(isSortable, multiline) }), isSortable ? (h("button", { type: "button", class: "sort-btn", onClick: this.handleSort }, labelEl, sortIcon)) : (labelEl)));
+    }
+    static get is() { return "diwa-table-head-cell"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "sort": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableHeadCellSort",
+                    "resolved": "TableHeadCellSort | undefined",
+                    "references": {
+                        "TableHeadCellSort": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-table-head-cell/types.ts::TableHeadCellSort"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "multiline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "multiline",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=diwa-table-head-cell.js.map

package/dist/collection/components/diwa-table-head-cell/diwa-table-head-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-table-head-cell.js","sourceRoot":"","sources":["../../../src/components/diwa-table-head-cell/diwa-table-head-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/diwa-table-head-cell/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/diwa-table-head-cell/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-table-head-cell/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Direction = 'asc' | 'desc';\r\n\r\nexport interface TableHeadCellSort {\r\n  id: string;\r\n  active: boolean;\r\n  direction: Direction;\r\n}\r\n\r\nexport type TableUpdateEventDetail = TableHeadCellSort;\r\n"]}

package/dist/collection/components/diwa-table-row/diwa-table-row-styles.js

@@ -0,0 +1,11 @@
+export 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);
+  }
+`;
+//# sourceMappingURL=diwa-table-row-styles.js.map

package/dist/collection/components/diwa-table-row/diwa-table-row-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-table-row-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-table-row/diwa-table-row-styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;CAS5C,CAAC","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"]}

package/dist/collection/components/diwa-table-row/diwa-table-row.js

@@ -0,0 +1,44 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-table-row-styles";
+/** @component diwa-table-row — Maps to <tr> inside diwa-table-head or diwa-table-body. */
+export class DiwaTableRow {
+    constructor() {
+        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' })));
+    }
+    static get is() { return "diwa-table-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=diwa-table-row.js.map

package/dist/collection/components/diwa-table-row/diwa-table-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-table-row.js","sourceRoot":"","sources":["../../../src/components/diwa-table-row/diwa-table-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,0FAA0F;AAE1F,MAAM,OAAO,YAAY;IADzB;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,IAAI,CAAC,KAAK;YACrC,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI;YACvC,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/diwa-tabs/diwa-tabs-styles.js

@@ -0,0 +1,63 @@
+import { getFocusStyle, getReducedMotionStyle } from "../../utils/styles";
+export const getComponentCss = () => `
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .bar {
+    display: flex;
+    align-items: flex-end;
+    gap: 0;
+    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .bar::-webkit-scrollbar {
+    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);
+    border: none;
+    border-bottom: var(--diwa-border-width-base) solid transparent;
+    background: transparent;
+    font-size: var(--diwa-font-size-base);
+    font-family: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    margin-bottom: -1px;
+    transition: color var(--diwa-transition-base), border-color var(--diwa-transition-base);
+    color: var(--diwa-text-secondary);
+    font-weight: var(--diwa-font-weight-medium);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .tab-btn:hover {
+      color: var(--diwa-text-primary);
+    }
+  }
+
+  .tab-btn[aria-selected="true"] {
+    color: var(--diwa-accent);
+    border-bottom-color: var(--diwa-accent);
+    font-weight: var(--diwa-font-weight-medium);
+  }
+
+  ${getFocusStyle('.tab-btn')}
+
+  .panels {
+    padding-top: var(--diwa-space-4);
+  }
+
+  ${getReducedMotionStyle('.tab-btn')}
+`;
+//# sourceMappingURL=diwa-tabs-styles.js.map

package/dist/collection/components/diwa-tabs/diwa-tabs-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-tabs-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-tabs/diwa-tabs-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE1E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqDzC,aAAa,CAAC,UAAU,CAAC;;;;;;IAMzB,qBAAqB,CAAC,UAAU,CAAC;CACpC,CAAC","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"]}

package/dist/collection/components/diwa-tabs/diwa-tabs.js

@@ -0,0 +1,138 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-tabs-styles";
+/**
+ * @component diwa-tabs
+ *
+ * A full tabs component consisting of an integrated tab bar and panel area.
+ * Accepts `diwa-tabs-item` elements as children. The component renders
+ * its own horizontal tab buttons and shows only the panel for the active
+ * tab.
+ *
+ * Usage:
+ *   <diwa-tabs active-tab-index={0} onupdate={e => setTab(e.detail.activeTabIndex)}>
+ *     <diwa-tabs-item label="Overview">Content A</diwa-tabs-item>
+ *     <diwa-tabs-item label="Details">Content B</diwa-tabs-item>
+ *   </diwa-tabs>
+ */
+export class DiwaTabs {
+    constructor() {
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** Zero-based index of the currently active tab. */
+        this.activeTabIndex = 0;
+    }
+    handleIndexChange() {
+        this.syncItems();
+    }
+    componentDidLoad() {
+        this.syncItems();
+    }
+    componentDidUpdate() {
+        this.syncItems();
+    }
+    getItems() {
+        return Array.from(this.host.querySelectorAll('diwa-tabs-item'));
+    }
+    syncItems() {
+        const items = this.getItems();
+        items.forEach((item, i) => {
+            item.active = i === this.activeTabIndex;
+            item.setAttribute('id', `panel-${i}`);
+        });
+    }
+    handleTabClick(index) {
+        if (index === this.activeTabIndex)
+            return;
+        this.activeTabIndex = index;
+        this.update.emit({ activeTabIndex: index });
+        this.syncItems();
+    }
+    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' }))));
+    }
+    static get is() { return "diwa-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "activeTabIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Zero-based index of the currently active tab."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-tab-index",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "update",
+                "name": "update",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user selects a different tab."
+                },
+                "complexType": {
+                    "original": "TabsUpdateEventDetail",
+                    "resolved": "TabsUpdateEventDetail",
+                    "references": {
+                        "TabsUpdateEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-tabs/types.ts::TabsUpdateEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "activeTabIndex",
+                "methodName": "handleIndexChange"
+            }];
+    }
+}
+//# sourceMappingURL=diwa-tabs.js.map

package/dist/collection/components/diwa-tabs/diwa-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-tabs.js","sourceRoot":"","sources":["../../../src/components/diwa-tabs/diwa-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAqB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGnG,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;;;;;;;;;GAaG;AAKH,MAAM,OAAO,QAAQ;IAJrB;QAOE,oCAAoC;QACX,UAAK,GAAU,MAAM,CAAC;QAE/C,oDAAoD;QAEpD,mBAAc,GAAW,CAAC,CAAC;KAoE5B;IA3DC,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAEO,QAAQ;QACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAA8B,CAAC;IAC/F,CAAC;IAEO,SAAS;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACvB,IAAY,CAAC,MAAM,GAAG,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC;YACjD,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC;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;IACnB,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI;YACvC,4DAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,IAC5B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,cACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,mBACE,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC5C,SAAS,CAAC,EAAE,EAC3B,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC5C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAEnC,IAAY,CAAC,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAC/B,CACV,CAAC,CACE;YACN,4DAAK,KAAK,EAAC,QAAQ;gBACjB,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/diwa-tabs/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/diwa-tabs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-tabs/types.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\r\n * diwa-tabs — Public TypeScript types\r\n */\r\n\r\nexport interface TabsUpdateEventDetail {\r\n  activeTabIndex: number;\r\n}\r\n"]}

package/dist/collection/components/diwa-tabs-bar/diwa-tabs-bar-styles.js

@@ -0,0 +1,91 @@
+import { getReducedMotionStyle } from "../../utils/styles";
+export 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;
+  }
+
+  ${getReducedMotionStyle('::slotted(a)', '::slotted(button)')}
+`;
+//# sourceMappingURL=diwa-tabs-bar-styles.js.map