@nanoporetech-digital/components 1.15.6 → 2.1.0

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

@@ -7,117 +7,9 @@
 *::after {
   box-sizing: border-box;
 }
-: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, 8px));
-  * @prop --padding-start: defaults to var(--nano-input-padding-start, var(--nano-input-padding, 8px));
-
-  * @prop --color-invalid: defaults to var(--nano-color-danger-rgb, 239, 65, 53);
-  * @prop --color--focus-rgb: defaults to var(--nano-color-base-rgb, var(--nano-color-primary-rgb, 0, 116, 149));
-
-  * @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, 2px));
-  * @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, #fac6c3);
-  * @prop --input-border-style--invalid-focus: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);
-
-  * @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, #fee8de);
-
-  * @prop --invalid-msg-color: defaults to rgba(var(--color-invalid), 1);
-  * @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 rgba(var(--color--focus-rgb), 1);
-  * @prop --clear-btn-color--invalid: defaults to rgba(var(--color-invalid), 1);
-
-  * @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, #90c6e7);
-  */
-  --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, 8px));
-  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));
-  --color-invalid: var(--nano-color-danger-rgb, 239, 65, 53);
-  --color--focus-rgb:
-    var(
-      --nano-color-base-rgb,
-      var(--nano-color-primary-rgb, 0, 116, 149)
-    );
-  --input-font-size: var(--nano-input-font-size, 0.87em);
-  --input-text-color: var(--nano-input-text-color, #4a4a4a);
-  --input-border-width: var(--input-border-width-sh, var(--nano-input-border-width, 2px));
-  --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, #fac6c3);
-  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);
-  --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, #fee8de);
-  --invalid-msg-color: rgba(var(--color-invalid), 1);
-  --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: rgba(var(--color--focus-rgb), 1);
-  --clear-btn-color--invalid: rgba(var(--color-invalid), 1);
-  --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, #90c6e7);
-  position: relative;
-  width: 100%;
-  padding: 0 !important;
-  font-family: var(--nano-font-family, inherit);
-  display: inline-block;
+[hidden] {
+  display: none !important;
 }
-
-: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-context(nano-item:not(.item-label)) {
-  --padding-start: 0;
-}
-
-:host([disabled]:not([disabled=false])) {
-  opacity: 0.7;
-}
-:host([disabled]:not([disabled=false])) * {
-  pointer-events: none !important;
-}
-
 label,
 .more,
 .error,
@@ -148,7 +40,7 @@ label.visually-hide,
   padding-right: 0;
   padding-top: 0;
   padding-bottom: 0;
-  color: var(--input-text-color);
+  color: var(--label-color);
   position: absolute;
   font-size: 1.4em;
   -webkit-transform: translateY(-50%);
@@ -159,7 +51,6 @@ label.visually-hide,
   -webkit-transition: 0.125s ease-in;
   transition: 0.125s ease-in;
   opacity: 0.7;
-  pointer-events: none;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
   .placeholder-as-label {
@@ -179,32 +70,46 @@ label.visually-hide,
   color: var(--invalid-msg-color);
 }
 :host(.has-value) .placeholder-as-label {
-  -webkit-transform: translateY(-110%);
-          transform: translateY(-110%);
+  -webkit-transform: translateY(-120%);
+          transform: translateY(-120%);
   font-size: 0.9em;
 }
-:host(.has-focus.has-multiple) .placeholder-as-label, :host(.has-value.has-multiple) .placeholder-as-label {
-  -webkit-transform: translateY(-75%);
-          transform: translateY(-75%);
-  font-size: 0.9em;
+.textarea .placeholder-as-label {
+  top: 50%;
 }
-:host(.has-multiple) .placeholder-as-label {
-  top: 1.5em;
+:host(.has-focus) .textarea .placeholder-as-label {
+  top: 0;
+  -webkit-transform: translateY(38%);
+          transform: translateY(38%);
 }
-.placeholder-as-label ~ .native-select-wrap {
-  font-size: 1.1em;
+:host(.has-value) .textarea .placeholder-as-label {
+  top: 0;
+  -webkit-transform: translateY(38%);
+          transform: translateY(38%);
 }
 
 .label {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: var(--padding-bottom);
   color: var(--label-color);
   font-size: var(--label-font-size);
+  padding-bottom: var(--padding-bottom);
   line-height: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.label .label-placeholder {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .label .placeholder {
+  margin-left: 0;
+  margin-right: 5px;
+  margin-top: 0;
+  margin-bottom: 0;
   opacity: 0;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -213,6 +118,42 @@ label.visually-hide,
   transition: 0.3s ease opacity;
   font-size: 0.9em;
 }
+@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
+  .label .placeholder {
+    margin-left: unset;
+    margin-right: unset;
+    /* autoprefixer: ignore next */
+    -webkit-margin-start: 0;
+    /* autoprefixer: ignore next */
+    margin-inline-start: 0;
+    /* autoprefixer: ignore next */
+    -webkit-margin-end: 5px;
+    /* autoprefixer: ignore next */
+    margin-inline-end: 5px;
+  }
+}
+.label .charcount {
+  margin-left: auto;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 0.9em;
+  opacity: 0.5;
+}
+@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
+  .label .charcount {
+    margin-left: unset;
+    margin-right: unset;
+    /* autoprefixer: ignore next */
+    -webkit-margin-start: auto;
+    /* autoprefixer: ignore next */
+    margin-inline-start: auto;
+    /* autoprefixer: ignore next */
+    -webkit-margin-end: 0;
+    /* autoprefixer: ignore next */
+    margin-inline-end: 0;
+  }
+}
 :host(.has-value) .label .placeholder {
   opacity: 0.5;
 }
@@ -224,11 +165,11 @@ label.visually-hide,
 }
 
 .more {
+  height: 1em;
   margin-left: 3px;
   margin-right: 0;
   margin-top: 4px;
   margin-bottom: var(--padding-bottom);
-  height: 1em;
   position: relative;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
@@ -258,8 +199,8 @@ label.visually-hide,
 }
 
 .helper {
-  color: var(--help-msg-color);
   font-style: italic;
+  color: var(--help-msg-color);
 }
 :host([show-inline-error]:not([show-inline-error=false]).is-invalid) .helper {
   opacity: 0;
@@ -274,7 +215,7 @@ label.visually-hide,
   opacity: 1;
 }
 
-.select {
+.input {
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
@@ -290,60 +231,156 @@ label.visually-hide,
   width: 100%;
   padding: 0 !important;
   position: relative;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   background: var(--input-bg-color);
   border: var(--input-border-style);
   border-width: var(--input-border-width);
   font-size: var(--input-font-size);
 }
-:host(.has-focus) .select {
-  z-index: 10;
+:host(.has-focus) .input {
   background: var(--input-bg-color--focus);
   border: var(--input-border-style--focus);
   border-width: var(--input-border-width);
 }
-:host(.is-invalid) .select {
+:host(.is-invalid) .input {
   background: var(--input-bg-color--invalid);
   border: var(--input-border-style--invalid);
   border-width: var(--input-border-width);
 }
-:host(.is-invalid.has-focus) .select {
+:host(.is-invalid.has-focus) .input {
   background: var(--input-bg-color--invalid);
   border: var(--input-border-style--invalid-focus);
   border-width: var(--input-border-width);
 }
 
-.native-select-wrap {
+.native-input-wrap {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+.input-clear-icon,
+.end,
+.start,
+.value-end {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  background-position: center;
+  --nano-icon-size: 1.4em;
+  font-size: 1em;
+  border: 0;
+  outline: none;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+  width: auto;
+}
+
+.has-float-label .start {
+  display: none;
+}
+
+.start::slotted(*),
+.start ::slotted(*),
+.end::slotted(*),
+.end ::slotted(*),
+.value-end::slotted(*),
+.value-end ::slotted(*),
+.value-end * {
+  --nano-icon-size: 1.4em;
+  font-size: 1em;
+  padding-left: var(--padding-start);
+  padding-right: var(--padding-end);
+  padding-top: 0;
+  padding-bottom: 0;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+}
+@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
+  .start::slotted(*),
+.start ::slotted(*),
+.end::slotted(*),
+.end ::slotted(*),
+.value-end::slotted(*),
+.value-end ::slotted(*),
+.value-end * {
+    padding-left: unset;
+    padding-right: unset;
+    /* autoprefixer: ignore next */
+    -webkit-padding-start: var(--padding-start);
+    /* autoprefixer: ignore next */
+    padding-inline-start: var(--padding-start);
+    /* autoprefixer: ignore next */
+    -webkit-padding-end: var(--padding-end);
+    /* autoprefixer: ignore next */
+    padding-inline-end: var(--padding-end);
+  }
+}
+:host([disabled]:not([disabled=false])) .start::slotted(*),
+:host([disabled]:not([disabled=false])) .start ::slotted(*),
+:host([disabled]:not([disabled=false])) .end::slotted(*),
+:host([disabled]:not([disabled=false])) .end ::slotted(*),
+:host([disabled]:not([disabled=false])) .value-end::slotted(*),
+:host([disabled]:not([disabled=false])) .value-end ::slotted(*),
+:host([disabled]:not([disabled=false])) .value-end * {
+  pointer-events: none;
 }
 
-.select-mask {
-  border-radius: var(--input-border-radius);
+.value-end::slotted(*),
+.value-end ::slotted(*),
+.value-end * {
+  pointer-events: none;
+}
+
+.input-clear-icon {
+  color: var(--clear-btn-color);
+  padding: 0;
+  opacity: 0;
+  width: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  overflow: hidden;
+}
+:host(.is-invalid) .input-clear-icon {
+  color: var(--clear-btn-color--invalid);
+}
+:host(.has-value) .input-clear-icon {
   padding-left: var(--padding-start);
   padding-right: var(--padding-end);
   padding-top: 0;
   padding-bottom: 0;
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-overflow: inherit;
-  text-transform: inherit;
-  text-align: inherit;
-  white-space: inherit;
-  color: inherit;
-  pointer-events: none;
-  line-height: 2.5em;
-  min-height: 2.5em;
+  opacity: 1;
+  width: auto;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .select-mask {
+  :host(.has-value) .input-clear-icon {
     padding-left: unset;
     padding-right: unset;
     /* autoprefixer: ignore next */
@@ -356,8 +393,126 @@ label.visually-hide,
     padding-inline-end: var(--padding-end);
   }
 }
+.input-clear-icon:hover {
+  color: var(--clear-btn-color--hover);
+}
+
+: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, 8px));
+  * @prop --padding-start: defaults to var(--nano-input-padding-start, var(--nano-input-padding, 8px));
+
+  * @prop --color-invalid: defaults to var(--nano-color-danger-rgb, 239, 65, 53);
+  * @prop --color--focus-rgb: defaults to var(--nano-color-base-rgb, var(--nano-color-primary-rgb, 0, 116, 149));
+
+  * @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, 2px));
+  * @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, #fac6c3);
+  * @prop --input-border-style--invalid-focus: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);
+
+  * @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, #fee8de);
+
+  * @prop --invalid-msg-color: defaults to rgba(var(--color-invalid), 1);
+  * @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 rgba(var(--color--focus-rgb), 1);
+  * @prop --clear-btn-color--invalid: defaults to rgba(var(--color-invalid), 1);
+
+  * @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, #90c6e7);
+  */
+  --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, 8px));
+  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));
+  --color-invalid: var(--nano-color-danger-rgb, 239, 65, 53);
+  --color--focus-rgb:
+    var(
+      --nano-color-base-rgb,
+      var(--nano-color-primary-rgb, 0, 116, 149)
+    );
+  --input-font-size: var(--nano-input-font-size, 0.87em);
+  --input-text-color: var(--nano-input-text-color, #4a4a4a);
+  --input-border-width: var(--input-border-width-sh, var(--nano-input-border-width, 2px));
+  --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, #fac6c3);
+  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);
+  --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, #fee8de);
+  --invalid-msg-color: rgba(var(--color-invalid), 1);
+  --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: rgba(var(--color--focus-rgb), 1);
+  --clear-btn-color--invalid: rgba(var(--color-invalid), 1);
+  --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, #90c6e7);
+  position: relative;
+  width: 100%;
+  padding: 0 !important;
+  font-family: var(--nano-font-family, inherit);
+  display: inline-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-context(nano-item:not(.item-label)) {
+  --padding-start: 0;
+}
+
+:host([disabled]:not([disabled=false])) {
+  opacity: 0.7;
+}
+:host([disabled]:not([disabled=false])) * {
+  pointer-events: none !important;
+}
+
+select {
+  display: none;
+}
 
-.native-select {
+.native-input {
   border-radius: var(--input-border-radius);
   padding-left: var(--padding-start);
   padding-right: var(--padding-end);
@@ -374,6 +529,7 @@ label.visually-hide,
   text-align: inherit;
   white-space: inherit;
   color: inherit;
+  text-overflow: ellipsis;
   color: var(--input-text-color);
   display: inline-block;
   -webkit-box-flex: 1;
@@ -385,19 +541,20 @@ label.visually-hide,
   border: 0;
   outline: none;
   background: transparent;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  -webkit-transition: 0.3s ease opacity;
-  transition: 0.3s ease opacity;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  margin: 0;
   line-height: 2.5em;
   min-height: 2.5em;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  resize: none;
+  overflow: hidden;
+  cursor: default;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .native-select {
+  .native-input {
     padding-left: unset;
     padding-right: unset;
     /* autoprefixer: ignore next */
@@ -410,94 +567,173 @@ label.visually-hide,
     padding-inline-end: var(--padding-end);
   }
 }
-:host(.legacy) .native-select {
-  -webkit-box-sizing: content-box;
-          box-sizing: content-box;
+.native-input::-moz-selection {
+  background: transparent;
 }
-:host(.masked) .native-select {
-  opacity: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
+.native-input::selection {
+  background: transparent;
 }
-:host(.has-float-label) .native-select {
-  opacity: 0;
-  padding-top: 1.8em;
+.native-input::-moz-selection {
+  background: transparent;
 }
-:host(.has-value.has-float-label) .native-select {
-  opacity: 1;
+.native-input[disabled] {
+  opacity: 0.4;
 }
-.native-select:-webkit-autofill {
+.native-input::-webkit-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);
+  line-height: 2.5em;
+  min-height: 2.5em;
+}
+.native-input::-moz-placeholder {
+  color: var(--placeholder-color);
+  font-family: inherit;
+  font-style: var(--placeholder-font-style);
+  font-weight: var(--placeholder-font-weight);
+  opacity: var(--placeholder-opacity);
+  line-height: 2.5em;
+  min-height: 2.5em;
+}
+.native-input:-ms-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);
+  line-height: 2.5em;
+  min-height: 2.5em;
+}
+.native-input::-ms-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);
+  line-height: 2.5em;
+  min-height: 2.5em;
+}
+.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);
+  line-height: 2.5em;
+  min-height: 2.5em;
+}
+.native-input::-moz-placeholder {
+  line-height: 2.8em;
+  text-overflow: ellipsis;
+}
+.native-input:-webkit-autofill {
   background-color: transparent;
 }
-.native-select:invalid {
+.native-input::-webkit-search-decoration, .native-input::-webkit-search-cancel-button, .native-input::-webkit-search-results-button, .native-input::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+          appearance: none;
+}
+.native-input:invalid {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.native-select::-ms-clear {
+.native-input::-ms-clear, .native-input::-ms-reveal {
   display: none;
 }
-.native-select::-ms-expand {
-  display: none;
+.native-input.resizable {
+  resize: vertical;
+  overflow: auto;
 }
-.native-select[disabled] {
-  opacity: 0.4;
+.textarea .native-input {
+  line-height: 1.5em;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  white-space: pre-wrap;
 }
-:host(.has-multiple) .native-select {
-  display: none;
+.textarea .native-input::-webkit-input-placeholder {
+  line-height: 1.5em;
+}
+.textarea .native-input::-moz-placeholder {
+  line-height: 1.5em;
+}
+.textarea .native-input:-ms-input-placeholder {
+  line-height: 1.5em;
 }
-.native-select option {
-  color: black;
+.textarea .native-input::-ms-input-placeholder {
+  line-height: 1.5em;
+}
+.textarea .native-input::placeholder {
+  line-height: 1.5em;
+}
+.has-float-label .native-input {
+  padding-top: 1.4em;
+}
+.has-float-label.textarea .native-input {
+  padding-top: 1.8em;
+}
+.legacy .native-input {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+:host(.masked) .native-input {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
-.multi-wrap {
-  padding-left: 0;
-  padding-right: calc(1.9em + var(--padding-end));
+.select-mask {
+  border-radius: var(--input-border-radius);
+  padding-left: var(--padding-start);
+  padding-right: var(--padding-end);
   padding-top: 0;
-  padding-bottom: calc(var(--padding-bottom) / 2);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  max-width: 100%;
+  padding-bottom: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  text-align: inherit;
+  white-space: inherit;
+  color: inherit;
+  pointer-events: none;
+  line-height: 2.5em;
+  min-height: 2.5em;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .multi-wrap {
+  .select-mask {
     padding-left: unset;
     padding-right: unset;
     /* autoprefixer: ignore next */
-    -webkit-padding-start: 0;
+    -webkit-padding-start: var(--padding-start);
     /* autoprefixer: ignore next */
-    padding-inline-start: 0;
+    padding-inline-start: var(--padding-start);
     /* autoprefixer: ignore next */
-    -webkit-padding-end: calc(1.9em + var(--padding-end));
+    -webkit-padding-end: var(--padding-end);
     /* autoprefixer: ignore next */
-    padding-inline-end: calc(1.9em + var(--padding-end));
+    padding-inline-end: var(--padding-end);
   }
 }
-:host(.has-clr-btn) .multi-wrap {
+
+.multi-wrap {
   padding-left: 0;
-  padding-right: calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2));
+  padding-right: 0;
   padding-top: 0;
   padding-bottom: calc(var(--padding-bottom) / 2);
-}
-@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  :host(.has-clr-btn) .multi-wrap {
-    padding-left: unset;
-    padding-right: unset;
-    /* autoprefixer: ignore next */
-    -webkit-padding-start: 0;
-    /* autoprefixer: ignore next */
-    padding-inline-start: 0;
-    /* autoprefixer: ignore next */
-    -webkit-padding-end: calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2));
-    /* autoprefixer: ignore next */
-    padding-inline-end: calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2));
-  }
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  max-width: 100%;
 }
 :host(.has-float-label) .multi-wrap {
   padding-top: 1.3em;
@@ -532,7 +768,7 @@ label.visually-hide,
       -ms-flex: 0;
           flex: 0;
   position: relative;
-  min-height: calc(2.8em - var(--padding-top));
+  min-height: calc(2.78em - var(--padding-top));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
@@ -559,67 +795,6 @@ label.visually-hide,
       -ms-flex: 1;
           flex: 1;
 }
-.multi-select-box {
-  position: absolute;
-  background: var(--nano-layer-bg, #fff);
-  min-width: calc(100% + (var(--input-border-width) * 2));
-  z-index: var(--nano-layer-index-dropdown, 300);
-  margin: 0;
-  font-size: 1.15em;
-  line-height: 1.4;
-  max-height: 50vh;
-  overflow-y: auto;
-  -ms-scroll-chaining: none;
-      overscroll-behavior: none;
-  -webkit-transition: opacity 0.2s ease;
-  transition: opacity 0.2s ease;
-  opacity: 0;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  border-radius: var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));
-  -webkit-box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));
-          box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));
-  padding: var(--padding-top) 0 var(--padding-bottom);
-  border: var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));
-}
-.multi-select-box--open {
-  opacity: 1;
-}
-.multi-select-box li {
-  padding-left: var(--padding-start);
-  padding-right: var(--padding-end);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  font-size: var(--input-font-size);
-  cursor: pointer;
-  list-style: none;
-  color: var(--input-text-color);
-}
-@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .multi-select-box li {
-    padding-left: unset;
-    padding-right: unset;
-    /* autoprefixer: ignore next */
-    -webkit-padding-start: var(--padding-start);
-    /* autoprefixer: ignore next */
-    padding-inline-start: var(--padding-start);
-    /* autoprefixer: ignore next */
-    -webkit-padding-end: var(--padding-end);
-    /* autoprefixer: ignore next */
-    padding-inline-end: var(--padding-end);
-  }
-}
-:host(.nano-color) .multi-select-box li {
-  color: black;
-}
-.multi-select-box li:hover, .multi-select-box li:focus {
-  color: var(--color--focus-contrast);
-  outline: none;
-  background: rgba(var(--multi-input-value-bg), 0.2);
-}
-:host(.nano-color) .multi-select-box li:hover, :host(.nano-color) .multi-select-box li:focus {
-  background: rgba(var(--nano-color-base-rgb), 0.2);
-}
 .multi-value {
   margin-left: 4px;
   margin-right: 0;
@@ -627,7 +802,7 @@ label.visually-hide,
   margin-bottom: 0;
   background: rgba(var(--multi-input-value-bg), 0.8);
   color: var(--multi-input-value-text-color);
-  border: 2px solid;
+  border: 1px solid;
   border-color: var(--multi-input-value-border);
   padding: 0.3em 0.5em;
   border-radius: 3px;
@@ -709,118 +884,10 @@ label.visually-hide,
   --color: var(--multi-input-value-text-color);
 }
 
-.select-down-icon {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  background-position: center;
-  padding-left: var(--padding-start);
-  padding-right: var(--padding-end);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  color: var(--input-text-color);
-  font-size: 1.4em;
-  right: 0;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  pointer-events: none;
-}
-@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .select-down-icon {
-    padding-left: unset;
-    padding-right: unset;
-    /* autoprefixer: ignore next */
-    -webkit-padding-start: var(--padding-start);
-    /* autoprefixer: ignore next */
-    padding-inline-start: var(--padding-start);
-    /* autoprefixer: ignore next */
-    -webkit-padding-end: var(--padding-end);
-    /* autoprefixer: ignore next */
-    padding-inline-end: var(--padding-end);
-  }
-}
-:host(.is-invalid) .select-down-icon {
-  color: var(--clear-btn-color--invalid);
-}
-:host(.rtl) .select-down-icon {
-  right: unset;
-  left: 0;
-}
-:host(.has-multiple) .select-down-icon {
-  pointer-events: all;
-}
-:host(.masked) .select-down-icon {
-  position: relative;
-}
-
-.select-clear-icon {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  background-position: center;
-  padding-left: var(--padding-start);
-  padding-right: var(--padding-end);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  font-size: 1.4em;
-  color: var(--clear-btn-color);
-  border: 0;
-  outline: none;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  visibility: hidden;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  right: calc(1.4em + var(--padding-end));
-}
-@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .select-clear-icon {
-    padding-left: unset;
-    padding-right: unset;
-    /* autoprefixer: ignore next */
-    -webkit-padding-start: var(--padding-start);
-    /* autoprefixer: ignore next */
-    padding-inline-start: var(--padding-start);
-    /* autoprefixer: ignore next */
-    -webkit-padding-end: var(--padding-end);
-    /* autoprefixer: ignore next */
-    padding-inline-end: var(--padding-end);
-  }
-}
-.select-clear-icon:hover {
-  color: var(--clear-btn-color--hover);
-}
-:host(.rtl) .select-clear-icon {
-  right: unset;
-  left: calc(1.4em + var(--padding-end));
-}
-:host(.is-invalid) .select-clear-icon {
-  color: var(--clear-btn-color--invalid);
-}
-:host(.has-value) .select-clear-icon {
-  visibility: visible;
-}
-.select-clear-icon nano-icon {
-  --color: inherit;
+:host(.has-focus.has-multiple) .placeholder-as-label {
+  -webkit-transform: translateY(-120%);
+          transform: translateY(-120%);
+  font-size: 0.9em;
 }
 
 :host(.has-focus) select,