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

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

@@ -1,24 +1,27 @@
-.ds-no-style-leak *, .ds-tag__MGLLcm,
-.ds-tag__MGLLcm :where([class*=__MGLLcm]) {
+.ds-no-style-leak * {
   all: unset;
   box-sizing: border-box;
-}
-
-.ds-no-style-leak * {
   display: block;
 }
 
-.ds-tag__MGLLcm:focus-visible {
+.ds-tag__KmYz6O {
+  all: initial;
+  display: revert;
+  box-sizing: border-box;
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
+}
+.ds-tag__KmYz6O:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-tag__MGLLcm:focus-within {
+.ds-tag__KmYz6O: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__MGLLcm {
+.ds-tag__KmYz6O {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -27,87 +30,87 @@
   padding: calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--default {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--default {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--default:has(.ds-tag__MGLLcm__link:hover) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--default:has(.ds-tag__KmYz6O__link:hover) {
   background-color: var(--ds-bgColor-neutral-hover);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--default:has(.ds-tag__MGLLcm__link:active) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--default:has(.ds-tag__KmYz6O__link:active) {
   background-color: var(--ds-bgColor-neutral-active);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--black {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--black {
   color: var(--ds-textColor-white);
   background-color: var(--ds-bgColor-black);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--black:has(.ds-tag__MGLLcm__link:hover) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--black:has(.ds-tag__KmYz6O__link:hover) {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--black:has(.ds-tag__MGLLcm__link:active) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--black:has(.ds-tag__KmYz6O__link:active) {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--white {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--white {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--white:has(.ds-tag__MGLLcm__link:hover) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--white:has(.ds-tag__KmYz6O__link:hover) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--white:has(.ds-tag__MGLLcm__link:active) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--white:has(.ds-tag__KmYz6O__link:active) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--info {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--info:has(.ds-tag__MGLLcm__link:hover) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--info:has(.ds-tag__KmYz6O__link:hover) {
   background-color: var(--ds-bgColor-info-hover);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--info:has(.ds-tag__MGLLcm__link:active) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--info:has(.ds-tag__KmYz6O__link:active) {
   background-color: var(--ds-bgColor-info-active);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--danger {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--danger:has(.ds-tag__MGLLcm__link:hover) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--danger:has(.ds-tag__KmYz6O__link:hover) {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--danger:has(.ds-tag__MGLLcm__link:active) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--danger:has(.ds-tag__KmYz6O__link:active) {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--attention {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--attention:has(.ds-tag__MGLLcm__link:hover) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--attention:has(.ds-tag__KmYz6O__link:hover) {
   background-color: var(--ds-bgColor-attention-hover);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--attention:has(.ds-tag__MGLLcm__link:active) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--attention:has(.ds-tag__KmYz6O__link:active) {
   background-color: var(--ds-bgColor-attention-active);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--success {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--success:has(.ds-tag__MGLLcm__link:hover) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--success:has(.ds-tag__KmYz6O__link:hover) {
   background-color: var(--ds-bgColor-success-hover);
 }
-.ds-tag__MGLLcm.ds-tag__MGLLcm--success:has(.ds-tag__MGLLcm__link:active) {
+.ds-tag__KmYz6O.ds-tag__KmYz6O--success:has(.ds-tag__KmYz6O__link:active) {
   background-color: var(--ds-bgColor-success-active);
 }
-.ds-tag__MGLLcm__text {
+.ds-tag__KmYz6O__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__MGLLcm__link {
+.ds-tag__KmYz6O__link {
   display: contents;
 }
-.ds-tag__MGLLcm__link::part(link):focus-visible {
+.ds-tag__KmYz6O__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

@@ -31,7 +31,7 @@ export class DsTag {
         const ariaHidden = this.dsAriaHidden !== undefined ? this.dsAriaHidden : this.dsHref ? false : true;
         const role = this.dsRole ?? this.inheritedAttributes.role;
         const restAttributes = omit(this.inheritedAttributes, ['aria-hidden', 'role']);
-        return (h("div", { key: '82fd38de084dc237b9f901a815f241399c85c437', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, h("slot", { key: 'd1d377619907932d6a39eaf87f5693cf5fb89716', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '1db32c3a19b54497c897b91eb2a283fca4cb5ad6' }, 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: '724ef29be5e3c757159f4da276d471980d7830b1', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        return (h("div", { key: 'd9d997face7b1d347d89d2ed42973bd4c6c2176a', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, h("slot", { key: '08f9b77a75d1e26d4e58383c0e6f55f1e2eeb55a', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'f6f31221e173e54321d45d3b423db830b371269e' }, 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: '6515a21c36bd267d5ac6132fd6509d480f7f8112', 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() {
@@ -135,7 +135,8 @@ export class DsTag {
                         "LinkTarget": {
                             "location": "import",
                             "path": "../../../utils/link/linkUtils",
-                            "id": "src/utils/link/linkUtils.ts::LinkTarget"
+                            "id": "src/utils/link/linkUtils.ts::LinkTarget",
+                            "referenceLocation": "LinkTarget"
                         }
                     }
                 },

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

@@ -1,4 +1,4 @@
-.ds-tag-group__MGLLcm__tags {
+.ds-tag-group__KmYz6O__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

@@ -23,7 +23,7 @@ export class DsTagGroup {
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
-        return (h("div", { key: 'ee16fff7ff64a4875ab3498b62b6931e9da237d2', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'd1b371536759a7dbfc875c50044b9ea73057ae6f', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: 'a44a327d8b6b0b82a6ae9e82d0f0d9b31b263ede', name: "label" }), h("slot", { key: '644f840a3910ca10ac6a105d6c821c9b825fe8c2', name: "assistiveText" })), h("div", { key: '78624b38d7b19433ef54b120a3c3590db538ccec', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '725fc438b3050a584cbb0c6c6fa2a353568c3647' }))));
+        return (h("div", { key: '506cb8b9335b5cdbf8dcd67e1ac09b523dbc7c71', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'cfbd992d2f91d68192e511d61dbfd88cf1fc5cb5', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '00fdecc8b0e2fbe3b57b9dd59803bb8e84c604c1', name: "label" }), h("slot", { key: '209aa3a2a855dfa78e2f776d01472c9bb08d049d', name: "assistiveText" })), h("div", { key: '0bfdd460d007fc112e931770e41c593b874692dc', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '87b3169b5eb8eb25f83889f533005c738fadee7e' }))));
     }
     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

@@ -1,34 +1,35 @@
-.ds-no-style-leak *, .ds-text-area__MGLLcm,
-.ds-text-area__MGLLcm :where([class*=__MGLLcm]) {
+.ds-no-style-leak * {
   all: unset;
   box-sizing: border-box;
-}
-
-.ds-no-style-leak * {
   display: block;
 }
 
 :host {
   display: inline-block;
 }
-:host:has(.ds-text-area__MGLLcm__container--full-width) {
+:host:has(.ds-text-area__KmYz6O__container--full-width) {
   width: 100%;
 }
 
-.ds-text-area__MGLLcm {
+.ds-text-area__KmYz6O {
+  all: initial;
+  display: revert;
+  box-sizing: border-box;
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-text-area__MGLLcm__container:focus-visible {
+.ds-text-area__KmYz6O__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__MGLLcm__container:focus-within {
+.ds-text-area__KmYz6O__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__MGLLcm__container {
+.ds-text-area__KmYz6O__container {
   box-sizing: border-box;
   display: inline-flex;
   position: relative;
@@ -38,74 +39,74 @@
   border-color: var(--ds-borderColor-default);
   padding: 0;
 }
-.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid {
+.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid:hover:not(.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid:focus-within) {
+.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid:hover:not(.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid.ds-text-area__MGLLcm__container--active {
+.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid.ds-text-area__KmYz6O__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__MGLLcm__container--valid {
+.ds-text-area__KmYz6O__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__MGLLcm__container--valid:hover:not(.ds-text-area__MGLLcm__container--valid:focus-within) {
+.ds-text-area__KmYz6O__container--valid:hover:not(.ds-text-area__KmYz6O__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__MGLLcm__container--valid.ds-text-area__MGLLcm__container--active {
+.ds-text-area__KmYz6O__container--valid.ds-text-area__KmYz6O__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__MGLLcm__container--readonly, .ds-text-area__MGLLcm__container--disabled {
+.ds-text-area__KmYz6O__container--readonly, .ds-text-area__KmYz6O__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-area__MGLLcm__container:focus-within:not(.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid, .ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--valid, .ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--readonly) {
+.ds-text-area__KmYz6O__container:focus-within:not(.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid, .ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--valid, .ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-area__MGLLcm__container:hover:not(.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--disabled, .ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--readonly, .ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--active, .ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid, .ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--valid, .ds-text-area__MGLLcm__container:focus-within) {
+.ds-text-area__KmYz6O__container:hover:not(.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--disabled, .ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--readonly, .ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--active, .ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid, .ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--valid, .ds-text-area__KmYz6O__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-area__MGLLcm__container.active:not(.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--disabled, .ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--readonly, .ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid, .ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--valid) {
+.ds-text-area__KmYz6O__container.active:not(.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--disabled, .ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--readonly, .ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid, .ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-area__MGLLcm__container--full-width {
+.ds-text-area__KmYz6O__container--full-width {
   width: 100%;
 }
-.ds-text-area__MGLLcm__external-button,
-.ds-text-area__MGLLcm ::slotted([slot=suffix]) {
+.ds-text-area__KmYz6O__external-button,
+.ds-text-area__KmYz6O ::slotted([slot=suffix]) {
   margin-inline-start: var(--ds-spacing-xSmall);
   align-self: flex-start;
 }
-.ds-text-area__MGLLcm__validity-container {
+.ds-text-area__KmYz6O__validity-container {
   align-items: center;
   width: 100%;
   font-size: var(--ds-fontSize-14);
 }
-.ds-text-area__MGLLcm__validity-container--has-character-limit {
+.ds-text-area__KmYz6O__validity-container--has-character-limit {
   display: flex;
   gap: var(--ds-spacing-small);
   justify-content: space-between;
 }
-.ds-text-area__MGLLcm__character-count {
+.ds-text-area__KmYz6O__character-count {
   margin-top: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__MGLLcm__character-count--over-limit {
+.ds-text-area__KmYz6O__character-count--over-limit {
   color: var(--ds-textColor-danger);
 }
-.ds-text-area__MGLLcm__character-count > small {
+.ds-text-area__KmYz6O__character-count > small {
   display: inline-block;
   font-size: inherit;
 }
-.ds-text-area__MGLLcm__textarea {
+.ds-text-area__KmYz6O__textarea {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -120,7 +121,7 @@
   border: none;
   padding: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__MGLLcm__textarea::placeholder {
+.ds-text-area__KmYz6O__textarea::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -128,33 +129,33 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-area__MGLLcm__textarea:disabled {
+.ds-text-area__KmYz6O__textarea:disabled {
   color: var(--ds-textColor-disabled-onLight);
   background-color: var(--ds-bgColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-text-area__MGLLcm__textarea:disabled::placeholder {
+.ds-text-area__KmYz6O__textarea:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-area__MGLLcm__textarea:focus {
+.ds-text-area__KmYz6O__textarea:focus {
   outline: none;
   border: none;
 }
-.ds-text-area__MGLLcm__textarea--resize-both {
+.ds-text-area__KmYz6O__textarea--resize-both {
   resize: both;
 }
-.ds-text-area__MGLLcm__textarea--resize-auto, .ds-text-area__MGLLcm__textarea--resize-none {
+.ds-text-area__KmYz6O__textarea--resize-auto, .ds-text-area__KmYz6O__textarea--resize-none {
   resize: none;
 }
-.ds-text-area__MGLLcm__textarea--resize-auto {
+.ds-text-area__KmYz6O__textarea--resize-auto {
   overflow: hidden;
 }
-.ds-text-area__MGLLcm__textarea--resize-vertical {
+.ds-text-area__KmYz6O__textarea--resize-vertical {
   resize: vertical;
 }
-.ds-text-area__MGLLcm__textarea--resize-horizontal {
+.ds-text-area__KmYz6O__textarea--resize-horizontal {
   resize: horizontal;
 }
-.ds-text-area__MGLLcm__textarea--full-width {
+.ds-text-area__KmYz6O__textarea--full-width {
   width: 100%;
 }

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

@@ -201,7 +201,7 @@ export class DsTextArea {
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
         const ariaDescribedby = this.dsAriaDescribedby || attrAriaDescribedby;
-        return (h(Fragment, { key: '96a12866718d05b8d0bcec52ae110b47ecb87087' }, h(DsControlLabel, { key: '37329da40f540d2a03198b983cc8f1f8c652b907', dsHtmlFor: this.dsId, dsLabel: this.getLabelText(), dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId }, h("slot", { key: 'e14d89ddcd0350757d7eabf6f858817f947ec718', name: "label" }), h("slot", { key: 'f30fb8640e9a7cfb09ca2db3a798afa691e0206c', name: "assistiveText" })), h("div", { key: '0bf1214ac9652c40f4e8958943bd900757d8ecad', onMouseDown: () => (this.textareaActive = true), onMouseUp: () => (this.textareaActive = false), onClick: () => this.handleTextareaContainerClick(), class: classNames(containerClass, {
+        return (h(Fragment, { key: 'b552302f5db01214407d5f62545b2ef07a9dfb44' }, h(DsControlLabel, { key: '37035555f649c105ec460e6399752efaf1236f51', dsHtmlFor: this.dsId, dsLabel: this.getLabelText(), dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId }, h("slot", { key: 'a68186dfa927d07149c2d63138077da1cc08db74', name: "label" }), h("slot", { key: 'd40242957ab517309673badf3740068d22db6705', name: "assistiveText" })), h("div", { key: '5edc680c64cdcdecb3d5e6f4cad5e96858ed3644', onMouseDown: () => (this.textareaActive = true), onMouseUp: () => (this.textareaActive = false), onClick: () => this.handleTextareaContainerClick(), class: classNames(containerClass, {
                 [`${containerClass}--disabled`]: this.dsDisabled,
                 [`${containerClass}--readonly`]: this.dsReadonly,
                 [`${containerClass}--valid`]: !!this.dsSuccessText,
@@ -209,7 +209,7 @@ export class DsTextArea {
                 [`${containerClass}--focus`]: this.hasFocus,
                 [`${containerClass}--active`]: !!this.textareaActive,
                 [`${containerClass}--full-width`]: this.dsFullWidth,
-            }) }, h("textarea", { key: 'e33eed220489e8ae118e34dbeaf0c9e27ed9648c', ref: e => (this.textareaElement = e), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, value: this.dsValue !== undefined ? this.dsValue : this.internalValue, placeholder: this.dsPlaceholder, readonly: this.dsReadonly, required: this.dsRequired, class: classNames(`${baseClass}__textarea`, `${baseClass}__textarea--resize-${this.dsResizing}`, {
+            }) }, h("textarea", { key: '22b3486c977abffe10ffefa1a61bf0f8a8b6e73a', ref: e => (this.textareaElement = e), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, value: this.dsValue !== undefined ? this.dsValue : this.internalValue, placeholder: this.dsPlaceholder, readonly: this.dsReadonly, required: this.dsRequired, class: classNames(`${baseClass}__textarea`, `${baseClass}__textarea--resize-${this.dsResizing}`, {
                 [`${baseClass}__textarea--full-width`]: this.dsFullWidth,
             }), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby ||
                 classNames({
@@ -217,11 +217,11 @@ export class DsTextArea {
                     [this.visuallyHiddenAssistiveTextId]: !!this.dsHiddenAssistiveText,
                     [this.errorTextId]: !!this.dsErrorText,
                     [this.successTextId]: !!this.dsSuccessText,
-                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes })), h("div", { key: 'd817515bf8c7089ba8971ccc8fe0c9328b8d8d8f', class: classNames(`${baseClass}__validity-container`, {
+                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes })), h("div", { key: '27a9a1949248fdb652873a7d4543a52e39fc9883', class: classNames(`${baseClass}__validity-container`, {
                 [`${baseClass}__validity-container--has-character-limit`]: !!this.dsCharacterLimit,
-            }) }, h("slot", { key: '831db886d20b7c862f3d834b0a6475dc330731f2', name: "validity" }, h(DsInputValidity, { key: '60bcedf145d0bc46b0598589fdf6a3a71fe3386b', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "assertive" }, this.dsCharacterLimit && h(DsVisuallyHidden, { key: '1c0c58e5199e82e0f4c84484238765de8b61e9cd', dsTag: "span" }, this.hiddenCharacterCountText)), h(DsInputValidity, { key: '025c80d7426db961e2da7ac502a67e8284ffbbdb', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success" })), this.dsCharacterLimit && (h("div", { key: 'be82d462f7e9090e600b58beb21596082d016f2d', class: classNames(`${baseClass}__character-count`, {
+            }) }, h("slot", { key: 'f42131cd8a54a22509a2405d1c4e869ea890f078', name: "validity" }, h(DsInputValidity, { key: '5c98f82c2bc965ab24be16b9898b3261a539e09f', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "assertive" }, this.dsCharacterLimit && h(DsVisuallyHidden, { key: '4078803a0f3bea8c94f23e62222bb3d81b13a439', dsTag: "span" }, this.hiddenCharacterCountText)), h(DsInputValidity, { key: '4d4dd7ac89b088a67591828f53e2e8891381dafb', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success" })), this.dsCharacterLimit && (h("div", { key: 'aaf767b66c448f8bcaf6e517df4688286470bff1', class: classNames(`${baseClass}__character-count`, {
                 [`${baseClass}__character-count--over-limit`]: this.characterCount > this.dsCharacterLimit,
-            }) }, h("small", { key: '87fab68a27cbb9cbde84b88247d0a3f26775992d' }, this.characterCount, "/", this.dsCharacterLimit))))));
+            }) }, h("small", { key: 'bd86a6b1ed6ee31cdfb1a4105f6a74e3edf9e312' }, this.characterCount, "/", this.dsCharacterLimit))))));
     }
     static get is() { return "ds-text-area"; }
     static get encapsulation() { return "scoped"; }
@@ -666,7 +666,7 @@ export class DsTextArea {
                 },
                 "complexType": {
                     "original": "Omit<DsTextAreaEvent, 'event'>",
-                    "resolved": "{ value: string; }",
+                    "resolved": "\"event\" | Event",
                     "references": {
                         "Omit": {
                             "location": "global",
@@ -691,7 +691,7 @@ export class DsTextArea {
                 },
                 "complexType": {
                     "original": "DsTextAreaEvent<InputEvent>",
-                    "resolved": "{ event: InputEvent; value: string; }",
+                    "resolved": "InputEvent",
                     "references": {
                         "DsTextAreaEvent": {
                             "location": "local",
@@ -721,7 +721,8 @@ export class DsTextArea {
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -742,7 +743,8 @@ export class DsTextArea {
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }

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

@@ -46,7 +46,11 @@ export const Events = {
     </style>
     <ds-grid>
       <ds-grid>
-        <ds-card ds-heading="Events" ds-description="Type in the textarea to observe the events it triggers. Change events are emitted only on user interaction.">
+        <ds-card
+          ds-link-type="none"
+          ds-heading="Events"
+          ds-description="Type in the textarea to observe the events it triggers. Change events are emitted only on user interaction."
+        >
           <ul slot="content" id="text-area-output" class="ds-bodytext-sm ds-m-sm">
             <li id="text-area-output__value">Value: <span id="text-area-output__value-text">&lt;empty&gt;</span></li>
             <li id="text-area-output__programmatic">Programmatic value: <span id="text-area-output__programmatic-text">&lt;empty&gt;</span></li>