@diwacopilot/components 1.2.0 → 1.2.1

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

@@ -1 +0,0 @@
-{"file":"diwa-table-cell.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,CAAC,SAAkB,KAAa;;;;;;;;;;mBAU5C,SAAS,GAAG,QAAQ,GAAG,QAAQ;;;;CAIjD;;MCRY,aAAa;IAD1B;;QAE2B,UAAK,GAAU,MAAM,CAAC;QACvC,cAAS,GAAY,KAAK,CAAC;KAUpC;IARC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,GAAI,EACrD,8DAAQ,CACH,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-table-cell/diwa-table-cell-styles.ts","src/components/diwa-table-cell/diwa-table-cell.tsx"],"sourcesContent":["export const getComponentCss = (multiline: boolean): string => `\n  :host {\n    display: table-cell;\n    margin: 0 !important;\n    padding: var(--diwa-table-padding-y, 12px) var(--diwa-table-padding-x, 16px) !important;\n    font-size: var(--diwa-font-size-sm);\n    color: var(--diwa-text-primary);\n    border-right: var(--diwa-table-column-border, none) !important;\n    vertical-align: middle;\n    line-height: var(--diwa-line-height-normal);\n    white-space: ${multiline ? 'normal' : 'nowrap'} !important;\n  }\n  :host(:last-child) { border-right: none; }\n  :host([hidden]) { display: none; }\n`;\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport type { Theme } from '../../utils/styles';\nimport { getComponentCss } from './diwa-table-cell-styles';\n\n/** @component diwa-table-cell — Maps to <td> inside a diwa-table-row. */\n@Component({ tag: 'diwa-table-cell', shadow: true })\nexport class DiwaTableCell {\n  @Prop({ reflect: true }) theme: Theme = 'dark';\n  @Prop() multiline: boolean = false;\n\n  render() {\n    return (\n      <Host role=\"cell\">\n        <style innerHTML={getComponentCss(this.multiline)} />\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"diwa-table-head-cell.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,CAAC,QAAiB,EAAE,SAAkB,KAAa;;;;eAInE,QAAQ,GAAG,GAAG,GAAG,qEAAqE;mBAClF,SAAS,GAAG,QAAQ,GAAG,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;IA0B9C,QAAQ,GAAG;;;;;;;;;;;;;;;;;;mBAkBI,SAAS,GAAG,QAAQ,GAAG,QAAQ;;;;;mBAK/B,SAAS,GAAG,QAAQ,GAAG,QAAQ;;;;;GAK/C,GAAG,EAAE;CACP;;MCrDY,iBAAiB;IAD9B;;QAI2B,UAAK,GAAU,MAAM,CAAC;QAEvC,cAAS,GAAY,KAAK,CAAC;QAC3B,cAAS,GAAY,KAAK,CAAC;QAE3B,eAAU,GAAG;YACnB,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,OAAO;YACvB,MAAM,IAAI,GAAc,IAAI,CAAC,IAAI,CAAC,MAAM;kBACpC,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK;kBAC9C,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,aAAa,CACrB,IAAI,WAAW,CAAyB,iBAAiB,EAAE;gBACzD,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE;aAC5D,CAAC,CACH,CAAC;SACH,CAAC;KAoDH;IAlDC,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC5C,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC;QAC1B,MAAM,QAAQ,GAAG,CAAC,UAAU;cACxB,SAAS;cACT,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,SAAS,KAAK,KAAK,GAAG,WAAW,GAAG,YAAY;kBACrD,MAAM,CAAC;QAEb,MAAM,OAAO,GAAG,6DAAM,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,IAAE,8DAAQ,CAAO,CAAC;QAEhF,MAAM,QAAQ,IACZ,4DACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACC,MAAM,EAClB,KAAK,EAAE;gBACL,OAAO,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,IAAG,GAAG,GAAG,KAAK;gBACnC,SAAS,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,MAAK,MAAM,GAAG,gBAAgB,GAAG,MAAM;gBACjE,UAAU,EAAE,0CAA0C;gBACtD,UAAU,EAAE,GAAG;gBACf,OAAO,EAAE,OAAO;aACjB,IAED,6DACE,CAAC,EAAC,iBAAiB,EACnB,MAAM,EAAC,cAAc,kBACR,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CAAC;QAEF,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,cAAc,eAAY,QAAQ,IAC3C,8DAAO,SAAS,EAAE,eAAe,CAAC,UAAU,EAAE,SAAS,CAAC,GAAI,EAC3D,UAAU,IACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7D,YAAM,KAAK,EAAC,YAAY,IAAE,OAAO,CAAQ,EACxC,QAAQ,CACF,KAET,OAAO,CACR,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/diwa-table-head-cell/diwa-table-head-cell-styles.ts","src/components/diwa-table-head-cell/diwa-table-head-cell.tsx"],"sourcesContent":["export const getComponentCss = (sortable: boolean, multiline: boolean): string => `\n  :host {\n    display: table-cell;\n    margin: 0 !important;\n    padding: ${sortable ? '0' : 'var(--diwa-table-padding-y, 12px) var(--diwa-table-padding-x, 16px)'} !important;\n    white-space: ${multiline ? 'normal' : 'nowrap'} !important;\n    background: var(--diwa-table-header-bg, transparent);\n    text-align: start;\n    font-size: var(--diwa-font-size-sm);\n    font-weight: var(--diwa-font-weight-semibold);\n    letter-spacing: 0.04em;\n    color: var(--diwa-text-secondary);\n    border-right: var(--diwa-table-column-border, none) !important;\n    line-height: var(--diwa-line-height-normal);\n    vertical-align: bottom;\n  }\n  :host(:last-child) { border-right: none; }\n  :host([hidden]) { display: none; }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  ${sortable ? `\n  .sort-btn {\n    display: flex;\n    width: 100%;\n    box-sizing: border-box;\n    justify-content: space-between;\n    align-items: flex-end;\n    gap: var(--diwa-space-1);\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    font: inherit;\n    color: inherit;\n    margin: 0;\n    padding: var(--diwa-table-padding-y, 12px) var(--diwa-table-padding-x, 16px);\n    text-align: start;\n    outline-offset: 2px;\n    transition: color var(--diwa-transition-base);\n    white-space: ${multiline ? 'normal' : 'nowrap'};\n  }\n  .sort-label {\n    display: inline-flex;\n    min-width: 0;\n    white-space: ${multiline ? 'normal' : 'nowrap'};\n  }\n  .sort-btn:hover {\n    color: var(--diwa-text-primary);\n  }\n  ` : ''}\n`;\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { Direction, TableHeadCellSort, TableUpdateEventDetail } from './types';\r\nimport { getComponentCss } from './diwa-table-head-cell-styles';\r\n\r\n/** @component diwa-table-head-cell — Maps to <th> inside a diwa-table-head row. */\r\n@Component({ tag: 'diwa-table-head-cell', shadow: true })\r\nexport class DiwaTableHeadCell {\r\n  @Element() host!: HTMLElement;\r\n\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n  @Prop() sort?: TableHeadCellSort;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() multiline: boolean = false;\r\n\r\n  private handleSort = (): void => {\r\n    if (!this.sort) return;\r\n    const next: Direction = this.sort.active\r\n      ? this.sort.direction === 'asc' ? 'desc' : 'asc'\r\n      : this.sort.direction;\r\n    this.host.dispatchEvent(\r\n      new CustomEvent<TableUpdateEventDetail>('diwaTableUpdate', {\r\n        bubbles: true,\r\n        composed: true,\r\n        detail: { id: this.sort.id, active: true, direction: next },\r\n      }),\r\n    );\r\n  };\r\n\r\n  render() {\r\n    const { sort, hideLabel, multiline } = this;\r\n    const isSortable = !!sort;\r\n    const ariaSort = !isSortable\r\n      ? undefined\r\n      : sort.active\r\n        ? sort.direction === 'asc' ? 'ascending' : 'descending'\r\n        : 'none';\r\n\r\n    const labelEl = <span class={hideLabel ? 'sr-only' : undefined}><slot /></span>;\r\n\r\n    const sortIcon = (\r\n      <svg\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 16 16\"\r\n        fill=\"none\"\r\n        aria-hidden=\"true\"\r\n        style={{\r\n          opacity: sort?.active ? '1' : '0.4',\r\n          transform: sort?.direction === 'desc' ? 'rotate(180deg)' : 'none',\r\n          transition: 'opacity 150ms ease, transform 150ms ease',\r\n          flexShrink: '0',\r\n          display: 'block',\r\n        }}\r\n      >\r\n        <path\r\n          d=\"M4 10L8 6L12 10\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    );\r\n\r\n    return (\r\n      <Host role=\"columnheader\" aria-sort={ariaSort}>\r\n        <style innerHTML={getComponentCss(isSortable, multiline)} />\r\n        {isSortable ? (\r\n          <button type=\"button\" class=\"sort-btn\" onClick={this.handleSort}>\r\n            <span class=\"sort-label\">{labelEl}</span>\r\n            {sortIcon}\r\n          </button>\r\n        ) : (\r\n          labelEl\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"diwa-table-head.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;CAe5C;;MCTY,aAAa;IAD1B;;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,gBAAa,IAAI,CAAC,KAAK,IAC1C,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,8DAAQ,CACH,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-table-head/diwa-table-head-styles.ts","src/components/diwa-table-head/diwa-table-head.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\n  :host {\n    display: table-header-group;\n    background: var(--diwa-table-header-bg, transparent);\n    font-size: var(--diwa-font-size-sm);\n    line-height: var(--diwa-line-height-normal);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-secondary);\n    border-bottom: var(--diwa-border-width-thin, 1px) solid var(--diwa-table-border-color, var(--diwa-border)) !important;\n  }\n  ::slotted(*) {\n    --diwa-table-row-border-width: 0px;\n    --diwa-table-hover-color: transparent;\n  }\n  :host([hidden]) { display: none; }\n`;\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-table-head-styles';\r\n\r\n/** @component diwa-table-head — Maps to <thead> inside diwa-table. */\r\n@Component({ tag: 'diwa-table-head', shadow: true })\r\nexport class DiwaTableHead {\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"rowgroup\" data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"diwa-table-row.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;CAU5C;;MCJY,YAAY;IADzB;;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,IAAI,CAAC,KAAK,IACrC,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,8DAAQ,CACH,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-table-row/diwa-table-row-styles.ts","src/components/diwa-table-row/diwa-table-row.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\n  :host {\n    display: table-row;\n    border-bottom: var(--diwa-table-row-border-width, var(--diwa-border-width-thin, 1px)) solid var(--diwa-table-border-color, var(--diwa-border)) !important;\n    transition: background var(--diwa-transition-base);\n  }\n  :host([hidden]) { display: none; }\n  :host(:hover) {\n    background: var(--diwa-table-hover-color, transparent);\n  }\n`;\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-table-row-styles';\r\n\r\n/** @component diwa-table-row — Maps to <tr> inside diwa-table-head or diwa-table-body. */\r\n@Component({ tag: 'diwa-table-row', shadow: true })\r\nexport class DiwaTableRow {\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"row\" data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"diwa-table.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,CAC7B,OAAgB,EAChB,MAAwB,EACxB,QAAiB,EACjB,OAAgB,KACL;IACT,OAAO;MACL;;;;;;;GAOH;MACG;;;;;;;GAOH;;;;;;;;;;;;;;kCAc+B,QAAQ,GAAG,2EAA2E,GAAG,MAAM;iCAChG,OAAO,GAAG,sCAAsC,GAAG,aAAa;;MAE3F,QAAQ,GAAG;;;KAGZ,GAAG,EAAE;;;;;;8BAMoB,OAAO,GAAG,KAAK,GAAG,MAAM;8BACxB,OAAO,GAAG,0BAA0B,GAAG,2BAA2B;8BAClE,OAAO,GAAG,MAAM,GAAG,MAAM;8BACzB,OAAO,GAAG,2BAA2B,GAAG,2BAA2B;;;;kCAI/D,QAAQ,GAAG,2EAA2E,GAAG,MAAM;iCAChG,OAAO,GAAG,sCAAsC,GAAG,aAAa;;;;;;;;;;;MAW3F,MAAM,KAAK,OAAO;MAChB;;;KAGH;MACG,cAAc;;;;;;;;;;;;;;CAcrB;;MC1EY,SAAS;IADtB;;;QAE2B,UAAK,GAAU,MAAM,CAAC;QACvC,YAAO,GAAW,EAAE,CAAC;QACrB,YAAO,GAAY,KAAK,CAAC;QACzB,WAAM,GAAqB,MAAM,CAAC;QAClC,aAAQ,GAAY,KAAK,CAAC;QAC1B,YAAO,GAAY,KAAK,CAAC;KAuBlC;IAjBW,iBAAiB,CAAC,CAAsC;QAChE,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;KAC5B;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC;QAE7C,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EAC7F,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,gBAAa,UAAU,IACpD,8DAAQ,CACJ,CACD,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-table/diwa-table-styles.ts","src/components/diwa-table/diwa-table.tsx"],"sourcesContent":["export const getComponentCss = (\n  compact: boolean,\n  layout: 'auto' | 'fixed',\n  bordered: boolean,\n  striped: boolean,\n): string => `\n  ${compact\n    ? `\n  :host {\n    --diwa-table-padding-y: 6px;\n    --diwa-table-padding-y: var(--diwa-space-2, 6px);\n    --diwa-table-padding-x: 12px;\n    --diwa-table-padding-x: var(--diwa-space-5, 12px);\n  }\n  `\n    : `\n  :host {\n    --diwa-table-padding-y: 12px;\n    --diwa-table-padding-y: var(--diwa-space-5, 12px);\n    --diwa-table-padding-x: 16px;\n    --diwa-table-padding-x: var(--diwa-space-7, 16px);\n  }\n  `}\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    width: 100%;\n    overflow-x: auto;\n    background: var(--diwa-bg-surface);\n    border-radius: var(--diwa-radius-lg);\n    color: var(--diwa-text-primary);\n    text-align: start;\n    --diwa-table-hover-color: var(--diwa-bg-hover, transparent);\n    --diwa-table-border-color: var(--diwa-border, currentColor);\n    --diwa-table-row-border-width: var(--diwa-border-width-thin, 1px);\n    --diwa-table-column-border: ${bordered ? 'var(--diwa-border-width-thin, 1px) solid var(--diwa-border, currentColor)' : 'none'};\n    --diwa-table-stripe-color: ${striped ? 'var(--diwa-bg-elevated, transparent)' : 'transparent'};\n    --diwa-table-header-bg: transparent;\n    ${bordered ? `\n    border: var(--diwa-border-width-thin, 1px) solid var(--diwa-border, currentColor) !important;\n    overflow: hidden;\n    ` : ''}\n  }\n\n  :host([hidden]) { display: none; }\n\n  ::slotted(*) {\n    --diwa-table-padding-y: ${compact ? '6px' : '12px'} !important;\n    --diwa-table-padding-y: ${compact ? 'var(--diwa-space-2, 6px)' : 'var(--diwa-space-5, 12px)'} !important;\n    --diwa-table-padding-x: ${compact ? '12px' : '16px'} !important;\n    --diwa-table-padding-x: ${compact ? 'var(--diwa-space-5, 12px)' : 'var(--diwa-space-7, 16px)'} !important;\n    --diwa-table-hover-color: var(--diwa-bg-hover, transparent);\n    --diwa-table-border-color: var(--diwa-border, currentColor);\n    --diwa-table-row-border-width: var(--diwa-border-width-thin, 1px);\n    --diwa-table-column-border: ${bordered ? 'var(--diwa-border-width-thin, 1px) solid var(--diwa-border, currentColor)' : 'none'};\n    --diwa-table-stripe-color: ${striped ? 'var(--diwa-bg-elevated, transparent)' : 'transparent'};\n    --diwa-table-header-bg: transparent;\n  }\n\n  .table {\n    display: table;\n    border-collapse: collapse;\n    background: var(--diwa-bg-surface);\n    font-size: var(--diwa-font-size-base);\n    color: var(--diwa-text-primary);\n    white-space: nowrap;\n    ${layout === 'fixed'\n      ? `\n    table-layout: fixed;\n    min-width: 100%;\n    `\n      : 'width: 100%;'}\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { Component, Event, type EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TableUpdateEventDetail } from '../diwa-table-head-cell/types';\r\nimport { getComponentCss } from './diwa-table-styles';\r\n\r\n/**\n * @component diwa-table\n * Wrapper for a data table. Uses CSS table layout with ARIA roles.\n * Structure: diwa-table > diwa-table-head > diwa-table-row > diwa-table-head-cell\n *                       > diwa-table-body > diwa-table-row > diwa-table-cell\n */\n@Component({ tag: 'diwa-table', shadow: true })\nexport class DiwaTable {\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n  @Prop() caption: string = '';\r\n  @Prop() compact: boolean = false;\r\n  @Prop() layout: 'auto' | 'fixed' = 'auto';\r\n  @Prop() bordered: boolean = false;\r\n  @Prop() striped: boolean = false;\r\n\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<TableUpdateEventDetail>;\r\n\r\n  @Listen('diwaTableUpdate')\r\n  protected handleTableUpdate(e: CustomEvent<TableUpdateEventDetail>): void {\r\n    e.stopPropagation();\r\n    this.update.emit(e.detail);\r\n  }\r\n\r\n  render() {\n    const tableLabel = this.caption || undefined;\n\n    return (\n      <Host data-theme={this.theme}>\n        <style innerHTML={getComponentCss(this.compact, this.layout, this.bordered, this.striped)} />\n        <div class=\"table\" role=\"table\" aria-label={tableLabel}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"diwa-tabs-bar.entry.js","mappings":"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","names":[],"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/esm/diwa-tabs-item.entry.js.map

@@ -1 +0,0 @@
-{"file":"diwa-tabs-item.entry.js","mappings":";;AAAO,MAAM,eAAe,GAAG,CAAC,MAAe,KAAa;;eAE7C,MAAM,GAAG,OAAO,GAAG,MAAM;;;;;;;;CAQvC;;MCOY,YAAY;IAJzB;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAGvC,UAAK,GAAW,EAAE,CAAC;;QAGa,WAAM,GAAY,KAAK,CAAC;KAUjE;IARC,MAAM;QACJ,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":[],"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/esm/diwa-tabs.entry.js.map

@@ -1 +0,0 @@
-{"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 {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    min-height: var(--diwa-touch-target-min-size, 44px);\r\n    padding: var(--diwa-space-4) var(--diwa-space-7);\r\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) {\r\n    .tab-btn:hover {\r\n      color: var(--diwa-text-primary);\r\n    }\r\n  }\r\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: var(--diwa-space-4) var(--diwa-space-7);\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.map

@@ -1 +0,0 @@
-{"file":"diwa-tag-dismissible.entry.js","mappings":";;;AAGA,MAAM,UAAU,GAA+B;IAC7C,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,uBAAuB;IAChC,IAAI,EAAK,oCAAoC;IAC7C,OAAO,EAAE,uCAAuC;IAChD,OAAO,EAAE,uCAAuC;IAChD,KAAK,EAAI,qCAAqC;CAC/C,CAAC;AACF,MAAM,aAAa,GAA+B;IAChD,OAAO,EAAE,0BAA0B;IACnC,OAAO,EAAE,oBAAoB;IAC7B,IAAI,EAAK,+BAA+B;IACxC,OAAO,EAAE,kCAAkC;IAC3C,OAAO,EAAE,kCAAkC;IAC3C,KAAK,EAAI,gCAAgC;CAC1C,CAAC;AACF,MAAM,cAAc,GAA+B;IACjD,OAAO,EAAE,oBAAoB;IAC7B,OAAO,EAAE,oBAAoB;IAC7B,IAAI,EAAK,4BAA4B;IACrC,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAI,aAAa;CACvB,CAAC;AAEK,MAAM,eAAe,GAAG,CAAC,OAAmB,EAAE,OAAgB;IACnE,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC;IACzC,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAC1C,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC;IAC9C,MAAM,QAAQ,GAAG,OAAO,GAAG,0BAA0B,GAAG,0BAA0B,CAAC;IAEnF,OAAO;;;;;;;;;;;iBAWQ,QAAQ,IAAI,aAAa,IAAI,QAAQ,IAAI,QAAQ;;mBAE/C,QAAQ;;;eAGZ,KAAK;oBACA,EAAE;oDAC8B,MAAM;;;;;;;;;;;;;;;;;;;;;;;;MAwBpD,aAAa,CAAC,UAAU,CAAC;;MAEzB,qBAAqB,CAAC,UAAU,CAAC;GACpC,CAAC;AACJ,CAAC;;MCvEY,kBAAkB;IAJ/B;;;;QAM2B,YAAO,GAAe,SAAS,CAAC;;QAGhC,YAAO,GAAY,KAAK,CAAC;;QAG1C,UAAK,GAAY,QAAQ,CAAC;;QAGT,UAAK,GAAU,MAAM,CAAC;QAKvC,kBAAa,GAAG;YACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB,CAAC;KAkCH;IAhCC,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,IACf,8DAAQ,EACR,+DACE,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,aAAa,IAE3B,4DACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,iBACX,MAAM,IAElB,6DAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,EACtC,6DAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,CAClC,CACC,CACJ,CACF,EACP;KACH;;;;;;","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 paddingXRight = compact ? '4px' : '6px';\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} ${paddingXRight} ${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: 1;\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: 12px;\r\n      height: 12px;\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    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={12}\r\n              height={12}\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.map

@@ -1 +0,0 @@
-{"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: 1;\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.map

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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}

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

@@ -1 +0,0 @@
-{"file":"diwa-textarea.entry.js","mappings":"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","names":[],"sources":["src/components/diwa-textarea/diwa-textarea-styles.ts","src/components/diwa-textarea/diwa-textarea.tsx"],"sourcesContent":["import type { InputFieldState } from '../diwa-input/types';\r\nimport type { TextareaResize } from './types';\r\nimport { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport type { TextareaResize } from './types';\r\n\r\nexport const getComponentCss = (\r\n  state: InputFieldState,\r\n  disabled: boolean,\r\n  readOnly: boolean,\r\n  resize: TextareaResize,\r\n  compact: boolean,\r\n): string => {\r\n  const borderColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-input-border, var(--diwa-border))';\r\n\r\n  const messageColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-text-secondary)';\r\n\r\n  return `\r\n    :host {\r\n      display: block;\r\n      font-family: var(--diwa-font-family-base);\r\n      outline: none;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .root {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--diwa-space-2);\r\n    }\r\n    .label-row {\r\n      display: flex;\r\n      align-items: baseline;\r\n      gap: var(--diwa-space-1);\r\n    }\r\n    .label {\r\n      display: block;\r\n      font-size: var(--diwa-font-size-sm);\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n    }\r\n    .required {\r\n      color: var(--diwa-notification-error);\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n    }\r\n    .textarea-wrapper {\r\n      position: relative;\r\n      display: flex;\r\n      background: var(--diwa-input-bg, var(--diwa-bg-input));\r\n      border: var(--diwa-border-width-thin) solid ${borderColor};\r\n      border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\r\n      box-sizing: border-box;\r\n      transition: border-color var(--diwa-transition-base);\r\n      ${disabled ? 'opacity: 0.5; pointer-events: none;' : ''}\r\n    }\r\n    .textarea-wrapper:not(:has(textarea:disabled)):not(:has(textarea[readonly])):hover {\r\n      border-color: ${state === 'none' ? 'var(--diwa-border-hover)' : borderColor};\r\n    }\r\n    .textarea-wrapper:focus-within {\r\n      border-color: var(--diwa-border-focus);\r\n    }\r\n    ${readOnly ? `.textarea-wrapper { background: var(--diwa-bg-surface); border-style: dashed; }` : ''}\r\n    .ta {\r\n      width: 100%;\r\n      min-height: ${compact ? '64px' : '96px'};\r\n      padding: ${compact ? '6px 10px' : '10px 12px'};\r\n      background: transparent;\r\n      border: none;\r\n      outline: none;\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-base)'};\r\n      color: var(--diwa-text-primary);\r\n      resize: ${resize};\r\n      box-sizing: border-box;\r\n    }\r\n    .ta::placeholder {\r\n      color: var(--diwa-text-muted);\r\n    }\r\n    .description {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n    .message {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: ${messageColor};\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n\r\n    ${getReducedMotionStyle('.textarea-wrapper')}\r\n  `;\r\n};\r\n","import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TextareaResize } from './types';\r\nimport { getComponentCss } from './diwa-textarea-styles';\r\n\r\n/**\r\n * @slot label-after — Content placed after the label (e.g. a diwa-popover).\r\n *\r\n * @controlled {\"props\": [\"value\"], \"event\": \"input\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-textarea',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaTextarea {\r\n  /** Visible label text. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Supplementary description shown below the label. */\r\n  @Prop() description: string = '';\r\n\r\n  /** Validation state affecting border colour and message colour. */\r\n  @Prop() state: InputFieldState = 'none';\r\n\r\n  /** Feedback message shown when state is \"error\" or \"success\". */\r\n  @Prop() message: string = '';\r\n\r\n  /** The name attribute forwarded to the native textarea. */\r\n  @Prop() name: string = '';\r\n\r\n  /** Current value. Update in response to the input event. */\r\n  @Prop({ mutable: true }) value: string = '';\r\n\r\n  /** Placeholder text shown when the textarea is empty. */\r\n  @Prop() placeholder: string = '';\r\n\r\n  /** Whether the textarea is required. */\r\n  @Prop() required: boolean = false;\r\n\r\n  /** Whether the textarea is disabled. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Whether the textarea is read-only. */\r\n  @Prop({ reflect: true }) readOnly: boolean = false;\r\n\r\n  /** Maximum character length. */\r\n  @Prop() maxLength?: number;\r\n\r\n  /** Minimum character length. */\r\n  @Prop() minLength?: number;\r\n\r\n  /** Number of visible text rows. */\r\n  @Prop() rows: number = 4;\r\n\r\n  /** Controls which dimensions can be resized by the user. */\r\n  @Prop() resize: TextareaResize = 'vertical';\r\n\r\n  /** Renders a compact version with reduced padding and font size. */\r\n  @Prop() compact: boolean = false;\r\n\r\n  /** Hides the label visually (label is still in the DOM for screen readers). */\r\n  @Prop() hideLabel: boolean = false;\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 on every keystroke. Detail contains the current value string. */\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n\r\n  /** Emitted when the textarea loses focus after value changes. */\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n\r\n  /** Emitted when the textarea loses focus. */\r\n  @Event({ bubbles: false, composed: false }) blur!: EventEmitter<FocusEvent>;\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLTextAreaElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLTextAreaElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => {\r\n    this.blur.emit(e);\r\n  };\r\n\r\n  render() {\r\n    const taId = 'textarea';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readOnly, this.resize, this.compact)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={taId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"textarea-wrapper\">\r\n            <textarea\r\n              class=\"ta\"\r\n              id={taId}\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readOnly}\r\n              rows={this.rows}\r\n              maxLength={this.maxLength}\r\n              minLength={this.minLength}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n            />\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-toast-item.entry.js.map

@@ -1 +0,0 @@
-{"file":"diwa-toast-item.entry.js","mappings":";;;AAGO,MAAM,eAAe,GAAG,CAAC,KAAiB;IAC/C,MAAM,UAAU,GACd,KAAK,KAAK,SAAS;UACf,kCAAkC;UAClC,KAAK,KAAK,OAAO;cACf,gCAAgC;cAChC,KAAK,KAAK,SAAS;kBACjB,kCAAkC;kBAClC,KAAK,KAAK,MAAM;sBACd,+BAA+B;sBAC/B,4BAA4B,CAAC;IAEzC,MAAM,OAAO,GACX,KAAK,KAAK,SAAS;UACf,uCAAuC;UACvC,KAAK,KAAK,OAAO;cACf,qCAAqC;cACrC,KAAK,KAAK,SAAS;kBACjB,uCAAuC;kBACvC,KAAK,KAAK,MAAM;sBACd,oCAAoC;sBACpC,yBAAyB,CAAC;IAEtC,OAAO;;;;;;;;;;;;;;;;;;;kBAmBS,OAAO;kDACyB,UAAU;;;;;;;;;;;;;;aAc/C,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BnB,oBAAoB,CAAC,QAAQ,EAAE,kCAAkC,CAAC;;IAElE,aAAa,CAAC,QAAQ,CAAC;;IAEvB,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC;GAC1C,CAAC;AACJ,CAAC;;ACvFD,MAAM,WAAW,GAA+B;IAC9C,OAAO,EAAE,2QAA2Q;IACpR,IAAI,EAAE,2QAA2Q;IACjR,OAAO,EAAE,6NAA6N;IACtO,OAAO,EAAE,iRAAiR;IAC1R,KAAK,EAAE,6PAA6P;CACrQ,CAAC;AAEF,MAAM,UAAU,GAAG,8MAA8M,CAAC;MAYrN,aAAa;IAJ1B;;;;QAM2B,UAAK,GAAU,MAAM,CAAC;;QAGvC,SAAI,GAAW,EAAE,CAAC;;QAGD,UAAK,GAAe,SAAS,CAAC;QAQ/C,gBAAW,GAAG;YACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB,CAAC;KAoBH;IAlBC,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,EACjD,4DAAK,KAAK,EAAC,OAAO,IAChB,6DAAM,KAAK,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,EAC5E,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,EACrC,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,gBACF,sBAAsB,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,UAAU,GACrB,CACE,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/diwa-toast-item/diwa-toast-item-styles.ts","src/components/diwa-toast-item/diwa-toast-item.tsx"],"sourcesContent":["import type { ToastState } from './types';\r\nimport { getFocusStyle, getHoverCapableStyle, getReducedMotionStyle } from '../../utils/styles';\n\r\nexport const getComponentCss = (state: ToastState): string => {\r\n  const stateColor =\r\n    state === 'success'\r\n      ? 'var(--diwa-notification-success)'\r\n      : state === 'error'\r\n        ? 'var(--diwa-notification-error)'\r\n        : state === 'warning'\r\n          ? 'var(--diwa-notification-warning)'\r\n          : state === 'info'\r\n            ? 'var(--diwa-notification-info)'\r\n            : 'var(--diwa-text-secondary)';\r\n\r\n  const stateBg =\r\n    state === 'success'\r\n      ? 'var(--diwa-notification-success-soft)'\r\n      : state === 'error'\r\n        ? 'var(--diwa-notification-error-soft)'\r\n        : state === 'warning'\r\n          ? 'var(--diwa-notification-warning-soft)'\r\n          : state === 'info'\r\n            ? 'var(--diwa-notification-info-soft)'\r\n            : 'var(--diwa-bg-elevated)';\r\n\r\n  return `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    pointer-events: all;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .toast {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    min-width: var(--diwa-toast-min-width);\r\n    max-width: var(--diwa-toast-max-width);\r\n    padding: var(--diwa-space-4);\r\n    border-radius: var(--diwa-radius-md);\r\n    background: ${stateBg};\r\n    border: var(--diwa-border-width-thin) solid ${stateColor};\r\n    box-shadow: var(--diwa-shadow-md);\r\n    animation: slideIn var(--diwa-motion-duration-short) var(--diwa-motion-easing-out);\r\n  }\r\n\r\n  @keyframes slideIn {\r\n    from { opacity: 0; transform: translateY(8px); }\r\n    to   { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  .icon {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    color: ${stateColor};\r\n  }\r\n\r\n  .text {\r\n    flex: 1;\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: var(--diwa-text-primary);\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .close {\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--diwa-touch-target-min-size, 44px);\n    height: var(--diwa-touch-target-min-size, 44px);\n    border: none;\r\n    background: transparent;\r\n    color: var(--diwa-text-secondary);\r\n    cursor: pointer;\r\n    border-radius: var(--diwa-radius-sm);\r\n    padding: 0;\r\n    transition: color var(--diwa-transition-base);\n  }\n\n  ${getHoverCapableStyle('.close', 'color: var(--diwa-text-primary);')}\n\r\n  ${getFocusStyle('.close')}\r\n\r\n  ${getReducedMotionStyle('.toast', '.close')}\n  `;\n};\n","import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { ToastState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-toast-item-styles';\r\n\r\nconst STATE_ICONS: Record<ToastState, string> = {\r\n  neutral: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><line x1=\"8\" y1=\"5\" x2=\"8\" y2=\"8.5\"/><circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/></svg>`,\r\n  info: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><line x1=\"8\" y1=\"5\" x2=\"8\" y2=\"8.5\"/><circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/></svg>`,\r\n  success: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><polyline points=\"5,8 7,10 11,6\"/></svg>`,\r\n  warning: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M8 2.5L14 13H2L8 2.5Z\"/><line x1=\"8\" y1=\"6.5\" x2=\"8\" y2=\"9.5\"/><circle cx=\"8\" cy=\"11.5\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/></svg>`,\r\n  error: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><line x1=\"5.5\" y1=\"5.5\" x2=\"10.5\" y2=\"10.5\"/><line x1=\"10.5\" y1=\"5.5\" x2=\"5.5\" y2=\"10.5\"/></svg>`,\r\n};\r\n\r\nconst CLOSE_ICON = `<svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\"/><line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\"/></svg>`;\r\n\r\n/**\r\n * @component diwa-toast-item\r\n *\r\n * Renders a single toast notification. Managed by `diwa-toast` — do not\r\n * use this component directly; use `diwa-toast.addMessage()` instead.\r\n */\r\n@Component({\r\n  tag: 'diwa-toast-item',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaToastItem {\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Message text to display. */\r\n  @Prop() text: string = '';\r\n\r\n  /** Visual state affecting icon and colour. */\r\n  @Prop({ reflect: true }) state: ToastState = 'neutral';\r\n\r\n  /**\r\n   * Emitted when the user dismisses the toast or the auto-dismiss timer fires.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  private handleClose = () => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state)} />\r\n        <div class=\"toast\">\r\n          <span class=\"icon\" aria-hidden=\"true\" innerHTML={STATE_ICONS[this.state]} />\r\n          <span class=\"text\">{this.text}</span>\r\n          <button\r\n            type=\"button\"\r\n            class=\"close\"\r\n            aria-label=\"Dismiss notification\"\r\n            onClick={this.handleClose}\r\n            innerHTML={CLOSE_ICON}\r\n          />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"diwa-toast.entry.js","mappings":"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","names":[],"sources":["src/components/diwa-toast/diwa-toast-styles.ts","src/components/diwa-toast/diwa-toast-manager.ts","src/components/diwa-toast/diwa-toast.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\r\n  :host {\n    position: fixed;\n    bottom: var(--diwa-space-6);\n    right: var(--diwa-space-6);\n    z-index: var(--diwa-z-toast);\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: var(--diwa-space-3);\n    pointer-events: none;\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  ::slotted(*) {\n    pointer-events: all;\n  }\n\n  @media (max-width: 480px) {\n    :host {\n      left: var(--diwa-space-3);\n      right: var(--diwa-space-3);\n      bottom: var(--diwa-space-3);\n      align-items: stretch;\n    }\n  }\n`;\n","import type { ToastMessage } from './types';\r\n\r\nconst DEFAULT_TIMEOUT = 6000;\r\n/** Duration to wait after dismiss before showing the next queued message (matches slideIn animation). */\r\nconst DISMISS_DELAY = 200;\r\n\r\nexport type ToastEntry = ToastMessage & { id: number };\r\ntype RefreshFn = (entry: ToastEntry | null) => void;\r\n\r\n/**\r\n * ToastManagerClass — singleton service that owns the toast queue.\r\n *\r\n * Only one `<diwa-toast>` element may be registered at a time.\r\n * The component registers a `refreshFn` callback on `connectedCallback`\r\n * and unregisters on `disconnectedCallback`.\r\n *\r\n * Consumers call `element.addMessage()` (which delegates here) OR import\r\n * `toastManager` directly and call `toastManager.addMessage()`.\r\n */\r\nexport class ToastManagerClass {\r\n  private queue: ToastEntry[] = [];\r\n  private current: ToastEntry | null = null;\r\n  private toastEl: HTMLElement | null = null;\r\n  private refreshFn: RefreshFn | null = null;\r\n  private timeout: ReturnType<typeof setTimeout> | null = null;\r\n  private nextId = 0;\r\n\r\n  // ── Registration ──────────────────────────────────────────────────────────\r\n\r\n  register(host: HTMLElement, refreshFn: RefreshFn): void {\r\n    if (this.toastEl) {\r\n      console.error('[diwa-toast] Only one <diwa-toast> may exist per page. Multiple instances detected.');\r\n      return;\r\n    }\r\n    this.toastEl = host;\r\n    this.refreshFn = refreshFn;\r\n  }\r\n\r\n  unregister(): void {\r\n    this.clearTimeout();\r\n    this.queue = [];\r\n    this.current = null;\r\n    this.toastEl = null;\r\n    this.refreshFn = null;\r\n  }\r\n\r\n  // ── Public API ────────────────────────────────────────────────────────────\r\n\r\n  addMessage(message: ToastMessage): void {\r\n    if (!this.toastEl) {\r\n      console.warn('[diwa-toast] addMessage() called but no <diwa-toast> element is mounted in the page.');\r\n      return;\r\n    }\r\n    if (!message.text?.trim()) {\r\n      console.warn('[diwa-toast] addMessage() called with empty text.');\r\n      return;\r\n    }\r\n\r\n    const entry: ToastEntry = {\r\n      state: 'neutral',\r\n      ...message,\r\n      id: this.nextId++,\r\n    };\r\n\r\n    if (this.current === null) {\r\n      this.show(entry);\r\n    } else {\r\n      this.queue.push(entry);\r\n    }\r\n  }\r\n\r\n  dismiss(): void {\r\n    this.clearTimeout();\r\n    this.current = null;\r\n    this.refreshFn?.(null);\r\n\r\n    // Wait for the dismiss animation, then show next queued item\r\n    setTimeout(() => {\r\n      const next = this.queue.shift();\r\n      if (next) {\r\n        this.show(next);\r\n      }\r\n    }, DISMISS_DELAY);\r\n  }\r\n\r\n  getCurrent(): ToastEntry | null {\r\n    return this.current;\r\n  }\r\n\r\n  // ── Private helpers ───────────────────────────────────────────────────────\r\n\r\n  private show(entry: ToastEntry): void {\r\n    this.current = entry;\r\n    this.refreshFn?.(entry);\r\n    this.scheduleTimeout(entry);\r\n  }\r\n\r\n  private scheduleTimeout(entry: ToastEntry): void {\r\n    const duration = entry.duration ?? DEFAULT_TIMEOUT;\r\n    if (duration > 0) {\r\n      this.timeout = setTimeout(() => this.dismiss(), duration);\r\n    }\r\n  }\r\n\r\n  private clearTimeout(): void {\r\n    if (this.timeout !== null) {\r\n      clearTimeout(this.timeout);\r\n      this.timeout = null;\r\n    }\r\n  }\r\n}\r\n\r\nexport const toastManager = new ToastManagerClass();\r\n","import { Component, Element, Host, Method, Prop, State, h } from '@stencil/core';\r\nimport type { ToastMessage } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-toast-styles';\r\nimport { toastManager } from './diwa-toast-manager';\r\nimport type { ToastEntry } from './diwa-toast-manager';\r\n\r\n/**\r\n * @component diwa-toast\r\n *\r\n * Singleton container that queues and displays toast notifications one at a\r\n * time. Call `addMessage()` to enqueue a toast — only one toast is visible at\r\n * a given moment; additional messages are shown in FIFO order as each one is\r\n * dismissed or times out.\r\n *\r\n * Only one `<diwa-toast>` element should exist per page.\r\n *\r\n * Usage:\r\n *   const toast = document.querySelector('diwa-toast');\r\n *   toast.addMessage({ text: 'Saved!', state: 'success' });\r\n */\r\n@Component({\r\n  tag: 'diwa-toast',\r\n  shadow: true,\r\n})\r\nexport class DiwaToast {\r\n  @Element() host!: HTMLDiwaToastElement;\r\n\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  @State() private currentMsg: ToastEntry | null = null;\r\n\r\n  connectedCallback(): void {\r\n    toastManager.register(this.host, (msg) => {\r\n      this.currentMsg = msg;\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    toastManager.unregister();\r\n  }\r\n\r\n  /**\r\n   * Enqueues a toast message. If no toast is currently visible it is shown\r\n   * immediately; otherwise it is placed in the FIFO queue and shown after all\r\n   * preceding messages have been dismissed.\r\n   */\r\n  @Method()\r\n  async addMessage(message: ToastMessage): Promise<void> {\r\n    toastManager.addMessage(message);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"status\" aria-live=\"polite\" aria-atomic=\"false\" data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        {this.currentMsg && (\r\n          <diwa-toast-item\r\n            key={this.currentMsg.id}\r\n            text={this.currentMsg.text}\r\n            state={this.currentMsg.state ?? 'neutral'}\r\n            theme={this.theme}\r\n            onDismiss={() => toastManager.dismiss()}\r\n          />\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}