@uh-design-system/component-library 1.1.0-rc.5 → 1.1.0-rc.7

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

@@ -5,43 +5,43 @@ const meta = {
     title: 'Base Components/Button/Features',
     component: 'ds-button',
     args: {
-        dsValue: 'Button',
+        dsText: 'Button',
     },
 };
 export default meta;
 export const Primary = {
     args: {
-        dsValue: 'Primary',
+        dsText: 'Primary',
         dsVariant: 'primary',
     },
 };
 export const Secondary = {
     args: {
-        dsValue: 'Secondary',
+        dsText: 'Secondary',
         dsVariant: 'secondary',
     },
 };
 export const Supplementary = {
     args: {
-        dsValue: 'Supplementary',
+        dsText: 'Supplementary',
         dsVariant: 'supplementary',
     },
 };
 export const Blue = {
     args: {
-        dsValue: 'Blue',
+        dsText: 'Blue',
         dsColour: 'blue',
     },
 };
 export const Black = {
     args: {
-        dsValue: 'Black',
+        dsText: 'Black',
         dsColour: 'black',
     },
 };
 export const White = {
     args: {
-        dsValue: 'White',
+        dsText: 'White',
         dsColour: 'white',
     },
     parameters: {
@@ -50,7 +50,7 @@ export const White = {
 };
 export const Medium = {
     args: {
-        dsValue: 'Medium',
+        dsText: 'Medium',
         dsSize: 'medium',
     },
 };
@@ -74,39 +74,39 @@ export const SmallSupplementary = {
 };
 export const Disabled = {
     args: {
-        dsValue: 'Disabled',
+        dsText: 'Disabled',
         dsDisabled: true,
     },
 };
 export const Active = {
     args: {
         dsActive: true,
-        dsValue: 'Active',
+        dsText: 'Active',
     },
 };
 export const IconStart = {
     args: {
-        dsValue: 'Icon start',
+        dsText: 'Icon start',
         dsIcon: 'arrow_forward',
     },
 };
 export const IconEnd = {
     args: {
-        dsValue: 'Icon end',
+        dsText: 'Icon end',
         dsIcon: 'arrow_forward',
         dsIconPosition: 'end',
     },
 };
 export const IconOnly = {
     args: {
-        dsValue: '',
+        dsText: '',
         dsIcon: 'download',
         ariaLabel: 'Download',
     },
 };
 export const FullWidth = {
     args: {
-        dsValue: 'Full width',
+        dsText: 'Full width',
         dsFullWidth: true,
     },
 };
@@ -114,7 +114,7 @@ export const FullWidthWithStartIcon = {
     args: {
         dsFullWidth: true,
         dsIcon: 'ds_flame',
-        dsValue: 'Full width',
+        dsText: 'Full width',
     },
 };
 export const FullWidthWithEndIcon = {
@@ -122,12 +122,12 @@ export const FullWidthWithEndIcon = {
         dsFullWidth: true,
         dsIcon: 'ds_flame',
         dsIconPosition: 'end',
-        dsValue: 'Full width',
+        dsText: 'Full width',
     },
 };
 export const ProgrammaticFocus = {
     args: {
-        dsValue: 'Primary',
+        dsText: 'Primary',
         dsVariant: 'primary',
     },
     play: async ({ canvasElement, step }) => {
@@ -140,5 +140,5 @@ export const ProgrammaticFocus = {
     },
 };
 export const CustomTagName = {
-    render: () => html `<custom-ds-button ds-icon="arrow_forward" ds-value="Test" ds-hidden-assistive-text="Hidden text"></custom-ds-button>`,
+    render: () => html `<custom-ds-button ds-icon="arrow_forward" ds-text="Test" ds-hidden-assistive-text="Hidden text"></custom-ds-button>`,
 };

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

@@ -14,13 +14,14 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        dsValue: 'button',
+        dsText: 'button',
         dsDisabled: false,
     },
 };
 export const Playground = {
     args: {
-        dsValue: 'button',
+        dsText: 'button',
+        dsValue: '',
         dsVariant: 'primary',
         dsColour: 'blue',
         dsSize: 'medium',

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

@@ -2,7 +2,7 @@
   display: block;
 }
 
-.ds-card__BahgnS {
+.ds-card__kfFKF0 {
   background-color: var(--ds-bgColor-white);
   border: 1px solid var(--ds-borderColor-light);
   color: var(--ds-textColor-default);
@@ -12,65 +12,65 @@
   hyphens: auto;
   height: auto;
 }
-.ds-card__BahgnS--fluid-height {
+.ds-card__kfFKF0--fluid-height {
   height: 100%;
 }
-.ds-card__BahgnS--horizontal {
+.ds-card__kfFKF0--horizontal {
   flex-direction: column;
 }
 @media (min-width: 30rem) {
-  .ds-card__BahgnS--horizontal {
+  .ds-card__kfFKF0--horizontal {
     flex-direction: row;
   }
 }
-.ds-card__BahgnS.ds-card__BahgnS--focused {
+.ds-card__kfFKF0.ds-card__kfFKF0--focused {
   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__BahgnS.ds-card__BahgnS--link:hover:not(:has(::slotted([slot=footer]:hover))) {
+.ds-card__kfFKF0.ds-card__kfFKF0--link:hover:not(:has(::slotted([slot=footer]:hover))) {
   border-color: var(--ds-borderColor-default);
   cursor: pointer;
 }
-.ds-card__BahgnS.ds-card__BahgnS--link:hover:not(:has(::slotted([slot=footer]:hover))) .ds-card__BahgnS__icon {
+.ds-card__kfFKF0.ds-card__kfFKF0--link:hover:not(:has(::slotted([slot=footer]:hover))) .ds-card__kfFKF0__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__BahgnS.ds-card__BahgnS--link:hover:not(:has(::slotted([slot=footer]:hover))) .ds-card__BahgnS__heading {
+.ds-card__kfFKF0.ds-card__kfFKF0--link:hover:not(:has(::slotted([slot=footer]:hover))) .ds-card__kfFKF0__heading {
   text-decoration: underline;
   text-decoration-thickness: 7%;
   text-underline-offset: 12%;
 }
-.ds-card__BahgnS.ds-card__BahgnS--link:active {
+.ds-card__kfFKF0.ds-card__kfFKF0--link:active {
   border-color: var(--ds-borderColor-black);
 }
-.ds-card__BahgnS.ds-card__BahgnS--link:active .ds-card__BahgnS__icon {
+.ds-card__kfFKF0.ds-card__kfFKF0--link:active .ds-card__kfFKF0__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__BahgnS.ds-card__BahgnS--link:active .ds-card__heading {
+.ds-card__kfFKF0.ds-card__kfFKF0--link:active .ds-card__heading {
   text-decoration: underline;
   text-decoration-thickness: 7%;
   text-underline-offset: 12%;
 }
-.ds-card__BahgnS.ds-card__BahgnS--link {
+.ds-card__kfFKF0.ds-card__kfFKF0--link {
   text-decoration: none;
 }
-.ds-card__BahgnS {
+.ds-card__kfFKF0 {
   /**
   * Expand the clickable area of the heading link to the entire heading
   */
 }
-.ds-card__BahgnS .ds-card__BahgnS__heading__link:after {
+.ds-card__kfFKF0 .ds-card__kfFKF0__heading__link:after {
   content: "";
   position: absolute;
   inset: 0;
 }
-.ds-card__BahgnS--filled {
+.ds-card__kfFKF0--filled {
   background-color: var(--ds-bgColor-neutral);
 }
-.ds-card__BahgnS__image-container {
+.ds-card__kfFKF0__image-container {
   display: none;
 }
-.ds-card__BahgnS__image-container--has-image {
+.ds-card__kfFKF0__image-container--has-image {
   display: block;
   order: 1;
   position: relative;
@@ -78,16 +78,16 @@
   height: auto;
 }
 @media (min-width: 30rem) {
-  .ds-card__BahgnS:not(.ds-card__BahgnS--vertical) .ds-card__BahgnS__image-container--has-image {
+  .ds-card__kfFKF0:not(.ds-card__kfFKF0--vertical) .ds-card__kfFKF0__image-container--has-image {
     max-width: var(--vertical-image-max-width, 200px);
   }
 }
 @media (min-width: 30rem) {
-  .ds-card__BahgnS:not(.ds-card__BahgnS--horizontal) .ds-card__BahgnS__image-container--has-image {
+  .ds-card__kfFKF0:not(.ds-card__kfFKF0--horizontal) .ds-card__kfFKF0__image-container--has-image {
     max-height: var(--horizontal-image-max-height, auto);
   }
 }
-.ds-card__BahgnS__tag {
+.ds-card__kfFKF0__tag {
   background-color: var(--ds-bgColor-black);
   color: var(--ds-textColor-white);
   font-family: var(--ds-fontFamily-body);
@@ -103,30 +103,30 @@
   top: 1rem;
   z-index: 2;
 }
-.ds-card__BahgnS__image {
+.ds-card__kfFKF0__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.ds-card__BahgnS__content {
+.ds-card__kfFKF0__content {
   display: flex;
   flex-direction: column;
   order: 2;
   width: 100%;
   position: relative;
 }
-.ds-card__BahgnS__content--top {
+.ds-card__kfFKF0__content--top {
   align-items: center;
   display: flex;
   gap: var(--ds-spacing-small);
   justify-content: space-between;
   padding: var(--ds-spacing-xSmall) var(--ds-spacing-small);
 }
-.ds-card__BahgnS__content--top__text {
+.ds-card__kfFKF0__content--top__text {
   display: flex;
   flex-direction: column;
 }
-.ds-card__BahgnS__eyebrow {
+.ds-card__kfFKF0__eyebrow {
   color: var(--ds-textColor-secondary);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -136,11 +136,11 @@
   margin-bottom: var(--ds-spacing-2xSmall);
   order: 1;
 }
-.ds-card__BahgnS__heading-container {
+.ds-card__kfFKF0__heading-container {
   display: flex;
   flex-direction: column;
 }
-.ds-card__BahgnS__heading {
+.ds-card__kfFKF0__heading {
   align-items: center;
   color: var(--ds-textColor-default);
   display: flex;
@@ -153,10 +153,10 @@
   justify-content: space-between;
   text-wrap: balance;
 }
-.ds-card__BahgnS__heading__link {
+.ds-card__kfFKF0__heading__link {
   all: unset;
 }
-.ds-card__BahgnS__subtitle, .ds-card__BahgnS__slot-subtitle {
+.ds-card__kfFKF0__subtitle, .ds-card__kfFKF0__slot-subtitle {
   font-size: var(--ds-fontSize-16);
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-secondary);
@@ -164,7 +164,7 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   order: 3;
 }
-.ds-card__BahgnS__description {
+.ds-card__kfFKF0__description {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--description-line-clamp, "none");
   color: var(--ds-textColor-default);
@@ -179,11 +179,11 @@
   padding: 0 var(--ds-spacing-small);
   text-wrap: pretty;
 }
-.ds-card__BahgnS__icon {
+.ds-card__kfFKF0__icon {
   color: var(--ds-textColor-primary);
   font-size: var(--ds-fontSize-20);
   font-weight: normal;
 }
-.ds-card__BahgnS__slot-subtitle--hidden {
+.ds-card__kfFKF0__slot-subtitle--hidden {
   display: none;
 }

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

@@ -154,17 +154,17 @@ export class DsCard {
         const headingId = `${this.cardId}-heading`;
         const DsIcon = transformTagName('ds-icon', 'ds-card', this.el);
         const descriptionClamp = this.dsDescriptionClamp ? this.dsDescriptionClamp.toString() : 'none';
-        return (h("article", { key: '20e7837291662d99c1fd1209dbef8c7924bf89f7', class: classes, onClick: this.handleClick, onKeyDown: this.handleKeydown, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, h("div", { key: 'ec56eef59b6dab33e0aad399991cc553a604e378', class: `${baseClass}__content` }, h("div", { key: '4399882f172325bb09fce60b7e6b67c36f8ee79c', class: {
+        return (h("article", { key: '57ca87be8426872a118155a496e24a9d75bbb797', class: classes, onClick: this.handleClick, onKeyDown: this.handleKeydown, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, h("div", { key: 'e1e1750df499941ab86917bb74a010121da48849', class: `${baseClass}__content` }, h("div", { key: '807ef4e1cc5203f8cb0057ca7f884b3b00a9f252', class: {
                 [`${baseClass}__content--top`]: true,
                 [`${baseClass}__content--top--has-link`]: Boolean(this.dsUrl),
-            } }, h("div", { key: 'f45b8cb8f1301aed515644e13566c64a9c183400', class: `${baseClass}__heading-container` }, this.dsUrl ? (h(HeadingTag, { class: `${baseClass}__heading`, id: headingId }, h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: `${baseClass}__heading__link` }, h("slot", { name: "heading" }, this.dsHeading)))) : (h(HeadingTag, { class: `${baseClass}__heading` }, h("slot", { name: "heading" }, this.dsHeading))), this.dsEyebrow && h("div", { key: '97d5b77f163badfee5a8be8a1257286df91c3b7d', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: 'b7001543154848c5d8dc791d6a76ab1c9782dd7d', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: '667b8e5680c93e0d909210e2baaf5cc20bcdaa6e', class: classNames(`${baseClass}__slot-subtitle`, {
+            } }, h("div", { key: 'b6b43a93e158ed61fb027e66c721e17b5d3025f3', class: `${baseClass}__heading-container` }, this.dsUrl ? (h(HeadingTag, { class: `${baseClass}__heading`, id: headingId }, h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: `${baseClass}__heading__link` }, h("slot", { name: "heading" }, this.dsHeading)))) : (h(HeadingTag, { class: `${baseClass}__heading` }, h("slot", { name: "heading" }, this.dsHeading))), this.dsEyebrow && h("div", { key: 'c1aa235362caf7f140c274d380e95a444ce3ea18', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: 'f437e2f94a0893be71049d317d0b9bfb5a410c20', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: 'b96f0342f4450fbae949a11460648bc3d989819b', class: classNames(`${baseClass}__slot-subtitle`, {
                 [`${baseClass}__slot-subtitle--hidden`]: !this.hasSubtitleSlot,
-            }) }, h("slot", { key: '51f830962309cce44fe26056bfdb234000c848b3', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && h(DsIcon, { key: '16df0fe5a295a777f8b94f290d1da67aaff12b8d', class: `${baseClass}__icon`, dsName: this.linkIcon })), h("div", { key: 'f95afd83e5d725ff3ccecb4b1a0655daccc7f35f', class: classNames(`${baseClass}__content--bottom`, {
+            }) }, h("slot", { key: 'c094c952c32c75f4e1f35972697857ba9e9d2d80', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && h(DsIcon, { key: 'eb8067195f2da899e302c2e28b53102fa07b769d', class: `${baseClass}__icon`, dsName: this.linkIcon })), h("div", { key: 'a005894165e8351b3525019863506452ff5ab1f4', class: classNames(`${baseClass}__content--bottom`, {
                 [`${baseClass}__content--bottom--has-slot-content`]: this.hasSlotContent,
-            }) }, this.dsDescription && h("p", { key: 'f728ecd82a9134acda0997e12d70532e2f233a79', class: `${baseClass}__description` }, this.dsDescription), h("div", { key: 'af9bfe01e02deb7e3da0ca8e2b36010cf2f46933', class: `${baseClass}__slot--content` }, h("slot", { key: 'b8b745832097f0f3e4c4b1bb02f3bcaffdb0c2f0', name: "content" })), h("div", { key: '8c9d2e3c524b78c12f7b6f9df81c79de0c6ee9f2', class: `${baseClass}__slot--footer` }, h("slot", { key: '84aa094e7a1dab59ea0d8f5d5c9e363cefaa5f43', name: "footer" })))), h("div", { key: '4bd1f7da5c28b24e86b07624779dca8b770360b8', class: {
+            }) }, this.dsDescription && h("p", { key: '71dcaac43ace23d550c02af9bf7b84d6b71d2e64', class: `${baseClass}__description` }, this.dsDescription), h("div", { key: '2d614baf3ce2c63409e1fe34540f5956368d93c0', class: `${baseClass}__slot--content` }, h("slot", { key: '2e53989838d10491a9cfedaa8d62bbcc54ad9698', name: "content" })), h("div", { key: '15b6c386c31c7b0619aa15701ff713ef6ee76cec', class: `${baseClass}__slot--footer` }, h("slot", { key: '9da0c307566630b863a1e9dc041053fd2659ff26', name: "footer" })))), h("div", { key: '8754ec4d9c84cf784aa60279086ee48a1532003a', class: {
                 [`${baseClass}__image-container`]: true,
                 [`${baseClass}__image-container--has-image`]: this.hasImageSlot,
-            } }, this.dsTag && this.hasImageSlot && h("span", { key: '13fe5c875833c48857c8db16e84ddb802e33e072', class: `${baseClass}__tag` }, this.dsTag), h("slot", { key: 'ecd3aada43fbada43f4b123cc4f275142d066dcc', name: "image", onSlotchange: () => this.checkImageSlot() }))));
+            } }, this.dsTag && this.hasImageSlot && h("span", { key: 'd5ee1a469335adb768707603ebdcde46cf48b0c8', class: `${baseClass}__tag` }, this.dsTag), h("slot", { key: 'acbba4114673e1675fe5841fad41afd739af85cc', 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__BahgnS-fieldset {
+.ds-checkbox__kfFKF0-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
@@ -6,7 +6,7 @@
   margin: 0;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox__BahgnS-fieldset__legend {
+.ds-checkbox__kfFKF0-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__BahgnS-fieldset__assistive-text {
+.ds-checkbox__kfFKF0-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__BahgnS {
+.ds-checkbox__kfFKF0 {
   font-family: var(--ds-fontFamily-body);
   box-sizing: border-box;
   color: var(--ds-textColor-default);
@@ -42,7 +42,7 @@
   font-weight: var(--ds-fontWeight-regular);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox__BahgnS__input {
+.ds-checkbox__kfFKF0__input {
   cursor: pointer;
   /* hide the default checkbox */
   appearance: none;
@@ -57,79 +57,79 @@
   flex-shrink: 0;
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-checkbox__BahgnS__input:focus-visible {
+.ds-checkbox__kfFKF0__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__BahgnS__input {
+.ds-checkbox__kfFKF0__input {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   border-color: var(--ds-borderColor-default);
   /** unchecked **/
 }
-.ds-checkbox__BahgnS__input:hover, .ds-checkbox__BahgnS__input:active {
+.ds-checkbox__kfFKF0__input:hover, .ds-checkbox__kfFKF0__input:active {
   border-color: var(--ds-borderColor-default);
 }
-.ds-checkbox__BahgnS__input:hover {
+.ds-checkbox__kfFKF0__input:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-checkbox__BahgnS__input:active {
+.ds-checkbox__kfFKF0__input:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-checkbox__BahgnS__input:disabled {
+.ds-checkbox__kfFKF0__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__BahgnS__input:disabled {
+  .ds-checkbox__kfFKF0__input:disabled {
     border-color: GrayText;
   }
 }
-.ds-checkbox__BahgnS__input--invalid {
+.ds-checkbox__kfFKF0__input--invalid {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-checkbox__BahgnS__input--invalid:hover {
+.ds-checkbox__kfFKF0__input--invalid:hover {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-checkbox__BahgnS__input--invalid:active {
+.ds-checkbox__kfFKF0__input--invalid:active {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-checkbox__BahgnS__input {
+.ds-checkbox__kfFKF0__input {
   /** checked and indeterminate **/
 }
-.ds-checkbox__BahgnS__input--invalid:checked, .ds-checkbox__BahgnS__input--invalid:indeterminate {
+.ds-checkbox__kfFKF0__input--invalid:checked, .ds-checkbox__kfFKF0__input--invalid:indeterminate {
   background-color: var(--ds-iconColor-danger);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__BahgnS__input--invalid:checked:hover, .ds-checkbox__BahgnS__input--invalid:indeterminate:hover {
+.ds-checkbox__kfFKF0__input--invalid:checked:hover, .ds-checkbox__kfFKF0__input--invalid:indeterminate:hover {
   background-color: var(--ds-palette-red-60);
 }
-.ds-checkbox__BahgnS__input--invalid:checked:active, .ds-checkbox__BahgnS__input--invalid:indeterminate:active {
+.ds-checkbox__kfFKF0__input--invalid:checked:active, .ds-checkbox__kfFKF0__input--invalid:indeterminate:active {
   background-color: var(--ds-palette-red-70);
 }
-.ds-checkbox__BahgnS__input:not(.ds-checkbox__BahgnS__input--invalid):checked, .ds-checkbox__BahgnS__input:not(.ds-checkbox__BahgnS__input--invalid):indeterminate {
+.ds-checkbox__kfFKF0__input:not(.ds-checkbox__kfFKF0__input--invalid):checked, .ds-checkbox__kfFKF0__input:not(.ds-checkbox__kfFKF0__input--invalid):indeterminate {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__BahgnS__input:not(.ds-checkbox__BahgnS__input--invalid):checked:hover, .ds-checkbox__BahgnS__input:not(.ds-checkbox__BahgnS__input--invalid):indeterminate:hover {
+.ds-checkbox__kfFKF0__input:not(.ds-checkbox__kfFKF0__input--invalid):checked:hover, .ds-checkbox__kfFKF0__input:not(.ds-checkbox__kfFKF0__input--invalid):indeterminate:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-checkbox__BahgnS__input:not(.ds-checkbox__BahgnS__input--invalid):checked:active, .ds-checkbox__BahgnS__input:not(.ds-checkbox__BahgnS__input--invalid):indeterminate:active {
+.ds-checkbox__kfFKF0__input:not(.ds-checkbox__kfFKF0__input--invalid):checked:active, .ds-checkbox__kfFKF0__input:not(.ds-checkbox__kfFKF0__input--invalid):indeterminate:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-checkbox__BahgnS__input:not(.ds-checkbox__BahgnS__input--invalid):checked:disabled, .ds-checkbox__BahgnS__input:not(.ds-checkbox__BahgnS__input--invalid):indeterminate:disabled {
+.ds-checkbox__kfFKF0__input:not(.ds-checkbox__kfFKF0__input--invalid):checked:disabled, .ds-checkbox__kfFKF0__input:not(.ds-checkbox__kfFKF0__input--invalid):indeterminate:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-checkbox__BahgnS__input {
+.ds-checkbox__kfFKF0__input {
   /** checkmark **/
 }
-.ds-checkbox__BahgnS__input::before {
+.ds-checkbox__kfFKF0__input::before {
   content: "";
   display: block;
   height: 1em;
@@ -138,36 +138,36 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.ds-checkbox__BahgnS__input:checked::before {
+.ds-checkbox__kfFKF0__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__BahgnS__input:indeterminate::before {
+.ds-checkbox__kfFKF0__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__BahgnS__input:checked:disabled::before {
+.ds-checkbox__kfFKF0__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__BahgnS__input:indeterminate:disabled::before {
+.ds-checkbox__kfFKF0__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__BahgnS--no-margin .ds-checkbox__BahgnS__input {
+.ds-checkbox__kfFKF0--no-margin .ds-checkbox__kfFKF0__input {
   margin-right: 0;
 }
-.ds-checkbox__BahgnS--disabled {
+.ds-checkbox__kfFKF0--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-checkbox__BahgnS__span--optional {
+.ds-checkbox__kfFKF0__span--optional {
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
-.ds-checkbox__BahgnS:has(.ds-checkbox__BahgnS__input:disabled) {
+.ds-checkbox__kfFKF0:has(.ds-checkbox__kfFKF0__input:disabled) {
   cursor: not-allowed;
 }
 
-.ds-checkbox__BahgnS-error {
+.ds-checkbox__kfFKF0-error {
   display: flex;
 }
-.ds-checkbox__BahgnS-error--visible {
+.ds-checkbox__kfFKF0-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__BahgnS {
+.ds-checkbox-group__kfFKF0 {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__BahgnS__legend {
+.ds-checkbox-group__kfFKF0__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__BahgnS__assistive-text {
+.ds-checkbox-group__kfFKF0__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__BahgnS__error {
+.ds-checkbox-group__kfFKF0__error {
   display: flex;
 }
-.ds-checkbox-group__BahgnS__error--visible {
+.ds-checkbox-group__kfFKF0__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__BahgnS > .ds-checkbox-group__BahgnS__checkboxes {
+.ds-checkbox-group__kfFKF0 > .ds-checkbox-group__kfFKF0__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__BahgnS--inset {
+.ds-checkbox-group__kfFKF0--inset {
   margin-left: var(--ds-spacing-medium);
 }
-.ds-checkbox-group__BahgnS--horizontal > .ds-checkbox-group__BahgnS__checkboxes {
+.ds-checkbox-group__kfFKF0--horizontal > .ds-checkbox-group__kfFKF0__checkboxes {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }

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

@@ -1,9 +1,9 @@
-.ds-chip__BahgnS:focus-visible {
+.ds-chip__kfFKF0: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__BahgnS {
+.ds-chip__kfFKF0 {
   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__BahgnS:hover {
+.ds-chip__kfFKF0:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__BahgnS:active {
+.ds-chip__kfFKF0:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__BahgnS__text {
+.ds-chip__kfFKF0__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }

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

@@ -1,4 +1,4 @@
-.ds-chip-group__BahgnS__chips {
+.ds-chip-group__kfFKF0__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

@@ -139,7 +139,7 @@ export class DsChipGroup {
         const ariaDescribedBy = attrAriaDescribedBy || [!!this.dsAssistiveText && assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = attrAriaLabel || this.dsLabel;
         const errorTextId = `${this.dsId}-error-text`;
-        return (h("div", { key: '653a972829e42fa598aa225c417504ffcfd5c483', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: '2bbeb3f4eef4ad28701f91fdfc1ff7f8f4bf9d39', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: '3c2ca3f7dc28bfd57d3accc0cf7a206d18d82560', name: "label" }), h("slot", { key: 'd8c00d549df1a15c2c878d39ca179be6f4d2a6a5', name: "assistiveText" })), h("div", { key: '40e4e07a67f6988f56100c26d876509bb146d817', role: "list", class: `${baseClass}__chips` }, h("slot", { key: 'e439f637b2ccc916ca433b38a400420c54054033' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue })), !!this.dsErrorText && h(this.DsInputValidity, { key: 'f441db6022e0752495a023e84a43e7a7e68cbb09', id: errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })));
+        return (h("div", { key: '8c2e1ff12270960700585bda2e6424bf22377a39', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: 'e98e969033876de30e4959cd331ea1eca49fd670', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: '6611f352ea98a3e57e47ae56175b3acac287728c', name: "label" }), h("slot", { key: 'b34ad08d9e4672ac4c722c9501017597ed698935', name: "assistiveText" })), h("div", { key: '36ab80ab6a2565ab72a5c8f53fb0428ff50ac5f4', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '7c105c033cf72a61305675bf8369309484617d7c' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue })), !!this.dsErrorText && h(this.DsInputValidity, { key: 'dd86654cd86d1d1c651fb958c5a46e742921291c', id: errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })));
     }
     static get is() { return "ds-chip-group"; }
     static get encapsulation() { return "scoped"; }