@nanoporetech-digital/components 8.11.3 → 8.12.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 (46) hide show
  1. package/dist/cjs/nano-avatar_5.cjs.entry.js +3 -0
  2. package/dist/cjs/nano-datalist_3.cjs.entry.js +5 -5
  3. package/dist/cjs/nano-in-page-nav.cjs.entry.js +1 -1
  4. package/dist/cjs/nano-masked-overflow.cjs.entry.js +7 -5
  5. package/dist/collection/components/badge/badge.css +42 -0
  6. package/dist/collection/components/badge/badge.js +10 -0
  7. package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
  8. package/dist/collection/components/datalist/datalist.js +9 -5
  9. package/dist/collection/components/icon/pictogram/education.svg +6 -0
  10. package/dist/collection/components/in-page-nav/in-page-nav.css +3 -3
  11. package/dist/collection/components/masked-overflow/masked-overflow.js +7 -5
  12. package/dist/components/badge.js +3 -0
  13. package/dist/components/datalist.js +5 -5
  14. package/dist/components/masked-overflow.js +7 -5
  15. package/dist/components/nano-in-page-nav.js +1 -1
  16. package/dist/esm/nano-avatar_5.entry.js +3 -0
  17. package/dist/esm/nano-datalist_3.entry.js +5 -5
  18. package/dist/esm/nano-in-page-nav.entry.js +1 -1
  19. package/dist/esm/nano-masked-overflow.entry.js +7 -5
  20. package/dist/nano-assets/hash.txt +1 -1
  21. package/dist/nano-assets/icon/pictogram/education.svg +6 -0
  22. package/dist/nano-components/nano-avatar_5.entry.js +1 -1
  23. package/dist/nano-components/nano-components.css +14 -14
  24. package/dist/nano-components/nano-datalist_3.entry.js +1 -1
  25. package/dist/nano-components/nano-in-page-nav.entry.js +1 -1
  26. package/dist/nano-components/nano-masked-overflow.entry.js +1 -1
  27. package/dist/nano-components/pictogram/education.svg +6 -0
  28. package/dist/style/components.css +1 -1
  29. package/dist/style/components.css.map +1 -1
  30. package/dist/style/nano.css +1 -1
  31. package/dist/style/nano.css.map +1 -1
  32. package/dist/types/components/datalist/datalist.d.ts +4 -0
  33. package/docs-json.json +29 -6
  34. package/hydrate/index.js +20 -11
  35. package/hydrate/index.mjs +20 -11
  36. package/package.json +2 -2
  37. /package/dist/types/builds/{uzusAVFD → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
  38. /package/dist/types/builds/{uzusAVFD → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
  39. /package/dist/types/builds/{uzusAVFD → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
  40. /package/dist/types/builds/{uzusAVFD → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
  41. /package/dist/types/builds/{uzusAVFD → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
  42. /package/dist/types/builds/{uzusAVFD → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
  43. /package/dist/types/builds/{uzusAVFD → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
  44. /package/dist/types/builds/{uzusAVFD → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
  45. /package/dist/types/builds/{uzusAVFD → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
  46. /package/dist/types/builds/{uzusAVFD → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
package/dist/cjs/nano-avatar_5.cjs.entry.js CHANGED
@@ -30,6 +30,8 @@ const NanoAvatar = class {
30
30
  };
31
31
  NanoAvatar.style = avatarCss;
32
32
 
33
+ const badgeCss = ":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}}";
34
+
33
35
  const NanoBadge = class {
34
36
  constructor(hostRef) {
35
37
  index.registerInstance(this, hostRef);
@@ -41,6 +43,7 @@ const NanoBadge = class {
41
43
  /** Use pulse to draw attention to the badge with an animation */
42
44
  pulse;
43
45
  };
46
+ NanoBadge.style = badgeCss;
44
47
 
45
48
  const drawerCss = ":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{--size:25rem;--min-size:25rem;--max-size:50%;--panel-background:var(--nano-color-surface-300);--panel-shadow:var(--nano-shadow-l3);--scrim-color:var(--nano-overlay-background-color);--header-button-color:var(--nano-color-primary-1200);--header-button-size:1.375rem;--footer-background:var(--panel-background);--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--body-spacing:var(--nano-spacing-l1-default);--footer-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--dir:1}:host([placement=top]),:host([placement=bottom]){--max-size:80%}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;pointer-events:none;overflow:hidden;border:none;inline-size:100%;block-size:100%;color:unset;background-color:unset}.drawer::backdrop{display:none}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-z-index-modal)}.drawer__panel{position:absolute;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform;display:flex}.drawer--top .drawer__panel,.drawer--bottom .drawer__panel{flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px var(--nano-color-base-1000)}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__resize-handle{display:flex;align-items:center;justify-content:center;position:absolute;z-index:var(--nano-z-index-dropdown);color:var(--nano-color-primary-1200);background-color:var(--nano-color-neutral-75)}.drawer__resize-handle:focus{outline:none}.drawer__resize-handle:focus-visible{background-color:var(--nano-focus-ring-color)}.drawer__resize-handle:active{color:var(--nano-color-primary-800)}.drawer--top .drawer__resize-handle,.drawer--bottom .drawer__resize-handle{cursor:row-resize;inset-inline:0}.drawer--end .drawer__resize-handle,.drawer--start .drawer__resize-handle{cursor:col-resize;inset-block:0}.drawer--end .drawer__resize-handle{inset-inline-start:0}.drawer--start .drawer__resize-handle{inset-inline-end:0}.drawer--top .drawer__resize-handle{inset-block-end:0}.drawer--bottom .drawer__resize-handle{inset-block-start:0}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background);align-items:center;padding:var(--header-spacing)}[stuck] .drawer__header{box-shadow:var(--nano-shadow-l0)}.drawer__title{flex:1 1 auto;margin:0;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-sm);color:var(--header-button-color);inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);position:relative}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(.nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--header-button-size)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;opacity:0;transition:var(--nano-transition-fast) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";
46
49
 
package/dist/cjs/nano-datalist_3.cjs.entry.js CHANGED
@@ -527,18 +527,18 @@ const DataList = class {
527
527
  }
528
528
  }
529
529
  render() {
530
- return (renderer.h(index.Host, { key: '6648095e87e86086dd4beb0bea663c077becb0a9', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
530
+ return (renderer.h(index.Host, { key: '269f57e6eccd251685f84a94d53f380d6545a3cb', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
531
531
  ? 'Select options from the list below'
532
- : undefined }, renderer.h("nano-dropdown", { key: '882d3706051e93738b2b52fb4d4024aeeb3ef295', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
532
+ : undefined }, renderer.h("nano-dropdown", { key: 'ee6398b356dc1a0ff9fa35e84955314fc95435b6', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
533
533
  dlist__dropdown: true,
534
534
  'dlist--isfiltered': this.isFiltered,
535
- }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, renderer.h("nano-menu", { key: 'ccda08c9da20ea0cbb6944a170929c2c5ef36b70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
535
+ }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, renderer.h("nano-menu", { key: 'f80006a5ba62c227094da52672b4abf6ee6335dc', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
536
536
  dlist__menu: true,
537
537
  'dlist__menu--open': this.dropwdownOpen,
538
- }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, renderer.h("slot", { key: '0db7a9e551be91837cd7dfa148057702db76f1db', name: "list-top" }), renderer.h("slot", { key: 'b55088fc93ac7cfb24eee33ffe720de3e401daf5' }), renderer.h("slot", { key: '28eeaf664c8f2f78adf9716ab952071659c02fb6', name: "internal-opts" }), renderer.h("slot", { key: 'be42f12bb5027f2b8664ab9d275014b6ea37d702', name: "list-bottom" })), renderer.h("nano-menu", { key: '28ec7183890b5d266081a7a75179552261ab4401', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
538
+ }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, renderer.h("slot", { key: '8a2d3160b990c99baeaf4fd9bdd7bb04229d642c', name: "list-top" }), renderer.h("slot", { key: '2230e4458be0998d59d18250e1d22188baf2f6b1' }), renderer.h("slot", { key: 'fca84cbd01495e4b62ba95c4c07681f506939d3f', name: "internal-opts" }), renderer.h("slot", { key: '076fd81c15f5ac6590e5311503262a07f60e8454', name: "list-bottom" })), renderer.h("nano-menu", { key: 'd4878bc502b4fcc0de01f67b5065ad017f445f75', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
539
539
  dlist__menu: true,
540
540
  'dlist__menu--open': this.dropwdownOpen,
541
- } }, renderer.h("slot", { key: '57a5d980992d0eac7a505f3dae5c8d57fb8d38d8', name: "no-result" })), !!this.actvOptEles && (renderer.h("div", { key: '5b2e2489fb2ed53011f465b56defe279a55af455', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
541
+ } }, renderer.h("slot", { key: '2ac583af3ac8b24ace627637ab86471999df9465', name: "no-result" })), !!this.actvOptEles && (renderer.h("div", { key: '4971780255baf694fcc447756ca02e1115ece871', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
542
542
  }
543
543
  static get watchers() { return {
544
544
  "open": ["openWatcher"],
package/dist/cjs/nano-in-page-nav.cjs.entry.js CHANGED
@@ -9,7 +9,7 @@ var slot = require('./slot-BUMYLmup.js');
9
9
  var dom = require('./dom-Dxk5vXYq.js');
10
10
  var scroll = require('./scroll-C6pO9RvO.js');
11
11
 
12
- 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}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.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}@media (width <= 730px){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 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) span,.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) span.is-active,.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) span:hover,.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.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 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)}";
12
+ 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}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.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}@media (width <= 730px){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 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) span,.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) span.is-active,.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) span:hover,.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.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 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)}";
13
13
 
14
14
  const NanoInPageNav = class {
15
15
  constructor(hostRef) {
package/dist/cjs/nano-masked-overflow.cjs.entry.js CHANGED
@@ -300,14 +300,16 @@ const MaskedOverflow = class {
300
300
  this.ro.disconnect();
301
301
  this.ro = undefined;
302
302
  }
303
- const mo = (this.ro = new ResizeObserver(this.recalculatePositions));
304
- mo.observe(this.host);
303
+ const ro = (this.ro = new ResizeObserver(this.recalculatePositions));
304
+ ro.observe(this.host);
305
305
  }
306
306
  componentWillLoad() {
307
307
  this.watchHideScrollbars();
308
308
  }
309
309
  componentDidLoad() {
310
310
  this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
311
+ this.hideStartBtn();
312
+ this.hideEndBtn();
311
313
  requestAnimationFrame(() => (this.instantReCalc = false));
312
314
  }
313
315
  disconnectedCallback() {
@@ -317,7 +319,7 @@ const MaskedOverflow = class {
317
319
  }
318
320
  }
319
321
  render() {
320
- return (renderer.h(index.Host, { key: 'f09154c9daef9d42d1ac6bf1ae1cab43b25fc759', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, renderer.h("div", { key: 'c08a301b623b69a8a8936e846fb4d61c3d7a5d42', part: "base", class: {
322
+ return (renderer.h(index.Host, { key: 'e5c6238730817f0c7036060faa8c344d514a3924', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, renderer.h("div", { key: '4027acd51b80fd1bf2bb9d66a05ec051802732f3', part: "base", class: {
321
323
  onav: true,
322
324
  [`onav--${this.orientation}`]: true,
323
325
  'onav--has-scroll-controls': this.hasScrollControls,
@@ -326,12 +328,12 @@ const MaskedOverflow = class {
326
328
  'onav--no-transitions': this.instantReCalc,
327
329
  'onnav--has-indicator': this.showIndicator,
328
330
  'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
329
- }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: '4430bfab6920f77fe64885eb12c7a1f2ebfdbf31', class: "onav__nav" }, this.scrollControls && (renderer.h("nano-icon-button", { key: '800ac8de65485ebaa4060c26a7f0b3432348c8d1', part: "scroll-button scroll-button-prev", class: {
331
+ }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: 'a552b2e3cdf9f84249655b21ce6f2acb5c330a75', class: "onav__nav" }, this.scrollControls && (renderer.h("nano-icon-button", { key: '5aca29990db29b3d0d00e6bca317cd3870d06d6b', part: "scroll-button scroll-button-prev", class: {
330
332
  'onav__scroll-button': true,
331
333
  'onav__scroll-button--start': true,
332
334
  }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
333
335
  ? 'light/chevron-left'
334
- : 'light/chevron-up' })), renderer.h("div", { key: '48fff7814d1c8a864ca9f29c0b4bc2196c7b4a98', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, renderer.h("div", { key: '376a6e0007b1e9e35d3226e6575d0ca840b1f75a', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (renderer.h("div", { key: 'c0b933b6b29071de0f5b3d3b97497de231b45801', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), renderer.h("slot", { key: '2bff315c99ce804c26240ef5e134c1f08fed0547', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (renderer.h("nano-icon-button", { key: 'd568e4adaf25dbf10127e433220fa6900298e31f', part: "scroll-button scroll-button-next", class: {
336
+ : 'light/chevron-up' })), renderer.h("div", { key: '9c2b4c91859b5c6c132ab2eecc01cf56eeec18b9', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, renderer.h("div", { key: 'a77097f7b9a70e08f9a1eb980948c5c92dff760d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (renderer.h("div", { key: 'b8661b042f9e195850a33ce3570b75c9bed25d7e', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), renderer.h("slot", { key: '54af572f6ef591d8d3cb34221e048ac0e32140bb', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (renderer.h("nano-icon-button", { key: 'e27a06cc2cec7ed373c527e3c6db5a0a56a90b71', part: "scroll-button scroll-button-next", class: {
335
337
  'onav__scroll-button': true,
336
338
  'onav__scroll-button--end': true,
337
339
  }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
package/dist/collection/components/badge/badge.css ADDED
@@ -0,0 +1,42 @@
1
+ :host,
2
+ *,
3
+ *::before,
4
+ *::after {
5
+ box-sizing: border-box;
6
+ }
7
+ [hidden] {
8
+ display: none !important;
9
+ }
10
+ @media (prefers-reduced-motion: reduce) {
11
+ :host,
12
+ *,
13
+ *::before,
14
+ *::after {
15
+ animation-duration: 0.01ms !important;
16
+ animation-iteration-count: 1 !important;
17
+ transition-duration: 0.01ms !important;
18
+ scroll-behavior: auto !important;
19
+ }
20
+ }:host,
21
+ *,
22
+ *::before,
23
+ *::after {
24
+ box-sizing: border-box;
25
+ }
26
+ [hidden] {
27
+ display: none !important;
28
+ }
29
+ @media (prefers-reduced-motion: reduce) {
30
+ :host,
31
+ *,
32
+ *::before,
33
+ *::after {
34
+ animation-duration: 0.01ms !important;
35
+ animation-iteration-count: 1 !important;
36
+ transition-duration: 0.01ms !important;
37
+ scroll-behavior: auto !important;
38
+ }
39
+ }/**
40
+ * @prop --bg: Background color of the badge. Defaults to a colour defined by the `theme` and `strength` attributes;
41
+ * @prop --color: Text color of the badge. Defaults to being dynamically calculated based on the best contrast with `--bg` color;
42
+ */
package/dist/collection/components/badge/badge.js CHANGED
@@ -14,6 +14,16 @@ export class NanoBadge {
14
14
  /** Use pulse to draw attention to the badge with an animation */
15
15
  pulse;
16
16
  static get is() { return "nano-badge"; }
17
+ static get originalStyleUrls() {
18
+ return {
19
+ "$": ["badge.scss"]
20
+ };
21
+ }
22
+ static get styleUrls() {
23
+ return {
24
+ "$": ["badge.css"]
25
+ };
26
+ }
17
27
  static get properties() {
18
28
  return {
19
29
  "theme": {
package/dist/collection/components/breadcrumb/breadcrumb.js CHANGED
@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
89
89
  "references": {
90
90
  "Breadcrumb": {
91
91
  "location": "local",
92
- "path": "/builds/uzusAVFD/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
92
+ "path": "/builds/x6knoJK1/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
93
93
  "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
94
94
  }
95
95
  }
package/dist/collection/components/datalist/datalist.js CHANGED
@@ -27,6 +27,10 @@ let listIds = 0;
27
27
  * @slot list-top - shows at the top of the list when there are options present
28
28
  * @slot list-bottom - shows at the bottom of the list when there are options present
29
29
  * @slot no-result - shown when there are no results otherwise nothing will be shown
30
+ *
31
+ * @part dropdown - the wrapping `nano-dropdown` element
32
+ * @part main-menu - the main `nano-menu` element that holds the options
33
+ * @part no-result-menu - the `nano-menu` element that holds the no results content
30
34
  */
31
35
  export class DataList {
32
36
  // Private State
@@ -529,18 +533,18 @@ export class DataList {
529
533
  }
530
534
  }
531
535
  render() {
532
- return (h(Host, { key: '6648095e87e86086dd4beb0bea663c077becb0a9', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
536
+ return (h(Host, { key: '269f57e6eccd251685f84a94d53f380d6545a3cb', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
533
537
  ? 'Select options from the list below'
534
- : undefined }, h("nano-dropdown", { key: '882d3706051e93738b2b52fb4d4024aeeb3ef295', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
538
+ : undefined }, h("nano-dropdown", { key: 'ee6398b356dc1a0ff9fa35e84955314fc95435b6', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
535
539
  dlist__dropdown: true,
536
540
  'dlist--isfiltered': this.isFiltered,
537
- }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'ccda08c9da20ea0cbb6944a170929c2c5ef36b70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
541
+ }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'f80006a5ba62c227094da52672b4abf6ee6335dc', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
538
542
  dlist__menu: true,
539
543
  'dlist__menu--open': this.dropwdownOpen,
540
- }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '0db7a9e551be91837cd7dfa148057702db76f1db', name: "list-top" }), h("slot", { key: 'b55088fc93ac7cfb24eee33ffe720de3e401daf5' }), h("slot", { key: '28eeaf664c8f2f78adf9716ab952071659c02fb6', name: "internal-opts" }), h("slot", { key: 'be42f12bb5027f2b8664ab9d275014b6ea37d702', name: "list-bottom" })), h("nano-menu", { key: '28ec7183890b5d266081a7a75179552261ab4401', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
544
+ }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8a2d3160b990c99baeaf4fd9bdd7bb04229d642c', name: "list-top" }), h("slot", { key: '2230e4458be0998d59d18250e1d22188baf2f6b1' }), h("slot", { key: 'fca84cbd01495e4b62ba95c4c07681f506939d3f', name: "internal-opts" }), h("slot", { key: '076fd81c15f5ac6590e5311503262a07f60e8454', name: "list-bottom" })), h("nano-menu", { key: 'd4878bc502b4fcc0de01f67b5065ad017f445f75', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
541
545
  dlist__menu: true,
542
546
  'dlist__menu--open': this.dropwdownOpen,
543
- } }, h("slot", { key: '57a5d980992d0eac7a505f3dae5c8d57fb8d38d8', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '5b2e2489fb2ed53011f465b56defe279a55af455', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
547
+ } }, h("slot", { key: '2ac583af3ac8b24ace627637ab86471999df9465', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '4971780255baf694fcc447756ca02e1115ece871', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
544
548
  }
545
549
  static get is() { return "nano-datalist"; }
546
550
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/icon/pictogram/education.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg width="64" height="64" viewBox="0 0 64 64">
2
+ <path d="M32.272 33.7249C30.8371 33.7249 29.0852 33.5671 27.0463 33.1002C27.0262 33.0969 27.0062 33.0903 26.9862 33.0837L2.23245 25.4385C1.90876 25.3398 0.273643 24.7808 0.0300427 23.5181C-0.0667298 23.015 0.0300428 22.2456 1.0545 21.4334C1.15461 21.3544 1.26806 21.2985 1.39153 21.2722L29.6324 13.5382C29.7459 13.5053 32.5923 12.7425 37.6679 14.3899L62.4817 21.2755C63.1724 21.4432 63.98 21.9299 64 22.7618C64.0334 24.2021 61.6908 25.4286 55.6475 27.1287L36.8003 33.0706C36.5333 33.1725 34.9582 33.7216 32.2753 33.7216L32.272 33.7249ZM27.4534 31.5053C32.9727 32.7648 36.1729 31.5481 36.2063 31.5382C36.223 31.5317 36.2463 31.5251 36.263 31.5185L55.1603 25.5601C60.0957 24.1692 61.6541 23.2814 62.1413 22.8934C62.118 22.8868 62.0946 22.8802 62.0712 22.8736L37.1974 15.9683C37.1974 15.9683 37.174 15.9617 37.1607 15.9584C32.6157 14.4787 30.1029 15.1166 30.0762 15.1232L1.9755 22.8177C1.68852 23.0742 1.6685 23.209 1.6685 23.2123C1.69853 23.3636 2.20576 23.7056 2.733 23.87L27.4567 31.5053H27.4534Z" />
3
+ <path d="M31.9617 49.3342C29.1219 49.3342 26.5825 48.8837 24.4468 48.2721C17.7662 46.3616 13.6116 42.613 13.4381 42.4519C13.2679 42.2973 13.1711 42.077 13.1711 41.8501V28.2729C13.1711 27.8191 13.5449 27.4508 14.0054 27.4508C14.4659 27.4508 14.8396 27.8191 14.8396 28.2729V41.4753C15.8374 42.3039 19.5748 45.1812 24.9774 46.7102C33.2865 49.0613 41.4688 47.2922 49.3007 41.4424V28.0032C49.3007 27.5494 49.6744 27.1812 50.1349 27.1812C50.5954 27.1812 50.9692 27.5494 50.9692 28.0032V41.8468C50.9692 42.1 50.849 42.3401 50.6455 42.4979C43.8013 47.7131 37.3409 49.3309 31.9617 49.3309V49.3342Z" />
4
+ <path d="M59.0746 43.8461C57.4695 43.8461 56.0379 43.2246 55.2638 42.6919C54.9567 42.4815 54.8299 42.0935 54.9534 41.7449L58.0601 33.054C58.1769 32.7252 58.4906 32.5082 58.841 32.5049H58.8443C59.1947 32.5049 59.5084 32.7219 59.6285 33.0442L62.842 41.7351C62.9655 42.0705 62.8554 42.4486 62.5684 42.6656C61.4272 43.5337 60.2058 43.8428 59.0713 43.8428L59.0746 43.8461ZM56.7587 41.6463C57.6163 42.0639 59.3549 42.6558 61.0534 41.6956L58.861 35.7636L56.7587 41.6463Z" />
5
+ <path d="M58.8477 34.1492H58.841C58.3805 34.1492 58.0101 33.7743 58.0135 33.3205L58.0668 25.3399C58.0668 24.8861 58.4439 24.5244 58.9011 24.5244H58.9078C59.3683 24.5244 59.7387 24.8993 59.7353 25.3531L59.6819 33.3337C59.6819 33.7875 59.3049 34.1492 58.8477 34.1492Z" />
6
+ </svg>
package/dist/collection/components/in-page-nav/in-page-nav.css CHANGED
@@ -205,16 +205,16 @@ nav {
205
205
  color: var(--color-primary);
206
206
  }
207
207
  .details-wrapper ul > li > ul,
208
- .details-wrapper ul > li > .nano-details > ul {
208
+ .details-wrapper ul > li > .nano-details ul {
209
209
  padding: var(--list-gap) 0 0 var(--spacing-l2);
210
210
  gap: var(--list-gap);
211
211
  }
212
212
  .details-wrapper ul > li > ul a,
213
- .details-wrapper ul > li > .nano-details > ul a {
213
+ .details-wrapper ul > li > .nano-details ul a {
214
214
  color: var(--color-primary) !important;
215
215
  }
216
216
  .details-wrapper ul > li > ul > li > .nano-details > ul,
217
- .details-wrapper ul > li > .nano-details > ul > li > .nano-details > ul {
217
+ .details-wrapper ul > li > .nano-details ul > li > .nano-details ul {
218
218
  padding: var(--list-gap) 0 0 var(--nano-spacing-xl);
219
219
  }
220
220
  .details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details) {
package/dist/collection/components/masked-overflow/masked-overflow.js CHANGED
@@ -310,14 +310,16 @@ export class MaskedOverflow {
310
310
  this.ro.disconnect();
311
311
  this.ro = undefined;
312
312
  }
313
- const mo = (this.ro = new ResizeObserver(this.recalculatePositions));
314
- mo.observe(this.host);
313
+ const ro = (this.ro = new ResizeObserver(this.recalculatePositions));
314
+ ro.observe(this.host);
315
315
  }
316
316
  componentWillLoad() {
317
317
  this.watchHideScrollbars();
318
318
  }
319
319
  componentDidLoad() {
320
320
  this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
321
+ this.hideStartBtn();
322
+ this.hideEndBtn();
321
323
  requestAnimationFrame(() => (this.instantReCalc = false));
322
324
  }
323
325
  disconnectedCallback() {
@@ -327,7 +329,7 @@ export class MaskedOverflow {
327
329
  }
328
330
  }
329
331
  render() {
330
- return (h(Host, { key: 'f09154c9daef9d42d1ac6bf1ae1cab43b25fc759', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'c08a301b623b69a8a8936e846fb4d61c3d7a5d42', part: "base", class: {
332
+ return (h(Host, { key: 'e5c6238730817f0c7036060faa8c344d514a3924', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '4027acd51b80fd1bf2bb9d66a05ec051802732f3', part: "base", class: {
331
333
  onav: true,
332
334
  [`onav--${this.orientation}`]: true,
333
335
  'onav--has-scroll-controls': this.hasScrollControls,
@@ -336,12 +338,12 @@ export class MaskedOverflow {
336
338
  'onav--no-transitions': this.instantReCalc,
337
339
  'onnav--has-indicator': this.showIndicator,
338
340
  'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
339
- }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '4430bfab6920f77fe64885eb12c7a1f2ebfdbf31', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '800ac8de65485ebaa4060c26a7f0b3432348c8d1', part: "scroll-button scroll-button-prev", class: {
341
+ }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'a552b2e3cdf9f84249655b21ce6f2acb5c330a75', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '5aca29990db29b3d0d00e6bca317cd3870d06d6b', part: "scroll-button scroll-button-prev", class: {
340
342
  'onav__scroll-button': true,
341
343
  'onav__scroll-button--start': true,
342
344
  }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
343
345
  ? 'light/chevron-left'
344
- : 'light/chevron-up' })), h("div", { key: '48fff7814d1c8a864ca9f29c0b4bc2196c7b4a98', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '376a6e0007b1e9e35d3226e6575d0ca840b1f75a', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'c0b933b6b29071de0f5b3d3b97497de231b45801', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '2bff315c99ce804c26240ef5e134c1f08fed0547', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'd568e4adaf25dbf10127e433220fa6900298e31f', part: "scroll-button scroll-button-next", class: {
346
+ : 'light/chevron-up' })), h("div", { key: '9c2b4c91859b5c6c132ab2eecc01cf56eeec18b9', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: 'a77097f7b9a70e08f9a1eb980948c5c92dff760d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'b8661b042f9e195850a33ce3570b75c9bed25d7e', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '54af572f6ef591d8d3cb34221e048ac0e32140bb', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'e27a06cc2cec7ed373c527e3c6db5a0a56a90b71', part: "scroll-button scroll-button-next", class: {
345
347
  'onav__scroll-button': true,
346
348
  'onav__scroll-button--end': true,
347
349
  }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
package/dist/components/badge.js CHANGED
@@ -3,6 +3,8 @@
3
3
  */
4
4
  import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
5
5
 
6
+ const badgeCss = ":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}}";
7
+
6
8
  const NanoBadge = /*@__PURE__*/ proxyCustomElement(class NanoBadge extends HTMLElement {
7
9
  constructor() {
8
10
  super();
@@ -14,6 +16,7 @@ const NanoBadge = /*@__PURE__*/ proxyCustomElement(class NanoBadge extends HTMLE
14
16
  strength;
15
17
  /** Use pulse to draw attention to the badge with an animation */
16
18
  pulse;
19
+ static get style() { return badgeCss; }
17
20
  }, [0, "nano-badge", {
18
21
  "theme": [513],
19
22
  "strength": [513],
package/dist/components/datalist.js CHANGED
@@ -529,18 +529,18 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
529
529
  }
530
530
  }
531
531
  render() {
532
- return (h(Host, { key: '6648095e87e86086dd4beb0bea663c077becb0a9', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
532
+ return (h(Host, { key: '269f57e6eccd251685f84a94d53f380d6545a3cb', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
533
533
  ? 'Select options from the list below'
534
- : undefined }, h("nano-dropdown", { key: '882d3706051e93738b2b52fb4d4024aeeb3ef295', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
534
+ : undefined }, h("nano-dropdown", { key: 'ee6398b356dc1a0ff9fa35e84955314fc95435b6', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
535
535
  dlist__dropdown: true,
536
536
  'dlist--isfiltered': this.isFiltered,
537
- }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'ccda08c9da20ea0cbb6944a170929c2c5ef36b70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
537
+ }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'f80006a5ba62c227094da52672b4abf6ee6335dc', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
538
538
  dlist__menu: true,
539
539
  'dlist__menu--open': this.dropwdownOpen,
540
- }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '0db7a9e551be91837cd7dfa148057702db76f1db', name: "list-top" }), h("slot", { key: 'b55088fc93ac7cfb24eee33ffe720de3e401daf5' }), h("slot", { key: '28eeaf664c8f2f78adf9716ab952071659c02fb6', name: "internal-opts" }), h("slot", { key: 'be42f12bb5027f2b8664ab9d275014b6ea37d702', name: "list-bottom" })), h("nano-menu", { key: '28ec7183890b5d266081a7a75179552261ab4401', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
540
+ }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8a2d3160b990c99baeaf4fd9bdd7bb04229d642c', name: "list-top" }), h("slot", { key: '2230e4458be0998d59d18250e1d22188baf2f6b1' }), h("slot", { key: 'fca84cbd01495e4b62ba95c4c07681f506939d3f', name: "internal-opts" }), h("slot", { key: '076fd81c15f5ac6590e5311503262a07f60e8454', name: "list-bottom" })), h("nano-menu", { key: 'd4878bc502b4fcc0de01f67b5065ad017f445f75', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
541
541
  dlist__menu: true,
542
542
  'dlist__menu--open': this.dropwdownOpen,
543
- } }, h("slot", { key: '57a5d980992d0eac7a505f3dae5c8d57fb8d38d8', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '5b2e2489fb2ed53011f465b56defe279a55af455', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
543
+ } }, h("slot", { key: '2ac583af3ac8b24ace627637ab86471999df9465', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '4971780255baf694fcc447756ca02e1115ece871', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
544
544
  }
545
545
  static get watchers() { return {
546
546
  "open": ["openWatcher"],
package/dist/components/masked-overflow.js CHANGED
@@ -303,14 +303,16 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
303
303
  this.ro.disconnect();
304
304
  this.ro = undefined;
305
305
  }
306
- const mo = (this.ro = new ResizeObserver(this.recalculatePositions));
307
- mo.observe(this.host);
306
+ const ro = (this.ro = new ResizeObserver(this.recalculatePositions));
307
+ ro.observe(this.host);
308
308
  }
309
309
  componentWillLoad() {
310
310
  this.watchHideScrollbars();
311
311
  }
312
312
  componentDidLoad() {
313
313
  this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
314
+ this.hideStartBtn();
315
+ this.hideEndBtn();
314
316
  requestAnimationFrame(() => (this.instantReCalc = false));
315
317
  }
316
318
  disconnectedCallback() {
@@ -320,7 +322,7 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
320
322
  }
321
323
  }
322
324
  render() {
323
- return (h(Host, { key: 'f09154c9daef9d42d1ac6bf1ae1cab43b25fc759', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'c08a301b623b69a8a8936e846fb4d61c3d7a5d42', part: "base", class: {
325
+ return (h(Host, { key: 'e5c6238730817f0c7036060faa8c344d514a3924', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '4027acd51b80fd1bf2bb9d66a05ec051802732f3', part: "base", class: {
324
326
  onav: true,
325
327
  [`onav--${this.orientation}`]: true,
326
328
  'onav--has-scroll-controls': this.hasScrollControls,
@@ -329,12 +331,12 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
329
331
  'onav--no-transitions': this.instantReCalc,
330
332
  'onnav--has-indicator': this.showIndicator,
331
333
  'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
332
- }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '4430bfab6920f77fe64885eb12c7a1f2ebfdbf31', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '800ac8de65485ebaa4060c26a7f0b3432348c8d1', part: "scroll-button scroll-button-prev", class: {
334
+ }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'a552b2e3cdf9f84249655b21ce6f2acb5c330a75', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '5aca29990db29b3d0d00e6bca317cd3870d06d6b', part: "scroll-button scroll-button-prev", class: {
333
335
  'onav__scroll-button': true,
334
336
  'onav__scroll-button--start': true,
335
337
  }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
336
338
  ? 'light/chevron-left'
337
- : 'light/chevron-up' })), h("div", { key: '48fff7814d1c8a864ca9f29c0b4bc2196c7b4a98', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '376a6e0007b1e9e35d3226e6575d0ca840b1f75a', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'c0b933b6b29071de0f5b3d3b97497de231b45801', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '2bff315c99ce804c26240ef5e134c1f08fed0547', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'd568e4adaf25dbf10127e433220fa6900298e31f', part: "scroll-button scroll-button-next", class: {
339
+ : 'light/chevron-up' })), h("div", { key: '9c2b4c91859b5c6c132ab2eecc01cf56eeec18b9', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: 'a77097f7b9a70e08f9a1eb980948c5c92dff760d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'b8661b042f9e195850a33ce3570b75c9bed25d7e', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '54af572f6ef591d8d3cb34221e048ac0e32140bb', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'e27a06cc2cec7ed373c527e3c6db5a0a56a90b71', part: "scroll-button scroll-button-next", class: {
338
340
  'onav__scroll-button': true,
339
341
  'onav__scroll-button--end': true,
340
342
  }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
package/dist/components/nano-in-page-nav.js CHANGED
@@ -9,7 +9,7 @@ import { f as findScrollParent } from './scroll.js';
9
9
  import { d as defineCustomElement$3 } from './details.js';
10
10
  import { d as defineCustomElement$2 } from './icon.js';
11
11
 
12
- 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}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.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}@media (width <= 730px){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 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) span,.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) span.is-active,.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) span:hover,.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.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 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)}";
12
+ 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}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.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}@media (width <= 730px){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 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) span,.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) span.is-active,.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) span:hover,.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.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 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)}";
13
13
 
14
14
  const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav extends HTMLElement {
15
15
  constructor() {
package/dist/esm/nano-avatar_5.entry.js CHANGED
@@ -28,6 +28,8 @@ const NanoAvatar = class {
28
28
  };
29
29
  NanoAvatar.style = avatarCss;
30
30
 
31
+ const badgeCss = ":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}}";
32
+
31
33
  const NanoBadge = class {
32
34
  constructor(hostRef) {
33
35
  registerInstance(this, hostRef);
@@ -39,6 +41,7 @@ const NanoBadge = class {
39
41
  /** Use pulse to draw attention to the badge with an animation */
40
42
  pulse;
41
43
  };
44
+ NanoBadge.style = badgeCss;
42
45
 
43
46
  const drawerCss = ":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{--size:25rem;--min-size:25rem;--max-size:50%;--panel-background:var(--nano-color-surface-300);--panel-shadow:var(--nano-shadow-l3);--scrim-color:var(--nano-overlay-background-color);--header-button-color:var(--nano-color-primary-1200);--header-button-size:1.375rem;--footer-background:var(--panel-background);--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--body-spacing:var(--nano-spacing-l1-default);--footer-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--dir:1}:host([placement=top]),:host([placement=bottom]){--max-size:80%}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;pointer-events:none;overflow:hidden;border:none;inline-size:100%;block-size:100%;color:unset;background-color:unset}.drawer::backdrop{display:none}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-z-index-modal)}.drawer__panel{position:absolute;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform;display:flex}.drawer--top .drawer__panel,.drawer--bottom .drawer__panel{flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px var(--nano-color-base-1000)}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__resize-handle{display:flex;align-items:center;justify-content:center;position:absolute;z-index:var(--nano-z-index-dropdown);color:var(--nano-color-primary-1200);background-color:var(--nano-color-neutral-75)}.drawer__resize-handle:focus{outline:none}.drawer__resize-handle:focus-visible{background-color:var(--nano-focus-ring-color)}.drawer__resize-handle:active{color:var(--nano-color-primary-800)}.drawer--top .drawer__resize-handle,.drawer--bottom .drawer__resize-handle{cursor:row-resize;inset-inline:0}.drawer--end .drawer__resize-handle,.drawer--start .drawer__resize-handle{cursor:col-resize;inset-block:0}.drawer--end .drawer__resize-handle{inset-inline-start:0}.drawer--start .drawer__resize-handle{inset-inline-end:0}.drawer--top .drawer__resize-handle{inset-block-end:0}.drawer--bottom .drawer__resize-handle{inset-block-start:0}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background);align-items:center;padding:var(--header-spacing)}[stuck] .drawer__header{box-shadow:var(--nano-shadow-l0)}.drawer__title{flex:1 1 auto;margin:0;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-sm);color:var(--header-button-color);inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);position:relative}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(.nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--header-button-size)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;opacity:0;transition:var(--nano-transition-fast) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";
44
47
 
package/dist/esm/nano-datalist_3.entry.js CHANGED
@@ -525,18 +525,18 @@ const DataList = class {
525
525
  }
526
526
  }
527
527
  render() {
528
- return (h(Host, { key: '6648095e87e86086dd4beb0bea663c077becb0a9', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
528
+ return (h(Host, { key: '269f57e6eccd251685f84a94d53f380d6545a3cb', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
529
529
  ? 'Select options from the list below'
530
- : undefined }, h("nano-dropdown", { key: '882d3706051e93738b2b52fb4d4024aeeb3ef295', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
530
+ : undefined }, h("nano-dropdown", { key: 'ee6398b356dc1a0ff9fa35e84955314fc95435b6', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
531
531
  dlist__dropdown: true,
532
532
  'dlist--isfiltered': this.isFiltered,
533
- }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'ccda08c9da20ea0cbb6944a170929c2c5ef36b70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
533
+ }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'f80006a5ba62c227094da52672b4abf6ee6335dc', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
534
534
  dlist__menu: true,
535
535
  'dlist__menu--open': this.dropwdownOpen,
536
- }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '0db7a9e551be91837cd7dfa148057702db76f1db', name: "list-top" }), h("slot", { key: 'b55088fc93ac7cfb24eee33ffe720de3e401daf5' }), h("slot", { key: '28eeaf664c8f2f78adf9716ab952071659c02fb6', name: "internal-opts" }), h("slot", { key: 'be42f12bb5027f2b8664ab9d275014b6ea37d702', name: "list-bottom" })), h("nano-menu", { key: '28ec7183890b5d266081a7a75179552261ab4401', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
536
+ }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8a2d3160b990c99baeaf4fd9bdd7bb04229d642c', name: "list-top" }), h("slot", { key: '2230e4458be0998d59d18250e1d22188baf2f6b1' }), h("slot", { key: 'fca84cbd01495e4b62ba95c4c07681f506939d3f', name: "internal-opts" }), h("slot", { key: '076fd81c15f5ac6590e5311503262a07f60e8454', name: "list-bottom" })), h("nano-menu", { key: 'd4878bc502b4fcc0de01f67b5065ad017f445f75', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
537
537
  dlist__menu: true,
538
538
  'dlist__menu--open': this.dropwdownOpen,
539
- } }, h("slot", { key: '57a5d980992d0eac7a505f3dae5c8d57fb8d38d8', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '5b2e2489fb2ed53011f465b56defe279a55af455', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
539
+ } }, h("slot", { key: '2ac583af3ac8b24ace627637ab86471999df9465', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '4971780255baf694fcc447756ca02e1115ece871', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
540
540
  }
541
541
  static get watchers() { return {
542
542
  "open": ["openWatcher"],
package/dist/esm/nano-in-page-nav.entry.js CHANGED
@@ -7,7 +7,7 @@ import { H as HasSlotController } from './slot-D31cEKyt.js';
7
7
  import { g as getDirectChildren } from './dom-dlicJTEJ.js';
8
8
  import { f as findScrollParent } from './scroll-1nFw8CNk.js';
9
9
 
10
- 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}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.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}@media (width <= 730px){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 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) span,.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) span.is-active,.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) span:hover,.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.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 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)}";
10
+ 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}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.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}@media (width <= 730px){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 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) span,.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) span.is-active,.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) span:hover,.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.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 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)}";
11
11
 
12
12
  const NanoInPageNav = class {
13
13
  constructor(hostRef) {