@scania/tegel 1.32.2-multibrand-beta.5 → 1.33.0

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

@@ -1,70 +1,108 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
-.text-field-input {
+.text-field-input-lg {
   all: unset;
-  border-radius: var(--text-field-border-radius);
+  border-radius: 4px 4px 0 0;
   width: 100%;
   box-sizing: border-box;
   margin: 0;
   border: none;
   outline: none;
   height: 100%;
-  color: var(--text-field-text-color);
-  background-color: var(--text-field-background);
-  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);
-}
-.text-field-input::placeholder {
-  color: var(--text-field-placeholder);
-}
-.text-field-input:disabled {
+  color: var(--tds-text-field-color);
+  background-color: var(--tds-text-field-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
+}
+.text-field-input-lg::placeholder {
+  color: var(--tds-text-field-placeholder);
+}
+.text-field-input-lg:disabled {
   user-select: none;
   pointer-events: none;
-  background-color: var(--text-field-background-disabled);
-  color: var(--text-field-text-color-disabled);
-}
-.text-field-input:disabled::placeholder {
-  color: var(--text-field-placeholder-disabled);
+  background-color: var(--tds-text-field-background-disabled);
+  color: var(--tds-text-field-color-disabled);
 }
-.text-field-input:disabled ~ .text-field-label-inside {
-  color: var(--text-field-label-disabled);
+.text-field-input-lg:disabled::placeholder {
+  color: var(--tds-text-field-placeholder-disabled);
 }
-
-.text-field-input-lg {
-  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
+.text-field-input-lg:disabled ~ .text-field-label-inside {
+  color: var(--tds-text-field-label-disabled);
 }
 
 .text-field-input-md {
+  all: unset;
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--tds-text-field-color);
+  background-color: var(--tds-text-field-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-16);
 }
+.text-field-input-md::placeholder {
+  color: var(--tds-text-field-placeholder);
+}
+.text-field-input-md:disabled {
+  user-select: none;
+  pointer-events: none;
+  background-color: var(--tds-text-field-background-disabled);
+  color: var(--tds-text-field-color-disabled);
+}
+.text-field-input-md:disabled::placeholder {
+  color: var(--tds-text-field-placeholder-disabled);
+}
+.text-field-input-md:disabled ~ .text-field-label-inside {
+  color: var(--tds-text-field-label-disabled);
+}
 
 .text-field-input-sm {
+  all: unset;
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--tds-text-field-color);
+  background-color: var(--tds-text-field-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-16);
 }
+.text-field-input-sm::placeholder {
+  color: var(--tds-text-field-placeholder);
+}
+.text-field-input-sm:disabled {
+  user-select: none;
+  pointer-events: none;
+  background-color: var(--tds-text-field-background-disabled);
+  color: var(--tds-text-field-color-disabled);
+}
+.text-field-input-sm:disabled::placeholder {
+  color: var(--tds-text-field-placeholder-disabled);
+}
+.text-field-input-sm:disabled ~ .text-field-label-inside {
+  color: var(--tds-text-field-label-disabled);
+}
 
 .text-field-container {
-  border-radius: var(--text-field-border-radius);
+  border-radius: 4px 4px 0 0;
   display: flex;
   position: relative;
   height: 56px;
   box-sizing: border-box;
-  background-color: var(--text-field-background);
-  border-left: 1px solid var(--text-field-border-color-left);
-  border-right: 1px solid var(--text-field-border-color-right);
-  border-bottom: 1px solid var(--text-field-border-color-bottom);
-  border-top: 1px solid var(--text-field-border-color-top);
-  transition: border-bottom-color 200ms ease, border-left-color 200ms ease, border-right-color 200ms ease, border-top-color 200ms ease, outline-color 200ms ease;
+  background-color: var(--tds-text-field-background);
+  border-bottom: 1px solid var(--tds-text-field-border-bottom);
+  transition: border-bottom-color 200ms ease;
 }
 .text-field-container:hover {
-  border-left: 1px solid var(--text-field-border-color-left-hover);
-  border-right: 1px solid var(--text-field-border-color-right-hover);
-  border-bottom: 1px solid var(--text-field-border-color-bottom-hover);
-  border-top: 1px solid var(--text-field-border-color-top-hover);
+  border-bottom-color: var(--tds-text-field-border-bottom-hover);
 }
 .form-text-field-md .text-field-container {
   height: 48px;
@@ -80,36 +118,32 @@
 
 .text-field-data,
 .text-field-input {
-  color: var(--text-field-text-color);
+  color: var(--tds-text-field-data-color);
 }
 
 .text-field-label-outside > * {
-  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);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: block;
   margin-bottom: var(--tds-spacing-element-8);
-  color: var(--text-field-label-color);
+  color: var(--tds-text-field-label-color);
 }
 
 .text-field-label-inside {
-  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);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   position: absolute;
   pointer-events: none;
-  color: var(--text-field-label-inside-color);
+  color: var(--tds-text-field-label-inside-color);
   left: 16px;
 }
 
-.text-field-label-inside-placeholder {
-  color: var(--text-field-placeholder);
+.form-text-field {
+  display: block;
+  min-width: 208px;
+}
+.form-text-field-nomin {
+  min-width: auto;
 }
 
 .form-text-field.text-field-container-label-inside .text-field-input-lg {
@@ -127,90 +161,99 @@
 }
 .form-text-field.text-field-container-label-inside .text-field-input-lg:focus::placeholder {
   transition: color 0.35s ease;
-  color: var(--text-field-placeholder);
+  color: var(--tds-text-field-placeholder);
+}
+.form-text-field.text-field-container-label-inside .text-field-input-md {
+  padding-top: var(--tds-spacing-element-20);
+  padding-bottom: 11px;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-md ~ .text-field-label-inside {
+  top: 16px;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-md::placeholder {
+  color: transparent;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-md ::placeholder {
+  color: transparent;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-md:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--tds-text-field-placeholder);
 }
-.form-text-field.text-field-container-label-inside .text-field-input-md,
 .form-text-field.text-field-container-label-inside .text-field-input-sm {
   padding-top: var(--tds-spacing-element-20);
   padding-bottom: 11px;
 }
-.form-text-field.text-field-container-label-inside .text-field-input-md ~ .text-field-label-inside,
 .form-text-field.text-field-container-label-inside .text-field-input-sm ~ .text-field-label-inside {
   top: 16px;
 }
-.form-text-field.text-field-container-label-inside .text-field-input-md::placeholder,
 .form-text-field.text-field-container-label-inside .text-field-input-sm::placeholder {
   color: transparent;
 }
-.form-text-field.text-field-container-label-inside .text-field-input-md ::placeholder,
 .form-text-field.text-field-container-label-inside .text-field-input-sm ::placeholder {
   color: transparent;
 }
-.form-text-field.text-field-container-label-inside .text-field-input-md:focus::placeholder,
 .form-text-field.text-field-container-label-inside .text-field-input-sm:focus::placeholder {
   transition: color 0.35s ease;
-  color: var(--text-field-placeholder);
-}
-.form-text-field.text-field-container-label-inside.text-field-focus .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-label-inside {
-  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);
+  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);
+  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-sm ~ .text-field-label-inside,
-.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-sm ~ .text-field-label-inside,
-.form-text-field.text-field-container-label-inside.text-field-data .text-field-input-md ~ .text-field-label-inside {
+.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);
+  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);
+  letter-spacing: var(--tds-detail-07-ls);
+  transition: 0.1s ease all;
   top: 12px;
 }
 
 .text-field-bar {
-  position: relative;
+  position: absolute;
   width: 100%;
-  left: 0;
-  z-index: 1;
 }
-.text-field-bar::after {
+.text-field-bar::before, .text-field-bar::after {
   content: "";
   height: 2px;
-  width: 100%;
-  bottom: 0;
+  top: 54px;
+  width: 0;
   position: absolute;
-  background: var(--text-field-bar-color-focus);
-  transform: scaleX(0);
-  transition: 0.35s ease transform;
+  background: var(--tds-text-field-bar);
+  transition: 0.35s ease all;
 }
-
-.form-text-field.text-field-focus .text-field-container {
-  border-left: 1px solid var(--text-field-border-color-left-focus);
-  border-right: 1px solid var(--text-field-border-color-right-focus);
-  border-bottom: 1px solid var(--text-field-border-color-bottom-focus);
-  border-top: 1px solid var(--text-field-border-color-top-focus);
-  outline: 2px solid var(--text-field-outline-color-focus);
-  outline-offset: -1px;
+.form-text-field-md .text-field-bar::before, .form-text-field-md .text-field-bar::after {
+  top: 46px;
+}
+.form-text-field-sm .text-field-bar::before, .form-text-field-sm .text-field-bar::after {
+  top: 40px;
+}
+.text-field-bar::before {
+  left: 50%;
+}
+.text-field-bar::after {
+  right: 50%;
 }
-.form-text-field.text-field-focus .text-field-bar::after {
-  transform: scaleX(1);
+.text-field-focus .text-field-bar::before, .text-field-focus .text-field-bar::after {
+  width: 50%;
 }
 
 .text-field-helper {
-  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);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: flex;
   gap: 8px;
   justify-content: space-between;
   flex-basis: 100%;
   padding-top: var(--tds-spacing-element-4);
-  color: var(--text-field-helper);
+  color: var(--tds-text-field-helper);
 }
 .text-field-helper .text-field-textcounter {
   margin-left: auto;
@@ -218,20 +261,17 @@
 
 .form-text-field-disabled .text-field-container {
   cursor: not-allowed;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
+  border-bottom-color: transparent;
 }
 .form-text-field-disabled .text-field-slot-wrap-prefix > *,
 .form-text-field-disabled .text-field-slot-wrap-suffix > * {
-  color: var(--text-field-affix-color-disabled);
+  color: var(--tds-text-field-ps-color-disabled);
 }
 .form-text-field-disabled .text-field-label-outside > * {
-  color: var(--text-field-label-disabled);
+  color: var(--tds-text-field-label-disabled);
 }
 .form-text-field-disabled .text-field-helper {
-  color: var(--text-field-helper-disabled);
+  color: var(--tds-text-field-helper-disabled);
 }
 
 .text-field-icon__readonly {
@@ -240,23 +280,19 @@
   right: 18px;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--text-field-icon-read-only-label-color);
+  color: var(--tds-text-field-icon-read-only-label-color);
 }
 .text-field-icon__readonly-label {
   display: none;
   position: absolute;
   right: 18px;
   top: 48px;
-  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);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   padding: 8px;
   white-space: nowrap;
   border-radius: 4px 0 4px 4px;
-  background-color: var(--text-field-icon-read-only-label-background);
+  background-color: var(--tds-text-field-icon-read-only-label-background);
 }
 
 .form-text-field-readonly {
@@ -265,7 +301,7 @@
   cursor: default;
 }
 .form-text-field-readonly .text-field-container {
-  border-bottom-color: var(--text-field-border-bottom-readonly);
+  border-bottom-color: var(--tds-text-field-border-bottom-readonly);
 }
 .form-text-field-readonly .text-field-icon__readonly {
   display: block;
@@ -282,23 +318,17 @@
 }
 
 .form-text-field-success:not(.form-text-field-readonly) .text-field-container {
-  border-left: 1px solid var(--text-field-border-color-left-success);
-  border-right: 1px solid var(--text-field-border-color-right-success);
-  border-bottom: 1px solid var(--text-field-border-color-bottom-success);
-  border-top: 1px solid var(--text-field-border-color-top-success);
+  border-bottom-color: var(--tds-text-field-border-bottom-success);
 }
 
 .form-text-field-error:not(.form-text-field-readonly) .text-field-helper {
-  color: var(--text-field-helper-error);
+  color: var(--tds-text-field-helper-error);
 }
 .form-text-field-error:not(.form-text-field-readonly) .text-field-container {
-  border-left: 1px solid var(--text-field-border-color-left-error);
-  border-right: 1px solid var(--text-field-border-color-right-error);
-  border-bottom: 1px solid var(--text-field-border-color-bottom-error);
-  border-top: 1px solid var(--text-field-border-color-top-error);
+  border-bottom-color: var(--tds-text-field-border-bottom-error);
 }
 .form-text-field-error:not(.form-text-field-readonly) .text-field-bar::before, .form-text-field-error:not(.form-text-field-readonly) .text-field-bar::after {
-  background: var(--text-field-bar-color-error);
+  background: var(--tds-text-field-bar-error);
 }
 
 .text-field-helper-error-state {
@@ -308,46 +338,32 @@
 }
 
 .text-field-textcounter-disabled {
-  color: var(--text-field-textcounter-disabled);
+  color: var(--tds-text-field-textcounter-disabled);
 }
 
 .text-field-textcounter {
-  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);
-  color: var(--text-field-textcounter);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-text-field-textcounter);
   float: right;
 }
 .text-field-textcounter.text-field-textcounter-disabled {
-  color: var(--text-field-textcounter-disabled);
+  color: var(--tds-text-field-textcounter-disabled);
 }
 .text-field-textcounter.text-field-textcounter-divider {
-  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);
-  color: var(--text-field-textcounter-divider);
+  color: var(--tds-text-field-textcounter-divider);
 }
 .text-field-textcounter.text-field-textcounter-divider-disabled {
-  color: var(--text-field-textcounter-divider);
+  color: var(--tds-text-field-textcounter-divider-disabled);
 }
 
 .text-field-slot-wrap-prefix,
 .text-field-slot-wrap-suffix {
   align-self: center;
-  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);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   margin: 0 0 0 14px;
-  color: var(--text-field-affix-color);
+  color: var(--tds-text-field-ps-color);
 }
 .text-field-slot-wrap-prefix::slotted(:not(tds-icon)),
 .text-field-slot-wrap-suffix::slotted(:not(tds-icon)) {
@@ -355,7 +371,7 @@
 }
 .text-field-slot-wrap-prefix.text-field-error,
 .text-field-slot-wrap-suffix.text-field-error {
-  color: var(--text-field-affix-color-error);
+  color: var(--tds-text-field-ps-color-error);
 }
 
 .text-field-slot-wrap-suffix {

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

@@ -76,7 +76,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: 'a7034149f1d340077c362924a96dea0e3d910174', class: {
+        return (h("div", { key: '985928ef59662762648f2d95d5decad2e3188e05', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -94,12 +94,12 @@ export class TdsTextField {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: '711e4ae521ba6719f60857284b26e15a722b4503', class: "text-field-label-outside" }, h("label", { key: 'c4293a6bedb427dd5ee2ee3b5e8a74fe547fc402', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'a3d2697898eab72ce3019970affca5325eecf60c', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '97eddc6db8b78040d23fc93f87130934031e7292', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '7a409b43a1fee8b7b078abc5f96c925ab97bcedc', class: "text-field-label-outside" }, h("label", { key: 'c6bdaab4e6f81a95aa71a4e23a1f02fb1bcef9ec', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '945f7901a92850da22ab84c5fe77e2d97738aaa9', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d6cb2facb8ff90b7393409b769c2b5e5a860421', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: 'fe5190eb82d0424e392d31fdf178630218eab87f', name: "prefix" }))), h("div", { key: 'dbbb4000d41a088793f69fe0e50671af3f9e3c3c', class: "text-field-input-container" }, h("input", { key: '549b76c06d00bff3ec358275928d59b0bb96c186', ref: (inputEl) => {
+            } }, h("slot", { key: 'b0f0e3ebb96dbd2af021150b68690af566db44b9', name: "prefix" }))), h("div", { key: 'c5b172ee6c561256ab930490113f406b88eae67c', class: "text-field-input-container" }, h("input", { key: '2e0a9070b41bde39a2a0f14b132f474692eb0e04', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -114,16 +114,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '0c88d0caca0b0681af69dffbc7bd427de04cb17d', class: {
-                'text-field-label-inside': true,
-                'text-field-label-inside-placeholder': this.placeholder === '',
-            }, htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: 'fa00ee8a8dc53b674c77073e64f76ca07719f154', class: {
+            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'ffb3bbb84ab718c2259134f32ee6dd0eb348cb9f', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '166da0147311d28064b7e03bbefd1a0ee18db5ca', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '4bb21d12957bf65d525931c88a5a89fff49d4eaf', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: 'cf68556452cba54c5ce502ea26e6ac5962613521', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '4f37f24e66e33db77892fb7dfe1014c9ef2a8da9', class: "text-field-icon__readonly" }, h("tds-icon", { key: 'a51b51de922b1421616d9869750766a56e6ba06f', name: "edit_inactive", size: "20px" }))), h("span", { key: 'c7b8897ccc3b4706a1d1c765fac7c3294d2bb32c', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: 'feca8e8c206ed48c302e63bc4a22eadb9617beda', class: "text-field-bar" }), h("div", { key: 'd42fcdc6707169a5718a46846d50457b42137c09', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'f815d607414275ab8dc89a70433a9dbac2ba5c93', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'a37d7e79cd0f894afb947e87b55de3d9d0d6f95a', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'd2affd5ef5faa3884b595ded63917d69710822b9', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '78808bda00dffd2c9d3e6956e2e2b937e3e67abc', class: {
+            } }, h("slot", { key: '7e67dbc8f4f67cb0c7d194e01e5787ae18ffab13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'd213ec000d837cbd4b711468ef3cfa826cc65ac2', class: "text-field-icon__readonly" }, h("tds-icon", { key: '56b8b76a5771889f9f36ab683dcba6906bff42a6', name: "edit_inactive", size: "20px" }))), h("span", { key: '9e8fa95602a1ce5630f30947b59decc700c06c8b', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: '9e8547e06a25e7da98ff977ac6be1b79d27e4151', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'daeea67a48a15d27785f31dfcb69fb75e31ab85b', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '974bad3f97b23d69a20130bf66b6c72ef47f68bc', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '687cad3cb0451a262f836089851e9a2e08f2c74e', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '431709fb793dde8845b20698e722a7c140bb32b6', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));

package/dist/collection/components/textarea/textarea.js

@@ -65,7 +65,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: 'dd21ad7eba3f5c751fc4e67b6e20e373aada6c79', class: {
+        return (h("div", { key: '06fd8ce87614410858a7d9253fac73a6f1cf20ec', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -75,7 +75,7 @@ export class TdsTextarea {
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && (h("label", { key: 'e63ddf98d7a3cb8e759061cbbee566a2855571ba', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '984e957c4a556074667140917b8345ac2595fdc5', class: "textarea-wrapper" }, h("textarea", { key: 'bbe1964397488d90fa06b5448beba12ebb2721b7', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: '1a02a333e4164b39fd223c68cc3d27d7c53487fb', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '6d45e8c8427770accc82c7ad9e10fbed016437a4', class: "textarea-wrapper" }, h("textarea", { key: '614c30a5b5077060b1568744cf0800580e746819', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
                 this.textEl = inputEl;
             }, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
@@ -85,7 +85,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '5c5e5c9fda196fb330ce7cc76dea7c79fc6603e7', class: "textarea-resizer-icon" }, h("svg", { key: '460ffb62db83d92a75b7caae10c7f770560b79c9', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd456b75aff2132b2483d256647fa2c721329ea31', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: 'c5acd2972ffd03860b0f118ba1930c772c9597d1', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'de9329493c0bc3f18d519675757e48d28edac0d2', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'd34dbca8974776da64dd8541dae999b28d35bfdc', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '2f20e789032ca0eb4fa37a9f61ee09e8ec3251ea', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'b1b542f1ee3b13f032e012519f7cba855e15b25f', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '59ae8d951ecfeecedcc920c09cb3e458d0056d1b', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '3029ba39afc9eb1ea5499336410248000be24aef', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'e0574ae32d1ce9c69156dc2aa52d8d1881b6ff9b', class: "textarea-resizer-icon" }, h("svg", { key: '23e79729cc099b7e4f07192c05aa4a304b91788a', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '54891720aa51af768f467be5bd8a72fc7adc8d47', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '72e3586f1be99460ced66d640392b4596e5b8c2f', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '9f84391a75b5ae428c71d3b713a9d281c4475a09', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '55e195bb50d8b707ec3a403c8c62cad74d738919', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'ff2043a19ebb129178ecfd36126b0d23eacde4d1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '84b0991ef5ddab7f960ba75db22c65762b0b5d20', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '963b3a3bdafeabec6ad2bd3663c07ed0d4a5b3fd', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '8496a0ae44721cdcd9443e09ff6a709b6d3c704f', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/toast/toast.css

@@ -50,9 +50,10 @@
   cursor: pointer;
 }
 :host .wrapper button.close:focus {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 :host .wrapper button.close tds-icon {
   color: var(--tds-toast-dissmiss-color);

package/dist/collection/components/toast/toast.js

@@ -65,12 +65,12 @@ export class TdsToast {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '09db24b58ba05daeba3e00ae880e86e700a43c2d', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: '433c25165487688ff40c78a0455d30cedd08c76f', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '253a018ec0eea9e17f72200f52a38e71802f2902', class: `
+            } }, h("div", { key: '2734573a413d9cdf1a329675fe0e0db374243cbf', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: '953f414876c38ffb05bc0c684850ab53df124b5e', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: 'eb1ec8eb50cf3e05ecd880c427804626d9e4c51b', class: `content` }, h("div", { key: '97a0f4cb5ec278ad6a22051328461a9e0e1ce0ff', class: "header-subheader" }, this.header && h("div", { key: 'b3ae30e072257f4a74e748e24991bbab72a80c01', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '761fac1eda5bedd6c36d00be0548109c4f774af9', name: "header" }), this.subheader && h("div", { key: 'b4916a19416d8c0bfbdc0ef3d98fefda6ea96c86', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '62813da86efbf2ddf089a4931e11f774d6d27491', name: "subheader" })), usesActionsSlot && (h("div", { key: '93ec29dca445466da32ea2dc1c04bef76b8dc79e', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'fa9aeb95c9c569e77f85e3b65d993064e35dad81', name: "actions" })))), this.closable && (h("button", { key: '0d0aad78ebd983647774a2afdb593a7aa4e2dbf9', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'df6e7efeef43689bf44c101d23e5ce725d087951', name: "cross", size: "20px", svgTitle: "cross" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '88d4ab6fd55d64c93ad3089c695d0fa4075208a6', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '02de15f884420946530d2e04c330987f73c9ca44', class: `content` }, h("div", { key: '4eb8c6a13a7bb53313a18b47bfa8e2ab1211cdbc', class: "header-subheader" }, this.header && h("div", { key: '1b707e29cdd68a5cc73a2b694b8b93698cbac661', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'ffe2b463f8fc6e4ca3b563d7a4ae55968cb4a478', name: "header" }), this.subheader && h("div", { key: '8164b591452e4a6f025f752951c678a15443fff9', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '2bca8428e8eb128cf8c0f62b31a0da54ef555df3', name: "subheader" })), usesActionsSlot && (h("div", { key: 'de84bc19257b09127b861b357240509a7346f2e7', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'b85a46c5dc97dc7d3b95feb816145731887711fb', name: "actions" })))), this.closable && (h("button", { key: '69adb03d815ece9e50cf436957927c5dcd4d3ab8', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '9b4f062079caa32c5900202aaf1c2a7a5ef8e18c', name: "cross", size: "20px", svgTitle: "cross" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }