@diwacopilot/components 1.0.0

package/dist-custom-elements/diwa-tabs-bar.js

@@ -0,0 +1,251 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { a as getReducedMotionStyle } from './p-70bbb21a.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;
+  }
+
+  ${getReducedMotionStyle('::slotted(a)', '::slotted(button)')}
+`;
+
+const DiwaTabsBar$1 = /*@__PURE__*/ proxyCustomElement(class DiwaTabsBar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.update = 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 H);
+    }
+    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' }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "activeTabIndex": ["handleIndexChange"]
+    }; }
+}, [1, "diwa-tabs-bar", {
+        "theme": [513],
+        "activeTabIndex": [1026, "active-tab-index"]
+    }, [[0, "click", "handleClick"], [0, "keydown", "handleKeydown"]], {
+        "activeTabIndex": ["handleIndexChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-tabs-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-tabs-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaTabsBar$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaTabsBar = DiwaTabsBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaTabsBar, defineCustomElement };
+
+//# sourceMappingURL=diwa-tabs-bar.js.map

package/dist-custom-elements/diwa-tabs-bar.js.map

@@ -0,0 +1 @@
+{"file":"diwa-tabs-bar.js","mappings":"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","names":["DiwaTabsBar","HTMLElement"],"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-custom-elements/diwa-tabs-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaTabsItem extends Components.DiwaTabsItem, HTMLElement {}
+export const DiwaTabsItem: {
+    prototype: DiwaTabsItem;
+    new (): DiwaTabsItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist-custom-elements/diwa-tabs-item.js

@@ -0,0 +1,56 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.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$1 = /*@__PURE__*/ proxyCustomElement(class DiwaTabsItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** 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' })));
+    }
+    get host() { return this; }
+}, [1, "diwa-tabs-item", {
+        "theme": [513],
+        "label": [1],
+        "active": [1540]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-tabs-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-tabs-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaTabsItem$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaTabsItem = DiwaTabsItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaTabsItem, defineCustomElement };
+
+//# sourceMappingURL=diwa-tabs-item.js.map

package/dist-custom-elements/diwa-tabs-item.js.map

@@ -0,0 +1 @@
+{"file":"diwa-tabs-item.js","mappings":";;AAAO,MAAM,eAAe,GAAG,CAAC,MAAe,KAAa;;eAE7C,MAAM,GAAG,OAAO,GAAG,MAAM;;;;;;;;CAQvC;;MCOYA,cAAY;IAJzB;;;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAGvC,UAAK,GAAW,EAAE,CAAC;;QAGa,WAAM,GAAY,KAAK,CAAC;KAUjE;IARC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,iBAAc,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,gBAAc,IAAI,CAAC,KAAK,IACvF,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,GAAI,EAClD,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaTabsItem"],"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}

package/dist-custom-elements/diwa-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaTabs extends Components.DiwaTabs, HTMLElement {}
+export const DiwaTabs: {
+    prototype: DiwaTabs;
+    new (): DiwaTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist-custom-elements/diwa-tabs.js

@@ -0,0 +1,137 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
+
+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')}
+`;
+
+const DiwaTabs$1 = /*@__PURE__*/ proxyCustomElement(class DiwaTabs extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.update = createEvent(this, "update", 1);
+        /** 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' }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "activeTabIndex": ["handleIndexChange"]
+    }; }
+}, [1, "diwa-tabs", {
+        "theme": [513],
+        "activeTabIndex": [1026, "active-tab-index"]
+    }, undefined, {
+        "activeTabIndex": ["handleIndexChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-tabs"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaTabs$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaTabs = DiwaTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaTabs, defineCustomElement };
+
+//# sourceMappingURL=diwa-tabs.js.map

package/dist-custom-elements/diwa-tabs.js.map

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

package/dist-custom-elements/diwa-tag-dismissible.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaTagDismissible extends Components.DiwaTagDismissible, HTMLElement {}
+export const DiwaTagDismissible: {
+    prototype: DiwaTagDismissible;
+    new (): DiwaTagDismissible;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist-custom-elements/diwa-tag-dismissible.js

@@ -0,0 +1,134 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
+
+const VARIANT_BG = {
+    neutral: 'var(--diwa-bg-surface)',
+    primary: 'var(--diwa-accent-bg)',
+    info: 'var(--diwa-notification-info-soft)',
+    success: 'var(--diwa-notification-success-soft)',
+    warning: 'var(--diwa-notification-warning-soft)',
+    error: 'var(--diwa-notification-error-soft)',
+};
+const VARIANT_COLOR = {
+    neutral: 'var(--diwa-text-primary)',
+    primary: 'var(--diwa-accent)',
+    info: 'var(--diwa-notification-info)',
+    success: 'var(--diwa-notification-success)',
+    warning: 'var(--diwa-notification-warning)',
+    error: 'var(--diwa-notification-error)',
+};
+const VARIANT_BORDER = {
+    neutral: 'var(--diwa-border)',
+    primary: 'var(--diwa-accent)',
+    info: 'var(--diwa-color-info-300)',
+    success: 'transparent',
+    warning: 'transparent',
+    error: 'transparent',
+};
+const getComponentCss = (variant, compact) => {
+    const bg = VARIANT_BG[variant];
+    const color = VARIANT_COLOR[variant];
+    const border = VARIANT_BORDER[variant];
+    const paddingY = compact ? '1px' : '2px';
+    const paddingX = compact ? '6px' : '10px';
+    const fontSize = compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-md)';
+    const iconSize = compact ? '12px' : '14px';
+    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;
+    }
+    .dismiss {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: ${iconSize};
+      height: ${iconSize};
+      margin-left: var(--diwa-space-0-5);
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: var(--diwa-radius-xs);
+      color: inherit;
+      cursor: pointer;
+      flex-shrink: 0;
+      opacity: var(--diwa-opacity-muted);
+      transition: opacity var(--diwa-transition-base);
+    }
+    .dismiss:hover {
+      opacity: 1;
+    }
+    ${getFocusStyle('.dismiss')}
+
+    ${getReducedMotionStyle('.dismiss')}
+  `;
+};
+
+const DiwaTagDismissible$1 = /*@__PURE__*/ proxyCustomElement(class DiwaTagDismissible extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dismiss = createEvent(this, "dismiss", 1);
+        /** Visual style variant. */
+        this.variant = 'neutral';
+        /** Renders a compact (smaller) version of the tag. */
+        this.compact = false;
+        /** Accessible label for the dismiss button. */
+        this.label = 'Remove';
+        /** Adapts the color when used on a light or dark background. */
+        this.theme = 'dark';
+        this.handleDismiss = () => {
+            this.dismiss.emit();
+        };
+    }
+    render() {
+        const iconSize = this.compact ? 12 : 14;
+        return (h(Host, { key: 'c8ec3a53f5d72a1a8c3f7395287261167408263c', "data-theme": this.theme }, h("style", { key: 'b89acb19c8df5f132aa1a4eeeca2f81333340fdd', innerHTML: getComponentCss(this.variant, this.compact) }), h("span", { key: '6a82c4cb61b84eb631b7cc441314929ab2ab2496', class: "tag" }, h("slot", { key: '4236c4d1ac0f0579804b0a1994ced421670b685c' }), h("button", { key: '831e2295cbd23372f7ba0daa114bef27e0d8c25a', class: "dismiss", type: "button", "aria-label": this.label, onClick: this.handleDismiss }, h("svg", { key: '8172fd785be3d5cea0a0b38243aac3a1e9f2afa8', xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("line", { key: '632af21cd22791194ffdd4a3127b699b359191b6', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: '45285993ae6ae899a06dab3d903c883632ef262a', x1: "6", y1: "6", x2: "18", y2: "18" }))))));
+    }
+    static get delegatesFocus() { return true; }
+}, [17, "diwa-tag-dismissible", {
+        "variant": [513],
+        "compact": [516],
+        "label": [1],
+        "theme": [513]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-tag-dismissible"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-tag-dismissible":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaTagDismissible$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaTagDismissible = DiwaTagDismissible$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaTagDismissible, defineCustomElement };
+
+//# sourceMappingURL=diwa-tag-dismissible.js.map