@uh-design-system/component-library 1.4.0-rc.2 → 1.4.0-rc.3

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

@@ -137,7 +137,7 @@
   display: block;
 }
 
-.ds-card__oSBnIJ {
+.ds-card__KmYz6O {
   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__oSBnIJ--fluid-height {
+.ds-card__KmYz6O--fluid-height {
   height: 100%;
 }
-.ds-card__oSBnIJ.ds-card__oSBnIJ--link--full:hover {
+.ds-card__KmYz6O.ds-card__KmYz6O--link--full:hover {
   background-color: var(--ds-bgColor-neutralLight-hover);
   cursor: pointer;
 }
-.ds-card__oSBnIJ.ds-card__oSBnIJ--link--full:hover .ds-card__oSBnIJ__icon {
+.ds-card__KmYz6O.ds-card__KmYz6O--link--full:hover .ds-card__KmYz6O__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__oSBnIJ.ds-card__oSBnIJ--link--full:hover .ds-card__oSBnIJ__image-container--has-image::after {
+.ds-card__KmYz6O.ds-card__KmYz6O--link--full:hover .ds-card__KmYz6O__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-card__oSBnIJ.ds-card__oSBnIJ--link--full:hover .ds-card__oSBnIJ__link--heading {
+.ds-card__KmYz6O.ds-card__KmYz6O--link--full:hover .ds-card__KmYz6O__link--heading {
   text-decoration: none;
 }
-.ds-card__oSBnIJ.ds-card__oSBnIJ--link--full:active {
+.ds-card__KmYz6O.ds-card__KmYz6O--link--full:active {
   background-color: var(--ds-bgColor-neutralLight-active);
   outline: none;
 }
-.ds-card__oSBnIJ.ds-card__oSBnIJ--link--full:active .ds-card__oSBnIJ__icon {
+.ds-card__KmYz6O.ds-card__KmYz6O--link--full:active .ds-card__KmYz6O__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__oSBnIJ.ds-card__oSBnIJ--link--full:active .ds-card__oSBnIJ__image-container--has-image::after {
+.ds-card__KmYz6O.ds-card__KmYz6O--link--full:active .ds-card__KmYz6O__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-card__oSBnIJ.ds-card__oSBnIJ--link--full:active .ds-card__oSBnIJ__link--heading {
+.ds-card__KmYz6O.ds-card__KmYz6O--link--full:active .ds-card__KmYz6O__link--heading {
   text-decoration: none;
 }
-.ds-card__oSBnIJ.ds-card__oSBnIJ--link--full:focus-within {
+.ds-card__KmYz6O.ds-card__KmYz6O--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__oSBnIJ {
+.ds-card__KmYz6O {
   /**
   * Expand the clickable area of the heading link to the entire heading
   */
 }
-.ds-card__oSBnIJ .ds-card__oSBnIJ__link--full:after {
+.ds-card__KmYz6O .ds-card__KmYz6O__link--full:after {
   content: "";
   position: absolute;
   inset: 0;
 }
-.ds-card__oSBnIJ--horizontal {
+.ds-card__KmYz6O--horizontal {
   flex-direction: column;
 }
 @media (min-width: 30rem) {
-  .ds-card__oSBnIJ--horizontal {
+  .ds-card__KmYz6O--horizontal {
     display: grid;
     grid-template: "image content" auto "image contentBottom" auto/auto 1fr;
   }
-  .ds-card__oSBnIJ--horizontal .ds-card__oSBnIJ__image-container {
+  .ds-card__KmYz6O--horizontal .ds-card__KmYz6O__image-container {
     grid-area: image;
     height: 100%;
     order: initial;
   }
-  .ds-card__oSBnIJ--horizontal .ds-card__oSBnIJ__content {
+  .ds-card__KmYz6O--horizontal .ds-card__KmYz6O__content {
     grid-area: content;
     height: 100%;
     order: initial;
   }
-  .ds-card__oSBnIJ--horizontal .ds-card__oSBnIJ__content--bottom {
+  .ds-card__KmYz6O--horizontal .ds-card__KmYz6O__content--bottom {
     grid-area: contentBottom;
     order: initial;
   }
 }
-.ds-card__oSBnIJ--filled {
+.ds-card__KmYz6O--filled {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-card__oSBnIJ__image-container {
+.ds-card__KmYz6O__image-container {
   display: none;
 }
-.ds-card__oSBnIJ__image-container--has-image {
+.ds-card__KmYz6O__image-container--has-image {
   display: block;
   height: auto;
   order: 1;
@@ -236,19 +236,19 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-card__oSBnIJ:not(.ds-card__oSBnIJ--vertical) .ds-card__oSBnIJ__image-container--has-image {
+  .ds-card__KmYz6O:not(.ds-card__KmYz6O--vertical) .ds-card__KmYz6O__image-container--has-image {
     max-width: var(--vertical-image-max-width, 200px);
   }
 }
 @media (min-width: 30rem) {
-  .ds-card__oSBnIJ:not(.ds-card__oSBnIJ--horizontal) .ds-card__oSBnIJ__image-container--has-image {
+  .ds-card__KmYz6O:not(.ds-card__KmYz6O--horizontal) .ds-card__KmYz6O__image-container--has-image {
     max-height: var(--horizontal-image-max-height, auto);
   }
 }
-.ds-card__oSBnIJ--link--full .ds-card__oSBnIJ__image-container--has-image {
+.ds-card__KmYz6O--link--full .ds-card__KmYz6O__image-container--has-image {
   pointer-events: none;
 }
-.ds-card__oSBnIJ__tag {
+.ds-card__KmYz6O__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__oSBnIJ__image {
+.ds-card__KmYz6O__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.ds-card__oSBnIJ__content {
+.ds-card__KmYz6O__content {
   display: flex;
   flex-direction: column;
   order: 2;
   width: 100%;
 }
-.ds-card__oSBnIJ__content--top {
+.ds-card__KmYz6O__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__oSBnIJ__content--top__text {
+.ds-card__KmYz6O__content--top__text {
   display: flex;
   flex-direction: column;
 }
-.ds-card__oSBnIJ__content--bottom {
+.ds-card__KmYz6O__content--bottom {
   order: 4;
 }
-.ds-card__oSBnIJ__eyebrow {
+.ds-card__KmYz6O__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__oSBnIJ__heading-container {
+.ds-card__KmYz6O__heading-container {
   display: flex;
   flex-direction: column;
 }
-.ds-card__oSBnIJ__heading--hyphenated {
+.ds-card__KmYz6O__heading--hyphenated {
   hyphens: auto;
 }
-.ds-card__oSBnIJ__heading {
+.ds-card__KmYz6O__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__oSBnIJ__heading {
+  .ds-card__KmYz6O__heading {
     font-size: var(--ds-fontSize-20);
     line-height: 24px;
   }
 }
-.ds-card__oSBnIJ__heading {
+.ds-card__KmYz6O__heading {
   align-items: center;
   display: flex;
   margin: 0;
@@ -332,12 +332,12 @@
   order: 2;
   text-wrap: balance;
 }
-.ds-card__oSBnIJ__heading .ds-card__oSBnIJ__link {
+.ds-card__KmYz6O__heading .ds-card__KmYz6O__link {
   color: var(--ds-textColor-default);
   text-decoration: none;
   outline: none;
 }
-.ds-card__oSBnIJ__heading .ds-card__oSBnIJ__link:not(.ds-card__oSBnIJ__link--full):hover, .ds-card__oSBnIJ__heading .ds-card__oSBnIJ__link:not(.ds-card__oSBnIJ__link--full):active {
+.ds-card__KmYz6O__heading .ds-card__KmYz6O__link:not(.ds-card__KmYz6O__link--full):hover, .ds-card__KmYz6O__heading .ds-card__KmYz6O__link:not(.ds-card__KmYz6O__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__oSBnIJ__heading .ds-card__oSBnIJ__link--heading {
+.ds-card__KmYz6O__heading .ds-card__KmYz6O__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__oSBnIJ__heading .ds-card__oSBnIJ__link--heading:focus-visible {
+.ds-card__KmYz6O__heading .ds-card__KmYz6O__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__oSBnIJ__subtitle, .ds-card__oSBnIJ__slot-subtitle {
+.ds-card__KmYz6O__subtitle, .ds-card__KmYz6O__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__oSBnIJ__description {
+.ds-card__KmYz6O__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__oSBnIJ__icon {
+.ds-card__KmYz6O__icon {
   color: var(--ds-textColor-primary);
   font-size: var(--ds-fontSize-20);
   font-weight: normal;
 }
-.ds-card__oSBnIJ__slot-subtitle--hidden {
+.ds-card__KmYz6O__slot-subtitle--hidden {
   display: none;
 }

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

@@ -101,17 +101,17 @@ export class DsCard {
         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: 'fee8177c357699a41290cae6abf5e652b65f6508', class: classes, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, h("div", { key: 'c46d9c2bcceae090bf91f54367fe9bf394921002', class: `${baseClass}__content` }, h("div", { key: 'bf0740ced2cb6445fb304d2151d04966e8b70056', class: {
+        return (h("article", { key: 'fc9ea3131fae176552872efa2702ce3a1093fb59', class: classes, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, h("div", { key: '11a74e7d4a0dbecc6a82fd20c1c2718a9e5220d7', class: `${baseClass}__content` }, h("div", { key: '56a0eb6fd24688ff3609c0f74bd9e3c7ff63285b', class: {
                 [`${baseClass}__content--top`]: true,
                 [`${baseClass}__content--top--has-link`]: Boolean(this.dsUrl),
-            } }, h("div", { key: '1f9a184f8b8cef3baa4f9ff0a579b68a19ba5550', class: `${baseClass}__heading-container` }, this.dsHeading && 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: 'f81019f78a2d456e8f8cd38eed046a2121982ead', class: `${baseClass}__tag` }, this.dsTag), this.dsEyebrow && h("div", { key: '253719d48dc9e22ae01bbb09f70b00175634c2c9', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: 'd8f4c0f25be25a0d76e8223dc44e68c895d78737', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: 'bb6490c669574c12237d84ed17976253f12b7b93', class: classNames(`${baseClass}__slot-subtitle`, {
+            } }, h("div", { key: '9fc2f633e739ee22e01dc9efba397d8c29152c36', 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: 'cef4fa8c42e5b8174e0870092086255353cde89c', class: `${baseClass}__tag` }, this.dsTag), this.dsEyebrow && h("div", { key: '61bd2b134a7321b645579236f2024221fd5b7fba', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: '136978f0b0fdb9f1de0e1827bee1a29725fa7e47', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: '9e958f257dd6e1cba55536d76fedb139d3f375e0', class: classNames(`${baseClass}__slot-subtitle`, {
                 [`${baseClass}__slot-subtitle--hidden`]: !this.hasSubtitleSlot,
-            }) }, h("slot", { key: '30d5be3ecfeb141782c58446f61f358522250ed7', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && this.dsLinkType !== 'heading' && h(DsIcon, { key: 'ce02738b9a3e3f0b3a03e2a9cf290eb36226fa6c', dsSize: "2rem", class: `${baseClass}__icon`, dsName: this.linkIcon })), this.dsDescription && (h("p", { key: '6771bf6000b9bacb253420a5513db3fe30ccc1e7', class: `${baseClass}__description`, style: { '--ds-card-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("div", { key: '9d2c7ccef338986f77d6b83958deda9e7f914035', class: classNames(`${baseClass}__content--bottom`, {
+            }) }, h("slot", { key: '2822a1eaaa013abbcc713512972ae9ba72845811', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && this.dsLinkType !== 'heading' && h(DsIcon, { key: 'fc96c023ab6434c1f9556487ce2626f470a96557', dsSize: "2rem", class: `${baseClass}__icon`, dsName: this.linkIcon })), this.dsDescription && (h("p", { key: '4ae570461ae03371141238fa340728fc4371573b', class: `${baseClass}__description`, style: { '--ds-card-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("div", { key: 'c7dadca86ac1dc379c25fc018c2f070693ab8199', class: classNames(`${baseClass}__content--bottom`, {
                 [`${baseClass}__content--bottom--has-slot-content`]: this.hasSlotContent,
-            }) }, h("div", { key: '72db5679fb7e54a6363000cd039010f358021eda', class: `${baseClass}__slot--content` }, h("slot", { key: '92229eaecc394122ebbbc685e53b0403ed768f11', name: "content" })), h("div", { key: '65fc5b3441dac2c8fd65cd233abceb8041d8bec0', class: `${baseClass}__slot--footer` }, h("slot", { key: '86143c066f2b14a59c6a2c76235eabe3021a6fea', name: "footer" }))), h("div", { key: '2617de940ba9a9c6f839f6fdf014025c55401721', class: {
+            }) }, h("div", { key: '4c780ce7598fcc6bc115383738e46dba6834f66a', class: `${baseClass}__slot--content` }, h("slot", { key: '9650ba762386fbe0c154a8ce108eb086e6cffb33', name: "content" })), h("div", { key: '4506acbee6ac2340ece8ad9e3d7abe70563624dd', class: `${baseClass}__slot--footer` }, h("slot", { key: 'd241d23ca7fd1b5e4d18d17f78511eef72c9b57c', name: "footer" }))), h("div", { key: 'ec30879cf27196a899f25fc448f02bb44043fad9', class: {
                 [`${baseClass}__image-container`]: true,
                 [`${baseClass}__image-container--has-image`]: this.hasImageSlot,
-            } }, h("slot", { key: '9257a3af2b8ba1a801a9730d458078b914761cd8', name: "image", onSlotchange: () => this.checkImageSlot() }))));
+            } }, h("slot", { key: '8a1a5ee9a4f8cae2475e804a6bebccbbeaa3ea9a', 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__oSBnIJ-fieldset {
+.ds-checkbox__KmYz6O-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
@@ -6,7 +6,7 @@
   margin: 0;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox__oSBnIJ-fieldset__legend {
+.ds-checkbox__KmYz6O-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__oSBnIJ-fieldset__assistive-text {
+.ds-checkbox__KmYz6O-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__oSBnIJ {
+.ds-checkbox__KmYz6O {
   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__oSBnIJ__input {
+.ds-checkbox__KmYz6O__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__oSBnIJ__input:focus-visible {
+.ds-checkbox__KmYz6O__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__oSBnIJ__input {
+.ds-checkbox__KmYz6O__input {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   border-color: var(--ds-borderColor-default);
   /** unchecked **/
 }
-.ds-checkbox__oSBnIJ__input:hover, .ds-checkbox__oSBnIJ__input:active {
+.ds-checkbox__KmYz6O__input:hover, .ds-checkbox__KmYz6O__input:active {
   border-color: var(--ds-borderColor-default);
 }
-.ds-checkbox__oSBnIJ__input:hover {
+.ds-checkbox__KmYz6O__input:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-checkbox__oSBnIJ__input:active {
+.ds-checkbox__KmYz6O__input:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-checkbox__oSBnIJ__input:disabled {
+.ds-checkbox__KmYz6O__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__oSBnIJ__input:disabled {
+  .ds-checkbox__KmYz6O__input:disabled {
     border-color: GrayText;
   }
 }
-.ds-checkbox__oSBnIJ__input--invalid {
+.ds-checkbox__KmYz6O__input--invalid {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-checkbox__oSBnIJ__input--invalid:hover {
+.ds-checkbox__KmYz6O__input--invalid:hover {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-checkbox__oSBnIJ__input--invalid:active {
+.ds-checkbox__KmYz6O__input--invalid:active {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-checkbox__oSBnIJ__input {
+.ds-checkbox__KmYz6O__input {
   /** checked and indeterminate **/
 }
-.ds-checkbox__oSBnIJ__input--invalid:checked, .ds-checkbox__oSBnIJ__input--invalid:indeterminate {
+.ds-checkbox__KmYz6O__input--invalid:checked, .ds-checkbox__KmYz6O__input--invalid:indeterminate {
   background-color: var(--ds-iconColor-danger);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__oSBnIJ__input--invalid:checked:hover, .ds-checkbox__oSBnIJ__input--invalid:indeterminate:hover {
+.ds-checkbox__KmYz6O__input--invalid:checked:hover, .ds-checkbox__KmYz6O__input--invalid:indeterminate:hover {
   background-color: var(--ds-palette-red-60);
 }
-.ds-checkbox__oSBnIJ__input--invalid:checked:active, .ds-checkbox__oSBnIJ__input--invalid:indeterminate:active {
+.ds-checkbox__KmYz6O__input--invalid:checked:active, .ds-checkbox__KmYz6O__input--invalid:indeterminate:active {
   background-color: var(--ds-palette-red-70);
 }
-.ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):checked, .ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):indeterminate {
+.ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):checked, .ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):indeterminate {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):checked:hover, .ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):indeterminate:hover {
+.ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):checked:hover, .ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):indeterminate:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):checked:active, .ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):indeterminate:active {
+.ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):checked:active, .ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):indeterminate:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):checked:disabled, .ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):indeterminate:disabled {
+.ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):checked:disabled, .ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):indeterminate:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-checkbox__oSBnIJ__input {
+.ds-checkbox__KmYz6O__input {
   /** checkmark **/
 }
-.ds-checkbox__oSBnIJ__input::before {
+.ds-checkbox__KmYz6O__input::before {
   content: "";
   display: block;
   height: 1em;
@@ -136,36 +136,36 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.ds-checkbox__oSBnIJ__input:checked::before {
+.ds-checkbox__KmYz6O__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__oSBnIJ__input:indeterminate::before {
+.ds-checkbox__KmYz6O__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__oSBnIJ__input:checked:disabled::before {
+.ds-checkbox__KmYz6O__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__oSBnIJ__input:indeterminate:disabled::before {
+.ds-checkbox__KmYz6O__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__oSBnIJ--no-margin .ds-checkbox__oSBnIJ__input {
+.ds-checkbox__KmYz6O--no-margin .ds-checkbox__KmYz6O__input {
   margin-right: 0;
 }
-.ds-checkbox__oSBnIJ--disabled {
+.ds-checkbox__KmYz6O--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-checkbox__oSBnIJ__span--optional {
+.ds-checkbox__KmYz6O__span--optional {
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
-.ds-checkbox__oSBnIJ:has(.ds-checkbox__oSBnIJ__input:disabled) {
+.ds-checkbox__KmYz6O:has(.ds-checkbox__KmYz6O__input:disabled) {
   cursor: not-allowed;
 }
 
-.ds-checkbox__oSBnIJ-error {
+.ds-checkbox__KmYz6O-error {
   display: flex;
 }
-.ds-checkbox__oSBnIJ-error--visible {
+.ds-checkbox__KmYz6O-error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }

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

@@ -680,7 +680,8 @@ export class DsCheckbox extends Mixin(ariaDeprecationFactory, disableEventsFacto
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -701,7 +702,8 @@ export class DsCheckbox extends Mixin(ariaDeprecationFactory, disableEventsFacto
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }

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

@@ -1,11 +1,11 @@
-.ds-checkbox-group__oSBnIJ {
+.ds-checkbox-group__KmYz6O {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__oSBnIJ__legend {
+.ds-checkbox-group__KmYz6O__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__oSBnIJ__assistive-text {
+.ds-checkbox-group__KmYz6O__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__oSBnIJ__error {
+.ds-checkbox-group__KmYz6O__error {
   display: flex;
 }
-.ds-checkbox-group__oSBnIJ__error--visible {
+.ds-checkbox-group__KmYz6O__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__oSBnIJ > .ds-checkbox-group__oSBnIJ__checkboxes {
+.ds-checkbox-group__KmYz6O > .ds-checkbox-group__KmYz6O__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__oSBnIJ--inset {
+.ds-checkbox-group__KmYz6O--inset {
   margin-left: var(--ds-spacing-medium);
 }
-.ds-checkbox-group__oSBnIJ--horizontal > .ds-checkbox-group__oSBnIJ__checkboxes {
+.ds-checkbox-group__KmYz6O--horizontal > .ds-checkbox-group__KmYz6O__checkboxes {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }

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

@@ -288,7 +288,7 @@ export class DsCheckboxGroup {
         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: '97c33f7bfa88e2f5e65ec4b2e1acf3eae38735a5', 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: '30fede2edca715e8c0f7be36e2f2b96818f668d1', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: '28a6a32ccef64f5032cc5db8cad62e43695bed85', 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))), !!this.dsErrorText && (h("div", { key: 'd8b664aed2374d434160f2434e3ad7e6075361eb', class: errorClasses }, h(DsInputValidity, { key: '2a6aa333b8c99be0034866eccdc2520df08fe1b7', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
+        return (h("fieldset", { key: 'f4a2a1a756d5462350de2edaa9aed784a83e0d09', 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: '5cbaa003cc6889bc6236ab319aa19fa78a55738e', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: '7d80e58250290c5dcd5e97d883340196b3bdbda7', 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))), !!this.dsErrorText && (h("div", { key: '405b931a1db8fe270b31840e74ab5f81a6d859dd', class: errorClasses }, h(DsInputValidity, { key: 'ab659a093a9a5b8f9ced356e1f2580b772e58c3e', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -674,7 +674,8 @@ export class DsCheckboxGroup {
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -695,7 +696,8 @@ export class DsCheckboxGroup {
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }

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

@@ -1,9 +1,9 @@
-.ds-chip__oSBnIJ:focus-visible {
+.ds-chip__KmYz6O: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__oSBnIJ {
+.ds-chip__KmYz6O {
   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__oSBnIJ:hover {
+.ds-chip__KmYz6O:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__oSBnIJ:active {
+.ds-chip__KmYz6O:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__oSBnIJ__text {
+.ds-chip__KmYz6O__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }

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

@@ -70,7 +70,7 @@ export class DsChip extends Mixin(ariaDeprecationFactory) {
         const ariaLabel = this.dsAriaLabel ?? this.inheritedAttributes['aria-label'];
         const Elem = resolvedRole ? 'div' : Fragment;
         const restAttributes = omit(this.inheritedAttributes, ['role', 'aria-label']);
-        return (h(Elem, { key: '371f7c04673f8502f88233737ca85171656fdcc0', role: resolvedRole }, h("button", { key: '8b49be3de497f1c0aff0b7bd2fe68f72d44aab3d', ref: el => (this.buttonEl = el), class: baseClass, id: this.dsId, name: this.name, form: this.dsForm, type: this.dsType, "aria-label": ariaLabel, ...restAttributes }, h("slot", { key: '1ed5ff4cba08a042fbaedb52f3e92a26f9101f92', name: "prefix" }, this.dsIcon && h(DsIcon, { key: 'e1605059499255cd7aa3c9d846353b8608bcefc4', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: '3a3798b0824da46103ba0cba455dd2c5393addcd', class: `${baseClass}__text` }, h("slot", { key: 'ffaf74d9bbb17c882be1941de517b90db4ab29c5' }, this.dsText), h(DsVisuallyHidden, { key: 'a2833c2b0fdd05adfb78185f4f378b67b7d061e1', dsTag: "span" }, ", ", removeSelection())), h(DsIcon, { key: '9588bb2ebcf2a28cdbaa4126c0a88401fb18ad05', dsName: "close", dsSize: "1rem" }))));
+        return (h(Elem, { key: '5e8fac24a20ef512b186789fb1c7884b01d4a134', role: resolvedRole }, h("button", { key: '2ca4745f784e31dea050d4bf3f5b726a90635707', ref: el => (this.buttonEl = el), class: baseClass, id: this.dsId, name: this.name, form: this.dsForm, type: this.dsType, "aria-label": ariaLabel, ...restAttributes }, h("slot", { key: '7b5cd3d4e3adaeb8e155f2a010a40af90d778dbe', name: "prefix" }, this.dsIcon && h(DsIcon, { key: '8b77eaa9122d68572ed39a707e795d408dbdc5d2', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: '70e7f1a4235e8f427a18bdae863c93b4d48490ce', class: `${baseClass}__text` }, h("slot", { key: 'ccc96fdcb6b8576b0a56539ce0e219b0a65c0d17' }, this.dsText), h(DsVisuallyHidden, { key: '797a97d887309696dffa97a06fa9f315ee8413e9', dsTag: "span" }, ", ", removeSelection())), h(DsIcon, { key: 'dc664f8b8afbdc823605a6c36455152ddccf1a66', dsName: "close", dsSize: "1rem" }))));
     }
     static get is() { return "ds-chip"; }
     static get originalStyleUrls() {

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

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