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

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

@@ -51,7 +51,7 @@ export class DsButton extends Mixin(componentFactory('ds-button'), ariaDeprecati
     isActive = this.dsActive;
     text = '';
     async setFocus() {
-        this.buttonEl.focus();
+        this.buttonEl?.focus();
     }
     hasDefaultSlotContent = () => {
         return Array.from(this.el.childNodes).some(node => {
@@ -149,6 +149,15 @@ export class DsButton extends Mixin(componentFactory('ds-button'), ariaDeprecati
         const DsIcon = transformTagName('ds-icon', 'ds-button', this.el);
         return h(DsIcon, { class: iconClasses, dsName: this.dsIcon, dsCustomSize: iconSize, dsTitle: this.dsIconTitle, dsAriaLabel: this.dsIconAriaLabel });
     };
+    getBooleanishAttribute = (value, inheritedValue) => {
+        if (typeof value === 'string' && (value === 'true' || value === 'false')) {
+            return value;
+        }
+        if (typeof value === 'boolean') {
+            return value ? 'true' : 'false';
+        }
+        return inheritedValue;
+    };
     renderButton = () => {
         const hasContent = !!this.text || this.hasDefaultSlot;
         const baseClass = cx('ds-button');
@@ -170,22 +179,10 @@ export class DsButton extends Mixin(componentFactory('ds-button'), ariaDeprecati
         const ariaLabelledby = this.dsAriaLabelledby || inheritedAriaLabelledby;
         const ariaDescribedby = this.dsAriaDescribedby || inheritedAriaDescribedby;
         const ariaControls = this.dsAriaControls || inheritedAriaControls;
-        const ariaHaspopup = this.dsAriaHaspopup !== undefined ? this.dsAriaHaspopup : inheritedAriaHaspopup;
-        let ariaDisabled;
-        if (this.dsAriaDisabled !== undefined) {
-            if (typeof this.dsAriaDisabled === 'string') {
-                console.warn('dsAriaDisabled should be a boolean, not a string. String support will be deprecated.');
-                ariaDisabled = this.dsAriaDisabled;
-            }
-            else {
-                ariaDisabled = this.dsAriaDisabled ? 'true' : 'false';
-            }
-        }
-        else if (inheritedAriaDisabled) {
-            ariaDisabled = inheritedAriaDisabled;
-        }
-        const ariaExpanded = this.dsAriaExpanded !== undefined ? (this.dsAriaExpanded ? 'true' : 'false') : inheritedAriaExpanded;
-        const ariaPressed = this.dsAriaPressed !== undefined ? (this.dsAriaPressed ? 'true' : 'false') : inheritedAriaPressed;
+        const ariaHaspopup = this.dsAriaHaspopup ?? inheritedAriaHaspopup;
+        const ariaDisabled = this.getBooleanishAttribute(this.dsAriaDisabled, inheritedAriaDisabled);
+        const ariaExpanded = this.getBooleanishAttribute(this.dsAriaExpanded, inheritedAriaExpanded);
+        const ariaPressed = this.getBooleanishAttribute(this.dsAriaPressed, inheritedAriaPressed);
         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() {

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

@@ -137,7 +137,19 @@
   display: block;
 }
 
-.ds-card__MsKlb0 {
+.ds-card__izAhxK {
+  --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-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 {
   background-color: var(--ds-bgColor-white);
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   display: flex;
@@ -149,86 +161,86 @@
   min-height: var(--ds-spacing-layout-2xLarge, 8rem);
   position: relative;
 }
-.ds-card__MsKlb0--fluid-height {
+.ds-card__izAhxK--fluid-height {
   height: 100%;
 }
-.ds-card__MsKlb0.ds-card__MsKlb0--link--full:hover {
+.ds-card__izAhxK.ds-card__izAhxK--link--full:hover {
   background-color: var(--ds-bgColor-neutralLight-hover);
   cursor: pointer;
 }
-.ds-card__MsKlb0.ds-card__MsKlb0--link--full:hover .ds-card__MsKlb0__icon {
+.ds-card__izAhxK.ds-card__izAhxK--link--full:hover .ds-card__izAhxK__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__MsKlb0.ds-card__MsKlb0--link--full:hover .ds-card__MsKlb0__image-container--has-image::after {
+.ds-card__izAhxK.ds-card__izAhxK--link--full:hover .ds-card__izAhxK__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-card__MsKlb0.ds-card__MsKlb0--link--full:hover .ds-card__MsKlb0__link--heading {
+.ds-card__izAhxK.ds-card__izAhxK--link--full:hover .ds-card__izAhxK__link--heading {
   text-decoration: none;
 }
-.ds-card__MsKlb0.ds-card__MsKlb0--link--full:active {
+.ds-card__izAhxK.ds-card__izAhxK--link--full:active {
   background-color: var(--ds-bgColor-neutralLight-active);
   outline: none;
 }
-.ds-card__MsKlb0.ds-card__MsKlb0--link--full:active .ds-card__MsKlb0__icon {
+.ds-card__izAhxK.ds-card__izAhxK--link--full:active .ds-card__izAhxK__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__MsKlb0.ds-card__MsKlb0--link--full:active .ds-card__MsKlb0__image-container--has-image::after {
+.ds-card__izAhxK.ds-card__izAhxK--link--full:active .ds-card__izAhxK__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-card__MsKlb0.ds-card__MsKlb0--link--full:active .ds-card__MsKlb0__link--heading {
+.ds-card__izAhxK.ds-card__izAhxK--link--full:active .ds-card__izAhxK__link--heading {
   text-decoration: none;
 }
-.ds-card__MsKlb0.ds-card__MsKlb0--link--full:focus-within {
+.ds-card__izAhxK.ds-card__izAhxK--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__MsKlb0 {
+.ds-card__izAhxK {
   /**
   * Expand the clickable area of the heading link to the entire heading
   */
 }
-.ds-card__MsKlb0 .ds-card__MsKlb0__link--full:after {
+.ds-card__izAhxK .ds-card__izAhxK__link--full:after {
   content: "";
   position: absolute;
   inset: 0;
 }
-.ds-card__MsKlb0--horizontal {
+.ds-card__izAhxK--horizontal {
   flex-direction: column;
 }
 @media (min-width: 30rem) {
-  .ds-card__MsKlb0--horizontal {
+  .ds-card__izAhxK--horizontal {
     display: grid;
     grid-template: "image content" auto "image contentBottom" auto/auto 1fr;
   }
-  .ds-card__MsKlb0--horizontal .ds-card__MsKlb0__image-container {
+  .ds-card__izAhxK--horizontal .ds-card__izAhxK__image-container {
     grid-area: image;
     height: 100%;
     order: initial;
   }
-  .ds-card__MsKlb0--horizontal .ds-card__MsKlb0__content {
+  .ds-card__izAhxK--horizontal .ds-card__izAhxK__content {
     grid-area: content;
     height: 100%;
     order: initial;
   }
-  .ds-card__MsKlb0--horizontal .ds-card__MsKlb0__content--bottom {
+  .ds-card__izAhxK--horizontal .ds-card__izAhxK__content--bottom {
     grid-area: contentBottom;
     order: initial;
   }
 }
-.ds-card__MsKlb0--filled {
+.ds-card__izAhxK--filled {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-card__MsKlb0__image-container {
+.ds-card__izAhxK__image-container {
   display: none;
 }
-.ds-card__MsKlb0__image-container--has-image {
+.ds-card__izAhxK__image-container--has-image {
   display: block;
   height: auto;
   order: 1;
@@ -236,19 +248,19 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-card__MsKlb0:not(.ds-card__MsKlb0--vertical) .ds-card__MsKlb0__image-container--has-image {
+  .ds-card__izAhxK:not(.ds-card__izAhxK--vertical) .ds-card__izAhxK__image-container--has-image {
     max-width: var(--vertical-image-max-width, 200px);
   }
 }
 @media (min-width: 30rem) {
-  .ds-card__MsKlb0:not(.ds-card__MsKlb0--horizontal) .ds-card__MsKlb0__image-container--has-image {
+  .ds-card__izAhxK:not(.ds-card__izAhxK--horizontal) .ds-card__izAhxK__image-container--has-image {
     max-height: var(--horizontal-image-max-height, auto);
   }
 }
-.ds-card__MsKlb0--link--full .ds-card__MsKlb0__image-container--has-image {
+.ds-card__izAhxK--link--full .ds-card__izAhxK__image-container--has-image {
   pointer-events: none;
 }
-.ds-card__MsKlb0__tag {
+.ds-card__izAhxK__tag {
   background-color: var(--ds-bgColor-black);
   color: var(--ds-textColor-white);
   font-family: var(--ds-fontFamily-body);
@@ -264,18 +276,18 @@
   top: 1rem;
   z-index: 2;
 }
-.ds-card__MsKlb0__image {
+.ds-card__izAhxK__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.ds-card__MsKlb0__content {
+.ds-card__izAhxK__content {
   display: flex;
   flex-direction: column;
   order: 2;
   width: 100%;
 }
-.ds-card__MsKlb0__content--top {
+.ds-card__izAhxK__content--top {
   align-items: flex-start;
   display: flex;
   gap: var(--ds-spacing-small);
@@ -283,61 +295,38 @@
   order: 2;
   padding: var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
 }
-.ds-card__MsKlb0__content--top__text {
-  display: flex;
-  flex-direction: column;
-}
-.ds-card__MsKlb0__content--bottom {
+.ds-card__izAhxK__content--bottom {
   order: 4;
 }
-.ds-card__MsKlb0__eyebrow {
+.ds-card__izAhxK__eyebrow {
   color: var(--ds-textColor-secondary);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
-  margin-bottom: var(--ds-spacing-2xSmall);
+  margin-bottom: var(--ds-spacing-3xSmall);
   order: 1;
 }
-.ds-card__MsKlb0__heading-container {
+.ds-card__izAhxK__heading-container {
   display: flex;
   flex-direction: column;
 }
-.ds-card__MsKlb0__heading--hyphenated {
-  hyphens: auto;
-}
-.ds-card__MsKlb0__heading {
-  color: var(--ds-textColor-default);
-  font-family: var(--ds-fontFamily-heading);
-  font-size: var(--ds-fontSize-18);
-  font-weight: var(--ds-fontWeight-semibold);
-  letter-spacing: var(--ds-letterSpacing-normal);
-  line-height: 20px;
-  font-stretch: var(--ds-fontWidth-normal);
-  text-transform: none;
-}
-@media (min-width: 60rem) {
-  .ds-card__MsKlb0__heading {
-    font-size: var(--ds-fontSize-20);
-    line-height: 24px;
-  }
-}
-.ds-card__MsKlb0__heading {
+.ds-card__izAhxK__heading {
   align-items: center;
   display: flex;
   margin: 0;
-  margin-bottom: var(--ds-spacing-3xSmall);
+  margin-bottom: var(--ds-spacing-2xSmall);
   justify-content: space-between;
   order: 2;
   text-wrap: balance;
 }
-.ds-card__MsKlb0__heading .ds-card__MsKlb0__link {
+.ds-card__izAhxK__heading .ds-card__izAhxK__link {
   color: var(--ds-textColor-default);
   text-decoration: none;
   outline: none;
 }
-.ds-card__MsKlb0__heading .ds-card__MsKlb0__link:not(.ds-card__MsKlb0__link--full):hover, .ds-card__MsKlb0__heading .ds-card__MsKlb0__link:not(.ds-card__MsKlb0__link--full):active {
+.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 {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -345,7 +334,7 @@
   text-underline-offset: 12%; /* 2.4px */
   text-underline-position: from-font;
 }
-.ds-card__MsKlb0__heading .ds-card__MsKlb0__link--heading {
+.ds-card__izAhxK__heading .ds-card__izAhxK__link--heading {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -353,12 +342,12 @@
   text-underline-offset: 12%; /* 2.4px */
   text-underline-position: from-font;
 }
-.ds-card__MsKlb0__heading .ds-card__MsKlb0__link--heading:focus-visible {
+.ds-card__izAhxK__heading .ds-card__izAhxK__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__MsKlb0__subtitle, .ds-card__MsKlb0__slot-subtitle {
+.ds-card__izAhxK__subtitle, .ds-card__izAhxK__slot-subtitle {
   font-size: var(--ds-fontSize-16);
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-secondary);
@@ -366,7 +355,7 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   order: 3;
 }
-.ds-card__MsKlb0__description {
+.ds-card__izAhxK__description {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--description-line-clamp, "none");
   color: var(--ds-textColor-default);
@@ -383,11 +372,205 @@
   order: 3;
   max-width: var(--ds-card-description-max-width, none);
 }
-.ds-card__MsKlb0__icon {
+.ds-card__izAhxK__icon {
   color: var(--ds-textColor-primary);
   font-size: var(--ds-fontSize-20);
   font-weight: normal;
 }
-.ds-card__MsKlb0__slot-subtitle--hidden {
+.ds-card__izAhxK__slot-subtitle--hidden {
   display: none;
+}
+.ds-card__izAhxK--text-size-xLarge .ds-card__izAhxK__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 {
+  font-size: var(--ds-bodyText-fontSize-large, 16px);
+}
+.ds-card__izAhxK--text-size-xLarge .ds-card__izAhxK__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 {
+  hyphens: auto;
+}
+.ds-card__izAhxK--text-size-xLarge .ds-card__izAhxK__heading {
+  color: var(--ds-textColor-default);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-32);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-tight);
+  line-height: 36px;
+  font-stretch: var(--ds-fontWidth-condense);
+  text-transform: none;
+}
+@media (min-width: 60rem) {
+  .ds-card__izAhxK--text-size-xLarge .ds-card__izAhxK__heading {
+    font-size: var(--ds-fontSize-48);
+    line-height: 52px;
+  }
+}
+.ds-card__izAhxK--text-size-large .ds-card__izAhxK__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 {
+  font-size: var(--ds-bodyText-fontSize-large, 16px);
+}
+.ds-card__izAhxK--text-size-large .ds-card__izAhxK__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 {
+  hyphens: auto;
+}
+.ds-card__izAhxK--text-size-large .ds-card__izAhxK__heading {
+  color: var(--ds-textColor-default);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-24);
+  font-weight: var(--ds-fontWeight-bold);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 28px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
+}
+@media (min-width: 60rem) {
+  .ds-card__izAhxK--text-size-large .ds-card__izAhxK__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 {
+  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 {
+  font-size: var(--ds-bodyText-fontSize-medium, 14px);
+}
+.ds-card__izAhxK--text-size-medium .ds-card__izAhxK__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 {
+  hyphens: auto;
+}
+.ds-card__izAhxK--text-size-medium .ds-card__izAhxK__heading {
+  color: var(--ds-textColor-default);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-20);
+  font-weight: var(--ds-fontWeight-semiboldPlus);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 28px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
+}
+@media (min-width: 60rem) {
+  .ds-card__izAhxK--text-size-medium .ds-card__izAhxK__heading {
+    font-size: var(--ds-fontSize-24);
+    line-height: 24px;
+  }
+}
+.ds-card__izAhxK--text-size-small .ds-card__izAhxK__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 {
+  font-size: var(--ds-bodyText-fontSize-medium, 14px);
+}
+.ds-card__izAhxK--text-size-small .ds-card__izAhxK__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 {
+  hyphens: auto;
+}
+.ds-card__izAhxK--text-size-small .ds-card__izAhxK__heading {
+  color: var(--ds-textColor-default);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-18);
+  font-weight: var(--ds-fontWeight-semibold);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 20px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
+}
+@media (min-width: 60rem) {
+  .ds-card__izAhxK--text-size-small .ds-card__izAhxK__heading {
+    font-size: var(--ds-fontSize-20);
+    line-height: 24px;
+  }
+}
+.ds-card__izAhxK--text-size-xSmall .ds-card__izAhxK__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 {
+  font-size: var(--ds-bodyText-fontSize-small, 12px);
+}
+.ds-card__izAhxK--text-size-xSmall .ds-card__izAhxK__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 {
+  hyphens: auto;
+}
+.ds-card__izAhxK--text-size-xSmall .ds-card__izAhxK__heading {
+  color: var(--ds-textColor-default);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-semibold);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 18px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
+}
+@media (min-width: 60rem) {
+  .ds-card__izAhxK--text-size-xSmall .ds-card__izAhxK__heading {
+    font-size: var(--ds-fontSize-18);
+    line-height: 20px;
+  }
+}
+.ds-card__izAhxK--text-size-2xSmall .ds-card__izAhxK__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 {
+  font-size: var(--ds-bodyText-fontSize-small, 12px);
+}
+.ds-card__izAhxK--text-size-2xSmall .ds-card__izAhxK__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 {
+  hyphens: auto;
+}
+.ds-card__izAhxK--text-size-2xSmall .ds-card__izAhxK__heading {
+  color: var(--ds-textColor-default);
+  font-family: var(--ds-fontFamily-heading);
+  font-size: var(--ds-fontSize-14);
+  font-weight: var(--ds-fontWeight-semibold);
+  letter-spacing: var(--ds-letterSpacing-normal);
+  line-height: 16px;
+  font-stretch: var(--ds-fontWidth-normal);
+  text-transform: none;
+}
+@media (min-width: 60rem) {
+  .ds-card__izAhxK--text-size-2xSmall .ds-card__izAhxK__heading {
+    font-size: var(--ds-fontSize-16);
+    line-height: 18px;
+  }
 }

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

@@ -5,6 +5,14 @@ import { opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/
 import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { componentFactory } from "../../00-foundations/factories/componentFactory";
+const ARROW_SIZE = {
+    'xLarge': '2.5rem',
+    'large': '2.5rem',
+    'medium': '2rem',
+    'small': '2rem',
+    'xSmall': '1.5rem',
+    '2xSmall': '1.5rem',
+};
 export class DsCard extends Mixin(componentFactory('ds-card', { stopRootTracking: true })) {
     constructor() {
         super();
@@ -28,6 +36,7 @@ export class DsCard extends Mixin(componentFactory('ds-card', { stopRootTracking
     dsTag;
     dsShowArrow = true;
     dsFluidHeight = false;
+    dsTextSize = 'small';
     hasImageSlot = false;
     hasSubtitleSlot = false;
     hasSlotContent = true;
@@ -92,7 +101,7 @@ export class DsCard extends Mixin(componentFactory('ds-card', { stopRootTracking
     }
     render() {
         const baseClass = cx('ds-card');
-        const classes = classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
+        const classes = classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--text-size-${this.dsTextSize}`, {
             [`${baseClass}--link--full`]: this.dsLinkType === 'full',
             [`${baseClass}--fluid-height`]: this.dsFluidHeight,
             [`${baseClass}--focused`]: this.isCardFocused,
@@ -105,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: '41808a70da575e82d6d2cf5e621bac6e40bfabec', class: classes, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, h("div", { key: '35b37eb71503a2f60b5cb4f833bdb9a2e2c85ade', class: `${baseClass}__content` }, h("div", { key: 'f7e01ade3faf680d832be025e099e427cec32618', class: {
+        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: {
                 [`${baseClass}__content--top`]: true,
                 [`${baseClass}__content--top--has-link`]: Boolean(this.dsUrl),
-            } }, h("div", { key: 'f94f79d954063e786aca429d1bb761279d40f77c', 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: '03ef028e21b997ed1b756a26295085323b8152d8', class: `${baseClass}__tag` }, this.dsTag), this.dsEyebrow && h("div", { key: '870aa4582ec543207beed525c64223d5c50c1097', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: 'e428ded7a56924682d7867a738e15779cf1a20d0', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: '33b11717c4d26687f8b6178a28f706666233f6bf', class: classNames(`${baseClass}__slot-subtitle`, {
+            } }, 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`, {
                 [`${baseClass}__slot-subtitle--hidden`]: !this.hasSubtitleSlot,
-            }) }, h("slot", { key: '4997e6d29fe4c4e3d4f9220757203114fdff6d31', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && this.dsLinkType !== 'heading' && h(DsIcon, { key: '673726a3f75490df90c6410428c809ac24462c40', dsSize: "2rem", class: `${baseClass}__icon`, dsName: this.linkIcon })), this.dsDescription && (h("p", { key: '8b908426f69a535ffa113853b4fdfece2d4c7be5', class: `${baseClass}__description`, style: { '--ds-card-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("div", { key: 'a6e7ebfd7575619c583517b18071de70a929388e', class: classNames(`${baseClass}__content--bottom`, {
+            }) }, 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`, {
                 [`${baseClass}__content--bottom--has-slot-content`]: this.hasSlotContent,
-            }) }, h("div", { key: '1a6af379a126ad7564afcd2360d0c5cf62853e84', class: `${baseClass}__slot--content` }, h("slot", { key: '354017007608d822f6511992f122e78b985d3423', name: "content" })), h("div", { key: '10682ef015f1210658ae2aa9b0715bac5489afe4', class: `${baseClass}__slot--footer` }, h("slot", { key: '27e46551edb8cdf9d0bcc457f0edf4f6d30d3845', name: "footer" }))), h("div", { key: 'ba818d77d4caa8f8d0eb18ee396d265df9034ace', class: {
+            }) }, 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: {
                 [`${baseClass}__image-container`]: true,
                 [`${baseClass}__image-container--has-image`]: this.hasImageSlot,
-            } }, h("slot", { key: 'bd8f1d052e1ac6c23aa1069fcfff4a4ff4cc2d7e', name: "image", onSlotchange: () => this.checkImageSlot() }))));
+            } }, h("slot", { key: 'ba3ca20641b3fd78ef0af0caeff9b4aef51db7bf', name: "image", onSlotchange: () => this.checkImageSlot() }))));
     }
     static get is() { return "ds-card"; }
     static get encapsulation() { return "scoped"; }
@@ -443,6 +452,31 @@ export class DsCard extends Mixin(componentFactory('ds-card', { stopRootTracking
                 "reflect": false,
                 "attribute": "ds-fluid-height",
                 "defaultValue": "false"
+            },
+            "dsTextSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DsCardTextSize",
+                    "resolved": "\"2xSmall\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\"",
+                    "references": {
+                        "DsCardTextSize": {
+                            "location": "global",
+                            "id": "global::DsCardTextSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text size variant that controls heading, body text, arrow icon size, spacing and padding."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-text-size",
+                "defaultValue": "'small'"
             }
         };
     }