@uh-design-system/component-library 1.1.0-rc.0 → 1.1.0-rc.1

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.css

@@ -14,10 +14,10 @@
   }
 }
 
-.ds-text-input__kJ67Jk__label-container {
+.ds-text-input__7h4nsx__label-container {
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__kJ67Jk__label-container label {
+.ds-text-input__7h4nsx__label-container label {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
@@ -25,7 +25,7 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-default);
 }
-.ds-text-input__kJ67Jk__label-container small {
+.ds-text-input__7h4nsx__label-container small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);
@@ -35,17 +35,17 @@
   margin-block-start: var(--ds-spacing-3xSmall);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-input__kJ67Jk__container:focus-visible {
+.ds-text-input__7h4nsx__container: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-text-input__kJ67Jk__container:focus-within {
+.ds-text-input__7h4nsx__container: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-text-input__kJ67Jk__container {
+.ds-text-input__7h4nsx__container {
   box-sizing: border-box;
   width: 100%;
   display: inline-flex;
@@ -57,65 +57,65 @@
   border-color: var(--ds-borderColor-default);
   padding-inline: var(--ds-spacing-xSmall);
 }
-.ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--invalid {
+.ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--invalid:hover:not(.ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--invalid:focus-within) {
+.ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--invalid:hover:not(.ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--invalid.ds-text-input__kJ67Jk__container--active {
+.ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--invalid.ds-text-input__7h4nsx__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--valid {
+.ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--valid:hover:not(.ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--valid:focus-within) {
+.ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--valid:hover:not(.ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--valid .ds-text-input__kJ67Jk__container--active {
+.ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--valid .ds-text-input__7h4nsx__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--readonly, .ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--disabled {
+.ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--readonly, .ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-input__kJ67Jk__container:has(span.ds-text-input__kJ67Jk__prefix, .ds-text-input__kJ67Jk__icon) {
+.ds-text-input__7h4nsx__container:has(span.ds-text-input__7h4nsx__prefix, .ds-text-input__7h4nsx__icon) {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__kJ67Jk__container:has(.ds-text-input__kJ67Jk__button) {
+.ds-text-input__7h4nsx__container:has(.ds-text-input__7h4nsx__button) {
   padding-inline-end: unset;
 }
-.ds-text-input__kJ67Jk__container:has(input:active):not:has(input:disabled, input:read-only) {
+.ds-text-input__7h4nsx__container:has(input:active):not:has(input:disabled, input:read-only) {
   border-color: var(--ds-borderColor-default);
 }
-.ds-text-input__kJ67Jk__container:has(input:active) {
+.ds-text-input__7h4nsx__container:has(input:active) {
   outline: none;
 }
-.ds-text-input__kJ67Jk__container.active:not(.ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--disabled, .ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--readonly, .ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--invalid, .ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--valid) {
+.ds-text-input__7h4nsx__container.active:not(.ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--disabled, .ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--readonly, .ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--invalid, .ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-input__kJ67Jk__container:hover:not(.ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--disabled, .ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--readonly, .ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--active, .ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--invalid, .ds-text-input__kJ67Jk__container.ds-text-input__kJ67Jk__container--valid, .ds-text-input__kJ67Jk__container:focus-within) {
+.ds-text-input__7h4nsx__container:hover:not(.ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--disabled, .ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--readonly, .ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--active, .ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--invalid, .ds-text-input__7h4nsx__container.ds-text-input__7h4nsx__container--valid, .ds-text-input__7h4nsx__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-input__kJ67Jk__container:focus-within:not(.ds-text-input__kJ67Jk__container:focus-within.ds-text-input__kJ67Jk__container--invalid, .ds-text-input__kJ67Jk__container:focus-within.ds-text-input__kJ67Jk__container--valid, .ds-text-input__kJ67Jk__container:focus-within.ds-text-input__kJ67Jk__container--readonly) {
+.ds-text-input__7h4nsx__container:focus-within:not(.ds-text-input__7h4nsx__container:focus-within.ds-text-input__7h4nsx__container--invalid, .ds-text-input__7h4nsx__container:focus-within.ds-text-input__7h4nsx__container--valid, .ds-text-input__7h4nsx__container:focus-within.ds-text-input__7h4nsx__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-input__kJ67Jk__container:focus-within * > .ds-text-input__kJ67Jk__button > button:focus-visible {
+.ds-text-input__7h4nsx__container:focus-within * > .ds-text-input__7h4nsx__button > button: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-text-input__kJ67Jk__container > input {
+.ds-text-input__7h4nsx__container > input {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -131,7 +131,7 @@
   border: none;
   padding-block: var(--ds-spacing-4xSmall);
 }
-.ds-text-input__kJ67Jk__container > input::placeholder {
+.ds-text-input__7h4nsx__container > input::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -139,34 +139,35 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-input__kJ67Jk__container > input:disabled {
+.ds-text-input__7h4nsx__container > input:disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-input__kJ67Jk__container > input:disabled::placeholder {
+.ds-text-input__7h4nsx__container > input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-input__kJ67Jk__container > input:focus {
+.ds-text-input__7h4nsx__container > input:focus {
   outline: none;
   border: none;
 }
-.ds-text-input__kJ67Jk__container > input[type=number] {
+.ds-text-input__7h4nsx__container > input[type=number] {
   appearance: textfield;
 }
-.ds-text-input__kJ67Jk__container > input::-webkit-search-decoration, .ds-text-input__kJ67Jk__container > input::-webkit-search-cancel-button, .ds-text-input__kJ67Jk__container > input::-webkit-search-results-button, .ds-text-input__kJ67Jk__container > input::-webkit-search-results-decoration, .ds-text-input__kJ67Jk__container > input::-webkit-inner-spin-button, .ds-text-input__kJ67Jk__container > input::-webkit-outer-spin-button {
+.ds-text-input__7h4nsx__container > input::-webkit-search-decoration, .ds-text-input__7h4nsx__container > input::-webkit-search-cancel-button, .ds-text-input__7h4nsx__container > input::-webkit-search-results-button, .ds-text-input__7h4nsx__container > input::-webkit-search-results-decoration, .ds-text-input__7h4nsx__container > input::-webkit-inner-spin-button, .ds-text-input__7h4nsx__container > input::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
-.ds-text-input__kJ67Jk__container:has(span.ds-text-input__kJ67Jk__prefix, .ds-text-input__kJ67Jk__icon) > input {
+.ds-text-input__7h4nsx__container:has(span.ds-text-input__7h4nsx__prefix, .ds-text-input__7h4nsx__icon) > input {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__kJ67Jk__container span.ds-text-input__kJ67Jk__prefix, .ds-text-input__kJ67Jk__container span.ds-text-input__kJ67Jk__suffix {
+.ds-text-input__7h4nsx__container span.ds-text-input__7h4nsx__prefix, .ds-text-input__7h4nsx__container span.ds-text-input__7h4nsx__suffix {
+  font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-link-standalone);
 }
-.ds-text-input__kJ67Jk__container .ds-text-input__kJ67Jk__icon, .ds-text-input__kJ67Jk__container ::slotted([slot=prefix]) {
+.ds-text-input__7h4nsx__container .ds-text-input__7h4nsx__icon, .ds-text-input__7h4nsx__container ::slotted([slot=prefix]) {
   height: 1.5rem;
   color: var(--ds-textColor-default);
 }
-.ds-text-input__kJ67Jk__container .ds-text-input__kJ67Jk__button {
+.ds-text-input__7h4nsx__container .ds-text-input__7h4nsx__button {
   margin-top: calc(var(--ds-spacing-3xSmall) * -1);
   margin-right: calc(var(--ds-spacing-4xSmall) * -1);
   max-height: 40px;

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js

@@ -1,7 +1,7 @@
 import { Fragment, h, forceUpdate } from "@stencil/core";
 import classNames from "classnames";
 import { clearField, hidePassword, showPassword, validityMessage } from "../../../utils/controls/controlUtils";
-import { declareComponentDependencies, idGenerator, transformTagName } from "../../../utils/utils";
+import { declareComponentDependencies, idGenerator, ifDefined, transformTagName } from "../../../utils/utils";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { cx } from "../../../utils/cx";
 const INPUT_TYPE_ICONS_MAP = {
@@ -18,8 +18,7 @@ export class DsTextInput {
     inputElement;
     assistiveTextId;
     visuallyHiddenAssistiveTextId;
-    errorTextId;
-    successTextId;
+    validityId;
     hasPrefixSlot = false;
     hasSuffixSlot = false;
     el;
@@ -28,6 +27,18 @@ export class DsTextInput {
     dsClear;
     dsSubmitInvalid;
     dsValidity;
+    dsForm;
+    _dsStep = 1;
+    get dsStep() {
+        return this._dsStep;
+    }
+    set dsStep(value) {
+        if (value === undefined || value <= 0) {
+            this._dsStep = 1;
+            return;
+        }
+        this._dsStep = value;
+    }
     dsLabel;
     dsPlaceholder;
     dsId = inputIdGenerator.next().value;
@@ -64,8 +75,7 @@ export class DsTextInput {
     setIds = () => {
         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`;
+        this.validityId = `${this.dsId}-validity`;
     };
     getActionButtonAriaLabel() {
         switch (this.dsType) {
@@ -81,6 +91,14 @@ export class DsTextInput {
                 return this.dsActionButtonAriaLabel;
         }
     }
+    get validityText() {
+        return this.dsErrorText || this.dsSuccessText || '';
+    }
+    get validityType() {
+        if (this.dsSuccessText)
+            return 'success';
+        return 'error';
+    }
     async togglePasswordVisibility() {
         return (this.passwordInputVisible = !this.passwordInputVisible);
     }
@@ -208,7 +226,7 @@ export class DsTextInput {
         const DsButton = transformTagName('ds-button', 'ds-text-input', this.el);
         if (actionButtonIcon) {
             const ariaLabel = this.getActionButtonAriaLabel();
-            return (h("slot", { name: "suffix" }, h(DsButton, { ref: e => (this.suffixButtonElement = e), dsVariant: "supplementary", dsColour: "black", class: `${baseClass}__button`, dsDisabled: false, dsIcon: actionButtonIcon, dsIconTitle: ariaLabel, dsIconAriaLabel: ariaLabel, onClick: this.handleActionButtonClicked, "aria-pressed": ariaPressed, "aria-label": ariaLabel })));
+            return (h("slot", { name: "suffix" }, h(DsButton, { ref: e => (this.suffixButtonElement = e), dsVariant: "supplementary", dsColour: "black", class: `${baseClass}__button`, dsDisabled: false, dsIcon: actionButtonIcon, dsIconTitle: ariaLabel, dsIconAriaLabel: ariaLabel, onClick: this.handleActionButtonClicked, "aria-pressed": ariaPressed, ...ifDefined('aria-label', ariaLabel) })));
         }
         return null;
     }
@@ -223,23 +241,23 @@ export class DsTextInput {
         const DsControlLabel = transformTagName('ds-control-label', 'ds-text-input', this.el);
         const baseClass = cx('ds-text-input');
         const containerClass = `${baseClass}__container`;
-        const ariaLabel = this.dsAriaLabel || this.inheritedAttributes['aria-label'];
-        const ariaLabelledby = this.dsAriaLabelledby || this.inheritedAttributes['aria-labelledby'];
-        const ariaDescribedby = this.dsAriaDescribedby || this.inheritedAttributes['aria-describedby'];
-        return (h(Fragment, { key: '6a3d755b60a791d0976f5a982def0c98093af319' }, h(DsControlLabel, { key: 'e063922102b872679c9da275da45307521adff07', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText }, h("slot", { key: '94ef28165f02fa1ecc16aba18b356ac129aa8d1f', name: "label" }), h("slot", { key: '93dc1513628ac525eae07b800b293f95fca9b7e4', name: "assistiveText" })), h("div", { key: 'b415be3f91ea99d95d0d114ca17b855ce3241217', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames(containerClass, {
+        const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
+        const ariaLabel = attrAriaLabel || this.dsAriaLabel;
+        const ariaLabelledby = attrAriaLabelledby || this.dsAriaLabelledby;
+        const ariaDescribedby = attrAriaDescribedby || this.dsAriaDescribedby;
+        return (h(Fragment, { key: 'a69e75ed1ad7ea2ea84788b66f37f247746cc014' }, h(DsControlLabel, { key: 'd928fc3252037d53e7e9c271df3fe9de71a00217', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText }, h("slot", { key: '4910a62d29c592cbb1031eaf81f391c505fa1fc6', name: "label" }), h("slot", { key: '62ee439438d28bbf1958dab0fff704cad64e847e', name: "assistiveText" })), h("div", { key: '9f55136a4f58f09105061812c77969365e935476', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames(containerClass, {
                 [`${containerClass}--disabled`]: this.dsDisabled,
                 [`${containerClass}--readonly`]: this.dsReadonly,
                 [`${containerClass}--valid`]: !!this.dsSuccessText,
                 [`${containerClass}--invalid`]: !!this.dsErrorText,
                 [`${containerClass}--focus`]: this.hasFocus,
                 [`${containerClass}--active`]: !!this.inputActive,
-            }) }, this.renderPrefixContent(baseClass), h("input", { key: '844eceab04d5f361c2802ad4fca116edf204deb8', ref: e => (this.inputElement = e), id: this.dsId, name: this.dsName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby ||
+            }) }, this.renderPrefixContent(baseClass), h("input", { key: '9fc1a8f03b88637edf99515df105b7a096862a09', ref: e => (this.inputElement = e), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, required: this.dsRequired, readonly: this.dsReadonly, value: this.internalValue, type: inputType, min: this.dsMin, max: this.dsMax, maxlength: this.dsMaxLength, pattern: this.dsPattern, step: this.dsStep, placeholder: this.dsPlaceholder, autocomplete: this.dsAutocomplete, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby ||
                 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.internalValue, 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(baseClass)), h("slot", { key: 'a4aa5352b4d172ccd72897b09c13a4a609c8ce2c', name: "validity" }, h(DsInputValidity, { key: 'd8d5c7528127816c7cd3b7f4e1d3fd8228c77735', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }), h(DsInputValidity, { key: 'd858e57d18f6499895e2e80a1248d993f5be000b', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success" }))));
+                    [this.validityId]: !!this.dsErrorText || !!this.dsSuccessText,
+                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes }), this.renderSuffixContent(baseClass)), h("slot", { key: '429088ee0eab04c8fe69189e20a8f0058465a034', name: "validity" }, h(DsInputValidity, { key: 'e7d580d67afc7d8e75be7acf42a5a4e344454a02', id: this.validityId, dsText: this.validityText, dsType: this.validityType, dsAriaLive: "assertive" }))));
     }
     static get is() { return "ds-text-input"; }
     static get encapsulation() { return "scoped"; }
@@ -256,6 +274,45 @@ export class DsTextInput {
     }
     static get properties() {
         return {
+            "dsForm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `form` attribute of the `input` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-form"
+            },
+            "dsStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": true,
+                "reflect": true,
+                "attribute": "ds-step",
+                "defaultValue": "1"
+            },
             "dsLabel": {
                 "type": "string",
                 "mutable": false,
@@ -287,7 +344,7 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Passed to the `placeholder` of the `input` element."
+                    "text": "Passed to the `placeholder` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
@@ -303,10 +360,10 @@ export class DsTextInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Passed to the `id` of the `input` element."
+                    "text": "Passed to the `id` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
@@ -323,7 +380,7 @@ export class DsTextInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Passed to the `name` attribute of the `input` element."
@@ -734,7 +791,7 @@ export class DsTextInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Passed to the `aria-label` attribute of the `input` element.\n\n**@deprecated** Use 'aria-label' instead"
+                    "text": "Passed to the `aria-label` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
@@ -753,7 +810,7 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Passed to the `aria-labelledby` attribute of the `input` element.\n\n**@deprecated** Use 'aria-labelledby' instead"
+                    "text": "Passed to the `aria-labelledby` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
@@ -772,7 +829,7 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Passed to the `aria-describedby` attribute of the `input` element.\n\n**@deprecated** Use 'aria-describedby' instead"
+                    "text": "Passed to the `aria-describedby` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.examples.stories.js

@@ -149,3 +149,20 @@ export const SearchClearButtonReactivity = {
         });
     },
 };
+export const AriaLabelledby = {
+    render: () => html `
+    <ds-control-label>
+      <label slot="label" for="aria-labelledby-input" id="label">Label</label>
+    </ds-control-label>
+    <ds-text-input ds-id="aria-labelledby-input" aria-labelledby="label"></ds-text-input>
+  `,
+};
+export const AriaDescribedby = {
+    render: () => html `
+    <ds-control-label>
+      <label slot="label" for="aria-describedby-input" id="label">Label</label>
+      <div slot="assistiveText" id="desc">Description</div>
+    </ds-control-label>
+    <ds-text-input ds-id="aria-describedby-input" aria-labelledby="label" aria-describedby="desc"></ds-text-input>
+  `,
+};

package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.stories.js

@@ -24,16 +24,17 @@ export const Playground = {
     args: {
         dsLabel: 'Label',
         dsPlaceholder: '',
-        dsIdentifier: 'input',
-        dsName: '',
+        dsId: 'playground-id',
+        dsName: 'playground-name',
         dsDisabled: false,
         dsRequired: false,
         dsOptional: false,
         dsOptionalText: '',
         dsReadonly: false,
         dsValue: '',
-        dsMin: -1,
-        dsMax: -1,
+        dsMin: 0,
+        dsMax: 5,
+        dsStep: 1,
         dsMaxlength: -1,
         dsAssistiveText: '',
         dsPrefixText: '',
@@ -42,7 +43,7 @@ export const Playground = {
         dsSuccessText: '',
         dsIcon: '',
         dsType: 'text',
-        dsAutocomplete: '',
+        dsAutocomplete: 'off',
         dsAriaLabel: '',
         dsAriaLabelledby: '',
         dsAriaDescribedby: '',

package/dist/collection/components/01-base-components/ds-versioned-css-variables/ds-versioned-css-variables.css

@@ -217,15 +217,15 @@
   --ds-fontWeight-semibold: 600;
   --ds-fontWeight-semiboldPlus: 650;
   --ds-fontWeight-bold: 700;
-  --ds-letterSpacing-xTight: -2px;
-  --ds-letterSpacing-tight: -1.4px;
-  --ds-letterSpacing-normal: -0.4px;
-  --ds-letterSpacing-wide: 0px;
-  --ds-letterSpacing-xWide: 0.4px;
-  --ds-lineHeight-small: 1;
-  --ds-lineHeight-medium: 1.2;
-  --ds-lineHeight-large: 1.5;
-  --ds-lineHeight-xLarge: 1.75;
+  --ds-letterSpacing-xTight: var(--ds-letterSpacing, -2px);
+  --ds-letterSpacing-tight: var(--ds-letterSpacing, -1.4px);
+  --ds-letterSpacing-normal: var(--ds-letterSpacing, -0.4px);
+  --ds-letterSpacing-wide: var(--ds-letterSpacing, 0px);
+  --ds-letterSpacing-xWide: var(--ds-letterSpacing, 0.4px);
+  --ds-lineHeight-small: var(--ds-lineHeight, 1);
+  --ds-lineHeight-medium: var(--ds-lineHeight, 1.2);
+  --ds-lineHeight-large: var(--ds-lineHeight, 1.5);
+  --ds-lineHeight-xLarge: var(--ds-lineHeight, 1.75);
   --ds-fontWidth-normal: 100%;
   --ds-fontWidth-condense: 90%;
   --ds-number-style: proportional-figures; /* Varying spacing */
@@ -448,15 +448,15 @@
   --ds-fontWeight-semibold: 600;
   --ds-fontWeight-semiboldPlus: 650;
   --ds-fontWeight-bold: 700;
-  --ds-letterSpacing-xTight: -2px;
-  --ds-letterSpacing-tight: -1.4px;
-  --ds-letterSpacing-normal: -0.4px;
-  --ds-letterSpacing-wide: 0px;
-  --ds-letterSpacing-xWide: 0.4px;
-  --ds-lineHeight-small: 1;
-  --ds-lineHeight-medium: 1.2;
-  --ds-lineHeight-large: 1.5;
-  --ds-lineHeight-xLarge: 1.75;
+  --ds-letterSpacing-xTight: var(--ds-letterSpacing, -2px);
+  --ds-letterSpacing-tight: var(--ds-letterSpacing, -1.4px);
+  --ds-letterSpacing-normal: var(--ds-letterSpacing, -0.4px);
+  --ds-letterSpacing-wide: var(--ds-letterSpacing, 0px);
+  --ds-letterSpacing-xWide: var(--ds-letterSpacing, 0.4px);
+  --ds-lineHeight-small: var(--ds-lineHeight, 1);
+  --ds-lineHeight-medium: var(--ds-lineHeight, 1.2);
+  --ds-lineHeight-large: var(--ds-lineHeight, 1.5);
+  --ds-lineHeight-xLarge: var(--ds-lineHeight, 1.75);
   --ds-fontWidth-normal: 100%;
   --ds-fontWidth-condense: 90%;
   --ds-number-style: proportional-figures; /* Varying spacing */

package/dist/collection/components/01-base-components/ds-versioned-css-variables/ds-versioned-css-variables.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class DsVersionedCssVariables {
     render() {
-        return (h(Host, { key: 'e3ac40b5b116f7c791c17e073d6efcca24342b65' }, h("slot", { key: '4694dc2dc3e751a020a91bb47e2bfeb618237f5e' })));
+        return (h(Host, { key: 'e4022f4f54eb02a2f8ab3e4febf75648941dae52' }, h("slot", { key: '463c54425f7be25485b96beb7552471fb6391551' })));
     }
     static get is() { return "ds-versioned-css-variables"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.css

@@ -2,7 +2,7 @@
   position: absolute;
 }
 
-.ds-visually-hidden__kJ67Jk {
+.ds-visually-hidden__7h4nsx {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;

package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js

@@ -4,7 +4,7 @@ export class DsVisuallyHidden {
     dsTag = 'div';
     render() {
         const baseClass = cx('ds-visually-hidden');
-        return (h(this.dsTag, { key: '972e8fda87f33f52c2ca7f24ea17ee74bb23ef9a', class: baseClass }, h("slot", { key: '291de9d13a6ca6cfdce347d978a7f00b06020a87' })));
+        return (h(this.dsTag, { key: '38d44c2a4e367d507731a57690d25f9f79a4c118', class: baseClass }, h("slot", { key: '012856ec1ac21a6c3ed2764d5dc3da3a8676c97d' })));
     }
     static get is() { return "ds-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/generated-icons/ds-icon-360/ds-icon-360.js

@@ -6,7 +6,7 @@ export class DsIcon360 {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '3b873f5e085be909288a97fb45af626a8d6371ad', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '7f6bbe0ccf196e190311173050f728fe2a6150a0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'a509dcbfc692edde2cbb5fec1778db38d750a637', d: "m353-148-50-51 70-70q-150-17-234-72T55-486q0-100 123-158t302-58q179 0 302.5 57.5T906-486q0 75-71 127.5T646-287v-98q80-16 122.5-46t42.5-55q0-34-77.5-77.5T480-607q-175 0-253 43.5T149-486q0 45 48.5 73T388-358l-85-83 50-52 173 172-173 173Z" }))));
+        return (h(Host, { key: 'd352afa3a0c33556787bceb9a405b80a14e3f363', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '192fcd37d36abaaba5652b8733462c66f3c4c4f4', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '02259331b5f6093b041d0086d8151c8b8850a202', d: "m353-148-50-51 70-70q-150-17-234-72T55-486q0-100 123-158t302-58q179 0 302.5 57.5T906-486q0 75-71 127.5T646-287v-98q80-16 122.5-46t42.5-55q0-34-77.5-77.5T480-607q-175 0-253 43.5T149-486q0 45 48.5 73T388-358l-85-83 50-52 173 172-173 173Z" }))));
     }
     static get is() { return "ds-icon-360"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-account-balance/ds-icon-account-balance.js

@@ -6,7 +6,7 @@ export class DsIconAccountBalance {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '0744daba3eaa668c09a762bd0b68fd6a8e8a9be2', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '80b5ece10b90ab4bf13f24a62c9740f53eec681b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '079b7a88fb7047d4d4bb7ffc67055f6292db7703', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Zm198-95h454-454Zm0 0h454L480-836 253-704Z" }))));
+        return (h(Host, { key: '005a11b61d4a04418e5be032b4219702d5e1d6b4', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '3e08278810fbc733f11147a3803cbce4cdf865f5', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'd8413b37471e70bb208adbedd52cdcbcd0e45ce6', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Zm198-95h454-454Zm0 0h454L480-836 253-704Z" }))));
     }
     static get is() { return "ds-icon-account-balance"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-account-balance-fill/ds-icon-account-balance-fill.js

@@ -6,7 +6,7 @@ export class DsIconAccountBalanceFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'fdacd4321d1777b7266bd06a785de815a823d58f', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '31fff9fa941fdd6944658a1b6db3c5b1833a6fc8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'ea91bf5753ca0892d7b41c26157f007b40a4651f', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
+        return (h(Host, { key: '2b358a07e44d51ae85f53db79f6faf957314c6c5', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'fe4195f89a4e5bbcb830399dd44f97e4dd017ab8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'e937b19b15fd63a5bae83bdeec4433a32725a420', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
     }
     static get is() { return "ds-icon-account-balance-fill"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-account-circle/ds-icon-account-circle.js

@@ -6,7 +6,7 @@ export class DsIconAccountCircle {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '64f880f5d4ebf85fc4fa06d95067c26b712853f6', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '0ff9b7d046c7e5049c59a5c9f1bb291d19011516', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '605edf7dac853c8f5f508df53268b3502355a261', d: "M226-266q62-42 123-64.5T480.43-353q70.44 0 132.42 23.27Q674.84-306.46 735-266q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm.07 388Q393-55 315.61-88.29q-77.39-33.29-135.69-91.58-58.31-58.28-91.62-135.49Q55-392.57 55-480.35 55-567 88.5-644.5T180-780q58-58 135.26-92 77.25-34 165.09-34 86.65 0 164.15 34T780-780q58 58 92 135.62 34 77.61 34 164.5 0 86.88-34 164.38T780-180q-58 58-135.62 91.5Q566.77-55 479.88-55Zm.12-94q52 0 99.5-14t98.5-51q-52-35-99-51.5T480-282q-52 0-98.5 16.5T283-214q51 37 98 51t99 14Zm0-366q30.87 0 50.93-19.5Q551-554 551-585.5T530.93-637q-20.06-20-50.93-20t-50.93 20Q409-617 409-585.5t20.07 51Q449.13-515 480-515Zm0-71Zm1 371Z" }))));
+        return (h(Host, { key: '5e61fb5d99a7d3d206edbe708774f8920dfe7898', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '3072085dabb9d877073b26bc0fd89938d7711fb2', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'c06528a0c0e0f74065d63c06a8aba6b85c340b06', d: "M226-266q62-42 123-64.5T480.43-353q70.44 0 132.42 23.27Q674.84-306.46 735-266q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm.07 388Q393-55 315.61-88.29q-77.39-33.29-135.69-91.58-58.31-58.28-91.62-135.49Q55-392.57 55-480.35 55-567 88.5-644.5T180-780q58-58 135.26-92 77.25-34 165.09-34 86.65 0 164.15 34T780-780q58 58 92 135.62 34 77.61 34 164.5 0 86.88-34 164.38T780-180q-58 58-135.62 91.5Q566.77-55 479.88-55Zm.12-94q52 0 99.5-14t98.5-51q-52-35-99-51.5T480-282q-52 0-98.5 16.5T283-214q51 37 98 51t99 14Zm0-366q30.87 0 50.93-19.5Q551-554 551-585.5T530.93-637q-20.06-20-50.93-20t-50.93 20Q409-617 409-585.5t20.07 51Q449.13-515 480-515Zm0-71Zm1 371Z" }))));
     }
     static get is() { return "ds-icon-account-circle"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-account-circle-fill/ds-icon-account-circle-fill.js

@@ -6,7 +6,7 @@ export class DsIconAccountCircleFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '9aa45a0deba02daf271cdeda25ed559db5cd45c7', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '0d7a376f037f71901143233dd498ee3cdbc2c2f6', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '2428d1cf93cd8da9b7394baa2771fc85bef7f337', d: "M226-266q62-39 122.5-58T480-343q71 0 133 20t122 57q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm-.21 388q-87.15 0-164.9-33.28-77.75-33.29-135.82-91.56-58.07-58.27-90.98-135.44Q55-392.46 55-480.39t33.5-165.27Q122-723 180-780.5T315.25-872q77.24-34 165.25-34t165.25 34Q723-838 780.5-780.5T872-645.59q34 77.4 34 165.32 0 87.93-34 165.1Q838-238 780.5-180 723-122 645.46-88.5 567.93-55 479.6-55Z" }))));
+        return (h(Host, { key: 'e0c9ae68a23c533f76ae2500eac29eadf5828c23', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'eeccbdfa3e937018cf68e4fc4e960660d683d10d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'adee1fa16445f2cb3072ae32890ca2a23788db4e', d: "M226-266q62-39 122.5-58T480-343q71 0 133 20t122 57q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm-.21 388q-87.15 0-164.9-33.28-77.75-33.29-135.82-91.56-58.07-58.27-90.98-135.44Q55-392.46 55-480.39t33.5-165.27Q122-723 180-780.5T315.25-872q77.24-34 165.25-34t165.25 34Q723-838 780.5-780.5T872-645.59q34 77.4 34 165.32 0 87.93-34 165.1Q838-238 780.5-180 723-122 645.46-88.5 567.93-55 479.6-55Z" }))));
     }
     static get is() { return "ds-icon-account-circle-fill"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-add/ds-icon-add.js

@@ -6,7 +6,7 @@ export class DsIconAdd {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'c5061c70e1dca192ccc5fd316e79f76d5653034f', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'afeaa80fe758bec72c7c407ff62097bf9e92466e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'bd8261fcdab25a691f44dbd6988fa5eb9243b05f', d: "M433-433H175v-94h258v-259h94v259h259v94H527v258h-94v-258Z" }))));
+        return (h(Host, { key: '110fdc9295a02c161803c73359977c974d91f2ee', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '608f500b0053be51dd3a857e0fe08c46eeb7db1c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '06af2d28a2483d8e8231544779afd69776c10634', d: "M433-433H175v-94h258v-259h94v259h259v94H527v258h-94v-258Z" }))));
     }
     static get is() { return "ds-icon-add"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-archive/ds-icon-archive.js

@@ -6,7 +6,7 @@ export class DsIconArchive {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '77b4fb9a278b128620a11604a2540e352d31e738', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b9ee40a84ea40617ff71981fd12d0a91460d61ef', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '675986c92dd1d6778c22870040ef6ff4338af54f', d: "m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM189-639v450h582v-450H189ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Zm257 312Z" }))));
+        return (h(Host, { key: 'c45a41823f0796f888b00b8057c0721a94c8a529', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '26b5d64ed499b8cea1314b30f8dbf4b931394035', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '01791499bacd27162fb182bb89cb3c27bdaf5f18', d: "m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM189-639v450h582v-450H189ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Zm257 312Z" }))));
     }
     static get is() { return "ds-icon-archive"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-archive-fill/ds-icon-archive-fill.js

@@ -6,7 +6,7 @@ export class DsIconArchiveFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '8356e03fe6dca5cd496d8076f942dd787cb6ca9b', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'bfa9fd852e922d1896808672a6c66aae142793d3', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'd81318bb7612fa604da9e1f66c1a5d0a253b1ca4', d: "m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Z" }))));
+        return (h(Host, { key: '2b411a62032b98e41db3efe0c2acec5f2f757c3f', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '59595d0f970a7b548db9693236c34190250215fd', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'afee37036d62d2eb30a4f7ff86702c24a5fe63f3', d: "m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Z" }))));
     }
     static get is() { return "ds-icon-archive-fill"; }
     static get properties() {