@uh-design-system/component-library 0.6.1-rc.0 → 0.7.0

package/dist/components/ds-select.js

@@ -0,0 +1,375 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './index2.js';
+import { i as idGenerator, d as defineCustomElement$6 } from './ds-icon2.js';
+import { c as classNames } from './index3.js';
+import { d as defineCustomElement$7 } from './ds-button2.js';
+import { d as defineCustomElement$5 } from './ds-input-validity2.js';
+import { d as defineCustomElement$4 } from './ds-options2.js';
+import { d as defineCustomElement$3 } from './ds-spinner2.js';
+import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
+
+const dsSelectCss = ".sc-ds-select:root,.sc-ds-select-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.native-select-wrapper.sc-ds-select,.custom-select.sc-ds-select{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-palette-black-50);background-color:var(--ds-palette-white);color:var(--ds-palette-black-70);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.disabled.native-select-wrapper.sc-ds-select,.disabled.custom-select.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.disabled.native-select-wrapper.sc-ds-select .dropdown-icon.sc-ds-select,.disabled.custom-select.sc-ds-select .dropdown-icon.sc-ds-select{color:var(--ds-palette-black-40);border-left-color:var(--ds-overlay-black-15);cursor:not-allowed}.invalid.native-select-wrapper.sc-ds-select,.invalid.custom-select.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.invalid.native-select-wrapper.sc-ds-select:not(.open):not(.disabled):active,.invalid.custom-select.sc-ds-select:not(.open):not(.disabled):active{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.native-select-wrapper.sc-ds-select:not(.open):not(.invalid):not(.disabled):hover,.custom-select.sc-ds-select:not(.open):not(.invalid):not(.disabled):hover{background-color:var(--ds-palette-black-10)}.custom-select.sc-ds-select .selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall)}.custom-select.sc-ds-select .placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.custom-select--open.sc-ds-select+.options-container.sc-ds-select{display:block;box-shadow:0rem var(--ds-spacing-4xSmall) var(--ds-spacing-3xSmall) calc(-1 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15), 0rem var(--ds-spacing-3xSmall) calc(var(--ds-spacing-xSmall) / 2) calc(-0.5 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15)}.custom-select--open.sc-ds-select .options-list.sc-ds-select{display:block}.custom-select.sc-ds-select:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled):hover{background-color:var(--ds-palette-black-10)}.custom-select.sc-ds-select:active:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled){background-color:var(--ds-palette-black-20)}.custom-select--open.sc-ds-select,.custom-select.sc-ds-select:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.custom-select--open.sc-ds-select:not(.custom-select--open--invalid,.custom-select.sc-ds-select:focus-visible--invalid),.custom-select.sc-ds-select:focus-visible:not(.custom-select--open--invalid,.custom-select.sc-ds-select:focus-visible--invalid){border-color:var(--ds-palette-mainBlue-70)}.custom-select--disabled.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.custom-select--disabled.sc-ds-select .dropdown-icon.sc-ds-select{color:var(--ds-palette-black-40);border-left-color:var(--ds-overlay-black-15);cursor:not-allowed}.custom-select--invalid.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.custom-select--invalid.sc-ds-select:not(.custom-select--invalid--open):not(.custom-select--invalid--disabled):active{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.selected-option.sc-ds-select{flex:1;font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.custom-select--has-icon.sc-ds-select .selected-option.sc-ds-select{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.dropdown-icon.sc-ds-select{align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-overlay-black-15);color:var(--ds-palette-black-70);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.clear-button.sc-ds-select,.dropdown-icon.sc-ds-select{cursor:pointer}.select-title.sc-ds-select{display:inline-block;font-weight:var(--ds-fontWeight-semibold);margin-bottom:var(--ds-spacing-2xSmall);color:var(--ds-palette-black-95)}.selected-text.sc-ds-select{flex:1;padding:0 var(--ds-spacing-xSmall);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.options-container.sc-ds-select{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);background-color:var(--ds-palette-white)}.native-select.sc-ds-select{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;outline:none;padding:0 var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-16);font-family:inherit;background-color:transparent;color:inherit;flex:1}.native-select.sc-ds-select::placeholder{color:var(--ds-palette-black-70)}.native-select.sc-ds-select:disabled{background-color:var(--ds-overlay-black-10);color:var(--ds-palette-black-40);cursor:not-allowed}.native-select-wrapper.sc-ds-select:hover{background-color:var(--ds-palette-black-10)}.native-select-wrapper.sc-ds-select:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.native-select-wrapper--disabled.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.native-select-wrapper--invalid.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}";
+
+const selectIdGenerator = idGenerator('ds-select');
+const DsSelect$1 = proxyCustomElement(class DsSelect extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.dsChange = createEvent(this, "dsChange");
+    }
+    get el() { return this; }
+    dsId = selectIdGenerator.next().value;
+    dsTitle = 'Default Select';
+    dsPlaceholder = 'Select an option';
+    dsVariant = 'default';
+    dsClearable = true;
+    dsDisabled = false;
+    dsInvalid = false;
+    dsErrorText = '';
+    dsIcon;
+    dsValue = null;
+    dsLoading = false;
+    dsLoadingText = 'Loading options...';
+    dsOptionsError = false;
+    dsOptionsErrorTitle = "We couldn’t load the options";
+    dsOptionsErrorText = "Try again or if the problem persists contact support.";
+    selectedOption = null;
+    isOpen = false;
+    activeIndex = null;
+    inputValidityId = `${this.dsId}-validity`;
+    dsChange;
+    connectedCallback() {
+        this.el.addEventListener('focusout', this.handleFocusOut);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('focusout', this.handleFocusOut);
+    }
+    customSelectRef;
+    nativeSelectRef;
+    handleFocusOut = (e) => {
+        const nextFocused = (e && 'relatedTarget' in e) ? e.relatedTarget : null;
+        if (this.isOpen &&
+            (!nextFocused || !this.el.contains(nextFocused))) {
+            this.isOpen = false;
+        }
+    };
+    handleOptionSelect(option) {
+        if (this.dsDisabled)
+            return;
+        this.selectedOption = option.label;
+        this.dsValue = option.dsValue;
+        this.isOpen = false;
+        this.dsChange.emit(option.dsValue);
+    }
+    selectOption(option) {
+        if (!option)
+            return;
+        if (option.dsDisabled)
+            return;
+        const labelEl = option.querySelector('.option-label');
+        let label = '';
+        if (labelEl) {
+            const descEl = labelEl.querySelector('.option-description');
+            if (descEl) {
+                label = labelEl.textContent?.replace(descEl.textContent || '', '').trim() || '';
+            }
+            else {
+                label = labelEl.textContent?.trim() || '';
+            }
+        }
+        else {
+            label = option.textContent?.trim() || '';
+        }
+        this.selectedOption = label;
+        this.dsValue = option.dsValue;
+        const options = this.getAllOptions();
+        const idx = options.findIndex(opt => String(opt.dsValue) === String(option.dsValue));
+        if (idx !== -1) {
+            this.activeIndex = idx;
+        }
+        this.isOpen = false;
+        this.dsChange.emit(option.dsValue);
+        const combobox = this.el.querySelector(`[id="${this.dsId}"]`);
+        combobox?.focus();
+    }
+    toggleDropdown() {
+        if (this.dsDisabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            setTimeout(() => {
+                const options = this.getAllOptions();
+                let focusIndex = 0;
+                if (this.dsValue) {
+                    const selectedIndex = options.findIndex(opt => String(opt.dsValue) === String(this.dsValue));
+                    focusIndex = selectedIndex !== -1 ? selectedIndex : 0;
+                }
+                else {
+                    const firstEnabled = options.findIndex(opt => !opt.dsDisabled);
+                    focusIndex = firstEnabled !== -1 ? firstEnabled : 0;
+                }
+                this.activeIndex = focusIndex;
+                this.scrollToActiveOption();
+                const optionEls = this.el.querySelectorAll('ds-option');
+                const active = optionEls[this.activeIndex];
+                active?.focus();
+            }, 0);
+        }
+    }
+    handleClearSelection() {
+        if (this.dsDisabled)
+            return;
+        this.selectedOption = null;
+        this.dsValue = null;
+        const options = this.getAllOptions();
+        const firstEnabled = options.findIndex(opt => !opt.dsDisabled);
+        this.activeIndex = firstEnabled !== -1 ? firstEnabled : 0;
+        this.isOpen = false;
+        this.dsChange.emit(null);
+        const combobox = this.el.querySelector(`[id="${this.dsId}"]`);
+        combobox?.focus();
+    }
+    handleScroll(event) {
+        const target = event.target;
+        const isScrolledToTop = target.scrollTop === 0;
+        const isScrolledToBottom = Math.ceil(target.scrollTop + target.clientHeight) >= target.scrollHeight;
+        if (isScrolledToTop) {
+            target.classList.remove('scrolled-up');
+        }
+        else {
+            target.classList.add('scrolled-up');
+        }
+        if (isScrolledToBottom) {
+            target.classList.remove('scrolled-down');
+        }
+        else {
+            target.classList.add('scrolled-down');
+        }
+        const groups = target.querySelectorAll('.group');
+        groups.forEach((group) => {
+            const firstOption = group.querySelector('.option');
+            const groupLabel = group.querySelector('.group-label');
+            if (!firstOption || !groupLabel)
+                return;
+            const firstOptionTop = firstOption.getBoundingClientRect().top;
+            const groupLabelBottom = groupLabel.getBoundingClientRect().bottom;
+            const containerTop = target.getBoundingClientRect().top;
+            if (firstOptionTop < groupLabelBottom && containerTop < groupLabelBottom) {
+                groupLabel.classList.add('shadow');
+                firstOption.style.marginTop = `${groupLabelBottom - firstOptionTop}px`;
+            }
+            else {
+                groupLabel.classList.remove('shadow');
+                firstOption.style.marginTop = '';
+            }
+        });
+    }
+    handleKeyDown(event) {
+        if (this.isOpen) {
+            return;
+        }
+        if (event.key === 'ArrowDown' ||
+            event.key === 'ArrowUp' ||
+            event.key === 'Enter' ||
+            event.key === ' ') {
+            event.preventDefault();
+            this.isOpen = true;
+            const options = this.getAllOptions();
+            let focusIndex = 0;
+            if (this.dsValue) {
+                const selectedIndex = options.findIndex(opt => String(opt.dsValue) === String(this.dsValue));
+                focusIndex = selectedIndex !== -1 ? selectedIndex : 0;
+            }
+            else {
+                const firstEnabled = options.findIndex(opt => !opt.dsDisabled);
+                focusIndex = firstEnabled !== -1 ? firstEnabled : 0;
+            }
+            this.activeIndex = focusIndex;
+            this.scrollToActiveOption();
+            setTimeout(() => {
+                const optionsList = this.el.querySelector('.options-list');
+                optionsList?.focus();
+            }, 0);
+        }
+    }
+    scrollToActiveOption() {
+        if (this.activeIndex === null)
+            return;
+        const optionsList = this.el.querySelector('.options-list');
+        const allOptions = optionsList?.querySelectorAll('.option');
+        if (!allOptions || this.activeIndex >= allOptions.length)
+            return;
+        const activeOption = allOptions[this.activeIndex];
+        if (activeOption) {
+            activeOption.focus();
+            activeOption.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    getAllOptions() {
+        return Array.from(this.el.querySelectorAll('ds-option'));
+    }
+    handleStateChange() {
+        this.updateOptionStates();
+    }
+    updateOptionStates() {
+        const options = this.getAllOptions();
+        options.forEach((opt, idx) => {
+            opt.dsActive = idx === this.activeIndex;
+            opt.dsSelected = opt.dsValue === this.dsValue;
+            if (idx === this.activeIndex) {
+                opt.setAttribute('active', '');
+            }
+            else {
+                opt.removeAttribute('active');
+            }
+            if (opt.dsValue === this.dsValue) {
+                opt.setAttribute('selected', '');
+            }
+            else {
+                opt.removeAttribute('selected');
+            }
+        });
+    }
+    renderNativeSelect() {
+        const ariaDescribedBy = this.dsErrorText ? this.inputValidityId : undefined;
+        const selectId = this.dsId || `${this.inputValidityId}-select`;
+        const baseClass = 'native-select-wrapper';
+        return (h("div", null, this.dsTitle && h("label", { class: "select-title", htmlFor: selectId }, this.dsTitle), h("div", { class: classNames(`${baseClass}`, {
+                [`${baseClass}--disabled`]: this.dsDisabled,
+                [`${baseClass}--invalid`]: !!this.dsErrorText,
+            }), onClick: () => {
+                if (!this.dsDisabled) {
+                    const selectElement = this.nativeSelectRef;
+                    if (selectElement) {
+                        selectElement.focus();
+                        selectElement.click();
+                    }
+                }
+            } }, h("div", { class: "selected-text", "aria-hidden": "true" }, this.selectedOption || this.dsPlaceholder || 'Select an option'), h("select", { ref: el => this.nativeSelectRef = el, id: selectId, class: "native-select", disabled: this.dsDisabled, required: !!this.dsErrorText, "aria-describedby": ariaDescribedBy, "aria-controls": `${selectId}-listbox`, "aria-haspopup": "listbox", onInput: (event) => {
+                const target = event.target;
+                this.dsValue = target.value;
+                this.selectedOption = target.selectedOptions[0]?.textContent || '';
+                this.dsChange.emit(target.value);
+            } }, h("option", { value: "", disabled: true, selected: !this.selectedOption }, this.dsPlaceholder || 'Select an option'), h("slot", { name: "native" })), h("ds-icon", { class: "dropdown-icon", dsName: "keyboard_arrow_down" })), !!this.dsErrorText && (h("ds-input-validity", { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
+    }
+    renderCustomSelect() {
+        const noneSelected = !this.selectedOption;
+        const selectId = this.dsId || `${this.inputValidityId}-custom-select`;
+        const labelId = `${selectId}-label`;
+        const ariaDescribedBy = this.dsErrorText ? this.inputValidityId : undefined;
+        const optionsContainerId = `ds-select-options-${selectId}`;
+        const baseClass = 'custom-select';
+        return (h("div", null, this.dsTitle && (h("div", { class: "select-title-wrapper" }, h("label", { id: labelId, class: "select-title", htmlFor: selectId, onClick: () => {
+                const customSelect = this.customSelectRef;
+                customSelect?.focus();
+                this.toggleDropdown();
+            } }, this.dsTitle))), h("div", { class: "custom-select-wrapper", style: { position: 'relative' } }, h("div", { id: selectId, ref: el => this.customSelectRef = el, class: classNames(`${baseClass}`, {
+                [`${baseClass}--open`]: this.isOpen,
+                [`${baseClass}--none-selected`]: noneSelected,
+                [`${baseClass}--disabled`]: this.dsDisabled,
+                [`${baseClass}--invalid`]: !!this.dsErrorText,
+                [`${baseClass}--has-icon`]: !!this.dsIcon,
+            }), tabIndex: this.dsDisabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-disabled": String(this.dsDisabled), "aria-labelledby": labelId, "aria-describedby": ariaDescribedBy, "aria-controls": optionsContainerId, "aria-activedescendant": this.activeIndex !== null ? `${selectId}-option-${this.activeIndex}` : undefined, onClick: () => {
+                if (!this.dsDisabled) {
+                    this.toggleDropdown();
+                }
+            }, onKeyDown: (event) => {
+                if (!this.dsDisabled) {
+                    this.handleKeyDown(event);
+                }
+            } }, h("div", { class: "selected-option" }, this.dsIcon && (h("ds-icon", { class: "placeholder-icon", dsName: this.dsIcon })), this.selectedOption || this.dsPlaceholder || 'Select an option'), this.dsClearable && this.selectedOption && !this.dsDisabled && (h("ds-button", { class: "clear-button", dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", onClick: (event) => {
+                event.stopPropagation();
+                this.handleClearSelection();
+            }, onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.handleClearSelection();
+                }
+            }, "aria-label": "Clear selection" })), h("ds-icon", { class: "dropdown-icon", dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), h("div", { id: optionsContainerId, class: "options-container", onClick: (e) => {
+                const option = e.target.closest('ds-option');
+                if (option && !option.dsDisabled) {
+                    this.selectOption(option);
+                }
+            } }, h("ds-options", { dsActiveIndex: this.activeIndex, onDsOptionsActiveIndexChange: e => this.activeIndex = e.detail, onDsOptionsEsc: () => { this.isOpen = false; }, dsLabelId: labelId, dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsOptionsError: this.dsOptionsError, dsOptionsErrorTitle: this.dsOptionsErrorTitle, dsOptionsErrorText: this.dsOptionsErrorText }, h("slot", null)))), !!this.dsErrorText && (h("ds-input-validity", { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
+    }
+    render() {
+        return (h("div", { key: 'e5635c0348a16fe23dd8f81827f5d6aecdd21baa', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
+            ? this.renderNativeSelect()
+            : this.renderCustomSelect()));
+    }
+    static get watchers() { return {
+        "activeIndex": ["handleStateChange"],
+        "dsValue": ["handleStateChange"]
+    }; }
+    static get style() { return dsSelectCss; }
+}, [6, "ds-select", {
+        "dsId": [1, "ds-id"],
+        "dsTitle": [1, "ds-title"],
+        "dsPlaceholder": [1, "ds-placeholder"],
+        "dsVariant": [1, "ds-variant"],
+        "dsClearable": [4, "ds-clearable"],
+        "dsDisabled": [4, "ds-disabled"],
+        "dsInvalid": [4, "ds-invalid"],
+        "dsErrorText": [1, "ds-error-text"],
+        "dsIcon": [1, "ds-icon"],
+        "dsValue": [513, "ds-value"],
+        "dsLoading": [4, "ds-loading"],
+        "dsLoadingText": [1, "ds-loading-text"],
+        "dsOptionsError": [4, "ds-options-error"],
+        "dsOptionsErrorTitle": [1, "ds-options-error-title"],
+        "dsOptionsErrorText": [1, "ds-options-error-text"],
+        "selectedOption": [32],
+        "isOpen": [32],
+        "activeIndex": [32]
+    }, undefined, {
+        "activeIndex": ["handleStateChange"],
+        "dsValue": ["handleStateChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-select", "ds-button", "ds-icon", "ds-input-validity", "ds-options", "ds-spinner", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsSelect$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":
+            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 DsSelect = DsSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsSelect, defineCustomElement };

package/dist/components/ds-spinner2.js

@@ -51,11 +51,11 @@ const DsSpinner = proxyCustomElement(class DsSpinner extends H {
         });
         const textClasses = classNames('ds-spinner__text', textSizeClass, `ds-spinner__text--${this.dsSpinnerColor}`);
         const segmentClasses = index => classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
-        return (h("div", { key: 'd092937b6f14873e711d9fe3f0cc6d89aab5d998', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (h("div", { key: '0fa992bde3a9244616f5b6ba2120ae5f6d0db76e', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
                 '--spinner-size': `${sizeInPixels}px`,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsSpinnerColor == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: 'b682988e7ce7b7ad97f1b75984d93cf6ac2a57b1', class: "ds-spinner__spinner" }, h("div", { key: '730eb4ea883499e6cdf7995973c7de4f4a70acf5', class: segmentClasses(1) }), h("div", { key: '75abc70543d64621ce44782aba8e18bdfbddb14e', class: segmentClasses(2) }), h("div", { key: '51c6c07fd3310878e791f28fdf423c059008e433', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h("ds-visually-hidden", { key: '3aa887895521f8b8f920266de27fd1c5dc8f7641' }, h("span", { key: 'de4ca68acd2c88ab8e8a0fa63dc0f8cc312ee159' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: 'a65851aeda7507f43c0c9468cbd80f78a3de8db2', class: textClasses }, this.dsText)));
+            }, ...this.inheritedAttributes }, h("div", { key: 'd3736ffa6a0dba10813bf044b43f0de19c4d20fb', class: "ds-spinner__spinner" }, h("div", { key: 'b23b329401fd853c5e24f834ce9ec73b15217a58', class: segmentClasses(1) }), h("div", { key: 'f9d619f5a9ad5dac4ebc606caed35c98c2b9e692', class: segmentClasses(2) }), h("div", { key: '5165008462494014e5fb29d795b449363f819e82', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h("ds-visually-hidden", { key: '4597804a73f0223ca7b58e09a8346b1cce68c9a1' }, h("span", { key: 'cdd40dbb408478afc55ea7a80a8aac1db5a34729' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '385ccceedbf6750de761d7aec6503dccf1445d3d', class: textClasses }, this.dsText)));
     }
     static get style() { return dsSpinnerCss; }
 }, [1, "ds-spinner", {

package/dist/components/ds-tag.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsTag extends Components.DsTag, HTMLElement {}
+export const DsTag: {
+    prototype: DsTag;
+    new (): DsTag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-tag.js

@@ -0,0 +1,70 @@
+import { p as proxyCustomElement, H, h } from './index2.js';
+import { c as classNames } from './index3.js';
+import { d as defineCustomElement$4 } from './ds-icon2.js';
+import { d as defineCustomElement$3 } from './ds-link2.js';
+import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
+
+const dsTagCss = ".ds-tag{box-sizing:border-box;display:inline-flex;align-items:center;min-height:1.5rem;background-color:var(--ds-palette-black-05);padding:calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);gap:var(--ds-spacing-3xSmall)}.ds-tag.ds-tag--default{color:var(--ds-palette-black-95);background-color:var(--ds-palette-black-05)}.ds-tag.ds-tag--default:hover:has(ds-link){background-color:var(--ds-palette-black-10)}.ds-tag.ds-tag--default:active:has(ds-link){background-color:var(--ds-palette-black-20)}.ds-tag.ds-tag--black{color:var(--ds-palette-white);background-color:var(--ds-palette-black-95)}.ds-tag.ds-tag--black:hover:has(ds-link){background-color:var(--ds-palette-black-80)}.ds-tag.ds-tag--black:active:has(ds-link){background-color:var(--ds-palette-black-70)}.ds-tag.ds-tag--white{color:var(--ds-palette-black-95);background-color:var(--ds-palette-white)}.ds-tag.ds-tag--white:hover:has(ds-link){background-color:var(--ds-palette-black-10)}.ds-tag.ds-tag--white:active:has(ds-link){background-color:var(--ds-palette-black-20)}.ds-tag.ds-tag--info{color:var(--ds-palette-black-95);background-color:var(--ds-palette-blue-05)}.ds-tag.ds-tag--info:hover:has(ds-link){background-color:var(--ds-palette-blue-10)}.ds-tag.ds-tag--info:active:has(ds-link){background-color:var(--ds-palette-blue-20)}.ds-tag.ds-tag--danger{color:var(--ds-palette-black-95);background-color:var(--ds-palette-red-05)}.ds-tag.ds-tag--danger:hover:has(ds-link){background-color:var(--ds-palette-red-10)}.ds-tag.ds-tag--danger:active:has(ds-link){background-color:var(--ds-palette-red-20)}.ds-tag.ds-tag--attention{color:var(--ds-palette-black-95);background-color:var(--ds-palette-yellow-05)}.ds-tag.ds-tag--attention:hover:has(ds-link){background-color:var(--ds-palette-yellow-10)}.ds-tag.ds-tag--attention:active:has(ds-link){background-color:var(--ds-palette-yellow-20)}.ds-tag.ds-tag--success{color:var(--ds-palette-black-95);background-color:var(--ds-palette-green-05)}.ds-tag.ds-tag--success:hover:has(ds-link){background-color:var(--ds-palette-green-10)}.ds-tag.ds-tag--success:active:has(ds-link){background-color:var(--ds-palette-green-20)}.ds-tag__text{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-tag--link{padding:unset}.ds-tag--link ds-link::part(ds-link){min-height:1.5rem;padding:calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall)}";
+
+const DsTag$1 = proxyCustomElement(class DsTag extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    dsText = 'Label';
+    dsIcon = '';
+    dsIconPosition = 'start';
+    dsDownload;
+    dsTarget;
+    dsHref;
+    dsColour = 'default';
+    render() {
+        const classes = classNames('ds-tag', `ds-tag--${this.dsColour}`, {
+            'ds-tag--link': !!this.dsHref,
+        });
+        return (h("div", { key: 'a54bbc1ec29cfa0c6df2f9e40765a746d1e6fcf8', class: classes }, h("slot", { key: '2c4a3c20b956798f114477bc22be6e796cca3f1f', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h("ds-icon", { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '30e3768b29339c327449472b9f530d564d7e0269' }, this.dsHref ? (h("ds-link", { dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: "ds-tag__text" }, this.dsText))), h("slot", { key: '26cdf6d6b8dea7de55eade2f1b3807da4b9abb24', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h("ds-icon", { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+    }
+    static get style() { return dsTagCss; }
+}, [1, "ds-tag", {
+        "dsText": [1, "ds-text"],
+        "dsIcon": [1, "ds-icon"],
+        "dsIconPosition": [1, "ds-icon-position"],
+        "dsDownload": [4, "ds-download"],
+        "dsTarget": [1, "ds-target"],
+        "dsHref": [1, "ds-href"],
+        "dsColour": [1, "ds-colour"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-tag", "ds-icon", "ds-link", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-tag":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsTag$1);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsTag = DsTag$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsTag, defineCustomElement };