@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

package/dist/collection/components/select/select.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
 *,
 *::before,
 *::after {
@@ -22,8 +26,29 @@
 [hidden] {
   display: none !important;
 }
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }slot-fb {
+  display: contents !important;
+}
+
 :host([disabled]:not([disabled=false])) {
   opacity: 0.5;
+  position: relative;
+}
+:host([disabled]:not([disabled=false]))::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  cursor: not-allowed;
 }
 
 .form-ctrl {
@@ -68,14 +93,12 @@ label.visually-hide,
 .form-ctrl__more.visually-hide,
 .form-ctrl__error.visually-hide,
 .form-ctrl__helper.visually-hide {
-  clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   block-size: 1px;
-  inline-size: 1px;
-  margin: -1px;
   overflow: hidden;
-  padding: 0;
   position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
 }
 
 .form-ctrl__float-label {
@@ -83,17 +106,17 @@ label.visually-hide,
   padding-inline: var(--padding-start) 0;
   color: var(--label-color);
   position: absolute;
-  font-size: 1.15em;
+  font-size: 1em;
   transform: translateY(-50%);
-  transform-origin: top left;
   inset-block-start: 50%;
   transition: all 0.125s ease-in;
   opacity: 1;
 }
 :host(.has-focus) .form-ctrl__float-label, :host(.has-value) .form-ctrl__float-label {
-  transform: translateY(-110%);
-  font-size: 0.8em;
+  transform: none;
+  font-size: 0.75em;
   opacity: 0.7;
+  inset-block-start: var(--padding-top);
 }
 .form-ctrl__float-label .form-ctrl__label-charcount {
   opacity: 0;
@@ -102,17 +125,6 @@ label.visually-hide,
 :host(.has-focus) .form-ctrl__float-label .form-ctrl__label-charcount, :host(.has-value) .form-ctrl__float-label .form-ctrl__label-charcount {
   opacity: 1;
 }
-.form-ctrl__textarea .form-ctrl__float-label {
-  inset-block-start: 50%;
-}
-:host(.has-focus) .form-ctrl__textarea .form-ctrl__float-label {
-  inset-block-start: 0;
-  transform: translateY(38%);
-}
-:host(.has-value) .form-ctrl__textarea .form-ctrl__float-label {
-  inset-block-start: 0;
-  transform: translateY(38%);
-}
 
 .form-ctrl__label {
   color: var(--label-color);
@@ -120,6 +132,7 @@ label.visually-hide,
   padding-block-end: var(--padding-bottom);
   line-height: 1;
   display: flex;
+  align-items: center;
 }
 .form-ctrl__label .form-ctrl__label-wrap {
   flex: 1;
@@ -138,18 +151,12 @@ label.visually-hide,
 .form-ctrl__label .form-ctrl__label-charcount {
   margin-block: unset;
   margin-inline: auto 0;
-  font-size: 0.9em;
+  font-size: var(--nano-font-size-2xs);
   opacity: 0.5;
 }
 :host(.has-value) .form-ctrl__label .form-ctrl__label-placeholder {
   opacity: 0.5;
 }
-:host(.has-focus) .form-ctrl__label {
-  color: var(--label-color--focus);
-}
-:host(.is-invalid:not([disabled])) .form-ctrl__label {
-  color: var(--label-color--invalid);
-}
 
 .has-float-label .select__multi-input,
 .has-float-label .select__native-input,
@@ -168,8 +175,16 @@ label.visually-hide,
 .form-ctrl__more {
   block-size: 1em;
   position: relative;
-  margin-block: 4px var(--padding-bottom);
-  margin-inline: 3px 0;
+  margin-block: var(--padding-bottom) 0;
+  margin-inline: 0;
+  opacity: 0;
+  display: none;
+  transition: all var(--nano-transition-fast) ease;
+  transition-behavior: allow-discrete;
+}
+.has-helper .form-ctrl__more, .has-error .form-ctrl__more {
+  display: block;
+  opacity: 1;
 }
 
 .form-ctrl__helper,
@@ -177,7 +192,7 @@ label.visually-hide,
   inset-block-start: 0;
   inset-inline-start: 0;
   position: absolute;
-  font-size: var(--invalid-msg-font-size);
+  font-size: var(--more-font-size);
   line-height: 1.2;
   transition: 0.3s ease-out opacity;
 }
@@ -186,7 +201,7 @@ label.visually-hide,
   font-style: italic;
   color: var(--help-msg-color);
 }
-:host([show-inline-error]:not([show-inline-error=false]):not([disabled]).is-invalid) .form-ctrl__helper {
+:host([show-inline-error]:not([show-inline-error=false], [disabled]).is-invalid) .form-ctrl__helper {
   opacity: 0;
 }
 
@@ -201,6 +216,7 @@ label.visually-hide,
 .form-ctrl__error {
   opacity: 0;
   color: var(--invalid-msg-color);
+  font-style: italic;
 }
 :host(.is-invalid:not([disabled])) .form-ctrl__error {
   opacity: 1;
@@ -226,44 +242,38 @@ label.visually-hide,
   flex: 1 0 auto;
   display: flex;
   background: var(--input-bg-color);
-  border: var(--input-border-style);
-  border-width: var(--input-border-width);
+  border: var(--input-border-style) var(--input-border-width);
   font-size: var(--input-font-size);
-  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
+  padding-inline-start: calc(var(--input-invalid-border-hint-width) - var(--input-border-width)) !important;
 }
-:host(.has-focus) .form-ctrl__input {
-  background: var(--input-bg-color--focus);
-  border: var(--input-border-style--focus);
-  border-width: var(--input-border-width);
-  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
+.form-ctrl__input:focus-visible, .form-ctrl__input:focus-within, :host(.has-focus) .form-ctrl__input {
+  outline: var(--nano-focus-ring-color) solid 3px;
+  outline-offset: -2px;
 }
 :host(.is-invalid:not([disabled])) .form-ctrl__input {
-  background: var(--input-bg-color--invalid);
-  border: var(--input-border-style--invalid);
-  border-width: var(--input-border-width);
-  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);
   padding-inline-start: 0 !important;
 }
 :host(.is-invalid.has-focus:not([disabled])) .form-ctrl__input {
-  background: var(--input-bg-color--invalid);
-  border: var(--input-border-style--invalid-focus);
-  border-width: var(--input-border-width);
-  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+  border-color: var(--color-invalid);
+  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);
   padding-inline-start: 0 !important;
 }
 
 .form-ctrl__input-wrap {
   display: flex;
-  align-items: stretch;
   flex: 1;
   max-inline-size: 100%;
+  align-items: center;
+}
+:host([type=textarea]) .form-ctrl__input-wrap {
+  align-items: start;
 }
 
 .form-ctrl__clear-btn,
 .form-ctrl__slot-end,
 .form-ctrl__slot-start,
 .form-ctrl__slot-value-end {
-  --nano-icon-size: 1.4em;
   margin-block: 0;
   margin-inline: 0;
   font-size: 1em;
@@ -272,40 +282,48 @@ label.visually-hide,
   background-color: transparent;
   background-repeat: no-repeat;
   display: flex;
-  align-items: stretch;
+  align-items: center;
   inline-size: auto;
+  padding-inline-end: var(--padding-end);
+  padding-block: var(--padding-top) var(--padding-bottom);
+}
+.form-ctrl__clear-btn:empty,
+.form-ctrl__slot-end:empty,
+.form-ctrl__slot-start:empty,
+.form-ctrl__slot-value-end:empty {
+  display: none;
+}
+
+.form-ctrl__slot-end {
+  padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);
 }
 
+.form-ctrl__slot-start {
+  padding-inline-end: 0;
+}
 .has-float-label .form-ctrl__slot-start {
   display: none;
 }
 
-.form-ctrl__slot-start::slotted(*),
 .form-ctrl__slot-start ::slotted(*),
-.form-ctrl__slot-end::slotted(*),
 .form-ctrl__slot-end ::slotted(*),
-.form-ctrl__slot-value-end::slotted(*),
-.form-ctrl__slot-value-end ::slotted(*),
-.form-ctrl__slot-value-end * {
-  --nano-icon-size: 1.4em;
+.form-ctrl__slot-value-end ::slotted(:not(slot-fb)) {
   padding-inline: unset;
-  padding-inline: var(--padding-start) var(--padding-end);
-  font-size: 1em;
   align-items: center;
   display: flex;
   block-size: 100%;
   z-index: 1;
 }
-:host([disabled]:not([disabled=false])) .form-ctrl__slot-start::slotted(*),
 :host([disabled]:not([disabled=false])) .form-ctrl__slot-start ::slotted(*),
-:host([disabled]:not([disabled=false])) .form-ctrl__slot-end::slotted(*),
 :host([disabled]:not([disabled=false])) .form-ctrl__slot-end ::slotted(*),
-:host([disabled]:not([disabled=false])) .form-ctrl__slot-value-end::slotted(*),
-:host([disabled]:not([disabled=false])) .form-ctrl__slot-value-end ::slotted(*),
-:host([disabled]:not([disabled=false])) .form-ctrl__slot-value-end * {
+:host([disabled]:not([disabled=false])) .form-ctrl__slot-value-end ::slotted(:not(slot-fb)) {
   pointer-events: none;
 }
 
+.form-ctrl__slot-start ::slotted(*) {
+  margin-inline: var(--padding-start) 0;
+}
+
 .form-ctrl__slot-value-end::slotted(*),
 .form-ctrl__slot-value-end ::slotted(*),
 .form-ctrl__slot-value-end * {
@@ -320,13 +338,13 @@ label.visually-hide,
   appearance: none;
   align-items: center;
   overflow: hidden;
+  padding-block: var(--padding-top) var(--padding-bottom);
 }
 :host(.is-invalid) .form-ctrl__clear-btn {
   color: var(--clear-btn-color--invalid);
 }
 :host(.has-value) .form-ctrl__clear-btn {
-  padding-block: 0;
-  padding-inline: var(--padding-start) var(--padding-end);
+  padding-inline: 0 var(--padding-end);
   opacity: 1;
   inline-size: auto;
 }
@@ -334,114 +352,101 @@ label.visually-hide,
   color: var(--clear-btn-color--hover);
 }
 
+.form-ctrl__validation-icon {
+  padding-block: var(--padding-top) var(--padding-bottom);
+  padding-inline-end: var(--padding-end);
+  display: grid;
+  grid-template-areas: "overlay";
+}
+:host(:not(.is-invalid, .is-valid)) .form-ctrl__validation-icon {
+  display: none;
+}
+
+.form-ctrl__error-icon,
+.form-ctrl__success-icon {
+  color: var(--color-valid);
+  opacity: 0;
+  transition: 0.3s ease-out opacity;
+  grid-area: overlay;
+}
+
+:host(.is-valid) .form-ctrl__success-icon {
+  opacity: 1;
+}
+
+.form-ctrl__error-icon {
+  color: var(--color-invalid);
+}
+:host(.is-invalid) .form-ctrl__error-icon {
+  opacity: 1;
+}
+
 :host {
   /**
-  * @prop --placeholder-color: defaults to var(--nano-input-placeholder-color, initial);
-  * @prop --placeholder-font-style: defaults to var(--nano-input-placeholder-style, initial);
-  * @prop --placeholder-font-weight: defaults to var(--nano-input-placeholder-weight, initial);
-  * @prop --placeholder-opacity: defaults to var(--nano-input-placeholder-opacity, 0.5);
-
-  * @prop --padding-top: defaults to var(--nano-input-padding-top, var(--nano-input-padding, 8px));;
-  * @prop --padding-end: defaults to var(--nano-input-padding-end, var(--nano-input-padding, 8px));
-  * @prop --padding-bottom: defaults to var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));
-  * @prop --padding-start: defaults to var(--nano-input-padding-start, var(--nano-input-padding, 8px));
-
-  * @prop --color-invalid: defaults to nano-color(danger, base, , true);
-  * @prop --color--focus-rgb: defaults to var(--nano-color-base-rgb, nano-color(primary, base, , true));
-
-  * @prop --input-font-size: defaults to var(--nano-input-font-size, 0.87em);
-  * @prop --input-text-color: defaults to var(--nano-input-text-color, #4a4a4a);
-
-  * @prop --input-border-width: defaults to var(--input-border-width-sh, var(--nano-input-border-width, 1px));
-  * @prop --input-border-radius: defaults to var(--nano-input-border-radius, 0);
-
-  * @prop --input-border-style: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);
-  * @prop --input-border-style--focus: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);
-  * @prop --input-border-style--invalid: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);
-  * @prop --input-border-style--invalid-focus: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);
-
-  * @prop --input-bg-color: defaults to var(--nano-input-background-color, #fff);
-  * @prop --input-bg-color--focus: defaults to var(--input-bg-color);
-  * @prop --input-bg-color--invalid: defaults to var(--nano-input-background-color, white);
-
-  * @prop --invalid-msg-color: defaults to rgb(var(--color-invalid) / 100%);
-  * @prop --invalid-msg-font-size: defaults to var(--nano-input-help-font-size, 0.75em);
-
-  * @prop --clear-btn-color: defaults to var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));
-  * @prop --clear-btn-color--hover: defaults to rgb(var(--color--focus-rgb) / 100%);
-  * @prop --clear-btn-color--invalid: defaults to rgb(var(--color-invalid) / 100%);
-
-  * @prop --label-color: defaults to var(--nano-input-label-color, "currentcolor");
-  * @prop --label-color--focus: defaults to var(--label-color);
-  * @prop --label-color-invalid: defaults to var(--nano-input-label-color-invalid, "currentcolor");
-  * @prop --label-font-size: defaults to var(--nano-input-label-color, 1em);
-
-  * @prop --multi-input-value-bg: Tag / multivalue bg. defaults to var(--nano-input-tag-bg, 186 220 240);
-  * @prop --multi-input-value-text-color: Tag / multivalue text. defaults to var(--nano-input-tag-color, #455556);
-  * @prop --multi-input-value-border: Tag / multivalue border. defaults to var(--nano-input-tag-color, #badcf0);
-  */
-  --placeholder-color: var(--nano-input-placeholder-color, initial);
-  --placeholder-font-style: var(--nano-input-placeholder-style, initial);
-  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);
-  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);
-  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));
-  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));
-  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));
-  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));
-  --color-invalid: nano-color(danger, base, , true);
-  --color--focus-rgb:
-    var(
-      --nano-color-base-rgb,
-      nano-color(primary, base, , true)
-    );
-  --input-font-size: var(--nano-input-font-size, 0.87em);
-  --input-text-color: var(--nano-input-text-color, #4a4a4a);
-  --input-border-width: var(--nano-input-border-width, 1px);
-  --input-border-hint-width: 3px;
-  --input-border-color: var(--nano-input-border-color, #e4e6e8);
-  --input-border-radius: var(--nano-input-border-radius, 0);
-  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);
-  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);
-  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);
-  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);
-  --input-bg-color: var(--nano-input-background-color, #fff);
-  --input-bg-color--focus: var(--input-bg-color);
-  --input-bg-color--invalid: var(--nano-input-background-color, white);
-  --invalid-msg-color: rgb(var(--color-invalid) / 100%);
-  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);
-  --help-msg-color: var(--nano-input-help-color, #616d6e);
-  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));
-  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);
+    * @prop --placeholder-color: Color of placeholder. Defaults to var(--nano-color-neutral-1000).
+
+    * @prop --padding-top: Used for most nested element's top vertical spacing. Defaults to var(--nano-spacing-sm).
+    * @prop --padding-end: Used for most nested element's right horizontal spacing. Defaults to var(--nano-spacing-sm).
+    * @prop --padding-bottom: Used for most nested element's bottom vertical spacing. Defaults to var(--nano-spacing-sm).
+    * @prop --padding-start: Used for most nested element's left horizontal spacing. Defaults to var(--nano-spacing-sm).
+
+    * @prop --color-invalid: Color of invalid messaging. Defaults to var(--nano-color-danger-1100).
+    * @prop --color-valid: Color of valid messaging. Defaults to var(--nano-color-success-1000).
+
+    * @prop --input-font-size: Font size of input. Defaults to var(--nano-font-size-sm).
+    * @prop --input-text-color: Text color of input. Defaults to var(--nano-color-base-1000).
+    * @prop --input-border-width: Border width of input. Defaults to 1px.
+    * @prop --input-border-color: Border color of input. Defaults to var(--nano-color-neutral-300).
+    * @prop --input-border-radius: Border radius of input. Defaults to 0px.
+    * @prop --input-invalid-border-hint-width: Border-start width used as an invalid hint. Defaults to 2px.
+    * @prop --input-border-style: Border style of input. Defaults to solid var(--input-border-color).
+    * @prop --input-border-style--focus: Border style of input when focused. Defaults to solid var(--input-border-width) var(--nano-color-primary-700).
+    * @prop --input-bg-color: Background color of input. Defaults to var(--nano-color-base-0).
+
+    * @prop --invalid-msg-color: Color of invalid message. Defaults to var(--color-invalid).
+    * @prop --help-msg-color: Color of help message. Defaults to var(--nano-color-base-1000).
+    * @prop --more-font-size: Font size of helper & error messaging. Defaults to var(--nano-font-size-2xs).
+
+    * @prop --clear-btn-color: Color of clear button. Defaults to rgb(var(--nano-color-base-rgb-1000) / 60%).
+    * @prop --clear-btn-color--hover: Color of clear button on hover. Defaults to rgb(var(--nano-color-base-rgb-1000) / 100%).
+    * @prop --clear-btn-color--invalid: Color of clear button when invalid. Defaults to rgb(var(--color-invalid) / 100%).
+
+    * @prop --label-color: Color of label. Defaults to var(--nano-color-base-1000).
+    * @prop --label-font-size: Font size of label. Defaults to var(--nano-font-size-xs).
+    */
+  --placeholder-color: var(--nano-color-neutral-1000);
+  --padding-top: var(--nano-spacing-sm);
+  --padding-end: var(--nano-spacing-sm);
+  --padding-bottom: var(--nano-spacing-sm);
+  --padding-start: var(--nano-spacing-sm);
+  --color-invalid: var(--nano-color-danger-1100);
+  --color-valid: var(--nano-color-success-1000);
+  --input-font-size: var(--nano-font-size-sm);
+  --input-text-color: var(--nano-color-base-1000);
+  --input-border-width: 1px;
+  --input-border-color: var(--nano-color-neutral-300);
+  --input-border-radius: 0px;
+  --input-invalid-border-hint-width: 2px;
+  --input-border-style: solid var(--input-border-color);
+  --input-border-style--focus: solid var(--input-border-width) var(--nano-color-primary-700);
+  --input-bg-color: var(--nano-color-base-0);
+  --invalid-msg-color: var(--color-invalid);
+  --help-msg-color: var(--nano-color-base-1000);
+  --more-font-size: var(--nano-font-size-2xs);
+  --clear-btn-color: rgb(var(--nano-color-base-rgb-1000) / 60%);
+  --clear-btn-color--hover: rgb(var(--nano-color-base-rgb-1000) / 100%);
   --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);
-  --label-color: var(--nano-input-label-color, "currentcolor");
-  --label-color--focus: var(--label-color);
-  --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");
-  --label-font-size: var(--nano-input-label-color, 1em);
-  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);
-  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);
-  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);
+  --label-color: var(--nano-color-base-1000);
+  --label-font-size: var(--nano-font-size-xs);
   /**
    * @prop --max-menu-height: the maximum of the dropdown menu. Defaults to 50vw.
    */
   position: relative;
   inline-size: 100%;
   padding: 0 !important;
-  font-family: var(--nano-font-family, inherit);
   display: block;
 }
 
-:host(.nano-color) {
-  --input-border-style--focus:
-    var(--nano-input-border-style, solid) var(
-      --nano-color-tint,
-      var(--nano-color-primary-tint, #2689a5)
-    );
-  --multi-input-value-bg: var(--nano-color-tint-rgb);
-  --multi-input-value-border: var(--nano-color-shade);
-  --multi-input-value-text-color: var(--nano-color-contrast);
-  color: var(--nano-color-base);
-}
-
 :host([disabled]:not([disabled=false])) * {
   pointer-events: none !important;
 }
@@ -494,16 +499,17 @@ select {
 }
 .select__native-input::selection {
   background: transparent;
+  color: var(--input-text-color);
 }
 .select__native-input::-moz-selection {
   background: transparent;
+  color: var(--input-text-color);
 }
 .select__native-input::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
-  font-style: var(--placeholder-font-style);
-  font-weight: var(--placeholder-font-weight);
-  opacity: var(--placeholder-opacity);
+  font-style: initial;
+  font-weight: initial;
   line-height: inherit;
   min-block-size: initial;
 }
@@ -538,7 +544,7 @@ select {
 .has-float-label.textarea .select__native-input {
   padding-block-start: 1.8em;
 }
-:host(.masked) .select__native-input {
+.masked .select__native-input {
   opacity: 0;
   position: absolute;
   inset-inline-start: 0;
@@ -566,6 +572,14 @@ select {
   min-block-size: 2.5em;
 }
 
+.select__down-arrow {
+  color: var(--nano-color-primary-1200);
+  transition: rotate var(--nano-transition-x-fast) linear;
+}
+.is-open .select__down-arrow {
+  rotate: 180deg;
+}
+
 .select__multi-wrap {
   padding-block: 0 var(--padding-bottom);
   padding-inline: 0;
@@ -575,9 +589,10 @@ select {
   overflow: hidden;
   align-items: flex-start;
 }
-:host(.has-float-label) .select__multi-wrap {
+.has-float-label .select__multi-wrap {
   padding-block-start: 1em;
 }
+
 .select__multi-input {
   font-family: inherit;
   font-size: inherit;
@@ -607,64 +622,20 @@ select {
   line-height: calc(2.5em - var(--padding-bottom));
   block-size: calc(2.5em - var(--padding-bottom));
 }
-.select__multi-input:last-child {
+.select__multi-input:not(:has(~ nano-tag)) {
   flex: 1;
 }
-.select__multi-value {
+
+nano-tag {
+  --color-non-interactive: var(--nano-color-primary-1000);
   margin-block: var(--padding-bottom) 0;
-  margin-inline: var(--padding-start) -3px;
-  background: rgb(var(--multi-input-value-bg)/80%);
-  color: var(--multi-input-value-text-color);
-  border: 1px solid;
-  border-color: var(--multi-input-value-border);
-  padding: 0.35em 0.5em;
-  display: flex;
-  align-items: center;
-  font-size: var(--input-font-size);
-  letter-spacing: 1px;
-  max-block-size: calc(2.5em - 8px);
-  max-inline-size: calc(100% - 8px);
-  border-radius: 4px;
-}
-.select__multi-value--closable {
-  padding-inline-end: 0;
-}
-.select__multi-value span {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-inline-size: 100%;
-  overflow: hidden;
-}
-.select__multi-value-remove {
-  background-position: center;
-  padding-inline-start: 0.5em;
-  margin: 0;
-  color: inherit;
-  border: 0;
-  outline: none;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  appearance: none;
-  display: flex;
-  align-items: center;
-  inset-block-start: 0;
-  font-size: 1em;
-}
-.select__multi-value-remove .nano-icon {
-  --color: var(--multi-input-value-text-color);
+  margin-inline: var(--padding-start) 0;
+  line-height: 1.4;
 }
 
 .form-ctrl__float-label {
   inline-size: calc(100% - (1em + var(--padding-start) * 2));
 }
-:host(.has-focus.has-multiple) .form-ctrl__float-label {
-  transform: translateY(-110%);
-  font-size: 0.8em;
-}
-:host(.has-value.has-multiple) .form-ctrl__float-label {
-  transform: translateY(21%);
-  inset-block-start: 0;
-}
 
 :host(.has-focus) select,
 :host(.has-focus) a,