@nordhealth/components 4.24.2 → 4.25.0

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\ninterface Options<T> {\n  channelName: string\n  onMessage: (message: T) => void\n  enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n  private channel?: BroadcastChannel\n  private options: Required<Options<T>>\n\n  constructor(host: ReactiveControllerHost, options: Options<T>) {\n    host.addController(this)\n    this.options = { enabled: defaultEnabled, ...options }\n  }\n\n  hostConnected(): void {\n    if (typeof BroadcastChannel !== 'undefined') {\n      this.channel = new BroadcastChannel(this.options.channelName)\n      this.channel.addEventListener('message', this)\n    }\n  }\n\n  hostDisconnected(): void {\n    this.channel?.removeEventListener('message', this)\n    this.channel?.close()\n  }\n\n  handleEvent(event: MessageEvent<T>) {\n    if (this.options.enabled()) {\n      this.options.onMessage(event.data)\n    }\n  }\n\n  post(message: T) {\n    if (this.options.enabled()) {\n      this.channel?.postMessage(message)\n    }\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse,\n) {\n  return {\n    get value(): T {\n      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      }\n      catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      }\n      catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n","import type { Events, States } from '../common/fsm.js'\nimport type NavItem from '../nav-item/NavItem.js'\nimport * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { BroadcastChannelController } from '../common/controllers/BroadcastChannelController.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { fsm } from '../common/fsm.js'\nimport { clamp } from '../common/number.js'\nimport { storage } from '../common/storage.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport stickyStyle from '../common/styles/Sticky.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Layout.css'\nimport { NavOpenChangeEvent } from './NavOpenChangeEvent.js'\nimport { NavResizeEvent } from './NavResizeEvent.js'\nimport '../nav-toggle/NavToggle.js'\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\nconst navWidthStore = storage('nord-layout.navWidth', NAV_DEFAULT_WIDTH)\n// Tracks the last `default-nav-width` we wrote, so we can re-seed the\n// stored width when consumers change the default between loads.\n// Initial default matches NAV_DEFAULT_WIDTH so existing consumers that\n// never set `default-nav-width` get no re-seed on upgrade — their users'\n// persisted widths are preserved.\nconst navWidthDefaultStore = storage('nord-layout.navWidthDefault', NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage('nord-layout.navOpen', true)\n\nfunction findNavToggleInPath(path: EventTarget[]): HTMLElement | null {\n  for (const target of path) {\n    if (target instanceof HTMLElement && target.localName === 'nord-nav-toggle') {\n      return target\n    }\n  }\n  return null\n}\n\nfunction isNavToggleClick(e: Event): boolean {\n  return findNavToggleInPath(e.composedPath()) !== null\n}\n\nconst navMachine = fsm({\n  opened: {\n    toggle: 'closed',\n    close: 'closed',\n  },\n  closed: {\n    toggle: 'opened',\n    open: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n  },\n  peek: {\n    toggle: 'opened',\n    focusout: 'unpeek',\n    pointerleave: 'wait',\n    dropdownOpen: 'blocked',\n    click: 'unpeek',\n    open: 'opened',\n  },\n  blocked: {\n    dropdownClose: 'peek',\n    open: 'opened',\n  },\n  wait: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    timeout: 'unpeek',\n  },\n  unpeek: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    transitionend: 'closed',\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === 'nord-nav-item'\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip. As an alternative, `<nord-nav-toggle>` can be placed anywhere inside `<nord-layout>` (e.g. inside a `<nord-header>`) — the layout listens for clicks and hover on any descendant `<nord-nav-toggle>` and drives toggle / peek behaviour accordingly. When using that placement, set `hide-default-nav-toggle` to suppress the layout's built-in fallback toggle.\n *\n * @fires {NavOpenChangeEvent} nav-open-change - Dispatched when the navigation open state changes, regardless of the trigger (user toggle, peek, focus, programmatic). The event's `navOpen` property contains the new state.\n * @fires {NavResizeEvent} nav-resize - Dispatched when the navigation sidebar width changes. The event's `width` property contains the new width in pixels.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n * @cssprop [--n-layout-nav-border-color=var(--n-color-border)] - Controls the color of the border between the navigation and the main content area when the nav is open on wide screens.\n */\n@customElement('nord-layout')\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, 'nav')\n  private drawerSlot = new SlotController(this, 'drawer')\n  private topBarSlot = new SlotController(this, 'top-bar')\n  private headerSlot = new SlotController(this, 'header')\n  private footerSlot = new SlotController(this, 'footer')\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === 'opened' && !this.wideScreen,\n    onDismiss: () => this.navTransition('close'),\n    isDismissible: node => node !== this.navEl,\n  })\n\n  private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: 'nord-layout-nav-state',\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: (data) => {\n      if ('navOpen' in data) {\n        this.navOpen = data.navOpen\n      }\n      if ('navWidth' in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })\n\n  @query('.n-layout-nav', true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = navWidthStore.value\n  @state() private isDragging = false\n  @state() private navState!: NavState\n  @state() private wideScreen = mediaQuery.matches\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'nav-open' }) navOpen!: boolean\n\n  /**\n   * Controls whether the navigation's open/closed state is persisted across page loads.\n   * This is useful for multi-page apps, where clicks on links trigger a full page load.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'persist-nav-state' }) persistNavState = false\n\n  /**\n   * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n   * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sync-nav-state' }) syncNavState = false\n\n  /**\n   * Initial width (in pixels) of the navigation sidebar when no value has been persisted.\n   * Changing this value between loads also re-seeds the persisted width for existing users,\n   * so design changes propagate without manual localStorage resets.\n   */\n  @property({ type: Number, reflect: true, attribute: 'default-nav-width' }) defaultNavWidth = NAV_DEFAULT_WIDTH\n\n  /**\n   * Minimum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n   */\n  @property({ type: Number, reflect: true, attribute: 'min-nav-width' }) minNavWidth = NAV_MIN_WIDTH\n\n  /**\n   * Maximum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n   */\n  @property({ type: Number, reflect: true, attribute: 'max-nav-width' }) maxNavWidth = NAV_MAX_WIDTH\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: 'm' | 'none' = 'm'\n\n  /**\n   * Controls whether the layout's header has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n  /**\n   * Controls whether the layout's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  /**\n   * Suppresses the built-in `<nord-nav-toggle>` rendered as the fallback for\n   * the `nav-toggle` slot. Set this when you've placed your own\n   * `<nord-nav-toggle>` elsewhere inside the layout (e.g. inside\n   * `<nord-header>`) and want the layout's default one hidden.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-default-nav-toggle' })\n  hideDefaultNavToggle: boolean = false\n\n  /**\n   * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n   * A narrow viewport is considered to be less than 768px wide.\n   */\n  get isNarrow(): boolean {\n    return !this.wideScreen\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n    this.addEventListener('click', this.handleHostClick)\n    this.addEventListener('mouseover', this.handleHostMouseOver)\n    this.addEventListener('mouseout', this.handleHostMouseOut)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('click', this.handleHostClick)\n    this.removeEventListener('mouseover', this.handleHostMouseOver)\n    this.removeEventListener('mouseout', this.handleHostMouseOut)\n  }\n\n  willUpdate() {\n    // we only want this logic to run once, before first render\n    if (this.hasUpdated) {\n      return\n    }\n\n    // fall back to the built-in constants when consumer-provided attributes\n    // are non-numeric (e.g. `min-nav-width=\"abc\"` produces NaN). reflect:true\n    // also rewrites the attribute in the DOM to the sanitized value\n    if (!Number.isFinite(this.defaultNavWidth)) {\n      this.defaultNavWidth = NAV_DEFAULT_WIDTH\n    }\n    if (!Number.isFinite(this.minNavWidth)) {\n      this.minNavWidth = NAV_MIN_WIDTH\n    }\n    if (!Number.isFinite(this.maxNavWidth)) {\n      this.maxNavWidth = NAV_MAX_WIDTH\n    }\n\n    // re-seed persisted width when the consumer-provided default-nav-width\n    // differs from the last default we applied. This lets apps roll out a\n    // new sidebar default without manual localStorage migrations.\n    if (navWidthDefaultStore.value !== this.defaultNavWidth) {\n      this.setNavWidth(this.defaultNavWidth)\n      navWidthStore.value = this.navWidth\n      // store the raw consumer-provided default so mismatch detection is\n      // independent of the min/max clamp\n      navWidthDefaultStore.value = this.defaultNavWidth\n    }\n    else {\n      // ensure a previously-persisted width still respects current min/max\n      this.setNavWidth(this.navWidth)\n    }\n\n    // on mobile it should always start closed\n    if (this.isNarrow) {\n      this.navState = 'closed'\n    }\n    // if nav state is persisted, and it was previously closed, start closed\n    else if (this.persistNavState && navOpenStore.value === false) {\n      this.navState = 'closed'\n    }\n    // otherwise start open\n    else {\n      this.navState = 'opened'\n    }\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === 'opened' && this.wideScreen ? navWidth : this.defaultNavWidth\n\n    return html`\n      <div\n        class=${classMap({\n          'n-layout': true,\n          'n-rtl': direction.isRTL,\n          'n-dragging': isDragging,\n          'n-has-header': headerSlot.hasContent,\n          'n-has-footer': footerSlot.hasContent,\n          'n-has-top-bar': topBarSlot.hasContent,\n          'n-has-drawer': drawerSlot.hasContent,\n          'n-has-nav': navSlot.hasContent,\n        })}\n        style=${styleMap({\n          '--_n-layout-nav-width': `${adjustedNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : 'closed'}\n        data-screen=${this.wideScreen ? 'wide' : 'narrow'}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === 'opened', this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent && !this.hideDefaultNavToggle ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n            <slot name=\"footer\"></slot>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    return html`\n      <div class=\"n-nav-toggle-container\">\n        <slot\n          name=\"nav-toggle\"\n          @click=${this.handleToggleClick}\n          @mouseover=${this.handleMouseEnter}\n          @mouseout=${this.handleMouseLeave}\n        >\n          <nord-nav-toggle></nord-nav-toggle>\n        </slot>\n      </div>\n    `\n  }\n\n  private renderNavCollapse() {\n    return html`\n      <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n        <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n      </button>\n    `\n  }\n\n  @observe('navWidth', 'updated')\n  protected handleNavWidthChange(prev: number) {\n    navWidthStore.value = this.navWidth\n    if (prev != null) {\n      const navWidth = this.navWidth\n      this.dispatchEvent(new NavResizeEvent(navWidth))\n    }\n  }\n\n  @observe('navState')\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === 'wait' && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === 'unpeek') {\n      this.navEl.removeEventListener('transitionend', this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case 'closed':\n        this.navOpen = false\n        break\n      case 'opened':\n        this.navOpen = true\n        break\n      case 'wait':\n        this.peekTimeoutId = setTimeout(() => this.navTransition('timeout'), NAV_PEEK_DELAY)\n        break\n      case 'unpeek':\n        this.navEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe('navOpen', 'updated')\n  protected handleOpenChange(prev: boolean) {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, this.defaultNavWidth))\n    }\n\n    this.navTransition(this.navOpen ? 'open' : 'close')\n\n    if (this.persistNavState) {\n      navOpenStore.value = this.navOpen\n    }\n\n    // skip first update, we only want subsequent changes\n    if (prev != null) {\n      const navOpen = this.navOpen\n      this.broadcast.post({ navOpen })\n      this.dispatchEvent(new NavOpenChangeEvent(navOpen))\n    }\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleNavClick(e: Event) {\n    if (!e.defaultPrevented && !this.wideScreen) {\n      const target = e.target as HTMLElement\n\n      if (isNavItemLeaf(target)) {\n        this.navTransition('close')\n      }\n    }\n  }\n\n  private handleMainClick() {\n    this.navTransition('click')\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownOpen')\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownClose')\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.wideScreen = mediaQuery.matches\n    this.navTransition(this.wideScreen ? 'open' : 'close')\n  }\n\n  private handleToggleClick = (e: Event) => {\n    // Skip when a `<nord-nav-toggle>` is in the click path — `handleHostClick`\n    // will fire for it. Without this guard, an in-slot `<nord-nav-toggle>`\n    // would toggle twice (once via the slot handler, once via the host one).\n    if (isNavToggleClick(e)) {\n      return\n    }\n    this.navTransition('toggle')\n  }\n\n  // Allow `<nord-nav-toggle>` to be placed anywhere inside the layout, not\n  // just in the `nav-toggle` slot. Clicks on the host bubble up through the\n  // light-DOM subtree; if the composed path contains a `<nord-nav-toggle>`,\n  // we treat that as a toggle request.\n  private handleHostClick = (e: Event) => {\n    if (isNavToggleClick(e)) {\n      this.navTransition('toggle')\n    }\n  }\n\n  // Same delegation pattern as `handleHostClick`, but for hover-to-peek.\n  // `relatedTarget` filtering avoids re-firing as the cursor moves between\n  // children inside the same `<nord-nav-toggle>`.\n  private handleHostMouseOver = (e: MouseEvent) => {\n    const toggle = findNavToggleInPath(e.composedPath())\n    if (!toggle) {\n      return\n    }\n    if (e.relatedTarget instanceof Node && toggle.contains(e.relatedTarget)) {\n      return\n    }\n    this.handleMouseEnter()\n  }\n\n  private handleHostMouseOut = (e: MouseEvent) => {\n    const toggle = findNavToggleInPath(e.composedPath())\n    if (!toggle) {\n      return\n    }\n    if (e.relatedTarget instanceof Node && toggle.contains(e.relatedTarget)) {\n      return\n    }\n    this.handleMouseLeave()\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition('focusin')\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition('focusout')\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\n      this.navTransition('pointerenter')\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition('pointerleave')\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition('transitionend')\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case 'ArrowRight':\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case 'Enter':\n        this.navTransition('toggle')\n        break\n      case 'Home':\n        this.setNavWidth(this.minNavWidth)\n        break\n      case 'End':\n        this.setNavWidth(this.maxNavWidth)\n        break\n      default:\n        return\n    }\n\n    this.broadcast.post({ navWidth: this.navWidth })\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), this.minNavWidth, this.maxNavWidth)\n  }\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n    this.broadcast.post({ navWidth: this.navWidth })\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? 'open' : 'close')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-layout': Layout\n  }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","NAV_DEFAULT_WIDTH","mediaQuery","matchMedia","matches","navWidthStore","navWidthDefaultStore","navOpenStore","findNavToggleInPath","path","target","HTMLElement","localName","isNavToggleClick","e","composedPath","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","persistNavState","defaultNavWidth","minNavWidth","maxNavWidth","padding","sticky","stickyFooter","hideDefaultNavToggle","handleMediaQueryChange","handleToggleClick","handleHostClick","handleHostMouseOver","relatedTarget","Node","contains","handleMouseEnter","handleHostMouseOut","handleMouseLeave","handleNavFocus","handleMainFocus","handleTransitionEnd","isNarrow","connectedCallback","super","listen","disconnectedCallback","willUpdate","hasUpdated","Number","isFinite","setNavWidth","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","prev","dispatchEvent","NavResizeEvent","handleNavStateChange","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","Math","max","NavOpenChangeEvent","transition","defaultPrevented","el","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\ninterface Options<T> {\n  channelName: string\n  onMessage: (message: T) => void\n  enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n  private channel?: BroadcastChannel\n  private options: Required<Options<T>>\n\n  constructor(host: ReactiveControllerHost, options: Options<T>) {\n    host.addController(this)\n    this.options = { enabled: defaultEnabled, ...options }\n  }\n\n  hostConnected(): void {\n    if (typeof BroadcastChannel !== 'undefined') {\n      this.channel = new BroadcastChannel(this.options.channelName)\n      this.channel.addEventListener('message', this)\n    }\n  }\n\n  hostDisconnected(): void {\n    this.channel?.removeEventListener('message', this)\n    this.channel?.close()\n  }\n\n  handleEvent(event: MessageEvent<T>) {\n    if (this.options.enabled()) {\n      this.options.onMessage(event.data)\n    }\n  }\n\n  post(message: T) {\n    if (this.options.enabled()) {\n      this.channel?.postMessage(message)\n    }\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse,\n) {\n  return {\n    get value(): T {\n      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      }\n      catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      }\n      catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n","import type { Events, States } from '../common/fsm.js'\nimport type NavItem from '../nav-item/NavItem.js'\nimport * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { BroadcastChannelController } from '../common/controllers/BroadcastChannelController.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { fsm } from '../common/fsm.js'\nimport { clamp } from '../common/number.js'\nimport { storage } from '../common/storage.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport stickyStyle from '../common/styles/Sticky.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Layout.css'\nimport { NavOpenChangeEvent } from './NavOpenChangeEvent.js'\nimport { NavResizeEvent } from './NavResizeEvent.js'\nimport '../nav-toggle/NavToggle.js'\nimport '../tooltip/Tooltip.js'\n\nIcon.registerIcon(lockIcon)\n\nlet resizeTooltipIdCounter = 0\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RAIL_WIDTH = 48\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\nconst NAV_RESIZE_DRAG_THRESHOLD = 4\n\nconst mediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\nconst navWidthStore = storage('nord-layout.navWidth', NAV_DEFAULT_WIDTH)\n// Tracks the last `default-nav-width` we wrote, so we can re-seed the\n// stored width when consumers change the default between loads.\n// Initial default matches NAV_DEFAULT_WIDTH so existing consumers that\n// never set `default-nav-width` get no re-seed on upgrade — their users'\n// persisted widths are preserved.\nconst navWidthDefaultStore = storage('nord-layout.navWidthDefault', NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage('nord-layout.navOpen', true)\n\nfunction findNavToggleInPath(path: EventTarget[]): HTMLElement | null {\n  for (const target of path) {\n    if (target instanceof HTMLElement && target.localName === 'nord-nav-toggle') {\n      return target\n    }\n  }\n  return null\n}\n\nfunction isNavToggleClick(e: Event): boolean {\n  return findNavToggleInPath(e.composedPath()) !== null\n}\n\nconst navMachine = fsm({\n  opened: {\n    toggle: 'closed',\n    close: 'closed',\n  },\n  closed: {\n    toggle: 'opened',\n    open: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n  },\n  peek: {\n    toggle: 'opened',\n    focusout: 'unpeek',\n    pointerleave: 'wait',\n    dropdownOpen: 'blocked',\n    click: 'unpeek',\n    open: 'opened',\n  },\n  blocked: {\n    dropdownClose: 'peek',\n    open: 'opened',\n  },\n  wait: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    timeout: 'unpeek',\n  },\n  unpeek: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    transitionend: 'closed',\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === 'nord-nav-item'\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip. As an alternative, `<nord-nav-toggle>` can be placed anywhere inside `<nord-layout>` (e.g. inside a `<nord-header>`) — the layout listens for clicks and hover on any descendant `<nord-nav-toggle>` and drives toggle / peek behaviour accordingly. When using that placement, set `hide-default-nav-toggle` to suppress the layout's built-in fallback toggle.\n *\n * @fires {NavOpenChangeEvent} nav-open-change - Dispatched when the navigation open state changes, regardless of the trigger (user toggle, peek, focus, programmatic). The event's `navOpen` property contains the new state.\n * @fires {NavResizeEvent} nav-resize - Dispatched when the navigation sidebar width changes. The event's `width` property contains the new width in pixels.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n * @cssprop [--n-layout-nav-border-color=var(--n-color-border)] - Controls the color of the border between the navigation and the main content area when the nav is open on wide screens.\n * @cssprop [--n-layout-resize-color=var(--n-color-accent)] - Controls the colour of the resize handle's accent bar (shown on hover, focus, and while dragging).\n * @cssprop [--n-layout-resize-block-size=100%] - Controls the block-axis (vertical) size of the resize handle. Set to a fixed length (e.g. `200px`) to constrain the handle so it doesn't span the full nav height.\n * @cssprop [--n-layout-resize-inset-inline-end=5px] - Controls the inline-end offset of the resize handle's accent bar (the visible vertical line shown on hover/focus/drag).\n * @cssprop [--n-layout-nav-rail-width=48px] - Controls the width of the navigation column when `collapse-mode=\"rail\"` is active and the nav is closed.\n * @cssprop [--n-layout-header-size=var(--n-space-xxl)] - Controls the block-axis (height) of the layout's header area. Also drives the size of the nav-toggle container and sticky-positioning offsets.\n */\n@customElement('nord-layout')\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n  private readonly resizeTooltipId = `n-layout-resize-tip-${++resizeTooltipIdCounter}`\n\n  private navSlot = new SlotController(this, 'nav')\n  private drawerSlot = new SlotController(this, 'drawer')\n  private topBarSlot = new SlotController(this, 'top-bar')\n  private headerSlot = new SlotController(this, 'header')\n  private footerSlot = new SlotController(this, 'footer')\n  private dividerTooltipSlot = new SlotController(this, 'tooltip-divider')\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === 'opened' && !this.wideScreen,\n    onDismiss: () => this.navTransition('close'),\n    isDismissible: node => node !== this.navEl,\n  })\n\n  private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: 'nord-layout-nav-state',\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: (data) => {\n      if ('navOpen' in data) {\n        this.navOpen = data.navOpen\n      }\n      if ('navWidth' in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })\n\n  @query('.n-layout-nav', true) private navEl!: HTMLDivElement\n  @query('.n-resize-tooltip') private resizeTooltipEl?: HTMLElement\n\n  @state() private navWidth = navWidthStore.value\n  @state() private isDragging = false\n  @state() private navState!: NavState\n  @state() private wideScreen = mediaQuery.matches\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'nav-open' }) navOpen!: boolean\n\n  /**\n   * Controls whether the navigation's open/closed state is persisted across page loads.\n   * This is useful for multi-page apps, where clicks on links trigger a full page load.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'persist-nav-state' }) persistNavState = false\n\n  /**\n   * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n   * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sync-nav-state' }) syncNavState = false\n\n  /**\n   * Initial width (in pixels) of the navigation sidebar when no value has been persisted.\n   * Changing this value between loads also re-seeds the persisted width for existing users,\n   * so design changes propagate without manual localStorage resets.\n   */\n  @property({ type: Number, reflect: true, attribute: 'default-nav-width' }) defaultNavWidth = NAV_DEFAULT_WIDTH\n\n  /**\n   * Minimum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n   */\n  @property({ type: Number, reflect: true, attribute: 'min-nav-width' }) minNavWidth = NAV_MIN_WIDTH\n\n  /**\n   * Maximum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n   */\n  @property({ type: Number, reflect: true, attribute: 'max-nav-width' }) maxNavWidth = NAV_MAX_WIDTH\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: 'm' | 'none' = 'm'\n\n  /**\n   * Controls whether the layout's header has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n  /**\n   * Controls whether the layout's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  /**\n   * Suppresses the built-in `<nord-nav-toggle>` rendered as the fallback for\n   * the `nav-toggle` slot. Set this when you've placed your own\n   * `<nord-nav-toggle>` elsewhere inside the layout (e.g. inside\n   * `<nord-header>`) and want the layout's default one hidden.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-default-nav-toggle' })\n  hideDefaultNavToggle: boolean = false\n\n  /**\n   * Suppresses the built-in collapse button rendered inside the nav (the\n   * lock-icon button that toggles the sidebar between opened and the\n   * collapsed state defined by `collapse-mode`). Set this when you've\n   * placed your own collapse control elsewhere.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-collapse-button' })\n  hideCollapseButton: boolean = false\n\n  /**\n   * When set, clicking the resize handle (without dragging) toggles the\n   * nav between opened and the collapsed state defined by `collapse-mode`.\n   * Dragging the handle still resizes the sidebar as usual; the click\n   * behaviour only fires when the pointer barely moves between down and up.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'toggle-on-resize-click' })\n  toggleOnResizeClick: boolean = false\n\n  /**\n   * Controls how the navigation renders when closed on wide viewports.\n   * `hide` (default) slides the nav off-screen entirely. `rail` keeps a\n   * narrow icon-only column visible, with tooltips for labels and flyout\n   * popovers for items that have a `subnav` slot.\n   *\n   * Narrow viewports always use the off-screen behaviour regardless of\n   * this setting.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' }) collapseMode: 'hide' | 'rail' = 'hide'\n\n  /**\n   * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n   * A narrow viewport is considered to be less than 768px wide.\n   */\n  get isNarrow(): boolean {\n    return !this.wideScreen\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n    this.addEventListener('click', this.handleHostClick)\n    this.addEventListener('mouseover', this.handleHostMouseOver)\n    this.addEventListener('mouseout', this.handleHostMouseOut)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('click', this.handleHostClick)\n    this.removeEventListener('mouseover', this.handleHostMouseOver)\n    this.removeEventListener('mouseout', this.handleHostMouseOut)\n  }\n\n  willUpdate() {\n    // we only want this logic to run once, before first render\n    if (this.hasUpdated) {\n      return\n    }\n\n    // fall back to the built-in constants when consumer-provided attributes\n    // are non-numeric (e.g. `min-nav-width=\"abc\"` produces NaN). reflect:true\n    // also rewrites the attribute in the DOM to the sanitized value\n    if (!Number.isFinite(this.defaultNavWidth)) {\n      this.defaultNavWidth = NAV_DEFAULT_WIDTH\n    }\n    if (!Number.isFinite(this.minNavWidth)) {\n      this.minNavWidth = NAV_MIN_WIDTH\n    }\n    if (!Number.isFinite(this.maxNavWidth)) {\n      this.maxNavWidth = NAV_MAX_WIDTH\n    }\n\n    // re-seed persisted width when the consumer-provided default-nav-width\n    // differs from the last default we applied. This lets apps roll out a\n    // new sidebar default without manual localStorage migrations.\n    if (navWidthDefaultStore.value !== this.defaultNavWidth) {\n      this.setNavWidth(this.defaultNavWidth)\n      navWidthStore.value = this.navWidth\n      // store the raw consumer-provided default so mismatch detection is\n      // independent of the min/max clamp\n      navWidthDefaultStore.value = this.defaultNavWidth\n    }\n    else {\n      // ensure a previously-persisted width still respects current min/max\n      this.setNavWidth(this.navWidth)\n    }\n\n    // on mobile it should always start closed\n    if (this.isNarrow) {\n      this.navState = 'closed'\n    }\n    // if nav state is persisted, and it was previously closed, start closed\n    else if (this.persistNavState && navOpenStore.value === false) {\n      this.navState = 'closed'\n    }\n    // otherwise start open\n    else {\n      this.navState = 'opened'\n    }\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const isRailCollapsed = this.wideScreen && this.collapseMode === 'rail' && navState !== 'opened'\n    const adjustedNavWidth = navState === 'opened' && this.wideScreen\n      ? navWidth\n      : isRailCollapsed\n        ? NAV_RAIL_WIDTH\n        : this.defaultNavWidth\n\n    return html`\n      <div\n        class=${classMap({\n          'n-layout': true,\n          'n-rtl': direction.isRTL,\n          'n-dragging': isDragging,\n          'n-has-header': headerSlot.hasContent,\n          'n-has-footer': footerSlot.hasContent,\n          'n-has-top-bar': topBarSlot.hasContent,\n          'n-has-drawer': drawerSlot.hasContent,\n          'n-has-nav': navSlot.hasContent,\n        })}\n        style=${styleMap({\n          '--_n-layout-nav-width': `${adjustedNavWidth}px`,\n          '--_n-layout-nav-rail-width': `var(--n-layout-nav-rail-width, ${NAV_RAIL_WIDTH}px)`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : 'closed'}\n        data-screen=${this.wideScreen ? 'wide' : 'narrow'}\n        data-collapse-mode=${this.collapseMode}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            aria-describedby=${cond(this.dividerTooltipSlot.hasContent && !isDragging, this.resizeTooltipId)}\n            @pointerdown=${cond(navState === 'opened' || isRailCollapsed, this.startDragging)}\n            @pointermove=${isDragging ? this.handleDrag : this.handleResizeHoverMove}\n            @pointerleave=${this.handleResizePointerLeave}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.dividerTooltipSlot.hasContent\n            ? html`\n                <nord-tooltip id=${this.resizeTooltipId} position=\"inline-end\" class=\"n-resize-tooltip\">\n                  <slot name=\"tooltip-divider\"></slot>\n                </nord-tooltip>\n              `\n            : nothing}\n          ${this.hideCollapseButton ? nothing : this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent && !this.hideDefaultNavToggle ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n            <slot name=\"footer\"></slot>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    return html`\n      <div class=\"n-nav-toggle-container\">\n        <slot\n          name=\"nav-toggle\"\n          @click=${this.handleToggleClick}\n          @mouseover=${this.handleMouseEnter}\n          @mouseout=${this.handleMouseLeave}\n        >\n          <nord-nav-toggle></nord-nav-toggle>\n        </slot>\n      </div>\n    `\n  }\n\n  private renderNavCollapse() {\n    return html`\n      <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n        <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n      </button>\n    `\n  }\n\n  @observe('navWidth', 'updated')\n  protected handleNavWidthChange(prev: number) {\n    navWidthStore.value = this.navWidth\n    if (prev != null) {\n      const navWidth = this.navWidth\n      this.dispatchEvent(new NavResizeEvent(navWidth))\n    }\n  }\n\n  @observe('navState')\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === 'wait' && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === 'unpeek') {\n      this.navEl.removeEventListener('transitionend', this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case 'closed':\n        this.navOpen = false\n        break\n      case 'opened':\n        this.navOpen = true\n        break\n      case 'wait':\n        this.peekTimeoutId = setTimeout(() => this.navTransition('timeout'), NAV_PEEK_DELAY)\n        break\n      case 'unpeek':\n        this.navEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe('navOpen', 'updated')\n  protected handleOpenChange(prev: boolean) {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, this.defaultNavWidth))\n    }\n\n    this.navTransition(this.navOpen ? 'open' : 'close')\n\n    if (this.persistNavState) {\n      navOpenStore.value = this.navOpen\n    }\n\n    // skip first update, we only want subsequent changes\n    if (prev != null) {\n      const navOpen = this.navOpen\n      this.broadcast.post({ navOpen })\n      this.dispatchEvent(new NavOpenChangeEvent(navOpen))\n    }\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleNavClick(e: Event) {\n    if (!e.defaultPrevented && !this.wideScreen) {\n      const target = e.target as HTMLElement\n\n      if (isNavItemLeaf(target)) {\n        this.navTransition('close')\n      }\n    }\n  }\n\n  private handleMainClick() {\n    this.navTransition('click')\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownOpen')\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownClose')\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.wideScreen = mediaQuery.matches\n    this.navTransition(this.wideScreen ? 'open' : 'close')\n  }\n\n  private handleToggleClick = (e: Event) => {\n    // Skip when a `<nord-nav-toggle>` is in the click path — `handleHostClick`\n    // will fire for it. Without this guard, an in-slot `<nord-nav-toggle>`\n    // would toggle twice (once via the slot handler, once via the host one).\n    if (isNavToggleClick(e)) {\n      return\n    }\n    this.navTransition('toggle')\n  }\n\n  // Allow `<nord-nav-toggle>` to be placed anywhere inside the layout, not\n  // just in the `nav-toggle` slot. Clicks on the host bubble up through the\n  // light-DOM subtree; if the composed path contains a `<nord-nav-toggle>`,\n  // we treat that as a toggle request.\n  private handleHostClick = (e: Event) => {\n    if (isNavToggleClick(e)) {\n      this.navTransition('toggle')\n    }\n  }\n\n  // Same delegation pattern as `handleHostClick`, but for hover-to-peek.\n  // `relatedTarget` filtering avoids re-firing as the cursor moves between\n  // children inside the same `<nord-nav-toggle>`.\n  private handleHostMouseOver = (e: MouseEvent) => {\n    const toggle = findNavToggleInPath(e.composedPath())\n    if (!toggle) {\n      return\n    }\n    if (e.relatedTarget instanceof Node && toggle.contains(e.relatedTarget)) {\n      return\n    }\n    this.handleMouseEnter()\n  }\n\n  private handleHostMouseOut = (e: MouseEvent) => {\n    const toggle = findNavToggleInPath(e.composedPath())\n    if (!toggle) {\n      return\n    }\n    if (e.relatedTarget instanceof Node && toggle.contains(e.relatedTarget)) {\n      return\n    }\n    this.handleMouseLeave()\n  }\n\n  private handleNavFocus = () => {\n    // In rail mode, the icons are already visible — focus inside the\n    // rail should not trigger a peek that re-expands the full sidebar.\n    if (this.wideScreen && this.collapseMode === 'rail') {\n      return\n    }\n    this.navTransition('focusin')\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition('focusout')\n  }\n\n  private handleMouseEnter = () => {\n    if (!this.wideScreen) {\n      return\n    }\n    if (this.collapseMode === 'rail') {\n      return\n    }\n    this.navTransition('pointerenter')\n  }\n\n  private handleMouseLeave = () => {\n    if (this.wideScreen && this.collapseMode === 'rail') {\n      return\n    }\n    this.navTransition('pointerleave')\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition('transitionend')\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case 'ArrowRight':\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case 'Enter':\n        this.navTransition('toggle')\n        break\n      case 'Home':\n        this.setNavWidth(this.minNavWidth)\n        break\n      case 'End':\n        this.setNavWidth(this.maxNavWidth)\n        break\n      default:\n        return\n    }\n\n    this.broadcast.post({ navWidth: this.navWidth })\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), this.minNavWidth, this.maxNavWidth)\n  }\n\n  private dragStartX = 0\n  private hasDragged = false\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n      this.dragStartX = e.clientX\n      this.hasDragged = false\n    }\n  }\n\n  private stopDragging() {\n    if (this.isDragging && this.toggleOnResizeClick && !this.hasDragged) {\n      this.navTransition('toggle')\n    }\n    this.isDragging = false\n    this.hasDragged = false\n    this.broadcast.post({ navWidth: this.navWidth })\n  }\n\n  private handleResizeHoverMove = (e: PointerEvent) => {\n    const target = e.currentTarget as HTMLElement | null\n    if (!target || !this.resizeTooltipEl)\n      return\n\n    const rect = target.getBoundingClientRect()\n    const offset = e.clientY - (rect.top + rect.height / 2)\n    this.resizeTooltipEl.style.setProperty('--n-resize-tooltip-y', `${offset}px`)\n  }\n\n  private handleResizePointerLeave = () => {\n    this.stopDragging()\n    this.resizeTooltipEl?.style.removeProperty('--n-resize-tooltip-y')\n  }\n\n  private handleDrag(e: PointerEvent) {\n    if (!this.hasDragged && Math.abs(e.clientX - this.dragStartX) < NAV_RESIZE_DRAG_THRESHOLD) {\n      return\n    }\n    this.hasDragged = true\n\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? 'open' : 'close')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-layout': Layout\n  }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","resizeTooltipIdCounter","NAV_DEFAULT_WIDTH","mediaQuery","matchMedia","matches","navWidthStore","navWidthDefaultStore","navOpenStore","findNavToggleInPath","path","target","HTMLElement","localName","isNavToggleClick","e","composedPath","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","resizeTooltipId","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","dividerTooltipSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","persistNavState","defaultNavWidth","minNavWidth","maxNavWidth","padding","sticky","stickyFooter","hideDefaultNavToggle","hideCollapseButton","toggleOnResizeClick","collapseMode","handleMediaQueryChange","handleToggleClick","handleHostClick","handleHostMouseOver","relatedTarget","Node","contains","handleMouseEnter","handleHostMouseOut","handleMouseLeave","handleNavFocus","handleMainFocus","handleTransitionEnd","dragStartX","hasDragged","handleResizeHoverMove","currentTarget","resizeTooltipEl","rect","getBoundingClientRect","offset","clientY","top","height","style","setProperty","handleResizePointerLeave","stopDragging","removeProperty","isNarrow","connectedCallback","super","listen","disconnectedCallback","willUpdate","hasUpdated","Number","isFinite","setNavWidth","render","isRailCollapsed","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","handleKeyboardResize","nothing","renderNavCollapse","handleMainClick","renderNavToggle","handleNavWidthChange","prev","dispatchEvent","NavResizeEvent","handleNavStateChange","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","Math","max","NavOpenChangeEvent","transition","defaultPrevented","el","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientX","abs","clientWidth","styles","componentStyle","stickyStyle","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"ssDAQA,MAAMA,EAAiB,KAAM,QAEhBC,EAIX,WAAAC,CAAYC,EAA8BC,GACxCD,EAAKE,cAAcC,MACnBA,KAAKF,QAAU,CAAEG,QAASP,KAAmBI,EAC9C,CAED,aAAAI,GACkC,oBAArBC,mBACTH,KAAKI,QAAU,IAAID,iBAAiBH,KAAKF,QAAQO,aACjDL,KAAKI,QAAQE,iBAAiB,UAAWN,MAE5C,CAED,gBAAAO,WACgB,QAAdC,EAAAR,KAAKI,eAAS,IAAAI,GAAAA,EAAAC,oBAAoB,UAAWT,MAC/B,QAAdU,EAAAV,KAAKI,eAAS,IAAAM,GAAAA,EAAAC,OACf,CAED,WAAAC,CAAYC,GACNb,KAAKF,QAAQG,WACfD,KAAKF,QAAQgB,UAAUD,EAAME,KAEhC,CAED,IAAAC,CAAKC,SACCjB,KAAKF,QAAQG,YACH,QAAZO,EAAAR,KAAKI,eAAO,IAAAI,GAAAA,EAAEU,YAAYD,GAE7B,ECrCa,SAAAE,EACdC,EACAC,EACAC,EAAkCC,KAAKC,UACvCC,EAAoCF,KAAKG,OAEzC,MAAO,CACL,SAAIC,GACF,IACE,MAAMA,EAAQC,aAAaC,QAAQT,GACnC,OAAOO,EAAQF,EAAYE,GAASN,CACrC,CACD,MAAAb,GACE,OAAOa,CACR,CACF,EAED,SAAIM,CAAMA,GACR,IACEC,aAAaE,QAAQV,EAAKE,EAAUK,GACrC,CACD,MAAAnB,GAEC,CACF,EAEL,ygUCFAuB,EAAKC,aAAaC,GAElB,IAAIC,EAAyB,EAE7B,MAAMC,EAAoB,IASpBC,EACoB,oBAAfC,WACLA,WAAW,sBACV,CACCC,SAAS,EACT,gBAAAhC,GAEC,GAGHiC,EAAgBpB,EAAQ,uBAAwBgB,GAMhDK,EAAuBrB,EAAQ,8BAA+BgB,GAC9DM,EAAetB,EAAQ,uBAAuB,GAEpD,SAASuB,EAAoBC,GAC3B,IAAK,MAAMC,KAAUD,EACnB,GAAIC,aAAkBC,aAAoC,oBAArBD,EAAOE,UAC1C,OAAOF,EAGX,OAAO,IACT,CAEA,SAASG,EAAiBC,GACxB,OAAiD,OAA1CN,EAAoBM,EAAEC,eAC/B,CAEA,MAAMC,EAAaC,EAAI,CACrBC,OAAQ,CACNC,OAAQ,SACR1C,MAAO,UAET2C,OAAQ,CACND,OAAQ,SACRE,KAAM,SACNC,QAAS,OACTC,aAAc,QAEhBC,KAAM,CACJL,OAAQ,SACRM,SAAU,SACVC,aAAc,OACdC,aAAc,UACdC,MAAO,SACPP,KAAM,UAERQ,QAAS,CACPC,cAAe,OACfT,KAAM,UAERU,KAAM,CACJZ,OAAQ,SACRG,QAAS,OACTC,aAAc,OACdS,QAAS,UAEXC,OAAQ,CACNd,OAAQ,SACRG,QAAS,OACTC,aAAc,OACdW,cAAe,YAsCJ,IAAMC,EAAN,cAAqBC,EAArB,WAAA1E,uBAIII,KAAAuE,gBAAkB,0BAAyBrC,EAEpDlC,KAAOwE,QAAG,IAAIC,EAAezE,KAAM,OACnCA,KAAU0E,WAAG,IAAID,EAAezE,KAAM,UACtCA,KAAU2E,WAAG,IAAIF,EAAezE,KAAM,WACtCA,KAAU4E,WAAG,IAAIH,EAAezE,KAAM,UACtCA,KAAU6E,WAAG,IAAIJ,EAAezE,KAAM,UACtCA,KAAkB8E,mBAAG,IAAIL,EAAezE,KAAM,mBAC9CA,KAAA+E,UAAY,IAAIC,EAAoBhF,MACpCA,KAAAiF,OAAS,IAAIC,EAAgBlF,MAC7BA,KAAAmF,aAAe,IAAIC,EAAuBpF,KAAM,CACtDqF,OAAQ,IAAwB,WAAlBrF,KAAKsF,WAA0BtF,KAAKuF,WAClDC,UAAW,IAAMxF,KAAKyF,cAAc,SACpCC,cAAeC,GAAQA,IAAS3F,KAAK4F,QAG/B5F,KAAA6F,UAAY,IAAIlG,EAAwEK,KAAM,CACpGK,YAAa,wBACbJ,QAAS,IAAMD,KAAK8F,cAAgB9F,KAAKuF,WACzCzE,UAAYC,IACN,YAAaA,IACff,KAAK+F,QAAUhF,EAAKgF,SAElB,aAAchF,IAChBf,KAAKgG,SAAWjF,EAAKiF,SACtB,IAOYhG,KAAAgG,SAAWzD,EAAcZ,MACzB3B,KAAUiG,YAAG,EAEbjG,KAAAuF,WAAanD,EAAWE,QAYmCtC,KAAekG,iBAAG,EAMrBlG,KAAY8F,cAAG,EAOb9F,KAAemG,gBAAGhE,EAKtBnC,KAAWoG,YApL9D,IAyLmDpG,KAAWqG,YAxL9D,IA8LSrG,KAAOsG,QAAiB,IAKTtG,KAAMuG,QAAY,EAKUvG,KAAYwG,cAAY,EAShGxG,KAAoByG,sBAAY,EAShCzG,KAAkB0G,oBAAY,EAS9B1G,KAAmB2G,qBAAY,EAW0B3G,KAAY4G,aAAoB,OAuRjF5G,KAAsB6G,uBAAG,KAC/B7G,KAAKuF,WAAanD,EAAWE,QAC7BtC,KAAKyF,cAAczF,KAAKuF,WAAa,OAAS,QAAQ,EAGhDvF,KAAA8G,kBAAqB9D,IAIvBD,EAAiBC,IAGrBhD,KAAKyF,cAAc,SAAS,EAOtBzF,KAAA+G,gBAAmB/D,IACrBD,EAAiBC,IACnBhD,KAAKyF,cAAc,SACpB,EAMKzF,KAAAgH,oBAAuBhE,IAC7B,MAAMK,EAASX,EAAoBM,EAAEC,gBAChCI,IAGDL,EAAEiE,yBAAyBC,MAAQ7D,EAAO8D,SAASnE,EAAEiE,gBAGzDjH,KAAKoH,mBAAkB,EAGjBpH,KAAAqH,mBAAsBrE,IAC5B,MAAMK,EAASX,EAAoBM,EAAEC,gBAChCI,IAGDL,EAAEiE,yBAAyBC,MAAQ7D,EAAO8D,SAASnE,EAAEiE,gBAGzDjH,KAAKsH,mBAAkB,EAGjBtH,KAAcuH,eAAG,KAGnBvH,KAAKuF,YAAoC,SAAtBvF,KAAK4G,cAG5B5G,KAAKyF,cAAc,UAAU,EAGvBzF,KAAewH,gBAAG,KACxBxH,KAAKyF,cAAc,WAAW,EAGxBzF,KAAgBoH,iBAAG,KACpBpH,KAAKuF,YAGgB,SAAtBvF,KAAK4G,cAGT5G,KAAKyF,cAAc,eAAe,EAG5BzF,KAAgBsH,iBAAG,KACrBtH,KAAKuF,YAAoC,SAAtBvF,KAAK4G,cAG5B5G,KAAKyF,cAAc,eAAe,EAG5BzF,KAAmByH,oBAAG,KAC5BzH,KAAKyF,cAAc,gBAAgB,EAyC7BzF,KAAU0H,WAAG,EACb1H,KAAU2H,YAAG,EAqBb3H,KAAA4H,sBAAyB5E,IAC/B,MAAMJ,EAASI,EAAE6E,cACjB,IAAKjF,IAAW5C,KAAK8H,gBACnB,OAEF,MAAMC,EAAOnF,EAAOoF,wBACdC,EAASjF,EAAEkF,SAAWH,EAAKI,IAAMJ,EAAKK,OAAS,GACrDpI,KAAK8H,gBAAgBO,MAAMC,YAAY,uBAAwB,GAAGL,MAAW,EAGvEjI,KAAwBuI,yBAAG,WACjCvI,KAAKwI,eACiB,QAAtBhI,EAAAR,KAAK8H,uBAAiB,IAAAtH,GAAAA,EAAA6H,MAAMI,eAAe,uBAAuB,CAcrE,CA3bC,YAAIC,GACF,OAAQ1I,KAAKuF,UACd,CAED,iBAAAoD,GACEC,MAAMD,oBACN3I,KAAKiF,OAAO4D,OAAOzG,EAAY,SAAUpC,KAAK6G,wBAC9C7G,KAAKM,iBAAiB,QAASN,KAAK+G,iBACpC/G,KAAKM,iBAAiB,YAAaN,KAAKgH,qBACxChH,KAAKM,iBAAiB,WAAYN,KAAKqH,mBACxC,CAED,oBAAAyB,GACEF,MAAME,uBACN9I,KAAKS,oBAAoB,QAAST,KAAK+G,iBACvC/G,KAAKS,oBAAoB,YAAaT,KAAKgH,qBAC3ChH,KAAKS,oBAAoB,WAAYT,KAAKqH,mBAC3C,CAED,UAAA0B,GAEM/I,KAAKgJ,aAOJC,OAAOC,SAASlJ,KAAKmG,mBACxBnG,KAAKmG,gBAAkBhE,GAEpB8G,OAAOC,SAASlJ,KAAKoG,eACxBpG,KAAKoG,YArRW,KAuRb6C,OAAOC,SAASlJ,KAAKqG,eACxBrG,KAAKqG,YAvRW,KA6Rd7D,EAAqBb,QAAU3B,KAAKmG,iBACtCnG,KAAKmJ,YAAYnJ,KAAKmG,iBACtB5D,EAAcZ,MAAQ3B,KAAKgG,SAG3BxD,EAAqBb,MAAQ3B,KAAKmG,iBAIlCnG,KAAKmJ,YAAYnJ,KAAKgG,UAIpBhG,KAAK0I,UAIA1I,KAAKkG,kBAA0C,IAAvBzD,EAAad,MAH5C3B,KAAKsF,SAAW,SAQhBtF,KAAKsF,SAAW,SAEnB,CAED,MAAA8D,GACE,MAAMpD,SAAEA,EAAQV,SAAEA,EAAQd,QAAEA,EAAOI,WAAEA,EAAUC,WAAEA,EAAUF,WAAEA,EAAUD,WAAEA,EAAUuB,WAAEA,EAAUlB,UAAEA,GAAc/E,KACzGqJ,EAAkBrJ,KAAKuF,YAAoC,SAAtBvF,KAAK4G,cAAwC,WAAbtB,EACrEgE,EAAgC,WAAbhE,GAAyBtF,KAAKuF,WACnDS,EACAqD,EA1Te,GA4TbrJ,KAAKmG,gBAEX,OAAOoD,CAAI,eAECC,EAAS,CACf,YAAY,EACZ,QAASzE,EAAU0E,MACnB,aAAcxD,EACd,eAAgBrB,EAAW8E,WAC3B,eAAgB7E,EAAW6E,WAC3B,gBAAiB/E,EAAW+E,WAC5B,eAAgBhF,EAAWgF,WAC3B,YAAalF,EAAQkF,wBAEfC,EAAS,CACf,wBAAyB,GAAGL,MAC5B,6BAA8B,uDAErB9E,EAAQkF,WAAapE,EAAW,0BAC7BtF,KAAKuF,WAAa,OAAS,iCACpBvF,KAAK4G,oDAIdpC,EAAQoF,sBACP5J,KAAKuH,gCACFvH,KAAKoH,kCACLpH,KAAKsH,4BACXtH,KAAK6J,+BACJ7J,KAAK8J,iDAEY9J,KAAK+J,4HAMVC,EAAKhK,KAAK8E,mBAAmB4E,aAAezD,EAAYjG,KAAKuE,mCACjEyF,EAAkB,WAAb1E,GAAyB+D,EAAiBrJ,KAAKiK,iCACpDhE,EAAajG,KAAKkK,WAAalK,KAAK4H,yCACnC5H,KAAKuI,yCACRvI,KAAKwI,2BACPxI,KAAKmK,kCACNnK,KAAK0I,mBAEf1I,KAAK8E,mBAAmB4E,WACtBH,CAAI,qBACiBvJ,KAAKuE,sHAI1B6F,KACFpK,KAAK0G,mBAAqB0D,EAAUpK,KAAKqK,iEAGPrK,KAAKwH,4BAA0BxH,KAAKsK,oBACtE9F,EAAQkF,aAAe1J,KAAKyG,qBAAuBzG,KAAKuK,kBAAoBH,uOAgB7DpK,KAAK0E,WAAWkF,0DAMxC,CAEO,eAAAW,GACN,OAAOhB,CAAI,uEAIIvJ,KAAK8G,kCACD9G,KAAKoH,gCACNpH,KAAKsH,oEAMxB,CAEO,iBAAA+C,GACN,OAAOd,CAAI,0CAC+BvJ,KAAK8G,4FAIhD,CAGS,oBAAA0D,CAAqBC,GAE7B,GADAlI,EAAcZ,MAAQ3B,KAAKgG,SACf,MAARyE,EAAc,CAChB,MAAMzE,EAAWhG,KAAKgG,SACtBhG,KAAK0K,cAAc,IAAIC,EAAe3E,GACvC,CACF,CAGS,oBAAA4E,CAAqBH,GAQ7B,OAPa,SAATA,GAAmBzK,KAAK6K,eAC1BC,aAAa9K,KAAK6K,eAEP,WAATJ,GACFzK,KAAK4F,MAAMnF,oBAAoB,gBAAiBT,KAAKyH,qBAG/CzH,KAAKsF,UACX,IAAK,SACHtF,KAAK+F,SAAU,EACf,MACF,IAAK,SACH/F,KAAK+F,SAAU,EACf,MACF,IAAK,OACH/F,KAAK6K,cAAgBE,YAAW,IAAM/K,KAAKyF,cAAc,YA3b1C,KA4bf,MACF,IAAK,SACHzF,KAAK4F,MAAMtF,iBAAiB,gBAAiBN,KAAKyH,oBAAqB,CAAEuD,MAAM,IAKpF,CAGS,gBAAAC,CAAiBR,GAczB,GAbKzK,KAAKiG,YAGRjG,KAAKmJ,YAAY+B,KAAKC,IAAInL,KAAKgG,SAAUhG,KAAKmG,kBAGhDnG,KAAKyF,cAAczF,KAAK+F,QAAU,OAAS,SAEvC/F,KAAKkG,kBACPzD,EAAad,MAAQ3B,KAAK+F,SAIhB,MAAR0E,EAAc,CAChB,MAAM1E,EAAU/F,KAAK+F,QACrB/F,KAAK6F,UAAU7E,KAAK,CAAE+E,YACtB/F,KAAK0K,cAAc,IAAIU,EAAmBrF,GAC3C,CACF,CAMO,aAAAN,CAAc5E,GACpBb,KAAKsF,SAAWpC,EAAWmI,WAAWrL,KAAKsF,SAAUzE,EACtD,CAEO,cAAAkJ,CAAe/G,GACrB,IAAKA,EAAEsI,mBAAqBtL,KAAKuF,WAAY,CAC3C,MAAM3C,EAASI,EAAEJ,OA1ZL,CAAC2I,GAAoD,kBAAjBA,EAAGzI,UACd0I,CAApBD,EA2ZC3I,KA3ZqC2I,EAAGE,WA4ZxDzL,KAAKyF,cAAc,QAEtB,CA9ZiB,IAAC8F,CA+ZpB,CAEO,eAAAjB,GACNtK,KAAKyF,cAAc,QACpB,CAEO,kBAAAoE,CAAmB7G,GAGA,kBAFVA,EAAEJ,OAENE,WACT9C,KAAKyF,cAAc,eAEtB,CAEO,mBAAAqE,CAAoB9G,GAGD,kBAFVA,EAAEJ,OAENE,WACT9C,KAAKyF,cAAc,gBAEtB,CA0FO,oBAAA0E,CAAqBnH,GAC3B,MAAMgD,SACJA,EACAjB,WAAW2G,MAAEA,IACX1L,KAEJ,OAAQgD,EAAE5B,KACR,IAAK,YACHpB,KAAKmJ,YAAYnD,GAAY0F,GAlmBb,QAmmBhB,MACF,IAAK,aACH1L,KAAKmJ,YAAYnD,GAAY0F,EArmBb,SAsmBhB,MACF,IAAK,QACH1L,KAAKyF,cAAc,UACnB,MACF,IAAK,OACHzF,KAAKmJ,YAAYnJ,KAAKoG,aACtB,MACF,IAAK,MACHpG,KAAKmJ,YAAYnJ,KAAKqG,aACtB,MACF,QACE,OAGJrG,KAAK6F,UAAU7E,KAAK,CAAEgF,SAAUhG,KAAKgG,WACrChD,EAAE2I,gBACH,CAEO,WAAAxC,CAAYyC,GAClB5L,KAAKgG,SAAW6F,EAAMX,KAAKY,MAAMF,GAAQ5L,KAAKoG,YAAapG,KAAKqG,YACjE,CAKO,aAAA4D,CAAcjH,GACpB,GAAiB,IAAbA,EAAE+I,OAAc,CACH/I,EAAEJ,OACVoJ,kBAAkBhJ,EAAEiJ,WAC3BjM,KAAKiG,YAAa,EAClBjG,KAAK0H,WAAa1E,EAAEkJ,QACpBlM,KAAK2H,YAAa,CACnB,CACF,CAEO,YAAAa,GACFxI,KAAKiG,YAAcjG,KAAK2G,sBAAwB3G,KAAK2H,YACvD3H,KAAKyF,cAAc,UAErBzF,KAAKiG,YAAa,EAClBjG,KAAK2H,YAAa,EAClB3H,KAAK6F,UAAU7E,KAAK,CAAEgF,SAAUhG,KAAKgG,UACtC,CAiBO,UAAAkE,CAAWlH,GACjB,IAAKhD,KAAK2H,YAAcuD,KAAKiB,IAAInJ,EAAEkJ,QAAUlM,KAAK0H,YAhqBpB,EAiqB5B,OAEF1H,KAAK2H,YAAa,EAElB,MAAMiE,EAAQ5L,KAAK+E,UAAU0E,MAAQzJ,KAAKoM,YAAcpJ,EAAEkJ,QAAUlJ,EAAEkJ,QAEtElM,KAAKmJ,YAAYyC,GACjB5L,KAAKyF,cAAcmG,GA5qBI,IA4qB0B,OAAS,QAC3D,GA/jBMvH,EAAMgI,OAAG,CAACC,EAAgBC,EAAalE,GAgCRmE,EAAA,CAArCC,EAAM,iBAAiB,IAAoCpI,EAAAqI,UAAA,aAAA,GACxBF,EAAA,CAAnCC,EAAM,sBAA0DpI,EAAAqI,UAAA,uBAAA,GAEhDF,EAAA,CAAhBG,KAA8CtI,EAAAqI,UAAA,gBAAA,GAC9BF,EAAA,CAAhBG,KAAkCtI,EAAAqI,UAAA,kBAAA,GAClBF,EAAA,CAAhBG,KAAmCtI,EAAAqI,UAAA,gBAAA,GACnBF,EAAA,CAAhBG,KAA+CtI,EAAAqI,UAAA,kBAAA,GAMmBF,EAAA,CAAlEI,EAAS,CAAEC,SAAS,EAAMC,KAAMC,QAASC,UAAW,cAA+B3I,EAAAqI,UAAA,eAAA,GAMRF,EAAA,CAA3EI,EAAS,CAAEC,SAAS,EAAMC,KAAMC,QAASC,UAAW,uBAA8C3I,EAAAqI,UAAA,uBAAA,GAM1BF,EAAA,CAAxEI,EAAS,CAAEE,KAAMC,QAASF,SAAS,EAAMG,UAAW,oBAAwC3I,EAAAqI,UAAA,oBAAA,GAOlBF,EAAA,CAA1EI,EAAS,CAAEE,KAAM7D,OAAQ4D,SAAS,EAAMG,UAAW,uBAA0D3I,EAAAqI,UAAA,uBAAA,GAKvCF,EAAA,CAAtEI,EAAS,CAAEE,KAAM7D,OAAQ4D,SAAS,EAAMG,UAAW,mBAA8C3I,EAAAqI,UAAA,mBAAA,GAK3BF,EAAA,CAAtEI,EAAS,CAAEE,KAAM7D,OAAQ4D,SAAS,EAAMG,UAAW,mBAA8C3I,EAAAqI,UAAA,mBAAA,GAMrEF,EAAA,CAA5BI,EAAS,CAAEC,SAAS,KAAmCxI,EAAAqI,UAAA,eAAA,GAKZF,EAAA,CAA3CI,EAAS,CAAEE,KAAMC,QAASF,SAAS,KAA+BxI,EAAAqI,UAAA,cAAA,GAKKF,EAAA,CAAvEI,EAAS,CAAEE,KAAMC,QAASF,SAAS,EAAMG,UAAW,mBAAgD3I,EAAAqI,UAAA,oBAAA,GASrGF,EAAA,CADCI,EAAS,CAAEE,KAAMC,QAASF,SAAS,EAAMG,UAAW,6BAChB3I,EAAAqI,UAAA,4BAAA,GASrCF,EAAA,CADCI,EAAS,CAAEE,KAAMC,QAASF,SAAS,EAAMG,UAAW,0BAClB3I,EAAAqI,UAAA,0BAAA,GASnCF,EAAA,CADCI,EAAS,CAAEE,KAAMC,QAASF,SAAS,EAAMG,UAAW,4BACjB3I,EAAAqI,UAAA,2BAAA,GAWqBF,EAAA,CAAxDI,EAAS,CAAEC,SAAS,EAAMG,UAAW,mBAAyD3I,EAAAqI,UAAA,oBAAA,GAwLrFF,EAAA,CADTS,EAAQ,WAAY,YAOpB5I,EAAAqI,UAAA,uBAAA,MAGSF,EAAA,CADTS,EAAQ,aAyBR5I,EAAAqI,UAAA,uBAAA,MAGSF,EAAA,CADTS,EAAQ,UAAW,YAoBnB5I,EAAAqI,UAAA,mBAAA,MA/WkBrI,EAAMmI,EAAA,CAD1BU,EAAc,gBACM7I,SAAAA"}

package/lib/Message.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as i,LitElement as r}from"lit";import{property as t,customElement as s}from"lit/decorators.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{ref as a}from"lit/directives/ref.js";import{F as l}from"./FocusableMixin-BlQLNPdJ.js";import{s as c}from"./Component-DSU3Qp0O.js";import{s as d}from"./DropdownItem-Cp-z3XA9.js";import{LocalizeController as m}from"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const p=e`:host{--_n-message-border-color:var(--n-message-border-color, var(--n-color-border));padding:var(--n-space-s);border-block-end:1px solid var(--_n-message-border-color)}.n-message{flex-direction:column;gap:var(--n-space-xs);align-items:flex-start;padding-inline-start:var(--n-space-xl);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading);margin:0;color:var(--n-color-text);position:relative}slot[name=footer]{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);line-height:var(--n-line-height-heading)}:host([highlight]) .n-message::after{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.n-unread{position:absolute;min-inline-size:var(--n-size-icon-xxs);min-block-size:var(--n-size-icon-xxs);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);background:var(--n-color-accent);border-radius:var(--n-border-radius-circle)}`;let f=class extends(l(r)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?o=>i`<a href="${n(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${o}</a>`:o=>i`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${o}</button>`)(i`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,d,p],o([t({reflect:!0})],f.prototype,"href",void 0),o([t({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([t({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([s("nord-message")],f);var h=f;export{h as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as i,LitElement as r}from"lit";import{property as t,customElement as s}from"lit/decorators.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{ref as a}from"lit/directives/ref.js";import{F as l}from"./FocusableMixin-BlQLNPdJ.js";import{s as c}from"./Component-DSU3Qp0O.js";import{s as d}from"./DropdownItem-Cb-7cHMg.js";import{LocalizeController as m}from"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const p=e`:host{--_n-message-border-color:var(--n-message-border-color, var(--n-color-border));padding:var(--n-space-s);border-block-end:1px solid var(--_n-message-border-color)}.n-message{flex-direction:column;gap:var(--n-space-xs);align-items:flex-start;padding-inline-start:var(--n-space-xl);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading);margin:0;color:var(--n-color-text);position:relative}slot[name=footer]{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);line-height:var(--n-line-height-heading)}:host([highlight]) .n-message::after{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.n-unread{position:absolute;min-inline-size:var(--n-size-icon-xxs);min-block-size:var(--n-size-icon-xxs);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);background:var(--n-color-accent);border-radius:var(--n-border-radius-circle)}`;let f=class extends(l(r)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?o=>i`<a href="${n(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${o}</a>`:o=>i`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${o}</button>`)(i`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,d,p],o([t({reflect:!0})],f.prototype,"href",void 0),o([t({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([t({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([s("nord-message")],f);var h=f;export{h as default};
 //# sourceMappingURL=Message.js.map

package/lib/NavGroup.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as i,LitElement as n,html as t,nothing as r}from"lit";import{property as o,customElement as s}from"lit/decorators.js";import{s as a}from"./Component-DSU3Qp0O.js";import"./Icon.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const l=i`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-start:var(--n-space-m);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let d=class extends n{render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:r}<div role="list" aria-labelledby="${this.heading?"heading":r}"><slot></slot></div>`}};d.styles=[a,l],e([o({reflect:!0})],d.prototype,"heading",void 0),d=e([s("nord-nav-group")],d);var h=d;export{h as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as i,html as a,nothing as s}from"lit";import{property as o,customElement as n}from"lit/decorators.js";import{s as r}from"./Component-DSU3Qp0O.js";import"./Icon.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const l=t`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{display:var(--n-nav-group-heading-display,block);min-inline-size:100%;color:var(--n-color-nav-heading);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-start:var(--n-space-m);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([data-rail-collapsed]) .n-heading{display:none}:host([slot=subnav][data-rail-collapsed]) .n-heading{display:block;margin-block-start:var(--n-space-s)}`,d="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let h=class extends i{constructor(){super(...arguments),this.handleViewportChange=()=>this.updateRailState()}connectedCallback(){super.connectedCallback(),this.startObservingLayout(),d.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingLayout(),d.removeEventListener("change",this.handleViewportChange)}startObservingLayout(){this.observedLayout=this.closest("nord-layout"),this.observedLayout&&(this.updateRailState(),this.layoutObserver=new MutationObserver((()=>this.updateRailState())),this.layoutObserver.observe(this.observedLayout,{attributes:!0,attributeFilter:["nav-open","collapse-mode"]}))}stopObservingLayout(){var e;null===(e=this.layoutObserver)||void 0===e||e.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.toggleAttribute("data-rail-collapsed",!1)}updateRailState(){if(!this.observedLayout)return;const e=d.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");this.toggleAttribute("data-rail-collapsed",e)}render(){return a`${this.heading?a`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:s}<div role="list" aria-labelledby="${this.heading?"heading":s}"><slot></slot></div>`}};h.styles=[r,l],e([o({reflect:!0})],h.prototype,"heading",void 0),h=e([n("nord-nav-group")],h);var c=h;export{c as default};
 //# sourceMappingURL=NavGroup.js.map

package/lib/NavGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './NavGroup.css'\nimport '../icon/Icon.js'\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n */\n@customElement('nord-nav-group')\nexport default class NavGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property({ reflect: true }) heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? 'heading' : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-group': NavGroup\n  }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"siCAmBe,IAAMA,EAAN,cAAuBC,EAQpC,MAAAC,GACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,wBAIjE,GAdMN,EAAAO,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAwBZ,EAAAa,UAAA,eAAA,GAN1Bb,EAAQU,EAAA,CAD5BI,EAAc,mBACMd,SAAAA"}
+{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './NavGroup.css'\nimport '../icon/Icon.js'\n\n// Mirrors the layout's wide-viewport breakpoint. Used to drive the\n// `data-rail-collapsed` attribute below — Safari doesn't support\n// `:host-context()`, so we propagate the layout's rail state via an\n// observed attribute on the host instead.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-nav-group-heading-display=block] - Controls the `display` of the group's heading. Set to `none` to hide it — useful for a `slot=\"subnav\"` group whose heading repeats the parent item's label inline; the heading is still shown in the rail flyout where it titles the projected list.\n */\n@customElement('nord-nav-group')\nexport default class NavGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property({ reflect: true }) heading?: string\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.toggleAttribute('data-rail-collapsed', false)\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    const next = railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    this.toggleAttribute('data-rail-collapsed', next)\n  }\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? 'heading' : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-group': NavGroup\n  }\n}\n"],"names":["railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","NavGroup","LitElement","constructor","this","handleViewportChange","updateRailState","connectedCallback","super","startObservingLayout","disconnectedCallback","stopObservingLayout","observedLayout","closest","layoutObserver","MutationObserver","observe","attributes","attributeFilter","_a","disconnect","undefined","toggleAttribute","next","getAttribute","hasAttribute","render","html","heading","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"mvCAWMA,EACoB,oBAAfC,WACLA,WAAW,sBACV,CACCC,SAAS,EACT,gBAAAC,GAEC,EACD,mBAAAC,GAEC,GAiBM,IAAMC,EAAN,cAAuBC,EAAvB,WAAAC,uBAuBLC,KAAoBC,qBAAG,IAAMD,KAAKE,iBAwC3C,CApDC,iBAAAC,GACEC,MAAMD,oBACNH,KAAKK,uBACLb,EAAeG,iBAAiB,SAAUK,KAAKC,qBAChD,CAED,oBAAAK,GACEF,MAAME,uBACNN,KAAKO,sBACLf,EAAeI,oBAAoB,SAAUI,KAAKC,qBACnD,CAIO,oBAAAI,GACNL,KAAKQ,eAAiBR,KAAKS,QAAqB,eAC3CT,KAAKQ,iBAGVR,KAAKE,kBACLF,KAAKU,eAAiB,IAAIC,kBAAiB,IAAMX,KAAKE,oBACtDF,KAAKU,eAAeE,QAAQZ,KAAKQ,eAAgB,CAC/CK,YAAY,EACZC,gBAAiB,CAAC,WAAY,mBAEjC,CAEO,mBAAAP,SACe,QAArBQ,EAAAf,KAAKU,sBAAgB,IAAAK,GAAAA,EAAAC,aACrBhB,KAAKU,oBAAiBO,EACtBjB,KAAKQ,oBAAiBS,EACtBjB,KAAKkB,gBAAgB,uBAAuB,EAC7C,CAEO,eAAAhB,GACN,IAAKF,KAAKQ,eACR,OAEF,MAAMW,EAAO3B,EAAeE,SAC+B,SAAtDM,KAAKQ,eAAeY,aAAa,mBAChCpB,KAAKQ,eAAea,aAAa,YACvCrB,KAAKkB,gBAAgB,sBAAuBC,EAC7C,CAED,MAAAG,GACE,OAAOC,CAAI,GACPvB,KAAKwB,QAAUD,CAAI,wDAAwDvB,KAAKwB,cAAgBC,sCAC/DzB,KAAKwB,QAAU,UAAYC,wBAIjE,GA7DM5B,EAAA6B,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAwBlC,EAAAmC,UAAA,eAAA,GAT1BnC,EAAQgC,EAAA,CAD5BI,EAAc,mBACMpC,SAAAA"}

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as a,nothing as t,LitElement as o}from"lit";import{property as i,customElement as r}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ref as c}from"lit/directives/ref.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{o as d}from"./observe-D0n0zOfU.js";import{c as p}from"./cond-CI1KbneT.js";import{N as m}from"./events-Bv6wNHwJ.js";import{F as h}from"./FocusableMixin-BlQLNPdJ.js";import{s as g}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const b=e`:host{--_n-nav-item-box-shadow:none;--n-nav-item-color:var(--n-color-text-weak);--n-nav-item-background:transparent;--n-nav-item-border-radius:var(--n-border-radius-s);--n-nav-item-padding-block:var(--n-space-s);--n-nav-item-padding-inline:var(--n-space-s);--n-nav-item-line-height:var(--n-line-height-tight);--n-nav-item-color-hover:var(--n-color-text);--n-nav-item-background-hover:var(--n-color-nav-hover);--n-nav-item-color-active:var(--n-color-text-on-accent);--n-nav-item-background-active:var(--n-color-accent);--n-nav-item-color-expanded:var(--n-color-text-weak);--n-nav-item-background-expanded:var(--n-color-accent);--n-nav-item-expanded-overlay-opacity:0.12;--n-nav-item-expanded-overlay-filter:brightness(150%)}.n-nav-item{user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-nav-item-line-height);appearance:none;color:var(--n-nav-item-color);padding-block-start:var(--n-nav-item-padding-block);padding-block-end:var(--n-nav-item-padding-block);padding-inline-start:var(--n-nav-item-padding-inline);padding-inline-end:var(--n-nav-item-padding-inline);min-block-size:32px;margin-block-end:1px;border-radius:var(--n-nav-item-border-radius);text-decoration:none;inline-size:100%;max-inline-size:100%;background:var(--n-nav-item-background);cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative;z-index:var(--n-index-default)}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-nav-item-background-hover);color:var(--n-nav-item-color-hover)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-nav-item-background-active);color:var(--n-nav-item-color-active);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}:host([active]) .n-nav-item[aria-expanded]{--_n-nav-item-box-shadow:none;color:var(--n-nav-item-color-expanded);font-weight:var(--n-font-weight);background:0 0}:host([active]) .n-nav-item[aria-expanded]:focus-visible{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) .n-nav-item[aria-expanded]::after{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-nav-item-border-radius);block-size:100%;inline-size:100%;opacity:var(--n-nav-item-expanded-overlay-opacity);background:var(--n-nav-item-background-expanded);filter:var(--n-nav-item-expanded-overlay-filter)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-notification);color:#fff;font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let u=class extends(h(o)){constructor(){super(...arguments),this.subnavSlot=new l(this,"subnav"),this.direction=new v(this),this.active=!1,this.open=!1}get hasSubNav(){return this.subnavSlot.hasContent}render(){const n=a`${this.icon?a`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:t}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?a`<span class="n-nav-badge">${this.badge}</span>`:t}</div>`;let e;return e=this.subnavSlot.hasContent?this.renderToggle(n):this.href?this.renderLink(n):this.renderButton(n),a`<div role="listitem">${e}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(n){return a`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${p(this.active,"page")}" href="${this.href||""}">${n}</a>`}renderToggle(n){return a`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${n}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(n){return a`<button class="n-nav-item" ${c(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new m("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new m("activate"))}};u.styles=[g,b],n([i({type:Boolean,reflect:!0})],u.prototype,"active",void 0),n([i({reflect:!0})],u.prototype,"icon",void 0),n([i({reflect:!0})],u.prototype,"href",void 0),n([i({reflect:!0})],u.prototype,"badge",void 0),n([i({reflect:!0,type:Boolean})],u.prototype,"open",void 0),n([d("active","updated")],u.prototype,"handleActiveChange",null),u=n([r("nord-nav-item")],u);var f=u;export{f as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,nothing as a,LitElement as i}from"lit";import{query as o,state as r,property as s,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{ref as v}from"lit/directives/ref.js";import{D as c}from"./DirectionController-ChvNGESZ.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import{o as h}from"./observe-D0n0zOfU.js";import{c as b}from"./cond-CI1KbneT.js";import{N as u}from"./events-Bv6wNHwJ.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{s as g}from"./Component-DSU3Qp0O.js";import"./Popout-DtEL0HZ0.js";import"./Tooltip.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./fsm-Bq5jMQrK.js";const f=e`:host{--_n-nav-item-box-shadow:none;--n-nav-item-color:var(--n-color-text-weak);--n-nav-item-background:transparent;--n-nav-item-border-radius:var(--n-border-radius-s);--n-nav-item-padding-block:var(--n-space-s);--n-nav-item-padding-inline:var(--n-space-s);--n-nav-item-line-height:var(--n-line-height-tight);--n-nav-item-icon-gap:calc(var(--n-space-s) * 1.4);--n-nav-item-color-hover:var(--n-color-text);--n-nav-item-background-hover:var(--n-color-nav-hover);--n-nav-item-color-active:var(--n-color-text-on-accent);--n-nav-item-background-active:var(--n-color-accent);--n-nav-item-color-expanded:var(--n-color-text-weak);--n-nav-item-background-expanded:var(--n-color-accent);--n-nav-item-expanded-overlay-opacity:0.12;--n-nav-item-expanded-overlay-filter:brightness(150%)}.n-nav-item{user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-nav-item-line-height);appearance:none;color:var(--n-nav-item-color);padding-block-start:var(--n-nav-item-padding-block);padding-block-end:var(--n-nav-item-padding-block);padding-inline-start:var(--n-nav-item-padding-inline);padding-inline-end:var(--n-nav-item-padding-inline);min-block-size:32px;margin-block-end:1px;border-radius:var(--n-nav-item-border-radius);text-decoration:none;inline-size:100%;max-inline-size:100%;background:var(--n-nav-item-background);cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative;z-index:var(--n-index-default)}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-nav-item-background-hover);color:var(--n-nav-item-color-hover)}.n-nav-item:active{opacity:.7}.n-nav-content{display:flex;align-items:center;flex:1;min-inline-size:0}.n-nav-label{flex:1;min-inline-size:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-nav-item-background-active);color:var(--n-nav-item-color-active);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}:host([active]) .n-nav-item[aria-expanded]{--_n-nav-item-box-shadow:none;color:var(--n-nav-item-color-expanded);font-weight:var(--n-font-weight);background:0 0}:host([active]) .n-nav-item[aria-expanded]:focus-visible{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) .n-nav-item[aria-expanded]::after{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-nav-item-border-radius);block-size:100%;inline-size:100%;opacity:var(--n-nav-item-expanded-overlay-opacity);background:var(--n-nav-item-background-expanded);filter:var(--n-nav-item-expanded-overlay-filter)}.n-nav-icon{margin-inline-end:var(--n-nav-item-icon-gap);flex-shrink:0}slot.n-nav-icon{display:inline-flex;align-items:center}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-rail-host{position:relative}.n-rail-item{--_n-rail-size:32px;inline-size:var(--_n-rail-size);min-inline-size:var(--_n-rail-size);block-size:var(--_n-rail-size);padding:0;justify-content:center}.n-rail-item .n-nav-icon{margin-inline-end:0}.n-rail-fallback{font-weight:var(--n-font-weight-active)}.n-rail-subnav-indicator{position:absolute;inset-block-end:calc(var(--n-space-xs)/ 2);inset-inline-end:calc(var(--n-space-xs)/ 2);inline-size:5px;block-size:5px;color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong));pointer-events:none}.n-rtl .n-rail-subnav-indicator{transform:scaleX(-1)}.n-rail-host:hover .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong))}.n-rail-host:has(nord-popout[open]) .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color-active,var(--n-color-border-hover))}.n-rail-host:has(nord-popout[open]) .n-rail-item{background:var(--n-nav-item-background-expanded)}.n-nav-badge.n-rail-badge{position:absolute;inset-block-start:3px;inset-inline-end:2px;margin:0;padding:0;min-inline-size:var(--n-rail-badge-size,5px);inline-size:var(--n-rail-badge-size,5px);block-size:var(--n-rail-badge-size,5px);font-size:0;color:transparent;overflow:hidden}.n-rail-slotted-end{position:absolute;inset-block-start:0;inset-inline-end:8px;pointer-events:none}.n-rail-flyout-body{min-inline-size:var(--n-rail-flyout-min-inline-size,220px);padding:var(--n-rail-flyout-padding,var(--n-space-s));background:var(--n-rail-flyout-background,var(--n-color-surface));border-radius:var(--n-border-radius-s);box-shadow:var(--n-rail-flyout-box-shadow,var(--n-box-shadow-popout))}.n-rail-host nord-popout{--n-color-surface:transparent;--n-box-shadow-popout:none;transform:translate(var(--n-rail-flyout-offset-inline,0),var(--n-rail-flyout-offset-block,0))}.n-rtl .n-rail-host nord-popout{transform:translate(calc(var(--n-rail-flyout-offset-inline,0) * -1),var(--n-rail-flyout-offset-block,0))}.n-rail-flyout-body ::slotted(nord-nav-group){margin-inline-start:0}.n-nav-badge{display:inline-block;margin-inline-start:var(--n-nav-badge-margin-inline-start,var(--n-space-xs));border-radius:var(--n-nav-badge-border-radius,var(--n-border-radius-pill));background:var(--n-nav-badge-background,var(--n-color-status-notification));color:var(--n-nav-badge-color,#fff);font-weight:var(--n-nav-badge-font-weight,var(--n-font-weight));font-feature-settings:var(--n-font-features-reduced);padding-block-start:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-block-end:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-inline-start:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/ 2));padding-inline-end:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/ 2));text-align:center;min-inline-size:var(--n-nav-badge-min-inline-size,20px);font-size:var(--n-nav-badge-font-size,var(--n-font-size-xs));line-height:var(--n-nav-badge-line-height,1)}`;let x=0,y=0;const k="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let w=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new p(this,"subnav"),this.iconSlot=new p(this,"icon"),this.railTooltipSlot=new p(this,"rail-tooltip"),this.direction=new c(this),this.tooltipId="n-nav-rail-tip-"+ ++x,this.popoutId="n-nav-rail-pop-"+ ++y,this.railCollapsed=!1,this.active=!1,this.open=!1,this.handleViewportChange=()=>this.updateRailState()}get hasSubNav(){return this.subnavSlot.hasContent}connectedCallback(){super.connectedCallback(),this.startObservingLayout(),k.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingLayout(),k.removeEventListener("change",this.handleViewportChange)}startObservingLayout(){this.observedLayout=this.closest("nord-layout"),this.observedLayout&&(this.updateRailState(),this.layoutObserver=new MutationObserver((()=>this.updateRailState())),this.layoutObserver.observe(this.observedLayout,{attributes:!0,attributeFilter:["nav-open","collapse-mode"]}))}stopObservingLayout(){var n,e;null===(n=this.layoutObserver)||void 0===n||n.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.railCollapsed=!1,null===(e=this.popoutEl)||void 0===e||e.hide()}updateRailState(){var n,e;if(!this.observedLayout)return;const t=!!!(null===(n=this.parentElement)||void 0===n?void 0:n.closest("nord-nav-item"))&&k.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");t||null===(e=this.popoutEl)||void 0===e||e.hide(),this.railCollapsed=t}render(){if(this.railCollapsed)return this.renderRail();const n=t`${this.renderLeadingIcon()}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:a}<slot name="end"></slot></div>`;let e;return e=this.subnavSlot.hasContent?this.renderToggle(n):this.href?this.renderLink(n):this.renderButton(n),t`<div role="listitem">${e}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLeadingIcon(){return this.iconSlot.hasContent?t`<slot name="icon" class="n-nav-icon"></slot>`:this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}renderRail(){const n=this.renderLeadingIcon(),e=n===a?t`<span class="n-rail-fallback">${this.textInitial}</span>`:n,i=this.badge?t`<span class="n-nav-badge n-rail-badge">${this.badge}</span>`:a;return this.subnavSlot.hasContent?this.renderRailFlyout(e,i):t`<div role="listitem" class="n-rail-host">${this.href?t`<a class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-current="${b(this.active,"page")}" aria-describedby="${this.tooltipId}" href="${this.href}">${e}${i}</a>`:t`<button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-describedby="${this.tooltipId}">${e}${i}</button>`}<slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip></div>`}renderRailFlyout(n,e){return t`<div role="listitem" class="n-rail-host"><button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-controls="${this.popoutId}" aria-describedby="${this.tooltipId}">${n}${e} <svg class="n-rail-subnav-indicator" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="5" height="5" viewBox="0 0 5 5" fill="none"><path d="M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z" fill="currentColor"/></svg></button><slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip><nord-popout id="${this.popoutId}" position="inline-end" always-floating><div class="n-rail-flyout-body"><slot name="${this.subnavSlot.slotName}"></slot></div></nord-popout></div>`}get textInitial(){var n,e;return(null!==(e=null===(n=this.textContent)||void 0===n?void 0:n.trim())&&void 0!==e?e:"").charAt(0).toUpperCase()}renderLink(n){return t`<a class="n-nav-item" ${v(this.focusableRef)} aria-current="${b(this.active,"page")}" href="${this.href||""}">${n}</a>`}renderToggle(n){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${v(this.focusableRef)}>${n}<nord-icon size="xxs" class="${d({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(n){return t`<button class="n-nav-item" ${v(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new u("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new u("activate"))}};w.styles=[g,f],n([o("nord-popout")],w.prototype,"popoutEl",void 0),n([r()],w.prototype,"railCollapsed",void 0),n([s({type:Boolean,reflect:!0})],w.prototype,"active",void 0),n([s({reflect:!0})],w.prototype,"icon",void 0),n([s({reflect:!0})],w.prototype,"href",void 0),n([s({reflect:!0})],w.prototype,"badge",void 0),n([s({reflect:!0,type:Boolean})],w.prototype,"open",void 0),n([h("active","updated")],w.prototype,"handleActiveChange",null),w=n([l("nord-nav-item")],w);var $=w;export{$ as default};
 //# sourceMappingURL=NavItem.js.map

package/lib/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './NavItem.css'\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-nav-item-color=var(--n-color-text-weak)] - Text color in the default state.\n * @cssprop [--n-nav-item-background=transparent] - Background color in the default state.\n * @cssprop [--n-nav-item-border-radius=var(--n-border-radius-s)] - Border radius of the item and its active-parent overlay.\n * @cssprop [--n-nav-item-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding.\n * @cssprop [--n-nav-item-padding-inline=var(--n-space-s)] - Inline-axis (start/end) padding.\n * @cssprop [--n-nav-item-line-height=var(--n-line-height-tight)] - Line height of the item's text.\n * @cssprop [--n-nav-item-color-hover=var(--n-color-text)] - Text color on hover.\n * @cssprop [--n-nav-item-background-hover=var(--n-color-nav-hover)] - Background color on hover.\n * @cssprop [--n-nav-item-color-active=var(--n-color-text-on-accent)] - Text color when the item is `active`.\n * @cssprop [--n-nav-item-background-active=var(--n-color-accent)] - Background color when the item is `active`.\n * @cssprop [--n-nav-item-color-expanded=var(--n-color-text-weak)] - Text color when the item is an active parent (its subnav is expanded).\n * @cssprop [--n-nav-item-background-expanded=var(--n-color-accent)] - Background color of the overlay drawn behind an active-parent item.\n * @cssprop [--n-nav-item-expanded-overlay-opacity=0.12] - Opacity of the active-parent overlay. Set to `1` for a solid background.\n * @cssprop [--n-nav-item-expanded-overlay-filter=brightness(150%)] - Filter applied to the active-parent overlay. Set to `none` to disable.\n */\n@customElement('nord-nav-item')\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, 'subnav')\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property({ reflect: true }) badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    }\n    else if (this.href) {\n      element = this.renderLink(innards)\n    }\n    else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, 'page')} href=${this.href || ''}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ 'n-toggle-icon': true, 'n-rtl': this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent('toggle'))\n  }\n\n  @observe('active', 'updated')\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent('activate'))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-item': NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","hasSubNav","hasContent","render","innards","html","icon","nothing","badge","element","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"uhJA2Ce,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBTL,KAAIM,MAAG,CA+EpD,CA1EC,aAAIC,GACF,OAAOP,KAAKC,WAAWO,UACxB,CAED,MAAAC,GACE,MAAMC,EAAUC,CAAI,GAChBX,KAAKY,KAAOD,CAAI,uCAAsCX,KAAKY,8BAA+BC,6EAGxFb,KAAKc,MAAQH,CAAI,6BAA6BX,KAAKc,eAAiBD,UAG1E,IAAIE,EAYJ,OATEA,EADEf,KAAKC,WAAWO,WACRR,KAAKgB,aAAaN,GAErBV,KAAKiB,KACFjB,KAAKkB,WAAWR,GAGhBV,KAAKmB,aAAaT,GAGvBC,CAAI,wBAELI,gBACWf,KAAKC,WAAWmB,uBAAqBpB,KAAKM,qBAG5D,CAEO,UAAAY,CAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAIrB,KAAKsB,+BAA8BC,EAAKvB,KAAKK,OAAQ,kBAAgBL,KAAKiB,MAAQ,OAC1GP,OAGP,CAEO,YAAAM,CAAaN,GACnB,OAAOC,CAAI,sCAGEX,KAAKwB,8BACExB,KAAKM,KAAO,OAAS,YACnCe,EAAIrB,KAAKsB,iBAETZ,iCAIQe,EAAS,CAAE,iBAAiB,EAAM,QAASzB,KAAKG,UAAUuB,gEAKzE,CAEO,YAAAP,CAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAIrB,KAAKsB,iBAAiBZ,YACpE,CAEO,UAAAc,GACNxB,KAAKM,MAAQN,KAAKM,KAClBN,KAAK2B,cAAc,IAAIC,EAAU,UAClC,CAGS,kBAAAC,GACJ7B,KAAKK,SAAWL,KAAKO,WACvBP,KAAK2B,cAAc,IAAIC,EAAU,YAEpC,GA7GMhC,EAAAkC,OAAS,CAACC,EAAgBC,GASWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK7BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBzC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBzC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAsBzC,EAAA0C,UAAA,aAAA,GAMCL,EAAA,CAA3CC,EAAS,CAAEG,SAAS,EAAMF,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GA0E9CL,EAAA,CADTM,EAAQ,SAAU,YAKlB3C,EAAA0C,UAAA,qBAAA,MA9GkB1C,EAAOqC,EAAA,CAD3BO,EAAc,kBACM5C,SAAAA"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './NavItem.css'\n\nimport '../popout/Popout.js'\nimport '../tooltip/Tooltip.js'\n\nlet railTooltipIdCounter = 0\nlet railPopoutIdCounter = 0\n\n// Mirrors the layout's wide-viewport breakpoint so nav items only\n// switch to icon-only rendering when the layout actually shows the rail.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot icon - Slot for a custom leading icon element. Use when the `icon` attribute isn't enough — for example, an icon wrapped in a styled badge or circular frame. When set, it takes priority over the `icon` attribute and is shown in both the expanded nav and the collapsed rail.\n * @slot end - Trailing content rendered after the label inside the item's flex row. The slotted element flows naturally — it claims its real width and the label flex-shrinks to make room. Use for a custom badge, count pill, action icon, etc. when the `badge` attribute's plain text isn't enough.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @slot rail-tooltip - Full content of the rail-mode tooltip. When provided, it replaces the default label projection — write the tooltip's content directly (label + count + keyboard shortcut etc., bound to whatever reactive state you like). When absent, the tooltip falls back to the item's default-slot label. Only rendered in rail mode.\n *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-nav-item-color=var(--n-color-text-weak)] - Text color in the default state.\n * @cssprop [--n-nav-item-background=transparent] - Background color in the default state.\n * @cssprop [--n-nav-item-border-radius=var(--n-border-radius-s)] - Border radius of the item and its active-parent overlay.\n * @cssprop [--n-nav-item-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding.\n * @cssprop [--n-nav-item-padding-inline=var(--n-space-s)] - Inline-axis (start/end) padding.\n * @cssprop [--n-nav-item-line-height=var(--n-line-height-tight)] - Line height of the item's text.\n * @cssprop [--n-nav-item-icon-gap=calc(var(--n-space-s) * 1.4)] - Inline gap between the leading icon (the `icon` attribute or `icon` slot) and the item's text.\n * @cssprop [--n-nav-item-color-hover=var(--n-color-text)] - Text color on hover.\n * @cssprop [--n-nav-item-background-hover=var(--n-color-nav-hover)] - Background color on hover.\n * @cssprop [--n-nav-item-color-active=var(--n-color-text-on-accent)] - Text color when the item is `active`.\n * @cssprop [--n-nav-item-background-active=var(--n-color-accent)] - Background color when the item is `active`.\n * @cssprop [--n-nav-item-color-expanded=var(--n-color-text-weak)] - Text color when the item is an active parent (its subnav is expanded).\n * @cssprop [--n-nav-item-background-expanded=var(--n-color-accent)] - Background color of the overlay drawn behind an active-parent item.\n * @cssprop [--n-nav-item-expanded-overlay-opacity=0.12] - Opacity of the active-parent overlay. Set to `1` for a solid background.\n * @cssprop [--n-nav-item-expanded-overlay-filter=brightness(150%)] - Filter applied to the active-parent overlay. Set to `none` to disable.\n * @cssprop [--n-rail-flyout-background=var(--n-color-surface)] - Background colour of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-box-shadow=var(--n-box-shadow-popout)] - Box-shadow of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-min-inline-size=220px] - Minimum inline size (width in LTR) of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-padding=var(--n-space-s)] - Padding of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-offset-inline=0] - Extra inline-axis offset applied to the rail flyout (positive values push it away from the rail in LTR; mirrored in RTL).\n * @cssprop [--n-rail-flyout-offset-block=0] - Extra block-axis offset applied to the rail flyout (positive values push it downward).\n * @cssprop [--n-rail-subnav-indicator-color=var(--n-color-border-strong)] - Colour of the small triangle indicator drawn in the bottom-inline-end corner of rail items that have a subnav (default + hover state).\n * @cssprop [--n-rail-subnav-indicator-color-active=var(--n-color-border-hover)] - Colour of the triangle indicator while the item's flyout popout is open.\n * @cssprop [--n-nav-badge-background=var(--n-color-status-notification)] - Background colour of the built-in `badge` attribute pill (`.n-nav-badge`).\n * @cssprop [--n-nav-badge-color=#fff] - Text colour of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-size=var(--n-font-size-xs)] - Font size of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-weight=var(--n-font-weight)] - Font weight of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-line-height=1] - Line height of the built-in `badge` attribute pill. Combined with `--n-nav-badge-padding-block` this controls the pill's effective block size.\n * @cssprop [--n-nav-badge-padding-block=var(--n-space-xs)] - Block-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-padding-inline=calc(var(--n-space-s) / 2)] - Inline-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-border-radius=var(--n-border-radius-pill)] - Border radius of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-min-inline-size=20px] - Minimum inline size (width in LTR) of the built-in `badge` attribute pill — sets a visual floor for single-digit counts.\n * @cssprop [--n-nav-badge-margin-inline-start=var(--n-space-xs)] - Inline-start margin separating the badge from the preceding label inside the nav-item's flex row.\n * @cssprop [--n-rail-badge-size=5px] - Diameter of the rail-mode dot the badge collapses into when the layout is in `collapse-mode=\"rail\"` and not `nav-open`.\n */\n@customElement('nord-nav-item')\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, 'subnav')\n  private iconSlot = new SlotController(this, 'icon')\n  private railTooltipSlot = new SlotController(this, 'rail-tooltip')\n  private direction = new DirectionController(this)\n\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private readonly tooltipId = `n-nav-rail-tip-${++railTooltipIdCounter}`\n  private readonly popoutId = `n-nav-rail-pop-${++railPopoutIdCounter}`\n\n  @query('nord-popout') private popoutEl?: Popout\n\n  /**\n   * Reflects whether the ancestor layout is in rail-collapsed state\n   * (i.e. `collapse-mode=\"rail\"` and `nav-open` is absent).\n   * @internal\n   */\n  @state() private railCollapsed = false\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property({ reflect: true }) badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.railCollapsed = false\n    this.popoutEl?.hide()\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    // Subnav children render inside a flyout popover when rail-collapsed;\n    // they should keep their full layout, not collapse to icons themselves.\n    const isNested = !!this.parentElement?.closest('nord-nav-item')\n    const next = !isNested\n      && railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    if (!next) {\n      this.popoutEl?.hide()\n    }\n    this.railCollapsed = next\n  }\n\n  render() {\n    if (this.railCollapsed) {\n      return this.renderRail()\n    }\n\n    const innards = html`\n      ${this.renderLeadingIcon()}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n        <slot name=\"end\"></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    }\n    else if (this.href) {\n      element = this.renderLink(innards)\n    }\n    else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  // Resolves the leading icon shown in both the expanded nav and the rail:\n  // a slotted custom icon wins over the `icon` attribute, which wins over nothing.\n  private renderLeadingIcon(): TemplateResult | typeof nothing {\n    if (this.iconSlot.hasContent) {\n      return html`<slot name=\"icon\" class=\"n-nav-icon\"></slot>`\n    }\n    if (this.icon) {\n      return html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>`\n    }\n    return nothing\n  }\n\n  private renderRail(): TemplateResult {\n    const leadingIcon = this.renderLeadingIcon()\n    // Rail is icon-only, so when there's no icon at all we fall back to the\n    // first letter of the label rather than rendering an empty button.\n    const iconEl = leadingIcon === nothing\n      ? html`<span class=\"n-rail-fallback\">${this.textInitial}</span>`\n      : leadingIcon\n    const badge = this.badge ? html`<span class=\"n-nav-badge n-rail-badge\">${this.badge}</span>` : nothing\n\n    if (this.subnavSlot.hasContent) {\n      return this.renderRailFlyout(iconEl, badge)\n    }\n\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        ${this.href\n          ? html`\n              <a\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-current=${cond(this.active, 'page')}\n                aria-describedby=${this.tooltipId}\n                href=${this.href}\n              >\n                ${iconEl}${badge}\n              </a>\n            `\n          : html`\n              <button\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-describedby=${this.tooltipId}\n              >\n                ${iconEl}${badge}\n              </button>\n            `}\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n      </div>\n    `\n  }\n\n  private renderRailFlyout(iconEl: TemplateResult, badge: TemplateResult | typeof nothing): TemplateResult {\n    // Click-only: nord-popout's getToggle() listens for click on the\n    // [aria-controls={popoutId}] target. Hover used to open as well, but\n    // that conflicted with the popout's click-to-toggle (hover opened, then\n    // the click was treated as a close).\n    // The tooltip still shows on hover so the icon has an accessible label\n    // — nord-tooltip listens for mouseover/focusin on [aria-describedby].\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        <button\n          class=\"n-nav-item n-rail-item\"\n          ${ref(this.focusableRef)}\n          aria-controls=${this.popoutId}\n          aria-describedby=${this.tooltipId}\n        >\n          ${iconEl}${badge}\n          <svg\n            class=\"n-rail-subnav-indicator\"\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"5\"\n            height=\"5\"\n            viewBox=\"0 0 5 5\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n        <nord-popout id=${this.popoutId} position=\"inline-end\" always-floating>\n          <div class=\"n-rail-flyout-body\">\n            <slot name=${this.subnavSlot.slotName}></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private get textInitial(): string {\n    const text = this.textContent?.trim() ?? ''\n    return text.charAt(0).toUpperCase()\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, 'page')} href=${this.href || ''}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ 'n-toggle-icon': true, 'n-rtl': this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent('toggle'))\n  }\n\n  @observe('active', 'updated')\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent('activate'))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-item': NavItem\n  }\n}\n"],"names":["railTooltipIdCounter","railPopoutIdCounter","railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","iconSlot","railTooltipSlot","direction","DirectionController","tooltipId","popoutId","railCollapsed","active","open","handleViewportChange","updateRailState","hasSubNav","hasContent","connectedCallback","super","startObservingLayout","disconnectedCallback","stopObservingLayout","observedLayout","closest","layoutObserver","MutationObserver","observe","attributes","attributeFilter","_a","disconnect","undefined","_b","popoutEl","hide","next","parentElement","getAttribute","hasAttribute","render","renderRail","innards","html","renderLeadingIcon","badge","nothing","element","renderToggle","href","renderLink","renderButton","slotName","icon","leadingIcon","iconEl","textInitial","renderRailFlyout","ref","focusableRef","cond","textContent","trim","charAt","toUpperCase","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","query","prototype","state","property","type","Boolean","reflect","customElement"],"mappings":"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"}

package/lib/NavToggle-BQxuLW2X.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as i,LitElement as e}from"lit";import{property as r,state as s,customElement as n}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{ref as l}from"lit/directives/ref.js";import{D as d}from"./DirectionController-ChvNGESZ.js";import{F as c}from"./FocusableMixin-BlQLNPdJ.js";import{s as u}from"./Component-DSU3Qp0O.js";import h from"./Icon.js";import{LocalizeController as v}from"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.js";const p="navigation-toggle-lock";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z" fill="currentColor"/></svg>',tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron",title:p});const b="navigation-toggle";var g=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z" fill="currentColor"/></svg>',tags:"nordicon navigation hamburger menu toggle navigation three lines",title:b});const f=o`:host{color:var(--n-color-icon);display:inline-flex}@media (min-width:768px){:host([data-auto-hidden]){display:none}}nord-button{--n-button-color:currentColor}nord-icon{display:block;transform:translateX(-1px);color:currentColor}.icon-active{display:none}.is-rtl .icon-active{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) .icon-active{display:block}:host(:is(:hover,:focus-within)) .icon-default{display:none}}`;h.registerIcon(g),h.registerIcon(m);let y=class extends(c(e)){constructor(){super(...arguments),this.direction=new d(this),this.localization=new v(this),this.icon=b,this.iconActive=p,this.autoHide=!1,this.square=!1,this.size="m",this.iconSize="m",this.autoHidden=!1}connectedCallback(){super.connectedCallback(),this.startAutoHide()}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoHide()}updated(t){var o;null===(o=super.updated)||void 0===o||o.call(this,t),t.has("autoHide")&&(this.stopAutoHide(),this.startAutoHide()),t.has("autoHidden")&&this.toggleAttribute("data-auto-hidden",this.autoHidden)}startAutoHide(){if(!this.autoHide)return;const t=this.closest("nord-layout");t&&(this.observedLayout=t,this.autoHidden=t.hasAttribute("nav-open"),this.layoutObserver=new MutationObserver((()=>{this.autoHidden=t.hasAttribute("nav-open")})),this.layoutObserver.observe(t,{attributes:!0,attributeFilter:["nav-open"]}))}stopAutoHide(){var t;null===(t=this.layoutObserver)||void 0===t||t.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.autoHidden=!1}render(){return i`<nord-button variant="plain" ?square="${this.square}" size="${this.size}" ${l(this.focusableRef)} class="${a({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="${this.iconSize}" class="icon-default" name="${this.icon}"></nord-icon><nord-icon size="${this.iconSize}" class="icon-active" name="${this.iconActive}"></nord-icon></nord-button>`}};y.styles=[u,f],t([r({reflect:!0})],y.prototype,"icon",void 0),t([r({reflect:!0,attribute:"icon-active"})],y.prototype,"iconActive",void 0),t([r({type:Boolean,reflect:!0,attribute:"auto-hide"})],y.prototype,"autoHide",void 0),t([r({type:Boolean,reflect:!0})],y.prototype,"square",void 0),t([r({reflect:!0})],y.prototype,"size",void 0),t([r({reflect:!0,attribute:"icon-size"})],y.prototype,"iconSize",void 0),t([s()],y.prototype,"autoHidden",void 0),y=t([n("nord-nav-toggle")],y);var z=y;export{z as N,m as l};
+//# sourceMappingURL=NavToggle-BQxuLW2X.js.map

package/lib/NavToggle-BQxuLW2X.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavToggle-BQxuLW2X.js","sources":["../../icons/lib/assets/navigation-toggle-lock.js","../../icons/lib/assets/navigation-toggle.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-toggle-lock\";\nexport const tags =\n  \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-toggle\";\nexport const tags =\n  \"nordicon navigation hamburger menu toggle navigation three lines\";\n","import * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport * as unlockIcon from '@nordhealth/icons/lib/assets/navigation-toggle.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './NavToggle.css'\n\nimport '../button/Button.js'\nimport '../visually-hidden/VisuallyHidden.js'\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n *\n * Used internally by `<nord-layout>` as the default contents of its\n * `nav-toggle` slot. Can also be placed **anywhere inside `<nord-layout>`**\n * (e.g. inside a `<nord-header>` next to the page title) — the layout\n * listens for clicks on any descendant `<nord-nav-toggle>` and toggles the\n * navigation accordingly. Outside of a `<nord-layout>` it renders as a\n * presentational button with no behaviour.\n *\n * The two displayed icons can be customised via the `icon` and\n * `icon-active` attributes. The first is shown in the resting state; the\n * second replaces it on hover/focus (≥ 768px).\n *\n * Set `auto-hide` to have the toggle disappear automatically when the\n * ancestor `<nord-layout>`'s nav is open (on wide viewports), mirroring\n * the built-in fallback toggle's behaviour.\n *\n * @status ready\n * @category action\n *\n * @localization label - Accessible label for the nav toggle button.\n */\n@customElement('nord-nav-toggle')\nexport default class NavToggle extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private direction = new DirectionController(this)\n  private localization = new LocalizeController<'nord-nav-toggle'>(this)\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement\n\n  /**\n   * Icon shown in the resting state. Accepts any registered icon name.\n   * Defaults to `navigation-toggle`.\n   */\n  @property({ reflect: true }) icon: string = unlockIcon.title\n\n  /**\n   * Icon shown on hover/focus (≥ 768px), swapping in for `icon`.\n   * Defaults to `navigation-toggle-lock`.\n   */\n  @property({ reflect: true, attribute: 'icon-active' }) iconActive: string = lockIcon.title\n\n  /**\n   * When set, the toggle finds its ancestor `<nord-layout>` and hides\n   * itself on wide viewports while the layout's nav is open. Useful when\n   * placing the toggle outside the `nav-toggle` slot.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'auto-hide' }) autoHide: boolean = false\n\n  /**\n   * Forwards the `square` attribute to the underlying `<nord-button>`,\n   * giving the toggle a fixed square footprint instead of the default\n   * pill shape.\n   */\n  @property({ type: Boolean, reflect: true }) square: boolean = false\n\n  /**\n   * Size of the underlying `<nord-button>`. Defaults to `m`.\n   */\n  @property({ reflect: true }) size: 's' | 'm' = 'm'\n\n  /**\n   * Size of the inner `<nord-icon>` elements. Accepts the same values\n   * as `<nord-icon>`'s `size`. Defaults to `m`.\n   */\n  @property({ reflect: true, attribute: 'icon-size' }) iconSize: 'xxs' | 'xs' | 's' | 'm' | 'l' = 'm'\n\n  /**\n   * Reflects whether `auto-hide` is engaged (i.e. the ancestor layout\n   * currently has `nav-open`). The CSS hides the host based on this.\n   */\n  @state() private autoHidden: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startAutoHide()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopAutoHide()\n  }\n\n  protected updated(changed: Map<string, unknown>) {\n    super.updated?.(changed)\n    if (changed.has('autoHide')) {\n      this.stopAutoHide()\n      this.startAutoHide()\n    }\n    if (changed.has('autoHidden')) {\n      this.toggleAttribute('data-auto-hidden', this.autoHidden)\n    }\n  }\n\n  private startAutoHide() {\n    if (!this.autoHide) {\n      return\n    }\n    const layout = this.closest<HTMLElement>('nord-layout')\n    if (!layout) {\n      return\n    }\n    this.observedLayout = layout\n    this.autoHidden = layout.hasAttribute('nav-open')\n    this.layoutObserver = new MutationObserver(() => {\n      this.autoHidden = layout.hasAttribute('nav-open')\n    })\n    this.layoutObserver.observe(layout, {\n      attributes: true,\n      attributeFilter: ['nav-open'],\n    })\n  }\n\n  private stopAutoHide() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.autoHidden = false\n  }\n\n  render() {\n    return html`\n      <nord-button variant=\"plain\" ?square=${this.square} size=${this.size} ${ref(this.focusableRef)} class=${classMap({ 'is-rtl': this.direction.isRTL })}>\n        <nord-visually-hidden>${this.localization.term('label')}</nord-visually-hidden>\n        <nord-icon size=${this.iconSize} class=\"icon-default\" name=${this.icon}></nord-icon>\n        <nord-icon size=${this.iconSize} class=\"icon-active\" name=${this.iconActive}></nord-icon>\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-toggle': NavToggle\n  }\n}\n"],"names":["title","Icon","registerIcon","unlockIcon","lockIcon","NavToggle","FocusableMixin","LitElement","constructor","this","direction","DirectionController","localization","LocalizeController","icon","unlockIcon.title","iconActive","lockIcon.title","autoHide","square","size","iconSize","autoHidden","connectedCallback","super","startAutoHide","disconnectedCallback","stopAutoHide","updated","changed","_a","call","has","toggleAttribute","layout","closest","observedLayout","hasAttribute","layoutObserver","MutationObserver","observe","attributes","attributeFilter","disconnect","undefined","render","html","ref","focusableRef","classMap","isRTL","term","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","state","customElement"],"mappings":"uiBACO,MAAMA,EAAQ,qEADN,oTAGb,0GCFK,MAAMA,EAAQ,gEADN,kMAGb,whBCeFC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GA0BH,IAAMC,EAAN,cAAwBC,EAAeC,IAAvC,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,MAQpCA,KAAAK,KAAeC,EAMWN,KAAAO,WAAqBC,EAORR,KAAQS,UAAY,EAO5CT,KAAMU,QAAY,EAKjCV,KAAIW,KAAc,IAMMX,KAAQY,SAAmC,IAM/EZ,KAAUa,YAAY,CA0DxC,CAxDC,iBAAAC,GACEC,MAAMD,oBACNd,KAAKgB,eACN,CAED,oBAAAC,GACEF,MAAME,uBACNjB,KAAKkB,cACN,CAES,OAAAC,CAAQC,SACA,QAAhBC,EAAAN,MAAMI,eAAU,IAAAE,GAAAA,EAAAC,KAAAtB,KAAAoB,GACZA,EAAQG,IAAI,cACdvB,KAAKkB,eACLlB,KAAKgB,iBAEHI,EAAQG,IAAI,eACdvB,KAAKwB,gBAAgB,mBAAoBxB,KAAKa,WAEjD,CAEO,aAAAG,GACN,IAAKhB,KAAKS,SACR,OAEF,MAAMgB,EAASzB,KAAK0B,QAAqB,eACpCD,IAGLzB,KAAK2B,eAAiBF,EACtBzB,KAAKa,WAAaY,EAAOG,aAAa,YACtC5B,KAAK6B,eAAiB,IAAIC,kBAAiB,KACzC9B,KAAKa,WAAaY,EAAOG,aAAa,WAAW,IAEnD5B,KAAK6B,eAAeE,QAAQN,EAAQ,CAClCO,YAAY,EACZC,gBAAiB,CAAC,cAErB,CAEO,YAAAf,SACe,QAArBG,EAAArB,KAAK6B,sBAAgB,IAAAR,GAAAA,EAAAa,aACrBlC,KAAK6B,oBAAiBM,EACtBnC,KAAK2B,oBAAiBQ,EACtBnC,KAAKa,YAAa,CACnB,CAED,MAAAuB,GACE,OAAOC,CAAI,yCAC8BrC,KAAKU,iBAAeV,KAAKW,SAAQ2B,EAAItC,KAAKuC,wBAAuBC,EAAS,CAAE,SAAUxC,KAAKC,UAAUwC,kCAClHzC,KAAKG,aAAauC,KAAK,mDAC7B1C,KAAKY,wCAAsCZ,KAAKK,sCAChDL,KAAKY,uCAAqCZ,KAAKO,wCAGtE,GAzGMX,EAAA+C,OAAS,CAACC,EAAgBC,GAWJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAuCpD,EAAAqD,UAAA,YAAA,GAMLH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAAoDtD,EAAAqD,UAAA,kBAAA,GAOtBH,EAAA,CAAnEC,EAAS,CAAEI,KAAMC,QAASJ,SAAS,EAAME,UAAW,eAAwCtD,EAAAqD,UAAA,gBAAA,GAOjDH,EAAA,CAA3CC,EAAS,CAAEI,KAAMC,QAASJ,SAAS,KAA+BpD,EAAAqD,UAAA,cAAA,GAKtCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BpD,EAAAqD,UAAA,YAAA,GAMGH,EAAA,CAApDC,EAAS,CAAEC,SAAS,EAAME,UAAW,eAA6DtD,EAAAqD,UAAA,gBAAA,GAMlFH,EAAA,CAAhBO,KAA2CzD,EAAAqD,UAAA,kBAAA,GAjDzBrD,EAASkD,EAAA,CAD7BQ,EAAc,oBACM1D,SAAAA"}

package/lib/NavToggle.js

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";export{N as default}from"./NavToggle-QzUt-7lX.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/ref.js";import"./DirectionController-ChvNGESZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./Component-DSU3Qp0O.js";import"./Icon.js";import"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";
+import"./tslib.es6-CmLYFWVC.js";export{N as default}from"./NavToggle-BQxuLW2X.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/ref.js";import"./DirectionController-ChvNGESZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./Component-DSU3Qp0O.js";import"./Icon.js";import"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";
 //# sourceMappingURL=NavToggle.js.map

package/lib/Navigation.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as a,html as t,nothing as e}from"lit";import{property as i,customElement as r}from"lit/decorators.js";import{E as s}from"./EventController-BBOmvfLa.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-DSU3Qp0O.js";const c=o`:host{--_n-navigation-background-color:var(--n-navigation-background-color, var(--n-color-nav-surface));--_n-navigation-scroll-shadow-color-start:var(--n-navigation-scroll-shadow-color-start, rgb(0, 0, 0, 0.1));--_n-navigation-scroll-shadow-color-end:var(--n-navigation-scroll-shadow-color-end, rgb(0, 0, 0, 0.1));--_n-navigation-scroll-mask:var(--n-navigation-scroll-mask, none);--_n-navigation-padding-block:var(--n-navigation-padding-block, var(--n-space-m));--_n-navigation-padding-inline:var(--n-navigation-padding-inline, var(--n-space-m));--_n-navigation-footer-padding-block:var(--n-navigation-footer-padding-block, var(--n-space-s));--_n-navigation-footer-padding-inline:var(--n-navigation-footer-padding-inline, var(--_n-navigation-padding-inline));--_n-navigation-header-block-size:var(--n-navigation-header-block-size, var(--n-space-xxl));--_n-navigation-header-padding-inline:var(--n-navigation-header-padding-inline);--_n-navigation-header-background:var(--n-navigation-header-background, var(--_n-navigation-background-color));--_n-navigation-header-divider:var(--n-navigation-header-divider, 1px solid var(--n-color-border));--_n-navigation-header-color:var(--n-navigation-header-color);--_n-navigation-header-toggle-icon-color:var(--n-navigation-header-toggle-icon-color);--_n-navigation-header-focus-style:var(--n-navigation-header-focus-style, var(--_n-navigation-dropdown-box-shadow));--_n-navigation-dropdown-box-shadow:0 0 0 1px var(--n-color-accent) inset;display:flex;flex-direction:column;block-size:100%;background:var(--_n-navigation-background-color)}.n-navigation-main{display:flex;flex-direction:column;flex:1;overflow-y:auto;overscroll-behavior-y:none}nav{flex:1;padding-block-start:var(--_n-navigation-padding-block);padding-block-end:var(--_n-navigation-padding-block);padding-inline-start:var(--_n-navigation-padding-inline);padding-inline-end:var(--_n-navigation-padding-inline)}::slotted(nord-nav-group[heading]:first-of-type){margin-block-start:calc(var(--n-space-s) * -1)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center;--n-button-text-align:start;--n-button-background-color:transparent;--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-gradient:none}slot[name=header]{--n-button-border-radius:0;--n-button-color:var(--_n-navigation-header-color);--n-button-min-block-size:var(--_n-navigation-header-block-size);--n-select-block-size:var(--n-button-min-block-size);--n-button-font-weight:var(--n-font-weight-active);--n-button-toggle-icon-color:var(--_n-navigation-header-toggle-icon-color);--n-button-padding-inline:var(--_n-navigation-header-padding-inline);block-size:var(--_n-navigation-header-block-size);background-color:var(--_n-navigation-header-background);border-block-end:var(--_n-navigation-header-divider)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);--n-button-padding-inline:var(--n-space-xs);margin:var(--n-space-m)}:is([name=header],[name=footer])::slotted(:not([open]):focus-within){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:not([open], :active):focus-within){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(:hover, [open])){--n-button-border-color:var(--n-color-border-hover)}:host([sticky-footer]) slot[name=footer]{background:var(--_n-navigation-background-color);z-index:var(--n-index-sticky);padding-block-start:var(--_n-navigation-footer-padding-block);padding-block-end:var(--_n-navigation-footer-padding-block);padding-inline-start:var(--_n-navigation-footer-padding-inline);padding-inline-end:var(--_n-navigation-footer-padding-inline);margin:0;position:sticky;inset-block-end:0}:host([sticky-footer]) .n-navigation-main{background:linear-gradient(var(--_n-navigation-background-color) 30%,rgb(255,255,255,0)) center top,linear-gradient(rgb(255,255,255,0),var(--_n-navigation-background-color) 70%) center bottom,radial-gradient(farthest-side at 50% 0,var(--_n-navigation-scroll-shadow-color-start),rgb(0,0,0,0)) center top,radial-gradient(farthest-side at 50% 100%,var(--_n-navigation-scroll-shadow-color-end),rgb(0,0,0,0)) center bottom;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 7px,100% 7px;background-attachment:local,local,scroll,scroll;-webkit-mask-image:var(--_n-navigation-scroll-mask);mask-image:var(--_n-navigation-scroll-mask)}`;let v=class extends a{constructor(){super(...arguments),this.headerSlot=new l(this,"header"),this.events=new s(this),this.footerObserver=null,this.allowItemsToRemainOpen=!1,this.stickyFooter=!1,this.handleActivate=n=>{var o,a;const t=n.target,e=new Set;let i=null===(o=t.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;i;)e.add(i),i=null===(a=i.parentElement)||void 0===a?void 0:a.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==t){const o=e.has(n);n.open=o||this.allowItemsToRemainOpen&&n.open,n.active=o}this.allowItemsToRemainOpen=!1}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"activate",this.handleActivate);const n=this.querySelector("nord-nav-item[active]");this.allowItemsToRemainOpen=null!=n,"undefined"!=typeof window&&this.observeFooter()}disconnectedCallback(){var n;super.disconnectedCallback(),null===(n=this.footerObserver)||void 0===n||n.disconnect(),this.footerObserver=null}observeFooter(){this.footerObserver=new MutationObserver((()=>this.requestUpdate())),this.footerObserver.observe(this,{childList:!0});const n=this.querySelector(':scope > [slot="footer"]');n&&this.footerObserver.observe(n,{attributes:!0,attributeFilter:["style","class"]})}get isFooterVisible(){if("undefined"==typeof window)return!0;const n=this.querySelector(':scope > [slot="footer"]');if(!n)return!1;const o=window.getComputedStyle(n);return"none"!==o.display&&"hidden"!==o.visibility&&"collapse"!==o.visibility&&"0"!==o.opacity&&"hidden"!==o.contentVisibility}render(){return t`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav>${this.stickyFooter?e:t`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`}</div>${this.stickyFooter?t`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`:e}`}};v.styles=[d,c],n([i({type:Boolean,reflect:!0,attribute:"sticky-footer"})],v.prototype,"stickyFooter",void 0),v=n([r("nord-navigation")],v);var g=v;export{g as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as t,html as a,nothing as e}from"lit";import{property as i,customElement as r}from"lit/decorators.js";import{E as s}from"./EventController-BBOmvfLa.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-DSU3Qp0O.js";const c=o`:host{--_n-navigation-background-color:var(--n-navigation-background-color, var(--n-color-nav-surface));--_n-navigation-scroll-shadow-color-start:var(--n-navigation-scroll-shadow-color-start, rgb(0, 0, 0, 0.1));--_n-navigation-scroll-shadow-color-end:var(--n-navigation-scroll-shadow-color-end, rgb(0, 0, 0, 0.1));--_n-navigation-scroll-mask:var(--n-navigation-scroll-mask, none);--_n-navigation-padding-block:var(--n-navigation-padding-block, var(--n-space-m));--_n-navigation-padding-inline:var(--n-navigation-padding-inline, var(--n-space-m));--_n-navigation-footer-padding-block:var(--n-navigation-footer-padding-block, var(--n-space-s));--_n-navigation-footer-padding-inline:var(--n-navigation-footer-padding-inline, var(--_n-navigation-padding-inline));--_n-navigation-header-block-size:var(--n-navigation-header-block-size, var(--n-space-xxl));--_n-navigation-header-padding-inline:var(--n-navigation-header-padding-inline);--_n-navigation-header-background:var(--n-navigation-header-background, var(--_n-navigation-background-color));--_n-navigation-header-divider:var(--n-navigation-header-divider, 1px solid var(--n-color-border));--_n-navigation-header-color:var(--n-navigation-header-color);--_n-navigation-header-toggle-icon-color:var(--n-navigation-header-toggle-icon-color);--_n-navigation-header-focus-style:var(--n-navigation-header-focus-style, var(--_n-navigation-dropdown-box-shadow));--_n-navigation-dropdown-box-shadow:0 0 0 1px var(--n-color-accent) inset;display:flex;flex-direction:column;block-size:100%;background:var(--_n-navigation-background-color)}.n-navigation-main{display:flex;flex-direction:column;flex:1;overflow-y:auto;overscroll-behavior-y:none;overflow-x:hidden}@-moz-document url-prefix(){.n-navigation-main{scrollbar-width:thin}}.n-navigation-main::-webkit-scrollbar{inline-size:6px;block-size:6px}.n-navigation-main::-webkit-scrollbar-thumb{background-color:var(--n-color-border-strong);border-radius:var(--n-border-radius-pill)}.n-navigation-main::-webkit-scrollbar-thumb:hover{background-color:var(--n-color-border-hover)}.n-navigation-main::-webkit-scrollbar-corner,.n-navigation-main::-webkit-scrollbar-track{background:0 0}nav{flex:1;padding-block-start:var(--_n-navigation-padding-block);padding-block-end:var(--_n-navigation-padding-block);padding-inline-start:var(--_n-navigation-padding-inline);padding-inline-end:var(--_n-navigation-padding-inline)}::slotted(nord-nav-group[heading]:first-of-type){margin-block-start:calc(var(--n-space-s) * -1)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center;--n-button-text-align:start;--n-button-background-color:transparent;--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-gradient:none}slot[name=header]{--n-button-border-radius:0;--n-button-color:var(--_n-navigation-header-color);--n-button-min-block-size:var(--_n-navigation-header-block-size);--n-select-block-size:var(--n-button-min-block-size);--n-button-font-weight:var(--n-font-weight-active);--n-button-toggle-icon-color:var(--_n-navigation-header-toggle-icon-color);--n-button-padding-inline:var(--_n-navigation-header-padding-inline);block-size:var(--_n-navigation-header-block-size);background-color:var(--_n-navigation-header-background);border-block-end:var(--_n-navigation-header-divider)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);--n-button-padding-inline:var(--n-space-xs);margin:var(--n-space-m)}:host([data-rail-collapsed]) slot[name=header]{--n-button-padding-inline:0;--n-button-text-align:center;--n-button-content-display:none;overflow:hidden}:host([data-rail-collapsed]) slot[name=footer]{--n-button-padding-inline:0;--n-button-content-display:none;overflow:hidden}:is([name=header],[name=footer])::slotted(:is(nord-button,nord-dropdown):not([open]):focus-within){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:not([open], :active):focus-within){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(:hover, [open])){--n-button-border-color:var(--n-color-border-hover)}:host([sticky-footer]) slot[name=footer]{background:var(--_n-navigation-background-color);z-index:var(--n-index-sticky);padding-block-start:var(--_n-navigation-footer-padding-block);padding-block-end:var(--_n-navigation-footer-padding-block);padding-inline-start:var(--_n-navigation-footer-padding-inline);padding-inline-end:var(--_n-navigation-footer-padding-inline);margin:0;position:sticky;inset-block-end:0}:host([sticky-footer]) .n-navigation-main{background:linear-gradient(var(--_n-navigation-background-color) 30%,rgb(255,255,255,0)) center top,linear-gradient(rgb(255,255,255,0),var(--_n-navigation-background-color) 70%) center bottom,radial-gradient(farthest-side at 50% 0,var(--_n-navigation-scroll-shadow-color-start),rgb(0,0,0,0)) center top,radial-gradient(farthest-side at 50% 100%,var(--_n-navigation-scroll-shadow-color-end),rgb(0,0,0,0)) center bottom;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 7px,100% 7px;background-attachment:local,local,scroll,scroll;-webkit-mask-image:var(--_n-navigation-scroll-mask);mask-image:var(--_n-navigation-scroll-mask)}`,v="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let g=class extends t{constructor(){super(...arguments),this.headerSlot=new l(this,"header"),this.events=new s(this),this.footerObserver=null,this.allowItemsToRemainOpen=!1,this.stickyFooter=!1,this.handleViewportChange=()=>this.updateRailState(),this.handleActivate=n=>{var o,t;const a=n.target,e=new Set;let i=null===(o=a.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;i;)e.add(i),i=null===(t=i.parentElement)||void 0===t?void 0:t.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==a){const o=e.has(n);n.open=o||this.allowItemsToRemainOpen&&n.open,n.active=o}this.allowItemsToRemainOpen=!1}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"activate",this.handleActivate);const n=this.querySelector("nord-nav-item[active]");this.allowItemsToRemainOpen=null!=n,"undefined"!=typeof window&&this.observeFooter(),this.startObservingLayout(),v.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){var n;super.disconnectedCallback(),null===(n=this.footerObserver)||void 0===n||n.disconnect(),this.footerObserver=null,this.stopObservingLayout(),v.removeEventListener("change",this.handleViewportChange)}startObservingLayout(){this.observedLayout=this.closest("nord-layout"),this.observedLayout&&(this.updateRailState(),this.layoutObserver=new MutationObserver((()=>this.updateRailState())),this.layoutObserver.observe(this.observedLayout,{attributes:!0,attributeFilter:["nav-open","collapse-mode"]}))}stopObservingLayout(){var n;null===(n=this.layoutObserver)||void 0===n||n.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.toggleAttribute("data-rail-collapsed",!1)}updateRailState(){if(!this.observedLayout)return;const n=v.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");this.toggleAttribute("data-rail-collapsed",n)}observeFooter(){this.footerObserver=new MutationObserver((()=>this.requestUpdate())),this.footerObserver.observe(this,{childList:!0});const n=this.querySelector(':scope > [slot="footer"]');n&&this.footerObserver.observe(n,{attributes:!0,attributeFilter:["style","class"]})}get isFooterVisible(){if("undefined"==typeof window)return!0;const n=this.querySelector(':scope > [slot="footer"]');if(!n)return!1;const o=window.getComputedStyle(n);return"none"!==o.display&&"hidden"!==o.visibility&&"collapse"!==o.visibility&&"0"!==o.opacity&&"hidden"!==o.contentVisibility}render(){return a`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav>${this.stickyFooter?e:a`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`}</div>${this.stickyFooter?a`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`:e}`}};g.styles=[d,c],n([i({type:Boolean,reflect:!0,attribute:"sticky-footer"})],g.prototype,"stickyFooter",void 0),g=n([r("nord-navigation")],g);var b=g;export{b as default};
 //# sourceMappingURL=Navigation.js.map

package/lib/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import type NavItem from '../nav-item/NavItem.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Navigation.css'\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n * @cssprop [--n-navigation-scroll-shadow-color-start=rgb(0, 0, 0, 0.1)] - Color of the scroll-affordance shadow shown at the top of the scroll area (below the header) when `sticky-footer` is set. Set to `transparent` to disable.\n * @cssprop [--n-navigation-scroll-shadow-color-end=rgb(0, 0, 0, 0.1)] - Color of the scroll-affordance shadow shown at the bottom of the scroll area (above the footer) when `sticky-footer` is set. Set to `transparent` to disable.\n * @cssprop [--n-navigation-scroll-mask=none] - `mask-image` applied to the scrollable area when `sticky-footer` is set. Use with the shadow colors set to `transparent` to replace the dark scroll-shadow with a soft content fade at the edges. Example: `linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%)`.\n * @cssprop [--n-navigation-padding-block=var(--n-space-m)] - Block-axis (top/bottom) padding of the `<nav>` element that wraps the slotted nav groups.\n * @cssprop [--n-navigation-padding-inline=var(--n-space-m)] - Inline-axis (start/end) padding of the `<nav>` element that wraps the slotted nav groups.\n * @cssprop [--n-navigation-footer-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding inside the footer slot when `sticky-footer` is set. Has no visual effect when the footer slot is empty (slot is hidden in that case).\n * @cssprop [--n-navigation-footer-padding-inline=var(--n-navigation-padding-inline)] - Inline-axis (start/end) padding inside the footer slot when `sticky-footer` is set. Defaults to `--n-navigation-padding-inline` so the footer aligns with the nav content unless overridden. Has no visual effect when the footer slot is empty.\n */\n@customElement('nord-navigation')\nexport default class Navigation extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, 'header')\n  private events = new EventController(this)\n  private footerObserver: MutationObserver | null = null\n  private allowItemsToRemainOpen = false\n\n  /**\n   * Controls whether the navigations's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    // if we add this event listener during render\n    // we seem to miss the first activate event.\n    // so let's add it as early as possible.\n    this.events.listen(this, 'activate', this.handleActivate)\n\n    // in cases where there is an initially active nav-item,\n    // we should allow any nav-items with the `open` attribute to remain open.\n    const activeItem = this.querySelector('nord-nav-item[active]')\n    this.allowItemsToRemainOpen = activeItem != null\n\n    if (typeof window !== 'undefined') {\n      this.observeFooter()\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.footerObserver?.disconnect()\n    this.footerObserver = null\n  }\n\n  /**\n   * Observe the footer slot element for visibility changes.\n   * Watches style and class attributes on the footer element itself, and\n   * childList on the host to detect footer being added/removed (e.g. v-if).\n   */\n  private observeFooter() {\n    this.footerObserver = new MutationObserver(() => this.requestUpdate())\n\n    // Watch for footer element being added/removed from the host\n    this.footerObserver.observe(this, { childList: true })\n\n    // Watch hidden attribute on the footer element directly\n    const footerEl = this.querySelector(':scope > [slot=\"footer\"]')\n    if (footerEl) {\n      this.footerObserver.observe(footerEl, {\n        attributes: true,\n        attributeFilter: ['style', 'class'],\n      })\n    }\n  }\n\n  private get isFooterVisible() {\n    // In SSR, the element is backed by a minimal DOM shim that does not implement\n    // querySelector or window.getComputedStyle. Return true so the footer slot\n    // renders as visible during server-side rendering.\n    if (typeof window === 'undefined') {\n      return true\n    }\n\n    const footerEl = this.querySelector<HTMLElement>(':scope > [slot=\"footer\"]')\n    if (!footerEl) {\n      return false\n    }\n\n    const style = window.getComputedStyle(footerEl)\n    return (\n      style.display !== 'none'\n      && style.visibility !== 'hidden'\n      && style.visibility !== 'collapse'\n      && style.opacity !== '0'\n      && style.contentVisibility !== 'hidden'\n    )\n  }\n\n  render() {\n    return html`\n      <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n      <div class=\"n-navigation-main\">\n        <nav>\n          <slot></slot>\n        </nav>\n        ${!this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n      </div>\n      ${this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n    `\n  }\n\n  private handleActivate = (e: Event) => {\n    const target = e.target as NavItem\n    const ancestors = new Set<NavItem>()\n\n    // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n    // it's more efficient to first gather ancestors here,\n    // than to repeatedly call item.contains(target) in the for-loop below.\n    let parent = target.parentElement?.closest('nord-nav-item')\n    while (parent) {\n      ancestors.add(parent)\n      parent = parent.parentElement?.closest('nord-nav-item')\n    }\n\n    // open and activate any items on the path, otherwise close and deactivate.\n    // however, if the item is set to open initially, we should not close it.\n    for (const item of this.querySelectorAll('nord-nav-item')) {\n      if (item !== target) {\n        const isAncestor = ancestors.has(item)\n        item.open = isAncestor || (this.allowItemsToRemainOpen && item.open)\n        item.active = isAncestor\n      }\n    }\n\n    // this is a one-time thing, purely for initial open state\n    this.allowItemsToRemainOpen = false\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-navigation': Navigation\n  }\n}\n"],"names":["Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","footerObserver","allowItemsToRemainOpen","stickyFooter","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","activeItem","querySelector","window","observeFooter","disconnectedCallback","disconnect","MutationObserver","requestUpdate","observe","childList","footerEl","attributes","attributeFilter","isFooterVisible","style","getComputedStyle","display","visibility","opacity","contentVisibility","render","html","isEmpty","nothing","styles","componentStyle","__decorate","property","type","Boolean","reflect","attribute","prototype","customElement"],"mappings":"4qJAiCe,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,OAAS,IAAIC,EAAgBJ,MAC7BA,KAAcK,eAA4B,KAC1CL,KAAsBM,wBAAG,EAKuCN,KAAYO,cAAY,EAkFxFP,KAAAQ,eAAkBC,YACxB,MAAMC,EAASD,EAAEC,OACXC,EAAY,IAAIC,IAKtB,IAAIC,EAA6B,QAApBC,EAAAJ,EAAOK,qBAAa,IAAAD,OAAA,EAAAA,EAAEE,QAAQ,iBAC3C,KAAOH,GACLF,EAAUM,IAAIJ,GACdA,UAASK,EAAAL,EAAOE,oCAAeC,QAAQ,iBAKzC,IAAK,MAAMG,KAAQnB,KAAKoB,iBAAiB,iBACvC,GAAID,IAAST,EAAQ,CACnB,MAAMW,EAAaV,EAAUW,IAAIH,GACjCA,EAAKI,KAAOF,GAAerB,KAAKM,wBAA0Ba,EAAKI,KAC/DJ,EAAKK,OAASH,CACf,CAIHrB,KAAKM,wBAAyB,CAAK,CAEtC,CA1GC,iBAAAmB,GACEC,MAAMD,oBAINzB,KAAKG,OAAOwB,OAAO3B,KAAM,WAAYA,KAAKQ,gBAI1C,MAAMoB,EAAa5B,KAAK6B,cAAc,yBACtC7B,KAAKM,uBAAuC,MAAdsB,EAER,oBAAXE,QACT9B,KAAK+B,eAER,CAED,oBAAAC,SACEN,MAAMM,uBACe,QAArBlB,EAAAd,KAAKK,sBAAgB,IAAAS,GAAAA,EAAAmB,aACrBjC,KAAKK,eAAiB,IACvB,CAOO,aAAA0B,GACN/B,KAAKK,eAAiB,IAAI6B,kBAAiB,IAAMlC,KAAKmC,kBAGtDnC,KAAKK,eAAe+B,QAAQpC,KAAM,CAAEqC,WAAW,IAG/C,MAAMC,EAAWtC,KAAK6B,cAAc,4BAChCS,GACFtC,KAAKK,eAAe+B,QAAQE,EAAU,CACpCC,YAAY,EACZC,gBAAiB,CAAC,QAAS,UAGhC,CAED,mBAAYC,GAIV,GAAsB,oBAAXX,OACT,OAAO,EAGT,MAAMQ,EAAWtC,KAAK6B,cAA2B,4BACjD,IAAKS,EACH,OAAO,EAGT,MAAMI,EAAQZ,OAAOa,iBAAiBL,GACtC,MACoB,SAAlBI,EAAME,SACkB,WAArBF,EAAMG,YACe,aAArBH,EAAMG,YACY,MAAlBH,EAAMI,SACsB,WAA5BJ,EAAMK,iBAEZ,CAED,MAAAC,GACE,OAAOC,CAAI,gCACqBjD,KAAKC,WAAWiD,0EAKzClD,KAAKO,aAAoF4C,EAArEF,CAAI,iCAAgCjD,KAAKyC,mCAEhEzC,KAAKO,aAAe0C,CAAI,iCAAgCjD,KAAKyC,2BAA4BU,GAE9F,GA1FMtD,EAAAuD,OAAS,CAACC,EAAgBX,GAUuCY,EAAA,CAAvEC,EAAS,CAAEC,KAAMC,QAASC,SAAS,EAAMC,UAAW,mBAAgD9D,EAAA+D,UAAA,oBAAA,GAXlF/D,EAAUyD,EAAA,CAD9BO,EAAc,oBACMhE,SAAAA"}
+{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import type NavItem from '../nav-item/NavItem.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Navigation.css'\n\n// Mirrors the layout's wide-viewport breakpoint. Used to drive the\n// `data-rail-collapsed` attribute below — Safari doesn't support\n// `:host-context()`, so we propagate the layout's rail state via an\n// observed attribute on the host instead.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n * @cssprop [--n-navigation-scroll-shadow-color-start=rgb(0, 0, 0, 0.1)] - Color of the scroll-affordance shadow shown at the top of the scroll area (below the header) when `sticky-footer` is set. Set to `transparent` to disable.\n * @cssprop [--n-navigation-scroll-shadow-color-end=rgb(0, 0, 0, 0.1)] - Color of the scroll-affordance shadow shown at the bottom of the scroll area (above the footer) when `sticky-footer` is set. Set to `transparent` to disable.\n * @cssprop [--n-navigation-scroll-mask=none] - `mask-image` applied to the scrollable area when `sticky-footer` is set. Use with the shadow colors set to `transparent` to replace the dark scroll-shadow with a soft content fade at the edges. Example: `linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%)`.\n * @cssprop [--n-navigation-padding-block=var(--n-space-m)] - Block-axis (top/bottom) padding of the `<nav>` element that wraps the slotted nav groups.\n * @cssprop [--n-navigation-padding-inline=var(--n-space-m)] - Inline-axis (start/end) padding of the `<nav>` element that wraps the slotted nav groups.\n * @cssprop [--n-navigation-footer-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding inside the footer slot when `sticky-footer` is set. Has no visual effect when the footer slot is empty (slot is hidden in that case).\n * @cssprop [--n-navigation-footer-padding-inline=var(--n-navigation-padding-inline)] - Inline-axis (start/end) padding inside the footer slot when `sticky-footer` is set. Defaults to `--n-navigation-padding-inline` so the footer aligns with the nav content unless overridden. Has no visual effect when the footer slot is empty.\n */\n@customElement('nord-navigation')\nexport default class Navigation extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, 'header')\n  private events = new EventController(this)\n  private footerObserver: MutationObserver | null = null\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private allowItemsToRemainOpen = false\n\n  /**\n   * Controls whether the navigations's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    // if we add this event listener during render\n    // we seem to miss the first activate event.\n    // so let's add it as early as possible.\n    this.events.listen(this, 'activate', this.handleActivate)\n\n    // in cases where there is an initially active nav-item,\n    // we should allow any nav-items with the `open` attribute to remain open.\n    const activeItem = this.querySelector('nord-nav-item[active]')\n    this.allowItemsToRemainOpen = activeItem != null\n\n    if (typeof window !== 'undefined') {\n      this.observeFooter()\n    }\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.footerObserver?.disconnect()\n    this.footerObserver = null\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.toggleAttribute('data-rail-collapsed', false)\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    const next = railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    this.toggleAttribute('data-rail-collapsed', next)\n  }\n\n  /**\n   * Observe the footer slot element for visibility changes.\n   * Watches style and class attributes on the footer element itself, and\n   * childList on the host to detect footer being added/removed (e.g. v-if).\n   */\n  private observeFooter() {\n    this.footerObserver = new MutationObserver(() => this.requestUpdate())\n\n    // Watch for footer element being added/removed from the host\n    this.footerObserver.observe(this, { childList: true })\n\n    // Watch hidden attribute on the footer element directly\n    const footerEl = this.querySelector(':scope > [slot=\"footer\"]')\n    if (footerEl) {\n      this.footerObserver.observe(footerEl, {\n        attributes: true,\n        attributeFilter: ['style', 'class'],\n      })\n    }\n  }\n\n  private get isFooterVisible() {\n    // In SSR, the element is backed by a minimal DOM shim that does not implement\n    // querySelector or window.getComputedStyle. Return true so the footer slot\n    // renders as visible during server-side rendering.\n    if (typeof window === 'undefined') {\n      return true\n    }\n\n    const footerEl = this.querySelector<HTMLElement>(':scope > [slot=\"footer\"]')\n    if (!footerEl) {\n      return false\n    }\n\n    const style = window.getComputedStyle(footerEl)\n    return (\n      style.display !== 'none'\n      && style.visibility !== 'hidden'\n      && style.visibility !== 'collapse'\n      && style.opacity !== '0'\n      && style.contentVisibility !== 'hidden'\n    )\n  }\n\n  render() {\n    return html`\n      <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n      <div class=\"n-navigation-main\">\n        <nav>\n          <slot></slot>\n        </nav>\n        ${!this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n      </div>\n      ${this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n    `\n  }\n\n  private handleActivate = (e: Event) => {\n    const target = e.target as NavItem\n    const ancestors = new Set<NavItem>()\n\n    // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n    // it's more efficient to first gather ancestors here,\n    // than to repeatedly call item.contains(target) in the for-loop below.\n    let parent = target.parentElement?.closest('nord-nav-item')\n    while (parent) {\n      ancestors.add(parent)\n      parent = parent.parentElement?.closest('nord-nav-item')\n    }\n\n    // open and activate any items on the path, otherwise close and deactivate.\n    // however, if the item is set to open initially, we should not close it.\n    for (const item of this.querySelectorAll('nord-nav-item')) {\n      if (item !== target) {\n        const isAncestor = ancestors.has(item)\n        item.open = isAncestor || (this.allowItemsToRemainOpen && item.open)\n        item.active = isAncestor\n      }\n    }\n\n    // this is a one-time thing, purely for initial open state\n    this.allowItemsToRemainOpen = false\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-navigation': Navigation\n  }\n}\n"],"names":["railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","footerObserver","allowItemsToRemainOpen","stickyFooter","handleViewportChange","updateRailState","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","activeItem","querySelector","window","observeFooter","startObservingLayout","disconnectedCallback","disconnect","stopObservingLayout","observedLayout","layoutObserver","MutationObserver","observe","attributes","attributeFilter","undefined","toggleAttribute","next","getAttribute","hasAttribute","requestUpdate","childList","footerEl","isFooterVisible","style","getComputedStyle","display","visibility","opacity","contentVisibility","render","html","isEmpty","nothing","styles","componentStyle","__decorate","property","type","Boolean","reflect","attribute","prototype","customElement"],"mappings":"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"}

package/lib/Popout-DtEL0HZ0.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{o as e,a as o,s as i,h as s,l as n,c as a,b as r,f as l}from"./positioning-D-K8Mueq.js";import{css as p,html as h,LitElement as d}from"lit";import{property as c,query as m,state as u,customElement as v}from"lit/decorators.js";import{D as g}from"./DirectionController-ChvNGESZ.js";import{E as f}from"./EventController-BBOmvfLa.js";import{L as y}from"./LightDismissController-4pH8cdko.js";import{S as b}from"./ScrollbarController-BFC67Y2x.js";import{o as w}from"./observe-D0n0zOfU.js";import{N as E,t as x}from"./events-Bv6wNHwJ.js";import{s as k}from"./Component-DSU3Qp0O.js";function A(e){class o extends e{constructor(){super(...arguments),this.open=!1,this.align="start",this.position="block-end"}}return t([c({type:Boolean,reflect:!0})],o.prototype,"open",void 0),t([c({reflect:!0})],o.prototype,"align",void 0),t([c({reflect:!0})],o.prototype,"position",void 0),o}const C=p`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);color:var(--n-color-text);opacity:0;transition:opacity var(--n-transition-slowly);inset:auto;inline-size:auto;block-size:auto;margin:0;padding:0;border:none;background:0 0;overflow:visible;left:calc(var(--_n-popout-position-x) + var(--n-popout-offset-inline,0px));top:calc(var(--_n-popout-position-y) + var(--n-popout-offset-block,0px))}.n-popout{pointer-events:none;transform:translateY(-10px) scale(.97);visibility:hidden;transition:transform var(--n-transition-slowly),visibility var(--n-transition-slowly);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}:host([open]){opacity:1}:host([open]) .n-popout{transition-property:transform;visibility:visible;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}@media (max-width:35.9375em){:host(:not([always-floating])){position:fixed;inset:0;overflow-y:auto;opacity:1;background:0 0;transition:background var(--n-transition-mobile)}:host([open]:not([always-floating])){pointer-events:auto;background:var(--n-color-overlay)}:host([open]:not([always-floating])) .n-popout{transform:translateY(0)}:host(:not([always-floating])) .n-popout{position:fixed;inset:0;inset-block-start:auto;transform:translateY(100%);transition:transform var(--n-transition-mobile),visibility var(--n-transition-mobile);transform-origin:bottom center;border-radius:0}}.top-end,.top-start{transform:translateY(10px) scale(.97)}.left-end,.left-start{transform:translateX(10px) scale(.97)}.right-end,.right-start{transform:translateX(-10px) scale(.97)}.bottom-start.is-rtl,.left-end,.top-end{transform-origin:bottom right}.bottom-end,.left-start,.top-start.is-rtl{transform-origin:top right}.bottom-end.is-rtl,.right-end,.right-start{transform-origin:bottom left}.right-start,.top-end.is-rtl{transform-origin:top left}`,P="undefined"==typeof matchMedia?{matches:!1,addEventListener(){}}:matchMedia("(max-width: 35.9375em)");let S=class extends(A(d)){constructor(){super(...arguments),this.scrollBar=new b(this),this.dismiss=new y(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this.popout&&t!==this.targetElement}),this.events=new f(this),this.direction=new g(this),this.smallViewport=P.matches,this.id="",this.alwaysFloating=!1,this.enableScroll=()=>{this.open||(this.scrollBar.unlockScroll(),this.leaveTopLayer())},this.updatePosition=async()=>{var t;if(!this.anchorElement)return;const r={strategy:"fixed"};"auto"===this.position?r.middleware=[e(8),o({alignment:this.align,padding:8}),i({padding:8}),s()]:(r.placement=n(this.position,this.align,this.direction.dir),r.middleware=[e(8),l(),i({padding:8}),s()]);const{x:p,y:h,placement:d,middlewareData:c}=await a(this.anchorElement,this,r);this.computedPosition=d,this.style.setProperty("--_n-popout-position-x",`${p}px`),this.style.setProperty("--_n-popout-position-y",`${h}px`),(null===(t=c.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):!this.smallViewport||this.alwaysFloating?(this.enterTopLayer(),this.updatePosition().then((()=>this.show()))):this.show()},this.handleMediaQueryChange=()=>{var t;this.smallViewport=P.matches,null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),(!this.smallViewport||this.alwaysFloating)&&this.open&&this.anchorElement?(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition),this.scrollBar.unlockScroll()):this.open&&this.scrollBar.lockScroll()}}async show(){return this.open?Promise.resolve():(this.enterTopLayer(),this.open=!0,await this.updateComplete,this.dispatchEvent(new E("open")),x(this.popout))}async hide(t=!0){var e,o;if(!this.open)return Promise.resolve();this.open=!1,null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.dispatchEvent(new E("close")),t&&(null===(o=this.targetElement)||void 0===o||o.focus({preventScroll:!0}));const i=await x(this.popout);return this.leaveTopLayer(),i}firstUpdated(){this.smallViewport&&!this.alwaysFloating||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.events.listen(P,"change",this.handleMediaQueryChange),this.initializeElements()}disconnectedCallback(){var t,e;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),null===(e=this.targetElement)||void 0===e||e.removeAttribute("aria-expanded")}render(){return h`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}" @transitionend="${this.enableScroll}"><slot></slot></div>`}handleIdChange(){var t;null===(t=this.targetElement)||void 0===t||t.removeEventListener("click",this.toggleOpen),this.id?this.initializeElements():console.warn("NORD: popout requires an id attribute and value")}initializeElements(){this.targetElement=this.getToggle(),this.anchorElement=this.getAnchor(),this.events.listen(this.targetElement,"click",this.toggleOpen)}handleOpenChange(){var t,e;null===(t=this.targetElement)||void 0===t||t.setAttribute("aria-expanded",`${this.open}`),this.open?(this.enterTopLayer(),this.smallViewport&&!this.alwaysFloating?this.scrollBar.lockScroll():this.anchorElement&&(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition))):null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this)}handleAnchorChange(){var t;null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.anchorElement=this.getAnchor(),this.open&&(!this.smallViewport||this.alwaysFloating)&&this.anchorElement&&(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition))}enterTopLayer(){if("function"==typeof this.showPopover)try{this.setAttribute("popover","manual"),this.showPopover()}catch(t){this.removeAttribute("popover")}}leaveTopLayer(){this.removeAttribute("popover")}getToggle(){const t=this.getRootNode(),e=t.querySelectorAll(`[aria-controls='${this.id}']`);let o=e[0];if(e.length>1){const i=[...t.querySelectorAll(`[id='${this.id}']`)].indexOf(this);i>=0&&i<e.length&&(o=e[i])}return o instanceof HTMLSlotElement?o.assignedElements()[0]:o}getAnchor(){if(!this.anchor)return this.targetElement;const t=this.getRootNode().querySelector(`#${this.anchor}`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};S.styles=[k,C],t([m(".n-popout",!0)],S.prototype,"popout",void 0),t([u()],S.prototype,"computedPosition",void 0),t([u()],S.prototype,"smallViewport",void 0),t([c({reflect:!0})],S.prototype,"id",void 0),t([c({reflect:!0})],S.prototype,"anchor",void 0),t([c({reflect:!0,type:Boolean,attribute:"always-floating"})],S.prototype,"alwaysFloating",void 0),t([w("id")],S.prototype,"handleIdChange",null),t([w("open")],S.prototype,"handleOpenChange",null),t([w("anchor")],S.prototype,"handleAnchorChange",null),S=t([v("nord-popout")],S);var L=S;export{A as F,L as P};
+//# sourceMappingURL=Popout-DtEL0HZ0.js.map