@scania/tegel 1.54.0 → 1.55.0

package/dist/collection/components/accordion/accordion-item/accordion-item.css

@@ -1,3 +1,4 @@
+/* Typography Usage mixins */
 .tds-accordion-item {
   box-sizing: border-box;
   list-style: none;
@@ -8,7 +9,7 @@
 .tds-accordion-item * {
   box-sizing: border-box;
 }
-.tds-accordion-item:hover {
+.tds-accordion-item:hover:not(.disabled) {
   background-color: var(--tds-accordion-background-hover);
   border-bottom: 1px solid var(--tds-accordion-border-hover);
   border-top: 1px solid var(--tds-accordion-border-hover);
@@ -24,12 +25,16 @@
 .tds-accordion-item button.tds-accordion-header-icon-start,
 .tds-accordion-item button.tds-accordion-header-icon-end {
   box-sizing: border-box;
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
   cursor: pointer;
   display: flex;
   align-items: center;
   width: 100%;
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
   padding: var(--tds-spacing-element-16);
   background-color: var(--tds-accordion-background);
 }
@@ -57,11 +62,15 @@
   flex-grow: 2;
 }
 .tds-accordion-item .tds-accordion-panel {
+  font-family: var(--detail-03-font-family);
+  font-size: var(--detail-03-font-size);
+  line-height: var(--detail-03-line-height);
+  font-weight: var(--detail-03-font-weight);
+  letter-spacing: var(--detail-03-letter-spacing);
+  text-transform: var(--detail-03-text-transform);
   cursor: default;
   padding: var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);
   display: none;
-  font: var(--tds-detail-03);
-  letter-spacing: var(--tds-detail-03-ls);
 }
 .tds-accordion-item .tds-accordion-panel p {
   margin: 0;

package/dist/collection/components/accordion/accordion.css

@@ -31,11 +31,11 @@
   border-color: transparent;
 }
 
-:host(:last-child) {
+:host {
   border-bottom: 1px solid var(--tds-accordion-border);
 }
 
-:host(.hide-last-border:last-child) {
+:host(.hide-last-border) {
   border-bottom: none;
 }
 

package/dist/collection/components/block/block.css

@@ -1,11 +1,16 @@
+/* Typography Usage mixins */
 .tds-block {
   box-sizing: border-box;
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
   color: var(--tds-block-color);
   background-color: var(--tds-block-background);
-  border-radius: 4px;
+  border-radius: var(--tds-block-border-radius);
   padding: 16px;
-  font: var(--tds-body-01);
-  letter-spacing: var(--tds-body-01-ls);
 }
 .tds-block * {
   box-sizing: border-box;

package/dist/collection/components/icon/tratonIconsArray.js

@@ -1,5 +1,5 @@
 export const iconsCollection =
-  '[{"name":"arrow_diagonal","definition":"M24 5.75H10v2h12.59L6 24.34l1.41 1.41L24 9.16v12.59h2v-16h-2Z","viewbox":"0 0 32 32"},{"name":"arrow_down","definition":"M24.59 16.59 17 24.17V4h-2v20.17L7.41 16.6 6 18l10 10 10-10-1.41-1.41Z","viewbox":"0 0 32 32"},{"name":"arrow_left","definition":"m4 16 10 10 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16Z","viewbox":"0 0 32 32"},{"name":"arrow_right","definition":"M28 16 18 6l-1.41 1.41L24.17 15H4v2h20.17l-7.58 7.59L18 26l10-10Z","viewbox":"0 0 32 32"},{"name":"arrow_up","definition":"M7.41 15.41 15 7.83V28h2V7.83l7.59 7.58L26 14 16 4 6 14l1.41 1.41Z","viewbox":"0 0 32 32"},{"name":"bento","definition":"M6 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z","viewbox":"0 0 32 32"},{"name":"burger","definition":"M30 6H2v2h28V6Zm0 9H2v2h28v-2Zm0 9H2v2h28v-2Z","viewbox":"0 0 32 32"},{"name":"calendar","definition":"M26.47 4H22V2h-2v2h-8V2h-2v2H5.53L4 7v18l1.53 3h20.94L28 25V7l-1.53-3ZM10 6v2h2V6h8v2h2V6h3.25L26 7.48V10H6V7.48L6.75 6H10ZM6.75 26 6 24.52V12h20v12.52L25.25 26H6.75Z","viewbox":"0 0 32 32"},{"name":"chevron_down","definition":"m7.13 10.29-1.41 1.42 10 10 10-10-1.41-1.42-8.59 8.59-8.59-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_left","definition":"M21.41 7.41 20 6 10 16l10 10 1.41-1.41L12.83 16l8.58-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_right","definition":"M10.59 7.41 12 6l10 10-10 10-1.41-1.41L19.17 16 10.6 7.41Z","viewbox":"0 0 32 32"},{"name":"chevron_up","definition":"m24.89 21.7 1.4-1.4-10-10-10 10 1.42 1.4 8.59-8.58 8.59 8.58Z","viewbox":"0 0 32 32"},{"name":"cross","definition":"M25 8.41 23.59 7 16 14.59 8.41 7 7 8.41 14.59 16 7 23.59 8.41 25 16 17.41 23.59 25 25 23.59 17.41 16 25 8.41Z","viewbox":"0 0 32 32"},{"name":"edit","definition":"m23 3-6 6L4.13 21.87 3 29l7.13-1.13L23 15l6-6-6-6ZM9.18 26l-3.77.6.59-3.77 12.41-12.42 3.17 3.18L9.18 26ZM23 12.17 19.83 9 23 5.83 26.17 9 23 12.17Z","viewbox":"0 0 32 32"},{"name":"error","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 9h-2v10h2V9Zm0 12h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"info","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 13h-2v10h2V13Zm0-4h-2v2h2V9Z","viewbox":"0 0 32 32"},{"name":"minus","definition":"M28 15H4v2h24v-2Z","viewbox":"0 0 32 32"},{"name":"notification","definition":"M25 19.55V13a9 9 0 0 0-8-8.94V2h-2v2.06A9 9 0 0 0 7 13v6.55L5 21v5h22v-5l-2-1.45ZM25 24H7v-1.98l.03-.02L9 20.57V13a7 7 0 0 1 14 0v7.57L24.97 22l.03.02V24Zm-5 4h-8v2h8v-2Z","viewbox":"0 0 32 32"},{"name":"plus","definition":"M28 15H17V4h-2v11H4v2h11v11h2V17h11v-2Z","viewbox":"0 0 32 32"},{"name":"print","definition":"M28 9h-3V3H7v6H4l-2 3.93V23h5v6h18v-6h5V12.93L28 9ZM9 5h14v4H9V5Zm14 22H9v-9h14v9Zm5-6h-3v-5H7v5H4v-7.59L5.23 11h21.54L28 13.41V21Z","viewbox":"0 0 32 32"},{"name":"refresh","definition":"M19 10h4.98C22.11 7.5 19.2 6 16 6 10.49 6 6 10.49 6 16H4a12.01 12.01 0 0 1 21-7.94V4h2v8h-8v-2Zm-6 12H8.02c1.87 2.5 4.79 4 7.98 4 5.51 0 10-4.49 10-10h2a12.01 12.01 0 0 1-21 7.93V28H5v-8h8v2Z","viewbox":"0 0 32 32"},{"name":"search","definition":"m28 26.59-6.26-6.27A10.01 10.01 0 1 0 4 14a10.01 10.01 0 0 0 16.32 7.74L26.6 28l1.4-1.41ZM14 22a8 8 0 0 1 0-16 8 8 0 0 1 0 16Z","viewbox":"0 0 32 32"},{"name":"share","definition":"M25.1 21a4.08 4.08 0 0 0-3.15 1.48L10.83 16.9a3.75 3.75 0 0 0 .02-1.74l11.12-5.61a4.05 4.05 0 0 0 6.91-1.15 3.96 3.96 0 0 0-1.76-4.85 4.08 4.08 0 0 0-5.13.9 3.97 3.97 0 0 0-.88 3.29L9.93 13.36A4.05 4.05 0 0 0 2.86 16a3.97 3.97 0 0 0 2.61 3.74 4.09 4.09 0 0 0 4.46-1.09l11.2 5.65a3.97 3.97 0 0 0 2.42 4.38 4.08 4.08 0 0 0 4.4-.86A3.99 3.99 0 0 0 25.1 21Zm0-16a2.04 2.04 0 0 1 1.86 1.24 1.98 1.98 0 0 1-.44 2.18 2.03 2.03 0 0 1-3.45-1.41 2.03 2.03 0 0 1 2.02-2ZM6.9 18a2.04 2.04 0 0 1-1.87-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 8.92 16a2.03 2.03 0 0 1-2.02 2Zm18.2 9a2.04 2.04 0 0 1-1.88-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 27.11 25c0 .53-.2 1.04-.59 1.42-.38.37-.9.58-1.43.58Z","viewbox":"0 0 32 32"},{"name":"sorting","definition":"M27.6 20.6 24 24.2V8h-2v16.2l-3.6-3.6L17 22l6 6 6-6-1.4-1.4ZM9 4l-6 6 1.4 1.4L8 7.8V24h2V7.8l3.6 3.6L15 10 9 4Z","viewbox":"0 0 32 32"},{"name":"star","definition":"m30.07 13.39-.63-1.87-8.89-.87L17 2h-2l-3.55 8.65-8.89.87-.63 1.87 6.75 6.24-2 9.23L8.33 30 16 25.21 23.67 30l1.63-1.14-2-9.23 6.77-6.24Zm-13 10.13L16 22.85l-1.06.67-5.83 3.64 1.52-7.11.24-1.12-.87-.77-5.21-4.85 6.86-.67 1.2-.11.46-1.12L16 4.83l2.69 6.58.46 1.12 1.2.11 6.86.67L22 18.16l-.83.77.24 1.12 1.52 7.11-5.86-3.64Z","viewbox":"0 0 32 32"},{"name":"tick","definition":"m28 9-1.41-1.41L13 21.17 5.41 13.6 4 15l9 9L28 9Z","viewbox":"0 0 32 32"},{"name":"truck","definition":"M22 8H10v2h12V8ZM30 8h-4V6.52L23.7 2H8.3L6 6.52V8H2v2h4v20h5.2l1.03-2h7.55l1.02 2H26V10h4V8Zm-7.98 20L21 26H11l-1.02 2H8v-4h3l-1.02-2H8V7l1.53-3h12.94L24 7v15h-1.98L21 24h3v4h-1.98ZM23 16H9l4.08 8h5.84L23 16Zm-5.3 6h-3.4l-2.04-4h7.48l-2.04 4Z","viewbox":"0 0 32 32"},{"name":"warning","definition":"M27.68 23 18 4h-4L4.32 23l-.32.62V28h24v-4.38l-.32-.62ZM6 26v-1.9L15.22 6h1.56L26 24.1V26H6ZM17 11h-2v9h2v-9Zm0 11h-2v2h2v-2Z","viewbox":"0 0 32 32"}]';
+  '[{"name":"arrow_diagonal","definition":"M24 5.75H10v2h12.59L6 24.34l1.41 1.41L24 9.16v12.59h2v-16h-2Z","viewbox":"0 0 32 32"},{"name":"arrow_down","definition":"M24.59 16.59 17 24.17V4h-2v20.17L7.41 16.6 6 18l10 10 10-10-1.41-1.41Z","viewbox":"0 0 32 32"},{"name":"arrow_left","definition":"m4 16 10 10 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16Z","viewbox":"0 0 32 32"},{"name":"arrow_right","definition":"M28 16 18 6l-1.41 1.41L24.17 15H4v2h20.17l-7.58 7.59L18 26l10-10Z","viewbox":"0 0 32 32"},{"name":"arrow_up","definition":"M7.41 15.41 15 7.83V28h2V7.83l7.59 7.58L26 14 16 4 6 14l1.41 1.41Z","viewbox":"0 0 32 32"},{"name":"bento","definition":"M6 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z","viewbox":"0 0 32 32"},{"name":"burger","definition":"M30 6H2v2h28V6Zm0 9H2v2h28v-2Zm0 9H2v2h28v-2Z","viewbox":"0 0 32 32"},{"name":"calendar","definition":"M26.47 4H22V2h-2v2h-8V2h-2v2H5.53L4 7v18l1.53 3h20.94L28 25V7l-1.53-3ZM10 6v2h2V6h8v2h2V6h3.25L26 7.48V10H6V7.48L6.75 6H10ZM6.75 26 6 24.52V12h20v12.52L25.25 26H6.75Z","viewbox":"0 0 32 32"},{"name":"chevron_down","definition":"m7.13 10.29-1.41 1.42 10 10 10-10-1.41-1.42-8.59 8.59-8.59-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_left","definition":"M21.41 7.41 20 6 10 16l10 10 1.41-1.41L12.83 16l8.58-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_right","definition":"M10.59 7.41 12 6l10 10-10 10-1.41-1.41L19.17 16 10.6 7.41Z","viewbox":"0 0 32 32"},{"name":"chevron_up","definition":"m24.89 21.7 1.4-1.4-10-10-10 10 1.42 1.4 8.59-8.58 8.59 8.58Z","viewbox":"0 0 32 32"},{"name":"cross","definition":"M25 8.41 23.59 7 16 14.59 8.41 7 7 8.41 14.59 16 7 23.59 8.41 25 16 17.41 23.59 25 25 23.59 17.41 16 25 8.41Z","viewbox":"0 0 32 32"},{"name":"edit_inactive","definition":"M12.25 16.58 6 22.83l-.59 3.77 3.77-.6 6.24-6.25 1.42 1.41-6.71 6.71L3 29l1.13-7.13 6.7-6.7zm15.77 9.93-.7.7-.71.71L4.08 5.4 5.5 3.98zM29 9l-7.48 7.48-1.42-1.41 1.48-1.48-3.17-3.18-1.48 1.48-1.41-1.4L23 3zm-9.17 0L23 12.17 26.17 9 23 5.83z","viewbox":"0 0 32 32"},{"name":"edit","definition":"m23 3-6 6L4.13 21.87 3 29l7.13-1.13L23 15l6-6-6-6ZM9.18 26l-3.77.6.59-3.77 12.41-12.42 3.17 3.18L9.18 26ZM23 12.17 19.83 9 23 5.83 26.17 9 23 12.17Z","viewbox":"0 0 32 32"},{"name":"error","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 9h-2v10h2V9Zm0 12h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"info","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 13h-2v10h2V13Zm0-4h-2v2h2V9Z","viewbox":"0 0 32 32"},{"name":"minus","definition":"M28 15H4v2h24v-2Z","viewbox":"0 0 32 32"},{"name":"notification","definition":"M25 19.55V13a9 9 0 0 0-8-8.94V2h-2v2.06A9 9 0 0 0 7 13v6.55L5 21v5h22v-5l-2-1.45ZM25 24H7v-1.98l.03-.02L9 20.57V13a7 7 0 0 1 14 0v7.57L24.97 22l.03.02V24Zm-5 4h-8v2h8v-2Z","viewbox":"0 0 32 32"},{"name":"placeholder","definition":"M4 10H2v4h2zm0 8H2v4h2zm26-8h-2v4h2zm0 8h-2v4h2zM14 28h-4v2h4zm8 0h-4v2h4zM14 2h-4v2h4zm8 0h-4v2h4zM2 6h2V4h2V2H2zm2 20H2v4h4v-2H4zm24 2h-2v2h4v-4h-2zM26 2v2h2v2h2V2z","viewbox":"0 0 32 32"},{"name":"plus","definition":"M28 15H17V4h-2v11H4v2h11v11h2V17h11v-2Z","viewbox":"0 0 32 32"},{"name":"print","definition":"M28 9h-3V3H7v6H4l-2 3.93V23h5v6h18v-6h5V12.93L28 9ZM9 5h14v4H9V5Zm14 22H9v-9h14v9Zm5-6h-3v-5H7v5H4v-7.59L5.23 11h21.54L28 13.41V21Z","viewbox":"0 0 32 32"},{"name":"refresh","definition":"M19 10h4.98C22.11 7.5 19.2 6 16 6 10.49 6 6 10.49 6 16H4a12.01 12.01 0 0 1 21-7.94V4h2v8h-8v-2Zm-6 12H8.02c1.87 2.5 4.79 4 7.98 4 5.51 0 10-4.49 10-10h2a12.01 12.01 0 0 1-21 7.93V28H5v-8h8v2Z","viewbox":"0 0 32 32"},{"name":"search","definition":"m28 26.59-6.26-6.27A10.01 10.01 0 1 0 4 14a10.01 10.01 0 0 0 16.32 7.74L26.6 28l1.4-1.41ZM14 22a8 8 0 0 1 0-16 8 8 0 0 1 0 16Z","viewbox":"0 0 32 32"},{"name":"share","definition":"M25.1 21a4.08 4.08 0 0 0-3.15 1.48L10.83 16.9a3.75 3.75 0 0 0 .02-1.74l11.12-5.61a4.05 4.05 0 0 0 6.91-1.15 3.96 3.96 0 0 0-1.76-4.85 4.08 4.08 0 0 0-5.13.9 3.97 3.97 0 0 0-.88 3.29L9.93 13.36A4.05 4.05 0 0 0 2.86 16a3.97 3.97 0 0 0 2.61 3.74 4.09 4.09 0 0 0 4.46-1.09l11.2 5.65a3.97 3.97 0 0 0 2.42 4.38 4.08 4.08 0 0 0 4.4-.86A3.99 3.99 0 0 0 25.1 21Zm0-16a2.04 2.04 0 0 1 1.86 1.24 1.98 1.98 0 0 1-.44 2.18 2.03 2.03 0 0 1-3.45-1.41 2.03 2.03 0 0 1 2.02-2ZM6.9 18a2.04 2.04 0 0 1-1.87-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 8.92 16a2.03 2.03 0 0 1-2.02 2Zm18.2 9a2.04 2.04 0 0 1-1.88-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 27.11 25c0 .53-.2 1.04-.59 1.42-.38.37-.9.58-1.43.58Z","viewbox":"0 0 32 32"},{"name":"sorting","definition":"M27.6 20.6 24 24.2V8h-2v16.2l-3.6-3.6L17 22l6 6 6-6-1.4-1.4ZM9 4l-6 6 1.4 1.4L8 7.8V24h2V7.8l3.6 3.6L15 10 9 4Z","viewbox":"0 0 32 32"},{"name":"star","definition":"m30.07 13.39-.63-1.87-8.89-.87L17 2h-2l-3.55 8.65-8.89.87-.63 1.87 6.75 6.24-2 9.23L8.33 30 16 25.21 23.67 30l1.63-1.14-2-9.23 6.77-6.24Zm-13 10.13L16 22.85l-1.06.67-5.83 3.64 1.52-7.11.24-1.12-.87-.77-5.21-4.85 6.86-.67 1.2-.11.46-1.12L16 4.83l2.69 6.58.46 1.12 1.2.11 6.86.67L22 18.16l-.83.77.24 1.12 1.52 7.11-5.86-3.64Z","viewbox":"0 0 32 32"},{"name":"tick","definition":"m28 9-1.41-1.41L13 21.17 5.41 13.6 4 15l9 9L28 9Z","viewbox":"0 0 32 32"},{"name":"truck","definition":"M22 8H10v2h12V8ZM30 8h-4V6.52L23.7 2H8.3L6 6.52V8H2v2h4v20h5.2l1.03-2h7.55l1.02 2H26V10h4V8Zm-7.98 20L21 26H11l-1.02 2H8v-4h3l-1.02-2H8V7l1.53-3h12.94L24 7v15h-1.98L21 24h3v4h-1.98ZM23 16H9l4.08 8h5.84L23 16Zm-5.3 6h-3.4l-2.04-4h7.48l-2.04 4Z","viewbox":"0 0 32 32"},{"name":"warning","definition":"M27.68 23 18 4h-4L4.32 23l-.32.62V28h24v-4.38l-.32-.62ZM6 26v-1.9L15.22 6h1.56L26 24.1V26H6ZM17 11h-2v9h2v-9Zm0 11h-2v2h2v-2Z","viewbox":"0 0 32 32"}]';
 export const iconsNames = [
   'arrow_diagonal',
   'arrow_down',
@@ -14,11 +14,13 @@ export const iconsNames = [
   'chevron_right',
   'chevron_up',
   'cross',
+  'edit_inactive',
   'edit',
   'error',
   'info',
   'minus',
   'notification',
+  'placeholder',
   'plus',
   'print',
   'refresh',

package/dist/collection/components/text-field/text-field.css

@@ -1,6 +1,7 @@
+/* Typography Usage mixins */
 .text-field-input-lg {
   all: unset;
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
   width: 100%;
   box-sizing: border-box;
   margin: 0;
@@ -9,7 +10,12 @@
   height: 100%;
   color: var(--tds-text-field-color);
   background-color: var(--tds-text-field-background);
-  font: var(--tds-detail-02);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
 }
@@ -31,7 +37,7 @@
 
 .text-field-input-md {
   all: unset;
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
   width: 100%;
   box-sizing: border-box;
   margin: 0;
@@ -40,7 +46,12 @@
   height: 100%;
   color: var(--tds-text-field-color);
   background-color: var(--tds-text-field-background);
-  font: var(--tds-detail-02);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-16);
 }
@@ -62,7 +73,7 @@
 
 .text-field-input-sm {
   all: unset;
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
   width: 100%;
   box-sizing: border-box;
   margin: 0;
@@ -71,7 +82,12 @@
   height: 100%;
   color: var(--tds-text-field-color);
   background-color: var(--tds-text-field-background);
-  font: var(--tds-detail-02);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-16);
 }
@@ -92,18 +108,19 @@
 }
 
 .text-field-container {
-  border-radius: 4px 4px 0 0;
   display: flex;
   position: relative;
   height: 56px;
   box-sizing: border-box;
   background-color: var(--tds-text-field-background);
-  border-bottom: 1px solid var(--tds-text-field-border-bottom);
-  border-top: 1px solid transparent;
-  transition: border-bottom-color 200ms ease;
+  border-style: solid;
+  border-color: var(--tds-text-field-border-bottom);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  transition: border-color 200ms ease;
 }
 .text-field-container:hover {
-  border-bottom-color: var(--tds-text-field-border-bottom-hover);
+  border-color: var(--tds-text-field-border-bottom-hover);
 }
 .form-text-field-md .text-field-container {
   height: 48px;
@@ -112,8 +129,10 @@
   height: 40px;
 }
 .text-field-container:focus-within {
-  border: 2px solid var(--component--focus-ring-color-strong);
-  margin: 0 -2px;
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
 
 .text-field-input-container {
@@ -127,7 +146,12 @@
 }
 
 .text-field-label-outside > * {
-  font: var(--tds-detail-05);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   letter-spacing: var(--tds-detail-05-ls);
   display: block;
   margin-bottom: var(--tds-spacing-element-8);
@@ -135,7 +159,12 @@
 }
 
 .text-field-label-inside {
-  font: var(--tds-detail-02);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   letter-spacing: var(--tds-detail-02-ls);
   position: absolute;
   pointer-events: none;
@@ -203,26 +232,46 @@
   color: var(--tds-text-field-placeholder);
 }
 .form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-sm ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-sm ~ .text-field-label-inside {
-  font: var(--tds-detail-07);
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
   letter-spacing: var(--tds-detail-07-ls);
   transition: 0.1s ease all;
   top: 8px;
 }
 .form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-md ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-md ~ .text-field-label-inside {
-  font: var(--tds-detail-07);
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
   letter-spacing: var(--tds-detail-07-ls);
   transition: 0.1s ease all;
   top: 8px;
 }
 .form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-lg ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-lg ~ .text-field-label-inside {
-  font: var(--tds-detail-07);
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
   letter-spacing: var(--tds-detail-07-ls);
   transition: 0.1s ease all;
   top: 12px;
 }
 
 .text-field-helper {
-  font: var(--tds-detail-05);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   letter-spacing: var(--tds-detail-05-ls);
   display: flex;
   gap: 8px;
@@ -235,16 +284,15 @@
   margin-left: auto;
 }
 
-.form-text-field-disabled .text-field-container {
+.form-text-field-disabled {
   cursor: not-allowed;
-  border-bottom-color: transparent;
 }
-.form-text-field-disabled .text-field-slot-wrap-prefix > *,
-.form-text-field-disabled .text-field-slot-wrap-suffix > * {
-  color: var(--tds-text-field-ps-color-disabled);
+.form-text-field-disabled .text-field-container,
+.form-text-field-disabled .text-field-label-outside {
+  opacity: var(--tds-text-field-opacity-disabled);
 }
-.form-text-field-disabled .text-field-label-outside > * {
-  color: var(--tds-text-field-label-disabled);
+.form-text-field-disabled .text-field-container {
+  cursor: not-allowed;
 }
 .form-text-field-disabled .text-field-helper {
   color: var(--tds-text-field-helper-disabled);
@@ -268,7 +316,7 @@
   cursor: default;
 }
 .form-text-field-readonly .text-field-container {
-  border-bottom-color: var(--tds-text-field-border-bottom-readonly);
+  border-color: var(--tds-text-field-border-bottom-readonly);
 }
 .form-text-field-readonly .text-field-icon__readonly {
   display: block;
@@ -285,14 +333,14 @@
 }
 
 .form-text-field-success:not(.form-text-field-readonly) .text-field-container {
-  border-bottom-color: var(--tds-text-field-border-bottom-success);
+  border-color: var(--tds-text-field-border-bottom-success);
 }
 
 .form-text-field-error:not(.form-text-field-readonly) .text-field-helper {
   color: var(--tds-text-field-helper-error);
 }
 .form-text-field-error:not(.form-text-field-readonly) .text-field-container {
-  border-bottom-color: var(--tds-text-field-border-bottom-error);
+  border-color: var(--tds-text-field-border-bottom-error);
 }
 
 .text-field-helper-error-state {
@@ -306,7 +354,12 @@
 }
 
 .text-field-textcounter {
-  font: var(--tds-detail-05);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   letter-spacing: var(--tds-detail-05-ls);
   color: var(--tds-text-field-textcounter);
   float: right;
@@ -324,7 +377,12 @@
 .text-field-slot-wrap-prefix,
 .text-field-slot-wrap-suffix {
   align-self: center;
-  font: var(--tds-detail-02);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   letter-spacing: var(--tds-detail-02-ls);
   margin: 0 0 0 14px;
   color: var(--tds-text-field-ps-color);
@@ -340,6 +398,7 @@
 
 .text-field-slot-wrap-suffix {
   margin: 0 14px 0 0;
+  color: var(--tds-text-field-ps-color-suffix);
 }
 .text-field-slot-wrap-suffix::slotted(:not(tds-icon)) {
   margin: 0 2px 0 0;

package/dist/collection/components/textarea/textarea.css

@@ -1,5 +1,6 @@
+/* Typography Usage mixins */
 .textarea-container {
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
   position: relative;
   box-sizing: border-box;
   height: auto;
@@ -21,7 +22,7 @@
 }
 
 .textarea-input {
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
   width: 100%;
   box-sizing: border-box;
   margin: 0;
@@ -30,13 +31,20 @@
   height: 100%;
   color: var(--tds-textarea-color);
   background-color: var(--tds-textarea-background);
-  font: var(--tds-detail-02);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
   display: block;
   resize: vertical;
-  border-bottom: 1px solid var(--tds-textarea-border-bottom);
-  transition: border-bottom-color 200ms ease;
+  border-style: solid;
+  border-color: var(--tds-textarea-border-bottom);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  transition: border-color 200ms ease;
 }
 .textarea-input:read-only {
   background-color: var(--tds-textarea-read-only-background);
@@ -47,18 +55,13 @@
   transition: color 200ms ease;
 }
 .textarea-input:disabled {
-  background-color: var(--tds-textarea-disabled-background);
-  color: var(--tds-textarea-disabled-color);
   cursor: not-allowed;
 }
-.textarea-input:disabled::placeholder {
-  color: var(--tds-textarea-disabled-placeholder);
-}
 .textarea-input::-webkit-resizer {
   display: none;
 }
 .textarea-input:hover {
-  border-bottom-color: var(--tds-textarea-border-bottom-hover);
+  border-color: var(--tds-textarea-border-bottom-hover);
 }
 .textarea-input:hover::placeholder {
   color: var(--tds-textarea-placeholder-hover);
@@ -68,8 +71,6 @@
   box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
-  border-radius: 0;
-  border-bottom: 1px solid transparent;
 }
 
 .textarea-resizer-icon {
@@ -85,10 +86,17 @@
 }
 .textarea-resizer-icon svg {
   display: block;
+  width: calc(var(--component-textarea-size-resize-width) * 1px);
+  height: calc(var(--component-textarea-size-resize-height) * 1px);
 }
 
 .textarea-label {
-  font: var(--tds-detail-05);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   letter-spacing: var(--tds-detail-05-ls);
   display: block;
   z-index: 1;
@@ -97,7 +105,12 @@
 }
 
 .textarea-container.textarea-label-inside .textarea-label {
-  font: var(--tds-detail-02);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   letter-spacing: var(--tds-detail-02-ls);
   transition: 0.1s ease all;
   color: var(--tds-textarea-label-inside-color);
@@ -105,9 +118,6 @@
   top: var(--tds-spacing-element-20);
   left: var(--tds-spacing-element-16);
 }
-.textarea-container.textarea-label-inside.textarea-disabled .textarea-label {
-  color: var(--tds-textarea-disabled-label);
-}
 .textarea-container.textarea-label-inside .textarea-input::placeholder {
   color: transparent;
 }
@@ -119,18 +129,33 @@
   color: var(--tds-textarea-placeholder);
 }
 .textarea-container.textarea-focus.textarea-label-inside .textarea-label {
-  font: var(--tds-detail-07);
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
   letter-spacing: var(--tds-detail-07-ls);
   top: var(--tds-spacing-element-8);
 }
 .textarea-container.textarea-data.textarea-label-inside .textarea-label {
-  font: var(--tds-detail-07);
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
   letter-spacing: var(--tds-detail-07-ls);
   top: var(--tds-spacing-element-8);
 }
 
 .textarea-textcounter {
-  font: var(--tds-detail-05);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   letter-spacing: var(--tds-detail-05-ls);
   color: var(--tds-textarea-textcounter);
   float: right;
@@ -139,13 +164,23 @@
   padding-top: var(--tds-spacing-element-4);
 }
 .textarea-textcounter .textfield-textcounter-divider {
-  font: var(--tds-detail-05);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   letter-spacing: var(--tds-detail-05-ls);
   color: var(--tds-textarea-textcounter-divider);
 }
 
 .textarea-helper {
-  font: var(--tds-detail-05);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   letter-spacing: var(--tds-detail-05-ls);
   display: flex;
   gap: 8px;
@@ -160,27 +195,30 @@
 }
 
 .textarea-success .textarea-input {
-  border-bottom-color: var(--tds-textarea-border-bottom-success);
+  border-color: var(--tds-textarea-border-bottom-success);
 }
 
 .textarea-error .textarea-input {
-  border-bottom-color: var(--tds-textarea-border-bottom-error);
+  border-color: var(--tds-textarea-border-bottom-error);
 }
 .textarea-error .textarea-helper {
   color: var(--tds-textarea-helper-error);
 }
+.textarea-error .textarea-helper tds-icon {
+  color: var(--tds-textarea-icon-error);
+}
 
 .textarea-disabled {
   cursor: not-allowed;
 }
+.textarea-disabled .textarea-wrapper,
+.textarea-disabled .textarea-label {
+  opacity: var(--tds-textarea-opacity-disabled);
+}
 .textarea-disabled .textarea-input {
-  border-bottom-color: transparent;
   pointer-events: none;
   user-select: none;
 }
-.textarea-disabled .textarea-label {
-  color: var(--tds-textarea-disabled-label);
-}
 .textarea-disabled .textarea-helper {
   color: var(--tds-textarea-helper-disabled);
 }
@@ -203,7 +241,12 @@
   position: absolute;
   right: 18px;
   top: 48px;
-  font: var(--tds-detail-05);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   letter-spacing: var(--tds-detail-05-ls);
   padding: 8px;
   color: var(--tds-textarea-icon-read-only-label-color);
@@ -216,7 +259,7 @@
   display: block;
 }
 .textarea-readonly .textarea-input {
-  border-bottom-color: var(--tds-textarea-border-bottom-read-only-color);
+  border-color: var(--tds-textarea-border-bottom-read-only-color);
 }
 .textarea-readonly .textfield-container {
   background-color: transparent;