@uh-design-system/component-library 0.5.2 → 0.6.0

package/dist/components/ds-text-input.js

@@ -1,15 +1,15 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment } from './index2.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './index2.js';
 import { c as classNames } from './index3.js';
 import { g as getRequiredText, a as getOptionalText } from './controlUtils.js';
-import { i as isValidation } from './store.js';
-import { g as getAriaLabel, i as idGenerator, d as defineCustomElement$4 } from './ds-icon2.js';
-import { b as inheritAttributes } from './attributes.js';
-import { d as defineCustomElement$5 } from './ds-button2.js';
-import { d as defineCustomElement$3 } from './ds-input-validity2.js';
+import { i as isValidation } from './index.js';
+import { i as idGenerator, d as defineCustomElement$5 } from './ds-icon2.js';
+import { i as inheritAttributes } from './attributes.js';
+import { d as defineCustomElement$6 } from './ds-button2.js';
+import { d as defineCustomElement$4 } from './ds-input-validity2.js';
+import { d as defineCustomElement$3 } from './ds-spinner2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
 
-const dsTextInputCss = ".sc-ds-text-input:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.no-style-leak.sc-ds-text-input *.sc-ds-text-input,.sc-ds-text-input-h *.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;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-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.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(input:active){outline:none}.ds-input--container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:readonly){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-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-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: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::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:focus{outline:none;border:none}.ds-input--container.sc-ds-text-input>input[type=number].sc-ds-text-input{-moz-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{-webkit-appearance:none;margin:0}.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(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:has(ds-button.suffix){padding-inline-end:unset}.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-textColor-default)}.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}.error-text--container.sc-ds-text-input,.success-text--container.sc-ds-text-input{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.error-text--container.sc-ds-text-input ds-icon.sc-ds-text-input,.success-text--container.sc-ds-text-input ds-icon.sc-ds-text-input{display:block;height:1.5rem}.error-text--container.sc-ds-text-input small.sc-ds-text-input,.success-text--container.sc-ds-text-input small.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)}.error-text--container.sc-ds-text-input{color:var(--ds-textColor-danger)}.success-text--container.sc-ds-text-input{color:var(--ds-textColor-success)}";
-const DsTextInputStyle0 = dsTextInputCss;
+const dsTextInputCss = ".sc-ds-text-input:root{--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 INPUT_TYPE_ICONS_MAP = {
     search: 'search',
@@ -23,7 +23,9 @@ const DsTextInput$1 = proxyCustomElement(class DsTextInput extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.clear = createEvent(this, "clear", 7);
+        this.dsChange = createEvent(this, "dsChange");
+        this.dsInput = createEvent(this, "dsInput");
+        this.dsClear = createEvent(this, "dsClear");
         this.internals = this.attachInternals();
     }
     inheritedAttributes = {};
@@ -37,79 +39,86 @@ const DsTextInput$1 = proxyCustomElement(class DsTextInput extends H {
     hasSuffixSlot = false;
     get el() { return this; }
     internals;
-    clear;
-    label;
-    placeholder;
-    identifier = inputIdGenerator.next().value;
-    name;
-    disabled;
-    optional;
-    required;
-    readonly;
-    value;
-    min;
-    max;
-    maxlength;
-    pattern;
-    autocomplete;
-    optionalText;
-    errorText;
-    successText;
-    assistiveText;
-    actionButtonAriaLabel;
-    hiddenAssistiveText;
-    prefixText;
-    suffixText;
-    icon = '';
-    type = 'text';
-    ariaLabel;
-    ariaLabelledby;
-    ariaDescribedby;
+    dsChange;
+    dsInput;
+    dsClear;
+    dsLabel;
+    dsPlaceholder;
+    dsId = inputIdGenerator.next().value;
+    dsName;
+    dsDisabled;
+    dsOptional;
+    dsRequired;
+    dsReadonly;
+    dsValue;
+    dsMin;
+    dsMax;
+    dsMaxLength;
+    dsPattern;
+    dsAutocomplete;
+    dsOptionalText;
+    dsErrorText;
+    dsSuccessText;
+    dsAssistiveText;
+    dsActionButtonAriaLabel;
+    dsHiddenAssistiveText;
+    dsPrefixText;
+    dsSuffixText;
+    dsIcon = '';
+    dsType = 'text';
+    dsAriaLabel;
+    dsAriaLabelledby;
+    dsAriaDescribedby;
     hasFocus = false;
     clearButtonVisible = false;
     passwordInputVisible = false;
     inputActive = false;
     validationMessage;
     setIds = () => {
-        this.assistiveTextId = `${this.identifier}-assistive-text`;
-        this.visuallyHiddenAssistiveTextId = `${this.identifier}-visually-hidden-assistive-text`;
-        this.errorTextId = `${this.identifier}-error-text`;
-        this.successTextId = `${this.identifier}-success-text`;
+        this.assistiveTextId = `${this.dsId}-assistive-text`;
+        this.visuallyHiddenAssistiveTextId = `${this.dsId}-visually-hidden-assistive-text`;
+        this.errorTextId = `${this.dsId}-error-text`;
+        this.successTextId = `${this.dsId}-success-text`;
     };
-    getValidationMessage = () => this.errorText || this.internals?.validationMessage || this.inputElement?.validationMessage;
+    getValidationMessage = () => this.dsErrorText || this.internals?.validationMessage || this.inputElement?.validationMessage;
     async togglePasswordVisibility() {
         return (this.passwordInputVisible = !this.passwordInputVisible);
     }
-    async clearInput() {
-        this.inputElement.value = '';
+    async clearInput(e) {
+        this.dsValue = '';
         this.inputElement.focus();
         this.clearButtonVisible = false;
-        this.clear.emit({ id: this.identifier });
+        this.dsClear.emit({ event: e, value: this.dsValue });
+    }
+    valueObserver(value) {
+        this.dsChange.emit({ value });
     }
     getLabelText = () => {
-        if (this.required) {
-            return getRequiredText(this.label);
+        if (this.dsRequired) {
+            return getRequiredText(this.dsLabel);
         }
-        if (this.optional) {
-            return getOptionalText(this.label, this.optionalText);
+        if (this.dsOptional) {
+            return getOptionalText(this.dsLabel, this.dsOptionalText);
         }
-        return this.label;
+        return this.dsLabel;
     };
     componentWillLoad() {
         this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
+            ...inheritAttributes(this, this.el, ['id']),
         };
         this.setIds();
         this.hasPrefixSlot = !!this.el.querySelector('[slot="prefix"]');
         this.hasSuffixSlot = !!this.el.querySelector('[slot="suffix"]');
-        if (isValidation('server') || this.errorText) {
+        if (isValidation('server') || this.dsErrorText) {
             this.validationMessage = this.getValidationMessage();
         }
     }
     handleInput = (e) => {
         const target = e.target;
+        this.dsValue = target.value;
         this.clearButtonVisible = !!target.value;
         this.internals?.setFormValue(target.value);
+        this.dsInput.emit({ event: e, value: this.dsValue });
         if (isValidation('client') && this.validationMessage) {
             this.validationMessage = this.getValidationMessage();
         }
@@ -122,11 +131,12 @@ const DsTextInput$1 = proxyCustomElement(class DsTextInput extends H {
     };
     onActionButtonClicked = (e) => {
         e.stopPropagation();
-        switch (this.type) {
+        switch (this.dsType) {
             case 'password':
                 return this.togglePasswordVisibility();
             case 'search':
-                this.clearInput();
+                this.clearInput(e);
+                return;
             default:
                 return;
         }
@@ -135,12 +145,12 @@ const DsTextInput$1 = proxyCustomElement(class DsTextInput extends H {
         if (this.hasPrefixSlot) {
             return h("slot", { name: "prefix" });
         }
-        if (this.prefixText) {
-            return (h("slot", { name: "prefix" }, h("span", { class: "prefix" }, this.prefixText)));
+        if (this.dsPrefixText) {
+            return (h("slot", { name: "prefix" }, h("span", { class: "prefix" }, this.dsPrefixText)));
         }
-        const prefixIcon = this.icon || INPUT_TYPE_ICONS_MAP[this.type];
+        const prefixIcon = this.dsIcon || INPUT_TYPE_ICONS_MAP[this.dsType];
         if (prefixIcon) {
-            return (h("slot", { name: "prefix" }, h("ds-icon", { class: "prefix", name: prefixIcon })));
+            return (h("slot", { name: "prefix" }, h("ds-icon", { class: "prefix", dsName: prefixIcon })));
         }
         return null;
     }
@@ -148,13 +158,13 @@ const DsTextInput$1 = proxyCustomElement(class DsTextInput extends H {
         if (this.hasSuffixSlot) {
             return h("slot", { name: "suffix" });
         }
-        if (this.suffixText) {
-            return (h("slot", { name: "suffix" }, h("span", { class: "suffix" }, this.suffixText)));
+        if (this.dsSuffixText) {
+            return (h("slot", { name: "suffix" }, h("span", { class: "suffix" }, this.dsSuffixText)));
         }
-        const actionButtonIcon = INPUT_TYPE_ACTION_BUTTON_ICON_MAP[this.type]?.(this) ?? '';
-        const ariaPressed = this.type === 'password' ? this.passwordInputVisible : undefined;
+        const actionButtonIcon = INPUT_TYPE_ACTION_BUTTON_ICON_MAP[this.dsType]?.(this) ?? '';
+        const ariaPressed = this.dsType === 'password' ? this.passwordInputVisible : undefined;
         if (actionButtonIcon) {
-            return (h("slot", { name: "suffix" }, h("ds-button", { ref: e => (this.suffixButtonElement = e), variant: "supplementary", colour: "black", class: "suffix", disabled: false, icon: actionButtonIcon, onClick: this.onActionButtonClicked, "aria-pressed": ariaPressed, "aria-label": this.actionButtonAriaLabel })));
+            return (h("slot", { name: "suffix" }, h("ds-button", { ref: e => (this.suffixButtonElement = e), dsVariant: "supplementary", dsColour: "black", class: "suffix", dsDisabled: false, dsIcon: actionButtonIcon, onClick: this.onActionButtonClicked, "aria-pressed": ariaPressed, "aria-label": this.dsActionButtonAriaLabel })));
         }
         return null;
     }
@@ -164,50 +174,55 @@ const DsTextInput$1 = proxyCustomElement(class DsTextInput extends H {
         this.inputElement.focus();
     }
     render() {
-        const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (h(Fragment, { key: '6b5cc3e8f7fe00df47392eade88010d1f9faf7e1' }, h("div", { key: 'c5e72b94f444c3923a3d72fb08615a97a9a174c2', class: "ds-input--label-container" }, h("slot", { key: 'a27efdf7b2311fdf310ce5340adccac015c906b1', name: "label" }, h("label", { key: '3a0241a9c572eb4403c5d46eb6761b5121726bf9', htmlFor: this.identifier }, this.getLabelText())), h("slot", { key: '8ffec65634da10f44ea145d1efec86147c6dc296', name: "help-text" }, h("small", { key: 'a45d970a13bae23f2f488a969ee9184cc521680e', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: 'abea8540ddeed9f797cd28c63aabbc734b7bf083', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: '9f162c62ee86782abb60344074544feb643c3c8b', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
-                disabled: this.disabled,
-                readonly: this.readonly,
-                valid: !!this.successText,
+        const inputType = this.dsType === 'password' && this.passwordInputVisible ? 'text' : this.dsType;
+        return (h(Fragment, { key: '015e667345613d819eb885bdfde2011eefc60577' }, h("div", { key: 'abc03d3418fb9c648bc4d8039a4602366b6125c8', class: "ds-input__label-container" }, h("slot", { key: '9b660821e35939092570b4f6f449caca22771dcb', name: "label" }, h("label", { key: '96efa9db67a1f51f3380f7a3c350a8da45df9e1e', htmlFor: this.dsId }, this.getLabelText())), h("slot", { key: 'a5cb893f2c69efb68b7557fe5d253b58e7930f4c', name: "assistiveText" }, h("small", { key: '341f60604eb3b795bcaf5d81306dc349d0093647', id: this.assistiveTextId }, this.dsAssistiveText), h("ds-visually-hidden", { key: '613244a6dd9bb180a82c4250514ab74392cbaee8', id: this.visuallyHiddenAssistiveTextId }, this.dsHiddenAssistiveText))), h("div", { key: 'e0fb89582c7651eb00ec0dce5f5c4d0648840237', 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.validationMessage,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), h("input", { key: '1c7c944a70012444caa83f7f0104f6e1992d3acb', ref: e => (this.inputElement = e), id: this.identifier, name: this.name, "aria-label": getAriaLabel(this.label, this.ariaLabel), "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby ||
-                classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
-                    [this.errorTextId]: Boolean(this.validationMessage),
-                    [this.successTextId]: Boolean(this.successText),
-                }), "aria-invalid": Boolean(this.validationMessage) ? 'true' : 'false', disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: this.handleInput, onFocus: () => (this.hasFocus = true), onBlur: this.handleBlur, ...this.inheritedAttributes }), this.renderSuffixContent()), h("slot", { key: 'bdc4bbc3a0abe3668bcf18f719d50974ad12e1c4', name: "input-validity" }, h("ds-input-validity", { key: 'a392691fed93056f22673e5d20c6c4c099481181', id: this.errorTextId, text: this.validationMessage, type: "error", role: "alert" }), h("ds-input-validity", { key: '7e3b45928cdefed2c65b8c50fb4245527bae758e', id: this.successTextId, text: this.successText, type: "success", role: "status" }))));
+            }) }, this.renderPrefixContent(), h("input", { key: '5ad15cf4d756aae913e08bfd71338ea3d80c11b9', 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.validationMessage,
+                    [this.successTextId]: !!this.dsSuccessText,
+                }), "aria-invalid": this.validationMessage ? '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.hasFocus = true), onBlur: this.handleBlur, ...this.inheritedAttributes }), this.renderSuffixContent()), h("slot", { key: '4e378385106dd578542a99303cd4217e7bf21694', name: "validity" }, h("ds-input-validity", { key: '367fab0f5d7446f99a028e881fa5c8ab8d9829e5', id: this.errorTextId, dsText: this.validationMessage, dsType: "error", dsValidityRole: "alert" }), h("ds-input-validity", { key: '8c35c70e4beb5ade4a5f8f6fb2a35d94be57cd98', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsValidityRole: "status" }))));
     }
     static get formAssociated() { return true; }
-    static get style() { return DsTextInputStyle0; }
+    static get watchers() { return {
+        "value": ["valueObserver"]
+    }; }
+    static get style() { return dsTextInputCss; }
 }, [70, "ds-text-input", {
-        "label": [1],
-        "placeholder": [1],
-        "identifier": [1, "id"],
-        "name": [1],
-        "disabled": [4],
-        "optional": [4],
-        "required": [4],
-        "readonly": [4],
-        "value": [1],
-        "min": [2],
-        "max": [2],
-        "maxlength": [2],
-        "pattern": [1],
-        "autocomplete": [1],
-        "optionalText": [1, "optional-text"],
-        "errorText": [1, "error-text"],
-        "successText": [1, "success-text"],
-        "assistiveText": [1, "assistive-text"],
-        "actionButtonAriaLabel": [1, "action-button-aria-label"],
-        "hiddenAssistiveText": [1, "hidden-assistive-text"],
-        "prefixText": [1, "prefix-text"],
-        "suffixText": [1, "suffix-text"],
-        "icon": [1],
-        "type": [1],
-        "ariaLabel": [1, "aria-label"],
-        "ariaLabelledby": [1, "aria-labelledby"],
-        "ariaDescribedby": [1, "aria-describedby"],
+        "dsLabel": [1, "ds-label"],
+        "dsPlaceholder": [1, "ds-placeholder"],
+        "dsId": [1, "ds-id"],
+        "dsName": [1, "ds-name"],
+        "dsDisabled": [4, "ds-disabled"],
+        "dsOptional": [4, "ds-optional"],
+        "dsRequired": [4, "ds-required"],
+        "dsReadonly": [4, "ds-readonly"],
+        "dsValue": [1, "ds-value"],
+        "dsMin": [2, "ds-min"],
+        "dsMax": [2, "ds-max"],
+        "dsMaxLength": [2, "ds-max-length"],
+        "dsPattern": [1, "ds-pattern"],
+        "dsAutocomplete": [1, "ds-autocomplete"],
+        "dsOptionalText": [1, "ds-optional-text"],
+        "dsErrorText": [1, "ds-error-text"],
+        "dsSuccessText": [1, "ds-success-text"],
+        "dsAssistiveText": [1, "ds-assistive-text"],
+        "dsActionButtonAriaLabel": [1, "ds-action-button-aria-label"],
+        "dsHiddenAssistiveText": [1, "ds-hidden-assistive-text"],
+        "dsPrefixText": [1, "ds-prefix-text"],
+        "dsSuffixText": [1, "ds-suffix-text"],
+        "dsIcon": [1, "ds-icon"],
+        "dsType": [1, "ds-type"],
+        "dsAriaLabel": [1, "ds-aria-label"],
+        "dsAriaLabelledby": [1, "ds-aria-labelledby"],
+        "dsAriaDescribedby": [1, "ds-aria-describedby"],
         "hasFocus": [32],
         "clearButtonVisible": [32],
         "passwordInputVisible": [32],
@@ -215,12 +230,14 @@ const DsTextInput$1 = proxyCustomElement(class DsTextInput extends H {
         "validationMessage": [32],
         "togglePasswordVisibility": [64],
         "clearInput": [64]
+    }, undefined, {
+        "value": ["valueObserver"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ds-text-input", "ds-button", "ds-icon", "ds-input-validity", "ds-visually-hidden"];
+    const components = ["ds-text-input", "ds-button", "ds-icon", "ds-input-validity", "ds-spinner", "ds-visually-hidden"];
     components.forEach(tagName => { switch (tagName) {
         case "ds-text-input":
             if (!customElements.get(tagName)) {
@@ -229,15 +246,20 @@ function defineCustomElement$1() {
             break;
         case "ds-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "ds-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "ds-input-validity":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ds-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/components/ds-visually-hidden2.js

@@ -1,7 +1,6 @@
 import { p as proxyCustomElement, H, h } from './index2.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 DsVisuallyHiddenStyle0 = dsVisuallyHiddenCss;
 
 const DsVisuallyHidden = proxyCustomElement(class DsVisuallyHidden extends H {
     constructor() {
@@ -10,9 +9,9 @@ const DsVisuallyHidden = proxyCustomElement(class DsVisuallyHidden extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'f488f0f134c76c308763d47c57360e54ae299a06', class: "ds-visually-hidden" }, h("slot", { key: '20d5cdef8c333e5421c670e2558b511b1f235e7f' })));
+        return (h("div", { key: 'faa791957259a5ef05d2417a7b316e4cdabd8291', class: "ds-visually-hidden" }, h("slot", { key: 'd7c192f15bf2d74700205ad29f3bb78d0f9cce80' })));
     }
-    static get style() { return DsVisuallyHiddenStyle0; }
+    static get style() { return dsVisuallyHiddenCss; }
 }, [1, "ds-visually-hidden"]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/index.js

@@ -1,2 +1,208 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './index2.js';
-export { c as configure } from './store.js';
+import { g as getRenderingRef, f as forceUpdate } from './index2.js';
+export { b as getAssetPath, r as render, s as setAssetPath, d as setNonce, e as setPlatformOptions } from './index2.js';
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2_000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState ?? {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+const initialState = {
+    validation: 'client',
+    language: 'en',
+};
+const { state, set } = createStore({
+    ...initialState,
+});
+const isValidation = (validation) => state.validation === validation;
+const getLanguage = () => state.language;
+const configure = ({ validation, language }) => {
+    set('validation', validation || initialState.validation);
+    set('language', language || initialState.language);
+};
+
+export { configure, getLanguage as g, isValidation as i };