@ni/nimble-components 8.3.0 → 8.6.0

package/dist/esm/all-components.d.ts

@@ -3,6 +3,7 @@
  * Production applications are encouraged to import only components
  * that are required instead of leveraging this file.
  */
+import './anchored-region';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';

package/dist/esm/all-components.js

@@ -3,6 +3,7 @@
  * Production applications are encouraged to import only components
  * that are required instead of leveraging this file.
  */
+import './anchored-region';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

package/dist/esm/anchored-region/index.d.ts

@@ -0,0 +1,11 @@
+import { AnchoredRegion as FoundationAnchoredRegion } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-anchored-region': AnchoredRegion;
+    }
+}
+/**
+ * A nimble-styled anchored region control.
+ */
+export declare class AnchoredRegion extends FoundationAnchoredRegion {
+}

package/dist/esm/anchored-region/index.js

@@ -0,0 +1,24 @@
+import { DesignSystem, AnchoredRegion as FoundationAnchoredRegion, anchoredRegionTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+// When the anchor element changes position on the page, it is the client's responsibility to update the position
+// of the anchored region by calling update() on the anchored region.
+//
+// When the anchor element is recreated on the page, it is the client's responsibility to reset the reference the
+// anchored region has to the anchor element. This can be done by either recreating the anchor element with a new
+// ID that is also set as the \`anchor\` attribute on the anchored region or by explicitly setting the value of
+// anchorElement on the anchored region to the new anchor element.
+/**
+ * A nimble-styled anchored region control.
+ */
+export class AnchoredRegion extends FoundationAnchoredRegion {
+}
+const nimbleAnchoredRegion = AnchoredRegion.compose({
+    baseName: 'anchored-region',
+    baseClass: FoundationAnchoredRegion,
+    template,
+    styles
+});
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleAnchoredRegion());
+//# sourceMappingURL=index.js.map

package/dist/esm/anchored-region/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchored-region/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,cAAc,IAAI,wBAAwB,EAC1C,sBAAsB,IAAI,QAAQ,EACrC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC,iHAAiH;AACjH,qEAAqE;AACrE,EAAE;AACF,iHAAiH;AACjH,iHAAiH;AACjH,+GAA+G;AAC/G,kEAAkE;AAElE;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,wBAAwB;CAAG;AAE/D,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC;IAChD,QAAQ,EAAE,iBAAiB;IAC3B,SAAS,EAAE,wBAAwB;IACnC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC"}

package/dist/esm/anchored-region/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/anchored-region/styles.js

@@ -0,0 +1,9 @@
+import { css } from '@microsoft/fast-element';
+export const styles = css `
+    :host {
+        contain: layout;
+        display: block;
+        z-index: 1000;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/anchored-region/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchored-region/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;CAMxB,CAAC"}

package/dist/esm/button/index.d.ts

@@ -1,4 +1,5 @@
 import { Button as FoundationButton } from '@microsoft/fast-foundation';
+import type { IButton } from '../patterns/button/types';
 import { ButtonAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
@@ -8,20 +9,14 @@ declare global {
 /**
  * A nimble-styled HTML button
  */
-export declare class Button extends FoundationButton {
+export declare class Button extends FoundationButton implements IButton {
     /**
-     * The appearance the button should have.
-     *
      * @public
      * @remarks
      * HTML Attribute: appearance
      */
     appearance: ButtonAppearance;
     /**
-     * Specify as 'true' to hide the text content of the button. The button will
-     * become square, and the text content will be used as the label of the button
-     * for accessibility purposes.
-     *
      * @public
      * @remarks
      * HTML Attribute: content-hidden

package/dist/esm/button/index.js

@@ -10,18 +10,12 @@ export class Button extends FoundationButton {
     constructor() {
         super(...arguments);
         /**
-         * The appearance the button should have.
-         *
          * @public
          * @remarks
          * HTML Attribute: appearance
          */
         this.appearance = ButtonAppearance.Outline;
         /**
-         * Specify as 'true' to hide the text content of the button. The button will
-         * become square, and the text content will be used as the label of the button
-         * for accessibility purposes.
-         *
          * @public
          * @remarks
          * HTML Attribute: content-hidden

package/dist/esm/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQ3C;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,gBAAgB;IAA5C;;QACI;;;;;;WAMG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IACjC,CAAC;CAAA;AAbG;IADC,IAAI;0CAC0D;AAY/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAGjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQ3C;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,gBAAgB;IAA5C;;QACI;;;;WAIG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;WAIG;QAEI,kBAAa,GAAG,KAAK,CAAC;IACjC,CAAC;CAAA;AATG;IADC,IAAI;0CAC0D;AAQ/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAGjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

package/dist/esm/menu-button/index.d.ts

@@ -0,0 +1,50 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { ButtonAppearance } from '../button/types';
+import type { ToggleButton } from '../toggle-button';
+import { MenuButtonPosition } from './types';
+import type { IButton } from '../patterns/button/types';
+import type { AnchoredRegion } from '../anchored-region';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-menu-button': MenuButton;
+    }
+}
+/**
+ * A nimble-styled menu button control.
+ */
+export declare class MenuButton extends FoundationElement implements IButton {
+    appearance: ButtonAppearance;
+    disabled: boolean;
+    contentHidden: boolean;
+    /**
+     * Specifies whether or not the menu is open.
+     */
+    open: boolean;
+    /**
+     * Configures where the menu should be placed relative to the button that opens the menu.
+     */
+    position: MenuButtonPosition;
+    /** @internal */
+    readonly toggleButton: ToggleButton | undefined;
+    /** @internal */
+    readonly region: AnchoredRegion | undefined;
+    /** @internal */
+    readonly slottedMenus: HTMLElement[] | undefined;
+    /**
+     * Used to maintain the internal state of whether the last menu item should be focused instead
+     * of the first menu item the next time the menu is opened.
+     */
+    private focusLastItemWhenOpened;
+    toggleButtonChanged(_prev: ToggleButton | undefined, _next: ToggleButton | undefined): void;
+    regionChanged(_prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
+    openChanged(_prev: boolean | undefined, _next: boolean): void;
+    regionLoadedHandler(): void;
+    focusoutHandler(e: FocusEvent): boolean;
+    toggleButtonCheckedChangeHandler(e: Event): boolean;
+    toggleButtonKeyDownHandler(e: KeyboardEvent): boolean;
+    menuChangeHandler(): void;
+    menuKeyDownHandler(e: KeyboardEvent): boolean;
+    private get menu();
+    private focusMenu;
+    private focusLastMenuItem;
+}

package/dist/esm/menu-button/index.js

@@ -0,0 +1,154 @@
+import { __decorate } from "tslib";
+import { attr, observable } from '@microsoft/fast-element';
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { keyArrowDown, keyArrowUp, keyEscape } from '@microsoft/fast-web-utilities';
+import { ButtonAppearance } from '../button/types';
+import { styles } from './styles';
+import { template } from './template';
+import { MenuButtonPosition } from './types';
+/**
+ * A nimble-styled menu button control.
+ */
+export class MenuButton extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.appearance = ButtonAppearance.Outline;
+        this.disabled = false;
+        this.contentHidden = false;
+        /**
+         * Specifies whether or not the menu is open.
+         */
+        this.open = false;
+        /**
+         * Configures where the menu should be placed relative to the button that opens the menu.
+         */
+        this.position = MenuButtonPosition.auto;
+        /**
+         * Used to maintain the internal state of whether the last menu item should be focused instead
+         * of the first menu item the next time the menu is opened.
+         */
+        this.focusLastItemWhenOpened = false;
+    }
+    toggleButtonChanged(_prev, _next) {
+        if (this.region && this.toggleButton) {
+            this.region.anchorElement = this.toggleButton;
+        }
+    }
+    regionChanged(_prev, _next) {
+        if (this.region && this.toggleButton) {
+            this.region.anchorElement = this.toggleButton;
+        }
+    }
+    openChanged(_prev, _next) {
+        if (this.toggleButton) {
+            this.toggleButton.checked = this.open;
+        }
+        if (!this.open) {
+            // Only fire an event here if the menu is changing to being closed. Otherwise,
+            // wait until the menu is actually opened before firing the event.
+            this.$emit('open-change');
+        }
+    }
+    regionLoadedHandler() {
+        if (this.focusLastItemWhenOpened) {
+            this.focusLastMenuItem();
+            this.focusLastItemWhenOpened = false;
+        }
+        else {
+            this.focusMenu();
+        }
+        this.$emit('open-change');
+    }
+    focusoutHandler(e) {
+        if (!this.open) {
+            return true;
+        }
+        const focusTarget = e.relatedTarget;
+        if (!this.contains(focusTarget)) {
+            this.open = false;
+            return false;
+        }
+        return true;
+    }
+    toggleButtonCheckedChangeHandler(e) {
+        this.open = this.toggleButton.checked;
+        // Don't bubble the 'change' event from the toggle button because
+        // the menu button has its own 'open-change' event.
+        e.stopPropagation();
+        return false;
+    }
+    toggleButtonKeyDownHandler(e) {
+        switch (e.key) {
+            case keyArrowUp:
+                this.focusLastItemWhenOpened = true;
+                this.open = true;
+                return false;
+            case keyArrowDown:
+                this.open = true;
+                return false;
+            default:
+                return true;
+        }
+    }
+    menuChangeHandler() {
+        this.open = false;
+        this.toggleButton.focus();
+    }
+    menuKeyDownHandler(e) {
+        switch (e.key) {
+            case keyEscape:
+                this.open = false;
+                this.toggleButton.focus();
+                return false;
+            default:
+                return true;
+        }
+    }
+    get menu() {
+        return this.slottedMenus?.length ? this.slottedMenus[0] : undefined;
+    }
+    focusMenu() {
+        this.menu?.focus();
+    }
+    focusLastMenuItem() {
+        const menuItems = this.menu?.querySelectorAll('[role=menuitem]');
+        if (menuItems?.length) {
+            const lastMenuItem = menuItems[menuItems.length - 1];
+            lastMenuItem.focus();
+        }
+    }
+}
+__decorate([
+    attr
+], MenuButton.prototype, "appearance", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], MenuButton.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: 'content-hidden', mode: 'boolean' })
+], MenuButton.prototype, "contentHidden", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], MenuButton.prototype, "open", void 0);
+__decorate([
+    attr({ attribute: 'position' })
+], MenuButton.prototype, "position", void 0);
+__decorate([
+    observable
+], MenuButton.prototype, "toggleButton", void 0);
+__decorate([
+    observable
+], MenuButton.prototype, "region", void 0);
+__decorate([
+    observable
+], MenuButton.prototype, "slottedMenus", void 0);
+const nimbleMenuButton = MenuButton.compose({
+    baseName: 'menu-button',
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    }
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
+//# sourceMappingURL=index.js.map

package/dist/esm/menu-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EACH,YAAY,EACZ,UAAU,EACV,SAAS,EACZ,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAU7C;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,iBAAiB;IAAjD;;QAEW,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAGxD,aAAQ,GAAG,KAAK,CAAC;QAGjB,kBAAa,GAAG,KAAK,CAAC;QAE7B;;WAEG;QAEI,SAAI,GAAG,KAAK,CAAC;QAEpB;;WAEG;QAEI,aAAQ,GAAuB,kBAAkB,CAAC,IAAI,CAAC;QAc9D;;;WAGG;QACK,4BAAuB,GAAG,KAAK,CAAC;IA8G5C,CAAC;IA5GU,mBAAmB,CACtB,KAA+B,EAC/B,KAA+B;QAE/B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,EAAE;YAClC,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC;SACjD;IACL,CAAC;IAEM,aAAa,CAChB,KAAiC,EACjC,KAAiC;QAEjC,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,EAAE;YAClC,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC;SACjD;IACL,CAAC;IAEM,WAAW,CAAC,KAA0B,EAAE,KAAc;QACzD,IAAI,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;SACzC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,8EAA8E;YAC9E,kEAAkE;YAClE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;SAC7B;IACL,CAAC;IAEM,mBAAmB;QACtB,IAAI,IAAI,CAAC,uBAAuB,EAAE;YAC9B,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;SACxC;aAAM;YACH,IAAI,CAAC,SAAS,EAAE,CAAC;SACpB;QAED,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IAC9B,CAAC;IAEM,eAAe,CAAC,CAAa;QAChC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,OAAO,IAAI,CAAC;SACf;QAED,MAAM,WAAW,GAAG,CAAC,CAAC,aAA4B,CAAC;QACnD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YAC7B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,OAAO,KAAK,CAAC;SAChB;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAEM,gCAAgC,CAAC,CAAQ;QAC5C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAa,CAAC,OAAO,CAAC;QACvC,iEAAiE;QACjE,mDAAmD;QACnD,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,0BAA0B,CAAC,CAAgB;QAC9C,QAAQ,CAAC,CAAC,GAAG,EAAE;YACX,KAAK,UAAU;gBACX,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC;gBACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,OAAO,KAAK,CAAC;YACjB,KAAK,YAAY;gBACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,OAAO,KAAK,CAAC;YACjB;gBACI,OAAO,IAAI,CAAC;SACnB;IACL,CAAC;IAEM,iBAAiB;QACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,YAAa,CAAC,KAAK,EAAE,CAAC;IAC/B,CAAC;IAEM,kBAAkB,CAAC,CAAgB;QACtC,QAAQ,CAAC,CAAC,GAAG,EAAE;YACX,KAAK,SAAS;gBACV,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,IAAI,CAAC,YAAa,CAAC,KAAK,EAAE,CAAC;gBAC3B,OAAO,KAAK,CAAC;YACjB;gBACI,OAAO,IAAI,CAAC;SACnB;IACL,CAAC;IAED,IAAY,IAAI;QACZ,OAAO,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACxE,CAAC;IAEO,SAAS;QACb,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IACvB,CAAC;IAEO,iBAAiB;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;QACjE,IAAI,SAAS,EAAE,MAAM,EAAE;YACnB,MAAM,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;YACpE,YAAY,CAAC,KAAK,EAAE,CAAC;SACxB;IACL,CAAC;CACJ;AAlJG;IADC,IAAI;8CAC0D;AAG/D;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACF;AAGxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDAC1B;AAM7B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACN;AAMpB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;4CAC8B;AAI9D;IADC,UAAU;gDAC4C;AAIvD;IADC,UAAU;0CACwC;AAInD;IADC,UAAU;gDAC6C;AAsH5D,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC"}

package/dist/esm/menu-button/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/menu-button/styles.js

@@ -0,0 +1,29 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { controlHeight, smallPadding } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('inline-block')}
+
+    :host {
+        height: ${controlHeight};
+    }
+
+    [part='button'] {
+        width: 100%;
+        height: 100%;
+    }
+
+    [part='start'] {
+        display: contents;
+    }
+
+    [part='end'] {
+        display: contents;
+    }
+
+    slot[name='menu']::slotted(*) {
+        margin-top: ${smallPadding};
+        margin-bottom: ${smallPadding};
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/menu-button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE9E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;kBAGX,aAAa;;;;;;;;;;;;;;;;;sBAiBT,YAAY;yBACT,YAAY;;CAEpC,CAAC"}

package/dist/esm/menu-button/template.d.ts

@@ -0,0 +1,2 @@
+import type { MenuButton } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<MenuButton, any>;

package/dist/esm/menu-button/template.js

@@ -0,0 +1,48 @@
+import { elements, html, ref, slotted, when } from '@microsoft/fast-element';
+// prettier-ignore
+export const template = html `
+    <template
+        ?open="${x => x.open}"
+        @focusout="${(x, c) => x.focusoutHandler(c.event)}"
+    >
+        <nimble-toggle-button
+            part="button"
+            appearance="${x => x.appearance}"
+            content-hidden="${x => x.contentHidden}"
+            ?checked="${x => x.open}"
+            ?disabled="${x => x.disabled}"
+            aria-haspopup="true"
+            aria-expanded="${x => x.open}"
+            @change="${(x, c) => x.toggleButtonCheckedChangeHandler(c.event)}"
+            @keydown="${(x, c) => x.toggleButtonKeyDownHandler(c.event)}"
+            ${ref('toggleButton')}
+        >
+            <span slot="start" part="start">
+                <slot name="start"></slot>
+            </span>
+            <slot></slot>
+            <span slot="end" part="end">
+                <slot name="end"></slot>
+            </span>
+        </nimble-toggle-button>
+        ${when(x => x.open, html `
+            <nimble-anchored-region
+                fixed-placement="true"
+                auto-update-mode="auto"
+                horizontal-inset="true"
+                horizontal-positioning-mode="dynamic"
+                vertical-positioning-mode="${x => (x.position === 'auto' ? 'dynamic' : 'locktodefault')}"
+                vertical-default-position="${x => (x.position === 'above' ? 'top' : 'bottom')}"
+                @loaded="${x => x.regionLoadedHandler()}"
+                @change="${x => x.menuChangeHandler()}"
+                @keydown="${(x, c) => x.menuKeyDownHandler(c.event)}"
+                ${ref('region')}
+            >
+                <span part="menu">
+                    <slot name="menu" ${slotted({ property: 'slottedMenus', filter: elements('[role=menu]') })}></slot>
+                </span>
+            </nimble-anchored-region>
+        `)}
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/menu-button/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/menu-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG7E,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAY;;iBAEvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;;;0BAI7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;8BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;wBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;6BAEX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACpD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAsB,CAAC;cAC1E,GAAG,CAAC,cAAc,CAAC;;;;;;;;;;UAUvB,IAAI,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAY;;;;;;6CAMqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;6CAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;2BAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;2BAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE;4BACzB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAClE,GAAG,CAAC,QAAQ,CAAC;;;wCAGS,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;;;SAGrG,CACJ;;CAEJ,CAAC"}

package/dist/esm/menu-button/types.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Types of menu button appearance.
+ * @public
+ */
+export type { ButtonAppearanceAttribute } from '../patterns/button/types';
+export { ButtonAppearance } from '../patterns/button/types';
+/**
+ * The options of where to position the menu relative to the menu button.
+ */
+export declare const MenuButtonPosition: {
+    readonly above: "above";
+    readonly below: "below";
+    readonly auto: "auto";
+};
+export declare type MenuButtonPosition = typeof MenuButtonPosition[keyof typeof MenuButtonPosition];

package/dist/esm/menu-button/types.js

@@ -0,0 +1,11 @@
+export { ButtonAppearance } from '../patterns/button/types';
+/**
+ * The options of where to position the menu relative to the menu button.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const MenuButtonPosition = {
+    above: 'above',
+    below: 'below',
+    auto: 'auto'
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/menu-button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/menu-button/types.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;GAEG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACN,CAAC"}

package/dist/esm/nimble-components/src/all-components.d.ts

@@ -3,6 +3,7 @@
  * Production applications are encouraged to import only components
  * that are required instead of leveraging this file.
  */
+import './anchored-region';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';

package/dist/esm/nimble-components/src/anchored-region/index.d.ts

@@ -0,0 +1,11 @@
+import { AnchoredRegion as FoundationAnchoredRegion } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-anchored-region': AnchoredRegion;
+    }
+}
+/**
+ * A nimble-styled anchored region control.
+ */
+export declare class AnchoredRegion extends FoundationAnchoredRegion {
+}

package/dist/esm/nimble-components/src/anchored-region/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/button/index.d.ts

@@ -1,4 +1,5 @@
 import { Button as FoundationButton } from '@microsoft/fast-foundation';
+import type { IButton } from '../patterns/button/types';
 import { ButtonAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
@@ -8,20 +9,14 @@ declare global {
 /**
  * A nimble-styled HTML button
  */
-export declare class Button extends FoundationButton {
+export declare class Button extends FoundationButton implements IButton {
     /**
-     * The appearance the button should have.
-     *
      * @public
      * @remarks
      * HTML Attribute: appearance
      */
     appearance: ButtonAppearance;
     /**
-     * Specify as 'true' to hide the text content of the button. The button will
-     * become square, and the text content will be used as the label of the button
-     * for accessibility purposes.
-     *
      * @public
      * @remarks
      * HTML Attribute: content-hidden

package/dist/esm/nimble-components/src/menu-button/index.d.ts

@@ -0,0 +1,50 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { ButtonAppearance } from '../button/types';
+import type { ToggleButton } from '../toggle-button';
+import { MenuButtonPosition } from './types';
+import type { IButton } from '../patterns/button/types';
+import type { AnchoredRegion } from '../anchored-region';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-menu-button': MenuButton;
+    }
+}
+/**
+ * A nimble-styled menu button control.
+ */
+export declare class MenuButton extends FoundationElement implements IButton {
+    appearance: ButtonAppearance;
+    disabled: boolean;
+    contentHidden: boolean;
+    /**
+     * Specifies whether or not the menu is open.
+     */
+    open: boolean;
+    /**
+     * Configures where the menu should be placed relative to the button that opens the menu.
+     */
+    position: MenuButtonPosition;
+    /** @internal */
+    readonly toggleButton: ToggleButton | undefined;
+    /** @internal */
+    readonly region: AnchoredRegion | undefined;
+    /** @internal */
+    readonly slottedMenus: HTMLElement[] | undefined;
+    /**
+     * Used to maintain the internal state of whether the last menu item should be focused instead
+     * of the first menu item the next time the menu is opened.
+     */
+    private focusLastItemWhenOpened;
+    toggleButtonChanged(_prev: ToggleButton | undefined, _next: ToggleButton | undefined): void;
+    regionChanged(_prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
+    openChanged(_prev: boolean | undefined, _next: boolean): void;
+    regionLoadedHandler(): void;
+    focusoutHandler(e: FocusEvent): boolean;
+    toggleButtonCheckedChangeHandler(e: Event): boolean;
+    toggleButtonKeyDownHandler(e: KeyboardEvent): boolean;
+    menuChangeHandler(): void;
+    menuKeyDownHandler(e: KeyboardEvent): boolean;
+    private get menu();
+    private focusMenu;
+    private focusLastMenuItem;
+}

package/dist/esm/nimble-components/src/menu-button/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/menu-button/template.d.ts

@@ -0,0 +1,2 @@
+import type { MenuButton } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<MenuButton, any>;

package/dist/esm/nimble-components/src/menu-button/types.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Types of menu button appearance.
+ * @public
+ */
+export type { ButtonAppearanceAttribute } from '../patterns/button/types';
+export { ButtonAppearance } from '../patterns/button/types';
+/**
+ * The options of where to position the menu relative to the menu button.
+ */
+export declare const MenuButtonPosition: {
+    readonly above: "above";
+    readonly below: "below";
+    readonly auto: "auto";
+};
+export declare type MenuButtonPosition = typeof MenuButtonPosition[keyof typeof MenuButtonPosition];

package/dist/esm/nimble-components/src/patterns/button/types.d.ts

@@ -1,3 +1,23 @@
+/**
+ * The interface that buttons of various types implement. The properties in this interface
+ * are leveraged by the shared button pattern css.
+ */
+export interface IButton {
+    /**
+     * The appearance the button should have.
+     */
+    appearance: ButtonAppearance;
+    /**
+     * Specify as 'true' to hide the text content of the button. The button will
+     * become square, and the text content will be used as the label of the button
+     * for accessibility purposes.
+     */
+    contentHidden: boolean;
+    /**
+     * Whether or not the button is disabled.
+     */
+    disabled: boolean;
+}
 /**
  * Types of button appearance.
  * @public