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

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

@@ -1,507 +0,0 @@
-import { h, r as registerInstance, a as getElement, c as createEvent } from './index-CIXO9B7A.js';
-import { d as declareComponentDependencies, t as transformTagName, i as idGenerator } from './utils-hnAo1pVs.js';
-import { c as classNames } from './index-BfTCfPZ1.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) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return 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 = transformTagName('ds-icon', 'ds-option', this.el);
-        return (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 }, h("span", { key: '8114317ed212116893f288753be27bc57487218c', class: "option-label" }, h("slot", { key: 'edc1ae43b1d32fd4d145e6f5c5bb296202e4f6bf' }), this.dsDescription && h("span", { key: '7a250b046d95c7bd74d742029100d7aed9a0b032', class: "option-description" }, this.dsDescription)), this.dsSelected && (h(DsIcon, { key: '23432b9e3f29189c6030003e61c02be9469a8a2e', dsName: "check", class: "option-check", "aria-hidden": "true" }))));
-    }
-    static get watchers() { return {
-        "dsActive": ["dsActiveObserver"]
-    }; }
-};
-declareComponentDependencies([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) {
-        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 (h("div", { key: 'c764a70cf7cd2881404ea90b114957227259d37c', class: "group", role: "group", "aria-labelledby": this.groupId }, h("div", { key: '6a38a5db89ff8462704c740a7921e40312a9f466', class: "group-label", id: this.groupId }, this.dsLabel), 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) {
-        registerInstance(this, hostRef);
-        this.dsOptionsEsc = createEvent(this, "dsOptionsEsc");
-        this.dsOptionsActiveIndexChange = createEvent(this, "dsOptionsActiveIndexChange");
-    }
-    get el() { return 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 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 = transformTagName('ds-icon', 'ds-options', this.el);
-        const DsSpinner = transformTagName('ds-spinner', 'ds-options', this.el);
-        return (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 }, h("slot", { key: '9aaef6b026ca0b5d8c7264ee69457df801fbdc19', name: "groups" }), h("div", { key: '399b0989af2d6cd0eadc10e18b10e2dac2e0f976', class: "options-list-inner", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '5eabc020be41e0fb2afcdb5c4e2cb3519212ac00', class: "top-scrim", "aria-hidden": "true" }), this.dsOptionsError ? (h("div", { class: "options-error" }, h(DsIcon, { dsName: "warning", dsSize: '2rem', class: "options-error-icon" }), h("div", { class: "options-error--error-message" }, h("div", { class: "options-error--error-title" }, this.dsOptionsErrorTitle), h("div", { class: "options-error--error-text" }, this.dsOptionsErrorText)))) : this.dsLoading ? (h("div", { class: "options-loading" }, h(DsSpinner, { dsSize: "large" }), h("div", { class: "options-loading--loading-text" }, this.dsLoadingText))) : (h("slot", null)), h("div", { key: 'a3180baebc60c132bd328e10fa77a554642a9d22', class: "bottom-scrim", "aria-hidden": "true" }))));
-    }
-    static get watchers() { return {
-        "dsActiveIndex": ["onActiveIndexChange"]
-    }; }
-};
-declareComponentDependencies([h("ds-icon", null), 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 = idGenerator('ds-select');
-const DsSelect = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dsChange = createEvent(this, "dsChange");
-    }
-    get el() { return 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 transformTagName('ds-icon', 'ds-select', this.el);
-    }
-    get DsInputValidityTag() {
-        return transformTagName('ds-input-validity', 'ds-select', this.el);
-    }
-    get DsOptionTag() {
-        return 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 (h("div", null, this.dsTitle && h("label", { class: "select-title", htmlFor: selectId }, this.dsTitle), h("div", { class: classNames(`${baseClass}`, {
-                [`${baseClass}--disabled`]: this.dsDisabled,
-                [`${baseClass}--invalid`]: !!this.dsErrorText,
-            }), onClick: () => {
-                if (!this.dsDisabled) {
-                    const selectElement = this.nativeSelectRef;
-                    if (selectElement) {
-                        selectElement.focus();
-                        selectElement.click();
-                    }
-                }
-            } }, h("div", { class: "selected-text", "aria-hidden": "true" }, this.selectedOption || this.dsPlaceholder || 'Select an option'), 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);
-            } }, h("option", { value: "", disabled: true, selected: !this.selectedOption }, this.dsPlaceholder || 'Select an option'), h("slot", { name: "native" })), h(this.DsIconTag, { class: "dropdown-icon", dsName: "keyboard_arrow_down" })), !!this.dsErrorText && (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 = transformTagName('ds-button', 'ds-select', this.el);
-        const DsOptions = transformTagName('ds-options', 'ds-select', this.el);
-        return (h("div", null, this.dsTitle && (h("div", { class: "select-title-wrapper" }, h("label", { id: labelId, class: "select-title", htmlFor: selectId, onClick: () => {
-                const customSelect = this.customSelectRef;
-                customSelect?.focus();
-                this.toggleDropdown();
-            } }, this.dsTitle))), h("div", { class: "custom-select-wrapper", style: { position: 'relative' } }, h("div", { id: selectId, ref: el => this.customSelectRef = el, class: 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);
-                }
-            } }, h("div", { class: "selected-option" }, this.dsIcon && (h(this.DsIconTag, { class: "placeholder-icon", dsName: this.dsIcon })), this.selectedOption || this.dsPlaceholder || 'Select an option'), this.dsClearable && this.selectedOption && !this.dsDisabled && (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" })), h(this.DsIconTag, { class: "dropdown-icon", dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), h("div", { id: optionsContainerId, class: "options-container", onClick: (e) => {
-                const option = e.target.closest(this.DsOptionTag);
-                if (option && !option.dsDisabled) {
-                    this.selectOption(option);
-                }
-            } }, 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 }, h("slot", null)))), !!this.dsErrorText && (h(this.DsInputValidityTag, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
-    }
-    render() {
-        return (h("div", { key: '4716b1f759f34fd18f9f776fec0c21dcb6f62c00', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
-            ? this.renderNativeSelect()
-            : this.renderCustomSelect()));
-    }
-    static get watchers() { return {
-        "activeIndex": ["handleStateChange"],
-        "dsValue": ["handleStateChange"]
-    }; }
-};
-declareComponentDependencies([
-    h("ds-icon", null),
-    h("ds-input-validity", null),
-    h("ds-button", null),
-    h("ds-options", null)
-]);
-DsSelect.style = dsSelectCss;
-
-export { DsOption as ds_option, DsOptionGroup as ds_option_group, DsOptions as ds_options, DsSelect as ds_select };

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

@@ -1,12 +0,0 @@
-import './borderBox.scss';
-export declare const categories: {
-    '-borderWidth-': string;
-    '-borderRadius-': string;
-};
-export declare const getBorderVariables: () => any[];
-export declare const createBorderItem: (name: string, value: string) => HTMLDivElement;
-export declare const createBorderSection: (category: string, borders: {
-    name: string;
-    variable: string;
-    value: string;
-}[], renderedCategories: Set<string>) => HTMLDivElement;

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

@@ -1,11 +0,0 @@
-import './breakpointBox.scss';
-export declare const categories: {
-    '--ds-breakpoint-': string;
-};
-export declare const getBreakpointVariables: () => any[];
-export declare const createBreakpointBox: (name: string, value: string) => HTMLDivElement;
-export declare const createCategorySection: (category: string, breakpoints: {
-    name: string;
-    variable: string;
-    value: string;
-}[], renderedCategories: Set<string>) => HTMLDivElement;

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

@@ -1 +0,0 @@
-export declare function handleButtonLoading(buttonElement: HTMLElement, originalValue: string, loadValue: string, loadingDuration?: number): void;

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

@@ -1,18 +0,0 @@
-export declare const palette: {
-    '--ds-palette-mainBlue': string;
-    '--ds-palette-black': string;
-    '--ds-palette-white': string;
-    '--ds-palette-blue': string;
-    '--ds-palette-green': string;
-    '--ds-palette-yellow': string;
-    '--ds-palette-red': string;
-};
-export declare const opaque: {
-    '--ds-overlay-black': string;
-    '--ds-overlay-white': string;
-};
-export declare const semantic: {
-    $dsTextColor: string;
-    $dsBgColor: string;
-    $dsBorderColor: string;
-};

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

@@ -1,8 +0,0 @@
-import './colourBox.scss';
-export declare const getColourVariables: (colourType: string) => {
-    name: string;
-    variable: string;
-    value: string;
-    category: any;
-}[];
-export declare const createColourContainer: (colourType: string) => HTMLDivElement;

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

@@ -1,15 +0,0 @@
-import './spacingBox.scss';
-export declare const categories: {
-    '--ds-spacing-': string;
-    '--ds-spacing-layout-': string;
-};
-export declare const getSpacingVariables: () => {
-    spacing: any[];
-    layout: any[];
-};
-export declare const createSpacingBox: (name: string, value: string, width: string) => HTMLDivElement;
-export declare const createCategorySection: (category: string, spacings: {
-    name: string;
-    variable: string;
-    value: string;
-}[], renderedCategories: Set<string>) => HTMLDivElement;

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

@@ -1 +0,0 @@
-export declare function toggleSpinnerLoad(buttonElement: HTMLElement, spinnerElement: HTMLElement, results: HTMLElement, buttonOriginalValue: string, loadValue: string, loadingDuration?: number): void;

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

@@ -1,22 +0,0 @@
-import './typographyBox.scss';
-export declare const categories: {
-    '--ds-fontFamily': string;
-    '--ds-fontSize': string;
-    '--ds-fontWeight': string;
-    '--ds-letterSpacing': string;
-    '--ds-lineHeight': string;
-    '--ds-fontWidth': string;
-};
-export declare const getTypographyVariables: () => any[];
-export declare const createFontBox: (name: string, value: string, category: string) => HTMLDivElement;
-export declare const createCategorySection: (category: string, fonts: {
-    name: string;
-    variable: string;
-    value: string;
-}[], renderedCategories: Set<string>) => HTMLDivElement;
-export declare const getCSSClasses: (prefix: string) => string[];
-export declare const headingSizes: readonly ["2xLarge", "xLarge", "large", "medium", "small", "xSmall"];
-export type HeadingSize = typeof headingSizes[number];
-export declare const getHeadingVariables: (size: HeadingSize, isDesktop: boolean) => {
-    [key: string]: string;
-};