@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-radio-group-item/diwa-radio-group-item.js

@@ -0,0 +1,203 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-radio-group-item-styles";
+/**
+ * @component diwa-radio-group-item
+ *
+ * A single radio option used inside `diwa-radio-group`.
+ * The group sets `checked`, `name`, and `disabled` automatically — you
+ * only need to provide `value` and the label via the default slot.
+ *
+ * Usage:
+ *   <diwa-radio-group-item value="s">Small</diwa-radio-group-item>
+ */
+export class DiwaRadioGroupItem {
+    constructor() {
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** The value submitted/emitted when this item is selected. */
+        this.value = '';
+        /** Set by the parent diwa-radio-group — do not set directly. */
+        this.checked = false;
+        /** Native name — set automatically by the parent group. */
+        this.name = '';
+        /** Whether this option is disabled. Also set by the parent group when the whole group is disabled. */
+        this.disabled = false;
+        /** Reduces size for denser layouts. */
+        this.compact = false;
+        this.handleChange = () => {
+            if (this.disabled)
+                return;
+            this.checked = true;
+            this.radioSelect.emit({ value: this.value });
+        };
+    }
+    handleCheckedChange(newVal) {
+        var _a;
+        const input = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+        if (input)
+            input.checked = newVal;
+    }
+    render() {
+        const labelId = `diwa-rgi-${this.value || Math.random().toString(36).slice(2, 7)}`;
+        return (h(Host, { key: '601466853aeddd1ff2903f879e7231e408434bf3' }, h("style", { key: '81305a16ccf6c2c50384dc6f1fa5055f4a529a66', innerHTML: getComponentCss(this.checked, this.disabled, this.compact) }), h("label", { key: '19ac3315bb5f8505001633e1fe1f9463f2d5df63', class: "wrapper" }, h("span", { key: 'f24bb10f78a1096212bd8fb49c164e21f64d6d28', class: "input-container" }, h("input", { key: '95e29f346d1ef84f50ca00565394580ec57f8473', id: labelId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, "aria-checked": this.checked ? 'true' : 'false' })), h("span", { key: '5d0e84e14ae2778bdf5bc3a1c80be6aa41cbe098', class: "label-text" }, h("slot", { key: '20243975c3f1c7f372e1e0c081fd92f2067c0b47' })))));
+    }
+    static get is() { return "diwa-radio-group-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value submitted/emitted when this item is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the parent diwa-radio-group \u2014 do not set directly."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native name \u2014 set automatically by the parent group."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this option is disabled. Also set by the parent group when the whole group is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reduces size for denser layouts."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "compact",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "radioSelect",
+                "name": "diwa-radio-select",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal event dispatched to the parent group when the user selects this item.\r\nConsumers should listen to the parent group's `update` event instead."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }];
+    }
+}
+//# sourceMappingURL=diwa-radio-group-item.js.map

package/dist/collection/components/diwa-radio-group-item/diwa-radio-group-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-radio-group-item.js","sourceRoot":"","sources":["../../../src/components/diwa-radio-group-item/diwa-radio-group-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAqB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnG,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE;;;;;;;;;GASG;AAKH,MAAM,OAAO,kBAAkB;IAJ/B;QAOE,oCAAoC;QACX,UAAK,GAAU,MAAM,CAAC;QAE/C,8DAA8D;QACrC,UAAK,GAAW,EAAE,CAAC;QAE5C,gEAAgE;QACxB,YAAO,GAAY,KAAK,CAAC;QAEjE,2DAA2D;QACnB,SAAI,GAAW,EAAE,CAAC;QAE1D,sGAAsG;QAC7E,aAAQ,GAAY,KAAK,CAAC;QAEnD,uCAAuC;QACd,YAAO,GAAY,KAAK,CAAC;QAe1C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAC/C,CAAC,CAAC;KA4BH;IArCC,mBAAmB,CAAC,MAAe;;QACjC,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAC3D,IAAI,KAAK;YAAE,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACpC,CAAC;IAQD,MAAM;QACJ,MAAM,OAAO,GAAG,YAAY,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAEnF,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI;YAChF,8DAAO,KAAK,EAAC,SAAS;gBACpB,6DAAM,KAAK,EAAC,iBAAiB;oBAC3B,8DACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,kBACb,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,GAC7C,CACG;gBACP,6DAAM,KAAK,EAAC,YAAY;oBACtB,8DAAQ,CACH,CACD,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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-radio-group-item-styles';\r\n\r\n/**\r\n * @component diwa-radio-group-item\r\n *\r\n * A single radio option used inside `diwa-radio-group`.\r\n * The group sets `checked`, `name`, and `disabled` automatically — you\r\n * only need to provide `value` and the label via the default slot.\r\n *\r\n * Usage:\r\n *   <diwa-radio-group-item value=\"s\">Small</diwa-radio-group-item>\r\n */\r\n@Component({\r\n  tag: 'diwa-radio-group-item',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaRadioGroupItem {\r\n  @Element() host!: HTMLDiwaRadioGroupItemElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** The value submitted/emitted when this item is selected. */\r\n  @Prop({ reflect: true }) value: string = '';\r\n\r\n  /** Set by the parent diwa-radio-group — do not set directly. */\r\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\r\n\r\n  /** Native name — set automatically by the parent group. */\r\n  @Prop({ mutable: true, reflect: true }) name: string = '';\r\n\r\n  /** Whether this option is disabled. Also set by the parent group when the whole group is disabled. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Reduces size for denser layouts. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /**\r\n   * Internal event dispatched to the parent group when the user selects this item.\r\n   * Consumers should listen to the parent group's `update` event instead.\r\n   */\r\n  @Event({ bubbles: true, composed: true, eventName: 'diwa-radio-select' })\r\n  radioSelect!: EventEmitter<{ value: string }>;\r\n\r\n  @Watch('checked')\r\n  handleCheckedChange(newVal: boolean) {\r\n    const input = this.host.shadowRoot?.querySelector('input');\r\n    if (input) input.checked = newVal;\r\n  }\r\n\r\n  private handleChange = () => {\r\n    if (this.disabled) return;\r\n    this.checked = true;\r\n    this.radioSelect.emit({ value: this.value });\r\n  };\r\n\r\n  render() {\r\n    const labelId = `diwa-rgi-${this.value || Math.random().toString(36).slice(2, 7)}`;\r\n\r\n    return (\r\n      <Host>\r\n        <style innerHTML={getComponentCss(this.checked, this.disabled, this.compact)} />\r\n        <label class=\"wrapper\">\r\n          <span class=\"input-container\">\r\n            <input\r\n              id={labelId}\r\n              type=\"radio\"\r\n              name={this.name}\r\n              value={this.value}\r\n              checked={this.checked}\r\n              disabled={this.disabled}\r\n              onChange={this.handleChange}\r\n              aria-checked={this.checked ? 'true' : 'false'}\r\n            />\r\n          </span>\r\n          <span class=\"label-text\">\r\n            <slot />\r\n          </span>\r\n        </label>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-radio-group-item/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/collection/components/diwa-radio-group-item/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-radio-group-item/types.ts"],"names":[],"mappings":";AAAA;;GAEG","sourcesContent":["/**\r\n * diwa-radio-group-item — Public TypeScript types\r\n */\r\n"]}

package/dist/collection/components/diwa-scroller/diwa-scroller-styles.js

@@ -0,0 +1,90 @@
+import { getFocusStyle } from "../../utils/styles";
+const ALIGN_MAP = {
+    top: 'flex-start',
+    center: 'center',
+    bottom: 'flex-end',
+};
+export 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);
+    }
+  `;
+};
+//# sourceMappingURL=diwa-scroller-styles.js.map

package/dist/collection/components/diwa-scroller/diwa-scroller-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-scroller-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-scroller/diwa-scroller-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,MAAM,SAAS,GAAoD;IACjE,GAAG,EAAE,YAAY;IACjB,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,UAAU;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,SAAkB,EAClB,oBAAqD,EACrD,WAAoB,EACZ,EAAE;IACV,MAAM,UAAU,GAAG,SAAS,CAAC,oBAAoB,CAAC,CAAC;IAEnD,OAAO;;;;;;;;;;+BAUsB,WAAW,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,gBAAgB;qBACrE,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BzB,aAAa,CAAC,gBAAgB,CAAC;;;;qBAIhB,UAAU;;;;;QAKvB,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB;;;;;MAK3C,CAAC,SAAS,CAAC,CAAC,CAAC;;;;KAId,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;iBAWO,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;;;;;;;;;GAUrC,CAAC;AACJ,CAAC,CAAC","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"]}

package/dist/collection/components/diwa-scroller/diwa-scroller.js

@@ -0,0 +1,152 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-scroller-styles";
+/**
+ * @slot default — Items to be scrolled horizontally.
+ */
+export class DiwaScroller {
+    constructor() {
+        /** 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" }))))));
+    }
+    static get is() { return "diwa-scroller"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "alignScrollIndicator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ScrollerScrollIndicatorPosition",
+                    "resolved": "\"bottom\" | \"center\" | \"top\"",
+                    "references": {
+                        "ScrollerScrollIndicatorPosition": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-scroller/types.ts::ScrollerScrollIndicatorPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of gradient fade indicators relative to the scroll area."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "align-scroll-indicator",
+                "reflect": false,
+                "defaultValue": "'center'"
+            },
+            "scrollbar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the native horizontal scrollbar."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "scrollbar",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adapts the color when used on a light or dark background."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasOverflow": {},
+            "canScrollLeft": {},
+            "canScrollRight": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=diwa-scroller.js.map

package/dist/collection/components/diwa-scroller/diwa-scroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-scroller.js","sourceRoot":"","sources":["../../../src/components/diwa-scroller/diwa-scroller.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/diwa-scroller/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/diwa-scroller/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-scroller/types.ts"],"names":[],"mappings":"","sourcesContent":["export type ScrollerScrollIndicatorPosition = 'top' | 'center' | 'bottom';\r\n"]}

package/dist/collection/components/diwa-segmented-control/diwa-segmented-control-styles.js

@@ -0,0 +1,21 @@
+export 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);
+  }
+`;
+//# sourceMappingURL=diwa-segmented-control-styles.js.map

package/dist/collection/components/diwa-segmented-control/diwa-segmented-control-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-segmented-control-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-segmented-control/diwa-segmented-control-styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmB5C,CAAC","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"]}