@nanoporetech-digital/components 3.2.0 → 3.3.0

package/dist/collection/components/algolia/algolia.css

@@ -30,22 +30,14 @@
   inset-block-start: 0;
   z-index: -10;
   font-size: 60px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-transition: opacity 0.2s ease, z-index 0.01s ease 0.2s;
+  align-items: center;
+  justify-content: center;
   transition: opacity 0.2s ease, z-index 0.01s ease 0.2s;
 }
 .loader.loading {
   opacity: 1;
   z-index: 10;
-  -webkit-transition: z-index 0.01s ease, opacity 0.2s ease 0.01s;
   transition: z-index 0.01s ease, opacity 0.2s ease 0.01s;
 }
 
@@ -60,12 +52,8 @@
   opacity: 0;
   outline: none;
   overflow: auto;
-  -webkit-transition: opacity 0.3s ease, visibility 0.01s ease 0.3s, z-index 0.01s ease 0.3s, -webkit-transform 0.3s ease;
-  transition: opacity 0.3s ease, visibility 0.01s ease 0.3s, z-index 0.01s ease 0.3s, -webkit-transform 0.3s ease;
   transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.01s ease 0.3s, z-index 0.01s ease 0.3s;
-  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.01s ease 0.3s, z-index 0.01s ease 0.3s, -webkit-transform 0.3s ease;
-  -webkit-transform: translate(0, 100px);
-          transform: translate(0, 100px);
+  transform: translate(0, 100px);
   visibility: hidden;
   z-index: -1;
   position: absolute;
@@ -77,12 +65,8 @@
   position: relative;
 }
 .results.show {
-  -webkit-transition: z-index 0.01s ease, visibility 0.01s ease, opacity 0.3s ease 0.01s, -webkit-transform 0.3s ease 0.01s;
-  transition: z-index 0.01s ease, visibility 0.01s ease, opacity 0.3s ease 0.01s, -webkit-transform 0.3s ease 0.01s;
   transition: z-index 0.01s ease, visibility 0.01s ease, transform 0.3s ease 0.01s, opacity 0.3s ease 0.01s;
-  transition: z-index 0.01s ease, visibility 0.01s ease, transform 0.3s ease 0.01s, opacity 0.3s ease 0.01s, -webkit-transform 0.3s ease 0.01s;
-  -webkit-transform: translate(0, 0);
-          transform: translate(0, 0);
+  transform: translate(0, 0);
   visibility: visible;
   opacity: 1;
   z-index: 10;
@@ -93,8 +77,7 @@
   inline-size: auto !important;
   display: block;
   position: static;
-  -webkit-transform: none;
-          transform: none;
+  transform: none;
   z-index: auto;
   visibility: inherit;
   opacity: initial;

package/dist/collection/components/aspect-ratio/aspect-ratio.css

@@ -28,13 +28,11 @@
 .aspect-ratio--cover ::slotted(iframe),
 .aspect-ratio--cover ::slotted(img),
 .aspect-ratio--cover ::slotted(video) {
-  -o-object-fit: cover !important;
-     object-fit: cover !important;
+  object-fit: cover !important;
 }
 .aspect-ratio--contain ::slotted(embed),
 .aspect-ratio--contain ::slotted(iframe),
 .aspect-ratio--contain ::slotted(img),
 .aspect-ratio--contain ::slotted(video) {
-  -o-object-fit: contain !important;
-     object-fit: contain !important;
+  object-fit: contain !important;
 }

package/dist/collection/components/checkbox/checkbox-group.css

@@ -41,8 +41,7 @@
   display: block;
 }
 :host * {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 :host([types-tag]),
@@ -87,14 +86,10 @@
 }
 .nanogroupcb__more {
   height: 1em;
-  -webkit-margin-before: calc(var(--label-padding) - var(--control-margin-bottom));
-          margin-block-start: calc(var(--label-padding) - var(--control-margin-bottom));
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-after: var(--label-padding);
-          margin-block-end: var(--label-padding);
-  -webkit-margin-start: 3px;
-          margin-inline-start: 3px;
+  margin-block-start: calc(var(--label-padding) - var(--control-margin-bottom));
+  margin-inline-end: 0;
+  margin-block-end: var(--label-padding);
+  margin-inline-start: 3px;
   position: relative;
 }
 .nanogroupcb__error, .nanogroupcb__help {
@@ -103,7 +98,6 @@
   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;
 }
 .show-error .nanogroupcb__error, .show-error .nanogroupcb__help {
@@ -129,11 +123,8 @@
   margin: 0;
   padding: 0;
   line-height: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 .nanogroupcb__cbs ::slotted(*:not([type=tag]):not([type=segment]):not([type=segment-pill])) {
   --check-base-size: 1.2em;
@@ -148,9 +139,7 @@
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   .nanogroupcb__cbs::slotted(*),
 .nanogroupcb__cbs ::slotted(*) {
-    -webkit-margin-start: var(--control-margin-start);
-            margin-inline-start: var(--control-margin-start);
-    -webkit-margin-end: var(--control-margin-end);
-            margin-inline-end: var(--control-margin-end);
+    margin-inline-start: var(--control-margin-start);
+    margin-inline-end: var(--control-margin-end);
   }
 }

package/dist/collection/components/checkbox/checkbox.css

@@ -55,8 +55,7 @@
   max-width: 100%;
 }
 :host * {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 :host([type=tag]) {
@@ -100,12 +99,8 @@
 .nanocb {
   padding: var(--padding);
   cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   line-height: 1.2;
   position: relative;
 }
@@ -117,8 +112,7 @@
   width: 1.5em;
   min-width: 1.5em;
   border: var(--check-border-style);
-  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 }
 .nanocb__input::before {
   border-radius: var(--cb-border-radius);
@@ -129,8 +123,7 @@
   width: 0;
   height: 0;
   border: 2px solid var(--check-checked-higlight-color);
-  -webkit-transform: scale(0);
-          transform: scale(0);
+  transform: scale(0);
 }
 .nanocb__input--radio {
   border-radius: var(--radio-border-radius);
@@ -149,10 +142,8 @@
   width: 0;
   border: solid var(--check-checked-higlight-color);
   border-width: 0 0.1875em 0.1875em 0;
-  -webkit-transform: rotate(0deg) scale(0);
-          transform: rotate(0deg) scale(0);
+  transform: rotate(0deg) scale(0);
   opacity: 1;
-  -webkit-transition: all 0.15s ease-out;
   transition: all 0.15s ease-out;
 }
 .nanocb--indeterminate .nanocb__input--checkbox::after {
@@ -187,12 +178,10 @@
   display: none;
 }
 .nanocb--invalid:not(.nanocb--focused) .nanocb__input {
-  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);
-          box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);
 }
 .nanocb--invalid:not(.nanocb--focused) .nanocb__input--tag + .nanocb__label, .nanocb--invalid:not(.nanocb--focused) .nanocb__input--segment + .nanocb__label, .nanocb--invalid:not(.nanocb--focused) .nanocb__input--segment-pill + .nanocb__label {
-  -webkit-box-shadow: var(--invalid-shadow);
-          box-shadow: var(--invalid-shadow);
+  box-shadow: var(--invalid-shadow);
   z-index: 1;
 }
 .nanocb input {
@@ -207,27 +196,23 @@
   position: absolute;
 }
 .nanocb input:focus ~ .nanocb__input {
-  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);
-          box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);
 }
 .nanocb input.focus-visible:focus ~ .nanocb__input--tag + .nanocb__label, .nanocb input.focus-visible:focus ~ .nanocb__input--segment + .nanocb__label, .nanocb input.focus-visible:focus ~ .nanocb__input--segment-pill + .nanocb__label {
-  -webkit-box-shadow: var(--focus-shadow);
-          box-shadow: var(--focus-shadow);
+  box-shadow: var(--focus-shadow);
   z-index: 1;
 }
 .nanocb input:checked ~ .nanocb__input {
   border-radius: var(--cb-border-radius);
   background-color: var(--check-checked-bg-color);
-  -webkit-transform: rotate(0deg) scale(1);
-          transform: rotate(0deg) scale(1);
+  transform: rotate(0deg) scale(1);
   opacity: 1;
   border: 0.125em solid var(--check-checked-border-color);
 }
 .nanocb input:checked ~ .nanocb__input--segment + .nanocb__label, .nanocb input:checked ~ .nanocb__input--segment-pill + .nanocb__label {
   color: var(--check-checked-higlight-color);
   background-color: var(--check-checked-bg-color);
-  -webkit-box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.2);
-          box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.2);
 }
 .nanocb input:checked ~ .nanocb__input--radio {
   border-radius: var(--radio-border-radius);
@@ -243,8 +228,7 @@
   border-radius: var(--radio-border-radius);
 }
 .nanocb input:checked ~ .nanocb__input--checkbox::after {
-  -webkit-transform: rotate(45deg) scale(1);
-          transform: rotate(45deg) scale(1);
+  transform: rotate(45deg) scale(1);
   opacity: 1;
   inset-inline-start: 0.475em;
   inset-block-start: 0.1875em;
@@ -253,20 +237,17 @@
   border-radius: 0;
 }
 .nanocb input:checked ~ .nanocb__input--tag + .nanocb__label::after {
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
+  transform: rotate(45deg);
 }
 .nanocb input:indeterminate ~ .nanocb__input--checkbox {
   border-radius: var(--input-border-radius, 5px);
   background-color: var(--check-checked-bg-color);
-  -webkit-transform: rotate(0deg) scale(1);
-          transform: rotate(0deg) scale(1);
+  transform: rotate(0deg) scale(1);
   opacity: 1;
   border: 0.125em solid var(--check-checked-bg-color);
 }
 .nanocb input:indeterminate ~ .nanocb__input--checkbox::after {
-  -webkit-transform: scale(1);
-          transform: scale(1);
+  transform: scale(1);
   opacity: 1;
   inset-inline-start: 0.3125em;
   inset-block-start: 0;
@@ -277,35 +258,22 @@
 .nanocb__label {
   padding-inline: 10px 0;
   padding-block: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   font-stretch: condensed;
   line-height: 1;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  flex: 1;
+  justify-content: space-between;
 }
 .nanocb__label--segment, .nanocb__label--segment-pill {
   border: var(--check-border-style);
   border-radius: var(--segment-border-radius);
-  -webkit-box-shadow: var(--segment-shadow);
-          box-shadow: var(--segment-shadow);
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
+  box-shadow: var(--segment-shadow);
   display: inline-flex;
   padding: var(--control-padding);
   background: var(--check-bg-color);
   color: var(--segment-color);
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   width: 100%;
 }
 :host(:first-of-type) .nanocb__label--segment-pill {
@@ -313,13 +281,11 @@
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   border-end-start-radius: var(--segment-border-radius);
-  -webkit-border-end: none;
-          border-inline-end: none;
+  border-inline-end: none;
 }
 :host(:not(:last-of-type):not(:first-of-type)) .nanocb__label--segment-pill {
   border-radius: 0 0 0 0;
-  -webkit-border-end: none;
-          border-inline-end: none;
+  border-inline-end: none;
 }
 :host(:last-of-type) .nanocb__label--segment-pill {
   border-start-start-radius: 0;
@@ -340,7 +306,6 @@
   border: 2px solid #b5aea7;
   border-color: var(--tagbox-border-color);
   background-color: var(--tagbox-bg-color);
-  -webkit-transition: all 0.2s;
   transition: all 0.2s;
   border-radius: var(--cb-border-radius);
   width: 100%;
@@ -354,10 +319,8 @@
   font-family: inherit;
   font-size: 1.8em;
   display: inline-block;
-  -webkit-transform: rotate(0deg);
-          transform: rotate(0deg);
-  -webkit-transform-origin: center;
-          transform-origin: center;
+  transform: rotate(0deg);
+  transform-origin: center;
 }
 .nanocb__label--tag span {
   display: block;

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

@@ -36,13 +36,8 @@ nano-icon {
 }
 
 .date-field {
-  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;
   position: relative;
 }
 .date-field__dropdown {
@@ -54,15 +49,9 @@ nano-icon {
   z-index: var(--nano-layer-index-dropdown, 300) !important;
 }
 .date-field__close-bar {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
   text-overflow: ellipsis;
   white-space: nowrap;
   border: 0;
@@ -80,32 +69,23 @@ nano-icon {
   border: var(--open-btn-border);
   margin: 0;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
 }
 .date-field__open:focus {
-  -webkit-box-shadow: var(--focus-shadow);
-          box-shadow: var(--focus-shadow);
+  box-shadow: var(--focus-shadow);
   outline: none;
 }
 .date-field__close {
   -webkit-appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -moz-appearance: none;
-       appearance: none;
+  align-items: center;
+  appearance: none;
   background: var(--close-btn-color);
   border: 0;
   border-radius: 50%;
   cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   block-size: 24px;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   padding: 0;
   inline-size: 24px;
 }
@@ -115,8 +95,7 @@ nano-icon {
   }
 }
 .date-field__close:focus {
-  -webkit-box-shadow: var(--focus-shadow);
-          box-shadow: var(--focus-shadow);
+  box-shadow: var(--focus-shadow);
   outline: none;
 }
 @media (min-width: 36em) {

package/dist/collection/components/date-picker/date-picker.css

@@ -40,14 +40,12 @@
 .duet-date *,
 .duet-date *::before,
 .duet-date *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   margin: 0;
 }
 
 .duet-date {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   color: currentColor;
   display: block;
   margin: 0;
@@ -57,8 +55,6 @@
 }
 
 .duet-date__dialog {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   inset-block-start: 100%;
   max-inline-size: 100%;
@@ -75,8 +71,7 @@
   padding-block: 16px 20px;
   padding-inline: 16px;
   position: relative;
-  -webkit-transform: none;
-          transform: none;
+  transform: none;
   max-inline-size: 100%;
   inline-size: 100%;
 }
@@ -95,8 +90,7 @@
   font-weight: 600;
   letter-spacing: 1px;
   line-height: 1.25;
-  -webkit-padding-after: 8px;
-          padding-block-end: 8px;
+  padding-block-end: 8px;
   text-decoration: none;
   text-transform: uppercase;
 }
@@ -106,7 +100,6 @@
 }
 
 .duet-date__day {
-  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
@@ -121,14 +114,12 @@
   text-align: center;
   vertical-align: middle;
   z-index: 1;
-  -webkit-transition: 0.15s ease all;
   transition: 0.15s ease all;
   block-size: 2.5em;
   inline-size: 2.5em;
 }
 .duet-date__day.is-today {
-  -webkit-box-shadow: 0 0 0 1px var(--active-color);
-          box-shadow: 0 0 0 1px var(--active-color);
+  box-shadow: 0 0 0 1px var(--active-color);
   position: relative;
 }
 .duet-date__day:hover::before, .duet-date__day.is-today::before {
@@ -142,25 +133,21 @@
 [aria-selected=true] .duet-date__day {
   background: var(--active-color) !important;
   color: var(--active-text-color);
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   outline: 0;
 }
 .duet-date__day:active {
   background: var(--active-color);
-  -webkit-box-shadow: var(--focus-shadow);
-          box-shadow: var(--focus-shadow);
+  box-shadow: var(--focus-shadow);
   color: var(--active-text-color);
 }
 .duet-date__day:focus {
-  -webkit-box-shadow: var(--focus-shadow);
-          box-shadow: var(--focus-shadow);
+  box-shadow: var(--focus-shadow);
   outline: 0;
 }
 .duet-date__day.is-disabled {
   background: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   cursor: default;
   opacity: 0.5;
 }
@@ -169,8 +156,7 @@
 }
 .duet-date__day.is-outside {
   background: var(--inactive-color);
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   cursor: default;
   opacity: 0.6;
   pointer-events: none;
@@ -180,17 +166,10 @@
 }
 
 .duet-date__header {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-margin-after: 16px;
-          margin-block-end: 16px;
+  justify-content: space-between;
+  margin-block-end: 16px;
   inline-size: 100%;
 }
 
@@ -203,22 +182,15 @@
   background: var(--inactive-color);
   -moz-appearance: none;
   -webkit-appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   appearance: none;
   border: 0;
   border-radius: 50%;
   cursor: pointer;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
-  -webkit-margin-start: 8px;
-          margin-inline-start: 8px;
+  justify-content: space-around;
+  margin-inline-start: 8px;
   padding: 0;
-  -webkit-transition: background-color 300ms ease;
   transition: background-color 300ms ease;
   font-size: 0.9em;
   block-size: 2.2em;
@@ -226,14 +198,12 @@
 }
 .duet-date__prev:focus,
 .duet-date__next:focus {
-  -webkit-box-shadow: var(--focus-shadow);
-          box-shadow: var(--focus-shadow);
+  box-shadow: var(--focus-shadow);
   outline: 0;
 }
 .duet-date__prev:active:focus,
 .duet-date__next:active:focus {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 .duet-date__prev:disabled,
 .duet-date__next:disabled {
@@ -247,16 +217,12 @@
 }
 
 .duet-date__select {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-margin-before: 4px;
-          margin-block-start: 4px;
+  margin-block-start: 4px;
   position: relative;
 }
 .duet-date__select span {
-  -webkit-margin-end: 4px;
-          margin-inline-end: 4px;
+  margin-inline-end: 4px;
 }
 .duet-date__select select {
   cursor: pointer;
@@ -270,17 +236,12 @@
   z-index: 2;
 }
 .duet-date__select select.focus-visible:focus + .duet-date__select-label {
-  -webkit-box-shadow: var(--focus-shadow);
-          box-shadow: var(--focus-shadow);
+  box-shadow: var(--focus-shadow);
 }
 
 .duet-date__select-label {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   border-radius: 4px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   font-size: 1.25em;
   font-weight: 600;