@uh-design-system/component-library 1.4.0 → 1.5.0-rc.0

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

@@ -1,18 +1,18 @@
 import { Fragment, h, forceUpdate } from "@stencil/core";
 import classNames from "classnames";
 import { characterOverage, charactersRemaining, getOptionalText, getRequiredText, tooLong, validityMessage, } from "../../../utils/controls/controlUtils";
-import { debounce, declareComponentDependencies, idGenerator, ifDefined, transformTagName } from "../../../utils/utils";
+import { debounce, declareComponentDependencies, ifDefined, transformTagName } from "../../../utils/utils";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { cx } from "../../../utils/cx";
 import { FEEDBACK_SET_TIMEOUT } from "../../../constants";
-const textareaIdGenerator = idGenerator('ds-text-area');
-export class DsTextArea {
+import { Mixin } from "@stencil/core";
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+export class DsTextArea extends Mixin(componentFactory('ds-text-area')) {
+    constructor() {
+        super();
+    }
     inheritedAttributes = {};
     textareaElement;
-    assistiveTextId;
-    visuallyHiddenAssistiveTextId;
-    errorTextId;
-    successTextId;
     el;
     dsChange;
     dsInput;
@@ -21,7 +21,7 @@ export class DsTextArea {
     dsForm;
     dsLabel;
     dsPlaceholder;
-    dsId = textareaIdGenerator.next().value;
+    dsId = this.getUniqueId();
     dsName = this.dsId;
     dsDisabled;
     dsOptional;
@@ -45,12 +45,18 @@ export class DsTextArea {
     characterCount = 0;
     internalValue = '';
     hiddenCharacterCountText = '';
-    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`;
-    };
+    get assistiveTextId() {
+        return `${this.dsId}-assistive-text`;
+    }
+    get visuallyHiddenAssistiveTextId() {
+        return `${this.dsId}-visually-hidden-assistive-text`;
+    }
+    get errorTextId() {
+        return `${this.dsId}-error-text`;
+    }
+    get successTextId() {
+        return `${this.dsId}-success-text`;
+    }
     async setFocus() {
         const textarea = this.el.querySelector('textarea');
         textarea?.focus();
@@ -89,13 +95,13 @@ export class DsTextArea {
             ...inheritAttributes(this, this.el, ['id']),
             ...inheritAriaAttributes(this.el, ['aria-invalid']),
         };
-        this.setIds();
         this.internalValue = this.dsValue || '';
         if (this.dsCharacterLimit) {
             this.validateCharacterCount(this.characterCount);
         }
     }
     componentDidLoad() {
+        this.componentMounted();
         this.adjustTextareaHeight();
     }
     disconnectedCallback() {
@@ -201,7 +207,7 @@ export class DsTextArea {
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
         const ariaDescribedby = this.dsAriaDescribedby || attrAriaDescribedby;
-        return (h(Fragment, { key: 'b552302f5db01214407d5f62545b2ef07a9dfb44' }, h(DsControlLabel, { key: '37035555f649c105ec460e6399752efaf1236f51', dsHtmlFor: this.dsId, dsLabel: this.getLabelText(), dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId }, h("slot", { key: 'a68186dfa927d07149c2d63138077da1cc08db74', name: "label" }), h("slot", { key: 'd40242957ab517309673badf3740068d22db6705', name: "assistiveText" })), h("div", { key: '5edc680c64cdcdecb3d5e6f4cad5e96858ed3644', onMouseDown: () => (this.textareaActive = true), onMouseUp: () => (this.textareaActive = false), onClick: () => this.handleTextareaContainerClick(), class: classNames(containerClass, {
+        return (h(Fragment, { key: 'e591094b6775f22391f60ddf12c6205e3c76149d' }, h(DsControlLabel, { key: 'f5199602d1981896a54d8f29e916c39f286a29f7', dsHtmlFor: this.dsId, dsLabel: this.getLabelText(), dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId }, h("slot", { key: '270ac42a2309dce6fe8cd8dbbe1350a5e50d9f56', name: "label" }), h("slot", { key: '25f5f6cedda6f3e2568822769ba05cefde0d9253', name: "assistiveText" })), h("div", { key: '91a7f0cbe65d434890c7c9d20c585b0d7dbe551f', onMouseDown: () => (this.textareaActive = true), onMouseUp: () => (this.textareaActive = false), onClick: () => this.handleTextareaContainerClick(), class: classNames(containerClass, {
                 [`${containerClass}--disabled`]: this.dsDisabled,
                 [`${containerClass}--readonly`]: this.dsReadonly,
                 [`${containerClass}--valid`]: !!this.dsSuccessText,
@@ -209,7 +215,7 @@ export class DsTextArea {
                 [`${containerClass}--focus`]: this.hasFocus,
                 [`${containerClass}--active`]: !!this.textareaActive,
                 [`${containerClass}--full-width`]: this.dsFullWidth,
-            }) }, h("textarea", { key: '22b3486c977abffe10ffefa1a61bf0f8a8b6e73a', ref: e => (this.textareaElement = e), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, value: this.dsValue !== undefined ? this.dsValue : this.internalValue, placeholder: this.dsPlaceholder, readonly: this.dsReadonly, required: this.dsRequired, class: classNames(`${baseClass}__textarea`, `${baseClass}__textarea--resize-${this.dsResizing}`, {
+            }) }, h("textarea", { key: '7e7b129e4cb8e7b5bdb69776ca5c353c5339fa58', ref: el => (this.textareaElement = el), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, value: this.dsValue !== undefined ? this.dsValue : this.internalValue, placeholder: this.dsPlaceholder, readonly: this.dsReadonly, required: this.dsRequired, class: classNames(`${baseClass}__textarea`, `${baseClass}__textarea--resize-${this.dsResizing}`, {
                 [`${baseClass}__textarea--full-width`]: this.dsFullWidth,
             }), 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({
@@ -217,11 +223,11 @@ export class DsTextArea {
                     [this.visuallyHiddenAssistiveTextId]: !!this.dsHiddenAssistiveText,
                     [this.errorTextId]: !!this.dsErrorText,
                     [this.successTextId]: !!this.dsSuccessText,
-                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes })), h("div", { key: '27a9a1949248fdb652873a7d4543a52e39fc9883', class: classNames(`${baseClass}__validity-container`, {
+                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes })), h("div", { key: 'a7359297033e98437ca5e9595e933052ceda6403', class: classNames(`${baseClass}__validity-container`, {
                 [`${baseClass}__validity-container--has-character-limit`]: !!this.dsCharacterLimit,
-            }) }, h("slot", { key: 'f42131cd8a54a22509a2405d1c4e869ea890f078', name: "validity" }, h(DsInputValidity, { key: 'a12c66a7adba1e442e6235e7dfca42ea9a337993', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }, this.dsCharacterLimit && h(DsVisuallyHidden, { key: '2a299e7728a2aec5dc0e05f4e5c66e82cadf665d', dsTag: "span" }, this.hiddenCharacterCountText)), h(DsInputValidity, { key: 'd1967ab5e857ba8a509a903c2388bb90efc56fd2', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsAriaLive: "polite" })), this.dsCharacterLimit && (h("div", { key: 'fabe8053142c23a5339eed424c57124f3d84f461', class: classNames(`${baseClass}__character-count`, {
+            }) }, h("slot", { key: '822b85ca8bc02e48181d2dd4bbf1ac254e0ac9ef', name: "validity" }, h(DsInputValidity, { key: '80a7b31ae4e5178a93ac3ab07b9b9ecff98b8bbf', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }, this.dsCharacterLimit && h(DsVisuallyHidden, { key: '4ddd88740cc9a6e11d7eeacd6298bf5984792c7f', dsTag: "span" }, this.hiddenCharacterCountText)), h(DsInputValidity, { key: '3918a844e278289d8de831e38948af93a3153bcb', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsAriaLive: "polite" })), this.dsCharacterLimit && (h("div", { key: '29f1beb8414bd40d47333806038d6e4ce050f8e2', class: classNames(`${baseClass}__character-count`, {
                 [`${baseClass}__character-count--over-limit`]: this.characterCount > this.dsCharacterLimit,
-            }) }, h("small", { key: 'dab4e062c8817987f05dfd7e40875cfc845490fa' }, this.characterCount, "/", this.dsCharacterLimit))))));
+            }) }, h("small", { key: '7119a45fb774e72e4fd40c7e36273c4407db40bc' }, this.characterCount, "/", this.dsCharacterLimit))))));
     }
     static get is() { return "ds-text-area"; }
     static get encapsulation() { return "scoped"; }
@@ -304,7 +310,7 @@ export class DsTextArea {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Passed to the `id` of the `textarea` element."
@@ -313,7 +319,7 @@ export class DsTextArea {
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-id",
-                "defaultValue": "textareaIdGenerator.next().value as string"
+                "defaultValue": "this.getUniqueId()"
             },
             "dsName": {
                 "type": "string",

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

@@ -13,8 +13,11 @@
     width: 320px;
   }
 }
+:host:has(.ds-text-input__QIDqOT--full-width) {
+  width: 100%;
+}
 
-.ds-text-input__SPFJ1E {
+.ds-text-input__QIDqOT {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -22,10 +25,10 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-text-input__SPFJ1E__label-container {
+.ds-text-input__QIDqOT__label-container {
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__SPFJ1E__label-container label {
+.ds-text-input__QIDqOT__label-container label {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
@@ -33,7 +36,7 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-default);
 }
-.ds-text-input__SPFJ1E__label-container small {
+.ds-text-input__QIDqOT__label-container small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);
@@ -43,17 +46,17 @@
   margin-block-start: var(--ds-spacing-3xSmall);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-input__SPFJ1E__container:focus-visible {
+.ds-text-input__QIDqOT__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__SPFJ1E__container:focus-within {
+.ds-text-input__QIDqOT__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__SPFJ1E__container {
+.ds-text-input__QIDqOT__container {
   box-sizing: border-box;
   width: 100%;
   display: inline-flex;
@@ -65,65 +68,65 @@
   border-color: var(--ds-borderColor-default);
   padding-inline: var(--ds-spacing-xSmall);
 }
-.ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--invalid {
+.ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--invalid:hover:not(.ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--invalid:focus-within) {
+.ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--invalid:hover:not(.ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--invalid.ds-text-input__SPFJ1E__container--active {
+.ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--invalid.ds-text-input__QIDqOT__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--valid {
+.ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--valid:hover:not(.ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--valid:focus-within) {
+.ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--valid:hover:not(.ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--valid .ds-text-input__SPFJ1E__container--active {
+.ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--valid .ds-text-input__QIDqOT__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--readonly, .ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--disabled {
+.ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--readonly, .ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-input__SPFJ1E__container:has(span.ds-text-input__SPFJ1E__prefix, .ds-text-input__SPFJ1E__icon) {
+.ds-text-input__QIDqOT__container:has(span.ds-text-input__QIDqOT__prefix, .ds-text-input__QIDqOT__icon) {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__SPFJ1E__container:has(.ds-text-input__SPFJ1E__button) {
+.ds-text-input__QIDqOT__container:has(.ds-text-input__QIDqOT__button) {
   padding-inline-end: unset;
 }
-.ds-text-input__SPFJ1E__container:has(input:active):not:has(input:disabled, input:read-only) {
+.ds-text-input__QIDqOT__container:has(input:active):not:has(input:disabled, input:read-only) {
   border-color: var(--ds-borderColor-default);
 }
-.ds-text-input__SPFJ1E__container:has(input:active) {
+.ds-text-input__QIDqOT__container:has(input:active) {
   outline: none;
 }
-.ds-text-input__SPFJ1E__container.active:not(.ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--disabled, .ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--readonly, .ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--invalid, .ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--valid) {
+.ds-text-input__QIDqOT__container.active:not(.ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--disabled, .ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--readonly, .ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--invalid, .ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-input__SPFJ1E__container:hover:not(.ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--disabled, .ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--readonly, .ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--active, .ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--invalid, .ds-text-input__SPFJ1E__container.ds-text-input__SPFJ1E__container--valid, .ds-text-input__SPFJ1E__container:focus-within) {
+.ds-text-input__QIDqOT__container:hover:not(.ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--disabled, .ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--readonly, .ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--active, .ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--invalid, .ds-text-input__QIDqOT__container.ds-text-input__QIDqOT__container--valid, .ds-text-input__QIDqOT__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-input__SPFJ1E__container:focus-within:not(.ds-text-input__SPFJ1E__container:focus-within.ds-text-input__SPFJ1E__container--invalid, .ds-text-input__SPFJ1E__container:focus-within.ds-text-input__SPFJ1E__container--valid, .ds-text-input__SPFJ1E__container:focus-within.ds-text-input__SPFJ1E__container--readonly) {
+.ds-text-input__QIDqOT__container:focus-within:not(.ds-text-input__QIDqOT__container:focus-within.ds-text-input__QIDqOT__container--invalid, .ds-text-input__QIDqOT__container:focus-within.ds-text-input__QIDqOT__container--valid, .ds-text-input__QIDqOT__container:focus-within.ds-text-input__QIDqOT__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-input__SPFJ1E__container:focus-within * > .ds-text-input__SPFJ1E__button > button:focus-visible {
+.ds-text-input__QIDqOT__container:focus-within * > .ds-text-input__QIDqOT__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__SPFJ1E__container > input {
+.ds-text-input__QIDqOT__container > input {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -140,7 +143,7 @@
   padding-block: var(--ds-spacing-4xSmall);
   padding-inline: 0;
 }
-.ds-text-input__SPFJ1E__container > input::placeholder {
+.ds-text-input__QIDqOT__container > input::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -148,35 +151,35 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-input__SPFJ1E__container > input:disabled {
+.ds-text-input__QIDqOT__container > input:disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-input__SPFJ1E__container > input:disabled::placeholder {
+.ds-text-input__QIDqOT__container > input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-input__SPFJ1E__container > input:focus {
+.ds-text-input__QIDqOT__container > input:focus {
   outline: none;
   border: none;
 }
-.ds-text-input__SPFJ1E__container > input[type=number] {
+.ds-text-input__QIDqOT__container > input[type=number] {
   appearance: textfield;
 }
-.ds-text-input__SPFJ1E__container > input::-webkit-search-decoration, .ds-text-input__SPFJ1E__container > input::-webkit-search-cancel-button, .ds-text-input__SPFJ1E__container > input::-webkit-search-results-button, .ds-text-input__SPFJ1E__container > input::-webkit-search-results-decoration, .ds-text-input__SPFJ1E__container > input::-webkit-inner-spin-button, .ds-text-input__SPFJ1E__container > input::-webkit-outer-spin-button {
+.ds-text-input__QIDqOT__container > input::-webkit-search-decoration, .ds-text-input__QIDqOT__container > input::-webkit-search-cancel-button, .ds-text-input__QIDqOT__container > input::-webkit-search-results-button, .ds-text-input__QIDqOT__container > input::-webkit-search-results-decoration, .ds-text-input__QIDqOT__container > input::-webkit-inner-spin-button, .ds-text-input__QIDqOT__container > input::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
-.ds-text-input__SPFJ1E__container:has(span.ds-text-input__SPFJ1E__prefix, .ds-text-input__SPFJ1E__icon) > input {
+.ds-text-input__QIDqOT__container:has(span.ds-text-input__QIDqOT__prefix, .ds-text-input__QIDqOT__icon) > input {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__SPFJ1E__container span.ds-text-input__SPFJ1E__prefix, .ds-text-input__SPFJ1E__container span.ds-text-input__SPFJ1E__suffix {
+.ds-text-input__QIDqOT__container span.ds-text-input__QIDqOT__prefix, .ds-text-input__QIDqOT__container span.ds-text-input__QIDqOT__suffix {
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-link-standalone);
 }
-.ds-text-input__SPFJ1E__container .ds-text-input__SPFJ1E__icon, .ds-text-input__SPFJ1E__container ::slotted([slot=prefix]) {
+.ds-text-input__QIDqOT__container .ds-text-input__QIDqOT__icon, .ds-text-input__QIDqOT__container ::slotted([slot=prefix]) {
   height: 1.5rem;
   color: var(--ds-textColor-default);
 }
-.ds-text-input__SPFJ1E__container .ds-text-input__SPFJ1E__button {
+.ds-text-input__QIDqOT__container .ds-text-input__QIDqOT__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,10 +1,11 @@
 import { Fragment, h, Mixin, forceUpdate } from "@stencil/core";
 import classNames from "classnames";
 import { clearField, hidePassword, showPassword, validityMessage } from "../../../utils/controls/controlUtils";
-import { declareComponentDependencies, idGenerator, ifDefined, transformTagName } from "../../../utils/utils";
+import { declareComponentDependencies, ifDefined, transformTagName } from "../../../utils/utils";
 import { disableEventsFactory } from "../../00-foundations/factories/disableEventsFactory";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { cx } from "../../../utils/cx";
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
 const INPUT_TYPE_ICONS_MAP = {
     search: 'search',
 };
@@ -12,17 +13,13 @@ const INPUT_TYPE_ACTION_BUTTON_ICON_MAP = {
     search: ({ clearButtonVisible }) => (clearButtonVisible ? 'cancel_fill' : ''),
     password: ({ passwordInputVisible }) => (passwordInputVisible ? 'visibility_off_fill' : 'visibility_fill'),
 };
-const inputIdGenerator = idGenerator('ds-input');
-export class DsTextInput extends Mixin(disableEventsFactory) {
+export class DsTextInput extends Mixin(componentFactory('ds-text-input'), disableEventsFactory) {
     constructor() {
         super();
     }
     inheritedAttributes = {};
     suffixButtonElement;
     inputElement;
-    assistiveTextId;
-    visuallyHiddenAssistiveTextId;
-    validityId;
     hasPrefixSlot = false;
     hasSuffixSlot = false;
     el;
@@ -45,7 +42,7 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
     }
     dsLabel;
     dsPlaceholder;
-    dsId = inputIdGenerator.next().value;
+    dsId = this.getUniqueId();
     dsName = this.dsId;
     dsDisabled;
     dsOptional;
@@ -70,17 +67,23 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
     dsAriaLabel;
     dsAriaLabelledby;
     dsAriaDescribedby;
+    dsInvalid = false;
+    dsFullWidth = false;
     hasFocus = false;
     clearButtonVisible = false;
     passwordInputVisible = false;
     inputActive = false;
     wasInvalidOnBlur = false;
     internalValue = '';
-    setIds = () => {
-        this.assistiveTextId = `${this.dsId}-assistive-text`;
-        this.visuallyHiddenAssistiveTextId = `${this.dsId}-visually-hidden-assistive-text`;
-        this.validityId = `${this.dsId}-validity`;
-    };
+    get assistiveTextId() {
+        return `${this.dsId}-assistive-text`;
+    }
+    get visuallyHiddenAssistiveTextId() {
+        return `${this.dsId}-visually-hidden-assistive-text`;
+    }
+    get validityId() {
+        return `${this.dsId}-validity`;
+    }
     getActionButtonAriaLabel() {
         switch (this.dsType) {
             case 'search':
@@ -134,7 +137,6 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
             ...inheritAttributes(this, this.el, ['id']),
             ...inheritAriaAttributes(this.el, ['aria-invalid']),
         };
-        this.setIds();
         this.hasPrefixSlot = !!this.el.querySelector('[slot="prefix"]');
         this.hasSuffixSlot = !!this.el.querySelector('[slot="suffix"]');
         this.setDisableEventEmits(true);
@@ -142,6 +144,9 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
         this.setDisableEventEmits();
         this.clearButtonVisible = this.dsType === 'search' && !!this.internalValue;
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     onAriaChanged(newValue, _oldValue, propName) {
         this.inheritedAttributes = {
             ...this.inheritedAttributes,
@@ -237,7 +242,7 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
         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, dsAriaPressed: ariaPressed, ...ifDefined('dsAriaLabel', ariaLabel) })));
+            return (h("slot", { name: "suffix" }, h(DsButton, { ref: el => (this.suffixButtonElement = el), dsVariant: "supplementary", dsColour: "black", class: `${baseClass}__button`, dsDisabled: false, dsIcon: actionButtonIcon, dsIconTitle: ariaLabel, dsIconAriaLabel: ariaLabel, onClick: this.handleActionButtonClicked, dsAriaPressed: ariaPressed, ...ifDefined('dsAriaLabel', ariaLabel) })));
         }
         return null;
     }
@@ -256,19 +261,20 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
         const ariaDescribedby = this.dsAriaDescribedby || attrAriaDescribedby;
-        return (h(Fragment, { key: 'b5909f4e07fabad5576727aeb6fb53c36611825e' }, h(DsControlLabel, { key: '5e7d8621878e9fa59b2b6c281b84a7d0267b9538', 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: 'f229a02a180ce4dccedc4074c67802bc58553226', name: "label" }), h("slot", { key: '9af9d202f45e46979c8e7cb2cb1b5be5510b45c1', name: "assistiveText" })), h("div", { key: '8512cd070e27542a8aba3c5091c815de7e4165e2', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames(containerClass, {
+        return (h(Fragment, { key: '2eb773854726b60fcb3b0f9a9a06daee18b35d32' }, h(DsControlLabel, { key: '0cdf049b12816129875a7627f3da99219e7f5414', 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: 'a24c6329f07ac0635040c5feab817668c4846faa', name: "label" }), h("slot", { key: '0e5d404eb9bea67b304cbc86e2d6a38de5f2df38', name: "assistiveText" })), h("div", { key: 'c4809794f735743d0ad6e67bfa741d64880e1e6d', 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}--invalid`]: this.dsInvalid || !!this.dsErrorText,
                 [`${containerClass}--focus`]: this.hasFocus,
                 [`${containerClass}--active`]: !!this.inputActive,
-            }) }, this.renderPrefixContent(baseClass), h("input", { key: 'edd83a08f59fee3004b097214d10038803015beb', 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 ||
+                [`${baseClass}--full-width`]: this.dsFullWidth,
+            }) }, this.renderPrefixContent(baseClass), h("input", { key: '450c58f177064bd5bb82d7eafb96087cc2f11b70', ref: el => (this.inputElement = el), 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.validityId]: !!this.dsErrorText || !!this.dsSuccessText,
-                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes }), this.renderSuffixContent(baseClass)), h("slot", { key: 'c8ace1da007e859d7c5862c26e6b58eb6972f480', name: "validity" }, h(DsInputValidity, { key: 'db35fe97d51a15f65b30844cd7a3e3b6642aa7f9', id: this.validityId, dsText: this.validityText, dsType: this.validityType }))));
+                })), "aria-invalid": this.dsInvalid || this.dsErrorText ? 'true' : 'false', ...restAttributes }), this.renderSuffixContent(baseClass)), h("slot", { key: '0e3c10f303d035322338304d1b5a4e87f5edbc2d', name: "validity" }, h(DsInputValidity, { key: '2005469a89a45ed64d4274ec042a274f62123026', id: this.validityId, dsText: this.validityText, dsType: this.validityType }))));
     }
     static get is() { return "ds-text-input"; }
     static get encapsulation() { return "scoped"; }
@@ -380,7 +386,7 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-id",
-                "defaultValue": "inputIdGenerator.next().value as string"
+                "defaultValue": "this.getUniqueId()"
             },
             "dsName": {
                 "type": "string",
@@ -800,7 +806,7 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Passed to the `aria-label` attribute of the `input` element."
@@ -847,6 +853,46 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-aria-describedby"
+            },
+            "dsInvalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows the input in an invalid state (red border, aria-invalid) without requiring dsErrorText. Useful when parent component renders its own error message."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-invalid",
+                "defaultValue": "false"
+            },
+            "dsFullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the text input takes the full width of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-full-width",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -124,6 +124,12 @@ export const SearchInput = {
         });
     },
 };
+export const FullWidth = {
+    args: {
+        dsLabel: 'Full width text input',
+        dsFullWidth: true,
+    },
+};
 export const PrefixText = {
     args: {
         dsLabel: 'Phone number',

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

@@ -1,7 +1,14 @@
-import { Host, h } from "@stencil/core";
-export class DsVersionedCssVariables {
+import { Host, Mixin, h } from "@stencil/core";
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+export class DsVersionedCssVariables extends Mixin(componentFactory('ds-versioned-css-variables')) {
+    constructor() {
+        super();
+    }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     render() {
-        return (h(Host, { key: '6983cb42d1710ba811fe1404915fc2922fef3fba' }, h("slot", { key: '5beca15db06f1dfd772474f134694bd0a71809da' })));
+        return (h(Host, { key: 'ef3cd2a4438ea0dc63be82f78420888b84009085' }, h("slot", { key: '7bcb80476873517e955e73f7a7d9cf1a72e3086a' })));
     }
     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__SPFJ1E {
+.ds-visually-hidden__QIDqOT {
   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: '04870ad841b0dc3f844e45b1aab9d484e991ab95', class: baseClass }, h("slot", { key: 'ce890aff981db228f62d99cae8321326c962f84c' })));
+        return (h(this.dsTag, { key: 'fd41ae341098a35db3c4f30c1ae2720937a82a56', class: baseClass }, h("slot", { key: '43f6e10af6b55cfe08ab0e14482128ad0af50e50' })));
     }
     static get is() { return "ds-visually-hidden"; }
     static get encapsulation() { return "scoped"; }

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: 'f59fe07693629e4ef3542c7a3e0742f7738a0155', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '739400c5a924447230bce8b24e0fa5a12b1ecb4a', 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: '9febcc23c9b7690d2e6cfce143951e5e03f1f69d', 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: 'ada05b6285e6340ca57e1318ae16507d92678242', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '37f652f58b2fdc1da94708b5cddb7a9889775436', 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: 'cfa5a939cb17d624b73e8fc318c9427b56b1b7e3', 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: '0a8cf2e2984af1796ac653e73687aef30a78767b', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'bb3199844bdf7b5272bcab5fddc43ccd72a22627', 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: '61b415cd7fcfb188f5b0de5a7b855eebd016356b', 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: '0dc8a793c6dc41cc758fa12756c9c614a4eaf3f1', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '1854313d53c063e0bc63fe9c42df8a45b8f5dff3', 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: '8788deb072025a8fe036fe5b675582bfa887ff8c', 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: '89d069e7c6e8e7ca2750f5f4f70a5144d7f57de6', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '831a47147f869cb2fc683e291e5bcbb1374903b9', 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: '8bb0814e27382331378a107d5d21977e8f42c99b', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
+        return (h(Host, { key: '36add0d23cd2620658b1d7f197a7dd3492d25bee', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '7f283dc7b0ec714cc2df1d95d546b997fdaea901', 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: '436e574337ded8372e5beaf749e3ae616bef4a21', 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: '0fcc1588f640b72acfbc5163bc8d2f1288817a7f', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'f5ce951d142b8ccf34edc71ad02949f9f8827066', 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: '648820f9074529e1a41b58cd1867e7871d587102', 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: '7c5fd60129bb940df12da153e6ab8a5c34c43b28', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '818b59525186f90425873085c061a6bf6fcee25a', 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: '0edcb3d7bb34974cc82083b56bb287cc0cf55cd3', 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() {