@ni/nimble-components 10.0.3 → 10.0.6

package/dist/all-components-bundle.js

@@ -4422,6 +4422,7 @@
      * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
      * and should include all non-deprecated and non-experimental Standard events
      */
+    const eventChange = "change";
     const eventResize = "resize";
     const eventScroll = "scroll";
 
@@ -13058,7 +13059,7 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$o = css `
+    const styles$p = css `
     :host {
         contain: layout;
         display: block;
@@ -13082,7 +13083,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$o
+        styles: styles$p
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -13417,9 +13418,9 @@
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
 
-    const template$4 = html `<slot></slot>`;
+    const template$5 = html `<slot></slot>`;
 
-    const styles$n = css `
+    const styles$o = css `
     :host {
         display: contents;
     }
@@ -13475,8 +13476,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$n,
-        template: template$4
+        styles: styles$o,
+        template: template$5
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -13724,7 +13725,7 @@
      */
     const themeBehavior = (lightStyle, darkStyleOrAlias, colorStyleOrAlias) => new ThemeStyleSheetBehavior(lightStyle, darkStyleOrAlias, colorStyleOrAlias);
 
-    const styles$m = css `
+    const styles$n = css `
     ${display('inline-block')}
 
     :host {
@@ -13787,7 +13788,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$m
+        styles: styles$n
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -14373,7 +14374,7 @@
      */
     const focusVisible = `:${focusVisible$1}`;
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('inline-flex')}
 
     :host {
@@ -14453,7 +14454,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$l,
+        styles: styles$m,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -14483,7 +14484,7 @@
         block: 'block'
     };
 
-    const styles$k = css `
+    const styles$l = css `
     ${display('inline-flex')}
 
     :host {
@@ -14591,7 +14592,7 @@
     }
 
     :host([disabled]) slot[name='start']::slotted(*) {
-        opacity: 0.6;
+        opacity: 0.3;
     }
 
     [part='end'] {
@@ -14599,6 +14600,10 @@
         ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
     }
 
+    :host([disabled]) slot[name='end']::slotted(*) {
+        opacity: 0.3;
+    }
+
     :host([content-hidden]) [part='end'] {
         display: none;
     }
@@ -14686,7 +14691,7 @@
             `));
 
     // prettier-ignore
-    const styles$j = styles$k
+    const styles$k = styles$l
         .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
                 :host(.primary) .control {
                     box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
@@ -14800,14 +14805,14 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$j,
+        styles: styles$k,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
-    const styles$i = css `
+    const styles$j = css `
     ${display('inline-flex')}
 
     :host {
@@ -14925,7 +14930,7 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$i,
+        styles: styles$j,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
@@ -16020,7 +16025,7 @@
         slideOutOptions
     };
 
-    const styles$h = css `
+    const styles$i = css `
     ${display('block')}
 
     :host {
@@ -16332,17 +16337,17 @@
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
         template: dialogTemplate,
-        styles: styles$h
+        styles: styles$i
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
-    const template$3 = html `
+    const template$4 = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('inline-flex')}
 
     :host {
@@ -16388,8 +16393,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$3,
-            styles: styles$g,
+            template: template$4,
+            styles: styles$h,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -17957,7 +17962,7 @@
     }
     registerIcon('xmark-check-icon', XmarkCheckIcon);
 
-    const styles$f = css `
+    const styles$g = css `
     ${display('flex')}
 
     :host {
@@ -18036,11 +18041,11 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$f
+        styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('grid')}
 
     :host {
@@ -18095,11 +18100,356 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$e
+        styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
+    const styles$e = css `
+    ${display('inline-block')}
+
+    :host {
+        height: ${controlHeight};
+    }
+
+    [part='button'] {
+        width: 100%;
+        height: 100%;
+    }
+
+    slot[name='menu']::slotted(*) {
+        margin-top: ${smallPadding};
+        margin-bottom: ${smallPadding};
+    }
+`;
+
     const styles$d = css `
+    ${styles$l}
+
+    .control[aria-pressed='true'] {
+        background-color: ${fillSelectedColor};
+        border-color: ${fillSelectedColor};
+    }
+
+    .control[aria-pressed='true']:hover {
+        background-color: ${fillSelectedColor};
+    }
+
+    .control[aria-pressed='true']${focusVisible} {
+        background-color: ${fillSelectedColor};
+    }
+
+    .control[aria-pressed='true'][disabled] {
+        background-color: ${fillSelectedColor};
+        border-color: ${fillSelectedColor};
+    }
+
+    .control[aria-pressed='true'][disabled]:hover {
+        background-color: ${fillSelectedColor};
+        border-color: ${fillSelectedColor};
+    }
+`;
+
+    const template$3 = (context, definition) => html `
+    <div
+        role="button"
+        part="control"
+        tabindex="${x => (x.disabled ? null : 0)}"
+        @keypress="${(x, c) => x.keypressHandler(c.event)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        class="control ${x => (x.checked ? 'checked' : '')}"
+        ?disabled="${x => x.disabled}"
+        ${'' /* Configure aria-disabled, aria-readonly, and aria-pressed based on the
+    toggle button's state to keep the ARIA attributes consistent with the component's
+    state without a client having to configure ARIA attributes directly */}
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        aria-pressed="${x => x.checked}"
+        ${'' /* Configure all other ARIA attributes based on the aria attributes
+    configured on the toggle button */}
+        aria-atomic="${x => x.ariaAtomic}"
+        aria-busy="${x => x.ariaBusy}"
+        aria-controls="${x => x.ariaControls}"
+        aria-current="${x => x.ariaCurrent}"
+        aria-describedby="${x => x.ariaDescribedby}"
+        aria-details="${x => x.ariaDetails}"
+        aria-errormessage="${x => x.ariaErrormessage}"
+        aria-expanded="${x => x.ariaExpanded}"
+        aria-flowto="${x => x.ariaFlowto}"
+        aria-haspopup="${x => x.ariaHaspopup}"
+        aria-hidden="${x => x.ariaHidden}"
+        aria-invalid="${x => x.ariaInvalid}"
+        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-live="${x => x.ariaLive}"
+        aria-owns="${x => x.ariaOwns}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
+        ${ref('control')}
+    >
+        ${startSlotTemplate(context, definition)}
+        <span class="content" part="content">
+            <slot></slot>
+        </span>
+        ${endSlotTemplate(context, definition)}
+    </div>
+`;
+
+    /**
+     * A nimble-styled toggle button control.
+     */
+    class ToggleButton extends Switch$1 {
+        constructor() {
+            super(...arguments);
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: appearance
+             */
+            this.appearance = ButtonAppearance.outline;
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: content-hidden
+             */
+            this.contentHidden = false;
+        }
+    }
+    __decorate([
+        attr
+    ], ToggleButton.prototype, "appearance", void 0);
+    __decorate([
+        attr({ attribute: 'content-hidden', mode: 'boolean' })
+    ], ToggleButton.prototype, "contentHidden", void 0);
+    applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
+    const nimbleToggleButton = ToggleButton.compose({
+        baseName: 'toggle-button',
+        template: template$3,
+        styles: styles$d,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton());
+
+    // prettier-ignore
+    const template$2 = context => html `
+    <template
+        ?open="${x => x.open}"
+        @focusout="${(x, c) => x.focusoutHandler(c.event)}"
+    >
+        <${context.tagFor(ToggleButton)}
+            part="button"
+            appearance="${x => x.appearance}"
+            content-hidden="${x => x.contentHidden}"
+            ?checked="${x => x.open}"
+            ?disabled="${x => x.disabled}"
+            aria-haspopup="true"
+            aria-expanded="${x => x.open}"
+            @change="${(x, c) => x.toggleButtonCheckedChangeHandler(c.event)}"
+            @keydown="${(x, c) => x.toggleButtonKeyDownHandler(c.event)}"
+            ${ref('toggleButton')}
+            exportparts="start,end"
+        >
+            ${'' /* Forward the contents of the 'start', 'end', and default slots to the toggle button */}
+            <slot slot="start" name="start"></slot>
+            <slot></slot>
+            <slot slot="end" name="end"></slot>
+        </${context.tagFor(ToggleButton)}>
+        ${when(x => x.open, html `
+            <${context.tagFor(AnchoredRegion)}
+                fixed-placement="true"
+                auto-update-mode="auto"
+                horizontal-inset="true"
+                horizontal-positioning-mode="dynamic"
+                vertical-positioning-mode="${x => (x.position === 'auto' ? 'dynamic' : 'locktodefault')}"
+                vertical-default-position="${x => (x.position === 'above' ? 'top' : 'bottom')}"
+                @loaded="${x => x.regionLoadedHandler()}"
+                @keydown="${(x, c) => x.menuKeyDownHandler(c.event)}"
+                ${ref('region')}
+            >
+                <span part="menu">
+                    <slot name="menu" ${slotted({ property: 'slottedMenus', filter: elements('[role=menu]') })}></slot>
+                </span>
+            </${context.tagFor(AnchoredRegion)}>
+        `)}
+    </template>
+`;
+
+    /**
+     * Types of menu button appearance.
+     * @public
+     */
+    /**
+     * The options of where to position the menu relative to the menu button.
+     */
+    const MenuButtonPosition = {
+        above: 'above',
+        below: 'below',
+        auto: 'auto'
+    };
+
+    /**
+     * A nimble-styled menu button control.
+     */
+    class MenuButton extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            this.appearance = ButtonAppearance.outline;
+            this.disabled = false;
+            this.contentHidden = false;
+            /**
+             * Specifies whether or not the menu is open.
+             */
+            this.open = false;
+            /**
+             * Configures where the menu should be placed relative to the button that opens the menu.
+             */
+            this.position = MenuButtonPosition.auto;
+            /**
+             * Used to maintain the internal state of whether the last menu item should be focused instead
+             * of the first menu item the next time the menu is opened.
+             */
+            this.focusLastItemWhenOpened = false;
+            this.menuChangeHandler = () => {
+                this.open = false;
+                this.toggleButton.focus();
+            };
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            if (this.region) {
+                this.region.removeEventListener(eventChange, this.menuChangeHandler);
+            }
+        }
+        toggleButtonChanged(_prev, _next) {
+            if (this.region && this.toggleButton) {
+                this.region.anchorElement = this.toggleButton;
+            }
+        }
+        regionChanged(prev, _next) {
+            if (prev) {
+                prev.removeEventListener(eventChange, this.menuChangeHandler);
+            }
+            if (this.region) {
+                if (this.toggleButton) {
+                    this.region.anchorElement = this.toggleButton;
+                }
+                this.region.addEventListener(eventChange, this.menuChangeHandler, {
+                    capture: true
+                });
+            }
+        }
+        openChanged(_prev, _next) {
+            if (this.toggleButton) {
+                this.toggleButton.checked = this.open;
+            }
+            if (!this.open) {
+                // Only fire an event here if the menu is changing to being closed. Otherwise,
+                // wait until the menu is actually opened before firing the event.
+                this.$emit('open-change');
+            }
+        }
+        regionLoadedHandler() {
+            if (this.focusLastItemWhenOpened) {
+                this.focusLastMenuItem();
+                this.focusLastItemWhenOpened = false;
+            }
+            else {
+                this.focusMenu();
+            }
+            this.$emit('open-change');
+        }
+        focusoutHandler(e) {
+            if (!this.open) {
+                return true;
+            }
+            const focusTarget = e.relatedTarget;
+            if (!this.contains(focusTarget)) {
+                this.open = false;
+                return false;
+            }
+            return true;
+        }
+        toggleButtonCheckedChangeHandler(e) {
+            this.open = this.toggleButton.checked;
+            // Don't bubble the 'change' event from the toggle button because
+            // the menu button has its own 'open-change' event.
+            e.stopPropagation();
+            return false;
+        }
+        toggleButtonKeyDownHandler(e) {
+            switch (e.key) {
+                case keyArrowUp:
+                    this.focusLastItemWhenOpened = true;
+                    this.open = true;
+                    return false;
+                case keyArrowDown:
+                    this.open = true;
+                    return false;
+                default:
+                    return true;
+            }
+        }
+        menuKeyDownHandler(e) {
+            switch (e.key) {
+                case keyEscape:
+                    this.open = false;
+                    this.toggleButton.focus();
+                    return false;
+                default:
+                    return true;
+            }
+        }
+        get menu() {
+            return this.slottedMenus?.length ? this.slottedMenus[0] : undefined;
+        }
+        focusMenu() {
+            this.menu?.focus();
+        }
+        focusLastMenuItem() {
+            const menuItems = this.menu?.querySelectorAll('[role=menuitem]');
+            if (menuItems?.length) {
+                const lastMenuItem = menuItems[menuItems.length - 1];
+                lastMenuItem.focus();
+            }
+        }
+    }
+    __decorate([
+        attr
+    ], MenuButton.prototype, "appearance", void 0);
+    __decorate([
+        attr({ mode: 'boolean' })
+    ], MenuButton.prototype, "disabled", void 0);
+    __decorate([
+        attr({ attribute: 'content-hidden', mode: 'boolean' })
+    ], MenuButton.prototype, "contentHidden", void 0);
+    __decorate([
+        attr({ mode: 'boolean' })
+    ], MenuButton.prototype, "open", void 0);
+    __decorate([
+        attr({ attribute: 'position' })
+    ], MenuButton.prototype, "position", void 0);
+    __decorate([
+        observable
+    ], MenuButton.prototype, "toggleButton", void 0);
+    __decorate([
+        observable
+    ], MenuButton.prototype, "region", void 0);
+    __decorate([
+        observable
+    ], MenuButton.prototype, "slottedMenus", void 0);
+    const nimbleMenuButton = MenuButton.compose({
+        baseName: 'menu-button',
+        template: template$2,
+        styles: styles$e,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
+
+    const styles$c = css `
     ${display('grid')}
 
     :host {
@@ -18197,12 +18547,12 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$d,
+        styles: styles$c,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
 
-    const styles$c = css `
+    const styles$b = css `
     ${display('inline-block')}
 
     :host {
@@ -18328,7 +18678,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$c,
+        styles: styles$b,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -18337,7 +18687,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    const styles$b = css `
+    const styles$a = css `
     ${display('inline-flex')}
 
     :host {
@@ -18505,12 +18855,12 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$b,
+        styles: styles$a,
         indicator: arrowExpanderDown16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-    const styles$a = css `
+    const styles$9 = css `
     ${display('inline-flex')}
 
     :host {
@@ -18678,7 +19028,7 @@
         `));
 
     // prettier-ignore
-    const template$2 = html `
+    const template$1 = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -18722,12 +19072,12 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$2,
-        styles: styles$a
+        template: template$1,
+        styles: styles$9
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-    const styles$9 = css `
+    const styles$8 = css `
     ${display('inline-flex')}
 
     :host {
@@ -18831,11 +19181,11 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$9
+        styles: styles$8
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-    const styles$8 = css `
+    const styles$7 = css `
     ${display('block')}
 
     :host {
@@ -18855,11 +19205,11 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$8
+        styles: styles$7
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
-    const styles$7 = css `
+    const styles$6 = css `
     ${display('grid')}
 
     :host {
@@ -18897,11 +19247,11 @@
         baseName: 'tabs',
         baseClass: Tabs$1,
         template: tabsTemplate,
-        styles: styles$7
+        styles: styles$6
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-    const styles$6 = css `
+    const styles$5 = css `
     ${display('flex')}
 
     :host {
@@ -18921,7 +19271,7 @@
     }
 `;
 
-    const template$1 = html `
+    const template = html `
     <template slot="end">
         <div class="separator"></div>
         <slot></slot>
@@ -18935,8 +19285,8 @@
     }
     const nimbleTabsToolbar = TabsToolbar.compose({
         baseName: 'tabs-toolbar',
-        template: template$1,
-        styles: styles$6
+        template,
+        styles: styles$5
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
 
@@ -18945,7 +19295,7 @@
         block: 'block'
     };
 
-    const styles$5 = css `
+    const styles$4 = css `
     ${display('inline-flex')}
 
     :host {
@@ -19087,7 +19437,7 @@
         baseName: 'text-area',
         baseClass: TextArea$1,
         template: textAreaTemplate,
-        styles: styles$5,
+        styles: styles$4,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19104,7 +19454,7 @@
         frameless: 'frameless'
     };
 
-    const styles$4 = css `
+    const styles$3 = css `
     ${display('inline-block')}
 
     :host {
@@ -19458,7 +19808,7 @@
         baseName: 'text-field',
         baseClass: TextField$1,
         template: textFieldTemplate,
-        styles: styles$4,
+        styles: styles$3,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -19479,116 +19829,6 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-    const styles$3 = css `
-    ${styles$k}
-
-    .control[aria-pressed='true'] {
-        background-color: ${fillSelectedColor};
-        border-color: ${fillSelectedColor};
-    }
-
-    .control[aria-pressed='true']:hover {
-        background-color: ${fillSelectedColor};
-    }
-
-    .control[aria-pressed='true']${focusVisible} {
-        background-color: ${fillSelectedColor};
-    }
-
-    .control[aria-pressed='true'][disabled] {
-        background-color: ${fillSelectedColor};
-        border-color: ${fillSelectedColor};
-    }
-
-    .control[aria-pressed='true'][disabled]:hover {
-        background-color: ${fillSelectedColor};
-        border-color: ${fillSelectedColor};
-    }
-`;
-
-    const template = (context, definition) => html `
-    <div
-        role="button"
-        part="control"
-        tabindex="${x => (x.disabled ? null : 0)}"
-        @keypress="${(x, c) => x.keypressHandler(c.event)}"
-        @click="${(x, c) => x.clickHandler(c.event)}"
-        class="control ${x => (x.checked ? 'checked' : '')}"
-        ?disabled="${x => x.disabled}"
-        ${'' /* Configure aria-disabled, aria-readonly, and aria-pressed based on the
-    toggle button's state to keep the ARIA attributes consistent with the component's
-    state without a client having to configure ARIA attributes directly */}
-        aria-disabled="${x => x.disabled}"
-        aria-readonly="${x => x.readOnly}"
-        aria-pressed="${x => x.checked}"
-        ${'' /* Configure all other ARIA attributes based on the aria attributes
-    configured on the toggle button */}
-        aria-atomic="${x => x.ariaAtomic}"
-        aria-busy="${x => x.ariaBusy}"
-        aria-controls="${x => x.ariaControls}"
-        aria-current="${x => x.ariaCurrent}"
-        aria-describedby="${x => x.ariaDescribedby}"
-        aria-details="${x => x.ariaDetails}"
-        aria-errormessage="${x => x.ariaErrormessage}"
-        aria-expanded="${x => x.ariaExpanded}"
-        aria-flowto="${x => x.ariaFlowto}"
-        aria-haspopup="${x => x.ariaHaspopup}"
-        aria-hidden="${x => x.ariaHidden}"
-        aria-invalid="${x => x.ariaInvalid}"
-        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-        aria-label="${x => x.ariaLabel}"
-        aria-labelledby="${x => x.ariaLabelledby}"
-        aria-live="${x => x.ariaLive}"
-        aria-owns="${x => x.ariaOwns}"
-        aria-relevant="${x => x.ariaRelevant}"
-        aria-roledescription="${x => x.ariaRoledescription}"
-        ${ref('control')}
-    >
-        ${startSlotTemplate(context, definition)}
-        <span class="content" part="content">
-            <slot></slot>
-        </span>
-        ${endSlotTemplate(context, definition)}
-    </div>
-`;
-
-    /**
-     * A nimble-styled toggle button control.
-     */
-    class ToggleButton extends Switch$1 {
-        constructor() {
-            super(...arguments);
-            /**
-             * @public
-             * @remarks
-             * HTML Attribute: appearance
-             */
-            this.appearance = ButtonAppearance.outline;
-            /**
-             * @public
-             * @remarks
-             * HTML Attribute: content-hidden
-             */
-            this.contentHidden = false;
-        }
-    }
-    __decorate([
-        attr
-    ], ToggleButton.prototype, "appearance", void 0);
-    __decorate([
-        attr({ attribute: 'content-hidden', mode: 'boolean' })
-    ], ToggleButton.prototype, "contentHidden", void 0);
-    applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
-    const nimbleToggleButton = ToggleButton.compose({
-        baseName: 'toggle-button',
-        template,
-        styles: styles$3,
-        shadowOptions: {
-            delegatesFocus: true
-        }
-    });
-    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton());
-
     const styles$2 = css `
     .positioning-region {
         display: flex;