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

package/dist/collection/components/01-base-components/ds-tabs/ds-tablist/ds-tablist.css

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-tablist__izAhxK {
+.ds-tablist__WN0Emr {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -12,7 +12,7 @@
   font-size: var(--ds-fontSize-16);
   position: relative;
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__scrollable {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__scrollable {
   display: flex;
   gap: var(--ds-spacing-2xSmall);
   overflow-x: auto;
@@ -20,17 +20,17 @@
   overscroll-behavior-x: contain;
   scrollbar-width: none;
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__scrollable:focus, .ds-tablist__izAhxK .ds-tablist__izAhxK__scrollable:focus-visible, .ds-tablist__izAhxK .ds-tablist__izAhxK__scrollable:-moz-focusring {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__scrollable:focus, .ds-tablist__WN0Emr .ds-tablist__WN0Emr__scrollable:focus-visible, .ds-tablist__WN0Emr .ds-tablist__WN0Emr__scrollable:-moz-focusring {
   outline: none;
   box-shadow: none;
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__scrollable--container {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__scrollable--container {
   background: linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) left/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) right/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) top/100% var(--ds-borderWidth-hairline) no-repeat, linear-gradient(var(--ds-bgColor-neutralLight), var(--ds-bgColor-neutralLight)) top/100% calc(100% - var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat;
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__scrollable--line {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__scrollable--line {
   background: linear-gradient(var(--ds-bgColor-transparent-onLight), var(--ds-bgColor-transparent-onLight)) top/100% calc(100% - 1 * var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat;
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__button {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -39,21 +39,21 @@
   justify-content: center;
   align-items: center;
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__button--backward {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button--backward {
   left: 0;
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__button--forward {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button--forward {
   right: 0;
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__button--container {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button--container {
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__button--line {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button--line {
   border-block-end: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__button--container.ds-tablist__izAhxK__button--backward::after {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button--container.ds-tablist__WN0Emr__button--backward::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -61,7 +61,7 @@
   box-shadow: var(--ds-shadow-overlay);
   clip-path: inset(0 calc(-1 * var(--ds-spacing-small)) 0 0);
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__button--container.ds-tablist__izAhxK__button--forward::after {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button--container.ds-tablist__WN0Emr__button--forward::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -69,10 +69,10 @@
   box-shadow: var(--ds-shadow-overlay);
   clip-path: inset(0 0 0 calc(-1 * var(--ds-spacing-small)));
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__button[hidden] {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button[hidden] {
   display: none;
 }
-.ds-tablist__izAhxK .ds-tablist__izAhxK__button__ds-button {
+.ds-tablist__WN0Emr .ds-tablist__WN0Emr__button__ds-button {
   width: 100%;
   height: 100%;
 }

package/dist/collection/components/01-base-components/ds-tabs/ds-tablist/ds-tablist.js

@@ -232,7 +232,7 @@ export class DsTablist extends Mixin(componentFactory('ds-tablist'), tabsFactory
                     "references": {
                         "DsTabChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-tabs/ds-tablist/ds-tablist.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-tabs/ds-tablist/ds-tablist.tsx",
                             "id": "src/components/01-base-components/ds-tabs/ds-tablist/ds-tablist.tsx::DsTabChangeEvent"
                         }
                     }

package/dist/collection/components/01-base-components/ds-tabs/ds-tabpanel/ds-tabpanel.css

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-tabpanel__izAhxK {
+.ds-tabpanel__WN0Emr {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -12,26 +12,26 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-tabpanel__izAhxK--container {
+.ds-tabpanel__WN0Emr--container {
   border-inline: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   border-block-end: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
 }
-.ds-tabpanel__izAhxK--padded {
+.ds-tabpanel__WN0Emr--padded {
   padding-block-start: var(--ds-spacing-small);
 }
 @media (min-width: 60rem) {
-  .ds-tabpanel__izAhxK--padded {
+  .ds-tabpanel__WN0Emr--padded {
     padding-block-start: var(--ds-spacing-medium);
   }
 }
-.ds-tabpanel__izAhxK--container.ds-tabpanel__izAhxK--padded {
+.ds-tabpanel__WN0Emr--container.ds-tabpanel__WN0Emr--padded {
   padding: var(--ds-spacing-small);
 }
 @media (min-width: 60rem) {
-  .ds-tabpanel__izAhxK--container.ds-tabpanel__izAhxK--padded {
+  .ds-tabpanel__WN0Emr--container.ds-tabpanel__WN0Emr--padded {
     padding: var(--ds-spacing-medium);
   }
 }
-.ds-tabpanel__izAhxK[hidden] {
+.ds-tabpanel__WN0Emr[hidden] {
   display: none;
 }

package/dist/collection/components/01-base-components/ds-tabs/ds-tabpanel/ds-tabpanel.js

@@ -13,10 +13,10 @@ export class DsTabpanel extends Mixin(componentFactory('ds-tabpanel'), tabsFacto
     dsPadded = true;
     render() {
         const baseClass = cx('ds-tabpanel');
-        return (h("div", { key: '5da4b946a5a972c53950a3309fddb6ae322062c9', id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: 'c69bf6f708992fe08bebd4ad8535bc6f48d46166', id: this.dsId, class: classNames(baseClass, {
                 [`${baseClass}--container`]: this.context?.variant === 'container',
                 [`${baseClass}--padded`]: this.dsPadded,
-            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, h("slot", { key: '9ca7af52273ba9138236c459aa7f1014fa32847c' })));
+            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, h("slot", { key: '091708ead106bcfb48cfeeac6f4162608b48e325' })));
     }
     static get is() { return "ds-tabpanel"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-tabs__izAhxK {
+.ds-tabs__WN0Emr {
   all: initial;
   display: revert;
   box-sizing: border-box;

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

@@ -39,7 +39,7 @@ export class DsTabs extends Mixin(componentFactory('ds-tabs', { stopRootTracking
     }
     render() {
         const baseClass = cx('ds-tabs');
-        return (h("div", { key: '4865050d1a88b75c46e7cd5c7a8ee49cee4f22aa', class: baseClass }, h("slot", { key: '444f0936859f4b4e1e31007b2d785f224f0c66de' })));
+        return (h("div", { key: '9ac888e3f6040c0f96795aa315848345b44338b0', class: baseClass }, h("slot", { key: '6a920af35a3df205d0e9aef5f843eca4e0ddb716' })));
     }
     static get is() { return "ds-tabs"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,24 +4,24 @@
   display: block;
 }
 
-.ds-tag__izAhxK {
+.ds-tag__WN0Emr {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-tag__izAhxK:focus-visible {
+.ds-tag__WN0Emr: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__izAhxK:focus-within {
+.ds-tag__WN0Emr: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__izAhxK {
+.ds-tag__WN0Emr {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -30,87 +30,87 @@
   padding: calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--default {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--default {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--default:has(.ds-tag__izAhxK__link:hover) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--default:has(.ds-tag__WN0Emr__link:hover) {
   background-color: var(--ds-bgColor-neutral-hover);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--default:has(.ds-tag__izAhxK__link:active) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--default:has(.ds-tag__WN0Emr__link:active) {
   background-color: var(--ds-bgColor-neutral-active);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--black {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--black {
   color: var(--ds-textColor-white);
   background-color: var(--ds-bgColor-black);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--black:has(.ds-tag__izAhxK__link:hover) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--black:has(.ds-tag__WN0Emr__link:hover) {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--black:has(.ds-tag__izAhxK__link:active) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--black:has(.ds-tag__WN0Emr__link:active) {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--white {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--white {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--white:has(.ds-tag__izAhxK__link:hover) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--white:has(.ds-tag__WN0Emr__link:hover) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--white:has(.ds-tag__izAhxK__link:active) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--white:has(.ds-tag__WN0Emr__link:active) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--info {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--info:has(.ds-tag__izAhxK__link:hover) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--info:has(.ds-tag__WN0Emr__link:hover) {
   background-color: var(--ds-bgColor-info-hover);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--info:has(.ds-tag__izAhxK__link:active) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--info:has(.ds-tag__WN0Emr__link:active) {
   background-color: var(--ds-bgColor-info-active);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--danger {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--danger:has(.ds-tag__izAhxK__link:hover) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--danger:has(.ds-tag__WN0Emr__link:hover) {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--danger:has(.ds-tag__izAhxK__link:active) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--danger:has(.ds-tag__WN0Emr__link:active) {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--attention {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--attention:has(.ds-tag__izAhxK__link:hover) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--attention:has(.ds-tag__WN0Emr__link:hover) {
   background-color: var(--ds-bgColor-attention-hover);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--attention:has(.ds-tag__izAhxK__link:active) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--attention:has(.ds-tag__WN0Emr__link:active) {
   background-color: var(--ds-bgColor-attention-active);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--success {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--success:has(.ds-tag__izAhxK__link:hover) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--success:has(.ds-tag__WN0Emr__link:hover) {
   background-color: var(--ds-bgColor-success-hover);
 }
-.ds-tag__izAhxK.ds-tag__izAhxK--success:has(.ds-tag__izAhxK__link:active) {
+.ds-tag__WN0Emr.ds-tag__WN0Emr--success:has(.ds-tag__WN0Emr__link:active) {
   background-color: var(--ds-bgColor-success-active);
 }
-.ds-tag__izAhxK__text {
+.ds-tag__WN0Emr__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__izAhxK__link {
+.ds-tag__WN0Emr__link {
   display: contents;
 }
-.ds-tag__izAhxK__link a:focus-visible {
+.ds-tag__WN0Emr__link a:focus-visible {
   box-shadow: none !important;
   outline: none !important;
   outline-offset: unset !important;

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

@@ -38,7 +38,7 @@ export class DsTag extends Mixin(componentFactory('ds-tag')) {
         const ariaHidden = this.dsAriaHidden ?? !this.dsHref;
         const role = this.dsRole ?? this.inheritedAttributes.role;
         const restAttributes = omit(this.inheritedAttributes, ['aria-hidden', 'role']);
-        return (h("div", { key: '66fea1337be74f8211f4bee653c0f41a232f2c93', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, h("slot", { key: 'f79c99343b3c9fd2ff9b51453476df223b367e66', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '6642519c5843c1db6e0cf4eca534f2fec1e664cb' }, 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: 'a1d7fb503ddee8587a2a48a85de77cf949e6a29f', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        return (h("div", { key: 'da1837357461b963d2e30a35e25ca5f0ae8b13a2', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, h("slot", { key: 'abbc64900bc1d8a75c90781ba526943369171eb2', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '673a87cab70dfd14a4e9fa4e498be96641cceb82' }, 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: '2e2603c51ba49f5791d59926283053107275de43', 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__izAhxK__tags {
+.ds-tag-group__WN0Emr__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

@@ -29,7 +29,7 @@ export class DsTagGroup extends Mixin(componentFactory('ds-tag-group', { stopRoo
         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: '55ef24fef882fadfa75932bdd902b37c5cf97954', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'aef6319ace51c14a71bb24c95569f80a6396c3aa', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '90982a6bed00261b799dff34df0d9bc322bb816e', name: "label" }), h("slot", { key: '28885d0da4c2f2745d513c85035a1994db53e8fe', name: "assistiveText" })), h("div", { key: '1b663d0905d0f258a458151ce714c08128745957', role: "list", class: `${baseClass}__tags` }, h("slot", { key: 'fc1ecce2421171e7e9d5e3310367d97ac0831d6c' }))));
+        return (h("div", { key: '10a9f91d8129b8f46d636d3283890afc24e91401', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'c040bfa3abd76bcfaa5994ff7b1c57d36e2b5ef7', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '8311510a194bb1c833e5ca9c5554f5ce92794d2b', name: "label" }), h("slot", { key: '9a3184d168ba1c0708276e25eab91c4cf84c40f9', name: "assistiveText" })), h("div", { key: '3127eee23cbbee234ab952de0bf7dfbe5f512290', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '250ac2c8e31205bb22f92640d1b0ab51689dd081' }))));
     }
     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

@@ -4,14 +4,15 @@
   display: block;
 }
 
-:host {
+:host(.ds-text-area__WN0Emr__host) {
   display: inline-block;
 }
-:host:has(.ds-text-area__izAhxK__container--full-width) {
+
+:host(.ds-text-area__WN0Emr__host--full-width) {
   width: 100%;
 }
 
-.ds-text-area__izAhxK {
+.ds-text-area__WN0Emr {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -19,17 +20,26 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-text-area__izAhxK__container:focus-visible {
+.ds-text-area__WN0Emr__field-wrapper {
+  display: inline-grid;
+  grid-template-columns: min-content;
+}
+.ds-text-area__WN0Emr__field-wrapper--full-width {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1fr;
+}
+.ds-text-area__WN0Emr__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__izAhxK__container:focus-within {
+.ds-text-area__WN0Emr__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__izAhxK__container {
+.ds-text-area__WN0Emr__container {
   box-sizing: border-box;
   display: inline-flex;
   position: relative;
@@ -39,74 +49,76 @@
   border-color: var(--ds-borderColor-default);
   padding: 0;
 }
-.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid {
+.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid:hover:not(.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid:focus-within) {
+.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid:hover:not(.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid.ds-text-area__izAhxK__container--active {
+.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid.ds-text-area__WN0Emr__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__izAhxK__container--valid {
+.ds-text-area__WN0Emr__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__izAhxK__container--valid:hover:not(.ds-text-area__izAhxK__container--valid:focus-within) {
+.ds-text-area__WN0Emr__container--valid:hover:not(.ds-text-area__WN0Emr__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__izAhxK__container--valid.ds-text-area__izAhxK__container--active {
+.ds-text-area__WN0Emr__container--valid.ds-text-area__WN0Emr__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__izAhxK__container--readonly, .ds-text-area__izAhxK__container--disabled {
+.ds-text-area__WN0Emr__container--readonly, .ds-text-area__WN0Emr__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-area__izAhxK__container:focus-within:not(.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--valid, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--readonly) {
+.ds-text-area__WN0Emr__container:focus-within:not(.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--valid, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-area__izAhxK__container:hover:not(.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--disabled, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--readonly, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--active, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--valid, .ds-text-area__izAhxK__container:focus-within) {
+.ds-text-area__WN0Emr__container:hover:not(.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--disabled, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--readonly, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--active, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--valid, .ds-text-area__WN0Emr__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-area__izAhxK__container.active:not(.ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--disabled, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--readonly, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--invalid, .ds-text-area__izAhxK__container.ds-text-area__izAhxK__container--valid) {
+.ds-text-area__WN0Emr__container.active:not(.ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--disabled, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--readonly, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--invalid, .ds-text-area__WN0Emr__container.ds-text-area__WN0Emr__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-area__izAhxK__container--full-width {
+.ds-text-area__WN0Emr__container--full-width {
   width: 100%;
 }
-.ds-text-area__izAhxK__external-button,
-.ds-text-area__izAhxK ::slotted([slot=suffix]) {
+.ds-text-area__WN0Emr__external-button {
   margin-inline-start: var(--ds-spacing-xSmall);
   align-self: flex-start;
 }
-.ds-text-area__izAhxK__validity-container {
+.ds-text-area__WN0Emr .ds-text-area__WN0Emr ::slotted([slot=suffix]) {
+  margin-inline-start: var(--ds-spacing-xSmall);
+  align-self: flex-start;
+}
+.ds-text-area__WN0Emr__validity-container {
   align-items: center;
-  width: 100%;
   font-size: var(--ds-fontSize-14);
 }
-.ds-text-area__izAhxK__validity-container--has-character-limit {
+.ds-text-area__WN0Emr__validity-container--has-character-limit {
   display: flex;
   gap: var(--ds-spacing-small);
   justify-content: space-between;
 }
-.ds-text-area__izAhxK__character-count {
+.ds-text-area__WN0Emr__character-count {
   margin-top: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__izAhxK__character-count--over-limit {
+.ds-text-area__WN0Emr__character-count--over-limit {
   color: var(--ds-textColor-danger);
 }
-.ds-text-area__izAhxK__character-count > small {
+.ds-text-area__WN0Emr .ds-text-area__WN0Emr__character-count > small {
   display: inline-block;
   font-size: inherit;
 }
-.ds-text-area__izAhxK__textarea {
+.ds-text-area__WN0Emr__textarea {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -121,7 +133,7 @@
   border: none;
   padding: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__izAhxK__textarea::placeholder {
+.ds-text-area__WN0Emr__textarea::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -129,33 +141,32 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-area__izAhxK__textarea:disabled {
+.ds-text-area__WN0Emr__textarea:disabled {
   color: var(--ds-textColor-disabled-onLight);
-  background-color: var(--ds-bgColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-text-area__izAhxK__textarea:disabled::placeholder {
+.ds-text-area__WN0Emr__textarea:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-area__izAhxK__textarea:focus {
+.ds-text-area__WN0Emr__textarea:focus {
   outline: none;
   border: none;
 }
-.ds-text-area__izAhxK__textarea--resize-both {
+.ds-text-area__WN0Emr__textarea--resize-both {
   resize: both;
 }
-.ds-text-area__izAhxK__textarea--resize-auto, .ds-text-area__izAhxK__textarea--resize-none {
+.ds-text-area__WN0Emr__textarea--resize-auto, .ds-text-area__WN0Emr__textarea--resize-none {
   resize: none;
 }
-.ds-text-area__izAhxK__textarea--resize-auto {
+.ds-text-area__WN0Emr__textarea--resize-auto {
   overflow: hidden;
 }
-.ds-text-area__izAhxK__textarea--resize-vertical {
+.ds-text-area__WN0Emr__textarea--resize-vertical {
   resize: vertical;
 }
-.ds-text-area__izAhxK__textarea--resize-horizontal {
+.ds-text-area__WN0Emr__textarea--resize-horizontal {
   resize: horizontal;
 }
-.ds-text-area__izAhxK__textarea--full-width {
+.ds-text-area__WN0Emr__textarea--full-width {
   width: 100%;
 }

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

@@ -1,4 +1,4 @@
-import { Fragment, h, forceUpdate, Mixin } from "@stencil/core";
+import { h, Host, forceUpdate, Mixin } from "@stencil/core";
 import classNames from "classnames";
 import { characterOverage, charactersRemaining, getOptionalText, getRequiredText, tooLong, validityMessage, } from "../../../utils/controls/controlUtils";
 import { debounce, declareComponentDependencies, ifDefined, transformTagName } from "../../../utils/utils";
@@ -201,12 +201,17 @@ export class DsTextArea extends Mixin(componentFactory('ds-text-area', { stopRoo
         const DsControlLabel = transformTagName('ds-control-label', 'ds-text-area', this.el);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-text-area', this.el);
         const baseClass = cx('ds-text-area');
+        const hostClass = `${baseClass}__host`;
         const containerClass = `${baseClass}__container`;
         const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
         const ariaDescribedby = this.dsAriaDescribedby || attrAriaDescribedby;
-        return (h(Fragment, { key: 'ed1a7d02187a18af78c3bc87673d014d26fd9cdb' }, h(DsControlLabel, { key: 'fad5d3bd0dcceaff28c8a8bbf86015ecdf2ffc7d', dsHtmlFor: this.dsId, dsLabel: this.getLabelText(), dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId }, h("slot", { key: '073574ee606ac50f707783885a310df68185385d', name: "label" }), h("slot", { key: '8f4f695fdab50a7ce4f17ed61f82c453075c225f', name: "assistiveText" })), h("div", { key: '8bd6a49b71436cb13833a9235a66ffe1d4ee13d5', onMouseDown: () => (this.textareaActive = true), onMouseUp: () => (this.textareaActive = false), onClick: () => this.handleTextareaContainerClick(), class: classNames(containerClass, {
+        return (h(Host, { key: '8379acbe317cbc6dbcf396c61d652e79ce76baac', class: classNames(hostClass, {
+                [`${hostClass}--full-width`]: this.dsFullWidth,
+            }) }, h(DsControlLabel, { key: '7056dd1140e130f5e58cb3247fbf7f1e1071b927', dsHtmlFor: this.dsId, dsLabel: this.getLabelText(), dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId }, h("slot", { key: 'bc99bfe69236ebb51a2d2513e0b4b25ce1758d99', name: "label" }), h("slot", { key: '21b433e11665789c03762665c947a2f61bee9f27', name: "assistiveText" })), h("div", { key: '161a1ddfbee320bb6364d7dbf2180f4ed4414573', class: classNames(`${baseClass}__field-wrapper`, {
+                [`${baseClass}__field-wrapper--full-width`]: this.dsFullWidth,
+            }) }, h("div", { key: '469b03e54904727d4eca40a96565121f309d5848', 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,
@@ -214,7 +219,7 @@ export class DsTextArea extends Mixin(componentFactory('ds-text-area', { stopRoo
                 [`${containerClass}--focus`]: this.hasFocus,
                 [`${containerClass}--active`]: !!this.textareaActive,
                 [`${containerClass}--full-width`]: this.dsFullWidth,
-            }) }, h("textarea", { key: '599131f06ba0c5f6a73c998da35308f7f87b7986', ref: el => (this.textareaElement = el), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, value: 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: 'fc7ef04350e0ed52387ace9b89c83743b9b0b8d3', ref: el => (this.textareaElement = el), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, value: 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({
@@ -222,11 +227,11 @@ export class DsTextArea extends Mixin(componentFactory('ds-text-area', { stopRoo
                     [this.visuallyHiddenAssistiveTextId]: !!this.dsHiddenAssistiveText,
                     [this.errorTextId]: !!this.dsErrorText,
                     [this.successTextId]: !!this.dsSuccessText,
-                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes })), h("div", { key: '4c4ea6b123743bb54548d7d59399e01210eb296c', class: classNames(`${baseClass}__validity-container`, {
+                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes })), h("div", { key: '1240d2f821b7138c1aedff907a44e547995596df', class: classNames(`${baseClass}__validity-container`, {
                 [`${baseClass}__validity-container--has-character-limit`]: !!this.dsCharacterLimit,
-            }) }, h("slot", { key: '214e546b99ec5c1717aae6d142bb9f4f6d5de87b', name: "validity" }, h(DsInputValidity, { key: '016ad213d61bd51cf3772b899dd48494242dc57c', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }, !!this.dsCharacterLimit && h(DsVisuallyHidden, { key: '3bc2ac639ffb68213d5e8348f7c6ea727531a5f7', dsTag: "span" }, this.hiddenCharacterCountText)), h(DsInputValidity, { key: 'a68ed6af43e4e42d9c1fac97c46a3f2832aef2ae', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsAriaLive: "polite" })), !!this.dsCharacterLimit && (h("div", { key: '372900754c09d0896f1ab6e0e1aec64636692ba3', class: classNames(`${baseClass}__character-count`, {
+            }) }, h("slot", { key: '59f38b187e813f4744aa9a40040d77baa7263c6d', name: "validity" }, h(DsInputValidity, { key: 'c68a14d9b3398e7bc7fcf7c7208347eb8c865142', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }, !!this.dsCharacterLimit && h(DsVisuallyHidden, { key: '3204b7cda1a04c4d980f27037e9036d9f18808f7', dsTag: "span" }, this.hiddenCharacterCountText)), h(DsInputValidity, { key: 'b1b3b261382f33f3b7e8d4d2915ce31c2c877d3e', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsAriaLive: "polite" })), this.dsCharacterLimit && (h("div", { key: '7d6f6100b90aab2976f47168cb71033a26e9b834', class: classNames(`${baseClass}__character-count`, {
                 [`${baseClass}__character-count--over-limit`]: this.characterCount > this.dsCharacterLimit,
-            }) }, h("small", { key: 'e0c8f8e73fc0d16600007a0336e347454fd9cad6' }, this.characterCount, "/", this.dsCharacterLimit))))));
+            }) }, h("small", { key: '56763f551f9566d42bd4e04b6cece86c3c72507d' }, this.characterCount, "/", this.dsCharacterLimit)))))));
     }
     static get is() { return "ds-text-area"; }
     static get encapsulation() { return "scoped"; }
@@ -679,7 +684,7 @@ export class DsTextArea extends Mixin(componentFactory('ds-text-area', { stopRoo
                         },
                         "DsTextAreaEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-text-area/ds-text-area.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-text-area/ds-text-area.tsx",
                             "id": "src/components/01-base-components/ds-text-area/ds-text-area.tsx::DsTextAreaEvent"
                         }
                     }
@@ -700,7 +705,7 @@ export class DsTextArea extends Mixin(componentFactory('ds-text-area', { stopRoo
                     "references": {
                         "DsTextAreaEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-text-area/ds-text-area.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-text-area/ds-text-area.tsx",
                             "id": "src/components/01-base-components/ds-text-area/ds-text-area.tsx::DsTextAreaEvent"
                         },
                         "InputEvent": {