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

package/docs-json.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-06-28T12:18:31",
+  "timestamp": "2025-06-30T20:33:32",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.35.1-dev.1750682262.1ce9541",
+    "version": "4.35.1-dev.1751297804.fe5d130",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -23309,6 +23309,11 @@
           "annotation": "prop",
           "docs": "next / prev bg color. Default var(--nano-color-base-0);"
         },
+        {
+          "name": "--navbtns-height",
+          "annotation": "prop",
+          "docs": "next / prev button height. Default 2.75rem;"
+        },
         {
           "name": "--navbtns-icon-color",
           "annotation": "prop",
@@ -23318,6 +23323,11 @@
           "name": "--navbtns-icon-color-disabled",
           "annotation": "prop",
           "docs": "next / prev icon color. Default var(--dot-color-active);"
+        },
+        {
+          "name": "--navbtns-width",
+          "annotation": "prop",
+          "docs": "next / prev button width. Default 1.875rem;"
         }
       ],
       "slots": [

package/hydrate/index.js

@@ -137,7 +137,7 @@ var appGlobalScript = async () => { };
 const globalScripts = appGlobalScript;
 
 /*
- Stencil Hydrate Platform v4.35.1-dev.1750682262.1ce9541 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.35.1-dev.1751297804.fe5d130 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -368,8 +368,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) {
-  this.attachShadow({ mode: "open" });
+  var _a;
+  const shadowRoot = this.attachShadow({ mode: "open" });
+  if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported()) != null ? _a : null;
+  if (globalStyleSheet) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
 }
 
 // src/runtime/runtime-constants.ts
@@ -834,7 +845,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;
@@ -2040,6 +2053,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;
@@ -21949,12 +21964,12 @@ class NanoDatePicker {
     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() {
@@ -22110,7 +22125,7 @@ class NanoDatePicker {
     processFocusedDayNode = (element) => {
         this.focusedDayNode = element;
         if (this.activeFocus) {
-            setTimeout(() => element.focus(), 0);
+            setTimeout(() => element.focus({ preventScroll: true }), 0);
         }
     };
     componentWillLoad() {
@@ -22135,11 +22150,11 @@ class NanoDatePicker {
             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"]
@@ -27940,7 +27955,6 @@ var drag = () => {
 };
 
 var nowNext = () => {
-    const svgURI = 'http://www.w3.org/2000/svg';
     // -------------------------- PrevNextButton -------------------------- //
     function PrevNextButton(direction, parent) {
         this.direction = direction;
@@ -27980,8 +27994,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));
@@ -27999,53 +28015,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) {
@@ -28256,7 +28225,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;
@@ -32687,7 +32656,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.35.1-dev.1750682262.1ce9541 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.35.1-dev.1751297804.fe5d130 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -43638,10 +43607,18 @@ var MockElement = class extends MockNode2 {
     return shadowRoot;
   }
   blur() {
-    dispatchEvent(
-      this,
-      new MockFocusEvent("blur", { relatedTarget: null, bubbles: true, cancelable: true, composed: true })
-    );
+    if (isCurrentlyDispatching(this, "blur")) {
+      return;
+    }
+    markAsDispatching(this, "blur");
+    try {
+      dispatchEvent(
+        this,
+        new MockFocusEvent("blur", { relatedTarget: null, bubbles: true, cancelable: true, composed: true })
+      );
+    } finally {
+      unmarkAsDispatching(this, "blur");
+    }
   }
   get localName() {
     if (!this.nodeName) {
@@ -44383,6 +44360,28 @@ function setTextContent(elm, text) {
   const textNode = new MockTextNode(elm.ownerDocument, text);
   elm.appendChild(textNode);
 }
+var currentlyDispatching = /* @__PURE__ */ new WeakMap();
+function isCurrentlyDispatching(target, eventType) {
+  const dispatchingEvents = currentlyDispatching.get(target);
+  return dispatchingEvents != null && dispatchingEvents.has(eventType);
+}
+function markAsDispatching(target, eventType) {
+  let dispatchingEvents = currentlyDispatching.get(target);
+  if (dispatchingEvents == null) {
+    dispatchingEvents = /* @__PURE__ */ new Set();
+    currentlyDispatching.set(target, dispatchingEvents);
+  }
+  dispatchingEvents.add(eventType);
+}
+function unmarkAsDispatching(target, eventType) {
+  const dispatchingEvents = currentlyDispatching.get(target);
+  if (dispatchingEvents != null) {
+    dispatchingEvents.delete(eventType);
+    if (dispatchingEvents.size === 0) {
+      currentlyDispatching.delete(target);
+    }
+  }
+}
 
 // src/mock-doc/comment-node.ts
 var MockComment = class _MockComment extends MockNode2 {

package/hydrate/index.mjs

@@ -135,7 +135,7 @@ var appGlobalScript = async () => { };
 const globalScripts = appGlobalScript;
 
 /*
- Stencil Hydrate Platform v4.35.1-dev.1750682262.1ce9541 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.35.1-dev.1751297804.fe5d130 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -366,8 +366,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) {
-  this.attachShadow({ mode: "open" });
+  var _a;
+  const shadowRoot = this.attachShadow({ mode: "open" });
+  if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported()) != null ? _a : null;
+  if (globalStyleSheet) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
 }
 
 // src/runtime/runtime-constants.ts
@@ -832,7 +843,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;
@@ -2038,6 +2051,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;
@@ -21947,12 +21962,12 @@ class NanoDatePicker {
     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() {
@@ -22108,7 +22123,7 @@ class NanoDatePicker {
     processFocusedDayNode = (element) => {
         this.focusedDayNode = element;
         if (this.activeFocus) {
-            setTimeout(() => element.focus(), 0);
+            setTimeout(() => element.focus({ preventScroll: true }), 0);
         }
     };
     componentWillLoad() {
@@ -22133,11 +22148,11 @@ class NanoDatePicker {
             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"]
@@ -27938,7 +27953,6 @@ var drag = () => {
 };
 
 var nowNext = () => {
-    const svgURI = 'http://www.w3.org/2000/svg';
     // -------------------------- PrevNextButton -------------------------- //
     function PrevNextButton(direction, parent) {
         this.direction = direction;
@@ -27978,8 +27992,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));
@@ -27997,53 +28013,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) {
@@ -28254,7 +28223,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;
@@ -32685,7 +32654,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.35.1-dev.1750682262.1ce9541 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.35.1-dev.1751297804.fe5d130 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -43636,10 +43605,18 @@ var MockElement = class extends MockNode2 {
     return shadowRoot;
   }
   blur() {
-    dispatchEvent(
-      this,
-      new MockFocusEvent("blur", { relatedTarget: null, bubbles: true, cancelable: true, composed: true })
-    );
+    if (isCurrentlyDispatching(this, "blur")) {
+      return;
+    }
+    markAsDispatching(this, "blur");
+    try {
+      dispatchEvent(
+        this,
+        new MockFocusEvent("blur", { relatedTarget: null, bubbles: true, cancelable: true, composed: true })
+      );
+    } finally {
+      unmarkAsDispatching(this, "blur");
+    }
   }
   get localName() {
     if (!this.nodeName) {
@@ -44381,6 +44358,28 @@ function setTextContent(elm, text) {
   const textNode = new MockTextNode(elm.ownerDocument, text);
   elm.appendChild(textNode);
 }
+var currentlyDispatching = /* @__PURE__ */ new WeakMap();
+function isCurrentlyDispatching(target, eventType) {
+  const dispatchingEvents = currentlyDispatching.get(target);
+  return dispatchingEvents != null && dispatchingEvents.has(eventType);
+}
+function markAsDispatching(target, eventType) {
+  let dispatchingEvents = currentlyDispatching.get(target);
+  if (dispatchingEvents == null) {
+    dispatchingEvents = /* @__PURE__ */ new Set();
+    currentlyDispatching.set(target, dispatchingEvents);
+  }
+  dispatchingEvents.add(eventType);
+}
+function unmarkAsDispatching(target, eventType) {
+  const dispatchingEvents = currentlyDispatching.get(target);
+  if (dispatchingEvents != null) {
+    dispatchingEvents.delete(eventType);
+    if (dispatchingEvents.size === 0) {
+      currentlyDispatching.delete(target);
+    }
+  }
+}
 
 // src/mock-doc/comment-node.ts
 var MockComment = class _MockComment extends MockNode2 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "8.0.0-alpha.6",
+  "version": "8.0.0-alpha.7",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "8.0.0-alpha.6"
+    "@nanoporetech-digital/style": "8.0.0-alpha.7"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",