npm - @uh-design-system/component-library - Versions diffs - 1.7.0 → 1.7.1-rc.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2004) hide show

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

@@ -137,19 +137,19 @@
   display: block;
 }
-.ds-card__pA2cRq {
+.ds-card__owcjsm {
   --ds-bodyText-fontSize-large: var(--ds-fontSize-16);
   --ds-bodyText-fontSize-medium: var(--ds-fontSize-14);
   --ds-bodyText-fontSize-small: var(--ds-fontSize-12);
 }
 @media (min-width: 60rem) {
-  .ds-card__pA2cRq {
+  .ds-card__owcjsm {
     --ds-bodyText-fontSize-large: var(--ds-fontSize-18);
     --ds-bodyText-fontSize-medium: var(--ds-fontSize-16);
     --ds-bodyText-fontSize-small: var(--ds-fontSize-14);
   }
 }
-.ds-card__pA2cRq {
+.ds-card__owcjsm {
   background-color: var(--ds-bgColor-white);
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   display: flex;
@@ -161,86 +161,86 @@
   min-height: var(--ds-spacing-layout-2xLarge, 8rem);
   position: relative;
 }
-.ds-card__pA2cRq--fluid-height {
+.ds-card__owcjsm--fluid-height {
   height: 100%;
 }
-.ds-card__pA2cRq.ds-card__pA2cRq--link--full:hover {
+.ds-card__owcjsm.ds-card__owcjsm--link--full:hover {
   background-color: var(--ds-bgColor-neutralLight-hover);
   cursor: pointer;
 }
-.ds-card__pA2cRq.ds-card__pA2cRq--link--full:hover .ds-card__pA2cRq__icon {
+.ds-card__owcjsm.ds-card__owcjsm--link--full:hover .ds-card__owcjsm__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__pA2cRq.ds-card__pA2cRq--link--full:hover .ds-card__pA2cRq__image-container--has-image::after {
+.ds-card__owcjsm.ds-card__owcjsm--link--full:hover .ds-card__owcjsm__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-card__pA2cRq.ds-card__pA2cRq--link--full:hover .ds-card__pA2cRq__link--heading {
+.ds-card__owcjsm.ds-card__owcjsm--link--full:hover .ds-card__owcjsm__link--heading {
   text-decoration: none;
 }
-.ds-card__pA2cRq.ds-card__pA2cRq--link--full:active {
+.ds-card__owcjsm.ds-card__owcjsm--link--full:active {
   background-color: var(--ds-bgColor-neutralLight-active);
   outline: none;
 }
-.ds-card__pA2cRq.ds-card__pA2cRq--link--full:active .ds-card__pA2cRq__icon {
+.ds-card__owcjsm.ds-card__owcjsm--link--full:active .ds-card__owcjsm__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__pA2cRq.ds-card__pA2cRq--link--full:active .ds-card__pA2cRq__image-container--has-image::after {
+.ds-card__owcjsm.ds-card__owcjsm--link--full:active .ds-card__owcjsm__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-card__pA2cRq.ds-card__pA2cRq--link--full:active .ds-card__pA2cRq__link--heading {
+.ds-card__owcjsm.ds-card__owcjsm--link--full:active .ds-card__owcjsm__link--heading {
   text-decoration: none;
 }
-.ds-card__pA2cRq.ds-card__pA2cRq--link--full:focus-within {
+.ds-card__owcjsm.ds-card__owcjsm--link--full:focus-within {
   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__pA2cRq {
+.ds-card__owcjsm {
   /**
   * Expand the clickable area of the heading link to the entire heading
   */
 }
-.ds-card__pA2cRq .ds-card__pA2cRq__link--full:after {
+.ds-card__owcjsm .ds-card__owcjsm__link--full:after {
   content: "";
   position: absolute;
   inset: 0;
 }
-.ds-card__pA2cRq--horizontal {
+.ds-card__owcjsm--horizontal {
   flex-direction: column;
 }
 @media (min-width: 30rem) {
-  .ds-card__pA2cRq--horizontal {
+  .ds-card__owcjsm--horizontal {
     display: grid;
     grid-template: "image content" auto "image contentBottom" auto/auto 1fr;
   }
-  .ds-card__pA2cRq--horizontal .ds-card__pA2cRq__image-container {
+  .ds-card__owcjsm--horizontal .ds-card__owcjsm__image-container {
     grid-area: image;
     height: 100%;
     order: initial;
   }
-  .ds-card__pA2cRq--horizontal .ds-card__pA2cRq__content {
+  .ds-card__owcjsm--horizontal .ds-card__owcjsm__content {
     grid-area: content;
     height: 100%;
     order: initial;
   }
-  .ds-card__pA2cRq--horizontal .ds-card__pA2cRq__content--bottom {
+  .ds-card__owcjsm--horizontal .ds-card__owcjsm__content--bottom {
     grid-area: contentBottom;
     order: initial;
   }
 }
-.ds-card__pA2cRq--filled {
+.ds-card__owcjsm--filled {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-card__pA2cRq__image-container {
+.ds-card__owcjsm__image-container {
   display: none;
 }
-.ds-card__pA2cRq__image-container--has-image {
+.ds-card__owcjsm__image-container--has-image {
   display: block;
   height: auto;
   order: 1;
@@ -248,19 +248,19 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-card__pA2cRq:not(.ds-card__pA2cRq--vertical) .ds-card__pA2cRq__image-container--has-image {
+  .ds-card__owcjsm:not(.ds-card__owcjsm--vertical) .ds-card__owcjsm__image-container--has-image {
     max-width: var(--vertical-image-max-width, 200px);
   }
 }
 @media (min-width: 30rem) {
-  .ds-card__pA2cRq:not(.ds-card__pA2cRq--horizontal) .ds-card__pA2cRq__image-container--has-image {
+  .ds-card__owcjsm:not(.ds-card__owcjsm--horizontal) .ds-card__owcjsm__image-container--has-image {
     max-height: var(--horizontal-image-max-height, auto);
   }
 }
-.ds-card__pA2cRq--link--full .ds-card__pA2cRq__image-container--has-image {
+.ds-card__owcjsm--link--full .ds-card__owcjsm__image-container--has-image {
   pointer-events: none;
 }
-.ds-card__pA2cRq__tag {
+.ds-card__owcjsm__tag {
   background-color: var(--ds-bgColor-black);
   color: var(--ds-textColor-white);
   font-family: var(--ds-fontFamily-body);
@@ -276,18 +276,18 @@
   top: 1rem;
   z-index: 2;
 }
-.ds-card__pA2cRq__image {
+.ds-card__owcjsm__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.ds-card__pA2cRq__content {
+.ds-card__owcjsm__content {
   display: flex;
   flex-direction: column;
   order: 2;
   width: 100%;
 }
-.ds-card__pA2cRq__content--top {
+.ds-card__owcjsm__content--top {
   align-items: flex-start;
   display: flex;
   gap: var(--ds-spacing-small);
@@ -295,10 +295,10 @@
   order: 2;
   padding: var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
 }
-.ds-card__pA2cRq__content--bottom {
+.ds-card__owcjsm__content--bottom {
   order: 4;
 }
-.ds-card__pA2cRq__eyebrow {
+.ds-card__owcjsm__eyebrow {
   color: var(--ds-textColor-secondary);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -308,11 +308,11 @@
   margin-bottom: var(--ds-spacing-3xSmall);
   order: 1;
 }
-.ds-card__pA2cRq__heading-container {
+.ds-card__owcjsm__heading-container {
   display: flex;
   flex-direction: column;
 }
-.ds-card__pA2cRq__heading {
+.ds-card__owcjsm__heading {
   align-items: center;
   display: flex;
   margin: 0;
@@ -321,12 +321,12 @@
   order: 2;
   text-wrap: balance;
 }
-.ds-card__pA2cRq__heading .ds-card__pA2cRq__link {
+.ds-card__owcjsm__heading .ds-card__owcjsm__link {
   color: var(--ds-textColor-default);
   text-decoration: none;
   outline: none;
 }
-.ds-card__pA2cRq__heading .ds-card__pA2cRq__link:not(.ds-card__pA2cRq__link--full):hover, .ds-card__pA2cRq__heading .ds-card__pA2cRq__link:not(.ds-card__pA2cRq__link--full):active {
+.ds-card__owcjsm__heading .ds-card__owcjsm__link:not(.ds-card__owcjsm__link--full):hover, .ds-card__owcjsm__heading .ds-card__owcjsm__link:not(.ds-card__owcjsm__link--full):active {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -334,7 +334,7 @@
   text-underline-offset: 12%; /* 2.4px */
   text-underline-position: from-font;
 }
-.ds-card__pA2cRq__heading .ds-card__pA2cRq__link--heading {
+.ds-card__owcjsm__heading .ds-card__owcjsm__link--heading {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -342,12 +342,12 @@
   text-underline-offset: 12%; /* 2.4px */
   text-underline-position: from-font;
 }
-.ds-card__pA2cRq__heading .ds-card__pA2cRq__link--heading:focus-visible {
+.ds-card__owcjsm__heading .ds-card__owcjsm__link--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-card__pA2cRq__subtitle, .ds-card__pA2cRq__slot-subtitle {
+.ds-card__owcjsm__subtitle, .ds-card__owcjsm__slot-subtitle {
   font-size: var(--ds-fontSize-16);
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-secondary);
@@ -355,7 +355,7 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   order: 3;
 }
-.ds-card__pA2cRq__description {
+.ds-card__owcjsm__description {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--description-line-clamp, "none");
   color: var(--ds-textColor-default);
@@ -372,31 +372,31 @@
   order: 3;
   max-width: var(--ds-card-description-max-width, none);
 }
-.ds-card__pA2cRq__icon {
+.ds-card__owcjsm__icon {
   color: var(--ds-textColor-primary);
   font-size: var(--ds-fontSize-20);
   font-weight: normal;
 }
-.ds-card__pA2cRq__slot-subtitle--hidden {
+.ds-card__owcjsm__slot-subtitle--hidden {
   display: none;
 }
-.ds-card__pA2cRq--text-size-xLarge .ds-card__pA2cRq__content--top {
+.ds-card__owcjsm--text-size-xLarge .ds-card__owcjsm__content--top {
   padding: var(--ds-spacing-medium);
 }
-.ds-card__pA2cRq--text-size-xLarge .ds-card__pA2cRq__eyebrow,
-.ds-card__pA2cRq--text-size-xLarge .ds-card__pA2cRq__subtitle,
-.ds-card__pA2cRq--text-size-xLarge .ds-card__pA2cRq__slot-subtitle {
+.ds-card__owcjsm--text-size-xLarge .ds-card__owcjsm__eyebrow,
+.ds-card__owcjsm--text-size-xLarge .ds-card__owcjsm__subtitle,
+.ds-card__owcjsm--text-size-xLarge .ds-card__owcjsm__slot-subtitle {
   font-size: var(--ds-bodyText-fontSize-large, 16px);
 }
-.ds-card__pA2cRq--text-size-xLarge .ds-card__pA2cRq__description {
+.ds-card__owcjsm--text-size-xLarge .ds-card__owcjsm__description {
   font-size: var(--ds-bodyText-fontSize-large, 16px);
   padding: 0 var(--ds-spacing-medium);
   margin: 0 0 var(--ds-spacing-large) 0;
 }
-.ds-card__pA2cRq--text-size-xLarge .ds-card__pA2cRq__heading--hyphenated {
+.ds-card__owcjsm--text-size-xLarge .ds-card__owcjsm__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__pA2cRq--text-size-xLarge .ds-card__pA2cRq__heading {
+.ds-card__owcjsm--text-size-xLarge .ds-card__owcjsm__heading {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-heading);
   font-size: var(--ds-fontSize-32);
@@ -407,28 +407,28 @@
   text-transform: none;
 }
 @media (min-width: 60rem) {
-  .ds-card__pA2cRq--text-size-xLarge .ds-card__pA2cRq__heading {
+  .ds-card__owcjsm--text-size-xLarge .ds-card__owcjsm__heading {
     font-size: var(--ds-fontSize-48);
     line-height: 52px;
   }
 }
-.ds-card__pA2cRq--text-size-large .ds-card__pA2cRq__content--top {
+.ds-card__owcjsm--text-size-large .ds-card__owcjsm__content--top {
   padding: var(--ds-spacing-medium);
 }
-.ds-card__pA2cRq--text-size-large .ds-card__pA2cRq__eyebrow,
-.ds-card__pA2cRq--text-size-large .ds-card__pA2cRq__subtitle,
-.ds-card__pA2cRq--text-size-large .ds-card__pA2cRq__slot-subtitle {
+.ds-card__owcjsm--text-size-large .ds-card__owcjsm__eyebrow,
+.ds-card__owcjsm--text-size-large .ds-card__owcjsm__subtitle,
+.ds-card__owcjsm--text-size-large .ds-card__owcjsm__slot-subtitle {
   font-size: var(--ds-bodyText-fontSize-large, 16px);
 }
-.ds-card__pA2cRq--text-size-large .ds-card__pA2cRq__description {
+.ds-card__owcjsm--text-size-large .ds-card__owcjsm__description {
   font-size: var(--ds-bodyText-fontSize-large, 16px);
   padding: 0 var(--ds-spacing-medium);
   margin: 0 0 var(--ds-spacing-large) 0;
 }
-.ds-card__pA2cRq--text-size-large .ds-card__pA2cRq__heading--hyphenated {
+.ds-card__owcjsm--text-size-large .ds-card__owcjsm__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__pA2cRq--text-size-large .ds-card__pA2cRq__heading {
+.ds-card__owcjsm--text-size-large .ds-card__owcjsm__heading {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-heading);
   font-size: var(--ds-fontSize-24);
@@ -439,30 +439,30 @@
   text-transform: none;
 }
 @media (min-width: 60rem) {
-  .ds-card__pA2cRq--text-size-large .ds-card__pA2cRq__heading {
+  .ds-card__owcjsm--text-size-large .ds-card__owcjsm__heading {
     font-size: var(--ds-fontSize-32);
     font-weight: var(--ds-fontWeight-semiboldPlus);
     letter-spacing: var(--ds-letterSpacing-tight);
     line-height: 36px;
   }
 }
-.ds-card__pA2cRq--text-size-medium .ds-card__pA2cRq__content--top {
+.ds-card__owcjsm--text-size-medium .ds-card__owcjsm__content--top {
   padding: var(--ds-spacing-small);
 }
-.ds-card__pA2cRq--text-size-medium .ds-card__pA2cRq__eyebrow,
-.ds-card__pA2cRq--text-size-medium .ds-card__pA2cRq__subtitle,
-.ds-card__pA2cRq--text-size-medium .ds-card__pA2cRq__slot-subtitle {
+.ds-card__owcjsm--text-size-medium .ds-card__owcjsm__eyebrow,
+.ds-card__owcjsm--text-size-medium .ds-card__owcjsm__subtitle,
+.ds-card__owcjsm--text-size-medium .ds-card__owcjsm__slot-subtitle {
   font-size: var(--ds-bodyText-fontSize-medium, 14px);
 }
-.ds-card__pA2cRq--text-size-medium .ds-card__pA2cRq__description {
+.ds-card__owcjsm--text-size-medium .ds-card__owcjsm__description {
   font-size: var(--ds-bodyText-fontSize-medium, 14px);
   padding: 0 var(--ds-spacing-small);
   margin: 0 0 var(--ds-spacing-medium) 0;
 }
-.ds-card__pA2cRq--text-size-medium .ds-card__pA2cRq__heading--hyphenated {
+.ds-card__owcjsm--text-size-medium .ds-card__owcjsm__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__pA2cRq--text-size-medium .ds-card__pA2cRq__heading {
+.ds-card__owcjsm--text-size-medium .ds-card__owcjsm__heading {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-heading);
   font-size: var(--ds-fontSize-20);
@@ -473,28 +473,28 @@
   text-transform: none;
 }
 @media (min-width: 60rem) {
-  .ds-card__pA2cRq--text-size-medium .ds-card__pA2cRq__heading {
+  .ds-card__owcjsm--text-size-medium .ds-card__owcjsm__heading {
     font-size: var(--ds-fontSize-24);
     line-height: 24px;
   }
 }
-.ds-card__pA2cRq--text-size-small .ds-card__pA2cRq__content--top {
+.ds-card__owcjsm--text-size-small .ds-card__owcjsm__content--top {
   padding: var(--ds-spacing-small);
 }
-.ds-card__pA2cRq--text-size-small .ds-card__pA2cRq__eyebrow,
-.ds-card__pA2cRq--text-size-small .ds-card__pA2cRq__subtitle,
-.ds-card__pA2cRq--text-size-small .ds-card__pA2cRq__slot-subtitle {
+.ds-card__owcjsm--text-size-small .ds-card__owcjsm__eyebrow,
+.ds-card__owcjsm--text-size-small .ds-card__owcjsm__subtitle,
+.ds-card__owcjsm--text-size-small .ds-card__owcjsm__slot-subtitle {
   font-size: var(--ds-bodyText-fontSize-medium, 14px);
 }
-.ds-card__pA2cRq--text-size-small .ds-card__pA2cRq__description {
+.ds-card__owcjsm--text-size-small .ds-card__owcjsm__description {
   font-size: var(--ds-bodyText-fontSize-medium, 14px);
   padding: 0 var(--ds-spacing-small);
   margin: 0 0 var(--ds-spacing-medium) 0;
 }
-.ds-card__pA2cRq--text-size-small .ds-card__pA2cRq__heading--hyphenated {
+.ds-card__owcjsm--text-size-small .ds-card__owcjsm__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__pA2cRq--text-size-small .ds-card__pA2cRq__heading {
+.ds-card__owcjsm--text-size-small .ds-card__owcjsm__heading {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-heading);
   font-size: var(--ds-fontSize-18);
@@ -505,28 +505,28 @@
   text-transform: none;
 }
 @media (min-width: 60rem) {
-  .ds-card__pA2cRq--text-size-small .ds-card__pA2cRq__heading {
+  .ds-card__owcjsm--text-size-small .ds-card__owcjsm__heading {
     font-size: var(--ds-fontSize-20);
     line-height: 24px;
   }
 }
-.ds-card__pA2cRq--text-size-xSmall .ds-card__pA2cRq__content--top {
+.ds-card__owcjsm--text-size-xSmall .ds-card__owcjsm__content--top {
   padding: var(--ds-spacing-xSmall);
 }
-.ds-card__pA2cRq--text-size-xSmall .ds-card__pA2cRq__eyebrow,
-.ds-card__pA2cRq--text-size-xSmall .ds-card__pA2cRq__subtitle,
-.ds-card__pA2cRq--text-size-xSmall .ds-card__pA2cRq__slot-subtitle {
+.ds-card__owcjsm--text-size-xSmall .ds-card__owcjsm__eyebrow,
+.ds-card__owcjsm--text-size-xSmall .ds-card__owcjsm__subtitle,
+.ds-card__owcjsm--text-size-xSmall .ds-card__owcjsm__slot-subtitle {
   font-size: var(--ds-bodyText-fontSize-small, 12px);
 }
-.ds-card__pA2cRq--text-size-xSmall .ds-card__pA2cRq__description {
+.ds-card__owcjsm--text-size-xSmall .ds-card__owcjsm__description {
   font-size: var(--ds-bodyText-fontSize-small, 12px);
   padding: 0 var(--ds-spacing-xSmall);
   margin: 0 0 var(--ds-spacing-small) 0;
 }
-.ds-card__pA2cRq--text-size-xSmall .ds-card__pA2cRq__heading--hyphenated {
+.ds-card__owcjsm--text-size-xSmall .ds-card__owcjsm__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__pA2cRq--text-size-xSmall .ds-card__pA2cRq__heading {
+.ds-card__owcjsm--text-size-xSmall .ds-card__owcjsm__heading {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-heading);
   font-size: var(--ds-fontSize-16);
@@ -537,28 +537,28 @@
   text-transform: none;
 }
 @media (min-width: 60rem) {
-  .ds-card__pA2cRq--text-size-xSmall .ds-card__pA2cRq__heading {
+  .ds-card__owcjsm--text-size-xSmall .ds-card__owcjsm__heading {
     font-size: var(--ds-fontSize-18);
     line-height: 20px;
   }
 }
-.ds-card__pA2cRq--text-size-2xSmall .ds-card__pA2cRq__content--top {
+.ds-card__owcjsm--text-size-2xSmall .ds-card__owcjsm__content--top {
   padding: var(--ds-spacing-xSmall);
 }
-.ds-card__pA2cRq--text-size-2xSmall .ds-card__pA2cRq__eyebrow,
-.ds-card__pA2cRq--text-size-2xSmall .ds-card__pA2cRq__subtitle,
-.ds-card__pA2cRq--text-size-2xSmall .ds-card__pA2cRq__slot-subtitle {
+.ds-card__owcjsm--text-size-2xSmall .ds-card__owcjsm__eyebrow,
+.ds-card__owcjsm--text-size-2xSmall .ds-card__owcjsm__subtitle,
+.ds-card__owcjsm--text-size-2xSmall .ds-card__owcjsm__slot-subtitle {
   font-size: var(--ds-bodyText-fontSize-small, 12px);
 }
-.ds-card__pA2cRq--text-size-2xSmall .ds-card__pA2cRq__description {
+.ds-card__owcjsm--text-size-2xSmall .ds-card__owcjsm__description {
   font-size: var(--ds-bodyText-fontSize-small, 12px);
   padding: 0 var(--ds-spacing-xSmall);
   margin: 0 0 var(--ds-spacing-small) 0;
 }
-.ds-card__pA2cRq--text-size-2xSmall .ds-card__pA2cRq__heading--hyphenated {
+.ds-card__owcjsm--text-size-2xSmall .ds-card__owcjsm__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__pA2cRq--text-size-2xSmall .ds-card__pA2cRq__heading {
+.ds-card__owcjsm--text-size-2xSmall .ds-card__owcjsm__heading {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-heading);
   font-size: var(--ds-fontSize-14);
@@ -569,7 +569,7 @@
   text-transform: none;
 }
 @media (min-width: 60rem) {
-  .ds-card__pA2cRq--text-size-2xSmall .ds-card__pA2cRq__heading {
+  .ds-card__owcjsm--text-size-2xSmall .ds-card__owcjsm__heading {
     font-size: var(--ds-fontSize-16);
     line-height: 18px;
   }

package/dist/collection/components/01-base-components/ds-checkbox/ds-checkbox.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.ds-checkbox__pA2cRq-fieldset {
+.ds-checkbox__owcjsm-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
@@ -6,7 +6,7 @@
   margin: 0;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox__pA2cRq-fieldset__legend {
+.ds-checkbox__owcjsm-fieldset__legend {
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -14,7 +14,7 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox__pA2cRq-fieldset__assistive-text {
+.ds-checkbox__owcjsm-fieldset__assistive-text {
   display: inline;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
@@ -22,7 +22,7 @@
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox__pA2cRq {
+.ds-checkbox__owcjsm {
   font-family: var(--ds-fontFamily-body);
   box-sizing: border-box;
   color: var(--ds-textColor-default);
@@ -41,7 +41,7 @@
   font-weight: var(--ds-fontWeight-regular);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox__pA2cRq__input {
+.ds-checkbox__owcjsm__input {
   /* hide the default checkbox */
   appearance: none;
   /* For iOS < 15 to remove gradient background */
@@ -56,79 +56,79 @@
   flex-shrink: 0;
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-checkbox__pA2cRq__input:focus-visible {
+.ds-checkbox__owcjsm__input: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-checkbox__pA2cRq__input {
+.ds-checkbox__owcjsm__input {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   border-color: var(--ds-borderColor-default);
   /** unchecked **/
 }
-.ds-checkbox__pA2cRq__input:hover, .ds-checkbox__pA2cRq__input:active {
+.ds-checkbox__owcjsm__input:hover, .ds-checkbox__owcjsm__input:active {
   border-color: var(--ds-borderColor-default);
 }
-.ds-checkbox__pA2cRq__input:hover {
+.ds-checkbox__owcjsm__input:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-checkbox__pA2cRq__input:active {
+.ds-checkbox__owcjsm__input:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-checkbox__pA2cRq__input:disabled {
+.ds-checkbox__owcjsm__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
 @media (forced-colors: active) {
-  .ds-checkbox__pA2cRq__input:disabled {
+  .ds-checkbox__owcjsm__input:disabled {
     border-color: GrayText;
   }
 }
-.ds-checkbox__pA2cRq__input--invalid {
+.ds-checkbox__owcjsm__input--invalid {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-checkbox__pA2cRq__input--invalid:hover {
+.ds-checkbox__owcjsm__input--invalid:hover {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-checkbox__pA2cRq__input--invalid:active {
+.ds-checkbox__owcjsm__input--invalid:active {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-checkbox__pA2cRq__input {
+.ds-checkbox__owcjsm__input {
   /** checked and indeterminate **/
 }
-.ds-checkbox__pA2cRq__input--invalid:checked, .ds-checkbox__pA2cRq__input--invalid:indeterminate {
+.ds-checkbox__owcjsm__input--invalid:checked, .ds-checkbox__owcjsm__input--invalid:indeterminate {
   background-color: var(--ds-iconColor-danger);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__pA2cRq__input--invalid:checked:hover, .ds-checkbox__pA2cRq__input--invalid:indeterminate:hover {
+.ds-checkbox__owcjsm__input--invalid:checked:hover, .ds-checkbox__owcjsm__input--invalid:indeterminate:hover {
   background-color: var(--ds-palette-red-60);
 }
-.ds-checkbox__pA2cRq__input--invalid:checked:active, .ds-checkbox__pA2cRq__input--invalid:indeterminate:active {
+.ds-checkbox__owcjsm__input--invalid:checked:active, .ds-checkbox__owcjsm__input--invalid:indeterminate:active {
   background-color: var(--ds-palette-red-70);
 }
-.ds-checkbox__pA2cRq__input:not(.ds-checkbox__pA2cRq__input--invalid):checked, .ds-checkbox__pA2cRq__input:not(.ds-checkbox__pA2cRq__input--invalid):indeterminate {
+.ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):checked, .ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):indeterminate {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__pA2cRq__input:not(.ds-checkbox__pA2cRq__input--invalid):checked:hover, .ds-checkbox__pA2cRq__input:not(.ds-checkbox__pA2cRq__input--invalid):indeterminate:hover {
+.ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):checked:hover, .ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):indeterminate:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-checkbox__pA2cRq__input:not(.ds-checkbox__pA2cRq__input--invalid):checked:active, .ds-checkbox__pA2cRq__input:not(.ds-checkbox__pA2cRq__input--invalid):indeterminate:active {
+.ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):checked:active, .ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):indeterminate:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-checkbox__pA2cRq__input:not(.ds-checkbox__pA2cRq__input--invalid):checked:disabled, .ds-checkbox__pA2cRq__input:not(.ds-checkbox__pA2cRq__input--invalid):indeterminate:disabled {
+.ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):checked:disabled, .ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):indeterminate:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-checkbox__pA2cRq__input {
+.ds-checkbox__owcjsm__input {
   /** checkmark **/
 }
-.ds-checkbox__pA2cRq__input::before {
+.ds-checkbox__owcjsm__input::before {
   content: "";
   display: block;
   height: 1em;
@@ -137,36 +137,36 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.ds-checkbox__pA2cRq__input:checked::before {
+.ds-checkbox__owcjsm__input:checked::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>");
 }
-.ds-checkbox__pA2cRq__input:indeterminate::before {
+.ds-checkbox__owcjsm__input:indeterminate::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>");
 }
-.ds-checkbox__pA2cRq__input:checked:disabled::before {
+.ds-checkbox__owcjsm__input:checked:disabled::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>");
 }
-.ds-checkbox__pA2cRq__input:indeterminate:disabled::before {
+.ds-checkbox__owcjsm__input:indeterminate:disabled::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>");
 }
-.ds-checkbox__pA2cRq--no-margin .ds-checkbox__pA2cRq__input {
+.ds-checkbox__owcjsm--no-margin .ds-checkbox__owcjsm__input {
   margin-right: 0;
 }
-.ds-checkbox__pA2cRq--disabled {
+.ds-checkbox__owcjsm--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-checkbox__pA2cRq__span--optional {
+.ds-checkbox__owcjsm__span--optional {
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
-.ds-checkbox__pA2cRq:has(.ds-checkbox__pA2cRq__input:disabled) {
+.ds-checkbox__owcjsm:has(.ds-checkbox__owcjsm__input:disabled) {
   cursor: not-allowed;
 }
-.ds-checkbox__pA2cRq-error {
+.ds-checkbox__owcjsm-error {
   display: flex;
 }
-.ds-checkbox__pA2cRq-error--visible {
+.ds-checkbox__owcjsm-error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }