@diwacopilot/components 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["PANEL_POSITION","top","bottom","start","end","getComponentCss","isOpen","direction","panelPos","getFocusStyle","getReducedMotionStyle","DiwaPopover","constructor","hostRef","this","theme","toggle","handleGlobalKeydown","e","key","handleGlobalPointerDown","composedPath","includes","host","render","h","Host","innerHTML","name","class","type","String","onClick","xmlns","width","height","viewBox","fill","stroke","cx","cy","r","x1","y1","x2","y2","role","description"],"sources":["src/components/diwa-popover/diwa-popover-styles.ts","src/components/diwa-popover/diwa-popover.tsx"],"sourcesContent":["import type { PopoverDirection } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nconst PANEL_POSITION: Record<PopoverDirection, string> = {\r\n  top: 'bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);',\r\n  bottom: 'top: calc(100% + 6px); left: 50%; transform: translateX(-50%);',\r\n  start: 'right: calc(100% + 6px); top: 50%; transform: translateY(-50%);',\r\n  end: 'left: calc(100% + 6px); top: 50%; transform: translateY(-50%);',\r\n};\r\n\r\nexport const getComponentCss = (isOpen: boolean, direction: PopoverDirection): string => {\r\n  const panelPos = PANEL_POSITION[direction];\r\n\r\n  return `\r\n    :host {\r\n      display: inline-flex;\r\n      position: relative;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .trigger {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: var(--diwa-popover-trigger-size);\r\n      height: var(--diwa-popover-trigger-size);\r\n      padding: 0;\r\n      background: none;\r\n      border: none;\r\n      border-radius: var(--diwa-radius-sm);\r\n      transition: color var(--diwa-transition-base);\r\n    }\r\n    .trigger:hover {\r\n      color: var(--diwa-text-primary);\r\n    }\r\n    ${getFocusStyle('.trigger')}\r\n    .panel {\r\n      display: ${isOpen ? 'block' : 'none'};\r\n      position: absolute;\r\n      ${panelPos}\r\n      z-index: 100;\r\n      min-width: var(--diwa-popover-panel-min-width);\r\n      max-width: var(--diwa-popover-panel-max-width);\r\n      padding: var(--diwa-space-5);\r\n      background: var(--diwa-bg-elevated);\r\n      border: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n      border-radius: var(--diwa-radius-lg);\r\n      box-shadow: var(--diwa-shadow-lg);\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: var(--diwa-font-size-base);\r\n      color: var(--diwa-text-primary);\r\n      line-height: var(--diwa-line-height-normal);\r\n      white-space: normal;\r\n    }\r\n\r\n    .panel p,\r\n    .panel ::slotted(p) {\r\n      margin: 0;\r\n    }\r\n\r\n    ${getReducedMotionStyle('.trigger')}\r\n  `;\r\n};\r\n","import { Component, Element, Host, Listen, Prop, State, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { PopoverDirection } from './types';\r\nimport { getComponentCss } from './diwa-popover-styles';\r\n\r\n/**\r\n * @slot default — Content displayed inside the popover panel.\r\n * @slot button  — Custom trigger element that replaces the default info button.\r\n */\r\n@Component({\r\n  tag: 'diwa-popover',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaPopover {\r\n  @Element() host!: HTMLDiwaPopoverElement;\r\n\r\n  /** Preferred direction the panel opens relative to the trigger. */\r\n  @Prop() direction: PopoverDirection = 'bottom';\r\n\r\n  /** Short description text rendered directly inside the panel (alternative to using the default slot). */\r\n  @Prop() description?: string;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  @State() private isOpen: boolean = false;\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleGlobalKeydown(e: KeyboardEvent): void {\r\n    if (e.key === 'Escape' && this.isOpen) {\r\n      this.isOpen = false;\r\n    }\r\n  }\r\n\r\n  @Listen('pointerdown', { target: 'window' })\r\n  handleGlobalPointerDown(e: PointerEvent): void {\r\n    if (!this.isOpen) {\r\n      return;\r\n    }\r\n\r\n    if (!e.composedPath().includes(this.host)) {\r\n      this.isOpen = false;\r\n    }\r\n  }\r\n\r\n  private toggle = (): void => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.isOpen, this.direction)} />\r\n        <slot name=\"button\">\r\n          <button\r\n            class=\"trigger\"\r\n            type=\"button\"\r\n            aria-expanded={String(this.isOpen)}\r\n            aria-haspopup=\"true\"\r\n            onClick={this.toggle}\r\n          >\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"16\"\r\n              height=\"16\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\r\n            </svg>\r\n          </button>\r\n        </slot>\r\n        <div\r\n          class=\"panel\"\r\n          role=\"tooltip\"\r\n          aria-hidden={String(!this.isOpen)}\r\n        >\r\n          {this.description && <p>{this.description}</p>}\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oGAGA,MAAMA,EAAmD,CACvDC,IAAK,oEACLC,OAAQ,iEACRC,MAAO,kEACPC,IAAK,kEAGA,MAAMC,EAAkB,CAACC,EAAiBC,KAC/C,MAAMC,EAAWR,EAAeO,GAEhC,MAAO,mkBAuBHE,EAAc,6CAEHH,EAAS,QAAU,6CAE5BE,kqBAqBFE,EAAsB,iBACzB,E,MCjDUC,EAAW,MAJxB,WAAAC,CAAAC,G,UAQUC,KAAAP,UAA8B,SAMbO,KAAAC,MAAe,OAEvBD,KAAAR,OAAkB,MAoB3BQ,KAAAE,OAAS,KACfF,KAAKR,QAAUQ,KAAKR,MAAM,C,CAlB5B,mBAAAW,CAAoBC,GAClB,GAAIA,EAAEC,MAAQ,UAAYL,KAAKR,OAAQ,CACrCQ,KAAKR,OAAS,K,EAKlB,uBAAAc,CAAwBF,GACtB,IAAKJ,KAAKR,OAAQ,CAChB,M,CAGF,IAAKY,EAAEG,eAAeC,SAASR,KAAKS,MAAO,CACzCT,KAAKR,OAAS,K,EAQlB,MAAAkB,GACE,OACEC,EAACC,EAAI,CAAAP,IAAA,wDAAaL,KAAKC,OACrBU,EAAA,SAAAN,IAAA,2CAAOQ,UAAWtB,EAAgBS,KAAKR,OAAQQ,KAAKP,aACpDkB,EAAA,QAAAN,IAAA,2CAAMS,KAAK,UACTH,EAAA,UAAAN,IAAA,2CACEU,MAAM,UACNC,KAAK,SAAQ,gBACEC,OAAOjB,KAAKR,QAAO,gBACpB,OACd0B,QAASlB,KAAKE,QAEdS,EAAA,OAAAN,IAAA,2CACEc,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,kBACN,QAAO,cACX,QAEZb,EAAA,UAAAN,IAAA,2CAAQoB,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC1BhB,EAAA,QAAAN,IAAA,2CAAMuB,GAAG,KAAKC,GAAG,IAAIC,GAAG,KAAKC,GAAG,OAChCpB,EAAA,QAAAN,IAAA,2CAAMuB,GAAG,KAAKC,GAAG,KAAKC,GAAG,QAAQC,GAAG,UAI1CpB,EAAA,OAAAN,IAAA,2CACEU,MAAM,QACNiB,KAAK,UAAS,cACDf,QAAQjB,KAAKR,SAEzBQ,KAAKiC,aAAetB,EAAA,KAAAN,IAAA,4CAAIL,KAAKiC,aAC9BtB,EAAA,QAAAN,IAAA,8C","ignoreList":[]}

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

@@ -0,0 +1,8 @@
+/**
+ * @license lucide v0.577.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const a=[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56"}]];export{a as L};
+//# sourceMappingURL=p-ac8e14be.js.map

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

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

@@ -0,0 +1,2 @@
+import{r as a,c as e,h as d,H as i}from"./p-ed4017f0.js";const n=(a,e,d,i)=>`\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    width: 100%;\n    overflow-x: auto;\n    background: var(--diwa-bg-surface);\n    border-radius: var(--diwa-radius-lg);\n    --diwa-table-padding: ${a?"var(--diwa-space-fluid-xs)":"var(--diwa-space-fluid-md)"};\n    --diwa-table-hover-color: var(--diwa-bg-hover);\n    --diwa-table-border-color: var(--diwa-border);\n    --diwa-table-column-border: ${d?"var(--diwa-border-width-thin) solid var(--diwa-border)":"none"};\n    --diwa-table-stripe-color: ${i?"var(--diwa-bg-elevated)":"transparent"};\n    --diwa-table-header-bg: var(--diwa-bg-elevated);\n    ${d?`\n    border: var(--diwa-border-width-thin) solid var(--diwa-border);\n    overflow: hidden;\n    `:""}\n  }\n\n  :host([hidden]) { display: none; }\n\n  .table {\n    width: 100%;\n    border-collapse: collapse;\n    background: var(--diwa-bg-surface);\n    font-size: var(--diwa-font-size-base);\n    color: var(--diwa-text-primary);\n    ${e==="fixed"?"table-layout: fixed;":""}\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;const r=class{constructor(d){a(this,d);this.update=e(this,"update",1);this.theme="dark";this.caption="";this.compact=false;this.layout="auto";this.bordered=false;this.striped=false}handleTableUpdate(a){a.stopPropagation();this.update.emit(a.detail)}render(){return d(i,{key:"f44c979bd3fe3e5dac8c82d74519f433ae6617f3","data-theme":this.theme},d("style",{key:"864a46be2b5682fc4876bb392b6e85484fed3a92",innerHTML:n(this.compact,this.layout,this.bordered,this.striped)}),d("table",{key:"f79f51a9cccc9df05c92b16b013a5e7400d30012",class:"table"},this.caption&&d("caption",{key:"d7bc36ebb05f3e452c953fc772dfb3988705c04a",class:"sr-only"},this.caption),d("slot",{key:"4586f22dd7b51da6ec44ca11773297db6a75e1e6"})))}};export{r as diwa_table};
+//# sourceMappingURL=p-b7132ea7.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getComponentCss","compact","layout","bordered","striped","DiwaTable","constructor","hostRef","this","theme","caption","handleTableUpdate","e","stopPropagation","update","emit","detail","render","h","Host","key","innerHTML","class"],"sources":["src/components/diwa-table/diwa-table-styles.ts","src/components/diwa-table/diwa-table.tsx"],"sourcesContent":["export const getComponentCss = (\r\n  compact: boolean,\r\n  layout: 'auto' | 'fixed',\r\n  bordered: boolean,\r\n  striped: boolean,\r\n): string => `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    width: 100%;\r\n    overflow-x: auto;\r\n    background: var(--diwa-bg-surface);\r\n    border-radius: var(--diwa-radius-lg);\r\n    --diwa-table-padding: ${compact ? 'var(--diwa-space-fluid-xs)' : 'var(--diwa-space-fluid-md)'};\r\n    --diwa-table-hover-color: var(--diwa-bg-hover);\r\n    --diwa-table-border-color: var(--diwa-border);\r\n    --diwa-table-column-border: ${bordered ? 'var(--diwa-border-width-thin) solid var(--diwa-border)' : 'none'};\r\n    --diwa-table-stripe-color: ${striped ? 'var(--diwa-bg-elevated)' : 'transparent'};\r\n    --diwa-table-header-bg: var(--diwa-bg-elevated);\r\n    ${bordered ? `\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    overflow: hidden;\r\n    ` : ''}\r\n  }\r\n\r\n  :host([hidden]) { display: none; }\r\n\r\n  .table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    background: var(--diwa-bg-surface);\r\n    font-size: var(--diwa-font-size-base);\r\n    color: var(--diwa-text-primary);\r\n    ${layout === 'fixed' ? 'table-layout: fixed;' : ''}\r\n  }\r\n\r\n  .sr-only {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 1px;\r\n    padding: 0;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    clip: rect(0, 0, 0, 0);\r\n    white-space: nowrap;\r\n    border: 0;\r\n  }\r\n`;\r\n","import { Component, Event, type EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { TableUpdateEventDetail } from '../diwa-table-head-cell/types';\r\nimport { getComponentCss } from './diwa-table-styles';\r\n\r\n/**\r\n * @component diwa-table\r\n * Wrapper for a data table. Uses native HTML table layout via display CSS.\r\n * Structure: diwa-table > diwa-table-head > diwa-table-row > diwa-table-head-cell\r\n *                       > diwa-table-body > diwa-table-row > diwa-table-cell\r\n */\r\n@Component({ tag: 'diwa-table', shadow: true })\r\nexport class DiwaTable {\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n  @Prop() caption: string = '';\r\n  @Prop() compact: boolean = false;\r\n  @Prop() layout: 'auto' | 'fixed' = 'auto';\r\n  @Prop() bordered: boolean = false;\r\n  @Prop() striped: boolean = false;\r\n\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<TableUpdateEventDetail>;\r\n\r\n  @Listen('diwaTableUpdate')\r\n  protected handleTableUpdate(e: CustomEvent<TableUpdateEventDetail>): void {\r\n    e.stopPropagation();\r\n    this.update.emit(e.detail);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.compact, this.layout, this.bordered, this.striped)} />\r\n        <table class=\"table\">\r\n          {this.caption && <caption class=\"sr-only\">{this.caption}</caption>}\r\n          <slot />\r\n        </table>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"yDAAO,MAAMA,EAAkB,CAC7BC,EACAC,EACAC,EACAC,IACW,4OAQeH,EAAU,6BAA+B,2KAGnCE,EAAW,yDAA2D,2CACvEC,EAAU,0BAA4B,6EAEjED,EAAW,qGAGT,mPAWFD,IAAW,QAAU,uBAAyB,+N,MCrBvCG,EAAS,MADtB,WAAAC,CAAAC,G,yCAE2BC,KAAAC,MAAe,OAChCD,KAAAE,QAAkB,GAClBF,KAAAP,QAAmB,MACnBO,KAAAN,OAA2B,OAC3BM,KAAAL,SAAoB,MACpBK,KAAAJ,QAAmB,K,CAMjB,iBAAAO,CAAkBC,GAC1BA,EAAEC,kBACFL,KAAKM,OAAOC,KAAKH,EAAEI,O,CAGrB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,wDAAaZ,KAAKC,OACrBS,EAAA,SAAAE,IAAA,2CAAOC,UAAWrB,EAAgBQ,KAAKP,QAASO,KAAKN,OAAQM,KAAKL,SAAUK,KAAKJ,WACjFc,EAAA,SAAAE,IAAA,2CAAOE,MAAM,SACVd,KAAKE,SAAWQ,EAAA,WAAAE,IAAA,2CAASE,MAAM,WAAWd,KAAKE,SAChDQ,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as n}from"./p-ed4017f0.js";import{g as a}from"./p-70bbb21a.js";const o={top:"flex-start",center:"center",bottom:"flex-end"};const r=(t,e,n)=>{const r=o[e];return`\n    :host {\n      display: block;\n      position: relative;\n    }\n    :host([hidden]) {\n      display: none;\n    }\n    .scroller {\n      display: grid;\n      grid-template-columns: ${n?"auto minmax(0, 1fr) auto":"minmax(0, 1fr)"};\n      align-items: ${r};\n      gap: var(--diwa-space-2);\n    }\n    .scroll-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--diwa-space-8);\n      height: var(--diwa-space-8);\n      padding: 0;\n      border: var(--diwa-border-width-thin) solid var(--diwa-border);\n      border-radius: var(--diwa-radius-full);\n      background: var(--diwa-bg-surface);\n      color: var(--diwa-text-secondary);\n      cursor: pointer;\n      transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\n      flex-shrink: 0;\n    }\n    .scroll-button:hover:not(:disabled) {\n      color: var(--diwa-text-primary);\n      background: var(--diwa-bg-hover);\n    }\n    .scroll-button:disabled {\n      opacity: var(--diwa-opacity-disabled);\n      cursor: not-allowed;\n    }\n    .scroll-button[hidden] {\n      display: none;\n    }\n    ${a(".scroll-button")}\n    .scroll-area {\n      display: flex;\n      position: relative;\n      align-items: ${r};\n      overflow-x: auto;\n      overflow-y: hidden;\n      scroll-behavior: smooth;\n      -webkit-overflow-scrolling: touch;\n      ${t?"":"scrollbar-width: none;"}\n    }\n    ::slotted(*) {\n      flex: 0 0 auto;\n    }\n    ${!t?`\n    .scroll-area::-webkit-scrollbar {\n      display: none;\n    }\n    `:""}\n    /* Fade-out gradient masks at the edges */\n    .scroll-area::before,\n    .scroll-area::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: var(--diwa-scroller-fade-width);\n      pointer-events: none;\n      z-index: 1;\n      opacity: ${n?"1":"0"};\n    }\n    .scroll-area::before {\n      left: 0;\n      background: var(--diwa-gradient-scrim-right);\n    }\n    .scroll-area::after {\n      right: 0;\n      background: var(--diwa-gradient-scrim-left);\n    }\n  `};const i=class{constructor(e){t(this,e);this.alignScrollIndicator="center";this.scrollbar=false;this.theme="dark";this.hasOverflow=false;this.canScrollLeft=false;this.canScrollRight=false;this.setScrollAreaRef=t=>{this.scrollAreaEl=t};this.handleScroll=()=>{this.updateScrollState()};this.handleSlotChange=()=>{requestAnimationFrame((()=>this.updateScrollState()))};this.scrollByPage=t=>{const e=this.scrollAreaEl;if(!e)return;const n=Math.max(e.clientWidth*.8,1);e.scrollBy({left:t==="start"?-n:n,behavior:"smooth"})}}handleWindowResize(){this.updateScrollState()}componentDidLoad(){this.updateScrollState()}updateScrollState(){const t=this.scrollAreaEl;if(!t)return;const e=Math.max(0,t.scrollWidth-t.clientWidth);const n=t.scrollLeft;const a=1;this.hasOverflow=e>a;this.canScrollLeft=n>a;this.canScrollRight=n<e-a}render(){return e(n,{key:"643614f02efd65645b30e84ca2e2df2d54dba30c","data-theme":this.theme},e("style",{key:"4cef13fba65f9343955f1a183fd09a2ddd7d322b",innerHTML:r(this.scrollbar,this.alignScrollIndicator,this.hasOverflow)}),e("div",{key:"441066c0c3f32216a5c6a0c43e0edb205e559356",class:"scroller"},e("button",{key:"9839234ed27ab6d8f0afe9679dfe190a56055bff",type:"button",class:"scroll-button scroll-button--start","aria-label":"Scroll left",disabled:!this.canScrollLeft,hidden:!this.hasOverflow,onClick:()=>this.scrollByPage("start")},e("svg",{key:"896a859726a6e3c576e76e565eceb67a1f48ad0a",viewBox:"0 0 16 16",width:"16",height:"16",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},e("path",{key:"f986a71e860fe2c2a36c1dea537e4e506e0c6441",d:"M10 3.5 5 8l5 4.5"}))),e("div",{key:"f719058341223bc9fea62b6769a86e0f2a238a06",class:"scroll-area",onScroll:this.handleScroll,ref:this.setScrollAreaRef},e("slot",{key:"c4139a8885d3fa7fba2ecb4c911a87d31a692b85",onSlotchange:this.handleSlotChange})),e("button",{key:"5ea25f1b0b0f45b73c1c775a06546b33815510d8",type:"button",class:"scroll-button scroll-button--end","aria-label":"Scroll right",disabled:!this.canScrollRight,hidden:!this.hasOverflow,onClick:()=>this.scrollByPage("end")},e("svg",{key:"37b414293ec9cc708bdece7d9884202a2ba842f6",viewBox:"0 0 16 16",width:"16",height:"16",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},e("path",{key:"bac8253b0e9e7c7ea88da607a7f47b505082916a",d:"M6 3.5 11 8l-5 4.5"})))))}};export{i as diwa_scroller};
+//# sourceMappingURL=p-b988c5b3.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ALIGN_MAP","top","center","bottom","getComponentCss","scrollbar","alignScrollIndicator","hasOverflow","alignItems","getFocusStyle","DiwaScroller","constructor","hostRef","this","theme","canScrollLeft","canScrollRight","setScrollAreaRef","el","scrollAreaEl","handleScroll","updateScrollState","handleSlotChange","requestAnimationFrame","scrollByPage","direction","distance","Math","max","clientWidth","scrollBy","left","behavior","handleWindowResize","componentDidLoad","maxScrollLeft","scrollWidth","currentScrollLeft","scrollLeft","epsilon","render","h","Host","key","innerHTML","class","type","disabled","hidden","onClick","viewBox","width","height","fill","stroke","d","onScroll","ref","onSlotchange"],"sources":["src/components/diwa-scroller/diwa-scroller-styles.ts","src/components/diwa-scroller/diwa-scroller.tsx"],"sourcesContent":["import { getFocusStyle } from '../../utils/styles';\r\nimport type { ScrollerScrollIndicatorPosition } from './types';\r\n\r\nconst ALIGN_MAP: Record<ScrollerScrollIndicatorPosition, string> = {\r\n  top: 'flex-start',\r\n  center: 'center',\r\n  bottom: 'flex-end',\r\n};\r\n\r\nexport const getComponentCss = (\r\n  scrollbar: boolean,\r\n  alignScrollIndicator: ScrollerScrollIndicatorPosition,\r\n  hasOverflow: boolean,\r\n): string => {\r\n  const alignItems = ALIGN_MAP[alignScrollIndicator];\r\n\r\n  return `\r\n    :host {\r\n      display: block;\r\n      position: relative;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .scroller {\r\n      display: grid;\r\n      grid-template-columns: ${hasOverflow ? 'auto minmax(0, 1fr) auto' : 'minmax(0, 1fr)'};\r\n      align-items: ${alignItems};\r\n      gap: var(--diwa-space-2);\r\n    }\r\n    .scroll-button {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: var(--diwa-space-8);\r\n      height: var(--diwa-space-8);\r\n      padding: 0;\r\n      border: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n      border-radius: var(--diwa-radius-full);\r\n      background: var(--diwa-bg-surface);\r\n      color: var(--diwa-text-secondary);\r\n      cursor: pointer;\r\n      transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\r\n      flex-shrink: 0;\r\n    }\r\n    .scroll-button:hover:not(:disabled) {\r\n      color: var(--diwa-text-primary);\r\n      background: var(--diwa-bg-hover);\r\n    }\r\n    .scroll-button:disabled {\r\n      opacity: var(--diwa-opacity-disabled);\r\n      cursor: not-allowed;\r\n    }\r\n    .scroll-button[hidden] {\r\n      display: none;\r\n    }\r\n    ${getFocusStyle('.scroll-button')}\r\n    .scroll-area {\r\n      display: flex;\r\n      position: relative;\r\n      align-items: ${alignItems};\r\n      overflow-x: auto;\r\n      overflow-y: hidden;\r\n      scroll-behavior: smooth;\r\n      -webkit-overflow-scrolling: touch;\r\n      ${scrollbar ? '' : 'scrollbar-width: none;'}\r\n    }\r\n    ::slotted(*) {\r\n      flex: 0 0 auto;\r\n    }\r\n    ${!scrollbar ? `\r\n    .scroll-area::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n    ` : ''}\r\n    /* Fade-out gradient masks at the edges */\r\n    .scroll-area::before,\r\n    .scroll-area::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      bottom: 0;\r\n      width: var(--diwa-scroller-fade-width);\r\n      pointer-events: none;\r\n      z-index: 1;\r\n      opacity: ${hasOverflow ? '1' : '0'};\r\n    }\r\n    .scroll-area::before {\r\n      left: 0;\r\n      background: var(--diwa-gradient-scrim-right);\r\n    }\r\n    .scroll-area::after {\r\n      right: 0;\r\n      background: var(--diwa-gradient-scrim-left);\r\n    }\r\n  `;\r\n};\r\n","import { Component, Host, Listen, Prop, State, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { ScrollerScrollIndicatorPosition } from './types';\r\nimport { getComponentCss } from './diwa-scroller-styles';\r\n\r\n/**\r\n * @slot default — Items to be scrolled horizontally.\r\n */\r\n@Component({\r\n  tag: 'diwa-scroller',\r\n  shadow: true,\r\n})\r\nexport class DiwaScroller {\r\n  /** Position of gradient fade indicators relative to the scroll area. */\r\n  @Prop() alignScrollIndicator: ScrollerScrollIndicatorPosition = 'center';\r\n\r\n  /** Whether to show the native horizontal scrollbar. */\r\n  @Prop() scrollbar: 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  @State() private hasOverflow: boolean = false;\r\n  @State() private canScrollLeft: boolean = false;\r\n  @State() private canScrollRight: boolean = false;\r\n\r\n  private scrollAreaEl?: HTMLDivElement;\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  handleWindowResize(): void {\r\n    this.updateScrollState();\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.updateScrollState();\r\n  }\r\n\r\n  private setScrollAreaRef = (el?: HTMLDivElement): void => {\r\n    this.scrollAreaEl = el;\r\n  };\r\n\r\n  private handleScroll = (): void => {\r\n    this.updateScrollState();\r\n  };\r\n\r\n  private handleSlotChange = (): void => {\r\n    requestAnimationFrame(() => this.updateScrollState());\r\n  };\r\n\r\n  private updateScrollState(): void {\r\n    const el = this.scrollAreaEl;\r\n    if (!el) return;\r\n\r\n    const maxScrollLeft = Math.max(0, el.scrollWidth - el.clientWidth);\r\n    const currentScrollLeft = el.scrollLeft;\r\n    const epsilon = 1;\r\n\r\n    this.hasOverflow = maxScrollLeft > epsilon;\r\n    this.canScrollLeft = currentScrollLeft > epsilon;\r\n    this.canScrollRight = currentScrollLeft < maxScrollLeft - epsilon;\r\n  }\r\n\r\n  private scrollByPage = (direction: 'start' | 'end'): void => {\r\n    const el = this.scrollAreaEl;\r\n    if (!el) return;\r\n\r\n    const distance = Math.max(el.clientWidth * 0.8, 1);\r\n    el.scrollBy({\r\n      left: direction === 'start' ? -distance : distance,\r\n      behavior: 'smooth',\r\n    });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.scrollbar, this.alignScrollIndicator, this.hasOverflow)} />\r\n        <div class=\"scroller\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"scroll-button scroll-button--start\"\r\n            aria-label=\"Scroll left\"\r\n            disabled={!this.canScrollLeft}\r\n            hidden={!this.hasOverflow}\r\n            onClick={() => this.scrollByPage('start')}\r\n          >\r\n            <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M10 3.5 5 8l5 4.5\" />\r\n            </svg>\r\n          </button>\r\n\r\n          <div class=\"scroll-area\" onScroll={this.handleScroll} ref={this.setScrollAreaRef}>\r\n            <slot onSlotchange={this.handleSlotChange} />\r\n          </div>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"scroll-button scroll-button--end\"\r\n            aria-label=\"Scroll right\"\r\n            disabled={!this.canScrollRight}\r\n            hidden={!this.hasOverflow}\r\n            onClick={() => this.scrollByPage('end')}\r\n          >\r\n            <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M6 3.5 11 8l-5 4.5\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"sFAGA,MAAMA,EAA6D,CACjEC,IAAK,aACLC,OAAQ,SACRC,OAAQ,YAGH,MAAMC,EAAkB,CAC7BC,EACAC,EACAC,KAEA,MAAMC,EAAaR,EAAUM,GAE7B,MAAO,mMAUsBC,EAAc,2BAA6B,yCACrDC,q4BA6BfC,EAAc,8GAICD,2IAKbH,EAAY,GAAK,2FAKlBA,EAAY,6EAIX,2SAWSE,EAAc,IAAM,gOAUlC,E,MCnFUG,EAAY,MAJzB,WAAAC,CAAAC,G,UAMUC,KAAAP,qBAAwD,SAGxDO,KAAAR,UAAqB,MAGJQ,KAAAC,MAAe,OAEvBD,KAAAN,YAAuB,MACvBM,KAAAE,cAAyB,MACzBF,KAAAG,eAA0B,MAanCH,KAAAI,iBAAoBC,IAC1BL,KAAKM,aAAeD,CAAE,EAGhBL,KAAAO,aAAe,KACrBP,KAAKQ,mBAAmB,EAGlBR,KAAAS,iBAAmB,KACzBC,uBAAsB,IAAMV,KAAKQ,qBAAoB,EAgB/CR,KAAAW,aAAgBC,IACtB,MAAMP,EAAKL,KAAKM,aAChB,IAAKD,EAAI,OAET,MAAMQ,EAAWC,KAAKC,IAAIV,EAAGW,YAAc,GAAK,GAChDX,EAAGY,SAAS,CACVC,KAAMN,IAAc,SAAWC,EAAWA,EAC1CM,SAAU,UACV,C,CAzCJ,kBAAAC,GACEpB,KAAKQ,mB,CAGP,gBAAAa,GACErB,KAAKQ,mB,CAeC,iBAAAA,GACN,MAAMH,EAAKL,KAAKM,aAChB,IAAKD,EAAI,OAET,MAAMiB,EAAgBR,KAAKC,IAAI,EAAGV,EAAGkB,YAAclB,EAAGW,aACtD,MAAMQ,EAAoBnB,EAAGoB,WAC7B,MAAMC,EAAU,EAEhB1B,KAAKN,YAAc4B,EAAgBI,EACnC1B,KAAKE,cAAgBsB,EAAoBE,EACzC1B,KAAKG,eAAiBqB,EAAoBF,EAAgBI,C,CAc5D,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,wDAAa9B,KAAKC,OACrB2B,EAAA,SAAAE,IAAA,2CAAOC,UAAWxC,EAAgBS,KAAKR,UAAWQ,KAAKP,qBAAsBO,KAAKN,eAClFkC,EAAA,OAAAE,IAAA,2CAAKE,MAAM,YACTJ,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLD,MAAM,qCAAoC,aAC/B,cACXE,UAAWlC,KAAKE,cAChBiC,QAASnC,KAAKN,YACd0C,QAAS,IAAMpC,KAAKW,aAAa,UAEjCiB,EAAA,OAAAE,IAAA,2CAAKO,QAAQ,YAAYC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,OAAO,eAAc,eAAc,MAAK,iBAAgB,QAAO,kBAAiB,QAAO,cAAa,QAC9Jb,EAAA,QAAAE,IAAA,2CAAMY,EAAE,wBAIZd,EAAA,OAAAE,IAAA,2CAAKE,MAAM,cAAcW,SAAU3C,KAAKO,aAAcqC,IAAK5C,KAAKI,kBAC9DwB,EAAA,QAAAE,IAAA,2CAAMe,aAAc7C,KAAKS,oBAG3BmB,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLD,MAAM,mCAAkC,aAC7B,eACXE,UAAWlC,KAAKG,eAChBgC,QAASnC,KAAKN,YACd0C,QAAS,IAAMpC,KAAKW,aAAa,QAEjCiB,EAAA,OAAAE,IAAA,2CAAKO,QAAQ,YAAYC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,OAAO,eAAc,eAAc,MAAK,iBAAgB,QAAO,kBAAiB,QAAO,cAAa,QAC9Jb,EAAA,QAAAE,IAAA,2CAAMY,EAAE,0B","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as n,c as e,h as a,H as t,g as i}from"./p-ed4017f0.js";import{g as o,a as r}from"./p-70bbb21a.js";import{g as s,c as d}from"./p-332838f8.js";const c=n=>{const e=n?"14px":"20px";return`\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Option row ─────────────────────────────────────────────────────── */\n\n  .option {\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-3);\n    padding: var(--diwa-space-2) var(--diwa-space-3);\n    min-height: ${n?"var(--diwa-touch-target-min-size-compact, 32px)":"var(--diwa-select-option-min-height, var(--diwa-touch-target-min-size, 44px))"};\n    box-sizing: border-box;\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n    color: var(--diwa-text-primary);\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-font-weight-normal);\n    line-height: 1.4;\n    border-radius: var(--diwa-radius-sm);\n    transition: background-color var(--diwa-transition-fast);\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${o(".option")}\n\n  /* ── Checkbox mark ──────────────────────────────────────────────────── */\n\n  .checkbox {\n    flex-shrink: 0;\n    width: ${e};\n    height: ${e};\n    ${s()}\n  }\n\n  /* ── Selected state ─────────────────────────────────────────────────── */\n\n  :host([selected]) .checkbox {\n    background-color: var(--diwa-accent);\n    border-color: var(--diwa-accent);\n    background-image: ${d};\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    :host([selected]) .option:hover .checkbox {\n      background-color: var(--diwa-accent-hover);\n      border-color: var(--diwa-accent-hover);\n    }\n  }\n\n  /* ── Highlighted (keyboard / hover) ─────────────────────────────────── */\n\n  :host([highlighted]) .option {\n    background-color: var(--diwa-bg-hover);\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .option:hover {\n      background-color: var(--diwa-bg-hover);\n    }\n  }\n\n  /* ── Label text ─────────────────────────────────────────────────────── */\n\n  .label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ── Disabled ───────────────────────────────────────────────────────── */\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  :host([disabled]) .option {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${r(".option",".checkbox")}\n`};const h=class{constructor(a){n(this,a);this.diwaMultiSelectOptionUpdate=e(this,"diwaMultiSelectOptionUpdate",7);this.disabled=false;this.selected=false;this.highlighted=false;this.compact=false;this.theme="dark";this.handleClick=()=>{if(this.disabled)return;this.diwaMultiSelectOptionUpdate.emit({value:this.value,selected:!this.selected})};this.handleKeyDown=n=>{if(this.disabled)return;if(n.key==="Enter"||n.key===" "){n.preventDefault();this.diwaMultiSelectOptionUpdate.emit({value:this.value,selected:!this.selected})}}}handlePropChange(){}async setFocus(){var n;(n=this.optionEl)===null||n===void 0?void 0:n.focus()}render(){return a(t,{key:"b4d48c6bb6968502a8ae2a6c1981db145332ce83","data-theme":this.theme},a("style",{key:"c69088cc9414ff1b6edc4fa064abc6fded70226b",innerHTML:c(this.compact)}),a("div",{key:"f5ecb4d1dda04a18735594105ee436544f210c95",class:"option",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":undefined,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,ref:n=>this.optionEl=n,part:"option"},a("span",{key:"3d2e4211d015355332a3ac44204d7a907659a465",class:"checkbox","aria-hidden":"true",part:"checkbox"}),a("span",{key:"86ca6452ad32e685f944511f4c862c848d0bf493",class:"label",part:"label"},a("slot",{key:"3caa3fafd6bdb4c3426d8ef989f8de34fc05a853"}))))}static get delegatesFocus(){return true}get host(){return i(this)}static get watchers(){return{selected:["handlePropChange"],highlighted:["handlePropChange"],disabled:["handlePropChange"]}}};export{h as diwa_multi_select_option};
+//# sourceMappingURL=p-ba1ffa71.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getComponentCss","compact","boxSize","getFocusStyle","getCheckboxBoxCss","checkmarkSvg","getReducedMotionStyle","DiwaMultiSelectOption","constructor","hostRef","this","disabled","selected","highlighted","theme","handleClick","diwaMultiSelectOptionUpdate","emit","value","handleKeyDown","e","key","preventDefault","handlePropChange","setFocus","_a","optionEl","focus","render","h","Host","innerHTML","class","role","undefined","tabIndex","onClick","onKeyDown","ref","el","part"],"sources":["src/components/diwa-multi-select-option/diwa-multi-select-option-styles.ts","src/components/diwa-multi-select-option/diwa-multi-select-option.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\nimport { checkmarkSvg, getCheckboxBoxCss } from '../../utils/checkbox-mark';\r\n\r\nexport const getComponentCss = (compact: boolean): string => {\r\n  const boxSize = compact ? '14px' : '20px';\r\n\r\n  return `\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Option row ─────────────────────────────────────────────────────── */\r\n\r\n  .option {\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-2) var(--diwa-space-3);\r\n    min-height: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-select-option-min-height, var(--diwa-touch-target-min-size, 44px))'};\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    -webkit-font-smoothing: antialiased;\r\n    color: var(--diwa-text-primary);\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-normal);\r\n    line-height: 1.4;\r\n    border-radius: var(--diwa-radius-sm);\r\n    transition: background-color var(--diwa-transition-fast);\r\n  }\r\n\r\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.option')}\r\n\r\n  /* ── Checkbox mark ──────────────────────────────────────────────────── */\r\n\r\n  .checkbox {\r\n    flex-shrink: 0;\r\n    width: ${boxSize};\r\n    height: ${boxSize};\r\n    ${getCheckboxBoxCss()}\r\n  }\r\n\r\n  /* ── Selected state ─────────────────────────────────────────────────── */\r\n\r\n  :host([selected]) .checkbox {\r\n    background-color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n    background-image: ${checkmarkSvg};\r\n  }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\n    :host([selected]) .option:hover .checkbox {\n      background-color: var(--diwa-accent-hover);\n      border-color: var(--diwa-accent-hover);\n    }\n  }\n\r\n  /* ── Highlighted (keyboard / hover) ─────────────────────────────────── */\r\n\r\n  :host([highlighted]) .option {\n    background-color: var(--diwa-bg-hover);\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .option:hover {\n      background-color: var(--diwa-bg-hover);\n    }\n  }\n\r\n  /* ── Label text ─────────────────────────────────────────────────────── */\r\n\r\n  .label {\r\n    flex: 1;\r\n    min-width: 0;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  /* ── Disabled ───────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) {\r\n    pointer-events: none;\r\n  }\r\n\r\n  :host([disabled]) .option {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.option', '.checkbox')}\r\n`;\r\n};\r\n","import { Component, Element, Event, type EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-multi-select-option-styles';\r\n\r\n/**\r\n * @component diwa-multi-select-option\r\n *\r\n * Individual option element for use inside <diwa-multi-select>.\r\n * Renders a row with a CSS checkbox and label text.\r\n *\r\n * Not intended for standalone use — must be slotted into <diwa-multi-select>.\r\n *\r\n * @slot default — Option label text (plain text or inline phrasing content)\r\n */\r\n@Component({\r\n  tag: 'diwa-multi-select-option',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaMultiSelectOption {\r\n  @Element() host!: HTMLDiwaMultiSelectOptionElement;\r\n\r\n  /** The value submitted/emitted when this option is selected. */\r\n  @Prop({ reflect: true }) value!: string;\r\n\r\n  /** Disables the option — it cannot be selected. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Whether the option is currently selected.\r\n   * Maintained by the parent <diwa-multi-select>; consumers can also\r\n   * pre-select options by setting this attribute.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) selected: boolean = false;\r\n\r\n  /**\r\n   * Whether the option is currently keyboard-highlighted.\r\n   * Set exclusively by the parent component.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) highlighted: boolean = false;\r\n\r\n  /**\r\n   * Compact variant — reduces the option row height and checkbox size.\r\n   * Inherited from the parent diwa-multi-select.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) compact: boolean = false;\r\n\r\n  /** Theme — inherited from the parent diwa-multi-select. */\r\n  @Prop({ mutable: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Emitted when the user clicks or presses Enter on the option.\r\n   * Bubbles and crosses Shadow DOM so the parent can catch it via @Listen.\r\n   */\r\n  @Event({ bubbles: true, composed: true })\r\n  diwaMultiSelectOptionUpdate!: EventEmitter<{ value: string; selected: boolean }>;\r\n\r\n  @Watch('selected')\r\n  @Watch('highlighted')\r\n  @Watch('disabled')\r\n  handlePropChange(): void {\r\n    // Re-injecting CSS on state change keeps styles in sync without a full re-render.\r\n    // The watch covers selected/highlighted/disabled prop changes.\r\n  }\r\n\r\n  /** Focuses the inner option element. */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    this.optionEl?.focus();\r\n  }\r\n\r\n  private optionEl?: HTMLDivElement;\r\n\r\n  private handleClick = (): void => {\r\n    if (this.disabled) return;\r\n    this.diwaMultiSelectOptionUpdate.emit({ value: this.value, selected: !this.selected });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent): void => {\r\n    if (this.disabled) return;\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      e.preventDefault();\r\n      this.diwaMultiSelectOptionUpdate.emit({ value: this.value, selected: !this.selected });\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.compact)} />\r\n        <div\r\n          class=\"option\"\r\n          role=\"option\"\r\n          aria-selected={this.selected ? 'true' : 'false'}\r\n          aria-disabled={this.disabled ? 'true' : undefined}\r\n          tabIndex={this.disabled ? -1 : 0}\r\n          onClick={this.handleClick}\r\n          onKeyDown={this.handleKeyDown}\r\n          ref={(el) => (this.optionEl = el as HTMLDivElement)}\r\n          part=\"option\"\r\n        >\r\n          <span class=\"checkbox\" aria-hidden=\"true\" part=\"checkbox\" />\r\n          <span class=\"label\" part=\"label\">\r\n            <slot />\r\n          </span>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"sJAGO,MAAMA,EAAmBC,IAC9B,MAAMC,EAAUD,EAAU,OAAS,OAEnC,MAAO,keAoBSA,EAAU,kDAAoD,yiBAe5EE,EAAc,iJAMLD,mBACCA,WACRE,yOAQkBC,miCA6CpBC,EAAsB,UAAW,gBACpC,E,MCrFYC,EAAqB,MAJlC,WAAAC,CAAAC,G,mFAW2BC,KAAAC,SAAoB,MAOLD,KAAAE,SAAoB,MAMpBF,KAAAG,YAAuB,MAMvBH,KAAAT,QAAmB,MAGlCS,KAAAI,MAAe,OAyBhCJ,KAAAK,YAAc,KACpB,GAAIL,KAAKC,SAAU,OACnBD,KAAKM,4BAA4BC,KAAK,CAAEC,MAAOR,KAAKQ,MAAON,UAAWF,KAAKE,UAAW,EAGhFF,KAAAS,cAAiBC,IACvB,GAAIV,KAAKC,SAAU,OACnB,GAAIS,EAAEC,MAAQ,SAAWD,EAAEC,MAAQ,IAAK,CACtCD,EAAEE,iBACFZ,KAAKM,4BAA4BC,KAAK,CAAEC,MAAOR,KAAKQ,MAAON,UAAWF,KAAKE,U,GAtB/E,gBAAAW,G,CAOA,cAAMC,G,OACJC,EAAAf,KAAKgB,YAAQ,MAAAD,SAAA,SAAAA,EAAEE,O,CAkBjB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAT,IAAA,wDAAaX,KAAKI,OACrBe,EAAA,SAAAR,IAAA,2CAAOU,UAAW/B,EAAgBU,KAAKT,WACvC4B,EAAA,OAAAR,IAAA,2CACEW,MAAM,SACNC,KAAK,SAAQ,gBACEvB,KAAKE,SAAW,OAAS,QAAO,gBAChCF,KAAKC,SAAW,OAASuB,UACxCC,SAAUzB,KAAKC,UAAY,EAAI,EAC/ByB,QAAS1B,KAAKK,YACdsB,UAAW3B,KAAKS,cAChBmB,IAAMC,GAAQ7B,KAAKgB,SAAWa,EAC9BC,KAAK,UAELX,EAAA,QAAAR,IAAA,2CAAMW,MAAM,WAAU,cAAa,OAAOQ,KAAK,aAC/CX,EAAA,QAAAR,IAAA,2CAAMW,MAAM,QAAQQ,KAAK,SACvBX,EAAA,QAAAR,IAAA,+C","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as i,c as n,f as t,h as e,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,t,e,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 button ─────────────────────────────────────────────────── */\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 (not when a shadow descendant is focused) ─ */\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  /* ── Reset button ───────────────────────────────────────────────────── */\n\n  .trigger__reset {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--diwa-touch-target-min-size, 44px);\n    height: var(--diwa-touch-target-min-size, 44px);\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--diwa-text-secondary);\n    cursor: pointer;\n    border-radius: var(--diwa-radius-sm);\n    line-height: 0;\n    font-size: var(--diwa-font-size-base);\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .trigger__reset:hover {\n      color: var(--diwa-text-primary);\n    }\n  }\n\n  .trigger__reset:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: -2px;\n  }\n\n  .trigger__reset:focus:not(:focus-visible) {\n    outline: none;\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 l=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.value=[];this.state="none";this.hideLabel=false;this.disabled=false;this.required=false;this.compact=false;this.dropdownDirection="auto";this.isOpen=false;this.filterText="";this.hasFilterResults=true;this.dropdownClass="dropdown";this.internalId=`diwa-ms-${++h}`;this.options=[];this.highlightedIndex=-1;this.hasCustomFilterSlot=false;this.hasCustomSelectedSlot=false;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 t=i.target.value.toLowerCase();this.filterText=t;let e=false;for(const i of this.options){const a=((n=i.textContent)!==null&&n!==void 0?n:"").toLowerCase();const r=a.includes(t);i.style.display=r?"":"none";if(r)e=true}this.hasFilterResults=e;this.highlightedIndex=0;this.applyHighlight()};this.onResetClick=i=>{i.stopPropagation();this.value=[];this.syncSelectionFromValue();this.change.emit({name:this.name,value:[]});t(this.host);this.triggerEl.focus()}}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;if(!this.hasCustomFilterSlot){(i=this.filterInputEl)===null||i===void 0?void 0:i.focus()}}))}else{this.clearHighlight();this.highlightedIndex=-1;if(!this.hasCustomFilterSlot){this.resetFilter()}}}connectedCallback(){document.addEventListener("mousedown",this.onClickOutside,true)}disconnectedCallback(){document.removeEventListener("mousedown",this.onClickOutside,true)}componentWillLoad(){this.hasCustomFilterSlot=this.host.querySelector('[slot="filter"]')!==null;this.hasCustomSelectedSlot=this.host.querySelector('[slot="selected"]')!==null}componentDidLoad(){this.collectOptions();this.syncSelectionFromValue();this.syncChildThemes();this.syncChildCompact()}async open(){this.isOpen=true}async close(){this.isOpen=false}onOptionUpdate(i){i.stopPropagation();const{value:n,selected:e}=i.detail;if(e){if(!this.value.includes(n)){this.value=[...this.value,n]}}else{this.value=this.value.filter((i=>i!==n))}this.syncSelectionFromValue();this.change.emit({name:this.name,value:this.value});t(this.host)}onSlotChange(){this.collectOptions();this.syncSelectionFromValue();this.syncChildThemes();this.syncChildCompact()}collectOptions(){this.options=Array.from(this.host.querySelectorAll("diwa-multi-select-option"))}syncSelectionFromValue(){const i=new Set(this.value);for(const n of this.options){const e=i.has(n.value);if(n.selected!==e){n.selected=e;t(n)}}}syncChildThemes(){for(const i of this.options){if(i.theme!==this.theme){i.theme=this.theme;t(i)}}}syncChildCompact(){for(const i of this.options){if(i.compact!==this.compact){i.compact=this.compact;t(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(){this.filterText="";if(this.filterInputEl)this.filterInputEl.value="";this.hasFilterResults=true;for(const i of this.options){i.style.display=""}}get selectedLabels(){return this.options.filter((i=>this.value.includes(i.value))).map((i=>{var n;return((n=i.textContent)!==null&&n!==void 0?n:"").trim()})).filter(Boolean).join(", ")}render(){const i=`${this.internalId}-label`;const n=`${this.internalId}-listbox`;const t=`${this.internalId}-hint`;const r=!!this.message&&this.state!=="none";const s=this.value.length>0;return e(a,{key:"b64a8c41ae771f58d8ca8778ddb3f943f1e2cac4","data-theme":this.theme},e("style",{key:"d8cc4112b8378f11e5a91874adc6ae3f1e422fa4",innerHTML:d(this.isOpen,this.disabled,this.state,this.compact,this.dropdownClass.includes("--up"))}),(this.label||this.host.querySelector('[slot="label"]'))&&e("span",{key:"53f49aa986fd9f05e73314cc650995afa8b97bb2",class:"label",id:i,part:"label"},e("slot",{key:"7c2f4c19f4d25ca64bfa28f4a4a3f5234594c763",name:"label"},this.label),this.required&&e("span",{key:"bbd11f3b58d7821ca7ab7ebc8eb0a05e3618a5e9",class:"label__required","aria-hidden":"true"},"*")),(this.description||this.host.querySelector('[slot="description"]'))&&e("span",{key:"92a55e0597c3802a2f986d0b9ba10d41ed33356a",class:"description",part:"description"},e("slot",{key:"0365a7975834cb125e1b65ce482874d99f69af2a",name:"description"},this.description)),e("div",{key:"293c6bd35a70f57a7e2b0efa930fa61578ab3752",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?t:undefined,tabIndex:this.disabled?-1:0,onClick:this.onTriggerClick,onKeyDown:this.onTriggerKeyDown,ref:i=>this.triggerEl=i,part:"trigger"},e("span",{key:"146365e26a7513974361dfa9dc26410e5e174fd8",class:`trigger__value${!s?" trigger__placeholder":""}`,part:"value"},this.hasCustomSelectedSlot?e("slot",{name:"selected"}):s?this.selectedLabels:this.label||"Select options"),s&&e("button",{key:"b1a5018fb507d2d4d4d822af191bef24c6fa558e",class:"trigger__reset",type:"button","aria-label":"Reset selection",onClick:this.onResetClick,onKeyDown:i=>{if(i.key==="Tab")this.isOpen=false},part:"reset"},"✕"),e("span",{key:"4dbbf50468fc96323e3bd9c92b25e3f34e2ad344",class:"trigger__chevron","aria-hidden":"true",part:"chevron"},e("svg",{key:"0b4f50afe6b0cd6d1ffccb3a8acf5709a8734477",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{key:"1c582d3bcf18af529b1d8b2a581f9ef7ad13858e",d:"M4 6L8 10L12 6",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})))),e("div",{key:"f98fd7dd9d6325a2eafb21880d10d12f4517dc4e",class:this.dropdownClass,role:"dialog","aria-label":this.label,"aria-hidden":this.isOpen?undefined:"true",part:"dropdown"},this.hasCustomFilterSlot?e("div",{class:"filter"},e("slot",{name:"filter"})):e("div",{class:"filter"},e("input",{class:"filter__input",type:"text",placeholder:"Filter options…","aria-label":"Filter options",autocomplete:"off",value:this.filterText,onInput:this.onFilterInput,onKeyDown:this.onTriggerKeyDown,ref:i=>this.filterInputEl=i,part:"filter-input"})),e("div",{key:"edd1c19900c332574d972424a62d117d10cbcda6",class:"options",id:n,role:"listbox","aria-label":this.label,"aria-multiselectable":"true",part:"options"},!this.hasFilterResults&&e("div",{key:"e03ac0ea8790a73bcc15f71fee27c773a1e323f9",class:"no-results",role:"alert","aria-live":"polite"},"No results found"),e("slot",{key:"71bd34a1ca8e20245f7bf87bf4cd7be8c5814556",name:"options-status"}),e("slot",{key:"a7c8ebb35860740c3c19b5f8910b18bf923bc7ff",onSlotchange:()=>this.onSlotChange()}))),r&&e("span",{key:"671515ab8d44ac2fef5cd5f5a398c945de4b2b6e",id:t,class:"message",part:"message","aria-live":this.state==="error"?"polite":undefined},e("slot",{key:"f93922457797ae8cfeb378b3338b537907267c93",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{l as diwa_multi_select};
+//# sourceMappingURL=p-bb04cdd6.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getComponentCss","isOpen","_disabled","_state","_compact","isUp","getFocusStyle","getReducedMotionStyle","multiSelectIdCounter","DiwaMultiSelect","constructor","hostRef","this","theme","name","value","state","hideLabel","disabled","required","compact","dropdownDirection","filterText","hasFilterResults","dropdownClass","internalId","options","highlightedIndex","hasCustomFilterSlot","hasCustomSelectedSlot","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","toLowerCase","anyVisible","opt","text","_a","textContent","match","style","display","onResetClick","stopPropagation","syncSelectionFromValue","change","forceUpdate","onThemeChange","syncChildThemes","onCompactChange","syncChildCompact","onValueChange","onIsOpenChange","open","toggle","updateDropdownDirection","getFirstHighlightIndex","requestAnimationFrame","filterInputEl","clearHighlight","resetFilter","connectedCallback","document","addEventListener","disconnectedCallback","removeEventListener","componentWillLoad","querySelector","componentDidLoad","collectOptions","close","onOptionUpdate","selected","detail","filter","v","onSlotChange","Array","from","querySelectorAll","valueSet","Set","shouldBeSelected","has","o","firstSelected","findIndex","forEach","i","highlighted","rect","getBoundingClientRect","spaceBelow","window","innerHeight","bottom","selectedLabels","map","trim","Boolean","join","render","labelId","listboxId","hintId","hasMessage","message","hasValue","h","Host","innerHTML","label","class","id","part","description","role","undefined","tabIndex","onClick","onKeyDown","ref","el","type","viewBox","fill","xmlns","d","stroke","placeholder","autocomplete","onInput","onSlotchange"],"sources":["src/components/diwa-multi-select/diwa-multi-select-styles.ts","src/components/diwa-multi-select/diwa-multi-select.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\nimport type { MultiSelectState } from './types';\r\n\r\nexport const getComponentCss = (\r\n  isOpen: boolean,\r\n  _disabled: boolean,\r\n  _state: MultiSelectState,\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 button ─────────────────────────────────────────────────── */\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 (not when a shadow descendant is focused) ─ */\r\n\r\n  ${getFocusStyle('.trigger')}\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  /* ── Reset button ───────────────────────────────────────────────────── */\r\n\r\n  .trigger__reset {\n    flex-shrink: 0;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--diwa-touch-target-min-size, 44px);\n    height: var(--diwa-touch-target-min-size, 44px);\n    padding: 0;\r\n    border: none;\r\n    background: none;\r\n    color: var(--diwa-text-secondary);\r\n    cursor: pointer;\r\n    border-radius: var(--diwa-radius-sm);\r\n    line-height: 0;\r\n    font-size: var(--diwa-font-size-base);\r\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .trigger__reset:hover {\n      color: var(--diwa-text-primary);\n    }\n  }\n\n  .trigger__reset:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: -2px;\n  }\n\n  .trigger__reset:focus:not(:focus-visible) {\n    outline: none;\n  }\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  MultiSelectChangeEventDetail,\r\n  MultiSelectDropdownDirection,\r\n  MultiSelectState,\r\n  MultiSelectTheme,\r\n  MultiSelectToggleEventDetail,\r\n} from './types';\r\nimport { getComponentCss } from './diwa-multi-select-styles';\r\n\r\n/** Module-level counter for unique IDs. */\r\nlet multiSelectIdCounter = 0;\r\n\r\n/**\r\n * @component diwa-multi-select\r\n *\r\n * A fully accessible multi-select dropdown with built-in text filter,\r\n * keyboard navigation, and form integration.\r\n *\r\n * Based on the Diwa multi-select API contract.\n *\r\n * Design token override API:\r\n *   --diwa-multi-select-height     Trigger button height (default 40px)\r\n *   --diwa-multi-select-height-sm  Trigger height when compact (default 32px)\r\n *\r\n * Usage:\r\n *   <diwa-multi-select name=\"fruits\" label=\"Fruits\">\r\n *     <diwa-multi-select-option value=\"apple\">Apple</diwa-multi-select-option>\r\n *     <diwa-multi-select-option value=\"banana\">Banana</diwa-multi-select-option>\r\n *   </diwa-multi-select>\r\n *\r\n * @slot default         — diwa-multi-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 * @slot selected        — Custom selected-value display in the trigger button\r\n * @slot filter          — Custom filter input; disables the built-in filter\r\n * @slot options-status  — Loading / no-results / error content for async patterns\r\n */\r\n@Component({\r\n  tag: 'diwa-multi-select',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaMultiSelect {\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: MultiSelectTheme = '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 values. Mutable — updated on user interaction. */\r\n  @Prop({ mutable: true }) value: string[] = [];\r\n\r\n  /** Validation state. */\r\n  @Prop({ reflect: true }) state: MultiSelectState = '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: MultiSelectDropdownDirection = '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<MultiSelectChangeEventDetail>;\r\n\r\n  /** Emitted when the dropdown opens or closes. */\r\n  @Event({ bubbles: false })\r\n  toggle!: EventEmitter<MultiSelectToggleEventDetail>;\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 filterText: string = '';\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-ms-${++multiSelectIdCounter}`;\r\n  private triggerEl!: HTMLDivElement;\r\n  private filterInputEl?: HTMLInputElement;\r\n  private options: HTMLDiwaMultiSelectOptionElement[] = [];\r\n  private highlightedIndex: number = -1;\r\n  private hasCustomFilterSlot: boolean = false;\r\n  private hasCustomSelectedSlot: boolean = false;\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      // Move highlight to first selected option, or first option\r\n      this.highlightedIndex = this.getFirstHighlightIndex();\r\n      this.applyHighlight();\r\n      // Focus filter when opening\r\n      requestAnimationFrame(() => {\r\n        if (!this.hasCustomFilterSlot) {\r\n          this.filterInputEl?.focus();\r\n        }\r\n      });\r\n    } else {\r\n      this.clearHighlight();\r\n      this.highlightedIndex = -1;\r\n      if (!this.hasCustomFilterSlot) {\r\n        this.resetFilter();\r\n      }\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  componentWillLoad(): void {\r\n    this.hasCustomFilterSlot = this.host.querySelector('[slot=\"filter\"]') !== null;\r\n    this.hasCustomSelectedSlot = this.host.querySelector('[slot=\"selected\"]') !== null;\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('diwaMultiSelectOptionUpdate')\r\n  onOptionUpdate(e: CustomEvent<{ value: string; selected: boolean }>): void {\r\n    e.stopPropagation();\r\n    const { value, selected } = e.detail;\r\n    if (selected) {\r\n      if (!this.value.includes(value)) {\r\n        this.value = [...this.value, value];\r\n      }\r\n    } else {\r\n      this.value = this.value.filter((v) => v !== value);\r\n    }\r\n    this.syncSelectionFromValue();\r\n    this.change.emit({ name: this.name, value: this.value });\r\n    forceUpdate(this.host);\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<HTMLDiwaMultiSelectOptionElement>('diwa-multi-select-option'),\r\n    );\r\n  }\r\n\r\n  private syncSelectionFromValue(): void {\r\n    const valueSet = new Set(this.value);\r\n    for (const opt of this.options) {\r\n      const shouldBeSelected = valueSet.has(opt.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(): HTMLDiwaMultiSelectOptionElement[] {\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    this.filterText = '';\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    this.filterText = term;\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    // Reset highlight to first visible\r\n    this.highlightedIndex = 0;\r\n    this.applyHighlight();\r\n  };\r\n\r\n  private onResetClick = (e: MouseEvent): void => {\r\n    e.stopPropagation();\r\n    this.value = [];\r\n    this.syncSelectionFromValue();\r\n    this.change.emit({ name: this.name, value: [] });\r\n    forceUpdate(this.host);\r\n    this.triggerEl.focus();\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Computed display values\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private get selectedLabels(): string {\r\n    return this.options\r\n      .filter((o) => this.value.includes(o.value))\r\n      .map((o) => (o.textContent ?? '').trim())\r\n      .filter(Boolean)\r\n      .join(', ');\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.length > 0;\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 — combobox div; avoids nesting <button> inside <button> */}\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          {/* Selected display */}\r\n          <span class={`trigger__value${!hasValue ? ' trigger__placeholder' : ''}`} part=\"value\">\r\n            {this.hasCustomSelectedSlot ? (\r\n              <slot name=\"selected\" />\r\n            ) : hasValue ? (\r\n              this.selectedLabels\r\n            ) : (\r\n              this.label || 'Select options'\r\n            )}\r\n          </span>\r\n\r\n          {/* Reset button */}\r\n          {hasValue && (\r\n            <button\r\n              class=\"trigger__reset\"\r\n              type=\"button\"\r\n              aria-label=\"Reset selection\"\r\n              onClick={this.onResetClick}\r\n              onKeyDown={(e: KeyboardEvent) => {\r\n                if (e.key === 'Tab') this.isOpen = false;\r\n              }}\r\n              part=\"reset\"\r\n            >\r\n              ✕\r\n            </button>\r\n          )}\r\n\r\n          {/* Chevron */}\r\n          <span class=\"trigger__chevron\" aria-hidden=\"true\" part=\"chevron\">\r\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M4 6L8 10L12 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\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=\"dialog\"\r\n          aria-label={this.label}\r\n          aria-hidden={this.isOpen ? undefined : 'true'}\r\n          part=\"dropdown\"\r\n        >\r\n          {/* Filter */}\r\n          {this.hasCustomFilterSlot ? (\r\n            <div class=\"filter\">\r\n              <slot name=\"filter\" />\r\n            </div>\r\n          ) : (\r\n            <div class=\"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                autocomplete=\"off\"\r\n                value={this.filterText}\r\n                onInput={this.onFilterInput}\r\n                onKeyDown={this.onTriggerKeyDown}\r\n                ref={(el) => (this.filterInputEl = el as HTMLInputElement)}\r\n                part=\"filter-input\"\r\n              />\r\n            </div>\r\n          )}\r\n\r\n          {/* Options list */}\r\n          <div\r\n            class=\"options\"\r\n            id={listboxId}\r\n            role=\"listbox\"\r\n            aria-label={this.label}\r\n            aria-multiselectable=\"true\"\r\n            part=\"options\"\r\n          >\r\n            {!this.hasFilterResults && (\r\n              <div class=\"no-results\" role=\"alert\" aria-live=\"polite\">\r\n                No results found\r\n              </div>\r\n            )}\r\n            <slot name=\"options-status\" />\r\n            <slot onSlotchange={() => this.onSlotChange()} />\r\n          </div>\r\n        </div>\r\n\r\n        {/* Message */}\r\n        {hasMessage && (\r\n          <span id={hintId} class=\"message\" part=\"message\" aria-live={this.state === 'error' ? 'polite' : undefined}>\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":[]}

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

@@ -0,0 +1,2 @@
+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

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

@@ -0,0 +1,2 @@
+import{r as e,c as s,h as t,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(t){e(this,t);this.change=s(this,"change",7);this.input=s(this,"input",7);this.blur=s(this,"blur",3);this.focus=s(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=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)};this.handleFocus=e=>{this.focus.emit(e)}}connectedCallback(){this._hasStart=!!this.el.querySelector('[slot="start"]');this._hasEnd=!!this.el.querySelector('[slot="end"]')}render(){const e="input";const s="desc";const a="msg";return t(i,{key:"6f16e8825a3a5ecddc50dfa71bd11037b514857c","data-theme":this.theme},t("style",{key:"869dd68dffed172a7609f208be8cf84b14d17ef0",innerHTML:d(this.state,this.disabled,this.readonly,this.compact,this._hasStart,this._hasEnd,false)}),t("div",{key:"826553cb48211b80781177f28f546f0750e303c1",class:"root"},!this.hideLabel&&this.label&&t("div",{key:"d765135a6a2461b994f64cc9e64a21d7aa2beea6",class:"label-row"},t("label",{key:"31c39abad9f2e512002a741775ef6edd92d63977",class:"label",htmlFor:e},this.label,this.required&&t("span",{key:"e70488cf88dbadda577411125bcd691c4f0eb5db",class:"required","aria-hidden":"true"}," *")),t("slot",{key:"8ee60e427526819d1f8be6d7ed61a1b26bfb65ec",name:"label-after"})),t("div",{key:"1a28e5b5937aca1cb3c9e6470279e4072a62bbe0",class:"input-wrapper"},this._hasStart&&t("div",{key:"1e96aa02a0b11281b5c328fdc28ceba4c255cbf5",class:"slot-start"},t("slot",{key:"28c564f01dac221e5d72ea17c88602ed9a05e199",name:"start"})),t("input",{key:"b2eaeb80c1d83ef7d4d5e624f332272e5ed607ee",id:e,class:"input",type:"tel",name:this.name||undefined,value:this.value,placeholder:this.placeholder||undefined,disabled:this.disabled,required:this.required,readOnly:this.readonly,autocomplete:this.autoComplete,"aria-label":this.hideLabel&&this.label?this.label:undefined,"aria-invalid":this.state==="error"?"true":undefined,"aria-required":this.required?"true":undefined,"aria-describedby":this.message?a:this.description?s:undefined,onInput:this.handleInput,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus}),this._hasEnd&&t("div",{key:"efa69195e0c480335deb33e87e45edf4482b2cb4",class:"slot-end"},t("slot",{key:"c045de93902aa491f82b722e5b8b6a9c2a1e5552",name:"end"}))),!this.message&&this.description&&t("p",{key:"284cd05849b2d42d0ce3069037c4907061bf6744",id:s,class:"description"},this.description),this.message&&t("p",{key:"8bedd2ca829061a05d561e9e5c5c99700fee09f2",id:a,class:"message"},this.message)))}static get delegatesFocus(){return true}get el(){return a(this)}};export{h as diwa_input_tel};
+//# sourceMappingURL=p-bc2eecd2.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["DiwaInputTel","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","autocomplete","autoComplete","onInput","onChange","onBlur","onFocus"],"sources":["src/components/diwa-input-tel/diwa-input-tel.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-tel-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-tel',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputTel {\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  @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=\"tel\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n          </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-c0614fb1.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as e,H as i,g as a}from"./p-ed4017f0.js";import{g as 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:"a65beb62cdb31c1aabe439f9b8f6f2dc6966380b","data-theme":this.theme},e("style",{key:"ff59c6e404d17c7676ce59133a4560a217c65114",innerHTML:d(this.state,this.disabled,this.readonly,this.compact,this._hasStart,this._hasEnd,false)}),e("div",{key:"d1ebf45cf487eb3d49d61d591f59500a12d92731",class:"root"},!this.hideLabel&&this.label&&e("div",{key:"d7bc5c83a4c307e73fac55332f56c7cf17dd32fd",class:"label-row"},e("label",{key:"714e2799d06afffb41ac6ac10680d16cf67d4a52",class:"label",htmlFor:s},this.label,this.required&&e("span",{key:"f06a988f6b0afdf34825994c43e4b9b4cb9b2010",class:"required","aria-hidden":"true"}," *")),e("slot",{key:"b916cfcfc7e064704b1e8643fe758b0f78f2b73d",name:"label-after"})),e("div",{key:"51af50d3630a0f48eb111df4493d1787ff618534",class:"input-wrapper"},this._hasStart&&e("div",{key:"571d43f905d552089338b5066f7c20d28bd6a2d5",class:"slot-start"},e("slot",{key:"f8dfa7cc9fe16dca29d122c655371e17faad8a09",name:"start"})),e("input",{key:"cb5abcccfe70433832fabc2094b071d781b592fc",id:s,class:"input",type:"url",name:this.name||undefined,value:this.value,placeholder:this.placeholder||undefined,disabled:this.disabled,required:this.required,readOnly:this.readonly,autocomplete:this.autoComplete,"aria-label":this.hideLabel&&this.label?this.label:undefined,"aria-invalid":this.state==="error"?"true":undefined,"aria-required":this.required?"true":undefined,"aria-describedby":this.message?a:this.description?t:undefined,onInput:this.handleInput,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus}),this._hasEnd&&e("div",{key:"21b3380362ba71f8ec69b884450c3dc609a10f70",class:"slot-end"},e("slot",{key:"bdab4ba41c29734be286db913292eaf6a859d48c",name:"end"}))),!this.message&&this.description&&e("p",{key:"60f3d1857a4a7f2f553ecd322727ddc822c52d0b",id:t,class:"description"},this.description),this.message&&e("p",{key:"b4fedae59dade9ed51363d0e124a61e71b45f923",id:a,class:"message"},this.message)))}static get delegatesFocus(){return true}get el(){return a(this)}};export{h as diwa_input_url};
+//# sourceMappingURL=p-c0614fb1.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["DiwaInputUrl","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","autocomplete","autoComplete","onInput","onChange","onBlur","onFocus"],"sources":["src/components/diwa-input-url/diwa-input-url.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-url-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-url',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputUrl {\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  @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=\"url\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n          </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-c1c85f9e.entry.js

@@ -0,0 +1,2 @@
+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:"761192365523187da4022afc17ddcd42eacd6fd1","data-theme":this.theme},e("style",{key:"dcaf58e09c4bf9e728acc480748650235d005fb9",innerHTML:r()}),e(i,Object.assign({key:"9669b20ef6fcd90c86244205b9b1dd7c59f6143c",class:"root"},d,{part:"base"}),o&&e("span",{key:"11a2c4828484693962c83ea800ec5ab17b6f1c77",class:"icon","aria-hidden":"true"},e("diwa-icon",{key:"ce1521f41513d709c51292db263c6e8252ea91a5",name:this.icon,size:s})),e("span",{key:"61d7962e751fdd6e84630fe27d5f4fb1ed1c2de0",class:`label${this.hideLabel?" label--hidden":""}`,part:"label"},e("slot",{key:"d585bfadb227cf240719d2958a3b6a52a1429410"}))))}static get delegatesFocus(){return true}get host(){return a(this)}};export{s as diwa_link_pure};
+//# sourceMappingURL=p-c1c85f9e.entry.js.map

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

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

@@ -0,0 +1,2 @@
+import{r as s,c as e,h as t,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(t){s(this,t);this.change=e(this,"change",7);this.input=e(this,"input",7);this.blur=e(this,"blur",3);this.focus=e(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 e="desc";const a="msg";return t(i,{key:"09f9b5cf859ef7c03ef84256357c2ff08ee49e0d","data-theme":this.theme},t("style",{key:"3bbe107a46f9b4e98a58fb93e71f3d80225188bc",innerHTML:d(this.state,this.disabled,this.readonly,this.compact,this._hasStart,this._hasEnd,false)}),t("div",{key:"0809b3f8e6540f2bca95ab41682cbdd1bf087718",class:"root"},!this.hideLabel&&this.label&&t("div",{key:"93e3454fda5faef279f540d8ff4179e08c7fd1f1",class:"label-row"},t("label",{key:"171ab7d14f740ef31bff359cb51ad25d54b183ce",class:"label",htmlFor:s},this.label,this.required&&t("span",{key:"707c033e74161a76254cdfe9c798a78772d22833",class:"required","aria-hidden":"true"}," *")),t("slot",{key:"5eb701dd4c2d30d80cb11b07c07b1f9d48333ab6",name:"label-after"})),t("div",{key:"adc124185bbcbe37f0f1ff56a3b0fa8d0d725e07",class:"input-wrapper"},this._hasStart&&t("div",{key:"a2ee97d7ce58f3f3f16dd0dab5cd6695573160fc",class:"slot-start"},t("slot",{key:"fe16cba2f95ce86de6721fff8a61236b618e8485",name:"start"})),t("input",{key:"a1f15b79921da77f172033d34a91daf6548722ee",id:s,class:"input",type:"number",name:this.name||undefined,value:this.value,placeholder:this.placeholder||undefined,disabled:this.disabled,required:this.required,readOnly:this.readonly,min:this.min!==undefined?String(this.min):undefined,max:this.max!==undefined?String(this.max):undefined,step:this.step!==undefined?String(this.step):undefined,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?e:undefined,onInput:this.handleInput,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus}),this._hasEnd&&t("div",{key:"e2772476adc180f91281a784200f9e4b53038a0c",class:"slot-end"},t("slot",{key:"11cb85cf049deab38a7fec5a7841c082391b2009",name:"end"}))),!this.message&&this.description&&t("p",{key:"6c64debb7f04fa9da7483854c04888842267898b",id:e,class:"description"},this.description),this.message&&t("p",{key:"8f34cc860cac36c591ab7e3cf4e89722cb907da7",id:a,class:"message"},this.message)))}static get delegatesFocus(){return true}get el(){return a(this)}};export{h as diwa_input_number};
+//# sourceMappingURL=p-c37374ab.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["DiwaInputNumber","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","String","max","step","autocomplete","autoComplete","onInput","onChange","onBlur","onFocus"],"sources":["src/components/diwa-input-number/diwa-input-number.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-number-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-number',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputNumber {\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 allowed value. */\r\n  @Prop() min?: number;\r\n  /** Maximum allowed value. */\r\n  @Prop() max?: number;\r\n  /** Step increment. */\r\n  @Prop() step?: number;\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=\"number\"\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              min={this.min !== undefined ? String(this.min) : undefined}\r\n              max={this.max !== undefined ? String(this.max) : undefined}\r\n              step={this.step !== undefined ? String(this.step) : undefined}\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":[]}