@ni/nimble-components 29.1.8 → 29.2.1

package/dist/all-components-bundle.js

@@ -16278,7 +16278,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 03 Jun 2024 22:13:03 GMT
+   * Generated on Tue, 04 Jun 2024 16:23:30 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16347,7 +16347,7 @@
   const BodySize = "14px";
   const Body2Size = "16px";
   const GroupLabel1Size = "11px";
-  const ButtonLabel1Size = "12.800000190734863px";
+  const ButtonLabel1Size = "14px";
   const Title1Size = "19px";
   const Headline2Size = "29.100000381469727px";
   const PlaceholderSize = "14px";
@@ -16709,9 +16709,9 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$H = html `<slot></slot>`;
+  const template$I = html `<slot></slot>`;
 
-  const styles$_ = css `
+  const styles$$ = css `
     ${display('contents')}
 `;
 
@@ -16826,8 +16826,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$_,
-      template: template$H
+      styles: styles$$,
+      template: template$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -17012,7 +17012,7 @@
       }
   }
 
-  const styles$Z = css `
+  const styles$_ = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -17092,7 +17092,7 @@
 `;
 
   // prettier-ignore
-  const template$G = (_context, definition) => html `${
+  const template$H = (_context, definition) => html `${
 /* top-container div is necessary because setting contenteditable directly on the native anchor instead
    leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.
 */ ''}<div
@@ -17195,8 +17195,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$G,
-      styles: styles$Z,
+      template: template$H,
+      styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17308,7 +17308,7 @@
     padding: 0;
 `;
 
-  const styles$Y = css `
+  const styles$Z = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17586,8 +17586,8 @@
             }
         `));
 
-  const styles$X = css `
-    ${styles$Y}
+  const styles$Y = css `
+    ${styles$Z}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17607,7 +17607,7 @@
     }
 `;
 
-  const template$F = (context, definition) => html `
+  const template$G = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17689,8 +17689,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$F,
-      styles: styles$X,
+      template: template$G,
+      styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17698,7 +17698,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$W = css `
+  const styles$X = css `
     ${display('grid')}
 
     :host {
@@ -17782,7 +17782,7 @@
     }
 `;
 
-  const template$E = (context, definition) => html `
+  const template$F = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17883,8 +17883,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$E,
-      styles: styles$W,
+      template: template$F,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17894,7 +17894,7 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$V = css `
+  const styles$W = css `
     ${display('inline-flex')}
 
     :host {
@@ -18011,7 +18011,7 @@
     }
 `;
 
-  const template$D = (context, definition) => html `
+  const template$E = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18063,15 +18063,15 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$D,
-      styles: styles$V,
+      template: template$E,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$U = css `
+  const styles$V = css `
     ${display('grid')}
 
     :host {
@@ -18093,7 +18093,7 @@
     }
 `;
 
-  const template$C = (context, definition) => html `
+  const template$D = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18299,8 +18299,8 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$C,
-      styles: styles$U,
+      template: template$D,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18316,7 +18316,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$T = css `
+  const styles$U = css `
     ${display('block')}
 
     :host {
@@ -18422,7 +18422,7 @@
     }
 `;
 
-  const template$B = (context, definition) => html `
+  const template$C = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18559,8 +18559,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$B,
-      styles: styles$T,
+      template: template$C,
+      styles: styles$U,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18576,7 +18576,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$S = css `
+  const styles$T = css `
     ${display('block')}
 
     :host {
@@ -18607,7 +18607,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$S
+      styles: styles$T
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18687,7 +18687,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$R = css `
+  const styles$S = css `
     ${display('flex')}
 
     :host {
@@ -18802,12 +18802,12 @@
             }
         `));
 
-  const styles$Q = css `
-    ${styles$Y}
+  const styles$R = css `
+    ${styles$Z}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$A = (context, definition) => html `
+  const template$B = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -18898,8 +18898,8 @@
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$A,
-      styles: styles$Q,
+      template: template$B,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19650,13 +19650,13 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$z = html `<div
+  const template$A = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$P = css `
+  const styles$Q = css `
     ${display('inline-flex')}
 
     :host {
@@ -19709,8 +19709,8 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$z,
-          styles: styles$P
+          template: template$A,
+          styles: styles$Q
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19823,7 +19823,7 @@
   }).withDefault(coreLabelDefaults.filterNoResultsLabel);
 
   // prettier-ignore
-  const template$y = html `
+  const template$z = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -19941,12 +19941,12 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$y,
-      styles: styles$R
+      template: template$z,
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
-  const styles$O = css `
+  const styles$P = css `
     ${display('inline-block')}
 
     :host {
@@ -19987,11 +19987,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$O
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$N = css `
+  const styles$O = css `
     ${display('inline-flex')}
 
     :host {
@@ -20069,14 +20069,14 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$N,
+      styles: styles$O,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$M = css `
+  const styles$N = css `
     ${display('flex')}
 
     :host {
@@ -20100,7 +20100,7 @@
     }
 `;
 
-  const template$x = html `
+  const template$y = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -20115,12 +20115,12 @@
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$x,
-      styles: styles$M
+      template: template$y,
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$L = css `
+  const styles$M = css `
     ${display('inline-flex')}
 
     :host {
@@ -20279,14 +20279,14 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$L,
+      styles: styles$M,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$K = css `
+  const styles$L = css `
     ${display('inline-flex')}
 
     :host {
@@ -20395,7 +20395,7 @@
     }
 `;
 
-  const template$w = (_context, definition) => html `
+  const template$x = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -20444,16 +20444,16 @@
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$w,
-      styles: styles$K,
+      template: template$x,
+      styles: styles$L,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$J = css `
-    ${styles$Y}
+  const styles$K = css `
+    ${styles$Z}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20502,7 +20502,7 @@
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$v = (context, definition) => html `
+  const template$w = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20598,8 +20598,8 @@
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$v,
-      styles: styles$J,
+      template: template$w,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20636,7 +20636,7 @@
       block: 'block'
   };
 
-  const styles$I = css `
+  const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -20856,7 +20856,7 @@
             }
         `));
 
-  const styles$H = css `
+  const styles$I = css `
     .error-icon {
         display: none;
     }
@@ -20903,9 +20903,9 @@
       standard: 'standard'
   };
 
-  const styles$G = css `
+  const styles$H = css `
+    ${styles$J}
     ${styles$I}
-    ${styles$H}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21041,7 +21041,7 @@
   }
 
   // prettier-ignore
-  const template$u = (context, definition) => html `
+  const template$v = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -21102,7 +21102,7 @@
                 ?disabled="${x => x.disabled}"
                 ${ref('listbox')}
             >
-                <slot
+                <slot name="option"
                     ${slotted({
     filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
     flatten: true,
@@ -21746,8 +21746,8 @@
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$u,
-      styles: styles$G,
+      template: template$v,
+      styles: styles$H,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -21792,7 +21792,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$F = css `
+  const styles$G = css `
     ${display('grid')}
 
     dialog {
@@ -21898,7 +21898,7 @@
             }
         `));
 
-  const template$t = html `
+  const template$u = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -22046,13 +22046,13 @@
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$t,
-      styles: styles$F,
+      template: template$u,
+      styles: styles$G,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$E = css `
+  const styles$F = css `
     ${display('block')}
 
     :host {
@@ -22205,7 +22205,7 @@
             }
         `));
 
-  const template$s = html `
+  const template$t = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -22348,8 +22348,8 @@
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$s,
-      styles: styles$E
+      template: template$t,
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -24579,7 +24579,7 @@
       }
   }
 
-  const styles$D = css `
+  const styles$E = css `
     ${display('none')}
 `;
 
@@ -24628,7 +24628,7 @@
   ], LabelProviderCore.prototype, "filterNoResults", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
-      styles: styles$D
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -24795,13 +24795,13 @@
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table',
-      styles: styles$D
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$C = css `
+  const styles$D = css `
     ${display('flex')}
 
     :host {
@@ -24878,7 +24878,7 @@
    * @public
    */
   // prettier-ignore
-  const template$r = (context, definition) => html `
+  const template$s = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -24889,6 +24889,7 @@
     .filter(Boolean)
     .join(' ')}"
         role="option"
+        slot="option"
     >
         ${startSlotTemplate(context, definition)}
         <span
@@ -24973,12 +24974,228 @@
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$r,
-      styles: styles$C
+      template: template$s,
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
+  const styles$C = css `
+    ${display('flex')}
+
+    :host {
+        cursor: default;
+        flex-direction: column;
+    }
+
+    :host([visually-hidden]) {
+        display: none;
+    }
+
+    :host::after,
+    :host::before {
+        content: ' ';
+        margin-top: ${smallPadding};
+        margin-bottom: ${smallPadding};
+        border-bottom: ${borderColor} 2px solid;
+        opacity: 0.1;
+        display: none;
+    }
+
+    :host([top-separator-visible])::before,
+    :host([bottom-separator-visible])::after {
+        display: block;
+    }
+
+    slot[name='option']::slotted([role='option']) {
+        background-color: transparent;
+    }
+
+    slot[name='option']::slotted([role='option']:hover) {
+        background-color: ${fillHoverColor};
+    }
+
+    slot[name='option']::slotted([role='option'][active-option]) {
+        background-color: ${fillSelectedColor};
+    }
+
+    slot[name='option']::slotted([role='option'][active-option]:hover) {
+        background-color: ${fillHoverSelectedColor};
+    }
+
+    .label-display {
+        font: ${groupHeaderFont};
+        text-transform: ${groupHeaderTextTransform};
+        color: ${groupHeaderFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-left: ${smallPadding};
+        margin-bottom: ${smallPadding};
+    }
+
+    .label-slot.hidden {
+        display: none;
+    }
+`;
+
+  const isListOption$1 = (n) => {
+      return n instanceof ListOption;
+  };
+  // prettier-ignore
+  const template$r = html `
+<template
+    role="group"
+    aria-label="${x => x.labelContent}"
+    slot="option"
+>
+    <span ${overflow('hasOverflow')} 
+        class="label-display"
+        aria-hidden="true"
+        title=${x => (x.hasOverflow && x.labelContent ? x.labelContent : null)}
+        @click="${(x, c) => x.clickHandler(c.event)}"
+    >
+        ${when(x => (typeof x.label === 'string'), html `${x => x.label}`)} 
+        <slot ${ref('labelSlot')}
+            class="label-slot ${x => (typeof x.label === 'string' ? 'hidden' : '')}"
+        >
+        </slot>
+    </span>
+    <span class="content" part="content" role="none">
+        <slot name="option"
+        ${slotted({
+    flatten: true,
+    filter: (n) => isListOption$1(n),
+    property: 'listOptions'
+})}
+></slot>
+    </span>
+</template>
+`;
+
+  /**
+   * A nimble-styled HTML listbox option group
+   */
+  class ListOptionGroup extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /**
+           * The hidden state of the element.
+           *
+           * @public
+           * @defaultValue - false
+           * @remarks
+           * HTML Attribute: hidden
+           */
+          this.hidden = false;
+          /**
+           * @internal
+           * This attribute is required to allow use-cases that offer dynamic filtering
+           * (like the Select) to visually hide groups that are filtered out, but still
+           * allow users to use the native 'hidden' attribute without it being affected
+           * by the filtering process.
+           */
+          this.visuallyHidden = false;
+          /**
+           * @internal
+           */
+          this.topSeparatorVisible = false;
+          /**
+           * @internal
+           */
+          this.bottomSeparatorVisible = false;
+          /** @internal */
+          this.hasOverflow = false;
+          this.hiddenOptions = new Set();
+      }
+      /** @internal */
+      get labelContent() {
+          if (this.label) {
+              return this.label;
+          }
+          if (!this.$fastController.isConnected) {
+              return '';
+          }
+          const nodes = this.labelSlot.assignedNodes();
+          return nodes
+              .filter(node => node.textContent?.trim() !== '')
+              .map(node => node.textContent?.trim())
+              .join(' ');
+      }
+      /**
+       * @internal
+       */
+      clickHandler(e) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+      }
+      /**
+       * @internal
+       */
+      handleChange(source, propertyName) {
+          if (source instanceof ListOption
+              && (propertyName === 'hidden' || propertyName === 'visuallyHidden')) {
+              if (source.hidden || source.visuallyHidden) {
+                  this.hiddenOptions.add(source);
+              }
+              else {
+                  this.hiddenOptions.delete(source);
+              }
+              this.visuallyHidden = this.hiddenOptions.size === this.listOptions.length;
+          }
+      }
+      listOptionsChanged(prev, next) {
+          this.hiddenOptions.clear();
+          next.filter(o => o.hidden || o.visuallyHidden).forEach(o => this.hiddenOptions.add(o));
+          prev?.forEach(o => {
+              const notifier = Observable.getNotifier(o);
+              notifier.unsubscribe(this, 'hidden');
+              notifier.unsubscribe(this, 'visuallyHidden');
+          });
+          let allOptionsHidden = true;
+          next?.forEach(o => {
+              const notifier = Observable.getNotifier(o);
+              notifier.subscribe(this, 'hidden');
+              notifier.subscribe(this, 'visuallyHidden');
+              allOptionsHidden = allOptionsHidden && (o.hidden || o.visuallyHidden);
+          });
+          this.visuallyHidden = next.length === 0 || allOptionsHidden;
+      }
+  }
+  __decorate$1([
+      attr
+  ], ListOptionGroup.prototype, "label", void 0);
+  __decorate$1([
+      attr({ mode: 'boolean' })
+  ], ListOptionGroup.prototype, "hidden", void 0);
+  __decorate$1([
+      attr({ attribute: 'visually-hidden', mode: 'boolean' })
+  ], ListOptionGroup.prototype, "visuallyHidden", void 0);
+  __decorate$1([
+      attr({ attribute: 'top-separator-visible', mode: 'boolean' })
+  ], ListOptionGroup.prototype, "topSeparatorVisible", void 0);
+  __decorate$1([
+      attr({ attribute: 'bottom-separator-visible', mode: 'boolean' })
+  ], ListOptionGroup.prototype, "bottomSeparatorVisible", void 0);
+  __decorate$1([
+      observable
+  ], ListOptionGroup.prototype, "hasOverflow", void 0);
+  __decorate$1([
+      observable
+  ], ListOptionGroup.prototype, "listOptions", void 0);
+  __decorate$1([
+      volatile
+  ], ListOptionGroup.prototype, "labelContent", null);
+  const nimbleListOptionGroup = ListOptionGroup.compose({
+      baseName: 'list-option-group',
+      baseClass: FoundationElement,
+      template: template$r,
+      styles: styles$C
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleListOptionGroup());
+
   /**
    * Base class for mapping configuration elements
    */
@@ -25604,7 +25821,7 @@
 
   const styles$x = css `
     ${display('inline-block')}
-    ${styles$H}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -43737,7 +43954,7 @@ img.ProseMirror-separator {
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
   const styles$t = css `
-    ${styles$I}
+    ${styles$J}
 
     :host {
         height: auto;
@@ -43775,8 +43992,8 @@ img.ProseMirror-separator {
                 @click="${(x, c) => x.clickHandler(c.event)}"
                 ?disabled="${x => x.disabled}"
             >
-                <slot
-                    ${slotted({ filter: (n) => n instanceof HTMLElement && ListboxElement.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
+                <slot name="option"
+                    ${slotted({ filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
                 >
                 </slot>
             </div>
@@ -44129,7 +44346,7 @@ img.ProseMirror-separator {
 
   const styles$s = css `
     ${display('inline-flex')}
-    ${styles$H}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -59032,8 +59249,8 @@ img.ProseMirror-separator {
       .register(nimbleRichTextViewer());
 
   const styles$q = css `
+    ${styles$J}
     ${styles$I}
-    ${styles$H}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -59171,6 +59388,12 @@ img.ProseMirror-separator {
             }
         `));
 
+  const isListOption = (el) => {
+      return el instanceof ListOption;
+  };
+  const isListOptionGroup = (n) => {
+      return n instanceof ListOptionGroup;
+  };
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
   const template$l = (context, definition) => html `
@@ -59272,8 +59495,9 @@ img.ProseMirror-separator {
                     <div ${ref('scrollableRegion')}
                         class="scrollable-region">
                         <slot
+                            name="option"
                             ${slotted({
-    filter: (n) => n instanceof HTMLElement && isListboxOption(n),
+    filter: (n) => n instanceof HTMLElement && (isListOption(n) || isListOptionGroup(n)),
     flatten: true,
     property: 'slottedOptions',
 })}
@@ -59308,15 +59532,15 @@ img.ProseMirror-separator {
       }
   }
 
-  const isNimbleListOption = (el) => {
-      return el instanceof ListOption;
-  };
   const isOptionSelectable = (el) => {
       return !el.visuallyHidden && !el.disabled && !el.hidden;
   };
   const isOptionPlaceholder = (el) => {
       return el.disabled && el.hidden;
   };
+  const isOptionOrGroupVisible = (el) => {
+      return !el.visuallyHidden && !el.hidden;
+  };
   /**
    * A nimble-styled HTML select.
    */
@@ -59437,13 +59661,25 @@ img.ProseMirror-separator {
               notifier.unsubscribe(this, 'hidden');
               notifier.unsubscribe(this, 'disabled');
           });
-          super.slottedOptionsChanged(prev, next);
-          this.options.forEach(o => {
+          prev?.filter(isListOptionGroup).forEach(el => {
+              const notifier = Observable.getNotifier(el);
+              notifier.unsubscribe(this, 'hidden');
+              notifier.unsubscribe(this, 'visuallyHidden');
+          });
+          const options = this.getSlottedOptions(next);
+          super.slottedOptionsChanged(prev, options);
+          options.forEach(o => {
               const notifier = Observable.getNotifier(o);
               notifier.subscribe(this, 'value');
               notifier.subscribe(this, 'hidden');
               notifier.subscribe(this, 'disabled');
           });
+          next?.filter(isListOptionGroup).forEach(el => {
+              this.updateAdjacentSeparatorState(el);
+              const notifier = Observable.getNotifier(el);
+              notifier.subscribe(this, 'hidden');
+              notifier.subscribe(this, 'visuallyHidden');
+          });
           this.setProxyOptions();
           this.updateValue();
           // We need to force an update to the filteredOptions observable
@@ -59496,8 +59732,7 @@ img.ProseMirror-separator {
                   break;
               }
               case 'selected': {
-                  if (isNimbleListOption(sourceElement)
-                      && sourceElement.selected) {
+                  if (isListOption(sourceElement) && sourceElement.selected) {
                       this.selectedIndex = this.options.indexOf(sourceElement);
                   }
                   else {
@@ -59506,12 +59741,27 @@ img.ProseMirror-separator {
                   break;
               }
               case 'hidden': {
-                  if (isNimbleListOption(sourceElement)) {
+                  if (isListOption(sourceElement)) {
                       sourceElement.visuallyHidden = sourceElement.hidden;
+                      this.updateAdjacentSeparatorState(sourceElement);
                   }
+                  else if (isListOptionGroup(sourceElement)) {
+                      sourceElement.listOptions.forEach(e => {
+                          e.visuallyHidden = sourceElement.hidden;
+                      });
+                      this.updateAdjacentSeparatorState(sourceElement);
+                  }
+                  this.filterOptions();
                   this.updateDisplayValue();
                   break;
               }
+              case 'visuallyHidden': {
+                  if (isListOptionGroup(sourceElement)
+                      || isListOption(sourceElement)) {
+                      this.updateAdjacentSeparatorState(sourceElement);
+                  }
+                  break;
+              }
               case 'disabled': {
                   this.updateDisplayValue();
                   break;
@@ -59764,8 +60014,7 @@ img.ProseMirror-separator {
           const startIndex = this.openActiveIndex ?? this.selectedIndex;
           for (let i = startIndex + 1; i < this.options.length; i++) {
               const listOption = this.options[i];
-              if (isNimbleListOption(listOption)
-                  && isOptionSelectable(listOption)) {
+              if (isListOption(listOption) && isOptionSelectable(listOption)) {
                   this.setActiveOption(i);
                   break;
               }
@@ -59780,8 +60029,7 @@ img.ProseMirror-separator {
           const startIndex = this.openActiveIndex ?? this.selectedIndex;
           for (let i = startIndex - 1; i >= 0; i--) {
               const listOption = this.options[i];
-              if (isNimbleListOption(listOption)
-                  && isOptionSelectable(listOption)) {
+              if (isListOption(listOption) && isOptionSelectable(listOption)) {
                   this.setActiveOption(i);
                   break;
               }
@@ -59791,14 +60039,14 @@ img.ProseMirror-separator {
        * @internal
        */
       selectFirstOption() {
-          const newActiveOptionIndex = this.options.findIndex(o => isNimbleListOption(o) && isOptionSelectable(o));
+          const newActiveOptionIndex = this.options.findIndex(o => isListOption(o) && isOptionSelectable(o));
           this.setActiveOption(newActiveOptionIndex);
       }
       /**
        * @internal
        */
       selectLastOption() {
-          const newActiveOptionIndex = findLastIndex(this.options, o => isNimbleListOption(o) && isOptionSelectable(o));
+          const newActiveOptionIndex = findLastIndex(this.options, o => isListOption(o) && isOptionSelectable(o));
           this.setActiveOption(newActiveOptionIndex);
       }
       /**
@@ -59866,7 +60114,7 @@ img.ProseMirror-separator {
               return;
           }
           const activeOption = this.options[this.openActiveIndex ?? this.selectedIndex];
-          if (isNimbleListOption(activeOption)) {
+          if (isListOption(activeOption)) {
               activeOption.activeOption = false;
           }
           this.openActiveIndex = undefined;
@@ -59909,7 +60157,7 @@ img.ProseMirror-separator {
        */
       setDefaultSelectedOption() {
           const options = this.options
-              ?? Array.from(this.children).filter(o => isNimbleListOption(o));
+              ?? Array.from(this.children).filter(o => isListOption(o));
           const optionIsSelected = (option) => {
               return option.hasAttribute('selected') || option.selected;
           };
@@ -59943,16 +60191,28 @@ img.ProseMirror-separator {
               this.selectedIndex = 0;
           }
       }
+      getSlottedOptions(slottedElements) {
+          const options = [];
+          slottedElements?.forEach(el => {
+              if (isListOption(el)) {
+                  options.push(el);
+              }
+              else if (isListOptionGroup(el)) {
+                  options.push(...this.getGroupOptions(el));
+              }
+          });
+          return options;
+      }
       setActiveOption(newActiveIndex) {
           const activeOption = this.options[newActiveIndex];
           if (this.open) {
-              if (isNimbleListOption(activeOption)) {
+              if (isListOption(activeOption)) {
                   activeOption.activeOption = true;
               }
               const previousActiveIndex = this.openActiveIndex ?? this.selectedIndex;
               const previousActiveOption = this.options[previousActiveIndex];
               if (previousActiveIndex !== newActiveIndex
-                  && isNimbleListOption(previousActiveOption)) {
+                  && isListOption(previousActiveOption)) {
                   previousActiveOption.activeOption = false;
               }
               this.openActiveIndex = newActiveIndex;
@@ -60006,32 +60266,110 @@ img.ProseMirror-separator {
               : Math.trunc(availableBottom);
           this.updateListboxMaxHeightCssVariable();
       }
+      updateAdjacentSeparatorState(element) {
+          const previousElement = this.getPreviousVisibleOptionOrGroup(element);
+          const nextElement = this.getNextVisibleOptionOrGroup(element);
+          if (isOptionOrGroupVisible(element)) {
+              const topSeparatorVisible = isListOption(previousElement);
+              this.setTopSeparatorState(element, topSeparatorVisible);
+              const bottomSeparatorVisible = nextElement !== null;
+              this.setBottomSeparatorState(element, bottomSeparatorVisible);
+              this.setBottomSeparatorState(previousElement, true);
+          }
+          else {
+              const nextTopSeparatorVisible = isListOption(previousElement);
+              this.setTopSeparatorState(nextElement, nextTopSeparatorVisible);
+              const previousBottomSeparatorVisible = nextElement !== null;
+              this.setBottomSeparatorState(previousElement, previousBottomSeparatorVisible);
+          }
+      }
+      setTopSeparatorState(element, visible) {
+          if (isListOptionGroup(element)) {
+              element.topSeparatorVisible = visible;
+          }
+      }
+      setBottomSeparatorState(element, visible) {
+          if (isListOptionGroup(element)) {
+              element.bottomSeparatorVisible = visible;
+          }
+      }
+      getPreviousVisibleOptionOrGroup(element) {
+          let previousElement = element.previousElementSibling;
+          while (previousElement) {
+              if ((isListOption(previousElement)
+                  || isListOptionGroup(previousElement))
+                  && isOptionOrGroupVisible(previousElement)) {
+                  return previousElement;
+              }
+              previousElement = previousElement.previousElementSibling;
+          }
+          return null;
+      }
+      getNextVisibleOptionOrGroup(element) {
+          let nextElement = element.nextElementSibling;
+          while (nextElement) {
+              if ((isListOption(nextElement) || isListOptionGroup(nextElement))
+                  && isOptionOrGroupVisible(nextElement)) {
+                  return nextElement;
+              }
+              nextElement = nextElement.nextElementSibling;
+          }
+          return null;
+      }
+      isOptionHiddenOrFilteredOut(option) {
+          if (option.hidden) {
+              return true;
+          }
+          return !this.filterMatchesText(option.text);
+      }
+      filterMatchesText(text) {
+          const filter = this.filter.toLowerCase();
+          const normalizedFilter = diacriticInsensitiveStringNormalizer(filter);
+          return diacriticInsensitiveStringNormalizer(text).includes(normalizedFilter);
+      }
       /**
        * Filter available options by text value.
        *
        * @public
        */
       filterOptions() {
-          const filter = this.filter.toLowerCase();
-          if (filter) {
-              this.filteredOptions = this.options.filter(option => {
-                  const normalizedFilter = diacriticInsensitiveStringNormalizer(filter);
-                  return (!option.hidden
-                      && diacriticInsensitiveStringNormalizer(option.text).includes(normalizedFilter));
-              });
-          }
-          else {
-              this.filteredOptions = this.options.filter(option => !option.hidden);
+          if (!this.$fastController.isConnected) {
+              return;
           }
-          this.options.forEach(o => {
-              if (isNimbleListOption(o)) {
-                  if (!this.filteredOptions.includes(o)) {
-                      o.visuallyHidden = true;
+          const filteredOptions = [];
+          for (const element of this.slottedOptions) {
+              if (isListOptionGroup(element)) {
+                  if (element.hidden) {
+                      continue; // no need to process hidden groups
                   }
-                  else {
-                      o.visuallyHidden = false;
+                  const groupOptions = this.getGroupOptions(element);
+                  const groupMatchesFilter = this.filterMatchesText(element.labelContent);
+                  groupOptions.forEach(option => {
+                      option.visuallyHidden = groupMatchesFilter
+                          ? false
+                          : this.isOptionHiddenOrFilteredOut(option);
+                      if (!option.visuallyHidden) {
+                          filteredOptions.push(option);
+                      }
+                  });
+              }
+              else if (isListOption(element)) {
+                  element.visuallyHidden = this.isOptionHiddenOrFilteredOut(element);
+                  if (!element.visuallyHidden) {
+                      filteredOptions.push(element);
                   }
               }
+          }
+          this.filteredOptions = filteredOptions;
+      }
+      getGroupOptions(group) {
+          return Array.from(group.children)
+              .filter(el => isListOption(el))
+              .map(el => {
+              if (group.hidden && isListOption(el)) {
+                  el.visuallyHidden = true;
+              }
+              return el;
           });
       }
       /**
@@ -70736,7 +71074,7 @@ img.ProseMirror-separator {
 
   const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$H}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -71082,7 +71420,7 @@ img.ProseMirror-separator {
 
   const styles$5 = css `
     ${display('inline-block')}
-    ${styles$H}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};