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

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

@@ -0,0 +1,344 @@
+import { h, r as registerInstance, c as createEvent, a as getElement, F as Fragment } from './index-CIXO9B7A.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { d as declareComponentDependencies, i as idGenerator, t as transformTagName } from './utils-hnAo1pVs.js';
+import { s as searchOrSelectAnOption, r as removeSelection, n as noResultsFound } from './controlUtils-u8PbNIET.js';
+import './index--uGgWE-E.js';
+
+const dsComboboxCss = ".sc-ds-combobox:root,.sc-ds-combobox-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-combobox-header__label.sc-ds-combobox{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-palette-black-95)}.ds-combobox-header__assistive-text.sc-ds-combobox{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.sc-ds-combobox-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-combobox-h{width:20rem}}.sc-ds-combobox-h>div.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox-header.sc-ds-combobox{display:inline-flex;flex-direction:column;gap:var(--ds-spacing-3xSmall);margin-bottom:var(--ds-spacing-2xSmall);align-items:flex-start}.ds-combobox__input-container.sc-ds-combobox{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:default;box-sizing:border-box;height:2.75rem;width:100%}.ds-combobox__input-container--disabled.sc-ds-combobox{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.ds-combobox__input-container--disabled.sc-ds-combobox .ds-combobox__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__input-container--invalid.sc-ds-combobox{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.ds-combobox__input-container--invalid.sc-ds-combobox:not(.ds-combobox__input-container--open):not(.ds-combobox__input-container--disabled):hover{background-color:var(--ds-palette-red-10)}.ds-combobox__input-container--invalid.sc-ds-combobox:not(.ds-combobox__input-container--open):not(.ds-combobox__input-container--disabled):active{background-color:var(--ds-palette-red-20)}.ds-combobox__input-container.sc-ds-combobox:not(.ds-combobox__input-container--open):not(.ds-combobox__input-container:has(>.ds-combobox__input-container__clear-button>button:focus)):not(.ds-combobox__input-container--invalid):not(.ds-combobox__input-container--disabled):hover{background-color:var(--ds-palette-black-10)}.ds-combobox__input-container.sc-ds-combobox:active:not(.ds-combobox__input-container--invalid):not(.ds-combobox__input-container--disabled){background-color:var(--ds-palette-black-20)}.ds-combobox__input-container.sc-ds-combobox:has(>.ds-combobox__input-container__input:focus),.ds-combobox__input-container.sc-ds-combobox:has(>.ds-combobox__input-container__clear-button>button:focus){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)}.ds-combobox__input-container__input.sc-ds-combobox{width:100%;height:100%;border:0;background:none;color:inherit;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-combobox__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed}.ds-combobox__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-palette-black-40)}.ds-combobox__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__input-container__icon.sc-ds-combobox+.ds-combobox__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__input-container__clear-button.sc-ds-combobox,.ds-combobox__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__input-container__toggle-button__icon.sc-ds-combobox{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);color:inherit}.ds-combobox__options-container.sc-ds-combobox{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)}.ds-combobox__options-container--open.sc-ds-combobox{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)}.ds-combobox__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__options-container__options__inner.sc-ds-combobox{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-combobox__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__options-container__options__inner__bottom-scrim.sc-ds-combobox{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-combobox__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__options-container__options__inner__top-scrim.sc-ds-combobox{top:0;background:linear-gradient(to bottom, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-combobox__options-container__options__inner__top-scrim--dark.sc-ds-combobox{background:none;height:calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));margin-top:calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));box-shadow:0 -2px 7px var(--ds-overlay-black-50)}.ds-combobox__options-container__options__inner__bottom-scrim.sc-ds-combobox{bottom:0;background:linear-gradient(to top, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%)}";
+
+const comboboxIdGenerator = idGenerator('ds-combobox');
+const DsCombobox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsFilterChange = createEvent(this, "dsFilterChange");
+        this.dsChange = createEvent(this, "dsChange");
+    }
+    get el() { return getElement(this); }
+    inputRef;
+    clearButtonRef;
+    optionsListRef;
+    optionsListInnerRef;
+    labelId;
+    assistiveTextId;
+    inputId;
+    buttonId;
+    optionsId;
+    inputValidityId;
+    GROUP_ITERATION_STOP = 1000;
+    dsFilterChange;
+    dsChange;
+    dsId = comboboxIdGenerator.next().value;
+    dsLabel;
+    dsAssistiveText;
+    dsIcon;
+    dsPlaceholder;
+    dsPlaceholderHidden = false;
+    dsDisabled = false;
+    dsAriaLabel;
+    dsClearable = true;
+    dsErrorText;
+    dsFilteringStrategy = 'dynamic';
+    dsLoading = false;
+    dsOptionsError = false;
+    dsNoResults;
+    isOpen = false;
+    activeOption = null;
+    selectedOption = null;
+    inputValue = '';
+    hasTopScrim = false;
+    hasBottomScrim = false;
+    hasTopScrimDark = false;
+    noResults = false;
+    selectedOptionObserver(newValue, oldValue) {
+        if (oldValue) {
+            oldValue.dsSelected = false;
+        }
+        if (newValue) {
+            newValue.dsSelected = true;
+        }
+        this.dsChange.emit(newValue?.dsValue || null);
+    }
+    inputValueObserver(newValue) {
+        this.dsFilterChange.emit(newValue);
+    }
+    isOpenObserver(newValue) {
+        if (!newValue) {
+            this.setInputValue(this.selectedOption);
+            this.getAllGroups().forEach(group => {
+                group.dsHidden = false;
+            });
+            this.getAllOptions().forEach(option => {
+                option.dsHidden = false;
+            });
+        }
+    }
+    onDsOptionClick(event) {
+        this.setSelectedOption(event.detail);
+        this.isOpen = false;
+        setTimeout(() => {
+            this.inputRef?.select();
+        }, 0);
+    }
+    onFocusOut(e) {
+        const nextFocused = e && 'relatedTarget' in e ? e.relatedTarget : null;
+        if (this.isOpen && (!nextFocused || !this.el.contains(nextFocused))) {
+            this.isOpen = false;
+            this.noResults = false;
+        }
+    }
+    componentWillLoad() {
+        this.labelId = `${this.dsId}-label`;
+        this.assistiveTextId = `${this.dsId}-assistive-text`;
+        this.inputId = `${this.dsId}-input`;
+        this.buttonId = `${this.dsId}-button`;
+        this.optionsId = `${this.dsId}-options`;
+        this.inputValidityId = `${this.dsId}-input-validity`;
+        const groups = this.getAllGroups();
+        groups.forEach(group => {
+            group.dsMouseDownPreventDefault = true;
+        });
+        this.hasTopScrimDark = groups.length > 0;
+        this.getAllOptions().forEach(option => {
+            option.dsFocusOnActiveChange = false;
+            option.dsMouseDownPreventDefault = true;
+        });
+    }
+    componentDidLoad() {
+        this.updateScrimClasses();
+    }
+    componentDidUpdate() {
+        this.updateScrimClasses();
+    }
+    setSelectedOption = (option) => {
+        if (option) {
+            option.dsActive = false;
+        }
+        this.selectedOption = option;
+        this.activeOption = null;
+        this.setInputValue(option);
+    };
+    setActiveOption = (option) => {
+        if (!option)
+            return;
+        if (this.activeOption) {
+            this.activeOption.dsActive = false;
+        }
+        option.dsActive = true;
+        this.activeOption = option;
+        this.activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
+    };
+    setInputValue = async (option) => {
+        if (typeof option === 'string') {
+            this.inputValue = option;
+            return;
+        }
+        this.inputValue = (await option?.dsGetLabel()) || '';
+    };
+    getAllGroups = () => Array.from(this.el.querySelectorAll(transformTagName('ds-option-group', 'ds-combobox', this.el)));
+    getAllOptions = () => Array.from(this.el.querySelectorAll(transformTagName('ds-option', 'ds-combobox', this.el)));
+    isSelectableOption = (option) => !option.dsDisabled && !option.dsHidden;
+    getSelectableOptions = () => this.getAllOptions().filter(this.isSelectableOption);
+    elementIs = (tagName) => (element) => element.tagName.toLowerCase() === transformTagName(tagName, 'ds-combobox', this.el);
+    elementIsOption = this.elementIs('ds-option');
+    elementIsGroup = this.elementIs('ds-option-group');
+    getOption = (selector, wrapFn) => async (option = this.activeOption) => {
+        const elementSibling = option?.[selector];
+        if (!elementSibling || !this.elementIsOption(elementSibling)) {
+            const group = await option?.dsGetGroup();
+            if (group && this.elementIsGroup(group)) {
+                let groupSibling = group[selector];
+                let count = 0;
+                while (groupSibling && count++ < this.GROUP_ITERATION_STOP) {
+                    if (this.elementIsGroup(groupSibling) && !groupSibling.dsHidden) {
+                        break;
+                    }
+                    groupSibling = groupSibling[selector];
+                }
+                if (groupSibling && this.elementIsGroup(groupSibling) && !groupSibling.dsHidden) {
+                    const options = Array.from(groupSibling.querySelectorAll(transformTagName('ds-option', 'ds-combobox', this.el))).filter(this.isSelectableOption);
+                    if (options?.length) {
+                        return selector === 'nextElementSibling' ? options[0] : options[options.length - 1];
+                    }
+                }
+            }
+            return await wrapFn();
+        }
+        if (!this.isSelectableOption(elementSibling)) {
+            return await this.getOption(selector, wrapFn)(elementSibling);
+        }
+        return elementSibling;
+    };
+    getFirstOption = async () => {
+        return this.getSelectableOptions()?.[0] || null;
+    };
+    getLastOption = async () => {
+        const options = this.getSelectableOptions();
+        return options?.[options.length - 1] || null;
+    };
+    getNextOption = this.getOption('nextElementSibling', this.getFirstOption);
+    getPreviousOption = this.getOption('previousElementSibling', this.getLastOption);
+    onNavigationKeyDown = (getOptionFn) => async (event, option) => {
+        event.preventDefault();
+        if (!this.isOpen) {
+            this.isOpen = true;
+        }
+        this.setActiveOption(await getOptionFn(option));
+    };
+    handleKeyDown = (event) => {
+        switch (event.key) {
+            case 'Enter': {
+                event.preventDefault();
+                if (this.activeOption && !this.activeOption.dsDisabled && !this.activeOption.dsHidden) {
+                    this.setSelectedOption(this.activeOption);
+                    this.isOpen = false;
+                    setTimeout(() => {
+                        this.inputRef?.select();
+                    }, 0);
+                }
+                break;
+            }
+            case 'Down':
+            case 'ArrowDown': {
+                this.onNavigationKeyDown(this.getNextOption)(event, this.activeOption);
+                break;
+            }
+            case 'Up':
+            case 'ArrowUp': {
+                this.onNavigationKeyDown(this.getPreviousOption)(event, this.activeOption);
+                break;
+            }
+            case 'Home': {
+                this.onNavigationKeyDown(this.getFirstOption)(event);
+                break;
+            }
+            case 'End': {
+                this.onNavigationKeyDown(this.getLastOption)(event);
+                break;
+            }
+            case 'Tab': {
+                this.isOpen = false;
+                if ((this.activeOption && !this.activeOption.dsDisabled && !this.activeOption.dsHidden) || this.selectedOption) {
+                    if (this.activeOption) {
+                        this.setSelectedOption(this.activeOption);
+                    }
+                    if (!event.shiftKey && this.dsClearable) {
+                        setTimeout(() => {
+                            this.clearButtonRef?.dsFocus();
+                        }, 0);
+                    }
+                }
+                break;
+            }
+            case 'Esc':
+            case 'Escape': {
+                this.inputRef?.blur();
+                break;
+            }
+            default: {
+                this.isOpen = true;
+                break;
+            }
+        }
+    };
+    updateGroupVisibility = async (option) => {
+        const group = await option.dsGetGroup();
+        if (group) {
+            group.dsHidden = !(await group.dsHasVisibleOptions());
+        }
+    };
+    handleInput = (event) => {
+        this.setInputValue(event.target.value);
+        if (this.dsFilteringStrategy === 'static') {
+            return;
+        }
+        let hiddenOptionsCount = 0;
+        const allOptions = this.getAllOptions();
+        allOptions.forEach(option => {
+            option.dsHidden = !option.textContent?.toLowerCase().includes(this.inputValue.toLowerCase());
+            if (option.dsHidden) {
+                hiddenOptionsCount++;
+            }
+            this.updateGroupVisibility(option);
+        });
+        this.noResults = hiddenOptionsCount === allOptions.length;
+    };
+    openCombobox = () => {
+        this.isOpen = true;
+        setTimeout(() => {
+            this.inputRef?.select();
+        }, 0);
+    };
+    handleFocus = () => {
+        if (this.dsDisabled)
+            return;
+        this.openCombobox();
+    };
+    handleToggleButtonClick = (event) => {
+        event.stopPropagation();
+        if (this.dsDisabled)
+            return;
+        if (this.isOpen) {
+            this.inputRef?.blur();
+            this.isOpen = false;
+            return;
+        }
+        this.openCombobox();
+    };
+    handleClearButtonClick = (event) => {
+        event.stopPropagation();
+        this.setInputValue('');
+        this.setSelectedOption(null);
+        setTimeout(() => {
+            this.inputRef?.select();
+        }, 0);
+    };
+    updateScrimClasses = () => {
+        const wrapper = this.optionsListRef;
+        const scrollEl = this.optionsListInnerRef;
+        if (!wrapper || !scrollEl)
+            return;
+        this.hasTopScrim = scrollEl.scrollTop !== 0;
+        this.hasBottomScrim = Math.ceil(scrollEl.scrollTop + scrollEl.clientHeight) < scrollEl.scrollHeight;
+    };
+    handleScroll = () => {
+        this.updateScrimClasses();
+    };
+    render() {
+        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.inputValidityId].filter(Boolean).join(' ');
+        const DsIcon = transformTagName('ds-icon', 'ds-combobox', this.el);
+        const DsButton = transformTagName('ds-button', 'ds-combobox', this.el);
+        const DsOptionsMessage = transformTagName('ds-options-message', 'ds-combobox', this.el);
+        const DsInputValidity = transformTagName('ds-input-validity', 'ds-combobox', this.el);
+        const baseClass = 'ds-combobox';
+        const headerClass = `${baseClass}-header`;
+        const inputContainerClass = `${baseClass}__input-container`;
+        const optionsContainerClass = `${baseClass}__options-container`;
+        return (h(Fragment, { key: '8916d9afb3be79808c357a668b20e23cb31c623a' }, (this.dsLabel || this.dsAssistiveText) && (h("div", { key: '65a4494fa15a8e5026a7c4fd286842a826db4a3f', class: headerClass }, this.dsLabel && (h("label", { key: '264850a7cac05f208cfb22b6a37ade1fa0194c91', id: this.labelId, class: `${headerClass}__label`, htmlFor: this.inputId }, this.dsLabel)), this.dsAssistiveText && (h("small", { key: '2d010d71d3fd2d2e4bd1398b5198e35446f3e88e', class: `${headerClass}__assistive-text`, id: this.assistiveTextId }, this.dsAssistiveText)))), h("div", { key: '44cdeb371609ba414bf9df9892c2b278018ad5ad', class: classNames(baseClass, {
+                [`${baseClass}--open`]: this.isOpen,
+            }) }, h("div", { key: 'e74f0981e53dab6fd3d34e0c0d5da0871cc38ab9', class: classNames(inputContainerClass, {
+                [`${inputContainerClass}--disabled`]: this.dsDisabled,
+                [`${inputContainerClass}--invalid`]: !!this.dsErrorText,
+                [`${inputContainerClass}--open`]: this.isOpen,
+            }), onClick: () => {
+                if (this.dsDisabled)
+                    return;
+                this.openCombobox();
+            } }, this.dsIcon && h(DsIcon, { key: '7a0f2512a614dcedb9efadf2302a96e715a23869', class: `${inputContainerClass}__icon`, dsName: this.dsIcon }), h("input", { key: 'b907d654b48732788d09dde89e3876c05e4b2490', id: this.inputId, class: `${inputContainerClass}__input`, ref: el => (this.inputRef = el), type: "text", role: "combobox", "aria-autocomplete": "list", "aria-activedescendant": this.activeOption?.dsId || '', "aria-label": !this.dsLabel ? this.dsAriaLabel : undefined, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, "aria-describedby": ariaDescribedBy, placeholder: this.dsPlaceholderHidden ? undefined : this.dsPlaceholder || searchOrSelectAnOption(), disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onInput: this.handleInput, onFocus: this.handleFocus, value: this.inputValue }), this.dsClearable && this.selectedOption && !this.dsDisabled && (h(DsButton, { key: '12988f1f26597e09d32e0a747242bc4cb34f5cc4', ref: el => (this.clearButtonRef = el), class: `${inputContainerClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", onClick: this.handleClearButtonClick, "aria-label": removeSelection(true) })), h("div", { key: '3093ac0659ff38e55b0dc8848edf82ade9f6e033', id: this.buttonId, class: `${inputContainerClass}__toggle-button`, role: "button", tabindex: -1, "aria-label": !this.dsLabel ? this.dsAriaLabel : undefined, "aria-labelledby": this.dsLabel && this.labelId, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, onClick: this.handleToggleButtonClick }, h(DsIcon, { key: '3505aebedd49a4240bc8ca5dbab1e6de01853a70', class: `${inputContainerClass}__toggle-button__icon`, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }))), h("div", { key: '9c8e84f47d66479e3c2987d13eca01c9c71c9784', class: classNames(optionsContainerClass, {
+                [`${optionsContainerClass}--open`]: this.isOpen,
+            }) }, h("div", { key: '50132ed72650a586595e994c1947e43ec5294d98', ref: el => (this.optionsListRef = el), id: this.optionsId, class: classNames(`${optionsContainerClass}__options`), role: "listbox", "aria-label": !this.dsLabel ? this.dsAriaLabel : undefined, "aria-labelledby": this.dsLabel && this.labelId }, h("div", { key: 'c6b7d61be01aa913246003d5f8be0f688bd446fc', ref: el => (this.optionsListInnerRef = el), class: `${optionsContainerClass}__options__inner`, onScroll: this.handleScroll }, h("div", { key: 'ff6c9c62155c0fa29524fdd72257ca127590b121', class: classNames(`${optionsContainerClass}__options__inner__top-scrim`, {
+                [`${optionsContainerClass}__options__inner__top-scrim--dark`]: this.hasTopScrimDark,
+                [`${optionsContainerClass}__options__inner__top-scrim--visible`]: this.hasTopScrim,
+            }), "aria-hidden": "true" }), h(DsOptionsMessage, { key: '819df9db4c208e0758c3b239950ecf87ca0263a6', dsLoading: this.dsLoading, dsError: this.dsOptionsError, dsNoResults: this.dsNoResults || this.noResults, dsNoResultsTitle: this.dsNoResults || this.noResults ? noResultsFound(this.inputValue) : undefined }), h("slot", { key: '7f5e4b7082429e1d27eaf6ecde90cb07dd67d41e' }), h("div", { key: '882836a1a9644f0c7b7f5fe7a97a7809afec170e', class: classNames(`${optionsContainerClass}__options__inner__bottom-scrim`, {
+                [`${optionsContainerClass}__options__inner__bottom-scrim--visible`]: this.hasBottomScrim,
+            }), "aria-hidden": "true" }))))), !!this.dsErrorText && h(DsInputValidity, { key: 'bb10e6890e8a48145f8fcb53031d9db822dcbab0', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+    }
+    static get watchers() { return {
+        "selectedOption": ["selectedOptionObserver"],
+        "inputValue": ["inputValueObserver"],
+        "isOpen": ["isOpenObserver"]
+    }; }
+};
+declareComponentDependencies([h("ds-icon", null), h("ds-button", null), h("ds-options-message", null), h("ds-input-validity", null)]);
+DsCombobox.style = dsComboboxCss;
+
+export { DsCombobox as ds_combobox };

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

@@ -33,14 +33,14 @@ const DsGrid = class {
         const classes = classNames('ds-grid', {
             'ds-grid--container': this.dsContainer,
         });
-        return (h(Host, { key: '52eed8bf11cbc3facc984438bcee9df2b15b5567', class: classes, style: {
+        return (h(Host, { key: 'a94d11ee7a97bc2ef58afd18b8955ade079b7deb', class: classes, style: {
                 '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
                 '--ds-parent-size-tablet': `${this.dsParentSizeTablet}`,
                 '--ds-parent-size-desktop': `${this.dsParentSizeDesktop}`,
                 '--ds-size-mobile': `${this.dsSizeMobile ? this.dsSizeMobile * 3 : this.dsSize}`,
                 '--ds-size-tablet': `${this.dsSizeTablet ? this.dsSizeTablet * 2 : this.dsSize}`,
                 '--ds-size-desktop': `${this.dsSizeDesktop || this.dsSize}`,
-            } }, h("slot", { key: '4a6f4d9e32064cdcfd86995d460cdbe5ce8eccdc' })));
+            } }, h("slot", { key: '56f3755b02a21b44bdabe9dc5f5aa6e8ada186ed' })));
     }
 };
 DsGrid.style = dsGridCss;

package/dist/esm/ds-icon-360.entry.js

@@ -9,7 +9,7 @@ const DsIcon360 = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'f73fcaacaf0b400677a6db707bf62f4a6ce5fc02', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'd4053780fab9f206aa53b443f1864df7dabba903', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'e8b0a37449699403db28bfeac57b7468a580931c', d: "m353-148-50-51 70-70q-150-17-234-72T55-486q0-100 123-158t302-58q179 0 302.5 57.5T906-486q0 75-71 127.5T646-287v-98q80-16 122.5-46t42.5-55q0-34-77.5-77.5T480-607q-175 0-253 43.5T149-486q0 45 48.5 73T388-358l-85-83 50-52 173 172-173 173Z" }))));
+        return (h(Host, { key: 'f0101b362aed360d5003eacb6d062a65a925ea0c', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '64d372f49f1148f1c939efde361201e620811482', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '8c8f1f213defa1816ae049b55f94a232d0d6db1a', d: "m353-148-50-51 70-70q-150-17-234-72T55-486q0-100 123-158t302-58q179 0 302.5 57.5T906-486q0 75-71 127.5T646-287v-98q80-16 122.5-46t42.5-55q0-34-77.5-77.5T480-607q-175 0-253 43.5T149-486q0 45 48.5 73T388-358l-85-83 50-52 173 172-173 173Z" }))));
     }
 };
 

package/dist/esm/ds-icon-account-balance-fill.entry.js

@@ -9,7 +9,7 @@ const DsIconAccountBalanceFill = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '0be714a4c6a14e53ca65057333a219506403c908', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '8f4f152b4445a83f34b3e6cbaab5ead0f2998203', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '2be6574405abbd9125abfe303492544e3c8b9670', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
+        return (h(Host, { key: '6e9709d90ef7f4bcbd269a248e87ae1a75ad6be3', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'e74a1ce693b5db401a8c78824ec458fa2ea78751', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '8fff7beced605c67db288b209db142aa1995db14', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
     }
 };
 

package/dist/esm/ds-icon-account-balance.entry.js

@@ -9,7 +9,7 @@ const DsIconAccountBalance = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '3937156bb98c90ea44dd53824e21e1e77e7a8eab', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '33975613c25898ea815c68fce815d6117eb6de34', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '3a07e63e4d0d1ecb84794f4318455781713c1d21', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Zm198-95h454-454Zm0 0h454L480-836 253-704Z" }))));
+        return (h(Host, { key: '9556c3d9e4999c5338bba24b5f79ad3caa100ef9', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '6b5ccbc677525eb0bb57e03274a3d04e6b38dda0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '58025d1eb11b9df07f4f4b612adbd1d64d7a4866', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Zm198-95h454-454Zm0 0h454L480-836 253-704Z" }))));
     }
 };
 

package/dist/esm/ds-icon-account-circle-fill.entry.js

@@ -9,7 +9,7 @@ const DsIconAccountCircleFill = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '50476406657e2776ef29b1e0f267ac0613d2cc9b', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '0e329e9954710306557a4aa7b2b187c0c2ecfd08', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '9a2defac0119ec828da56bc805564c5223b4031c', d: "M226-266q62-39 122.5-58T480-343q71 0 133 20t122 57q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm-.21 388q-87.15 0-164.9-33.28-77.75-33.29-135.82-91.56-58.07-58.27-90.98-135.44Q55-392.46 55-480.39t33.5-165.27Q122-723 180-780.5T315.25-872q77.24-34 165.25-34t165.25 34Q723-838 780.5-780.5T872-645.59q34 77.4 34 165.32 0 87.93-34 165.1Q838-238 780.5-180 723-122 645.46-88.5 567.93-55 479.6-55Z" }))));
+        return (h(Host, { key: 'bb2cccf8c9c30578f9bf662550b113d573b7bbfe', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '6dd59c9f8e3aeba0ead7dcf2e14b3f401efb4bf5', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '75c450788968fa015483af6277407fb02d972953', d: "M226-266q62-39 122.5-58T480-343q71 0 133 20t122 57q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm-.21 388q-87.15 0-164.9-33.28-77.75-33.29-135.82-91.56-58.07-58.27-90.98-135.44Q55-392.46 55-480.39t33.5-165.27Q122-723 180-780.5T315.25-872q77.24-34 165.25-34t165.25 34Q723-838 780.5-780.5T872-645.59q34 77.4 34 165.32 0 87.93-34 165.1Q838-238 780.5-180 723-122 645.46-88.5 567.93-55 479.6-55Z" }))));
     }
 };
 

package/dist/esm/ds-icon-account-circle.entry.js

@@ -9,7 +9,7 @@ const DsIconAccountCircle = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '8925573451bfc9c47abe6eec02749877b8c034dc', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'ecad7ce42937ebb19b268b0a4b78abc181e91211', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '2713065cdbcc1ecd487bd7b79e4a7c04c553d493', d: "M226-266q62-42 123-64.5T480.43-353q70.44 0 132.42 23.27Q674.84-306.46 735-266q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm.07 388Q393-55 315.61-88.29q-77.39-33.29-135.69-91.58-58.31-58.28-91.62-135.49Q55-392.57 55-480.35 55-567 88.5-644.5T180-780q58-58 135.26-92 77.25-34 165.09-34 86.65 0 164.15 34T780-780q58 58 92 135.62 34 77.61 34 164.5 0 86.88-34 164.38T780-180q-58 58-135.62 91.5Q566.77-55 479.88-55Zm.12-94q52 0 99.5-14t98.5-51q-52-35-99-51.5T480-282q-52 0-98.5 16.5T283-214q51 37 98 51t99 14Zm0-366q30.87 0 50.93-19.5Q551-554 551-585.5T530.93-637q-20.06-20-50.93-20t-50.93 20Q409-617 409-585.5t20.07 51Q449.13-515 480-515Zm0-71Zm1 371Z" }))));
+        return (h(Host, { key: '9b6cebfef8b365520b8d44dbc37d9300d7fb5240', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'fa4e35b0e66cbe2f951d643bb9e74a4659ddc31b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '0d3aad59aeb06132b2ffbe8615f9603a5e338bed', d: "M226-266q62-42 123-64.5T480.43-353q70.44 0 132.42 23.27Q674.84-306.46 735-266q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm.07 388Q393-55 315.61-88.29q-77.39-33.29-135.69-91.58-58.31-58.28-91.62-135.49Q55-392.57 55-480.35 55-567 88.5-644.5T180-780q58-58 135.26-92 77.25-34 165.09-34 86.65 0 164.15 34T780-780q58 58 92 135.62 34 77.61 34 164.5 0 86.88-34 164.38T780-180q-58 58-135.62 91.5Q566.77-55 479.88-55Zm.12-94q52 0 99.5-14t98.5-51q-52-35-99-51.5T480-282q-52 0-98.5 16.5T283-214q51 37 98 51t99 14Zm0-366q30.87 0 50.93-19.5Q551-554 551-585.5T530.93-637q-20.06-20-50.93-20t-50.93 20Q409-617 409-585.5t20.07 51Q449.13-515 480-515Zm0-71Zm1 371Z" }))));
     }
 };
 

package/dist/esm/ds-icon-add.entry.js

@@ -9,7 +9,7 @@ const DsIconAdd = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '0f722edca8845b075a02a7209c171989f0c5ee3c', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'c3d6ab54925b4c3530f309f28e2bdc990b39d298', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '9133ed0fa325ecf2a30e5f99958518533b04bb96', d: "M433-433H175v-94h258v-259h94v259h259v94H527v258h-94v-258Z" }))));
+        return (h(Host, { key: '9e36f88e1e6bbe618574e695af27d0cb50d31140', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '9118edfab190cd651e156fa8cc0e9a079a1aa9a5', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '019409a46afed8645a848efaf938aff9e5dfd6cc', d: "M433-433H175v-94h258v-259h94v259h259v94H527v258h-94v-258Z" }))));
     }
 };
 

package/dist/esm/ds-icon-archive-fill.entry.js

@@ -9,7 +9,7 @@ const DsIconArchiveFill = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '34a5a2627e393fdef496ba864f5b02e9c2d3647f', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '53450fbfee55473f2b160d13c8b8a5b2181a8c5e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'aa7f027afb581465b8cae05ea6fea1971df06aad', d: "m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Z" }))));
+        return (h(Host, { key: '9d5d3d938c3ba561639642d982c39d07e6d07736', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'e3e668a7f324aac03f823a4cb687b15abc647cc8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'c8e4052b99280064a8555126a13d1befde9027cf', d: "m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Z" }))));
     }
 };
 

package/dist/esm/ds-icon-archive.entry.js

@@ -9,7 +9,7 @@ const DsIconArchive = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '4d430699eb990e67b3bb6f3df75dafce723f5ff8', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '4eb8f97073e984579d6283235b5350091eaa77ad', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '2987d4ee4e4857c290b271e1e465d5b7d8624c4f', d: "m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM189-639v450h582v-450H189ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Zm257 312Z" }))));
+        return (h(Host, { key: '957d116486ce5dafdfdeaed9b91e93c896ae5c1d', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '01ac1d046b4fb4ff4f5a88fb43b7c4ed2ce51ae6', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '1ffda0e7588b43110e4bbed892a55bb9d3e91284', d: "m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM189-639v450h582v-450H189ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Zm257 312Z" }))));
     }
 };
 

package/dist/esm/ds-icon-arrow-back.entry.js

@@ -9,7 +9,7 @@ const DsIconArrowBack = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '8d617f3f27e84ea19eda4fde3043d344133542e3', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '2f26baf506a0cb39564f58af44b7792b5b304141', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '540194b76641b50dca75d8632c9a0b36b6e07c77', d: "m315-433 232 232-67 66-345-345 345-346 67 67-232 232h511v94H315Z" }))));
+        return (h(Host, { key: '8229608bddd0b1ae0086159679ddd013878c73ec', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '6fe9077a023dcc8cfe04447c05dfb9a956e18f43', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '80cc7cba32eec86b019dac12a3bc344cca13ec7c', d: "m315-433 232 232-67 66-345-345 345-346 67 67-232 232h511v94H315Z" }))));
     }
 };
 

package/dist/esm/ds-icon-arrow-downward.entry.js

@@ -9,7 +9,7 @@ const DsIconArrowDownward = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '49086e47e23cec356f5a27be2bed2ca3a7567513', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'fd6557045eecd0f35144fd44230f571bfcbf51eb', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '5ab5c16c62e7ef51f1f575753e5cb1d5992e8de0', d: "M433-826v511L201-547l-66 67 345 345 346-345-67-67-232 232v-511h-94Z" }))));
+        return (h(Host, { key: '8ed9e6908d655dce522a54cf6dae1a2c2db6d171', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '37154b7ed67f49661350e4e98c8e13e5e7be02ae', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'e8eef87e0596babfa96e8217dda715f8c71dab87', d: "M433-826v511L201-547l-66 67 345 345 346-345-67-67-232 232v-511h-94Z" }))));
     }
 };
 

package/dist/esm/ds-icon-arrow-drop-down-circle-fill.entry.js

@@ -9,7 +9,7 @@ const DsIconArrowDropDownCircleFill = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'fc1505180dbaf0f6dd19cf1d3833cd8412ea7c3b', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '718d4caf67c606391124999e93c65616c0a7f939', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '8ae71c84b408970617c80430d041ee7eaa708f82', d: "m480-350 174-174H305l175 174Zm.14 295Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Z" }))));
+        return (h(Host, { key: '69f2a1be0c297fc742da6ab9b7444d0c9acf1f5d', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '1c759f313b2b94ae8973f954b625842f7136067e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '39d70e7fd4541da494e764bde6c9b56e25d3c022', d: "m480-350 174-174H305l175 174Zm.14 295Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Z" }))));
     }
 };
 

package/dist/esm/ds-icon-arrow-drop-down-circle.entry.js

@@ -9,7 +9,7 @@ const DsIconArrowDropDownCircle = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'fde6169e064d2f4676796388679c877dbf15e092', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '45e79da291896133a3790a933770d9789cc3f877', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '34b91b41e8909ed701f181f62e736977a9a5e9a3', d: "m480-350 174-174H305l175 174Zm.14 295Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Zm-.14-94q138 0 234.5-96.37T811-480q0-138-96.5-234.5t-235-96.5q-137.5 0-234 96.5t-96.5 235q0 137.5 96.37 234T480-149Zm0-331Z" }))));
+        return (h(Host, { key: '82fb2af361420786b3eb13914455660fbe2d3149', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '3b3241d43fff4f9c9706337209386d395ff5ce27', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'bcb75db398e5621fe2eb461fb328632ccd76719f', d: "m480-350 174-174H305l175 174Zm.14 295Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Zm-.14-94q138 0 234.5-96.37T811-480q0-138-96.5-234.5t-235-96.5q-137.5 0-234 96.5t-96.5 235q0 137.5 96.37 234T480-149Zm0-331Z" }))));
     }
 };
 

package/dist/esm/ds-icon-arrow-drop-down.entry.js

@@ -9,7 +9,7 @@ const DsIconArrowDropDown = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '31e1ad7780f839ea0c1254e01a54a2814b767d4c', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'fb55d9b84be128f2ceedac7e776a7f47f5cf8881', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '7c4e58ce8c9e3389b352648a53897d3bc63393ed', d: "M480-336 239-576h482L480-336Z" }))));
+        return (h(Host, { key: '870ae1e06e781bd511de695b7a958baff843ac08', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'a9e15e00d2e425809c90e3528adefcabdfa0866e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '543187a622ed97107f3921beb81fe7745c500d27', d: "M480-336 239-576h482L480-336Z" }))));
     }
 };
 

package/dist/esm/ds-icon-arrow-drop-up.entry.js

@@ -9,7 +9,7 @@ const DsIconArrowDropUp = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'af3951f4a4cfcbc33fbbb36b1d94e413643581a8', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '1ac2fa1083d790e0b90d2af4d1135d491ba4f1e4', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '1a39235192ecd26de9302a619a6adc76a34d7491', d: "m239-383 241-242 241 242H239Z" }))));
+        return (h(Host, { key: '3fe4e7840c21ff23088ae8ef2212132991af19bb', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'e0b41abb32fa77dde459e5fe42b2858a3aee15db', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '5d4ce577cda410999a6e916520449441bc4b5115', d: "m239-383 241-242 241 242H239Z" }))));
     }
 };
 

package/dist/esm/ds-icon-arrow-forward.entry.js

@@ -9,7 +9,7 @@ const DsIconArrowForward = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'a86e9ecd4e9a6f9c2acaec6427f4d4814ef1795d', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '181f8f3a82a9e217ed733bf57b6b784d90dff6d2', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '78c342e9b8db453140754cb307a6a03d4d421621', d: "M645-433H135v-94h510L413-759l67-67 346 346-346 345-67-66 232-232Z" }))));
+        return (h(Host, { key: '87f4ae41403223d44d9f4452fac2a414dd84d199', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'c63ec717ac83f7f1d106ba27b240b47d1bc0d550', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'd0c8c605b9c253387506d87410af72cd9dc7baaf', d: "M645-433H135v-94h510L413-759l67-67 346 346-346 345-67-66 232-232Z" }))));
     }
 };
 

package/dist/esm/ds-icon-arrow-insert.entry.js

@@ -9,7 +9,7 @@ const DsIconArrowInsert = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '2edc0dc1c5c89ba2722216a3f9f1281db8662359', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'bdd4984e69e0897fe75a7d950376553ab3a3b4cf', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '511b8943bc55b798aaf80b41ec768b566384d378', d: "M711-221 316-616v353h-95v-514h515v94H383l394 395-66 67Z" }))));
+        return (h(Host, { key: 'e5a7b26931b8805a51043ea566cf370eb025add7', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'fe817aa0209009213cc7702d3c2e941be996a3f8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '164c1ec0fd71bdba8e7cdf239ac9231ec84c1d23', d: "M711-221 316-616v353h-95v-514h515v94H383l394 395-66 67Z" }))));
     }
 };
 

package/dist/esm/ds-icon-arrow-outward.entry.js

@@ -9,7 +9,7 @@ const DsIconArrowOutward = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '93d9e9ad372eb43ff0bd88c2e147523c013cb62a', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '9c90a93fd4414550f5617fc6a590a4fc3598ff04', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'ca1d4579720e8a52fc5f4aad33c533f2619ca1fb', d: "m250-221-67-67 395-395H224v-94h515v514h-95v-353L250-221Z" }))));
+        return (h(Host, { key: '1122673c9a1935edcd85325f4ddcf36b19250e9b', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'd341f7266e46e60d0a0a343db4c850e71860781b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '94c5c313239d09342953c5463e6d61f52743cb51', d: "m250-221-67-67 395-395H224v-94h515v514h-95v-353L250-221Z" }))));
     }
 };
 

package/dist/esm/ds-icon-arrow-upward.entry.js

@@ -9,7 +9,7 @@ const DsIconArrowUpward = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'd47e21340f4cb28dfa7236c3c88f2355ca76dcb6', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '252920fa2bbacb41644e87ac67e20a0d1124e352', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '941ee86d690725b21000314268e15947c0bb0e6d', d: "M433-135v-510L201-413l-66-67 345-346 346 346-67 67-232-232v510h-94Z" }))));
+        return (h(Host, { key: '010c851059cfa3909a559a6764ec4915192eb6ca', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'e3daa7773a57530d3927fa625ff36dfac2c6451b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'a173375c0709698bab20b83abd126e230acccdf5', d: "M433-135v-510L201-413l-66-67 345-346 346 346-67 67-232-232v510h-94Z" }))));
     }
 };
 

package/dist/esm/ds-icon-attach-email-fill.entry.js

@@ -9,7 +9,7 @@ const DsIconAttachEmailFill = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: 'dc95a62e7d46e027b8f512aa04ab995f02db0689', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '882ec1fb7afab81f2fe110a2497c18a441a0c79f', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'f3be79ba0e926b5e85c7619a3be13982966edab3', d: "M798-47q-63 0-106-45t-43-108v-224q0-39.3 26.29-65.65Q701.58-516 740.79-516 779-516 805-489.65q26 26.35 26 65.65v230h-71v-233q0-11-4.5-19.5T741-455q-10 0-15.5 8.5T720-427v229q0 36.18 21.38 62.59 21.37 26.41 56 26.41 32.62 0 53.12-25.26T871-194v-203h72v203q0 61-42 104T798-47ZM17-215v-691h851v360H731q-48.34 0-80.17 36T619-424v209H17Zm425-296 331-217v-83L442-598 111-811v83l331 217Z" }))));
+        return (h(Host, { key: '8e4c46c7a0609c55de5ed6e136bbf38af3ca707c', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'f3739468c0a0a8b134c1d2826cb7eff55e96f242', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '4ce23a7f8d164c4e3a3e3836dac07ba4d29ebcae', d: "M798-47q-63 0-106-45t-43-108v-224q0-39.3 26.29-65.65Q701.58-516 740.79-516 779-516 805-489.65q26 26.35 26 65.65v230h-71v-233q0-11-4.5-19.5T741-455q-10 0-15.5 8.5T720-427v229q0 36.18 21.38 62.59 21.37 26.41 56 26.41 32.62 0 53.12-25.26T871-194v-203h72v203q0 61-42 104T798-47ZM17-215v-691h851v360H731q-48.34 0-80.17 36T619-424v209H17Zm425-296 331-217v-83L442-598 111-811v83l331 217Z" }))));
     }
 };
 

package/dist/esm/ds-icon-attach-email.entry.js

@@ -9,7 +9,7 @@ const DsIconAttachEmail = class {
     dsRole = 'img';
     dsColour;
     render() {
-        return (h(Host, { key: '012c5eacbea6c58b0620fe517b1b247f4865196d', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '002e17c941ce9aa49e118782102af3ef5533a8e5', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '557a1e6c8ef8543166553c1521d36ea0fc10748b', d: "M442-511 111-728v419h478v94H17v-691h851v335h-95v-157L442-511Zm0-87 331-213H111l331 213ZM798-47q-63 0-106-44.95T649-200v-224q0-38.04 26.76-65.02Q702.52-516 741.27-516q37.91 0 63.82 26.98Q831-462.04 831-424v230h-71v-233q0-11.2-4.5-19.6Q751-455 741-455t-15.5 8.4q-5.5 8.4-5.5 19.6v229q0 36.18 21.38 62.59Q762.75-109 797.88-109 831-109 851-134.5t20-59.5v-203h72v203q0 60.62-42 103.81Q859-47 798-47ZM111-728v-83 502-419Z" }))));
+        return (h(Host, { key: '8b83fba6e60e432d3d56be57e19186ed85f67a83', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'a3690b82ad647755d3bd7d04c0093f9b5b2c4933', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '7c7b603248d772351576ae64f089662135d4d59e', d: "M442-511 111-728v419h478v94H17v-691h851v335h-95v-157L442-511Zm0-87 331-213H111l331 213ZM798-47q-63 0-106-44.95T649-200v-224q0-38.04 26.76-65.02Q702.52-516 741.27-516q37.91 0 63.82 26.98Q831-462.04 831-424v230h-71v-233q0-11.2-4.5-19.6Q751-455 741-455t-15.5 8.4q-5.5 8.4-5.5 19.6v229q0 36.18 21.38 62.59Q762.75-109 797.88-109 831-109 851-134.5t20-59.5v-203h72v203q0 60.62-42 103.81Q859-47 798-47ZM111-728v-83 502-419Z" }))));
     }
 };