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

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

@@ -53,6 +53,7 @@ export class DsNotification extends Mixin(ariaDeprecationFactory) {
         this.icon = this.variantIcon;
     }
     dsDescription;
+    dsDescriptionMaxWidth = '550px';
     get variantIcon() {
         switch (this.variant) {
             case 'info':
@@ -139,12 +140,13 @@ export class DsNotification extends Mixin(ariaDeprecationFactory) {
     render() {
         const baseClass = cx('ds-notification');
         const contentClass = `${baseClass}__content`;
+        const textClass = `${contentClass}__text`;
         const classes = classNames(baseClass, `${baseClass}--${this.variant}`);
         const ariaLabel = this.dsAriaLabel ?? this.inheritedAttributes['aria-label'] ?? this.ariaLabel;
         const ariaLabelledby = this.dsAriaLabelledby ?? this.inheritedAttributes['aria-labelledby'] ?? this.ariaLabelledBy;
         const role = this.dsRole ?? this.inheritedAttributes['role'] ?? 'group';
         const restAttributes = omit(this.inheritedAttributes, ['aria-labelledby', 'aria-label', 'role']);
-        return (h("div", { key: '8e201a083dfe245b8a0c068244ef5db036c7aad7', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, this.dsIcon && (h("div", { key: 'e06d5dc944970dc13497d1beb1089a52df5cf299', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: 'b1e09f5319d6374513abb03432f03386c689e536', dsName: this.dsIcon }))), h("div", { key: '6d43cafde7ce462412340bb4d25c6f598a300333', class: contentClass }, h("slot", { key: '645b319fd933c6d58add473be09144bc7a888bd9', name: "heading" }, this.dsHeading && (h("div", { key: '0261cac112dce957d9ad9969e1631587861ef50e', class: `${contentClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: '6b32236fbbbc653bc14f90de968c0c5576e4672f', name: "description" }, this.dsDescription && h("div", { key: '6b599192a3b6508823add351655d0b17e2d4a002', class: `${contentClass}__description ds-text-regular-md` }, this.dsDescription)), h("slot", { key: '41939acae081c9c78e27ea9811822661be74d3cb' })), this.dsDismissable && (h(this.DsButton, { key: '5dbf763231f0adf9f818148a0528f347c2ca5e7b', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsAriaLabelledby: [`${this.dsId}-dismiss-button`, ariaLabelledby].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: '80fb85513aaa132ff6928769fc19b89a58998431', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close)))));
+        return (h("div", { key: '2c7be9f4ca5c418b5c61bab132d4411bc004600a', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, h("div", { key: 'baa8bf00a8ff422725dfa35d7aa42ce1b447a0c9', class: contentClass }, this.dsIcon && (h("div", { key: 'd0352dd16b66822af92b018f9e0d53ce1bce2699', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: 'b8c98820afc69339a667e20b0daaef7c8145c229', dsName: this.dsIcon }))), h("div", { key: 'ab25e7e55e76721b70a96fd8cfe7f002e9677eca', class: textClass }, h("slot", { key: 'ec5ad0d4f45e5f0831e5dc670707d68d4989c7d4', name: "heading" }, this.dsHeading && (h("div", { key: 'e29e20300b860da979cb2285925348449b0ce2d5', class: `${textClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: '86622fac36f1c0828e974ced4d5fae415fbffeb6', name: "description" }, this.dsDescription && (h("div", { key: 'b4161e753abf969b4fe2f895650bd32f5dfd8485', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("slot", { key: 'd4d2cfb91ec5c17073c8a2963998379586016a3a' })), this.dsDismissable && (h(this.DsButton, { key: '992e2ed905ae9eaefdabf15e9a3c4c006f4d7977', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsAriaLabelledby: [`${this.dsId}-dismiss-button`, ariaLabelledby].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: 'e85535b98bd322df61f9b7dcc4f4a224f7d608f0', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
     }
     static get is() { return "ds-notification"; }
     static get encapsulation() { return "scoped"; }
@@ -372,6 +374,31 @@ export class DsNotification extends Mixin(ariaDeprecationFactory) {
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-description"
+            },
+            "dsDescriptionMaxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DsDescriptionMaxWidth",
+                    "resolved": "\"none\" | `${number}%` | `${number}px` | `${number}rem`",
+                    "references": {
+                        "DsDescriptionMaxWidth": {
+                            "location": "global",
+                            "id": "global::DsDescriptionMaxWidth"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `dsDescription` is set, defines the maximum width of the description text. Default is 550px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-description-max-width",
+                "defaultValue": "'550px'"
             }
         };
     }

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

@@ -65,6 +65,22 @@ export const Dismissable = {
         dsDismissable: true,
     },
 };
+export const DescriptionMaxWidth = {
+    args: {
+        dsVariant: 'info',
+        dsHeading: 'Info',
+        dsHeadingLevel: 2,
+        dsDescriptionMaxWidth: '300px',
+    },
+};
+export const DescriptionMaxWidthNone = {
+    args: {
+        dsVariant: 'info',
+        dsHeading: 'Info',
+        dsHeadingLevel: 2,
+        dsDescriptionMaxWidth: 'none',
+    },
+};
 export const OnlyTitle = {
     args: {
         dsVariant: 'success',

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

@@ -16,6 +16,7 @@ export const Default = {
         dsVariant: 'neutral',
         dsDismissable: false,
         dsHeadingLevel: 2,
+        dsDescriptionMaxWidth: '550px',
     },
 };
 export const Events = {
@@ -43,7 +44,11 @@ export const Events = {
     render: () => html `
     <ds-grid>
       <ds-grid>
-        <ds-card ds-heading="Events" ds-description="Use the notification to observe the events it triggers. For implementation details, view 'Show code' in the Docs.">
+        <ds-card
+          ds-link-type="none"
+          ds-heading="Events"
+          ds-description="Use the notification to observe the events it triggers. For implementation details, view 'Show code' in the Docs."
+        >
           <ul slot="content" id="notification-output" class="ds-bodytext-sm ds-m-sm">
             <li id="notification-output__dismissed">Notification should be dismissed: <span id="notification-output__dismissed-text">No</span></li>
           </ul>
@@ -74,5 +79,6 @@ export const Playground = {
         dsHeadingLevel: 2,
         dsIcon: '',
         dsDescription: 'This is a notification message. It provides additional information about the current status or action. Please review and proceed as needed.',
+        dsDescriptionMaxWidth: '550px',
     },
 };

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

@@ -1,4 +1,4 @@
-.ds-option__MGLLcm {
+.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__MGLLcm:not(.ds-option__MGLLcm--multiple) {
+.ds-option__KmYz6O:not(.ds-option__KmYz6O--multiple) {
   justify-content: space-between;
 }
-.ds-option__MGLLcm--hidden {
+.ds-option__KmYz6O--hidden {
   display: none;
 }
-.ds-option__MGLLcm--disabled {
+.ds-option__KmYz6O--disabled {
   cursor: not-allowed;
   user-select: none;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__MGLLcm:hover:not(.ds-option__MGLLcm--disabled) {
+.ds-option__KmYz6O:hover:not(.ds-option__KmYz6O--disabled) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-option__MGLLcm:active:not(.ds-option__MGLLcm--disabled) {
+.ds-option__KmYz6O:active:not(.ds-option__KmYz6O--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-option__MGLLcm--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__MGLLcm--active.ds-option__MGLLcm--selected:not(.ds-option__MGLLcm--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__MGLLcm--multiple.ds-option__MGLLcm--disabled {
+.ds-option__KmYz6O--multiple.ds-option__KmYz6O--disabled {
   color: var(--ds-textColor-default);
 }
-.ds-option__MGLLcm--multiple .ds-option__MGLLcm__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__MGLLcm--multiple.ds-option__MGLLcm--disabled .ds-option__MGLLcm__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__MGLLcm--multiple.ds-option__MGLLcm--disabled:not(.ds-option__MGLLcm--selected) .ds-option__MGLLcm__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__MGLLcm--selected .ds-option__MGLLcm__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__MGLLcm--selected:not(.ds-option__MGLLcm--multiple) {
+.ds-option__KmYz6O--selected:not(.ds-option__KmYz6O--multiple) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
 }
-.ds-option__MGLLcm--selected:not(.ds-option__MGLLcm--multiple).ds-option__MGLLcm--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__MGLLcm--selected:not(.ds-option__MGLLcm--multiple) .ds-option__MGLLcm__description {
+.ds-option__KmYz6O--selected:not(.ds-option__KmYz6O--multiple) .ds-option__KmYz6O__description {
   color: var(--ds-textColor-white);
 }
-.ds-option__MGLLcm--selected:not(.ds-option__MGLLcm--multiple) .ds-option__MGLLcm__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__MGLLcm--selected:not(.ds-option__MGLLcm--multiple).ds-option__MGLLcm--disabled .ds-option__MGLLcm__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__MGLLcm--selected:not(.ds-option__MGLLcm--multiple):hover:not(.ds-option__MGLLcm--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__MGLLcm--selected:not(.ds-option__MGLLcm--multiple):active:not(.ds-option__MGLLcm--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__MGLLcm__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__MGLLcm__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__MGLLcm__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__MGLLcm__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: '617828c8b3b4b710d9072b25444228143758e22c', 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: '307d2ca0378710fcaa8fc40ccbd3f93902b42f7c', class: `${baseClass}__checkbox` }, this.dsSelected && (h(DsIcon, { key: 'eeb57d6628b70f26a9aad23dcb01422ecf591a74', class: `${baseClass}__checkbox__icon`, dsName: "check_small", dsSize: "1.25rem", dsColour: this.dsDisabled ? 'ds-textColor-disabled-onLight' : 'ds-textColor-white' })))), h(Fragment, { key: '432e557bf4c5087c713549e052879a98cb426163' }, h("span", { key: '7efeaed898dacd10df1828fb8d21cd24549034ef' }, h("span", { key: 'a434ea8915569f3531d961218469826d8d17070f', class: `${baseClass}__label`, ref: el => (this.optionLabelTextRef = el) }, h("slot", { key: 'd560ac070733192917b49dd7a669f1312ee50beb' }, this.dsLabel)), this.dsDescription && h("span", { key: 'f99bf6fab8d8af6bcffe51eeefe1b567ddb47ddf', class: `${baseClass}__description` }, this.dsDescription)), !this.isMultiple && this.dsSelected && h(DsIcon, { key: '56482d641c668355dc8628bd8188af1cf8ede038', 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__MGLLcm {
+.ds-option-group__KmYz6O {
   display: block;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-option-group__MGLLcm--hidden {
+.ds-option-group__KmYz6O--hidden {
   display: none;
 }
-.ds-option-group__MGLLcm ul {
+.ds-option-group__KmYz6O ul {
   padding: 0;
 }
-.ds-option-group__MGLLcm__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__MGLLcm__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: '79121a625288e2789ba1b043cc542b44062bf44a', 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: '9f1ee4c542336e1b8e27b389b5c49c894cd87551', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), h("slot", { key: 'ecbc22896f968f94093d946603e7f9b2f387bac0' })));
+            }), 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__MGLLcm__inner {
+.ds-options__KmYz6O__inner {
   max-height: 20rem;
   overflow: hidden;
   box-sizing: border-box;
 }
 
-.ds-options__MGLLcm {
+.ds-options__KmYz6O {
   position: relative;
   width: 100%;
   padding: 0;
@@ -12,10 +12,10 @@
   z-index: 0;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-options__MGLLcm:focus {
+.ds-options__KmYz6O:focus {
   outline: none;
 }
-.ds-options__MGLLcm__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__MGLLcm__top-scrim, .ds-options__MGLLcm__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__MGLLcm__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__MGLLcm__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__MGLLcm.has-top-scrim .ds-options__MGLLcm__top-scrim {
+.ds-options__KmYz6O.has-top-scrim .ds-options__KmYz6O__top-scrim {
   display: block;
 }
-.ds-options__MGLLcm.has-bottom-scrim .ds-options__MGLLcm__bottom-scrim {
+.ds-options__KmYz6O.has-bottom-scrim .ds-options__KmYz6O__bottom-scrim {
   display: block;
 }
-.ds-options__MGLLcm li {
+.ds-options__KmYz6O li {
   cursor: pointer;
 }
-.ds-options__MGLLcm 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: 'b9f13d73371005bbf70f11583c18b012fa88f700', 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: '8b01781bdee396e699773f00a005d5fa905b0697', class: `${baseClass}__inner`, ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '8d11cd63f31bdfb7c20df01500898df7360ec973', class: `${baseClass}__top-scrim`, "aria-hidden": "true" }), h("slot", { key: 'b443551914771e71676171aacf6fecfc04b24cea' }), h("div", { key: '0f8b194e6b9c1890eb875890843edb14b634e6b7', 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__MGLLcm {
+.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__MGLLcm__error {
+.ds-options-message__KmYz6O__error {
   color: var(--ds-textColor-danger);
   text-align: center;
 }
-.ds-options-message__MGLLcm__error__icon {
+.ds-options-message__KmYz6O__error__icon {
   display: inline-block;
 }
-.ds-options-message__MGLLcm__error__title, .ds-options-message__MGLLcm__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__MGLLcm__no-results__title {
+.ds-options-message__KmYz6O__no-results__title {
   hyphens: auto;
 }
-.ds-options-message__MGLLcm__error__text, .ds-options-message__MGLLcm__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__MGLLcm {
+.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: '5da3e17046f9e39a149b16cb93b2db12d7dd15b5', class: hostClass }, h("span", { key: '8e2e1cd26b0a1db07a4f81f6aa2c56e9e794b5af', 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__MGLLcm {
+.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__MGLLcm--disabled {
+.ds-pagination-item__KmYz6O--disabled {
   cursor: default;
 }
 
-:host([slot=full]) .ds-pagination-item__MGLLcm--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__MGLLcm--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__MGLLcm {
+.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__MGLLcm--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

@@ -1,10 +1,6 @@
-.ds-no-style-leak *, .ds-pagination__MGLLcm,
-.ds-pagination__MGLLcm :where([class*=__MGLLcm]) {
+.ds-no-style-leak * {
   all: unset;
   box-sizing: border-box;
-}
-
-.ds-no-style-leak * {
   display: block;
 }
 
@@ -18,55 +14,60 @@
   }
 }
 
-.ds-pagination__MGLLcm {
+.ds-pagination__KmYz6O {
+  all: initial;
+  display: revert;
+  box-sizing: border-box;
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--ds-spacing-3xSmall);
   flex-wrap: wrap;
 }
-.ds-pagination__MGLLcm__compact slot, .ds-pagination__MGLLcm__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__MGLLcm--compact .ds-pagination__MGLLcm__compact, .ds-pagination__MGLLcm--auto .ds-pagination__MGLLcm__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__MGLLcm--compact .ds-pagination__MGLLcm__compact, .ds-pagination__MGLLcm--auto .ds-pagination__MGLLcm__compact {
+  .ds-pagination__KmYz6O--compact .ds-pagination__KmYz6O__compact, .ds-pagination__KmYz6O--auto .ds-pagination__KmYz6O__compact {
     width: auto;
   }
 }
-.ds-pagination__MGLLcm--compact .ds-pagination__MGLLcm__compact slot, .ds-pagination__MGLLcm--auto .ds-pagination__MGLLcm__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__MGLLcm ::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__MGLLcm--compact .ds-pagination__MGLLcm__full {
+.ds-pagination__KmYz6O--compact .ds-pagination__KmYz6O__full {
   display: none;
 }
-.ds-pagination__MGLLcm--full .ds-pagination__MGLLcm__compact {
+.ds-pagination__KmYz6O--full .ds-pagination__KmYz6O__compact {
   display: none;
 }
-.ds-pagination__MGLLcm--auto .ds-pagination__MGLLcm__full {
+.ds-pagination__KmYz6O--auto .ds-pagination__KmYz6O__full {
   display: none;
 }
 @media (min-width: 60rem) {
-  .ds-pagination__MGLLcm--auto .ds-pagination__MGLLcm__full {
+  .ds-pagination__KmYz6O--auto .ds-pagination__KmYz6O__full {
     display: contents;
   }
-  .ds-pagination__MGLLcm--auto .ds-pagination__MGLLcm__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: '76c0552832f7624b8e8305da6f81a434c898a57d', 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: '2b74fd509c8aacdd2a23f9ab73335123cafdd9a4', class: `${baseClass}__compact` }, h("slot", { key: 'a2652723a0b7f6121299b74dc7804a10d0751b2f', name: "compact", onSlotchange: () => this.updateContext() })), h("div", { key: 'da1cdd283f3c489df7af3bc40c6091477d3269d3', class: `${baseClass}__full` }, h("slot", { key: 'affbe3c2bda9362accd81a1cb4b9fdf55007d64b', 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"; }