@uh-design-system/component-library 0.7.1 → 0.7.2-rc.1

package/dist/types/stencil-public-runtime.d.ts

@@ -846,7 +846,7 @@ export declare namespace JSXBase {
     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
         open?: boolean;
         name?: string;
-        onToggle?: (event: Event) => void;
+        onToggle?: (event: ToggleEvent) => void;
     }
     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
         cite?: string;
@@ -1552,6 +1552,13 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
+    interface ToggleEvent extends Event {
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
+        readonly newState: string;
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
+        readonly oldState: string;
+    }
     interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
@@ -1568,6 +1575,10 @@ export declare namespace JSXBase {
         onCompositionstartCapture?: (event: CompositionEvent) => void;
         onCompositionupdate?: (event: CompositionEvent) => void;
         onCompositionupdateCapture?: (event: CompositionEvent) => void;
+        onBeforeToggle?: (event: ToggleEvent) => void;
+        onBeforeToggleCapture?: (event: ToggleEvent) => void;
+        onToggle?: (event: ToggleEvent) => void;
+        onToggleCapture?: (event: ToggleEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1586,10 +1597,6 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
-        onBeforeToggle?: (event: Event) => void;
-        onBeforeToggleCapture?: (event: Event) => void;
-        onToggle?: (event: Event) => void;
-        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;

package/dist/types/utils/controls/controlUtils.d.ts

@@ -26,4 +26,11 @@ export declare const getOptionalText: (text: string, optionalText?: string) => s
 export declare const getRequiredText: (text: string) => string;
 export declare const atLeastOneOption: () => "Valitse vähintään yksi vaihtoehto." | "Välj minst ett alternativ." | "Select at least one option.";
 export declare const allOptions: () => "Valitse kaikki vaihtoehdot." | "Välj alla alternativ." | "Select all options.";
-export declare const removeSelection: () => "poista valinta" | "ta bort val" | "remove selection";
+export declare const removeSelection: (capitalizeFirstLetter?: boolean) => string;
+export declare const weCouldNotLoadOptions: () => "Emme voineet ladata vaihtoehtoja." | "Vi kunde inte ladda alternativen." | "We could not load options.";
+export declare const tryAgainOrIfTheProblemPersists: () => "Yritä uudelleen tai jos ongelma jatkuu, ota yhteyttä ylläpitoon." | "Försök igen eller om problemet kvarstår, kontakta supporten." | "Try again or if the problem persists, contact support.";
+export declare const loadingOptions: () => "Ladataan vaihtoehtoja..." | "Laddar alternativ..." | "Loading options...";
+export declare const searchOrSelectAnOption: () => "Kirjoita tai valitse..." | "Sök eller välj..." | "Search or select...";
+export declare const noResultsFound: (searchTerm?: string) => string;
+export declare const tryADifferentSearchTerm: () => "Kokeile toista hakusanaa." | "Prova ett annat sökord." | "Try a different search term.";
+export declare const thereAreOptionsToBrowse: () => "Vaihtoehtoja on selattavissa." | "Det finns alternativ att bläddra i." | "There are options to browse.";

package/dist/types/utils/utils.d.ts

@@ -19,3 +19,10 @@ export declare const debounce: (func: Function, wait?: number, immediate?: boole
 export declare const throttle: (func: Function, timeFrame?: number) => (...args: unknown[]) => void;
 export declare const transformTagName: <T extends keyof JSX.IntrinsicElements>(tagToBeTransformed: T, knownUntransformedTag: keyof JSX.IntrinsicElements, knownUntransformedTagElementReference: HTMLElement) => T;
 export declare const declareComponentDependencies: (t: (JSX.IntrinsicElements)[]) => boolean;
+export declare const getCssVariablesFromStyleSheet: (categories: Record<string, string>) => {
+    name: string;
+    variable: string;
+    value: string;
+    category: string;
+}[];
+export declare const arrayGroupBy: <T, K extends keyof T>(arr: T[], key: K) => Record<string | number | symbol, T[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "0.7.1",
+  "version": "0.7.2-rc.1",
   "publishConfig": {
     "access": "public"
   },
@@ -44,7 +44,7 @@
   ],
   "scripts": {
     "build": "run-s stencil.build storybook.build styles.build",
-    "develop": "SKIP_REACT_OUTPUT=y run-p stencil.build:watch storybook.dev",
+    "develop": "cross-env SKIP_REACT_OUTPUT=y run-p stencil.build:watch storybook.dev",
     "icons.generate": "ts-node ./scripts/generate-icons.ts",
     "lint": "run-p eslint.lint stylelint.lint",
     "eslint.lint": "eslint --ext .ts,.tsx,.js,.jsx ./src",
@@ -65,10 +65,10 @@
     "@chromatic-com/storybook": "^3.2.7",
     "@material-symbols/svg-700": "^0.30.0",
     "@pxtrn/storybook-addon-docs-stencil": "^8.0.0",
-    "@stencil/core": "^4.35.1",
-    "@stencil/react-output-target": "^1.1.0",
-    "@stencil/sass": "^3.2.1",
-    "@stencil/store": "^2.1.3",
+    "@stencil/core": "^4.36.2",
+    "@stencil/react-output-target": "^1.2.0",
+    "@stencil/sass": "^3.2.2",
+    "@stencil/store": "^2.2.0",
     "@storybook/addon-a11y": "^8.6.14",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
@@ -83,14 +83,15 @@
     "@storybook/web-components": "^8.4.5",
     "@storybook/web-components-webpack5": "^8.6.14",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.15.32",
+    "@types/node": "^22.17.0",
     "axe-playwright": "^2.1.0",
     "classnames": "^2.5.1",
+    "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-image-snapshot": "^6.5.1",
-    "lit": "^3.3.0",
+    "lit": "^3.3.1",
     "npm-run-all": "^4.1.5",
     "raw-loader": "^4.0.2",
     "sass": "^1.89.2",
@@ -103,5 +104,5 @@
     "ts-node": "^10.9.2"
   },
   "license": "MIT",
-  "gitHead": "48708a2bceb7f26f8e4cdc2a6cc373db02cbf25a"
+  "gitHead": "6cd78898c184c6fc40153ebc05caf016173152eb"
 }

package/dist/cjs/ds-option_4.cjs.entry.js

@@ -1,512 +0,0 @@
-'use strict';
-
-var index = require('./index-DgPeuNJP.js');
-var utils = require('./utils-CQYRBA7R.js');
-var index$1 = require('./index-Bp6Dd2i1.js');
-
-const dsOptionCss = ".sc-ds-option:root,.sc-ds-option-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.option.sc-ds-option{display:flex;align-items:center;justify-content:space-between;min-height:2.5rem;padding:0.625rem var(--ds-spacing-small);position:relative;cursor:pointer;background-color:var(--ds-palette-white);color:var(--ds-palette-black-95)}.option.sc-ds-option:hover{background-color:var(--ds-palette-black-10)}.option.sc-ds-option:active{background-color:var(--ds-palette-black-20)}.option.active.sc-ds-option{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 1)}.option.selected.sc-ds-option{background-color:var(--ds-palette-mainBlue-70);color:var(--ds-palette-white)}.option.selected.sc-ds-option .check-icon.sc-ds-option{visibility:visible;color:var(--ds-palette-white)}.option.selected.sc-ds-option:hover{background-color:var(--ds-palette-mainBlue-80)}.option.selected.sc-ds-option:active{background-color:var(--ds-palette-mainBlue-90)}.option.sc-ds-option .option-label.sc-ds-option{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;grid-column:1;grid-row:1}.option.sc-ds-option .check-icon.sc-ds-option{grid-column:2;grid-row:1/span 2;align-self:center;justify-self:end;margin-left:auto;visibility:hidden}.option.sc-ds-option .option-description.sc-ds-option{color:var(--ds-palette-black-70);font-size:var(--ds-fontSize-14);margin-top:var(--ds-spacing-3xSmall);line-height:1.3;grid-column:1;grid-row:2}.option.sc-ds-option .option-description.sc-ds-option:not(:empty){display:block}.option.selected.sc-ds-option .option-description.sc-ds-option{color:var(--ds-palette-white)}.option.sc-ds-option .option-check.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}";
-
-const DsOption = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    dsValue;
-    dsDisabled = false;
-    dsDescription;
-    dsActive = false;
-    dsSelected = false;
-    internalTabIndex = -1;
-    optionRef;
-    dsActiveObserver(newValue) {
-        this.internalTabIndex = newValue && !this.dsDisabled ? 0 : -1;
-        if (newValue && !this.dsDisabled) {
-            this.dsFocus();
-        }
-    }
-    async dsFocus() {
-        this.optionRef?.focus();
-    }
-    componentWillLoad() {
-        this.internalTabIndex = this.dsActive && !this.dsDisabled ? 0 : -1;
-    }
-    render() {
-        const DsIcon = utils.transformTagName('ds-icon', 'ds-option', this.el);
-        return (index.h("div", { key: 'b051e2ccd61a02f1c33e5c74f7f66dec856e1d04', ref: el => this.optionRef = el, class: {
-                option: true,
-                active: this.dsActive,
-                selected: this.dsSelected,
-                disabled: this.dsDisabled,
-            }, role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), tabIndex: this.internalTabIndex }, index.h("span", { key: '8114317ed212116893f288753be27bc57487218c', class: "option-label" }, index.h("slot", { key: 'edc1ae43b1d32fd4d145e6f5c5bb296202e4f6bf' }), this.dsDescription && index.h("span", { key: '7a250b046d95c7bd74d742029100d7aed9a0b032', class: "option-description" }, this.dsDescription)), this.dsSelected && (index.h(DsIcon, { key: '23432b9e3f29189c6030003e61c02be9469a8a2e', dsName: "check", class: "option-check", "aria-hidden": "true" }))));
-    }
-    static get watchers() { return {
-        "dsActive": ["dsActiveObserver"]
-    }; }
-};
-utils.declareComponentDependencies([index.h("ds-icon", null)]);
-DsOption.style = dsOptionCss;
-
-const dsOptionGroupCss = ".group.sc-ds-option-group ul.sc-ds-option-group{padding:0}.group-label.sc-ds-option-group{position:sticky;display:block;top:0;background-color:var(--ds-palette-black-03);z-index:1;padding:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.group-label.shadow.sc-ds-option-group{box-shadow:0 -2px 7px var(--ds-overlay-black-50)}";
-
-const DsOptionGroup = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    dsLabel;
-    groupId;
-    dsLabelObserver(newValue) {
-        this.groupId = `ds-option-group-label-${newValue.replace(/\s+/g, '-').toLowerCase()}`;
-    }
-    componentWillLoad() {
-        this.groupId = `ds-option-group-label-${this.dsLabel.replace(/\s+/g, '-').toLowerCase()}`;
-    }
-    render() {
-        return (index.h("div", { key: 'c764a70cf7cd2881404ea90b114957227259d37c', class: "group", role: "group", "aria-labelledby": this.groupId }, index.h("div", { key: '6a38a5db89ff8462704c740a7921e40312a9f466', class: "group-label", id: this.groupId }, this.dsLabel), index.h("slot", { key: 'b6bac535b5c569175f9fb84550d823829208142b' })));
-    }
-    static get watchers() { return {
-        "dsLabel": ["dsLabelObserver"]
-    }; }
-};
-DsOptionGroup.style = dsOptionGroupCss;
-
-const dsOptionsCss = ".options-list-inner.sc-ds-options,.options-loading.sc-ds-options,.options-error.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.options-list.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0}.options-list.sc-ds-options:focus{outline:none}.options-list-inner.sc-ds-options,.options-loading.sc-ds-options,.options-error.sc-ds-options{overflow-y:auto;list-style-type:none;padding:0;margin:0;width:100%;position:relative;display:flex;flex-direction:column}.options-loading.sc-ds-options,.options-error.sc-ds-options{height:18.5rem;align-items:center;justify-content:center}.options-loading--loading-text.sc-ds-options{padding-top:var(--ds-spacing-2xSmall);padding-bottom:var(--ds-spacing-large);text-align:center}.options-error.sc-ds-options{color:var(--ds-palette-red-70)}.options-error--error-message.sc-ds-options{color:var(--ds-palette-black-95);text-align:center}.options-error--error-title.sc-ds-options{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.options-error--error-text.sc-ds-options{padding-bottom:var(--ds-spacing-small)}.top-scrim.sc-ds-options,.bottom-scrim.sc-ds-options{pointer-events:none;width:100%;height:2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.top-scrim.sc-ds-options{top:0;background:linear-gradient(to bottom, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%)}.bottom-scrim.sc-ds-options{bottom:0;background:linear-gradient(to top, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%)}.options-list.has-top-scrim.sc-ds-options .top-scrim.sc-ds-options{display:block}.options-list.has-bottom-scrim.sc-ds-options .bottom-scrim.sc-ds-options{display:block}li.sc-ds-options{cursor:pointer}li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}";
-
-const DsOptions = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dsOptionsEsc = index.createEvent(this, "dsOptionsEsc");
-        this.dsOptionsActiveIndexChange = index.createEvent(this, "dsOptionsActiveIndexChange");
-    }
-    get el() { return index.getElement(this); }
-    optionsListRef;
-    optionsListInnerRef;
-    dsSelectedValue;
-    dsOptions = [];
-    dsActiveIndex = 0;
-    dsLabelId;
-    dsLoading = false;
-    dsLoadingText = 'Loading options...';
-    dsOptionsEsc;
-    dsOptionsActiveIndexChange;
-    onActiveIndexChange() {
-        setTimeout(() => this.focusActiveOption(), 0);
-    }
-    componentDidLoad() {
-        this.updateScrimClasses();
-    }
-    componentDidUpdate() {
-        this.updateScrimClasses();
-    }
-    handleScroll = () => {
-        this.updateScrimClasses();
-    };
-    updateScrimClasses = () => {
-        const wrapper = this.optionsListRef;
-        const scrollEl = this.optionsListInnerRef;
-        if (!wrapper || !scrollEl)
-            return;
-        const isAtTop = scrollEl.scrollTop === 0;
-        const isAtBottom = Math.ceil(scrollEl.scrollTop + scrollEl.clientHeight) >= scrollEl.scrollHeight;
-        wrapper.classList.toggle('has-top-scrim', !isAtTop);
-        wrapper.classList.toggle('has-bottom-scrim', !isAtBottom);
-        const groupLabels = wrapper.querySelectorAll('.group-label');
-        groupLabels.forEach(label => {
-            const rect = label.getBoundingClientRect();
-            const parentRect = wrapper.getBoundingClientRect();
-            if (scrollEl.scrollTop > 0 && rect.top <= parentRect.top && rect.bottom > parentRect.top) {
-                label.classList.add('shadow');
-            }
-            else {
-                label.classList.remove('shadow');
-            }
-        });
-    };
-    get DsOptionTag() {
-        return utils.transformTagName('ds-option', 'ds-options', this.el);
-    }
-    focusActiveOption() {
-        const optionEls = Array.from(this.el.querySelectorAll(this.DsOptionTag));
-        if (optionEls[this.dsActiveIndex]) {
-            optionEls[this.dsActiveIndex].focus();
-        }
-    }
-    handleKeyDown = (e) => {
-        const optionEls = Array.from(this.el.querySelectorAll(this.DsOptionTag));
-        if (!optionEls.length)
-            return;
-        let nextIndex = this.dsActiveIndex;
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            let safe = 0;
-            do {
-                nextIndex = (nextIndex + 1) % optionEls.length;
-                safe++;
-                if (safe > optionEls.length * 2)
-                    break;
-            } while (optionEls[nextIndex].dsDisabled && nextIndex !== this.dsActiveIndex);
-            this.dsActiveIndex = nextIndex;
-            this.dsOptionsActiveIndexChange.emit(this.dsActiveIndex);
-        }
-        if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            let safe = 0;
-            do {
-                nextIndex = (nextIndex - 1 + optionEls.length) % optionEls.length;
-                safe++;
-                if (safe > optionEls.length * 2)
-                    break;
-            } while (optionEls[nextIndex].dsDisabled && nextIndex !== this.dsActiveIndex);
-            this.dsActiveIndex = nextIndex;
-            this.dsOptionsActiveIndexChange.emit(this.dsActiveIndex);
-        }
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            const option = optionEls[this.dsActiveIndex];
-            if (option && !option.dsDisabled) {
-                option.click();
-            }
-        }
-        if (e.key === 'Tab') {
-            const option = optionEls[this.dsActiveIndex];
-            if (option && !option.dsDisabled) {
-                option.click();
-                this.dsOptionsEsc.emit();
-            }
-        }
-        if (e.key === 'Escape') {
-            e.preventDefault();
-            this.dsOptionsEsc.emit();
-        }
-    };
-    dsOptionsError = false;
-    dsOptionsErrorTitle = "We couldn’t load the options";
-    dsOptionsErrorText = "Try again or if the problem persists contact support.";
-    render() {
-        const DsIcon = utils.transformTagName('ds-icon', 'ds-options', this.el);
-        const DsSpinner = utils.transformTagName('ds-spinner', 'ds-options', this.el);
-        return (index.h("div", { key: '656aaa2ab4989958bf7d33914df5f082c91f7477', class: "options-list", role: "listbox", tabindex: 0, "aria-labelledby": this.dsLabelId, onKeyDown: this.handleKeyDown, ref: el => this.optionsListRef = el, onScroll: this.handleScroll, onFocus: this.updateScrimClasses }, index.h("slot", { key: '9aaef6b026ca0b5d8c7264ee69457df801fbdc19', name: "groups" }), index.h("div", { key: '399b0989af2d6cd0eadc10e18b10e2dac2e0f976', class: "options-list-inner", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, index.h("div", { key: '5eabc020be41e0fb2afcdb5c4e2cb3519212ac00', class: "top-scrim", "aria-hidden": "true" }), this.dsOptionsError ? (index.h("div", { class: "options-error" }, index.h(DsIcon, { dsName: "warning", dsSize: '2rem', class: "options-error-icon" }), index.h("div", { class: "options-error--error-message" }, index.h("div", { class: "options-error--error-title" }, this.dsOptionsErrorTitle), index.h("div", { class: "options-error--error-text" }, this.dsOptionsErrorText)))) : this.dsLoading ? (index.h("div", { class: "options-loading" }, index.h(DsSpinner, { dsSize: "large" }), index.h("div", { class: "options-loading--loading-text" }, this.dsLoadingText))) : (index.h("slot", null)), index.h("div", { key: 'a3180baebc60c132bd328e10fa77a554642a9d22', class: "bottom-scrim", "aria-hidden": "true" }))));
-    }
-    static get watchers() { return {
-        "dsActiveIndex": ["onActiveIndexChange"]
-    }; }
-};
-utils.declareComponentDependencies([index.h("ds-icon", null), index.h("ds-spinner", null)]);
-DsOptions.style = dsOptionsCss;
-
-const dsSelectCss = ".sc-ds-select:root,.sc-ds-select-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.native-select-wrapper.sc-ds-select,.custom-select.sc-ds-select{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-palette-black-50);background-color:var(--ds-palette-white);color:var(--ds-palette-black-70);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.disabled.native-select-wrapper.sc-ds-select,.disabled.custom-select.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.disabled.native-select-wrapper.sc-ds-select .dropdown-icon.sc-ds-select,.disabled.custom-select.sc-ds-select .dropdown-icon.sc-ds-select{color:var(--ds-palette-black-40);border-left-color:var(--ds-overlay-black-15);cursor:not-allowed}.invalid.native-select-wrapper.sc-ds-select,.invalid.custom-select.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.invalid.native-select-wrapper.sc-ds-select:not(.open):not(.disabled):active,.invalid.custom-select.sc-ds-select:not(.open):not(.disabled):active{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.native-select-wrapper.sc-ds-select:not(.open):not(.invalid):not(.disabled):hover,.custom-select.sc-ds-select:not(.open):not(.invalid):not(.disabled):hover{background-color:var(--ds-palette-black-10)}.custom-select.sc-ds-select .selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall)}.custom-select.sc-ds-select .placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.custom-select--open.sc-ds-select+.options-container.sc-ds-select{display:block;box-shadow:0rem var(--ds-spacing-4xSmall) var(--ds-spacing-3xSmall) calc(-1 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15), 0rem var(--ds-spacing-3xSmall) calc(var(--ds-spacing-xSmall) / 2) calc(-0.5 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15)}.custom-select--open.sc-ds-select .options-list.sc-ds-select{display:block}.custom-select.sc-ds-select:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled):hover{background-color:var(--ds-palette-black-10)}.custom-select.sc-ds-select:active:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled){background-color:var(--ds-palette-black-20)}.custom-select--open.sc-ds-select,.custom-select.sc-ds-select:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.custom-select--open.sc-ds-select:not(.custom-select--open--invalid,.custom-select.sc-ds-select:focus-visible--invalid),.custom-select.sc-ds-select:focus-visible:not(.custom-select--open--invalid,.custom-select.sc-ds-select:focus-visible--invalid){border-color:var(--ds-palette-mainBlue-70)}.custom-select--disabled.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.custom-select--disabled.sc-ds-select .dropdown-icon.sc-ds-select{color:var(--ds-palette-black-40);border-left-color:var(--ds-overlay-black-15);cursor:not-allowed}.custom-select--invalid.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.custom-select--invalid.sc-ds-select:not(.custom-select--invalid--open):not(.custom-select--invalid--disabled):active{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.selected-option.sc-ds-select{flex:1;font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.custom-select--has-icon.sc-ds-select .selected-option.sc-ds-select{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.dropdown-icon.sc-ds-select{align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-overlay-black-15);color:var(--ds-palette-black-70);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.clear-button.sc-ds-select,.dropdown-icon.sc-ds-select{cursor:pointer}.select-title.sc-ds-select{display:inline-block;font-weight:var(--ds-fontWeight-semibold);margin-bottom:var(--ds-spacing-2xSmall);color:var(--ds-palette-black-95)}.selected-text.sc-ds-select{flex:1;padding:0 var(--ds-spacing-xSmall);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.options-container.sc-ds-select{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);background-color:var(--ds-palette-white)}.native-select.sc-ds-select{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;outline:none;padding:0 var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-16);font-family:inherit;background-color:transparent;color:inherit;flex:1}.native-select.sc-ds-select::placeholder{color:var(--ds-palette-black-70)}.native-select.sc-ds-select:disabled{background-color:var(--ds-overlay-black-10);color:var(--ds-palette-black-40);cursor:not-allowed}.native-select-wrapper.sc-ds-select:hover{background-color:var(--ds-palette-black-10)}.native-select-wrapper.sc-ds-select:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.native-select-wrapper--disabled.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.native-select-wrapper--invalid.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}";
-
-const selectIdGenerator = utils.idGenerator('ds-select');
-const DsSelect = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dsChange = index.createEvent(this, "dsChange");
-    }
-    get el() { return index.getElement(this); }
-    dsId = selectIdGenerator.next().value;
-    dsTitle = 'Default Select';
-    dsPlaceholder = 'Select an option';
-    dsVariant = 'default';
-    dsClearable = true;
-    dsDisabled = false;
-    dsInvalid = false;
-    dsErrorText = '';
-    dsIcon;
-    dsValue = null;
-    dsLoading = false;
-    dsLoadingText = 'Loading options...';
-    dsOptionsError = false;
-    dsOptionsErrorTitle = "We couldn’t load the options";
-    dsOptionsErrorText = "Try again or if the problem persists contact support.";
-    selectedOption = null;
-    isOpen = false;
-    activeIndex = null;
-    inputValidityId = `${this.dsId}-validity`;
-    dsChange;
-    connectedCallback() {
-        this.el.addEventListener('focusout', this.handleFocusOut);
-    }
-    disconnectedCallback() {
-        this.el.removeEventListener('focusout', this.handleFocusOut);
-    }
-    get DsIconTag() {
-        return utils.transformTagName('ds-icon', 'ds-select', this.el);
-    }
-    get DsInputValidityTag() {
-        return utils.transformTagName('ds-input-validity', 'ds-select', this.el);
-    }
-    get DsOptionTag() {
-        return utils.transformTagName('ds-option', 'ds-select', this.el);
-    }
-    customSelectRef;
-    nativeSelectRef;
-    handleFocusOut = (e) => {
-        const nextFocused = (e && 'relatedTarget' in e) ? e.relatedTarget : null;
-        if (this.isOpen &&
-            (!nextFocused || !this.el.contains(nextFocused))) {
-            this.isOpen = false;
-        }
-    };
-    handleOptionSelect(option) {
-        if (this.dsDisabled)
-            return;
-        this.selectedOption = option.label;
-        this.dsValue = option.dsValue;
-        this.isOpen = false;
-        this.dsChange.emit(option.dsValue);
-    }
-    selectOption(option) {
-        if (!option)
-            return;
-        if (option.dsDisabled)
-            return;
-        const labelEl = option.querySelector('.option-label');
-        let label = '';
-        if (labelEl) {
-            const descEl = labelEl.querySelector('.option-description');
-            if (descEl) {
-                label = labelEl.textContent?.replace(descEl.textContent || '', '').trim() || '';
-            }
-            else {
-                label = labelEl.textContent?.trim() || '';
-            }
-        }
-        else {
-            label = option.textContent?.trim() || '';
-        }
-        this.selectedOption = label;
-        this.dsValue = option.dsValue;
-        const options = this.getAllOptions();
-        const idx = options.findIndex(opt => String(opt.dsValue) === String(option.dsValue));
-        if (idx !== -1) {
-            this.activeIndex = idx;
-        }
-        this.isOpen = false;
-        this.dsChange.emit(option.dsValue);
-        const combobox = this.el.querySelector(`[id="${this.dsId}"]`);
-        combobox?.focus();
-    }
-    toggleDropdown() {
-        if (this.dsDisabled)
-            return;
-        this.isOpen = !this.isOpen;
-        if (this.isOpen) {
-            setTimeout(() => {
-                const options = this.getAllOptions();
-                let focusIndex = 0;
-                if (this.dsValue) {
-                    const selectedIndex = options.findIndex(opt => String(opt.dsValue) === String(this.dsValue));
-                    focusIndex = selectedIndex !== -1 ? selectedIndex : 0;
-                }
-                else {
-                    const firstEnabled = options.findIndex(opt => !opt.dsDisabled);
-                    focusIndex = firstEnabled !== -1 ? firstEnabled : 0;
-                }
-                this.activeIndex = focusIndex;
-                this.scrollToActiveOption();
-                const optionEls = this.el.querySelectorAll(this.DsOptionTag);
-                const active = optionEls[this.activeIndex];
-                active?.focus();
-            }, 0);
-        }
-    }
-    handleClearSelection() {
-        if (this.dsDisabled)
-            return;
-        this.selectedOption = null;
-        this.dsValue = null;
-        const options = this.getAllOptions();
-        const firstEnabled = options.findIndex(opt => !opt.dsDisabled);
-        this.activeIndex = firstEnabled !== -1 ? firstEnabled : 0;
-        this.isOpen = false;
-        this.dsChange.emit(null);
-        const combobox = this.el.querySelector(`[id="${this.dsId}"]`);
-        combobox?.focus();
-    }
-    handleScroll(event) {
-        const target = event.target;
-        const isScrolledToTop = target.scrollTop === 0;
-        const isScrolledToBottom = Math.ceil(target.scrollTop + target.clientHeight) >= target.scrollHeight;
-        if (isScrolledToTop) {
-            target.classList.remove('scrolled-up');
-        }
-        else {
-            target.classList.add('scrolled-up');
-        }
-        if (isScrolledToBottom) {
-            target.classList.remove('scrolled-down');
-        }
-        else {
-            target.classList.add('scrolled-down');
-        }
-        const groups = target.querySelectorAll('.group');
-        groups.forEach((group) => {
-            const firstOption = group.querySelector('.option');
-            const groupLabel = group.querySelector('.group-label');
-            if (!firstOption || !groupLabel)
-                return;
-            const firstOptionTop = firstOption.getBoundingClientRect().top;
-            const groupLabelBottom = groupLabel.getBoundingClientRect().bottom;
-            const containerTop = target.getBoundingClientRect().top;
-            if (firstOptionTop < groupLabelBottom && containerTop < groupLabelBottom) {
-                groupLabel.classList.add('shadow');
-                firstOption.style.marginTop = `${groupLabelBottom - firstOptionTop}px`;
-            }
-            else {
-                groupLabel.classList.remove('shadow');
-                firstOption.style.marginTop = '';
-            }
-        });
-    }
-    handleKeyDown(event) {
-        if (this.isOpen) {
-            return;
-        }
-        if (event.key === 'ArrowDown' ||
-            event.key === 'ArrowUp' ||
-            event.key === 'Enter' ||
-            event.key === ' ') {
-            event.preventDefault();
-            this.isOpen = true;
-            const options = this.getAllOptions();
-            let focusIndex = 0;
-            if (this.dsValue) {
-                const selectedIndex = options.findIndex(opt => String(opt.dsValue) === String(this.dsValue));
-                focusIndex = selectedIndex !== -1 ? selectedIndex : 0;
-            }
-            else {
-                const firstEnabled = options.findIndex(opt => !opt.dsDisabled);
-                focusIndex = firstEnabled !== -1 ? firstEnabled : 0;
-            }
-            this.activeIndex = focusIndex;
-            this.scrollToActiveOption();
-            setTimeout(() => {
-                const optionsList = this.el.querySelector('.options-list');
-                optionsList?.focus();
-            }, 0);
-        }
-    }
-    scrollToActiveOption() {
-        if (this.activeIndex === null)
-            return;
-        const optionsList = this.el.querySelector('.options-list');
-        const allOptions = optionsList?.querySelectorAll('.option');
-        if (!allOptions || this.activeIndex >= allOptions.length)
-            return;
-        const activeOption = allOptions[this.activeIndex];
-        if (activeOption) {
-            activeOption.focus();
-            activeOption.scrollIntoView({ block: 'nearest' });
-        }
-    }
-    getAllOptions() {
-        return Array.from(this.el.querySelectorAll(this.DsOptionTag));
-    }
-    handleStateChange() {
-        this.updateOptionStates();
-    }
-    updateOptionStates() {
-        const options = this.getAllOptions();
-        options.forEach((opt, idx) => {
-            opt.dsActive = idx === this.activeIndex;
-            opt.dsSelected = opt.dsValue === this.dsValue;
-            if (idx === this.activeIndex) {
-                opt.setAttribute('active', '');
-            }
-            else {
-                opt.removeAttribute('active');
-            }
-            if (opt.dsValue === this.dsValue) {
-                opt.setAttribute('selected', '');
-            }
-            else {
-                opt.removeAttribute('selected');
-            }
-        });
-    }
-    renderNativeSelect() {
-        const ariaDescribedBy = this.dsErrorText ? this.inputValidityId : undefined;
-        const selectId = this.dsId || `${this.inputValidityId}-select`;
-        const baseClass = 'native-select-wrapper';
-        return (index.h("div", null, this.dsTitle && index.h("label", { class: "select-title", htmlFor: selectId }, this.dsTitle), index.h("div", { class: index$1.classNames(`${baseClass}`, {
-                [`${baseClass}--disabled`]: this.dsDisabled,
-                [`${baseClass}--invalid`]: !!this.dsErrorText,
-            }), onClick: () => {
-                if (!this.dsDisabled) {
-                    const selectElement = this.nativeSelectRef;
-                    if (selectElement) {
-                        selectElement.focus();
-                        selectElement.click();
-                    }
-                }
-            } }, index.h("div", { class: "selected-text", "aria-hidden": "true" }, this.selectedOption || this.dsPlaceholder || 'Select an option'), index.h("select", { ref: el => this.nativeSelectRef = el, id: selectId, class: "native-select", disabled: this.dsDisabled, required: !!this.dsErrorText, "aria-describedby": ariaDescribedBy, "aria-controls": `${selectId}-listbox`, "aria-haspopup": "listbox", onInput: (event) => {
-                const target = event.target;
-                this.dsValue = target.value;
-                this.selectedOption = target.selectedOptions[0]?.textContent || '';
-                this.dsChange.emit(target.value);
-            } }, index.h("option", { value: "", disabled: true, selected: !this.selectedOption }, this.dsPlaceholder || 'Select an option'), index.h("slot", { name: "native" })), index.h(this.DsIconTag, { class: "dropdown-icon", dsName: "keyboard_arrow_down" })), !!this.dsErrorText && (index.h(this.DsInputValidityTag, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
-    }
-    renderCustomSelect() {
-        const noneSelected = !this.selectedOption;
-        const selectId = this.dsId || `${this.inputValidityId}-custom-select`;
-        const labelId = `${selectId}-label`;
-        const ariaDescribedBy = this.dsErrorText ? this.inputValidityId : undefined;
-        const optionsContainerId = `ds-select-options-${selectId}`;
-        const baseClass = 'custom-select';
-        const DsButton = utils.transformTagName('ds-button', 'ds-select', this.el);
-        const DsOptions = utils.transformTagName('ds-options', 'ds-select', this.el);
-        return (index.h("div", null, this.dsTitle && (index.h("div", { class: "select-title-wrapper" }, index.h("label", { id: labelId, class: "select-title", htmlFor: selectId, onClick: () => {
-                const customSelect = this.customSelectRef;
-                customSelect?.focus();
-                this.toggleDropdown();
-            } }, this.dsTitle))), index.h("div", { class: "custom-select-wrapper", style: { position: 'relative' } }, index.h("div", { id: selectId, ref: el => this.customSelectRef = el, class: index$1.classNames(`${baseClass}`, {
-                [`${baseClass}--open`]: this.isOpen,
-                [`${baseClass}--none-selected`]: noneSelected,
-                [`${baseClass}--disabled`]: this.dsDisabled,
-                [`${baseClass}--invalid`]: !!this.dsErrorText,
-                [`${baseClass}--has-icon`]: !!this.dsIcon,
-            }), tabIndex: this.dsDisabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-disabled": String(this.dsDisabled), "aria-labelledby": labelId, "aria-describedby": ariaDescribedBy, "aria-controls": optionsContainerId, "aria-activedescendant": this.activeIndex !== null ? `${selectId}-option-${this.activeIndex}` : undefined, onClick: () => {
-                if (!this.dsDisabled) {
-                    this.toggleDropdown();
-                }
-            }, onKeyDown: (event) => {
-                if (!this.dsDisabled) {
-                    this.handleKeyDown(event);
-                }
-            } }, index.h("div", { class: "selected-option" }, this.dsIcon && (index.h(this.DsIconTag, { class: "placeholder-icon", dsName: this.dsIcon })), this.selectedOption || this.dsPlaceholder || 'Select an option'), this.dsClearable && this.selectedOption && !this.dsDisabled && (index.h(DsButton, { class: "clear-button", dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", onClick: (event) => {
-                event.stopPropagation();
-                this.handleClearSelection();
-            }, onKeyDown: (event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.handleClearSelection();
-                }
-            }, "aria-label": "Clear selection" })), index.h(this.DsIconTag, { class: "dropdown-icon", dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), index.h("div", { id: optionsContainerId, class: "options-container", onClick: (e) => {
-                const option = e.target.closest(this.DsOptionTag);
-                if (option && !option.dsDisabled) {
-                    this.selectOption(option);
-                }
-            } }, index.h(DsOptions, { dsActiveIndex: this.activeIndex, onDsOptionsActiveIndexChange: e => this.activeIndex = e.detail, onDsOptionsEsc: () => { this.isOpen = false; }, dsLabelId: labelId, dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsOptionsError: this.dsOptionsError, dsOptionsErrorTitle: this.dsOptionsErrorTitle, dsOptionsErrorText: this.dsOptionsErrorText }, index.h("slot", null)))), !!this.dsErrorText && (index.h(this.DsInputValidityTag, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
-    }
-    render() {
-        return (index.h("div", { key: '4716b1f759f34fd18f9f776fec0c21dcb6f62c00', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
-            ? this.renderNativeSelect()
-            : this.renderCustomSelect()));
-    }
-    static get watchers() { return {
-        "activeIndex": ["handleStateChange"],
-        "dsValue": ["handleStateChange"]
-    }; }
-};
-utils.declareComponentDependencies([
-    index.h("ds-icon", null),
-    index.h("ds-input-validity", null),
-    index.h("ds-button", null),
-    index.h("ds-options", null)
-]);
-DsSelect.style = dsSelectCss;
-
-exports.ds_option = DsOption;
-exports.ds_option_group = DsOptionGroup;
-exports.ds_options = DsOptions;
-exports.ds_select = DsSelect;