@fabric-msft/fabric-web 0.1.0-beta

package/README.md

@@ -0,0 +1,74 @@
+# Project: Fabric Web Components
+
+This project contains web components built from the Data Cloud Studio design system guidelines. This is published to NPM: [@fabric-msft/fabric-web](https://www.npmjs.com/package/@fabric-msft/fluent-react),
+
+```
+.
+├── libs
+|  ├── fabric-web-components
+|  |  └── src
+|  |  |  └── components
+```
+
+## Project Scripts
+
+The project's package.json scripts are your starting point.
+
+### SvgIcon Component
+
+Prior to running Storybook, generate the sprites used by this component for demonstration purposes. **Run this script from within the project. This is a one-time task.**
+
+- `yarn run generate-sprite` generate the SVG sprite.
+
+### Storybook
+
+- `yarn run web-components:storybook` run Storybook.
+
+### Build
+
+- `yarn run web-components:build` build the Fabric web components.
+
+### Install
+
+Run this script to build the Fabric web components workspace and then add the built package to your project. This is also used to install Fabric web components as a dependency of the angular-wrappers and react-wrappers projects.
+
+- `yarn run web-components:install` install the Fabric web components.
+
+### Test
+
+Run these tests from within the project.
+
+- `yarn install playwright` install Playwright.
+- `yarn run test` test wrappers with Playwright.
+- `yarn run unit-test` run Jest unit tests in SvgIcon component scripts/ folder.
+
+### Pack
+
+- `yarn run web-components:pack` pack the Fabric web components.
+
+### Publish
+
+Publishes the Fabric web components to Npm. It encompasses the entire process from pre-publishing tasks like version bumping, compiling, and building, to the final step of publishing the wrappers to the npm registry.
+
+- `yarn run web-components:publish` publish the Fabric web components.
+- `yarn run web-components:publish-dry` dry run the publish script.
+
+#### Command Execution Flow
+
+Running one of the above scripts will in turn run its respective script in libs/fabric-web-components:  
+`"build-and-publish": "yarn pre-publish ; yarn publish-lib"`
+
+1. **Pre-Publish:** Executes the fluent-wrappers:pre-publish script within the @fabric-msft/react-wrappers workspace. This step includes bumping the wrapper version, compiling TypeScript files, and building the package to ensure it is up-to-date.
+2. **Publish Wrappers:** Runs the fluent-wrappers:publish-wrappers script, which navigates to the distribution directory and publishes the Fluent Wrappers package to npm with public access.
+3. **Usage Context:** Utilize this script when the Fluent Wrappers for React are fully tested and ready for release and distribution. This is typically the final step in the development cycle of Fluent Wrappers for React.
+
+### Release Instructions
+
+**Fabric Web Components**
+
+1. Ensure all local changes are up to date with `main` via `git pull origin main`
+2. Check out a new version of the package from `main`, e.g. `release-0.0.12`
+3. Ensure the workspace's project.json version number matches the current version number on npmjs.org at [https://www.npmjs.com/package/@fabric-msft/fabric-web?activeTab=versions](https://www.npmjs.com/package/@fabric-msft/fabric-web?activeTab=versions)
+4. Run `yarn web-components:build`
+5. `cd` into `dist` folder and verify correct version in `package.json`
+6. Run `yarn web-components:publish`

package/components/component-utilities/accessibility-utilities.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Checks whether the specified element is disabled.
+ * @param {Element} el The element to check.
+ */
+export declare function isDisabledElement(el: Element): el is HTMLElement;
+/**
+ * Checks whether the specified element is hidden.
+ * @param {Element} el The element to check.
+ */
+export declare function isHiddenElement(el: Element): el is HTMLElement;
+/**
+ * Checks whether the specified element is focusable.
+ * @param {Element} el The element to check.
+ */
+export declare function isFocusableElement(el: Element): el is HTMLElement;
+//# sourceMappingURL=accessibility-utilities.d.ts.map

package/components/component-utilities/accessibility-utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility-utilities.d.ts","sourceRoot":"","sources":["../../../src/components/component-utilities/accessibility-utilities.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,OAAO,GAAG,EAAE,IAAI,WAAW,CAEhE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,EAAE,OAAO,GAAG,EAAE,IAAI,WAAW,CAE9D;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,OAAO,GAAG,EAAE,IAAI,WAAW,CAMjE"}

package/components/component-utilities/attribute-utilities.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Sets the specified attributes on the given HTML element.
+ * @param {HTMLElement} element The HTML element on which to set attributes.
+ * @param {{[key: string]: string}} attributes An object mapping attribute names to values.
+ */
+export declare function setAttributes(element: HTMLElement, attributes: {
+    [key: string]: string;
+}): void;
+//# sourceMappingURL=attribute-utilities.d.ts.map

package/components/component-utilities/attribute-utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute-utilities.d.ts","sourceRoot":"","sources":["../../../src/components/component-utilities/attribute-utilities.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACpC,IAAI,CAIN"}

package/components/component-utilities/index.d.ts

@@ -0,0 +1,4 @@
+import { isDisabledElement, isHiddenElement, isFocusableElement } from './accessibility-utilities';
+import { setAttributes } from './attribute-utilities';
+export { isDisabledElement, isHiddenElement, isFocusableElement, setAttributes };
+//# sourceMappingURL=index.d.ts.map

package/components/component-utilities/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/component-utilities/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACnG,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EACH,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EAClB,aAAa,EAChB,CAAA"}

package/components/design-system.d.ts

@@ -0,0 +1,6 @@
+export declare const DesignSystem: Readonly<{
+    prefix: "fabric";
+    shadowRootMode: "open";
+    registry: CustomElementRegistry;
+}>;
+//# sourceMappingURL=design-system.d.ts.map

package/components/design-system.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system.d.ts","sourceRoot":"","sources":["../../src/components/design-system.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;EAIvB,CAAC"}

package/components/multi-view/define.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=define.d.ts.map

package/components/multi-view/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view/define.ts"],"names":[],"mappings":""}

package/components/multi-view/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./multi-view";
+export { definition as MultiViewDefinition } from "./multi-view.definition";
+export { styles as multiViewStyles } from "./multi-view.styles";
+export { template as multiViewTemplate } from "./multi-view.template";
+//# sourceMappingURL=index.d.ts.map

package/components/multi-view/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/components/multi-view/multi-view.d.ts

@@ -0,0 +1,18 @@
+import { FASTElement } from "@microsoft/fast-element";
+/**
+ * A class representing a MultiView.
+ * @class
+ * @extends FASTElement
+ */
+export declare class MultiView extends FASTElement {
+    /**
+     * Determines the hidden state of the multi-view
+     * @public
+     * @remarks
+     * HTML Attribute: hidden
+     * @type {boolean}
+     */
+    hidden: boolean;
+    hiddenChanged(oldValue: string, newValue: string): void;
+}
+//# sourceMappingURL=multi-view.d.ts.map

package/components/multi-view/multi-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view/multi-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAQ,MAAM,yBAAyB,CAAC;AAE5D;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACxC;;;;;;OAMG;IAEI,MAAM,EAAE,OAAO,CAAQ;IAEvB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;CAK/D"}

package/components/multi-view/multi-view.definition.d.ts

@@ -0,0 +1,9 @@
+import { MultiView } from "./multi-view";
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fabric-multi-view>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof MultiView>;
+//# sourceMappingURL=multi-view.definition.d.ts.map

package/components/multi-view/multi-view.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view.definition.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view/multi-view.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC;;;;;GAKG;AAEH,eAAO,MAAM,UAAU,2EAOrB,CAAC"}

package/components/multi-view/multi-view.styles.d.ts

@@ -0,0 +1,5 @@
+/** MultiView styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;
+//# sourceMappingURL=multi-view.styles.d.ts.map

package/components/multi-view/multi-view.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view.styles.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view/multi-view.styles.ts"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,MAAM,iDAqBlB,CAAC"}

package/components/multi-view/multi-view.template.d.ts

@@ -0,0 +1,9 @@
+import { ElementViewTemplate } from "@microsoft/fast-element";
+import { MultiView } from "./multi-view";
+/**
+ * The template for the {@link @fabric-msft/fabric-web#(MultiView:class)} component.
+ * @public
+ */
+export declare function multiViewTemplate<T extends MultiView>(): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<MultiView>;
+//# sourceMappingURL=multi-view.template.d.ts.map

package/components/multi-view/multi-view.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view.template.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view/multi-view.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAQ,MAAM,yBAAyB,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,CAAC,SAAS,SAAS,KAChB,mBAAmB,CAAC,CAAC,CAAC,CAgB1B;AAED,eAAO,MAAM,QAAQ,EAAE,mBAAmB,CAAC,SAAS,CAAuB,CAAC"}

package/components/multi-view-controller/define.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=define.d.ts.map

package/components/multi-view-controller/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-controller/define.ts"],"names":[],"mappings":""}

package/components/multi-view-controller/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./multi-view-controller";
+export { definition as MultiViewControllerDefinition } from "./multi-view-controller.definition";
+export { styles as multiViewControllerStyles } from "./multi-view-controller.styles";
+export { template as multiViewControllerTemplate } from "./multi-view-controller.template";
+//# sourceMappingURL=index.d.ts.map

package/components/multi-view-controller/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-controller/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,UAAU,IAAI,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AACjG,OAAO,EAAE,MAAM,IAAI,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AACrF,OAAO,EAAE,QAAQ,IAAI,2BAA2B,EAAE,MAAM,kCAAkC,CAAC"}

package/components/multi-view-controller/multi-view-controller.d.ts

@@ -0,0 +1,8 @@
+import { FASTElement } from "@microsoft/fast-element";
+/**
+ * A MultiViewController Component to be used with MultiViewGroup.
+ * @public
+ */
+export declare class MultiViewController extends FASTElement {
+}
+//# sourceMappingURL=multi-view-controller.d.ts.map

package/components/multi-view-controller/multi-view-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view-controller.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-controller/multi-view-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;;GAGG;AACH,qBAAa,mBAAoB,SAAQ,WAAW;CAAG"}

package/components/multi-view-controller/multi-view-controller.definition.d.ts

@@ -0,0 +1,9 @@
+import { MultiViewController } from "./multi-view-controller";
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-multi-view-controller>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof MultiViewController>;
+//# sourceMappingURL=multi-view-controller.definition.d.ts.map

package/components/multi-view-controller/multi-view-controller.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view-controller.definition.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-controller/multi-view-controller.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D;;;;;GAKG;AAEH,eAAO,MAAM,UAAU,qFAIrB,CAAC"}

package/components/multi-view-controller/multi-view-controller.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;
+//# sourceMappingURL=multi-view-controller.styles.d.ts.map

package/components/multi-view-controller/multi-view-controller.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view-controller.styles.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-controller/multi-view-controller.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,iDAuBlB,CAAC"}

package/components/multi-view-controller/multi-view-controller.template.d.ts

@@ -0,0 +1,9 @@
+import { ElementViewTemplate } from "@microsoft/fast-element";
+import type { MultiViewController } from "./multi-view-controller";
+/**
+ * The template for the {@link @fabric-msft/fabric-web#(MultiViewController:class)} component.
+ * @public
+ */
+export declare function multiViewControllerTemplate<T extends MultiViewController>(): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<MultiViewController>;
+//# sourceMappingURL=multi-view-controller.template.d.ts.map

package/components/multi-view-controller/multi-view-controller.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view-controller.template.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-controller/multi-view-controller.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAQ,MAAM,yBAAyB,CAAC;AACpE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEnE;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,CAAC,SAAS,mBAAmB,KAC1B,mBAAmB,CAAC,CAAC,CAAC,CAQ1B;AAED,eAAO,MAAM,QAAQ,EAAE,mBAAmB,CAAC,mBAAmB,CAC/B,CAAC"}

package/components/multi-view-group/define.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=define.d.ts.map

package/components/multi-view-group/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-group/define.ts"],"names":[],"mappings":""}

package/components/multi-view-group/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./multi-view-group";
+export { definition as MultiViewGroupDefinition } from "./multi-view-group.definition";
+export { styles as multiViewGroupStyles } from "./multi-view-group.styles";
+export { template as multiViewGroupTemplate } from "./multi-view-group.template";
+//# sourceMappingURL=index.d.ts.map

package/components/multi-view-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAAE,MAAM,6BAA6B,CAAC"}

package/components/multi-view-group/multi-view-group.d.ts

@@ -0,0 +1,270 @@
+import { FASTElement } from "@microsoft/fast-element";
+import { MultiView } from "../multi-view";
+/**
+ * A MultiViewGroup Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#tablist | ARIA tablist }.
+ *
+ * @slot start - Content which can be provided before the multi-view-controllers element
+ * @slot end - Content which can be provided after the multi-view-controllers element
+ * @slot controllers - The slot for controllers
+ * @slot multiViews - The slot for multiViews
+ * @fires change - Fires a custom 'change' event when a multiView controller is clicked or during keyboard navigation
+ * @extends FASTElement
+ *
+ * @public
+ */
+export declare class MultiViewGroup extends FASTElement {
+    /**
+     * Method to be called when the component is inserted into the document.
+     */
+    connectedCallback(): void;
+    /**
+     * Method to be called when the component is removed from the document.
+     */
+    disconnectedCallback(): void;
+    initialize(): void;
+    /**
+     * An observable array of HTML elements that represent multiViews.
+     */
+    multiViews: HTMLElement[];
+    /**
+     * An observable array of HTML elements that represent controllers.
+     */
+    controllers: HTMLElement[];
+    /**
+     * A reference to the controllers container
+     */
+    controllersContainer: HTMLElement;
+    /**
+     * An observable array of HTML elements that represent opened multiViews.
+     */
+    openedMultiViews: HTMLElement[];
+    /**
+     * The previously opened MultiView
+     */
+    previouslyOpenedMultiView: MultiView | null;
+    /**
+     * A string representing the active ID.
+     */
+    private activeid;
+    /**
+     * A HTML element representing the active controller.
+     */
+    private activeController?;
+    /**
+     * A number representing the index of the previously active controller.
+     */
+    private prevActiveControllerIndex;
+    /**
+     * A number representing the index of the active controller.
+     */
+    private activeControllerIndex;
+    /**
+     * An array of strings that represent the IDs of the controllers.
+     */
+    private controllerIds;
+    /**
+     * An array of strings that represent the IDs of the multiViews.
+     */
+    private multiViewsIds;
+    /**
+     * Method to open a multiView.
+     * @param {MultiView} multiView - The multiView to open.
+     */
+    openMultiView: (multiView: MultiView) => void;
+    /**
+     * Manages opened MultiViews by limiting the number of opened views
+     * and setting focus on the newly opened MultiView.
+     *
+     * @param {MultiView} multiView - The MultiView to manage.
+     * @param {CustomEvent} [event] - The event that triggered the managing of the MultiView.
+     * @public
+     */
+    manageOpenedMultiViews: (multiView: MultiView, event?: CustomEvent) => void;
+    /**
+     * Limits the number of opened MultiViews. If there are more than one MultiViews opened,
+     * it will remove the attribute "data-flexposition" from the first opened MultiView and hide it.
+     * @public
+     */
+    limitNumberOfOpenMultiViews(): void;
+    /**
+     * Manages the opening of a second MultiView. It will set the "data-flexposition" attribute of the second MultiView,
+     * limit the number of opened MultiViews if necessary, and add the second MultiView to the list of opened MultiViews.
+     *
+     * @param {MultiView} multiView - The MultiView to open.
+     * @public
+     */
+    manageOpeningSecondMultiView: (multiView: MultiView) => void;
+    /**
+     * Method to open the second multiView.
+     */
+    openSecondMultiView: (multiView: MultiView) => void;
+    /**
+     * Method to close a multiView.
+     * @param {MultiView} multiView - The multiView to close.
+     */
+    closeMultiView: (multiView: MultiView) => void;
+    manageClosedMultiViews: (multiView: MultiView) => void;
+    /**
+     * Method to close all opened multiViews.
+     */
+    closeAllMultiViews: () => void;
+    /**
+     * Method to toggle a multiView.
+     * @param {MultiView} multiView - The multiView to toggle.
+     */
+    toggleMultiView: (multiView: MultiView) => void;
+    /**
+     * Method to be called when the active ID changes.
+     * @param {string} oldValue - The previous value of the active ID.
+     * @param {string} newValue - The new value of the active ID.
+     */
+    activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * Method to be called when controllers changes.
+     */
+    controllersChanged(): void;
+    /**
+     * Method to be called when multiViews changes.
+     */
+    multiViewsChanged(): void;
+    /**
+     * Method to be called when opendedMultiViews changes.
+     */
+    openedMultiViewsChanged(): void;
+    /**
+     * Removes a given multiView from the collection of opened multiViews.
+     * @private
+     * @param {MultiView} multiViewToRemove - The multiView to remove.
+     */
+    private removeMultiViewFromOpenedMultiViews;
+    /**
+     * Adds a given multiView to the collection of opened multiViews, unless it's already present.
+     * @private
+     * @param {MultiView} multiViewToAdd - The multiView to add.
+     */
+    private addMultiViewToOpenedMultiViews;
+    /**
+     * Triggers a change event with the currently opened multiViews.
+     * @private
+     */
+    private change;
+    private isDisabledElement;
+    private isHiddenElement;
+    private isFocusableElement;
+    private isValidMultiViewState;
+    /**
+     * Returns the active index based on the activeid property, falls back to 0 if all elements are hidden.
+     * @private
+     * @returns {number} - The active index.
+     */
+    private getActiveIndex;
+    /**
+     * Sets attributes for controllers and determines the active controller.
+     * @private
+     */
+    private setControllers;
+    /**
+     * Sets attributes for multiViews and determines which multiViews are hidden.
+     * @private
+     */
+    private setMultiViews;
+    /**
+     * Unsets active controller for focus handling
+     * @private
+     */
+    private unsetActiveToggleButton;
+    /**
+     * Returns an array of IDs for the controllers.
+     * @private
+     * @returns {Array<string>} - The IDs of the controllers.
+     */
+    private getControllerIds;
+    /**
+     * Returns an array of IDs for the multiViews.
+     * @private
+     * @returns {Array<string>} - The IDs of the multiViews.
+     */
+    private getMultiViewIds;
+    /**
+     * Triggers a change if the active controller index has changed.
+     * @private
+     */
+    private setComponent;
+    /**
+     * Handles click events on the controllers.
+     * @private
+     * @param {MouseEvent} event - The click event.
+     */
+    private handleControllerClick;
+    /**
+     * Handles keydown events on the controller.
+     * @param {KeyboardEvent} event The event object.
+     * @private
+     */
+    private handleControllerKeyDown;
+    /**
+     * Handles keydown events on the controller.
+     * @param {KeyboardEvent} event The event object.
+     * @private
+     */
+    private handleMultiViewKeyDown;
+    /**
+     * Handles keydown events on the controller.
+     * @param {KeyboardEvent} event The event object.
+     * @private
+     */
+    handleToggleButtonContainerKeyDown: (event: KeyboardEvent) => void;
+    /**
+     * Handles blur events on the controller.
+     * @param {FocusEvent} event The event object.
+     * @public
+     */
+    handleControllerBlur(event: FocusEvent): void;
+    /**
+     * The adjust method for FASTTabs
+     * @public
+     * @remarks
+     * This method allows the active index to be adjusted by numerical increments
+     */
+    private adjust;
+    /**
+     * Adjusts the active controller forward.
+     * @param {KeyboardEvent} e The event object.
+     * @private
+     */
+    private adjustForward;
+    /**
+     * Adjusts the active controller backward.
+     * @param {KeyboardEvent} e The event object.
+     * @private
+     */
+    private adjustBackward;
+    /**
+     * Moves the focus to the controller at the specified index.
+     * @param {HTMLElement[]} group The array of controllers.
+     * @param {number} index The index of the controller to focus.
+     * @private
+     */
+    private moveToToggleButtonByIndex;
+    /**
+     * Sets the specified attributes on the given HTML element.
+     * @param {HTMLElement} element The HTML element on which to set attributes.
+     * @param {{[key: string]: string}} attributes An object mapping attribute names to values.
+     * @private
+     */
+    private setAttributes;
+    /**
+     * Adds event listeners to the controllers and multiViews.
+     *
+     * @returns {void}
+     */
+    private addEventListeners;
+    /**
+     * Removes event listeners from the controllers.
+     *
+     * @returns {void}
+     */
+    private removeEventListeners;
+}
+//# sourceMappingURL=multi-view-group.d.ts.map

package/components/multi-view-group/multi-view-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view-group.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-group/multi-view-group.ts"],"names":[],"mappings":"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"}

package/components/multi-view-group/multi-view-group.definition.d.ts

@@ -0,0 +1,9 @@
+import { MultiViewGroup } from "./multi-view-group";
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-multi-view-group>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof MultiViewGroup>;
+//# sourceMappingURL=multi-view-group.definition.d.ts.map

package/components/multi-view-group/multi-view-group.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view-group.definition.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-group/multi-view-group.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIpD;;;;;GAKG;AAEH,eAAO,MAAM,UAAU,gFAOrB,CAAC"}

package/components/multi-view-group/multi-view-group.options.d.ts

@@ -0,0 +1,15 @@
+import { ValuesOf } from "@microsoft/fast-foundation";
+/**
+ * MultiViewGroupPosition constants
+ * @public
+ */
+export declare const MultiViewGroupPosition: {
+    readonly right: "right";
+    readonly left: "left";
+};
+/**
+ * A multiViewGroup can appear on the left or right side of the viewport
+ * @public
+ */
+export declare type MultiViewGroupPosition = ValuesOf<typeof MultiViewGroupPosition>;
+//# sourceMappingURL=multi-view-group.options.d.ts.map

package/components/multi-view-group/multi-view-group.options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view-group.options.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-group/multi-view-group.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;CAGzB,CAAC;AAEX;;;GAGG;AACH,oBAAY,sBAAsB,GAAG,QAAQ,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/components/multi-view-group/multi-view-group.styles.d.ts

@@ -0,0 +1,5 @@
+/** PaneSwitcher styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;
+//# sourceMappingURL=multi-view-group.styles.d.ts.map

package/components/multi-view-group/multi-view-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-group/multi-view-group.styles.ts"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,MAAM,iDAiClB,CAAC"}

package/components/multi-view-group/multi-view-group.template.d.ts

@@ -0,0 +1,9 @@
+import { ElementViewTemplate } from "@microsoft/fast-element";
+import type { MultiViewGroup } from "./multi-view-group";
+/**
+ * The template for the {@link @fabric-msft/fabric-web#(MultiViewGroup:class)} component.
+ * @public
+ */
+export declare function multiViewGroupTemplate<T extends MultiViewGroup>(): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<MultiViewGroup>;
+//# sourceMappingURL=multi-view-group.template.d.ts.map

package/components/multi-view-group/multi-view-group.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-view-group.template.d.ts","sourceRoot":"","sources":["../../../src/components/multi-view-group/multi-view-group.template.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAIpB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,CAAC,SAAS,cAAc,KACrB,mBAAmB,CAAC,CAAC,CAAC,CAsB1B;AAED,eAAO,MAAM,QAAQ,EAAE,mBAAmB,CAAC,cAAc,CAC/B,CAAC"}

package/components/popover/define.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=define.d.ts.map