@nordhealth/components 2.17.0 → 3.0.0

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { styleMap } from \"lit/directives/style-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\n\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\nconst isElement = (el: any): el is Element => el != null && el.nodeType === Node.ELEMENT_NODE\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n  private resizeObserver = new ResizeObserver(entries => {\n    this.headerSize = Math.round(entries[0].borderBoxSize[0].blockSize)\n  })\n\n  private navSlot = new SlotController(this, \"nav\")\n  private drawerSlot = new SlotController(this, \"drawer\")\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl,\n  })\n\n  @query(\".n-sticky\", true) private stickyElement!: HTMLDivElement\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  @state() private wideScreen = mediaQuery.matches\n  @state() private headerSize: number = 0\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   * This is deprecated, the layout component will now render its own nav toggle to simplify usage.\n   * @deprecated\n   */\n  @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n  /**\n   * Controls whether the layout's header has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n  /**\n   * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n   * A narrow viewport is considered to be less than 768px wide.\n   */\n  get isNarrow(): boolean {\n    return !this.wideScreen\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n    this.events.listen(this, \"click\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleToggleClick()\n      }\n    })\n    this.events.listen(this, \"mouseover\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleMouseEnter()\n      }\n    })\n    this.events.listen(this, \"mouseout\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleMouseLeave()\n      }\n    })\n  }\n\n  protected firstUpdated() {\n    this.resizeObserver.observe(this.stickyElement, { box: \"border-box\" })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.resizeObserver.disconnect()\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n    const shouldRenderOwnNavToggle = navSlot.hasContent && !this.navToggle\n    const headerSizePx = `${this.headerSize}px`\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=${styleMap({\n          \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n          \"--_n-sticky-size\": this.sticky ? headerSizePx : null,\n          // we output the header and drawer size as a CSS variable so that\n          // we can use it in child components for positioning e.g. notification-group\n          \"--_n-layout-header-size\": headerSizePx,\n          \"--_n-layout-drawer-size\": this.drawerSlot.hasContent ? \"var(--_n-layout-drawer-inline-size)\" : null,\n        })}\n        data-nav=${navSlot.hasContent ? navState : \"closed\"}\n        data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n          ></div>\n        </div>\n\n        <div\n          class=${classMap({ \"n-layout-main\": true, \"n-has-own-nav-toggle\": shouldRenderOwnNavToggle })}\n          @focusin=${this.handleMainFocus}\n          @click=${this.handleMainClick}\n        >\n          <div class=${classMap({ \"n-has-drawer\": this.drawerSlot.hasContent })}>\n            <div class=\"n-layout-header n-sticky\">\n              ${shouldRenderOwnNavToggle ? this.renderNavToggle() : nothing}\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n          </div>\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    /* eslint-disable lit-a11y/mouse-events-have-key-events */\n    return html`\n      <div class=\"n-nav-toggle-container\">\n        <slot\n          name=\"nav-toggle\"\n          @click=${this.handleToggleClick}\n          @mouseover=${this.handleMouseEnter}\n          @mouseout=${this.handleMouseLeave}\n        >\n          <nord-nav-toggle></nord-nav-toggle>\n        </slot>\n      </div>\n    `\n    /* eslint-enable lit-a11y/mouse-events-have-key-events */\n  }\n\n  @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 handleNavClick(e: Event) {\n    if (!e.defaultPrevented && !this.wideScreen) {\n      const target = e.target as HTMLElement\n\n      if (isNavItemLeaf(target)) {\n        this.navTransition(\"close\")\n      }\n    }\n  }\n\n  private handleMainClick() {\n    this.navTransition(\"click\")\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownOpen\")\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownClose\")\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.wideScreen = mediaQuery.matches\n    this.navTransition(this.wideScreen ? \"open\" : \"close\")\n  }\n\n  private handleToggleClick = () => {\n    this.navTransition(\"toggle\")\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition(\"focusin\")\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition(\"focusout\")\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\n      this.navTransition(\"pointerenter\")\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition(\"pointerleave\")\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition(\"transitionend\")\n  }\n\n  private isNavToggle(node: EventTarget | null) {\n    return Boolean(this.navToggle) && isElement(node) && node.id === this.navToggle\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      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      } catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n"],"names":["mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","resizeObserver","ResizeObserver","entries","headerSize","Math","round","borderBoxSize","blockSize","navSlot","SlotController","drawerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","navOpen","padding","sticky","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","e","isNavToggle","target","firstUpdated","observe","stickyElement","box","disconnectedCallback","disconnect","render","adjustedNavWidth","shouldRenderOwnNavToggle","hasContent","navToggle","headerSizePx","html","classMap","isRTL","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","max","event","transition","defaultPrevented","el","localName","isNavItem","hasSubNav","Boolean","nodeType","Node","ELEMENT_NODE","id","isLTR","preventDefault","width","clamp","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","attribute","customElement"],"mappings":"wmKA6BMA,EAAaC,WAAW,sBACxBC,EC1BU,SACdC,EACAC,EACAC,EAAkCC,KAAKC,UACvCC,EAAoCF,KAAKG,OAEzC,MAAO,CACDC,YACF,IACE,MAAMA,EAAQC,aAAaC,QAAQT,GACnC,OAAOO,EAAQF,EAAYE,GAASN,CAGrC,CAFC,MAAMS,GACN,OAAOT,CACR,CACF,EAEGM,UAAMA,GACR,IACEC,aAAaG,QAAQX,EAAKE,EAAUK,GAGrC,CAFC,MAAMG,GAEP,CACF,EAEL,CDEcE,CAAQ,uBARI,KAUpBC,EAAaC,EAAI,CACrBC,OAAQ,CACNC,OAAQ,SACRC,MAAO,UAETC,OAAQ,CACNF,OAAQ,SACRG,KAAM,SACNC,QAAS,OACTC,aAAc,QAEhBC,KAAM,CACJN,OAAQ,SACRO,SAAU,SACVC,aAAc,OACdC,aAAc,UACdC,MAAO,SACPP,KAAM,UAERQ,QAAS,CACPC,cAAe,OACfT,KAAM,UAERU,KAAM,CACJb,OAAQ,SACRI,QAAS,OACTC,aAAc,OACdS,QAAS,UAEXC,OAAQ,CACNf,OAAQ,SACRI,QAAS,OACTC,aAAc,OACdW,cAAe,YA4BnB,IAAqBC,EAArB,cAAoCC,EAApCC,kCAIUC,KAAAC,eAAiB,IAAIC,gBAAeC,IAC1CH,KAAKI,WAAaC,KAAKC,MAAMH,EAAQ,GAAGI,cAAc,GAAGC,UAAU,IAG7DR,KAAOS,QAAG,IAAIC,EAAeV,KAAM,OACnCA,KAAUW,WAAG,IAAID,EAAeV,KAAM,UACtCA,KAAAY,UAAY,IAAIC,EAAoBb,MACpCA,KAAAc,OAAS,IAAIC,EAAgBf,MAC7BA,KAAAgB,aAAe,IAAIC,EAAuBjB,KAAM,CACtDkB,OAAQ,IAAwB,WAAlBlB,KAAKmB,WAA0BnB,KAAKoB,WAClDC,UAAW,IAAMrB,KAAKsB,cAAc,SACpCC,cAAeC,GAAQA,IAASxB,KAAKyB,QAMtBzB,KAAA0B,SAAW/D,EAAMQ,MACjB6B,KAAU2B,YAAG,EACb3B,KAAAmB,SAAqB1D,EAAWmE,QAAU,SAAW,SACrD5B,KAAAoB,WAAa3D,EAAWmE,QACxB5B,KAAUI,WAAW,EAM6BJ,KAAA6B,QAAqC,WAAlB7B,KAAKmB,SAa9DnB,KAAO8B,QAAiB,IAKT9B,KAAM+B,QAAY,EAgNtD/B,KAAsBgC,uBAAG,KAC/BhC,KAAKoB,WAAa3D,EAAWmE,QAC7B5B,KAAKsB,cAActB,KAAKoB,WAAa,OAAS,QAAQ,EAGhDpB,KAAiBiC,kBAAG,KAC1BjC,KAAKsB,cAAc,SAAS,EAGtBtB,KAAckC,eAAG,KACvBlC,KAAKsB,cAAc,UAAU,EAGvBtB,KAAemC,gBAAG,KACxBnC,KAAKsB,cAAc,WAAW,EAGxBtB,KAAgBoC,iBAAG,KACrBpC,KAAKoB,YACPpB,KAAKsB,cAAc,eACpB,EAGKtB,KAAgBqC,iBAAG,KACzBrC,KAAKsB,cAAc,eAAe,EAG5BtB,KAAmBsC,oBAAG,KAC5BtC,KAAKsB,cAAc,gBAAgB,CA8DtC,CApSKiB,eACF,OAAQvC,KAAKoB,UACd,CAEDoB,oBACEC,MAAMD,oBAENxC,KAAKc,OAAO4B,OAAOjF,EAAY,SAAUuC,KAAKgC,wBAE9ChC,KAAKc,OAAO4B,OAAO1C,KAAM,SAAS2C,IAC5B3C,KAAK4C,YAAYD,EAAEE,SACrB7C,KAAKiC,mBACN,IAEHjC,KAAKc,OAAO4B,OAAO1C,KAAM,aAAa2C,IAChC3C,KAAK4C,YAAYD,EAAEE,SACrB7C,KAAKoC,kBACN,IAEHpC,KAAKc,OAAO4B,OAAO1C,KAAM,YAAY2C,IAC/B3C,KAAK4C,YAAYD,EAAEE,SACrB7C,KAAKqC,kBACN,GAEJ,CAESS,eACR9C,KAAKC,eAAe8C,QAAQ/C,KAAKgD,cAAe,CAAEC,IAAK,cACxD,CAEDC,uBACET,MAAMS,uBACNlD,KAAKC,eAAekD,YACrB,CAEDC,SACE,MAAM1B,SAAEA,EAAQP,SAAEA,EAAQV,QAAEA,EAAOkB,WAAEA,EAAUf,UAAEA,GAAcZ,KACzDqD,EAAgC,WAAblC,GAAyBnB,KAAKoB,WAAaM,EAnK9C,IAoKhB4B,EAA2B7C,EAAQ8C,aAAevD,KAAKwD,UACvDC,EAAe,GAAGzD,KAAKI,eAE7B,OAAOsD,CAAI,eAECC,EAAS,CACf,YAAY,EACZ,QAAS/C,EAAUgD,MACnB,aAAcjC,eAERkC,EAAS,CACf,wBAAyB,GAAGR,MAC5B,mBAAoBrD,KAAK+B,OAAS0B,EAAe,KAGjD,0BAA2BA,EAC3B,0BAA2BzD,KAAKW,WAAW4C,WAAa,sCAAwC,qBAEvF9C,EAAQ8C,WAAapC,EAAW,0BAC7BnB,KAAKoB,WAAa,OAAS,gDAI7BX,EAAQqD,sBACP9D,KAAKkC,gCACFlC,KAAKoC,kCACLpC,KAAKqC,4BACXrC,KAAK+D,+BACJ/D,KAAKgE,iDAEYhE,KAAKiE,wHAMdC,EAAkB,WAAb/C,EAAuBnB,KAAKmE,iCACjCD,EAAKvC,EAAY3B,KAAKoE,+BACrBpE,KAAKqE,6BACRrE,KAAKqE,2BACPrE,KAAKsE,iDAKVX,EAAS,CAAE,iBAAiB,EAAM,uBAAwBL,kBACvDtD,KAAKmC,4BACPnC,KAAKuE,gCAEDZ,EAAS,CAAE,eAAgB3D,KAAKW,WAAW4C,uDAElDD,EAA2BtD,KAAKwE,kBAAoBC,qFAOzCzE,KAAKW,WAAWmD,0DAMxC,CAEOU,kBAEN,OAAOd,CAAI,uEAII1D,KAAKiC,kCACDjC,KAAKoC,gCACNpC,KAAKqC,oEAOxB,CAGSqC,uBACR/G,EAAMQ,MAAQ6B,KAAK0B,QACpB,CAGSiD,qBAAqBC,GAQ7B,OAPa,SAATA,GAAmB5E,KAAK6E,eAC1BC,aAAa9E,KAAK6E,eAEP,WAATD,GACF5E,KAAKyB,MAAMsD,oBAAoB,gBAAiB/E,KAAKsC,qBAG/CtC,KAAKmB,UACX,IAAK,SACHnB,KAAK6B,SAAU,EACf,MACF,IAAK,SACH7B,KAAK6B,SAAU,EACf,MACF,IAAK,OACH7B,KAAK6E,cAAgBG,YAAW,IAAMhF,KAAKsB,cAAc,YAxQ1C,KAyQf,MACF,IAAK,SACHtB,KAAKyB,MAAMwD,iBAAiB,gBAAiBjF,KAAKsC,oBAAqB,CAAE4C,MAAM,IAKpF,CAGSC,mBACHnF,KAAK2B,YAGR3B,KAAKoF,YAAY/E,KAAKgF,IAAIrF,KAAK0B,SA5RX,MA+RtB1B,KAAKsB,cAActB,KAAK6B,QAAU,OAAS,QAC5C,CAMOP,cAAcgE,GACpBtF,KAAKmB,SAAW1C,EAAW8G,WAAWvF,KAAKmB,SAAUmE,EACtD,CAEOrB,eAAetB,GACrB,IAAKA,EAAE6C,mBAAqBxF,KAAKoB,WAAY,CAC3C,MAAMyB,EAASF,EAAEE,OAzPL,CAAC4C,GAAoD,kBAAjBA,EAAGC,UACdC,CAApBF,EA0PC5C,KA1PqC4C,EAAGG,WA2PxD5F,KAAKsB,cAAc,QAEtB,CA7PiB,IAACmE,CA8PpB,CAEOlB,kBACNvE,KAAKsB,cAAc,QACpB,CAEOyC,mBAAmBpB,GAGA,kBAFVA,EAAEE,OAEN6C,WACT1F,KAAKsB,cAAc,eAEtB,CAEO0C,oBAAoBrB,GAGD,kBAFVA,EAAEE,OAEN6C,WACT1F,KAAKsB,cAAc,gBAEtB,CAiCOsB,YAAYpB,GAClB,OAAOqE,QAAQ7F,KAAKwD,aAtT4B,OAAjCiC,EAsT6BjE,IAtTYiE,EAAGK,WAAaC,KAAKC,eAsTxBxE,EAAKyE,KAAOjG,KAAKwD,UAtTxD,IAACiC,CAuThB,CAMOnB,qBAAqB3B,GAC3B,MAAMjB,SACJA,EACAd,WAAWsF,MAAEA,IACXlG,KAEJ,OAAQ2C,EAAE/E,KACR,IAAK,YACHoC,KAAKoF,YAAY1D,GAAYwE,GAnXb,QAoXhB,MACF,IAAK,aACHlG,KAAKoF,YAAY1D,GAAYwE,EAtXb,SAuXhB,MACF,IAAK,QACHlG,KAAKsB,cAAc,UACnB,MACF,IAAK,OACHtB,KAAKoF,YA/XS,KAgYd,MACF,IAAK,MACHpF,KAAKoF,YAjYS,KAkYd,MACF,QACE,OAGJzC,EAAEwD,gBACH,CAEOf,YAAYgB,GAClBpG,KAAK0B,SAAW2E,EAAMhG,KAAKC,MAAM8F,GA5Yf,IACA,IA4YnB,CAEOjC,cAAcxB,GACpB,GAAiB,IAAbA,EAAE2D,OAAc,CACH3D,EAAEE,OACV0D,kBAAkB5D,EAAE6D,WAC3BxG,KAAK2B,YAAa,CACnB,CACF,CAEO0C,eACNrE,KAAK2B,YAAa,CACnB,CAEOyC,WAAWzB,GACjB,MAAMyD,EAAQpG,KAAKY,UAAUgD,MAAQ5D,KAAKyG,YAAc9D,EAAE+D,QAAU/D,EAAE+D,QAEtE1G,KAAKoF,YAAYgB,GACjBpG,KAAKsB,cAAc8E,GA7ZI,IA6Z0B,OAAS,QAC3D,GAzVMvG,EAAM8G,OAAG,CAACC,EAAgBC,EAAaC,GAiBpBC,EAAA,CAAzBC,EAAM,aAAa,IAA4CnH,EAAAoH,UAAA,qBAAA,GAClCF,EAAA,CAA7BC,EAAM,iBAAiB,IAAoCnH,EAAAoH,UAAA,aAAA,GAEnDF,EAAA,CAARG,KAAsCrH,EAAAoH,UAAA,gBAAA,GAC9BF,EAAA,CAARG,KAAkCrH,EAAAoH,UAAA,kBAAA,GAC1BF,EAAA,CAARG,KAA6ErH,EAAAoH,UAAA,gBAAA,GACrEF,EAAA,CAARG,KAA+CrH,EAAAoH,UAAA,kBAAA,GACvCF,EAAA,CAARG,KAAsCrH,EAAAoH,UAAA,kBAAA,GAM4BF,EAAA,CAAlEI,EAAS,CAAEC,SAAS,EAAMC,KAAMxB,QAASyB,UAAW,cAA2DzH,EAAAoH,UAAA,eAAA,GAOzEF,EAAA,CAAtCI,EAAS,CAAEG,UAAW,gBAAkCzH,EAAAoH,UAAA,iBAAA,GAM5BF,EAAA,CAA5BI,EAAS,CAAEC,SAAS,KAAmCvH,EAAAoH,UAAA,eAAA,GAKZF,EAAA,CAA3CI,EAAS,CAAEE,KAAMxB,QAASuB,SAAS,KAA+BvH,EAAAoH,UAAA,cAAA,GAgInEF,EAAA,CADChE,EAAQ,WAAY,YAGpBlD,EAAAoH,UAAA,uBAAA,MAGDF,EAAA,CADChE,EAAQ,aAyBRlD,EAAAoH,UAAA,uBAAA,MAGDF,EAAA,CADChE,EAAQ,UAAW,YASnBlD,EAAAoH,UAAA,mBAAA,MAzNkBpH,EAAMkH,EAAA,CAD1BQ,EAAc,gBACM1H,SAAAA"}
+{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { styleMap } from \"lit/directives/style-map.js\"\nimport * as arrowLeftIcon from \"@nordhealth/icons/lib/assets/arrow-left-small.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\n\nIcon.registerIcon(arrowLeftIcon)\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\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, \"nav\")\n  private drawerSlot = new SlotController(this, \"drawer\")\n  private topBarSlot = new SlotController(this, \"top-bar\")\n  private headerSlot = new SlotController(this, \"header\")\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl,\n  })\n\n  @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  @state() private wideScreen = mediaQuery.matches\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n  /**\n   * Controls whether the layout's header has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n  /**\n   * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n   * A narrow viewport is considered to be less than 768px wide.\n   */\n  get isNarrow(): boolean {\n    return !this.wideScreen\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n          \"n-has-header\": headerSlot.hasContent,\n          \"n-has-top-bar\": topBarSlot.hasContent,\n          \"n-has-drawer\": drawerSlot.hasContent,\n          \"n-has-nav\": navSlot.hasContent,\n        })}\n        style=${styleMap({\n          \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : \"closed\"}\n        data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    /* eslint-disable lit-a11y/mouse-events-have-key-events */\n    return html`\n      <div class=\"n-nav-toggle-container\">\n        <slot\n          name=\"nav-toggle\"\n          @click=${this.handleToggleClick}\n          @mouseover=${this.handleMouseEnter}\n          @mouseout=${this.handleMouseLeave}\n        >\n          <nord-nav-toggle></nord-nav-toggle>\n        </slot>\n      </div>\n    `\n    /* eslint-enable lit-a11y/mouse-events-have-key-events */\n  }\n\n  private renderNavCollapse() {\n    return html`\n      <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n        <nord-icon name=\"arrow-left-small\" size=\"s\"></nord-icon>\n      </button>\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 handleNavClick(e: Event) {\n    if (!e.defaultPrevented && !this.wideScreen) {\n      const target = e.target as HTMLElement\n\n      if (isNavItemLeaf(target)) {\n        this.navTransition(\"close\")\n      }\n    }\n  }\n\n  private handleMainClick() {\n    this.navTransition(\"click\")\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownOpen\")\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownClose\")\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.wideScreen = mediaQuery.matches\n    this.navTransition(this.wideScreen ? \"open\" : \"close\")\n  }\n\n  private handleToggleClick = () => {\n    this.navTransition(\"toggle\")\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition(\"focusin\")\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition(\"focusout\")\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\n      this.navTransition(\"pointerenter\")\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition(\"pointerleave\")\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition(\"transitionend\")\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case \"ArrowLeft\":\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case \"ArrowRight\":\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case \"Enter\":\n        this.navTransition(\"toggle\")\n        break\n      case \"Home\":\n        this.setNavWidth(NAV_MIN_WIDTH)\n        break\n      case \"End\":\n        this.setNavWidth(NAV_MAX_WIDTH)\n        break\n      default:\n        return\n    }\n\n    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      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      } catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n"],"names":["Icon","registerIcon","arrowLeftIcon","mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","navOpen","padding","sticky","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/{LightDomController-052f446a.js → LightDomController-5c53b3f4.js}

@@ -1,2 +1,2 @@
-import{A as t,b as s}from"./query-assigned-elements-cf502539.js";class o{constructor(t,s){this.host=t,this.options=s,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(s,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{o as L};
-//# sourceMappingURL=LightDomController-052f446a.js.map
+import{B as t,A as s}from"./query-assigned-elements-2f8275b7.js";class o{constructor(t,s){this.host=t,this.options=s,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(s,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{o as L};
+//# sourceMappingURL=LightDomController-5c53b3f4.js.map

package/lib/{LightDomController-052f446a.js.map → LightDomController-5c53b3f4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LightDomController-052f446a.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":"uEAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,KACpB,CAEWE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,IACvC,CAEDK,cACEH,KAAKI,QACN,CAEDC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,cAC9C,CAEOH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ,cAC5D"}
+{"version":3,"file":"LightDomController-5c53b3f4.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":"uEAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,KACpB,CAEWE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,IACvC,CAEDK,cACEH,KAAKI,QACN,CAEDC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,cAC9C,CAEOH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ,cAC5D"}

package/lib/Modal.js

@@ -1,2 +1,2 @@
-import{i as o,s as e,_ as a,y as n,e as i}from"./query-assigned-elements-cf502539.js";import{e as t}from"./property-03f59dce.js";import{i as s}from"./query-2d22378e.js";import{c as l}from"./interface-close-small-f26b0299.js";import r from"./Icon.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-d9666e88.js";import{s as m}from"./Component-449e40fb.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-720964c0.js";import"./directive-de55b00a.js";import"./cond-2da54107.js";import"./IconManager.js";import"./EventController-d99ebeef.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";const b=o`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-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{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 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:var(--n-space-xs);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}`;r.registerIcon(l);let f=class extends e{constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return n`<div class="n-modal-backdrop"><div class="n-modal" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="n-body-padded"></slot></div><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};f.styles=[m,b],f.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},a([s(".n-modal",!0)],f.prototype,"modal",void 0),a([s(".n-modal-backdrop",!0)],f.prototype,"backdrop",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"open",void 0),a([t({reflect:!0})],f.prototype,"size",void 0),a([t({attribute:!1})],f.prototype,"returnValue",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"scrollable",void 0),a([c("open","updated")],f.prototype,"handleOpenUpdated",null),f=a([i("nord-modal")],f);var u=f;export{u as default};
+import{i as o,s as e,_ as a,x as n,e as i}from"./query-assigned-elements-2f8275b7.js";import{e as t}from"./property-03f59dce.js";import{i as s}from"./query-2d22378e.js";import{c as l}from"./interface-close-small-f26b0299.js";import r from"./Icon.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-d9666e88.js";import{s as m}from"./Component-253ecb24.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-10508457.js";import"./directive-de55b00a.js";import"./cond-77258def.js";import"./IconManager.js";import"./EventController-d99ebeef.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";const b=o`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border)}.n-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{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 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:var(--n-space-xs);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}`;r.registerIcon(l);let f=class extends e{constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return n`<div class="n-modal-backdrop"><div class="n-modal" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="n-body-padded"></slot></div><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};f.styles=[m,b],f.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},a([s(".n-modal",!0)],f.prototype,"modal",void 0),a([s(".n-modal-backdrop",!0)],f.prototype,"backdrop",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"open",void 0),a([t({reflect:!0})],f.prototype,"size",void 0),a([t({attribute:!1})],f.prototype,"returnValue",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"scrollable",void 0),a([c("open","updated")],f.prototype,"handleOpenUpdated",null),f=a([i("nord-modal")],f);var u=f;export{u as default};
 //# sourceMappingURL=Modal.js.map

package/lib/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\nimport { ModalController } from \"./ModalController.js\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * @internal\n   * ensures clicking on the backdrop does not move focus to <body>,\n   * which can causes issues with focus trapping, and returning focus on modal close,\n   * when there are multiple modals.\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  @query(\".n-modal\", true) private modal!: HTMLDivElement\n  @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n  private headerSlot = new SlotController(this, \"header\")\n  private featureSlot = new SlotController(this, \"feature\")\n  private footerSlot = new SlotController(this, \"footer\")\n\n  private localize = new LocalizeController<\"nord-modal\">(this)\n  private modalController = new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })\n\n  /**\n   * Controls whether the modal is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Controls the max-width of the modal when open.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"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\n  /**\n   * Show the modal, automatically moving focus to the modal or a child\n   * element with an `autofocus` attribute.\n   */\n  showModal() {\n    this.open = true\n  }\n\n  /**\n   * Programmatically close the modal.\n   * @param returnValue An optional value to indicate why the modal was closed.\n   */\n  close(returnValue?: string) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Programmatically focus the modal.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions) {\n    this.modal.focus({ preventScroll: true, ...options })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-modal-backdrop\">\n        <div class=\"n-modal\" tabindex=\"0\">\n          <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n            <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n            <button class=\"n-close\" @click=${this.handleDismiss}>\n              <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n            </button>\n          </div>\n\n          <div class=\"n-modal-body\">\n            <slot\n              name=${this.featureSlot.slotName}\n              class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n              ?hidden=${this.featureSlot.isEmpty}\n            ></slot>\n            <slot class=\"n-body-padded\"></slot>\n          </div>\n\n          <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(prev: boolean) {\n    if (this.open) {\n      this.modalController.block()\n    } else if (prev === true) {\n      this.modalController.unblock()\n    }\n  }\n\n  private handleDismiss() {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n    if (allowed) {\n      this.close()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-modal\": Modal\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","headerSlot","SlotController","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"+mJAcAA,EAAKC,aAAaC,GAsBlB,IAAqBC,EAArB,cAAmCC,EAAnCC,kCAcUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAWG,YAAG,IAAID,EAAeF,KAAM,WACvCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAEtCA,KAAAK,SAAW,IAAIC,EAAiCN,MAChDA,KAAAO,gBAAkB,IAAIC,EAAgBR,KAAM,CAClDS,OAAQ,IAAMT,KAAKU,KACnBC,UAAW,IAAMX,KAAKY,gBACtBC,OAAQ,IAAMb,KAAKc,MACnBC,SAAU,IAAMf,KAAKe,SACrBC,MAAOC,GAAejB,KAAKgB,MAAMC,KAMSjB,KAAIU,MAAG,EAKtBV,KAAIkB,KAAoB,IAOrBlB,KAAWiB,YAAW,GAQVjB,KAAUmB,YAAG,CAoF1D,CAlFCC,oBACEC,MAAMD,oBAENpB,KAAKsB,aAAa,OAAQ,UAC1BtB,KAAKsB,aAAa,aAAc,OACjC,CAMDC,YACEvB,KAAKU,MAAO,CACb,CAMDM,MAAMC,GACJjB,KAAKU,MAAO,EAEO,MAAfO,IACFjB,KAAKiB,YAAcA,GAGrBjB,KAAKwB,cAAc,IAAIC,EAAU,SAClC,CAMDC,MAAMC,GACJ3B,KAAKc,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAEDE,SACE,OAAOC,CAAI,sHAG+C9B,KAAKC,WAAW8B,yCACpC/B,KAAKC,WAAW+B,oDACbhC,KAAKY,0EACqBZ,KAAKK,SAAS4B,KAAK,mFAMrEjC,KAAKG,YAAY6B,oBAChBhC,KAAKC,WAAW8B,QAAU,gBAAkB,gBAC1C/B,KAAKG,YAAY4B,0GAKgB/B,KAAKI,WAAW2B,wBAChD/B,KAAKI,WAAW4B,qCAKtC,CAGSE,kBAAkBC,GACtBnC,KAAKU,KACPV,KAAKO,gBAAgB6B,SACH,IAATD,GACTnC,KAAKO,gBAAgB8B,SAExB,CAEOzB,gBAEUZ,KAAKwB,cAAc,IAAIC,EAAU,SAAU,CAAEa,YAAY,MAGvEtC,KAAKgB,OAER,GApIMnB,EAAA0C,OAAS,CAACC,EAAgBC,GAQ1B5C,EAAiB6C,kBAAG,IAAK5C,EAAW4C,kBAAmBC,gBAAgB,GAErDC,EAAA,CAAxBC,EAAM,YAAY,IAAoChD,EAAAiD,UAAA,aAAA,GACrBF,EAAA,CAAjCC,EAAM,qBAAqB,IAAuChD,EAAAiD,UAAA,gBAAA,GAkBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBrD,EAAAiD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAAmCrD,EAAAiD,UAAA,YAAA,GAOxBF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCtD,EAAAiD,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BrD,EAAAiD,UAAA,kBAAA,GAoE9DF,EAAA,CADCQ,EAAQ,OAAQ,YAOhBvD,EAAAiD,UAAA,oBAAA,MA5HkBjD,EAAK+C,EAAA,CADzBS,EAAc,eACMxD,SAAAA"}
+{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\nimport { ModalController } from \"./ModalController.js\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * @internal\n   * ensures clicking on the backdrop does not move focus to <body>,\n   * which can causes issues with focus trapping, and returning focus on modal close,\n   * when there are multiple modals.\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  @query(\".n-modal\", true) private modal!: HTMLDivElement\n  @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n  private headerSlot = new SlotController(this, \"header\")\n  private featureSlot = new SlotController(this, \"feature\")\n  private footerSlot = new SlotController(this, \"footer\")\n\n  private localize = new LocalizeController<\"nord-modal\">(this)\n  private modalController = new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })\n\n  /**\n   * Controls whether the modal is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Controls the max-width of the modal when open.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"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\n  /**\n   * Show the modal, automatically moving focus to the modal or a child\n   * element with an `autofocus` attribute.\n   */\n  showModal() {\n    this.open = true\n  }\n\n  /**\n   * Programmatically close the modal.\n   * @param returnValue An optional value to indicate why the modal was closed.\n   */\n  close(returnValue?: string) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Programmatically focus the modal.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions) {\n    this.modal.focus({ preventScroll: true, ...options })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-modal-backdrop\">\n        <div class=\"n-modal\" tabindex=\"0\">\n          <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n            <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n            <button class=\"n-close\" @click=${this.handleDismiss}>\n              <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n            </button>\n          </div>\n\n          <div class=\"n-modal-body\">\n            <slot\n              name=${this.featureSlot.slotName}\n              class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n              ?hidden=${this.featureSlot.isEmpty}\n            ></slot>\n            <slot class=\"n-body-padded\"></slot>\n          </div>\n\n          <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(prev: boolean) {\n    if (this.open) {\n      this.modalController.block()\n    } else if (prev === true) {\n      this.modalController.unblock()\n    }\n  }\n\n  private handleDismiss() {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n    if (allowed) {\n      this.close()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-modal\": Modal\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","headerSlot","SlotController","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"0mJAcAA,EAAKC,aAAaC,GAsBlB,IAAqBC,EAArB,cAAmCC,EAAnCC,kCAcUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAWG,YAAG,IAAID,EAAeF,KAAM,WACvCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAEtCA,KAAAK,SAAW,IAAIC,EAAiCN,MAChDA,KAAAO,gBAAkB,IAAIC,EAAgBR,KAAM,CAClDS,OAAQ,IAAMT,KAAKU,KACnBC,UAAW,IAAMX,KAAKY,gBACtBC,OAAQ,IAAMb,KAAKc,MACnBC,SAAU,IAAMf,KAAKe,SACrBC,MAAOC,GAAejB,KAAKgB,MAAMC,KAMSjB,KAAIU,MAAG,EAKtBV,KAAIkB,KAAoB,IAOrBlB,KAAWiB,YAAW,GAQVjB,KAAUmB,YAAG,CAoF1D,CAlFCC,oBACEC,MAAMD,oBAENpB,KAAKsB,aAAa,OAAQ,UAC1BtB,KAAKsB,aAAa,aAAc,OACjC,CAMDC,YACEvB,KAAKU,MAAO,CACb,CAMDM,MAAMC,GACJjB,KAAKU,MAAO,EAEO,MAAfO,IACFjB,KAAKiB,YAAcA,GAGrBjB,KAAKwB,cAAc,IAAIC,EAAU,SAClC,CAMDC,MAAMC,GACJ3B,KAAKc,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAEDE,SACE,OAAOC,CAAI,sHAG+C9B,KAAKC,WAAW8B,yCACpC/B,KAAKC,WAAW+B,oDACbhC,KAAKY,0EACqBZ,KAAKK,SAAS4B,KAAK,mFAMrEjC,KAAKG,YAAY6B,oBAChBhC,KAAKC,WAAW8B,QAAU,gBAAkB,gBAC1C/B,KAAKG,YAAY4B,0GAKgB/B,KAAKI,WAAW2B,wBAChD/B,KAAKI,WAAW4B,qCAKtC,CAGSE,kBAAkBC,GACtBnC,KAAKU,KACPV,KAAKO,gBAAgB6B,SACH,IAATD,GACTnC,KAAKO,gBAAgB8B,SAExB,CAEOzB,gBAEUZ,KAAKwB,cAAc,IAAIC,EAAU,SAAU,CAAEa,YAAY,MAGvEtC,KAAKgB,OAER,GApIMnB,EAAA0C,OAAS,CAACC,EAAgBC,GAQ1B5C,EAAA6C,kBAAoB,IAAK5C,EAAW4C,kBAAmBC,gBAAgB,GAE7CC,EAAA,CAAhCC,EAAM,YAAY,IAAoChD,EAAAiD,UAAA,aAAA,GACbF,EAAA,CAAzCC,EAAM,qBAAqB,IAAuChD,EAAAiD,UAAA,gBAAA,GAkBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBrD,EAAAiD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAAmCrD,EAAAiD,UAAA,YAAA,GAOxBF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCtD,EAAAiD,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BrD,EAAAiD,UAAA,kBAAA,GAoEpDF,EAAA,CADTQ,EAAQ,OAAQ,YAOhBvD,EAAAiD,UAAA,oBAAA,MA5HkBjD,EAAK+C,EAAA,CADzBS,EAAc,eACMxD,SAAAA"}

package/lib/ModalController.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalController.js","sources":["../src/common/controllers/FocusTrapController.ts","../src/modal/ModalController.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","/* eslint-disable max-classes-per-file */\nimport { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { FocusTrapController } from \"../common/controllers/FocusTrapController.js\"\nimport { LightDismissController, LightDismissOptions } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\n\nclass Stack<T> {\n  private items: T[] = []\n\n  get length() {\n    return this.items.length\n  }\n\n  get top(): T | undefined {\n    return this.items[this.length - 1]\n  }\n\n  push(item: T) {\n    this.items.push(item)\n  }\n\n  pop() {\n    return this.items.pop()\n  }\n\n  remove(item: T) {\n    const index = this.items.indexOf(item)\n\n    if (index !== -1) {\n      this.items.splice(index, 1)\n    }\n  }\n}\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === \"button\"\n\ntype ModalControllerOptions = {\n  isOpen: LightDismissOptions[\"isOpen\"]\n  onDismiss: LightDismissOptions[\"onDismiss\"]\n  close: (returnValue?: string) => void\n  backdrop: () => HTMLElement\n  dialog: () => HTMLElement\n}\n\nexport class ModalController implements ReactiveController {\n  private static openModals = new Stack<ModalController>()\n\n  private scrollBar: ScrollbarController\n  private focusTrap: FocusTrapController\n  private lightDismiss: LightDismissController\n  private events: EventController\n  private options: ModalControllerOptions\n\n  private trigger?: HTMLElement\n  private lastButton?: HTMLButtonElement\n\n  constructor(private host: ReactiveControllerHost & HTMLElement, options: ModalControllerOptions) {\n    host.addController(this)\n    this.options = options\n\n    this.scrollBar = new ScrollbarController(host)\n    this.focusTrap = new FocusTrapController(host, options.dialog)\n    this.events = new EventController(host)\n    this.lightDismiss = new LightDismissController(host, {\n      isOpen: options.isOpen,\n      isDismissible: node => node !== options.dialog(),\n      onDismiss: this.handleLightDismiss,\n    })\n  }\n\n  hostConnected() {\n    // if submit event is not supported, let's do a basic polyfill\n    if (!window.SubmitEvent) {\n      this.events.listen(this.host, \"click\", this.trackLastButton, true)\n      this.events.listen(this.host, \"submit\", this.polyfillSubmitter, true)\n    }\n\n    this.events.listen(this.host, \"transitionend\", this.handleTransitionEnd)\n    this.events.listen(this.host, \"submit\", this.handleSubmit)\n  }\n\n  hostDisconnected(): void {\n    ModalController.openModals.remove(this)\n  }\n\n  block() {\n    // if there is already a modal open, release its focus trap\n    ModalController.openModals.top?.focusTrap.release()\n\n    // add this modal to the stack of open modals\n    ModalController.openModals.push(this)\n\n    // hide scrollbar and prevent scroll on body\n    this.scrollBar.lockScroll()\n\n    // store the element that was focused prior to modal opening\n    this.trigger = document.activeElement as HTMLElement\n\n    // handle initial (auto)focus\n    const focusTarget = this.host.querySelector<HTMLElement>(\"[autofocus]\") || this.host\n    focusTarget.focus()\n\n    // finally, we should enable the focus trap\n    this.focusTrap.trap()\n  }\n\n  unblock() {\n    // it does not make sense to unblock a modal if it is not the top-most modal\n    if (ModalController.openModals.top !== this) {\n      return\n    }\n\n    ModalController.openModals.pop()\n\n    // ensure modal is scrolled to top ready for re-open\n    this.options.backdrop().scrollTop = 0\n\n    // we need to release the focus trap...\n    this.focusTrap.release()\n\n    // ...before we can return focus to the trigger\n    this.trigger?.focus()\n    this.trigger = undefined\n\n    // if there are still modals open, enable the next modal's focus trap\n    ModalController.openModals.top?.focusTrap.trap()\n  }\n\n  /**\n   * capture the last button clicked, so that we can polyfill `submitter` property in submit event\n   */\n  private trackLastButton = (e: Event) => {\n    const target = e.target as HTMLElement\n\n    if (isButton(target)) {\n      this.lastButton = target\n    }\n  }\n\n  private polyfillSubmitter = (e: Event) => {\n    // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n    e.submitter = this.lastButton\n  }\n\n  private handleTransitionEnd = (e: TransitionEvent) => {\n    // scrollbar should only be restored when the modal has transitioned,\n    // that way we avoid awkward double scrollbars.\n    if (!this.options.isOpen() && e.target === this.host) {\n      this.scrollBar.unlockScroll()\n    }\n  }\n\n  private handleLightDismiss = (e: Event) => {\n    if (this.host.contains(e.target as Node)) {\n      this.options.onDismiss(e)\n    }\n  }\n\n  private handleSubmit = (e: SubmitEvent) => {\n    this.lastButton = undefined\n\n    const target = e.target as HTMLFormElement\n    const submitter = e.submitter as HTMLButtonElement\n\n    const isDialogProperty = target.method === \"dialog\"\n    const isDialogAttr = target.getAttribute(\"method\") === \"dialog\"\n\n    // if they mismatch, it means \"dialog\" method is not supported,\n    // so we should polyfill the fact it does not do a full submit\n    if (isDialogAttr && !isDialogProperty) {\n      e.preventDefault()\n    }\n\n    if (isDialogAttr || isDialogProperty) {\n      this.options.close(submitter?.value)\n    }\n  }\n}\n"],"names":["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","ModalController","options","trackLastButton","localName","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","scrollBar","unlockScroll","handleLightDismiss","contains","onDismiss","handleSubmit","isDialogProperty","method","isDialogAttr","getAttribute","preventDefault","close","value","ScrollbarController","focusTrap","dialog","events","EventController","lightDismiss","LightDismissController","isDismissible","node","hostConnected","SubmitEvent","listen","openModals","remove","block","top","push","lockScroll","trigger","document","activeElement","querySelector","unblock","pop","backdrop","scrollTop","_b","items","length","item","index","indexOf","splice"],"mappings":"sPAEaA,EAIXC,YAAYC,EAAoDC,EAA8B,KAAMD,IAApCE,KAAQD,SAARA,EAHxDC,KAAWC,YAAG,EA2BdD,KAAAE,eAAkBC,IACxBH,KAAKI,YAAcD,EAAEE,OAEjBF,EAAEG,gBAAkBN,KAAKD,YAC3BC,KAAKO,gBACN,EAGKP,KAAAQ,cAAiBL,KACJA,EAAEM,eAAeC,SAASV,KAAKD,aAGhDC,KAAKO,gBACN,EAOKP,KAAaW,cAAG,KACtBC,OAAOC,SAASD,OAAOE,QAASd,KAAKC,YAAY,EA5CjDH,EAAKiB,cAAcf,KACpB,CAEDgB,mBACEhB,KAAKiB,SACN,CAEDC,OACElB,KAAKC,YAAcW,OAAOO,QAC1BnB,KAAKD,WAAWqB,iBAAiB,WAAYpB,KAAKE,gBAClDU,OAAOQ,iBAAiB,SAAUpB,KAAKW,eACvCC,OAAOQ,iBAAiB,UAAWpB,KAAKQ,cACzC,CAEDS,UACEjB,KAAKC,YAAc,EACnBD,KAAKI,iBAAciB,EAEnBrB,KAAKD,WAAWuB,oBAAoB,WAAYtB,KAAKE,gBACrDU,OAAOU,oBAAoB,SAAUtB,KAAKW,eAC1CC,OAAOU,oBAAoB,UAAWtB,KAAKQ,cAC5C,CAkBOD,uBACU,QAAhBgB,EAAAvB,KAAKI,mBAAW,IAAAmB,GAAAA,EAAEC,MAAM,CAAEC,eAAe,GAC1C,QCHUC,EAYX7B,YAAoBC,EAA4C6B,GAA5C3B,KAAIF,KAAJA,EA2EZE,KAAA4B,gBAAmBzB,IACzB,MAAME,EAASF,EAAEE,OAlGsE,WAoG1EA,EApG4DwB,YAqGvE7B,KAAK8B,WAAazB,EACnB,EAGKL,KAAA+B,kBAAqB5B,IAE3BA,EAAE6B,UAAYhC,KAAK8B,UAAU,EAGvB9B,KAAAiC,oBAAuB9B,IAGxBH,KAAK2B,QAAQO,UAAY/B,EAAEE,SAAWL,KAAKF,MAC9CE,KAAKmC,UAAUC,cAChB,EAGKpC,KAAAqC,mBAAsBlC,IACxBH,KAAKF,KAAKwC,SAASnC,EAAEE,SACvBL,KAAK2B,QAAQY,UAAUpC,EACxB,EAGKH,KAAAwC,aAAgBrC,IACtBH,KAAK8B,gBAAaT,EAElB,MAAMhB,EAASF,EAAEE,OACX2B,EAAY7B,EAAE6B,UAEdS,EAAqC,WAAlBpC,EAAOqC,OAC1BC,EAAiD,WAAlCtC,EAAOuC,aAAa,UAIrCD,IAAiBF,GACnBtC,EAAE0C,kBAGAF,GAAgBF,IAClBzC,KAAK2B,QAAQmB,MAAMd,aAAA,EAAAA,EAAWe,MAC/B,EAtHDjD,EAAKiB,cAAcf,MACnBA,KAAK2B,QAAUA,EAEf3B,KAAKmC,UAAY,IAAIa,EAAoBlD,GACzCE,KAAKiD,UAAY,IAAIrD,EAAoBE,EAAM6B,EAAQuB,QACvDlD,KAAKmD,OAAS,IAAIC,EAAgBtD,GAClCE,KAAKqD,aAAe,IAAIC,EAAuBxD,EAAM,CACnDoC,OAAQP,EAAQO,OAChBqB,cAAeC,GAAQA,IAAS7B,EAAQuB,SACxCX,UAAWvC,KAAKqC,oBAEnB,CAEDoB,gBAEO7C,OAAO8C,cACV1D,KAAKmD,OAAOQ,OAAO3D,KAAKF,KAAM,QAASE,KAAK4B,iBAAiB,GAC7D5B,KAAKmD,OAAOQ,OAAO3D,KAAKF,KAAM,SAAUE,KAAK+B,mBAAmB,IAGlE/B,KAAKmD,OAAOQ,OAAO3D,KAAKF,KAAM,gBAAiBE,KAAKiC,qBACpDjC,KAAKmD,OAAOQ,OAAO3D,KAAKF,KAAM,SAAUE,KAAKwC,aAC9C,CAEDxB,mBACEU,EAAgBkC,WAAWC,OAAO7D,KACnC,CAED8D,sBAEEvC,EAAAG,EAAgBkC,WAAWG,oBAAKd,UAAUhC,UAG1CS,EAAgBkC,WAAWI,KAAKhE,MAGhCA,KAAKmC,UAAU8B,aAGfjE,KAAKkE,QAAUC,SAASC,eAGJpE,KAAKF,KAAKuE,cAA2B,gBAAkBrE,KAAKF,MACpE0B,QAGZxB,KAAKiD,UAAU/B,MAChB,CAEDoD,kBAEM5C,EAAgBkC,WAAWG,MAAQ/D,OAIvC0B,EAAgBkC,WAAWW,MAG3BvE,KAAK2B,QAAQ6C,WAAWC,UAAY,EAGpCzE,KAAKiD,UAAUhC,UAGD,QAAdM,EAAAvB,KAAKkE,eAAS,IAAA3C,GAAAA,EAAAC,QACdxB,KAAKkE,aAAU7C,UAGfqD,EAAAhD,EAAgBkC,WAAWG,oBAAKd,UAAU/B,OAC3C,EAjFcQ,EAAAkC,WAAa,IAvC9B,MAAA/D,cACUG,KAAK2E,MAAQ,EAyBtB,CAvBKC,aACF,OAAO5E,KAAK2E,MAAMC,MACnB,CAEGb,UACF,OAAO/D,KAAK2E,MAAM3E,KAAK4E,OAAS,EACjC,CAEDZ,KAAKa,GACH7E,KAAK2E,MAAMX,KAAKa,EACjB,CAEDN,MACE,OAAOvE,KAAK2E,MAAMJ,KACnB,CAEDV,OAAOgB,GACL,MAAMC,EAAQ9E,KAAK2E,MAAMI,QAAQF,IAElB,IAAXC,GACF9E,KAAK2E,MAAMK,OAAOF,EAAO,EAE5B"}
+{"version":3,"file":"ModalController.js","sources":["../src/common/controllers/FocusTrapController.ts","../src/modal/ModalController.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","/* eslint-disable max-classes-per-file */\nimport { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { FocusTrapController } from \"../common/controllers/FocusTrapController.js\"\nimport { LightDismissController, LightDismissOptions } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\n\nclass Stack<T> {\n  private items: T[] = []\n\n  get length() {\n    return this.items.length\n  }\n\n  get top(): T | undefined {\n    return this.items[this.length - 1]\n  }\n\n  push(item: T) {\n    this.items.push(item)\n  }\n\n  pop() {\n    return this.items.pop()\n  }\n\n  remove(item: T) {\n    const index = this.items.indexOf(item)\n\n    if (index !== -1) {\n      this.items.splice(index, 1)\n    }\n  }\n}\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === \"button\"\n\ntype ModalControllerOptions = {\n  isOpen: LightDismissOptions[\"isOpen\"]\n  onDismiss: LightDismissOptions[\"onDismiss\"]\n  close: (returnValue?: string) => void\n  backdrop: () => HTMLElement\n  dialog: () => HTMLElement\n}\n\nexport class ModalController implements ReactiveController {\n  private static openModals = new Stack<ModalController>()\n\n  private scrollBar: ScrollbarController\n  private focusTrap: FocusTrapController\n  private lightDismiss: LightDismissController\n  private events: EventController\n  private options: ModalControllerOptions\n\n  private trigger?: HTMLElement\n  private lastButton?: HTMLButtonElement\n\n  constructor(private host: ReactiveControllerHost & HTMLElement, options: ModalControllerOptions) {\n    host.addController(this)\n    this.options = options\n\n    this.scrollBar = new ScrollbarController(host)\n    this.focusTrap = new FocusTrapController(host, options.dialog)\n    this.events = new EventController(host)\n    this.lightDismiss = new LightDismissController(host, {\n      isOpen: options.isOpen,\n      isDismissible: node => node !== options.dialog(),\n      onDismiss: this.handleLightDismiss,\n    })\n  }\n\n  hostConnected() {\n    // if submit event is not supported, let's do a basic polyfill\n    if (!window.SubmitEvent) {\n      this.events.listen(this.host, \"click\", this.trackLastButton, true)\n      this.events.listen(this.host, \"submit\", this.polyfillSubmitter, true)\n    }\n\n    this.events.listen(this.host, \"transitionend\", this.handleTransitionEnd)\n    this.events.listen(this.host, \"submit\", this.handleSubmit)\n  }\n\n  hostDisconnected(): void {\n    ModalController.openModals.remove(this)\n  }\n\n  block() {\n    // if there is already a modal open, release its focus trap\n    ModalController.openModals.top?.focusTrap.release()\n\n    // add this modal to the stack of open modals\n    ModalController.openModals.push(this)\n\n    // hide scrollbar and prevent scroll on body\n    this.scrollBar.lockScroll()\n\n    // store the element that was focused prior to modal opening\n    this.trigger = document.activeElement as HTMLElement\n\n    // handle initial (auto)focus\n    const focusTarget = this.host.querySelector<HTMLElement>(\"[autofocus]\") || this.host\n    focusTarget.focus()\n\n    // finally, we should enable the focus trap\n    this.focusTrap.trap()\n  }\n\n  unblock() {\n    // it does not make sense to unblock a modal if it is not the top-most modal\n    if (ModalController.openModals.top !== this) {\n      return\n    }\n\n    ModalController.openModals.pop()\n\n    // ensure modal is scrolled to top ready for re-open\n    this.options.backdrop().scrollTop = 0\n\n    // we need to release the focus trap...\n    this.focusTrap.release()\n\n    // ...before we can return focus to the trigger\n    this.trigger?.focus()\n    this.trigger = undefined\n\n    // if there are still modals open, enable the next modal's focus trap\n    ModalController.openModals.top?.focusTrap.trap()\n  }\n\n  /**\n   * capture the last button clicked, so that we can polyfill `submitter` property in submit event\n   */\n  private trackLastButton = (e: Event) => {\n    const target = e.target as HTMLElement\n\n    if (isButton(target)) {\n      this.lastButton = target\n    }\n  }\n\n  private polyfillSubmitter = (e: Event) => {\n    // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n    e.submitter = this.lastButton\n  }\n\n  private handleTransitionEnd = (e: TransitionEvent) => {\n    // scrollbar should only be restored when the modal has transitioned,\n    // that way we avoid awkward double scrollbars.\n    if (!this.options.isOpen() && e.target === this.host) {\n      this.scrollBar.unlockScroll()\n    }\n  }\n\n  private handleLightDismiss = (e: Event) => {\n    if (this.host.contains(e.target as Node)) {\n      this.options.onDismiss(e)\n    }\n  }\n\n  private handleSubmit = (e: SubmitEvent) => {\n    this.lastButton = undefined\n\n    const target = e.target as HTMLFormElement\n    const submitter = e.submitter as HTMLButtonElement\n\n    const isDialogProperty = target.method === \"dialog\"\n    const isDialogAttr = target.getAttribute(\"method\") === \"dialog\"\n\n    // if they mismatch, it means \"dialog\" method is not supported,\n    // so we should polyfill the fact it does not do a full submit\n    if (isDialogAttr && !isDialogProperty) {\n      e.preventDefault()\n    }\n\n    if (isDialogAttr || isDialogProperty) {\n      this.options.close(submitter?.value)\n    }\n  }\n}\n"],"names":["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","ModalController","options","trackLastButton","localName","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","scrollBar","unlockScroll","handleLightDismiss","contains","onDismiss","handleSubmit","isDialogProperty","method","isDialogAttr","getAttribute","preventDefault","close","value","ScrollbarController","focusTrap","dialog","events","EventController","lightDismiss","LightDismissController","isDismissible","node","hostConnected","SubmitEvent","listen","openModals","remove","block","top","push","lockScroll","trigger","document","activeElement","querySelector","unblock","pop","backdrop","scrollTop","_b","items","length","item","index","indexOf","splice"],"mappings":"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"}

package/lib/NavGroup.js

@@ -1,2 +1,2 @@
-import{i as e,_ as i,s as n,y as t,b as o,e as r}from"./query-assigned-elements-cf502539.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-720964c0.js";import"./directive-de55b00a.js";import"./cond-2da54107.js";import"./IconManager.js";import"./Component-449e40fb.js";import"./observe-a9c6dfb6.js";const s=e`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none;all:unset;display:block;font-family:var(--n-font-family);font-size:var(--n-font-size-m)}*,::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-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-start:var(--n-space-m);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let l=class extends n{render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:o}<div role="list" aria-labelledby="${this.heading?"heading":o}"><slot></slot></div>`}};l.styles=s,i([a()],l.prototype,"heading",void 0),l=i([r("nord-nav-group")],l);var d=l;export{d as default};
+import{i as e,_ as i,s as n,x as t,A as r,e as o}from"./query-assigned-elements-2f8275b7.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import{s}from"./Component-253ecb24.js";import"./state-70f38ceb.js";import"./if-defined-10508457.js";import"./directive-de55b00a.js";import"./cond-77258def.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";const d=e`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-start:var(--n-space-m);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let l=class extends n{render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:r}<div role="list" aria-labelledby="${this.heading?"heading":r}"><slot></slot></div>`}};l.styles=[s,d],i([a()],l.prototype,"heading",void 0),l=i([o("nord-nav-group")],l);var p=l;export{p as default};
 //# sourceMappingURL=NavGroup.js.map

package/lib/NavGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport \"../icon/Icon.js\"\n\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends LitElement {\n  static styles = style\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property() heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-group\": NavGroup\n  }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","style","__decorate","property","prototype","customElement"],"mappings":"woCAeA,IAAqBA,EAArB,cAAsCC,EAQpCC,SACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,wBAIjE,GAdMN,EAAMO,OAAGC,EAKJC,EAAA,CAAXC,KAA2BV,EAAAW,UAAA,eAAA,GANTX,EAAQS,EAAA,CAD5BG,EAAc,mBACMZ,SAAAA"}
+{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport \"../icon/Icon.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property() heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-group\": NavGroup\n  }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","prototype","customElement"],"mappings":"8gCAgBA,IAAqBA,EAArB,cAAsCC,EAQpCC,SACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,wBAIjE,GAdMN,EAAAO,OAAS,CAACC,EAAgBC,GAKrBC,EAAA,CAAXC,KAA2BX,EAAAY,UAAA,eAAA,GANTZ,EAAQU,EAAA,CAD5BG,EAAc,mBACMb,SAAAA"}

package/lib/NavItem.js

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

package/lib/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\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  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\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-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","hasSubNav","hasContent","connectedCallback","super","querySelector","render","innards","html","icon","nothing","badge","element","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"u/FAuBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,CAgFrC,CA3EKC,gBACF,OAAOP,KAAKC,WAAWO,UACxB,CAEDC,oBACEC,MAAMD,oBAIFT,KAAKW,cAAc,2BACrBX,KAAKM,MAAO,EAEf,CAEDM,SACE,MAAMC,EAAUC,CAAI,GAChBd,KAAKe,KAAOD,CAAI,uCAAsCd,KAAKe,8BAA+BC,6EAGxFhB,KAAKiB,MAAQH,CAAI,6BAA6Bd,KAAKiB,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADElB,KAAKC,WAAWO,WACRR,KAAKmB,aAAaN,GACnBb,KAAKoB,KACJpB,KAAKqB,WAAWR,GAEhBb,KAAKsB,aAAaT,GAGvBC,CAAI,wBAELI,gBACWlB,KAAKC,WAAWsB,uBAAqBvB,KAAKM,qBAG5D,CAEOe,WAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAIxB,KAAKyB,+BAA8BC,EAAK1B,KAAKK,OAAQ,kBAAgBL,KAAKoB,MAAQ,OAC1GP,OAGP,CAEOM,aAAaN,GACnB,OAAOC,CAAI,sCAGEd,KAAK2B,8BACE3B,KAAKM,KAAO,OAAS,YACnCkB,EAAIxB,KAAKyB,iBAETZ,iCAIQe,EAAS,CAAE,iBAAiB,EAAM,QAAS5B,KAAKG,UAAU0B,gEAKzE,CAEOP,aAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAIxB,KAAKyB,iBAAiBZ,YACpE,CAEOc,aACN3B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK8B,cAAc,IAAIC,EAAU,UAClC,GA9GMnC,EAAMoC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsB1C,EAAA2C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBvC,EAAA2C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBvC,EAAA2C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBvC,EAAA2C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBzC,EAAA2C,UAAA,YAAA,GAhCtB3C,EAAOsC,EAAA,CAD3BM,EAAc,kBACM5C,SAAAA"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @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 = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property() 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  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n\n  @observe(\"active\", \"updated\")\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent(\"activate\"))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","hasSubNav","hasContent","render","innards","html","icon","nothing","badge","element","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"wiHAyBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,CA6ErC,CAxEKC,gBACF,OAAOP,KAAKC,WAAWO,UACxB,CAEDC,SACE,MAAMC,EAAUC,CAAI,GAChBX,KAAKY,KAAOD,CAAI,uCAAsCX,KAAKY,8BAA+BC,6EAGxFb,KAAKc,MAAQH,CAAI,6BAA6BX,KAAKc,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADEf,KAAKC,WAAWO,WACRR,KAAKgB,aAAaN,GACnBV,KAAKiB,KACJjB,KAAKkB,WAAWR,GAEhBV,KAAKmB,aAAaT,GAGvBC,CAAI,wBAELI,gBACWf,KAAKC,WAAWmB,uBAAqBpB,KAAKM,qBAG5D,CAEOY,WAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAIrB,KAAKsB,+BAA8BC,EAAKvB,KAAKK,OAAQ,kBAAgBL,KAAKiB,MAAQ,OAC1GP,OAGP,CAEOM,aAAaN,GACnB,OAAOC,CAAI,sCAGEX,KAAKwB,8BACExB,KAAKM,KAAO,OAAS,YACnCe,EAAIrB,KAAKsB,iBAETZ,iCAIQe,EAAS,CAAE,iBAAiB,EAAM,QAASzB,KAAKG,UAAUuB,gEAKzE,CAEOP,aAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAIrB,KAAKsB,iBAAiBZ,YACpE,CAEOc,aACNxB,KAAKM,MAAQN,KAAKM,KAClBN,KAAK2B,cAAc,IAAIC,EAAU,UAClC,CAGSC,qBACJ7B,KAAKK,SAAWL,KAAKO,WACvBP,KAAK2B,cAAc,IAAIC,EAAU,YAEpC,GA3GMhC,EAAAkC,OAAS,CAACC,EAAgBC,GASWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,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,GAwE/BL,EAAA,CADTM,EAAQ,SAAU,YAKlB3C,EAAA0C,UAAA,qBAAA,MA5GkB1C,EAAOqC,EAAA,CAD3BO,EAAc,kBACM5C,SAAAA"}

package/lib/NavToggle.js

@@ -1,2 +1,2 @@
-import{i as o,_ as i,y as t,e as n,s as r}from"./query-assigned-elements-cf502539.js";import{n as e}from"./ref-c44e9f3c.js";import{o as s}from"./class-map-21152cee.js";import{LocalizeController as a}from"./LocalizeController.js";import{D as l}from"./DirectionController-8b298382.js";import{F as c}from"./FocusableMixin-32631bff.js";import"./Button.js";import m from"./Icon.js";import"./VisuallyHidden.js";import{s as p}from"./Component-449e40fb.js";import"./directive-de55b00a.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-052f446a.js";import"./cond-2da54107.js";import"./Spinner.js";import"./if-defined-720964c0.js";import"./InputMixin-7fa755e1.js";import"./SlotController-d733c575.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";var d=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z" fill="currentColor"/></svg>',title:"navigation-toggle",tags:"nordicon navigation hamburger menu toggle navigation three lines"});const g="navigation-toggle-lock";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z" fill="currentColor"/></svg>',title:g,tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron"});const f=o`:host{display:inline-flex}nord-icon{display:block}nord-icon[name=navigation-toggle-lock]{display:none}.is-rtl nord-icon[name=navigation-toggle-lock]{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle-lock]{display:block}:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle]{display:none}}`;m.registerIcon(d),m.registerIcon(v);let j=class extends(c(r)){constructor(){super(...arguments),this.direction=new l(this),this.localization=new a(this)}render(){return t`<nord-button variant="plain" size="s" ${e(this.focusableRef)} class="${s({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="m" color="var(--n-color-icon)" name="${"navigation-toggle"}" class="nav-unlock"></nord-icon><nord-icon size="m" color="var(--n-color-text)" name="${g}" class="nav-lock"></nord-icon></nord-button>`}};j.styles=[p,f],j=i([n("nord-nav-toggle")],j);var h=j;export{h as default};
+import{i as o,_ as t,x as i,e as n,s as r}from"./query-assigned-elements-2f8275b7.js";import{n as e}from"./ref-f75a30b7.js";import{o as s}from"./class-map-4a0dec4a.js";import{LocalizeController as a}from"./LocalizeController.js";import{D as l}from"./DirectionController-f35f5476.js";import{F as c}from"./FocusableMixin-003e1094.js";import"./Button.js";import m from"./Icon.js";import"./VisuallyHidden.js";import{s as d}from"./Component-253ecb24.js";import"./directive-de55b00a.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-5c53b3f4.js";import"./cond-77258def.js";import"./Spinner.js";import"./if-defined-10508457.js";import"./InputMixin-e15dd8f7.js";import"./SlotController-d733c575.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";const p="navigation-toggle";var g=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z" fill="currentColor"/></svg>',title:p,tags:"nordicon navigation hamburger menu toggle navigation three lines"});const f="navigation-toggle-lock";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z" fill="currentColor"/></svg>',title:f,tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron"});const j=o`:host{color:var(--n-color-icon);display:inline-flex}nord-button{--n-button-color:currentColor}nord-icon{display:block;transform:translateX(-1px);color:currentColor}nord-icon[name=navigation-toggle-lock]{display:none}.is-rtl nord-icon[name=navigation-toggle-lock]{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle-lock]{display:block}:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle]{display:none}}`;m.registerIcon(g),m.registerIcon(v);let h=class extends(c(r)){constructor(){super(...arguments),this.direction=new l(this),this.localization=new a(this)}render(){return i`<nord-button variant="plain" ${e(this.focusableRef)} class="${s({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="m" name="${p}"></nord-icon><nord-icon size="m" name="${f}"></nord-icon></nord-button>`}};h.styles=[d,j],h=t([n("nord-nav-toggle")],h);var u=h;export{u as default};
 //# sourceMappingURL=NavToggle.js.map

package/lib/NavToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavToggle.js","sources":["../../icons/lib/assets/navigation-toggle.js","../../icons/lib/assets/navigation-toggle-lock.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation three lines\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle-lock\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\"\n","import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as unlockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\n\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavToggle.css\"\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n * This component is used internally in the Layout component, but can also be\n * used separate to further customize the behaviour.\n *\n * @status new\n * @category action\n *\n * @localization label - Accessible label for the nav toggle button.\n */\n@customElement(\"nord-nav-toggle\")\nexport default class NavToggle extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private direction = new DirectionController(this)\n  private localization = new LocalizeController<\"nord-nav-toggle\">(this)\n\n  render() {\n    return html`\n      <nord-button\n        variant=\"plain\"\n        size=\"s\"\n        ${ref(this.focusableRef)}\n        class=${classMap({ \"is-rtl\": this.direction.isRTL })}\n      >\n        <nord-visually-hidden>${this.localization.term(\"label\")}</nord-visually-hidden>\n        <nord-icon size=\"m\" color=\"var(--n-color-icon)\" name=${unlockIcon.title} class=\"nav-unlock\"></nord-icon>\n        <nord-icon size=\"m\" color=\"var(--n-color-text)\" name=${lockIcon.title} class=\"nav-lock\"></nord-icon>\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-toggle\": NavToggle\n  }\n}\n"],"names":["title","Icon","registerIcon","unlockIcon","lockIcon","NavToggle","FocusableMixin","LitElement","constructor","this","direction","DirectionController","localization","LocalizeController","render","html","ref","focusableRef","classMap","isRTL","term","lockIcon.title","styles","componentStyle","style","__decorate","customElement"],"mappings":"6kCAAe,mMACM,yBACD,qECDb,MAAMA,EAAQ,qEADN,4TAEK,4dCgBpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAalB,IAAqBC,EAArB,cAAuCC,EAAeC,IAAtDC,kCAGUC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,KAgBlE,CAdCK,SACE,OAAOC,CAAI,yCAILC,EAAIP,KAAKQ,wBACHC,EAAS,CAAE,SAAUT,KAAKC,UAAUS,kCAEpBV,KAAKG,aAAaQ,KAAK,wFF7ClC,6GE+C0CC,gDAG5D,GAlBMhB,EAAAiB,OAAS,CAACC,EAAgBC,GADdnB,EAASoB,EAAA,CAD7BC,EAAc,oBACMrB,SAAAA"}
+{"version":3,"file":"NavToggle.js","sources":["../../icons/lib/assets/navigation-toggle.js","../../icons/lib/assets/navigation-toggle-lock.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation three lines\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle-lock\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\"\n","import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as unlockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\n\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavToggle.css\"\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n * This component is used internally in the Layout component, but can also be\n * used separate to further customize the behavior.\n *\n * @status new\n * @category action\n *\n * @localization label - Accessible label for the nav toggle button.\n */\n@customElement(\"nord-nav-toggle\")\nexport default class NavToggle extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private direction = new DirectionController(this)\n  private localization = new LocalizeController<\"nord-nav-toggle\">(this)\n\n  render() {\n    return html`\n      <nord-button variant=\"plain\" ${ref(this.focusableRef)} class=${classMap({ \"is-rtl\": this.direction.isRTL })}>\n        <nord-visually-hidden>${this.localization.term(\"label\")}</nord-visually-hidden>\n        <nord-icon size=\"m\" name=${unlockIcon.title}></nord-icon>\n        <nord-icon size=\"m\" name=${lockIcon.title}></nord-icon>\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-toggle\": NavToggle\n  }\n}\n"],"names":["title","Icon","registerIcon","unlockIcon","lockIcon","NavToggle","FocusableMixin","LitElement","constructor","this","direction","DirectionController","localization","LocalizeController","render","html","ref","focusableRef","classMap","isRTL","term","unlockIcon.title","lockIcon.title","styles","componentStyle","style","__decorate","customElement"],"mappings":"iiCACO,MAAMA,EAAQ,gEADN,0MAEK,qECDb,MAAMA,EAAQ,qEADN,4TAEK,8kBCgBpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAalB,IAAqBC,EAArB,cAAuCC,EAAeC,IAAtDC,kCAGUC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,KAWlE,CATCK,SACE,OAAOC,CAAI,gCACsBC,EAAIP,KAAKQ,wBAAuBC,EAAS,CAAE,SAAUT,KAAKC,UAAUS,kCACzEV,KAAKG,aAAaQ,KAAK,4DACpBC,4CACAC,+BAGhC,GAbMjB,EAAAkB,OAAS,CAACC,EAAgBC,GADdpB,EAASqB,EAAA,CAD7BC,EAAc,oBACMtB,SAAAA"}

package/lib/Navigation.js

@@ -1,2 +1,2 @@
-import{i as o,_ as n,s as e,y as t,e as r}from"./query-assigned-elements-cf502539.js";import{S as a}from"./SlotController-d733c575.js";import{s}from"./Component-449e40fb.js";import"./EventController-d99ebeef.js";const l=o`:host{display:flex;flex-direction:column;block-size:100%;background:var(--n-color-nav-surface);overflow:hidden auto}nav{flex-grow:1;padding:var(--n-space-m)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center;--n-button-text-align:start;--n-button-background-color:transparent;--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-gradient:none;--n-button-padding-inline:var(--n-space-xs)}::slotted(:is([slot=header],[slot=footer]):not([open]):focus-within){--n-button-border-color:var(--n-color-accent)}slot[name=header]{--n-button-border-radius:0;--n-button-padding-inline:calc((var(--n-space-l) / 1.5) - 1px);--n-button-font-weight:var(--n-font-weight-heading);--n-button-font-size:var(--n-font-size-l);--n-button-min-block-size:calc(var(--n-space-xxl) - 2px);--n-select-block-size:var(--n-button-min-block-size);min-block-size:var(--n-button-min-block-size);padding:1px 1px 0;border-block-end:1px solid var(--n-color-border)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);margin:var(--n-space-m)}::slotted(:is([slot=header]:hover,[slot=header][open])){box-shadow:0 -1px 0 1px var(--n-color-nav-hover);background-color:var(--n-color-nav-hover)}::slotted(:is([slot=footer]:hover,[slot=footer][open])){--n-button-border-color:var(--n-color-border-hover)}`;let i=class extends e{constructor(){super(...arguments),this.headerSlot=new a(this,"header")}render(){return t`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><nav><slot></slot></nav><slot name="footer"></slot>`}};i.styles=[s,l],i=n([r("nord-navigation")],i);var d=i;export{d as default};
+import{i as n,_ as o,s as a,x as e,e as t}from"./query-assigned-elements-2f8275b7.js";import{S as r}from"./SlotController-d733c575.js";import{s as i}from"./Component-253ecb24.js";import{E as d}from"./EventController-d99ebeef.js";const l=n`:host{--_n-navigation-background-color:var(--n-navigation-background-color, var(--n-color-nav-surface));--_n-navigation-header-block-size:var(--n-navigation-header-block-size, var(--n-space-xxl));--_n-navigation-header-padding-inline:var(--n-navigation-header-padding-inline);--_n-navigation-header-background:var(--n-navigation-header-background, var(--_n-navigation-background-color));--_n-navigation-header-divider:var(--n-navigation-header-divider, 1px solid var(--n-color-border));--_n-navigation-header-color:var(--n-navigation-header-color);--_n-navigation-header-toggle-icon-color:var(--n-navigation-header-toggle-icon-color);--_n-navigation-header-focus-style:var(--n-navigation-header-focus-style, var(--_n-navigation-dropdown-box-shadow));--_n-navigation-dropdown-box-shadow:0 0 0 1px var(--n-color-accent) inset;display:flex;flex-direction:column;block-size:100%;background:var(--_n-navigation-background-color)}.n-navigation-main{display:flex;flex-direction:column;flex:1;overflow-y:auto;overscroll-behavior-y:none}nav{flex:1;padding:var(--n-space-m);padding-block-start:var(--n-space-s)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center;--n-button-text-align:start;--n-button-background-color:transparent;--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-gradient:none}slot[name=header]{--n-button-border-radius:0;--n-button-color:var(--_n-navigation-header-color);--n-button-min-block-size:var(--_n-navigation-header-block-size);--n-select-block-size:var(--n-button-min-block-size);--n-button-font-weight:var(--n-font-weight-active);--n-button-toggle-icon-color:var(--_n-navigation-header-toggle-icon-color);--n-button-padding-inline:var(--_n-navigation-header-padding-inline);block-size:var(--_n-navigation-header-block-size);background-color:var(--_n-navigation-header-background);border-block-end:var(--_n-navigation-header-divider)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);--n-button-padding-inline:var(--n-space-xs);margin:var(--n-space-m)}:is([name=header],[name=footer])::slotted(:not([open]):focus-within){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:not([open], :active):focus-within){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(:hover, [open])){--n-button-border-color:var(--n-color-border-hover)}`;let s=class extends a{constructor(){super(...arguments),this.headerSlot=new r(this,"header"),this.events=new d(this),this.handleActivate=n=>{var o,a;const e=n.target,t=new Set;let r=null===(o=e.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;r;)t.add(r),r=null===(a=r.parentElement)||void 0===a?void 0:a.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==e){const o=t.has(n);n.open=o,n.active=o}}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"activate",this.handleActivate)}render(){return e`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav><slot name="footer"></slot></div>`}};s.styles=[i,l],s=o([t("nord-navigation")],s);var c=s;export{c as default};
 //# sourceMappingURL=Navigation.js.map

package/lib/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Navigation.css\"\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n */\n@customElement(\"nord-navigation\")\nexport default class Navigation extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, \"header\")\n\n  render() {\n    return html`\n      <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n      <nav>\n        <slot></slot>\n      </nav>\n      <slot name=\"footer\"></slot>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-navigation\": Navigation\n  }\n}\n"],"names":["Navigation","LitElement","constructor","this","headerSlot","SlotController","render","html","isEmpty","styles","componentStyle","style","__decorate","customElement"],"mappings":"khDAoBA,IAAqBA,EAArB,cAAwCC,EAAxCC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,SAW/C,CATCG,SACE,OAAOC,CAAI,gCACqBJ,KAAKC,WAAWI,qEAMjD,GAZMR,EAAAS,OAAS,CAACC,EAAgBC,GADdX,EAAUY,EAAA,CAD9BC,EAAc,oBACMb,SAAAA"}
+{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Navigation.css\"\nimport NavItem from \"../nav-item/NavItem.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n *\n * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n */\n@customElement(\"nord-navigation\")\nexport default class Navigation extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, \"header\")\n  private events = new EventController(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n    // if we add this event listener during render\n    // we seem to miss the first activate event.\n    // so let's add it as early as possible.\n    this.events.listen(this, \"activate\", this.handleActivate)\n  }\n\n  render() {\n    return html`\n      <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n      <div class=\"n-navigation-main\">\n        <nav>\n          <slot></slot>\n        </nav>\n        <slot name=\"footer\"></slot>\n      </div>\n    `\n  }\n\n  private handleActivate = (e: Event) => {\n    const target = e.target as NavItem\n    const ancestors = new Set<NavItem>()\n\n    // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n    // it's more efficient to first gather ancestors here,\n    // than to repeatedly call item.contains(target) in the for-loop below.\n    let parent = target.parentElement?.closest(\"nord-nav-item\")\n    while (parent) {\n      ancestors.add(parent)\n      parent = parent.parentElement?.closest(\"nord-nav-item\")\n    }\n\n    // open and activate any items on the path, otherwise close and deactivate.\n    for (const item of this.querySelectorAll(\"nord-nav-item\")) {\n      if (item !== target) {\n        const isAncestor = ancestors.has(item)\n        item.open = isAncestor\n        item.active = isAncestor\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-navigation\": Navigation\n  }\n}\n"],"names":["Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","render","html","isEmpty","styles","componentStyle","style","__decorate","customElement"],"mappings":"+nFAwBA,IAAqBA,EAArB,cAAwCC,EAAxCC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,OAAS,IAAIC,EAAgBJ,MAsB7BA,KAAAK,eAAkBC,YACxB,MAAMC,EAASD,EAAEC,OACXC,EAAY,IAAIC,IAKtB,IAAIC,EAA6B,QAApBC,EAAAJ,EAAOK,qBAAa,IAAAD,OAAA,EAAAA,EAAEE,QAAQ,iBAC3C,KAAOH,GACLF,EAAUM,IAAIJ,GACdA,UAASK,EAAAL,EAAOE,oCAAeC,QAAQ,iBAIzC,IAAK,MAAMG,KAAQhB,KAAKiB,iBAAiB,iBACvC,GAAID,IAAST,EAAQ,CACnB,MAAMW,EAAaV,EAAUW,IAAIH,GACjCA,EAAKI,KAAOF,EACZF,EAAKK,OAASH,CACf,CACF,CAEJ,CA1CCI,oBACEC,MAAMD,oBAINtB,KAAKG,OAAOqB,OAAOxB,KAAM,WAAYA,KAAKK,eAC3C,CAEDoB,SACE,OAAOC,CAAI,gCACqB1B,KAAKC,WAAW0B,0GAQjD,GAvBM9B,EAAA+B,OAAS,CAACC,EAAgBC,GADdjC,EAAUkC,EAAA,CAD9BC,EAAc,oBACMnC,SAAAA"}

package/lib/Notification.js

@@ -1,2 +1,2 @@
-import{i,y as o,_ as n,e as t,s}from"./query-assigned-elements-cf502539.js";import{o as a}from"./class-map-21152cee.js";import{n as r}from"./ref-c44e9f3c.js";import"./Stack.js";import"./Icon.js";import{D as e}from"./DraftComponentMixin-9e4b7b34.js";import{N as c}from"./NotificationMixin-86b09bcd.js";import{s as l}from"./Component-449e40fb.js";import{LocalizeController as m}from"./LocalizeController.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";import"./if-defined-720964c0.js";import"./cond-2da54107.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./events-d9666e88.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";const d=i`:host{--_n-notification-focus-ring:0 0 0 2px var(--n-color-accent);--_n-notification-dismiss-size:calc(var(--n-space-m) * 2)}.n-notification{background:var(--n-color-surface-raised);box-shadow:var(--n-box-shadow-nav);padding-block-start:calc(var(--n-space-l)/ 1.2);padding-block-end:var(--n-space-l);padding-inline-start:calc(var(--n-space-l)/ 1.2);padding-inline-end:var(--n-space-m);border-radius:var(--n-border-radius);position:relative;animation:n-enter var(--n-transition-slowly) forwards 1}.n-notification-body{flex:1;padding-inline-end:var(--_n-notification-dismiss-size)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(10%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-dismiss{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--_n-notification-dismiss-size);inline-size:var(--_n-notification-dismiss-size);background-color:transparent;border-radius:var(--n-border-radius-s);color:var(--n-color-icon);cursor:pointer;transition:opacity var(--n-transition-slowly),color var(--n-transition-slowly);position:absolute;inset-inline-end:var(--n-space-m);inset-block-start:14px}.n-dismiss:hover{color:var(--n-color-text);background:rgba(0,0,0,.04)}.n-dismiss:active{opacity:.8;transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-notification-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-notification-focus-ring)}}::slotted(nord-icon),slot nord-icon{color:var(--n-color-text-link)!important;transform:translateY(3px) translateX(1px)!important}::slotted(:is(h1, h2, h3, h4, h5, h6)){color:var(--n-color-text)!important;font-size:var(--n-font-size-m)!important;line-height:var(--n-line-height)!important;margin:0 0 var(--n-space-s)!important;font-weight:var(--n-font-weight-active)!important}::slotted(p){margin:0!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;font-weight:var(--n-font-weight)!important}::slotted(a){color:var(--n-color-text-link)!important;text-decoration:none!important;margin:var(--n-space-s) 0 0!important;display:block}::slotted(a:hover){text-decoration:underline!important}`;let p=class extends(c(e(s))){constructor(){super(...arguments),this.localize=new m(this)}render(){return o`<div ${r(this.notificationRef)} class="${a({"n-notification":!0,"n-dismissed":this.dismissed})}"><button class="n-dismiss" @click="${this.dismiss}"><nord-icon name="interface-close-small" size="xs" label="${this.localize.term("dismissLabel")}"></nord-icon></button><nord-stack align-items="stretch" direction="horizontal"><slot name="icon"><nord-icon name="navigation-notifications"></nord-icon></slot><div class="n-notification-body"><slot></slot></div></nord-stack></div>`}};p.styles=[l,d],p=n([t("nord-notification")],p);var f=p;export{f as default};
+import{i as o,x as i,_ as t,e as n,s as a}from"./query-assigned-elements-2f8275b7.js";import{o as r}from"./class-map-4a0dec4a.js";import{n as s}from"./ref-f75a30b7.js";import"./Stack.js";import"./Icon.js";import{D as e}from"./DraftComponentMixin-9e4b7b34.js";import{N as c}from"./NotificationMixin-cea138a7.js";import{s as l}from"./Component-253ecb24.js";import{LocalizeController as m}from"./LocalizeController.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";import"./if-defined-10508457.js";import"./cond-77258def.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./events-d9666e88.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";const d=o`:host{--_n-notification-focus-ring:0 0 0 2px var(--n-color-accent);--_n-notification-dismiss-size:calc(var(--n-space-m) * 2)}.n-notification{color:var(--n-color-text-weaker);background:var(--n-color-surface-raised);box-shadow:var(--n-box-shadow-nav);padding-block-start:calc(var(--n-space-l)/ 1.2);padding-block-end:var(--n-space-l);padding-inline-start:calc(var(--n-space-l)/ 1.2);padding-inline-end:var(--n-space-m);border-radius:var(--n-border-radius);position:relative;animation:n-enter var(--n-transition-slowly) forwards 1}.n-notification-body{flex:1;padding-inline-end:var(--_n-notification-dismiss-size)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(10%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-dismiss{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--_n-notification-dismiss-size);inline-size:var(--_n-notification-dismiss-size);background-color:transparent;border-radius:var(--n-border-radius-s);color:var(--n-color-icon);cursor:pointer;transition:opacity var(--n-transition-slowly),color var(--n-transition-slowly);position:absolute;inset-inline-end:var(--n-space-m);inset-block-start:14px}.n-dismiss:hover{color:var(--n-color-text);background:rgba(0,0,0,.04)}.n-dismiss:active{opacity:.8;transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-notification-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-notification-focus-ring)}}::slotted(nord-icon),slot nord-icon{color:var(--n-color-text-link)!important;transform:translateY(3px) translateX(1px)!important}::slotted(:is(h1, h2, h3, h4, h5, h6)){color:var(--n-color-text)!important;font-size:var(--n-font-size-m)!important;line-height:var(--n-line-height)!important;margin:0 0 var(--n-space-s)!important;font-weight:var(--n-font-weight-active)!important;font-style:normal!important}::slotted(p){margin:0!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;font-weight:var(--n-font-weight)!important;font-style:normal!important}::slotted(a){color:var(--n-color-text-link)!important;text-decoration:none!important;margin:var(--n-space-s) 0 0!important;font-weight:var(--n-font-weight)!important;font-style:normal!important;display:block}::slotted(a:hover){text-decoration:underline!important}`;let p=class extends(c(e(a))){constructor(){super(...arguments),this.localize=new m(this)}render(){return i`<div ${s(this.notificationRef)} class="${r({"n-notification":!0,"n-dismissed":this.dismissed})}"><button class="n-dismiss" @click="${this.dismiss}"><nord-icon name="interface-close-small" size="xs" label="${this.localize.term("dismissLabel")}"></nord-icon></button><nord-stack align-items="stretch" direction="horizontal"><slot name="icon"><nord-icon name="navigation-notifications"></nord-icon></slot><div class="n-notification-body"><slot></slot></div></nord-stack></div>`}};p.styles=[l,d],p=t([n("nord-notification")],p);var f=p;export{f as default};
 //# sourceMappingURL=Notification.js.map

package/lib/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../src/notification/Notification.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport \"../stack/Stack.js\"\nimport \"../icon/Icon.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { NotificationMixin } from \"../common/mixins/NotificationMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Notification.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\n/**\n * Notifications provide important information that requires action or acknowledgement.\n * A notification is displayed until the user dismisses it.\n *\n * @status draft\n * @category feedback\n * @slot - Default slot used for the notification text/message.\n * @slot icon - Slot used for the notification icon.\n * @fires dismiss - Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.\n * @localization dismissLabel - Accessible label for the dismiss button.\n */\n@customElement(\"nord-notification\")\nexport default class Notification extends NotificationMixin(DraftComponentMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<\"nord-notification\">(this)\n\n  render() {\n    return html`\n      <div ${ref(this.notificationRef)} class=${classMap({ \"n-notification\": true, \"n-dismissed\": this.dismissed })}>\n        <button class=\"n-dismiss\" @click=${this.dismiss}>\n          <nord-icon name=\"interface-close-small\" size=\"xs\" label=${this.localize.term(\"dismissLabel\")}></nord-icon>\n        </button>\n\n        <nord-stack align-items=\"stretch\" direction=\"horizontal\">\n          <slot name=\"icon\">\n            <nord-icon name=\"navigation-notifications\"></nord-icon>\n          </slot>\n          <div class=\"n-notification-body\">\n            <slot></slot>\n          </div>\n        </nord-stack>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-notification\": Notification\n  }\n}\n"],"names":["Notification","NotificationMixin","DraftComponentMixin","LitElement","constructor","this","localize","LocalizeController","render","html","ref","notificationRef","classMap","dismissed","dismiss","term","styles","componentStyle","style","__decorate","customElement"],"mappings":"mlGAyBA,IAAqBA,EAArB,cAA0CC,EAAkBC,EAAoBC,KAAhFC,kCAGUC,KAAAC,SAAW,IAAIC,EAAwCF,KAoBhE,CAlBCG,SACE,OAAOC,CAAI,QACFC,EAAIL,KAAKM,2BAA0BC,EAAS,CAAE,kBAAkB,EAAM,cAAeP,KAAKQ,kDAC5DR,KAAKS,qEACoBT,KAAKC,SAASS,KAAK,wPAapF,GArBMf,EAAAgB,OAAS,CAACC,EAAgBC,GADdlB,EAAYmB,EAAA,CADhCC,EAAc,sBACMpB,SAAAA"}
+{"version":3,"file":"Notification.js","sources":["../src/notification/Notification.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport \"../stack/Stack.js\"\nimport \"../icon/Icon.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { NotificationMixin } from \"../common/mixins/NotificationMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Notification.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\n/**\n * Notifications provide important information that requires action or acknowledgement.\n * A notification is displayed until the user dismisses it.\n *\n * @status draft\n * @category feedback\n * @slot - Default slot used for the notification text/message.\n * @slot icon - Slot used for the notification icon.\n * @fires dismiss - Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.\n * @localization dismissLabel - Accessible label for the dismiss button.\n */\n@customElement(\"nord-notification\")\nexport default class Notification extends NotificationMixin(DraftComponentMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<\"nord-notification\">(this)\n\n  render() {\n    return html`\n      <div ${ref(this.notificationRef)} class=${classMap({ \"n-notification\": true, \"n-dismissed\": this.dismissed })}>\n        <button class=\"n-dismiss\" @click=${this.dismiss}>\n          <nord-icon name=\"interface-close-small\" size=\"xs\" label=${this.localize.term(\"dismissLabel\")}></nord-icon>\n        </button>\n\n        <nord-stack align-items=\"stretch\" direction=\"horizontal\">\n          <slot name=\"icon\">\n            <nord-icon name=\"navigation-notifications\"></nord-icon>\n          </slot>\n          <div class=\"n-notification-body\">\n            <slot></slot>\n          </div>\n        </nord-stack>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-notification\": Notification\n  }\n}\n"],"names":["Notification","NotificationMixin","DraftComponentMixin","LitElement","constructor","this","localize","LocalizeController","render","html","ref","notificationRef","classMap","dismissed","dismiss","term","styles","componentStyle","style","__decorate","customElement"],"mappings":"6vGAyBA,IAAqBA,EAArB,cAA0CC,EAAkBC,EAAoBC,KAAhFC,kCAGUC,KAAAC,SAAW,IAAIC,EAAwCF,KAoBhE,CAlBCG,SACE,OAAOC,CAAI,QACFC,EAAIL,KAAKM,2BAA0BC,EAAS,CAAE,kBAAkB,EAAM,cAAeP,KAAKQ,kDAC5DR,KAAKS,qEACoBT,KAAKC,SAASS,KAAK,wPAapF,GArBMf,EAAAgB,OAAS,CAACC,EAAgBC,GADdlB,EAAYmB,EAAA,CADhCC,EAAc,sBACMpB,SAAAA"}

package/lib/NotificationGroup.js

@@ -1,2 +1,2 @@
-import{i as n,y as i,_ as e,e as t,s as o}from"./query-assigned-elements-cf502539.js";import{D as a}from"./DraftComponentMixin-9e4b7b34.js";import{s}from"./Component-449e40fb.js";const r=n`:host{--_n-notification-group-mask:linear-gradient(black 95%, transparent 100%);position:fixed;inset-inline-end:var(--_n-layout-drawer-size,0);inset-block-start:var(--_n-layout-header-size,0);inset-block-end:0;-webkit-mask-image:var(--_n-notification-group-mask);mask-image:var(--_n-notification-group-mask)}.n-notification-group{display:flex;flex-direction:column;align-items:end;gap:var(--n-space-m);z-index:var(--n-index-modal);margin:var(--n-space-m);pointer-events:none}::slotted(nord-notification){pointer-events:auto;inline-size:100%;max-inline-size:400px}`;let l=class extends(a(o)){render(){return i`<div class="n-notification-group"><slot></slot></div>`}};l.styles=[s,r],l=e([t("nord-notification-group")],l);var m=l;export{m as default};
+import{i as n,x as i,_ as e,e as t,s as o}from"./query-assigned-elements-2f8275b7.js";import{D as a}from"./DraftComponentMixin-9e4b7b34.js";import{s}from"./Component-253ecb24.js";const r=n`:host{--_n-notification-group-mask:linear-gradient(black 95%, transparent 100%);position:fixed;inset-inline-end:0;inset-block-start:0;inset-block-end:0;z-index:var(--n-index-modal);-webkit-mask-image:var(--_n-notification-group-mask);mask-image:var(--_n-notification-group-mask);pointer-events:none}.n-notification-group{display:flex;flex-direction:column;align-items:end;gap:var(--n-space-m);margin:var(--n-space-m)}::slotted(nord-notification){pointer-events:auto;inline-size:100%;max-inline-size:400px}`;let m=class extends(a(o)){render(){return i`<div class="n-notification-group"><slot></slot></div>`}};m.styles=[s,r],m=e([t("nord-notification-group")],m);var l=m;export{l as default};
 //# sourceMappingURL=NotificationGroup.js.map

package/lib/NotificationGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationGroup.js","sources":["../src/notification-group/NotificationGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NotificationGroup.css\"\n\n/**\n * Notification group is used to position and style a group of notifications.\n *\n * @status draft\n * @category feedback\n * @slot - Default slot in which to place notifications.\n */\n@customElement(\"nord-notification-group\")\nexport default class NotificationGroup extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <div class=\"n-notification-group\">\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-notification-group\": NotificationGroup\n  }\n}\n"],"names":["NotificationGroup","DraftComponentMixin","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"kvBAeA,IAAqBA,EAArB,cAA+CC,EAAoBC,IAGjEC,SACE,OAAOC,CAAI,uDAKZ,GARMJ,EAAAK,OAAS,CAACC,EAAgBC,GADdP,EAAiBQ,EAAA,CADrCC,EAAc,4BACMT,SAAAA"}
+{"version":3,"file":"NotificationGroup.js","sources":["../src/notification-group/NotificationGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NotificationGroup.css\"\n\n/**\n * Notification group is used to position and style a group of notifications.\n *\n * @status draft\n * @category feedback\n * @slot - Default slot in which to place notifications.\n */\n@customElement(\"nord-notification-group\")\nexport default class NotificationGroup extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <div class=\"n-notification-group\">\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-notification-group\": NotificationGroup\n  }\n}\n"],"names":["NotificationGroup","DraftComponentMixin","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"wrBAeA,IAAqBA,EAArB,cAA+CC,EAAoBC,IAGjEC,SACE,OAAOC,CAAI,uDAKZ,GARMJ,EAAAK,OAAS,CAACC,EAAgBC,GADdP,EAAiBQ,EAAA,CADrCC,EAAc,4BACMT,SAAAA"}

package/lib/{NotificationMixin-86b09bcd.js → NotificationMixin-cea138a7.js}

@@ -1,2 +1,2 @@
-import{_ as s}from"./query-assigned-elements-cf502539.js";import{t as i}from"./state-70f38ceb.js";import{e as t}from"./ref-c44e9f3c.js";import{a as e,N as o}from"./events-d9666e88.js";function a(a){class n extends a{constructor(){super(...arguments),this.notificationRef=t(),this.dismissed=!1}async dismiss(){this.notificationRef.value&&(this.dismissed=!0,await e(this.notificationRef.value),this.dispatchEvent(new o("dismiss")))}}return s([i()],n.prototype,"dismissed",void 0),n}export{a as N};
-//# sourceMappingURL=NotificationMixin-86b09bcd.js.map
+import{_ as s}from"./query-assigned-elements-2f8275b7.js";import{t as i}from"./state-70f38ceb.js";import{e as t}from"./ref-f75a30b7.js";import{a as e,N as o}from"./events-d9666e88.js";function a(a){class n extends a{constructor(){super(...arguments),this.notificationRef=t(),this.dismissed=!1}async dismiss(){this.notificationRef.value&&(this.dismissed=!0,await e(this.notificationRef.value),this.dispatchEvent(new o("dismiss")))}}return s([i()],n.prototype,"dismissed",void 0),n}export{a as N};
+//# sourceMappingURL=NotificationMixin-cea138a7.js.map

package/lib/{NotificationMixin-86b09bcd.js.map → NotificationMixin-cea138a7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NotificationMixin-86b09bcd.js","sources":["../src/common/mixins/NotificationMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { state } from \"lit/decorators.js\"\nimport type { Ref } from \"lit/directives/ref.js\"\nimport { createRef } from \"lit/directives/ref.js\"\nimport { animation, NordEvent } from \"../events.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class NotificationMixinInterface {\n  protected dismissed: boolean\n  protected notificationRef: Ref<HTMLElement>\n  dismiss(): Promise<void>\n}\n\nexport function NotificationMixin<T extends Constructor<LitElement>>(\n  superClass: T\n): Constructor<NotificationMixinInterface> & T {\n  class NotificationElement extends superClass {\n    protected notificationRef = createRef<HTMLElement>()\n\n    @state() protected dismissed = false\n\n    /**\n     * Programmatically dismiss the notification.\n     * The returned promise resolves when notification's exit animation is complete.\n     */\n    async dismiss() {\n      if (this.notificationRef.value) {\n        this.dismissed = true\n        await animation(this.notificationRef.value)\n        this.dispatchEvent(new NordEvent(\"dismiss\"))\n      }\n    }\n  }\n\n  return NotificationElement as unknown as Constructor<NotificationMixinInterface> & T\n}\n"],"names":["NotificationMixin","superClass","NotificationElement","constructor","this","notificationRef","createRef","dismissed","async","value","animation","dispatchEvent","NordEvent","__decorate","state","prototype"],"mappings":"wLAeM,SAAUA,EACdC,GAEA,MAAMC,UAA4BD,EAAlCE,kCACYC,KAAeC,gBAAGC,IAETF,KAASG,WAAG,CAahC,CAPCC,gBACMJ,KAAKC,gBAAgBI,QACvBL,KAAKG,WAAY,QACXG,EAAUN,KAAKC,gBAAgBI,OACrCL,KAAKO,cAAc,IAAIC,EAAU,YAEpC,EAGH,OAfWC,EAAA,CAARC,KAAmCZ,EAAAa,UAAA,iBAAA,GAe/Bb,CACT"}
+{"version":3,"file":"NotificationMixin-cea138a7.js","sources":["../src/common/mixins/NotificationMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { state } from \"lit/decorators.js\"\nimport type { Ref } from \"lit/directives/ref.js\"\nimport { createRef } from \"lit/directives/ref.js\"\nimport { animation, NordEvent } from \"../events.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class NotificationMixinInterface {\n  protected dismissed: boolean\n  protected notificationRef: Ref<HTMLElement>\n  dismiss(): Promise<void>\n}\n\nexport function NotificationMixin<T extends Constructor<LitElement>>(\n  superClass: T\n): Constructor<NotificationMixinInterface> & T {\n  class NotificationElement extends superClass {\n    protected notificationRef = createRef<HTMLElement>()\n\n    @state() protected dismissed = false\n\n    /**\n     * Programmatically dismiss the notification.\n     * The returned promise resolves when notification's exit animation is complete.\n     */\n    async dismiss() {\n      if (this.notificationRef.value) {\n        this.dismissed = true\n        await animation(this.notificationRef.value)\n        this.dispatchEvent(new NordEvent(\"dismiss\"))\n      }\n    }\n  }\n\n  return NotificationElement as unknown as Constructor<NotificationMixinInterface> & T\n}\n"],"names":["NotificationMixin","superClass","NotificationElement","constructor","this","notificationRef","createRef","dismissed","async","value","animation","dispatchEvent","NordEvent","__decorate","state","prototype"],"mappings":"wLAeM,SAAUA,EACdC,GAEA,MAAMC,UAA4BD,EAAlCE,kCACYC,KAAeC,gBAAGC,IAETF,KAASG,WAAG,CAahC,CAPCC,gBACMJ,KAAKC,gBAAgBI,QACvBL,KAAKG,WAAY,QACXG,EAAUN,KAAKC,gBAAgBI,OACrCL,KAAKO,cAAc,IAAIC,EAAU,YAEpC,EAGH,OAfqBC,EAAA,CAAlBC,KAAmCZ,EAAAa,UAAA,iBAAA,GAe/Bb,CACT"}