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

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

@@ -1,4 +1,4 @@
-.ds-option__oSBnIJ {
+.ds-option__KmYz6O {
   display: flex;
   align-items: center;
   justify-content: normal;
@@ -13,37 +13,37 @@
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-.ds-option__oSBnIJ:not(.ds-option__oSBnIJ--multiple) {
+.ds-option__KmYz6O:not(.ds-option__KmYz6O--multiple) {
   justify-content: space-between;
 }
-.ds-option__oSBnIJ--hidden {
+.ds-option__KmYz6O--hidden {
   display: none;
 }
-.ds-option__oSBnIJ--disabled {
+.ds-option__KmYz6O--disabled {
   cursor: not-allowed;
   user-select: none;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__oSBnIJ:hover:not(.ds-option__oSBnIJ--disabled) {
+.ds-option__KmYz6O:hover:not(.ds-option__KmYz6O--disabled) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-option__oSBnIJ:active:not(.ds-option__oSBnIJ--disabled) {
+.ds-option__KmYz6O:active:not(.ds-option__KmYz6O--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-option__oSBnIJ--active {
+.ds-option__KmYz6O--active {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.ds-option__oSBnIJ--active.ds-option__oSBnIJ--selected:not(.ds-option__oSBnIJ--multiple) {
+.ds-option__KmYz6O--active.ds-option__KmYz6O--selected:not(.ds-option__KmYz6O--multiple) {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.ds-option__oSBnIJ--multiple.ds-option__oSBnIJ--disabled {
+.ds-option__KmYz6O--multiple.ds-option__KmYz6O--disabled {
   color: var(--ds-textColor-default);
 }
-.ds-option__oSBnIJ--multiple .ds-option__oSBnIJ__checkbox {
+.ds-option__KmYz6O--multiple .ds-option__KmYz6O__checkbox {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -56,44 +56,44 @@
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-option__oSBnIJ--multiple.ds-option__oSBnIJ--disabled .ds-option__oSBnIJ__checkbox {
+.ds-option__KmYz6O--multiple.ds-option__KmYz6O--disabled .ds-option__KmYz6O__checkbox {
   border-color: var(--ds-borderColor-transparent);
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-option__oSBnIJ--multiple.ds-option__oSBnIJ--disabled:not(.ds-option__oSBnIJ--selected) .ds-option__oSBnIJ__checkbox {
+.ds-option__KmYz6O--multiple.ds-option__KmYz6O--disabled:not(.ds-option__KmYz6O--selected) .ds-option__KmYz6O__checkbox {
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-option__oSBnIJ--selected .ds-option__oSBnIJ__checkbox {
+.ds-option__KmYz6O--selected .ds-option__KmYz6O__checkbox {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
   color: var(--ds-textColor-white);
   padding: var(--ds-spacing-4xSmall);
 }
-.ds-option__oSBnIJ--selected:not(.ds-option__oSBnIJ--multiple) {
+.ds-option__KmYz6O--selected:not(.ds-option__KmYz6O--multiple) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
 }
-.ds-option__oSBnIJ--selected:not(.ds-option__oSBnIJ--multiple).ds-option__oSBnIJ--disabled {
+.ds-option__KmYz6O--selected:not(.ds-option__KmYz6O--multiple).ds-option__KmYz6O--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__oSBnIJ--selected:not(.ds-option__oSBnIJ--multiple) .ds-option__oSBnIJ__description {
+.ds-option__KmYz6O--selected:not(.ds-option__KmYz6O--multiple) .ds-option__KmYz6O__description {
   color: var(--ds-textColor-white);
 }
-.ds-option__oSBnIJ--selected:not(.ds-option__oSBnIJ--multiple) .ds-option__oSBnIJ__check-icon {
+.ds-option__KmYz6O--selected:not(.ds-option__KmYz6O--multiple) .ds-option__KmYz6O__check-icon {
   visibility: visible;
   color: var(--ds-textColor-white);
 }
-.ds-option__oSBnIJ--selected:not(.ds-option__oSBnIJ--multiple).ds-option__oSBnIJ--disabled .ds-option__oSBnIJ__check-icon {
+.ds-option__KmYz6O--selected:not(.ds-option__KmYz6O--multiple).ds-option__KmYz6O--disabled .ds-option__KmYz6O__check-icon {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__oSBnIJ--selected:not(.ds-option__oSBnIJ--multiple):hover:not(.ds-option__oSBnIJ--disabled) {
+.ds-option__KmYz6O--selected:not(.ds-option__KmYz6O--multiple):hover:not(.ds-option__KmYz6O--disabled) {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-option__oSBnIJ--selected:not(.ds-option__oSBnIJ--multiple):active:not(.ds-option__oSBnIJ--disabled) {
+.ds-option__KmYz6O--selected:not(.ds-option__KmYz6O--multiple):active:not(.ds-option__KmYz6O--disabled) {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-option__oSBnIJ__label {
+.ds-option__KmYz6O__label {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
@@ -102,14 +102,14 @@
   grid-column: 1;
   grid-row: 1;
 }
-.ds-option__oSBnIJ__check-icon {
+.ds-option__KmYz6O__check-icon {
   margin-left: var(--ds-spacing-small);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   height: 100%;
 }
-.ds-option__oSBnIJ__description {
+.ds-option__KmYz6O__description {
   color: var(--ds-textColor-secondary);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
@@ -118,6 +118,6 @@
   grid-column: 1;
   grid-row: 2;
 }
-.ds-option__oSBnIJ__description:not(:empty) {
+.ds-option__KmYz6O__description:not(:empty) {
   display: block;
 }

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

@@ -89,13 +89,13 @@ export class DsOption {
     render() {
         const baseClass = cx('ds-option');
         const DsIcon = transformTagName('ds-icon', 'ds-option', this.el);
-        return (h("div", { key: 'bb04c65dc3caa755b68c857909841ba7e01062c9', ref: el => (this.optionRef = el), id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: 'f3b3d9431c291de33bc44172db062ea4fcadd9ed', ref: el => (this.optionRef = el), id: this.dsId, class: classNames(baseClass, {
                 [`${baseClass}--multiple`]: this.isMultiple,
                 [`${baseClass}--active`]: this.dsActive,
                 [`${baseClass}--selected`]: this.dsSelected,
                 [`${baseClass}--disabled`]: this.dsDisabled,
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex, ...this.inheritedAttributes }, this.isMultiple && (h("span", { key: 'e9dd6caa4d6b1361bf2be12510009babf4ed6091', class: `${baseClass}__checkbox` }, this.dsSelected && (h(DsIcon, { key: '8dd1b3e8406c3b4a94aa0875be7471bf36619f60', class: `${baseClass}__checkbox__icon`, dsName: "check_small", dsSize: "1.25rem", dsColour: this.dsDisabled ? 'ds-textColor-disabled-onLight' : 'ds-textColor-white' })))), h(Fragment, { key: '500b7bfd93c36617382081a67d4e2ceae4e4bd48' }, h("span", { key: '71c0bcdc54ca94d20d92e0f935ecbcdeb070322f' }, h("span", { key: 'a53462d0aad23b33b5b5cb0177153319f179721a', class: `${baseClass}__label`, ref: el => (this.optionLabelTextRef = el) }, h("slot", { key: '702bd21da288d1bb6550e03581f5318929949bcc' }, this.dsLabel)), this.dsDescription && h("span", { key: 'e4ade35a738c189bbb9f72dbb7aede215dc7b942', class: `${baseClass}__description` }, this.dsDescription)), !this.isMultiple && this.dsSelected && h(DsIcon, { key: 'de13ceb3ffba87571d2785270480a17447e4df19', dsName: "check", class: `${baseClass}__check-icon` }))));
+            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex, ...this.inheritedAttributes }, this.isMultiple && (h("span", { key: 'c3406f80f847bea5ee8b8074f7d337069980a222', class: `${baseClass}__checkbox` }, this.dsSelected && (h(DsIcon, { key: '88f66a28771ca6238b3c3015e7ea5d01e3d4a9d6', class: `${baseClass}__checkbox__icon`, dsName: "check_small", dsSize: "1.25rem", dsColour: this.dsDisabled ? 'ds-textColor-disabled-onLight' : 'ds-textColor-white' })))), h(Fragment, { key: '9cb09a61253d7aed983626a547209057994184a3' }, h("span", { key: '1407f9ee7ba6faae1140335bc364fd552c3ca1f3' }, h("span", { key: 'b2dde5cbf32871dc64b9ea1456a9e16ab07e5490', class: `${baseClass}__label`, ref: el => (this.optionLabelTextRef = el) }, h("slot", { key: 'a78869160f7a66f6fe75b3b669b8633d595c2f60' }, this.dsLabel)), this.dsDescription && h("span", { key: 'c243fd5a045bf4d2218bff0ac8234b035365de0c', class: `${baseClass}__description` }, this.dsDescription)), !this.isMultiple && this.dsSelected && h(DsIcon, { key: 'a3b690f4035cdc9619c2bfc1eb5d24f5a994a2e6', dsName: "check", class: `${baseClass}__check-icon` }))));
     }
     static get is() { return "ds-option"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,14 +1,14 @@
-.ds-option-group__oSBnIJ {
+.ds-option-group__KmYz6O {
   display: block;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-option-group__oSBnIJ--hidden {
+.ds-option-group__KmYz6O--hidden {
   display: none;
 }
-.ds-option-group__oSBnIJ ul {
+.ds-option-group__KmYz6O ul {
   padding: 0;
 }
-.ds-option-group__oSBnIJ__label {
+.ds-option-group__KmYz6O__label {
   position: sticky;
   display: block;
   top: 0;
@@ -19,6 +19,6 @@
   font-weight: var(--ds-fontWeight-semibold);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-option-group__oSBnIJ__label__shadow {
+.ds-option-group__KmYz6O__label__shadow {
   box-shadow: var(--ds-shadow-overflow);
 }

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

@@ -34,9 +34,9 @@ export class DsOptionGroup {
     }
     render() {
         const baseClass = cx('ds-option-group');
-        return (h("div", { key: '2522430be2d00681a6b28f0a8c381846c66eca06', class: classNames(`${baseClass}`, {
+        return (h("div", { key: 'b1161298f8ef8d2b305b9837a3d2f9501858837b', class: classNames(`${baseClass}`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, h("div", { key: 'b5f646b7eeb45b942e2e65e6f59446371aff0363', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), h("slot", { key: '4d2777f84ba0b4d2725199785bab6e54a9fc4a34' })));
+            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, h("div", { key: 'dff52700dd3d9aa86218b6a64969ea67970c2c3a', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), h("slot", { key: '3573bfa76edb767d6eb0fcef6dc752f4ed42cb64' })));
     }
     static get is() { return "ds-option-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,10 +1,10 @@
-.ds-options__oSBnIJ__inner {
+.ds-options__KmYz6O__inner {
   max-height: 20rem;
   overflow: hidden;
   box-sizing: border-box;
 }
 
-.ds-options__oSBnIJ {
+.ds-options__KmYz6O {
   position: relative;
   width: 100%;
   padding: 0;
@@ -12,10 +12,10 @@
   z-index: 0;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-options__oSBnIJ:focus {
+.ds-options__KmYz6O:focus {
   outline: none;
 }
-.ds-options__oSBnIJ__inner {
+.ds-options__KmYz6O__inner {
   overflow-y: auto;
   list-style-type: none;
   padding: 0;
@@ -25,7 +25,7 @@
   display: flex;
   flex-direction: column;
 }
-.ds-options__oSBnIJ__top-scrim, .ds-options__oSBnIJ__bottom-scrim {
+.ds-options__KmYz6O__top-scrim, .ds-options__KmYz6O__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -36,23 +36,23 @@
   z-index: 1;
   display: none;
 }
-.ds-options__oSBnIJ__top-scrim {
+.ds-options__KmYz6O__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-options__oSBnIJ__bottom-scrim {
+.ds-options__KmYz6O__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-options__oSBnIJ.has-top-scrim .ds-options__oSBnIJ__top-scrim {
+.ds-options__KmYz6O.has-top-scrim .ds-options__KmYz6O__top-scrim {
   display: block;
 }
-.ds-options__oSBnIJ.has-bottom-scrim .ds-options__oSBnIJ__bottom-scrim {
+.ds-options__KmYz6O.has-bottom-scrim .ds-options__KmYz6O__bottom-scrim {
   display: block;
 }
-.ds-options__oSBnIJ li {
+.ds-options__KmYz6O li {
   cursor: pointer;
 }
-.ds-options__oSBnIJ li:hover {
+.ds-options__KmYz6O li:hover {
   background-color: var(--ds-palette-black-05);
 }

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

@@ -130,10 +130,10 @@ export class DsOptions {
     };
     render() {
         const baseClass = cx('ds-options');
-        return (h("div", { key: '0c4a90874a5b1234c8be905faed7398b84e86593', id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: '4f80bb50699d40e29e4aa324283aa33dd6edbfe8', id: this.dsId, class: classNames(baseClass, {
                 'has-bottom-scrim': this.hasBottomScrim,
                 'has-top-scrim': this.hasTopScrim,
-            }), role: "listbox", tabindex: 0, onKeyDown: this.handleKeyDown, ref: el => (this.optionsListRef = el), onScroll: this.handleScroll, onFocus: this.updateScrimClasses, "aria-multiselectable": this.dsAriaMultiselectable ? 'true' : 'false', "aria-label": this.dsAriaMultiselectable ? multiselectable() : undefined, "aria-labelledby": [this.dsLabelId, this.dsId].filter(Boolean).join(' '), ...this.inheritedAttributes }, h("div", { key: 'e64e68234dead6eb2e04ed7e1e0aadbfb3fb9e33', class: `${baseClass}__inner`, ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: 'a96c1a2316759ff352643f3ea0b1b2c8929646ea', class: `${baseClass}__top-scrim`, "aria-hidden": "true" }), h("slot", { key: '9955de9f75f9f466f5d99c3178f5a3f4ee716870' }), h("div", { key: '89078805f0daa8e28f0ffefe0e25623faf9105a5', class: `${baseClass}__bottom-scrim`, "aria-hidden": "true" }))));
+            }), role: "listbox", tabindex: 0, onKeyDown: this.handleKeyDown, ref: el => (this.optionsListRef = el), onScroll: this.handleScroll, onFocus: this.updateScrimClasses, "aria-multiselectable": this.dsAriaMultiselectable ? 'true' : 'false', "aria-label": this.dsAriaMultiselectable ? multiselectable() : undefined, "aria-labelledby": [this.dsLabelId, this.dsId].filter(Boolean).join(' '), ...this.inheritedAttributes }, h("div", { key: 'a6068ce067d03e84e66b2be1cbad17f1c7e41e5b', class: `${baseClass}__inner`, ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '61c1c263360d6d30a510e890276467ebf2cfe922', class: `${baseClass}__top-scrim`, "aria-hidden": "true" }), h("slot", { key: 'e437ed4db445c341a83c64bfcaca11bac65c154a' }), h("div", { key: '682abdf277fe537fa38e18d450a9f33eb6ddea1f', class: `${baseClass}__bottom-scrim`, "aria-hidden": "true" }))));
     }
     static get is() { return "ds-options"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-options-message/ds-options-message.css

@@ -1,4 +1,4 @@
-.ds-options-message__oSBnIJ {
+.ds-options-message__KmYz6O {
   display: flex;
   flex-direction: column;
   padding: var(--ds-spacing-2xSmall);
@@ -9,14 +9,14 @@
   justify-content: center;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-options-message__oSBnIJ__error {
+.ds-options-message__KmYz6O__error {
   color: var(--ds-textColor-danger);
   text-align: center;
 }
-.ds-options-message__oSBnIJ__error__icon {
+.ds-options-message__KmYz6O__error__icon {
   display: inline-block;
 }
-.ds-options-message__oSBnIJ__error__title, .ds-options-message__oSBnIJ__no-results__title {
+.ds-options-message__KmYz6O__error__title, .ds-options-message__KmYz6O__no-results__title {
   text-align: center;
   color: var(--ds-textColor-default);
   font-size: var(--ds-fontSize-18);
@@ -24,10 +24,10 @@
   margin-top: var(--ds-spacing-xSmall);
   margin-bottom: var(--ds-spacing-2xSmall);
 }
-.ds-options-message__oSBnIJ__no-results__title {
+.ds-options-message__KmYz6O__no-results__title {
   hyphens: auto;
 }
-.ds-options-message__oSBnIJ__error__text, .ds-options-message__oSBnIJ__no-results__text {
+.ds-options-message__KmYz6O__error__text, .ds-options-message__KmYz6O__no-results__text {
   color: var(--ds-textColor-default);
   text-align: center;
   font-size: var(--ds-fontSize-16);

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-ellipsis/ds-pagination-ellipsis.css

@@ -4,7 +4,7 @@
   justify-content: center;
 }
 
-.ds-pagination-ellipsis__oSBnIJ {
+.ds-pagination-ellipsis__KmYz6O {
   min-height: var(--ds-link-cta-min-width, calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall))); /* Match button height */
   min-width: var(--ds-link-cta-min-width, calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall))); /* Match button width */
   padding: 0;

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-ellipsis/ds-pagination-ellipsis.js

@@ -11,7 +11,7 @@ export class DsPaginationEllipsis extends Mixin(paginationFactory) {
         const variant = this.paginationContext?.variant || 'medium';
         const hostClass = cx(`ds-pagination-ellipsis-variant--${variant}`);
         const ariaLabel = this.paginationContext?.texts.ellipsis || 'Ellipsis';
-        return (h(Host, { key: 'ea9311999a955758465ba2a7d0d10ba48a67eb8e', class: hostClass }, h("span", { key: '515eaeabc3b28d150b010885c9a9a876274235ca', class: baseClass, role: "img", "aria-label": ariaLabel }, "\u2026")));
+        return (h(Host, { key: '0a3e284f6c60c4b36ac53d0b42de4e52f9e1e989', class: hostClass }, h("span", { key: '879286f1d496200d403161b0039fca97e6e2133c', class: baseClass, role: "img", "aria-label": ariaLabel }, "\u2026")));
     }
     static get is() { return "ds-pagination-ellipsis"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-item/ds-pagination-item.css

@@ -1,4 +1,4 @@
-.ds-pagination-item__oSBnIJ {
+.ds-pagination-item__KmYz6O {
   display: inline-flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
@@ -6,13 +6,13 @@
   --ds-link-cta-text-decoration: none;
   --ds-link-cta-icon-size: 1.25rem; /* 20px */
 }
-.ds-pagination-item__oSBnIJ--disabled {
+.ds-pagination-item__KmYz6O--disabled {
   cursor: default;
 }
 
-:host([slot=full]) .ds-pagination-item__oSBnIJ--previous {
+:host([slot=full]) .ds-pagination-item__KmYz6O--previous {
   --ds-link-cta-padding-inline-start: var(--ds-spacing-3xSmall); /* 4px */
 }
-:host([slot=full]) .ds-pagination-item__oSBnIJ--next {
+:host([slot=full]) .ds-pagination-item__KmYz6O--next {
   --ds-link-cta-padding-inline-end: var(--ds-spacing-3xSmall); /* 4px */
 }

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page/ds-pagination-page.css

@@ -3,14 +3,14 @@
   align-items: center;
 }
 
-.ds-pagination-page__oSBnIJ {
+.ds-pagination-page__KmYz6O {
   --ds-link-cta-padding-inline: var(--ds-spacing-2xSmall);
   --ds-link-cta-padding-block: 0;
   --ds-link-cta-text-decoration: none;
   --ds-link-cta-icon-size: 1.25rem; /* 20px */
 }
 
-.ds-pagination-page__oSBnIJ--current {
+.ds-pagination-page__KmYz6O--current {
   pointer-events: none;
   --ds-link-cta-bg-color: var(--ds-bgColor-primary);
   --ds-link-cta-text-color: var(--ds-textColor-white);

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

@@ -14,7 +14,7 @@
   }
 }
 
-.ds-pagination__oSBnIJ {
+.ds-pagination__KmYz6O {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -26,48 +26,48 @@
   gap: var(--ds-spacing-3xSmall);
   flex-wrap: wrap;
 }
-.ds-pagination__oSBnIJ__compact slot, .ds-pagination__oSBnIJ__full slot {
+.ds-pagination__KmYz6O__compact slot, .ds-pagination__KmYz6O__full slot {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-3xSmall);
   flex-wrap: wrap;
 }
-.ds-pagination__oSBnIJ--compact .ds-pagination__oSBnIJ__compact, .ds-pagination__oSBnIJ--auto .ds-pagination__oSBnIJ__compact {
+.ds-pagination__KmYz6O--compact .ds-pagination__KmYz6O__compact, .ds-pagination__KmYz6O--auto .ds-pagination__KmYz6O__compact {
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-pagination__oSBnIJ--compact .ds-pagination__oSBnIJ__compact, .ds-pagination__oSBnIJ--auto .ds-pagination__oSBnIJ__compact {
+  .ds-pagination__KmYz6O--compact .ds-pagination__KmYz6O__compact, .ds-pagination__KmYz6O--auto .ds-pagination__KmYz6O__compact {
     width: auto;
   }
 }
-.ds-pagination__oSBnIJ--compact .ds-pagination__oSBnIJ__compact slot, .ds-pagination__oSBnIJ--auto .ds-pagination__oSBnIJ__compact slot {
+.ds-pagination__KmYz6O--compact .ds-pagination__KmYz6O__compact slot, .ds-pagination__KmYz6O--auto .ds-pagination__KmYz6O__compact slot {
   display: grid;
   grid-template-columns: min-content min-content auto min-content min-content;
   gap: var(--ds-spacing-3xSmall);
   align-items: center;
   width: 100%;
 }
-.ds-pagination__oSBnIJ ::slotted([class*=pagination-page-info]) {
+.ds-pagination__KmYz6O ::slotted([class*=pagination-page-info]) {
   padding: 0 var(--ds-spacing-small);
   font-size: var(--ds-pagination-font-size, var(--ds-fontSize-16));
   font-weight: var(--ds-fontWeight-semibold, 600);
   text-align: center;
   align-self: center;
 }
-.ds-pagination__oSBnIJ--compact .ds-pagination__oSBnIJ__full {
+.ds-pagination__KmYz6O--compact .ds-pagination__KmYz6O__full {
   display: none;
 }
-.ds-pagination__oSBnIJ--full .ds-pagination__oSBnIJ__compact {
+.ds-pagination__KmYz6O--full .ds-pagination__KmYz6O__compact {
   display: none;
 }
-.ds-pagination__oSBnIJ--auto .ds-pagination__oSBnIJ__full {
+.ds-pagination__KmYz6O--auto .ds-pagination__KmYz6O__full {
   display: none;
 }
 @media (min-width: 60rem) {
-  .ds-pagination__oSBnIJ--auto .ds-pagination__oSBnIJ__full {
+  .ds-pagination__KmYz6O--auto .ds-pagination__KmYz6O__full {
     display: contents;
   }
-  .ds-pagination__oSBnIJ--auto .ds-pagination__oSBnIJ__compact {
+  .ds-pagination__KmYz6O--auto .ds-pagination__KmYz6O__compact {
     display: none;
   }
 }

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

@@ -88,10 +88,10 @@ export class DsPagination {
         const classes = classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsLayout}`);
         const fontSize = this.dsVariant === 'small' ? 'var(--ds-fontSize-16)' : 'var(--ds-fontSize-18)';
         const minSize = this.dsVariant === 'small' ? 'var(--ds-spacing-large)' : 'calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall))';
-        return (h("nav", { key: '9f1221279f81ec729d51208b75f3b6adf8f4a54e', class: classes, "aria-label": this.dsAriaLabel || pagination(), style: {
+        return (h("nav", { key: '13154d7bb5db1dd611d978201cadc8e1c53025d4', class: classes, "aria-label": this.dsAriaLabel || pagination(), style: {
                 '--ds-pagination-font-size': fontSize,
                 '--ds-link-cta-min-width': minSize,
-            } }, h("div", { key: 'c244a4f485a8a668b0e183977636466401faad6c', class: `${baseClass}__compact` }, h("slot", { key: 'e3cfc1d693a5e7aef1a186d9863aea496a9bb8dd', name: "compact", onSlotchange: () => this.updateContext() })), h("div", { key: '387cd14a25f5b742513c25721847b0a52248a916', class: `${baseClass}__full` }, h("slot", { key: '258fb704a43c0afc52981ed8fb0eb697bdd5c5e8', name: "full", onSlotchange: () => this.updateContext() }))));
+            } }, h("div", { key: '044c3297eda5b36b6bf8f094dcca244002c3daa3', class: `${baseClass}__compact` }, h("slot", { key: '1a8293fe80d2f7e639f9b46cfa37c51c90244cd8', name: "compact", onSlotchange: () => this.updateContext() })), h("div", { key: 'e93e090e3386db2cdaa478f99718574166febe41', class: `${baseClass}__full` }, h("slot", { key: 'ad39a4e5b068e72d98ef8551f6f9ec92de275641', name: "full", onSlotchange: () => this.updateContext() }))));
     }
     static get is() { return "ds-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.css

@@ -1,23 +1,23 @@
-.ds-radio-button__oSBnIJ {
+.ds-radio-button__KmYz6O {
   box-sizing: border-box;
   display: inline-flex;
   color: var(--ds-textColor-default);
 }
-.ds-radio-button__oSBnIJ--disabled {
+.ds-radio-button__KmYz6O--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-radio-button__oSBnIJ:has(input:focus-visible) .ds-radio-button__oSBnIJ__icon {
+.ds-radio-button__KmYz6O:has(input:focus-visible) .ds-radio-button__KmYz6O__icon {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-bgColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-bgColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 0.5);
 }
-.ds-radio-button__oSBnIJ__icon {
+.ds-radio-button__KmYz6O__icon {
   border-radius: 50%;
   height: 24px;
   width: 24px;
   margin: 10px 10px 10px 0;
 }
-.ds-radio-button__oSBnIJ__text {
+.ds-radio-button__KmYz6O__text {
   margin-top: 10px;
   padding-right: var(--ds-spacing-2xSmall);
   font-family: var(--ds-fontFamily-body);
@@ -26,99 +26,99 @@
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-.ds-radio-button__oSBnIJ__icon__outer-circle {
+.ds-radio-button__KmYz6O__icon__outer-circle {
   stroke: var(--ds-borderColor-default);
   fill: var(--ds-bgColor-white);
 }
-.ds-radio-button__oSBnIJ__icon__outer-circle--checked {
+.ds-radio-button__KmYz6O__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-primary);
   fill: var(--ds-bgColor-white);
 }
-.ds-radio-button__oSBnIJ__icon__inner-circle {
+.ds-radio-button__KmYz6O__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-bgColor-primary);
 }
-.ds-radio-button__oSBnIJ:hover:not(.ds-radio-button__oSBnIJ--disabled):not(.ds-radio-button__oSBnIJ--invalid) .ds-radio-button__oSBnIJ__icon__outer-circle {
+.ds-radio-button__KmYz6O:hover:not(.ds-radio-button__KmYz6O--disabled):not(.ds-radio-button__KmYz6O--invalid) .ds-radio-button__KmYz6O__icon__outer-circle {
   stroke: var(--ds-borderColor-default);
   fill: var(--ds-bgColor-white-hover);
 }
-.ds-radio-button__oSBnIJ:hover:not(.ds-radio-button__oSBnIJ--disabled):not(.ds-radio-button__oSBnIJ--invalid) .ds-radio-button__oSBnIJ__icon__outer-circle--checked {
+.ds-radio-button__KmYz6O:hover:not(.ds-radio-button__KmYz6O--disabled):not(.ds-radio-button__KmYz6O--invalid) .ds-radio-button__KmYz6O__icon__outer-circle--checked {
   stroke: var(--ds-palette-mainBlue-80);
   fill: var(--ds-bgColor-white);
 }
-.ds-radio-button__oSBnIJ:hover:not(.ds-radio-button__oSBnIJ--disabled):not(.ds-radio-button__oSBnIJ--invalid) .ds-radio-button__oSBnIJ__icon__inner-circle {
+.ds-radio-button__KmYz6O:hover:not(.ds-radio-button__KmYz6O--disabled):not(.ds-radio-button__KmYz6O--invalid) .ds-radio-button__KmYz6O__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-bgColor-primary-hover);
 }
-.ds-radio-button__oSBnIJ:active:not(.ds-radio-button__oSBnIJ--disabled):not(.ds-radio-button__oSBnIJ--invalid) .ds-radio-button__oSBnIJ__icon__outer-circle {
+.ds-radio-button__KmYz6O:active:not(.ds-radio-button__KmYz6O--disabled):not(.ds-radio-button__KmYz6O--invalid) .ds-radio-button__KmYz6O__icon__outer-circle {
   stroke: var(--ds-borderColor-default);
   fill: var(--ds-bgColor-white-active);
 }
-.ds-radio-button__oSBnIJ:active:not(.ds-radio-button__oSBnIJ--disabled):not(.ds-radio-button__oSBnIJ--invalid) .ds-radio-button__oSBnIJ__icon__outer-circle--checked {
+.ds-radio-button__KmYz6O:active:not(.ds-radio-button__KmYz6O--disabled):not(.ds-radio-button__KmYz6O--invalid) .ds-radio-button__KmYz6O__icon__outer-circle--checked {
   stroke: var(--ds-palette-mainBlue-90);
   fill: var(--ds-bgColor-white);
 }
-.ds-radio-button__oSBnIJ:active:not(.ds-radio-button__oSBnIJ--disabled):not(.ds-radio-button__oSBnIJ--invalid) .ds-radio-button__oSBnIJ__icon__inner-circle {
+.ds-radio-button__KmYz6O:active:not(.ds-radio-button__KmYz6O--disabled):not(.ds-radio-button__KmYz6O--invalid) .ds-radio-button__KmYz6O__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-bgColor-primary-active);
 }
-.ds-radio-button__oSBnIJ--disabled .ds-radio-button__oSBnIJ__icon__outer-circle {
+.ds-radio-button__KmYz6O--disabled .ds-radio-button__KmYz6O__icon__outer-circle {
   stroke: var(--ds-borderColor-disabled-onLight);
   fill: var(--ds-bgColor-disabled-onLight);
 }
-.ds-radio-button__oSBnIJ--disabled .ds-radio-button__oSBnIJ__icon__outer-circle--checked {
+.ds-radio-button__KmYz6O--disabled .ds-radio-button__KmYz6O__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-disabled-onLight);
   fill: var(--ds-bgColor-disabled-onLight);
 }
-.ds-radio-button__oSBnIJ--disabled .ds-radio-button__oSBnIJ__icon__inner-circle {
+.ds-radio-button__KmYz6O--disabled .ds-radio-button__KmYz6O__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-radio-button__oSBnIJ--invalid .ds-radio-button__oSBnIJ__icon__outer-circle {
+.ds-radio-button__KmYz6O--invalid .ds-radio-button__KmYz6O__icon__outer-circle {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger);
 }
-.ds-radio-button__oSBnIJ--invalid .ds-radio-button__oSBnIJ__icon__outer-circle--checked {
+.ds-radio-button__KmYz6O--invalid .ds-radio-button__KmYz6O__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger);
 }
-.ds-radio-button__oSBnIJ--invalid .ds-radio-button__oSBnIJ__icon__inner-circle {
+.ds-radio-button__KmYz6O--invalid .ds-radio-button__KmYz6O__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-iconColor-danger);
 }
-.ds-radio-button__oSBnIJ--invalid:hover:not(.ds-radio-button__oSBnIJ--disabled) .ds-radio-button__oSBnIJ__icon__outer-circle {
+.ds-radio-button__KmYz6O--invalid:hover:not(.ds-radio-button__KmYz6O--disabled) .ds-radio-button__KmYz6O__icon__outer-circle {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger-hover);
 }
-.ds-radio-button__oSBnIJ--invalid:hover:not(.ds-radio-button__oSBnIJ--disabled) .ds-radio-button__oSBnIJ__icon__outer-circle--checked {
+.ds-radio-button__KmYz6O--invalid:hover:not(.ds-radio-button__KmYz6O--disabled) .ds-radio-button__KmYz6O__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger-hover);
 }
-.ds-radio-button__oSBnIJ--invalid:hover:not(.ds-radio-button__oSBnIJ--disabled) .ds-radio-button__oSBnIJ__icon__inner-circle {
+.ds-radio-button__KmYz6O--invalid:hover:not(.ds-radio-button__KmYz6O--disabled) .ds-radio-button__KmYz6O__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-iconColor-danger);
 }
-.ds-radio-button__oSBnIJ--invalid:active:not(.ds-radio-button__oSBnIJ--disabled) .ds-radio-button__oSBnIJ__icon__outer-circle {
+.ds-radio-button__KmYz6O--invalid:active:not(.ds-radio-button__KmYz6O--disabled) .ds-radio-button__KmYz6O__icon__outer-circle {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger-active);
 }
-.ds-radio-button__oSBnIJ--invalid:active:not(.ds-radio-button__oSBnIJ--disabled) .ds-radio-button__oSBnIJ__icon__outer-circle--checked {
+.ds-radio-button__KmYz6O--invalid:active:not(.ds-radio-button__KmYz6O--disabled) .ds-radio-button__KmYz6O__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger-active);
 }
-.ds-radio-button__oSBnIJ--invalid:active:not(.ds-radio-button__oSBnIJ--disabled) .ds-radio-button__oSBnIJ__icon__inner-circle {
+.ds-radio-button__KmYz6O--invalid:active:not(.ds-radio-button__KmYz6O--disabled) .ds-radio-button__KmYz6O__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-iconColor-danger);
 }
 
-.ds-radio-button__oSBnIJ-fieldset {
+.ds-radio-button__KmYz6O-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
   margin: 0;
   padding: 0;
 }
-.ds-radio-button__oSBnIJ-fieldset__legend {
+.ds-radio-button__KmYz6O-fieldset__legend {
   padding-inline: 0;
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
@@ -128,7 +128,7 @@
   line-height: var(--ds-lineHeight-large);
   margin-bottom: var(--ds-spacing-3xSmall);
 }
-.ds-radio-button__oSBnIJ-fieldset__assistive-text {
+.ds-radio-button__KmYz6O-fieldset__assistive-text {
   display: inline;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);

package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.js

@@ -614,7 +614,8 @@ export class DsRadioButton extends Mixin(ariaDeprecationFactory, disableEventsFa
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -635,7 +636,8 @@ export class DsRadioButton extends Mixin(ariaDeprecationFactory, disableEventsFa
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }