@nordhealth/components 5.0.1 → 5.0.2

package/lib/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport type Popout from '../popout/Popout.js'\nimport { ContextConsumer } from '@lit/context'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.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 { navListContext } from '../nav-group/nav-context.js'\nimport style from './NavItem.css'\n\nimport '../popout/Popout.js'\nimport '../tooltip/Tooltip.js'\n\nlet railTooltipIdCounter = 0\nlet railPopoutIdCounter = 0\n\n// Mirrors the layout's wide-viewport breakpoint so nav items only\n// switch to icon-only rendering when the layout actually shows the rail.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot icon - Slot for a custom leading icon element. Use when the `icon` attribute isn't enough — for example, an icon wrapped in a styled badge or circular frame. When set, it takes priority over the `icon` attribute and is shown in both the expanded nav and the collapsed rail.\n * @slot end - Trailing content rendered after the label inside the item's flex row. The slotted element flows naturally — it claims its real width and the label flex-shrinks to make room. Use for a custom badge, count pill, action icon, etc. when the `badge` attribute's plain text isn't enough.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @slot rail-tooltip - Full content of the rail-mode tooltip. When provided, it replaces the default label projection — write the tooltip's content directly (label + count + keyboard shortcut etc., bound to whatever reactive state you like). When absent, the tooltip falls back to the item's default-slot label. Only rendered in rail mode.\n *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-nav-item-color=var(--n-color-text-weak)] - Text color in the default state.\n * @cssprop [--n-nav-item-background=transparent] - Background color in the default state.\n * @cssprop [--n-nav-item-border-radius=var(--n-border-radius-s)] - Border radius of the item and its active-parent overlay.\n * @cssprop [--n-nav-item-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding.\n * @cssprop [--n-nav-item-padding-inline=var(--n-space-s)] - Inline-axis (start/end) padding.\n * @cssprop [--n-nav-item-line-height=var(--n-line-height-tight)] - Line height of the item's text.\n * @cssprop [--n-nav-item-icon-gap=calc(var(--n-space-s) * 1.4)] - Inline gap between the leading icon (the `icon` attribute or `icon` slot) and the item's text.\n * @cssprop [--n-nav-item-color-hover=var(--n-color-text)] - Text color on hover.\n * @cssprop [--n-nav-item-background-hover=var(--n-color-nav-hover)] - Background color on hover.\n * @cssprop [--n-nav-item-color-active=var(--n-color-text-on-accent)] - Text color when the item is `active`.\n * @cssprop [--n-nav-item-background-active=var(--n-color-accent)] - Background color when the item is `active`.\n * @cssprop [--n-nav-item-color-expanded=var(--n-color-text-weak)] - Text color when the item is an active parent (its subnav is expanded).\n * @cssprop [--n-nav-item-background-expanded=var(--n-color-accent)] - Background color of the overlay drawn behind an active-parent item.\n * @cssprop [--n-nav-item-expanded-overlay-opacity=0.12] - Opacity of the active-parent overlay. Set to `1` for a solid background.\n * @cssprop [--n-nav-item-expanded-overlay-filter=brightness(150%)] - Filter applied to the active-parent overlay. Set to `none` to disable.\n * @cssprop [--n-rail-flyout-background=var(--n-color-surface)] - Background colour of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-box-shadow=var(--n-box-shadow-popout)] - Box-shadow of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-min-inline-size=220px] - Minimum inline size (width in LTR) of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-padding=var(--n-space-s)] - Padding of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-offset-inline=0] - Extra inline-axis offset applied to the rail flyout (positive values push it away from the rail in LTR; mirrored in RTL).\n * @cssprop [--n-rail-flyout-offset-block=0] - Extra block-axis offset applied to the rail flyout (positive values push it downward).\n * @cssprop [--n-rail-subnav-indicator-color=var(--n-color-border-strong)] - Colour of the small triangle indicator drawn in the bottom-inline-end corner of rail items that have a subnav (default + hover state).\n * @cssprop [--n-rail-subnav-indicator-color-active=var(--n-color-border-hover)] - Colour of the triangle indicator while the item's flyout popout is open.\n * @cssprop [--n-nav-badge-background=var(--n-color-status-notification)] - Background colour of the built-in `badge` attribute pill (`.n-nav-badge`).\n * @cssprop [--n-nav-badge-color=#fff] - Text colour of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-size=var(--n-font-size-xs)] - Font size of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-weight=var(--n-font-weight)] - Font weight of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-line-height=1] - Line height of the built-in `badge` attribute pill. Combined with `--n-nav-badge-padding-block` this controls the pill's effective block size.\n * @cssprop [--n-nav-badge-padding-block=var(--n-space-xs)] - Block-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-padding-inline=calc(var(--n-space-s) / 2)] - Inline-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-border-radius=var(--n-border-radius-pill)] - Border radius of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-min-inline-size=20px] - Minimum inline size (width in LTR) of the built-in `badge` attribute pill — sets a visual floor for single-digit counts.\n * @cssprop [--n-nav-badge-margin-inline-start=var(--n-space-xs)] - Inline-start margin separating the badge from the preceding label inside the nav-item's flex row.\n * @cssprop [--n-rail-badge-size=5px] - Diameter of the rail-mode dot the badge collapses into when the layout is in `collapse-mode=\"rail\"` and not `nav-open`.\n *\n * @parent Navigation\n */\n@customElement('nord-nav-item')\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, 'subnav')\n  private iconSlot = new SlotController(this, 'icon')\n  private railTooltipSlot = new SlotController(this, 'rail-tooltip')\n  private direction = new DirectionController(this)\n\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private readonly tooltipId = `n-nav-rail-tip-${++railTooltipIdCounter}`\n  private readonly popoutId = `n-nav-rail-pop-${++railPopoutIdCounter}`\n\n  @query('nord-popout') private popoutEl?: Popout\n\n  /**\n   * Reflects whether the ancestor layout is in rail-collapsed state\n   * (i.e. `collapse-mode=\"rail\"` and `nav-open` is absent).\n   * @internal\n   */\n  @state() private railCollapsed = false\n\n  /**\n   * Whether this item is inside a `nord-nav-group` (which exposes `role=\"list\"`).\n   * Only then may it emit `role=\"listitem\"` — a listitem without a list ancestor\n   * fails the `aria-required-parent` accessibility check. Standalone items (e.g.\n   * directly in `nord-navigation` or used as a `nord-dropdown` toggle) omit the role.\n   * @internal\n   */\n  @state() private inList = false\n\n  private listConsumer = new ContextConsumer(this, {\n    context: navListContext,\n    subscribe: true,\n    callback: (value) => {\n      this.inList = value === true\n    },\n  })\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   * Distance in pixels between the rail-mode tooltip and the item, forwarded\n   * to the internal [Tooltip](/components/tooltip/)'s `side-offset` (the\n   * Floating UI `offset` main axis). When unset, the tooltip's own default\n   * (`8`) applies. Useful for lining up rail-item tooltips with neighbouring\n   * standalone tooltips.\n   */\n  @property({ reflect: true, type: Number, attribute: 'side-offset' }) sideOffset?: number\n\n  /**\n   * Offset in pixels along the alignment axis for the rail-mode tooltip,\n   * forwarded to the internal [Tooltip](/components/tooltip/)'s\n   * `align-offset`. When unset, the tooltip's own default (`0`) applies.\n   */\n  @property({ reflect: true, type: Number, attribute: 'align-offset' }) alignOffset?: number\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.railCollapsed = false\n    this.popoutEl?.hide()\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    // Subnav children render inside a flyout popover when rail-collapsed;\n    // they should keep their full layout, not collapse to icons themselves.\n    const isNested = !!this.parentElement?.closest('nord-nav-item')\n    const next = !isNested\n      && railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    if (!next) {\n      this.popoutEl?.hide()\n    }\n    this.railCollapsed = next\n  }\n\n  render() {\n    if (this.railCollapsed) {\n      return this.renderRail()\n    }\n\n    const innards = html`\n      ${this.renderLeadingIcon()}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n        <slot name=\"end\"></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    }\n    else if (this.href) {\n      element = this.renderLink(innards)\n    }\n    else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=${cond(this.inList, 'listitem')}>\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  // Resolves the leading icon shown in both the expanded nav and the rail:\n  // a slotted custom icon wins over the `icon` attribute, which wins over nothing.\n  private renderLeadingIcon(): TemplateResult | typeof nothing {\n    if (this.iconSlot.hasContent) {\n      return html`<slot name=\"icon\" class=\"n-nav-icon\"></slot>`\n    }\n    if (this.icon) {\n      return html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>`\n    }\n    return nothing\n  }\n\n  private renderRail(): TemplateResult {\n    const leadingIcon = this.renderLeadingIcon()\n    // Rail is icon-only, so when there's no icon at all we fall back to the\n    // first letter of the label rather than rendering an empty button.\n    const iconEl = leadingIcon === nothing\n      ? html`<span class=\"n-rail-fallback\">${this.textInitial}</span>`\n      : leadingIcon\n    const badge = this.badge ? html`<span class=\"n-nav-badge n-rail-badge\">${this.badge}</span>` : nothing\n\n    if (this.subnavSlot.hasContent) {\n      return this.renderRailFlyout(iconEl, badge)\n    }\n\n    return html`\n      <div role=${cond(this.inList, 'listitem')} class=\"n-rail-host\">\n        ${this.href\n          ? html`\n              <a\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-current=${cond(this.active, 'page')}\n                aria-describedby=${this.tooltipId}\n                href=${this.href}\n              >\n                ${iconEl}${badge}\n              </a>\n            `\n          : html`\n              <button\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-describedby=${this.tooltipId}\n              >\n                ${iconEl}${badge}\n              </button>\n            `}\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\" side-offset=${ifDefined(this.sideOffset)} align-offset=${ifDefined(this.alignOffset)}>\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n      </div>\n    `\n  }\n\n  private renderRailFlyout(iconEl: TemplateResult, badge: TemplateResult | typeof nothing): TemplateResult {\n    // Click-only: nord-popout's getToggle() listens for click on the\n    // [aria-controls={popoutId}] target. Hover used to open as well, but\n    // that conflicted with the popout's click-to-toggle (hover opened, then\n    // the click was treated as a close).\n    // The tooltip still shows on hover so the icon has an accessible label\n    // — nord-tooltip listens for mouseover/focusin on [aria-describedby].\n    return html`\n      <div role=${cond(this.inList, 'listitem')} class=\"n-rail-host\">\n        <button\n          class=\"n-nav-item n-rail-item\"\n          ${ref(this.focusableRef)}\n          aria-controls=${this.popoutId}\n          aria-describedby=${this.tooltipId}\n        >\n          ${iconEl}${badge}\n          <svg\n            class=\"n-rail-subnav-indicator\"\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"5\"\n            height=\"5\"\n            viewBox=\"0 0 5 5\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\" side-offset=${ifDefined(this.sideOffset)} align-offset=${ifDefined(this.alignOffset)}>\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n        <nord-popout id=${this.popoutId} position=\"inline-end\" always-floating>\n          <div class=\"n-rail-flyout-body\">\n            <slot name=${this.subnavSlot.slotName}></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private get textInitial(): string {\n    const text = this.textContent?.trim() ?? ''\n    return text.charAt(0).toUpperCase()\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, 'page')} href=${this.href || ''}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ 'n-toggle-icon': true, 'n-rtl': this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent('toggle'))\n  }\n\n  @observe('active', 'updated')\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent('activate'))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-item': NavItem\n  }\n}\n"],"names":["railTooltipIdCounter","railPopoutIdCounter","railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","iconSlot","railTooltipSlot","direction","DirectionController","tooltipId","popoutId","railCollapsed","inList","listConsumer","ContextConsumer","context","navListContext","subscribe","callback","value","active","open","handleViewportChange","updateRailState","hasSubNav","hasContent","connectedCallback","super","startObservingLayout","disconnectedCallback","stopObservingLayout","observedLayout","closest","layoutObserver","MutationObserver","observe","attributes","attributeFilter","_a","disconnect","undefined","_b","popoutEl","hide","next","parentElement","getAttribute","hasAttribute","render","renderRail","innards","html","renderLeadingIcon","badge","nothing","element","renderToggle","href","renderLink","renderButton","cond","slotName","icon","leadingIcon","iconEl","textInitial","renderRailFlyout","ref","focusableRef","ifDefined","sideOffset","alignOffset","textContent","trim","charAt","toUpperCase","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","query","prototype","state","property","type","Boolean","reflect","Number","attribute","customElement"],"mappings":"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"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport type Popout from '../popout/Popout.js'\nimport { ContextConsumer } from '@lit/context'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.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 { navListContext } from '../nav-group/nav-context.js'\nimport style from './NavItem.css'\n\nimport '../popout/Popout.js'\nimport '../tooltip/Tooltip.js'\n\nlet railTooltipIdCounter = 0\nlet railPopoutIdCounter = 0\n\n// Mirrors the layout's wide-viewport breakpoint so nav items only\n// switch to icon-only rendering when the layout actually shows the rail.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot icon - Slot for a custom leading icon element. Use when the `icon` attribute isn't enough — for example, an icon wrapped in a styled badge or circular frame. When set, it takes priority over the `icon` attribute and is shown in both the expanded nav and the collapsed rail.\n * @slot end - Trailing content rendered after the label inside the item's flex row. The slotted element flows naturally — it claims its real width and the label flex-shrinks to make room. Use for a custom badge, count pill, action icon, etc. when the `badge` attribute's plain text isn't enough.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @slot rail-tooltip - Full content of the rail-mode tooltip. When provided, it replaces the default label projection — write the tooltip's content directly (label + count + keyboard shortcut etc., bound to whatever reactive state you like). When absent, the tooltip falls back to the item's default-slot label. Only rendered in rail mode.\n *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-nav-item-color=var(--n-color-text-weak)] - Text color in the default state.\n * @cssprop [--n-nav-item-background=transparent] - Background color in the default state.\n * @cssprop [--n-nav-item-border-radius=var(--n-border-radius-s)] - Border radius of the item and its active-parent overlay.\n * @cssprop [--n-nav-item-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding.\n * @cssprop [--n-nav-item-padding-inline=var(--n-space-s)] - Inline-axis (start/end) padding.\n * @cssprop [--n-nav-item-line-height=var(--n-line-height-tight)] - Line height of the item's text.\n * @cssprop [--n-nav-item-icon-gap=calc(var(--n-space-s) * 1.4)] - Inline gap between the leading icon (the `icon` attribute or `icon` slot) and the item's text.\n * @cssprop [--n-nav-item-color-hover=var(--n-color-text)] - Text color on hover.\n * @cssprop [--n-nav-item-background-hover=var(--n-color-nav-hover)] - Background color on hover.\n * @cssprop [--n-nav-item-color-active=var(--n-color-text-on-accent)] - Text color when the item is `active`.\n * @cssprop [--n-nav-item-background-active=var(--n-color-accent)] - Background color when the item is `active`.\n * @cssprop [--n-nav-item-color-expanded=var(--n-color-text-weak)] - Text color when the item is an active parent (its subnav is expanded).\n * @cssprop [--n-nav-item-background-expanded=var(--n-color-accent)] - Background color of the overlay drawn behind an active-parent item.\n * @cssprop [--n-nav-item-expanded-overlay-opacity=0.12] - Opacity of the active-parent overlay. Set to `1` for a solid background.\n * @cssprop [--n-nav-item-expanded-overlay-filter=brightness(150%)] - Filter applied to the active-parent overlay. Set to `none` to disable.\n * @cssprop [--n-rail-flyout-background=var(--n-color-surface)] - Background colour of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-box-shadow=var(--n-box-shadow-popout)] - Box-shadow of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-min-inline-size=220px] - Minimum inline size (width in LTR) of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-padding=var(--n-space-s)] - Padding of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-offset-inline=0] - Extra inline-axis offset applied to the rail flyout (positive values push it away from the rail in LTR; mirrored in RTL).\n * @cssprop [--n-rail-flyout-offset-block=0] - Extra block-axis offset applied to the rail flyout (positive values push it downward).\n * @cssprop [--n-rail-subnav-indicator-color=var(--n-color-border-strong)] - Colour of the small triangle indicator drawn in the bottom-inline-end corner of rail items that have a subnav (default + hover state).\n * @cssprop [--n-rail-subnav-indicator-color-active=var(--n-color-border-hover)] - Colour of the triangle indicator while the item's flyout popout is open.\n * @cssprop [--n-nav-badge-background=var(--n-color-status-notification)] - Background colour of the built-in `badge` attribute pill (`.n-nav-badge`).\n * @cssprop [--n-nav-badge-color=#fff] - Text colour of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-size=var(--n-font-size-xs)] - Font size of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-weight=var(--n-font-weight)] - Font weight of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-line-height=1] - Line height of the built-in `badge` attribute pill. Combined with `--n-nav-badge-padding-block` this controls the pill's effective block size.\n * @cssprop [--n-nav-badge-padding-block=var(--n-space-xs)] - Block-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-padding-inline=calc(var(--n-space-s) / 2)] - Inline-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-border-radius=var(--n-border-radius-pill)] - Border radius of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-min-inline-size=20px] - Minimum inline size (width in LTR) of the built-in `badge` attribute pill — sets a visual floor for single-digit counts.\n * @cssprop [--n-nav-badge-margin-inline-start=var(--n-space-xs)] - Inline-start margin separating the badge from the preceding label inside the nav-item's flex row.\n * @cssprop [--n-rail-badge-size=5px] - Diameter of the rail-mode dot the badge collapses into when the layout is in `collapse-mode=\"rail\"` and not `nav-open`.\n *\n * @parent Navigation\n */\n@customElement('nord-nav-item')\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, 'subnav')\n  private iconSlot = new SlotController(this, 'icon')\n  private railTooltipSlot = new SlotController(this, 'rail-tooltip')\n  private direction = new DirectionController(this)\n\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private readonly tooltipId = `n-nav-rail-tip-${++railTooltipIdCounter}`\n  private readonly popoutId = `n-nav-rail-pop-${++railPopoutIdCounter}`\n\n  @query('nord-popout') private popoutEl?: Popout\n\n  /**\n   * Reflects whether the ancestor layout is in rail-collapsed state\n   * (i.e. `collapse-mode=\"rail\"` and `nav-open` is absent).\n   * @internal\n   */\n  @state() private railCollapsed = false\n\n  /**\n   * Whether this item is inside a `nord-nav-group` (which exposes `role=\"list\"`).\n   * Only then may it emit `role=\"listitem\"` — a listitem without a list ancestor\n   * fails the `aria-required-parent` accessibility check. Standalone items (e.g.\n   * directly in `nord-navigation` or used as a `nord-dropdown` toggle) omit the role.\n   * @internal\n   */\n  @state() private inList = false\n\n  private listConsumer = new ContextConsumer(this, {\n    context: navListContext,\n    subscribe: true,\n    callback: (value) => {\n      this.inList = value === true\n    },\n  })\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   * Opt-in: when set, the item's rail-mode subnav flyout closes automatically\n   * once one of its leaf descendants is activated (for example, when a user\n   * clicks a link inside the flyout). Off by default — existing flyout\n   * behavior is unchanged unless this attribute is present.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'auto-dismiss-on-select' }) autoDismissOnSelect = false\n\n  /**\n   * Distance in pixels between the rail-mode tooltip and the item, forwarded\n   * to the internal [Tooltip](/components/tooltip/)'s `side-offset` (the\n   * Floating UI `offset` main axis). When unset, the tooltip's own default\n   * (`8`) applies. Useful for lining up rail-item tooltips with neighbouring\n   * standalone tooltips.\n   */\n  @property({ reflect: true, type: Number, attribute: 'side-offset' }) sideOffset?: number\n\n  /**\n   * Offset in pixels along the alignment axis for the rail-mode tooltip,\n   * forwarded to the internal [Tooltip](/components/tooltip/)'s\n   * `align-offset`. When unset, the tooltip's own default (`0`) applies.\n   */\n  @property({ reflect: true, type: Number, attribute: 'align-offset' }) alignOffset?: number\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  /**\n   * Closes this item's rail-mode subnav flyout if it is open.\n   *\n   * In rail-collapsed mode a parent nav item opens its subnav inside a\n   * flyout popout. Clicking a leaf link inside that flyout does not close it,\n   * because the click passes through the popout host and is treated as\n   * \"inside\" by the popout's light-dismiss logic. Call this method to close\n   * the flyout without reaching into the component's shadow DOM.\n   *\n   * Returns a promise that resolves once the flyout's hide animation ends.\n   * If there is no flyout, or it is already closed, the promise resolves\n   * immediately.\n   */\n  async closeFlyout(): Promise<void> {\n    await this.popoutEl?.hide()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n    this.addEventListener('activate', this.handleDescendantActivate)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n    this.removeEventListener('activate', this.handleDescendantActivate)\n  }\n\n  // When `auto-dismiss-on-select` is set, close this item's rail flyout once a\n  // leaf descendant inside it is activated. Ignores the item's own activate\n  // event (a parent with a subnav does not fire `activate`, but guard anyway).\n  private handleDescendantActivate = (event: Event) => {\n    if (!this.autoDismissOnSelect || event.target === this) {\n      return\n    }\n    void this.closeFlyout()\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.railCollapsed = false\n    this.popoutEl?.hide()\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    // Subnav children render inside a flyout popover when rail-collapsed;\n    // they should keep their full layout, not collapse to icons themselves.\n    const isNested = !!this.parentElement?.closest('nord-nav-item')\n    const next = !isNested\n      && railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    if (!next) {\n      this.popoutEl?.hide()\n    }\n    this.railCollapsed = next\n  }\n\n  render() {\n    if (this.railCollapsed) {\n      return this.renderRail()\n    }\n\n    const innards = html`\n      ${this.renderLeadingIcon()}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n        <slot name=\"end\"></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    }\n    else if (this.href) {\n      element = this.renderLink(innards)\n    }\n    else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=${cond(this.inList, 'listitem')}>\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  // Resolves the leading icon shown in both the expanded nav and the rail:\n  // a slotted custom icon wins over the `icon` attribute, which wins over nothing.\n  private renderLeadingIcon(): TemplateResult | typeof nothing {\n    if (this.iconSlot.hasContent) {\n      return html`<slot name=\"icon\" class=\"n-nav-icon\"></slot>`\n    }\n    if (this.icon) {\n      return html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>`\n    }\n    return nothing\n  }\n\n  private renderRail(): TemplateResult {\n    const leadingIcon = this.renderLeadingIcon()\n    // Rail is icon-only, so when there's no icon at all we fall back to the\n    // first letter of the label rather than rendering an empty button.\n    const iconEl = leadingIcon === nothing\n      ? html`<span class=\"n-rail-fallback\">${this.textInitial}</span>`\n      : leadingIcon\n    const badge = this.badge ? html`<span class=\"n-nav-badge n-rail-badge\">${this.badge}</span>` : nothing\n\n    if (this.subnavSlot.hasContent) {\n      return this.renderRailFlyout(iconEl, badge)\n    }\n\n    return html`\n      <div role=${cond(this.inList, 'listitem')} class=\"n-rail-host\">\n        ${this.href\n          ? html`\n              <a\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-current=${cond(this.active, 'page')}\n                aria-describedby=${this.tooltipId}\n                href=${this.href}\n              >\n                ${iconEl}${badge}\n              </a>\n            `\n          : html`\n              <button\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-describedby=${this.tooltipId}\n              >\n                ${iconEl}${badge}\n              </button>\n            `}\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\" side-offset=${ifDefined(this.sideOffset)} align-offset=${ifDefined(this.alignOffset)}>\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n      </div>\n    `\n  }\n\n  private renderRailFlyout(iconEl: TemplateResult, badge: TemplateResult | typeof nothing): TemplateResult {\n    // Click-only: nord-popout's getToggle() listens for click on the\n    // [aria-controls={popoutId}] target. Hover used to open as well, but\n    // that conflicted with the popout's click-to-toggle (hover opened, then\n    // the click was treated as a close).\n    // The tooltip still shows on hover so the icon has an accessible label\n    // — nord-tooltip listens for mouseover/focusin on [aria-describedby].\n    return html`\n      <div role=${cond(this.inList, 'listitem')} class=\"n-rail-host\">\n        <button\n          class=\"n-nav-item n-rail-item\"\n          ${ref(this.focusableRef)}\n          aria-controls=${this.popoutId}\n          aria-describedby=${this.tooltipId}\n        >\n          ${iconEl}${badge}\n          <svg\n            class=\"n-rail-subnav-indicator\"\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"5\"\n            height=\"5\"\n            viewBox=\"0 0 5 5\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\" side-offset=${ifDefined(this.sideOffset)} align-offset=${ifDefined(this.alignOffset)}>\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n        <nord-popout id=${this.popoutId} position=\"inline-end\" always-floating>\n          <div class=\"n-rail-flyout-body\">\n            <slot name=${this.subnavSlot.slotName}></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private get textInitial(): string {\n    const text = this.textContent?.trim() ?? ''\n    return text.charAt(0).toUpperCase()\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, 'page')} href=${this.href || ''}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ 'n-toggle-icon': true, 'n-rtl': this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent('toggle'))\n  }\n\n  @observe('active', 'updated')\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent('activate'))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-item': NavItem\n  }\n}\n"],"names":["railTooltipIdCounter","railPopoutIdCounter","railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","iconSlot","railTooltipSlot","direction","DirectionController","tooltipId","popoutId","railCollapsed","inList","listConsumer","ContextConsumer","context","navListContext","subscribe","callback","value","active","open","autoDismissOnSelect","handleDescendantActivate","event","target","closeFlyout","handleViewportChange","updateRailState","hasSubNav","hasContent","popoutEl","_a","hide","connectedCallback","super","startObservingLayout","disconnectedCallback","stopObservingLayout","observedLayout","closest","layoutObserver","MutationObserver","observe","attributes","attributeFilter","disconnect","undefined","_b","next","parentElement","getAttribute","hasAttribute","render","renderRail","innards","html","renderLeadingIcon","badge","nothing","element","renderToggle","href","renderLink","renderButton","cond","slotName","icon","leadingIcon","iconEl","textInitial","renderRailFlyout","ref","focusableRef","ifDefined","sideOffset","alignOffset","textContent","trim","charAt","toUpperCase","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","query","prototype","state","property","type","Boolean","reflect","attribute","Number","customElement"],"mappings":"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"}

package/lib/Navigation.js

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

package/lib/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import type NavItem from '../nav-item/NavItem.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Navigation.css'\n\n// Mirrors the layout's wide-viewport breakpoint. Used to drive the\n// `data-rail-collapsed` attribute below — Safari doesn't support\n// `:host-context()`, so we propagate the layout's rail state via an\n// observed attribute on the host instead.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n * @cssprop [--n-navigation-scroll-shadow-color-start=rgb(0, 0, 0, 0.1)] - Color of the scroll-affordance shadow shown at the top of the scroll area (below the header) when `sticky-footer` is set. Set to `transparent` to disable.\n * @cssprop [--n-navigation-scroll-shadow-color-end=rgb(0, 0, 0, 0.1)] - Color of the scroll-affordance shadow shown at the bottom of the scroll area (above the footer) when `sticky-footer` is set. Set to `transparent` to disable.\n * @cssprop [--n-navigation-scroll-mask=none] - `mask-image` applied to the scrollable area when `sticky-footer` is set. Use with the shadow colors set to `transparent` to replace the dark scroll-shadow with a soft content fade at the edges. Example: `linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%)`.\n * @cssprop [--n-navigation-padding-block=var(--n-space-m)] - Block-axis (top/bottom) padding of the `<nav>` element that wraps the slotted nav groups.\n * @cssprop [--n-navigation-padding-inline=var(--n-space-m)] - Inline-axis (start/end) padding of the `<nav>` element that wraps the slotted nav groups.\n * @cssprop [--n-navigation-footer-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding inside the footer slot when `sticky-footer` is set. Has no visual effect when the footer slot is empty (slot is hidden in that case).\n * @cssprop [--n-navigation-footer-padding-inline=var(--n-navigation-padding-inline)] - Inline-axis (start/end) padding inside the footer slot when `sticky-footer` is set. Defaults to `--n-navigation-padding-inline` so the footer aligns with the nav content unless overridden. Has no visual effect when the footer slot is empty.\n */\n@customElement('nord-navigation')\nexport default class Navigation extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, 'header')\n  private events = new EventController(this)\n  private footerObserver: MutationObserver | null = null\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private allowItemsToRemainOpen = false\n\n  /**\n   * Controls whether the navigations's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    // if we add this event listener during render\n    // we seem to miss the first activate event.\n    // so let's add it as early as possible.\n    this.events.listen(this, 'activate', this.handleActivate)\n\n    // in cases where there is an initially active nav-item,\n    // we should allow any nav-items with the `open` attribute to remain open.\n    const activeItem = this.querySelector('nord-nav-item[active]')\n    this.allowItemsToRemainOpen = activeItem != null\n\n    if (typeof window !== 'undefined') {\n      this.observeFooter()\n    }\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.footerObserver?.disconnect()\n    this.footerObserver = null\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.toggleAttribute('data-rail-collapsed', false)\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    const next = railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    this.toggleAttribute('data-rail-collapsed', next)\n  }\n\n  /**\n   * Observe the footer slot element for visibility changes.\n   * Watches style and class attributes on the footer element itself, and\n   * childList on the host to detect footer being added/removed (e.g. v-if).\n   */\n  private observeFooter() {\n    this.footerObserver = new MutationObserver(() => this.requestUpdate())\n\n    // Watch for footer element being added/removed from the host\n    this.footerObserver.observe(this, { childList: true })\n\n    // Watch hidden attribute on the footer element directly\n    const footerEl = this.querySelector(':scope > [slot=\"footer\"]')\n    if (footerEl) {\n      this.footerObserver.observe(footerEl, {\n        attributes: true,\n        attributeFilter: ['style', 'class'],\n      })\n    }\n  }\n\n  private get isFooterVisible() {\n    // In SSR, the element is backed by a minimal DOM shim that does not implement\n    // querySelector or window.getComputedStyle. Return true so the footer slot\n    // renders as visible during server-side rendering.\n    if (typeof window === 'undefined') {\n      return true\n    }\n\n    const footerEl = this.querySelector<HTMLElement>(':scope > [slot=\"footer\"]')\n    if (!footerEl) {\n      return false\n    }\n\n    const style = window.getComputedStyle(footerEl)\n    return (\n      style.display !== 'none'\n      && style.visibility !== 'hidden'\n      && style.visibility !== 'collapse'\n      && style.opacity !== '0'\n      && style.contentVisibility !== 'hidden'\n    )\n  }\n\n  render() {\n    return html`\n      <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n      <div class=\"n-navigation-main\">\n        <nav>\n          <slot></slot>\n        </nav>\n        ${!this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n      </div>\n      ${this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n    `\n  }\n\n  private handleActivate = (e: Event) => {\n    const target = e.target as NavItem\n    const ancestors = new Set<NavItem>()\n\n    // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n    // it's more efficient to first gather ancestors here,\n    // than to repeatedly call item.contains(target) in the for-loop below.\n    let parent = target.parentElement?.closest('nord-nav-item')\n    while (parent) {\n      ancestors.add(parent)\n      parent = parent.parentElement?.closest('nord-nav-item')\n    }\n\n    // open and activate any items on the path, otherwise close and deactivate.\n    // however, if the item is set to open initially, we should not close it.\n    for (const item of this.querySelectorAll('nord-nav-item')) {\n      if (item !== target) {\n        const isAncestor = ancestors.has(item)\n        item.open = isAncestor || (this.allowItemsToRemainOpen && item.open)\n        item.active = isAncestor\n      }\n    }\n\n    // this is a one-time thing, purely for initial open state\n    this.allowItemsToRemainOpen = false\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-navigation': Navigation\n  }\n}\n"],"names":["railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","footerObserver","allowItemsToRemainOpen","stickyFooter","handleViewportChange","updateRailState","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","activeItem","querySelector","window","observeFooter","startObservingLayout","disconnectedCallback","disconnect","stopObservingLayout","observedLayout","layoutObserver","MutationObserver","observe","attributes","attributeFilter","undefined","toggleAttribute","next","getAttribute","hasAttribute","requestUpdate","childList","footerEl","isFooterVisible","style","getComputedStyle","display","visibility","opacity","contentVisibility","render","html","isEmpty","nothing","styles","componentStyle","__decorate","property","type","Boolean","reflect","attribute","prototype","customElement"],"mappings":"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"}
+{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import type NavItem from '../nav-item/NavItem.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Navigation.css'\n\n// Mirrors the layout's wide-viewport breakpoint. Used to drive the\n// `data-rail-collapsed` attribute below — Safari doesn't support\n// `:host-context()`, so we propagate the layout's rail state via an\n// observed attribute on the host instead.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n * @cssprop [--n-navigation-scroll-shadow-color-start=rgb(0, 0, 0, 0.1)] - Color of the scroll-affordance shadow shown at the top of the scroll area (below the header) when `sticky-footer` is set. Set to `transparent` to disable.\n * @cssprop [--n-navigation-scroll-shadow-color-end=rgb(0, 0, 0, 0.1)] - Color of the scroll-affordance shadow shown at the bottom of the scroll area (above the footer) when `sticky-footer` is set. Set to `transparent` to disable.\n * @cssprop [--n-navigation-scroll-mask=none] - `mask-image` applied to the scrollable area when `sticky-footer` is set. Use with the shadow colors set to `transparent` to replace the dark scroll-shadow with a soft content fade at the edges. Example: `linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%)`.\n * @cssprop [--n-navigation-padding-block=var(--n-space-m)] - Block-axis (top/bottom) padding of the `<nav>` element that wraps the slotted nav groups.\n * @cssprop [--n-navigation-padding-inline=var(--n-space-m)] - Inline-axis (start/end) padding of the `<nav>` element that wraps the slotted nav groups.\n * @cssprop [--n-navigation-footer-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding inside the footer slot when `sticky-footer` is set. Has no visual effect when the footer slot is empty (slot is hidden in that case).\n * @cssprop [--n-navigation-footer-padding-inline=var(--n-navigation-padding-inline)] - Inline-axis (start/end) padding inside the footer slot when `sticky-footer` is set. Defaults to `--n-navigation-padding-inline` so the footer aligns with the nav content unless overridden. Has no visual effect when the footer slot is empty.\n */\n@customElement('nord-navigation')\nexport default class Navigation extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, 'header')\n  private events = new EventController(this)\n  private footerObserver: MutationObserver | null = null\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private allowItemsToRemainOpen = false\n\n  /**\n   * Controls whether the navigations's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  /**\n   * Opt-in: when set, any open rail-mode subnav flyout in this navigation\n   * closes automatically once one of its leaf items is activated (for example,\n   * when a user clicks a link inside a flyout). Off by default — existing\n   * flyout behavior is unchanged unless this attribute is present.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'auto-dismiss-on-select' }) autoDismissOnSelect: boolean = false\n\n  /**\n   * Closes every open rail-mode subnav flyout within this navigation.\n   *\n   * Each parent `<nord-nav-item>` renders its rail flyout inside its own shadow\n   * DOM, so a leaf link click inside a flyout does not dismiss it. Wire a single\n   * root-level handler that calls this method to close any open flyout without\n   * reaching into component shadow DOM.\n   *\n   * Returns a promise that resolves once every flyout has finished closing.\n   */\n  async closeAllFlyouts(): Promise<void> {\n    const items = this.querySelectorAll<NavItem>('nord-nav-item')\n    await Promise.all(Array.from(items, item => item.closeFlyout()))\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    // if we add this event listener during render\n    // we seem to miss the first activate event.\n    // so let's add it as early as possible.\n    this.events.listen(this, 'activate', this.handleActivate)\n\n    // in cases where there is an initially active nav-item,\n    // we should allow any nav-items with the `open` attribute to remain open.\n    const activeItem = this.querySelector('nord-nav-item[active]')\n    this.allowItemsToRemainOpen = activeItem != null\n\n    if (typeof window !== 'undefined') {\n      this.observeFooter()\n    }\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.footerObserver?.disconnect()\n    this.footerObserver = null\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.toggleAttribute('data-rail-collapsed', false)\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    const next = railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    this.toggleAttribute('data-rail-collapsed', next)\n  }\n\n  /**\n   * Observe the footer slot element for visibility changes.\n   * Watches style and class attributes on the footer element itself, and\n   * childList on the host to detect footer being added/removed (e.g. v-if).\n   */\n  private observeFooter() {\n    this.footerObserver = new MutationObserver(() => this.requestUpdate())\n\n    // Watch for footer element being added/removed from the host\n    this.footerObserver.observe(this, { childList: true })\n\n    // Watch hidden attribute on the footer element directly\n    const footerEl = this.querySelector(':scope > [slot=\"footer\"]')\n    if (footerEl) {\n      this.footerObserver.observe(footerEl, {\n        attributes: true,\n        attributeFilter: ['style', 'class'],\n      })\n    }\n  }\n\n  private get isFooterVisible() {\n    // In SSR, the element is backed by a minimal DOM shim that does not implement\n    // querySelector or window.getComputedStyle. Return true so the footer slot\n    // renders as visible during server-side rendering.\n    if (typeof window === 'undefined') {\n      return true\n    }\n\n    const footerEl = this.querySelector<HTMLElement>(':scope > [slot=\"footer\"]')\n    if (!footerEl) {\n      return false\n    }\n\n    const style = window.getComputedStyle(footerEl)\n    return (\n      style.display !== 'none'\n      && style.visibility !== 'hidden'\n      && style.visibility !== 'collapse'\n      && style.opacity !== '0'\n      && style.contentVisibility !== 'hidden'\n    )\n  }\n\n  render() {\n    return html`\n      <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n      <div class=\"n-navigation-main\">\n        <nav>\n          <slot></slot>\n        </nav>\n        ${!this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n      </div>\n      ${this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n    `\n  }\n\n  private handleActivate = (e: Event) => {\n    const target = e.target as NavItem\n    const ancestors = new Set<NavItem>()\n\n    // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n    // it's more efficient to first gather ancestors here,\n    // than to repeatedly call item.contains(target) in the for-loop below.\n    let parent = target.parentElement?.closest('nord-nav-item')\n    while (parent) {\n      ancestors.add(parent)\n      parent = parent.parentElement?.closest('nord-nav-item')\n    }\n\n    // open and activate any items on the path, otherwise close and deactivate.\n    // however, if the item is set to open initially, we should not close it.\n    for (const item of this.querySelectorAll('nord-nav-item')) {\n      if (item !== target) {\n        const isAncestor = ancestors.has(item)\n        item.open = isAncestor || (this.allowItemsToRemainOpen && item.open)\n        item.active = isAncestor\n      }\n    }\n\n    // this is a one-time thing, purely for initial open state\n    this.allowItemsToRemainOpen = false\n\n    // opt-in: close any open rail flyout once a leaf item is selected.\n    if (this.autoDismissOnSelect) {\n      void this.closeAllFlyouts()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-navigation': Navigation\n  }\n}\n"],"names":["railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","footerObserver","allowItemsToRemainOpen","stickyFooter","autoDismissOnSelect","handleViewportChange","updateRailState","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","closeAllFlyouts","items","Promise","all","Array","from","closeFlyout","connectedCallback","super","listen","activeItem","querySelector","window","observeFooter","startObservingLayout","disconnectedCallback","disconnect","stopObservingLayout","observedLayout","layoutObserver","MutationObserver","observe","attributes","attributeFilter","undefined","toggleAttribute","next","getAttribute","hasAttribute","requestUpdate","childList","footerEl","isFooterVisible","style","getComputedStyle","display","visibility","opacity","contentVisibility","render","html","isEmpty","nothing","styles","componentStyle","__decorate","property","type","Boolean","reflect","attribute","prototype","customElement"],"mappings":"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"}

package/lib/Range.js

@@ -1,2 +1,2 @@
-import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as n,nothing as a,LitElement as o}from"lit";import{property as t,customElement as i}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{D as d}from"./DirectionController-ChvNGESZ.js";import{N as m}from"./events-Bv6wNHwJ.js";import{A as b}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as g}from"./FormAssociatedMixin-D9aPREgv.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{R as p}from"./ReadonlyMixin-BdJPGtQ3.js";import{s as v}from"./Component-BJ5O5n8k.js";import{s as f}from"./FormField-CMgEFZCK.js";import{s as _}from"./TextField-CSKvieoG.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";const x=e`:host{--_n-range-progress:0%;--_n-range-thumb-focus-ring:0 0 0 1px var(--n-color-accent);--_n-range-thumb-color:var(--n-color-text-on-accent);--_n-range-thumb-border-size:1px;--_n-range-thumb-border-color:var(--n-color-border-strong);--_n-range-gradient-direction:right;--_n-range-thumb-size:var(--n-range-thumb-size,20px);--_n-range-track-color-active:var(--n-range-track-color-active,var(--n-color-accent));--_n-range-track-color-inactive:var(--n-range-track-color-inactive,var(--n-color-border-strong));--_n-range-track-size:var(--n-range-track-size,3px)}.n-range{appearance:none;background:linear-gradient(to var(--_n-range-gradient-direction),var(--_n-range-track-color-active) 0,var(--_n-range-track-color-active) var(--_n-range-progress),var(--_n-range-track-color-inactive) var(--_n-range-progress));border-radius:var(--n-border-radius-s);inline-size:100%}.n-range.is-rtl{--_n-range-gradient-direction:left}.n-range::-webkit-slider-runnable-track{block-size:var(--_n-range-track-size);inline-size:100%}.n-range::-webkit-slider-thumb{appearance:none;background:var(--_n-range-thumb-color);block-size:var(--_n-range-thumb-size);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);border-radius:var(--n-border-radius-circle);box-shadow:var(--n-box-shadow),var(--n-box-shadow);cursor:pointer;inline-size:var(--_n-range-thumb-size);margin-block-start:calc(var(--_n-range-thumb-size)/2*-1 - var(--_n-range-track-size)/2*-1)}.n-range::-moz-range-track{block-size:var(--_n-range-track-size);border:var(--n-space-s) solid var(--n-color-surface);inline-size:100%}.n-range::-moz-range-thumb{appearance:none;background:var(--_n-range-thumb-color);block-size:var(--_n-range-thumb-size);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);border-radius:var(--n-border-radius-circle);box-shadow:var(--n-box-shadow);cursor:pointer;inline-size:var(--_n-range-thumb-size);margin-block-start:calc(var(--_n-range-thumb-size)/2*-1 - var(--_n-range-track-size)/2*-1)}.n-label-container{inline-size:100%;margin-block-end:0}label{display:flex!important}.n-range-output{color:var(--n-color-text-weaker);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);margin-inline-start:auto}.n-range:focus{outline:none}.n-label-container:hover+.n-input-container .n-input:disabled,.n-range:disabled{opacity:.5}.n-range:disabled::-webkit-slider-thumb,.n-range[readonly]::-webkit-slider-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:disabled::-moz-range-thumb,.n-range[readonly]::-moz-range-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:focus::-webkit-slider-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}.n-range:focus::-moz-range-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}`;let z=class extends(g(b(p(h(u(o)))))){constructor(){super(...arguments),this.direction=new d(this),this.min=0,this.max=10,this.step=1,this.expand=!1}render(){const r=Number(this.value)||0,e=Math.max(0,(r-this.min)/(this.max-this.min));return n`<div class="n-input-container">${this.renderLabel(n`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${c(this.focusableRef)} id="${this.inputId}" type="range" class="${s({"n-range":!0,"is-rtl":this.direction.isRTL})}" name="${l(this.name)}" min="${this.min}" step="${this.step}" max="${this.max}" style="${`--_n-range-progress: ${100*e}%`}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" .value="${this.value?this.value:"0"}" @input="${this.handleInput}" @change="${this.handleChange}" aria-label="${l(this.controlAriaLabel)}" aria-describedby="${l(this.controlAriaDescribedby)}" aria-invalid="${l(this.controlAriaInvalid)}"></div>${this.renderError()} ${this.isHintBelow?this.renderHint():a}`}handleInput(r){r.stopPropagation();const e=r.target;if(this.readonly)return r.preventDefault(),void(e.value=this.value);this.value=e.value,this.dispatchEvent(new m("input"))}};z.styles=[v,f,_,x],r([t({reflect:!0,type:Number})],z.prototype,"min",void 0),r([t({reflect:!0,type:Number})],z.prototype,"max",void 0),r([t({reflect:!0,type:Number})],z.prototype,"step",void 0),r([t({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),z=r([i("nord-range")],z);var k=z;export{k as default};
+import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as n,nothing as a,LitElement as o}from"lit";import{property as t,customElement as i}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{D as d}from"./DirectionController-ChvNGESZ.js";import{N as m}from"./events-Bv6wNHwJ.js";import{A as b}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as g}from"./FormAssociatedMixin-D9aPREgv.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{R as p}from"./ReadonlyMixin-BdJPGtQ3.js";import{s as v}from"./Component-BJ5O5n8k.js";import{s as f}from"./FormField-CMgEFZCK.js";import{s as _}from"./TextField-BYSciLeB.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";const x=e`:host{--_n-range-progress:0%;--_n-range-thumb-focus-ring:0 0 0 1px var(--n-color-accent);--_n-range-thumb-color:var(--n-color-text-on-accent);--_n-range-thumb-border-size:1px;--_n-range-thumb-border-color:var(--n-color-border-strong);--_n-range-gradient-direction:right;--_n-range-thumb-size:var(--n-range-thumb-size,20px);--_n-range-track-color-active:var(--n-range-track-color-active,var(--n-color-accent));--_n-range-track-color-inactive:var(--n-range-track-color-inactive,var(--n-color-border-strong));--_n-range-track-size:var(--n-range-track-size,3px)}.n-range{appearance:none;background:linear-gradient(to var(--_n-range-gradient-direction),var(--_n-range-track-color-active) 0,var(--_n-range-track-color-active) var(--_n-range-progress),var(--_n-range-track-color-inactive) var(--_n-range-progress));border-radius:var(--n-border-radius-s);inline-size:100%}.n-range.is-rtl{--_n-range-gradient-direction:left}.n-range::-webkit-slider-runnable-track{block-size:var(--_n-range-track-size);inline-size:100%}.n-range::-webkit-slider-thumb{appearance:none;background:var(--_n-range-thumb-color);block-size:var(--_n-range-thumb-size);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);border-radius:var(--n-border-radius-circle);box-shadow:var(--n-box-shadow),var(--n-box-shadow);cursor:pointer;inline-size:var(--_n-range-thumb-size);margin-block-start:calc(var(--_n-range-thumb-size)/2*-1 - var(--_n-range-track-size)/2*-1)}.n-range::-moz-range-track{block-size:var(--_n-range-track-size);border:var(--n-space-s) solid var(--n-color-surface);inline-size:100%}.n-range::-moz-range-thumb{appearance:none;background:var(--_n-range-thumb-color);block-size:var(--_n-range-thumb-size);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);border-radius:var(--n-border-radius-circle);box-shadow:var(--n-box-shadow);cursor:pointer;inline-size:var(--_n-range-thumb-size);margin-block-start:calc(var(--_n-range-thumb-size)/2*-1 - var(--_n-range-track-size)/2*-1)}.n-label-container{inline-size:100%;margin-block-end:0}label{display:flex!important}.n-range-output{color:var(--n-color-text-weaker);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);margin-inline-start:auto}.n-range:focus{outline:none}.n-label-container:hover+.n-input-container .n-input:disabled,.n-range:disabled{opacity:.5}.n-range:disabled::-webkit-slider-thumb,.n-range[readonly]::-webkit-slider-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:disabled::-moz-range-thumb,.n-range[readonly]::-moz-range-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:focus::-webkit-slider-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}.n-range:focus::-moz-range-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}`;let z=class extends(g(b(p(h(u(o)))))){constructor(){super(...arguments),this.direction=new d(this),this.min=0,this.max=10,this.step=1,this.expand=!1}render(){const r=Number(this.value)||0,e=Math.max(0,(r-this.min)/(this.max-this.min));return n`<div class="n-input-container">${this.renderLabel(n`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${c(this.focusableRef)} id="${this.inputId}" type="range" class="${s({"n-range":!0,"is-rtl":this.direction.isRTL})}" name="${l(this.name)}" min="${this.min}" step="${this.step}" max="${this.max}" style="${`--_n-range-progress: ${100*e}%`}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" .value="${this.value?this.value:"0"}" @input="${this.handleInput}" @change="${this.handleChange}" aria-label="${l(this.controlAriaLabel)}" aria-describedby="${l(this.controlAriaDescribedby)}" aria-invalid="${l(this.controlAriaInvalid)}"></div>${this.renderError()} ${this.isHintBelow?this.renderHint():a}`}handleInput(r){r.stopPropagation();const e=r.target;if(this.readonly)return r.preventDefault(),void(e.value=this.value);this.value=e.value,this.dispatchEvent(new m("input"))}};z.styles=[v,f,_,x],r([t({reflect:!0,type:Number})],z.prototype,"min",void 0),r([t({reflect:!0,type:Number})],z.prototype,"max",void 0),r([t({reflect:!0,type:Number})],z.prototype,"step",void 0),r([t({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),z=r([i("nord-range")],z);var k=z;export{k as default};
 //# sourceMappingURL=Range.js.map

package/lib/SegmentedControlItem.js

@@ -6,7 +6,7 @@ import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as n,nothing as
     --n-segmented-control-item-gradient,linear-gradient(to bottom,#0000 50%,rgba(0,0,0,.013) 100%)
   );--_n-segmented-control-item-background-color:var(
     --n-segmented-control-item-background-color,var(--n-color-nav-hover)
-  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color,var(--n-color-text-weaker));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius,0);--_n-segmented-control-item-inline-size:var(--n-segmented-control-item-inline-size,auto);--_n-segmented-control-item-box-shadow:var(--n-segmented-control-item-box-shadow,none);--_n-segmented-control-item-icon-size:var(--n-size-icon-s);--_n-segmented-control-item-opacity:1;flex:1;position:relative}::slotted(label){--n-icon-size:var(--_n-segmented-control-item-icon-size);align-items:center;background-color:var(--_n-segmented-control-item-background-color)!important;border:0!important;border-radius:var(--_n-segmented-control-item-border-radius)!important;box-shadow:var(--_n-segmented-control-item-box-shadow)!important;color:var(--_n-segmented-control-item-color)!important;cursor:pointer;display:flex!important;font-family:var(--n-font-family)!important;font-feature-settings:var(--n-font-features);font-size:var(--_n-segmented-control-item-font-size)!important;font-weight:var(--_n-segmented-control-item-font-weight)!important;gap:var(--_n-segmented-control-item-gap);inline-size:var(--_n-segmented-control-item-inline-size);justify-content:center;line-height:var(--n-line-height-form)!important;min-block-size:var(--_n-segmented-control-item-min-block-size)!important;opacity:var(--_n-segmented-control-item-opacity);padding:calc(var(--n-space-xs) - 1px) var(--_n-segmented-control-item-padding-inline)!important;position:relative!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color!important;user-select:none;white-space:nowrap!important}::slotted(input){appearance:none!important;background:#0000!important;block-size:100%!important;border:0!important;border-radius:var(--n-border-radius-s)!important;inline-size:100%!important;inset-block-start:0!important;inset-inline-start:0!important;margin:0!important;padding:0!important;position:absolute!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color,box-shadow!important}::slotted(input:focus-visible),:host([checked]){z-index:var(--n-index-mask)}:host([checked]) ::slotted(label){--_n-segmented-control-item-background-color:var(
+  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color,var(--n-color-text-weaker));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius,0);--_n-segmented-control-item-inline-size:var(--n-segmented-control-item-inline-size,auto);--_n-segmented-control-item-box-shadow:var(--n-segmented-control-item-box-shadow,none);--_n-segmented-control-item-icon-size:var(--n-size-icon-s);--_n-segmented-control-item-opacity:1;flex:1;position:relative}::slotted(label){--n-icon-size:var(--_n-segmented-control-item-icon-size);align-items:center;background-color:var(--_n-segmented-control-item-background-color)!important;border:0!important;border-radius:var(--_n-segmented-control-item-border-radius)!important;box-shadow:var(--_n-segmented-control-item-box-shadow)!important;color:var(--_n-segmented-control-item-color)!important;cursor:pointer;display:flex!important;font-family:var(--n-font-family)!important;font-feature-settings:var(--n-font-features);font-size:var(--_n-segmented-control-item-font-size)!important;font-weight:var(--_n-segmented-control-item-font-weight)!important;gap:var(--_n-segmented-control-item-gap);inline-size:var(--_n-segmented-control-item-inline-size);justify-content:center;line-height:var(--n-line-height-form)!important;min-block-size:var(--_n-segmented-control-item-min-block-size)!important;opacity:var(--_n-segmented-control-item-opacity);padding-block:calc(var(--n-space-xs) - 1px)!important;padding-inline:var(--_n-segmented-control-item-padding-inline)!important;position:relative!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color!important;user-select:none;white-space:nowrap!important}::slotted(input){appearance:none!important;background:#0000!important;block-size:100%!important;border:0!important;border-radius:var(--n-border-radius-s)!important;inline-size:100%!important;inset-block-start:0!important;inset-inline-start:0!important;margin:0!important;padding:0!important;position:absolute!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color,box-shadow!important}::slotted(input:focus-visible),:host([checked]){z-index:var(--n-index-mask)}:host([checked]) ::slotted(label){--_n-segmented-control-item-background-color:var(
     --n-segmented-control-item-background-color,var(--n-color-surface)
   );--_n-segmented-control-item-color:var(--n-segmented-control-item-color,var(--n-color-text));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius,var(--n-border-radius-s));--_n-segmented-control-item-box-shadow:var(
     --n-segmented-control-item-box-shadow,0 0 0 1px var(--n-color-border-strong),var(--n-box-shadow),var(--n-box-shadow)

package/lib/TextField-BYSciLeB.js

@@ -0,0 +1,2 @@
+import{css as n}from"lit";const r=n`:host{--_n-input-inline-size:var(--n-input-inline-size,240px);--_n-input-block-size:var(--n-input-block-size,var(--n-space-xl));--_n-input-background:var(--n-input-background,var(--n-color-surface));--_n-input-color:var(--n-input-color,var(--n-color-text));--_n-input-font-size:var(--n-input-font-size,var(--n-font-size-m));--_n-input-border-color:var(--n-input-border-color,var(--n-color-border-strong));--_n-input-border-radius:var(--n-input-border-radius,var(--n-border-radius-s));--_n-input-text-align:var(--n-input-text-align,start);--_n-input-placeholder-color:var(--n-input-placeholder-color,var(--n-color-text-weakest));--_n-input-padding-block:calc(var(--_n-input-block-size)/2 - var(--n-line-height-form)/2 - 1px);--_n-input-padding-inline:calc(var(--n-space-s)*1.6);--_n-input-min-content-block-size:calc(var(--n-line-height-form) + var(--n-space-s)/1.6*2 + 2px)}.n-input-container{inline-size:var(--_n-input-inline-size);position:relative}.n-input{background:var(--_n-input-background);border:1px solid var(--_n-input-border-color);border-radius:var(--_n-input-border-radius);color:var(--_n-input-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-input-font-size);inline-size:100%;line-height:var(--n-line-height-form);padding-block:var(--_n-input-padding-block);padding-inline:var(--_n-input-padding-inline);text-align:var(--_n-input-text-align);transition:border var(--n-transition-quickly),box-shadow var(--n-transition-quickly),background var(--n-transition-quickly)}@media (max-width:480px){:host{--_n-input-font-size:var(--n-input-font-size,var(--n-font-size-l))}}:host([expand]){--_n-input-inline-size:100%;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container{--_n-input-border-color:var(--n-input-border-color,var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-input-border-color,var(--n-color-accent));--_n-input-background:var(--n-input-background,var(--n-color-surface));box-shadow:0 0 0 1px var(--_n-input-border-color);outline:none}.n-input::placeholder{color:var(--_n-input-placeholder-color);opacity:1}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-input-border-color,var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-background:var(--n-input-background-inactive,var(--n-color-active));--_n-input-border-color:var(--n-input-border-color,var(--n-color-active));--_n-input-color:var(--n-input-color,var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-input-color,var(--n-color-text))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-input-border-color,var(--n-color-accent))}:host([size=s]){--_n-input-font-size:var(--n-font-size-s);--_n-input-padding-block:calc(var(--n-space-xs) - 1px);--_n-input-padding-inline:calc(var(--n-space-xs)*1.6)}:host([size=l]){--_n-input-font-size:var(--n-font-size-l);--_n-input-block-size:max(var(--n-input-block-size,calc(var(--n-space-xxl) - var(--n-space-l))),var(--_n-input-min-content-block-size));--_n-input-padding-block:calc(var(--_n-input-block-size)/2 - var(--n-line-height-form)/2 - 1px)}`;export{r as s};
+//# sourceMappingURL=TextField-BYSciLeB.js.map

package/lib/TextField-BYSciLeB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField-BYSciLeB.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/Textarea.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as r,nothing as o,LitElement as i}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as s}from"lit/directives/ref.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as p}from"./events-Bv6wNHwJ.js";import{A as d}from"./AutocompleteMixin-D8eiOxvO.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{F as u}from"./FormAssociatedMixin-D9aPREgv.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{R as v}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{T as b}from"./TextSelectableMixin-Cfv__lHS.js";import{s as z}from"./Component-BJ5O5n8k.js";import{s as j}from"./FormField-CMgEFZCK.js";import{s as f}from"./TextField-CSKvieoG.js";import{LocalizeController as g}from"./LocalizeController.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";const y=e`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size,240px);--_n-textarea-block-size:var(--n-textarea-block-size,76px);--_n-textarea-max-block-size:var(--n-textarea-max-block-size,500px);--_n-input-background:var(--n-textarea-background,var(--n-color-surface));--_n-input-color:var(--n-textarea-color,var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius,var(--n-border-radius-s))}.n-input-container{inline-size:var(--_n-textarea-inline-size);position:relative}.n-input{display:block;max-block-size:var(--_n-textarea-max-block-size);min-block-size:var(--_n-textarea-block-size);resize:vertical;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}:host([resize=auto]) .n-input{overflow:auto;resize:none}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);margin-block-start:var(--n-space-xs)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-accent));--_n-input-background:var(--n-textarea-background,var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-background:var(--n-textarea-background-inactive,var(--n-color-active));--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-active));--_n-input-color:var(--n-textarea-color,var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color,var(--n-color-text))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-accent))}`;let $=class extends(x(u(d(v(b(h(m(i)))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var t;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.textSelectableRef)} ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.effectiveDisabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${l(this.name)}" maxlength="${l(this.maxLength)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" @select="${this.handleSelect}" aria-label="${l(this.controlAriaLabel)}" aria-describedby="${l(this.controlAriaDescribedby)}" aria-invalid="${l(this.controlAriaInvalid)}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():o}</div>${this.renderError()} ${this.isHintBelow?this.renderHint():o}`}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new p("select"))}renderCharacterCounter(){const{value:t,maxLength:e}=this,o="string"==typeof t?this.lengthMeasurer(t):0,i=e?e-o:null,a=e?`${o}/${e}`:o;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=i&&i<=10?this.localize.term("remainingCharacters",i):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const t=this.localize.resolvedLang;this.lengthMeasurer=function(t){if(Intl.Segmenter){const e=new Intl.Segmenter(t);return t=>[...e.segment(t)].length}return t=>t.length}(t)}resizeToFitContent(){const t=this.focusableRef.value;if(t)if("auto"===this.resize){t.style.height="auto";const e=getComputedStyle(t),r=t.offsetHeight-t.clientHeight,o=Number.parseFloat(e.minBlockSize)||0,i=Number.parseFloat(e.maxBlockSize)||Number.POSITIVE_INFINITY,a=t.scrollHeight+r;t.style.height=`${Math.min(Math.max(a,o),i)}px`}else t.style.height=""}};$.styles=[z,j,f,y],t([a({reflect:!0})],$.prototype,"resize",void 0),t([a({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),t([a({reflect:!0,attribute:"maxlength",type:Number})],$.prototype,"maxLength",void 0),t([a({reflect:!0,type:Boolean,attribute:"character-counter"})],$.prototype,"characterCounter",void 0),t([c("resize","updated"),c("value","updated")],$.prototype,"resizeToFitContent",null),$=t([n("nord-textarea")],$);var _=$;export{_ as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as r,nothing as o,LitElement as i}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as s}from"lit/directives/ref.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as p}from"./events-Bv6wNHwJ.js";import{A as d}from"./AutocompleteMixin-D8eiOxvO.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{F as u}from"./FormAssociatedMixin-D9aPREgv.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{R as v}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{T as b}from"./TextSelectableMixin-Cfv__lHS.js";import{s as z}from"./Component-BJ5O5n8k.js";import{s as j}from"./FormField-CMgEFZCK.js";import{s as f}from"./TextField-BYSciLeB.js";import{LocalizeController as g}from"./LocalizeController.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";const y=e`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size,240px);--_n-textarea-block-size:var(--n-textarea-block-size,76px);--_n-textarea-max-block-size:var(--n-textarea-max-block-size,500px);--_n-input-background:var(--n-textarea-background,var(--n-color-surface));--_n-input-color:var(--n-textarea-color,var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius,var(--n-border-radius-s))}.n-input-container{inline-size:var(--_n-textarea-inline-size);position:relative}.n-input{display:block;max-block-size:var(--_n-textarea-max-block-size);min-block-size:var(--_n-textarea-block-size);resize:vertical;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}:host([resize=auto]) .n-input{overflow:auto;resize:none}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);margin-block-start:var(--n-space-xs)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-accent));--_n-input-background:var(--n-textarea-background,var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-background:var(--n-textarea-background-inactive,var(--n-color-active));--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-active));--_n-input-color:var(--n-textarea-color,var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color,var(--n-color-text))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-accent))}`;let $=class extends(x(u(d(v(b(h(m(i)))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var t;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.textSelectableRef)} ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.effectiveDisabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${l(this.name)}" maxlength="${l(this.maxLength)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" @select="${this.handleSelect}" aria-label="${l(this.controlAriaLabel)}" aria-describedby="${l(this.controlAriaDescribedby)}" aria-invalid="${l(this.controlAriaInvalid)}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():o}</div>${this.renderError()} ${this.isHintBelow?this.renderHint():o}`}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new p("select"))}renderCharacterCounter(){const{value:t,maxLength:e}=this,o="string"==typeof t?this.lengthMeasurer(t):0,i=e?e-o:null,a=e?`${o}/${e}`:o;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=i&&i<=10?this.localize.term("remainingCharacters",i):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const t=this.localize.resolvedLang;this.lengthMeasurer=function(t){if(Intl.Segmenter){const e=new Intl.Segmenter(t);return t=>[...e.segment(t)].length}return t=>t.length}(t)}resizeToFitContent(){const t=this.focusableRef.value;if(t)if("auto"===this.resize){t.style.height="auto";const e=getComputedStyle(t),r=t.offsetHeight-t.clientHeight,o=Number.parseFloat(e.minBlockSize)||0,i=Number.parseFloat(e.maxBlockSize)||Number.POSITIVE_INFINITY,a=t.scrollHeight+r;t.style.height=`${Math.min(Math.max(a,o),i)}px`}else t.style.height=""}};$.styles=[z,j,f,y],t([a({reflect:!0})],$.prototype,"resize",void 0),t([a({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),t([a({reflect:!0,attribute:"maxlength",type:Number})],$.prototype,"maxLength",void 0),t([a({reflect:!0,type:Boolean,attribute:"character-counter"})],$.prototype,"characterCounter",void 0),t([c("resize","updated"),c("value","updated")],$.prototype,"resizeToFitContent",null),$=t([n("nord-textarea")],$);var _=$;export{_ as default};
 //# sourceMappingURL=Textarea.js.map

package/lib/TimePicker.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as i,html as o,nothing as e,LitElement as r}from"lit";import{property as l,query as n,customElement as s}from"lit/decorators.js";import{repeat as a}from"lit/directives/repeat.js";import{N as d}from"./events-Bv6wNHwJ.js";import{D as p}from"./DraftComponentMixin-4qug5Rky.js";import{s as m}from"./Component-BJ5O5n8k.js";import{LocalizeController as h}from"./LocalizeController.js";import"./Input.js";import"./Dropdown.js";import"./DropdownItem.js";import"./Button.js";import"./Icon.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/directives/ref.js";import"lit/directives/style-map.js";import"./DirectionController-ChvNGESZ.js";import"./ResizeController-14PUwRQy.js";import"./cond-CI1KbneT.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./FocusableMixin-BlQLNPdJ.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"./InputMixin-LetXsCyv.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-CSKvieoG.js";import"./observe-D0n0zOfU.js";import"./Popout-B6Hirj3y.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./ScrollbarController-BFC67Y2x.js";import"./DropdownItem-BYbOLth6.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";const u=i`:host{display:inline-block}nord-input{--n-input-picker-indicator-display:none}:host([expand]){display:block}`;function c(t){const i=t.match(/^(\d{2}):(\d{2})$/);return i?60*Number(i[1])+Number(i[2]):null}function v(t){const i=Math.floor(t/60)%24;return`${String(i).padStart(2,"0")}:${String(t%60).padStart(2,"0")}`}let j=class extends(p(r)){constructor(){super(...arguments),this.localize=new h(this),this.start="09:00",this.end="17:00",this.interval=30,this.roundToInterval=!1,this.size="m",this.expand=!1,this.disabled=!1,this.readonly=!1,this.required=!1,this.hideLabel=!1,this.hintBelow=!1,this.hideRequired=!1,this.handleFieldChange=t=>{const i=t.target.value;this.setValue(this.roundToInterval?this.roundToNearestInterval(i):i)}}connectedCallback(){var t;super.connectedCallback(),null!==(t=this.ariaObserver)&&void 0!==t||(this.ariaObserver=new MutationObserver((()=>this.requestUpdate()))),this.ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-label","aria-labelledby"]})}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.ariaObserver)||void 0===t||t.disconnect(),this.ariaObserver=void 0}focus(){var t;null===(t=this.input)||void 0===t||t.focus()}get clampedInterval(){return this.interval>1&&this.interval<360?this.interval:30}get hostAccessibleName(){const t=this.getAttribute("aria-label");if(t)return t;const i=this.getAttribute("aria-labelledby");if(!i)return"";const o=this.getRootNode();return i.split(/\s+/).map((t=>{var i,e,r,l;return null!==(l=null===(r=null===(e=null===(i=o.getElementById)||void 0===i?void 0:i.call(o,t))||void 0===e?void 0:e.textContent)||void 0===r?void 0:r.trim())&&void 0!==l?l:""})).filter(Boolean).join(" ")}formatLabel(t){const i=c(t);if(null===i)return t;const o=new Date(2e3,0,1,Math.floor(i/60),i%60);try{return new Intl.DateTimeFormat(void 0,{hour:"numeric",minute:"2-digit",...this.hourFormat?{hour12:"12h"===this.hourFormat}:{}}).format(o)}catch(i){return t}}get options(){var t,i;const o=null!==(t=c(this.start))&&void 0!==t?t:540,e=null!==(i=c(this.end))&&void 0!==i?i:1020;if(e<o)return[];const r=[];for(let t=o;t<=e;t+=this.clampedInterval){const i=v(t);r.push({value:i,label:this.formatLabel(i)})}return r}roundToNearestInterval(t){var i,o;const e=c(t),r=null!==(i=c(this.start))&&void 0!==i?i:540,l=null!==(o=c(this.end))&&void 0!==o?o:1020;if(null===e||l<r)return t;const n=this.clampedInterval,s=r+Math.round((e-r)/n)*n;return v(Math.min(Math.max(s,r),l))}setValue(t){this.value!==t&&(this.value=t,this.dispatchEvent(new d("change")))}handleSelect(t){var i;this.setValue(t),null===(i=this.dropdown)||void 0===i||i.hide()}render(){var t,i,r,l,n,s,d;return o`<nord-input type="time" label="${null!==(t=this.label)&&void 0!==t?t:e}" hint="${null!==(i=this.hint)&&void 0!==i?i:e}" error="${null!==(r=this.error)&&void 0!==r?r:e}" ?hide-label="${this.hideLabel}" ?hint-below="${this.hintBelow}" ?hide-required="${this.hideRequired}" aria-label="${this.hostAccessibleName||e}" name="${null!==(l=this.name)&&void 0!==l?l:e}" size="${this.size}" min="${null!==(n=this.min)&&void 0!==n?n:e}" max="${null!==(s=this.max)&&void 0!==s?s:e}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" .value="${null!==(d=this.value)&&void 0!==d?d:""}" @change="${this.handleFieldChange}"><nord-dropdown slot="end" align="end" size="s"><nord-button slot="toggle" hide-dropdown-icon size="${this.size}" square ?disabled="${this.disabled||this.readonly}"><nord-icon name="interface-time" label="${this.localize.term("chooseTime")}"></nord-icon></nord-button>${a(this.options,(t=>t.value),(t=>o`<nord-dropdown-item ?active="${t.value===this.value}" @click="${()=>this.handleSelect(t.value)}">${t.label}</nord-dropdown-item>`))}</nord-dropdown></nord-input>`}};j.styles=[m,u],t([l()],j.prototype,"value",void 0),t([l()],j.prototype,"name",void 0),t([l()],j.prototype,"start",void 0),t([l()],j.prototype,"end",void 0),t([l({type:Number})],j.prototype,"interval",void 0),t([l({type:Boolean,reflect:!0,attribute:"round-to-interval"})],j.prototype,"roundToInterval",void 0),t([l({reflect:!0,attribute:"hour-format"})],j.prototype,"hourFormat",void 0),t([l()],j.prototype,"min",void 0),t([l()],j.prototype,"max",void 0),t([l({reflect:!0})],j.prototype,"size",void 0),t([l({type:Boolean})],j.prototype,"expand",void 0),t([l({type:Boolean})],j.prototype,"disabled",void 0),t([l({type:Boolean})],j.prototype,"readonly",void 0),t([l({type:Boolean})],j.prototype,"required",void 0),t([l()],j.prototype,"label",void 0),t([l()],j.prototype,"hint",void 0),t([l()],j.prototype,"error",void 0),t([l({type:Boolean,attribute:"hide-label"})],j.prototype,"hideLabel",void 0),t([l({type:Boolean,attribute:"hint-below"})],j.prototype,"hintBelow",void 0),t([l({type:Boolean,attribute:"hide-required"})],j.prototype,"hideRequired",void 0),t([n("nord-input")],j.prototype,"input",void 0),t([n("nord-dropdown")],j.prototype,"dropdown",void 0),j=t([s("nord-time-picker")],j);var b=j;export{b as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as i,html as o,nothing as e,LitElement as r}from"lit";import{property as l,query as n,customElement as s}from"lit/decorators.js";import{repeat as a}from"lit/directives/repeat.js";import{N as d}from"./events-Bv6wNHwJ.js";import{D as p}from"./DraftComponentMixin-4qug5Rky.js";import{s as m}from"./Component-BJ5O5n8k.js";import{LocalizeController as h}from"./LocalizeController.js";import"./Input.js";import"./Dropdown.js";import"./DropdownItem.js";import"./Button.js";import"./Icon.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/directives/ref.js";import"lit/directives/style-map.js";import"./DirectionController-ChvNGESZ.js";import"./ResizeController-14PUwRQy.js";import"./cond-CI1KbneT.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./FocusableMixin-BlQLNPdJ.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"./InputMixin-LetXsCyv.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-BYSciLeB.js";import"./observe-D0n0zOfU.js";import"./Popout-B6Hirj3y.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./ScrollbarController-BFC67Y2x.js";import"./DropdownItem-BYbOLth6.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";const u=i`:host{display:inline-block}nord-input{--n-input-picker-indicator-display:none}:host([expand]){display:block}`;function c(t){const i=t.match(/^(\d{2}):(\d{2})$/);return i?60*Number(i[1])+Number(i[2]):null}function v(t){const i=Math.floor(t/60)%24;return`${String(i).padStart(2,"0")}:${String(t%60).padStart(2,"0")}`}let j=class extends(p(r)){constructor(){super(...arguments),this.localize=new h(this),this.start="09:00",this.end="17:00",this.interval=30,this.roundToInterval=!1,this.size="m",this.expand=!1,this.disabled=!1,this.readonly=!1,this.required=!1,this.hideLabel=!1,this.hintBelow=!1,this.hideRequired=!1,this.handleFieldChange=t=>{const i=t.target.value;this.setValue(this.roundToInterval?this.roundToNearestInterval(i):i)}}connectedCallback(){var t;super.connectedCallback(),null!==(t=this.ariaObserver)&&void 0!==t||(this.ariaObserver=new MutationObserver((()=>this.requestUpdate()))),this.ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-label","aria-labelledby"]})}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.ariaObserver)||void 0===t||t.disconnect(),this.ariaObserver=void 0}focus(){var t;null===(t=this.input)||void 0===t||t.focus()}get clampedInterval(){return this.interval>1&&this.interval<360?this.interval:30}get hostAccessibleName(){const t=this.getAttribute("aria-label");if(t)return t;const i=this.getAttribute("aria-labelledby");if(!i)return"";const o=this.getRootNode();return i.split(/\s+/).map((t=>{var i,e,r,l;return null!==(l=null===(r=null===(e=null===(i=o.getElementById)||void 0===i?void 0:i.call(o,t))||void 0===e?void 0:e.textContent)||void 0===r?void 0:r.trim())&&void 0!==l?l:""})).filter(Boolean).join(" ")}formatLabel(t){const i=c(t);if(null===i)return t;const o=new Date(2e3,0,1,Math.floor(i/60),i%60);try{return new Intl.DateTimeFormat(void 0,{hour:"numeric",minute:"2-digit",...this.hourFormat?{hour12:"12h"===this.hourFormat}:{}}).format(o)}catch(i){return t}}get options(){var t,i;const o=null!==(t=c(this.start))&&void 0!==t?t:540,e=null!==(i=c(this.end))&&void 0!==i?i:1020;if(e<o)return[];const r=[];for(let t=o;t<=e;t+=this.clampedInterval){const i=v(t);r.push({value:i,label:this.formatLabel(i)})}return r}roundToNearestInterval(t){var i,o;const e=c(t),r=null!==(i=c(this.start))&&void 0!==i?i:540,l=null!==(o=c(this.end))&&void 0!==o?o:1020;if(null===e||l<r)return t;const n=this.clampedInterval,s=r+Math.round((e-r)/n)*n;return v(Math.min(Math.max(s,r),l))}setValue(t){this.value!==t&&(this.value=t,this.dispatchEvent(new d("change")))}handleSelect(t){var i;this.setValue(t),null===(i=this.dropdown)||void 0===i||i.hide()}render(){var t,i,r,l,n,s,d;return o`<nord-input type="time" label="${null!==(t=this.label)&&void 0!==t?t:e}" hint="${null!==(i=this.hint)&&void 0!==i?i:e}" error="${null!==(r=this.error)&&void 0!==r?r:e}" ?hide-label="${this.hideLabel}" ?hint-below="${this.hintBelow}" ?hide-required="${this.hideRequired}" aria-label="${this.hostAccessibleName||e}" name="${null!==(l=this.name)&&void 0!==l?l:e}" size="${this.size}" min="${null!==(n=this.min)&&void 0!==n?n:e}" max="${null!==(s=this.max)&&void 0!==s?s:e}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" .value="${null!==(d=this.value)&&void 0!==d?d:""}" @change="${this.handleFieldChange}"><nord-dropdown slot="end" align="end" size="s"><nord-button slot="toggle" hide-dropdown-icon size="${this.size}" square ?disabled="${this.disabled||this.readonly}"><nord-icon name="interface-time" label="${this.localize.term("chooseTime")}"></nord-icon></nord-button>${a(this.options,(t=>t.value),(t=>o`<nord-dropdown-item ?active="${t.value===this.value}" @click="${()=>this.handleSelect(t.value)}">${t.label}</nord-dropdown-item>`))}</nord-dropdown></nord-input>`}};j.styles=[m,u],t([l()],j.prototype,"value",void 0),t([l()],j.prototype,"name",void 0),t([l()],j.prototype,"start",void 0),t([l()],j.prototype,"end",void 0),t([l({type:Number})],j.prototype,"interval",void 0),t([l({type:Boolean,reflect:!0,attribute:"round-to-interval"})],j.prototype,"roundToInterval",void 0),t([l({reflect:!0,attribute:"hour-format"})],j.prototype,"hourFormat",void 0),t([l()],j.prototype,"min",void 0),t([l()],j.prototype,"max",void 0),t([l({reflect:!0})],j.prototype,"size",void 0),t([l({type:Boolean})],j.prototype,"expand",void 0),t([l({type:Boolean})],j.prototype,"disabled",void 0),t([l({type:Boolean})],j.prototype,"readonly",void 0),t([l({type:Boolean})],j.prototype,"required",void 0),t([l()],j.prototype,"label",void 0),t([l()],j.prototype,"hint",void 0),t([l()],j.prototype,"error",void 0),t([l({type:Boolean,attribute:"hide-label"})],j.prototype,"hideLabel",void 0),t([l({type:Boolean,attribute:"hint-below"})],j.prototype,"hintBelow",void 0),t([l({type:Boolean,attribute:"hide-required"})],j.prototype,"hideRequired",void 0),t([n("nord-input")],j.prototype,"input",void 0),t([n("nord-dropdown")],j.prototype,"dropdown",void 0),j=t([s("nord-time-picker")],j);var b=j;export{b as default};
 //# sourceMappingURL=TimePicker.js.map