@nordhealth/components 4.25.2 → 4.26.1

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'\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 * @cssprop [--n-layout-drawer-box-shadow=var(--n-box-shadow-nav)] - Controls the box-shadow applied to the drawer (aside) on narrow viewports.\n * @cssprop [--n-layout-drawer-box-shadow-wide=var(--n-box-shadow-header)] - Controls the box-shadow applied to the drawer (aside) on wide viewports (≥1240px).\n * @cssprop [--n-layout-drawer-border-inline-start-width=1px] - Controls the inline-start border width of the drawer on wide viewports.\n * @cssprop [--n-layout-drawer-border-inline-start-color=var(--n-color-border)] - Controls the inline-start border color of the drawer on wide viewports.\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  // Set while applying an incoming BroadcastChannel message. The navOpen\n  // observer checks this and skips re-broadcasting so that received changes\n  // don't echo back across tabs. Without this gate the two tabs ping-pong\n  // on Safari, where microtask scheduling lets their updates interleave\n  // past Lit's property equality check.\n  private applyingRemote = false\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      this.applyingRemote = true\n      if ('navOpen' in data) {\n        this.navOpen = data.navOpen\n      }\n      if ('navWidth' in data) {\n        this.navWidth = data.navWidth\n      }\n      this.updateComplete.then(() => {\n        this.applyingRemote = false\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      // Bind to a local so the custom-elements-manifest analyzer can infer\n      // the event name from this constructor call site (it reads the bare\n      // identifier passed to `new NavOpenChangeEvent(...)`; a `this.x`\n      // member access defeats that heuristic and leaves the event nameless,\n      // which then crashes `scripts/build-react-types.mjs` on sort).\n      const navOpen = this.navOpen\n      // Suppress the broadcast when the change came from a received message,\n      // otherwise tabs would echo every update back at each other. See the\n      // `applyingRemote` field for the full rationale.\n      if (!this.applyingRemote) {\n        this.broadcast.post({ navOpen })\n      }\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","applyingRemote","broadcast","syncNavState","navOpen","navWidth","updateComplete","then","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":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.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","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 = 64\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=64px] - Controls the width of the navigation column when `collapse-mode=\"rail\"` is active and the nav is closed. Equivalent to the `nav-rail-width` attribute / `navRailWidth` property; the CSS custom property takes precedence when set.\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 * @cssprop [--n-layout-drawer-box-shadow=var(--n-box-shadow-nav)] - Controls the box-shadow applied to the drawer (aside) on narrow viewports.\n * @cssprop [--n-layout-drawer-box-shadow-wide=var(--n-box-shadow-header)] - Controls the box-shadow applied to the drawer (aside) on wide viewports (≥1240px).\n * @cssprop [--n-layout-drawer-border-inline-start-width=1px] - Controls the inline-start border width of the drawer on wide viewports.\n * @cssprop [--n-layout-drawer-border-inline-start-color=var(--n-color-border)] - Controls the inline-start border color of the drawer on wide viewports.\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  // Set while applying an incoming BroadcastChannel message. The navOpen\n  // observer checks this and skips re-broadcasting so that received changes\n  // don't echo back across tabs. Without this gate the two tabs ping-pong\n  // on Safari, where microtask scheduling lets their updates interleave\n  // past Lit's property equality check.\n  private applyingRemote = false\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      this.applyingRemote = true\n      if ('navOpen' in data) {\n        this.navOpen = data.navOpen\n      }\n      if ('navWidth' in data) {\n        this.navWidth = data.navWidth\n      }\n      this.updateComplete.then(() => {\n        this.applyingRemote = false\n      })\n    },\n  })\n\n  @query('.n-layout-nav', true) private navEl!: HTMLDivElement\n  @query('.n-resize-tooltip') private resizeTooltipEl?: HTMLElement\n  @query('.n-sticky') private stickyHeaderEl?: HTMLElement\n  @query('slot[name=\"footer\"]') private footerSlotEl?: HTMLSlotElement\n\n  // Track the actual rendered block-size of header/footer so consumers\n  // (e.g. <nord-aside>) can offset overlay positioning against the real\n  // values, not just the static defaults. Single ResizeObserver per\n  // dimension, written as public CSS custom properties on the host.\n  private headerSizeObserver?: ResizeObserver\n  private footerSizeObserver?: ResizeObserver\n  private observedFooterElement?: Element\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   * Width (in pixels) of the rail column when `collapse-mode=\"rail\"` is active\n   * and the nav is closed. Default 64.\n   */\n  @property({ type: Number, reflect: true, attribute: 'nav-rail-width' }) navRailWidth = NAV_RAIL_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    this.headerSizeObserver?.disconnect()\n    this.headerSizeObserver = undefined\n    this.footerSizeObserver?.disconnect()\n    this.footerSizeObserver = undefined\n    this.observedFooterElement = undefined\n    this.style.removeProperty('--n-layout-header-block-size')\n    this.style.removeProperty('--n-layout-footer-block-size')\n  }\n\n  protected firstUpdated() {\n    if (typeof ResizeObserver === 'undefined')\n      return\n    if (this.stickyHeaderEl) {\n      this.headerSizeObserver = new ResizeObserver(() => this.publishHeaderSize())\n      this.headerSizeObserver.observe(this.stickyHeaderEl)\n      this.publishHeaderSize()\n    }\n    if (this.footerSlotEl) {\n      this.footerSlotEl.addEventListener('slotchange', this.handleFooterSlotChange)\n      this.handleFooterSlotChange()\n    }\n  }\n\n  private publishHeaderSize() {\n    const size = this.stickyHeaderEl?.getBoundingClientRect().height ?? 0\n    if (size > 0)\n      this.style.setProperty('--n-layout-header-block-size', `${size}px`)\n    else\n      this.style.removeProperty('--n-layout-header-block-size')\n  }\n\n  private handleFooterSlotChange = () => {\n    const next = this.footerSlotEl?.assignedElements({ flatten: true })[0]\n    if (next === this.observedFooterElement)\n      return\n    this.footerSizeObserver?.disconnect()\n    this.observedFooterElement = next\n    if (!next) {\n      this.style.removeProperty('--n-layout-footer-block-size')\n      return\n    }\n    this.footerSizeObserver = new ResizeObserver(() => this.publishFooterSize())\n    this.footerSizeObserver.observe(next)\n    this.publishFooterSize()\n  }\n\n  private publishFooterSize() {\n    const size = this.observedFooterElement?.getBoundingClientRect().height ?? 0\n    if (size > 0)\n      this.style.setProperty('--n-layout-footer-block-size', `${size}px`)\n    else\n      this.style.removeProperty('--n-layout-footer-block-size')\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, ${this.navRailWidth}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      // Bind to a local so the custom-elements-manifest analyzer can infer\n      // the event name from this constructor call site (it reads the bare\n      // identifier passed to `new NavOpenChangeEvent(...)`; a `this.x`\n      // member access defeats that heuristic and leaves the event nameless,\n      // which then crashes `scripts/build-react-types.mjs` on sort).\n      const navOpen = this.navOpen\n      // Suppress the broadcast when the change came from a received message,\n      // otherwise tabs would echo every update back at each other. See the\n      // `applyingRemote` field for the full rationale.\n      if (!this.applyingRemote) {\n        this.broadcast.post({ navOpen })\n      }\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","Icon","registerIcon","lockIcon","resizeTooltipIdCounter","NAV_DEFAULT_WIDTH","mediaQuery","matchMedia","matches","navWidthStore","storage","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","applyingRemote","broadcast","syncNavState","navOpen","navWidth","updateComplete","then","value","isDragging","persistNavState","defaultNavWidth","minNavWidth","maxNavWidth","navRailWidth","padding","sticky","stickyFooter","hideDefaultNavToggle","hideCollapseButton","toggleOnResizeClick","collapseMode","handleFooterSlotChange","next","footerSlotEl","assignedElements","flatten","observedFooterElement","footerSizeObserver","disconnect","ResizeObserver","publishFooterSize","observe","style","removeProperty","handleMediaQueryChange","handleToggleClick","handleHostClick","handleHostMouseOver","relatedTarget","Node","contains","handleMouseEnter","handleHostMouseOut","handleMouseLeave","handleNavFocus","handleMainFocus","handleTransitionEnd","dragStartX","hasDragged","handleResizeHoverMove","currentTarget","resizeTooltipEl","rect","getBoundingClientRect","offset","clientY","top","height","setProperty","handleResizePointerLeave","stopDragging","isNarrow","connectedCallback","super","listen","disconnectedCallback","headerSizeObserver","undefined","firstUpdated","stickyHeaderEl","publishHeaderSize","size","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","key","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientX","abs","clientWidth","styles","componentStyle","stickyStyle","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","customElement"],"mappings":"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"}

package/lib/Modal.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as n,LitElement as i,html as t}from"lit";import{query as a,property as s,customElement as l}from"lit/decorators.js";import{classMap as r}from"lit/directives/class-map.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as p}from"./events-Bv6wNHwJ.js";import{s as m}from"./Component-DSU3Qp0O.js";import h from"./Icon.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as u}from"./ModalController.js";import"./Footer.js";import"./EventController-BBOmvfLa.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.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"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";const f=n`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-overflow-hidden{overflow:hidden}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding-block:var(--n-space-l) var(--n-space-xl);padding-inline:var(--_n-modal-padding-inline)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border)}.n-padded{padding-block:var(--_n-modal-padding-block);padding-inline:var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:'';position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size='s']){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size='l']){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:var(--n-space-xs);flex-direction:column;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;h.registerIcon(e);class b extends p{constructor(o){super("cancel",{cancelable:!0}),Object.defineProperty(this,"trigger",{value:o,enumerable:!0,writable:!1})}}class g extends p{constructor(o){super("close"),Object.defineProperty(this,"trigger",{value:o,enumerable:!0,writable:!1})}}let x=class extends i{constructor(){super(...arguments),this.defaultSlot=new d(this),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new u(this,{isOpen:()=>this.open,onDismiss:o=>this.handleDismiss(o),isLightDismissEnabled:()=>!this.persistent,dialog:()=>this.modal,backdrop:()=>this.backdrop,close:(o,e)=>this.close(o,e)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1,this.persistent=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}disconnectedCallback(){super.disconnectedCallback(),this.lastTrigger=void 0}showModal(){this.open=!0}close(o,e){this.open=!1,null!=o&&(this.returnValue=o);const n=null!=e?e:this.lastTrigger;this.dispatchEvent(new g(n)),this.lastTrigger=void 0}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return t`<div class="n-modal-backdrop"><div class="${r({"n-modal":!0,"n-overflow-hidden":this.featureSlot.hasContent&&this.defaultSlot.isEmpty&&this.footerSlot.isEmpty})}" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${o=>this.handleDismiss(o)}" ?hidden="${this.persistent}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="${this.defaultSlot.isEmpty?"":"n-body-padded"}"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(o){this.dispatchEvent(new b(o))&&(this.lastTrigger=o,this.close())}};x.styles=[m,f],o([a(".n-modal",!0)],x.prototype,"modal",void 0),o([a(".n-modal-backdrop",!0)],x.prototype,"backdrop",void 0),o([s({type:Boolean,reflect:!0})],x.prototype,"open",void 0),o([s({reflect:!0})],x.prototype,"size",void 0),o([s({attribute:!1})],x.prototype,"returnValue",void 0),o([s({type:Boolean,reflect:!0})],x.prototype,"scrollable",void 0),o([s({type:Boolean,reflect:!0})],x.prototype,"persistent",void 0),o([c("open","updated")],x.prototype,"handleOpenUpdated",null),x=o([l("nord-modal")],x);var y=x;export{b as ModalCancelEvent,g as ModalCloseEvent,y as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as n,LitElement as i,html as t}from"lit";import{query as a,property as s,customElement as l}from"lit/decorators.js";import{classMap as r}from"lit/directives/class-map.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as p}from"./events-Bv6wNHwJ.js";import{s as m}from"./Component-DSU3Qp0O.js";import h from"./Icon.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as u}from"./ModalController.js";import"./Footer.js";import"./EventController-BBOmvfLa.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.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"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";const b=n`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-overflow-hidden{overflow:hidden}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding-block:var(--n-space-l) var(--n-space-xl);padding-inline:var(--_n-modal-padding-inline)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border)}.n-padded{padding-block:var(--_n-modal-padding-block);padding-inline:var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:'';position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size='s']){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size='l']){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:var(--n-space-xs);flex-direction:column;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;h.registerIcon(e);class f extends p{constructor(o){super("cancel",{cancelable:!0}),Object.defineProperty(this,"trigger",{value:o,enumerable:!0,writable:!1})}}class g extends p{constructor(o){super("close"),Object.defineProperty(this,"trigger",{value:o,enumerable:!0,writable:!1})}}let x=class extends i{constructor(){super(...arguments),this.defaultSlot=new d(this),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new u(this,{isOpen:()=>this.open,onDismiss:o=>this.handleDismiss(o),isLightDismissEnabled:()=>!this.persistent,dialog:()=>this.modal,backdrop:()=>this.backdrop,close:(o,e)=>this.close(o,e)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1,this.persistent=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}disconnectedCallback(){super.disconnectedCallback(),this.lastTrigger=void 0}showModal(){this.open=!0}close(o,e){this.open=!1,null!=o&&(this.returnValue=o);const n=null!=e?e:this.lastTrigger;this.dispatchEvent(new g(n)),this.lastTrigger=void 0}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return t`<div class="n-modal-backdrop"><div class="${r({"n-modal":!0,"n-overflow-hidden":this.featureSlot.hasContent&&this.defaultSlot.isEmpty&&this.footerSlot.isEmpty})}" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${o=>this.handleDismiss(o)}" ?hidden="${this.persistent}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="${this.defaultSlot.isEmpty?"":"n-body-padded"}"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(o){this.dispatchEvent(new f(o))&&(this.lastTrigger=o,this.close())}};x.styles=[m,b],o([a(".n-modal",!0)],x.prototype,"modal",void 0),o([a(".n-modal-backdrop",!0)],x.prototype,"backdrop",void 0),o([s({type:Boolean,reflect:!0})],x.prototype,"open",void 0),o([s({reflect:!0})],x.prototype,"size",void 0),o([s({attribute:!1})],x.prototype,"returnValue",void 0),o([s({type:Boolean,reflect:!0})],x.prototype,"scrollable",void 0),o([s({type:Boolean,reflect:!0})],x.prototype,"persistent",void 0),o([c("open","updated")],x.prototype,"handleOpenUpdated",null),x=o([l("nord-modal")],x);var y=x;export{f as ModalCancelEvent,g as ModalCloseEvent,y as default};
 //# sourceMappingURL=Modal.js.map

package/lib/NavToggle-DzKbd-El.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 c}from"./DirectionController-ChvNGESZ.js";import{F as d}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;--n-button-background-color:transparent}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(d(e)){constructor(){super(...arguments),this.direction=new c(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-DzKbd-El.js.map

package/lib/NavToggle-DzKbd-El.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavToggle-DzKbd-El.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 hides and shows the primary navigation inside `<nord-layout>`.\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,gkBCeFC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAWH,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-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";
+import"./tslib.es6-CmLYFWVC.js";export{N as default}from"./NavToggle-DzKbd-El.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 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};
+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-visible){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:is(nord-button,nord-dropdown):not([open],:active):focus-visible){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(nord-button,nord-dropdown):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// 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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"}
+{"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/Select.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as e,nothing as n,isServer as r,LitElement as i}from"lit";import{property as s,customElement as l}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{A as p}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as b}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{S as h}from"./SizeMixin-CU9cLbLC.js";import{s as m}from"./Component-DSU3Qp0O.js";import{s as f}from"./FormField-BFaVzUjk.js";import x from"./Icon.js";import"./Button.js";import"./EventController-BBOmvfLa.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";var g=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',tags:"nordicon small interface dropdown select arrow up down caret triangle chevron",title:"interface-dropdown-small"});const j=o`:host{--_n-select-inline-size:var(--n-select-inline-size, fit-content);--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start;--n-button-background-color:var(--n-input-background, var(--n-color-surface));--n-button-gradient:none;--n-button-box-shadow:none}nord-button:not([expand]){--_n-button-inline-size:var(--_n-select-inline-size)}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-button-background-color:var(--n-input-background-inactive, var(--n-color-active));--n-button-border-color:var(--n-color-active);--n-button-color:var(--n-color-text-weakest);--n-button-toggle-icon-color:var(--n-color-text-weakest);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;x.registerIcon(g);let $=class extends(h(b(p(v(u(i)))))){constructor(){super(...arguments),this.defaultSlot=new d(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}firstUpdated(){this.setupOptionObserver()}connectedCallback(){super.connectedCallback(),this.hasUpdated&&!this.optionObserver&&this.setupOptionObserver()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.optionObserver)||void 0===t||t.disconnect(),this.optionObserver=void 0}setupOptionObserver(){this.optionObserver||(this.optionObserver=new MutationObserver((()=>this.requestUpdate())),this.optionObserver.observe(this,{subtree:!0,childList:!0,characterData:!0}))}render(){const t=this.options,o=this.getButtonText(t);return e`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${c(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&e`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" ?disabled="${this.disabled}" ?expand="${this.expand}" type="button" inert><slot slot="start" name="icon"></slot>${o}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()} ${this.isHintBelow?this.renderHint():n}`}get options(){return r?[]:Array.from(this.querySelectorAll("option"))}getButtonText(t){const o=t.find((t=>t.value===this.value.toString()));return o?o.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return e`<option value="${a(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};$.styles=[m,f,j],t([s({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),$=t([l("nord-select")],$);var z=$;export{z as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as e,nothing as n,isServer as r,LitElement as i}from"lit";import{property as s,customElement as l}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{A as p}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as b}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{S as h}from"./SizeMixin-CU9cLbLC.js";import{s as m}from"./Component-DSU3Qp0O.js";import{s as f}from"./FormField-BFaVzUjk.js";import g from"./Icon.js";import"./Button.js";import"./EventController-BBOmvfLa.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";var x=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',tags:"nordicon small interface dropdown select arrow up down caret triangle chevron",title:"interface-dropdown-small"});const j=o`:host{--_n-select-inline-size:var(--n-select-inline-size, fit-content);--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start;--n-button-background-color:var(--n-input-background, var(--n-color-surface));--n-button-gradient:none;--n-button-box-shadow:none}nord-button:not([expand]){--_n-button-inline-size:var(--_n-select-inline-size)}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-button-background-color:var(--n-input-background-inactive, var(--n-color-active));--n-button-border-color:var(--n-color-active);--n-button-color:var(--n-color-text-weakest);--n-button-toggle-icon-color:var(--n-color-text-weakest);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;g.registerIcon(x);let $=class extends(h(b(p(v(u(i)))))){constructor(){super(...arguments),this.defaultSlot=new d(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}firstUpdated(){this.setupOptionObserver()}connectedCallback(){super.connectedCallback(),this.hasUpdated&&!this.optionObserver&&this.setupOptionObserver()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.optionObserver)||void 0===t||t.disconnect(),this.optionObserver=void 0}setupOptionObserver(){this.optionObserver||(this.optionObserver=new MutationObserver((()=>this.requestUpdate())),this.optionObserver.observe(this,{subtree:!0,childList:!0,characterData:!0}))}render(){const t=this.options,o=this.getButtonText(t);return e`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${c(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&e`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" ?disabled="${this.disabled}" ?expand="${this.expand}" type="button" inert><slot slot="start" name="icon"></slot>${o}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()} ${this.isHintBelow?this.renderHint():n}`}get options(){return r?[]:Array.from(this.querySelectorAll("option"))}getButtonText(t){const o=t.find((t=>t.value===this.value.toString()));return o?o.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return e`<option value="${a(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};$.styles=[m,f,j],t([s({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),$=t([l("nord-select")],$);var z=$;export{z as default};
 //# sourceMappingURL=Select.js.map

package/lib/TagGroup.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as o}from"lit";import{property as i,customElement as e}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{D as n}from"./DirectionController-ChvNGESZ.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const u=r`:host{--_n-tag-group-border-radius:var(--n-tag-group-border-radius, var(--n-border-radius-s));--_n-tag-group-box-shadow:var(--n-tag-group-box-shadow, var(--n-box-shadow));--_n-tag-group-flex-direction:row;--_n-tag-group-max-inline-size:max-content}:host([variant=default]) .n-multiple-tags{--n-tag-border-radius:0;--n-tag-box-shadow:none}.n-tag-group{display:flex;flex-direction:var(--_n-tag-group-flex-direction);max-inline-size:var(--_n-tag-group-max-inline-size)}:host([variant=default]) .n-tag-group.n-multiple-tags{border-radius:var(--_n-tag-group-border-radius);box-shadow:var(--_n-tag-group-box-shadow)}:host([variant=spaced]) .n-tag-group{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) .n-multiple-tags ::slotted(*){margin-inline-end:-1px}:host([variant=default]) .n-multiple-tags ::slotted(:is(:hover,:focus)){z-index:var(--n-index-masked)}:host([variant=default]) .n-multiple-tags ::slotted(:focus-within){z-index:var(--n-index-masked)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-tag-box-shadow:var(--n-tag-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host([variant=default]) .n-multiple-tags ::slotted(*){border-radius:var(--n-tag-border-radius)}:host([variant=default]) .n-multiple-tags.n-rtl ::slotted(:last-child),:host([variant=default]) .n-multiple-tags:not(.n-rtl) ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) 0 0 var(--_n-tag-group-border-radius)}:host([variant=default]) .n-multiple-tags.n-rtl ::slotted(:first-child),:host([variant=default]) .n-multiple-tags:not(.n-rtl) ::slotted(:last-child){--n-tag-border-radius:0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0}:host([direction=vertical]) .n-tag-group{--_n-tag-group-flex-direction:column}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0 0}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(:last-child){--n-tag-border-radius:0 0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius)}:host([variant=spaced][wrap]) .n-tag-group{flex-wrap:wrap}`;let g=class extends a{constructor(){super(...arguments),this.defaultSlot=new l(this),this.dirController=new n(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.length>1;return o`<div class="${s({"n-tag-group":!0,"n-rtl":this.dirController.isRTL,"n-multiple-tags":t})}"><slot></slot></div>`}};g.styles=[d,u],t([i({reflect:!0})],g.prototype,"variant",void 0),t([i({reflect:!0})],g.prototype,"direction",void 0),t([i({reflect:!0,type:Boolean})],g.prototype,"wrap",void 0),t([i({reflect:!0})],g.prototype,"role",void 0),g=t([e("nord-tag-group")],g);var p=g;export{p as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as o}from"lit";import{property as e,customElement as i}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{D as n}from"./DirectionController-ChvNGESZ.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const u=r`:host{--_n-tag-group-border-radius:var(--n-tag-group-border-radius, var(--n-border-radius-s));--_n-tag-group-box-shadow:var(--n-tag-group-box-shadow, var(--n-box-shadow));--_n-tag-group-flex-direction:row;--_n-tag-group-max-inline-size:max-content}:host([variant=default]) .n-multiple-tags{--n-tag-border-radius:0;--n-tag-box-shadow:none}.n-tag-group{display:flex;flex-direction:var(--_n-tag-group-flex-direction);max-inline-size:var(--_n-tag-group-max-inline-size)}:host([variant=default]) .n-tag-group.n-multiple-tags{border-radius:var(--_n-tag-group-border-radius);box-shadow:var(--_n-tag-group-box-shadow)}:host([variant=spaced]) .n-tag-group{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) .n-multiple-tags ::slotted(*){margin-inline-end:-1px}:host([variant=default]) .n-multiple-tags ::slotted(:is(:hover,:focus)){z-index:var(--n-index-masked)}:host([variant=default]) .n-multiple-tags ::slotted(:focus-within){z-index:var(--n-index-masked)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-tag-box-shadow:var(--n-tag-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host([variant=default]) .n-multiple-tags ::slotted(*){border-radius:var(--n-tag-border-radius)}:host([variant=default]) .n-multiple-tags.n-rtl ::slotted(:last-child),:host([variant=default]) .n-multiple-tags:not(.n-rtl) ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) 0 0 var(--_n-tag-group-border-radius)}:host([variant=default]) .n-multiple-tags.n-rtl ::slotted(:first-child),:host([variant=default]) .n-multiple-tags:not(.n-rtl) ::slotted(:last-child){--n-tag-border-radius:0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0}:host([direction=vertical]) .n-tag-group{--_n-tag-group-flex-direction:column}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0 0}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(:last-child){--n-tag-border-radius:0 0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius)}:host([variant=spaced][wrap]) .n-tag-group{flex-wrap:wrap}`;let g=class extends a{constructor(){super(...arguments),this.defaultSlot=new l(this),this.dirController=new n(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.length>1;return o`<div class="${s({"n-tag-group":!0,"n-rtl":this.dirController.isRTL,"n-multiple-tags":t})}"><slot></slot></div>`}};g.styles=[d,u],t([e({reflect:!0})],g.prototype,"variant",void 0),t([e({reflect:!0})],g.prototype,"direction",void 0),t([e({reflect:!0,type:Boolean})],g.prototype,"wrap",void 0),t([e({reflect:!0})],g.prototype,"role",void 0),g=t([i("nord-tag-group")],g);var p=g;export{p as default};
 //# sourceMappingURL=TagGroup.js.map

package/lib/Toggle.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as n,html as i,nothing as r,LitElement as t}from"lit";import{property as o,customElement as s}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{F as d}from"./FocusableMixin-BlQLNPdJ.js";import{F as c}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as g}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-DSU3Qp0O.js";import{s as p}from"./FormField-BFaVzUjk.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";const v=n`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:'';display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-accent)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{cursor:default}:host([disabled]) input:not(:checked){--_n-toggle-background:var(--n-color-border-neutral)}:host([disabled]) input:checked{opacity:.3}.n-label-container{margin-block-end:0}label{user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([hint-below]) :is(.n-hint, .n-error){padding-inline-start:0}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([reverse][hint-below]) :is(.n-hint, .n-error){padding-inline-end:0}:host([size='s']) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size='l']) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let u=class extends(c(g(d(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=i`<div class="n-expand">${this.renderLabel()} ${this.isHintBelow?r:this.renderError()}</div>`,n=i`<div class="n-input-container"><input ${l(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"></div>`;return i`<div class="n-flex">${this.reverse?[e,n]:[n,e]}</div>${this.isHintBelow?this.renderError():r} ${this.isHintBelow?this.renderHint():r}`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};u.styles=[h,p,v],e([o({reflect:!0,type:Boolean})],u.prototype,"checked",void 0),e([o({reflect:!0,type:Boolean})],u.prototype,"reverse",void 0),e([o({reflect:!0})],u.prototype,"size",void 0),u=e([s("nord-toggle")],u);var m=u;export{m as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as n,html as i,nothing as r,LitElement as t}from"lit";import{property as o,customElement as s}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{F as c}from"./FocusableMixin-BlQLNPdJ.js";import{F as d}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as g}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-DSU3Qp0O.js";import{s as p}from"./FormField-BFaVzUjk.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";const v=n`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:'';display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-accent)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{cursor:default}:host([disabled]) input:not(:checked){--_n-toggle-background:var(--n-color-border-neutral)}:host([disabled]) input:checked{opacity:.3}.n-label-container{margin-block-end:0}label{user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([hint-below]) :is(.n-hint, .n-error){padding-inline-start:0}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([reverse][hint-below]) :is(.n-hint, .n-error){padding-inline-end:0}:host([size='s']) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size='l']) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let u=class extends(d(g(c(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=i`<div class="n-expand">${this.renderLabel()} ${this.isHintBelow?r:this.renderError()}</div>`,n=i`<div class="n-input-container"><input ${l(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"></div>`;return i`<div class="n-flex">${this.reverse?[e,n]:[n,e]}</div>${this.isHintBelow?this.renderError():r} ${this.isHintBelow?this.renderHint():r}`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};u.styles=[h,p,v],e([o({reflect:!0,type:Boolean})],u.prototype,"checked",void 0),e([o({reflect:!0,type:Boolean})],u.prototype,"reverse",void 0),e([o({reflect:!0})],u.prototype,"size",void 0),u=e([s("nord-toggle")],u);var m=u;export{m as default};
 //# sourceMappingURL=Toggle.js.map