@nordhealth/components 5.0.0-alpha.0 → 5.0.1

package/lib/NavItem.js.map

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

package/lib/NavToggle-ROsuaJkW.js

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

package/lib/{NavToggle-BY83xpx0.js.map → NavToggle-ROsuaJkW.js.map}

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

package/lib/NavToggle.js

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

package/lib/Notification.js

@@ -1,2 +1,2 @@
-import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as t,LitElement as n}from"lit";import{customElement as a}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ref as r}from"lit/directives/ref.js";import{N as e}from"./NotificationMixin-DOUQsx7N.js";import{s as l}from"./Component-BJ5O5n8k.js";import{LocalizeController as c}from"./LocalizeController.js";import"./Stack.js";import"./Icon.js";import"./events-Bv6wNHwJ.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const m=o`:host{--_n-notification-focus-ring:0 0 0 2px var(--n-color-accent);--_n-notification-dismiss-size:calc(var(--n-space-m)*2)}.n-notification{animation:n-enter var(--n-transition-slowly) forwards 1;background:var(--n-color-surface-raised);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-nav);color:var(--n-color-text-weaker);padding-block-end:var(--n-space-l);padding-block-start:calc(var(--n-space-l)/1.2);padding-inline-end:var(--n-space-m);padding-inline-start:calc(var(--n-space-l)/1.2);position:relative}.n-notification-body{flex:1;padding-inline-end:var(--_n-notification-dismiss-size)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{0%{opacity:0;transform:translateY(10%)}}@keyframes n-exit{to{opacity:0;transform:scale(.97)}}.n-dismiss{align-items:center;background-color:initial;block-size:var(--_n-notification-dismiss-size);border:none;border-radius:var(--n-border-radius-s);color:var(--n-color-icon);cursor:pointer;display:flex;inline-size:var(--_n-notification-dismiss-size);inset-block-start:14px;inset-inline-end:var(--n-space-m);justify-content:center;position:absolute;transition:opacity var(--n-transition-slowly),color var(--n-transition-slowly)}.n-dismiss:hover{background:#0000000a;color:var(--n-color-text)}.n-dismiss:active{opacity:.8;transform:translateY(1px)}.n-dismiss:focus{box-shadow:var(--_n-notification-focus-ring);outline:none}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-notification-focus-ring)}}::slotted(nord-icon),slot nord-icon{color:var(--n-color-text-link)!important;transform:translateY(3px) translateX(1px)!important}::slotted(:is(h1,h2,h3,h4,h5,h6)){color:var(--n-color-text)!important;font-size:var(--n-font-size-m)!important;font-style:normal!important;font-weight:var(--n-font-weight-active)!important;line-height:var(--n-line-height)!important;margin:0 0 var(--n-space-s)!important}::slotted(p){color:var(--n-color-text-weaker)!important;font-size:var(--n-font-size-m)!important;font-style:normal!important;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height)!important;margin:0!important}::slotted(a){color:var(--n-color-text-link)!important;display:block;font-style:normal!important;font-weight:var(--n-font-weight)!important;margin:var(--n-space-s) 0 0!important;text-decoration:none!important}::slotted(a:hover){text-decoration:underline!important}`;let p=class extends(e(n)){constructor(){super(...arguments),this.localize=new c(this)}render(){return t`<div ${r(this.notificationRef)} class="${s({"n-notification":!0,"n-dismissed":this.dismissed})}"><button class="n-dismiss" @click="${this.dismiss}"><nord-icon name="interface-close-small" size="xs" label="${this.localize.term("dismissLabel")}"></nord-icon></button><nord-stack align-items="stretch" direction="horizontal"><slot name="icon"><nord-icon name="navigation-notifications"></nord-icon></slot><div class="n-notification-body"><slot></slot></div></nord-stack></div>`}};p.styles=[l,m],p=i([a("nord-notification")],p);var d=p;export{d as default};
+import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as t,LitElement as n}from"lit";import{customElement as a}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ref as r}from"lit/directives/ref.js";import{N as e}from"./NotificationMixin-DOUQsx7N.js";import{s as l}from"./Component-BJ5O5n8k.js";import{LocalizeController as c}from"./LocalizeController.js";import"./Stack.js";import"./Icon.js";import"./events-Bv6wNHwJ.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const m=o`:host{--_n-notification-focus-ring:0 0 0 2px var(--n-color-accent);--_n-notification-dismiss-size:calc(var(--n-space-m)*2)}.n-notification{animation:n-enter var(--n-transition-slowly) forwards 1;background:var(--n-color-surface-raised);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-nav);color:var(--n-color-text-weaker);padding-block-end:var(--n-space-l);padding-block-start:calc(var(--n-space-l)/1.2);padding-inline-end:var(--n-space-m);padding-inline-start:calc(var(--n-space-l)/1.2);position:relative}.n-notification-body{flex:1;padding-inline-end:var(--_n-notification-dismiss-size)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{0%{opacity:0;transform:translateY(10%)}}@keyframes n-exit{to{opacity:0;transform:scale(.97)}}.n-dismiss{align-items:center;background-color:initial;block-size:var(--_n-notification-dismiss-size);border:none;border-radius:var(--n-border-radius-s);color:var(--n-color-icon);cursor:pointer;display:flex;inline-size:var(--_n-notification-dismiss-size);inset-block-start:14px;inset-inline-end:var(--n-space-m);justify-content:center;position:absolute;transition:opacity var(--n-transition-slowly),color var(--n-transition-slowly)}.n-dismiss:hover{background:#0000000a;color:var(--n-color-text)}.n-dismiss:active{opacity:.8;transform:translateY(1px)}.n-dismiss:focus{box-shadow:var(--_n-notification-focus-ring);outline:none}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-notification-focus-ring)}}::slotted(nord-icon),slot nord-icon{color:var(--n-color-text-link)!important;transform:translateY(3px) translateX(1px)!important}::slotted(:is(h1,h2,h3,h4,h5,h6)){color:var(--n-color-text)!important;font-size:var(--n-font-size-m)!important;font-style:normal!important;font-weight:var(--n-font-weight-active)!important;line-height:var(--n-line-height)!important;margin:0 0 var(--n-space-s)!important}::slotted(p){color:var(--n-color-text-weaker)!important;font-size:var(--n-font-size-m)!important;font-style:normal!important;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height)!important;margin:0!important}::slotted(a){color:var(--n-color-text-link)!important;display:block;font-style:normal!important;font-weight:var(--n-font-weight)!important;margin:var(--n-space-s) 0 0!important;text-decoration:none!important}::slotted(a:hover){text-decoration:underline!important}`;let p=class extends(e(n)){constructor(){super(...arguments),this.localize=new c(this)}render(){return t`<div ${r(this.notificationRef)} class="${s({"n-notification":!0,"n-dismissed":this.dismissed})}"><button class="n-dismiss" @click="${this.dismiss}"><nord-icon name="interface-close-small" size="xs" label="${this.localize.term("dismissLabel")}"></nord-icon></button><nord-stack align-items="stretch" direction="horizontal"><slot name="icon"><nord-icon name="navigation-notifications"></nord-icon></slot><div class="n-notification-body"><slot></slot></div></nord-stack></div>`}};p.styles=[l,m],p=i([a("nord-notification")],p);var d=p;export{d as default};
 //# sourceMappingURL=Notification.js.map

package/lib/Notification.js.map

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

package/lib/NumberField.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{a as t}from"./interface-add-small-B-hv2v9J.js";import{r as i}from"./interface-remove-small-DUaWSs90.js";import{css as n,isServer as r,html as o,nothing as s,LitElement as l}from"lit";import{query as a,property as d,state as u,customElement as c}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{createRef as p,ref as m}from"lit/directives/ref.js";import{F as b}from"./FormDataController-OUt5L5uC.js";import{S as f}from"./StateAttributesController-BIh96sXZ.js";import{N as v}from"./events-Bv6wNHwJ.js";import{i as y}from"./light-dom-styles-DXsbiKU9.js";import{D as g}from"./DraftComponentMixin-4qug5Rky.js";import{F as S}from"./FieldControlMixin-BXNZJXu9.js";import{S as k}from"./SizeMixin-CU9cLbLC.js";import w from"./Icon.js";import{LocalizeController as x}from"./LocalizeController.js";import{resolveCurrencyPlacement as z,getCurrencySymbol as D}from"./currency.js";import{formatNumber as j}from"./format.js";import{NumberFieldChangeEvent as I}from"./NumberFieldEvents.js";import{getNumberLocaleDetails as $,BASE_NON_NUMERIC_SYMBOLS as T,SPACE_SEPARATOR_RE as _,PERCENTAGES as A,PERMILLE as V,PLUS_SIGNS_WITH_ASCII as P,MINUS_SIGNS_WITH_ASCII as N,ARABIC_DETECT_RE as E,PERSIAN_DETECT_RE as C,HAN_DETECT_RE as W,FULLWIDTH_DETECT_RE as L,ANY_MINUS_DETECT_RE as M,ANY_PLUS_DETECT_RE as O,parseNumber as R}from"./parse.js";import{clamp as F,toValidatedNumber as q,hasNumberFormatRoundingOptions as B,removeFloatingPointErrors as U}from"./validate.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"./VisuallyHidden.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";const K=n`nord-number-field,nord-number-field *,nord-number-field :after,nord-number-field :before{box-sizing:border-box}nord-number-field{--n-number-field-control-min-inline-size:8ch;--n-number-field-background:var(--n-input-background,var(--n-color-surface));--n-number-field-border-color:var(--n-input-border-color,var(--n-color-border-strong));--n-number-field-border-radius:var(--n-input-border-radius,var(--n-border-radius-s));--_n-number-field-block-size:var(--n-number-field-block-size,var(--n-space-xl));--_n-number-field-border-color:var(--n-number-field-border-color);--_n-number-field-min-content-block-size:calc(var(--n-line-height-form) + var(--n-space-s)/1.6*2 + 2px);--_n-number-field-padding-block:calc(var(--_n-number-field-block-size)/2 - var(--n-line-height-form)/2 - 1px);--_n-number-field-padding-inline:calc(var(--n-space-s)*1.6);--_n-number-field-font-size:var(--n-font-size-m);--_n-number-field-step-inline-size:var(--n-number-field-step-inline-size,var(--_n-number-field-block-size));display:block}nord-number-field .n-number-field{inline-size:100%}nord-number-field .n-number-field-root{display:contents}nord-number-field .n-scrub{align-items:center;color:var(--n-color-icon);cursor:ew-resize;display:inline-flex;margin-block-end:var(--n-space-xs);touch-action:none;user-select:none}nord-number-field .n-scrub-grip{block-size:var(--n-size-icon-s);display:block;inline-size:auto}nord-number-field.is-scrubbing,nord-number-field.is-scrubbing .n-input,nord-number-field.is-scrubbing .n-scrub{cursor:ew-resize}nord-number-field .n-control{align-items:stretch;background:var(--n-number-field-background);border:1px solid var(--_n-number-field-border-color);border-radius:var(--n-number-field-border-radius);display:flex;inline-size:100%;min-block-size:var(--_n-number-field-block-size);transition:border var(--n-transition-quickly),box-shadow var(--n-transition-quickly),background var(--n-transition-quickly)}nord-number-field .n-control:hover{--_n-number-field-border-color:var(--n-input-border-color,var(--n-color-border-hover))}nord-number-field .n-control:focus-within{--_n-number-field-border-color:var(--n-input-border-color,var(--n-color-accent));box-shadow:0 0 0 1px var(--_n-number-field-border-color)}nord-number-field[disabled] .n-control{--n-number-field-background:var(--n-input-background-inactive,var(--n-color-active));--_n-number-field-border-color:var(--n-input-border-color,var(--n-color-active));cursor:auto}nord-number-field .n-control.is-invalid{--_n-number-field-border-color:var(--n-color-border-danger)}nord-number-field .n-control.is-invalid:focus-within{--_n-number-field-border-color:var(--n-color-status-danger)}nord-number-field .n-input{appearance:none;background:#0000;border:none;color:var(--n-color-text);flex:1;font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-number-field-font-size);font-variant-numeric:tabular-nums;line-height:var(--n-line-height-form);margin:0;min-inline-size:var(--n-number-field-control-min-inline-size);outline:none;padding-block-end:var(--_n-number-field-padding-block);padding-block-start:var(--_n-number-field-padding-block);padding-inline-end:var(--_n-number-field-padding-inline);padding-inline-start:var(--_n-number-field-padding-inline);text-align:start}nord-number-field .n-control input.n-input:focus,nord-number-field .n-control input.n-input:focus-visible,nord-number-field .n-control input.n-input:focus-within{background:#0000;border:none;box-shadow:none;outline:none}nord-number-field .n-input::placeholder{color:var(--n-color-text-weakest);opacity:1}nord-number-field[disabled] .n-input{color:var(--n-color-text-weakest)}nord-number-field .n-number-field-slot{align-items:center;color:var(--n-color-text-weaker);display:inline-flex;flex:0 0 auto;font-family:var(--n-font-family);font-size:var(--_n-number-field-font-size);gap:var(--n-space-xs);line-height:var(--n-line-height-form);white-space:nowrap}nord-number-field .n-number-field-slot:empty{display:none}nord-number-field .n-number-field-slot-start{padding-inline-start:var(--_n-number-field-padding-inline)}nord-number-field .n-number-field-slot-end{padding-inline-end:var(--_n-number-field-padding-inline)}nord-number-field .n-number-field-slot nord-icon{--_n-icon-size:var(--n-size-icon-s)}nord-number-field[disabled] .n-number-field-slot{color:var(--n-color-text-weakest)}nord-number-field .n-currency-symbol{color:var(--n-color-text-weaker);font-variant-numeric:tabular-nums;user-select:none}nord-number-field .n-step{align-items:center;appearance:none;background:#0000;border:none;color:var(--n-color-icon);cursor:pointer;display:flex;flex-shrink:0;inline-size:var(--_n-number-field-step-inline-size);justify-content:center;margin:0;padding:0;transition:color var(--n-transition-quickly),background var(--n-transition-quickly);user-select:none}nord-number-field .n-step:hover:not([disabled]){background:var(--n-color-button-hover);color:var(--n-color-text)}nord-number-field .n-step:active:not([disabled]){background:var(--n-color-active)}nord-number-field .n-step[disabled]{color:var(--n-color-text-weakest);cursor:auto}nord-number-field .n-decrement{border-inline-end:1px solid var(--_n-number-field-border-color)}nord-number-field .n-increment{border-inline-start:1px solid var(--_n-number-field-border-color)}nord-number-field .n-step nord-icon{--_n-icon-size:var(--n-size-icon-s)}nord-number-field[size=s]{--_n-number-field-block-size:var(--n-number-field-block-size,calc(var(--n-space-l) + var(--n-space-xs)));--_n-number-field-padding-block:calc(var(--_n-number-field-block-size)/2 - var(--n-line-height-form)/2 - 1px);--_n-number-field-padding-inline:var(--n-space-s);--_n-number-field-font-size:var(--n-font-size-s);--_n-number-field-step-inline-size:var(--n-number-field-step-inline-size,var(--_n-number-field-block-size))}nord-number-field[size=s] .n-step nord-icon{--_n-icon-size:var(--n-size-icon-xs)}nord-number-field[size=l]{--_n-number-field-block-size:max(var(--n-number-field-block-size,calc(var(--n-space-xxl) - var(--n-space-l))),var(--_n-number-field-min-content-block-size));--_n-number-field-padding-block:calc(var(--_n-number-field-block-size)/2 - var(--n-line-height-form)/2 - 1px);--_n-number-field-font-size:var(--n-font-size-l);--_n-number-field-step-inline-size:var(--n-number-field-step-inline-size,var(--_n-number-field-block-size))}nord-number-field[size=l] .n-step nord-icon{--_n-icon-size:var(--n-size-icon-m)}`;w.registerIcon(t),w.registerIcon(i);let H=1;function Z(e,t){return Number.isFinite(e)&&e>0?e:t}let G=class extends(g(k(S(l)))){constructor(){super(...arguments),this.numberFieldId="nord-number-field-"+H++,this.inputId=`${this.numberFieldId}-input`,this.localize=new x(this),this.inputRef=p(),this.formData=new b(this,{value:()=>null==this.value?void 0:String(this.value)}),this.stateAttributes=new f(this,(()=>({invalid:this.effectiveInvalid})),{trackFocus:!0}),this.formAncestor=null,this.value=null,this.step=1,this.largeStep=10,this.smallStep=.1,this.snapOnStep=!1,this.allowOutOfRange=!1,this.integer=!1,this.allowWheelScrub=!1,this.scrub=!1,this.disabled=!1,this.readonly=!1,this.invalid=!1,this.hideControls=!1,this.currencyPlacement="auto",this.inputText="",this.scrubbing=!1,this.allowInputSync=!0,this.hasTouchedInput=!1,this.skipNextClick=!1,this.scrubAccumulator=0,this.scrubMoved=!1,this.scrubPointerDownTarget=null,this.onScrubMove=e=>this.handleScrubMove(e),this.onScrubUp=e=>this.handleScrubUp(e),this.onWheel=e=>this.handleWheel(e),this.wheelAttached=!1}get ownInvalid(){return this.invalid||super.ownInvalid}set form(e){const t=this._formId;this._formId=e,this.requestUpdate("form",t)}get form(){if(this._formId){return this.getRootNode().querySelector(`form#${this._formId}`)}return this.formAncestor}get minWithDefault(){var e;return null!==(e=this.min)&&void 0!==e?e:Number.MIN_SAFE_INTEGER}get maxWithDefault(){var e;return null!==(e=this.max)&&void 0!==e?e:Number.MAX_SAFE_INTEGER}get minWithZeroDefault(){var e;return null!==(e=this.min)&&void 0!==e?e:0}get allowsNegative(){return this.minWithDefault<0}get numericStep(){return"any"===this.step?1:Z(this.step,1)}get effectiveLargeStep(){return Z(this.largeStep,10)}get effectiveSmallStep(){return Z(this.smallStep,.1)}formatDisplay(e){return this.formatValue?this.formatValue(e,this.locale,this.format):j(e,this.locale,this.format)}connectedCallback(){var e,t;super.connectedCallback(),y(this,K),this.formAncestor=this.closest("form"),null!==(e=this.ariaObserver)&&void 0!==e||(this.ariaObserver=new MutationObserver((()=>this.requestUpdate()))),this.ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-label","aria-labelledby","aria-describedby"]}),null!==(t=this.slotObserver)&&void 0!==t||(this.slotObserver=new MutationObserver((()=>this.requestUpdate()))),this.slotObserver.observe(this,{childList:!0}),this.allowInputSync&&(this.inputText=this.formatDisplay(this.value))}disconnectedCallback(){var e,t;super.disconnectedCallback(),null===(e=this.ariaObserver)||void 0===e||e.disconnect(),this.ariaObserver=void 0,null===(t=this.slotObserver)||void 0===t||t.disconnect(),this.slotObserver=void 0,this.formAncestor=null,this.stopHold(),this.detachWheel(),this.removeScrubListeners()}createRenderRoot(){if(r)return this;const e=document.createElement("div");return e.className="n-number-field-root",this.appendChild(e),e}relocateSlots(){if(r)return;const e=(e,t)=>{if(t)for(const i of Array.from(this.children))i.getAttribute("slot")===e&&i.parentElement!==t&&t.appendChild(i)};e("start",this.startZone),e("end",this.endZone)}willUpdate(e){if(e.has("value")&&this.allowInputSync&&!this.allowOutOfRange&&null!=this.value){const e=F(this.value,this.minWithDefault,this.maxWithDefault);e!==this.value&&(this.value=e)}e.has("value")&&this.integer&&null!=this.value&&!Number.isInteger(this.value)&&(this.value=Math.round(this.value)),this.allowInputSync&&(e.has("value")||e.has("format")||e.has("locale"))&&(this.inputText=this.formatDisplay(this.value))}updated(e){var t;super.updated(e),this.relocateSlots();const i=this.allowWheelScrub&&!this.disabled&&!this.readonly;if(i&&!this.wheelAttached?this.attachWheel():!i&&this.wheelAttached&&this.detachWheel(),this.pendingSelection){const[e,i]=this.pendingSelection;this.pendingSelection=void 0,null===(t=this.inputRef.value)||void 0===t||t.setSelectionRange(e,i)}}focus(e){var t;null===(t=this.inputRef.value)||void 0===t||t.focus(e)}isTextReason(e){return"input-change"===e||"input-blur"===e||"input-paste"===e||"input-clear"===e||"none"===e}getStepAmount(e){return(null==e?void 0:e.altKey)?this.effectiveSmallStep:(null==e?void 0:e.shiftKey)?this.effectiveLargeStep:this.numericStep}setValue(e,{reason:t,direction:i,event:n}){var r;const o=!this.allowOutOfRange||!this.isTextReason(t),s=q(e,{step:i?this.getStepAmount(n)*i:void 0,format:this.format,minWithDefault:this.minWithDefault,maxWithDefault:this.maxWithDefault,minWithZeroDefault:this.minWithZeroDefault,snapOnStep:this.snapOnStep,small:null!==(r=null==n?void 0:n.altKey)&&void 0!==r&&r,clamp:o}),l=this.isTextReason(t),a=s!==this.value||l&&(e!==this.value||!1===this.allowInputSync);return a&&(this.value=s,this.dispatchEvent(new v("input"))),this.allowInputSync&&(this.inputText=this.formatDisplay(s)),this.requestUpdate(),a}incrementValue(e,{direction:t,currentValue:i,event:n,reason:r}){var o;const s=i??this.value,l="number"==typeof s?s+e*t:Math.max(0,null!==(o=this.min)&&void 0!==o?o:0);return this.setValue(l,{reason:r,direction:t,event:n})}commit(e){this.dispatchEvent(new I(this.value,e))}getAllowedNonNumericKeys(){var e,t,i;const{decimal:n,group:r,currency:o,literal:s}=$(this.locale,this.format),l=new Set;T.forEach((e=>l.add(e))),n&&l.add(n),r&&(l.add(r),_.test(r)&&l.add(" "));const a=null===(e=this.format)||void 0===e?void 0:e.style,d="percent"===a||"unit"===a&&"percent"===(null===(t=this.format)||void 0===t?void 0:t.unit),u="percent"===a||"unit"===a&&"permille"===(null===(i=this.format)||void 0===i?void 0:i.unit);if(d&&A.forEach((e=>l.add(e))),u&&V.forEach((e=>l.add(e))),"currency"===a&&o&&l.add(o),s&&(Array.from(s).forEach((e=>l.add(e))),_.test(s)&&l.add(" ")),P.forEach((e=>l.add(e))),this.minWithDefault<0&&N.forEach((e=>l.add(e))),this.integer)for(const e of[n,".","．","٫"])e&&e!==r&&l.delete(e);return l}handleKeydown(e){if(e.defaultPrevented||this.readonly||this.disabled)return;this.allowInputSync=!0;if(!new Set(["ArrowUp","ArrowDown","PageUp","PageDown","Home","End"]).has(e.key)){if(this.mask)return;const t=this.getAllowedNonNumericKeys(),i=e.key>="0"&&e.key<="9",n=e.key.length>1;return void(229===e.which||e.ctrlKey||e.metaKey||e.altKey||i||n||t.has(e.key)||E.test(e.key)||C.test(e.key)||W.test(e.key)||L.test(e.key)||this.allowsNegative&&M.test(e.key)||O.test(e.key)||e.preventDefault())}const t=this.parseValue?this.parseValue(this.inputText,this.locale,this.format):R(this.inputText,this.locale,this.format);switch(e.key){case"ArrowUp":e.preventDefault(),this.incrementValue(this.getStepAmount(e),{direction:1,currentValue:t,event:e,reason:"keyboard"}),this.commit("keyboard");break;case"ArrowDown":e.preventDefault(),this.incrementValue(this.getStepAmount(e),{direction:-1,currentValue:t,event:e,reason:"keyboard"}),this.commit("keyboard");break;case"PageUp":e.preventDefault(),this.incrementValue(this.effectiveLargeStep,{direction:1,currentValue:t,reason:"keyboard"}),this.commit("keyboard");break;case"PageDown":e.preventDefault(),this.incrementValue(this.effectiveLargeStep,{direction:-1,currentValue:t,reason:"keyboard"}),this.commit("keyboard");break;case"Home":null!=this.min&&Number.isFinite(this.min)&&(e.preventDefault(),this.setValue(this.min,{reason:"keyboard"}),this.commit("keyboard"));break;case"End":null!=this.max&&Number.isFinite(this.max)&&(e.preventDefault(),this.setValue(this.max,{reason:"keyboard"}),this.commit("keyboard"))}}isValidCharacterString(e){const t=this.getAllowedNonNumericKeys();return Array.from(e).every((e=>e>="0"&&e<="9"||E.test(e)||W.test(e)||C.test(e)||L.test(e)||this.allowsNegative&&M.test(e)||t.has(e)))}handleInput(e){var t,i;e.stopPropagation(),this.allowInputSync=!1;const n=e.target;let r=n.value;const o=this.mask;if(o&&""!==r.trim()){const e=o({value:r,selectionStart:null!==(t=n.selectionStart)&&void 0!==t?t:r.length,selectionEnd:null!==(i=n.selectionEnd)&&void 0!==i?i:r.length},{locale:this.locale,format:this.format});r=e.value,this.pendingSelection=[e.selectionStart,e.selectionEnd]}if(""===r.trim())return this.inputText="",this.pendingSelection=void 0,void this.setValue(null,{reason:"input-clear"});if(!this.mask&&!this.isValidCharacterString(r))return;this.inputText=r;const s=this.parseValue?this.parseValue(r,this.locale,this.format):R(r,this.locale,this.format);null!==s&&this.setValue(s,{reason:"input-change"})}handlePaste(e){var t,i;if(e.defaultPrevented||this.readonly||this.disabled)return;if(this.mask)return;const n=null!==(i=null===(t=e.clipboardData)||void 0===t?void 0:t.getData("text/plain"))&&void 0!==i?i:"";e.preventDefault();const r=this.parseValue?this.parseValue(n,this.locale,this.format):R(n,this.locale,this.format);null!==r&&(this.allowInputSync=!0,this.setValue(r,{reason:"input-paste"}))}handleFocus(e){if(e.defaultPrevented||this.readonly||this.disabled)return;if(this.hasTouchedInput)return;this.hasTouchedInput=!0;const t=e.currentTarget,i=t.value.length;t.setSelectionRange(i,i)}handleBlur(e){if(e.defaultPrevented||this.readonly||this.disabled)return;if(this.allowInputSync=!0,""===this.inputText.trim())return this.setValue(null,{reason:"input-clear"}),void this.commit("input-clear");const t=this.parseValue?this.parseValue(this.inputText,this.locale,this.format):R(this.inputText,this.locale,this.format);if(null===t){const e=this.formatDisplay(this.value);return void(this.inputText!==e&&(this.inputText=e))}const i=B(this.format)?U(t,this.format):t;i!==this.value&&this.setValue(i,{reason:"input-blur"});const n=this.formatDisplay(this.value);this.inputText!==n&&(this.inputText=n),this.commit("input-blur")}commitDirtyInput(e,t){this.allowInputSync=!0;const i=this.parseValue?this.parseValue(this.inputText,this.locale,this.format):R(this.inputText,this.locale,this.format);null!==i&&this.setValue(i,{reason:e,direction:t})}handleStepPointerDown(e,t){var i;const n=!e.button||0===e.button;if(e.defaultPrevented||this.readonly||this.disabled||!n)return;const r=1===t?"increment-press":"decrement-press";this.skipNextClick=!0,this.activePointerId=e.pointerId,this.commitDirtyInput(r,t),"touch"!==e.pointerType&&"pen"!==e.pointerType&&(null===(i=this.inputRef.value)||void 0===i||i.focus()),this.allowInputSync=!0,this.incrementValue(this.getStepAmount(e),{direction:t,event:e,reason:r});const o=e.currentTarget;try{o.setPointerCapture(e.pointerId)}catch(e){}this.holdStartTimer=setTimeout((()=>{this.holdTickTimer=setInterval((()=>{this.allowInputSync=!0,this.incrementValue(this.getStepAmount(e),{direction:t,event:e,reason:r})}),60)}),400)}handleStepPointerStop(e,t){if(void 0!==this.activePointerId&&this.activePointerId!==e.pointerId)return;const i=null!=this.holdStartTimer||null!=this.holdTickTimer;this.stopHold(),this.activePointerId=void 0,(this.skipNextClick||i)&&this.commit(1===t?"increment-press":"decrement-press")}handleStepClick(e,t){const i=1===t?"increment-press":"decrement-press";if(e.defaultPrevented||this.readonly||this.disabled)return;if(this.skipNextClick)return void(this.skipNextClick=!1);this.commitDirtyInput(i,t),this.allowInputSync=!0;this.incrementValue(this.getStepAmount(e),{direction:t,event:e,reason:i})&&this.commit(i)}stopHold(){null!=this.holdStartTimer&&(clearTimeout(this.holdStartTimer),this.holdStartTimer=void 0),null!=this.holdTickTimer&&(clearInterval(this.holdTickTimer),this.holdTickTimer=void 0)}get incrementDisabled(){return this.disabled||this.readonly||null!=this.value&&this.value>=this.maxWithDefault}get decrementDisabled(){return this.disabled||this.readonly||null!=this.value&&this.value<=this.minWithDefault}attachWheel(){const e=this.inputRef.value;e&&(e.addEventListener("wheel",this.onWheel,{passive:!1}),this.wheelAttached=!0)}detachWheel(){const e=this.inputRef.value;null==e||e.removeEventListener("wheel",this.onWheel),this.wheelAttached=!1}handleWheel(e){if(e.ctrlKey||this.inputRef.value!==this.getActiveElement())return;e.preventDefault(),this.allowInputSync=!0;const t=this.getStepAmount(e);this.incrementValue(t,{direction:e.deltaY>0?-1:1,event:e,reason:"wheel"})}getActiveElement(){return this.getRootNode().activeElement}handleScrubPointerDown(e){var t;const i=!e.button||0===e.button;if(e.defaultPrevented||this.readonly||this.disabled||!i)return;"mouse"===e.pointerType&&(e.preventDefault(),null===(t=this.inputRef.value)||void 0===t||t.focus()),this.scrubbing=!0,this.scrubMoved=!1,this.scrubAccumulator=0,this.scrubPointerDownTarget=e.target;const n=this.ownerWindow();n.addEventListener("pointermove",this.onScrubMove,!0),n.addEventListener("pointerup",this.onScrubUp,!0)}handleScrubMove(e){if(this.scrubbing&&(e.preventDefault(),this.scrubAccumulator+=e.movementX,Math.abs(this.scrubAccumulator)>=2)){this.scrubAccumulator=0,this.scrubMoved=!0;const t=e.movementX,i=Math.abs(t*this.getStepAmount(e));0!==i&&(this.allowInputSync=!0,this.incrementValue(i,{direction:t>=0?1:-1,event:e,reason:"scrub"}))}}handleScrubUp(e){this.removeScrubListeners(),this.scrubbing=!1,this.commit("scrub"),!this.scrubMoved&&this.scrubPointerDownTarget&&this.scrubPointerDownTarget.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0})),this.scrubMoved=!1,this.scrubPointerDownTarget=null}removeScrubListeners(){const e=this.ownerWindow();e.removeEventListener("pointermove",this.onScrubMove,!0),e.removeEventListener("pointerup",this.onScrubUp,!0)}handleScrubTouchStart(e){this.disabled||this.readonly||1===e.touches.length&&e.preventDefault()}ownerWindow(){var e;return null!==(e=this.ownerDocument.defaultView)&&void 0!==e?e:window}get computedInputMode(){if(null!=this.min&&this.min<0)return"text";if(this.integer)return"numeric";const e="any"===this.step||Number.isInteger(this.numericStep),t=null==this.min||Number.isInteger(this.min)&&this.min>=0,i=null==this.max||Number.isInteger(this.max);return e&&t&&i?"numeric":"decimal"}get resolvedCurrencyPlacement(){return"start"===this.currencyPlacement||"end"===this.currencyPlacement?this.currencyPlacement:this.currency?z(this.locale,this.currency):"start"}render(){var e,t;const i=this.inputId,n=this.controlAriaLabel,r=this.controlAriaLabelledby,l=this.currency?D(this.locale,this.currency):void 0,a=this.currency?this.resolvedCurrencyPlacement:void 0,d=this.currency?`${i}-currency`:void 0,u=[this.controlAriaDescribedby,d].filter(Boolean).join(" ")||void 0,c=e=>null!=l&&a===e?o`<span id="${d}" class="n-currency-symbol" aria-hidden="true">${l}</span>`:s;return o`${this.renderLabel()}<div class="${h({"n-number-field":!0,"is-scrubbing":this.scrubbing})}">${this.scrub?o`<div class="n-scrub" role="presentation" aria-hidden="true" @pointerdown="${this.handleScrubPointerDown}" @touchstart="${this.handleScrubTouchStart}"><svg class="n-scrub-grip" width="24" height="14" viewBox="0 0 24 14" fill="currentColor" aria-hidden="true"><path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z"></path></svg></div>`:s}<div class="${h({"n-control":!0,"is-invalid":this.effectiveInvalid})}">${this.hideControls?s:o`<button class="${h({"n-step":!0,"n-decrement":!0})}" type="button" tabindex="-1" aria-label="${this.localize.term("decreaseLabel")}" aria-controls="${i}" aria-readonly="${this.readonly?"true":s}" ?disabled="${this.decrementDisabled}" @pointerdown="${e=>this.handleStepPointerDown(e,-1)}" @pointerup="${e=>this.handleStepPointerStop(e,-1)}" @pointerleave="${e=>this.handleStepPointerStop(e,-1)}" @pointercancel="${e=>this.handleStepPointerStop(e,-1)}" @click="${e=>this.handleStepClick(e,-1)}"><nord-icon name="interface-remove-small"></nord-icon></button>`} <span class="n-number-field-slot n-number-field-slot-start">${c("start")}</span> <input ${m(this.inputRef)} class="n-input" type="text" id="${i}" inputmode="${this.computedInputMode}" .value="${this.inputText}" placeholder="${null!==(e=this.placeholder)&&void 0!==e?e:s}" ?disabled="${this.effectiveDisabled}" ?readonly="${this.readonly}" ?required="${this.required}" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="${this.localize.term("roleDescription")}" aria-label="${null!=n?n:s}" aria-labelledby="${null!=r?r:s}" aria-describedby="${null!=u?u:s}" aria-invalid="${null!==(t=this.controlAriaInvalid)&&void 0!==t?t:s}" aria-required="${this.required?"true":s}" aria-readonly="${this.readonly?"true":s}" @input="${this.handleInput}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @keydown="${this.handleKeydown}" @paste="${this.handlePaste}"> <span class="n-number-field-slot n-number-field-slot-end">${c("end")}</span> ${this.hideControls?s:o`<button class="${h({"n-step":!0,"n-increment":!0})}" type="button" tabindex="-1" aria-label="${this.localize.term("increaseLabel")}" aria-controls="${i}" aria-readonly="${this.readonly?"true":s}" ?disabled="${this.incrementDisabled}" @pointerdown="${e=>this.handleStepPointerDown(e,1)}" @pointerup="${e=>this.handleStepPointerStop(e,1)}" @pointerleave="${e=>this.handleStepPointerStop(e,1)}" @pointercancel="${e=>this.handleStepPointerStop(e,1)}" @click="${e=>this.handleStepClick(e,1)}"><nord-icon name="interface-add-small"></nord-icon></button>`}</div></div>${this.renderError()} ${this.isHintBelow?this.renderHint():s}`}};e([a(".n-number-field-slot-start")],G.prototype,"startZone",void 0),e([a(".n-number-field-slot-end")],G.prototype,"endZone",void 0),e([d({converter:function(e){if(null==e||""===e.trim())return null;const t=Number(e);return Number.isNaN(t)?null:t}})],G.prototype,"value",void 0),e([d({reflect:!0,type:Number})],G.prototype,"min",void 0),e([d({reflect:!0,type:Number})],G.prototype,"max",void 0),e([d({reflect:!0,converter:function(e){return null==e?1:"any"===e?"any":Z(Number(e),1)}})],G.prototype,"step",void 0),e([d({reflect:!0,type:Number,attribute:"large-step"})],G.prototype,"largeStep",void 0),e([d({reflect:!0,type:Number,attribute:"small-step"})],G.prototype,"smallStep",void 0),e([d({reflect:!0,type:Boolean,attribute:"snap-on-step"})],G.prototype,"snapOnStep",void 0),e([d({reflect:!0,type:Boolean,attribute:"allow-out-of-range"})],G.prototype,"allowOutOfRange",void 0),e([d({reflect:!0,type:Boolean})],G.prototype,"integer",void 0),e([d({reflect:!0,type:Boolean,attribute:"allow-wheel-scrub"})],G.prototype,"allowWheelScrub",void 0),e([d({reflect:!0,type:Boolean})],G.prototype,"scrub",void 0),e([d({attribute:!1})],G.prototype,"format",void 0),e([d({attribute:!1})],G.prototype,"formatValue",void 0),e([d({attribute:!1})],G.prototype,"parseValue",void 0),e([d({attribute:!1})],G.prototype,"mask",void 0),e([d({reflect:!0})],G.prototype,"locale",void 0),e([d({reflect:!0})],G.prototype,"placeholder",void 0),e([d({reflect:!0})],G.prototype,"name",void 0),e([d({reflect:!0,type:Boolean})],G.prototype,"disabled",void 0),e([d({reflect:!0,type:Boolean})],G.prototype,"readonly",void 0),e([d({reflect:!0,type:Boolean})],G.prototype,"invalid",void 0),e([d({reflect:!0,type:Boolean,attribute:"hide-controls"})],G.prototype,"hideControls",void 0),e([d({reflect:!0})],G.prototype,"currency",void 0),e([d({reflect:!0,attribute:"currency-placement"})],G.prototype,"currencyPlacement",void 0),e([u()],G.prototype,"inputText",void 0),e([u()],G.prototype,"scrubbing",void 0),e([d()],G.prototype,"form",null),G=e([c("nord-number-field")],G);var X=G;export{I as NumberFieldChangeEvent,X as default,D as getCurrencySymbol,z as resolveCurrencyPlacement};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{a as t}from"./interface-add-small-B-hv2v9J.js";import{r as i}from"./interface-remove-small-DUaWSs90.js";import{css as n,isServer as r,html as o,nothing as s,LitElement as l}from"lit";import{query as a,property as d,state as u,customElement as c}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{createRef as p,ref as m}from"lit/directives/ref.js";import{F as b}from"./FormDataController-OUt5L5uC.js";import{S as f}from"./StateAttributesController-BIh96sXZ.js";import{N as v}from"./events-Bv6wNHwJ.js";import{i as y}from"./light-dom-styles-DXsbiKU9.js";import{D as g}from"./DraftComponentMixin-4qug5Rky.js";import{F as S}from"./FieldControlMixin-BXNZJXu9.js";import{S as k}from"./SizeMixin-CU9cLbLC.js";import w from"./Icon.js";import{LocalizeController as x}from"./LocalizeController.js";import{resolveCurrencyPlacement as z,getCurrencySymbol as D}from"./currency.js";import{formatNumber as j}from"./format.js";import{NumberFieldChangeEvent as I}from"./NumberFieldEvents.js";import{getNumberLocaleDetails as $,BASE_NON_NUMERIC_SYMBOLS as T,SPACE_SEPARATOR_RE as _,PERCENTAGES as A,PERMILLE as V,PLUS_SIGNS_WITH_ASCII as P,MINUS_SIGNS_WITH_ASCII as N,ARABIC_DETECT_RE as E,PERSIAN_DETECT_RE as C,HAN_DETECT_RE as W,FULLWIDTH_DETECT_RE as L,ANY_MINUS_DETECT_RE as M,ANY_PLUS_DETECT_RE as O,parseNumber as R}from"./parse.js";import{clamp as F,toValidatedNumber as q,hasNumberFormatRoundingOptions as B,removeFloatingPointErrors as U}from"./validate.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"./VisuallyHidden.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";const K=n`nord-number-field,nord-number-field *,nord-number-field :after,nord-number-field :before{box-sizing:border-box}nord-number-field{--n-number-field-control-min-inline-size:8ch;--n-number-field-background:var(--n-input-background,var(--n-color-surface));--n-number-field-border-color:var(--n-input-border-color,var(--n-color-border-strong));--n-number-field-border-radius:var(--n-input-border-radius,var(--n-border-radius-s));--_n-number-field-block-size:var(--n-number-field-block-size,var(--n-space-xl));--_n-number-field-border-color:var(--n-number-field-border-color);--_n-number-field-min-content-block-size:calc(var(--n-line-height-form) + var(--n-space-s)/1.6*2 + 2px);--_n-number-field-padding-block:calc(var(--_n-number-field-block-size)/2 - var(--n-line-height-form)/2 - 1px);--_n-number-field-padding-inline:calc(var(--n-space-s)*1.6);--_n-number-field-font-size:var(--n-font-size-m);--_n-number-field-step-inline-size:var(--n-number-field-step-inline-size,var(--_n-number-field-block-size));display:block}nord-number-field .n-number-field{inline-size:100%}nord-number-field .n-number-field-root{display:contents}nord-number-field .n-scrub{align-items:center;color:var(--n-color-icon);cursor:ew-resize;display:inline-flex;margin-block-end:var(--n-space-xs);touch-action:none;user-select:none}nord-number-field .n-scrub-grip{block-size:var(--n-size-icon-s);display:block;inline-size:auto}nord-number-field.is-scrubbing,nord-number-field.is-scrubbing .n-input,nord-number-field.is-scrubbing .n-scrub{cursor:ew-resize}nord-number-field .n-control{align-items:stretch;background:var(--n-number-field-background);border:1px solid var(--_n-number-field-border-color);border-radius:var(--n-number-field-border-radius);display:flex;inline-size:100%;min-block-size:var(--_n-number-field-block-size);transition:border var(--n-transition-quickly),box-shadow var(--n-transition-quickly),background var(--n-transition-quickly)}nord-number-field .n-control:hover{--_n-number-field-border-color:var(--n-input-border-color,var(--n-color-border-hover))}nord-number-field .n-control:focus-within{--_n-number-field-border-color:var(--n-input-border-color,var(--n-color-accent));box-shadow:0 0 0 1px var(--_n-number-field-border-color)}nord-number-field[disabled] .n-control{--n-number-field-background:var(--n-input-background-inactive,var(--n-color-active));--_n-number-field-border-color:var(--n-input-border-color,var(--n-color-active));cursor:auto}nord-number-field .n-control.is-invalid{--_n-number-field-border-color:var(--n-color-border-danger)}nord-number-field .n-control.is-invalid:focus-within{--_n-number-field-border-color:var(--n-color-status-danger)}nord-number-field .n-input{appearance:none;background:#0000;border:none;color:var(--n-color-text);flex:1;font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-number-field-font-size);font-variant-numeric:tabular-nums;line-height:var(--n-line-height-form);margin:0;min-inline-size:var(--n-number-field-control-min-inline-size);outline:none;padding-block-end:var(--_n-number-field-padding-block);padding-block-start:var(--_n-number-field-padding-block);padding-inline-end:var(--_n-number-field-padding-inline);padding-inline-start:var(--_n-number-field-padding-inline);text-align:start}nord-number-field .n-control input.n-input:focus,nord-number-field .n-control input.n-input:focus-visible,nord-number-field .n-control input.n-input:focus-within{background:#0000;border:none;box-shadow:none;outline:none}nord-number-field .n-input::placeholder{color:var(--n-color-text-weakest);opacity:1}nord-number-field[disabled] .n-input{color:var(--n-color-text-weakest)}nord-number-field .n-number-field-slot{align-items:center;color:var(--n-color-text-weaker);display:inline-flex;flex:0 0 auto;font-family:var(--n-font-family);font-size:var(--_n-number-field-font-size);gap:var(--n-space-xs);line-height:var(--n-line-height-form);white-space:nowrap}nord-number-field .n-number-field-slot:empty{display:none}nord-number-field .n-number-field-slot-start{padding-inline-start:var(--_n-number-field-padding-inline)}nord-number-field .n-number-field-slot-end{padding-inline-end:var(--_n-number-field-padding-inline)}nord-number-field .n-number-field-slot nord-icon{--_n-icon-size:var(--n-size-icon-s)}nord-number-field[disabled] .n-number-field-slot{color:var(--n-color-text-weakest)}nord-number-field .n-currency-symbol{color:var(--n-color-text-weaker);font-variant-numeric:tabular-nums;user-select:none}nord-number-field .n-step{align-items:center;appearance:none;background:#0000;border:none;color:var(--n-color-icon);cursor:pointer;display:flex;flex-shrink:0;inline-size:var(--_n-number-field-step-inline-size);justify-content:center;margin:0;padding:0;transition:color var(--n-transition-quickly),background var(--n-transition-quickly);user-select:none}nord-number-field .n-step:hover:not([disabled]){background:var(--n-color-button-hover);color:var(--n-color-text)}nord-number-field .n-step:active:not([disabled]){background:var(--n-color-active)}nord-number-field .n-step[disabled]{color:var(--n-color-text-weakest);cursor:auto}nord-number-field .n-decrement{border-inline-end:1px solid var(--_n-number-field-border-color)}nord-number-field .n-increment{border-inline-start:1px solid var(--_n-number-field-border-color)}nord-number-field .n-step nord-icon{--_n-icon-size:var(--n-size-icon-s)}nord-number-field[size=s]{--_n-number-field-block-size:var(--n-number-field-block-size,calc(var(--n-space-l) + var(--n-space-xs)));--_n-number-field-padding-block:calc(var(--_n-number-field-block-size)/2 - var(--n-line-height-form)/2 - 1px);--_n-number-field-padding-inline:var(--n-space-s);--_n-number-field-font-size:var(--n-font-size-s);--_n-number-field-step-inline-size:var(--n-number-field-step-inline-size,var(--_n-number-field-block-size))}nord-number-field[size=s] .n-step nord-icon{--_n-icon-size:var(--n-size-icon-xs)}nord-number-field[size=l]{--_n-number-field-block-size:max(var(--n-number-field-block-size,calc(var(--n-space-xxl) - var(--n-space-l))),var(--_n-number-field-min-content-block-size));--_n-number-field-padding-block:calc(var(--_n-number-field-block-size)/2 - var(--n-line-height-form)/2 - 1px);--_n-number-field-font-size:var(--n-font-size-l);--_n-number-field-step-inline-size:var(--n-number-field-step-inline-size,var(--_n-number-field-block-size))}nord-number-field[size=l] .n-step nord-icon{--_n-icon-size:var(--n-size-icon-m)}`;w.registerIcon(t),w.registerIcon(i);let H=1;function Z(e,t){return Number.isFinite(e)&&e>0?e:t}let G=class extends(g(k(S(l)))){constructor(){super(...arguments),this.numberFieldId="nord-number-field-"+H++,this.inputId=`${this.numberFieldId}-input`,this.localize=new x(this),this.inputRef=p(),this.formData=new b(this,{value:()=>null==this.value?void 0:String(this.value)}),this.stateAttributes=new f(this,(()=>({invalid:this.effectiveInvalid})),{trackFocus:!0}),this.formAncestor=null,this.value=null,this.step=1,this.largeStep=10,this.smallStep=.1,this.snapOnStep=!1,this.allowOutOfRange=!1,this.integer=!1,this.allowWheelScrub=!1,this.scrub=!1,this.disabled=!1,this.readonly=!1,this.invalid=!1,this.hideControls=!1,this.currencyPlacement="auto",this.inputText="",this.scrubbing=!1,this.allowInputSync=!0,this.hasTouchedInput=!1,this.skipNextClick=!1,this.scrubAccumulator=0,this.scrubMoved=!1,this.scrubPointerDownTarget=null,this.onScrubMove=e=>this.handleScrubMove(e),this.onScrubUp=e=>this.handleScrubUp(e),this.onWheel=e=>this.handleWheel(e),this.wheelAttached=!1}get ownInvalid(){return this.invalid||super.ownInvalid}set form(e){const t=this._formId;this._formId=e,this.requestUpdate("form",t)}get form(){if(this._formId){return this.getRootNode().querySelector(`form#${this._formId}`)}return this.formAncestor}get minWithDefault(){var e;return null!==(e=this.min)&&void 0!==e?e:Number.MIN_SAFE_INTEGER}get maxWithDefault(){var e;return null!==(e=this.max)&&void 0!==e?e:Number.MAX_SAFE_INTEGER}get minWithZeroDefault(){var e;return null!==(e=this.min)&&void 0!==e?e:0}get allowsNegative(){return this.minWithDefault<0}get numericStep(){return"any"===this.step?1:Z(this.step,1)}get effectiveLargeStep(){return Z(this.largeStep,10)}get effectiveSmallStep(){return Z(this.smallStep,.1)}formatDisplay(e){return this.formatValue?this.formatValue(e,this.locale,this.format):j(e,this.locale,this.format)}connectedCallback(){var e,t;super.connectedCallback(),y(this,K),this.formAncestor=this.closest("form"),null!==(e=this.ariaObserver)&&void 0!==e||(this.ariaObserver=new MutationObserver((()=>this.requestUpdate()))),this.ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-label","aria-labelledby","aria-describedby"]}),null!==(t=this.slotObserver)&&void 0!==t||(this.slotObserver=new MutationObserver((()=>this.requestUpdate()))),this.slotObserver.observe(this,{childList:!0}),this.allowInputSync&&(this.inputText=this.formatDisplay(this.value))}disconnectedCallback(){var e,t;super.disconnectedCallback(),null===(e=this.ariaObserver)||void 0===e||e.disconnect(),this.ariaObserver=void 0,null===(t=this.slotObserver)||void 0===t||t.disconnect(),this.slotObserver=void 0,this.formAncestor=null,this.stopHold(),this.detachWheel(),this.removeScrubListeners()}createRenderRoot(){if(r)return this;const e=document.createElement("div");return e.className="n-number-field-root",this.appendChild(e),e}relocateSlots(){if(r)return;const e=(e,t)=>{if(t)for(const i of Array.from(this.children))i.getAttribute("slot")===e&&i.parentElement!==t&&t.appendChild(i)};e("start",this.startZone),e("end",this.endZone)}willUpdate(e){if(e.has("value")&&this.allowInputSync&&!this.allowOutOfRange&&null!=this.value){const e=F(this.value,this.minWithDefault,this.maxWithDefault);e!==this.value&&(this.value=e)}e.has("value")&&this.integer&&null!=this.value&&!Number.isInteger(this.value)&&(this.value=Math.round(this.value)),this.allowInputSync&&(e.has("value")||e.has("format")||e.has("locale"))&&(this.inputText=this.formatDisplay(this.value))}updated(e){var t;super.updated(e),this.relocateSlots();const i=this.allowWheelScrub&&!this.disabled&&!this.readonly;if(i&&!this.wheelAttached?this.attachWheel():!i&&this.wheelAttached&&this.detachWheel(),this.pendingSelection){const[e,i]=this.pendingSelection;this.pendingSelection=void 0,null===(t=this.inputRef.value)||void 0===t||t.setSelectionRange(e,i)}}focus(e){var t;null===(t=this.inputRef.value)||void 0===t||t.focus(e)}isTextReason(e){return"input-change"===e||"input-blur"===e||"input-paste"===e||"input-clear"===e||"none"===e}getStepAmount(e){return(null==e?void 0:e.altKey)?this.effectiveSmallStep:(null==e?void 0:e.shiftKey)?this.effectiveLargeStep:this.numericStep}setValue(e,{reason:t,direction:i,event:n}){var r;const o=!this.allowOutOfRange||!this.isTextReason(t),s=q(e,{step:i?this.getStepAmount(n)*i:void 0,format:this.format,minWithDefault:this.minWithDefault,maxWithDefault:this.maxWithDefault,minWithZeroDefault:this.minWithZeroDefault,snapOnStep:this.snapOnStep,small:null!==(r=null==n?void 0:n.altKey)&&void 0!==r&&r,clamp:o}),l=this.isTextReason(t),a=s!==this.value||l&&(e!==this.value||!1===this.allowInputSync);return a&&(this.value=s,this.dispatchEvent(new v("input"))),this.allowInputSync&&(this.inputText=this.formatDisplay(s)),this.requestUpdate(),a}incrementValue(e,{direction:t,currentValue:i,event:n,reason:r}){var o;const s=i??this.value,l="number"==typeof s?s+e*t:Math.max(0,null!==(o=this.min)&&void 0!==o?o:0);return this.setValue(l,{reason:r,direction:t,event:n})}commit(e){this.dispatchEvent(new I(this.value,e))}getAllowedNonNumericKeys(){var e,t,i;const{decimal:n,group:r,currency:o,literal:s}=$(this.locale,this.format),l=new Set;T.forEach((e=>l.add(e))),n&&l.add(n),r&&(l.add(r),_.test(r)&&l.add(" "));const a=null===(e=this.format)||void 0===e?void 0:e.style,d="percent"===a||"unit"===a&&"percent"===(null===(t=this.format)||void 0===t?void 0:t.unit),u="percent"===a||"unit"===a&&"permille"===(null===(i=this.format)||void 0===i?void 0:i.unit);if(d&&A.forEach((e=>l.add(e))),u&&V.forEach((e=>l.add(e))),"currency"===a&&o&&l.add(o),s&&(Array.from(s).forEach((e=>l.add(e))),_.test(s)&&l.add(" ")),P.forEach((e=>l.add(e))),this.minWithDefault<0&&N.forEach((e=>l.add(e))),this.integer)for(const e of[n,".","．","٫"])e&&e!==r&&l.delete(e);return l}handleKeydown(e){if(e.defaultPrevented||this.readonly||this.disabled)return;this.allowInputSync=!0;if(!new Set(["ArrowUp","ArrowDown","PageUp","PageDown","Home","End"]).has(e.key)){if(this.mask)return;const t=this.getAllowedNonNumericKeys(),i=e.key>="0"&&e.key<="9",n=e.key.length>1;return void(229===e.which||e.ctrlKey||e.metaKey||e.altKey||i||n||t.has(e.key)||E.test(e.key)||C.test(e.key)||W.test(e.key)||L.test(e.key)||this.allowsNegative&&M.test(e.key)||O.test(e.key)||e.preventDefault())}const t=this.parseValue?this.parseValue(this.inputText,this.locale,this.format):R(this.inputText,this.locale,this.format);switch(e.key){case"ArrowUp":e.preventDefault(),this.incrementValue(this.getStepAmount(e),{direction:1,currentValue:t,event:e,reason:"keyboard"}),this.commit("keyboard");break;case"ArrowDown":e.preventDefault(),this.incrementValue(this.getStepAmount(e),{direction:-1,currentValue:t,event:e,reason:"keyboard"}),this.commit("keyboard");break;case"PageUp":e.preventDefault(),this.incrementValue(this.effectiveLargeStep,{direction:1,currentValue:t,reason:"keyboard"}),this.commit("keyboard");break;case"PageDown":e.preventDefault(),this.incrementValue(this.effectiveLargeStep,{direction:-1,currentValue:t,reason:"keyboard"}),this.commit("keyboard");break;case"Home":null!=this.min&&Number.isFinite(this.min)&&(e.preventDefault(),this.setValue(this.min,{reason:"keyboard"}),this.commit("keyboard"));break;case"End":null!=this.max&&Number.isFinite(this.max)&&(e.preventDefault(),this.setValue(this.max,{reason:"keyboard"}),this.commit("keyboard"))}}isValidCharacterString(e){const t=this.getAllowedNonNumericKeys();return Array.from(e).every((e=>e>="0"&&e<="9"||E.test(e)||W.test(e)||C.test(e)||L.test(e)||this.allowsNegative&&M.test(e)||t.has(e)))}handleInput(e){var t,i;e.stopPropagation(),this.allowInputSync=!1;const n=e.target;let r=n.value;const o=this.mask;if(o&&""!==r.trim()){const e=o({value:r,selectionStart:null!==(t=n.selectionStart)&&void 0!==t?t:r.length,selectionEnd:null!==(i=n.selectionEnd)&&void 0!==i?i:r.length},{locale:this.locale,format:this.format});r=e.value,this.pendingSelection=[e.selectionStart,e.selectionEnd]}if(""===r.trim())return this.inputText="",this.pendingSelection=void 0,void this.setValue(null,{reason:"input-clear"});if(!this.mask&&!this.isValidCharacterString(r))return;this.inputText=r;const s=this.parseValue?this.parseValue(r,this.locale,this.format):R(r,this.locale,this.format);null!==s&&this.setValue(s,{reason:"input-change"})}handlePaste(e){var t,i;if(e.defaultPrevented||this.readonly||this.disabled)return;if(this.mask)return;const n=null!==(i=null===(t=e.clipboardData)||void 0===t?void 0:t.getData("text/plain"))&&void 0!==i?i:"";e.preventDefault();const r=this.parseValue?this.parseValue(n,this.locale,this.format):R(n,this.locale,this.format);null!==r&&(this.allowInputSync=!0,this.setValue(r,{reason:"input-paste"}))}handleFocus(e){if(e.defaultPrevented||this.readonly||this.disabled)return;if(this.hasTouchedInput)return;this.hasTouchedInput=!0;const t=e.currentTarget,i=t.value.length;t.setSelectionRange(i,i)}handleBlur(e){if(e.defaultPrevented||this.readonly||this.disabled)return;if(this.allowInputSync=!0,""===this.inputText.trim())return this.setValue(null,{reason:"input-clear"}),void this.commit("input-clear");const t=this.parseValue?this.parseValue(this.inputText,this.locale,this.format):R(this.inputText,this.locale,this.format);if(null===t){const e=this.formatDisplay(this.value);return void(this.inputText!==e&&(this.inputText=e))}const i=B(this.format)?U(t,this.format):t;i!==this.value&&this.setValue(i,{reason:"input-blur"});const n=this.formatDisplay(this.value);this.inputText!==n&&(this.inputText=n),this.commit("input-blur")}commitDirtyInput(e,t){this.allowInputSync=!0;const i=this.parseValue?this.parseValue(this.inputText,this.locale,this.format):R(this.inputText,this.locale,this.format);null!==i&&this.setValue(i,{reason:e,direction:t})}handleStepPointerDown(e,t){var i;const n=!e.button||0===e.button;if(e.defaultPrevented||this.readonly||this.disabled||!n)return;const r=1===t?"increment-press":"decrement-press";this.skipNextClick=!0,this.activePointerId=e.pointerId,this.commitDirtyInput(r,t),"touch"!==e.pointerType&&"pen"!==e.pointerType&&(null===(i=this.inputRef.value)||void 0===i||i.focus()),this.allowInputSync=!0,this.incrementValue(this.getStepAmount(e),{direction:t,event:e,reason:r});const o=e.currentTarget;try{o.setPointerCapture(e.pointerId)}catch(e){}this.holdStartTimer=setTimeout((()=>{this.holdTickTimer=setInterval((()=>{this.allowInputSync=!0,this.incrementValue(this.getStepAmount(e),{direction:t,event:e,reason:r})}),60)}),400)}handleStepPointerStop(e,t){if(void 0!==this.activePointerId&&this.activePointerId!==e.pointerId)return;const i=null!=this.holdStartTimer||null!=this.holdTickTimer;this.stopHold(),this.activePointerId=void 0,(this.skipNextClick||i)&&this.commit(1===t?"increment-press":"decrement-press")}handleStepClick(e,t){const i=1===t?"increment-press":"decrement-press";if(e.defaultPrevented||this.readonly||this.disabled)return;if(this.skipNextClick)return void(this.skipNextClick=!1);this.commitDirtyInput(i,t),this.allowInputSync=!0;this.incrementValue(this.getStepAmount(e),{direction:t,event:e,reason:i})&&this.commit(i)}stopHold(){null!=this.holdStartTimer&&(clearTimeout(this.holdStartTimer),this.holdStartTimer=void 0),null!=this.holdTickTimer&&(clearInterval(this.holdTickTimer),this.holdTickTimer=void 0)}get incrementDisabled(){return this.disabled||this.readonly||null!=this.value&&this.value>=this.maxWithDefault}get decrementDisabled(){return this.disabled||this.readonly||null!=this.value&&this.value<=this.minWithDefault}attachWheel(){const e=this.inputRef.value;e&&(e.addEventListener("wheel",this.onWheel,{passive:!1}),this.wheelAttached=!0)}detachWheel(){const e=this.inputRef.value;null==e||e.removeEventListener("wheel",this.onWheel),this.wheelAttached=!1}handleWheel(e){if(e.ctrlKey||this.inputRef.value!==this.getActiveElement())return;e.preventDefault(),this.allowInputSync=!0;const t=this.getStepAmount(e);this.incrementValue(t,{direction:e.deltaY>0?-1:1,event:e,reason:"wheel"})}getActiveElement(){return this.getRootNode().activeElement}handleScrubPointerDown(e){var t;const i=!e.button||0===e.button;if(e.defaultPrevented||this.readonly||this.disabled||!i)return;"mouse"===e.pointerType&&(e.preventDefault(),null===(t=this.inputRef.value)||void 0===t||t.focus()),this.scrubbing=!0,this.scrubMoved=!1,this.scrubAccumulator=0,this.scrubPointerDownTarget=e.target;const n=this.ownerWindow();n.addEventListener("pointermove",this.onScrubMove,!0),n.addEventListener("pointerup",this.onScrubUp,!0)}handleScrubMove(e){if(this.scrubbing&&(e.preventDefault(),this.scrubAccumulator+=e.movementX,Math.abs(this.scrubAccumulator)>=2)){this.scrubAccumulator=0,this.scrubMoved=!0;const t=e.movementX,i=Math.abs(t*this.getStepAmount(e));0!==i&&(this.allowInputSync=!0,this.incrementValue(i,{direction:t>=0?1:-1,event:e,reason:"scrub"}))}}handleScrubUp(e){this.removeScrubListeners(),this.scrubbing=!1,this.commit("scrub"),!this.scrubMoved&&this.scrubPointerDownTarget&&this.scrubPointerDownTarget.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0})),this.scrubMoved=!1,this.scrubPointerDownTarget=null}removeScrubListeners(){const e=this.ownerWindow();e.removeEventListener("pointermove",this.onScrubMove,!0),e.removeEventListener("pointerup",this.onScrubUp,!0)}handleScrubTouchStart(e){this.disabled||this.readonly||1===e.touches.length&&e.preventDefault()}ownerWindow(){var e;return null!==(e=this.ownerDocument.defaultView)&&void 0!==e?e:window}get computedInputMode(){if(null!=this.min&&this.min<0)return"text";if(this.integer)return"numeric";const e="any"===this.step||Number.isInteger(this.numericStep),t=null==this.min||Number.isInteger(this.min)&&this.min>=0,i=null==this.max||Number.isInteger(this.max);return e&&t&&i?"numeric":"decimal"}get resolvedCurrencyPlacement(){return"start"===this.currencyPlacement||"end"===this.currencyPlacement?this.currencyPlacement:this.currency?z(this.locale,this.currency):"start"}render(){var e,t;const i=this.inputId,n=this.controlAriaLabel,r=this.controlAriaLabelledby,l=this.currency?D(this.locale,this.currency):void 0,a=this.currency?this.resolvedCurrencyPlacement:void 0,d=this.currency?`${i}-currency`:void 0,u=[this.controlAriaDescribedby,d].filter(Boolean).join(" ")||void 0,c=e=>null!=l&&a===e?o`<span id="${d}" class="n-currency-symbol" aria-hidden="true">${l}</span>`:s;return o`${this.renderLabel()}<div class="${h({"n-number-field":!0,"is-scrubbing":this.scrubbing})}">${this.scrub?o`<div class="n-scrub" role="presentation" aria-hidden="true" @pointerdown="${this.handleScrubPointerDown}" @touchstart="${this.handleScrubTouchStart}"><svg class="n-scrub-grip" width="24" height="14" viewBox="0 0 24 14" fill="currentColor" aria-hidden="true"><path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z"></path></svg></div>`:s}<div class="${h({"n-control":!0,"is-invalid":this.effectiveInvalid})}">${this.hideControls?s:o`<button class="${h({"n-step":!0,"n-decrement":!0})}" type="button" tabindex="-1" aria-label="${this.localize.term("decreaseLabel")}" aria-controls="${i}" aria-readonly="${this.readonly?"true":s}" ?disabled="${this.decrementDisabled}" @pointerdown="${e=>this.handleStepPointerDown(e,-1)}" @pointerup="${e=>this.handleStepPointerStop(e,-1)}" @pointerleave="${e=>this.handleStepPointerStop(e,-1)}" @pointercancel="${e=>this.handleStepPointerStop(e,-1)}" @click="${e=>this.handleStepClick(e,-1)}"><nord-icon name="interface-remove-small"></nord-icon></button>`} <span class="n-number-field-slot n-number-field-slot-start">${c("start")}</span> <input ${m(this.inputRef)} class="n-input" type="text" id="${i}" inputmode="${this.computedInputMode}" .value="${this.inputText}" placeholder="${null!==(e=this.placeholder)&&void 0!==e?e:s}" ?disabled="${this.effectiveDisabled}" ?readonly="${this.readonly}" ?required="${this.required}" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="${this.localize.term("roleDescription")}" aria-label="${null!=n?n:s}" aria-labelledby="${null!=r?r:s}" aria-describedby="${null!=u?u:s}" aria-invalid="${null!==(t=this.controlAriaInvalid)&&void 0!==t?t:s}" aria-required="${this.required?"true":s}" aria-readonly="${this.readonly?"true":s}" @input="${this.handleInput}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @keydown="${this.handleKeydown}" @paste="${this.handlePaste}"> <span class="n-number-field-slot n-number-field-slot-end">${c("end")}</span> ${this.hideControls?s:o`<button class="${h({"n-step":!0,"n-increment":!0})}" type="button" tabindex="-1" aria-label="${this.localize.term("increaseLabel")}" aria-controls="${i}" aria-readonly="${this.readonly?"true":s}" ?disabled="${this.incrementDisabled}" @pointerdown="${e=>this.handleStepPointerDown(e,1)}" @pointerup="${e=>this.handleStepPointerStop(e,1)}" @pointerleave="${e=>this.handleStepPointerStop(e,1)}" @pointercancel="${e=>this.handleStepPointerStop(e,1)}" @click="${e=>this.handleStepClick(e,1)}"><nord-icon name="interface-add-small"></nord-icon></button>`}</div></div>${this.renderError()} ${this.isHintBelow?this.renderHint():s}`}};e([a(".n-number-field-slot-start")],G.prototype,"startZone",void 0),e([a(".n-number-field-slot-end")],G.prototype,"endZone",void 0),e([d({converter:function(e){if(null==e||""===e.trim())return null;const t=Number(e);return Number.isNaN(t)?null:t}})],G.prototype,"value",void 0),e([d({reflect:!0,type:Number})],G.prototype,"min",void 0),e([d({reflect:!0,type:Number})],G.prototype,"max",void 0),e([d({reflect:!0,converter:function(e){return null==e?1:"any"===e?"any":Z(Number(e),1)}})],G.prototype,"step",void 0),e([d({reflect:!0,type:Number,attribute:"large-step"})],G.prototype,"largeStep",void 0),e([d({reflect:!0,type:Number,attribute:"small-step"})],G.prototype,"smallStep",void 0),e([d({reflect:!0,type:Boolean,attribute:"snap-on-step"})],G.prototype,"snapOnStep",void 0),e([d({reflect:!0,type:Boolean,attribute:"allow-out-of-range"})],G.prototype,"allowOutOfRange",void 0),e([d({reflect:!0,type:Boolean})],G.prototype,"integer",void 0),e([d({reflect:!0,type:Boolean,attribute:"allow-wheel-scrub"})],G.prototype,"allowWheelScrub",void 0),e([d({reflect:!0,type:Boolean})],G.prototype,"scrub",void 0),e([d({attribute:!1})],G.prototype,"format",void 0),e([d({attribute:!1})],G.prototype,"formatValue",void 0),e([d({attribute:!1})],G.prototype,"parseValue",void 0),e([d({attribute:!1})],G.prototype,"mask",void 0),e([d({reflect:!0})],G.prototype,"locale",void 0),e([d({reflect:!0})],G.prototype,"placeholder",void 0),e([d({reflect:!0})],G.prototype,"name",void 0),e([d({reflect:!0,type:Boolean})],G.prototype,"disabled",void 0),e([d({reflect:!0,type:Boolean})],G.prototype,"readonly",void 0),e([d({reflect:!0,type:Boolean})],G.prototype,"invalid",void 0),e([d({reflect:!0,type:Boolean,attribute:"hide-controls"})],G.prototype,"hideControls",void 0),e([d({reflect:!0})],G.prototype,"currency",void 0),e([d({reflect:!0,attribute:"currency-placement"})],G.prototype,"currencyPlacement",void 0),e([u()],G.prototype,"inputText",void 0),e([u()],G.prototype,"scrubbing",void 0),e([d()],G.prototype,"form",null),G=e([c("nord-number-field")],G);var X=G;export{I as NumberFieldChangeEvent,X as default,D as getCurrencySymbol,z as resolveCurrencyPlacement};
 //# sourceMappingURL=NumberField.js.map