@ni/nimble-components 18.3.7 → 18.4.1

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,9 +18964,296 @@
         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$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 {
         height: ${controlHeight};
         box-sizing: border-box;
@@ -18774,162 +19306,35 @@
         margin-inline-end: 4px;
     }
 
-    slot[name='separator'] {
-        display: flex;
-        align-items: center;
-    }
-
-    slot[name='separator'] svg {
-        width: ${iconSize};
-        height: ${iconSize};
-        fill: ${placeholderFontColor};
-    }
-`;
-
-    /**
-     * A nimble-styled breadcrumb item
-     */
-    class BreadcrumbItem extends BreadcrumbItem$1 {
-    }
-    const nimbleBreadcrumbItem = BreadcrumbItem.compose({
-        baseName: 'breadcrumb-item',
-        baseClass: BreadcrumbItem$1,
-        template: breadcrumbItemTemplate,
-        styles: styles$z,
-        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);
-            }
-        }
+    slot[name='separator'] {
+        display: flex;
+        align-items: center;
     }
-    /**
-     * 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
-        }
+
+    slot[name='separator'] svg {
+        width: ${iconSize};
+        height: ${iconSize};
+        fill: ${placeholderFontColor};
     }
+`;
+
     /**
-     * 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` ... `)
-     * )
-     * ```
+     * A nimble-styled breadcrumb item
      */
-    const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
+    class BreadcrumbItem extends BreadcrumbItem$1 {
+    }
+    const nimbleBreadcrumbItem = BreadcrumbItem.compose({
+        baseName: 'breadcrumb-item',
+        baseClass: BreadcrumbItem$1,
+        template: breadcrumbItemTemplate,
+        styles: styles$x,
+        separator: forwardSlash16X16.data
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleBreadcrumbItem());
 
-    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());
 
@@ -26580,6 +26875,12 @@
     __decorate$1([
         attr({ attribute: 'column-id' })
     ], TableColumn.prototype, "columnId", void 0);
+    __decorate$1([
+        attr({ attribute: 'action-menu-slot' })
+    ], TableColumn.prototype, "actionMenuSlot", void 0);
+    __decorate$1([
+        attr({ attribute: 'action-menu-label' })
+    ], TableColumn.prototype, "actionMenuLabel", void 0);
 
     /**
      * Helper class for the nimble-table to validate that the table's configuration
@@ -26686,9 +26987,7 @@
 
     .table-row-container {
         width: 100%;
-        position: sticky;
-        overflow: hidden;
-        top: 0px;
+        position: relative;
     }
 
     .header-container {
@@ -26710,6 +27009,7 @@
     .row {
         background: ${applicationBackgroundColor};
         position: relative;
+        box-sizing: border-box;
     }
 
     .row::before {
@@ -26785,6 +27085,19 @@
         grid-auto-flow: column;
         grid-auto-columns: 1fr;
     }
+
+    nimble-table-cell {
+        --ni-private-table-cell-action-menu-display: none;
+    }
+
+    nimble-table-cell[menu-open] {
+        --ni-private-table-cell-action-menu-display: block;
+    }
+
+    :host(.hover) nimble-table-cell,
+    :host(:hover) nimble-table-cell {
+        --ni-private-table-cell-action-menu-display: block;
+    }
 `;
 
     const styles$a = css `
@@ -26794,6 +27107,9 @@
         padding: 0px calc(${standardPadding} / 2);
         align-self: center;
         height: 100%;
+        grid-template-columns: 1fr auto;
+        /* A default value that will be overridden by the row */
+        --ni-private-table-cell-action-menu-display: block;
     }
 
     .cell-content-container {
@@ -26801,12 +27117,30 @@
         display: flex;
         align-items: center;
     }
+
+    .action-menu {
+        display: var(--ni-private-table-cell-action-menu-display);
+    }
 `;
 
     // prettier-ignore
     const template$6 = html `
     <template role="cell">
         <div ${ref('cellContentContainer')} class="cell-content-container"></div>
+
+        ${when(x => x.hasActionMenu, html `
+            <${DesignSystem.tagFor(MenuButton)}
+                content-hidden
+                appearance="${ButtonAppearance.ghost}"
+                @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
+                @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
+                class="action-menu"
+            >
+                <${DesignSystem.tagFor(IconThreeDotsLine)} slot="start"></${DesignSystem.tagFor(IconThreeDotsLine)}>
+                ${x => x.actionMenuLabel}
+                <slot name="cellActionMenu" slot="menu"></slot>
+            </${DesignSystem.tagFor(MenuButton)}>
+        `)}
     </template>
 `;
 
@@ -26817,6 +27151,8 @@
     class TableCell extends FoundationElement {
         constructor() {
             super(...arguments);
+            this.hasActionMenu = false;
+            this.menuOpen = false;
             this.customCellView = undefined;
         }
         connectedCallback() {
@@ -26830,6 +27166,13 @@
                 this.customCellView = undefined;
             }
         }
+        onActionMenuBeforeToggle(event) {
+            this.$emit('cell-action-menu-beforetoggle', event.detail);
+        }
+        onActionMenuToggle(event) {
+            this.menuOpen = event.detail.newState;
+            this.$emit('cell-action-menu-toggle', event.detail);
+        }
         cellStateChanged() {
             this.customCellView?.bind(this.cellState, defaultExecutionContext);
         }
@@ -26856,6 +27199,15 @@
     __decorate$1([
         observable
     ], TableCell.prototype, "cellStyles", void 0);
+    __decorate$1([
+        attr({ attribute: 'has-action-menu', mode: 'boolean' })
+    ], TableCell.prototype, "hasActionMenu", void 0);
+    __decorate$1([
+        attr({ attribute: 'menu-open', mode: 'boolean' })
+    ], TableCell.prototype, "menuOpen", void 0);
+    __decorate$1([
+        attr({ attribute: 'action-menu-label' })
+    ], TableCell.prototype, "actionMenuLabel", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
         template: template$6,
@@ -26872,7 +27224,18 @@
                 :cellTemplate="${x => x.column.cellTemplate}"
                 :cellStyles="${x => x.column.cellStyles}"
                 :cellState="${x => x.cellState}"
+                ?has-action-menu="${x => !!x.column.actionMenuSlot}"
+                action-menu-label="${x => x.column.actionMenuLabel}"
+                @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"
+                @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x.column)}"
             >
+
+                ${when((x, c) => (c.parent.currentActionMenuColumn === x.column) && x.column.actionMenuSlot, html `
+                    <slot
+                        name="${x => `row-action-menu-${x.column.actionMenuSlot}`}"
+                        slot="cellActionMenu"
+                    ></slot>
+                `)}
             </${DesignSystem.tagFor(TableCell)}>
         `)}
     </template>
@@ -26886,6 +27249,7 @@
         constructor() {
             super(...arguments);
             this.columns = [];
+            this.menuOpen = false;
         }
         get columnStates() {
             return this.columns.map(column => {
@@ -26909,6 +27273,23 @@
                 return { column, cellState };
             });
         }
+        onCellActionMenuBeforeToggle(event, column) {
+            this.currentActionMenuColumn = column;
+            this.emitToggleEvent('row-action-menu-beforetoggle', event.detail, column);
+        }
+        onCellActionMenuToggle(event, column) {
+            this.menuOpen = event.detail.newState;
+            this.emitToggleEvent('row-action-menu-toggle', event.detail, column);
+        }
+        emitToggleEvent(eventType, menuButtonEventDetail, column) {
+            const detail = {
+                newState: menuButtonEventDetail.newState,
+                oldState: menuButtonEventDetail.oldState,
+                recordIds: [this.recordId],
+                columnId: column.columnId
+            };
+            this.$emit(eventType, detail);
+        }
         hasValidFieldNames(keys) {
             return keys.every(key => key !== undefined);
         }
@@ -26922,6 +27303,12 @@
     __decorate$1([
         observable
     ], TableRow.prototype, "columns", void 0);
+    __decorate$1([
+        observable
+    ], TableRow.prototype, "currentActionMenuColumn", void 0);
+    __decorate$1([
+        attr({ attribute: 'menu-open', mode: 'boolean' })
+    ], TableRow.prototype, "menuOpen", void 0);
     __decorate$1([
         volatile
     ], TableRow.prototype, "columnStates", null);
@@ -26948,7 +27335,7 @@
             </div>
             <div class="table-viewport" ${ref('viewport')}>
                 <div class="table-scroll" style="height: ${x => x.virtualizer.allRowsHeight}px;"></div>
-                <div class="table-row-container" role="rowgroup" style="transform: ${x => (x.virtualizer.rowContainerYOffset === 0 ? 'none' : `translateY(${x.virtualizer.rowContainerYOffset}px)`)};">
+                <div class="table-row-container" role="rowgroup" style="top: ${x => `${x.virtualizer.rowContainerYOffset}px;`}">
                     ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                         ${repeat(x => x.virtualizer.visibleItems, html `
                             <${DesignSystem.tagFor(TableRow)}
@@ -26956,8 +27343,18 @@
                                 record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
                                 :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
                                 :columns="${(_, c) => c.parent.columns}"
+                                @row-action-menu-beforetoggle="${(_, c) => c.parent.onRowActionMenuBeforeToggle(c.event)}"
+                                @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
                                 style="height: ${x => x.size}px;"
                             >
+                            ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
+                                ${repeat((_, c) => c.parent.actionMenuSlots, html `
+                                    <slot
+                                        name="${x => x}"
+                                        slot="${x => `row-action-menu-${x}`}">
+                                    </slot>
+                                `)}
+                            `)}                        
                             </${DesignSystem.tagFor(TableRow)}>
                         `)}
                     `)}
@@ -27638,7 +28035,8 @@
             this.handleVirtualizerChange();
         }
         createVirtualizerOptions() {
-            const rowHeight = parseFloat(controlHeight.getValueFor(this.table));
+            const rowHeight = parseFloat(controlHeight.getValueFor(this.table))
+                + 2 * parseFloat(borderWidth.getValueFor(this.table));
             return {
                 count: this.table.tableData.length,
                 getScrollElement: () => {
@@ -27665,10 +28063,7 @@
             let rowContainerYOffset = 0;
             if (this.visibleItems.length > 0) {
                 const firstItem = this.visibleItems[0];
-                const lastItem = this.visibleItems[this.visibleItems.length - 1];
-                if (lastItem.end < this.allRowsHeight) {
-                    rowContainerYOffset = firstItem.start - virtualizer.scrollOffset;
-                }
+                rowContainerYOffset = firstItem.start;
             }
             this.rowContainerYOffset = rowContainerYOffset;
         }
@@ -27704,6 +28099,10 @@
              * @internal
              */
             this.childItems = [];
+            /**
+             * @internal
+             */
+            this.actionMenuSlots = [];
             /**
              * @internal
              */
@@ -27769,6 +28168,13 @@
                 }
             }
         }
+        onRowActionMenuBeforeToggle(event) {
+            this.openActionMenuRecordId = event.detail.recordIds[0];
+            this.$emit('action-menu-beforetoggle', event.detail);
+        }
+        onRowActionMenuToggle(event) {
+            this.$emit('action-menu-toggle', event.detail);
+        }
         childItemsChanged() {
             void this.updateColumnsFromChildItems();
         }
@@ -27782,6 +28188,13 @@
                 return;
             }
             this.validateAndObserveColumns();
+            const slots = new Set();
+            for (const column of this.columns) {
+                if (column.actionMenuSlot) {
+                    slots.add(column.actionMenuSlot);
+                }
+            }
+            this.actionMenuSlots = Array.from(slots);
         }
         removeColumnObservers() {
             this.columnNotifiers.forEach(notifier => {
@@ -27870,6 +28283,12 @@
     __decorate$1([
         observable
     ], Table.prototype, "childItems", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "actionMenuSlots", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "openActionMenuRecordId", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "canRenderRows", void 0);