@uh-design-system/component-library 1.6.0 → 1.7.0-rc.0

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

@@ -1,4 +1,4 @@
-.ds-modal__WN0Emr {
+.ds-modal__oJU1eo {
   position: fixed;
   padding: 0;
   border: 0;
@@ -12,10 +12,10 @@
   overflow-y: hidden;
   inset: 0;
 }
-.ds-modal__WN0Emr--open {
+.ds-modal__oJU1eo--open {
   overflow-y: auto;
 }
-.ds-modal__WN0Emr__positioner {
+.ds-modal__oJU1eo__positioner {
   pointer-events: none;
   display: flex;
   flex-direction: column;
@@ -26,18 +26,18 @@
   margin-block: auto 0;
 }
 @media (min-width: 30rem) {
-  .ds-modal__WN0Emr__positioner {
+  .ds-modal__oJU1eo__positioner {
     justify-content: center;
     padding-block: var(--ds-spacing-small);
     margin-block: auto;
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__WN0Emr__positioner {
+  .ds-modal__oJU1eo__positioner {
     padding-block: var(--ds-spacing-xLarge);
   }
 }
-.ds-modal__WN0Emr__container {
+.ds-modal__oJU1eo__container {
   pointer-events: auto;
   cursor: unset;
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
@@ -49,32 +49,32 @@
   transition: scale var(--ds-modal-transition-out-duration) ease-out, opacity var(--ds-modal-transition-out-duration) ease-out, transform var(--ds-modal-transition-out-duration) ease-out;
 }
 @media (min-width: 30rem) {
-  .ds-modal__WN0Emr__container {
+  .ds-modal__oJU1eo__container {
     margin: auto;
     width: fit-content;
     max-width: calc(100vw - 2 * var(--ds-spacing-small));
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__WN0Emr__container {
+  .ds-modal__oJU1eo__container {
     max-width: calc(100vw - 2 * var(--ds-spacing-xLarge));
   }
 }
-.ds-modal__WN0Emr__container--full {
+.ds-modal__oJU1eo__container--full {
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-modal__WN0Emr__container--small {
+  .ds-modal__oJU1eo__container--small {
     width: 480px;
   }
-  .ds-modal__WN0Emr__container--medium {
+  .ds-modal__oJU1eo__container--medium {
     width: 640px;
   }
-  .ds-modal__WN0Emr__container--large {
+  .ds-modal__oJU1eo__container--large {
     width: 800px;
   }
 }
-.ds-modal__WN0Emr__container--scrollable {
+.ds-modal__oJU1eo__container--scrollable {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -83,31 +83,31 @@
   min-height: calc(320px - 2 * var(--ds-spacing-small));
 }
 @media (min-width: 30rem) {
-  .ds-modal__WN0Emr__container--scrollable {
+  .ds-modal__oJU1eo__container--scrollable {
     max-height: calc(100vh + calc(-2 * var(--ds-spacing-small)));
     max-height: calc(100dvh + calc(-2 * var(--ds-spacing-small)));
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__WN0Emr__container--scrollable {
+  .ds-modal__oJU1eo__container--scrollable {
     max-height: calc(100vh + calc(-2 * var(--ds-spacing-xLarge)));
     max-height: calc(100dvh + calc(-2 * var(--ds-spacing-xLarge)));
   }
 }
-.ds-modal__WN0Emr--open .ds-modal__WN0Emr__container {
+.ds-modal__oJU1eo--open .ds-modal__oJU1eo__container {
   scale: 1;
   opacity: 1;
   transform: translateY(0);
 }
-.ds-modal__WN0Emr--in .ds-modal__WN0Emr__container {
+.ds-modal__oJU1eo--in .ds-modal__oJU1eo__container {
   transition: scale var(--ds-modal-transition-in-duration) ease-out, opacity var(--ds-modal-transition-in-duration) ease-out, transform var(--ds-modal-transition-in-duration) ease-out;
 }
 @media (prefers-reduced-motion: reduce) {
-  .ds-modal__WN0Emr__container, .ds-modal__WN0Emr--in .ds-modal__WN0Emr__container {
+  .ds-modal__oJU1eo__container, .ds-modal__oJU1eo--in .ds-modal__oJU1eo__container {
     transition: none;
   }
 }
-.ds-modal__WN0Emr__header {
+.ds-modal__oJU1eo__header {
   position: relative;
   display: flex;
   flex-direction: row;
@@ -117,81 +117,81 @@
   padding-inline: var(--ds-spacing-small);
 }
 @media (min-width: 30rem) {
-  .ds-modal__WN0Emr__header {
+  .ds-modal__oJU1eo__header {
     padding-block: var(--ds-spacing-medium) var(--ds-spacing-small);
     padding-inline: var(--ds-spacing-medium);
   }
 }
-.ds-modal__WN0Emr__header--sticky {
+.ds-modal__oJU1eo__header--sticky {
   position: sticky;
   top: 0;
   background-color: var(--ds-bgColor-white);
   border-block-end: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-modal__WN0Emr__header__heading:focus-visible {
+.ds-modal__oJU1eo__header__heading: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-modal__WN0Emr__header__heading {
+.ds-modal__oJU1eo__header__heading {
   display: flex;
   gap: var(--ds-spacing-xSmall);
 }
-.ds-modal__WN0Emr__header__heading__text {
+.ds-modal__oJU1eo__header__heading__text {
   margin-block: var(--ds-spacing-4xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-modal__WN0Emr__header__heading__text {
+  .ds-modal__oJU1eo__header__heading__text {
     margin-block: calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall));
   }
 }
-.ds-modal__WN0Emr__header__heading__icon {
+.ds-modal__oJU1eo__header__heading__icon {
   display: block;
   margin-block: var(--ds-spacing-4xSmall);
   margin-inline-end: var(--ds-spacing-3xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-modal__WN0Emr__header__heading__icon {
+  .ds-modal__oJU1eo__header__heading__icon {
     margin-block: var(--ds-spacing-3xSmall);
   }
 }
-.ds-modal__WN0Emr__header__close-button {
+.ds-modal__oJU1eo__header__close-button {
   margin-inline-start: auto;
 }
 @media (min-width: 60rem) {
-  .ds-modal__WN0Emr__header__close-button {
+  .ds-modal__oJU1eo__header__close-button {
     margin-block: var(--ds-spacing-4xSmall);
   }
 }
-.ds-modal__WN0Emr__content:focus-visible {
+.ds-modal__oJU1eo__content:focus-visible {
   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-modal__WN0Emr__content {
+.ds-modal__oJU1eo__content {
   position: relative;
   padding-inline: var(--ds-spacing-small);
   flex: 1;
   min-height: 0;
 }
 @media (min-width: 30rem) {
-  .ds-modal__WN0Emr__content {
+  .ds-modal__oJU1eo__content {
     padding-inline: var(--ds-spacing-medium);
   }
 }
-.ds-modal__WN0Emr__content--padded {
+.ds-modal__oJU1eo__content--padded {
   padding-block-end: var(--ds-spacing-small);
 }
 @media (min-width: 30rem) {
-  .ds-modal__WN0Emr__content--padded {
+  .ds-modal__oJU1eo__content--padded {
     padding-block-end: var(--ds-spacing-medium);
   }
 }
-.ds-modal__WN0Emr__content--scrollable {
+.ds-modal__oJU1eo__content--scrollable {
   overflow-y: auto;
   padding-block-end: unset;
 }
-.ds-modal__WN0Emr__content--scrollable__top-scrim, .ds-modal__WN0Emr__content--scrollable__bottom-scrim {
+.ds-modal__oJU1eo__content--scrollable__top-scrim, .ds-modal__oJU1eo__content--scrollable__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -201,43 +201,43 @@
   z-index: 1;
   display: none;
 }
-.ds-modal__WN0Emr__content--scrollable__top-scrim--open, .ds-modal__WN0Emr__content--scrollable__bottom-scrim--open {
+.ds-modal__oJU1eo__content--scrollable__top-scrim--open, .ds-modal__oJU1eo__content--scrollable__bottom-scrim--open {
   display: block;
 }
-.ds-modal__WN0Emr__content--scrollable__top-scrim {
+.ds-modal__oJU1eo__content--scrollable__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%);
 }
-.ds-modal__WN0Emr__content--scrollable__bottom-scrim {
+.ds-modal__oJU1eo__content--scrollable__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%);
 }
-.ds-modal__WN0Emr__content--scrollable:focus-visible .ds-modal__WN0Emr__content--scrollable__top-scrim {
+.ds-modal__oJU1eo__content--scrollable:focus-visible .ds-modal__oJU1eo__content--scrollable__top-scrim {
   top: var(--ds-borderWidth-thin);
 }
-.ds-modal__WN0Emr__content--scrollable:focus-visible .ds-modal__WN0Emr__content--scrollable__bottom-scrim {
+.ds-modal__oJU1eo__content--scrollable:focus-visible .ds-modal__oJU1eo__content--scrollable__bottom-scrim {
   bottom: var(--ds-borderWidth-thin);
 }
-.ds-modal__WN0Emr__footer {
+.ds-modal__oJU1eo__footer {
   position: relative;
 }
-.ds-modal__WN0Emr__footer:not(:empty) {
+.ds-modal__oJU1eo__footer:not(:empty) {
   display: flex;
   flex-direction: column;
   padding: var(--ds-spacing-small);
   gap: var(--ds-spacing-xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-modal__WN0Emr__footer:not(:empty) {
+  .ds-modal__oJU1eo__footer:not(:empty) {
     flex-direction: row;
     padding: var(--ds-spacing-medium);
     gap: var(--ds-spacing-small);
   }
 }
-.ds-modal__WN0Emr__footer:not(:empty) + .ds-modal__WN0Emr__content {
+.ds-modal__oJU1eo__footer:not(:empty) + .ds-modal__oJU1eo__content {
   border-block-end: 0;
 }
-.ds-modal__WN0Emr__footer--sticky:not(:empty) {
+.ds-modal__oJU1eo__footer--sticky:not(:empty) {
   position: sticky;
   bottom: 0;
   background-color: var(--ds-bgColor-white);

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

@@ -3,76 +3,76 @@
   width: 100%;
 }
 
-.ds-notification__WN0Emr {
+.ds-notification__oJU1eo {
   padding: var(--ds-spacing-xSmall, 12px);
 }
-.ds-notification__WN0Emr.ds-notification__WN0Emr--neutral {
+.ds-notification__oJU1eo.ds-notification__oJU1eo--neutral {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__WN0Emr.ds-notification__WN0Emr--neutral .ds-notification__WN0Emr__icon {
+.ds-notification__oJU1eo.ds-notification__oJU1eo--neutral .ds-notification__oJU1eo__icon {
   color: var(--ds-iconColor-default);
   margin-bottom: auto;
 }
-.ds-notification__WN0Emr.ds-notification__WN0Emr--neutralWhite {
+.ds-notification__oJU1eo.ds-notification__oJU1eo--neutralWhite {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__WN0Emr.ds-notification__WN0Emr--neutralWhite .ds-notification__WN0Emr__icon {
+.ds-notification__oJU1eo.ds-notification__oJU1eo--neutralWhite .ds-notification__oJU1eo__icon {
   color: var(--ds-iconColor-default);
   margin-bottom: auto;
 }
-.ds-notification__WN0Emr.ds-notification__WN0Emr--info {
+.ds-notification__oJU1eo.ds-notification__oJU1eo--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-info);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__WN0Emr.ds-notification__WN0Emr--info .ds-notification__WN0Emr__icon {
+.ds-notification__oJU1eo.ds-notification__oJU1eo--info .ds-notification__oJU1eo__icon {
   color: var(--ds-iconColor-info);
   margin-bottom: auto;
 }
-.ds-notification__WN0Emr.ds-notification__WN0Emr--success {
+.ds-notification__oJU1eo.ds-notification__oJU1eo--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-success);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__WN0Emr.ds-notification__WN0Emr--success .ds-notification__WN0Emr__icon {
+.ds-notification__oJU1eo.ds-notification__oJU1eo--success .ds-notification__oJU1eo__icon {
   color: var(--ds-iconColor-success);
   margin-bottom: auto;
 }
-.ds-notification__WN0Emr.ds-notification__WN0Emr--attention {
+.ds-notification__oJU1eo.ds-notification__oJU1eo--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-attention);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__WN0Emr.ds-notification__WN0Emr--attention .ds-notification__WN0Emr__icon {
+.ds-notification__oJU1eo.ds-notification__oJU1eo--attention .ds-notification__oJU1eo__icon {
   color: var(--ds-iconColor-attention);
   margin-bottom: auto;
 }
-.ds-notification__WN0Emr.ds-notification__WN0Emr--danger {
+.ds-notification__oJU1eo.ds-notification__oJU1eo--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-danger);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__WN0Emr.ds-notification__WN0Emr--danger .ds-notification__WN0Emr__icon {
+.ds-notification__oJU1eo.ds-notification__oJU1eo--danger .ds-notification__oJU1eo__icon {
   color: var(--ds-iconColor-danger);
   margin-bottom: auto;
 }
-.ds-notification__WN0Emr__content {
+.ds-notification__oJU1eo__content {
   display: flex;
   gap: var(--ds-spacing-2xSmall, 8px);
   max-width: 1376px;
   margin: 0 auto;
 }
-.ds-notification__WN0Emr__content__text {
+.ds-notification__oJU1eo__content__text {
   display: flex;
   padding: var(--ds-spacing-4xSmall, 2px) 0;
   flex-direction: column;
@@ -80,11 +80,11 @@
   gap: var(--ds-spacing-4xSmall, 2px);
   flex: 1 0 0;
 }
-.ds-notification__WN0Emr__content__text__heading, .ds-notification__WN0Emr__content__text__description {
+.ds-notification__oJU1eo__content__text__heading, .ds-notification__oJU1eo__content__text__description {
   font-family: var(--ds-fontFamily-body);
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-.ds-notification__WN0Emr__content__text__description {
+.ds-notification__oJU1eo__content__text__description {
   max-width: var(--ds-notification-description-max-width, 550px);
 }

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

@@ -1,4 +1,4 @@
-.ds-option__WN0Emr {
+.ds-option__oJU1eo {
   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__WN0Emr:not(.ds-option__WN0Emr--multiple) {
+.ds-option__oJU1eo:not(.ds-option__oJU1eo--multiple) {
   justify-content: space-between;
 }
-.ds-option__WN0Emr--hidden {
+.ds-option__oJU1eo--hidden {
   display: none;
 }
-.ds-option__WN0Emr--disabled {
+.ds-option__oJU1eo--disabled {
   cursor: not-allowed;
   user-select: none;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__WN0Emr:hover:not(.ds-option__WN0Emr--disabled) {
+.ds-option__oJU1eo:hover:not(.ds-option__oJU1eo--disabled) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-option__WN0Emr:active:not(.ds-option__WN0Emr--disabled) {
+.ds-option__oJU1eo:active:not(.ds-option__oJU1eo--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-option__WN0Emr--active {
+.ds-option__oJU1eo--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__WN0Emr--active.ds-option__WN0Emr--selected:not(.ds-option__WN0Emr--multiple) {
+.ds-option__oJU1eo--active.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--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__WN0Emr--multiple.ds-option__WN0Emr--disabled {
+.ds-option__oJU1eo--multiple.ds-option__oJU1eo--disabled {
   color: var(--ds-textColor-default);
 }
-.ds-option__WN0Emr--multiple .ds-option__WN0Emr__checkbox {
+.ds-option__oJU1eo--multiple .ds-option__oJU1eo__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__WN0Emr--multiple.ds-option__WN0Emr--disabled .ds-option__WN0Emr__checkbox {
+.ds-option__oJU1eo--multiple.ds-option__oJU1eo--disabled .ds-option__oJU1eo__checkbox {
   border-color: var(--ds-borderColor-transparent);
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-option__WN0Emr--multiple.ds-option__WN0Emr--disabled:not(.ds-option__WN0Emr--selected) .ds-option__WN0Emr__checkbox {
+.ds-option__oJU1eo--multiple.ds-option__oJU1eo--disabled:not(.ds-option__oJU1eo--selected) .ds-option__oJU1eo__checkbox {
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-option__WN0Emr--selected .ds-option__WN0Emr__checkbox {
+.ds-option__oJU1eo--selected .ds-option__oJU1eo__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__WN0Emr--selected:not(.ds-option__WN0Emr--multiple) {
+.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
 }
-.ds-option__WN0Emr--selected:not(.ds-option__WN0Emr--multiple).ds-option__WN0Emr--disabled {
+.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple).ds-option__oJU1eo--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__WN0Emr--selected:not(.ds-option__WN0Emr--multiple) .ds-option__WN0Emr__description {
+.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple) .ds-option__oJU1eo__description {
   color: var(--ds-textColor-white);
 }
-.ds-option__WN0Emr--selected:not(.ds-option__WN0Emr--multiple) .ds-option__WN0Emr__check-icon {
+.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple) .ds-option__oJU1eo__check-icon {
   visibility: visible;
   color: var(--ds-textColor-white);
 }
-.ds-option__WN0Emr--selected:not(.ds-option__WN0Emr--multiple).ds-option__WN0Emr--disabled .ds-option__WN0Emr__check-icon {
+.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple).ds-option__oJU1eo--disabled .ds-option__oJU1eo__check-icon {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__WN0Emr--selected:not(.ds-option__WN0Emr--multiple):hover:not(.ds-option__WN0Emr--disabled) {
+.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple):hover:not(.ds-option__oJU1eo--disabled) {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-option__WN0Emr--selected:not(.ds-option__WN0Emr--multiple):active:not(.ds-option__WN0Emr--disabled) {
+.ds-option__oJU1eo--selected:not(.ds-option__oJU1eo--multiple):active:not(.ds-option__oJU1eo--disabled) {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-option__WN0Emr__label {
+.ds-option__oJU1eo__label {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
@@ -102,14 +102,14 @@
   grid-column: 1;
   grid-row: 1;
 }
-.ds-option__WN0Emr__check-icon {
+.ds-option__oJU1eo__check-icon {
   margin-left: var(--ds-spacing-small);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   height: 100%;
 }
-.ds-option__WN0Emr__description {
+.ds-option__oJU1eo__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__WN0Emr__description:not(:empty) {
+.ds-option__oJU1eo__description:not(:empty) {
   display: block;
 }

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

@@ -1,14 +1,14 @@
-.ds-option-group__WN0Emr {
+.ds-option-group__oJU1eo {
   display: block;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-option-group__WN0Emr--hidden {
+.ds-option-group__oJU1eo--hidden {
   display: none;
 }
-.ds-option-group__WN0Emr ul {
+.ds-option-group__oJU1eo ul {
   padding: 0;
 }
-.ds-option-group__WN0Emr__label {
+.ds-option-group__oJU1eo__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__WN0Emr__label__shadow {
+.ds-option-group__oJU1eo__label__shadow {
   box-shadow: var(--ds-shadow-overflow);
 }

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

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

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

@@ -1,4 +1,4 @@
-.ds-options-message__WN0Emr {
+.ds-options-message__oJU1eo {
   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__WN0Emr__error {
+.ds-options-message__oJU1eo__error {
   color: var(--ds-textColor-danger);
   text-align: center;
 }
-.ds-options-message__WN0Emr__error__icon {
+.ds-options-message__oJU1eo__error__icon {
   display: inline-block;
 }
-.ds-options-message__WN0Emr__error__title, .ds-options-message__WN0Emr__no-results__title {
+.ds-options-message__oJU1eo__error__title, .ds-options-message__oJU1eo__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__WN0Emr__no-results__title {
+.ds-options-message__oJU1eo__no-results__title {
   hyphens: auto;
 }
-.ds-options-message__WN0Emr__error__text, .ds-options-message__WN0Emr__no-results__text {
+.ds-options-message__oJU1eo__error__text, .ds-options-message__oJU1eo__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

@@ -1,15 +1,26 @@
+.ds-no-style-leak * {
+  all: unset;
+  box-sizing: border-box;
+  display: block;
+}
+
 :host {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-.ds-pagination-ellipsis__WN0Emr {
+.ds-pagination-ellipsis__oJU1eo {
+  all: initial;
+  display: revert;
+  box-sizing: border-box;
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
   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;
   color: var(--ds-pagination-ellipsis-colour, var(--ds-textColor-default));
-  font-size: var(--ds-pagination-font-size, var(--ds-fontSize-18));
+  font-size: inherit;
   align-content: center;
   text-align: center;
   user-select: none;