@nanoporetech-digital/components 7.6.0 → 7.7.0

package/dist/components/nano-hero.js.map

@@ -1 +1 @@
-{"file":"nano-hero.js","mappings":"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","names":[],"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens/colours';\n\n\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{map.get(colours.$colors, lightblue)};\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n\n  --nano-loader-base: #{map.get(colours.$colors, black)};\n  --nano-loader-tint: #{lighten(map.get(colours.$colors, black), 20%)};\n  --theme-color: #{map.get(colours.$colors, white)};\n  --theme-tint-color: #{map.get(colours.$colors, lightblue)};\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n\n  color: var(--theme-color);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([theme='light']) {\n  --nano-loader-base: #{map.get(colours.$colors, white)};\n  --nano-loader-tint: #{lighten(map.get(colours.$colors, white), 20%)};\n  --theme-color: #{map.get(colours.$colors, black)};\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n\n  color: var(--theme-color);\n\n  .hero__primary-content {\n    --color: #{map.get(colours.$colors, black)};\n  }\n}\n\n.hero {\n  position: relative;\n\n  @container (min-width: 800px) {\n    --quote-size: 3rem;\n  }\n\n  &--rtl {\n    --scrim-direction: 270deg;\n  }\n\n  &--secondary:not(.hero--iconbox) {\n    --scrim-direction: 0deg;\n  }\n\n  &__bg-wrap {\n    overflow: hidden;\n  }\n\n  &__bg-slot {\n    position: absolute;\n    inset: 0;\n  }\n\n  &__ctas {\n    @media (width <= 52em) {\n      display: none;\n    }\n\n    @media (width <= 58em) {\n      margin-block-end: -48px;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    padding-block: 32px 0;\n    padding-inline: 32px;\n    margin-block-end: -64px;\n    position: relative;\n    z-index: 1;\n\n    ::slotted(a.button[slot='secondary-ctas']) {\n      padding-inline: 0.5rem !important;\n      font-size: 0.875rem !important;\n      margin-block: 0 !important;\n      margin-inline: 0.25rem !important;\n    }\n  }\n\n  &__img {\n    display: block;\n\n    --padding: inherit;\n  }\n\n  &__breadcrumbs {\n    display: none;\n    margin-block: 20px 0;\n    margin-inline: 14px;\n    line-height: 14px;\n\n    .hero--breadcrumb & {\n      display: block;\n    }\n\n    @container (min-width: 800px) {\n      margin-block: 0;\n      margin-inline: 50px;\n      max-inline-size: 50%;\n    }\n\n    @container (min-width: 900px) {\n      margin-block: 0;\n      margin-inline: 83px;\n    }\n\n    ::slotted(*[slot='breadcrumb']) {\n      font-size: 0.85rem;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n      font-weight: 600;\n      font-stretch: 125%;\n      display: inline-block;\n      margin-block-end: 16px;\n      position: relative;\n      z-index: 2;\n\n      .hero--hasbg & {\n        text-shadow: 1px 1px rgb(0 0 0 / 15%);\n      }\n    }\n\n    ::slotted(a[slot='breadcrumb']) {\n      color: var(--theme-tint-color) !important;\n      cursor: pointer;\n    }\n\n    ::slotted(.slash[slot='breadcrumb']) {\n      color: var(--theme-color);\n      position: relative;\n      margin-block: 0;\n      margin-inline: 0.5rem;\n      display: inline-block;\n    }\n  }\n\n  &__scrim {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    background:\n      linear-gradient(\n        var(--scrim-direction),\n        rgb(var(--scrim-color) / var(--scrim-opacity-from)) 0%,\n        rgb(var(--scrim-color) / var(--scrim-opacity-to)) 100%\n      );\n\n    .hero--scrim & {\n      background: none;\n    }\n  }\n\n  &__content {\n    max-inline-size: 1440px;\n    display: block;\n\n    --grid-row-gap: 0;\n\n    margin-block: 0;\n    margin-inline: auto;\n    position: relative;\n\n    @container (min-width: 800px) {\n      margin-block: 50px 0 !important;\n      max-inline-size: 1540px !important;\n    }\n\n    @container (min-width: 900px) {\n      margin-block: 83px 0 !important;\n      max-inline-size: 1606px !important;\n    }\n  }\n\n  &__primary {\n    margin: 16px;\n\n    .hero--breadcrumb & {\n      margin-block: 0;\n      margin-inline: 16px;\n    }\n\n    .hero--backbtn & {\n      margin-inline-start: 0;\n    }\n\n    ::slotted(nano-icon-button[slot='back-btn']) {\n      font-size: 2rem;\n    }\n\n    @container (min-width: 800px) {\n      margin-block: 0 50px !important;\n      margin-inline: 50px 0 !important;\n\n      ::slotted(nano-icon-button[slot='back-btn']) {\n        margin-block: 0 !important;\n        margin-inline: -3rem 0 !important;\n      }\n    }\n\n    @container (min-width: 900px) {\n      margin-block: 0 83px !important;\n      margin-inline: 83px 0 !important;\n    }\n  }\n\n  &__primary-content {\n    max-inline-size: 45rem;\n\n    --color: #fff;\n\n    display: flex;\n\n    .hero--backbtn & {\n      > div {\n        padding-block: 10px 0;\n        padding-inline: 0;\n      }\n    }\n\n    ::slotted(h1[slot='primary-content']) {\n      line-height: 26px !important;\n      margin-block: 0 18px !important;\n      font-size: 2rem !important;\n    }\n\n    @container (min-width: 800px) {\n      ::slotted(h1[slot='primary-content']) {\n        line-height: 31px !important;\n        margin-block-end: 30px !important;\n      }\n\n      ::slotted(.button[slot='primary-content']) {\n        margin-block-start: 20px !important;\n      }\n    }\n  }\n\n  &__secondary {\n    display: none;\n    block-size: 100%;\n    padding-block: 0 20px;\n    padding-inline: 14px;\n\n    .hero--secondary & {\n      display: flex;\n      align-items: center;\n    }\n\n    @container (min-width: 800px) {\n      padding-block: 0 50px;\n      padding-inline: 50px;\n      justify-content: flex-end;\n    }\n\n    @container (min-width: 900px) {\n      padding-block: 0 83px;\n      padding-inline: 83px;\n    }\n  }\n\n  &__icon-box {\n    background: rgb(0 0 0 / 70%);\n    padding: 24px;\n    inline-size: 100%;\n    margin-block-end: auto;\n    display: flex;\n    flex-direction: column;\n    color: white;\n\n    @container (min-width: 800px) {\n      max-inline-size: 410px;\n      flex: 0 1 410px;\n    }\n\n    ::slotted([slot='icon-box-item']) {\n      --nano-color-base: var(--theme-tint-color);\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n\n      display: flex;\n      align-items: center;\n      font-size: 0.8125rem;\n      margin-block-end: 20px;\n    }\n\n    ::slotted(.last[slot='icon-box-item']) {\n      margin-block-end: 0;\n    }\n  }\n\n  &__quote-content {\n    margin-block-start: auto;\n    text-align: center;\n    inline-size: 100%;\n\n    @container (min-width: 800px) {\n      max-inline-size: 500px;\n      flex: 0 1 500px;\n      text-align: initial;\n    }\n  }\n\n  &__quote {\n    &::before,\n    &::after {\n      content: '\"';\n      font-size: var(--quote-size);\n      font-weight: 600;\n      font-style: italic;\n      line-height: 0;\n      color: #abb6b8;\n      display: inline;\n      position: relative;\n    }\n\n    ::slotted([slot='quote']) {\n      font-size: var(--quote-size);\n      font-weight: 200;\n      display: inline;\n    }\n  }\n\n  &__quote-author {\n    text-align: end;\n    font-size: 1rem;\n    opacity: 0.8;\n  }\n\n  &--sub {\n    .hero__content {\n      @container (min-width: 800px) {\n        margin-block-start: 40px;\n\n        .hero__primary {\n          margin-block: 0 40px;\n          margin-inline: 50px 0;\n        }\n\n        .hero__secondary {\n          padding-block: 0 50px;\n          padding-inline: 40px 50px;\n        }\n\n        ::slotted(.button[slot='primary-content']) {\n          margin-block-start: 8px !important;\n        }\n\n        ::slotted(h1[slot='primary-content']) {\n          margin-block-end: 18px !important;\n        }\n      }\n\n      @container (min-width: 900px) {\n        .hero__primary {\n          margin-block: 0 40px;\n          margin-inline: 83px 0;\n        }\n\n        .hero__secondary {\n          padding-block: 0 83px;\n          padding-inline: 40px 83px;\n        }\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  VNode,\n  State,\n  Element,\n  Watch,\n  Host,\n} from '@stencil/core';\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n  tag: 'nano-hero',\n  styleUrl: 'hero.scss',\n  shadow: true,\n})\nexport class Hero implements ComponentInterface {\n  private mo?: MutationObserver;\n\n  @Element() host: HTMLNanoHeroElement;\n\n  @State() hasIconBox: boolean;\n  @State() hasScrim: boolean;\n  @State() hasSecondaryContent: boolean;\n  @State() hasQuote: boolean;\n  @State() hasBg: boolean;\n  @State() hasBackBtn: boolean;\n  @State() hasCtas: boolean;\n  @State() breadCrumbs: Element[];\n  @Watch('breadCrumbs')\n  breadCrumbChange() {\n    // safari doesn't support ::slotted()::after ... so this :/\n    this.breadCrumbs\n      .filter(\n        (crumb) =>\n          crumb.tagName === 'A' &&\n          !crumb.nextElementSibling.classList.contains('slash')\n      )\n      .forEach((crumb) => {\n        crumb.insertAdjacentHTML(\n          'afterend',\n          '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n        );\n      });\n  }\n  @State() iconBoxItems: Element[];\n  @Watch('iconBoxItems')\n  iconBoxItemChange() {\n    this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n    if (\n      this.iconBoxItems[this.iconBoxItems.length - 1] &&\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList\n    )\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n  }\n\n  /** src for background image. For more control use the `background` slot instead. */\n  @Prop() imgSrc?: string;\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() imgSrcSet?: string = null;\n\n  /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n  @Prop() largeScreenBP: number = 900;\n\n  /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n  @Prop() theme: 'dark' | 'light' = 'dark';\n\n  /** Set the content structure level of the hero. Defaults to 'top'  */\n  @Prop() level: 'top' | 'sub' = 'top';\n\n  private slotChangeObserver() {\n    if (!window['MutationObserver']) return;\n\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true });\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n    this.iconBoxItems = Array.from(\n      this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n    );\n    this.hasIconBox =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.iconBoxItems.length;\n    this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n    this.breadCrumbs = Array.from(\n      this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n    );\n    this.hasSecondaryContent =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.host.querySelector('[slot=\"quote\"]') ||\n      !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n      !!this.host.querySelector('[slot=\"secondary-content\"]');\n    this.hasBg =\n      !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n    this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n    this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n  }\n\n  // Component lifecycle\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private HeroContent = (): VNode[] => {\n    return [\n      !this.hasIconBox && this.hasCtas ? (\n        <div class=\"hero__ctas\">\n          <slot name=\"secondary-ctas\" />\n        </div>\n      ) : (\n        ''\n      ),\n      <div class=\"hero__scrim\">\n        <slot name=\"scrim\" />\n      </div>,\n      <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n        <div grid-states=\"xl-col-span-2\">\n          <div class=\"hero__breadcrumbs\">\n            <slot name=\"breadcrumb\" />\n          </div>\n        </div>\n        <div\n          grid-states={\n            this.hasSecondaryContent\n              ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n              : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n          }\n        >\n          <div class=\"hero__primary\">\n            <div class=\"hero__primary-content\">\n              <slot name=\"back-btn\" />\n              <div>\n                <slot name=\"primary-content\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        {this.hasSecondaryContent && (\n          <div grid-states=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n            <div class=\"hero__secondary\">\n              <slot name=\"secondary-content\" />\n              {this.hasIconBox && (\n                <div class=\"hero__icon-box\">\n                  <slot name=\"icon-box\" />\n                  <slot name=\"icon-box-item\" />\n                </div>\n              )}\n              {this.hasQuote && (\n                <div class=\"hero__quote-content\">\n                  <span class=\"hero__quote\">\n                    <slot name=\"quote\" />\n                  </span>\n                  <div class=\"hero__quote-author\">\n                    <slot name=\"quote-author\" />\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </nano-grid>,\n    ];\n  };\n\n  render() {\n    const rtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n    return (\n      <Host>\n        <div\n          class={{\n            hero: true,\n            'hero--light': this.theme === 'light',\n            'hero--secondary': this.hasSecondaryContent,\n            'hero--iconbox': this.hasIconBox,\n            'hero--rtl': rtl,\n            'hero--scrim': this.hasScrim,\n            'hero--breadcrumb': !!this.breadCrumbs.length,\n            'hero--hasbg': this.hasBg,\n            'hero--backbtn': this.hasBackBtn,\n            'hero--sub': this.level === 'sub',\n          }}\n        >\n          <div class=\"hero__bg-wrap\">\n            {!!this.imgSrc && (\n              <nano-img\n                class=\"hero__img\"\n                lazy={false}\n                background\n                srcSet={this.imgSrcSet}\n                src={this.imgSrc}\n              >\n                <this.HeroContent />\n              </nano-img>\n            )}\n            {!this.imgSrc && [\n              <div class=\"hero__bg-slot\">\n                <slot name=\"background\" />\n              </div>,\n              <this.HeroContent />,\n            ]}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-hero.js","mappings":"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","names":[],"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens/colours';\n\n\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{map.get(colours.$colors, lightblue)};\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n\n  --nano-loader-base: #{map.get(colours.$colors, black)};\n  --nano-loader-tint: #{lighten(map.get(colours.$colors, black), 20%)};\n  --theme-color: #{map.get(colours.$colors, white)};\n  --theme-tint-color: #{map.get(colours.$colors, lightblue)};\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n\n  color: var(--theme-color);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([theme='light']) {\n  --nano-loader-base: #{map.get(colours.$colors, white)};\n  --nano-loader-tint: #{lighten(map.get(colours.$colors, white), 20%)};\n  --theme-color: #{map.get(colours.$colors, black)};\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n\n  color: var(--theme-color);\n\n  .hero__primary-content {\n    --color: #{map.get(colours.$colors, black)};\n  }\n}\n\n.hero {\n  position: relative;\n\n  @container (min-width: 800px) {\n    --quote-size: 3rem;\n  }\n\n  &--rtl {\n    --scrim-direction: 270deg;\n  }\n\n  &--secondary:not(.hero--iconbox) {\n    --scrim-direction: 0deg;\n  }\n\n  &__bg-wrap {\n    overflow: hidden;\n  }\n\n  &__bg-slot {\n    position: absolute;\n    inset: 0;\n  }\n\n  &__ctas {\n    @media (width <= 52em) {\n      display: none;\n    }\n\n    @media (width <= 58em) {\n      margin-block-end: -48px;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    padding-block: 32px 0;\n    padding-inline: 32px;\n    margin-block-end: -64px;\n    position: relative;\n    z-index: 1;\n\n    ::slotted(a.button[slot='secondary-ctas']) {\n      padding-inline: 0.5rem !important;\n      font-size: 0.875rem !important;\n      margin-block: 0 !important;\n      margin-inline: 0.25rem !important;\n    }\n  }\n\n  &__img {\n    display: block;\n\n    --padding: inherit;\n  }\n\n  &__breadcrumbs {\n    display: none;\n    margin-block: 20px 0;\n    margin-inline: 14px;\n    line-height: 14px;\n\n    .hero--breadcrumb & {\n      display: block;\n    }\n\n    @container (min-width: 800px) {\n      margin-block: 0;\n      margin-inline: 50px;\n      max-inline-size: 50%;\n    }\n\n    @container (min-width: 900px) {\n      margin-block: 0;\n      margin-inline: 83px;\n    }\n\n    ::slotted(*[slot='breadcrumb']) {\n      font-size: 0.85rem;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n      font-weight: 600;\n      font-stretch: 125%;\n      display: inline-block;\n      margin-block-end: 16px;\n      position: relative;\n      z-index: 2;\n\n      .hero--hasbg & {\n        text-shadow: 1px 1px rgb(0 0 0 / 15%);\n      }\n    }\n\n    ::slotted(a[slot='breadcrumb']) {\n      color: var(--theme-tint-color) !important;\n      cursor: pointer;\n    }\n\n    ::slotted(.slash[slot='breadcrumb']) {\n      color: var(--theme-color);\n      position: relative;\n      margin-block: 0;\n      margin-inline: 0.5rem;\n      display: inline-block;\n    }\n  }\n\n  &__scrim {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    background:\n      linear-gradient(\n        var(--scrim-direction),\n        rgb(var(--scrim-color) / var(--scrim-opacity-from)) 0%,\n        rgb(var(--scrim-color) / var(--scrim-opacity-to)) 100%\n      );\n\n    .hero--scrim & {\n      background: none;\n    }\n  }\n\n  &__content {\n    max-inline-size: 1440px;\n    display: block;\n\n    --grid-row-gap: 0;\n\n    margin-block: 0;\n    margin-inline: auto;\n    position: relative;\n\n    @container (min-width: 800px) {\n      margin-block: 50px 0 !important;\n      max-inline-size: 1540px !important;\n    }\n\n    @container (min-width: 900px) {\n      margin-block: 83px 0 !important;\n      max-inline-size: 1606px !important;\n    }\n  }\n\n  &__primary {\n    margin: 16px;\n\n    .hero--breadcrumb & {\n      margin-block: 0;\n      margin-inline: 16px;\n    }\n\n    .hero--backbtn & {\n      margin-inline-start: 0;\n    }\n\n    ::slotted(.nano-icon-button[slot='back-btn']) {\n      font-size: 2rem;\n    }\n\n    @container (min-width: 800px) {\n      margin-block: 0 50px !important;\n      margin-inline: 50px 0 !important;\n\n      ::slotted(.nano-icon-button[slot='back-btn']) {\n        margin-block: 0 !important;\n        margin-inline: -3rem 0 !important;\n      }\n    }\n\n    @container (min-width: 900px) {\n      margin-block: 0 83px !important;\n      margin-inline: 83px 0 !important;\n    }\n  }\n\n  &__primary-content {\n    max-inline-size: 45rem;\n\n    --color: #fff;\n\n    display: flex;\n\n    .hero--backbtn & {\n      > div {\n        padding-block: 10px 0;\n        padding-inline: 0;\n      }\n    }\n\n    ::slotted(h1[slot='primary-content']) {\n      line-height: 26px !important;\n      margin-block: 0 18px !important;\n      font-size: 2rem !important;\n    }\n\n    @container (min-width: 800px) {\n      ::slotted(h1[slot='primary-content']) {\n        line-height: 31px !important;\n        margin-block-end: 30px !important;\n      }\n\n      ::slotted(.button[slot='primary-content']) {\n        margin-block-start: 20px !important;\n      }\n    }\n  }\n\n  &__secondary {\n    display: none;\n    block-size: 100%;\n    padding-block: 0 20px;\n    padding-inline: 14px;\n\n    .hero--secondary & {\n      display: flex;\n      align-items: center;\n    }\n\n    @container (min-width: 800px) {\n      padding-block: 0 50px;\n      padding-inline: 50px;\n      justify-content: flex-end;\n    }\n\n    @container (min-width: 900px) {\n      padding-block: 0 83px;\n      padding-inline: 83px;\n    }\n  }\n\n  &__icon-box {\n    background: rgb(0 0 0 / 70%);\n    padding: 24px;\n    inline-size: 100%;\n    margin-block-end: auto;\n    display: flex;\n    flex-direction: column;\n    color: white;\n\n    @container (min-width: 800px) {\n      max-inline-size: 410px;\n      flex: 0 1 410px;\n    }\n\n    ::slotted([slot='icon-box-item']) {\n      --nano-color-base: var(--theme-tint-color);\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n\n      display: flex;\n      align-items: center;\n      font-size: 0.8125rem;\n      margin-block-end: 20px;\n    }\n\n    ::slotted(.last[slot='icon-box-item']) {\n      margin-block-end: 0;\n    }\n  }\n\n  &__quote-content {\n    margin-block-start: auto;\n    text-align: center;\n    inline-size: 100%;\n\n    @container (min-width: 800px) {\n      max-inline-size: 500px;\n      flex: 0 1 500px;\n      text-align: initial;\n    }\n  }\n\n  &__quote {\n    &::before,\n    &::after {\n      content: '\"';\n      font-size: var(--quote-size);\n      font-weight: 600;\n      font-style: italic;\n      line-height: 0;\n      color: #abb6b8;\n      display: inline;\n      position: relative;\n    }\n\n    ::slotted([slot='quote']) {\n      font-size: var(--quote-size);\n      font-weight: 200;\n      display: inline;\n    }\n  }\n\n  &__quote-author {\n    text-align: end;\n    font-size: 1rem;\n    opacity: 0.8;\n  }\n\n  &--sub {\n    .hero__content {\n      @container (min-width: 800px) {\n        margin-block-start: 40px;\n\n        .hero__primary {\n          margin-block: 0 40px;\n          margin-inline: 50px 0;\n        }\n\n        .hero__secondary {\n          padding-block: 0 50px;\n          padding-inline: 40px 50px;\n        }\n\n        ::slotted(.button[slot='primary-content']) {\n          margin-block-start: 8px !important;\n        }\n\n        ::slotted(h1[slot='primary-content']) {\n          margin-block-end: 18px !important;\n        }\n      }\n\n      @container (min-width: 900px) {\n        .hero__primary {\n          margin-block: 0 40px;\n          margin-inline: 83px 0;\n        }\n\n        .hero__secondary {\n          padding-block: 0 83px;\n          padding-inline: 40px 83px;\n        }\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  ComponentInterface,\n  VNode,\n  State,\n  Element,\n  Watch,\n  Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n  tag: 'nano-hero',\n  styleUrl: 'hero.scss',\n  shadow: true,\n})\nexport class Hero implements ComponentInterface {\n  private mo?: MutationObserver;\n\n  @Element() host: HTMLNanoHeroElement;\n\n  @State() hasIconBox: boolean;\n  @State() hasScrim: boolean;\n  @State() hasSecondaryContent: boolean;\n  @State() hasQuote: boolean;\n  @State() hasBg: boolean;\n  @State() hasBackBtn: boolean;\n  @State() hasCtas: boolean;\n  @State() breadCrumbs: Element[];\n  @Watch('breadCrumbs')\n  breadCrumbChange() {\n    // safari doesn't support ::slotted()::after ... so this :/\n    this.breadCrumbs\n      .filter(\n        (crumb) =>\n          crumb.tagName === 'A' &&\n          !crumb.nextElementSibling.classList.contains('slash')\n      )\n      .forEach((crumb) => {\n        crumb.insertAdjacentHTML(\n          'afterend',\n          '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n        );\n      });\n  }\n  @State() iconBoxItems: Element[];\n  @Watch('iconBoxItems')\n  iconBoxItemChange() {\n    this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n    if (\n      this.iconBoxItems[this.iconBoxItems.length - 1] &&\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList\n    )\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n  }\n\n  /** src for background image. For more control use the `background` slot instead. */\n  @Prop() imgSrc?: string;\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() imgSrcSet?: string = null;\n\n  /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n  @Prop() largeScreenBP: number = 900;\n\n  /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n  @Prop() theme: 'dark' | 'light' = 'dark';\n\n  /** Set the content structure level of the hero. Defaults to 'top'  */\n  @Prop() level: 'top' | 'sub' = 'top';\n\n  private slotChangeObserver() {\n    if (!window['MutationObserver']) return;\n\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true });\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n    this.iconBoxItems = Array.from(\n      this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n    );\n    this.hasIconBox =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.iconBoxItems.length;\n    this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n    this.breadCrumbs = Array.from(\n      this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n    );\n    this.hasSecondaryContent =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.host.querySelector('[slot=\"quote\"]') ||\n      !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n      !!this.host.querySelector('[slot=\"secondary-content\"]');\n    this.hasBg =\n      !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n    this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n    this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n  }\n\n  // Component lifecycle\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private HeroContent = (): VNode[] => {\n    return [\n      !this.hasIconBox && this.hasCtas ? (\n        <div class=\"hero__ctas\">\n          <slot name=\"secondary-ctas\" />\n        </div>\n      ) : (\n        ''\n      ),\n      <div class=\"hero__scrim\">\n        <slot name=\"scrim\" />\n      </div>,\n      <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n        <div grid-states=\"xl-col-span-2\">\n          <div class=\"hero__breadcrumbs\">\n            <slot name=\"breadcrumb\" />\n          </div>\n        </div>\n        <div\n          grid-states={\n            this.hasSecondaryContent\n              ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n              : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n          }\n        >\n          <div class=\"hero__primary\">\n            <div class=\"hero__primary-content\">\n              <slot name=\"back-btn\" />\n              <div>\n                <slot name=\"primary-content\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        {this.hasSecondaryContent && (\n          <div grid-states=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n            <div class=\"hero__secondary\">\n              <slot name=\"secondary-content\" />\n              {this.hasIconBox && (\n                <div class=\"hero__icon-box\">\n                  <slot name=\"icon-box\" />\n                  <slot name=\"icon-box-item\" />\n                </div>\n              )}\n              {this.hasQuote && (\n                <div class=\"hero__quote-content\">\n                  <span class=\"hero__quote\">\n                    <slot name=\"quote\" />\n                  </span>\n                  <div class=\"hero__quote-author\">\n                    <slot name=\"quote-author\" />\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </nano-grid>,\n    ];\n  };\n\n  render() {\n    const rtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n    return (\n      <Host class=\"nano-hero\">\n        <div\n          class={{\n            hero: true,\n            'hero--light': this.theme === 'light',\n            'hero--secondary': this.hasSecondaryContent,\n            'hero--iconbox': this.hasIconBox,\n            'hero--rtl': rtl,\n            'hero--scrim': this.hasScrim,\n            'hero--breadcrumb': !!this.breadCrumbs.length,\n            'hero--hasbg': this.hasBg,\n            'hero--backbtn': this.hasBackBtn,\n            'hero--sub': this.level === 'sub',\n          }}\n        >\n          <div class=\"hero__bg-wrap\">\n            {!!this.imgSrc && (\n              <nano-img\n                class=\"hero__img\"\n                lazy={false}\n                background\n                srcSet={this.imgSrcSet}\n                src={this.imgSrc}\n              >\n                <this.HeroContent />\n              </nano-img>\n            )}\n            {!this.imgSrc && [\n              <div class=\"hero__bg-slot\">\n                <slot name=\"background\" />\n              </div>,\n              <this.HeroContent />,\n            ]}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-intersection-observe.js

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
 import { f as findScrollParent } from './scroll-parent.js';
 
 const IntersectionObserve = /*@__PURE__*/ proxyCustomElement(class IntersectionObserve extends HTMLElement {
@@ -138,7 +139,7 @@ const IntersectionObserve = /*@__PURE__*/ proxyCustomElement(class IntersectionO
         this.root = this._root = undefined;
     }
     render() {
-        return (h("slot", { key: '75dfdac47190d025c8682bbc2756270130bdbc00', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange }));
+        return (h(Host, { key: 'a6ac2318115344404b0d91677eac05466c547939', class: "nano-intersection-observe" }, h("slot", { key: 'a215889a8c84c513aabea882ac3e3c27879a435f', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
     }
     static get watchers() { return {
         "root": ["handleRootChange"],

package/dist/components/nano-intersection-observe.js.map

@@ -1 +1 @@
-{"file":"nano-intersection-observe.js","mappings":";;;;;;MAsBa,mBAAmB;;;;;;;;;IACtB,EAAE,CAAuB;IACzB,KAAK,CAAqB;IAC1B,UAAU,CAAoB;IAE7B,WAAW,CAAkB;IAEtC,IAAI,eAAe;QACjB,MAAM,IAAI,GAA6B,EAAE,CAAC;QAE1C,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;QACvC,IAAI,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QACvD,IAAI,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC;QAErD,OAAO,IAAI,CAAC;KACb;IAED,IAAI,QAAQ;QACV,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;QAE3D,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE;YACxB,MAAM,KAAK,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC;YACnC,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC;gBAAE,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;gBAClE,OAAO,EAAE,CAAC;SAChB,CAAC,CAAC;KACJ;;;;IAMO,IAAI,GAAyC,MAAM,CAAC;IAG5D,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;YACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,OAAO;SACR;QAED,IAAI,OAAO,CAAC;QAEZ,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;;YAExB,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACvC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;YAC/B,OAAO,GAAG,SAAS,CAAC;SACrB;aAAM;;YAEL,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;SACrB;;QAGD,IAAI,OAAO,KAAK,QAAQ,CAAC,eAAe;YAAE,OAAO,GAAG,SAAS,CAAC;;QAE9D,IAAI,OAAO,KAAK,IAAI,CAAC,KAAK;YAAE,OAAO;;QAGnC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;QACrB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;;;;;IAMO,UAAU,CAAU;;;;;;;;IASpB,SAAS,CAAU;IAG3B,qBAAqB;QACnB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,OAAO;SACR;QAED,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS;iBAC7B,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;YACnC,OAAO;SACR;QAED,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC1C;;IAGQ,sBAAsB,CAA2C;;IAGjE,gBAAgB,CAA2C;;IAG3D,mBAAmB,CAA2C;IAE/D,UAAU,GAAiC,CAAC,OAAO;QACzD,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK;YACpB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxC,IAAI,KAAK,CAAC,cAAc;gBAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5D,IAAI,CAAC,KAAK,CAAC,cAAc;gBAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjE,CAAC,CAAC;KACJ,CAAC;IAEM,gBAAgB,GAAG;QACzB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd,CAAC;IAGF,KAAK;QACH,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM;YAAE,OAAO;QACtE,IAAI,IAAI,CAAC,EAAE;YAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;QAE7B,MAAM,EAAE,IAAI,IAAI,CAAC,EAAE,GAAG,IAAI,oBAAoB,CAC5C,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,eAAe,CACrB,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,EAAE;YACxB,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;SAChB,CAAC,CAAC;KACJ;IAEO,QAAQ;QACd,IAAI,CAAC,IAAI,CAAC,EAAE;YAAE,OAAO;QAErB,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;QACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;KACrB;IAED,iBAAiB;QACf,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;KACpC;IAED,MAAM;QACJ,QACE,6DACE,GAAG,EAAE,CAAC,IAAI,MAAM,IAAI,CAAC,WAAW,GAAG,IAAuB,CAAC,EAC3D,YAAY,EAAE,IAAI,CAAC,gBAAgB,GACnC,EACF;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/intersection-observe/intersection-observe.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  State,\n} from '@stencil/core';\nimport { findScrollParent } from '../../utils/scroll-parent';\n\n/**\n * A thin, declarative interface to the IntersectionObserver API.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-intersection-observe',\n  styles: `nano-intersection-observe { display: contents }`,\n  shadow: true,\n})\nexport class IntersectionObserve implements ComponentInterface {\n  private io: IntersectionObserver;\n  private _root: Element | Document;\n  private _threshold: number | number[];\n\n  @State() defaultSlot: HTMLSlotElement;\n\n  get observerOptions() {\n    const opts: IntersectionObserverInit = {};\n\n    if (this._root) opts.root = this._root;\n    if (this.rootMargin) opts.rootMargin = this.rootMargin;\n    if (this.threshold) opts.threshold = this._threshold;\n\n    return opts;\n  }\n\n  get elements(): Element[] | undefined {\n    const slotted = this.defaultSlot?.assignedElements() || [];\n\n    return slotted.flatMap((el) => {\n      const style = getComputedStyle(el);\n      if (style.display.includes('contents')) return Array.from(el.children);\n      else return el;\n    });\n  }\n\n  @Element() host: HTMLNanoIntersectionObserveElement;\n\n  /** The element that is used as the viewport for checking visibility of the target. Must be an ancestor of the target.\n   * Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`. */\n  @Prop() root: globalThis.Element | 'root' | 'auto' = 'auto';\n\n  @Watch('root')\n  handleRootChange() {\n    if (!this.root) {\n      this._root = undefined;\n      this.removeIO();\n      return;\n    }\n\n    let newRoot;\n\n    if (this.root === 'auto') {\n      // try to find nearest scrolling parent\n      newRoot = findScrollParent(this.host);\n    } else if (this.root === 'root') {\n      newRoot = undefined;\n    } else {\n      // root is set explicitly\n      newRoot = this.root;\n    }\n\n    // if it's the document - unset as that's IO's default\n    if (newRoot === document.documentElement) newRoot = undefined;\n    // if new root is what we already have - ignore\n    if (newRoot === this._root) return;\n\n    // cache and setup io\n    this._root = newRoot;\n    this.addIO();\n  }\n\n  /**\n   * Margin around the root. Can be similar to CSS margins property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n   * The values can be percentages. This set of values serves to grow or shrink each side of the root element's\n   * bounding box before computing intersections. Defaults to zeros. */\n  @Prop() rootMargin?: string;\n\n  /**\n   * Indicate at what percentage of the target's visibility the observer's callback should be executed.\n   * If you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'.\n   * If you want the callback to run every time visibility passes another '25%',\n   * you would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'.\n   * A value of '1.0' means that the threshold isn't considered passed until every pixel is visible.\n   */\n  @Prop() threshold?: string;\n\n  @Watch('threshold')\n  handleThresholdChange() {\n    if (!this.threshold) {\n      this._threshold = undefined;\n      return;\n    }\n\n    if (this.threshold.includes(',')) {\n      this._threshold = this.threshold\n        .split(',')\n        .map((numStr) => Number(numStr));\n      return;\n    }\n\n    this._threshold = Number(this.threshold);\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoIntersectionChange!: EventEmitter<IntersectionObserverEntry>;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoNotIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n  private ioCallback: IntersectionObserverCallback = (entries) => {\n    entries.forEach((entry) => {\n      this.nanoIntersectionChange.emit(entry);\n      if (entry.isIntersecting) this.nanoIntersecting.emit(entry);\n      if (!entry.isIntersecting) this.nanoNotIntersecting.emit(entry);\n    });\n  };\n\n  private handleSlotChange = () => {\n    this.addIO();\n  };\n\n  @Watch('defaultSlot')\n  addIO() {\n    if (!window['IntersectionObserver'] || !this.elements?.length) return;\n    if (this.io) this.removeIO();\n\n    const io = (this.io = new IntersectionObserver(\n      this.ioCallback,\n      this.observerOptions\n    ));\n    this.elements?.forEach((el) => {\n      io.observe(el);\n    });\n  }\n\n  private removeIO() {\n    if (!this.io) return;\n\n    this.io.disconnect();\n    this.io = undefined;\n  }\n\n  connectedCallback(): void {\n    this.handleThresholdChange();\n    this.handleRootChange();\n  }\n\n  disconnectedCallback(): void {\n    this.removeIO();\n    this.root = this._root = undefined;\n  }\n\n  render() {\n    return (\n      <slot\n        ref={(slot) => (this.defaultSlot = slot as HTMLSlotElement)}\n        onSlotchange={this.handleSlotChange}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-intersection-observe.js","mappings":"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","names":[],"sources":["src/components/intersection-observe/intersection-observe.tsx"],"sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  State,\n  Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { findScrollParent } from '../../utils/scroll-parent';\n\n/**\n * A thin, declarative interface to the IntersectionObserver API.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-intersection-observe',\n  styles: `nano-intersection-observe { display: contents }`,\n  shadow: true,\n})\nexport class IntersectionObserve implements ComponentInterface {\n  private io: IntersectionObserver;\n  private _root: Element | Document;\n  private _threshold: number | number[];\n\n  @State() defaultSlot: HTMLSlotElement;\n\n  get observerOptions() {\n    const opts: IntersectionObserverInit = {};\n\n    if (this._root) opts.root = this._root;\n    if (this.rootMargin) opts.rootMargin = this.rootMargin;\n    if (this.threshold) opts.threshold = this._threshold;\n\n    return opts;\n  }\n\n  get elements(): Element[] | undefined {\n    const slotted = this.defaultSlot?.assignedElements() || [];\n\n    return slotted.flatMap((el) => {\n      const style = getComputedStyle(el);\n      if (style.display.includes('contents')) return Array.from(el.children);\n      else return el;\n    });\n  }\n\n  @Element() host: HTMLNanoIntersectionObserveElement;\n\n  /** The element that is used as the viewport for checking visibility of the target. Must be an ancestor of the target.\n   * Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`. */\n  @Prop() root: globalThis.Element | 'root' | 'auto' = 'auto';\n\n  @Watch('root')\n  handleRootChange() {\n    if (!this.root) {\n      this._root = undefined;\n      this.removeIO();\n      return;\n    }\n\n    let newRoot;\n\n    if (this.root === 'auto') {\n      // try to find nearest scrolling parent\n      newRoot = findScrollParent(this.host);\n    } else if (this.root === 'root') {\n      newRoot = undefined;\n    } else {\n      // root is set explicitly\n      newRoot = this.root;\n    }\n\n    // if it's the document - unset as that's IO's default\n    if (newRoot === document.documentElement) newRoot = undefined;\n    // if new root is what we already have - ignore\n    if (newRoot === this._root) return;\n\n    // cache and setup io\n    this._root = newRoot;\n    this.addIO();\n  }\n\n  /**\n   * Margin around the root. Can be similar to CSS margins property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n   * The values can be percentages. This set of values serves to grow or shrink each side of the root element's\n   * bounding box before computing intersections. Defaults to zeros. */\n  @Prop() rootMargin?: string;\n\n  /**\n   * Indicate at what percentage of the target's visibility the observer's callback should be executed.\n   * If you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'.\n   * If you want the callback to run every time visibility passes another '25%',\n   * you would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'.\n   * A value of '1.0' means that the threshold isn't considered passed until every pixel is visible.\n   */\n  @Prop() threshold?: string;\n\n  @Watch('threshold')\n  handleThresholdChange() {\n    if (!this.threshold) {\n      this._threshold = undefined;\n      return;\n    }\n\n    if (this.threshold.includes(',')) {\n      this._threshold = this.threshold\n        .split(',')\n        .map((numStr) => Number(numStr));\n      return;\n    }\n\n    this._threshold = Number(this.threshold);\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoIntersectionChange!: EventEmitter<IntersectionObserverEntry>;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoNotIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n  private ioCallback: IntersectionObserverCallback = (entries) => {\n    entries.forEach((entry) => {\n      this.nanoIntersectionChange.emit(entry);\n      if (entry.isIntersecting) this.nanoIntersecting.emit(entry);\n      if (!entry.isIntersecting) this.nanoNotIntersecting.emit(entry);\n    });\n  };\n\n  private handleSlotChange = () => {\n    this.addIO();\n  };\n\n  @Watch('defaultSlot')\n  addIO() {\n    if (!window['IntersectionObserver'] || !this.elements?.length) return;\n    if (this.io) this.removeIO();\n\n    const io = (this.io = new IntersectionObserver(\n      this.ioCallback,\n      this.observerOptions\n    ));\n    this.elements?.forEach((el) => {\n      io.observe(el);\n    });\n  }\n\n  private removeIO() {\n    if (!this.io) return;\n\n    this.io.disconnect();\n    this.io = undefined;\n  }\n\n  connectedCallback(): void {\n    this.handleThresholdChange();\n    this.handleRootChange();\n  }\n\n  disconnectedCallback(): void {\n    this.removeIO();\n    this.root = this._root = undefined;\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-intersection-observe\">\n        <slot\n          ref={(slot) => (this.defaultSlot = slot as HTMLSlotElement)}\n          onSlotchange={this.handleSlotChange}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-menu-drawer.js

@@ -1,11 +1,12 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { proxyCustomElement, HTMLElement, writeTask, Build, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, writeTask, Build, Host } from '@stencil/core/internal/client';
 import { c as closestElement } from './dom.js';
+import { t as transformTag, h } from './renderer.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const menuDrawerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:79px;--bg-color:#001a21;--bg-color-hover:rgb(28 62 72 / 80%);--bg-color-selected:#274048;--bg-color-focus:rgb(28 62 72 / 80%);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28 62 72);font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;box-sizing:border-box}:host *,:host *::before,:host *::after{box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{padding-block-start:var(--global-nav-height);margin-block-start:calc(var(--global-nav-height) * -1)}.container{inset-inline-end:auto;flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;inline-size:calc(var(--padding-end, 1em) * 2 + var(--icon-size));block-size:100%}:host(.open) .container{inline-size:auto}:host(:not(.loading)) .container{transition:inline-size 0.3s ease}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;max-inline-size:inherit;background:var(--bg-color);color:#fff;position:sticky;font-size:var(--icon-size);line-height:1;display:flex;min-block-size:calc(100vh - 79px);min-block-size:calc(var(--vh, 1vh) * 100 - 79px);z-index:1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-color);flex:1}.content::after{content:\"\";position:absolute;inset-block-start:0;inset-inline:0;background:var(--bg-color);z-index:-1;block-size:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);margin-block:var(--padding-top) var(--padding-bottom);margin-inline:calc(var(--padding-start) / 2) 0;border-radius:4px;padding-block:6px;padding-inline:5px;display:flex;align-content:center;inline-size:30px;flex:0 0 auto}.collapse-btn nano-icon{font-size:var(--icon-size);transition:0.2s transform ease-in-out;transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn nano-icon{transform:translateZ(0) rotate(180deg)}.foot{margin-block-start:auto}.measure-ele{block-size:1px}";
+const menuDrawerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:79px;--bg-color:#001a21;--bg-color-hover:rgb(28 62 72 / 80%);--bg-color-selected:#274048;--bg-color-focus:rgb(28 62 72 / 80%);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28 62 72);font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(.nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;box-sizing:border-box}:host *,:host *::before,:host *::after{box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{padding-block-start:var(--global-nav-height);margin-block-start:calc(var(--global-nav-height) * -1)}.container{inset-inline-end:auto;flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;inline-size:calc(var(--padding-end, 1em) * 2 + var(--icon-size));block-size:100%}:host(.open) .container{inline-size:auto}:host(:not(.loading)) .container{transition:inline-size 0.3s ease}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;max-inline-size:inherit;background:var(--bg-color);color:#fff;position:sticky;font-size:var(--icon-size);line-height:1;display:flex;min-block-size:calc(100vh - 79px);min-block-size:calc(var(--vh, 1vh) * 100 - 79px);z-index:1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-color);flex:1}.content::after{content:\"\";position:absolute;inset-block-start:0;inset-inline:0;background:var(--bg-color);z-index:-1;block-size:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);margin-block:var(--padding-top) var(--padding-bottom);margin-inline:calc(var(--padding-start) / 2) 0;border-radius:4px;padding-block:6px;padding-inline:5px;display:flex;align-content:center;inline-size:30px;flex:0 0 auto}.collapse-btn .nano-icon{font-size:var(--icon-size);transition:0.2s transform ease-in-out;transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn .nano-icon{transform:translateZ(0) rotate(180deg)}.foot{margin-block-start:auto}.measure-ele{block-size:1px}";
 const NanoMenuDrawerStyle0 = menuDrawerCss;
 
 const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTMLElement {
@@ -74,7 +75,7 @@ const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTM
         }
     }
     moveItemsToGlobalNav() {
-        const currNavItems = this.el.querySelectorAll('nano-nav-item');
+        const currNavItems = this.el.querySelectorAll(transformTag('nano-nav-item'));
         // dimensions not cool - move items out of element and into global nav
         currNavItems.forEach((element) => {
             this.children.push({
@@ -142,7 +143,7 @@ const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTM
         io.observe(this.measureEle);
     }
     handleGlobalNavReady(e) {
-        if (e.target.tagName !== 'NANO-GLOBAL-NAV')
+        if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))
             return;
         setTimeout(() => {
             this.attachIO();
@@ -152,7 +153,7 @@ const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTM
         }, 500);
     }
     componentWillLoad() {
-        this.globalNav = closestElement('nano-global-nav', this.el);
+        this.globalNav = closestElement(transformTag('nano-global-nav'), this.el);
         this.widthOk = window.innerWidth > this.hideWidth;
         this.currHeight = window.innerHeight;
         if (this.saveState) {
@@ -173,12 +174,13 @@ const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTM
         }
     }
     render() {
-        return (h(Host, { key: 'd10d0486b177e5c12549ca21c962241ef445a8b0', class: {
+        return (h(Host, { key: '977db4e79201de998a87723002144d9204789091', class: {
                 open: this.open,
                 hide: this.hide,
                 loading: this.isLoading,
                 'has-global-nav': !!this.globalNav,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'b443241c91c99e5cd3dabcbc1a3c8f708f09ef70', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'b037de8b47085af6068d3ee4221e6d8e5e5d51cb', class: "content-wrap" }, h("nav", { key: 'd6c542ce9e11a1553f7d3c88f8aa0b8295984dfb', ref: (div) => (this.contentDiv = div), class: "content" }, h("button", { key: '3ca749687077cae4aabb4e1ebf4e46655d063b74', onMouseDown: this.toggle, onKeyDown: this.onToggleKeyDown, class: "collapse-btn" }, h("nano-icon", { key: '74a376d7c3843e55636ec44404075b3d25ff95fe', name: "light/right-to-line", "aria-label": "collapse / expand" })), h("slot", { key: '68600c0432bd713668848e39cb8d7c1b1849f699' }), h("div", { key: 'dabd7f784eeb578329e0efc896d214af54e41800', class: "foot" }, h("div", { key: '60980d6c26d32432577bb91096e6ac546ca377f2', class: "measure-ele", ref: (div) => (this.measureEle = div) }), h("slot", { key: '3fef31b9227dcf0423c0abd8f9ded43b867068ba', name: "foot" })))))));
+                'nano-menu-drawer': true,
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: '7bc2a2d85dfc8c7ff749f129fe11e5df0d935d94', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'd1ed040d7097e465f029b6cc12501df8003f7dbb', class: "content-wrap" }, h("nav", { key: '4e09d7672d80e481475042fd4cc8ab44cda7cd6f', ref: (div) => (this.contentDiv = div), class: "content" }, h("button", { key: '5e58c9f3c21d0827545483ef0c6c65bf007a1c0e', onMouseDown: this.toggle, onKeyDown: this.onToggleKeyDown, class: "collapse-btn" }, h("nano-icon", { key: '40948e236760b128caa0f5c99d630642cc207cc4', name: "light/right-to-line", "aria-label": "collapse / expand" })), h("slot", { key: '337162928f8f99f2e6933d9c7afbf3b64bdda765' }), h("div", { key: 'd24cbc327b9d2fa1f1dff2332301741f110f3c48', class: "foot" }, h("div", { key: '8efedd05e75e0030cb3cb56a19feb86c14b94328', class: "measure-ele", ref: (div) => (this.measureEle = div) }), h("slot", { key: '1214dfbbf736eb5afeb7de299fd3280beebef7e1', name: "foot" })))))));
     }
     static get watchers() { return {
         "open": ["openChange"],

package/dist/components/nano-menu-drawer.js.map

@@ -1 +1 @@
-{"file":"nano-menu-drawer.js","mappings":"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","names":[],"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 79px;\n  --bg-color: #001a21;\n  --bg-color-hover: rgb(28 62 72 / 80%);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgb(28 62 72 / 80%);\n  --focus-outline: none;\n  --content-color: #{map.get(tokens.$colors, white)};\n  --secondary-bg-color: rgb(28 62 72);\n\n  @include mx.text-inherit();\n\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n  .content-wrap {\n    padding-block-start: var(--global-nav-height);\n    margin-block-start: calc(var(--global-nav-height) * -1);\n  }\n}\n\n.container {\n  inset-inline-end: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  inline-size: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  block-size: 100%;\n}\n\n:host(.open) {\n  .container {\n    inline-size: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: inline-size 0.3s ease;\n  }\n}\n\n.content-wrap {\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  inline-size: inherit;\n  max-inline-size: inherit;\n  background: var(--bg-color);\n  color: map.get(tokens.$colors, white);\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-block-size: calc(100vh - 79px);\n  min-block-size: calc((var(--vh, 1vh) * 100) - 79px);\n  z-index: 1;\n}\n\n.content {\n  inline-size: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    block-size: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin-block: var(--padding-top) var(--padding-bottom);\n  margin-inline: calc(var(--padding-start) / 2) 0;\n  border-radius: 4px;\n  padding-block: 6px;\n  padding-inline: 5px;\n  display: flex;\n  align-content: center;\n  inline-size: 30px;\n  flex: 0 0 auto;\n\n  nano-icon {\n    font-size: var(--icon-size);\n    transition: 0.2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-block-start: auto;\n}\n\n.measure-ele {\n  block-size: 1px;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  writeTask,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils/dom';\nimport { NavItemEventDetail } from '../nav-item/nav-item-interface';\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true,\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n    [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop({ mutable: true }) open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off\n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState)\n      localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open)\n        writeTask(\n          () =>\n            (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n        );\n      else writeTask(() => (this.containerDiv.style.width = null));\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    const currNavItems = this.el.querySelectorAll('nano-nav-item');\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach((element) => {\n      this.children.push({\n        slot: element.getAttribute('slot'),\n        element: element,\n      });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element);\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach((child) => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu');\n      if (child.slot && child.slot.length)\n        child.element.setAttribute('slot', child.slot);\n      this.el.appendChild(child.element);\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    const vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (\n      window.innerHeight > this.currHeight &&\n      this.widthOk &&\n      !this.heightOk\n    ) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  };\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  };\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = (this.io = new (\n      window as any\n    ).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav();\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    ));\n    io.observe(this.measureEle);\n  }\n\n  @Listen('nanoIsReady', { target: 'body' })\n  handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n    setTimeout(() => {\n      this.attachIO();\n      this.openChange();\n      this.onWindowResize();\n      this.isLoading = false;\n    }, 500);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement(\n      'nano-global-nav',\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      const localState = localStorage.getItem('nanoMenuDrawerOpen');\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.onWindowResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          open: this.open,\n          hide: this.hide,\n          loading: this.isLoading,\n          'has-global-nav': !!this.globalNav,\n        }}\n        dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n              <button\n                onMouseDown={this.toggle}\n                onKeyDown={this.onToggleKeyDown}\n                class=\"collapse-btn\"\n              >\n                <nano-icon\n                  name=\"light/right-to-line\"\n                  aria-label=\"collapse / expand\"\n                ></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div\n                  class=\"measure-ele\"\n                  ref={(div) => (this.measureEle = div)}\n                ></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-menu-drawer.js","mappings":"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","names":[],"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 79px;\n  --bg-color: #001a21;\n  --bg-color-hover: rgb(28 62 72 / 80%);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgb(28 62 72 / 80%);\n  --focus-outline: none;\n  --content-color: #{map.get(tokens.$colors, white)};\n  --secondary-bg-color: rgb(28 62 72);\n\n  @include mx.text-inherit();\n\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(.nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n  .content-wrap {\n    padding-block-start: var(--global-nav-height);\n    margin-block-start: calc(var(--global-nav-height) * -1);\n  }\n}\n\n.container {\n  inset-inline-end: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  inline-size: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  block-size: 100%;\n}\n\n:host(.open) {\n  .container {\n    inline-size: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: inline-size 0.3s ease;\n  }\n}\n\n.content-wrap {\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  inline-size: inherit;\n  max-inline-size: inherit;\n  background: var(--bg-color);\n  color: map.get(tokens.$colors, white);\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-block-size: calc(100vh - 79px);\n  min-block-size: calc((var(--vh, 1vh) * 100) - 79px);\n  z-index: 1;\n}\n\n.content {\n  inline-size: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    block-size: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin-block: var(--padding-top) var(--padding-bottom);\n  margin-inline: calc(var(--padding-start) / 2) 0;\n  border-radius: 4px;\n  padding-block: 6px;\n  padding-inline: 5px;\n  display: flex;\n  align-content: center;\n  inline-size: 30px;\n  flex: 0 0 auto;\n\n  .nano-icon {\n    font-size: var(--icon-size);\n    transition: 0.2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-block-start: auto;\n}\n\n.measure-ele {\n  block-size: 1px;\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  writeTask,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils/dom';\nimport { NavItemEventDetail } from '../nav-item/nav-item-interface';\nimport { transformTag, h } from '../../utils/renderer';\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true,\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n    [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop({ mutable: true }) open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off\n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState)\n      localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open)\n        writeTask(\n          () =>\n            (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n        );\n      else writeTask(() => (this.containerDiv.style.width = null));\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    const currNavItems = this.el.querySelectorAll<HTMLNanoNavItemElement>(\n      transformTag('nano-nav-item')\n    );\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach((element) => {\n      this.children.push({\n        slot: element.getAttribute('slot'),\n        element: element,\n      });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element);\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach((child) => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu');\n      if (child.slot && child.slot.length)\n        child.element.setAttribute('slot', child.slot);\n      this.el.appendChild(child.element);\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    const vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (\n      window.innerHeight > this.currHeight &&\n      this.widthOk &&\n      !this.heightOk\n    ) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  };\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  };\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = (this.io = new (\n      window as any\n    ).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav();\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    ));\n    io.observe(this.measureEle);\n  }\n\n  @Listen('nanoIsReady', { target: 'body' })\n  handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n    if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))\n      return;\n\n    setTimeout(() => {\n      this.attachIO();\n      this.openChange();\n      this.onWindowResize();\n      this.isLoading = false;\n    }, 500);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement(\n      transformTag('nano-global-nav'),\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      const localState = localStorage.getItem('nanoMenuDrawerOpen');\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.onWindowResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          open: this.open,\n          hide: this.hide,\n          loading: this.isLoading,\n          'has-global-nav': !!this.globalNav,\n          'nano-menu-drawer': true,\n        }}\n        dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n              <button\n                onMouseDown={this.toggle}\n                onKeyDown={this.onToggleKeyDown}\n                class=\"collapse-btn\"\n              >\n                <nano-icon\n                  name=\"light/right-to-line\"\n                  aria-label=\"collapse / expand\"\n                ></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div\n                  class=\"measure-ele\"\n                  ref={(div) => (this.measureEle = div)}\n                ></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-more-less.js

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
 
 const Rating = /*@__PURE__*/ proxyCustomElement(class Rating extends HTMLElement {
     constructor() {
@@ -53,8 +54,8 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class Rating extends HTMLElement
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: 'f027eeb0a9a1874b4e98686b9e501ddc44d4c632' }, h("slot", { key: '98bf588c101034356091253382ccebdbe67a78f1', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: 'd4748dec7f25dbeb0e9d4cf27a9857dc6411c349', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: 'c5b5d9b781761ece8d917391c132c3768838b6cd', name: "less" }, h("button", { key: '31d16fe52e896736bcc1d9617ad54aa4d5b69f47', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: 'ea8fe47faa76ad680aa1c87865db6c04ff0228b6', class: "nano-more-less" }, h("slot", { key: '69b79b49c00677a08fbcc2143e6efd99520c7ae4', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: '2972c854e94cc04cd41cb8c19afdade3d3decc8b', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: 'b3f7e2cf17d0c447d26cf1de996194910381bc35', name: "less" }, h("button", { key: 'dd079d36070438e93bd9cce9bf914139bb9f6f74', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
             !this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }

package/dist/components/nano-more-less.js.map

@@ -1 +1 @@
-{"file":"nano-more-less.js","mappings":";;;;;MA6Ba,MAAM;;;;;;;;IAIuB,IAAI,GAAG,KAAK,CAAC;;IAG7C,gBAAgB,CAAS;;;IAIzB,SAAS,GAAG,CAAC,CAAC;;IAGd,SAAS,GAAG,KAAK,CAAC;IAE1B,IAAI,QAAQ;QACV,IAAI,QAAyD,CAAC;QAE9D,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC9D;aAAM;YACL,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC/B;QACD,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAChC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,CAClB,CAAC;KACpB;IAKD,sBAAsB;QACpB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;oBAChC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;iBACxB;aACF;iBAAM;gBACL,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;oBACvB,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;iBAC5B;qBAAM;oBACL,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;iBACxB;aACF;SACF,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAc;QAChC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB;IAED,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAAI,EAC1D,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC,SAAS,IAAI;YACzC,4DACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,UAAU,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEnC,6DAAM,IAAI,EAAC,MAAM,IACf,+DAAQ,IAAI,EAAC,qBAAqB,oBACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,MAC3C,CACJ,CACH;YACN,CAAC,IAAI,CAAC,SAAS,IACb,WACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,MAAM,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEnC,YAAM,IAAI,EAAC,MAAM,IACf,cAAQ,IAAI,EAAC,qBAAqB,oBACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,MAC3C,CACJ,CACH,KAEN,EAAE,CACH;SACF,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/more-less/more-less.tsx"],"sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  h,\n  ComponentInterface,\n  Host,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A simple component to show more or less elements.\n *\n * @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n *\n * @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n * @part button - default 'more' / 'less' buttons\n * @part button--more - the default 'more' button\n * @part button--less - the default 'less' button\n */\n@Component({\n  tag: 'nano-more-less',\n  shadow: true,\n  styles: /* css */ `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n  @Element() host: HTMLNanoMoreLessElement;\n\n  /** The default state. `false` - excess items are hidden. `true` - excess items are shown. */\n  @Prop({ reflect: true, mutable: true }) show = false;\n\n  /** Optional JS selector to target which elements to hide or show */\n  @Prop() childrenSelector: string;\n\n  /** The maximum number of items to show when `show` is true.\n   * Excess items will be hidden. */\n  @Prop() maxToShow = 3;\n\n  /** Only show the 'show more' button */\n  @Prop() noHideBtn = false;\n\n  get children() {\n    let children: NodeListOf<Element> | HTMLCollectionOf<Element>;\n\n    if (this.childrenSelector) {\n      children = this.host.querySelectorAll(this.childrenSelector);\n    } else {\n      children = this.host.children;\n    }\n    return Array.from(children).filter(\n      (ele) => !ele.hasAttribute('slot')\n    ) as HTMLElement[];\n  }\n\n  @Watch('maxToShow')\n  @Watch('show')\n  @Watch('childrenSelector')\n  handleShowHideElements() {\n    this.children.forEach((ele, i) => {\n      if (this.show) {\n        if (ele.style.display === 'none') {\n          ele.style.display = '';\n        }\n      } else {\n        if (i >= this.maxToShow) {\n          ele.style.display = 'none';\n        } else {\n          ele.style.display = '';\n        }\n      }\n    });\n  }\n\n  private handleClick(_e: MouseEvent) {\n    this.show = !this.show;\n  }\n\n  connectedCallback() {\n    this.handleShowHideElements();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot onSlotchange={() => this.handleShowHideElements()} />\n        {this.children?.length > this.maxToShow && [\n          <div\n            style={{ display: this.show ? 'none' : 'contents' }}\n            class=\"button-wrapper\"\n            part=\"button-wrapper button-wrapper--less\"\n            onClick={(e) => this.handleClick(e)}\n          >\n            <slot name=\"less\">\n              <button part=\"button button--less\">\n                Show more (+{this.children.length - this.maxToShow})\n              </button>\n            </slot>\n          </div>,\n          !this.noHideBtn ? (\n            <div\n              style={{ display: this.show ? 'contents' : 'none' }}\n              class=\"button-wrapper\"\n              part=\"button-wrapper button-wrapper--more\"\n              onClick={(e) => this.handleClick(e)}\n            >\n              <slot name=\"more\">\n                <button part=\"button button--more\">\n                  Show less (-{this.children.length - this.maxToShow})\n                </button>\n              </slot>\n            </div>\n          ) : (\n            ''\n          ),\n        ]}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-more-less.js","mappings":";;;;;;MA6Ba,MAAM;;;;;;;;IAIuB,IAAI,GAAG,KAAK,CAAC;;IAG7C,gBAAgB,CAAS;;;IAIzB,SAAS,GAAG,CAAC,CAAC;;IAGd,SAAS,GAAG,KAAK,CAAC;IAE1B,IAAI,QAAQ;QACV,IAAI,QAAyD,CAAC;QAE9D,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC9D;aAAM;YACL,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC/B;QACD,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAChC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,CAClB,CAAC;KACpB;IAKD,sBAAsB;QACpB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;oBAChC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;iBACxB;aACF;iBAAM;gBACL,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;oBACvB,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;iBAC5B;qBAAM;oBACL,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;iBACxB;aACF;SACF,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAc;QAChC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB;IAED,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1B,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAAI,EAC1D,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC,SAAS,IAAI;YACzC,4DACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,UAAU,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEnC,6DAAM,IAAI,EAAC,MAAM,IACf,+DAAQ,IAAI,EAAC,qBAAqB,oBACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,MAC3C,CACJ,CACH;YACN,CAAC,IAAI,CAAC,SAAS,IACb,WACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,MAAM,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEnC,YAAM,IAAI,EAAC,MAAM,IACf,cAAQ,IAAI,EAAC,qBAAqB,oBACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,MAC3C,CACJ,CACH,KAEN,EAAE,CACH;SACF,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/more-less/more-less.tsx"],"sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  ComponentInterface,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/**\n * A simple component to show more or less elements.\n *\n * @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n *\n * @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n * @part button - default 'more' / 'less' buttons\n * @part button--more - the default 'more' button\n * @part button--less - the default 'less' button\n */\n@Component({\n  tag: 'nano-more-less',\n  shadow: true,\n  styles: /* css */ `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n  @Element() host: HTMLNanoMoreLessElement;\n\n  /** The default state. `false` - excess items are hidden. `true` - excess items are shown. */\n  @Prop({ reflect: true, mutable: true }) show = false;\n\n  /** Optional JS selector to target which elements to hide or show */\n  @Prop() childrenSelector: string;\n\n  /** The maximum number of items to show when `show` is true.\n   * Excess items will be hidden. */\n  @Prop() maxToShow = 3;\n\n  /** Only show the 'show more' button */\n  @Prop() noHideBtn = false;\n\n  get children() {\n    let children: NodeListOf<Element> | HTMLCollectionOf<Element>;\n\n    if (this.childrenSelector) {\n      children = this.host.querySelectorAll(this.childrenSelector);\n    } else {\n      children = this.host.children;\n    }\n    return Array.from(children).filter(\n      (ele) => !ele.hasAttribute('slot')\n    ) as HTMLElement[];\n  }\n\n  @Watch('maxToShow')\n  @Watch('show')\n  @Watch('childrenSelector')\n  handleShowHideElements() {\n    this.children.forEach((ele, i) => {\n      if (this.show) {\n        if (ele.style.display === 'none') {\n          ele.style.display = '';\n        }\n      } else {\n        if (i >= this.maxToShow) {\n          ele.style.display = 'none';\n        } else {\n          ele.style.display = '';\n        }\n      }\n    });\n  }\n\n  private handleClick(_e: MouseEvent) {\n    this.show = !this.show;\n  }\n\n  connectedCallback() {\n    this.handleShowHideElements();\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-more-less\">\n        <slot onSlotchange={() => this.handleShowHideElements()} />\n        {this.children?.length > this.maxToShow && [\n          <div\n            style={{ display: this.show ? 'none' : 'contents' }}\n            class=\"button-wrapper\"\n            part=\"button-wrapper button-wrapper--less\"\n            onClick={(e) => this.handleClick(e)}\n          >\n            <slot name=\"less\">\n              <button part=\"button button--less\">\n                Show more (+{this.children.length - this.maxToShow})\n              </button>\n            </slot>\n          </div>,\n          !this.noHideBtn ? (\n            <div\n              style={{ display: this.show ? 'contents' : 'none' }}\n              class=\"button-wrapper\"\n              part=\"button-wrapper button-wrapper--more\"\n              onClick={(e) => this.handleClick(e)}\n            >\n              <slot name=\"more\">\n                <button part=\"button button--more\">\n                  Show less (-{this.children.length - this.maxToShow})\n                </button>\n              </slot>\n            </div>\n          ) : (\n            ''\n          ),\n        ]}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,14 +1,15 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
 import { g as getDirectChildren, a as getOffset } from './dom.js';
 import { d as debounce } from './throttle.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:\"currentColor\";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:\" \";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow:auto hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;padding-block:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{inline-size:100%}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;overflow:hidden auto;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0;padding-block:calc(var(--fade-size) + 12px) var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{content:\"\";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
+const overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:\"currentColor\";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:\" \";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav .nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav .nano-icon-button.onav__scroll-button:focus{outline:none}.onav .nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav .nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow:auto hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;padding-block:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{inline-size:100%}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;overflow:hidden auto;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0;padding-block:calc(var(--fade-size) + 12px) var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{content:\"\";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
 const NanoOverflowNavStyle0 = overflowNavCss;
 
 const OverflowNav = /*@__PURE__*/ proxyCustomElement(class OverflowNav extends HTMLElement {
@@ -309,19 +310,19 @@ const OverflowNav = /*@__PURE__*/ proxyCustomElement(class OverflowNav extends H
         }
     }
     render() {
-        return (h(Host, { key: '6e173cacb18816d9835c05546a72c43ed91f274c', dir: this.isRtl ? 'rtl' : null }, h("div", { key: '5ccc848ac3de7e32c78f83450e33d8dba423074f', part: "base", class: {
+        return (h(Host, { key: 'b27e8a6ed628edcec4ca84db6898344848b7d203', dir: this.isRtl ? 'rtl' : null, class: "nano-overflow-nav" }, h("div", { key: '79200b5a21b1fdcc179fc3017b051af1bf82d17f', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
                 'onav--has-scroll-controls-start': !this.hideControlStart,
                 'onav--has-scroll-controls-end': !this.hideControlEnd,
                 'onav--no-transitions': this.instantReCalc,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '0a322909790d1b93e3325855deae42a3c65c9639', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '345635ef806ddb6faf2415cc90ff6a45741864ce', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '088d3d5bc04b251977ec0c389a4eef7657d11446', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: 'c55c810110f8b357b330634b024c3f5dc44ebb3b', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: '9b78552101a21487b925fefe89d887ac75ca035d', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll }, h("div", { key: '9d1795efcd4ca224ded919ad90623e97f2603a9d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, h("div", { key: '751c93eea4740df90233e816eda8e11835d0f3ca', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" }), h("slot", { key: 'c82d3d8ddc3fca334325b5a18ecbb5db78a81df9', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: '9fe484e4f323155034da3a84ea2b0872c6632fb4', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '9b65b0ccdb84eaf1afb28835e818039a961ef8c2', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll }, h("div", { key: '320928d965a0dd203a7b1614b4ae4ec344719810', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, h("div", { key: '0227ff56d2949ef3ebfc5ec740a38dcdb7adb1d4', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" }), h("slot", { key: '28573efda6c8eb5995114f6063f57ad22e0646ed', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'bba306fe285adc3d6af71bf07e1744c9790f9c51', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'