@diwacopilot/components 1.0.0

package/dist/diwa-components/p-2b72a324.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as a}from"./p-ed4017f0.js";const r=()=>`\n  :host { display: table-row-group; }\n  :host([hidden]) { display: none; }\n  ::slotted(:nth-child(even)) {\n    background: var(--diwa-table-stripe-color, transparent);\n  }\n`;const d=class{constructor(t){e(this,t);this.theme="dark"}render(){return t(a,{key:"a024d6ad7c17f14455ab25b23b700c2f63098d14",role:"rowgroup","data-theme":this.theme},t("style",{key:"33868e52817f6d9e238d86074e27876a619f8e6f",innerHTML:r()}),t("slot",{key:"d5306abf932c93ef0d8c760d4f546a4175f8472c"}))}};export{d as diwa_table_body};
+//# sourceMappingURL=p-2b72a324.entry.js.map

package/dist/diwa-components/p-2b72a324.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getComponentCss","DiwaTableBody","constructor","hostRef","this","theme","render","h","Host","key","role","innerHTML"],"sources":["src/components/diwa-table-body/diwa-table-body-styles.ts","src/components/diwa-table-body/diwa-table-body.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\r\n  :host { display: table-row-group; }\r\n  :host([hidden]) { display: none; }\r\n  ::slotted(:nth-child(even)) {\r\n    background: var(--diwa-table-stripe-color, transparent);\r\n  }\r\n`;\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-table-body-styles';\r\n\r\n/** @component diwa-table-body — Maps to <tbody> inside diwa-table. */\r\n@Component({ tag: 'diwa-table-body', shadow: true })\r\nexport class DiwaTableBody {\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"],"mappings":"kDAAO,MAAMA,EAAkB,IAAc,sL,MCMhCC,EAAa,MAD1B,WAAAC,CAAAC,G,UAE2BC,KAAAC,MAAe,M,CAExC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,WAAU,aAAaN,KAAKC,OACrCE,EAAA,SAAAE,IAAA,2CAAOE,UAAWX,MAClBO,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/diwa-components/p-332838f8.js

@@ -0,0 +1,2 @@
+const r=`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6 L5 9 L10 3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")`;const o=()=>`border-radius: 3px;\n    border: 1.5px solid var(--diwa-border);\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: 100%;\n    box-sizing: border-box;\n    transition: border-color var(--diwa-transition-fast),\n                background-color var(--diwa-transition-fast);`;export{r as c,o as g};
+//# sourceMappingURL=p-332838f8.js.map

package/dist/diwa-components/p-332838f8.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["checkmarkSvg","getCheckboxBoxCss"],"sources":["src/utils/checkbox-mark.ts"],"sourcesContent":["/**\r\n * Shared checkbox appearance helpers.\r\n * Used by diwa-checkbox and diwa-multi-select-option so both components\r\n * always render an identical checkbox box — single source of truth.\r\n */\r\n\r\n/** White checkmark: M2,6 L5,9 L10,3 on a 12×12 viewBox */\r\nexport const checkmarkSvg = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6 L5 9 L10 3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E\")`;\r\n\r\n/**\r\n * Returns the CSS visual declarations for the checkbox box element.\r\n * Does NOT include a selector or braces — inject inside a rule body.\r\n * Does NOT include `width`, `height`, `flex-shrink`, or `margin-top`\r\n * — callers set those because they differ between components.\r\n */\r\nexport const getCheckboxBoxCss = (): string =>\r\n  `border-radius: 3px;\r\n    border: 1.5px solid var(--diwa-border);\r\n    background-color: transparent;\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    background-size: 100%;\r\n    box-sizing: border-box;\r\n    transition: border-color var(--diwa-transition-fast),\r\n                background-color var(--diwa-transition-fast);`;\r\n"],"mappings":"MAOaA,EAAe,mO,MAQfC,EAAoB,IAC/B,sW","ignoreList":[]}

package/dist/diwa-components/p-339f6ba7.entry.js

@@ -0,0 +1,2 @@
+import{r as n,c as i,h as e,H as r}from"./p-ed4017f0.js";import{b as t,g as a,a as o}from"./p-70bbb21a.js";const s=n=>{const i=n==="success"?"var(--diwa-notification-success)":n==="error"?"var(--diwa-notification-error)":n==="warning"?"var(--diwa-notification-warning)":n==="info"?"var(--diwa-notification-info)":"var(--diwa-text-secondary)";const e=n==="success"?"var(--diwa-notification-success-soft)":n==="error"?"var(--diwa-notification-error-soft)":n==="warning"?"var(--diwa-notification-warning-soft)":n==="info"?"var(--diwa-notification-info-soft)":"var(--diwa-bg-elevated)";return`\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    pointer-events: all;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .toast {\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-3);\n    min-width: var(--diwa-toast-min-width);\n    max-width: var(--diwa-toast-max-width);\n    padding: var(--diwa-space-4);\n    border-radius: var(--diwa-radius-md);\n    background: ${e};\n    border: var(--diwa-border-width-thin) solid ${i};\n    box-shadow: var(--diwa-shadow-md);\n    animation: slideIn var(--diwa-motion-duration-short) var(--diwa-motion-easing-out);\n  }\n\n  @keyframes slideIn {\n    from { opacity: 0; transform: translateY(8px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n\n  .icon {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    color: ${i};\n  }\n\n  .text {\n    flex: 1;\n    font-size: var(--diwa-font-size-sm);\n    color: var(--diwa-text-primary);\n    line-height: 1.5;\n  }\n\n  .close {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--diwa-touch-target-min-size, 44px);\n    height: var(--diwa-touch-target-min-size, 44px);\n    border: none;\n    background: transparent;\n    color: var(--diwa-text-secondary);\n    cursor: pointer;\n    border-radius: var(--diwa-radius-sm);\n    padding: 0;\n    transition: color var(--diwa-transition-base);\n  }\n\n  ${t(".close","color: var(--diwa-text-primary);")}\n\n  ${a(".close")}\n\n  ${o(".toast",".close")}\n  `};const c={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>`,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>`,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>`,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>`,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>`};const d=`<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>`;const l=class{constructor(e){n(this,e);this.dismiss=i(this,"dismiss",1);this.theme="dark";this.text="";this.state="neutral";this.handleClose=()=>{this.dismiss.emit()}}render(){return e(r,{key:"5ca70d89e0dcf38887c4911ba4a7d4c4687f6e9a","data-theme":this.theme},e("style",{key:"b77d3924036bea1e8613e429ef9095092b8aede4",innerHTML:s(this.state)}),e("div",{key:"6ce3268afcb611334446b86b1a1d24aaba56d97f",class:"toast"},e("span",{key:"b52ea94a3bce267374add9e7672d475e5011cdcf",class:"icon","aria-hidden":"true",innerHTML:c[this.state]}),e("span",{key:"6d6c2bfe94a296d8e9cef85a52dd2fe875dc6e82",class:"text"},this.text),e("button",{key:"9666a6fc76813134644e8fdd3a0cfbb273025eb8",type:"button",class:"close","aria-label":"Dismiss notification",onClick:this.handleClose,innerHTML:d})))}static get delegatesFocus(){return true}};export{l as diwa_toast_item};
+//# sourceMappingURL=p-339f6ba7.entry.js.map

package/dist/diwa-components/p-339f6ba7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getComponentCss","state","stateColor","stateBg","getHoverCapableStyle","getFocusStyle","getReducedMotionStyle","STATE_ICONS","neutral","info","success","warning","error","CLOSE_ICON","DiwaToastItem","constructor","hostRef","this","theme","text","handleClose","dismiss","emit","render","h","Host","key","innerHTML","class","type","onClick"],"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"],"mappings":"2GAGO,MAAMA,EAAmBC,IAC9B,MAAMC,EACJD,IAAU,UACN,mCACAA,IAAU,QACR,iCACAA,IAAU,UACR,mCACAA,IAAU,OACR,gCACA,6BAEZ,MAAME,EACJF,IAAU,UACN,wCACAA,IAAU,QACR,sCACAA,IAAU,UACR,wCACAA,IAAU,OACR,qCACA,0BAEZ,MAAO,ubAmBSE,uDACgCD,iXAcrCA,qlBA0BTE,EAAqB,SAAU,4CAE/BC,EAAc,kBAEdC,EAAsB,SAAU,eACjC,ECtFH,MAAMC,EAA0C,CAC9CC,QAAS,4QACTC,KAAM,4QACNC,QAAS,8NACTC,QAAS,kRACTC,MAAO,+PAGT,MAAMC,EAAa,+M,MAYNC,EAAa,MAJ1B,WAAAC,CAAAC,G,2CAM2BC,KAAAC,MAAe,OAGhCD,KAAAE,KAAe,GAGEF,KAAAhB,MAAoB,UAQrCgB,KAAAG,YAAc,KACpBH,KAAKI,QAAQC,MAAM,C,CAGrB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,wDAAaT,KAAKC,OACrBM,EAAA,SAAAE,IAAA,2CAAOC,UAAW3B,EAAgBiB,KAAKhB,SACvCuB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,SACTJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,OAAM,cAAa,OAAOD,UAAWpB,EAAYU,KAAKhB,SAClEuB,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQX,KAAKE,MACzBK,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLD,MAAM,QAAO,aACF,uBACXE,QAASb,KAAKG,YACdO,UAAWd,K","ignoreList":[]}

package/dist/diwa-components/p-358e1177.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as i,h as t,H as n}from"./p-ed4017f0.js";import{g as e,a as r}from"./p-70bbb21a.js";const s=(a,i,t,n,s)=>{const d="calc((var(--diwa-switch-track-height) - var(--diwa-switch-thumb-size)) / 2 - var(--diwa-border-width-base))";const o=a?"var(--diwa-accent)":"var(--diwa-bg-elevated)";const c=a?"var(--diwa-accent)":"var(--diwa-border)";const h=a?`translateX(calc(var(--diwa-switch-track-width) - (2 * var(--diwa-border-width-base)) - var(--diwa-switch-thumb-size) - ${d}))`:`translateX(${d})`;const w=i||t?"opacity: 0.5; pointer-events: none;":"";const f=n==="start"?"row-reverse":"row";return`\n    :host {\n      display: inline-flex;\n      font-family: var(--diwa-font-family-base);\n      outline: none;\n      ${s?`\n      --diwa-switch-track-width:  32px;\n      --diwa-switch-track-height: 18px;\n      --diwa-switch-thumb-size:   12px;\n      `:""}\n    }\n    :host([hidden]) {\n      display: none;\n    }\n    .wrapper {\n      display: inline-flex;\n      flex-direction: ${f};\n      align-items: center;\n      gap: var(--diwa-space-3);\n      min-height: ${s?"var(--diwa-touch-target-min-size-compact, 32px)":"var(--diwa-touch-target-min-size, 44px)"};\n      cursor: ${i||t?"not-allowed":"pointer"};\n      ${w}\n    }\n    .track {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: flex-start;\n      width: var(--diwa-switch-track-width);\n      height: var(--diwa-switch-track-height);\n      background: ${o};\n      border: var(--diwa-border-width-base) solid ${c};\n      border-radius: var(--diwa-radius-xl);\n      box-sizing: border-box;\n      flex-shrink: 0;\n      transition: background var(--diwa-transition-base), border-color var(--diwa-transition-base), box-shadow var(--diwa-transition-fast);\n    }\n    @media (hover: hover) and (pointer: fine) {\n      .wrapper:hover .track {\n        border-color: ${a?"var(--diwa-accent-hover)":"var(--diwa-text-secondary)"};\n        background: ${a?"var(--diwa-accent-hover)":"var(--diwa-bg-hover)"};\n      }\n    }\n    ${e(".track")}\n    .thumb {\n      position: absolute;\n      top: ${d};\n      left: 0;\n      width: var(--diwa-switch-thumb-size);\n      height: var(--diwa-switch-thumb-size);\n      background: var(--diwa-bg-surface);\n      border-radius: 50%;\n      transform: ${h};\n      box-shadow: var(--diwa-shadow-sm);\n      transition: transform var(--diwa-transition-base), background var(--diwa-transition-base), box-shadow var(--diwa-transition-fast);\n      pointer-events: none;\n    }\n    .loading-indicator {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n    .label {\n      font-family: var(--diwa-font-family-base);\n      font-size: var(--diwa-font-size-base);\n      font-weight: var(--diwa-font-weight-medium);\n      line-height: var(--diwa-line-height-normal);\n      color: var(--diwa-text-primary);\n      user-select: none;\n    }\n\n    ${r(".track",".thumb")}\n  `};const d=class{constructor(t){a(this,t);this.update=i(this,"update",1);this.checked=false;this.disabled=false;this.loading=false;this.alignLabel="end";this.compact=false;this.theme="dark";this.handleClick=()=>{if(this.disabled||this.loading)return;this.update.emit({checked:!this.checked})};this.handleKeyDown=a=>{if(a.key===" "||a.key==="Enter"){a.preventDefault();this.handleClick()}}}render(){return t(n,{key:"d91f87b0a1cd45f78de0dec583a052d9f93b2aac","data-theme":this.theme},t("style",{key:"5aa877ca115f4d29fccaac75187d7c7f2faa66d0",innerHTML:s(this.checked,this.disabled,this.loading,this.alignLabel,this.compact)}),t("span",{key:"7d4a5a790a354f725d116fa97e995c9de9892164",class:"wrapper",onClick:this.handleClick},t("span",{key:"be6c39efaf203cd93c2490e12a77f4f42f3b41a0",class:"track",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.disabled||this.loading?"true":undefined,tabIndex:this.disabled||this.loading?-1:0,onKeyDown:this.handleKeyDown},!this.loading&&t("span",{key:"93864d7af34c4ff03563b02d869c0e8cc3fd3d27",class:"thumb"}),this.loading&&t("span",{key:"97e033c8c8eb3ba7d31256fb4adea4a145b8f3ff",class:"loading-indicator","aria-hidden":"true"},t("diwa-spinner",{key:"90ee1fdaf77186f249bc4d5afc54e49dbbfc491f",size:"sm"}))),t("span",{key:"17b3ded00758d0a11649d811f2ab78c90302326d",class:"label"},t("slot",{key:"a7793c1eafea2282b0ca212ee05a072723b5f9e6"}))))}static get delegatesFocus(){return true}};export{d as diwa_switch};
+//# sourceMappingURL=p-358e1177.entry.js.map

package/dist/diwa-components/p-358e1177.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getComponentCss","checked","disabled","loading","alignLabel","compact","thumbInset","trackBg","trackBorder","thumbTranslate","opacityRules","flexDir","getFocusStyle","getReducedMotionStyle","DiwaSwitch","constructor","hostRef","this","theme","handleClick","update","emit","handleKeyDown","e","key","preventDefault","render","h","Host","innerHTML","class","onClick","role","String","undefined","tabIndex","onKeyDown","size"],"sources":["src/components/diwa-switch/diwa-switch-styles.ts","src/components/diwa-switch/diwa-switch.tsx"],"sourcesContent":["import type { SwitchAlignLabel } from './types';\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\n\r\nexport const getComponentCss = (\r\n  checked: boolean,\r\n  disabled: boolean,\r\n  loading: boolean,\r\n  alignLabel: SwitchAlignLabel,\r\n  compact: boolean,\r\n): string => {\r\n  // Subtract border-width from inset: `top` on an absolutely-positioned child\r\n  // is measured from the *padding edge* (inside the border), so we must remove\r\n  // the border thickness to land exactly at the visual centre of the track.\r\n  const thumbInset = 'calc((var(--diwa-switch-track-height) - var(--diwa-switch-thumb-size)) / 2 - var(--diwa-border-width-base))';\r\n  const trackBg = checked\r\n    ? 'var(--diwa-accent)'\r\n    : 'var(--diwa-bg-elevated)';\r\n  const trackBorder = checked ? 'var(--diwa-accent)' : 'var(--diwa-border)';\r\n  const thumbTranslate = checked\r\n    ? `translateX(calc(var(--diwa-switch-track-width) - (2 * var(--diwa-border-width-base)) - var(--diwa-switch-thumb-size) - ${thumbInset}))`\r\n    : `translateX(${thumbInset})`;\r\n  const opacityRules = disabled || loading ? 'opacity: 0.5; pointer-events: none;' : '';\r\n  const flexDir = alignLabel === 'start' ? 'row-reverse' : 'row';\r\n\r\n  return `\r\n    :host {\r\n      display: inline-flex;\r\n      font-family: var(--diwa-font-family-base);\r\n      outline: none;\r\n      ${compact ? `\r\n      --diwa-switch-track-width:  32px;\r\n      --diwa-switch-track-height: 18px;\r\n      --diwa-switch-thumb-size:   12px;\r\n      ` : ''}\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .wrapper {\n      display: inline-flex;\n      flex-direction: ${flexDir};\n      align-items: center;\n      gap: var(--diwa-space-3);\n      min-height: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-touch-target-min-size, 44px)'};\n      cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};\n      ${opacityRules}\n    }\n    .track {\r\n      position: relative;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: flex-start;\r\n      width: var(--diwa-switch-track-width);\r\n      height: var(--diwa-switch-track-height);\r\n      background: ${trackBg};\r\n      border: var(--diwa-border-width-base) solid ${trackBorder};\r\n      border-radius: var(--diwa-radius-xl);\r\n      box-sizing: border-box;\r\n      flex-shrink: 0;\r\n      transition: background var(--diwa-transition-base), border-color var(--diwa-transition-base), box-shadow var(--diwa-transition-fast);\r\n    }\r\n    @media (hover: hover) and (pointer: fine) {\n      .wrapper:hover .track {\n        border-color: ${checked ? 'var(--diwa-accent-hover)' : 'var(--diwa-text-secondary)'};\n        background: ${checked ? 'var(--diwa-accent-hover)' : 'var(--diwa-bg-hover)'};\n      }\n    }\n    ${getFocusStyle('.track')}\r\n    .thumb {\r\n      position: absolute;\r\n      top: ${thumbInset};\r\n      left: 0;\r\n      width: var(--diwa-switch-thumb-size);\r\n      height: var(--diwa-switch-thumb-size);\r\n      background: var(--diwa-bg-surface);\r\n      border-radius: 50%;\r\n      transform: ${thumbTranslate};\r\n      box-shadow: var(--diwa-shadow-sm);\r\n      transition: transform var(--diwa-transition-base), background var(--diwa-transition-base), box-shadow var(--diwa-transition-fast);\r\n      pointer-events: none;\r\n    }\r\n    .loading-indicator {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n    }\r\n    .label {\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: var(--diwa-font-size-base);\r\n      font-weight: var(--diwa-font-weight-medium);\r\n      line-height: var(--diwa-line-height-normal);\r\n      color: var(--diwa-text-primary);\r\n      user-select: none;\r\n    }\r\n\r\n    ${getReducedMotionStyle('.track', '.thumb')}\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 { SwitchAlignLabel, SwitchUpdateEventDetail } from './types';\r\nimport { getComponentCss } from './diwa-switch-styles';\r\n\r\n/**\r\n * @slot default — Label text for the switch.\r\n *\r\n * @controlled {\"props\": [\"checked\"], \"event\": \"update\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-switch',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaSwitch {\r\n  /** Whether the switch is in the on state. */\r\n  @Prop({ reflect: true }) checked: boolean = false;\r\n\r\n  /** Disables interaction. No events fire while disabled. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Shows a loading state. Disables interaction while active. */\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n  /** Position of the label relative to the track. */\r\n  @Prop() alignLabel: SwitchAlignLabel = 'end';\r\n\r\n  /** Reduces track and thumb dimensions for use in dense layouts. */\r\n  @Prop({ reflect: true }) compact: 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 when the checked state changes. */\r\n  @Event({ bubbles: false, composed: false }) update!: EventEmitter<SwitchUpdateEventDetail>;\r\n\r\n  private handleClick = (): void => {\r\n    if (this.disabled || this.loading) return;\r\n    this.update.emit({ checked: !this.checked });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent): void => {\r\n    if (e.key === ' ' || e.key === 'Enter') {\r\n      e.preventDefault();\r\n      this.handleClick();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.checked, this.disabled, this.loading, this.alignLabel, this.compact)} />\r\n        <span\r\n          class=\"wrapper\"\r\n          onClick={this.handleClick}\r\n        >\r\n          <span\r\n            class=\"track\"\r\n            role=\"switch\"\r\n            aria-checked={String(this.checked)}\r\n            aria-disabled={this.disabled || this.loading ? 'true' : undefined}\r\n            tabIndex={this.disabled || this.loading ? -1 : 0}\r\n            onKeyDown={this.handleKeyDown}\r\n          >\r\n            {!this.loading && <span class=\"thumb\" />}\r\n            {this.loading && (\r\n              <span class=\"loading-indicator\" aria-hidden=\"true\">\r\n                <diwa-spinner size=\"sm\" />\r\n              </span>\r\n            )}\r\n          </span>\r\n          <span class=\"label\">\r\n            <slot />\r\n          </span>\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oGAGO,MAAMA,EAAkB,CAC7BC,EACAC,EACAC,EACAC,EACAC,KAKA,MAAMC,EAAa,8GACnB,MAAMC,EAAUN,EACZ,qBACA,0BACJ,MAAMO,EAAcP,EAAU,qBAAuB,qBACrD,MAAMQ,EAAiBR,EACnB,0HAA0HK,MAC1H,cAAcA,KAClB,MAAMI,EAAeR,GAAYC,EAAU,sCAAwC,GACnF,MAAMQ,EAAUP,IAAe,QAAU,cAAgB,MAEzD,MAAO,6HAKDC,EAAU,sIAIR,qIAOcM,sFAGJN,EAAU,kDAAoD,6DAClEH,GAAYC,EAAU,cAAgB,qBAC9CO,mQASYH,yDACgCC,oWAQ5BP,EAAU,2BAA6B,sDACzCA,EAAU,2BAA6B,gDAGvDW,EAAc,kEAGPN,yMAMMG,4oBAoBbI,EAAsB,SAAU,eACnC,E,MCnFUC,EAAU,MAJvB,WAAAC,CAAAC,G,yCAM2BC,KAAAhB,QAAmB,MAGnBgB,KAAAf,SAAoB,MAGpBe,KAAAd,QAAmB,MAGpCc,KAAAb,WAA+B,MAGda,KAAAZ,QAAmB,MAGnBY,KAAAC,MAAe,OAKhCD,KAAAE,YAAc,KACpB,GAAIF,KAAKf,UAAYe,KAAKd,QAAS,OACnCc,KAAKG,OAAOC,KAAK,CAAEpB,SAAUgB,KAAKhB,SAAU,EAGtCgB,KAAAK,cAAiBC,IACvB,GAAIA,EAAEC,MAAQ,KAAOD,EAAEC,MAAQ,QAAS,CACtCD,EAAEE,iBACFR,KAAKE,a,GAIT,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAJ,IAAA,wDAAaP,KAAKC,OACrBS,EAAA,SAAAH,IAAA,2CAAOK,UAAW7B,EAAgBiB,KAAKhB,QAASgB,KAAKf,SAAUe,KAAKd,QAASc,KAAKb,WAAYa,KAAKZ,WACnGsB,EAAA,QAAAH,IAAA,2CACEM,MAAM,UACNC,QAASd,KAAKE,aAEdQ,EAAA,QAAAH,IAAA,2CACEM,MAAM,QACNE,KAAK,SAAQ,eACCC,OAAOhB,KAAKhB,SAAQ,gBACnBgB,KAAKf,UAAYe,KAAKd,QAAU,OAAS+B,UACxDC,SAAUlB,KAAKf,UAAYe,KAAKd,SAAW,EAAI,EAC/CiC,UAAWnB,KAAKK,gBAEdL,KAAKd,SAAWwB,EAAA,QAAAH,IAAA,2CAAMM,MAAM,UAC7Bb,KAAKd,SACJwB,EAAA,QAAAH,IAAA,2CAAMM,MAAM,oBAAmB,cAAa,QAC1CH,EAAA,gBAAAH,IAAA,2CAAca,KAAK,SAIzBV,EAAA,QAAAH,IAAA,2CAAMM,MAAM,SACVH,EAAA,QAAAH,IAAA,+C","ignoreList":[]}

package/dist/diwa-components/p-35c7c864.js

@@ -0,0 +1,2 @@
+import{b as n,a as i}from"./p-70bbb21a.js";const a=(a,e,r,t,o,d,s)=>{const p=a==="error"?"var(--diwa-notification-error)":a==="success"?"var(--diwa-notification-success)":"var(--diwa-input-border)";const c=a==="error"?"var(--diwa-notification-error)":a==="success"?"var(--diwa-notification-success)":"var(--diwa-text-secondary)";const l=t?"var(--diwa-touch-target-min-size-compact, 32px)":"var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px))";const u=o?"4px":"var(--diwa-input-padding-x, 12px)";const w=d||s?"4px":"var(--diwa-input-padding-x, 12px)";return`\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Root layout ────────────────────────────────────────────────────── */\n\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: var(--diwa-space-2);\n  }\n\n  /* ── Label row ──────────────────────────────────────────────────────── */\n\n  .label-row {\n    display: flex;\n    align-items: baseline;\n    gap: var(--diwa-space-1);\n  }\n\n  .label {\n    display: block;\n    font-size: var(--diwa-font-size-sm);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-secondary);\n    line-height: var(--diwa-line-height-normal);\n    cursor: default;\n  }\n\n  .required {\n    color: var(--diwa-notification-error);\n    font-weight: var(--diwa-font-weight-semibold);\n  }\n\n  /* ── Input wrapper (owns border + background) ───────────────────────── */\n\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: ${l};\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\n    border: var(--diwa-border-width-thin) solid ${p};\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast), box-shadow var(--diwa-transition-fast);\n  }\n\n  ${n(".input-wrapper:not(:has(input:disabled)):not(:has(input[readonly]))",`border-color: ${a==="none"?"var(--diwa-border-hover)":p};`)}\n\n  /* Focus — border and ring become visible on keyboard navigation */\n  .input-wrapper:focus-within {\n    border-color: var(--diwa-border-focus);\n    box-shadow: 0 0 0 var(--diwa-focus-ring-width) var(--diwa-border-focus);\n  }\n\n  /* Disabled */\n  .input-wrapper:has(input:disabled) {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* Read-only */\n  .input-wrapper:has(input[readonly]) {\n    background: var(--diwa-bg-surface);\n    border-style: dashed;\n    cursor: default;\n  }\n\n  /* ── Start / End slot containers ────────────────────────────────────── */\n\n  .slot-start {\n    display: flex;\n    align-items: center;\n    padding-left: var(--diwa-input-padding-x, 12px);\n    color: var(--diwa-text-secondary);\n    flex-shrink: 0;\n  }\n\n  .slot-end {\n    display: flex;\n    align-items: center;\n    padding-right: var(--diwa-input-padding-x, 12px);\n    color: var(--diwa-text-secondary);\n    flex-shrink: 0;\n  }\n\n  /* ── Native input ───────────────────────────────────────────────────── */\n\n  input.input {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\n    padding: 0 ${w} 0 ${u};\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    appearance: none;\n    -webkit-appearance: none;\n    outline: none;\n    margin: 0;\n    font-family: inherit;\n    font-size: var(--diwa-font-size-base);\n    color: var(--diwa-text-primary);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  input.input::placeholder {\n    color: var(--diwa-text-disabled);\n    opacity: 1;\n  }\n\n  /* Number — hide native spinners */\n  input.input[type="number"]::-webkit-inner-spin-button,\n  input.input[type="number"]::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  input.input[type="number"] { -moz-appearance: textfield; }\n\n  /* Search — hide browser-native clear button */\n  input.input[type="search"]::-webkit-search-cancel-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  /* Date / time — hide native picker icon in webkit */\n  input.input[type="date"]::-webkit-calendar-picker-indicator,\n  input.input[type="time"]::-webkit-calendar-picker-indicator,\n  input.input[type="month"]::-webkit-calendar-picker-indicator,\n  input.input[type="week"]::-webkit-calendar-picker-indicator {\n    opacity: 0.5;\n    cursor: pointer;\n  }\n\n  /* ── Suffix button (password toggle / search clear) ─────────────────── */\n\n  .suffix-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    height: 100%;\n    min-width: ${t?"var(--diwa-touch-target-min-size-compact, 32px)":"var(--diwa-touch-target-min-size, 44px)"};\n    padding: 0 var(--diwa-space-3);\n    background: none;\n    border: none;\n    margin: 0;\n    cursor: pointer;\n    color: var(--diwa-text-secondary);\n    line-height: 0;\n    transition: color var(--diwa-transition-fast);\n  }\n\n  ${n(".suffix-btn","color: var(--diwa-text-primary);")}\n\n  .suffix-btn:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: -2px;\n  }\n\n  /* ── Description ────────────────────────────────────────────────── */\n\n  .description {\n    font-size: var(--diwa-font-size-sm);\n    color: var(--diwa-text-secondary);\n    margin: 0;\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Message (state-coloured) ───────────────────────────────────── */\n\n  .message {\n    font-size: var(--diwa-font-size-sm);\n    color: ${c};\n    margin: 0;\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  ${i(".input-wrapper",".suffix-btn")}\n`};export{a as g};
+//# sourceMappingURL=p-35c7c864.js.map

package/dist/diwa-components/p-35c7c864.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getInputCss","state","_disabled","_readonly","compact","hasStart","hasEnd","hasSuffix","borderColor","messageColor","inputHeight","paddingLeft","paddingRight","getHoverCapableStyle","getReducedMotionStyle"],"sources":["src/components/diwa-input/input-styles.ts"],"sourcesContent":["import type { InputFieldState } from './types';\nimport { getHoverCapableStyle, getReducedMotionStyle } from '../../utils/styles';\n\n/**\n * Returns the shared Shadow DOM CSS for all diwa-input-* components.\n *\n * NOTE: Border and background live on .input-wrapper so start/end slot content\n * shares the same bordered box as the native input. This also prevents Tailwind\n * v4 preflight from stripping padding set directly on :host.\n */\nexport const getInputCss = (\n  state: InputFieldState,\n  _disabled: boolean,\n  _readonly: boolean,\n  compact: boolean,\n  hasStart: boolean,\n  hasEnd: boolean,\n  hasSuffix: boolean,\n): string => {\n  const borderColor =\n    state === 'error'\n      ? 'var(--diwa-notification-error)'\n      : state === 'success'\n        ? 'var(--diwa-notification-success)'\n        : 'var(--diwa-input-border)';\n\n  const messageColor =\n    state === 'error'\n      ? 'var(--diwa-notification-error)'\n      : state === 'success'\n        ? 'var(--diwa-notification-success)'\n        : 'var(--diwa-text-secondary)';\n\n  const inputHeight = compact\n    ? 'var(--diwa-touch-target-min-size-compact, 32px)'\n    : 'var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px))';\n  const paddingLeft = hasStart ? '4px' : 'var(--diwa-input-padding-x, 12px)';\n  const paddingRight = (hasEnd || hasSuffix) ? '4px' : 'var(--diwa-input-padding-x, 12px)';\n\n  return `\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Root layout ────────────────────────────────────────────────────── */\n\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: var(--diwa-space-2);\n  }\n\n  /* ── Label row ──────────────────────────────────────────────────────── */\n\n  .label-row {\n    display: flex;\n    align-items: baseline;\n    gap: var(--diwa-space-1);\n  }\n\n  .label {\n    display: block;\n    font-size: var(--diwa-font-size-sm);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-secondary);\n    line-height: var(--diwa-line-height-normal);\n    cursor: default;\n  }\n\n  .required {\n    color: var(--diwa-notification-error);\n    font-weight: var(--diwa-font-weight-semibold);\n  }\n\n  /* ── Input wrapper (owns border + background) ───────────────────────── */\n\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: ${inputHeight};\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\n    border: var(--diwa-border-width-thin) solid ${borderColor};\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast), box-shadow var(--diwa-transition-fast);\n  }\n\n  ${getHoverCapableStyle(\n    '.input-wrapper:not(:has(input:disabled)):not(:has(input[readonly]))',\n    `border-color: ${state === 'none' ? 'var(--diwa-border-hover)' : borderColor};`,\n  )}\n\n  /* Focus — border and ring become visible on keyboard navigation */\n  .input-wrapper:focus-within {\n    border-color: var(--diwa-border-focus);\n    box-shadow: 0 0 0 var(--diwa-focus-ring-width) var(--diwa-border-focus);\n  }\n\n  /* Disabled */\n  .input-wrapper:has(input:disabled) {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* Read-only */\n  .input-wrapper:has(input[readonly]) {\n    background: var(--diwa-bg-surface);\n    border-style: dashed;\n    cursor: default;\n  }\n\n  /* ── Start / End slot containers ────────────────────────────────────── */\n\n  .slot-start {\n    display: flex;\n    align-items: center;\n    padding-left: var(--diwa-input-padding-x, 12px);\n    color: var(--diwa-text-secondary);\n    flex-shrink: 0;\n  }\n\n  .slot-end {\n    display: flex;\n    align-items: center;\n    padding-right: var(--diwa-input-padding-x, 12px);\n    color: var(--diwa-text-secondary);\n    flex-shrink: 0;\n  }\n\n  /* ── Native input ───────────────────────────────────────────────────── */\n\n  input.input {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\n    padding: 0 ${paddingRight} 0 ${paddingLeft};\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    appearance: none;\n    -webkit-appearance: none;\n    outline: none;\n    margin: 0;\n    font-family: inherit;\n    font-size: var(--diwa-font-size-base);\n    color: var(--diwa-text-primary);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  input.input::placeholder {\n    color: var(--diwa-text-disabled);\n    opacity: 1;\n  }\n\n  /* Number — hide native spinners */\n  input.input[type=\"number\"]::-webkit-inner-spin-button,\n  input.input[type=\"number\"]::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  input.input[type=\"number\"] { -moz-appearance: textfield; }\n\n  /* Search — hide browser-native clear button */\n  input.input[type=\"search\"]::-webkit-search-cancel-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  /* Date / time — hide native picker icon in webkit */\n  input.input[type=\"date\"]::-webkit-calendar-picker-indicator,\n  input.input[type=\"time\"]::-webkit-calendar-picker-indicator,\n  input.input[type=\"month\"]::-webkit-calendar-picker-indicator,\n  input.input[type=\"week\"]::-webkit-calendar-picker-indicator {\n    opacity: 0.5;\n    cursor: pointer;\n  }\n\n  /* ── Suffix button (password toggle / search clear) ─────────────────── */\n\n  .suffix-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    height: 100%;\n    min-width: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-touch-target-min-size, 44px)'};\n    padding: 0 var(--diwa-space-3);\n    background: none;\n    border: none;\n    margin: 0;\n    cursor: pointer;\n    color: var(--diwa-text-secondary);\n    line-height: 0;\n    transition: color var(--diwa-transition-fast);\n  }\n\n  ${getHoverCapableStyle('.suffix-btn', 'color: var(--diwa-text-primary);')}\n\n  .suffix-btn:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: -2px;\n  }\n\n  /* ── Description ────────────────────────────────────────────────── */\n\n  .description {\n    font-size: var(--diwa-font-size-sm);\n    color: var(--diwa-text-secondary);\n    margin: 0;\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Message (state-coloured) ───────────────────────────────────── */\n\n  .message {\n    font-size: var(--diwa-font-size-sm);\n    color: ${messageColor};\n    margin: 0;\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  ${getReducedMotionStyle('.input-wrapper', '.suffix-btn')}\n`;\n};\n"],"mappings":"iDAUaA,EAAc,CACzBC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,KAEA,MAAMC,EACJP,IAAU,QACN,iCACAA,IAAU,UACR,mCACA,2BAER,MAAMQ,EACJR,IAAU,QACN,iCACAA,IAAU,UACR,mCACA,6BAER,MAAMS,EAAcN,EAChB,kDACA,oEACJ,MAAMO,EAAcN,EAAW,MAAQ,oCACvC,MAAMO,EAAgBN,GAAUC,EAAa,MAAQ,oCAErD,MAAO,8nCAiDKG,oHAEoCF,oRAO9CK,EACA,sEACA,iBAAiBZ,IAAU,OAAS,2BAA6BO,4pCA+CpDI,OAAkBD,g8CAkDlBP,EAAU,kDAAoD,8RAW3ES,EAAqB,cAAe,gkBAoB3BJ,kFAKTK,EAAsB,iBAAkB,kBAC3C,S","ignoreList":[]}

package/dist/diwa-components/p-3b7a1431.entry.js

@@ -0,0 +1,2 @@
+import{r as n,h as e,H as t,g as a}from"./p-ed4017f0.js";const i=(n,e)=>`\n  :host {\n    display: table-cell;\n    padding: var(--diwa-table-padding, var(--diwa-space-fluid-md));\n    background: var(--diwa-table-header-bg, var(--diwa-bg-elevated));\n    text-align: start;\n    font-size: var(--diwa-font-size-sm);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-secondary);\n    border-bottom: var(--diwa-border-width-base) solid var(--diwa-table-border-color, var(--diwa-border));\n    border-right: var(--diwa-table-column-border, none);\n    white-space: ${e?"normal":"nowrap"};\n    vertical-align: middle;\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  ${n?`\n  .sort-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--diwa-space-1);\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    font: inherit;\n    color: inherit;\n    padding: 0;\n    text-align: start;\n    outline-offset: 2px;\n    transition: color var(--diwa-transition-base);\n    white-space: ${e?"normal":"nowrap"};\n  }\n  .sort-btn:hover {\n    color: var(--diwa-text-primary);\n  }\n  `:""}\n`;const r=class{constructor(e){n(this,e);this.theme="dark";this.hideLabel=false;this.multiline=false;this.handleSort=()=>{if(!this.sort)return;const n=this.sort.active?this.sort.direction==="asc"?"desc":"asc":this.sort.direction;this.host.dispatchEvent(new CustomEvent("diwaTableUpdate",{bubbles:true,composed:true,detail:{id:this.sort.id,active:true,direction:n}}))}}render(){const{sort:n,hideLabel:a,multiline:r}=this;const o=!!n;const d=!o?undefined:n.active?n.direction==="asc"?"ascending":"descending":"none";const s=e("span",{key:"3763494f5c22dc12b37dcac58c213597c84e6711",class:a?"sr-only":undefined},e("slot",{key:"0b5b5c768b9c225e73c45a257ce26d4521777266"}));const c=e("svg",{key:"12e03df96dcd7ba962cdd00a6d013833e23a86b0",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",style:{opacity:(n===null||n===void 0?void 0:n.active)?"1":"0.4",transform:(n===null||n===void 0?void 0:n.direction)==="desc"?"rotate(180deg)":"none",transition:"opacity 150ms ease, transform 150ms ease",flexShrink:"0",display:"block"}},e("path",{key:"d2ecf59d26781da72b37a4be364aa293531c79cd",d:"M4 10L8 6L12 10",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));return e(t,{key:"d34447c382406fccd6da18cd313524c0fa7572ae",role:"columnheader","aria-sort":d},e("style",{key:"867bd55aad47be3565ac1393f02d5e8473293c99",innerHTML:i(o,r)}),o?e("button",{type:"button",class:"sort-btn",onClick:this.handleSort},s,c):s)}get host(){return a(this)}};export{r as diwa_table_head_cell};
+//# sourceMappingURL=p-3b7a1431.entry.js.map

package/dist/diwa-components/p-3b7a1431.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getComponentCss","sortable","multiline","DiwaTableHeadCell","constructor","hostRef","this","theme","hideLabel","handleSort","sort","next","active","direction","host","dispatchEvent","CustomEvent","bubbles","composed","detail","id","render","isSortable","ariaSort","undefined","labelEl","h","key","class","sortIcon","width","height","viewBox","fill","style","opacity","transform","transition","flexShrink","display","d","stroke","Host","role","innerHTML","type","onClick"],"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 => `\r\n  :host {\r\n    display: table-cell;\r\n    padding: var(--diwa-table-padding, var(--diwa-space-fluid-md));\r\n    background: var(--diwa-table-header-bg, var(--diwa-bg-elevated));\r\n    text-align: start;\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    border-bottom: var(--diwa-border-width-base) solid var(--diwa-table-border-color, var(--diwa-border));\r\n    border-right: var(--diwa-table-column-border, none);\r\n    white-space: ${multiline ? 'normal' : 'nowrap'};\r\n    vertical-align: middle;\r\n  }\r\n  :host(:last-child) { border-right: none; }\r\n  :host([hidden]) { display: none; }\r\n\r\n  .sr-only {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 1px;\r\n    padding: 0;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    clip: rect(0, 0, 0, 0);\r\n    white-space: nowrap;\r\n    border: 0;\r\n  }\r\n\r\n  ${sortable ? `\r\n  .sort-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-1);\r\n    background: transparent;\r\n    border: 0;\r\n    cursor: pointer;\r\n    font: inherit;\r\n    color: inherit;\r\n    padding: 0;\r\n    text-align: start;\r\n    outline-offset: 2px;\r\n    transition: color var(--diwa-transition-base);\r\n    white-space: ${multiline ? 'normal' : 'nowrap'};\r\n  }\r\n  .sort-btn:hover {\r\n    color: var(--diwa-text-primary);\r\n  }\r\n  ` : ''}\r\n`;\r\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 = (\r\n      <span class={hideLabel ? 'sr-only' : undefined}>\r\n        <slot />\r\n      </span>\r\n    );\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            {labelEl}\r\n            {sortIcon}\r\n          </button>\r\n        ) : (\r\n          labelEl\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"yDAAO,MAAMA,EAAkB,CAACC,EAAmBC,IAA+B,2gBAW/DA,EAAY,SAAW,2VAkBtCD,EAAW,6VAcIC,EAAY,SAAW,qFAKpC,O,MCzCOC,EAAiB,MAD9B,WAAAC,CAAAC,G,UAI2BC,KAAAC,MAAe,OAEhCD,KAAAE,UAAqB,MACrBF,KAAAJ,UAAqB,MAErBI,KAAAG,WAAa,KACnB,IAAKH,KAAKI,KAAM,OAChB,MAAMC,EAAkBL,KAAKI,KAAKE,OAC9BN,KAAKI,KAAKG,YAAc,MAAQ,OAAS,MACzCP,KAAKI,KAAKG,UACdP,KAAKQ,KAAKC,cACR,IAAIC,YAAoC,kBAAmB,CACzDC,QAAS,KACTC,SAAU,KACVC,OAAQ,CAAEC,GAAId,KAAKI,KAAKU,GAAIR,OAAQ,KAAMC,UAAWF,KAExD,C,CAGH,MAAAU,GACE,MAAMX,KAAEA,EAAIF,UAAEA,EAASN,UAAEA,GAAcI,KACvC,MAAMgB,IAAeZ,EACrB,MAAMa,GAAYD,EACdE,UACAd,EAAKE,OACHF,EAAKG,YAAc,MAAQ,YAAc,aACzC,OAEN,MAAMY,EACJC,EAAA,QAAAC,IAAA,2CAAMC,MAAOpB,EAAY,UAAYgB,WACnCE,EAAA,QAAAC,IAAA,8CAIJ,MAAME,EACJH,EAAA,OAAAC,IAAA,2CACEG,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OAAM,cACC,OACZC,MAAO,CACLC,SAASzB,IAAI,MAAJA,SAAI,SAAJA,EAAME,QAAS,IAAM,MAC9BwB,WAAW1B,IAAI,MAAJA,SAAI,SAAJA,EAAMG,aAAc,OAAS,iBAAmB,OAC3DwB,WAAY,2CACZC,WAAY,IACZC,QAAS,UAGXb,EAAA,QAAAC,IAAA,2CACEa,EAAE,kBACFC,OAAO,eAAc,eACR,MAAK,iBACH,QAAO,kBACN,WAKtB,OACEf,EAACgB,EAAI,CAAAf,IAAA,2CAACgB,KAAK,eAAc,YAAYpB,GACnCG,EAAA,SAAAC,IAAA,2CAAOiB,UAAW5C,EAAgBsB,EAAYpB,KAC7CoB,EACCI,EAAA,UAAQmB,KAAK,SAASjB,MAAM,WAAWkB,QAASxC,KAAKG,YAClDgB,EACAI,GACM,E","ignoreList":[]}

package/dist/diwa-components/p-48009a79.entry.js

@@ -0,0 +1,2 @@
+import{r as n,c as t,h as e,H as i,g as a}from"./p-ed4017f0.js";import{g as s,a as r}from"./p-70bbb21a.js";const o=()=>`\n\n  /* ── Host ─────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Nav wrapper ──────────────────────────────────────────────────── */\n\n  .nav {\n    display: flex;\n    justify-content: center;\n    user-select: none;\n  }\n\n  /* ── Item list ────────────────────────────────────────────────────── */\n\n  .list {\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-1);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* Extra breathing room between prev/next and the page number group */\n  .list > li:first-child {\n    margin-inline-end: var(--diwa-space-2);\n  }\n\n  .list > li:last-child {\n    margin-inline-start: var(--diwa-space-2);\n  }\n\n  /* ── Shared button base ───────────────────────────────────────────── */\n\n  .btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--diwa-pagination-item-size);\n    height: var(--diwa-pagination-item-size);\n    box-sizing: border-box;\n    padding: 0;\n    border: var(--diwa-border-width-medium) solid transparent;\n    border-radius: var(--diwa-radius-md);\n    background: transparent;\n    color: var(--diwa-text-primary);\n    font-size: var(--diwa-font-size-sm);\n    font-family: inherit;\n    font-weight: var(--diwa-font-weight-normal);\n    line-height: 1;\n    cursor: pointer;\n    transition: background-color var(--diwa-transition-fast),\n                border-color var(--diwa-transition-fast);\n  }\n\n  /* ── Hover ────────────────────────────────────────────────────────── */\n\n  .btn:hover:not(:disabled):not([aria-current]) {\n    background: var(--diwa-bg-hover);\n  }\n\n  /* ── Active page ──────────────────────────────────────────────────── */\n\n  /* Diwa brand treatment: bottom accent line instead of PDS border box */\n  .btn[aria-current="page"] {\n    border-bottom-color: var(--diwa-accent);\n    cursor: default;\n  }\n\n  /* ── Disabled (prev/next at boundaries) ──────────────────────────── */\n\n  .btn:disabled {\n    opacity: 0.38;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ── Ellipsis ─────────────────────────────────────────────────────── */\n\n  .ellipsis {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--diwa-pagination-item-size);\n    height: var(--diwa-pagination-item-size);\n    color: var(--diwa-text-secondary);\n    font-size: var(--diwa-font-size-sm);\n    cursor: default;\n    user-select: none;\n  }\n\n  /* ── Focus ring ───────────────────────────────────────────────────── */\n\n  ${s(".btn")}\n\n  /* ── Reduced motion ───────────────────────────────────────────────── */\n\n  ${r(".btn")}\n`;var l;(function(n){n[n["PAGE"]=0]="PAGE";n[n["ELLIPSIS"]=1]="ELLIPSIS";n[n["PREVIOUS"]=2]="PREVIOUS";n[n["NEXT"]=3]="NEXT"})(l||(l={}));const c={type:l.ELLIPSIS,isActive:false};const d=n=>{const{activePage:t}=n;return{type:l.PREVIOUS,value:Math.max(1,t-1),isActive:t>1}};const u=n=>{const{activePage:t,pageTotal:e}=n;return{type:l.NEXT,value:Math.min(e,t+1),isActive:t<e}};const b=({activePage:n})=>t=>({type:l.PAGE,value:t,isActive:t===n,isBeforeCurrent:t===n-1,isBeforeBeforeCurrent:t===n-2,isAfterCurrent:t===n+1,isAfterAfterCurrent:t===n+2});const h=(n,t)=>Array.from(new Array(t-n+1),((t,e)=>e+n));const p=n=>{const{pageTotal:t,activePage:e,showLastPage:i}=n;const a=1;const s=1;const r=1;const o=[d(n)];const l=b(n);if(1+2*r+2*s>=t){const n=h(1,t).map(l);o.push(...n)}else{o.push(l(1));const n=Math.min(Math.max(e-a,2+r),t-r-2-(i?1:0));const s=n+2;const d=h(n,s).map(l);const u=n-1;const b=u===2;const p=b?l(u):c;o.push(p);o.push(...d);const g=s+1;const v=g===t-(i?1:0);const f=v?l(g):c;o.push(f);if(i){o.push(l(t))}}o.push(u(n));return o};const g=(n,t)=>n<1?1:n>t?t:n;const v=(n,t)=>{if(t<1)return 1;const e=n<1?1:n;return Math.ceil(e/t)};const f=class{constructor(e){n(this,e);this.update=t(this,"update",1);this.theme="dark";this.totalItemsCount=1;this.itemsPerPage=1;this.activePage=1;this.showLastPage=true;this.intl={root:"Pagination",prev:"Previous page",next:"Next page",page:"Page"}}handleClick(n){if(n!==this.activePage){this.update.emit({page:n,previousPage:this.activePage});this.activePage=n}}render(){var n,t,a,s,r;const c=v(this.totalItemsCount,this.itemsPerPage);const d=g(this.activePage,c);const u=p({activePage:d,pageTotal:c,showLastPage:this.showLastPage});const b=(n=this.intl)!==null&&n!==void 0?n:{};const h=(t=b.root)!==null&&t!==void 0?t:"Pagination";const f=(a=b.prev)!==null&&a!==void 0?a:"Previous page";const w=(s=b.next)!==null&&s!==void 0?s:"Next page";const y=(r=b.page)!==null&&r!==void 0?r:"Page";return e(i,{key:"5ab4f9042518982631f8b0276acc3de703344ab7","data-theme":this.theme},e("style",{key:"83777127af3cd7fba90bcf359c0727ecb478019d",innerHTML:o()}),e("nav",{key:"9ba68ea091b61589dd7ef2b9bda3fab01f841efd","aria-label":h,class:"nav"},e("ul",{key:"819b9d7b344ec50b2a15241278438e18bb20cdfb",class:"list"},u.map(((n,t)=>{const{type:i,isActive:a,value:s}=n;if(i===l.PREVIOUS){return e("li",{key:"prev"},e("button",{class:"btn",disabled:!a,"aria-label":f,onClick:()=>a&&this.handleClick(s)},e("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},e("polyline",{points:"15 18 9 12 15 6"}))))}if(i===l.NEXT){return e("li",{key:"next"},e("button",{class:"btn",disabled:!a,"aria-label":w,onClick:()=>a&&this.handleClick(s)},e("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},e("polyline",{points:"9 18 15 12 9 6"}))))}if(i===l.ELLIPSIS){return e("li",{key:`ellipsis-${t}`},e("span",{class:"ellipsis","aria-hidden":"true"},"…"))}return e("li",{key:s},e("button",{class:"btn","aria-label":`${y} ${s}`,"aria-current":a?"page":undefined,onClick:()=>this.handleClick(s)},s))})))))}static get delegatesFocus(){return true}get host(){return a(this)}};export{f as diwa_pagination};
+//# sourceMappingURL=p-48009a79.entry.js.map

package/dist/diwa-components/p-48009a79.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getComponentCss","getFocusStyle","getReducedMotionStyle","ItemType","ellipsisItem","type","ELLIPSIS","isActive","createPreviousPageLink","options","activePage","PREVIOUS","value","Math","max","createNextPageLink","pageTotal","NEXT","min","createPageFunctionFactory","pageNumber","PAGE","isBeforeCurrent","isBeforeBeforeCurrent","isAfterCurrent","isAfterAfterCurrent","createRange","start","end","Array","from","_","i","createPaginationItems","showLastPage","pageRange","boundaryPagesRange","ellipsisSize","paginationItems","createPage","allPages","map","push","middlePagesStart","middlePagesEnd","middlePages","firstEllipsisPageNumber","showPageInsteadOfFirstEllipsis","firstEllipsisOrPage","lastEllipsisPageNumber","showPageInsteadOfLastEllipsis","lastEllipsisOrPage","getCurrentActivePage","totalPages","getTotalPages","totalItemsCount","itemsPerPage","total","ceil","DiwaPagination","constructor","hostRef","this","theme","intl","root","prev","next","page","handleClick","update","emit","previousPage","render","currentPage","items","_a","rootLabel","_b","prevLabel","_c","nextLabel","_d","pageLabel","_e","h","Host","key","innerHTML","class","item","index","disabled","onClick","width","height","viewBox","fill","stroke","points","undefined"],"sources":["src/components/diwa-pagination/diwa-pagination-styles.ts","src/components/diwa-pagination/diwa-pagination-utils.ts","src/components/diwa-pagination/diwa-pagination.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n\r\n  /* ── Host ─────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Nav wrapper ──────────────────────────────────────────────────── */\r\n\r\n  .nav {\r\n    display: flex;\r\n    justify-content: center;\r\n    user-select: none;\r\n  }\r\n\r\n  /* ── Item list ────────────────────────────────────────────────────── */\r\n\r\n  .list {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-1);\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  /* Extra breathing room between prev/next and the page number group */\r\n  .list > li:first-child {\r\n    margin-inline-end: var(--diwa-space-2);\r\n  }\r\n\r\n  .list > li:last-child {\r\n    margin-inline-start: var(--diwa-space-2);\r\n  }\r\n\r\n  /* ── Shared button base ───────────────────────────────────────────── */\r\n\r\n  .btn {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--diwa-pagination-item-size);\r\n    height: var(--diwa-pagination-item-size);\r\n    box-sizing: border-box;\r\n    padding: 0;\r\n    border: var(--diwa-border-width-medium) solid transparent;\r\n    border-radius: var(--diwa-radius-md);\r\n    background: transparent;\r\n    color: var(--diwa-text-primary);\r\n    font-size: var(--diwa-font-size-sm);\r\n    font-family: inherit;\r\n    font-weight: var(--diwa-font-weight-normal);\r\n    line-height: 1;\r\n    cursor: pointer;\r\n    transition: background-color var(--diwa-transition-fast),\r\n                border-color var(--diwa-transition-fast);\r\n  }\r\n\r\n  /* ── Hover ────────────────────────────────────────────────────────── */\r\n\r\n  .btn:hover:not(:disabled):not([aria-current]) {\r\n    background: var(--diwa-bg-hover);\r\n  }\r\n\r\n  /* ── Active page ──────────────────────────────────────────────────── */\r\n\r\n  /* Diwa brand treatment: bottom accent line instead of PDS border box */\r\n  .btn[aria-current=\"page\"] {\r\n    border-bottom-color: var(--diwa-accent);\r\n    cursor: default;\r\n  }\r\n\r\n  /* ── Disabled (prev/next at boundaries) ──────────────────────────── */\r\n\r\n  .btn:disabled {\r\n    opacity: 0.38;\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── Ellipsis ─────────────────────────────────────────────────────── */\r\n\r\n  .ellipsis {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--diwa-pagination-item-size);\r\n    height: var(--diwa-pagination-item-size);\r\n    color: var(--diwa-text-secondary);\r\n    font-size: var(--diwa-font-size-sm);\r\n    cursor: default;\r\n    user-select: none;\r\n  }\r\n\r\n  /* ── Focus ring ───────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.btn')}\r\n\r\n  /* ── Reduced motion ───────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.btn')}\r\n`;\r\n","/**\r\n * Universal pagination model generation algorithm.\r\n *\r\n * Ported from an upstream pagination algorithm:\n *   packages/components/src/components/pagination/pagination-utils.ts\r\n *   (which was itself adapted from ultimate-pagination)\r\n *\r\n * Kept: ItemType, PaginationItem, PaginationOptions, createRange,\r\n *       createPaginationItems, getTotalPages, getCurrentActivePage.\r\n * Dropped: deprecated allyLabel* types, maxNumberOfPageLinks.\r\n */\r\n\r\nexport type PaginationOptions = {\r\n  activePage: number;\r\n  pageTotal: number;\r\n  showLastPage: boolean;\r\n};\r\n\r\nexport type PaginationItem = {\r\n  /** Page number — relevant for clickable PAGE items; undefined for ELLIPSIS. */\r\n  value?: number;\r\n  /** True for the active page, and true for prev/next when they are actionable. */\r\n  isActive: boolean;\r\n  /** Positional flags used for responsive class names (future use). */\r\n  isBeforeCurrent?: boolean;\r\n  isBeforeBeforeCurrent?: boolean;\r\n  isAfterCurrent?: boolean;\r\n  isAfterAfterCurrent?: boolean;\r\n  type: ItemType;\r\n};\r\n\r\nexport enum ItemType {\r\n  PAGE = 0,\r\n  ELLIPSIS = 1,\r\n  PREVIOUS = 2,\r\n  NEXT = 3,\r\n}\r\n\r\n// ── Internal helpers ────────────────────────────────────────────────────────\r\n\r\nconst ellipsisItem: PaginationItem = {\r\n  type: ItemType.ELLIPSIS,\r\n  isActive: false,\r\n};\r\n\r\nconst createPreviousPageLink = (options: PaginationOptions): PaginationItem => {\r\n  const { activePage } = options;\r\n  return {\r\n    type: ItemType.PREVIOUS,\r\n    value: Math.max(1, activePage - 1),\r\n    isActive: activePage > 1,\r\n  };\r\n};\r\n\r\nconst createNextPageLink = (options: PaginationOptions): PaginationItem => {\r\n  const { activePage, pageTotal } = options;\r\n  return {\r\n    type: ItemType.NEXT,\r\n    value: Math.min(pageTotal, activePage + 1),\r\n    isActive: activePage < pageTotal,\r\n  };\r\n};\r\n\r\nconst createPageFunctionFactory = ({\r\n  activePage,\r\n}: PaginationOptions): ((pageNumber: number) => PaginationItem) => {\r\n  return (pageNumber): PaginationItem => ({\r\n    type: ItemType.PAGE,\r\n    value: pageNumber,\r\n    isActive: pageNumber === activePage,\r\n    isBeforeCurrent: pageNumber === activePage - 1,\r\n    isBeforeBeforeCurrent: pageNumber === activePage - 2,\r\n    isAfterCurrent: pageNumber === activePage + 1,\r\n    isAfterAfterCurrent: pageNumber === activePage + 2,\r\n  });\r\n};\r\n\r\n// ── Public API ──────────────────────────────────────────────────────────────\r\n\r\nexport const createRange = (start: number, end: number): number[] =>\r\n  Array.from(new Array(end - start + 1), (_, i) => i + start);\r\n\r\n/**\r\n * Builds the ordered list of pagination items (PREVIOUS, PAGE, ELLIPSIS, NEXT)\r\n * for the given options. The caller is responsible for clamping `activePage`\r\n * before passing it in — use `getCurrentActivePage()`.\r\n */\r\nexport const createPaginationItems = (options: PaginationOptions): PaginationItem[] => {\r\n  const { pageTotal, activePage, showLastPage } = options;\r\n\r\n  const pageRange = 1;\r\n  const boundaryPagesRange = 1;\r\n  const ellipsisSize = 1;\r\n  const paginationItems: PaginationItem[] = [createPreviousPageLink(options)];\r\n  const createPage = createPageFunctionFactory(options);\r\n\r\n  // All pages fit without ellipsis\r\n  if (1 + 2 * ellipsisSize + 2 * boundaryPagesRange >= pageTotal) {\r\n    const allPages = createRange(1, pageTotal).map(createPage);\r\n    paginationItems.push(...allPages);\r\n  } else {\r\n    // First page\r\n    paginationItems.push(createPage(1));\r\n\r\n    // Middle group\r\n    const middlePagesStart = Math.min(\r\n      Math.max(activePage - pageRange, 2 + ellipsisSize),\r\n      pageTotal - ellipsisSize - 2 - (showLastPage ? 1 : 0),\r\n    );\r\n    const middlePagesEnd = middlePagesStart + 2;\r\n    const middlePages = createRange(middlePagesStart, middlePagesEnd).map(createPage);\r\n\r\n    // Ellipsis / page before middle group\r\n    const firstEllipsisPageNumber = middlePagesStart - 1;\r\n    const showPageInsteadOfFirstEllipsis = firstEllipsisPageNumber === 2;\r\n    const firstEllipsisOrPage = showPageInsteadOfFirstEllipsis\r\n      ? createPage(firstEllipsisPageNumber)\r\n      : ellipsisItem;\r\n\r\n    paginationItems.push(firstEllipsisOrPage);\r\n\r\n    paginationItems.push(...middlePages);\r\n\r\n    // Ellipsis / page after middle group\r\n    const lastEllipsisPageNumber = middlePagesEnd + 1;\r\n    const showPageInsteadOfLastEllipsis =\r\n      lastEllipsisPageNumber === pageTotal - (showLastPage ? 1 : 0);\r\n    const lastEllipsisOrPage = showPageInsteadOfLastEllipsis\r\n      ? createPage(lastEllipsisPageNumber)\r\n      : ellipsisItem;\r\n    paginationItems.push(lastEllipsisOrPage);\r\n\r\n    if (showLastPage) {\r\n      paginationItems.push(createPage(pageTotal));\r\n    }\r\n  }\r\n\r\n  paginationItems.push(createNextPageLink(options));\r\n  return paginationItems;\r\n};\r\n\r\n/** Clamps activePage to a valid range [1, totalPages]. */\r\nexport const getCurrentActivePage = (activePage: number, totalPages: number): number => {\r\n  return activePage < 1 ? 1 : activePage > totalPages ? totalPages : activePage;\r\n};\r\n\r\n/** Derives total page count, guarding against zero/negative inputs. */\r\nexport const getTotalPages = (totalItemsCount: number, itemsPerPage: number): number => {\r\n  if (itemsPerPage < 1) return 1;\r\n  const total = totalItemsCount < 1 ? 1 : totalItemsCount;\r\n  return Math.ceil(total / itemsPerPage);\r\n};\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { PaginationIntl, PaginationUpdateEventDetail } from './types';\r\nimport { getComponentCss } from './diwa-pagination-styles';\r\nimport {\r\n  createPaginationItems,\r\n  getCurrentActivePage,\r\n  getTotalPages,\r\n  ItemType,\r\n} from './diwa-pagination-utils';\r\n\r\n/**\r\n * @component diwa-pagination\r\n *\r\n * Splits a large data set across numbered pages with previous and next navigation.\r\n * Renders up to 7 page items (prev + pages/ellipsis + next) matching Diwa's\n * pagination visual and API contract.\n *\r\n * The active page is indicated with a bottom accent line (`--diwa-accent`) rather\r\n * than a border box, keeping Diwa's minimal aesthetic.\r\n *\r\n * Semi-controlled: `activePage` is mutable — it updates internally on click AND\r\n * emits an `update` event so the consumer can sync external state.\r\n *\r\n * Usage:\r\n *   <diwa-pagination total-items-count=\"500\" items-per-page=\"25\" active-page=\"1\"\r\n *     onupdate={e => setPage(e.detail.page)} />\r\n *\r\n * Source lineage:\n *   components/src/components/pagination/pagination.tsx\n */\r\n@Component({\r\n  tag: 'diwa-pagination',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaPagination {\r\n  @Element() host!: HTMLDiwaPaginationElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (`light` / `dark`). */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Total number of items in the data set. */\r\n  @Prop() totalItemsCount: number = 1;\r\n\r\n  /** Number of items shown per page. */\r\n  @Prop() itemsPerPage: number = 1;\r\n\r\n  /**\r\n   * Index of the currently active page (1-based).\r\n   * Semi-controlled: mutates internally on click and emits `update`.\r\n   */\r\n  @Prop({ mutable: true }) activePage: number = 1;\r\n\r\n  /** Show a direct link to the last page (in addition to the prev/next buttons). */\r\n  @Prop() showLastPage: boolean = true;\r\n\r\n  /**\r\n   * Override the default aria-label wording for prev/next/page buttons and the nav element.\r\n   * Useful for localisation.\r\n   * Default: `{ root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page' }`\r\n   */\r\n  @Prop() intl: PaginationIntl = {\r\n    root: 'Pagination',\r\n    prev: 'Previous page',\r\n    next: 'Next page',\r\n    page: 'Page',\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user navigates to a different page.\r\n   *\r\n   * React consumers: use the lowercase `onupdate` prop:\r\n   * ```jsx\r\n   * <diwa-pagination onupdate={e => setPage(e.detail.page)} />\r\n   * ```\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<PaginationUpdateEventDetail>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleClick(page: number): void {\r\n    if (page !== this.activePage) {\r\n      this.update.emit({ page, previousPage: this.activePage });\r\n      this.activePage = page;\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const pageTotal = getTotalPages(this.totalItemsCount, this.itemsPerPage);\r\n    const currentPage = getCurrentActivePage(this.activePage, pageTotal);\r\n    const items = createPaginationItems({\r\n      activePage: currentPage,\r\n      pageTotal,\r\n      showLastPage: this.showLastPage,\r\n    });\r\n\r\n    const intl = this.intl ?? {};\r\n    const rootLabel = intl.root ?? 'Pagination';\r\n    const prevLabel = intl.prev ?? 'Previous page';\r\n    const nextLabel = intl.next ?? 'Next page';\r\n    const pageLabel = intl.page ?? 'Page';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <nav aria-label={rootLabel} class=\"nav\">\r\n          <ul class=\"list\">\r\n            {items.map((item, index) => {\r\n              const { type, isActive, value } = item;\r\n\r\n              if (type === ItemType.PREVIOUS) {\r\n                return (\r\n                  <li key=\"prev\">\r\n                    <button\r\n                      class=\"btn\"\r\n                      disabled={!isActive}\r\n                      aria-label={prevLabel}\r\n                      onClick={() => isActive && this.handleClick(value!)}\r\n                    >\r\n                      {/* Lucide ChevronLeft 16×16 */}\r\n                      <svg\r\n                        width=\"16\"\r\n                        height=\"16\"\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                        <polyline points=\"15 18 9 12 15 6\" />\r\n                      </svg>\r\n                    </button>\r\n                  </li>\r\n                );\r\n              }\r\n\r\n              if (type === ItemType.NEXT) {\r\n                return (\r\n                  <li key=\"next\">\r\n                    <button\r\n                      class=\"btn\"\r\n                      disabled={!isActive}\r\n                      aria-label={nextLabel}\r\n                      onClick={() => isActive && this.handleClick(value!)}\r\n                    >\r\n                      {/* Lucide ChevronRight 16×16 */}\r\n                      <svg\r\n                        width=\"16\"\r\n                        height=\"16\"\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                        <polyline points=\"9 18 15 12 9 6\" />\r\n                      </svg>\r\n                    </button>\r\n                  </li>\r\n                );\r\n              }\r\n\r\n              if (type === ItemType.ELLIPSIS) {\r\n                return (\r\n                  <li key={`ellipsis-${index}`}>\r\n                    <span class=\"ellipsis\" aria-hidden=\"true\">\r\n                      …\r\n                    </span>\r\n                  </li>\r\n                );\r\n              }\r\n\r\n              // ItemType.PAGE\r\n              return (\r\n                <li key={value}>\r\n                  <button\r\n                    class=\"btn\"\r\n                    aria-label={`${pageLabel} ${value}`}\r\n                    aria-current={isActive ? 'page' : undefined}\r\n                    onClick={() => this.handleClick(value!)}\r\n                  >\r\n                    {value}\r\n                  </button>\r\n                </li>\r\n              );\r\n            })}\r\n          </ul>\r\n        </nav>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/diwa-components/p-4a84fee8.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as e,H as i,g as a}from"./p-ed4017f0.js";import{g as h}from"./p-35c7c864.js";import"./p-70bbb21a.js";const d=class{constructor(e){s(this,e);this.change=t(this,"change",7);this.input=t(this,"input",7);this.blur=t(this,"blur",3);this.focus=t(this,"focus",3);this._hasStart=false;this._hasEnd=false;this.label="";this.description="";this.message="";this.state="none";this.name="";this.value="";this.placeholder="";this.disabled=false;this.required=false;this.readonly=false;this.hideLabel=false;this.compact=false;this.theme="dark";this.showClearButton=true;this.handleInput=s=>{this.value=s.target.value;this.input.emit(this.value)};this.handleChange=s=>{this.value=s.target.value;this.change.emit(this.value)};this.handleBlur=s=>{this.blur.emit(s)};this.handleFocus=s=>{this.focus.emit(s)};this.handleClear=()=>{this.value="";this.input.emit("");this.change.emit("")}}connectedCallback(){this._hasStart=!!this.el.querySelector('[slot="start"]');this._hasEnd=!!this.el.querySelector('[slot="end"]')}render(){const s="input";const t="desc";const a="msg";const d=this.showClearButton&&!!this.value&&!this.disabled&&!this.readonly;return e(i,{key:"3f49df473469b199d44e240572e09bb9e159cfd3","data-theme":this.theme},e("style",{key:"3dd2dcf3d7291af66789afc82d5d5deb6c56a27c",innerHTML:h(this.state,this.disabled,this.readonly,this.compact,this._hasStart,this._hasEnd,d)}),e("div",{key:"388430466029a911917ef8f61697e72abd46239c",class:"root"},!this.hideLabel&&this.label&&e("div",{key:"3b6a12eca69a7efe4a3701f78c8e9892edd752f2",class:"label-row"},e("label",{key:"66bac4991da6ba5a758717d3b84bb1ab234b4cd9",class:"label",htmlFor:s},this.label,this.required&&e("span",{key:"30275a5cbe643516887f55b377ae8b0e0a9d6387",class:"required","aria-hidden":"true"}," *")),e("slot",{key:"548dc2886eb1d0dfe6987ddf5ce5227aec30b90c",name:"label-after"})),e("div",{key:"6f746707baccfa7c3668c26e53d40af2c6ffd6b3",class:"input-wrapper"},this._hasStart&&e("div",{key:"675fcd21531dbd7bc91c1580ce41ffe3542cbd07",class:"slot-start"},e("slot",{key:"913ed407b729f851f719c5bf7e299eeffbb2bf4c",name:"start"})),e("input",{key:"b751aedd290db42d8d297b2e58d355b8fb0a5032",id:s,class:"input",type:"search",name:this.name||undefined,value:this.value,placeholder:this.placeholder||undefined,disabled:this.disabled,required:this.required,readOnly:this.readonly,autocomplete:this.autoComplete,"aria-label":this.hideLabel&&this.label?this.label:undefined,"aria-invalid":this.state==="error"?"true":undefined,"aria-required":this.required?"true":undefined,"aria-describedby":this.message?a:this.description?t:undefined,onInput:this.handleInput,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus}),this._hasEnd&&e("div",{key:"eafa27ed273229c774e1c6e1bd92ba14a499418c",class:"slot-end"},e("slot",{key:"910843c5913cb508fdb66c0aa171e4b1e05be583",name:"end"})),d&&e("button",{key:"676246830cf3a5701d6820082af813cd55b76d61",class:"suffix-btn",type:"button","aria-label":"Clear search",onClick:this.handleClear},e("diwa-icon",{key:"a03bd3b761dec94a4659f55780cabf47b5be9084",name:"x",size:14}))),!this.message&&this.description&&e("p",{key:"57c2a7184df72cd5fc09ccb9e504638cbec520ed",id:t,class:"description"},this.description),this.message&&e("p",{key:"a224ae6925af433f90a21dc811b8376ccb4fa176",id:a,class:"message"},this.message)))}static get delegatesFocus(){return true}get el(){return a(this)}};export{d as diwa_input_search};
+//# sourceMappingURL=p-4a84fee8.entry.js.map

package/dist/diwa-components/p-4a84fee8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DiwaInputSearch","constructor","hostRef","this","_hasStart","_hasEnd","label","description","message","state","name","value","placeholder","disabled","required","readonly","hideLabel","compact","theme","showClearButton","handleInput","e","target","input","emit","handleChange","change","handleBlur","blur","handleFocus","focus","handleClear","connectedCallback","el","querySelector","render","inputId","descId","msgId","hasSuffix","h","Host","key","innerHTML","getComponentCss","class","htmlFor","id","type","undefined","readOnly","autocomplete","autoComplete","onInput","onChange","onBlur","onFocus","onClick","size"],"sources":["src/components/diwa-input-search/diwa-input-search.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-search-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-search',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputSearch {\r\n  @Element() el!: HTMLElement;\r\n  @State() private _hasStart = false;\r\n  @State() private _hasEnd = false;\r\n\r\n  @Prop() label: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() state: InputFieldState = 'none';\r\n  @Prop() name: string = '';\r\n  @Prop({ mutable: true, reflect: false }) value: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() compact: boolean = false;\r\n  @Prop() autoComplete?: string;\r\n  @Prop() theme: Theme = 'dark';\r\n\r\n  /** Show the clear (×) button when the field has a value. */\r\n  @Prop() showClearButton: boolean = true;\r\n\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n  @Event({ bubbles: false }) blur!: EventEmitter<FocusEvent>;\r\n  @Event({ bubbles: false }) focus!: EventEmitter<FocusEvent>;\r\n\r\n  connectedCallback(): void {\r\n    this._hasStart = !!this.el.querySelector('[slot=\"start\"]');\r\n    this._hasEnd = !!this.el.querySelector('[slot=\"end\"]');\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).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 HTMLInputElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => { this.blur.emit(e); };\r\n  private handleFocus = (e: FocusEvent): void => { this.focus.emit(e); };\r\n\r\n  private handleClear = (): void => {\r\n    this.value = '';\r\n    this.input.emit('');\r\n    this.change.emit('');\r\n  };\r\n\r\n  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n    const hasSuffix = this.showClearButton && !!this.value && !this.disabled && !this.readonly;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, hasSuffix)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={inputId}>\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=\"input-wrapper\">\r\n            {this._hasStart && <div class=\"slot-start\"><slot name=\"start\" /></div>}\r\n            <input\r\n              id={inputId}\r\n              class=\"input\"\r\n              type=\"search\"\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              autocomplete={this.autoComplete}\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              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n            {hasSuffix && (\r\n              <button\r\n                class=\"suffix-btn\"\r\n                type=\"button\"\r\n                aria-label=\"Clear search\"\r\n                onClick={this.handleClear}\r\n              >\r\n                <diwa-icon name=\"x\" size={14} />\r\n              </button>\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"],"mappings":"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","ignoreList":[]}

package/dist/diwa-components/p-4ac5a26e.entry.js

@@ -0,0 +1,2 @@
+import{r as n,c as e,h as i,H as t,g as a}from"./p-ed4017f0.js";import{g as s,a as o}from"./p-70bbb21a.js";const d=()=>`\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Option row ─────────────────────────────────────────────────────── */\n\n  .option {\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-3);\n    padding: var(--diwa-space-2) var(--diwa-space-3);\n    min-height: var(--diwa-select-option-min-height);\n    box-sizing: border-box;\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n    color: var(--diwa-text-primary);\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-font-weight-normal);\n    line-height: 1.4;\n    border-radius: var(--diwa-radius-sm);\n    transition: background-color var(--diwa-transition-fast);\n  }\n\n  ${s(".option")}\n\n  /* ── Check mark ─────────────────────────────────────────────────────── */\n\n  .check {\n    flex-shrink: 0;\n    width: var(--diwa-icon-size-md);\n    height: var(--diwa-icon-size-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--diwa-accent);\n    font-size: var(--diwa-font-size-base);\n    line-height: 1;\n    visibility: hidden;\n  }\n\n  /* ── Selected state ─────────────────────────────────────────────────── */\n\n  :host([selected]) .check {\n    visibility: visible;\n  }\n\n  /* ── Highlighted (keyboard / hover) ─────────────────────────────────── */\n\n  :host([highlighted]) .option {\n    background-color: var(--diwa-bg-hover);\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .option:hover {\n      background-color: var(--diwa-bg-hover);\n    }\n  }\n\n  /* ── Label text ─────────────────────────────────────────────────────── */\n\n  .label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ── Disabled ───────────────────────────────────────────────────────── */\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  :host([disabled]) .option {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${o(".option")}\n`;const r=class{constructor(i){n(this,i);this.diwaSelectOptionUpdate=e(this,"diwaSelectOptionUpdate",7);this.disabled=false;this.selected=false;this.highlighted=false;this.theme="dark";this.handleClick=()=>{if(this.disabled)return;this.diwaSelectOptionUpdate.emit({value:this.value})};this.handleKeyDown=n=>{if(this.disabled)return;if(n.key==="Enter"||n.key===" "){n.preventDefault();this.diwaSelectOptionUpdate.emit({value:this.value})}}}async setFocus(){var n;(n=this.optionEl)===null||n===void 0?void 0:n.focus()}render(){return i(t,{key:"a247949923bad9061915c5e2c85713e396ee6503","data-theme":this.theme},i("style",{key:"5e979d5a31b9d1bd3f745de3613282114be80402",innerHTML:d()}),i("div",{key:"a72bd683daec24c92c3e327c1d83f49f383dafde",class:"option",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":undefined,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,ref:n=>this.optionEl=n,part:"option"},i("span",{key:"38bb5d53e00fc6bac010da4f1096469405d9e782",class:"check","aria-hidden":"true",part:"check"},"✓"),i("span",{key:"7d15f4d7e6db5c56dcbcb5a6c1feff7128550209",class:"label",part:"label"},i("slot",{key:"a09a35aa00ed8c417e1ad6a514c9ba548685887b"}))))}static get delegatesFocus(){return true}get host(){return a(this)}};export{r as diwa_select_option};
+//# sourceMappingURL=p-4ac5a26e.entry.js.map

package/dist/diwa-components/p-4ac5a26e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getComponentCss","getFocusStyle","getReducedMotionStyle","DiwaSelectOption","constructor","hostRef","this","disabled","selected","highlighted","theme","handleClick","diwaSelectOptionUpdate","emit","value","handleKeyDown","e","key","preventDefault","setFocus","_a","optionEl","focus","render","h","Host","innerHTML","class","role","undefined","tabIndex","onClick","onKeyDown","ref","el","part"],"sources":["src/components/diwa-select-option/diwa-select-option-styles.ts","src/components/diwa-select-option/diwa-select-option.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Option row ─────────────────────────────────────────────────────── */\r\n\r\n  .option {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-2) var(--diwa-space-3);\r\n    min-height: var(--diwa-select-option-min-height);\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    -webkit-font-smoothing: antialiased;\r\n    color: var(--diwa-text-primary);\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-normal);\r\n    line-height: 1.4;\r\n    border-radius: var(--diwa-radius-sm);\r\n    transition: background-color var(--diwa-transition-fast);\r\n  }\r\n\r\n  ${getFocusStyle('.option')}\r\n\r\n  /* ── Check mark ─────────────────────────────────────────────────────── */\r\n\r\n  .check {\r\n    flex-shrink: 0;\r\n    width: var(--diwa-icon-size-md);\r\n    height: var(--diwa-icon-size-md);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: var(--diwa-accent);\r\n    font-size: var(--diwa-font-size-base);\r\n    line-height: 1;\r\n    visibility: hidden;\r\n  }\r\n\r\n  /* ── Selected state ─────────────────────────────────────────────────── */\r\n\r\n  :host([selected]) .check {\r\n    visibility: visible;\r\n  }\r\n\r\n  /* ── Highlighted (keyboard / hover) ─────────────────────────────────── */\r\n\r\n  :host([highlighted]) .option {\n    background-color: var(--diwa-bg-hover);\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .option:hover {\n      background-color: var(--diwa-bg-hover);\n    }\n  }\n\r\n  /* ── Label text ─────────────────────────────────────────────────────── */\r\n\r\n  .label {\r\n    flex: 1;\r\n    min-width: 0;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  /* ── Disabled ───────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) {\r\n    pointer-events: none;\r\n  }\r\n\r\n  :host([disabled]) .option {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.option')}\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Method, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-select-option-styles';\r\n\r\n/**\r\n * @component diwa-select-option\r\n *\r\n * Individual option element for use inside <diwa-select>.\r\n * Renders a row with a checkmark indicator and label text.\r\n *\r\n * Not intended for standalone use — must be slotted into <diwa-select>.\r\n *\r\n * Provide an option without a value to allow deselection / show a placeholder:\r\n *   <diwa-select-option>Please select…</diwa-select-option>\r\n *\r\n * @slot default — Option label text (plain text or inline phrasing content)\r\n */\r\n@Component({\r\n  tag: 'diwa-select-option',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaSelectOption {\r\n  @Element() host!: HTMLDiwaSelectOptionElement;\r\n\r\n  /** The value submitted/emitted when this option is selected. */\r\n  @Prop({ reflect: true }) value?: string;\r\n\r\n  /** Disables the option — it cannot be selected. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Whether the option is currently selected.\r\n   * Maintained by the parent <diwa-select>.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) selected: boolean = false;\r\n\r\n  /**\r\n   * Whether the option is currently keyboard-highlighted.\r\n   * Set exclusively by the parent component.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) highlighted: boolean = false;\r\n\r\n  /** Theme — inherited from the parent diwa-select. */\r\n  @Prop({ mutable: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Emitted when the user clicks or presses Enter on the option.\r\n   * Bubbles and crosses Shadow DOM so the parent can catch it via @Listen.\r\n   */\r\n  @Event({ bubbles: true, composed: true })\r\n  diwaSelectOptionUpdate!: EventEmitter<{ value: string | undefined }>;\r\n\r\n  /** Focuses the inner option element. */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    this.optionEl?.focus();\r\n  }\r\n\r\n  private optionEl?: HTMLDivElement;\r\n\r\n  private handleClick = (): void => {\r\n    if (this.disabled) return;\r\n    this.diwaSelectOptionUpdate.emit({ value: this.value });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent): void => {\r\n    if (this.disabled) return;\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      e.preventDefault();\r\n      this.diwaSelectOptionUpdate.emit({ value: this.value });\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <div\r\n          class=\"option\"\r\n          role=\"option\"\r\n          aria-selected={this.selected ? 'true' : 'false'}\r\n          aria-disabled={this.disabled ? 'true' : undefined}\r\n          tabIndex={this.disabled ? -1 : 0}\r\n          onClick={this.handleClick}\r\n          onKeyDown={this.handleKeyDown}\r\n          ref={(el) => (this.optionEl = el as HTMLDivElement)}\r\n          part=\"option\"\r\n        >\r\n          <span class=\"check\" aria-hidden=\"true\" part=\"check\">✓</span>\r\n          <span class=\"label\" part=\"label\">\r\n            <slot />\r\n          </span>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"2GAEO,MAAMA,EAAkB,IAAc,44BAiCzCC,EAAc,k3CA0DdC,EAAsB,e,MCxEbC,EAAgB,MAJ7B,WAAAC,CAAAC,G,yEAW2BC,KAAAC,SAAoB,MAMLD,KAAAE,SAAoB,MAMpBF,KAAAG,YAAuB,MAGtCH,KAAAI,MAAe,OAiBhCJ,KAAAK,YAAc,KACpB,GAAIL,KAAKC,SAAU,OACnBD,KAAKM,uBAAuBC,KAAK,CAAEC,MAAOR,KAAKQ,OAAQ,EAGjDR,KAAAS,cAAiBC,IACvB,GAAIV,KAAKC,SAAU,OACnB,GAAIS,EAAEC,MAAQ,SAAWD,EAAEC,MAAQ,IAAK,CACtCD,EAAEE,iBACFZ,KAAKM,uBAAuBC,KAAK,CAAEC,MAAOR,KAAKQ,O,GAfnD,cAAMK,G,OACJC,EAAAd,KAAKe,YAAQ,MAAAD,SAAA,SAAAA,EAAEE,O,CAkBjB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAR,IAAA,wDAAaX,KAAKI,OACrBc,EAAA,SAAAP,IAAA,2CAAOS,UAAW1B,MAClBwB,EAAA,OAAAP,IAAA,2CACEU,MAAM,SACNC,KAAK,SAAQ,gBACEtB,KAAKE,SAAW,OAAS,QAAO,gBAChCF,KAAKC,SAAW,OAASsB,UACxCC,SAAUxB,KAAKC,UAAY,EAAI,EAC/BwB,QAASzB,KAAKK,YACdqB,UAAW1B,KAAKS,cAChBkB,IAAMC,GAAQ5B,KAAKe,SAAWa,EAC9BC,KAAK,UAELX,EAAA,QAAAP,IAAA,2CAAMU,MAAM,QAAO,cAAa,OAAOQ,KAAK,SAAO,KACnDX,EAAA,QAAAP,IAAA,2CAAMU,MAAM,QAAQQ,KAAK,SACvBX,EAAA,QAAAP,IAAA,+C","ignoreList":[]}

package/dist/diwa-components/p-4ff58224.entry.js

@@ -0,0 +1,2 @@
+import{r as n,h as a,H as e,g as r}from"./p-ed4017f0.js";import{g as t,a as i}from"./p-70bbb21a.js";const o=()=>`\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-flex;\n    position: relative;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Inner element (the real <a> or <span> in Shadow DOM) ───────────── */\n\n  .inner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--diwa-space-2);\n\n    height: var(--diwa-button-height, 40px);\n    padding: 0 var(--diwa-button-padding-x, 16px);\n    box-sizing: border-box;\n    width: 100%;\n\n    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));\n    border: var(--diwa-border-width-thin) solid transparent;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));\n    font-family: inherit;\n    line-height: 1;\n    white-space: nowrap;\n    text-decoration: none;\n\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n    position: relative;\n\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\n\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${t(".inner")}\n\n  /* ── Variant: primary ───────────────────────────────────────────────── */\n\n  :host([variant="primary"]) .inner {\n    background-color: var(--diwa-button-bg, var(--diwa-accent));\n    color: var(--diwa-button-color, var(--diwa-text-inverse));\n    border-color: transparent;\n  }\n\n  :host([variant="primary"]) .inner:hover {\n    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\n  }\n\n  :host([variant="primary"]) .inner:active {\n    background-color: var(--diwa-accent-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: secondary ─────────────────────────────────────────────── */\n\n  :host([variant="secondary"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-accent);\n    border-color: var(--diwa-accent);\n  }\n\n  :host([variant="secondary"]) .inner:hover {\n    background-color: var(--diwa-accent-bg);\n    border-color: var(--diwa-accent-hover);\n  }\n\n  :host([variant="secondary"]) .inner:active {\n    background-color: var(--diwa-accent-muted);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: ghost ─────────────────────────────────────────────────── */\n\n  :host([variant="ghost"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-text-secondary);\n    border-color: transparent;\n  }\n\n  :host([variant="ghost"]) .inner:hover {\n    background-color: var(--diwa-bg-hover);\n    color: var(--diwa-text-primary);\n  }\n\n  :host([variant="ghost"]) .inner:active {\n    background-color: var(--diwa-bg-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: danger ────────────────────────────────────────────────── */\n\n  :host([variant="danger"]) .inner {\n    background-color: var(--diwa-danger);\n    color: var(--diwa-text-inverse);\n    border-color: transparent;\n  }\n\n  :host([variant="danger"]) .inner:hover {\n    background-color: var(--diwa-danger-hover);\n  }\n\n  :host([variant="danger"]) .inner:active {\n    background-color: var(--diwa-danger-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Compact ────────────────────────────────────────────────────────── */\n\n  :host([compact]) .inner {\n    height: var(--diwa-button-height-sm, 32px);\n    padding: 0 var(--diwa-button-padding-x-sm, 10px);\n    font-size: var(--diwa-font-size-md);\n  }\n\n  /* ── State: disabled ────────────────────────────────────────────────── */\n\n  :host([disabled]) .inner {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ── Icon wrapper ───────────────────────────────────────────────────── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    line-height: 0;\n  }\n\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\n\n  .label--hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /* ── Icon-only mode ─────────────────────────────────────────────────── */\n\n  :host([hide-label]) .inner {\n    width: var(--diwa-button-height, 40px);\n    padding: 0;\n  }\n\n  :host([hide-label][compact]) .inner {\n    width: var(--diwa-button-height-sm, 32px);\n  }\n\n  /* ── Span (no href) — not interactive ───────────────────────────────── */\n\n  span.inner {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${i(".inner",".label",".icon")}\n`;const d=class{constructor(a){n(this,a);this.theme="dark";this.variant="primary";this.target="_self";this.icon="none";this.hideLabel=false;this.compact=false;this.disabled=false}render(){var n;const r=!!this.href;const t=r?"a":"span";const i=this.icon!=="none";const d=this.compact?16:20;const s=r?Object.assign(Object.assign({href:this.href,target:this.target,download:this.download,rel:(n=this.rel)!==null&&n!==void 0?n:this.target==="_blank"?"noopener noreferrer":undefined},this.label?{"aria-label":this.label}:{}),this.disabled?{"aria-disabled":"true",tabIndex:-1}:{}):{};return a(e,{key:"776e06394ce0ae72d3b17839f3b6c03a8b9d8d87","data-theme":this.theme},a("style",{key:"c839450ec4fe0c4e887b0ca0ca20d98b72353c18",innerHTML:o()}),a(t,Object.assign({key:"ffcf734b9978340a43f6e85fbbce99692a1a948e",class:"inner"},s,{part:"base"}),i&&a("span",{key:"8eaa121076b37556d334d441cf538b878bc682b5",class:"icon","aria-hidden":"true"},a("diwa-icon",{key:"69b02d7412041c9f3ec276f84b2bdecc1882725b",name:this.icon,size:d})),a("span",{key:"99ffcd1bd80c6ddabb6cd99b75ce6c83f94afe00",class:`label${this.hideLabel?" label--hidden":""}`,part:"label"},a("slot",{key:"8057fd1012fbd5d5651fb2fe82f6d1fc0366a240"}))))}static get delegatesFocus(){return true}get host(){return r(this)}};export{d as diwa_link};
+//# sourceMappingURL=p-4ff58224.entry.js.map

package/dist/diwa-components/p-4ff58224.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getComponentCss","getFocusStyle","getReducedMotionStyle","DiwaLink","constructor","hostRef","this","theme","variant","target","icon","hideLabel","compact","disabled","render","isAnchor","href","Tag","hasIcon","iconSize","anchorProps","download","rel","_a","undefined","label","tabIndex","h","Host","key","innerHTML","Object","assign","class","part","name","size"],"sources":["src/components/diwa-link/diwa-link-styles.ts","src/components/diwa-link/diwa-link.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\n\nexport const getComponentCss = (): string => `\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-flex;\n    position: relative;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Inner element (the real <a> or <span> in Shadow DOM) ───────────── */\n\n  .inner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--diwa-space-2);\n\n    height: var(--diwa-button-height, 40px);\n    padding: 0 var(--diwa-button-padding-x, 16px);\n    box-sizing: border-box;\n    width: 100%;\n\n    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));\n    border: var(--diwa-border-width-thin) solid transparent;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));\n    font-family: inherit;\n    line-height: 1;\n    white-space: nowrap;\n    text-decoration: none;\n\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n    position: relative;\n\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\n\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${getFocusStyle('.inner')}\n\n  /* ── Variant: primary ───────────────────────────────────────────────── */\n\n  :host([variant=\"primary\"]) .inner {\n    background-color: var(--diwa-button-bg, var(--diwa-accent));\n    color: var(--diwa-button-color, var(--diwa-text-inverse));\n    border-color: transparent;\n  }\n\n  :host([variant=\"primary\"]) .inner:hover {\n    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\n  }\n\n  :host([variant=\"primary\"]) .inner:active {\n    background-color: var(--diwa-accent-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: secondary ─────────────────────────────────────────────── */\n\n  :host([variant=\"secondary\"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-accent);\n    border-color: var(--diwa-accent);\n  }\n\n  :host([variant=\"secondary\"]) .inner:hover {\n    background-color: var(--diwa-accent-bg);\n    border-color: var(--diwa-accent-hover);\n  }\n\n  :host([variant=\"secondary\"]) .inner:active {\n    background-color: var(--diwa-accent-muted);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: ghost ─────────────────────────────────────────────────── */\n\n  :host([variant=\"ghost\"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-text-secondary);\n    border-color: transparent;\n  }\n\n  :host([variant=\"ghost\"]) .inner:hover {\n    background-color: var(--diwa-bg-hover);\n    color: var(--diwa-text-primary);\n  }\n\n  :host([variant=\"ghost\"]) .inner:active {\n    background-color: var(--diwa-bg-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: danger ────────────────────────────────────────────────── */\n\n  :host([variant=\"danger\"]) .inner {\n    background-color: var(--diwa-danger);\n    color: var(--diwa-text-inverse);\n    border-color: transparent;\n  }\n\n  :host([variant=\"danger\"]) .inner:hover {\n    background-color: var(--diwa-danger-hover);\n  }\n\n  :host([variant=\"danger\"]) .inner:active {\n    background-color: var(--diwa-danger-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Compact ────────────────────────────────────────────────────────── */\n\n  :host([compact]) .inner {\n    height: var(--diwa-button-height-sm, 32px);\n    padding: 0 var(--diwa-button-padding-x-sm, 10px);\n    font-size: var(--diwa-font-size-md);\n  }\n\n  /* ── State: disabled ────────────────────────────────────────────────── */\n\n  :host([disabled]) .inner {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ── Icon wrapper ───────────────────────────────────────────────────── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    line-height: 0;\n  }\n\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\n\n  .label--hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /* ── Icon-only mode ─────────────────────────────────────────────────── */\n\n  :host([hide-label]) .inner {\n    width: var(--diwa-button-height, 40px);\n    padding: 0;\n  }\n\n  :host([hide-label][compact]) .inner {\n    width: var(--diwa-button-height-sm, 32px);\n  }\n\n  /* ── Span (no href) — not interactive ───────────────────────────────── */\n\n  span.inner {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${getReducedMotionStyle('.inner', '.label', '.icon')}\n`;\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport type { LinkVariant, LinkTarget } from \"./types\";\nimport type { Theme } from \"../../utils/styles\";\nimport { getComponentCss } from \"./diwa-link-styles\";\n\n/**\n * @component diwa-link\n *\n * A fully accessible link primitive. Renders as <a> when href is provided,\n * otherwise as a non-interactive <span>. Mirrors the PDS p-link component.\n *\n * Usage:\n *   <diwa-link href=\"/home\">Home</diwa-link>\n *   <diwa-link href=\"/docs\" variant=\"secondary\" target=\"_blank\">Docs</diwa-link>\n *   <diwa-link href=\"/about\" variant=\"ghost\" icon=\"arrow-right\">About</diwa-link>\n *\n * @slot default — Link label text\n */\n@Component({\n  tag: \"diwa-link\",\n  shadow: { delegatesFocus: true },\n})\nexport class DiwaLink {\n  @Element() host!: HTMLDiwaLinkElement;\n\n  /** Per-component theme override. */\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\n\n  /** Visual style variant. */\n  @Prop({ reflect: true }) variant: LinkVariant = \"primary\";\n\n  /** The URL the link points to. When set, renders as <a>. */\n  @Prop() href?: string;\n\n  /** Target attribute — where to open the linked URL. */\n  @Prop() target: LinkTarget = \"_self\";\n\n  /** Native download attribute for triggering file downloads. */\n  @Prop() download?: string;\n\n  /** Relationship between the current document and the linked resource. */\n  @Prop() rel?: string;\n\n  /** Lucide icon name (kebab-case, e.g. \"arrow-right\"), or \"none\" to hide. */\n  @Prop() icon: string = \"none\";\n\n  /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */\n  @Prop({ reflect: true }) hideLabel: boolean = false;\n\n  /** Compact (smaller) size variant. */\n  @Prop({ reflect: true }) compact: boolean = false;\n\n  /** Accessible aria-label override — useful for icon-only links. */\n  @Prop() label?: string;\n\n  /** Disabled state. Sets aria-disabled and prevents interaction. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const isAnchor = !!this.href;\n    const Tag = isAnchor ? (\"a\" as any) : (\"span\" as any);\n    const hasIcon = this.icon !== \"none\";\n    const iconSize = this.compact ? 16 : 20;\n\n    const anchorProps = isAnchor\n      ? {\n          href: this.href,\n          target: this.target,\n          download: this.download,\n          rel:\n            this.rel ??\n            (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          ...(this.label ? { \"aria-label\": this.label } : {}),\n          ...(this.disabled ? { \"aria-disabled\": \"true\", tabIndex: -1 } : {}),\n        }\n      : {};\n\n    return (\n      <Host data-theme={this.theme}>\n        <style innerHTML={getComponentCss()} />\n        <Tag class=\"inner\" {...anchorProps} part=\"base\">\n          {hasIcon && (\n            <span class=\"icon\" aria-hidden=\"true\">\n              <diwa-icon name={this.icon} size={iconSize} />\n            </span>\n          )}\n          <span\n            class={`label${this.hideLabel ? \" label--hidden\" : \"\"}`}\n            part=\"label\"\n          >\n            <slot />\n          </span>\n        </Tag>\n      </Host>\n    );\n  }\n}"],"mappings":"oGAEO,MAAMA,EAAkB,IAAc,0zCAiDzCC,EAAc,u9GAmIdC,EAAsB,SAAU,SAAU,a,MChKjCC,EAAQ,MAJrB,WAAAC,CAAAC,G,UAQ2BC,KAAAC,MAAe,OAGfD,KAAAE,QAAuB,UAMxCF,KAAAG,OAAqB,QASrBH,KAAAI,KAAe,OAGEJ,KAAAK,UAAqB,MAGrBL,KAAAM,QAAmB,MAMnBN,KAAAO,SAAoB,K,CAE7C,MAAAC,G,MACE,MAAMC,IAAaT,KAAKU,KACxB,MAAMC,EAAMF,EAAY,IAAe,OACvC,MAAMG,EAAUZ,KAAKI,OAAS,OAC9B,MAAMS,EAAWb,KAAKM,QAAU,GAAK,GAErC,MAAMQ,EAAcL,E,6BAEdC,KAAMV,KAAKU,KACXP,OAAQH,KAAKG,OACbY,SAAUf,KAAKe,SACfC,KACEC,EAAAjB,KAAKgB,OAAG,MAAAC,SAAA,EAAAA,EACPjB,KAAKG,SAAW,SAAW,sBAAwBe,WAClDlB,KAAKmB,MAAQ,CAAE,aAAcnB,KAAKmB,OAAU,IAC5CnB,KAAKO,SAAW,CAAE,gBAAiB,OAAQa,UAAW,GAAM,IAElE,GAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,wDAAavB,KAAKC,OACrBoB,EAAA,SAAAE,IAAA,2CAAOC,UAAW9B,MAClB2B,EAACV,EAAGc,OAAAC,OAAA,CAAAH,IAAA,2CAACI,MAAM,SAAYb,EAAW,CAAEc,KAAK,SACtChB,GACCS,EAAA,QAAAE,IAAA,2CAAMI,MAAM,OAAM,cAAa,QAC7BN,EAAA,aAAAE,IAAA,2CAAWM,KAAM7B,KAAKI,KAAM0B,KAAMjB,KAGtCQ,EAAA,QAAAE,IAAA,2CACEI,MAAO,QAAQ3B,KAAKK,UAAY,iBAAmB,KACnDuB,KAAK,SAELP,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

package/dist/diwa-components/p-51673c06.entry.js

@@ -0,0 +1,2 @@
+import{r as n,c as a,h as t,H as e,g as i}from"./p-ed4017f0.js";import{g as r,a as s}from"./p-70bbb21a.js";const o=()=>`\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .bar {\n    display: flex;\n    align-items: flex-end;\n    gap: 0;\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .bar::-webkit-scrollbar {\n    display: none;\n  }\n\n  .tab-btn {\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--diwa-touch-target-min-size, 44px);\n    padding: var(--diwa-space-4) var(--diwa-space-7);\n    border: none;\n    border-bottom: var(--diwa-border-width-base) solid transparent;\n    background: transparent;\n    font-size: var(--diwa-font-size-base);\n    font-family: inherit;\n    white-space: nowrap;\n    cursor: pointer;\n    margin-bottom: -1px;\n    transition: color var(--diwa-transition-base), border-color var(--diwa-transition-base);\n    color: var(--diwa-text-secondary);\n    font-weight: var(--diwa-font-weight-medium);\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tab-btn:hover {\n      color: var(--diwa-text-primary);\n    }\n  }\n\n  .tab-btn[aria-selected="true"] {\n    color: var(--diwa-accent);\n    border-bottom-color: var(--diwa-accent);\n    font-weight: var(--diwa-font-weight-medium);\n  }\n\n  ${r(".tab-btn")}\n\n  .panels {\n    padding-top: var(--diwa-space-4);\n  }\n\n  ${s(".tab-btn")}\n`;const d=class{constructor(t){n(this,t);this.update=a(this,"update",1);this.theme="dark";this.activeTabIndex=0}handleIndexChange(){this.syncItems()}componentDidLoad(){this.syncItems()}componentDidUpdate(){this.syncItems()}getItems(){return Array.from(this.host.querySelectorAll("diwa-tabs-item"))}syncItems(){const n=this.getItems();n.forEach(((n,a)=>{n.active=a===this.activeTabIndex;n.setAttribute("id",`panel-${a}`)}))}handleTabClick(n){if(n===this.activeTabIndex)return;this.activeTabIndex=n;this.update.emit({activeTabIndex:n});this.syncItems()}render(){const n=this.getItems();return t(e,{key:"fc8d9535c8fc57e335842f9687e864679320a5ea","data-theme":this.theme},t("style",{key:"471a5b372635bef38e38198b5793b3e3f96cb17b",innerHTML:o()}),t("div",{key:"0321394c0b6cdd768025d9fd7cee711a05197cfa",class:"bar",role:"tablist"},n.map(((n,a)=>t("button",{class:"tab-btn",key:a,role:"tab",type:"button","aria-selected":a===this.activeTabIndex?"true":"false","aria-controls":`panel-${a}`,tabindex:a===this.activeTabIndex?0:-1,onClick:()=>this.handleTabClick(a)},n.label||`Tab ${a+1}`)))),t("div",{key:"a1480ac6ff722ffc09449141e79070801e5886c7",class:"panels"},t("slot",{key:"98c11b57681a9e9831c233adcf2be283c5fdb0b7"})))}get host(){return i(this)}static get watchers(){return{activeTabIndex:["handleIndexChange"]}}};export{d as diwa_tabs};
+//# sourceMappingURL=p-51673c06.entry.js.map

package/dist/diwa-components/p-51673c06.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getComponentCss","getFocusStyle","getReducedMotionStyle","DiwaTabs","constructor","hostRef","this","theme","activeTabIndex","handleIndexChange","syncItems","componentDidLoad","componentDidUpdate","getItems","Array","from","host","querySelectorAll","items","forEach","item","i","active","setAttribute","handleTabClick","index","update","emit","render","h","Host","key","innerHTML","class","role","map","type","tabindex","onClick","label"],"sources":["src/components/diwa-tabs/diwa-tabs-styles.ts","src/components/diwa-tabs/diwa-tabs.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .bar {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    gap: 0;\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    overflow-x: auto;\r\n    scrollbar-width: none;\r\n  }\r\n\r\n  .bar::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  .tab-btn {\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--diwa-touch-target-min-size, 44px);\n    padding: var(--diwa-space-4) var(--diwa-space-7);\n    border: none;\r\n    border-bottom: var(--diwa-border-width-base) solid transparent;\r\n    background: transparent;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-family: inherit;\r\n    white-space: nowrap;\r\n    cursor: pointer;\r\n    margin-bottom: -1px;\r\n    transition: color var(--diwa-transition-base), border-color var(--diwa-transition-base);\r\n    color: var(--diwa-text-secondary);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n  }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\n    .tab-btn:hover {\n      color: var(--diwa-text-primary);\n    }\n  }\n\r\n  .tab-btn[aria-selected=\"true\"] {\r\n    color: var(--diwa-accent);\r\n    border-bottom-color: var(--diwa-accent);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n  }\r\n\r\n  ${getFocusStyle('.tab-btn')}\r\n\r\n  .panels {\r\n    padding-top: var(--diwa-space-4);\r\n  }\r\n\r\n  ${getReducedMotionStyle('.tab-btn')}\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\r\nimport type { TabsUpdateEventDetail } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-tabs-styles';\r\n\r\n/**\r\n * @component diwa-tabs\r\n *\r\n * A full tabs component consisting of an integrated tab bar and panel area.\r\n * Accepts `diwa-tabs-item` elements as children. The component renders\r\n * its own horizontal tab buttons and shows only the panel for the active\r\n * tab.\r\n *\r\n * Usage:\r\n *   <diwa-tabs active-tab-index={0} onupdate={e => setTab(e.detail.activeTabIndex)}>\r\n *     <diwa-tabs-item label=\"Overview\">Content A</diwa-tabs-item>\r\n *     <diwa-tabs-item label=\"Details\">Content B</diwa-tabs-item>\r\n *   </diwa-tabs>\r\n */\r\n@Component({\r\n  tag: 'diwa-tabs',\r\n  shadow: true,\r\n})\r\nexport class DiwaTabs {\r\n  @Element() host!: HTMLDiwaTabsElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Zero-based index of the currently active tab. */\r\n  @Prop({ mutable: true, attribute: 'active-tab-index' })\r\n  activeTabIndex: number = 0;\r\n\r\n  /**\r\n   * Emitted when the user selects a different tab.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<TabsUpdateEventDetail>;\r\n\r\n  @Watch('activeTabIndex')\r\n  handleIndexChange() {\r\n    this.syncItems();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.syncItems();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.syncItems();\r\n  }\r\n\r\n  private getItems(): HTMLDiwaTabsItemElement[] {\r\n    return Array.from(this.host.querySelectorAll('diwa-tabs-item')) as HTMLDiwaTabsItemElement[];\r\n  }\r\n\r\n  private syncItems() {\r\n    const items = this.getItems();\r\n    items.forEach((item, i) => {\r\n      (item as any).active = i === this.activeTabIndex;\r\n      item.setAttribute('id', `panel-${i}`);\r\n    });\r\n  }\r\n\r\n  private handleTabClick(index: number) {\r\n    if (index === this.activeTabIndex) return;\r\n    this.activeTabIndex = index;\r\n    this.update.emit({ activeTabIndex: index });\r\n    this.syncItems();\r\n  }\r\n\r\n  render() {\r\n    const items = this.getItems();\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <div class=\"bar\" role=\"tablist\">\r\n          {items.map((item, i) => (\r\n            <button\r\n              class=\"tab-btn\"\r\n              key={i}\r\n              role=\"tab\"\r\n              type=\"button\"\r\n              aria-selected={i === this.activeTabIndex ? 'true' : 'false'}\r\n              aria-controls={`panel-${i}`}\r\n              tabindex={i === this.activeTabIndex ? 0 : -1}\r\n              onClick={() => this.handleTabClick(i)}\r\n            >\r\n              {(item as any).label || `Tab ${i + 1}`}\r\n            </button>\r\n          ))}\r\n        </div>\r\n        <div class=\"panels\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"2GAEO,MAAMA,EAAkB,IAAc,mzCAqDzCC,EAAc,+EAMdC,EAAsB,gB,MCtCbC,EAAQ,MAJrB,WAAAC,CAAAC,G,yCAQ2BC,KAAAC,MAAe,OAIxCD,KAAAE,eAAyB,C,CASzB,iBAAAC,GACEH,KAAKI,W,CAGP,gBAAAC,GACEL,KAAKI,W,CAGP,kBAAAE,GACEN,KAAKI,W,CAGC,QAAAG,GACN,OAAOC,MAAMC,KAAKT,KAAKU,KAAKC,iBAAiB,kB,CAGvC,SAAAP,GACN,MAAMQ,EAAQZ,KAAKO,WACnBK,EAAMC,SAAQ,CAACC,EAAMC,KAClBD,EAAaE,OAASD,IAAMf,KAAKE,eAClCY,EAAKG,aAAa,KAAM,SAASF,IAAI,G,CAIjC,cAAAG,CAAeC,GACrB,GAAIA,IAAUnB,KAAKE,eAAgB,OACnCF,KAAKE,eAAiBiB,EACtBnB,KAAKoB,OAAOC,KAAK,CAAEnB,eAAgBiB,IACnCnB,KAAKI,W,CAGP,MAAAkB,GACE,MAAMV,EAAQZ,KAAKO,WAEnB,OACEgB,EAACC,EAAI,CAAAC,IAAA,wDAAazB,KAAKC,OACrBsB,EAAA,SAAAE,IAAA,2CAAOC,UAAWhC,MAClB6B,EAAA,OAAAE,IAAA,2CAAKE,MAAM,MAAMC,KAAK,WACnBhB,EAAMiB,KAAI,CAACf,EAAMC,IAChBQ,EAAA,UACEI,MAAM,UACNF,IAAKV,EACLa,KAAK,MACLE,KAAK,SAAQ,gBACEf,IAAMf,KAAKE,eAAiB,OAAS,QAAO,gBAC5C,SAASa,IACxBgB,SAAUhB,IAAMf,KAAKE,eAAiB,GAAK,EAC3C8B,QAAS,IAAMhC,KAAKkB,eAAeH,IAEjCD,EAAamB,OAAS,OAAOlB,EAAI,QAIzCQ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,UACTJ,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/diwa-components/p-53e21a74.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as n,h as e,H as i,g as t}from"./p-ed4017f0.js";import{g as d,a as r}from"./p-70bbb21a.js";const o=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");const s=a=>Array.from(a.querySelectorAll(o));const l=(a,n,e)=>{if(!n.length)return;const i=n[0];const t=n[n.length-1];if(a.shiftKey){if(e===i){a.preventDefault();t.focus()}}else{if(e===t){a.preventDefault();i.focus()}}};const c=(a,n,e,i)=>`\n\n  /* ── Host (fullscreen flex overlay centering the panel) ──────────────── */\n\n  :host {\n    display: flex;\n    position: fixed;\n    inset: 0;\n    z-index: var(--diwa-z-modal);\n    align-items: center;\n    justify-content: center;\n    padding: var(--diwa-space-8);\n    box-sizing: border-box;\n    pointer-events: ${a?"auto":"none"};\n    visibility: ${a?"visible":"hidden"};\n    transition: visibility 0s linear ${a?"0s":"var(--diwa-motion-duration-moderate)"};\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Backdrop ────────────────────────────────────────────────────────── */\n\n  .backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: 0;\n    ${n==="blur"?`\n    background: var(--diwa-bg-frosted);\n    backdrop-filter: blur(var(--diwa-blur-lg));\n    -webkit-backdrop-filter: blur(var(--diwa-blur-lg));`:`\n    background: var(--diwa-bg-shading);`}\n    opacity: ${a?"1":"0"};\n    transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\n    cursor: pointer;\n  }\n\n  /* ── Modal panel ─────────────────────────────────────────────────────── */\n\n  .modal {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n\n    /* Sizing */\n    width: var(--diwa-modal-width, 560px);\n    max-width: calc(100vw - var(--diwa-space-10));\n    max-height: var(--diwa-modal-max-height, 85vh);\n\n    /* Appearance */\n    background: var(--diwa-bg-surface);\n    border: var(--diwa-border-width-thin) solid var(--diwa-border);\n    border-radius: var(--diwa-radius-xl);\n    box-shadow: var(--diwa-shadow-xl);\n    overflow: hidden;\n    outline: none;\n\n    /* Entry / exit animation */\n    opacity: ${a?"1":"0"};\n    transform: ${a?"translateY(0) scale(1)":"translateY(-10px) scale(0.98)"};\n    transition:\n      opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out),\n      transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\n  }\n\n  /* ── Header ──────────────────────────────────────────────────────────── */\n\n  .header {\n    flex-shrink: 0;\n    display: flex;\n    flex-direction: column;\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\n  }\n\n  .header-top {\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-3);\n    padding: var(--diwa-space-4) var(--diwa-space-8);\n    padding-right: ${e?"var(--diwa-space-5)":"var(--diwa-space-8)"};\n    min-height: var(--diwa-modal-header-min-height);\n  }\n\n  /* Heading element */\n  .heading {\n    flex: 1;\n    min-width: 0;\n    margin: 0;\n    font-family: var(--diwa-font-family-base);\n    font-size: var(--diwa-font-size-fluid-xl);\n    font-weight: var(--diwa-font-weight-semibold);\n    line-height: var(--diwa-line-height-tight);\n    color: var(--diwa-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Dismiss (×) button */\n  .dismiss {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--diwa-space-10);\n    height: var(--diwa-space-10);\n    padding: 0;\n    background: transparent;\n    border: var(--diwa-border-width-thin) solid transparent;\n    cursor: pointer;\n    font-size: var(--diwa-font-size-xl);\n    line-height: 1;\n    transition:\n      background-color var(--diwa-transition-fast),\n      color var(--diwa-transition-fast),\n      border-color var(--diwa-transition-fast);\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  .dismiss:hover {\n    background-color: var(--diwa-state-hover);\n    color: var(--diwa-text-primary);\n  }\n\n  .dismiss:active {\n    background-color: var(--diwa-state-active);\n  }\n\n  ${d(".dismiss")}\n\n  /* Sub-header slot area (optional description / metadata below the title) */\n  .header-sub {\n    padding: 0 var(--diwa-space-8) var(--diwa-space-5);\n    color: var(--diwa-text-secondary);\n    font-size: var(--diwa-font-size-base);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Scrollable body ─────────────────────────────────────────────────── */\n\n  .body {\n    flex: 1 1 auto;\n    overflow-y: auto;\n    padding: var(--diwa-space-8);\n    ${!i?"padding-bottom: var(--diwa-space-9);":""}\n    overscroll-behavior: contain;\n    color: var(--diwa-text-secondary);\n    font-size: var(--diwa-font-size-base);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Sticky footer ───────────────────────────────────────────────────── */\n\n  .footer {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-3);\n    padding: var(--diwa-space-5) var(--diwa-space-8);\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border);\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${r(".modal",".backdrop")}\n`;let h=0;const b=class{constructor(e){a(this,e);this.dismiss=n(this,"dismiss",1);this._headingId=`diwa-modal-heading-${++h}`;this._savedFocus=null;this.theme="dark";this.open=false;this.dismissButton=true;this.disableBackdropClick=false;this.backdrop="blur";this._hasFooter=false;this._hasHeader=false;this.handleDismiss=()=>{this.dismiss.emit()};this.handleBackdropClick=()=>{if(!this.disableBackdropClick){this.handleDismiss()}}}componentWillRender(){this._hasFooter=this.host.querySelector('[slot="footer"]')!==null;this._hasHeader=this.host.querySelector('[slot="header"]')!==null}disconnectedCallback(){document.body.style.overflow=""}onOpenChange(a){var n;if(a){this._savedFocus=document.activeElement;document.body.style.overflow="hidden";requestAnimationFrame((()=>{var a;(a=this._modalEl)===null||a===void 0?void 0:a.focus()}))}else{document.body.style.overflow="";(n=this._savedFocus)===null||n===void 0?void 0:n.focus();this._savedFocus=null}}onKeyDown(a){if(!this.open)return;if(a.key==="Escape"){a.preventDefault();this.handleDismiss();return}if(a.key==="Tab"){const n=this.host.shadowRoot;if(!n)return;const e=s(n);l(a,e,n.activeElement)}}render(){const{open:a,heading:n,dismissButton:t,backdrop:d,_hasFooter:r,_hasHeader:o}=this;return e(i,{key:"c1acc99174aa04a60711f8e96c6097d55b9efd14","data-theme":this.theme},e("style",{key:"21667f36c24c814ea163defa911f038684563d9c"},c(a,d,t,r)),e("div",{key:"a393f68968ef8eca8007af0204831627114f0150",class:"backdrop","aria-hidden":"true",onClick:this.handleBackdropClick}),e("div",{key:"34e2f0b1ceffc8f1e8255198714ee1273cafb945",class:"modal",role:"dialog","aria-modal":"true","aria-labelledby":n?this._headingId:undefined,"aria-label":!n?"Dialog":undefined,"aria-hidden":a?undefined:"true",tabIndex:-1,ref:a=>{this._modalEl=a}},e("div",{key:"b7f3afe1849b84edd7689bf854bfb88724b80126",class:"header"},e("div",{key:"c149b170f6b9fc010c7095b72393a6c52786cc56",class:"header-top"},n&&e("h2",{key:"8766cbba30a6baec983d76c2ea2103a0ce72d8cd",class:"heading",id:this._headingId},n),t&&e("button",{key:"33427160a356fa8d5d6fb80ac386f4aaa2086bb9",class:"dismiss",type:"button","aria-label":"Close dialog",onClick:this.handleDismiss},e("svg",{key:"c0a8aa78dadf6146151f24193eb06bae00ba9291",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",width:"16",height:"16","aria-hidden":"true"},e("path",{key:"21b404d32024b640a2687a9589c4783357a22aa6",d:"M18 6 6 18M6 6l12 12"})))),o&&e("div",{key:"cd981d16141149103a2309b20d49fc6a01b5570b",class:"header-sub"},e("slot",{key:"108ead5c96a73eeb0afae549d8ee3bcf6b06d305",name:"header"}))),e("div",{key:"56aa2c8ce6090086af76f4f039637e4d3274c9ca",class:"body"},e("slot",{key:"784eb1571c6d68bdc6f01e413f3d549bc70ad2ea"})),r&&e("div",{key:"1aa5c7bbdb0cfc86a3319bd9faa778da78a18a98",class:"footer"},e("slot",{key:"ada3b858cf5e2f6c46c175518773398e519d5aff",name:"footer"}))))}static get delegatesFocus(){return true}get host(){return t(this)}static get watchers(){return{open:["onOpenChange"]}}};export{b as diwa_modal};
+//# sourceMappingURL=p-53e21a74.entry.js.map

package/dist/diwa-components/p-53e21a74.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FOCUSABLE_SELECTOR","join","getFocusableElements","root","Array","from","querySelectorAll","trapFocus","e","focusable","activeEl","length","first","last","shiftKey","preventDefault","focus","getComponentCss","open","backdrop","hasDismissButton","hasFooter","getFocusStyle","getReducedMotionStyle","_headingIdCounter","DiwaModal","constructor","hostRef","this","_headingId","_savedFocus","theme","dismissButton","disableBackdropClick","_hasFooter","_hasHeader","handleDismiss","dismiss","emit","handleBackdropClick","componentWillRender","host","querySelector","disconnectedCallback","document","body","style","overflow","onOpenChange","isOpen","activeElement","requestAnimationFrame","_a","_modalEl","onKeyDown","key","sr","shadowRoot","render","heading","h","Host","class","onClick","role","undefined","tabIndex","ref","el","id","type","viewBox","fill","stroke","width","height","d","name"],"sources":["src/components/diwa-modal/diwa-modal-utils.ts","src/components/diwa-modal/diwa-modal-styles.ts","src/components/diwa-modal/diwa-modal.tsx"],"sourcesContent":["/**\r\n * diwa-modal-utils.ts\r\n * ====================\r\n * Accessibility and ARIA utilities for <diwa-modal>.\r\n *\r\n * Mirrors the PDS pattern used in:\r\n *   packages/components/src/components/modal/modal-utils.ts\r\n *\r\n * Separating focus-trap and ARIA logic into a dedicated utility file keeps\r\n * the main component lean and makes accessibility behaviour independently\r\n * testable.\r\n */\r\n\r\n/** CSS selector matching all standard focusable interactive elements. */\r\nconst FOCUSABLE_SELECTOR = [\r\n  'a[href]',\r\n  'button:not([disabled])',\r\n  'input:not([disabled])',\r\n  'select:not([disabled])',\r\n  'textarea:not([disabled])',\r\n  '[tabindex]:not([tabindex=\"-1\"])',\r\n].join(', ');\r\n\r\n/**\r\n * Returns all focusable elements within a root element or shadow root.\r\n * Used to build the focus-trap cycle when the modal is open.\r\n */\r\nexport const getFocusableElements = (root: Element | ShadowRoot): HTMLElement[] =>\r\n  Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\r\n\r\n/**\r\n * Implements a keyboard focus trap within the modal shadow root.\r\n *\r\n * When Tab is pressed on the last focusable element, focus wraps to the first.\r\n * When Shift+Tab is pressed on the first, focus wraps to the last.\r\n *\r\n * WCAG 2.4.3 Focus Order — ensures that only the modal is reachable via\r\n * keyboard while it is open, preventing interaction with background content.\r\n *\r\n * @param e        — The keydown KeyboardEvent (key must be 'Tab').\r\n * @param focusable — Ordered list of focusable elements inside the modal.\r\n * @param activeEl  — The currently focused element (from shadowRoot.activeElement).\r\n */\r\nexport const trapFocus = (\r\n  e: KeyboardEvent,\r\n  focusable: HTMLElement[],\r\n  activeEl: Element | null,\r\n): void => {\r\n  if (!focusable.length) return;\r\n\r\n  const first = focusable[0];\r\n  const last = focusable[focusable.length - 1];\r\n\r\n  if (e.shiftKey) {\r\n    if (activeEl === first) {\r\n      e.preventDefault();\r\n      last.focus();\r\n    }\r\n  } else {\r\n    if (activeEl === last) {\r\n      e.preventDefault();\r\n      first.focus();\r\n    }\r\n  }\r\n};\r\n","/**\r\n * diwa-modal-styles.ts\r\n * =====================\r\n * CSS-in-JS style function for <diwa-modal>.\r\n *\r\n * Follows the PDS CSS-in-JS pattern:\r\n *   packages/components/src/components/modal/modal-styles.ts\r\n *\r\n * Visibility technique — the host is always in the DOM; open/close is driven by\r\n * `visibility`, `pointer-events`, `opacity`, and `transform` transitions so the\r\n * close animation plays fully before the element becomes inert.\r\n *\r\n * All values use CSS custom properties (--diwa-*). Raw color values are never\r\n * hardcoded — theming is handled entirely by the token cascade from app.css.\r\n *\r\n * Design token override API (injectable by consumers):\r\n *   --diwa-modal-width        Width of the panel   (default: 560px)\r\n *   --diwa-modal-max-height   Max height of panel  (default: 85vh)\r\n */\r\n\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\nimport type { ModalBackdrop } from './types';\r\n\r\n/**\r\n * Generates scoped CSS for the <diwa-modal> shadow tree.\r\n *\r\n * @param open             — Whether the modal is currently open.\r\n * @param backdrop         — Visual style of the backdrop overlay.\r\n * @param hasDismissButton — Whether the × dismiss button is rendered.\r\n * @param hasFooter        — Whether the footer slot is populated.\r\n */\r\nexport const getComponentCss = (\r\n  open: boolean,\r\n  backdrop: ModalBackdrop,\r\n  hasDismissButton: boolean,\r\n  hasFooter: boolean,\r\n): string => `\r\n\r\n  /* ── Host (fullscreen flex overlay centering the panel) ──────────────── */\r\n\r\n  :host {\r\n    display: flex;\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: var(--diwa-z-modal);\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: var(--diwa-space-8);\r\n    box-sizing: border-box;\r\n    pointer-events: ${open ? 'auto' : 'none'};\r\n    visibility: ${open ? 'visible' : 'hidden'};\r\n    transition: visibility 0s linear ${open ? '0s' : 'var(--diwa-motion-duration-moderate)'};\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Backdrop ────────────────────────────────────────────────────────── */\r\n\r\n  .backdrop {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 0;\r\n    ${\r\n      backdrop === 'blur'\r\n        ? `\r\n    background: var(--diwa-bg-frosted);\r\n    backdrop-filter: blur(var(--diwa-blur-lg));\r\n    -webkit-backdrop-filter: blur(var(--diwa-blur-lg));`\r\n        : `\r\n    background: var(--diwa-bg-shading);`\r\n    }\r\n    opacity: ${open ? '1' : '0'};\r\n    transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\r\n    cursor: pointer;\r\n  }\r\n\r\n  /* ── Modal panel ─────────────────────────────────────────────────────── */\r\n\r\n  .modal {\r\n    position: relative;\r\n    z-index: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    /* Sizing */\r\n    width: var(--diwa-modal-width, 560px);\r\n    max-width: calc(100vw - var(--diwa-space-10));\r\n    max-height: var(--diwa-modal-max-height, 85vh);\r\n\r\n    /* Appearance */\r\n    background: var(--diwa-bg-surface);\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    border-radius: var(--diwa-radius-xl);\r\n    box-shadow: var(--diwa-shadow-xl);\r\n    overflow: hidden;\r\n    outline: none;\r\n\r\n    /* Entry / exit animation */\r\n    opacity: ${open ? '1' : '0'};\r\n    transform: ${open ? 'translateY(0) scale(1)' : 'translateY(-10px) scale(0.98)'};\r\n    transition:\r\n      opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out),\r\n      transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\r\n  }\r\n\r\n  /* ── Header ──────────────────────────────────────────────────────────── */\r\n\r\n  .header {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n  }\r\n\r\n  .header-top {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-4) var(--diwa-space-8);\r\n    padding-right: ${hasDismissButton ? 'var(--diwa-space-5)' : 'var(--diwa-space-8)'};\r\n    min-height: var(--diwa-modal-header-min-height);\r\n  }\r\n\r\n  /* Heading element */\r\n  .heading {\r\n    flex: 1;\r\n    min-width: 0;\r\n    margin: 0;\r\n    font-family: var(--diwa-font-family-base);\r\n    font-size: var(--diwa-font-size-fluid-xl);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    line-height: var(--diwa-line-height-tight);\r\n    color: var(--diwa-text-primary);\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n  }\r\n\r\n  /* Dismiss (×) button */\r\n  .dismiss {\r\n    flex-shrink: 0;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--diwa-space-10);\r\n    height: var(--diwa-space-10);\r\n    padding: 0;\r\n    background: transparent;\r\n    border: var(--diwa-border-width-thin) solid transparent;\r\n    cursor: pointer;\r\n    font-size: var(--diwa-font-size-xl);\r\n    line-height: 1;\r\n    transition:\r\n      background-color var(--diwa-transition-fast),\r\n      color var(--diwa-transition-fast),\r\n      border-color var(--diwa-transition-fast);\r\n    -webkit-font-smoothing: antialiased;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n  }\r\n\r\n  .dismiss:hover {\r\n    background-color: var(--diwa-state-hover);\r\n    color: var(--diwa-text-primary);\r\n  }\r\n\r\n  .dismiss:active {\r\n    background-color: var(--diwa-state-active);\r\n  }\r\n\r\n  ${getFocusStyle('.dismiss')}\r\n\r\n  /* Sub-header slot area (optional description / metadata below the title) */\r\n  .header-sub {\r\n    padding: 0 var(--diwa-space-8) var(--diwa-space-5);\r\n    color: var(--diwa-text-secondary);\r\n    font-size: var(--diwa-font-size-base);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  /* ── Scrollable body ─────────────────────────────────────────────────── */\r\n\r\n  .body {\r\n    flex: 1 1 auto;\r\n    overflow-y: auto;\r\n    padding: var(--diwa-space-8);\r\n    ${!hasFooter ? 'padding-bottom: var(--diwa-space-9);' : ''}\r\n    overscroll-behavior: contain;\r\n    color: var(--diwa-text-secondary);\r\n    font-size: var(--diwa-font-size-base);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  /* ── Sticky footer ───────────────────────────────────────────────────── */\r\n\r\n  .footer {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-5) var(--diwa-space-8);\r\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.modal', '.backdrop')}\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\r\nimport type { ModalBackdrop } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getFocusableElements, trapFocus } from './diwa-modal-utils';\r\nimport { getComponentCss } from './diwa-modal-styles';\r\n\r\n/** Module-level counter — guarantees unique heading IDs across all DiwaModal instances. */\r\nlet _headingIdCounter = 0;\r\n\r\n/**\r\n * @component diwa-modal\r\n *\r\n * A controlled overlay dialog box for focused interactions.\r\n * Follows the PDS controlled-component pattern — the consumer owns open state\r\n * and responds to the `dismiss` event to close the modal.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-modal-width       Panel width            (default: 560px)\r\n *   --diwa-modal-max-height  Maximum panel height   (default: 85vh)\r\n *\r\n * Usage:\r\n *   <diwa-modal open heading=\"Confirm deletion\" ondismiss={() => setOpen(false)}>\r\n *     <p>Are you sure you want to delete this item? This action cannot be undone.</p>\r\n *     <div slot=\"footer\">\r\n *       <diwa-button variant=\"danger\">Delete</diwa-button>\r\n *       <diwa-button variant=\"secondary\" onDiwaClick={handleClose}>Cancel</diwa-button>\r\n *     </div>\r\n *   </diwa-modal>\r\n *\r\n * @slot default — Scrollable body content.\r\n * @slot header  — Optional sub-header below the title bar (e.g. description, metadata).\r\n * @slot footer  — Sticky footer content (e.g. action buttons). Hidden when empty.\r\n *\r\n * @controlled {\"props\": [\"open\"], \"event\": \"dismiss\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-modal',\r\n  /**\r\n   * No styleUrl — styles are injected dynamically via getComponentCss().\r\n   * This follows the PDS CSS-in-JS pattern so styles re-evaluate whenever\r\n   * open/backdrop/dismissButton/hasFooter change, enabling state-driven CSS.\r\n   */\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaModal {\r\n  @Element() host!: HTMLElement;\r\n\r\n  private readonly _headingId = `diwa-modal-heading-${++_headingIdCounter}`;\r\n  private _modalEl?: HTMLDivElement;\r\n  private _savedFocus: HTMLElement | null = null;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Per-component theme override.\r\n   * Reflects data-theme onto the host element so the light/dark token\r\n   * overrides in app.css cascade into the Shadow DOM via CSS inheritance.\r\n   */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Whether the modal is open.\r\n   *\r\n   * Controlled prop — set `open={true}` to open and `open={false}` to close.\r\n   * The component emits `dismiss` when the user requests a close; the\r\n   * consumer must set `open={false}` in response.\r\n   */\r\n  @Prop({ reflect: true }) open: boolean = false;\r\n\r\n  /** Heading text displayed in the modal title bar. */\r\n  @Prop() heading?: string;\r\n\r\n  /**\r\n   * When false, the dismiss (×) button in the header is hidden.\r\n   * Pair with a close action in the footer or programmatic `open = false`.\r\n   */\r\n  @Prop() dismissButton: boolean = true;\r\n\r\n  /**\r\n   * When true, clicking the backdrop does not emit `dismiss`.\r\n   * Use for required confirmations requiring an explicit user choice.\r\n   */\r\n  @Prop() disableBackdropClick: boolean = false;\r\n\r\n  /**\r\n   * Controls the visual style of the backdrop overlay.\r\n   *\r\n   * `blur`    — frosted glass via backdrop-filter (default).\r\n   *             Use when the modal is opened by direct user interaction (e.g. a button click).\r\n   *\r\n   * `shading` — solid dark scrim via --diwa-bg-shading.\r\n   *             Use for system-triggered modals (e.g. session timeout, cookie consent).\r\n   */\r\n  @Prop() backdrop: ModalBackdrop = 'blur';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Internal state — updated in componentWillRender\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** True when the footer slot contains at least one element. */\r\n  @State() private _hasFooter = false;\r\n\r\n  /** True when the header slot contains at least one element. */\r\n  @State() private _hasHeader = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user requests the modal to close:\r\n   *   - Clicking the backdrop (unless `disableBackdropClick` is true)\r\n   *   - Pressing the Escape key\r\n   *   - Clicking the dismiss (×) button\r\n   *\r\n   * The consumer MUST set `open={false}` in response:\r\n   * ```html\r\n   * <diwa-modal open ondismiss={() => (this.open = false)} />\r\n   * ```\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Lifecycle\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  componentWillRender(): void {\r\n    // Check light DOM children for slotted content.\r\n    // PDS pattern: host.querySelector('[slot=\"...\"]') is the most reliable\r\n    // way to detect slot occupancy before the shadow DOM renders.\r\n    this._hasFooter = this.host.querySelector('[slot=\"footer\"]') !== null;\r\n    this._hasHeader = this.host.querySelector('[slot=\"header\"]') !== null;\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    // Ensure scroll lock is always released if the element is removed from DOM.\r\n    document.body.style.overflow = '';\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Watchers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Watch('open')\r\n  onOpenChange(isOpen: boolean): void {\r\n    if (isOpen) {\r\n      // Save the currently focused element so we can return focus on close.\r\n      this._savedFocus = document.activeElement as HTMLElement;\r\n      // Lock page scroll while the modal is visible (PDS: setScrollLock pattern).\r\n      document.body.style.overflow = 'hidden';\r\n      // Move focus into the modal after the current render frame.\r\n      requestAnimationFrame(() => {\r\n        this._modalEl?.focus();\r\n      });\r\n    } else {\r\n      document.body.style.overflow = '';\r\n      // Return focus to the element that triggered the modal open.\r\n      this._savedFocus?.focus();\r\n      this._savedFocus = null;\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Keyboard handling\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  onKeyDown(e: KeyboardEvent): void {\r\n    if (!this.open) return;\r\n\r\n    if (e.key === 'Escape') {\r\n      // WCAG 2.1.2 — provide a way to close without a pointer device.\r\n      e.preventDefault();\r\n      this.handleDismiss();\r\n      return;\r\n    }\r\n\r\n    if (e.key === 'Tab') {\r\n      // Focus trap: cycle focus within the modal shadow root.\r\n      // WCAG 2.4.3 — prevents background content from being reachable.\r\n      const sr = this.host.shadowRoot;\r\n      if (!sr) return;\r\n      const focusable = getFocusableElements(sr);\r\n      trapFocus(e, focusable, sr.activeElement);\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleDismiss = (): void => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  private handleBackdropClick = (): void => {\r\n    if (!this.disableBackdropClick) {\r\n      this.handleDismiss();\r\n    }\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const { open, heading, dismissButton, backdrop, _hasFooter, _hasHeader } = this;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style>{getComponentCss(open, backdrop, dismissButton, _hasFooter)}</style>\r\n\r\n        {/* Backdrop — covers the viewport behind the panel */}\r\n        <div\r\n          class=\"backdrop\"\r\n          aria-hidden=\"true\"\r\n          onClick={this.handleBackdropClick}\r\n        />\r\n\r\n        {/*\r\n         * Modal panel.\r\n         * role=\"dialog\" + aria-modal=\"true\" declares this as a modal dialog.\r\n         * aria-labelledby links to the heading text for screen readers.\r\n         * tabIndex={-1} allows the panel itself to receive focus programmatically\r\n         * (via @Watch open → _modalEl.focus()) — it is not in the natural tab order.\r\n         */}\r\n        <div\r\n          class=\"modal\"\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby={heading ? this._headingId : undefined}\r\n          aria-label={!heading ? 'Dialog' : undefined}\r\n          aria-hidden={open ? undefined : 'true'}\r\n          tabIndex={-1}\r\n          ref={(el) => { this._modalEl = el as HTMLDivElement; }}\r\n        >\r\n          {/* Title bar */}\r\n          <div class=\"header\">\r\n            <div class=\"header-top\">\r\n              {heading && (\r\n                <h2 class=\"heading\" id={this._headingId}>\r\n                  {heading}\r\n                </h2>\r\n              )}\r\n              {dismissButton && (\r\n                <button\r\n                  class=\"dismiss\"\r\n                  type=\"button\"\r\n                  aria-label=\"Close dialog\"\r\n                  onClick={this.handleDismiss}\r\n                >\r\n                  {/* Close × icon */}\r\n                  <svg\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                    width=\"16\"\r\n                    height=\"16\"\r\n                    aria-hidden=\"true\"\r\n                  >\r\n                    <path d=\"M18 6 6 18M6 6l12 12\" />\r\n                  </svg>\r\n                </button>\r\n              )}\r\n            </div>\r\n\r\n            {/* Optional sub-header slot (description, metadata, etc.) */}\r\n            {_hasHeader && (\r\n              <div class=\"header-sub\">\r\n                <slot name=\"header\" />\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {/* Scrollable body */}\r\n          <div class=\"body\">\r\n            <slot />\r\n          </div>\r\n\r\n          {/* Sticky footer — rendered only when slot is occupied */}\r\n          {_hasFooter && (\r\n            <div class=\"footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/diwa-components/p-565f623e.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as e,h as i,H as n}from"./p-ed4017f0.js";import{a as t}from"./p-70bbb21a.js";const r=(a,e,i,n,r)=>{const s=a==="error"?"var(--diwa-notification-error)":a==="success"?"var(--diwa-notification-success)":"var(--diwa-input-border, var(--diwa-border))";const d=a==="error"?"var(--diwa-notification-error)":a==="success"?"var(--diwa-notification-success)":"var(--diwa-text-secondary)";return`\n    :host {\n      display: block;\n      font-family: var(--diwa-font-family-base);\n      outline: none;\n    }\n    :host([hidden]) {\n      display: none;\n    }\n    .root {\n      display: flex;\n      flex-direction: column;\n      gap: var(--diwa-space-2);\n    }\n    .label-row {\n      display: flex;\n      align-items: baseline;\n      gap: var(--diwa-space-1);\n    }\n    .label {\n      display: block;\n      font-size: var(--diwa-font-size-sm);\n      font-weight: var(--diwa-font-weight-semibold);\n      color: var(--diwa-text-secondary);\n      line-height: var(--diwa-line-height-normal);\n    }\n    .required {\n      color: var(--diwa-notification-error);\n      font-weight: var(--diwa-font-weight-semibold);\n    }\n    .textarea-wrapper {\n      position: relative;\n      display: flex;\n      background: var(--diwa-input-bg, var(--diwa-bg-input));\n      border: var(--diwa-border-width-thin) solid ${s};\n      border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\n      box-sizing: border-box;\n      transition: border-color var(--diwa-transition-base);\n      ${e?"opacity: 0.5; pointer-events: none;":""}\n    }\n    .textarea-wrapper:not(:has(textarea:disabled)):not(:has(textarea[readonly])):hover {\n      border-color: ${a==="none"?"var(--diwa-border-hover)":s};\n    }\n    .textarea-wrapper:focus-within {\n      border-color: var(--diwa-border-focus);\n    }\n    ${i?`.textarea-wrapper { background: var(--diwa-bg-surface); border-style: dashed; }`:""}\n    .ta {\n      width: 100%;\n      min-height: ${r?"64px":"96px"};\n      padding: ${r?"6px 10px":"10px 12px"};\n      background: transparent;\n      border: none;\n      outline: none;\n      font-family: var(--diwa-font-family-base);\n      font-size: ${r?"var(--diwa-font-size-sm)":"var(--diwa-font-size-base)"};\n      color: var(--diwa-text-primary);\n      resize: ${n};\n      box-sizing: border-box;\n    }\n    .ta::placeholder {\n      color: var(--diwa-text-muted);\n    }\n    .description {\n      font-size: var(--diwa-font-size-sm);\n      color: var(--diwa-text-secondary);\n      line-height: var(--diwa-line-height-normal);\n      margin: 0;\n    }\n    .message {\n      font-size: var(--diwa-font-size-sm);\n      color: ${d};\n      line-height: var(--diwa-line-height-normal);\n      margin: 0;\n    }\n\n    ${t(".textarea-wrapper")}\n  `};const s=class{constructor(i){a(this,i);this.input=e(this,"input",7);this.change=e(this,"change",7);this.blur=e(this,"blur",1);this.label="";this.description="";this.state="none";this.message="";this.name="";this.value="";this.placeholder="";this.required=false;this.disabled=false;this.readOnly=false;this.rows=4;this.resize="vertical";this.compact=false;this.hideLabel=false;this.theme="dark";this.handleInput=a=>{this.value=a.target.value;this.input.emit(this.value)};this.handleChange=a=>{this.value=a.target.value;this.change.emit(this.value)};this.handleBlur=a=>{this.blur.emit(a)}}render(){const a="textarea";const e="desc";const t="msg";return i(n,{key:"d4f47cf2f3be23a0df6c1f2dc24c8f11647fadc4","data-theme":this.theme},i("style",{key:"66ab29c8d8633795ed2fbc8403486496c36a356d",innerHTML:r(this.state,this.disabled,this.readOnly,this.resize,this.compact)}),i("div",{key:"5a28099aa65e5b3b4588007479203360949c2dcf",class:"root"},!this.hideLabel&&this.label&&i("div",{key:"a292c7d30962fc7db056cf9dca05552196b4532d",class:"label-row"},i("label",{key:"38a4700dc55d557ef437efe0e54c0121bb0f172c",class:"label",htmlFor:a},this.label,this.required&&i("span",{key:"8bef937a0727b2c51dabe30b9b74927053f7840f",class:"required","aria-hidden":"true"}," *")),i("slot",{key:"36169954033c2e1abcba95ccb445f7cb9f6460c0",name:"label-after"})),i("div",{key:"05de702c20d30ff01af79245daf06e72bc013025",class:"textarea-wrapper"},i("textarea",{key:"ac18d6a3a4b2d724f1bd78f16e17f72dccc751f7",class:"ta",id:a,name:this.name||undefined,value:this.value,placeholder:this.placeholder||undefined,disabled:this.disabled,required:this.required,readOnly:this.readOnly,rows:this.rows,maxLength:this.maxLength,minLength:this.minLength,"aria-label":this.hideLabel&&this.label?this.label:undefined,"aria-invalid":this.state==="error"?"true":undefined,"aria-required":this.required?"true":undefined,"aria-describedby":this.message?t:this.description?e:undefined,onInput:this.handleInput,onChange:this.handleChange,onBlur:this.handleBlur})),!this.message&&this.description&&i("p",{key:"973b18b1bafa587c7d98684d73a80e8357434c0e",id:e,class:"description"},this.description),this.message&&i("p",{key:"dc389f318bfc3e674e1cb4c8ca6d8e2ffe348480",id:t,class:"message"},this.message)))}static get delegatesFocus(){return true}};export{s as diwa_textarea};
+//# sourceMappingURL=p-565f623e.entry.js.map