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

package/dist/collection/components/01-base-components/ds-combobox/ds-combobox.css

@@ -3,7 +3,7 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  :host:not(:has(.ds-combobox__KmYz6O--full-width)) {
+  :host:not(:has(.ds-combobox__SPFJ1E--full-width)) {
     width: 20rem;
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-combobox__KmYz6O__input-container {
+.ds-combobox__SPFJ1E__input-container {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,37 +25,37 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-combobox__KmYz6O__input-container--disabled {
+.ds-combobox__SPFJ1E__input-container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-combobox__KmYz6O__input-container--disabled .ds-combobox__KmYz6O__input-container__toggle-button {
+.ds-combobox__SPFJ1E__input-container--disabled .ds-combobox__SPFJ1E__input-container__toggle-button {
   cursor: not-allowed;
 }
-.ds-combobox__KmYz6O__input-container--invalid {
+.ds-combobox__SPFJ1E__input-container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-combobox__KmYz6O__input-container--invalid:not(.ds-combobox__KmYz6O__input-container--open):not(.ds-combobox__KmYz6O__input-container--disabled):hover {
+.ds-combobox__SPFJ1E__input-container--invalid:not(.ds-combobox__SPFJ1E__input-container--open):not(.ds-combobox__SPFJ1E__input-container--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-combobox__KmYz6O__input-container--invalid:not(.ds-combobox__KmYz6O__input-container--open):not(.ds-combobox__KmYz6O__input-container--disabled):active {
+.ds-combobox__SPFJ1E__input-container--invalid:not(.ds-combobox__SPFJ1E__input-container--open):not(.ds-combobox__SPFJ1E__input-container--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-combobox__KmYz6O__input-container:active:not(.ds-combobox__KmYz6O__input-container--invalid, .ds-combobox__KmYz6O__input-container--disabled, .ds-combobox__KmYz6O__input-container--open) {
+.ds-combobox__SPFJ1E__input-container:active:not(.ds-combobox__SPFJ1E__input-container--invalid, .ds-combobox__SPFJ1E__input-container--disabled, .ds-combobox__SPFJ1E__input-container--open) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-combobox__KmYz6O__input-container:not(.ds-combobox__KmYz6O__input-container--open, .ds-combobox__KmYz6O__input-container:has(> .ds-combobox__KmYz6O__input-container__clear-button > button:focus), .ds-combobox__KmYz6O__input-container--invalid, .ds-combobox__KmYz6O__input-container--disabled):hover {
+.ds-combobox__SPFJ1E__input-container:not(.ds-combobox__SPFJ1E__input-container--open, .ds-combobox__SPFJ1E__input-container:has(> .ds-combobox__SPFJ1E__input-container__clear-button > button:focus), .ds-combobox__SPFJ1E__input-container--invalid, .ds-combobox__SPFJ1E__input-container--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-combobox__KmYz6O__input-container:has(> .ds-combobox__KmYz6O__input-container__input:focus), .ds-combobox__KmYz6O__input-container:has(> .ds-combobox__KmYz6O__input-container__clear-button > button:focus) {
+.ds-combobox__SPFJ1E__input-container:has(> .ds-combobox__SPFJ1E__input-container__input:focus), .ds-combobox__SPFJ1E__input-container:has(> .ds-combobox__SPFJ1E__input-container__clear-button > button:focus) {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-combobox__KmYz6O__input-container__input {
+.ds-combobox__SPFJ1E__input-container__input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -69,47 +69,47 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-combobox__KmYz6O__input-container__input::placeholder {
+.ds-combobox__SPFJ1E__input-container__input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-combobox__KmYz6O__input-container__input:disabled {
+.ds-combobox__SPFJ1E__input-container__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__KmYz6O__input-container__input:disabled::placeholder {
+.ds-combobox__SPFJ1E__input-container__input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__KmYz6O__input-container__input:focus {
+.ds-combobox__SPFJ1E__input-container__input:focus {
   outline: none;
 }
-.ds-combobox__KmYz6O__input-container__icon {
+.ds-combobox__SPFJ1E__input-container__icon {
   padding-left: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__KmYz6O__input-container__icon + .ds-combobox__KmYz6O__input-container__input {
+.ds-combobox__SPFJ1E__input-container__icon + .ds-combobox__SPFJ1E__input-container__input {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__KmYz6O__input-container__badge-container {
+.ds-combobox__SPFJ1E__input-container__badge-container {
   pointer-events: none;
   user-select: none;
 }
-.ds-combobox__KmYz6O__input-container__badge-container--padded {
+.ds-combobox__SPFJ1E__input-container__badge-container--padded {
   padding-right: calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall));
 }
-.ds-combobox__KmYz6O__input-container__clear-button, .ds-combobox__KmYz6O__input-container__toggle-button {
+.ds-combobox__SPFJ1E__input-container__clear-button, .ds-combobox__SPFJ1E__input-container__toggle-button {
   cursor: pointer;
 }
-.ds-combobox__KmYz6O__input-container__toggle-button {
+.ds-combobox__SPFJ1E__input-container__toggle-button {
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
-.ds-combobox__KmYz6O__input-container__toggle-button:focus {
+.ds-combobox__SPFJ1E__input-container__toggle-button:focus {
   outline: none;
 }
-.ds-combobox__KmYz6O__input-container__toggle-button__icon {
+.ds-combobox__SPFJ1E__input-container__toggle-button__icon {
   align-items: center;
   align-self: stretch;
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);
@@ -118,7 +118,7 @@
   pointer-events: none;
   padding: 0 var(--ds-spacing-2xSmall);
 }
-.ds-combobox__KmYz6O__options-container {
+.ds-combobox__SPFJ1E__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -128,11 +128,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-combobox__KmYz6O__options-container--open {
+.ds-combobox__SPFJ1E__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-combobox__KmYz6O__options-container__options {
+.ds-combobox__SPFJ1E__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -141,7 +141,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-combobox__KmYz6O__options-container__options__inner {
+.ds-combobox__SPFJ1E__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -152,7 +152,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-combobox__KmYz6O__options-container__options__inner__top-scrim, .ds-combobox__KmYz6O__options-container__options__inner__bottom-scrim {
+.ds-combobox__SPFJ1E__options-container__options__inner__top-scrim, .ds-combobox__SPFJ1E__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -162,20 +162,20 @@
   z-index: 1;
   display: none;
 }
-.ds-combobox__KmYz6O__options-container__options__inner__top-scrim--visible, .ds-combobox__KmYz6O__options-container__options__inner__bottom-scrim--visible {
+.ds-combobox__SPFJ1E__options-container__options__inner__top-scrim--visible, .ds-combobox__SPFJ1E__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-combobox__KmYz6O__options-container__options__inner__top-scrim {
+.ds-combobox__SPFJ1E__options-container__options__inner__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-combobox__KmYz6O__options-container__options__inner__top-scrim--dark {
+.ds-combobox__SPFJ1E__options-container__options__inner__top-scrim--dark {
   height: calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));
   background: none;
   margin-top: calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));
   box-shadow: var(--ds-shadow-overflow);
 }
-.ds-combobox__KmYz6O__options-container__options__inner__bottom-scrim {
+.ds-combobox__SPFJ1E__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }

package/dist/collection/components/01-base-components/ds-combobox/ds-combobox.js

@@ -667,7 +667,7 @@ export class DsCombobox extends Mixin(multipleValueFactory, disableEventsFactory
                 [`${optionsContainerClass}__options__inner__bottom-scrim--visible`]: this.hasBottomScrim,
             }), "aria-hidden": "true" }))))), this.internals?.form &&
             this.internals?.validity.valid &&
-            this.selectedOptions.map(option => h("input", { type: "hidden", name: this.dsName, value: option.dsValue, key: option.dsValue })), !!this.dsErrorText && h(DsInputValidity, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }), h(this.DsFeedback, { dsSrOnly: true, dsSrOnlyTag: "span" }, this.getFeedbackMessage())));
+            this.selectedOptions.map(option => h("input", { type: "hidden", name: this.dsName, value: option.dsValue, key: option.dsValue })), h(DsInputValidity, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }), h(this.DsFeedback, { dsSrOnly: true, dsSrOnlyTag: "span" }, this.getFeedbackMessage())));
     }
     static get is() { return "ds-combobox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-control-label/ds-control-label.css

@@ -1,4 +1,4 @@
-.ds-control-label__KmYz6O__label {
+.ds-control-label__SPFJ1E__label {
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -8,12 +8,12 @@
   color: var(--ds-textColor-default);
 }
 
-.ds-control-label__KmYz6O {
+.ds-control-label__SPFJ1E {
   font-family: var(--ds-fontFamily-body);
   display: flex;
   flex-direction: column;
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-control-label__KmYz6O:empty {
+.ds-control-label__SPFJ1E:empty {
   display: none;
 }

package/dist/collection/components/01-base-components/ds-datepicker/ds-datepicker-native/ds-datepicker-native.css

@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-datepicker-native__KmYz6O {
+.ds-datepicker-native__SPFJ1E {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,7 +25,7 @@
   width: 100%;
 }
 
-.ds-datepicker-native__KmYz6O__input {
+.ds-datepicker-native__SPFJ1E__input {
   flex: 1;
   border: none;
   outline: none;
@@ -36,53 +36,53 @@
   padding: 0 var(--ds-spacing-xSmall);
   min-width: 0;
 }
-.ds-datepicker-native__KmYz6O__input:disabled {
+.ds-datepicker-native__SPFJ1E__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-datepicker-native__KmYz6O__input::-webkit-calendar-picker-indicator {
+.ds-datepicker-native__SPFJ1E__input::-webkit-calendar-picker-indicator {
   display: none;
 }
-.ds-datepicker-native__KmYz6O__input::-webkit-clear-button {
+.ds-datepicker-native__SPFJ1E__input::-webkit-clear-button {
   display: none;
 }
 
-.ds-datepicker-native__KmYz6O__calendar-icon {
+.ds-datepicker-native__SPFJ1E__calendar-icon {
   height: 100%;
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-native__KmYz6O__calendar-icon {
+  .ds-datepicker-native__SPFJ1E__calendar-icon {
     display: none;
   }
 }
 
-.ds-datepicker-native__KmYz6O:focus-visible {
+.ds-datepicker-native__SPFJ1E: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-datepicker-native__KmYz6O:focus-within {
+.ds-datepicker-native__SPFJ1E: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-datepicker-native__KmYz6O {
+.ds-datepicker-native__SPFJ1E {
   justify-content: flex-end;
 }
-.ds-datepicker-native__KmYz6O--disabled {
+.ds-datepicker-native__SPFJ1E--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-datepicker-native__KmYz6O--invalid {
+.ds-datepicker-native__SPFJ1E--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__KmYz6O:hover:not(.ds-datepicker-native__KmYz6O--disabled, .ds-datepicker-native__KmYz6O--invalid, .ds-datepicker-native__KmYz6O:focus-within) {
+.ds-datepicker-native__SPFJ1E:hover:not(.ds-datepicker-native__SPFJ1E--disabled, .ds-datepicker-native__SPFJ1E--invalid, .ds-datepicker-native__SPFJ1E:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-datepicker-native__KmYz6O:focus-within:not(.ds-datepicker-native__KmYz6O--invalid, .ds-datepicker-native__KmYz6O--disabled) {
+.ds-datepicker-native__SPFJ1E:focus-within:not(.ds-datepicker-native__SPFJ1E--invalid, .ds-datepicker-native__SPFJ1E--disabled) {
   border-color: var(--ds-borderColor-primary);
 }

package/dist/collection/components/01-base-components/ds-datepicker/ds-datepicker-native/ds-datepicker-native.js

@@ -148,7 +148,7 @@ export class DsDatepickerNative {
                 const target = event.target;
                 this.value = target.value;
                 this.dsChange.emit(target.value);
-            }, "aria-invalid": this.dsErrorText ? 'true' : 'false', "aria-describedby": ariaDescribedbyValue, "aria-controls": this.dsAriaControls }), this.dsShowCalendarIcon && (h(this.DsButtonTag, { key: '3d2bea5fc2c8eefaba197489f3137f505a275443', class: `${nativeDatepickerClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.openDatePicker, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled, dsAriaLabel: openDatePicker(), dsInInput: true }, h(this.DsIconTag, { key: '74a3b106b345ada46b177dfbe185757b459a20fa', slot: "prefix", dsName: "calendar_month", dsAriaHidden: true })))), !!this.dsErrorText && h(this.DsInputValidityTag, { key: 'bb1c0140ef1bbe7a9ac05c3cd8ad6ed9f2cbfb9d', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-invalid": this.dsErrorText ? 'true' : 'false', "aria-describedby": ariaDescribedbyValue, "aria-controls": this.dsAriaControls }), this.dsShowCalendarIcon && (h(this.DsButtonTag, { key: '3d2bea5fc2c8eefaba197489f3137f505a275443', class: `${nativeDatepickerClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.openDatePicker, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled, dsAriaLabel: openDatePicker(), dsInInput: true }, h(this.DsIconTag, { key: '74a3b106b345ada46b177dfbe185757b459a20fa', slot: "prefix", dsName: "calendar_month", dsAriaHidden: true })))), h(this.DsInputValidityTag, { key: 'c376788b5bf28b9663dd5aa5083b3c56fb97e1a7', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get is() { return "ds-datepicker-native"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-feedback/ds-feedback.js

@@ -25,7 +25,7 @@ export class DsFeedback {
     render() {
         const Elem = this.dsSrOnly ? this.DsVisuallyHidden : Fragment;
         const elemProps = this.dsSrOnly ? { dsTag: this.dsSrOnlyTag } : {};
-        return (h(this.dsTag, { key: '3a17d1404ef049a6ab157909f133d255009d00d9', ...ifDefined('role', this.dsRole), ...ifDefined('aria-live', this.dsAriaLive), ...ifDefined('aria-atomic', this.dsAriaAtomic) }, h(Elem, { key: '2087350f17c56345cdc9be138bb73af13ea1b39f', ...elemProps }, h("slot", { key: '76104b1efea3a012885e990f5ee842dafa142737' }))));
+        return (h(this.dsTag, { key: '73d84dd74b18cbd300fe442625ea0fa17fc8bd5b', ...ifDefined('role', this.dsRole), ...ifDefined('aria-live', this.dsAriaLive), ...ifDefined('aria-atomic', this.dsAriaAtomic ? 'true' : undefined) }, h(Elem, { key: 'ff82e11fd78888426652adb4a31028607dd23419', ...elemProps }, h("slot", { key: 'fb7c324a80c1d5d579fc973d99efc4c693bc32d9' }))));
     }
     static get is() { return "ds-feedback"; }
     static get encapsulation() { return "scoped"; }
@@ -179,4 +179,4 @@ export class DsFeedback {
     }
     static get elementRef() { return "el"; }
 }
-declareComponentDependencies([h("ds-ds-visually-hidden", null)]);
+declareComponentDependencies([h("ds-visually-hidden", null)]);

package/dist/collection/components/01-base-components/ds-grid/ds-grid.css

@@ -1,18 +1,18 @@
-.ds-grid__KmYz6O.ds-grid__KmYz6O--container {
+.ds-grid__SPFJ1E.ds-grid__SPFJ1E--container {
   max-width: calc(var(--ds-breakpoint-xLarge) - var(--ds-spacing-layout-large));
   margin: 0 var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O--container {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E--container {
     margin: 0 var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 90rem) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O--container {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E--container {
     margin: 0 auto;
   }
 }
-.ds-grid__KmYz6O.ds-grid__KmYz6O__flex {
+.ds-grid__SPFJ1E.ds-grid__SPFJ1E__flex {
   display: flex;
   flex-flow: wrap;
   min-width: 0;
@@ -20,86 +20,86 @@
   gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O__flex {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__flex {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O__flex {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__flex {
     gap: var(--ds-spacing-layout-small);
   }
 }
-.ds-grid__KmYz6O.ds-grid__KmYz6O__flex:not(.ds-grid__KmYz6O.ds-grid__KmYz6O__flex--container) {
+.ds-grid__SPFJ1E.ds-grid__SPFJ1E__flex:not(.ds-grid__SPFJ1E.ds-grid__SPFJ1E__flex--container) {
   width: calc(100% * var(--ds-size-mobile) / var(--ds-parent-size-mobile) - (var(--ds-parent-size-mobile) - var(--ds-size-mobile)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-mobile));
 }
 @media (min-width: 30rem) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O__flex:not(.ds-grid__KmYz6O.ds-grid__KmYz6O__flex--container) {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__flex:not(.ds-grid__SPFJ1E.ds-grid__SPFJ1E__flex--container) {
     width: calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-xSmall) / var(--ds-parent-size-tablet));
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O__flex:not(.ds-grid__KmYz6O.ds-grid__KmYz6O__flex--container) {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__flex:not(.ds-grid__SPFJ1E.ds-grid__SPFJ1E__flex--container) {
     width: calc(100% * var(--ds-size-desktop) / var(--ds-parent-size-desktop) - (var(--ds-parent-size-desktop) - var(--ds-size-desktop)) * var(--ds-spacing-layout-small) / var(--ds-parent-size-desktop));
   }
 }
-.ds-grid__KmYz6O.ds-grid__KmYz6O__grid.ds-grid__KmYz6O--container {
+.ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid.ds-grid__SPFJ1E--container {
   display: grid;
   grid-template-columns: repeat(var(--ds-columns-mobile), 1fr);
   gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O__grid.ds-grid__KmYz6O--container {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid.ds-grid__SPFJ1E--container {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O__grid.ds-grid__KmYz6O--container {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid.ds-grid__SPFJ1E--container {
     gap: var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O__grid.ds-grid__KmYz6O--container {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid.ds-grid__SPFJ1E--container {
     grid-template-columns: repeat(var(--ds-columns-tablet), 1fr);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O__grid.ds-grid__KmYz6O--container {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid.ds-grid__SPFJ1E--container {
     grid-template-columns: repeat(var(--ds-columns-desktop), 1fr);
   }
 }
-.ds-grid__KmYz6O.ds-grid__KmYz6O__grid {
+.ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid {
   grid-column: span var(--ds-size-mobile);
   grid-row: span var(--ds-row-span-mobile, 1);
 }
 @supports (grid-column: span var(--ds-size-mobile)) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O__grid[style*="--ds-size-mobile: -1"] {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid[style*="--ds-size-mobile: -1"] {
     grid-column: 1/-1;
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O__grid {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid {
     grid-column: span var(--ds-size-tablet);
     grid-row: span var(--ds-row-span-tablet, 1);
   }
   @supports (grid-column: span var(--ds-size-tablet)) {
-    .ds-grid__KmYz6O.ds-grid__KmYz6O__grid[style*="--ds-size-tablet: -1"] {
+    .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid[style*="--ds-size-tablet: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__KmYz6O.ds-grid__KmYz6O__grid:not([style*="--ds-size-tablet: -1"]) {
+    .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid:not([style*="--ds-size-tablet: -1"]) {
       grid-column: span var(--ds-size-tablet);
     }
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__KmYz6O.ds-grid__KmYz6O__grid {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid {
     grid-column: span var(--ds-size-desktop);
     grid-row: span var(--ds-row-span-desktop, 1);
   }
   @supports (grid-column: span var(--ds-size-desktop)) {
-    .ds-grid__KmYz6O.ds-grid__KmYz6O__grid[style*="--ds-size-desktop: -1"] {
+    .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid[style*="--ds-size-desktop: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__KmYz6O.ds-grid__KmYz6O__grid:not([style*="--ds-size-desktop: -1"]) {
+    .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid:not([style*="--ds-size-desktop: -1"]) {
       grid-column: span var(--ds-size-desktop);
     }
   }

package/dist/collection/components/01-base-components/ds-group-label/ds-group-label.css

@@ -1,4 +1,4 @@
-.ds-group-label__KmYz6O__label {
+.ds-group-label__SPFJ1E__label {
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -8,10 +8,10 @@
   color: var(--ds-textColor-default);
 }
 
-.ds-group-label__KmYz6O {
+.ds-group-label__SPFJ1E {
   display: flex;
   flex-direction: column;
 }
-.ds-group-label__KmYz6O:empty {
+.ds-group-label__SPFJ1E:empty {
   display: none;
 }

package/dist/collection/components/01-base-components/ds-icon/ds-icon.css

@@ -2,9 +2,9 @@
   display: flex;
 }
 
-.ds-icon__KmYz6O--container {
+.ds-icon__SPFJ1E--container {
   display: flex;
 }
-.ds-icon__KmYz6O--hidden {
+.ds-icon__SPFJ1E--hidden {
   display: none;
 }

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

@@ -4,6 +4,7 @@ import { remToPx, transformTagName, omit } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { ariaDeprecationFactory } from "../../00-foundations/factories/ariaDeprecationFactory";
+import { resolveIconColour } from "../../00-foundations/icons/iconList";
 const isValidSize = (value) => {
     return /^(\d+(\.\d+)?|\.\d+)rem$/.test(value);
 };
@@ -45,8 +46,7 @@ export class DsIcon extends Mixin(ariaDeprecationFactory) {
         };
     }
     getIconColour() {
-        const colour = this.dsColour ? `var(--${this.dsColour})` : 'currentColor';
-        return colour;
+        return this.dsColour ? `var(--${resolveIconColour(this.dsColour)})` : 'currentColor';
     }
     render() {
         const baseClass = cx('ds-icon');
@@ -57,9 +57,9 @@ export class DsIcon extends Mixin(ariaDeprecationFactory) {
         const iconRole = this.dsRole ?? this.inheritedAttributes['role'];
         const iconAriaHidden = String(this.dsAriaHidden ?? true);
         const restAttributes = omit(this.inheritedAttributes, ['aria-label', 'aria-labelledby', 'role', 'aria-hidden']);
-        return (h(Fragment, { key: '39ef48a99a38830596efa25bbc72b7dc9e799f2b' }, h("span", { key: 'ddef523b2c17ac5878c994c8fe19a0326577f043', class: classNames(`${baseClass}--container`, {
+        return (h(Fragment, { key: 'de2643201428967586d53f6ab1f745b0f2bbc389' }, h("span", { key: 'f857fb52f634f1c7a98528f86c105a4a82118726', class: classNames(`${baseClass}--container`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), "aria-hidden": iconAriaHidden }, h(IconTag, { key: '60e29bd32c1dc1dae67e50ce65995d008f0d4b66', dsSize: this.dsCustomSize ? this.dsCustomSize : remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: iconRole, dsTitle: this.dsTitle, dsAriaLabel: iconAriaLabel, dsAriaLabelledby: iconAriaLabelledby, ...restAttributes }))));
+            }), "aria-hidden": iconAriaHidden }, h(IconTag, { key: '2349b20e55450d38779e5776bbf1f51413136a27', dsSize: this.dsCustomSize ? this.dsCustomSize : remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: iconRole, dsTitle: this.dsTitle, dsAriaLabel: iconAriaLabel, dsAriaLabelledby: iconAriaLabelledby, ...restAttributes }))));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,6 +16,18 @@ export const VisibleTitle = {
         dsTitle: 'Icon',
     },
 };
+export const Colour = {
+    args: {
+        dsName: 'archive',
+        dsColour: 'danger',
+    },
+};
+export const ColourWithFullVariableName = {
+    args: {
+        dsName: 'archive',
+        dsColour: 'ds-iconColor-danger',
+    },
+};
 export const CustomTagName = {
     render: () => html `<custom-ds-icon ds-name="archive"></custom-ds-icon>`,
 };

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

@@ -1,5 +1,4 @@
-import { icons } from "../../../00-foundations/icons/iconList";
-import { getPaletteCssVariables } from "../../../00-foundations/colours/utils";
+import { icons, colourNames } from "../../../00-foundations/icons/iconList";
 import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
 const meta = {
     title: 'Base Components/Icon',
@@ -12,7 +11,7 @@ const meta = {
             },
         },
         dsColour: {
-            options: getPaletteCssVariables().map(({ name }) => name),
+            options: [...colourNames],
             control: {
                 type: 'select',
             },
@@ -34,7 +33,7 @@ export const Default = {
 export const Playground = {
     args: {
         ...Default.args,
-        dsColour: 'primary',
+        dsColour: 'default',
         dsTitle: 'Icon',
     },
 };

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

@@ -1,20 +1,20 @@
-.ds-input-validity__KmYz6O {
+.ds-input-validity__SPFJ1E {
   display: flex;
   align-items: center;
   margin-top: var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-input-validity__KmYz6O--error {
+.ds-input-validity__SPFJ1E--error {
   color: var(--ds-textColor-danger);
 }
-.ds-input-validity__KmYz6O--success {
+.ds-input-validity__SPFJ1E--success {
   color: var(--ds-textColor-success);
 }
-.ds-input-validity__KmYz6O__icon {
+.ds-input-validity__SPFJ1E__icon {
   display: block;
   height: 1.5rem;
 }
-.ds-input-validity__KmYz6O small {
+.ds-input-validity__SPFJ1E small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);

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

@@ -13,7 +13,7 @@ export class DsInputValidity extends Mixin(ariaDeprecationFactory) {
     dsText;
     dsType = 'error';
     dsRole = 'none';
-    dsAriaLive = 'polite';
+    dsAriaLive = 'assertive';
     dsAriaAtomic = 'true';
     dsHasFeedback = true;
     identifier;
@@ -61,7 +61,7 @@ export class DsInputValidity extends Mixin(ariaDeprecationFactory) {
             : {
                 role: resolvedRole,
             };
-        return (h(Elem, { key: '5d6bbdd4a499a2ee85b49ddf2497d166cd301c56', ...elemProps, ...restAttributes }, h("slot", { key: 'd577f1428c892105a1f9057b5c122625e7e0312a' }), this.dsText && (h("div", { key: '78f9c1672919c75b4270c511834d7ee34ed26c01', class: classes }, h(this.DsIcon, { key: '6edbb889afec8aa724ab8bb2e651530f8f65d7d8', class: "ds-input-validity__icon", dsColour: iconColour, dsName: icon }), h("small", { key: '3b69dcc52202453c832f375723de5cb147a8e24b', id: this.identifier }, this.dsText)))));
+        return (h(Elem, { key: '1f12c53e3659268e5f47ee706d2a361ae12b7f8c', ...elemProps, ...restAttributes }, h("slot", { key: '8216383059b32415cfd1017c333834bd4189feeb' }), this.dsText && (h("div", { key: 'be55937e559bc4e8a9388172c788df594c9e8c54', class: classes }, h(this.DsIcon, { key: '2a825456b67fb15c49c443f1dd4d6bb50cd9d77e', class: "ds-input-validity__icon", dsColour: iconColour, dsName: icon }), h("small", { key: '551c85616e7aa0c4c30b62a554ad5ef531cafa6c', id: this.identifier }, this.dsText)))));
     }
     static get is() { return "ds-input-validity"; }
     static get originalStyleUrls() {
@@ -153,7 +153,7 @@ export class DsInputValidity extends Mixin(ariaDeprecationFactory) {
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-aria-live",
-                "defaultValue": "'polite'"
+                "defaultValue": "'assertive'"
             },
             "dsAriaAtomic": {
                 "type": "string",