@nanoporetech-digital/components 3.2.0 → 3.3.0

package/dist/collection/components/tabs/tab-content.css

@@ -12,23 +12,19 @@
 }
 :host {
   display: block;
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
-  -webkit-animation: opacity 0.3s ease-in-out forwards;
-          animation: opacity 0.3s ease-in-out forwards;
+  transform: translate3d(0, 0, 0);
+  animation: opacity 0.3s ease-in-out forwards;
   opacity: 1;
 }
 
 @media only screen and (max-width: 768px) {
   :host([animation-dir=left]) {
-    -webkit-animation: slide-right 0.3s ease-in-out;
-            animation: slide-right 0.3s ease-in-out;
+    animation: slide-right 0.3s ease-in-out;
     opacity: 1;
   }
 
   :host([animation-dir=right]) {
-    -webkit-animation: slide-left 0.3s ease-in-out;
-            animation: slide-left 0.3s ease-in-out;
+    animation: slide-left 0.3s ease-in-out;
     opacity: 1;
   }
 }
@@ -36,15 +32,6 @@
   position: relative;
 }
 
-@-webkit-keyframes opacity {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 100%;
-  }
-}
-
 @keyframes opacity {
   0% {
     opacity: 0;
@@ -53,65 +40,30 @@
     opacity: 100%;
   }
 }
-@-webkit-keyframes slide-left {
-  0% {
-    -webkit-transform: translate3d(-100%, 0, 0);
-            transform: translate3d(-100%, 0, 0);
-  }
-  50% {
-    -webkit-transform: translate3d(0%) translate3d(-0.9em);
-            transform: translate3d(0%) translate3d(-0.9em);
-  }
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-  }
-}
 @keyframes slide-left {
   0% {
-    -webkit-transform: translate3d(-100%, 0, 0);
-            transform: translate3d(-100%, 0, 0);
-  }
-  50% {
-    -webkit-transform: translate3d(0%) translate3d(-0.9em);
-            transform: translate3d(0%) translate3d(-0.9em);
-  }
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-  }
-}
-@-webkit-keyframes slide-right {
-  0% {
-    -webkit-transform: translate3d(100%, 0, 0);
-            transform: translate3d(100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
   }
   50% {
-    -webkit-transform: translateX(0%) translate3d(0.9em);
-            transform: translateX(0%) translate3d(0.9em);
+    transform: translate3d(0%) translate3d(-0.9em);
   }
   100% {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 }
 @keyframes slide-right {
   0% {
-    -webkit-transform: translate3d(100%, 0, 0);
-            transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
   }
   50% {
-    -webkit-transform: translateX(0%) translate3d(0.9em);
-            transform: translateX(0%) translate3d(0.9em);
+    transform: translateX(0%) translate3d(0.9em);
   }
   100% {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 }
 @media (prefers-reduced-motion: reduce) {
   * {
-    -webkit-animation: none !important;
-            animation: none !important;
+    animation: none !important;
   }
 }

package/dist/collection/components/tabs/tab-group.css

@@ -92,25 +92,18 @@
 }
 
 .nano-tab-group {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   border-radius: 0;
   width: 100%;
-  -webkit-box-flex: inherit;
-      -ms-flex: inherit;
-          flex: inherit;
+  flex: inherit;
 }
 .nano-tab-group__tabs {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   position: relative;
   width: 100%;
 }
 .nano-tab-group__active-tab-indicator {
   position: absolute;
-  -webkit-transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease;
   transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease;
 }
 .nano-tab-group__body {
@@ -121,32 +114,22 @@
 }
 .nano-tab-group .nano-tab-group__nav-container {
   position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   background: var(--tabs-container-bg);
 }
 .nano-tab-group button {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   background-color: transparent;
 }
 .nano-tab-group__scroll-button {
-  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;
+  align-items: center;
+  justify-content: center;
   position: absolute;
   inset-block: 0;
   border: unset;
   z-index: 2;
-  -webkit-transition: var(--nano-transition-fast, 0.3s) ease opacity;
   transition: var(--nano-transition-fast, 0.3s) ease opacity;
   opacity: 0;
   color: var(--scroll-btn-color);
@@ -158,8 +141,7 @@
   opacity: 1;
 }
 .nano-tab-group__scroll-button.focus-visible:focus {
-  -webkit-box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;
-          box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;
+  box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;
 }
 .nano-tab-group__scroll-button--left {
   inset-inline-start: 0;
@@ -171,16 +153,12 @@
   font-size: 16px;
 }
 .nano-tab-group--top {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
 }
 .nano-tab-group--top .nano-tab-group__nav-container::after {
   content: "";
   width: 86%;
-  -webkit-box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));
-          box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));
+  box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));
   height: 10px;
   position: absolute;
   inset-inline-start: 7%;
@@ -193,19 +171,14 @@
   -ms-overflow-style: none;
   padding-inline: var(--tabs-padding-start) var(--tabs-padding-end);
   padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
-  -webkit-transition: var(--nano-transition-medium, 0.5s) ease;
   transition: var(--nano-transition-medium, 0.5s) ease;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
   -webkit-mask-repeat: no-repeat;
           mask-repeat: no-repeat;
-  -webkit-mask-image: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));
   -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));
-          mask-image: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));
           mask-image: linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));
   -webkit-mask-size: calc(100% + var(--tabs-padding-end) * 4);
           mask-size: calc(100% + var(--tabs-padding-end) * 4);
@@ -221,9 +194,7 @@
   padding-inline: 0 var(--tabs-padding-end);
   padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);
   line-height: 1;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 .nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav {
   -webkit-mask-position: 0;
@@ -244,75 +215,47 @@
           mask-position: 0;
 }
 .nano-tab-group--top .nano-tab-group__tabs {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   position: relative;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  flex-direction: row;
   text-align: center;
   color: var(--tab-text-color);
   width: auto;
 }
 .nano-tab-group--top .nano-tab-group__active-tab-indicator {
   inset-block-end: -2px;
-  -webkit-border-after: solid var(--indicator-size) var(--indicator-color);
-          border-block-end: solid var(--indicator-size) var(--indicator-color);
+  border-block-end: solid var(--indicator-size) var(--indicator-color);
 }
 .nano-tab-group--top .nano-tab-group__body {
-  -webkit-box-ordinal-group: 3;
-      -ms-flex-order: 2;
-          order: 2;
+  order: 2;
   background: var(--content-bg);
   position: relative;
   overflow: hidden;
   width: auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   padding: var(--content-padding);
   border-radius: var(--content-border-radius);
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 .nano-tab-group--start {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  flex-direction: row;
 }
 .nano-tab-group--start .nano-tab-group__tabs {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex: 0 0 auto;
+  flex-direction: column;
   color: var(--tab-text-color);
   background: rgb(var(--tabs-bg-rgb));
-  -webkit-border-start: solid var(--indicator-size) var(--indicator-track-color);
-          border-inline-start: solid var(--indicator-size) var(--indicator-track-color);
+  border-inline-start: solid var(--indicator-size) var(--indicator-track-color);
   text-align: start;
 }
 .nano-tab-group--start .nano-tab-group__active-tab-indicator {
   inset-inline-start: -2px;
-  -webkit-border-start: solid var(--indicator-size) var(--indicator-color);
-          border-inline-start: solid var(--indicator-size) var(--indicator-color);
+  border-inline-start: solid var(--indicator-size) var(--indicator-color);
 }
 .nano-tab-group--start .nano-tab-group__body {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
-  -webkit-box-ordinal-group: 3;
-      -ms-flex-order: 2;
-          order: 2;
+  flex: 1 1 auto;
+  order: 2;
   padding: var(--content-padding);
   overflow: hidden;
   border-start-start-radius: 0;

package/dist/collection/components/tabs/tab.css

@@ -62,16 +62,12 @@
 
 :host([direction=horizontal]) .nanotab {
   font-size: var(--h-font-size);
-  -webkit-margin-before: var(--tab-indicator-size);
-          margin-block-start: var(--tab-indicator-size);
-  -webkit-border-end: solid var(--tab-divider-size) var(--tab-divider-color);
-          border-inline-end: solid var(--tab-divider-size) var(--tab-divider-color);
+  margin-block-start: var(--tab-indicator-size);
+  border-inline-end: solid var(--tab-divider-size) var(--tab-divider-color);
 }
 :host([direction=horizontal]) .nanotab.nanotab--active {
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
-  -webkit-border-before: solid var(--tab-indicator-size) var(--tab-indicator-color);
-          border-block-start: solid var(--tab-indicator-size) var(--tab-indicator-color);
+  margin-block-start: 0;
+  border-block-start: solid var(--tab-indicator-size) var(--tab-indicator-color);
   background: var(--active-bg);
   color: var(--active-text-color);
 }
@@ -89,38 +85,26 @@
   text-align: inherit;
   white-space: inherit;
   color: inherit;
-  -webkit-margin-end: var(--tab-spacing);
-          margin-inline-end: var(--tab-spacing);
+  margin-inline-end: var(--tab-spacing);
   padding: var(--padding);
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   block-size: 100%;
   inline-size: auto;
   background: var(--inactive-bg);
   border-radius: var(--border-radius) var(--border-radius) 0 0;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   cursor: pointer;
   overflow: visible;
   white-space: nowrap;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .nanotab ::slotted(*) {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 :host(:last-of-type) .nanotab {
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
+  margin-inline-end: 0;
 }
 .nanotab:hover:not(.tab--disabled) {
   text-shadow: 0 0 0.01px var(--text-color);
@@ -128,13 +112,11 @@
 .nanotab:focus {
   outline: none;
   outline-style: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   border-color: transparent;
 }
 .nanotab:focus:not(.nanotab--disabled) {
-  -webkit-box-shadow: var(--focus-shadow) inset;
-          box-shadow: var(--focus-shadow) inset;
+  box-shadow: var(--focus-shadow) inset;
 }
 .nanotab--disabled {
   background: rgba(var(--disabled-bg-rgb), 1);
@@ -143,7 +125,6 @@
   color: var(--disabled-text-color);
 }
 .nanotab__close-button {
-  -webkit-margin-start: var(--nano-spacing-small, 8px);
-          margin-inline-start: var(--nano-spacing-small, 8px);
+  margin-inline-start: var(--nano-spacing-small, 8px);
   --padding: var(--nano-spacing-xsmall, 4px) !important;
 }

package/dist/collection/components/tooltip/tooltip.css

@@ -40,20 +40,12 @@
   color: white;
   opacity: 0;
   padding: var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));
-  -webkit-transform: translateY(10px) translateZ(0);
-          transform: translateY(10px) translateZ(0);
-  -webkit-transform-origin: bottom;
-          transform-origin: bottom;
-  -webkit-transition-property: opacity, -webkit-transform;
-  transition-property: opacity, -webkit-transform;
+  transform: translateY(10px) translateZ(0);
+  transform-origin: bottom;
   transition-property: opacity, transform;
-  transition-property: opacity, transform, -webkit-transform;
-  -webkit-transition-delay: var(--hide-delay);
-          transition-delay: var(--hide-delay);
-  -webkit-transition-duration: var(--hide-duration);
-          transition-duration: var(--hide-duration);
-  -webkit-transition-timing-function: var(--hide-timing-function);
-          transition-timing-function: var(--hide-timing-function);
+  transition-delay: var(--hide-delay);
+  transition-duration: var(--hide-duration);
+  transition-timing-function: var(--hide-timing-function);
   white-space: normal;
 }
 .tooltip-arrow {
@@ -62,7 +54,6 @@
   inline-size: 0;
   block-size: 0;
   color: black;
-  -webkit-transition: 0.2s ease transform;
   transition: 0.2s ease transform;
 }
 .tooltip-positioner {
@@ -70,43 +61,31 @@
   z-index: var(--nano-layer-index-tooltip, 1000);
 }
 .tooltip-positioner[data-popper-placement^=top] .tooltip {
-  -webkit-transform-origin: bottom;
-          transform-origin: bottom;
-  -webkit-transform: translateY(-10px) translateZ(0);
-          transform: translateY(-10px) translateZ(0);
+  transform-origin: bottom;
+  transform: translateY(-10px) translateZ(0);
 }
 .tooltip-positioner[data-popper-placement^=bottom] .tooltip {
-  -webkit-transform-origin: top;
-          transform-origin: top;
+  transform-origin: top;
 }
 .tooltip-positioner[data-popper-placement^=left] .tooltip {
-  -webkit-transform-origin: right;
-          transform-origin: right;
+  transform-origin: right;
 }
 .tooltip-positioner[data-popper-placement^=right] .tooltip {
-  -webkit-transform-origin: left;
-          transform-origin: left;
+  transform-origin: left;
 }
 .tooltip-positioner.popover-visible .tooltip {
   opacity: 1;
-  -webkit-transform: none;
-          transform: none;
-  -webkit-transition-delay: var(--show-delay);
-          transition-delay: var(--show-delay);
-  -webkit-transition-duration: var(--show-duration);
-          transition-duration: var(--show-duration);
-  -webkit-transition-timing-function: var(--show-timing-function);
-          transition-timing-function: var(--show-timing-function);
+  transform: none;
+  transition-delay: var(--show-delay);
+  transition-duration: var(--show-duration);
+  transition-timing-function: var(--show-timing-function);
 }
 .tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow {
   inset-block-end: 100%;
   inset-inline-start: calc(50% - 5px);
-  -webkit-border-after: 5px solid;
-          border-block-end: 5px solid;
-  -webkit-border-start: 5px solid transparent;
-          border-inline-start: 5px solid transparent;
-  -webkit-border-end: 5px solid transparent;
-          border-inline-end: 5px solid transparent;
+  border-block-end: 5px solid;
+  border-inline-start: 5px solid transparent;
+  border-inline-end: 5px solid transparent;
 }
 .tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow {
   inset-inline-start: 5px;
@@ -117,12 +96,9 @@
 .tooltip-positioner[data-popper-placement^=top] .tooltip-arrow {
   inset-block-start: 100%;
   inset-inline-start: calc(50% - 5px);
-  -webkit-border-before: 5px solid;
-          border-block-start: 5px solid;
-  -webkit-border-start: 5px solid transparent;
-          border-inline-start: 5px solid transparent;
-  -webkit-border-end: 5px solid transparent;
-          border-inline-end: 5px solid transparent;
+  border-block-start: 5px solid;
+  border-inline-start: 5px solid transparent;
+  border-inline-end: 5px solid transparent;
 }
 .tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow {
   inset-inline-start: 5px;
@@ -133,12 +109,9 @@
 .tooltip-positioner[data-popper-placement^=left] .tooltip-arrow {
   inset-block-start: calc(50% - 5px);
   inset-inline-start: 100%;
-  -webkit-border-start: 5px solid;
-          border-inline-start: 5px solid;
-  -webkit-border-before: 5px solid transparent;
-          border-block-start: 5px solid transparent;
-  -webkit-border-after: 5px solid transparent;
-          border-block-end: 5px solid transparent;
+  border-inline-start: 5px solid;
+  border-block-start: 5px solid transparent;
+  border-block-end: 5px solid transparent;
 }
 .tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow {
   inset-block-start: 5px;
@@ -149,12 +122,9 @@
 .tooltip-positioner[data-popper-placement^=right] .tooltip-arrow {
   inset-block-start: calc(50% - 5px);
   inset-inline-end: 100%;
-  -webkit-border-end: 5px solid;
-          border-inline-end: 5px solid;
-  -webkit-border-before: 5px solid transparent;
-          border-block-start: 5px solid transparent;
-  -webkit-border-after: 5px solid transparent;
-          border-block-end: 5px solid transparent;
+  border-inline-end: 5px solid;
+  border-block-start: 5px solid transparent;
+  border-block-end: 5px solid transparent;
 }
 .tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow {
   inset-block-start: 5px;

package/dist/collection/utils/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/utils/dom.ts"],"names":[],"mappings":"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","sourcesContent":["export function closestElement(selector: string, base: Element = this) {\n  function __closestFrom(el: Element | Window | Document): Element {\n    if (!el || el === document || el === window) return null;\n    if ((el as HTMLSlotElement).assignedSlot)\n      el = (el as HTMLSlotElement).assignedSlot;\n    const found = (el as Element).closest(selector);\n    return found\n      ? found\n      : __closestFrom(((el as Element).getRootNode() as ShadowRoot).host);\n  }\n  return __closestFrom(base);\n}\n\n/**\n * Get direct child elements / nodes from from any element (for when querySelectorAll(':scope > .selector') fails)\n * @param el - a root element to query from\n * @param sel - a query selector string\n * @param elesOnly - return only Elements (no Nodes)\n */\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: true\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: 'slot'\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: false\n): Array<T | Node>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly: boolean | 'slot' = true\n) {\n  if (elesOnly === true) {\n    try {\n      sel = ':scope > ' + sel.split(',').join(', :scope >');\n      return Array.from(el.querySelectorAll(sel)) as unknown as Array<T>;\n    } catch (e) {\n      console.log('an error sad');\n    }\n  }\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      Element.prototype.msMatchesSelector ||\n      Element.prototype.webkitMatchesSelector;\n  }\n\n  const ret: Array<Node | T> = [];\n  Array.from(el.childNodes).forEach((e) => {\n    if (!!(e as Element).matches && (e as Element).matches(sel)) ret.push(e);\n    else if (e.nodeName.toLowerCase() === 'slot') {\n      Array.from((e as HTMLSlotElement).assignedNodes()).forEach((slotEl) => {\n        if (slotEl instanceof Element && slotEl.matches(sel)) ret.push(slotEl);\n        else if (slotEl instanceof Node && !elesOnly) ret.push(slotEl as Node);\n      });\n    } else if (!elesOnly) ret.push(e as Node);\n  });\n  return ret;\n}\n\nexport const getSiblings = (el: Element, sel?: string): Array<Element> => {\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      Element.prototype.msMatchesSelector ||\n      Element.prototype.webkitMatchesSelector;\n  }\n  const siblings = [];\n  let firstChild = el.parentNode.firstElementChild;\n  do {\n    if (!sel || (firstChild !== el && firstChild.matches(sel)))\n      siblings.push(firstChild);\n  } while ((firstChild = firstChild.nextElementSibling));\n  return siblings;\n};\n\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  if (!parent || !element) return;\n  return {\n    top:\n      element.getBoundingClientRect().top - parent.getBoundingClientRect().top,\n    left:\n      element.getBoundingClientRect().left -\n      parent.getBoundingClientRect().left,\n  };\n}\n"]}
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/utils/dom.ts"],"names":[],"mappings":"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","sourcesContent":["export function closestElement(selector: string, base: Element = this) {\n  function __closestFrom(el: Element | Window | Document): Element {\n    if (!el || el === document || el === window) return null;\n    if ((el as HTMLSlotElement).assignedSlot)\n      el = (el as HTMLSlotElement).assignedSlot;\n    const found = (el as Element).closest(selector);\n    return found\n      ? found\n      : __closestFrom(((el as Element).getRootNode() as ShadowRoot).host);\n  }\n  return __closestFrom(base);\n}\n\n/**\n * Get direct child elements / nodes from from any element (for when querySelectorAll(':scope > .selector') fails)\n * @param el - a root element to query from\n * @param sel - a query selector string\n * @param elesOnly - return only Elements (no Nodes)\n */\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: true\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: 'slot'\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: false\n): Array<T | Node>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly: boolean | 'slot' = true\n) {\n  if (elesOnly === true) {\n    try {\n      sel = ':scope > ' + sel.split(',').join(', :scope >');\n      return Array.from(el.querySelectorAll(sel)) as unknown as Array<T>;\n    } catch (e) {\n      console.log('an error sad');\n    }\n  }\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      Element.prototype.msMatchesSelector ||\n      Element.prototype.webkitMatchesSelector;\n  }\n\n  const ret: Array<Node | T> = [];\n  Array.from(el.childNodes).forEach((e) => {\n    if (!!(e as Element).matches && (e as Element).matches(sel)) ret.push(e);\n    else if (e.nodeName.toLowerCase() === 'slot') {\n      Array.from((e as HTMLSlotElement).assignedNodes()).forEach((slotEl) => {\n        if (slotEl instanceof Element && slotEl.matches(sel)) ret.push(slotEl);\n        else if (slotEl instanceof Node && !elesOnly) ret.push(slotEl as Node);\n      });\n    } else if (!elesOnly) ret.push(e as Node);\n  });\n  return ret;\n}\n\nexport const getSiblings = <T extends Element>(\n  el: Element,\n  sel?: string\n): Array<T> => {\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      Element.prototype.msMatchesSelector ||\n      Element.prototype.webkitMatchesSelector;\n  }\n  const siblings = [];\n  let firstChild = el.parentNode.firstElementChild;\n  do {\n    if (!sel || (firstChild !== el && firstChild.matches(sel)))\n      siblings.push(firstChild);\n  } while ((firstChild = firstChild.nextElementSibling));\n  return siblings;\n};\n\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  if (!parent || !element) return;\n  return {\n    top:\n      element.getBoundingClientRect().top - parent.getBoundingClientRect().top,\n    left:\n      element.getBoundingClientRect().left -\n      parent.getBoundingClientRect().left,\n  };\n}\n"]}

package/dist/collection/utils/modal.js

@@ -30,7 +30,7 @@ export default class Modal {
     if (this.isActive() && !path.includes(this.element)) {
       const tabbableElements = getTabbableElements(this.element);
       const index = this.tabDirection === 'backward' ? tabbableElements.length - 1 : 0;
-      tabbableElements[index].focus({ preventScroll: true });
+      tabbableElements[index]?.focus({ preventScroll: true });
     }
   }
   handleKeyDown(event) {

package/dist/collection/utils/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../src/utils/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,IAAI,YAAY,GAAkB,EAAE,CAAC;AAErC,MAAM,CAAC,OAAO,OAAO,KAAK;EAIxB,YAAY,OAAoB;IAFhC,iBAAY,GAA2B,SAAS,CAAC;IAG/C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACrD,CAAC;EAED,QAAQ;IACN,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;EAC3D,CAAC;EAED,UAAU;IACR,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IACtE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC5D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;EAC9D,CAAC;EAED,QAAQ;IACN,yDAAyD;IACzD,OAAO,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC;EAChE,CAAC;EAED,aAAa,CAAC,KAAY;IACxB,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAElC,0DAA0D;IAC1D,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MACnD,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAC3D,MAAM,KAAK,GACT,IAAI,CAAC,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MACrE,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;KACxD;EACH,CAAC;EAED,aAAa,CAAC,KAAoB;IAChC,wCAAwC;IACxC,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE;MACzC,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;MAC/B,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC;KACnD;EACH,CAAC;CACF","sourcesContent":["import { getTabbableElements } from './tabbable';\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  tabDirection: 'forward' | 'backward' = 'forward';\n\n  constructor(element: HTMLElement) {\n    this.element = element;\n    this.handleFocusIn = this.handleFocusIn.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n    document.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  deactivate() {\n    activeModals = activeModals.filter((modal) => modal !== this.element);\n    document.removeEventListener('focusin', this.handleFocusIn);\n    document.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  handleFocusIn(event: Event) {\n    const path = event.composedPath();\n\n    // Trap focus so it doesn't go out of the modal's boundary\n    if (this.isActive() && !path.includes(this.element)) {\n      const tabbableElements = getTabbableElements(this.element);\n      const index =\n        this.tabDirection === 'backward' ? tabbableElements.length - 1 : 0;\n      tabbableElements[index].focus({ preventScroll: true });\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    // Quick hack to determine tab direction\n    if (event.key === 'Tab' && event.shiftKey) {\n      this.tabDirection = 'backward';\n      setTimeout(() => (this.tabDirection = 'forward'));\n    }\n  }\n}\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../src/utils/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,IAAI,YAAY,GAAkB,EAAE,CAAC;AAErC,MAAM,CAAC,OAAO,OAAO,KAAK;EAIxB,YAAY,OAAoB;IAFhC,iBAAY,GAA2B,SAAS,CAAC;IAG/C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACrD,CAAC;EAED,QAAQ;IACN,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;EAC3D,CAAC;EAED,UAAU;IACR,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IACtE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC5D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;EAC9D,CAAC;EAED,QAAQ;IACN,yDAAyD;IACzD,OAAO,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC;EAChE,CAAC;EAED,aAAa,CAAC,KAAY;IACxB,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAElC,0DAA0D;IAC1D,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MACnD,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAC3D,MAAM,KAAK,GACT,IAAI,CAAC,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MACrE,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;KACzD;EACH,CAAC;EAED,aAAa,CAAC,KAAoB;IAChC,wCAAwC;IACxC,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE;MACzC,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;MAC/B,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC;KACnD;EACH,CAAC;CACF","sourcesContent":["import { getTabbableElements } from './tabbable';\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  tabDirection: 'forward' | 'backward' = 'forward';\n\n  constructor(element: HTMLElement) {\n    this.element = element;\n    this.handleFocusIn = this.handleFocusIn.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n    document.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  deactivate() {\n    activeModals = activeModals.filter((modal) => modal !== this.element);\n    document.removeEventListener('focusin', this.handleFocusIn);\n    document.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  handleFocusIn(event: Event) {\n    const path = event.composedPath();\n\n    // Trap focus so it doesn't go out of the modal's boundary\n    if (this.isActive() && !path.includes(this.element)) {\n      const tabbableElements = getTabbableElements(this.element);\n      const index =\n        this.tabDirection === 'backward' ? tabbableElements.length - 1 : 0;\n      tabbableElements[index]?.focus({ preventScroll: true });\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    // Quick hack to determine tab direction\n    if (event.key === 'Tab' && event.shiftKey) {\n      this.tabDirection = 'backward';\n      setTimeout(() => (this.tabDirection = 'forward'));\n    }\n  }\n}\n"]}

package/dist/collection/utils/tabbable.js

@@ -69,18 +69,27 @@ export function getTabbableElements(root, first = false) {
     }
     // Look for tabbable elements in the shadow root
     if (root.shadowRoot && root.shadowRoot.mode === 'open') {
-      getTabbableElements(root.shadowRoot, first).map((el) => tabbableElements.push(el));
+      getTabbableElements(root.shadowRoot, first).map((el) => {
+        if (!tabbableElements.includes(el))
+          tabbableElements.push(el);
+      });
     }
     // Look at slotted elements
     if (HTMLSlotElement && root instanceof HTMLSlotElement) {
       root.assignedElements().map((slottedEl) => {
-        getTabbableElements(slottedEl, first).map((el) => tabbableElements.push(el));
+        getTabbableElements(slottedEl, first).map((el) => {
+          if (!tabbableElements.includes(el))
+            tabbableElements.push(el);
+        });
       });
     }
   }
   // Look for tabbable elements in children
   Array.from(root.querySelectorAll('*')).map((el) => {
-    getTabbableElements(el, first).map((el) => tabbableElements.push(el));
+    getTabbableElements(el, first).map((el) => {
+      if (!tabbableElements.includes(el))
+        tabbableElements.push(el);
+    });
   });
   return tabbableElements;
 }