@nanoporetech-digital/components 8.5.5 → 8.5.6

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 (27) hide show
  1. package/dist/cjs/nano-in-page-nav.cjs.entry.js +20 -16
  2. package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
  3. package/dist/collection/components/in-page-nav/in-page-nav.css +6 -2
  4. package/dist/collection/components/in-page-nav/in-page-nav.js +19 -17
  5. package/dist/components/nano-in-page-nav.js +20 -18
  6. package/dist/esm/nano-in-page-nav.entry.js +20 -16
  7. package/dist/nano-components/nano-components.css +7 -0
  8. package/dist/nano-components/nano-in-page-nav.entry.js +1 -1
  9. package/dist/style/components.css +1 -1
  10. package/dist/style/components.css.map +1 -1
  11. package/dist/style/nano.css +1 -1
  12. package/dist/style/nano.css.map +1 -1
  13. package/dist/types/components/in-page-nav/in-page-nav.d.ts +1 -1
  14. package/docs-json.json +2 -2
  15. package/hydrate/index.js +17 -16
  16. package/hydrate/index.mjs +17 -16
  17. package/package.json +2 -2
  18. /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
  19. /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
  20. /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
  21. /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
  22. /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
  23. /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
  24. /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
  25. /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
  26. /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
  27. /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
@@ -12,7 +12,6 @@ import { ComponentInterface } from '../../stencil-public-runtime';
12
12
  * @part root - The root element of the navigation.
13
13
  */
14
14
  export declare class NanoInPageNav implements ComponentInterface {
15
- private scrollElement;
16
15
  host: HTMLElement;
17
16
  autoExternalLinks: boolean;
18
17
  private io;
@@ -29,6 +28,7 @@ export declare class NanoInPageNav implements ComponentInterface {
29
28
  */
30
29
  private createDetails;
31
30
  private assessLinks;
31
+ private setupIntersectionObserver;
32
32
  private handleSlotChange;
33
33
  componentDidLoad(): void;
34
34
  connectedCallback(): void;
package/docs-json.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-09-08T12:09:03",
2
+ "timestamp": "2025-09-09T14:26:50",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.36.1",
@@ -3358,7 +3358,7 @@
3358
3358
  "references": {
3359
3359
  "Breadcrumb": {
3360
3360
  "location": "local",
3361
- "path": "/builds/sHPJkByK/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
3361
+ "path": "/builds/sN_eAsgS/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
3362
3362
  "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
3363
3363
  }
3364
3364
  }
package/hydrate/index.js CHANGED
@@ -22627,7 +22627,7 @@ class NanoIconItem {
22627
22627
  }; }
22628
22628
  }
22629
22629
 
22630
- const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <= 767px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 767px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper :host(.external-links),.details-wrapper .external-links{--color-bg:var(--nano-color-base-0) !important}.details-wrapper :host(.external-links) ul ul,.details-wrapper .external-links ul ul{--color-border-active:var(--nano-color-neutral-1200) !important}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}";
22630
+ const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper :host(.external-links),.details-wrapper .external-links{--color-bg:var(--nano-color-base-0) !important}.details-wrapper :host(.external-links) nav,.details-wrapper .external-links nav{border-block:1px solid var(--nano-color-neutral-200)}.details-wrapper :host(.external-links) ul ul,.details-wrapper .external-links ul ul{--color-border-active:var(--nano-color-neutral-1200) !important}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}";
22631
22631
 
22632
22632
  /**
22633
22633
  * In-page navigation allows users to quickly find different sections on a page.
@@ -22645,7 +22645,6 @@ class NanoInPageNav {
22645
22645
  constructor(hostRef) {
22646
22646
  registerInstance(this, hostRef);
22647
22647
  }
22648
- scrollElement;
22649
22648
  get host() { return getElement(this); }
22650
22649
  autoExternalLinks = false;
22651
22650
  io;
@@ -22683,19 +22682,23 @@ class NanoInPageNav {
22683
22682
  return node;
22684
22683
  }
22685
22684
  assessLinks() {
22685
+ if (this.externalLinks !== 'auto')
22686
+ return;
22686
22687
  const anchors = this.host.querySelectorAll('a[href^="#"]');
22687
- if (this.externalLinks === 'auto') {
22688
- const allLinks = this.host.querySelectorAll('a[href]');
22689
- if (anchors.length > allLinks.length / 2) {
22690
- this.autoExternalLinks = false;
22691
- }
22692
- else {
22693
- this.autoExternalLinks = true;
22694
- }
22688
+ const allLinks = this.host.querySelectorAll('a[href]');
22689
+ if (anchors.length > allLinks.length / 2) {
22690
+ this.autoExternalLinks = false;
22695
22691
  }
22692
+ else {
22693
+ this.autoExternalLinks = true;
22694
+ }
22695
+ }
22696
+ setupIntersectionObserver() {
22696
22697
  if (!this.autoActive)
22697
22698
  return;
22699
+ const anchors = this.host.querySelectorAll('a[href^="#"]');
22698
22700
  const sections = [];
22701
+ const scrollElement = findScrollParent(this.host);
22699
22702
  anchors.forEach((link) => {
22700
22703
  const id = link.getAttribute('href')?.substring(1);
22701
22704
  if (!id)
@@ -22732,9 +22735,7 @@ class NanoInPageNav {
22732
22735
  activeLink?.classList.add('is-active');
22733
22736
  }
22734
22737
  }, {
22735
- root: this.scrollElement === document.documentElement
22736
- ? null
22737
- : this.scrollElement,
22738
+ root: scrollElement === document.documentElement ? null : scrollElement,
22738
22739
  rootMargin: '0px 0px -60% 0px',
22739
22740
  threshold: 0,
22740
22741
  });
@@ -22747,7 +22748,7 @@ class NanoInPageNav {
22747
22748
  this.createMobileMenu();
22748
22749
  }
22749
22750
  connectedCallback() {
22750
- return;
22751
+ this.assessLinks();
22751
22752
  }
22752
22753
  disconnectedCallback() {
22753
22754
  if (this.io) {
@@ -22756,11 +22757,11 @@ class NanoInPageNav {
22756
22757
  }
22757
22758
  }
22758
22759
  render() {
22759
- return (h(Host, { key: 'ea33348437e8e117df2e7ffff285ca60d8caf98b', class: {
22760
+ return (h(Host, { key: 'a975c3e0b58fe39d504281784dd2f16e086eb0a1', class: {
22760
22761
  'nano-in-page-nav': true,
22761
22762
  'external-links': this.externalLinks === true ||
22762
22763
  (this.externalLinks === 'auto' && this.autoExternalLinks),
22763
- } }, h("nav", { key: '4d4647bafee9aff8902dd988eb941bb89e02b0ed', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '26c306537b6188b822b714c0df1d49b8ba060cf3', class: "header" }, h("slot", { key: 'f9319b724393e10d0cd789ddf58a0e006f829afd', name: "back" }), h("slot", { key: '2c6bf0022d52af8710d6086beb558b9069557eb2', name: "accessory" }))), h("div", { key: '6c82ddaf8d25319ed7a0a46637047e4e750c5834', class: "desktop-nav" }, h("slot", { key: '4f01aa6544750860aae61cdb9309c62b37f45ef6', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: 'ff9b16866753cb24279c5bfc83ca637803333101', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
22764
+ } }, h("nav", { key: '26a999b2b5282f8e39f8e07e6e4190374e3c68c9', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '507955a2092b3c1c5bfcaefe4debb97ba8ce1063', class: "header" }, h("slot", { key: '5e3cd2413baf55b8905912316a1a17358e8597b5', name: "back" }), h("slot", { key: 'ea39a03ba015a9bd2d031e839ae379699ba96d1a', name: "accessory" }))), h("div", { key: 'e6db628b6f4d1dc036a945554cfd8c90e8308307', class: "desktop-nav" }, h("slot", { key: '1adc8091b920e22b54d8b83e0b60200f2ff1d45d', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: '61fe2ef173d090faed09515c16df421cda50c11c', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
22764
22765
  }
22765
22766
  static get style() { return inPageNavCss; }
22766
22767
  static get cmpMeta() { return {
package/hydrate/index.mjs CHANGED
@@ -22625,7 +22625,7 @@ class NanoIconItem {
22625
22625
  }; }
22626
22626
  }
22627
22627
 
22628
- const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <= 767px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 767px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper :host(.external-links),.details-wrapper .external-links{--color-bg:var(--nano-color-base-0) !important}.details-wrapper :host(.external-links) ul ul,.details-wrapper .external-links ul ul{--color-border-active:var(--nano-color-neutral-1200) !important}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}";
22628
+ const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper :host(.external-links),.details-wrapper .external-links{--color-bg:var(--nano-color-base-0) !important}.details-wrapper :host(.external-links) nav,.details-wrapper .external-links nav{border-block:1px solid var(--nano-color-neutral-200)}.details-wrapper :host(.external-links) ul ul,.details-wrapper .external-links ul ul{--color-border-active:var(--nano-color-neutral-1200) !important}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}";
22629
22629
 
22630
22630
  /**
22631
22631
  * In-page navigation allows users to quickly find different sections on a page.
@@ -22643,7 +22643,6 @@ class NanoInPageNav {
22643
22643
  constructor(hostRef) {
22644
22644
  registerInstance(this, hostRef);
22645
22645
  }
22646
- scrollElement;
22647
22646
  get host() { return getElement(this); }
22648
22647
  autoExternalLinks = false;
22649
22648
  io;
@@ -22681,19 +22680,23 @@ class NanoInPageNav {
22681
22680
  return node;
22682
22681
  }
22683
22682
  assessLinks() {
22683
+ if (this.externalLinks !== 'auto')
22684
+ return;
22684
22685
  const anchors = this.host.querySelectorAll('a[href^="#"]');
22685
- if (this.externalLinks === 'auto') {
22686
- const allLinks = this.host.querySelectorAll('a[href]');
22687
- if (anchors.length > allLinks.length / 2) {
22688
- this.autoExternalLinks = false;
22689
- }
22690
- else {
22691
- this.autoExternalLinks = true;
22692
- }
22686
+ const allLinks = this.host.querySelectorAll('a[href]');
22687
+ if (anchors.length > allLinks.length / 2) {
22688
+ this.autoExternalLinks = false;
22693
22689
  }
22690
+ else {
22691
+ this.autoExternalLinks = true;
22692
+ }
22693
+ }
22694
+ setupIntersectionObserver() {
22694
22695
  if (!this.autoActive)
22695
22696
  return;
22697
+ const anchors = this.host.querySelectorAll('a[href^="#"]');
22696
22698
  const sections = [];
22699
+ const scrollElement = findScrollParent(this.host);
22697
22700
  anchors.forEach((link) => {
22698
22701
  const id = link.getAttribute('href')?.substring(1);
22699
22702
  if (!id)
@@ -22730,9 +22733,7 @@ class NanoInPageNav {
22730
22733
  activeLink?.classList.add('is-active');
22731
22734
  }
22732
22735
  }, {
22733
- root: this.scrollElement === document.documentElement
22734
- ? null
22735
- : this.scrollElement,
22736
+ root: scrollElement === document.documentElement ? null : scrollElement,
22736
22737
  rootMargin: '0px 0px -60% 0px',
22737
22738
  threshold: 0,
22738
22739
  });
@@ -22745,7 +22746,7 @@ class NanoInPageNav {
22745
22746
  this.createMobileMenu();
22746
22747
  }
22747
22748
  connectedCallback() {
22748
- return;
22749
+ this.assessLinks();
22749
22750
  }
22750
22751
  disconnectedCallback() {
22751
22752
  if (this.io) {
@@ -22754,11 +22755,11 @@ class NanoInPageNav {
22754
22755
  }
22755
22756
  }
22756
22757
  render() {
22757
- return (h(Host, { key: 'ea33348437e8e117df2e7ffff285ca60d8caf98b', class: {
22758
+ return (h(Host, { key: 'a975c3e0b58fe39d504281784dd2f16e086eb0a1', class: {
22758
22759
  'nano-in-page-nav': true,
22759
22760
  'external-links': this.externalLinks === true ||
22760
22761
  (this.externalLinks === 'auto' && this.autoExternalLinks),
22761
- } }, h("nav", { key: '4d4647bafee9aff8902dd988eb941bb89e02b0ed', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '26c306537b6188b822b714c0df1d49b8ba060cf3', class: "header" }, h("slot", { key: 'f9319b724393e10d0cd789ddf58a0e006f829afd', name: "back" }), h("slot", { key: '2c6bf0022d52af8710d6086beb558b9069557eb2', name: "accessory" }))), h("div", { key: '6c82ddaf8d25319ed7a0a46637047e4e750c5834', class: "desktop-nav" }, h("slot", { key: '4f01aa6544750860aae61cdb9309c62b37f45ef6', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: 'ff9b16866753cb24279c5bfc83ca637803333101', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
22762
+ } }, h("nav", { key: '26a999b2b5282f8e39f8e07e6e4190374e3c68c9', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '507955a2092b3c1c5bfcaefe4debb97ba8ce1063', class: "header" }, h("slot", { key: '5e3cd2413baf55b8905912316a1a17358e8597b5', name: "back" }), h("slot", { key: 'ea39a03ba015a9bd2d031e839ae379699ba96d1a', name: "accessory" }))), h("div", { key: 'e6db628b6f4d1dc036a945554cfd8c90e8308307', class: "desktop-nav" }, h("slot", { key: '1adc8091b920e22b54d8b83e0b60200f2ff1d45d', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: '61fe2ef173d090faed09515c16df421cda50c11c', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
22762
22763
  }
22763
22764
  static get style() { return inPageNavCss; }
22764
22765
  static get cmpMeta() { return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nanoporetech-digital/components",
3
- "version": "8.5.5",
3
+ "version": "8.5.6",
4
4
  "sideEffects": false,
5
5
  "repository": {
6
6
  "type": "git",
@@ -60,7 +60,7 @@
60
60
  "smart-array-filter": "^4.0.2",
61
61
  "stencil-wormhole": "3.2.1",
62
62
  "tyqs": "^0.1.3",
63
- "@nanoporetech-digital/style": "8.5.5"
63
+ "@nanoporetech-digital/style": "8.5.6"
64
64
  },
65
65
  "devDependencies": {
66
66
  "@algolia/client-search": "^4.22.1",