@diwacopilot/components 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-tabs-bar-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-tabs-bar/diwa-tabs-bar-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuFzC,qBAAqB,CAAC,cAAc,EAAE,mBAAmB,CAAC;CAC7D,CAAC","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"]}

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

@@ -0,0 +1,240 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-tabs-bar-styles";
+/**
+ * @component diwa-tabs-bar
+ *
+ * A styled tab navigation bar. Accepts `<a>` or `<button>` elements in the
+ * default slot and tracks the active index. Mark the active tab with the
+ * `data-active` attribute or the `active` CSS class, or let the component
+ * manage it by providing `activeTabIndex`.
+ *
+ * Usage:
+ *   <diwa-tabs-bar active-tab-index={1} onupdate={e => setTab(e.detail.activeTabIndex)}>
+ *     <button>Tab 1</button>
+ *     <button>Tab 2</button>
+ *     <button>Tab 3</button>
+ *   </diwa-tabs-bar>
+ */
+export class DiwaTabsBar {
+    constructor() {
+        /** 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 (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' }))));
+    }
+    static get is() { return "diwa-tabs-bar"; }
+    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 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 active tab changes."
+                },
+                "complexType": {
+                    "original": "TabsBarUpdateEventDetail",
+                    "resolved": "TabsBarUpdateEventDetail",
+                    "references": {
+                        "TabsBarUpdateEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-tabs-bar/types.ts::TabsBarUpdateEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "activeTabIndex",
+                "methodName": "handleIndexChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=diwa-tabs-bar.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+export const getComponentCss = (active) => `
+  :host {
+    display: ${active ? 'block' : 'none'};
+    font-family: var(--diwa-font-family-base);
+    color: var(--diwa-text-primary);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+`;
+//# sourceMappingURL=diwa-tabs-item-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-tabs-item-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-tabs-item/diwa-tabs-item-styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAe,EAAU,EAAE,CAAC;;eAE7C,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;;;;CAQvC,CAAC","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"]}

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

@@ -0,0 +1,98 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-tabs-item-styles";
+/**
+ * @component diwa-tabs-item
+ *
+ * A single panel used inside `diwa-tabs`. The parent renders the tab button
+ * from the `label` prop, and shows/hides this panel via `active`.
+ *
+ * Usage:
+ *   <diwa-tabs-item label="Overview">Panel content here</diwa-tabs-item>
+ */
+export class DiwaTabsItem {
+    constructor() {
+        /** 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 (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' })));
+    }
+    static get is() { return "diwa-tabs-item"; }
+    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'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tab button label. Rendered by the parent diwa-tabs component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this panel is currently visible. Managed by the parent diwa-tabs."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=diwa-tabs-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-tabs-item.js","sourceRoot":"","sources":["../../../src/components/diwa-tabs-item/diwa-tabs-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D;;;;;;;;GAQG;AAKH,MAAM,OAAO,YAAY;IAJzB;QAOE,oCAAoC;QACX,UAAK,GAAU,MAAM,CAAC;QAE/C,oEAAoE;QAC5D,UAAK,GAAW,EAAE,CAAC;QAE3B,gFAAgF;QACxC,WAAM,GAAY,KAAK,CAAC;KAUjE;IARC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,iBAAc,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,gBAAc,IAAI,CAAC,KAAK;YACvF,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,GAAI;YAClD,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -0,0 +1 @@
+"use strict";

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

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

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

@@ -0,0 +1,68 @@
+const VARIANT_MAP = {
+    neutral: {
+        bg: 'var(--diwa-bg-surface)',
+        color: 'var(--diwa-text-primary)',
+        border: 'var(--diwa-border)',
+    },
+    primary: {
+        bg: 'var(--diwa-accent-bg)',
+        color: 'var(--diwa-accent)',
+        border: 'var(--diwa-accent)',
+    },
+    info: {
+        bg: 'var(--diwa-notification-info-soft)',
+        color: 'var(--diwa-notification-info)',
+        border: 'var(--diwa-color-info-300)',
+    },
+    success: {
+        bg: 'var(--diwa-notification-success-soft)',
+        color: 'var(--diwa-notification-success)',
+        border: 'transparent',
+    },
+    warning: {
+        bg: 'var(--diwa-notification-warning-soft)',
+        color: 'var(--diwa-notification-warning)',
+        border: 'transparent',
+    },
+    error: {
+        bg: 'var(--diwa-notification-error-soft)',
+        color: 'var(--diwa-notification-error)',
+        border: 'transparent',
+    },
+};
+export const getComponentCss = (variant, compact) => {
+    const { bg, color, border } = VARIANT_MAP[variant];
+    const paddingY = compact ? '1px' : '2px';
+    const paddingX = compact ? '6px' : '10px';
+    const fontSize = compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-md)';
+    return `
+    :host {
+      display: inline-flex;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .tag {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--diwa-space-1);
+      padding: ${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);
+      color: ${color};
+      background: ${bg};
+      border: var(--diwa-border-width-thin) solid ${border};
+      border-radius: var(--diwa-radius-sm);
+      white-space: nowrap;
+      user-select: none;
+    }
+    .icon {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+  `;
+};
+//# sourceMappingURL=diwa-tag-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-tag-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-tag/diwa-tag-styles.ts"],"names":[],"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;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAAmB,EAAE,OAAgB,EAAU,EAAE;IAC/E,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IACzC,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1C,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,0BAA0B,CAAC;IAEnF,OAAO;;;;;;;;;;;iBAWQ,QAAQ,IAAI,QAAQ;;mBAElB,QAAQ;;;eAGZ,KAAK;oBACA,EAAE;oDAC8B,MAAM;;;;;;;;;;GAUvD,CAAC;AACJ,CAAC,CAAC","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"]}

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

@@ -0,0 +1,116 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-tag-styles";
+/**
+ * @slot default — Tag label content.
+ */
+export class DiwaTag {
+    constructor() {
+        /** Visual style variant. */
+        this.variant = 'neutral';
+        /** Renders a compact (smaller) version of the tag. */
+        this.compact = false;
+        /** Adapts the color when used on a light or dark background. */
+        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' }))));
+    }
+    static get is() { return "diwa-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagVariant",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "TagVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-tag/types.ts::TagVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style variant."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'neutral'"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders a compact (smaller) version of the tag."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "compact",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Lucide icon name to display before the label, or omit for no icon."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "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": "Adapts the color when used on a light or dark background."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=diwa-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-tag.js","sourceRoot":"","sources":["../../../src/components/diwa-tag/diwa-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD;;GAEG;AAKH,MAAM,OAAO,OAAO;IAJpB;QAKE,4BAA4B;QACH,YAAO,GAAe,SAAS,CAAC;QAEzD,sDAAsD;QAC7B,YAAO,GAAY,KAAK,CAAC;QAKlD,gEAAgE;QACvC,UAAK,GAAU,MAAM,CAAC;KAiBhD;IAfC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI;YACjE,6DAAM,KAAK,EAAC,KAAK;gBACd,IAAI,CAAC,IAAI,IAAI,CACZ,6DAAM,KAAK,EAAC,MAAM;oBAChB,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAI,CACvD,CACR;gBACD,8DAAQ,CACH,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -0,0 +1,2 @@
+export const TAG_VARIANTS = ['neutral', 'primary', 'info', 'success', 'warning', 'error'];
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-tag/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAU,CAAC","sourcesContent":["export const TAG_VARIANTS = ['neutral', 'primary', 'info', 'success', 'warning', 'error'] as const;\r\nexport type TagVariant = (typeof TAG_VARIANTS)[number];\r\n"]}