@nordhealth/components 3.14.1 → 3.16.0-alpha.0

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype Options<T> = {\n  channelName: string\n  onMessage: (message: T) => void\n  enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n  private channel?: BroadcastChannel\n  private options: Required<Options<T>>\n\n  constructor(host: ReactiveControllerHost, options: Options<T>) {\n    host.addController(this)\n    this.options = { enabled: defaultEnabled, ...options }\n  }\n\n  hostConnected(): void {\n    if (typeof BroadcastChannel !== \"undefined\") {\n      this.channel = new BroadcastChannel(this.options.channelName)\n      this.channel.addEventListener(\"message\", this)\n    }\n  }\n\n  hostDisconnected(): void {\n    this.channel?.removeEventListener(\"message\", this)\n    this.channel?.close()\n  }\n\n  handleEvent(event: MessageEvent<T>) {\n    if (this.options.enabled()) {\n      this.options.onMessage(event.data)\n    }\n  }\n\n  post(message: T) {\n    if (this.options.enabled()) {\n      this.channel?.postMessage(message)\n    }\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse\n) {\n  return {\n    get value(): T {\n      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      } catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, 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 * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.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 { BroadcastChannelController } from \"../common/controllers/BroadcastChannelController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst navWidthStore = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage(\"nord-layout.navOpen\", true)\n\nconst navMachine = fsm({\n  opened: {\n    toggle: \"closed\",\n    close: \"closed\",\n  },\n  closed: {\n    toggle: \"opened\",\n    open: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n  },\n  peek: {\n    toggle: \"opened\",\n    focusout: \"unpeek\",\n    pointerleave: \"wait\",\n    dropdownOpen: \"blocked\",\n    click: \"unpeek\",\n    open: \"opened\",\n  },\n  blocked: {\n    dropdownClose: \"peek\",\n    open: \"opened\",\n  },\n  wait: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    timeout: \"unpeek\",\n  },\n  unpeek: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    transitionend: \"closed\",\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\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 */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, \"nav\")\n  private drawerSlot = new SlotController(this, \"drawer\")\n  private topBarSlot = new SlotController(this, \"top-bar\")\n  private headerSlot = new SlotController(this, \"header\")\n  private footerSlot = new SlotController(this, \"footer\")\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl,\n  })\n\n  private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: \"nord-layout-nav-state\",\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: data => {\n      if (\"navOpen\" in data) {\n        this.navOpen = data.navOpen\n      }\n      if (\"navWidth\" in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })\n\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = navWidthStore.value\n  @state() private isDragging = false\n  @state() private navState!: NavState\n  @state() private wideScreen = mediaQuery.matches\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen!: boolean\n\n  /**\n   * Controls whether the navigation's open/closed state is persisted across page loads.\n   * This is useful for multi-page apps, where clicks on links trigger a full page load.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"persist-nav-state\" }) persistNavState = false\n\n  /**\n   * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n   * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n   */\n  @property({ type: Boolean, reflect: true, attribute: \"sync-nav-state\" }) syncNavState = false\n\n  /**\n   * 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   * 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  }\n\n  willUpdate() {\n    // we only want this logic to run once, before first render\n    if (this.hasUpdated) {\n      return\n    }\n\n    // on mobile it should always start closed\n    if (this.isNarrow) {\n      this.navState = \"closed\"\n    }\n    // if nav state is persisted, and it was previously closed, start closed\n    else if (this.persistNavState && navOpenStore.value === false) {\n      this.navState = \"closed\"\n    }\n    // otherwise start open\n    else {\n      this.navState = \"opened\"\n    }\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n          \"n-has-header\": headerSlot.hasContent,\n          \"n-has-footer\": footerSlot.hasContent,\n          \"n-has-top-bar\": topBarSlot.hasContent,\n          \"n-has-drawer\": drawerSlot.hasContent,\n          \"n-has-nav\": navSlot.hasContent,\n        })}\n        style=${styleMap({\n          \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : \"closed\"}\n        data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent ? this.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    /* eslint-disable lit-a11y/mouse-events-have-key-events */\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    /* eslint-enable lit-a11y/mouse-events-have-key-events */\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() {\n    navWidthStore.value = this.navWidth\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, NAV_DEFAULT_WIDTH))\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      this.broadcast.post({ navOpen: this.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 = () => {\n    this.navTransition(\"toggle\")\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition(\"focusin\")\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition(\"focusout\")\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\n      this.navTransition(\"pointerenter\")\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition(\"pointerleave\")\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition(\"transitionend\")\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case \"ArrowLeft\":\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case \"ArrowRight\":\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case \"Enter\":\n        this.navTransition(\"toggle\")\n        break\n      case \"Home\":\n        this.setNavWidth(NAV_MIN_WIDTH)\n        break\n      case \"End\":\n        this.setNavWidth(NAV_MAX_WIDTH)\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), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n  }\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n    this.broadcast.post({ navWidth: this.navWidth })\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-layout\": Layout\n  }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","mediaQuery","matchMedia","navWidthStore","navOpenStore","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","matches","persistNavState","padding","sticky","stickyFooter","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","willUpdate","hasUpdated","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype Options<T> = {\n  channelName: string\n  onMessage: (message: T) => void\n  enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n  private channel?: BroadcastChannel\n  private options: Required<Options<T>>\n\n  constructor(host: ReactiveControllerHost, options: Options<T>) {\n    host.addController(this)\n    this.options = { enabled: defaultEnabled, ...options }\n  }\n\n  hostConnected(): void {\n    if (typeof BroadcastChannel !== \"undefined\") {\n      this.channel = new BroadcastChannel(this.options.channelName)\n      this.channel.addEventListener(\"message\", this)\n    }\n  }\n\n  hostDisconnected(): void {\n    this.channel?.removeEventListener(\"message\", this)\n    this.channel?.close()\n  }\n\n  handleEvent(event: MessageEvent<T>) {\n    if (this.options.enabled()) {\n      this.options.onMessage(event.data)\n    }\n  }\n\n  post(message: T) {\n    if (this.options.enabled()) {\n      this.channel?.postMessage(message)\n    }\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse\n) {\n  return {\n    get value(): T {\n      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      } catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, 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 * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.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 { BroadcastChannelController } from \"../common/controllers/BroadcastChannelController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst navWidthStore = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage(\"nord-layout.navOpen\", true)\n\nconst navMachine = fsm({\n  opened: {\n    toggle: \"closed\",\n    close: \"closed\",\n  },\n  closed: {\n    toggle: \"opened\",\n    open: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n  },\n  peek: {\n    toggle: \"opened\",\n    focusout: \"unpeek\",\n    pointerleave: \"wait\",\n    dropdownOpen: \"blocked\",\n    click: \"unpeek\",\n    open: \"opened\",\n  },\n  blocked: {\n    dropdownClose: \"peek\",\n    open: \"opened\",\n  },\n  wait: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    timeout: \"unpeek\",\n  },\n  unpeek: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    transitionend: \"closed\",\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\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 */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, \"nav\")\n  private drawerSlot = new SlotController(this, \"drawer\")\n  private topBarSlot = new SlotController(this, \"top-bar\")\n  private headerSlot = new SlotController(this, \"header\")\n  private footerSlot = new SlotController(this, \"footer\")\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl,\n  })\n\n  private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: \"nord-layout-nav-state\",\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: data => {\n      if (\"navOpen\" in data) {\n        this.navOpen = data.navOpen\n      }\n      if (\"navWidth\" in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })\n\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = navWidthStore.value\n  @state() private isDragging = false\n  @state() private navState!: NavState\n  @state() private wideScreen = mediaQuery.matches\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen!: boolean\n\n  /**\n   * Controls whether the navigation's open/closed state is persisted across page loads.\n   * This is useful for multi-page apps, where clicks on links trigger a full page load.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"persist-nav-state\" }) persistNavState = false\n\n  /**\n   * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n   * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n   */\n  @property({ type: Boolean, reflect: true, attribute: \"sync-nav-state\" }) syncNavState = false\n\n  /**\n   * 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   * 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  }\n\n  willUpdate() {\n    // we only want this logic to run once, before first render\n    if (this.hasUpdated) {\n      return\n    }\n\n    // on mobile it should always start closed\n    if (this.isNarrow) {\n      this.navState = \"closed\"\n    }\n    // if nav state is persisted, and it was previously closed, start closed\n    else if (this.persistNavState && navOpenStore.value === false) {\n      this.navState = \"closed\"\n    }\n    // otherwise start open\n    else {\n      this.navState = \"opened\"\n    }\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n          \"n-has-header\": headerSlot.hasContent,\n          \"n-has-footer\": footerSlot.hasContent,\n          \"n-has-top-bar\": topBarSlot.hasContent,\n          \"n-has-drawer\": drawerSlot.hasContent,\n          \"n-has-nav\": navSlot.hasContent,\n        })}\n        style=${styleMap({\n          \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : \"closed\"}\n        data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent ? this.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    /* eslint-disable lit-a11y/mouse-events-have-key-events */\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    /* eslint-enable lit-a11y/mouse-events-have-key-events */\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() {\n    navWidthStore.value = this.navWidth\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, NAV_DEFAULT_WIDTH))\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      this.broadcast.post({ navOpen: this.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 = () => {\n    this.navTransition(\"toggle\")\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition(\"focusin\")\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition(\"focusout\")\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\n      this.navTransition(\"pointerenter\")\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition(\"pointerleave\")\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition(\"transitionend\")\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case \"ArrowLeft\":\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case \"ArrowRight\":\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case \"Enter\":\n        this.navTransition(\"toggle\")\n        break\n      case \"Home\":\n        this.setNavWidth(NAV_MIN_WIDTH)\n        break\n      case \"End\":\n        this.setNavWidth(NAV_MAX_WIDTH)\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), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n  }\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n    this.broadcast.post({ navWidth: this.navWidth })\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-layout\": Layout\n  }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","mediaQuery","matchMedia","navWidthStore","navOpenStore","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","matches","persistNavState","padding","sticky","stickyFooter","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","willUpdate","hasUpdated","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/LightDismissController-11ae4745.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightDismissController-11ae4745.js","sources":["../src/common/controllers/LightDismissController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\nimport { ShortcutController } from \"./ShortcutController.js\"\n\nexport type LightDismissOptions = {\n  isOpen: () => boolean\n  onDismiss: EventListener\n  isDismissible?: (node: EventTarget) => boolean\n}\n\nexport class LightDismissController implements ReactiveController {\n  private shortcut: ShortcutController\n  private events: EventController\n\n  private isMouseDownOutside = false\n\n  constructor(private host: ReactiveControllerHost & Element, private options: LightDismissOptions) {\n    host.addController(this)\n    this.shortcut = new ShortcutController(host, { Escape: this.handleEsc })\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    this.events.listen(document, \"mousedown\", this.handleMouseDown, true)\n    this.events.listen(document, \"mouseup\", this.handleMouseUp, true)\n  }\n\n  private handleEsc = (e: KeyboardEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    this.options.onDismiss(e)\n  }\n\n  private handleMouseDown = (e: MouseEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n    this.isMouseDownOutside = e.composedPath().every(predicate)\n  }\n\n  private handleMouseUp = (e: MouseEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n    const isMouseUpOutside = e.composedPath().every(predicate)\n\n    const isClickOutside = isMouseUpOutside && this.isMouseDownOutside\n\n    if (isClickOutside) {\n      this.options.onDismiss(e)\n    }\n  }\n}\n"],"names":["LightDismissController","constructor","host","options","this","isMouseDownOutside","handleEsc","e","isOpen","onDismiss","handleMouseDown","predicate","_a","isDismissible","node","composedPath","every","handleMouseUp","addController","shortcut","ShortcutController","Escape","events","EventController","hostConnected","listen","document"],"mappings":"6GAUaA,EAMXC,YAAoBC,EAAgDC,GAAhDC,KAAIF,KAAJA,EAAgDE,KAAOD,QAAPA,EAF5DC,KAAkBC,oBAAG,EAarBD,KAAAE,UAAaC,IACdH,KAAKD,QAAQK,UAIlBJ,KAAKD,QAAQM,UAAUF,EAAE,EAGnBH,KAAAM,gBAAmBH,UACzB,IAAKH,KAAKD,QAAQK,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAR,KAAKD,QAAQU,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAASV,KAAKF,KAC7GE,KAAKC,mBAAqBE,EAAEQ,eAAeC,MAAML,EAAU,EAGrDP,KAAAa,cAAiBV,UACvB,IAAKH,KAAKD,QAAQK,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAR,KAAKD,QAAQU,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAASV,KAAKF,KACpFK,EAAEQ,eAAeC,MAAML,IAELP,KAAKC,oBAG9CD,KAAKD,QAAQM,UAAUF,EACxB,EAvCDL,EAAKgB,cAAcd,MACnBA,KAAKe,SAAW,IAAIC,EAAmBlB,EAAM,CAAEmB,OAAQjB,KAAKE,YAC5DF,KAAKkB,OAAS,IAAIC,EAAgBrB,EACnC,CAEDsB,gBACEpB,KAAKkB,OAAOG,OAAOC,SAAU,YAAatB,KAAKM,iBAAiB,GAChEN,KAAKkB,OAAOG,OAAOC,SAAU,UAAWtB,KAAKa,eAAe,EAC7D"}
+{"version":3,"file":"LightDismissController-11ae4745.js","sources":["../src/common/controllers/LightDismissController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\nimport { ShortcutController } from \"./ShortcutController.js\"\n\nexport type LightDismissOptions = {\n  isOpen: () => boolean\n  onDismiss: EventListener\n  isDismissible?: (node: EventTarget) => boolean\n}\n\nexport class LightDismissController implements ReactiveController {\n  private shortcut: ShortcutController\n  private events: EventController\n\n  private isMouseDownOutside = false\n\n  constructor(private host: ReactiveControllerHost & Element, private options: LightDismissOptions) {\n    host.addController(this)\n    this.shortcut = new ShortcutController(host, { Escape: this.handleEsc })\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    this.events.listen(document, \"mousedown\", this.handleMouseDown, true)\n    this.events.listen(document, \"mouseup\", this.handleMouseUp, true)\n  }\n\n  private handleEsc = (e: KeyboardEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    this.options.onDismiss(e)\n  }\n\n  private handleMouseDown = (e: MouseEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n    this.isMouseDownOutside = e.composedPath().every(predicate)\n  }\n\n  private handleMouseUp = (e: MouseEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n    const isMouseUpOutside = e.composedPath().every(predicate)\n\n    const isClickOutside = isMouseUpOutside && this.isMouseDownOutside\n\n    if (isClickOutside) {\n      this.options.onDismiss(e)\n    }\n  }\n}\n"],"names":["LightDismissController","constructor","host","options","this","isMouseDownOutside","handleEsc","e","isOpen","onDismiss","handleMouseDown","predicate","_a","isDismissible","node","composedPath","every","handleMouseUp","addController","shortcut","ShortcutController","Escape","events","EventController","hostConnected","listen","document"],"mappings":"6GAUaA,EAMX,WAAAC,CAAoBC,EAAgDC,GAAhDC,KAAIF,KAAJA,EAAgDE,KAAOD,QAAPA,EAF5DC,KAAkBC,oBAAG,EAarBD,KAAAE,UAAaC,IACdH,KAAKD,QAAQK,UAIlBJ,KAAKD,QAAQM,UAAUF,EAAE,EAGnBH,KAAAM,gBAAmBH,UACzB,IAAKH,KAAKD,QAAQK,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAR,KAAKD,QAAQU,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAASV,KAAKF,KAC7GE,KAAKC,mBAAqBE,EAAEQ,eAAeC,MAAML,EAAU,EAGrDP,KAAAa,cAAiBV,UACvB,IAAKH,KAAKD,QAAQK,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAR,KAAKD,QAAQU,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAASV,KAAKF,KACpFK,EAAEQ,eAAeC,MAAML,IAELP,KAAKC,oBAG9CD,KAAKD,QAAQM,UAAUF,EACxB,EAvCDL,EAAKgB,cAAcd,MACnBA,KAAKe,SAAW,IAAIC,EAAmBlB,EAAM,CAAEmB,OAAQjB,KAAKE,YAC5DF,KAAKkB,OAAS,IAAIC,EAAgBrB,EACnC,CAED,aAAAsB,GACEpB,KAAKkB,OAAOG,OAAOC,SAAU,YAAatB,KAAKM,iBAAiB,GAChEN,KAAKkB,OAAOG,OAAOC,SAAU,UAAWtB,KAAKa,eAAe,EAC7D"}

package/lib/{LightDomController-3d3edb76.js → LightDomController-5388d84c.js}

@@ -1,2 +1,2 @@
-import{B as t}from"./query-assigned-elements-15485e3d.js";class s{constructor(t,s){this.host=t,this.options=s,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{s as L};
-//# sourceMappingURL=LightDomController-3d3edb76.js.map
+import{D as t}from"./query-assigned-elements-92ce7494.js";class s{constructor(t,s){this.host=t,this.options=s,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{s as L};
+//# sourceMappingURL=LightDomController-5388d84c.js.map

package/lib/{LightDomController-3d3edb76.js.map → LightDomController-5388d84c.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LightDomController-3d3edb76.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost, render, RenderOptions } from \"lit\"\n\ntype LightDomOptions = {\n  render: () => unknown\n  renderOptions?: RenderOptions\n  container?: HTMLElement\n}\n\nexport class LightDomController implements ReactiveController {\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options: LightDomOptions) {\n    host.addController(this)\n  }\n\n  private get container(): HTMLElement {\n    return this.options.container || this.host\n  }\n\n  hostUpdated() {\n    this.render()\n  }\n\n  private render() {\n    render(this.options.render(), this.container, this.options.renderOptions)\n  }\n}\n"],"names":["LightDomController","constructor","host","options","this","addController","container","hostUpdated","render","renderOptions"],"mappings":"gEAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,KACpB,CAEWE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,IACvC,CAEDK,cACEH,KAAKI,QACN,CAEOA,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQM,cAC5D"}
+{"version":3,"file":"LightDomController-5388d84c.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost, render, RenderOptions } from \"lit\"\n\ntype LightDomOptions = {\n  render: () => unknown\n  renderOptions?: RenderOptions\n  container?: HTMLElement\n}\n\nexport class LightDomController implements ReactiveController {\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options: LightDomOptions) {\n    host.addController(this)\n  }\n\n  private get container(): HTMLElement {\n    return this.options.container || this.host\n  }\n\n  hostUpdated() {\n    this.render()\n  }\n\n  private render() {\n    render(this.options.render(), this.container, this.options.renderOptions)\n  }\n}\n"],"names":["LightDomController","constructor","host","options","this","addController","container","hostUpdated","render","renderOptions"],"mappings":"gEAQaA,EACX,WAAAC,CAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,KACpB,CAED,aAAYE,GACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,IACvC,CAED,WAAAK,GACEH,KAAKI,QACN,CAEO,MAAAA,GACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQM,cAC5D"}

package/lib/{LightSlotController-0953b4d4.js → LightSlotController-c51e9cf5.js}

@@ -1,2 +1,2 @@
-import{A as t}from"./query-assigned-elements-15485e3d.js";import{L as o}from"./LightDomController-3d3edb76.js";import{S as e}from"./SlotController-d733c575.js";class s extends e{constructor(e,s){super(e,s.slotName),this.options=s,this.onChange=()=>{this.syncLightDom()},this.renderHook=document.createComment(this.slotName),this.lightDom=new o(e,{render:()=>this.hasContent?t:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}syncLightDom(){const t=this.content;t&&this.options.syncLightDom(t)}}export{s as L};
-//# sourceMappingURL=LightSlotController-0953b4d4.js.map
+import{A as t}from"./query-assigned-elements-92ce7494.js";import{L as o}from"./LightDomController-5388d84c.js";import{S as e}from"./SlotController-d733c575.js";class s extends e{constructor(e,s){super(e,s.slotName),this.options=s,this.onChange=()=>{this.syncLightDom()},this.renderHook=document.createComment(this.slotName),this.lightDom=new o(e,{render:()=>this.hasContent?t:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}syncLightDom(){const t=this.content;t&&this.options.syncLightDom(t)}}export{s as L};
+//# sourceMappingURL=LightSlotController-c51e9cf5.js.map

package/lib/{LightSlotController-0953b4d4.js.map → LightSlotController-c51e9cf5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LightSlotController-0953b4d4.js","sources":["../src/common/controllers/LightSlotController.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook: Comment\n  private lightDom: LightDomController\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n    super(host, options.slotName)\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n    this.host.appendChild(this.renderHook)\n    this.syncLightDom()\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","onChange","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","node","content"],"mappings":"gKAcM,MAAOA,UAA4BC,EAIvCC,YAAYC,EAAoDC,GAC9DC,MAAMF,EAAMC,EAAQE,UAD0CC,KAAOH,QAAPA,EAoB7CG,KAAQC,SAAG,KAC5BD,KAAKE,cAAc,EAfnBF,KAAKG,WAAaC,SAASC,cAAcL,KAAKD,UAE9CC,KAAKM,SAAW,IAAIC,EAAmBX,EAAM,CAC3CY,OAAQ,IAAOR,KAAKS,WAAaC,EAAUV,KAAKH,QAAQW,SACxDG,cAAe,CAAEC,aAAcZ,KAAKG,aAEvC,CAEDU,gBACEf,MAAMe,gBACNb,KAAKJ,KAAKkB,YAAYd,KAAKG,YAC3BH,KAAKE,cACN,CAMOA,eACN,MAAMa,EAAOf,KAAKgB,QAEdD,GACFf,KAAKH,QAAQK,aAAaa,EAE7B"}
+{"version":3,"file":"LightSlotController-c51e9cf5.js","sources":["../src/common/controllers/LightSlotController.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook: Comment\n  private lightDom: LightDomController\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n    super(host, options.slotName)\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n    this.host.appendChild(this.renderHook)\n    this.syncLightDom()\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","onChange","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","node","content"],"mappings":"gKAcM,MAAOA,UAA4BC,EAIvC,WAAAC,CAAYC,EAAoDC,GAC9DC,MAAMF,EAAMC,EAAQE,UAD0CC,KAAOH,QAAPA,EAoB7CG,KAAQC,SAAG,KAC5BD,KAAKE,cAAc,EAfnBF,KAAKG,WAAaC,SAASC,cAAcL,KAAKD,UAE9CC,KAAKM,SAAW,IAAIC,EAAmBX,EAAM,CAC3CY,OAAQ,IAAOR,KAAKS,WAAaC,EAAUV,KAAKH,QAAQW,SACxDG,cAAe,CAAEC,aAAcZ,KAAKG,aAEvC,CAED,aAAAU,GACEf,MAAMe,gBACNb,KAAKJ,KAAKkB,YAAYd,KAAKG,YAC3BH,KAAKE,cACN,CAMO,YAAAA,GACN,MAAMa,EAAOf,KAAKgB,QAEdD,GACFf,KAAKH,QAAQK,aAAaa,EAE7B"}

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 { subscribe, resolveTranslation, Translation, WellKnownKeys, fallback } from \"./translation.js\"\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\nconst noop = () => {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\n  implements ReactiveController\n{\n  private unsubscribe?: ReturnType<typeof subscribe>\n  private resolvedTranslation: Translation\n\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options = { onLangChange: noop }) {\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    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    this.unsubscribe = subscribe(this.handleLangChange)\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribe?.()\n  }\n\n  term<Key extends keyof Translation[TComponentName]>(\n    key: Key,\n    ...args: FuncParams<Translation[TComponentName], Key>\n  ): Result<Translation[TComponentName], Key> {\n    const { resolvedTranslation, resolvedLang } = this\n    const component = this.host.localName as TComponentName\n\n    /* eslint-disable no-console */\n    if (resolvedTranslation[component] == null) {\n      console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n    } else if (resolvedTranslation[component][key] == null) {\n      console.warn(\n        `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``\n      )\n    }\n    /* eslint-enable no-console */\n\n    const t = resolvedTranslation[component]?.[key] ?? fallback[component][key]\n    return typeof t === \"function\" ? t(...args) : t\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","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribe","subscribe","hostDisconnected","_a","call","term","key","args","component","localName","console","warn","String","t","_b","fallback"],"mappings":"iVAcA,MAAMA,EAAO,aAIAC,EAMXC,YAAoBC,EAAoDC,EAAU,CAAEC,aAAcL,IAA9EM,KAAIH,KAAJA,EAAoDG,KAAOF,QAAPA,EAkDhEE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EAzDDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKGA,WACF,OAAOJ,KAAKH,KAAKO,MAAQI,SAASC,gBAAgBL,IACnD,CAMGM,mBACF,OAAOV,KAAKK,oBAAoBM,KACjC,CAEDC,gBACEZ,KAAKa,YAAcC,EAAUd,KAAKC,kBAClCD,KAAKF,QAAQC,cACd,CAEDgB,yBACkB,QAAhBC,EAAAhB,KAAKa,mBAAW,IAAAG,GAAAA,EAAAC,KAAAjB,KACjB,CAEDkB,KACEC,KACGC,WAEH,MAAMf,oBAAEA,EAAmBK,aAAEA,GAAiBV,KACxCqB,EAAYrB,KAAKH,KAAKyB,UAGU,MAAlCjB,EAAoBgB,GACtBE,QAAQC,KAAK,8CAA8CH,kBAA0BX,OACrC,MAAvCL,EAAoBgB,GAAWF,IACxCI,QAAQC,KACN,mCAAmCC,OAAON,wBAA0BE,iBAAyBX,OAKjG,MAAMgB,EAAyC,QAArCC,EAA8B,UAA9BtB,EAAoBgB,UAAU,IAAAL,OAAA,EAAAA,EAAGG,UAAI,IAAAQ,EAAAA,EAAIC,EAASP,GAAWF,GACvE,MAAoB,mBAANO,EAAmBA,KAAKN,GAAQM,CAC/C"}
+{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { subscribe, resolveTranslation, Translation, WellKnownKeys, fallback } from \"./translation.js\"\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\nconst noop = () => {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\n  implements ReactiveController\n{\n  private unsubscribe?: ReturnType<typeof subscribe>\n  private resolvedTranslation: Translation\n\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options = { onLangChange: noop }) {\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    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    this.unsubscribe = subscribe(this.handleLangChange)\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribe?.()\n  }\n\n  term<Key extends keyof Translation[TComponentName]>(\n    key: Key,\n    ...args: FuncParams<Translation[TComponentName], Key>\n  ): Result<Translation[TComponentName], Key> {\n    const { resolvedTranslation, resolvedLang } = this\n    const component = this.host.localName as TComponentName\n\n    /* eslint-disable no-console */\n    if (resolvedTranslation[component] == null) {\n      console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n    } else if (resolvedTranslation[component][key] == null) {\n      console.warn(\n        `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``\n      )\n    }\n    /* eslint-enable no-console */\n\n    const t = resolvedTranslation[component]?.[key] ?? fallback[component][key]\n    return typeof t === \"function\" ? t(...args) : t\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","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribe","subscribe","hostDisconnected","_a","call","term","key","args","component","localName","console","warn","String","t","_b","fallback"],"mappings":"iVAcA,MAAMA,EAAO,aAIAC,EAMX,WAAAC,CAAoBC,EAAoDC,EAAU,CAAEC,aAAcL,IAA9EM,KAAIH,KAAJA,EAAoDG,KAAOF,QAAPA,EAkDhEE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EAzDDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKD,QAAIA,GACF,OAAOJ,KAAKH,KAAKO,MAAQI,SAASC,gBAAgBL,IACnD,CAMD,gBAAIM,GACF,OAAOV,KAAKK,oBAAoBM,KACjC,CAED,aAAAC,GACEZ,KAAKa,YAAcC,EAAUd,KAAKC,kBAClCD,KAAKF,QAAQC,cACd,CAED,gBAAAgB,SACkB,QAAhBC,EAAAhB,KAAKa,mBAAW,IAAAG,GAAAA,EAAAC,KAAAjB,KACjB,CAED,IAAAkB,CACEC,KACGC,WAEH,MAAMf,oBAAEA,EAAmBK,aAAEA,GAAiBV,KACxCqB,EAAYrB,KAAKH,KAAKyB,UAGU,MAAlCjB,EAAoBgB,GACtBE,QAAQC,KAAK,8CAA8CH,kBAA0BX,OACrC,MAAvCL,EAAoBgB,GAAWF,IACxCI,QAAQC,KACN,mCAAmCC,OAAON,wBAA0BE,iBAAyBX,OAKjG,MAAMgB,EAAyC,QAArCC,EAA8B,UAA9BtB,EAAoBgB,UAAU,IAAAL,OAAA,EAAAA,EAAGG,UAAI,IAAAQ,EAAAA,EAAIC,EAASP,GAAWF,GACvE,MAAoB,mBAANO,EAAmBA,KAAKN,GAAQM,CAC/C"}

package/lib/Message.js

@@ -1,2 +1,2 @@
-import{i as e,_ as o,x as r,e as t,s as i}from"./query-assigned-elements-15485e3d.js";import{e as n}from"./property-03f59dce.js";import{l as s}from"./if-defined-9b177db4.js";import{n as a}from"./ref-5526fb07.js";import{F as l}from"./FocusableMixin-4300e44e.js";import{s as c}from"./Component-420bbc41.js";import{s as d}from"./DropdownItem-579d8ef6.js";import{LocalizeController as m}from"./LocalizeController.js";import"./directive-de55b00a.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const p=e`:host{--_n-message-border-color:var(--n-message-border-color, var(--n-color-border));padding:var(--n-space-s);border-block-end:1px solid var(--_n-message-border-color)}.n-message{flex-direction:column;gap:var(--n-space-xs);align-items:flex-start;padding-inline-start:var(--n-space-xl);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading);margin:0;color:var(--n-color-text);position:relative}.n-message:hover{color:var(--n-color-text-on-accent)}slot[name=footer]{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);line-height:var(--n-line-height-heading)}:host([highlight]) .n-message::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.n-unread{position:absolute;min-inline-size:var(--n-size-icon-xxs);min-block-size:var(--n-size-icon-xxs);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);background:var(--n-color-accent);border-radius:var(--n-border-radius-circle)}.n-message:hover .n-unread{background:var(--n-color-text-on-accent)}`;let f=class extends(l(i)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?e=>r`<a href="${s(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</a>`:e=>r`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</button>`)(r`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,d,p],o([n({reflect:!0})],f.prototype,"href",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([t("nord-message")],f);var h=f;export{h as default};
+import{i as e,_ as o,x as r,e as t,s as i}from"./query-assigned-elements-92ce7494.js";import{n}from"./property-c78323b1.js";import{l as s}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import{F as l}from"./FocusableMixin-d30213b4.js";import{s as c}from"./Component-2253424f.js";import{s as d}from"./DropdownItem-32052903.js";import{LocalizeController as m}from"./LocalizeController.js";import"./directive-e9ce14b4.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const p=e`:host{--_n-message-border-color:var(--n-message-border-color, var(--n-color-border));padding:var(--n-space-s);border-block-end:1px solid var(--_n-message-border-color)}.n-message{flex-direction:column;gap:var(--n-space-xs);align-items:flex-start;padding-inline-start:var(--n-space-xl);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading);margin:0;color:var(--n-color-text);position:relative}.n-message:hover{color:var(--n-color-text-on-accent)}slot[name=footer]{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);line-height:var(--n-line-height-heading)}:host([highlight]) .n-message::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.n-unread{position:absolute;min-inline-size:var(--n-size-icon-xxs);min-block-size:var(--n-size-icon-xxs);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);background:var(--n-color-accent);border-radius:var(--n-border-radius-circle)}.n-message:hover .n-unread{background:var(--n-color-text-on-accent)}`;let f=class extends(l(i)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?e=>r`<a href="${s(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</a>`:e=>r`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</button>`)(r`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,d,p],o([n({reflect:!0})],f.prototype,"href",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([t("nord-message")],f);var h=f;export{h 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 { LitElement, html, TemplateResult } 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 style from \"./Message.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\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 new\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":"k+DA0Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArCC,kCAGLC,KAAAC,SAAW,IAAIC,EAAmCF,KAqC3D,CAdCG,SAQE,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 { LitElement, html, TemplateResult } 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 style from \"./Message.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\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 new\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":"69DA0Be,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{i as o,_ as n,s as e,x as i,e as a}from"./query-assigned-elements-15485e3d.js";import{e as t}from"./property-03f59dce.js";import{i as l}from"./query-2d22378e.js";import{c as r}from"./interface-close-small-f26b0299.js";import s from"./Icon.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-d9666e88.js";import{s as m}from"./Component-420bbc41.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./Footer.js";import"./state-70f38ceb.js";import"./if-defined-9b177db4.js";import"./directive-de55b00a.js";import"./cond-44672025.js";import"./IconManager.js";import"./EventController-d99ebeef.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./LightDismissController-11ae4745.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";const b=o`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:var(--n-space-xs);flex-direction:column;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;s.registerIcon(r);let u=class extends e{constructor(){super(...arguments),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 h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return i`<div class="n-modal-backdrop"><div class="n-modal" 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="${this.handleDismiss}"><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="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(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};u.styles=[m,b],n([l(".n-modal",!0)],u.prototype,"modal",void 0),n([l(".n-modal-backdrop",!0)],u.prototype,"backdrop",void 0),n([t({type:Boolean,reflect:!0})],u.prototype,"open",void 0),n([t({reflect:!0})],u.prototype,"size",void 0),n([t({attribute:!1})],u.prototype,"returnValue",void 0),n([t({type:Boolean,reflect:!0})],u.prototype,"scrollable",void 0),n([c("open","updated")],u.prototype,"handleOpenUpdated",null),u=n([a("nord-modal")],u);var f=u;export{f as default};
+import{i as o,_ as n,s as e,x as i,e as a}from"./query-assigned-elements-92ce7494.js";import{n as t}from"./property-c78323b1.js";import{i as l}from"./query-36bfe0e4.js";import{c as r}from"./interface-close-small-f26b0299.js";import s from"./Icon.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-d9666e88.js";import{s as m}from"./Component-2253424f.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./Footer.js";import"./state-d31c6912.js";import"./if-defined-cccde88f.js";import"./directive-e9ce14b4.js";import"./cond-bb9ee891.js";import"./IconManager.js";import"./EventController-d99ebeef.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./LightDismissController-11ae4745.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";const b=o`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:var(--n-space-xs);flex-direction:column;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;s.registerIcon(r);let u=class extends e{constructor(){super(...arguments),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 h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return i`<div class="n-modal-backdrop"><div class="n-modal" 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="${this.handleDismiss}"><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="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(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};u.styles=[m,b],n([l(".n-modal",!0)],u.prototype,"modal",void 0),n([l(".n-modal-backdrop",!0)],u.prototype,"backdrop",void 0),n([t({type:Boolean,reflect:!0})],u.prototype,"open",void 0),n([t({reflect:!0})],u.prototype,"size",void 0),n([t({attribute:!1})],u.prototype,"returnValue",void 0),n([t({type:Boolean,reflect:!0})],u.prototype,"scrollable",void 0),n([c("open","updated")],u.prototype,"handleOpenUpdated",null),u=n([a("nord-modal")],u);var f=u;export{f 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 { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\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 * 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 footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\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 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 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: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\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  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute(\"role\", \"dialog\")\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   */\n  close(returnValue?: string) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    this.dispatchEvent(new NordEvent(\"close\"))\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 class=\"n-modal\" tabindex=\"0\">\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=${this.handleDismiss}>\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=\"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    } else if (prev === true) {\n      this.modalController.unblock()\n    }\n  }\n\n  private handleDismiss() {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n    if (allowed) {\n      this.close()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-modal\": Modal\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","headerSlot","SlotController","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"spKAgBAA,EAAKC,aAAaC,GAsBH,IAAMC,EAAN,cAAoBC,EAApBC,kCAMLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAWG,YAAG,IAAID,EAAeF,KAAM,WACvCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAEtCA,KAAAK,SAAW,IAAIC,EAAiCN,MAChDA,KAAAO,gBAAkB,IAAIC,EAAgBR,KAAM,CAClDS,OAAQ,IAAMT,KAAKU,KACnBC,UAAW,IAAMX,KAAKY,gBACtBC,OAAQ,IAAMb,KAAKc,MACnBC,SAAU,IAAMf,KAAKe,SACrBC,MAAOC,GAAejB,KAAKgB,MAAMC,KAMSjB,KAAIU,MAAG,EAKtBV,KAAIkB,KAA2B,IAO5BlB,KAAWiB,YAAW,GAQVjB,KAAUmB,YAAG,CAmF1D,CAjFCC,oBACEC,MAAMD,oBAENpB,KAAKsB,aAAa,OAAQ,SAC3B,CAMDC,YACEvB,KAAKU,MAAO,CACb,CAMDM,MAAMC,GACJjB,KAAKU,MAAO,EAEO,MAAfO,IACFjB,KAAKiB,YAAcA,GAGrBjB,KAAKwB,cAAc,IAAIC,EAAU,SAClC,CAMDC,MAAMC,GACJ3B,KAAKc,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAEDE,SACE,OAAOC,CAAI,sHAG+C9B,KAAKC,WAAW8B,yCACpC/B,KAAKC,WAAW+B,oDACbhC,KAAKY,0EACqBZ,KAAKK,SAAS4B,KAAK,mFAMrEjC,KAAKG,YAAY6B,oBAChBhC,KAAKC,WAAW8B,QAAU,gBAAkB,gBAC1C/B,KAAKG,YAAY4B,kFAKR/B,KAAKI,WAAW2B,wBACxB/B,KAAKI,WAAW4B,6CAKtC,CAGSE,kBAAkBC,GACtBnC,KAAKU,KACPV,KAAKO,gBAAgB6B,SACH,IAATD,GACTnC,KAAKO,gBAAgB8B,SAExB,CAEOzB,gBAEUZ,KAAKwB,cAAc,IAAIC,EAAU,SAAU,CAAEa,YAAY,MAGvEtC,KAAKgB,OAER,GA3HMnB,EAAA0C,OAAS,CAACC,EAAgBC,GAEAC,EAAA,CAAhCC,EAAM,YAAY,IAAoC9C,EAAA+C,UAAA,aAAA,GACbF,EAAA,CAAzCC,EAAM,qBAAqB,IAAuC9C,EAAA+C,UAAA,gBAAA,GAkBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBnD,EAAA+C,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAA0CnD,EAAA+C,UAAA,YAAA,GAO/BF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCpD,EAAA+C,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BnD,EAAA+C,UAAA,kBAAA,GAmEpDF,EAAA,CADTQ,EAAQ,OAAQ,YAOhBrD,EAAA+C,UAAA,oBAAA,MAnHkB/C,EAAK6C,EAAA,CADzBS,EAAc,eACMtD,SAAAA"}
+{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\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 * 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 footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\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 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 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: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\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  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute(\"role\", \"dialog\")\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   */\n  close(returnValue?: string) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    this.dispatchEvent(new NordEvent(\"close\"))\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 class=\"n-modal\" tabindex=\"0\">\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=${this.handleDismiss}>\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=\"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    } else if (prev === true) {\n      this.modalController.unblock()\n    }\n  }\n\n  private handleDismiss() {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n    if (allowed) {\n      this.close()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-modal\": Modal\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","headerSlot","SlotController","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"spKAgBAA,EAAKC,aAAaC,GAsBH,IAAMC,EAAN,cAAoBC,EAApB,WAAAC,uBAMLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAWG,YAAG,IAAID,EAAeF,KAAM,WACvCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAEtCA,KAAAK,SAAW,IAAIC,EAAiCN,MAChDA,KAAAO,gBAAkB,IAAIC,EAAgBR,KAAM,CAClDS,OAAQ,IAAMT,KAAKU,KACnBC,UAAW,IAAMX,KAAKY,gBACtBC,OAAQ,IAAMb,KAAKc,MACnBC,SAAU,IAAMf,KAAKe,SACrBC,MAAOC,GAAejB,KAAKgB,MAAMC,KAMSjB,KAAIU,MAAG,EAKtBV,KAAIkB,KAA2B,IAO5BlB,KAAWiB,YAAW,GAQVjB,KAAUmB,YAAG,CAmF1D,CAjFC,iBAAAC,GACEC,MAAMD,oBAENpB,KAAKsB,aAAa,OAAQ,SAC3B,CAMD,SAAAC,GACEvB,KAAKU,MAAO,CACb,CAMD,KAAAM,CAAMC,GACJjB,KAAKU,MAAO,EAEO,MAAfO,IACFjB,KAAKiB,YAAcA,GAGrBjB,KAAKwB,cAAc,IAAIC,EAAU,SAClC,CAMD,KAAAC,CAAMC,GACJ3B,KAAKc,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAED,MAAAE,GACE,OAAOC,CAAI,sHAG+C9B,KAAKC,WAAW8B,yCACpC/B,KAAKC,WAAW+B,oDACbhC,KAAKY,0EACqBZ,KAAKK,SAAS4B,KAAK,mFAMrEjC,KAAKG,YAAY6B,oBAChBhC,KAAKC,WAAW8B,QAAU,gBAAkB,gBAC1C/B,KAAKG,YAAY4B,kFAKR/B,KAAKI,WAAW2B,wBACxB/B,KAAKI,WAAW4B,6CAKtC,CAGS,iBAAAE,CAAkBC,GACtBnC,KAAKU,KACPV,KAAKO,gBAAgB6B,SACH,IAATD,GACTnC,KAAKO,gBAAgB8B,SAExB,CAEO,aAAAzB,GAEUZ,KAAKwB,cAAc,IAAIC,EAAU,SAAU,CAAEa,YAAY,MAGvEtC,KAAKgB,OAER,GA3HMnB,EAAA0C,OAAS,CAACC,EAAgBC,GAEAC,EAAA,CAAhCC,EAAM,YAAY,IAAoC9C,EAAA+C,UAAA,aAAA,GACbF,EAAA,CAAzCC,EAAM,qBAAqB,IAAuC9C,EAAA+C,UAAA,gBAAA,GAkBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBnD,EAAA+C,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAA0CnD,EAAA+C,UAAA,YAAA,GAO/BF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCpD,EAAA+C,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BnD,EAAA+C,UAAA,kBAAA,GAmEpDF,EAAA,CADTQ,EAAQ,OAAQ,YAOhBrD,EAAA+C,UAAA,oBAAA,MAnHkB/C,EAAK6C,EAAA,CADzBS,EAAc,eACMtD,SAAAA"}

package/lib/ModalController.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalController.js","sources":["../src/common/inert.ts","../src/common/controllers/FocusTrapController.ts","../src/modal/ModalController.ts"],"sourcesContent":["/**\n * Set or remove the `inert` attribute on an element.\n *\n * @param element The element to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n */\nconst setInertAttribute = (element: Element, enabled: boolean) => {\n  if (enabled) {\n    const current = element.getAttribute(\"inert\")\n\n    // store previous value\n    if (current !== null) {\n      element.setAttribute(\"data-n-inert\", current)\n    }\n\n    element.setAttribute(\"inert\", \"\")\n  } else {\n    const current = element.getAttribute(\"data-n-inert\")\n\n    // restore previous value if necessary\n    if (current !== null) {\n      element.setAttribute(\"inert\", current)\n      element.removeAttribute(\"data-n-inert\")\n    } else {\n      element.removeAttribute(\"inert\")\n    }\n  }\n}\n\n/**\n * Set or remove the `inert` attribute on all given elements.\n *\n * @param elements The elements to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n */\nexport function setInertAttributes(elements: Element[], enabled: boolean) {\n  elements.forEach(element => setInertAttribute(element, enabled))\n}\n\n/**\n * Get all siblings of an element, including the siblings of its parents.\n * Use this to find all elements that should be inert when a modal is open.\n * And then use `setInertAttributes` to set or remove the `inert` attribute\n * on all of them.\n */\nexport function getElementsAround(element: Element): Element[] {\n  const elements = []\n  let next = element.nextElementSibling\n\n  while (next) {\n    elements.push(next)\n    next = next.nextElementSibling\n  }\n\n  next = element.previousElementSibling\n\n  while (next) {\n    elements.push(next)\n    next = next.previousElementSibling\n  }\n\n  if (element.parentElement && element.parentElement !== document.body) {\n    elements.push(...getElementsAround(element.parentElement))\n  }\n\n  return elements\n}\n","import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { getElementsAround, setInertAttributes } from \"../../common/inert.js\"\n\nexport class FocusTrapController implements ReactiveController {\n  private inertElements: Element[] = []\n\n  constructor(private host: ReactiveControllerHost & HTMLElement) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.release()\n  }\n\n  trap() {\n    const elements = getElementsAround(this.host)\n\n    setInertAttributes(elements, true)\n    this.inertElements = elements\n  }\n\n  release() {\n    setInertAttributes(this.inertElements, false)\n    this.inertElements = []\n  }\n}\n","/* eslint-disable max-classes-per-file */\nimport { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { FocusTrapController } from \"../common/controllers/FocusTrapController.js\"\nimport { LightDismissController, LightDismissOptions } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\n\nclass Stack<T> {\n  private items: T[] = []\n\n  get length() {\n    return this.items.length\n  }\n\n  get top(): T | undefined {\n    return this.items[this.length - 1]\n  }\n\n  push(item: T) {\n    this.items.push(item)\n  }\n\n  pop() {\n    return this.items.pop()\n  }\n\n  remove(item: T) {\n    const index = this.items.indexOf(item)\n\n    if (index !== -1) {\n      this.items.splice(index, 1)\n    }\n  }\n}\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === \"button\"\n\ntype ModalControllerOptions = {\n  isOpen: LightDismissOptions[\"isOpen\"]\n  onDismiss: LightDismissOptions[\"onDismiss\"]\n  close: (returnValue?: string) => void\n  backdrop: () => HTMLElement\n  dialog: () => HTMLElement\n}\n\nexport class ModalController implements ReactiveController {\n  private static openModals = new Stack<ModalController>()\n\n  private scrollBar: ScrollbarController\n  private focusTrap: FocusTrapController\n  private lightDismiss: LightDismissController\n  private events: EventController\n  private options: ModalControllerOptions\n\n  private trigger?: HTMLElement\n  private lastButton?: HTMLButtonElement\n\n  constructor(private host: ReactiveControllerHost & HTMLElement, options: ModalControllerOptions) {\n    host.addController(this)\n    this.options = options\n\n    this.scrollBar = new ScrollbarController(host)\n    this.focusTrap = new FocusTrapController(host)\n    this.events = new EventController(host)\n    this.lightDismiss = new LightDismissController(host, {\n      isOpen: options.isOpen,\n      isDismissible: node => node !== options.dialog(),\n      onDismiss: this.handleLightDismiss,\n    })\n  }\n\n  hostConnected() {\n    // if submit event is not supported, let's do a basic polyfill\n    if (!window.SubmitEvent) {\n      this.events.listen(this.host, \"click\", this.trackLastButton, true)\n      this.events.listen(this.host, \"submit\", this.polyfillSubmitter, true)\n    }\n\n    this.events.listen(this.host, \"transitionend\", this.handleTransitionEnd)\n    this.events.listen(this.host, \"submit\", this.handleSubmit)\n  }\n\n  hostDisconnected(): void {\n    ModalController.openModals.remove(this)\n  }\n\n  block() {\n    // if there is already a modal open, release its focus trap\n    ModalController.openModals.top?.focusTrap.release()\n\n    // add this modal to the stack of open modals\n    ModalController.openModals.push(this)\n\n    // hide scrollbar and prevent scroll on body\n    this.scrollBar.lockScroll()\n\n    // store the element that was focused prior to modal opening\n    this.trigger = document.activeElement as HTMLElement\n\n    // handle initial (auto)focus\n    const focusTarget = this.host.querySelector<HTMLElement>(\"[autofocus]\") || this.host\n    focusTarget.focus()\n\n    // finally, we should enable the focus trap\n    this.focusTrap.trap()\n  }\n\n  unblock() {\n    // it does not make sense to unblock a modal if it is not the top-most modal\n    if (ModalController.openModals.top !== this) {\n      return\n    }\n\n    ModalController.openModals.pop()\n\n    // ensure modal is scrolled to top ready for re-open\n    this.options.backdrop().scrollTop = 0\n\n    // we need to release the focus trap...\n    this.focusTrap.release()\n\n    // ...before we can return focus to the trigger\n    this.trigger?.focus()\n    this.trigger = undefined\n\n    // if there are still modals open, enable the next modal's focus trap\n    ModalController.openModals.top?.focusTrap.trap()\n  }\n\n  /**\n   * capture the last button clicked, so that we can polyfill `submitter` property in submit event\n   */\n  private trackLastButton = (e: Event) => {\n    const target = e.target as HTMLElement\n\n    if (isButton(target)) {\n      this.lastButton = target\n    }\n  }\n\n  private polyfillSubmitter = (e: Event) => {\n    // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n    e.submitter = this.lastButton\n  }\n\n  private handleTransitionEnd = (e: TransitionEvent) => {\n    // scrollbar should only be restored when the modal has transitioned,\n    // that way we avoid awkward double scrollbars.\n    if (!this.options.isOpen() && e.target === this.host) {\n      this.scrollBar.unlockScroll()\n    }\n  }\n\n  private handleLightDismiss = (e: Event) => {\n    if (this.host.contains(e.target as Node)) {\n      this.options.onDismiss(e)\n    }\n  }\n\n  private handleSubmit = (e: SubmitEvent) => {\n    this.lastButton = undefined\n\n    const target = e.target as HTMLFormElement\n    const submitter = e.submitter as HTMLButtonElement\n\n    const isDialogProperty = target.method === \"dialog\"\n    const isDialogAttr = target.getAttribute(\"method\") === \"dialog\"\n\n    // if they mismatch, it means \"dialog\" method is not supported,\n    // so we should polyfill the fact it does not do a full submit\n    if (isDialogAttr && !isDialogProperty) {\n      e.preventDefault()\n    }\n\n    if (isDialogAttr || isDialogProperty) {\n      this.options.close(submitter?.value)\n    }\n  }\n}\n"],"names":["setInertAttributes","elements","enabled","forEach","element","current","getAttribute","setAttribute","removeAttribute","setInertAttribute","getElementsAround","next","nextElementSibling","push","previousElementSibling","parentElement","document","body","FocusTrapController","constructor","host","this","inertElements","addController","hostDisconnected","release","trap","ModalController","options","trackLastButton","e","target","localName","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","scrollBar","unlockScroll","handleLightDismiss","contains","onDismiss","handleSubmit","undefined","isDialogProperty","method","isDialogAttr","preventDefault","close","value","ScrollbarController","focusTrap","events","EventController","lightDismiss","LightDismissController","isDismissible","node","dialog","hostConnected","window","SubmitEvent","listen","openModals","remove","block","_a","top","lockScroll","trigger","activeElement","querySelector","focus","unblock","pop","backdrop","scrollTop","_b","items","length","item","index","indexOf","splice"],"mappings":"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"}
+{"version":3,"file":"ModalController.js","sources":["../src/common/inert.ts","../src/common/controllers/FocusTrapController.ts","../src/modal/ModalController.ts"],"sourcesContent":["/**\n * Set or remove the `inert` attribute on an element.\n *\n * @param element The element to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n */\nconst setInertAttribute = (element: Element, enabled: boolean) => {\n  if (enabled) {\n    const current = element.getAttribute(\"inert\")\n\n    // store previous value\n    if (current !== null) {\n      element.setAttribute(\"data-n-inert\", current)\n    }\n\n    element.setAttribute(\"inert\", \"\")\n  } else {\n    const current = element.getAttribute(\"data-n-inert\")\n\n    // restore previous value if necessary\n    if (current !== null) {\n      element.setAttribute(\"inert\", current)\n      element.removeAttribute(\"data-n-inert\")\n    } else {\n      element.removeAttribute(\"inert\")\n    }\n  }\n}\n\n/**\n * Set or remove the `inert` attribute on all given elements.\n *\n * @param elements The elements to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n */\nexport function setInertAttributes(elements: Element[], enabled: boolean) {\n  elements.forEach(element => setInertAttribute(element, enabled))\n}\n\n/**\n * Get all siblings of an element, including the siblings of its parents.\n * Use this to find all elements that should be inert when a modal is open.\n * And then use `setInertAttributes` to set or remove the `inert` attribute\n * on all of them.\n */\nexport function getElementsAround(element: Element): Element[] {\n  const elements = []\n  let next = element.nextElementSibling\n\n  while (next) {\n    elements.push(next)\n    next = next.nextElementSibling\n  }\n\n  next = element.previousElementSibling\n\n  while (next) {\n    elements.push(next)\n    next = next.previousElementSibling\n  }\n\n  if (element.parentElement && element.parentElement !== document.body) {\n    elements.push(...getElementsAround(element.parentElement))\n  }\n\n  return elements\n}\n","import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { getElementsAround, setInertAttributes } from \"../../common/inert.js\"\n\nexport class FocusTrapController implements ReactiveController {\n  private inertElements: Element[] = []\n\n  constructor(private host: ReactiveControllerHost & HTMLElement) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.release()\n  }\n\n  trap() {\n    const elements = getElementsAround(this.host)\n\n    setInertAttributes(elements, true)\n    this.inertElements = elements\n  }\n\n  release() {\n    setInertAttributes(this.inertElements, false)\n    this.inertElements = []\n  }\n}\n","/* eslint-disable max-classes-per-file */\nimport { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { FocusTrapController } from \"../common/controllers/FocusTrapController.js\"\nimport { LightDismissController, LightDismissOptions } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\n\nclass Stack<T> {\n  private items: T[] = []\n\n  get length() {\n    return this.items.length\n  }\n\n  get top(): T | undefined {\n    return this.items[this.length - 1]\n  }\n\n  push(item: T) {\n    this.items.push(item)\n  }\n\n  pop() {\n    return this.items.pop()\n  }\n\n  remove(item: T) {\n    const index = this.items.indexOf(item)\n\n    if (index !== -1) {\n      this.items.splice(index, 1)\n    }\n  }\n}\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === \"button\"\n\ntype ModalControllerOptions = {\n  isOpen: LightDismissOptions[\"isOpen\"]\n  onDismiss: LightDismissOptions[\"onDismiss\"]\n  close: (returnValue?: string) => void\n  backdrop: () => HTMLElement\n  dialog: () => HTMLElement\n}\n\nexport class ModalController implements ReactiveController {\n  private static openModals = new Stack<ModalController>()\n\n  private scrollBar: ScrollbarController\n  private focusTrap: FocusTrapController\n  private lightDismiss: LightDismissController\n  private events: EventController\n  private options: ModalControllerOptions\n\n  private trigger?: HTMLElement\n  private lastButton?: HTMLButtonElement\n\n  constructor(private host: ReactiveControllerHost & HTMLElement, options: ModalControllerOptions) {\n    host.addController(this)\n    this.options = options\n\n    this.scrollBar = new ScrollbarController(host)\n    this.focusTrap = new FocusTrapController(host)\n    this.events = new EventController(host)\n    this.lightDismiss = new LightDismissController(host, {\n      isOpen: options.isOpen,\n      isDismissible: node => node !== options.dialog(),\n      onDismiss: this.handleLightDismiss,\n    })\n  }\n\n  hostConnected() {\n    // if submit event is not supported, let's do a basic polyfill\n    if (!window.SubmitEvent) {\n      this.events.listen(this.host, \"click\", this.trackLastButton, true)\n      this.events.listen(this.host, \"submit\", this.polyfillSubmitter, true)\n    }\n\n    this.events.listen(this.host, \"transitionend\", this.handleTransitionEnd)\n    this.events.listen(this.host, \"submit\", this.handleSubmit)\n  }\n\n  hostDisconnected(): void {\n    ModalController.openModals.remove(this)\n  }\n\n  block() {\n    // if there is already a modal open, release its focus trap\n    ModalController.openModals.top?.focusTrap.release()\n\n    // add this modal to the stack of open modals\n    ModalController.openModals.push(this)\n\n    // hide scrollbar and prevent scroll on body\n    this.scrollBar.lockScroll()\n\n    // store the element that was focused prior to modal opening\n    this.trigger = document.activeElement as HTMLElement\n\n    // handle initial (auto)focus\n    const focusTarget = this.host.querySelector<HTMLElement>(\"[autofocus]\") || this.host\n    focusTarget.focus()\n\n    // finally, we should enable the focus trap\n    this.focusTrap.trap()\n  }\n\n  unblock() {\n    // it does not make sense to unblock a modal if it is not the top-most modal\n    if (ModalController.openModals.top !== this) {\n      return\n    }\n\n    ModalController.openModals.pop()\n\n    // ensure modal is scrolled to top ready for re-open\n    this.options.backdrop().scrollTop = 0\n\n    // we need to release the focus trap...\n    this.focusTrap.release()\n\n    // ...before we can return focus to the trigger\n    this.trigger?.focus()\n    this.trigger = undefined\n\n    // if there are still modals open, enable the next modal's focus trap\n    ModalController.openModals.top?.focusTrap.trap()\n  }\n\n  /**\n   * capture the last button clicked, so that we can polyfill `submitter` property in submit event\n   */\n  private trackLastButton = (e: Event) => {\n    const target = e.target as HTMLElement\n\n    if (isButton(target)) {\n      this.lastButton = target\n    }\n  }\n\n  private polyfillSubmitter = (e: Event) => {\n    // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n    e.submitter = this.lastButton\n  }\n\n  private handleTransitionEnd = (e: TransitionEvent) => {\n    // scrollbar should only be restored when the modal has transitioned,\n    // that way we avoid awkward double scrollbars.\n    if (!this.options.isOpen() && e.target === this.host) {\n      this.scrollBar.unlockScroll()\n    }\n  }\n\n  private handleLightDismiss = (e: Event) => {\n    if (this.host.contains(e.target as Node)) {\n      this.options.onDismiss(e)\n    }\n  }\n\n  private handleSubmit = (e: SubmitEvent) => {\n    this.lastButton = undefined\n\n    const target = e.target as HTMLFormElement\n    const submitter = e.submitter as HTMLButtonElement\n\n    const isDialogProperty = target.method === \"dialog\"\n    const isDialogAttr = target.getAttribute(\"method\") === \"dialog\"\n\n    // if they mismatch, it means \"dialog\" method is not supported,\n    // so we should polyfill the fact it does not do a full submit\n    if (isDialogAttr && !isDialogProperty) {\n      e.preventDefault()\n    }\n\n    if (isDialogAttr || isDialogProperty) {\n      this.options.close(submitter?.value)\n    }\n  }\n}\n"],"names":["setInertAttributes","elements","enabled","forEach","element","current","getAttribute","setAttribute","removeAttribute","setInertAttribute","getElementsAround","next","nextElementSibling","push","previousElementSibling","parentElement","document","body","FocusTrapController","constructor","host","this","inertElements","addController","hostDisconnected","release","trap","ModalController","options","trackLastButton","e","target","localName","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","scrollBar","unlockScroll","handleLightDismiss","contains","onDismiss","handleSubmit","undefined","isDialogProperty","method","isDialogAttr","preventDefault","close","value","ScrollbarController","focusTrap","events","EventController","lightDismiss","LightDismissController","isDismissible","node","dialog","hostConnected","window","SubmitEvent","listen","openModals","remove","block","_a","top","lockScroll","trigger","activeElement","querySelector","focus","unblock","pop","backdrop","scrollTop","_b","items","length","item","index","indexOf","splice"],"mappings":"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"}

package/lib/NavGroup.js

@@ -1,2 +1,2 @@
-import{i as e,_ as i,s as n,x as t,A as r,e as o}from"./query-assigned-elements-15485e3d.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import{s}from"./Component-420bbc41.js";import"./state-70f38ceb.js";import"./if-defined-9b177db4.js";import"./directive-de55b00a.js";import"./cond-44672025.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";const d=e`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-start:var(--n-space-m);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let l=class extends n{render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:r}<div role="list" aria-labelledby="${this.heading?"heading":r}"><slot></slot></div>`}};l.styles=[s,d],i([a({reflect:!0})],l.prototype,"heading",void 0),l=i([o("nord-nav-group")],l);var p=l;export{p as default};
+import{i as e,_ as i,s as n,x as t,A as r,e as o}from"./query-assigned-elements-92ce7494.js";import{n as a}from"./property-c78323b1.js";import"./Icon.js";import{s}from"./Component-2253424f.js";import"./state-d31c6912.js";import"./if-defined-cccde88f.js";import"./directive-e9ce14b4.js";import"./cond-bb9ee891.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";const l=e`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-start:var(--n-space-m);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let d=class extends n{render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:r}<div role="list" aria-labelledby="${this.heading?"heading":r}"><slot></slot></div>`}};d.styles=[s,l],i([a({reflect:!0})],d.prototype,"heading",void 0),d=i([o("nord-nav-group")],d);var p=d;export{p 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 { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport \"../icon/Icon.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property({ reflect: true }) heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-group\": NavGroup\n  }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"8gCAmBe,IAAMA,EAAN,cAAuBC,EAQpCC,SACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,wBAIjE,GAdMN,EAAAO,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAwBZ,EAAAa,UAAA,eAAA,GAN1Bb,EAAQU,EAAA,CAD5BI,EAAc,mBACMd,SAAAA"}
+{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport \"../icon/Icon.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property({ reflect: true }) heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-group\": NavGroup\n  }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"8gCAmBe,IAAMA,EAAN,cAAuBC,EAQpC,MAAAC,GACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,wBAIjE,GAdMN,EAAAO,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAwBZ,EAAAa,UAAA,eAAA,GAN1Bb,EAAQU,EAAA,CAD5BI,EAAc,mBACMd,SAAAA"}

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{i as e,_ as n,x as t,A as o,e as a,s as i}from"./query-assigned-elements-15485e3d.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./class-map-cb77ead2.js";import{n as c}from"./ref-5526fb07.js";import{D as l}from"./DirectionController-f35f5476.js";import{S as v}from"./SlotController-d733c575.js";import{c as d}from"./cond-44672025.js";import{N as p}from"./events-d9666e88.js";import{F as h}from"./FocusableMixin-4300e44e.js";import{s as m}from"./Component-420bbc41.js";import{o as f}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const b=e`:host{--_n-nav-item-box-shadow:none}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:32px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative;z-index:var(--n-index-default)}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}:host([active]) .n-nav-item[aria-expanded]{--_n-nav-item-box-shadow:none;color:var(--n-color-text-weak);font-weight:var(--n-font-weight);background:0 0}:host([active]) .n-nav-item[aria-expanded]:focus-visible{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) .n-nav-item[aria-expanded]::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.12;background:var(--n-color-accent);filter:brightness(150%)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-notification);color:#fff;font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let u=class extends(h(i)){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}get hasSubNav(){return this.subnavSlot.hasContent}render(){const e=t`${this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:o}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:o}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),t`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return t`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${d(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return t`<button class="n-nav-item" ${c(this.focusableRef)}>${e}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new p("activate"))}};u.styles=[m,b],n([r({type:Boolean,reflect:!0})],u.prototype,"active",void 0),n([r({reflect:!0})],u.prototype,"icon",void 0),n([r({reflect:!0})],u.prototype,"href",void 0),n([r({reflect:!0})],u.prototype,"badge",void 0),n([r({reflect:!0,type:Boolean})],u.prototype,"open",void 0),n([f("active","updated")],u.prototype,"handleActiveChange",null),u=n([a("nord-nav-item")],u);var g=u;export{g as default};
+import{i as e,_ as n,x as t,A as o,e as a,s as i}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";import{o as s}from"./class-map-512f0bc1.js";import{n as c}from"./ref-99418ab4.js";import{D as l}from"./DirectionController-f35f5476.js";import{S as v}from"./SlotController-d733c575.js";import{c as d}from"./cond-bb9ee891.js";import{N as p}from"./events-d9666e88.js";import{F as h}from"./FocusableMixin-d30213b4.js";import{s as m}from"./Component-2253424f.js";import{o as f}from"./observe-a9c6dfb6.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";const b=e`:host{--_n-nav-item-box-shadow:none}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:32px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative;z-index:var(--n-index-default)}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}:host([active]) .n-nav-item[aria-expanded]{--_n-nav-item-box-shadow:none;color:var(--n-color-text-weak);font-weight:var(--n-font-weight);background:0 0}:host([active]) .n-nav-item[aria-expanded]:focus-visible{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) .n-nav-item[aria-expanded]::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.12;background:var(--n-color-accent);filter:brightness(150%)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-notification);color:#fff;font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let u=class extends(h(i)){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}get hasSubNav(){return this.subnavSlot.hasContent}render(){const e=t`${this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:o}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:o}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),t`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return t`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${d(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return t`<button class="n-nav-item" ${c(this.focusableRef)}>${e}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new p("activate"))}};u.styles=[m,b],n([r({type:Boolean,reflect:!0})],u.prototype,"active",void 0),n([r({reflect:!0})],u.prototype,"icon",void 0),n([r({reflect:!0})],u.prototype,"href",void 0),n([r({reflect:!0})],u.prototype,"badge",void 0),n([r({reflect:!0,type:Boolean})],u.prototype,"open",void 0),n([f("active","updated")],u.prototype,"handleActiveChange",null),u=n([a("nord-nav-item")],u);var g=u;export{g as default};
 //# sourceMappingURL=NavItem.js.map

package/lib/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property({ reflect: true }) badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n\n  @observe(\"active\", \"updated\")\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent(\"activate\"))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","hasSubNav","hasContent","render","innards","html","icon","nothing","badge","element","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"wiHA2Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArCC,kCAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBTL,KAAIM,MAAG,CA6EpD,CAxEKC,gBACF,OAAOP,KAAKC,WAAWO,UACxB,CAEDC,SACE,MAAMC,EAAUC,CAAI,GAChBX,KAAKY,KAAOD,CAAI,uCAAsCX,KAAKY,8BAA+BC,6EAGxFb,KAAKc,MAAQH,CAAI,6BAA6BX,KAAKc,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADEf,KAAKC,WAAWO,WACRR,KAAKgB,aAAaN,GACnBV,KAAKiB,KACJjB,KAAKkB,WAAWR,GAEhBV,KAAKmB,aAAaT,GAGvBC,CAAI,wBAELI,gBACWf,KAAKC,WAAWmB,uBAAqBpB,KAAKM,qBAG5D,CAEOY,WAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAIrB,KAAKsB,+BAA8BC,EAAKvB,KAAKK,OAAQ,kBAAgBL,KAAKiB,MAAQ,OAC1GP,OAGP,CAEOM,aAAaN,GACnB,OAAOC,CAAI,sCAGEX,KAAKwB,8BACExB,KAAKM,KAAO,OAAS,YACnCe,EAAIrB,KAAKsB,iBAETZ,iCAIQe,EAAS,CAAE,iBAAiB,EAAM,QAASzB,KAAKG,UAAUuB,gEAKzE,CAEOP,aAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAIrB,KAAKsB,iBAAiBZ,YACpE,CAEOc,aACNxB,KAAKM,MAAQN,KAAKM,KAClBN,KAAK2B,cAAc,IAAIC,EAAU,UAClC,CAGSC,qBACJ7B,KAAKK,SAAWL,KAAKO,WACvBP,KAAK2B,cAAc,IAAIC,EAAU,YAEpC,GA3GMhC,EAAAkC,OAAS,CAACC,EAAgBC,GASWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK7BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBzC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBzC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAsBzC,EAAA0C,UAAA,aAAA,GAMCL,EAAA,CAA3CC,EAAS,CAAEG,SAAS,EAAMF,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAwE9CL,EAAA,CADTM,EAAQ,SAAU,YAKlB3C,EAAA0C,UAAA,qBAAA,MA5GkB1C,EAAOqC,EAAA,CAD3BO,EAAc,kBACM5C,SAAAA"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property({ reflect: true }) badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n\n  @observe(\"active\", \"updated\")\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent(\"activate\"))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","hasSubNav","hasContent","render","innards","html","icon","nothing","badge","element","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"wiHA2Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBTL,KAAIM,MAAG,CA6EpD,CAxEC,aAAIC,GACF,OAAOP,KAAKC,WAAWO,UACxB,CAED,MAAAC,GACE,MAAMC,EAAUC,CAAI,GAChBX,KAAKY,KAAOD,CAAI,uCAAsCX,KAAKY,8BAA+BC,6EAGxFb,KAAKc,MAAQH,CAAI,6BAA6BX,KAAKc,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADEf,KAAKC,WAAWO,WACRR,KAAKgB,aAAaN,GACnBV,KAAKiB,KACJjB,KAAKkB,WAAWR,GAEhBV,KAAKmB,aAAaT,GAGvBC,CAAI,wBAELI,gBACWf,KAAKC,WAAWmB,uBAAqBpB,KAAKM,qBAG5D,CAEO,UAAAY,CAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAIrB,KAAKsB,+BAA8BC,EAAKvB,KAAKK,OAAQ,kBAAgBL,KAAKiB,MAAQ,OAC1GP,OAGP,CAEO,YAAAM,CAAaN,GACnB,OAAOC,CAAI,sCAGEX,KAAKwB,8BACExB,KAAKM,KAAO,OAAS,YACnCe,EAAIrB,KAAKsB,iBAETZ,iCAIQe,EAAS,CAAE,iBAAiB,EAAM,QAASzB,KAAKG,UAAUuB,gEAKzE,CAEO,YAAAP,CAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAIrB,KAAKsB,iBAAiBZ,YACpE,CAEO,UAAAc,GACNxB,KAAKM,MAAQN,KAAKM,KAClBN,KAAK2B,cAAc,IAAIC,EAAU,UAClC,CAGS,kBAAAC,GACJ7B,KAAKK,SAAWL,KAAKO,WACvBP,KAAK2B,cAAc,IAAIC,EAAU,YAEpC,GA3GMhC,EAAAkC,OAAS,CAACC,EAAgBC,GASWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK7BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBzC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBzC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAsBzC,EAAA0C,UAAA,aAAA,GAMCL,EAAA,CAA3CC,EAAS,CAAEG,SAAS,EAAMF,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAwE9CL,EAAA,CADTM,EAAQ,SAAU,YAKlB3C,EAAA0C,UAAA,qBAAA,MA5GkB1C,EAAOqC,EAAA,CAD3BO,EAAc,kBACM5C,SAAAA"}

package/lib/{NavToggle-5620165f.js → NavToggle-6b13700e.js}

@@ -1,2 +1,2 @@
-import{i as o,_ as n,x as t,e as r,s as i}from"./query-assigned-elements-15485e3d.js";import{n as e}from"./ref-5526fb07.js";import{o as s}from"./class-map-cb77ead2.js";import{LocalizeController as a}from"./LocalizeController.js";import{D as l}from"./DirectionController-f35f5476.js";import{F as c}from"./FocusableMixin-4300e44e.js";import"./Button.js";import g from"./Icon.js";import"./VisuallyHidden.js";import{s as m}from"./Component-420bbc41.js";const d="navigation-toggle-lock";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z" fill="currentColor"/></svg>',title:d,tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron"});const h="navigation-toggle";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z" fill="currentColor"/></svg>',title:h,tags:"nordicon navigation hamburger menu toggle navigation three lines"});const p=o`:host{color:var(--n-color-icon);display:inline-flex}nord-button{--n-button-color:currentColor}nord-icon{display:block;transform:translateX(-1px);color:currentColor}nord-icon[name=navigation-toggle-lock]{display:none}.is-rtl nord-icon[name=navigation-toggle-lock]{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle-lock]{display:block}:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle]{display:none}}`;g.registerIcon(u),g.registerIcon(v);let f=class extends(c(i)){constructor(){super(...arguments),this.direction=new l(this),this.localization=new a(this)}render(){return t`<nord-button variant="plain" ${e(this.focusableRef)} class="${s({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="m" name="${h}"></nord-icon><nord-icon size="m" name="${d}"></nord-icon></nord-button>`}};f.styles=[m,p],f=n([r("nord-nav-toggle")],f);var b=f;export{b as N,v as l};
-//# sourceMappingURL=NavToggle-5620165f.js.map
+import{i as o,_ as n,x as t,e as r,s as i}from"./query-assigned-elements-92ce7494.js";import{n as e}from"./ref-99418ab4.js";import{o as s}from"./class-map-512f0bc1.js";import{LocalizeController as a}from"./LocalizeController.js";import{D as l}from"./DirectionController-f35f5476.js";import{F as c}from"./FocusableMixin-d30213b4.js";import"./Button.js";import g from"./Icon.js";import"./VisuallyHidden.js";import{s as m}from"./Component-2253424f.js";const d="navigation-toggle-lock";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z" fill="currentColor"/></svg>',title:d,tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron"});const h="navigation-toggle";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z" fill="currentColor"/></svg>',title:h,tags:"nordicon navigation hamburger menu toggle navigation three lines"});const p=o`:host{color:var(--n-color-icon);display:inline-flex}nord-button{--n-button-color:currentColor}nord-icon{display:block;transform:translateX(-1px);color:currentColor}nord-icon[name=navigation-toggle-lock]{display:none}.is-rtl nord-icon[name=navigation-toggle-lock]{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle-lock]{display:block}:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle]{display:none}}`;g.registerIcon(u),g.registerIcon(v);let f=class extends(c(i)){constructor(){super(...arguments),this.direction=new l(this),this.localization=new a(this)}render(){return t`<nord-button variant="plain" ${e(this.focusableRef)} class="${s({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="m" name="${h}"></nord-icon><nord-icon size="m" name="${d}"></nord-icon></nord-button>`}};f.styles=[m,p],f=n([r("nord-nav-toggle")],f);var b=f;export{b as N,v as l};
+//# sourceMappingURL=NavToggle-6b13700e.js.map