@uh-design-system/component-library 1.6.0-rc.1 → 1.6.0-rc.2

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

@@ -1,4 +1,4 @@
-import { Mixin, h, forceUpdate } from "@stencil/core";
+import { Host, Mixin, h, forceUpdate } from "@stencil/core";
 import classNames from "classnames";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { declareComponentDependencies, ifDefined, transformTagName } from "../../../utils/utils";
@@ -165,7 +165,6 @@ export class DsButton extends Mixin(componentFactory('ds-button'), ariaDeprecati
             [`${baseClass}--icon-start`]: this.dsIcon && this.dsIconPosition === 'start' && hasContent,
             [`${baseClass}--icon-end`]: this.dsIcon && this.dsIconPosition === 'end' && hasContent,
             [`${baseClass}--icon-only`]: this.dsIcon && !hasContent,
-            [`${baseClass}--full-width`]: this.dsFullWidth,
             [`${baseClass}--disabled`]: this.dsDisabled,
             [`${baseClass}--${this.dsColour}--active`]: this.isActive,
             [`${baseClass}--in-input`]: this.dsInInput,
@@ -186,8 +185,12 @@ export class DsButton extends Mixin(componentFactory('ds-button'), ariaDeprecati
         return (h("button", { ref: el => (this.buttonEl = el), class: classes, id: this.dsId, value: this.dsValue, name: this.dsName, form: this.dsForm, type: this.dsType, disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, ...ifDefined('autofocus', this.dsAutoFocus), ...ifDefined('role', role), ...ifDefined('aria-disabled', ariaDisabled), ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby), ...ifDefined('aria-expanded', ariaExpanded), ...ifDefined('aria-pressed', ariaPressed), ...ifDefined('aria-controls', ariaControls), ...ifDefined('aria-haspopup', ariaHaspopup), ...ifDefined('aria-hidden', this.dsAriaHidden ? 'true' : undefined), ...ifDefined('tabindex', this.dsTabIndex), ...restAttributes }, h("slot", { name: "prefix" }, !this.dsLoading && this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass), this.dsLoading && (h(DsSpinner, { class: `${baseClass}__spinner`, dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsColour: this.getSpinnerColour(), dsSize: this.dsSize === 'medium' ? 'medium' : null, dsCustomSize: this.dsSize === 'small' ? '1.25rem' : undefined }))), h("span", { class: `${baseClass}__value`, hidden: !hasContent }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.text), this.dsHiddenAssistiveText && h(DsVisuallyHidden, { dsTag: "span" }, this.dsHiddenAssistiveText), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && this.renderIcon(baseClass))));
     };
     render() {
+        const baseClass = cx('ds-button');
+        const hostClass = `${baseClass}__host`;
         const buttonElement = this.renderButton();
-        return this.dsUseSpinner ? h("div", { "aria-live": "polite" }, buttonElement) : buttonElement;
+        return (h(Host, { key: 'c137e9d7efd727c7bb9cc76f2b28b1f36b93a370', class: classNames(hostClass, {
+                [`${hostClass}--full-width`]: this.dsFullWidth,
+            }) }, this.dsUseSpinner ? h("div", { "aria-live": "polite" }, buttonElement) : buttonElement));
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "scoped"; }

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

@@ -137,19 +137,19 @@
   display: block;
 }
 
-.ds-card__izAhxK {
+.ds-card__9el4Wy {
   --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__izAhxK {
+  .ds-card__9el4Wy {
     --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__izAhxK {
+.ds-card__9el4Wy {
   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__izAhxK--fluid-height {
+.ds-card__9el4Wy--fluid-height {
   height: 100%;
 }
-.ds-card__izAhxK.ds-card__izAhxK--link--full:hover {
+.ds-card__9el4Wy.ds-card__9el4Wy--link--full:hover {
   background-color: var(--ds-bgColor-neutralLight-hover);
   cursor: pointer;
 }
-.ds-card__izAhxK.ds-card__izAhxK--link--full:hover .ds-card__izAhxK__icon {
+.ds-card__9el4Wy.ds-card__9el4Wy--link--full:hover .ds-card__9el4Wy__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__izAhxK.ds-card__izAhxK--link--full:hover .ds-card__izAhxK__image-container--has-image::after {
+.ds-card__9el4Wy.ds-card__9el4Wy--link--full:hover .ds-card__9el4Wy__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-card__izAhxK.ds-card__izAhxK--link--full:hover .ds-card__izAhxK__link--heading {
+.ds-card__9el4Wy.ds-card__9el4Wy--link--full:hover .ds-card__9el4Wy__link--heading {
   text-decoration: none;
 }
-.ds-card__izAhxK.ds-card__izAhxK--link--full:active {
+.ds-card__9el4Wy.ds-card__9el4Wy--link--full:active {
   background-color: var(--ds-bgColor-neutralLight-active);
   outline: none;
 }
-.ds-card__izAhxK.ds-card__izAhxK--link--full:active .ds-card__izAhxK__icon {
+.ds-card__9el4Wy.ds-card__9el4Wy--link--full:active .ds-card__9el4Wy__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__izAhxK.ds-card__izAhxK--link--full:active .ds-card__izAhxK__image-container--has-image::after {
+.ds-card__9el4Wy.ds-card__9el4Wy--link--full:active .ds-card__9el4Wy__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-card__izAhxK.ds-card__izAhxK--link--full:active .ds-card__izAhxK__link--heading {
+.ds-card__9el4Wy.ds-card__9el4Wy--link--full:active .ds-card__9el4Wy__link--heading {
   text-decoration: none;
 }
-.ds-card__izAhxK.ds-card__izAhxK--link--full:focus-within {
+.ds-card__9el4Wy.ds-card__9el4Wy--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__izAhxK {
+.ds-card__9el4Wy {
   /**
   * Expand the clickable area of the heading link to the entire heading
   */
 }
-.ds-card__izAhxK .ds-card__izAhxK__link--full:after {
+.ds-card__9el4Wy .ds-card__9el4Wy__link--full:after {
   content: "";
   position: absolute;
   inset: 0;
 }
-.ds-card__izAhxK--horizontal {
+.ds-card__9el4Wy--horizontal {
   flex-direction: column;
 }
 @media (min-width: 30rem) {
-  .ds-card__izAhxK--horizontal {
+  .ds-card__9el4Wy--horizontal {
     display: grid;
     grid-template: "image content" auto "image contentBottom" auto/auto 1fr;
   }
-  .ds-card__izAhxK--horizontal .ds-card__izAhxK__image-container {
+  .ds-card__9el4Wy--horizontal .ds-card__9el4Wy__image-container {
     grid-area: image;
     height: 100%;
     order: initial;
   }
-  .ds-card__izAhxK--horizontal .ds-card__izAhxK__content {
+  .ds-card__9el4Wy--horizontal .ds-card__9el4Wy__content {
     grid-area: content;
     height: 100%;
     order: initial;
   }
-  .ds-card__izAhxK--horizontal .ds-card__izAhxK__content--bottom {
+  .ds-card__9el4Wy--horizontal .ds-card__9el4Wy__content--bottom {
     grid-area: contentBottom;
     order: initial;
   }
 }
-.ds-card__izAhxK--filled {
+.ds-card__9el4Wy--filled {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-card__izAhxK__image-container {
+.ds-card__9el4Wy__image-container {
   display: none;
 }
-.ds-card__izAhxK__image-container--has-image {
+.ds-card__9el4Wy__image-container--has-image {
   display: block;
   height: auto;
   order: 1;
@@ -248,19 +248,19 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-card__izAhxK:not(.ds-card__izAhxK--vertical) .ds-card__izAhxK__image-container--has-image {
+  .ds-card__9el4Wy:not(.ds-card__9el4Wy--vertical) .ds-card__9el4Wy__image-container--has-image {
     max-width: var(--vertical-image-max-width, 200px);
   }
 }
 @media (min-width: 30rem) {
-  .ds-card__izAhxK:not(.ds-card__izAhxK--horizontal) .ds-card__izAhxK__image-container--has-image {
+  .ds-card__9el4Wy:not(.ds-card__9el4Wy--horizontal) .ds-card__9el4Wy__image-container--has-image {
     max-height: var(--horizontal-image-max-height, auto);
   }
 }
-.ds-card__izAhxK--link--full .ds-card__izAhxK__image-container--has-image {
+.ds-card__9el4Wy--link--full .ds-card__9el4Wy__image-container--has-image {
   pointer-events: none;
 }
-.ds-card__izAhxK__tag {
+.ds-card__9el4Wy__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__izAhxK__image {
+.ds-card__9el4Wy__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.ds-card__izAhxK__content {
+.ds-card__9el4Wy__content {
   display: flex;
   flex-direction: column;
   order: 2;
   width: 100%;
 }
-.ds-card__izAhxK__content--top {
+.ds-card__9el4Wy__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__izAhxK__content--bottom {
+.ds-card__9el4Wy__content--bottom {
   order: 4;
 }
-.ds-card__izAhxK__eyebrow {
+.ds-card__9el4Wy__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__izAhxK__heading-container {
+.ds-card__9el4Wy__heading-container {
   display: flex;
   flex-direction: column;
 }
-.ds-card__izAhxK__heading {
+.ds-card__9el4Wy__heading {
   align-items: center;
   display: flex;
   margin: 0;
@@ -321,12 +321,12 @@
   order: 2;
   text-wrap: balance;
 }
-.ds-card__izAhxK__heading .ds-card__izAhxK__link {
+.ds-card__9el4Wy__heading .ds-card__9el4Wy__link {
   color: var(--ds-textColor-default);
   text-decoration: none;
   outline: none;
 }
-.ds-card__izAhxK__heading .ds-card__izAhxK__link:not(.ds-card__izAhxK__link--full):hover, .ds-card__izAhxK__heading .ds-card__izAhxK__link:not(.ds-card__izAhxK__link--full):active {
+.ds-card__9el4Wy__heading .ds-card__9el4Wy__link:not(.ds-card__9el4Wy__link--full):hover, .ds-card__9el4Wy__heading .ds-card__9el4Wy__link:not(.ds-card__9el4Wy__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__izAhxK__heading .ds-card__izAhxK__link--heading {
+.ds-card__9el4Wy__heading .ds-card__9el4Wy__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__izAhxK__heading .ds-card__izAhxK__link--heading:focus-visible {
+.ds-card__9el4Wy__heading .ds-card__9el4Wy__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__izAhxK__subtitle, .ds-card__izAhxK__slot-subtitle {
+.ds-card__9el4Wy__subtitle, .ds-card__9el4Wy__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__izAhxK__description {
+.ds-card__9el4Wy__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__izAhxK__icon {
+.ds-card__9el4Wy__icon {
   color: var(--ds-textColor-primary);
   font-size: var(--ds-fontSize-20);
   font-weight: normal;
 }
-.ds-card__izAhxK__slot-subtitle--hidden {
+.ds-card__9el4Wy__slot-subtitle--hidden {
   display: none;
 }
-.ds-card__izAhxK--text-size-xLarge .ds-card__izAhxK__content--top {
+.ds-card__9el4Wy--text-size-xLarge .ds-card__9el4Wy__content--top {
   padding: var(--ds-spacing-medium);
 }
-.ds-card__izAhxK--text-size-xLarge .ds-card__izAhxK__eyebrow,
-.ds-card__izAhxK--text-size-xLarge .ds-card__izAhxK__subtitle,
-.ds-card__izAhxK--text-size-xLarge .ds-card__izAhxK__slot-subtitle {
+.ds-card__9el4Wy--text-size-xLarge .ds-card__9el4Wy__eyebrow,
+.ds-card__9el4Wy--text-size-xLarge .ds-card__9el4Wy__subtitle,
+.ds-card__9el4Wy--text-size-xLarge .ds-card__9el4Wy__slot-subtitle {
   font-size: var(--ds-bodyText-fontSize-large, 16px);
 }
-.ds-card__izAhxK--text-size-xLarge .ds-card__izAhxK__description {
+.ds-card__9el4Wy--text-size-xLarge .ds-card__9el4Wy__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__izAhxK--text-size-xLarge .ds-card__izAhxK__heading--hyphenated {
+.ds-card__9el4Wy--text-size-xLarge .ds-card__9el4Wy__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__izAhxK--text-size-xLarge .ds-card__izAhxK__heading {
+.ds-card__9el4Wy--text-size-xLarge .ds-card__9el4Wy__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__izAhxK--text-size-xLarge .ds-card__izAhxK__heading {
+  .ds-card__9el4Wy--text-size-xLarge .ds-card__9el4Wy__heading {
     font-size: var(--ds-fontSize-48);
     line-height: 52px;
   }
 }
-.ds-card__izAhxK--text-size-large .ds-card__izAhxK__content--top {
+.ds-card__9el4Wy--text-size-large .ds-card__9el4Wy__content--top {
   padding: var(--ds-spacing-medium);
 }
-.ds-card__izAhxK--text-size-large .ds-card__izAhxK__eyebrow,
-.ds-card__izAhxK--text-size-large .ds-card__izAhxK__subtitle,
-.ds-card__izAhxK--text-size-large .ds-card__izAhxK__slot-subtitle {
+.ds-card__9el4Wy--text-size-large .ds-card__9el4Wy__eyebrow,
+.ds-card__9el4Wy--text-size-large .ds-card__9el4Wy__subtitle,
+.ds-card__9el4Wy--text-size-large .ds-card__9el4Wy__slot-subtitle {
   font-size: var(--ds-bodyText-fontSize-large, 16px);
 }
-.ds-card__izAhxK--text-size-large .ds-card__izAhxK__description {
+.ds-card__9el4Wy--text-size-large .ds-card__9el4Wy__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__izAhxK--text-size-large .ds-card__izAhxK__heading--hyphenated {
+.ds-card__9el4Wy--text-size-large .ds-card__9el4Wy__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__izAhxK--text-size-large .ds-card__izAhxK__heading {
+.ds-card__9el4Wy--text-size-large .ds-card__9el4Wy__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__izAhxK--text-size-large .ds-card__izAhxK__heading {
+  .ds-card__9el4Wy--text-size-large .ds-card__9el4Wy__heading {
     font-size: var(--ds-fontSize-32);
     font-weight: var(--ds-fontWeight-semiboldPlus);
     letter-spacing: var(--ds-letterSpacing-tight);
     line-height: 36px;
   }
 }
-.ds-card__izAhxK--text-size-medium .ds-card__izAhxK__content--top {
+.ds-card__9el4Wy--text-size-medium .ds-card__9el4Wy__content--top {
   padding: var(--ds-spacing-small);
 }
-.ds-card__izAhxK--text-size-medium .ds-card__izAhxK__eyebrow,
-.ds-card__izAhxK--text-size-medium .ds-card__izAhxK__subtitle,
-.ds-card__izAhxK--text-size-medium .ds-card__izAhxK__slot-subtitle {
+.ds-card__9el4Wy--text-size-medium .ds-card__9el4Wy__eyebrow,
+.ds-card__9el4Wy--text-size-medium .ds-card__9el4Wy__subtitle,
+.ds-card__9el4Wy--text-size-medium .ds-card__9el4Wy__slot-subtitle {
   font-size: var(--ds-bodyText-fontSize-medium, 14px);
 }
-.ds-card__izAhxK--text-size-medium .ds-card__izAhxK__description {
+.ds-card__9el4Wy--text-size-medium .ds-card__9el4Wy__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__izAhxK--text-size-medium .ds-card__izAhxK__heading--hyphenated {
+.ds-card__9el4Wy--text-size-medium .ds-card__9el4Wy__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__izAhxK--text-size-medium .ds-card__izAhxK__heading {
+.ds-card__9el4Wy--text-size-medium .ds-card__9el4Wy__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__izAhxK--text-size-medium .ds-card__izAhxK__heading {
+  .ds-card__9el4Wy--text-size-medium .ds-card__9el4Wy__heading {
     font-size: var(--ds-fontSize-24);
     line-height: 24px;
   }
 }
-.ds-card__izAhxK--text-size-small .ds-card__izAhxK__content--top {
+.ds-card__9el4Wy--text-size-small .ds-card__9el4Wy__content--top {
   padding: var(--ds-spacing-small);
 }
-.ds-card__izAhxK--text-size-small .ds-card__izAhxK__eyebrow,
-.ds-card__izAhxK--text-size-small .ds-card__izAhxK__subtitle,
-.ds-card__izAhxK--text-size-small .ds-card__izAhxK__slot-subtitle {
+.ds-card__9el4Wy--text-size-small .ds-card__9el4Wy__eyebrow,
+.ds-card__9el4Wy--text-size-small .ds-card__9el4Wy__subtitle,
+.ds-card__9el4Wy--text-size-small .ds-card__9el4Wy__slot-subtitle {
   font-size: var(--ds-bodyText-fontSize-medium, 14px);
 }
-.ds-card__izAhxK--text-size-small .ds-card__izAhxK__description {
+.ds-card__9el4Wy--text-size-small .ds-card__9el4Wy__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__izAhxK--text-size-small .ds-card__izAhxK__heading--hyphenated {
+.ds-card__9el4Wy--text-size-small .ds-card__9el4Wy__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__izAhxK--text-size-small .ds-card__izAhxK__heading {
+.ds-card__9el4Wy--text-size-small .ds-card__9el4Wy__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__izAhxK--text-size-small .ds-card__izAhxK__heading {
+  .ds-card__9el4Wy--text-size-small .ds-card__9el4Wy__heading {
     font-size: var(--ds-fontSize-20);
     line-height: 24px;
   }
 }
-.ds-card__izAhxK--text-size-xSmall .ds-card__izAhxK__content--top {
+.ds-card__9el4Wy--text-size-xSmall .ds-card__9el4Wy__content--top {
   padding: var(--ds-spacing-xSmall);
 }
-.ds-card__izAhxK--text-size-xSmall .ds-card__izAhxK__eyebrow,
-.ds-card__izAhxK--text-size-xSmall .ds-card__izAhxK__subtitle,
-.ds-card__izAhxK--text-size-xSmall .ds-card__izAhxK__slot-subtitle {
+.ds-card__9el4Wy--text-size-xSmall .ds-card__9el4Wy__eyebrow,
+.ds-card__9el4Wy--text-size-xSmall .ds-card__9el4Wy__subtitle,
+.ds-card__9el4Wy--text-size-xSmall .ds-card__9el4Wy__slot-subtitle {
   font-size: var(--ds-bodyText-fontSize-small, 12px);
 }
-.ds-card__izAhxK--text-size-xSmall .ds-card__izAhxK__description {
+.ds-card__9el4Wy--text-size-xSmall .ds-card__9el4Wy__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__izAhxK--text-size-xSmall .ds-card__izAhxK__heading--hyphenated {
+.ds-card__9el4Wy--text-size-xSmall .ds-card__9el4Wy__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__izAhxK--text-size-xSmall .ds-card__izAhxK__heading {
+.ds-card__9el4Wy--text-size-xSmall .ds-card__9el4Wy__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__izAhxK--text-size-xSmall .ds-card__izAhxK__heading {
+  .ds-card__9el4Wy--text-size-xSmall .ds-card__9el4Wy__heading {
     font-size: var(--ds-fontSize-18);
     line-height: 20px;
   }
 }
-.ds-card__izAhxK--text-size-2xSmall .ds-card__izAhxK__content--top {
+.ds-card__9el4Wy--text-size-2xSmall .ds-card__9el4Wy__content--top {
   padding: var(--ds-spacing-xSmall);
 }
-.ds-card__izAhxK--text-size-2xSmall .ds-card__izAhxK__eyebrow,
-.ds-card__izAhxK--text-size-2xSmall .ds-card__izAhxK__subtitle,
-.ds-card__izAhxK--text-size-2xSmall .ds-card__izAhxK__slot-subtitle {
+.ds-card__9el4Wy--text-size-2xSmall .ds-card__9el4Wy__eyebrow,
+.ds-card__9el4Wy--text-size-2xSmall .ds-card__9el4Wy__subtitle,
+.ds-card__9el4Wy--text-size-2xSmall .ds-card__9el4Wy__slot-subtitle {
   font-size: var(--ds-bodyText-fontSize-small, 12px);
 }
-.ds-card__izAhxK--text-size-2xSmall .ds-card__izAhxK__description {
+.ds-card__9el4Wy--text-size-2xSmall .ds-card__9el4Wy__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__izAhxK--text-size-2xSmall .ds-card__izAhxK__heading--hyphenated {
+.ds-card__9el4Wy--text-size-2xSmall .ds-card__9el4Wy__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__izAhxK--text-size-2xSmall .ds-card__izAhxK__heading {
+.ds-card__9el4Wy--text-size-2xSmall .ds-card__9el4Wy__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__izAhxK--text-size-2xSmall .ds-card__izAhxK__heading {
+  .ds-card__9el4Wy--text-size-2xSmall .ds-card__9el4Wy__heading {
     font-size: var(--ds-fontSize-16);
     line-height: 18px;
   }

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

@@ -114,17 +114,17 @@ export class DsCard extends Mixin(componentFactory('ds-card', { stopRootTracking
         const DsIcon = transformTagName('ds-icon', 'ds-card', this.el);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-card', this.el);
         const descriptionClamp = this.dsDescriptionClamp ? this.dsDescriptionClamp.toString() : 'none';
-        return (h("article", { key: '783f58884e8b3c9e34103f80e51386cb7e977076', class: classes, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, h("div", { key: '5ca00f3daad9f459fe03cfcd03e935761eb457b8', class: `${baseClass}__content` }, h("div", { key: 'bd0f6820dc9041643eea08785deaf639b6f9e2aa', class: {
+        return (h("article", { key: '949baea279c6b144e7617ad76a0fdafe2a618423', class: classes, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, h("div", { key: '58c53b902bdffbd90077fc47699bce7d4a174803', class: `${baseClass}__content` }, h("div", { key: '54c3693068def7ca5af5c5bbd893e8cfcf22c1ab', class: {
                 [`${baseClass}__content--top`]: true,
                 [`${baseClass}__content--top--has-link`]: Boolean(this.dsUrl),
-            } }, h("div", { key: '68b12f44199de215eafb3607a09436fe19245e67', class: `${baseClass}__heading-container` }, this.dsUrl && this.dsLinkType !== 'none' ? (h(HeadingTag, { class: `${baseClass}__heading`, id: headingId }, h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: linkClasses }, h("slot", { name: "heading" }, this.dsHeading), opensInNewTab(this.dsUrlTarget) && h(DsVisuallyHidden, { dsTag: "span" }, visuallyHiddenAssistiveText())))) : (h(HeadingTag, { class: `${baseClass}__heading` }, h("slot", { name: "heading" }, this.dsHeading))), this.dsTag && this.hasImageSlot && h("span", { key: 'e79d55c090435cdb8c428b3b1ea9fd67cb7d0ddf', class: `${baseClass}__tag` }, this.dsTag), this.dsEyebrow && h("div", { key: '4f46203c4fb9f5637757d74a29bc87b5c7b53f75', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: '6befa89037dac1cffea6db3a7257f497f9671689', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: '575192d80818b34c0b589c61cfb576aa30fc9d0a', class: classNames(`${baseClass}__slot-subtitle`, {
+            } }, h("div", { key: '8ae393400706ec9eb53b66cf728b293e21fd8f65', class: `${baseClass}__heading-container` }, this.dsUrl && this.dsLinkType !== 'none' ? (h(HeadingTag, { class: `${baseClass}__heading`, id: headingId }, h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: linkClasses }, h("slot", { name: "heading" }, this.dsHeading), opensInNewTab(this.dsUrlTarget) && h(DsVisuallyHidden, { dsTag: "span" }, visuallyHiddenAssistiveText())))) : (h(HeadingTag, { class: `${baseClass}__heading` }, h("slot", { name: "heading" }, this.dsHeading))), this.dsTag && this.hasImageSlot && h("span", { key: 'a2899088af9ce8a797b015ebeeb908856fafd104', class: `${baseClass}__tag` }, this.dsTag), this.dsEyebrow && h("div", { key: '8629ce2c396f5f4e38234485e0d7c196199fc01e', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: '338375d452333db666a0faa6e4a0b23a481d00a2', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: '03d4d344af060d5acc05ac08c3a13ef212b08001', class: classNames(`${baseClass}__slot-subtitle`, {
                 [`${baseClass}__slot-subtitle--hidden`]: !this.hasSubtitleSlot,
-            }) }, h("slot", { key: '7ff5578c8ddca81713bec194432aa425594b8902', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && this.dsLinkType !== 'heading' && (h(DsIcon, { key: '360b72b21505a8bc653493aee0f6142ae0dea5bc', dsSize: ARROW_SIZE[this.dsTextSize], class: `${baseClass}__icon`, dsName: this.linkIcon }))), this.dsDescription && (h("p", { key: '3f5b03a34064abebfd00f8ee3f447f9cf9c856c2', class: `${baseClass}__description`, style: { '--ds-card-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("div", { key: '48f6fd2e1aeac0e4a5ca5895d203650935d229f1', class: classNames(`${baseClass}__content--bottom`, {
+            }) }, h("slot", { key: '5ef848ffd5fc8d8a269f951d8e01127cf9ff5437', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && this.dsLinkType !== 'heading' && (h(DsIcon, { key: '9b79c83fc224ad3561ad385729d50b3f01f34b81', dsSize: ARROW_SIZE[this.dsTextSize], class: `${baseClass}__icon`, dsName: this.linkIcon }))), this.dsDescription && (h("p", { key: '3e67be183893589a8cb93969e17bd0d986861a1d', class: `${baseClass}__description`, style: { '--ds-card-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("div", { key: '78d6ee5a43ff2ce06b6dcd7f00e8f8f9e64f901d', class: classNames(`${baseClass}__content--bottom`, {
                 [`${baseClass}__content--bottom--has-slot-content`]: this.hasSlotContent,
-            }) }, h("div", { key: '8109731789a6695403b4f8f8613ae31ffd2f4c82', class: `${baseClass}__slot--content` }, h("slot", { key: 'f62a1a6ee20cad112c682335af81103f7c45420b', name: "content" })), h("div", { key: '79b1f63ca8386cfaa310c371946817f210526576', class: `${baseClass}__slot--footer` }, h("slot", { key: '800e3881e9db4d32326da812f63b1f0dae97c283', name: "footer" }))), h("div", { key: '50a664c02c5e99967ac181cc8ec11d13d1dff46f', class: {
+            }) }, h("div", { key: '3f61557f42b20d49fd6cb2e57f0d68ae6f0a077b', class: `${baseClass}__slot--content` }, h("slot", { key: '42b6f33706151247b6f477aed9c9e712932964a3', name: "content" })), h("div", { key: '875daf093e551b7a30e80e90d166816447ac27d3', class: `${baseClass}__slot--footer` }, h("slot", { key: '5565822709c477bcf137acab48b8b1af281f534e', name: "footer" }))), h("div", { key: '2b19aa66ee125c6757607cde818d4a5155ea5750', class: {
                 [`${baseClass}__image-container`]: true,
                 [`${baseClass}__image-container--has-image`]: this.hasImageSlot,
-            } }, h("slot", { key: 'ba3ca20641b3fd78ef0af0caeff9b4aef51db7bf', name: "image", onSlotchange: () => this.checkImageSlot() }))));
+            } }, h("slot", { key: 'f93c4e95aa6ef22b09051a1af7eecee0553fd903', name: "image", onSlotchange: () => this.checkImageSlot() }))));
     }
     static get is() { return "ds-card"; }
     static get encapsulation() { return "scoped"; }