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

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

@@ -1,26 +1,26 @@
-.ds-accordion__pYthVb {
+.ds-accordion__DFAX9n {
   box-sizing: border-box;
   position: relative;
 }
-.ds-accordion__pYthVb--with-background.ds-accordion__pYthVb--expanded {
+.ds-accordion__DFAX9n--with-background.ds-accordion__DFAX9n--expanded {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__pYthVb__title {
+.ds-accordion__DFAX9n__title {
   position: relative;
   display: flex;
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   border-right: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__pYthVb__title:not(.ds-accordion__pYthVb__title--hide-top-border) .ds-accordion__pYthVb__open-button {
+.ds-accordion__DFAX9n__title:not(.ds-accordion__DFAX9n__title--hide-top-border) .ds-accordion__DFAX9n__open-button {
   border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__pYthVb__title--hide-right-border {
+.ds-accordion__DFAX9n__title--hide-right-border {
   border-right: 0;
 }
-.ds-accordion__pYthVb__title--hide-left-border {
+.ds-accordion__DFAX9n__title--hide-left-border {
   border-left: 0;
 }
-.ds-accordion__pYthVb__title--border-aligned.ds-accordion__pYthVb__title--with-background::before {
+.ds-accordion__DFAX9n__title--border-aligned.ds-accordion__DFAX9n__title--with-background::before {
   content: "";
   position: absolute;
   display: block;
@@ -29,7 +29,7 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__pYthVb__title--border-aligned.ds-accordion__pYthVb__title--with-background::after {
+.ds-accordion__DFAX9n__title--border-aligned.ds-accordion__DFAX9n__title--with-background::after {
   content: "";
   position: absolute;
   display: block;
@@ -38,36 +38,36 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__pYthVb__title--border-aligned.ds-accordion__pYthVb__title--with-background:has(.ds-accordion__pYthVb__open-button[aria-expanded=true])::before, .ds-accordion__pYthVb__title--border-aligned.ds-accordion__pYthVb__title--with-background:has(.ds-accordion__pYthVb__open-button[aria-expanded=true])::after {
+.ds-accordion__DFAX9n__title--border-aligned.ds-accordion__DFAX9n__title--with-background:has(.ds-accordion__DFAX9n__open-button[aria-expanded=true])::before, .ds-accordion__DFAX9n__title--border-aligned.ds-accordion__DFAX9n__title--with-background:has(.ds-accordion__DFAX9n__open-button[aria-expanded=true])::after {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__pYthVb__title:has(.ds-accordion__pYthVb__open-button[aria-expanded=true].ds-accordion__pYthVb__open-button--icon-button) {
+.ds-accordion__DFAX9n__title:has(.ds-accordion__DFAX9n__open-button[aria-expanded=true].ds-accordion__DFAX9n__open-button--icon-button) {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__pYthVb__title:has(.ds-accordion__pYthVb__open-button:hover:not(.ds-accordion__pYthVb__open-button--icon-button)) {
+.ds-accordion__DFAX9n__title:has(.ds-accordion__DFAX9n__open-button:hover:not(.ds-accordion__DFAX9n__open-button--icon-button)) {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-accordion__pYthVb__title:has(.ds-accordion__pYthVb__open-button:active:not(.ds-accordion__pYthVb__open-button--icon-button)) {
+.ds-accordion__DFAX9n__title:has(.ds-accordion__DFAX9n__open-button:active:not(.ds-accordion__DFAX9n__open-button--icon-button)) {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-accordion__pYthVb__header-slot {
+.ds-accordion__DFAX9n__header-slot {
   order: 2;
   position: relative;
   display: block;
   width: 100%;
 }
-.ds-accordion__pYthVb__header-slot--icon-button {
+.ds-accordion__DFAX9n__header-slot--icon-button {
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__pYthVb__header-slot--hide-top-border {
+.ds-accordion__DFAX9n__header-slot--hide-top-border {
   border-top: 0;
 }
-.ds-accordion__pYthVb__header-slot--hide-bottom-border {
+.ds-accordion__DFAX9n__header-slot--hide-bottom-border {
   border-bottom: 0;
 }
-.ds-accordion__pYthVb__open-button {
+.ds-accordion__DFAX9n__open-button {
   all: unset;
   position: relative;
   box-sizing: border-box;
@@ -86,37 +86,37 @@
   line-height: var(--ds-lineHeight-large);
   padding: calc(var(--ds-spacing-xSmall) - var(--ds-borderWidth-hairline)) var(--ds-spacing-xSmall);
 }
-.ds-accordion__pYthVb__open-button:focus-visible {
+.ds-accordion__DFAX9n__open-button: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) * 0);
 }
-.ds-accordion__pYthVb__open-button:hover {
+.ds-accordion__DFAX9n__open-button:hover {
   cursor: pointer;
 }
-.ds-accordion__pYthVb__open-button:focus-visible {
+.ds-accordion__DFAX9n__open-button:focus-visible {
   z-index: 1;
 }
-.ds-accordion__pYthVb__open-button--default {
+.ds-accordion__DFAX9n__open-button--default {
   font-size: var(--ds-fontSize-16);
 }
 @media (min-width: 60rem) {
-  .ds-accordion__pYthVb__open-button--default {
+  .ds-accordion__DFAX9n__open-button--default {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-accordion__pYthVb__open-button--compact {
+.ds-accordion__DFAX9n__open-button--compact {
   font-size: var(--ds-fontSize-14);
 }
 @media (min-width: 60rem) {
-  .ds-accordion__pYthVb__open-button--compact {
+  .ds-accordion__DFAX9n__open-button--compact {
     font-size: var(--ds-fontSize-16);
   }
 }
-.ds-accordion__pYthVb__open-button--border-aligned:not(.ds-accordion__pYthVb__open-button--icon-button) {
+.ds-accordion__DFAX9n__open-button--border-aligned:not(.ds-accordion__DFAX9n__open-button--icon-button) {
   padding-inline: 0;
 }
-.ds-accordion__pYthVb__open-button--border-aligned:not(.ds-accordion__pYthVb__open-button--icon-button)::before {
+.ds-accordion__DFAX9n__open-button--border-aligned:not(.ds-accordion__DFAX9n__open-button--icon-button)::before {
   content: "";
   position: absolute;
   display: block;
@@ -125,7 +125,7 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__pYthVb__open-button--border-aligned:not(.ds-accordion__pYthVb__open-button--icon-button)::after {
+.ds-accordion__DFAX9n__open-button--border-aligned:not(.ds-accordion__DFAX9n__open-button--icon-button)::after {
   content: "";
   position: absolute;
   display: block;
@@ -134,84 +134,84 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__pYthVb__open-button--border-aligned:not(.ds-accordion__pYthVb__open-button--icon-button):hover::before, .ds-accordion__pYthVb__open-button--border-aligned:not(.ds-accordion__pYthVb__open-button--icon-button):hover::after {
+.ds-accordion__DFAX9n__open-button--border-aligned:not(.ds-accordion__DFAX9n__open-button--icon-button):hover::before, .ds-accordion__DFAX9n__open-button--border-aligned:not(.ds-accordion__DFAX9n__open-button--icon-button):hover::after {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
   z-index: 1;
 }
-.ds-accordion__pYthVb__open-button--border-aligned:not(.ds-accordion__pYthVb__open-button--icon-button):active::before, .ds-accordion__pYthVb__open-button--border-aligned:not(.ds-accordion__pYthVb__open-button--icon-button):active::after {
+.ds-accordion__DFAX9n__open-button--border-aligned:not(.ds-accordion__DFAX9n__open-button--icon-button):active::before, .ds-accordion__DFAX9n__open-button--border-aligned:not(.ds-accordion__DFAX9n__open-button--icon-button):active::after {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-accordion__pYthVb__open-button--hide-bottom-border {
+.ds-accordion__DFAX9n__open-button--hide-bottom-border {
   border-bottom: 0;
 }
-.ds-accordion__pYthVb__open-button--icon-button {
+.ds-accordion__DFAX9n__open-button--icon-button {
   display: inline-flex;
   width: auto;
   order: 1;
 }
-.ds-accordion__pYthVb__open-button--icon-button:hover {
+.ds-accordion__DFAX9n__open-button--icon-button:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-accordion__pYthVb__open-button--icon-button:active {
+.ds-accordion__DFAX9n__open-button--icon-button:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-accordion__pYthVb__open-button__icon--default {
+.ds-accordion__DFAX9n__open-button__icon--default {
   padding-block: var(--ds-spacing-3xSmall);
 }
-.ds-accordion__pYthVb__open-button__header-slot {
+.ds-accordion__DFAX9n__open-button__header-slot {
   display: inline-block;
 }
-.ds-accordion__pYthVb__open-button__header-slot--default {
+.ds-accordion__DFAX9n__open-button__header-slot--default {
   padding-block: var(--ds-spacing-3xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-accordion__pYthVb__open-button__header-slot--default {
+  .ds-accordion__DFAX9n__open-button__header-slot--default {
     padding-block: var(--ds-spacing-4xSmall);
   }
 }
-.ds-accordion__pYthVb__open-button__header-slot--compact {
+.ds-accordion__DFAX9n__open-button__header-slot--compact {
   padding-block: 0.0625rem; /* 1px */
 }
 @media (min-width: 60rem) {
-  .ds-accordion__pYthVb__open-button__header-slot--compact {
+  .ds-accordion__DFAX9n__open-button__header-slot--compact {
     padding-block: 0;
   }
 }
-.ds-accordion__pYthVb__panel {
+.ds-accordion__DFAX9n__panel {
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   border-right: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__pYthVb__panel--hide-right-border {
+.ds-accordion__DFAX9n__panel--hide-right-border {
   border-right: 0;
 }
-.ds-accordion__pYthVb__panel--hide-left-border {
+.ds-accordion__DFAX9n__panel--hide-left-border {
   border-left: 0;
 }
-.ds-accordion__pYthVb__panel--expanded {
+.ds-accordion__DFAX9n__panel--expanded {
   display: block;
 }
-.ds-accordion__pYthVb__panel--with-background {
+.ds-accordion__DFAX9n__panel--with-background {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__pYthVb ::slotted([slot=header]) {
+.ds-accordion__DFAX9n ::slotted([slot=header]) {
   color: var(--ds-textColor-default);
 }
-.ds-accordion__pYthVb__content {
+.ds-accordion__DFAX9n__content {
   position: relative;
   color: var(--ds-textColor-default);
   padding: var(--ds-accordion-content-padding, var(--ds-spacing-2xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall));
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__pYthVb__content--hide-bottom-border {
+.ds-accordion__DFAX9n__content--hide-bottom-border {
   border-bottom: 0;
 }
-.ds-accordion__pYthVb__content--has-close-button {
+.ds-accordion__DFAX9n__content--has-close-button {
   padding-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-accordion__pYthVb__content--border-aligned {
+.ds-accordion__DFAX9n__content--border-aligned {
   padding-inline: 0;
 }
-.ds-accordion__pYthVb__content--border-aligned::before {
+.ds-accordion__DFAX9n__content--border-aligned::before {
   content: "";
   position: absolute;
   display: block;
@@ -220,7 +220,7 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__pYthVb__content--border-aligned::after {
+.ds-accordion__DFAX9n__content--border-aligned::after {
   content: "";
   position: absolute;
   display: block;
@@ -229,10 +229,10 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__pYthVb__content--with-background::before, .ds-accordion__pYthVb__content--with-background::after {
+.ds-accordion__DFAX9n__content--with-background::before, .ds-accordion__DFAX9n__content--with-background::after {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__pYthVb__close-button {
+.ds-accordion__DFAX9n__close-button {
   display: flex;
   flex-direction: row;
   padding-block-start: var(--ds-spacing-2xSmall);

package/dist/collection/components/01-base-components/ds-assistive-text/ds-assistive-text.css

@@ -1,4 +1,4 @@
-.ds-assistive-text__pYthVb {
+.ds-assistive-text__DFAX9n {
   display: inline-block;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);

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

@@ -1,4 +1,4 @@
-.ds-badge__pYthVb {
+.ds-badge__DFAX9n {
   display: flex;
   width: fit-content;
   min-width: 24px;
@@ -9,39 +9,39 @@
   gap: var(--ds-spacing-3xSmall, 4px);
   border-radius: 12px;
 }
-.ds-badge__pYthVb--default {
+.ds-badge__DFAX9n--default {
   background-color: var(--ds-overlay-black-10);
   color: var(--ds-textColor-default);
 }
-.ds-badge__pYthVb--success {
+.ds-badge__DFAX9n--success {
   background-color: var(--ds-bgColor-success);
   color: var(--ds-textColor-success);
 }
-.ds-badge__pYthVb--attention {
+.ds-badge__DFAX9n--attention {
   background-color: var(--ds-bgColor-attention);
   color: var(--ds-textColor-attention);
 }
-.ds-badge__pYthVb--danger {
+.ds-badge__DFAX9n--danger {
   background-color: var(--ds-bgColor-danger);
   color: var(--ds-textColor-danger);
 }
-.ds-badge__pYthVb--info {
+.ds-badge__DFAX9n--info {
   background-color: var(--ds-bgColor-info);
   color: var(--ds-textColor-info);
 }
-.ds-badge__pYthVb--notification {
+.ds-badge__DFAX9n--notification {
   background-color: var(--ds-palette-red-50);
   color: var(--ds-textColor-white);
 }
-.ds-badge__pYthVb--primary {
+.ds-badge__DFAX9n--primary {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
 }
-.ds-badge__pYthVb--disabled {
+.ds-badge__DFAX9n--disabled {
   background-color: var(--ds-overlay-black-10);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-badge__pYthVb__content {
+.ds-badge__DFAX9n__content {
   display: flex;
   padding: 0 var(--ds-spacing-3xSmall, 4px);
   flex-direction: column;
@@ -49,6 +49,6 @@
   align-items: center;
   gap: var(--ds-spacing-2xSmall, 8px);
 }
-.ds-badge__pYthVb__content__text {
+.ds-badge__DFAX9n__content__text {
   white-space: nowrap;
 }

package/dist/collection/components/01-base-components/ds-breadcrumbs/ds-breadcrumb/ds-breadcrumb.css

@@ -2,20 +2,20 @@
   display: contents;
 }
 
-.ds-breadcrumb__pYthVb {
+.ds-breadcrumb__DFAX9n {
   display: contents;
 }
-.ds-breadcrumb__pYthVb--hidden {
+.ds-breadcrumb__DFAX9n--hidden {
   display: none;
 }
-.ds-breadcrumb__pYthVb__content {
+.ds-breadcrumb__DFAX9n__content {
   display: inline;
   vertical-align: middle;
 }
-.ds-breadcrumb__pYthVb__content__link::part(link) {
+.ds-breadcrumb__DFAX9n__content__link::part(link) {
   vertical-align: middle;
 }
-.ds-breadcrumb__pYthVb__content__current-page {
+.ds-breadcrumb__DFAX9n__content__current-page {
   color: var(--ds-textColor-secondary);
   font-variant-numeric: lining-nums proportional-nums;
   font-family: var(--ds-fontFamily-body);

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

@@ -1,16 +1,16 @@
-.ds-breadcrumbs-expand-button__pYthVb {
+.ds-breadcrumbs-expand-button__DFAX9n {
   display: inline;
   vertical-align: middle;
 }
-.ds-breadcrumbs-expand-button__pYthVb--hidden {
+.ds-breadcrumbs-expand-button__DFAX9n--hidden {
   display: none;
 }
-.ds-breadcrumbs-expand-button__pYthVb__button:focus-visible {
+.ds-breadcrumbs-expand-button__DFAX9n__button: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-breadcrumbs-expand-button__pYthVb__button {
+.ds-breadcrumbs-expand-button__DFAX9n__button {
   background: none;
   border: none;
   padding: 0;
@@ -32,7 +32,7 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-breadcrumbs-expand-button__pYthVb__button:hover, .ds-breadcrumbs-expand-button__pYthVb__button:active {
+.ds-breadcrumbs-expand-button__DFAX9n__button:hover, .ds-breadcrumbs-expand-button__DFAX9n__button:active {
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }

package/dist/collection/components/01-base-components/ds-breadcrumbs/ds-breadcrumbs-separator/ds-breadcrumbs-separator.css

@@ -1,4 +1,4 @@
-.ds-breadcrumbs-separator__pYthVb {
+.ds-breadcrumbs-separator__DFAX9n {
   display: inline-block;
   line-height: var(--ds-lineHeight-large);
   vertical-align: middle;
@@ -6,7 +6,7 @@
   margin-right: var(--ds-spacing-3xSmall, 4px);
 }
 @media (min-width: 60rem) {
-  .ds-breadcrumbs-separator__pYthVb {
+  .ds-breadcrumbs-separator__DFAX9n {
     margin-left: var(--ds-spacing-2xSmall, 8px);
     margin-right: var(--ds-spacing-2xSmall, 8px);
   }

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

@@ -1,4 +1,4 @@
-.ds-breadcrumbs__pYthVb {
+.ds-breadcrumbs__DFAX9n {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -7,11 +7,11 @@
   line-height: var(--ds-lineHeight-small);
 }
 @media (min-width: 60rem) {
-  .ds-breadcrumbs__pYthVb {
+  .ds-breadcrumbs__DFAX9n {
     min-height: 32px;
   }
 }
-.ds-breadcrumbs__pYthVb__breadcrumbs {
+.ds-breadcrumbs__DFAX9n__breadcrumbs {
   display: inline-block;
   vertical-align: middle;
   margin: 0;
@@ -21,7 +21,7 @@
   font-size: var(--ds-fontSize-14);
 }
 @media (min-width: 60rem) {
-  .ds-breadcrumbs__pYthVb__breadcrumbs {
+  .ds-breadcrumbs__DFAX9n__breadcrumbs {
     padding: var(--ds-spacing-4xSmall, 2px) 0;
     font-size: var(--ds-fontSize-16);
   }