@nordhealth/components 5.0.0 → 5.0.1

package/lib/Layout.js.map

@@ -1 +1 @@
-{"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 layout\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](/components/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          // Mirror the min/max nav-width props as px so the hide-mode peek\n          // flyout can clamp its intrinsic (`fit-content`) width in CSS.\n          '--_n-layout-nav-min-width': `${this.minNavWidth}px`,\n          '--_n-layout-nav-max-width': `${this.maxNavWidth}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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"}
+{"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 { LocalizeController } from '../localization/LocalizeController.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 layout\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](/components/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 * @localization resizeNavigation - Accessible label for the nav resize separator.\n * @localization navigationCollapsed - Announced by the nav resize separator (`aria-valuetext`) while the navigation is collapsed.\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 localization = new LocalizeController<'nord-layout'>(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          // Mirror the min/max nav-width props as px so the hide-mode peek\n          // flyout can clamp its intrinsic (`fit-content`) width in CSS.\n          '--_n-layout-nav-min-width': `${this.minNavWidth}px`,\n          '--_n-layout-nav-max-width': `${this.maxNavWidth}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          id=\"n-layout-nav\"\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-label=${this.localization.term('resizeNavigation')}\n            aria-controls=\"n-layout-nav\"\n            aria-valuemin=${this.minNavWidth}\n            aria-valuemax=${this.maxNavWidth}\n            aria-valuenow=${this.resizeValueNow}\n            aria-valuetext=${cond(navState !== 'opened', this.localization.term('navigationCollapsed'))}\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  /**\n   * `aria-valuenow` for the focusable resize separator (ARIA window splitter\n   * pattern): the current nav width in pixels, bounded by the `min-nav-width`\n   * / `max-nav-width` props exposed as `aria-valuemin` / `aria-valuemax`.\n   * While the nav is collapsed the value must stay within those bounds, so it\n   * reports the minimum and `aria-valuetext` announces the collapsed state.\n   */\n  private get resizeValueNow(): number {\n    if (this.navState !== 'opened') {\n      return this.minNavWidth\n    }\n    return clamp(Math.round(this.navWidth), this.minNavWidth, this.maxNavWidth)\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","localization","LocalizeController","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","term","resizeValueNow","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","clamp","round","isLTR","key","preventDefault","width","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/LocalizeController.js

@@ -1,2 +1,2 @@
-import{isServer as t}from"lit";import{resolveTranslation as o,subscribeToTranslationRegistration as i,subscribeToDocumentLang as n}from"./translation.js";import s from"./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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";function a(){}class l{constructor(t,i={onLangChange:a}){this.host=t,this.options=i,this.handleLangChange=()=>{const t=o(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t,this.options.onLangChange(),this.host.requestUpdate())},t.addController(this),this.resolvedTranslation=o(this.lang)}get lang(){return t?this.host.lang||"en-US":this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribeTranslationRegistration=i(this.handleLangChange);const t=o(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t),this.host.getAttribute("lang")?(this.observer=new MutationObserver(this.handleLangChange),this.observer.observe(this.host,{attributes:!0,attributeFilter:["lang"]})):this.unsubscribeDocumentLang=n(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var t,o,i;null===(t=this.unsubscribeDocumentLang)||void 0===t||t.call(this),null===(o=this.unsubscribeTranslationRegistration)||void 0===o||o.call(this),null===(i=this.observer)||void 0===i||i.disconnect()}term(t,...o){var i;const{resolvedTranslation:n,resolvedLang:a}=this,l=this.host.localName,r=n[l];null==r?console.warn(`NORD: Missing translations for component \`${l}\` in lang: \`${a}\``):null==r[t]&&console.warn(`NORD: Missing translation key \`${String(t)}\` for component \`${l}\` in lang \`${a}\``);const e=s[l],h=null!==(i=null==r?void 0:r[t])&&void 0!==i?i:e[t];return"function"==typeof h?h(...o):h}}export{l as LocalizeController};
+import{isServer as t}from"lit";import{resolveTranslation as o,subscribeToTranslationRegistration as i,subscribeToDocumentLang as n}from"./translation.js";import s from"./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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";function a(){}class l{constructor(t,i={onLangChange:a}){this.host=t,this.options=i,this.handleLangChange=()=>{const t=o(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t,this.options.onLangChange(),this.host.requestUpdate())},t.addController(this),this.resolvedTranslation=o(this.lang)}get lang(){return t?this.host.lang||"en-US":this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribeTranslationRegistration=i(this.handleLangChange);const t=o(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t),this.host.getAttribute("lang")?(this.observer=new MutationObserver(this.handleLangChange),this.observer.observe(this.host,{attributes:!0,attributeFilter:["lang"]})):this.unsubscribeDocumentLang=n(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var t,o,i;null===(t=this.unsubscribeDocumentLang)||void 0===t||t.call(this),null===(o=this.unsubscribeTranslationRegistration)||void 0===o||o.call(this),null===(i=this.observer)||void 0===i||i.disconnect()}term(t,...o){var i;const{resolvedTranslation:n,resolvedLang:a}=this,l=this.host.localName,r=n[l];null==r?console.warn(`NORD: Missing translations for component \`${l}\` in lang: \`${a}\``):null==r[t]&&console.warn(`NORD: Missing translation key \`${String(t)}\` for component \`${l}\` in lang \`${a}\``);const e=s[l],h=null!==(i=null==r?void 0:r[t])&&void 0!==i?i:e[t];return"function"==typeof h?h(...o):h}}export{l as LocalizeController};
 //# sourceMappingURL=LocalizeController.js.map

package/lib/LocalizeController.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type {\n  Translation,\n  WellKnownKeys,\n} from './translation.js'\nimport { isServer } from 'lit'\nimport {\n  fallback,\n  resolveTranslation,\n  subscribeToDocumentLang,\n  subscribeToTranslationRegistration,\n} from './translation.js'\n\n// Use fallback (en) as source of truth for valid translation keys\ntype FallbackType = typeof fallback\n\n// helper types...\n\n// used to match any function\ntype Func = (...args: any[]) => any\n\n// if object property is function, use return type, else value type\ntype Result<Type, Key extends keyof Type> = Type[Key] extends Func ? ReturnType<Type[Key]> : Type[Key]\n\n// if object property is function,\ntype FuncParams<Type, K extends keyof Type> = Type[K] extends Func ? Parameters<Type[K]> : []\n\nfunction noop() {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\nimplements ReactiveController {\n  private unsubscribeDocumentLang?: ReturnType<typeof subscribeToDocumentLang>\n  private unsubscribeTranslationRegistration?: ReturnType<typeof subscribeToTranslationRegistration>\n  private observer?: MutationObserver\n  private resolvedTranslation: Translation\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private options = { onLangChange: noop },\n  ) {\n    host.addController(this)\n    this.resolvedTranslation = resolveTranslation(this.lang)\n  }\n\n  /**\n   * The lang of the document or element, with element taking precedence\n   */\n  get lang() {\n    if (isServer) {\n      return this.host.lang || 'en-US'\n    }\n\n    return this.host.lang || document.documentElement.lang\n  }\n\n  /**\n   * The lang of the translation being applied.\n   * This may not match the document/element lang, in case of fallback translation\n   */\n  get resolvedLang() {\n    return this.resolvedTranslation.$lang\n  }\n\n  hostConnected() {\n    // Always subscribe to translation registration changes (for when new translations are registered)\n    this.unsubscribeTranslationRegistration = subscribeToTranslationRegistration(this.handleLangChange)\n\n    // Re-resolve translation now that the host is connected and attributes are set\n    // This handles cases where the lang attribute is set after the constructor runs (e.g., in Vue)\n    const resolved = resolveTranslation(this.lang)\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n    }\n\n    // If the host has its own `lang` attribute, create a local observer to watch for changes to that attribute\n    if (this.host.getAttribute('lang')) {\n      this.observer = new MutationObserver(this.handleLangChange)\n      this.observer.observe(this.host, {\n        attributes: true,\n        attributeFilter: ['lang'],\n      })\n    }\n    else {\n      // Otherwise, also subscribe to document language changes\n      this.unsubscribeDocumentLang = subscribeToDocumentLang(this.handleLangChange)\n    }\n\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribeDocumentLang?.()\n    this.unsubscribeTranslationRegistration?.()\n    this.observer?.disconnect()\n  }\n\n  term<Key extends keyof FallbackType[TComponentName]>(\n    key: Key,\n    ...args: FuncParams<FallbackType[TComponentName], Key>\n  ): Result<FallbackType[TComponentName], Key> {\n    const { resolvedTranslation, resolvedLang } = this\n    const component = this.host.localName as TComponentName\n\n    // Cast to specific component type to satisfy TS that key is valid for this component\n    const componentTranslation = resolvedTranslation[component] as FallbackType[TComponentName] | undefined\n\n    if (componentTranslation == null) {\n      console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n    }\n    else if (componentTranslation[key] == null) {\n      console.warn(\n        `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``,\n      )\n    }\n\n    const fallbackComponentTranslation = fallback[component] as FallbackType[TComponentName]\n    const translationValue = (componentTranslation?.[key] ?? fallbackComponentTranslation[key]) as Result<FallbackType[TComponentName], Key>\n    return typeof translationValue === 'function' ? translationValue(...args) : translationValue\n  }\n\n  private handleLangChange = () => {\n    const resolved = resolveTranslation(this.lang)\n\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n\n      this.options.onLangChange()\n      this.host.requestUpdate()\n    }\n  }\n}\n"],"names":["noop","LocalizeController","constructor","host","options","onLangChange","this","handleLangChange","resolved","resolveTranslation","lang","resolvedTranslation","requestUpdate","addController","isServer","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribeTranslationRegistration","subscribeToTranslationRegistration","getAttribute","observer","MutationObserver","observe","attributes","attributeFilter","unsubscribeDocumentLang","subscribeToDocumentLang","hostDisconnected","_a","call","_b","_c","disconnect","term","key","args","component","localName","componentTranslation","console","warn","String","fallbackComponentTranslation","fallback","translationValue"],"mappings":"8yBA2BA,SAASA,IAET,OAEaC,EAOX,WAAAC,CACUC,EACAC,EAAU,CAAEC,aAAcL,IAD1BM,KAAIH,KAAJA,EACAG,KAAOF,QAAPA,EAkFFE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EAxFDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKD,QAAIA,GACF,OAAII,EACKR,KAAKH,KAAKO,MAAQ,QAGpBJ,KAAKH,KAAKO,MAAQK,SAASC,gBAAgBN,IACnD,CAMD,gBAAIO,GACF,OAAOX,KAAKK,oBAAoBO,KACjC,CAED,aAAAC,GAEEb,KAAKc,mCAAqCC,EAAmCf,KAAKC,kBAIlF,MAAMC,EAAWC,EAAmBH,KAAKI,MACrCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,GAIzBF,KAAKH,KAAKmB,aAAa,SACzBhB,KAAKiB,SAAW,IAAIC,iBAAiBlB,KAAKC,kBAC1CD,KAAKiB,SAASE,QAAQnB,KAAKH,KAAM,CAC/BuB,YAAY,EACZC,gBAAiB,CAAC,WAKpBrB,KAAKsB,wBAA0BC,EAAwBvB,KAAKC,kBAG9DD,KAAKF,QAAQC,cACd,CAED,gBAAAyB,aAC8B,QAA5BC,EAAAzB,KAAKsB,+BAAuB,IAAAG,GAAAA,EAAAC,KAAA1B,MACW,QAAvC2B,EAAA3B,KAAKc,0CAAkC,IAAAa,GAAAA,EAAAD,KAAA1B,MACxB,QAAf4B,EAAA5B,KAAKiB,gBAAU,IAAAW,GAAAA,EAAAC,YAChB,CAED,IAAAC,CACEC,KACGC,SAEH,MAAM3B,oBAAEA,EAAmBM,aAAEA,GAAiBX,KACxCiC,EAAYjC,KAAKH,KAAKqC,UAGtBC,EAAuB9B,EAAoB4B,GAErB,MAAxBE,EACFC,QAAQC,KAAK,8CAA8CJ,kBAA0BtB,OAEjD,MAA7BwB,EAAqBJ,IAC5BK,QAAQC,KACN,mCAAmCC,OAAOP,wBAA0BE,iBAAyBtB,OAIjG,MAAM4B,EAA+BC,EAASP,GACxCQ,EAAmD,UAA/BN,aAAA,EAAAA,EAAuBJ,UAAQ,IAAAN,EAAAA,EAAAc,EAA6BR,GACtF,MAAmC,mBAArBU,EAAkCA,KAAoBT,GAAQS,CAC7E"}
+{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type {\n  Translation,\n  WellKnownKeys,\n} from './translation.js'\nimport { isServer } from 'lit'\nimport {\n  fallback,\n  resolveTranslation,\n  subscribeToDocumentLang,\n  subscribeToTranslationRegistration,\n} from './translation.js'\n\n// Use fallback (en) as source of truth for valid translation keys\ntype FallbackType = typeof fallback\n\n// helper types...\n\n// used to match any function\ntype Func = (...args: any[]) => any\n\n// if object property is function, use return type, else value type\ntype Result<Type, Key extends keyof Type> = Type[Key] extends Func ? ReturnType<Type[Key]> : Type[Key]\n\n// if object property is function,\ntype FuncParams<Type, K extends keyof Type> = Type[K] extends Func ? Parameters<Type[K]> : []\n\nfunction noop() {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\nimplements ReactiveController {\n  private unsubscribeDocumentLang?: ReturnType<typeof subscribeToDocumentLang>\n  private unsubscribeTranslationRegistration?: ReturnType<typeof subscribeToTranslationRegistration>\n  private observer?: MutationObserver\n  private resolvedTranslation: Translation\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private options = { onLangChange: noop },\n  ) {\n    host.addController(this)\n    this.resolvedTranslation = resolveTranslation(this.lang)\n  }\n\n  /**\n   * The lang of the document or element, with element taking precedence\n   */\n  get lang() {\n    if (isServer) {\n      return this.host.lang || 'en-US'\n    }\n\n    return this.host.lang || document.documentElement.lang\n  }\n\n  /**\n   * The lang of the translation being applied.\n   * This may not match the document/element lang, in case of fallback translation\n   */\n  get resolvedLang() {\n    return this.resolvedTranslation.$lang\n  }\n\n  hostConnected() {\n    // Always subscribe to translation registration changes (for when new translations are registered)\n    this.unsubscribeTranslationRegistration = subscribeToTranslationRegistration(this.handleLangChange)\n\n    // Re-resolve translation now that the host is connected and attributes are set\n    // This handles cases where the lang attribute is set after the constructor runs (e.g., in Vue)\n    const resolved = resolveTranslation(this.lang)\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n    }\n\n    // If the host has its own `lang` attribute, create a local observer to watch for changes to that attribute\n    if (this.host.getAttribute('lang')) {\n      this.observer = new MutationObserver(this.handleLangChange)\n      this.observer.observe(this.host, {\n        attributes: true,\n        attributeFilter: ['lang'],\n      })\n    }\n    else {\n      // Otherwise, also subscribe to document language changes\n      this.unsubscribeDocumentLang = subscribeToDocumentLang(this.handleLangChange)\n    }\n\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribeDocumentLang?.()\n    this.unsubscribeTranslationRegistration?.()\n    this.observer?.disconnect()\n  }\n\n  term<Key extends keyof FallbackType[TComponentName]>(\n    key: Key,\n    ...args: FuncParams<FallbackType[TComponentName], Key>\n  ): Result<FallbackType[TComponentName], Key> {\n    const { resolvedTranslation, resolvedLang } = this\n    const component = this.host.localName as TComponentName\n\n    // Cast to specific component type to satisfy TS that key is valid for this component\n    const componentTranslation = resolvedTranslation[component] as FallbackType[TComponentName] | undefined\n\n    if (componentTranslation == null) {\n      console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n    }\n    else if (componentTranslation[key] == null) {\n      console.warn(\n        `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``,\n      )\n    }\n\n    const fallbackComponentTranslation = fallback[component] as FallbackType[TComponentName]\n    const translationValue = (componentTranslation?.[key] ?? fallbackComponentTranslation[key]) as Result<FallbackType[TComponentName], Key>\n    return typeof translationValue === 'function' ? translationValue(...args) : translationValue\n  }\n\n  private handleLangChange = () => {\n    const resolved = resolveTranslation(this.lang)\n\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n\n      this.options.onLangChange()\n      this.host.requestUpdate()\n    }\n  }\n}\n"],"names":["noop","LocalizeController","constructor","host","options","onLangChange","this","handleLangChange","resolved","resolveTranslation","lang","resolvedTranslation","requestUpdate","addController","isServer","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribeTranslationRegistration","subscribeToTranslationRegistration","getAttribute","observer","MutationObserver","observe","attributes","attributeFilter","unsubscribeDocumentLang","subscribeToDocumentLang","hostDisconnected","_a","call","_b","_c","disconnect","term","key","args","component","localName","componentTranslation","console","warn","String","fallbackComponentTranslation","fallback","translationValue"],"mappings":"00BA2BA,SAASA,IAET,OAEaC,EAOX,WAAAC,CACUC,EACAC,EAAU,CAAEC,aAAcL,IAD1BM,KAAIH,KAAJA,EACAG,KAAOF,QAAPA,EAkFFE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EAxFDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKD,QAAIA,GACF,OAAII,EACKR,KAAKH,KAAKO,MAAQ,QAGpBJ,KAAKH,KAAKO,MAAQK,SAASC,gBAAgBN,IACnD,CAMD,gBAAIO,GACF,OAAOX,KAAKK,oBAAoBO,KACjC,CAED,aAAAC,GAEEb,KAAKc,mCAAqCC,EAAmCf,KAAKC,kBAIlF,MAAMC,EAAWC,EAAmBH,KAAKI,MACrCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,GAIzBF,KAAKH,KAAKmB,aAAa,SACzBhB,KAAKiB,SAAW,IAAIC,iBAAiBlB,KAAKC,kBAC1CD,KAAKiB,SAASE,QAAQnB,KAAKH,KAAM,CAC/BuB,YAAY,EACZC,gBAAiB,CAAC,WAKpBrB,KAAKsB,wBAA0BC,EAAwBvB,KAAKC,kBAG9DD,KAAKF,QAAQC,cACd,CAED,gBAAAyB,aAC8B,QAA5BC,EAAAzB,KAAKsB,+BAAuB,IAAAG,GAAAA,EAAAC,KAAA1B,MACW,QAAvC2B,EAAA3B,KAAKc,0CAAkC,IAAAa,GAAAA,EAAAD,KAAA1B,MACxB,QAAf4B,EAAA5B,KAAKiB,gBAAU,IAAAW,GAAAA,EAAAC,YAChB,CAED,IAAAC,CACEC,KACGC,SAEH,MAAM3B,oBAAEA,EAAmBM,aAAEA,GAAiBX,KACxCiC,EAAYjC,KAAKH,KAAKqC,UAGtBC,EAAuB9B,EAAoB4B,GAErB,MAAxBE,EACFC,QAAQC,KAAK,8CAA8CJ,kBAA0BtB,OAEjD,MAA7BwB,EAAqBJ,IAC5BK,QAAQC,KACN,mCAAmCC,OAAOP,wBAA0BE,iBAAyBtB,OAIjG,MAAM4B,EAA+BC,EAASP,GACxCQ,EAAmD,UAA/BN,aAAA,EAAAA,EAAuBJ,UAAQ,IAAAN,EAAAA,EAAAc,EAA6BR,GACtF,MAAmC,mBAArBU,EAAkCA,KAAoBT,GAAQS,CAC7E"}

package/lib/Message.js

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

package/lib/Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sources":["../src/message/Message.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport itemStyle from '../dropdown-item/DropdownItem.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Message.css'\n\n/**\n * Message represents a specific item within a collection,\n * such as notifications, tasks or conversations. Message\n * can be placed directly inside a dropdown component.\n *\n * @status ready\n * @category action\n * @slot - The message content.\n * @slot footer - Used to place content after the message. Typically used for a timestamp.\n *\n * @cssprop [--n-message-border-color=var(--n-color-border)] - Controls the border color of the message, using our [color tokens](/tokens/#color).\n *\n * @localization unreadLabel - Label for the unread messages.\n */\n@customElement('nord-message')\nexport default class Message extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, itemStyle, style]\n\n  private localize = new LocalizeController<'nord-message'>(this)\n\n  /**\n   * The url the message should link to.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Highlight the message visually. This is meant for highlighting\n   * a new message that just appeared. Highlight style should be removed\n   * after the user has seen the message and there’s been a timeout of\n   * e.g. 30 seconds.\n   */\n  @property({ reflect: true, type: Boolean }) highlight?: boolean\n\n  /**\n   * Mark the message as unread. By default messages are read.\n   */\n  @property({ reflect: true, type: Boolean }) unread?: boolean\n\n  // TODO: dropdown-item and message component have the same logic\n  // for determining if it renders a link vs button. Perhaps we\n  // can later see if both can use a mixin or similar instead?\n  render() {\n    const link = (content: TemplateResult) =>\n      html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</a>`\n    const button = (content: TemplateResult) =>\n      html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</button>`\n\n    const container = this.href ? link : button\n\n    return container(html`\n      <div role=\"img\" class=\"n-unread\" aria-label=${this.localize.term('unreadLabel')} ?hidden=${!this.unread}></div>\n      <slot></slot>\n      <slot name=\"footer\"></slot>\n    `)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-message': Message\n  }\n}\n"],"names":["Message","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","render","href","content","html","ifDefined","ref","focusableRef","term","unread","styles","componentStyle","itemStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"mtEA2Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAAmCF,KAqC3D,CAdC,MAAAG,GAQE,OAFkBH,KAAKI,KALTC,GACZC,CAAI,YAAWC,EAAUP,KAAKI,UAASI,EAAIR,KAAKS,mDAAmDJ,QACrFA,GACdC,CAAI,WAAWE,EAAIR,KAAKS,mDAAmDJ,cAI5DC,CAAI,gDAC2BN,KAAKC,SAASS,KAAK,6BAA2BV,KAAKW,yDAIpG,GAtCMf,EAAMgB,OAAG,CAACC,EAAgBC,EAAWC,GAOfC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBtB,EAAAuB,UAAA,YAAA,GAQEH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA8BzB,EAAAuB,UAAA,iBAAA,GAKnBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA2BzB,EAAAuB,UAAA,cAAA,GArBzCvB,EAAOoB,EAAA,CAD3BM,EAAc,iBACM1B,SAAAA"}
+{"version":3,"file":"Message.js","sources":["../src/message/Message.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport itemStyle from '../dropdown-item/DropdownItem.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Message.css'\n\n/**\n * Message represents a specific item within a collection,\n * such as notifications, tasks or conversations. Message\n * can be placed directly inside a dropdown component.\n *\n * @status ready\n * @category action\n * @slot - The message content.\n * @slot footer - Used to place content after the message. Typically used for a timestamp.\n *\n * @cssprop [--n-message-border-color=var(--n-color-border)] - Controls the border color of the message, using our [color tokens](/tokens/#color).\n *\n * @localization unreadLabel - Label for the unread messages.\n */\n@customElement('nord-message')\nexport default class Message extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, itemStyle, style]\n\n  private localize = new LocalizeController<'nord-message'>(this)\n\n  /**\n   * The url the message should link to.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Highlight the message visually. This is meant for highlighting\n   * a new message that just appeared. Highlight style should be removed\n   * after the user has seen the message and there’s been a timeout of\n   * e.g. 30 seconds.\n   */\n  @property({ reflect: true, type: Boolean }) highlight?: boolean\n\n  /**\n   * Mark the message as unread. By default messages are read.\n   */\n  @property({ reflect: true, type: Boolean }) unread?: boolean\n\n  // TODO: dropdown-item and message component have the same logic\n  // for determining if it renders a link vs button. Perhaps we\n  // can later see if both can use a mixin or similar instead?\n  render() {\n    const link = (content: TemplateResult) =>\n      html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</a>`\n    const button = (content: TemplateResult) =>\n      html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</button>`\n\n    const container = this.href ? link : button\n\n    return container(html`\n      <div role=\"img\" class=\"n-unread\" aria-label=${this.localize.term('unreadLabel')} ?hidden=${!this.unread}></div>\n      <slot></slot>\n      <slot name=\"footer\"></slot>\n    `)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-message': Message\n  }\n}\n"],"names":["Message","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","render","href","content","html","ifDefined","ref","focusableRef","term","unread","styles","componentStyle","itemStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"+uEA2Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAAmCF,KAqC3D,CAdC,MAAAG,GAQE,OAFkBH,KAAKI,KALTC,GACZC,CAAI,YAAWC,EAAUP,KAAKI,UAASI,EAAIR,KAAKS,mDAAmDJ,QACrFA,GACdC,CAAI,WAAWE,EAAIR,KAAKS,mDAAmDJ,cAI5DC,CAAI,gDAC2BN,KAAKC,SAASS,KAAK,6BAA2BV,KAAKW,yDAIpG,GAtCMf,EAAMgB,OAAG,CAACC,EAAgBC,EAAWC,GAOfC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBtB,EAAAuB,UAAA,YAAA,GAQEH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA8BzB,EAAAuB,UAAA,iBAAA,GAKnBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA2BzB,EAAAuB,UAAA,cAAA,GArBzCvB,EAAOoB,EAAA,CAD3BM,EAAc,iBACM1B,SAAAA"}

package/lib/Modal.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as i}from"./interface-close-small-CnpAFMO3.js";import{css as n,LitElement as t,html as e}from"lit";import{query as a,property as l,customElement as s}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-BJ5O5n8k.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.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);inset:0;position:fixed;transition:visibility var(--n-transition-slowly);visibility:hidden;z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{background:var(--n-color-overlay);inset:0;overflow-y:auto;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)));position:fixed;transition:opacity var(--n-transition-slowly)}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:#0000;--n-footer-box-shadow:none;background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);display:flex;flex-direction:column;inline-size:100%;margin:auto;max-inline-size:var(--_n-modal-max-inline-size);position:relative;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{opacity:0;transform:translateY(-10px) scale(.97)}.n-modal:focus{outline:none}.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{align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border);display:flex;gap:var(--n-space-m)}.n-padded{padding-block:var(--_n-modal-padding-block);padding-inline:var(--_n-modal-padding-inline)}.n-close{align-items:center;background-color:initial;block-size:var(--n-space-xl);border:none;color:var(--n-color-text);cursor:pointer;display:flex;inline-size:var(--n-space-xl);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);justify-content:center;position:relative;transition:color var(--n-transition-quickly)}.n-close,.n-close:after{border-radius:var(--n-border-radius)}.n-close:after{content:"";display:block;inset:calc(var(--n-space-s)*-1);position:absolute}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{box-shadow:var(--_n-modal-focus-ring);outline:none}@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(*){font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important;margin:0!important;padding:0!important}slot[name=footer]{flex-direction:column;gap:var(--n-space-xs);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]{align-items:center;flex-direction:row;gap:var(--n-space-s);justify-content:flex-end}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(*){block-size:auto;inline-size:100%}`;h.registerIcon(i);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 t{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,i)=>this.close(o,i)}),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,i){this.open=!1,null!=o&&(this.returnValue=o);const n=null!=i?i:this.lastTrigger;this.dispatchEvent(new g(n)),this.lastTrigger=void 0}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return e`<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([l({type:Boolean,reflect:!0})],x.prototype,"open",void 0),o([l({reflect:!0})],x.prototype,"size",void 0),o([l({attribute:!1})],x.prototype,"returnValue",void 0),o([l({type:Boolean,reflect:!0})],x.prototype,"scrollable",void 0),o([l({type:Boolean,reflect:!0})],x.prototype,"persistent",void 0),o([c("open","updated")],x.prototype,"handleOpenUpdated",null),x=o([s("nord-modal")],x);var z=x;export{b as ModalCancelEvent,g as ModalCloseEvent,z as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as i}from"./interface-close-small-CnpAFMO3.js";import{css as n,LitElement as t,html as e}from"lit";import{query as a,property as l,customElement as s}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-BJ5O5n8k.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.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);inset:0;position:fixed;transition:visibility var(--n-transition-slowly);visibility:hidden;z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{background:var(--n-color-overlay);inset:0;overflow-y:auto;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)));position:fixed;transition:opacity var(--n-transition-slowly)}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:#0000;--n-footer-box-shadow:none;background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);display:flex;flex-direction:column;inline-size:100%;margin:auto;max-inline-size:var(--_n-modal-max-inline-size);position:relative;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{opacity:0;transform:translateY(-10px) scale(.97)}.n-modal:focus{outline:none}.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{align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border);display:flex;gap:var(--n-space-m)}.n-padded{padding-block:var(--_n-modal-padding-block);padding-inline:var(--_n-modal-padding-inline)}.n-close{align-items:center;background-color:initial;block-size:var(--n-space-xl);border:none;color:var(--n-color-text);cursor:pointer;display:flex;inline-size:var(--n-space-xl);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);justify-content:center;position:relative;transition:color var(--n-transition-quickly)}.n-close,.n-close:after{border-radius:var(--n-border-radius)}.n-close:after{content:"";display:block;inset:calc(var(--n-space-s)*-1);position:absolute}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{box-shadow:var(--_n-modal-focus-ring);outline:none}@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(*){font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important;margin:0!important;padding:0!important}slot[name=footer]{flex-direction:column;gap:var(--n-space-xs);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]{align-items:center;flex-direction:row;gap:var(--n-space-s);justify-content:flex-end}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(*){block-size:auto;inline-size:100%}`;h.registerIcon(i);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 t{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,i)=>this.close(o,i)}),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,i){this.open=!1,null!=o&&(this.returnValue=o);const n=null!=i?i:this.lastTrigger;this.dispatchEvent(new g(n)),this.lastTrigger=void 0}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return e`<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([l({type:Boolean,reflect:!0})],x.prototype,"open",void 0),o([l({reflect:!0})],x.prototype,"size",void 0),o([l({attribute:!1})],x.prototype,"returnValue",void 0),o([l({type:Boolean,reflect:!0})],x.prototype,"scrollable",void 0),o([l({type:Boolean,reflect:!0})],x.prototype,"persistent",void 0),o([c("open","updated")],x.prototype,"handleOpenUpdated",null),x=o([s("nord-modal")],x);var z=x;export{b as ModalCancelEvent,g as ModalCloseEvent,z as default};
 //# sourceMappingURL=Modal.js.map

package/lib/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent } from '../common/events.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Modal.css'\nimport { ModalController } from './ModalController.js'\n\nimport '../footer/Footer.js'\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Event dispatched when a modal is about to be dismissed.\n * The `trigger` property contains the original event that caused the dismiss.\n */\nexport class ModalCancelEvent extends NordEvent {\n  declare trigger: Event\n\n  constructor(trigger: Event) {\n    super('cancel', { cancelable: true })\n    Object.defineProperty(this, 'trigger', {\n      value: trigger,\n      enumerable: true,\n      writable: false,\n    })\n  }\n}\n\n/**\n * Event dispatched when a modal is closed.\n * The `trigger` property contains the original event that caused the close, if available.\n */\nexport class ModalCloseEvent extends NordEvent {\n  declare trigger: Event | undefined\n\n  constructor(trigger?: Event) {\n    super('close')\n    Object.defineProperty(this, 'trigger', {\n      value: trigger,\n      enumerable: true,\n      writable: false,\n    })\n  }\n}\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot feature - Slot for full bleed content like an image.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires {ModalCancelEvent} cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. The event includes a trigger property containing the original event that caused the dismiss. Call preventDefault() on the event to prevent the modal closing.\n * @fires {ModalCloseEvent} close - Dispatched when a modal is closed for any reason. The event includes an optional trigger property containing the original event that caused the close, if the modal was closed by a user action.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement('nord-modal')\nexport default class Modal extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query('.n-modal', true) private modal!: HTMLDivElement\n  @query('.n-modal-backdrop', true) private backdrop!: HTMLDivElement\n\n  private lastTrigger?: Event\n\n  private defaultSlot = new SlotController(this)\n  private headerSlot = new SlotController(this, 'header')\n  private featureSlot = new SlotController(this, 'feature')\n  private footerSlot = new SlotController(this, 'footer')\n\n  private localize = new LocalizeController<'nord-modal'>(this)\n  private modalController = new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: (e: Event) => this.handleDismiss(e),\n    isLightDismissEnabled: () => !this.persistent,\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: (returnValue, trigger) => this.close(returnValue, trigger),\n  })\n\n  /**\n   * Controls whether the modal is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Controls the max-width of the modal when open.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' | 'xl' = 'm'\n\n  /**\n   * The reason why the modal was closed. This typically indicates\n   * which button the user pressed to close the modal, though any value\n   * can be supplied if the modal is programmatically closed.\n   */\n  @property({ attribute: false }) returnValue: string = ''\n\n  /**\n   * By default if a modal is too big for the browser window,\n   * the entire modal will scroll. This setting changes that behavior\n   * so that the body of the modal scrolls instead, with the modal\n   * itself remaining fixed.\n   */\n  @property({ type: Boolean, reflect: true }) scrollable = false\n\n  /**\n   * When true, the modal will not close when clicking the backdrop or pressing Escape,\n   * and the close button will be hidden. Only programmatic close or custom action buttons\n   * can dismiss the modal.\n   */\n  @property({ type: Boolean, reflect: true }) persistent = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute('role', 'dialog')\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    // Clear trigger reference when modal is removed from DOM to prevent memory leaks\n    this.lastTrigger = undefined\n  }\n\n  /**\n   * Show the modal, automatically moving focus to the modal or a child\n   * element with an `autofocus` attribute.\n   */\n  showModal() {\n    this.open = true\n  }\n\n  /**\n   * Programmatically close the modal.\n   * @param returnValue An optional value to indicate why the modal was closed.\n   * @param trigger An optional event that triggered the close.\n   */\n  close(returnValue?: string, trigger?: Event) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    const closeTrigger = trigger ?? this.lastTrigger\n    this.dispatchEvent(new ModalCloseEvent(closeTrigger))\n    this.lastTrigger = undefined\n  }\n\n  /**\n   * Programmatically focus the modal.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions) {\n    this.modal.focus({ preventScroll: true, ...options })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-modal-backdrop\">\n        <div\n          class=${classMap({\n            'n-modal': true,\n            'n-overflow-hidden': this.featureSlot.hasContent && this.defaultSlot.isEmpty && this.footerSlot.isEmpty,\n          })}\n          tabindex=\"0\"\n        >\n          <!-- eslint-disable-next-line @nordhealth/no-unknown-legacy-classes -->\n          <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n            <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n            <button class=\"n-close\" @click=${(e: Event) => this.handleDismiss(e)} ?hidden=${this.persistent}>\n              <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term('closeLabel')}></nord-icon>\n            </button>\n          </div>\n\n          <div class=\"n-modal-body\">\n            <slot\n              name=${this.featureSlot.slotName}\n              class=${this.headerSlot.isEmpty ? 'n-rounded-top' : ''}\n              ?hidden=${this.featureSlot.isEmpty}\n            ></slot>\n            <slot class=${this.defaultSlot.isEmpty ? '' : 'n-body-padded'}></slot>\n          </div>\n\n          <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n            <slot name=${this.footerSlot.slotName}></slot>\n          </nord-footer>\n        </div>\n      </div>\n    `\n  }\n\n  @observe('open', 'updated')\n  protected handleOpenUpdated(prev: boolean) {\n    if (this.open) {\n      this.modalController.block()\n    }\n    else if (prev === true) {\n      this.modalController.unblock()\n    }\n  }\n\n  private handleDismiss(trigger: Event) {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new ModalCancelEvent(trigger))\n\n    if (allowed) {\n      this.lastTrigger = trigger\n      this.close()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-modal': Modal\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","ModalCancelEvent","NordEvent","constructor","trigger","super","cancelable","Object","defineProperty","this","value","enumerable","writable","ModalCloseEvent","Modal","LitElement","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","e","handleDismiss","isLightDismissEnabled","persistent","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","setAttribute","disconnectedCallback","lastTrigger","undefined","showModal","closeTrigger","dispatchEvent","focus","options","preventScroll","render","html","classMap","hasContent","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent } from '../common/events.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Modal.css'\nimport { ModalController } from './ModalController.js'\n\nimport '../footer/Footer.js'\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Event dispatched when a modal is about to be dismissed.\n * The `trigger` property contains the original event that caused the dismiss.\n */\nexport class ModalCancelEvent extends NordEvent {\n  declare trigger: Event\n\n  constructor(trigger: Event) {\n    super('cancel', { cancelable: true })\n    Object.defineProperty(this, 'trigger', {\n      value: trigger,\n      enumerable: true,\n      writable: false,\n    })\n  }\n}\n\n/**\n * Event dispatched when a modal is closed.\n * The `trigger` property contains the original event that caused the close, if available.\n */\nexport class ModalCloseEvent extends NordEvent {\n  declare trigger: Event | undefined\n\n  constructor(trigger?: Event) {\n    super('close')\n    Object.defineProperty(this, 'trigger', {\n      value: trigger,\n      enumerable: true,\n      writable: false,\n    })\n  }\n}\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot feature - Slot for full bleed content like an image.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires {ModalCancelEvent} cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. The event includes a trigger property containing the original event that caused the dismiss. Call preventDefault() on the event to prevent the modal closing.\n * @fires {ModalCloseEvent} close - Dispatched when a modal is closed for any reason. The event includes an optional trigger property containing the original event that caused the close, if the modal was closed by a user action.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement('nord-modal')\nexport default class Modal extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query('.n-modal', true) private modal!: HTMLDivElement\n  @query('.n-modal-backdrop', true) private backdrop!: HTMLDivElement\n\n  private lastTrigger?: Event\n\n  private defaultSlot = new SlotController(this)\n  private headerSlot = new SlotController(this, 'header')\n  private featureSlot = new SlotController(this, 'feature')\n  private footerSlot = new SlotController(this, 'footer')\n\n  private localize = new LocalizeController<'nord-modal'>(this)\n  private modalController = new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: (e: Event) => this.handleDismiss(e),\n    isLightDismissEnabled: () => !this.persistent,\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: (returnValue, trigger) => this.close(returnValue, trigger),\n  })\n\n  /**\n   * Controls whether the modal is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Controls the max-width of the modal when open.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' | 'xl' = 'm'\n\n  /**\n   * The reason why the modal was closed. This typically indicates\n   * which button the user pressed to close the modal, though any value\n   * can be supplied if the modal is programmatically closed.\n   */\n  @property({ attribute: false }) returnValue: string = ''\n\n  /**\n   * By default if a modal is too big for the browser window,\n   * the entire modal will scroll. This setting changes that behavior\n   * so that the body of the modal scrolls instead, with the modal\n   * itself remaining fixed.\n   */\n  @property({ type: Boolean, reflect: true }) scrollable = false\n\n  /**\n   * When true, the modal will not close when clicking the backdrop or pressing Escape,\n   * and the close button will be hidden. Only programmatic close or custom action buttons\n   * can dismiss the modal.\n   */\n  @property({ type: Boolean, reflect: true }) persistent = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute('role', 'dialog')\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    // Clear trigger reference when modal is removed from DOM to prevent memory leaks\n    this.lastTrigger = undefined\n  }\n\n  /**\n   * Show the modal, automatically moving focus to the modal or a child\n   * element with an `autofocus` attribute.\n   */\n  showModal() {\n    this.open = true\n  }\n\n  /**\n   * Programmatically close the modal.\n   * @param returnValue An optional value to indicate why the modal was closed.\n   * @param trigger An optional event that triggered the close.\n   */\n  close(returnValue?: string, trigger?: Event) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    const closeTrigger = trigger ?? this.lastTrigger\n    this.dispatchEvent(new ModalCloseEvent(closeTrigger))\n    this.lastTrigger = undefined\n  }\n\n  /**\n   * Programmatically focus the modal.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions) {\n    this.modal.focus({ preventScroll: true, ...options })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-modal-backdrop\">\n        <div\n          class=${classMap({\n            'n-modal': true,\n            'n-overflow-hidden': this.featureSlot.hasContent && this.defaultSlot.isEmpty && this.footerSlot.isEmpty,\n          })}\n          tabindex=\"0\"\n        >\n          <!-- eslint-disable-next-line @nordhealth/no-unknown-legacy-classes -->\n          <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n            <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n            <button class=\"n-close\" @click=${(e: Event) => this.handleDismiss(e)} ?hidden=${this.persistent}>\n              <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term('closeLabel')}></nord-icon>\n            </button>\n          </div>\n\n          <div class=\"n-modal-body\">\n            <slot\n              name=${this.featureSlot.slotName}\n              class=${this.headerSlot.isEmpty ? 'n-rounded-top' : ''}\n              ?hidden=${this.featureSlot.isEmpty}\n            ></slot>\n            <slot class=${this.defaultSlot.isEmpty ? '' : 'n-body-padded'}></slot>\n          </div>\n\n          <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n            <slot name=${this.footerSlot.slotName}></slot>\n          </nord-footer>\n        </div>\n      </div>\n    `\n  }\n\n  @observe('open', 'updated')\n  protected handleOpenUpdated(prev: boolean) {\n    if (this.open) {\n      this.modalController.block()\n    }\n    else if (prev === true) {\n      this.modalController.unblock()\n    }\n  }\n\n  private handleDismiss(trigger: Event) {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new ModalCancelEvent(trigger))\n\n    if (allowed) {\n      this.lastTrigger = trigger\n      this.close()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-modal': Modal\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","ModalCancelEvent","NordEvent","constructor","trigger","super","cancelable","Object","defineProperty","this","value","enumerable","writable","ModalCloseEvent","Modal","LitElement","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","e","handleDismiss","isLightDismissEnabled","persistent","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","setAttribute","disconnectedCallback","lastTrigger","undefined","showModal","closeTrigger","dispatchEvent","focus","options","preventScroll","render","html","classMap","hasContent","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}

package/lib/NavGroup.js

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

package/lib/NavGroup.js.map

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