@scania/tegel 1.32.1 → 1.32.2-multibrand-beta.0

package/dist/collection/components/checkbox/checkbox.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   align-items: center;
   position: relative;
@@ -6,9 +9,13 @@
 
 .tds-checkbox {
   box-sizing: border-box;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-checkbox-text);
+  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(--checkbox-label);
   display: flex;
   align-items: center;
   margin-left: -4px;
@@ -30,7 +37,7 @@
   align-self: flex-start;
 }
 .tds-checkbox input[type=checkbox] + label {
-  color: var(--tds-checkbox-color);
+  color: var(--checkbox-label);
   padding-left: var(--tds-spacing-element-4);
   padding-top: var(--tds-spacing-element-4);
   padding-bottom: var(--tds-spacing-element-4);
@@ -59,8 +66,8 @@
   border-radius: 4px;
 }
 .tds-checkbox input[type=checkbox]::after {
-  border: 1px solid var(--tds-checkbox-interaction-01);
-  background-color: var(--tds-checkbox-interaction-02);
+  border: 1px solid var(--checkbox-border);
+  background-color: var(--checkbox-fill);
   width: 16px;
   height: 16px;
   left: 4px;
@@ -68,36 +75,36 @@
   border-radius: 2px;
 }
 .tds-checkbox input[type=checkbox]:hover::before {
-  background-color: var(--tds-checkbox-background-hover);
-  opacity: var(--tds-checkbox-background-opacity-hover);
+  background-color: var(--checkbox-border-hover);
+  opacity: var(--checkbox-background-opacity-hover);
 }
 .tds-checkbox input[type=checkbox]:focus::before {
-  background-color: var(--tds-checkbox-background-focus);
-  opacity: var(--tds-checkbox-background-opacity-focus);
+  background-color: var(--checkbox-border-focus);
+  opacity: var(--checkbox-background-opacity-focus);
   transition: opacity 0.2s ease-in-out;
 }
 .tds-checkbox input[type=checkbox]:disabled, .tds-checkbox input[type=checkbox].disabled {
   cursor: not-allowed;
 }
 .tds-checkbox input[type=checkbox]:disabled::after, .tds-checkbox input[type=checkbox].disabled::after {
-  border-color: var(--tds-checkbox-border-color-disabled-after);
+  border-color: var(--checkbox-border-disabled);
 }
 .tds-checkbox input[type=checkbox]:disabled + label, .tds-checkbox input[type=checkbox].disabled + label {
-  color: var(--tds-checkbox-disabled);
+  color: var(--checkbox-label-disabled);
   cursor: not-allowed;
 }
 .tds-checkbox input[type=checkbox]:disabled:hover::before, .tds-checkbox input[type=checkbox].disabled:hover::before {
   display: none;
 }
 .tds-checkbox input[type=checkbox]:checked::after {
-  background-image: var(--tds-checkbox-background-img);
-  background-color: var(--tds-checkbox-interaction-01);
+  background-image: var(--checkbox-background-img);
+  background-color: var(--checkbox-border);
   background-repeat: no-repeat;
   background-position: center;
 }
 .tds-checkbox input[type=checkbox]:checked:hover::before {
-  background-color: var(--tds-checkbox-background-hover);
-  opacity: var(--tds-checkbox-background-opacity-hover);
+  background-color: var(--checkbox-border-hover);
+  opacity: var(--checkbox-background-opacity-hover);
 }
 .tds-checkbox input[type=checkbox]:checked:disabled:hover::before, .tds-checkbox input[type=checkbox]:checked:disabled::before, .tds-checkbox input[type=checkbox]:checked.disabled:hover::before, .tds-checkbox input[type=checkbox]:checked.disabled::before {
   display: block;
@@ -108,13 +115,13 @@
   border: 1px solid #b0b7c4;
 }
 .tds-checkbox input[type=checkbox]:checked:disabled::after, .tds-checkbox input[type=checkbox]:checked.disabled::after {
-  background-image: var(--tds-checkbox-background-img-disabled);
-  background-color: var(--tds-checkbox-interaction-02);
-  color: var(--tds-checkbox-color-disabled-after);
+  background-image: var(--checkbox-background-img-disabled);
+  background-color: var(--checkbox-fill-disabled);
+  color: var(--checkbox-border-disabled);
 }
 .tds-checkbox input[type=checkbox]:indeterminate::after {
-  background-image: var(--tds-checkbox-background-img-indeterminate);
-  background-color: var(--tds-checkbox-interaction-01);
+  background-image: var(--checkbox-background-img-indeterminate);
+  background-color: var(--checkbox-border);
   background-repeat: no-repeat;
   background-position: center;
 }
@@ -127,7 +134,7 @@
   border: 1px solid #b0b7c4;
 }
 .tds-checkbox input[type=checkbox]:indeterminate:disabled::after {
-  background-image: var(--tds-checkbox-background-img-indeterminate-disabled);
-  background-color: var(--tds-checkbox-interaction-02);
-  color: var(--tds-checkbox-color-disabled-after);
+  background-image: var(--checkbox-background-img-indeterminate-disabled);
+  background-color: var(--checkbox-fill-disabled);
+  color: var(--checkbox-border-disabled);
 }

package/dist/collection/components/divider/divider.css

@@ -5,12 +5,12 @@
   box-sizing: border-box;
 }
 .divider.horizontal {
-  background-color: var(--tds-divider-background);
+  background-color: var(--divider-color);
   width: 100%;
   height: 1px;
 }
 .divider.vertical {
-  background-color: var(--tds-divider-background);
+  background-color: var(--divider-color);
   height: 100%;
   width: 1px;
 }

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css

@@ -1,24 +1,31 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: block;
-  background-color: var(--tds-dropdown-option-background);
+  background-color: var(--dropdown-option-background);
 }
 :host * {
   box-sizing: border-box;
 }
 :host .dropdown-option {
-  color: var(--tds-dropdown-option-color);
-  border-bottom: 1px solid var(--tds-dropdown-option-border);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--dropdown-text);
+  border-bottom: 1px solid var(--dropdown-option-border);
+  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);
   overflow-wrap: anywhere;
   transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
 }
 :host .dropdown-option.selected {
-  background-color: var(--tds-dropdown-option-background-selected);
+  background-color: var(--dropdown-option-background-selected);
 }
 :host .dropdown-option.disabled {
-  color: var(--tds-dropdown-option-color-disabled);
+  color: var(--dropdown-option-disabled);
 }
 :host .dropdown-option button:focus {
   outline: 2px solid var(--tds-blue-400);
@@ -69,11 +76,11 @@
   padding: 7px 16px 8px;
 }
 :host .dropdown-option:hover {
-  background-color: var(--tds-dropdown-option-background-hover);
+  background-color: var(--dropdown-option-background-hover);
   cursor: pointer;
 }
 :host .dropdown-option:hover.disabled {
-  background-color: var(--tds-dropdown-option-background);
+  background-color: var(--dropdown-option-background);
   cursor: not-allowed;
 }
 

package/dist/collection/components/dropdown/dropdown.css

@@ -1,14 +1,18 @@
 @charset "UTF-8";
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host button {
   all: unset;
   height: 100%;
   width: 100%;
-  background-color: var(--tds-dropdown-bg);
-  border-bottom: 1px solid var(--tds-dropdown-border-bottom);
-  border-radius: var(--tds-dropdown-border-radius);
+  box-shadow: var(--dropdown-border);
+  background-color: var(--dropdown-background);
+  border-radius: var(--dropdown-border-radius);
+  transition: box-shadow var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
 }
 :host button:hover {
-  border-bottom: 1px solid var(--tds-dropdown-border-bottom-hover);
+  box-shadow: var(--dropdown-border-hover);
 }
 :host button .value-wrapper {
   padding: 0 16px;
@@ -17,68 +21,64 @@
   justify-content: space-between;
 }
 :host button.placeholder {
-  color: var(--tds-dropdown-placeholder-color);
+  color: var(--dropdown-placeholder);
   line-height: 1.3;
 }
 :host button.value {
-  color: var(--tds-dropdown-value-color);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  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(--dropdown-text);
   /** Needed to not get be affected by overflow:hidden 
   The original line-height is 1.14 */
   line-height: 1.3;
 }
 :host button:focus {
-  border-bottom-color: var(--tds-dropdown-border-bottom-open);
+  box-shadow: var(--dropdown-border-focus);
 }
-:host button:focus::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background: var(--tds-dropdown-border-bottom-open);
+:host button:active {
+  box-shadow: var(--dropdown-border-active);
 }
 :host button.error {
-  border-bottom: 1px solid var(--tds-negative);
+  box-shadow: var(--dropdown-border-error);
 }
-:host button.error:focus {
-  border-bottom-color: transparent;
+:host button.error:hover {
+  box-shadow: var(--dropdown-border-error-hover);
 }
-:host button.error:focus::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: var(--tds-negative);
+:host button.error:focus {
+  box-shadow: var(--dropdown-border-error-focus);
 }
 :host button:disabled {
-  color: var(--tds-dropdown-disabled-color);
-  border-bottom: 1px solid transparent;
+  box-shadow: var(--dropdown-border-disabled);
+  color: var(--dropdown-disabled);
 }
 :host button .menu-icon {
   margin-right: 0;
 }
 
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host .filter {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100%;
-  background-color: var(--tds-dropdown-bg);
-  border-bottom: 1px solid var(--tds-dropdown-border-bottom);
+  background-color: var(--dropdown-background);
+  box-shadow: var(--dropdown-border);
   padding-left: 16px;
-  border-radius: 4px 4px 0 0;
+  border-radius: var(--dropdown-border-radius);
+  transition: box-shadow var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
 }
 :host .filter:hover {
-  border-bottom: 1px solid var(--tds-dropdown-border-bottom-hover);
+  box-shadow: var(--dropdown-border-hover);
 }
 :host .filter.disabled {
-  color: var(--tds-dropdown-disabled-color);
-  border-bottom: 1px solid transparent;
+  color: var(--dropdown-disabled);
+  box-shadow: var(--dropdown-border-disabled);
 }
 :host .filter .value-wrapper {
   display: flex;
@@ -86,15 +86,19 @@
   height: 100%;
 }
 :host .filter .value-wrapper input {
-  color: var(--tds-dropdown-filter-input-color);
+  color: var(--dropdown-text);
 }
 :host .filter .label-inside-as-placeholder {
   position: absolute;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  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);
   /* Overwrite in order to display ÅÄÖ and similar sign correctly */
   line-height: 1.3;
-  color: var(--tds-dropdown-placeholder-color);
+  color: var(--dropdown-placeholder);
 }
 :host .filter .label-inside-as-placeholder.lg {
   top: 20px;
@@ -106,8 +110,12 @@
   display: none;
 }
 :host .filter .label-inside-as-placeholder.selected {
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
+  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);
   transition: all 0.2s ease-in-out;
 }
 :host .filter .label-inside-as-placeholder.selected.lg {
@@ -123,31 +131,13 @@
   margin-top: 8px;
 }
 :host .filter.focus {
-  border-bottom-color: transparent;
-}
-:host .filter.focus::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: var(--tds-dropdown-border-bottom-open);
+  box-shadow: var(--dropdown-border-focus);
 }
 :host .filter.error {
-  border-bottom: 1px solid var(--tds-negative);
+  box-shadow: var(--dropdown-border-error);
 }
 :host .filter.error.focus {
-  border-bottom-color: transparent;
-}
-:host .filter.error.focus::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: var(--tds-negative);
+  box-shadow: var(--dropdown-border-error-focus);
 }
 :host .filter input {
   flex: 1;
@@ -155,30 +145,39 @@
   width: 100%;
 }
 :host .filter input::placeholder {
-  color: var(--tds-dropdown-placeholder-color);
+  color: var(--dropdown-placeholder);
 }
 :host .filter input:disabled::placeholder {
-  color: var(--tds-dropdown-disabled-color);
+  color: var(--dropdown-disabled);
 }
 :host .filter tds-icon {
   cursor: pointer;
 }
+:host .filter tds-icon.disabled {
+  color: var(--dropdown-disabled);
+}
 :host .filter .menu-icon {
   margin-right: 16px;
 }
+:host .filter .menu-icon.disabled {
+  color: var(--dropdown-disabled);
+}
 :host .filter .clear-icon {
   margin: 0 8px;
-  color: var(--tds-dropdown-clear-icon-color);
   padding-right: 8px;
-  border-right: 1px solid var(--tds-dropdown-clear-icon-color);
+  border-right: 1px solid var(--dropdown-icon);
+  color: var(--dropdown-clear-icon);
 }
 :host .filter .clear-icon:hover {
-  color: var(--tds-dropdown-clear-icon-hover-color);
+  color: var(--dropdown-icon);
 }
 :host .filter .clear-icon.hide {
   display: none;
   visibility: hidden;
 }
+:host .filter .clear-icon.disabled {
+  color: var(--dropdown-disabled);
+}
 
 :host {
   --tds-scrollbar-width-standard: thin;
@@ -192,56 +191,50 @@ body {
   scrollbar-width: thin;
 }
 
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   display: block;
   position: relative;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  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);
 }
 :host .label-outside {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
-  color: var(--tds-dropdown-label-color);
+  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(--dropdown-text);
   margin-bottom: 8px;
 }
 :host .label-outside.disabled {
-  color: var(--tds-dropdown-disabled-color);
+  color: var(--dropdown-disabled);
 }
 :host .dropdown-select {
   position: relative;
 }
-:host .dropdown-select button {
-  transition: border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
-}
-:host .dropdown-select button:focus {
-  border-bottom-color: var(--tds-dropdown-border-bottom);
-}
-:host .dropdown-select button:hover {
-  border-bottom-color: var(--tds-dropdown-border-bottom-hover);
-}
-:host .dropdown-select button {
-  border-bottom-color: var(--tds-dropdown-border-bottom);
-}
-:host .dropdown-select button.error {
-  border-bottom-color: var(--tds-dropdown-error);
-}
-:host .dropdown-select button.error:focus {
-  border-bottom-color: transparent;
-}
 :host .dropdown-select.disabled .label-inside,
 :host .dropdown-select.disabled .placeholder,
 :host .dropdown-select.disabled .label-inside-as-placeholder,
 :host .dropdown-select.disabled .value-wrapper {
-  color: var(--tds-dropdown-disabled-color);
-}
-:host .dropdown-select.disabled button {
-  border: none;
+  color: var(--dropdown-disabled);
 }
 :host .dropdown-select .label-inside {
   position: absolute;
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
-  color: var(--tds-dropdown-label-inside-color);
+  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(--dropdown-text);
 }
 :host .dropdown-select .label-inside.lg {
   top: 12px;
@@ -271,12 +264,16 @@ body {
   line-height: 1;
 }
 :host .dropdown-select .label-inside-as-placeholder {
-  color: var(--tds-dropdown-placeholder-color);
+  color: var(--dropdown-placeholder);
 }
 :host .dropdown-select .label-inside-as-placeholder.selected {
   position: absolute;
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
+  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);
   transition: all 0.2s ease-in-out;
 }
 :host .dropdown-select .label-inside-as-placeholder.selected.lg {
@@ -305,45 +302,49 @@ body {
 }
 :host .helper {
   margin-top: 4px;
-  color: var(--tds-dropdown-helper-color);
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--dropdown-helper-text);
+  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);
   display: flex;
   align-items: center;
   gap: 8px;
 }
 :host .helper.error {
-  color: var(--tds-dropdown-error);
+  color: var(--dropdown-error);
 }
 :host .helper.disabled {
-  color: var(--tds-dropdown-disabled-color);
+  color: var(--dropdown-disabled);
 }
 :host .dropdown-list {
   z-index: 100;
   position: absolute;
-  margin-top: 1px;
+  margin-top: 2px;
   width: 100%;
   transform-origin: top;
   box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px 0;
-  border-radius: var(--tds-dropdown-list-border-radius-down);
+  border-radius: var(--dropdown-list-border-radius-down);
   overflow-y: auto;
   transform: scaleY(0);
   pointer-events: none;
 }
 :host .dropdown-list:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
-  background: var(--tds-scrollbar-hover-thumb-color);
+  background: var(--color-foreground-icon-discrete);
   background-clip: padding-box;
 }
 :host .dropdown-list::-webkit-scrollbar {
   width: var(--tds-scrollbar-width);
 }
 :host .dropdown-list::-webkit-scrollbar-track {
-  background: var(--tds-scrollbar-track-color);
+  background: var(--color-background-layer-01);
 }
 :host .dropdown-list::-webkit-scrollbar-thumb {
   border-radius: 40px;
-  background: var(--tds-scrollbar-thumb-color);
+  background: var(--color-foreground-icon-discrete);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
 }
@@ -377,7 +378,7 @@ body {
   display: flex;
   flex-direction: column-reverse;
   box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 3px 0;
-  border-radius: var(--tds-dropdown-list-border-radius-up);
+  border-radius: var(--dropdown-list-border-radius-up);
 }
 :host .dropdown-list.up.label-outside {
   bottom: calc(100% - 24px);
@@ -399,12 +400,16 @@ body {
   transition: transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit);
 }
 :host .dropdown-list .no-result {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  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);
   display: flex;
   align-items: center;
   padding: 0 16px;
-  background-color: var(--tds-dropdown-bg);
+  background-color: var(--dropdown-background);
 }
 :host .dropdown-list .no-result.lg {
   height: 56px;
@@ -419,7 +424,10 @@ body {
   height: 40px;
 }
 :host .menu-icon {
-  color: var(--tds-dropdown-menu-icon-color);
+  color: var(--dropdown-icon);
+}
+:host .menu-icon.disabled {
+  color: var(--dropdown-disabled);
 }
 :host tds-icon {
   transition: transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);

package/dist/collection/components/dropdown/dropdown.js

@@ -487,11 +487,12 @@ export class TdsDropdown {
             }, class: {
                 'clear-icon': true,
                 'hide': !(this.open && this.inputElement.value !== ''),
+                'disabled': this.disabled
             }, name: "cross", size: "16px" }), h("tds-icon", { tdsAriaHidden: true, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     this.handleToggleOpen();
                 }
-            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-labelledby": labelId, "aria-describedby": helperId, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
+            }, class: `menu-icon ${this.open ? 'open' : 'closed'} ${this.disabled ? 'disabled' : ''}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-labelledby": labelId, "aria-describedby": helperId, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -503,7 +504,7 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '989c425c5a608444533e33ad83313aa56569c225', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-hidden": this.open ? 'false' : 'true', inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'} ${this.disabled ? 'disabled' : ''}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '38fa965b0721f4f30217e20b17488a2133edf3f6', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-hidden": this.open ? 'false' : 'true', inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -514,11 +515,11 @@ export class TdsDropdown {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '6e54bbb0eacf27cfdbf3b393f2c9e690adb394e8', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '4bdaf935cd213f63e7a8665b5d6f69ee0589d7b9', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '112c76fa88eef7798b9b0d435ae03e62880a9ff8', id: helperId, class: {
+            } }, h("slot", { key: 'f325bf93f1888e95c5f2bd8b90d7639d1c8786e4', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '4a5949d7fd632308ac7b2a0ae3e9105feeab1d1e', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '340a871c5c43192dd4e5d130adf10116d2406825', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '055e681faca85a461b07619c42fa0eb48a6ec028', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '10b4059f6f5149c0bb10b4c209c69859bdc28296', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }