@fluentui/web-components 3.0.0-beta.10 → 3.0.0-beta.12

package/docs/api-report.md

@@ -10,6 +10,8 @@ import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
+import type { HostBehavior } from '@microsoft/fast-element';
+import type { HostController } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import type { SyntheticViewTemplate } from '@microsoft/fast-element';
@@ -463,53 +465,50 @@ export const borderRadiusSmall = "var(--borderRadiusSmall)";
 // @public (undocumented)
 export const borderRadiusXLarge = "var(--borderRadiusXLarge)";
 
-// Warning: (ae-forgotten-export) The symbol "FormAssociatedButton" needs to be exported by the entry point index.d.ts
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Button" because one of its declarations is marked as @internal
 //
 // @public
-export class Button extends FormAssociatedButton {
-    appearance?: ButtonAppearance | undefined;
+export class Button extends FASTElement {
+    constructor();
+    appearance?: ButtonAppearance;
     autofocus: boolean;
-    // @internal (undocumented)
-    connectedCallback(): void;
+    // @internal
+    clickHandler(e: Event): boolean | void;
     // (undocumented)
-    control: HTMLButtonElement;
+    connectedCallback(): void;
     defaultSlottedContent: HTMLElement[];
-    disabledFocusable?: boolean;
-    // (undocumented)
-    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
-    // (undocumented)
-    disconnectedCallback(): void;
-    formaction: string;
-    // (undocumented)
-    protected formactionChanged(): void;
-    formenctype: string;
-    // (undocumented)
-    protected formenctypeChanged(): void;
-    formId: string;
-    formmethod: string;
-    // (undocumented)
-    protected formmethodChanged(): void;
-    formnovalidate: boolean;
-    // (undocumented)
-    protected formnovalidateChanged(): void;
-    formtarget: '_self' | '_blank' | '_parent' | '_top';
-    // (undocumented)
-    protected formtargetChanged(): void;
+    disabled?: boolean;
+    disabledFocusable: boolean;
+    // @internal
+    disabledFocusableChanged(previous: boolean, next: boolean): void;
+    // @internal
+    protected elementInternals: ElementInternals;
+    get form(): HTMLFormElement | null;
+    formAction?: string;
+    static readonly formAssociated = true;
+    formAttribute?: string;
+    // @internal
+    formDisabledCallback(disabled: boolean): void;
+    formEnctype?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: ButtonFormTarget;
     iconOnly: boolean;
-    shape?: ButtonShape | undefined;
+    keypressHandler(e: KeyboardEvent): boolean | void;
+    get labels(): ReadonlyArray<Node>;
+    name?: string;
+    protected press(): void;
+    resetForm(): void;
+    shape?: ButtonShape;
     size?: ButtonSize;
     type: ButtonType;
-    // (undocumented)
-    protected typeChanged(previous: ButtonType | undefined, next: ButtonType): void;
-    // Warning: (ae-unresolved-inheritdoc-reference) The @inheritDoc reference could not be resolved: The package "@fluentui/web-components" does not have an export "FormAssociated"
-    //
-    // (undocumented)
-    validate(): void;
+    // @internal
+    typeChanged(previous: ButtonType, next: ButtonType): void;
+    value?: string;
 }
 
-// @internal
-export interface Button extends StartEnd, DelegatesARIAButton {
+// @internal (undocumented)
+export interface Button extends StartEnd {
 }
 
 // @public
@@ -524,9 +523,20 @@ export const ButtonAppearance: {
 // @public
 export type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
 
-// @public (undocumented)
+// @public
 export const ButtonDefinition: FASTElementDefinition<typeof Button>;
 
+// @public
+export const ButtonFormTarget: {
+    readonly blank: "_blank";
+    readonly self: "_self";
+    readonly parent: "_parent";
+    readonly top: "_top";
+};
+
+// @public
+export type ButtonFormTarget = ValuesOf<typeof ButtonFormTarget>;
+
 // @public
 type ButtonOptions = StartEndOptions<Button>;
 export { ButtonOptions }
@@ -554,7 +564,7 @@ export const ButtonSize: {
 // @public
 export type ButtonSize = ValuesOf<typeof ButtonSize>;
 
-// @public (undocumented)
+// @public
 export const ButtonTemplate: ElementViewTemplate<Button>;
 
 // @public
@@ -1648,6 +1658,9 @@ export const CounterBadgeStyles: ElementStyles;
 // @public
 export const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
 
+// @public
+export type CSSDisplayPropertyValue = 'block' | 'contents' | 'flex' | 'grid' | 'inherit' | 'initial' | 'inline' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline-table' | 'list-item' | 'none' | 'run-in' | 'table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row' | 'table-row-group';
+
 // @public (undocumented)
 export const curveAccelerateMax = "var(--curveAccelerateMax)";
 
@@ -1675,19 +1688,8 @@ export const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 // @public (undocumented)
 export const curveLinear = "var(--curveLinear)";
 
-// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "DelegatesARIAButton" because one of its declarations is marked as @internal
-//
 // @public
-export class DelegatesARIAButton {
-    ariaExpanded: 'true' | 'false' | string | null;
-    ariaPressed: 'true' | 'false' | 'mixed' | string | null;
-}
-
-// Warning: (ae-forgotten-export) The symbol "ARIAGlobalStatesAndProperties" needs to be exported by the entry point index.d.ts
-//
-// @internal
-export interface DelegatesARIAButton extends ARIAGlobalStatesAndProperties {
-}
+export const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
 
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "DelegatesARIALink" because one of its declarations is marked as @internal
 //
@@ -1696,6 +1698,8 @@ export class DelegatesARIALink {
     ariaExpanded: 'true' | 'false' | string | null;
 }
 
+// Warning: (ae-forgotten-export) The symbol "ARIAGlobalStatesAndProperties" needs to be exported by the entry point index.d.ts
+//
 // @internal
 export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
 }
@@ -1741,6 +1745,9 @@ export const DialogStyles: ElementStyles;
 // @public
 export const DialogTemplate: ElementViewTemplate<Dialog>;
 
+// @public
+export function display(displayValue: CSSDisplayPropertyValue): string;
+
 // @public
 export class Divider extends FASTElement {
     alignContent?: DividerAlignContent;
@@ -1880,6 +1887,15 @@ export const fontWeightRegular = "var(--fontWeightRegular)";
 // @public (undocumented)
 export const fontWeightSemibold = "var(--fontWeightSemibold)";
 
+// @public
+export const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+
+// @public
+export const getDirection: (rootNode: HTMLElement) => Direction;
+
+// @public
+export const hidden = ":host([hidden]){display:none}";
+
 // @public
 class Image_2 extends FASTElement {
     block?: boolean;
@@ -1940,6 +1956,9 @@ export const LabelStyles: ElementStyles;
 // @public (undocumented)
 export const LabelTemplate: ElementViewTemplate<Label>;
 
+// @public
+export const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+
 // @public (undocumented)
 export const lineHeightBase100 = "var(--lineHeightBase100)";
 
@@ -1970,6 +1989,29 @@ export const lineHeightHero800 = "var(--lineHeightHero800)";
 // @public (undocumented)
 export const lineHeightHero900 = "var(--lineHeightHero900)";
 
+// @public
+export abstract class MatchMediaBehavior implements HostBehavior {
+    constructor(query: MediaQueryList);
+    connectedCallback(controller: HostController): void;
+    protected abstract constructListener(controller: HostController): MediaQueryListListener;
+    disconnectedCallback(controller: HostController): void;
+    readonly query: MediaQueryList;
+}
+
+// @public
+export class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+    constructor(query: MediaQueryList, styles: ElementStyles);
+    protected constructListener(controller: HostController): MediaQueryListListener;
+    readonly query: MediaQueryList;
+    // @internal
+    removedCallback(controller: HostController<any>): void;
+    readonly styles: ElementStyles;
+    static with(query: MediaQueryList): (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+}
+
+// @public
+export type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
+
 // @public
 export class Menu extends FASTElement {
     cleanup?: () => void;
@@ -2163,15 +2205,14 @@ export const MenuTemplate: ElementViewTemplate<Menu>;
 // Warning: (ae-forgotten-export) The symbol "BaseProgress" needs to be exported by the entry point index.d.ts
 //
 // @public
-class ProgressBar_2 extends BaseProgress {
+export class ProgressBar extends BaseProgress {
     shape?: ProgressBarShape;
     thickness?: ProgressBarThickness;
     validationState: ProgressBarValidationState | null;
 }
-export { ProgressBar_2 as ProgressBar }
 
 // @public
-export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar_2>;
+export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar>;
 
 // @public
 export const ProgressBarShape: {
@@ -2186,7 +2227,7 @@ export type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
 export const ProgressBarStyles: ElementStyles;
 
 // @public (undocumented)
-export const ProgressBarTemplate: ElementViewTemplate<ProgressBar_2>;
+export const ProgressBarTemplate: ElementViewTemplate<ProgressBar>;
 
 // @public
 export const ProgressBarThickness: {
@@ -2209,8 +2250,8 @@ export type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationSt
 
 // @public
 export type ProgressOptions = {
-    indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar_2>;
-    indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar_2>;
+    indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar>;
+    indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar>;
 };
 
 // Warning: (ae-forgotten-export) The symbol "FormAssociatedRadio" needs to be exported by the entry point index.d.ts
@@ -2578,7 +2619,7 @@ export const strokeWidthThickest = "var(--strokeWidthThickest)";
 // @public (undocumented)
 export const strokeWidthThin = "var(--strokeWidthThin)";
 
-// @public (undocumented)
+// @public
 const styles: ElementStyles;
 export { styles as ButtonStyles }
 export { styles as MenuButtonStyles }
@@ -2896,27 +2937,16 @@ export type TextWeight = ValuesOf<typeof TextWeight>;
 
 // @public
 export class ToggleButton extends Button {
-    constructor();
-    checked: boolean;
-    checkedAttribute: boolean;
-    // (undocumented)
-    protected checkedAttributeChanged(): void;
-    // (undocumented)
-    protected checkedChanged(prev: boolean | undefined, next: boolean): void;
     // (undocumented)
     connectedCallback(): void;
-    currentChecked: boolean;
-    // (undocumented)
-    currentCheckedChanged(prev: boolean | undefined, next: boolean): void;
-    // (undocumented)
-    defaultChecked: boolean;
-    // (undocumented)
-    protected defaultCheckedChanged(): void;
-    protected dirtyChecked: boolean;
-    // (undocumented)
-    disconnectedCallback(): void;
-    // @internal (undocumented)
-    protected handleToggleButtonClick: (e: MouseEvent) => void;
+    mixed?: boolean;
+    // @internal
+    protected mixedChanged(): void;
+    // @override
+    protected press(): void;
+    pressed: boolean;
+    // @internal
+    protected pressedChanged(): void;
 }
 
 // @public
@@ -2954,7 +2984,7 @@ export const ToggleButtonSize: {
 // @public
 export type ToggleButtonSize = ValuesOf<typeof ToggleButtonSize>;
 
-// @public (undocumented)
+// @public
 export const ToggleButtonStyles: ElementStyles;
 
 // @public

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.12",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -183,7 +183,7 @@
     "compile:benchmark": "rollup -c rollup.bench.js",
     "clean": "node ./scripts/clean dist",
     "generate-api": "api-extractor run --local",
-    "build": "yarn compile && rollup -c && yarn generate-api",
+    "build": "yarn compile && yarn rollup -c && yarn generate-api",
     "lint": "eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
     "format": "prettier -w 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore",
@@ -197,6 +197,7 @@
     "test:dev": "playwright test"
   },
   "devDependencies": {
+    "@types/web": "^0.0.142",
     "@microsoft/api-extractor": "7.31.2",
     "@storybook/html": "6.5.15",
     "@tensile-perf/web-components": "~0.1.13",
@@ -205,9 +206,9 @@
   },
   "dependencies": {
     "@microsoft/fast-element": "2.0.0-beta.26",
-    "@microsoft/fast-foundation": "3.0.0-alpha.31",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "@fluentui/tokens": "1.0.0-alpha.2",
+    "tabbable": "^6.2.0",
     "tslib": "^2.1.0"
   },
   "beachball": {

package/playwright.config.ts

@@ -1,7 +1,6 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-  projects: [{ name: 'chromium' }, { name: 'firefox' }, { name: 'webkit' }],
   reporter: 'list',
   testMatch: /.*\.spec\.ts$/,
   retries: 3,
@@ -10,8 +9,8 @@ const config: PlaywrightTestConfig = {
   use: {
     baseURL: 'http://localhost:6006/iframe.html',
     viewport: {
-      height: 1280,
-      width: 720,
+      height: 720,
+      width: 1280,
     },
   },
   webServer: {

package/tensile.config.js

@@ -8,8 +8,6 @@ const config = {
     '@tensile-perf/web-components': '/node_modules/@tensile-perf/web-components/lib/index.js',
     '@microsoft/fast-element': '/node_modules/@microsoft/fast-element/dist/fast-element.min.js',
     '@microsoft/fast-element/utilities.js': '/node_modules/@microsoft/fast-element/dist/esm/utilities.js',
-    '@microsoft/fast-foundation': '/node_modules/@microsoft/fast-foundation/dist/esm/index.js',
-    '@microsoft/fast-foundation/utilities.js': '/node_modules/@microsoft/fast-foundation/dist/esm/utilities/index.js',
     '@microsoft/fast-web-utilities': '/node_modules/@microsoft/fast-web-utilities/dist/index.js',
     '@fluentui/tokens': '/tensile-assets/benchmark-dependencies/tokens.js',
     '@fluentui/web-components': '/node_modules/@fluentui/web-components/dist/esm/index.js',

package/dist/dts/button/button.form-associated.d.ts

@@ -1,14 +0,0 @@
-import { FASTElement } from '@microsoft/fast-element';
-import { FormAssociated } from '../form-associated/form-associated.js';
-declare class _Button extends FASTElement {
-}
-interface _Button extends FormAssociated {
-}
-declare const FormAssociatedButton_base: typeof _Button;
-/**
- * @beta
- */
-export declare class FormAssociatedButton extends FormAssociatedButton_base {
-    proxy: HTMLInputElement;
-}
-export {};

package/dist/esm/button/button.form-associated.js

@@ -1,14 +0,0 @@
-import { FASTElement } from '@microsoft/fast-element';
-import { FormAssociated } from '../form-associated/form-associated.js';
-class _Button extends FASTElement {
-}
-/**
- * @beta
- */
-export class FormAssociatedButton extends FormAssociated(_Button) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement('input');
-    }
-}
-//# sourceMappingURL=button.form-associated.js.map

package/dist/esm/button/button.form-associated.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.form-associated.js","sourceRoot":"","sources":["../../../src/button/button.form-associated.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAEvE,MAAM,OAAQ,SAAQ,WAAW;CAAG;AAIpC;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,cAAc,CAAC,OAAO,CAAC;IAAjE;;QACE,UAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC;CAAA"}