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

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

@@ -1,4 +1,4 @@
-.ds-chip-group__oSBnIJ__chips {
+.ds-chip-group__SPFJ1E__chips {
   display: inline-flex;
   flex-flow: row wrap;
   gap: var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);

package/dist/collection/components/01-base-components/ds-chip-group/ds-chip-group.js

@@ -147,7 +147,7 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
         const ariaDescribedBy = this.dsAriaDescribedby || attrAriaDescribedBy || [!!this.dsAssistiveText && assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
         const errorTextId = `${this.dsId}-error-text`;
-        return (h("div", { key: '33eb366e2d70716997ffd5b119818a7be52db5af', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: '917e6f249b06f09a8083ae76685bf1f7371e4d74', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: 'c4c04b11a8deb40a6db522359dcd7e29742b5d37', name: "label" }), h("slot", { key: 'b3b0d16ebf31f21fece76a3fbdf4caa5ff3fc855', name: "assistiveText" })), h("div", { key: '60c9a3553793e6b04458fbc1783a6e9a90c6c15b', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '11441ab72ee4fabec90844ae693621cffeba8ac0' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), !!this.dsErrorText && h(this.DsInputValidity, { key: '6a0767d0c03d129b3e9a6b2dbd8b2d44f869fc90', id: errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })));
+        return (h("div", { key: '3d997105e24947a53a36e592319a44ebc722f9f5', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: '23b0f596dc6ab52eeb6f5a5672438e3b1480c51a', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: 'de5b26bea865bae644051c906246429f13311f5c', name: "label" }), h("slot", { key: '73e8e3fce131d9425363e1923f9c5d5edb32c889', name: "assistiveText" })), h("div", { key: '10fa94cd28f8a7ea592129acbd3469beaf642ff2', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '2f464bd8dabc4f00a83e4ec33fc3a13da70663e0' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), h(this.DsInputValidity, { key: '961f85dd4e0458cfbc991e280ab69158480209a4', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get is() { return "ds-chip-group"; }
     static get encapsulation() { return "scoped"; }
@@ -381,7 +381,8 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
                         "DsChipClickEvent": {
                             "location": "import",
                             "path": "../ds-chip/ds-chip",
-                            "id": "src/components/01-base-components/ds-chip/ds-chip.tsx::DsChipClickEvent"
+                            "id": "src/components/01-base-components/ds-chip/ds-chip.tsx::DsChipClickEvent",
+                            "referenceLocation": "DsChipClickEvent"
                         }
                     }
                 }
@@ -402,7 +403,8 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../..",
-                            "id": "src/index.ts::DsSubmitInvalidEvent"
+                            "id": "src/index.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -423,7 +425,8 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../..",
-                            "id": "src/index.ts::DsValidityEvent"
+                            "id": "src/index.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }

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__oSBnIJ--full-width)) {
+  :host:not(:has(.ds-combobox__SPFJ1E--full-width)) {
     width: 20rem;
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-combobox__oSBnIJ__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__oSBnIJ__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__oSBnIJ__input-container--disabled .ds-combobox__oSBnIJ__input-container__toggle-button {
+.ds-combobox__SPFJ1E__input-container--disabled .ds-combobox__SPFJ1E__input-container__toggle-button {
   cursor: not-allowed;
 }
-.ds-combobox__oSBnIJ__input-container--invalid {
+.ds-combobox__SPFJ1E__input-container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-combobox__oSBnIJ__input-container--invalid:not(.ds-combobox__oSBnIJ__input-container--open):not(.ds-combobox__oSBnIJ__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__oSBnIJ__input-container--invalid:not(.ds-combobox__oSBnIJ__input-container--open):not(.ds-combobox__oSBnIJ__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__oSBnIJ__input-container:active:not(.ds-combobox__oSBnIJ__input-container--invalid, .ds-combobox__oSBnIJ__input-container--disabled, .ds-combobox__oSBnIJ__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__oSBnIJ__input-container:not(.ds-combobox__oSBnIJ__input-container--open, .ds-combobox__oSBnIJ__input-container:has(> .ds-combobox__oSBnIJ__input-container__clear-button > button:focus), .ds-combobox__oSBnIJ__input-container--invalid, .ds-combobox__oSBnIJ__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__oSBnIJ__input-container:has(> .ds-combobox__oSBnIJ__input-container__input:focus), .ds-combobox__oSBnIJ__input-container:has(> .ds-combobox__oSBnIJ__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__oSBnIJ__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__oSBnIJ__input-container__input::placeholder {
+.ds-combobox__SPFJ1E__input-container__input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-combobox__oSBnIJ__input-container__input:disabled {
+.ds-combobox__SPFJ1E__input-container__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__oSBnIJ__input-container__input:disabled::placeholder {
+.ds-combobox__SPFJ1E__input-container__input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__oSBnIJ__input-container__input:focus {
+.ds-combobox__SPFJ1E__input-container__input:focus {
   outline: none;
 }
-.ds-combobox__oSBnIJ__input-container__icon {
+.ds-combobox__SPFJ1E__input-container__icon {
   padding-left: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__oSBnIJ__input-container__icon + .ds-combobox__oSBnIJ__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__oSBnIJ__input-container__badge-container {
+.ds-combobox__SPFJ1E__input-container__badge-container {
   pointer-events: none;
   user-select: none;
 }
-.ds-combobox__oSBnIJ__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__oSBnIJ__input-container__clear-button, .ds-combobox__oSBnIJ__input-container__toggle-button {
+.ds-combobox__SPFJ1E__input-container__clear-button, .ds-combobox__SPFJ1E__input-container__toggle-button {
   cursor: pointer;
 }
-.ds-combobox__oSBnIJ__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__oSBnIJ__input-container__toggle-button:focus {
+.ds-combobox__SPFJ1E__input-container__toggle-button:focus {
   outline: none;
 }
-.ds-combobox__oSBnIJ__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__oSBnIJ__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__oSBnIJ__options-container--open {
+.ds-combobox__SPFJ1E__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-combobox__oSBnIJ__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__oSBnIJ__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__oSBnIJ__options-container__options__inner__top-scrim, .ds-combobox__oSBnIJ__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__oSBnIJ__options-container__options__inner__top-scrim--visible, .ds-combobox__oSBnIJ__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__oSBnIJ__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__oSBnIJ__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__oSBnIJ__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"; }
@@ -1350,7 +1350,8 @@ export class DsCombobox extends Mixin(multipleValueFactory, disableEventsFactory
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -1371,7 +1372,8 @@ export class DsCombobox extends Mixin(multipleValueFactory, disableEventsFactory
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }

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

@@ -1,4 +1,4 @@
-.ds-control-label__oSBnIJ__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__oSBnIJ {
+.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__oSBnIJ:empty {
+.ds-control-label__SPFJ1E:empty {
   display: none;
 }

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

@@ -39,7 +39,7 @@ export class DsControlLabel {
     };
     render() {
         const baseClass = cx('ds-control-label');
-        return (h("div", { key: '0f1c7f883508f0e41979c62e7af17ac17d83435e', class: baseClass }, h("slot", { key: '27901cd69a1eda41a9656e71d3eab3c1734da262', name: "label" }, this.dsLabel && (h("label", { key: '04ac08241f870359567f60c473228250970e2154', class: `${baseClass}__label`, htmlFor: this.dsHtmlFor, id: this.dsId, ...this.inheritedAttributes }, this.getLabelText()))), h("slot", { key: '8e4cf929955ca530c1d3bca5540a6027d65ceda0', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: '8c789ea21fe1256ed47bfb84d4047bf5614f45ab', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }), this.dsVisuallyHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: 'eaa33acaff899b52870445454d96322aa75873dc', id: this.dsVisuallyHiddenAssistiveTextId, dsTag: "span" }, this.dsVisuallyHiddenAssistiveText)))));
+        return (h("div", { key: 'fab508f4e3fa50aac9e734414eaa1f73c4483107', class: baseClass }, h("slot", { key: 'e483813e2f15ee7410400149ea53807f2f0f15ef', name: "label" }, this.dsLabel && (h("label", { key: 'af75b193d8fc93e60ed5e4c60ce5f18cf7a93552', class: `${baseClass}__label`, htmlFor: this.dsHtmlFor, id: this.dsId, ...this.inheritedAttributes }, this.getLabelText()))), h("slot", { key: '50194ab5f50307640b651281ba4f9827957b026c', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: 'cdd90c6b958c5234479e1eda45cf7a57bec439f3', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }), this.dsVisuallyHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: 'feeee3fe0deb641b92692c2fb0940fc27ccec957', id: this.dsVisuallyHiddenAssistiveTextId, dsTag: "span" }, this.dsVisuallyHiddenAssistiveText)))));
     }
     static get is() { return "ds-control-label"; }
     static get originalStyleUrls() {

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__oSBnIJ {
+.ds-datepicker-native__SPFJ1E {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,7 +25,7 @@
   width: 100%;
 }
 
-.ds-datepicker-native__oSBnIJ__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__oSBnIJ__input:disabled {
+.ds-datepicker-native__SPFJ1E__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-datepicker-native__oSBnIJ__input::-webkit-calendar-picker-indicator {
+.ds-datepicker-native__SPFJ1E__input::-webkit-calendar-picker-indicator {
   display: none;
 }
-.ds-datepicker-native__oSBnIJ__input::-webkit-clear-button {
+.ds-datepicker-native__SPFJ1E__input::-webkit-clear-button {
   display: none;
 }
 
-.ds-datepicker-native__oSBnIJ__calendar-icon {
+.ds-datepicker-native__SPFJ1E__calendar-icon {
   height: 100%;
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-native__oSBnIJ__calendar-icon {
+  .ds-datepicker-native__SPFJ1E__calendar-icon {
     display: none;
   }
 }
 
-.ds-datepicker-native__oSBnIJ: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__oSBnIJ: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__oSBnIJ {
+.ds-datepicker-native__SPFJ1E {
   justify-content: flex-end;
 }
-.ds-datepicker-native__oSBnIJ--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__oSBnIJ--invalid {
+.ds-datepicker-native__SPFJ1E--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__oSBnIJ:hover:not(.ds-datepicker-native__oSBnIJ--disabled, .ds-datepicker-native__oSBnIJ--invalid, .ds-datepicker-native__oSBnIJ: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__oSBnIJ:focus-within:not(.ds-datepicker-native__oSBnIJ--invalid, .ds-datepicker-native__oSBnIJ--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

@@ -137,10 +137,10 @@ export class DsDatepickerNative {
         const nativeDatepickerClass = cx('ds-datepicker-native');
         const DsControlLabel = transformTagName('ds-control-label', 'ds-datepicker-native', this.el);
         const ariaDescribedbyValue = [this.dsAriaDescribedby, this.dsErrorText ? this.inputValidityId : null].filter(Boolean).join(' ') || undefined;
-        return (h("div", { key: '385fa642af3eafcfe099263809969b77cb00ae52' }, h(DsControlLabel, { key: '48e3db77e36ce35f1b53c0d8764ad9bb24598ac8', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: 'ae71f79a5a2c40b355da724aa9713bf39e5c8794', name: "label" })), h("div", { key: '5ee467bb14b33f4296f088a0bc295be1769ac1cd', class: classNames(`${nativeDatepickerClass}`, {
+        return (h("div", { key: '42127d1127b4f84cbb750188fc83fb6ea502c0e3' }, h(DsControlLabel, { key: '5865a9d48cbcad2d63c4ec9f787dd9fcb2ecac8b', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: 'be2f3cdf919e28bae320de31c0802056b42ffa0a', name: "label" })), h("div", { key: '830492eef5b3fc94c136b405bb0139b1f5c2632c', class: classNames(`${nativeDatepickerClass}`, {
                 [`${nativeDatepickerClass}--disabled`]: this.dsDisabled,
                 [`${nativeDatepickerClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("input", { key: 'd4512d05dacda7d7f032551ae81eca5dcc13a16f', ref: el => {
+            }) }, h("input", { key: 'ad2ab2470878ae939aa262809bb3e8278bb44ecf', ref: el => {
                 this.nativeDateInputRef = el;
                 if (el)
                     el.value = this.value;
@@ -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: '257ba6500ba05d8e4d734fe566866a7665b6e2e1', 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: 'ad06297d1ec157ee0471f3e147a28a86178b24ac', slot: "prefix", dsName: "calendar_month", dsAriaHidden: true })))), !!this.dsErrorText && h(this.DsInputValidityTag, { key: '71a26b5aeba7620f1d8a98f589112924dada2b73', 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"; }
@@ -455,7 +455,8 @@ export class DsDatepickerNative {
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }
@@ -476,7 +477,8 @@ export class DsDatepickerNative {
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }

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

@@ -392,7 +392,8 @@ export class DsDatepicker {
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -413,7 +414,8 @@ export class DsDatepicker {
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }

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: '50ac4bad5a42c798447528c2c9362f4f48433d29', ...ifDefined('role', this.dsRole), ...ifDefined('aria-live', this.dsAriaLive), ...ifDefined('aria-atomic', this.dsAriaAtomic) }, h(Elem, { key: '168ece36a8b76171d1fece9dada42b9d1f10f8b4', ...elemProps }, h("slot", { key: '07c1dac99b1ebc0f65d41e39d13fc2372f3ddde3' }))));
+        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__oSBnIJ.ds-grid__oSBnIJ--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__oSBnIJ.ds-grid__oSBnIJ--container {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E--container {
     margin: 0 var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 90rem) {
-  .ds-grid__oSBnIJ.ds-grid__oSBnIJ--container {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E--container {
     margin: 0 auto;
   }
 }
-.ds-grid__oSBnIJ.ds-grid__oSBnIJ__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__oSBnIJ.ds-grid__oSBnIJ__flex {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__flex {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__oSBnIJ.ds-grid__oSBnIJ__flex {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__flex {
     gap: var(--ds-spacing-layout-small);
   }
 }
-.ds-grid__oSBnIJ.ds-grid__oSBnIJ__flex:not(.ds-grid__oSBnIJ.ds-grid__oSBnIJ__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__oSBnIJ.ds-grid__oSBnIJ__flex:not(.ds-grid__oSBnIJ.ds-grid__oSBnIJ__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__oSBnIJ.ds-grid__oSBnIJ__flex:not(.ds-grid__oSBnIJ.ds-grid__oSBnIJ__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__oSBnIJ.ds-grid__oSBnIJ__grid.ds-grid__oSBnIJ--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__oSBnIJ.ds-grid__oSBnIJ__grid.ds-grid__oSBnIJ--container {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid.ds-grid__SPFJ1E--container {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__oSBnIJ.ds-grid__oSBnIJ__grid.ds-grid__oSBnIJ--container {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid.ds-grid__SPFJ1E--container {
     gap: var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__oSBnIJ.ds-grid__oSBnIJ__grid.ds-grid__oSBnIJ--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__oSBnIJ.ds-grid__oSBnIJ__grid.ds-grid__oSBnIJ--container {
+  .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid.ds-grid__SPFJ1E--container {
     grid-template-columns: repeat(var(--ds-columns-desktop), 1fr);
   }
 }
-.ds-grid__oSBnIJ.ds-grid__oSBnIJ__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__oSBnIJ.ds-grid__oSBnIJ__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__oSBnIJ.ds-grid__oSBnIJ__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__oSBnIJ.ds-grid__oSBnIJ__grid[style*="--ds-size-tablet: -1"] {
+    .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid[style*="--ds-size-tablet: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__oSBnIJ.ds-grid__oSBnIJ__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__oSBnIJ.ds-grid__oSBnIJ__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__oSBnIJ.ds-grid__oSBnIJ__grid[style*="--ds-size-desktop: -1"] {
+    .ds-grid__SPFJ1E.ds-grid__SPFJ1E__grid[style*="--ds-size-desktop: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__oSBnIJ.ds-grid__oSBnIJ__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-grid/ds-grid.js

@@ -50,7 +50,7 @@ export class DsGrid {
             [`${baseClass}--container`]: this.dsContainer,
             [`${baseClass}__${this.dsType}`]: this.dsType,
         });
-        return (h(Host, { key: '2f892c8bb864e09364d606537c52129472986f51', class: classes, style: {
+        return (h(Host, { key: 'e22dd69ae36ed8ef509f200ea4694968ba64d62a', class: classes, style: {
                 ...(this.dsType === 'flex'
                     ? {
                         '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
@@ -79,7 +79,7 @@ export class DsGrid {
                         '--ds-row-span-tablet': this.dsRowSpanTablet ? `${this.dsRowSpanTablet}` : undefined,
                         '--ds-row-span-desktop': this.dsRowSpanDesktop ? `${this.dsRowSpanDesktop}` : undefined,
                     }),
-            } }, h("slot", { key: 'c3d67b61b4c58df1adbb7f2e31175c84d823f98c' })));
+            } }, h("slot", { key: '94bd9ab1bfcef2656e9ace5ac04c6d4505bf9585' })));
     }
     static get is() { return "ds-grid"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,4 @@
-.ds-group-label__oSBnIJ__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__oSBnIJ {
+.ds-group-label__SPFJ1E {
   display: flex;
   flex-direction: column;
 }
-.ds-group-label__oSBnIJ:empty {
+.ds-group-label__SPFJ1E:empty {
   display: none;
 }