@ni/nimble-components 17.0.8 → 17.2.0

package/dist/all-components-bundle.js

@@ -15541,6 +15541,9 @@
         iconSize: 'icon-size',
         groupHeaderTextTransform: 'group-header-text-transform',
         drawerWidth: 'drawer-width',
+        spinnerSmallHeight: 'spinner-small-height',
+        spinnerMediumHeight: 'spinner-medium-height',
+        spinnerLargeHeight: 'spinner-large-height',
         smallDelay: 'small-delay',
         mediumDelay: 'medium-delay',
         largeDelay: 'large-delay',
@@ -15713,9 +15716,9 @@
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-    const template$h = html `<slot></slot>`;
+    const template$j = html `<slot></slot>`;
 
-    const styles$G = css `
+    const styles$I = css `
     :host {
         display: contents;
     }
@@ -15771,8 +15774,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$G,
-        template: template$h
+        styles: styles$I,
+        template: template$j
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -15810,6 +15813,9 @@
     const borderWidth = DesignToken.create(styleNameFromTokenName(tokenNames.borderWidth)).withDefault('1px');
     const iconSize = DesignToken.create(styleNameFromTokenName(tokenNames.iconSize)).withDefault('16px');
     const drawerWidth = DesignToken.create(styleNameFromTokenName(tokenNames.drawerWidth)).withDefault('784px');
+    const spinnerSmallHeight = DesignToken.create(styleNameFromTokenName(tokenNames.spinnerSmallHeight)).withDefault('16px');
+    DesignToken.create(styleNameFromTokenName(tokenNames.spinnerMediumHeight)).withDefault('32px');
+    DesignToken.create(styleNameFromTokenName(tokenNames.spinnerLargeHeight)).withDefault('64px');
     // Drop Shadow Tokens
     DesignToken.create(styleNameFromTokenName(tokenNames.elevation1BoxShadow)).withDefault((element) => `0px 1px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
     const elevation2BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation2BoxShadow)).withDefault((element) => `0px 2px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
@@ -15931,7 +15937,7 @@
         }
     }
 
-    const styles$F = css `
+    const styles$H = css `
     ${display('inline')}
 
     :host {
@@ -16014,7 +16020,7 @@
 `;
 
     // prettier-ignore
-    const template$g = (context, definition) => html `
+    const template$i = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -16087,8 +16093,8 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$g,
-        styles: styles$F,
+        template: template$i,
+        styles: styles$H,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -16173,7 +16179,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$E = css `
+    const styles$G = css `
     ${display('inline-flex')}
 
     :host {
@@ -16454,8 +16460,8 @@
             }
         `));
 
-    const styles$D = css `
-    ${styles$E}
+    const styles$F = css `
+    ${styles$G}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -16463,7 +16469,7 @@
     }
 `;
 
-    const template$f = (context, definition) => html `
+    const template$h = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -16545,15 +16551,398 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$f,
-        styles: styles$D,
+        template: template$h,
+        styles: styles$F,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
 
+    const styles$E = css `
+    ${display('inline-flex')}
+
+    :host {
+        position: relative;
+        box-sizing: border-box;
+        font: ${bodyFont};
+        height: ${controlHeight};
+        color: ${bodyFontColor};
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        --ni-private-active-indicator-width: 2px;
+        --ni-private-focus-indicator-width: 1px;
+        --ni-private-indicator-lines-gap: 1px;
+        --ni-private-focus-indicator-inset-width: 3px;
+    }
+
+    :host(:hover) {
+        background-color: ${fillHoverColor};
+    }
+
+    :host(:hover[aria-selected='true']) {
+        background-color: ${fillHoverSelectedColor};
+    }
+
+    :host(:focus) {
+        outline: none;
+    }
+
+    :host(${focusVisible}) {
+        outline: none;
+    }
+
+    :host(:active) {
+        background: none;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        color: ${bodyDisabledFontColor};
+        background: none;
+    }
+
+    slot:not([name]) {
+        display: block;
+        padding: calc(${standardPadding} / 2) ${standardPadding}
+            calc(${standardPadding} / 2 - ${borderWidth});
+    }
+
+    :host::before {
+        content: '';
+        position: absolute;
+        bottom: calc(
+            var(--ni-private-active-indicator-width) +
+                var(--ni-private-indicator-lines-gap)
+        );
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-focus-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::before {
+            transition-duration: 0.01s;
+        }
+    }
+
+    :host(${focusVisible})::before {
+        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));
+    }
+
+    :host::after {
+        content: '';
+        position: absolute;
+        bottom: 0px;
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-active-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::after {
+            transition-duration: 0.01s;
+        }
+    }
+
+    :host(${focusVisible})::after {
+        width: 100%;
+        border-bottom-width: var(--ni-private-focus-indicator-width);
+    }
+
+    :host([aria-selected='true'])::after {
+        width: 100%;
+        border-bottom-width: var(--ni-private-active-indicator-width);
+    }
+
+    :host([aria-selected='true'][disabled])::after {
+        border-bottom-color: rgba(${borderHoverColor}, 0.3);
+    }
+`;
+
+    const styles$D = css `
+    ${styles$E}
+
+    a {
+        text-decoration: none;
+        color: inherit;
+        cursor: inherit;
+        outline: none;
+    }
+`;
+
+    const template$g = () => html `
+    <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
+        <a
+            download="${x => x.download}"
+            href=${x => (x.disabled ? null : x.href)}
+            hreflang="${x => x.hreflang}"
+            ping="${x => x.ping}"
+            referrerpolicy="${x => x.referrerpolicy}"
+            rel="${x => x.rel}"
+            target="${x => x.target}"
+            type="${x => x.type}"
+            tabindex="-1"
+        >
+            <slot></slot>
+        </a>
+    </template>
+`;
+
+    /**
+     * A nimble-styled link tab
+     */
+    class AnchorTab extends AnchorBase {
+        constructor() {
+            super(...arguments);
+            /**
+             * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
+             * @public
+             * @remarks
+             * HTML Attribute: disabled
+             */
+            this.disabled = false;
+        }
+    }
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], AnchorTab.prototype, "disabled", void 0);
+    const nimbleAnchorTab = AnchorTab.compose({
+        baseName: 'anchor-tab',
+        template: template$g,
+        styles: styles$D
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
+
     const styles$C = css `
+    ${display('grid')}
+
+    :host {
+        box-sizing: border-box;
+        grid-template-columns: auto auto 1fr;
+        grid-template-rows: auto 1fr;
+    }
+
+    .tablist {
+        display: grid;
+        grid-template-rows: auto auto;
+        grid-template-columns: auto;
+        width: max-content;
+        align-self: end;
+    }
+`;
+
+    const template$f = (context, definition) => html `
+    ${startSlotTemplate(context, definition)}
+    <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
+        <slot name="anchortab" ${slotted('tabs')}></slot>
+    </div>
+    ${endSlotTemplate(context, definition)}
+`;
+
+    /**
+     * A nimble-styled set of anchor tabs
+     */
+    class AnchorTabs extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            this.tabIds = [];
+            this.isDisabledElement = (el) => {
+                return el.getAttribute('aria-disabled') === 'true';
+            };
+            this.isFocusableElement = (el) => {
+                return !this.isDisabledElement(el);
+            };
+            this.setTabs = () => {
+                const gridHorizontalProperty = 'gridColumn';
+                const gridVerticalProperty = 'gridRow';
+                this.activetab = undefined;
+                let firstFocusableTab;
+                this.tabs.forEach((tab, index) => {
+                    const tabId = this.tabIds[index];
+                    const isActiveTab = this.activeid === tabId;
+                    if (!firstFocusableTab && this.isFocusableElement(tab)) {
+                        firstFocusableTab = tab;
+                    }
+                    const isTabStop = this.activeid === tabId && this.isFocusableElement(tab);
+                    tab.setAttribute('id', tabId);
+                    tab.setAttribute('aria-selected', isActiveTab ? 'true' : 'false');
+                    tab.removeEventListener('click', this.handleTabClick);
+                    tab.addEventListener('click', this.handleTabClick);
+                    tab.removeEventListener('keydown', this.handleTabKeyDown);
+                    tab.addEventListener('keydown', this.handleTabKeyDown);
+                    tab.setAttribute('tabindex', isTabStop ? '0' : '-1');
+                    if (isActiveTab) {
+                        this.activetab = tab;
+                    }
+                    tab.style[gridVerticalProperty] = '';
+                    tab.style[gridHorizontalProperty] = `${index + 1}`;
+                });
+                if (firstFocusableTab
+                    && (!this.activetab || !this.isFocusableElement(this.activetab))) {
+                    firstFocusableTab.setAttribute('tabindex', '0');
+                }
+            };
+            this.handleTabClick = (event) => {
+                const selectedTab = event.currentTarget;
+                if (selectedTab.nodeType === 1
+                    && this.isFocusableElement(selectedTab)) {
+                    this.tabs.forEach((tab) => {
+                        tab.setAttribute('tabindex', tab === selectedTab ? '0' : '-1');
+                    });
+                }
+            };
+            this.handleTabKeyDown = (event) => {
+                let anchor;
+                switch (event.key) {
+                    case keyArrowLeft:
+                        event.preventDefault();
+                        this.adjustBackward();
+                        break;
+                    case keyArrowRight:
+                        event.preventDefault();
+                        this.adjustForward();
+                        break;
+                    case keyHome:
+                        event.preventDefault();
+                        this.focusFirstOrLast(false);
+                        break;
+                    case keyEnd:
+                        event.preventDefault();
+                        this.focusFirstOrLast(true);
+                        break;
+                    case keySpace:
+                    case keyEnter:
+                        event.preventDefault();
+                        this.getTabAnchor(event.target).click();
+                        break;
+                    case 'ContextMenu':
+                        event.preventDefault();
+                        anchor = this.getTabAnchor(event.target);
+                        anchor.focus();
+                        anchor.dispatchEvent(new KeyboardEvent('keydown', {
+                            key: event.key,
+                            bubbles: false
+                        }));
+                        break;
+                    // do nothing
+                }
+            };
+            this.adjustForward = () => {
+                const group = this.tabs;
+                let index = 0;
+                const focusedTab = group.find(x => x === document.activeElement);
+                index = focusedTab ? group.indexOf(focusedTab) + 1 : 1;
+                if (index === group.length) {
+                    index = 0;
+                }
+                while (index < group.length && group.length > 1) {
+                    if (this.isFocusableElement(group[index])) {
+                        this.focusTabByIndex(group, index);
+                        break;
+                    }
+                    else if (focusedTab && index === group.indexOf(focusedTab)) {
+                        break;
+                    }
+                    else if (index + 1 >= group.length) {
+                        index = 0;
+                    }
+                    else {
+                        index += 1;
+                    }
+                }
+            };
+            this.adjustBackward = () => {
+                const group = this.tabs;
+                let index = 0;
+                const focusedTab = group.find(x => x === document.activeElement);
+                index = focusedTab ? group.indexOf(focusedTab) - 1 : 0;
+                index = index < 0 ? group.length - 1 : index;
+                while (index >= 0 && group.length > 1) {
+                    if (this.isFocusableElement(group[index])) {
+                        this.focusTabByIndex(group, index);
+                        break;
+                    }
+                    else if (index - 1 < 0) {
+                        index = group.length - 1;
+                    }
+                    else {
+                        index -= 1;
+                    }
+                }
+            };
+            this.focusTabByIndex = (group, index) => {
+                const focusedTab = group[index];
+                focusedTab.focus();
+                this.tabs.forEach((tab) => {
+                    tab.setAttribute('tabindex', tab === focusedTab ? '0' : '-1');
+                });
+            };
+        }
+        /**
+         * @internal
+         */
+        activeidChanged(_oldValue, _newValue) {
+            if (this.$fastController.isConnected) {
+                this.setTabs();
+            }
+        }
+        /**
+         * @internal
+         */
+        tabsChanged() {
+            if (this.$fastController.isConnected) {
+                this.tabIds = this.getTabIds();
+                this.setTabs();
+            }
+        }
+        /**
+         * @internal
+         */
+        connectedCallback() {
+            super.connectedCallback();
+            this.tabIds = this.getTabIds();
+        }
+        getTabIds() {
+            return this.tabs.map((tab) => {
+                return tab.getAttribute('id') ?? `tab-${uniqueId()}`;
+            });
+        }
+        focusFirstOrLast(focusLast) {
+            const focusableTabs = this.tabs.filter(t => !this.isDisabledElement(t));
+            const focusableIndex = focusLast ? focusableTabs.length - 1 : 0;
+            const index = this.tabs.indexOf(focusableTabs[focusableIndex]);
+            if (index > -1) {
+                this.focusTabByIndex(this.tabs, index);
+            }
+        }
+        getTabAnchor(tab) {
+            return tab.shadowRoot.querySelector('a');
+        }
+    }
+    __decorate$1([
+        attr
+    ], AnchorTabs.prototype, "activeid", void 0);
+    __decorate$1([
+        observable
+    ], AnchorTabs.prototype, "tabs", void 0);
+    applyMixins(AnchorTabs, StartEnd);
+    const nimbleAnchorTabs = AnchorTabs.compose({
+        baseName: 'anchor-tabs',
+        template: template$f,
+        styles: styles$C,
+        shadowOptions: {
+            delegatesFocus: false
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
+
+    const styles$B = css `
     :host {
         contain: layout;
         display: block;
@@ -16577,13 +16966,13 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$C
+        styles: styles$B
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleAnchoredRegion());
 
-    const styles$B = css `
+    const styles$A = css `
     ${display('inline-block')}
 
     :host {
@@ -16624,7 +17013,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$B
+        styles: styles$A
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -17230,7 +17619,7 @@
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026L4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363zm1.155-10.68l-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312z"/></svg>`
     };
 
-    const styles$A = css `
+    const styles$z = css `
     ${display('inline-flex')}
 
     :host {
@@ -17309,15 +17698,15 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$A,
+        styles: styles$z,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleBreadcrumbItem());
 
-    const styles$z = css `
-    ${styles$E}
+    const styles$y = css `
+    ${styles$G}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -17363,7 +17752,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$z,
+        styles: styles$y,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17443,7 +17832,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$y = css `
+    const styles$x = css `
     ${display('inline-flex')}
 
     :host {
@@ -17602,14 +17991,14 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$y,
+        styles: styles$x,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-    const styles$x = css `
+    const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -17727,14 +18116,14 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$x,
+        styles: styles$w,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
-    const styles$w = css `
-    ${styles$E}
+    const styles$v = css `
+    ${styles$G}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -17836,7 +18225,7 @@
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
         template: template$e,
-        styles: styles$w,
+        styles: styles$v,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17855,7 +18244,7 @@
     </template
 `;
 
-    const styles$v = css `
+    const styles$u = css `
     ${display('inline-flex')}
 
     :host {
@@ -17909,7 +18298,7 @@
         const composedIcon = iconClass.compose({
             baseName,
             template: template$d,
-            styles: styles$v,
+            styles: styles$u,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -17943,7 +18332,7 @@
         block: 'block'
     };
 
-    const styles$u = css `
+    const styles$t = css `
     ${display('inline-flex')}
 
     :host {
@@ -18171,7 +18560,7 @@
             }
         `));
 
-    const styles$t = css `
+    const styles$s = css `
     .error-icon {
         display: none;
     }
@@ -18209,9 +18598,9 @@
     }
 `;
 
-    const styles$s = css `
-    ${styles$u}
+    const styles$r = css `
     ${styles$t}
+    ${styles$s}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -18447,7 +18836,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$s,
+        styles: styles$r,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -18491,7 +18880,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$r = css `
+    const styles$q = css `
     ${display('grid')}
 
     dialog {
@@ -18734,12 +19123,12 @@
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
         template: template$c,
-        styles: styles$r,
+        styles: styles$q,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-    const styles$q = css `
+    const styles$p = css `
     ${display('block')}
 
     :host {
@@ -19007,7 +19396,7 @@
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
         template: template$b,
-        styles: styles$q
+        styles: styles$p
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -20639,7 +21028,7 @@
     }
     registerIcon('icon-xmark-check', IconXmarkCheck);
 
-    const styles$p = css `
+    const styles$o = css `
     ${display('flex')}
 
     :host {
@@ -20719,11 +21108,11 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$p
+        styles: styles$o
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
-    const styles$o = css `
+    const styles$n = css `
     ${display('grid')}
 
     :host {
@@ -20790,11 +21179,11 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$o
+        styles: styles$n
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
-    const styles$n = css `
+    const styles$m = css `
     ${display('inline-block')}
 
     :host {
@@ -21022,14 +21411,14 @@
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
         template: template$a,
-        styles: styles$n,
+        styles: styles$m,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
 
-    const styles$m = css `
+    const styles$l = css `
     ${display('grid')}
 
     :host {
@@ -21127,7 +21516,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$m,
+        styles: styles$l,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -21141,9 +21530,9 @@
         block: 'block'
     };
 
-    const styles$l = css `
+    const styles$k = css `
     ${display('inline-block')}
-    ${styles$t}
+    ${styles$s}
 
     :host {
         font: ${bodyFont};
@@ -21357,7 +21746,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$l,
+        styles: styles$k,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -21398,7 +21787,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    const styles$k = css `
+    const styles$j = css `
     ${display('inline-flex')}
 
     :host {
@@ -21498,12 +21887,12 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$k,
+        styles: styles$j,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-    const styles$j = css `
+    const styles$i = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -21538,16 +21927,16 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$j,
+        styles: styles$i,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
 
-    const styles$i = css `
-    ${styles$u}
+    const styles$h = css `
     ${styles$t}
+    ${styles$s}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -21623,7 +22012,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$i,
+        styles: styles$h,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${DesignSystem.tagFor(IconExclamationMark)}
@@ -21635,12 +22024,12 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-    const styles$h = css `
+    const styles$g = css `
     ${display('inline-flex')}
 
     :host {
-        width: 16px;
-        height: 16px;
+        height: ${spinnerSmallHeight};
+        aspect-ratio: 1 / 1;
     }
 
     div.container {
@@ -21797,11 +22186,11 @@
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
         template: template$9,
-        styles: styles$h
+        styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
 
-    const styles$g = css `
+    const styles$f = css `
     ${display('inline-flex')}
 
     :host {
@@ -22009,106 +22398,10 @@
         baseClass: Switch$1,
         baseName: 'switch',
         template: template$8,
-        styles: styles$g
+        styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-    const styles$f = css `
-    ${display('inline-flex')}
-
-    :host {
-        position: relative;
-        box-sizing: border-box;
-        font: ${bodyFont};
-        height: ${controlHeight};
-        color: ${bodyFontColor};
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        --ni-private-active-indicator-width: 2px;
-        --ni-private-focus-indicator-width: 1px;
-        --ni-private-indicator-lines-gap: 1px;
-        --ni-private-focus-indicator-inset-width: 3px;
-    }
-
-    :host(:hover) {
-        background-color: ${fillHoverColor};
-    }
-
-    :host(:focus) {
-        outline: none;
-    }
-
-    :host(:focus:hover) {
-        background-color: ${fillHoverSelectedColor};
-    }
-
-    :host(${focusVisible}) {
-        outline: none;
-    }
-
-    :host(:active) {
-        background: none;
-    }
-
-    :host([disabled]) {
-        cursor: default;
-        color: ${bodyDisabledFontColor};
-        background: none;
-    }
-
-    slot {
-        display: block;
-        padding: calc(${standardPadding} / 2) ${standardPadding}
-            calc(${standardPadding} / 2 - ${borderWidth});
-    }
-
-    :host::before {
-        content: '';
-        position: absolute;
-        bottom: calc(
-            var(--ni-private-active-indicator-width) +
-                var(--ni-private-indicator-lines-gap)
-        );
-        width: 0px;
-        height: 0px;
-        border-bottom: ${borderHoverColor}
-            var(--ni-private-focus-indicator-width) solid;
-        transition: width ${smallDelay} ease-in;
-    }
-
-    @media (prefers-reduced-motion) {
-        :host::before {
-            transition-duration: 0.01s;
-        }
-    }
-
-    :host(${focusVisible})::before {
-        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));
-    }
-
-    :host::after {
-        content: '';
-        position: absolute;
-        bottom: 0px;
-        width: 0px;
-        height: 0px;
-        border-bottom: ${borderHoverColor}
-            var(--ni-private-active-indicator-width) solid;
-        transition: width ${smallDelay} ease-in;
-    }
-
-    @media (prefers-reduced-motion) {
-        :host::after {
-            transition-duration: 0.01s;
-        }
-    }
-
-    :host([aria-selected='true'])::after {
-        width: 100%;
-    }
-`;
-
     /**
      * A nimble-styled HTML tab
      */
@@ -22118,7 +22411,7 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$f
+        styles: styles$E
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
@@ -25850,7 +26143,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$t}
+    ${styles$s}
 
     :host {
         font: ${bodyFont};