@nordhealth/components 1.6.1 → 1.7.0

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/common/controllers/MediaQueryController.ts","../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype MediaQueryChange = () => void\n\nexport class MediaQueryController implements ReactiveController {\n  private mq: MediaQueryList\n\n  constructor(host: ReactiveControllerHost, mediaQuery: MediaQueryList, onChange?: MediaQueryChange)\n  constructor(host: ReactiveControllerHost, mediaQuery: string, onChange?: MediaQueryChange)\n\n  constructor(\n    private host: ReactiveControllerHost,\n    mediaQuery: string | MediaQueryList,\n    private onChange?: MediaQueryChange\n  ) {\n    host.addController(this)\n    this.mq = typeof mediaQuery === \"string\" ? matchMedia(mediaQuery) : mediaQuery\n  }\n\n  get matches() {\n    return this.mq.matches\n  }\n\n  hostConnected() {\n    this.mq.addListener(this.handleChange)\n  }\n\n  hostDisconnected() {\n    this.mq.removeListener(this.handleChange)\n  }\n\n  handleChange = () => {\n    this.onChange?.()\n    this.host.requestUpdate()\n  }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { MediaQueryController } from \"../common/controllers/MediaQueryController.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\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\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 store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\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\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 header - Used to place content inside the header section.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n  private navToggleEl?: Element\n\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = store.value\n  @state() private isDragging = false\n  @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\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 = this.navState === \"opened\"\n\n  /**\n   * ID reference of element used to toggle the navigation.\n   */\n  @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.mq.matches,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl && node !== this.navToggleEl,\n  })\n\n  private mq = new MediaQueryController(this, mediaQuery, () => this.handleMediaQueryChange())\n  private direction = new DirectionController(this)\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.cleanup()\n  }\n\n  render() {\n    const { navWidth, navState, mq, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && mq.matches ? 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        style=${`--n-nav-width: ${adjustedNavWidth}px`}\n        data-nav=${navState}\n        data-screen=${mq.matches ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\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\"></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          ></div>\n        </div>\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleClick}>\n          <slot name=\"header\"></slot>\n          <main>\n            <slot></slot>\n          </main>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"navToggle\")\n  protected getToggleElement() {\n    // clean up\n    this.cleanup()\n\n    // handle case where id removed\n    if (!this.navToggle) {\n      return\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot\n    const toggleEl = root.querySelector(`#${this.navToggle}`)\n\n    if (toggleEl) {\n      this.navToggleEl = toggleEl\n      this.navToggleEl.addEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.addEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.addEventListener(\"mouseleave\", this.handleMouseLeave)\n    }\n  }\n\n  private cleanup() {\n    if (this.navToggleEl) {\n      this.navToggleEl.removeEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.removeEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.removeEventListener(\"mouseleave\", this.handleMouseLeave)\n      this.navToggleEl = undefined\n    }\n  }\n\n  @observe(\"navWidth\", \"updated\")\n  protected handleNavWidthChange() {\n    store.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() {\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\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 handleClick() {\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.navTransition(this.mq.matches ? \"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 = (e: FocusEvent) => {\n    if (e.target !== this.navToggleEl) {\n      this.navTransition(\"focusout\")\n    }\n  }\n\n  private handleMouseEnter = () => {\n    if (this.mq.matches) {\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    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  }\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","/**\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      const value = localStorage.getItem(key)\n\n      try {\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      localStorage.setItem(key, serialize(value))\n    },\n  }\n}\n"],"names":["MediaQueryController","constructor","host","mediaQuery","onChange","this","handleChange","_a","call","requestUpdate","addController","mq","matchMedia","matches","hostConnected","addListener","hostDisconnected","removeListener","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navWidth","isDragging","navState","navOpen","lightDismiss","LightDismissController","isOpen","onDismiss","navTransition","isDismissible","node","navEl","navToggleEl","handleMediaQueryChange","direction","DirectionController","handleToggleClick","handleNavFocus","handleMainFocus","e","target","handleMouseEnter","handleMouseLeave","handleTransitionEnd","disconnectedCallback","super","cleanup","render","adjustedNavWidth","html","classMap","isRTL","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","getToggleElement","navToggle","toggleEl","getRootNode","querySelector","addEventListener","removeEventListener","undefined","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","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/MediaQueryController.ts","../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype MediaQueryChange = () => void\n\nexport class MediaQueryController implements ReactiveController {\n  private mq: MediaQueryList\n\n  constructor(host: ReactiveControllerHost, mediaQuery: MediaQueryList, onChange?: MediaQueryChange)\n  constructor(host: ReactiveControllerHost, mediaQuery: string, onChange?: MediaQueryChange)\n\n  constructor(\n    private host: ReactiveControllerHost,\n    mediaQuery: string | MediaQueryList,\n    private onChange?: MediaQueryChange\n  ) {\n    host.addController(this)\n    this.mq = typeof mediaQuery === \"string\" ? matchMedia(mediaQuery) : mediaQuery\n  }\n\n  get matches() {\n    return this.mq.matches\n  }\n\n  hostConnected() {\n    this.mq.addListener(this.handleChange)\n  }\n\n  hostDisconnected() {\n    this.mq.removeListener(this.handleChange)\n  }\n\n  handleChange = () => {\n    this.onChange?.()\n    this.host.requestUpdate()\n  }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { MediaQueryController } from \"../common/controllers/MediaQueryController.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\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\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 store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\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\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 header - Used to place content inside the header section.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n  private navToggleEl?: Element\n\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = store.value\n  @state() private isDragging = false\n  @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\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 = this.navState === \"opened\"\n\n  /**\n   * ID reference of element used to toggle the navigation.\n   */\n  @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.mq.matches,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl && node !== this.navToggleEl,\n  })\n\n  private mq = new MediaQueryController(this, mediaQuery, () => this.handleMediaQueryChange())\n  private direction = new DirectionController(this)\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.cleanup()\n  }\n\n  render() {\n    const { navWidth, navState, mq, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && mq.matches ? 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        style=${`--n-nav-width: ${adjustedNavWidth}px`}\n        data-nav=${navState}\n        data-screen=${mq.matches ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\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\"></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          ></div>\n        </div>\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleClick}>\n          <slot name=\"header\"></slot>\n          <main>\n            <slot></slot>\n          </main>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"navToggle\")\n  protected getToggleElement() {\n    // clean up\n    this.cleanup()\n\n    // handle case where id removed\n    if (!this.navToggle) {\n      return\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot\n    const toggleEl = root.querySelector(`#${this.navToggle}`)\n\n    if (toggleEl) {\n      this.navToggleEl = toggleEl\n      this.navToggleEl.addEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.addEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.addEventListener(\"mouseleave\", this.handleMouseLeave)\n    }\n  }\n\n  private cleanup() {\n    if (this.navToggleEl) {\n      this.navToggleEl.removeEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.removeEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.removeEventListener(\"mouseleave\", this.handleMouseLeave)\n      this.navToggleEl = undefined\n    }\n  }\n\n  @observe(\"navWidth\", \"updated\")\n  protected handleNavWidthChange() {\n    store.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() {\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\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 handleClick() {\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.navTransition(this.mq.matches ? \"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 = (e: FocusEvent) => {\n    if (e.target !== this.navToggleEl) {\n      this.navTransition(\"focusout\")\n    }\n  }\n\n  private handleMouseEnter = () => {\n    if (this.mq.matches) {\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    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  }\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","/**\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      const value = localStorage.getItem(key)\n\n      try {\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      localStorage.setItem(key, serialize(value))\n    },\n  }\n}\n"],"names":["MediaQueryController","constructor","host","mediaQuery","onChange","this","handleChange","_a","call","requestUpdate","addController","mq","matchMedia","matches","hostConnected","addListener","hostDisconnected","removeListener","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navWidth","isDragging","navState","navOpen","lightDismiss","LightDismissController","isOpen","onDismiss","navTransition","isDismissible","node","navEl","navToggleEl","handleMediaQueryChange","direction","DirectionController","handleToggleClick","handleNavFocus","handleMainFocus","e","target","handleMouseEnter","handleMouseLeave","handleTransitionEnd","disconnectedCallback","super","cleanup","render","adjustedNavWidth","html","classMap","isRTL","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","getToggleElement","navToggle","toggleEl","getRootNode","querySelector","addEventListener","removeEventListener","undefined","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/{LightDomController-e0762f0d.js → LightDomController-6d26dea2.js}

@@ -1,2 +1,2 @@
-import{x as t,w as o}from"./lit-element-e382250e.js";class s{constructor(t,o){this.host=t,this.options=o,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(o,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{s as L};
-//# sourceMappingURL=LightDomController-e0762f0d.js.map
+import{x as t,w as o}from"./lit-element-67e6cd99.js";class s{constructor(t,o){this.host=t,this.options=o,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(o,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{s as L};
+//# sourceMappingURL=LightDomController-6d26dea2.js.map

package/lib/{LightDomController-e0762f0d.js.map → LightDomController-6d26dea2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LightDomController-e0762f0d.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import { nothing, 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  hostDisconnected() {\n    render(nothing, this.container, this.options.renderOptions)\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","hostDisconnected","nothing","renderOptions"],"mappings":"2DAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,MAGTE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,KAGxCK,cACEH,KAAKI,SAGPC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,eAGvCH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ"}
+{"version":3,"file":"LightDomController-6d26dea2.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import { nothing, 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  hostDisconnected() {\n    render(nothing, this.container, this.options.renderOptions)\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","hostDisconnected","nothing","renderOptions"],"mappings":"2DAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,MAGTE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,KAGxCK,cACEH,KAAKI,SAGPC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,eAGvCH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ"}

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 } 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]> : never\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 componentName = this.host.localName as TComponentName\n    const translation = this.resolvedTranslation[componentName]\n\n    const t = translation[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","componentName","localName","t"],"mappings":"mMAcA,MAAMA,EAAO,aAIAC,EAMXC,YAAoBC,EAAoDC,EAAU,CAAEC,aAAcL,IAA9EM,KAAIH,KAAJA,EAAoDG,KAAOF,QAAPA,EAwChEE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,kBA9CZT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,MAMjDA,WACF,OAAOJ,KAAKH,KAAKO,MAAQI,SAASC,gBAAgBL,KAOhDM,mBACF,OAAOV,KAAKK,oBAAoBM,MAGlCC,gBACEZ,KAAKa,YAAcC,EAAUd,KAAKC,kBAClCD,KAAKF,QAAQC,eAGfgB,yBACE,QAAAC,EAAAhB,KAAKa,mBAAL,IAAAG,GAAAA,EAAAC,KAAAjB,MAGFkB,KACEC,KACGC,GAEH,MAAMC,EAAgBrB,KAAKH,KAAKyB,UAG1BC,EAFcvB,KAAKK,oBAAoBgB,GAEvBF,GACtB,MAAoB,mBAANI,EAAmBA,KAAKH,GAAQG"}
+{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { subscribe, resolveTranslation, Translation, WellKnownKeys } 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]> : never\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 componentName = this.host.localName as TComponentName\n    const translation = this.resolvedTranslation[componentName]\n\n    const t = translation[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","componentName","localName","t"],"mappings":"mMAcA,MAAMA,EAAO,aAIAC,EAMXC,YAAoBC,EAAoDC,EAAU,CAAEC,aAAcL,IAA9EM,KAAIH,KAAJA,EAAoDG,KAAOF,QAAPA,EAwChEE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,kBA9CZT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,MAMjDA,WACF,OAAOJ,KAAKH,KAAKO,MAAQI,SAASC,gBAAgBL,KAOhDM,mBACF,OAAOV,KAAKK,oBAAoBM,MAGlCC,gBACEZ,KAAKa,YAAcC,EAAUd,KAAKC,kBAClCD,KAAKF,QAAQC,eAGfgB,yBACkB,QAAhBC,EAAAhB,KAAKa,mBAAW,IAAAG,GAAAA,EAAAC,KAAAjB,MAGlBkB,KACEC,KACGC,GAEH,MAAMC,EAAgBrB,KAAKH,KAAKyB,UAG1BC,EAFcvB,KAAKK,oBAAoBgB,GAEvBF,GACtB,MAAoB,mBAANI,EAAmBA,KAAKH,GAAQG"}

package/lib/Modal.js

@@ -1,2 +1,2 @@
-import{_ as t,n as o}from"./query-assigned-elements-ef860822.js";import{r as e,$ as s,s as i}from"./lit-element-e382250e.js";import{e as n}from"./property-03f59dce.js";import{i as r}from"./query-2d22378e.js";import"./Icon.js";import{E as a}from"./EventController-d99ebeef.js";import{L as l}from"./LightDismissController-a2645ae6.js";import{S as d}from"./SlotController-ea6eff46.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as h}from"./events-731d0007.js";import{s as p}from"./Component-5a499e30.js";import{LocalizeController as m}from"./LocalizeController.js";import"./state-70f38ceb.js";import"./if-defined-4d1db15c.js";import"./unsafe-html-76575c49.js";import"./directive-de55b00a.js";import"./cond-ed8742b5.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";class u{constructor(t,o=(()=>t)){this.boundary=o,this.lastScrollY=0,this.handleFocusOut=t=>{this.lastFocused=t.target,t.relatedTarget===this.boundary()&&this.recaptureFocus()},this.handleFocusIn=t=>{!t.composedPath().includes(this.boundary())&&this.recaptureFocus()},this.restoreScroll=()=>{window.scrollTo(window.scrollX,this.lastScrollY)},t.addController(this)}hostDisconnected(){this.release()}trap(){this.lastScrollY=window.scrollY,this.boundary().addEventListener("focusout",this.handleFocusOut),window.addEventListener("scroll",this.restoreScroll),window.addEventListener("focusin",this.handleFocusIn)}release(){this.lastScrollY=0,this.lastFocused=void 0,this.boundary().removeEventListener("focusout",this.handleFocusOut),window.removeEventListener("scroll",this.restoreScroll),window.removeEventListener("focusin",this.handleFocusIn)}recaptureFocus(){var t;null===(t=this.lastFocused)||void 0===t||t.focus({preventScroll:!0})}}function v({style:t},o,e){const s=t[o];return t[o]=e,()=>{t[o]=s}}class b{constructor(t,o=document.body){this.scroller=o,this.resets=new Set,t.addController(this)}hostDisconnected(){this.restore()}get width(){const t=document.documentElement.clientWidth;return Math.abs(window.innerWidth-t)}hide(){this.restore();const{width:t}=this,o=getComputedStyle(this.scroller),e=parseInt(o.paddingRight,10)||0;this.resets.add(v(this.scroller,"overflow","hidden")),this.resets.add(v(this.scroller,"paddingRight",`${t+e}px`))}restore(){this.resets.forEach((t=>t())),this.resets.clear()}}const f=e`:host{--n-modal-padding-inline:var(--n-space-m);--n-modal-padding-block:var(--n-space-m);--n-modal-focus-ring:0 0 0 2px var(--n-color-accent);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly)}: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{position:relative;z-index:var(--n-index-overlay);display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--n-modal-max-width,620px);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-nav-surface);border-block-end:1px solid var(--n-color-border)}.n-modal-footer{border-block-start: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{border-color:transparent}.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-space-l)}:host([size="s"]){--n-modal-padding-inline:var(--n-space-m);--n-modal-max-width:440px}:host([size="l"]){--n-modal-padding-inline:var(--n-space-l);--n-modal-max-width:1320px}}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:calc(var(--n-space-s)/ 2);flex-direction:column}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;let g=class extends(function(t){class o extends t{connectedCallback(){super.connectedCallback(),o._warningLogged||(console.warn(`NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,"font-weight:bold","font-weight:normal"),o._warningLogged=!0)}}return o._warningLogged=!1,o}(i)){constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.scrollBar=new b(this),this.focusTrap=new u(this,(()=>this.modal)),this.localize=new m(this),this.events=new a(this),this.lightDismiss=new l(this,{isOpen:()=>this.open,isDismissible:t=>t!==this.modal,onDismiss:()=>this.handleDismiss()}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1,this.enableScroll=t=>{this.open||t.target!==this.backdrop||this.scrollBar.restore()},this.trackLastButton=t=>{const o=t.target;"button"===o.localName&&(this.lastButton=o)},this.polyfillSubmitter=t=>{t.submitter=this.lastButton},this.handleSubmit=t=>{this.lastButton=void 0;const o=t.target,e=t.submitter,s="dialog"===o.method,i="dialog"===o.getAttribute("method");i&&!s&&t.preventDefault(),(i||s)&&this.close(null==e?void 0:e.value)}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),window.SubmitEvent||(this.events.listen(this,"click",this.trackLastButton,!0),this.events.listen(this,"submit",this.polyfillSubmitter,!0))}showModal(){this.open=!0}close(t){this.open=!1,null!=t&&(this.returnValue=t),this.dispatchEvent(new h("close"))}focus(t){this.modal.focus({preventScroll:!0,...t})}render(){return s`<div class="n-modal-backdrop" @transitionend="${this.enableScroll}"><div class="n-modal" tabindex="0" @submit="${this.handleSubmit}"><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><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(){var t;if(this.open){this.scrollBar.hide(),this.trigger=document.activeElement;(this.querySelector("[autofocus]")||this).focus(),this.focusTrap.trap()}else this.backdrop.scrollTop=0,this.focusTrap.release(),null===(t=this.trigger)||void 0===t||t.focus(),this.trigger=void 0}handleDismiss(){this.dispatchEvent(new h("cancel",{cancelable:!0}))&&this.close()}};g.styles=[p,f],t([r(".n-modal",!0)],g.prototype,"modal",void 0),t([r(".n-modal-backdrop",!0)],g.prototype,"backdrop",void 0),t([n({type:Boolean,reflect:!0})],g.prototype,"open",void 0),t([n({reflect:!0})],g.prototype,"size",void 0),t([n({attribute:!1})],g.prototype,"returnValue",void 0),t([n({type:Boolean,reflect:!0})],g.prototype,"scrollable",void 0),t([c("open","updated")],g.prototype,"handleOpenUpdated",null),g=t([o("nord-modal")],g);var y=g;export{y as default};
+import{_ as t,n as o}from"./query-assigned-elements-ef860822.js";import{r as e,$ as s,s as i}from"./lit-element-67e6cd99.js";import{e as n}from"./property-03f59dce.js";import{i as r}from"./query-2d22378e.js";import"./Icon.js";import{E as a}from"./EventController-d99ebeef.js";import{L as l}from"./LightDismissController-a2645ae6.js";import{S as d}from"./SlotController-ea6eff46.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as h}from"./events-731d0007.js";import{D as p}from"./DraftComponentMixin-9e4b7b34.js";import{s as m}from"./Component-a61df53a.js";import{LocalizeController as u}from"./LocalizeController.js";import"./state-70f38ceb.js";import"./if-defined-fe1a64e3.js";import"./unsafe-html-61a04601.js";import"./directive-de55b00a.js";import"./cond-97c45476.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";class v{constructor(t,o=(()=>t)){this.boundary=o,this.lastScrollY=0,this.handleFocusOut=t=>{this.lastFocused=t.target,t.relatedTarget===this.boundary()&&this.recaptureFocus()},this.handleFocusIn=t=>{!t.composedPath().includes(this.boundary())&&this.recaptureFocus()},this.restoreScroll=()=>{window.scrollTo(window.scrollX,this.lastScrollY)},t.addController(this)}hostDisconnected(){this.release()}trap(){this.lastScrollY=window.scrollY,this.boundary().addEventListener("focusout",this.handleFocusOut),window.addEventListener("scroll",this.restoreScroll),window.addEventListener("focusin",this.handleFocusIn)}release(){this.lastScrollY=0,this.lastFocused=void 0,this.boundary().removeEventListener("focusout",this.handleFocusOut),window.removeEventListener("scroll",this.restoreScroll),window.removeEventListener("focusin",this.handleFocusIn)}recaptureFocus(){var t;null===(t=this.lastFocused)||void 0===t||t.focus({preventScroll:!0})}}function f({style:t},o,e){const s=t[o];return t[o]=e,()=>{t[o]=s}}class b{constructor(t,o=document.body){this.scroller=o,this.resets=new Set,t.addController(this)}hostDisconnected(){this.restore()}get width(){const t=document.documentElement.clientWidth;return Math.abs(window.innerWidth-t)}hide(){this.restore();const{width:t}=this,o=getComputedStyle(this.scroller),e=parseInt(o.paddingRight,10)||0;this.resets.add(f(this.scroller,"overflow","hidden")),this.resets.add(f(this.scroller,"paddingRight",`${t+e}px`))}restore(){this.resets.forEach((t=>t())),this.resets.clear()}}const y=e`:host{--n-modal-padding-inline:var(--n-space-m);--n-modal-padding-block:var(--n-space-m);--n-modal-focus-ring:0 0 0 2px var(--n-color-accent);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly)}: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{position:relative;z-index:var(--n-index-overlay);display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--n-modal-max-width,620px);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-nav-surface);border-block-end:1px solid var(--n-color-border)}.n-modal-footer{border-block-start: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{border-color:transparent}.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-space-l)}:host([size="s"]){--n-modal-padding-inline:var(--n-space-m);--n-modal-max-width:440px}:host([size="l"]){--n-modal-padding-inline:var(--n-space-l);--n-modal-max-width:1320px}}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:calc(var(--n-space-s)/ 2);flex-direction:column}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;let g=class extends(p(i)){constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.scrollBar=new b(this),this.focusTrap=new v(this,(()=>this.modal)),this.localize=new u(this),this.events=new a(this),this.lightDismiss=new l(this,{isOpen:()=>this.open,isDismissible:t=>t!==this.modal,onDismiss:()=>this.handleDismiss()}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1,this.enableScroll=t=>{this.open||t.target!==this.backdrop||this.scrollBar.restore()},this.trackLastButton=t=>{const o=t.target;"button"===o.localName&&(this.lastButton=o)},this.polyfillSubmitter=t=>{t.submitter=this.lastButton},this.handleSubmit=t=>{this.lastButton=void 0;const o=t.target,e=t.submitter,s="dialog"===o.method,i="dialog"===o.getAttribute("method");i&&!s&&t.preventDefault(),(i||s)&&this.close(null==e?void 0:e.value)}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),window.SubmitEvent||(this.events.listen(this,"click",this.trackLastButton,!0),this.events.listen(this,"submit",this.polyfillSubmitter,!0))}showModal(){this.open=!0}close(t){this.open=!1,null!=t&&(this.returnValue=t),this.dispatchEvent(new h("close"))}focus(t){this.modal.focus({preventScroll:!0,...t})}render(){return s`<div class="n-modal-backdrop" @transitionend="${this.enableScroll}"><div class="n-modal" tabindex="0" @submit="${this.handleSubmit}"><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><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(){var t;if(this.open){this.scrollBar.hide(),this.trigger=document.activeElement;(this.querySelector("[autofocus]")||this).focus(),this.focusTrap.trap()}else this.backdrop.scrollTop=0,this.focusTrap.release(),null===(t=this.trigger)||void 0===t||t.focus(),this.trigger=void 0}handleDismiss(){this.dispatchEvent(new h("cancel",{cancelable:!0}))&&this.close()}};g.styles=[m,y],t([r(".n-modal",!0)],g.prototype,"modal",void 0),t([r(".n-modal-backdrop",!0)],g.prototype,"backdrop",void 0),t([n({type:Boolean,reflect:!0})],g.prototype,"open",void 0),t([n({reflect:!0})],g.prototype,"size",void 0),t([n({attribute:!1})],g.prototype,"returnValue",void 0),t([n({type:Boolean,reflect:!0})],g.prototype,"scrollable",void 0),t([c("open","updated")],g.prototype,"handleOpenUpdated",null),g=t([o("nord-modal")],g);var w=g;export{w as default};
 //# sourceMappingURL=Modal.js.map

package/lib/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/common/controllers/FocusTrapController.ts","../src/common/controllers/ScrollbarController.ts","../src/modal/Modal.ts","../src/common/mixins/DraftComponentMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class FocusTrapController implements ReactiveController {\n  private lastScrollY = 0\n  private lastFocused?: HTMLElement\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private boundary: () => HTMLElement = () => host) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.release()\n  }\n\n  trap() {\n    this.lastScrollY = window.scrollY\n    this.boundary().addEventListener(\"focusout\", this.handleFocusOut)\n    window.addEventListener(\"scroll\", this.restoreScroll)\n    window.addEventListener(\"focusin\", this.handleFocusIn)\n  }\n\n  release() {\n    this.lastScrollY = 0\n    this.lastFocused = undefined\n\n    this.boundary().removeEventListener(\"focusout\", this.handleFocusOut)\n    window.removeEventListener(\"scroll\", this.restoreScroll)\n    window.removeEventListener(\"focusin\", this.handleFocusIn)\n  }\n\n  private handleFocusOut = (e: FocusEvent) => {\n    this.lastFocused = e.target as HTMLElement\n\n    if (e.relatedTarget === this.boundary()) {\n      this.recaptureFocus()\n    }\n  }\n\n  private handleFocusIn = (e: FocusEvent) => {\n    const isOutside = !e.composedPath().includes(this.boundary())\n\n    if (isOutside) {\n      this.recaptureFocus()\n    }\n  }\n\n  private recaptureFocus() {\n    this.lastFocused?.focus({ preventScroll: true })\n  }\n\n  private restoreScroll = () => {\n    window.scrollTo(window.scrollX, this.lastScrollY)\n  }\n}\n","import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nfunction setStyle<P extends keyof CSSStyleDeclaration, V extends CSSStyleDeclaration[P]>(\n  { style }: HTMLElement,\n  property: P,\n  value: V\n) {\n  const previous = style[property]\n  style[property] = value\n\n  return () => {\n    style[property] = previous\n  }\n}\n\nexport class ScrollbarController implements ReactiveController {\n  private resets = new Set<() => void>()\n\n  constructor(host: ReactiveControllerHost)\n  constructor(host: ReactiveControllerHost, scroller: HTMLElement)\n  constructor(host: ReactiveControllerHost, private scroller = document.body) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.restore()\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  get width() {\n    const documentWidth = document.documentElement.clientWidth\n    return Math.abs(window.innerWidth - documentWidth)\n  }\n\n  hide() {\n    // in case hide() is called twice in succession\n    this.restore()\n\n    const { width } = this\n    const computedStyle = getComputedStyle(this.scroller)\n    const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0\n\n    this.resets.add(setStyle(this.scroller, \"overflow\", \"hidden\"))\n    this.resets.add(setStyle(this.scroller, \"paddingRight\", `${width + paddingRight}px`))\n  }\n\n  restore() {\n    this.resets.forEach(reset => reset())\n    this.resets.clear()\n  }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\n\nimport \"../icon/Icon.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { FocusTrapController } from \"../common/controllers/FocusTrapController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === \"button\"\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 draft\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@customElement(\"nord-modal\")\nexport default class Modal extends DraftComponentMixin(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 trigger?: HTMLElement\n  private lastButton?: HTMLButtonElement\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 scrollBar = new ScrollbarController(this)\n  private focusTrap = new FocusTrapController(this, () => this.modal)\n  private localize = new LocalizeController<\"nord-modal\">(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    isDismissible: node => node !== this.modal,\n    onDismiss: () => this.handleDismiss(),\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\" = \"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    this.setAttribute(\"aria-modal\", \"true\")\n\n    // if submit event is not supported, let's do a basic polyfill\n    if (!window.SubmitEvent) {\n      this.events.listen(this, \"click\", this.trackLastButton, true)\n      this.events.listen(this, \"submit\", this.polyfillSubmitter, true)\n    }\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\" @transitionend=${this.enableScroll}>\n        <div class=\"n-modal\" tabindex=\"0\" @submit=${this.handleSubmit}>\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          <div class=\"n-modal-footer n-padded\" ?hidden=${this.footerSlot.isEmpty}>\n            <slot name=${this.footerSlot.slotName}></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"open\", \"updated\")\n  protected handleOpenUpdated() {\n    // the order which things happen here is important!\n\n    if (this.open) {\n      // hide scrollbar and prevent scroll on body\n      this.scrollBar.hide()\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.querySelector<HTMLElement>(\"[autofocus]\") || this\n      focusTarget.focus()\n\n      // finally, we should enable the focus trap\n      this.focusTrap.trap()\n    } else {\n      // ensure modal is scrolled to top ready for re-open\n      this.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 button\n      this.trigger?.focus()\n      this.trigger = undefined\n    }\n  }\n\n  private enableScroll = (e: TransitionEvent) => {\n    // scrollbar should only be restored when the backdrop has transitioned\n    // that way we avoid awkward double scrollbars.\n    if (!this.open && e.target === this.backdrop) {\n      this.scrollBar.restore()\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  /**\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 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.close(submitter?.value)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-modal\": Modal\n  }\n}\n","import { LitElement } from \"lit\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport function DraftComponentMixin<T extends Constructable<LitElement>>(superClass: T) {\n  class DraftComponent extends superClass {\n    private static _warningLogged = false\n\n    connectedCallback() {\n      super.connectedCallback()\n\n      if (process.env.NODE_ENV !== \"development\" && !DraftComponent._warningLogged) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,\n          \"font-weight:bold\",\n          \"font-weight:normal\"\n        )\n        DraftComponent._warningLogged = true\n      }\n    }\n  }\n\n  return DraftComponent as T\n}\n"],"names":["FocusTrapController","constructor","host","boundary","this","lastScrollY","handleFocusOut","e","lastFocused","target","relatedTarget","recaptureFocus","handleFocusIn","composedPath","includes","restoreScroll","window","scrollTo","scrollX","addController","hostDisconnected","release","trap","scrollY","addEventListener","undefined","removeEventListener","_a","focus","preventScroll","setStyle","style","property","value","previous","ScrollbarController","scroller","document","body","resets","Set","restore","width","documentWidth","documentElement","clientWidth","Math","abs","innerWidth","hide","computedStyle","getComputedStyle","paddingRight","parseInt","add","forEach","reset","clear","Modal","superClass","DraftComponent","connectedCallback","super","_warningLogged","console","warn","localName","DraftComponentMixin","LitElement","headerSlot","SlotController","featureSlot","footerSlot","scrollBar","focusTrap","modal","localize","LocalizeController","events","EventController","lightDismiss","LightDismissController","isOpen","open","isDismissible","node","onDismiss","handleDismiss","size","returnValue","scrollable","enableScroll","backdrop","trackLastButton","lastButton","polyfillSubmitter","submitter","handleSubmit","isDialogProperty","method","isDialogAttr","getAttribute","preventDefault","close","setAttribute","SubmitEvent","listen","showModal","dispatchEvent","NordEvent","options","render","html","isEmpty","slotName","term","handleOpenUpdated","trigger","activeElement","querySelector","scrollTop","cancelable","styles","componentStyle","__decorate","query","prototype","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../src/common/controllers/FocusTrapController.ts","../src/common/controllers/ScrollbarController.ts","../src/modal/Modal.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class FocusTrapController implements ReactiveController {\n  private lastScrollY = 0\n  private lastFocused?: HTMLElement\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private boundary: () => HTMLElement = () => host) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.release()\n  }\n\n  trap() {\n    this.lastScrollY = window.scrollY\n    this.boundary().addEventListener(\"focusout\", this.handleFocusOut)\n    window.addEventListener(\"scroll\", this.restoreScroll)\n    window.addEventListener(\"focusin\", this.handleFocusIn)\n  }\n\n  release() {\n    this.lastScrollY = 0\n    this.lastFocused = undefined\n\n    this.boundary().removeEventListener(\"focusout\", this.handleFocusOut)\n    window.removeEventListener(\"scroll\", this.restoreScroll)\n    window.removeEventListener(\"focusin\", this.handleFocusIn)\n  }\n\n  private handleFocusOut = (e: FocusEvent) => {\n    this.lastFocused = e.target as HTMLElement\n\n    if (e.relatedTarget === this.boundary()) {\n      this.recaptureFocus()\n    }\n  }\n\n  private handleFocusIn = (e: FocusEvent) => {\n    const isOutside = !e.composedPath().includes(this.boundary())\n\n    if (isOutside) {\n      this.recaptureFocus()\n    }\n  }\n\n  private recaptureFocus() {\n    this.lastFocused?.focus({ preventScroll: true })\n  }\n\n  private restoreScroll = () => {\n    window.scrollTo(window.scrollX, this.lastScrollY)\n  }\n}\n","import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nfunction setStyle<P extends keyof CSSStyleDeclaration, V extends CSSStyleDeclaration[P]>(\n  { style }: HTMLElement,\n  property: P,\n  value: V\n) {\n  const previous = style[property]\n  style[property] = value\n\n  return () => {\n    style[property] = previous\n  }\n}\n\nexport class ScrollbarController implements ReactiveController {\n  private resets = new Set<() => void>()\n\n  constructor(host: ReactiveControllerHost)\n  constructor(host: ReactiveControllerHost, scroller: HTMLElement)\n  constructor(host: ReactiveControllerHost, private scroller = document.body) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.restore()\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  get width() {\n    const documentWidth = document.documentElement.clientWidth\n    return Math.abs(window.innerWidth - documentWidth)\n  }\n\n  hide() {\n    // in case hide() is called twice in succession\n    this.restore()\n\n    const { width } = this\n    const computedStyle = getComputedStyle(this.scroller)\n    const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0\n\n    this.resets.add(setStyle(this.scroller, \"overflow\", \"hidden\"))\n    this.resets.add(setStyle(this.scroller, \"paddingRight\", `${width + paddingRight}px`))\n  }\n\n  restore() {\n    this.resets.forEach(reset => reset())\n    this.resets.clear()\n  }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\n\nimport \"../icon/Icon.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { FocusTrapController } from \"../common/controllers/FocusTrapController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === \"button\"\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 draft\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@customElement(\"nord-modal\")\nexport default class Modal extends DraftComponentMixin(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 trigger?: HTMLElement\n  private lastButton?: HTMLButtonElement\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 scrollBar = new ScrollbarController(this)\n  private focusTrap = new FocusTrapController(this, () => this.modal)\n  private localize = new LocalizeController<\"nord-modal\">(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    isDismissible: node => node !== this.modal,\n    onDismiss: () => this.handleDismiss(),\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\" = \"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    this.setAttribute(\"aria-modal\", \"true\")\n\n    // if submit event is not supported, let's do a basic polyfill\n    if (!window.SubmitEvent) {\n      this.events.listen(this, \"click\", this.trackLastButton, true)\n      this.events.listen(this, \"submit\", this.polyfillSubmitter, true)\n    }\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\" @transitionend=${this.enableScroll}>\n        <div class=\"n-modal\" tabindex=\"0\" @submit=${this.handleSubmit}>\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          <div class=\"n-modal-footer n-padded\" ?hidden=${this.footerSlot.isEmpty}>\n            <slot name=${this.footerSlot.slotName}></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"open\", \"updated\")\n  protected handleOpenUpdated() {\n    // the order which things happen here is important!\n\n    if (this.open) {\n      // hide scrollbar and prevent scroll on body\n      this.scrollBar.hide()\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.querySelector<HTMLElement>(\"[autofocus]\") || this\n      focusTarget.focus()\n\n      // finally, we should enable the focus trap\n      this.focusTrap.trap()\n    } else {\n      // ensure modal is scrolled to top ready for re-open\n      this.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 button\n      this.trigger?.focus()\n      this.trigger = undefined\n    }\n  }\n\n  private enableScroll = (e: TransitionEvent) => {\n    // scrollbar should only be restored when the backdrop has transitioned\n    // that way we avoid awkward double scrollbars.\n    if (!this.open && e.target === this.backdrop) {\n      this.scrollBar.restore()\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  /**\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 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.close(submitter?.value)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-modal\": Modal\n  }\n}\n"],"names":["FocusTrapController","constructor","host","boundary","this","lastScrollY","handleFocusOut","e","lastFocused","target","relatedTarget","recaptureFocus","handleFocusIn","composedPath","includes","restoreScroll","window","scrollTo","scrollX","addController","hostDisconnected","release","trap","scrollY","addEventListener","undefined","removeEventListener","_a","focus","preventScroll","setStyle","style","property","value","previous","ScrollbarController","scroller","document","body","resets","Set","restore","width","documentWidth","documentElement","clientWidth","Math","abs","innerWidth","hide","computedStyle","getComputedStyle","paddingRight","parseInt","add","forEach","reset","clear","Modal","DraftComponentMixin","LitElement","headerSlot","SlotController","featureSlot","footerSlot","scrollBar","focusTrap","modal","localize","LocalizeController","events","EventController","lightDismiss","LightDismissController","isOpen","open","isDismissible","node","onDismiss","handleDismiss","size","returnValue","scrollable","enableScroll","backdrop","trackLastButton","localName","lastButton","polyfillSubmitter","submitter","handleSubmit","isDialogProperty","method","isDialogAttr","getAttribute","preventDefault","close","connectedCallback","super","setAttribute","SubmitEvent","listen","showModal","dispatchEvent","NordEvent","options","render","html","isEmpty","slotName","term","handleOpenUpdated","trigger","activeElement","querySelector","scrollTop","cancelable","styles","componentStyle","__decorate","query","prototype","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}

package/lib/NavGroup.js

@@ -1,2 +1,2 @@
-import{_ as e,n as i}from"./query-assigned-elements-ef860822.js";import{r as n,s as o,$ as t,w as r}from"./lit-element-e382250e.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-4d1db15c.js";import"./unsafe-html-76575c49.js";import"./directive-de55b00a.js";import"./observe-a9c6dfb6.js";import"./cond-ed8742b5.js";import"./Component-5a499e30.js";const s=n`:host{all:unset;display:block;color:var(--n-color-text-weak);font-weight:var(--n-font-weight);font-family:var(--n-font-family);line-height:var(--n-line-height-tight);font-size:var(--n-font-size-m);white-space:nowrap;text-overflow:ellipsis;user-select:none}*,::after,::before{box-sizing:border-box}[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-weight:var(--n-font-weight-active);padding-inline-start:var(--n-space-s);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let l=class extends o{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,e([a()],l.prototype,"heading",void 0),l=e([i("nord-nav-group")],l);var d=l;export{d as default};
+import{_ as e,n as i}from"./query-assigned-elements-ef860822.js";import{r as n,s as o,$ as t,w as r}from"./lit-element-67e6cd99.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-fe1a64e3.js";import"./unsafe-html-61a04601.js";import"./directive-de55b00a.js";import"./observe-a9c6dfb6.js";import"./cond-97c45476.js";import"./Component-a61df53a.js";const s=n`:host{all:unset;display:block;color:var(--n-color-text-weak);font-weight:var(--n-font-weight);font-family:var(--n-font-family);line-height:var(--n-line-height-tight);font-size:var(--n-font-size-m);white-space:nowrap;text-overflow:ellipsis;user-select:none}*,::after,::before{box-sizing:border-box}[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-weight:var(--n-font-weight-active);padding-inline-start:var(--n-space-s);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let l=class extends o{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,e([a()],l.prototype,"heading",void 0),l=e([i("nord-nav-group")],l);var d=l;export{d as default};
 //# sourceMappingURL=NavGroup.js.map

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,$ as o,w as a,s as r}from"./lit-element-e382250e.js";import{e as i}from"./property-03f59dce.js";import{o as s}from"./class-map-9e39244c.js";import{n as c}from"./ref-adf41565.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-ea6eff46.js";import{c as v}from"./cond-ed8742b5.js";import{N as p}from"./events-731d0007.js";import{F as h}from"./FocusableMixin-4c85ced9.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const m=t`:host{all:unset;display:block;font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.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:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--n-nav-item-box-shadow,none)}.n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@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);position:relative;z-index:var(--n-index-masked)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-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)}.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-highlight);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight-active);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;margin-inline-start:var(--n-space-s);font-size:var(--n-font-size-xs);display:inline-block}`;let f=class extends(h(r)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-content"><slot></slot></div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${c(this.focusableRef)}>${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};f.styles=m,e([i({type:Boolean,reflect:!0})],f.prototype,"active",void 0),e([i()],f.prototype,"icon",void 0),e([i()],f.prototype,"href",void 0),e([i()],f.prototype,"badge",void 0),e([i({type:Boolean})],f.prototype,"open",void 0),f=e([n("nord-nav-item")],f);var g=f;export{g as default};
+import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,$ as o,w as r,s as a}from"./lit-element-67e6cd99.js";import{e as i}from"./property-03f59dce.js";import{o as s}from"./class-map-f1b6f1fa.js";import{n as c}from"./ref-57ff8ffc.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-ea6eff46.js";import{c as v}from"./cond-97c45476.js";import{N as p}from"./events-731d0007.js";import{F as f}from"./FocusableMixin-175ea4d7.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const h=t`:host{all:unset;display:block;font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.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:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--n-nav-item-box-shadow,none)}.n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@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);position:relative;z-index:var(--n-index-masked)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-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)}.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-highlight);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight-active);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 m=class extends(f(a)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:r}<div class="n-content"><slot></slot>${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:r}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${c(this.focusableRef)}>${e}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};m.styles=h,e([i({type:Boolean,reflect:!0})],m.prototype,"active",void 0),e([i()],m.prototype,"icon",void 0),e([i()],m.prototype,"href",void 0),e([i()],m.prototype,"badge",void 0),e([i({type:Boolean})],m.prototype,"open",void 0),m=e([n("nord-nav-item")],m);var g=m;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\"\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 * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = 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() 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() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   * Please note that this isn’t supported for nav items which have nested nav\n   * items inside them.\n   */\n  @property() 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({ type: Boolean }) open = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // in cases where there is nested nav, and one of the items is active\n    // we should auto-open the nav item for developer convenience\n    if (this.querySelector(`nord-nav-item[active]`)) {\n      this.open = true\n    }\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-content\">\n        <slot></slot>\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} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\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=\"xs\"\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)}>\n      ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n    </button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\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","connectedCallback","super","querySelector","render","innards","html","icon","nothing","element","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","badge","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"2tFAuBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAwBxBL,KAAIM,MAAG,EAEpCC,oBACEC,MAAMD,oBAIFP,KAAKS,cAAc,2BACrBT,KAAKM,MAAO,GAIhBI,SACE,MAAMC,EAAUC,CAAI,GAChBZ,KAAKa,KAAOD,CAAI,uCAAsCZ,KAAKa,8BAA+BC,8CAK9F,IAAIC,EAUJ,OAPEA,EADEf,KAAKC,WAAWe,WACRhB,KAAKiB,aAAaN,GACnBX,KAAKkB,KACJlB,KAAKmB,WAAWR,GAEhBX,KAAKoB,aAAaT,GAGvBC,CAAI,wBAELG,gBACWf,KAAKC,WAAWoB,uBAAqBrB,KAAKM,sBAKrDa,WAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAItB,KAAKuB,+BAA8BC,EAAKxB,KAAKK,OAAQ,kBAAgBL,KAAKkB,MAAQ,OAC1GP,KAAWX,KAAKyB,MAAQb,CAAI,6BAA6BZ,KAAKyB,eAAiBX,QAK/EG,aAAaN,GACnB,OAAOC,CAAI,sCAGEZ,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCgB,EAAItB,KAAKuB,iBAETZ,gCAIQgB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAKG,UAAUyB,iEAOlER,aAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAItB,KAAKuB,iBAC9CZ,KAAWX,KAAKyB,MAAQb,CAAI,6BAA6BZ,KAAKyB,eAAiBX,aAI7EY,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK6B,cAAc,IAAIC,EAAU,aAzG5BlC,EAAMmC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAObL,EAAA,CAAXC,KAAyBtC,EAAA0C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAlCtB1C,EAAOqC,EAAA,CAD3BM,EAAc,kBACM3C,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\"\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 * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = 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() 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() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property() 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({ type: Boolean }) open = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // in cases where there is nested nav, and one of the items is active\n    // we should auto-open the nav item for developer convenience\n    if (this.querySelector(`nord-nav-item[active]`)) {\n      this.open = true\n    }\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-content\">\n        <slot></slot>\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=\"xs\"\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\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","connectedCallback","super","querySelector","render","innards","html","icon","nothing","badge","element","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"gxFAuBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,EAEpCC,oBACEC,MAAMD,oBAIFP,KAAKS,cAAc,2BACrBT,KAAKM,MAAO,GAIhBI,SACE,MAAMC,EAAUC,CAAI,GAChBZ,KAAKa,KAAOD,CAAI,uCAAsCZ,KAAKa,8BAA+BC,wCAGxFd,KAAKe,MAAQH,CAAI,6BAA6BZ,KAAKe,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADEhB,KAAKC,WAAWgB,WACRjB,KAAKkB,aAAaP,GACnBX,KAAKmB,KACJnB,KAAKoB,WAAWT,GAEhBX,KAAKqB,aAAaV,GAGvBC,CAAI,wBAELI,gBACWhB,KAAKC,WAAWqB,uBAAqBtB,KAAKM,sBAKrDc,WAAWT,GACjB,OAAOC,CAAI,yBACeW,EAAIvB,KAAKwB,+BAA8BC,EAAKzB,KAAKK,OAAQ,kBAAgBL,KAAKmB,MAAQ,OAC1GR,QAKAO,aAAaP,GACnB,OAAOC,CAAI,sCAGEZ,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCiB,EAAIvB,KAAKwB,iBAETb,gCAIQgB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAKG,UAAUyB,iEAOlEP,aAAaV,GACnB,OAAOC,CAAI,8BAA8BW,EAAIvB,KAAKwB,iBAAiBb,aAG7De,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK6B,cAAc,IAAIC,EAAU,aAtG5BlC,EAAMmC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBtC,EAAA0C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAhCtB1C,EAAOqC,EAAA,CAD3BM,EAAc,kBACM3C,SAAAA"}

package/lib/Navigation.js

@@ -1,2 +1,2 @@
-import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r,s as a,$ as n}from"./lit-element-e382250e.js";const s=r`:host{all:unset;display:flex;flex-direction:column;block-size:100%;background:var(--n-color-nav-surface);overflow:hidden auto}:host::-webkit-scrollbar{inline-size:var(--n-space-s);block-size:var(--n-space-s)}:host::-webkit-scrollbar-thumb{border-radius:var(--n-border-radius-pill);background:var(--n-color-border-strong)}:host::-webkit-scrollbar-track{background:var(--n-color-nav-hover)}*,::after,::before{box-sizing:border-box}nav{flex-grow:1;padding:var(--n-space-m)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center}slot[name=header]{min-block-size:var(--n-space-xxl);border-block-end:1px solid var(--n-color-border)}slot[name=footer]{padding:var(--n-space-m)}`;let l=class extends a{render(){return n`<slot name="header"></slot><nav><slot></slot></nav><slot name="footer"></slot>`}};l.styles=s,l=e([o("nord-navigation")],l);var t=l;export{t as default};
+import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r,s as a,$ as n}from"./lit-element-67e6cd99.js";const s=r`:host{all:unset;display:flex;flex-direction:column;block-size:100%;background:var(--n-color-nav-surface);overflow:hidden auto}:host::-webkit-scrollbar{inline-size:var(--n-space-s);block-size:var(--n-space-s)}:host::-webkit-scrollbar-thumb{border-radius:var(--n-border-radius-pill);background:var(--n-color-border-strong)}:host::-webkit-scrollbar-track{background:var(--n-color-nav-hover)}*,::after,::before{box-sizing:border-box}nav{flex-grow:1;padding:var(--n-space-m)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center}slot[name=header]{min-block-size:var(--n-space-xxl);border-block-end:1px solid var(--n-color-border)}slot[name=footer]{padding:var(--n-space-m)}`;let l=class extends a{render(){return n`<slot name="header"></slot><nav><slot></slot></nav><slot name="footer"></slot>`}};l.styles=s,l=e([o("nord-navigation")],l);var t=l;export{t as default};
 //# sourceMappingURL=Navigation.js.map

package/lib/Popout.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as o,s as i,$ as s}from"./lit-element-e382250e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as p,o as l,f as d,s as h,h as m,a as c}from"./positioning-763efb3a.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{N as f}from"./events-731d0007.js";import{s as g}from"./Component-5a499e30.js";import{D as v}from"./DirectionController-8b298382.js";import{o as y}from"./observe-a9c6dfb6.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";const b=o`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--n-popout-position-x);top:var(--n-popout-position-y);color:var(--n-color-text)}.n-popout{visibility:hidden;opacity:0;pointer-events:none;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transform:translateY(-10px) scale(.97);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}@media (max-width:35.9375em){:host{inline-size:100%;inset:0;inset-block-start:auto}.n-popout{transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);transform:translateY(100%);transform-origin:bottom center;border-radius:0}}.n-popout.top-end,.n-popout.top-start{transform:translateY(10px) scale(.97)}.n-popout.left-start{transform:translateX(10px) scale(.97)}.n-popout.left-end,.n-popout.top-end{transform-origin:bottom right}.n-popout.bottom-end,.n-popout.left-start{transform-origin:top right}.n-popout.left-end{transform:translateX(10px) scale(.97);transform-origin:bottom right}.n-popout.right-end,.n-popout.right-start{transform:translateX(-10px) scale(.97);transform-origin:bottom left}.n-popout.right-start{transform-origin:top left}.n-popout.top-start.is-rtl{transform-origin:top right}.n-popout.top-end.is-rtl{transform-origin:top left}.n-popout.bottom-start.is-rtl{transform-origin:bottom right}.n-popout.bottom-end.is-rtl{transform-origin:bottom left}.n-popout[aria-hidden=false]{transition-property:transform,opacity;visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}`,w=matchMedia("(max-width: 35.9375em)");let x=class extends i{constructor(){super(...arguments),this.dismiss=new u(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this&&t!==this.targetElement}),this.direction=new v(this),this.open=!1,this.smallViewport=w.matches,this.align="start",this.position="block-end",this.id="",this.updatePosition=async()=>{var t;const{x:e,y:o,placement:i,middlewareData:s}=await a(this.targetElement,this,{strategy:"fixed",placement:p(this.position,this.align,this.direction.dir),middleware:[l(8),d(),h({padding:8}),m()]});this.computedPosition=i,this.style.setProperty("--n-popout-position-x",`${e}px`),this.style.setProperty("--n-popout-position-y",`${o}px`),(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))},this.handleMediaQueryChange=()=>{this.smallViewport=w.matches,this.smallViewport||(this.cleanupAutoUpdate=c(this.targetElement,this,this.updatePosition))}}show(){this.open||(this.open=!0,this.smallViewport||(this.cleanupAutoUpdate=c(this.targetElement,this,this.updatePosition)),this.updateComplete.then((()=>{this.dispatchEvent(new f("open"))})))}hide(t=!0){var e;this.open&&(this.open=!1,null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.dispatchEvent(new f("close")),t&&this.targetElement.focus({preventScroll:!0}))}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.targetElement=this.getToggle(),this.targetElement.addEventListener("click",this.toggleOpen),w.addEventListener("change",this.handleMediaQueryChange)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.targetElement.removeAttribute("aria-expanded"),this.targetElement.removeEventListener("click",this.toggleOpen),w.removeEventListener("change",this.handleMediaQueryChange)}render(){return s`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}"><slot></slot></div>`}handleIdChange(){this.id||console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){this.targetElement.setAttribute("aria-expanded",`${this.open}`)}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};x.styles=[g,b],t([r()],x.prototype,"open",void 0),t([r()],x.prototype,"computedPosition",void 0),t([r()],x.prototype,"smallViewport",void 0),t([n({reflect:!0})],x.prototype,"align",void 0),t([n({reflect:!0})],x.prototype,"position",void 0),t([n({reflect:!0})],x.prototype,"id",void 0),t([y("id")],x.prototype,"handleIdChange",null),t([y("open")],x.prototype,"handleOpenChange",null),x=t([e("nord-popout")],x);var E=x;export{E as default};
+import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as o,s as i,$ as s}from"./lit-element-67e6cd99.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as p,o as l,f as d,s as h,h as m,a as c}from"./positioning-b660767c.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{N as f}from"./events-731d0007.js";import{s as g}from"./Component-a61df53a.js";import{D as v}from"./DirectionController-8b298382.js";import{o as y}from"./observe-a9c6dfb6.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";const b=o`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--n-popout-position-x);top:var(--n-popout-position-y);color:var(--n-color-text)}.n-popout{visibility:hidden;opacity:0;pointer-events:none;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transform:translateY(-10px) scale(.97);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}@media (max-width:35.9375em){:host{inline-size:100%;inset:0;inset-block-start:auto}.n-popout{transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);transform:translateY(100%);transform-origin:bottom center;border-radius:0}}.n-popout.top-end,.n-popout.top-start{transform:translateY(10px) scale(.97)}.n-popout.left-start{transform:translateX(10px) scale(.97)}.n-popout.left-end,.n-popout.top-end{transform-origin:bottom right}.n-popout.bottom-end,.n-popout.left-start{transform-origin:top right}.n-popout.left-end{transform:translateX(10px) scale(.97);transform-origin:bottom right}.n-popout.right-end,.n-popout.right-start{transform:translateX(-10px) scale(.97);transform-origin:bottom left}.n-popout.right-start{transform-origin:top left}.n-popout.top-start.is-rtl{transform-origin:top right}.n-popout.top-end.is-rtl{transform-origin:top left}.n-popout.bottom-start.is-rtl{transform-origin:bottom right}.n-popout.bottom-end.is-rtl{transform-origin:bottom left}.n-popout[aria-hidden=false]{transition-property:transform,opacity;visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}`,w=matchMedia("(max-width: 35.9375em)");let x=class extends i{constructor(){super(...arguments),this.dismiss=new u(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this&&t!==this.targetElement}),this.direction=new v(this),this.open=!1,this.smallViewport=w.matches,this.align="start",this.position="block-end",this.id="",this.updatePosition=async()=>{var t;const{x:e,y:o,placement:i,middlewareData:s}=await a(this.targetElement,this,{strategy:"fixed",placement:p(this.position,this.align,this.direction.dir),middleware:[l(8),d(),h({padding:8}),m()]});this.computedPosition=i,this.style.setProperty("--n-popout-position-x",`${e}px`),this.style.setProperty("--n-popout-position-y",`${o}px`),(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))},this.handleMediaQueryChange=()=>{this.smallViewport=w.matches,this.smallViewport||(this.cleanupAutoUpdate=c(this.targetElement,this,this.updatePosition))}}show(){this.open||(this.open=!0,this.smallViewport||(this.cleanupAutoUpdate=c(this.targetElement,this,this.updatePosition)),this.updateComplete.then((()=>{this.dispatchEvent(new f("open"))})))}hide(t=!0){var e;this.open&&(this.open=!1,null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.dispatchEvent(new f("close")),t&&this.targetElement.focus({preventScroll:!0}))}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.targetElement=this.getToggle(),this.targetElement.addEventListener("click",this.toggleOpen),w.addEventListener("change",this.handleMediaQueryChange)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.targetElement.removeAttribute("aria-expanded"),this.targetElement.removeEventListener("click",this.toggleOpen),w.removeEventListener("change",this.handleMediaQueryChange)}render(){return s`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}"><slot></slot></div>`}handleIdChange(){this.id||console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){this.targetElement.setAttribute("aria-expanded",`${this.open}`)}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};x.styles=[g,b],t([r()],x.prototype,"open",void 0),t([r()],x.prototype,"computedPosition",void 0),t([r()],x.prototype,"smallViewport",void 0),t([n({reflect:!0})],x.prototype,"align",void 0),t([n({reflect:!0})],x.prototype,"position",void 0),t([n({reflect:!0})],x.prototype,"id",void 0),t([y("id")],x.prototype,"handleIdChange",null),t([y("open")],x.prototype,"handleOpenChange",null),x=t([e("nord-popout")],x);var E=x;export{E as default};
 //# sourceMappingURL=Popout.js.map

package/lib/Popout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popout.js","sources":["../src/popout/Popout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery = matchMedia(\"(max-width: 35.9375em)\")\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status new\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private targetElement!: HTMLElement\n  private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n  /**\n   * Handle dismissal of the popout, clicking outside the target button and popout.\n   */\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this && node !== this.targetElement,\n  })\n\n  private direction = new DirectionController(this)\n\n  @state() private open = false\n\n  @state() private computedPosition?: Placement\n\n  @state() private smallViewport = mediaQuery.matches\n\n  /**\n   * Set the alignment of the popout in relation to the toggle depending on the position.\n   * `start` will align the left of the popout to the left of the toggle.\n   * `end` will align the right of the popout to the right of the toggle.\n   * A popout with a set position of `inline-start` or `inline-end` will switch\n   * `start` and `end` to the top and bottom of the popout respectively.\n   */\n  @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n  /**\n   * Set the position of the popout in relation to the toggle.\n   * Options follow logical properties.\n   * `block-start` and `block-end` referring to top and bottom respectively,\n   * `inline-start` and `inline-end` referring to left and right respectively.\n   */\n  @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n\n  /**\n   * The id for the active element to reference via aria-controls.\n   */\n  @property({ reflect: true }) id: string = \"\"\n\n  /**\n   * Show the popout, moving focus to the calendar inside.\n   */\n  show() {\n    if (this.open) {\n      return\n    }\n\n    this.open = true\n\n    if (!this.smallViewport) {\n      this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n    }\n\n    // we should only focus once the popout is visible after render is complete\n    this.updateComplete.then(() => {\n      /**\n       * Dispatched when the popout is opened.\n       */\n      this.dispatchEvent(new NordEvent(\"open\"))\n    })\n  }\n\n  /**\n   * Hide the popout.\n   * @param {boolean} moveFocusToButton prevent focus returning to the target\n   * button. Default is true.\n   */\n  hide(moveFocusToButton = true) {\n    if (!this.open) {\n      return\n    }\n\n    this.open = false\n\n    this.cleanupAutoUpdate?.()\n\n    /**\n     * Dispatched when the popout is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.targetElement.focus({ preventScroll: true })\n    }\n  }\n\n  /**\n   * Position the popout on load.\n   */\n  firstUpdated() {\n    if (!this.smallViewport) {\n      this.updatePosition()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.targetElement = this.getToggle()\n    this.targetElement.addEventListener(\"click\", this.toggleOpen)\n\n    mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.cleanupAutoUpdate?.()\n\n    this.targetElement.removeAttribute(\"aria-expanded\")\n    this.targetElement.removeEventListener(\"click\", this.toggleOpen)\n\n    mediaQuery.removeEventListener(\"change\", this.handleMediaQueryChange)\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  @observe(\"id\")\n  protected handleIdChange() {\n    if (!this.id) {\n      // eslint-disable-next-line no-console\n      console.warn(\"NORD: popout requires an id attribute and value\")\n    }\n  }\n\n  @observe(\"open\")\n  protected handleOpenChange() {\n    this.targetElement.setAttribute(\"aria-expanded\", `${this.open}`)\n  }\n\n  /**\n   * Get the position of the element toggling the popout\n   * and position the popout underneath it, taking into account the optional placement.\n   */\n  private updatePosition = async () => {\n    const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this, {\n      strategy: \"fixed\",\n      placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n      middleware: [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ],\n    })\n\n    this.computedPosition = placement\n\n    // use physical properties here since floating-ui\n    // works exclusively in physical dimensions\n    // we do all the mapping in logicalToPhysical\n    this.style.setProperty(\"--n-popout-position-x\", `${x}px`)\n    this.style.setProperty(\"--n-popout-position-y\", `${y}px`)\n\n    if (middlewareData.hide?.referenceHidden) {\n      this.hide()\n    }\n  }\n\n  /**\n   * Toggle the popout open or closed using state.\n   * Updating the position to underneath the target button before the popout is opened.\n   */\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n    if (this.open) {\n      this.hide(false)\n    } else if (!this.smallViewport) {\n      this.updatePosition().then(() => this.show())\n    } else {\n      this.show()\n    }\n  }\n\n  private getToggle() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n    if (toggle instanceof HTMLSlotElement) {\n      return toggle.assignedElements()[0] as HTMLElement\n    }\n\n    return toggle\n  }\n\n  /**\n   * Update the smallViewport flag to switch between \"sheet\" and \"floating\".\n   * autoUpdate is needed when a viewport gets larger and the popout is open.\n   */\n  private handleMediaQueryChange = () => {\n    this.smallViewport = mediaQuery.matches\n    if (!this.smallViewport) {\n      this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-popout\": Popout\n  }\n}\n"],"names":["mediaQuery","matchMedia","Popout","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","targetElement","direction","DirectionController","smallViewport","matches","align","position","id","updatePosition","async","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","dir","middleware","offset","flip","shift","padding","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","show","then","handleMediaQueryChange","cleanupAutoUpdate","autoUpdate","updateComplete","dispatchEvent","NordEvent","moveFocusToButton","call","focus","preventScroll","firstUpdated","connectedCallback","super","getToggle","addEventListener","disconnectedCallback","removeAttribute","removeEventListener","render","html","handleIdChange","console","warn","handleOpenChange","setAttribute","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","styles","componentStyle","__decorate","state","prototype","property","reflect","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Popout.js","sources":["../src/popout/Popout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery = matchMedia(\"(max-width: 35.9375em)\")\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status new\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private targetElement!: HTMLElement\n  private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n  /**\n   * Handle dismissal of the popout, clicking outside the target button and popout.\n   */\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this && node !== this.targetElement,\n  })\n\n  private direction = new DirectionController(this)\n\n  @state() private open = false\n\n  @state() private computedPosition?: Placement\n\n  @state() private smallViewport = mediaQuery.matches\n\n  /**\n   * Set the alignment of the popout in relation to the toggle depending on the position.\n   * `start` will align the left of the popout to the left of the toggle.\n   * `end` will align the right of the popout to the right of the toggle.\n   * A popout with a set position of `inline-start` or `inline-end` will switch\n   * `start` and `end` to the top and bottom of the popout respectively.\n   */\n  @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n  /**\n   * Set the position of the popout in relation to the toggle.\n   * Options follow logical properties.\n   * `block-start` and `block-end` referring to top and bottom respectively,\n   * `inline-start` and `inline-end` referring to left and right respectively.\n   */\n  @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n\n  /**\n   * The id for the active element to reference via aria-controls.\n   */\n  @property({ reflect: true }) id: string = \"\"\n\n  /**\n   * Show the popout, moving focus to the calendar inside.\n   */\n  show() {\n    if (this.open) {\n      return\n    }\n\n    this.open = true\n\n    if (!this.smallViewport) {\n      this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n    }\n\n    // we should only focus once the popout is visible after render is complete\n    this.updateComplete.then(() => {\n      /**\n       * Dispatched when the popout is opened.\n       */\n      this.dispatchEvent(new NordEvent(\"open\"))\n    })\n  }\n\n  /**\n   * Hide the popout.\n   * @param {boolean} moveFocusToButton prevent focus returning to the target\n   * button. Default is true.\n   */\n  hide(moveFocusToButton = true) {\n    if (!this.open) {\n      return\n    }\n\n    this.open = false\n\n    this.cleanupAutoUpdate?.()\n\n    /**\n     * Dispatched when the popout is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.targetElement.focus({ preventScroll: true })\n    }\n  }\n\n  /**\n   * Position the popout on load.\n   */\n  firstUpdated() {\n    if (!this.smallViewport) {\n      this.updatePosition()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.targetElement = this.getToggle()\n    this.targetElement.addEventListener(\"click\", this.toggleOpen)\n\n    mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.cleanupAutoUpdate?.()\n\n    this.targetElement.removeAttribute(\"aria-expanded\")\n    this.targetElement.removeEventListener(\"click\", this.toggleOpen)\n\n    mediaQuery.removeEventListener(\"change\", this.handleMediaQueryChange)\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  @observe(\"id\")\n  protected handleIdChange() {\n    if (!this.id) {\n      // eslint-disable-next-line no-console\n      console.warn(\"NORD: popout requires an id attribute and value\")\n    }\n  }\n\n  @observe(\"open\")\n  protected handleOpenChange() {\n    this.targetElement.setAttribute(\"aria-expanded\", `${this.open}`)\n  }\n\n  /**\n   * Get the position of the element toggling the popout\n   * and position the popout underneath it, taking into account the optional placement.\n   */\n  private updatePosition = async () => {\n    const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this, {\n      strategy: \"fixed\",\n      placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n      middleware: [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ],\n    })\n\n    this.computedPosition = placement\n\n    // use physical properties here since floating-ui\n    // works exclusively in physical dimensions\n    // we do all the mapping in logicalToPhysical\n    this.style.setProperty(\"--n-popout-position-x\", `${x}px`)\n    this.style.setProperty(\"--n-popout-position-y\", `${y}px`)\n\n    if (middlewareData.hide?.referenceHidden) {\n      this.hide()\n    }\n  }\n\n  /**\n   * Toggle the popout open or closed using state.\n   * Updating the position to underneath the target button before the popout is opened.\n   */\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n    if (this.open) {\n      this.hide(false)\n    } else if (!this.smallViewport) {\n      this.updatePosition().then(() => this.show())\n    } else {\n      this.show()\n    }\n  }\n\n  private getToggle() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n    if (toggle instanceof HTMLSlotElement) {\n      return toggle.assignedElements()[0] as HTMLElement\n    }\n\n    return toggle\n  }\n\n  /**\n   * Update the smallViewport flag to switch between \"sheet\" and \"floating\".\n   * autoUpdate is needed when a viewport gets larger and the popout is open.\n   */\n  private handleMediaQueryChange = () => {\n    this.smallViewport = mediaQuery.matches\n    if (!this.smallViewport) {\n      this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-popout\": Popout\n  }\n}\n"],"names":["mediaQuery","matchMedia","Popout","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","targetElement","direction","DirectionController","smallViewport","matches","align","position","id","updatePosition","async","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","dir","middleware","offset","flip","shift","padding","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","show","then","handleMediaQueryChange","cleanupAutoUpdate","autoUpdate","updateComplete","dispatchEvent","NordEvent","moveFocusToButton","call","focus","preventScroll","firstUpdated","connectedCallback","super","getToggle","addEventListener","disconnectedCallback","removeAttribute","removeEventListener","render","html","handleIdChange","console","warn","handleOpenChange","setAttribute","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","styles","componentStyle","__decorate","state","prototype","property","reflect","observe","customElement"],"mappings":"y2EAeMA,EAAaC,WAAW,0BAU9B,IAAqBC,EAArB,cAAoCC,EAApCC,kCASUC,KAAAC,QAAU,IAAIC,EAAuBF,KAAM,CACjDG,OAAQ,IAAMH,KAAKI,KACnBC,UAAWC,GAAKN,KAAKO,KAAgB,UAAXD,EAAEE,MAC5BC,cAAeC,GAAQA,IAASV,MAAQU,IAASV,KAAKW,gBAGhDX,KAAAY,UAAY,IAAIC,EAAoBb,MAE3BA,KAAII,MAAG,EAIPJ,KAAAc,cAAgBnB,EAAWoB,QASff,KAAKgB,MAAoB,QAQzBhB,KAAQiB,SAAgE,YAKxEjB,KAAEkB,GAAW,GA0GlClB,KAAcmB,eAAGC,gBACvB,MAAMC,EAAEA,EAACC,EAAEA,EAACC,UAAEA,EAASC,eAAEA,SAAyBC,EAAgBzB,KAAKW,cAAeX,KAAM,CAC1F0B,SAAU,QACVH,UAAWI,EAAkB3B,KAAKiB,SAAUjB,KAAKgB,MAAOhB,KAAKY,UAAUgB,KACvEC,WAAY,CACVC,EAAO,GACPC,IACAC,EAAM,CACJC,QAAS,IAEX1B,OAIJP,KAAKkC,iBAAmBX,EAKxBvB,KAAKmC,MAAMC,YAAY,wBAAyB,GAAGf,OACnDrB,KAAKmC,MAAMC,YAAY,wBAAyB,GAAGd,QAE5B,UAAnBE,EAAejB,YAAI,IAAA8B,OAAA,EAAAA,EAAEC,kBACvBtC,KAAKO,QAQDP,KAAAuC,WAAcjC,IACpBA,EAAEkC,iBACExC,KAAKI,KACPJ,KAAKO,MAAK,GACAP,KAAKc,cAGfd,KAAKyC,OAFLzC,KAAKmB,iBAAiBuB,MAAK,IAAM1C,KAAKyC,UAqBlCzC,KAAsB2C,uBAAG,KAC/B3C,KAAKc,cAAgBnB,EAAWoB,QAC3Bf,KAAKc,gBACRd,KAAK4C,kBAAoBC,EAAW7C,KAAKW,cAAeX,KAAMA,KAAKmB,kBAjKvEsB,OACMzC,KAAKI,OAITJ,KAAKI,MAAO,EAEPJ,KAAKc,gBACRd,KAAK4C,kBAAoBC,EAAW7C,KAAKW,cAAeX,KAAMA,KAAKmB,iBAIrEnB,KAAK8C,eAAeJ,MAAK,KAIvB1C,KAAK+C,cAAc,IAAIC,EAAU,aASrCzC,KAAK0C,GAAoB,SAClBjD,KAAKI,OAIVJ,KAAKI,MAAO,EAEU,QAAtBiC,EAAArC,KAAK4C,yBAAiB,IAAAP,GAAAA,EAAAa,KAAAlD,MAKtBA,KAAK+C,cAAc,IAAIC,EAAU,UAE7BC,GACFjD,KAAKW,cAAcwC,MAAM,CAAEC,eAAe,KAO9CC,eACOrD,KAAKc,eACRd,KAAKmB,iBAITmC,oBACEC,MAAMD,oBAENtD,KAAKW,cAAgBX,KAAKwD,YAC1BxD,KAAKW,cAAc8C,iBAAiB,QAASzD,KAAKuC,YAElD5C,EAAW8D,iBAAiB,SAAUzD,KAAK2C,wBAG7Ce,6BACEH,MAAMG,uBAEgB,QAAtBrB,EAAArC,KAAK4C,yBAAiB,IAAAP,GAAAA,EAAAa,KAAAlD,MAEtBA,KAAKW,cAAcgD,gBAAgB,iBACnC3D,KAAKW,cAAciD,oBAAoB,QAAS5D,KAAKuC,YAErD5C,EAAWiE,oBAAoB,SAAU5D,KAAK2C,wBAGhDkB,SACE,OAAOC,CAAI,wBAEW9D,KAAKkC,uBAAuBlC,KAAKY,UAAUgB,qBAC/C5B,KAAKI,KAAO,QAAU,8BAQhC2D,iBACH/D,KAAKkB,IAER8C,QAAQC,KAAK,mDAKPC,mBACRlE,KAAKW,cAAcwD,aAAa,gBAAiB,GAAGnE,KAAKI,QAiDnDoD,YACN,MACMY,EADWpE,KAAKqE,cACeC,cAAc,mBAAmBtE,KAAKkB,QAE3E,OAAIkD,aAAkBG,gBACbH,EAAOI,mBAAmB,GAG5BJ,IAtMFvE,EAAA4E,OAAS,CAACC,EAAgBvC,GAgBxBwC,EAAA,CAARC,KAA4B/E,EAAAgF,UAAA,YAAA,GAEpBF,EAAA,CAARC,KAA4C/E,EAAAgF,UAAA,wBAAA,GAEpCF,EAAA,CAARC,KAAkD/E,EAAAgF,UAAA,qBAAA,GAStBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAwClF,EAAAgF,UAAA,aAAA,GAQhCF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA2FlF,EAAAgF,UAAA,gBAAA,GAKnFF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAuBlF,EAAAgF,UAAA,UAAA,GA0F5CF,EAAA,CADCK,EAAQ,OAMRnF,EAAAgF,UAAA,iBAAA,MAGDF,EAAA,CADCK,EAAQ,SAGRnF,EAAAgF,UAAA,mBAAA,MA/IkBhF,EAAM8E,EAAA,CAD1BM,EAAc,gBACMpF,SAAAA"}

package/lib/ProgressBar.js

@@ -1,2 +1,2 @@
-import{_ as r,n as e}from"./query-assigned-elements-ef860822.js";import{r as o,$ as a,s}from"./lit-element-e382250e.js";import{l as n}from"./if-defined-4d1db15c.js";import{e as i}from"./property-03f59dce.js";import{n as t}from"./ref-adf41565.js";import{F as d}from"./FocusableMixin-4c85ced9.js";import{s as l}from"./Component-5a499e30.js";import"./directive-de55b00a.js";const p=o`:host{display:block;inline-size:100%}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;inline-size:100%;block-size:var(--n-progress-size,var(--n-space-s));background-color:var(--n-color-nav-hover);border-radius:var(--n-progress-border-radius,var(--n-border-radius-s));box-shadow:none;display:block;border:0;margin:0}label{display:block}progress::-webkit-progress-bar{background-color:transparent;border-radius:var(--n-progress-border-radius,var(--n-border-radius-s))}progress::-moz-progress-bar{background:var(--n-progress-color,var(--n-color-accent));border-radius:var(--n-progress-border-radius,var(--n-border-radius-s))}progress::-webkit-progress-value{background:var(--n-progress-color,var(--n-color-accent));border-radius:var(--n-progress-border-radius,var(--n-border-radius-s));transition:inline-size .25s ease-out}progress:indeterminate{background-color:var(--n-color-nav-hover);background-image:linear-gradient(to right,transparent 45%,var(--n-color-accent) 0,var(--n-color-accent) 55%,transparent 0);background-position:right;background-size:225% 100%;animation:animate-indeterminate 2s infinite ease}progress:indeterminate::-moz-progress-bar{background-color:transparent}progress:indeterminate::-webkit-progress-value{background-color:transparent}@keyframes animate-indeterminate{50%{background-position:left}}progress:focus{box-shadow:0 0 0 1px var(--n-color-background),0 0 0 3px var(--n-color-accent);outline:0}`;let c=class extends(d(s)){constructor(){super(...arguments),this.max=100,this.label="Current progress"}render(){return a`<label><nord-visually-hidden>${this.label}</nord-visually-hidden><progress ${t(this.focusableRef)} aria-valuenow="${n(this.value)}" aria-valuemin="0" aria-valuemax="${this.max}" tabindex="-1" max="${this.max}" value="${n(this.value)}"></progress></label>`}};c.styles=[l,p],r([i({reflect:!0,type:Number})],c.prototype,"value",void 0),r([i({reflect:!0,type:Number})],c.prototype,"max",void 0),r([i({reflect:!0})],c.prototype,"label",void 0),c=r([e("nord-progress-bar")],c);var b=c;export{b as default};
+import{_ as r,n as e}from"./query-assigned-elements-ef860822.js";import{r as a,$ as o,s}from"./lit-element-67e6cd99.js";import{l as n}from"./if-defined-fe1a64e3.js";import{e as i}from"./property-03f59dce.js";import{n as t}from"./ref-57ff8ffc.js";import{F as d}from"./FocusableMixin-175ea4d7.js";import{s as l}from"./Component-a61df53a.js";import"./directive-de55b00a.js";const p=a`:host{display:block;inline-size:100%}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;inline-size:100%;block-size:var(--n-progress-size,var(--n-space-s));background-color:var(--n-color-nav-hover);border-radius:var(--n-progress-border-radius,var(--n-border-radius-s));box-shadow:none;display:block;border:0;margin:0}label{display:block}progress::-webkit-progress-bar{background-color:transparent;border-radius:var(--n-progress-border-radius,var(--n-border-radius-s))}progress::-moz-progress-bar{background:var(--n-progress-color,var(--n-color-accent));border-radius:var(--n-progress-border-radius,var(--n-border-radius-s))}progress::-webkit-progress-value{background:var(--n-progress-color,var(--n-color-accent));border-radius:var(--n-progress-border-radius,var(--n-border-radius-s));transition:inline-size .25s ease-out}progress:indeterminate{background-color:var(--n-color-nav-hover);background-image:linear-gradient(to right,transparent 45%,var(--n-color-accent) 0,var(--n-color-accent) 55%,transparent 0);background-position:right;background-size:225% 100%;animation:animate-indeterminate 2s infinite ease}progress:indeterminate::-moz-progress-bar{background-color:transparent}progress:indeterminate::-webkit-progress-value{background-color:transparent}@keyframes animate-indeterminate{50%{background-position:left}}progress:focus{box-shadow:0 0 0 1px var(--n-color-background),0 0 0 3px var(--n-color-accent);outline:0}`;let c=class extends(d(s)){constructor(){super(...arguments),this.max=100,this.label="Current progress"}render(){return o`<label><nord-visually-hidden>${this.label}</nord-visually-hidden><progress ${t(this.focusableRef)} aria-valuenow="${n(this.value)}" aria-valuemin="0" aria-valuemax="${this.max}" tabindex="-1" max="${this.max}" value="${n(this.value)}"></progress></label>`}};c.styles=[l,p],r([i({reflect:!0,type:Number})],c.prototype,"value",void 0),r([i({reflect:!0,type:Number})],c.prototype,"max",void 0),r([i({reflect:!0})],c.prototype,"label",void 0),c=r([e("nord-progress-bar")],c);var b=c;export{b as default};
 //# sourceMappingURL=ProgressBar.js.map

package/lib/Radio.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{w as o,r as n,$ as i,s as r}from"./lit-element-e382250e.js";import{e as a}from"./property-03f59dce.js";import{n as s}from"./ref-adf41565.js";import{L as l}from"./LightDomController-e0762f0d.js";import{S as d}from"./SlotController-ea6eff46.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-ed8742b5.js";import{F as p}from"./FocusableMixin-4c85ced9.js";import{F as m}from"./FormAssociatedMixin-9d38814c.js";import{I as u}from"./InputMixin-9334d385.js";import{s as v}from"./Component-5a499e30.js";import{s as b}from"./FormField-44e865a4.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class f extends d{constructor(e,t){super(e,t.slotName),this.options=t,this.onChange=()=>{this.syncLightDom()},this.renderHook=document.createComment(this.slotName),this.lightDom=new l(e,{render:()=>this.hasContent?o:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const g=n`:host{--n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--n-radio-size)!important;block-size:var(--n-radio-size)!important;cursor:pointer}::slotted(input:checked){--n-radio-border-color:var(--n-color-accent);background:var(--n-radio-accent-color)!important}::slotted(input[aria-invalid]){--n-radio-accent-color:var(--n-color-status-danger);--n-radio-border-color:var(--n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(input){--n-radio-accent-color:var(--n-color-border-strong);--n-radio-border-color:var(--n-radio-accent-color);background:var(--n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}.n-dot{--n-radio-dot-size:var(--n-space-s);--n-radio-dot-inset:calc((var(--n-radio-size) - var(--n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--n-radio-dot-size);block-size:var(--n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--n-radio-dot-inset);inset-block-start:var(--n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{padding-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;let k=0;const $=e=>`nord-radio-${e}-${k++}`;let y=class extends(m(u(p(r)))){constructor(){super(...arguments),this.inputId=$("input"),this.hintId=$("hint"),this.errorId=$("error"),this.hintSlot=new f(this,{slotName:"hint",render:()=>this.hint?i`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:o,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new f(this,{slotName:"label",render:()=>this.label?i`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:o,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new f(this,{slotName:"error",render:()=>this.error?i`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:o,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new l(this,{render:()=>i`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${h(this.name)}" .value="${h(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${h(this.getDescribedBy())}" aria-invalid="${h(this.getInvalid())}" form="${h(this.getAttribute("form")||void 0)}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}render(){return i`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?i`<div class="n-dot"></div>`:o}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>i`<slot name="label"></slot><slot name="label-internal"></slot>`,n=e=>i`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?n(t()):t()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,t,n}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};y.styles=[v,b,g],e([a({type:Boolean,reflect:!0})],y.prototype,"checked",void 0),e([c("checked")],y.prototype,"handleCheckedChange",null),y=e([t("nord-radio")],y);var x=y;export{x as default};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{w as o,r as n,$ as i,s as r}from"./lit-element-67e6cd99.js";import{e as a}from"./property-03f59dce.js";import{n as s}from"./ref-57ff8ffc.js";import{L as l}from"./LightDomController-6d26dea2.js";import{S as d}from"./SlotController-ea6eff46.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-97c45476.js";import{F as p}from"./FocusableMixin-175ea4d7.js";import{F as m}from"./FormAssociatedMixin-d3124755.js";import{I as u}from"./InputMixin-9334d385.js";import{s as v}from"./Component-a61df53a.js";import{s as b}from"./FormField-d3767c2e.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class f extends d{constructor(e,t){super(e,t.slotName),this.options=t,this.onChange=()=>{this.syncLightDom()},this.renderHook=document.createComment(this.slotName),this.lightDom=new l(e,{render:()=>this.hasContent?o:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const g=n`:host{--n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--n-radio-size)!important;block-size:var(--n-radio-size)!important;cursor:pointer}::slotted(input:checked){--n-radio-border-color:var(--n-color-accent);background:var(--n-radio-accent-color)!important}::slotted(input[aria-invalid]){--n-radio-accent-color:var(--n-color-status-danger);--n-radio-border-color:var(--n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(input){--n-radio-accent-color:var(--n-color-border-strong);--n-radio-border-color:var(--n-radio-accent-color);background:var(--n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}.n-dot{--n-radio-dot-size:var(--n-space-s);--n-radio-dot-inset:calc((var(--n-radio-size) - var(--n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--n-radio-dot-size);block-size:var(--n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--n-radio-dot-inset);inset-block-start:var(--n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{padding-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;let k=0;const $=e=>`nord-radio-${e}-${k++}`;let y=class extends(m(u(p(r)))){constructor(){super(...arguments),this.inputId=$("input"),this.hintId=$("hint"),this.errorId=$("error"),this.hintSlot=new f(this,{slotName:"hint",render:()=>this.hint?i`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:o,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new f(this,{slotName:"label",render:()=>this.label?i`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:o,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new f(this,{slotName:"error",render:()=>this.error?i`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:o,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new l(this,{render:()=>i`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${h(this.name)}" .value="${h(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${h(this.getDescribedBy())}" aria-invalid="${h(this.getInvalid())}" form="${h(this.getAttribute("form")||void 0)}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}render(){return i`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?i`<div class="n-dot"></div>`:o}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>i`<slot name="label"></slot><slot name="label-internal"></slot>`,n=e=>i`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?n(t()):t()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,t,n}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};y.styles=[v,b,g],e([a({type:Boolean,reflect:!0})],y.prototype,"checked",void 0),e([c("checked")],y.prototype,"handleCheckedChange",null),y=e([t("nord-radio")],y);var x=y;export{x as default};
 //# sourceMappingURL=Radio.js.map

package/lib/Select.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as o,$ as n,s as r}from"./lit-element-e382250e.js";import{l as i}from"./if-defined-4d1db15c.js";import{n as s}from"./ref-adf41565.js";import{o as a}from"./unsafe-html-76575c49.js";import"./Button.js";import{I as l}from"./InputMixin-9334d385.js";import{F as d}from"./FocusableMixin-4c85ced9.js";import{F as c}from"./FormAssociatedMixin-9d38814c.js";import{s as p}from"./Component-5a499e30.js";import{s as u}from"./FormField-44e865a4.js";import{S as b}from"./SlotController-ea6eff46.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-e0762f0d.js";import"./cond-ed8742b5.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=end] svg{color:var(--n-color-icon);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=start]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let m=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new b(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${t}<div slot="end">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value.toString()}">${e.text}</option>`}};m.styles=[p,u,h],m=e([t("nord-select")],m);var v=m;export{v as default};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as o,$ as n,s as r}from"./lit-element-67e6cd99.js";import{l as i}from"./if-defined-fe1a64e3.js";import{n as s}from"./ref-57ff8ffc.js";import{o as a}from"./unsafe-html-61a04601.js";import"./Button.js";import{I as l}from"./InputMixin-9334d385.js";import{F as d}from"./FocusableMixin-175ea4d7.js";import{F as c}from"./FormAssociatedMixin-d3124755.js";import{s as p}from"./Component-a61df53a.js";import{s as u}from"./FormField-d3767c2e.js";import{S as h}from"./SlotController-ea6eff46.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-6d26dea2.js";import"./cond-97c45476.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=end] svg{color:var(--n-color-icon);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=start]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let v=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new h(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${t}<div slot="end">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value.toString()}">${e.text}</option>`}};v.styles=[p,u,m],v=e([t("nord-select")],v);var b=v;export{b as default};
 //# sourceMappingURL=Select.js.map

package/lib/ShortcutController-87615e31.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutController-87615e31.js","sources":["../src/common/controllers/ShortcutController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport type { KeyBindingMap } from \"tinykeys\"\nimport tinykeys from \"tinykeys\"\n\ntype ShortcutTarget = Parameters<typeof tinykeys>[0]\n\nconst ARROW_RE = /Arrow(Up|Down|Left|Right)/g\nconst ESC_RE = /Escape/g\n\nfunction normalise(shortcuts: KeyBindingMap) {\n  const normalised: KeyBindingMap = {}\n\n  Object.keys(shortcuts).forEach(keybinding => {\n    normalised[keybinding] = shortcuts[keybinding]\n\n    // Arrow and Escape keys in IE/Edge have different names\n    if (ARROW_RE.test(keybinding)) {\n      const mapped = keybinding.replace(ARROW_RE, (_match, capture) => capture)\n      normalised[mapped] = normalised[keybinding]\n    }\n    if (ESC_RE.test(keybinding)) {\n      const mapped = keybinding.replace(ESC_RE, () => \"Esc\")\n      normalised[mapped] = normalised[keybinding]\n    }\n  })\n\n  return normalised\n}\n\nexport class ShortcutController implements ReactiveController {\n  private unregister?: ReturnType<typeof tinykeys>\n\n  constructor(\n    host: ReactiveControllerHost,\n    private shortcuts?: KeyBindingMap,\n    private target: ShortcutTarget = window\n  ) {\n    host.addController(this)\n  }\n\n  hostConnected() {\n    if (this.shortcuts) {\n      this.bind(this.shortcuts)\n    }\n  }\n\n  hostDisconnected() {\n    this.unbind()\n  }\n\n  unbind() {\n    this.unregister?.()\n  }\n\n  bind(shortcuts: KeyBindingMap) {\n    this.unbind()\n    this.shortcuts = shortcuts\n    this.unregister = tinykeys(this.target, normalise(this.shortcuts))\n  }\n}\n\nexport type { KeyBindingMap as ShortcutMap }\n"],"names":["ARROW_RE","ESC_RE","ShortcutController","constructor","host","shortcuts","target","window","this","addController","hostConnected","bind","hostDisconnected","unbind","_a","unregister","call","tinykeys","normalised","Object","keys","forEach","keybinding","test","mapped","replace","_match","capture","normalise"],"mappings":"kDAMA,MAAMA,EAAW,6BACXC,EAAS,gBAsBFC,EAGXC,YACEC,EACQC,EACAC,EAAyBC,QADzBC,KAASH,UAATA,EACAG,KAAMF,OAANA,EAERF,EAAKK,cAAcD,MAGrBE,gBACMF,KAAKH,WACPG,KAAKG,KAAKH,KAAKH,WAInBO,mBACEJ,KAAKK,SAGPA,eACE,QAAAC,EAAAN,KAAKO,kBAAL,IAAAD,GAAAA,EAAAE,KAAAR,MAGFG,KAAKN,GACHG,KAAKK,SACLL,KAAKH,UAAYA,EACjBG,KAAKO,WAAaE,EAAST,KAAKF,OAhDpC,SAAmBD,GACjB,MAAMa,EAA4B,GAgBlC,OAdAC,OAAOC,KAAKf,GAAWgB,SAAQC,IAI7B,GAHAJ,EAAWI,GAAcjB,EAAUiB,GAG/BtB,EAASuB,KAAKD,GAAa,CAC7B,MAAME,EAASF,EAAWG,QAAQzB,GAAU,CAAC0B,EAAQC,IAAYA,IACjET,EAAWM,GAAUN,EAAWI,GAElC,GAAIrB,EAAOsB,KAAKD,GAAa,CAC3B,MAAME,EAASF,EAAWG,QAAQxB,GAAQ,IAAM,QAChDiB,EAAWM,GAAUN,EAAWI,OAI7BJ,EA+BmCU,CAAUpB,KAAKH"}
+{"version":3,"file":"ShortcutController-87615e31.js","sources":["../src/common/controllers/ShortcutController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport type { KeyBindingMap } from \"tinykeys\"\nimport tinykeys from \"tinykeys\"\n\ntype ShortcutTarget = Parameters<typeof tinykeys>[0]\n\nconst ARROW_RE = /Arrow(Up|Down|Left|Right)/g\nconst ESC_RE = /Escape/g\n\nfunction normalise(shortcuts: KeyBindingMap) {\n  const normalised: KeyBindingMap = {}\n\n  Object.keys(shortcuts).forEach(keybinding => {\n    normalised[keybinding] = shortcuts[keybinding]\n\n    // Arrow and Escape keys in IE/Edge have different names\n    if (ARROW_RE.test(keybinding)) {\n      const mapped = keybinding.replace(ARROW_RE, (_match, capture) => capture)\n      normalised[mapped] = normalised[keybinding]\n    }\n    if (ESC_RE.test(keybinding)) {\n      const mapped = keybinding.replace(ESC_RE, () => \"Esc\")\n      normalised[mapped] = normalised[keybinding]\n    }\n  })\n\n  return normalised\n}\n\nexport class ShortcutController implements ReactiveController {\n  private unregister?: ReturnType<typeof tinykeys>\n\n  constructor(\n    host: ReactiveControllerHost,\n    private shortcuts?: KeyBindingMap,\n    private target: ShortcutTarget = window\n  ) {\n    host.addController(this)\n  }\n\n  hostConnected() {\n    if (this.shortcuts) {\n      this.bind(this.shortcuts)\n    }\n  }\n\n  hostDisconnected() {\n    this.unbind()\n  }\n\n  unbind() {\n    this.unregister?.()\n  }\n\n  bind(shortcuts: KeyBindingMap) {\n    this.unbind()\n    this.shortcuts = shortcuts\n    this.unregister = tinykeys(this.target, normalise(this.shortcuts))\n  }\n}\n\nexport type { KeyBindingMap as ShortcutMap }\n"],"names":["ARROW_RE","ESC_RE","ShortcutController","constructor","host","shortcuts","target","window","this","addController","hostConnected","bind","hostDisconnected","unbind","_a","unregister","call","tinykeys","normalised","Object","keys","forEach","keybinding","test","mapped","replace","_match","capture","normalise"],"mappings":"kDAMA,MAAMA,EAAW,6BACXC,EAAS,gBAsBFC,EAGXC,YACEC,EACQC,EACAC,EAAyBC,QADzBC,KAASH,UAATA,EACAG,KAAMF,OAANA,EAERF,EAAKK,cAAcD,MAGrBE,gBACMF,KAAKH,WACPG,KAAKG,KAAKH,KAAKH,WAInBO,mBACEJ,KAAKK,SAGPA,eACiB,QAAfC,EAAAN,KAAKO,kBAAU,IAAAD,GAAAA,EAAAE,KAAAR,MAGjBG,KAAKN,GACHG,KAAKK,SACLL,KAAKH,UAAYA,EACjBG,KAAKO,WAAaE,EAAST,KAAKF,OAhDpC,SAAmBD,GACjB,MAAMa,EAA4B,GAgBlC,OAdAC,OAAOC,KAAKf,GAAWgB,SAAQC,IAI7B,GAHAJ,EAAWI,GAAcjB,EAAUiB,GAG/BtB,EAASuB,KAAKD,GAAa,CAC7B,MAAME,EAASF,EAAWG,QAAQzB,GAAU,CAAC0B,EAAQC,IAAYA,IACjET,EAAWM,GAAUN,EAAWI,GAElC,GAAIrB,EAAOsB,KAAKD,GAAa,CAC3B,MAAME,EAASF,EAAWG,QAAQxB,GAAQ,IAAM,QAChDiB,EAAWM,GAAUN,EAAWI,OAI7BJ,EA+BmCU,CAAUpB,KAAKH"}