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

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

@@ -177,54 +177,54 @@ body {
   font-weight: var(--ds-fontWeight-bold);
 }
 
-.ds-spinner__BahgnS {
+.ds-spinner__kfFKF0 {
   display: flex;
   align-items: center;
   justify-content: center;
   /* Size */
 }
-.ds-spinner__BahgnS--small {
+.ds-spinner__kfFKF0--small {
   padding: 1.5px;
 }
-.ds-spinner__BahgnS--small:has(.ds-spinner__BahgnS__text) {
+.ds-spinner__kfFKF0--small:has(.ds-spinner__kfFKF0__text) {
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-spinner__BahgnS--medium {
+.ds-spinner__kfFKF0--medium {
   padding: 3px;
 }
-.ds-spinner__BahgnS--medium:has(.ds-spinner__BahgnS__text) {
+.ds-spinner__kfFKF0--medium:has(.ds-spinner__kfFKF0__text) {
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-spinner__BahgnS--large {
+.ds-spinner__kfFKF0--large {
   padding: 3px;
 }
-.ds-spinner__BahgnS--large:has(.ds-spinner__BahgnS__text) {
+.ds-spinner__kfFKF0--large:has(.ds-spinner__kfFKF0__text) {
   gap: var(--ds-spacing-xSmall);
 }
-.ds-spinner__BahgnS--xLarge {
+.ds-spinner__kfFKF0--xLarge {
   padding: 5.5px;
 }
-.ds-spinner__BahgnS--xLarge:has(.ds-spinner__BahgnS__text) {
+.ds-spinner__kfFKF0--xLarge:has(.ds-spinner__kfFKF0__text) {
   gap: 10px;
 }
-.ds-spinner__BahgnS--2xLarge {
+.ds-spinner__kfFKF0--2xLarge {
   padding: 5.5px;
 }
-.ds-spinner__BahgnS--2xLarge:has(.ds-spinner__BahgnS__text) {
+.ds-spinner__kfFKF0--2xLarge:has(.ds-spinner__kfFKF0__text) {
   gap: var(--ds-spacing-small);
 }
-.ds-spinner__BahgnS {
+.ds-spinner__kfFKF0 {
   /* Position */
 }
-.ds-spinner__BahgnS--below {
+.ds-spinner__kfFKF0--below {
   flex-direction: column;
   align-items: center;
 }
-.ds-spinner__BahgnS--right {
+.ds-spinner__kfFKF0--right {
   flex-direction: row;
   align-items: center;
 }
-.ds-spinner__BahgnS__spinner {
+.ds-spinner__kfFKF0__spinner {
   width: var(--spinner-size, 24px);
   height: var(--spinner-size, 24px);
   border-radius: 50%;
@@ -234,14 +234,14 @@ body {
   align-items: center;
   justify-content: center;
 }
-.ds-spinner__BahgnS__text {
+.ds-spinner__kfFKF0__text {
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-default);
 }
-.ds-spinner__BahgnS__text--white {
+.ds-spinner__kfFKF0__text--white {
   color: var(--ds-textColor-white);
 }
-.ds-spinner__BahgnS__segment {
+.ds-spinner__kfFKF0__segment {
   display: block;
   position: absolute;
   width: var(--spinner-size, 24px);
@@ -251,13 +251,13 @@ body {
   animation: ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;
   border-color: var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color);
 }
-.ds-spinner__BahgnS__segment--1 {
+.ds-spinner__kfFKF0__segment--1 {
   animation-delay: -0.3s;
 }
-.ds-spinner__BahgnS__segment--2 {
+.ds-spinner__kfFKF0__segment--2 {
   animation-delay: -0.2s;
 }
-.ds-spinner__BahgnS__segment--3 {
+.ds-spinner__kfFKF0__segment--3 {
   animation-delay: -0.1s;
 }
 
@@ -271,17 +271,17 @@ body {
 }
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
-  .ds-spinner__BahgnS__segment {
+  .ds-spinner__kfFKF0__segment {
     animation-duration: 2.2s; /* Double the original duration (slower) */
     animation-timing-function: linear; /* More predictable motion */
   }
-  .ds-spinner__BahgnS__segment--1 {
+  .ds-spinner__kfFKF0__segment--1 {
     animation-delay: -0.6s;
   }
-  .ds-spinner__BahgnS__segment--2 {
+  .ds-spinner__kfFKF0__segment--2 {
     animation-delay: -0.4s;
   }
-  .ds-spinner__BahgnS__segment--3 {
+  .ds-spinner__kfFKF0__segment--3 {
     animation-delay: -0.2s;
   }
 }

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

@@ -49,11 +49,11 @@ export class DsSpinner {
         const textClasses = classNames(`${baseClass}__text`, textSizeClass, `${baseClass}__text--${this.dsColour}`);
         const segmentClasses = (index) => classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
-        return (h("div", { key: '5cce0c5fdf2b818c117aee5477071caa88b571db', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (h("div", { key: 'b547ead78f41c2cfd71de186d0d9361b813b35a0', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
                 '--spinner-size': `${sizeInPixels}px`,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsColour == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: '3568b87fd6819e8c796c5ba838be89a7afd8ffd9', class: `${baseClass}__spinner` }, h("div", { key: '65845537563383410f6567cdc86c8c68e1844bd6', class: segmentClasses(1) }), h("div", { key: 'f5f7284fc90ced9167161abd56a8c3d49586e1cb', class: segmentClasses(2) }), h("div", { key: 'a3456527ac1f7967216dd51c6f75a5be0cbd0199', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'b4dba1caeffc570202fd0629ccf4fb1c5fcb8532' }, h("span", { key: '575af029324402ed4e9331147dbe15f4727300b0' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: 'cf5632b6daa656938c79d2b80116d9ad06791936', class: textClasses }, this.dsText)));
+            }, ...this.inheritedAttributes }, h("div", { key: '82fa72097576c045075cc6746e526f669315d965', class: `${baseClass}__spinner` }, h("div", { key: 'e4e6a7e3d62c8fb5241d16c985fa7e3c09f6e9e3', class: segmentClasses(1) }), h("div", { key: 'bfeaf74150d914144fcea32b65ca9bcaacc472be', class: segmentClasses(2) }), h("div", { key: 'd8487ec860698e908e33b4ed2692723de361e8ea', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'e29e4b9033f52749da8c869b902ce87efaf03b6d' }, h("span", { key: '67146c4237b1fa2f73921a032d7d752922178040' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: 'f2adb748b53738dcf65a06c94417d10fa1a5af4e', class: textClasses }, this.dsText)));
     }
     static get is() { return "ds-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,14 +1,14 @@
-.ds-tag__BahgnS:focus-visible {
+.ds-tag__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-tag__BahgnS:focus-within {
+.ds-tag__kfFKF0:focus-within {
   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-tag__BahgnS {
+.ds-tag__kfFKF0 {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -17,87 +17,87 @@
   padding: calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--default {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--default {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--default:has(.ds-tag__BahgnS__link:hover) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--default:has(.ds-tag__kfFKF0__link:hover) {
   background-color: var(--ds-bgColor-neutral-hover);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--default:has(.ds-tag__BahgnS__link:active) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--default:has(.ds-tag__kfFKF0__link:active) {
   background-color: var(--ds-bgColor-neutral-active);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--black {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--black {
   color: var(--ds-textColor-white);
   background-color: var(--ds-bgColor-black);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--black:has(.ds-tag__BahgnS__link:hover) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--black:has(.ds-tag__kfFKF0__link:hover) {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--black:has(.ds-tag__BahgnS__link:active) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--black:has(.ds-tag__kfFKF0__link:active) {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--white {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--white {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--white:has(.ds-tag__BahgnS__link:hover) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--white:has(.ds-tag__kfFKF0__link:hover) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--white:has(.ds-tag__BahgnS__link:active) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--white:has(.ds-tag__kfFKF0__link:active) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--info {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--info:has(.ds-tag__BahgnS__link:hover) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--info:has(.ds-tag__kfFKF0__link:hover) {
   background-color: var(--ds-bgColor-info-hover);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--info:has(.ds-tag__BahgnS__link:active) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--info:has(.ds-tag__kfFKF0__link:active) {
   background-color: var(--ds-bgColor-info-active);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--danger {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--danger:has(.ds-tag__BahgnS__link:hover) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--danger:has(.ds-tag__kfFKF0__link:hover) {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--danger:has(.ds-tag__BahgnS__link:active) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--danger:has(.ds-tag__kfFKF0__link:active) {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--attention {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--attention:has(.ds-tag__BahgnS__link:hover) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--attention:has(.ds-tag__kfFKF0__link:hover) {
   background-color: var(--ds-bgColor-attention-hover);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--attention:has(.ds-tag__BahgnS__link:active) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--attention:has(.ds-tag__kfFKF0__link:active) {
   background-color: var(--ds-bgColor-attention-active);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--success {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--success:has(.ds-tag__BahgnS__link:hover) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--success:has(.ds-tag__kfFKF0__link:hover) {
   background-color: var(--ds-bgColor-success-hover);
 }
-.ds-tag__BahgnS.ds-tag__BahgnS--success:has(.ds-tag__BahgnS__link:active) {
+.ds-tag__kfFKF0.ds-tag__kfFKF0--success:has(.ds-tag__kfFKF0__link:active) {
   background-color: var(--ds-bgColor-success-active);
 }
-.ds-tag__BahgnS__text {
+.ds-tag__kfFKF0__text {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-semibold);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-tag__BahgnS__link {
+.ds-tag__kfFKF0__link {
   display: contents;
 }
-.ds-tag__BahgnS__link::part(link):focus-visible {
+.ds-tag__kfFKF0__link::part(link):focus-visible {
   box-shadow: none;
   outline: none;
   outline-offset: none;

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

@@ -26,7 +26,7 @@ export class DsTag {
         });
         const DsIcon = transformTagName('ds-icon', 'ds-tag', this.el);
         const DsLink = transformTagName('ds-link', 'ds-tag', this.el);
-        return (h("div", { key: 'a1c6d7eab81ace5fa1a4527ba22a60d4b4c2790c', class: classes, ...this.inheritedAttributes }, h("slot", { key: '1e6fb63f16b1128732d8db52f2db89398d6e72e9', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '87270eb831a387a2a2e615f48c35f0e743ed6459' }, this.dsHref ? (h(DsLink, { class: `${baseClass}__link`, dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: `${baseClass}__text` }, this.dsText))), h("slot", { key: '1bc650c62972fb0acda7aef82e435a30c3553f40', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        return (h("div", { key: '0f2446c4b517db3ec20dfa950febccf0c7bfeb52', class: classes, ...this.inheritedAttributes }, h("slot", { key: '43e0a142a8f365d80cf58eaa759a7f7440ef2c30', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'ac1a060893498bc4bd9d6b87cc3f50d9074f1fac' }, this.dsHref ? (h(DsLink, { class: `${baseClass}__link`, dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: `${baseClass}__text` }, this.dsText))), h("slot", { key: '8ac71e5fedcb5e8b0d1bf2e95174d014ca11e61a', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
     }
     static get is() { return "ds-tag"; }
     static get originalStyleUrls() {

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

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

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

@@ -22,7 +22,7 @@ export class DsTagGroup {
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = attrAriaLabel || this.dsLabel;
-        return (h("div", { key: '7b4e33e73d8971f94e546bb40fc8ae59072e72a1', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: '758a46f76a20e1dd2e87babfb9de36f639d96907', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: 'f9a47ba4765a18647e4fc9b4cd655b0c7397bff6', name: "label" }), h("slot", { key: '0d371f8bf2d864c4dbce0e4b6525499a2dc7ee87', name: "assistiveText" })), h("div", { key: '657273e1243f880656f164dc71ae66b7acfb3902', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '3ed1b7f84f47bf845253a47b2778b2d70d29763b' }))));
+        return (h("div", { key: 'efc792b4d18a1111810a682a0d45dd5a30c127bb', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: '3bb21b89731d4eb10996b5c4f5b0cc5587265ab8', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: 'e523a123e46788ab4666f7e1d4c4dd9795be74af', name: "label" }), h("slot", { key: '973eb9d7e836724b40bcf1d802699a6158f3cf18', name: "assistiveText" })), h("div", { key: 'f8b272665b58a2ae3658dc4ad0f66fa6d0cd8ca9', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '9753af4408e89500b98fd52ad3b3d2b59f1abbea' }))));
     }
     static get is() { return "ds-tag-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-text-area/ds-text-area.css

@@ -7,21 +7,21 @@
 :host {
   display: inline-block;
 }
-:host:has(.ds-text-area__BahgnS__container--full-width) {
+:host:has(.ds-text-area__kfFKF0__container--full-width) {
   width: 100%;
 }
 
-.ds-text-area__BahgnS__container:focus-visible {
+.ds-text-area__kfFKF0__container: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-text-area__BahgnS__container:focus-within {
+.ds-text-area__kfFKF0__container:focus-within {
   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-text-area__BahgnS__container {
+.ds-text-area__kfFKF0__container {
   box-sizing: border-box;
   display: inline-flex;
   position: relative;
@@ -31,73 +31,73 @@
   border-color: var(--ds-borderColor-default);
   padding: 0;
 }
-.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid {
+.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid:hover:not(.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid:focus-within) {
+.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid:hover:not(.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid.ds-text-area__BahgnS__container--active {
+.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid.ds-text-area__kfFKF0__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__BahgnS__container--valid {
+.ds-text-area__kfFKF0__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__BahgnS__container--valid:hover:not(.ds-text-area__BahgnS__container--valid:focus-within) {
+.ds-text-area__kfFKF0__container--valid:hover:not(.ds-text-area__kfFKF0__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__BahgnS__container--valid.ds-text-area__BahgnS__container--active {
+.ds-text-area__kfFKF0__container--valid.ds-text-area__kfFKF0__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__BahgnS__container--readonly, .ds-text-area__BahgnS__container--disabled {
+.ds-text-area__kfFKF0__container--readonly, .ds-text-area__kfFKF0__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-area__BahgnS__container:focus-within:not(.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid, .ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--valid, .ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--readonly) {
+.ds-text-area__kfFKF0__container:focus-within:not(.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid, .ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--valid, .ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-area__BahgnS__container:hover:not(.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--disabled, .ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--readonly, .ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--active, .ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid, .ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--valid, .ds-text-area__BahgnS__container:focus-within) {
+.ds-text-area__kfFKF0__container:hover:not(.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--disabled, .ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--readonly, .ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--active, .ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid, .ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--valid, .ds-text-area__kfFKF0__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-area__BahgnS__container.active:not(.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--disabled, .ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--readonly, .ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid, .ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--valid) {
+.ds-text-area__kfFKF0__container.active:not(.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--disabled, .ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--readonly, .ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid, .ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-area__BahgnS__container--full-width {
+.ds-text-area__kfFKF0__container--full-width {
   width: 100%;
 }
-.ds-text-area__BahgnS__external-button,
-.ds-text-area__BahgnS ::slotted([slot=suffix]) {
+.ds-text-area__kfFKF0__external-button,
+.ds-text-area__kfFKF0 ::slotted([slot=suffix]) {
   margin-inline-start: var(--ds-spacing-xSmall);
   align-self: flex-start;
 }
-.ds-text-area__BahgnS__validity-container {
+.ds-text-area__kfFKF0__validity-container {
   align-items: center;
   width: 100%;
   font-size: var(--ds-fontSize-14);
 }
-.ds-text-area__BahgnS__validity-container--has-character-limit {
+.ds-text-area__kfFKF0__validity-container--has-character-limit {
   display: flex;
   gap: var(--ds-spacing-small);
   justify-content: space-between;
 }
-.ds-text-area__BahgnS__character-count {
+.ds-text-area__kfFKF0__character-count {
   margin-top: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__BahgnS__character-count--over-limit {
+.ds-text-area__kfFKF0__character-count--over-limit {
   color: var(--ds-textColor-danger);
 }
-.ds-text-area__BahgnS__character-count > small {
+.ds-text-area__kfFKF0__character-count > small {
   display: inline-block;
 }
-.ds-text-area__BahgnS__textarea {
+.ds-text-area__kfFKF0__textarea {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -112,7 +112,7 @@
   border: none;
   padding: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__BahgnS__textarea::placeholder {
+.ds-text-area__kfFKF0__textarea::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -120,33 +120,33 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-area__BahgnS__textarea:disabled {
+.ds-text-area__kfFKF0__textarea:disabled {
   color: var(--ds-textColor-disabled-onLight);
   background-color: var(--ds-bgColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-text-area__BahgnS__textarea:disabled::placeholder {
+.ds-text-area__kfFKF0__textarea:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-area__BahgnS__textarea:focus {
+.ds-text-area__kfFKF0__textarea:focus {
   outline: none;
   border: none;
 }
-.ds-text-area__BahgnS__textarea--resize-both {
+.ds-text-area__kfFKF0__textarea--resize-both {
   resize: both;
 }
-.ds-text-area__BahgnS__textarea--resize-auto, .ds-text-area__BahgnS__textarea--resize-none {
+.ds-text-area__kfFKF0__textarea--resize-auto, .ds-text-area__kfFKF0__textarea--resize-none {
   resize: none;
 }
-.ds-text-area__BahgnS__textarea--resize-auto {
+.ds-text-area__kfFKF0__textarea--resize-auto {
   overflow: hidden;
 }
-.ds-text-area__BahgnS__textarea--resize-vertical {
+.ds-text-area__kfFKF0__textarea--resize-vertical {
   resize: vertical;
 }
-.ds-text-area__BahgnS__textarea--resize-horizontal {
+.ds-text-area__kfFKF0__textarea--resize-horizontal {
   resize: horizontal;
 }
-.ds-text-area__BahgnS__textarea--full-width {
+.ds-text-area__kfFKF0__textarea--full-width {
   width: 100%;
 }