@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

package/dist/native/nv-sidebar.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-sidebar.entry.esm.js","sources":["src/components/nv-sidebar/styles/nv-sidebar.scss?tag=nv-sidebar","src/components/nv-sidebar/nv-sidebar.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n@use \"./global-overrides\";\n\nnv-sidebar {\n  @include sidebar-container();\n  @include sidebar-width(\"expanded\");\n\n  &[collapsed] {\n    @include sidebar-width(\"collapsed\");\n\n    [data-hide-on-collapsed] {\n      display: none !important;\n    }\n\n    // Collapsed mode: different padding\n    .nv-sidebar-container {\n      padding: var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed);\n    }\n  }\n\n  .nv-sidebar-container {\n    @include sidebar-inner-container();\n  }\n\n  .nv-sidebar-toggle {\n    @include sidebar-toggle-button();\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  h,\n} from '@stencil/core';\n\n/**\n * Main sidebar container for navigation. Supports collapsible and persistent modes.\n * @slot default - All sidebar components (logo, header, content, footer).\n */\n@Component({\n  tag: 'nv-sidebar',\n  styleUrl: 'styles/nv-sidebar.scss',\n  shadow: false,\n})\nexport class NvSidebar {\n  @Element() el!: HTMLNvSidebarElement;\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The type of sidebar behavior.\n   * - collapsible: Can be toggled open/closed\n   * - persistent: Always visible\n   */\n  @Prop({ reflect: true })\n  readonly type: 'collapsible' | 'persistent' = 'persistent';\n\n  /**\n   * Whether the sidebar is currently open (only applies to collapsible type).\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = true;\n\n  /**\n   * The current active path. Used to automatically set the active state of nav items.\n   * Example: \"/dashboard\" or \"/settings/profile\"\n   */\n  @Prop({ reflect: true })\n  readonly activePath?: string;\n\n  /**\n   * Determines the type of notification bullets in the sidebar.\n   * - neutral: Uses neutral colors (gray)\n   * - brand: Uses brand colors (orange/teal depending on theme)\n   */\n  @Prop({ reflect: true })\n  readonly notificationIntention: 'neutral' | 'brand' = 'brand';\n\n  /**\n   * Determines the emphasis of notification bullets in the sidebar.\n   * - high: More prominent appearance\n   * - low: Less prominent appearance\n   */\n  @Prop({ reflect: true })\n  readonly notificationEmphasis: 'high' | 'low' = 'high';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the open state changes.\n   * @bind open\n   */\n  @Event({ bubbles: false })\n  openChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleToggle = () => {\n    if (this.type === 'collapsible') {\n      // Changing open will trigger @Watch which emits the event\n      this.open = !this.open;\n    }\n  };\n\n  private handleCollapsedSideEffects(isCollapsed: boolean) {\n    if (!isCollapsed) {\n      return;\n    }\n\n    this.el.querySelectorAll('nv-sidebarnavitem[open]').forEach(navItem => {\n      (navItem as HTMLNvSidebarnavitemElement).open = false;\n    });\n  }\n\n  /**\n   * Sets the active state of navigation items based on activePath\n   */\n  private setActiveNavItems = () => {\n    if (!this.activePath) return;\n\n    // First, check all subitems to find if any matches exactly\n    const activeSubitemHrefs = new Set<string>();\n    this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {\n      const link = subItem.querySelector('a');\n      const href = link?.getAttribute('href');\n\n      if (href) {\n        const isActive = this.activePath === href;\n        subItem.active = isActive;\n        if (isActive) {\n          activeSubitemHrefs.add(href);\n        }\n      }\n    });\n\n    // Then, set nav items active only if:\n    // 1. Exact match with activePath AND no subitem matches\n    // 2. OR the navitem has no subitems and activePath starts with its href\n    this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {\n      const link = navItem.querySelector(\n        ':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a',\n      );\n      const href = link?.getAttribute('href');\n      const hasSubitems =\n        navItem.querySelector('nv-sidebarnavsubitem') !== null;\n\n      if (href) {\n        if (hasSubitems) {\n          // Parent with subitems: only active if exact match (not when subitem is active)\n          navItem.active = this.activePath === href;\n        } else {\n          // Item without subitems: active on exact match\n          navItem.active = this.activePath === href;\n        }\n      }\n    });\n  };\n\n  private pendingActiveUpdate: number | null = null;\n\n  /**\n   * Sets up the MutationObserver to watch for changes in child elements.\n   * Only triggers on new nav items being added, not on attribute changes.\n   */\n  private setupMutationObserver = (): void => {\n    this.mutationObserver = new MutationObserver(mutations => {\n      // Only react to new nav items being added, ignore other mutations\n      const hasNewNavItems = mutations.some(mutation => {\n        if (mutation.type !== 'childList') return false;\n        return Array.from(mutation.addedNodes).some(node => {\n          if (node.nodeType !== Node.ELEMENT_NODE) return false;\n          const el = node as Element;\n          return (\n            el.tagName.toLowerCase() === 'nv-sidebarnavitem' ||\n            el.tagName.toLowerCase() === 'nv-sidebarnavsubitem' ||\n            el.querySelector('nv-sidebarnavitem, nv-sidebarnavsubitem')\n          );\n        });\n      });\n\n      if (hasNewNavItems) {\n        // Debounce to prevent multiple rapid calls\n        if (this.pendingActiveUpdate) {\n          clearTimeout(this.pendingActiveUpdate);\n        }\n        this.pendingActiveUpdate = window.setTimeout(() => {\n          this.setActiveNavItems();\n          this.pendingActiveUpdate = null;\n        }, 50);\n      }\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('activePath')\n  onActivePathChanged() {\n    this.setActiveNavItems();\n  }\n\n  @Watch('open')\n  protected onOpenChanged(newValue: boolean, oldValue: boolean) {\n    this.handleCollapsedSideEffects(this.type === 'collapsible' && !newValue);\n    // Only emit event when open state actually changes (not on re-render with same value)\n    if (this.type === 'collapsible' && newValue !== oldValue) {\n      this.openChanged.emit(newValue);\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.setActiveNavItems();\n    this.setupMutationObserver();\n    this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n    if (this.pendingActiveUpdate) {\n      clearTimeout(this.pendingActiveUpdate);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const isCollapsed = this.type === 'collapsible' && !this.open;\n\n    return (\n      <Host\n        role=\"navigation\"\n        collapsed={isCollapsed ? true : undefined}\n        notification-intention={this.notificationIntention}\n        notification-emphasis={this.notificationEmphasis}\n        aria-expanded={\n          this.type === 'collapsible' ? String(this.open) : undefined\n        }\n      >\n        <div class=\"nv-sidebar-container\">\n          <slot></slot>\n        </div>\n        {this.type === 'collapsible' && (\n          <button\n            class=\"nv-sidebar-toggle\"\n            onClick={this.handleToggle}\n            aria-label={this.open ? 'Collapse sidebar' : 'Expand sidebar'}\n          >\n            <nv-icon\n              name={\n                this.open\n                  ? 'layout-sidebar-left-collapse'\n                  : 'layout-sidebar-right-collapse'\n              }\n              size=\"sm\"\n            ></nv-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"nv-sidebar.entry.esm.js","sources":["src/components/nv-sidebar/styles/nv-sidebar.scss?tag=nv-sidebar","src/components/nv-sidebar/nv-sidebar.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n@use \"./global-overrides\";\n\nnv-sidebar {\n  @include sidebar-container();\n  @include sidebar-width(\"expanded\");\n\n  &[collapsed] {\n    @include sidebar-width(\"collapsed\");\n\n    [data-hide-on-collapsed] {\n      display: none !important;\n    }\n\n    // Collapsed mode: different padding\n    .nv-sidebar-container {\n      padding: var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed);\n    }\n  }\n\n  .nv-sidebar-container {\n    @include sidebar-inner-container();\n  }\n\n  .nv-sidebar-toggle {\n    @include sidebar-toggle-button();\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  h,\n} from '@stencil/core';\n\n/**\n * Main sidebar container for navigation. Supports collapsible and persistent modes.\n * @slot default - All sidebar components (logo, header, content, footer).\n */\n@Component({\n  tag: 'nv-sidebar',\n  styleUrl: 'styles/nv-sidebar.scss',\n  shadow: false,\n})\nexport class NvSidebar {\n  @Element() el!: HTMLNvSidebarElement;\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The type of sidebar behavior.\n   * - collapsible: Can be toggled open/closed\n   * - persistent: Always visible\n   */\n  @Prop({ reflect: true })\n  readonly type: 'collapsible' | 'persistent' = 'persistent';\n\n  /**\n   * Whether the sidebar is currently open (only applies to collapsible type).\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = true;\n\n  /**\n   * The current active path. Used to automatically set the active state of nav items.\n   * Example: \"/dashboard\" or \"/settings/profile\"\n   */\n  @Prop({ reflect: true })\n  readonly activePath?: string;\n\n  /**\n   * Determines the type of notification bullets in the sidebar.\n   * - neutral: Uses neutral colors (gray)\n   * - brand: Uses brand colors (orange/teal depending on theme)\n   */\n  @Prop({ reflect: true })\n  readonly notificationIntention: 'neutral' | 'brand' = 'brand';\n\n  /**\n   * Determines the emphasis of notification bullets in the sidebar.\n   * - high: More prominent appearance\n   * - low: Less prominent appearance\n   */\n  @Prop({ reflect: true })\n  readonly notificationEmphasis: 'high' | 'low' = 'high';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the open state changes.\n   * @bind open\n   */\n  @Event({ bubbles: false })\n  openChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleToggle = () => {\n    if (this.type === 'collapsible') {\n      // Changing open will trigger @Watch which emits the event\n      this.open = !this.open;\n    }\n  };\n\n  private handleCollapsedSideEffects(isCollapsed: boolean) {\n    if (!isCollapsed) {\n      return;\n    }\n\n    this.el.querySelectorAll('nv-sidebarnavitem[open]').forEach(navItem => {\n      (navItem as HTMLNvSidebarnavitemElement).open = false;\n    });\n  }\n\n  /**\n   * Sets the active state of navigation items based on activePath\n   */\n  private setActiveNavItems = () => {\n    if (!this.activePath) return;\n\n    // First, check all subitems to find if any matches exactly\n    const activeSubitemHrefs = new Set<string>();\n    this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {\n      const link = subItem.querySelector('a');\n      const href = link?.getAttribute('href');\n\n      if (href) {\n        const isActive = this.activePath === href;\n        subItem.active = isActive;\n        if (isActive) {\n          activeSubitemHrefs.add(href);\n        }\n      }\n    });\n\n    // Then, set nav items active only if:\n    // 1. Exact match with activePath AND no subitem matches\n    // 2. OR the navitem has no subitems and activePath starts with its href\n    this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {\n      const link = navItem.querySelector(\n        ':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a',\n      );\n      const href = link?.getAttribute('href');\n      const hasSubitems =\n        navItem.querySelector('nv-sidebarnavsubitem') !== null;\n\n      if (href) {\n        if (hasSubitems) {\n          // Parent with subitems: only active if exact match (not when subitem is active)\n          navItem.active = this.activePath === href;\n        } else {\n          // Item without subitems: active on exact match\n          navItem.active = this.activePath === href;\n        }\n      }\n    });\n  };\n\n  private pendingActiveUpdate: number | null = null;\n\n  /**\n   * Sets up the MutationObserver to watch for changes in child elements.\n   * Only triggers on new nav items being added, not on attribute changes.\n   */\n  private setupMutationObserver = (): void => {\n    this.mutationObserver = new MutationObserver(mutations => {\n      // Only react to new nav items being added, ignore other mutations\n      const hasNewNavItems = mutations.some(mutation => {\n        if (mutation.type !== 'childList') return false;\n        return Array.from(mutation.addedNodes).some(node => {\n          if (node.nodeType !== Node.ELEMENT_NODE) return false;\n          const el = node as Element;\n          return (\n            el.tagName.toLowerCase() === 'nv-sidebarnavitem' ||\n            el.tagName.toLowerCase() === 'nv-sidebarnavsubitem' ||\n            el.querySelector('nv-sidebarnavitem, nv-sidebarnavsubitem')\n          );\n        });\n      });\n\n      if (hasNewNavItems) {\n        // Debounce to prevent multiple rapid calls\n        if (this.pendingActiveUpdate) {\n          clearTimeout(this.pendingActiveUpdate);\n        }\n        this.pendingActiveUpdate = window.setTimeout(() => {\n          this.setActiveNavItems();\n          this.pendingActiveUpdate = null;\n        }, 50);\n      }\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('activePath')\n  onActivePathChanged() {\n    this.setActiveNavItems();\n  }\n\n  @Watch('open')\n  protected onOpenChanged(newValue: boolean, oldValue: boolean) {\n    this.handleCollapsedSideEffects(this.type === 'collapsible' && !newValue);\n    // Only emit event when open state actually changes (not on re-render with same value)\n    if (this.type === 'collapsible' && newValue !== oldValue) {\n      this.openChanged.emit(newValue);\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.setActiveNavItems();\n    this.setupMutationObserver();\n    this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n    if (this.pendingActiveUpdate) {\n      clearTimeout(this.pendingActiveUpdate);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const isCollapsed = this.type === 'collapsible' && !this.open;\n\n    return (\n      <Host\n        role=\"navigation\"\n        collapsed={isCollapsed ? true : undefined}\n        notification-intention={this.notificationIntention}\n        notification-emphasis={this.notificationEmphasis}\n        aria-expanded={\n          this.type === 'collapsible' ? String(this.open) : undefined\n        }\n      >\n        <div class=\"nv-sidebar-container\">\n          <slot></slot>\n        </div>\n        {this.type === 'collapsible' && (\n          <button\n            class=\"nv-sidebar-toggle\"\n            onClick={this.handleToggle}\n            aria-label={this.open ? 'Collapse sidebar' : 'Expand sidebar'}\n          >\n            <nv-icon\n              name={\n                this.open\n                  ? 'layout-sidebar-left-collapse'\n                  : 'layout-sidebar-right-collapse'\n              }\n              size=\"sm\"\n            ></nv-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"names":[],"mappings":"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"}

package/dist/native/nv-sidebarnavitem.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-sidebarnavitem.entry.esm.js","sources":["src/components/nv-sidebarnavitem/styles/nv-sidebarnavitem.scss?tag=nv-sidebarnavitem","src/components/nv-sidebarnavitem/nv-sidebarnavitem.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-sidebarnavitem {\n  @include navitem-container();\n\n  .nv-sidebarnavitem-trigger {\n    @include navitem-trigger();\n  }\n\n  &[active] .nv-sidebarnavitem-trigger {\n    @include navitem-active();\n  }\n\n  .nv-sidebarnavitem-icon {\n    @include navitem-icon();\n    position: relative;\n\n    // Position notification bullet on icon when sidebar is collapsed\n    nv-sidebar[collapsed] & {\n      overflow: visible; // Allow cross-border backdrop to be visible\n      margin: 0;\n      justify-content: center;\n      \n      nv-notification-bullet {\n        position: absolute;\n        // Position at top-right corner of the icon container\n        // Transform to center the bullet on the corner\n        // Move it up and right by half its size to center it on the corner\n        transform: translate(50%, -50%);\n        z-index: 1;\n        // Decrease size proportionally to icon (about 40% of icon size for better visibility)\n        --sidebar-notification-bullet-size-reduced: calc(\n          var(--sidebar-item-icon-size) * 0.4\n        );\n      }\n    }\n  }\n\n  .nv-sidebarnavitem-content {\n    @include navitem-content();\n\n    a {\n      color: inherit !important;\n      text-decoration: none !important;\n      font-weight: var(--font-weight-medium-emphasis) !important;\n      flex: 1;\n    }\n  }\n\n  .nv-sidebarnavitem-trailing {\n    @include navitem-trailing();\n  }\n\n  .nv-sidebarnavitem-chevron {\n    @include navitem-chevron();\n  }\n\n  &[open] .nv-sidebarnavitem-chevron {\n    @include navitem-chevron-open();\n  }\n\n  .nv-sidebarnavitem-subitems {\n    @include navitem-subitems();\n  }\n\n  &[open] .nv-sidebarnavitem-subitems {\n    @include navitem-subitems-open();\n  }\n\n  // Collapsed state handled by parent sidebar\n  nv-sidebar[collapsed] & {\n    .nv-sidebarnavitem-trigger {\n      justify-content: center;\n      gap: 0;\n      padding: var(--sidebar-item-padding-y-collapsed) var(--sidebar-item-padding-x-collapsed);\n    }\n\n    .nv-sidebarnavitem-content {\n      display: none;\n    }\n\n    .nv-sidebarnavitem-trailing,\n    .nv-sidebarnavitem-chevron {\n      display: none;\n    }\n  }\n}\n","import { Component, Host, Prop, State, Element, Watch, h } from '@stencil/core';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * A navigation item in the sidebar. Can be a simple link or a collapsible parent with sub-items.\n * @slot default - The link or content of the item (usually an <a> tag).\n * @slot subitems - Sub-navigation items (nv-sidebarnavsubitem elements). Automatically assigned.\n * @slot trailing - Optional content displayed at the end of the item (e.g., badges, icons, chevron).\n */\n@Component({\n  tag: 'nv-sidebarnavitem',\n  styleUrl: 'styles/nv-sidebarnavitem.scss',\n  shadow: false,\n})\nexport class NvSidebarnavitem {\n  @Element() el: HTMLNvSidebarnavitemElement;\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * Optional icon to display before the label.\n   */\n  @Prop({ reflect: true })\n  readonly icon?: IconName;\n\n  /**\n   * Whether this item represents the active/current page.\n   * Can be set automatically when a sub-item becomes active.\n   */\n  @Prop({ reflect: true, mutable: true })\n  active: boolean = false;\n\n  /**\n   * Whether this item can be collapsed/expanded (has sub-items).\n   */\n  @Prop({ reflect: true })\n  readonly collapsible: boolean = false;\n\n  /**\n   * Whether the collapsible item is currently open (showing sub-items).\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Number of notifications to display. When provided, a notification bullet will be automatically rendered.\n   * The bullet will be positioned in the trailing slot when sidebar is open, and on the icon when collapsed.\n   */\n  @Prop({ reflect: true })\n  readonly notificationCount?: number;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n  @State()\n  private hasSubitems: boolean = false;\n\n  @State()\n  private isSidebarCollapsed: boolean = false;\n\n  private mutationObserver?: MutationObserver;\n  private subitemsMutationObserver?: MutationObserver;\n  private wasActiveFromSubitem: boolean = false; // Track if active was set by subitem logic\n  //#endregion STATE\n  /****************************************************************************/\n  //#region METHODS\n  private handleToggle = (event: MouseEvent) => {\n    // Ignore clicks that originated from subitems (they bubble up but shouldn't toggle)\n    const target = event.target as HTMLElement;\n    if (target.closest('nv-sidebarnavsubitem')) {\n      return; // Let the subitem's link handle navigation normally\n    }\n\n    // In collapsed sidebar mode, navigate to the main link instead of toggling\n    if (this.isSidebarCollapsed) {\n      // Find the first link that is NOT inside subitems\n      const link = this.el.querySelector(\n        '.nv-sidebarnavitem-content a, :scope > a',\n      ) as HTMLAnchorElement;\n      if (link?.href) {\n        // Check if click was directly on the link - if so, let it handle naturally\n        if (target.closest('a')) {\n          return;\n        }\n        // Trigger navigation by clicking the link programmatically\n        link.click();\n      }\n      return;\n    }\n\n    // Only handle toggle for collapsible items when sidebar is expanded\n    if (this.collapsible) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.open = !this.open;\n    }\n    // For non-collapsible items in expanded mode, let the link handle the navigation\n    // Don't prevent default or stop propagation - allow the link to work normally\n  };\n\n  private subitemsRef?: HTMLDivElement;\n  private isAnimating: boolean = false;\n  private hasInitializedHeight: boolean = false;\n  /** Tracks the last open state that was animated to, to prevent redundant animations */\n  private lastAnimatedOpenState: boolean | null = null;\n\n  private updateSubitemsHeight = (force: boolean = false) => {\n    if (!this.subitemsRef) return;\n\n    // Skip animation if we're already in the target state (prevents animation on active change)\n    // Only animate if:\n    // 1. forced (explicit toggle by user via @Watch)\n    // 2. OR this is the first animation (lastAnimatedOpenState is null)\n    // 3. OR the open state has actually changed since last animation\n    if (\n      !force &&\n      this.lastAnimatedOpenState !== null &&\n      this.lastAnimatedOpenState === this.open\n    ) {\n      return;\n    }\n\n    // Don't re-animate if already animating and not forced\n    if (this.isAnimating && !force) {\n      return;\n    }\n\n    this.isAnimating = true;\n    this.lastAnimatedOpenState = this.open;\n\n    if (this.open) {\n      // Calculate real height and animate to it\n      this.subitemsRef.style.transition = 'none';\n      this.subitemsRef.style.maxHeight = '0px';\n      void this.subitemsRef.offsetHeight; // Force reflow\n      requestAnimationFrame(() => {\n        if (this.subitemsRef) {\n          this.subitemsRef.style.transition =\n            'max-height 0.3s ease, opacity 0.2s ease';\n          this.subitemsRef.style.maxHeight =\n            this.subitemsRef.scrollHeight + 'px';\n          // Reset animation flag after animation completes\n          setTimeout(() => {\n            this.isAnimating = false;\n          }, 300); // Match animation duration\n        }\n      });\n    } else {\n      // Animate to 0\n      this.subitemsRef.style.transition = 'none';\n      this.subitemsRef.style.maxHeight = this.subitemsRef.scrollHeight + 'px';\n      void this.subitemsRef.offsetHeight; // Force reflow\n      requestAnimationFrame(() => {\n        if (this.subitemsRef) {\n          this.subitemsRef.style.transition =\n            'max-height 0.3s ease, opacity 0.2s ease';\n          this.subitemsRef.style.maxHeight = '0px';\n          // Reset animation flag after animation completes\n          setTimeout(() => {\n            this.isAnimating = false;\n          }, 300); // Match animation duration\n        }\n      });\n    }\n  };\n  private checkSidebarCollapsed = () => {\n    const sidebar = this.el.closest('nv-sidebar');\n    const wasCollapsed = this.isSidebarCollapsed;\n    this.isSidebarCollapsed = sidebar?.hasAttribute('collapsed') ?? false;\n\n    // When sidebar collapse state changes, update active state based on subitems\n    if (wasCollapsed !== this.isSidebarCollapsed) {\n      this.updateActiveFromSubitems();\n    }\n  };\n\n  /**\n   * Checks if any sub-item is active and updates parent active state.\n   * - When sidebar is collapsed: if a sub-item is active, parent should be active\n   * - When sidebar is expanded: if a sub-item is active AND parent is not open, parent should be active\n   *   (because sub-items are hidden, we need to indicate the parent contains an active child)\n   */\n  private updateActiveFromSubitems = () => {\n    if (!this.hasSubitems) return;\n\n    // Find all sub-items\n    const subItems = Array.from(\n      this.el.querySelectorAll('nv-sidebarnavsubitem'),\n    ) as HTMLNvSidebarnavsubitemElement[];\n\n    // Check if any sub-item is active\n    const hasActiveSubitem = subItems.some(subItem => subItem.active);\n\n    if (this.isSidebarCollapsed) {\n      // When sidebar is collapsed AND a sub-item is active, make parent active\n      if (hasActiveSubitem) {\n        this.active = true;\n        this.wasActiveFromSubitem = true;\n      } else {\n        // When collapsed and no sub-item is active, remove active state only if we set it\n        if (this.wasActiveFromSubitem) {\n          this.active = false;\n          this.wasActiveFromSubitem = false;\n        }\n      }\n    } else {\n      // When sidebar is expanded\n      if (hasActiveSubitem && !this.open) {\n        // If a sub-item is active AND parent is not open (sub-items hidden),\n        // make parent active to indicate it contains an active child\n        this.active = true;\n        this.wasActiveFromSubitem = true;\n      } else if (hasActiveSubitem && this.open) {\n        // If a sub-item is active BUT parent is open (sub-items visible),\n        // remove active state from parent (only sub-item should be active)\n        if (this.wasActiveFromSubitem) {\n          this.active = false;\n          this.wasActiveFromSubitem = false;\n        }\n      } else {\n        // No active sub-item, remove active state if we set it\n        if (this.wasActiveFromSubitem) {\n          this.active = false;\n          this.wasActiveFromSubitem = false;\n        }\n      }\n      // Note: activePath logic in nv-sidebar can also manage parent active state\n      // (when parent href matches activePath exactly)\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  componentWillLoad() {\n    // Check if there are sub-items in any slot\n    const subItems = Array.from(this.el.children).filter(\n      child => child.tagName.toLowerCase() === 'nv-sidebarnavsubitem',\n    );\n    this.hasSubitems = subItems.length > 0;\n\n    // Move sub-items to the subitems slot\n    if (this.hasSubitems) {\n      subItems.forEach(item => {\n        item.setAttribute('slot', 'subitems');\n      });\n    }\n\n    // Check sidebar collapsed state\n    this.checkSidebarCollapsed();\n\n    // Watch for sidebar state changes\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      this.mutationObserver = new MutationObserver(() => {\n        this.checkSidebarCollapsed();\n      });\n      this.mutationObserver.observe(sidebar, {\n        attributes: true,\n        attributeFilter: ['collapsed'],\n      });\n    }\n\n    // Watch for sub-items active state changes\n    if (this.hasSubitems) {\n      // Observe the subitems container for changes (including new sub-items being added)\n      // Using subtree: true to catch all attribute changes in descendants\n      const subitemsContainer = this.el.querySelector(\n        '.nv-sidebarnavitem-subitems',\n      );\n      if (subitemsContainer) {\n        this.subitemsMutationObserver = new MutationObserver(() => {\n          this.updateActiveFromSubitems();\n        });\n\n        // Observe the container for child list changes and attribute changes in descendants\n        this.subitemsMutationObserver.observe(subitemsContainer, {\n          childList: true,\n          subtree: true,\n          attributes: true,\n          attributeFilter: ['active'],\n        });\n      } else {\n        // If container doesn't exist yet (not collapsible or not rendered), observe the element itself\n        // This handles cases where sub-items are direct children\n        this.subitemsMutationObserver = new MutationObserver(() => {\n          this.updateActiveFromSubitems();\n        });\n\n        this.subitemsMutationObserver.observe(this.el, {\n          childList: true,\n          subtree: true,\n          attributes: true,\n          attributeFilter: ['active'],\n        });\n      }\n    }\n\n    // Initial check for active subitems\n    this.updateActiveFromSubitems();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n    if (this.subitemsMutationObserver) {\n      this.subitemsMutationObserver.disconnect();\n    }\n  }\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region WATCHERS\n  @Watch('open')\n  onOpenChanged(newValue: boolean, oldValue: boolean) {\n    // Only animate if the value actually changed (prevents false triggers from React re-renders)\n    if (newValue === oldValue) {\n      return;\n    }\n    // Force update when open state changes (user clicked toggle)\n    this.updateSubitemsHeight(true);\n    // Update active state based on subitems when open state changes\n    this.updateActiveFromSubitems();\n  }\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    const showNotificationBullet =\n      this.notificationCount !== undefined && this.notificationCount > 0;\n    const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';\n\n    return (\n      <Host role=\"listitem\">\n        <div\n          class=\"nv-sidebarnavitem-trigger\"\n          onClick={this.handleToggle}\n          aria-expanded={this.collapsible ? String(this.open) : undefined}\n          aria-current={this.active && !this.collapsible ? 'page' : undefined}\n        >\n          {this.icon && (\n            <div class=\"nv-sidebarnavitem-icon\">\n              <nv-icon name={this.icon} size=\"md\"></nv-icon>\n              {showNotificationBullet && this.isSidebarCollapsed && (\n                <nv-notification-bullet\n                  count={this.notificationCount}\n                  size={notificationSize}\n                  contrastingBorder\n                ></nv-notification-bullet>\n              )}\n            </div>\n          )}\n          <div class=\"nv-sidebarnavitem-content\">\n            <slot></slot>\n          </div>\n          <div class=\"nv-sidebarnavitem-trailing\">\n            <slot name=\"trailing\"></slot>\n            {showNotificationBullet && !this.isSidebarCollapsed && (\n              <nv-notification-bullet\n                count={this.notificationCount}\n                size={notificationSize}\n              ></nv-notification-bullet>\n            )}\n            {this.collapsible && (\n              <nv-icon\n                name=\"chevron-down\"\n                size=\"sm\"\n                class=\"nv-sidebarnavitem-chevron\"\n              ></nv-icon>\n            )}\n          </div>\n        </div>\n        {this.collapsible && this.hasSubitems && (\n          <div\n            class=\"nv-sidebarnavitem-subitems\"\n            ref={el => {\n              // Only update ref and initialize if element changed or not yet initialized\n              if (el !== this.subitemsRef) {\n                this.subitemsRef = el;\n                if (el && !this.hasInitializedHeight) {\n                  // Initialize height only on first mount, not on re-renders\n                  this.hasInitializedHeight = true;\n                  requestAnimationFrame(() => {\n                    // Only animate if item is open, otherwise it will animate when opened\n                    if (this.open) {\n                      this.updateSubitemsHeight();\n                    }\n                  });\n                }\n              }\n            }}\n          >\n            <slot name=\"subitems\"></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,0/GAA0/G;;MCczgH,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAeE;;;AAGG;AAEH,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEvB;;AAEG;AAEM,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAErC;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;;;AAYb,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAG5B,QAAA,IAAkB,CAAA,kBAAA,GAAY,KAAK;AAInC,QAAA,IAAA,CAAA,oBAAoB,GAAY,KAAK,CAAC;;;;AAItC,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAiB,KAAI;;AAE3C,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,YAAA,IAAI,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAC,EAAE;AAC1C,gBAAA,OAAO;;;AAIT,YAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;;gBAE3B,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAChC,0CAA0C,CACtB;gBACtB,IAAI,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,IAAI,EAAE;;AAEd,oBAAA,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;wBACvB;;;oBAGF,IAAI,CAAC,KAAK,EAAE;;gBAEd;;;AAIF,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;;;;AAI1B,SAAC;AAGO,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAoB,CAAA,oBAAA,GAAY,KAAK;;AAErC,QAAA,IAAqB,CAAA,qBAAA,GAAmB,IAAI;QAE5C,IAAA,CAAA,oBAAoB,GAAG,CAAC,KAAiB,GAAA,KAAK,KAAI;YACxD,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE;;;;;;AAOvB,YAAA,IACE,CAAC,KAAK;gBACN,IAAI,CAAC,qBAAqB,KAAK,IAAI;AACnC,gBAAA,IAAI,CAAC,qBAAqB,KAAK,IAAI,CAAC,IAAI,EACxC;gBACA;;;AAIF,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,EAAE;gBAC9B;;AAGF,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,YAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,IAAI;AAEtC,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;;gBAEb,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM;gBAC1C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK;gBAExC,qBAAqB,CAAC,MAAK;AACzB,oBAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,wBAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU;AAC/B,4BAAA,yCAAyC;AAC3C,wBAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS;AAC9B,4BAAA,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,IAAI;;wBAEtC,UAAU,CAAC,MAAK;AACd,4BAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AAC1B,yBAAC,EAAE,GAAG,CAAC,CAAC;;AAEZ,iBAAC,CAAC;;iBACG;;gBAEL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM;AAC1C,gBAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,IAAI;gBAEvE,qBAAqB,CAAC,MAAK;AACzB,oBAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,wBAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU;AAC/B,4BAAA,yCAAyC;wBAC3C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK;;wBAExC,UAAU,CAAC,MAAK;AACd,4BAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AAC1B,yBAAC,EAAE,GAAG,CAAC,CAAC;;AAEZ,iBAAC,CAAC;;AAEN,SAAC;AACO,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;;YACnC,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;AAC7C,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB;YAC5C,IAAI,CAAC,kBAAkB,GAAG,CAAA,EAAA,GAAA,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,YAAY,CAAC,WAAW,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK;;AAGrE,YAAA,IAAI,YAAY,KAAK,IAAI,CAAC,kBAAkB,EAAE;gBAC5C,IAAI,CAAC,wBAAwB,EAAE;;AAEnC,SAAC;AAED;;;;;AAKG;AACK,QAAA,IAAwB,CAAA,wBAAA,GAAG,MAAK;YACtC,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE;;AAGvB,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CACzB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CACb;;AAGrC,YAAA,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC;AAEjE,YAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;;gBAE3B,IAAI,gBAAgB,EAAE;AACpB,oBAAA,IAAI,CAAC,MAAM,GAAG,IAAI;AAClB,oBAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;;qBAC3B;;AAEL,oBAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;AAC7B,wBAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACnB,wBAAA,IAAI,CAAC,oBAAoB,GAAG,KAAK;;;;iBAGhC;;AAEL,gBAAA,IAAI,gBAAgB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;AAGlC,oBAAA,IAAI,CAAC,MAAM,GAAG,IAAI;AAClB,oBAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;;AAC3B,qBAAA,IAAI,gBAAgB,IAAI,IAAI,CAAC,IAAI,EAAE;;;AAGxC,oBAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;AAC7B,wBAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACnB,wBAAA,IAAI,CAAC,oBAAoB,GAAG,KAAK;;;qBAE9B;;AAEL,oBAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;AAC7B,wBAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACnB,wBAAA,IAAI,CAAC,oBAAoB,GAAG,KAAK;;;;;;AAMzC,SAAC;AA0KF;;;;IArKC,iBAAiB,GAAA;;AAEf,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,MAAM,CAClD,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,sBAAsB,CAChE;QACD,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;;AAGtC,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,IAAG;AACtB,gBAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC;AACvC,aAAC,CAAC;;;QAIJ,IAAI,CAAC,qBAAqB,EAAE;;QAG5B,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;QAC7C,IAAI,OAAO,EAAE;AACX,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAK;gBAChD,IAAI,CAAC,qBAAqB,EAAE;AAC9B,aAAC,CAAC;AACF,YAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,OAAO,EAAE;AACrC,gBAAA,UAAU,EAAE,IAAI;gBAChB,eAAe,EAAE,CAAC,WAAW,CAAC;AAC/B,aAAA,CAAC;;;AAIJ,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;;;YAGpB,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAC7C,6BAA6B,CAC9B;YACD,IAAI,iBAAiB,EAAE;AACrB,gBAAA,IAAI,CAAC,wBAAwB,GAAG,IAAI,gBAAgB,CAAC,MAAK;oBACxD,IAAI,CAAC,wBAAwB,EAAE;AACjC,iBAAC,CAAC;;AAGF,gBAAA,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,iBAAiB,EAAE;AACvD,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,OAAO,EAAE,IAAI;AACb,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,CAAC,QAAQ,CAAC;AAC5B,iBAAA,CAAC;;iBACG;;;AAGL,gBAAA,IAAI,CAAC,wBAAwB,GAAG,IAAI,gBAAgB,CAAC,MAAK;oBACxD,IAAI,CAAC,wBAAwB,EAAE;AACjC,iBAAC,CAAC;gBAEF,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;AAC7C,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,OAAO,EAAE,IAAI;AACb,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,CAAC,QAAQ,CAAC;AAC5B,iBAAA,CAAC;;;;QAKN,IAAI,CAAC,wBAAwB,EAAE;;IAGjC,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;;AAEpC,QAAA,IAAI,IAAI,CAAC,wBAAwB,EAAE;AACjC,YAAA,IAAI,CAAC,wBAAwB,CAAC,UAAU,EAAE;;;;;;IAO9C,aAAa,CAAC,QAAiB,EAAE,QAAiB,EAAA;;AAEhD,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB;;;AAGF,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;;QAE/B,IAAI,CAAC,wBAAwB,EAAE;;;;;IAKjC,MAAM,GAAA;AACJ,QAAA,MAAM,sBAAsB,GAC1B,IAAI,CAAC,iBAAiB,KAAK,SAAS,IAAI,IAAI,CAAC,iBAAiB,GAAG,CAAC;AACpE,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,kBAAkB,GAAG,SAAS,GAAG,SAAS;AAExE,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,SAAS,kBACjD,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,SAAS,EAAA,EAElE,IAAI,CAAC,IAAI,KACR,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAW,CAAA,EAC7C,sBAAsB,IAAI,IAAI,CAAC,kBAAkB,KAChD,CAAA,CAAA,wBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,IAAI,EAAE,gBAAgB,EACtB,iBAAiB,EAAA,IAAA,EAAA,CACO,CAC3B,CACG,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAA,EACrC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAQ,CAAA,EAC5B,sBAAsB,IAAI,CAAC,IAAI,CAAC,kBAAkB,KACjD,CACE,CAAA,wBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,IAAI,EAAE,gBAAgB,GACE,CAC3B,EACA,IAAI,CAAC,WAAW,KACf,CACE,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,2BAA2B,EACxB,CAAA,CACZ,CACG,CACF,EACL,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,KACnC,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,GAAG,EAAE,EAAE,IAAG;;AAER,gBAAA,IAAI,EAAE,KAAK,IAAI,CAAC,WAAW,EAAE;AAC3B,oBAAA,IAAI,CAAC,WAAW,GAAG,EAAE;AACrB,oBAAA,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;;AAEpC,wBAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;wBAChC,qBAAqB,CAAC,MAAK;;AAEzB,4BAAA,IAAI,IAAI,CAAC,IAAI,EAAE;gCACb,IAAI,CAAC,oBAAoB,EAAE;;AAE/B,yBAAC,CAAC;;;aAGP,EAAA,EAED,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,CAAQ,CACzB,CACP,CACI;;;;;;;;;;;"}
+{"version":3,"file":"nv-sidebarnavitem.entry.esm.js","sources":["src/components/nv-sidebarnavitem/styles/nv-sidebarnavitem.scss?tag=nv-sidebarnavitem","src/components/nv-sidebarnavitem/nv-sidebarnavitem.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-sidebarnavitem {\n  @include navitem-container();\n\n  .nv-sidebarnavitem-trigger {\n    @include navitem-trigger();\n  }\n\n  &[active] .nv-sidebarnavitem-trigger {\n    @include navitem-active();\n  }\n\n  .nv-sidebarnavitem-icon {\n    @include navitem-icon();\n    position: relative;\n\n    // Position notification bullet on icon when sidebar is collapsed\n    nv-sidebar[collapsed] & {\n      overflow: visible; // Allow cross-border backdrop to be visible\n      margin: 0;\n      justify-content: center;\n      \n      nv-notification-bullet {\n        position: absolute;\n        // Position at top-right corner of the icon container\n        // Transform to center the bullet on the corner\n        // Move it up and right by half its size to center it on the corner\n        transform: translate(50%, -50%);\n        z-index: 1;\n        // Decrease size proportionally to icon (about 40% of icon size for better visibility)\n        --sidebar-notification-bullet-size-reduced: calc(\n          var(--sidebar-item-icon-size) * 0.4\n        );\n      }\n    }\n  }\n\n  .nv-sidebarnavitem-content {\n    @include navitem-content();\n\n    a {\n      color: inherit !important;\n      text-decoration: none !important;\n      font-weight: var(--font-weight-medium-emphasis) !important;\n      flex: 1;\n    }\n  }\n\n  .nv-sidebarnavitem-trailing {\n    @include navitem-trailing();\n  }\n\n  .nv-sidebarnavitem-chevron {\n    @include navitem-chevron();\n  }\n\n  &[open] .nv-sidebarnavitem-chevron {\n    @include navitem-chevron-open();\n  }\n\n  .nv-sidebarnavitem-subitems {\n    @include navitem-subitems();\n  }\n\n  &[open] .nv-sidebarnavitem-subitems {\n    @include navitem-subitems-open();\n  }\n\n  // Collapsed state handled by parent sidebar\n  nv-sidebar[collapsed] & {\n    .nv-sidebarnavitem-trigger {\n      justify-content: center;\n      gap: 0;\n      padding: var(--sidebar-item-padding-y-collapsed) var(--sidebar-item-padding-x-collapsed);\n    }\n\n    .nv-sidebarnavitem-content {\n      display: none;\n    }\n\n    .nv-sidebarnavitem-trailing,\n    .nv-sidebarnavitem-chevron {\n      display: none;\n    }\n  }\n}\n","import { Component, Host, Prop, State, Element, Watch, h } from '@stencil/core';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * A navigation item in the sidebar. Can be a simple link or a collapsible parent with sub-items.\n * @slot default - The link or content of the item (usually an <a> tag).\n * @slot subitems - Sub-navigation items (nv-sidebarnavsubitem elements). Automatically assigned.\n * @slot trailing - Optional content displayed at the end of the item (e.g., badges, icons, chevron).\n */\n@Component({\n  tag: 'nv-sidebarnavitem',\n  styleUrl: 'styles/nv-sidebarnavitem.scss',\n  shadow: false,\n})\nexport class NvSidebarnavitem {\n  @Element() el: HTMLNvSidebarnavitemElement;\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * Optional icon to display before the label.\n   */\n  @Prop({ reflect: true })\n  readonly icon?: IconName;\n\n  /**\n   * Whether this item represents the active/current page.\n   * Can be set automatically when a sub-item becomes active.\n   */\n  @Prop({ reflect: true, mutable: true })\n  active: boolean = false;\n\n  /**\n   * Whether this item can be collapsed/expanded (has sub-items).\n   */\n  @Prop({ reflect: true })\n  readonly collapsible: boolean = false;\n\n  /**\n   * Whether the collapsible item is currently open (showing sub-items).\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Number of notifications to display. When provided, a notification bullet will be automatically rendered.\n   * The bullet will be positioned in the trailing slot when sidebar is open, and on the icon when collapsed.\n   */\n  @Prop({ reflect: true })\n  readonly notificationCount?: number;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n  @State()\n  private hasSubitems: boolean = false;\n\n  @State()\n  private isSidebarCollapsed: boolean = false;\n\n  private mutationObserver?: MutationObserver;\n  private subitemsMutationObserver?: MutationObserver;\n  private wasActiveFromSubitem: boolean = false; // Track if active was set by subitem logic\n  //#endregion STATE\n  /****************************************************************************/\n  //#region METHODS\n  private handleToggle = (event: MouseEvent) => {\n    // Ignore clicks that originated from subitems (they bubble up but shouldn't toggle)\n    const target = event.target as HTMLElement;\n    if (target.closest('nv-sidebarnavsubitem')) {\n      return; // Let the subitem's link handle navigation normally\n    }\n\n    // In collapsed sidebar mode, navigate to the main link instead of toggling\n    if (this.isSidebarCollapsed) {\n      // Find the first link that is NOT inside subitems\n      const link = this.el.querySelector(\n        '.nv-sidebarnavitem-content a, :scope > a',\n      ) as HTMLAnchorElement;\n      if (link?.href) {\n        // Check if click was directly on the link - if so, let it handle naturally\n        if (target.closest('a')) {\n          return;\n        }\n        // Trigger navigation by clicking the link programmatically\n        link.click();\n      }\n      return;\n    }\n\n    // Only handle toggle for collapsible items when sidebar is expanded\n    if (this.collapsible) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.open = !this.open;\n    }\n    // For non-collapsible items in expanded mode, let the link handle the navigation\n    // Don't prevent default or stop propagation - allow the link to work normally\n  };\n\n  private subitemsRef?: HTMLDivElement;\n  private isAnimating: boolean = false;\n  private hasInitializedHeight: boolean = false;\n  /** Tracks the last open state that was animated to, to prevent redundant animations */\n  private lastAnimatedOpenState: boolean | null = null;\n\n  private updateSubitemsHeight = (force: boolean = false) => {\n    if (!this.subitemsRef) return;\n\n    // Skip animation if we're already in the target state (prevents animation on active change)\n    // Only animate if:\n    // 1. forced (explicit toggle by user via @Watch)\n    // 2. OR this is the first animation (lastAnimatedOpenState is null)\n    // 3. OR the open state has actually changed since last animation\n    if (\n      !force &&\n      this.lastAnimatedOpenState !== null &&\n      this.lastAnimatedOpenState === this.open\n    ) {\n      return;\n    }\n\n    // Don't re-animate if already animating and not forced\n    if (this.isAnimating && !force) {\n      return;\n    }\n\n    this.isAnimating = true;\n    this.lastAnimatedOpenState = this.open;\n\n    if (this.open) {\n      // Calculate real height and animate to it\n      this.subitemsRef.style.transition = 'none';\n      this.subitemsRef.style.maxHeight = '0px';\n      void this.subitemsRef.offsetHeight; // Force reflow\n      requestAnimationFrame(() => {\n        if (this.subitemsRef) {\n          this.subitemsRef.style.transition =\n            'max-height 0.3s ease, opacity 0.2s ease';\n          this.subitemsRef.style.maxHeight =\n            this.subitemsRef.scrollHeight + 'px';\n          // Reset animation flag after animation completes\n          setTimeout(() => {\n            this.isAnimating = false;\n          }, 300); // Match animation duration\n        }\n      });\n    } else {\n      // Animate to 0\n      this.subitemsRef.style.transition = 'none';\n      this.subitemsRef.style.maxHeight = this.subitemsRef.scrollHeight + 'px';\n      void this.subitemsRef.offsetHeight; // Force reflow\n      requestAnimationFrame(() => {\n        if (this.subitemsRef) {\n          this.subitemsRef.style.transition =\n            'max-height 0.3s ease, opacity 0.2s ease';\n          this.subitemsRef.style.maxHeight = '0px';\n          // Reset animation flag after animation completes\n          setTimeout(() => {\n            this.isAnimating = false;\n          }, 300); // Match animation duration\n        }\n      });\n    }\n  };\n  private checkSidebarCollapsed = () => {\n    const sidebar = this.el.closest('nv-sidebar');\n    const wasCollapsed = this.isSidebarCollapsed;\n    this.isSidebarCollapsed = sidebar?.hasAttribute('collapsed') ?? false;\n\n    // When sidebar collapse state changes, update active state based on subitems\n    if (wasCollapsed !== this.isSidebarCollapsed) {\n      this.updateActiveFromSubitems();\n    }\n  };\n\n  /**\n   * Checks if any sub-item is active and updates parent active state.\n   * - When sidebar is collapsed: if a sub-item is active, parent should be active\n   * - When sidebar is expanded: if a sub-item is active AND parent is not open, parent should be active\n   *   (because sub-items are hidden, we need to indicate the parent contains an active child)\n   */\n  private updateActiveFromSubitems = () => {\n    if (!this.hasSubitems) return;\n\n    // Find all sub-items\n    const subItems = Array.from(\n      this.el.querySelectorAll('nv-sidebarnavsubitem'),\n    ) as HTMLNvSidebarnavsubitemElement[];\n\n    // Check if any sub-item is active\n    const hasActiveSubitem = subItems.some(subItem => subItem.active);\n\n    if (this.isSidebarCollapsed) {\n      // When sidebar is collapsed AND a sub-item is active, make parent active\n      if (hasActiveSubitem) {\n        this.active = true;\n        this.wasActiveFromSubitem = true;\n      } else {\n        // When collapsed and no sub-item is active, remove active state only if we set it\n        if (this.wasActiveFromSubitem) {\n          this.active = false;\n          this.wasActiveFromSubitem = false;\n        }\n      }\n    } else {\n      // When sidebar is expanded\n      if (hasActiveSubitem && !this.open) {\n        // If a sub-item is active AND parent is not open (sub-items hidden),\n        // make parent active to indicate it contains an active child\n        this.active = true;\n        this.wasActiveFromSubitem = true;\n      } else if (hasActiveSubitem && this.open) {\n        // If a sub-item is active BUT parent is open (sub-items visible),\n        // remove active state from parent (only sub-item should be active)\n        if (this.wasActiveFromSubitem) {\n          this.active = false;\n          this.wasActiveFromSubitem = false;\n        }\n      } else {\n        // No active sub-item, remove active state if we set it\n        if (this.wasActiveFromSubitem) {\n          this.active = false;\n          this.wasActiveFromSubitem = false;\n        }\n      }\n      // Note: activePath logic in nv-sidebar can also manage parent active state\n      // (when parent href matches activePath exactly)\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  componentWillLoad() {\n    // Check if there are sub-items in any slot\n    const subItems = Array.from(this.el.children).filter(\n      child => child.tagName.toLowerCase() === 'nv-sidebarnavsubitem',\n    );\n    this.hasSubitems = subItems.length > 0;\n\n    // Move sub-items to the subitems slot\n    if (this.hasSubitems) {\n      subItems.forEach(item => {\n        item.setAttribute('slot', 'subitems');\n      });\n    }\n\n    // Check sidebar collapsed state\n    this.checkSidebarCollapsed();\n\n    // Watch for sidebar state changes\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      this.mutationObserver = new MutationObserver(() => {\n        this.checkSidebarCollapsed();\n      });\n      this.mutationObserver.observe(sidebar, {\n        attributes: true,\n        attributeFilter: ['collapsed'],\n      });\n    }\n\n    // Watch for sub-items active state changes\n    if (this.hasSubitems) {\n      // Observe the subitems container for changes (including new sub-items being added)\n      // Using subtree: true to catch all attribute changes in descendants\n      const subitemsContainer = this.el.querySelector(\n        '.nv-sidebarnavitem-subitems',\n      );\n      if (subitemsContainer) {\n        this.subitemsMutationObserver = new MutationObserver(() => {\n          this.updateActiveFromSubitems();\n        });\n\n        // Observe the container for child list changes and attribute changes in descendants\n        this.subitemsMutationObserver.observe(subitemsContainer, {\n          childList: true,\n          subtree: true,\n          attributes: true,\n          attributeFilter: ['active'],\n        });\n      } else {\n        // If container doesn't exist yet (not collapsible or not rendered), observe the element itself\n        // This handles cases where sub-items are direct children\n        this.subitemsMutationObserver = new MutationObserver(() => {\n          this.updateActiveFromSubitems();\n        });\n\n        this.subitemsMutationObserver.observe(this.el, {\n          childList: true,\n          subtree: true,\n          attributes: true,\n          attributeFilter: ['active'],\n        });\n      }\n    }\n\n    // Initial check for active subitems\n    this.updateActiveFromSubitems();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n    if (this.subitemsMutationObserver) {\n      this.subitemsMutationObserver.disconnect();\n    }\n  }\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region WATCHERS\n  @Watch('open')\n  onOpenChanged(newValue: boolean, oldValue: boolean) {\n    // Only animate if the value actually changed (prevents false triggers from React re-renders)\n    if (newValue === oldValue) {\n      return;\n    }\n    // Force update when open state changes (user clicked toggle)\n    this.updateSubitemsHeight(true);\n    // Update active state based on subitems when open state changes\n    this.updateActiveFromSubitems();\n  }\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    const showNotificationBullet =\n      this.notificationCount !== undefined && this.notificationCount > 0;\n    const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';\n\n    return (\n      <Host role=\"listitem\">\n        <div\n          class=\"nv-sidebarnavitem-trigger\"\n          onClick={this.handleToggle}\n          aria-expanded={this.collapsible ? String(this.open) : undefined}\n          aria-current={this.active && !this.collapsible ? 'page' : undefined}\n        >\n          {this.icon && (\n            <div class=\"nv-sidebarnavitem-icon\">\n              <nv-icon name={this.icon} size=\"md\"></nv-icon>\n              {showNotificationBullet && this.isSidebarCollapsed && (\n                <nv-notification-bullet\n                  count={this.notificationCount}\n                  size={notificationSize}\n                  contrastingBorder\n                ></nv-notification-bullet>\n              )}\n            </div>\n          )}\n          <div class=\"nv-sidebarnavitem-content\">\n            <slot></slot>\n          </div>\n          <div class=\"nv-sidebarnavitem-trailing\">\n            <slot name=\"trailing\"></slot>\n            {showNotificationBullet && !this.isSidebarCollapsed && (\n              <nv-notification-bullet\n                count={this.notificationCount}\n                size={notificationSize}\n              ></nv-notification-bullet>\n            )}\n            {this.collapsible && (\n              <nv-icon\n                name=\"chevron-down\"\n                size=\"sm\"\n                class=\"nv-sidebarnavitem-chevron\"\n              ></nv-icon>\n            )}\n          </div>\n        </div>\n        {this.collapsible && this.hasSubitems && (\n          <div\n            class=\"nv-sidebarnavitem-subitems\"\n            ref={el => {\n              // Only update ref and initialize if element changed or not yet initialized\n              if (el !== this.subitemsRef) {\n                this.subitemsRef = el;\n                if (el && !this.hasInitializedHeight) {\n                  // Initialize height only on first mount, not on re-renders\n                  this.hasInitializedHeight = true;\n                  requestAnimationFrame(() => {\n                    // Only animate if item is open, otherwise it will animate when opened\n                    if (this.open) {\n                      this.updateSubitemsHeight();\n                    }\n                  });\n                }\n              }\n            }}\n          >\n            <slot name=\"subitems\"></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"names":[],"mappings":"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"}

package/dist/native/nv-split.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-split.entry.esm.js","sources":["src/components/nv-split/styles/nv-split.scss?tag=nv-split","src/components/nv-split/nv-split.tsx"],"sourcesContent":["@use './mixins' as *;\n@use './variables' as *;\n\nnv-split {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  position: relative;\n\n  &[direction='horizontal'] {\n    flex-direction: row;\n  }\n\n  &[direction='vertical'] {\n    flex-direction: column;\n  }\n\n  .nv-split-gutter {\n    @include split-gutter-base;\n  }\n\n  &[direction='horizontal'] > .nv-split-gutter {\n    @include split-gutter-horizontal;\n  }\n\n  &[direction='vertical'] > .nv-split-gutter {\n    @include split-gutter-vertical;\n  }\n\n  &[data-dragging='true'] > .nv-split-gutter::after {\n    background: $nv-split-line-background-active;\n  }\n\n  > [slot='pane'] {\n    flex: 1 1 auto;\n    overflow: hidden;\n    min-width: 0;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  > [slot='pane'] > nv-split {\n    flex: 1 1 auto;\n    width: 100%;\n    height: 100%;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/**\n * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.\n * @slot pane - Content of each split pane. Use multiple `<div slot=\"pane\">` elements.\n * @slot gutter - Optional custom content inside every gutter handle.\n */\n@Component({\n  tag: 'nv-split',\n  styleUrl: 'styles/nv-split.scss',\n  shadow: false,\n})\nexport class NvSplit {\n  @Element() el: HTMLNvSplitElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Direction of the split layout.\n   * - `horizontal`: panes side by side\n   * - `vertical`: panes stacked\n   */\n  @Prop({ reflect: true })\n  readonly direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Initial sizes of the panes in percentages.\n   * Example: `[50, 50]` means two equal panes.\n   * Explicitly `reflect: false` (array) for framework compatibility.\n   */\n  @Prop({ mutable: true, reflect: false })\n  sizes: number[] = [];\n\n  /**\n   * Minimum sizes (in px) for each pane.\n   * Example: `[100, 200]` => first pane min 100px, second min 200px.\n   * Explicitly `reflect: false` (array) for framework compatibility.\n   */\n  @Prop({ reflect: false })\n  readonly minSizes?: number[];\n\n  /**\n   * Width or height of the gutter (in px) depending on the split direction.\n   * Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly gutterSize: number = 24;\n\n  //#endregion\n  /****************************************************************************/\n  //#region STATE\n\n  @State()\n  private isDragging: boolean = false;\n\n  private dragIndex: number = -1;\n  private startPos: number = 0;\n  private startSizes: number[] = [];\n  private ro?: ResizeObserver;\n\n  // Handlers stored to be able to detach them\n  private onDocMove = (ev: MouseEvent) => this.handleMouseMove(ev);\n  private onDocUp = () => this.stopDragging();\n\n  //#endregion\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when pane sizes are updated (either via dragging or programmatically).\n   * @bind sizes\n   */\n  @Event({ bubbles: false })\n  sizesChanged: EventEmitter<number[]>;\n\n  //#endregion\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('sizes')\n  protected onSizesChanged(): void {\n    // Re-apply sizes if modified from the outside\n    this.applySizes();\n  }\n\n  @Watch('direction')\n  protected onDirectionChanged(): void {\n    // Update the orientation and the cursors of the gutters\n    this.ensureGutters();\n    this.applySizes();\n  }\n\n  //#endregion\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad(): void {\n    // Initialization (once)\n    this.ensureGutters();\n    this.applySizes();\n    this.positionGutters();\n\n    // Observer: reposition gutters when resized (nested or parent split changes)\n    this.ro = new ResizeObserver(() => this.positionGutters());\n    this.ro.observe(this.el);\n\n    window.addEventListener('resize', () => this.positionGutters());\n  }\n\n  disconnectedCallback(): void {\n    // Security cleanup (in case a drag was in progress)\n    this.detachDocumentListeners();\n    this.ro?.disconnect();\n    this.ro = undefined;\n  }\n\n  //#endregion\n  /****************************************************************************/\n  //#region PUBLIC METHODS\n\n  /**\n   * Programmatically set pane sizes.\n   * @param {Array<number>} sizes Array of pane sizes in percentages.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async setSizes(sizes: number[]): Promise<void> {\n    this.sizes = [...sizes];\n    this.applySizes();\n    this.sizesChanged.emit([...this.sizes]);\n    this.positionGutters();\n  }\n\n  /**\n   * Returns the current pane sizes.\n   * @returns {Promise<number[]>} Array of pane sizes in percentages.\n   */\n  @Method()\n  async getSizes(): Promise<number[]> {\n    return [...this.sizes];\n  }\n\n  /**\n   * Collapse a specific pane to 0 size.\n   * @param {number} index Index of the pane to collapse.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async collapse(index: number): Promise<void> {\n    const panes = this.getPanes();\n    if (index < 0 || index >= panes.length) return;\n\n    // Simple strategy: 0% for the index, the rest (100%) for its nearest neighbor\n    const next = new Array(panes.length).fill(0);\n    const target = index < panes.length - 1 ? index + 1 : index - 1;\n    if (target >= 0) next[target] = 100;\n\n    this.sizes = next;\n    this.applySizes();\n    this.sizesChanged.emit([...this.sizes]);\n    this.positionGutters();\n  }\n\n  /**\n   * Destroy the split instance: removes gutters and resets layout state.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async destroy(): Promise<void> {\n    this.sizes = [];\n    this.isDragging = false;\n    this.dragIndex = -1;\n    this.removeOwnGutters();\n    this.detachDocumentListeners();\n    this.ro?.disconnect();\n  }\n\n  //#endregion\n  /****************************************************************************/\n  //#region INTERNAL HELPERS\n\n  /**\n   * Returns the panes of the split.\n   * @returns {HTMLElement[]} The panes of the split.\n   */\n  private getPanes(): HTMLElement[] {\n    // Only the direct children slot=\"pane\"\n    return Array.from(\n      this.el.querySelectorAll<HTMLElement>(':scope > [slot=\"pane\"]'),\n    );\n  }\n\n  /**\n   * Returns the own gutters of the split.\n   * @returns {HTMLElement[]} The own gutters of the split.\n   */\n  private getOwnGutters(): HTMLElement[] {\n    // Only the direct gutters of THIS instance\n    return Array.from(\n      this.el.querySelectorAll<HTMLElement>(\n        ':scope > .nv-split-gutter[data-auto=\"true\"]',\n      ),\n    );\n  }\n\n  /**\n   * Removes the own gutters of the split.\n   */\n  private removeOwnGutters(): void {\n    this.getOwnGutters().forEach(g => g.remove());\n  }\n\n  /**\n   * Ensures the gutters of the split.\n   */\n  private ensureGutters(): void {\n    const panes = this.getPanes();\n\n    // 1) Clean ONLY the old direct gutters of THIS instance\n    this.removeOwnGutters();\n\n    if (panes.length <= 1) return;\n\n    // 2) Add the gutters (directs) between the panes\n    panes.forEach((pane, i) => {\n      if (i >= panes.length - 1) return;\n\n      const g = document.createElement('div');\n      g.className = 'nv-split-gutter';\n      g.setAttribute('data-auto', 'true');\n\n      if (this.direction === 'horizontal') {\n        g.style.width = `${this.gutterSize}px`;\n        g.style.cursor = 'col-resize';\n      } else {\n        g.style.height = `${this.gutterSize}px`;\n        g.style.cursor = 'row-resize';\n      }\n\n      // Customizable internal slot\n      const slotEl = document.createElement('slot');\n      slotEl.name = 'gutter';\n      g.appendChild(slotEl);\n\n      // Listener drag (index = gutter between pane i and i+1)\n      g.addEventListener('mousedown', (ev: MouseEvent) =>\n        this.startDragging(ev, i),\n      );\n\n      // Insert just after the pane\n      pane.insertAdjacentElement('afterend', g);\n    });\n\n    this.positionGutters();\n  }\n\n  /**\n   * Applies the sizes to the panes.\n   */\n  private applySizes(): void {\n    const panes = this.getPanes();\n    const n = panes.length;\n    if (n === 0) return;\n\n    // Default values if inconsistent\n    if (!this.sizes || this.sizes.length !== n) {\n      this.sizes = Array(n).fill(100 / n);\n    }\n\n    panes.forEach((pane, i) => {\n      const size = Math.max(0, this.sizes[i] ?? 100 / n);\n      // Flex-basis via flex shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)\n      pane.style.flex = `0 0 ${size}%`;\n      pane.style.minWidth = '0';\n      pane.style.minHeight = '0';\n      pane.style.overflow = 'hidden'; // let a nv-split child extend\n      pane.style.display = 'flex';\n      pane.style.flexDirection = 'column';\n    });\n\n    this.positionGutters();\n  }\n\n  /**\n   * Attaches the document listeners.\n   */\n  private attachDocumentListeners(): void {\n    document.addEventListener('mousemove', this.onDocMove);\n    document.addEventListener('mouseup', this.onDocUp);\n  }\n\n  /**\n   * Detaches the document listeners.\n   */\n  private detachDocumentListeners(): void {\n    document.removeEventListener('mousemove', this.onDocMove);\n    document.removeEventListener('mouseup', this.onDocUp);\n  }\n\n  /**\n   * Positions the gutters based on the current sizes of the panes.\n   */\n  private positionGutters(): void {\n    const panes = this.getPanes();\n    const gutters = this.getOwnGutters();\n    if (panes.length <= 1 || gutters.length === 0) return;\n\n    const horizontal = this.direction === 'horizontal';\n    let cumPct = 0;\n\n    for (let i = 0; i < gutters.length; i++) {\n      const sizePct = this.sizes?.[i] ?? 100 / panes.length;\n      cumPct += sizePct;\n\n      const g = gutters[i];\n      g.style.position = 'absolute';\n\n      if (horizontal) {\n        g.style.left = `${cumPct}%`;\n        g.style.top = '0';\n        g.style.bottom = '0';\n        g.style.height = '100%';\n      } else {\n        g.style.top = `${cumPct}%`;\n        g.style.left = '0';\n        g.style.right = '0';\n        g.style.width = '100%';\n      }\n    }\n  }\n\n  /**\n   * Starts the dragging process.\n   * @param {MouseEvent} ev - The mouse event.\n   * @param {number} index - The index of the gutter.\n   */\n  private startDragging(ev: MouseEvent, index: number): void {\n    this.isDragging = true;\n    this.dragIndex = index;\n    this.startPos = this.direction === 'horizontal' ? ev.clientX : ev.clientY;\n    this.startSizes = [...this.sizes];\n    this.attachDocumentListeners();\n  }\n\n  /**\n   * Handles the mouse movement during dragging.\n   * @param {MouseEvent} ev - The mouse event.\n   */\n  private handleMouseMove(ev: MouseEvent): void {\n    if (!this.isDragging || this.dragIndex < 0) return;\n\n    const panes = this.getPanes();\n    if (panes.length < 2) return;\n\n    const rect = this.el.getBoundingClientRect();\n\n    // Ensure we never divide by zero if the element has zero width/height\n    const rawSize = this.direction === 'horizontal' ? rect.width : rect.height;\n    const totalPx = Math.max(rawSize, 1);\n\n    const deltaPx =\n      (this.direction === 'horizontal' ? ev.clientX : ev.clientY) -\n      this.startPos;\n    const deltaPct = (deltaPx / totalPx) * 100;\n\n    const i = this.dragIndex;\n    const j = i + 1;\n\n    let left = this.startSizes[i] + deltaPct;\n    let right = this.startSizes[j] - deltaPct;\n\n    // minSizes (px) -> %\n    const minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;\n    const minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;\n\n    left = Math.max(left, minLeftPct);\n    right = Math.max(right, minRightPct);\n\n    // Keep the sum of the pair i/j constant\n    const pairSum = left + right;\n    const targetSum = this.startSizes[i] + this.startSizes[j];\n    if (Math.abs(pairSum - targetSum) > 0.0001) {\n      const k = targetSum / (pairSum || 1);\n      left *= k;\n      right *= k;\n    }\n\n    const next = [...this.startSizes];\n    next[i] = left;\n    next[j] = right;\n\n    this.sizes = next;\n    this.applySizes();\n    this.sizesChanged.emit([...this.sizes]);\n    this.positionGutters();\n  }\n\n  /**\n   * Stops the dragging process.\n   */\n  private stopDragging(): void {\n    if (!this.isDragging) return;\n    this.isDragging = false;\n    this.dragIndex = -1;\n    this.detachDocumentListeners();\n  }\n\n  //#endregion\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host data-dragging={this.isDragging.toString()}>\n        <slot name=\"pane\"></slot>\n        <slot name=\"gutter\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion\n  /****************************************************************************/\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"nv-split.entry.esm.js","sources":["src/components/nv-split/styles/nv-split.scss?tag=nv-split","src/components/nv-split/nv-split.tsx"],"sourcesContent":["@use './mixins' as *;\n@use './variables' as *;\n\nnv-split {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  position: relative;\n\n  &[direction='horizontal'] {\n    flex-direction: row;\n  }\n\n  &[direction='vertical'] {\n    flex-direction: column;\n  }\n\n  .nv-split-gutter {\n    @include split-gutter-base;\n  }\n\n  &[direction='horizontal'] > .nv-split-gutter {\n    @include split-gutter-horizontal;\n  }\n\n  &[direction='vertical'] > .nv-split-gutter {\n    @include split-gutter-vertical;\n  }\n\n  &[data-dragging='true'] > .nv-split-gutter::after {\n    background: $nv-split-line-background-active;\n  }\n\n  > [slot='pane'] {\n    box-sizing: border-box;\n    flex: 1 1 auto;\n    overflow: hidden;\n    min-width: 0;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    // Margins break flex-basis calculations - apply margins on content inside pane instead\n    margin: 0 !important;\n  }\n\n  > [slot='pane'] > nv-split {\n    flex: 1 1 auto;\n    width: 100%;\n    height: 100%;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/**\n * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel. Slot=“pane” elements have margin: 0 !important by default. This is a necessary technical constraint because CSS margins are not included in the flex-basis calculation, which would distort the sizing of the panes. Solution for the user: Apply margins/padding to the content inside the pane, not to the pane itself.\n * @slot pane - Content of each split pane. Use multiple `<div slot=\"pane\">` elements.\n * @slot gutter - Optional custom content inside every gutter handle.\n */\n@Component({\n  tag: 'nv-split',\n  styleUrl: 'styles/nv-split.scss',\n  shadow: false,\n})\nexport class NvSplit {\n  @Element() el: HTMLNvSplitElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Direction of the split layout.\n   * - `horizontal`: panes side by side\n   * - `vertical`: panes stacked\n   */\n  @Prop({ reflect: true })\n  readonly direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Initial sizes of the panes in percentages.\n   * Example: `[50, 50]` means two equal panes.\n   * Explicitly `reflect: false` (array) for framework compatibility.\n   */\n  @Prop({ mutable: true, reflect: false })\n  sizes: number[] = [];\n\n  /**\n   * Minimum sizes (in px) for each pane.\n   * Example: `[100, 200]` => first pane min 100px, second min 200px.\n   * Explicitly `reflect: false` (array) for framework compatibility.\n   */\n  @Prop({ reflect: false })\n  readonly minSizes?: number[];\n\n  /**\n   * Width or height of the gutter (in px) depending on the split direction.\n   * Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly gutterSize: number = 24;\n\n  //#endregion\n  /****************************************************************************/\n  //#region STATE\n\n  @State()\n  private isDragging: boolean = false;\n\n  private dragIndex: number = -1;\n  private startPos: number = 0;\n  private startSizes: number[] = [];\n  private ro?: ResizeObserver;\n\n  // Handlers stored to be able to detach them\n  private onDocMove = (e: MouseEvent) => this.handleMouseMove(e);\n  private onDocUp = () => this.stopDragging();\n\n  //#endregion\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when pane sizes are updated (drag start/stop or programmatically).\n   * @bind sizes\n   */\n  @Event({ bubbles: false })\n  sizesChanged: EventEmitter<number[]>;\n\n  //#endregion\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('sizes')\n  protected onSizesChanged(): void {\n    // Re-apply sizes if modified from the outside\n    this.applySizes();\n  }\n\n  @Watch('direction')\n  protected onDirectionChanged(): void {\n    // Update the orientation and the cursors of the gutters\n    this.ensureGutters();\n    this.applySizes();\n  }\n\n  //#endregion\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad(): void {\n    // Initialization (once)\n    this.ensureGutters();\n\n    // Defer applySizes to ensure CSS (margins, padding) is computed\n    requestAnimationFrame(() => {\n      this.applySizes();\n      this.positionGutters();\n    });\n\n    // Observer: reposition gutters when resized\n    this.ro = new ResizeObserver(() => this.positionGutters());\n    this.ro.observe(this.el);\n\n    window.addEventListener('resize', () => this.positionGutters());\n  }\n\n  disconnectedCallback(): void {\n    // Security cleanup (in case a drag was in progress)\n    this.detachDocumentListeners();\n    this.ro?.disconnect();\n    this.ro = undefined;\n  }\n\n  //#endregion\n  /****************************************************************************/\n  //#region PUBLIC METHODS\n\n  /**\n   * Programmatically set pane sizes.\n   * @param {Array<number>} sizes Array of pane sizes in percentages.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async setSizes(sizes: number[]): Promise<void> {\n    this.sizes = [...sizes];\n    this.applySizes();\n    this.sizesChanged.emit([...this.sizes]);\n    this.positionGutters();\n  }\n\n  /**\n   * Returns the current pane sizes.\n   * @returns {Promise<number[]>} Array of pane sizes in percentages.\n   */\n  @Method()\n  async getSizes(): Promise<number[]> {\n    return [...this.sizes];\n  }\n\n  /**\n   * Collapse a specific pane to 0 size.\n   * @param {number} index Index of the pane to collapse.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async collapse(index: number): Promise<void> {\n    const panes = this.getPanes();\n    if (index < 0 || index >= panes.length) return;\n\n    // Simple strategy: 0% for the index, the rest (100%) for its nearest neighbor\n    const next = new Array(panes.length).fill(0);\n    const target = index < panes.length - 1 ? index + 1 : index - 1;\n    if (target >= 0) next[target] = 100;\n\n    this.sizes = next;\n    this.applySizes();\n    this.sizesChanged.emit([...this.sizes]);\n    this.positionGutters();\n  }\n\n  /**\n   * Destroy the split instance: removes gutters and resets layout state.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async destroy(): Promise<void> {\n    this.sizes = [];\n    this.isDragging = false;\n    this.dragIndex = -1;\n    this.removeOwnGutters();\n    this.detachDocumentListeners();\n    this.ro?.disconnect();\n  }\n\n  //#endregion\n  /****************************************************************************/\n  //#region INTERNAL HELPERS\n\n  /**\n   * Returns the panes of the split.\n   * @returns {HTMLElement[]} The panes of the split.\n   */\n  private getPanes(): HTMLElement[] {\n    // Only the direct children slot=\"pane\"\n    return Array.from(\n      this.el.querySelectorAll<HTMLElement>(':scope > [slot=\"pane\"]'),\n    );\n  }\n\n  /**\n   * Returns the own gutters of the split.\n   * @returns {HTMLElement[]} The own gutters of the split.\n   */\n  private getOwnGutters(): HTMLElement[] {\n    // Only the direct gutters of THIS instance\n    return Array.from(\n      this.el.querySelectorAll<HTMLElement>(\n        ':scope > .nv-split-gutter[data-auto=\"true\"]',\n      ),\n    );\n  }\n\n  /**\n   * Removes the own gutters of the split.\n   */\n  private removeOwnGutters(): void {\n    this.getOwnGutters().forEach(g => g.remove());\n  }\n\n  /**\n   * Ensures the gutters of the split.\n   */\n  private ensureGutters(): void {\n    const panes = this.getPanes();\n\n    // 1) Clean ONLY the old direct gutters of THIS instance\n    this.removeOwnGutters();\n\n    if (panes.length <= 1) return;\n\n    // 2) Add the gutters (directs) between the panes\n    panes.forEach((pane, i) => {\n      if (i >= panes.length - 1) return;\n\n      const g = document.createElement('div');\n      g.className = 'nv-split-gutter';\n      g.setAttribute('data-auto', 'true');\n\n      if (this.direction === 'horizontal') {\n        g.style.width = `${this.gutterSize}px`;\n        g.style.cursor = 'col-resize';\n      } else {\n        g.style.height = `${this.gutterSize}px`;\n        g.style.cursor = 'row-resize';\n      }\n\n      // Customizable internal slot\n      const slotEl = document.createElement('slot');\n      slotEl.name = 'gutter';\n      g.appendChild(slotEl);\n\n      // Listener drag (index = gutter between pane i and i+1)\n      g.addEventListener('mousedown', (ev: MouseEvent) =>\n        this.startDragging(ev, i),\n      );\n\n      // Insert just after the pane\n      pane.insertAdjacentElement('afterend', g);\n    });\n\n    this.positionGutters();\n  }\n\n  /**\n   * Applies the sizes to the panes.\n   */\n  private applySizes(): void {\n    const panes = this.getPanes();\n    const n = panes.length;\n    if (n === 0) return;\n\n    // Default values if inconsistent\n    if (!this.sizes || this.sizes.length !== n) {\n      this.sizes = Array(n).fill(100 / n);\n    }\n\n    panes.forEach((pane, i) => {\n      const size = Math.max(0, this.sizes[i] ?? 100 / n);\n      pane.style.flex = `0 0 ${size}%`;\n      pane.style.minWidth = '0';\n      pane.style.minHeight = '0';\n      pane.style.overflow = 'hidden';\n      pane.style.display = 'flex';\n      pane.style.flexDirection = 'column';\n      pane.style.boxSizing = 'border-box';\n    });\n\n    this.positionGutters();\n  }\n\n  /**\n   * Attaches the document listeners.\n   */\n  private attachDocumentListeners(): void {\n    document.addEventListener('mousemove', this.onDocMove);\n    document.addEventListener('mouseup', this.onDocUp);\n  }\n\n  /**\n   * Detaches the document listeners.\n   */\n  private detachDocumentListeners(): void {\n    document.removeEventListener('mousemove', this.onDocMove);\n    document.removeEventListener('mouseup', this.onDocUp);\n  }\n\n  /**\n   * Positions the gutters based on the current sizes of the panes.\n   */\n  private positionGutters(): void {\n    const panes = this.getPanes();\n    const gutters = this.getOwnGutters();\n    if (panes.length <= 1 || gutters.length === 0) return;\n\n    const horizontal = this.direction === 'horizontal';\n    let cumPct = 0;\n\n    for (let i = 0; i < gutters.length; i++) {\n      const sizePct = this.sizes?.[i] ?? 100 / panes.length;\n      cumPct += sizePct;\n\n      const g = gutters[i];\n      g.style.position = 'absolute';\n\n      if (horizontal) {\n        g.style.left = `${cumPct}%`;\n        g.style.top = '0';\n        g.style.bottom = '0';\n        g.style.height = '100%';\n        g.style.transform = 'translateX(-50%)';\n      } else {\n        g.style.top = `${cumPct}%`;\n        g.style.left = '0';\n        g.style.right = '0';\n        g.style.width = '100%';\n        g.style.transform = 'translateY(-50%)';\n      }\n    }\n  }\n\n  /**\n   * Starts the dragging process.\n   * @param {MouseEvent} e - The mouse event.\n   * @param {number} index - The index of the gutter.\n   */\n  private startDragging(e: MouseEvent, index: number): void {\n    e.preventDefault();\n    this.isDragging = true;\n    this.dragIndex = index;\n    this.startPos = this.direction === 'horizontal' ? e.clientX : e.clientY;\n    this.startSizes = [...this.sizes];\n    this.attachDocumentListeners();\n    this.sizesChanged.emit([...this.sizes]);\n  }\n\n  /**\n   * Handles the mouse movement during dragging.\n   * @param {MouseEvent} e - The mouse event.\n   */\n  private handleMouseMove(e: MouseEvent): void {\n    if (!this.isDragging || this.dragIndex < 0) return;\n\n    const panes = this.getPanes();\n    if (panes.length < 2) return;\n\n    const rect = this.el.getBoundingClientRect();\n    const horizontal = this.direction === 'horizontal';\n    const totalPx = Math.max(horizontal ? rect.width : rect.height, 1);\n\n    const deltaPx = (horizontal ? e.clientX : e.clientY) - this.startPos;\n    const deltaPct = (deltaPx / totalPx) * 100;\n\n    const i = this.dragIndex;\n    const j = i + 1;\n\n    const startLeft = this.startSizes[i];\n    const startRight = this.startSizes[j];\n\n    // minSizes (px) -> %\n    let minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;\n    let minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;\n\n    const minSum = minLeftPct + minRightPct;\n    const availableSum = startLeft + startRight;\n    if (minSum > availableSum) {\n      const scale = availableSum / minSum;\n      minLeftPct *= scale;\n      minRightPct *= scale;\n    }\n\n    const minDelta = minLeftPct - startLeft;\n    const maxDelta = startRight - minRightPct;\n    const clampedDelta = Math.min(Math.max(deltaPct, minDelta), maxDelta);\n\n    const left = startLeft + clampedDelta;\n    const right = startRight - clampedDelta;\n\n    const next = [...this.startSizes];\n    next[i] = left;\n    next[j] = right;\n\n    this.sizes = next;\n    this.applySizes();\n    this.positionGutters();\n  }\n\n  /**\n   * Stops the dragging process.\n   */\n  private stopDragging(): void {\n    if (!this.isDragging) return;\n    this.isDragging = false;\n    this.dragIndex = -1;\n    this.detachDocumentListeners();\n    this.sizesChanged.emit([...this.sizes]);\n  }\n\n  //#endregion\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host data-dragging={this.isDragging.toString()}>\n        <slot name=\"pane\"></slot>\n        <slot name=\"gutter\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion\n  /****************************************************************************/\n}\n"],"names":[],"mappings":"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"}

package/dist/native/nv-table.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-table.entry.esm.js","sources":["src/components/nv-table/nv-table.utils.ts","src/components/nv-table/styles/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["/**\n * Table utility functions and constants for nv-table component\n *\n * This module contains pure utility functions for table column resizing logic,\n * pointer event handling calculations, and related helper functions.\n */\n\n/**\n * Constants for table column resizing behavior\n */\nexport const TABLE_CONSTANTS = Object.freeze({\n  /** Handle width for fine pointers (mouse) in pixels */\n  HANDLE_W: 12,\n  /** Handle width for coarse pointers (touch) in pixels */\n  HANDLE_W_TOUCH: 24,\n  /** Minimum column width in pixels */\n  MIN_W: 40,\n} as const);\n\n/**\n * Determines the appropriate handle width based on the current pointer type\n * @returns {number} Handle width in pixels (10px for fine pointers, 24px for coarse/touch)\n */\nexport function getHandleWidthForCurrentPointer(): number {\n  // Match the CSS media query: wider handle on coarse pointers (touch)\n  return matchMedia('(pointer: coarse)').matches\n    ? TABLE_CONSTANTS.HANDLE_W_TOUCH\n    : TABLE_CONSTANTS.HANDLE_W;\n}\n\n/**\n * Calculates the pointer's horizontal offset within a table cell\n * @param {PointerEvent} event - The pointer event\n * @param {HTMLTableCellElement} cell - The table cell element\n * @returns {number} The horizontal offset from the left edge of the cell\n */\nexport function getPointerOffsetInCell(\n  event: PointerEvent,\n  cell: HTMLTableCellElement,\n): number {\n  const rect = cell.getBoundingClientRect();\n  return event.clientX - rect.left;\n}\n\n/**\n * Determines if the pointer is within the resize handle area of a table cell\n * @param {number} offsetX - Horizontal offset within the cell\n * @param {number} cellWidth - Total width of the cell\n * @param {number} handleWidth - Width of the resize handle area\n * @returns {boolean} True if the pointer is in the resize handle area\n */\nexport function isInResizeHandle(\n  offsetX: number,\n  cellWidth: number,\n  handleWidth: number,\n): boolean {\n  return offsetX >= cellWidth - handleWidth;\n}\n\n/**\n * Calculates the new column width based on resize delta and constraints\n * @param {number} startWidth - Original width of the column\n * @param {number} delta - Change in pixels from the start position\n * @param {number} minWidth - Minimum allowed width for the column\n * @returns {number} The calculated new width, constrained by minimum\n */\nexport function calculateNewWidth(\n  startWidth: number,\n  delta: number,\n  minWidth: number = TABLE_CONSTANTS.MIN_W,\n): number {\n  return Math.max(minWidth, startWidth + delta);\n}\n\n/**\n * Validates that a table cell element is suitable for resizing\n * @param {HTMLElement | null} element - The element to check\n * @returns {element is HTMLTableCellElement} Type guard for table cell elements\n */\nexport function isValidTableCell(\n  element: HTMLElement | null,\n): element is HTMLTableCellElement {\n  return element?.tagName === 'TH' || element?.tagName === 'TD';\n}\n\n/**\n * Finds the closest table cell element from an event target\n * @param {EventTarget | null} target - The event target\n * @returns {HTMLTableCellElement | null} The closest table cell or null\n */\nexport function getClosestTableCell(\n  target: EventTarget | null,\n): HTMLTableCellElement | null {\n  if (!(target instanceof HTMLElement)) return null;\n\n  const cell = target.closest('th, td') as HTMLTableCellElement | null;\n  return isValidTableCell(cell) ? cell : null;\n}\n\n/**\n * Sets up pointer capture for consistent drag behavior across browsers\n * @param {HTMLTableCellElement} cell - The table cell element\n * @param {number} pointerId - The pointer ID from the pointer event\n * @returns {boolean} True if capture was successfully set\n */\nexport function setPointerCapture(\n  cell: HTMLTableCellElement,\n  pointerId: number,\n): boolean {\n  try {\n    cell.setPointerCapture?.(pointerId);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Releases pointer capture\n * @param {HTMLTableCellElement} cell - The table cell element\n * @param {number} pointerId - The pointer ID from the pointer event\n * @returns {boolean} True if release was successful\n */\nexport function releasePointerCapture(\n  cell: HTMLTableCellElement,\n  pointerId: number,\n): boolean {\n  try {\n    cell.releasePointerCapture?.(pointerId);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Prevents text selection during drag operations\n * @param {boolean} prevent - Whether to prevent selection\n */\nexport function setUserSelectPrevention(prevent: boolean): void {\n  document.body.style.userSelect = prevent ? 'none' : '';\n}\n\n/**\n * Gets the current width of a table cell element\n * @param {HTMLTableCellElement} cell - The table cell element\n * @returns {number} The current width in pixels\n */\nexport function getCellWidth(cell: HTMLTableCellElement): number {\n  return cell.offsetWidth;\n}\n\n/**\n * Applies a width to a table cell element\n * @param {HTMLTableCellElement} cell - The table cell element\n * @param {number} width - The width to apply in pixels\n */\nexport function setCellWidth(cell: HTMLTableCellElement, width: number): void {\n  cell.style.width = `${width}px`;\n}\n\n/**\n * Calculates the delta (change) in horizontal position between two pointer events\n * @param {number} currentX - Current clientX position\n * @param {number} startX - Starting clientX position\n * @returns {number} The horizontal delta\n */\nexport function calculatePointerDelta(\n  currentX: number,\n  startX: number,\n): number {\n  return currentX - startX;\n}\n\n/**\n * Interface for resize operation state\n */\nexport interface ResizeState {\n  /** The table cell being resized */\n  resizingCell: HTMLTableCellElement;\n  /** The pointer ID for this resize operation */\n  pointerId: number;\n  /** Starting X coordinate */\n  startX: number;\n  /** Starting width of the cell */\n  startWidth: number;\n}\n\n/**\n * Creates a new resize state object\n * @param {HTMLTableCellElement} cell - The cell being resized\n * @param {PointerEvent} event - The initiating pointer event\n * @returns {ResizeState} A new resize state object\n */\nexport function createResizeState(\n  cell: HTMLTableCellElement,\n  event: PointerEvent,\n): ResizeState {\n  return {\n    resizingCell: cell,\n    pointerId: event.pointerId,\n    startX: event.clientX,\n    startWidth: getCellWidth(cell),\n  };\n}\n\n/**\n * Validates that a resize state is active and matches the given pointer event\n * @param {ResizeState | null} state - The current resize state\n * @param {PointerEvent} event - The pointer event to validate against\n * @returns {boolean} True if the state is valid for this event\n */\nexport function isValidResizeState(\n  state: ResizeState | null,\n  event: PointerEvent,\n): boolean {\n  return state !== null && state.pointerId === event.pointerId;\n}\n\n/**\n * Updates the width of a cell during a resize operation\n * @param {ResizeState} state - The current resize state\n * @param {PointerEvent} event - The current pointer event\n * @param {number} minWidth - Minimum width constraint\n */\nexport function updateCellWidthFromResize(\n  state: ResizeState,\n  event: PointerEvent,\n  minWidth: number = TABLE_CONSTANTS.MIN_W,\n): void {\n  const delta = calculatePointerDelta(event.clientX, state.startX);\n  const newWidth = calculateNewWidth(state.startWidth, delta, minWidth);\n  setCellWidth(state.resizingCell, newWidth);\n}\n","@use \"./mixins\" as *;\n\nnv-table {\n  table {\n    @include table-styles();\n  }\n\n  [data-sticky-left] {\n    @include sticky-styles('left');\n  }\n\n  [data-sticky-right] {\n    @include sticky-styles('right');\n  }\n\n  [data-sticky-top] {\n    th {\n      @include sticky-styles('top');\n    }\n  }\n}\n","/* eslint-disable @stencil-community/prefer-vdom-listener */\n\n// Useful link for styling help ->\n// https://css-tricks.com/complete-guide-table-element/\n\nimport { Component, Host, h, Listen, Element } from '@stencil/core';\nimport {\n  TABLE_CONSTANTS,\n  ResizeState,\n  getHandleWidthForCurrentPointer,\n  getClosestTableCell,\n  getPointerOffsetInCell,\n  isInResizeHandle,\n  createResizeState,\n  isValidResizeState,\n  updateCellWidthFromResize,\n  setPointerCapture,\n  releasePointerCapture,\n  setUserSelectPrevention,\n  getCellWidth,\n} from './nv-table.utils';\n\n/**\n * @slot default - Child content of the component.\n */\n@Component({\n  tag: 'nv-table',\n  styleUrl: 'styles/nv-table.scss',\n  shadow: false,\n})\nexport class NvTable {\n  @Element() host!: HTMLNvTableElement;\n\n  private resizeState: ResizeState | null = null;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  @Listen('pointerdown')\n  onPointerDown(ev: PointerEvent) {\n    const th = getClosestTableCell(ev.target);\n    if (!th) return;\n\n    // Skip resize if the cell has data-no-resize attribute\n    if (th.hasAttribute('data-no-resize')) return;\n\n    const offsetX = getPointerOffsetInCell(ev, th);\n    const handleWidth = getHandleWidthForCurrentPointer();\n    const cellWidth = getCellWidth(th);\n\n    // Start only if we're in the resize handle area\n    if (!isInResizeHandle(offsetX, cellWidth, handleWidth)) return;\n\n    this.resizeState = createResizeState(th, ev);\n\n    // Capture so move/up still fire even if the finger leaves the th\n    setPointerCapture(th, ev.pointerId);\n\n    // Prevent scrolling/selection during drag\n    setUserSelectPrevention(true);\n  }\n\n  @Listen('pointermove', { target: 'window' })\n  onPointerMove(ev: PointerEvent) {\n    if (!isValidResizeState(this.resizeState, ev)) return;\n\n    updateCellWidthFromResize(this.resizeState!, ev, TABLE_CONSTANTS.MIN_W);\n  }\n\n  @Listen('pointerup', { target: 'window' })\n  @Listen('pointercancel', { target: 'window' })\n  onPointerUp(ev: PointerEvent) {\n    if (!isValidResizeState(this.resizeState, ev)) return;\n\n    releasePointerCapture(\n      this.resizeState!.resizingCell,\n      this.resizeState!.pointerId,\n    );\n    this.resizeState = null;\n    setUserSelectPrevention(false);\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"nv-table.entry.esm.js","sources":["src/components/nv-table/nv-table.utils.ts","src/components/nv-table/styles/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["/**\n * Table utility functions and constants for nv-table component\n *\n * This module contains pure utility functions for table column resizing logic,\n * pointer event handling calculations, and related helper functions.\n */\n\n/**\n * Constants for table column resizing behavior\n */\nexport const TABLE_CONSTANTS = Object.freeze({\n  /** Handle width for fine pointers (mouse) in pixels */\n  HANDLE_W: 12,\n  /** Handle width for coarse pointers (touch) in pixels */\n  HANDLE_W_TOUCH: 24,\n  /** Minimum column width in pixels */\n  MIN_W: 40,\n} as const);\n\n/**\n * Determines the appropriate handle width based on the current pointer type\n * @returns {number} Handle width in pixels (10px for fine pointers, 24px for coarse/touch)\n */\nexport function getHandleWidthForCurrentPointer(): number {\n  // Match the CSS media query: wider handle on coarse pointers (touch)\n  return matchMedia('(pointer: coarse)').matches\n    ? TABLE_CONSTANTS.HANDLE_W_TOUCH\n    : TABLE_CONSTANTS.HANDLE_W;\n}\n\n/**\n * Calculates the pointer's horizontal offset within a table cell\n * @param {PointerEvent} event - The pointer event\n * @param {HTMLTableCellElement} cell - The table cell element\n * @returns {number} The horizontal offset from the left edge of the cell\n */\nexport function getPointerOffsetInCell(\n  event: PointerEvent,\n  cell: HTMLTableCellElement,\n): number {\n  const rect = cell.getBoundingClientRect();\n  return event.clientX - rect.left;\n}\n\n/**\n * Determines if the pointer is within the resize handle area of a table cell\n * @param {number} offsetX - Horizontal offset within the cell\n * @param {number} cellWidth - Total width of the cell\n * @param {number} handleWidth - Width of the resize handle area\n * @returns {boolean} True if the pointer is in the resize handle area\n */\nexport function isInResizeHandle(\n  offsetX: number,\n  cellWidth: number,\n  handleWidth: number,\n): boolean {\n  return offsetX >= cellWidth - handleWidth;\n}\n\n/**\n * Calculates the new column width based on resize delta and constraints\n * @param {number} startWidth - Original width of the column\n * @param {number} delta - Change in pixels from the start position\n * @param {number} minWidth - Minimum allowed width for the column\n * @returns {number} The calculated new width, constrained by minimum\n */\nexport function calculateNewWidth(\n  startWidth: number,\n  delta: number,\n  minWidth: number = TABLE_CONSTANTS.MIN_W,\n): number {\n  return Math.max(minWidth, startWidth + delta);\n}\n\n/**\n * Validates that a table cell element is suitable for resizing\n * @param {HTMLElement | null} element - The element to check\n * @returns {element is HTMLTableCellElement} Type guard for table cell elements\n */\nexport function isValidTableCell(\n  element: HTMLElement | null,\n): element is HTMLTableCellElement {\n  return element?.tagName === 'TH' || element?.tagName === 'TD';\n}\n\n/**\n * Finds the closest table cell element from an event target\n * @param {EventTarget | null} target - The event target\n * @returns {HTMLTableCellElement | null} The closest table cell or null\n */\nexport function getClosestTableCell(\n  target: EventTarget | null,\n): HTMLTableCellElement | null {\n  if (!(target instanceof HTMLElement)) return null;\n\n  const cell = target.closest('th, td') as HTMLTableCellElement | null;\n  return isValidTableCell(cell) ? cell : null;\n}\n\n/**\n * Sets up pointer capture for consistent drag behavior across browsers\n * @param {HTMLTableCellElement} cell - The table cell element\n * @param {number} pointerId - The pointer ID from the pointer event\n * @returns {boolean} True if capture was successfully set\n */\nexport function setPointerCapture(\n  cell: HTMLTableCellElement,\n  pointerId: number,\n): boolean {\n  try {\n    cell.setPointerCapture?.(pointerId);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Releases pointer capture\n * @param {HTMLTableCellElement} cell - The table cell element\n * @param {number} pointerId - The pointer ID from the pointer event\n * @returns {boolean} True if release was successful\n */\nexport function releasePointerCapture(\n  cell: HTMLTableCellElement,\n  pointerId: number,\n): boolean {\n  try {\n    cell.releasePointerCapture?.(pointerId);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Prevents text selection during drag operations\n * @param {boolean} prevent - Whether to prevent selection\n */\nexport function setUserSelectPrevention(prevent: boolean): void {\n  document.body.style.userSelect = prevent ? 'none' : '';\n}\n\n/**\n * Gets the current width of a table cell element\n * @param {HTMLTableCellElement} cell - The table cell element\n * @returns {number} The current width in pixels\n */\nexport function getCellWidth(cell: HTMLTableCellElement): number {\n  return cell.offsetWidth;\n}\n\n/**\n * Applies a width to a table cell element\n * @param {HTMLTableCellElement} cell - The table cell element\n * @param {number} width - The width to apply in pixels\n */\nexport function setCellWidth(cell: HTMLTableCellElement, width: number): void {\n  cell.style.width = `${width}px`;\n}\n\n/**\n * Calculates the delta (change) in horizontal position between two pointer events\n * @param {number} currentX - Current clientX position\n * @param {number} startX - Starting clientX position\n * @returns {number} The horizontal delta\n */\nexport function calculatePointerDelta(\n  currentX: number,\n  startX: number,\n): number {\n  return currentX - startX;\n}\n\n/**\n * Interface for resize operation state\n */\nexport interface ResizeState {\n  /** The table cell being resized */\n  resizingCell: HTMLTableCellElement;\n  /** The pointer ID for this resize operation */\n  pointerId: number;\n  /** Starting X coordinate */\n  startX: number;\n  /** Starting width of the cell */\n  startWidth: number;\n}\n\n/**\n * Creates a new resize state object\n * @param {HTMLTableCellElement} cell - The cell being resized\n * @param {PointerEvent} event - The initiating pointer event\n * @returns {ResizeState} A new resize state object\n */\nexport function createResizeState(\n  cell: HTMLTableCellElement,\n  event: PointerEvent,\n): ResizeState {\n  return {\n    resizingCell: cell,\n    pointerId: event.pointerId,\n    startX: event.clientX,\n    startWidth: getCellWidth(cell),\n  };\n}\n\n/**\n * Validates that a resize state is active and matches the given pointer event\n * @param {ResizeState | null} state - The current resize state\n * @param {PointerEvent} event - The pointer event to validate against\n * @returns {boolean} True if the state is valid for this event\n */\nexport function isValidResizeState(\n  state: ResizeState | null,\n  event: PointerEvent,\n): boolean {\n  return state !== null && state.pointerId === event.pointerId;\n}\n\n/**\n * Updates the width of a cell during a resize operation\n * @param {ResizeState} state - The current resize state\n * @param {PointerEvent} event - The current pointer event\n * @param {number} minWidth - Minimum width constraint\n */\nexport function updateCellWidthFromResize(\n  state: ResizeState,\n  event: PointerEvent,\n  minWidth: number = TABLE_CONSTANTS.MIN_W,\n): void {\n  const delta = calculatePointerDelta(event.clientX, state.startX);\n  const newWidth = calculateNewWidth(state.startWidth, delta, minWidth);\n  setCellWidth(state.resizingCell, newWidth);\n}\n","@use \"./mixins\" as *;\n\nnv-table {\n  table {\n    @include table-styles();\n  }\n\n  [data-sticky-left] {\n    @include sticky-styles('left');\n  }\n\n  [data-sticky-right] {\n    @include sticky-styles('right');\n  }\n\n  [data-sticky-top] {\n    th {\n      @include sticky-styles('top');\n    }\n  }\n}\n","/* eslint-disable @stencil-community/prefer-vdom-listener */\n\n// Useful link for styling help ->\n// https://css-tricks.com/complete-guide-table-element/\n\nimport { Component, Host, h, Listen, Element } from '@stencil/core';\nimport {\n  TABLE_CONSTANTS,\n  ResizeState,\n  getHandleWidthForCurrentPointer,\n  getClosestTableCell,\n  getPointerOffsetInCell,\n  isInResizeHandle,\n  createResizeState,\n  isValidResizeState,\n  updateCellWidthFromResize,\n  setPointerCapture,\n  releasePointerCapture,\n  setUserSelectPrevention,\n  getCellWidth,\n} from './nv-table.utils';\n\n/**\n * @slot default - Child content of the component.\n */\n@Component({\n  tag: 'nv-table',\n  styleUrl: 'styles/nv-table.scss',\n  shadow: false,\n})\nexport class NvTable {\n  @Element() host!: HTMLNvTableElement;\n\n  private resizeState: ResizeState | null = null;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  @Listen('pointerdown')\n  onPointerDown(ev: PointerEvent) {\n    const th = getClosestTableCell(ev.target);\n    if (!th) return;\n\n    // Skip resize if the cell has data-no-resize attribute\n    if (th.hasAttribute('data-no-resize')) return;\n\n    const offsetX = getPointerOffsetInCell(ev, th);\n    const handleWidth = getHandleWidthForCurrentPointer();\n    const cellWidth = getCellWidth(th);\n\n    // Start only if we're in the resize handle area\n    if (!isInResizeHandle(offsetX, cellWidth, handleWidth)) return;\n\n    this.resizeState = createResizeState(th, ev);\n\n    // Capture so move/up still fire even if the finger leaves the th\n    setPointerCapture(th, ev.pointerId);\n\n    // Prevent scrolling/selection during drag\n    setUserSelectPrevention(true);\n  }\n\n  @Listen('pointermove', { target: 'window' })\n  onPointerMove(ev: PointerEvent) {\n    if (!isValidResizeState(this.resizeState, ev)) return;\n\n    updateCellWidthFromResize(this.resizeState!, ev, TABLE_CONSTANTS.MIN_W);\n  }\n\n  @Listen('pointerup', { target: 'window' })\n  @Listen('pointercancel', { target: 'window' })\n  onPointerUp(ev: PointerEvent) {\n    if (!isValidResizeState(this.resizeState, ev)) return;\n\n    releasePointerCapture(\n      this.resizeState!.resizingCell,\n      this.resizeState!.pointerId,\n    );\n    this.resizeState = null;\n    setUserSelectPrevention(false);\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"names":[],"mappings":"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"}

package/dist/native/nv-tableheader.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-tableheader.entry.esm.js","sources":["src/components/nv-tableheader/nv-tableheader.scss?tag=nv-tableheader","src/components/nv-tableheader/nv-tableheader.tsx"],"sourcesContent":["// include focus ring\n@use \"../../styles/focus-ring\" as focus;\n\n@mixin root-styles() {\n  display: inline-flex;\n  width: 100%;\n  align-items: center;\n  gap: var(--spacing-2);\n}\n\n@mixin focus-styles() {\n  @include focus.focus-ring();\n  border-radius: var(--radius-rounded-sm);\n}\n\n@mixin nv-icon-styles() {\n  transition: transform 120ms ease, opacity 120ms ease;\n  svg {\n    transition: transform 240ms ease;\n  }\n  &.is-none { opacity: .5; }\n  &.is-desc {\n    svg {\n      transform: rotate(180deg);\n    }\n  }\n}\n\nnv-tableheader {\n  @include root-styles();\n\n  &:focus-visible {\n    @include focus-styles();\n  }\n\n  nv-iconbutton {\n    @include nv-icon-styles();\n  }\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot default - Child content of the component.\n */\n@Component({\n  tag: 'nv-tableheader',\n  styleUrl: 'nv-tableheader.scss',\n  shadow: false,\n})\nexport class NvTableheader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Will render the header as sortable with the corresponding icon button.\n   * Allows the header to be tabbed, and trigger sorting via click or keyboard\n   * navigation\n   */\n  @Prop({ reflect: true })\n  readonly sortable: boolean = false;\n\n  /**\n   * The current sort direction of the header. Will be 'none' if the header is\n   * not sortable or if the sort direction is not set.\n   */\n  @Prop({ reflect: true, mutable: true })\n  sortDirection: 'none' | 'asc' | 'desc' = 'none';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  private cycleSortDirection(e?: Event) {\n    if (!this.sortable) return;\n    e?.preventDefault();\n\n    const next = {\n      none: 'asc',\n      asc: 'desc',\n      desc: 'none',\n    } as const;\n\n    this.sortDirection = next[this.sortDirection];\n    this.sortDirectionChanged.emit(this.sortDirection);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (!this.sortable) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.cycleSortDirection();\n    }\n  }\n\n  get ariaSort() {\n    const sortMap = {\n      none: 'none',\n      asc: 'ascending',\n      desc: 'descending',\n    } as const;\n\n    if (!this.sortable) return sortMap.none;\n    return sortMap[this.sortDirection];\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the sort direction changes. Payload is the new sort\n   * direction.\n   */\n  @Event({ bubbles: false })\n  sortDirectionChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"columnheader\"\n        aria-sort={this.ariaSort}\n        tabindex={this.sortable ? 0 : undefined}\n        onKeyDown={this.handleKeyDown.bind(this)}\n        onClick={this.cycleSortDirection.bind(this)}\n      >\n        <slot></slot>\n\n        {this.sortable && (\n          <span class=\"sort-icon-wrap\" aria-hidden=\"true\">\n            <nv-iconbutton\n              disableTabindex\n              name=\"arrow-up\"\n              size=\"xs\"\n              emphasis={this.sortDirection === 'none' ? 'lower' : 'low'}\n              // prevent mousedown from selecting text\n              onMouseDown={(e: MouseEvent) => e.preventDefault()}\n              class={{\n                'is-none': this.sortDirection === 'none',\n                'is-desc': this.sortDirection === 'desc',\n              }}\n            />\n          </span>\n        )}\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,ytBAAytB;;MCUruB,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AASE;;;;AAIG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElC;;;AAGG;AAEH,QAAA,IAAa,CAAA,aAAA,GAA4B,MAAM;AA2FhD;;;;AArFS,IAAA,kBAAkB,CAAC,CAAS,EAAA;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;AACpB,QAAA,CAAC,aAAD,CAAC,KAAA,MAAA,GAAA,MAAA,GAAD,CAAC,CAAE,cAAc,EAAE;AAEnB,QAAA,MAAM,IAAI,GAAG;AACX,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,IAAI,EAAE,MAAM;SACJ;QAEV,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QAC7C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAG5C,IAAA,aAAa,CAAC,KAAoB,EAAA;QACxC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;AACpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,kBAAkB,EAAE;;;AAI7B,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,GAAG,EAAE,WAAW;AAChB,YAAA,IAAI,EAAE,YAAY;SACV;QAEV,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,OAAO,CAAC,IAAI;AACvC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;IAwBpC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,QAAQ,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,SAAS,EACvC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAE3C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,6DAAM,KAAK,EAAC,gBAAgB,EAAA,aAAA,EAAa,MAAM,EAAA,EAC7C,CACE,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAe,EACf,IAAA,EAAA,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,GAAG,OAAO,GAAG,KAAK;;AAEzD,YAAA,WAAW,EAAE,CAAC,CAAa,KAAK,CAAC,CAAC,cAAc,EAAE,EAClD,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;AACxC,gBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;AACzC,aAAA,EAAA,CACD,CACG,CACR,CACI;;;;;;;"}
+{"version":3,"file":"nv-tableheader.entry.esm.js","sources":["src/components/nv-tableheader/nv-tableheader.scss?tag=nv-tableheader","src/components/nv-tableheader/nv-tableheader.tsx"],"sourcesContent":["// include focus ring\n@use \"../../styles/focus-ring\" as focus;\n\n@mixin root-styles() {\n  display: inline-flex;\n  width: 100%;\n  align-items: center;\n  gap: var(--spacing-2);\n}\n\n@mixin focus-styles() {\n  @include focus.focus-ring();\n  border-radius: var(--radius-rounded-sm);\n}\n\n@mixin nv-icon-styles() {\n  transition: transform 120ms ease, opacity 120ms ease;\n  svg {\n    transition: transform 240ms ease;\n  }\n  &.is-none { opacity: .5; }\n  &.is-desc {\n    svg {\n      transform: rotate(180deg);\n    }\n  }\n}\n\nnv-tableheader {\n  @include root-styles();\n\n  &:focus-visible {\n    @include focus-styles();\n  }\n\n  nv-iconbutton {\n    @include nv-icon-styles();\n  }\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot default - Child content of the component.\n */\n@Component({\n  tag: 'nv-tableheader',\n  styleUrl: 'nv-tableheader.scss',\n  shadow: false,\n})\nexport class NvTableheader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Will render the header as sortable with the corresponding icon button.\n   * Allows the header to be tabbed, and trigger sorting via click or keyboard\n   * navigation\n   */\n  @Prop({ reflect: true })\n  readonly sortable: boolean = false;\n\n  /**\n   * The current sort direction of the header. Will be 'none' if the header is\n   * not sortable or if the sort direction is not set.\n   */\n  @Prop({ reflect: true, mutable: true })\n  sortDirection: 'none' | 'asc' | 'desc' = 'none';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  private cycleSortDirection(e?: Event) {\n    if (!this.sortable) return;\n    e?.preventDefault();\n\n    const next = {\n      none: 'asc',\n      asc: 'desc',\n      desc: 'none',\n    } as const;\n\n    this.sortDirection = next[this.sortDirection];\n    this.sortDirectionChanged.emit(this.sortDirection);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (!this.sortable) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.cycleSortDirection();\n    }\n  }\n\n  get ariaSort() {\n    const sortMap = {\n      none: 'none',\n      asc: 'ascending',\n      desc: 'descending',\n    } as const;\n\n    if (!this.sortable) return sortMap.none;\n    return sortMap[this.sortDirection];\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the sort direction changes. Payload is the new sort\n   * direction.\n   */\n  @Event({ bubbles: false })\n  sortDirectionChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"columnheader\"\n        aria-sort={this.ariaSort}\n        tabindex={this.sortable ? 0 : undefined}\n        onKeyDown={this.handleKeyDown.bind(this)}\n        onClick={this.cycleSortDirection.bind(this)}\n      >\n        <slot></slot>\n\n        {this.sortable && (\n          <span class=\"sort-icon-wrap\" aria-hidden=\"true\">\n            <nv-iconbutton\n              disableTabindex\n              name=\"arrow-up\"\n              size=\"xs\"\n              emphasis={this.sortDirection === 'none' ? 'lower' : 'low'}\n              // prevent mousedown from selecting text\n              onMouseDown={(e: MouseEvent) => e.preventDefault()}\n              class={{\n                'is-none': this.sortDirection === 'none',\n                'is-desc': this.sortDirection === 'desc',\n              }}\n            />\n          </span>\n        )}\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,ytBAAytB;;MCUruB,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AASE;;;;AAIG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElC;;;AAGG;AAEH,QAAA,IAAa,CAAA,aAAA,GAA4B,MAAM;AA2FhD;;;;AArFS,IAAA,kBAAkB,CAAC,CAAS,EAAA;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;QACpB,CAAC,EAAE,cAAc,EAAE;AAEnB,QAAA,MAAM,IAAI,GAAG;AACX,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,IAAI,EAAE,MAAM;SACJ;QAEV,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QAC7C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAG5C,IAAA,aAAa,CAAC,KAAoB,EAAA;QACxC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;AACpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,kBAAkB,EAAE;;;AAI7B,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,GAAG,EAAE,WAAW;AAChB,YAAA,IAAI,EAAE,YAAY;SACV;QAEV,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,OAAO,CAAC,IAAI;AACvC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;IAwBpC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,QAAQ,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,SAAS,EACvC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAE3C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,6DAAM,KAAK,EAAC,gBAAgB,EAAA,aAAA,EAAa,MAAM,EAAA,EAC7C,CACE,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAe,EACf,IAAA,EAAA,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,GAAG,OAAO,GAAG,KAAK;;AAEzD,YAAA,WAAW,EAAE,CAAC,CAAa,KAAK,CAAC,CAAC,cAAc,EAAE,EAClD,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;AACxC,gBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;AACzC,aAAA,EAAA,CACD,CACG,CACR,CACI;;;;;;;"}

package/dist/native/nv-togglebutton.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-togglebutton.entry.esm.js","sources":["src/components/nv-togglebutton/styles/nv-togglebutton.scss?tag=nv-togglebutton","src/components/nv-togglebutton/nv-togglebutton.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebutton {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n        @include button-size-styles($size);\n        @include togglegroup-button-size-styles($size);\n    }\n  }\n\n  &[emphasis=\"high\"] {\n    @include button-emphasis-styles('low');\n    &[active]:not([active=\"false\"]) {\n      @include button-active-styles('low');\n    }\n  }\n  &[emphasis=\"low\"] {\n    @include button-emphasis-styles('lower');\n    &[active]:not([active=\"false\"]), &:active {\n      @include button-hover-styles('lower');\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  Element,\n  Listen,\n  EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the toggle button.\n */\n@Component({\n  tag: 'nv-togglebutton',\n  styleUrl: 'styles/nv-togglebutton.scss',\n  shadow: false,\n})\nexport class NvTogglebutton {\n  @Element() el: HTMLNvTogglebuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the togglebutton appears, allowing for\n   * customization of the togglebutton's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ToggleButtonSize}` = 'md';\n\n  /**\n   * The value to associated with the button when selected in a\n   * Togglebuttongroup.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Prevents all interaction, rendering the toggle in a non-interactive state.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Whether the button is active or not. Will not toggle automatically but\n   * needs to be controlled externally.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Make it more or less visually prominent to users.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    this.toggled.emit({\n      value: this.value,\n      active: this.active,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /* eslint-disable nova/event-bubbling */\n  /**\n   * Emitted when the button is toggled. Will bubble up so that the\n   * nv-togglebuttongroup can update the state.\n   */\n  @Event({ eventName: 'toggled', bubbles: true })\n  toggled: EventEmitter<{\n    /** The value associated with the button. */\n    value: string;\n    /** If the button is active when clicked. */\n    active: boolean;\n  }>;\n  /* eslint-enable nova/event-bubbling */\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        tabindex=\"0\"\n        aria-pressed={String(this.active)}\n        onClick={this.handleClick}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,+5JAA+5J;;MCoB56J,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAWE;;;;AAIG;AAEM,QAAA,IAAI,CAAA,IAAA,GAA0B,IAAI;AAS3C;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElC;;;AAGG;AAEM,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhC;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAA8B,MAAM;;;;AAM7C,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;AACpB,aAAA,CAAC;AACJ,SAAC;AAgDF;;;;AAzCC,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;;;;;;;IAyBnB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}
+{"version":3,"file":"nv-togglebutton.entry.esm.js","sources":["src/components/nv-togglebutton/styles/nv-togglebutton.scss?tag=nv-togglebutton","src/components/nv-togglebutton/nv-togglebutton.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebutton {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n        @include button-size-styles($size);\n        @include togglegroup-button-size-styles($size);\n    }\n  }\n\n  &[emphasis=\"high\"] {\n    @include button-emphasis-styles('low');\n    &[active]:not([active=\"false\"]) {\n      @include button-active-styles('low');\n    }\n  }\n  &[emphasis=\"low\"] {\n    @include button-emphasis-styles('lower');\n    &[active]:not([active=\"false\"]), &:active {\n      @include button-hover-styles('lower');\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  Element,\n  Listen,\n  EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the toggle button.\n */\n@Component({\n  tag: 'nv-togglebutton',\n  styleUrl: 'styles/nv-togglebutton.scss',\n  shadow: false,\n})\nexport class NvTogglebutton {\n  @Element() el: HTMLNvTogglebuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the togglebutton appears, allowing for\n   * customization of the togglebutton's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ToggleButtonSize}` = 'md';\n\n  /**\n   * The value to associated with the button when selected in a\n   * Togglebuttongroup.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Prevents all interaction, rendering the toggle in a non-interactive state.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Whether the button is active or not. Will not toggle automatically but\n   * needs to be controlled externally.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Make it more or less visually prominent to users.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    this.toggled.emit({\n      value: this.value,\n      active: this.active,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /* eslint-disable nova/event-bubbling */\n  /**\n   * Emitted when the button is toggled. Will bubble up so that the\n   * nv-togglebuttongroup can update the state.\n   */\n  @Event({ eventName: 'toggled', bubbles: true })\n  toggled: EventEmitter<{\n    /** The value associated with the button. */\n    value: string;\n    /** If the button is active when clicked. */\n    active: boolean;\n  }>;\n  /* eslint-enable nova/event-bubbling */\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        tabindex=\"0\"\n        aria-pressed={String(this.active)}\n        onClick={this.handleClick}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,+4KAA+4K;;MCoB55K,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAWE;;;;AAIG;AAEM,QAAA,IAAI,CAAA,IAAA,GAA0B,IAAI;AAS3C;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElC;;;AAGG;AAEM,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhC;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAA8B,MAAM;;;;AAM7C,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;AACpB,aAAA,CAAC;AACJ,SAAC;AAgDF;;;;AAzCC,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;;;;;;;IAyBnB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}

package/dist/native/nv-togglebuttongroup.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-togglebuttongroup.entry.esm.js","sources":["src/components/nv-togglebuttongroup/styles/nv-togglebuttongroup.scss?tag=nv-togglebuttongroup","src/components/nv-togglebuttongroup/nv-togglebuttongroup.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebuttongroup {\n  @include root-styles();\n\n  &[emphasis=\"high\"] {\n    @include high-emphasis-styles();\n  }\n  &[emphasis=\"low\"] {\n    @include low-emphasis-styles();\n  }\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n      \n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the component, pass the nv-togglebutton components here.\n */\n@Component({\n  tag: 'nv-togglebuttongroup',\n  styleUrl: 'styles/nv-togglebuttongroup.scss',\n  shadow: false,\n})\nexport class NvTogglebuttongroup {\n  @Element() el!: HTMLNvTogglebuttongroupElement;\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The active toggle buttons in the group. Is an array of one string when in\n   * exclusive mode, and an array of strings when in non-exclusive mode.\n   */\n  @Prop({ reflect: false, mutable: true })\n  value: string[];\n\n  /**\n   * Activates single-selection mode so only one button can be active at a time.\n   */\n  @Prop({ reflect: true })\n  readonly exclusive: boolean = false;\n\n  /**\n   * Ensures at least one toggle stays selected at all times.\n   */\n  @Prop({ reflect: true })\n  readonly enforceValue: boolean = false;\n\n  /**\n   * Make it more or less visually prominent to users.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n  /**\n   * Determines how large or small the togglebutton appears, allowing for\n   * customization of the togglebutton's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ToggleButtonSize}` = 'md';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Sets the active state of all toggle buttons depending on the value of the\n   * group.\n   */\n  private setActiveToggleButtons = () => {\n    this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n      const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n      if (!btn) return;\n      btn.active = (this.value ?? []).includes(btn.value);\n    });\n  };\n\n  /**\n   * Sets the emphasis of all toggle buttons to the same value.\n   */\n  private setEmphasisToggleButtons = () => {\n    this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n      const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n      if (!btn) return;\n      btn.emphasis = this.emphasis;\n    });\n  };\n\n  /**\n   * Sets the size of all toggle buttons to the same value.\n   */\n  private setSizeToggleButtons = () => {\n    this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n      const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n      if (!btn) return;\n      btn.size = this.size;\n    });\n  };\n\n  /**\n   * Sets up the MutationObserver to watch for changes in child elements\n   */\n  private setupMutationObserver = (): void => {\n    this.mutationObserver = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\n          this.setEmphasisToggleButtons();\n          this.setSizeToggleButtons();\n        }\n      });\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  };\n\n  /**\n   * Narrow Type used locally to interact with nv-togglebutton child elements.\n   * @param {Element} element - The element to check.\n   * @returns {(HTMLElement & {\n   *   active: boolean;\n   *   value: string;\n   *   emphasis: `${ToggleButtonEmphasis}`;\n   *   size: `${ToggleButtonSize}`;\n   * }) | null} The element as a toggle button, or null if it is not a toggle button.\n   */\n  private static asToggleButton(element: Element):\n    | (HTMLElement & {\n        /**\n         * Whether the button is active or not. Will not toggle automatically but\n         * needs to be controlled externally.\n         */\n        active: boolean;\n        /**\n         * The value to associated with the button when selected in a\n         * Togglebuttongroup.\n         */\n        value: string;\n        /**\n         * Make it more or less visually prominent to users.\n         */\n        emphasis: `${ToggleButtonEmphasis}`;\n        /**\n         * Determines how large or small the togglebutton appears, allowing for\n         * customization of the togglebutton's dimensions to fit different design\n         * specifications and user needs.\n         */\n        size: `${ToggleButtonSize}`;\n      })\n    | null {\n    return element instanceof HTMLElement\n      ? (element as unknown as HTMLElement & {\n          /**\n           * Whether the button is active or not. Will not toggle automatically but\n           * needs to be controlled externally.\n           */\n          active: boolean;\n          /**\n           * The value to associated with the button when selected in a\n           * Togglebuttongroup.\n           */\n          value: string;\n          /**\n           * Make it more or less visually prominent to users.\n           */\n          emphasis: `${ToggleButtonEmphasis}`;\n          /**\n           * Determines how large or small the togglebutton appears, allowing for\n           * customization of the togglebutton's dimensions to fit different design\n           * specifications and user needs.\n           */\n          size: `${ToggleButtonSize}`;\n        })\n      : null;\n  }\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  onValueChanged(newValue: typeof this.value) {\n    this.setActiveToggleButtons();\n    this.valueChanged.emit(newValue);\n  }\n\n  @Watch('emphasis')\n  onEmphasisChanged() {\n    this.setEmphasisToggleButtons();\n  }\n\n  @Watch('size')\n  onSizeChanged() {\n    this.setSizeToggleButtons();\n  }\n\n  /* eslint-disable nova/native-event-listener */\n  @Listen('toggled')\n  onToggled(event: CustomEvent<HTMLNvTogglebuttonElementEventMap['toggled']>) {\n    event.stopPropagation();\n\n    const valueSet = new Set(this.value);\n\n    if (this.exclusive && this.enforceValue) {\n      this.value = [event.detail.value];\n      return;\n    }\n\n    if (this.exclusive) {\n      if (valueSet.has(event.detail.value)) {\n        this.value = [];\n      } else {\n        this.value = [event.detail.value];\n      }\n      return;\n    }\n\n    toggle: if (event.detail.active) {\n      if (this.enforceValue && valueSet.size === 1) break toggle;\n      valueSet.delete(event.detail.value);\n    } else {\n      valueSet.add(event.detail.value);\n    }\n    this.value = [...valueSet];\n  }\n  /* eslint-enable nova/native-event-listener */\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.setActiveToggleButtons();\n    this.setEmphasisToggleButtons();\n    this.setSizeToggleButtons();\n    this.setupMutationObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the selected toggle buttons change.\n   * @bind value\n   */\n  @Event({ bubbles: false })\n  valueChanged: EventEmitter<string[]>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"nv-togglebuttongroup.entry.esm.js","sources":["src/components/nv-togglebuttongroup/styles/nv-togglebuttongroup.scss?tag=nv-togglebuttongroup","src/components/nv-togglebuttongroup/nv-togglebuttongroup.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebuttongroup {\n  @include root-styles();\n\n  &[emphasis=\"high\"] {\n    @include high-emphasis-styles();\n  }\n  &[emphasis=\"low\"] {\n    @include low-emphasis-styles();\n  }\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n      \n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the component, pass the nv-togglebutton components here.\n */\n@Component({\n  tag: 'nv-togglebuttongroup',\n  styleUrl: 'styles/nv-togglebuttongroup.scss',\n  shadow: false,\n})\nexport class NvTogglebuttongroup {\n  @Element() el!: HTMLNvTogglebuttongroupElement;\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The active toggle buttons in the group. Is an array of one string when in\n   * exclusive mode, and an array of strings when in non-exclusive mode.\n   */\n  @Prop({ reflect: false, mutable: true })\n  value: string[];\n\n  /**\n   * Activates single-selection mode so only one button can be active at a time.\n   */\n  @Prop({ reflect: true })\n  readonly exclusive: boolean = false;\n\n  /**\n   * Ensures at least one toggle stays selected at all times.\n   */\n  @Prop({ reflect: true })\n  readonly enforceValue: boolean = false;\n\n  /**\n   * Make it more or less visually prominent to users.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n  /**\n   * Determines how large or small the togglebutton appears, allowing for\n   * customization of the togglebutton's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ToggleButtonSize}` = 'md';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Sets the active state of all toggle buttons depending on the value of the\n   * group.\n   */\n  private setActiveToggleButtons = () => {\n    this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n      const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n      if (!btn) return;\n      btn.active = (this.value ?? []).includes(btn.value);\n    });\n  };\n\n  /**\n   * Sets the emphasis of all toggle buttons to the same value.\n   */\n  private setEmphasisToggleButtons = () => {\n    this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n      const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n      if (!btn) return;\n      btn.emphasis = this.emphasis;\n    });\n  };\n\n  /**\n   * Sets the size of all toggle buttons to the same value.\n   */\n  private setSizeToggleButtons = () => {\n    this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n      const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n      if (!btn) return;\n      btn.size = this.size;\n    });\n  };\n\n  /**\n   * Sets up the MutationObserver to watch for changes in child elements\n   */\n  private setupMutationObserver = (): void => {\n    this.mutationObserver = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\n          this.setEmphasisToggleButtons();\n          this.setSizeToggleButtons();\n        }\n      });\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  };\n\n  /**\n   * Narrow Type used locally to interact with nv-togglebutton child elements.\n   * @param {Element} element - The element to check.\n   * @returns {(HTMLElement & {\n   *   active: boolean;\n   *   value: string;\n   *   emphasis: `${ToggleButtonEmphasis}`;\n   *   size: `${ToggleButtonSize}`;\n   * }) | null} The element as a toggle button, or null if it is not a toggle button.\n   */\n  private static asToggleButton(element: Element):\n    | (HTMLElement & {\n        /**\n         * Whether the button is active or not. Will not toggle automatically but\n         * needs to be controlled externally.\n         */\n        active: boolean;\n        /**\n         * The value to associated with the button when selected in a\n         * Togglebuttongroup.\n         */\n        value: string;\n        /**\n         * Make it more or less visually prominent to users.\n         */\n        emphasis: `${ToggleButtonEmphasis}`;\n        /**\n         * Determines how large or small the togglebutton appears, allowing for\n         * customization of the togglebutton's dimensions to fit different design\n         * specifications and user needs.\n         */\n        size: `${ToggleButtonSize}`;\n      })\n    | null {\n    return element instanceof HTMLElement\n      ? (element as unknown as HTMLElement & {\n          /**\n           * Whether the button is active or not. Will not toggle automatically but\n           * needs to be controlled externally.\n           */\n          active: boolean;\n          /**\n           * The value to associated with the button when selected in a\n           * Togglebuttongroup.\n           */\n          value: string;\n          /**\n           * Make it more or less visually prominent to users.\n           */\n          emphasis: `${ToggleButtonEmphasis}`;\n          /**\n           * Determines how large or small the togglebutton appears, allowing for\n           * customization of the togglebutton's dimensions to fit different design\n           * specifications and user needs.\n           */\n          size: `${ToggleButtonSize}`;\n        })\n      : null;\n  }\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  onValueChanged(newValue: typeof this.value) {\n    this.setActiveToggleButtons();\n    this.valueChanged.emit(newValue);\n  }\n\n  @Watch('emphasis')\n  onEmphasisChanged() {\n    this.setEmphasisToggleButtons();\n  }\n\n  @Watch('size')\n  onSizeChanged() {\n    this.setSizeToggleButtons();\n  }\n\n  /* eslint-disable nova/native-event-listener */\n  @Listen('toggled')\n  onToggled(event: CustomEvent<HTMLNvTogglebuttonElementEventMap['toggled']>) {\n    event.stopPropagation();\n\n    const valueSet = new Set(this.value);\n\n    if (this.exclusive && this.enforceValue) {\n      this.value = [event.detail.value];\n      return;\n    }\n\n    if (this.exclusive) {\n      if (valueSet.has(event.detail.value)) {\n        this.value = [];\n      } else {\n        this.value = [event.detail.value];\n      }\n      return;\n    }\n\n    toggle: if (event.detail.active) {\n      if (this.enforceValue && valueSet.size === 1) break toggle;\n      valueSet.delete(event.detail.value);\n    } else {\n      valueSet.add(event.detail.value);\n    }\n    this.value = [...valueSet];\n  }\n  /* eslint-enable nova/native-event-listener */\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.setActiveToggleButtons();\n    this.setEmphasisToggleButtons();\n    this.setSizeToggleButtons();\n    this.setupMutationObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the selected toggle buttons change.\n   * @bind value\n   */\n  @Event({ bubbles: false })\n  valueChanged: EventEmitter<string[]>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"names":[],"mappings":"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"}

package/dist/native/{p-b21e38a3.entry.js → p-04a2fe7f.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as n,H as i}from"./p-CasQushP.js";const o="nv-notificationcontainer{position:fixed;display:flex;flex-direction:column;padding:var(--spacing-2);padding-top:0;z-index:9999;pointer-events:none;width:100%;max-width:512px}nv-notificationcontainer.position-top-right{top:0;right:0}nv-notificationcontainer.position-top-right nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-top-left{top:0;left:0}nv-notificationcontainer.position-top-left nv-notification{margin-bottom:var(--spacing-2)}nv-notificationcontainer.position-top-center{top:0;left:50%;transform:translateX(-50%)}nv-notificationcontainer.position-top-center nv-notification{margin-bottom:var(--spacing-2)}nv-notificationcontainer.position-bottom-right{bottom:0;right:0;flex-direction:column-reverse}nv-notificationcontainer.position-bottom-right nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-bottom-left{bottom:0;left:0;flex-direction:column-reverse}nv-notificationcontainer.position-bottom-left nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-bottom-center{bottom:0;left:50%;transform:translateX(-50%);flex-direction:column-reverse}nv-notificationcontainer.position-bottom-center nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer>*{pointer-events:auto}";const a=class{constructor(n){t(this,n);this.position="top-right"}render(){return n(i,{key:"bf0b7cd02e0d214516f352eb7016d6060d6959c5",class:`position-${this.position}`},n("slot",{key:"f042e3f11b4d2af4b47aadeba04a332c57889616"}))}};a.style=o;export{a as nv_notificationcontainer};
-//# sourceMappingURL=p-b21e38a3.entry.js.map
+import{r as t,h as n,H as i}from"./p-CasQushP.js";const o="nv-notificationcontainer{position:fixed;display:flex;flex-direction:column;padding:var(--spacing-2);padding-top:0;z-index:9999;pointer-events:none;width:100%;max-width:512px}nv-notificationcontainer.position-top-right{top:0;right:0}nv-notificationcontainer.position-top-right nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-top-left{top:0;left:0}nv-notificationcontainer.position-top-left nv-notification{margin-bottom:var(--spacing-2)}nv-notificationcontainer.position-top-center{top:0;left:50%;transform:translateX(-50%)}nv-notificationcontainer.position-top-center nv-notification{margin-bottom:var(--spacing-2)}nv-notificationcontainer.position-bottom-right{bottom:0;right:0;flex-direction:column-reverse}nv-notificationcontainer.position-bottom-right nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-bottom-left{bottom:0;left:0;flex-direction:column-reverse}nv-notificationcontainer.position-bottom-left nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-bottom-center{bottom:0;left:50%;transform:translateX(-50%);flex-direction:column-reverse}nv-notificationcontainer.position-bottom-center nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer>*{pointer-events:auto}";const a=class{constructor(n){t(this,n);this.position="top-right"}render(){return n(i,{key:"5dee0dc22cb8917d8134e2f256996118e3e30b42",class:`position-${this.position}`},n("slot",{key:"14664d70fb1840877d80eda1b3c7804457ffa67f"}))}};a.style=o;export{a as nv_notificationcontainer};
+//# sourceMappingURL=p-04a2fe7f.entry.js.map

package/dist/native/p-08204da4.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as t,h as e,H as n,g as r}from"./p-CasQushP.js";const g="nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=xs]{padding-top:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));border-radius:var(--togglegroup-xs-button-radius);height:calc((var(--togglegroup-xs-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=sm]{padding-top:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-sm-button-radius) + 1px);height:calc((var(--togglegroup-sm-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=md]{padding-top:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-md-button-radius) + 1px);height:calc((var(--togglegroup-md-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[size=lg]{padding-top:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-lg-button-radius) + 1px);height:calc((var(--togglegroup-lg-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}";const a=class{constructor(e){o(this,e);this.toggled=t(this,"toggled",7);this.size="md";this.disabled=false;this.active=false;this.emphasis="high";this.handleClick=()=>{if(this.disabled)return;this.toggled.emit({value:this.value,active:this.active})}}handleKeyDown(o){if(o.key==="Enter"||o.key===" "){o.preventDefault();this.el.click()}}render(){return e(n,{key:"af68f5f4887be35f48bb74f15f597e7fe575b3fd",role:"button",tabindex:"0","aria-pressed":String(this.active),onClick:this.handleClick},e("slot",{key:"624ab0edc86bf9b5686f3f99097adf82ea972764"}))}get el(){return r(this)}};a.style=g;export{a as nv_togglebutton};
+//# sourceMappingURL=p-08204da4.entry.js.map

package/dist/native/{p-bd6ae5f3.entry.js.map → p-08204da4.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","createEvent","h","Host","getElement","nvTogglebuttonCss","NvTogglebutton","constructor","hostRef","this","toggled","size","disabled","active","emphasis","handleClick","emit","value","handleKeyDown","event","key","preventDefault","el","click","render","role","tabindex","String","onClick","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAaC,OAAQC,OAAWC,MAAkB,kBAEvF,MAAMC,EAAoB,g6JAE1B,MAAMC,EAAiB,MACnB,WAAAC,CAAYC,GACRR,EAAiBS,KAAMD,GACvBC,KAAKC,QAAUT,EAAYQ,KAAM,UAAW,GAQ5CA,KAAKE,KAAO,KAIZF,KAAKG,SAAW,MAKhBH,KAAKI,OAAS,MAIdJ,KAAKK,SAAW,OAIhBL,KAAKM,YAAc,KACf,GAAIN,KAAKG,SACL,OACJH,KAAKC,QAAQM,KAAK,CACdC,MAAOR,KAAKQ,MACZJ,OAAQJ,KAAKI,QACf,CAEV,CAIA,aAAAK,CAAcC,GACV,GAAIA,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC5CD,EAAME,iBACNZ,KAAKa,GAAGC,OACZ,CACJ,CAKA,MAAAC,GACI,OAAQtB,EAAEC,EAAM,CAAEiB,IAAK,2CAA4CK,KAAM,SAAUC,SAAU,IAAK,eAAgBC,OAAOlB,KAAKI,QAASe,QAASnB,KAAKM,aAAeb,EAAE,OAAQ,CAAEkB,IAAK,6CACzL,CACA,MAAIE,GAAO,OAAOlB,EAAWK,KAAO,GAExCH,EAAeuB,MAAQxB,SAEdC","ignoreList":[]}
+{"version":3,"names":["registerInstance","createEvent","h","Host","getElement","nvTogglebuttonCss","NvTogglebutton","constructor","hostRef","this","toggled","size","disabled","active","emphasis","handleClick","emit","value","handleKeyDown","event","key","preventDefault","el","click","render","role","tabindex","String","onClick","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAaC,OAAQC,OAAWC,MAAkB,kBAEvF,MAAMC,EAAoB,g5KAE1B,MAAMC,EAAiB,MACnB,WAAAC,CAAYC,GACRR,EAAiBS,KAAMD,GACvBC,KAAKC,QAAUT,EAAYQ,KAAM,UAAW,GAQ5CA,KAAKE,KAAO,KAIZF,KAAKG,SAAW,MAKhBH,KAAKI,OAAS,MAIdJ,KAAKK,SAAW,OAIhBL,KAAKM,YAAc,KACf,GAAIN,KAAKG,SACL,OACJH,KAAKC,QAAQM,KAAK,CACdC,MAAOR,KAAKQ,MACZJ,OAAQJ,KAAKI,QACf,CAEV,CAIA,aAAAK,CAAcC,GACV,GAAIA,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC5CD,EAAME,iBACNZ,KAAKa,GAAGC,OACZ,CACJ,CAKA,MAAAC,GACI,OAAQtB,EAAEC,EAAM,CAAEiB,IAAK,2CAA4CK,KAAM,SAAUC,SAAU,IAAK,eAAgBC,OAAOlB,KAAKI,QAASe,QAASnB,KAAKM,aAAeb,EAAE,OAAQ,CAAEkB,IAAK,6CACzL,CACA,MAAIE,GAAO,OAAOlB,EAAWK,KAAO,GAExCH,EAAeuB,MAAQxB,SAEdC","ignoreList":[]}