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

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-434995e1.js';
-import { c as classNames } from './index-72ac5051.js';
-import { g as getRequiredText, a as getOptionalText } from './controlUtils-9ca4087b.js';
-import { i as isValidation } from './store-b8d17c10.js';
-import { b as inheritAttributes, g as getAriaLabel, c as idGenerator } from './utils-cfc536bc.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment } from './index-Cm7V4EAn.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { g as getRequiredText, a as getOptionalText } from './controlUtils-CNER0MvM.js';
+import { i as isValidation } from './index-DuYjhvTn.js';
+import { i as idGenerator } from './utils-CqaqnfY4.js';
+import { i as inheritAttributes } from './attributes-BD_lNRxn.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',
@@ -18,7 +18,9 @@ const inputIdGenerator = idGenerator('ds-input');
 const DsTextInput = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.clear = createEvent(this, "clear", 7);
+        this.dsChange = createEvent(this, "dsChange");
+        this.dsInput = createEvent(this, "dsInput");
+        this.dsClear = createEvent(this, "dsClear");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -38,79 +40,86 @@ const DsTextInput = class {
     hasSuffixSlot = false;
     get el() { return getElement(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();
         }
@@ -123,11 +132,12 @@ const DsTextInput = class {
     };
     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;
         }
@@ -136,12 +146,12 @@ const DsTextInput = class {
         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;
     }
@@ -149,13 +159,13 @@ const DsTextInput = class {
         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;
     }
@@ -165,22 +175,27 @@ const DsTextInput = class {
         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 watchers() { return {
+        "value": ["valueObserver"]
+    }; }
 };
-DsTextInput.style = DsTextInputStyle0;
+DsTextInput.style = dsTextInputCss;
 
 export { DsTextInput as ds_text_input };

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

@@ -1,16 +1,15 @@
-import { r as registerInstance, h } from './index-434995e1.js';
+import { r as registerInstance, h } from './index-Cm7V4EAn.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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     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' })));
     }
 };
-DsVisuallyHidden.style = DsVisuallyHiddenStyle0;
+DsVisuallyHidden.style = dsVisuallyHiddenCss;
 
 export { DsVisuallyHidden as ds_visually_hidden };

package/dist/esm/index-BfTCfPZ1.js

@@ -0,0 +1,92 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+var hasRequiredClassnames;
+
+function requireClassnames () {
+	if (hasRequiredClassnames) return classnames.exports;
+	hasRequiredClassnames = 1;
+	(function (module) {
+		/* global define */
+
+		(function () {
+
+			var hasOwn = {}.hasOwnProperty;
+
+			function classNames () {
+				var classes = '';
+
+				for (var i = 0; i < arguments.length; i++) {
+					var arg = arguments[i];
+					if (arg) {
+						classes = appendClass(classes, parseValue(arg));
+					}
+				}
+
+				return classes;
+			}
+
+			function parseValue (arg) {
+				if (typeof arg === 'string' || typeof arg === 'number') {
+					return arg;
+				}
+
+				if (typeof arg !== 'object') {
+					return '';
+				}
+
+				if (Array.isArray(arg)) {
+					return classNames.apply(null, arg);
+				}
+
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					return arg.toString();
+				}
+
+				var classes = '';
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes = appendClass(classes, key);
+					}
+				}
+
+				return classes;
+			}
+
+			function appendClass (value, newClass) {
+				if (!newClass) {
+					return value;
+				}
+			
+				if (value) {
+					return value + ' ' + newClass;
+				}
+			
+				return value + newClass;
+			}
+
+			if (module.exports) {
+				classNames.default = classNames;
+				module.exports = classNames;
+			} else {
+				window.classNames = classNames;
+			}
+		}()); 
+	} (classnames));
+	return classnames.exports;
+}
+
+var classnamesExports = requireClassnames();
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+
+export { classNames as c };