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

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -43,4 +43,135 @@
   * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).
   * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).
   * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).
-  */
+  */
+:host {
+  --text-color: var(--nano-color-primary-1000);
+  --text-color-hover: var(--nano-color-primary-1200);
+  --text-color-secondary: var(--nano-color-neutral-1400);
+  --text-color-disabled: var(--nano-color-neutral-1000);
+  --border-color: var(--nano-color-neutral-400);
+  --trigger-bg-color: var(--nano-color-base-0);
+  container-type: inline-size;
+  display: block;
+}
+
+.breadcrumbs {
+  inline-size: 100%;
+  max-inline-size: 1346px;
+}
+
+ol,
+nano-menu::part(base) {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: var(--nano-font-size-xs);
+  line-height: var(--nano-line-height-normal);
+  text-wrap: nowrap;
+  margin-block-end: 0;
+}
+
+li:not(.return-only li)::after,
+nano-nav-item::after {
+  content: "/";
+  margin: 0 var(--nano-spacing-xs);
+  color: var(--border-color);
+}
+
+a.link {
+  color: var(--text-color);
+}
+
+a:not(.link) {
+  color: var(--text-color-secondary);
+}
+
+a:focus-visible {
+  outline: var(--nano-focus-ring);
+  outline-offset: var(--nano-focus-ring-offset);
+  z-index: 1;
+}
+
+a.link:hover {
+  color: var(--text-color-hover);
+}
+
+a.return.link {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--nano-spacing-sm) / 2);
+}
+
+.breadcrumbs__dropdown {
+  inline-size: 100%;
+  display: none;
+}
+.breadcrumbs__dropdown[open]::part(trigger) {
+  box-shadow: var(--nano-shadow-l1);
+}
+.breadcrumbs__dropdown[open]::part(panel) {
+  box-shadow: var(--nano-shadow-l1);
+}
+
+.trigger-button {
+  inline-size: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--nano-spacing-l3) var(--nano-spacing-l2);
+  color: var(--text-color);
+  background-color: var(--trigger-bg-color);
+  cursor: pointer;
+  text-align: start;
+  border: none;
+  font-size: var(--nano-font-size-xs);
+}
+.trigger-button .trigger-button_label {
+  text-decoration: underline;
+}
+.trigger-button .trigger-button_label::after {
+  content: "/";
+  margin: 0 var(--nano-spacing-xs);
+  color: var(--border-color);
+}
+.trigger-button:focus-visible {
+  outline: var(--nano-focus-ring);
+  outline-offset: var(--nano-focus-ring-offset);
+}
+
+.trigger-icon {
+  transform: rotate(0deg);
+  transition: var(--nano-transition-x-fast) ease transform;
+}
+.trigger-icon--open {
+  transform: rotate(180deg);
+}
+
+@container (width < 768px) {
+  .main {
+    display: none !important;
+  }
+  .breadcrumbs__dropdown {
+    display: block !important;
+  }
+  nano-menu::part(base) {
+    flex-direction: column !important;
+  }
+  nano-nav-item::after {
+    display: none !important;
+  }
+  .trigger-button_label::after {
+    display: inline-block !important;
+  }
+  .return-only {
+    padding: var(--nano-spacing-l3) var(--nano-spacing-l2) !important;
+  }
+}

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -28,7 +28,7 @@ export class NanoBreadcrumb {
         const parentBreadcrumb = this.breadcrumbs?.length
             ? this.breadcrumbs.at(-1)
             : null;
-        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
+        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
                 'trigger-icon': true,
                 'trigger-icon--open': this.isOpen,
             }, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href }, disabled: !breadcrumb.href }, breadcrumb.label))))))));

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

@@ -81,12 +81,12 @@ export 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() {
@@ -242,7 +242,7 @@ export class NanoDatePicker {
     processFocusedDayNode = (element) => {
         this.focusedDayNode = element;
         if (this.activeFocus) {
-            setTimeout(() => element.focus(), 0);
+            setTimeout(() => element.focus({ preventScroll: true }), 0);
         }
     };
     componentWillLoad() {
@@ -267,11 +267,11 @@ export 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 is() { return "nano-date-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slides/lib/js/prev-next-button.js

@@ -5,7 +5,6 @@ import Flickity from "./flickity";
 import { Unipointer } from "./utils/gestures";
 import { utils } from "./utils/utils";
 export default () => {
-    const svgURI = 'http://www.w3.org/2000/svg';
     // -------------------------- PrevNextButton -------------------------- //
     function PrevNextButton(direction, parent) {
         this.direction = direction;
@@ -45,8 +44,10 @@ export default () => {
             });
         });
         // 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));
@@ -64,53 +65,6 @@ export default () => {
         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) {

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/collection/utils/slot.js

@@ -76,8 +76,8 @@ export class HasSlotController {
         };
     }
     hasDefaultSlot() {
-        if (!this.host || !this.host.isConnected)
-            return;
+        if (!this.host)
+            return false;
         return [...this.host.childNodes].some((node) => {
             if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
                 return true;
@@ -93,9 +93,9 @@ export class HasSlotController {
         });
     }
     hasNamedSlot(name) {
-        if (!this.host || !this.host.isConnected)
-            return;
-        return !!Array.from(this.host.children).find(ele => ele.getAttribute('slot') && ele.getAttribute('slot') === name);
+        if (!this.host)
+            return false;
+        return !!this.host.querySelector(`[slot="${name}"]`);
     }
     has(slotName) {
         return slotName === '[default]'

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/nano-alert.js

@@ -11,7 +11,7 @@ import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './tooltip.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;\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}";
+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}";
 
 let toastStackTr;
 let toastStackTl;

package/dist/components/nano-breadcrumb.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './menu.js';
 import { d as defineCustomElement$2 } from './nav-item.js';
 
-const breadcrumbCss = ":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}}";
+const breadcrumbCss = ":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  }/**\n  * @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-1000).\n  * @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-primary-1200).\n  * @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-neutral-1400).\n  * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).\n  * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).\n  * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).\n  */\n:host {\n  --text-color: var(--nano-color-primary-1000);\n  --text-color-hover: var(--nano-color-primary-1200);\n  --text-color-secondary: var(--nano-color-neutral-1400);\n  --text-color-disabled: var(--nano-color-neutral-1000);\n  --border-color: var(--nano-color-neutral-400);\n  --trigger-bg-color: var(--nano-color-base-0);\n  container-type: inline-size;\n  display: block;\n}\n\n.breadcrumbs {\n  inline-size: 100%;\n  max-inline-size: 1346px;\n}\n\nol,\nnano-menu::part(base) {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: row;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  font-size: var(--nano-font-size-xs);\n  line-height: var(--nano-line-height-normal);\n  text-wrap: nowrap;\n  margin-block-end: 0;\n}\n\nli:not(.return-only li)::after,\nnano-nav-item::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n\na.link {\n  color: var(--text-color);\n}\n\na:not(.link) {\n  color: var(--text-color-secondary);\n}\n\na:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n\na.link:hover {\n  color: var(--text-color-hover);\n}\n\na.return.link {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--nano-spacing-sm) / 2);\n}\n\n.breadcrumbs__dropdown {\n  inline-size: 100%;\n  display: none;\n}\n.breadcrumbs__dropdown[open]::part(trigger) {\n  box-shadow: var(--nano-shadow-l1);\n}\n.breadcrumbs__dropdown[open]::part(panel) {\n  box-shadow: var(--nano-shadow-l1);\n}\n\n.trigger-button {\n  inline-size: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  color: var(--text-color);\n  background-color: var(--trigger-bg-color);\n  cursor: pointer;\n  text-align: start;\n  border: none;\n  font-size: var(--nano-font-size-xs);\n}\n.trigger-button .trigger-button_label {\n  text-decoration: underline;\n}\n.trigger-button .trigger-button_label::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n.trigger-button:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n\n.trigger-icon {\n  transform: rotate(0deg);\n  transition: var(--nano-transition-x-fast) ease transform;\n}\n.trigger-icon--open {\n  transform: rotate(180deg);\n}\n\n@container (width < 768px) {\n  .main {\n    display: none !important;\n  }\n  .breadcrumbs__dropdown {\n    display: block !important;\n  }\n  nano-menu::part(base) {\n    flex-direction: column !important;\n  }\n  nano-nav-item::after {\n    display: none !important;\n  }\n  .trigger-button_label::after {\n    display: inline-block !important;\n  }\n  .return-only {\n    padding: var(--nano-spacing-l3) var(--nano-spacing-l2) !important;\n  }\n}";
 
 const NanoBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoBreadcrumb extends HTMLElement {
     constructor() {
@@ -34,7 +34,7 @@ const NanoBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoBreadcrumb e
         const parentBreadcrumb = this.breadcrumbs?.length
             ? this.breadcrumbs.at(-1)
             : null;
-        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
+        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
                 'trigger-icon': true,
                 'trigger-icon--open': this.isOpen,
             }, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href }, disabled: !breadcrumb.href }, breadcrumb.label))))))));

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;