@nanoporetech-digital/components 8.0.0-alpha.6 → 8.0.0-alpha.7

package/dist/collection/components/slides/slides.css

@@ -41,6 +41,8 @@
   * @prop --dot-color: inactive colour of pager bullets. Defaults to var(--nano-color-neutral-400);
   * @prop --dot-color-active: active colour of pager bullets. Defaults to var(--nano-color-primary-1000);
   *
+  * @prop --navbtns-width: next / prev button width. Default 1.875rem;
+  * @prop --navbtns-height: next / prev button height. Default 2.75rem;
   * @prop --navbtns-icon-color: next / prev icon color. Default var(--dot-color-active);
   * @prop --navbtns-bg-color: next / prev bg color. Defaults to var(--nano-color-base-0);
   * @prop --navbtns-icon-color-disabled: next / prev icon color. Default var(--dot-color-active);
@@ -55,8 +57,12 @@
   --navbtns-bg-color: transparent;
   --navbtns-icon-color-disabled: var(--dot-color-active);
   --navbtns-bg-color-disabled: transparent;
+  --navbtns-width: 1.875rem;
+  --navbtns-height: 2.75rem;
   --fsbtn-icon-color: var(--dot-color-active);
   --fsbtn-bg-color: transparent;
+  --flip-icon-ltr: 0;
+  --flip-icon-rtl: 1;
   display: block;
   -webkit-user-select: none;
           user-select: none;
@@ -65,6 +71,10 @@
   opacity: 0;
   max-inline-size: 100vw;
 }
+:host:dir(rtl) {
+  --flip-icon-ltr: 1;
+  --flip-icon-rtl: 0;
+}
 
 :host([ready]) {
   opacity: 1;
@@ -78,7 +88,7 @@
 }
 .slideshow.not-ready {
   inline-size: 100%;
-  block-size: 300px;
+  max-block-size: 300px;
   overflow: hidden;
 }
 
@@ -189,19 +199,40 @@ https://flickity.metafizzy.co
   background: var(--navbtns-bg-color-disabled);
 }
 
-.flickity-button-icon {
-  fill: var(--navbtns-icon-color);
+.button-icon {
+  display: block;
 }
-
-.flickity-button:disabled .flickity-button-icon {
-  fill: var(--navbtns-icon-color-disabled);
+.button-icon::after {
+  content: "";
+  display: block;
+  background-size: cover;
+  inline-size: var(--navbtns-width);
+  block-size: var(--navbtns-height);
+  background-color: var(--navbtns-icon-color);
+  -webkit-mask-image: var(--nano-component-icon-chevron);
+          mask-image: var(--nano-component-icon-chevron);
+  transition: color var(--nano-transition-fast) ease;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+          mask-position: center;
+  transform-origin: center;
+  margin-inline-start: auto;
+  rotate: calc(180deg * var(--flip-icon-ltr));
+  -webkit-mask-size: cover;
+          mask-size: cover;
+}
+.button-icon--previous::after {
+  rotate: calc(180deg * var(--flip-icon-rtl));
+}
+
+.flickity-button:disabled .button-icon::after {
+  background-color: var(--navbtns-icon-color-disabled);
 }
 
 /* ---- previous/next buttons ---- */
 .flickity-prev-next-button {
   inset-block-start: 50%;
-  inline-size: 44px;
-  block-size: 44px;
   /* vertically center */
   transform: translateY(-50%);
 }

package/dist/components/date-picker.js

@@ -392,12 +392,12 @@ const NanoDatePicker = /*@__PURE__*/ proxyCustomElement(class NanoDatePicker ext
     async setFocus(day = false) {
         this.setFocusedDay(parseISODate(this.selectedDate) || new Date());
         if (day) {
-            setTimeout((_) => this.focusedDayNode.focus(), 20);
+            setTimeout((_) => this.focusedDayNode.focus({ preventScroll: true }), 20);
             return;
         }
         clearTimeout(this.focusTimeoutId);
         this.focusTimeoutId = setTimeout(() => {
-            this.monthSelectNode.focus();
+            this.monthSelectNode.focus({ preventScroll: true });
         }, 20);
     }
     handleSelectedDateChange() {
@@ -553,7 +553,7 @@ const NanoDatePicker = /*@__PURE__*/ proxyCustomElement(class NanoDatePicker ext
     processFocusedDayNode = (element) => {
         this.focusedDayNode = element;
         if (this.activeFocus) {
-            setTimeout(() => element.focus(), 0);
+            setTimeout(() => element.focus({ preventScroll: true }), 0);
         }
     };
     componentWillLoad() {
@@ -578,11 +578,11 @@ const NanoDatePicker = /*@__PURE__*/ proxyCustomElement(class NanoDatePicker ext
             minYear = minDate.getFullYear();
         if (maxDate)
             maxYear = maxDate.getFullYear();
-        return (h(Host, { key: '476708135e014efc8662dcfdd6877bfa21ef6f31', class: "nano-date-picker" }, h("div", { key: '4ff36de5c9e6c86fa26638db70514f12fad96262', class: "duet-date" }, h("div", { key: '544a676f3354fc3cd0a6c0f1fd8610d47c5c586b', class: {
+        return (h(Host, { key: '1793ae3627c1af938416338594a3607f7a686706', class: "nano-date-picker" }, h("div", { key: '2f50b7959a5787581f0e824f7c5e433ca3985784', class: "duet-date" }, h("div", { key: '805511e4311e996c3729a30da4b66a29288fc137', class: {
                 'duet-date__dialog': true,
                 'is-active': true,
-            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '94665c51ab3ee801e6affb6be91076777f329665', class: "duet-date__dialog-content" }, h("div", { key: '3e014e07dd3f43808bdb99fbc79c6f81958328ac', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '6759c71255f8ff0c05a56e118ad628afc7f1af43', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: 'b0688e27b47a95fbb8c051d0680975741547762e' }, h("h2", { key: '1bb4b0035cc07304248c496c55077a88d43d57f5', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: 'e740c878525a794eaac04b44c4770edaa5a1d780', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '658b004a5ae3e50070a2683f92c68b924246a4e9', class: "duet-date__select" }, h("select", { key: '3a99660e9c05ca78d5945b4a8dd581f3fcd64fff', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
-                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '6c9f19bbd85e2d6bd16e06b87507599a77f3b8e0', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '94813adbb53c491d53045106a0e97e68ecc8a257' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: 'd6d867b3732097902ac0b537d055ec0eb6dbb11f', name: "light/chevron-down" }))), h("label", { key: 'a77adf78db5d8f2ec2998526c2d5d2882fb01a24', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'fe5d77c1f3d5cb7bc8ba2befd232b001fcafa8da', class: "duet-date__select" }, h("select", { key: '3585692273f5bdfdb58e1e265bb6b754708cb69a', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'ce1137c980183ccffc195f83bdc5147de3f8194b', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'a5d3e28fdbb1b4192f51da8009cce094558db3c0' }, this.focusedDay.getFullYear()), h("nano-icon", { key: '0958bff2d269607480fb9475f4a58df147885f4b', name: "light/chevron-down" })))), h("div", { key: 'd49585f3b292ba85ed013e52a5a042cb55601937', class: "duet-date__nav" }, h("button", { key: '1f3f492d1965e6416a5fac52db0ecba7864b8df7', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: 'abe59d338029675ad55a5e7faab8170ca2c2af2f', name: "light/chevron-left" }), h("span", { key: '7d59fa5d95085c6d66d93f95c953e9a2f74b8a5f', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'a895a7b901ca21fa32710c3a187ce263cf105908', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: 'b8737eb28e5ad5873f40523a557745a338aa5277', name: "light/chevron-right" }), h("span", { key: '2c98c7be89ce30939c647f7faea1c531fa0d38a9', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: '42284a65a7e2bb5302cd75a61f19a691ea1236bd' }, h(DatePickerMonth, { key: 'd548838275eecb1a2dff47851e9fd57c9f49f691', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
+            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '333ed28590d71bddb694c6ba8a6bd4056012c209', class: "duet-date__dialog-content" }, h("div", { key: '62235540545d46423a368a25518079fee3d29b0f', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '5154197320634e2fc9d59cecc6ab83f5e6922c58', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '04d15f2d9b914c5334d5765b7279f2bcbeb0acf0' }, h("h2", { key: '56e76ca762e7fda6db0531435d0e48c511d7cc31', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: 'ef4ff1b95cc348a308e119246cd9a617438ec44c', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '7f10da9f614ddb58f89fa6d5964817295feeed45', class: "duet-date__select" }, h("select", { key: '58d4f452c9ffdf441bb42a8e044f2d17382662e9', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
+                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: 'd7fb131ba8f73e1a8f03711971115ba9f26798e5', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'ed65bb461b54b9862fd58b5d21de5cdf52da1a8a' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: '1b8ecb5652cc2a0daba3ff9d2cc14dca8f8055a9', name: "light/chevron-down" }))), h("label", { key: '2eb441ddd3ada49165f41bec138dcddd3cf8fc28', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '12deefa0da5a17e8a81ee733eb5d76a7384409fe', class: "duet-date__select" }, h("select", { key: 'b3a3a05d0fab4c69eb72f1ca4aa603fa0856fe37', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '960b6cee86d795dd88d015aff93318dc9876e628', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'e14f14c75613c197001240b965358fe3aa6a1cb3' }, this.focusedDay.getFullYear()), h("nano-icon", { key: 'a74f16678cd2f444a881a19e55774988444f0515', name: "light/chevron-down" })))), h("div", { key: 'c20d467896edad680eef48d40a22de5657da0e75', class: "duet-date__nav" }, h("button", { key: 'f3d8bf7f048d04796b450f6123b6e90b45b37655', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: 'd115ff718668dfa3dd9e05733baeb21bc179a5a5', name: "light/chevron-left" }), h("span", { key: 'd5ba77a2eb0a81a469973d7873e10beb6683c02f', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '9d745902f2d971b2f5d0ad467274c0a180a5d173', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: '5a5fabb015800b28cc276a8f69701e347bf8a1d5', name: "light/chevron-right" }), h("span", { key: '418d78e367dcc1cf0f85002a8f975920d57521f2', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: '89e4f57750c36ab9b616b961c0524a554d95ec77' }, h(DatePickerMonth, { key: 'e6c173dedbe03b267a1536403822415a968dea65', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
     }
     static get watchers() { return {
         "selectedDate": ["handleSelectedDateChange"]

package/dist/components/slides.js

@@ -2195,7 +2195,6 @@ var drag = () => {
 };
 
 var nowNext = () => {
-    const svgURI = 'http://www.w3.org/2000/svg';
     // -------------------------- PrevNextButton -------------------------- //
     function PrevNextButton(direction, parent) {
         this.direction = direction;
@@ -2235,8 +2234,10 @@ var nowNext = () => {
             });
         });
         // create arrow
-        const svg = this.createSVG();
-        slot.appendChild(svg);
+        const icon = document.createElement('span');
+        icon.className = 'button-icon ' + (this.isPrevious ? 'button-icon--previous' : 'button-icon--next');
+        icon.part.add('navigation-icon');
+        slot.appendChild(icon);
         // events
         this.parent.on('select', this.update.bind(this));
         this.on('pointerDown', this.parent.childUIPointerDown.bind(this.parent));
@@ -2254,53 +2255,6 @@ var nowNext = () => {
         this.unbindStartEvent(this.element);
         this.element.removeEventListener('click', this);
     };
-    PrevNextButton.prototype.createSVG = function () {
-        const svg = document.createElementNS(svgURI, 'svg');
-        svg.setAttribute('class', 'flickity-button-icon');
-        svg.setAttribute('viewBox', '0 0 100 100');
-        svg.part.add('navigation-icon');
-        const path = document.createElementNS(svgURI, 'path');
-        const pathMovements = getArrowMovements(this.parent.options.arrowShape);
-        path.setAttribute('d', pathMovements);
-        path.setAttribute('class', 'arrow');
-        // rotate arrow
-        if (!this.isLeft) {
-            path.setAttribute('transform', 'translate(100, 100) rotate(180) ');
-        }
-        svg.appendChild(path);
-        return svg;
-    };
-    // get SVG path movmement
-    function getArrowMovements(shape) {
-        // use shape as movement if string
-        if (typeof shape == 'string') {
-            return shape;
-        }
-        // create movement string
-        return ('M ' +
-            shape.x0 +
-            ',50' +
-            ' L ' +
-            shape.x1 +
-            ',' +
-            (shape.y1 + 50) +
-            ' L ' +
-            shape.x2 +
-            ',' +
-            (shape.y2 + 50) +
-            ' L ' +
-            shape.x3 +
-            ',50 ' +
-            ' L ' +
-            shape.x2 +
-            ',' +
-            (50 - shape.y2) +
-            ' L ' +
-            shape.x1 +
-            ',' +
-            (50 - shape.y1) +
-            ' Z');
-    }
     PrevNextButton.prototype.handleEvent = utils.handleEvent;
     PrevNextButton.prototype.onclick = function () {
         if (!this.isEnabled) {
@@ -2511,7 +2465,7 @@ drag();
 nowNext();
 player();
 
-const slidesCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--dot-color:var(--nano-color-neutral-400);--dot-color-active:var(--nano-color-primary-1000);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:transparent;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:transparent;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:transparent;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-inline-size:100vw}:host([ready]){opacity:1}.slideshow{max-block-size:100%;min-block-size:inherit;block-size:inherit;position:relative}.slideshow.not-ready{inline-size:100%;block-size:300px;overflow:hidden}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex;inline-size:fit-content;block-size:fit-content}.not-ready .flickity-container{inline-size:fit-content;block-size:fit-content}.flickity-container.slides-ready{min-block-size:inherit;max-block-size:inherit;block-size:inherit;inline-size:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;inline-size:44px;block-size:44px;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{position:absolute;inline-size:100%;padding:0;margin:0;text-align:center;line-height:1;z-index:4;display:inline-flex;justify-content:center;bottom:0}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{all:unset;text-indent:200%;white-space:nowrap;overflow:hidden;display:inline-block;display:inline-block;position:relative;inline-size:1.25rem;block-size:0.375rem;margin-block:0;cursor:pointer;padding:calc(var(--nano-spacing-md) / 2)}.flickity-page-dots .dot::after{content:\"\";position:absolute;inset:0;background:currentColor;background:var(--dot-color);margin:calc(var(--nano-spacing-md) / 2)}.flickity-page-dots .dot:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.flickity-page-dots .dot.is-selected::after{background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:hsla(0, 0%, 0%, 0.9);padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
+const slidesCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--dot-color:var(--nano-color-neutral-400);--dot-color-active:var(--nano-color-primary-1000);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:transparent;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:transparent;--navbtns-width:1.875rem;--navbtns-height:2.75rem;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:transparent;--flip-icon-ltr:0;--flip-icon-rtl:1;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-inline-size:100vw}:host:dir(rtl){--flip-icon-ltr:1;--flip-icon-rtl:0}:host([ready]){opacity:1}.slideshow{max-block-size:100%;min-block-size:inherit;block-size:inherit;position:relative}.slideshow.not-ready{inline-size:100%;max-block-size:300px;overflow:hidden}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex;inline-size:fit-content;block-size:fit-content}.not-ready .flickity-container{inline-size:fit-content;block-size:fit-content}.flickity-container.slides-ready{min-block-size:inherit;max-block-size:inherit;block-size:inherit;inline-size:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.button-icon{display:block}.button-icon::after{content:\"\";display:block;background-size:cover;inline-size:var(--navbtns-width);block-size:var(--navbtns-height);background-color:var(--navbtns-icon-color);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);transition:color var(--nano-transition-fast) ease;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;margin-inline-start:auto;rotate:calc(180deg * var(--flip-icon-ltr));-webkit-mask-size:cover;mask-size:cover}.button-icon--previous::after{rotate:calc(180deg * var(--flip-icon-rtl))}.flickity-button:disabled .button-icon::after{background-color:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{position:absolute;inline-size:100%;padding:0;margin:0;text-align:center;line-height:1;z-index:4;display:inline-flex;justify-content:center;bottom:0}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{all:unset;text-indent:200%;white-space:nowrap;overflow:hidden;display:inline-block;display:inline-block;position:relative;inline-size:1.25rem;block-size:0.375rem;margin-block:0;cursor:pointer;padding:calc(var(--nano-spacing-md) / 2)}.flickity-page-dots .dot::after{content:\"\";position:absolute;inset:0;background:currentColor;background:var(--dot-color);margin:calc(var(--nano-spacing-md) / 2)}.flickity-page-dots .dot:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.flickity-page-dots .dot.is-selected::after{background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:hsla(0, 0%, 0%, 0.9);padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
 
 const modulo = (num, div) => {
     return ((num % div) + div) % div;

package/dist/esm/{algolia-data-D6wnbV__.js → algolia-data-B1lm-wYl.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { a as getElement } from './index-DXvE-U_j.js';
+import { g as getElement } from './index-CX_Hk6ss.js';
 
 var createDeferredPromise = function () {
     var resolve;

package/dist/esm/app-globals-CWIH620u.js

@@ -0,0 +1,8 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+var appGlobalScript = async () => { };
+
+const globalScripts = appGlobalScript;
+
+export { globalScripts as g };

package/dist/esm/{component-store-CH5BI3Tg.js → component-store-DMqr8_D3.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { a as getElement } from './index-DXvE-U_j.js';
+import { g as getElement } from './index-CX_Hk6ss.js';
 import { d as debounce } from './throttle-C93FMm2Z.js';
 
 function parse(searchParams, replacer) {

package/dist/esm/{dom-Cb7FUtXp.js → dom-COiksOVZ.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import './index-DXvE-U_j.js';
+import './index-CX_Hk6ss.js';
 
 var NODE_TYPE;
 (function (NODE_TYPE) {

package/dist/esm/{fade-C74M8NQp.js → fade-TBJBUY-M.js}

@@ -1,9 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity, u as utils } from './nano-slides-Bv0u7kg0.js';
-import './index-DXvE-U_j.js';
-import './renderer-BUaAsDso.js';
+import { F as Flickity, u as utils } from './nano-slides-CuheM3tf.js';
+import './index-CX_Hk6ss.js';
+import './renderer-ZmozgREV.js';
 
 const Slide = Flickity.Slide;
 const slideUpdateTarget = Slide.prototype.updateTarget;

package/dist/esm/{form-control-BOVGZF9R.js → form-control-dh9YtDPa.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { h } from './renderer-BUaAsDso.js';
+import { h } from './renderer-ZmozgREV.js';
 
 const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, placeholder, alwaysShowPlaceholder, hideLabel, hasValue, rtl, showCharCount, maxlength, charCount, }) => {
     if (!label && !hasLabelSlot)

package/dist/esm/{fullscreen-CmJdWdrB.js → fullscreen-7z4Hd9oU.js}

@@ -1,9 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity } from './nano-slides-Bv0u7kg0.js';
-import './index-DXvE-U_j.js';
-import './renderer-BUaAsDso.js';
+import { F as Flickity } from './nano-slides-CuheM3tf.js';
+import './index-CX_Hk6ss.js';
+import './renderer-ZmozgREV.js';
 
 Flickity.createMethods.push('_createFullscreen');
 const proto = Flickity.prototype;

package/dist/esm/{index-DXvE-U_j.js → index-CX_Hk6ss.js}

@@ -4,13 +4,8 @@
 const NAMESPACE = 'nano-components';
 const BUILD = /* nano-components */ { experimentalSlotFixes: true, hydratedSelectorName: "hydrated", lazyLoad: true, shadowDom: true, slotRelocation: true, updatable: true};
 
-var appGlobalScript = async () => { };
-
-const globalScripts = appGlobalScript;
-const globalStyles = "";
-
 /*
- Stencil Client Platform v4.35.1-dev.1750682262.1ce9541 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.35.1-dev.1751297804.fe5d130 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -619,13 +614,19 @@ function deserializeProperty(value) {
   }
   return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
 }
+
+// src/utils/style.ts
+function createStyleSheetIfNeededAndSupported(styles2) {
+  return void 0;
+}
+
+// src/utils/shadow-root.ts
+var globalStyleSheet;
 function createShadowRoot(cmpMeta) {
+  var _a;
   const shadowRoot = this.attachShadow({ mode: "open" });
-  if (supportsConstructableStylesheets) {
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(globalStyles);
-    shadowRoot.adoptedStyleSheets.push(sheet);
-  }
+  if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported()) != null ? _a : null;
+  if (globalStyleSheet) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
 }
 var updateFallbackSlotVisibility = (elm) => {
   const childNodes = internalCall(elm, "childNodes");
@@ -1207,7 +1208,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
               if (supportsConstructableStylesheets) {
                 const stylesheet = new CSSStyleSheet();
                 stylesheet.replaceSync(style);
-                styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
+                styleContainerNode.adoptedStyleSheets.unshift(stylesheet);
               } else {
                 const existingStyleContainer = styleContainerNode.querySelector("style");
                 if (existingStyleContainer) {
@@ -1232,7 +1233,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
         }
       }
     } else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
-      styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+      styleContainerNode.adoptedStyleSheets.push(style);
     }
   }
   return scopeId2;
@@ -1470,7 +1471,9 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         node["s-oo"] = parseInt(childRenderNode.$nodeId$);
       }
     }
-    if (orgLocationNode && !orgLocationNode["s-id"]) plt.$orgLocNodes$.delete(orgLocationId);
+    if (orgLocationNode && !orgLocationNode["s-id"]) {
+      plt.$orgLocNodes$.delete(orgLocationId);
+    }
   }
   const hosts = [];
   const snLen = slottedNodes.length;
@@ -2324,6 +2327,8 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
       !isInitialRender && BUILD.updatable && oldChildren !== null
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
+    } else if (isInitialRender && BUILD.updatable && oldChildren !== null && newChildren === null) {
+      newVNode2.$children$ = oldChildren;
     }
   } else if ((defaultHolder = elm["s-cr"])) {
     defaultHolder.parentNode.textContent = text;
@@ -3278,4 +3283,4 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { Build as B, Fragment as F, H, NAMESPACE as N, getElement as a, bootstrapLazy as b, createEvent as c, Host as d, writeTask as e, readTask as f, globalScripts as g, h, consoleError as i, getRenderingRef as j, forceUpdate as k, getAssetPath as l, promiseResolve as p, registerInstance as r, setNonce as s, win as w };
+export { Build as B, Fragment as F, H, NAMESPACE as N, Host as a, bootstrapLazy as b, createEvent as c, writeTask as d, readTask as e, consoleError as f, getElement as g, h, getRenderingRef as i, forceUpdate as j, getAssetPath as k, promiseResolve as p, registerInstance as r, setNonce as s, win as w };

package/dist/esm/{index-Dw3NZx59.js → index-VZJF9v1K.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { j as getRenderingRef, k as forceUpdate } from './index-DXvE-U_j.js';
+import { i as getRenderingRef, j as forceUpdate } from './index-CX_Hk6ss.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/dist/esm/index.js

@@ -1,11 +1,11 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { N as NAMESPACE } from './index-DXvE-U_j.js';
-import { t as transformTag, s as setTagPrefix } from './renderer-BUaAsDso.js';
-export { g as getTagPrefix } from './renderer-BUaAsDso.js';
+import { N as NAMESPACE } from './index-CX_Hk6ss.js';
+import { t as transformTag, s as setTagPrefix } from './renderer-ZmozgREV.js';
+export { g as getTagPrefix } from './renderer-ZmozgREV.js';
 export { d as nanoDebounce, t as nanoThrottle } from './throttle-C93FMm2Z.js';
-export { g as nanoGetTabElements } from './tabbable-C4l-rYq9.js';
+export { g as nanoGetTabElements } from './tabbable-CZtanbA9.js';
 
 const alertContent = (message, buttons = [], alertTheme) => {
     return `${message}

package/dist/esm/{lazyload-BPqjfQB3.js → lazyload-CMsexkIp.js}

@@ -1,9 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity, u as utils } from './nano-slides-Bv0u7kg0.js';
-import './index-DXvE-U_j.js';
-import './renderer-BUaAsDso.js';
+import { F as Flickity, u as utils } from './nano-slides-CuheM3tf.js';
+import './index-CX_Hk6ss.js';
+import './renderer-ZmozgREV.js';
 
 Flickity.createMethods.push('_createLazyload');
 const proto = Flickity.prototype;

package/dist/esm/loader.js

@@ -1,8 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { g as globalScripts, b as bootstrapLazy } from './index-DXvE-U_j.js';
-export { s as setNonce } from './index-DXvE-U_j.js';
+import { b as bootstrapLazy } from './index-CX_Hk6ss.js';
+export { s as setNonce } from './index-CX_Hk6ss.js';
+import { g as globalScripts } from './app-globals-CWIH620u.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/{modal-B_AxJQQp.js → modal-CH7Vma1I.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { g as getTabbableElements } from './tabbable-C4l-rYq9.js';
+import { g as getTabbableElements } from './tabbable-CZtanbA9.js';
 
 let activeModals = [];
 class Modal {

package/dist/esm/nano-accordion.entry.js

@@ -1,9 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, a as getElement } from './index-DXvE-U_j.js';
-import { t as transformTag, h } from './renderer-BUaAsDso.js';
-import { g as getDirectChildren } from './dom-Cb7FUtXp.js';
+import { r as registerInstance, c as createEvent, g as getElement } from './index-CX_Hk6ss.js';
+import { t as transformTag, h } from './renderer-ZmozgREV.js';
+import { g as getDirectChildren } from './dom-COiksOVZ.js';
 
 const accordionCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:contents}";
 

package/dist/esm/nano-alert.entry.js

@@ -1,14 +1,14 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, a as getElement, d as Host } from './index-DXvE-U_j.js';
-import { M as Modal } from './modal-B_AxJQQp.js';
-import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-iCYjzh9N.js';
-import { h, t as transformTag } from './renderer-BUaAsDso.js';
+import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-CX_Hk6ss.js';
+import { M as Modal } from './modal-CH7Vma1I.js';
+import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-D4n69pGx.js';
+import { h, t as transformTag } from './renderer-ZmozgREV.js';
 import { b as blurActiveElement } from './active-element-C1pBwzyj.js';
-import { H as HasSlotController } from './slot-Db9r1aLM.js';
-import './tabbable-C4l-rYq9.js';
-import './dom-Cb7FUtXp.js';
+import { H as HasSlotController } from './slot-CjAtXEOo.js';
+import './tabbable-CZtanbA9.js';
+import './dom-COiksOVZ.js';
 
 const alertCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }/** Typography */\n:host {\n  /**\n   * @prop --border-radius: Defaults to var(--nano-layer-border-radius);\n   * @prop --border-color: Defaults to var(--nano-layer-border-color);\n   * @prop --border-width: Defaults to var(--nano-layer-border-width);\n   * @prop --background: Defaults to var(--nano-layer-background-color);\n   * @prop --tint-color: The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-primary-1100);\n   * @prop --icon-size: Defaults to var(--nano-pictogram-size-large);\n   * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-overlay-background-color);\n   * @prop --close-button-color: Defaults to var(--nano-color-neutral-400);\n   */\n  --border-radius: var(--nano-layer-border-radius);\n  --border-color: var(--nano-layer-border-color);\n  --border-width: var(--nano-layer-border-width);\n  --icon-size: var(--nano-pictogram-size-large);\n  --scrim-color: var(--nano-overlay-background-color);\n  --close-button-color: var(--nano-color-neutral-800);\n  --tint-color: var(--nano-color-primary-1100);\n  --background: var(--nano-color-primary-50);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([color=neutral]), :host([theme=neutral]) {\n  --tint-color: var(--nano-color-neutral-1200);\n  --background: var(--nano-color-neutral-75);\n}\n\n:host([color=success]), :host([theme=success]) {\n  --tint-color: var(--nano-color-success-1100);\n  --background: var(--nano-color-success-50);\n}\n\n:host([color=warning]), :host([theme=warning]) {\n  --tint-color: var(--nano-color-warning-1100);\n  --background: var(--nano-color-warning-75);\n}\n\n:host([color=danger]), :host([theme=danger]) {\n  --tint-color: var(--nano-color-danger-1100);\n  --background: var(--nano-color-danger-100);\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-inline-start: solid 4px var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: var(--nano-transition-medium) opacity ease, var(--nano-transition-fast) transform ease;\n}\n.alert:focus {\n  outline: none;\n}\n.alert:not(.alert--showing) {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n.alert--toasty, .alert--modal {\n  box-shadow: var(--nano-shadow-l2);\n  margin: var(--nano-spacing-md);\n}\n.alert--modal.alert--nodismiss {\n  animation: cannotClose 0.25s ease-in-out 1;\n}\n@keyframes cannotClose {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.08);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.alert__main {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__content {\n  font-size: var(--nano-font-size-small);\n  line-height: var(--nano-line-height-normal);\n  letter-spacing: var(--nano-letter-spacing-loose);\n  flex: 1 1 auto;\n  padding: var(--nano-spacing-md);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--nano-spacing-sm);\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: var(--nano-z-index-alert);\n}\n\n.alert__heading {\n  font-size: var(--nano-font-size-small);\n  line-height: var(--nano-line-height-normal);\n  font-weight: var(--nano-font-weight-bold);\n  color: var(--tint-color);\n}\n\n.alert__title {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-medium);\n  line-height: var(--nano-line-height-dense);\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 var(--nano-spacing-md);\n  padding-block: 0;\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: var(--nano-transition-fast) opacity;\n  z-index: var(--nano-z-index-alert);\n  pointer-events: all;\n}\n.alert__overlay--open {\n  opacity: 1;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: start;\n  font-size: var(--icon-size);\n  padding-block: var(--nano-spacing-md);\n}\n.alert__icon ::slotted(*), .alert__icon::slotted(*) {\n  color: var(--tint-color);\n  margin-inline-start: var(--nano-spacing-md);\n}\n@container (width < 280px) {\n  .alert__icon {\n    display: none !important;\n  }\n}\n\n.alert__countdown {\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 4px;\n  background-color: var(--nano-layer-border-color);\n  display: flex;\n  justify-content: flex-end;\n}\n\n.alert__countdown .alert__countdown-elapsed {\n  block-size: 100%;\n  inline-size: 0;\n}\n\n.alert__timer {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n.alert__countdown-elapsed {\n  background-color: var(--tint-color);\n}";
 

package/dist/esm/nano-algolia-filter.entry.js

@@ -1,10 +1,10 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, a as getElement, e as writeTask, d as Host } from './index-DXvE-U_j.js';
-import { C as ComponentStore } from './component-store-CH5BI3Tg.js';
-import { h } from './renderer-BUaAsDso.js';
-import { W as Wormhole } from './algolia-data-D6wnbV__.js';
+import { r as registerInstance, c as createEvent, g as getElement, d as writeTask, a as Host } from './index-CX_Hk6ss.js';
+import { C as ComponentStore } from './component-store-DMqr8_D3.js';
+import { h } from './renderer-ZmozgREV.js';
+import { W as Wormhole } from './algolia-data-B1lm-wYl.js';
 import './throttle-C93FMm2Z.js';
 
 const algoliaFilterCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:none}:host ::slotted([slot=filter-template]){display:none !important}:host(.show-filter){display:block}";

package/dist/esm/nano-algolia-pagination.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, a as getElement, h, d as Host } from './index-DXvE-U_j.js';
-import { W as Wormhole } from './algolia-data-D6wnbV__.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CX_Hk6ss.js';
+import { W as Wormhole } from './algolia-data-B1lm-wYl.js';
 
 const AlgoliaPagination = class {
     constructor(hostRef) {

package/dist/esm/nano-algolia-results.entry.js

@@ -1,9 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, a as getElement, f as readTask, d as Host } from './index-DXvE-U_j.js';
-import { h } from './renderer-BUaAsDso.js';
-import { W as Wormhole, S as SearchChangeEvent } from './algolia-data-D6wnbV__.js';
+import { r as registerInstance, c as createEvent, g as getElement, e as readTask, a as Host } from './index-CX_Hk6ss.js';
+import { h } from './renderer-ZmozgREV.js';
+import { W as Wormhole, S as SearchChangeEvent } from './algolia-data-B1lm-wYl.js';
 
 const AlgoliaResults = class {
     constructor(hostRef) {

package/dist/esm/nano-algolia.entry.js

@@ -1,13 +1,13 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { j as getRenderingRef, a as getElement, r as registerInstance, c as createEvent, e as writeTask, f as readTask, d as Host } from './index-DXvE-U_j.js';
+import { i as getRenderingRef, g as getElement, r as registerInstance, c as createEvent, d as writeTask, e as readTask, a as Host } from './index-CX_Hk6ss.js';
 import { a as algoliasearch } from './algoliasearch-lite.esm.browser-C1SNUAIj.js';
-import { g as getDirectChildren } from './dom-Cb7FUtXp.js';
-import { C as ComponentStore } from './component-store-CH5BI3Tg.js';
+import { g as getDirectChildren } from './dom-COiksOVZ.js';
+import { C as ComponentStore } from './component-store-DMqr8_D3.js';
 import { d as debounce } from './throttle-C93FMm2Z.js';
-import { t as transformTag, h } from './renderer-BUaAsDso.js';
-import { S as SearchChangeEvent } from './algolia-data-D6wnbV__.js';
+import { t as transformTag, h } from './renderer-ZmozgREV.js';
+import { S as SearchChangeEvent } from './algolia-data-B1lm-wYl.js';
 
 var multiverse = new Map();
 var updateConsumer = function (_a, state) {

package/dist/esm/nano-animation.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, B as Build, d as Host } from './index-DXvE-U_j.js';
-import { h } from './renderer-BUaAsDso.js';
+import { r as registerInstance, c as createEvent, B as Build, a as Host } from './index-CX_Hk6ss.js';
+import { h } from './renderer-ZmozgREV.js';
 
 const bounce = [
     {