npm - @nanoporetech-digital/components - Versions diffs - 4.3.1 → 4.4.0 - Mend

@nanoporetech-digital/components 4.3.1 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/dist/cjs/nano-table.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const nanoTable_entry = require('./nano-table-b59537e5.js');
+const nanoTable_entry = require('./nano-table-80866352.js');
 require('./index-71f899a7.js');
 require('./math-a8123703.js');
 require('./throttle-f55496c8.js');

package/dist/cjs/{table.worker-590fb88b.js → table.worker-33992a3a.js} RENAMED Viewed

@@ -3,7 +3,7 @@
  */
 'use strict';
-const nanoTable_entry = require('./nano-table-b59537e5.js');
+const nanoTable_entry = require('./nano-table-80866352.js');
 require('./index-71f899a7.js');
 require('./math-a8123703.js');
 require('./throttle-f55496c8.js');
@@ -22,4 +22,4 @@ exports.workerMsgId = workerMsgId;
 exports.workerName = workerName;
 exports.workerPath = workerPath;
-//# sourceMappingURL=table.worker-590fb88b.js.map
+//# sourceMappingURL=table.worker-33992a3a.js.map

package/dist/cjs/table.worker-33992a3a.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"table.worker-33992a3a.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/collection/components/overflow-nav/overflow-nav.css CHANGED Viewed

@@ -45,6 +45,9 @@
   display: flex;
 }
+.onav--no-transitions * {
+  transition-duration: 0s !important;
+}
 .onav__scroller {
   scrollbar-width: none;
   -ms-overflow-style: none;

package/dist/collection/components/overflow-nav/overflow-nav.js CHANGED Viewed

@@ -23,11 +23,20 @@ import { debounce } from '../../utils/throttle';
  */
 export class OverflowNav {
   watchIsActiveHandler() {
-    this.activeItem = this.allActiveItems.find((el) => this.isActiveHandler(el));
-    this.recalculatePositions(true);
+    this.instantReCalc = true;
+    this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+    setTimeout(() => (this.instantReCalc = false), 300);
+  }
+  /**
+   * Sync up the view to the active item.
+   * Use this when the active item changes outside of this component.
+   */
+  async syncActiveItem() {
+    this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
   }
   // private state
   constructor() {
+    this.mutationObservers = new WeakMap();
     this.updateScrollControls = () => {
       if (!this.nav)
         return;
@@ -84,10 +93,22 @@ export class OverflowNav {
     this.slotChangeHandler = () => {
       if (this.allActiveItems.length < 2)
         return;
-      const item = this.allActiveItems.find((el) => this.isActiveHandler(el));
+      const item = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
       if (item)
         this.activeItem = item;
       this.recalculatePositions();
+      /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */
+      this.allActiveItems.forEach((item) => {
+        if (this.mutationObservers.get(item))
+          return;
+        const mo = new MutationObserver(() => this.syncActiveItemIndicator());
+        mo.observe(item, {
+          characterData: true,
+          childList: true,
+          subtree: true,
+        });
+        this.mutationObservers.set(item, mo);
+      });
     };
     this.handleClick = (event) => {
       if (this.allActiveItems.length < 2)
@@ -108,20 +129,21 @@ export class OverflowNav {
           this.activeItem = foundItem;
       }
     };
-    this.recalculatePositions = (init) => {
+    this.recalculatePositions = () => {
       this.updateScrollControls();
-      this.syncActiveItemIndicator(init);
-      this.scrollToActiveItem(init);
+      this.syncActiveItemIndicator();
+      this.scrollToActiveItem();
     };
     this.scrollControls = true;
     this.orientation = 'horizontal';
-    this.activeHandler = (item) => item.classList.add('active');
-    this.inActiveHandler = (item) => item.classList.remove('active');
-    this.isActiveHandler = (item) => item.classList.contains('active');
+    this.activeHandler = (item, _index) => item.classList.add('active');
+    this.inActiveHandler = (item, _index) => item.classList.remove('active');
+    this.isActiveHandler = (item, _index) => item.classList.contains('active');
+    this.instantReCalc = false;
     this.hasScrollControls = false;
     this.hideControlEnd = true;
     this.hideControlStart = true;
-    this.recalculatePositions = debounce(this.recalculatePositions, 50);
+    this.recalculatePositions = debounce(this.recalculatePositions.bind(this), 80);
   }
   get scrollProp() {
     return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';
@@ -177,14 +199,13 @@ export class OverflowNav {
       return;
     }
     this._activeItem = item;
-    this.allActiveItems.forEach((el) => {
+    this.allActiveItems.forEach((el, i) => {
       if (el === this._activeItem)
-        this.activeHandler(el);
+        this.activeHandler(el, i);
       else
-        this.inActiveHandler(el);
+        this.inActiveHandler(el, i);
     });
-    this.syncActiveItemIndicator();
-    this.scrollToActiveItem();
+    this.recalculatePositions();
   }
   get navDim() {
     if (!this.nav)
@@ -202,18 +223,18 @@ export class OverflowNav {
           parseFloat(computedStyle.paddingBottom));
     }
   }
-  scrollToActiveItem(instant) {
+  scrollToActiveItem() {
     if (!this.nav || !this.activeItem)
       return;
-    requestAnimationFrame(() => {
+    setTimeout(() => {
       this.activeItem.scrollIntoView({
-        behavior: instant ? 'auto' : 'smooth',
+        behavior: this.instantReCalc ? 'auto' : 'smooth',
         block: 'center',
         inline: 'center',
       });
-    });
+    }, 100);
   }
-  syncActiveItemIndicator(instant) {
+  syncActiveItemIndicator() {
     if (!this.activeItem)
       return;
     const item = this.activeItem;
@@ -224,7 +245,7 @@ export class OverflowNav {
       return;
     const offsetTop = offset.top;
     const offsetLeft = offset.left;
-    if (instant)
+    if (this.instantReCalc)
       this.activeIndicator.style.transition = 'none';
     switch (this.orientation) {
       case 'horizontal':
@@ -242,8 +263,11 @@ export class OverflowNav {
   }
   // lifecycle
   connectedCallback() {
+    this.instantReCalc = true;
     this.isRtl =
       this.orientation === 'horizontal' && !!this.host.closest('[dir="rtl"]');
+    if (window['MutationObserver'])
+      this.slotChangeHandler();
     if (!window['ResizeObserver'])
       return;
     if (this.ro) {
@@ -254,8 +278,8 @@ export class OverflowNav {
     mo.observe(this.host);
   }
   componentDidLoad() {
-    this.activeItem = this.allActiveItems.find((el) => this.isActiveHandler(el));
-    this.recalculatePositions(true);
+    this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+    this.instantReCalc = false;
   }
   disconnectedCallback() {
     if (this.ro) {
@@ -270,6 +294,7 @@ export class OverflowNav {
         'onav--has-scroll-controls': this.hasScrollControls,
         'onav--has-scroll-controls-start': !this.hideControlStart,
         'onav--has-scroll-controls-end': !this.hideControlEnd,
+        'onav--no-transitions': this.instantReCalc,
       }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { part: "scroll-button scroll-button-prev", class: {
         'onav__scroll-button': true,
         'onav__scroll-button--start': true,
@@ -340,8 +365,8 @@ export class OverflowNav {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(item: HTMLElement) => void",
-          "resolved": "(item: HTMLElement) => void",
+          "original": "(item: HTMLElement, _index: number) => void",
+          "resolved": "(item: HTMLElement, _index: number) => void",
           "references": {
             "HTMLElement": {
               "location": "global"
@@ -353,7 +378,10 @@ export class OverflowNav {
         "docs": {
           "tags": [{
               "name": "param",
-              "text": "item"
+              "text": "item - html element currently being assessed"
+            }, {
+              "name": "param",
+              "text": "_index - the index of the html element currently being assessed"
             }, {
               "name": "returns",
               "text": "void"
@@ -362,14 +390,14 @@ export class OverflowNav {
         },
         "getter": false,
         "setter": false,
-        "defaultValue": "(item: HTMLElement) => item.classList.add('active')"
+        "defaultValue": "(item: HTMLElement, _index: number) =>\n    item.classList.add('active')"
       },
       "inActiveHandler": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(item: HTMLElement) => void",
-          "resolved": "(item: HTMLElement) => void",
+          "original": "(item: HTMLElement, _index: number) => void",
+          "resolved": "(item: HTMLElement, _index: number) => void",
           "references": {
             "HTMLElement": {
               "location": "global"
@@ -381,7 +409,10 @@ export class OverflowNav {
         "docs": {
           "tags": [{
               "name": "param",
-              "text": "item"
+              "text": "item - html element currently being assessed"
+            }, {
+              "name": "param",
+              "text": "_index - the index of the html element currently being assessed"
             }, {
               "name": "returns",
               "text": "void"
@@ -390,14 +421,14 @@ export class OverflowNav {
         },
         "getter": false,
         "setter": false,
-        "defaultValue": "(item: HTMLElement) =>\n    item.classList.remove('active')"
+        "defaultValue": "(item: HTMLElement, _index: number) =>\n    item.classList.remove('active')"
       },
       "isActiveHandler": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(item: HTMLElement) => boolean",
-          "resolved": "(item: HTMLElement) => boolean",
+          "original": "(item: HTMLElement, _index: number) => boolean",
+          "resolved": "(item: HTMLElement, _index: number) => boolean",
           "references": {
             "HTMLElement": {
               "location": "global"
@@ -409,7 +440,10 @@ export class OverflowNav {
         "docs": {
           "tags": [{
               "name": "param",
-              "text": "item"
+              "text": "item - html element currently being assessed"
+            }, {
+              "name": "param",
+              "text": "_index - the index of the html element currently being assessed"
             }, {
               "name": "returns",
               "text": "void"
@@ -418,17 +452,38 @@ export class OverflowNav {
         },
         "getter": false,
         "setter": false,
-        "defaultValue": "(item: HTMLElement) =>\n    item.classList.contains('active')"
+        "defaultValue": "(item: HTMLElement, _index: number) =>\n    item.classList.contains('active')"
       }
     };
   }
   static get states() {
     return {
+      "instantReCalc": {},
       "hasScrollControls": {},
       "hideControlEnd": {},
       "hideControlStart": {}
     };
   }
+  static get methods() {
+    return {
+      "syncActiveItem": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sync up the view to the active item.\nUse this when the active item changes outside of this component.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{

package/dist/collection/components/overflow-nav/overflow-nav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"overflow-nav.js","sourceRoot":"","sources":["../../../src/components/overflow-nav/overflow-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n} from '@stencil/core';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/*\n Primarily used to display navigational items that may not fit on smaller screens.\n \n - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n \n @slot - Default slot to place items.\n \n @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n /\n\n@Component({\n tag: 'nano-overflow-nav',\n styleUrl: 'overflow-nav.scss',\n shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n // public surface\n\n /* Disables the scroll arrow buttons that appear when content overflows /\n @Prop() scrollControls = true;\n\n /* The flex direction of the element /\n @Prop({ reflect: true }) orientation: 'horizontal' \| 'vertical' =\n 'horizontal';\n\n /\n A function called when an item becomes 'active' (via click or keyboard)\n * @param item\n * @returns void /\n @Prop() activeHandler = (item: HTMLElement) => item.classList.add('active');\n\n /\n A function called when an item becomes 'inactive'\n * (because another item was made active)\n * @param item\n * @returns void /\n @Prop() inActiveHandler = (item: HTMLElement) =>\n item.classList.remove('active');\n\n /\n A function called to assess an initial, active item\n * @param item\n * @returns void /\n @Prop() isActiveHandler = (item: HTMLElement) =>\n item.classList.contains('active');\n\n @Watch('isActiveHandler')\n watchIsActiveHandler() {\n this.activeItem = this.allActiveItems.find((el) =>\n this.isActiveHandler(el)\n );\n this.recalculatePositions(true);\n }\n\n // private state\n\n constructor() {\n this.recalculatePositions = debounce(this.recalculatePositions, 50);\n }\n\n private ro?: ResizeObserver;\n private nav?: HTMLElement;\n private itemContainer?: HTMLElement;\n private isRtl?: boolean;\n private endBtn: HTMLNanoIconButtonElement;\n private startBtn: HTMLNanoIconButtonElement;\n private activeIndicator: HTMLElement;\n\n get scrollProp() {\n return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n }\n\n get clientDimProp() {\n return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n }\n\n get scrollOffset() {\n return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n }\n\n @Element() host: HTMLNanoOverflowNavElement;\n\n @State() hasScrollControls = false;\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) this.handleScroll();\n else this.hideControlStart = this.hideControlEnd = true;\n }\n\n @State() hideControlEnd = true;\n\n @Watch('hideControlEnd')\n hideEndBtn() {\n if (!this.endBtn) return;\n this.activateBtn(this.endBtn, !this.hideControlEnd);\n }\n\n @State() hideControlStart = true;\n\n @Watch('hideControlStart')\n hideStartBtn() {\n if (!this.startBtn) return;\n this.activateBtn(this.startBtn, !this.hideControlStart);\n }\n\n // private logic\n\n private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n if (!activate) {\n btn.tabIndex = -1;\n btn.disabled = true;\n btn.classList.remove('is-shown');\n return;\n }\n btn.tabIndex = 0;\n btn.disabled = false;\n btn.classList.add('is-shown');\n }\n\n get allActiveItems() {\n return this.allItems.filter(\n (el: any) => !el.disabled \|\| el.classList.contains('disabled')\n );\n }\n\n get allItems() {\n return getDirectChildren<HTMLElement>(this.host, '', true);\n }\n\n get activeItem() {\n return this._activeItem;\n }\n\n set activeItem(item: HTMLElement) {\n if (\n !item \|\|\n item === this.activeItem \|\|\n (item as any).disabled \|\|\n !this.allActiveItems.includes(item)\n ) {\n return;\n }\n\n this._activeItem = item;\n this.allActiveItems.forEach((el) => {\n if (el === this._activeItem) this.activeHandler(el);\n else this.inActiveHandler(el);\n });\n this.syncActiveItemIndicator();\n this.scrollToActiveItem();\n }\n private _activeItem: HTMLElement;\n\n get navDim() {\n if (!this.nav) return 0;\n\n const computedStyle = getComputedStyle(this.nav);\n let clientDim = this.nav[this.clientDimProp];\n\n if (this.orientation === 'horizontal') {\n return (clientDim -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n } else {\n return (clientDim -=\n parseFloat(computedStyle.paddingTop) +\n parseFloat(computedStyle.paddingBottom));\n }\n }\n\n private scrollToActiveItem(instant?: boolean) {\n if (!this.nav \|\| !this.activeItem) return;\n requestAnimationFrame(() => {\n this.activeItem.scrollIntoView({\n behavior: instant ? 'auto' : 'smooth',\n block: 'center',\n inline: 'center',\n });\n });\n }\n\n private syncActiveItemIndicator(instant?: boolean) {\n if (!this.activeItem) return;\n\n const item = this.activeItem;\n const width = item.clientWidth \|\| 0;\n const height = item.clientHeight + 2 \|\| 0;\n const offset = getOffset(item, this.itemContainer);\n\n if (!this.activeIndicator) return;\n\n const offsetTop = offset.top;\n const offsetLeft = offset.left;\n\n if (instant) this.activeIndicator.style.transition = 'none';\n\n switch (this.orientation) {\n case 'horizontal':\n this.activeIndicator.style.width = `${width}px`;\n this.activeIndicator.style.height = null;\n this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'vertical':\n this.activeIndicator.style.width = null;\n this.activeIndicator.style.height = `${height}px`;\n this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n }\n\n private updateScrollControls = () => {\n if (!this.nav) return;\n\n this.hasScrollControls =\n this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n this.handleScroll();\n };\n\n private handleScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlStart = this.hideControlEnd = true;\n return;\n }\n const finishEnd = this.isRtl\n ? this.nav[this.scrollOffset] === 0\n : Math.abs(\n this.nav[this.clientDimProp] -\n (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n ) < 2;\n\n const finishStart = this.isRtl\n ? Math.abs(\n this.nav[this.scrollProp] +\n this.nav[this.scrollOffset] -\n this.nav[this.clientDimProp]\n ) < 2\n : this.nav[this.scrollOffset] === 0;\n\n if (finishStart) {\n this.hideControlStart = true;\n this.hideControlEnd = false;\n } else if (finishEnd) {\n this.hideControlStart = false;\n this.hideControlEnd = true;\n } else {\n this.hideControlEnd = false;\n this.hideControlStart = false;\n }\n };\n\n private handleBtnClick = (goEnd: boolean = false) => {\n const navDim = this.navDim;\n let scrollAmt;\n if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n try {\n this.nav.scroll({\n left: this.orientation === 'horizontal' ? scrollAmt : 0,\n top: this.orientation === 'vertical' ? scrollAmt : 0,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav[this.scrollOffset] = scrollAmt;\n }\n };\n\n private slotChangeHandler = () => {\n if (this.allActiveItems.length < 2) return;\n const item = this.allActiveItems.find((el) => this.isActiveHandler(el));\n if (item) this.activeItem = item;\n this.recalculatePositions();\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.allActiveItems.length < 2) return;\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n }\n };\n\n private recalculatePositions = (init?: any) => {\n this.updateScrollControls();\n this.syncActiveItemIndicator(init);\n this.scrollToActiveItem(init);\n };\n\n // lifecycle\n\n connectedCallback(): void {\n this.isRtl =\n this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n if (!window['ResizeObserver']) return;\n\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n mo.observe(this.host);\n }\n\n componentDidLoad(): void {\n this.activeItem = this.allActiveItems.find((el) =>\n this.isActiveHandler(el)\n );\n this.recalculatePositions(true);\n }\n\n disconnectedCallback(): void {\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n }\n\n render() {\n return (\n <Host dir={this.isRtl ? 'rtl' : null}>\n <div\n part=\"base\"\n class={{\n onav: true,\n [`onav--${this.orientation}`]: true,\n 'onav--has-scroll-controls': this.hasScrollControls,\n 'onav--has-scroll-controls-start': !this.hideControlStart,\n 'onav--has-scroll-controls-end': !this.hideControlEnd,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"onav__nav\">\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-prev\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--start': true,\n }}\n ref={(btn) => (this.startBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-left'\n : 'light/chevron-up'\n }\n />\n )}\n\n <div\n part=\"scroller\"\n ref={(el) => (this.nav = el)}\n class=\"onav__scroller\"\n onScroll={this.handleScroll}\n >\n <div\n part=\"items\"\n ref={(el) => (this.itemContainer = el)}\n class=\"onav__items\"\n >\n <div\n part=\"indicator\"\n ref={(el) => (this.activeIndicator = el)}\n class=\"onav__active-indicator\"\n />\n <slot onSlotchange={this.slotChangeHandler} />\n </div>\n </div>\n\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-next\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--end': true,\n }}\n ref={(btn) => (this.endBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-right'\n : 'light/chevron-down'\n }\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"overflow-nav.js","sourceRoot":"","sources":["../../../src/components/overflow-nav/overflow-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Method,\n} from '@stencil/core';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/*\n Primarily used to display navigational items that may not fit on smaller screens.\n \n - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n \n @slot - Default slot to place items.\n \n @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n /\n\n@Component({\n tag: 'nano-overflow-nav',\n styleUrl: 'overflow-nav.scss',\n shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n // public surface\n\n /* Disables the scroll arrow buttons that appear when content overflows /\n @Prop() scrollControls = true;\n\n /* The flex direction of the element /\n @Prop({ reflect: true }) orientation: 'horizontal' \| 'vertical' =\n 'horizontal';\n\n /\n A function called when an item becomes 'active' (via click or keyboard)\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() activeHandler = (item: HTMLElement, _index: number) =>\n item.classList.add('active');\n\n /\n A function called when an item becomes 'inactive'\n * (because another item was made active)\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() inActiveHandler = (item: HTMLElement, _index: number) =>\n item.classList.remove('active');\n\n /\n A function called to assess an initial, active item\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() isActiveHandler = (item: HTMLElement, _index: number) =>\n item.classList.contains('active');\n\n @Watch('isActiveHandler')\n watchIsActiveHandler() {\n this.instantReCalc = true;\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n setTimeout(() => (this.instantReCalc = false), 300);\n }\n\n /\n Sync up the view to the active item.\n * Use this when the active item changes outside of this component.\n /\n @Method()\n async syncActiveItem() {\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n }\n\n // private state\n\n constructor() {\n this.recalculatePositions = debounce(\n this.recalculatePositions.bind(this),\n 80\n );\n }\n\n private ro?: ResizeObserver;\n private nav?: HTMLElement;\n private itemContainer?: HTMLElement;\n private isRtl?: boolean;\n private endBtn: HTMLNanoIconButtonElement;\n private startBtn: HTMLNanoIconButtonElement;\n private activeIndicator: HTMLElement;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n get scrollProp() {\n return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n }\n\n get clientDimProp() {\n return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n }\n\n get scrollOffset() {\n return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n }\n\n @Element() host: HTMLNanoOverflowNavElement;\n\n @State() instantReCalc = false;\n @State() hasScrollControls = false;\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) this.handleScroll();\n else this.hideControlStart = this.hideControlEnd = true;\n }\n\n @State() hideControlEnd = true;\n\n @Watch('hideControlEnd')\n hideEndBtn() {\n if (!this.endBtn) return;\n this.activateBtn(this.endBtn, !this.hideControlEnd);\n }\n\n @State() hideControlStart = true;\n\n @Watch('hideControlStart')\n hideStartBtn() {\n if (!this.startBtn) return;\n this.activateBtn(this.startBtn, !this.hideControlStart);\n }\n\n // private logic\n\n private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n if (!activate) {\n btn.tabIndex = -1;\n btn.disabled = true;\n btn.classList.remove('is-shown');\n return;\n }\n btn.tabIndex = 0;\n btn.disabled = false;\n btn.classList.add('is-shown');\n }\n\n get allActiveItems() {\n return this.allItems.filter(\n (el: any) => !el.disabled \|\| el.classList.contains('disabled')\n );\n }\n\n get allItems() {\n return getDirectChildren<HTMLElement>(this.host, '', true);\n }\n\n get activeItem() {\n return this._activeItem;\n }\n\n set activeItem(item: HTMLElement) {\n if (\n !item \|\|\n item === this.activeItem \|\|\n (item as any).disabled \|\|\n !this.allActiveItems.includes(item)\n ) {\n return;\n }\n\n this._activeItem = item;\n this.allActiveItems.forEach((el, i) => {\n if (el === this._activeItem) this.activeHandler(el, i);\n else this.inActiveHandler(el, i);\n });\n\n this.recalculatePositions();\n }\n private _activeItem: HTMLElement;\n\n get navDim() {\n if (!this.nav) return 0;\n\n const computedStyle = getComputedStyle(this.nav);\n let clientDim = this.nav[this.clientDimProp];\n\n if (this.orientation === 'horizontal') {\n return (clientDim -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n } else {\n return (clientDim -=\n parseFloat(computedStyle.paddingTop) +\n parseFloat(computedStyle.paddingBottom));\n }\n }\n\n private scrollToActiveItem() {\n if (!this.nav \|\| !this.activeItem) return;\n setTimeout(() => {\n this.activeItem.scrollIntoView({\n behavior: this.instantReCalc ? 'auto' : 'smooth',\n block: 'center',\n inline: 'center',\n });\n }, 100);\n }\n\n private syncActiveItemIndicator() {\n if (!this.activeItem) return;\n\n const item = this.activeItem;\n const width = item.clientWidth \|\| 0;\n const height = item.clientHeight + 2 \|\| 0;\n const offset = getOffset(item, this.itemContainer);\n\n if (!this.activeIndicator) return;\n\n const offsetTop = offset.top;\n const offsetLeft = offset.left;\n\n if (this.instantReCalc) this.activeIndicator.style.transition = 'none';\n\n switch (this.orientation) {\n case 'horizontal':\n this.activeIndicator.style.width = `${width}px`;\n this.activeIndicator.style.height = null;\n this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'vertical':\n this.activeIndicator.style.width = null;\n this.activeIndicator.style.height = `${height}px`;\n this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n }\n\n private updateScrollControls = () => {\n if (!this.nav) return;\n\n this.hasScrollControls =\n this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n this.handleScroll();\n };\n\n private handleScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlStart = this.hideControlEnd = true;\n return;\n }\n const finishEnd = this.isRtl\n ? this.nav[this.scrollOffset] === 0\n : Math.abs(\n this.nav[this.clientDimProp] -\n (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n ) < 2;\n\n const finishStart = this.isRtl\n ? Math.abs(\n this.nav[this.scrollProp] +\n this.nav[this.scrollOffset] -\n this.nav[this.clientDimProp]\n ) < 2\n : this.nav[this.scrollOffset] === 0;\n\n if (finishStart) {\n this.hideControlStart = true;\n this.hideControlEnd = false;\n } else if (finishEnd) {\n this.hideControlStart = false;\n this.hideControlEnd = true;\n } else {\n this.hideControlEnd = false;\n this.hideControlStart = false;\n }\n };\n\n private handleBtnClick = (goEnd: boolean = false) => {\n const navDim = this.navDim;\n let scrollAmt;\n if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n try {\n this.nav.scroll({\n left: this.orientation === 'horizontal' ? scrollAmt : 0,\n top: this.orientation === 'vertical' ? scrollAmt : 0,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav[this.scrollOffset] = scrollAmt;\n }\n };\n\n private slotChangeHandler = () => {\n if (this.allActiveItems.length < 2) return;\n const item = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n if (item) this.activeItem = item;\n this.recalculatePositions();\n\n /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */\n this.allActiveItems.forEach((item) => {\n if (this.mutationObservers.get(item)) return;\n\n const mo = new MutationObserver(() => this.syncActiveItemIndicator());\n mo.observe(item, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n\n this.mutationObservers.set(item, mo);\n });\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.allActiveItems.length < 2) return;\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n }\n };\n\n private recalculatePositions = () => {\n this.updateScrollControls();\n this.syncActiveItemIndicator();\n this.scrollToActiveItem();\n };\n\n // lifecycle\n\n connectedCallback(): void {\n this.instantReCalc = true;\n this.isRtl =\n this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n if (window['MutationObserver']) this.slotChangeHandler();\n\n if (!window['ResizeObserver']) return;\n\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n mo.observe(this.host);\n }\n\n componentDidLoad(): void {\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n this.instantReCalc = false;\n }\n\n disconnectedCallback(): void {\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n }\n\n render() {\n return (\n <Host dir={this.isRtl ? 'rtl' : null}>\n <div\n part=\"base\"\n class={{\n onav: true,\n [`onav--${this.orientation}`]: true,\n 'onav--has-scroll-controls': this.hasScrollControls,\n 'onav--has-scroll-controls-start': !this.hideControlStart,\n 'onav--has-scroll-controls-end': !this.hideControlEnd,\n 'onav--no-transitions': this.instantReCalc,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"onav__nav\">\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-prev\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--start': true,\n }}\n ref={(btn) => (this.startBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-left'\n : 'light/chevron-up'\n }\n />\n )}\n\n <div\n part=\"scroller\"\n ref={(el) => (this.nav = el)}\n class=\"onav__scroller\"\n onScroll={this.handleScroll}\n >\n <div\n part=\"items\"\n ref={(el) => (this.itemContainer = el)}\n class=\"onav__items\"\n >\n <div\n part=\"indicator\"\n ref={(el) => (this.activeIndicator = el)}\n class=\"onav__active-indicator\"\n />\n <slot onSlotchange={this.slotChangeHandler} />\n </div>\n </div>\n\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-next\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--end': true,\n }}\n ref={(btn) => (this.endBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-right'\n : 'light/chevron-down'\n }\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/components/nano-overflow-nav.js CHANGED Viewed

@@ -7,18 +7,27 @@ import { d as debounce } from './throttle.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
-const overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:\"currentColor\";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:\" \";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;width:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow-x:auto;overflow-y:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0 0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;-webkit-padding-before:0;padding-block-start:0;-webkit-padding-after:0;padding-block-end:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";width:100%;height:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{width:100%}.onav--vertical .onav__nav{max-height:100%;display:flex}.onav--vertical .onav__scroller{width:100%;overflow-y:auto;overflow-x:hidden;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-block:var(--padding);-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0 0;-webkit-padding-before:calc(var(--fade-size) + 12px);padding-block-start:calc(var(--fade-size) + 12px);-webkit-padding-after:var(--fade-size);padding-block-end:var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0 0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;width:-moz-fit-content;width:fit-content}.onav--vertical .onav__items::before{content:\"\";height:100%;width:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
+const overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:\"currentColor\";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:\" \";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;width:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow-x:auto;overflow-y:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0 0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;-webkit-padding-before:0;padding-block-start:0;-webkit-padding-after:0;padding-block-end:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";width:100%;height:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{width:100%}.onav--vertical .onav__nav{max-height:100%;display:flex}.onav--vertical .onav__scroller{width:100%;overflow-y:auto;overflow-x:hidden;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-block:var(--padding);-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0 0;-webkit-padding-before:calc(var(--fade-size) + 12px);padding-block-start:calc(var(--fade-size) + 12px);-webkit-padding-after:var(--fade-size);padding-block-end:var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0 0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;width:-moz-fit-content;width:fit-content}.onav--vertical .onav__items::before{content:\"\";height:100%;width:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
 const OverflowNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   watchIsActiveHandler() {
-    this.activeItem = this.allActiveItems.find((el) => this.isActiveHandler(el));
-    this.recalculatePositions(true);
+    this.instantReCalc = true;
+    this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+    setTimeout(() => (this.instantReCalc = false), 300);
+  }
+  /**
+   * Sync up the view to the active item.
+   * Use this when the active item changes outside of this component.
+   */
+  async syncActiveItem() {
+    this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
   }
   // private state
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.mutationObservers = new WeakMap();
     this.updateScrollControls = () => {
       if (!this.nav)
         return;
@@ -75,10 +84,22 @@ const OverflowNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.slotChangeHandler = () => {
       if (this.allActiveItems.length < 2)
         return;
-      const item = this.allActiveItems.find((el) => this.isActiveHandler(el));
+      const item = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
       if (item)
         this.activeItem = item;
       this.recalculatePositions();
+      /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */
+      this.allActiveItems.forEach((item) => {
+        if (this.mutationObservers.get(item))
+          return;
+        const mo = new MutationObserver(() => this.syncActiveItemIndicator());
+        mo.observe(item, {
+          characterData: true,
+          childList: true,
+          subtree: true,
+        });
+        this.mutationObservers.set(item, mo);
+      });
     };
     this.handleClick = (event) => {
       if (this.allActiveItems.length < 2)
@@ -99,20 +120,21 @@ const OverflowNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           this.activeItem = foundItem;
       }
     };
-    this.recalculatePositions = (init) => {
+    this.recalculatePositions = () => {
       this.updateScrollControls();
-      this.syncActiveItemIndicator(init);
-      this.scrollToActiveItem(init);
+      this.syncActiveItemIndicator();
+      this.scrollToActiveItem();
     };
     this.scrollControls = true;
     this.orientation = 'horizontal';
-    this.activeHandler = (item) => item.classList.add('active');
-    this.inActiveHandler = (item) => item.classList.remove('active');
-    this.isActiveHandler = (item) => item.classList.contains('active');
+    this.activeHandler = (item, _index) => item.classList.add('active');
+    this.inActiveHandler = (item, _index) => item.classList.remove('active');
+    this.isActiveHandler = (item, _index) => item.classList.contains('active');
+    this.instantReCalc = false;
     this.hasScrollControls = false;
     this.hideControlEnd = true;
     this.hideControlStart = true;
-    this.recalculatePositions = debounce(this.recalculatePositions, 50);
+    this.recalculatePositions = debounce(this.recalculatePositions.bind(this), 80);
   }
   get scrollProp() {
     return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';
@@ -168,14 +190,13 @@ const OverflowNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     }
     this._activeItem = item;
-    this.allActiveItems.forEach((el) => {
+    this.allActiveItems.forEach((el, i) => {
       if (el === this._activeItem)
-        this.activeHandler(el);
+        this.activeHandler(el, i);
       else
-        this.inActiveHandler(el);
+        this.inActiveHandler(el, i);
     });
-    this.syncActiveItemIndicator();
-    this.scrollToActiveItem();
+    this.recalculatePositions();
   }
   get navDim() {
     if (!this.nav)
@@ -193,18 +214,18 @@ const OverflowNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           parseFloat(computedStyle.paddingBottom));
     }
   }
-  scrollToActiveItem(instant) {
+  scrollToActiveItem() {
     if (!this.nav || !this.activeItem)
       return;
-    requestAnimationFrame(() => {
+    setTimeout(() => {
       this.activeItem.scrollIntoView({
-        behavior: instant ? 'auto' : 'smooth',
+        behavior: this.instantReCalc ? 'auto' : 'smooth',
         block: 'center',
         inline: 'center',
       });
-    });
+    }, 100);
   }
-  syncActiveItemIndicator(instant) {
+  syncActiveItemIndicator() {
     if (!this.activeItem)
       return;
     const item = this.activeItem;
@@ -215,7 +236,7 @@ const OverflowNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     const offsetTop = offset.top;
     const offsetLeft = offset.left;
-    if (instant)
+    if (this.instantReCalc)
       this.activeIndicator.style.transition = 'none';
     switch (this.orientation) {
       case 'horizontal':
@@ -233,8 +254,11 @@ const OverflowNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   // lifecycle
   connectedCallback() {
+    this.instantReCalc = true;
     this.isRtl =
       this.orientation === 'horizontal' && !!this.host.closest('[dir="rtl"]');
+    if (window['MutationObserver'])
+      this.slotChangeHandler();
     if (!window['ResizeObserver'])
       return;
     if (this.ro) {
@@ -245,8 +269,8 @@ const OverflowNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     mo.observe(this.host);
   }
   componentDidLoad() {
-    this.activeItem = this.allActiveItems.find((el) => this.isActiveHandler(el));
-    this.recalculatePositions(true);
+    this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+    this.instantReCalc = false;
   }
   disconnectedCallback() {
     if (this.ro) {
@@ -261,6 +285,7 @@ const OverflowNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         'onav--has-scroll-controls': this.hasScrollControls,
         'onav--has-scroll-controls-start': !this.hideControlStart,
         'onav--has-scroll-controls-end': !this.hideControlEnd,
+        'onav--no-transitions': this.instantReCalc,
       }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { part: "scroll-button scroll-button-prev", class: {
         'onav__scroll-button': true,
         'onav__scroll-button--start': true,
@@ -287,9 +312,11 @@ const OverflowNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "activeHandler": [16],
     "inActiveHandler": [16],
     "isActiveHandler": [16],
+    "instantReCalc": [32],
     "hasScrollControls": [32],
     "hideControlEnd": [32],
-    "hideControlStart": [32]
+    "hideControlStart": [32],
+    "syncActiveItem": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {