@diwacopilot/components 1.1.1 → 1.2.1

package/dist/diwa-components/p-9eef4779.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","orientation","isVertical","DiwaDivider","constructor","hostRef","this","theme","render","h","Host","key","innerHTML","class","role"],"sources":["src/components/diwa-divider/diwa-divider-styles.ts","src/components/diwa-divider/diwa-divider.tsx"],"sourcesContent":["import type { DividerOrientation } from './types';\r\n\r\nexport const getComponentCss = (orientation: DividerOrientation): string => {\r\n  const isVertical = orientation === 'vertical';\r\n\r\n  return `\r\n\r\n  /* ── Host ─────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: ${isVertical ? 'inline-flex' : 'block'};\r\n    ${isVertical ? 'align-self: stretch;' : 'width: 100%;'}\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Rule ─────────────────────────────────────────────────────────── */\r\n\r\n  .root {\r\n    display: block;\r\n    margin: 0;\r\n    padding: 0;\r\n    border: none;\r\n    background-color: var(--diwa-border);\r\n    ${isVertical\r\n      ? `width: var(--diwa-border-width-thin);\r\n    height: 100%;\r\n    min-height: 1em;`\r\n      : `width: 100%;\r\n    height: var(--diwa-border-width-thin);`}\r\n  }\r\n`;\r\n};\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { DividerOrientation } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-divider-styles';\r\n\r\n/**\r\n * @component diwa-divider\r\n *\r\n * A purely presentational separator line. Renders a native `<hr>` element\r\n * styled via CSS-in-JS. Supports horizontal (default) and vertical orientations.\r\n *\r\n * Accessibility:\r\n *   - Renders as `role=\"separator\"` (implicit from `<hr>`)\r\n *   - `aria-orientation` is set automatically from the `orientation` prop\r\n *   - Non-interactive — no focus, no keyboard handling\r\n *\r\n * Usage:\r\n *   <!-- Horizontal (default) -->\r\n *   <diwa-divider />\r\n *\r\n *   <!-- Vertical — requires a flex or grid parent with a defined height -->\r\n *   <div style=\"display:flex; height:40px\">\r\n *     <span>Left</span>\r\n *     <diwa-divider orientation=\"vertical\" />\r\n *     <span>Right</span>\r\n *   </div>\r\n */\r\n@Component({\r\n  tag: 'diwa-divider',\r\n  shadow: true,\r\n})\r\nexport class DiwaDivider {\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  /**\r\n   * Orientation of the divider line.\r\n   * - `'horizontal'` (default) — a full-width 1 px horizontal rule.\r\n   * - `'vertical'` — a 1 px vertical rule that stretches to the parent's height.\r\n   *   The parent must be a flex or grid container with a defined height.\r\n   */\r\n  @Prop({ reflect: true }) orientation: DividerOrientation = 'horizontal';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.orientation)} />\r\n        <hr\r\n          class=\"root\"\r\n          role=\"separator\"\r\n          aria-orientation={this.orientation}\r\n        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAEO,MAAMA,EAAmBC,IAC9B,MAAMC,EAAaD,IAAgB,WAEnC,MAAO,8GAKMC,EAAa,cAAgB,iBACtCA,EAAa,uBAAyB,gTAgBtCA,EACE,iFAGA,mEAGP,E,MCHYC,EAAW,MAJxB,WAAAC,CAAAC,G,UAU2BC,KAAAC,MAAe,OAQfD,KAAAL,YAAkC,Y,CAM3D,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,wDAAaL,KAAKC,OACrBE,EAAA,SAAAE,IAAA,2CAAOC,UAAWZ,EAAgBM,KAAKL,eACvCQ,EAAA,MAAAE,IAAA,2CACEE,MAAM,OACNC,KAAK,YAAW,mBACER,KAAKL,c","ignoreList":[]}

package/dist/diwa-components/p-ac8e14be.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["LoaderCircle","d"],"sources":["../node_modules/lucide/dist/esm/icons/loader-circle.js"],"sourcesContent":["/**\n * @license lucide v0.577.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nconst LoaderCircle = [[\"path\", { d: \"M21 12a9 9 0 1 1-6.219-8.56\" }]];\n\nexport { LoaderCircle as default };\n//# sourceMappingURL=loader-circle.js.map\n"],"mappings":";;;;;;AAOK,MAACA,EAAe,CAAC,CAAC,OAAQ,CAAEC,EAAG,wC","ignoreList":[]}

package/dist/diwa-components/p-b072ff72.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as e,H as r}from"./p-ed4017f0.js";const t=()=>`\n  :host {\n    display: table-header-group;\n    background: var(--diwa-table-header-bg, transparent);\n    font-size: var(--diwa-font-size-sm);\n    line-height: var(--diwa-line-height-normal);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-secondary);\n    border-bottom: var(--diwa-border-width-thin, 1px) solid var(--diwa-table-border-color, var(--diwa-border)) !important;\n  }\n  ::slotted(*) {\n    --diwa-table-row-border-width: 0px;\n    --diwa-table-hover-color: transparent;\n  }\n  :host([hidden]) { display: none; }\n`;const d=class{constructor(e){a(this,e);this.theme="dark"}render(){return e(r,{key:"8b9ea28317fea6188af61dad423fe63058910913",role:"rowgroup","data-theme":this.theme},e("style",{key:"70d40b87e2b9a76d20424845492cd6d2addb775a",innerHTML:t()}),e("slot",{key:"af8f4b4e1e404c7c23a3d6d35b8b961167047c3c"}))}};export{d as diwa_table_head};
-//# sourceMappingURL=p-b072ff72.entry.js.map

package/dist/diwa-components/p-b072ff72.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","DiwaTableHead","constructor","hostRef","this","theme","render","h","Host","key","role","innerHTML"],"sources":["src/components/diwa-table-head/diwa-table-head-styles.ts","src/components/diwa-table-head/diwa-table-head.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\n  :host {\n    display: table-header-group;\n    background: var(--diwa-table-header-bg, transparent);\n    font-size: var(--diwa-font-size-sm);\n    line-height: var(--diwa-line-height-normal);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-secondary);\n    border-bottom: var(--diwa-border-width-thin, 1px) solid var(--diwa-table-border-color, var(--diwa-border)) !important;\n  }\n  ::slotted(*) {\n    --diwa-table-row-border-width: 0px;\n    --diwa-table-hover-color: transparent;\n  }\n  :host([hidden]) { display: none; }\n`;\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-table-head-styles';\r\n\r\n/** @component diwa-table-head — Maps to <thead> inside diwa-table. */\r\n@Component({ tag: 'diwa-table-head', shadow: true })\r\nexport class DiwaTableHead {\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"rowgroup\" data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAO,MAAMA,EAAkB,IAAc,wjB,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-bbede25d.entry.js

@@ -1,2 +0,0 @@
-import{r as n,c as a,h as e,H as i}from"./p-ed4017f0.js";import{a as t}from"./p-70bbb21a.js";const d=(n,a,e)=>`\n\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    position: fixed;\n    inset: 0;\n    z-index: var(--diwa-z-overlay);\n    pointer-events: ${n?"auto":"none"};\n    visibility: ${n?"visible":"hidden"};\n    transition: visibility 0s linear ${n?"0s":"var(--diwa-motion-duration-moderate)"};\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Backdrop ──────────────────────────────────────────────────────── */\n\n  .backdrop {\n    position: absolute;\n    inset: 0;\n    ${e==="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: ${n?"1":"0"};\n    transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\n    cursor: pointer;\n  }\n\n  /* ── Panel ─────────────────────────────────────────────────────────── */\n\n  .panel {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    ${a==="start"?"left: 0;":"right: 0;"}\n    width: var(--diwa-flyout-width, 480px);\n    min-width: var(--diwa-flyout-min-width);\n    max-width: 100vw;\n    display: flex;\n    flex-direction: column;\n    background: var(--diwa-bg-surface);\n    border-${a==="start"?"right":"left"}: var(--diwa-border-width-thin) solid var(--diwa-border);\n    transform: translateX(${n?"0":a==="start"?"-100%":"100%"});\n    transition: transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-base);\n    overflow: hidden;\n    outline: none;\n  }\n\n  /* ── Header ────────────────────────────────────────────────────────── */\n\n  .header {\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-3);\n    padding: var(--diwa-space-5) var(--diwa-space-6);\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\n  }\n\n  .heading-text {\n    flex: 1;\n    min-width: 0;\n    font-family: var(--diwa-font-family-base);\n    font-size: var(--diwa-font-size-xl);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* ── Scrollable content ────────────────────────────────────────────── */\n\n  .content {\n    flex: 1;\n    overflow-y: auto;\n    padding: var(--diwa-space-6);\n    overscroll-behavior: contain;\n  }\n\n  /* ── Sticky footer ─────────────────────────────────────────────────── */\n\n  .footer {\n    flex-shrink: 0;\n    padding: var(--diwa-space-4) var(--diwa-space-6);\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border); {\n    display: none;\n  }\n\n  ${t(".panel",".backdrop")}\n`;const o=class{constructor(e){n(this,e);this.dismiss=a(this,"dismiss",1);this.savedFocusEl=null;this.theme="dark";this.open=false;this.position="end";this.backdrop="blur";this.heading="";this.handleDismiss=()=>{this.dismiss.emit()}}onOpenChange(n){var a;if(n){document.body.style.overflow="hidden";this.savedFocusEl=document.activeElement;requestAnimationFrame((()=>{var n;(n=this.panelEl)===null||n===void 0?void 0:n.focus()}))}else{document.body.style.overflow="";(a=this.savedFocusEl)===null||a===void 0?void 0:a.focus();this.savedFocusEl=null}}disconnectedCallback(){document.body.style.overflow=""}onKeyDown(n){if(this.open&&n.key==="Escape"){n.preventDefault();this.dismiss.emit()}}render(){return e(i,{key:"52d5fe7be0dfea4a62bc7a4a7637b2f9edbe141d","data-theme":this.theme},e("style",{key:"024c161908d6c2954d8f6a3a07b24f07c2d8e43c"},d(this.open,this.position,this.backdrop)),e("div",{key:"f76c3d2f71725d8d2b3d29a2cbbacc5b2c9da3d2",class:"backdrop","aria-hidden":"true",onClick:this.handleDismiss}),e("div",{key:"6365781507ae83c8bc9d4f5233f9cdf464d8e9ca",class:"panel",role:"dialog","aria-modal":"true","aria-label":this.heading||"Flyout",tabIndex:-1,ref:n=>{this.panelEl=n}},e("div",{key:"b8dbb339620ebc2fab8dde5ee70fd5eaca614464",class:"header"},e("span",{key:"e7de07e86b1ca0ca6072f47ab6da4b4eb5b4a7d3",class:"heading-text"},this.heading),e("slot",{key:"b688288e6f4a4fd910845eb2c14a6ba705e81eee",name:"header"}),e("diwa-button-pure",{key:"8924888f63033a7c285f63b589834ef4e301aa74",icon:"x",label:"Close flyout",size:"sm",hideLabel:true,onClick:this.handleDismiss})),e("div",{key:"1bf9756c8d8cb88f58e1b960c3d5ee22500828ba",class:"content"},e("slot",{key:"292d34bfc03446b3f751f39df50c3655bd46a0e6"})),e("div",{key:"51270f6fed520df8a4101027a1f9023118b9f46e",class:"footer"},e("slot",{key:"f6684ace2a9f0ec82d5b1face5de06bede92c84b",name:"footer"}))))}static get watchers(){return{open:["onOpenChange"]}}};export{o as diwa_flyout};
-//# sourceMappingURL=p-bbede25d.entry.js.map

package/dist/diwa-components/p-bbede25d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","open","position","backdrop","getReducedMotionStyle","DiwaFlyout","constructor","hostRef","this","savedFocusEl","theme","heading","handleDismiss","dismiss","emit","onOpenChange","nextOpen","document","body","style","overflow","activeElement","requestAnimationFrame","_a","panelEl","focus","disconnectedCallback","onKeyDown","e","key","preventDefault","render","h","Host","class","onClick","role","tabIndex","ref","el","name","icon","label","size","hideLabel"],"sources":["src/components/diwa-flyout/diwa-flyout-styles.ts","src/components/diwa-flyout/diwa-flyout.tsx"],"sourcesContent":["/**\r\n * diwa-flyout-styles.ts\r\n * ======================\r\n * CSS-in-JS styles for <diwa-flyout>.\r\n *\r\n * The flyout is a fixed-position overlay consisting of:\r\n *   - A semi-transparent backdrop that covers the viewport.\r\n *   - A panel that slides in from the start (left) or end (right) edge.\r\n *\r\n * Both the backdrop and panel animate on open/close. Because all values are\r\n * passed as template literal expressions, the <style> tag is re-emitted on\r\n * every render — which happens whenever `open` or `position` changes.\r\n *\r\n * Visibility technique: `:host` uses `visibility: hidden` with a delayed\r\n * transition when closing so the panel is invisible after the slide-out\r\n * animation completes, while still being `visibility: visible` during the\r\n * opening animation so it animates in correctly.\r\n */\r\n\r\nimport { getReducedMotionStyle } from '../../utils/styles';\r\nimport type { FlyoutBackdrop, FlyoutPosition } from './types';\r\n\r\nexport const getComponentCss = (\r\n  open: boolean,\r\n  position: FlyoutPosition,\r\n  backdrop: FlyoutBackdrop,\r\n): string => `\r\n\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: var(--diwa-z-overlay);\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: absolute;\r\n    inset: 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  /* ── Panel ─────────────────────────────────────────────────────────── */\r\n\r\n  .panel {\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    ${position === 'start' ? 'left: 0;' : 'right: 0;'}\r\n    width: var(--diwa-flyout-width, 480px);\r\n    min-width: var(--diwa-flyout-min-width);\r\n    max-width: 100vw;\r\n    display: flex;\r\n    flex-direction: column;\r\n    background: var(--diwa-bg-surface);\r\n    border-${position === 'start' ? 'right' : 'left'}: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    transform: translateX(${open ? '0' : position === 'start' ? '-100%' : '100%'});\r\n    transition: transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-base);\r\n    overflow: hidden;\r\n    outline: none;\r\n  }\r\n\r\n  /* ── Header ────────────────────────────────────────────────────────── */\r\n\r\n  .header {\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-6);\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n  }\r\n\r\n  .heading-text {\r\n    flex: 1;\r\n    min-width: 0;\r\n    font-family: var(--diwa-font-family-base);\r\n    font-size: var(--diwa-font-size-xl);\r\n    font-weight: var(--diwa-font-weight-semibold);\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  /* ── Scrollable content ────────────────────────────────────────────── */\r\n\r\n  .content {\r\n    flex: 1;\r\n    overflow-y: auto;\r\n    padding: var(--diwa-space-6);\r\n    overscroll-behavior: contain;\r\n  }\r\n\r\n  /* ── Sticky footer ─────────────────────────────────────────────────── */\r\n\r\n  .footer {\r\n    flex-shrink: 0;\r\n    padding: var(--diwa-space-4) var(--diwa-space-6);\r\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border); {\r\n    display: none;\r\n  }\r\n\r\n  ${getReducedMotionStyle('.panel', '.backdrop')}\r\n`;\r\n","import {\r\n  Component,\r\n  Event,\r\n  type EventEmitter,\r\n  Host,\r\n  Listen,\r\n  Prop,\r\n  Watch,\r\n  h,\r\n} from '@stencil/core';\r\nimport type { FlyoutBackdrop, FlyoutPosition } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-flyout-styles';\r\n\r\n/**\r\n * @component diwa-flyout\r\n *\r\n * A full-height overlay panel that slides in from the start or end edge of\r\n * the viewport. Follows the controlled component pattern — the consumer\r\n * manages `open` state in response to the `dismiss` event.\r\n *\r\n * Accessibility:\r\n *   - Panel has `role=\"dialog\"` and `aria-modal=\"true\"`\r\n *   - Clicking the backdrop, pressing Escape, or clicking the dismiss button\r\n *     emits the `dismiss` event; the consumer sets `open={false}`\r\n *   - Focus moves to the panel when opened and returns to the trigger element\r\n *     when closed\r\n *   - Body scroll is locked (`overflow: hidden`) while the flyout is open\r\n *\r\n * V1 limitations:\r\n *   - No focus trap: Tab can navigate outside the panel. A full focus trap\r\n *     will be added in V2.\r\n *\r\n * Usage:\r\n *   <diwa-flyout heading=\"Settings\" open={isOpen} onDismiss={() => setIsOpen(false)}>\r\n *     <p>Flyout body content.</p>\r\n *     <div slot=\"footer\">\r\n *       <diwa-button onClick={() => setIsOpen(false)}>Save</diwa-button>\r\n *     </div>\r\n *   </diwa-flyout>\r\n *\r\n * @slot default — Scrollable body content of the flyout.\r\n * @slot header  — Extra content in the header row, inserted after the heading text.\r\n * @slot footer  — Sticky footer content (e.g. action buttons). Auto-hides when empty.\r\n */\r\n@Component({\r\n  tag: 'diwa-flyout',\r\n  shadow: true,\r\n})\r\nexport class DiwaFlyout {\r\n  private panelEl?: HTMLDivElement;\r\n  private savedFocusEl: HTMLElement | null = null;\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  /**\r\n   * Whether the flyout is currently open.\r\n   *\r\n   * Controlled prop — the consumer must set this to `false` in response to\r\n   * the `dismiss` event (backdrop click, Escape key, or dismiss button).\r\n   */\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n\r\n  /** Which edge of the viewport the panel slides in from (`start` = left, `end` = right). */\r\n  @Prop({ reflect: true }) position: FlyoutPosition = 'end';\r\n\r\n  /**\r\n   * Controls the visual style of the backdrop overlay.\r\n   * `blur`    — frosted glass (default; use when opened by user interaction).\r\n   * `shading` — solid dark scrim (use for system-triggered flyouts).\r\n   */\r\n  @Prop() backdrop: FlyoutBackdrop = 'blur';\r\n\r\n  /** Heading text displayed in the flyout header. */\r\n  @Prop() heading: string = '';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user requests the flyout to close (backdrop click,\r\n   * Escape key press, or dismiss button click).\r\n   *\r\n   * The consumer must set `open={false}` in response:\r\n   * ```html\r\n   * <diwa-flyout onDismiss={() => this.open = false} />\r\n   * ```\r\n   * Not bubbles, not composed.\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  @Watch('open')\r\n  onOpenChange(nextOpen: boolean): void {\r\n    if (nextOpen) {\r\n      document.body.style.overflow = 'hidden';\r\n      this.savedFocusEl = document.activeElement as HTMLElement;\r\n      requestAnimationFrame(() => {\r\n        this.panelEl?.focus();\r\n      });\r\n    } else {\r\n      document.body.style.overflow = '';\r\n      this.savedFocusEl?.focus();\r\n      this.savedFocusEl = null;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    document.body.style.overflow = '';\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Keyboard handling\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Close on Escape key while the flyout is open. */\r\n  @Listen('keydown', { target: 'window' })\r\n  onKeyDown(e: KeyboardEvent): void {\r\n    if (this.open && e.key === 'Escape') {\r\n      e.preventDefault();\r\n      this.dismiss.emit();\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  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style>{getComponentCss(this.open, this.position, this.backdrop)}</style>\r\n\r\n        {/* Backdrop — clicking it emits dismiss */}\r\n        <div\r\n          class=\"backdrop\"\r\n          aria-hidden=\"true\"\r\n          onClick={this.handleDismiss}\r\n        />\r\n\r\n        {/* Dialog panel */}\r\n        <div\r\n          class=\"panel\"\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-label={this.heading || 'Flyout'}\r\n          tabIndex={-1}\r\n          ref={(el) => { this.panelEl = el as HTMLDivElement; }}\r\n        >\r\n          <div class=\"header\">\r\n            <span class=\"heading-text\">{this.heading}</span>\r\n            <slot name=\"header\" />\r\n            <diwa-button-pure\r\n              icon=\"x\"\r\n              label=\"Close flyout\"\r\n              size=\"sm\"\r\n              hideLabel={true}\r\n              onClick={this.handleDismiss}\r\n            />\r\n          </div>\r\n\r\n          <div class=\"content\">\r\n            <slot />\r\n          </div>\r\n\r\n          <div class=\"footer\">\r\n            <slot name=\"footer\" />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"6FAsBO,MAAMA,EAAkB,CAC7BC,EACAC,EACAC,IACW,qNASSF,EAAO,OAAS,4BACpBA,EAAO,UAAY,mDACEA,EAAO,KAAO,8OAa/CE,IAAa,OACT,sJAIA,6DAGKF,EAAO,IAAM,yRAWtBC,IAAa,QAAU,WAAa,uOAO7BA,IAAa,QAAU,QAAU,8FAClBD,EAAO,IAAMC,IAAa,QAAU,QAAU,kvCA8CtEE,EAAsB,SAAU,iB,MC1EvBC,EAAU,MAJvB,WAAAC,CAAAC,G,2CAMUC,KAAAC,aAAmC,KAOlBD,KAAAE,MAAe,OAQAF,KAAAP,KAAgB,MAG/BO,KAAAN,SAA2B,MAO5CM,KAAAL,SAA2B,OAG3BK,KAAAG,QAAkB,GA2DlBH,KAAAI,cAAgB,KACtBJ,KAAKK,QAAQC,MAAM,C,CApCrB,YAAAC,CAAaC,G,MACX,GAAIA,EAAU,CACZC,SAASC,KAAKC,MAAMC,SAAW,SAC/BZ,KAAKC,aAAeQ,SAASI,cAC7BC,uBAAsB,K,OACpBC,EAAAf,KAAKgB,WAAO,MAAAD,SAAA,SAAAA,EAAEE,OAAO,G,KAElB,CACLR,SAASC,KAAKC,MAAMC,SAAW,IAC/BG,EAAAf,KAAKC,gBAAY,MAAAc,SAAA,SAAAA,EAAEE,QACnBjB,KAAKC,aAAe,I,EAIxB,oBAAAiB,GACET,SAASC,KAAKC,MAAMC,SAAW,E,CASjC,SAAAO,CAAUC,GACR,GAAIpB,KAAKP,MAAQ2B,EAAEC,MAAQ,SAAU,CACnCD,EAAEE,iBACFtB,KAAKK,QAAQC,M,EAgBjB,MAAAiB,GACE,OACEC,EAACC,EAAI,CAAAJ,IAAA,wDAAarB,KAAKE,OACrBsB,EAAA,SAAAH,IAAA,4CAAQ7B,EAAgBQ,KAAKP,KAAMO,KAAKN,SAAUM,KAAKL,WAGvD6B,EAAA,OAAAH,IAAA,2CACEK,MAAM,WAAU,cACJ,OACZC,QAAS3B,KAAKI,gBAIhBoB,EAAA,OAAAH,IAAA,2CACEK,MAAM,QACNE,KAAK,SAAQ,aACF,OAAM,aACL5B,KAAKG,SAAW,SAC5B0B,UAAW,EACXC,IAAMC,IAAS/B,KAAKgB,QAAUe,CAAoB,GAElDP,EAAA,OAAAH,IAAA,2CAAKK,MAAM,UACTF,EAAA,QAAAH,IAAA,2CAAMK,MAAM,gBAAgB1B,KAAKG,SACjCqB,EAAA,QAAAH,IAAA,2CAAMW,KAAK,WACXR,EAAA,oBAAAH,IAAA,2CACEY,KAAK,IACLC,MAAM,eACNC,KAAK,KACLC,UAAW,KACXT,QAAS3B,KAAKI,iBAIlBoB,EAAA,OAAAH,IAAA,2CAAKK,MAAM,WACTF,EAAA,QAAAH,IAAA,8CAGFG,EAAA,OAAAH,IAAA,2CAAKK,MAAM,UACTF,EAAA,QAAAH,IAAA,2CAAMW,KAAK,a","ignoreList":[]}

package/dist/diwa-components/p-bd501daa.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as a,h as i,H as n}from"./p-ed4017f0.js";import{a as t}from"./p-70bbb21a.js";const r=(e,a,i,n,r)=>{const s=e==="error"?"var(--diwa-notification-error)":e==="success"?"var(--diwa-notification-success)":"var(--diwa-input-border, var(--diwa-border))";const d=e==="error"?"var(--diwa-notification-error)":e==="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      ${a?"opacity: 0.5; pointer-events: none;":""}\n    }\n    .textarea-wrapper:not(:has(textarea:disabled)):not(:has(textarea[readonly])):hover {\n      border-color: ${e==="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){e(this,i);this.input=a(this,"input",7);this.change=a(this,"change",7);this.blur=a(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=e=>{this.value=e.target.value;this.input.emit(this.value)};this.handleChange=e=>{this.value=e.target.value;this.change.emit(this.value)};this.handleBlur=e=>{this.blur.emit(e)}}render(){const e="textarea";const a="desc";const t="msg";return i(n,{key:"bc8c28e4261d600dcd7279fbf83f3c69598bede9","data-theme":this.theme},i("style",{key:"6424b2957223222e398afbd46110e7da11e074d0",innerHTML:r(this.state,this.disabled,this.readOnly,this.resize,this.compact)}),i("div",{key:"f99c09858acafd13e43389f0fdeef23352016658",class:"root"},!this.hideLabel&&this.label&&i("div",{key:"19062e869778b9f486c110a8a501fbdd77c7a629",class:"label-row"},i("label",{key:"6b7e15fd5794920731f84abb408f4c73c212a03a",class:"label",htmlFor:e},this.label,this.required&&i("span",{key:"2fce6e00c084737d175057e6d0fe291962152f9f",class:"required","aria-hidden":"true"}," *")),i("slot",{key:"20de835c3283696e786370a8b9e667ad14811f65",name:"label-after"})),i("div",{key:"5ce3c0798d9085266c19623aec5c84809e8abe2f",class:"textarea-wrapper"},i("textarea",{key:"76b21ac80b5f7609692af0dd78badc4bbdc1c8c2",class:"ta",id:e,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?a:undefined,onInput:this.handleInput,onChange:this.handleChange,onBlur:this.handleBlur})),!this.message&&this.description&&i("p",{key:"8b8914744e47cedda2ceeea9dc004cfb8712fa15",id:a,class:"description"},this.description),this.message&&i("p",{key:"f3678d9d8eeb81e12bd98aac8186df07c7b17369",id:t,class:"message"},this.message)))}static get delegatesFocus(){return true}};export{s as diwa_textarea};
-//# sourceMappingURL=p-bd501daa.entry.js.map

package/dist/diwa-components/p-bd501daa.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","state","disabled","readOnly","resize","compact","borderColor","messageColor","getReducedMotionStyle","DiwaTextarea","constructor","hostRef","this","label","description","message","name","value","placeholder","required","rows","hideLabel","theme","handleInput","e","target","input","emit","handleChange","change","handleBlur","blur","render","taId","descId","msgId","h","Host","key","innerHTML","class","htmlFor","id","undefined","maxLength","minLength","onInput","onChange","onBlur"],"sources":["src/components/diwa-textarea/diwa-textarea-styles.ts","src/components/diwa-textarea/diwa-textarea.tsx"],"sourcesContent":["import type { InputFieldState } from '../diwa-input/types';\r\nimport type { TextareaResize } from './types';\r\nimport { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport type { TextareaResize } from './types';\r\n\r\nexport const getComponentCss = (\r\n  state: InputFieldState,\r\n  disabled: boolean,\r\n  readOnly: boolean,\r\n  resize: TextareaResize,\r\n  compact: boolean,\r\n): string => {\r\n  const borderColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-input-border, var(--diwa-border))';\r\n\r\n  const messageColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-text-secondary)';\r\n\r\n  return `\r\n    :host {\r\n      display: block;\r\n      font-family: var(--diwa-font-family-base);\r\n      outline: none;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .root {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--diwa-space-2);\r\n    }\r\n    .label-row {\r\n      display: flex;\r\n      align-items: baseline;\r\n      gap: var(--diwa-space-1);\r\n    }\r\n    .label {\r\n      display: block;\r\n      font-size: var(--diwa-font-size-sm);\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n    }\r\n    .required {\r\n      color: var(--diwa-notification-error);\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n    }\r\n    .textarea-wrapper {\r\n      position: relative;\r\n      display: flex;\r\n      background: var(--diwa-input-bg, var(--diwa-bg-input));\r\n      border: var(--diwa-border-width-thin) solid ${borderColor};\r\n      border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\r\n      box-sizing: border-box;\r\n      transition: border-color var(--diwa-transition-base);\r\n      ${disabled ? 'opacity: 0.5; pointer-events: none;' : ''}\r\n    }\r\n    .textarea-wrapper:not(:has(textarea:disabled)):not(:has(textarea[readonly])):hover {\r\n      border-color: ${state === 'none' ? 'var(--diwa-border-hover)' : borderColor};\r\n    }\r\n    .textarea-wrapper:focus-within {\r\n      border-color: var(--diwa-border-focus);\r\n    }\r\n    ${readOnly ? `.textarea-wrapper { background: var(--diwa-bg-surface); border-style: dashed; }` : ''}\r\n    .ta {\r\n      width: 100%;\r\n      min-height: ${compact ? '64px' : '96px'};\r\n      padding: ${compact ? '6px 10px' : '10px 12px'};\r\n      background: transparent;\r\n      border: none;\r\n      outline: none;\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-base)'};\r\n      color: var(--diwa-text-primary);\r\n      resize: ${resize};\r\n      box-sizing: border-box;\r\n    }\r\n    .ta::placeholder {\r\n      color: var(--diwa-text-muted);\r\n    }\r\n    .description {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n    .message {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: ${messageColor};\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n\r\n    ${getReducedMotionStyle('.textarea-wrapper')}\r\n  `;\r\n};\r\n","import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TextareaResize } from './types';\r\nimport { getComponentCss } from './diwa-textarea-styles';\r\n\r\n/**\r\n * @slot label-after — Content placed after the label (e.g. a diwa-popover).\r\n *\r\n * @controlled {\"props\": [\"value\"], \"event\": \"input\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-textarea',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaTextarea {\r\n  /** Visible label text. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Supplementary description shown below the label. */\r\n  @Prop() description: string = '';\r\n\r\n  /** Validation state affecting border colour and message colour. */\r\n  @Prop() state: InputFieldState = 'none';\r\n\r\n  /** Feedback message shown when state is \"error\" or \"success\". */\r\n  @Prop() message: string = '';\r\n\r\n  /** The name attribute forwarded to the native textarea. */\r\n  @Prop() name: string = '';\r\n\r\n  /** Current value. Update in response to the input event. */\r\n  @Prop({ mutable: true }) value: string = '';\r\n\r\n  /** Placeholder text shown when the textarea is empty. */\r\n  @Prop() placeholder: string = '';\r\n\r\n  /** Whether the textarea is required. */\r\n  @Prop() required: boolean = false;\r\n\r\n  /** Whether the textarea is disabled. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Whether the textarea is read-only. */\r\n  @Prop({ reflect: true }) readOnly: boolean = false;\r\n\r\n  /** Maximum character length. */\r\n  @Prop() maxLength?: number;\r\n\r\n  /** Minimum character length. */\r\n  @Prop() minLength?: number;\r\n\r\n  /** Number of visible text rows. */\r\n  @Prop() rows: number = 4;\r\n\r\n  /** Controls which dimensions can be resized by the user. */\r\n  @Prop() resize: TextareaResize = 'vertical';\r\n\r\n  /** Renders a compact version with reduced padding and font size. */\r\n  @Prop() compact: boolean = false;\r\n\r\n  /** Hides the label visually (label is still in the DOM for screen readers). */\r\n  @Prop() hideLabel: boolean = false;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Emitted on every keystroke. Detail contains the current value string. */\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n\r\n  /** Emitted when the textarea loses focus after value changes. */\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n\r\n  /** Emitted when the textarea loses focus. */\r\n  @Event({ bubbles: false, composed: false }) blur!: EventEmitter<FocusEvent>;\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLTextAreaElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLTextAreaElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => {\r\n    this.blur.emit(e);\r\n  };\r\n\r\n  render() {\r\n    const taId = 'textarea';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readOnly, this.resize, this.compact)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={taId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"textarea-wrapper\">\r\n            <textarea\r\n              class=\"ta\"\r\n              id={taId}\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readOnly}\r\n              rows={this.rows}\r\n              maxLength={this.maxLength}\r\n              minLength={this.minLength}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n            />\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"6FAMO,MAAMA,EAAkB,CAC7BC,EACAC,EACAC,EACAC,EACAC,KAEA,MAAMC,EACJL,IAAU,QACN,iCACAA,IAAU,UACR,mCACA,+CAER,MAAMM,EACJN,IAAU,QACN,iCACAA,IAAU,UACR,mCACA,6BAER,MAAO,u6BAkC2CK,gLAI5CJ,EAAW,sCAAwC,4HAGrCD,IAAU,OAAS,2BAA6BK,8GAKhEH,EAAW,kFAAoF,wDAGjFE,EAAU,OAAS,2BACtBA,EAAU,WAAa,+JAKrBA,EAAU,2BAA6B,wFAE1CD,kXAcDG,0FAKTC,EAAsB,0BACzB,E,MCzFUC,EAAY,MAJzB,WAAAC,CAAAC,G,iGAMUC,KAAAC,MAAgB,GAGhBD,KAAAE,YAAsB,GAGtBF,KAAAX,MAAyB,OAGzBW,KAAAG,QAAkB,GAGlBH,KAAAI,KAAe,GAGEJ,KAAAK,MAAgB,GAGjCL,KAAAM,YAAsB,GAGtBN,KAAAO,SAAoB,MAGHP,KAAAV,SAAoB,MAGpBU,KAAAT,SAAoB,MASrCS,KAAAQ,KAAe,EAGfR,KAAAR,OAAyB,WAGzBQ,KAAAP,QAAmB,MAGnBO,KAAAS,UAAqB,MAGJT,KAAAU,MAAe,OAWhCV,KAAAW,YAAeC,IACrBZ,KAAKK,MAASO,EAAEC,OAA+BR,MAC/CL,KAAKc,MAAMC,KAAKf,KAAKK,MAAM,EAGrBL,KAAAgB,aAAgBJ,IACtBZ,KAAKK,MAASO,EAAEC,OAA+BR,MAC/CL,KAAKiB,OAAOF,KAAKf,KAAKK,MAAM,EAGtBL,KAAAkB,WAAcN,IACpBZ,KAAKmB,KAAKJ,KAAKH,EAAE,C,CAGnB,MAAAQ,GACE,MAAMC,EAAO,WACb,MAAMC,EAAS,OACf,MAAMC,EAAQ,MAEd,OACEC,EAACC,EAAI,CAAAC,IAAA,wDAAa1B,KAAKU,OACrBc,EAAA,SAAAE,IAAA,2CAAOC,UAAWvC,EAAgBY,KAAKX,MAAOW,KAAKV,SAAUU,KAAKT,SAAUS,KAAKR,OAAQQ,KAAKP,WAC9F+B,EAAA,OAAAE,IAAA,2CAAKE,MAAM,SACP5B,KAAKS,WAAaT,KAAKC,OACvBuB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,aACTJ,EAAA,SAAAE,IAAA,2CAAOE,MAAM,QAAQC,QAASR,GAC3BrB,KAAKC,MACLD,KAAKO,UAAYiB,EAAA,QAAAE,IAAA,2CAAME,MAAM,WAAU,cAAa,QAAM,OAE7DJ,EAAA,QAAAE,IAAA,2CAAMtB,KAAK,iBAGfoB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,oBACTJ,EAAA,YAAAE,IAAA,2CACEE,MAAM,KACNE,GAAIT,EACJjB,KAAMJ,KAAKI,MAAQ2B,UACnB1B,MAAOL,KAAKK,MACZC,YAAaN,KAAKM,aAAeyB,UACjCzC,SAAUU,KAAKV,SACfiB,SAAUP,KAAKO,SACfhB,SAAUS,KAAKT,SACfiB,KAAMR,KAAKQ,KACXwB,UAAWhC,KAAKgC,UAChBC,UAAWjC,KAAKiC,UAAS,aACbjC,KAAKS,WAAaT,KAAKC,MAAQD,KAAKC,MAAQ8B,UAAS,eACnD/B,KAAKX,QAAU,QAAU,OAAS0C,UAAS,gBAC1C/B,KAAKO,SAAW,OAASwB,UAAS,mBAC/B/B,KAAKG,QAAUoB,EAAQvB,KAAKE,YAAcoB,EAASS,UACrEG,QAASlC,KAAKW,YACdwB,SAAUnC,KAAKgB,aACfoB,OAAQpC,KAAKkB,eAGflB,KAAKG,SAAWH,KAAKE,aACrBsB,EAAA,KAAAE,IAAA,2CAAGI,GAAIR,EAAQM,MAAM,eAAe5B,KAAKE,aAE1CF,KAAKG,SACJqB,EAAA,KAAAE,IAAA,2CAAGI,GAAIP,EAAOK,MAAM,WAAW5B,KAAKG,U","ignoreList":[]}

package/dist/diwa-components/p-c6ca8d8b.entry.js

@@ -1,2 +0,0 @@
-import{r as n,h as e,H as t,g as a}from"./p-ed4017f0.js";import{g as i,a as o}from"./p-70bbb21a.js";const r=()=>`\n\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  /* Stretch: fill the parent's inline axis */\n  :host([stretch]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* ── Root element (<a> or <span>) ───────────────────────────────────── */\n\n  .root {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--diwa-space-2);\n    flex-direction: row; /* overridden by alignLabel=start below */\n\n    background: transparent;\n    border: none;\n    padding: var(--diwa-space-0-5) var(--diwa-space-1);\n    margin: 0;\n    cursor: pointer;\n\n    font-family: inherit;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-font-weight-regular);\n    line-height: 1;\n    color: var(--diwa-text-primary);\n    text-decoration: none;\n    white-space: nowrap;\n\n    -webkit-appearance: none;\n    appearance: none;\n    -webkit-font-smoothing: antialiased;\n\n    border-radius: var(--diwa-radius-sm);\n  }\n\n  /* Stretch: push icon and label to opposite edges */\n  :host([stretch]) .root {\n    width: 100%;\n    justify-content: space-between;\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${i(".root")}\n\n  /* ── Size ───────────────────────────────────────────────────────────── */\n\n  :host([size="sm"]) .root {\n    font-size: var(--diwa-font-size-sm);\n  }\n\n  :host([size="lg"]) .root {\n    font-size: var(--diwa-font-size-lg);\n  }\n\n  /* ── Hover ──────────────────────────────────────────────────────────── */\n\n  .root:hover {\n    background-color: var(--diwa-bg-hover);\n  }\n\n  /* ── Active state (CSS :active + [active] prop) ─────────────────────── */\n\n  :host([active]) .root,\n  .root:active {\n    background-color: var(--diwa-bg-active);\n    color: var(--diwa-text-primary);\n  }\n\n  /* ── Visited — prevent browser default purple ───────────────────────── */\n\n  .root:visited {\n    color: var(--diwa-text-primary);\n  }\n\n  /* ── alignLabel: start → label on left, icon on right ──────────────── */\n\n  :host([align-label="start"]) .root {\n    flex-direction: row-reverse;\n  }\n\n  /* ── Underline label text ───────────────────────────────────────────── */\n\n  :host([underline]) .label {\n    text-decoration: underline;\n  }\n\n  /* ── Icon wrapper ───────────────────────────────────────────────────── */\n\n  .icon {\n    display: contents;\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  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${o(".root")}\n`;const s=class{constructor(e){n(this,e);this.theme="dark";this.target="_self";this.icon="arrow-right";this.hideLabel=false;this.active=false;this.underline=false;this.size="md";this.alignLabel="end";this.stretch=false}render(){var n;const a=!!this.href;const i=a?"a":"span";const o=this.icon!=="none";const s=this.size==="sm"?14:this.size==="lg"?20:16;const d=a?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}:{}):{};return e(t,{key:"0e0d05c3d75ed6a26dd20de637c53590732d9644","data-theme":this.theme},e("style",{key:"1e28cd8c47349664fa39e5e232f36d3f860e9e45",innerHTML:r()}),e(i,Object.assign({key:"98d380c84bb6f5a2e0ea475b0ba0e958567da554",class:"root"},d,{part:"base"}),o&&e("span",{key:"bc73de7dc37ae05c8da660681e118c3130e58a54",class:"icon","aria-hidden":"true"},e("diwa-icon",{key:"657f77e2f0403f80c0433570349ba3221edeb3f2",name:this.icon,size:s})),e("span",{key:"65ab163880ea086929465145915fa8e20d14ee53",class:`label${this.hideLabel?" label--hidden":""}`,part:"label"},e("slot",{key:"243b92cd0e03e04e05cc38dcc2ecf47297f6db94"}))))}static get delegatesFocus(){return true}get host(){return a(this)}};export{s as diwa_link_pure};
-//# sourceMappingURL=p-c6ca8d8b.entry.js.map

package/dist/diwa-components/p-c6ca8d8b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","getFocusStyle","getReducedMotionStyle","DiwaLinkPure","constructor","hostRef","this","theme","target","icon","hideLabel","active","underline","size","alignLabel","stretch","render","isAnchor","href","Tag","hasIcon","iconSize","anchorProps","download","rel","_a","undefined","label","h","Host","key","innerHTML","Object","assign","class","part","name"],"sources":["src/components/diwa-link-pure/diwa-link-pure-styles.ts","src/components/diwa-link-pure/diwa-link-pure.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\n\nexport const getComponentCss = (): string => `\n\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  /* Stretch: fill the parent's inline axis */\n  :host([stretch]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* ── Root element (<a> or <span>) ───────────────────────────────────── */\n\n  .root {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--diwa-space-2);\n    flex-direction: row; /* overridden by alignLabel=start below */\n\n    background: transparent;\n    border: none;\n    padding: var(--diwa-space-0-5) var(--diwa-space-1);\n    margin: 0;\n    cursor: pointer;\n\n    font-family: inherit;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-font-weight-regular);\n    line-height: 1;\n    color: var(--diwa-text-primary);\n    text-decoration: none;\n    white-space: nowrap;\n\n    -webkit-appearance: none;\n    appearance: none;\n    -webkit-font-smoothing: antialiased;\n\n    border-radius: var(--diwa-radius-sm);\n  }\n\n  /* Stretch: push icon and label to opposite edges */\n  :host([stretch]) .root {\n    width: 100%;\n    justify-content: space-between;\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${getFocusStyle('.root')}\n\n  /* ── Size ───────────────────────────────────────────────────────────── */\n\n  :host([size=\"sm\"]) .root {\n    font-size: var(--diwa-font-size-sm);\n  }\n\n  :host([size=\"lg\"]) .root {\n    font-size: var(--diwa-font-size-lg);\n  }\n\n  /* ── Hover ──────────────────────────────────────────────────────────── */\n\n  .root:hover {\n    background-color: var(--diwa-bg-hover);\n  }\n\n  /* ── Active state (CSS :active + [active] prop) ─────────────────────── */\n\n  :host([active]) .root,\n  .root:active {\n    background-color: var(--diwa-bg-active);\n    color: var(--diwa-text-primary);\n  }\n\n  /* ── Visited — prevent browser default purple ───────────────────────── */\n\n  .root:visited {\n    color: var(--diwa-text-primary);\n  }\n\n  /* ── alignLabel: start → label on left, icon on right ──────────────── */\n\n  :host([align-label=\"start\"]) .root {\n    flex-direction: row-reverse;\n  }\n\n  /* ── Underline label text ───────────────────────────────────────────── */\n\n  :host([underline]) .label {\n    text-decoration: underline;\n  }\n\n  /* ── Icon wrapper ───────────────────────────────────────────────────── */\n\n  .icon {\n    display: contents;\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  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${getReducedMotionStyle('.root')}\n`;","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport type { LinkPureSize, LinkPureAlignLabel, LinkTarget } from \"./types\";\nimport type { Theme } from \"../../utils/styles\";\nimport { getComponentCss } from \"./diwa-link-pure-styles\";\n\n/**\n * @component diwa-link-pure\n *\n * A minimal, text+icon link — no background or border. Mirrors PDS p-link-pure.\n * Renders as <a> when href is set, otherwise as a non-interactive <span>.\n *\n * Usage:\n *   <diwa-link-pure href=\"/more\">Read more</diwa-link-pure>\n *   <diwa-link-pure href=\"/back\" icon=\"arrow-left\" align-label=\"start\">Back</diwa-link-pure>\n *   <diwa-link-pure href=\"/close\" hide-label label=\"Close\" icon=\"x\" />\n *\n * @slot default — Link label text\n */\n@Component({\n  tag: \"diwa-link-pure\",\n  shadow: { delegatesFocus: true },\n})\nexport class DiwaLinkPure {\n  @Element() host!: HTMLDiwaLinkPureElement;\n\n  /** Per-component theme override (light / dark). */\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\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  /**\n   * Lucide icon name (kebab-case, e.g. \"arrow-right\"), or \"none\" to hide icon.\n   * Defaults to \"arrow-right\" — matching PDS p-link-pure.\n   */\n  @Prop() icon: string = \"arrow-right\";\n\n  /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */\n  @Prop({ reflect: true }) hideLabel: boolean = false;\n\n  /** Display the link in active/pressed visual state. */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Shows an underline decoration on the label text. */\n  @Prop({ reflect: true }) underline: boolean = false;\n\n  /** Text size tier — also scales the icon. */\n  @Prop({ reflect: true }) size: LinkPureSize = \"md\";\n\n  /**\n   * Controls label position relative to the icon.\n   * \"end\" (default): [icon] [label]\n   * \"start\":         [label] [icon]\n   */\n  @Prop({ reflect: true }) alignLabel: LinkPureAlignLabel = \"end\";\n\n  /** Stretches the link to fill its container width. */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  /** Accessible aria-label override — useful for icon-only links. */\n  @Prop() label?: string;\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.size === \"sm\" ? 14 : this.size === \"lg\" ? 20 : 16;\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        }\n      : {};\n\n    return (\n      <Host data-theme={this.theme}>\n        <style innerHTML={getComponentCss()} />\n        <Tag class=\"root\" {...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,m3CA0DzCC,EAAc,wlDAoEdC,EAAsB,a,MC1GbC,EAAY,MAJzB,WAAAC,CAAAC,G,UAQ2BC,KAAAC,MAAe,OAMhCD,KAAAE,OAAqB,QAYrBF,KAAAG,KAAe,cAGEH,KAAAI,UAAqB,MAGrBJ,KAAAK,OAAkB,MAGlBL,KAAAM,UAAqB,MAGrBN,KAAAO,KAAqB,KAOrBP,KAAAQ,WAAiC,MAGjCR,KAAAS,QAAmB,K,CAK5C,MAAAC,G,MACE,MAAMC,IAAaX,KAAKY,KACxB,MAAMC,EAAMF,EAAY,IAAe,OACvC,MAAMG,EAAUd,KAAKG,OAAS,OAC9B,MAAMY,EAAWf,KAAKO,OAAS,KAAO,GAAKP,KAAKO,OAAS,KAAO,GAAK,GAErE,MAAMS,EAAcL,E,eAEdC,KAAMZ,KAAKY,KACXV,OAAQF,KAAKE,OACbe,SAAUjB,KAAKiB,SACfC,KACEC,EAAAnB,KAAKkB,OAAG,MAAAC,SAAA,EAAAA,EACPnB,KAAKE,SAAW,SAAW,sBAAwBkB,WAClDpB,KAAKqB,MAAQ,CAAE,aAAcrB,KAAKqB,OAAU,IAElD,GAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,wDAAaxB,KAAKC,OACrBqB,EAAA,SAAAE,IAAA,2CAAOC,UAAW/B,MAClB4B,EAACT,EAAGa,OAAAC,OAAA,CAAAH,IAAA,2CAACI,MAAM,QAAWZ,EAAW,CAAEa,KAAK,SACrCf,GACCQ,EAAA,QAAAE,IAAA,2CAAMI,MAAM,OAAM,cAAa,QAC7BN,EAAA,aAAAE,IAAA,2CAAWM,KAAM9B,KAAKG,KAAMI,KAAMQ,KAGtCO,EAAA,QAAAE,IAAA,2CACEI,MAAO,QAAQ5B,KAAKI,UAAY,iBAAmB,KACnDyB,KAAK,SAELP,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

package/dist/diwa-components/p-c78591ce.entry.js

@@ -1,2 +0,0 @@
-import{r as n,c as a,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=n=>Array.from(n.querySelectorAll(o));const l=(n,a,e)=>{if(!a.length)return;const i=a[0];const t=a[a.length-1];if(n.shiftKey){if(e===i){n.preventDefault();t.focus()}}else{if(e===t){n.preventDefault();i.focus()}}};const c=(n,a,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: ${n?"auto":"none"};\n    visibility: ${n?"visible":"hidden"};\n    transition: visibility 0s linear ${n?"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    ${a==="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: ${n?"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: ${n?"1":"0"};\n    transform: ${n?"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){n(this,e);this.dismiss=a(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(n){var a;if(n){this._savedFocus=document.activeElement;document.body.style.overflow="hidden";requestAnimationFrame((()=>{var n;(n=this._modalEl)===null||n===void 0?void 0:n.focus()}))}else{document.body.style.overflow="";(a=this._savedFocus)===null||a===void 0?void 0:a.focus();this._savedFocus=null}}onKeyDown(n){if(!this.open)return;if(n.key==="Escape"){n.preventDefault();this.handleDismiss();return}if(n.key==="Tab"){const a=this.host.shadowRoot;if(!a)return;const e=s(a);l(n,e,a.activeElement)}}render(){const{open:n,heading:a,dismissButton:t,backdrop:d,_hasFooter:r,_hasHeader:o}=this;return e(i,{key:"a7c4c46ac2022eff1f585955d327e8b5614b268a","data-theme":this.theme},e("style",{key:"d4fd6c7649e8a6cacef20de25e1545dde2a7c89e"},c(n,d,t,r)),e("div",{key:"2aa898b9fc1136a36f8e2f9b15180d7f0573002c",class:"backdrop","aria-hidden":"true",onClick:this.handleBackdropClick}),e("div",{key:"0c61a254601a455b6082e15d797d15f09b7d0393",class:"modal",role:"dialog","aria-modal":"true","aria-labelledby":a?this._headingId:undefined,"aria-label":!a?"Dialog":undefined,"aria-hidden":n?undefined:"true",tabIndex:-1,ref:n=>{this._modalEl=n}},e("div",{key:"7dd4938654021ff4e7002e0944bb3c630fa475a0",class:"header"},e("div",{key:"d2b1302f27595ba0cac1284486bc9a4ae2d4f6e2",class:"header-top"},a&&e("h2",{key:"35ee9c3a96497b3ab7787bdcb22758b5225db485",class:"heading",id:this._headingId},a),t&&e("button",{key:"83452c628da2141bada1153e6cea6224027a2862",class:"dismiss",type:"button","aria-label":"Close dialog",onClick:this.handleDismiss},e("svg",{key:"87ce4e4636ab5a191b4f6928b78ad75ef31ffa3b",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:"940d065be71549f24cfc2f94b9407b80f8819f08",d:"M18 6 6 18M6 6l12 12"})))),o&&e("div",{key:"65484bca3079d7707c52da339291dddbf1d3f427",class:"header-sub"},e("slot",{key:"4653c0604f79201777fdb247562da2b712ef67d7",name:"header"}))),e("div",{key:"1516ef5894e7bd58708c63dffca0bd0cd83b250f",class:"body"},e("slot",{key:"0f5692e741ddc5ba6c68e556efbcec420339890e"})),r&&e("div",{key:"96eba8b23a345cecb3a18356cae02dd257daa185",class:"footer"},e("slot",{key:"ac9d27e700733b3124392cc7ee9331d2b864f5b4",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-c78591ce.entry.js.map

package/dist/diwa-components/p-c78591ce.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as n,h as e,H as i}from"./p-ed4017f0.js";import{a as r}from"./p-70bbb21a.js";import{L as s}from"./p-ac8e14be.js";const t=()=>`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    align-self: center;\n    width: var(--diwa-spinner-size-md);\n    height: var(--diwa-spinner-size-md);\n  }\n\n  :host([size="sm"]) {\n    width: var(--diwa-spinner-size-sm);\n    height: var(--diwa-spinner-size-sm);\n  }\n\n  :host([size="lg"]) {\n    width: var(--diwa-spinner-size-lg);\n    height: var(--diwa-spinner-size-lg);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .glyph {\n    display: block;\n    width: 100%;\n    height: 100%;\n    color: var(--diwa-spinner-color, currentColor);\n    animation: diwa-spinner-spin var(--diwa-spinner-duration) linear infinite;\n    transform-origin: center;\n  }\n\n  @keyframes diwa-spinner-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  ${r(".glyph")}\n`;var a;function o(n){return n.map((([n,e])=>{const i=Object.entries(e).map((([n,e])=>`${n}="${e}"`)).join(" ");return`<${n} ${i}/>`})).join("")}const d=o((a=s)!==null&&a!==void 0?a:[]);const h=class{constructor(e){n(this,e);this.size="md";this.theme="dark";this.label="Loading"}componentDidRender(){if(this.svgEl){this.svgEl.innerHTML=d}}render(){return e(i,{key:"a706f0d4b8ca5581f7375e4f0d36f46166974fbe",role:"status","aria-label":this.label,"data-theme":this.theme},e("style",{key:"b01e2dc30f9b3c4c5422fc9f58055b4e29e660c0",innerHTML:t()}),e("svg",{key:"dae9e1f32d62abf2e5918c8841bb25a590b0e385",ref:n=>this.svgEl=n,class:"glyph","aria-hidden":"true",part:"ring",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}))}};export{h as diwa_spinner};
-//# sourceMappingURL=p-cc0e1662.entry.js.map

package/dist/diwa-components/p-cc0e1662.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","getReducedMotionStyle","toInnerSvg","nodes","map","tag","attrs","attrStr","Object","entries","k","v","join","loaderCircleSvg","_a","icons.LoaderCircle","DiwaSpinner","constructor","hostRef","this","size","theme","label","componentDidRender","svgEl","innerHTML","render","h","Host","key","role","ref","el","class","part","xmlns","viewBox","fill","stroke"],"sources":["src/components/diwa-spinner/diwa-spinner-styles.ts","src/components/diwa-spinner/diwa-spinner.tsx"],"sourcesContent":["import { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  :host {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    align-self: center;\r\n    width: var(--diwa-spinner-size-md);\r\n    height: var(--diwa-spinner-size-md);\r\n  }\r\n\r\n  :host([size=\"sm\"]) {\r\n    width: var(--diwa-spinner-size-sm);\r\n    height: var(--diwa-spinner-size-sm);\r\n  }\r\n\r\n  :host([size=\"lg\"]) {\r\n    width: var(--diwa-spinner-size-lg);\r\n    height: var(--diwa-spinner-size-lg);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .glyph {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    color: var(--diwa-spinner-color, currentColor);\r\n    animation: diwa-spinner-spin var(--diwa-spinner-duration) linear infinite;\r\n    transform-origin: center;\r\n  }\r\n\r\n  @keyframes diwa-spinner-spin {\r\n    to {\r\n      transform: rotate(360deg);\r\n    }\r\n  }\r\n\r\n  ${getReducedMotionStyle('.glyph')}\r\n`;\r\n","import { Component, Host, Prop, h } from \"@stencil/core\";\r\nimport { icons } from 'lucide';\r\nimport type { SpinnerSize } from \"./types\";\r\nimport type { Theme } from \"../../utils/styles\";\r\nimport { getComponentCss } from './diwa-spinner-styles';\r\n\r\ntype IconNode = ReadonlyArray<readonly [string, Record<string, string>]>;\r\n\r\nfunction toInnerSvg(nodes: IconNode): string {\r\n  return nodes\r\n    .map(([tag, attrs]) => {\r\n      const attrStr = Object.entries(attrs)\r\n        .map(([k, v]) => `${k}=\"${v}\"`)\r\n        .join(' ');\r\n      return `<${tag} ${attrStr}/>`;\r\n    })\r\n    .join('');\r\n}\r\n\r\nconst loaderCircleSvg = toInnerSvg((icons as Record<string, IconNode>).LoaderCircle ?? []);\r\n\r\n/**\r\n * @component diwa-spinner\r\n *\r\n * An animated loading indicator based on a Lucide circular spinner glyph.\r\n * Communicates asynchronous activity to both sighted users and screen readers\r\n * via role=\"status\" and an accessible label.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-spinner-size-sm    Diameter for the sm tier (default 14px)\r\n *   --diwa-spinner-size-md    Diameter for the md tier (default 16px)\r\n *   --diwa-spinner-size-lg    Diameter for the lg tier (default 20px)\r\n *   --diwa-spinner-color      Spinner stroke colour (defaults to currentColor)\r\n *\r\n * Usage:\r\n *   <diwa-spinner></diwa-spinner>\r\n *   <diwa-spinner size=\"lg\" label=\"Saving changes…\"></diwa-spinner>\r\n *\r\n * Parity: mirrors stateless/stateful spinner behavior with consistent\n * aria-label propagation and size variants.\n */\r\n@Component({\r\n  tag: \"diwa-spinner\",\r\n  shadow: true,\r\n})\r\nexport class DiwaSpinner {\r\n  private svgEl?: SVGSVGElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Size tier — controls diameter of the spinner ring. */\r\n  @Prop({ reflect: true }) size: SpinnerSize = \"md\";\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\r\n\r\n  /**\r\n   * Accessible label announced by screen readers.\r\n   * Defaults to \"Loading\" when omitted.\r\n   */\r\n  @Prop() label: string = \"Loading\";\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  componentDidRender() {\r\n    if (this.svgEl) {\r\n      this.svgEl.innerHTML = loaderCircleSvg;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      /**\r\n       * role=\"status\" on the Host allows screen readers to announce\r\n       * when the spinner appears without stealing focus (live region,\r\n       * polite by default). aria-label provides the announcement text.\r\n       */\r\n      <Host role=\"status\" aria-label={this.label} data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <svg\r\n          ref={(el) => (this.svgEl = el as SVGSVGElement)}\r\n          class=\"glyph\"\r\n          aria-hidden=\"true\"\r\n          part=\"ring\"\r\n          xmlns=\"http://www.w3.org/2000/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        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"0HAEO,MAAMA,EAAkB,IAAc,80BAwCzCC,EAAsB,c,MClC1B,SAASC,EAAWC,GAClB,OAAOA,EACJC,KAAI,EAAEC,EAAKC,MACV,MAAMC,EAAUC,OAAOC,QAAQH,GAC5BF,KAAI,EAAEM,EAAGC,KAAO,GAAGD,MAAMC,OACzBC,KAAK,KACR,MAAO,IAAIP,KAAOE,KAAW,IAE9BK,KAAK,GACV,CAEA,MAAMC,EAAkBX,GAAWY,EAACC,KAA+C,MAAAD,SAAA,EAAAA,EAAI,I,MA0B1EE,EAAW,MAJxB,WAAAC,CAAAC,G,UAY2BC,KAAAC,KAAoB,KAGpBD,KAAAE,MAAe,OAMhCF,KAAAG,MAAgB,S,CAMxB,kBAAAC,GACE,GAAIJ,KAAKK,MAAO,CACdL,KAAKK,MAAMC,UAAYZ,C,EAI3B,MAAAa,GACE,OAMEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQ,aAAaX,KAAKG,MAAK,aAAcH,KAAKE,OAC3DM,EAAA,SAAAE,IAAA,2CAAOJ,UAAWzB,MAClB2B,EAAA,OAAAE,IAAA,2CACEE,IAAMC,GAAQb,KAAKK,MAAQQ,EAC3BC,MAAM,QAAO,cACD,OACZC,KAAK,OACLC,MAAM,6BACNC,QAAQ,YACRC,KAAK,OACLC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,kBACN,U","ignoreList":[]}

package/dist/diwa-components/p-d25377eb.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as t,h as e,H as i,g as a}from"./p-ed4017f0.js";import{g as d}from"./p-35c7c864.js";import"./p-70bbb21a.js";const h=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.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)}}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";return e(i,{key:"b2e62b6ebe5a56ed9620ec7fca5f1d7a7e81460b","data-theme":this.theme},e("style",{key:"a638a4f4726f062889a190f97bff942f48d6f1d2",innerHTML:d(this.state,this.disabled,this.readonly,this.compact,this._hasStart,this._hasEnd,false)}),e("div",{key:"c1a9ec3da64ddd4e834afb897dd0323dc076b02d",class:"root"},!this.hideLabel&&this.label&&e("div",{key:"606302a7436a401cd3a636a587e1741fdfafb0d4",class:"label-row"},e("label",{key:"569bab43ec04b919c0c9bb4ccdebe734daf63c23",class:"label",htmlFor:s},this.label,this.required&&e("span",{key:"13aadb282c3e0479895c6a66bbe85ecfce393fb8",class:"required","aria-hidden":"true"}," *")),e("slot",{key:"17000b6bf4cd3e63fe7bb6a2919e40092883fac2",name:"label-after"})),e("div",{key:"e5d271956dc4084a53de67a9a4343aff72f07685",class:"input-wrapper"},this._hasStart&&e("div",{key:"d9fabf419d808c27852d0168c6c463b5cb038562",class:"slot-start"},e("slot",{key:"8b296314bf7a12d604e3410adafa6ccfca1c81dd",name:"start"})),e("input",{key:"c833d8b9412da6d72f979233c7c25878ed25c766",id:s,class:"input",type:"week",name:this.name||undefined,value:this.value,disabled:this.disabled,required:this.required,readOnly:this.readonly,min:this.min,max:this.max,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:"ee2fd8dce634707092c6fd91a998cca609859f33",class:"slot-end"},e("slot",{key:"5ecc37cb93d82d514ee9a2243e45b393277727ba",name:"end"}))),!this.message&&this.description&&e("p",{key:"df2a4edb4734385a4c8107f261ef95f7a96472f2",id:t,class:"description"},this.description),this.message&&e("p",{key:"1194dfd983f4113f9accf0a84938b378f30687f1",id:a,class:"message"},this.message)))}static get delegatesFocus(){return true}get el(){return a(this)}};export{h as diwa_input_week};
-//# sourceMappingURL=p-d25377eb.entry.js.map

package/dist/diwa-components/p-d25377eb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DiwaInputWeek","constructor","hostRef","this","_hasStart","_hasEnd","label","description","message","state","name","value","placeholder","disabled","required","readonly","hideLabel","compact","theme","handleInput","e","target","input","emit","handleChange","change","handleBlur","blur","handleFocus","focus","connectedCallback","el","querySelector","render","inputId","descId","msgId","h","Host","key","innerHTML","getComponentCss","class","htmlFor","id","type","undefined","readOnly","min","max","autocomplete","autoComplete","onInput","onChange","onBlur","onFocus"],"sources":["src/components/diwa-input-week/diwa-input-week.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-week-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-week',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputWeek {\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  /** Minimum week in YYYY-Www format (e.g. 2024-W01). */\r\n  @Prop() min?: string;\r\n  /** Maximum week in YYYY-Www format (e.g. 2024-W52). */\r\n  @Prop() max?: string;\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  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false)} />\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=\"week\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              min={this.min}\r\n              max={this.max}\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          </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-d917625e.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as n,H as t,g as s}from"./p-ed4017f0.js";import{a}from"./p-70bbb21a.js";const o=(i,e,n)=>{const t=i==="error"?"var(--diwa-notification-error)":i==="success"?"var(--diwa-notification-success)":"var(--diwa-input-border, var(--diwa-border))";const s=i==="error"?"var(--diwa-notification-error)":i==="success"?"var(--diwa-notification-success)":"var(--diwa-text-secondary)";const o=n?"36px":"44px";return`\n    :host {\n      display: inline-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      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    }\n    .boxes {\n      display: flex;\n      gap: var(--diwa-space-3);\n    }\n    .box {\n      width: ${o};\n      height: ${o};\n      padding: 0;\n      text-align: center;\n      font-family: var(--diwa-font-family-base);\n      font-size: ${n?"var(--diwa-font-size-base)":"var(--diwa-font-size-lg)"};\n      font-weight: var(--diwa-font-weight-semibold);\n      color: var(--diwa-text-primary);\n      background: var(--diwa-bg-input);\n      border: var(--diwa-border-width-thin) solid ${t};\n      border-radius: var(--diwa-radius-md);\n      outline: none;\n      transition: border-color var(--diwa-transition-base);\n      box-sizing: border-box;\n      ${e?"opacity: 0.5; pointer-events: none;":""}\n    }\n    .box:focus {\n      border-color: var(--diwa-input-border-focus, var(--diwa-border-focus));\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: ${s};\n      line-height: var(--diwa-line-height-normal);\n      margin: 0;\n    }\n\n    ${a("input")}\n  `};const r=class{constructor(n){i(this,n);this.update=e(this,"update",1);this.label="";this.description="";this.state="none";this.message="";this.length=4;this.value="";this.type="number";this.required=false;this.disabled=false;this.compact=false;this.hideLabel=false;this.theme="dark";this.handleInput=(i,e)=>{const n=i.target;const t=n.value.slice(-1);if(this.type==="number"&&t&&!/^\d$/.test(t)){n.value="";return}n.value=t;if(t){const i=this.getBoxes();if(e<i.length-1){i[e+1].focus();i[e+1].select()}}this.emitUpdate()};this.handleKeyDown=(i,e)=>{const n=this.getBoxes();const t=i.target;if(i.key==="Backspace"&&!t.value&&e>0){n[e-1].focus();n[e-1].select()}else if(i.key==="ArrowLeft"&&e>0){n[e-1].focus()}else if(i.key==="ArrowRight"&&e<n.length-1){n[e+1].focus()}};this.handlePaste=i=>{var e,n;i.preventDefault();const t=(n=(e=i.clipboardData)===null||e===void 0?void 0:e.getData("text"))!==null&&n!==void 0?n:"";const s=this.type==="number"?t.replace(/\D/g,""):t;const a=this.getBoxes();s.slice(0,this.length).split("").forEach(((i,e)=>{if(a[e])a[e].value=i}));const o=Math.min(s.length,this.length)-1;if(o>=0){a[o].focus();a[o].select()}this.emitUpdate()}}getBoxes(){var i,e;return Array.from((e=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.querySelectorAll(".box"))!==null&&e!==void 0?e:[])}emitUpdate(){const i=this.getBoxes();const e=i.map((i=>i.value)).join("");const n=e.length===this.length&&!e.includes("");this.update.emit({value:e,isComplete:n})}render(){const i=Math.max(1,Math.min(6,this.length));const e=this.value.padEnd(i,"").slice(0,i);const s="desc";const a="msg";return n(t,{key:"fd84239857264ac7ff2d70388a1b57ed28c139e1","data-theme":this.theme},n("style",{key:"8ca52e841f42b85be9b805443f76636e67108b00",innerHTML:o(this.state,this.disabled,this.compact)}),n("div",{key:"b9295c2b897c58294b87e069e874682f6882c526",class:"root"},!this.hideLabel&&this.label&&n("div",{key:"f53aa0736441db633eb7756c57091f5c86932781",class:"label-row"},n("span",{key:"95e0e0bf33034fe78d914046450a5eaddfdefadc",class:"label"},this.label,this.required&&n("span",{key:"8197798944a90f35349b68537d90670949451034",class:"required","aria-hidden":"true"}," *"))),n("div",{key:"8e7638e8c78f0f1b4ae673828d8c14682d39a76a",class:"boxes",role:"group","aria-label":this.hideLabel&&this.label?this.label:undefined},Array.from({length:i}).map(((t,o)=>{var r;return n("input",{key:o,class:"box",type:this.type==="password"?"password":"text",inputMode:this.type==="number"?"numeric":"text",maxLength:1,value:(r=e[o])!==null&&r!==void 0?r:"",disabled:this.disabled,required:this.required&&o===0,"aria-label":`Digit ${o+1} of ${i}`,"aria-describedby":o===0?this.message?a:this.description?s:undefined:undefined,onInput:i=>this.handleInput(i,o),onKeyDown:i=>this.handleKeyDown(i,o),onPaste:o===0?this.handlePaste:undefined,onFocus:i=>i.target.select(),autocomplete:o===0?"one-time-code":"off"})}))),!this.message&&this.description&&n("p",{key:"e596640dd57e61edcc854a19671d417c3fd1bf1d",id:s,class:"description"},this.description),this.message&&n("p",{key:"33741de2a6c5fa2e7d1072d5bf8d846cc54b6ddf",id:a,class:"message"},this.message)))}static get delegatesFocus(){return true}get host(){return s(this)}};export{r as diwa_pin_code};
-//# sourceMappingURL=p-d917625e.entry.js.map

package/dist/diwa-components/p-d917625e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","state","disabled","compact","borderColor","messageColor","boxSize","getReducedMotionStyle","DiwaPinCode","constructor","hostRef","this","label","description","message","length","value","type","required","hideLabel","theme","handleInput","e","index","input","target","char","slice","test","boxes","getBoxes","focus","select","emitUpdate","handleKeyDown","key","handlePaste","preventDefault","text","_b","_a","clipboardData","getData","digits","replace","split","forEach","i","lastFilled","Math","min","Array","from","host","shadowRoot","querySelectorAll","map","b","join","isComplete","includes","update","emit","render","safeLength","max","valueChars","padEnd","descId","msgId","h","Host","innerHTML","class","role","undefined","_","inputMode","maxLength","onInput","onKeyDown","onPaste","onFocus","autocomplete","id"],"sources":["src/components/diwa-pin-code/diwa-pin-code-styles.ts","src/components/diwa-pin-code/diwa-pin-code.tsx"],"sourcesContent":["import type { InputFieldState } from '../diwa-input/types';\r\nimport { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (\r\n  state: InputFieldState,\r\n  disabled: boolean,\r\n  compact: boolean,\r\n): string => {\r\n  const borderColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-input-border, var(--diwa-border))';\r\n\r\n  const messageColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-text-secondary)';\r\n\r\n  const boxSize = compact ? '36px' : '44px';\r\n\r\n  return `\r\n    :host {\r\n      display: inline-block;\r\n      font-family: var(--diwa-font-family-base);\r\n      outline: none;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .root {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--diwa-space-2);\r\n    }\r\n    .label-row {\r\n      display: flex;\r\n      align-items: baseline;\r\n      gap: var(--diwa-space-1);\r\n    }\r\n    .label {\r\n      font-size: var(--diwa-font-size-sm);\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n    }\r\n    .required {\r\n      color: var(--diwa-notification-error);\r\n    }\r\n    .boxes {\r\n      display: flex;\r\n      gap: var(--diwa-space-3);\r\n    }\r\n    .box {\r\n      width: ${boxSize};\r\n      height: ${boxSize};\r\n      padding: 0;\r\n      text-align: center;\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${compact ? 'var(--diwa-font-size-base)' : 'var(--diwa-font-size-lg)'};\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n      color: var(--diwa-text-primary);\r\n      background: var(--diwa-bg-input);\r\n      border: var(--diwa-border-width-thin) solid ${borderColor};\r\n      border-radius: var(--diwa-radius-md);\r\n      outline: none;\r\n      transition: border-color var(--diwa-transition-base);\r\n      box-sizing: border-box;\r\n      ${disabled ? 'opacity: 0.5; pointer-events: none;' : ''}\r\n    }\r\n    .box:focus {\r\n      border-color: var(--diwa-input-border-focus, var(--diwa-border-focus));\r\n    }\r\n    .description {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n    .message {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: ${messageColor};\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n\r\n    ${getReducedMotionStyle('input')}\r\n  `;\r\n};\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { PinCodeType, PinCodeUpdateEventDetail } from './types';\r\nimport { getComponentCss } from './diwa-pin-code-styles';\r\n\r\n/**\r\n * @controlled {\"props\": [\"value\"], \"event\": \"update\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-pin-code',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaPinCode {\r\n  @Element() host!: HTMLElement;\r\n\r\n  /** Visible label text. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Supplementary description below the label. */\r\n  @Prop() description: string = '';\r\n\r\n  /** Validation state. */\r\n  @Prop() state: InputFieldState = 'none';\r\n\r\n  /** Feedback message. */\r\n  @Prop() message: string = '';\r\n\r\n  /** Number of input boxes (1–6). */\r\n  @Prop() length: number = 4;\r\n\r\n  /** Current value string. Length should match the length prop. */\r\n  @Prop() value: string = '';\r\n\r\n  /** Input type — \"number\" restricts input to digits; \"password\" masks the value. */\r\n  @Prop() type: PinCodeType = 'number';\r\n\r\n  /** Whether the pin code is required. */\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n\r\n  /** Disables all input boxes. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Renders compact input boxes. */\r\n  @Prop() compact: boolean = false;\r\n\r\n  /** Hides the visible label while preserving it as accessible name. */\r\n  @Prop() hideLabel: boolean = false;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Emitted when any box value changes. */\r\n  @Event({ bubbles: false, composed: false }) update!: EventEmitter<PinCodeUpdateEventDetail>;\r\n\r\n  private getBoxes(): HTMLInputElement[] {\r\n    return Array.from(this.host.shadowRoot?.querySelectorAll('.box') ?? []) as HTMLInputElement[];\r\n  }\r\n\r\n  private emitUpdate(): void {\r\n    const boxes = this.getBoxes();\r\n    const value = boxes.map((b) => b.value).join('');\r\n    const isComplete = value.length === this.length && !value.includes('');\r\n    this.update.emit({ value, isComplete });\r\n  }\r\n\r\n  private handleInput = (e: Event, index: number): void => {\r\n    const input = e.target as HTMLInputElement;\r\n    const char = input.value.slice(-1);\r\n\r\n    if (this.type === 'number' && char && !/^\\d$/.test(char)) {\r\n      input.value = '';\r\n      return;\r\n    }\r\n\r\n    input.value = char;\r\n\r\n    if (char) {\r\n      const boxes = this.getBoxes();\r\n      if (index < boxes.length - 1) {\r\n        boxes[index + 1].focus();\r\n        boxes[index + 1].select();\r\n      }\r\n    }\r\n\r\n    this.emitUpdate();\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent, index: number): void => {\r\n    const boxes = this.getBoxes();\r\n    const input = e.target as HTMLInputElement;\r\n\r\n    if (e.key === 'Backspace' && !input.value && index > 0) {\r\n      boxes[index - 1].focus();\r\n      boxes[index - 1].select();\r\n    } else if (e.key === 'ArrowLeft' && index > 0) {\r\n      boxes[index - 1].focus();\r\n    } else if (e.key === 'ArrowRight' && index < boxes.length - 1) {\r\n      boxes[index + 1].focus();\r\n    }\r\n  };\r\n\r\n  private handlePaste = (e: ClipboardEvent): void => {\r\n    e.preventDefault();\r\n    const text = e.clipboardData?.getData('text') ?? '';\r\n    const digits = this.type === 'number' ? text.replace(/\\D/g, '') : text;\r\n    const boxes = this.getBoxes();\r\n\r\n    digits.slice(0, this.length).split('').forEach((char, i) => {\r\n      if (boxes[i]) boxes[i].value = char;\r\n    });\r\n\r\n    const lastFilled = Math.min(digits.length, this.length) - 1;\r\n    if (lastFilled >= 0) {\r\n      boxes[lastFilled].focus();\r\n      boxes[lastFilled].select();\r\n    }\r\n\r\n    this.emitUpdate();\r\n  };\r\n\r\n  render() {\r\n    const safeLength = Math.max(1, Math.min(6, this.length));\r\n    const valueChars = this.value.padEnd(safeLength, '').slice(0, safeLength);\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.compact)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <span class=\"label\">\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </span>\r\n            </div>\r\n          )}\r\n          <div\r\n            class=\"boxes\"\r\n            role=\"group\"\r\n            aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n          >\r\n            {Array.from({ length: safeLength }).map((_, i) => (\r\n              <input\r\n                key={i}\r\n                class=\"box\"\r\n                type={this.type === 'password' ? 'password' : 'text'}\r\n                inputMode={this.type === 'number' ? 'numeric' : 'text'}\r\n                maxLength={1}\r\n                value={valueChars[i] ?? ''}\r\n                disabled={this.disabled}\r\n                required={this.required && i === 0}\r\n                aria-label={`Digit ${i + 1} of ${safeLength}`}\r\n                aria-describedby={i === 0 ? (this.message ? msgId : this.description ? descId : undefined) : undefined}\r\n                onInput={(e) => this.handleInput(e, i)}\r\n                onKeyDown={(e) => this.handleKeyDown(e, i)}\r\n                onPaste={i === 0 ? this.handlePaste : undefined}\r\n                onFocus={(e) => (e.target as HTMLInputElement).select()}\r\n                autocomplete={i === 0 ? 'one-time-code' : 'off'}\r\n              />\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-db70e030.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as n,f as e,h as t,H as a,g as r}from"./p-ed4017f0.js";import{g as s,a as o}from"./p-70bbb21a.js";const d=(i,n,e,t,a=false)=>`\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    min-width: 0;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Label ──────────────────────────────────────────────────────────── */\n\n  .label {\n    display: block;\n    margin-bottom: var(--diwa-space-1);\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  :host([hide-label]) .label {\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  .label__required {\n    color: var(--diwa-notification-error);\n    font-weight: var(--diwa-font-weight-semibold);\n    margin-left: var(--diwa-space-1);\n  }\n\n  /* ── Description ────────────────────────────────────────────────────── */\n\n  .description {\n    display: block;\n    margin-bottom: var(--diwa-space-2);\n    font-size: var(--diwa-font-size-sm);\n    color: var(--diwa-text-secondary);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Trigger ────────────────────────────────────────────────────────── */\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-height: var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px));\n    padding: 0 var(--diwa-space-3);\n    box-sizing: border-box;\n    gap: var(--diwa-space-2);\n\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\n    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\n\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-font-weight-normal);\n    font-family: inherit;\n    color: var(--diwa-text-primary);\n    text-align: left;\n    line-height: 1;\n\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n\n    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast);\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    :host(:not([disabled])) .trigger:hover {\n      border-color: var(--diwa-border-hover);\n    }\n  }\n\n  ${i&&!a?".trigger { border-color: var(--diwa-border-focus); border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0; }":""}\n  ${i&&a?".trigger { border-color: var(--diwa-border-focus); border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)); }":""}\n\n  /* ── Focus ring on trigger itself ───────────────────────────────────── */\n\n  ${s(".trigger")}\n\n  /* ── Selected text ──────────────────────────────────────────────────── */\n\n  .trigger__value {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .trigger__placeholder {\n    color: var(--diwa-text-secondary);\n  }\n\n  /* ── Chevron icon ───────────────────────────────────────────────────── */\n\n  .trigger__chevron {\n    flex-shrink: 0;\n    width: var(--diwa-icon-size-md);\n    height: var(--diwa-icon-size-md);\n    color: var(--diwa-text-secondary);\n    transition: transform var(--diwa-transition-fast);\n    ${i?"transform: rotate(180deg);":""}\n  }\n\n  .trigger__chevron svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  /* ── Dropdown panel ─────────────────────────────────────────────────── */\n\n  .dropdown {\n    position: absolute;\n    left: 0;\n    right: 0;\n    z-index: var(--diwa-z-dropdown);\n    background-color: var(--diwa-bg-elevated);\n    border: var(--diwa-border-width-thin) solid var(--diwa-border-focus);\n    border-top: none;\n    border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md));\n    overflow: hidden;\n    box-shadow: var(--diwa-shadow-lg);\n    display: ${i?"block":"none"};\n  }\n\n  .dropdown--up {\n    top: auto;\n    bottom: 100%;\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border-focus);\n    border-bottom: none;\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0;\n    margin-bottom: -1px;\n  }\n\n  /* ── Filter input ───────────────────────────────────────────────────── */\n\n  .filter {\n    padding: var(--diwa-space-2) var(--diwa-space-2) var(--diwa-space-1);\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-input-border);\n  }\n\n  .filter__input {\n    width: 100%;\n    box-sizing: border-box;\n    padding: var(--diwa-space-2) var(--diwa-space-3);\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\n    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);\n    border-radius: var(--diwa-radius-sm);\n    color: var(--diwa-text-primary);\n    font-size: var(--diwa-font-size-sm);\n    font-family: inherit;\n    outline: none;\n    transition: border-color var(--diwa-transition-fast);\n  }\n\n  .filter__input::placeholder {\n    color: var(--diwa-text-secondary);\n  }\n\n  .filter__input:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: var(--diwa-focus-ring-offset);\n  }\n\n  .filter__input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  /* ── Options list ───────────────────────────────────────────────────── */\n\n  .options {\n    max-height: var(--diwa-select-dropdown-max-height);\n    overflow-y: auto;\n    padding: var(--diwa-space-1);\n  }\n\n  .options::-webkit-scrollbar {\n    width: var(--diwa-scrollbar-width);\n  }\n\n  .options::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .options::-webkit-scrollbar-thumb {\n    background-color: var(--diwa-border);\n    border-radius: var(--diwa-radius-sm);\n  }\n\n  /* ── Compact ────────────────────────────────────────────────────────── */\n\n  :host([compact]) .trigger {\n    min-height: var(--diwa-touch-target-min-size-compact, 32px);\n    font-size: var(--diwa-font-size-md);\n    padding: 0 var(--diwa-space-2);\n  }\n\n  /* ── States: error / success ────────────────────────────────────────── */\n\n  :host([state="error"]) .trigger {\n    border-color: var(--diwa-notification-error);\n  }\n\n  :host([state="success"]) .trigger {\n    border-color: var(--diwa-notification-success);\n  }\n\n  /* ── Message ────────────────────────────────────────────────────────── */\n\n  .message {\n    display: block;\n    margin-top: var(--diwa-space-1);\n    font-size: var(--diwa-font-size-sm);\n    line-height: var(--diwa-line-height-normal);\n    color: var(--diwa-text-secondary);\n  }\n\n  :host([state="error"]) .message {\n    color: var(--diwa-notification-error);\n  }\n\n  :host([state="success"]) .message {\n    color: var(--diwa-notification-success);\n  }\n\n  /* ── Disabled ───────────────────────────────────────────────────────── */\n\n  :host([disabled]) .trigger {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  :host([disabled]) .label {\n    opacity: var(--diwa-opacity-disabled);\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${o(".trigger",".trigger__chevron",".filter__input")}\n`;let h=0;const c=class{constructor(e){i(this,e);this.change=n(this,"change",7);this.toggle=n(this,"toggle",3);this.blur=n(this,"blur",3);this.theme="dark";this.name="";this.state="none";this.hideLabel=false;this.disabled=false;this.required=false;this.compact=false;this.dropdownDirection="auto";this.isOpen=false;this.hasFilterResults=true;this.dropdownClass="dropdown";this.internalId=`diwa-s-${++h}`;this.options=[];this.highlightedIndex=-1;this.onClickOutside=i=>{if(!this.isOpen)return;const n=i.composedPath();if(!n.includes(this.host)){this.isOpen=false;this.blur.emit()}};this.onTriggerClick=()=>{if(this.disabled)return;this.isOpen=!this.isOpen};this.onTriggerKeyDown=i=>{if(this.disabled)return;if(!this.isOpen){if(i.key==="ArrowDown"||i.key==="ArrowUp"||i.key==="Enter"||i.key===" "){i.preventDefault();this.isOpen=true}return}switch(i.key){case"Escape":case"Tab":{i.preventDefault();this.isOpen=false;this.triggerEl.focus();break}case"ArrowDown":{i.preventDefault();const n=this.getVisibleOptions();this.highlightedIndex=Math.min(this.highlightedIndex+1,n.length-1);this.applyHighlight();break}case"ArrowUp":{i.preventDefault();this.highlightedIndex=Math.max(this.highlightedIndex-1,0);this.applyHighlight();break}case"Home":{i.preventDefault();this.highlightedIndex=0;this.applyHighlight();break}case"End":{i.preventDefault();const n=this.getVisibleOptions();this.highlightedIndex=n.length-1;this.applyHighlight();break}case"Enter":case" ":{i.preventDefault();const n=this.getVisibleOptions()[this.highlightedIndex];if(n&&!n.disabled){n.dispatchEvent(new MouseEvent("click",{bubbles:true,composed:true}))}break}}};this.onFilterInput=i=>{var n;const e=i.target.value.toLowerCase();let t=false;for(const i of this.options){const a=((n=i.textContent)!==null&&n!==void 0?n:"").toLowerCase();const r=a.includes(e);i.style.display=r?"":"none";if(r)t=true}this.hasFilterResults=t;this.highlightedIndex=0;this.applyHighlight()}}onThemeChange(){this.syncChildThemes()}onCompactChange(){this.syncChildCompact()}onValueChange(){this.syncSelectionFromValue()}onIsOpenChange(i){this.toggle.emit({open:i});if(i){this.updateDropdownDirection();this.highlightedIndex=this.getFirstHighlightIndex();this.applyHighlight();requestAnimationFrame((()=>{var i;(i=this.filterInputEl)===null||i===void 0?void 0:i.focus()}))}else{this.clearHighlight();this.highlightedIndex=-1;this.resetFilter()}}connectedCallback(){document.addEventListener("mousedown",this.onClickOutside,true)}disconnectedCallback(){document.removeEventListener("mousedown",this.onClickOutside,true)}componentDidLoad(){this.collectOptions();this.syncSelectionFromValue();this.syncChildThemes();this.syncChildCompact()}async open(){this.isOpen=true}async close(){this.isOpen=false}onOptionUpdate(i){var n;i.stopPropagation();this.value=i.detail.value;this.syncSelectionFromValue();this.change.emit({name:this.name,value:(n=this.value)!==null&&n!==void 0?n:""});this.isOpen=false;e(this.host);requestAnimationFrame((()=>{this.triggerEl.focus()}))}onSlotChange(){this.collectOptions();this.syncSelectionFromValue();this.syncChildThemes();this.syncChildCompact()}collectOptions(){this.options=Array.from(this.host.querySelectorAll("diwa-select-option"))}syncSelectionFromValue(){for(const i of this.options){const n=i.value!==undefined&&i.value===this.value;if(i.selected!==n){i.selected=n;e(i)}}}syncChildThemes(){for(const i of this.options){if(i.theme!==this.theme){i.theme=this.theme;e(i)}}}syncChildCompact(){for(const i of this.options){if(i.compact!==this.compact){i.compact=this.compact;e(i)}}}getVisibleOptions(){return this.options.filter((i=>!i.disabled&&i.style.display!=="none"))}getFirstHighlightIndex(){const i=this.getVisibleOptions();const n=i.findIndex((i=>i.selected));return n>=0?n:0}applyHighlight(){const i=this.getVisibleOptions();i.forEach(((i,n)=>{i.highlighted=n===this.highlightedIndex}))}clearHighlight(){for(const i of this.options){if(i.highlighted)i.highlighted=false}this.highlightedIndex=-1}updateDropdownDirection(){if(this.dropdownDirection!=="auto"){this.dropdownClass=this.dropdownDirection==="up"?"dropdown dropdown--up":"dropdown";return}const i=this.triggerEl.getBoundingClientRect();const n=window.innerHeight-i.bottom;this.dropdownClass=n<260?"dropdown dropdown--up":"dropdown"}resetFilter(){if(this.filterInputEl)this.filterInputEl.value="";this.hasFilterResults=true;for(const i of this.options){i.style.display=""}}get selectedLabel(){var i;const n=this.options.find((i=>i.value!==undefined&&i.value===this.value));return((i=n===null||n===void 0?void 0:n.textContent)!==null&&i!==void 0?i:"").trim()}render(){const i=`${this.internalId}-label`;const n=`${this.internalId}-listbox`;const e=`${this.internalId}-hint`;const r=!!this.message&&this.state!=="none";const s=this.value!==undefined&&this.value!=="";const o=s?this.selectedLabel:undefined;return t(a,{key:"78cb284c75c35d7a8c9c55c65a1b2da507cb3825","data-theme":this.theme},t("style",{key:"56535329000ff0addc23203c53161262d077d0ae",innerHTML:d(this.isOpen,this.disabled,this.state,this.compact,this.dropdownClass.includes("--up"))}),(this.label||this.host.querySelector('[slot="label"]'))&&t("span",{key:"a50ee541c02fddefb765c9e8be397bc5fd8fdbe3",class:"label",id:i,part:"label"},t("slot",{key:"5acac4fc52daaa0a7e8137f41bd0b5e91ba4be86",name:"label"},this.label),this.required&&t("span",{key:"1f61ca50a28561365e8491e108268680b0e1ccf1",class:"label__required","aria-hidden":"true"},"*")),(this.description||this.host.querySelector('[slot="description"]'))&&t("span",{key:"41e461a959513a8dafe4a8fd6d7c7c0597dd11be",class:"description",part:"description"},t("slot",{key:"33f083c62405b70fd4df87ccd5770946778a168c",name:"description"},this.description)),t("div",{key:"88a408a5abaa1f4c48f54b8dda240a3ee8ed3a5e",class:"trigger",role:"combobox","aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false","aria-controls":n,"aria-labelledby":this.label?i:undefined,"aria-required":this.required?"true":undefined,"aria-invalid":this.state==="error"?"true":undefined,"aria-describedby":r?e:undefined,tabIndex:this.disabled?-1:0,onClick:this.onTriggerClick,onKeyDown:this.onTriggerKeyDown,ref:i=>this.triggerEl=i,part:"trigger"},t("span",{key:"c397c30576a9396ca26a150d4b31686b34324c50",class:`trigger__value${!o?" trigger__placeholder":""}`,part:"value"},o!==null&&o!==void 0?o:this.label||"Select an option"),t("span",{key:"3c4c6ba3dfc5e53102754e8c8f99b01041cb034c",class:"trigger__chevron","aria-hidden":"true",part:"chevron"},t("svg",{key:"9d7a5b129826e3d448c3cebb41cd1c6cba9af980",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},t("polyline",{key:"6c4b2336e5e0968cb79034a17c12ef7f1475d1d4",points:"6 9 12 15 18 9"})))),t("div",{key:"9a004e9726798f987e73de928cff74aae2192eba",class:this.dropdownClass,role:"listbox",id:n,"aria-multiselectable":"false","aria-labelledby":this.label?i:undefined,part:"dropdown"},t("div",{key:"be02228e7c2763174b84c98665e43c1b41be96c4",class:"filter",part:"filter"},t("input",{key:"df2a97b9017bf0fa550ddd7edf81bb5b63daa567",class:"filter__input",type:"text",placeholder:"Filter options…","aria-label":"Filter options",onInput:this.onFilterInput,ref:i=>this.filterInputEl=i,part:"filter-input"})),t("div",{key:"f1b7dff287feb28cacea9353263a3efb530d77f2",class:"options",part:"options"},!this.hasFilterResults&&t("div",{key:"11c5108f2e3e2e1ae36e2f4f15f5da49b5e4f645",class:"no-results","aria-live":"polite"},"No options found"),t("slot",{key:"f220f388ef3964448427dd45943193bce7419f88"}))),r&&t("span",{key:"8ceca0f175af448577d629581d39a44dfd39f63f",class:"message",id:e,role:"status",part:"message"},t("slot",{key:"91c7a0c99fa7a642ba0987cbab196d61e61cea9e",name:"message"},this.message)))}static get delegatesFocus(){return true}get host(){return r(this)}static get watchers(){return{theme:["onThemeChange"],compact:["onCompactChange"],value:["onValueChange"],isOpen:["onIsOpenChange"]}}};export{c as diwa_select};
-//# sourceMappingURL=p-db70e030.entry.js.map

package/dist/diwa-components/p-db70e030.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","isOpen","_disabled","_state","_compact","isUp","getFocusStyle","getReducedMotionStyle","selectIdCounter","DiwaSelect","constructor","hostRef","this","theme","name","state","hideLabel","disabled","required","compact","dropdownDirection","hasFilterResults","dropdownClass","internalId","options","highlightedIndex","onClickOutside","e","path","composedPath","includes","host","blur","emit","onTriggerClick","onTriggerKeyDown","key","preventDefault","triggerEl","focus","visible","getVisibleOptions","Math","min","length","applyHighlight","max","vis","current","dispatchEvent","MouseEvent","bubbles","composed","onFilterInput","term","target","value","toLowerCase","anyVisible","opt","text","_a","textContent","match","style","display","onThemeChange","syncChildThemes","onCompactChange","syncChildCompact","onValueChange","syncSelectionFromValue","onIsOpenChange","open","toggle","updateDropdownDirection","getFirstHighlightIndex","requestAnimationFrame","filterInputEl","clearHighlight","resetFilter","connectedCallback","document","addEventListener","disconnectedCallback","removeEventListener","componentDidLoad","collectOptions","close","onOptionUpdate","stopPropagation","detail","change","forceUpdate","onSlotChange","Array","from","querySelectorAll","shouldBeSelected","undefined","selected","filter","o","firstSelected","findIndex","forEach","i","highlighted","rect","getBoundingClientRect","spaceBelow","window","innerHeight","bottom","selectedLabel","find","trim","render","labelId","listboxId","hintId","hasMessage","message","hasValue","displayLabel","h","Host","innerHTML","label","querySelector","class","id","part","description","role","tabIndex","onClick","onKeyDown","ref","el","viewBox","fill","stroke","points","type","placeholder","onInput"],"sources":["src/components/diwa-select/diwa-select-styles.ts","src/components/diwa-select/diwa-select.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\nimport type { SelectState } from './types';\r\n\r\nexport const getComponentCss = (\r\n  isOpen: boolean,\r\n  _disabled: boolean,\r\n  _state: SelectState,\r\n  _compact: boolean,\r\n  isUp: boolean = false,\r\n): string => `\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    position: relative;\r\n    width: 100%;\r\n    min-width: 0;\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  /* ── Label ──────────────────────────────────────────────────────────── */\r\n\r\n  .label {\r\n    display: block;\r\n    margin-bottom: var(--diwa-space-1);\r\n    font-size: var(--diwa-font-size-sm);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    color: var(--diwa-text-secondary);\r\n    line-height: var(--diwa-line-height-normal);\r\n    cursor: default;\r\n  }\r\n\r\n  :host([hide-label]) .label {\r\n    border: 0;\r\n    clip: rect(0, 0, 0, 0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    white-space: nowrap;\r\n    width: 1px;\r\n  }\r\n\r\n  .label__required {\r\n    color: var(--diwa-notification-error);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    margin-left: var(--diwa-space-1);\r\n  }\r\n\r\n  /* ── Description ────────────────────────────────────────────────────── */\r\n\r\n  .description {\r\n    display: block;\r\n    margin-bottom: var(--diwa-space-2);\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: var(--diwa-text-secondary);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  /* ── Trigger ────────────────────────────────────────────────────────── */\r\n\r\n  .trigger {\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n    min-height: var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px));\n    padding: 0 var(--diwa-space-3);\r\n    box-sizing: border-box;\r\n    gap: var(--diwa-space-2);\r\n\r\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);\r\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\r\n\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-normal);\r\n    font-family: inherit;\r\n    color: var(--diwa-text-primary);\r\n    text-align: left;\r\n    line-height: 1;\r\n\r\n    cursor: pointer;\r\n    user-select: none;\r\n    -webkit-font-smoothing: antialiased;\r\n\r\n    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast);\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n  }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\n    :host(:not([disabled])) .trigger:hover {\n      border-color: var(--diwa-border-hover);\n    }\n  }\n\r\n  ${isOpen && !isUp ? '.trigger { border-color: var(--diwa-border-focus); border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0; }' : ''}\r\n  ${isOpen && isUp ? '.trigger { border-color: var(--diwa-border-focus); border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)); }' : ''}\r\n\r\n  /* ── Focus ring on trigger itself ───────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.trigger')}\r\n\r\n  /* ── Selected text ──────────────────────────────────────────────────── */\r\n\r\n  .trigger__value {\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  .trigger__placeholder {\r\n    color: var(--diwa-text-secondary);\r\n  }\r\n\r\n  /* ── Chevron icon ───────────────────────────────────────────────────── */\r\n\r\n  .trigger__chevron {\r\n    flex-shrink: 0;\r\n    width: var(--diwa-icon-size-md);\r\n    height: var(--diwa-icon-size-md);\r\n    color: var(--diwa-text-secondary);\r\n    transition: transform var(--diwa-transition-fast);\r\n    ${isOpen ? 'transform: rotate(180deg);' : ''}\r\n  }\r\n\r\n  .trigger__chevron svg {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n\r\n  /* ── Dropdown panel ─────────────────────────────────────────────────── */\r\n\r\n  .dropdown {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    z-index: var(--diwa-z-dropdown);\r\n    background-color: var(--diwa-bg-elevated);\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-border-focus);\r\n    border-top: none;\r\n    border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md));\r\n    overflow: hidden;\r\n    box-shadow: var(--diwa-shadow-lg);\r\n    display: ${isOpen ? 'block' : 'none'};\r\n  }\r\n\r\n  .dropdown--up {\r\n    top: auto;\r\n    bottom: 100%;\r\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border-focus);\r\n    border-bottom: none;\r\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0;\r\n    margin-bottom: -1px;\r\n  }\r\n\r\n  /* ── Filter input ───────────────────────────────────────────────────── */\r\n\r\n  .filter {\r\n    padding: var(--diwa-space-2) var(--diwa-space-2) var(--diwa-space-1);\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-input-border);\r\n  }\r\n\r\n  .filter__input {\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n    padding: var(--diwa-space-2) var(--diwa-space-3);\r\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);\r\n    border-radius: var(--diwa-radius-sm);\r\n    color: var(--diwa-text-primary);\r\n    font-size: var(--diwa-font-size-sm);\r\n    font-family: inherit;\r\n    outline: none;\r\n    transition: border-color var(--diwa-transition-fast);\r\n  }\r\n\r\n  .filter__input::placeholder {\n    color: var(--diwa-text-secondary);\n  }\n\n  .filter__input:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: var(--diwa-focus-ring-offset);\n  }\n\n  .filter__input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\r\n  /* ── Options list ───────────────────────────────────────────────────── */\r\n\r\n  .options {\r\n    max-height: var(--diwa-select-dropdown-max-height);\r\n    overflow-y: auto;\r\n    padding: var(--diwa-space-1);\r\n  }\r\n\r\n  .options::-webkit-scrollbar {\r\n    width: var(--diwa-scrollbar-width);\r\n  }\r\n\r\n  .options::-webkit-scrollbar-track {\r\n    background: transparent;\r\n  }\r\n\r\n  .options::-webkit-scrollbar-thumb {\r\n    background-color: var(--diwa-border);\r\n    border-radius: var(--diwa-radius-sm);\r\n  }\r\n\r\n  /* ── Compact ────────────────────────────────────────────────────────── */\r\n\r\n  :host([compact]) .trigger {\n    min-height: var(--diwa-touch-target-min-size-compact, 32px);\n    font-size: var(--diwa-font-size-md);\n    padding: 0 var(--diwa-space-2);\n  }\n\r\n  /* ── States: error / success ────────────────────────────────────────── */\r\n\r\n  :host([state=\"error\"]) .trigger {\r\n    border-color: var(--diwa-notification-error);\r\n  }\r\n\r\n  :host([state=\"success\"]) .trigger {\r\n    border-color: var(--diwa-notification-success);\r\n  }\r\n\r\n  /* ── Message ────────────────────────────────────────────────────────── */\r\n\r\n  .message {\r\n    display: block;\r\n    margin-top: var(--diwa-space-1);\r\n    font-size: var(--diwa-font-size-sm);\r\n    line-height: var(--diwa-line-height-normal);\r\n    color: var(--diwa-text-secondary);\r\n  }\r\n\r\n  :host([state=\"error\"]) .message {\r\n    color: var(--diwa-notification-error);\r\n  }\r\n\r\n  :host([state=\"success\"]) .message {\r\n    color: var(--diwa-notification-success);\r\n  }\r\n\r\n  /* ── Disabled ───────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) .trigger {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n  }\r\n\r\n  :host([disabled]) .label {\r\n    opacity: var(--diwa-opacity-disabled);\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.trigger', '.trigger__chevron', '.filter__input')}\r\n`;\r\n\r\n\r\n","import {\r\n  Component,\r\n  Element,\r\n  Event,\r\n  type EventEmitter,\r\n  Host,\r\n  Listen,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n  h,\r\n} from '@stencil/core';\r\nimport type {\r\n  SelectChangeEventDetail,\r\n  SelectDropdownDirection,\r\n  SelectState,\r\n  SelectTheme,\r\n  SelectToggleEventDetail,\r\n} from './types';\r\nimport { getComponentCss } from './diwa-select-styles';\r\n\r\n/** Module-level counter for unique IDs. */\r\nlet selectIdCounter = 0;\r\n\r\n/**\r\n * @component diwa-select\r\n *\r\n * A fully accessible single-select dropdown with built-in text filter,\r\n * keyboard navigation, and form integration.\r\n *\r\n * Based on the Diwa select API contract.\r\n *\r\n * Usage:\r\n *   <diwa-select name=\"fruit\" label=\"Favourite fruit\">\r\n *     <diwa-select-option>Please select…</diwa-select-option>\r\n *     <diwa-select-option value=\"apple\">Apple</diwa-select-option>\r\n *     <diwa-select-option value=\"banana\">Banana</diwa-select-option>\r\n *   </diwa-select>\r\n *\r\n * @slot default      — diwa-select-option elements\r\n * @slot label        — Custom label content (overrides the label prop)\r\n * @slot description  — Custom description content\r\n * @slot message      — Custom message content\r\n */\r\n@Component({\r\n  tag: 'diwa-select',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaSelect {\r\n  @Element() host!: HTMLElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Theme — cascades down to child options. */\r\n  @Prop({ reflect: true }) theme: SelectTheme = 'dark';\r\n\r\n  /** Visible label text. */\r\n  @Prop() label?: string;\r\n\r\n  /** Optional description shown below the label. */\r\n  @Prop() description?: string;\r\n\r\n  /** HTML name attribute — identifies the field in form submissions. */\r\n  @Prop() name: string = '';\r\n\r\n  /** Currently selected value. Mutable — updated on user interaction. */\r\n  @Prop({ mutable: true }) value?: string;\r\n\r\n  /** Validation state. */\r\n  @Prop({ reflect: true }) state: SelectState = 'none';\r\n\r\n  /** Helper / validation message shown below the trigger. */\r\n  @Prop() message?: string;\r\n\r\n  /** Hides the label visually while keeping it accessible. */\r\n  @Prop({ reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\r\n\r\n  /** Disables interaction. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Marks the field as required. */\r\n  @Prop() required: boolean = false;\r\n\r\n  /** Compact variant — reduces the trigger height. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /**\r\n   * Preferred direction for the dropdown panel.\r\n   * `'auto'` detects viewport space and flips upward if needed.\r\n   */\r\n  @Prop() dropdownDirection: SelectDropdownDirection = 'auto';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Emitted when the selection changes. */\r\n  @Event({ bubbles: true })\r\n  change!: EventEmitter<SelectChangeEventDetail>;\r\n\r\n  /** Emitted when the dropdown opens or closes. */\r\n  @Event({ bubbles: false })\r\n  toggle!: EventEmitter<SelectToggleEventDetail>;\r\n\r\n  /** Emitted when the component loses focus (dropdown closes via click-outside). */\r\n  @Event({ bubbles: false })\r\n  blur!: EventEmitter<void>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Internal state\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @State() private isOpen: boolean = false;\r\n  @State() private hasFilterResults: boolean = true;\r\n  @State() private dropdownClass: string = 'dropdown';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private refs / tracking\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private internalId: string = `diwa-s-${++selectIdCounter}`;\r\n  private triggerEl!: HTMLDivElement;\r\n  private filterInputEl?: HTMLInputElement;\r\n  private options: HTMLDiwaSelectOptionElement[] = [];\r\n  private highlightedIndex: number = -1;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Watchers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Watch('theme')\r\n  onThemeChange(): void {\r\n    this.syncChildThemes();\r\n  }\r\n\r\n  @Watch('compact')\r\n  onCompactChange(): void {\r\n    this.syncChildCompact();\r\n  }\r\n\r\n  @Watch('value')\r\n  onValueChange(): void {\r\n    this.syncSelectionFromValue();\r\n  }\r\n\r\n  @Watch('isOpen')\r\n  onIsOpenChange(open: boolean): void {\r\n    this.toggle.emit({ open });\r\n    if (open) {\r\n      this.updateDropdownDirection();\r\n      this.highlightedIndex = this.getFirstHighlightIndex();\r\n      this.applyHighlight();\r\n      requestAnimationFrame(() => {\r\n        this.filterInputEl?.focus();\r\n      });\r\n    } else {\r\n      this.clearHighlight();\r\n      this.highlightedIndex = -1;\r\n      this.resetFilter();\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Lifecycle\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  connectedCallback(): void {\r\n    document.addEventListener('mousedown', this.onClickOutside, true);\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    document.removeEventListener('mousedown', this.onClickOutside, true);\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.collectOptions();\r\n    this.syncSelectionFromValue();\r\n    this.syncChildThemes();\r\n    this.syncChildCompact();\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Public methods\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Programmatically opens the dropdown. */\r\n  @Method()\r\n  async open(): Promise<void> {\r\n    this.isOpen = true;\r\n  }\r\n\r\n  /** Programmatically closes the dropdown. */\r\n  @Method()\r\n  async close(): Promise<void> {\r\n    this.isOpen = false;\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Event listeners\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Listen('diwaSelectOptionUpdate')\r\n  onOptionUpdate(e: CustomEvent<{ value: string | undefined }>): void {\r\n    e.stopPropagation();\r\n    this.value = e.detail.value;\r\n    this.syncSelectionFromValue();\r\n    this.change.emit({ name: this.name, value: this.value ?? '' });\r\n    this.isOpen = false;\r\n    forceUpdate(this.host);\r\n    requestAnimationFrame(() => {\r\n      this.triggerEl.focus();\r\n    });\r\n  }\r\n\r\n  @Listen('slotchange')\r\n  onSlotChange(): void {\r\n    this.collectOptions();\r\n    this.syncSelectionFromValue();\r\n    this.syncChildThemes();\r\n    this.syncChildCompact();\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private collectOptions(): void {\r\n    this.options = Array.from(\r\n      this.host.querySelectorAll<HTMLDiwaSelectOptionElement>('diwa-select-option'),\r\n    );\r\n  }\r\n\r\n  private syncSelectionFromValue(): void {\r\n    for (const opt of this.options) {\r\n      const shouldBeSelected = opt.value !== undefined && opt.value === this.value;\r\n      if (opt.selected !== shouldBeSelected) {\r\n        opt.selected = shouldBeSelected;\r\n        forceUpdate(opt);\r\n      }\r\n    }\r\n  }\r\n\r\n  private syncChildThemes(): void {\r\n    for (const opt of this.options) {\r\n      if (opt.theme !== this.theme) {\r\n        opt.theme = this.theme;\r\n        forceUpdate(opt);\r\n      }\r\n    }\r\n  }\r\n\r\n  private syncChildCompact(): void {\r\n    for (const opt of this.options) {\r\n      if (opt.compact !== this.compact) {\r\n        opt.compact = this.compact;\r\n        forceUpdate(opt);\r\n      }\r\n    }\r\n  }\r\n\r\n  private getVisibleOptions(): HTMLDiwaSelectOptionElement[] {\r\n    return this.options.filter((o) => !o.disabled && o.style.display !== 'none');\r\n  }\r\n\r\n  private getFirstHighlightIndex(): number {\r\n    const visible = this.getVisibleOptions();\r\n    const firstSelected = visible.findIndex((o) => o.selected);\r\n    return firstSelected >= 0 ? firstSelected : 0;\r\n  }\r\n\r\n  private applyHighlight(): void {\r\n    const visible = this.getVisibleOptions();\r\n    visible.forEach((opt, i) => {\r\n      opt.highlighted = i === this.highlightedIndex;\r\n    });\r\n  }\r\n\r\n  private clearHighlight(): void {\r\n    for (const opt of this.options) {\r\n      if (opt.highlighted) opt.highlighted = false;\r\n    }\r\n    this.highlightedIndex = -1;\r\n  }\r\n\r\n  private updateDropdownDirection(): void {\r\n    if (this.dropdownDirection !== 'auto') {\r\n      this.dropdownClass = this.dropdownDirection === 'up' ? 'dropdown dropdown--up' : 'dropdown';\r\n      return;\r\n    }\r\n    const rect = this.triggerEl.getBoundingClientRect();\r\n    const spaceBelow = window.innerHeight - rect.bottom;\r\n    this.dropdownClass = spaceBelow < 260 ? 'dropdown dropdown--up' : 'dropdown';\r\n  }\r\n\r\n  private resetFilter(): void {\r\n    if (this.filterInputEl) this.filterInputEl.value = '';\r\n    this.hasFilterResults = true;\r\n    for (const opt of this.options) {\r\n      opt.style.display = '';\r\n    }\r\n  }\r\n\r\n  private onClickOutside = (e: MouseEvent): void => {\r\n    if (!this.isOpen) return;\r\n    const path = e.composedPath();\r\n    if (!path.includes(this.host)) {\r\n      this.isOpen = false;\r\n      this.blur.emit();\r\n    }\r\n  };\r\n\r\n  private onTriggerClick = (): void => {\r\n    if (this.disabled) return;\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  private onTriggerKeyDown = (e: KeyboardEvent): void => {\r\n    if (this.disabled) return;\r\n\r\n    if (!this.isOpen) {\r\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\r\n        e.preventDefault();\r\n        this.isOpen = true;\r\n      }\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case 'Escape':\r\n      case 'Tab': {\r\n        e.preventDefault();\r\n        this.isOpen = false;\r\n        this.triggerEl.focus();\r\n        break;\r\n      }\r\n      case 'ArrowDown': {\r\n        e.preventDefault();\r\n        const visible = this.getVisibleOptions();\r\n        this.highlightedIndex = Math.min(this.highlightedIndex + 1, visible.length - 1);\r\n        this.applyHighlight();\r\n        break;\r\n      }\r\n      case 'ArrowUp': {\r\n        e.preventDefault();\r\n        this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);\r\n        this.applyHighlight();\r\n        break;\r\n      }\r\n      case 'Home': {\r\n        e.preventDefault();\r\n        this.highlightedIndex = 0;\r\n        this.applyHighlight();\r\n        break;\r\n      }\r\n      case 'End': {\r\n        e.preventDefault();\r\n        const vis = this.getVisibleOptions();\r\n        this.highlightedIndex = vis.length - 1;\r\n        this.applyHighlight();\r\n        break;\r\n      }\r\n      case 'Enter':\r\n      case ' ': {\r\n        e.preventDefault();\r\n        const current = this.getVisibleOptions()[this.highlightedIndex];\r\n        if (current && !current.disabled) {\r\n          current.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));\r\n        }\r\n        break;\r\n      }\r\n    }\r\n  };\r\n\r\n  private onFilterInput = (e: Event): void => {\r\n    const term = (e.target as HTMLInputElement).value.toLowerCase();\r\n\r\n    let anyVisible = false;\r\n    for (const opt of this.options) {\r\n      const text = (opt.textContent ?? '').toLowerCase();\r\n      const match = text.includes(term);\r\n      opt.style.display = match ? '' : 'none';\r\n      if (match) anyVisible = true;\r\n    }\r\n    this.hasFilterResults = anyVisible;\r\n    this.highlightedIndex = 0;\r\n    this.applyHighlight();\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Computed display values\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private get selectedLabel(): string {\r\n    const selected = this.options.find((o) => o.value !== undefined && o.value === this.value);\r\n    return (selected?.textContent ?? '').trim();\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const labelId = `${this.internalId}-label`;\r\n    const listboxId = `${this.internalId}-listbox`;\r\n    const hintId = `${this.internalId}-hint`;\r\n    const hasMessage = !!this.message && this.state !== 'none';\r\n    const hasValue = this.value !== undefined && this.value !== '';\r\n    const displayLabel = hasValue ? this.selectedLabel : undefined;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.isOpen, this.disabled, this.state, this.compact, this.dropdownClass.includes('--up'))} />\r\n\r\n        {/* Label */}\r\n        {(this.label || this.host.querySelector('[slot=\"label\"]')) && (\r\n          <span class=\"label\" id={labelId} part=\"label\">\r\n            <slot name=\"label\">{this.label}</slot>\r\n            {this.required && <span class=\"label__required\" aria-hidden=\"true\">*</span>}\r\n          </span>\r\n        )}\r\n\r\n        {/* Description */}\r\n        {(this.description || this.host.querySelector('[slot=\"description\"]')) && (\r\n          <span class=\"description\" part=\"description\">\r\n            <slot name=\"description\">{this.description}</slot>\r\n          </span>\r\n        )}\r\n\r\n        {/* Trigger */}\r\n        <div\r\n          class=\"trigger\"\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          aria-expanded={this.isOpen ? 'true' : 'false'}\r\n          aria-controls={listboxId}\r\n          aria-labelledby={this.label ? labelId : undefined}\r\n          aria-required={this.required ? 'true' : undefined}\r\n          aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n          aria-describedby={hasMessage ? hintId : undefined}\r\n          tabIndex={this.disabled ? -1 : 0}\r\n          onClick={this.onTriggerClick}\r\n          onKeyDown={this.onTriggerKeyDown}\r\n          ref={(el) => (this.triggerEl = el as HTMLDivElement)}\r\n          part=\"trigger\"\r\n        >\r\n          <span class={`trigger__value${!displayLabel ? ' trigger__placeholder' : ''}`} part=\"value\">\r\n            {displayLabel ?? (this.label || 'Select an option')}\r\n          </span>\r\n\r\n          {/* Chevron */}\r\n          <span class=\"trigger__chevron\" aria-hidden=\"true\" part=\"chevron\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <polyline points=\"6 9 12 15 18 9\" />\r\n            </svg>\r\n          </span>\r\n        </div>\r\n\r\n        {/* Dropdown */}\r\n        <div\r\n          class={this.dropdownClass}\r\n          role=\"listbox\"\r\n          id={listboxId}\r\n          aria-multiselectable=\"false\"\r\n          aria-labelledby={this.label ? labelId : undefined}\r\n          part=\"dropdown\"\r\n        >\r\n          {/* Filter */}\r\n          <div class=\"filter\" part=\"filter\">\r\n            <input\r\n              class=\"filter__input\"\r\n              type=\"text\"\r\n              placeholder=\"Filter options…\"\r\n              aria-label=\"Filter options\"\r\n              onInput={this.onFilterInput}\r\n              ref={(el) => (this.filterInputEl = el as HTMLInputElement)}\r\n              part=\"filter-input\"\r\n            />\r\n          </div>\r\n\r\n          {/* Options */}\r\n          <div class=\"options\" part=\"options\">\r\n            {!this.hasFilterResults && (\r\n              <div class=\"no-results\" aria-live=\"polite\">No options found</div>\r\n            )}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n\r\n        {/* Message */}\r\n        {hasMessage && (\r\n          <span class=\"message\" id={hintId} role=\"status\" part=\"message\">\r\n            <slot name=\"message\">{this.message}</slot>\r\n          </span>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}