@uh-design-system/component-library 1.0.1 → 1.0.2-rc.0

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

@@ -1,4 +1,4 @@
-.ds-accordion__1vtSAV__open-button {
+.ds-accordion__rhSGFS__open-button {
   color: var(--ds-textColor-default);
   outline: var(--ds-borderWidth-thick) solid transparent;
   fill: var(--ds-textColor-default);
@@ -12,37 +12,37 @@
   position: relative;
   width: 100%;
 }
-.ds-accordion__1vtSAV__open-button:focus-visible {
+.ds-accordion__rhSGFS__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) * 1);
 }
-.ds-accordion__1vtSAV__open-button .ds-accordion__1vtSAV:hover:not(:focus-visible) .ds-accordion__1vtSAV--border-aligned::before, .ds-accordion__1vtSAV__open-button .ds-accordion__1vtSAV:hover:not(:focus-visible) .ds-accordion__1vtSAV--border-aligned::after {
+.ds-accordion__rhSGFS__open-button .ds-accordion__rhSGFS:hover:not(:focus-visible) .ds-accordion__rhSGFS--border-aligned::before, .ds-accordion__rhSGFS__open-button .ds-accordion__rhSGFS:hover:not(:focus-visible) .ds-accordion__rhSGFS--border-aligned::after {
   content: "";
   position: absolute;
   top: 0;
   width: var(--ds-spacing-small);
   height: 100%;
 }
-.ds-accordion__1vtSAV__open-button .ds-accordion__1vtSAV:hover:not(:focus-visible) .ds-accordion__1vtSAV--border-aligned::before {
+.ds-accordion__rhSGFS__open-button .ds-accordion__rhSGFS:hover:not(:focus-visible) .ds-accordion__rhSGFS--border-aligned::before {
   left: calc(var(--ds-spacing-small) * -1);
 }
-.ds-accordion__1vtSAV__open-button .ds-accordion__1vtSAV:hover:not(:focus-visible) .ds-accordion__1vtSAV--border-aligned::after {
+.ds-accordion__rhSGFS__open-button .ds-accordion__rhSGFS:hover:not(:focus-visible) .ds-accordion__rhSGFS--border-aligned::after {
   right: calc(var(--ds-spacing-small) * -1);
 }
-.ds-accordion__1vtSAV__open-button:hover {
+.ds-accordion__rhSGFS__open-button:hover {
   cursor: pointer;
 }
-.ds-accordion__1vtSAV__open-button:hover, .ds-accordion__1vtSAV__open-button:hover::before, .ds-accordion__1vtSAV__open-button:hover::after {
+.ds-accordion__rhSGFS__open-button:hover, .ds-accordion__rhSGFS__open-button:hover::before, .ds-accordion__rhSGFS__open-button:hover::after {
   background: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-accordion__1vtSAV__open-button:active, .ds-accordion__1vtSAV__open-button:active::before, .ds-accordion__1vtSAV__open-button:active::after {
+.ds-accordion__rhSGFS__open-button:active, .ds-accordion__rhSGFS__open-button:active::before, .ds-accordion__rhSGFS__open-button:active::after {
   background: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-accordion__1vtSAV__open-button:focus-visible {
+.ds-accordion__rhSGFS__open-button:focus-visible {
   z-index: 1;
 }
-.ds-accordion__1vtSAV__open-button.ds-accordion__1vtSAV--default {
+.ds-accordion__rhSGFS__open-button.ds-accordion__rhSGFS--default {
   padding: var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-18);
@@ -50,32 +50,32 @@
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--letterSpacing-wide);
 }
-.ds-accordion__1vtSAV__open-button.ds-accordion__1vtSAV--compact {
+.ds-accordion__rhSGFS__open-button.ds-accordion__rhSGFS--compact {
   font-size: var(--ds-fontSize-16);
   padding: var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
   line-height: var(--ds-lineHeight-large);
   font-weight: var(--ds-fontWeight-semibold);
 }
-.ds-accordion__1vtSAV__open-button.ds-accordion__1vtSAV--border-aligned:not(:focus-visible) {
+.ds-accordion__rhSGFS__open-button.ds-accordion__rhSGFS--border-aligned:not(:focus-visible) {
   padding-inline: 0;
   margin-inline: var(--ds-spacing-small);
   position: relative;
   width: calc(100% - var(--ds-spacing-large));
 }
-:host(:first-child) .ds-accordion__1vtSAV__open-button:not(.ds-accordion__1vtSAV--hide-top-border) {
+:host(:first-child) .ds-accordion__rhSGFS__open-button:not(.ds-accordion__rhSGFS--hide-top-border) {
   border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-:host(:first-child) .ds-accordion__1vtSAV__open-button:not(.ds-accordion__1vtSAV--hide-top-border):focus-visible {
+:host(:first-child) .ds-accordion__rhSGFS__open-button:not(.ds-accordion__rhSGFS--hide-top-border):focus-visible {
   border-top-color: transparent;
 }
-.ds-accordion__1vtSAV__open-button:not(.ds-accordion__1vtSAV--hide-bottom-border)[aria-expanded=false] {
+.ds-accordion__rhSGFS__open-button:not(.ds-accordion__rhSGFS--hide-bottom-border)[aria-expanded=false] {
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__1vtSAV__panel--border-aligned {
+.ds-accordion__rhSGFS__panel--border-aligned {
   position: relative;
   width: calc(100% - 32px);
 }
-.ds-accordion__1vtSAV__panel--border-aligned::before {
+.ds-accordion__rhSGFS__panel--border-aligned::before {
   display: inline-block;
   content: " ";
   position: absolute;
@@ -85,7 +85,7 @@
   background: var(--ds-bgColor-white);
   width: var(--ds-spacing-small);
 }
-.ds-accordion__1vtSAV__panel--border-aligned::after {
+.ds-accordion__rhSGFS__panel--border-aligned::after {
   display: inline-block;
   content: " ";
   position: absolute;
@@ -95,40 +95,40 @@
   background: var(--ds-bgColor-white);
   width: var(--ds-spacing-small);
 }
-.ds-accordion__1vtSAV__panel--expanded {
+.ds-accordion__rhSGFS__panel--expanded {
   display: block;
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   padding-inline: var(--ds-spacing-small);
 }
-.ds-accordion__1vtSAV__panel--expanded self__panel--hide-bottom-border {
+.ds-accordion__rhSGFS__panel--expanded self__panel--hide-bottom-border {
   border-bottom: 0;
 }
-.ds-accordion__1vtSAV ::slotted([slot=header]) {
+.ds-accordion__rhSGFS ::slotted([slot=header]) {
   color: var(--ds-textColor-default);
 }
-.ds-accordion__1vtSAV__content {
+.ds-accordion__rhSGFS__content {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
   padding-block: var(--ds-spacing-small);
 }
-.ds-accordion__1vtSAV__content .ds-accordion__1vtSAV--default {
+.ds-accordion__rhSGFS__content .ds-accordion__rhSGFS--default {
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
   line-height: var(--ds-lineHeight-xLarge);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
 @media (min-width: 30rem) {
-  .ds-accordion__1vtSAV__content .ds-accordion__1vtSAV--default {
+  .ds-accordion__rhSGFS__content .ds-accordion__rhSGFS--default {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-accordion__1vtSAV__content .ds-accordion__1vtSAV--compact {
+.ds-accordion__rhSGFS__content .ds-accordion__rhSGFS--compact {
   font-size: var(--fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--letterSpacing-wide);
 }
-.ds-accordion__1vtSAV__close-button {
+.ds-accordion__rhSGFS__close-button {
   display: flex;
   flex-direction: row;
   gap: var(--ds-spacing-2xSmall);

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

@@ -7,11 +7,11 @@
 :host {
   display: inline-block;
 }
-:host:has(.ds-button__1vtSAV--full-width) {
+:host:has(.ds-button__rhSGFS--full-width) {
   width: 100%;
 }
 
-.ds-button__1vtSAV {
+.ds-button__rhSGFS {
   width: 100%;
   align-items: center;
   border-radius: 0;
@@ -22,257 +22,257 @@
   outline: 4px solid transparent;
   justify-content: center;
 }
-.ds-button__1vtSAV:not(.ds-button__1vtSAV--supplementary) .ds-button__1vtSAV__value {
+.ds-button__rhSGFS:not(.ds-button__rhSGFS--supplementary) .ds-button__rhSGFS__value {
   padding-right: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-3xSmall);
 }
-.ds-button__1vtSAV--supplementary:has(.ds-button__1vtSAV__spinner) .ds-button__1vtSAV__value {
+.ds-button__rhSGFS--supplementary:has(.ds-button__rhSGFS__spinner) .ds-button__rhSGFS__value {
   padding-right: 0;
   padding-left: var(--ds-spacing-3xSmall);
 }
-.ds-button__1vtSAV__icon {
+.ds-button__rhSGFS__icon {
   height: 1.5rem;
 }
-.ds-button__1vtSAV:has(.ds-button__1vtSAV__spinner):not(.ds-button__1vtSAV--small) .ds-button__1vtSAV__value {
+.ds-button__rhSGFS:has(.ds-button__rhSGFS__spinner):not(.ds-button__rhSGFS--small) .ds-button__rhSGFS__value {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-button__1vtSAV--icon-only {
+.ds-button__rhSGFS--icon-only {
   aspect-ratio: 1;
   justify-content: center;
 }
-.ds-button__1vtSAV:not(.ds-button__1vtSAV--small):not(.ds-button__1vtSAV--secondary) {
+.ds-button__rhSGFS:not(.ds-button__rhSGFS--small):not(.ds-button__rhSGFS--secondary) {
   border-width: 0px;
   font-size: var(--ds-fontSize-18);
   min-height: 44px;
   padding: var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall);
 }
-.ds-button__1vtSAV:not(.ds-button__1vtSAV--small).ds-button__1vtSAV--secondary {
+.ds-button__rhSGFS:not(.ds-button__rhSGFS--small).ds-button__rhSGFS--secondary {
   border-width: var(--ds-borderWidth-thin);
   font-size: var(--ds-fontSize-18);
   min-height: 44px;
   padding: var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall);
 }
-.ds-button__1vtSAV:not(.ds-button__1vtSAV--small).ds-button__1vtSAV--icon-only {
+.ds-button__rhSGFS:not(.ds-button__rhSGFS--small).ds-button__rhSGFS--icon-only {
   padding-left: 0;
   padding-right: 0;
 }
-.ds-button__1vtSAV--small:not(.ds-button__1vtSAV--secondary) {
+.ds-button__rhSGFS--small:not(.ds-button__rhSGFS--secondary) {
   border-width: 0px;
   font-size: var(--ds-fontSize-14);
   min-height: 32px;
   padding: var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall);
 }
-.ds-button__1vtSAV--small.ds-button__1vtSAV--secondary {
+.ds-button__rhSGFS--small.ds-button__rhSGFS--secondary {
   border-width: var(--ds-borderWidth-thin);
   font-size: var(--ds-fontSize-14);
   min-height: 32px;
   padding: var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall);
 }
-.ds-button__1vtSAV--small.ds-button__1vtSAV--icon-only {
+.ds-button__rhSGFS--small.ds-button__rhSGFS--icon-only {
   padding-left: 0;
   padding-right: 0;
   width: 32px;
 }
-.ds-button__1vtSAV--small .ds-button__1vtSAV__icon {
+.ds-button__rhSGFS--small .ds-button__rhSGFS__icon {
   height: 1rem;
 }
-.ds-button__1vtSAV--icon-start:not(.ds-button__1vtSAV--small) .ds-button__1vtSAV__icon {
+.ds-button__rhSGFS--icon-start:not(.ds-button__rhSGFS--small) .ds-button__rhSGFS__icon {
   margin-right: var(--ds-spacing-3xSmall);
 }
-.ds-button__1vtSAV--icon-end:not(.ds-button__1vtSAV--small) .ds-button__1vtSAV__icon {
+.ds-button__rhSGFS--icon-end:not(.ds-button__rhSGFS--small) .ds-button__rhSGFS__icon {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--blue {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--blue {
   background-color: var(--ds-bgColor-primary);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--blue:focus-visible {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--blue: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-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--blue:hover {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--blue:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--blue:active, .ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--blue--active {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--blue:active, .ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--blue--active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--blue.ds-button__1vtSAV--disabled, .ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--blue:disabled {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--blue.ds-button__rhSGFS--disabled, .ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--blue:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--black {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--black {
   background-color: var(--ds-bgColor-black);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--black:focus-visible {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--black: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-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--black:hover {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--black:hover {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--black:active, .ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--black--active {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--black:active, .ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--black--active {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--black.ds-button__1vtSAV--disabled, .ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--black:disabled {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--black.ds-button__rhSGFS--disabled, .ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--black:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--white {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--white {
   background-color: var(--ds-bgColor-white);
   border-color: transparent;
   color: var(--ds-textColor-default);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--white:focus-visible {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--white:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--white:hover {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--white:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--white:active, .ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--white--active {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--white:active, .ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--white--active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--white.ds-button__1vtSAV--disabled, .ds-button__1vtSAV.ds-button__1vtSAV--primary.ds-button__1vtSAV--white:disabled {
+.ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--white.ds-button__rhSGFS--disabled, .ds-button__rhSGFS.ds-button__rhSGFS--primary.ds-button__rhSGFS--white:disabled {
   background-color: var(--ds-bgColor-disabled-onDark);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onDark);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--blue {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--blue {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-primary);
   color: var(--ds-textColor-primary);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--blue:focus-visible {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--blue: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-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--blue:hover {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--blue:active, .ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--blue--active {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--blue:active, .ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--blue--active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--blue.ds-button__1vtSAV--disabled, .ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--blue:disabled {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--blue.ds-button__rhSGFS--disabled, .ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--blue:disabled {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--black {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--black {
   background-color: transparent;
   border-color: var(--ds-borderColor-black);
   color: var(--ds-textColor-default);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--black:focus-visible {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--black: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-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--black:hover {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--black:active, .ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--black--active {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--black:active, .ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--black--active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--black.ds-button__1vtSAV--disabled, .ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--black:disabled {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--black.ds-button__rhSGFS--disabled, .ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--black:disabled {
   background-color: transparent;
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--white {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--white {
   background-color: transparent;
   border-color: var(--ds-borderColor-white);
   color: var(--ds-textColor-white);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--white:focus-visible {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--white:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--white:hover {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--white:active, .ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--white--active {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--white:active, .ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--white--active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--white.ds-button__1vtSAV--disabled, .ds-button__1vtSAV.ds-button__1vtSAV--secondary.ds-button__1vtSAV--white:disabled {
+.ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--white.ds-button__rhSGFS--disabled, .ds-button__rhSGFS.ds-button__rhSGFS--secondary.ds-button__rhSGFS--white:disabled {
   background-color: transparent;
   border-color: var(--ds-borderColor-disabled-onDark);
   color: var(--ds-textColor-disabled-onDark);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--blue {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--blue {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-primary);
   padding-right: var(--ds-spacing-4xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--blue:focus-visible {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--blue: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-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--blue:hover {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--blue:active, .ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--blue--active {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--blue:active, .ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--blue--active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--blue.ds-button__1vtSAV--disabled, .ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--blue:disabled {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--blue.ds-button__rhSGFS--disabled, .ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--blue:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--black {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--black {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-default);
   padding-right: var(--ds-spacing-4xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--black:focus-visible {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--black: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-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--black:hover {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--black:active, .ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--black--active {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--black:active, .ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--black--active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--black.ds-button__1vtSAV--disabled, .ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--black:disabled {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--black.ds-button__rhSGFS--disabled, .ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--black:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--white {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--white {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-white);
   padding-right: var(--ds-spacing-4xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--white:focus-visible {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--white:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--white:hover {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--white:active, .ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--white--active {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--white:active, .ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--white--active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-.ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--white.ds-button__1vtSAV--disabled, .ds-button__1vtSAV.ds-button__1vtSAV--supplementary.ds-button__1vtSAV--white:disabled {
+.ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--white.ds-button__rhSGFS--disabled, .ds-button__rhSGFS.ds-button__rhSGFS--supplementary.ds-button__rhSGFS--white:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onDark);

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

@@ -2,7 +2,7 @@
   display: block;
 }
 
-.ds-card__1vtSAV {
+.ds-card__rhSGFS {
   background-color: var(--ds-bgColor-white);
   border: 1px solid var(--ds-borderColor-light);
   color: var(--ds-textColor-default);
@@ -14,66 +14,66 @@
   min-width: 260px;
   height: auto;
 }
-.ds-card__1vtSAV--fluid-height {
+.ds-card__rhSGFS--fluid-height {
   height: 100%;
 }
-.ds-card__1vtSAV--horizontal {
+.ds-card__rhSGFS--horizontal {
   flex-direction: column;
 }
 @media (min-width: 30rem) {
-  .ds-card__1vtSAV--horizontal {
+  .ds-card__rhSGFS--horizontal {
     flex-direction: row;
   }
 }
-.ds-card__1vtSAV.ds-card__1vtSAV--focused {
+.ds-card__rhSGFS.ds-card__rhSGFS--focused {
   box-shadow: false 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-card__1vtSAV.ds-card__1vtSAV--link:hover:not(:has(::slotted([slot=footer]:hover))) {
+.ds-card__rhSGFS.ds-card__rhSGFS--link:hover:not(:has(::slotted([slot=footer]:hover))) {
   border-color: var(--ds-borderColor-default);
   cursor: pointer;
 }
-.ds-card__1vtSAV.ds-card__1vtSAV--link:hover:not(:has(::slotted([slot=footer]:hover))) .ds-card__1vtSAV__icon {
+.ds-card__rhSGFS.ds-card__rhSGFS--link:hover:not(:has(::slotted([slot=footer]:hover))) .ds-card__rhSGFS__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__1vtSAV.ds-card__1vtSAV--link:hover:not(:has(::slotted([slot=footer]:hover))) .ds-card__1vtSAV__heading {
+.ds-card__rhSGFS.ds-card__rhSGFS--link:hover:not(:has(::slotted([slot=footer]:hover))) .ds-card__rhSGFS__heading {
   text-decoration: underline;
   text-decoration-thickness: 7%;
   text-underline-offset: 12%;
 }
-.ds-card__1vtSAV.ds-card__1vtSAV--link:active {
+.ds-card__rhSGFS.ds-card__rhSGFS--link:active {
   border-color: var(--ds-borderColor-black);
 }
-.ds-card__1vtSAV.ds-card__1vtSAV--link:active .ds-card__1vtSAV__icon {
+.ds-card__rhSGFS.ds-card__rhSGFS--link:active .ds-card__rhSGFS__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__1vtSAV.ds-card__1vtSAV--link:active .ds-card__heading {
+.ds-card__rhSGFS.ds-card__rhSGFS--link:active .ds-card__heading {
   text-decoration: underline;
   text-decoration-thickness: 7%;
   text-underline-offset: 12%;
 }
-.ds-card__1vtSAV.ds-card__1vtSAV--link {
+.ds-card__rhSGFS.ds-card__rhSGFS--link {
   text-decoration: none;
 }
-.ds-card__1vtSAV--filled {
+.ds-card__rhSGFS--filled {
   background-color: var(--ds-bgColor-neutral);
 }
-.ds-card__1vtSAV__image-container {
+.ds-card__rhSGFS__image-container {
   display: none;
 }
-.ds-card__1vtSAV__image-container--has-image {
+.ds-card__rhSGFS__image-container--has-image {
   display: block;
   order: 1;
   position: relative;
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-card__1vtSAV:not(.ds-card__1vtSAV--vertical) .ds-card__1vtSAV__image-container--has-image {
+  .ds-card__rhSGFS:not(.ds-card__rhSGFS--vertical) .ds-card__rhSGFS__image-container--has-image {
     max-width: var(--vertical-image-max-width, 200px);
   }
 }
-.ds-card__1vtSAV__tag {
+.ds-card__rhSGFS__tag {
   background-color: var(--ds-bgColor-black);
   color: var(--ds-textColor-white);
   font-family: var(--ds-fontFamily-body);
@@ -89,29 +89,29 @@
   top: 1rem;
   z-index: 2;
 }
-.ds-card__1vtSAV__image {
+.ds-card__rhSGFS__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.ds-card__1vtSAV__content {
+.ds-card__rhSGFS__content {
   display: flex;
   flex-direction: column;
   order: 2;
   width: 100%;
 }
-.ds-card__1vtSAV__content--top {
+.ds-card__rhSGFS__content--top {
   align-items: center;
   display: flex;
   gap: var(--ds-spacing-small);
   justify-content: space-between;
   padding: var(--ds-spacing-xSmall) var(--ds-spacing-small);
 }
-.ds-card__1vtSAV__content--top__text {
+.ds-card__rhSGFS__content--top__text {
   display: flex;
   flex-direction: column;
 }
-.ds-card__1vtSAV__eyebrow {
+.ds-card__rhSGFS__eyebrow {
   color: var(--ds-textColor-secondary);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -121,11 +121,11 @@
   margin-bottom: var(--ds-spacing-2xSmall);
   order: 1;
 }
-.ds-card__1vtSAV__heading-container {
+.ds-card__rhSGFS__heading-container {
   display: flex;
   flex-direction: column;
 }
-.ds-card__1vtSAV__heading {
+.ds-card__rhSGFS__heading {
   align-items: center;
   color: var(--ds-textColor-default);
   display: flex;
@@ -138,10 +138,10 @@
   justify-content: space-between;
   text-wrap: balance;
 }
-.ds-card__1vtSAV__heading__link {
+.ds-card__rhSGFS__heading__link {
   all: unset;
 }
-.ds-card__1vtSAV__subtitle {
+.ds-card__rhSGFS__subtitle {
   font-size: var(--ds-fontSize-16);
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-secondary);
@@ -149,7 +149,7 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   order: 3;
 }
-.ds-card__1vtSAV__description {
+.ds-card__rhSGFS__description {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--description-line-clamp, "none");
   color: var(--ds-textColor-default);
@@ -164,7 +164,7 @@
   padding: 0 var(--ds-spacing-small);
   text-wrap: pretty;
 }
-.ds-card__1vtSAV__icon {
+.ds-card__rhSGFS__icon {
   color: var(--ds-textColor-primary);
   font-size: var(--ds-fontSize-20);
   font-weight: normal;