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

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

@@ -46,24 +46,12 @@ export class DsButton extends Mixin(componentFactory('ds-button'), ariaDeprecati
     dsHiddenAssistiveText;
     dsActive = false;
     dsInInput = false;
-    hasContent = false;
+    hasDefaultSlot = false;
     isActive = this.dsActive;
     text = '';
     async setFocus() {
         this.buttonEl.focus();
     }
-    componentWillLoad() {
-        this.getDeprecationWarningsForAriaAttributes(this.el);
-        if (this.dsUseSpinner && !this.dsSpinnerHiddenText) {
-            throw new Error('dsSpinnerHiddenText is required when dsUseSpinner is true.');
-        }
-        this.isActive = this.dsActive;
-        this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
-            ...inheritAriaAttributes(this.el),
-        };
-        this.text = this.dsText || this.dsValue;
-    }
     hasDefaultSlotContent = () => {
         return Array.from(this.el.childNodes).some(node => {
             if (node.nodeType === Node.ELEMENT_NODE) {
@@ -76,9 +64,21 @@ export class DsButton extends Mixin(componentFactory('ds-button'), ariaDeprecati
             return false;
         });
     };
+    componentWillLoad() {
+        this.getDeprecationWarningsForAriaAttributes(this.el);
+        if (this.dsUseSpinner && !this.dsSpinnerHiddenText) {
+            throw new Error('dsSpinnerHiddenText is required when dsUseSpinner is true.');
+        }
+        this.isActive = this.dsActive;
+        this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el),
+            ...inheritAriaAttributes(this.el),
+        };
+        this.text = this.dsText || this.dsValue;
+    }
     componentDidLoad() {
         this.componentMounted();
-        this.hasContent = !!this.text || this.hasDefaultSlotContent();
+        this.hasDefaultSlot = this.hasDefaultSlotContent();
     }
     dsTextObserver(newValue) {
         this.text = newValue || this.dsValue;
@@ -139,6 +139,9 @@ export class DsButton extends Mixin(componentFactory('ds-button'), ariaDeprecati
         }
         return this.dsColour;
     };
+    handleDefaultSlotChange = () => {
+        this.hasDefaultSlot = this.hasDefaultSlot || this.hasDefaultSlotContent();
+    };
     renderIcon = (baseClass) => {
         const iconClasses = classNames(`${baseClass}__icon`);
         const iconSize = this.dsSize === 'small' ? '1.25rem' : undefined;
@@ -146,11 +149,12 @@ export class DsButton extends Mixin(componentFactory('ds-button'), ariaDeprecati
         return h(DsIcon, { class: iconClasses, dsName: this.dsIcon, dsCustomSize: iconSize, dsTitle: this.dsIconTitle, dsAriaLabel: this.dsIconAriaLabel });
     };
     renderButton = () => {
+        const hasContent = !!this.text || this.hasDefaultSlot;
         const baseClass = cx('ds-button');
         const classes = classNames(`${baseClass} ${baseClass}--${this.dsVariant} ${baseClass}--${this.dsColour} ${baseClass}--${this.dsSize}`, {
-            [`${baseClass}--icon-start`]: this.dsIcon && this.dsIconPosition === 'start' && this.hasContent,
-            [`${baseClass}--icon-end`]: this.dsIcon && this.dsIconPosition === 'end' && this.hasContent,
-            [`${baseClass}--icon-only`]: this.dsIcon && !this.hasContent,
+            [`${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,
@@ -180,7 +184,7 @@ export class DsButton extends Mixin(componentFactory('ds-button'), ariaDeprecati
         }
         const ariaExpanded = this.dsAriaExpanded !== undefined ? (this.dsAriaExpanded ? 'true' : 'false') : inheritedAriaExpanded;
         const ariaPressed = this.dsAriaPressed !== undefined ? (this.dsAriaPressed ? 'true' : 'false') : 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 }))), this.hasContent && (h("span", { class: `${baseClass}__value` }, h("slot", null), this.text, this.dsHiddenAssistiveText && h(DsVisuallyHidden, { dsTag: "span" }, this.dsHiddenAssistiveText))), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && this.renderIcon(baseClass))));
+        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 buttonElement = this.renderButton();
@@ -849,7 +853,7 @@ export class DsButton extends Mixin(componentFactory('ds-button'), ariaDeprecati
     }
     static get states() {
         return {
-            "hasContent": {},
+            "hasDefaultSlot": {},
             "isActive": {},
             "text": {}
         };

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

@@ -137,7 +137,7 @@
   display: block;
 }
 
-.ds-card__QIDqOT {
+.ds-card__GqWYnG {
   background-color: var(--ds-bgColor-white);
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   display: flex;
@@ -149,86 +149,86 @@
   min-height: var(--ds-spacing-layout-2xLarge, 8rem);
   position: relative;
 }
-.ds-card__QIDqOT--fluid-height {
+.ds-card__GqWYnG--fluid-height {
   height: 100%;
 }
-.ds-card__QIDqOT.ds-card__QIDqOT--link--full:hover {
+.ds-card__GqWYnG.ds-card__GqWYnG--link--full:hover {
   background-color: var(--ds-bgColor-neutralLight-hover);
   cursor: pointer;
 }
-.ds-card__QIDqOT.ds-card__QIDqOT--link--full:hover .ds-card__QIDqOT__icon {
+.ds-card__GqWYnG.ds-card__GqWYnG--link--full:hover .ds-card__GqWYnG__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__QIDqOT.ds-card__QIDqOT--link--full:hover .ds-card__QIDqOT__image-container--has-image::after {
+.ds-card__GqWYnG.ds-card__GqWYnG--link--full:hover .ds-card__GqWYnG__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-card__QIDqOT.ds-card__QIDqOT--link--full:hover .ds-card__QIDqOT__link--heading {
+.ds-card__GqWYnG.ds-card__GqWYnG--link--full:hover .ds-card__GqWYnG__link--heading {
   text-decoration: none;
 }
-.ds-card__QIDqOT.ds-card__QIDqOT--link--full:active {
+.ds-card__GqWYnG.ds-card__GqWYnG--link--full:active {
   background-color: var(--ds-bgColor-neutralLight-active);
   outline: none;
 }
-.ds-card__QIDqOT.ds-card__QIDqOT--link--full:active .ds-card__QIDqOT__icon {
+.ds-card__GqWYnG.ds-card__GqWYnG--link--full:active .ds-card__GqWYnG__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__QIDqOT.ds-card__QIDqOT--link--full:active .ds-card__QIDqOT__image-container--has-image::after {
+.ds-card__GqWYnG.ds-card__GqWYnG--link--full:active .ds-card__GqWYnG__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-card__QIDqOT.ds-card__QIDqOT--link--full:active .ds-card__QIDqOT__link--heading {
+.ds-card__GqWYnG.ds-card__GqWYnG--link--full:active .ds-card__GqWYnG__link--heading {
   text-decoration: none;
 }
-.ds-card__QIDqOT.ds-card__QIDqOT--link--full:focus-within {
+.ds-card__GqWYnG.ds-card__GqWYnG--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__QIDqOT {
+.ds-card__GqWYnG {
   /**
   * Expand the clickable area of the heading link to the entire heading
   */
 }
-.ds-card__QIDqOT .ds-card__QIDqOT__link--full:after {
+.ds-card__GqWYnG .ds-card__GqWYnG__link--full:after {
   content: "";
   position: absolute;
   inset: 0;
 }
-.ds-card__QIDqOT--horizontal {
+.ds-card__GqWYnG--horizontal {
   flex-direction: column;
 }
 @media (min-width: 30rem) {
-  .ds-card__QIDqOT--horizontal {
+  .ds-card__GqWYnG--horizontal {
     display: grid;
     grid-template: "image content" auto "image contentBottom" auto/auto 1fr;
   }
-  .ds-card__QIDqOT--horizontal .ds-card__QIDqOT__image-container {
+  .ds-card__GqWYnG--horizontal .ds-card__GqWYnG__image-container {
     grid-area: image;
     height: 100%;
     order: initial;
   }
-  .ds-card__QIDqOT--horizontal .ds-card__QIDqOT__content {
+  .ds-card__GqWYnG--horizontal .ds-card__GqWYnG__content {
     grid-area: content;
     height: 100%;
     order: initial;
   }
-  .ds-card__QIDqOT--horizontal .ds-card__QIDqOT__content--bottom {
+  .ds-card__GqWYnG--horizontal .ds-card__GqWYnG__content--bottom {
     grid-area: contentBottom;
     order: initial;
   }
 }
-.ds-card__QIDqOT--filled {
+.ds-card__GqWYnG--filled {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-card__QIDqOT__image-container {
+.ds-card__GqWYnG__image-container {
   display: none;
 }
-.ds-card__QIDqOT__image-container--has-image {
+.ds-card__GqWYnG__image-container--has-image {
   display: block;
   height: auto;
   order: 1;
@@ -236,19 +236,19 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-card__QIDqOT:not(.ds-card__QIDqOT--vertical) .ds-card__QIDqOT__image-container--has-image {
+  .ds-card__GqWYnG:not(.ds-card__GqWYnG--vertical) .ds-card__GqWYnG__image-container--has-image {
     max-width: var(--vertical-image-max-width, 200px);
   }
 }
 @media (min-width: 30rem) {
-  .ds-card__QIDqOT:not(.ds-card__QIDqOT--horizontal) .ds-card__QIDqOT__image-container--has-image {
+  .ds-card__GqWYnG:not(.ds-card__GqWYnG--horizontal) .ds-card__GqWYnG__image-container--has-image {
     max-height: var(--horizontal-image-max-height, auto);
   }
 }
-.ds-card__QIDqOT--link--full .ds-card__QIDqOT__image-container--has-image {
+.ds-card__GqWYnG--link--full .ds-card__GqWYnG__image-container--has-image {
   pointer-events: none;
 }
-.ds-card__QIDqOT__tag {
+.ds-card__GqWYnG__tag {
   background-color: var(--ds-bgColor-black);
   color: var(--ds-textColor-white);
   font-family: var(--ds-fontFamily-body);
@@ -264,18 +264,18 @@
   top: 1rem;
   z-index: 2;
 }
-.ds-card__QIDqOT__image {
+.ds-card__GqWYnG__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.ds-card__QIDqOT__content {
+.ds-card__GqWYnG__content {
   display: flex;
   flex-direction: column;
   order: 2;
   width: 100%;
 }
-.ds-card__QIDqOT__content--top {
+.ds-card__GqWYnG__content--top {
   align-items: flex-start;
   display: flex;
   gap: var(--ds-spacing-small);
@@ -283,14 +283,14 @@
   order: 2;
   padding: var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
 }
-.ds-card__QIDqOT__content--top__text {
+.ds-card__GqWYnG__content--top__text {
   display: flex;
   flex-direction: column;
 }
-.ds-card__QIDqOT__content--bottom {
+.ds-card__GqWYnG__content--bottom {
   order: 4;
 }
-.ds-card__QIDqOT__eyebrow {
+.ds-card__GqWYnG__eyebrow {
   color: var(--ds-textColor-secondary);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -300,14 +300,14 @@
   margin-bottom: var(--ds-spacing-2xSmall);
   order: 1;
 }
-.ds-card__QIDqOT__heading-container {
+.ds-card__GqWYnG__heading-container {
   display: flex;
   flex-direction: column;
 }
-.ds-card__QIDqOT__heading--hyphenated {
+.ds-card__GqWYnG__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__QIDqOT__heading {
+.ds-card__GqWYnG__heading {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-heading);
   font-size: var(--ds-fontSize-18);
@@ -318,12 +318,12 @@
   text-transform: none;
 }
 @media (min-width: 60rem) {
-  .ds-card__QIDqOT__heading {
+  .ds-card__GqWYnG__heading {
     font-size: var(--ds-fontSize-20);
     line-height: 24px;
   }
 }
-.ds-card__QIDqOT__heading {
+.ds-card__GqWYnG__heading {
   align-items: center;
   display: flex;
   margin: 0;
@@ -332,12 +332,12 @@
   order: 2;
   text-wrap: balance;
 }
-.ds-card__QIDqOT__heading .ds-card__QIDqOT__link {
+.ds-card__GqWYnG__heading .ds-card__GqWYnG__link {
   color: var(--ds-textColor-default);
   text-decoration: none;
   outline: none;
 }
-.ds-card__QIDqOT__heading .ds-card__QIDqOT__link:not(.ds-card__QIDqOT__link--full):hover, .ds-card__QIDqOT__heading .ds-card__QIDqOT__link:not(.ds-card__QIDqOT__link--full):active {
+.ds-card__GqWYnG__heading .ds-card__GqWYnG__link:not(.ds-card__GqWYnG__link--full):hover, .ds-card__GqWYnG__heading .ds-card__GqWYnG__link:not(.ds-card__GqWYnG__link--full):active {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -345,7 +345,7 @@
   text-underline-offset: 12%; /* 2.4px */
   text-underline-position: from-font;
 }
-.ds-card__QIDqOT__heading .ds-card__QIDqOT__link--heading {
+.ds-card__GqWYnG__heading .ds-card__GqWYnG__link--heading {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -353,12 +353,12 @@
   text-underline-offset: 12%; /* 2.4px */
   text-underline-position: from-font;
 }
-.ds-card__QIDqOT__heading .ds-card__QIDqOT__link--heading:focus-visible {
+.ds-card__GqWYnG__heading .ds-card__GqWYnG__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__QIDqOT__subtitle, .ds-card__QIDqOT__slot-subtitle {
+.ds-card__GqWYnG__subtitle, .ds-card__GqWYnG__slot-subtitle {
   font-size: var(--ds-fontSize-16);
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-secondary);
@@ -366,7 +366,7 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   order: 3;
 }
-.ds-card__QIDqOT__description {
+.ds-card__GqWYnG__description {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--description-line-clamp, "none");
   color: var(--ds-textColor-default);
@@ -383,11 +383,11 @@
   order: 3;
   max-width: var(--ds-card-description-max-width, none);
 }
-.ds-card__QIDqOT__icon {
+.ds-card__GqWYnG__icon {
   color: var(--ds-textColor-primary);
   font-size: var(--ds-fontSize-20);
   font-weight: normal;
 }
-.ds-card__QIDqOT__slot-subtitle--hidden {
+.ds-card__GqWYnG__slot-subtitle--hidden {
   display: none;
 }

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

@@ -1,4 +1,4 @@
-.ds-checkbox__QIDqOT-fieldset {
+.ds-checkbox__GqWYnG-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
@@ -6,7 +6,7 @@
   margin: 0;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox__QIDqOT-fieldset__legend {
+.ds-checkbox__GqWYnG-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__QIDqOT-fieldset__assistive-text {
+.ds-checkbox__GqWYnG-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__QIDqOT {
+.ds-checkbox__GqWYnG {
   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__QIDqOT__input {
+.ds-checkbox__GqWYnG__input {
   /* hide the default checkbox */
   appearance: none;
   /* For iOS < 15 to remove gradient background */
@@ -55,79 +55,79 @@
   flex-shrink: 0;
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-checkbox__QIDqOT__input:focus-visible {
+.ds-checkbox__GqWYnG__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__QIDqOT__input {
+.ds-checkbox__GqWYnG__input {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   border-color: var(--ds-borderColor-default);
   /** unchecked **/
 }
-.ds-checkbox__QIDqOT__input:hover, .ds-checkbox__QIDqOT__input:active {
+.ds-checkbox__GqWYnG__input:hover, .ds-checkbox__GqWYnG__input:active {
   border-color: var(--ds-borderColor-default);
 }
-.ds-checkbox__QIDqOT__input:hover {
+.ds-checkbox__GqWYnG__input:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-checkbox__QIDqOT__input:active {
+.ds-checkbox__GqWYnG__input:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-checkbox__QIDqOT__input:disabled {
+.ds-checkbox__GqWYnG__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__QIDqOT__input:disabled {
+  .ds-checkbox__GqWYnG__input:disabled {
     border-color: GrayText;
   }
 }
-.ds-checkbox__QIDqOT__input--invalid {
+.ds-checkbox__GqWYnG__input--invalid {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-checkbox__QIDqOT__input--invalid:hover {
+.ds-checkbox__GqWYnG__input--invalid:hover {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-checkbox__QIDqOT__input--invalid:active {
+.ds-checkbox__GqWYnG__input--invalid:active {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-checkbox__QIDqOT__input {
+.ds-checkbox__GqWYnG__input {
   /** checked and indeterminate **/
 }
-.ds-checkbox__QIDqOT__input--invalid:checked, .ds-checkbox__QIDqOT__input--invalid:indeterminate {
+.ds-checkbox__GqWYnG__input--invalid:checked, .ds-checkbox__GqWYnG__input--invalid:indeterminate {
   background-color: var(--ds-iconColor-danger);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__QIDqOT__input--invalid:checked:hover, .ds-checkbox__QIDqOT__input--invalid:indeterminate:hover {
+.ds-checkbox__GqWYnG__input--invalid:checked:hover, .ds-checkbox__GqWYnG__input--invalid:indeterminate:hover {
   background-color: var(--ds-palette-red-60);
 }
-.ds-checkbox__QIDqOT__input--invalid:checked:active, .ds-checkbox__QIDqOT__input--invalid:indeterminate:active {
+.ds-checkbox__GqWYnG__input--invalid:checked:active, .ds-checkbox__GqWYnG__input--invalid:indeterminate:active {
   background-color: var(--ds-palette-red-70);
 }
-.ds-checkbox__QIDqOT__input:not(.ds-checkbox__QIDqOT__input--invalid):checked, .ds-checkbox__QIDqOT__input:not(.ds-checkbox__QIDqOT__input--invalid):indeterminate {
+.ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):checked, .ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):indeterminate {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__QIDqOT__input:not(.ds-checkbox__QIDqOT__input--invalid):checked:hover, .ds-checkbox__QIDqOT__input:not(.ds-checkbox__QIDqOT__input--invalid):indeterminate:hover {
+.ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):checked:hover, .ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):indeterminate:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-checkbox__QIDqOT__input:not(.ds-checkbox__QIDqOT__input--invalid):checked:active, .ds-checkbox__QIDqOT__input:not(.ds-checkbox__QIDqOT__input--invalid):indeterminate:active {
+.ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):checked:active, .ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):indeterminate:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-checkbox__QIDqOT__input:not(.ds-checkbox__QIDqOT__input--invalid):checked:disabled, .ds-checkbox__QIDqOT__input:not(.ds-checkbox__QIDqOT__input--invalid):indeterminate:disabled {
+.ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):checked:disabled, .ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):indeterminate:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-checkbox__QIDqOT__input {
+.ds-checkbox__GqWYnG__input {
   /** checkmark **/
 }
-.ds-checkbox__QIDqOT__input::before {
+.ds-checkbox__GqWYnG__input::before {
   content: "";
   display: block;
   height: 1em;
@@ -136,36 +136,36 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.ds-checkbox__QIDqOT__input:checked::before {
+.ds-checkbox__GqWYnG__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__QIDqOT__input:indeterminate::before {
+.ds-checkbox__GqWYnG__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__QIDqOT__input:checked:disabled::before {
+.ds-checkbox__GqWYnG__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__QIDqOT__input:indeterminate:disabled::before {
+.ds-checkbox__GqWYnG__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__QIDqOT--no-margin .ds-checkbox__QIDqOT__input {
+.ds-checkbox__GqWYnG--no-margin .ds-checkbox__GqWYnG__input {
   margin-right: 0;
 }
-.ds-checkbox__QIDqOT--disabled {
+.ds-checkbox__GqWYnG--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-checkbox__QIDqOT__span--optional {
+.ds-checkbox__GqWYnG__span--optional {
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
-.ds-checkbox__QIDqOT:has(.ds-checkbox__QIDqOT__input:disabled) {
+.ds-checkbox__GqWYnG:has(.ds-checkbox__GqWYnG__input:disabled) {
   cursor: not-allowed;
 }
 
-.ds-checkbox__QIDqOT-error {
+.ds-checkbox__GqWYnG-error {
   display: flex;
 }
-.ds-checkbox__QIDqOT-error--visible {
+.ds-checkbox__GqWYnG-error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }

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

@@ -1,11 +1,11 @@
-.ds-checkbox-group__QIDqOT {
+.ds-checkbox-group__GqWYnG {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__QIDqOT__legend {
+.ds-checkbox-group__GqWYnG__legend {
   color: var(--ds-textColor-default);
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
@@ -14,28 +14,28 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox-group__QIDqOT__assistive-text {
+.ds-checkbox-group__GqWYnG__assistive-text {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   color: var(--ds-textColor-secondary);
   line-height: var(--ds-lineHeight-large);
   margin-bottom: var(--ds-spacing-2xSmall);
 }
-.ds-checkbox-group__QIDqOT__error {
+.ds-checkbox-group__GqWYnG__error {
   display: flex;
 }
-.ds-checkbox-group__QIDqOT__error--visible {
+.ds-checkbox-group__GqWYnG__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__QIDqOT > .ds-checkbox-group__QIDqOT__checkboxes {
+.ds-checkbox-group__GqWYnG > .ds-checkbox-group__GqWYnG__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__QIDqOT--inset {
+.ds-checkbox-group__GqWYnG--inset {
   margin-left: var(--ds-spacing-medium);
 }
-.ds-checkbox-group__QIDqOT--horizontal > .ds-checkbox-group__QIDqOT__checkboxes {
+.ds-checkbox-group__GqWYnG--horizontal > .ds-checkbox-group__GqWYnG__checkboxes {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }

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

@@ -1,9 +1,9 @@
-.ds-chip__QIDqOT:focus-visible {
+.ds-chip__GqWYnG: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-chip__QIDqOT {
+.ds-chip__GqWYnG {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -18,12 +18,12 @@
   border: var(--ds-borderWidth-thin) solid var(--ds-borderColor-primary);
   border-radius: 1rem;
 }
-.ds-chip__QIDqOT:hover {
+.ds-chip__GqWYnG:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__QIDqOT:active {
+.ds-chip__GqWYnG:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__QIDqOT__text {
+.ds-chip__GqWYnG__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }

package/dist/collection/components/01-base-components/ds-chip-group/ds-chip-group.css

@@ -1,4 +1,4 @@
-.ds-chip-group__QIDqOT__chips {
+.ds-chip-group__GqWYnG__chips {
   display: inline-flex;
   flex-flow: row wrap;
   gap: var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);