@scania/tegel 0.0.9 → 0.0.11

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

@@ -1,464 +1,290 @@
-:root,
-.tds-mode-light {
-  /* This one is overriding the --tds-link css for the link component. */
-  --tds-link-text-decoration: none;
-  --tds-dropdown-color: var(--tds-grey-958);
-  --tds-dropdown-background: var(--tds-grey-50);
-  --tds-dropdown-background-hover: var(--tds-grey-100);
-  --tds-dropdown-disabled: var(--tds-grey-400);
-  --tds-dropdown-border: var(--tds-grey-100);
-  --tds-dropdown-label-inside: var(--tds-grey-700);
-  --tds-dropdown-label-outside: var(--tds-grey-958);
-  --tds-dropdown-placeholder: var(--tds-grey-700);
-  --tds-dropdown-border-not-focused: var(--tds-grey-600);
-  --tds-dropdown-option-color: var(--tds-grey-900);
-  --tds-dropdown-option-disabled-color: var(--tds-grey-400);
-  --tds-dropdown-background-disabled: var(--tds-dropdown-background);
-}
-:root .tds-mode-variant-primary,
-.tds-mode-light .tds-mode-variant-primary {
-  --tds-dropdown-background: var(--tds-grey-50);
-  --tds-dropdown-background-hover: var(--tds-grey-100);
-}
-:root .tds-mode-variant-secondary,
-.tds-mode-light .tds-mode-variant-secondary {
-  --tds-dropdown-background: var(--tds-white);
-  --tds-dropdown-background-hover: var(--tds-grey-50);
+: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: 4px 4px 0 0;
 }
-
-.tds-mode-dark {
-  --tds-link-text-decoration: none;
-  --tds-dropdown-color: var(--tds-grey-400);
-  --tds-dropdown-background: var(--tds-grey-868);
-  --tds-dropdown-background-hover: var(--tds-grey-800);
-  --tds-dropdown-disabled: var(--tds-grey-800);
-  --tds-dropdown-border: var(--tds-grey-800);
-  --tds-dropdown-label-inside: var(--tds-grey-400);
-  --tds-dropdown-label-outside: var(--tds-grey-100);
-  --tds-dropdown-placeholder: var(--tds-grey-400);
-  --tds-dropdown-border-not-focused: var(--tds-grey-600);
-  --tds-dropdown-option-color: var(--tds-grey-50);
-  --tds-dropdown-option-disabled-color: var(--tds-grey-800);
-  --tds-dropdown-background-disabled: var(--tds-dropdown-background);
-}
-.tds-mode-dark .tds-mode-variant-primary {
-  --tds-dropdown-background: var(--tds-grey-868);
-  --tds-dropdown-background-hover: var(--tds-grey-800);
-}
-.tds-mode-dark .tds-mode-variant-secondary {
-  --tds-dropdown-background: var(--tds-grey-900);
-  --tds-dropdown-background-hover: var(--tds-grey-800);
+:host button:hover {
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom-hover);
 }
-
-.tds-dropdown-helper {
-  font: var(--tds-detail-ex-05);
-  letter-spacing: var(--tds-detail-ex-05-ls);
-  color: var(--tds-grey-700);
-  margin-top: var(--tds-spacing-element-4);
+:host button .value-wrapper {
+  padding: 0 16px;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
-.tds-dropdown-helper .tds-dropdown-error-icon {
-  width: 16px;
-  height: 16px;
-  padding-right: 9px;
-  display: none;
-}
-
-.tds-dropdown-label-inside {
-  font: var(--tds-detail-ex-07);
-  letter-spacing: var(--tds-detail-ex-07-ls);
-  color: var(--tds-dropdown-label-inside);
-}
-
-.tds-dropdown-label-outside {
-  font: var(--tds-detail-ex-05);
-  letter-spacing: var(--tds-detail-ex-05-ls);
-  display: block;
-  color: var(--tds-dropdown-label-outside);
-  margin-bottom: var(--tds-spacing-element-8);
-}
-
-:host,
-::slotted(*) {
-  color: var(--tds-grey-958);
-  box-sizing: border-box;
-  box-sizing: border-box;
-}
-:host *,
-::slotted(*) * {
-  box-sizing: border-box;
+:host button.placeholder {
+  color: var(--tds-dropdown-placeholder-color);
 }
-
-:host,
-::slotted(*) {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-grey-958);
-  box-sizing: border-box;
+:host button.value {
+  color: var(--tds-dropdown-value-color);
 }
-:host .tds-dropdown-label-outside,
-::slotted(*) .tds-dropdown-label-outside {
-  color: var(--tds-dropdown-label-outside);
-  text-decoration: none;
+:host button:focus {
+  border-bottom-color: transparent;
 }
-
-:host {
-  position: relative;
-  z-index: auto;
+:host button:focus::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--tds-dropdown-border-bottom-open);
 }
-:host::part(dropdown-filter-disabled) {
-  cursor: not-allowed;
-  caret-color: transparent;
-  pointer-events: none;
-  color: var(--tds-dropdown-disabled);
-  border: none;
+:host button.error {
+  border-bottom: 1px solid var(--tds-negative);
 }
-:host::part(dropdown-filter-disabled)::placeholder {
-  color: var(--tds-dropdown-disabled);
+:host button:disabled {
+  color: var(--tds-dropdown-disabled-color);
+  border-bottom: 1px solid transparent;
 }
 
-.tds-dropdown {
-  position: relative;
+:host .filter {
   display: flex;
-  flex-flow: column wrap;
-  width: 100%;
-  border: 0;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  background-color: var(--tds-dropdown-bg);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom);
+  padding-left: 16px;
+  border-radius: 4px 4px 0 0;
+}
+:host .filter:hover {
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom-hover);
 }
-.tds-dropdown,
-.tds-dropdown * {
-  box-sizing: border-box;
+:host .filter.disabled {
+  color: var(--tds-dropdown-disabled-color);
 }
-.tds-dropdown .tds-dropdown-toggle {
-  font: var(--tds-detail-ex-02);
-  letter-spacing: var(--tds-detail-ex-02-ls);
-  color: var(--tds-dropdown-color);
+:host .filter .value-wrapper {
   display: flex;
-  align-items: center;
-  background-color: var(--tds-dropdown-background);
-  cursor: pointer;
-  transition: box-shadow 0.1s ease-in, border-bottom-color 150ms ease;
-  border-radius: 4px 4px 0 0;
-  border: none;
-  border-bottom: 1px solid var(--tds-dropdown-border-not-focused);
-  box-shadow: none;
   width: 100%;
-  text-align: left;
-  outline: none;
-  padding: 20px 16px;
-  display: flex;
-  align-items: center;
-}
-.tds-dropdown .tds-dropdown-toggle:hover {
-  border-bottom-color: var(--tds-grey-600);
+  height: 100%;
 }
-.tds-dropdown .tds-dropdown-toggle:focus::before {
-  content: " ";
+:host .filter .label-inside-as-placeholder {
   position: absolute;
-  z-index: 2;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  border-bottom: 2px solid var(--tds-blue-400);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-dropdown-placeholder-color);
 }
-.tds-dropdown .tds-dropdown-toggle:active, .tds-dropdown .tds-dropdown-toggle.active .tds-dropdown .tds-dropdown-toggle.selected {
-  border-bottom-color: var(--tds-dropdown-border-not-focused);
+:host .filter .label-inside-as-placeholder.lg {
+  top: 20px;
 }
-.tds-dropdown .tds-dropdown-toggle.is-filter {
-  transition: border 0.1s ease-in 0.1s;
-  cursor: text;
+:host .filter .label-inside-as-placeholder.md {
+  top: 16px;
+}
+:host .filter .label-inside-as-placeholder.sm {
+  display: none;
 }
-.tds-dropdown .tds-dropdown-toggle-lg {
-  padding: 20px 16px;
+:host .filter .label-inside-as-placeholder.selected {
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  transition: all 0.2s ease-in-out;
 }
-.tds-dropdown .tds-dropdown-toggle-md {
-  padding: 16px;
+:host .filter .label-inside-as-placeholder.selected.lg {
+  top: 12px;
 }
-.tds-dropdown .tds-dropdown-toggle-sm {
-  padding: 12px 16px;
+:host .filter .label-inside-as-placeholder.selected.md {
+  top: 8px;
 }
-.tds-dropdown .tds-dropdown-toggle.tds-dropdown-toggle-label-inside-lg {
-  padding: 20px 16px 16px;
+:host .filter .label-inside-as-placeholder.selected.sm {
+  display: none;
 }
-.tds-dropdown .tds-dropdown-toggle.tds-dropdown-toggle-label-inside-md {
-  padding: 16px 16px 12px;
+:host .filter .label-inside-as-placeholder.selected + .placeholder:not(.sm) {
+  margin-top: 8px;
 }
-.tds-dropdown .tds-dropdown-toggle--selected:not(:focus) {
-  border-bottom: 1px solid var(--tds-dropdown-border-not-focused);
+:host .filter.focus {
+  border-bottom-color: transparent;
 }
-.tds-dropdown .tds-dropdown-arrow {
-  width: 20px;
+:host .filter.focus::before {
+  content: "";
   position: absolute;
-  right: 16px;
-  color: inherit;
-  transform: rotate(0);
-  transition: transform ease 250ms;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--tds-dropdown-border-bottom-open);
 }
-.tds-dropdown .tds-dropdown-placeholder {
-  color: var(--tds-grey-700);
+:host .filter input {
+  flex: 1;
+  all: unset;
+  width: 100%;
 }
-.tds-dropdown .tds-dropdown-label {
-  display: grid;
-  width: calc(100% - 25px);
+:host .filter input::placeholder {
+  color: var(--tds-dropdown-placeholder-color);
 }
-.tds-dropdown .tds-dropdown-label-container {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+:host .filter input:disabled::placeholder {
+  color: var(--tds-dropdown-disabled-color);
 }
-.tds-dropdown.tds-dropdown.tds-dropdown-sm .tds-dropdown-label-container--label-inside {
-  padding-bottom: 12px;
+:host .filter tds-icon {
+  margin-right: 16px;
+  z-index: 101;
 }
-.tds-dropdown .tds-dropdown-filter {
-  border: 0;
-  outline: none;
+
+:host {
+  display: block;
+  position: relative;
+  z-index: 100;
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-dropdown-link);
-  width: 100%;
-  background: transparent;
 }
-.tds-dropdown .tds-dropdown-filter:focus {
-  outline: none;
+:host .label-outside {
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-dropdown-label-color);
+  margin-bottom: 8px;
 }
-.tds-dropdown .tds-dropdown-filter::placeholder {
-  color: var(--tds-grey-700);
-  opacity: 1;
+:host .label-outside.disabled {
+  color: var(--tds-dropdown-disabled-color);
 }
-.tds-dropdown .tds-dropdown-menu {
-  z-index: 100;
-  background-color: var(--tds-dropdown-background);
-  position: absolute;
-  top: 100%;
-  left: 0;
-  min-width: 100%;
-  max-height: 360px;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 0 1px 1px;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
-  border-left-color: var(--tds-dropdown-border);
-  border-right-color: var(--tds-dropdown-border);
-  overflow-x: hidden;
-  overflow-y: auto;
-  transform: scaleY(0);
-  transform-origin: top;
-  transition: transform 250ms ease;
-}
-.tds-dropdown .tds-dropdown-menu::-webkit-scrollbar {
-  width: 4px;
-  background-color: inherit;
+:host .dropdown-select {
+  position: relative;
 }
-.tds-dropdown .tds-dropdown-menu::-webkit-scrollbar-thumb {
-  background-color: var(--tds-grey-300);
+: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);
 }
-.tds-dropdown .tds-dropdown-menu ::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
+: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);
 }
-.tds-dropdown.tds-dropdown-lg .tds-dropdown-toggle {
-  height: 56px;
+:host .dropdown-select .label-inside.lg {
+  top: 12px;
+  left: 16px;
 }
-.tds-dropdown.tds-dropdown-md .tds-dropdown-toggle {
-  height: 48px;
+:host .dropdown-select .label-inside.md {
+  top: 8px;
+  left: 16px;
 }
-.tds-dropdown.tds-dropdown-sm .tds-dropdown-toggle {
-  height: 40px;
+:host .dropdown-select .label-inside.sm {
+  display: none;
 }
-
-:host(.tds-dropdown--open-upwards) .tds-dropdown .tds-dropdown-menu {
-  top: auto;
-  bottom: 100%;
-  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.1);
-  transform-origin: bottom;
+:host .dropdown-select .label-inside + .placeholder:not(.sm) {
+  margin-top: 8px;
 }
-
-:host(.tds-dropdown--open-upwards[label-position=outside]) span.tds-dropdown-menu {
-  bottom: calc(100% - 24px);
+:host .dropdown-select .placeholder {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-
-:host([disabled=true]) {
-  cursor: not-allowed;
+:host .dropdown-select .label-inside-as-placeholder {
+  color: var(--tds-dropdown-placeholder-color);
 }
-:host([disabled=true]) .tds-dropdown .tds-dropdown-toggle {
-  pointer-events: none;
-  color: var(--tds-dropdown-option-disabled-color);
-  border: none;
-  padding: 0 16px;
+:host .dropdown-select .label-inside-as-placeholder.selected {
+  position: absolute;
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  transition: all 0.2s ease-in-out;
 }
-:host([disabled=true]) .tds-dropdown .tds-dropdown-toggle .tds-dropdown-placeholder {
-  color: var(--tds-dropdown-placeholder);
+:host .dropdown-select .label-inside-as-placeholder.selected.lg {
+  top: 12px;
 }
-:host([disabled=true]) .tds-dropdown .tds-dropdown-toggle .tds-dropdown-label-inside {
-  color: var(--tds-dropdown-label-inside);
+:host .dropdown-select .label-inside-as-placeholder.selected.md {
+  top: 8px;
 }
-:host([disabled=true]) .tds-dropdown .tds-dropdown-toggle:focus::before {
-  content: none;
+:host .dropdown-select .label-inside-as-placeholder.selected.sm {
+  display: none;
 }
-
-:host(.tds-dropdown--error) .tds-dropdown .tds-dropdown-toggle {
-  border-color: var(--tds-negative);
+:host .dropdown-select .label-inside-as-placeholder.selected + .placeholder:not(.sm) {
+  margin-top: 8px;
 }
-:host(.tds-dropdown--error) .tds-dropdown .tds-dropdown-toggle:focus::before {
-  border-color: var(--tds-negative);
+:host .dropdown-select.lg {
+  height: 55px;
 }
-:host(.tds-dropdown--error) .tds-dropdown-helper {
-  color: var(--tds-negative);
+:host .dropdown-select.md {
+  height: 47px;
 }
-:host(.tds-dropdown--error) .tds-dropdown-helper .tds-dropdown-error-icon {
-  display: flex;
+:host .dropdown-select.sm {
+  height: 39px;
 }
-
-:host ::slotted(tds-dropdown-option) {
+:host .helper {
+  margin-top: 4px;
+  color: var(--tds-dropdown-helper-color);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: flex;
-  padding: var(--tds-spacing-element-16);
-  background-color: var(--tds-dropdown-background);
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid var(--tds-dropdown-border);
-  opacity: 0;
-  visibility: hidden;
-  cursor: pointer;
-  box-sizing: border-box;
-  color: var(--tds-dropdown-option-color);
-}
-:host ::slotted(tds-dropdown-option:last-child) {
-  border-bottom-color: transparent;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+  align-items: center;
+  gap: 8px;
 }
-:host ::slotted(tds-dropdown-option:hover),
-:host ::slotted(tds-dropdown-option:focus) {
-  background-color: var(--tds-dropdown-background-hover);
+:host .helper.error {
+  color: var(--tds-negative);
 }
-:host ::slotted(tds-dropdown-option:hover:not(:focus):not(tds-dropdown-option.selected)) {
-  background-color: var(--tds-dropdown-background-hover);
+:host .helper.disabled {
+  color: var(--tds-dropdown-disabled-color);
 }
-:host ::slotted(tds-dropdown-option:hover:focus) {
-  outline: none;
+:host .dropdown-list {
+  position: absolute;
+  margin-top: 1px;
+  width: 100%;
+  transform-origin: top;
+  transition: transform 0.2s ease-in-out;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px 0;
+  border-radius: 0 0 4px 4px;
+  overflow-y: auto;
 }
-:host ::slotted(tds-dropdown-option:focus) {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+:host .dropdown-list::-webkit-scrollbar {
+  width: 4px;
+  background-color: inherit;
 }
-:host ::slotted(tds-dropdown-option.tds-dropdown--selected),
-:host ::slotted(tds-dropdown-option.selected),
-:host ::slotted(tds-dropdown-option.active),
-:host ::slotted(tds-dropdown-option:active) {
-  background-color: var(--tds-dropdown-background-hover);
-  border-top: 1px solid var(--tds-dropdown-border);
-  border-bottom: 1px solid var(--tds-dropdown-border);
+:host .dropdown-list::-webkit-scrollbar-thumb {
+  background-color: var(--tds-grey-300);
 }
-:host ::slotted(tds-dropdown-option.tds-option--no-result) {
-  cursor: not-allowed;
-  pointer-events: none;
+:host .dropdown-list ::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
 }
-:host ::slotted(tds-dropdown-option.tds-dropdown-option-disabled),
-:host ::slotted(tds-dropdown-option.selected.tds-dropdown-option-disabled) {
-  cursor: not-allowed;
-  color: var(--tds-dropdown-option-disabled-color);
-  background-color: var(--tds-dropdown-background-disabled);
+:host .dropdown-list.lg {
+  max-height: 312px;
 }
-
-:host(.tds-dropdown--open-upwards) ::slotted(tds-dropdown-option:first-child) {
-  border-radius: 4px 4px 0 0;
+:host .dropdown-list.md {
+  max-height: 312px;
 }
-:host(.tds-dropdown--open-upwards) ::slotted(tds-dropdown-option:last-child) {
-  border-radius: 0;
-  border-bottom: 1px solid var(--tds-dropdown-border);
+:host .dropdown-list.sm {
+  max-height: 260px;
 }
-
-.tds-option-label {
-  margin: auto 0;
+:host .dropdown-list.up {
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 1px;
+  transform-origin: bottom;
   display: flex;
-  align-content: center;
-  text-decoration: none;
-  flex-grow: 2;
-}
-
-.tds-option-checkmark {
-  color: inherit;
-  opacity: 0;
-  transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
-  margin-left: var(--tds-spacing-element-16);
-}
-.tds-option-checkmark path {
-  color: var(--tds-dropdown-option-color);
-}
-
-:host([size=sm]) ::slotted(tds-dropdown-option) {
-  padding: var(--tds-spacing-element-12) var(--tds-spacing-element-16);
-}
-
-:host(.tds-dropdown--open) .tds-dropdown .tds-dropdown-toggle {
-  box-shadow: 0 -1px 3px -1px rgba(0, 0, 0, 0.1);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  flex-direction: column-reverse;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 3px 0;
+  border-radius: 4px 4px 0 0;
 }
-:host(.tds-dropdown--open) .tds-dropdown .tds-dropdown-toggle.is-filter::before {
-  content: " ";
-  position: absolute;
-  z-index: 2;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  border-bottom: 1px solid var(--tds-blue-400);
+:host .dropdown-list.up.label-outside {
+  bottom: calc(100% - 24px);
 }
-:host(.tds-dropdown--open) .tds-dropdown .tds-dropdown-arrow {
-  transform: rotate(180deg);
+:host .dropdown-list.closed {
+  transform: scaleY(0);
+  visibility: hidden;
 }
-:host(.tds-dropdown--open) .tds-dropdown .tds-dropdown-menu {
+:host .dropdown-list.open {
   transform: scaleY(1);
 }
-:host(.tds-dropdown--open) ::slotted(tds-dropdown-option) {
-  visibility: visible;
-  opacity: 1;
-}
-
-:host(.selected) .tds-option-checkmark {
-  opacity: 1;
-}
-
-.tds-dropdown-label-inside {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-dropdown-label-inside);
-  position: absolute;
-  transition: transform 250ms ease, color 200ms ease;
-  width: calc(100% - 63px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transform: translate(0, -10px);
-  font-size: 10px;
-}
-
-.tds-dropdown-label-container.tds-dropdown-label-container--label-inside .tds-dropdown-placeholder {
-  display: block;
-  padding-top: 4px;
-}
-
-.tds-dropdown-lg .tds-dropdown-label-inside {
-  display: block;
-  top: 16px;
+:host .dropdown-list .no-result {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  background-color: var(--tds-dropdown-bg);
 }
-
-.tds-dropdown-md .tds-dropdown-label-inside {
-  display: block;
-  top: 12px;
+:host .dropdown-list .no-result.lg {
+  height: 56px;
 }
-
-.tds-dropdown.tds-dropdown-sm .tds-dropdown-label-inside {
-  display: none;
+:host .dropdown-list .no-result.md {
+  height: 48px;
 }
-
-.tds-dropdown-multiselect-result {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+:host .dropdown-list .no-result.sm {
+  height: 40px;
 }
-
-.tds-option-checkbox {
-  margin-right: 8px;
+:host tds-icon {
+  transition: transform 0.2s ease-in-out;
 }
-
-.tds-form-label {
-  display: flex;
+:host tds-icon.open {
+  transform: rotateZ(180deg);
 }