@nanoporetech-digital/components 2.6.0 → 2.9.0

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

@@ -10,10 +10,47 @@
 [hidden] {
   display: none !important;
 }
+:host([disabled]:not([disabled=false])) {
+  opacity: 0.5;
+}
+
+.form-ctrl {
+  min-width: 100%;
+  display: block;
+}
+.form-ctrl.has-helper-end {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  opacity: 0;
+}
+.form-ctrl.has-helper-end.is-ready {
+  opacity: 1;
+}
+.form-ctrl.has-helper-end .form-ctrl__wrapper {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 100%;
+          flex: 1 1 100%;
+}
+.form-ctrl.has-helper-end .form-ctrl__helper-end {
+  display: none;
+}
+.form-ctrl.has-helper-end.has-enough-width .form-ctrl__helper-end {
+  display: block;
+}
+.form-ctrl.has-helper-end.has-enough-width .form-ctrl__helper {
+  display: none;
+}
+
+.form-ctrl__wrapper {
+  display: block;
+}
+
 label,
-.more,
-.error,
-.helper {
+.form-ctrl__more,
+.form-ctrl__error,
+.form-ctrl__helper {
   display: block;
   width: 100%;
   overflow: hidden;
@@ -21,9 +58,9 @@ label,
   text-overflow: ellipsis;
 }
 label.visually-hide,
-.more.visually-hide,
-.error.visually-hide,
-.helper.visually-hide {
+.form-ctrl__more.visually-hide,
+.form-ctrl__error.visually-hide,
+.form-ctrl__helper.visually-hide {
   clip: rect(1px, 1px, 1px, 1px);
   -webkit-clip-path: inset(50%);
           clip-path: inset(50%);
@@ -35,14 +72,16 @@ label.visually-hide,
   position: absolute;
 }
 
-.placeholder-as-label {
-  padding-left: var(--padding-start);
-  padding-right: 0;
+.form-ctrl__float-label {
   padding-top: 0;
   padding-bottom: 0;
+  -webkit-padding-end: 0;
+          padding-inline-end: 0;
+  -webkit-padding-start: var(--padding-start);
+          padding-inline-start: var(--padding-start);
   color: var(--label-color);
   position: absolute;
-  font-size: 1.4em;
+  font-size: 1.15em;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   -webkit-transform-origin: top left;
@@ -50,45 +89,37 @@ label.visually-hide,
   top: 50%;
   -webkit-transition: 0.125s ease-in;
   transition: 0.125s ease-in;
-  opacity: 0.7;
+  opacity: 1;
 }
-@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .placeholder-as-label {
-    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: 0;
-    /* autoprefixer: ignore next */
-    padding-inline-end: 0;
-  }
+:host(.has-focus) .form-ctrl__float-label, :host(.has-value) .form-ctrl__float-label {
+  -webkit-transform: translateY(-110%);
+          transform: translateY(-110%);
+  font-size: 0.8em;
+  opacity: 0.7;
 }
-:host(.is-invalid) .placeholder-as-label {
-  color: var(--invalid-msg-color);
+.form-ctrl__float-label .form-ctrl__label-charcount {
+  opacity: 0;
+  -webkit-transition: opacity 0.125s ease-in;
+  transition: opacity 0.125s ease-in;
 }
-:host(.has-value) .placeholder-as-label {
-  -webkit-transform: translateY(-120%);
-          transform: translateY(-120%);
-  font-size: 0.9em;
+:host(.has-focus) .form-ctrl__float-label .form-ctrl__label-charcount, :host(.has-value) .form-ctrl__float-label .form-ctrl__label-charcount {
+  opacity: 1;
 }
-.textarea .placeholder-as-label {
+.form-ctrl__textarea .form-ctrl__float-label {
   top: 50%;
 }
-:host(.has-focus) .textarea .placeholder-as-label {
+:host(.has-focus) .form-ctrl__textarea .form-ctrl__float-label {
   top: 0;
   -webkit-transform: translateY(38%);
           transform: translateY(38%);
 }
-:host(.has-value) .textarea .placeholder-as-label {
+:host(.has-value) .form-ctrl__textarea .form-ctrl__float-label {
   top: 0;
   -webkit-transform: translateY(38%);
           transform: translateY(38%);
 }
 
-.label {
+.form-ctrl__label {
   color: var(--label-color);
   font-size: var(--label-font-size);
   padding-bottom: var(--padding-bottom);
@@ -97,7 +128,7 @@ label.visually-hide,
   display: -ms-flexbox;
   display: flex;
 }
-.label .label-placeholder {
+.form-ctrl__label .form-ctrl__label-wrap {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
@@ -105,11 +136,15 @@ label.visually-hide,
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.label .placeholder {
-  margin-left: 0;
-  margin-right: 5px;
+.form-ctrl__label .form-ctrl__label-placeholder {
+  margin-left: unset;
+  margin-right: unset;
   margin-top: 0;
+  -webkit-margin-end: 5px;
+          margin-inline-end: 5px;
   margin-bottom: 0;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   opacity: 0;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -118,77 +153,58 @@ 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;
+.form-ctrl__label .form-ctrl__label-charcount {
+  margin-left: unset;
+  margin-right: unset;
   margin-top: 0;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
   margin-bottom: 0;
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
   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 {
+:host(.has-value) .form-ctrl__label .form-ctrl__label-placeholder {
   opacity: 0.5;
 }
-:host(.has-focus) .label {
+:host(.has-focus) .form-ctrl__label {
   color: var(--label-color--focus);
 }
-:host(.is-invalid) .label {
+:host(.is-invalid) .form-ctrl__label {
   color: var(--label-color--invalid);
 }
 
-.more {
+.has-float-label .select__multi-input,
+.has-float-label .select__native-input,
+.has-float-label .input__native-ctrl {
+  opacity: 0;
+  -webkit-transition: opacity 0.125s ease-in;
+  transition: opacity 0.125s ease-in;
+}
+:host(.has-focus) .has-float-label .select__multi-input, :host(.has-value) .has-float-label .select__multi-input,
+:host(.has-focus) .has-float-label .select__native-input,
+:host(.has-value) .has-float-label .select__native-input,
+:host(.has-focus) .has-float-label .input__native-ctrl,
+:host(.has-value) .has-float-label .input__native-ctrl {
+  opacity: 1;
+}
+
+.form-ctrl__more {
   height: 1em;
-  margin-left: 3px;
-  margin-right: 0;
+  position: relative;
+  margin-left: unset;
+  margin-right: unset;
   margin-top: 4px;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+  -webkit-margin-start: 3px;
+          margin-inline-start: 3px;
   margin-bottom: var(--padding-bottom);
-  position: relative;
-}
-@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .more {
-    margin-left: unset;
-    margin-right: unset;
-    /* autoprefixer: ignore next */
-    -webkit-margin-start: 3px;
-    /* autoprefixer: ignore next */
-    margin-inline-start: 3px;
-    /* autoprefixer: ignore next */
-    -webkit-margin-end: 0;
-    /* autoprefixer: ignore next */
-    margin-inline-end: 0;
-  }
 }
 
-.helper,
-.error {
+.form-ctrl__helper,
+.form-ctrl__error {
   top: 0;
   left: 0;
   position: absolute;
@@ -198,24 +214,34 @@ label.visually-hide,
   transition: 0.3s ease-out opacity;
 }
 
-.helper {
+.form-ctrl__helper {
   font-style: italic;
   color: var(--help-msg-color);
 }
-:host([show-inline-error]:not([show-inline-error=false]).is-invalid) .helper {
+:host([show-inline-error]:not([show-inline-error=false]).is-invalid) .form-ctrl__helper {
   opacity: 0;
 }
 
-.error {
+.form-ctrl__helper-end {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 30%;
+          flex: 1 1 30%;
+  min-width: 150px;
+  font-size: var(--invalid-msg-font-size);
+  color: var(--help-msg-color);
+  font-style: italic;
+}
+
+.form-ctrl__error {
   opacity: 0;
   color: var(--invalid-msg-color);
   font-stretch: condensed;
 }
-:host(.is-invalid) .error {
+:host(.is-invalid) .form-ctrl__error {
   opacity: 1;
 }
 
-.input {
+.form-ctrl__input {
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
@@ -229,7 +255,10 @@ label.visually-hide,
   color: inherit;
   border-radius: var(--input-border-radius);
   width: 100%;
-  padding: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
   position: relative;
   -webkit-box-flex: 1;
       -ms-flex: 1 0 auto;
@@ -241,24 +270,36 @@ label.visually-hide,
   border: var(--input-border-style);
   border-width: var(--input-border-width);
   font-size: var(--input-font-size);
+  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
+          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
 }
-:host(.has-focus) .input {
+:host(.has-focus) .form-ctrl__input {
   background: var(--input-bg-color--focus);
   border: var(--input-border-style--focus);
   border-width: var(--input-border-width);
+  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
+          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
 }
-:host(.is-invalid) .input {
+:host(.is-invalid) .form-ctrl__input {
   background: var(--input-bg-color--invalid);
   border: var(--input-border-style--invalid);
   border-width: var(--input-border-width);
+  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+  -webkit-padding-start: 0 !important;
+          padding-inline-start: 0 !important;
 }
-:host(.is-invalid.has-focus) .input {
+:host(.is-invalid.has-focus) .form-ctrl__input {
   background: var(--input-bg-color--invalid);
   border: var(--input-border-style--invalid-focus);
   border-width: var(--input-border-width);
+  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+  -webkit-padding-start: 0 !important;
+          padding-inline-start: 0 !important;
 }
 
-.native-input-wrap {
+.form-ctrl__input-wrap {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -270,16 +311,19 @@ label.visually-hide,
           flex: 1;
 }
 
-.input-clear-icon,
-.end,
-.start,
-.value-end {
-  margin-left: 0;
-  margin-right: 0;
+.form-ctrl__clear-btn,
+.form-ctrl__slot-end,
+.form-ctrl__slot-start,
+.form-ctrl__slot-value-end {
+  --nano-icon-size: 1.4em;
   margin-top: 0;
   margin-bottom: 0;
-  background-position: center;
-  --nano-icon-size: 1.4em;
+  margin-left: unset;
+  margin-right: unset;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
   font-size: 1em;
   border: 0;
   outline: none;
@@ -294,23 +338,25 @@ label.visually-hide,
   width: auto;
 }
 
-.has-float-label .start {
+.has-float-label .form-ctrl__slot-start {
   display: none;
 }
 
-.start::slotted(*),
-.start ::slotted(*),
-.end::slotted(*),
-.end ::slotted(*),
-.value-end::slotted(*),
-.value-end ::slotted(*),
-.value-end * {
+.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;
+  padding-left: unset;
+  padding-right: unset;
+  -webkit-padding-start: var(--padding-start);
+          padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+          padding-inline-end: var(--padding-end);
   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;
@@ -318,44 +364,25 @@ label.visually-hide,
   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 * {
+  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 * {
   pointer-events: none;
 }
 
-.value-end::slotted(*),
-.value-end ::slotted(*),
-.value-end * {
+.form-ctrl__slot-value-end::slotted(*),
+.form-ctrl__slot-value-end ::slotted(*),
+.form-ctrl__slot-value-end * {
   pointer-events: none;
 }
 
-.input-clear-icon {
+.form-ctrl__clear-btn {
   color: var(--clear-btn-color);
   padding: 0;
   opacity: 0;
@@ -368,32 +395,22 @@ label.visually-hide,
           align-items: center;
   overflow: hidden;
 }
-:host(.is-invalid) .input-clear-icon {
+:host(.is-invalid) .form-ctrl__clear-btn {
   color: var(--clear-btn-color--invalid);
 }
-:host(.has-value) .input-clear-icon {
-  padding-left: var(--padding-start);
-  padding-right: var(--padding-end);
+:host(.has-value) .form-ctrl__clear-btn {
   padding-top: 0;
   padding-bottom: 0;
+  padding-left: unset;
+  padding-right: unset;
+  -webkit-padding-start: var(--padding-start);
+          padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+          padding-inline-end: var(--padding-end);
   opacity: 1;
   width: auto;
 }
-@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  :host(.has-value) .input-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);
-  }
-}
-.input-clear-icon:hover {
+.form-ctrl__clear-btn:hover {
   color: var(--clear-btn-color--hover);
 }
 
@@ -415,17 +432,17 @@ label.visually-hide,
   * @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-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, #fac6c3);
-  * @prop --input-border-style--invalid-focus: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);
+  * @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, #fee8de);
+  * @prop --input-bg-color--invalid: defaults to var(--nano-input-background-color, white);
 
   * @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);
@@ -441,7 +458,7 @@ label.visually-hide,
 
   * @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);
+  * @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);
@@ -459,16 +476,17 @@ label.visually-hide,
     );
   --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-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, #fac6c3);
-  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);
+  --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, #fee8de);
+  --input-bg-color--invalid: var(--nano-input-background-color, white);
   --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);
@@ -481,12 +499,12 @@ label.visually-hide,
   --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);
+  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);
   position: relative;
   width: 100%;
   padding: 0 !important;
   font-family: var(--nano-font-family, inherit);
-  display: inline-block;
+  display: block;
 }
 
 :host(.nano-color) {
@@ -501,9 +519,6 @@ label.visually-hide,
   --padding-start: 0;
 }
 
-:host([disabled]:not([disabled=false])) {
-  opacity: 0.7;
-}
 :host([disabled]:not([disabled=false])) * {
   pointer-events: none !important;
 }
@@ -512,7 +527,7 @@ select {
   display: none;
 }
 
-.native-input {
+.select__native-input {
   border-radius: var(--input-border-radius);
   padding-left: var(--padding-start);
   padding-right: var(--padding-end);
@@ -544,17 +559,17 @@ select {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  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;
+  line-height: 2.5em;
+  min-height: 2.5em;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .native-input {
+  .select__native-input {
     padding-left: unset;
     padding-right: unset;
     /* autoprefixer: ignore next */
@@ -567,124 +582,119 @@ select {
     padding-inline-end: var(--padding-end);
   }
 }
-.native-input::-moz-selection {
-  background: transparent;
+.has-float-label .select__native-input {
+  line-height: 2.1em;
+  min-height: 2.1em;
+  padding-top: 1.4em;
 }
-.native-input::selection {
+.select__native-input::-moz-selection {
   background: transparent;
 }
-.native-input::-moz-selection {
+.select__native-input::selection {
   background: transparent;
 }
-.native-input[disabled] {
-  opacity: 0.4;
+.select__native-input::-moz-selection {
+  background: transparent;
 }
-.native-input::-webkit-input-placeholder {
+.select__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;
+  line-height: inherit;
+  min-height: inherit;
 }
-.native-input::-moz-placeholder {
+.select__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;
+  line-height: inherit;
+  min-height: inherit;
 }
-.native-input:-ms-input-placeholder {
+.select__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;
+  line-height: inherit;
+  min-height: inherit;
 }
-.native-input::-ms-input-placeholder {
+.select__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;
+  line-height: inherit;
+  min-height: inherit;
 }
-.native-input::placeholder {
+.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);
-  line-height: 2.5em;
-  min-height: 2.5em;
+  line-height: inherit;
+  min-height: inherit;
 }
-.native-input::-moz-placeholder {
+.select__native-input::-moz-placeholder {
   line-height: 2.8em;
   text-overflow: ellipsis;
 }
-.native-input:-webkit-autofill {
+.select__native-input:-webkit-autofill {
   background-color: transparent;
 }
-.native-input::-webkit-search-decoration, .native-input::-webkit-search-cancel-button, .native-input::-webkit-search-results-button, .native-input::-webkit-search-results-decoration {
+.select__native-input::-webkit-search-decoration, .select__native-input::-webkit-search-cancel-button, .select__native-input::-webkit-search-results-button, .select__native-input::-webkit-search-results-decoration {
   -webkit-appearance: none;
           appearance: none;
 }
-.native-input:invalid {
+.select__native-input:invalid {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.native-input::-ms-clear, .native-input::-ms-reveal {
+.select__native-input::-ms-clear, .select__native-input::-ms-reveal {
   display: none;
 }
-.native-input.resizable {
+.select__native-input.resizable {
   resize: vertical;
   overflow: auto;
 }
-.textarea .native-input {
+.form-ctrl__textarea .select__native-input {
   line-height: 1.5em;
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
   white-space: pre-wrap;
 }
-.textarea .native-input::-webkit-input-placeholder {
+.form-ctrl__textarea .select__native-input::-webkit-input-placeholder {
   line-height: 1.5em;
 }
-.textarea .native-input::-moz-placeholder {
+.form-ctrl__textarea .select__native-input::-moz-placeholder {
   line-height: 1.5em;
 }
-.textarea .native-input:-ms-input-placeholder {
+.form-ctrl__textarea .select__native-input:-ms-input-placeholder {
   line-height: 1.5em;
 }
-.textarea .native-input::-ms-input-placeholder {
+.form-ctrl__textarea .select__native-input::-ms-input-placeholder {
   line-height: 1.5em;
 }
-.textarea .native-input::placeholder {
+.form-ctrl__textarea .select__native-input::placeholder {
   line-height: 1.5em;
 }
-.has-float-label .native-input {
-  padding-top: 1.4em;
-}
-.has-float-label.textarea .native-input {
+.has-float-label.textarea .select__native-input {
   padding-top: 1.8em;
 }
-.legacy .native-input {
-  -webkit-box-sizing: content-box;
-          box-sizing: content-box;
-}
-:host(.masked) .native-input {
+:host(.masked) .select__native-input {
   opacity: 0;
   position: absolute;
   left: 0;
   top: 0;
 }
 
-.select-mask {
+.select__mask {
   border-radius: var(--input-border-radius);
   padding-left: var(--padding-start);
   padding-right: var(--padding-end);
@@ -706,7 +716,7 @@ select {
   min-height: 2.5em;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .select-mask {
+  .select__mask {
     padding-left: unset;
     padding-right: unset;
     /* autoprefixer: ignore next */
@@ -720,7 +730,7 @@ select {
   }
 }
 
-.multi-wrap {
+.select__multi-wrap {
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -735,10 +745,10 @@ select {
       flex-wrap: wrap;
   max-width: 100%;
 }
-:host(.has-float-label) .multi-wrap {
+:host(.has-float-label) .select__multi-wrap {
   padding-top: 1.3em;
 }
-.multi-input {
+.select__multi-input {
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
@@ -755,7 +765,7 @@ select {
   padding-top: calc(var(--padding-top) / 2);
   padding-bottom: 0;
   min-width: 50px;
-  max-width: 100%;
+  width: 100%;
   max-height: 100%;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -768,12 +778,12 @@ select {
       -ms-flex: 0;
           flex: 0;
   position: relative;
-  min-height: calc(2.78em - var(--padding-top));
+  min-height: calc(2.5em - var(--padding-top));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .multi-input {
+  .select__multi-input {
     padding-left: unset;
     padding-right: unset;
     /* autoprefixer: ignore next */
@@ -786,26 +796,26 @@ select {
     padding-inline-end: var(--padding-end);
   }
 }
-:host(.legacy) .multi-input {
+:host(.legacy) .select__multi-input {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
 }
-.multi-input:last-child {
+.select__multi-input:last-child {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
 }
-.multi-value {
-  margin-left: 4px;
-  margin-right: 0;
-  margin-top: 4px;
-  margin-bottom: 0;
+.select__multi-value {
+  margin-top: 5px;
+  -webkit-margin-start: var(--padding-start);
+          margin-inline-start: var(--padding-start);
+  -webkit-margin-end: -3px;
+          margin-inline-end: -3px;
   background: rgba(var(--multi-input-value-bg), 0.8);
   color: var(--multi-input-value-text-color);
   border: 1px solid;
   border-color: var(--multi-input-value-border);
-  padding: 0.3em 0.5em;
-  border-radius: 3px;
+  padding: 0.2em 0.5em;
   line-height: 1;
   max-width: 100%;
   display: -webkit-box;
@@ -815,31 +825,16 @@ select {
       -ms-flex-align: center;
           align-items: center;
   font-size: var(--input-font-size);
-  font-weight: 600;
   letter-spacing: 1px;
 }
-@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .multi-value {
-    margin-left: unset;
-    margin-right: unset;
-    /* autoprefixer: ignore next */
-    -webkit-margin-start: 4px;
-    /* autoprefixer: ignore next */
-    margin-inline-start: 4px;
-    /* autoprefixer: ignore next */
-    -webkit-margin-end: 0;
-    /* autoprefixer: ignore next */
-    margin-inline-end: 0;
-  }
-}
-.multi-value span {
+.select__multi-value span {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
   overflow: hidden;
-  line-height: 1.4;
+  line-height: 1.2;
 }
-.multi-value-remove {
+.select__multi-value-remove {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -867,7 +862,7 @@ select {
   font-size: 1em;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .multi-value-remove {
+  .select__multi-value-remove {
     padding-left: unset;
     padding-right: unset;
     /* autoprefixer: ignore next */
@@ -880,14 +875,22 @@ select {
     padding-inline-end: 0;
   }
 }
-.multi-value-remove nano-icon {
+.select__multi-value-remove nano-icon {
   --color: var(--multi-input-value-text-color);
 }
 
-:host(.has-focus.has-multiple) .placeholder-as-label {
-  -webkit-transform: translateY(-120%);
-          transform: translateY(-120%);
-  font-size: 0.9em;
+.form-ctrl__float-label {
+  width: calc(100% - (1em + (var(--padding-start) * 2)));
+}
+:host(.has-focus.has-multiple) .form-ctrl__float-label {
+  -webkit-transform: translateY(-110%);
+          transform: translateY(-110%);
+  font-size: 0.8em;
+}
+:host(.has-value.has-multiple) .form-ctrl__float-label {
+  -webkit-transform: translateY(38%);
+          transform: translateY(38%);
+  top: 0;
 }
 
 :host(.has-focus) select,