@nova-design-system/nova-webcomponents 3.9.1 → 3.10.0

package/dist/collection/collection-manifest.json

@@ -8,6 +8,7 @@
     "components/nv-breadcrumb/nv-breadcrumb.js",
     "components/nv-breadcrumbs/nv-breadcrumbs.js",
     "components/nv-button/nv-button.js",
+    "components/nv-buttongroup/nv-buttongroup.js",
     "components/nv-calendar/nv-calendar.js",
     "components/nv-col/nv-col.js",
     "components/nv-datagrid/nv-datagrid.js",
@@ -41,6 +42,8 @@
     "components/nv-table/nv-table.js",
     "components/nv-tablecolumn/nv-tablecolumn.js",
     "components/nv-toggle/nv-toggle.js",
+    "components/nv-togglebutton/nv-togglebutton.js",
+    "components/nv-togglebuttongroup/nv-togglebuttongroup.js",
     "components/nv-tooltip/nv-tooltip.js"
   ],
   "compiler": {

package/dist/collection/components/nv-accordion-item/nv-accordion-item.js

@@ -162,7 +162,7 @@ export class NvAccordionItem {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 'is-animating': this.isAnimating,
-            }, role: "listitem", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '258efe0502a39d963a9e75c16285ee9cbc65cb9f', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, h("slot", { key: 'bb4dae743f06e3d41d1f7b8c17793b668df9347b', name: "header" }, h("div", { key: 'f3142a81c6be776d95ab9292101b889db6e35805', class: "nv-accordion-item__header-content" }, this.itemTitle && (h("span", { key: 'e897d8b4d414ba4e93b2853c152059579063335e', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (h("span", { key: 'b8e03ceb1ca0e4c0b0fe24398f0e1c592ac077ab', class: "nv-accordion-item__subtitle" }, this.subtitle)))), h("nv-iconbutton", { key: '8d90711a96f5ce2e7d6f5ebcf3922cd0fedd69bd', emphasis: "low", size: "sm", shape: "square", name: this.chevronIconName, tabindex: this.disabled ? -1 : 0, onClick: this.handleIconClick, onKeyDown: this.handleHeaderKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "content", "aria-label": this.open ? 'Fermer la section' : 'Ouvrir la section' })), h("div", { key: '171b5165f3663fa5f0fa28ef84145dfc998e9f10', id: "content", class: "nv-accordion-item__content", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.contentRef = el) }, h("div", { key: 'dcf753f23cec073a036d8137f1299dcf4ca4af78', class: "nv-accordion-item__content-inner" }, h("slot", { key: '3dc85def21aace19f3d211262b6cf66ccb9438fa', name: "content" })))));
+            }, role: "listitem", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '258efe0502a39d963a9e75c16285ee9cbc65cb9f', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, h("slot", { key: 'bb4dae743f06e3d41d1f7b8c17793b668df9347b', name: "header" }, h("div", { key: 'f3142a81c6be776d95ab9292101b889db6e35805', class: "nv-accordion-item__header-content" }, this.itemTitle && (h("span", { key: 'e897d8b4d414ba4e93b2853c152059579063335e', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (h("span", { key: 'b8e03ceb1ca0e4c0b0fe24398f0e1c592ac077ab', class: "nv-accordion-item__subtitle" }, this.subtitle)))), h("nv-iconbutton", { key: '145718cd664f6b1015cf99ad3c72dbe80df1f54e', emphasis: "low", size: "sm", shape: "square", name: this.chevronIconName, tabindex: this.disabled ? -1 : 0, onClick: this.handleIconClick, onKeyDown: this.handleHeaderKeyDown, "aria-controls": "content", "aria-label": this.open ? 'Fermer la section' : 'Ouvrir la section' })), h("div", { key: '667967ca20edaa1fc738188f42cfa8bf47bb080f', id: "content", class: "nv-accordion-item__content", ref: el => (this.contentRef = el) }, h("div", { key: '1f66bac904a5992d5e6cd63852d5aec9bc602ed7', class: "nv-accordion-item__content-inner" }, h("slot", { key: 'd7b5cf5c69daab242e7696e7432769905b3d4c72', name: "content" })))));
     }
     static get is() { return "nv-accordion-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-accordion-item/nv-accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-accordion-item.js","sourceRoot":"","sources":["../../../src/components/nv-accordion-item/nv-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/**\n * Accordion item element for nv-accordion.\n *\n * @slot header - Custom header (replaces itemTitle/subtitle)\n * @slot content - Main content (expandable area)\n */\n@Component({\n  tag: 'nv-accordion-item',\n  styleUrl: 'styles/nv-accordion-item.scss',\n  shadow: false,\n})\nexport class NvAccordionItem {\n  @Element() el!: HTMLNvAccordionItemElement;\n  private contentRef?: HTMLDivElement;\n  private mutationObserver?: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /** Item title (displayed if header slot is absent) */\n  @Prop({ reflect: true })\n  readonly itemTitle?: string;\n\n  /** Item subtitle (displayed if header slot is absent) */\n  @Prop({ reflect: true })\n  readonly subtitle?: string;\n\n  /** Open or closed */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /** Disables the item */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /** Maximum content height (in px, optional). If not defined, auto height. */\n  @Prop({ reflect: true })\n  readonly maxContentHeight?: number;\n\n  /** Parent expansion mode (accordion or multi) */\n  @Prop({ reflect: true })\n  readonly mode?: 'accordion' | 'multi' = 'accordion';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted on toggle (header click)\n   */\n  @Event()\n  itemToggle: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region STATE\n\n  /** Internal state for open/close rendering */\n  @State()\n  currentOpenState: boolean = false;\n\n  /**\n   * Controls if the panel has been initialized for animations\n   */\n  @State()\n  isInitialized: boolean = false;\n\n  /**\n   * Animation in progress\n   */\n  @State()\n  isAnimating: boolean = false;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('open')\n  async onOpenChanged(newValue: boolean, oldValue: boolean) {\n    this.currentOpenState = newValue; // Synchronize internal state\n\n    // Skip initial render\n    if (oldValue === undefined) {\n      return;\n    }\n\n    await this.updateVisibility(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region ANIMATIONS\n\n  /**\n   * Updates the visibility state with Nova animation system\n   * @param {boolean} open - Whether the accordion item should be open\n   */\n  private async updateVisibility(open: boolean) {\n    if (!this.contentRef) return;\n\n    this.isAnimating = true;\n\n    const { collapse, expand } = useCollapse(this.contentRef, {\n      duration: 200,\n    });\n\n    if (open) {\n      // Expand with animation\n      await expand();\n    } else {\n      // Collapse with animation\n      await collapse();\n    }\n\n    this.isAnimating = false;\n  }\n\n  //#endregion ANIMATIONS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.currentOpenState = this.open; // Initial synchronization\n  }\n\n  componentDidLoad() {\n    if (this.contentRef) {\n      const { setExpanded, setCollapsed } = useCollapse(this.contentRef);\n\n      if (this.open) {\n        // If open by default on initial load, set expanded state without animation\n        setExpanded();\n      } else {\n        // If closed by default, set collapsed state without animation\n        setCollapsed();\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Toggle open/close (Public API)\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled && !this.isAnimating) {\n      this.open = !this.open;\n      this.itemToggle.emit(this.open);\n\n      // Force animation update directly instead of relying on watcher\n      await this.updateVisibility(this.open);\n    }\n  }\n\n  /**\n   * Handler for header click\n   */\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  /**\n   * Handler for iconbutton click\n   * @param {Event} e - Click event\n   */\n  private handleIconClick = (e: Event) => {\n    e.stopPropagation(); // Prevent header click from triggering\n    this.toggle();\n  };\n\n  /**\n   * Handler for keyboard events on iconbutton\n   * @param {KeyboardEvent} e - Keyboard event\n   */\n  private handleHeaderKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.toggle();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n          this.itemToggle.emit(this.open);\n          this.updateVisibility(this.open);\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (this.open) {\n          this.open = false;\n          this.itemToggle.emit(this.open);\n          this.updateVisibility(this.open);\n        }\n        break;\n    }\n  };\n\n  /**\n   * Get the chevron icon name based on open state\n   * @returns {string} The icon name to display in the chevron button\n   */\n  private get chevronIconName(): string {\n    return this.open ? 'chevron-top' : 'chevron-down';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host\n        class={{\n          'nv-accordion-item': true,\n          'is-open': this.open,\n          'is-disabled': this.disabled,\n          'is-animating': this.isAnimating,\n        }}\n        role=\"listitem\"\n        aria-expanded={this.open ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          class=\"nv-accordion-item__header\"\n          onClick={this.handleHeaderClick}\n          aria-controls=\"content\"\n        >\n          <slot name=\"header\">\n            <div class=\"nv-accordion-item__header-content\">\n              {this.itemTitle && (\n                <span class=\"nv-accordion-item__title\">{this.itemTitle}</span>\n              )}\n              {this.subtitle && (\n                <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n              )}\n            </div>\n          </slot>\n          <nv-iconbutton\n            emphasis=\"low\"\n            size=\"sm\"\n            shape=\"square\"\n            name={this.chevronIconName}\n            tabindex={this.disabled ? -1 : 0}\n            onClick={this.handleIconClick}\n            onKeyDown={this.handleHeaderKeyDown}\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-controls=\"content\"\n            aria-label={this.open ? 'Fermer la section' : 'Ouvrir la section'}\n          ></nv-iconbutton>\n        </div>\n\n        <div\n          id=\"content\"\n          class=\"nv-accordion-item__content\"\n          aria-hidden={!this.open ? 'true' : 'false'}\n          ref={el => (this.contentRef = el as HTMLDivElement)}\n        >\n          <div class=\"nv-accordion-item__content-inner\">\n            <slot name=\"content\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-accordion-item.js","sourceRoot":"","sources":["../../../src/components/nv-accordion-item/nv-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/**\n * Accordion item element for nv-accordion.\n *\n * @slot header - Custom header (replaces itemTitle/subtitle)\n * @slot content - Main content (expandable area)\n */\n@Component({\n  tag: 'nv-accordion-item',\n  styleUrl: 'styles/nv-accordion-item.scss',\n  shadow: false,\n})\nexport class NvAccordionItem {\n  @Element() el!: HTMLNvAccordionItemElement;\n  private contentRef?: HTMLDivElement;\n  private mutationObserver?: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /** Item title (displayed if header slot is absent) */\n  @Prop({ reflect: true })\n  readonly itemTitle?: string;\n\n  /** Item subtitle (displayed if header slot is absent) */\n  @Prop({ reflect: true })\n  readonly subtitle?: string;\n\n  /** Open or closed */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /** Disables the item */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /** Maximum content height (in px, optional). If not defined, auto height. */\n  @Prop({ reflect: true })\n  readonly maxContentHeight?: number;\n\n  /** Parent expansion mode (accordion or multi) */\n  @Prop({ reflect: true })\n  readonly mode?: 'accordion' | 'multi' = 'accordion';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted on toggle (header click)\n   */\n  @Event()\n  itemToggle: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region STATE\n\n  /** Internal state for open/close rendering */\n  @State()\n  currentOpenState: boolean = false;\n\n  /**\n   * Controls if the panel has been initialized for animations\n   */\n  @State()\n  isInitialized: boolean = false;\n\n  /**\n   * Animation in progress\n   */\n  @State()\n  isAnimating: boolean = false;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('open')\n  async onOpenChanged(newValue: boolean, oldValue: boolean) {\n    this.currentOpenState = newValue; // Synchronize internal state\n\n    // Skip initial render\n    if (oldValue === undefined) {\n      return;\n    }\n\n    await this.updateVisibility(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region ANIMATIONS\n\n  /**\n   * Updates the visibility state with Nova animation system\n   * @param {boolean} open - Whether the accordion item should be open\n   */\n  private async updateVisibility(open: boolean) {\n    if (!this.contentRef) return;\n\n    this.isAnimating = true;\n\n    const { collapse, expand } = useCollapse(this.contentRef, {\n      duration: 200,\n    });\n\n    if (open) {\n      // Expand with animation\n      await expand();\n    } else {\n      // Collapse with animation\n      await collapse();\n    }\n\n    this.isAnimating = false;\n  }\n\n  //#endregion ANIMATIONS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.currentOpenState = this.open; // Initial synchronization\n  }\n\n  componentDidLoad() {\n    if (this.contentRef) {\n      const { setExpanded, setCollapsed } = useCollapse(this.contentRef);\n\n      if (this.open) {\n        // If open by default on initial load, set expanded state without animation\n        setExpanded();\n      } else {\n        // If closed by default, set collapsed state without animation\n        setCollapsed();\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Toggle open/close (Public API)\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled && !this.isAnimating) {\n      this.open = !this.open;\n      this.itemToggle.emit(this.open);\n\n      // Force animation update directly instead of relying on watcher\n      await this.updateVisibility(this.open);\n    }\n  }\n\n  /**\n   * Handler for header click\n   */\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  /**\n   * Handler for iconbutton click\n   * @param {Event} e - Click event\n   */\n  private handleIconClick = (e: Event) => {\n    e.stopPropagation(); // Prevent header click from triggering\n    this.toggle();\n  };\n\n  /**\n   * Handler for keyboard events on iconbutton\n   * @param {KeyboardEvent} e - Keyboard event\n   */\n  private handleHeaderKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.toggle();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n          this.itemToggle.emit(this.open);\n          this.updateVisibility(this.open);\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (this.open) {\n          this.open = false;\n          this.itemToggle.emit(this.open);\n          this.updateVisibility(this.open);\n        }\n        break;\n    }\n  };\n\n  /**\n   * Get the chevron icon name based on open state\n   * @returns {string} The icon name to display in the chevron button\n   */\n  private get chevronIconName(): string {\n    return this.open ? 'chevron-top' : 'chevron-down';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host\n        class={{\n          'nv-accordion-item': true,\n          'is-open': this.open,\n          'is-disabled': this.disabled,\n          'is-animating': this.isAnimating,\n        }}\n        role=\"listitem\"\n        aria-expanded={this.open ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          class=\"nv-accordion-item__header\"\n          onClick={this.handleHeaderClick}\n          aria-controls=\"content\"\n        >\n          <slot name=\"header\">\n            <div class=\"nv-accordion-item__header-content\">\n              {this.itemTitle && (\n                <span class=\"nv-accordion-item__title\">{this.itemTitle}</span>\n              )}\n              {this.subtitle && (\n                <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n              )}\n            </div>\n          </slot>\n          <nv-iconbutton\n            emphasis=\"low\"\n            size=\"sm\"\n            shape=\"square\"\n            name={this.chevronIconName}\n            tabindex={this.disabled ? -1 : 0}\n            onClick={this.handleIconClick}\n            onKeyDown={this.handleHeaderKeyDown}\n            aria-controls=\"content\"\n            aria-label={this.open ? 'Fermer la section' : 'Ouvrir la section'}\n          ></nv-iconbutton>\n        </div>\n\n        <div\n          id=\"content\"\n          class=\"nv-accordion-item__content\"\n          ref={el => (this.contentRef = el as HTMLDivElement)}\n        >\n          <div class=\"nv-accordion-item__content-inner\">\n            <slot name=\"content\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}

package/dist/collection/components/nv-alert/nv-alert.css

@@ -25,6 +25,7 @@ nv-alert.feedback-information > .close:focus, nv-alert.feedback-information > .c
 nv-alert.feedback-information > .close:focus-visible, nv-alert.feedback-information > .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);
   outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
 }
 nv-alert.feedback-warning {
   background-color: var(--components-alert-warning-background);
@@ -36,6 +37,7 @@ nv-alert.feedback-warning > .close:focus, nv-alert.feedback-warning > .close:foc
 nv-alert.feedback-warning > .close:focus-visible, nv-alert.feedback-warning > .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);
   outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
 }
 nv-alert.feedback-error {
   background-color: var(--components-alert-error-background);
@@ -47,6 +49,7 @@ nv-alert.feedback-error > .close:focus, nv-alert.feedback-error > .close:focus-w
 nv-alert.feedback-error > .close:focus-visible, nv-alert.feedback-error > .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);
   outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
 }
 nv-alert.feedback-success {
   background-color: var(--components-alert-success-background);
@@ -58,6 +61,7 @@ nv-alert.feedback-success > .close:focus, nv-alert.feedback-success > .close:foc
 nv-alert.feedback-success > .close:focus-visible, nv-alert.feedback-success > .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);
   outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
 }
 nv-alert.feedback-neutral {
   background-color: var(--components-alert-neutral-background);
@@ -69,6 +73,7 @@ nv-alert.feedback-neutral > .close:focus, nv-alert.feedback-neutral > .close:foc
 nv-alert.feedback-neutral > .close:focus-visible, nv-alert.feedback-neutral > .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);
   outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
 }
 nv-alert > nv-icon.icon-information {
   color: var(--components-alert-information-icon);

package/dist/collection/components/nv-badge/nv-badge.css

@@ -70,6 +70,7 @@ nv-badge.badge-1 .close:focus, nv-badge.badge-1 .close:focus-within {
 nv-badge.badge-1 .close:focus-visible, nv-badge.badge-1 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-1 nv-icon {
   color: var(--color-rainbow-1-icon);
@@ -85,6 +86,7 @@ nv-badge.badge-2 .close:focus, nv-badge.badge-2 .close:focus-within {
 nv-badge.badge-2 .close:focus-visible, nv-badge.badge-2 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-2 nv-icon {
   color: var(--color-rainbow-2-icon);
@@ -100,6 +102,7 @@ nv-badge.badge-3 .close:focus, nv-badge.badge-3 .close:focus-within {
 nv-badge.badge-3 .close:focus-visible, nv-badge.badge-3 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-3 nv-icon {
   color: var(--color-rainbow-3-icon);
@@ -115,6 +118,7 @@ nv-badge.badge-4 .close:focus, nv-badge.badge-4 .close:focus-within {
 nv-badge.badge-4 .close:focus-visible, nv-badge.badge-4 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-4 nv-icon {
   color: var(--color-rainbow-4-icon);
@@ -130,6 +134,7 @@ nv-badge.badge-5 .close:focus, nv-badge.badge-5 .close:focus-within {
 nv-badge.badge-5 .close:focus-visible, nv-badge.badge-5 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-5 nv-icon {
   color: var(--color-rainbow-5-icon);
@@ -145,6 +150,7 @@ nv-badge.badge-6 .close:focus, nv-badge.badge-6 .close:focus-within {
 nv-badge.badge-6 .close:focus-visible, nv-badge.badge-6 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-6 nv-icon {
   color: var(--color-rainbow-6-icon);
@@ -160,6 +166,7 @@ nv-badge.badge-7 .close:focus, nv-badge.badge-7 .close:focus-within {
 nv-badge.badge-7 .close:focus-visible, nv-badge.badge-7 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-7 nv-icon {
   color: var(--color-rainbow-7-icon);
@@ -175,6 +182,7 @@ nv-badge.badge-8 .close:focus, nv-badge.badge-8 .close:focus-within {
 nv-badge.badge-8 .close:focus-visible, nv-badge.badge-8 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-8 nv-icon {
   color: var(--color-rainbow-8-icon);
@@ -190,6 +198,7 @@ nv-badge.badge-9 .close:focus, nv-badge.badge-9 .close:focus-within {
 nv-badge.badge-9 .close:focus-visible, nv-badge.badge-9 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-9 nv-icon {
   color: var(--color-rainbow-9-icon);
@@ -205,6 +214,7 @@ nv-badge.badge-10 .close:focus, nv-badge.badge-10 .close:focus-within {
 nv-badge.badge-10 .close:focus-visible, nv-badge.badge-10 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-10 nv-icon {
   color: var(--color-rainbow-10-icon);
@@ -220,6 +230,7 @@ nv-badge.badge-error .close:focus, nv-badge.badge-error .close:focus-within {
 nv-badge.badge-error .close:focus-visible, nv-badge.badge-error .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-error-low-content, var(--color-feedback-error-low-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-error nv-icon {
   color: var(--color-feedback-error-low-icon);
@@ -235,6 +246,7 @@ nv-badge.badge-information .close:focus, nv-badge.badge-information .close:focus
 nv-badge.badge-information .close:focus-visible, nv-badge.badge-information .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-information-low-content, var(--color-feedback-information-low-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-information nv-icon {
   color: var(--color-feedback-information-low-icon);
@@ -250,6 +262,7 @@ nv-badge.badge-neutral .close:focus, nv-badge.badge-neutral .close:focus-within
 nv-badge.badge-neutral .close:focus-visible, nv-badge.badge-neutral .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-neutral-low-content, var(--color-feedback-neutral-low-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-neutral nv-icon {
   color: var(--color-feedback-neutral-low-icon);
@@ -265,6 +278,7 @@ nv-badge.badge-success .close:focus, nv-badge.badge-success .close:focus-within
 nv-badge.badge-success .close:focus-visible, nv-badge.badge-success .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-success-low-content, var(--color-feedback-success-low-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-success nv-icon {
   color: var(--color-feedback-success-low-icon);
@@ -280,6 +294,7 @@ nv-badge.badge-warning .close:focus, nv-badge.badge-warning .close:focus-within
 nv-badge.badge-warning .close:focus-visible, nv-badge.badge-warning .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-warning-low-content, var(--color-feedback-warning-low-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-warning nv-icon {
   color: var(--color-feedback-warning-low-icon);
@@ -295,6 +310,7 @@ nv-badge.badge-amber .close:focus, nv-badge.badge-amber .close:focus-within {
 nv-badge.badge-amber .close:focus-visible, nv-badge.badge-amber .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-amber-content, var(--color-rainbow-1-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-amber nv-icon {
   color: var(--color-rainbow-1-icon);
@@ -310,6 +326,7 @@ nv-badge.badge-orange .close:focus, nv-badge.badge-orange .close:focus-within {
 nv-badge.badge-orange .close:focus-visible, nv-badge.badge-orange .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-orange-content, var(--color-rainbow-2-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-orange nv-icon {
   color: var(--color-rainbow-2-icon);
@@ -325,6 +342,7 @@ nv-badge.badge-turquoise .close:focus, nv-badge.badge-turquoise .close:focus-wit
 nv-badge.badge-turquoise .close:focus-visible, nv-badge.badge-turquoise .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-turquoise-content, var(--color-rainbow-5-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-turquoise nv-icon {
   color: var(--color-rainbow-5-icon);
@@ -340,6 +358,7 @@ nv-badge.badge-crimson .close:focus, nv-badge.badge-crimson .close:focus-within
 nv-badge.badge-crimson .close:focus-visible, nv-badge.badge-crimson .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-crimson-content, var(--color-rainbow-6-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-crimson nv-icon {
   color: var(--color-rainbow-6-icon);
@@ -355,6 +374,7 @@ nv-badge.badge-lime .close:focus, nv-badge.badge-lime .close:focus-within {
 nv-badge.badge-lime .close:focus-visible, nv-badge.badge-lime .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-lime-content, var(--color-rainbow-9-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-lime nv-icon {
   color: var(--color-rainbow-9-icon);
@@ -370,6 +390,7 @@ nv-badge.badge-petrol .close:focus, nv-badge.badge-petrol .close:focus-within {
 nv-badge.badge-petrol .close:focus-visible, nv-badge.badge-petrol .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-petrol-content, var(--color-rainbow-8-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
+  z-index: 111;
 }
 nv-badge.badge-petrol nv-icon {
   color: var(--color-rainbow-8-icon);

package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.css

@@ -45,6 +45,7 @@ nv-breadcrumb ul button:focus-visible,
 nv-breadcrumb ul button:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);
   outline-offset: calc(var(--focus-outline-offset) * 0.3);
+  z-index: 111;
 }
 nv-breadcrumb ul a:hover,
 nv-breadcrumb ul button:hover {
@@ -67,6 +68,7 @@ nv-breadcrumb > a:focus, nv-breadcrumb > a:focus-within, nv-breadcrumb > button:
 nv-breadcrumb > a:focus-visible, nv-breadcrumb > a:has(:focus-visible), nv-breadcrumb > button:focus-visible, nv-breadcrumb > button:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);
   outline-offset: calc(var(--focus-outline-offset) * 0.3);
+  z-index: 111;
 }
 nv-breadcrumb > a:hover, nv-breadcrumb > button:hover {
   text-decoration: underline;

package/dist/collection/components/nv-button/styles/nv-button.css

@@ -81,6 +81,7 @@ nv-button[emphasis=high]:focus, nv-button[emphasis=high]:focus-within {
 nv-button[emphasis=high]:focus-visible, nv-button[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);
+  z-index: 111;
 }
 nv-button[emphasis=high]:disabled:not([disabled=false]) {
   opacity: 0.5;
@@ -108,6 +109,7 @@ nv-button[emphasis=high][danger]:not([danger=false]):focus, nv-button[emphasis=h
 nv-button[emphasis=high][danger]:not([danger=false]):focus-visible, nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
 }
 nv-button[emphasis=medium] {
   background: var(--components-button-medium-background);
@@ -130,6 +132,7 @@ nv-button[emphasis=medium]:focus, nv-button[emphasis=medium]:focus-within {
 nv-button[emphasis=medium]:focus-visible, nv-button[emphasis=medium]:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
 }
 nv-button[emphasis=medium]:disabled:not([disabled=false]) {
   opacity: 0.5;
@@ -157,6 +160,7 @@ nv-button[emphasis=medium][danger]:not([danger=false]):focus, nv-button[emphasis
 nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible, nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
 }
 nv-button[emphasis=low] {
   background: var(--components-button-low-background);
@@ -179,6 +183,7 @@ nv-button[emphasis=low]:focus, nv-button[emphasis=low]:focus-within {
 nv-button[emphasis=low]:focus-visible, nv-button[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);
+  z-index: 111;
 }
 nv-button[emphasis=low]:disabled:not([disabled=false]) {
   opacity: 0.5;
@@ -206,6 +211,7 @@ nv-button[emphasis=low][danger]:not([danger=false]):focus, nv-button[emphasis=lo
 nv-button[emphasis=low][danger]:not([danger=false]):focus-visible, nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
 }
 nv-button[emphasis=lower] {
   background: var(--components-button-lower-background);
@@ -228,6 +234,7 @@ nv-button[emphasis=lower]:focus, nv-button[emphasis=lower]:focus-within {
 nv-button[emphasis=lower]:focus-visible, nv-button[emphasis=lower]:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
 }
 nv-button[emphasis=lower]:disabled:not([disabled=false]) {
   opacity: 0.5;
@@ -255,6 +262,7 @@ nv-button[emphasis=lower][danger]:not([danger=false]):focus, nv-button[emphasis=
 nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible, nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
+  z-index: 111;
 }
 nv-button[fluid]:not([fluid=false]) {
   width: 100%;

package/dist/collection/components/nv-buttongroup/nv-buttongroup.docs.js

@@ -0,0 +1,43 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvButtongroupDocs = {
+    component: 'nv-buttongroup',
+    subcomponents: ['nv-button', 'nv-iconbutton', 'nv-menu', 'nv-menuitem'],
+    badge: 'new',
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-buttongroup", { "data-storybook-args": true }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))),
+        },
+        {
+            name: nameof(x => x.orientation),
+            args: { orientation: 'vertical' },
+            template: (h("nv-buttongroup", { "data-storybook-args": true }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))),
+        },
+        {
+            name: nameof(x => x.emphasis),
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")))),
+        },
+        {
+            name: nameof(x => x.size),
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")))),
+        },
+        {
+            name: 'Combobox',
+            description: 'A button group with a menu inside, you can also use popovers, tooltips, etc.',
+            args: { emphasis: 'high' },
+            template: (h("nv-buttongroup", null, h("nv-button", null, "Combo box"), h("nv-menu", { "data-storybook-args": true, "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "user", shortcut: "\u2318K", id: "user-settings", label: "User settings" }), h("nv-menuitem", { icon: "bulb", shortcut: "\u2318F", id: "find-all-items", label: "Find all items" }))))),
+        },
+        {
+            name: 'AllVerticalVariants',
+            args: { orientation: 'vertical' },
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("div", { "data-class": "flex flex-wrap gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))), h("div", { "data-class": "flex flex-wrap gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))), h("div", { "data-class": "flex flex-wrap gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))), h("div", { "data-class": "flex flex-wrap gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))))),
+        },
+        {
+            name: 'AllHorizontalVariants',
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")))),
+        },
+    ],
+};
+export default NvButtongroupDocs;
+//# sourceMappingURL=nv-buttongroup.docs.js.map

package/dist/collection/components/nv-buttongroup/nv-buttongroup.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-buttongroup.docs.js","sourceRoot":"","sources":["../../../src/components/nv-buttongroup/nv-buttongroup.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvButtongroupDocs: NovaDocs<Components.NvButtongroup> = {\n  component: 'nv-buttongroup',\n  subcomponents: ['nv-button', 'nv-iconbutton', 'nv-menu', 'nv-menuitem'],\n  badge: 'new',\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-buttongroup data-storybook-args>\n          <nv-button>First Button</nv-button>\n          <nv-button>Middle Button</nv-button>\n          <nv-button>Last Button</nv-button>\n        </nv-buttongroup>\n      ),\n    },\n    {\n      name: nameof<Components.NvButtongroup>(x => x.orientation),\n      args: { orientation: 'vertical' },\n      template: (\n        <nv-buttongroup data-storybook-args>\n          <nv-button>First Button</nv-button>\n          <nv-button>Middle Button</nv-button>\n          <nv-button>Last Button</nv-button>\n        </nv-buttongroup>\n      ),\n    },\n    {\n      name: nameof<Components.NvButtongroup>(x => x.emphasis),\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <nv-buttongroup data-storybook-args emphasis=\"high\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButtongroup>(x => x.size),\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <nv-buttongroup data-storybook-args size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n        </div>\n      ),\n    },\n    {\n      name: 'Combobox',\n      description:\n        'A button group with a menu inside, you can also use popovers, tooltips, etc.',\n      args: { emphasis: 'high' },\n      template: (\n        <nv-buttongroup>\n          <nv-button>Combo box</nv-button>\n          <nv-menu data-storybook-args data-class=\"pb-20\">\n            <nv-iconbutton slot=\"trigger\" name=\"menu\"></nv-iconbutton>\n            <ul slot=\"content\">\n              <nv-menuitem\n                icon=\"user\"\n                shortcut=\"&#8984;K\"\n                id=\"user-settings\"\n                label=\"User settings\"\n              ></nv-menuitem>\n              <nv-menuitem\n                icon=\"bulb\"\n                shortcut=\"&#8984;F\"\n                id=\"find-all-items\"\n                label=\"Find all items\"\n              ></nv-menuitem>\n            </ul>\n          </nv-menu>\n        </nv-buttongroup>\n      ),\n    },\n    {\n      name: 'AllVerticalVariants',\n      args: { orientation: 'vertical' },\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <div data-class=\"flex flex-wrap gap-4\">\n            <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"lg\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"lg\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"lg\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"lg\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"md\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"md\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"md\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"md\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"sm\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"sm\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"sm\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"sm\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"xs\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"xs\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"xs\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"xs\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n          </div>\n        </div>\n      ),\n    },\n    {\n      name: 'AllHorizontalVariants',\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n\n          <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n\n          <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n\n          <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvButtongroupDocs;\n"]}