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

package/dist/cjs/nv-split.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-split.entry.cjs.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":["h","Host"],"mappings":"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"}
+{"version":3,"file":"nv-split.entry.cjs.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":["h","Host"],"mappings":"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"}

package/dist/cjs/nv-stack.cjs.entry.js

@@ -20,7 +20,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'fbdaf5b2fb134b050883a512b4aeb96b070017c1', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '6c7c231b8ff2575a1b509539d227468629fae6ab' })));
+        return (index.h(index.Host, { key: '7b44b30e42b8df1c456f70b1f3be986e2fce1617', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: 'd38b6f0c043959ed97b3e90d21309ab832713b4e' })));
     }
 };
 NvStack.style = nvStackCss;

package/dist/cjs/nv-table.cjs.entry.js

@@ -65,7 +65,7 @@ function calculateNewWidth(startWidth, delta, minWidth = TABLE_CONSTANTS.MIN_W)
  * @returns {element is HTMLTableCellElement} Type guard for table cell elements
  */
 function isValidTableCell(element) {
-    return (element === null || element === void 0 ? void 0 : element.tagName) === 'TH' || (element === null || element === void 0 ? void 0 : element.tagName) === 'TD';
+    return element?.tagName === 'TH' || element?.tagName === 'TD';
 }
 /**
  * Finds the closest table cell element from an event target
@@ -85,12 +85,11 @@ function getClosestTableCell(target) {
  * @returns {boolean} True if capture was successfully set
  */
 function setPointerCapture(cell, pointerId) {
-    var _a;
     try {
-        (_a = cell.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
+        cell.setPointerCapture?.(pointerId);
         return true;
     }
-    catch (_b) {
+    catch {
         return false;
     }
 }
@@ -101,12 +100,11 @@ function setPointerCapture(cell, pointerId) {
  * @returns {boolean} True if release was successful
  */
 function releasePointerCapture(cell, pointerId) {
-    var _a;
     try {
-        (_a = cell.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
+        cell.releasePointerCapture?.(pointerId);
         return true;
     }
-    catch (_b) {
+    catch {
         return false;
     }
 }
@@ -233,7 +231,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ec194bed7ec58642be9f6b52a737e2f9375a152e' }, index.h("slot", { key: '009ce0f20491156ca93141c85683f0be499a9938' })));
+        return (index.h(index.Host, { key: '6d13efcd059cca60b2f6bc092b75b65e36738913' }, index.h("slot", { key: '33c715acec9e561586c9059f20e77b403307c134' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/nv-table.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-table.entry.cjs.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":["h","Host"],"mappings":"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"}
+{"version":3,"file":"nv-table.entry.cjs.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":["h","Host"],"mappings":"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"}

package/dist/cjs/nv-tableheader.cjs.entry.js

@@ -28,7 +28,7 @@ const NvTableheader = class {
     cycleSortDirection(e) {
         if (!this.sortable)
             return;
-        e === null || e === void 0 ? void 0 : e.preventDefault();
+        e?.preventDefault();
         const next = {
             none: 'asc',
             asc: 'desc',
@@ -59,7 +59,7 @@ const NvTableheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '89ea12419a6f07d3b945a2dec3ca40a169d1bf85', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '447c9f44b779cb7003209c3965127433e33f1ea9' }), this.sortable && (index.h("span", { key: 'bb4d1545d83b5fd2ce0b6860cdabbe22fe0f8ed0', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '03b14162d5a1f2e8cccc5fa2e49af9cdd247d4e7', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (index.h(index.Host, { key: 'ae56ba389e554b3b555a1f29dba6a2c434e4a0ea', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '55efe6331ebcbde6b9b37f7d8dec610e444dc4b1' }), this.sortable && (index.h("span", { key: 'ecde17447218e6d462504cb10bdc8b95266ce402', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: 'c6e18e4149d2805cb16d5a79ec29db85a656b42c', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
             // prevent mousedown from selecting text
             onMouseDown: (e) => e.preventDefault(), class: {
                 'is-none': this.sortDirection === 'none',

package/dist/cjs/nv-tableheader.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-tableheader.entry.cjs.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":["h","Host"],"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,QACEA,QAACC,UAAI,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,EAE3CD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZA,mEAAM,KAAK,EAAC,gBAAgB,EAAA,aAAA,EAAa,MAAM,EAAA,EAC7CA,OACE,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.cjs.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":["h","Host"],"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,QACEA,QAACC,UAAI,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,EAE3CD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZA,mEAAM,KAAK,EAAC,gBAAgB,EAAA,aAAA,EAAa,MAAM,EAAA,EAC7CA,OACE,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/cjs/nv-toggle.cjs.entry.js

@@ -63,8 +63,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'afeeed468bea015c59cdab86f85ee3b0145f8b11', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'fd56a2b878f063549315f5b48fe1eb7b249a3503', class: "input-container" }, index.h("input", { key: '8e0a260d2c80bb303ff9b1f1921290060ef5c92c', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '906d8bd545bffcc8f2e4deee3f760ae1366aa8b2', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fa2e7120d3f8f0dedd7ef953a7648aa1dca80ec4', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '598eb4b920bbc37c6dba5862e65221b586714728', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'fb4769f30a05fe2e953759990ff8922ebc906452', class: "description" }, index.h("slot", { key: '1e847c839e147d3a9aff41296e5d1d84266be9f5', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: 'bf104d1513a3cf741c6b42ab48554c40d19263d1', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '8c7e9684887e0d454a69101fb83f290d26236841', class: "input-container" }, index.h("input", { key: '5771d8999e03247600a2b98d0eae985ff0345e28', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '8c95821037235c2eab053bce5bb7a0dc15173ea4', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '36c1d110f4c9151e1d05c665546f01f323999b15', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '4fe3f5fab8c1a20480c9eba085221afc36caae73', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '63dc983d3b09327f57bd62feb7a25865f90390a7', class: "description" }, index.h("slot", { key: 'e85b616e8bf1301e53f62a2c4e1ea87675b1dcff', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-togglebutton.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-B1na8x6M.js');
 
-const nvTogglebuttonCss = "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) - 1px);padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-xs-button-radius));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) - 1px);padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-sm-button-radius));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) - 1px);padding-bottom:calc(var(--togglegroup-md-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-md-button-radius));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) - 1px);padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-lg-button-radius));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 nvTogglebuttonCss = "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 NvTogglebutton = class {
     constructor(hostRef) {
@@ -55,7 +55,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0285637cb14c292c67d767dc83b72f52c5368269', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: 'a84f303e76070b99ff2c01e5ec400f2e78503b19' })));
+        return (index.h(index.Host, { key: 'af68f5f4887be35f48bb74f15f597e7fe575b3fd', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '624ab0edc86bf9b5686f3f99097adf82ea972764' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/nv-togglebutton.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-togglebutton.entry.cjs.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":["h","Host"],"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,QACEA,QAACC,UAAI,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,EAEzBD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}
+{"version":3,"file":"nv-togglebutton.entry.cjs.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":["h","Host"],"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,QACEA,QAACC,UAAI,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,EAEzBD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}

package/dist/cjs/nv-togglebuttongroup.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-B1na8x6M.js');
 
-const nvTogglebuttongroupCss = "nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius)}";
+const nvTogglebuttongroupCss = "nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius);height:var(--togglegroup-xs-height)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius);height:var(--togglegroup-sm-height)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius);height:var(--togglegroup-md-height)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);height:var(--togglegroup-lg-height)}";
 
 const NvTogglebuttongroup = class {
     constructor(hostRef) {
@@ -35,11 +35,10 @@ const NvTogglebuttongroup = class {
          */
         this.setActiveToggleButtons = () => {
             this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {
-                var _a;
                 const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);
                 if (!btn)
                     return;
-                btn.active = ((_a = this.value) !== null && _a !== void 0 ? _a : []).includes(btn.value);
+                btn.active = (this.value ?? []).includes(btn.value);
             });
         };
         /**
@@ -156,7 +155,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0ed4a7f3ddaaebf6747e8f0798913cca4117f2cb' }, index.h("slot", { key: '8ea87065c312f52a1f23873d19724d57147e80b2' })));
+        return (index.h(index.Host, { key: '2d4f46a06045c84018b0a5c296b2eb19c2803d7a' }, index.h("slot", { key: '4f387071fe030057df13c6b3ff5e6f480fcd339b' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-togglebuttongroup.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-togglebuttongroup.entry.cjs.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":["h","Host"],"mappings":"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"}
+{"version":3,"file":"nv-togglebuttongroup.entry.cjs.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":["h","Host"],"mappings":"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"}

package/dist/cjs/nv-tooltip.cjs.entry.js

@@ -43,7 +43,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '380e3306103dcf66291757972a47ba1ffaf8068c' }, index.h("slot", { key: 'ca3481b10e2ed73751c892711f8482809a274037' }), index.h("nv-popover", { key: 'e89838624b171e3d1eadf764e4ab14e003225dc9', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: 'c103df8cf9891fef763de2aa706dec5bb90f8346', slot: "content" }, this.message), index.h("slot", { key: '2e2dcc84b21ab1c46cf980a507f0b13e8350b4d6', name: "content" }))));
+        return (index.h(index.Host, { key: '3b0a7e6159b2e0a23af58ad0e8e3567f05373954' }, index.h("slot", { key: 'bfb982166e2f6f96c11cc745905a3c0ffd8f575e' }), index.h("nv-popover", { key: 'c14b0fa83f861ae828b14ab16cbd562dde6032ba', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: '67701f81afc4c2e36f8ab7266aee3f2e457a4755', slot: "content" }, this.message), index.h("slot", { key: 'c57c2463744e2e2afc5bbd64c4838a733a77aca9', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -16,6 +16,9 @@
     "components/nv-dialog/nv-dialog.js",
     "components/nv-dialogfooter/nv-dialogfooter.js",
     "components/nv-dialogheader/nv-dialogheader.js",
+    "components/nv-drawer/nv-drawer.js",
+    "components/nv-drawerfooter/nv-drawerfooter.js",
+    "components/nv-drawerheader/nv-drawerheader.js",
     "components/nv-fieldcheckbox/nv-fieldcheckbox.js",
     "components/nv-fielddate/nv-fielddate.js",
     "components/nv-fielddaterange/nv-fielddaterange.js",