@uh-design-system/component-library 1.4.0-rc.1 → 1.4.0-rc.3

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

@@ -1,10 +1,6 @@
-.ds-no-style-leak *, .ds-text-input__MGLLcm,
-.ds-text-input__MGLLcm :where([class*=__MGLLcm]) {
+.ds-no-style-leak * {
   all: unset;
   box-sizing: border-box;
-}
-
-.ds-no-style-leak * {
   display: block;
 }
 
@@ -18,13 +14,18 @@
   }
 }
 
-.ds-text-input__MGLLcm {
+.ds-text-input__KmYz6O {
+  all: initial;
+  display: revert;
+  box-sizing: border-box;
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-text-input__MGLLcm__label-container {
+.ds-text-input__KmYz6O__label-container {
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__MGLLcm__label-container label {
+.ds-text-input__KmYz6O__label-container label {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
@@ -32,7 +33,7 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-default);
 }
-.ds-text-input__MGLLcm__label-container small {
+.ds-text-input__KmYz6O__label-container small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);
@@ -42,17 +43,17 @@
   margin-block-start: var(--ds-spacing-3xSmall);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-input__MGLLcm__container:focus-visible {
+.ds-text-input__KmYz6O__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__MGLLcm__container:focus-within {
+.ds-text-input__KmYz6O__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__MGLLcm__container {
+.ds-text-input__KmYz6O__container {
   box-sizing: border-box;
   width: 100%;
   display: inline-flex;
@@ -64,65 +65,65 @@
   border-color: var(--ds-borderColor-default);
   padding-inline: var(--ds-spacing-xSmall);
 }
-.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--invalid {
+.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--invalid:hover:not(.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--invalid:focus-within) {
+.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--invalid:hover:not(.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--invalid.ds-text-input__MGLLcm__container--active {
+.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--invalid.ds-text-input__KmYz6O__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--valid {
+.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--valid:hover:not(.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--valid:focus-within) {
+.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--valid:hover:not(.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--valid .ds-text-input__MGLLcm__container--active {
+.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--valid .ds-text-input__KmYz6O__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--readonly, .ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--disabled {
+.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--readonly, .ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-input__MGLLcm__container:has(span.ds-text-input__MGLLcm__prefix, .ds-text-input__MGLLcm__icon) {
+.ds-text-input__KmYz6O__container:has(span.ds-text-input__KmYz6O__prefix, .ds-text-input__KmYz6O__icon) {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__MGLLcm__container:has(.ds-text-input__MGLLcm__button) {
+.ds-text-input__KmYz6O__container:has(.ds-text-input__KmYz6O__button) {
   padding-inline-end: unset;
 }
-.ds-text-input__MGLLcm__container:has(input:active):not:has(input:disabled, input:read-only) {
+.ds-text-input__KmYz6O__container:has(input:active):not:has(input:disabled, input:read-only) {
   border-color: var(--ds-borderColor-default);
 }
-.ds-text-input__MGLLcm__container:has(input:active) {
+.ds-text-input__KmYz6O__container:has(input:active) {
   outline: none;
 }
-.ds-text-input__MGLLcm__container.active:not(.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--disabled, .ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--readonly, .ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--invalid, .ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--valid) {
+.ds-text-input__KmYz6O__container.active:not(.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--disabled, .ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--readonly, .ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--invalid, .ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-input__MGLLcm__container:hover:not(.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--disabled, .ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--readonly, .ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--active, .ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--invalid, .ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--valid, .ds-text-input__MGLLcm__container:focus-within) {
+.ds-text-input__KmYz6O__container:hover:not(.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--disabled, .ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--readonly, .ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--active, .ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--invalid, .ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--valid, .ds-text-input__KmYz6O__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-input__MGLLcm__container:focus-within:not(.ds-text-input__MGLLcm__container:focus-within.ds-text-input__MGLLcm__container--invalid, .ds-text-input__MGLLcm__container:focus-within.ds-text-input__MGLLcm__container--valid, .ds-text-input__MGLLcm__container:focus-within.ds-text-input__MGLLcm__container--readonly) {
+.ds-text-input__KmYz6O__container:focus-within:not(.ds-text-input__KmYz6O__container:focus-within.ds-text-input__KmYz6O__container--invalid, .ds-text-input__KmYz6O__container:focus-within.ds-text-input__KmYz6O__container--valid, .ds-text-input__KmYz6O__container:focus-within.ds-text-input__KmYz6O__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-input__MGLLcm__container:focus-within * > .ds-text-input__MGLLcm__button > button:focus-visible {
+.ds-text-input__KmYz6O__container:focus-within * > .ds-text-input__KmYz6O__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__MGLLcm__container > input {
+.ds-text-input__KmYz6O__container > input {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -139,7 +140,7 @@
   padding-block: var(--ds-spacing-4xSmall);
   padding-inline: 0;
 }
-.ds-text-input__MGLLcm__container > input::placeholder {
+.ds-text-input__KmYz6O__container > input::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -147,35 +148,35 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-input__MGLLcm__container > input:disabled {
+.ds-text-input__KmYz6O__container > input:disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-input__MGLLcm__container > input:disabled::placeholder {
+.ds-text-input__KmYz6O__container > input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-input__MGLLcm__container > input:focus {
+.ds-text-input__KmYz6O__container > input:focus {
   outline: none;
   border: none;
 }
-.ds-text-input__MGLLcm__container > input[type=number] {
+.ds-text-input__KmYz6O__container > input[type=number] {
   appearance: textfield;
 }
-.ds-text-input__MGLLcm__container > input::-webkit-search-decoration, .ds-text-input__MGLLcm__container > input::-webkit-search-cancel-button, .ds-text-input__MGLLcm__container > input::-webkit-search-results-button, .ds-text-input__MGLLcm__container > input::-webkit-search-results-decoration, .ds-text-input__MGLLcm__container > input::-webkit-inner-spin-button, .ds-text-input__MGLLcm__container > input::-webkit-outer-spin-button {
+.ds-text-input__KmYz6O__container > input::-webkit-search-decoration, .ds-text-input__KmYz6O__container > input::-webkit-search-cancel-button, .ds-text-input__KmYz6O__container > input::-webkit-search-results-button, .ds-text-input__KmYz6O__container > input::-webkit-search-results-decoration, .ds-text-input__KmYz6O__container > input::-webkit-inner-spin-button, .ds-text-input__KmYz6O__container > input::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
-.ds-text-input__MGLLcm__container:has(span.ds-text-input__MGLLcm__prefix, .ds-text-input__MGLLcm__icon) > input {
+.ds-text-input__KmYz6O__container:has(span.ds-text-input__KmYz6O__prefix, .ds-text-input__KmYz6O__icon) > input {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__MGLLcm__container span.ds-text-input__MGLLcm__prefix, .ds-text-input__MGLLcm__container span.ds-text-input__MGLLcm__suffix {
+.ds-text-input__KmYz6O__container span.ds-text-input__KmYz6O__prefix, .ds-text-input__KmYz6O__container span.ds-text-input__KmYz6O__suffix {
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-link-standalone);
 }
-.ds-text-input__MGLLcm__container .ds-text-input__MGLLcm__icon, .ds-text-input__MGLLcm__container ::slotted([slot=prefix]) {
+.ds-text-input__KmYz6O__container .ds-text-input__KmYz6O__icon, .ds-text-input__KmYz6O__container ::slotted([slot=prefix]) {
   height: 1.5rem;
   color: var(--ds-textColor-default);
 }
-.ds-text-input__MGLLcm__container .ds-text-input__MGLLcm__button {
+.ds-text-input__KmYz6O__container .ds-text-input__KmYz6O__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

@@ -256,19 +256,19 @@ 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: '0c039defda6e5e459caae3edf7a3e3b4d2e1eeee' }, h(DsControlLabel, { key: '2e4854fafe431cb609d882a7eec385e7039a811c', 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: '11e0cfbf92b2feb619c539981e0d53a91383bd80', name: "label" }), h("slot", { key: '80330e56ec8123b94e4b964c8f4665b9463daed6', name: "assistiveText" })), h("div", { key: '0e27e30dfa8ceb9912a6c53ed250f71c85fd32d0', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames(containerClass, {
+        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, {
                 [`${containerClass}--disabled`]: this.dsDisabled,
                 [`${containerClass}--readonly`]: this.dsReadonly,
                 [`${containerClass}--valid`]: !!this.dsSuccessText,
                 [`${containerClass}--invalid`]: !!this.dsErrorText,
                 [`${containerClass}--focus`]: this.hasFocus,
                 [`${containerClass}--active`]: !!this.inputActive,
-            }) }, this.renderPrefixContent(baseClass), h("input", { key: '392c0880d844648434ce6bea242169fc60955e23', 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 ||
+            }) }, 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 ||
                 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: '5d11d089cda76beae7ff3cc786de38cb82a14f1b', name: "validity" }, h(DsInputValidity, { key: 'dc39d80a03f9be5ddb9b9de306dd5dd763520951', id: this.validityId, dsText: this.validityText, dsType: this.validityType, dsAriaLive: "assertive" }))));
+                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes }), this.renderSuffixContent(baseClass)), h("slot", { key: 'c8ace1da007e859d7c5862c26e6b58eb6972f480', name: "validity" }, h(DsInputValidity, { key: '6f8f4d3fe0d20ba285d97a5627e796c9798a6be6', id: this.validityId, dsText: this.validityText, dsType: this.validityType, dsAriaLive: "assertive" }))));
     }
     static get is() { return "ds-text-input"; }
     static get encapsulation() { return "scoped"; }
@@ -774,7 +774,8 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
                         "DsTextInputType": {
                             "location": "import",
                             "path": "./utils",
-                            "id": "src/components/01-base-components/ds-text-input/utils.ts::DsTextInputType"
+                            "id": "src/components/01-base-components/ds-text-input/utils.ts::DsTextInputType",
+                            "referenceLocation": "DsTextInputType"
                         }
                     }
                 },
@@ -872,7 +873,7 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
                 },
                 "complexType": {
                     "original": "Omit<DsTextInputEvent, 'event'>",
-                    "resolved": "{ value: string; }",
+                    "resolved": "\"event\" | Event",
                     "references": {
                         "Omit": {
                             "location": "global",
@@ -897,7 +898,7 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
                 },
                 "complexType": {
                     "original": "DsTextInputEvent<InputEvent>",
-                    "resolved": "{ event: InputEvent; value: string; }",
+                    "resolved": "InputEvent",
                     "references": {
                         "DsTextInputEvent": {
                             "location": "local",
@@ -922,7 +923,7 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
                 },
                 "complexType": {
                     "original": "DsTextInputEvent",
-                    "resolved": "{ event: Event; value: string; }",
+                    "resolved": "Event",
                     "references": {
                         "DsTextInputEvent": {
                             "location": "local",
@@ -948,7 +949,8 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -969,7 +971,8 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }
@@ -1010,7 +1013,8 @@ export class DsTextInput extends Mixin(disableEventsFactory) {
                         "Event": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event",
+                            "referenceLocation": "Event"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -64,7 +64,7 @@ export const Events = {
     </style>
     <ds-grid>
       <ds-grid>
-        <ds-card ds-heading="Events" ds-description="Type in the input to observe the events it triggers. Change events are emitted only on user interaction.">
+        <ds-card ds-link-type="none" ds-heading="Events" ds-description="Type in the input to observe the events it triggers. Change events are emitted only on user interaction.">
           <ul slot="content" id="text-input-output" class="ds-bodytext-sm ds-m-sm">
             <li id="text-input-output__value">Value: <span id="text-input-output__value-text">&lt;empty&gt;</span></li>
             <li id="text-input-output__programmatic">Programmatic value: <span id="text-input-output__programmatic-text">&lt;empty&gt;</span></li>

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

@@ -229,8 +229,8 @@
   --ds-iconColor-attention: var(--ds-palette-yellow-60);
   --ds-iconColor-attention-hover: var(--ds-palette-yellow-70);
   --ds-iconColor-attention-active: var(--ds-palette-yellow-80);
-  --ds-fontFamily-heading: "Open Sans", sans-serif;
-  --ds-fontFamily-body: "Open Sans", sans-serif;
+  --ds-fontFamily-heading: 'Open Sans', sans-serif;
+  --ds-fontFamily-body: 'Open Sans', sans-serif;
   --ds-fontSize-12: 12px; /* 0.75rem */
   --ds-fontSize-14: 14px; /* 0.875rem */
   --ds-fontSize-16: 16px; /* 1rem */
@@ -267,8 +267,8 @@
 @supports (font-variation-settings: normal) {
   :root,
   :host {
-    --ds-fontFamily-heading: "Open Sans Variable", sans-serif;
-    --ds-fontFamily-body: "Open Sans Variable", sans-serif;
+    --ds-fontFamily-heading: 'Open Sans Variable', sans-serif;
+    --ds-fontFamily-body: 'Open Sans Variable', sans-serif;
   }
 }
 :host {
@@ -493,8 +493,8 @@
   --ds-iconColor-attention: var(--ds-palette-yellow-60);
   --ds-iconColor-attention-hover: var(--ds-palette-yellow-70);
   --ds-iconColor-attention-active: var(--ds-palette-yellow-80);
-  --ds-fontFamily-heading: "Open Sans", sans-serif;
-  --ds-fontFamily-body: "Open Sans", sans-serif;
+  --ds-fontFamily-heading: 'Open Sans', sans-serif;
+  --ds-fontFamily-body: 'Open Sans', sans-serif;
   --ds-fontSize-12: 12px; /* 0.75rem */
   --ds-fontSize-14: 14px; /* 0.875rem */
   --ds-fontSize-16: 16px; /* 1rem */
@@ -531,7 +531,7 @@
 
 @supports (font-variation-settings: normal) {
   :host {
-    --ds-fontFamily-heading: "Open Sans Variable", sans-serif;
-    --ds-fontFamily-body: "Open Sans Variable", sans-serif;
+    --ds-fontFamily-heading: 'Open Sans Variable', sans-serif;
+    --ds-fontFamily-body: 'Open Sans Variable', sans-serif;
   }
 }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class DsVersionedCssVariables {
     render() {
-        return (h(Host, { key: '4c9340142537e654e292951ba4dd5df1e3682f21' }, h("slot", { key: '4cf12bc73ce62b2ecb8fa79ac1f0a049f631e075' })));
+        return (h(Host, { key: '6983cb42d1710ba811fe1404915fc2922fef3fba' }, h("slot", { key: '5beca15db06f1dfd772474f134694bd0a71809da' })));
     }
     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__MGLLcm {
+.ds-visually-hidden__KmYz6O {
   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: '8c5a5ee08b1e5d41266c4b6aa4f0502bfb0edf6f', class: baseClass }, h("slot", { key: '041a71b9756aea38880a4c82f8122fbd58c7c101' })));
+        return (h(this.dsTag, { key: '04870ad841b0dc3f844e45b1aab9d484e991ab95', class: baseClass }, h("slot", { key: 'ce890aff981db228f62d99cae8321326c962f84c' })));
     }
     static get is() { return "ds-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class DsIcon360 {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'd0641eee9ee6df96b09e9d9f8445c535c7fc29d4', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '2c1d0da6f91423cdabe3fe2012985a109c031ff7', 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: '8d2bbae4bdc70297f74044b0ac46938372fe6184', 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: '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" }))));
     }
     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: '6699a183f784014ece5fc1ff4bd293344af6c7fa', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '3135070fef31f0a4ba08aa893e1cbe22bf222ca7', 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: 'b9375f3aa760a5a296b16fbf4a55914b81d85621', 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: '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" }))));
     }
     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: '4d93c342fbaedd0168aba218c266ac7c7c7456b0', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '379c17425816898e2a5e530774be55d360db0e6f', 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: '7798163c421b8dc78eb53a07764de94286232783', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
+        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" }))));
     }
     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: 'f46ba74818157e2fffc9924d6c584db7d0598ce1', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '4313f1d48650580a170c452b6e0f2445cfc5526b', 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: 'd588218d32bacc0ba1437951371d25f70e9d4b0e', 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: '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" }))));
     }
     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: 'f459160bd9a46ce6d365afe0707119682f2cd0b0', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b5b6378be65dc5173ba242068e9c60b9e01e437c', 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: 'f13964ce019f78603a6c192351bfc2b4787264eb', 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: '1b5f0d30478385335010b8f685a8a75a3f5416c6', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '0ffff6bc86a50d61bec1770348bd66f564ddf7ce', 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: '50c121087935224f463fac3cdec7d377f4bc2081', 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: '2b080a15e4916178a2793a016bc08a828ce191a9', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '51dd8dae2d0e49995e0defeb5283ef591541f4fd', 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: '55892aaae6b4d51440625db08b16355ce449f0e8', d: "M433-433H175v-94h258v-259h94v259h259v94H527v258h-94v-258Z" }))));
+        return (h(Host, { key: '3091a546401a3ba4e2b772ccba56102037c6cd1a', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '0e1c2ee03d44999c477963ebe720ff05e3487ca4', 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: '8d649ee8879e53f1ef26e671464a5708e2dbd419', 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: '71014a1ddd71ac3c90654079849e8cf6e9a7bec2', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '6344b168ea19e7facb3e5110f9255a04e3075eaf', 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: '041f72778e5dcd1cb10a7505ef8ced70429e9fa0', 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: '2f99b3c07e7216f426f2b94188d3cc3764b791e0', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'beea5e779f82fcbdc520be19bf8f85f1be36f4b4', 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: 'af9d397091a89e7b55d9713cd2edd1ec7f99f3c2', 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: 'c240cac448c4f0ca191cbf0f7692d8ab8285597f', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'd1438ed26b1c2f36c4d9997e7881c89f10ad2237', 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: '602a5b9317f76110e1aa2841a00239cea4be0f48', 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: '3a5e10d5bb649bd878260a3a912f1ba156c795a1', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '1d2920ca9616b6b8eead323f4903449556dee959', 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: 'ddee934c90ba8ab29b3d35227cb58c8fee119ac6', 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: '7729b9fc72f144fad35b2d2564d6153a97641c05', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '1cca68c541aa2da7a132d78b95e35e1bdb44748b', 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: 'bf2f26bc6d8917629fc0903d3f2f1aaaa8c65b38', d: "m315-433 232 232-67 66-345-345 345-346 67 67-232 232h511v94H315Z" }))));
+        return (h(Host, { key: '844bb2ce8e353d10667588570ae375cece0f99fc', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '1eab0b9c065da62852840b1eb9524c02915f3560', 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: '034cecd774da608e5be22d552c02104cf152027b', 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() {

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

@@ -6,7 +6,7 @@ export class DsIconArrowDownward {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'bf30db61353fe11a3e69b63e5baaa7e3ddc699a3', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '2585e5d8d496a22a563e0a0454385a128950ebe5', 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: '65a1cefd6179bae7872af682dd88a5663eec262f', d: "M433-826v511L201-547l-66 67 345 345 346-345-67-67-232 232v-511h-94Z" }))));
+        return (h(Host, { key: 'a2583f34dc09677542c534290d5b1c96b01c2fa8', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '8a99883934f7ecccefae8df0a52073111f5bbb5f', 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: '1fac0b52734e6d9f5d1441d7070395ebf91b449e', d: "M433-826v511L201-547l-66 67 345 345 346-345-67-67-232 232v-511h-94Z" }))));
     }
     static get is() { return "ds-icon-arrow-downward"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class DsIconArrowDropDown {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'e1ce4a449fab709fb7e18d5d140238b55fa8714b', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '3e1bf44158df8ec6ede1d74e0ce230a59c1a7291', 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: '4585817957a197a14d4b7d19fe64ef2dc1a7e631', d: "M480-336 239-576h482L480-336Z" }))));
+        return (h(Host, { key: '54df939141e016ec7818d96364458802b9a80cd9', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '80c508d296b236353ba9938c520118b2e60533f3', 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: '9a1c1169a39cb0ebdaceea35ac70a477a127cf2f', d: "M480-336 239-576h482L480-336Z" }))));
     }
     static get is() { return "ds-icon-arrow-drop-down"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-arrow-drop-down-circle/ds-icon-arrow-drop-down-circle.js

@@ -6,7 +6,7 @@ export class DsIconArrowDropDownCircle {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '770304bc2f3465d430310698dd5dbabda235cfb7', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b13be32f142e4a94d9c777a8db40c73baab74808', 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: 'd2227ea55cdafaba231d67f1fe6ba9274f39f4a7', d: "m480-350 174-174H305l175 174Zm.14 295Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Zm-.14-94q138 0 234.5-96.37T811-480q0-138-96.5-234.5t-235-96.5q-137.5 0-234 96.5t-96.5 235q0 137.5 96.37 234T480-149Zm0-331Z" }))));
+        return (h(Host, { key: 'e2db0fa571932f2680c028a2539712346f4dfa3f', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '50061517a5f044cdea49b852d109081b56912097', 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: '172c325ebc6e5e83c4e628e8b3f1d4edca453412', d: "m480-350 174-174H305l175 174Zm.14 295Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Zm-.14-94q138 0 234.5-96.37T811-480q0-138-96.5-234.5t-235-96.5q-137.5 0-234 96.5t-96.5 235q0 137.5 96.37 234T480-149Zm0-331Z" }))));
     }
     static get is() { return "ds-icon-arrow-drop-down-circle"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class DsIconArrowDropDownCircleFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'c4133e7fffc5f96c7597d680cf37bff6f720fec8', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '0d59efe4de395aff69e9b7a339a208d8c5c94333', 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: 'dff1608b8a2d29d99f5870632582d779436b493e', d: "m480-350 174-174H305l175 174Zm.14 295Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Z" }))));
+        return (h(Host, { key: '3cf96b55221e8b917153e8e1bf9ae8ce715b57f1', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '73d80bcd438fb8430a49b006d5e99495b53d0f89', 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: '39ac336799e69eadc450a7f87219439ece202139', d: "m480-350 174-174H305l175 174Zm.14 295Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Z" }))));
     }
     static get is() { return "ds-icon-arrow-drop-down-circle-fill"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class DsIconArrowDropUp {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '6ca341867fb499a134a1cedfcbd729bb37d2e5f4', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '8cdb467b8d09dbc70ae8e3bbf552b4ae64c9dfe6', 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: '961d4529f436e41b52324da6419d0ed98e6b8b16', d: "m239-383 241-242 241 242H239Z" }))));
+        return (h(Host, { key: 'd79c8f132661ed3db2defa597fb983831be4925d', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'cae3e0b04f8c2a27797c3420323526ada19a853c', 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: '80eaf258ee93ae69e907ff279f94a4c039df136e', d: "m239-383 241-242 241 242H239Z" }))));
     }
     static get is() { return "ds-icon-arrow-drop-up"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class DsIconArrowForward {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'fd0979d7f951b9206c4916e8bb497fd250cfeddc', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'cdce8f8efcadcbca04a360d7e512c9e2ed30b6e9', 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: 'a245fc0cd44974a6b40a171a930b0527efbc7edf', d: "M645-433H135v-94h510L413-759l67-67 346 346-346 345-67-66 232-232Z" }))));
+        return (h(Host, { key: 'bb8ba19234adf7b92d0ba24773466546a9f298a9', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '116a1873eebde0d7731b377a67038eb07065b56a', 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: '2effaf3ac3e3b688a2cf5db5112d49302426a0f3', d: "M645-433H135v-94h510L413-759l67-67 346 346-346 345-67-66 232-232Z" }))));
     }
     static get is() { return "ds-icon-arrow-forward"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class DsIconArrowInsert {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '99e0d2fd7f640c32e5b149fe74c25fd57c16a194', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '8e4e8f607518af62828442caf934de977100f0fb', 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: 'ab2799e12cc6a215aab2cca85d2cec47d19a5b4c', d: "M711-221 316-616v353h-95v-514h515v94H383l394 395-66 67Z" }))));
+        return (h(Host, { key: '1b9c48eb54307e9156e8e68ad43116928200731b', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '86fcf895d5adea4e5052237b9f8f31df29bff45b', 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: '9253133c82b139ccc343bb7fcef18e44d6c3e7d5', d: "M711-221 316-616v353h-95v-514h515v94H383l394 395-66 67Z" }))));
     }
     static get is() { return "ds-icon-arrow-insert"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class DsIconArrowOutward {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '05d36c1fcf9a0aa9a4b6f7fc1ced786840df3285', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '9ba825a61a88aedd9f34db1719a5b8da3dff6971', 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: 'cda11d099931017cfbed8b3bfc4b51f28e221655', d: "m250-221-67-67 395-395H224v-94h515v514h-95v-353L250-221Z" }))));
+        return (h(Host, { key: 'c14207261ffdd697d0ee2e851f885e7861b4be33', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '8c46ffa879c6a8ea4aa08acd4ac9e16544d38400', 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: '6c91fd9437e7f8577b9daa2dcd576f1f94b1e909', d: "m250-221-67-67 395-395H224v-94h515v514h-95v-353L250-221Z" }))));
     }
     static get is() { return "ds-icon-arrow-outward"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class DsIconArrowUpward {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '7f584300eca33e158306f559932537c9d09f3b79', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '7134f607731b073826e4a7e562d89e3f6434a6df', 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: '7f13bffd2b8aca0f834d7f0306692ec40287f91f', d: "M433-135v-510L201-413l-66-67 345-346 346 346-67 67-232-232v510h-94Z" }))));
+        return (h(Host, { key: '3035d55a4020366134975c906bc9eae7fc412c90', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '475be2e7065f3fc79d3b87bd8a6b26ccb2ad1f88', 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: '9d4f35711dcc7b336e72e062f1d9253bdb552096', d: "M433-135v-510L201-413l-66-67 345-346 346 346-67 67-232-232v510h-94Z" }))));
     }
     static get is() { return "ds-icon-arrow-upward"; }
     static get properties() {