@diwacopilot/components 1.0.0

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

@@ -0,0 +1,113 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3fa02c74.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './styles-e5a47a2d.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 getElement(this); }
+    static get watchers() { return {
+        "activeTabIndex": ["handleIndexChange"]
+    }; }
+};
+
+export { DiwaTabs as diwa_tabs };
+
+//# sourceMappingURL=diwa-tabs.entry.js.map

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

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

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

@@ -0,0 +1,110 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3fa02c74.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './styles-e5a47a2d.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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; }
+};
+
+export { DiwaTagDismissible as diwa_tag_dismissible };
+
+//# sourceMappingURL=diwa-tag-dismissible.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-tag-dismissible.entry.js","mappings":"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","names":[],"sources":["src/components/diwa-tag-dismissible/diwa-tag-dismissible-styles.ts","src/components/diwa-tag-dismissible/diwa-tag-dismissible.tsx"],"sourcesContent":["import type { TagVariant } from '../diwa-tag/types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nconst VARIANT_BG: Record<TagVariant, string> = {\r\n  neutral: 'var(--diwa-bg-surface)',\r\n  primary: 'var(--diwa-accent-bg)',\r\n  info:    'var(--diwa-notification-info-soft)',\r\n  success: 'var(--diwa-notification-success-soft)',\r\n  warning: 'var(--diwa-notification-warning-soft)',\r\n  error:   'var(--diwa-notification-error-soft)',\r\n};\r\nconst VARIANT_COLOR: Record<TagVariant, string> = {\r\n  neutral: 'var(--diwa-text-primary)',\r\n  primary: 'var(--diwa-accent)',\r\n  info:    'var(--diwa-notification-info)',\r\n  success: 'var(--diwa-notification-success)',\r\n  warning: 'var(--diwa-notification-warning)',\r\n  error:   'var(--diwa-notification-error)',\r\n};\r\nconst VARIANT_BORDER: Record<TagVariant, string> = {\r\n  neutral: 'var(--diwa-border)',\r\n  primary: 'var(--diwa-accent)',\r\n  info:    'var(--diwa-color-info-300)',\r\n  success: 'transparent',\r\n  warning: 'transparent',\r\n  error:   'transparent',\r\n};\r\n\r\nexport const getComponentCss = (variant: TagVariant, compact: boolean): string => {\r\n  const bg = VARIANT_BG[variant];\r\n  const color = VARIANT_COLOR[variant];\r\n  const border = VARIANT_BORDER[variant];\r\n  const paddingY = compact ? '1px' : '2px';\r\n  const paddingX = compact ? '6px' : '10px';\r\n  const fontSize = compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-md)';\r\n  const iconSize = compact ? '12px' : '14px';\r\n\r\n  return `\r\n    :host {\r\n      display: inline-flex;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .tag {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--diwa-space-1);\r\n      padding: ${paddingY} ${paddingX};\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${fontSize};\r\n      font-weight: var(--diwa-font-weight-medium);\r\n      line-height: var(--diwa-line-height-tight);\r\n      color: ${color};\r\n      background: ${bg};\r\n      border: var(--diwa-border-width-thin) solid ${border};\r\n      border-radius: var(--diwa-radius-sm);\r\n      white-space: nowrap;\r\n      user-select: none;\r\n    }\r\n    .dismiss {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: ${iconSize};\r\n      height: ${iconSize};\r\n      margin-left: var(--diwa-space-0-5);\r\n      padding: 0;\r\n      background: none;\r\n      border: none;\r\n      border-radius: var(--diwa-radius-xs);\r\n      color: inherit;\r\n      cursor: pointer;\r\n      flex-shrink: 0;\r\n      opacity: var(--diwa-opacity-muted);\r\n      transition: opacity var(--diwa-transition-base);\r\n    }\r\n    .dismiss:hover {\r\n      opacity: 1;\r\n    }\r\n    ${getFocusStyle('.dismiss')}\r\n\r\n    ${getReducedMotionStyle('.dismiss')}\r\n  `;\r\n};\r\n","import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TagVariant } from './types';\r\nimport { getComponentCss } from './diwa-tag-dismissible-styles';\r\n\r\n/**\r\n * @slot default — Tag label content.\r\n */\r\n@Component({\r\n  tag: 'diwa-tag-dismissible',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaTagDismissible {\r\n  /** Visual style variant. */\r\n  @Prop({ reflect: true }) variant: TagVariant = 'neutral';\r\n\r\n  /** Renders a compact (smaller) version of the tag. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /** Accessible label for the dismiss button. */\r\n  @Prop() label?: string = 'Remove';\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Emitted when the dismiss button is clicked. */\r\n  @Event({ bubbles: false, composed: false }) dismiss!: EventEmitter<void>;\r\n\r\n  private handleDismiss = (): void => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  render() {\r\n    const iconSize = this.compact ? 12 : 14;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.variant, this.compact)} />\r\n        <span class=\"tag\">\r\n          <slot />\r\n          <button\r\n            class=\"dismiss\"\r\n            type=\"button\"\r\n            aria-label={this.label}\r\n            onClick={this.handleDismiss}\r\n          >\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width={iconSize}\r\n              height={iconSize}\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n            </svg>\r\n          </button>\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -0,0 +1,88 @@
+import { r as registerInstance, h, H as Host } from './index-3fa02c74.js';
+
+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',
+    },
+};
+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;
+    }
+  `;
+};
+
+const DiwaTag = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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' }))));
+    }
+};
+
+export { DiwaTag as diwa_tag };
+
+//# sourceMappingURL=diwa-tag.entry.js.map

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

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

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

@@ -0,0 +1,30 @@
+import { r as registerInstance, h, H as Host } from './index-3fa02c74.js';
+
+const getItemCss = () => `
+  :host {
+    display: list-item;
+    font-family: var(--diwa-font-family-base);
+    font-size: var(--diwa-font-size-base);
+    line-height: var(--diwa-line-height-normal);
+    color: var(--diwa-text-primary);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+`;
+
+const DiwaTextListItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Per-component theme override. */
+        this.theme = 'dark';
+    }
+    render() {
+        return (h(Host, { key: '47380c135fb14278e005d237c7dfc0ae1e8d2982', "data-theme": this.theme }, h("style", { key: '61e2d7744729759cad4eb82f1af96d033a817a3f', innerHTML: getItemCss() }), h("slot", { key: '916a0c9ebd931b61ae4d76ab172ab437cd2cbd3d' })));
+    }
+};
+
+export { DiwaTextListItem as diwa_text_list_item };
+
+//# sourceMappingURL=diwa-text-list-item.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-text-list-item.entry.js","mappings":";;AAAO,MAAM,UAAU,GAAG,MAAc;;;;;;;;;;;;CAYvC;;MCSY,gBAAgB;IAJ7B;;;QAM2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,UAAU,EAAE,GAAI,EAClC,8DAAQ,CACH,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-text-list-item/diwa-text-list-item-styles.ts","src/components/diwa-text-list-item/diwa-text-list-item.tsx"],"sourcesContent":["export const getItemCss = (): string => `\r\n  :host {\r\n    display: list-item;\r\n    font-family: var(--diwa-font-family-base);\r\n    font-size: var(--diwa-font-size-base);\r\n    line-height: var(--diwa-line-height-normal);\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, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getItemCss } from './diwa-text-list-item-styles';\r\n\r\n/**\r\n * @component diwa-text-list-item\r\n *\r\n * A single item within a `diwa-text-list`. Renders as a `<li>` (display: list-item)\r\n * so it inherits the list-style-type and indentation from its parent list.\r\n *\r\n * Usage:\r\n *   <diwa-text-list>\r\n *     <diwa-text-list-item>Item text</diwa-text-list-item>\r\n *   </diwa-text-list>\r\n *\r\n * @slot default — Item text or inline content.\r\n */\r\n@Component({\r\n  tag: 'diwa-text-list-item',\r\n  shadow: true,\r\n})\r\nexport class DiwaTextListItem {\r\n  /** Per-component theme override. */\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={getItemCss()} />\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -0,0 +1,45 @@
+import { r as registerInstance, h, H as Host } from './index-3fa02c74.js';
+
+const getComponentCss = (type) => `
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .list {
+    margin: 0;
+    padding: 0;
+    color: var(--diwa-text-primary);
+    font-size: var(--diwa-font-size-base);
+    line-height: var(--diwa-line-height-normal);
+    ${type === 'inline' ? '' : 'padding-inline-start: 1.25em;'}
+    ${type === 'inline' ? 'list-style: none; display: flex; flex-wrap: wrap; gap: 0.25em 1em;' : ''}
+  }
+`;
+
+const DiwaTextList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /**
+         * List style.
+         * - `unordered` — bullet points (`<ul>`)
+         * - `ordered` — numbered list (`<ol>`)
+         * - `inline` — comma/space separated flex row (`<ul>` without markers)
+         */
+        this.type = 'unordered';
+    }
+    render() {
+        const Tag = this.type === 'ordered' ? 'ol' : 'ul';
+        return (h(Host, { key: '3ccc05828614ee75fb0bace58508d9868a609945', "data-theme": this.theme }, h("style", { key: '1109012ff5b89b6224909a63cba6d0645132816e', innerHTML: getComponentCss(this.type) }), h(Tag, { key: '9e406cd57d961661f10e68f2c4b18a7dfbed8abe', class: "list" }, h("slot", { key: '3e6efc18da3aa512cc1eac696ed6619aef4f39e5' }))));
+    }
+};
+
+export { DiwaTextList as diwa_text_list };
+
+//# sourceMappingURL=diwa-text-list.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-text-list.entry.js","mappings":";;AAEO,MAAM,eAAe,GAAG,CAAC,IAAkB,KAAa;;;;;;;;;;;;;;;;MAgBzD,IAAI,KAAK,QAAQ,GAAG,EAAE,GAAG,+BAA+B;MACxD,IAAI,KAAK,QAAQ,GAAG,oEAAoE,GAAG,EAAE;;CAElG;;MCEY,YAAY;IAJzB;;;QAM2B,UAAK,GAAU,MAAM,CAAC;;;;;;;QAQtB,SAAI,GAAiB,WAAW,CAAC;KAc3D;IAZC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;QAElD,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,EAChD,EAAC,GAAG,qDAAC,KAAK,EAAC,MAAM,IACf,8DAAQ,CACJ,CACD,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-text-list/diwa-text-list-styles.ts","src/components/diwa-text-list/diwa-text-list.tsx"],"sourcesContent":["import type { TextListType } from './types';\r\n\r\nexport const getComponentCss = (type: TextListType): 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  .list {\r\n    margin: 0;\r\n    padding: 0;\r\n    color: var(--diwa-text-primary);\r\n    font-size: var(--diwa-font-size-base);\r\n    line-height: var(--diwa-line-height-normal);\r\n    ${type === 'inline' ? '' : 'padding-inline-start: 1.25em;'}\r\n    ${type === 'inline' ? 'list-style: none; display: flex; flex-wrap: wrap; gap: 0.25em 1em;' : ''}\r\n  }\r\n`;\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { TextListType } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-text-list-styles';\r\n\r\n/**\r\n * @component diwa-text-list\r\n *\r\n * A styled list that renders as `<ul>`, `<ol>`, or an inline flex row depending\r\n * on the `type` prop. Accepts `diwa-text-list-item` children in the default slot.\r\n *\r\n * Usage:\r\n *   <diwa-text-list>\r\n *     <diwa-text-list-item>First item</diwa-text-list-item>\r\n *     <diwa-text-list-item>Second item</diwa-text-list-item>\r\n *   </diwa-text-list>\r\n *\r\n * @slot default — diwa-text-list-item elements.\r\n */\r\n@Component({\r\n  tag: 'diwa-text-list',\r\n  shadow: true,\r\n})\r\nexport class DiwaTextList {\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * List style.\r\n   * - `unordered` — bullet points (`<ul>`)\r\n   * - `ordered` — numbered list (`<ol>`)\r\n   * - `inline` — comma/space separated flex row (`<ul>` without markers)\r\n   */\r\n  @Prop({ reflect: true }) type: TextListType = 'unordered';\r\n\r\n  render() {\r\n    const Tag = this.type === 'ordered' ? 'ol' : 'ul';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.type)} />\r\n        <Tag class=\"list\">\r\n          <slot />\r\n        </Tag>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -0,0 +1,83 @@
+import { r as registerInstance, h, H as Host } from './index-3fa02c74.js';
+
+const FONT_SIZE = {
+    'x-small': 'var(--diwa-font-size-xs)',
+    'small': 'var(--diwa-font-size-md)',
+    'medium': 'var(--diwa-font-size-base)',
+    'large': 'var(--diwa-font-size-lg)',
+    'x-large': 'var(--diwa-font-size-xl)',
+    'xx-large': 'var(--diwa-font-size-3xl)',
+};
+const FONT_WEIGHT = {
+    regular: 'var(--diwa-font-weight-normal)',
+    semibold: 'var(--diwa-font-weight-semibold)',
+    bold: 'var(--diwa-font-weight-bold)',
+};
+const COLOR = {
+    primary: 'var(--diwa-text-primary)',
+    secondary: 'var(--diwa-text-secondary)',
+    tertiary: 'var(--diwa-text-tertiary)',
+    inherit: 'inherit',
+};
+const getComponentCss = (size, weight, align, color, ellipsis) => `
+
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .text {
+    margin: 0;
+    padding: 0;
+    font-size: ${FONT_SIZE[size]};
+    font-weight: ${FONT_WEIGHT[weight]};
+    line-height: var(--diwa-line-height-normal);
+    text-align: ${align};
+    color: ${COLOR[color]};
+    ${ellipsis ? 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' : ''}
+  }
+`;
+
+const DiwaText = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** HTML element to render. Choose based on semantic context. */
+        this.tag = 'p';
+        /** Font size tier. Maps to the diwa type scale. */
+        this.size = 'small';
+        /** Font weight. */
+        this.weight = 'regular';
+        /** Horizontal alignment. `start` and `end` are RTL-aware. */
+        this.align = 'start';
+        /**
+         * Colour alias. Use `inherit` to pass through the surrounding colour unchanged —
+         * useful inside buttons, table cells, or other styled containers.
+         */
+        this.color = 'primary';
+        /**
+         * Clip overflow to a single line with a trailing ellipsis.
+         * The host element must have a defined width for this to take effect.
+         */
+        this.ellipsis = false;
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const Tag = this.tag; // eslint-disable-line @typescript-eslint/no-explicit-any
+        return (h(Host, { key: '9f5fd3cbc2cd12f7fef7b55c095aff9cddbbfe30', "data-theme": this.theme }, h("style", { key: 'a83a6f78e4bc7474ce28cf1d3010a021e1bbf099', innerHTML: getComponentCss(this.size, this.weight, this.align, this.color, this.ellipsis) }), h(Tag, { key: '24f5ac5e6bcbeaad882089d9a4a996184e712b7d', class: "text" }, h("slot", { key: '027dc2c754f75aa59d4616565c53599051497748' }))));
+    }
+};
+
+export { DiwaText as diwa_text };
+
+//# sourceMappingURL=diwa-text.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-text.entry.js","mappings":";;AAEA,MAAM,SAAS,GAA6B;IAC1C,SAAS,EAAG,0BAA0B;IACtC,OAAO,EAAK,0BAA0B;IACtC,QAAQ,EAAI,4BAA4B;IACxC,OAAO,EAAK,0BAA0B;IACtC,SAAS,EAAG,0BAA0B;IACtC,UAAU,EAAE,2BAA2B;CACxC,CAAC;AAEF,MAAM,WAAW,GAA+B;IAC9C,OAAO,EAAG,gCAAgC;IAC1C,QAAQ,EAAE,kCAAkC;IAC5C,IAAI,EAAM,8BAA8B;CACzC,CAAC;AAEF,MAAM,KAAK,GAA8B;IACvC,OAAO,EAAI,0BAA0B;IACrC,SAAS,EAAE,4BAA4B;IACvC,QAAQ,EAAG,2BAA2B;IACtC,OAAO,EAAI,SAAS;CACrB,CAAC;AAEK,MAAM,eAAe,GAAG,CAC7B,IAAc,EACd,MAAkB,EAClB,KAAgB,EAChB,KAAgB,EAChB,QAAiB,KACN;;;;;;;;;;;;;;iBAcI,SAAS,CAAC,IAAI,CAAC;mBACb,WAAW,CAAC,MAAM,CAAC;;kBAEpB,KAAK;aACV,KAAK,CAAC,KAAK,CAAC;MACnB,QAAQ,GAAG,iEAAiE,GAAG,EAAE;;CAEtF;;MC7BY,QAAQ;IAJrB;;;;;;QAU2B,UAAK,GAAU,MAAM,CAAC;;QAGtB,QAAG,GAAY,GAAG,CAAC;;QAGnB,SAAI,GAAa,OAAO,CAAC;;QAGzB,WAAM,GAAe,SAAS,CAAC;;QAG/B,UAAK,GAAc,OAAO,CAAC;;;;;QAM3B,UAAK,GAAc,SAAS,CAAC;;;;;QAM7B,aAAQ,GAAY,KAAK,CAAC;KAkBpD;;;;IAZC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAU,CAAC;QAE5B,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAI,EACpG,EAAC,GAAG,qDAAC,KAAK,EAAC,MAAM,IACf,8DAAQ,CACJ,CACD,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-text/diwa-text-styles.ts","src/components/diwa-text/diwa-text.tsx"],"sourcesContent":["import type { TextAlign, TextColor, TextSize, TextWeight } from './types';\r\n\r\nconst FONT_SIZE: Record<TextSize, string> = {\r\n  'x-small':  'var(--diwa-font-size-xs)',\r\n  'small':    'var(--diwa-font-size-md)',\r\n  'medium':   'var(--diwa-font-size-base)',\r\n  'large':    'var(--diwa-font-size-lg)',\r\n  'x-large':  'var(--diwa-font-size-xl)',\r\n  'xx-large': 'var(--diwa-font-size-3xl)',\r\n};\r\n\r\nconst FONT_WEIGHT: Record<TextWeight, string> = {\r\n  regular:  'var(--diwa-font-weight-normal)',\r\n  semibold: 'var(--diwa-font-weight-semibold)',\r\n  bold:     'var(--diwa-font-weight-bold)',\r\n};\r\n\r\nconst COLOR: Record<TextColor, string> = {\r\n  primary:   'var(--diwa-text-primary)',\r\n  secondary: 'var(--diwa-text-secondary)',\r\n  tertiary:  'var(--diwa-text-tertiary)',\r\n  inherit:   'inherit',\r\n};\r\n\r\nexport const getComponentCss = (\r\n  size: TextSize,\r\n  weight: TextWeight,\r\n  align: TextAlign,\r\n  color: TextColor,\r\n  ellipsis: boolean,\r\n): string => `\r\n\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  .text {\r\n    margin: 0;\r\n    padding: 0;\r\n    font-size: ${FONT_SIZE[size]};\r\n    font-weight: ${FONT_WEIGHT[weight]};\r\n    line-height: var(--diwa-line-height-normal);\r\n    text-align: ${align};\r\n    color: ${COLOR[color]};\r\n    ${ellipsis ? 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' : ''}\r\n  }\r\n`;\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { TextAlign, TextColor, TextSize, TextTag, TextWeight } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-text-styles';\r\n\r\n/**\r\n * @component diwa-text\r\n *\r\n * A semantically correct text renderer that maps a visual type scale onto\n * the correct HTML element. Mirrors the Diwa text API contract.\n *\r\n * Usage:\r\n *   <diwa-text size=\"large\" weight=\"semibold\">Section title</diwa-text>\r\n *   <diwa-text size=\"small\" color=\"secondary\">Supporting detail</diwa-text>\r\n *   <diwa-text tag=\"span\" size=\"medium\" ellipsis>Truncated text</diwa-text>\r\n *\r\n * @slot default — Text content. Can include inline elements.\r\n */\r\n@Component({\r\n  tag: 'diwa-text',\r\n  shadow: true,\r\n})\r\nexport class DiwaText {\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** HTML element to render. Choose based on semantic context. */\r\n  @Prop({ reflect: true }) tag: TextTag = 'p';\r\n\r\n  /** Font size tier. Maps to the diwa type scale. */\r\n  @Prop({ reflect: true }) size: TextSize = 'small';\r\n\r\n  /** Font weight. */\r\n  @Prop({ reflect: true }) weight: TextWeight = 'regular';\r\n\r\n  /** Horizontal alignment. `start` and `end` are RTL-aware. */\r\n  @Prop({ reflect: true }) align: TextAlign = 'start';\r\n\r\n  /**\r\n   * Colour alias. Use `inherit` to pass through the surrounding colour unchanged —\r\n   * useful inside buttons, table cells, or other styled containers.\r\n   */\r\n  @Prop({ reflect: true }) color: TextColor = 'primary';\r\n\r\n  /**\r\n   * Clip overflow to a single line with a trailing ellipsis.\r\n   * The host element must have a defined width for this to take effect.\r\n   */\r\n  @Prop({ reflect: true }) ellipsis: boolean = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const Tag = this.tag as any; // eslint-disable-line @typescript-eslint/no-explicit-any\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.size, this.weight, this.align, this.color, this.ellipsis)} />\r\n        <Tag class=\"text\">\r\n          <slot />\r\n        </Tag>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}