@nanoporetech-digital/components 3.2.0 → 3.3.0

package/dist/collection/components/input/input.css

@@ -19,8 +19,6 @@
   display: block;
 }
 .form-ctrl.has-helper-end {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   gap: 1rem;
   opacity: 0;
@@ -29,9 +27,7 @@
   opacity: 1;
 }
 .form-ctrl.has-helper-end .form-ctrl__wrapper {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 100%;
-          flex: 1 1 100%;
+  flex: 1 1 100%;
 }
 .form-ctrl.has-helper-end .form-ctrl__helper-end {
   display: none;
@@ -74,31 +70,24 @@ label.visually-hide,
 
 .form-ctrl__float-label {
   padding-block: 0;
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
+  padding-inline-end: 0;
+  padding-inline-start: var(--padding-start);
   color: var(--label-color);
   position: absolute;
   font-size: 1.15em;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  -webkit-transform-origin: top left;
-          transform-origin: top left;
+  transform: translateY(-50%);
+  transform-origin: top left;
   inset-block-start: 50%;
-  -webkit-transition: all 0.125s ease-in;
   transition: all 0.125s ease-in;
   opacity: 1;
 }
 :host(.has-focus) .form-ctrl__float-label, :host(.has-value) .form-ctrl__float-label {
-  -webkit-transform: translateY(-110%);
-          transform: translateY(-110%);
+  transform: translateY(-110%);
   font-size: 0.8em;
   opacity: 0.7;
 }
 .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-focus) .form-ctrl__float-label .form-ctrl__label-charcount, :host(.has-value) .form-ctrl__float-label .form-ctrl__label-charcount {
@@ -109,53 +98,40 @@ label.visually-hide,
 }
 :host(.has-focus) .form-ctrl__textarea .form-ctrl__float-label {
   inset-block-start: 0;
-  -webkit-transform: translateY(38%);
-          transform: translateY(38%);
+  transform: translateY(38%);
 }
 :host(.has-value) .form-ctrl__textarea .form-ctrl__float-label {
   inset-block-start: 0;
-  -webkit-transform: translateY(38%);
-          transform: translateY(38%);
+  transform: translateY(38%);
 }
 
 .form-ctrl__label {
   color: var(--label-color);
   font-size: var(--label-font-size);
-  -webkit-padding-after: var(--padding-bottom);
-          padding-block-end: var(--padding-bottom);
+  padding-block-end: var(--padding-bottom);
   line-height: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 .form-ctrl__label .form-ctrl__label-wrap {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .form-ctrl__label .form-ctrl__label-placeholder {
   margin-block: unset;
-  -webkit-margin-end: 5px;
-          margin-inline-end: 5px;
-  -webkit-margin-start: 0;
-          margin-inline-start: 0;
+  margin-inline-end: 5px;
+  margin-inline-start: 0;
   opacity: 0;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  -webkit-transition: 0.3s ease opacity;
   transition: 0.3s ease opacity;
   font-size: 0.9em;
 }
 .form-ctrl__label .form-ctrl__label-charcount {
   margin-block: unset;
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-start: auto;
-          margin-inline-start: auto;
+  margin-inline-end: 0;
+  margin-inline-start: auto;
   font-size: 0.9em;
   opacity: 0.5;
 }
@@ -173,7 +149,6 @@ label.visually-hide,
 .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,
@@ -198,7 +173,6 @@ label.visually-hide,
   position: absolute;
   font-size: var(--invalid-msg-font-size);
   line-height: 1.2;
-  -webkit-transition: 0.3s ease-out opacity;
   transition: 0.3s ease-out opacity;
 }
 
@@ -211,9 +185,7 @@ label.visually-hide,
 }
 
 .form-ctrl__helper-end {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 30%;
-          flex: 1 1 30%;
+  flex: 1 1 30%;
   min-inline-size: 150px;
   font-size: var(--invalid-msg-font-size);
   color: var(--help-msg-color);
@@ -246,55 +218,39 @@ label.visually-hide,
   inline-size: 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;
+  flex: 1 0 auto;
   display: flex;
   background: var(--input-bg-color);
   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;
+  padding-inline-start: calc(var(--input-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);
-  -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;
+  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
 }
 :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;
+  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+  padding-inline-start: 0 !important;
 }
 :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;
+  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+  padding-inline-start: 0 !important;
 }
 
 .form-ctrl__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;
+  align-items: stretch;
+  flex: 1;
   max-inline-size: 100%;
 }
 
@@ -310,12 +266,8 @@ label.visually-hide,
   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;
+  align-items: stretch;
   inline-size: auto;
 }
 
@@ -332,16 +284,10 @@ label.visually-hide,
 .form-ctrl__slot-value-end * {
   --nano-icon-size: 1.4em;
   padding-inline: 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);
+  padding-inline-start: var(--padding-start);
+  padding-inline-end: var(--padding-end);
   font-size: 1em;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
   block-size: 100%;
   z-index: 1;
@@ -368,11 +314,8 @@ label.visually-hide,
   opacity: 0;
   inline-size: 0;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   overflow: hidden;
 }
 :host(.is-invalid) .form-ctrl__clear-btn {
@@ -505,9 +448,7 @@ label.visually-hide,
   text-overflow: ellipsis;
   color: var(--input-text-color);
   display: inline-block;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   inline-size: 100%;
   max-inline-size: 100%;
   max-block-size: 100%;
@@ -515,11 +456,9 @@ label.visually-hide,
   outline: none;
   background: transparent;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   margin: 0;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   resize: none;
   overflow: hidden;
   line-height: 2.5em;
@@ -527,44 +466,7 @@ label.visually-hide,
 .has-float-label .input__native-ctrl {
   line-height: 2.1em;
   min-height: 2.1em;
-  -webkit-padding-before: 1.4em;
-          padding-block-start: 1.4em;
-}
-.input__native-ctrl::-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: inherit;
-  min-height: initial;
-}
-.input__native-ctrl::-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: inherit;
-  min-height: initial;
-}
-.input__native-ctrl:-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: inherit;
-  min-height: initial;
-}
-.input__native-ctrl::-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: inherit;
-  min-height: initial;
+  padding-block-start: 1.4em;
 }
 .input__native-ctrl::placeholder {
   color: var(--placeholder-color);
@@ -587,8 +489,7 @@ label.visually-hide,
           appearance: none;
 }
 .input__native-ctrl:invalid {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 .input__native-ctrl::-ms-clear, .input__native-ctrl::-ms-reveal {
   display: none;
@@ -602,28 +503,13 @@ label.visually-hide,
   padding-block: var(--padding-top) 0.25em;
   white-space: pre-wrap;
 }
-.form-ctrl__textarea .input__native-ctrl::-webkit-input-placeholder {
-  line-height: 1.5em;
-}
-.form-ctrl__textarea .input__native-ctrl::-moz-placeholder {
-  line-height: 1.5em;
-}
-.form-ctrl__textarea .input__native-ctrl:-ms-input-placeholder {
-  line-height: 1.5em;
-}
-.form-ctrl__textarea .input__native-ctrl::-ms-input-placeholder {
-  line-height: 1.5em;
-}
 .form-ctrl__textarea .input__native-ctrl::placeholder {
   line-height: 1.5em;
 }
 .has-float-label .form-ctrl__textarea .input__native-ctrl {
-  -webkit-padding-before: 1.75em;
-          padding-block-start: 1.75em;
+  padding-block-start: 1.75em;
 }
 :host([readonly]:not([readonly=false])) .input__native-ctrl {
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }

package/dist/collection/components/menu/menu.css

@@ -50,8 +50,7 @@
 
 .menu {
   font-size: var(--font-size, 0.9em);
-  -ms-scroll-chaining: none;
-      overscroll-behavior: none;
+  overscroll-behavior: none;
   min-width: var(--width);
   position: relative;
 }

package/dist/collection/components/menu-drawer/menu-drawer.css

@@ -47,14 +47,12 @@
   color: var(--content-color);
   font-size: var(--font-size);
   text-decoration: none;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 :host *,
 :host *::before,
 :host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host(.hide) {
@@ -62,17 +60,13 @@
 }
 
 :host(.has-global-nav) .content-wrap {
-  -webkit-padding-before: var(--global-nav-height);
-          padding-block-start: var(--global-nav-height);
-  -webkit-margin-before: calc(var(--global-nav-height) * -1);
-          margin-block-start: calc(var(--global-nav-height) * -1);
+  padding-block-start: var(--global-nav-height);
+  margin-block-start: calc(var(--global-nav-height) * -1);
 }
 
 .container {
   inset-inline-end: auto;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));
-          flex: 0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));
+  flex: 0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));
   background: var(--bg-color);
   color: var(--content-color);
   z-index: 1;
@@ -85,7 +79,6 @@
 }
 
 :host(:not(.loading)) .container {
-  -webkit-transition: inline-size 0.3s ease;
   transition: inline-size 0.3s ease;
 }
 
@@ -99,8 +92,6 @@
   position: sticky;
   font-size: var(--icon-size);
   line-height: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   min-block-size: calc(100vh - 61px);
   min-block-size: calc(var(--vh, 1vh) * 100 - 61px);
@@ -109,18 +100,11 @@
 
 .content {
   inline-size: auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   overflow: hidden;
   background: var(--bg-color);
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
 }
 .content::after {
   content: "";
@@ -137,44 +121,29 @@
   border: none;
   color: inherit;
   font-size: var(--icon-size);
-  -webkit-margin-before: var(--padding-top);
-          margin-block-start: var(--padding-top);
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-after: var(--padding-bottom);
-          margin-block-end: var(--padding-bottom);
-  -webkit-margin-start: calc(var(--padding-start) / 2);
-          margin-inline-start: calc(var(--padding-start) / 2);
+  margin-block-start: var(--padding-top);
+  margin-inline-end: 0;
+  margin-block-end: var(--padding-bottom);
+  margin-inline-start: calc(var(--padding-start) / 2);
   border-radius: 4px;
   padding-block: 6px;
   padding-inline: 5px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-line-pack: center;
-      align-content: center;
+  align-content: center;
   inline-size: 30px;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 .collapse-btn nano-icon {
   font-size: var(--icon-size);
-  -webkit-transition: 0.2s -webkit-transform ease-in-out;
-  transition: 0.2s -webkit-transform ease-in-out;
   transition: 0.2s transform ease-in-out;
-  transition: 0.2s transform ease-in-out, 0.2s -webkit-transform ease-in-out;
-  -webkit-transform: translateZ(0) rotate(0deg);
-          transform: translateZ(0) rotate(0deg);
+  transform: translateZ(0) rotate(0deg);
 }
 :host(.open) .collapse-btn nano-icon {
-  -webkit-transform: translateZ(0) rotate(180deg);
-          transform: translateZ(0) rotate(180deg);
+  transform: translateZ(0) rotate(180deg);
 }
 
 .foot {
-  -webkit-margin-before: auto;
-          margin-block-start: auto;
+  margin-block-start: auto;
 }
 
 .measure-ele {