@ni/nimble-components 19.6.0 → 19.6.2

package/dist/all-components-bundle.js

@@ -16232,7 +16232,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Fri, 14 Jul 2023 20:41:52 GMT
+     * Generated on Mon, 17 Jul 2023 14:50:36 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -16265,7 +16265,7 @@
     const GroupLabel1Family = "Source Sans Pro";
     const GroupLabel1Weight = "600";
     const ButtonLabel1Family = "Source Sans Pro";
-    const ButtonLabel1Weight = "400";
+    const ButtonLabel1Weight = "600";
     const Title1Family = "Source Sans Pro";
     const Title1Weight = "400";
     const Headline2Family = "Noto Serif";
@@ -16604,9 +16604,9 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$v = html `<slot></slot>`;
+    const template$w = html `<slot></slot>`;
 
-    const styles$Q = css `
+    const styles$R = css `
     :host {
         display: contents;
     }
@@ -16662,8 +16662,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$Q,
-        template: template$v
+        styles: styles$R,
+        template: template$w
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -16706,7 +16706,7 @@
     const warningColor = DesignToken.create(styleNameFromTokenName(tokenNames.warningColor)).withDefault((element) => getWarningColorForTheme(element));
     const passColor = DesignToken.create(styleNameFromTokenName(tokenNames.passColor)).withDefault((element) => getPassColorForTheme(element));
     const informationColor = DesignToken.create(styleNameFromTokenName(tokenNames.informationColor)).withDefault((element) => getInformationColorForTheme(element));
-    const borderHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderHoverColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, White));
+    const borderHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderHoverColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, White));
     // Component Color Tokens
     const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
     DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
@@ -16827,7 +16827,7 @@
         return getColorForTheme(element, Black91, Black15, White);
     }
     function getFillSelectedColorForTheme(element) {
-        return getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, White);
+        return getColorForTheme(element, DigitalGreenLight, PowerGreen, White);
     }
     function getFillHoverColorForTheme(element) {
         return getColorForTheme(element, Black91, Black15, White);
@@ -16848,7 +16848,7 @@
         }
     }
 
-    const styles$P = css `
+    const styles$Q = css `
     ${display('inline')}
 
     :host {
@@ -16931,7 +16931,7 @@
 `;
 
     // prettier-ignore
-    const template$u = (context, definition) => html `
+    const template$v = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17005,8 +17005,8 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$u,
-        styles: styles$P,
+        template: template$v,
+        styles: styles$Q,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17092,7 +17092,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$O = css `
+    const styles$P = css `
     ${display('inline-flex')}
 
     :host {
@@ -17136,7 +17136,13 @@
         outline: none;
         margin: 0;
         padding: 0 ${standardPadding};
-        transition: box-shadow ${smallDelay};
+        position: relative;
+        transition: box-shadow ${smallDelay} ease-in-out,
+            border-color ${smallDelay} ease-in-out,
+            background-size ${smallDelay} ease-in-out;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-position: center;
     }
 
     :host([content-hidden]) .control {
@@ -17151,26 +17157,55 @@
     }
 
     .control:hover {
+        border-color: ${borderHoverColor};
         box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-        outline: none;
     }
 
     .control${focusVisible} {
+        border-color: ${borderHoverColor};
         box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-        outline: ${borderWidth} solid ${borderHoverColor};
-        outline-offset: -4px;
     }
 
     .control:active {
         box-shadow: none;
-        outline: none;
+        background-image: linear-gradient(
+            ${fillSelectedColor},
+            ${fillSelectedColor}
+        );
+        background-size: calc(100% - 2px) calc(100% - 2px);
     }
 
     :host([disabled]) .control {
         box-shadow: none;
+        background-image: none;
+    }
+
+    .control::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        box-sizing: border-box;
+        outline: 0px solid transparent;
+        color: transparent;
+        background-clip: content-box;
+        transition: outline ${smallDelay} ease-in-out;
+    }
+
+    .control${focusVisible}::before {
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -3px;
+    }
+
+    .control:active::before {
         outline: none;
     }
 
+    :host([disabled]) .control::before {
+        box-shadow: none;
+    }
+
     .content {
         display: contents;
     }
@@ -17217,77 +17252,57 @@
     }
 `.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
             .control {
-                background-color: transparent;
                 border-color: rgba(${actionRgbPartialColor}, 0.3);
             }
 
             .control:hover {
                 background-color: transparent;
-                border-color: ${borderHoverColor};
-            }
-
-            .control${focusVisible} {
-                background-color: transparent;
-                border-color: ${borderHoverColor};
-            }
-
-            .control:active {
-                background-color: ${fillSelectedColor};
-                border-color: ${fillSelectedColor};
             }
 
             :host([disabled]) .control {
-                background-color: transparent;
-                border-color: rgba(${borderRgbPartialColor}, 0.2);
+                border-color: rgba(${borderRgbPartialColor}, 0.3);
             }
         `), appearanceBehavior(ButtonAppearance.ghost, css `
-            .control {
-                background-color: transparent;
-                border-color: transparent;
-            }
-
             .control:hover {
                 background-color: transparent;
-                border-color: ${borderHoverColor};
             }
 
             .control${focusVisible} {
                 background-color: transparent;
-                border-color: ${borderHoverColor};
-            }
-
-            .control:active {
-                background-color: ${fillSelectedColor};
-                border-color: ${fillSelectedColor};
             }
 
             :host([disabled]) .control {
-                background-color: transparent;
                 border-color: transparent;
             }
         `), appearanceBehavior(ButtonAppearance.block, css `
             .control {
                 background-color: rgba(${borderRgbPartialColor}, 0.1);
-                border-color: transparent;
             }
 
             .control:hover {
                 background-color: transparent;
-                border-color: ${borderHoverColor};
+                background-image: linear-gradient(
+                    rgba(${borderRgbPartialColor}, 0.1),
+                    rgba(${borderRgbPartialColor}, 0.1)
+                );
+                background-size: calc(100% - 4px) calc(100% - 4px);
             }
 
             .control${focusVisible} {
-                background-color: rgba(${borderRgbPartialColor}, 0.1);
-                border-color: ${borderHoverColor};
-            }
-
-            .control${focusVisible}:hover {
                 background-color: transparent;
+                background-image: linear-gradient(
+                    rgba(${borderRgbPartialColor}, 0.1),
+                    rgba(${borderRgbPartialColor}, 0.1)
+                );
+                background-size: calc(100% - 4px) calc(100% - 4px);
             }
 
             .control:active {
-                background-color: ${fillSelectedColor};
-                border-color: ${fillSelectedColor};
+                background-image: linear-gradient(
+                    ${fillSelectedColor},
+                    ${fillSelectedColor}
+                );
+                background-size: calc(100% - 2px) calc(100% - 2px);
             }
 
             :host([disabled]) .control {
@@ -17310,7 +17325,8 @@
             }
 
             :host([appearance-variant='primary']) .control:active {
-                box-shadow: none;
+                box-shadow: 0px 0px 0px ${borderWidth} ${fillSelectedColor}
+                    inset;
             }
 
             :host([appearance-variant='primary'][disabled]) .control {
@@ -17318,10 +17334,9 @@
             }
         `), appearanceBehavior(ButtonAppearance.block, css `
             :host([appearance-variant='primary']) .control {
-                background-clip: padding-box;
                 border-color: rgba(${actionRgbPartialColor}, 0.3);
-                border-width: calc(2 * ${borderWidth});
-                padding: 0 calc(${standardPadding} - ${borderWidth});
+                box-shadow: 0px 0px 0px ${borderWidth}
+                    rgba(${actionRgbPartialColor}, 0.3) inset;
             }
 
             :host([appearance-variant='primary'][content-hidden]) .control {
@@ -17330,7 +17345,7 @@
 
             :host([appearance-variant='primary']) .control:hover {
                 border-color: ${borderHoverColor};
-                box-shadow: none;
+                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
             }
 
             :host([appearance-variant='primary']) .control${focusVisible} {
@@ -17347,11 +17362,7 @@
             }
 
             :host([appearance-variant='primary']) .control:active {
-                background-clip: border-box;
-                border-color: ${fillSelectedColor};
-                border-width: ${borderWidth};
                 box-shadow: none;
-                padding: 0 ${standardPadding};
             }
 
             :host([appearance-variant='primary'][content-hidden])
@@ -17371,10 +17382,15 @@
                 .control {
                 padding: 0px;
             }
+
+            :host([appearance-variant='primary']) .control:active::before {
+                border-color: ${fillSelectedColor};
+                border-width: ${borderWidth};
+            }
         `));
 
-    const styles$N = css `
-    ${styles$O}
+    const styles$O = css `
+    ${styles$P}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17382,7 +17398,7 @@
     }
 `;
 
-    const template$t = (context, definition) => html `
+    const template$u = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17464,8 +17480,8 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$t,
-        styles: styles$N,
+        template: template$u,
+        styles: styles$O,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17473,7 +17489,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
     DesignSystem.tagFor(AnchorButton);
 
-    const styles$M = css `
+    const styles$N = css `
     ${display('grid')}
 
     :host {
@@ -17550,7 +17566,7 @@
     }
 `;
 
-    const template$s = (context, definition) => html `
+    const template$t = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17656,8 +17672,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$s,
-        styles: styles$M,
+        template: template$t,
+        styles: styles$N,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17681,13 +17697,13 @@
         }
     });
 
-    const styles$L = css `
+    const styles$M = css `
     ${display('inline-flex')}
 
     :host {
         position: relative;
         box-sizing: border-box;
-        font: ${bodyFont};
+        font: ${buttonLabelFont};
         height: ${controlHeight};
         color: ${bodyFontColor};
         align-items: center;
@@ -17787,8 +17803,8 @@
     }
 `;
 
-    const styles$K = css `
-    ${styles$L}
+    const styles$L = css `
+    ${styles$M}
 
     a {
         text-decoration: none;
@@ -17806,7 +17822,7 @@
     }
 `;
 
-    const template$r = (context, definition) => html `
+    const template$s = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17859,13 +17875,13 @@
     // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorTab = AnchorTab.compose({
         baseName: 'anchor-tab',
-        template: template$r,
-        styles: styles$K
+        template: template$s,
+        styles: styles$L
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
     DesignSystem.tagFor(AnchorTab);
 
-    const styles$J = css `
+    const styles$K = css `
     ${display('grid')}
 
     :host {
@@ -17883,7 +17899,7 @@
     }
 `;
 
-    const template$q = (context, definition) => html `
+    const template$r = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18080,8 +18096,8 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$q,
-        styles: styles$J,
+        template: template$r,
+        styles: styles$K,
         shadowOptions: {
             delegatesFocus: false
         }
@@ -18098,7 +18114,7 @@
     -webkit-user-select: none;
 `;
 
-    const styles$I = css `
+    const styles$J = css `
     ${display('block')}
 
     :host {
@@ -18202,7 +18218,7 @@
     }
 `;
 
-    const template$p = (context, definition) => html `
+    const template$q = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18339,8 +18355,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$p,
-        styles: styles$I,
+        template: template$q,
+        styles: styles$J,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -18350,7 +18366,7 @@
         .register(nimbleAnchorTreeItem());
     DesignSystem.tagFor(AnchorTreeItem);
 
-    const styles$H = css `
+    const styles$I = css `
     :host {
         contain: layout;
         display: block;
@@ -18374,7 +18390,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$H
+        styles: styles$I
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -18454,7 +18470,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$G = css `
+    const styles$H = css `
     ${display('flex')}
 
     :host {
@@ -18612,8 +18628,8 @@
             }
         `));
 
-    const styles$F = css `
-    ${styles$O}
+    const styles$G = css `
+    ${styles$P}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18659,7 +18675,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$F,
+        styles: styles$G,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19317,13 +19333,13 @@
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026 4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363Zm1.155-10.68-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 template$o = html `
+    const template$p = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$E = css `
+    const styles$F = css `
     ${display('inline-flex')}
 
     :host {
@@ -19376,8 +19392,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$o,
-            styles: styles$E,
+            template: template$p,
+            styles: styles$F,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19462,7 +19478,7 @@
     }).withDefault(coreLabelDefaults.numericIncrementLabel);
 
     // prettier-ignore
-    const template$n = html `
+    const template$o = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19581,13 +19597,13 @@
     applyMixins(Banner, ARIAGlobalStatesAndProperties);
     const nimbleBanner = Banner.compose({
         baseName: 'banner',
-        template: template$n,
-        styles: styles$G
+        template: template$o,
+        styles: styles$H
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
     DesignSystem.tagFor(Banner);
 
-    const styles$D = css `
+    const styles$E = css `
     ${display('inline-block')}
 
     :host {
@@ -19628,12 +19644,12 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$D
+        styles: styles$E
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
     DesignSystem.tagFor(Breadcrumb);
 
-    const styles$C = css `
+    const styles$D = css `
     ${display('inline-flex')}
 
     :host {
@@ -19709,7 +19725,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$C,
+        styles: styles$D,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -19717,7 +19733,7 @@
         .register(nimbleBreadcrumbItem());
     DesignSystem.tagFor(BreadcrumbItem);
 
-    const styles$B = css `
+    const styles$C = css `
     ${display('inline-flex')}
 
     :host {
@@ -19876,7 +19892,7 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$B,
+        styles: styles$C,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19884,11 +19900,11 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
     DesignSystem.tagFor(CardButton);
 
-    const styles$A = css `
+    const styles$B = css `
     ${display('inline-flex')}
 
     :host {
-        font: ${buttonLabelFont};
+        font: ${bodyFont};
         align-items: center;
         cursor: pointer;
         outline: none;
@@ -20002,41 +20018,95 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$A,
+        styles: styles$B,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
     const checkboxTag = DesignSystem.tagFor(Checkbox);
 
-    const styles$z = css `
-    ${styles$O}
+    const styles$A = css `
+    ${styles$P}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
         border-color: ${fillSelectedColor};
+        position: relative;
+        transition: box-shadow ${smallDelay} ease-in-out,
+            border-color ${smallDelay} ease-in-out,
+            background-size ${smallDelay} ease-in-out;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-position: center;
     }
 
     .control[aria-pressed='true']:hover {
-        background-color: ${fillSelectedColor};
+        border-color: ${borderHoverColor};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        background-image: linear-gradient(
+            ${fillSelectedColor},
+            ${fillSelectedColor}
+        );
+        background-size: calc(100% - 4px) calc(100% - 4px);
     }
 
     .control[aria-pressed='true']${focusVisible} {
-        background-color: ${fillSelectedColor};
+        background-color: transparent;
+        border-color: ${borderHoverColor};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        background-image: linear-gradient(
+            ${fillSelectedColor},
+            ${fillSelectedColor}
+        );
+        background-size: calc(100% - 4px) calc(100% - 4px);
+    }
+
+    .control[aria-pressed='true']:active {
+        box-shadow: none;
+        background-image: linear-gradient(
+            ${fillSelectedColor},
+            ${fillSelectedColor}
+        );
+        background-size: calc(100% - 2px) calc(100% - 2px);
     }
 
     :host([disabled]) .control[aria-pressed='true'] {
-        background-color: ${fillSelectedColor};
         border-color: ${fillSelectedColor};
+        background-color: ${fillSelectedColor};
+        background-image: none;
     }
 
     :host([disabled]) .control[aria-pressed='true']:hover {
-        background-color: ${fillSelectedColor};
         border-color: ${fillSelectedColor};
+        background-color: ${fillSelectedColor};
+        box-shadow: none;
+    }
+
+    .control[aria-pressed='true']::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        box-sizing: border-box;
+        outline: 0px solid transparent;
+        outline: none;
+        background-clip: content-box;
+        transition: outline ${smallDelay} ease-in-out;
+    }
+
+    .control[aria-pressed='true']${focusVisible}::before {
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -3px;
+        color: transparent;
+    }
+
+    .control[aria-pressed='true']:active::before {
+        outline: none;
     }
 `;
 
-    const template$m = (context, definition) => html `
+    const template$n = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20111,8 +20181,8 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$m,
-        styles: styles$z,
+        template: template$n,
+        styles: styles$A,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -20148,7 +20218,7 @@
         block: 'block'
     };
 
-    const styles$y = css `
+    const styles$z = css `
     ${display('inline-flex')}
 
     :host {
@@ -20370,7 +20440,7 @@
             }
         `));
 
-    const styles$x = css `
+    const styles$y = css `
     .error-icon {
         display: none;
     }
@@ -20404,9 +20474,9 @@
     }
 `;
 
-    const styles$w = css `
+    const styles$x = css `
+    ${styles$z}
     ${styles$y}
-    ${styles$x}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -20487,7 +20557,7 @@
         `));
 
     // prettier-ignore
-    const template$l = (context, definition) => html `
+    const template$m = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -20758,8 +20828,8 @@
     const nimbleCombobox = Combobox.compose({
         baseName: 'combobox',
         baseClass: Combobox$1,
-        template: template$l,
-        styles: styles$w,
+        template: template$m,
+        styles: styles$x,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -20804,7 +20874,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$v = css `
+    const styles$w = css `
     ${display('grid')}
 
     dialog {
@@ -20920,7 +20990,7 @@
             }
         `));
 
-    const template$k = html `
+    const template$l = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21046,14 +21116,14 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$k,
-        styles: styles$v,
+        template: template$l,
+        styles: styles$w,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
     DesignSystem.tagFor(Dialog);
 
-    const styles$u = css `
+    const styles$v = css `
     ${display('block')}
 
     :host {
@@ -21206,7 +21276,7 @@
             }
         `));
 
-    const template$j = html `
+    const template$k = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21320,8 +21390,8 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$j,
-        styles: styles$u
+        template: template$k,
+        styles: styles$v
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
     DesignSystem.tagFor(Drawer);
@@ -23361,7 +23431,7 @@
         .register(nimbleLabelProviderTable());
     DesignSystem.tagFor(LabelProviderTable);
 
-    const styles$t = css `
+    const styles$u = css `
     ${display('flex')}
 
     :host {
@@ -23441,12 +23511,12 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$t
+        styles: styles$u
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
     DesignSystem.tagFor(ListOption);
 
-    const styles$s = css `
+    const styles$t = css `
     ${display('grid')}
 
     :host {
@@ -23513,12 +23583,12 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$s
+        styles: styles$t
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
     DesignSystem.tagFor(Menu);
 
-    const styles$r = css `
+    const styles$s = css `
     ${display('inline-block')}
 
     :host {
@@ -23537,7 +23607,7 @@
 `;
 
     // prettier-ignore
-    const template$i = html `
+    const template$j = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -23792,8 +23862,8 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$i,
-        styles: styles$r,
+        template: template$j,
+        styles: styles$s,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -23801,7 +23871,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
     const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('grid')}
 
     :host {
@@ -23899,7 +23969,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$q,
+        styles: styles$r,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -23914,9 +23984,9 @@
         block: 'block'
     };
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('inline-block')}
-    ${styles$x}
+    ${styles$y}
 
     :host {
         font: ${bodyFont};
@@ -24130,7 +24200,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$p,
+        styles: styles$q,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -24172,11 +24242,11 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
     DesignSystem.tagFor(NumberField);
 
-    const styles$o = css `
+    const styles$p = css `
     ${display('inline-flex')}
 
     :host {
-        font: ${buttonLabelFont};
+        font: ${bodyFont};
         align-items: center;
         outline: none;
         width: fit-content;
@@ -24273,13 +24343,13 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$o,
+        styles: styles$p,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
     DesignSystem.tagFor(Radio);
 
-    const styles$n = css `
+    const styles$o = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -24314,7 +24384,7 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$n,
+        styles: styles$o,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -24322,6 +24392,34 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
     DesignSystem.tagFor(RadioGroup);
 
+    const template$i = html `
+    <template> Rich Text Editor here. </template>
+`;
+
+    const styles$n = css `
+    ${display('flex')}
+
+    :host {
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+    }
+`;
+
+    /**
+     * A nimble styled rich text editor
+     */
+    class RichTextEditor extends FoundationElement {
+    }
+    const nimbleRichTextEditor = RichTextEditor.compose({
+        baseName: 'rich-text-editor',
+        template: template$i,
+        styles: styles$n
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleRichTextEditor());
+    DesignSystem.tagFor(RichTextEditor);
+
     const template$h = html `
     <template> Rich Text Viewer here. </template>
 `;
@@ -24351,8 +24449,8 @@
     DesignSystem.tagFor(RichTextViewer);
 
     const styles$l = css `
+    ${styles$z}
     ${styles$y}
-    ${styles$x}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -24706,7 +24804,7 @@
 
     :host {
         outline: none;
-        font: ${buttonLabelFont};
+        font: ${bodyFont};
         color: ${buttonLabelFontColor};
         flex-direction: column;
         cursor: pointer;
@@ -24923,7 +25021,7 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$L
+        styles: styles$M
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
     DesignSystem.tagFor(Tab);
@@ -32234,7 +32332,7 @@
 
     const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$x}
+    ${styles$y}
 
     :host {
         font: ${bodyFont};
@@ -32580,7 +32678,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$x}
+    ${styles$y}
 
     :host {
         font: ${bodyFont};