@nordhealth/components 4.19.0 → 4.20.0

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\ninterface Options<T> {\n  channelName: string\n  onMessage: (message: T) => void\n  enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n  private channel?: BroadcastChannel\n  private options: Required<Options<T>>\n\n  constructor(host: ReactiveControllerHost, options: Options<T>) {\n    host.addController(this)\n    this.options = { enabled: defaultEnabled, ...options }\n  }\n\n  hostConnected(): void {\n    if (typeof BroadcastChannel !== 'undefined') {\n      this.channel = new BroadcastChannel(this.options.channelName)\n      this.channel.addEventListener('message', this)\n    }\n  }\n\n  hostDisconnected(): void {\n    this.channel?.removeEventListener('message', this)\n    this.channel?.close()\n  }\n\n  handleEvent(event: MessageEvent<T>) {\n    if (this.options.enabled()) {\n      this.options.onMessage(event.data)\n    }\n  }\n\n  post(message: T) {\n    if (this.options.enabled()) {\n      this.channel?.postMessage(message)\n    }\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse,\n) {\n  return {\n    get value(): T {\n      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      }\n      catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      }\n      catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n","import type { Events, States } from '../common/fsm.js'\nimport type NavItem from '../nav-item/NavItem.js'\nimport * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { BroadcastChannelController } from '../common/controllers/BroadcastChannelController.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { fsm } from '../common/fsm.js'\nimport { clamp } from '../common/number.js'\nimport { storage } from '../common/storage.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport stickyStyle from '../common/styles/Sticky.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Layout.css'\nimport '../nav-toggle/NavToggle.js'\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\nconst navWidthStore = storage('nord-layout.navWidth', NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage('nord-layout.navOpen', true)\n\nconst navMachine = fsm({\n  opened: {\n    toggle: 'closed',\n    close: 'closed',\n  },\n  closed: {\n    toggle: 'opened',\n    open: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n  },\n  peek: {\n    toggle: 'opened',\n    focusout: 'unpeek',\n    pointerleave: 'wait',\n    dropdownOpen: 'blocked',\n    click: 'unpeek',\n    open: 'opened',\n  },\n  blocked: {\n    dropdownClose: 'peek',\n    open: 'opened',\n  },\n  wait: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    timeout: 'unpeek',\n  },\n  unpeek: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    transitionend: 'closed',\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === 'nord-nav-item'\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement('nord-layout')\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, 'nav')\n  private drawerSlot = new SlotController(this, 'drawer')\n  private topBarSlot = new SlotController(this, 'top-bar')\n  private headerSlot = new SlotController(this, 'header')\n  private footerSlot = new SlotController(this, 'footer')\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === 'opened' && !this.wideScreen,\n    onDismiss: () => this.navTransition('close'),\n    isDismissible: node => node !== this.navEl,\n  })\n\n  private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: 'nord-layout-nav-state',\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: (data) => {\n      if ('navOpen' in data) {\n        this.navOpen = data.navOpen\n      }\n      if ('navWidth' in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })\n\n  @query('.n-layout-nav', true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = navWidthStore.value\n  @state() private isDragging = false\n  @state() private navState!: NavState\n  @state() private wideScreen = mediaQuery.matches\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'nav-open' }) navOpen!: boolean\n\n  /**\n   * Controls whether the navigation's open/closed state is persisted across page loads.\n   * This is useful for multi-page apps, where clicks on links trigger a full page load.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'persist-nav-state' }) persistNavState = false\n\n  /**\n   * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n   * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sync-nav-state' }) syncNavState = false\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: 'm' | 'none' = 'm'\n\n  /**\n   * Controls whether the layout's header has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n  /**\n   * Controls whether the layout's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  /**\n   * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n   * A narrow viewport is considered to be less than 768px wide.\n   */\n  get isNarrow(): boolean {\n    return !this.wideScreen\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n  }\n\n  willUpdate() {\n    // we only want this logic to run once, before first render\n    if (this.hasUpdated) {\n      return\n    }\n\n    // on mobile it should always start closed\n    if (this.isNarrow) {\n      this.navState = 'closed'\n    }\n    // if nav state is persisted, and it was previously closed, start closed\n    else if (this.persistNavState && navOpenStore.value === false) {\n      this.navState = 'closed'\n    }\n    // otherwise start open\n    else {\n      this.navState = 'opened'\n    }\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === 'opened' && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n\n    return html`\n      <div\n        class=${classMap({\n          'n-layout': true,\n          'n-rtl': direction.isRTL,\n          'n-dragging': isDragging,\n          'n-has-header': headerSlot.hasContent,\n          'n-has-footer': footerSlot.hasContent,\n          'n-has-top-bar': topBarSlot.hasContent,\n          'n-has-drawer': drawerSlot.hasContent,\n          'n-has-nav': navSlot.hasContent,\n        })}\n        style=${styleMap({\n          '--_n-layout-nav-width': `${adjustedNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : 'closed'}\n        data-screen=${this.wideScreen ? 'wide' : 'narrow'}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === 'opened', this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n            <slot name=\"footer\"></slot>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    return html`\n      <div class=\"n-nav-toggle-container\">\n        <slot\n          name=\"nav-toggle\"\n          @click=${this.handleToggleClick}\n          @mouseover=${this.handleMouseEnter}\n          @mouseout=${this.handleMouseLeave}\n        >\n          <nord-nav-toggle></nord-nav-toggle>\n        </slot>\n      </div>\n    `\n  }\n\n  private renderNavCollapse() {\n    return html`\n      <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n        <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n      </button>\n    `\n  }\n\n  @observe('navWidth', 'updated')\n  protected handleNavWidthChange() {\n    navWidthStore.value = this.navWidth\n  }\n\n  @observe('navState')\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === 'wait' && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === 'unpeek') {\n      this.navEl.removeEventListener('transitionend', this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case 'closed':\n        this.navOpen = false\n        break\n      case 'opened':\n        this.navOpen = true\n        break\n      case 'wait':\n        this.peekTimeoutId = setTimeout(() => this.navTransition('timeout'), NAV_PEEK_DELAY)\n        break\n      case 'unpeek':\n        this.navEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe('navOpen', 'updated')\n  protected handleOpenChange(prev: boolean) {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n    }\n\n    this.navTransition(this.navOpen ? 'open' : 'close')\n\n    if (this.persistNavState) {\n      navOpenStore.value = this.navOpen\n    }\n\n    // skip first update, we only want subsequent changes\n    if (prev != null) {\n      this.broadcast.post({ navOpen: this.navOpen })\n    }\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleNavClick(e: Event) {\n    if (!e.defaultPrevented && !this.wideScreen) {\n      const target = e.target as HTMLElement\n\n      if (isNavItemLeaf(target)) {\n        this.navTransition('close')\n      }\n    }\n  }\n\n  private handleMainClick() {\n    this.navTransition('click')\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownOpen')\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownClose')\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.wideScreen = mediaQuery.matches\n    this.navTransition(this.wideScreen ? 'open' : 'close')\n  }\n\n  private handleToggleClick = () => {\n    this.navTransition('toggle')\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition('focusin')\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition('focusout')\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\n      this.navTransition('pointerenter')\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition('pointerleave')\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition('transitionend')\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case 'ArrowRight':\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case 'Enter':\n        this.navTransition('toggle')\n        break\n      case 'Home':\n        this.setNavWidth(NAV_MIN_WIDTH)\n        break\n      case 'End':\n        this.setNavWidth(NAV_MAX_WIDTH)\n        break\n      default:\n        return\n    }\n\n    this.broadcast.post({ navWidth: this.navWidth })\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n  }\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n    this.broadcast.post({ navWidth: this.navWidth })\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? 'open' : 'close')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-layout': Layout\n  }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","mediaQuery","matchMedia","matches","navWidthStore","navOpenStore","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","persistNavState","padding","sticky","stickyFooter","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","willUpdate","hasUpdated","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\ninterface Options<T> {\n  channelName: string\n  onMessage: (message: T) => void\n  enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n  private channel?: BroadcastChannel\n  private options: Required<Options<T>>\n\n  constructor(host: ReactiveControllerHost, options: Options<T>) {\n    host.addController(this)\n    this.options = { enabled: defaultEnabled, ...options }\n  }\n\n  hostConnected(): void {\n    if (typeof BroadcastChannel !== 'undefined') {\n      this.channel = new BroadcastChannel(this.options.channelName)\n      this.channel.addEventListener('message', this)\n    }\n  }\n\n  hostDisconnected(): void {\n    this.channel?.removeEventListener('message', this)\n    this.channel?.close()\n  }\n\n  handleEvent(event: MessageEvent<T>) {\n    if (this.options.enabled()) {\n      this.options.onMessage(event.data)\n    }\n  }\n\n  post(message: T) {\n    if (this.options.enabled()) {\n      this.channel?.postMessage(message)\n    }\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse,\n) {\n  return {\n    get value(): T {\n      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      }\n      catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      }\n      catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n","import type { Events, States } from '../common/fsm.js'\nimport type NavItem from '../nav-item/NavItem.js'\nimport * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { BroadcastChannelController } from '../common/controllers/BroadcastChannelController.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { fsm } from '../common/fsm.js'\nimport { clamp } from '../common/number.js'\nimport { storage } from '../common/storage.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport stickyStyle from '../common/styles/Sticky.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Layout.css'\nimport '../nav-toggle/NavToggle.js'\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\nconst navWidthStore = storage('nord-layout.navWidth', NAV_DEFAULT_WIDTH)\n// Tracks the last `default-nav-width` we wrote, so we can re-seed the\n// stored width when consumers change the default between loads.\n// Initial default matches NAV_DEFAULT_WIDTH so existing consumers that\n// never set `default-nav-width` get no re-seed on upgrade — their users'\n// persisted widths are preserved.\nconst navWidthDefaultStore = storage('nord-layout.navWidthDefault', NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage('nord-layout.navOpen', true)\n\nconst navMachine = fsm({\n  opened: {\n    toggle: 'closed',\n    close: 'closed',\n  },\n  closed: {\n    toggle: 'opened',\n    open: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n  },\n  peek: {\n    toggle: 'opened',\n    focusout: 'unpeek',\n    pointerleave: 'wait',\n    dropdownOpen: 'blocked',\n    click: 'unpeek',\n    open: 'opened',\n  },\n  blocked: {\n    dropdownClose: 'peek',\n    open: 'opened',\n  },\n  wait: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    timeout: 'unpeek',\n  },\n  unpeek: {\n    toggle: 'opened',\n    focusin: 'peek',\n    pointerenter: 'peek',\n    transitionend: 'closed',\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === 'nord-nav-item'\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement('nord-layout')\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, 'nav')\n  private drawerSlot = new SlotController(this, 'drawer')\n  private topBarSlot = new SlotController(this, 'top-bar')\n  private headerSlot = new SlotController(this, 'header')\n  private footerSlot = new SlotController(this, 'footer')\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === 'opened' && !this.wideScreen,\n    onDismiss: () => this.navTransition('close'),\n    isDismissible: node => node !== this.navEl,\n  })\n\n  private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n    channelName: 'nord-layout-nav-state',\n    enabled: () => this.syncNavState && this.wideScreen,\n    onMessage: (data) => {\n      if ('navOpen' in data) {\n        this.navOpen = data.navOpen\n      }\n      if ('navWidth' in data) {\n        this.navWidth = data.navWidth\n      }\n    },\n  })\n\n  @query('.n-layout-nav', true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = navWidthStore.value\n  @state() private isDragging = false\n  @state() private navState!: NavState\n  @state() private wideScreen = mediaQuery.matches\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'nav-open' }) navOpen!: boolean\n\n  /**\n   * Controls whether the navigation's open/closed state is persisted across page loads.\n   * This is useful for multi-page apps, where clicks on links trigger a full page load.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'persist-nav-state' }) persistNavState = false\n\n  /**\n   * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n   * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sync-nav-state' }) syncNavState = false\n\n  /**\n   * Initial width (in pixels) of the navigation sidebar when no value has been persisted.\n   * Changing this value between loads also re-seeds the persisted width for existing users,\n   * so design changes propagate without manual localStorage resets.\n   */\n  @property({ type: Number, reflect: true, attribute: 'default-nav-width' }) defaultNavWidth = NAV_DEFAULT_WIDTH\n\n  /**\n   * Minimum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n   */\n  @property({ type: Number, reflect: true, attribute: 'min-nav-width' }) minNavWidth = NAV_MIN_WIDTH\n\n  /**\n   * Maximum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n   */\n  @property({ type: Number, reflect: true, attribute: 'max-nav-width' }) maxNavWidth = NAV_MAX_WIDTH\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: 'm' | 'none' = 'm'\n\n  /**\n   * Controls whether the layout's header has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n  /**\n   * Controls whether the layout's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  /**\n   * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n   * A narrow viewport is considered to be less than 768px wide.\n   */\n  get isNarrow(): boolean {\n    return !this.wideScreen\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n  }\n\n  willUpdate() {\n    // we only want this logic to run once, before first render\n    if (this.hasUpdated) {\n      return\n    }\n\n    // fall back to the built-in constants when consumer-provided attributes\n    // are non-numeric (e.g. `min-nav-width=\"abc\"` produces NaN). reflect:true\n    // also rewrites the attribute in the DOM to the sanitized value\n    if (!Number.isFinite(this.defaultNavWidth)) {\n      this.defaultNavWidth = NAV_DEFAULT_WIDTH\n    }\n    if (!Number.isFinite(this.minNavWidth)) {\n      this.minNavWidth = NAV_MIN_WIDTH\n    }\n    if (!Number.isFinite(this.maxNavWidth)) {\n      this.maxNavWidth = NAV_MAX_WIDTH\n    }\n\n    // re-seed persisted width when the consumer-provided default-nav-width\n    // differs from the last default we applied. This lets apps roll out a\n    // new sidebar default without manual localStorage migrations.\n    if (navWidthDefaultStore.value !== this.defaultNavWidth) {\n      this.setNavWidth(this.defaultNavWidth)\n      navWidthStore.value = this.navWidth\n      // store the raw consumer-provided default so mismatch detection is\n      // independent of the min/max clamp\n      navWidthDefaultStore.value = this.defaultNavWidth\n    }\n    else {\n      // ensure a previously-persisted width still respects current min/max\n      this.setNavWidth(this.navWidth)\n    }\n\n    // on mobile it should always start closed\n    if (this.isNarrow) {\n      this.navState = 'closed'\n    }\n    // if nav state is persisted, and it was previously closed, start closed\n    else if (this.persistNavState && navOpenStore.value === false) {\n      this.navState = 'closed'\n    }\n    // otherwise start open\n    else {\n      this.navState = 'opened'\n    }\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === 'opened' && this.wideScreen ? navWidth : this.defaultNavWidth\n\n    return html`\n      <div\n        class=${classMap({\n          'n-layout': true,\n          'n-rtl': direction.isRTL,\n          'n-dragging': isDragging,\n          'n-has-header': headerSlot.hasContent,\n          'n-has-footer': footerSlot.hasContent,\n          'n-has-top-bar': topBarSlot.hasContent,\n          'n-has-drawer': drawerSlot.hasContent,\n          'n-has-nav': navSlot.hasContent,\n        })}\n        style=${styleMap({\n          '--_n-layout-nav-width': `${adjustedNavWidth}px`,\n        })}\n        data-nav=${navSlot.hasContent ? navState : 'closed'}\n        data-screen=${this.wideScreen ? 'wide' : 'narrow'}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === 'opened', this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n            ?hidden=${this.isNarrow}\n          ></div>\n          ${this.renderNavCollapse()}\n        </div>\n\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n          ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n          <div class=\"n-top-bar-container\">\n            <slot name=\"top-bar\"></slot>\n          </div>\n\n          <div class=\"n-layout-content\">\n            <div class=\"n-sticky\">\n              <slot name=\"header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n            </main>\n            <slot name=\"footer\"></slot>\n          </div>\n\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNavToggle() {\n    return html`\n      <div class=\"n-nav-toggle-container\">\n        <slot\n          name=\"nav-toggle\"\n          @click=${this.handleToggleClick}\n          @mouseover=${this.handleMouseEnter}\n          @mouseout=${this.handleMouseLeave}\n        >\n          <nord-nav-toggle></nord-nav-toggle>\n        </slot>\n      </div>\n    `\n  }\n\n  private renderNavCollapse() {\n    return html`\n      <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n        <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n      </button>\n    `\n  }\n\n  @observe('navWidth', 'updated')\n  protected handleNavWidthChange() {\n    navWidthStore.value = this.navWidth\n  }\n\n  @observe('navState')\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === 'wait' && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === 'unpeek') {\n      this.navEl.removeEventListener('transitionend', this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case 'closed':\n        this.navOpen = false\n        break\n      case 'opened':\n        this.navOpen = true\n        break\n      case 'wait':\n        this.peekTimeoutId = setTimeout(() => this.navTransition('timeout'), NAV_PEEK_DELAY)\n        break\n      case 'unpeek':\n        this.navEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe('navOpen', 'updated')\n  protected handleOpenChange(prev: boolean) {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, this.defaultNavWidth))\n    }\n\n    this.navTransition(this.navOpen ? 'open' : 'close')\n\n    if (this.persistNavState) {\n      navOpenStore.value = this.navOpen\n    }\n\n    // skip first update, we only want subsequent changes\n    if (prev != null) {\n      this.broadcast.post({ navOpen: this.navOpen })\n    }\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleNavClick(e: Event) {\n    if (!e.defaultPrevented && !this.wideScreen) {\n      const target = e.target as HTMLElement\n\n      if (isNavItemLeaf(target)) {\n        this.navTransition('close')\n      }\n    }\n  }\n\n  private handleMainClick() {\n    this.navTransition('click')\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownOpen')\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === 'nord-dropdown') {\n      this.navTransition('dropdownClose')\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.wideScreen = mediaQuery.matches\n    this.navTransition(this.wideScreen ? 'open' : 'close')\n  }\n\n  private handleToggleClick = () => {\n    this.navTransition('toggle')\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition('focusin')\n  }\n\n  private handleMainFocus = () => {\n    this.navTransition('focusout')\n  }\n\n  private handleMouseEnter = () => {\n    if (this.wideScreen) {\n      this.navTransition('pointerenter')\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition('pointerleave')\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition('transitionend')\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case 'ArrowRight':\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case 'Enter':\n        this.navTransition('toggle')\n        break\n      case 'Home':\n        this.setNavWidth(this.minNavWidth)\n        break\n      case 'End':\n        this.setNavWidth(this.maxNavWidth)\n        break\n      default:\n        return\n    }\n\n    this.broadcast.post({ navWidth: this.navWidth })\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), this.minNavWidth, this.maxNavWidth)\n  }\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n    this.broadcast.post({ navWidth: this.navWidth })\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? 'open' : 'close')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-layout': Layout\n  }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","NAV_DEFAULT_WIDTH","mediaQuery","matchMedia","matches","navWidthStore","navWidthDefaultStore","navOpenStore","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","persistNavState","defaultNavWidth","minNavWidth","maxNavWidth","padding","sticky","stickyFooter","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","willUpdate","hasUpdated","Number","isFinite","setNavWidth","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","Math","max","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/Message.js

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

package/lib/Message.js.map

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

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,nothing as o,LitElement as a}from"lit";import{property as i,customElement as r}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ref as c}from"lit/directives/ref.js";import{D as l}from"./DirectionController-ChvNGESZ.js";import{S as v}from"./SlotController-Z6eG7LSZ.js";import{o as d}from"./observe-D0n0zOfU.js";import{c as p}from"./cond-CI1KbneT.js";import{N as h}from"./events-Bv6wNHwJ.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{s as f}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const b=e`:host{--_n-nav-item-box-shadow:none}.n-nav-item{user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:32px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative;z-index:var(--n-index-default)}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}:host([active]) .n-nav-item[aria-expanded]{--_n-nav-item-box-shadow:none;color:var(--n-color-text-weak);font-weight:var(--n-font-weight);background:0 0}:host([active]) .n-nav-item[aria-expanded]:focus-visible{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) .n-nav-item[aria-expanded]::after{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.12;background:var(--n-color-accent);filter:brightness(150%)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-notification);color:#fff;font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let u=class extends(m(a)){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}get hasSubNav(){return this.subnavSlot.hasContent}render(){const n=t`${this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:o}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:o}</div>`;let 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>`}renderLink(n){return t`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${p(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"}" ${c(this.focusableRef)}>${n}<nord-icon size="xxs" class="${s({"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" ${c(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new h("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new h("activate"))}};u.styles=[f,b],n([i({type:Boolean,reflect:!0})],u.prototype,"active",void 0),n([i({reflect:!0})],u.prototype,"icon",void 0),n([i({reflect:!0})],u.prototype,"href",void 0),n([i({reflect:!0})],u.prototype,"badge",void 0),n([i({reflect:!0,type:Boolean})],u.prototype,"open",void 0),n([d("active","updated")],u.prototype,"handleActiveChange",null),u=n([r("nord-nav-item")],u);var g=u;export{g as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as a,nothing as t,LitElement as o}from"lit";import{property as i,customElement as r}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ref as c}from"lit/directives/ref.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{o as d}from"./observe-D0n0zOfU.js";import{c as p}from"./cond-CI1KbneT.js";import{N as m}from"./events-Bv6wNHwJ.js";import{F as h}from"./FocusableMixin-BlQLNPdJ.js";import{s as g}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const b=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-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{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-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:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-notification);color:#fff;font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let u=class extends(h(o)){constructor(){super(...arguments),this.subnavSlot=new l(this,"subnav"),this.direction=new v(this),this.active=!1,this.open=!1}get hasSubNav(){return this.subnavSlot.hasContent}render(){const n=a`${this.icon?a`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:t}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?a`<span class="n-nav-badge">${this.badge}</span>`:t}</div>`;let e;return e=this.subnavSlot.hasContent?this.renderToggle(n):this.href?this.renderLink(n):this.renderButton(n),a`<div role="listitem">${e}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(n){return a`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${p(this.active,"page")}" href="${this.href||""}">${n}</a>`}renderToggle(n){return a`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${n}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(n){return a`<button class="n-nav-item" ${c(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new m("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new m("activate"))}};u.styles=[g,b],n([i({type:Boolean,reflect:!0})],u.prototype,"active",void 0),n([i({reflect:!0})],u.prototype,"icon",void 0),n([i({reflect:!0})],u.prototype,"href",void 0),n([i({reflect:!0})],u.prototype,"badge",void 0),n([i({reflect:!0,type:Boolean})],u.prototype,"open",void 0),n([d("active","updated")],u.prototype,"handleActiveChange",null),u=n([r("nord-nav-item")],u);var f=u;export{f 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 { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { 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\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\n */\n@customElement('nord-nav-item')\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, 'subnav')\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property({ reflect: true }) badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    }\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  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, 'page')} href=${this.href || ''}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ 'n-toggle-icon': true, 'n-rtl': this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent('toggle'))\n  }\n\n  @observe('active', 'updated')\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent('activate'))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-item': NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","hasSubNav","hasContent","render","innards","html","icon","nothing","badge","element","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"6gHA4Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBTL,KAAIM,MAAG,CA+EpD,CA1EC,aAAIC,GACF,OAAOP,KAAKC,WAAWO,UACxB,CAED,MAAAC,GACE,MAAMC,EAAUC,CAAI,GAChBX,KAAKY,KAAOD,CAAI,uCAAsCX,KAAKY,8BAA+BC,6EAGxFb,KAAKc,MAAQH,CAAI,6BAA6BX,KAAKc,eAAiBD,UAG1E,IAAIE,EAYJ,OATEA,EADEf,KAAKC,WAAWO,WACRR,KAAKgB,aAAaN,GAErBV,KAAKiB,KACFjB,KAAKkB,WAAWR,GAGhBV,KAAKmB,aAAaT,GAGvBC,CAAI,wBAELI,gBACWf,KAAKC,WAAWmB,uBAAqBpB,KAAKM,qBAG5D,CAEO,UAAAY,CAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAIrB,KAAKsB,+BAA8BC,EAAKvB,KAAKK,OAAQ,kBAAgBL,KAAKiB,MAAQ,OAC1GP,OAGP,CAEO,YAAAM,CAAaN,GACnB,OAAOC,CAAI,sCAGEX,KAAKwB,8BACExB,KAAKM,KAAO,OAAS,YACnCe,EAAIrB,KAAKsB,iBAETZ,iCAIQe,EAAS,CAAE,iBAAiB,EAAM,QAASzB,KAAKG,UAAUuB,gEAKzE,CAEO,YAAAP,CAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAIrB,KAAKsB,iBAAiBZ,YACpE,CAEO,UAAAc,GACNxB,KAAKM,MAAQN,KAAKM,KAClBN,KAAK2B,cAAc,IAAIC,EAAU,UAClC,CAGS,kBAAAC,GACJ7B,KAAKK,SAAWL,KAAKO,WACvBP,KAAK2B,cAAc,IAAIC,EAAU,YAEpC,GA7GMhC,EAAAkC,OAAS,CAACC,EAAgBC,GASWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK7BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBzC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBzC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAsBzC,EAAA0C,UAAA,aAAA,GAMCL,EAAA,CAA3CC,EAAS,CAAEG,SAAS,EAAMF,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GA0E9CL,EAAA,CADTM,EAAQ,SAAU,YAKlB3C,EAAA0C,UAAA,qBAAA,MA9GkB1C,EAAOqC,EAAA,CAD3BO,EAAc,kBACM5C,SAAAA"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { 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\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\n *\n * @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-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 */\n@customElement('nord-nav-item')\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, 'subnav')\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property({ reflect: true }) badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    }\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  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, 'page')} href=${this.href || ''}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ 'n-toggle-icon': true, 'n-rtl': this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent('toggle'))\n  }\n\n  @observe('active', 'updated')\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent('activate'))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-item': NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","hasSubNav","hasContent","render","innards","html","icon","nothing","badge","element","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"uhJA2Ce,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBTL,KAAIM,MAAG,CA+EpD,CA1EC,aAAIC,GACF,OAAOP,KAAKC,WAAWO,UACxB,CAED,MAAAC,GACE,MAAMC,EAAUC,CAAI,GAChBX,KAAKY,KAAOD,CAAI,uCAAsCX,KAAKY,8BAA+BC,6EAGxFb,KAAKc,MAAQH,CAAI,6BAA6BX,KAAKc,eAAiBD,UAG1E,IAAIE,EAYJ,OATEA,EADEf,KAAKC,WAAWO,WACRR,KAAKgB,aAAaN,GAErBV,KAAKiB,KACFjB,KAAKkB,WAAWR,GAGhBV,KAAKmB,aAAaT,GAGvBC,CAAI,wBAELI,gBACWf,KAAKC,WAAWmB,uBAAqBpB,KAAKM,qBAG5D,CAEO,UAAAY,CAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAIrB,KAAKsB,+BAA8BC,EAAKvB,KAAKK,OAAQ,kBAAgBL,KAAKiB,MAAQ,OAC1GP,OAGP,CAEO,YAAAM,CAAaN,GACnB,OAAOC,CAAI,sCAGEX,KAAKwB,8BACExB,KAAKM,KAAO,OAAS,YACnCe,EAAIrB,KAAKsB,iBAETZ,iCAIQe,EAAS,CAAE,iBAAiB,EAAM,QAASzB,KAAKG,UAAUuB,gEAKzE,CAEO,YAAAP,CAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAIrB,KAAKsB,iBAAiBZ,YACpE,CAEO,UAAAc,GACNxB,KAAKM,MAAQN,KAAKM,KAClBN,KAAK2B,cAAc,IAAIC,EAAU,UAClC,CAGS,kBAAAC,GACJ7B,KAAKK,SAAWL,KAAKO,WACvBP,KAAK2B,cAAc,IAAIC,EAAU,YAEpC,GA7GMhC,EAAAkC,OAAS,CAACC,EAAgBC,GASWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK7BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBzC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBzC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAsBzC,EAAA0C,UAAA,aAAA,GAMCL,EAAA,CAA3CC,EAAS,CAAEG,SAAS,EAAMF,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GA0E9CL,EAAA,CADTM,EAAQ,SAAU,YAKlB3C,EAAA0C,UAAA,qBAAA,MA9GkB1C,EAAOqC,EAAA,CAD3BO,EAAc,kBACM5C,SAAAA"}

package/lib/Navigation.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as e,html as t,nothing as a}from"lit";import{property as r,customElement as i}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=n`:host{--_n-navigation-background-color:var(--n-navigation-background-color, var(--n-color-nav-surface));--_n-navigation-header-block-size:var(--n-navigation-header-block-size, var(--n-space-xxl));--_n-navigation-header-padding-inline:var(--n-navigation-header-padding-inline);--_n-navigation-header-background:var(--n-navigation-header-background, var(--_n-navigation-background-color));--_n-navigation-header-divider:var(--n-navigation-header-divider, 1px solid var(--n-color-border));--_n-navigation-header-color:var(--n-navigation-header-color);--_n-navigation-header-toggle-icon-color:var(--n-navigation-header-toggle-icon-color);--_n-navigation-header-focus-style:var(--n-navigation-header-focus-style, var(--_n-navigation-dropdown-box-shadow));--_n-navigation-dropdown-box-shadow:0 0 0 1px var(--n-color-accent) inset;display:flex;flex-direction:column;block-size:100%;background:var(--_n-navigation-background-color)}.n-navigation-main{display:flex;flex-direction:column;flex:1;overflow-y:auto;overscroll-behavior-y:none}nav{flex:1;padding:var(--n-space-m)}::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)}:is([name=header],[name=footer])::slotted(:not([open]):focus-within){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:not([open], :active):focus-within){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(:hover, [open])){--n-button-border-color:var(--n-color-border-hover)}:host([sticky-footer]) slot[name=footer]{background:var(--_n-navigation-background-color);z-index:var(--n-index-sticky);padding:var(--n-space-s) var(--n-space-m);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,rgb(0,0,0,.1),rgb(0,0,0,0)) center top,radial-gradient(farthest-side at 50% 100%,rgb(0,0,0,.1),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}`;let v=class extends e{constructor(){super(...arguments),this.headerSlot=new l(this,"header"),this.events=new s(this),this.footerObserver=null,this.allowItemsToRemainOpen=!1,this.stickyFooter=!1,this.handleActivate=o=>{var n,e;const t=o.target,a=new Set;let r=null===(n=t.parentElement)||void 0===n?void 0:n.closest("nord-nav-item");for(;r;)a.add(r),r=null===(e=r.parentElement)||void 0===e?void 0:e.closest("nord-nav-item");for(const o of this.querySelectorAll("nord-nav-item"))if(o!==t){const n=a.has(o);o.open=n||this.allowItemsToRemainOpen&&o.open,o.active=n}this.allowItemsToRemainOpen=!1}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"activate",this.handleActivate);const o=this.querySelector("nord-nav-item[active]");this.allowItemsToRemainOpen=null!=o,"undefined"!=typeof window&&this.observeFooter()}disconnectedCallback(){var o;super.disconnectedCallback(),null===(o=this.footerObserver)||void 0===o||o.disconnect(),this.footerObserver=null}observeFooter(){this.footerObserver=new MutationObserver((()=>this.requestUpdate())),this.footerObserver.observe(this,{childList:!0});const o=this.querySelector(':scope > [slot="footer"]');o&&this.footerObserver.observe(o,{attributes:!0,attributeFilter:["style","class"]})}get isFooterVisible(){if("undefined"==typeof window)return!0;const o=this.querySelector(':scope > [slot="footer"]');if(!o)return!1;const n=window.getComputedStyle(o);return"none"!==n.display&&"hidden"!==n.visibility&&"collapse"!==n.visibility&&"0"!==n.opacity&&"hidden"!==n.contentVisibility}render(){return t`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav>${this.stickyFooter?a:t`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`}</div>${this.stickyFooter?t`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`:a}`}};v.styles=[d,c],o([r({type:Boolean,reflect:!0,attribute:"sticky-footer"})],v.prototype,"stickyFooter",void 0),v=o([i("nord-navigation")],v);var b=v;export{b as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as a,html as t,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}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)}:is([name=header],[name=footer])::slotted(:not([open]):focus-within){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:not([open], :active):focus-within){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(:hover, [open])){--n-button-border-color:var(--n-color-border-hover)}: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)}`;let v=class extends a{constructor(){super(...arguments),this.headerSlot=new l(this,"header"),this.events=new s(this),this.footerObserver=null,this.allowItemsToRemainOpen=!1,this.stickyFooter=!1,this.handleActivate=n=>{var o,a;const t=n.target,e=new Set;let i=null===(o=t.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;i;)e.add(i),i=null===(a=i.parentElement)||void 0===a?void 0:a.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==t){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()}disconnectedCallback(){var n;super.disconnectedCallback(),null===(n=this.footerObserver)||void 0===n||n.disconnect(),this.footerObserver=null}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 t`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav>${this.stickyFooter?e:t`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`}</div>${this.stickyFooter?t`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`:e}`}};v.styles=[d,c],n([i({type:Boolean,reflect:!0,attribute:"sticky-footer"})],v.prototype,"stickyFooter",void 0),v=n([r("nord-navigation")],v);var g=v;export{g 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/**\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 */\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 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  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.footerObserver?.disconnect()\n    this.footerObserver = null\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":["Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","footerObserver","allowItemsToRemainOpen","stickyFooter","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","activeItem","querySelector","window","observeFooter","disconnectedCallback","disconnect","MutationObserver","requestUpdate","observe","childList","footerEl","attributes","attributeFilter","isFooterVisible","style","getComputedStyle","display","visibility","opacity","contentVisibility","render","html","isEmpty","nothing","styles","componentStyle","__decorate","property","type","Boolean","reflect","attribute","prototype","customElement"],"mappings":"4+GA0Be,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,OAAS,IAAIC,EAAgBJ,MAC7BA,KAAcK,eAA4B,KAC1CL,KAAsBM,wBAAG,EAKuCN,KAAYO,cAAY,EAkFxFP,KAAAQ,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,KAAQnB,KAAKoB,iBAAiB,iBACvC,GAAID,IAAST,EAAQ,CACnB,MAAMW,EAAaV,EAAUW,IAAIH,GACjCA,EAAKI,KAAOF,GAAerB,KAAKM,wBAA0Ba,EAAKI,KAC/DJ,EAAKK,OAASH,CACf,CAIHrB,KAAKM,wBAAyB,CAAK,CAEtC,CA1GC,iBAAAmB,GACEC,MAAMD,oBAINzB,KAAKG,OAAOwB,OAAO3B,KAAM,WAAYA,KAAKQ,gBAI1C,MAAMoB,EAAa5B,KAAK6B,cAAc,yBACtC7B,KAAKM,uBAAuC,MAAdsB,EAER,oBAAXE,QACT9B,KAAK+B,eAER,CAED,oBAAAC,SACEN,MAAMM,uBACe,QAArBlB,EAAAd,KAAKK,sBAAgB,IAAAS,GAAAA,EAAAmB,aACrBjC,KAAKK,eAAiB,IACvB,CAOO,aAAA0B,GACN/B,KAAKK,eAAiB,IAAI6B,kBAAiB,IAAMlC,KAAKmC,kBAGtDnC,KAAKK,eAAe+B,QAAQpC,KAAM,CAAEqC,WAAW,IAG/C,MAAMC,EAAWtC,KAAK6B,cAAc,4BAChCS,GACFtC,KAAKK,eAAe+B,QAAQE,EAAU,CACpCC,YAAY,EACZC,gBAAiB,CAAC,QAAS,UAGhC,CAED,mBAAYC,GAIV,GAAsB,oBAAXX,OACT,OAAO,EAGT,MAAMQ,EAAWtC,KAAK6B,cAA2B,4BACjD,IAAKS,EACH,OAAO,EAGT,MAAMI,EAAQZ,OAAOa,iBAAiBL,GACtC,MACoB,SAAlBI,EAAME,SACkB,WAArBF,EAAMG,YACe,aAArBH,EAAMG,YACY,MAAlBH,EAAMI,SACsB,WAA5BJ,EAAMK,iBAEZ,CAED,MAAAC,GACE,OAAOC,CAAI,gCACqBjD,KAAKC,WAAWiD,0EAKzClD,KAAKO,aAAoF4C,EAArEF,CAAI,iCAAgCjD,KAAKyC,mCAEhEzC,KAAKO,aAAe0C,CAAI,iCAAgCjD,KAAKyC,2BAA4BU,GAE9F,GA1FMtD,EAAAuD,OAAS,CAACC,EAAgBX,GAUuCY,EAAA,CAAvEC,EAAS,CAAEC,KAAMC,QAASC,SAAS,EAAMC,UAAW,mBAAgD9D,EAAA+D,UAAA,oBAAA,GAXlF/D,EAAUyD,EAAA,CAD9BO,EAAc,oBACMhE,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/**\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 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  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.footerObserver?.disconnect()\n    this.footerObserver = null\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":["Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","footerObserver","allowItemsToRemainOpen","stickyFooter","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","activeItem","querySelector","window","observeFooter","disconnectedCallback","disconnect","MutationObserver","requestUpdate","observe","childList","footerEl","attributes","attributeFilter","isFooterVisible","style","getComputedStyle","display","visibility","opacity","contentVisibility","render","html","isEmpty","nothing","styles","componentStyle","__decorate","property","type","Boolean","reflect","attribute","prototype","customElement"],"mappings":"4qJAiCe,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,OAAS,IAAIC,EAAgBJ,MAC7BA,KAAcK,eAA4B,KAC1CL,KAAsBM,wBAAG,EAKuCN,KAAYO,cAAY,EAkFxFP,KAAAQ,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,KAAQnB,KAAKoB,iBAAiB,iBACvC,GAAID,IAAST,EAAQ,CACnB,MAAMW,EAAaV,EAAUW,IAAIH,GACjCA,EAAKI,KAAOF,GAAerB,KAAKM,wBAA0Ba,EAAKI,KAC/DJ,EAAKK,OAASH,CACf,CAIHrB,KAAKM,wBAAyB,CAAK,CAEtC,CA1GC,iBAAAmB,GACEC,MAAMD,oBAINzB,KAAKG,OAAOwB,OAAO3B,KAAM,WAAYA,KAAKQ,gBAI1C,MAAMoB,EAAa5B,KAAK6B,cAAc,yBACtC7B,KAAKM,uBAAuC,MAAdsB,EAER,oBAAXE,QACT9B,KAAK+B,eAER,CAED,oBAAAC,SACEN,MAAMM,uBACe,QAArBlB,EAAAd,KAAKK,sBAAgB,IAAAS,GAAAA,EAAAmB,aACrBjC,KAAKK,eAAiB,IACvB,CAOO,aAAA0B,GACN/B,KAAKK,eAAiB,IAAI6B,kBAAiB,IAAMlC,KAAKmC,kBAGtDnC,KAAKK,eAAe+B,QAAQpC,KAAM,CAAEqC,WAAW,IAG/C,MAAMC,EAAWtC,KAAK6B,cAAc,4BAChCS,GACFtC,KAAKK,eAAe+B,QAAQE,EAAU,CACpCC,YAAY,EACZC,gBAAiB,CAAC,QAAS,UAGhC,CAED,mBAAYC,GAIV,GAAsB,oBAAXX,OACT,OAAO,EAGT,MAAMQ,EAAWtC,KAAK6B,cAA2B,4BACjD,IAAKS,EACH,OAAO,EAGT,MAAMI,EAAQZ,OAAOa,iBAAiBL,GACtC,MACoB,SAAlBI,EAAME,SACkB,WAArBF,EAAMG,YACe,aAArBH,EAAMG,YACY,MAAlBH,EAAMI,SACsB,WAA5BJ,EAAMK,iBAEZ,CAED,MAAAC,GACE,OAAOC,CAAI,gCACqBjD,KAAKC,WAAWiD,0EAKzClD,KAAKO,aAAoF4C,EAArEF,CAAI,iCAAgCjD,KAAKyC,mCAEhEzC,KAAKO,aAAe0C,CAAI,iCAAgCjD,KAAKyC,2BAA4BU,GAE9F,GA1FMtD,EAAAuD,OAAS,CAACC,EAAgBX,GAUuCY,EAAA,CAAvEC,EAAS,CAAEC,KAAMC,QAASC,SAAS,EAAMC,UAAW,mBAAgD9D,EAAA+D,UAAA,oBAAA,GAXlF/D,EAAUyD,EAAA,CAD9BO,EAAc,oBACMhE,SAAAA"}

package/lib/Select.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as o,nothing as n,isServer as r,LitElement as i}from"lit";import{property as s,customElement as l}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{A as p}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as b}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{S as h}from"./SizeMixin-CU9cLbLC.js";import{s as m}from"./Component-DSU3Qp0O.js";import{s as f}from"./FormField-BFaVzUjk.js";import x from"./Icon.js";import"./Button.js";import"./EventController-BBOmvfLa.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";var j=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',tags:"nordicon small interface dropdown select arrow up down caret triangle chevron",title:"interface-dropdown-small"});const g=e`:host{--_n-select-inline-size:var(--n-select-inline-size, fit-content);--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start}nord-button:not([expand]){--_n-button-inline-size:var(--_n-select-inline-size)}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;x.registerIcon(j);let $=class extends(h(b(p(v(u(i)))))){constructor(){super(...arguments),this.defaultSlot=new d(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}firstUpdated(){this.setupOptionObserver()}connectedCallback(){super.connectedCallback(),this.hasUpdated&&!this.optionObserver&&this.setupOptionObserver()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.optionObserver)||void 0===t||t.disconnect(),this.optionObserver=void 0}setupOptionObserver(){this.optionObserver||(this.optionObserver=new MutationObserver((()=>this.requestUpdate())),this.optionObserver.observe(this,{subtree:!0,childList:!0,characterData:!0}))}render(){const t=this.options,e=this.getButtonText(t);return o`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${c(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&o`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" ?disabled="${this.disabled}" ?expand="${this.expand}" type="button" inert><slot slot="start" name="icon"></slot>${e}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()} ${this.isHintBelow?this.renderHint():n}`}get options(){return r?[]:Array.from(this.querySelectorAll("option"))}getButtonText(t){const e=t.find((t=>t.value===this.value.toString()));return e?e.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return o`<option value="${a(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};$.styles=[m,f,g],t([s({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),$=t([l("nord-select")],$);var z=$;export{z as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as e,nothing as n,isServer as r,LitElement as i}from"lit";import{property as s,customElement as l}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{A as p}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as b}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{S as h}from"./SizeMixin-CU9cLbLC.js";import{s as m}from"./Component-DSU3Qp0O.js";import{s as f}from"./FormField-BFaVzUjk.js";import x from"./Icon.js";import"./Button.js";import"./EventController-BBOmvfLa.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";var g=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',tags:"nordicon small interface dropdown select arrow up down caret triangle chevron",title:"interface-dropdown-small"});const j=o`:host{--_n-select-inline-size:var(--n-select-inline-size, fit-content);--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start;--n-button-background-color:var(--n-input-background, var(--n-color-surface));--n-button-gradient:none;--n-button-box-shadow:none}nord-button:not([expand]){--_n-button-inline-size:var(--_n-select-inline-size)}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-button-background-color:var(--n-input-background-inactive, var(--n-color-active));--n-button-border-color:var(--n-color-active);--n-button-color:var(--n-color-text-weakest);--n-button-toggle-icon-color:var(--n-color-text-weakest);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;x.registerIcon(g);let $=class extends(h(b(p(v(u(i)))))){constructor(){super(...arguments),this.defaultSlot=new d(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}firstUpdated(){this.setupOptionObserver()}connectedCallback(){super.connectedCallback(),this.hasUpdated&&!this.optionObserver&&this.setupOptionObserver()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.optionObserver)||void 0===t||t.disconnect(),this.optionObserver=void 0}setupOptionObserver(){this.optionObserver||(this.optionObserver=new MutationObserver((()=>this.requestUpdate())),this.optionObserver.observe(this,{subtree:!0,childList:!0,characterData:!0}))}render(){const t=this.options,o=this.getButtonText(t);return e`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${c(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&e`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" ?disabled="${this.disabled}" ?expand="${this.expand}" type="button" inert><slot slot="start" name="icon"></slot>${o}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()} ${this.isHintBelow?this.renderHint():n}`}get options(){return r?[]:Array.from(this.querySelectorAll("option"))}getButtonText(t){const o=t.find((t=>t.value===this.value.toString()));return o?o.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return e`<option value="${a(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};$.styles=[m,f,j],t([s({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),$=t([l("nord-select")],$);var z=$;export{z as default};
 //# sourceMappingURL=Select.js.map

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-dropdown-small\";\nexport const tags =\n  \"nordicon small interface dropdown select arrow up down caret triangle chevron\";\n","import * as dropdownIcon from '@nordhealth/icons/lib/assets/interface-dropdown-small.js'\nimport { html, isServer, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport formFieldStyle from '../common/styles/FormField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Select.css'\nimport '../button/Button.js'\n\nIcon.registerIcon(dropdownIcon)\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n * @slot icon - Used to place an icon at the start of select.\n *\n * @cssprop [--n-select-block-size=var(--n-space-xl)] - Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-select-inline-size=fit-content] - Controls the inline size, or width, of the select.\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-select')\nexport default class Select extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement)))),\n) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.value || undefined\n  }\n\n  private defaultSlot = new SlotController(this)\n  private optionObserver?: MutationObserver\n\n  protected inputId = 'select'\n\n  firstUpdated() {\n    this.setupOptionObserver()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Re-setup observer after reconnection (firstUpdated only runs once per instance)\n    if (this.hasUpdated && !this.optionObserver) {\n      this.setupOptionObserver()\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up observer to prevent memory leaks\n    this.optionObserver?.disconnect()\n    this.optionObserver = undefined\n  }\n\n  private setupOptionObserver() {\n    // Avoid creating multiple observers\n    if (this.optionObserver) {\n      return\n    }\n\n    // Set up observer to watch for changes to slotted option content\n    this.optionObserver = new MutationObserver(() => this.requestUpdate())\n    this.optionObserver.observe(this, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    })\n  }\n\n  /**\n   * Controls whether the select expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const slottedOptions = this.options\n    const buttonText = this.getButtonText(slottedOptions)\n\n    return html`\n      <slot></slot>\n      ${this.renderLabel()}\n\n      <div class=\"n-select-container\">\n        <select\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        >\n          ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n          ${slottedOptions.map(option => this.renderOption(option))}\n        </select>\n\n        <nord-button size=${this.size} ?disabled=${this.disabled} ?expand=${this.expand} type=\"button\" inert>\n          <slot slot=\"start\" name=\"icon\"></slot>\n          ${buttonText}\n          <nord-icon slot=\"end\" name=\"interface-dropdown-small\"></nord-icon>\n        </nord-button>\n      </div>\n\n      ${this.renderError()}\n      ${this.isHintBelow ? this.renderHint() : nothing}\n    `\n  }\n\n  private get options() {\n    if (isServer) {\n      return []\n    }\n\n    return Array.from(this.querySelectorAll('option'))\n  }\n\n  private getButtonText(options: HTMLOptionElement[]): string {\n    const selected = options.find(option => option.value === this.value.toString())\n\n    if (selected) {\n      return selected.text\n    }\n\n    if (this.placeholder) {\n      return this.placeholder\n    }\n\n    if (options[0]) {\n      return options[0].text\n    }\n\n    return ''\n  }\n\n  private renderOption(option: HTMLOptionElement) {\n    return html`\n      <option\n        value=${ifDefined(option.value)}\n        ?disabled=${option.disabled}\n        .selected=${option.value === this.value.toString()}\n      >\n        ${option.text}\n      </option>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-select': Select\n  }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","SizeMixin","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","firstUpdated","setupOptionObserver","connectedCallback","super","hasUpdated","optionObserver","disconnectedCallback","_a","disconnect","MutationObserver","requestUpdate","observe","subtree","childList","characterData","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","isHintBelow","renderHint","nothing","isServer","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"ojCAAe,uaAGb,sFAFmB,qmDCmBrBA,EAAKC,aAAaC,GAmBH,IAAMC,EAAN,cAAqBC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADnD,WAAAC,uBASLC,KAAAC,YAAc,IAAIC,EAAeF,MAG/BA,KAAOG,QAAG,SAuCwBH,KAAMI,QAAG,CA4EtD,CA1HC,aAAuBC,GACrB,OAAOL,KAAKM,YAASC,CACtB,CAOD,YAAAC,GACER,KAAKS,qBACN,CAED,iBAAAC,GACEC,MAAMD,oBAEFV,KAAKY,aAAeZ,KAAKa,gBAC3Bb,KAAKS,qBAER,CAED,oBAAAK,SACEH,MAAMG,uBAEe,QAArBC,EAAAf,KAAKa,sBAAgB,IAAAE,GAAAA,EAAAC,aACrBhB,KAAKa,oBAAiBN,CACvB,CAEO,mBAAAE,GAEFT,KAAKa,iBAKTb,KAAKa,eAAiB,IAAII,kBAAiB,IAAMjB,KAAKkB,kBACtDlB,KAAKa,eAAeM,QAAQnB,KAAM,CAChCoB,SAAS,EACTC,WAAW,EACXC,eAAe,IAElB,CAOD,MAAAC,GACE,MAAMC,EAAiBxB,KAAKyB,QACtBC,EAAa1B,KAAK2B,cAAcH,GAEtC,OAAOI,CAAI,gBAEP5B,KAAK6B,wDAIDC,EAAI9B,KAAK+B,qBACN/B,KAAKG,uBACEH,KAAKgC,wBACLhC,KAAKiC,mBACVC,EAAUlC,KAAKmC,mBACZnC,KAAKoC,yBACNpC,KAAKqC,kCACKH,EAAUlC,KAAKsC,oCACnBJ,EAAUlC,KAAKuC,gCACfvC,KAAKwC,iBAElBxC,KAAKyC,aAAeb,CAAI,oDAAwC5B,KAAKM,UAASN,KAAKyC,0BACnFjB,EAAekB,KAAIC,GAAU3C,KAAK4C,aAAaD,mCAG/B3C,KAAK6C,oBAAkB7C,KAAKgC,sBAAoBhC,KAAKI,qEAErEsB,0FAKJ1B,KAAK8C,iBACL9C,KAAK+C,YAAc/C,KAAKgD,aAAeC,GAE5C,CAED,WAAYxB,GACV,OAAIyB,EACK,GAGFC,MAAMC,KAAKpD,KAAKqD,iBAAiB,UACzC,CAEO,aAAA1B,CAAcF,GACpB,MAAM6B,EAAW7B,EAAQ8B,MAAKZ,GAAUA,EAAOrC,QAAUN,KAAKM,MAAMkD,aAEpE,OAAIF,EACKA,EAASG,KAGdzD,KAAKyC,YACAzC,KAAKyC,YAGVhB,EAAQ,GACHA,EAAQ,GAAGgC,KAGb,EACR,CAEO,YAAAb,CAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOrC,sBACbqC,EAAOX,wBACPW,EAAOrC,QAAUN,KAAKM,MAAMkD,eAEtCb,EAAOc,eAGd,GA3HMjE,EAAMkE,OAAG,CAACC,EAAgBC,EAAgBC,GAgDLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyB1E,EAAA2E,UAAA,cAAA,GAnDvC3E,EAAMsE,EAAA,CAD1BM,EAAc,gBACM5E,SAAAA"}
+{"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-dropdown-small\";\nexport const tags =\n  \"nordicon small interface dropdown select arrow up down caret triangle chevron\";\n","import * as dropdownIcon from '@nordhealth/icons/lib/assets/interface-dropdown-small.js'\nimport { html, isServer, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport formFieldStyle from '../common/styles/FormField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Select.css'\nimport '../button/Button.js'\n\nIcon.registerIcon(dropdownIcon)\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n * @slot icon - Used to place an icon at the start of select.\n *\n * @cssprop [--n-select-block-size=var(--n-space-xl)] - Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-select-inline-size=fit-content] - Controls the inline size, or width, of the select.\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-select')\nexport default class Select extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement)))),\n) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.value || undefined\n  }\n\n  private defaultSlot = new SlotController(this)\n  private optionObserver?: MutationObserver\n\n  protected inputId = 'select'\n\n  firstUpdated() {\n    this.setupOptionObserver()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Re-setup observer after reconnection (firstUpdated only runs once per instance)\n    if (this.hasUpdated && !this.optionObserver) {\n      this.setupOptionObserver()\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up observer to prevent memory leaks\n    this.optionObserver?.disconnect()\n    this.optionObserver = undefined\n  }\n\n  private setupOptionObserver() {\n    // Avoid creating multiple observers\n    if (this.optionObserver) {\n      return\n    }\n\n    // Set up observer to watch for changes to slotted option content\n    this.optionObserver = new MutationObserver(() => this.requestUpdate())\n    this.optionObserver.observe(this, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    })\n  }\n\n  /**\n   * Controls whether the select expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const slottedOptions = this.options\n    const buttonText = this.getButtonText(slottedOptions)\n\n    return html`\n      <slot></slot>\n      ${this.renderLabel()}\n\n      <div class=\"n-select-container\">\n        <select\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        >\n          ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n          ${slottedOptions.map(option => this.renderOption(option))}\n        </select>\n\n        <nord-button size=${this.size} ?disabled=${this.disabled} ?expand=${this.expand} type=\"button\" inert>\n          <slot slot=\"start\" name=\"icon\"></slot>\n          ${buttonText}\n          <nord-icon slot=\"end\" name=\"interface-dropdown-small\"></nord-icon>\n        </nord-button>\n      </div>\n\n      ${this.renderError()}\n      ${this.isHintBelow ? this.renderHint() : nothing}\n    `\n  }\n\n  private get options() {\n    if (isServer) {\n      return []\n    }\n\n    return Array.from(this.querySelectorAll('option'))\n  }\n\n  private getButtonText(options: HTMLOptionElement[]): string {\n    const selected = options.find(option => option.value === this.value.toString())\n\n    if (selected) {\n      return selected.text\n    }\n\n    if (this.placeholder) {\n      return this.placeholder\n    }\n\n    if (options[0]) {\n      return options[0].text\n    }\n\n    return ''\n  }\n\n  private renderOption(option: HTMLOptionElement) {\n    return html`\n      <option\n        value=${ifDefined(option.value)}\n        ?disabled=${option.disabled}\n        .selected=${option.value === this.value.toString()}\n      >\n        ${option.text}\n      </option>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-select': Select\n  }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","SizeMixin","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","firstUpdated","setupOptionObserver","connectedCallback","super","hasUpdated","optionObserver","disconnectedCallback","_a","disconnect","MutationObserver","requestUpdate","observe","subtree","childList","characterData","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","isHintBelow","renderHint","nothing","isServer","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"ojCAAe,uaAGb,sFAFmB,m0DCmBrBA,EAAKC,aAAaC,GAmBH,IAAMC,EAAN,cAAqBC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADnD,WAAAC,uBASLC,KAAAC,YAAc,IAAIC,EAAeF,MAG/BA,KAAOG,QAAG,SAuCwBH,KAAMI,QAAG,CA4EtD,CA1HC,aAAuBC,GACrB,OAAOL,KAAKM,YAASC,CACtB,CAOD,YAAAC,GACER,KAAKS,qBACN,CAED,iBAAAC,GACEC,MAAMD,oBAEFV,KAAKY,aAAeZ,KAAKa,gBAC3Bb,KAAKS,qBAER,CAED,oBAAAK,SACEH,MAAMG,uBAEe,QAArBC,EAAAf,KAAKa,sBAAgB,IAAAE,GAAAA,EAAAC,aACrBhB,KAAKa,oBAAiBN,CACvB,CAEO,mBAAAE,GAEFT,KAAKa,iBAKTb,KAAKa,eAAiB,IAAII,kBAAiB,IAAMjB,KAAKkB,kBACtDlB,KAAKa,eAAeM,QAAQnB,KAAM,CAChCoB,SAAS,EACTC,WAAW,EACXC,eAAe,IAElB,CAOD,MAAAC,GACE,MAAMC,EAAiBxB,KAAKyB,QACtBC,EAAa1B,KAAK2B,cAAcH,GAEtC,OAAOI,CAAI,gBAEP5B,KAAK6B,wDAIDC,EAAI9B,KAAK+B,qBACN/B,KAAKG,uBACEH,KAAKgC,wBACLhC,KAAKiC,mBACVC,EAAUlC,KAAKmC,mBACZnC,KAAKoC,yBACNpC,KAAKqC,kCACKH,EAAUlC,KAAKsC,oCACnBJ,EAAUlC,KAAKuC,gCACfvC,KAAKwC,iBAElBxC,KAAKyC,aAAeb,CAAI,oDAAwC5B,KAAKM,UAASN,KAAKyC,0BACnFjB,EAAekB,KAAIC,GAAU3C,KAAK4C,aAAaD,mCAG/B3C,KAAK6C,oBAAkB7C,KAAKgC,sBAAoBhC,KAAKI,qEAErEsB,0FAKJ1B,KAAK8C,iBACL9C,KAAK+C,YAAc/C,KAAKgD,aAAeC,GAE5C,CAED,WAAYxB,GACV,OAAIyB,EACK,GAGFC,MAAMC,KAAKpD,KAAKqD,iBAAiB,UACzC,CAEO,aAAA1B,CAAcF,GACpB,MAAM6B,EAAW7B,EAAQ8B,MAAKZ,GAAUA,EAAOrC,QAAUN,KAAKM,MAAMkD,aAEpE,OAAIF,EACKA,EAASG,KAGdzD,KAAKyC,YACAzC,KAAKyC,YAGVhB,EAAQ,GACHA,EAAQ,GAAGgC,KAGb,EACR,CAEO,YAAAb,CAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOrC,sBACbqC,EAAOX,wBACPW,EAAOrC,QAAUN,KAAKM,MAAMkD,eAEtCb,EAAOc,eAGd,GA3HMjE,EAAMkE,OAAG,CAACC,EAAgBC,EAAgBC,GAgDLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyB1E,EAAA2E,UAAA,cAAA,GAnDvC3E,EAAMsE,EAAA,CAD1BM,EAAc,gBACM5E,SAAAA"}