@diwacopilot/components 1.0.0 → 1.1.1

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

@@ -153,7 +153,7 @@ export class DiwaModal {
     // ──────────────────────────────────────────────────────────────
     render() {
         const { open, heading, dismissButton, backdrop, _hasFooter, _hasHeader } = this;
-        return (h(Host, { key: 'c1acc99174aa04a60711f8e96c6097d55b9efd14', "data-theme": this.theme }, h("style", { key: '21667f36c24c814ea163defa911f038684563d9c' }, getComponentCss(open, backdrop, dismissButton, _hasFooter)), h("div", { key: 'a393f68968ef8eca8007af0204831627114f0150', class: "backdrop", "aria-hidden": "true", onClick: this.handleBackdropClick }), h("div", { key: '34e2f0b1ceffc8f1e8255198714ee1273cafb945', class: "modal", role: "dialog", "aria-modal": "true", "aria-labelledby": heading ? this._headingId : undefined, "aria-label": !heading ? 'Dialog' : undefined, "aria-hidden": open ? undefined : 'true', tabIndex: -1, ref: (el) => { this._modalEl = el; } }, h("div", { key: 'b7f3afe1849b84edd7689bf854bfb88724b80126', class: "header" }, h("div", { key: 'c149b170f6b9fc010c7095b72393a6c52786cc56', class: "header-top" }, heading && (h("h2", { key: '8766cbba30a6baec983d76c2ea2103a0ce72d8cd', class: "heading", id: this._headingId }, heading)), dismissButton && (h("button", { key: '33427160a356fa8d5d6fb80ac386f4aaa2086bb9', class: "dismiss", type: "button", "aria-label": "Close dialog", onClick: this.handleDismiss }, h("svg", { key: 'c0a8aa78dadf6146151f24193eb06bae00ba9291', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", width: "16", height: "16", "aria-hidden": "true" }, h("path", { key: '21b404d32024b640a2687a9589c4783357a22aa6', d: "M18 6 6 18M6 6l12 12" }))))), _hasHeader && (h("div", { key: 'cd981d16141149103a2309b20d49fc6a01b5570b', class: "header-sub" }, h("slot", { key: '108ead5c96a73eeb0afae549d8ee3bcf6b06d305', name: "header" })))), h("div", { key: '56aa2c8ce6090086af76f4f039637e4d3274c9ca', class: "body" }, h("slot", { key: '784eb1571c6d68bdc6f01e413f3d549bc70ad2ea' })), _hasFooter && (h("div", { key: '1aa5c7bbdb0cfc86a3319bd9faa778da78a18a98', class: "footer" }, h("slot", { key: 'ada3b858cf5e2f6c46c175518773398e519d5aff', name: "footer" }))))));
+        return (h(Host, { key: 'a7c4c46ac2022eff1f585955d327e8b5614b268a', "data-theme": this.theme }, h("style", { key: 'd4fd6c7649e8a6cacef20de25e1545dde2a7c89e' }, getComponentCss(open, backdrop, dismissButton, _hasFooter)), h("div", { key: '2aa898b9fc1136a36f8e2f9b15180d7f0573002c', class: "backdrop", "aria-hidden": "true", onClick: this.handleBackdropClick }), h("div", { key: '0c61a254601a455b6082e15d797d15f09b7d0393', class: "modal", role: "dialog", "aria-modal": "true", "aria-labelledby": heading ? this._headingId : undefined, "aria-label": !heading ? 'Dialog' : undefined, "aria-hidden": open ? undefined : 'true', tabIndex: -1, ref: (el) => { this._modalEl = el; } }, h("div", { key: '7dd4938654021ff4e7002e0944bb3c630fa475a0', class: "header" }, h("div", { key: 'd2b1302f27595ba0cac1284486bc9a4ae2d4f6e2', class: "header-top" }, heading && (h("h2", { key: '35ee9c3a96497b3ab7787bdcb22758b5225db485', class: "heading", id: this._headingId }, heading)), dismissButton && (h("button", { key: '83452c628da2141bada1153e6cea6224027a2862', class: "dismiss", type: "button", "aria-label": "Close dialog", onClick: this.handleDismiss }, h("svg", { key: '87ce4e4636ab5a191b4f6928b78ad75ef31ffa3b', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", width: "16", height: "16", "aria-hidden": "true" }, h("path", { key: '940d065be71549f24cfc2f94b9407b80f8819f08', d: "M18 6 6 18M6 6l12 12" }))))), _hasHeader && (h("div", { key: '65484bca3079d7707c52da339291dddbf1d3f427', class: "header-sub" }, h("slot", { key: '4653c0604f79201777fdb247562da2b712ef67d7', name: "header" })))), h("div", { key: '1516ef5894e7bd58708c63dffca0bd0cd83b250f', class: "body" }, h("slot", { key: '0f5692e741ddc5ba6c68e556efbcec420339890e' })), _hasFooter && (h("div", { key: '96eba8b23a345cecb3a18356cae02dd257daa185', class: "footer" }, h("slot", { key: 'ac9d27e700733b3124392cc7ee9331d2b864f5b4', name: "footer" }))))));
     }
     static get is() { return "diwa-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/diwa-multi-select/diwa-multi-select.js

@@ -343,10 +343,10 @@ export class DiwaMultiSelect {
         const hintId = `${this.internalId}-hint`;
         const hasMessage = !!this.message && this.state !== 'none';
         const hasValue = this.value.length > 0;
-        return (h(Host, { key: 'b64a8c41ae771f58d8ca8778ddb3f943f1e2cac4', "data-theme": this.theme }, h("style", { key: 'd8cc4112b8378f11e5a91874adc6ae3f1e422fa4', innerHTML: getComponentCss(this.isOpen, this.disabled, this.state, this.compact, this.dropdownClass.includes('--up')) }), (this.label || this.host.querySelector('[slot="label"]')) && (h("span", { key: '53f49aa986fd9f05e73314cc650995afa8b97bb2', class: "label", id: labelId, part: "label" }, h("slot", { key: '7c2f4c19f4d25ca64bfa28f4a4a3f5234594c763', name: "label" }, this.label), this.required && h("span", { key: 'bbd11f3b58d7821ca7ab7ebc8eb0a05e3618a5e9', class: "label__required", "aria-hidden": "true" }, "*"))), (this.description || this.host.querySelector('[slot="description"]')) && (h("span", { key: '92a55e0597c3802a2f986d0b9ba10d41ed33356a', class: "description", part: "description" }, h("slot", { key: '0365a7975834cb125e1b65ce482874d99f69af2a', name: "description" }, this.description))), h("div", { key: '293c6bd35a70f57a7e2b0efa930fa61578ab3752', 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: '146365e26a7513974361dfa9dc26410e5e174fd8', class: `trigger__value${!hasValue ? ' trigger__placeholder' : ''}`, part: "value" }, this.hasCustomSelectedSlot ? (h("slot", { name: "selected" })) : hasValue ? (this.selectedLabels) : (this.label || 'Select options')), hasValue && (h("button", { key: 'b1a5018fb507d2d4d4d822af191bef24c6fa558e', class: "trigger__reset", type: "button", "aria-label": "Reset selection", onClick: this.onResetClick, onKeyDown: (e) => {
+        return (h(Host, { key: 'd1870eb6329fdced85adc9165c58e7060370c5ac', "data-theme": this.theme }, h("style", { key: 'f7c5db3277aab64cdfb0457133ed1d6da7a345c7', innerHTML: getComponentCss(this.isOpen, this.disabled, this.state, this.compact, this.dropdownClass.includes('--up')) }), (this.label || this.host.querySelector('[slot="label"]')) && (h("span", { key: '07d54b9aff11c23e21f656b0d2d045bdd0998e60', class: "label", id: labelId, part: "label" }, h("slot", { key: '8bf102a8b193fd0273726309615ea722fcce0b14', name: "label" }, this.label), this.required && h("span", { key: '07ac8efaae3785897ca2537961acb4bded9e8d40', class: "label__required", "aria-hidden": "true" }, "*"))), (this.description || this.host.querySelector('[slot="description"]')) && (h("span", { key: '9f105c5c644b0d9c5c8f560e2bc7f28b76adc944', class: "description", part: "description" }, h("slot", { key: 'f90b49ec602ed3b50ecbdadd51860d08a71878cb', name: "description" }, this.description))), h("div", { key: '32b0d40cfd3ff3704a2133ddb49b19f2e65fea0c', 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: '746b9ef493c0d06da003282805cb5dfee6526761', class: `trigger__value${!hasValue ? ' trigger__placeholder' : ''}`, part: "value" }, this.hasCustomSelectedSlot ? (h("slot", { name: "selected" })) : hasValue ? (this.selectedLabels) : (this.label || 'Select options')), hasValue && (h("button", { key: '482962199782f1b35ee38cded409ca99592a314d', class: "trigger__reset", type: "button", "aria-label": "Reset selection", onClick: this.onResetClick, onKeyDown: (e) => {
                 if (e.key === 'Tab')
                     this.isOpen = false;
-            }, part: "reset" }, "\u2715")), h("span", { key: '4dbbf50468fc96323e3bd9c92b25e3f34e2ad344', class: "trigger__chevron", "aria-hidden": "true", part: "chevron" }, h("svg", { key: '0b4f50afe6b0cd6d1ffccb3a8acf5709a8734477', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1c582d3bcf18af529b1d8b2a581f9ef7ad13858e', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'f98fd7dd9d6325a2eafb21880d10d12f4517dc4e', class: this.dropdownClass, role: "dialog", "aria-label": this.label, "aria-hidden": this.isOpen ? undefined : 'true', part: "dropdown" }, this.hasCustomFilterSlot ? (h("div", { class: "filter" }, h("slot", { name: "filter" }))) : (h("div", { class: "filter" }, h("input", { class: "filter__input", type: "text", placeholder: "Filter options\u2026", "aria-label": "Filter options", autocomplete: "off", value: this.filterText, onInput: this.onFilterInput, onKeyDown: this.onTriggerKeyDown, ref: (el) => (this.filterInputEl = el), part: "filter-input" }))), h("div", { key: 'edd1c19900c332574d972424a62d117d10cbcda6', class: "options", id: listboxId, role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", part: "options" }, !this.hasFilterResults && (h("div", { key: 'e03ac0ea8790a73bcc15f71fee27c773a1e323f9', class: "no-results", role: "alert", "aria-live": "polite" }, "No results found")), h("slot", { key: '71bd34a1ca8e20245f7bf87bf4cd7be8c5814556', name: "options-status" }), h("slot", { key: 'a7c8ebb35860740c3c19b5f8910b18bf923bc7ff', onSlotchange: () => this.onSlotChange() }))), hasMessage && (h("span", { key: '671515ab8d44ac2fef5cd5f5a398c945de4b2b6e', id: hintId, class: "message", part: "message", "aria-live": this.state === 'error' ? 'polite' : undefined }, h("slot", { key: 'f93922457797ae8cfeb378b3338b537907267c93', name: "message" }, this.message)))));
+            }, part: "reset" }, "\u2715")), h("span", { key: 'd045c0e7d87ae202687241504a0544047e68f986', class: "trigger__chevron", "aria-hidden": "true", part: "chevron" }, h("svg", { key: '987e79ae7ef8f316dd50513e3cc6b910596fdc33', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8c38ce669650bdb480c242a9c7ea0aa2a1926207', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'bdeeca7bb9bb54446af37bbf83a64bdacac380cb', class: this.dropdownClass, role: "dialog", "aria-label": this.label, "aria-hidden": this.isOpen ? undefined : 'true', part: "dropdown" }, this.hasCustomFilterSlot ? (h("div", { class: "filter" }, h("slot", { name: "filter" }))) : (h("div", { class: "filter" }, h("input", { class: "filter__input", type: "text", placeholder: "Filter options\u2026", "aria-label": "Filter options", autocomplete: "off", value: this.filterText, onInput: this.onFilterInput, onKeyDown: this.onTriggerKeyDown, ref: (el) => (this.filterInputEl = el), part: "filter-input" }))), h("div", { key: '4073abc69ecf2e4204aae127fc07662d4f6d663a', class: "options", id: listboxId, role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", part: "options" }, !this.hasFilterResults && (h("div", { key: 'b4415ca3b2e043bab5a01835bb6097c15ecada81', class: "no-results", role: "alert", "aria-live": "polite" }, "No results found")), h("slot", { key: '9362401ed428d356b65d4506d38ea23470b8ab0c', name: "options-status" }), h("slot", { key: '3aa042ec8c156478053fa1dd36c7cecf09ff2151', onSlotchange: () => this.onSlotChange() }))), hasMessage && (h("span", { key: '07652c69895dbbd71f4cab8fa05122a74ddc2be5', id: hintId, class: "message", part: "message", "aria-live": this.state === 'error' ? 'polite' : undefined }, h("slot", { key: '9e0180e1cc8f2757371a3a10e1e12d236e4c07ed', name: "message" }, this.message)))));
     }
     static get is() { return "diwa-multi-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/diwa-multi-select-option/diwa-multi-select-option.js

@@ -56,7 +56,7 @@ export class DiwaMultiSelectOption {
         (_a = this.optionEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: 'b4d48c6bb6968502a8ae2a6c1981db145332ce83', "data-theme": this.theme }, h("style", { key: 'c69088cc9414ff1b6edc4fa064abc6fded70226b', innerHTML: getComponentCss(this.compact) }), h("div", { key: 'f5ecb4d1dda04a18735594105ee436544f210c95', class: "option", role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: (el) => (this.optionEl = el), part: "option" }, h("span", { key: '3d2e4211d015355332a3ac44204d7a907659a465', class: "checkbox", "aria-hidden": "true", part: "checkbox" }), h("span", { key: '86ca6452ad32e685f944511f4c862c848d0bf493', class: "label", part: "label" }, h("slot", { key: '3caa3fafd6bdb4c3426d8ef989f8de34fc05a853' })))));
+        return (h(Host, { key: 'cd154bf05b1c5524ef8757d49a538f5b71dcf0f7', "data-theme": this.theme }, h("style", { key: 'e79192f92ab4f5a3965a5c41617208d5ba0586bb', innerHTML: getComponentCss(this.compact) }), h("div", { key: 'bdb6539019761a38a79c825d0c10eb035da493d1', 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: '778df214b22f9e64859f56fe25cb4ed71ad4896f', class: "checkbox", "aria-hidden": "true", part: "checkbox" }), h("span", { key: '153a68043083905a2c2b328e6e00504a312cf659', class: "label", part: "label" }, h("slot", { key: '803a21e44bdc6162c648f1fbd90267f9bc3d4c89' })))));
     }
     static get is() { return "diwa-multi-select-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,7 +77,7 @@ export class DiwaPagination {
         const prevLabel = (_c = intl.prev) !== null && _c !== void 0 ? _c : 'Previous page';
         const nextLabel = (_d = intl.next) !== null && _d !== void 0 ? _d : 'Next page';
         const pageLabel = (_e = intl.page) !== null && _e !== void 0 ? _e : 'Page';
-        return (h(Host, { key: '5ab4f9042518982631f8b0276acc3de703344ab7', "data-theme": this.theme }, h("style", { key: '83777127af3cd7fba90bcf359c0727ecb478019d', innerHTML: getComponentCss() }), h("nav", { key: '9ba68ea091b61589dd7ef2b9bda3fab01f841efd', "aria-label": rootLabel, class: "nav" }, h("ul", { key: '819b9d7b344ec50b2a15241278438e18bb20cdfb', class: "list" }, items.map((item, index) => {
+        return (h(Host, { key: '4fa5cadb5296b7e23cc779e5ec159244fcde6c4a', "data-theme": this.theme }, h("style", { key: '64ecd996a2a54cad3762f31430dfc1c8ef6a8b8f', innerHTML: getComponentCss() }), h("nav", { key: 'a8ff37dbf716a7c270e5493539418da43ae94b5f', "aria-label": rootLabel, class: "nav" }, h("ul", { key: '3a980124988ec73d6a4c0becbe76351b66522544', class: "list" }, items.map((item, index) => {
             const { type, isActive, value } = item;
             if (type === ItemType.PREVIOUS) {
                 return (h("li", { key: "prev" }, h("button", { class: "btn", disabled: !isActive, "aria-label": prevLabel, onClick: () => isActive && this.handleClick(value) }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { points: "15 18 9 12 15 6" })))));

package/dist/collection/components/diwa-pin-code/diwa-pin-code.js

@@ -93,10 +93,10 @@ export class DiwaPinCode {
         const valueChars = this.value.padEnd(safeLength, '').slice(0, safeLength);
         const descId = 'desc';
         const msgId = 'msg';
-        return (h(Host, { key: 'ce75d110bb3a2805f659bcb7134d5d634dcc70de', "data-theme": this.theme }, h("style", { key: 'e9c07d76495bdec903746bd91eda7837c9c295f1', innerHTML: getComponentCss(this.state, this.disabled, this.compact) }), h("div", { key: 'f592254bd71d2ee7f9146343c5da9313c7078478', class: "root" }, !this.hideLabel && this.label && (h("div", { key: 'cc40bfd72a5b9e338778de362fbe544748e0fc51', class: "label-row" }, h("span", { key: '18abb5940e763b390be780d465ac5c97daecc73e', class: "label" }, this.label, this.required && h("span", { key: '5d1fb8d02a8f774840338a52a3db1b8ca82b667b', class: "required", "aria-hidden": "true" }, " *")))), h("div", { key: 'b47022b7e3c7b04b13918c534b39ed67aea6855b', class: "boxes", role: "group", "aria-label": this.hideLabel && this.label ? this.label : undefined }, Array.from({ length: safeLength }).map((_, i) => {
+        return (h(Host, { key: 'fd84239857264ac7ff2d70388a1b57ed28c139e1', "data-theme": this.theme }, h("style", { key: '8ca52e841f42b85be9b805443f76636e67108b00', innerHTML: getComponentCss(this.state, this.disabled, this.compact) }), h("div", { key: 'b9295c2b897c58294b87e069e874682f6882c526', class: "root" }, !this.hideLabel && this.label && (h("div", { key: 'f53aa0736441db633eb7756c57091f5c86932781', class: "label-row" }, h("span", { key: '95e0e0bf33034fe78d914046450a5eaddfdefadc', class: "label" }, this.label, this.required && h("span", { key: '8197798944a90f35349b68537d90670949451034', class: "required", "aria-hidden": "true" }, " *")))), h("div", { key: '8e7638e8c78f0f1b4ae673828d8c14682d39a76a', class: "boxes", role: "group", "aria-label": this.hideLabel && this.label ? this.label : undefined }, Array.from({ length: safeLength }).map((_, i) => {
             var _a;
             return (h("input", { key: i, class: "box", type: this.type === 'password' ? 'password' : 'text', inputMode: this.type === 'number' ? 'numeric' : 'text', maxLength: 1, value: (_a = valueChars[i]) !== null && _a !== void 0 ? _a : '', disabled: this.disabled, required: this.required && i === 0, "aria-label": `Digit ${i + 1} of ${safeLength}`, "aria-describedby": i === 0 ? (this.message ? msgId : this.description ? descId : undefined) : undefined, onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i), onPaste: i === 0 ? this.handlePaste : undefined, onFocus: (e) => e.target.select(), autocomplete: i === 0 ? 'one-time-code' : 'off' }));
-        })), !this.message && this.description && (h("p", { key: '81acb4b960a629cccf26db9cbab200acdbbd4079', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'fb3b87870b07324e635a8442c1e68959f23e3b4b', id: msgId, class: "message" }, this.message)))));
+        })), !this.message && this.description && (h("p", { key: 'e596640dd57e61edcc854a19671d417c3fd1bf1d', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: '33741de2a6c5fa2e7d1072d5bf8d846cc54b6ddf', id: msgId, class: "message" }, this.message)))));
     }
     static get is() { return "diwa-pin-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class DiwaPopover {
         }
     }
     render() {
-        return (h(Host, { key: '29f28c2151f2472cd116e14239de1aeeb9d046c5', "data-theme": this.theme }, h("style", { key: '35ba788b9f4c625e864a8aa6ca0b4b4366b13d30', innerHTML: getComponentCss(this.isOpen, this.direction) }), h("slot", { key: 'd253876442f93e392b63bd1345dd39ea72c56926', name: "button" }, h("button", { key: '756b2d3b46770bea764bb3e29de4421c20f58523', class: "trigger", type: "button", "aria-expanded": String(this.isOpen), "aria-haspopup": "true", onClick: this.toggle }, h("svg", { key: '79808b6b95b48df821d2f73a75c25acc91c93e25', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { key: 'f1ae6d761a15e38ea29d0a3fb41edde1022fd1af', cx: "12", cy: "12", r: "10" }), h("line", { key: '2d115de15f3558053fe928470262235a0740990f', x1: "12", y1: "8", x2: "12", y2: "12" }), h("line", { key: '5e59843ffa9c7eb1e7f536b4dbcefa83686fa19e', x1: "12", y1: "16", x2: "12.01", y2: "16" })))), h("div", { key: '58abbaa997097e8ba2b6394cdb7e4f34a516f027', class: "panel", role: "tooltip", "aria-hidden": String(!this.isOpen) }, this.description && h("p", { key: '7a2dcca65d61ad04e8bffc3b6af4dc5759f88449' }, this.description), h("slot", { key: '8dcc3f2f287fa5a194decb4d6585cd64e58a00ca' }))));
+        return (h(Host, { key: '706d73f1ad8a20082daca4acfc0758ba50542169', "data-theme": this.theme }, h("style", { key: '331793aabac4e2555201b5242133f7d28e7fd484', innerHTML: getComponentCss(this.isOpen, this.direction) }), h("slot", { key: 'f79a4057076d939012b8e27c92e9883f3335a40f', name: "button" }, h("button", { key: 'c42272766f4a5c80b5120ce5f53a1f0d8634e2e1', class: "trigger", type: "button", "aria-expanded": String(this.isOpen), "aria-haspopup": "true", onClick: this.toggle }, h("svg", { key: 'a93a6cb15e2ea6c146129a3373e9a2e69b71dde2', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { key: '62d9118c2f344d2fbb5ca97989f336e9e1368d90', cx: "12", cy: "12", r: "10" }), h("line", { key: '2f31265ac9c896eb36f53ee73271340543b5cba4', x1: "12", y1: "8", x2: "12", y2: "12" }), h("line", { key: 'a9c6ff1a17ecd8694d0fef23dc3c5b79bab49b20', x1: "12", y1: "16", x2: "12.01", y2: "16" })))), h("div", { key: '0da742535b53bd3c40a6ee20e611c7740ce53e75', class: "panel", role: "tooltip", "aria-hidden": String(!this.isOpen) }, this.description && h("p", { key: '8fcbb3c865aa604e9d1c13aa814ed453903fc341' }, this.description), h("slot", { key: '51c6c0d6ca50f4a6444e8768d88203fa54cf4132' }))));
     }
     static get is() { return "diwa-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -68,7 +68,7 @@ export class DiwaRadioGroup {
         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))));
+        return (h(Host, { key: '32637e2660123b9ab13929e9f6bf72ecd1c62ea3', "data-theme": this.theme }, h("style", { key: '56e3db8486007a85e2c6c2541247f5c95ce5d000', innerHTML: getComponentCss(this.state, this.direction, this.disabled, this.compact) }), h("div", { key: '2353868f8aa1d4c507e7b9a39abc80a42e43a746', 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: 'be82c40317e75d25bf7a301b0c558fbae3462197', id: `${id}-label`, class: `label${this.hideLabel ? ' label-visually-hidden' : ''}` }, this.label, this.required && h("span", { key: 'a971a5fa7153287a91b7f5285963b5d209e90a20', class: "label-required", "aria-hidden": "true" }, " *"))), this.description && (h("span", { key: 'cc429975145668e59143f3eb8418b9e0e18bf9a7', id: descId, class: "description" }, this.description)), h("div", { key: 'df706b4c3265b81adc189299a3745d024c584622', class: "options" }, h("slot", { key: 'ce4b20e7f9a24885887d0b6b660da8a3a6440e25' })), h("span", { key: '84182d0942ee8b3561b943e940053da9e8f756d5', id: msgId, class: "message", hidden: !msgId }, this.message))));
     }
     static get is() { return "diwa-radio-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export const getComponentCss = (checked, disabled, compact) => {
 
   .wrapper {
     display: inline-flex;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--diwa-space-3);
     cursor: pointer;
   }
@@ -29,7 +29,6 @@ export const getComponentCss = (checked, disabled, compact) => {
     flex-shrink: 0;
     width: ${boxSize};
     height: ${boxSize};
-    margin-top: calc((1.5em - ${boxSize}) / 2);
   }
 
   input[type="radio"] {

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

@@ -1 +1 @@
-{"version":3,"file":"diwa-radio-group-item-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-radio-group-item/diwa-radio-group-item-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE1E,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,OAAgB,EAChB,QAAiB,EACjB,OAAgB,EACR,EAAE;IACV,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1C,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAExC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;aAyBI,OAAO;cACN,OAAO;gCACW,OAAO;;;;;;;;;;;;;;oDAca,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB;kBACvF,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa;;;;;;;;;IAS5D,aAAa,CAAC,qBAAqB,CAAC;;;;;;;;;aAS3B,OAAO;cACN,OAAO;;;eAGN,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;;;;;;;;;;;;;;;IAgB9B,qBAAqB,CAAC,qBAAqB,EAAE,yBAAyB,CAAC;GACxE,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (\r\n  checked: boolean,\r\n  disabled: boolean,\r\n  compact: boolean,\r\n): string => {\r\n  const boxSize = compact ? '14px' : '18px';\r\n  const dotSize = compact ? '6px' : '8px';\r\n\r\n  return `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .wrapper {\r\n    display: inline-flex;\r\n    align-items: flex-start;\r\n    gap: var(--diwa-space-3);\r\n    cursor: pointer;\r\n  }\r\n\r\n  :host([disabled]) .wrapper {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  .input-container {\r\n    position: relative;\r\n    flex-shrink: 0;\r\n    width: ${boxSize};\r\n    height: ${boxSize};\r\n    margin-top: calc((1.5em - ${boxSize}) / 2);\r\n  }\r\n\r\n  input[type=\"radio\"] {\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n    border-radius: 50%;\r\n    border: var(--diwa-border-width-medium) solid ${checked ? 'var(--diwa-accent)' : 'var(--diwa-border)'};\r\n    background: ${checked ? 'var(--diwa-accent)' : 'transparent'};\r\n    transition: border-color var(--diwa-transition-base), background var(--diwa-transition-base);\r\n  }\r\n\r\n  input[type=\"radio\"]:disabled {\r\n    cursor: not-allowed;\r\n    opacity: 0.4;\r\n  }\r\n\r\n  ${getFocusStyle('input[type=\"radio\"]')}\r\n\r\n  /* Dot indicator when checked */\r\n  .input-container::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: ${dotSize};\r\n    height: ${dotSize};\r\n    border-radius: 50%;\r\n    background: var(--diwa-text-on-accent, #fff);\r\n    opacity: ${checked ? '1' : '0'};\r\n    pointer-events: none;\r\n    transition: opacity var(--diwa-transition-base);\r\n  }\r\n\r\n  .label-text {\r\n    font-size: var(--diwa-font-size-base);\r\n    color: var(--diwa-text-primary);\r\n    line-height: 1.5;\r\n    user-select: none;\r\n  }\r\n\r\n  :host([disabled]) .label-text {\r\n    color: var(--diwa-text-muted);\r\n  }\r\n\r\n  ${getReducedMotionStyle('input[type=\"radio\"]', '.input-container::after')}\r\n  `;\r\n};\r\n"]}
+{"version":3,"file":"diwa-radio-group-item-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-radio-group-item/diwa-radio-group-item-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE1E,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,OAAgB,EAChB,QAAiB,EACjB,OAAgB,EACR,EAAE;IACV,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1C,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAExC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;aAyBI,OAAO;cACN,OAAO;;;;;;;;;;;;;;oDAc+B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB;kBACvF,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa;;;;;;;;;IAS5D,aAAa,CAAC,qBAAqB,CAAC;;;;;;;;;aAS3B,OAAO;cACN,OAAO;;;eAGN,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;;;;;;;;;;;;;;;IAgB9B,qBAAqB,CAAC,qBAAqB,EAAE,yBAAyB,CAAC;GACxE,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (\r\n  checked: boolean,\r\n  disabled: boolean,\r\n  compact: boolean,\r\n): string => {\r\n  const boxSize = compact ? '14px' : '18px';\r\n  const dotSize = compact ? '6px' : '8px';\r\n\r\n  return `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .wrapper {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    cursor: pointer;\r\n  }\r\n\r\n  :host([disabled]) .wrapper {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  .input-container {\r\n    position: relative;\r\n    flex-shrink: 0;\r\n    width: ${boxSize};\r\n    height: ${boxSize};\r\n  }\r\n\r\n  input[type=\"radio\"] {\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n    border-radius: 50%;\r\n    border: var(--diwa-border-width-medium) solid ${checked ? 'var(--diwa-accent)' : 'var(--diwa-border)'};\r\n    background: ${checked ? 'var(--diwa-accent)' : 'transparent'};\r\n    transition: border-color var(--diwa-transition-base), background var(--diwa-transition-base);\r\n  }\r\n\r\n  input[type=\"radio\"]:disabled {\r\n    cursor: not-allowed;\r\n    opacity: 0.4;\r\n  }\r\n\r\n  ${getFocusStyle('input[type=\"radio\"]')}\r\n\r\n  /* Dot indicator when checked */\r\n  .input-container::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: ${dotSize};\r\n    height: ${dotSize};\r\n    border-radius: 50%;\r\n    background: var(--diwa-text-on-accent, #fff);\r\n    opacity: ${checked ? '1' : '0'};\r\n    pointer-events: none;\r\n    transition: opacity var(--diwa-transition-base);\r\n  }\r\n\r\n  .label-text {\r\n    font-size: var(--diwa-font-size-base);\r\n    color: var(--diwa-text-primary);\r\n    line-height: 1.5;\r\n    user-select: none;\r\n  }\r\n\r\n  :host([disabled]) .label-text {\r\n    color: var(--diwa-text-muted);\r\n  }\r\n\r\n  ${getReducedMotionStyle('input[type=\"radio\"]', '.input-container::after')}\r\n  `;\r\n};\r\n"]}

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

@@ -39,7 +39,7 @@ export class DiwaRadioGroupItem {
     }
     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' })))));
+        return (h(Host, { key: 'd8bc41d5cf9885195ca2e1579aa74abcf93c9fb2' }, h("style", { key: 'b303d2b29a49f4445eaed221470ccb6bd1020150', innerHTML: getComponentCss(this.checked, this.disabled, this.compact) }), h("label", { key: 'd2a931fd4754cb93c02dcc833a5f08fa1ce5f1ea', class: "wrapper" }, h("span", { key: '237f63b74e3aa3be54cdfc1f8027b819b93c8276', class: "input-container" }, h("input", { key: '37e09b73b7d904847fa8e4194a97309e9e07a4de', 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: '85a9799f4ac065d7d8167b44a0dc3d667511730d', class: "label-text" }, h("slot", { key: '8fda0f7afd5dbffee2047668f1245439c4650b3e' })))));
     }
     static get is() { return "diwa-radio-group-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ const ALIGN_MAP = {
     center: 'center',
     bottom: 'flex-end',
 };
-export const getComponentCss = (scrollbar, alignScrollIndicator, hasOverflow) => {
+export const getComponentCss = (scrollbar, alignScrollIndicator, hasOverflow, canScrollLeft, canScrollRight) => {
     const alignItems = ALIGN_MAP[alignScrollIndicator];
     return `
     :host {
@@ -47,9 +47,14 @@ export 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;
@@ -65,25 +70,25 @@ export 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'};
     }
   `;
 };

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

@@ -1 +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"]}
+{"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,EACpB,aAAsB,EACtB,cAAuB,EACf,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;MAC/B,aAAa,CAAC,cAAc,CAAC;;;;;;;;qBAQd,UAAU;;;;;QAKvB,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB;;;;;MAK3C,CAAC,SAAS,CAAC,CAAC,CAAC;;;;KAId,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;iBAcO,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;;;;iBAKzB,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;GAExC,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  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"]}

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

@@ -34,11 +34,16 @@ export class DiwaScroller {
             });
         };
     }
-    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;
@@ -52,7 +57,7 @@ export class DiwaScroller {
         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" }))))));
     }
     static get is() { return "diwa-scroller"; }
     static get encapsulation() { return "shadow"; }
@@ -139,14 +144,5 @@ export class DiwaScroller {
             "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

@@ -1 +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"]}
+{"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, 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"]}

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

@@ -45,7 +45,7 @@ export class DiwaSegmentedControl {
         });
     }
     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' }))));
     }
     static get is() { return "diwa-segmented-control"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class DiwaSegmentedControlItem {
         };
     }
     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 is() { return "diwa-segmented-control-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -149,6 +149,9 @@ export class DiwaSelect {
     onThemeChange() {
         this.syncChildThemes();
     }
+    onCompactChange() {
+        this.syncChildCompact();
+    }
     onValueChange() {
         this.syncSelectionFromValue();
     }
@@ -182,6 +185,7 @@ export class DiwaSelect {
         this.collectOptions();
         this.syncSelectionFromValue();
         this.syncChildThemes();
+        this.syncChildCompact();
     }
     // ──────────────────────────────────────────────────────────────
     // Public methods
@@ -213,6 +217,7 @@ export class DiwaSelect {
         this.collectOptions();
         this.syncSelectionFromValue();
         this.syncChildThemes();
+        this.syncChildCompact();
     }
     // ──────────────────────────────────────────────────────────────
     // Private helpers
@@ -237,6 +242,14 @@ export class DiwaSelect {
             }
         }
     }
+    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');
     }
@@ -293,7 +306,7 @@ export class DiwaSelect {
         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 is() { return "diwa-select"; }
     static get encapsulation() { return "shadow"; }
@@ -666,6 +679,9 @@ export class DiwaSelect {
         return [{
                 "propName": "theme",
                 "methodName": "onThemeChange"
+            }, {
+                "propName": "compact",
+                "methodName": "onCompactChange"
             }, {
                 "propName": "value",
                 "methodName": "onValueChange"