npm - @diwacopilot/components - Versions diffs - 1.2.0 → 1.2.2 - Mend

@diwacopilot/components 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (944) hide show

package/dist/cjs/diwa-table-cell.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-table-cell.entry.cjs.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,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,MAAM,IACfD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,GAAI,EACrDA,oEAAQ,CACH,EACP;KACH;;;;;","names":["h","Host"],"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/cjs/diwa-table-head-cell.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-table-head-cell.entry.cjs.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,GAAGA,mEAAM,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,IAAEA,oEAAQ,CAAO,CAAC;QAEhF,MAAM,QAAQ,IACZA,kEACE,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,IAEDA,mEACE,CAAC,EAAC,iBAAiB,EACnB,MAAM,EAAC,cAAc,kBACR,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CAAC;QAEF,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,cAAc,eAAY,QAAQ,IAC3CD,oEAAO,SAAS,EAAE,eAAe,CAAC,UAAU,EAAE,SAAS,CAAC,GAAI,EAC3D,UAAU,IACTA,oBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7DA,kBAAM,KAAK,EAAC,YAAY,IAAE,OAAO,CAAQ,EACxC,QAAQ,CACF,KAET,OAAO,CACR,CACI,EACP;KACH;;;;;;","names":["h","Host"],"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/cjs/diwa-table-head.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-table-head.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;CAe5C;;MCTY,aAAa;IAD1B;;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,gBAAa,IAAI,CAAC,KAAK,IAC1CD,oEAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvCA,oEAAQ,CACH,EACP;KACH;;;;;","names":["h","Host"],"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/cjs/diwa-table-row.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-table-row.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;CAU5C;;MCJY,YAAY;IADzB;;QAE2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,IAAI,CAAC,KAAK,IACrCD,oEAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvCA,oEAAQ,CACH,EACP;KACH;;;;;","names":["h","Host"],"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/cjs/diwa-table.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-table.entry.cjs.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,QACEA,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EAC7FA,kEAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,gBAAa,UAAU,IACpDA,oEAAQ,CACJ,CACD,EACP;KACH;;;;;","names":["h","Host"],"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/cjs/diwa-tabs-bar.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-tabs-bar.entry.cjs.js","mappings":"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","names":["getReducedMotionStyle","h","Host"],"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/cjs/diwa-tabs-item.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-tabs-item.entry.cjs.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,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,iBAAc,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,gBAAc,IAAI,CAAC,KAAK,IACvFD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,GAAI,EAClDA,oEAAQ,CACH,EACP;KACH;;;;;;","names":["h","Host"],"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/cjs/diwa-tabs.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-tabs.entry.cjs.js","mappings":";;;;;;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqDzCA,oBAAa,CAAC,UAAU,CAAC;;;;;;IAMzBC,4BAAqB,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,QACEC,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvCA,kEAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,IAC5B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACjBA,oBACE,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,EACNA,kEAAK,KAAK,EAAC,QAAQ,IACjBA,oEAAQ,CACJ,CACD,EACP;KACH;;;;;;;;;","names":["getFocusStyle","getReducedMotionStyle","h","Host"],"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/cjs/diwa-tag-dismissible.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-tag-dismissible.entry.cjs.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;;;;;;;;;;;;;;;;;;;;;;;;MAwBpDA,oBAAa,CAAC,UAAU,CAAC;;MAEzBC,4BAAqB,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,QACEC,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EACjEA,mEAAM,KAAK,EAAC,KAAK,IACfA,oEAAQ,EACRA,qEACE,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,aAAa,IAE3BA,kEACE,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,IAElBA,mEAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,EACtCA,mEAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,CAClC,CACC,CACJ,CACF,EACP;KACH;;;;;;","names":["getFocusStyle","getReducedMotionStyle","h","Host"],"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/cjs/diwa-tag.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-tag.entry.cjs.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,QACEA,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EACjEA,mEAAM,KAAK,EAAC,KAAK,IACd,IAAI,CAAC,IAAI,KACRA,mEAAM,KAAK,EAAC,MAAM,IAChBA,wEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,GAAI,CACvD,CACR,EACDA,oEAAQ,CACH,CACF,EACP;KACH;;;;;","names":["h","Host"],"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/cjs/diwa-text-list-item.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-text-list-item.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,UAAU,GAAG,MAAc;;;;;;;;;;;;CAYvC;;MCSY,gBAAgB;IAJ7B;;;QAM2B,UAAK,GAAU,MAAM,CAAC;KAUhD;IARC,MAAM;QACJ,QACEA,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,UAAU,EAAE,GAAI,EAClCA,oEAAQ,CACH,EACP;KACH;;;;;","names":["h","Host"],"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/cjs/diwa-text-list.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-text-list.entry.cjs.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,QACEA,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,EAChDA,QAAC,GAAG,qDAAC,KAAK,EAAC,MAAM,IACfA,oEAAQ,CACJ,CACD,EACP;KACH;;;;;","names":["h","Host"],"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/cjs/diwa-text.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-text.entry.cjs.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,QACEA,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,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,EACpGA,QAAC,GAAG,qDAAC,KAAK,EAAC,MAAM,IACfA,oEAAQ,CACJ,CACD,EACP;KACH;;;;;","names":["h","Host"],"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/cjs/diwa-textarea.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-textarea.entry.cjs.js","mappings":"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","names":["getReducedMotionStyle","h","Host"],"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/cjs/diwa-toast-item.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-toast-item.entry.cjs.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;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BnBA,2BAAoB,CAAC,QAAQ,EAAE,kCAAkC,CAAC;;IAElEC,oBAAa,CAAC,QAAQ,CAAC;;IAEvBC,4BAAqB,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,QACEC,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,EACjDA,kEAAK,KAAK,EAAC,OAAO,IAChBA,mEAAM,KAAK,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,EAC5EA,mEAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,EACrCA,qEACE,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":["getHoverCapableStyle","getFocusStyle","getReducedMotionStyle","h","Host"],"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/cjs/diwa-toast.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-toast.entry.cjs.js","mappings":"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","names":["h","Host"],"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}