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

package/dist/components/ds-combobox.js

@@ -0,0 +1,423 @@
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './index2.js';
+import { c as classNames } from './index3.js';
+import { i as idGenerator, t as transformTagName, d as declareComponentDependencies } from './utils.js';
+import { s as searchOrSelectAnOption, r as removeSelection, n as noResultsFound } from './controlUtils.js';
+import { d as defineCustomElement$7 } from './ds-button2.js';
+import { d as defineCustomElement$6 } from './ds-icon2.js';
+import { d as defineCustomElement$5 } from './ds-input-validity2.js';
+import { d as defineCustomElement$4 } from './ds-options-message2.js';
+import { d as defineCustomElement$3 } from './ds-spinner2.js';
+import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
+
+const dsComboboxCss = ".sc-ds-combobox:root,.sc-ds-combobox-h{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.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-textColor-default)}.ds-combobox-header__assistive-text.sc-ds-combobox{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);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-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:default;box-sizing:border-box;height:2.75rem;width:100%}.ds-combobox__input-container--disabled.sc-ds-combobox{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);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-bgColor-danger);border-color:var(--ds-borderColor-danger)}.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-bgColor-danger-hover)}.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-bgColor-danger-active)}.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-bgColor-white-hover)}.ds-combobox__input-container.sc-ds-combobox:active:not(.ds-combobox__input-container--invalid):not(.ds-combobox__input-container--disabled){background-color:var(--ds-bgColor-white-active)}.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-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);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-textColor-disabled-onLight)}.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-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);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-borderColor-light);background-color:var(--ds-bgColor-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-bgColor-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-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}";
+
+const comboboxIdGenerator = idGenerator('ds-combobox');
+const DsCombobox$1 = proxyCustomElement(class DsCombobox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.dsFilterChange = createEvent(this, "dsFilterChange");
+        this.dsChange = createEvent(this, "dsChange");
+    }
+    get el() { return 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"]
+    }; }
+    static get style() { return dsComboboxCss; }
+}, [262, "ds-combobox", {
+        "dsId": [1, "ds-id"],
+        "dsLabel": [1, "ds-label"],
+        "dsAssistiveText": [1, "ds-assistive-text"],
+        "dsIcon": [1, "ds-icon"],
+        "dsPlaceholder": [1, "ds-placeholder"],
+        "dsPlaceholderHidden": [4, "ds-placeholder-hidden"],
+        "dsDisabled": [4, "ds-disabled"],
+        "dsAriaLabel": [1, "ds-aria-label"],
+        "dsClearable": [4, "ds-clearable"],
+        "dsErrorText": [1, "ds-error-text"],
+        "dsFilteringStrategy": [1, "ds-filtering-strategy"],
+        "dsLoading": [4, "ds-loading"],
+        "dsOptionsError": [4, "ds-options-error"],
+        "dsNoResults": [4, "ds-no-results"],
+        "isOpen": [32],
+        "activeOption": [32],
+        "selectedOption": [32],
+        "inputValue": [32],
+        "hasTopScrim": [32],
+        "hasBottomScrim": [32],
+        "hasTopScrimDark": [32],
+        "noResults": [32]
+    }, [[0, "dsOptionClick", "onDsOptionClick"], [0, "focusout", "onFocusOut"]], {
+        "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)]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-combobox", "ds-button", "ds-icon", "ds-input-validity", "ds-options-message", "ds-spinner", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-combobox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsCombobox$1);
+            }
+            break;
+        case "ds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ds-input-validity":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ds-options-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ds-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsCombobox = DsCombobox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsCombobox, defineCustomElement };

package/dist/components/ds-grid.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index2.js';
 import { c as classNames } from './index3.js';
 
-const dsGridCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-grid{display:flex;flex-flow:wrap;min-width:0;box-sizing:border-box;gap:var(--ds-spacing-layout-2xSmall)}@media (min-width: 30rem){.ds-grid{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid{gap:var(--ds-spacing-layout-small)}}.ds-grid--container{max-width:calc(var(--ds-breakpoint-xLarge) - var(--ds-spacing-layout-large));margin:0 var(--ds-spacing-layout-2xSmall)}@media (min-width: 30rem){.ds-grid--container{margin:0 var(--ds-spacing-layout-small)}}@media (min-width: 90rem){.ds-grid--container{margin:0 auto}}.ds-grid:not(.ds-grid--container){width:calc(100% * var(--ds-size-mobile) / var(--ds-parent-size-mobile) - (var(--ds-parent-size-mobile) - var(--ds-size-mobile)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-mobile))}@media (min-width: 30rem){.ds-grid:not(.ds-grid--container){width:calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-xSmall) / var(--ds-parent-size-tablet))}}@media (min-width: 75rem){.ds-grid:not(.ds-grid--container){width:calc(100% * var(--ds-size-desktop) / var(--ds-parent-size-desktop) - (var(--ds-parent-size-desktop) - var(--ds-size-desktop)) * var(--ds-spacing-layout-small) / var(--ds-parent-size-desktop))}}";
+const dsGridCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root,:host{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.ds-grid{display:flex;flex-flow:wrap;min-width:0;box-sizing:border-box;gap:var(--ds-spacing-layout-2xSmall)}@media (min-width: 30rem){.ds-grid{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid{gap:var(--ds-spacing-layout-small)}}.ds-grid--container{max-width:calc(var(--ds-breakpoint-xLarge) - var(--ds-spacing-layout-large));margin:0 var(--ds-spacing-layout-2xSmall)}@media (min-width: 30rem){.ds-grid--container{margin:0 var(--ds-spacing-layout-small)}}@media (min-width: 90rem){.ds-grid--container{margin:0 auto}}.ds-grid:not(.ds-grid--container){width:calc(100% * var(--ds-size-mobile) / var(--ds-parent-size-mobile) - (var(--ds-parent-size-mobile) - var(--ds-size-mobile)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-mobile))}@media (min-width: 30rem){.ds-grid:not(.ds-grid--container){width:calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-xSmall) / var(--ds-parent-size-tablet))}}@media (min-width: 75rem){.ds-grid:not(.ds-grid--container){width:calc(100% * var(--ds-size-desktop) / var(--ds-parent-size-desktop) - (var(--ds-parent-size-desktop) - var(--ds-size-desktop)) * var(--ds-spacing-layout-small) / var(--ds-parent-size-desktop))}}";
 
 const DsGrid$1 = proxyCustomElement(class DsGrid extends H {
     constructor() {
@@ -34,17 +34,17 @@ const DsGrid$1 = proxyCustomElement(class DsGrid extends H {
         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' })));
     }
     static get style() { return dsGridCss; }
-}, [4, "ds-grid", {
+}, [260, "ds-grid", {
         "dsContainer": [4, "ds-container"],
         "dsSize": [2, "ds-size"],
         "dsSizeMobile": [2, "ds-size-mobile"],

package/dist/components/ds-icon-360.js

@@ -10,9 +10,9 @@ const DsIcon360$1 = proxyCustomElement(class DsIcon360 extends H {
     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" }))));
     }
-}, [0, "ds-icon-360", {
+}, [256, "ds-icon-360", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

package/dist/components/ds-icon-account-balance-fill.js

@@ -10,9 +10,9 @@ const DsIconAccountBalanceFill$1 = proxyCustomElement(class DsIconAccountBalance
     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" }))));
     }
-}, [0, "ds-icon-account-balance-fill", {
+}, [256, "ds-icon-account-balance-fill", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

package/dist/components/ds-icon-account-balance.js

@@ -10,9 +10,9 @@ const DsIconAccountBalance$1 = proxyCustomElement(class DsIconAccountBalance ext
     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" }))));
     }
-}, [0, "ds-icon-account-balance", {
+}, [256, "ds-icon-account-balance", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

package/dist/components/ds-icon-account-circle-fill.js

@@ -10,9 +10,9 @@ const DsIconAccountCircleFill$1 = proxyCustomElement(class DsIconAccountCircleFi
     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" }))));
     }
-}, [0, "ds-icon-account-circle-fill", {
+}, [256, "ds-icon-account-circle-fill", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

package/dist/components/ds-icon-account-circle.js

@@ -10,9 +10,9 @@ const DsIconAccountCircle$1 = proxyCustomElement(class DsIconAccountCircle exten
     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" }))));
     }
-}, [0, "ds-icon-account-circle", {
+}, [256, "ds-icon-account-circle", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

package/dist/components/ds-icon-add.js

@@ -10,9 +10,9 @@ const DsIconAdd$1 = proxyCustomElement(class DsIconAdd extends H {
     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" }))));
     }
-}, [0, "ds-icon-add", {
+}, [256, "ds-icon-add", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

package/dist/components/ds-icon-archive-fill.js

@@ -10,9 +10,9 @@ const DsIconArchiveFill$1 = proxyCustomElement(class DsIconArchiveFill extends H
     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" }))));
     }
-}, [0, "ds-icon-archive-fill", {
+}, [256, "ds-icon-archive-fill", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

package/dist/components/ds-icon-archive.js

@@ -10,9 +10,9 @@ const DsIconArchive$1 = proxyCustomElement(class DsIconArchive extends H {
     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" }))));
     }
-}, [0, "ds-icon-archive", {
+}, [256, "ds-icon-archive", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

package/dist/components/ds-icon-arrow-back.js

@@ -10,9 +10,9 @@ const DsIconArrowBack$1 = proxyCustomElement(class DsIconArrowBack extends H {
     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" }))));
     }
-}, [0, "ds-icon-arrow-back", {
+}, [256, "ds-icon-arrow-back", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],

package/dist/components/ds-icon-arrow-downward.js

@@ -10,9 +10,9 @@ const DsIconArrowDownward$1 = proxyCustomElement(class DsIconArrowDownward exten
     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" }))));
     }
-}, [0, "ds-icon-arrow-downward", {
+}, [256, "ds-icon-arrow-downward", {
         "dsSize": [1, "ds-size"],
         "dsTitle": [1, "ds-title"],
         "dsRole": [1, "ds-role"],