@ni/nimble-components 18.3.6 → 18.4.0

package/dist/all-components-bundle.js

@@ -16446,6 +16446,7 @@
     const Pass100DarkUi = "#00c12b";
     const Fail100LightUi = "#c4000c";
     const Fail100DarkUi = "#ff4646";
+    const Black75 = "#818386";
     const Black15 = "#f1f1f2";
     const Black7 = "#f5f5f5";
     const White = "#ffffff";
@@ -16585,6 +16586,7 @@
         modalBackdropColor: 'modal-backdrop-color',
         popupBorderColor: 'popup-border-color',
         controlHeight: 'control-height',
+        controlSlimHeight: 'control-slim-height',
         smallPadding: 'small-padding',
         standardPadding: 'standard-padding',
         labelHeight: 'label-height',
@@ -16592,6 +16594,7 @@
         iconSize: 'icon-size',
         groupHeaderTextTransform: 'group-header-text-transform',
         drawerWidth: 'drawer-width',
+        bannerGapSize: 'banner-gap-size',
         spinnerSmallHeight: 'spinner-small-height',
         spinnerMediumHeight: 'spinner-medium-height',
         spinnerLargeHeight: 'spinner-large-height',
@@ -16804,9 +16807,9 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$j = html `<slot></slot>`;
+    const template$k = html `<slot></slot>`;
 
-    const styles$I = css `
+    const styles$J = css `
     :host {
         display: contents;
     }
@@ -16862,8 +16865,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$I,
-        template: template$j
+        styles: styles$J,
+        template: template$k
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -16895,12 +16898,14 @@
     const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black88, ForestGreen));
     // Component Sizing Tokens
     const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
+    const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
     const smallPadding = DesignToken.create(styleNameFromTokenName(tokenNames.smallPadding)).withDefault('4px');
     const standardPadding = DesignToken.create(styleNameFromTokenName(tokenNames.standardPadding)).withDefault('16px');
     DesignToken.create(styleNameFromTokenName(tokenNames.labelHeight)).withDefault('16px');
     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');
+    DesignToken.create(styleNameFromTokenName(tokenNames.bannerGapSize)).withDefault('1px');
     const spinnerSmallHeight = DesignToken.create(styleNameFromTokenName(tokenNames.spinnerSmallHeight)).withDefault('16px');
     DesignToken.create(styleNameFromTokenName(tokenNames.spinnerMediumHeight)).withDefault('32px');
     DesignToken.create(styleNameFromTokenName(tokenNames.spinnerLargeHeight)).withDefault('64px');
@@ -17025,7 +17030,7 @@
         }
     }
 
-    const styles$H = css `
+    const styles$I = css `
     ${display('inline')}
 
     :host {
@@ -17108,7 +17113,7 @@
 `;
 
     // prettier-ignore
-    const template$i = (context, definition) => html `
+    const template$j = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17181,8 +17186,8 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$i,
-        styles: styles$H,
+        template: template$j,
+        styles: styles$I,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17267,7 +17272,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$G = css `
+    const styles$H = css `
     ${display('inline-flex')}
 
     :host {
@@ -17548,8 +17553,8 @@
             }
         `));
 
-    const styles$F = css `
-    ${styles$G}
+    const styles$G = css `
+    ${styles$H}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17557,7 +17562,7 @@
     }
 `;
 
-    const template$h = (context, definition) => html `
+    const template$i = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17639,15 +17644,15 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$h,
-        styles: styles$F,
+        template: template$i,
+        styles: styles$G,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
 
-    const styles$E = css `
+    const styles$F = css `
     ${display('inline-flex')}
 
     :host {
@@ -17753,8 +17758,8 @@
     }
 `;
 
-    const styles$D = css `
-    ${styles$E}
+    const styles$E = css `
+    ${styles$F}
 
     a {
         text-decoration: none;
@@ -17764,7 +17769,7 @@
     }
 `;
 
-    const template$g = () => html `
+    const template$h = () => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17802,12 +17807,12 @@
     ], AnchorTab.prototype, "disabled", void 0);
     const nimbleAnchorTab = AnchorTab.compose({
         baseName: 'anchor-tab',
-        template: template$g,
-        styles: styles$D
+        template: template$h,
+        styles: styles$E
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-    const styles$C = css `
+    const styles$D = css `
     ${display('grid')}
 
     :host {
@@ -17825,7 +17830,7 @@
     }
 `;
 
-    const template$f = (context, definition) => html `
+    const template$g = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18022,15 +18027,15 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$f,
-        styles: styles$C,
+        template: template$g,
+        styles: styles$D,
         shadowOptions: {
             delegatesFocus: false
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-    const styles$B = css `
+    const styles$C = css `
     :host {
         contain: layout;
         display: block;
@@ -18054,56 +18059,296 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$B
+        styles: styles$C
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleAnchoredRegion());
 
-    const styles$A = css `
-    ${display('inline-block')}
+    /**
+     * Subscription for {@link ThemeStyleSheetBehavior}
+     */
+    class ThemeStyleSheetBehaviorSubscription {
+        constructor(value, styles, source) {
+            this.value = value;
+            this.styles = styles;
+            this.source = source;
+        }
+        handleChange() {
+            const theme$1 = theme.getValueFor(this.source);
+            if (Array.isArray(this.value)
+                ? this.value.includes(theme$1)
+                : this.value === theme$1) {
+                this.source.$fastController.addStyles(this.styles);
+            }
+            else {
+                this.source.$fastController.removeStyles(this.styles);
+            }
+        }
+    }
+    /**
+     * Behavior to conditionally apply theme-based stylesheets.
+     */
+    class ThemeStyleSheetBehavior {
+        constructor(theme, styles) {
+            this.theme = theme;
+            this.styles = styles;
+            this.cache = new WeakMap();
+        }
+        /**
+         * @internal
+         */
+        bind(source) {
+            const subscriber = this.cache.get(source)
+                || new ThemeStyleSheetBehaviorSubscription(this.theme, this.styles, source);
+            // Currently subscriber from cache may have gone through unbind
+            // but still be in cache so always resubscribe
+            // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
+            theme.subscribe(subscriber, source);
+            subscriber.handleChange();
+            this.cache.set(source, subscriber);
+        }
+        /**
+         * @internal
+         */
+        unbind(source) {
+            const subscriber = this.cache.get(source);
+            if (subscriber) {
+                theme.unsubscribe(subscriber);
+            }
+            // Currently does not evict subscriber from cache
+            // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
+        }
+    }
+    /**
+     * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
+     * the behavior will use the nearest ThemeProvider's 'theme' design system value.
+     *
+     * @public
+     * @example
+     * ```ts
+     * css`
+     *     // ...
+     * `.withBehaviors(
+     *     themeBehavior(Theme.light, css` ... `),
+     *     // Apply style for both dark and color theme
+     *     themeBehavior([Theme.dark, Theme.color], css` ... `)
+     * )
+     * ```
+     */
+    const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
+
+    const styles$B = css `
+    ${display('flex')}
 
     :host {
-        box-sizing: border-box;
-        font: ${linkFont};
-        --ni-private-breadcrumb-link-font-color: ${linkFontColor};
-        --ni-private-breadcrumb-link-active-font-color: ${linkActiveFontColor};
+        font: ${bodyFont};
+        font-size: 12.8px;
+        align-items: top;
+        overflow: hidden;
+        color: ${White};
+        ${iconColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.6)};
     }
 
-    :host([appearance='prominent']) {
-        --ni-private-breadcrumb-link-font-color: ${linkProminentFontColor};
-        --ni-private-breadcrumb-link-active-font-color: ${linkActiveProminentFontColor};
+    :host(:not([open])) {
+        display: none;
     }
 
-    .list {
+    .container {
         display: flex;
-        flex-wrap: wrap;
+        width: 100%;
     }
 
-    ::slotted(*:first-child) {
-        padding-left: 0px;
+    .icon {
+        width: 48px;
+        display: flex;
+        justify-content: center;
+        margin-top: 8px;
+        flex: 0 0 auto;
     }
 
-    ::slotted(*:not([href]):last-child) {
-        font: ${bodyEmphasizedFont};
+    .text {
+        display: inline;
+        margin-top: 7px;
+        margin-bottom: 7px;
+    }
+
+    slot[name='title'] {
+        display: inline;
+        font-weight: bold;
+        padding-right: 8px;
+        white-space: nowrap;
     }
+
+    :host([title-hidden]) slot[name='title'] {
+        ${
+/**
+ * Hide content visually while keeping it screen reader-accessible.
+ * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
+ * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
+ */
+''}
+        display: inline-block;
+        height: 1px;
+        width: 1px;
+        position: absolute;
+        margin: -1px;
+        clip: rect(1px, 1px, 1px, 1px);
+        clip-path: inset(50%);
+        overflow: hidden;
+        padding: 0;
+    }
+
+    .controls {
+        height: ${controlHeight};
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: flex-start;
+    }
+
+    slot[name='action'] {
+        display: flex;
+        align-content: center;
+        margin-left: ${standardPadding};
+        white-space: nowrap;
+    }
+
+    slot[name='action']::slotted(nimble-anchor) {
+        ${linkFontColor.cssCustomProperty}: ${White};
+        ${linkDisabledFontColor.cssCustomProperty}: ${White};
+        ${linkActiveFontColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.6)};
+        font-size: 12.8px;
+    }
+
+    slot[name='action']::slotted(nimble-button) {
+        ${controlHeight.cssCustomProperty}: ${controlSlimHeight};
+        ${buttonLabelFontColor.cssCustomProperty}: ${White};
+        ${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.2)};
+        ${borderHoverColor.cssCustomProperty}: ${White};
+    }
+
+    slot[name='action']::slotted(nimble-button[appearance='outline']) {
+        ${actionRgbPartialColor.cssCustomProperty}: ${White}
+    }
+
+    .dismiss {
+        width: 48px;
+        display: flex;
+        justify-content: center;
+    }
+
+    .dismiss nimble-button {
+        ${controlHeight.cssCustomProperty}: 16px;
+        ${iconSize.cssCustomProperty}: 14px;
+        ${buttonLabelFontColor.cssCustomProperty}: ${White};
+        ${borderHoverColor.cssCustomProperty}: transparent;
+        ${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.2)};
+    }
+
+    .dismiss nimble-button:focus-within {
+        outline: 2px solid ${White};
+    }
+
+    .dismiss nimble-button:hover {
+        background: ${hexToRgbaCssColor(White, 0.2)};
+    }
+`.withBehaviors(themeBehavior(Theme.light, css `
+            :host {
+                background: ${Black75};
+            }
+
+            :host([severity='error']) {
+                background: ${Fail100LightUi};
+            }
+
+            :host([severity='warning']) {
+                background: ${Warning100LightUi};
+            }
+
+            :host([severity='information']) {
+                background: ${Information100LightUi};
+            }
+        `), themeBehavior(Theme.dark, css `
+            :host {
+                background: ${Black75};
+            }
+
+            :host([severity='error']) {
+                background: ${BannerFail100DarkUi};
+            }
+
+            :host([severity='warning']) {
+                background: ${Warning100DarkUi};
+            }
+
+            :host([severity='information']) {
+                background: ${Information100DarkUi};
+            }
+        `), themeBehavior(Theme.color, css `
+            :host {
+                background: ${applicationBackgroundColor};
+            }
+
+            .container {
+                background: ${hexToRgbaCssColor(White, 0.3)};
+            }
+        `));
+
+    const styles$A = css `
+    ${styles$H}
+    ${buttonAppearanceVariantStyles}
 `;
 
     /**
-     * A nimble-styled breadcrumb
+     * A nimble-styled HTML button
      */
-    class Breadcrumb extends Breadcrumb$1 {
+    class Button extends Button$1 {
+        constructor() {
+            super(...arguments);
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: appearance
+             */
+            this.appearance = ButtonAppearance.outline;
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: content-hidden
+             */
+            this.contentHidden = false;
+        }
     }
     __decorate$1([
         attr
-    ], Breadcrumb.prototype, "appearance", void 0);
-    const nimbleBreadcrumb = Breadcrumb.compose({
-        baseName: 'breadcrumb',
-        baseClass: Breadcrumb$1,
-        template: breadcrumbTemplate,
-        styles: styles$A
+    ], Button.prototype, "appearance", void 0);
+    __decorate$1([
+        attr({ attribute: 'appearance-variant' })
+    ], Button.prototype, "appearanceVariant", void 0);
+    __decorate$1([
+        attr({ attribute: 'content-hidden', mode: 'boolean' })
+    ], Button.prototype, "contentHidden", void 0);
+    /**
+     * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
+     * Implements {@link @microsoft/fast-foundation#buttonTemplate}
+     *
+     * @public
+     * @remarks
+     * Generates HTML Element: \<nimble-button\>
+     *
+     */
+    const nimbleButton = Button.compose({
+        baseName: 'button',
+        baseClass: Button$1,
+        template: buttonTemplate,
+        styles: styles$A,
+        shadowOptions: {
+            delegatesFocus: true
+        }
     });
-    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
     /* 🤖 this file was generated by svg-to-ts */
     const add16X16 = {
@@ -18719,7 +18964,294 @@
         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 styles$z = css `
+    const template$f = html `
+    <template>
+        <div class="icon" :innerHTML=${x => x.icon.data}></div>
+    </template
+`;
+
+    const styles$z = css `
+    ${display('inline-flex')}
+
+    :host {
+        align-items: center;
+        user-select: none;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    .icon {
+        width: 100%;
+        height: 100%;
+    }
+
+    :host([severity='error']) {
+        ${iconColor.cssCustomProperty}: ${failColor};
+    }
+
+    :host([severity='warning']) {
+        ${iconColor.cssCustomProperty}: ${warningColor};
+    }
+
+    :host([severity='success']) {
+        ${iconColor.cssCustomProperty}: ${passColor};
+    }
+
+    :host([severity='information']) {
+        ${iconColor.cssCustomProperty}: ${informationColor};
+    }
+
+    .icon svg {
+        fill: ${iconColor};
+        width: 100%;
+        height: 100%;
+    }
+`;
+
+    /**
+     * The base class for icon components
+     */
+    class Icon extends FoundationElement {
+        constructor(/** @internal */ icon) {
+            super();
+            this.icon = icon;
+        }
+    }
+    __decorate$1([
+        attr
+    ], Icon.prototype, "severity", void 0);
+    const registerIcon = (baseName, iconClass) => {
+        const composedIcon = iconClass.compose({
+            baseName,
+            template: template$f,
+            styles: styles$z,
+            baseClass: iconClass
+        });
+        DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
+    };
+
+    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+    /**
+     * The icon component for the 'exclamationMark' icon
+     */
+    class IconExclamationMark extends Icon {
+        constructor() {
+            super(exclamationMark16X16);
+        }
+    }
+    registerIcon('icon-exclamation-mark', IconExclamationMark);
+
+    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+    /**
+     * The icon component for the 'info' icon
+     */
+    class IconInfo extends Icon {
+        constructor() {
+            super(info16X16);
+        }
+    }
+    registerIcon('icon-info', IconInfo);
+
+    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+    /**
+     * The icon component for the 'triangleFilled' icon
+     */
+    class IconTriangleFilled extends Icon {
+        constructor() {
+            super(triangleFilled16X16);
+        }
+    }
+    registerIcon('icon-triangle-filled', IconTriangleFilled);
+
+    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+    /**
+     * The icon component for the 'xmark' icon
+     */
+    class IconXmark extends Icon {
+        constructor() {
+            super(xmark16X16);
+        }
+    }
+    registerIcon('icon-xmark', IconXmark);
+
+    /**
+     * Severities of banners.
+     * @public
+     */
+    const BannerSeverity = {
+        default: undefined,
+        error: 'error',
+        warning: 'warning',
+        information: 'information'
+    };
+
+    // prettier-ignore
+    const template$e = html `
+    <div class="container"
+        role="status"
+        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-disabled="${x => x.ariaDisabled}"
+        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="titleSlot"
+        aria-live="${x => x.ariaLive}"
+        aria-owns="${x => x.ariaOwns}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
+    >
+        <div class="icon">
+            ${when(x => x.severity === BannerSeverity.error, html `
+                <${DesignSystem.tagFor(IconExclamationMark)}></${DesignSystem.tagFor(IconExclamationMark)}>
+            `)}
+            ${when(x => x.severity === BannerSeverity.warning, html `
+                <${DesignSystem.tagFor(IconTriangleFilled)}></${DesignSystem.tagFor(IconTriangleFilled)}>
+            `)}
+            ${when(x => x.severity === BannerSeverity.information, html `
+                <${DesignSystem.tagFor(IconInfo)}></${DesignSystem.tagFor(IconInfo)}>
+            `)}
+        </div>
+        <div class="text">
+            <slot name="title" id="titleSlot"></slot>
+            <slot></slot>
+        </div>
+        <div class="controls">
+            <slot name="action"></slot>
+            <div class="dismiss">
+                ${when(x => !x.preventDismiss, html `
+                    <${DesignSystem.tagFor(Button)} appearance="ghost" content-hidden @click="${x => x.dismissBanner()}">
+                        <${DesignSystem.tagFor(IconXmark)} slot="start"></${DesignSystem.tagFor(IconXmark)}>
+                        ${x => x.dismissButtonLabel ?? 'Close'}
+                    </${DesignSystem.tagFor(Button)}>
+                `)}
+            </div>
+        </div>
+    </div>
+`;
+
+    /**
+     * A nimble-styled notification banner for persistent messages.
+     */
+    class Banner extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            /**
+             * @public
+             * @description
+             * Whether the banner is visible or not
+             */
+            this.open = false;
+            /**
+             * @public
+             * @description
+             * Severity of the banner's message
+             */
+            this.severity = BannerSeverity.default;
+            /**
+             * @public
+             * @description
+             * Whether the banner title is hidden
+             */
+            this.titleHidden = false;
+            /**
+             * @public
+             * @description
+             * Hides the dismiss button
+             */
+            this.preventDismiss = false;
+        }
+        /**
+         * @internal
+         */
+        openChanged() {
+            this.$emit('toggle', { oldState: !this.open, newState: this.open });
+        }
+        /**
+         * @internal
+         */
+        dismissBanner() {
+            this.open = false;
+        }
+    }
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], Banner.prototype, "open", void 0);
+    __decorate$1([
+        attr()
+    ], Banner.prototype, "severity", void 0);
+    __decorate$1([
+        attr({ attribute: 'title-hidden', mode: 'boolean' })
+    ], Banner.prototype, "titleHidden", void 0);
+    __decorate$1([
+        attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
+    ], Banner.prototype, "preventDismiss", void 0);
+    __decorate$1([
+        attr({ attribute: 'dismiss-button-label' })
+    ], Banner.prototype, "dismissButtonLabel", void 0);
+    applyMixins(Banner, ARIAGlobalStatesAndProperties);
+    const nimbleBanner = Banner.compose({
+        baseName: 'banner',
+        template: template$e,
+        styles: styles$B
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
+
+    const styles$y = css `
+    ${display('inline-block')}
+
+    :host {
+        box-sizing: border-box;
+        font: ${linkFont};
+        --ni-private-breadcrumb-link-font-color: ${linkFontColor};
+        --ni-private-breadcrumb-link-active-font-color: ${linkActiveFontColor};
+    }
+
+    :host([appearance='prominent']) {
+        --ni-private-breadcrumb-link-font-color: ${linkProminentFontColor};
+        --ni-private-breadcrumb-link-active-font-color: ${linkActiveProminentFontColor};
+    }
+
+    .list {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    ::slotted(*:first-child) {
+        padding-left: 0px;
+    }
+
+    ::slotted(*:not([href]):last-child) {
+        font: ${bodyEmphasizedFont};
+    }
+`;
+
+    /**
+     * A nimble-styled breadcrumb
+     */
+    class Breadcrumb extends Breadcrumb$1 {
+    }
+    __decorate$1([
+        attr
+    ], Breadcrumb.prototype, "appearance", void 0);
+    const nimbleBreadcrumb = Breadcrumb.compose({
+        baseName: 'breadcrumb',
+        baseClass: Breadcrumb$1,
+        template: breadcrumbTemplate,
+        styles: styles$y
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
+
+    const styles$x = css `
     ${display('inline-flex')}
 
     :host {
@@ -18795,141 +19327,14 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$z,
+        styles: styles$x,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleBreadcrumbItem());
 
-    const styles$y = css `
-    ${styles$G}
-    ${buttonAppearanceVariantStyles}
-`;
-
-    /**
-     * A nimble-styled HTML button
-     */
-    class Button extends Button$1 {
-        constructor() {
-            super(...arguments);
-            /**
-             * @public
-             * @remarks
-             * HTML Attribute: appearance
-             */
-            this.appearance = ButtonAppearance.outline;
-            /**
-             * @public
-             * @remarks
-             * HTML Attribute: content-hidden
-             */
-            this.contentHidden = false;
-        }
-    }
-    __decorate$1([
-        attr
-    ], Button.prototype, "appearance", void 0);
-    __decorate$1([
-        attr({ attribute: 'appearance-variant' })
-    ], Button.prototype, "appearanceVariant", void 0);
-    __decorate$1([
-        attr({ attribute: 'content-hidden', mode: 'boolean' })
-    ], Button.prototype, "contentHidden", void 0);
-    /**
-     * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
-     * Implements {@link @microsoft/fast-foundation#buttonTemplate}
-     *
-     * @public
-     * @remarks
-     * Generates HTML Element: \<nimble-button\>
-     *
-     */
-    const nimbleButton = Button.compose({
-        baseName: 'button',
-        baseClass: Button$1,
-        template: buttonTemplate,
-        styles: styles$y,
-        shadowOptions: {
-            delegatesFocus: true
-        }
-    });
-    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
-
-    /**
-     * Subscription for {@link ThemeStyleSheetBehavior}
-     */
-    class ThemeStyleSheetBehaviorSubscription {
-        constructor(value, styles, source) {
-            this.value = value;
-            this.styles = styles;
-            this.source = source;
-        }
-        handleChange() {
-            const theme$1 = theme.getValueFor(this.source);
-            if (Array.isArray(this.value)
-                ? this.value.includes(theme$1)
-                : this.value === theme$1) {
-                this.source.$fastController.addStyles(this.styles);
-            }
-            else {
-                this.source.$fastController.removeStyles(this.styles);
-            }
-        }
-    }
-    /**
-     * Behavior to conditionally apply theme-based stylesheets.
-     */
-    class ThemeStyleSheetBehavior {
-        constructor(theme, styles) {
-            this.theme = theme;
-            this.styles = styles;
-            this.cache = new WeakMap();
-        }
-        /**
-         * @internal
-         */
-        bind(source) {
-            const subscriber = this.cache.get(source)
-                || new ThemeStyleSheetBehaviorSubscription(this.theme, this.styles, source);
-            // Currently subscriber from cache may have gone through unbind
-            // but still be in cache so always resubscribe
-            // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
-            theme.subscribe(subscriber, source);
-            subscriber.handleChange();
-            this.cache.set(source, subscriber);
-        }
-        /**
-         * @internal
-         */
-        unbind(source) {
-            const subscriber = this.cache.get(source);
-            if (subscriber) {
-                theme.unsubscribe(subscriber);
-            }
-            // Currently does not evict subscriber from cache
-            // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
-        }
-    }
-    /**
-     * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
-     * the behavior will use the nearest ThemeProvider's 'theme' design system value.
-     *
-     * @public
-     * @example
-     * ```ts
-     * css`
-     *     // ...
-     * `.withBehaviors(
-     *     themeBehavior(Theme.light, css` ... `),
-     *     // Apply style for both dark and color theme
-     *     themeBehavior([Theme.dark, Theme.color], css` ... `)
-     * )
-     * ```
-     */
-    const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
-
-    const styles$x = css `
+    const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -19088,14 +19493,14 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$x,
+        styles: styles$w,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-    const styles$w = css `
+    const styles$v = css `
     ${display('inline-flex')}
 
     :host {
@@ -19213,14 +19618,14 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$w,
+        styles: styles$v,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
-    const styles$v = css `
-    ${styles$G}
+    const styles$u = css `
+    ${styles$H}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -19246,7 +19651,7 @@
     }
 `;
 
-    const template$e = (context, definition) => html `
+    const template$d = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -19321,8 +19726,8 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$e,
-        styles: styles$v,
+        template: template$d,
+        styles: styles$u,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19335,72 +19740,6 @@
     </div>
 `;
 
-    const template$d = html `
-    <template>
-        <div class="icon" :innerHTML=${x => x.icon.data}></div>
-    </template
-`;
-
-    const styles$u = css `
-    ${display('inline-flex')}
-
-    :host {
-        align-items: center;
-        user-select: none;
-        width: ${iconSize};
-        height: ${iconSize};
-    }
-
-    .icon {
-        width: 100%;
-        height: 100%;
-    }
-
-    :host([severity='error']) {
-        ${iconColor.cssCustomProperty}: ${failColor};
-    }
-
-    :host([severity='warning']) {
-        ${iconColor.cssCustomProperty}: ${warningColor};
-    }
-
-    :host([severity='success']) {
-        ${iconColor.cssCustomProperty}: ${passColor};
-    }
-
-    :host([severity='information']) {
-        ${iconColor.cssCustomProperty}: ${informationColor};
-    }
-
-    .icon svg {
-        fill: ${iconColor};
-        width: 100%;
-        height: 100%;
-    }
-`;
-
-    /**
-     * The base class for icon components
-     */
-    class Icon extends FoundationElement {
-        constructor(/** @internal */ icon) {
-            super();
-            this.icon = icon;
-        }
-    }
-    __decorate$1([
-        attr
-    ], Icon.prototype, "severity", void 0);
-    const registerIcon = (baseName, iconClass) => {
-        const composedIcon = iconClass.compose({
-            baseName,
-            template: template$d,
-            styles: styles$u,
-            baseClass: iconClass
-        });
-        DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
-    };
-
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'arrowExpanderDown' icon
@@ -19412,17 +19751,6 @@
     }
     registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
 
-    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-    /**
-     * The icon component for the 'exclamationMark' icon
-     */
-    class IconExclamationMark extends Icon {
-        constructor() {
-            super(exclamationMark16X16);
-        }
-    }
-    registerIcon('icon-exclamation-mark', IconExclamationMark);
-
     const DropdownAppearance = {
         underline: 'underline',
         outline: 'outline',
@@ -21484,17 +21812,6 @@
     }
     registerIcon('icon-indeterminant-checkbox', IconIndeterminantCheckbox);
 
-    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-    /**
-     * The icon component for the 'info' icon
-     */
-    class IconInfo extends Icon {
-        constructor() {
-            super(info16X16);
-        }
-    }
-    registerIcon('icon-info', IconInfo);
-
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'infoCircle' icon
@@ -22001,17 +22318,6 @@
     }
     registerIcon('icon-triangle', IconTriangle);
 
-    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-    /**
-     * The icon component for the 'triangleFilled' icon
-     */
-    class IconTriangleFilled extends Icon {
-        constructor() {
-            super(triangleFilled16X16);
-        }
-    }
-    registerIcon('icon-triangle-filled', IconTriangleFilled);
-
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'trueFalseRectangle' icon
@@ -22144,17 +22450,6 @@
     }
     registerIcon('icon-wrench-hammer', IconWrenchHammer);
 
-    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-    /**
-     * The icon component for the 'xmark' icon
-     */
-    class IconXmark extends Icon {
-        constructor() {
-            super(xmark16X16);
-        }
-    }
-    registerIcon('icon-xmark', IconXmark);
-
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'xmarkCheck' icon
@@ -23596,7 +23891,7 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$E
+        styles: styles$F
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
@@ -26717,6 +27012,7 @@
         width: 100%;
         height: 100%;
         position: absolute;
+        pointer-events: none;
     }
 
     .row:hover::before {
@@ -26729,6 +27025,7 @@
                 height: 100%;
                 position: absolute;
                 background: ${fillHoverColor};
+                pointer-events: none;
             }
 
             .row::before {