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

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

@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-select__pYthVb-custom {
+.ds-select__DFAX9n-custom {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,11 +25,11 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-select__pYthVb-custom:hover {
+.ds-select__DFAX9n-custom:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
 
-.ds-select__pYthVb-custom__dropdown-icon {
+.ds-select__DFAX9n-custom__dropdown-icon {
   cursor: pointer;
   align-items: center;
   align-self: stretch;
@@ -40,60 +40,60 @@
   padding: 0 var(--ds-spacing-2xSmall);
 }
 
-.ds-select__pYthVb-custom-wrapper {
+.ds-select__DFAX9n-custom-wrapper {
   position: relative;
 }
 
-.ds-select__pYthVb-custom .ds-options__pYthVb {
+.ds-select__DFAX9n-custom .ds-options__DFAX9n {
   display: block;
 }
-.ds-select__pYthVb-custom-input-container {
+.ds-select__DFAX9n-custom-input-container {
   display: flex;
   position: relative;
 }
-.ds-select__pYthVb-custom-input-container:has(.ds-select__pYthVb-custom__clear-button:hover) .ds-select__pYthVb-custom {
+.ds-select__DFAX9n-custom-input-container:has(.ds-select__DFAX9n-custom__clear-button:hover) .ds-select__DFAX9n-custom {
   background-color: var(--ds-bgColor-white-hover) !important;
 }
-.ds-select__pYthVb-custom:not(.ds-select__pYthVb-custom--open, .ds-select__pYthVb-custom--invalid, .ds-select__pYthVb-custom--disabled):hover {
+.ds-select__DFAX9n-custom:not(.ds-select__DFAX9n-custom--open, .ds-select__DFAX9n-custom--invalid, .ds-select__DFAX9n-custom--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__pYthVb-custom:active:not(.ds-select__pYthVb-custom--open, .ds-select__pYthVb-custom--invalid, .ds-select__pYthVb-custom--disabled) {
+.ds-select__DFAX9n-custom:active:not(.ds-select__DFAX9n-custom--open, .ds-select__DFAX9n-custom--invalid, .ds-select__DFAX9n-custom--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__pYthVb-custom--open, .ds-select__pYthVb-custom:focus-visible {
+.ds-select__DFAX9n-custom--open, .ds-select__DFAX9n-custom: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-select__pYthVb-custom--open:not(.ds-select__pYthVb-custom--open--invalid, .ds-select__pYthVb-custom:focus-visible--invalid), .ds-select__pYthVb-custom:focus-visible:not(.ds-select__pYthVb-custom--open--invalid, .ds-select__pYthVb-custom:focus-visible--invalid) {
+.ds-select__DFAX9n-custom--open:not(.ds-select__DFAX9n-custom--open--invalid, .ds-select__DFAX9n-custom:focus-visible--invalid), .ds-select__DFAX9n-custom:focus-visible:not(.ds-select__DFAX9n-custom--open--invalid, .ds-select__DFAX9n-custom:focus-visible--invalid) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-select__pYthVb-custom--disabled {
+.ds-select__DFAX9n-custom--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__pYthVb-custom--disabled .ds-select__pYthVb-custom__dropdown-icon {
+.ds-select__DFAX9n-custom--disabled .ds-select__DFAX9n-custom__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__pYthVb-custom--invalid {
+.ds-select__DFAX9n-custom--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__pYthVb-custom--invalid:not(.ds-select__pYthVb-custom--invalid--open, .ds-select__pYthVb-custom--invalid--disabled):active {
+.ds-select__DFAX9n-custom--invalid:not(.ds-select__DFAX9n-custom--invalid--open, .ds-select__DFAX9n-custom--invalid--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__pYthVb-custom--invalid:not(.ds-select__pYthVb-custom--invalid--disabled):hover {
+.ds-select__DFAX9n-custom--invalid:not(.ds-select__DFAX9n-custom--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__pYthVb-custom__dropdown-icon--has-clear-button {
+.ds-select__DFAX9n-custom__dropdown-icon--has-clear-button {
   margin-left: var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px));
 }
-.ds-select__pYthVb-custom__selected-option {
+.ds-select__DFAX9n-custom__selected-option {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
@@ -107,26 +107,26 @@
   padding-left: var(--ds-spacing-xSmall);
   padding-right: var(--ds-spacing-xSmall);
 }
-.ds-select__pYthVb-custom--has-icon .ds-select__pYthVb-custom__selected-option {
+.ds-select__DFAX9n-custom--has-icon .ds-select__DFAX9n-custom__selected-option {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-select__pYthVb-custom__selected-option__placeholder-icon {
+.ds-select__DFAX9n-custom__selected-option__placeholder-icon {
   font-size: var(--ds-fontSize-16);
 }
-.ds-select__pYthVb-custom__selected-option__text {
+.ds-select__DFAX9n-custom__selected-option__text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--ds-textColor-default);
 }
-.ds-select__pYthVb-custom__selected-option__text--none-selected {
+.ds-select__DFAX9n-custom__selected-option__text--none-selected {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__pYthVb-custom__selected-option__text--disabled {
+.ds-select__DFAX9n-custom__selected-option__text--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__pYthVb-custom input {
+.ds-select__DFAX9n-custom input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -140,32 +140,32 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-select__pYthVb-custom input::placeholder {
+.ds-select__DFAX9n-custom input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__pYthVb-custom input:disabled {
+.ds-select__DFAX9n-custom input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__pYthVb-custom input:disabled::placeholder {
+.ds-select__DFAX9n-custom input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__pYthVb-custom input:focus {
+.ds-select__DFAX9n-custom input:focus {
   outline: none;
 }
-.ds-select__pYthVb-custom__clear-button {
+.ds-select__DFAX9n-custom__clear-button {
   position: absolute;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);
   cursor: pointer;
 }
-.ds-select__pYthVb-custom__badge-container {
+.ds-select__DFAX9n-custom__badge-container {
   position: absolute;
   z-index: 2;
   pointer-events: none;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);
   padding: 10px 0;
 }
-.ds-select__pYthVb-custom__options-container {
+.ds-select__DFAX9n-custom__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -175,11 +175,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-select__pYthVb-custom__options-container--open {
+.ds-select__DFAX9n-custom__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-select__pYthVb-custom__options-container__options {
+.ds-select__DFAX9n-custom__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -188,7 +188,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-select__pYthVb-custom__options-container__options__inner {
+.ds-select__DFAX9n-custom__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -199,7 +199,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-select__pYthVb-custom__options-container__options__inner__top-scrim, .ds-select__pYthVb-custom__options-container__options__inner__bottom-scrim {
+.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim, .ds-select__DFAX9n-custom__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -209,20 +209,20 @@
   z-index: 1;
   display: none;
 }
-.ds-select__pYthVb-custom__options-container__options__inner__top-scrim--visible, .ds-select__pYthVb-custom__options-container__options__inner__bottom-scrim--visible {
+.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim--visible, .ds-select__DFAX9n-custom__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-select__pYthVb-custom__options-container__options__inner__top-scrim {
+.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-select__pYthVb-custom__options-container__options__inner__top-scrim--dark {
+.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim--dark {
   height: calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));
   background: none;
   margin-top: calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));
   box-shadow: 0 -2px 7px var(--ds-overlay-black-50);
 }
-.ds-select__pYthVb-custom__options-container__options__inner__bottom-scrim {
+.ds-select__DFAX9n-custom__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }

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

@@ -177,47 +177,47 @@ body {
   font-weight: var(--ds-fontWeight-bold);
 }
 
-.ds-spinner__pYthVb {
+.ds-spinner__DFAX9n {
   display: inline-block;
 }
-.ds-spinner__pYthVb:has(.ds-spinner__pYthVb__text) {
+.ds-spinner__DFAX9n:has(.ds-spinner__DFAX9n__text) {
   display: inline-flex;
   align-items: center;
   gap: calc(var(--spinner-size) / 2);
 }
-.ds-spinner__pYthVb {
+.ds-spinner__DFAX9n {
   /* Size */
 }
-.ds-spinner__pYthVb--small {
+.ds-spinner__DFAX9n--small {
   padding: 1.5px;
 }
-.ds-spinner__pYthVb--medium {
+.ds-spinner__DFAX9n--medium {
   padding: 3px;
 }
-.ds-spinner__pYthVb--large {
+.ds-spinner__DFAX9n--large {
   padding: 3px;
 }
-.ds-spinner__pYthVb--xLarge {
+.ds-spinner__DFAX9n--xLarge {
   padding: 5.5px;
 }
-.ds-spinner__pYthVb--2xLarge {
+.ds-spinner__DFAX9n--2xLarge {
   padding: 5.5px;
 }
-.ds-spinner__pYthVb--custom {
+.ds-spinner__DFAX9n--custom {
   padding: calc(var(--spinner-size) / 8);
 }
-.ds-spinner__pYthVb {
+.ds-spinner__DFAX9n {
   /* Position */
 }
-.ds-spinner__pYthVb--below {
+.ds-spinner__DFAX9n--below {
   flex-direction: column;
   align-items: center;
 }
-.ds-spinner__pYthVb--right {
+.ds-spinner__DFAX9n--right {
   flex-direction: row;
   align-items: center;
 }
-.ds-spinner__pYthVb__spinner {
+.ds-spinner__DFAX9n__spinner {
   width: var(--spinner-size, 24px);
   height: var(--spinner-size, 24px);
   border-radius: 50%;
@@ -227,14 +227,14 @@ body {
   align-items: center;
   justify-content: center;
 }
-.ds-spinner__pYthVb__text {
+.ds-spinner__DFAX9n__text {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
 }
-.ds-spinner__pYthVb__text--white {
+.ds-spinner__DFAX9n__text--white {
   color: var(--ds-textColor-white);
 }
-.ds-spinner__pYthVb__segment {
+.ds-spinner__DFAX9n__segment {
   display: block;
   position: absolute;
   width: var(--spinner-size, 24px);
@@ -244,13 +244,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__pYthVb__segment--1 {
+.ds-spinner__DFAX9n__segment--1 {
   animation-delay: -0.3s;
 }
-.ds-spinner__pYthVb__segment--2 {
+.ds-spinner__DFAX9n__segment--2 {
   animation-delay: -0.2s;
 }
-.ds-spinner__pYthVb__segment--3 {
+.ds-spinner__DFAX9n__segment--3 {
   animation-delay: -0.1s;
 }
 
@@ -264,17 +264,17 @@ body {
 }
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
-  .ds-spinner__pYthVb__segment {
+  .ds-spinner__DFAX9n__segment {
     animation-duration: 2.2s; /* Double the original duration (slower) */
     animation-timing-function: linear; /* More predictable motion */
   }
-  .ds-spinner__pYthVb__segment--1 {
+  .ds-spinner__DFAX9n__segment--1 {
     animation-delay: -0.6s;
   }
-  .ds-spinner__pYthVb__segment--2 {
+  .ds-spinner__DFAX9n__segment--2 {
     animation-delay: -0.4s;
   }
-  .ds-spinner__pYthVb__segment--3 {
+  .ds-spinner__DFAX9n__segment--3 {
     animation-delay: -0.2s;
   }
 }

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

@@ -1,14 +1,14 @@
-.ds-tag__pYthVb:focus-visible {
+.ds-tag__DFAX9n: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__pYthVb:focus-within {
+.ds-tag__DFAX9n: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__pYthVb {
+.ds-tag__DFAX9n {
   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__pYthVb.ds-tag__pYthVb--default {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--default {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--default:has(.ds-tag__pYthVb__link:hover) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--default:has(.ds-tag__DFAX9n__link:hover) {
   background-color: var(--ds-bgColor-neutral-hover);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--default:has(.ds-tag__pYthVb__link:active) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--default:has(.ds-tag__DFAX9n__link:active) {
   background-color: var(--ds-bgColor-neutral-active);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--black {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--black {
   color: var(--ds-textColor-white);
   background-color: var(--ds-bgColor-black);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--black:has(.ds-tag__pYthVb__link:hover) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--black:has(.ds-tag__DFAX9n__link:hover) {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--black:has(.ds-tag__pYthVb__link:active) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--black:has(.ds-tag__DFAX9n__link:active) {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--white {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--white {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--white:has(.ds-tag__pYthVb__link:hover) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--white:has(.ds-tag__DFAX9n__link:hover) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--white:has(.ds-tag__pYthVb__link:active) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--white:has(.ds-tag__DFAX9n__link:active) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--info {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--info:has(.ds-tag__pYthVb__link:hover) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--info:has(.ds-tag__DFAX9n__link:hover) {
   background-color: var(--ds-bgColor-info-hover);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--info:has(.ds-tag__pYthVb__link:active) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--info:has(.ds-tag__DFAX9n__link:active) {
   background-color: var(--ds-bgColor-info-active);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--danger {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--danger:has(.ds-tag__pYthVb__link:hover) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--danger:has(.ds-tag__DFAX9n__link:hover) {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--danger:has(.ds-tag__pYthVb__link:active) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--danger:has(.ds-tag__DFAX9n__link:active) {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--attention {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--attention:has(.ds-tag__pYthVb__link:hover) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--attention:has(.ds-tag__DFAX9n__link:hover) {
   background-color: var(--ds-bgColor-attention-hover);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--attention:has(.ds-tag__pYthVb__link:active) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--attention:has(.ds-tag__DFAX9n__link:active) {
   background-color: var(--ds-bgColor-attention-active);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--success {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--success:has(.ds-tag__pYthVb__link:hover) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--success:has(.ds-tag__DFAX9n__link:hover) {
   background-color: var(--ds-bgColor-success-hover);
 }
-.ds-tag__pYthVb.ds-tag__pYthVb--success:has(.ds-tag__pYthVb__link:active) {
+.ds-tag__DFAX9n.ds-tag__DFAX9n--success:has(.ds-tag__DFAX9n__link:active) {
   background-color: var(--ds-bgColor-success-active);
 }
-.ds-tag__pYthVb__text {
+.ds-tag__DFAX9n__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__pYthVb__link {
+.ds-tag__DFAX9n__link {
   display: contents;
 }
-.ds-tag__pYthVb__link::part(link):focus-visible {
+.ds-tag__DFAX9n__link::part(link):focus-visible {
   box-shadow: none;
   outline: none;
   outline-offset: none;

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

@@ -1,4 +1,4 @@
-.ds-tag-group__pYthVb__tags {
+.ds-tag-group__DFAX9n__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-text-area/ds-text-area.css

@@ -7,21 +7,21 @@
 :host {
   display: inline-block;
 }
-:host:has(.ds-text-area__pYthVb__container--full-width) {
+:host:has(.ds-text-area__DFAX9n__container--full-width) {
   width: 100%;
 }
 
-.ds-text-area__pYthVb__container:focus-visible {
+.ds-text-area__DFAX9n__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__pYthVb__container:focus-within {
+.ds-text-area__DFAX9n__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__pYthVb__container {
+.ds-text-area__DFAX9n__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__pYthVb__container.ds-text-area__pYthVb__container--invalid {
+.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--invalid:hover:not(.ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--invalid:focus-within) {
+.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid:hover:not(.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--invalid.ds-text-area__pYthVb__container--active {
+.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid.ds-text-area__DFAX9n__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__pYthVb__container--valid {
+.ds-text-area__DFAX9n__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__pYthVb__container--valid:hover:not(.ds-text-area__pYthVb__container--valid:focus-within) {
+.ds-text-area__DFAX9n__container--valid:hover:not(.ds-text-area__DFAX9n__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__pYthVb__container--valid.ds-text-area__pYthVb__container--active {
+.ds-text-area__DFAX9n__container--valid.ds-text-area__DFAX9n__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__pYthVb__container--readonly, .ds-text-area__pYthVb__container--disabled {
+.ds-text-area__DFAX9n__container--readonly, .ds-text-area__DFAX9n__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-area__pYthVb__container:focus-within:not(.ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--invalid, .ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--valid, .ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--readonly) {
+.ds-text-area__DFAX9n__container:focus-within:not(.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--valid, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-area__pYthVb__container:hover:not(.ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--disabled, .ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--readonly, .ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--active, .ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--invalid, .ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--valid, .ds-text-area__pYthVb__container:focus-within) {
+.ds-text-area__DFAX9n__container:hover:not(.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--disabled, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--readonly, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--active, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--valid, .ds-text-area__DFAX9n__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-area__pYthVb__container.active:not(.ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--disabled, .ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--readonly, .ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--invalid, .ds-text-area__pYthVb__container.ds-text-area__pYthVb__container--valid) {
+.ds-text-area__DFAX9n__container.active:not(.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--disabled, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--readonly, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid, .ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-area__pYthVb__container--full-width {
+.ds-text-area__DFAX9n__container--full-width {
   width: 100%;
 }
-.ds-text-area__pYthVb__external-button,
-.ds-text-area__pYthVb ::slotted([slot=suffix]) {
+.ds-text-area__DFAX9n__external-button,
+.ds-text-area__DFAX9n ::slotted([slot=suffix]) {
   margin-inline-start: var(--ds-spacing-xSmall);
   align-self: flex-start;
 }
-.ds-text-area__pYthVb__validity-container {
+.ds-text-area__DFAX9n__validity-container {
   align-items: center;
   width: 100%;
   font-size: var(--ds-fontSize-14);
 }
-.ds-text-area__pYthVb__validity-container--has-character-limit {
+.ds-text-area__DFAX9n__validity-container--has-character-limit {
   display: flex;
   gap: var(--ds-spacing-small);
   justify-content: space-between;
 }
-.ds-text-area__pYthVb__character-count {
+.ds-text-area__DFAX9n__character-count {
   margin-top: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__pYthVb__character-count--over-limit {
+.ds-text-area__DFAX9n__character-count--over-limit {
   color: var(--ds-textColor-danger);
 }
-.ds-text-area__pYthVb__character-count > small {
+.ds-text-area__DFAX9n__character-count > small {
   display: inline-block;
 }
-.ds-text-area__pYthVb__textarea {
+.ds-text-area__DFAX9n__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__pYthVb__textarea::placeholder {
+.ds-text-area__DFAX9n__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__pYthVb__textarea:disabled {
+.ds-text-area__DFAX9n__textarea:disabled {
   color: var(--ds-textColor-disabled-onLight);
   background-color: var(--ds-bgColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-text-area__pYthVb__textarea:disabled::placeholder {
+.ds-text-area__DFAX9n__textarea:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-area__pYthVb__textarea:focus {
+.ds-text-area__DFAX9n__textarea:focus {
   outline: none;
   border: none;
 }
-.ds-text-area__pYthVb__textarea--resize-both {
+.ds-text-area__DFAX9n__textarea--resize-both {
   resize: both;
 }
-.ds-text-area__pYthVb__textarea--resize-auto, .ds-text-area__pYthVb__textarea--resize-none {
+.ds-text-area__DFAX9n__textarea--resize-auto, .ds-text-area__DFAX9n__textarea--resize-none {
   resize: none;
 }
-.ds-text-area__pYthVb__textarea--resize-auto {
+.ds-text-area__DFAX9n__textarea--resize-auto {
   overflow: hidden;
 }
-.ds-text-area__pYthVb__textarea--resize-vertical {
+.ds-text-area__DFAX9n__textarea--resize-vertical {
   resize: vertical;
 }
-.ds-text-area__pYthVb__textarea--resize-horizontal {
+.ds-text-area__DFAX9n__textarea--resize-horizontal {
   resize: horizontal;
 }
-.ds-text-area__pYthVb__textarea--full-width {
+.ds-text-area__DFAX9n__textarea--full-width {
   width: 100%;
 }