@nanoporetech-digital/components 3.1.1 → 3.3.0

package/dist/collection/components/nav-item/nav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../src/components/nav-item/nav-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n} from '@stencil/core';\nimport { getDirectChildren, getSiblings } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport type { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private hasAnchorEle: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private didBlur: boolean = false;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      if (!this.fromHover) {\n        this.btn.removeEventListener('focusout', this.blur);\n        this.secondaryDiv.removeEventListener('focusout', this.blur);\n      }\n      setTimeout(() => {\n        if (!this.fromHover && !this.didBlur)\n          this.btn.focus({ preventScroll: true });\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      this.didBlur = false;\n\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        this.btn.addEventListener('focusout', this.blur);\n        this.secondaryDiv.addEventListener('focusout', this.blur);\n        window.addEventListener('blur', this.blur);\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  private closeSecondary = async () => {\n    this.open = false;\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    const status = await displayTransition(this.secondaryDiv, 'open', false);\n    this.didOpen = status !== 'hidden';\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n    this.open = true;\n    if (!this.hasSecondarySlot || this.didOpen) return;\n\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    const status = await displayTransition(this.secondaryDiv, 'open', true);\n    this.didOpen = status === 'shown';\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    const foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n    else this.el.querySelector<HTMLElement>('*')?.click();\n  };\n\n  // utility to traverse up, to see if element is nested within current nav-item\n  private foundThisNavEle(el: HTMLElement): boolean {\n    let found = el.closest('nano-nav-item');\n    found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n    if (!found) return false;\n    if (found === this.el) return true;\n    return this.foundThisNavEle(found);\n  }\n\n  private blur = (ev: FocusEvent) => {\n    if (!this.didOpen || this.animating) return;\n    if (!this.closeOnBlur) return;\n\n    // if event is associated with this element don't close\n    if (ev && ev.relatedTarget) {\n      if (\n        ev.relatedTarget === this.el ||\n        ev.relatedTarget === this.btn ||\n        this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n      ) {\n        this.secondaryDiv.focus({ preventScroll: true });\n        return;\n      }\n    }\n\n    this.btn.removeEventListener('focusout', this.blur);\n    this.secondaryDiv.removeEventListener('focusout', this.blur);\n    window.removeEventListener('blur', this.blur);\n\n    this.didBlur = true;\n\n    this.open = false;\n    if (!ev.relatedTarget)\n      setTimeout(() => {\n        this.el.focus({ preventScroll: true });\n      }, 50);\n  };\n\n  componentWillLoad() {\n    const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    const link = getDirectChildren(this.el, 'a, button')[0] as\n      | HTMLAnchorElement\n      | HTMLButtonElement;\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabindex=\"-1\"\n            >\n              <div class=\"secondary-menu-content\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../src/components/nav-item/nav-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n} from '@stencil/core';\nimport { getDirectChildren, getSiblings } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private hasAnchorEle: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private didBlur: boolean = false;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      if (!this.fromHover) {\n        this.btn.removeEventListener('focusout', this.blur);\n        this.secondaryDiv.removeEventListener('focusout', this.blur);\n      }\n      setTimeout(() => {\n        if (!this.fromHover && !this.didBlur)\n          this.btn.focus({ preventScroll: true });\n        this.el.tabIndex = null;\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      this.didBlur = false;\n\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        const focusableChild = getTabbableElements(this.secondaryDiv, true);\n        if (focusableChild[0]) focusableChild[0].focus();\n\n        this.btn.addEventListener('focusout', this.blur);\n        this.secondaryDiv.addEventListener('focusout', this.blur);\n        window.addEventListener('blur', this.blur);\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  private closeSecondary = async () => {\n    this.open = false;\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    const status = await displayTransition(this.secondaryDiv, 'open', false);\n    this.didOpen = status !== 'hidden';\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n    this.open = true;\n    if (!this.hasSecondarySlot || this.didOpen) return;\n\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    const status = await displayTransition(this.secondaryDiv, 'open', true);\n    this.didOpen = status === 'shown';\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    const foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n    else this.el.querySelector<HTMLElement>('*')?.click();\n  };\n\n  // utility to traverse up, to see if element is nested within current nav-item\n  private foundThisNavEle(el: HTMLElement): boolean {\n    let found = el.closest('nano-nav-item');\n    found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n    if (!found) return false;\n    if (found === this.el) return true;\n    return this.foundThisNavEle(found);\n  }\n\n  private blur = (ev: FocusEvent) => {\n    if (!this.didOpen || this.animating) return;\n    if (!this.closeOnBlur) return;\n\n    // if event is associated with this element don't close\n    if (ev && ev.relatedTarget) {\n      if (ev.relatedTarget === this.el || ev.relatedTarget === this.btn) {\n        this.secondaryDiv.focus({ preventScroll: true });\n        return;\n      }\n    }\n    if (this.foundThisNavEle(ev.relatedTarget as HTMLElement)) return;\n\n    this.btn.removeEventListener('focusout', this.blur);\n    this.secondaryDiv.removeEventListener('focusout', this.blur);\n    window.removeEventListener('blur', this.blur);\n\n    this.didBlur = true;\n\n    this.open = false;\n    if (!ev.relatedTarget)\n      setTimeout(() => {\n        this.el.focus({ preventScroll: true });\n      }, 50);\n  };\n\n  componentWillLoad() {\n    const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    const link = getDirectChildren(this.el, 'a, button')[0] as\n      | HTMLAnchorElement\n      | HTMLButtonElement;\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabindex=\"-1\"\n            >\n              <div class=\"secondary-menu-content\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/option/option.css

@@ -52,16 +52,10 @@
 .option {
   position: relative;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   width: 100%;
   background: var(--bg);
   padding-inline: var(--padding-start) var(--padding-end);
@@ -87,63 +81,39 @@
   opacity: 0.7;
 }
 .option__label {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  flex: 1 1 auto;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .option__start {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  flex: 0 0 auto;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .option__start ::slotted(nano-icon) {
   font-size: var(--opt-icon-size);
 }
 .option__start ::slotted(:last-child) {
-  -webkit-margin-end: 0.5em;
-          margin-inline-end: 0.5em;
+  margin-inline-end: 0.5em;
 }
 .option__end {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  flex: 0 0 auto;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .option__end ::slotted(nano-icon) {
   font-size: var(--opt-icon-size);
 }
 .option__end ::slotted(:first-child) {
-  -webkit-margin-start: 0.5em;
-          margin-inline-start: 0.5em;
+  margin-inline-start: 0.5em;
 }
 .option__check {
   visibility: hidden;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   position: absolute;
   inset-inline-start: 0.6em;
   inset-block-start: calc(50% - 0.6em);
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   font-size: 0.9em;
 }
 .option--selected:not(.option--novalue) .option__check {

package/dist/collection/components/progress-bar/progress-bar.css

@@ -40,45 +40,24 @@
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
-  -webkit-transition: 0.4s width, 0.4s background-color;
   transition: 0.4s width, 0.4s background-color;
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
-  -webkit-transform-origin: left;
-          transform-origin: left;
+  transform-origin: left;
 }
 
 .progress-bar--indeterminate .progress-bar__indicator {
-  -webkit-animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
-          animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
-}
-
-@-webkit-keyframes indeterminate {
-  0% {
-    scale: 1 1;
-    -webkit-transform: translateX(-100%) translateZ(0);
-            transform: translateX(-100%) translateZ(0);
-  }
-  75%, 100% {
-    scale: 1 1;
-    -webkit-transform: translateX(100%) translateZ(0);
-            transform: translateX(100%) translateZ(0);
-  }
+  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
 }
 
 @keyframes indeterminate {
   0% {
     scale: 1 1;
-    -webkit-transform: translateX(-100%) translateZ(0);
-            transform: translateX(-100%) translateZ(0);
+    transform: translateX(-100%) translateZ(0);
   }
   75%, 100% {
     scale: 1 1;
-    -webkit-transform: translateX(100%) translateZ(0);
-            transform: translateX(100%) translateZ(0);
+    transform: translateX(100%) translateZ(0);
   }
 }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -22,7 +22,7 @@ export class ProgressBar {
         'progress-bar': true,
         'progress-bar--indeterminate': this.indeterminate,
       }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { part: "indicator", class: "progress-bar__indicator", style: {
-        width: `${this.value}%`,
+        width: !this.indeterminate ? `${this.value}%` : undefined,
       } }, h("span", { part: "label", class: "progress-bar__label" }, h("slot", null, !this.indeterminate && this.showPercent ? `${this.value}%` : '')))));
   }
   static get is() { return "nano-progress-bar"; }

package/dist/collection/components/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D;;;;;;;;GAQG;AAOH,MAAM,OAAO,WAAW;;iBAIN,CAAC;yBAGO,KAAK;uBAGP,KAAK;;EAE3B,MAAM;IACJ,OAAO,CACL,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;OAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;MAErD,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;UACL,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG;SACxB;QAED,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;UAC5C,gBACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAC3D,CACF,CACH,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element } from '@stencil/core';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'nano-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true,\n})\nexport class ProgressBar {\n  @Element() host: HTMLNanoProgressBarElement;\n\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        title={this.host.title || undefined}\n        aria-label=\"Progress\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.value}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: `${this.value}%`,\n          }}\n        >\n          <span part=\"label\" class=\"progress-bar__label\">\n            <slot>\n              {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n            </slot>\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D;;;;;;;;GAQG;AAOH,MAAM,OAAO,WAAW;;iBAIN,CAAC;yBAGO,KAAK;uBAGP,KAAK;;EAE3B,MAAM;IACJ,OAAO,CACL,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;OAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;MAErD,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;UACL,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS;SAC1D;QAED,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;UAC5C,gBACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAC3D,CACF,CACH,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element } from '@stencil/core';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'nano-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true,\n})\nexport class ProgressBar {\n  @Element() host: HTMLNanoProgressBarElement;\n\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        title={this.host.title || undefined}\n        aria-label=\"Progress\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.value}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: !this.indeterminate ? `${this.value}%` : undefined,\n          }}\n        >\n          <span part=\"label\" class=\"progress-bar__label\">\n            <slot>\n              {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n            </slot>\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/range/range.css

@@ -44,19 +44,11 @@
 }
 
 .range-wrap {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   position: relative;
-  -webkit-box-flex: 3;
-      -ms-flex: 3;
-          flex: 3;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  flex: 3;
+  align-items: center;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 .range-wrap ::slotted(ion-icon[slot]) {
@@ -75,20 +67,15 @@
 
 .range-slider {
   position: relative;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   width: 100%;
   height: var(--height);
   contain: size layout style;
-  cursor: -webkit-grab;
   cursor: grab;
-  -ms-touch-action: pan-y;
-      touch-action: pan-y;
+  touch-action: pan-y;
 }
 
 :host(.range-pressed) .range-slider {
-  cursor: -webkit-grabbing;
   cursor: grabbing;
 }
 
@@ -123,31 +110,22 @@
   width: var(--knob-size);
   height: var(--knob-size);
   background: var(--knob-background);
-  -webkit-box-shadow: var(--knob-box-shadow);
-          box-shadow: var(--knob-box-shadow);
+  box-shadow: var(--knob-box-shadow);
   z-index: 2;
   pointer-events: none;
-  -webkit-transform: scale(0.67);
-          transform: scale(0.67);
-  -webkit-transition-duration: 120ms;
-          transition-duration: 120ms;
-  -webkit-transition-property: background-color, border, -webkit-transform;
-  transition-property: background-color, border, -webkit-transform;
+  transform: scale(0.67);
+  transition-duration: 120ms;
   transition-property: transform, background-color, border;
-  transition-property: transform, background-color, border, -webkit-transform;
-  -webkit-transition-timing-function: ease;
-          transition-timing-function: ease;
+  transition-timing-function: ease;
 }
 :host(:not(.range-has-pin)) .range-knob-pressed .range-knob {
-  -webkit-transform: scale(1);
-          transform: scale(1);
+  transform: scale(1);
 }
 
 .range-knob-handle {
   inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);
   inset-inline-start: 0;
-  -webkit-margin-start: calc(0px - var(--knob-handle-size) / 2);
-          margin-inline-start: calc(0px - var(--knob-handle-size) / 2);
+  margin-inline-start: calc(0px - var(--knob-handle-size) / 2);
   position: absolute;
   width: calc(var(--knob-handle-size));
   height: calc(var(--knob-handle-size));
@@ -157,8 +135,7 @@
   outline: none;
 }
 .range-knob-handle:active .range-knob, .range-knob-handle:focus .range-knob {
-  -webkit-box-shadow: var(--knob-box-shadow), var(--focus-style);
-          box-shadow: var(--knob-box-shadow), var(--focus-style);
+  box-shadow: var(--knob-box-shadow), var(--focus-style);
 }
 
 .range-tick {
@@ -181,23 +158,17 @@
 }
 
 .range-pin {
-  -webkit-transform: translate3d(0, 0, 0) scale(0.01);
-          transform: translate3d(0, 0, 0) scale(0.01);
-  -webkit-transform-origin: center top;
-          transform-origin: center top;
+  transform: translate3d(0, 0, 0) scale(0.01);
+  transform-origin: center top;
   padding: 0.66em 0;
   border-radius: 50%;
   text-align: center;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   display: inline-block;
   position: relative;
   min-width: 2.33em;
   height: 2.33em;
-  -webkit-transition: background 120ms ease, -webkit-transform 120ms ease;
-  transition: background 120ms ease, -webkit-transform 120ms ease;
   transition: transform 120ms ease, background 120ms ease;
-  transition: transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;
   background: var(--pin-background);
   color: var(--pin-color);
   font-size: 0.75em;
@@ -205,25 +176,20 @@
 .range-pin::before {
   inset-block-start: 0.25em;
   inset-inline-start: 50%;
-  -webkit-margin-start: -1.08em;
-          margin-inline-start: -1.08em;
+  margin-inline-start: -1.08em;
   border-radius: 50% 50% 50% 0;
   position: absolute;
   width: 2.16em;
   height: 2.16em;
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-  -webkit-transition: background 120ms ease;
+  transform: rotate(-45deg);
   transition: background 120ms ease;
   background: var(--pin-background);
   content: "";
   z-index: -1;
 }
 .range-knob-pressed .range-pin {
-  -webkit-transform: translate3d(0, -50%, 0) scale(1);
-          transform: translate3d(0, -50%, 0) scale(1);
-  -webkit-transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);
-          transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);
+  transform: translate3d(0, -50%, 0) scale(1);
+  transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);
 }
 
 :host(.range-disabled) {
@@ -235,8 +201,7 @@
   background-color: rgba(var(--rgb-inactive), 0.5);
 }
 :host(.range-disabled) .range-knob {
-  -webkit-transform: scale(0.55);
-          transform: scale(0.55);
+  transform: scale(0.55);
   outline: 5px solid #fff;
   background-color: rgba(var(--rgb-inactive), 0.5);
 }
@@ -253,6 +218,5 @@
   background: rgba(var(--nano-color-base-rgb), 0.26);
 }
 :host(.nano-color) .range-knob-handle:active .range-knob, :host(.nano-color) .range-knob-handle:focus .range-knob {
-  -webkit-box-shadow: var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);
-          box-shadow: var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);
+  box-shadow: var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);
 }

package/dist/collection/components/rating/rating.css

@@ -27,14 +27,10 @@
 
 .rating-wrap {
   position: relative;
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
-  -webkit-margin-start: calc(var(--symbol-spacing) * -1);
-          margin-inline-start: calc(var(--symbol-spacing) * -1);
-  -webkit-margin-end: calc(var(--symbol-spacing) * -1);
-          margin-inline-end: calc(var(--symbol-spacing) * -1);
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: calc(var(--symbol-spacing) * -1);
+  margin-inline-end: calc(var(--symbol-spacing) * -1);
 }
 
 .rating {
@@ -42,34 +38,24 @@
   border-radius: 5px;
   vertical-align: middle;
   inline-size: 100%;
-  -webkit-transition: -webkit-box-shadow 0.15s ease;
-  transition: -webkit-box-shadow 0.15s ease;
   transition: box-shadow 0.15s ease;
-  transition: box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
 }
 .rating:focus {
   outline: none;
 }
 .rating.focus-visible:focus {
-  -webkit-box-shadow: var(--focus-shadow);
-          box-shadow: var(--focus-shadow);
+  box-shadow: var(--focus-shadow);
 }
 .rating__symbols {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   position: relative;
   font-size: var(--symbol-size);
   color: var(--symbol-color);
   white-space: nowrap;
   cursor: pointer;
   line-height: 0;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
 }
 .rating__symbols--inactive .rating__symbol > :not(nano-icon) {
   background-color: currentColor !important;
@@ -86,22 +72,17 @@
   inline-size: 100%;
 }
 .rating__symbol {
-  -webkit-transition: 0.2s -webkit-transform;
-  transition: 0.2s -webkit-transform;
   transition: 0.2s transform;
-  transition: 0.2s transform, 0.2s -webkit-transform;
   text-align: center;
 }
 .rating__symbol--hover {
-  -webkit-transform: scale(1.2);
-          transform: scale(1.2);
+  transform: scale(1.2);
 }
 .rating--disabled .rating__symbols, .rating--readonly .rating__symbols {
   cursor: default;
 }
 .rating--disabled .rating__symbol, .rating--readonly .rating__symbol {
-  -webkit-transform: none !important;
-          transform: none !important;
+  transform: none !important;
 }
 .rating--disabled {
   opacity: 0.5;

package/dist/collection/components/resize-observe/resize-observe.js

@@ -2,7 +2,6 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { h, Host, readTask, } from '@stencil/core';
-import { debounce } from '../../utils/throttle';
 /**
  * A Resize-Observer utility component.
  * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.
@@ -10,6 +9,7 @@ import { debounce } from '../../utils/throttle';
  */
 export class ResizeObserve {
   constructor() {
+    this.isReady = false;
     this.assessChanges = () => {
       if (!this.currentWidth && !this.currentHeight)
         return;
@@ -44,6 +44,13 @@ export class ResizeObserve {
     this.classNames = [];
     this.states = undefined;
   }
+  classNameChange() {
+    this.host.className = this.classNames.join(' ');
+    if (!this.isReady && this.classNames.includes('is-ready')) {
+      this.isReady = true;
+      this.nanoResizeObserverReady.emit();
+    }
+  }
   dimensionChanged() {
     this.assessChanges();
   }
@@ -81,10 +88,14 @@ export class ResizeObserve {
         if (!state.states)
           return;
         state.states.map((st) => {
-          if (state.applied)
+          if (state.applied) {
             classNames.push(st);
-          else
+            classNames = classNames.filter((cl) => cl !== 'not-' + st);
+          }
+          else {
+            classNames.push('not-' + st);
             classNames = classNames.filter((cl) => cl !== st);
+          }
         });
       });
     });
@@ -109,10 +120,8 @@ export class ResizeObserve {
     });
     this.ro.observe(this.host);
   }
-  connectedCallback() {
-    this.assessChanges = debounce(this.assessChanges, 50);
-  }
-  componentDidLoad() {
+  componentWillLoad() {
+    this.classNames = Array.from(this.host.classList);
     if (!this.states)
       return;
     if (!this.currentWidth || !this.currentHeight) {
@@ -123,19 +132,18 @@ export class ResizeObserve {
       });
     }
     this.statesChanged();
+    // set all class as 'not-' by deafult
+    this.applyChanges(this.appliedStates);
   }
   disconnectedCallback() {
     if (this.ro)
       this.ro.disconnect();
   }
   render() {
-    return (h(Host, { class: {
-        [this.classNames.join(' ')]: true,
-      } }, h("slot", null)));
+    return (h(Host, null, h("slot", null)));
   }
   static get is() { return "nano-resize-observe"; }
-  static get encapsulation() { return "shadow"; }
-  static get styles() { return ":host { display: inline-block } div { height: 100%; }"; }
+  static get styles() { return "nano-resize-observe { display: block }"; }
   static get properties() {
     return {
       "states": {
@@ -187,11 +195,29 @@ export class ResizeObserve {
             }
           }
         }
+      }, {
+        "method": "nanoResizeObserverReady",
+        "name": "nanoResizeObserverReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires after the initial loading and assessment"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{
+        "propName": "classNames",
+        "methodName": "classNameChange"
+      }, {
         "propName": "currentHeight",
         "methodName": "dimensionChanged"
       }, {