npm - @uh-design-system/component-library - Versions diffs - 1.2.0 → 1.3.0-rc.1 - Mend

@uh-design-system/component-library 1.2.0 → 1.3.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2063) hide show

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

@@ -14,10 +14,10 @@
   }
 }
-.ds-text-input__DFAX9n__label-container {
+.ds-text-input__rbEY9j__label-container {
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__DFAX9n__label-container label {
+.ds-text-input__rbEY9j__label-container label {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
@@ -25,7 +25,7 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-default);
 }
-.ds-text-input__DFAX9n__label-container small {
+.ds-text-input__rbEY9j__label-container small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);
@@ -35,17 +35,17 @@
   margin-block-start: var(--ds-spacing-3xSmall);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-input__DFAX9n__container:focus-visible {
+.ds-text-input__rbEY9j__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__DFAX9n__container:focus-within {
+.ds-text-input__rbEY9j__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__DFAX9n__container {
+.ds-text-input__rbEY9j__container {
   box-sizing: border-box;
   width: 100%;
   display: inline-flex;
@@ -57,65 +57,65 @@
   border-color: var(--ds-borderColor-default);
   padding-inline: var(--ds-spacing-xSmall);
 }
-.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--invalid {
+.ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--invalid:hover:not(.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--invalid:focus-within) {
+.ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--invalid:hover:not(.ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--invalid.ds-text-input__DFAX9n__container--active {
+.ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--invalid.ds-text-input__rbEY9j__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--valid {
+.ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--valid:hover:not(.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--valid:focus-within) {
+.ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--valid:hover:not(.ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--valid .ds-text-input__DFAX9n__container--active {
+.ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--valid .ds-text-input__rbEY9j__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--readonly, .ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--disabled {
+.ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--readonly, .ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-input__DFAX9n__container:has(span.ds-text-input__DFAX9n__prefix, .ds-text-input__DFAX9n__icon) {
+.ds-text-input__rbEY9j__container:has(span.ds-text-input__rbEY9j__prefix, .ds-text-input__rbEY9j__icon) {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__DFAX9n__container:has(.ds-text-input__DFAX9n__button) {
+.ds-text-input__rbEY9j__container:has(.ds-text-input__rbEY9j__button) {
   padding-inline-end: unset;
 }
-.ds-text-input__DFAX9n__container:has(input:active):not:has(input:disabled, input:read-only) {
+.ds-text-input__rbEY9j__container:has(input:active):not:has(input:disabled, input:read-only) {
   border-color: var(--ds-borderColor-default);
 }
-.ds-text-input__DFAX9n__container:has(input:active) {
+.ds-text-input__rbEY9j__container:has(input:active) {
   outline: none;
 }
-.ds-text-input__DFAX9n__container.active:not(.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--disabled, .ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--readonly, .ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--invalid, .ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--valid) {
+.ds-text-input__rbEY9j__container.active:not(.ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--disabled, .ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--readonly, .ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--invalid, .ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-input__DFAX9n__container:hover:not(.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--disabled, .ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--readonly, .ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--active, .ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--invalid, .ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--valid, .ds-text-input__DFAX9n__container:focus-within) {
+.ds-text-input__rbEY9j__container:hover:not(.ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--disabled, .ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--readonly, .ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--active, .ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--invalid, .ds-text-input__rbEY9j__container.ds-text-input__rbEY9j__container--valid, .ds-text-input__rbEY9j__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-input__DFAX9n__container:focus-within:not(.ds-text-input__DFAX9n__container:focus-within.ds-text-input__DFAX9n__container--invalid, .ds-text-input__DFAX9n__container:focus-within.ds-text-input__DFAX9n__container--valid, .ds-text-input__DFAX9n__container:focus-within.ds-text-input__DFAX9n__container--readonly) {
+.ds-text-input__rbEY9j__container:focus-within:not(.ds-text-input__rbEY9j__container:focus-within.ds-text-input__rbEY9j__container--invalid, .ds-text-input__rbEY9j__container:focus-within.ds-text-input__rbEY9j__container--valid, .ds-text-input__rbEY9j__container:focus-within.ds-text-input__rbEY9j__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-input__DFAX9n__container:focus-within * > .ds-text-input__DFAX9n__button > button:focus-visible {
+.ds-text-input__rbEY9j__container:focus-within * > .ds-text-input__rbEY9j__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__DFAX9n__container > input {
+.ds-text-input__rbEY9j__container > input {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -131,7 +131,7 @@
   border: none;
   padding-block: var(--ds-spacing-4xSmall);
 }
-.ds-text-input__DFAX9n__container > input::placeholder {
+.ds-text-input__rbEY9j__container > input::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -139,35 +139,35 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-input__DFAX9n__container > input:disabled {
+.ds-text-input__rbEY9j__container > input:disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-input__DFAX9n__container > input:disabled::placeholder {
+.ds-text-input__rbEY9j__container > input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-input__DFAX9n__container > input:focus {
+.ds-text-input__rbEY9j__container > input:focus {
   outline: none;
   border: none;
 }
-.ds-text-input__DFAX9n__container > input[type=number] {
+.ds-text-input__rbEY9j__container > input[type=number] {
   appearance: textfield;
 }
-.ds-text-input__DFAX9n__container > input::-webkit-search-decoration, .ds-text-input__DFAX9n__container > input::-webkit-search-cancel-button, .ds-text-input__DFAX9n__container > input::-webkit-search-results-button, .ds-text-input__DFAX9n__container > input::-webkit-search-results-decoration, .ds-text-input__DFAX9n__container > input::-webkit-inner-spin-button, .ds-text-input__DFAX9n__container > input::-webkit-outer-spin-button {
+.ds-text-input__rbEY9j__container > input::-webkit-search-decoration, .ds-text-input__rbEY9j__container > input::-webkit-search-cancel-button, .ds-text-input__rbEY9j__container > input::-webkit-search-results-button, .ds-text-input__rbEY9j__container > input::-webkit-search-results-decoration, .ds-text-input__rbEY9j__container > input::-webkit-inner-spin-button, .ds-text-input__rbEY9j__container > input::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
-.ds-text-input__DFAX9n__container:has(span.ds-text-input__DFAX9n__prefix, .ds-text-input__DFAX9n__icon) > input {
+.ds-text-input__rbEY9j__container:has(span.ds-text-input__rbEY9j__prefix, .ds-text-input__rbEY9j__icon) > input {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__DFAX9n__container span.ds-text-input__DFAX9n__prefix, .ds-text-input__DFAX9n__container span.ds-text-input__DFAX9n__suffix {
+.ds-text-input__rbEY9j__container span.ds-text-input__rbEY9j__prefix, .ds-text-input__rbEY9j__container span.ds-text-input__rbEY9j__suffix {
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-link-standalone);
 }
-.ds-text-input__DFAX9n__container .ds-text-input__DFAX9n__icon, .ds-text-input__DFAX9n__container ::slotted([slot=prefix]) {
+.ds-text-input__rbEY9j__container .ds-text-input__rbEY9j__icon, .ds-text-input__rbEY9j__container ::slotted([slot=prefix]) {
   height: 1.5rem;
   color: var(--ds-textColor-default);
 }
-.ds-text-input__DFAX9n__container .ds-text-input__DFAX9n__button {
+.ds-text-input__rbEY9j__container .ds-text-input__rbEY9j__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-versioned-css-variables/ds-versioned-css-variables.css CHANGED Viewed

@@ -77,7 +77,7 @@
   --ds-palette-blue-30: #5cd1ff;
   --ds-palette-blue-40: #1abeff;
   --ds-palette-blue-50: #009ad6;
-  --ds-palette-blue-60: #0084b8;
+  --ds-palette-blue-60: #007cad;
   --ds-palette-blue-70: #005b80;
   --ds-palette-blue-80: #053c52;
   --ds-palette-blue-90: #032330;
@@ -106,7 +106,7 @@
   --ds-palette-red-20: #fdb7b4;
   --ds-palette-red-30: #f87c77;
   --ds-palette-red-40: #f0514c;
-  --ds-palette-red-50: #d71f19;
+  --ds-palette-red-50: #e13d37;
   --ds-palette-red-60: #bd2828;
   --ds-palette-red-70: #8b2623;
   --ds-palette-red-80: #602220;
@@ -177,18 +177,33 @@
   --ds-bgColor-attention: var(--ds-palette-yellow-05);
   --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
   --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-bgColor-neutral-bold: var(--ds-palette-black-60);
+  --ds-bgColor-neutral-bold-hover: var(--ds-palette-black-70);
+  --ds-bgColor-neutral-bold-active: var(--ds-palette-black-80);
+  --ds-bgColor-info-bold: var(--ds-palette-blue-60);
+  --ds-bgColor-info-bold-hover: var(--ds-palette-blue-70);
+  --ds-bgColor-info-bold-active: var(--ds-palette-blue-80);
+  --ds-bgColor-attention-bold: var(--ds-palette-yellow-40);
+  --ds-bgColor-attention-bold-hover: var(--ds-palette-yellow-50);
+  --ds-bgColor-attention-bold-active: var(--ds-palette-yellow-60);
+  --ds-bgColor-danger-bold: var(--ds-palette-red-60);
+  --ds-bgColor-danger-bold-hover: var(--ds-palette-red-70);
+  --ds-bgColor-danger-bold-active: var(--ds-palette-red-80);
+  --ds-bgColor-success-bold: var(--ds-palette-green-60);
+  --ds-bgColor-success-bold-hover: var(--ds-palette-green-70);
+  --ds-bgColor-success-bold-active: var(--ds-palette-green-80);
   --ds-borderColor-default: var(--ds-palette-black-50);
   --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
   --ds-borderColor-black: var(--ds-palette-black-95);
   --ds-borderColor-white: var(--ds-palette-white);
-  --ds-borderColor-danger: var(--ds-palette-red-50);
-  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-danger: var(--ds-palette-red-60);
+  --ds-borderColor-success: var(--ds-palette-green-60);
   --ds-borderColor-transparent: var(--ds-overlay-black-00);
   --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
   --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
   --ds-borderColor-light: var(--ds-palette-black-20);
-  --ds-borderColor-info: var(--ds-palette-blue-50);
-  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+  --ds-borderColor-info: var(--ds-palette-blue-60);
+  --ds-borderColor-attention: var(--ds-palette-yellow-60);
   --ds-iconColor-default: var(--ds-palette-black-95);
   --ds-iconColor-default-hover: var(--ds-palette-black-80);
   --ds-iconColor-default-active: var(--ds-palette-black-70);
@@ -196,20 +211,20 @@
   --ds-iconColor-neutral-hover: var(--ds-palette-black-60);
   --ds-iconColor-neutral-active: var(--ds-palette-black-70);
   --ds-iconColor-white: var(--ds-palette-white);
-  --ds-iconColor-white-hover: var(--ds-palette-black-10);
-  --ds-iconColor-white-active: var(--ds-palette-black-20);
+  --ds-iconColor-white-hover: var(--ds-palette-black-05);
+  --ds-iconColor-white-active: var(--ds-palette-black-10);
   --ds-iconColor-primary: var(--ds-palette-mainBlue-70);
   --ds-iconColor-primary-active: var(--ds-palette-mainBlue-80);
   --ds-iconColor-primary-hover: var(--ds-palette-mainBlue-90);
   --ds-iconColor-info: var(--ds-palette-blue-60);
   --ds-iconColor-info-hover: var(--ds-palette-blue-70);
   --ds-iconColor-info-active: var(--ds-palette-blue-80);
-  --ds-iconColor-danger: var(--ds-palette-red-50);
-  --ds-iconColor-danger-hover: var(--ds-palette-red-60);
-  --ds-iconColor-danger-active: var(--ds-palette-red-70);
-  --ds-iconColor-success: var(--ds-palette-green-50);
-  --ds-iconColor-success-hover: var(--ds-palette-green-60);
-  --ds-iconColor-success-active: var(--ds-palette-green-70);
+  --ds-iconColor-danger: var(--ds-palette-red-60);
+  --ds-iconColor-danger-hover: var(--ds-palette-red-70);
+  --ds-iconColor-danger-active: var(--ds-palette-red-80);
+  --ds-iconColor-success: var(--ds-palette-green-60);
+  --ds-iconColor-success-hover: var(--ds-palette-green-70);
+  --ds-iconColor-success-active: var(--ds-palette-green-80);
   --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);
@@ -325,7 +340,7 @@
   --ds-palette-blue-30: #5cd1ff;
   --ds-palette-blue-40: #1abeff;
   --ds-palette-blue-50: #009ad6;
-  --ds-palette-blue-60: #0084b8;
+  --ds-palette-blue-60: #007cad;
   --ds-palette-blue-70: #005b80;
   --ds-palette-blue-80: #053c52;
   --ds-palette-blue-90: #032330;
@@ -354,7 +369,7 @@
   --ds-palette-red-20: #fdb7b4;
   --ds-palette-red-30: #f87c77;
   --ds-palette-red-40: #f0514c;
-  --ds-palette-red-50: #d71f19;
+  --ds-palette-red-50: #e13d37;
   --ds-palette-red-60: #bd2828;
   --ds-palette-red-70: #8b2623;
   --ds-palette-red-80: #602220;
@@ -425,18 +440,33 @@
   --ds-bgColor-attention: var(--ds-palette-yellow-05);
   --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
   --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-bgColor-neutral-bold: var(--ds-palette-black-60);
+  --ds-bgColor-neutral-bold-hover: var(--ds-palette-black-70);
+  --ds-bgColor-neutral-bold-active: var(--ds-palette-black-80);
+  --ds-bgColor-info-bold: var(--ds-palette-blue-60);
+  --ds-bgColor-info-bold-hover: var(--ds-palette-blue-70);
+  --ds-bgColor-info-bold-active: var(--ds-palette-blue-80);
+  --ds-bgColor-attention-bold: var(--ds-palette-yellow-40);
+  --ds-bgColor-attention-bold-hover: var(--ds-palette-yellow-50);
+  --ds-bgColor-attention-bold-active: var(--ds-palette-yellow-60);
+  --ds-bgColor-danger-bold: var(--ds-palette-red-60);
+  --ds-bgColor-danger-bold-hover: var(--ds-palette-red-70);
+  --ds-bgColor-danger-bold-active: var(--ds-palette-red-80);
+  --ds-bgColor-success-bold: var(--ds-palette-green-60);
+  --ds-bgColor-success-bold-hover: var(--ds-palette-green-70);
+  --ds-bgColor-success-bold-active: var(--ds-palette-green-80);
   --ds-borderColor-default: var(--ds-palette-black-50);
   --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
   --ds-borderColor-black: var(--ds-palette-black-95);
   --ds-borderColor-white: var(--ds-palette-white);
-  --ds-borderColor-danger: var(--ds-palette-red-50);
-  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-danger: var(--ds-palette-red-60);
+  --ds-borderColor-success: var(--ds-palette-green-60);
   --ds-borderColor-transparent: var(--ds-overlay-black-00);
   --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
   --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
   --ds-borderColor-light: var(--ds-palette-black-20);
-  --ds-borderColor-info: var(--ds-palette-blue-50);
-  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+  --ds-borderColor-info: var(--ds-palette-blue-60);
+  --ds-borderColor-attention: var(--ds-palette-yellow-60);
   --ds-iconColor-default: var(--ds-palette-black-95);
   --ds-iconColor-default-hover: var(--ds-palette-black-80);
   --ds-iconColor-default-active: var(--ds-palette-black-70);
@@ -444,20 +474,20 @@
   --ds-iconColor-neutral-hover: var(--ds-palette-black-60);
   --ds-iconColor-neutral-active: var(--ds-palette-black-70);
   --ds-iconColor-white: var(--ds-palette-white);
-  --ds-iconColor-white-hover: var(--ds-palette-black-10);
-  --ds-iconColor-white-active: var(--ds-palette-black-20);
+  --ds-iconColor-white-hover: var(--ds-palette-black-05);
+  --ds-iconColor-white-active: var(--ds-palette-black-10);
   --ds-iconColor-primary: var(--ds-palette-mainBlue-70);
   --ds-iconColor-primary-active: var(--ds-palette-mainBlue-80);
   --ds-iconColor-primary-hover: var(--ds-palette-mainBlue-90);
   --ds-iconColor-info: var(--ds-palette-blue-60);
   --ds-iconColor-info-hover: var(--ds-palette-blue-70);
   --ds-iconColor-info-active: var(--ds-palette-blue-80);
-  --ds-iconColor-danger: var(--ds-palette-red-50);
-  --ds-iconColor-danger-hover: var(--ds-palette-red-60);
-  --ds-iconColor-danger-active: var(--ds-palette-red-70);
-  --ds-iconColor-success: var(--ds-palette-green-50);
-  --ds-iconColor-success-hover: var(--ds-palette-green-60);
-  --ds-iconColor-success-active: var(--ds-palette-green-70);
+  --ds-iconColor-danger: var(--ds-palette-red-60);
+  --ds-iconColor-danger-hover: var(--ds-palette-red-70);
+  --ds-iconColor-danger-active: var(--ds-palette-red-80);
+  --ds-iconColor-success: var(--ds-palette-green-60);
+  --ds-iconColor-success-hover: var(--ds-palette-green-70);
+  --ds-iconColor-success-active: var(--ds-palette-green-80);
   --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);

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class DsVersionedCssVariables {
     render() {
-        return (h(Host, { key: '4e427c854860f073703da46ca90cee89d56ad810' }, h("slot", { key: '2006ffe8bd945af2c2691bf3b55f34cd219ceb5c' })));
+        return (h(Host, { key: 'ddc3a7a54c35624a26f58882aacaf0c6b7a6cc1a' }, h("slot", { key: '53e35aaf7ed521c4b817b1bf7da3bc37121a6f5f' })));
     }
     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 CHANGED Viewed

@@ -2,7 +2,7 @@
   position: absolute;
 }
-.ds-visually-hidden__DFAX9n {
+.ds-visually-hidden__rbEY9j {
   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 CHANGED Viewed

@@ -4,7 +4,7 @@ export class DsVisuallyHidden {
     dsTag = 'div';
     render() {
         const baseClass = cx('ds-visually-hidden');
-        return (h(this.dsTag, { key: 'a33a03602b2fa925a85018b580474864213b0447', class: baseClass }, h("slot", { key: 'd3c0185b5f0181925dbd65eec7df85b9bae9232e' })));
+        return (h(this.dsTag, { key: 'ff27e954569f4b987b13f02f64be333055d31015', class: baseClass }, h("slot", { key: '05ed432e72cbf6771343807b0fd2cb81c0087e59' })));
     }
     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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIcon360 {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '4e056086ecfc7d240f894df3a8b5151da0ffaf4b', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'c887a974b8ae6f08d400f2565f82c59df09946ff', 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: 'cbf5f5112f99a9fcb7bc72922922369a3631574a', 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: '54db6162e4005cc7d539e11d68b537ff84121aea', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '7138240e4cac72cec25c1a86f3fae179191ac924', 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: '2346be2c9574940f6ad0797856f16999594ed9e4', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconAccountBalance {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '04b4de05a65922d01037742b2c62f3e6b2b5695c', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '6c49d646c8f098bf2fe856a7ca115280730478d8', 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: 'e8fcc10598b7ca8bf105387e284cfea43d618306', 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: 'ccc97d42e8cbb7904031ad680a9de7d48a0c4dbd', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '16adb7ece35cee8c41a893526a4409bc0d5b7f2d', 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: '9c8c14aa36bba980520ca09ef6daaf992b11d623', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconAccountBalanceFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '339e9e78615a4a22d2ec6a2a8abcfe0355252399', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '05b7e74420f4e63fa0bc138fc3b474c8c57e1f78', 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: '4ad3d830838bb3ad4e91b181e54c374582525f55', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
+        return (h(Host, { key: '76a0c1ed8d48ac58a47ac678ca6fddd6fad997a1', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'f93690c3769ccc605c86290827ff2c3cbf3278d3', 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: 'ae1223e683b81052f47683de4f5b96147883ab20', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconAccountCircle {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '8eba055bb20e5549fe2ad17bd5293faeb77349a6', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '7b78fa9c18f259c0fbd0a9ddf26f8053878c8a4e', 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: '28eb5d01da90cd62c7031a40e0c166bf2be4f743', 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: 'a9737ea7c6aa1d668cc1467f28f693c56b8fb93a', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '182e593bfcb3117be1148aaa5e4f8a0d26abae47', 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: '664166654d57fea008ec06692250582951d502f2', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconAccountCircleFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '701c155bb49139a701687e298d43230a93fbf680', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '13ba7e448d92af4d645653a0f7010f2f847411d2', 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: '76aa0eb2f2f6303b5f583f8aa41a2a3be1482c7b', 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: '24e1aae89331a2df0876bee2b1004a854ef71903', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'edaabcb29ff8ab1560a5170aada1c01158398b69', 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: '3e7865a4e7bf07040cbec20f3a9b4458078936ff', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconAdd {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'b1b45cad63dad4968e769822269b3c1d5f32585e', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b41e882e0a5933b36daf18e3238801eb4b218a7c', 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: '46ffb019bfe97438a12a96ffc0266c603d019ffa', d: "M433-433H175v-94h258v-259h94v259h259v94H527v258h-94v-258Z" }))));
+        return (h(Host, { key: 'a3cc069919aadd8f1b2534fcfda6659132429ada', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '0b09014131aeef0d76f2065eaae93c8c6acf123a', 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: '2d1d47c8b34d25d185de93cfd26c559b8683f3d5', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconArchive {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'b222c821b1cca21a966d72ac8d132e2c607c9feb', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '736023f7f29ba8c52f77893324f3d27bef70b277', 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: '99b02588a2e7a649cc0ac1878d43e9247e7be90c', 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: '14b14e69ed1e22fb44454249995ce1681612b0c9', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'd8cc9d4898e2183da010c4afbfee0e22f3df4808', 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: '8ba4960bf7ec38827304433ff27a494643d4b05e', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconArchiveFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'fcf21a14a92e1325a5f42b4939087231af15e998', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '61826e9464f21aa5bdbebda8452478dae6d30f9d', 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: 'f1e0445d4d4f7d857bbfced8af275f7d4a5cfe2b', 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: 'cf75b9aec996173b22385227838fdd1b691ea680', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '3874ae7d2ff5338bbaea41509dd8c7762b7f6f04', 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: 'b5b1c99b009477da632d3975618cdb30b0485007', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconArrowBack {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '9684d348b52f684b45045d8f960bf572b97f2ccb', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'a73d911ff2a6424728e5a0b5b6ef1303236a1c8e', 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: 'a3c8d48546a76af90e8922a10ebd96560d9e0288', d: "m315-433 232 232-67 66-345-345 345-346 67 67-232 232h511v94H315Z" }))));
+        return (h(Host, { key: 'fbf49acb74222cc5b990d840c2c0ef65c6d234ea', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '8538122a5ea5c0becd21a89e53cb99b156d7219b', 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: '7de1681b5eca4bf69795e4c6cfb328e0ace4e515', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconArrowDownward {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'b58a0375a22b9483886a0383123ffbb41a452d16', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '5da03e83029189a236cd31018f72a83132e829e5', 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: 'b4c89138d92536cc82b0798d2237ce7d61b7112f', d: "M433-826v511L201-547l-66 67 345 345 346-345-67-67-232 232v-511h-94Z" }))));
+        return (h(Host, { key: '5d16755c9933167e9d596538c4772852165de2bc', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'd03153b8dec687060b3af9d5662757fbc61c5104', 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: '52f84e59b51c2007d471b9f93f4a04d84d679b76', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconArrowDropDown {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'f70fbc146d7894bf400d733971d06250cba95dc1', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'e33e53640ecb27fef3602c6f6bed768bbc514000', 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: '4fc3e8369081498acefa7a3432a7caa43739e01e', d: "M480-336 239-576h482L480-336Z" }))));
+        return (h(Host, { key: '89c45dccd4ab1c4a39ccc1dbc6c4ac0ad47b8b73', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'c65da4367034f16d160f562d136401b2f489f354', 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: 'e5edfb0794d75e66a0f800cd8aa8462b87140286', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconArrowDropDownCircle {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '17077546426219102a6cecea0c52c5cdaf394885', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '8c717cfc6c0c3408987bc8ca5cfe1b31669f6294', 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: 'f1a6f955bd7fcf02239e722027c12afdf7b8121b', 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: 'c6ff41de7f277d9b5e42c2af97064cc65b0c3379', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'dec00547a4602618a0728e74e19322ca126afb27', 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: 'a5097d5039cdc33d87a95b557a78bde38b816621', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconArrowDropDownCircleFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'b9f0a31208fc96cde922e7515bddf1e607eee6e7', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '9ee1d6a39c4bb814fd817c5aa0101edbfd936ec7', 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: 'b49b07cba79fc6ef9c8d8d2c3f948a6dc20b0ae0', 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: '6d0b8f4239bd6b74ec3fd89c56471b3c944865e9', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'ab51dcb48adc7e6474f5dd4104b1331b8c6de447', 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: 'd2bc6983a379843e70fa75b1dab97941b362a068', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconArrowDropUp {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '2fa364c099bf833111028fb79966aa7d22009a2e', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '04c63a635ecbb851211739b913e695ea766faa16', 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: '9771029156785e569b53d3c53705a5b46b7577ec', d: "m239-383 241-242 241 242H239Z" }))));
+        return (h(Host, { key: '78d5336bb2fabef30d0bc3055b69611be6dde7b7', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '4ffdc037d55bc82c9c938b2745356d5141c5d08c', 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: '762ce8de32ccf6c0d81d3341425bbde4cccf8221', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconArrowForward {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'f3e2340ad4bb491a19af0b45e3d46880641d607a', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '776518018e2853e75394afa04852a54493c0262a', 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: '05afff5d876bafda03e86160e9a7dde2a16d2672', d: "M645-433H135v-94h510L413-759l67-67 346 346-346 345-67-66 232-232Z" }))));
+        return (h(Host, { key: '35b8dc699b407e5beeebb8822116427c3ef07818', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'f8da46475cf9cc92795f63589c949ceeff124667', 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: '1b40db09f1fd23815362b4d471fafc47903ee9cc', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconArrowInsert {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'c91fa4fa6c9f28f838816ac3bf3226dfa24b1698', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b4b40cbe703d5c5d019746a4aa63ba1d85c28271', 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: '0af676812fe22692cbd7b1bec7327651d8448c80', d: "M711-221 316-616v353h-95v-514h515v94H383l394 395-66 67Z" }))));
+        return (h(Host, { key: 'df6ba096c3896752b86aa6d4565ebd782c591698', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b5e87cf490539347f18f3df9c5fd7a937b4ad900', 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: '7a96eb917de3fc7227f713b14a1e1866b2f1fc3a', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconArrowOutward {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '797207bbe4ee240a1fdb3f99a09af97c74dbe1db', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '24f1af29dc7e968bbff6bc0f110a71d73ee781f2', 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: '4f86f507de9e3f8c2f697e88f2156fbf12b0a7f7', d: "m250-221-67-67 395-395H224v-94h515v514h-95v-353L250-221Z" }))));
+        return (h(Host, { key: '15fd536d4a864f43fc2950ae0700535c05882cb1', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '2a43322f3d3fe86b44113f3b9da6ebbd1f13eb73', 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: '26962acf73f25e2d67cf9d94ea9349912367f0b2', 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 CHANGED Viewed

@@ -6,7 +6,7 @@ export class DsIconArrowUpward {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '81e864f56595741dbdf144dae41c85353afe3f31', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'ce4a1103540e2665a53bc19fa7271062a65eec8a', 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: '3ca25578fa22c71efc79fa0d59ebe6d00c52c97b', d: "M433-135v-510L201-413l-66-67 345-346 346 346-67 67-232-232v510h-94Z" }))));
+        return (h(Host, { key: '1feb9fc715c0ecb6d0c0861693863c146f1e8d19', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '356a58e45444157b7251f24b58f9fa33282131ed', 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: '98f49f611ec2f6e98cc3764bc1ba1269063dba1b', 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() {