@uh-design-system/component-library 1.6.0 → 1.7.0

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

@@ -4,15 +4,15 @@
   display: block;
 }
 
-:host(.ds-text-area__WN0Emr__host) {
+:host(.ds-text-area__pA2cRq__host) {
   display: inline-block;
 }
 
-:host(.ds-text-area__WN0Emr__host--full-width) {
+:host(.ds-text-area__pA2cRq__host--full-width) {
   width: 100%;
 }
 
-.ds-text-area__WN0Emr {
+.ds-text-area__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -20,26 +20,26 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-text-area__WN0Emr__field-wrapper {
+.ds-text-area__pA2cRq__field-wrapper {
   display: inline-grid;
   grid-template-columns: min-content;
 }
-.ds-text-area__WN0Emr__field-wrapper--full-width {
+.ds-text-area__pA2cRq__field-wrapper--full-width {
   display: grid;
   width: 100%;
   grid-template-columns: 1fr;
 }
-.ds-text-area__WN0Emr__container:focus-visible {
+.ds-text-area__pA2cRq__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-area__WN0Emr__container:focus-within {
+.ds-text-area__pA2cRq__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-area__WN0Emr__container {
+.ds-text-area__pA2cRq__container {
   box-sizing: border-box;
   display: inline-flex;
   position: relative;
@@ -49,76 +49,76 @@
   border-color: var(--ds-borderColor-default);
   padding: 0;
 }
-.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid {
+.ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid:hover:not(.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid:focus-within) {
+.ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--invalid:hover:not(.ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid.ds-text-area__WN0Emr__container--active {
+.ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--invalid.ds-text-area__pA2cRq__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__WN0Emr__container--valid {
+.ds-text-area__pA2cRq__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__WN0Emr__container--valid:hover:not(.ds-text-area__WN0Emr__container--valid:focus-within) {
+.ds-text-area__pA2cRq__container--valid:hover:not(.ds-text-area__pA2cRq__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__WN0Emr__container--valid.ds-text-area__WN0Emr__container--active {
+.ds-text-area__pA2cRq__container--valid.ds-text-area__pA2cRq__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__WN0Emr__container--readonly, .ds-text-area__WN0Emr__container--disabled {
+.ds-text-area__pA2cRq__container--readonly, .ds-text-area__pA2cRq__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-area__WN0Emr__container:focus-within:not(.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--valid, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--readonly) {
+.ds-text-area__pA2cRq__container:focus-within:not(.ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--invalid, .ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--valid, .ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-area__WN0Emr__container:hover:not(.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--disabled, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--readonly, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--active, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--valid, .ds-text-area__WN0Emr__container:focus-within) {
+.ds-text-area__pA2cRq__container:hover:not(.ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--disabled, .ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--readonly, .ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--active, .ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--invalid, .ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--valid, .ds-text-area__pA2cRq__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-area__WN0Emr__container.active:not(.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--disabled, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--readonly, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--valid) {
+.ds-text-area__pA2cRq__container.active:not(.ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--disabled, .ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--readonly, .ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--invalid, .ds-text-area__pA2cRq__container.ds-text-area__pA2cRq__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-area__WN0Emr__container--full-width {
+.ds-text-area__pA2cRq__container--full-width {
   width: 100%;
 }
-.ds-text-area__WN0Emr__external-button {
+.ds-text-area__pA2cRq__external-button {
   margin-inline-start: var(--ds-spacing-xSmall);
   align-self: flex-start;
 }
-.ds-text-area__WN0Emr .ds-text-area__WN0Emr ::slotted([slot=suffix]) {
+.ds-text-area__pA2cRq .ds-text-area__pA2cRq ::slotted([slot=suffix]) {
   margin-inline-start: var(--ds-spacing-xSmall);
   align-self: flex-start;
 }
-.ds-text-area__WN0Emr__validity-container {
+.ds-text-area__pA2cRq__validity-container {
   align-items: center;
   font-size: var(--ds-fontSize-14);
 }
-.ds-text-area__WN0Emr__validity-container--has-character-limit {
+.ds-text-area__pA2cRq__validity-container--has-character-limit {
   display: flex;
   gap: var(--ds-spacing-small);
   justify-content: space-between;
 }
-.ds-text-area__WN0Emr__character-count {
+.ds-text-area__pA2cRq__character-count {
   margin-top: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__WN0Emr__character-count--over-limit {
+.ds-text-area__pA2cRq__character-count--over-limit {
   color: var(--ds-textColor-danger);
 }
-.ds-text-area__WN0Emr .ds-text-area__WN0Emr__character-count > small {
+.ds-text-area__pA2cRq .ds-text-area__pA2cRq__character-count > small {
   display: inline-block;
   font-size: inherit;
 }
-.ds-text-area__WN0Emr__textarea {
+.ds-text-area__pA2cRq__textarea {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -133,7 +133,7 @@
   border: none;
   padding: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__WN0Emr__textarea::placeholder {
+.ds-text-area__pA2cRq__textarea::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -141,32 +141,32 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-area__WN0Emr__textarea:disabled {
+.ds-text-area__pA2cRq__textarea:disabled {
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-text-area__WN0Emr__textarea:disabled::placeholder {
+.ds-text-area__pA2cRq__textarea:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-area__WN0Emr__textarea:focus {
+.ds-text-area__pA2cRq__textarea:focus {
   outline: none;
   border: none;
 }
-.ds-text-area__WN0Emr__textarea--resize-both {
+.ds-text-area__pA2cRq__textarea--resize-both {
   resize: both;
 }
-.ds-text-area__WN0Emr__textarea--resize-auto, .ds-text-area__WN0Emr__textarea--resize-none {
+.ds-text-area__pA2cRq__textarea--resize-auto, .ds-text-area__pA2cRq__textarea--resize-none {
   resize: none;
 }
-.ds-text-area__WN0Emr__textarea--resize-auto {
+.ds-text-area__pA2cRq__textarea--resize-auto {
   overflow: hidden;
 }
-.ds-text-area__WN0Emr__textarea--resize-vertical {
+.ds-text-area__pA2cRq__textarea--resize-vertical {
   resize: vertical;
 }
-.ds-text-area__WN0Emr__textarea--resize-horizontal {
+.ds-text-area__pA2cRq__textarea--resize-horizontal {
   resize: horizontal;
 }
-.ds-text-area__WN0Emr__textarea--full-width {
+.ds-text-area__pA2cRq__textarea--full-width {
   width: 100%;
 }

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

@@ -207,11 +207,11 @@ export class DsTextArea extends Mixin(componentFactory('ds-text-area', { stopRoo
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
         const ariaDescribedby = this.dsAriaDescribedby || attrAriaDescribedby;
-        return (h(Host, { key: '8379acbe317cbc6dbcf396c61d652e79ce76baac', class: classNames(hostClass, {
+        return (h(Host, { key: '45c21e510d04de2d1c87793d4516361c72798bb4', class: classNames(hostClass, {
                 [`${hostClass}--full-width`]: this.dsFullWidth,
-            }) }, h(DsControlLabel, { key: '7056dd1140e130f5e58cb3247fbf7f1e1071b927', dsHtmlFor: this.dsId, dsLabel: this.getLabelText(), dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId }, h("slot", { key: 'bc99bfe69236ebb51a2d2513e0b4b25ce1758d99', name: "label" }), h("slot", { key: '21b433e11665789c03762665c947a2f61bee9f27', name: "assistiveText" })), h("div", { key: '161a1ddfbee320bb6364d7dbf2180f4ed4414573', class: classNames(`${baseClass}__field-wrapper`, {
+            }) }, h(DsControlLabel, { key: '1f8eb6ee91c6f7e87f39ea110abf3b955cbc726c', dsHtmlFor: this.dsId, dsLabel: this.getLabelText(), dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId }, h("slot", { key: '859e8771cd1582c718a158fb6cc25f9268b5f933', name: "label" }), h("slot", { key: '522fb7f92be122c3f1fa68266195c6a86245362f', name: "assistiveText" })), h("div", { key: 'ae1e638ebbff54726ad9832233d7e8349b98142e', class: classNames(`${baseClass}__field-wrapper`, {
                 [`${baseClass}__field-wrapper--full-width`]: this.dsFullWidth,
-            }) }, h("div", { key: '469b03e54904727d4eca40a96565121f309d5848', onMouseDown: () => (this.textareaActive = true), onMouseUp: () => (this.textareaActive = false), onClick: () => this.handleTextareaContainerClick(), class: classNames(containerClass, {
+            }) }, h("div", { key: 'a5f21b6970446ec291cbca4658fd0b6fd239b146', 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,
@@ -219,7 +219,7 @@ export class DsTextArea extends Mixin(componentFactory('ds-text-area', { stopRoo
                 [`${containerClass}--focus`]: this.hasFocus,
                 [`${containerClass}--active`]: !!this.textareaActive,
                 [`${containerClass}--full-width`]: this.dsFullWidth,
-            }) }, h("textarea", { key: 'fc7ef04350e0ed52387ace9b89c83743b9b0b8d3', ref: el => (this.textareaElement = el), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, value: 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: '2918e870ead453bad4094594e55cd8cef2384cac', ref: el => (this.textareaElement = el), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, value: 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({
@@ -227,11 +227,11 @@ export class DsTextArea extends Mixin(componentFactory('ds-text-area', { stopRoo
                     [this.visuallyHiddenAssistiveTextId]: !!this.dsHiddenAssistiveText,
                     [this.errorTextId]: !!this.dsErrorText,
                     [this.successTextId]: !!this.dsSuccessText,
-                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes })), h("div", { key: '1240d2f821b7138c1aedff907a44e547995596df', class: classNames(`${baseClass}__validity-container`, {
+                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes })), h("div", { key: 'ebc1d5588e156691c4ac0c2f14a51e069b2ca611', class: classNames(`${baseClass}__validity-container`, {
                 [`${baseClass}__validity-container--has-character-limit`]: !!this.dsCharacterLimit,
-            }) }, h("slot", { key: '59f38b187e813f4744aa9a40040d77baa7263c6d', name: "validity" }, h(DsInputValidity, { key: 'c68a14d9b3398e7bc7fcf7c7208347eb8c865142', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }, !!this.dsCharacterLimit && h(DsVisuallyHidden, { key: '3204b7cda1a04c4d980f27037e9036d9f18808f7', dsTag: "span" }, this.hiddenCharacterCountText)), h(DsInputValidity, { key: 'b1b3b261382f33f3b7e8d4d2915ce31c2c877d3e', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsAriaLive: "polite" })), this.dsCharacterLimit && (h("div", { key: '7d6f6100b90aab2976f47168cb71033a26e9b834', class: classNames(`${baseClass}__character-count`, {
+            }) }, h("slot", { key: 'b27fdd6891935996b630b6cd1737f4ec67d3d1c1', name: "validity" }, h(DsInputValidity, { key: 'e261e5bbcf1c60b6026b3167bf0460b67b09ab73', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }, !!this.dsCharacterLimit && h(DsVisuallyHidden, { key: '37e272f62e2bb40291bc777b3769cb3ee10526c1', dsTag: "span" }, this.hiddenCharacterCountText)), h(DsInputValidity, { key: '9bdc7fe6a535f76ab230c6d4bc297b0ff2c4ebdf', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsAriaLive: "polite" })), this.dsCharacterLimit && (h("div", { key: 'a03eca5800c8f8cb56c5e75a3e262b95c3d7bb0c', class: classNames(`${baseClass}__character-count`, {
                 [`${baseClass}__character-count--over-limit`]: this.characterCount > this.dsCharacterLimit,
-            }) }, h("small", { key: '56763f551f9566d42bd4e04b6cece86c3c72507d' }, this.characterCount, "/", this.dsCharacterLimit)))))));
+            }) }, h("small", { key: '86a4a969d94fce92297e29d124f98d57eb081339' }, this.characterCount, "/", this.dsCharacterLimit)))))));
     }
     static get is() { return "ds-text-area"; }
     static get encapsulation() { return "scoped"; }

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

@@ -8,20 +8,20 @@
   display: block;
 }
 
-:host(.ds-text-input__WN0Emr__host) {
+:host(.ds-text-input__pA2cRq__host) {
   width: 288px;
 }
 @media (min-width: 75rem) {
-  :host(.ds-text-input__WN0Emr__host) {
+  :host(.ds-text-input__pA2cRq__host) {
     width: 320px;
   }
 }
 
-:host(.ds-text-input__WN0Emr__host--full-width) {
+:host(.ds-text-input__pA2cRq__host--full-width) {
   width: 100%;
 }
 
-.ds-text-input__WN0Emr {
+.ds-text-input__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -29,10 +29,10 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-text-input__WN0Emr__label-container {
+.ds-text-input__pA2cRq__label-container {
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__WN0Emr__label-container label {
+.ds-text-input__pA2cRq__label-container label {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
@@ -40,7 +40,7 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-default);
 }
-.ds-text-input__WN0Emr__label-container small {
+.ds-text-input__pA2cRq__label-container small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);
@@ -50,7 +50,7 @@
   margin-block-start: var(--ds-spacing-3xSmall);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-input__WN0Emr__container {
+.ds-text-input__pA2cRq__container {
   box-sizing: border-box;
   width: 100%;
   display: inline-flex;
@@ -62,63 +62,63 @@
   border-color: var(--ds-borderColor-default);
   padding-inline: var(--ds-spacing-xSmall);
 }
-.ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--invalid {
+.ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--invalid:hover:not(.ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--invalid:focus-within) {
+.ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--invalid:hover:not(.ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--invalid.ds-text-input__WN0Emr__container--active {
+.ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--invalid.ds-text-input__pA2cRq__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--valid {
+.ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--valid:hover:not(.ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--valid:focus-within) {
+.ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--valid:hover:not(.ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--valid .ds-text-input__WN0Emr__container--active {
+.ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--valid .ds-text-input__pA2cRq__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--readonly, .ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--disabled {
+.ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--readonly, .ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-input__WN0Emr__container:has(span.ds-text-input__WN0Emr__prefix, .ds-text-input__WN0Emr__icon) {
+.ds-text-input__pA2cRq__container:has(span.ds-text-input__pA2cRq__prefix, .ds-text-input__pA2cRq__icon) {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__WN0Emr__container:has(.ds-text-input__WN0Emr__button) {
+.ds-text-input__pA2cRq__container:has(.ds-text-input__pA2cRq__button) {
   padding-inline-end: unset;
 }
-.ds-text-input__WN0Emr__container:has(input:active):not:has(input:disabled, input:read-only) {
+.ds-text-input__pA2cRq__container:has(input:active):not:has(input:disabled, input:read-only) {
   border-color: var(--ds-borderColor-default);
 }
-.ds-text-input__WN0Emr__container:has(input:active) {
+.ds-text-input__pA2cRq__container:has(input:active) {
   outline: none;
 }
-.ds-text-input__WN0Emr__container.active:not(.ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--disabled, .ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--readonly, .ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--invalid, .ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--valid) {
+.ds-text-input__pA2cRq__container.active:not(.ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--disabled, .ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--readonly, .ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--invalid, .ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-input__WN0Emr__container:hover:not(.ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--disabled, .ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--readonly, .ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--active, .ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--invalid, .ds-text-input__WN0Emr__container.ds-text-input__WN0Emr__container--valid, .ds-text-input__WN0Emr__container:focus-within) {
+.ds-text-input__pA2cRq__container:hover:not(.ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--disabled, .ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--readonly, .ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--active, .ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--invalid, .ds-text-input__pA2cRq__container.ds-text-input__pA2cRq__container--valid, .ds-text-input__pA2cRq__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-input__WN0Emr__container:has(> input:focus) {
+.ds-text-input__pA2cRq__container:has(> input:focus) {
   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__WN0Emr__container:has(> input:focus):not(.ds-text-input__WN0Emr__container:has(> input:focus).ds-text-input__WN0Emr__container--invalid, .ds-text-input__WN0Emr__container:has(> input:focus).ds-text-input__WN0Emr__container--valid, .ds-text-input__WN0Emr__container:has(> input:focus).ds-text-input__WN0Emr__container--readonly) {
+.ds-text-input__pA2cRq__container:has(> input:focus):not(.ds-text-input__pA2cRq__container:has(> input:focus).ds-text-input__pA2cRq__container--invalid, .ds-text-input__pA2cRq__container:has(> input:focus).ds-text-input__pA2cRq__container--valid, .ds-text-input__pA2cRq__container:has(> input:focus).ds-text-input__pA2cRq__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-input__WN0Emr__container > input {
+.ds-text-input__pA2cRq__container > input {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -135,7 +135,7 @@
   padding-block: var(--ds-spacing-4xSmall);
   padding-inline: 0;
 }
-.ds-text-input__WN0Emr__container > input::placeholder {
+.ds-text-input__pA2cRq__container > input::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -143,38 +143,38 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-input__WN0Emr__container > input:disabled {
+.ds-text-input__pA2cRq__container > input:disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-input__WN0Emr__container > input:disabled::placeholder {
+.ds-text-input__pA2cRq__container > input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-input__WN0Emr__container > input:focus {
+.ds-text-input__pA2cRq__container > input:focus {
   outline: none;
   border: none;
 }
-.ds-text-input__WN0Emr__container > input[type=number] {
+.ds-text-input__pA2cRq__container > input[type=number] {
   appearance: textfield;
 }
-.ds-text-input__WN0Emr__container > input::-webkit-search-decoration, .ds-text-input__WN0Emr__container > input::-webkit-search-cancel-button, .ds-text-input__WN0Emr__container > input::-webkit-search-results-button, .ds-text-input__WN0Emr__container > input::-webkit-search-results-decoration, .ds-text-input__WN0Emr__container > input::-webkit-inner-spin-button, .ds-text-input__WN0Emr__container > input::-webkit-outer-spin-button {
+.ds-text-input__pA2cRq__container > input::-webkit-search-decoration, .ds-text-input__pA2cRq__container > input::-webkit-search-cancel-button, .ds-text-input__pA2cRq__container > input::-webkit-search-results-button, .ds-text-input__pA2cRq__container > input::-webkit-search-results-decoration, .ds-text-input__pA2cRq__container > input::-webkit-inner-spin-button, .ds-text-input__pA2cRq__container > input::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
-.ds-text-input__WN0Emr__container:has(span.ds-text-input__WN0Emr__prefix, .ds-text-input__WN0Emr__icon) > input {
+.ds-text-input__pA2cRq__container:has(span.ds-text-input__pA2cRq__prefix, .ds-text-input__pA2cRq__icon) > input {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__WN0Emr__container span.ds-text-input__WN0Emr__prefix, .ds-text-input__WN0Emr__container span.ds-text-input__WN0Emr__suffix {
+.ds-text-input__pA2cRq__container span.ds-text-input__pA2cRq__prefix, .ds-text-input__pA2cRq__container span.ds-text-input__pA2cRq__suffix {
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-link-standalone);
 }
-.ds-text-input__WN0Emr__container .ds-text-input__WN0Emr__icon, .ds-text-input__WN0Emr__container ::slotted([slot=prefix]) {
+.ds-text-input__pA2cRq__container .ds-text-input__pA2cRq__icon, .ds-text-input__pA2cRq__container ::slotted([slot=prefix]) {
   height: 1.5rem;
   color: var(--ds-textColor-default);
 }
-.ds-text-input__WN0Emr__container .ds-text-input__WN0Emr__button {
+.ds-text-input__pA2cRq__container .ds-text-input__pA2cRq__button {
   max-height: 40px;
 }
-.ds-text-input__WN0Emr__container .ds-text-input__WN0Emr__button:has(button:focus) {
+.ds-text-input__pA2cRq__container .ds-text-input__pA2cRq__button:has(button:focus) {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 2);

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

@@ -263,21 +263,21 @@ export class DsTextInput extends Mixin(componentFactory('ds-text-input', { stopR
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
         const ariaDescribedby = this.dsAriaDescribedby || attrAriaDescribedby;
-        return (h(Host, { key: 'e3580fbf5fd988bcb5956a40c6fb82d23519ee71', class: classNames(hostClass, {
+        return (h(Host, { key: 'a57c0b3f5c7919c79afd9cf14d1494be1c2d32f2', class: classNames(hostClass, {
                 [`${hostClass}--full-width`]: this.dsFullWidth,
-            }) }, h(DsControlLabel, { key: '8c7a959efe42ec4272fdfa6bec975ef9249ea25a', 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: 'ad834b7c6d823f328fb9c315e61d674d33edf8c2', name: "label" }), h("slot", { key: '5a7786b8cd144463a9a22b6656026acc09c2dfb9', name: "assistiveText" })), h("div", { key: '8bf02b6d0abe10288a4239d5f5428f5830482ac6', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames(containerClass, {
+            }) }, h(DsControlLabel, { key: '06ce11d6eb02872e196665dbb55691271a508847', 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: '64b19c5c4eaaac435a39b471d37eb31980b67742', name: "label" }), h("slot", { key: '7b0e980c460bacaaab4b3c71ce87366e84dea8e3', name: "assistiveText" })), h("div", { key: '24a20f1cf42c6a56e182ea4c40a8b7e130dd4a33', 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.dsInvalid || !!this.dsErrorText,
                 [`${containerClass}--focus`]: this.hasFocus,
                 [`${containerClass}--active`]: !!this.inputActive,
-            }) }, this.renderPrefixContent(baseClass), h("input", { key: '4d0c675cc45816817cdbe7f412a4734d10f80515', 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 ||
+            }) }, this.renderPrefixContent(baseClass), h("input", { key: 'e6287be0f9850eaae6bf5ccc2b421e2a908ed103', 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.dsInvalid || this.dsErrorText ? 'true' : 'false', ...restAttributes }), this.renderSuffixContent(baseClass)), h("slot", { key: '5a1b6dd7e3e88f4798368e5176d9b5f7046845c3', name: "validity" }, h(DsInputValidity, { key: 'a3dc1ebe3a44b4bd0fb7d25dbffb837bcb7d3dfe', id: this.validityId, dsText: this.validityText, dsType: this.validityType }))));
+                })), "aria-invalid": this.dsInvalid || this.dsErrorText ? 'true' : 'false', ...restAttributes }), this.renderSuffixContent(baseClass)), h("slot", { key: '959aaa7103376c1924e421cd388a41ca3ed0e507', name: "validity" }, h(DsInputValidity, { key: '97570fe442637e29a5254ac55d36e2961f5d34b5', id: this.validityId, dsText: this.validityText, dsType: this.validityType }))));
     }
     static get is() { return "ds-text-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -9,7 +9,7 @@ export class DsVersionedCssVariables extends Mixin(componentFactory('ds-versione
         this.componentMounted();
     }
     render() {
-        return (h(Host, { key: '01a17de5ff97c88c7372b001d209257b41bad085' }, h("slot", { key: 'cf67702fa89cc7ad4e850c02a0526918a7b976cd' })));
+        return (h(Host, { key: 'e124ef616e0db03e48034a6522990ee4ceebb217' }, h("slot", { key: 'af444ac054e905ed687362a4665c2a5d684da8dd' })));
     }
     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__WN0Emr {
+.ds-visually-hidden__pA2cRq {
   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: '4f1770dcf92d279d6e03ea7c2a24a5330dea6113', class: baseClass }, h("slot", { key: '35346060486147047b562a7f72bc9bb30e98b473' })));
+        return (h(this.dsTag, { key: 'a4c985dcc1f9fef52fe29335a4a97a279936e7ca', class: baseClass }, h("slot", { key: '22b3e53c7ea5ef2700c065bfd11af5e2f27d13cf' })));
     }
     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: '4c59d9b97dec3f445c12559b0f6ee0ac9fce3281', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '7f865ba39dc95265a144e6e6f8a96914fe903d01', 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: '68edd5e7c81a51193e0ab344dc5b78fa26ac663d', 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: '15080147b645205c157819cb15d2602e9722ba3d', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '63fbfbae4c9881a1f5b779e7359e03252f9adcb9', 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: '6faad6f1fb078f78842698e829fdae47a422c2a1', 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: '3646fbd5eec90a88afe943481c151ab14a73b8fa', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'dec697a6ca4d7f21a27770245601bfad547d68f7', 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: '387378182fca90cc7a4260bf54a3d6121ee73c1d', 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: 'e59914b5ae972e805fab805eb3018cc93b8ac28e', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'ced08bae09510ec492c71339a732cdc08a5fa23a', 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: '8c8224ff6c188eddaea97e90da54be7c9bea3df7', 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: 'd985d7a8134b6394c381226d2065c029ab2514ad', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'a48e9f14100efb5ef3dcb8146df9779f56b1a6a2', 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: '61cfe648b4d3ba0c16b594b33a64461add33758b', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
+        return (h(Host, { key: '82e4162f7955eea5e4e7cd5e358c5819e825f430', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'ba04556c9fcd02c92fc5ac4474545c5708fdfc02', 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: 'f152755cc684d7da2300403fbcaadbc37f57befc', 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: '3cecce787ffd08edf3e62d860e4c85b4b96c6e3f', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '75e94f0f2dd78ff0bc7e86e88e1769eb66b9b253', 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: 'a13e9306ae6452f4a7933af95cfbb568eec482ef', 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: '5c68e5b4c667e91d1ff6b8334c31b65b8d465695', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'e184b960b6a0be07c9a24c9f8890d8ecd37b683d', 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: '4082219bb8da0ed922e9d062e0904b9346122c7c', 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: '9c56db8f961a85229827c99e26523561bdf87d59', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '38835d4ca9cd7539dcec279c7ba8926c4719bd0c', 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: 'd52e4c15fdb47f0808c97b3957e608569bd4d529', 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: '2e5e8fe4c7b01ff0bab4fa35ccc360f327775fea', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '9b0c16a499bfd7fdd1c36b63e827ba30946e2ed9', 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: '5c59dff0011bdb2b4f53aba5e6161b3090ebe9aa', 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: 'eecc4420140fedf40ee6b96b20a17cd88d1d6d7f', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'f22f8836d52f14665a6fdddaf1f8d465afabd791', 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: '6eb5595b892d510ff615db226aa4070555092290', d: "M433-433H175v-94h258v-259h94v259h259v94H527v258h-94v-258Z" }))));
+        return (h(Host, { key: '36660f5ebee28111d7543539d112bd6a3df87062', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'f2317923d9d887dfc6fe5a0e88f22edc463ac097', 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: 'a1fec2e28e78ca1a845cf5065348c67310d9f23e', 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: 'e9a1f7334d871545bb6a885e370f1976f36e4bed', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '97bbe00b3c68c1cc1924a4ea228b79599dfcb20a', 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: '253303326b4d647c88945358d14459595b3cf7f6', 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: '7ae8c7f0f69f15fd28bcdebea73d7946460b8989', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '5fd25a1b2d9dfd5b25be453c12998522f9db87a7', 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: 'ee186ff444c9fad53b3b65d58905165e261cc0b9', 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: 'ed83f1b3917896ea57d66bcad6f8b4caf0892f54', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '754932200aaddb6e0c23971a7dcb625ee9c6fcb6', 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: '5a4cd60c39e8f34c771fc763181452cf90b553ae', 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: '3bcec4bf286c044aaded0bc0f2abaf0593eb26ef', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '0128d58629cf7a715dda9bb45b3129a6873fe36c', 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: '1441e3bdc023dcd613fcd516f7ad8bf0c0e077e0', 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() {

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

@@ -6,7 +6,7 @@ export class DsIconArrowBack {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'c12382c63edf5649bff50836ff75c1628766a121', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '219205546ad89434bb9a0b425bb9a26ae9a8f543', 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: 'abe1251629d5f866c39612e1f24cde1dcbd11456', d: "m315-433 232 232-67 66-345-345 345-346 67 67-232 232h511v94H315Z" }))));
+        return (h(Host, { key: '27739f5b7f682dbb0c2831b8a1a06aa31e8cf80e', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'f79db02409e3aedafce4f5811aad74123a50def9', 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: 'e498b55a5197fb7f02ebc7fd00c454812b99537a', d: "m315-433 232 232-67 66-345-345 345-346 67 67-232 232h511v94H315Z" }))));
     }
     static get is() { return "ds-icon-arrow-back"; }
     static get properties() {