@uh-design-system/component-library 0.7.0 → 0.7.1

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, a as getElement, h, c as createEvent } from './index-D-gUvxcp.js';
-import { i as idGenerator } from './utils-CqaqnfY4.js';
+import { h, r as registerInstance, a as getElement, c as createEvent } from './index-CIXO9B7A.js';
+import { d as declareComponentDependencies, t as transformTagName, i as idGenerator } from './utils-hnAo1pVs.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
 
 const dsOptionCss = ".sc-ds-option:root,.sc-ds-option-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.option.sc-ds-option{display:flex;align-items:center;justify-content:space-between;min-height:2.5rem;padding:0.625rem var(--ds-spacing-small);position:relative;cursor:pointer;background-color:var(--ds-palette-white);color:var(--ds-palette-black-95)}.option.sc-ds-option:hover{background-color:var(--ds-palette-black-10)}.option.sc-ds-option:active{background-color:var(--ds-palette-black-20)}.option.active.sc-ds-option{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 1)}.option.selected.sc-ds-option{background-color:var(--ds-palette-mainBlue-70);color:var(--ds-palette-white)}.option.selected.sc-ds-option .check-icon.sc-ds-option{visibility:visible;color:var(--ds-palette-white)}.option.selected.sc-ds-option:hover{background-color:var(--ds-palette-mainBlue-80)}.option.selected.sc-ds-option:active{background-color:var(--ds-palette-mainBlue-90)}.option.sc-ds-option .option-label.sc-ds-option{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;grid-column:1;grid-row:1}.option.sc-ds-option .check-icon.sc-ds-option{grid-column:2;grid-row:1/span 2;align-self:center;justify-self:end;margin-left:auto;visibility:hidden}.option.sc-ds-option .option-description.sc-ds-option{color:var(--ds-palette-black-70);font-size:var(--ds-fontSize-14);margin-top:var(--ds-spacing-3xSmall);line-height:1.3;grid-column:1;grid-row:2}.option.sc-ds-option .option-description.sc-ds-option:not(:empty){display:block}.option.selected.sc-ds-option .option-description.sc-ds-option{color:var(--ds-palette-white)}.option.sc-ds-option .option-check.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}";
@@ -29,17 +29,19 @@ const DsOption = class {
         this.internalTabIndex = this.dsActive && !this.dsDisabled ? 0 : -1;
     }
     render() {
-        return (h("div", { key: '1299b9ceff5e1c29230a7693acf22a7f1c0b0dac', ref: el => this.optionRef = el, class: {
+        const DsIcon = transformTagName('ds-icon', 'ds-option', this.el);
+        return (h("div", { key: 'b051e2ccd61a02f1c33e5c74f7f66dec856e1d04', ref: el => this.optionRef = el, class: {
                 option: true,
                 active: this.dsActive,
                 selected: this.dsSelected,
                 disabled: this.dsDisabled,
-            }, role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), tabIndex: this.internalTabIndex }, h("span", { key: 'a02d4b4551d4c248a3eeebe8f365d889358ac2ac', class: "option-label" }, h("slot", { key: '9b55b8fb9d075a87bc3868d15133d2841de0c12b' }), this.dsDescription && h("span", { key: '9f1123d8a1d60ba2237ed1cd2a8bfd8bee1bcf2b', class: "option-description" }, this.dsDescription)), this.dsSelected && (h("ds-icon", { key: 'd1a0545f6599e154caf8df710aa5750539f8dfee', dsName: "check", class: "option-check", "aria-hidden": "true" }))));
+            }, role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), tabIndex: this.internalTabIndex }, h("span", { key: '8114317ed212116893f288753be27bc57487218c', class: "option-label" }, h("slot", { key: 'edc1ae43b1d32fd4d145e6f5c5bb296202e4f6bf' }), this.dsDescription && h("span", { key: '7a250b046d95c7bd74d742029100d7aed9a0b032', class: "option-description" }, this.dsDescription)), this.dsSelected && (h(DsIcon, { key: '23432b9e3f29189c6030003e61c02be9469a8a2e', dsName: "check", class: "option-check", "aria-hidden": "true" }))));
     }
     static get watchers() { return {
         "dsActive": ["dsActiveObserver"]
     }; }
 };
+declareComponentDependencies([h("ds-icon", null)]);
 DsOption.style = dsOptionCss;
 
 const dsOptionGroupCss = ".group.sc-ds-option-group ul.sc-ds-option-group{padding:0}.group-label.sc-ds-option-group{position:sticky;display:block;top:0;background-color:var(--ds-palette-black-03);z-index:1;padding:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.group-label.shadow.sc-ds-option-group{box-shadow:0 -2px 7px var(--ds-overlay-black-50)}";
@@ -57,7 +59,7 @@ const DsOptionGroup = class {
         this.groupId = `ds-option-group-label-${this.dsLabel.replace(/\s+/g, '-').toLowerCase()}`;
     }
     render() {
-        return (h("div", { key: '2471766ca7de5398081839e044d55fdddb578c3a', class: "group", role: "group", "aria-labelledby": this.groupId }, h("div", { key: 'ae62a44855bc54f481ce12ec69f076798bf99699', class: "group-label", id: this.groupId }, this.dsLabel), h("slot", { key: '365deafb4b1add8c532eb261e3d73b8246f8bcab' })));
+        return (h("div", { key: 'c764a70cf7cd2881404ea90b114957227259d37c', class: "group", role: "group", "aria-labelledby": this.groupId }, h("div", { key: '6a38a5db89ff8462704c740a7921e40312a9f466', class: "group-label", id: this.groupId }, this.dsLabel), h("slot", { key: 'b6bac535b5c569175f9fb84550d823829208142b' })));
     }
     static get watchers() { return {
         "dsLabel": ["dsLabelObserver"]
@@ -117,14 +119,17 @@ const DsOptions = class {
             }
         });
     };
+    get DsOptionTag() {
+        return transformTagName('ds-option', 'ds-options', this.el);
+    }
     focusActiveOption() {
-        const optionEls = Array.from(this.el.querySelectorAll('ds-option'));
+        const optionEls = Array.from(this.el.querySelectorAll(this.DsOptionTag));
         if (optionEls[this.dsActiveIndex]) {
             optionEls[this.dsActiveIndex].focus();
         }
     }
     handleKeyDown = (e) => {
-        const optionEls = Array.from(this.el.querySelectorAll('ds-option'));
+        const optionEls = Array.from(this.el.querySelectorAll(this.DsOptionTag));
         if (!optionEls.length)
             return;
         let nextIndex = this.dsActiveIndex;
@@ -175,12 +180,15 @@ const DsOptions = class {
     dsOptionsErrorTitle = "We couldn’t load the options";
     dsOptionsErrorText = "Try again or if the problem persists contact support.";
     render() {
-        return (h("div", { key: '7f582725e7e7e4119ba636b2b327b5e530e706cd', class: "options-list", role: "listbox", tabindex: 0, "aria-labelledby": this.dsLabelId, onKeyDown: this.handleKeyDown, ref: el => this.optionsListRef = el, onScroll: this.handleScroll, onFocus: this.updateScrimClasses }, h("slot", { key: '652b05b45610f838be7ced7f4c5b275d7c18d6d4', name: "groups" }), h("div", { key: 'd299689df895de9f7ccc2c716ce99a7fe3d634bd', class: "options-list-inner", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '124ca6b19c1a4bce6fc1f317d2bdb26c97f60529', class: "top-scrim", "aria-hidden": "true" }), this.dsOptionsError ? (h("div", { class: "options-error" }, h("ds-icon", { dsName: "warning", dsSize: '2rem', class: "options-error-icon" }), h("div", { class: "options-error--error-message" }, h("div", { class: "options-error--error-title" }, this.dsOptionsErrorTitle), h("div", { class: "options-error--error-text" }, this.dsOptionsErrorText)))) : this.dsLoading ? (h("div", { class: "options-loading" }, h("ds-spinner", { dsSize: "large" }), h("div", { class: "options-loading--loading-text" }, this.dsLoadingText))) : (h("slot", null)), h("div", { key: 'c50bb98b3eea026bac446c847b8d0a47136a3156', class: "bottom-scrim", "aria-hidden": "true" }))));
+        const DsIcon = transformTagName('ds-icon', 'ds-options', this.el);
+        const DsSpinner = transformTagName('ds-spinner', 'ds-options', this.el);
+        return (h("div", { key: '656aaa2ab4989958bf7d33914df5f082c91f7477', class: "options-list", role: "listbox", tabindex: 0, "aria-labelledby": this.dsLabelId, onKeyDown: this.handleKeyDown, ref: el => this.optionsListRef = el, onScroll: this.handleScroll, onFocus: this.updateScrimClasses }, h("slot", { key: '9aaef6b026ca0b5d8c7264ee69457df801fbdc19', name: "groups" }), h("div", { key: '399b0989af2d6cd0eadc10e18b10e2dac2e0f976', class: "options-list-inner", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '5eabc020be41e0fb2afcdb5c4e2cb3519212ac00', class: "top-scrim", "aria-hidden": "true" }), this.dsOptionsError ? (h("div", { class: "options-error" }, h(DsIcon, { dsName: "warning", dsSize: '2rem', class: "options-error-icon" }), h("div", { class: "options-error--error-message" }, h("div", { class: "options-error--error-title" }, this.dsOptionsErrorTitle), h("div", { class: "options-error--error-text" }, this.dsOptionsErrorText)))) : this.dsLoading ? (h("div", { class: "options-loading" }, h(DsSpinner, { dsSize: "large" }), h("div", { class: "options-loading--loading-text" }, this.dsLoadingText))) : (h("slot", null)), h("div", { key: 'a3180baebc60c132bd328e10fa77a554642a9d22', class: "bottom-scrim", "aria-hidden": "true" }))));
     }
     static get watchers() { return {
         "dsActiveIndex": ["onActiveIndexChange"]
     }; }
 };
+declareComponentDependencies([h("ds-icon", null), h("ds-spinner", null)]);
 DsOptions.style = dsOptionsCss;
 
 const dsSelectCss = ".sc-ds-select:root,.sc-ds-select-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.native-select-wrapper.sc-ds-select,.custom-select.sc-ds-select{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-palette-black-50);background-color:var(--ds-palette-white);color:var(--ds-palette-black-70);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.disabled.native-select-wrapper.sc-ds-select,.disabled.custom-select.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.disabled.native-select-wrapper.sc-ds-select .dropdown-icon.sc-ds-select,.disabled.custom-select.sc-ds-select .dropdown-icon.sc-ds-select{color:var(--ds-palette-black-40);border-left-color:var(--ds-overlay-black-15);cursor:not-allowed}.invalid.native-select-wrapper.sc-ds-select,.invalid.custom-select.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.invalid.native-select-wrapper.sc-ds-select:not(.open):not(.disabled):active,.invalid.custom-select.sc-ds-select:not(.open):not(.disabled):active{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.native-select-wrapper.sc-ds-select:not(.open):not(.invalid):not(.disabled):hover,.custom-select.sc-ds-select:not(.open):not(.invalid):not(.disabled):hover{background-color:var(--ds-palette-black-10)}.custom-select.sc-ds-select .selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall)}.custom-select.sc-ds-select .placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.custom-select--open.sc-ds-select+.options-container.sc-ds-select{display:block;box-shadow:0rem var(--ds-spacing-4xSmall) var(--ds-spacing-3xSmall) calc(-1 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15), 0rem var(--ds-spacing-3xSmall) calc(var(--ds-spacing-xSmall) / 2) calc(-0.5 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15)}.custom-select--open.sc-ds-select .options-list.sc-ds-select{display:block}.custom-select.sc-ds-select:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled):hover{background-color:var(--ds-palette-black-10)}.custom-select.sc-ds-select:active:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled){background-color:var(--ds-palette-black-20)}.custom-select--open.sc-ds-select,.custom-select.sc-ds-select:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.custom-select--open.sc-ds-select:not(.custom-select--open--invalid,.custom-select.sc-ds-select:focus-visible--invalid),.custom-select.sc-ds-select:focus-visible:not(.custom-select--open--invalid,.custom-select.sc-ds-select:focus-visible--invalid){border-color:var(--ds-palette-mainBlue-70)}.custom-select--disabled.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.custom-select--disabled.sc-ds-select .dropdown-icon.sc-ds-select{color:var(--ds-palette-black-40);border-left-color:var(--ds-overlay-black-15);cursor:not-allowed}.custom-select--invalid.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.custom-select--invalid.sc-ds-select:not(.custom-select--invalid--open):not(.custom-select--invalid--disabled):active{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.selected-option.sc-ds-select{flex:1;font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.custom-select--has-icon.sc-ds-select .selected-option.sc-ds-select{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.dropdown-icon.sc-ds-select{align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-overlay-black-15);color:var(--ds-palette-black-70);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.clear-button.sc-ds-select,.dropdown-icon.sc-ds-select{cursor:pointer}.select-title.sc-ds-select{display:inline-block;font-weight:var(--ds-fontWeight-semibold);margin-bottom:var(--ds-spacing-2xSmall);color:var(--ds-palette-black-95)}.selected-text.sc-ds-select{flex:1;padding:0 var(--ds-spacing-xSmall);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.options-container.sc-ds-select{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);background-color:var(--ds-palette-white)}.native-select.sc-ds-select{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;outline:none;padding:0 var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-16);font-family:inherit;background-color:transparent;color:inherit;flex:1}.native-select.sc-ds-select::placeholder{color:var(--ds-palette-black-70)}.native-select.sc-ds-select:disabled{background-color:var(--ds-overlay-black-10);color:var(--ds-palette-black-40);cursor:not-allowed}.native-select-wrapper.sc-ds-select:hover{background-color:var(--ds-palette-black-10)}.native-select-wrapper.sc-ds-select:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.native-select-wrapper--disabled.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.native-select-wrapper--invalid.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}";
@@ -218,6 +226,15 @@ const DsSelect = class {
     disconnectedCallback() {
         this.el.removeEventListener('focusout', this.handleFocusOut);
     }
+    get DsIconTag() {
+        return transformTagName('ds-icon', 'ds-select', this.el);
+    }
+    get DsInputValidityTag() {
+        return transformTagName('ds-input-validity', 'ds-select', this.el);
+    }
+    get DsOptionTag() {
+        return transformTagName('ds-option', 'ds-select', this.el);
+    }
     customSelectRef;
     nativeSelectRef;
     handleFocusOut = (e) => {
@@ -284,7 +301,7 @@ const DsSelect = class {
                 }
                 this.activeIndex = focusIndex;
                 this.scrollToActiveOption();
-                const optionEls = this.el.querySelectorAll('ds-option');
+                const optionEls = this.el.querySelectorAll(this.DsOptionTag);
                 const active = optionEls[this.activeIndex];
                 active?.focus();
             }, 0);
@@ -380,7 +397,7 @@ const DsSelect = class {
         }
     }
     getAllOptions() {
-        return Array.from(this.el.querySelectorAll('ds-option'));
+        return Array.from(this.el.querySelectorAll(this.DsOptionTag));
     }
     handleStateChange() {
         this.updateOptionStates();
@@ -424,7 +441,7 @@ const DsSelect = class {
                 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" }))));
+            } }, h("option", { value: "", disabled: true, selected: !this.selectedOption }, this.dsPlaceholder || 'Select an option'), h("slot", { name: "native" })), h(this.DsIconTag, { class: "dropdown-icon", dsName: "keyboard_arrow_down" })), !!this.dsErrorText && (h(this.DsInputValidityTag, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
     }
     renderCustomSelect() {
         const noneSelected = !this.selectedOption;
@@ -433,6 +450,8 @@ const DsSelect = class {
         const ariaDescribedBy = this.dsErrorText ? this.inputValidityId : undefined;
         const optionsContainerId = `ds-select-options-${selectId}`;
         const baseClass = 'custom-select';
+        const DsButton = transformTagName('ds-button', 'ds-select', this.el);
+        const DsOptions = transformTagName('ds-options', 'ds-select', this.el);
         return (h("div", null, this.dsTitle && (h("div", { class: "select-title-wrapper" }, h("label", { id: labelId, class: "select-title", htmlFor: selectId, onClick: () => {
                 const customSelect = this.customSelectRef;
                 customSelect?.focus();
@@ -451,7 +470,7 @@ const DsSelect = class {
                 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) => {
+            } }, h("div", { class: "selected-option" }, this.dsIcon && (h(this.DsIconTag, { class: "placeholder-icon", dsName: this.dsIcon })), this.selectedOption || this.dsPlaceholder || 'Select an option'), this.dsClearable && this.selectedOption && !this.dsDisabled && (h(DsButton, { class: "clear-button", dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", onClick: (event) => {
                 event.stopPropagation();
                 this.handleClearSelection();
             }, onKeyDown: (event) => {
@@ -460,15 +479,15 @@ const DsSelect = class {
                     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');
+            }, "aria-label": "Clear selection" })), h(this.DsIconTag, { class: "dropdown-icon", dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), h("div", { id: optionsContainerId, class: "options-container", onClick: (e) => {
+                const option = e.target.closest(this.DsOptionTag);
                 if (option && !option.dsDisabled) {
                     this.selectOption(option);
                 }
-            } }, h("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" }))));
+            } }, h(DsOptions, { dsActiveIndex: this.activeIndex, onDsOptionsActiveIndexChange: e => this.activeIndex = e.detail, onDsOptionsEsc: () => { this.isOpen = false; }, dsLabelId: labelId, dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsOptionsError: this.dsOptionsError, dsOptionsErrorTitle: this.dsOptionsErrorTitle, dsOptionsErrorText: this.dsOptionsErrorText }, h("slot", null)))), !!this.dsErrorText && (h(this.DsInputValidityTag, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
     }
     render() {
-        return (h("div", { key: 'e5635c0348a16fe23dd8f81827f5d6aecdd21baa', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
+        return (h("div", { key: '4716b1f759f34fd18f9f776fec0c21dcb6f62c00', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
             ? this.renderNativeSelect()
             : this.renderCustomSelect()));
     }
@@ -477,6 +496,12 @@ const DsSelect = class {
         "dsValue": ["handleStateChange"]
     }; }
 };
+declareComponentDependencies([
+    h("ds-icon", null),
+    h("ds-input-validity", null),
+    h("ds-button", null),
+    h("ds-options", null)
+]);
 DsSelect.style = dsSelectCss;
 
 export { DsOption as ds_option, DsOptionGroup as ds_option_group, DsOptions as ds_options, DsSelect as ds_select };

package/dist/esm/ds-radio-button-group.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-D-gUvxcp.js';
+import { h, r as registerInstance, c as createEvent, a as getElement, H as Host } from './index-CIXO9B7A.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { i as idGenerator } from './utils-CqaqnfY4.js';
+import { d as declareComponentDependencies, i as idGenerator, t as transformTagName } from './utils-hnAo1pVs.js';
 import { b as inheritAriaAttributes } from './attributes-BD_lNRxn.js';
-import { g as getRequiredText, b as atLeastOneOption } from './controlUtils-D7E0lnlW.js';
-import './index-B5zt1rdf.js';
+import { g as getRequiredText, b as atLeastOneOption } from './controlUtils-DQRQCahL.js';
+import './index--uGgWE-E.js';
 
 const dsRadioButtonGroupCss = ".ds-radio-button-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-radio-button-group__radio-buttons-slot{display:inline-flex;flex-direction:column}.ds-radio-button-group__radio-buttons-slot--horizontal{flex-flow:row wrap;gap:var(--ds-spacing-small)}.ds-radio-button-group__legend{padding-inline:0;color:var(--ds-palette-black-95);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}";
 
@@ -50,6 +50,9 @@ const DsRadioButtonGroup = class {
     async dsCheckValidity() {
         return this.internals?.checkValidity();
     }
+    get DsRadioButtonTag() {
+        return transformTagName('ds-radio-button', 'ds-radio-button-group', this.el);
+    }
     getLegendText = () => {
         if (this.dsRequired) {
             return getRequiredText(this.dsLegend);
@@ -57,7 +60,7 @@ const DsRadioButtonGroup = class {
         return this.dsLegend;
     };
     getRadios = () => {
-        return Array.from(this.el.querySelectorAll('ds-radio-button'));
+        return Array.from(this.el.querySelectorAll(this.DsRadioButtonTag));
     };
     getEnabledRadios = () => {
         return this.getRadios().filter(e => !e.dsDisabled);
@@ -131,6 +134,7 @@ const DsRadioButtonGroup = class {
         this.dsRadioGroupInvalidStateChange.emit(newValue);
     }
     dsValueObserver(value) {
+        this.dsRadioGroupValueChange.emit(value);
         this.dsChange.emit({ value: value });
         if (this.dsRequired) {
             this.internals?.setValidity({ valueMissing: !value }, atLeastOneOption(), this.getRadios()?.[0].querySelector('input'));
@@ -173,7 +177,7 @@ const DsRadioButtonGroup = class {
             return;
         }
         const radios = this.getEnabledRadios();
-        const targetRadio = e.target.closest('ds-radio-button');
+        const targetRadio = e.target.closest(this.DsRadioButtonTag);
         if (!targetRadio || !radios.includes(targetRadio)) {
             return;
         }
@@ -199,7 +203,8 @@ const DsRadioButtonGroup = class {
         });
         const errorClasses = classNames('ds-radio-button-group__error');
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.errorTextId].filter(Boolean).join(' ');
-        return (h(Host, { key: '5a19a07e448773553910d2be7782b4e8fc617478', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: 'b0c4580faee8ec5cc2ee7d8fcb0286903b9ac751', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, h("legend", { key: 'f3211e7670b7aaf8bb54bb5a9700ebf7c88d576a', class: legendClasses }, h("slot", { key: '09dd3b3cfeeaa31342a9306cbada63b78f59447f', name: "legend" }, this.getLegendText())), h("slot", { key: '09c341944343b701c4aa4573c9dec1a98ac53a9f', name: "assistiveText" }, this.dsAssistiveText && (h("small", { key: '779c7467c444074e1aeddc774a6873820823be75', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), h("div", { key: 'e13141e7cc96dc7438b2ba12af97671a5a73f4ff', class: radioButtonsSlotClasses }, h("slot", { key: '3873d2e4a333f491089738d4f49614e4105d1d3f', onSlotchange: this.updateFocusableRadioButton })), !!this.dsErrorText && (h("slot", { key: 'cd1e9e8f3313ef809939888fe8cf98d1db7400ef', name: "validity" }, h("div", { key: '1a345a57fef5571de70bd1ac7b45045b3296681d', class: errorClasses }, h("ds-input-validity", { key: '880e73ee761e29e187ed80f4e44b00f7f3e3771b', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))))));
+        const DsInputValidity = transformTagName('ds-input-validity', 'ds-radio-button-group', this.el);
+        return (h(Host, { key: 'a6dfca108a3afd12f8cce20e0755eac634064589', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: 'c586f53052f79260eea717dfe448fb0528d5564e', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, h("legend", { key: '2f282adbb022ca6598f78af26d6b35310e410d2c', class: legendClasses }, h("slot", { key: 'b75cf74098e2c721c6d2783a6b0a412aa68722f3', name: "legend" }, this.getLegendText())), h("slot", { key: '1a5d04878dd6cbbdd435af1473f46b46dd95d9bd', name: "assistiveText" }, this.dsAssistiveText && (h("small", { key: 'ad683a5e3020d38430f826eda2b0aed7653eec8e', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), h("div", { key: 'dc6ea829175df12131e058462565eb22bbc3138c', class: radioButtonsSlotClasses }, h("slot", { key: '1912f79f67d868fc4c3a74f89444ab430e1cd90b', onSlotchange: this.updateFocusableRadioButton })), !!this.dsErrorText && (h("slot", { key: 'd3bc1096894c6a27463df1ecafe161b4cc808549', name: "validity" }, h("div", { key: 'a1e8aee92d0303d4102798eb223af638458e82d0', class: errorClasses }, h(DsInputValidity, { key: '03e19aa40f9201a77ea3c747f7d86e4bb9921212', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -209,6 +214,7 @@ const DsRadioButtonGroup = class {
         "focusedChildRadioButton": ["focusedChildRadioButtonObserver"]
     }; }
 };
+declareComponentDependencies([h("ds-input-validity", null)]);
 DsRadioButtonGroup.style = dsRadioButtonGroupCss;
 
 export { DsRadioButtonGroup as ds_radio_button_group };

package/dist/esm/ds-radio-button.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-D-gUvxcp.js';
+import { h, r as registerInstance, c as createEvent, a as getElement, F as Fragment } from './index-CIXO9B7A.js';
 import { i as inheritAttributes, b as inheritAriaAttributes } from './attributes-BD_lNRxn.js';
-import { v as validityMessage, g as getRequiredText } from './controlUtils-D7E0lnlW.js';
-import { i as idGenerator } from './utils-CqaqnfY4.js';
+import { v as validityMessage, g as getRequiredText } from './controlUtils-DQRQCahL.js';
+import { d as declareComponentDependencies, i as idGenerator, t as transformTagName } from './utils-hnAo1pVs.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import './index-B5zt1rdf.js';
+import './index--uGgWE-E.js';
 
 const dsRadioButtonCss = ".sc-ds-radio-button:root,.sc-ds-radio-button-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-radio-button.sc-ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-palette-black-95)}.ds-radio-button--disabled.sc-ds-radio-button{color:var(--ds-palette-black-40)}.ds-radio-button__validity.sc-ds-radio-button{margin-left:10px}.ds-radio-button.sc-ds-radio-button:has(input:focus-visible) .ds-radio-button__icon.sc-ds-radio-button{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 5)}.ds-radio-button__icon.sc-ds-radio-button{border-radius:50%;height:44px;width:44px}.ds-radio-button__text.sc-ds-radio-button{margin-top:11px}.ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-white)}.ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-70);fill:var(--ds-palette-white)}.ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button.sc-ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-10)}.ds-radio-button.sc-ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-palette-white)}.ds-radio-button.sc-ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-palette-mainBlue-80)}.ds-radio-button.sc-ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-20)}.ds-radio-button.sc-ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-palette-white)}.ds-radio-button.sc-ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-palette-mainBlue-90)}.ds-radio-button--disabled.sc-ds-radio-button .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled.sc-ds-radio-button .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled.sc-ds-radio-button .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-overlay-black-15)}.ds-radio-button--invalid.sc-ds-radio-button .ds-radio-button__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid.sc-ds-radio-button .ds-radio-button__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid.sc-ds-radio-button .ds-radio-button__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button-fieldset.sc-ds-radio-button{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button-fieldset__legend.sc-ds-radio-button{padding-inline:0;color:var(--ds-palette-black-95);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-fieldset__assistive-text.sc-ds-radio-button{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}";
 
@@ -71,6 +71,9 @@ const DsRadioButton = class {
         }
     }
     componentWillLoad() {
+        if (this.radioGroup) {
+            this.updateCheckedState();
+        }
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-invalid']),
             ...inheritAttributes(this, this.el, ['value', 'name', 'id']),
@@ -80,16 +83,14 @@ const DsRadioButton = class {
     formResetCallback() {
         this.dsErrorText = '';
         this.dsChecked = this.initialChecked;
-        this.radioGroup = this.el.closest('ds-radio-button-group');
         if (this.radioGroup) {
             this.groupInvalid = !!this.radioGroup.dsErrorText;
             this.dsErrorText = this.radioGroup.dsErrorText;
         }
     }
     connectedCallback() {
-        this.radioGroup = this.el.closest('ds-radio-button-group');
+        this.radioGroup = this.el.closest(transformTagName('ds-radio-button-group', 'ds-radio-button', this.el));
         if (this.radioGroup) {
-            this.updateCheckedState();
             this.groupInvalid = !!this.radioGroup.dsErrorText;
             this.dsErrorText = this.radioGroup.dsErrorText;
             this.radioGroup.addEventListener('dsRadioGroupValueChange', this.updateCheckedState);
@@ -170,7 +171,9 @@ const DsRadioButton = class {
         const inputClasses = classNames('ds-radio-button__input');
         const textClasses = classNames('ds-radio-button__text');
         const tabindex = this.focusable ? 0 : -1;
-        return (h(Fragment, null, h("div", null, h("label", { class: classes }, h("ds-visually-hidden", null, h("input", { ref: ref => (this.inputElement = ref), type: "radio", class: inputClasses, value: this.dsValue, id: this.dsId, name: this.dsName, disabled: this.dsDisabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, checked: this.dsChecked, tabindex: tabindex, required: this.dsRequired, "aria-invalid": !!this.dsErrorText, ...this.inheritedAttributes })), this.renderRadioIcon(), h("slot", null, h("span", { class: textClasses }, this.dsText)))), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: "ds-radio-button__validity" }, h("ds-input-validity", { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
+        const DsInputValidity = transformTagName('ds-input-validity', 'ds-radio-button', this.el);
+        const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-radio-button', this.el);
+        return (h(Fragment, null, h("div", null, h("label", { class: classes }, h(DsVisuallyHidden, null, h("input", { ref: ref => (this.inputElement = ref), type: "radio", class: inputClasses, value: this.dsValue, id: this.dsId, name: this.dsName, disabled: this.dsDisabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, checked: this.dsChecked, tabindex: tabindex, required: this.dsRequired, "aria-invalid": !!this.dsErrorText, ...this.inheritedAttributes })), this.renderRadioIcon(), h("slot", null, h("span", { class: textClasses }, this.dsText)))), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: "ds-radio-button__validity" }, h(DsInputValidity, { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
     }
     renderFieldset() {
         const fieldsetClasses = classNames('ds-radio-button-fieldset');
@@ -190,6 +193,7 @@ const DsRadioButton = class {
         "dsChecked": ["dsCheckedObserver"]
     }; }
 };
+declareComponentDependencies([h("ds-visually-hidden", null), h("ds-input-validity", null)]);
 DsRadioButton.style = dsRadioButtonCss;
 
 export { DsRadioButton as ds_radio_button };

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

@@ -1,6 +1,7 @@
-import { r as registerInstance, a as getElement, h } from './index-D-gUvxcp.js';
+import { h, r as registerInstance, a as getElement } from './index-CIXO9B7A.js';
 import { b as inheritAriaAttributes } from './attributes-BD_lNRxn.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
+import { d as declareComponentDependencies, t as transformTagName } from './utils-hnAo1pVs.js';
 
 const dsSpinnerCss = "html{font-size:100%}body{font-size:1rem}.ds-font{}.ds-font--heading{font-family:var(--ds-fontFamily-heading)}.ds-font--body{font-family:var(--ds-fontFamily-body)}.ds-font--regular{font-weight:var(--ds-fontWeight-regular)}.ds-font--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font--semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font--bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking--xtight{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking--tight{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking--normal{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking--wide{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking--xwide{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading--small{line-height:var(--ds-lineHeight-small)}.ds-leading--medium{line-height:var(--ds-lineHeight-medium)}.ds-leading--large{line-height:var(--ds-lineHeight-large)}.ds-leading--xlarge{line-height:var(--ds-lineHeight-xLarge)}.ds-width--normal{font-stretch:var(--ds-fontWidth-normal)}.ds-width--condense{font-stretch:var(--ds-fontWidth-condense)}.ds-number--proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph--16{margin-bottom:var(--ds-fontSize-16)}.ds-paragraph--20{margin-bottom:var(--ds-fontSize-20)}.ds-list--spacing{gap:4px}.ds-text-color--default{color:var(--ds-palette-black-95)}.ds-text{}.ds-text--2xl-regular{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text--xl-regular{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text--lg-regular{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text--md-regular{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text--sm-regular{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text--xs-regular{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text--2xl-semibold{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text--xl-semibold{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text--lg-semibold{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text--md-semibold{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text--sm-semibold{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text--xs-semibold{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text--2xl-bold{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text--xl-bold{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text--lg-bold{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text--md-bold{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text--sm-bold{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text--xs-bold{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner{display:flex;align-items:center;justify-content:center;}.ds-spinner--small{padding:1.5px}.ds-spinner--small:has(.ds-spinner__text){gap:var(--ds-spacing-2xSmall)}.ds-spinner--medium{padding:3px}.ds-spinner--medium:has(.ds-spinner__text){gap:var(--ds-spacing-2xSmall)}.ds-spinner--large{padding:3px}.ds-spinner--large:has(.ds-spinner__text){gap:var(--ds-spacing-xSmall)}.ds-spinner--xLarge{padding:5.5px}.ds-spinner--xLarge:has(.ds-spinner__text){gap:10px}.ds-spinner--2xLarge{padding:5.5px}.ds-spinner--2xLarge:has(.ds-spinner__text){gap:var(--ds-spacing-small)}.ds-spinner--below{flex-direction:column;align-items:center}.ds-spinner--right{flex-direction:row;align-items:center}.ds-spinner__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-overlay-black-15);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__text{font-family:var(--ds-fontFamily-body);color:var(--ds-palette-black-95)}.ds-spinner__text--white{color:var(--ds-palette-white)}.ds-spinner__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;animation:ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__segment--1{animation-delay:-0.3s}.ds-spinner__segment--2{animation-delay:-0.2s}.ds-spinner__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__segment--1{animation-delay:-0.6s}.ds-spinner__segment--2{animation-delay:-0.4s}.ds-spinner__segment--3{animation-delay:-0.2s}}";
 
@@ -47,14 +48,16 @@ const DsSpinner = class {
             [`ds-spinner--${this.dsSpinnerTextPosition}`]: !!this.dsText,
         });
         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: '0fa992bde3a9244616f5b6ba2120ae5f6d0db76e', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        const segmentClasses = (index) => classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
+        const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
+        return (h("div", { key: '41ac2e9d4a4d47ba260cf0573c625c4cc3285772', 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: '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)));
+            }, ...this.inheritedAttributes }, h("div", { key: '8f275e0bdbdd5ace7ad4c9cf3c7ce367ba5882ee', class: "ds-spinner__spinner" }, h("div", { key: '2ae06bbf92492d0f6c63054c360257da685a2310', class: segmentClasses(1) }), h("div", { key: 'c5a12fd927eee963657c2a82d91ecfa81eb88a2d', class: segmentClasses(2) }), h("div", { key: '80c36207963e53a3ca4041d993e60854f74dccae', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'aea851246b5b233128c94b4dc49eee409d19cc15' }, h("span", { key: '6ffda5a7cc47eb4842dc8cf945ae7a2dbb4f49c7' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '020b3ccab3864a19ce3939661183731ae4db1d08', class: textClasses }, this.dsText)));
     }
 };
+declareComponentDependencies([h("ds-visually-hidden", null)]);
 DsSpinner.style = dsSpinnerCss;
 
 export { DsSpinner as ds_spinner };

package/dist/esm/ds-tag-group.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, a as getElement, h } from './index-CIXO9B7A.js';
+
+const dsTagGroupCss = ".ds-tag-group__label{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)}.ds-tag-group__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-tag-group__tags{display:inline-flex;flex-direction:row;flex-wrap:wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}";
+
+const DsTagGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    dsLabel;
+    dsAssistiveText;
+    render() {
+        const assistiveTextId = this.dsAssistiveText ? 'ds-tag-group-assistive-text' : undefined;
+        const ariaDescribedBy = assistiveTextId ? assistiveTextId : undefined;
+        return (h("div", { key: '5e132f0aa006d74722358f2ac3b0b74c4116ea9a', class: "ds-tag-group", role: "group", "aria-label": this.dsLabel, "aria-describedby": ariaDescribedBy }, (this.dsLabel || this.dsAssistiveText) && (h("div", { key: '2fe72fffe735931ff5472162cac5b3babda6b957' }, this.dsLabel && (h("div", { key: '5388aa1fb591062e25c51f03390af5f34a9e81e9', class: "ds-tag-group__label" }, this.dsLabel)), this.dsAssistiveText && (h("small", { key: 'd63eb8fc20ef2e361890a45709d2a7e54c4f9a02', class: "ds-tag-group__assistive-text", id: assistiveTextId }, this.dsAssistiveText)))), h("ul", { key: '35f882de376802e7048f4ea6b06291288d233c64', class: "ds-tag-group__tags" }, Array.from(this.el.children).map(child => h("li", { innerHTML: child.outerHTML })))));
+    }
+};
+DsTagGroup.style = dsTagGroupCss;
+
+export { DsTagGroup as ds_tag_group };

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

@@ -1,7 +1,8 @@
-import { r as registerInstance, h } from './index-D-gUvxcp.js';
+import { h, r as registerInstance, a as getElement } from './index-CIXO9B7A.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
+import { d as declareComponentDependencies, t as transformTagName } from './utils-hnAo1pVs.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 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-tag__link){background-color:var(--ds-palette-black-10)}.ds-tag.ds-tag--default:active:has(.ds-tag__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-tag__link){background-color:var(--ds-palette-black-80)}.ds-tag.ds-tag--black:active:has(.ds-tag__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-tag__link){background-color:var(--ds-palette-black-10)}.ds-tag.ds-tag--white:active:has(.ds-tag__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-tag__link){background-color:var(--ds-palette-blue-10)}.ds-tag.ds-tag--info:active:has(.ds-tag__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-tag__link){background-color:var(--ds-palette-red-10)}.ds-tag.ds-tag--danger:active:has(.ds-tag__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-tag__link){background-color:var(--ds-palette-yellow-10)}.ds-tag.ds-tag--attention:active:has(.ds-tag__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-tag__link){background-color:var(--ds-palette-green-10)}.ds-tag.ds-tag--success:active:has(.ds-tag__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-tag__link::part(link){min-height:1.5rem;padding:calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall)}";
 
 const DsTag = class {
     constructor(hostRef) {
@@ -14,13 +15,17 @@ const DsTag = class {
     dsTarget;
     dsHref;
     dsColour = 'default';
+    get el() { return getElement(this); }
     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)));
+        const DsIcon = transformTagName('ds-icon', 'ds-tag', this.el);
+        const DsLink = transformTagName('ds-link', 'ds-tag', this.el);
+        return (h("div", { key: '40d1e7607357b556097b27c6aad58a1b2e5af0fb', class: classes }, h("slot", { key: '416e038155b38f758d5f31994ee45e619facff1b', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'a276c53fd88b357f40a6a0227d79576318c0b708' }, this.dsHref ? (h(DsLink, { class: "ds-tag__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: 'e0ec39cd2378889d15b4a22e62742e730ce33a21', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
     }
 };
+declareComponentDependencies([h("ds-icon", null), h("ds-link", { dsText: '' })]);
 DsTag.style = dsTagCss;
 
 export { DsTag as ds_tag };

package/dist/esm/ds-text-input.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-D-gUvxcp.js';
+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 { g as getRequiredText, a as getOptionalText, v as validityMessage } from './controlUtils-D7E0lnlW.js';
-import { i as idGenerator } from './utils-CqaqnfY4.js';
+import { g as getRequiredText, a as getOptionalText, v as validityMessage } from './controlUtils-DQRQCahL.js';
+import { d as declareComponentDependencies, i as idGenerator, t as transformTagName } from './utils-hnAo1pVs.js';
 import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-BD_lNRxn.js';
-import './index-B5zt1rdf.js';
+import './index--uGgWE-E.js';
 
-const dsTextInputCss = ".sc-ds-text-input:root,.sc-ds-text-input-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-text-input-h *.sc-ds-text-input,.ds-no-style-leak.sc-ds-text-input *.sc-ds-text-input{all:unset;box-sizing:border-box;display:block}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.ds-input__label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-input__label-container.sc-ds-text-input label.sc-ds-text-input{font-family:var(--ds-fontFamily-body);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-input__label-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);display:block;margin-block-start:var(--ds-spacing-3xSmall);color:var(--ds-palette-black-70)}.ds-input__container.sc-ds-text-input{box-sizing:border-box;width:100%;display:inline-flex;position:relative;align-items:center;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);padding-inline:var(--ds-spacing-xSmall)}.ds-input__container.sc-ds-text-input: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)}.ds-input__container.sc-ds-text-input: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)}.ds-input__container.invalid.sc-ds-text-input{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.ds-input__container.invalid.sc-ds-text-input:hover:not(.ds-input__container.invalid:focus-within){background-color:var(--ds-palette-red-10);border-color:var(--ds-palette-red-50)}.ds-input__container.invalid.active.sc-ds-text-input{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.ds-input__container.valid.sc-ds-text-input{background-color:var(--ds-palette-green-05);border-color:var(--ds-palette-green-50)}.ds-input__container.valid.sc-ds-text-input:hover:not(.ds-input__container.valid:focus-within){background-color:var(--ds-palette-green-10);border-color:var(--ds-palette-green-50)}.ds-input__container.valid.active.sc-ds-text-input{background-color:var(--ds-palette-green-20);border-color:var(--ds-palette-green-50)}.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.disabled.sc-ds-text-input{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}.ds-input__container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input__container.sc-ds-text-input:has(ds-button.suffix){padding-inline-end:unset}.ds-input__container.sc-ds-text-input:has(input:active){outline:none}.ds-input__container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:read-only){border-color:var(--ds-palette-black-50)}.ds-input__container.active.sc-ds-text-input:not(.ds-input__container.disabled,.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.invalid.sc-ds-text-input,.ds-input__container.valid).sc-ds-text-input{border-color:var(--ds-palette-black-50);background-color:var(--ds-palette-black-20)}.ds-input__container.sc-ds-text-input:hover:not(.ds-input__container.disabled,.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.active.sc-ds-text-input,.ds-input__container.invalid.sc-ds-text-input,.ds-input__container.valid.sc-ds-text-input,.ds-input__container.sc-ds-text-input:focus-within){border-color:var(--ds-palette-black-50);background-color:var(--ds-palette-black-10)}.ds-input__container.sc-ds-text-input:focus-within:not(.ds-input__container:focus-within.invalid,.ds-input__container.sc-ds-text-input:focus-within.valid,.ds-input__container.sc-ds-text-input:focus-within.readonly){border-color:var(--ds-palette-mainBlue-70)}.ds-input__container.sc-ds-text-input:focus-within *.sc-ds-text-input>ds-button.suffix.sc-ds-text-input>button.sc-ds-text-input:focus-visible{background-clip:padding-box;outline-offset:-5px;box-shadow:none;height:var(--ds-spacing-xLarge);background-color:var(--ds-overlay-black-10)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:100%;box-sizing:border-box;background-color:unset;flex-grow:1;height:var(--ds-spacing-xLarge);line-height:var(--ds-fontSize-24);color:var(--ds-palette-black-95);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-palette-black-70)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-palette-black-40)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-palette-black-40)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.ds-input__container.sc-ds-text-input>input[type=number].sc-ds-text-input{appearance:textfield}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{appearance:none;margin:0}.ds-input__container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input__container.sc-ds-text-input span.prefix.sc-ds-text-input,.ds-input__container.sc-ds-text-input span.suffix.sc-ds-text-input{color:var(--ds-palette-black-70)}.ds-input__container.sc-ds-text-input ds-icon.prefix.sc-ds-text-input,.ds-input__container.sc-ds-text-input-s>[slot=prefix],.ds-input__container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-palette-black-95)}.ds-input__container.sc-ds-text-input ds-button.suffix.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}";
+const dsTextInputCss = ".sc-ds-text-input:root,.sc-ds-text-input-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-text-input-h *.sc-ds-text-input,.ds-no-style-leak.sc-ds-text-input *.sc-ds-text-input{all:unset;box-sizing:border-box;display:block}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.ds-input__label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-input__label-container.sc-ds-text-input label.sc-ds-text-input{font-family:var(--ds-fontFamily-body);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-input__label-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);display:block;margin-block-start:var(--ds-spacing-3xSmall);color:var(--ds-palette-black-70)}.ds-input__container.sc-ds-text-input{box-sizing:border-box;width:100%;display:inline-flex;position:relative;align-items:center;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);padding-inline:var(--ds-spacing-xSmall)}.ds-input__container.sc-ds-text-input: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)}.ds-input__container.sc-ds-text-input: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)}.ds-input__container.invalid.sc-ds-text-input{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.ds-input__container.invalid.sc-ds-text-input:hover:not(.ds-input__container.invalid:focus-within){background-color:var(--ds-palette-red-10);border-color:var(--ds-palette-red-50)}.ds-input__container.invalid.active.sc-ds-text-input{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.ds-input__container.valid.sc-ds-text-input{background-color:var(--ds-palette-green-05);border-color:var(--ds-palette-green-50)}.ds-input__container.valid.sc-ds-text-input:hover:not(.ds-input__container.valid:focus-within){background-color:var(--ds-palette-green-10);border-color:var(--ds-palette-green-50)}.ds-input__container.valid.active.sc-ds-text-input{background-color:var(--ds-palette-green-20);border-color:var(--ds-palette-green-50)}.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.disabled.sc-ds-text-input{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}.ds-input__container.sc-ds-text-input:has(span.prefix,.ds-text-input__icon).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input__container.sc-ds-text-input:has(.ds-text-input__button){padding-inline-end:unset}.ds-input__container.sc-ds-text-input:has(input:active){outline:none}.ds-input__container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:read-only){border-color:var(--ds-palette-black-50)}.ds-input__container.active.sc-ds-text-input:not(.ds-input__container.disabled,.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.invalid.sc-ds-text-input,.ds-input__container.valid).sc-ds-text-input{border-color:var(--ds-palette-black-50);background-color:var(--ds-palette-black-20)}.ds-input__container.sc-ds-text-input:hover:not(.ds-input__container.disabled,.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.active.sc-ds-text-input,.ds-input__container.invalid.sc-ds-text-input,.ds-input__container.valid.sc-ds-text-input,.ds-input__container.sc-ds-text-input:focus-within){border-color:var(--ds-palette-black-50);background-color:var(--ds-palette-black-10)}.ds-input__container.sc-ds-text-input:focus-within:not(.ds-input__container:focus-within.invalid,.ds-input__container.sc-ds-text-input:focus-within.valid,.ds-input__container.sc-ds-text-input:focus-within.readonly){border-color:var(--ds-palette-mainBlue-70)}.ds-input__container.sc-ds-text-input:focus-within *.sc-ds-text-input>.ds-text-input__button.sc-ds-text-input>button.sc-ds-text-input:focus-visible{background-clip:padding-box;outline-offset:-5px;box-shadow:none;height:var(--ds-spacing-xLarge);background-color:var(--ds-overlay-black-10)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:100%;box-sizing:border-box;background-color:unset;flex-grow:1;height:var(--ds-spacing-xLarge);line-height:var(--ds-fontSize-24);color:var(--ds-palette-black-95);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-palette-black-70)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-palette-black-40)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-palette-black-40)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.ds-input__container.sc-ds-text-input>input[type=number].sc-ds-text-input{appearance:textfield}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{appearance:none;margin:0}.ds-input__container.sc-ds-text-input:has(span.prefix,.ds-text-input__icon).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input__container.sc-ds-text-input span.prefix.sc-ds-text-input,.ds-input__container.sc-ds-text-input span.suffix.sc-ds-text-input{color:var(--ds-palette-black-70)}.ds-input__container.sc-ds-text-input .ds-text-input__icon.sc-ds-text-input,.ds-input__container.sc-ds-text-input-s>[slot=prefix],.ds-input__container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-palette-black-95)}.ds-input__container.sc-ds-text-input .ds-text-input__button.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}";
 
 const INPUT_TYPE_ICONS_MAP = {
     search: 'search',
@@ -185,8 +185,9 @@ const DsTextInput = class {
             return (h("slot", { name: "prefix" }, h("span", { class: "prefix" }, this.dsPrefixText)));
         }
         const prefixIcon = this.dsIcon || INPUT_TYPE_ICONS_MAP[this.dsType];
+        const DsIcon = transformTagName('ds-icon', 'ds-text-input', this.el);
         if (prefixIcon) {
-            return (h("slot", { name: "prefix" }, h("ds-icon", { class: "prefix", dsName: prefixIcon })));
+            return (h("slot", { name: "prefix" }, h(DsIcon, { class: "ds-text-input__icon", dsName: prefixIcon })));
         }
         return null;
     }
@@ -199,8 +200,9 @@ const DsTextInput = class {
         }
         const actionButtonIcon = INPUT_TYPE_ACTION_BUTTON_ICON_MAP[this.dsType]?.(this) ?? '';
         const ariaPressed = this.dsType === 'password' ? this.passwordInputVisible : undefined;
+        const DsButton = transformTagName('ds-button', 'ds-text-input', this.el);
         if (actionButtonIcon) {
-            return (h("slot", { name: "suffix" }, h("ds-button", { ref: e => (this.suffixButtonElement = e), dsVariant: "supplementary", dsColour: "black", class: "suffix", dsDisabled: false, dsIcon: actionButtonIcon, onClick: this.onActionButtonClicked, "aria-pressed": ariaPressed, "aria-label": this.dsActionButtonAriaLabel })));
+            return (h("slot", { name: "suffix" }, h(DsButton, { ref: e => (this.suffixButtonElement = e), dsVariant: "supplementary", dsColour: "black", class: "ds-text-input__button", dsDisabled: false, dsIcon: actionButtonIcon, onClick: this.onActionButtonClicked, "aria-pressed": ariaPressed, "aria-label": this.dsActionButtonAriaLabel })));
         }
         return null;
     }
@@ -211,26 +213,34 @@ const DsTextInput = class {
     }
     render() {
         const inputType = this.dsType === 'password' && this.passwordInputVisible ? 'text' : this.dsType;
-        return (h(Fragment, { key: 'fb0f6452db05f8673b54a017407dd7fd9fb21bb3' }, h("div", { key: '0f88cb72aedb629b5c3cc36f6d83c3940d889ab9', class: "ds-input__label-container" }, h("slot", { key: 'c31624f0477510c18d79d968251ec010ce2d2012', name: "label" }, h("label", { key: 'f9cebb5bb2e2f990251499e27e044b8b59877ebd', htmlFor: this.dsId }, this.getLabelText())), h("slot", { key: '8b6902a1166f89654a6d31690551b03a0533ad99', name: "assistiveText" }, h("small", { key: '2c8fbeb5077000496197380c1673ba0ced05aefd', id: this.assistiveTextId }, this.dsAssistiveText), h("ds-visually-hidden", { key: 'dd8d75b334a98d3f17b97a4ced317d32c472e418', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, this.dsHiddenAssistiveText))), h("div", { key: '76027598d91485d8770bebb66e5295f141c49821', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input__container', {
+        const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-text-input', this.el);
+        const DsInputValidity = transformTagName('ds-input-validity', 'ds-text-input', this.el);
+        return (h(Fragment, { key: 'd5fbe44bbbff42b75a215b87a69d8574a2911018' }, h("div", { key: '94c0dd7e71ede20e760796deb76edde382a0f10b', class: "ds-input__label-container" }, h("slot", { key: 'e86e263cd9af65e1fa3b86c237a5ef39d4f20e7f', name: "label" }, h("label", { key: '3936b750b6f318a1b7344c4cc3ebcb852fc51066', htmlFor: this.dsId }, this.getLabelText())), h("slot", { key: 'd2da2e30b78a34a45b8b7f46966ab972e4e0b025', name: "assistiveText" }, h("small", { key: 'd52b4154dd59e8f27e6cc825cbe62c1d8f0f3319', id: this.assistiveTextId }, this.dsAssistiveText), h(DsVisuallyHidden, { key: 'fea45e29a5e2d61946cc623688ddd02f842d5dff', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, this.dsHiddenAssistiveText))), h("div", { key: '5ee839a7c0e09ba29f0d188504f31c93fe95b993', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input__container', {
                 disabled: this.dsDisabled,
                 readonly: this.dsReadonly,
                 valid: !!this.dsSuccessText,
                 invalid: !!this.dsErrorText,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), h("input", { key: '896073a9e7efee2292a43fe433904796439b7738', ref: e => (this.inputElement = e), id: this.dsId, name: this.dsName, "aria-label": this.dsAriaLabel, "aria-labelledby": this.dsAriaLabelledby, "aria-describedby": this.dsAriaDescribedby ||
+            }) }, this.renderPrefixContent(), h("input", { key: 'a9bf53d9a819db9cad6c80535abb3b101d3e36ed', ref: e => (this.inputElement = e), id: this.dsId, name: this.dsName, "aria-label": this.dsAriaLabel, "aria-labelledby": this.dsAriaLabelledby, "aria-describedby": this.dsAriaDescribedby ||
                 classNames({
                     [this.assistiveTextId]: !!this.dsAssistiveText,
                     [this.visuallyHiddenAssistiveTextId]: !!this.dsHiddenAssistiveText,
                     [this.errorTextId]: !!this.dsErrorText,
                     [this.successTextId]: !!this.dsSuccessText,
-                }), "aria-invalid": this.dsErrorText ? 'true' : 'false', disabled: this.dsDisabled, required: this.dsRequired, readonly: this.dsReadonly, value: this.dsValue, type: inputType, min: this.dsMin, max: this.dsMax, maxlength: this.dsMaxLength, pattern: this.dsPattern, placeholder: this.dsPlaceholder, autocomplete: this.dsAutocomplete, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, ...this.inheritedAttributes }), this.renderSuffixContent()), h("slot", { key: 'e90508f02dda7b770ded7a7a07ab9916fc25ac48', name: "validity" }, h("ds-input-validity", { key: '87e125ea5df941c0dc2294673b877c1274827335', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsValidityRole: "alert" }), h("ds-input-validity", { key: '12707c8076a00260b65f735259bd83bcaab0755f', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsValidityRole: "status" }))));
+                }), "aria-invalid": this.dsErrorText ? 'true' : 'false', disabled: this.dsDisabled, required: this.dsRequired, readonly: this.dsReadonly, value: this.dsValue, type: inputType, min: this.dsMin, max: this.dsMax, maxlength: this.dsMaxLength, pattern: this.dsPattern, placeholder: this.dsPlaceholder, autocomplete: this.dsAutocomplete, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, ...this.inheritedAttributes }), this.renderSuffixContent()), h("slot", { key: '1ad212e77fa8fd66c414860bf767054322a3f3bf', name: "validity" }, h(DsInputValidity, { key: '980a25cc784a37a0ba5f32e029f744a94db8502f', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsValidityRole: "alert" }), h(DsInputValidity, { key: '0a006fdb9962543ecb77790a56655669e251e7e1', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsValidityRole: "status" }))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
         "dsValue": ["valueObserver"]
     }; }
 };
+declareComponentDependencies([
+    h("ds-icon", null),
+    h("ds-button", null),
+    h("ds-visually-hidden", null),
+    h("ds-input-validity", null)
+]);
 DsTextInput.style = dsTextInputCss;
 
 export { DsTextInput as ds_text_input };

package/dist/esm/ds-visually-hidden.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-D-gUvxcp.js';
+import { r as registerInstance, h } from './index-CIXO9B7A.js';
 
 const dsVisuallyHiddenCss = ".ds-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
 
@@ -8,7 +8,7 @@ const DsVisuallyHidden = class {
     }
     dsTag = 'div';
     render() {
-        return (h(this.dsTag, { key: 'c9653582372e9edd1f516b31a27797907251bd6e', class: "ds-visually-hidden" }, h("slot", { key: '50d2e1f5c8cfe8669ef75011fe583d4955fff46b' })));
+        return (h(this.dsTag, { key: '4294edab8fcf553ad50c2e0f268df30e9338382f', class: "ds-visually-hidden" }, h("slot", { key: '33181a1b5924f4e58b71a1795ebcc42e72b66971' })));
     }
 };
 DsVisuallyHidden.style = dsVisuallyHiddenCss;

package/dist/esm/{index-B5zt1rdf.js → index--uGgWE-E.js}

@@ -1,4 +1,4 @@
-import { d as getRenderingRef, f as forceUpdate } from './index-D-gUvxcp.js';
+import { d as getRenderingRef, f as forceUpdate } from './index-CIXO9B7A.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);