@diwacopilot/components 1.0.0 → 1.1.0

package/dist-custom-elements/diwa-scroller.js

@@ -6,7 +6,7 @@ const ALIGN_MAP = {
     center: 'center',
     bottom: 'flex-end',
 };
-const getComponentCss = (scrollbar, alignScrollIndicator, hasOverflow) => {
+const getComponentCss = (scrollbar, alignScrollIndicator, hasOverflow, canScrollLeft, canScrollRight) => {
     const alignItems = ALIGN_MAP[alignScrollIndicator];
     return `
     :host {
@@ -49,9 +49,14 @@ const getComponentCss = (scrollbar, alignScrollIndicator, hasOverflow) => {
       display: none;
     }
     ${getFocusStyle('.scroll-button')}
+    ${getFocusStyle('.scroll-area')}
+    .scroll-wrapper {
+      position: relative;
+      min-width: 0;
+      overflow: hidden;
+    }
     .scroll-area {
       display: flex;
-      position: relative;
       align-items: ${alignItems};
       overflow-x: auto;
       overflow-y: hidden;
@@ -67,25 +72,25 @@ const getComponentCss = (scrollbar, alignScrollIndicator, hasOverflow) => {
       display: none;
     }
     ` : ''}
-    /* Fade-out gradient masks at the edges */
-    .scroll-area::before,
-    .scroll-area::after {
-      content: '';
+    /* Fade-out gradient masks — fixed at the visible edges via scroll-wrapper */
+    .fade {
       position: absolute;
       top: 0;
       bottom: 0;
       width: var(--diwa-scroller-fade-width);
       pointer-events: none;
       z-index: 1;
-      opacity: ${hasOverflow ? '1' : '0'};
+      transition: opacity var(--diwa-transition-fast);
     }
-    .scroll-area::before {
+    .fade--start {
       left: 0;
       background: var(--diwa-gradient-scrim-right);
+      opacity: ${canScrollLeft ? '1' : '0'};
     }
-    .scroll-area::after {
+    .fade--end {
       right: 0;
       background: var(--diwa-gradient-scrim-left);
+      opacity: ${canScrollRight ? '1' : '0'};
     }
   `;
 };
@@ -124,11 +129,16 @@ const DiwaScroller$1 = /*@__PURE__*/ proxyCustomElement(class DiwaScroller exten
             });
         };
     }
-    handleWindowResize() {
-        this.updateScrollState();
-    }
     componentDidLoad() {
         this.updateScrollState();
+        if (this.scrollAreaEl) {
+            this.resizeObserver = new ResizeObserver(() => this.updateScrollState());
+            this.resizeObserver.observe(this.scrollAreaEl);
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     updateScrollState() {
         const el = this.scrollAreaEl;
@@ -142,7 +152,7 @@ const DiwaScroller$1 = /*@__PURE__*/ proxyCustomElement(class DiwaScroller exten
         this.canScrollRight = currentScrollLeft < maxScrollLeft - epsilon;
     }
     render() {
-        return (h(Host, { key: '643614f02efd65645b30e84ca2e2df2d54dba30c', "data-theme": this.theme }, h("style", { key: '4cef13fba65f9343955f1a183fd09a2ddd7d322b', innerHTML: getComponentCss(this.scrollbar, this.alignScrollIndicator, this.hasOverflow) }), h("div", { key: '441066c0c3f32216a5c6a0c43e0edb205e559356', class: "scroller" }, h("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') }, h("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" }, h("path", { key: 'f986a71e860fe2c2a36c1dea537e4e506e0c6441', d: "M10 3.5 5 8l5 4.5" }))), h("div", { key: 'f719058341223bc9fea62b6769a86e0f2a238a06', class: "scroll-area", onScroll: this.handleScroll, ref: this.setScrollAreaRef }, h("slot", { key: 'c4139a8885d3fa7fba2ecb4c911a87d31a692b85', onSlotchange: this.handleSlotChange })), h("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') }, h("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" }, h("path", { key: 'bac8253b0e9e7c7ea88da607a7f47b505082916a', d: "M6 3.5 11 8l-5 4.5" }))))));
+        return (h(Host, { key: '45f4f99a3620911a3c082174ca774e45ea873e4d', "data-theme": this.theme }, h("style", { key: 'c8ef4daca35a71b53e14fc7bfebbff0675924fca', innerHTML: getComponentCss(this.scrollbar, this.alignScrollIndicator, this.hasOverflow, this.canScrollLeft, this.canScrollRight) }), h("div", { key: '5238cd797598390d8f9dc4dee119a40415dbfc4a', class: "scroller" }, h("button", { key: '6518c1d1a3afaebf619b6c8eae48c4e382c6a9d9', type: "button", class: "scroll-button scroll-button--start", "aria-label": "Scroll left", disabled: !this.canScrollLeft, hidden: !this.hasOverflow, onClick: () => this.scrollByPage('start') }, h("svg", { key: '7f9fb5f92a32bd36262d92a8d91f91dd9f2c0944', 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" }, h("path", { key: '0a7a19e7be0d4522042f19a316dc95eb1a6eaab3', d: "M10 3.5 5 8l5 4.5" }))), h("div", { key: '7388a4c9a666c5d0427af95a1ff7f1f614042f44', class: "scroll-wrapper" }, h("div", { key: '74dde4823c6bb81ae2709c3c605c9670f29ca5b2', class: "scroll-area", tabIndex: this.hasOverflow ? 0 : undefined, role: this.hasOverflow ? 'region' : undefined, "aria-label": this.hasOverflow ? 'Scrollable content' : undefined, onScroll: this.handleScroll, ref: this.setScrollAreaRef }, h("slot", { key: '88077bcfbeeefdb356b3b9dd4fa4f8fe49cb33ec', onSlotchange: this.handleSlotChange })), h("div", { key: '6058d245a910c7edc139789b10627c55366b0767', class: "fade fade--start", "aria-hidden": "true" }), h("div", { key: '2353970bea7c49c8d689ee7115cbbf0c580ef065', class: "fade fade--end", "aria-hidden": "true" })), h("button", { key: '0f51472148bf56d3a1f24406fe8a8b9b560be666', type: "button", class: "scroll-button scroll-button--end", "aria-label": "Scroll right", disabled: !this.canScrollRight, hidden: !this.hasOverflow, onClick: () => this.scrollByPage('end') }, h("svg", { key: 'c74842bea946222b5939bc85336315e276daf4d0', 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" }, h("path", { key: 'cdf90c5eb1036fb911153f3f2fc6adda2ced7afc', d: "M6 3.5 11 8l-5 4.5" }))))));
     }
 }, [1, "diwa-scroller", {
         "alignScrollIndicator": [1, "align-scroll-indicator"],
@@ -151,7 +161,7 @@ const DiwaScroller$1 = /*@__PURE__*/ proxyCustomElement(class DiwaScroller exten
         "hasOverflow": [32],
         "canScrollLeft": [32],
         "canScrollRight": [32]
-    }, [[9, "resize", "handleWindowResize"]]]);
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist-custom-elements/diwa-scroller.js.map

@@ -1 +1 @@
-{"file":"diwa-scroller.js","mappings":"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","names":["DiwaScroller"],"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"],"version":3}
+{"file":"diwa-scroller.js","mappings":"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","names":["DiwaScroller"],"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  canScrollLeft: boolean,\r\n  canScrollRight: 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    ${getFocusStyle('.scroll-area')}\r\n    .scroll-wrapper {\r\n      position: relative;\r\n      min-width: 0;\r\n      overflow: hidden;\r\n    }\r\n    .scroll-area {\r\n      display: flex;\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 — fixed at the visible edges via scroll-wrapper */\r\n    .fade {\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      transition: opacity var(--diwa-transition-fast);\r\n    }\r\n    .fade--start {\r\n      left: 0;\r\n      background: var(--diwa-gradient-scrim-right);\r\n      opacity: ${canScrollLeft ? '1' : '0'};\r\n    }\r\n    .fade--end {\r\n      right: 0;\r\n      background: var(--diwa-gradient-scrim-left);\r\n      opacity: ${canScrollRight ? '1' : '0'};\r\n    }\r\n  `;\r\n};\r\n","import { Component, Host, 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  private resizeObserver?: ResizeObserver;\r\n\r\n  componentDidLoad(): void {\r\n    this.updateScrollState();\r\n    if (this.scrollAreaEl) {\r\n      this.resizeObserver = new ResizeObserver(() => this.updateScrollState());\r\n      this.resizeObserver.observe(this.scrollAreaEl);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.resizeObserver?.disconnect();\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(\r\n          this.scrollbar,\r\n          this.alignScrollIndicator,\r\n          this.hasOverflow,\r\n          this.canScrollLeft,\r\n          this.canScrollRight,\r\n        )} />\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-wrapper\">\r\n            <div\r\n              class=\"scroll-area\"\r\n              tabIndex={this.hasOverflow ? 0 : undefined}\r\n              role={this.hasOverflow ? 'region' : undefined}\r\n              aria-label={this.hasOverflow ? 'Scrollable content' : undefined}\r\n              onScroll={this.handleScroll}\r\n              ref={this.setScrollAreaRef}\r\n            >\r\n              <slot onSlotchange={this.handleSlotChange} />\r\n            </div>\r\n            <div class=\"fade fade--start\" aria-hidden=\"true\" />\r\n            <div class=\"fade fade--end\" aria-hidden=\"true\" />\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"],"version":3}

package/dist-custom-elements/diwa-segmented-control-item.js

@@ -64,7 +64,7 @@ const DiwaSegmentedControlItem$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSe
         };
     }
     render() {
-        return (h(Host, { key: '197c164463018b07f0dd5561dabaff80b1017d55' }, h("style", { key: '2d89019033de3d1bc1e818806af44aa0737aa7f4', innerHTML: getComponentCss(this.selected, this.disabled, this.compact) }), h("button", { key: 'ef28f2800562f06d42d772d35fd7ce4815b067cd', class: "btn", type: "button", disabled: this.disabled, "aria-pressed": this.selected ? 'true' : 'false', onClick: this.handleClick }, h("slot", { key: '6ec68f67dfd5b386c24eeeb4108a84d94e933dd4' }))));
+        return (h(Host, { key: '2a0ee21e2203bc962d2cb1156ebe70b0cbc30d1e' }, h("style", { key: 'e8ff2c5b70860cc872cad97d689e16cf9c82c064', innerHTML: getComponentCss(this.selected, this.disabled, this.compact) }), h("button", { key: '112f93b906318888f5113417fdfddf0ce1aad3a8', class: "btn", type: "button", disabled: this.disabled, "aria-pressed": this.selected ? 'true' : 'false', onClick: this.handleClick }, h("slot", { key: 'bd6ef60d2fc09a59cfd8108377f1981aaefc991c' }))));
     }
     static get delegatesFocus() { return true; }
     get host() { return this; }

package/dist-custom-elements/diwa-segmented-control.js

@@ -56,7 +56,7 @@ const DiwaSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSegmen
         });
     }
     render() {
-        return (h(Host, { key: '76204fa4c9d01d59662b63db9f210070ddce8ccd', role: "group", "data-theme": this.theme }, h("style", { key: '3da53b702c0488e0748df0d1930d81a3898abfee', innerHTML: getComponentCss() }), h("div", { key: '1ac0445d78a3c27f3db0bb979ff3d6a2aa3cafa3', class: "track" }, h("slot", { key: '21dd1e37da86b714671f6dabac080bee4e1e1abb' }))));
+        return (h(Host, { key: 'a234c388f48d3c866ffdab8c6eadc9b8bb5af4c8', role: "group", "data-theme": this.theme }, h("style", { key: 'bfad2e8a1da5a8395b9dcc3662913ff13f4607fe', innerHTML: getComponentCss() }), h("div", { key: 'f08d1b1bdd31d095333e51ac72ae3f40ebd27812', class: "track" }, h("slot", { key: 'b5ff001d635e09aa097cd8b3b6b32500490a19da' }))));
     }
     get host() { return this; }
 }, [1, "diwa-segmented-control", {

package/dist-custom-elements/diwa-select-option.js

@@ -59,15 +59,15 @@ const getComponentCss = () => `
 
   /* ── Highlighted (keyboard / hover) ─────────────────────────────────── */
 
-  :host([highlighted]) .option {
-    background-color: var(--diwa-bg-hover);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .option:hover {
-      background-color: var(--diwa-bg-hover);
-    }
-  }
+  :host([highlighted]) .option {
+    background-color: var(--diwa-bg-hover);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .option:hover {
+      background-color: var(--diwa-bg-hover);
+    }
+  }
 
   /* ── Label text ─────────────────────────────────────────────────────── */
 
@@ -79,6 +79,18 @@ const getComponentCss = () => `
     white-space: nowrap;
   }
 
+  /* ── Compact ────────────────────────────────────────────────────────── */
+
+  :host([compact]) .option {
+    padding: var(--diwa-space-1) var(--diwa-space-2);
+    font-size: var(--diwa-font-size-md);
+    min-height: 0;
+  }
+
+  :host([compact]) .check {
+    font-size: var(--diwa-font-size-md);
+  }
+
   /* ── Disabled ───────────────────────────────────────────────────────── */
 
   :host([disabled]) {
@@ -115,6 +127,8 @@ const DiwaSelectOption$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSelectOpti
         this.highlighted = false;
         /** Theme — inherited from the parent diwa-select. */
         this.theme = 'dark';
+        /** Compact mode — inherited from the parent diwa-select. */
+        this.compact = false;
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -135,7 +149,7 @@ const DiwaSelectOption$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSelectOpti
         (_a = this.optionEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: 'a247949923bad9061915c5e2c85713e396ee6503', "data-theme": this.theme }, h("style", { key: '5e979d5a31b9d1bd3f745de3613282114be80402', innerHTML: getComponentCss() }), h("div", { key: 'a72bd683daec24c92c3e327c1d83f49f383dafde', class: "option", role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: (el) => (this.optionEl = el), part: "option" }, h("span", { key: '38bb5d53e00fc6bac010da4f1096469405d9e782', class: "check", "aria-hidden": "true", part: "check" }, "\u2713"), h("span", { key: '7d15f4d7e6db5c56dcbcb5a6c1feff7128550209', class: "label", part: "label" }, h("slot", { key: 'a09a35aa00ed8c417e1ad6a514c9ba548685887b' })))));
+        return (h(Host, { key: '86c5dd52dbfc96056c5031be22e751c4c741527f', "data-theme": this.theme }, h("style", { key: '903154a75ff36b77647ee2c769717e5f1df574e6', innerHTML: getComponentCss() }), h("div", { key: 'c95e357baac1fd10642383cb4259d29dd356825e', 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: (el) => (this.optionEl = el), part: "option" }, h("span", { key: '902e2a17f8bbff2e450349f5e2ef1df3d5b54df7', class: "check", "aria-hidden": "true", part: "check" }, "\u2713"), h("span", { key: '535f939bb208a6dad985b803ef18ebb240cd2c30', class: "label", part: "label" }, h("slot", { key: '055c66f037f5783f2aad7256a15dbfae034b5796' })))));
     }
     static get delegatesFocus() { return true; }
     get host() { return this; }
@@ -145,6 +159,7 @@ const DiwaSelectOption$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSelectOpti
         "selected": [1540],
         "highlighted": [1540],
         "theme": [1025],
+        "compact": [1540],
         "setFocus": [64]
     }]);
 function defineCustomElement$1() {

package/dist-custom-elements/diwa-select-option.js.map

@@ -1 +1 @@
-{"file":"diwa-select-option.js","mappings":";;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiCzC,aAAa,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0DxB,qBAAqB,CAAC,SAAS,CAAC;CACnC;;MCzEYA,kBAAgB;IAJ7B;;;;;;QAW2B,aAAQ,GAAY,KAAK,CAAC;;;;;QAMX,aAAQ,GAAY,KAAK,CAAC;;;;;QAM1B,gBAAW,GAAY,KAAK,CAAC;;QAG5C,UAAK,GAAU,MAAM,CAAC;QAiBvC,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SACzD,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAgB;YACvC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;SACF,CAAC;KAyBH;;IA1CC,MAAM,QAAQ;;QACZ,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAC;KACxB;IAiBD,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,4DACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAoB,CAAC,EACnD,IAAI,EAAC,QAAQ,IAEb,6DAAM,KAAK,EAAC,OAAO,iBAAa,MAAM,EAAC,IAAI,EAAC,OAAO,aAAS,EAC5D,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC9B,8DAAQ,CACH,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaSelectOption"],"sources":["src/components/diwa-select-option/diwa-select-option-styles.ts","src/components/diwa-select-option/diwa-select-option.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Option row ─────────────────────────────────────────────────────── */\r\n\r\n  .option {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-2) var(--diwa-space-3);\r\n    min-height: var(--diwa-select-option-min-height);\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    -webkit-font-smoothing: antialiased;\r\n    color: var(--diwa-text-primary);\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-normal);\r\n    line-height: 1.4;\r\n    border-radius: var(--diwa-radius-sm);\r\n    transition: background-color var(--diwa-transition-fast);\r\n  }\r\n\r\n  ${getFocusStyle('.option')}\r\n\r\n  /* ── Check mark ─────────────────────────────────────────────────────── */\r\n\r\n  .check {\r\n    flex-shrink: 0;\r\n    width: var(--diwa-icon-size-md);\r\n    height: var(--diwa-icon-size-md);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: var(--diwa-accent);\r\n    font-size: var(--diwa-font-size-base);\r\n    line-height: 1;\r\n    visibility: hidden;\r\n  }\r\n\r\n  /* ── Selected state ─────────────────────────────────────────────────── */\r\n\r\n  :host([selected]) .check {\r\n    visibility: visible;\r\n  }\r\n\r\n  /* ── Highlighted (keyboard / hover) ─────────────────────────────────── */\r\n\r\n  :host([highlighted]) .option {\n    background-color: var(--diwa-bg-hover);\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .option:hover {\n      background-color: var(--diwa-bg-hover);\n    }\n  }\n\r\n  /* ── Label text ─────────────────────────────────────────────────────── */\r\n\r\n  .label {\r\n    flex: 1;\r\n    min-width: 0;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  /* ── Disabled ───────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) {\r\n    pointer-events: none;\r\n  }\r\n\r\n  :host([disabled]) .option {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.option')}\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Method, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-select-option-styles';\r\n\r\n/**\r\n * @component diwa-select-option\r\n *\r\n * Individual option element for use inside <diwa-select>.\r\n * Renders a row with a checkmark indicator and label text.\r\n *\r\n * Not intended for standalone use — must be slotted into <diwa-select>.\r\n *\r\n * Provide an option without a value to allow deselection / show a placeholder:\r\n *   <diwa-select-option>Please select…</diwa-select-option>\r\n *\r\n * @slot default — Option label text (plain text or inline phrasing content)\r\n */\r\n@Component({\r\n  tag: 'diwa-select-option',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaSelectOption {\r\n  @Element() host!: HTMLDiwaSelectOptionElement;\r\n\r\n  /** The value submitted/emitted when this option is selected. */\r\n  @Prop({ reflect: true }) value?: string;\r\n\r\n  /** Disables the option — it cannot be selected. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Whether the option is currently selected.\r\n   * Maintained by the parent <diwa-select>.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) selected: boolean = false;\r\n\r\n  /**\r\n   * Whether the option is currently keyboard-highlighted.\r\n   * Set exclusively by the parent component.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) highlighted: boolean = false;\r\n\r\n  /** Theme — inherited from the parent diwa-select. */\r\n  @Prop({ mutable: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Emitted when the user clicks or presses Enter on the option.\r\n   * Bubbles and crosses Shadow DOM so the parent can catch it via @Listen.\r\n   */\r\n  @Event({ bubbles: true, composed: true })\r\n  diwaSelectOptionUpdate!: EventEmitter<{ value: string | undefined }>;\r\n\r\n  /** Focuses the inner option element. */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    this.optionEl?.focus();\r\n  }\r\n\r\n  private optionEl?: HTMLDivElement;\r\n\r\n  private handleClick = (): void => {\r\n    if (this.disabled) return;\r\n    this.diwaSelectOptionUpdate.emit({ value: this.value });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent): void => {\r\n    if (this.disabled) return;\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      e.preventDefault();\r\n      this.diwaSelectOptionUpdate.emit({ value: this.value });\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <div\r\n          class=\"option\"\r\n          role=\"option\"\r\n          aria-selected={this.selected ? 'true' : 'false'}\r\n          aria-disabled={this.disabled ? 'true' : undefined}\r\n          tabIndex={this.disabled ? -1 : 0}\r\n          onClick={this.handleClick}\r\n          onKeyDown={this.handleKeyDown}\r\n          ref={(el) => (this.optionEl = el as HTMLDivElement)}\r\n          part=\"option\"\r\n        >\r\n          <span class=\"check\" aria-hidden=\"true\" part=\"check\">✓</span>\r\n          <span class=\"label\" part=\"label\">\r\n            <slot />\r\n          </span>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"diwa-select-option.js","mappings":";;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiCzC,aAAa,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsExB,qBAAqB,CAAC,SAAS,CAAC;CACnC;;MCrFYA,kBAAgB;IAJ7B;;;;;;QAW2B,aAAQ,GAAY,KAAK,CAAC;;;;;QAMX,aAAQ,GAAY,KAAK,CAAC;;;;;QAM1B,gBAAW,GAAY,KAAK,CAAC;;QAG5C,UAAK,GAAU,MAAM,CAAC;;QAGP,YAAO,GAAY,KAAK,CAAC;QAiBzD,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SACzD,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAgB;YACvC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;SACF,CAAC;KAyBH;;IA1CC,MAAM,QAAQ;;QACZ,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAC;KACxB;IAiBD,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,4DACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAoB,CAAC,EACnD,IAAI,EAAC,QAAQ,IAEb,6DAAM,KAAK,EAAC,OAAO,iBAAa,MAAM,EAAC,IAAI,EAAC,OAAO,aAAS,EAC5D,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC9B,8DAAQ,CACH,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaSelectOption"],"sources":["src/components/diwa-select-option/diwa-select-option-styles.ts","src/components/diwa-select-option/diwa-select-option.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Option row ─────────────────────────────────────────────────────── */\r\n\r\n  .option {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-2) var(--diwa-space-3);\r\n    min-height: var(--diwa-select-option-min-height);\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    -webkit-font-smoothing: antialiased;\r\n    color: var(--diwa-text-primary);\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-normal);\r\n    line-height: 1.4;\r\n    border-radius: var(--diwa-radius-sm);\r\n    transition: background-color var(--diwa-transition-fast);\r\n  }\r\n\r\n  ${getFocusStyle('.option')}\r\n\r\n  /* ── Check mark ─────────────────────────────────────────────────────── */\r\n\r\n  .check {\r\n    flex-shrink: 0;\r\n    width: var(--diwa-icon-size-md);\r\n    height: var(--diwa-icon-size-md);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: var(--diwa-accent);\r\n    font-size: var(--diwa-font-size-base);\r\n    line-height: 1;\r\n    visibility: hidden;\r\n  }\r\n\r\n  /* ── Selected state ─────────────────────────────────────────────────── */\r\n\r\n  :host([selected]) .check {\r\n    visibility: visible;\r\n  }\r\n\r\n  /* ── Highlighted (keyboard / hover) ─────────────────────────────────── */\r\n\r\n  :host([highlighted]) .option {\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\r\n    .option:hover {\r\n      background-color: var(--diwa-bg-hover);\r\n    }\r\n  }\r\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  /* ── Compact ────────────────────────────────────────────────────────── */\r\n\r\n  :host([compact]) .option {\r\n    padding: var(--diwa-space-1) var(--diwa-space-2);\r\n    font-size: var(--diwa-font-size-md);\r\n    min-height: 0;\r\n  }\r\n\r\n  :host([compact]) .check {\r\n    font-size: var(--diwa-font-size-md);\r\n  }\r\n\r\n  /* ── Disabled ───────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) {\r\n    pointer-events: none;\r\n  }\r\n\r\n  :host([disabled]) .option {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.option')}\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Method, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-select-option-styles';\r\n\r\n/**\r\n * @component diwa-select-option\r\n *\r\n * Individual option element for use inside <diwa-select>.\r\n * Renders a row with a checkmark indicator and label text.\r\n *\r\n * Not intended for standalone use — must be slotted into <diwa-select>.\r\n *\r\n * Provide an option without a value to allow deselection / show a placeholder:\r\n *   <diwa-select-option>Please select…</diwa-select-option>\r\n *\r\n * @slot default — Option label text (plain text or inline phrasing content)\r\n */\r\n@Component({\r\n  tag: 'diwa-select-option',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaSelectOption {\r\n  @Element() host!: HTMLDiwaSelectOptionElement;\r\n\r\n  /** The value submitted/emitted when this option is selected. */\r\n  @Prop({ reflect: true }) value?: string;\r\n\r\n  /** Disables the option — it cannot be selected. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Whether the option is currently selected.\r\n   * Maintained by the parent <diwa-select>.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) selected: boolean = false;\r\n\r\n  /**\r\n   * Whether the option is currently keyboard-highlighted.\r\n   * Set exclusively by the parent component.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) highlighted: boolean = false;\r\n\r\n  /** Theme — inherited from the parent diwa-select. */\r\n  @Prop({ mutable: true }) theme: Theme = 'dark';\r\n\r\n  /** Compact mode — inherited from the parent diwa-select. */\r\n  @Prop({ mutable: true, reflect: true }) compact: boolean = false;\r\n\r\n  /**\r\n   * Emitted when the user clicks or presses Enter on the option.\r\n   * Bubbles and crosses Shadow DOM so the parent can catch it via @Listen.\r\n   */\r\n  @Event({ bubbles: true, composed: true })\r\n  diwaSelectOptionUpdate!: EventEmitter<{ value: string | undefined }>;\r\n\r\n  /** Focuses the inner option element. */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    this.optionEl?.focus();\r\n  }\r\n\r\n  private optionEl?: HTMLDivElement;\r\n\r\n  private handleClick = (): void => {\r\n    if (this.disabled) return;\r\n    this.diwaSelectOptionUpdate.emit({ value: this.value });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent): void => {\r\n    if (this.disabled) return;\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      e.preventDefault();\r\n      this.diwaSelectOptionUpdate.emit({ value: this.value });\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <div\r\n          class=\"option\"\r\n          role=\"option\"\r\n          aria-selected={this.selected ? 'true' : 'false'}\r\n          aria-disabled={this.disabled ? 'true' : undefined}\r\n          tabIndex={this.disabled ? -1 : 0}\r\n          onClick={this.handleClick}\r\n          onKeyDown={this.handleKeyDown}\r\n          ref={(el) => (this.optionEl = el as HTMLDivElement)}\r\n          part=\"option\"\r\n        >\r\n          <span class=\"check\" aria-hidden=\"true\" part=\"check\">✓</span>\r\n          <span class=\"label\" part=\"label\">\r\n            <slot />\r\n          </span>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-select.js

@@ -400,6 +400,9 @@ const DiwaSelect$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSelect extends H
     onThemeChange() {
         this.syncChildThemes();
     }
+    onCompactChange() {
+        this.syncChildCompact();
+    }
     onValueChange() {
         this.syncSelectionFromValue();
     }
@@ -433,6 +436,7 @@ const DiwaSelect$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSelect extends H
         this.collectOptions();
         this.syncSelectionFromValue();
         this.syncChildThemes();
+        this.syncChildCompact();
     }
     // ──────────────────────────────────────────────────────────────
     // Public methods
@@ -464,6 +468,7 @@ const DiwaSelect$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSelect extends H
         this.collectOptions();
         this.syncSelectionFromValue();
         this.syncChildThemes();
+        this.syncChildCompact();
     }
     // ──────────────────────────────────────────────────────────────
     // Private helpers
@@ -488,6 +493,14 @@ const DiwaSelect$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSelect extends H
             }
         }
     }
+    syncChildCompact() {
+        for (const opt of this.options) {
+            if (opt.compact !== this.compact) {
+                opt.compact = this.compact;
+                forceUpdate(opt);
+            }
+        }
+    }
     getVisibleOptions() {
         return this.options.filter((o) => !o.disabled && o.style.display !== 'none');
     }
@@ -544,12 +557,13 @@ const DiwaSelect$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSelect extends H
         const hasMessage = !!this.message && this.state !== 'none';
         const hasValue = this.value !== undefined && this.value !== '';
         const displayLabel = hasValue ? this.selectedLabel : undefined;
-        return (h(Host, { key: '6ac13f8139797b9a4802dbb2ca5c0f2efef83b03', "data-theme": this.theme }, h("style", { key: 'f686db5aa753249a2d4f9b5b315dd47e3ddc26a8', innerHTML: getComponentCss(this.isOpen, this.disabled, this.state, this.compact, this.dropdownClass.includes('--up')) }), (this.label || this.host.querySelector('[slot="label"]')) && (h("span", { key: 'cdf62e4a62423bb2a36d009e9ad9b3c6269b3e12', class: "label", id: labelId, part: "label" }, h("slot", { key: '3e935b34db20515e579b493fbf59530f7c696756', name: "label" }, this.label), this.required && h("span", { key: 'd85f9b81784e63695460dc80c8569363fb35ef98', class: "label__required", "aria-hidden": "true" }, "*"))), (this.description || this.host.querySelector('[slot="description"]')) && (h("span", { key: '48858e2fdb26f2e4004f4e0a6e269a672e4b195b', class: "description", part: "description" }, h("slot", { key: '0ccb1b9edf46c77d66d216a543807c21cd44496d', name: "description" }, this.description))), h("div", { key: '0a937903a8ddafc0a56fb6ccf727a5f802c77580', class: "trigger", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId, "aria-labelledby": this.label ? labelId : undefined, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-describedby": hasMessage ? hintId : undefined, tabIndex: this.disabled ? -1 : 0, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown, ref: (el) => (this.triggerEl = el), part: "trigger" }, h("span", { key: '48a00505d9cd62e4f3a4070655917c706b4ee2e3', class: `trigger__value${!displayLabel ? ' trigger__placeholder' : ''}`, part: "value" }, displayLabel !== null && displayLabel !== void 0 ? displayLabel : (this.label || 'Select an option')), h("span", { key: '4d5c0157792d93dffe4473bbb5adc7c5982fc996', class: "trigger__chevron", "aria-hidden": "true", part: "chevron" }, h("svg", { key: '802726305d35207d83d2c6ee3d0dd087dd6a33ee', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '658cb6b58e2505e6859b631541aa1b5bd2e76449', points: "6 9 12 15 18 9" })))), h("div", { key: 'b5f575565ed95ecf1a6111f527b1d6d0841e5076', class: this.dropdownClass, role: "listbox", id: listboxId, "aria-multiselectable": "false", "aria-labelledby": this.label ? labelId : undefined, part: "dropdown" }, h("div", { key: 'b51dc6327202a6d0113e03529fe76c52273b3023', class: "filter", part: "filter" }, h("input", { key: '1ad613a67c9c29086688016be3ccce2b260024d8', class: "filter__input", type: "text", placeholder: "Filter options\u2026", "aria-label": "Filter options", onInput: this.onFilterInput, ref: (el) => (this.filterInputEl = el), part: "filter-input" })), h("div", { key: 'abf099e79d273e293cc554cb50b139181af2da8b', class: "options", part: "options" }, !this.hasFilterResults && (h("div", { key: '9f7ffcd99df289bd35549fb548aa835bffbd4af1', class: "no-results", "aria-live": "polite" }, "No options found")), h("slot", { key: '1a56431405d701e4a89d66eb7918ba85245b189b' }))), hasMessage && (h("span", { key: '0a361efb6406ec19bf8ad8e94c4397c78cf5b32c', class: "message", id: hintId, role: "status", part: "message" }, h("slot", { key: 'f114d282d9785713e489a3f3b0fa96480569e184', name: "message" }, this.message)))));
+        return (h(Host, { key: '78cb284c75c35d7a8c9c55c65a1b2da507cb3825', "data-theme": this.theme }, h("style", { key: '56535329000ff0addc23203c53161262d077d0ae', innerHTML: getComponentCss(this.isOpen, this.disabled, this.state, this.compact, this.dropdownClass.includes('--up')) }), (this.label || this.host.querySelector('[slot="label"]')) && (h("span", { key: 'a50ee541c02fddefb765c9e8be397bc5fd8fdbe3', class: "label", id: labelId, part: "label" }, h("slot", { key: '5acac4fc52daaa0a7e8137f41bd0b5e91ba4be86', name: "label" }, this.label), this.required && h("span", { key: '1f61ca50a28561365e8491e108268680b0e1ccf1', class: "label__required", "aria-hidden": "true" }, "*"))), (this.description || this.host.querySelector('[slot="description"]')) && (h("span", { key: '41e461a959513a8dafe4a8fd6d7c7c0597dd11be', class: "description", part: "description" }, h("slot", { key: '33f083c62405b70fd4df87ccd5770946778a168c', name: "description" }, this.description))), h("div", { key: '88a408a5abaa1f4c48f54b8dda240a3ee8ed3a5e', class: "trigger", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId, "aria-labelledby": this.label ? labelId : undefined, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-describedby": hasMessage ? hintId : undefined, tabIndex: this.disabled ? -1 : 0, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown, ref: (el) => (this.triggerEl = el), part: "trigger" }, h("span", { key: 'c397c30576a9396ca26a150d4b31686b34324c50', class: `trigger__value${!displayLabel ? ' trigger__placeholder' : ''}`, part: "value" }, displayLabel !== null && displayLabel !== void 0 ? displayLabel : (this.label || 'Select an option')), h("span", { key: '3c4c6ba3dfc5e53102754e8c8f99b01041cb034c', class: "trigger__chevron", "aria-hidden": "true", part: "chevron" }, h("svg", { key: '9d7a5b129826e3d448c3cebb41cd1c6cba9af980', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '6c4b2336e5e0968cb79034a17c12ef7f1475d1d4', points: "6 9 12 15 18 9" })))), h("div", { key: '9a004e9726798f987e73de928cff74aae2192eba', class: this.dropdownClass, role: "listbox", id: listboxId, "aria-multiselectable": "false", "aria-labelledby": this.label ? labelId : undefined, part: "dropdown" }, h("div", { key: 'be02228e7c2763174b84c98665e43c1b41be96c4', class: "filter", part: "filter" }, h("input", { key: 'df2a97b9017bf0fa550ddd7edf81bb5b63daa567', class: "filter__input", type: "text", placeholder: "Filter options\u2026", "aria-label": "Filter options", onInput: this.onFilterInput, ref: (el) => (this.filterInputEl = el), part: "filter-input" })), h("div", { key: 'f1b7dff287feb28cacea9353263a3efb530d77f2', class: "options", part: "options" }, !this.hasFilterResults && (h("div", { key: '11c5108f2e3e2e1ae36e2f4f15f5da49b5e4f645', class: "no-results", "aria-live": "polite" }, "No options found")), h("slot", { key: 'f220f388ef3964448427dd45943193bce7419f88' }))), hasMessage && (h("span", { key: '8ceca0f175af448577d629581d39a44dfd39f63f', class: "message", id: hintId, role: "status", part: "message" }, h("slot", { key: '91c7a0c99fa7a642ba0987cbab196d61e61cea9e', name: "message" }, this.message)))));
     }
     static get delegatesFocus() { return true; }
     get host() { return this; }
     static get watchers() { return {
         "theme": ["onThemeChange"],
+        "compact": ["onCompactChange"],
         "value": ["onValueChange"],
         "isOpen": ["onIsOpenChange"]
     }; }
@@ -573,6 +587,7 @@ const DiwaSelect$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSelect extends H
         "close": [64]
     }, [[0, "diwaSelectOptionUpdate", "onOptionUpdate"], [0, "slotchange", "onSlotChange"]], {
         "theme": ["onThemeChange"],
+        "compact": ["onCompactChange"],
         "value": ["onValueChange"],
         "isOpen": ["onIsOpenChange"]
     }]);

package/dist-custom-elements/diwa-select.js.map

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

package/dist-custom-elements/diwa-spinner.js

@@ -1,4 +1,4 @@
-import { D as DiwaSpinner$1, d as defineCustomElement$1 } from './p-ed901570.js';
+import { D as DiwaSpinner$1, d as defineCustomElement$1 } from './p-b7255dc4.js';
 
 const DiwaSpinner = DiwaSpinner$1;
 const defineCustomElement = defineCustomElement$1;