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

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-Cz4FoSKZ.js');
+var index = require('./index-DgPeuNJP.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-BjZTECpy.js');
+var utils = require('./utils-CQYRBA7R.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-var controlUtils = require('./controlUtils-vlo14zME.js');
-require('./index-CNUFAH0H.js');
+var controlUtils = require('./controlUtils-B1PRSMat.js');
+require('./index-DwxkNCwi.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)}";
 
@@ -52,6 +52,9 @@ const DsRadioButtonGroup = class {
     async dsCheckValidity() {
         return this.internals?.checkValidity();
     }
+    get DsRadioButtonTag() {
+        return utils.transformTagName('ds-radio-button', 'ds-radio-button-group', this.el);
+    }
     getLegendText = () => {
         if (this.dsRequired) {
             return controlUtils.getRequiredText(this.dsLegend);
@@ -59,7 +62,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);
@@ -133,6 +136,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 }, controlUtils.atLeastOneOption(), this.getRadios()?.[0].querySelector('input'));
@@ -175,7 +179,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;
         }
@@ -201,7 +205,8 @@ const DsRadioButtonGroup = class {
         });
         const errorClasses = index$1.classNames('ds-radio-button-group__error');
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.errorTextId].filter(Boolean).join(' ');
-        return (index.h(index.Host, { key: '5a19a07e448773553910d2be7782b4e8fc617478', "data-invalid": !!this.dsErrorText || undefined }, index.h("fieldset", { key: 'b0c4580faee8ec5cc2ee7d8fcb0286903b9ac751', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, index.h("legend", { key: 'f3211e7670b7aaf8bb54bb5a9700ebf7c88d576a', class: legendClasses }, index.h("slot", { key: '09dd3b3cfeeaa31342a9306cbada63b78f59447f', name: "legend" }, this.getLegendText())), index.h("slot", { key: '09c341944343b701c4aa4573c9dec1a98ac53a9f', name: "assistiveText" }, this.dsAssistiveText && (index.h("small", { key: '779c7467c444074e1aeddc774a6873820823be75', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), index.h("div", { key: 'e13141e7cc96dc7438b2ba12af97671a5a73f4ff', class: radioButtonsSlotClasses }, index.h("slot", { key: '3873d2e4a333f491089738d4f49614e4105d1d3f', onSlotchange: this.updateFocusableRadioButton })), !!this.dsErrorText && (index.h("slot", { key: 'cd1e9e8f3313ef809939888fe8cf98d1db7400ef', name: "validity" }, index.h("div", { key: '1a345a57fef5571de70bd1ac7b45045b3296681d', class: errorClasses }, index.h("ds-input-validity", { key: '880e73ee761e29e187ed80f4e44b00f7f3e3771b', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))))));
+        const DsInputValidity = utils.transformTagName('ds-input-validity', 'ds-radio-button-group', this.el);
+        return (index.h(index.Host, { key: 'a6dfca108a3afd12f8cce20e0755eac634064589', "data-invalid": !!this.dsErrorText || undefined }, index.h("fieldset", { key: 'c586f53052f79260eea717dfe448fb0528d5564e', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, index.h("legend", { key: '2f282adbb022ca6598f78af26d6b35310e410d2c', class: legendClasses }, index.h("slot", { key: 'b75cf74098e2c721c6d2783a6b0a412aa68722f3', name: "legend" }, this.getLegendText())), index.h("slot", { key: '1a5d04878dd6cbbdd435af1473f46b46dd95d9bd', name: "assistiveText" }, this.dsAssistiveText && (index.h("small", { key: 'ad683a5e3020d38430f826eda2b0aed7653eec8e', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), index.h("div", { key: 'dc6ea829175df12131e058462565eb22bbc3138c', class: radioButtonsSlotClasses }, index.h("slot", { key: '1912f79f67d868fc4c3a74f89444ab430e1cd90b', onSlotchange: this.updateFocusableRadioButton })), !!this.dsErrorText && (index.h("slot", { key: 'd3bc1096894c6a27463df1ecafe161b4cc808549', name: "validity" }, index.h("div", { key: 'a1e8aee92d0303d4102798eb223af638458e82d0', class: errorClasses }, index.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; }
@@ -211,6 +216,7 @@ const DsRadioButtonGroup = class {
         "focusedChildRadioButton": ["focusedChildRadioButtonObserver"]
     }; }
 };
+utils.declareComponentDependencies([index.h("ds-input-validity", null)]);
 DsRadioButtonGroup.style = dsRadioButtonGroupCss;
 
 exports.ds_radio_button_group = DsRadioButtonGroup;

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-Cz4FoSKZ.js');
+var index = require('./index-DgPeuNJP.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-var controlUtils = require('./controlUtils-vlo14zME.js');
-var utils = require('./utils-BjZTECpy.js');
+var controlUtils = require('./controlUtils-B1PRSMat.js');
+var utils = require('./utils-CQYRBA7R.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-require('./index-CNUFAH0H.js');
+require('./index-DwxkNCwi.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)}";
 
@@ -73,6 +73,9 @@ const DsRadioButton = class {
         }
     }
     componentWillLoad() {
+        if (this.radioGroup) {
+            this.updateCheckedState();
+        }
         this.inheritedAttributes = {
             ...attributes.inheritAriaAttributes(this.el, ['aria-invalid']),
             ...attributes.inheritAttributes(this, this.el, ['value', 'name', 'id']),
@@ -82,16 +85,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(utils.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);
@@ -172,7 +173,9 @@ const DsRadioButton = class {
         const inputClasses = index$1.classNames('ds-radio-button__input');
         const textClasses = index$1.classNames('ds-radio-button__text');
         const tabindex = this.focusable ? 0 : -1;
-        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { class: classes }, index.h("ds-visually-hidden", null, index.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(), index.h("slot", null, index.h("span", { class: textClasses }, this.dsText)))), !this.dsErrorsDisabled && (index.h("slot", { name: "validity" }, index.h("div", { class: "ds-radio-button__validity" }, index.h("ds-input-validity", { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
+        const DsInputValidity = utils.transformTagName('ds-input-validity', 'ds-radio-button', this.el);
+        const DsVisuallyHidden = utils.transformTagName('ds-visually-hidden', 'ds-radio-button', this.el);
+        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { class: classes }, index.h(DsVisuallyHidden, null, index.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(), index.h("slot", null, index.h("span", { class: textClasses }, this.dsText)))), !this.dsErrorsDisabled && (index.h("slot", { name: "validity" }, index.h("div", { class: "ds-radio-button__validity" }, index.h(DsInputValidity, { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
     }
     renderFieldset() {
         const fieldsetClasses = index$1.classNames('ds-radio-button-fieldset');
@@ -192,6 +195,7 @@ const DsRadioButton = class {
         "dsChecked": ["dsCheckedObserver"]
     }; }
 };
+utils.declareComponentDependencies([index.h("ds-visually-hidden", null), index.h("ds-input-validity", null)]);
 DsRadioButton.style = dsRadioButtonCss;
 
 exports.ds_radio_button = DsRadioButton;

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

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-Cz4FoSKZ.js');
+var index = require('./index-DgPeuNJP.js');
 var attributes = require('./attributes-BMbXzbwU.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
+var utils = require('./utils-CQYRBA7R.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}}";
 
@@ -49,14 +50,16 @@ const DsSpinner = class {
             [`ds-spinner--${this.dsSpinnerTextPosition}`]: !!this.dsText,
         });
         const textClasses = index$1.classNames('ds-spinner__text', textSizeClass, `ds-spinner__text--${this.dsSpinnerColor}`);
-        const segmentClasses = index => index$1.classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
-        return (index.h("div", { key: '0fa992bde3a9244616f5b6ba2120ae5f6d0db76e', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        const segmentClasses = (index) => index$1.classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
+        const DsVisuallyHidden = utils.transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
+        return (index.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 }, index.h("div", { key: 'd3736ffa6a0dba10813bf044b43f0de19c4d20fb', class: "ds-spinner__spinner" }, index.h("div", { key: 'b23b329401fd853c5e24f834ce9ec73b15217a58', class: segmentClasses(1) }), index.h("div", { key: 'f9d619f5a9ad5dac4ebc606caed35c98c2b9e692', class: segmentClasses(2) }), index.h("div", { key: '5165008462494014e5fb29d795b449363f819e82', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (index.h("ds-visually-hidden", { key: '4597804a73f0223ca7b58e09a8346b1cce68c9a1' }, index.h("span", { key: 'cdd40dbb408478afc55ea7a80a8aac1db5a34729' }, this.dsHiddenAssistiveText))), this.dsText && index.h("span", { key: '385ccceedbf6750de761d7aec6503dccf1445d3d', class: textClasses }, this.dsText)));
+            }, ...this.inheritedAttributes }, index.h("div", { key: '8f275e0bdbdd5ace7ad4c9cf3c7ce367ba5882ee', class: "ds-spinner__spinner" }, index.h("div", { key: '2ae06bbf92492d0f6c63054c360257da685a2310', class: segmentClasses(1) }), index.h("div", { key: 'c5a12fd927eee963657c2a82d91ecfa81eb88a2d', class: segmentClasses(2) }), index.h("div", { key: '80c36207963e53a3ca4041d993e60854f74dccae', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (index.h(DsVisuallyHidden, { key: 'aea851246b5b233128c94b4dc49eee409d19cc15' }, index.h("span", { key: '6ffda5a7cc47eb4842dc8cf945ae7a2dbb4f49c7' }, this.dsHiddenAssistiveText))), this.dsText && index.h("span", { key: '020b3ccab3864a19ce3939661183731ae4db1d08', class: textClasses }, this.dsText)));
     }
 };
+utils.declareComponentDependencies([index.h("ds-visually-hidden", null)]);
 DsSpinner.style = dsSpinnerCss;
 
 exports.ds_spinner = DsSpinner;

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

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-DgPeuNJP.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    dsLabel;
+    dsAssistiveText;
+    render() {
+        const assistiveTextId = this.dsAssistiveText ? 'ds-tag-group-assistive-text' : undefined;
+        const ariaDescribedBy = assistiveTextId ? assistiveTextId : undefined;
+        return (index.h("div", { key: '5e132f0aa006d74722358f2ac3b0b74c4116ea9a', class: "ds-tag-group", role: "group", "aria-label": this.dsLabel, "aria-describedby": ariaDescribedBy }, (this.dsLabel || this.dsAssistiveText) && (index.h("div", { key: '2fe72fffe735931ff5472162cac5b3babda6b957' }, this.dsLabel && (index.h("div", { key: '5388aa1fb591062e25c51f03390af5f34a9e81e9', class: "ds-tag-group__label" }, this.dsLabel)), this.dsAssistiveText && (index.h("small", { key: 'd63eb8fc20ef2e361890a45709d2a7e54c4f9a02', class: "ds-tag-group__assistive-text", id: assistiveTextId }, this.dsAssistiveText)))), index.h("ul", { key: '35f882de376802e7048f4ea6b06291288d233c64', class: "ds-tag-group__tags" }, Array.from(this.el.children).map(child => index.h("li", { innerHTML: child.outerHTML })))));
+    }
+};
+DsTagGroup.style = dsTagGroupCss;
+
+exports.ds_tag_group = DsTagGroup;

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

@@ -1,9 +1,10 @@
 'use strict';
 
-var index = require('./index-Cz4FoSKZ.js');
+var index = require('./index-DgPeuNJP.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
+var utils = require('./utils-CQYRBA7R.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) {
@@ -16,13 +17,17 @@ const DsTag = class {
     dsTarget;
     dsHref;
     dsColour = 'default';
+    get el() { return index.getElement(this); }
     render() {
         const classes = index$1.classNames('ds-tag', `ds-tag--${this.dsColour}`, {
             'ds-tag--link': !!this.dsHref,
         });
-        return (index.h("div", { key: 'a54bbc1ec29cfa0c6df2f9e40765a746d1e6fcf8', class: classes }, index.h("slot", { key: '2c4a3c20b956798f114477bc22be6e796cca3f1f', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? index.h("ds-icon", { dsName: this.dsIcon, dsSize: "1rem" }) : null), index.h("slot", { key: '30e3768b29339c327449472b9f530d564d7e0269' }, this.dsHref ? (index.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" })) : (index.h("span", { class: "ds-tag__text" }, this.dsText))), index.h("slot", { key: '26cdf6d6b8dea7de55eade2f1b3807da4b9abb24', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? index.h("ds-icon", { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        const DsIcon = utils.transformTagName('ds-icon', 'ds-tag', this.el);
+        const DsLink = utils.transformTagName('ds-link', 'ds-tag', this.el);
+        return (index.h("div", { key: '40d1e7607357b556097b27c6aad58a1b2e5af0fb', class: classes }, index.h("slot", { key: '416e038155b38f758d5f31994ee45e619facff1b', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? index.h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), index.h("slot", { key: 'a276c53fd88b357f40a6a0227d79576318c0b708' }, this.dsHref ? (index.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" })) : (index.h("span", { class: "ds-tag__text" }, this.dsText))), index.h("slot", { key: 'e0ec39cd2378889d15b4a22e62742e730ce33a21', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? index.h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
     }
 };
+utils.declareComponentDependencies([index.h("ds-icon", null), index.h("ds-link", { dsText: '' })]);
 DsTag.style = dsTagCss;
 
 exports.ds_tag = DsTag;

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-Cz4FoSKZ.js');
+var index = require('./index-DgPeuNJP.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var controlUtils = require('./controlUtils-vlo14zME.js');
-var utils = require('./utils-BjZTECpy.js');
+var controlUtils = require('./controlUtils-B1PRSMat.js');
+var utils = require('./utils-CQYRBA7R.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-require('./index-CNUFAH0H.js');
+require('./index-DwxkNCwi.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',
@@ -187,8 +187,9 @@ const DsTextInput = class {
             return (index.h("slot", { name: "prefix" }, index.h("span", { class: "prefix" }, this.dsPrefixText)));
         }
         const prefixIcon = this.dsIcon || INPUT_TYPE_ICONS_MAP[this.dsType];
+        const DsIcon = utils.transformTagName('ds-icon', 'ds-text-input', this.el);
         if (prefixIcon) {
-            return (index.h("slot", { name: "prefix" }, index.h("ds-icon", { class: "prefix", dsName: prefixIcon })));
+            return (index.h("slot", { name: "prefix" }, index.h(DsIcon, { class: "ds-text-input__icon", dsName: prefixIcon })));
         }
         return null;
     }
@@ -201,8 +202,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 = utils.transformTagName('ds-button', 'ds-text-input', this.el);
         if (actionButtonIcon) {
-            return (index.h("slot", { name: "suffix" }, index.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 (index.h("slot", { name: "suffix" }, index.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;
     }
@@ -213,26 +215,34 @@ const DsTextInput = class {
     }
     render() {
         const inputType = this.dsType === 'password' && this.passwordInputVisible ? 'text' : this.dsType;
-        return (index.h(index.Fragment, { key: 'fb0f6452db05f8673b54a017407dd7fd9fb21bb3' }, index.h("div", { key: '0f88cb72aedb629b5c3cc36f6d83c3940d889ab9', class: "ds-input__label-container" }, index.h("slot", { key: 'c31624f0477510c18d79d968251ec010ce2d2012', name: "label" }, index.h("label", { key: 'f9cebb5bb2e2f990251499e27e044b8b59877ebd', htmlFor: this.dsId }, this.getLabelText())), index.h("slot", { key: '8b6902a1166f89654a6d31690551b03a0533ad99', name: "assistiveText" }, index.h("small", { key: '2c8fbeb5077000496197380c1673ba0ced05aefd', id: this.assistiveTextId }, this.dsAssistiveText), index.h("ds-visually-hidden", { key: 'dd8d75b334a98d3f17b97a4ced317d32c472e418', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, this.dsHiddenAssistiveText))), index.h("div", { key: '76027598d91485d8770bebb66e5295f141c49821', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: index$1.classNames('ds-input__container', {
+        const DsVisuallyHidden = utils.transformTagName('ds-visually-hidden', 'ds-text-input', this.el);
+        const DsInputValidity = utils.transformTagName('ds-input-validity', 'ds-text-input', this.el);
+        return (index.h(index.Fragment, { key: 'd5fbe44bbbff42b75a215b87a69d8574a2911018' }, index.h("div", { key: '94c0dd7e71ede20e760796deb76edde382a0f10b', class: "ds-input__label-container" }, index.h("slot", { key: 'e86e263cd9af65e1fa3b86c237a5ef39d4f20e7f', name: "label" }, index.h("label", { key: '3936b750b6f318a1b7344c4cc3ebcb852fc51066', htmlFor: this.dsId }, this.getLabelText())), index.h("slot", { key: 'd2da2e30b78a34a45b8b7f46966ab972e4e0b025', name: "assistiveText" }, index.h("small", { key: 'd52b4154dd59e8f27e6cc825cbe62c1d8f0f3319', id: this.assistiveTextId }, this.dsAssistiveText), index.h(DsVisuallyHidden, { key: 'fea45e29a5e2d61946cc623688ddd02f842d5dff', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, this.dsHiddenAssistiveText))), index.h("div", { key: '5ee839a7c0e09ba29f0d188504f31c93fe95b993', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: index$1.classNames('ds-input__container', {
                 disabled: this.dsDisabled,
                 readonly: this.dsReadonly,
                 valid: !!this.dsSuccessText,
                 invalid: !!this.dsErrorText,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), index.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(), index.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 ||
                 index$1.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()), index.h("slot", { key: 'e90508f02dda7b770ded7a7a07ab9916fc25ac48', name: "validity" }, index.h("ds-input-validity", { key: '87e125ea5df941c0dc2294673b877c1274827335', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsValidityRole: "alert" }), index.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()), index.h("slot", { key: '1ad212e77fa8fd66c414860bf767054322a3f3bf', name: "validity" }, index.h(DsInputValidity, { key: '980a25cc784a37a0ba5f32e029f744a94db8502f', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsValidityRole: "alert" }), index.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"]
     }; }
 };
+utils.declareComponentDependencies([
+    index.h("ds-icon", null),
+    index.h("ds-button", null),
+    index.h("ds-visually-hidden", null),
+    index.h("ds-input-validity", null)
+]);
 DsTextInput.style = dsTextInputCss;
 
 exports.ds_text_input = DsTextInput;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cz4FoSKZ.js');
+var index = require('./index-DgPeuNJP.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}";
 
@@ -10,7 +10,7 @@ const DsVisuallyHidden = class {
     }
     dsTag = 'div';
     render() {
-        return (index.h(this.dsTag, { key: 'c9653582372e9edd1f516b31a27797907251bd6e', class: "ds-visually-hidden" }, index.h("slot", { key: '50d2e1f5c8cfe8669ef75011fe583d4955fff46b' })));
+        return (index.h(this.dsTag, { key: '4294edab8fcf553ad50c2e0f268df30e9338382f', class: "ds-visually-hidden" }, index.h("slot", { key: '33181a1b5924f4e58b71a1795ebcc42e72b66971' })));
     }
 };
 DsVisuallyHidden.style = dsVisuallyHiddenCss;