@uh-design-system/component-library 1.5.0 → 1.5.1

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

@@ -137,7 +137,7 @@
   display: block;
 }
 
-.ds-card__GqWYnG {
+.ds-card__bQiYWO {
   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__GqWYnG--fluid-height {
+.ds-card__bQiYWO--fluid-height {
   height: 100%;
 }
-.ds-card__GqWYnG.ds-card__GqWYnG--link--full:hover {
+.ds-card__bQiYWO.ds-card__bQiYWO--link--full:hover {
   background-color: var(--ds-bgColor-neutralLight-hover);
   cursor: pointer;
 }
-.ds-card__GqWYnG.ds-card__GqWYnG--link--full:hover .ds-card__GqWYnG__icon {
+.ds-card__bQiYWO.ds-card__bQiYWO--link--full:hover .ds-card__bQiYWO__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__GqWYnG.ds-card__GqWYnG--link--full:hover .ds-card__GqWYnG__image-container--has-image::after {
+.ds-card__bQiYWO.ds-card__bQiYWO--link--full:hover .ds-card__bQiYWO__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-card__GqWYnG.ds-card__GqWYnG--link--full:hover .ds-card__GqWYnG__link--heading {
+.ds-card__bQiYWO.ds-card__bQiYWO--link--full:hover .ds-card__bQiYWO__link--heading {
   text-decoration: none;
 }
-.ds-card__GqWYnG.ds-card__GqWYnG--link--full:active {
+.ds-card__bQiYWO.ds-card__bQiYWO--link--full:active {
   background-color: var(--ds-bgColor-neutralLight-active);
   outline: none;
 }
-.ds-card__GqWYnG.ds-card__GqWYnG--link--full:active .ds-card__GqWYnG__icon {
+.ds-card__bQiYWO.ds-card__bQiYWO--link--full:active .ds-card__bQiYWO__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__GqWYnG.ds-card__GqWYnG--link--full:active .ds-card__GqWYnG__image-container--has-image::after {
+.ds-card__bQiYWO.ds-card__bQiYWO--link--full:active .ds-card__bQiYWO__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-card__GqWYnG.ds-card__GqWYnG--link--full:active .ds-card__GqWYnG__link--heading {
+.ds-card__bQiYWO.ds-card__bQiYWO--link--full:active .ds-card__bQiYWO__link--heading {
   text-decoration: none;
 }
-.ds-card__GqWYnG.ds-card__GqWYnG--link--full:focus-within {
+.ds-card__bQiYWO.ds-card__bQiYWO--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__GqWYnG {
+.ds-card__bQiYWO {
   /**
   * Expand the clickable area of the heading link to the entire heading
   */
 }
-.ds-card__GqWYnG .ds-card__GqWYnG__link--full:after {
+.ds-card__bQiYWO .ds-card__bQiYWO__link--full:after {
   content: "";
   position: absolute;
   inset: 0;
 }
-.ds-card__GqWYnG--horizontal {
+.ds-card__bQiYWO--horizontal {
   flex-direction: column;
 }
 @media (min-width: 30rem) {
-  .ds-card__GqWYnG--horizontal {
+  .ds-card__bQiYWO--horizontal {
     display: grid;
     grid-template: "image content" auto "image contentBottom" auto/auto 1fr;
   }
-  .ds-card__GqWYnG--horizontal .ds-card__GqWYnG__image-container {
+  .ds-card__bQiYWO--horizontal .ds-card__bQiYWO__image-container {
     grid-area: image;
     height: 100%;
     order: initial;
   }
-  .ds-card__GqWYnG--horizontal .ds-card__GqWYnG__content {
+  .ds-card__bQiYWO--horizontal .ds-card__bQiYWO__content {
     grid-area: content;
     height: 100%;
     order: initial;
   }
-  .ds-card__GqWYnG--horizontal .ds-card__GqWYnG__content--bottom {
+  .ds-card__bQiYWO--horizontal .ds-card__bQiYWO__content--bottom {
     grid-area: contentBottom;
     order: initial;
   }
 }
-.ds-card__GqWYnG--filled {
+.ds-card__bQiYWO--filled {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-card__GqWYnG__image-container {
+.ds-card__bQiYWO__image-container {
   display: none;
 }
-.ds-card__GqWYnG__image-container--has-image {
+.ds-card__bQiYWO__image-container--has-image {
   display: block;
   height: auto;
   order: 1;
@@ -236,19 +236,19 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-card__GqWYnG:not(.ds-card__GqWYnG--vertical) .ds-card__GqWYnG__image-container--has-image {
+  .ds-card__bQiYWO:not(.ds-card__bQiYWO--vertical) .ds-card__bQiYWO__image-container--has-image {
     max-width: var(--vertical-image-max-width, 200px);
   }
 }
 @media (min-width: 30rem) {
-  .ds-card__GqWYnG:not(.ds-card__GqWYnG--horizontal) .ds-card__GqWYnG__image-container--has-image {
+  .ds-card__bQiYWO:not(.ds-card__bQiYWO--horizontal) .ds-card__bQiYWO__image-container--has-image {
     max-height: var(--horizontal-image-max-height, auto);
   }
 }
-.ds-card__GqWYnG--link--full .ds-card__GqWYnG__image-container--has-image {
+.ds-card__bQiYWO--link--full .ds-card__bQiYWO__image-container--has-image {
   pointer-events: none;
 }
-.ds-card__GqWYnG__tag {
+.ds-card__bQiYWO__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__GqWYnG__image {
+.ds-card__bQiYWO__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.ds-card__GqWYnG__content {
+.ds-card__bQiYWO__content {
   display: flex;
   flex-direction: column;
   order: 2;
   width: 100%;
 }
-.ds-card__GqWYnG__content--top {
+.ds-card__bQiYWO__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__GqWYnG__content--top__text {
+.ds-card__bQiYWO__content--top__text {
   display: flex;
   flex-direction: column;
 }
-.ds-card__GqWYnG__content--bottom {
+.ds-card__bQiYWO__content--bottom {
   order: 4;
 }
-.ds-card__GqWYnG__eyebrow {
+.ds-card__bQiYWO__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__GqWYnG__heading-container {
+.ds-card__bQiYWO__heading-container {
   display: flex;
   flex-direction: column;
 }
-.ds-card__GqWYnG__heading--hyphenated {
+.ds-card__bQiYWO__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__GqWYnG__heading {
+.ds-card__bQiYWO__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__GqWYnG__heading {
+  .ds-card__bQiYWO__heading {
     font-size: var(--ds-fontSize-20);
     line-height: 24px;
   }
 }
-.ds-card__GqWYnG__heading {
+.ds-card__bQiYWO__heading {
   align-items: center;
   display: flex;
   margin: 0;
@@ -332,12 +332,12 @@
   order: 2;
   text-wrap: balance;
 }
-.ds-card__GqWYnG__heading .ds-card__GqWYnG__link {
+.ds-card__bQiYWO__heading .ds-card__bQiYWO__link {
   color: var(--ds-textColor-default);
   text-decoration: none;
   outline: none;
 }
-.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 {
+.ds-card__bQiYWO__heading .ds-card__bQiYWO__link:not(.ds-card__bQiYWO__link--full):hover, .ds-card__bQiYWO__heading .ds-card__bQiYWO__link:not(.ds-card__bQiYWO__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__GqWYnG__heading .ds-card__GqWYnG__link--heading {
+.ds-card__bQiYWO__heading .ds-card__bQiYWO__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__GqWYnG__heading .ds-card__GqWYnG__link--heading:focus-visible {
+.ds-card__bQiYWO__heading .ds-card__bQiYWO__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__GqWYnG__subtitle, .ds-card__GqWYnG__slot-subtitle {
+.ds-card__bQiYWO__subtitle, .ds-card__bQiYWO__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__GqWYnG__description {
+.ds-card__bQiYWO__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__GqWYnG__icon {
+.ds-card__bQiYWO__icon {
   color: var(--ds-textColor-primary);
   font-size: var(--ds-fontSize-20);
   font-weight: normal;
 }
-.ds-card__GqWYnG__slot-subtitle--hidden {
+.ds-card__bQiYWO__slot-subtitle--hidden {
   display: none;
 }

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

@@ -5,7 +5,7 @@ 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";
-export class DsCard extends Mixin(componentFactory('ds-card')) {
+export class DsCard extends Mixin(componentFactory('ds-card', { stopRootTracking: true })) {
     constructor() {
         super();
     }
@@ -105,17 +105,17 @@ export class DsCard extends Mixin(componentFactory('ds-card')) {
         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: '2d1791ded132fe0555b0da15fd65dd80852e3b6f', class: classes, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, h("div", { key: 'e5e0c69a95b9ae7ffe13947b05281228ce621f23', class: `${baseClass}__content` }, h("div", { key: '3f852d0e6a15f3cd06851ff93735555fe62a83be', class: {
+        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: {
                 [`${baseClass}__content--top`]: true,
                 [`${baseClass}__content--top--has-link`]: Boolean(this.dsUrl),
-            } }, h("div", { key: '82d318b9df697613d65ec7fbcb97979697539d8c', 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: 'b3c42ce29e5bac045d61b6e5928de4e750e5b7c9', class: `${baseClass}__tag` }, this.dsTag), this.dsEyebrow && h("div", { key: '0953630b76867f8d1192c3bec394de66de222b52', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: 'e01ac46bfd6023d67a629b3f60560c4cc1f0e86c', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: '10fa359e507bb3f3414fce207ab6886883190fc2', class: classNames(`${baseClass}__slot-subtitle`, {
+            } }, 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`, {
                 [`${baseClass}__slot-subtitle--hidden`]: !this.hasSubtitleSlot,
-            }) }, h("slot", { key: '6acc8c509822e413ac1471f6cd8d51a7231898a8', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && this.dsLinkType !== 'heading' && h(DsIcon, { key: '843b9fab2fe7b9d216134d9405f68c941c60ad09', dsSize: "2rem", class: `${baseClass}__icon`, dsName: this.linkIcon })), this.dsDescription && (h("p", { key: 'ea6fb67e2dfe971bcfda82406bc3d7d51026ad39', class: `${baseClass}__description`, style: { '--ds-card-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("div", { key: '4014a8121fe0a2aeab83a4ec1a7b6cc581a7b4bb', class: classNames(`${baseClass}__content--bottom`, {
+            }) }, 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`, {
                 [`${baseClass}__content--bottom--has-slot-content`]: this.hasSlotContent,
-            }) }, h("div", { key: 'f8ec649a229fa8f9e7ff79f3bff55d4b3a927d24', class: `${baseClass}__slot--content` }, h("slot", { key: '96c2d0fe15945e3361940c876d364caf08c0a400', name: "content" })), h("div", { key: '96b5fc73d537f06f5dc26a4272adb5e7a5e4bf86', class: `${baseClass}__slot--footer` }, h("slot", { key: '58792731bfcf10898b016ac0955e5e06b0e21838', name: "footer" }))), h("div", { key: 'c94713daa390c7cd69c5043a02bea796623c2a1a', class: {
+            }) }, 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: {
                 [`${baseClass}__image-container`]: true,
                 [`${baseClass}__image-container--has-image`]: this.hasImageSlot,
-            } }, h("slot", { key: '6c9b6abc479e96825bba2aec084c3d0edb36bd3d', name: "image", onSlotchange: () => this.checkImageSlot() }))));
+            } }, h("slot", { key: 'bd8f1d052e1ac6c23aa1069fcfff4a4ff4cc2d7e', name: "image", onSlotchange: () => this.checkImageSlot() }))));
     }
     static get is() { return "ds-card"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,4 +1,4 @@
-.ds-checkbox__GqWYnG-fieldset {
+.ds-checkbox__bQiYWO-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
@@ -6,7 +6,7 @@
   margin: 0;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox__GqWYnG-fieldset__legend {
+.ds-checkbox__bQiYWO-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__GqWYnG-fieldset__assistive-text {
+.ds-checkbox__bQiYWO-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__GqWYnG {
+.ds-checkbox__bQiYWO {
   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__GqWYnG__input {
+.ds-checkbox__bQiYWO__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__GqWYnG__input:focus-visible {
+.ds-checkbox__bQiYWO__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__GqWYnG__input {
+.ds-checkbox__bQiYWO__input {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   border-color: var(--ds-borderColor-default);
   /** unchecked **/
 }
-.ds-checkbox__GqWYnG__input:hover, .ds-checkbox__GqWYnG__input:active {
+.ds-checkbox__bQiYWO__input:hover, .ds-checkbox__bQiYWO__input:active {
   border-color: var(--ds-borderColor-default);
 }
-.ds-checkbox__GqWYnG__input:hover {
+.ds-checkbox__bQiYWO__input:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-checkbox__GqWYnG__input:active {
+.ds-checkbox__bQiYWO__input:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-checkbox__GqWYnG__input:disabled {
+.ds-checkbox__bQiYWO__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__GqWYnG__input:disabled {
+  .ds-checkbox__bQiYWO__input:disabled {
     border-color: GrayText;
   }
 }
-.ds-checkbox__GqWYnG__input--invalid {
+.ds-checkbox__bQiYWO__input--invalid {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-checkbox__GqWYnG__input--invalid:hover {
+.ds-checkbox__bQiYWO__input--invalid:hover {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-checkbox__GqWYnG__input--invalid:active {
+.ds-checkbox__bQiYWO__input--invalid:active {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-checkbox__GqWYnG__input {
+.ds-checkbox__bQiYWO__input {
   /** checked and indeterminate **/
 }
-.ds-checkbox__GqWYnG__input--invalid:checked, .ds-checkbox__GqWYnG__input--invalid:indeterminate {
+.ds-checkbox__bQiYWO__input--invalid:checked, .ds-checkbox__bQiYWO__input--invalid:indeterminate {
   background-color: var(--ds-iconColor-danger);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__GqWYnG__input--invalid:checked:hover, .ds-checkbox__GqWYnG__input--invalid:indeterminate:hover {
+.ds-checkbox__bQiYWO__input--invalid:checked:hover, .ds-checkbox__bQiYWO__input--invalid:indeterminate:hover {
   background-color: var(--ds-palette-red-60);
 }
-.ds-checkbox__GqWYnG__input--invalid:checked:active, .ds-checkbox__GqWYnG__input--invalid:indeterminate:active {
+.ds-checkbox__bQiYWO__input--invalid:checked:active, .ds-checkbox__bQiYWO__input--invalid:indeterminate:active {
   background-color: var(--ds-palette-red-70);
 }
-.ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):checked, .ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):indeterminate {
+.ds-checkbox__bQiYWO__input:not(.ds-checkbox__bQiYWO__input--invalid):checked, .ds-checkbox__bQiYWO__input:not(.ds-checkbox__bQiYWO__input--invalid):indeterminate {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):checked:hover, .ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):indeterminate:hover {
+.ds-checkbox__bQiYWO__input:not(.ds-checkbox__bQiYWO__input--invalid):checked:hover, .ds-checkbox__bQiYWO__input:not(.ds-checkbox__bQiYWO__input--invalid):indeterminate:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):checked:active, .ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):indeterminate:active {
+.ds-checkbox__bQiYWO__input:not(.ds-checkbox__bQiYWO__input--invalid):checked:active, .ds-checkbox__bQiYWO__input:not(.ds-checkbox__bQiYWO__input--invalid):indeterminate:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):checked:disabled, .ds-checkbox__GqWYnG__input:not(.ds-checkbox__GqWYnG__input--invalid):indeterminate:disabled {
+.ds-checkbox__bQiYWO__input:not(.ds-checkbox__bQiYWO__input--invalid):checked:disabled, .ds-checkbox__bQiYWO__input:not(.ds-checkbox__bQiYWO__input--invalid):indeterminate:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-checkbox__GqWYnG__input {
+.ds-checkbox__bQiYWO__input {
   /** checkmark **/
 }
-.ds-checkbox__GqWYnG__input::before {
+.ds-checkbox__bQiYWO__input::before {
   content: "";
   display: block;
   height: 1em;
@@ -136,36 +136,36 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.ds-checkbox__GqWYnG__input:checked::before {
+.ds-checkbox__bQiYWO__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__GqWYnG__input:indeterminate::before {
+.ds-checkbox__bQiYWO__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__GqWYnG__input:checked:disabled::before {
+.ds-checkbox__bQiYWO__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__GqWYnG__input:indeterminate:disabled::before {
+.ds-checkbox__bQiYWO__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__GqWYnG--no-margin .ds-checkbox__GqWYnG__input {
+.ds-checkbox__bQiYWO--no-margin .ds-checkbox__bQiYWO__input {
   margin-right: 0;
 }
-.ds-checkbox__GqWYnG--disabled {
+.ds-checkbox__bQiYWO--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-checkbox__GqWYnG__span--optional {
+.ds-checkbox__bQiYWO__span--optional {
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
-.ds-checkbox__GqWYnG:has(.ds-checkbox__GqWYnG__input:disabled) {
+.ds-checkbox__bQiYWO:has(.ds-checkbox__bQiYWO__input:disabled) {
   cursor: not-allowed;
 }
 
-.ds-checkbox__GqWYnG-error {
+.ds-checkbox__bQiYWO-error {
   display: flex;
 }
-.ds-checkbox__GqWYnG-error--visible {
+.ds-checkbox__bQiYWO-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__GqWYnG {
+.ds-checkbox-group__bQiYWO {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__GqWYnG__legend {
+.ds-checkbox-group__bQiYWO__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__GqWYnG__assistive-text {
+.ds-checkbox-group__bQiYWO__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__GqWYnG__error {
+.ds-checkbox-group__bQiYWO__error {
   display: flex;
 }
-.ds-checkbox-group__GqWYnG__error--visible {
+.ds-checkbox-group__bQiYWO__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__GqWYnG > .ds-checkbox-group__GqWYnG__checkboxes {
+.ds-checkbox-group__bQiYWO > .ds-checkbox-group__bQiYWO__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__GqWYnG--inset {
+.ds-checkbox-group__bQiYWO--inset {
   margin-left: var(--ds-spacing-medium);
 }
-.ds-checkbox-group__GqWYnG--horizontal > .ds-checkbox-group__GqWYnG__checkboxes {
+.ds-checkbox-group__bQiYWO--horizontal > .ds-checkbox-group__bQiYWO__checkboxes {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }

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

@@ -5,7 +5,7 @@ import { declareComponentDependencies, transformTagName } from "../../../utils/u
 import { allOptions, atLeastOneOption, getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
 import { cx } from "../../../utils/cx";
 import { componentFactory } from "../../00-foundations/factories/componentFactory";
-export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group')) {
+export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group', { stopRootTracking: true })) {
     constructor() {
         super();
     }
@@ -134,7 +134,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group')
     dsNameObserver(newValue) {
         this.dsCheckboxGroupNameChange.emit(newValue);
     }
-    listenIndeterminateChildChange(event) {
+    handleDsCheckboxGroupIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
     childElementsCountObserver(newValue, oldValue) {
@@ -167,7 +167,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group')
     updateCheckedChildElementCount = (checked) => {
         this.checkedChildElementCount += checked ? 1 : -1;
     };
-    listenCheckboxChange(event) {
+    handleInput(event) {
         if (this.checkboxElem && event.composedPath().includes(this.checkboxElem)) {
             this.checkedChildElementCount = this.checkboxElem.dsChecked ? this.childElementsCount : 0;
             this.updateChildElementsChecked(this.checkboxElem.dsChecked);
@@ -187,7 +187,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group')
             }
         }
     }
-    listenCheckboxGroupChange(event) {
+    handleDsCheckboxGroupChange(event) {
         if (this.getChildElements().includes(event.target)) {
             event.stopPropagation();
             this.updateCheckedChildElementCount(event.detail.checked);
@@ -202,10 +202,10 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group')
             });
         }
     }
-    listenFocus(e) {
+    handleDsFocus(e) {
         this.focusedChildCheckbox = e.detail;
     }
-    listenBlur(e) {
+    handleDsBlur(e) {
         this.childBlurTimeout = setTimeout(() => {
             if (e.detail === this.focusedChildCheckbox) {
                 this.focusedChildCheckbox = undefined;
@@ -289,7 +289,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group')
         const checkboxesClasses = classNames(`${baseClass}__checkboxes`);
         const DsCheckbox = transformTagName('ds-checkbox', 'ds-checkbox-group', this.el);
         const DsInputValidity = transformTagName('ds-input-validity', 'ds-checkbox-group', this.el);
-        return (h("fieldset", { key: '9f1362636f810e0859f32c6db67b44bb2120e58c', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, this.dsLabel && (h("legend", { key: 'ea7ddbdf71331dcfbc0f2347868c2204d2293643', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: '12f225cea1c9a4060dc70cdfb51ad88a531b98ae', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h(DsCheckbox, { ref: checkboxElem => (this.checkboxElem = checkboxElem), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: this.dsErrorText, dsErrorsDisabled: true }), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: '36759bb74a473fad8715ee9d09b28e806e79874b', class: errorClasses }, h(DsInputValidity, { key: '4b141627fdf10a009f29cf6e3c585e7035a5a87e', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))));
+        return (h("fieldset", { key: '2b31f0afbe3f018200b982bd6900e8900cdcbbd3', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, this.dsLabel && (h("legend", { key: '22c782f28d747ff0472108aadcf113b1266de9bf', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: 'bdb80226c6b9136efa9492ffbd9e059f096a94c9', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h(DsCheckbox, { ref: checkboxElem => (this.checkboxElem = checkboxElem), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: this.dsErrorText, dsErrorsDisabled: true }), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: '143f532e903dcf3080b4bf7f6d438bbc700ae6c7', class: errorClasses }, h(DsInputValidity, { key: 'c1b07837ef7a05c2ffba793720cfad817f2d6f76', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "scoped"; }
@@ -950,31 +950,31 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group')
     static get listeners() {
         return [{
                 "name": "dsCheckboxGroupIndeterminateChildChange",
-                "method": "listenIndeterminateChildChange",
+                "method": "handleDsCheckboxGroupIndeterminateChildChange",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "input",
-                "method": "listenCheckboxChange",
+                "method": "handleInput",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "dsCheckboxGroupChange",
-                "method": "listenCheckboxGroupChange",
+                "method": "handleDsCheckboxGroupChange",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "dsFocus",
-                "method": "listenFocus",
+                "method": "handleDsFocus",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "dsBlur",
-                "method": "listenBlur",
+                "method": "handleDsBlur",
                 "target": undefined,
                 "capture": false,
                 "passive": false