@fluentui/web-components 3.0.0-beta.2 → 3.0.0-beta.20

package/dist/esm/menu-list/menu-list.js

@@ -1,13 +1,245 @@
-import { FASTMenu } from '@microsoft/fast-foundation/menu.js';
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
+import { isHTMLElement, keyArrowDown, keyArrowUp, keyEnd, keyHome } from '@microsoft/fast-web-utilities';
 import { MenuItem, MenuItemRole } from '../menu-item/index.js';
 /**
- * The base class used for constructing a fluent-menu-list custom element
+ * A Menu Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @slot - The default slot for the menu items
+ *
  * @public
  */
-export class MenuList extends FASTMenu {
+export class MenuList extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.expandedItem = null;
+        /**
+         * The index of the focusable element in the items array
+         * defaults to -1
+         */
+        this.focusIndex = -1;
+        /**
+         * @internal
+         */
+        this.isNestedMenu = () => {
+            return (this.parentElement !== null &&
+                isHTMLElement(this.parentElement) &&
+                this.parentElement.getAttribute('role') === 'menuitem');
+        };
+        /**
+         * if focus is moving out of the menu, reset to a stable initial state
+         * @internal
+         */
+        this.handleFocusOut = (e) => {
+            if (!this.contains(e.relatedTarget) && this.menuItems !== undefined) {
+                this.collapseExpandedItem();
+                // find our first focusable element
+                const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
+                // set the current focus index's tabindex to -1
+                this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
+                // set the first focusable element tabindex to 0
+                this.menuItems[focusIndex].setAttribute('tabindex', '0');
+                // set the focus index
+                this.focusIndex = focusIndex;
+            }
+        };
+        this.handleItemFocus = (e) => {
+            const targetItem = e.target;
+            if (this.menuItems !== undefined && targetItem !== this.menuItems[this.focusIndex]) {
+                this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
+                this.focusIndex = this.menuItems.indexOf(targetItem);
+                targetItem.setAttribute('tabindex', '0');
+            }
+        };
+        this.handleExpandedChanged = (e) => {
+            if (e.defaultPrevented ||
+                e.target === null ||
+                this.menuItems === undefined ||
+                this.menuItems.indexOf(e.target) < 0) {
+                return;
+            }
+            e.preventDefault();
+            const changedItem = e.target;
+            // closing an expanded item without opening another
+            if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) {
+                this.expandedItem = null;
+                return;
+            }
+            if (changedItem.expanded) {
+                if (this.expandedItem !== null && this.expandedItem !== changedItem) {
+                    this.expandedItem.expanded = false;
+                }
+                this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
+                this.expandedItem = changedItem;
+                this.focusIndex = this.menuItems.indexOf(changedItem);
+                changedItem.setAttribute('tabindex', '0');
+            }
+        };
+        /**
+         * handle change from child element
+         */
+        this.changeHandler = (e) => {
+            if (this.menuItems === undefined) {
+                return;
+            }
+            const changedMenuItem = e.target;
+            const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
+            if (changeItemIndex === -1) {
+                return;
+            }
+            if (changedMenuItem.role === 'menuitemradio' && changedMenuItem.checked === true) {
+                for (let i = changeItemIndex - 1; i >= 0; --i) {
+                    const item = this.menuItems[i];
+                    const role = item.getAttribute('role');
+                    if (role === MenuItemRole.menuitemradio) {
+                        item.checked = false;
+                    }
+                    if (role === 'separator') {
+                        break;
+                    }
+                }
+                const maxIndex = this.menuItems.length - 1;
+                for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
+                    const item = this.menuItems[i];
+                    const role = item.getAttribute('role');
+                    if (role === MenuItemRole.menuitemradio) {
+                        item.checked = false;
+                    }
+                    if (role === 'separator') {
+                        break;
+                    }
+                }
+            }
+        };
+        /**
+         * check if the item is a menu item
+         */
+        this.isMenuItemElement = (el) => {
+            return (el instanceof MenuItem ||
+                (isHTMLElement(el) && el.getAttribute('role') in MenuList.focusableElementRoles));
+        };
+        /**
+         * check if the item is focusable
+         */
+        this.isFocusableElement = (el) => {
+            return this.isMenuItemElement(el);
+        };
+    }
+    itemsChanged(oldValue, newValue) {
+        // only update children after the component is connected and
+        // the setItems has run on connectedCallback
+        // (menuItems is undefined until then)
+        if (this.$fastController.isConnected && this.menuItems !== undefined) {
+            this.setItems();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        Updates.enqueue(() => {
+            // wait until children have had a chance to
+            // connect before setting/checking their props/attributes
+            this.setItems();
+        });
+        this.addEventListener('change', this.changeHandler);
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeItemListeners();
+        this.menuItems = undefined;
+        this.removeEventListener('change', this.changeHandler);
+    }
+    /**
+     * Focuses the first item in the menu.
+     *
+     * @public
+     */
+    focus() {
+        this.setFocus(0, 1);
+    }
+    /**
+     * Collapses any expanded menu items.
+     *
+     * @public
+     */
+    collapseExpandedItem() {
+        if (this.expandedItem !== null) {
+            this.expandedItem.expanded = false;
+            this.expandedItem = null;
+        }
+    }
+    /**
+     * @internal
+     */
+    handleMenuKeyDown(e) {
+        if (e.defaultPrevented || this.menuItems === undefined) {
+            return;
+        }
+        switch (e.key) {
+            case keyArrowDown:
+                // go forward one index
+                this.setFocus(this.focusIndex + 1, 1);
+                return;
+            case keyArrowUp:
+                // go back one index
+                this.setFocus(this.focusIndex - 1, -1);
+                return;
+            case keyEnd:
+                // set focus on last item
+                this.setFocus(this.menuItems.length - 1, -1);
+                return;
+            case keyHome:
+                // set focus on first item
+                this.setFocus(0, 1);
+                return;
+            default:
+                // if we are not handling the event, do not prevent default
+                return true;
+        }
+    }
+    removeItemListeners(items = this.items) {
+        items.forEach(item => {
+            item.removeEventListener('focus', this.handleItemFocus);
+            item.removeEventListener('expanded-changed', this.handleExpandedChanged);
+            Observable.getNotifier(item).unsubscribe(this, 'hidden');
+        });
+    }
+    static elementIndent(el) {
+        const role = el.getAttribute('role');
+        const startSlot = el.querySelector('[slot=start]');
+        if (role && role !== MenuItemRole.menuitem) {
+            return startSlot ? 2 : 1;
+        }
+        return startSlot ? 1 : 0;
+    }
     setItems() {
         var _a;
-        super.setItems();
+        const children = Array.from(this.children);
+        this.removeItemListeners(children);
+        children.forEach((child) => Observable.getNotifier(child).subscribe(this, 'hidden'));
+        const newItems = children.filter(child => !child.hasAttribute('hidden'));
+        this.menuItems = newItems;
+        const menuItems = this.menuItems.filter(this.isMenuItemElement);
+        // if our focus index is not -1 we have items
+        if (menuItems.length) {
+            this.focusIndex = 0;
+        }
+        menuItems.forEach((item, index) => {
+            item.setAttribute('tabindex', index === 0 ? '0' : '-1');
+            item.addEventListener('expanded-change', this.handleExpandedChanged);
+            item.addEventListener('focus', this.handleItemFocus);
+        });
         /**
          * Set the indent attribute on MenuItem elements based on their
          * position in the MenuList. Each MenuItem element has a data-indent attribute that is
@@ -24,13 +256,36 @@ export class MenuList extends FASTMenu {
             }
         });
     }
-    static elementIndent(el) {
-        const role = el.getAttribute('role');
-        const startSlot = el.querySelector('[slot=start]');
-        if (role && role !== MenuItemRole.menuitem) {
-            return startSlot ? 2 : 1;
+    handleChange(source, propertyName) {
+        if (propertyName === 'hidden') {
+            this.setItems();
+        }
+    }
+    setFocus(focusIndex, adjustment) {
+        if (this.menuItems === undefined) {
+            return;
+        }
+        while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
+            const child = this.menuItems[focusIndex];
+            if (this.isFocusableElement(child)) {
+                // change the previous index to -1
+                if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
+                    this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
+                }
+                // update the focus index
+                this.focusIndex = focusIndex;
+                // update the tabindex of next focusable element
+                child.setAttribute('tabindex', '0');
+                // focus the element
+                child.focus();
+                break;
+            }
+            focusIndex += adjustment;
         }
-        return startSlot ? 1 : 0;
     }
 }
+MenuList.focusableElementRoles = MenuItemRole;
+__decorate([
+    observable
+], MenuList.prototype, "items", void 0);
 //# sourceMappingURL=menu-list.js.map

package/dist/esm/menu-list/menu-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAuB,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEpF;;;GAGG;AAEH,MAAM,OAAO,QAAS,SAAQ,QAAQ;IAC1B,QAAQ;;QAChB,KAAK,CAAC,QAAQ,EAAE,CAAC;QAEjB;;;;WAIG;QACH,MAAM,qBAAqB,GAAG,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAE7E,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,OAAO,CAAC,CAAC,IAAiB,EAAE,KAAa,EAAE,EAAE;YAClE,MAAM,MAAM,GAAwB,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,MAAM,CAAsB,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;gBACxG,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAsB,CAAC,CAAC;gBAEpE,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,YAAsB,CAAwB,CAAC;YACxE,CAAC,EAAE,CAAC,CAAC,CAAC;YAEN,IAAI,IAAI,YAAY,QAAQ,EAAE;gBAC5B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;aAC/C;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,MAAM,CAAC,aAAa,CAAC,EAAe;QAC1C,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACrC,MAAM,SAAS,GAAG,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAEnD,IAAI,IAAI,IAAI,IAAI,KAAK,YAAY,CAAC,QAAQ,EAAE;YAC1C,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1B;QAED,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC;CACF"}
+{"version":3,"file":"menu-list.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.ts"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import { borderRadiusMedium, colorNeutralBackground1, colorTransparentStroke, shadow16, } from '../theme/design-tokens.js';
 /** MenuList styles
  * @public

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

@@ -1 +1 @@
-{"version":3,"file":"menu-list.styles.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,GACT,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;wBAQK,uBAAuB;wBACvB,sBAAsB;qBACzB,kBAAkB;kBACrB,QAAQ;;;;CAIzB,CAAC"}
+{"version":3,"file":"menu-list.styles.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,GACT,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;wBAQK,uBAAuB;wBACvB,sBAAsB;qBACzB,kBAAkB;kBACrB,QAAQ;;;;CAIzB,CAAC"}

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

@@ -1,3 +1,15 @@
-import { menuTemplate } from '@microsoft/fast-foundation/menu.js';
+import { html, slotted } from '@microsoft/fast-element';
+export function menuTemplate() {
+    return html `
+    <template
+      slot="${x => (x.slot ? x.slot : x.isNestedMenu() ? 'submenu' : void 0)}"
+      role="menu"
+      @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
+      @focusout="${(x, c) => x.handleFocusOut(c.event)}"
+    >
+      <slot ${slotted('items')}></slot>
+    </template>
+  `;
+}
 export const template = menuTemplate();
 //# sourceMappingURL=menu-list.template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu-list.template.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAGlE,MAAM,CAAC,MAAM,QAAQ,GAAkC,YAAY,EAAE,CAAC"}
+{"version":3,"file":"menu-list.template.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAG7E,MAAM,UAAU,YAAY;IAC1B,OAAO,IAAI,CAAG;;cAEF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;;kBAE1D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAsB,CAAC;mBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;;cAEtD,OAAO,CAAC,OAAO,CAAC;;GAE3B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,YAAY,EAAE,CAAC"}

package/dist/esm/patterns/aria-globals.js

@@ -0,0 +1,77 @@
+//Copied from @microsoft/fast-foundation
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { attr } from '@microsoft/fast-element';
+/**
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
+ * The following global states and properties are supported by all roles and by all base markup elements.
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
+ *
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
+ *
+ * @public
+ */
+export class ARIAGlobalStatesAndProperties {
+}
+__decorate([
+    attr({ attribute: 'aria-atomic' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
+__decorate([
+    attr({ attribute: 'aria-busy' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
+__decorate([
+    attr({ attribute: 'aria-controls' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
+__decorate([
+    attr({ attribute: 'aria-current' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
+__decorate([
+    attr({ attribute: 'aria-describedby' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
+__decorate([
+    attr({ attribute: 'aria-details' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
+__decorate([
+    attr({ attribute: 'aria-disabled' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
+__decorate([
+    attr({ attribute: 'aria-errormessage' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
+__decorate([
+    attr({ attribute: 'aria-flowto' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
+__decorate([
+    attr({ attribute: 'aria-haspopup' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
+__decorate([
+    attr({ attribute: 'aria-hidden' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
+__decorate([
+    attr({ attribute: 'aria-invalid' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
+__decorate([
+    attr({ attribute: 'aria-keyshortcuts' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
+__decorate([
+    attr({ attribute: 'aria-label' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
+__decorate([
+    attr({ attribute: 'aria-labelledby' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
+__decorate([
+    attr({ attribute: 'aria-live' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
+__decorate([
+    attr({ attribute: 'aria-owns' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
+__decorate([
+    attr({ attribute: 'aria-relevant' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
+__decorate([
+    attr({ attribute: 'aria-roledescription' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
+//# sourceMappingURL=aria-globals.js.map

package/dist/esm/patterns/aria-globals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-globals.js","sourceRoot":"","sources":["../../../src/patterns/aria-globals.ts"],"names":[],"mappings":"AAAA,wCAAwC;;;;;;;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C;;;;;;;;GAQG;AACH,MAAM,OAAO,6BAA6B;CAwNzC;AA7MC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iEACkB;AAYrD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+DACkB;AAWnD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEACD;AAWpC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kEACmE;AAWvG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;sEACD;AAWvC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kEACD;AAWnC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEACkB;AAWvD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;uEACD;AAYxC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iEACD;AAYlC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEACoE;AAWzG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iEACkB;AAWrD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kEAC2C;AAW/E;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;uEACD;AAWxC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;gEACD;AAWjC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;qEACD;AAYtC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+DACgC;AAajE;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+DACD;AAWhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEAC8D;AAWnG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;0EACD"}

package/dist/esm/patterns/index.js

@@ -0,0 +1,3 @@
+export * from './aria-globals.js';
+export * from './start-end.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}

package/dist/esm/patterns/start-end.js

@@ -0,0 +1,29 @@
+//Copied from @microsoft/fast-foundation
+import { html, ref } from '@microsoft/fast-element';
+import { staticallyCompose } from '../utils/index.js';
+/**
+ * A mixin class implementing start and end slots.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+export class StartEnd {
+}
+/**
+ * The template for the end slot.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export function endSlotTemplate(options) {
+    return html ` <slot name="end" ${ref('end')}>${staticallyCompose(options.end)}</slot> `.inline();
+}
+/**
+ * The template for the start slots.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export function startSlotTemplate(options) {
+    return html ` <slot name="start" ${ref('start')}>${staticallyCompose(options.start)}</slot> `.inline();
+}
+//# sourceMappingURL=start-end.js.map

package/dist/esm/patterns/start-end.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"start-end.js","sourceRoot":"","sources":["../../../src/patterns/start-end.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,OAAO,EAAe,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAyBtD;;;;GAIG;AACH,MAAM,OAAO,QAAQ;CAGpB;AAED;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAC7B,OAAqC;IAErC,OAAO,IAAI,CAAA,qBAAqB,GAAG,CAAC,KAAK,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AAClG,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAC/B,OAAuC;IAEvC,OAAO,IAAI,CAAA,uBAAuB,GAAG,CAAC,OAAO,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AACxG,CAAC"}

package/dist/esm/progress-bar/base-progress.js

@@ -0,0 +1,61 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
+/**
+ * A base class for progress components.
+ * @public
+ */
+export class BaseProgress extends FASTElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates progress in %
+         * @internal
+         */
+        this.percentComplete = 0;
+    }
+    valueChanged() {
+        this.updatePercentComplete();
+    }
+    minChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    maxChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updatePercentComplete();
+    }
+    updatePercentComplete() {
+        const min = typeof this.min === 'number' ? this.min : 0;
+        const max = typeof this.max === 'number' ? this.max : 100;
+        const value = typeof this.value === 'number' ? this.value : 0;
+        const range = max - min;
+        this.percentComplete = range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
+    }
+}
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "value", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "min", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "max", void 0);
+__decorate([
+    observable
+], BaseProgress.prototype, "percentComplete", void 0);
+//# sourceMappingURL=base-progress.js.map

package/dist/esm/progress-bar/base-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-progress.js","sourceRoot":"","sources":["../../../src/progress-bar/base-progress.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEjG;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAyCE;;;WAGG;QAEI,oBAAe,GAAW,CAAC,CAAC;IAkBrC,CAAC;IAvDW,YAAY;QACpB,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAUS,UAAU;QAClB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACpC,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAC9B;IACH,CAAC;IAUS,UAAU;QAClB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACpC,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAC9B;IACH,CAAC;IASD;;OAEG;IACI,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAEO,qBAAqB;QAC3B,MAAM,GAAG,GAAW,OAAO,IAAI,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAChE,MAAM,GAAG,GAAW,OAAO,IAAI,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QAClE,MAAM,KAAK,GAAW,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACtE,MAAM,KAAK,GAAW,GAAG,GAAG,GAAG,CAAC;QAEhC,IAAI,CAAC,eAAe,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC;IACtF,CAAC;CACF;AAxDC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;2CAChB;AAY7B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;yCACzB;AAcpB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;yCACzB;AAYpB;IADC,UAAU;qDACwB"}

package/dist/esm/progress-bar/index.js

@@ -1,5 +1,5 @@
-export * from './progress-bar.js';
-export * from './progress-bar.options.js';
+export { ProgressBar } from './progress-bar.js';
+export { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState, } from './progress-bar.options.js';
 export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
 export { styles as ProgressBarStyles } from './progress-bar.styles.js';
 export { template as ProgressBarTemplate } from './progress-bar.template.js';

package/dist/esm/progress-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAEL,gBAAgB,EAChB,oBAAoB,EACpB,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/esm/progress-bar/progress-bar.js

@@ -5,12 +5,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { attr } from '@microsoft/fast-element';
-import { FASTProgress } from '@microsoft/fast-foundation/progress.js';
+import { BaseProgress } from './base-progress.js';
 /**
- * The base class used for constructing a fluent-progress-bar custom element
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
  * @public
  */
-export class ProgressBar extends FASTProgress {
+export class ProgressBar extends BaseProgress {
     constructor() {
         super(...arguments);
         /**

package/dist/esm/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAGtE;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QAoBE;;;;;WAKG;QAEI,oBAAe,GAAsC,IAAI,CAAC;IACnE,CAAC;CAAA;AAnBC;IADC,IAAI;8CACmC;AASxC;IADC,IAAI;0CAC2B;AAShC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;oDACyB"}
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QAoBE;;;;;WAKG;QAEI,oBAAe,GAAsC,IAAI,CAAC;IACnE,CAAC;CAAA;AAnBC;IADC,IAAI;8CACmC;AASxC;IADC,IAAI;0CAC2B;AAShC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;oDACyB"}

package/dist/esm/progress-bar/progress-bar.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.options.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACN,CAAC"}
+{"version":3,"file":"progress-bar.options.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.options.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACN,CAAC"}

package/dist/esm/progress-bar/progress-bar.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { borderRadiusMedium, colorBrandBackground2, colorCompoundBrandBackground, colorNeutralBackground6, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteRedBackground2, colorPaletteRedBackground3, } from '../theme/design-tokens.js';
 /** ProgressBar styles
  * @public

package/dist/esm/progress-bar/progress-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,4BAA4B,EAC5B,uBAAuB,EACvB,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,EAC5B,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;qBAME,kBAAkB;;;;;;;;;;;;;;;;;wBAiBf,0BAA0B;;;;;;;QAO1C,0BAA0B;QAC1B,0BAA0B;QAC1B,0BAA0B;;;;;wBAKV,iCAAiC;;;;;;;QAOjD,iCAAiC;QACjC,iCAAiC;QACjC,iCAAiC;;;;;wBAKjB,4BAA4B;;;;;;;QAO5C,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;;;;;;;;;wBASf,4BAA4B;qBAC/B,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,4BAA4B,EAC5B,uBAAuB,EACvB,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,EAC5B,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;qBAME,kBAAkB;;;;;;;;;;;;;;;;;wBAiBf,0BAA0B;;;;;;;QAO1C,0BAA0B;QAC1B,0BAA0B;QAC1B,0BAA0B;;;;;wBAKV,iCAAiC;;;;;;;QAOjD,iCAAiC;QACjC,iCAAiC;QACjC,iCAAiC;;;;;wBAKjB,4BAA4B;;;;;;;QAO5C,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;;;;;;;;;wBASf,4BAA4B;qBAC/B,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBjC,CAAC,CACH,CAAC"}

package/dist/esm/progress-bar/progress-bar.template.js

@@ -1,4 +1,28 @@
-import { progressTemplate } from '@microsoft/fast-foundation/progress.js';
+import { html, when } from '@microsoft/fast-element';
+import { staticallyCompose } from '../utils/template-helpers.js';
+export function progressTemplate(options = {}) {
+    return html `
+    <template
+      role="progressbar"
+      aria-valuenow="${x => x.value}"
+      aria-valuemin="${x => x.min}"
+      aria-valuemax="${x => x.max}"
+    >
+      ${when(x => typeof x.value === 'number', html `
+          <div class="progress" part="progress" slot="determinate">
+            <div class="determinate" part="determinate" style="width: ${x => x.percentComplete}%"></div>
+          </div>
+        `, html `
+          <div class="progress" part="progress" slot="indeterminate">
+            <slot name="indeterminate">
+              ${staticallyCompose(options.indeterminateIndicator1)}
+              ${staticallyCompose(options.indeterminateIndicator2)}
+            </slot>
+          </div>
+        `)}
+    </template>
+  `;
+}
 export const template = progressTemplate({
     indeterminateIndicator1: `<span class="indeterminate-indicator-1" part="indeterminate-indicator-1></span>`,
     indeterminateIndicator2: `<span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>`,