@diwacopilot/components 1.0.0

package/dist-custom-elements/diwa-radio-group.js

@@ -0,0 +1,178 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+
+const getComponentCss = (state, direction, _disabled, compact) => {
+    const messageColor = state === 'error'
+        ? 'var(--diwa-notification-error)'
+        : state === 'success'
+            ? 'var(--diwa-notification-success)'
+            : 'var(--diwa-text-secondary)';
+    return `
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--diwa-space-1);
+  }
+
+  .label {
+    display: block;
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-font-weight-medium);
+    color: var(--diwa-text-primary);
+    line-height: 1.4;
+  }
+
+  :host([disabled]) .label {
+    color: var(--diwa-text-muted);
+    cursor: not-allowed;
+  }
+
+  .label-required {
+    color: var(--diwa-notification-error);
+    margin-inline-start: 2px;
+  }
+
+  .label-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .description {
+    font-size: var(--diwa-font-size-sm);
+    color: var(--diwa-text-secondary);
+    line-height: 1.4;
+  }
+
+  .options {
+    display: flex;
+    flex-direction: ${direction === 'row' ? 'row' : 'column'};
+    flex-wrap: wrap;
+    gap: ${direction === 'row'
+        ? (compact ? 'var(--diwa-space-2)' : 'var(--diwa-space-4)')
+        : (compact ? 'var(--diwa-space-1)' : 'var(--diwa-space-2)')};
+  }
+
+  .message {
+    font-size: var(--diwa-font-size-sm);
+    color: ${messageColor};
+    line-height: 1.4;
+  }
+
+  .message[hidden] {
+    display: none;
+  }
+  `;
+};
+
+const DiwaRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class DiwaRadioGroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.update = createEvent(this, "update", 1);
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** Group label rendered above the options. */
+        this.label = '';
+        /** Supplementary description rendered below the label. */
+        this.description = '';
+        /** Currently selected value. Synced down to child items. */
+        this.value = '';
+        /** Layout direction for the radio options. */
+        this.direction = 'column';
+        /** Whether selecting a value is required. */
+        this.required = false;
+        /** Disables all child items. */
+        this.disabled = false;
+        /** Validation state. */
+        this.state = 'none';
+        /** Feedback message shown when state is error or success. */
+        this.message = '';
+        /** Reduces size for denser layouts. */
+        this.compact = false;
+        /** Hides the label visually while keeping it accessible. */
+        this.hideLabel = false;
+        /** Native name attribute shared by all radio inputs in the group. */
+        this.name = '';
+    }
+    /** Listen for item selection bubbling up from slotted children. */
+    handleItemSelect(event) {
+        this.value = event.detail.value;
+        this.update.emit({ value: this.value });
+        this.syncChildren();
+    }
+    componentDidLoad() {
+        this.syncChildren();
+    }
+    componentDidUpdate() {
+        this.syncChildren();
+    }
+    syncChildren() {
+        const items = Array.from(this.host.querySelectorAll('diwa-radio-group-item'));
+        const groupName = this.name || `diwa-radio-group-${Math.random().toString(36).slice(2, 7)}`;
+        items.forEach((item) => {
+            item.checked = item.value === this.value;
+            if (!item.name) {
+                item.name = groupName;
+            }
+            item.disabled = this.disabled;
+            item.compact = this.compact;
+        });
+    }
+    render() {
+        const id = `diwa-rg-${this.host.id || Math.random().toString(36).slice(2, 7)}`;
+        const descId = this.description ? `${id}-desc` : undefined;
+        const msgId = this.message && this.state !== 'none' ? `${id}-msg` : undefined;
+        return (h(Host, { key: '1d941ee37ba22144fb183834b0936c7b067a2178', "data-theme": this.theme }, h("style", { key: 'a7c6eab2f362a5f9f1db1a4b2afc7acb34316932', innerHTML: getComponentCss(this.state, this.direction, this.disabled, this.compact) }), h("div", { key: '35948be2f142b22241ebdce442610a92c4562638', class: "root", role: "radiogroup", "aria-labelledby": this.label ? `${id}-label` : undefined, "aria-describedby": [descId, msgId].filter(Boolean).join(' ') || undefined, "aria-required": this.required ? 'true' : undefined }, this.label && (h("span", { key: '8a8bc2e1aa6bae52d8d61b2a079e7e92680f9490', id: `${id}-label`, class: `label${this.hideLabel ? ' label-visually-hidden' : ''}` }, this.label, this.required && h("span", { key: '3274f34ca78ac7d9fee78d77d1de04852d49fa32', class: "label-required", "aria-hidden": "true" }, " *"))), this.description && (h("span", { key: 'c77537f4956c41d4ad526ea665550b17c7b9181c', id: descId, class: "description" }, this.description)), h("div", { key: 'e80a0285ea5ab1272c8df3c86fdf1495e5337107', class: "options" }, h("slot", { key: '73933e21541199a09c92e3ddf1d0cb250a941b1e' })), h("span", { key: '55f8cf4fd5145c9798dfe0a3f81099b38b611432', id: msgId, class: "message", hidden: !msgId }, this.message))));
+    }
+    get host() { return this; }
+}, [1, "diwa-radio-group", {
+        "theme": [513],
+        "label": [1],
+        "description": [1],
+        "value": [1537],
+        "direction": [513],
+        "required": [4],
+        "disabled": [516],
+        "state": [513],
+        "message": [1],
+        "compact": [516],
+        "hideLabel": [516, "hide-label"],
+        "name": [1]
+    }, [[0, "diwa-radio-select", "handleItemSelect"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-radio-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-radio-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaRadioGroup$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaRadioGroup = DiwaRadioGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaRadioGroup, defineCustomElement };
+
+//# sourceMappingURL=diwa-radio-group.js.map

package/dist-custom-elements/diwa-radio-group.js.map

@@ -0,0 +1 @@
+{"file":"diwa-radio-group.js","mappings":"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","names":["DiwaRadioGroup"],"sources":["src/components/diwa-radio-group/diwa-radio-group-styles.ts","src/components/diwa-radio-group/diwa-radio-group.tsx"],"sourcesContent":["import type { RadioGroupState, RadioGroupDirection } from './types';\r\n\r\nexport const getComponentCss = (\r\n  state: RadioGroupState,\r\n  direction: RadioGroupDirection,\r\n  _disabled: boolean,\r\n  compact: boolean,\r\n): string => {\r\n  const messageColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-text-secondary)';\r\n\r\n  return `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .root {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--diwa-space-1);\r\n  }\r\n\r\n  .label {\r\n    display: block;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n    color: var(--diwa-text-primary);\r\n    line-height: 1.4;\r\n  }\r\n\r\n  :host([disabled]) .label {\r\n    color: var(--diwa-text-muted);\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  .label-required {\r\n    color: var(--diwa-notification-error);\r\n    margin-inline-start: 2px;\r\n  }\r\n\r\n  .label-visually-hidden {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 1px;\r\n    padding: 0;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    clip: rect(0, 0, 0, 0);\r\n    white-space: nowrap;\r\n    border: 0;\r\n  }\r\n\r\n  .description {\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: var(--diwa-text-secondary);\r\n    line-height: 1.4;\r\n  }\r\n\r\n  .options {\r\n    display: flex;\r\n    flex-direction: ${direction === 'row' ? 'row' : 'column'};\r\n    flex-wrap: wrap;\r\n    gap: ${direction === 'row'\r\n      ? (compact ? 'var(--diwa-space-2)' : 'var(--diwa-space-4)')\r\n      : (compact ? 'var(--diwa-space-1)' : 'var(--diwa-space-2)')};\r\n  }\r\n\r\n  .message {\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: ${messageColor};\r\n    line-height: 1.4;\r\n  }\r\n\r\n  .message[hidden] {\r\n    display: none;\r\n  }\r\n  `;\r\n};\r\n","import { Component, Element, Event, type EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\r\nimport type { RadioGroupDirection, RadioGroupState, RadioGroupUpdateEventDetail } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-radio-group-styles';\r\n\r\n/**\r\n * @component diwa-radio-group\r\n *\r\n * Container for a set of `diwa-radio-group-item` children. Manages the\r\n * selected value, label, description, validation state, and layout direction.\r\n *\r\n * Usage:\r\n *   <diwa-radio-group label=\"Size\" value=\"m\" onupdate={e => setValue(e.detail.value)}>\r\n *     <diwa-radio-group-item value=\"s\">Small</diwa-radio-group-item>\r\n *     <diwa-radio-group-item value=\"m\">Medium</diwa-radio-group-item>\r\n *     <diwa-radio-group-item value=\"l\">Large</diwa-radio-group-item>\r\n *   </diwa-radio-group>\r\n */\r\n@Component({\r\n  tag: 'diwa-radio-group',\r\n  shadow: true,\r\n})\r\nexport class DiwaRadioGroup {\r\n  @Element() host!: HTMLDiwaRadioGroupElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Group label rendered above the options. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Supplementary description rendered below the label. */\r\n  @Prop() description: string = '';\r\n\r\n  /** Currently selected value. Synced down to child items. */\r\n  @Prop({ mutable: true, reflect: true }) value: string = '';\r\n\r\n  /** Layout direction for the radio options. */\r\n  @Prop({ reflect: true }) direction: RadioGroupDirection = 'column';\r\n\r\n  /** Whether selecting a value is required. */\r\n  @Prop() required: boolean = false;\r\n\r\n  /** Disables all child items. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Validation state. */\r\n  @Prop({ reflect: true }) state: RadioGroupState = 'none';\r\n\r\n  /** Feedback message shown when state is error or success. */\r\n  @Prop() message: string = '';\r\n\r\n  /** Reduces size for denser layouts. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\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  /** Native name attribute shared by all radio inputs in the group. */\r\n  @Prop() name: string = '';\r\n\r\n  /**\r\n   * Emitted when the selected value changes.\r\n   * `event.detail.value` is the newly selected value.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<RadioGroupUpdateEventDetail>;\r\n\r\n  /** Listen for item selection bubbling up from slotted children. */\r\n  @Listen('diwa-radio-select')\r\n  handleItemSelect(event: CustomEvent<{ value: string }>) {\r\n    this.value = event.detail.value;\r\n    this.update.emit({ value: this.value });\r\n    this.syncChildren();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.syncChildren();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.syncChildren();\r\n  }\r\n\r\n  private syncChildren() {\r\n    const items = Array.from(\r\n      this.host.querySelectorAll('diwa-radio-group-item'),\r\n    ) as HTMLDiwaRadioGroupItemElement[];\r\n    const groupName = this.name || `diwa-radio-group-${Math.random().toString(36).slice(2, 7)}`;\r\n    items.forEach((item) => {\r\n      (item as any).checked = item.value === this.value;\r\n      if (!(item as any).name) {\r\n        (item as any).name = groupName;\r\n      }\r\n      (item as any).disabled = this.disabled;\r\n      (item as any).compact = this.compact;\r\n    });\r\n  }\r\n\r\n  render() {\r\n    const id = `diwa-rg-${this.host.id || Math.random().toString(36).slice(2, 7)}`;\r\n    const descId = this.description ? `${id}-desc` : undefined;\r\n    const msgId = this.message && this.state !== 'none' ? `${id}-msg` : undefined;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.direction, this.disabled, this.compact)} />\r\n        <div\r\n          class=\"root\"\r\n          role=\"radiogroup\"\r\n          aria-labelledby={this.label ? `${id}-label` : undefined}\r\n          aria-describedby={[descId, msgId].filter(Boolean).join(' ') || undefined}\r\n          aria-required={this.required ? 'true' : undefined}\r\n        >\r\n          {this.label && (\r\n            <span id={`${id}-label`} class={`label${this.hideLabel ? ' label-visually-hidden' : ''}`}>\r\n              {this.label}\r\n              {this.required && <span class=\"label-required\" aria-hidden=\"true\"> *</span>}\r\n            </span>\r\n          )}\r\n          {this.description && (\r\n            <span id={descId} class=\"description\">\r\n              {this.description}\r\n            </span>\r\n          )}\r\n          <div class=\"options\">\r\n            <slot />\r\n          </div>\r\n          <span id={msgId} class=\"message\" hidden={!msgId}>\r\n            {this.message}\r\n          </span>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-scroller.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaScroller extends Components.DiwaScroller, HTMLElement {}
+export const DiwaScroller: {
+    prototype: DiwaScroller;
+    new (): DiwaScroller;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,175 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
+import { g as getFocusStyle } from './p-70bbb21a.js';
+
+const ALIGN_MAP = {
+    top: 'flex-start',
+    center: 'center',
+    bottom: 'flex-end',
+};
+const getComponentCss = (scrollbar, alignScrollIndicator, hasOverflow) => {
+    const alignItems = ALIGN_MAP[alignScrollIndicator];
+    return `
+    :host {
+      display: block;
+      position: relative;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .scroller {
+      display: grid;
+      grid-template-columns: ${hasOverflow ? 'auto minmax(0, 1fr) auto' : 'minmax(0, 1fr)'};
+      align-items: ${alignItems};
+      gap: var(--diwa-space-2);
+    }
+    .scroll-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--diwa-space-8);
+      height: var(--diwa-space-8);
+      padding: 0;
+      border: var(--diwa-border-width-thin) solid var(--diwa-border);
+      border-radius: var(--diwa-radius-full);
+      background: var(--diwa-bg-surface);
+      color: var(--diwa-text-secondary);
+      cursor: pointer;
+      transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);
+      flex-shrink: 0;
+    }
+    .scroll-button:hover:not(:disabled) {
+      color: var(--diwa-text-primary);
+      background: var(--diwa-bg-hover);
+    }
+    .scroll-button:disabled {
+      opacity: var(--diwa-opacity-disabled);
+      cursor: not-allowed;
+    }
+    .scroll-button[hidden] {
+      display: none;
+    }
+    ${getFocusStyle('.scroll-button')}
+    .scroll-area {
+      display: flex;
+      position: relative;
+      align-items: ${alignItems};
+      overflow-x: auto;
+      overflow-y: hidden;
+      scroll-behavior: smooth;
+      -webkit-overflow-scrolling: touch;
+      ${scrollbar ? '' : 'scrollbar-width: none;'}
+    }
+    ::slotted(*) {
+      flex: 0 0 auto;
+    }
+    ${!scrollbar ? `
+    .scroll-area::-webkit-scrollbar {
+      display: none;
+    }
+    ` : ''}
+    /* Fade-out gradient masks at the edges */
+    .scroll-area::before,
+    .scroll-area::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: var(--diwa-scroller-fade-width);
+      pointer-events: none;
+      z-index: 1;
+      opacity: ${hasOverflow ? '1' : '0'};
+    }
+    .scroll-area::before {
+      left: 0;
+      background: var(--diwa-gradient-scrim-right);
+    }
+    .scroll-area::after {
+      right: 0;
+      background: var(--diwa-gradient-scrim-left);
+    }
+  `;
+};
+
+const DiwaScroller$1 = /*@__PURE__*/ proxyCustomElement(class DiwaScroller extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Position of gradient fade indicators relative to the scroll area. */
+        this.alignScrollIndicator = 'center';
+        /** Whether to show the native horizontal scrollbar. */
+        this.scrollbar = false;
+        /** Adapts the color when used on a light or dark background. */
+        this.theme = 'dark';
+        this.hasOverflow = false;
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        this.setScrollAreaRef = (el) => {
+            this.scrollAreaEl = el;
+        };
+        this.handleScroll = () => {
+            this.updateScrollState();
+        };
+        this.handleSlotChange = () => {
+            requestAnimationFrame(() => this.updateScrollState());
+        };
+        this.scrollByPage = (direction) => {
+            const el = this.scrollAreaEl;
+            if (!el)
+                return;
+            const distance = Math.max(el.clientWidth * 0.8, 1);
+            el.scrollBy({
+                left: direction === 'start' ? -distance : distance,
+                behavior: 'smooth',
+            });
+        };
+    }
+    handleWindowResize() {
+        this.updateScrollState();
+    }
+    componentDidLoad() {
+        this.updateScrollState();
+    }
+    updateScrollState() {
+        const el = this.scrollAreaEl;
+        if (!el)
+            return;
+        const maxScrollLeft = Math.max(0, el.scrollWidth - el.clientWidth);
+        const currentScrollLeft = el.scrollLeft;
+        const epsilon = 1;
+        this.hasOverflow = maxScrollLeft > epsilon;
+        this.canScrollLeft = currentScrollLeft > epsilon;
+        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" }))))));
+    }
+}, [1, "diwa-scroller", {
+        "alignScrollIndicator": [1, "align-scroll-indicator"],
+        "scrollbar": [4],
+        "theme": [513],
+        "hasOverflow": [32],
+        "canScrollLeft": [32],
+        "canScrollRight": [32]
+    }, [[9, "resize", "handleWindowResize"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-scroller"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-scroller":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaScroller$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaScroller = DiwaScroller$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaScroller, defineCustomElement };
+
+//# sourceMappingURL=diwa-scroller.js.map

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

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

package/dist-custom-elements/diwa-segmented-control-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaSegmentedControlItem extends Components.DiwaSegmentedControlItem, HTMLElement {}
+export const DiwaSegmentedControlItem: {
+    prototype: DiwaSegmentedControlItem;
+    new (): DiwaSegmentedControlItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,98 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
+
+const getComponentCss = (selected, disabled, compact) => `
+  :host {
+    display: inline-block;
+    font-family: var(--diwa-font-family-base);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--diwa-space-2);
+    padding: ${compact ? 'var(--diwa-space-1) var(--diwa-space-3)' : 'var(--diwa-space-2) var(--diwa-space-4)'};
+    border: none;
+    border-radius: calc(var(--diwa-radius-md) - var(--diwa-border-width-base));
+    background: ${selected ? 'var(--diwa-bg-elevated)' : 'transparent'};
+    color: ${selected ? 'var(--diwa-text-primary)' : 'var(--diwa-text-secondary)'};
+    font-size: ${compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-base)'};
+    font-weight: ${selected ? 'var(--diwa-font-weight-medium)' : 'var(--diwa-font-weight-normal, 400)'};
+    font-family: inherit;
+    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+    opacity: ${disabled ? 0.4 : 1};
+    white-space: nowrap;
+    transition: background 150ms ease, color 150ms ease;
+    box-shadow: ${selected ? 'var(--diwa-shadow-sm)' : 'none'};
+  }
+
+  ${getFocusStyle('.btn')}
+
+  .btn:hover:not(:disabled) {
+    color: var(--diwa-text-primary);
+    background: ${selected ? 'var(--diwa-bg-elevated)' : 'var(--diwa-bg-input)'};
+  }
+
+  ${getReducedMotionStyle('.btn')}
+`;
+
+const DiwaSegmentedControlItem$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSegmentedControlItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.segmentSelect = createEvent(this, "diwa-segment-select", 7);
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** The value emitted when this segment is activated. */
+        this.value = '';
+        /** Whether this segment is currently selected. Set by the parent. */
+        this.selected = false;
+        /** Whether this segment is disabled. Also set by the parent when the group is disabled. */
+        this.disabled = false;
+        /** Smaller sizing. Also set by the parent when compact is enabled. */
+        this.compact = false;
+        this.handleClick = () => {
+            if (this.disabled || this.selected)
+                return;
+            this.segmentSelect.emit({ value: this.value });
+        };
+    }
+    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' }))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return this; }
+}, [17, "diwa-segmented-control-item", {
+        "theme": [513],
+        "value": [513],
+        "selected": [1540],
+        "disabled": [516],
+        "compact": [516]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-segmented-control-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-segmented-control-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaSegmentedControlItem$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaSegmentedControlItem = DiwaSegmentedControlItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaSegmentedControlItem, defineCustomElement };
+
+//# sourceMappingURL=diwa-segmented-control-item.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-segmented-control-item.js","mappings":";;;AAEO,MAAM,eAAe,GAAG,CAAC,QAAiB,EAAE,QAAiB,EAAE,OAAgB,KAAa;;;;;;;;;;;;;;;eAepF,OAAO,GAAG,yCAAyC,GAAG,yCAAyC;;;kBAG5F,QAAQ,GAAG,yBAAyB,GAAG,aAAa;aACzD,QAAQ,GAAG,0BAA0B,GAAG,4BAA4B;iBAChE,OAAO,GAAG,0BAA0B,GAAG,4BAA4B;mBACjE,QAAQ,GAAG,gCAAgC,GAAG,qCAAqC;;cAExF,QAAQ,GAAG,aAAa,GAAG,SAAS;eACnC,QAAQ,GAAG,GAAG,GAAG,CAAC;;;kBAGf,QAAQ,GAAG,uBAAuB,GAAG,MAAM;;;IAGzD,aAAa,CAAC,MAAM,CAAC;;;;kBAIP,QAAQ,GAAG,yBAAyB,GAAG,sBAAsB;;;IAG3E,qBAAqB,CAAC,MAAM,CAAC;CAChC;;MCtBYA,0BAAwB;IAJrC;;;;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAGtB,UAAK,GAAW,EAAE,CAAC;;QAGJ,aAAQ,GAAY,KAAK,CAAC;;QAGzC,aAAQ,GAAY,KAAK,CAAC;;QAG1B,YAAO,GAAY,KAAK,CAAC;QAS1C,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SAChD,CAAC;KAkBH;IAhBC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EACjF,+DACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC9C,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzB,8DAAQ,CACD,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaSegmentedControlItem"],"sources":["src/components/diwa-segmented-control-item/diwa-segmented-control-item-styles.ts","src/components/diwa-segmented-control-item/diwa-segmented-control-item.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (selected: boolean, disabled: boolean, compact: boolean): string => `\r\n  :host {\r\n    display: inline-block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-2);\r\n    padding: ${compact ? 'var(--diwa-space-1) var(--diwa-space-3)' : 'var(--diwa-space-2) var(--diwa-space-4)'};\r\n    border: none;\r\n    border-radius: calc(var(--diwa-radius-md) - var(--diwa-border-width-base));\r\n    background: ${selected ? 'var(--diwa-bg-elevated)' : 'transparent'};\r\n    color: ${selected ? 'var(--diwa-text-primary)' : 'var(--diwa-text-secondary)'};\r\n    font-size: ${compact ? 'var(--diwa-font-size-sm)' : 'var(--diwa-font-size-base)'};\r\n    font-weight: ${selected ? 'var(--diwa-font-weight-medium)' : 'var(--diwa-font-weight-normal, 400)'};\r\n    font-family: inherit;\r\n    cursor: ${disabled ? 'not-allowed' : 'pointer'};\r\n    opacity: ${disabled ? 0.4 : 1};\r\n    white-space: nowrap;\r\n    transition: background 150ms ease, color 150ms ease;\r\n    box-shadow: ${selected ? 'var(--diwa-shadow-sm)' : 'none'};\r\n  }\r\n\r\n  ${getFocusStyle('.btn')}\r\n\r\n  .btn:hover:not(:disabled) {\r\n    color: var(--diwa-text-primary);\r\n    background: ${selected ? 'var(--diwa-bg-elevated)' : 'var(--diwa-bg-input)'};\r\n  }\r\n\r\n  ${getReducedMotionStyle('.btn')}\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-segmented-control-item-styles';\r\n\r\n/**\r\n * @component diwa-segmented-control-item\r\n *\r\n * A single segment used inside `diwa-segmented-control`.\r\n * The parent manages `selected`, `disabled`, and `compact` automatically.\r\n * You only need to supply `value` and label content via the default slot.\r\n *\r\n * Usage:\r\n *   <diwa-segmented-control-item value=\"week\">Week</diwa-segmented-control-item>\r\n */\r\n@Component({\r\n  tag: 'diwa-segmented-control-item',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaSegmentedControlItem {\r\n  @Element() host!: HTMLDiwaSegmentedControlItemElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** The value emitted when this segment is activated. */\r\n  @Prop({ reflect: true }) value: string = '';\r\n\r\n  /** Whether this segment is currently selected. Set by the parent. */\r\n  @Prop({ mutable: true, reflect: true }) selected: boolean = false;\r\n\r\n  /** Whether this segment is disabled. Also set by the parent when the group is disabled. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Smaller sizing. Also set by the parent when compact is enabled. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /**\r\n   * Internal event — dispatched to the parent control when clicked.\r\n   * Consumers should listen to the parent's `update` event.\r\n   */\r\n  @Event({ bubbles: true, composed: true, eventName: 'diwa-segment-select' })\r\n  segmentSelect!: EventEmitter<{ value: string }>;\r\n\r\n  private handleClick = () => {\r\n    if (this.disabled || this.selected) return;\r\n    this.segmentSelect.emit({ value: this.value });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <style innerHTML={getComponentCss(this.selected, this.disabled, this.compact)} />\r\n        <button\r\n          class=\"btn\"\r\n          type=\"button\"\r\n          disabled={this.disabled}\r\n          aria-pressed={this.selected ? 'true' : 'false'}\r\n          onClick={this.handleClick}\r\n        >\r\n          <slot />\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-segmented-control.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaSegmentedControl extends Components.DiwaSegmentedControl, HTMLElement {}
+export const DiwaSegmentedControl: {
+    prototype: DiwaSegmentedControl;
+    new (): DiwaSegmentedControl;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,88 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+
+const getComponentCss = () => `
+  :host {
+    display: inline-flex;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .track {
+    display: inline-flex;
+    align-items: center;
+    background: var(--diwa-bg-surface);
+    border: var(--diwa-border-width-thin) solid var(--diwa-border);
+    border-radius: var(--diwa-radius-md);
+    padding: var(--diwa-space-0-75);
+    gap: var(--diwa-space-0-5);
+  }
+`;
+
+const DiwaSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSegmentedControl extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.update = createEvent(this, "update", 1);
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** Currently selected item value. */
+        this.value = '';
+        /** Disables all items. */
+        this.disabled = false;
+        /** Smaller item sizing. */
+        this.compact = false;
+    }
+    handleItemSelect(event) {
+        this.value = event.detail.value;
+        this.update.emit({ value: this.value });
+        this.syncChildren();
+    }
+    componentDidLoad() {
+        this.syncChildren();
+    }
+    componentDidUpdate() {
+        this.syncChildren();
+    }
+    syncChildren() {
+        const items = Array.from(this.host.querySelectorAll('diwa-segmented-control-item'));
+        items.forEach((item) => {
+            item.selected = item.value === this.value;
+            item.disabled = this.disabled;
+            item.compact = this.compact;
+        });
+    }
+    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' }))));
+    }
+    get host() { return this; }
+}, [1, "diwa-segmented-control", {
+        "theme": [513],
+        "value": [1537],
+        "disabled": [516],
+        "compact": [516]
+    }, [[0, "diwa-segment-select", "handleItemSelect"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-segmented-control"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-segmented-control":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaSegmentedControl$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaSegmentedControl = DiwaSegmentedControl$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaSegmentedControl, defineCustomElement };
+
+//# sourceMappingURL=diwa-segmented-control.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-segmented-control.js","mappings":";;AAAO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;CAmB5C;;MCIYA,sBAAoB;IAJjC;;;;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAGP,UAAK,GAAW,EAAE,CAAC;;QAGlC,aAAQ,GAAY,KAAK,CAAC;;QAG1B,YAAO,GAAY,KAAK,CAAC;KA4CnD;IAnCC,gBAAgB,CAAC,KAAqC;QACpD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACxC,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,kBAAkB;QAChB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAEO,YAAY;QAClB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,CAAC,CACjB,CAAC;QAC3C,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;YAChB,IAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;YAClD,IAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YACtC,IAAY,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;SACtC,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,KAAK,IACvC,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,4DAAK,KAAK,EAAC,OAAO,IAChB,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaSegmentedControl"],"sources":["src/components/diwa-segmented-control/diwa-segmented-control-styles.ts","src/components/diwa-segmented-control/diwa-segmented-control.tsx"],"sourcesContent":["export const getComponentCss = (): string => `\r\n  :host {\r\n    display: inline-flex;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .track {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    background: var(--diwa-bg-surface);\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    border-radius: var(--diwa-radius-md);\r\n    padding: var(--diwa-space-0-75);\r\n    gap: var(--diwa-space-0-5);\r\n  }\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\r\nimport type { SegmentedControlUpdateEventDetail } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-segmented-control-styles';\r\n\r\n/**\r\n * @component diwa-segmented-control\r\n *\r\n * Container that groups diwa-segmented-control-item children into a\r\n * mutually exclusive selection control. Tracks the active value and\r\n * propagates state down to items.\r\n *\r\n * Usage:\r\n *   <diwa-segmented-control value=\"week\" onupdate={e => setView(e.detail.value)}>\r\n *     <diwa-segmented-control-item value=\"day\">Day</diwa-segmented-control-item>\r\n *     <diwa-segmented-control-item value=\"week\">Week</diwa-segmented-control-item>\r\n *     <diwa-segmented-control-item value=\"month\">Month</diwa-segmented-control-item>\r\n *   </diwa-segmented-control>\r\n */\r\n@Component({\r\n  tag: 'diwa-segmented-control',\r\n  shadow: true,\r\n})\r\nexport class DiwaSegmentedControl {\r\n  @Element() host!: HTMLDiwaSegmentedControlElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Currently selected item value. */\r\n  @Prop({ mutable: true, reflect: true }) value: string = '';\r\n\r\n  /** Disables all items. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Smaller item sizing. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /**\r\n   * Emitted when the active item changes.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<SegmentedControlUpdateEventDetail>;\r\n\r\n  @Listen('diwa-segment-select')\r\n  handleItemSelect(event: CustomEvent<{ value: string }>) {\r\n    this.value = event.detail.value;\r\n    this.update.emit({ value: this.value });\r\n    this.syncChildren();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.syncChildren();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.syncChildren();\r\n  }\r\n\r\n  private syncChildren() {\r\n    const items = Array.from(\r\n      this.host.querySelectorAll('diwa-segmented-control-item'),\r\n    ) as HTMLDiwaSegmentedControlItemElement[];\r\n    items.forEach((item) => {\r\n      (item as any).selected = item.value === this.value;\r\n      (item as any).disabled = this.disabled;\r\n      (item as any).compact = this.compact;\r\n    });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"group\" data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <div class=\"track\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}