@nordhealth/components 4.26.2 → 5.0.0-alpha.0

package/lib/ModalController.js.map

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

package/lib/NavGroup.js

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

package/lib/NavGroup.js.map

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

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,nothing as a,LitElement as i}from"lit";import{query as o,state as r,property as s,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{ref as v}from"lit/directives/ref.js";import{D as c}from"./DirectionController-ChvNGESZ.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import{o as h}from"./observe-D0n0zOfU.js";import{c as b}from"./cond-CI1KbneT.js";import{N as u}from"./events-Bv6wNHwJ.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{s as g}from"./Component-DSU3Qp0O.js";import"./Popout-CYqn_dZu.js";import"./Tooltip.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./fsm-Bq5jMQrK.js";const f=e`:host{--_n-nav-item-box-shadow:none;--n-nav-item-color:var(--n-color-text-weak);--n-nav-item-background:transparent;--n-nav-item-border-radius:var(--n-border-radius-s);--n-nav-item-padding-block:var(--n-space-s);--n-nav-item-padding-inline:var(--n-space-s);--n-nav-item-line-height:var(--n-line-height-tight);--n-nav-item-icon-gap:calc(var(--n-space-s) * 1.4);--n-nav-item-color-hover:var(--n-color-text);--n-nav-item-background-hover:var(--n-color-nav-hover);--n-nav-item-color-active:var(--n-color-text-on-accent);--n-nav-item-background-active:var(--n-color-accent);--n-nav-item-color-expanded:var(--n-color-text-weak);--n-nav-item-background-expanded:var(--n-color-accent);--n-nav-item-expanded-overlay-opacity:0.12;--n-nav-item-expanded-overlay-filter:brightness(150%)}.n-nav-item{user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-nav-item-line-height);appearance:none;color:var(--n-nav-item-color);padding-block-start:var(--n-nav-item-padding-block);padding-block-end:var(--n-nav-item-padding-block);padding-inline-start:var(--n-nav-item-padding-inline);padding-inline-end:var(--n-nav-item-padding-inline);min-block-size:32px;margin-block-end:1px;border-radius:var(--n-nav-item-border-radius);text-decoration:none;inline-size:100%;max-inline-size:100%;background:var(--n-nav-item-background);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-nav-item-background-hover);color:var(--n-nav-item-color-hover)}.n-nav-item:active{opacity:.7}.n-nav-content{display:flex;align-items:center;flex:1;min-inline-size:0}.n-nav-label{flex:1;min-inline-size:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-nav-item-background-active);color:var(--n-nav-item-color-active);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-nav-item-color-expanded);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-nav-item-border-radius);block-size:100%;inline-size:100%;opacity:var(--n-nav-item-expanded-overlay-opacity);background:var(--n-nav-item-background-expanded);filter:var(--n-nav-item-expanded-overlay-filter)}.n-nav-icon{margin-inline-end:var(--n-nav-item-icon-gap);flex-shrink:0}slot.n-nav-icon{display:inline-flex;align-items:center}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-rail-host{position:relative}.n-rail-item{--_n-rail-size:32px;inline-size:var(--_n-rail-size);min-inline-size:var(--_n-rail-size);block-size:var(--_n-rail-size);padding:0;justify-content:center}.n-rail-item .n-nav-icon{margin-inline-end:0}.n-rail-fallback{font-weight:var(--n-font-weight-active)}.n-rail-subnav-indicator{position:absolute;inset-block-end:calc(var(--n-space-xs)/ 2);inset-inline-end:calc(var(--n-space-xs)/ 2);inline-size:5px;block-size:5px;color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong));pointer-events:none}.n-rtl .n-rail-subnav-indicator{transform:scaleX(-1)}.n-rail-host:hover .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong))}.n-rail-host:has(nord-popout[open]) .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color-active,var(--n-color-border-hover))}.n-rail-host:has(nord-popout[open]) .n-rail-item{background:var(--n-nav-item-background-expanded)}.n-nav-badge.n-rail-badge{position:absolute;inset-block-start:3px;inset-inline-end:2px;margin:0;padding:0;min-inline-size:var(--n-rail-badge-size,5px);inline-size:var(--n-rail-badge-size,5px);block-size:var(--n-rail-badge-size,5px);font-size:0;color:transparent;overflow:hidden}.n-rail-slotted-end{position:absolute;inset-block-start:0;inset-inline-end:8px;pointer-events:none}.n-rail-flyout-body{min-inline-size:var(--n-rail-flyout-min-inline-size,220px);padding:var(--n-rail-flyout-padding,var(--n-space-s));background:var(--n-rail-flyout-background,var(--n-color-surface));border-radius:var(--n-border-radius-s);box-shadow:var(--n-rail-flyout-box-shadow,var(--n-box-shadow-popout))}.n-rail-host nord-popout{--n-popout-background:transparent;--n-popout-box-shadow:none;transform:translate(var(--n-rail-flyout-offset-inline,0),var(--n-rail-flyout-offset-block,0))}.n-rtl .n-rail-host nord-popout{transform:translate(calc(var(--n-rail-flyout-offset-inline,0) * -1),var(--n-rail-flyout-offset-block,0))}.n-rail-flyout-body ::slotted(nord-nav-group){margin-inline-start:0}.n-nav-badge{display:inline-block;margin-inline-start:var(--n-nav-badge-margin-inline-start,var(--n-space-xs));border-radius:var(--n-nav-badge-border-radius,var(--n-border-radius-pill));background:var(--n-nav-badge-background,var(--n-color-status-notification));color:var(--n-nav-badge-color,#fff);font-weight:var(--n-nav-badge-font-weight,var(--n-font-weight));font-feature-settings:var(--n-font-features-reduced);padding-block-start:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-block-end:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-inline-start:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/ 2));padding-inline-end:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/ 2));text-align:center;min-inline-size:var(--n-nav-badge-min-inline-size,20px);font-size:var(--n-nav-badge-font-size,var(--n-font-size-xs));line-height:var(--n-nav-badge-line-height,1)}`;let x=0,y=0;const k="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let w=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new p(this,"subnav"),this.iconSlot=new p(this,"icon"),this.railTooltipSlot=new p(this,"rail-tooltip"),this.direction=new c(this),this.tooltipId="n-nav-rail-tip-"+ ++x,this.popoutId="n-nav-rail-pop-"+ ++y,this.railCollapsed=!1,this.active=!1,this.open=!1,this.handleViewportChange=()=>this.updateRailState()}get hasSubNav(){return this.subnavSlot.hasContent}connectedCallback(){super.connectedCallback(),this.startObservingLayout(),k.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingLayout(),k.removeEventListener("change",this.handleViewportChange)}startObservingLayout(){this.observedLayout=this.closest("nord-layout"),this.observedLayout&&(this.updateRailState(),this.layoutObserver=new MutationObserver((()=>this.updateRailState())),this.layoutObserver.observe(this.observedLayout,{attributes:!0,attributeFilter:["nav-open","collapse-mode"]}))}stopObservingLayout(){var n,e;null===(n=this.layoutObserver)||void 0===n||n.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.railCollapsed=!1,null===(e=this.popoutEl)||void 0===e||e.hide()}updateRailState(){var n,e;if(!this.observedLayout)return;const t=!!!(null===(n=this.parentElement)||void 0===n?void 0:n.closest("nord-nav-item"))&&k.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");t||null===(e=this.popoutEl)||void 0===e||e.hide(),this.railCollapsed=t}render(){if(this.railCollapsed)return this.renderRail();const n=t`${this.renderLeadingIcon()}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:a}<slot name="end"></slot></div>`;let e;return e=this.subnavSlot.hasContent?this.renderToggle(n):this.href?this.renderLink(n):this.renderButton(n),t`<div role="listitem">${e}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLeadingIcon(){return this.iconSlot.hasContent?t`<slot name="icon" class="n-nav-icon"></slot>`:this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}renderRail(){const n=this.renderLeadingIcon(),e=n===a?t`<span class="n-rail-fallback">${this.textInitial}</span>`:n,i=this.badge?t`<span class="n-nav-badge n-rail-badge">${this.badge}</span>`:a;return this.subnavSlot.hasContent?this.renderRailFlyout(e,i):t`<div role="listitem" class="n-rail-host">${this.href?t`<a class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-current="${b(this.active,"page")}" aria-describedby="${this.tooltipId}" href="${this.href}">${e}${i}</a>`:t`<button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-describedby="${this.tooltipId}">${e}${i}</button>`}<slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip></div>`}renderRailFlyout(n,e){return t`<div role="listitem" class="n-rail-host"><button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-controls="${this.popoutId}" aria-describedby="${this.tooltipId}">${n}${e} <svg class="n-rail-subnav-indicator" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="5" height="5" viewBox="0 0 5 5" fill="none"><path d="M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z" fill="currentColor"/></svg></button><slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip><nord-popout id="${this.popoutId}" position="inline-end" always-floating><div class="n-rail-flyout-body"><slot name="${this.subnavSlot.slotName}"></slot></div></nord-popout></div>`}get textInitial(){var n,e;return(null!==(e=null===(n=this.textContent)||void 0===n?void 0:n.trim())&&void 0!==e?e:"").charAt(0).toUpperCase()}renderLink(n){return t`<a class="n-nav-item" ${v(this.focusableRef)} aria-current="${b(this.active,"page")}" href="${this.href||""}">${n}</a>`}renderToggle(n){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${v(this.focusableRef)}>${n}<nord-icon size="xxs" class="${d({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(n){return t`<button class="n-nav-item" ${v(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new u("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new u("activate"))}};w.styles=[g,f],n([o("nord-popout")],w.prototype,"popoutEl",void 0),n([r()],w.prototype,"railCollapsed",void 0),n([s({type:Boolean,reflect:!0})],w.prototype,"active",void 0),n([s({reflect:!0})],w.prototype,"icon",void 0),n([s({reflect:!0})],w.prototype,"href",void 0),n([s({reflect:!0})],w.prototype,"badge",void 0),n([s({reflect:!0,type:Boolean})],w.prototype,"open",void 0),n([h("active","updated")],w.prototype,"handleActiveChange",null),w=n([l("nord-nav-item")],w);var $=w;export{$ as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,nothing as a,LitElement as i}from"lit";import{query as o,state as r,property as s,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{ref as v}from"lit/directives/ref.js";import{D as c}from"./DirectionController-ChvNGESZ.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import{o as h}from"./observe-D0n0zOfU.js";import{c as u}from"./cond-CI1KbneT.js";import{N as b}from"./events-Bv6wNHwJ.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{s as g}from"./Component-BJ5O5n8k.js";import"./Popout-DpN7PP9h.js";import"./Tooltip.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./fsm-Bq5jMQrK.js";const f=e`:host{--_n-nav-item-box-shadow:none;--n-nav-item-color:var(--n-color-text-weak);--n-nav-item-background:#0000;--n-nav-item-border-radius:var(--n-border-radius-s);--n-nav-item-padding-block:var(--n-space-s);--n-nav-item-padding-inline:var(--n-space-s);--n-nav-item-line-height:var(--n-line-height-tight);--n-nav-item-icon-gap:calc(var(--n-space-s)*1.4);--n-nav-item-color-hover:var(--n-color-text);--n-nav-item-background-hover:var(--n-color-nav-hover);--n-nav-item-color-active:var(--n-color-text-on-accent);--n-nav-item-background-active:var(--n-color-accent);--n-nav-item-color-expanded:var(--n-color-text-weak);--n-nav-item-background-expanded:var(--n-color-accent);--n-nav-item-expanded-overlay-opacity:0.12;--n-nav-item-expanded-overlay-filter:brightness(150%)}.n-nav-item{align-items:center;appearance:none;background:var(--n-nav-item-background);border:0;border-radius:var(--n-nav-item-border-radius);box-shadow:var(--_n-nav-item-box-shadow);color:var(--n-nav-item-color);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;inline-size:100%;line-height:var(--n-nav-item-line-height);margin-block-end:1px;max-inline-size:100%;min-block-size:32px;padding-block-end:var(--n-nav-item-padding-block);padding-block-start:var(--n-nav-item-padding-block);padding-inline-end:var(--n-nav-item-padding-inline);padding-inline-start:var(--n-nav-item-padding-inline);position:relative;text-align:start;text-decoration:none;user-select:none;z-index:var(--n-index-default)}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:none;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-nav-item-background-hover);color:var(--n-nav-item-color-hover)}.n-nav-item:active{opacity:.7}.n-nav-content{align-items:center;display:flex;flex:1;min-inline-size:0}.n-nav-label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:none;background:var(--n-nav-item-background-active);color:var(--n-nav-item-color-active);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=true]{--_n-nav-item-box-shadow:none;background:#0000;color:var(--n-nav-item-color-expanded);font-weight:var(--n-font-weight)}:host([active]) .n-nav-item[aria-expanded=true]:hover{color:var(--n-nav-item-color-hover)}:host([active]) .n-nav-item[aria-expanded=true]: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=true]:after{background:var(--n-nav-item-background-expanded);block-size:100%;border-radius:var(--n-nav-item-border-radius);content:"";filter:var(--n-nav-item-expanded-overlay-filter);inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:var(--n-nav-item-expanded-overlay-opacity);position:absolute;z-index:var(--n-index-deep)}:host([active]) .n-rail-host .n-nav-item[aria-expanded=true]:after{background:var(--n-nav-item-background-active)}.n-nav-icon{flex-shrink:0;margin-inline-end:var(--n-nav-item-icon-gap)}slot.n-nav-icon{align-items:center;display:inline-flex}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + var(--n-space-s)*1.3)}.n-rail-host{--n-nav-item-expanded-overlay-opacity:1;--n-nav-item-expanded-overlay-filter:none;position:relative}.n-rail-item{--_n-rail-size:32px;block-size:var(--_n-rail-size);inline-size:var(--_n-rail-size);justify-content:center;min-inline-size:var(--_n-rail-size);padding:0}.n-rail-item .n-nav-icon{margin-inline-end:0}.n-rail-fallback{font-weight:var(--n-font-weight-active)}.n-rail-subnav-indicator{block-size:5px;color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong));inline-size:5px;inset-block-end:calc(var(--n-space-xs)/2);inset-inline-end:calc(var(--n-space-xs)/2);pointer-events:none;position:absolute}.n-rtl .n-rail-subnav-indicator{transform:scaleX(-1)}.n-rail-host:hover .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong))}.n-rail-host:has(nord-popout[open]) .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color-active,var(--n-color-border-hover))}.n-rail-host:has(nord-popout[open]) .n-rail-item{background:var(--n-nav-item-background-expanded)}.n-nav-badge.n-rail-badge{block-size:var(--n-rail-badge-size,5px);color:#0000;font-size:0;inline-size:var(--n-rail-badge-size,5px);inset-block-start:3px;inset-inline-end:2px;margin:0;min-inline-size:var(--n-rail-badge-size,5px);overflow:hidden;padding:0;position:absolute}.n-rail-slotted-end{inset-block-start:0;inset-inline-end:8px;pointer-events:none;position:absolute}.n-rail-flyout-body{background:var(--n-rail-flyout-background,var(--n-color-surface));border-radius:var(--n-border-radius-s);box-shadow:var(--n-rail-flyout-box-shadow,var(--n-box-shadow-popout));min-inline-size:var(--n-rail-flyout-min-inline-size,220px);padding:var(--n-rail-flyout-padding,var(--n-space-s))}.n-rail-host nord-popout{--n-popout-background:#0000;--n-popout-box-shadow:none;transform:translate(var(--n-rail-flyout-offset-inline,0),var(--n-rail-flyout-offset-block,0))}.n-rtl .n-rail-host nord-popout{transform:translate(calc(var(--n-rail-flyout-offset-inline, 0)*-1),var(--n-rail-flyout-offset-block,0))}.n-rail-flyout-body ::slotted(nord-nav-group){margin-inline-start:0}.n-nav-badge{background:var(--n-nav-badge-background,var(--n-color-status-notification));border-radius:var(--n-nav-badge-border-radius,var(--n-border-radius-pill));color:var(--n-nav-badge-color,#fff);display:inline-block;font-feature-settings:var(--n-font-features-reduced);font-size:var(--n-nav-badge-font-size,var(--n-font-size-xs));font-weight:var(--n-nav-badge-font-weight,var(--n-font-weight));line-height:var(--n-nav-badge-line-height,1);margin-inline-start:var(--n-nav-badge-margin-inline-start,var(--n-space-xs));min-inline-size:var(--n-nav-badge-min-inline-size,20px);padding-block-end:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-block-start:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-inline-end:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/2));padding-inline-start:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/2));text-align:center}`;let x=0,y=0;const k="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let w=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new p(this,"subnav"),this.iconSlot=new p(this,"icon"),this.railTooltipSlot=new p(this,"rail-tooltip"),this.direction=new c(this),this.tooltipId="n-nav-rail-tip-"+ ++x,this.popoutId="n-nav-rail-pop-"+ ++y,this.railCollapsed=!1,this.active=!1,this.open=!1,this.handleViewportChange=()=>this.updateRailState()}get hasSubNav(){return this.subnavSlot.hasContent}connectedCallback(){super.connectedCallback(),this.startObservingLayout(),k.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingLayout(),k.removeEventListener("change",this.handleViewportChange)}startObservingLayout(){this.observedLayout=this.closest("nord-layout"),this.observedLayout&&(this.updateRailState(),this.layoutObserver=new MutationObserver((()=>this.updateRailState())),this.layoutObserver.observe(this.observedLayout,{attributes:!0,attributeFilter:["nav-open","collapse-mode"]}))}stopObservingLayout(){var n,e;null===(n=this.layoutObserver)||void 0===n||n.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.railCollapsed=!1,null===(e=this.popoutEl)||void 0===e||e.hide()}updateRailState(){var n,e;if(!this.observedLayout)return;const t=!!!(null===(n=this.parentElement)||void 0===n?void 0:n.closest("nord-nav-item"))&&k.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");t||null===(e=this.popoutEl)||void 0===e||e.hide(),this.railCollapsed=t}render(){if(this.railCollapsed)return this.renderRail();const n=t`${this.renderLeadingIcon()}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:a}<slot name="end"></slot></div>`;let e;return e=this.subnavSlot.hasContent?this.renderToggle(n):this.href?this.renderLink(n):this.renderButton(n),t`<div role="listitem">${e}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLeadingIcon(){return this.iconSlot.hasContent?t`<slot name="icon" class="n-nav-icon"></slot>`:this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}renderRail(){const n=this.renderLeadingIcon(),e=n===a?t`<span class="n-rail-fallback">${this.textInitial}</span>`:n,i=this.badge?t`<span class="n-nav-badge n-rail-badge">${this.badge}</span>`:a;return this.subnavSlot.hasContent?this.renderRailFlyout(e,i):t`<div role="listitem" class="n-rail-host">${this.href?t`<a class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-current="${u(this.active,"page")}" aria-describedby="${this.tooltipId}" href="${this.href}">${e}${i}</a>`:t`<button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-describedby="${this.tooltipId}">${e}${i}</button>`}<slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip></div>`}renderRailFlyout(n,e){return t`<div role="listitem" class="n-rail-host"><button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-controls="${this.popoutId}" aria-describedby="${this.tooltipId}">${n}${e} <svg class="n-rail-subnav-indicator" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="5" height="5" viewBox="0 0 5 5" fill="none"><path d="M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z" fill="currentColor"/></svg></button><slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip><nord-popout id="${this.popoutId}" position="inline-end" always-floating><div class="n-rail-flyout-body"><slot name="${this.subnavSlot.slotName}"></slot></div></nord-popout></div>`}get textInitial(){var n,e;return(null!==(e=null===(n=this.textContent)||void 0===n?void 0:n.trim())&&void 0!==e?e:"").charAt(0).toUpperCase()}renderLink(n){return t`<a class="n-nav-item" ${v(this.focusableRef)} aria-current="${u(this.active,"page")}" href="${this.href||""}">${n}</a>`}renderToggle(n){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${v(this.focusableRef)}>${n}<nord-icon size="xxs" class="${d({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(n){return t`<button class="n-nav-item" ${v(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new b("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new b("activate"))}};w.styles=[g,f],n([o("nord-popout")],w.prototype,"popoutEl",void 0),n([r()],w.prototype,"railCollapsed",void 0),n([s({type:Boolean,reflect:!0})],w.prototype,"active",void 0),n([s({reflect:!0})],w.prototype,"icon",void 0),n([s({reflect:!0})],w.prototype,"href",void 0),n([s({reflect:!0})],w.prototype,"badge",void 0),n([s({reflect:!0,type:Boolean})],w.prototype,"open",void 0),n([h("active","updated")],w.prototype,"handleActiveChange",null),w=n([l("nord-nav-item")],w);var $=w;export{$ 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 type { TemplateResult } from 'lit'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './NavItem.css'\n\nimport '../popout/Popout.js'\nimport '../tooltip/Tooltip.js'\n\nlet railTooltipIdCounter = 0\nlet railPopoutIdCounter = 0\n\n// Mirrors the layout's wide-viewport breakpoint so nav items only\n// switch to icon-only rendering when the layout actually shows the rail.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation 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 icon - Slot for a custom leading icon element. Use when the `icon` attribute isn't enough — for example, an icon wrapped in a styled badge or circular frame. When set, it takes priority over the `icon` attribute and is shown in both the expanded nav and the collapsed rail.\n * @slot end - Trailing content rendered after the label inside the item's flex row. The slotted element flows naturally — it claims its real width and the label flex-shrinks to make room. Use for a custom badge, count pill, action icon, etc. when the `badge` attribute's plain text isn't enough.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @slot rail-tooltip - Full content of the rail-mode tooltip. When provided, it replaces the default label projection — write the tooltip's content directly (label + count + keyboard shortcut etc., bound to whatever reactive state you like). When absent, the tooltip falls back to the item's default-slot label. Only rendered in rail mode.\n *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-nav-item-color=var(--n-color-text-weak)] - Text color in the default state.\n * @cssprop [--n-nav-item-background=transparent] - Background color in the default state.\n * @cssprop [--n-nav-item-border-radius=var(--n-border-radius-s)] - Border radius of the item and its active-parent overlay.\n * @cssprop [--n-nav-item-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding.\n * @cssprop [--n-nav-item-padding-inline=var(--n-space-s)] - Inline-axis (start/end) padding.\n * @cssprop [--n-nav-item-line-height=var(--n-line-height-tight)] - Line height of the item's text.\n * @cssprop [--n-nav-item-icon-gap=calc(var(--n-space-s) * 1.4)] - Inline gap between the leading icon (the `icon` attribute or `icon` slot) and the item's text.\n * @cssprop [--n-nav-item-color-hover=var(--n-color-text)] - Text color on hover.\n * @cssprop [--n-nav-item-background-hover=var(--n-color-nav-hover)] - Background color on hover.\n * @cssprop [--n-nav-item-color-active=var(--n-color-text-on-accent)] - Text color when the item is `active`.\n * @cssprop [--n-nav-item-background-active=var(--n-color-accent)] - Background color when the item is `active`.\n * @cssprop [--n-nav-item-color-expanded=var(--n-color-text-weak)] - Text color when the item is an active parent (its subnav is expanded).\n * @cssprop [--n-nav-item-background-expanded=var(--n-color-accent)] - Background color of the overlay drawn behind an active-parent item.\n * @cssprop [--n-nav-item-expanded-overlay-opacity=0.12] - Opacity of the active-parent overlay. Set to `1` for a solid background.\n * @cssprop [--n-nav-item-expanded-overlay-filter=brightness(150%)] - Filter applied to the active-parent overlay. Set to `none` to disable.\n * @cssprop [--n-rail-flyout-background=var(--n-color-surface)] - Background colour of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-box-shadow=var(--n-box-shadow-popout)] - Box-shadow of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-min-inline-size=220px] - Minimum inline size (width in LTR) of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-padding=var(--n-space-s)] - Padding of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-offset-inline=0] - Extra inline-axis offset applied to the rail flyout (positive values push it away from the rail in LTR; mirrored in RTL).\n * @cssprop [--n-rail-flyout-offset-block=0] - Extra block-axis offset applied to the rail flyout (positive values push it downward).\n * @cssprop [--n-rail-subnav-indicator-color=var(--n-color-border-strong)] - Colour of the small triangle indicator drawn in the bottom-inline-end corner of rail items that have a subnav (default + hover state).\n * @cssprop [--n-rail-subnav-indicator-color-active=var(--n-color-border-hover)] - Colour of the triangle indicator while the item's flyout popout is open.\n * @cssprop [--n-nav-badge-background=var(--n-color-status-notification)] - Background colour of the built-in `badge` attribute pill (`.n-nav-badge`).\n * @cssprop [--n-nav-badge-color=#fff] - Text colour of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-size=var(--n-font-size-xs)] - Font size of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-weight=var(--n-font-weight)] - Font weight of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-line-height=1] - Line height of the built-in `badge` attribute pill. Combined with `--n-nav-badge-padding-block` this controls the pill's effective block size.\n * @cssprop [--n-nav-badge-padding-block=var(--n-space-xs)] - Block-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-padding-inline=calc(var(--n-space-s) / 2)] - Inline-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-border-radius=var(--n-border-radius-pill)] - Border radius of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-min-inline-size=20px] - Minimum inline size (width in LTR) of the built-in `badge` attribute pill — sets a visual floor for single-digit counts.\n * @cssprop [--n-nav-badge-margin-inline-start=var(--n-space-xs)] - Inline-start margin separating the badge from the preceding label inside the nav-item's flex row.\n * @cssprop [--n-rail-badge-size=5px] - Diameter of the rail-mode dot the badge collapses into when the layout is in `collapse-mode=\"rail\"` and not `nav-open`.\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 iconSlot = new SlotController(this, 'icon')\n  private railTooltipSlot = new SlotController(this, 'rail-tooltip')\n  private direction = new DirectionController(this)\n\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private readonly tooltipId = `n-nav-rail-tip-${++railTooltipIdCounter}`\n  private readonly popoutId = `n-nav-rail-pop-${++railPopoutIdCounter}`\n\n  @query('nord-popout') private popoutEl?: Popout\n\n  /**\n   * Reflects whether the ancestor layout is in rail-collapsed state\n   * (i.e. `collapse-mode=\"rail\"` and `nav-open` is absent).\n   * @internal\n   */\n  @state() private railCollapsed = false\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property({ reflect: true }) badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.railCollapsed = false\n    this.popoutEl?.hide()\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    // Subnav children render inside a flyout popover when rail-collapsed;\n    // they should keep their full layout, not collapse to icons themselves.\n    const isNested = !!this.parentElement?.closest('nord-nav-item')\n    const next = !isNested\n      && railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    if (!next) {\n      this.popoutEl?.hide()\n    }\n    this.railCollapsed = next\n  }\n\n  render() {\n    if (this.railCollapsed) {\n      return this.renderRail()\n    }\n\n    const innards = html`\n      ${this.renderLeadingIcon()}\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        <slot name=\"end\"></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    }\n    else if (this.href) {\n      element = this.renderLink(innards)\n    }\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  // Resolves the leading icon shown in both the expanded nav and the rail:\n  // a slotted custom icon wins over the `icon` attribute, which wins over nothing.\n  private renderLeadingIcon(): TemplateResult | typeof nothing {\n    if (this.iconSlot.hasContent) {\n      return html`<slot name=\"icon\" class=\"n-nav-icon\"></slot>`\n    }\n    if (this.icon) {\n      return html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>`\n    }\n    return nothing\n  }\n\n  private renderRail(): TemplateResult {\n    const leadingIcon = this.renderLeadingIcon()\n    // Rail is icon-only, so when there's no icon at all we fall back to the\n    // first letter of the label rather than rendering an empty button.\n    const iconEl = leadingIcon === nothing\n      ? html`<span class=\"n-rail-fallback\">${this.textInitial}</span>`\n      : leadingIcon\n    const badge = this.badge ? html`<span class=\"n-nav-badge n-rail-badge\">${this.badge}</span>` : nothing\n\n    if (this.subnavSlot.hasContent) {\n      return this.renderRailFlyout(iconEl, badge)\n    }\n\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        ${this.href\n          ? html`\n              <a\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-current=${cond(this.active, 'page')}\n                aria-describedby=${this.tooltipId}\n                href=${this.href}\n              >\n                ${iconEl}${badge}\n              </a>\n            `\n          : html`\n              <button\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-describedby=${this.tooltipId}\n              >\n                ${iconEl}${badge}\n              </button>\n            `}\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n      </div>\n    `\n  }\n\n  private renderRailFlyout(iconEl: TemplateResult, badge: TemplateResult | typeof nothing): TemplateResult {\n    // Click-only: nord-popout's getToggle() listens for click on the\n    // [aria-controls={popoutId}] target. Hover used to open as well, but\n    // that conflicted with the popout's click-to-toggle (hover opened, then\n    // the click was treated as a close).\n    // The tooltip still shows on hover so the icon has an accessible label\n    // — nord-tooltip listens for mouseover/focusin on [aria-describedby].\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        <button\n          class=\"n-nav-item n-rail-item\"\n          ${ref(this.focusableRef)}\n          aria-controls=${this.popoutId}\n          aria-describedby=${this.tooltipId}\n        >\n          ${iconEl}${badge}\n          <svg\n            class=\"n-rail-subnav-indicator\"\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"5\"\n            height=\"5\"\n            viewBox=\"0 0 5 5\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n        <nord-popout id=${this.popoutId} position=\"inline-end\" always-floating>\n          <div class=\"n-rail-flyout-body\">\n            <slot name=${this.subnavSlot.slotName}></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private get textInitial(): string {\n    const text = this.textContent?.trim() ?? ''\n    return text.charAt(0).toUpperCase()\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":["railTooltipIdCounter","railPopoutIdCounter","railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","iconSlot","railTooltipSlot","direction","DirectionController","tooltipId","popoutId","railCollapsed","active","open","handleViewportChange","updateRailState","hasSubNav","hasContent","connectedCallback","super","startObservingLayout","disconnectedCallback","stopObservingLayout","observedLayout","closest","layoutObserver","MutationObserver","observe","attributes","attributeFilter","_a","disconnect","undefined","_b","popoutEl","hide","next","parentElement","getAttribute","hasAttribute","render","renderRail","innards","html","renderLeadingIcon","badge","nothing","element","renderToggle","href","renderLink","renderButton","slotName","icon","leadingIcon","iconEl","textInitial","renderRailFlyout","ref","focusableRef","cond","textContent","trim","charAt","toUpperCase","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","query","prototype","state","property","type","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './NavItem.css'\n\nimport '../popout/Popout.js'\nimport '../tooltip/Tooltip.js'\n\nlet railTooltipIdCounter = 0\nlet railPopoutIdCounter = 0\n\n// Mirrors the layout's wide-viewport breakpoint so nav items only\n// switch to icon-only rendering when the layout actually shows the rail.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation 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 icon - Slot for a custom leading icon element. Use when the `icon` attribute isn't enough — for example, an icon wrapped in a styled badge or circular frame. When set, it takes priority over the `icon` attribute and is shown in both the expanded nav and the collapsed rail.\n * @slot end - Trailing content rendered after the label inside the item's flex row. The slotted element flows naturally — it claims its real width and the label flex-shrinks to make room. Use for a custom badge, count pill, action icon, etc. when the `badge` attribute's plain text isn't enough.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @slot rail-tooltip - Full content of the rail-mode tooltip. When provided, it replaces the default label projection — write the tooltip's content directly (label + count + keyboard shortcut etc., bound to whatever reactive state you like). When absent, the tooltip falls back to the item's default-slot label. Only rendered in rail mode.\n *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-nav-item-color=var(--n-color-text-weak)] - Text color in the default state.\n * @cssprop [--n-nav-item-background=transparent] - Background color in the default state.\n * @cssprop [--n-nav-item-border-radius=var(--n-border-radius-s)] - Border radius of the item and its active-parent overlay.\n * @cssprop [--n-nav-item-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding.\n * @cssprop [--n-nav-item-padding-inline=var(--n-space-s)] - Inline-axis (start/end) padding.\n * @cssprop [--n-nav-item-line-height=var(--n-line-height-tight)] - Line height of the item's text.\n * @cssprop [--n-nav-item-icon-gap=calc(var(--n-space-s) * 1.4)] - Inline gap between the leading icon (the `icon` attribute or `icon` slot) and the item's text.\n * @cssprop [--n-nav-item-color-hover=var(--n-color-text)] - Text color on hover.\n * @cssprop [--n-nav-item-background-hover=var(--n-color-nav-hover)] - Background color on hover.\n * @cssprop [--n-nav-item-color-active=var(--n-color-text-on-accent)] - Text color when the item is `active`.\n * @cssprop [--n-nav-item-background-active=var(--n-color-accent)] - Background color when the item is `active`.\n * @cssprop [--n-nav-item-color-expanded=var(--n-color-text-weak)] - Text color when the item is an active parent (its subnav is expanded).\n * @cssprop [--n-nav-item-background-expanded=var(--n-color-accent)] - Background color of the overlay drawn behind an active-parent item.\n * @cssprop [--n-nav-item-expanded-overlay-opacity=0.12] - Opacity of the active-parent overlay. Set to `1` for a solid background.\n * @cssprop [--n-nav-item-expanded-overlay-filter=brightness(150%)] - Filter applied to the active-parent overlay. Set to `none` to disable.\n * @cssprop [--n-rail-flyout-background=var(--n-color-surface)] - Background colour of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-box-shadow=var(--n-box-shadow-popout)] - Box-shadow of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-min-inline-size=220px] - Minimum inline size (width in LTR) of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-padding=var(--n-space-s)] - Padding of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-offset-inline=0] - Extra inline-axis offset applied to the rail flyout (positive values push it away from the rail in LTR; mirrored in RTL).\n * @cssprop [--n-rail-flyout-offset-block=0] - Extra block-axis offset applied to the rail flyout (positive values push it downward).\n * @cssprop [--n-rail-subnav-indicator-color=var(--n-color-border-strong)] - Colour of the small triangle indicator drawn in the bottom-inline-end corner of rail items that have a subnav (default + hover state).\n * @cssprop [--n-rail-subnav-indicator-color-active=var(--n-color-border-hover)] - Colour of the triangle indicator while the item's flyout popout is open.\n * @cssprop [--n-nav-badge-background=var(--n-color-status-notification)] - Background colour of the built-in `badge` attribute pill (`.n-nav-badge`).\n * @cssprop [--n-nav-badge-color=#fff] - Text colour of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-size=var(--n-font-size-xs)] - Font size of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-weight=var(--n-font-weight)] - Font weight of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-line-height=1] - Line height of the built-in `badge` attribute pill. Combined with `--n-nav-badge-padding-block` this controls the pill's effective block size.\n * @cssprop [--n-nav-badge-padding-block=var(--n-space-xs)] - Block-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-padding-inline=calc(var(--n-space-s) / 2)] - Inline-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-border-radius=var(--n-border-radius-pill)] - Border radius of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-min-inline-size=20px] - Minimum inline size (width in LTR) of the built-in `badge` attribute pill — sets a visual floor for single-digit counts.\n * @cssprop [--n-nav-badge-margin-inline-start=var(--n-space-xs)] - Inline-start margin separating the badge from the preceding label inside the nav-item's flex row.\n * @cssprop [--n-rail-badge-size=5px] - Diameter of the rail-mode dot the badge collapses into when the layout is in `collapse-mode=\"rail\"` and not `nav-open`.\n *\n * @parent Navigation\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 iconSlot = new SlotController(this, 'icon')\n  private railTooltipSlot = new SlotController(this, 'rail-tooltip')\n  private direction = new DirectionController(this)\n\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private readonly tooltipId = `n-nav-rail-tip-${++railTooltipIdCounter}`\n  private readonly popoutId = `n-nav-rail-pop-${++railPopoutIdCounter}`\n\n  @query('nord-popout') private popoutEl?: Popout\n\n  /**\n   * Reflects whether the ancestor layout is in rail-collapsed state\n   * (i.e. `collapse-mode=\"rail\"` and `nav-open` is absent).\n   * @internal\n   */\n  @state() private railCollapsed = false\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property({ reflect: true }) badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.railCollapsed = false\n    this.popoutEl?.hide()\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    // Subnav children render inside a flyout popover when rail-collapsed;\n    // they should keep their full layout, not collapse to icons themselves.\n    const isNested = !!this.parentElement?.closest('nord-nav-item')\n    const next = !isNested\n      && railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    if (!next) {\n      this.popoutEl?.hide()\n    }\n    this.railCollapsed = next\n  }\n\n  render() {\n    if (this.railCollapsed) {\n      return this.renderRail()\n    }\n\n    const innards = html`\n      ${this.renderLeadingIcon()}\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        <slot name=\"end\"></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    }\n    else if (this.href) {\n      element = this.renderLink(innards)\n    }\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  // Resolves the leading icon shown in both the expanded nav and the rail:\n  // a slotted custom icon wins over the `icon` attribute, which wins over nothing.\n  private renderLeadingIcon(): TemplateResult | typeof nothing {\n    if (this.iconSlot.hasContent) {\n      return html`<slot name=\"icon\" class=\"n-nav-icon\"></slot>`\n    }\n    if (this.icon) {\n      return html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>`\n    }\n    return nothing\n  }\n\n  private renderRail(): TemplateResult {\n    const leadingIcon = this.renderLeadingIcon()\n    // Rail is icon-only, so when there's no icon at all we fall back to the\n    // first letter of the label rather than rendering an empty button.\n    const iconEl = leadingIcon === nothing\n      ? html`<span class=\"n-rail-fallback\">${this.textInitial}</span>`\n      : leadingIcon\n    const badge = this.badge ? html`<span class=\"n-nav-badge n-rail-badge\">${this.badge}</span>` : nothing\n\n    if (this.subnavSlot.hasContent) {\n      return this.renderRailFlyout(iconEl, badge)\n    }\n\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        ${this.href\n          ? html`\n              <a\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-current=${cond(this.active, 'page')}\n                aria-describedby=${this.tooltipId}\n                href=${this.href}\n              >\n                ${iconEl}${badge}\n              </a>\n            `\n          : html`\n              <button\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-describedby=${this.tooltipId}\n              >\n                ${iconEl}${badge}\n              </button>\n            `}\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n      </div>\n    `\n  }\n\n  private renderRailFlyout(iconEl: TemplateResult, badge: TemplateResult | typeof nothing): TemplateResult {\n    // Click-only: nord-popout's getToggle() listens for click on the\n    // [aria-controls={popoutId}] target. Hover used to open as well, but\n    // that conflicted with the popout's click-to-toggle (hover opened, then\n    // the click was treated as a close).\n    // The tooltip still shows on hover so the icon has an accessible label\n    // — nord-tooltip listens for mouseover/focusin on [aria-describedby].\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        <button\n          class=\"n-nav-item n-rail-item\"\n          ${ref(this.focusableRef)}\n          aria-controls=${this.popoutId}\n          aria-describedby=${this.tooltipId}\n        >\n          ${iconEl}${badge}\n          <svg\n            class=\"n-rail-subnav-indicator\"\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"5\"\n            height=\"5\"\n            viewBox=\"0 0 5 5\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n        <nord-popout id=${this.popoutId} position=\"inline-end\" always-floating>\n          <div class=\"n-rail-flyout-body\">\n            <slot name=${this.subnavSlot.slotName}></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private get textInitial(): string {\n    const text = this.textContent?.trim() ?? ''\n    return text.charAt(0).toUpperCase()\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":["railTooltipIdCounter","railPopoutIdCounter","railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","iconSlot","railTooltipSlot","direction","DirectionController","tooltipId","popoutId","railCollapsed","active","open","handleViewportChange","updateRailState","hasSubNav","hasContent","connectedCallback","super","startObservingLayout","disconnectedCallback","stopObservingLayout","observedLayout","closest","layoutObserver","MutationObserver","observe","attributes","attributeFilter","_a","disconnect","undefined","_b","popoutEl","hide","next","parentElement","getAttribute","hasAttribute","render","renderRail","innards","html","renderLeadingIcon","badge","nothing","element","renderToggle","href","renderLink","renderButton","slotName","icon","leadingIcon","iconEl","textInitial","renderRailFlyout","ref","focusableRef","cond","textContent","trim","charAt","toUpperCase","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","query","prototype","state","property","type","Boolean","reflect","customElement"],"mappings":"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"}

package/lib/NavToggle-BY83xpx0.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as i,LitElement as e}from"lit";import{property as r,state as s,customElement as n}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{ref as l}from"lit/directives/ref.js";import{D as c}from"./DirectionController-ChvNGESZ.js";import{F as d}from"./FocusableMixin-BlQLNPdJ.js";import{s as u}from"./Component-BJ5O5n8k.js";import h from"./Icon.js";import{LocalizeController as v}from"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.js";const p="navigation-toggle-lock";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z" fill="currentColor"/></svg>',tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron",title:p});const b="navigation-toggle";var g=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z" fill="currentColor"/></svg>',tags:"nordicon navigation hamburger menu toggle navigation three lines",title:b});const f=o`:host{color:var(--n-color-icon);display:inline-flex}@media (min-width:768px){:host([data-auto-hidden]){display:none}}nord-button{--n-button-color:currentColor;--n-button-background-color:#0000}nord-icon{color:currentColor;display:block;transform:translateX(-1px)}.icon-active{display:none}.is-rtl .icon-active{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) .icon-active{display:block}:host(:is(:hover,:focus-within)) .icon-default{display:none}}`;h.registerIcon(g),h.registerIcon(m);let y=class extends(d(e)){constructor(){super(...arguments),this.direction=new c(this),this.localization=new v(this),this.icon=b,this.iconActive=p,this.autoHide=!1,this.square=!1,this.size="m",this.iconSize="m",this.autoHidden=!1}connectedCallback(){super.connectedCallback(),this.startAutoHide()}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoHide()}updated(t){var o;null===(o=super.updated)||void 0===o||o.call(this,t),t.has("autoHide")&&(this.stopAutoHide(),this.startAutoHide()),t.has("autoHidden")&&this.toggleAttribute("data-auto-hidden",this.autoHidden)}startAutoHide(){if(!this.autoHide)return;const t=this.closest("nord-layout");t&&(this.observedLayout=t,this.autoHidden=t.hasAttribute("nav-open"),this.layoutObserver=new MutationObserver((()=>{this.autoHidden=t.hasAttribute("nav-open")})),this.layoutObserver.observe(t,{attributes:!0,attributeFilter:["nav-open"]}))}stopAutoHide(){var t;null===(t=this.layoutObserver)||void 0===t||t.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.autoHidden=!1}render(){return i`<nord-button variant="plain" ?square="${this.square}" size="${this.size}" ${l(this.focusableRef)} class="${a({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="${this.iconSize}" class="icon-default" name="${this.icon}"></nord-icon><nord-icon size="${this.iconSize}" class="icon-active" name="${this.iconActive}"></nord-icon></nord-button>`}};y.styles=[u,f],t([r({reflect:!0})],y.prototype,"icon",void 0),t([r({reflect:!0,attribute:"icon-active"})],y.prototype,"iconActive",void 0),t([r({type:Boolean,reflect:!0,attribute:"auto-hide"})],y.prototype,"autoHide",void 0),t([r({type:Boolean,reflect:!0})],y.prototype,"square",void 0),t([r({reflect:!0})],y.prototype,"size",void 0),t([r({reflect:!0,attribute:"icon-size"})],y.prototype,"iconSize",void 0),t([s()],y.prototype,"autoHidden",void 0),y=t([n("nord-nav-toggle")],y);var z=y;export{z as N,m as l};
+//# sourceMappingURL=NavToggle-BY83xpx0.js.map

package/lib/NavToggle-BY83xpx0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavToggle-BY83xpx0.js","sources":["../../icons/lib/assets/navigation-toggle-lock.js","../../icons/lib/assets/navigation-toggle.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-toggle-lock\";\nexport const tags =\n  \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-toggle\";\nexport const tags =\n  \"nordicon navigation hamburger menu toggle navigation three lines\";\n","import * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport * as unlockIcon from '@nordhealth/icons/lib/assets/navigation-toggle.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './NavToggle.css'\n\nimport '../button/Button.js'\nimport '../visually-hidden/VisuallyHidden.js'\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle hides and shows the primary navigation inside `<nord-layout>`.\n *\n * @status ready\n * @category navigation\n *\n * @localization label - Accessible label for the nav toggle button.\n *\n * @parent Navigation\n */\n@customElement('nord-nav-toggle')\nexport default class NavToggle extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private direction = new DirectionController(this)\n  private localization = new LocalizeController<'nord-nav-toggle'>(this)\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement\n\n  /**\n   * Icon shown in the resting state. Accepts any registered icon name.\n   * Defaults to `navigation-toggle`.\n   */\n  @property({ reflect: true }) icon: string = unlockIcon.title\n\n  /**\n   * Icon shown on hover/focus (≥ 768px), swapping in for `icon`.\n   * Defaults to `navigation-toggle-lock`.\n   */\n  @property({ reflect: true, attribute: 'icon-active' }) iconActive: string = lockIcon.title\n\n  /**\n   * When set, the toggle finds its ancestor `<nord-layout>` and hides\n   * itself on wide viewports while the layout's nav is open. Useful when\n   * placing the toggle outside the `nav-toggle` slot.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'auto-hide' }) autoHide: boolean = false\n\n  /**\n   * Forwards the `square` attribute to the underlying `<nord-button>`,\n   * giving the toggle a fixed square footprint instead of the default\n   * pill shape.\n   */\n  @property({ type: Boolean, reflect: true }) square: boolean = false\n\n  /**\n   * Size of the underlying `<nord-button>`. Defaults to `m`.\n   */\n  @property({ reflect: true }) size: 's' | 'm' = 'm'\n\n  /**\n   * Size of the inner `<nord-icon>` elements. Accepts the same values\n   * as `<nord-icon>`'s `size`. Defaults to `m`.\n   */\n  @property({ reflect: true, attribute: 'icon-size' }) iconSize: 'xxs' | 'xs' | 's' | 'm' | 'l' = 'm'\n\n  /**\n   * Reflects whether `auto-hide` is engaged (i.e. the ancestor layout\n   * currently has `nav-open`). The CSS hides the host based on this.\n   */\n  @state() private autoHidden: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startAutoHide()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopAutoHide()\n  }\n\n  protected updated(changed: Map<string, unknown>) {\n    super.updated?.(changed)\n    if (changed.has('autoHide')) {\n      this.stopAutoHide()\n      this.startAutoHide()\n    }\n    if (changed.has('autoHidden')) {\n      this.toggleAttribute('data-auto-hidden', this.autoHidden)\n    }\n  }\n\n  private startAutoHide() {\n    if (!this.autoHide) {\n      return\n    }\n    const layout = this.closest<HTMLElement>('nord-layout')\n    if (!layout) {\n      return\n    }\n    this.observedLayout = layout\n    this.autoHidden = layout.hasAttribute('nav-open')\n    this.layoutObserver = new MutationObserver(() => {\n      this.autoHidden = layout.hasAttribute('nav-open')\n    })\n    this.layoutObserver.observe(layout, {\n      attributes: true,\n      attributeFilter: ['nav-open'],\n    })\n  }\n\n  private stopAutoHide() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.autoHidden = false\n  }\n\n  render() {\n    return html`\n      <nord-button variant=\"plain\" ?square=${this.square} size=${this.size} ${ref(this.focusableRef)} class=${classMap({ 'is-rtl': this.direction.isRTL })}>\n        <nord-visually-hidden>${this.localization.term('label')}</nord-visually-hidden>\n        <nord-icon size=${this.iconSize} class=\"icon-default\" name=${this.icon}></nord-icon>\n        <nord-icon size=${this.iconSize} class=\"icon-active\" name=${this.iconActive}></nord-icon>\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-toggle': NavToggle\n  }\n}\n"],"names":["title","Icon","registerIcon","unlockIcon","lockIcon","NavToggle","FocusableMixin","LitElement","constructor","this","direction","DirectionController","localization","LocalizeController","icon","unlockIcon.title","iconActive","lockIcon.title","autoHide","square","size","iconSize","autoHidden","connectedCallback","super","startAutoHide","disconnectedCallback","stopAutoHide","updated","changed","_a","call","has","toggleAttribute","layout","closest","observedLayout","hasAttribute","layoutObserver","MutationObserver","observe","attributes","attributeFilter","disconnect","undefined","render","html","ref","focusableRef","classMap","isRTL","term","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","state","customElement"],"mappings":"uiBACO,MAAMA,EAAQ,qEADN,oTAGb,0GCFK,MAAMA,EAAQ,gEADN,kMAGb,0jBCeFC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAwBC,EAAeC,IAAvC,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,MAQpCA,KAAAK,KAAeC,EAMWN,KAAAO,WAAqBC,EAORR,KAAQS,UAAY,EAO5CT,KAAMU,QAAY,EAKjCV,KAAIW,KAAc,IAMMX,KAAQY,SAAmC,IAM/EZ,KAAUa,YAAY,CA0DxC,CAxDC,iBAAAC,GACEC,MAAMD,oBACNd,KAAKgB,eACN,CAED,oBAAAC,GACEF,MAAME,uBACNjB,KAAKkB,cACN,CAES,OAAAC,CAAQC,SACA,QAAhBC,EAAAN,MAAMI,eAAU,IAAAE,GAAAA,EAAAC,KAAAtB,KAAAoB,GACZA,EAAQG,IAAI,cACdvB,KAAKkB,eACLlB,KAAKgB,iBAEHI,EAAQG,IAAI,eACdvB,KAAKwB,gBAAgB,mBAAoBxB,KAAKa,WAEjD,CAEO,aAAAG,GACN,IAAKhB,KAAKS,SACR,OAEF,MAAMgB,EAASzB,KAAK0B,QAAqB,eACpCD,IAGLzB,KAAK2B,eAAiBF,EACtBzB,KAAKa,WAAaY,EAAOG,aAAa,YACtC5B,KAAK6B,eAAiB,IAAIC,kBAAiB,KACzC9B,KAAKa,WAAaY,EAAOG,aAAa,WAAW,IAEnD5B,KAAK6B,eAAeE,QAAQN,EAAQ,CAClCO,YAAY,EACZC,gBAAiB,CAAC,cAErB,CAEO,YAAAf,SACe,QAArBG,EAAArB,KAAK6B,sBAAgB,IAAAR,GAAAA,EAAAa,aACrBlC,KAAK6B,oBAAiBM,EACtBnC,KAAK2B,oBAAiBQ,EACtBnC,KAAKa,YAAa,CACnB,CAED,MAAAuB,GACE,OAAOC,CAAI,yCAC8BrC,KAAKU,iBAAeV,KAAKW,SAAQ2B,EAAItC,KAAKuC,wBAAuBC,EAAS,CAAE,SAAUxC,KAAKC,UAAUwC,kCAClHzC,KAAKG,aAAauC,KAAK,mDAC7B1C,KAAKY,wCAAsCZ,KAAKK,sCAChDL,KAAKY,uCAAqCZ,KAAKO,wCAGtE,GAzGMX,EAAA+C,OAAS,CAACC,EAAgBC,GAWJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAuCpD,EAAAqD,UAAA,YAAA,GAMLH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAAoDtD,EAAAqD,UAAA,kBAAA,GAOtBH,EAAA,CAAnEC,EAAS,CAAEI,KAAMC,QAASJ,SAAS,EAAME,UAAW,eAAwCtD,EAAAqD,UAAA,gBAAA,GAOjDH,EAAA,CAA3CC,EAAS,CAAEI,KAAMC,QAASJ,SAAS,KAA+BpD,EAAAqD,UAAA,cAAA,GAKtCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BpD,EAAAqD,UAAA,YAAA,GAMGH,EAAA,CAApDC,EAAS,CAAEC,SAAS,EAAME,UAAW,eAA6DtD,EAAAqD,UAAA,gBAAA,GAMlFH,EAAA,CAAhBO,KAA2CzD,EAAAqD,UAAA,kBAAA,GAjDzBrD,EAASkD,EAAA,CAD7BQ,EAAc,oBACM1D,SAAAA"}

package/lib/NavToggle.js

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";export{N as default}from"./NavToggle-DzKbd-El.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/ref.js";import"./DirectionController-ChvNGESZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./Component-DSU3Qp0O.js";import"./Icon.js";import"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";
+import"./tslib.es6-CmLYFWVC.js";export{N as default}from"./NavToggle-BY83xpx0.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/ref.js";import"./DirectionController-ChvNGESZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./Component-BJ5O5n8k.js";import"./Icon.js";import"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";
 //# sourceMappingURL=NavToggle.js.map

package/lib/Navigation.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as t,html as a,nothing as e}from"lit";import{property as i,customElement as r}from"lit/decorators.js";import{E as s}from"./EventController-BBOmvfLa.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-DSU3Qp0O.js";const c=o`:host{--_n-navigation-background-color:var(--n-navigation-background-color, var(--n-color-nav-surface));--_n-navigation-scroll-shadow-color-start:var(--n-navigation-scroll-shadow-color-start, rgb(0, 0, 0, 0.1));--_n-navigation-scroll-shadow-color-end:var(--n-navigation-scroll-shadow-color-end, rgb(0, 0, 0, 0.1));--_n-navigation-scroll-mask:var(--n-navigation-scroll-mask, none);--_n-navigation-padding-block:var(--n-navigation-padding-block, var(--n-space-m));--_n-navigation-padding-inline:var(--n-navigation-padding-inline, var(--n-space-m));--_n-navigation-footer-padding-block:var(--n-navigation-footer-padding-block, var(--n-space-s));--_n-navigation-footer-padding-inline:var(--n-navigation-footer-padding-inline, var(--_n-navigation-padding-inline));--_n-navigation-header-block-size:var(--n-navigation-header-block-size, var(--n-space-xxl));--_n-navigation-header-padding-inline:var(--n-navigation-header-padding-inline);--_n-navigation-header-background:var(--n-navigation-header-background, var(--_n-navigation-background-color));--_n-navigation-header-divider:var(--n-navigation-header-divider, 1px solid var(--n-color-border));--_n-navigation-header-color:var(--n-navigation-header-color);--_n-navigation-header-toggle-icon-color:var(--n-navigation-header-toggle-icon-color);--_n-navigation-header-focus-style:var(--n-navigation-header-focus-style, var(--_n-navigation-dropdown-box-shadow));--_n-navigation-dropdown-box-shadow:0 0 0 1px var(--n-color-accent) inset;display:flex;flex-direction:column;block-size:100%;background:var(--_n-navigation-background-color)}.n-navigation-main{display:flex;flex-direction:column;flex:1;overflow-y:auto;overscroll-behavior-y:none;overflow-x:hidden}@-moz-document url-prefix(){.n-navigation-main{scrollbar-width:thin}}.n-navigation-main::-webkit-scrollbar{inline-size:6px;block-size:6px}.n-navigation-main::-webkit-scrollbar-thumb{background-color:var(--n-color-border-strong);border-radius:var(--n-border-radius-pill)}.n-navigation-main::-webkit-scrollbar-thumb:hover{background-color:var(--n-color-border-hover)}.n-navigation-main::-webkit-scrollbar-corner,.n-navigation-main::-webkit-scrollbar-track{background:0 0}nav{flex:1;padding-block-start:var(--_n-navigation-padding-block);padding-block-end:var(--_n-navigation-padding-block);padding-inline-start:var(--_n-navigation-padding-inline);padding-inline-end:var(--_n-navigation-padding-inline)}::slotted(nord-nav-group[heading]:first-of-type){margin-block-start:calc(var(--n-space-s) * -1)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center;--n-button-text-align:start;--n-button-background-color:transparent;--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-gradient:none}slot[name=header]{--n-button-border-radius:0;--n-button-color:var(--_n-navigation-header-color);--n-button-min-block-size:var(--_n-navigation-header-block-size);--n-select-block-size:var(--n-button-min-block-size);--n-button-font-weight:var(--n-font-weight-active);--n-button-toggle-icon-color:var(--_n-navigation-header-toggle-icon-color);--n-button-padding-inline:var(--_n-navigation-header-padding-inline);block-size:var(--_n-navigation-header-block-size);background-color:var(--_n-navigation-header-background);border-block-end:var(--_n-navigation-header-divider)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);--n-button-padding-inline:var(--n-space-xs);margin:var(--n-space-m)}:host([data-rail-collapsed]) slot[name=header]{--n-button-padding-inline:0;--n-button-text-align:center;--n-button-content-display:none;overflow:hidden}:host([data-rail-collapsed]) slot[name=footer]{--n-button-padding-inline:0;--n-button-content-display:none;overflow:hidden}:is([name=header],[name=footer])::slotted(:is(nord-button,nord-dropdown):not([open]):focus-visible){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:is(nord-button,nord-dropdown):not([open],:active):focus-visible){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(nord-button,nord-dropdown):is(:hover,[open])){--n-button-border-color:var(--n-color-border-hover)}:host([sticky-footer]) slot[name=footer]{background:var(--_n-navigation-background-color);z-index:var(--n-index-sticky);padding-block-start:var(--_n-navigation-footer-padding-block);padding-block-end:var(--_n-navigation-footer-padding-block);padding-inline-start:var(--_n-navigation-footer-padding-inline);padding-inline-end:var(--_n-navigation-footer-padding-inline);margin:0;position:sticky;inset-block-end:0}:host([sticky-footer]) .n-navigation-main{background:linear-gradient(var(--_n-navigation-background-color) 30%,rgb(255,255,255,0)) center top,linear-gradient(rgb(255,255,255,0),var(--_n-navigation-background-color) 70%) center bottom,radial-gradient(farthest-side at 50% 0,var(--_n-navigation-scroll-shadow-color-start),rgb(0,0,0,0)) center top,radial-gradient(farthest-side at 50% 100%,var(--_n-navigation-scroll-shadow-color-end),rgb(0,0,0,0)) center bottom;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 7px,100% 7px;background-attachment:local,local,scroll,scroll;-webkit-mask-image:var(--_n-navigation-scroll-mask);mask-image:var(--_n-navigation-scroll-mask)}`,v="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let g=class extends t{constructor(){super(...arguments),this.headerSlot=new l(this,"header"),this.events=new s(this),this.footerObserver=null,this.allowItemsToRemainOpen=!1,this.stickyFooter=!1,this.handleViewportChange=()=>this.updateRailState(),this.handleActivate=n=>{var o,t;const a=n.target,e=new Set;let i=null===(o=a.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;i;)e.add(i),i=null===(t=i.parentElement)||void 0===t?void 0:t.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==a){const o=e.has(n);n.open=o||this.allowItemsToRemainOpen&&n.open,n.active=o}this.allowItemsToRemainOpen=!1}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"activate",this.handleActivate);const n=this.querySelector("nord-nav-item[active]");this.allowItemsToRemainOpen=null!=n,"undefined"!=typeof window&&this.observeFooter(),this.startObservingLayout(),v.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){var n;super.disconnectedCallback(),null===(n=this.footerObserver)||void 0===n||n.disconnect(),this.footerObserver=null,this.stopObservingLayout(),v.removeEventListener("change",this.handleViewportChange)}startObservingLayout(){this.observedLayout=this.closest("nord-layout"),this.observedLayout&&(this.updateRailState(),this.layoutObserver=new MutationObserver((()=>this.updateRailState())),this.layoutObserver.observe(this.observedLayout,{attributes:!0,attributeFilter:["nav-open","collapse-mode"]}))}stopObservingLayout(){var n;null===(n=this.layoutObserver)||void 0===n||n.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.toggleAttribute("data-rail-collapsed",!1)}updateRailState(){if(!this.observedLayout)return;const n=v.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");this.toggleAttribute("data-rail-collapsed",n)}observeFooter(){this.footerObserver=new MutationObserver((()=>this.requestUpdate())),this.footerObserver.observe(this,{childList:!0});const n=this.querySelector(':scope > [slot="footer"]');n&&this.footerObserver.observe(n,{attributes:!0,attributeFilter:["style","class"]})}get isFooterVisible(){if("undefined"==typeof window)return!0;const n=this.querySelector(':scope > [slot="footer"]');if(!n)return!1;const o=window.getComputedStyle(n);return"none"!==o.display&&"hidden"!==o.visibility&&"collapse"!==o.visibility&&"0"!==o.opacity&&"hidden"!==o.contentVisibility}render(){return a`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav>${this.stickyFooter?e:a`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`}</div>${this.stickyFooter?a`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`:e}`}};g.styles=[d,c],n([i({type:Boolean,reflect:!0,attribute:"sticky-footer"})],g.prototype,"stickyFooter",void 0),g=n([r("nord-navigation")],g);var b=g;export{b as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as t,html as a,nothing as e}from"lit";import{property as i,customElement as r}from"lit/decorators.js";import{E as s}from"./EventController-BBOmvfLa.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-BJ5O5n8k.js";const v=o`:host{--_n-navigation-background-color:var(--n-navigation-background-color,var(--n-color-nav-surface));--_n-navigation-scroll-shadow-color-start:var(--n-navigation-scroll-shadow-color-start,#0000001a);--_n-navigation-scroll-shadow-color-end:var(--n-navigation-scroll-shadow-color-end,#0000001a);--_n-navigation-scroll-mask:var(--n-navigation-scroll-mask,none);--_n-navigation-padding-block:var(--n-navigation-padding-block,var(--n-space-m));--_n-navigation-padding-inline:var(--n-navigation-padding-inline,var(--n-space-m));--_n-navigation-footer-padding-block:var(--n-navigation-footer-padding-block,var(--n-space-s));--_n-navigation-footer-padding-inline:var(--n-navigation-footer-padding-inline,var(--_n-navigation-padding-inline));--_n-navigation-header-block-size:var(--n-navigation-header-block-size,var(--n-space-xxl));--_n-navigation-header-padding-inline:var(--n-navigation-header-padding-inline);--_n-navigation-header-background:var(--n-navigation-header-background,var(--_n-navigation-background-color));--_n-navigation-header-divider:var(--n-navigation-header-divider,1px solid var(--n-color-border));--_n-navigation-header-color:var(--n-navigation-header-color);--_n-navigation-header-toggle-icon-color:var(--n-navigation-header-toggle-icon-color);--_n-navigation-header-focus-style:var(--n-navigation-header-focus-style,var(--_n-navigation-dropdown-box-shadow));--_n-navigation-dropdown-box-shadow:0 0 0 1px var(--n-color-accent) inset;background:var(--_n-navigation-background-color);block-size:100%;display:flex;flex-direction:column}.n-navigation-main{display:flex;flex:1;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:none}@-moz-document url-prefix(){.n-navigation-main{scrollbar-width:thin}}.n-navigation-main::-webkit-scrollbar{block-size:6px;inline-size:6px}.n-navigation-main::-webkit-scrollbar-thumb{background-color:var(--n-color-border-strong);border-radius:var(--n-border-radius-pill)}.n-navigation-main::-webkit-scrollbar-thumb:hover{background-color:var(--n-color-border-hover)}.n-navigation-main::-webkit-scrollbar-corner,.n-navigation-main::-webkit-scrollbar-track{background:#0000}nav{flex:1;padding-block-end:var(--_n-navigation-padding-block);padding-block-start:var(--_n-navigation-padding-block);padding-inline-end:var(--_n-navigation-padding-inline);padding-inline-start:var(--_n-navigation-padding-inline)}::slotted(nord-nav-group[heading]:first-of-type){margin-block-start:calc(var(--n-space-s)*-1)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center;--n-button-text-align:start;--n-button-background-color:#0000;--n-button-border-color:#0000;--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);background-color:var(--_n-navigation-header-background);block-size:var(--_n-navigation-header-block-size);border-block-end:var(--_n-navigation-header-divider)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);--n-button-padding-inline:var(--n-space-xs);margin:var(--n-space-m)}:host([data-rail-collapsed]) slot[name=header]{--n-button-padding-inline:0;--n-button-text-align:center;--n-button-content-display:none;overflow:hidden}:host([data-rail-collapsed]) slot[name=footer]{--n-button-padding-inline:0;--n-button-content-display:none;overflow:hidden}:is([name=header],[name=footer])::slotted(:is(nord-button,nord-dropdown):not([open]):focus-visible){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:is(nord-button,nord-dropdown):not([open],:active):focus-visible){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(nord-button,nord-dropdown):is(:hover,[open])){--n-button-border-color:var(--n-color-border-hover)}:host([sticky-footer]) slot[name=footer]{background:var(--_n-navigation-background-color);inset-block-end:0;margin:0;padding-block-end:var(--_n-navigation-footer-padding-block);padding-block-start:var(--_n-navigation-footer-padding-block);padding-inline-end:var(--_n-navigation-footer-padding-inline);padding-inline-start:var(--_n-navigation-footer-padding-inline);position:sticky;z-index:var(--n-index-sticky)}:host([sticky-footer]) .n-navigation-main{background:linear-gradient(var(--_n-navigation-background-color) 30%,#fff0) top,linear-gradient(#fff0,var(--_n-navigation-background-color) 70%) bottom,radial-gradient(farthest-side at 50% 0,var(--_n-navigation-scroll-shadow-color-start),#0000) top,radial-gradient(farthest-side at 50% 100%,var(--_n-navigation-scroll-shadow-color-end),#0000) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 7px,100% 7px;-webkit-mask-image:var(--_n-navigation-scroll-mask);mask-image:var(--_n-navigation-scroll-mask)}`,c="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let g=class extends t{constructor(){super(...arguments),this.headerSlot=new l(this,"header"),this.events=new s(this),this.footerObserver=null,this.allowItemsToRemainOpen=!1,this.stickyFooter=!1,this.handleViewportChange=()=>this.updateRailState(),this.handleActivate=n=>{var o,t;const a=n.target,e=new Set;let i=null===(o=a.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;i;)e.add(i),i=null===(t=i.parentElement)||void 0===t?void 0:t.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==a){const o=e.has(n);n.open=o||this.allowItemsToRemainOpen&&n.open,n.active=o}this.allowItemsToRemainOpen=!1}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"activate",this.handleActivate);const n=this.querySelector("nord-nav-item[active]");this.allowItemsToRemainOpen=null!=n,"undefined"!=typeof window&&this.observeFooter(),this.startObservingLayout(),c.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){var n;super.disconnectedCallback(),null===(n=this.footerObserver)||void 0===n||n.disconnect(),this.footerObserver=null,this.stopObservingLayout(),c.removeEventListener("change",this.handleViewportChange)}startObservingLayout(){this.observedLayout=this.closest("nord-layout"),this.observedLayout&&(this.updateRailState(),this.layoutObserver=new MutationObserver((()=>this.updateRailState())),this.layoutObserver.observe(this.observedLayout,{attributes:!0,attributeFilter:["nav-open","collapse-mode"]}))}stopObservingLayout(){var n;null===(n=this.layoutObserver)||void 0===n||n.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.toggleAttribute("data-rail-collapsed",!1)}updateRailState(){if(!this.observedLayout)return;const n=c.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");this.toggleAttribute("data-rail-collapsed",n)}observeFooter(){this.footerObserver=new MutationObserver((()=>this.requestUpdate())),this.footerObserver.observe(this,{childList:!0});const n=this.querySelector(':scope > [slot="footer"]');n&&this.footerObserver.observe(n,{attributes:!0,attributeFilter:["style","class"]})}get isFooterVisible(){if("undefined"==typeof window)return!0;const n=this.querySelector(':scope > [slot="footer"]');if(!n)return!1;const o=window.getComputedStyle(n);return"none"!==o.display&&"hidden"!==o.visibility&&"collapse"!==o.visibility&&"0"!==o.opacity&&"hidden"!==o.contentVisibility}render(){return a`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav>${this.stickyFooter?e:a`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`}</div>${this.stickyFooter?a`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`:e}`}};g.styles=[d,v],n([i({type:Boolean,reflect:!0,attribute:"sticky-footer"})],g.prototype,"stickyFooter",void 0),g=n([r("nord-navigation")],g);var b=g;export{b as default};
 //# sourceMappingURL=Navigation.js.map

package/lib/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import type NavItem from '../nav-item/NavItem.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Navigation.css'\n\n// Mirrors the layout's wide-viewport breakpoint. Used to drive the\n// `data-rail-collapsed` attribute below — Safari doesn't support\n// `:host-context()`, so we propagate the layout's rail state via an\n// observed attribute on the host instead.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n * @cssprop [--n-navigation-scroll-shadow-color-start=rgb(0, 0, 0, 0.1)] - Color of the scroll-affordance shadow shown at the top of the scroll area (below the header) when `sticky-footer` is set. Set to `transparent` to disable.\n * @cssprop [--n-navigation-scroll-shadow-color-end=rgb(0, 0, 0, 0.1)] - Color of the scroll-affordance shadow shown at the bottom of the scroll area (above the footer) when `sticky-footer` is set. Set to `transparent` to disable.\n * @cssprop [--n-navigation-scroll-mask=none] - `mask-image` applied to the scrollable area when `sticky-footer` is set. Use with the shadow colors set to `transparent` to replace the dark scroll-shadow with a soft content fade at the edges. Example: `linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%)`.\n * @cssprop [--n-navigation-padding-block=var(--n-space-m)] - Block-axis (top/bottom) padding of the `<nav>` element that wraps the slotted nav groups.\n * @cssprop [--n-navigation-padding-inline=var(--n-space-m)] - Inline-axis (start/end) padding of the `<nav>` element that wraps the slotted nav groups.\n * @cssprop [--n-navigation-footer-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding inside the footer slot when `sticky-footer` is set. Has no visual effect when the footer slot is empty (slot is hidden in that case).\n * @cssprop [--n-navigation-footer-padding-inline=var(--n-navigation-padding-inline)] - Inline-axis (start/end) padding inside the footer slot when `sticky-footer` is set. Defaults to `--n-navigation-padding-inline` so the footer aligns with the nav content unless overridden. Has no visual effect when the footer slot is empty.\n */\n@customElement('nord-navigation')\nexport default class Navigation extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, 'header')\n  private events = new EventController(this)\n  private footerObserver: MutationObserver | null = null\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private allowItemsToRemainOpen = false\n\n  /**\n   * Controls whether the navigations's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    // if we add this event listener during render\n    // we seem to miss the first activate event.\n    // so let's add it as early as possible.\n    this.events.listen(this, 'activate', this.handleActivate)\n\n    // in cases where there is an initially active nav-item,\n    // we should allow any nav-items with the `open` attribute to remain open.\n    const activeItem = this.querySelector('nord-nav-item[active]')\n    this.allowItemsToRemainOpen = activeItem != null\n\n    if (typeof window !== 'undefined') {\n      this.observeFooter()\n    }\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.footerObserver?.disconnect()\n    this.footerObserver = null\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.toggleAttribute('data-rail-collapsed', false)\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    const next = railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    this.toggleAttribute('data-rail-collapsed', next)\n  }\n\n  /**\n   * Observe the footer slot element for visibility changes.\n   * Watches style and class attributes on the footer element itself, and\n   * childList on the host to detect footer being added/removed (e.g. v-if).\n   */\n  private observeFooter() {\n    this.footerObserver = new MutationObserver(() => this.requestUpdate())\n\n    // Watch for footer element being added/removed from the host\n    this.footerObserver.observe(this, { childList: true })\n\n    // Watch hidden attribute on the footer element directly\n    const footerEl = this.querySelector(':scope > [slot=\"footer\"]')\n    if (footerEl) {\n      this.footerObserver.observe(footerEl, {\n        attributes: true,\n        attributeFilter: ['style', 'class'],\n      })\n    }\n  }\n\n  private get isFooterVisible() {\n    // In SSR, the element is backed by a minimal DOM shim that does not implement\n    // querySelector or window.getComputedStyle. Return true so the footer slot\n    // renders as visible during server-side rendering.\n    if (typeof window === 'undefined') {\n      return true\n    }\n\n    const footerEl = this.querySelector<HTMLElement>(':scope > [slot=\"footer\"]')\n    if (!footerEl) {\n      return false\n    }\n\n    const style = window.getComputedStyle(footerEl)\n    return (\n      style.display !== 'none'\n      && style.visibility !== 'hidden'\n      && style.visibility !== 'collapse'\n      && style.opacity !== '0'\n      && style.contentVisibility !== 'hidden'\n    )\n  }\n\n  render() {\n    return html`\n      <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n      <div class=\"n-navigation-main\">\n        <nav>\n          <slot></slot>\n        </nav>\n        ${!this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n      </div>\n      ${this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n    `\n  }\n\n  private handleActivate = (e: Event) => {\n    const target = e.target as NavItem\n    const ancestors = new Set<NavItem>()\n\n    // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n    // it's more efficient to first gather ancestors here,\n    // than to repeatedly call item.contains(target) in the for-loop below.\n    let parent = target.parentElement?.closest('nord-nav-item')\n    while (parent) {\n      ancestors.add(parent)\n      parent = parent.parentElement?.closest('nord-nav-item')\n    }\n\n    // open and activate any items on the path, otherwise close and deactivate.\n    // however, if the item is set to open initially, we should not close it.\n    for (const item of this.querySelectorAll('nord-nav-item')) {\n      if (item !== target) {\n        const isAncestor = ancestors.has(item)\n        item.open = isAncestor || (this.allowItemsToRemainOpen && item.open)\n        item.active = isAncestor\n      }\n    }\n\n    // this is a one-time thing, purely for initial open state\n    this.allowItemsToRemainOpen = false\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-navigation': Navigation\n  }\n}\n"],"names":["railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","footerObserver","allowItemsToRemainOpen","stickyFooter","handleViewportChange","updateRailState","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","activeItem","querySelector","window","observeFooter","startObservingLayout","disconnectedCallback","disconnect","stopObservingLayout","observedLayout","layoutObserver","MutationObserver","observe","attributes","attributeFilter","undefined","toggleAttribute","next","getAttribute","hasAttribute","requestUpdate","childList","footerEl","isFooterVisible","style","getComputedStyle","display","visibility","opacity","contentVisibility","render","html","isEmpty","nothing","styles","componentStyle","__decorate","property","type","Boolean","reflect","attribute","prototype","customElement"],"mappings":"ggLAaMA,EACoB,oBAAfC,WACLA,WAAW,sBACV,CACCC,SAAS,EACT,gBAAAC,GAEC,EACD,mBAAAC,GAEC,GA2BM,IAAMC,EAAN,cAAyBC,EAAzB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,OAAS,IAAIC,EAAgBJ,MAC7BA,KAAcK,eAA4B,KAG1CL,KAAsBM,wBAAG,EAKuCN,KAAYO,cAAY,EA6BxFP,KAAoBQ,qBAAG,IAAMR,KAAKS,kBAyFlCT,KAAAU,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,iBAKzC,IAAK,MAAMG,KAAQrB,KAAKsB,iBAAiB,iBACvC,GAAID,IAAST,EAAQ,CACnB,MAAMW,EAAaV,EAAUW,IAAIH,GACjCA,EAAKI,KAAOF,GAAevB,KAAKM,wBAA0Be,EAAKI,KAC/DJ,EAAKK,OAASH,CACf,CAIHvB,KAAKM,wBAAyB,CAAK,CAEtC,CA9IC,iBAAAqB,GACEC,MAAMD,oBAIN3B,KAAKG,OAAO0B,OAAO7B,KAAM,WAAYA,KAAKU,gBAI1C,MAAMoB,EAAa9B,KAAK+B,cAAc,yBACtC/B,KAAKM,uBAAuC,MAAdwB,EAER,oBAAXE,QACThC,KAAKiC,gBAEPjC,KAAKkC,uBACL1C,EAAeG,iBAAiB,SAAUK,KAAKQ,qBAChD,CAED,oBAAA2B,SACEP,MAAMO,uBACe,QAArBnB,EAAAhB,KAAKK,sBAAgB,IAAAW,GAAAA,EAAAoB,aACrBpC,KAAKK,eAAiB,KACtBL,KAAKqC,sBACL7C,EAAeI,oBAAoB,SAAUI,KAAKQ,qBACnD,CAIO,oBAAA0B,GACNlC,KAAKsC,eAAiBtC,KAAKkB,QAAqB,eAC3ClB,KAAKsC,iBAGVtC,KAAKS,kBACLT,KAAKuC,eAAiB,IAAIC,kBAAiB,IAAMxC,KAAKS,oBACtDT,KAAKuC,eAAeE,QAAQzC,KAAKsC,eAAgB,CAC/CI,YAAY,EACZC,gBAAiB,CAAC,WAAY,mBAEjC,CAEO,mBAAAN,SACe,QAArBrB,EAAAhB,KAAKuC,sBAAgB,IAAAvB,GAAAA,EAAAoB,aACrBpC,KAAKuC,oBAAiBK,EACtB5C,KAAKsC,oBAAiBM,EACtB5C,KAAK6C,gBAAgB,uBAAuB,EAC7C,CAEO,eAAApC,GACN,IAAKT,KAAKsC,eACR,OAEF,MAAMQ,EAAOtD,EAAeE,SAC+B,SAAtDM,KAAKsC,eAAeS,aAAa,mBAChC/C,KAAKsC,eAAeU,aAAa,YACvChD,KAAK6C,gBAAgB,sBAAuBC,EAC7C,CAOO,aAAAb,GACNjC,KAAKK,eAAiB,IAAImC,kBAAiB,IAAMxC,KAAKiD,kBAGtDjD,KAAKK,eAAeoC,QAAQzC,KAAM,CAAEkD,WAAW,IAG/C,MAAMC,EAAWnD,KAAK+B,cAAc,4BAChCoB,GACFnD,KAAKK,eAAeoC,QAAQU,EAAU,CACpCT,YAAY,EACZC,gBAAiB,CAAC,QAAS,UAGhC,CAED,mBAAYS,GAIV,GAAsB,oBAAXpB,OACT,OAAO,EAGT,MAAMmB,EAAWnD,KAAK+B,cAA2B,4BACjD,IAAKoB,EACH,OAAO,EAGT,MAAME,EAAQrB,OAAOsB,iBAAiBH,GACtC,MACoB,SAAlBE,EAAME,SACkB,WAArBF,EAAMG,YACe,aAArBH,EAAMG,YACY,MAAlBH,EAAMI,SACsB,WAA5BJ,EAAMK,iBAEZ,CAED,MAAAC,GACE,OAAOC,CAAI,gCACqB5D,KAAKC,WAAW4D,0EAKzC7D,KAAKO,aAAoFuD,EAArEF,CAAI,iCAAgC5D,KAAKoD,mCAEhEpD,KAAKO,aAAeqD,CAAI,iCAAgC5D,KAAKoD,2BAA4BU,GAE9F,GAhIMjE,EAAAkE,OAAS,CAACC,EAAgBX,GAYuCY,EAAA,CAAvEC,EAAS,CAAEC,KAAMC,QAASC,SAAS,EAAMC,UAAW,mBAAgDzE,EAAA0E,UAAA,oBAAA,GAblF1E,EAAUoE,EAAA,CAD9BO,EAAc,oBACM3E,SAAAA"}
+{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import type NavItem from '../nav-item/NavItem.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Navigation.css'\n\n// Mirrors the layout's wide-viewport breakpoint. Used to drive the\n// `data-rail-collapsed` attribute below — Safari doesn't support\n// `:host-context()`, so we propagate the layout's rail state via an\n// observed attribute on the host instead.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n * @cssprop [--n-navigation-scroll-shadow-color-start=rgb(0, 0, 0, 0.1)] - Color of the scroll-affordance shadow shown at the top of the scroll area (below the header) when `sticky-footer` is set. Set to `transparent` to disable.\n * @cssprop [--n-navigation-scroll-shadow-color-end=rgb(0, 0, 0, 0.1)] - Color of the scroll-affordance shadow shown at the bottom of the scroll area (above the footer) when `sticky-footer` is set. Set to `transparent` to disable.\n * @cssprop [--n-navigation-scroll-mask=none] - `mask-image` applied to the scrollable area when `sticky-footer` is set. Use with the shadow colors set to `transparent` to replace the dark scroll-shadow with a soft content fade at the edges. Example: `linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%)`.\n * @cssprop [--n-navigation-padding-block=var(--n-space-m)] - Block-axis (top/bottom) padding of the `<nav>` element that wraps the slotted nav groups.\n * @cssprop [--n-navigation-padding-inline=var(--n-space-m)] - Inline-axis (start/end) padding of the `<nav>` element that wraps the slotted nav groups.\n * @cssprop [--n-navigation-footer-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding inside the footer slot when `sticky-footer` is set. Has no visual effect when the footer slot is empty (slot is hidden in that case).\n * @cssprop [--n-navigation-footer-padding-inline=var(--n-navigation-padding-inline)] - Inline-axis (start/end) padding inside the footer slot when `sticky-footer` is set. Defaults to `--n-navigation-padding-inline` so the footer aligns with the nav content unless overridden. Has no visual effect when the footer slot is empty.\n */\n@customElement('nord-navigation')\nexport default class Navigation extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, 'header')\n  private events = new EventController(this)\n  private footerObserver: MutationObserver | null = null\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private allowItemsToRemainOpen = false\n\n  /**\n   * Controls whether the navigations's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    // if we add this event listener during render\n    // we seem to miss the first activate event.\n    // so let's add it as early as possible.\n    this.events.listen(this, 'activate', this.handleActivate)\n\n    // in cases where there is an initially active nav-item,\n    // we should allow any nav-items with the `open` attribute to remain open.\n    const activeItem = this.querySelector('nord-nav-item[active]')\n    this.allowItemsToRemainOpen = activeItem != null\n\n    if (typeof window !== 'undefined') {\n      this.observeFooter()\n    }\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.footerObserver?.disconnect()\n    this.footerObserver = null\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.toggleAttribute('data-rail-collapsed', false)\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    const next = railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    this.toggleAttribute('data-rail-collapsed', next)\n  }\n\n  /**\n   * Observe the footer slot element for visibility changes.\n   * Watches style and class attributes on the footer element itself, and\n   * childList on the host to detect footer being added/removed (e.g. v-if).\n   */\n  private observeFooter() {\n    this.footerObserver = new MutationObserver(() => this.requestUpdate())\n\n    // Watch for footer element being added/removed from the host\n    this.footerObserver.observe(this, { childList: true })\n\n    // Watch hidden attribute on the footer element directly\n    const footerEl = this.querySelector(':scope > [slot=\"footer\"]')\n    if (footerEl) {\n      this.footerObserver.observe(footerEl, {\n        attributes: true,\n        attributeFilter: ['style', 'class'],\n      })\n    }\n  }\n\n  private get isFooterVisible() {\n    // In SSR, the element is backed by a minimal DOM shim that does not implement\n    // querySelector or window.getComputedStyle. Return true so the footer slot\n    // renders as visible during server-side rendering.\n    if (typeof window === 'undefined') {\n      return true\n    }\n\n    const footerEl = this.querySelector<HTMLElement>(':scope > [slot=\"footer\"]')\n    if (!footerEl) {\n      return false\n    }\n\n    const style = window.getComputedStyle(footerEl)\n    return (\n      style.display !== 'none'\n      && style.visibility !== 'hidden'\n      && style.visibility !== 'collapse'\n      && style.opacity !== '0'\n      && style.contentVisibility !== 'hidden'\n    )\n  }\n\n  render() {\n    return html`\n      <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n      <div class=\"n-navigation-main\">\n        <nav>\n          <slot></slot>\n        </nav>\n        ${!this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n      </div>\n      ${this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n    `\n  }\n\n  private handleActivate = (e: Event) => {\n    const target = e.target as NavItem\n    const ancestors = new Set<NavItem>()\n\n    // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n    // it's more efficient to first gather ancestors here,\n    // than to repeatedly call item.contains(target) in the for-loop below.\n    let parent = target.parentElement?.closest('nord-nav-item')\n    while (parent) {\n      ancestors.add(parent)\n      parent = parent.parentElement?.closest('nord-nav-item')\n    }\n\n    // open and activate any items on the path, otherwise close and deactivate.\n    // however, if the item is set to open initially, we should not close it.\n    for (const item of this.querySelectorAll('nord-nav-item')) {\n      if (item !== target) {\n        const isAncestor = ancestors.has(item)\n        item.open = isAncestor || (this.allowItemsToRemainOpen && item.open)\n        item.active = isAncestor\n      }\n    }\n\n    // this is a one-time thing, purely for initial open state\n    this.allowItemsToRemainOpen = false\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-navigation': Navigation\n  }\n}\n"],"names":["railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","footerObserver","allowItemsToRemainOpen","stickyFooter","handleViewportChange","updateRailState","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","activeItem","querySelector","window","observeFooter","startObservingLayout","disconnectedCallback","disconnect","stopObservingLayout","observedLayout","layoutObserver","MutationObserver","observe","attributes","attributeFilter","undefined","toggleAttribute","next","getAttribute","hasAttribute","requestUpdate","childList","footerEl","isFooterVisible","style","getComputedStyle","display","visibility","opacity","contentVisibility","render","html","isEmpty","nothing","styles","componentStyle","__decorate","property","type","Boolean","reflect","attribute","prototype","customElement"],"mappings":"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"}

package/lib/Notification.js

@@ -1,2 +1,2 @@
-import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as t,LitElement as n}from"lit";import{customElement as r}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ref as a}from"lit/directives/ref.js";import{N as e}from"./NotificationMixin-DOUQsx7N.js";import{s as l}from"./Component-DSU3Qp0O.js";import{LocalizeController as c}from"./LocalizeController.js";import"./Stack.js";import"./Icon.js";import"./events-Bv6wNHwJ.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const m=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:rgb(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 d=class extends(e(n)){constructor(){super(...arguments),this.localize=new c(this)}render(){return t`<div ${a(this.notificationRef)} class="${s({"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>`}};d.styles=[l,m],d=i([r("nord-notification")],d);var p=d;export{p as default};
+import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as t,LitElement as n}from"lit";import{customElement as a}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ref as r}from"lit/directives/ref.js";import{N as e}from"./NotificationMixin-DOUQsx7N.js";import{s as l}from"./Component-BJ5O5n8k.js";import{LocalizeController as c}from"./LocalizeController.js";import"./Stack.js";import"./Icon.js";import"./events-Bv6wNHwJ.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const m=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{animation:n-enter var(--n-transition-slowly) forwards 1;background:var(--n-color-surface-raised);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-nav);color:var(--n-color-text-weaker);padding-block-end:var(--n-space-l);padding-block-start:calc(var(--n-space-l)/1.2);padding-inline-end:var(--n-space-m);padding-inline-start:calc(var(--n-space-l)/1.2);position:relative}.n-notification-body{flex:1;padding-inline-end:var(--_n-notification-dismiss-size)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{0%{opacity:0;transform:translateY(10%)}}@keyframes n-exit{to{opacity:0;transform:scale(.97)}}.n-dismiss{align-items:center;background-color:initial;block-size:var(--_n-notification-dismiss-size);border:none;border-radius:var(--n-border-radius-s);color:var(--n-color-icon);cursor:pointer;display:flex;inline-size:var(--_n-notification-dismiss-size);inset-block-start:14px;inset-inline-end:var(--n-space-m);justify-content:center;position:absolute;transition:opacity var(--n-transition-slowly),color var(--n-transition-slowly)}.n-dismiss:hover{background:#0000000a;color:var(--n-color-text)}.n-dismiss:active{opacity:.8;transform:translateY(1px)}.n-dismiss:focus{box-shadow:var(--_n-notification-focus-ring);outline:none}@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;font-style:normal!important;font-weight:var(--n-font-weight-active)!important;line-height:var(--n-line-height)!important;margin:0 0 var(--n-space-s)!important}::slotted(p){color:var(--n-color-text-weaker)!important;font-size:var(--n-font-size-m)!important;font-style:normal!important;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height)!important;margin:0!important}::slotted(a){color:var(--n-color-text-link)!important;display:block;font-style:normal!important;font-weight:var(--n-font-weight)!important;margin:var(--n-space-s) 0 0!important;text-decoration:none!important}::slotted(a:hover){text-decoration:underline!important}`;let p=class extends(e(n)){constructor(){super(...arguments),this.localize=new c(this)}render(){return t`<div ${r(this.notificationRef)} class="${s({"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,m],p=i([a("nord-notification")],p);var d=p;export{d 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 { html, LitElement } 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 { NotificationMixin } from '../common/mixins/NotificationMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Notification.css'\nimport '../stack/Stack.js'\nimport '../icon/Icon.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 ready\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(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","LitElement","constructor","this","localize","LocalizeController","render","html","ref","notificationRef","classMap","dismissed","dismiss","term","styles","componentStyle","style","__decorate","customElement"],"mappings":"wxGAwBe,IAAMA,EAAN,cAA2BC,EAAkBC,IAA7C,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAAwCF,KAoBhE,CAlBC,MAAAG,GACE,OAAOC,CAAI,QACFC,EAAIL,KAAKM,2BAA0BC,EAAS,CAAE,kBAAkB,EAAM,cAAeP,KAAKQ,kDAC5DR,KAAKS,qEACoBT,KAAKC,SAASS,KAAK,wPAapF,GArBMd,EAAAe,OAAS,CAACC,EAAgBC,GADdjB,EAAYkB,EAAA,CADhCC,EAAc,sBACMnB,SAAAA"}
+{"version":3,"file":"Notification.js","sources":["../src/notification/Notification.ts"],"sourcesContent":["import { html, LitElement } 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 { NotificationMixin } from '../common/mixins/NotificationMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Notification.css'\nimport '../stack/Stack.js'\nimport '../icon/Icon.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 ready\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(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","LitElement","constructor","this","localize","LocalizeController","render","html","ref","notificationRef","classMap","dismissed","dismiss","term","styles","componentStyle","style","__decorate","customElement"],"mappings":"mnHAwBe,IAAMA,EAAN,cAA2BC,EAAkBC,IAA7C,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAAwCF,KAoBhE,CAlBC,MAAAG,GACE,OAAOC,CAAI,QACFC,EAAIL,KAAKM,2BAA0BC,EAAS,CAAE,kBAAkB,EAAM,cAAeP,KAAKQ,kDAC5DR,KAAKS,qEACoBT,KAAKC,SAASS,KAAK,wPAapF,GArBMd,EAAAe,OAAS,CAACC,EAAgBC,GADdjB,EAAYkB,EAAA,CADhCC,EAAc,sBACMnB,SAAAA"}

package/lib/NotificationGroup.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as i,LitElement as t,html as o}from"lit";import{customElement as e}from"lit/decorators.js";import{s}from"./Component-DSU3Qp0O.js";const a=i`: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);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 r=class extends t{render(){return o`<div class="n-notification-group"><slot></slot></div>`}};r.styles=[s,a],r=n([e("nord-notification-group")],r);var l=r;export{l as default};
+import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as o,html as t}from"lit";import{customElement as e}from"lit/decorators.js";import{s}from"./Component-BJ5O5n8k.js";const a=n`:host{--_n-notification-group-mask:linear-gradient(#000 95%,#0000);inset-block-end:0;inset-block-start:0;inset-inline-end:0;mask-image:var(--_n-notification-group-mask);pointer-events:none;position:fixed;z-index:var(--n-index-modal)}.n-notification-group{align-items:end;display:flex;flex-direction:column;gap:var(--n-space-m);margin:var(--n-space-m)}::slotted(nord-notification){inline-size:100%;max-inline-size:400px;pointer-events:auto}`;let r=class extends o{render(){return t`<div class="n-notification-group"><slot></slot></div>`}};r.styles=[s,a],r=i([e("nord-notification-group")],r);var l=r;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 { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.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 ready\n * @category feedback\n * @slot - Default slot in which to place notifications.\n *\n * @fires {NordEvent} dismiss - Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.\n */\n@customElement('nord-notification-group')\nexport default class NotificationGroup extends 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","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"yoBAgBe,IAAMA,EAAN,cAAgCC,EAG7C,MAAAC,GACE,OAAOC,CAAI,uDAKZ,GARMH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAiBO,EAAA,CADrCC,EAAc,4BACMR,SAAAA"}
+{"version":3,"file":"NotificationGroup.js","sources":["../src/notification-group/NotificationGroup.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.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 ready\n * @category feedback\n * @slot - Default slot in which to place notifications.\n *\n * @fires {NordEvent} dismiss - Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.\n *\n * @parent Notification\n */\n@customElement('nord-notification-group')\nexport default class NotificationGroup extends 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","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"4nBAkBe,IAAMA,EAAN,cAAgCC,EAG7C,MAAAC,GACE,OAAOC,CAAI,uDAKZ,GARMH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAiBO,EAAA,CADrCC,EAAc,4BACMR,SAAAA"}