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

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, a as getElement, h } from './index-CIXO9B7A.js';
+import { r as registerInstance, a as getElement, h } from './index-CweVEfzR.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 dsTagGroupCss = ":root,:host{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.ds-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);color:var(--ds-textColor-default)}.ds-tag-group__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);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) {
@@ -12,7 +12,7 @@ const DsTagGroup = class {
     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 })))));
+        return (h("div", { key: '8dd881ca483b1141dc2805d1c366cf113e319983', class: "ds-tag-group", role: "group", "aria-label": this.dsLabel, "aria-describedby": ariaDescribedBy }, (this.dsLabel || this.dsAssistiveText) && (h("div", { key: '8ade266da86fd06e2fec19e68dad547bffae769a' }, this.dsLabel && (h("div", { key: '4c3867f4c1ee11ee8afd2c94c07303212477e432', class: "ds-tag-group__label" }, this.dsLabel)), this.dsAssistiveText && (h("small", { key: 'eb2cee2d745da0cc0782e7d7958973419eec8b45', class: "ds-tag-group__assistive-text", id: assistiveTextId }, this.dsAssistiveText)))), h("ul", { key: '2fd183e8bd7a02310d7b178513b7f5ceb39da676', class: "ds-tag-group__tags" }, Array.from(this.el.children).map(child => h("li", { innerHTML: child.outerHTML })))));
     }
 };
 DsTagGroup.style = dsTagGroupCss;

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

@@ -1,8 +1,8 @@
-import { h, r as registerInstance, a as getElement } from './index-CIXO9B7A.js';
+import { h, r as registerInstance, a as getElement } from './index-CweVEfzR.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-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 dsTagCss = ":root,:host{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.ds-tag{box-sizing:border-box;display:inline-flex;align-items:center;min-height:1.5rem;background-color:var(--ds-bgColor-neutral);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-textColor-default);background-color:var(--ds-bgColor-neutral)}.ds-tag.ds-tag--default:hover:has(.ds-tag__link){background-color:var(--ds-bgColor-neutral-hover)}.ds-tag.ds-tag--default:active:has(.ds-tag__link){background-color:var(--ds-bgColor-neutral-active)}.ds-tag.ds-tag--black{color:var(--ds-textColor-white);background-color:var(--ds-bgColor-black)}.ds-tag.ds-tag--black:hover:has(.ds-tag__link){background-color:var(--ds-bgColor-black-hover)}.ds-tag.ds-tag--black:active:has(.ds-tag__link){background-color:var(--ds-bgColor-black-active)}.ds-tag.ds-tag--white{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white)}.ds-tag.ds-tag--white:hover:has(.ds-tag__link){background-color:var(--ds-bgColor-white-hover)}.ds-tag.ds-tag--white:active:has(.ds-tag__link){background-color:var(--ds-bgColor-white-active)}.ds-tag.ds-tag--info{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info)}.ds-tag.ds-tag--info:hover:has(.ds-tag__link){background-color:var(--ds-bgColor-info-hover)}.ds-tag.ds-tag--info:active:has(.ds-tag__link){background-color:var(--ds-bgColor-info-active)}.ds-tag.ds-tag--danger{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger)}.ds-tag.ds-tag--danger:hover:has(.ds-tag__link){background-color:var(--ds-bgColor-danger-hover)}.ds-tag.ds-tag--danger:active:has(.ds-tag__link){background-color:var(--ds-bgColor-danger-active)}.ds-tag.ds-tag--attention{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention)}.ds-tag.ds-tag--attention:hover:has(.ds-tag__link){background-color:var(--ds-bgColor-attention-hover)}.ds-tag.ds-tag--attention:active:has(.ds-tag__link){background-color:var(--ds-bgColor-attention-active)}.ds-tag.ds-tag--success{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success)}.ds-tag.ds-tag--success:hover:has(.ds-tag__link){background-color:var(--ds-bgColor-success-hover)}.ds-tag.ds-tag--success:active:has(.ds-tag__link){background-color:var(--ds-bgColor-success-active)}.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) {
@@ -22,7 +22,7 @@ const DsTag = class {
         });
         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)));
+        return (h("div", { key: 'febd1f950d71c660ac799310851365f7c26d5f29', class: classes }, h("slot", { key: '16ebb3f3698b583bc7985c4ce6aa3374c2057456', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'dfa9d367bbf7949c7ec3095325f1b735019e0f1b' }, 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: '1569e0630eff3feb5a0b0044ddb616ab1ac8865c', 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: '' })]);

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

@@ -1,11 +1,11 @@
-import { h, r as registerInstance, c as createEvent, a as getElement, F as Fragment } from './index-CIXO9B7A.js';
+import { h, r as registerInstance, c as createEvent, a as getElement, F as Fragment } from './index-CweVEfzR.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { g as getRequiredText, a as getOptionalText, v as validityMessage } from './controlUtils-DQRQCahL.js';
+import { g as getRequiredText, a as getOptionalText, v as validityMessage } from './controlUtils-BJyRJHcK.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--uGgWE-E.js';
+import './index-DoxslvGO.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-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 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:root,.sc-ds-text-input-h{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-palette-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50)}.sc-ds-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-textColor-default)}.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-textColor-secondary)}.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;background-color:var(--ds-bgColor-white);border-color:var(--ds-borderColor-default);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-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);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-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-input__container.invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-input__container.invalid.sc-ds-text-input:hover:not(.ds-input__container.invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-input__container.invalid.active.sc-ds-text-input{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-input__container.valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-input__container.valid.sc-ds-text-input:hover:not(.ds-input__container.valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-input__container.valid.active.sc-ds-text-input{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.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-borderColor-default)}.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-borderColor-default);background-color:var(--ds-bgColor-white-active)}.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-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.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-borderColor-primary)}.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-bgColor-transparent-onLight-hover)}.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-textColor-default);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-textColor-secondary)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.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-textColor-link-standalone)}.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-textColor-default)}.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',
@@ -83,7 +83,6 @@ const DsTextInput = class {
     async clearInput(e) {
         this.dsValue = '';
         this.inputElement.focus();
-        this.clearButtonVisible = false;
         this.dsClear.emit({ event: e, value: this.dsValue });
     }
     async dsFocus() {
@@ -94,6 +93,7 @@ const DsTextInput = class {
     }
     valueObserver(value) {
         this.dsChange.emit({ value });
+        this.clearButtonVisible = !!value;
     }
     getLabelText = () => {
         if (this.dsRequired) {
@@ -133,7 +133,6 @@ const DsTextInput = class {
     handleInput = (e) => {
         const target = e.target;
         this.dsValue = target.value;
-        this.clearButtonVisible = !!target.value;
         this.dsInput.emit({ event: e, value: this.dsValue });
         if (this.dsErrorText || this.wasInvalidOnBlur) {
             const validityState = this.inputElement?.validity;
@@ -215,20 +214,20 @@ const DsTextInput = class {
         const inputType = this.dsType === 'password' && this.passwordInputVisible ? 'text' : this.dsType;
         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', {
+        return (h(Fragment, { key: 'c6e9959eb7982f343c228cbfbef591b7ed1da017' }, h("div", { key: 'aa5bc08c342fd8c92b3a49ef700134fe8924f422', class: "ds-input__label-container" }, h("slot", { key: '33da148c9710828d0bed2203636d2192e3a4d5e3', name: "label" }, h("label", { key: '1c773019f0e9e4f2adfbafdfddb7b9330623a54a', htmlFor: this.dsId }, this.getLabelText())), h("slot", { key: 'b2c3ebe974b798e0d20e539559c5f539d3b9e11e', name: "assistiveText" }, h("small", { key: '76fbe9e0a4d7cc8f06f60ebcd31c6475d1771202', id: this.assistiveTextId }, this.dsAssistiveText), h(DsVisuallyHidden, { key: '695c998b00a7c0526ae9d084f8d04d9fd310fe4f', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, this.dsHiddenAssistiveText))), h("div", { key: '27cef3d860f46b8b1d55eeaf4ac0a8ee247c30f2', 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: 'a9bf53d9a819db9cad6c80535abb3b101d3e36ed', 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: '27950a285c7a5290721c1a8d5379a43efc6be696', 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: '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" }))));
+                }), "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: 'a26f4f2d0198113f3c7b33cdbcfe00662d2c6098', name: "validity" }, h(DsInputValidity, { key: '63f027f7cd8746a66ea266ed5194904c72a35f65', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsValidityRole: "alert" }), h(DsInputValidity, { key: 'c2f873164d8ccf7fb45fb8ab814038d28e52406c', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsValidityRole: "status" }))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CIXO9B7A.js';
+import { r as registerInstance, h } from './index-CweVEfzR.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}";
+const dsVisuallyHiddenCss = ":host{position:absolute}.ds-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
 
 const DsVisuallyHidden = class {
     constructor(hostRef) {
@@ -8,7 +8,7 @@ const DsVisuallyHidden = class {
     }
     dsTag = 'div';
     render() {
-        return (h(this.dsTag, { key: '4294edab8fcf553ad50c2e0f268df30e9338382f', class: "ds-visually-hidden" }, h("slot", { key: '33181a1b5924f4e58b71a1795ebcc42e72b66971' })));
+        return (h(this.dsTag, { key: '9205695b0a2904a92094a6481db09529d080c703', class: "ds-visually-hidden" }, h("slot", { key: '5f9d9c09699189b39d0ff96883c68c44d984aed7' })));
     }
 };
 DsVisuallyHidden.style = dsVisuallyHiddenCss;