npm - @uh-design-system/component-library - Versions diffs - 1.2.0 → 1.3.0-rc.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1701) hide show

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

@@ -2,7 +2,7 @@
   display: block;
 }
-.ds-card__DFAX9n {
+.ds-card__HTSRrd {
   background-color: var(--ds-bgColor-white);
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   display: flex;
@@ -13,80 +13,86 @@
   height: auto;
   position: relative;
 }
-.ds-card__DFAX9n--fluid-height {
+.ds-card__HTSRrd--fluid-height {
   height: 100%;
 }
-.ds-card__DFAX9n.ds-card__DFAX9n--link--full:hover {
+.ds-card__HTSRrd.ds-card__HTSRrd--link--full:hover {
   background-color: var(--ds-bgColor-neutralLight-hover);
   cursor: pointer;
 }
-.ds-card__DFAX9n.ds-card__DFAX9n--link--full:hover .ds-card__DFAX9n__icon {
+.ds-card__HTSRrd.ds-card__HTSRrd--link--full:hover .ds-card__HTSRrd__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__DFAX9n.ds-card__DFAX9n--link--full:hover .ds-card__DFAX9n__image-container--has-image::after {
+.ds-card__HTSRrd.ds-card__HTSRrd--link--full:hover .ds-card__HTSRrd__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-card__DFAX9n.ds-card__DFAX9n--link--full:active {
+.ds-card__HTSRrd.ds-card__HTSRrd--link--full:hover .ds-card__HTSRrd__link--heading {
+  text-decoration: none;
+}
+.ds-card__HTSRrd.ds-card__HTSRrd--link--full:active {
   background-color: var(--ds-bgColor-neutralLight-active);
   outline: none;
 }
-.ds-card__DFAX9n.ds-card__DFAX9n--link--full:active .ds-card__DFAX9n__icon {
+.ds-card__HTSRrd.ds-card__HTSRrd--link--full:active .ds-card__HTSRrd__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__DFAX9n.ds-card__DFAX9n--link--full:active .ds-card__DFAX9n__image-container--has-image::after {
+.ds-card__HTSRrd.ds-card__HTSRrd--link--full:active .ds-card__HTSRrd__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-card__DFAX9n.ds-card__DFAX9n--link--full:focus {
+.ds-card__HTSRrd.ds-card__HTSRrd--link--full:active .ds-card__HTSRrd__link--heading {
+  text-decoration: none;
+}
+.ds-card__HTSRrd.ds-card__HTSRrd--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__DFAX9n {
+.ds-card__HTSRrd {
   /**
   * Expand the clickable area of the heading link to the entire heading
   */
 }
-.ds-card__DFAX9n .ds-card__DFAX9n__link--full:after {
+.ds-card__HTSRrd .ds-card__HTSRrd__link--full:after {
   content: "";
   position: absolute;
   inset: 0;
 }
-.ds-card__DFAX9n--horizontal {
+.ds-card__HTSRrd--horizontal {
   flex-direction: column;
 }
 @media (min-width: 30rem) {
-  .ds-card__DFAX9n--horizontal {
+  .ds-card__HTSRrd--horizontal {
     display: grid;
     grid-template: "image content" auto "image contentBottom" auto/auto 1fr;
   }
-  .ds-card__DFAX9n--horizontal .ds-card__DFAX9n__image-container {
+  .ds-card__HTSRrd--horizontal .ds-card__HTSRrd__image-container {
     grid-area: image;
     height: 100%;
     order: initial;
   }
-  .ds-card__DFAX9n--horizontal .ds-card__DFAX9n__content {
+  .ds-card__HTSRrd--horizontal .ds-card__HTSRrd__content {
     grid-area: content;
     height: 100%;
     order: initial;
   }
-  .ds-card__DFAX9n--horizontal .ds-card__DFAX9n__content--bottom {
+  .ds-card__HTSRrd--horizontal .ds-card__HTSRrd__content--bottom {
     grid-area: contentBottom;
     order: initial;
   }
 }
-.ds-card__DFAX9n--filled {
+.ds-card__HTSRrd--filled {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-card__DFAX9n__image-container {
+.ds-card__HTSRrd__image-container {
   display: none;
 }
-.ds-card__DFAX9n__image-container--has-image {
+.ds-card__HTSRrd__image-container--has-image {
   display: block;
   height: auto;
   order: 1;
@@ -94,19 +100,19 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-card__DFAX9n:not(.ds-card__DFAX9n--vertical) .ds-card__DFAX9n__image-container--has-image {
+  .ds-card__HTSRrd:not(.ds-card__HTSRrd--vertical) .ds-card__HTSRrd__image-container--has-image {
     max-width: var(--vertical-image-max-width, 200px);
   }
 }
 @media (min-width: 30rem) {
-  .ds-card__DFAX9n:not(.ds-card__DFAX9n--horizontal) .ds-card__DFAX9n__image-container--has-image {
+  .ds-card__HTSRrd:not(.ds-card__HTSRrd--horizontal) .ds-card__HTSRrd__image-container--has-image {
     max-height: var(--horizontal-image-max-height, auto);
   }
 }
-.ds-card__DFAX9n--link--full .ds-card__DFAX9n__image-container--has-image {
+.ds-card__HTSRrd--link--full .ds-card__HTSRrd__image-container--has-image {
   pointer-events: none;
 }
-.ds-card__DFAX9n__tag {
+.ds-card__HTSRrd__tag {
   background-color: var(--ds-bgColor-black);
   color: var(--ds-textColor-white);
   font-family: var(--ds-fontFamily-body);
@@ -122,19 +128,19 @@
   top: 1rem;
   z-index: 2;
 }
-.ds-card__DFAX9n__image {
+.ds-card__HTSRrd__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.ds-card__DFAX9n__content {
+.ds-card__HTSRrd__content {
   display: flex;
   flex-direction: column;
   order: 2;
   min-height: 128px;
   width: 100%;
 }
-.ds-card__DFAX9n__content--top {
+.ds-card__HTSRrd__content--top {
   align-items: flex-start;
   display: flex;
   gap: var(--ds-spacing-small);
@@ -142,14 +148,14 @@
   order: 2;
   padding: var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
 }
-.ds-card__DFAX9n__content--top__text {
+.ds-card__HTSRrd__content--top__text {
   display: flex;
   flex-direction: column;
 }
-.ds-card__DFAX9n__content--bottom {
+.ds-card__HTSRrd__content--bottom {
   order: 4;
 }
-.ds-card__DFAX9n__eyebrow {
+.ds-card__HTSRrd__eyebrow {
   color: var(--ds-textColor-secondary);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -159,11 +165,11 @@
   margin-bottom: var(--ds-spacing-2xSmall);
   order: 1;
 }
-.ds-card__DFAX9n__heading-container {
+.ds-card__HTSRrd__heading-container {
   display: flex;
   flex-direction: column;
 }
-.ds-card__DFAX9n__heading {
+.ds-card__HTSRrd__heading {
   align-items: center;
   color: var(--ds-textColor-default);
   display: flex;
@@ -176,20 +182,20 @@
   order: 2;
   text-wrap: balance;
 }
-.ds-card__DFAX9n__heading .ds-card__DFAX9n__link {
+.ds-card__HTSRrd__heading .ds-card__HTSRrd__link {
   color: var(--ds-textColor-default);
   text-decoration: none;
   outline: none;
 }
-.ds-card__DFAX9n__heading .ds-card__DFAX9n__link:hover, .ds-card__DFAX9n__heading .ds-card__DFAX9n__link:active {
+.ds-card__HTSRrd__heading .ds-card__HTSRrd__link:not(.ds-card__HTSRrd__link--full):hover, .ds-card__HTSRrd__heading .ds-card__HTSRrd__link:not(.ds-card__HTSRrd__link--full):active {
   text-decoration-line: underline;
   text-decoration-style: solid;
-  text-decoration-skip-ink: none;
+  text-decoration-skip-ink: auto;
   text-decoration-thickness: 13%; /* 2.6px */
   text-underline-offset: 12%; /* 2.4px */
   text-underline-position: from-font;
 }
-.ds-card__DFAX9n__heading .ds-card__DFAX9n__link--heading {
+.ds-card__HTSRrd__heading .ds-card__HTSRrd__link--heading {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -197,7 +203,12 @@
   text-underline-offset: 12%; /* 2.4px */
   text-underline-position: from-font;
 }
-.ds-card__DFAX9n__subtitle, .ds-card__DFAX9n__slot-subtitle {
+.ds-card__HTSRrd__heading .ds-card__HTSRrd__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__HTSRrd__subtitle, .ds-card__HTSRrd__slot-subtitle {
   font-size: var(--ds-fontSize-16);
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-secondary);
@@ -205,7 +216,7 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   order: 3;
 }
-.ds-card__DFAX9n__description {
+.ds-card__HTSRrd__description {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--description-line-clamp, "none");
   color: var(--ds-textColor-default);
@@ -221,11 +232,11 @@
   text-wrap: pretty;
   order: 3;
 }
-.ds-card__DFAX9n__icon {
+.ds-card__HTSRrd__icon {
   color: var(--ds-textColor-primary);
   font-size: var(--ds-fontSize-20);
   font-weight: normal;
 }
-.ds-card__DFAX9n__slot-subtitle--hidden {
+.ds-card__HTSRrd__slot-subtitle--hidden {
   display: none;
 }

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

@@ -104,12 +104,12 @@ export class DsCard {
                 [`${baseClass}__content--top--has-link`]: Boolean(this.dsUrl),
             } }, h("div", { key: '51caac9fa0643dd253e8ec9585395aef1def1d26', 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)))) : (h(HeadingTag, { class: `${baseClass}__heading` }, h("slot", { name: "heading" }, this.dsHeading))), this.dsTag && this.hasImageSlot && h("span", { key: '76a24245b22c4a9fd840322908bdd782991a3002', class: `${baseClass}__tag` }, this.dsTag), this.dsEyebrow && h("div", { key: '326c79599beba73cbacbc4a844049866e3bcdf94', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: 'f71fd3c85d38bdaa3bf2fca02930fe8acc9b66a3', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: 'd33762c291ca18a15e05bea3932dac522c9435fe', class: classNames(`${baseClass}__slot-subtitle`, {
                 [`${baseClass}__slot-subtitle--hidden`]: !this.hasSubtitleSlot,
-            }) }, h("slot", { key: '2ab2a87769c607f90817103a8231952d144de2d8', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && h(DsIcon, { key: '82383404c23387648e4d23e026b8e349649e2c68', dsSize: "2rem", class: `${baseClass}__icon`, dsName: this.linkIcon })), this.dsDescription && h("p", { key: 'b382b6a403e4e859fc706d7015e2bce7814234c4', class: `${baseClass}__description` }, this.dsDescription)), h("div", { key: '9d8879cd76bfcfde2c6191b9e3111617e287b95a', class: classNames(`${baseClass}__content--bottom`, {
+            }) }, h("slot", { key: '2ab2a87769c607f90817103a8231952d144de2d8', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && this.dsLinkType !== 'heading' && h(DsIcon, { key: 'c29c39cd25df01d0cc2f2d95b0230346d85ccb0b', dsSize: "2rem", class: `${baseClass}__icon`, dsName: this.linkIcon })), this.dsDescription && h("p", { key: 'ac268b30d3da0a5abed1da11657d2d8b193fe7dc', class: `${baseClass}__description` }, this.dsDescription)), h("div", { key: '1e3897e6d592c290b816f19519d5dd745f682a4b', class: classNames(`${baseClass}__content--bottom`, {
                 [`${baseClass}__content--bottom--has-slot-content`]: this.hasSlotContent,
-            }) }, h("div", { key: 'c97f393cac1f8cb9470be0f5b5dd3c4498f20760', class: `${baseClass}__slot--content` }, h("slot", { key: '8a9eb68198c7abfb3fd3b9e07fa04a20b009409b', name: "content" })), h("div", { key: 'fab536134313ceae9c566751275393afa25cde31', class: `${baseClass}__slot--footer` }, h("slot", { key: 'cf44ec191cf23ed5cc4b4d1224daa5d10df35e9f', name: "footer" }))), h("div", { key: '33df77a3ea91342108783a10ce4848dbf9150bc9', class: {
+            }) }, h("div", { key: '8d38c894fd8f56244f2e9ab5ecbb977d377c98aa', class: `${baseClass}__slot--content` }, h("slot", { key: '9d8a7407043f884bce0c6af875d87d377c206ce4', name: "content" })), h("div", { key: '5ae2a9bc5835122b7b4037238606a4fd28d3ef27', class: `${baseClass}__slot--footer` }, h("slot", { key: 'fca07ed543c46e20d8f9639eb74c21b61f12e90b', name: "footer" }))), h("div", { key: 'b69cea411555c95a9f0e9d723bcc22471f9463ab', class: {
                 [`${baseClass}__image-container`]: true,
                 [`${baseClass}__image-container--has-image`]: this.hasImageSlot,
-            } }, h("slot", { key: 'c1a19694af399222dc3831bffc83c623dbb7f98e', name: "image", onSlotchange: () => this.checkImageSlot() }))));
+            } }, h("slot", { key: 'bf355beb8c4e060b995ae44a6c7ecbe7c8132a94', 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-.ds-checkbox__DFAX9n-fieldset {
+.ds-checkbox__HTSRrd-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
@@ -6,7 +6,7 @@
   margin: 0;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox__DFAX9n-fieldset__legend {
+.ds-checkbox__HTSRrd-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__DFAX9n-fieldset__assistive-text {
+.ds-checkbox__HTSRrd-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__DFAX9n {
+.ds-checkbox__HTSRrd {
   font-family: var(--ds-fontFamily-body);
   box-sizing: border-box;
   color: var(--ds-textColor-default);
@@ -34,7 +34,6 @@
   word-wrap: break-word;
   white-space: normal;
   position: relative;
-  cursor: pointer;
   user-select: none;
   width: auto;
   padding: var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-4xSmall);
@@ -42,8 +41,7 @@
   font-weight: var(--ds-fontWeight-regular);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox__DFAX9n__input {
-  cursor: pointer;
+.ds-checkbox__HTSRrd__input {
   /* hide the default checkbox */
   appearance: none;
   /* For iOS < 15 to remove gradient background */
@@ -57,79 +55,79 @@
   flex-shrink: 0;
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-checkbox__DFAX9n__input:focus-visible {
+.ds-checkbox__HTSRrd__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__DFAX9n__input {
+.ds-checkbox__HTSRrd__input {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   border-color: var(--ds-borderColor-default);
   /** unchecked **/
 }
-.ds-checkbox__DFAX9n__input:hover, .ds-checkbox__DFAX9n__input:active {
+.ds-checkbox__HTSRrd__input:hover, .ds-checkbox__HTSRrd__input:active {
   border-color: var(--ds-borderColor-default);
 }
-.ds-checkbox__DFAX9n__input:hover {
+.ds-checkbox__HTSRrd__input:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-checkbox__DFAX9n__input:active {
+.ds-checkbox__HTSRrd__input:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-checkbox__DFAX9n__input:disabled {
+.ds-checkbox__HTSRrd__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__DFAX9n__input:disabled {
+  .ds-checkbox__HTSRrd__input:disabled {
     border-color: GrayText;
   }
 }
-.ds-checkbox__DFAX9n__input--invalid {
+.ds-checkbox__HTSRrd__input--invalid {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-checkbox__DFAX9n__input--invalid:hover {
+.ds-checkbox__HTSRrd__input--invalid:hover {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-checkbox__DFAX9n__input--invalid:active {
+.ds-checkbox__HTSRrd__input--invalid:active {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-checkbox__DFAX9n__input {
+.ds-checkbox__HTSRrd__input {
   /** checked and indeterminate **/
 }
-.ds-checkbox__DFAX9n__input--invalid:checked, .ds-checkbox__DFAX9n__input--invalid:indeterminate {
+.ds-checkbox__HTSRrd__input--invalid:checked, .ds-checkbox__HTSRrd__input--invalid:indeterminate {
   background-color: var(--ds-iconColor-danger);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__DFAX9n__input--invalid:checked:hover, .ds-checkbox__DFAX9n__input--invalid:indeterminate:hover {
+.ds-checkbox__HTSRrd__input--invalid:checked:hover, .ds-checkbox__HTSRrd__input--invalid:indeterminate:hover {
   background-color: var(--ds-palette-red-60);
 }
-.ds-checkbox__DFAX9n__input--invalid:checked:active, .ds-checkbox__DFAX9n__input--invalid:indeterminate:active {
+.ds-checkbox__HTSRrd__input--invalid:checked:active, .ds-checkbox__HTSRrd__input--invalid:indeterminate:active {
   background-color: var(--ds-palette-red-70);
 }
-.ds-checkbox__DFAX9n__input:not(.ds-checkbox__DFAX9n__input--invalid):checked, .ds-checkbox__DFAX9n__input:not(.ds-checkbox__DFAX9n__input--invalid):indeterminate {
+.ds-checkbox__HTSRrd__input:not(.ds-checkbox__HTSRrd__input--invalid):checked, .ds-checkbox__HTSRrd__input:not(.ds-checkbox__HTSRrd__input--invalid):indeterminate {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__DFAX9n__input:not(.ds-checkbox__DFAX9n__input--invalid):checked:hover, .ds-checkbox__DFAX9n__input:not(.ds-checkbox__DFAX9n__input--invalid):indeterminate:hover {
+.ds-checkbox__HTSRrd__input:not(.ds-checkbox__HTSRrd__input--invalid):checked:hover, .ds-checkbox__HTSRrd__input:not(.ds-checkbox__HTSRrd__input--invalid):indeterminate:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-checkbox__DFAX9n__input:not(.ds-checkbox__DFAX9n__input--invalid):checked:active, .ds-checkbox__DFAX9n__input:not(.ds-checkbox__DFAX9n__input--invalid):indeterminate:active {
+.ds-checkbox__HTSRrd__input:not(.ds-checkbox__HTSRrd__input--invalid):checked:active, .ds-checkbox__HTSRrd__input:not(.ds-checkbox__HTSRrd__input--invalid):indeterminate:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-checkbox__DFAX9n__input:not(.ds-checkbox__DFAX9n__input--invalid):checked:disabled, .ds-checkbox__DFAX9n__input:not(.ds-checkbox__DFAX9n__input--invalid):indeterminate:disabled {
+.ds-checkbox__HTSRrd__input:not(.ds-checkbox__HTSRrd__input--invalid):checked:disabled, .ds-checkbox__HTSRrd__input:not(.ds-checkbox__HTSRrd__input--invalid):indeterminate:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-checkbox__DFAX9n__input {
+.ds-checkbox__HTSRrd__input {
   /** checkmark **/
 }
-.ds-checkbox__DFAX9n__input::before {
+.ds-checkbox__HTSRrd__input::before {
   content: "";
   display: block;
   height: 1em;
@@ -138,36 +136,36 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.ds-checkbox__DFAX9n__input:checked::before {
+.ds-checkbox__HTSRrd__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__DFAX9n__input:indeterminate::before {
+.ds-checkbox__HTSRrd__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__DFAX9n__input:checked:disabled::before {
+.ds-checkbox__HTSRrd__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__DFAX9n__input:indeterminate:disabled::before {
+.ds-checkbox__HTSRrd__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__DFAX9n--no-margin .ds-checkbox__DFAX9n__input {
+.ds-checkbox__HTSRrd--no-margin .ds-checkbox__HTSRrd__input {
   margin-right: 0;
 }
-.ds-checkbox__DFAX9n--disabled {
+.ds-checkbox__HTSRrd--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-checkbox__DFAX9n__span--optional {
+.ds-checkbox__HTSRrd__span--optional {
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
-.ds-checkbox__DFAX9n:has(.ds-checkbox__DFAX9n__input:disabled) {
+.ds-checkbox__HTSRrd:has(.ds-checkbox__HTSRrd__input:disabled) {
   cursor: not-allowed;
 }
-.ds-checkbox__DFAX9n-error {
+.ds-checkbox__HTSRrd-error {
   display: flex;
 }
-.ds-checkbox__DFAX9n-error--visible {
+.ds-checkbox__HTSRrd-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 CHANGED Viewed

@@ -1,11 +1,11 @@
-.ds-checkbox-group__DFAX9n {
+.ds-checkbox-group__HTSRrd {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__DFAX9n__legend {
+.ds-checkbox-group__HTSRrd__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__DFAX9n__assistive-text {
+.ds-checkbox-group__HTSRrd__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__DFAX9n__error {
+.ds-checkbox-group__HTSRrd__error {
   display: flex;
 }
-.ds-checkbox-group__DFAX9n__error--visible {
+.ds-checkbox-group__HTSRrd__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__DFAX9n > .ds-checkbox-group__DFAX9n__checkboxes {
+.ds-checkbox-group__HTSRrd > .ds-checkbox-group__HTSRrd__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__DFAX9n--inset {
+.ds-checkbox-group__HTSRrd--inset {
   margin-left: var(--ds-spacing-medium);
 }
-.ds-checkbox-group__DFAX9n--horizontal > .ds-checkbox-group__DFAX9n__checkboxes {
+.ds-checkbox-group__HTSRrd--horizontal > .ds-checkbox-group__HTSRrd__checkboxes {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }

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

@@ -1,9 +1,9 @@
-.ds-chip__DFAX9n:focus-visible {
+.ds-chip__HTSRrd: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__DFAX9n {
+.ds-chip__HTSRrd {
   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__DFAX9n:hover {
+.ds-chip__HTSRrd:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__DFAX9n:active {
+.ds-chip__HTSRrd:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__DFAX9n__text {
+.ds-chip__HTSRrd__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }

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

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

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

@@ -19,6 +19,7 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
     dsName = this.dsId;
     dsLabel;
     dsAriaLabel;
+    dsAriaLabelledby;
     dsAriaDescribedby;
     dsAssistiveText;
     dsErrorText;
@@ -146,7 +147,7 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
         const ariaDescribedBy = this.dsAriaDescribedby || attrAriaDescribedBy || [!!this.dsAssistiveText && assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
         const errorTextId = `${this.dsId}-error-text`;
-        return (h("div", { key: '0f1b56a6ab6b6b1d91a3bf39718f0903914ef920', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: 'd276916c8177ce997d00c3d6548ad02be3844cee', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: '0150cf32c4621ff910c7452aa7bddad2261b2e95', name: "label" }), h("slot", { key: 'dfc6afcce544ad18d5ba8e7b9b2d959a79744ae4', name: "assistiveText" })), h("div", { key: '5683492a2a8acd191561f32dbcd31f0adf9df8fb', role: "list", class: `${baseClass}__chips` }, h("slot", { key: 'df67ef94d99b08f5f4d2e7f5dda97839954e63a5' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), !!this.dsErrorText && h(this.DsInputValidity, { key: '86dd755d95bbc3c58822000c617db574e142dca9', id: errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })));
+        return (h("div", { key: 'f886121b9995f3007962f669be4a1a36f78470d5', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: '364d9a489469f3172919f17bd7242133bd505508', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: '48c41323cc71ae7be2a19e5424a5d078c43cfe91', name: "label" }), h("slot", { key: '1d61ca49db9f275d8ce958d5d42e410cbb483008', name: "assistiveText" })), h("div", { key: 'f4e52f7dd4ef25478c5da115453120b2b0a73c1a', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '34f1f2487c36581ef2a6fdd00b0ece712f609c47' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), !!this.dsErrorText && h(this.DsInputValidity, { key: '1a978508ae85d546ff264c7dacbf132d58d1748c', id: errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })));
     }
     static get is() { return "ds-chip-group"; }
     static get encapsulation() { return "scoped"; }
@@ -241,6 +242,25 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
                 "reflect": false,
                 "attribute": "ds-aria-label"
             },
+            "dsAriaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-labelledby` attribute of the chip group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-labelledby"
+            },
             "dsAriaDescribedby": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/01-base-components/ds-chip-group/stories/ds-chip-group.stories.js CHANGED Viewed

@@ -18,6 +18,9 @@ const meta = {
       ds-assistive-text="${ifDefined(args.dsAssistiveText)}"
       ds-min-items="${ifDefined(args.dsMinItems)}"
       ds-max-items="${ifDefined(args.dsMaxItems)}"
+      ds-aria-label="${ifDefined(args.dsAriaLabel)}"
+      ds-aria-labelledby="${ifDefined(args.dsAriaLabelledby)}"
+      ds-aria-describedby="${ifDefined(args.dsAriaDescribedby)}"
       @dsValidity=${(e) => {
         const chipGroup = e.currentTarget;
         chipGroup.dsErrorText = e.detail.message;
@@ -160,5 +163,7 @@ export const Playground = {
         dsName: 'playground-name',
         dsMinItems: 0,
         dsMaxItems: 10,
+        dsAriaLabel: '',
+        dsAriaDescribedby: '',
     },
 };