@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.130

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
-  "version": "3.0.0-beta.13",
+  "version": "3.0.0-beta.130",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "engines": {
+    "node": "^22.0.0 || ^24.0.0"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -18,199 +21,81 @@
   "main": "dist/esm/index.js",
   "types": "dist/web-components.d.ts",
   "unpkg": "dist/web-components.min.js",
+  "files": [
+    "*.md",
+    "dist/esm/",
+    "dist/*.js",
+    "dist/*.d.ts",
+    "custom-elements.json"
+  ],
   "exports": {
-    ".": {
-      "types": "./dist/dts/index.d.ts",
-      "default": "./dist/esm/index.js"
-    },
-    "./accordion.js": {
-      "types": "./dist/dts/accordion/define.d.ts",
-      "default": "./dist/esm/accordion/define.js"
-    },
-    "./accordion-item.js": {
-      "types": "./dist/dts/accordion-item/define.d.ts",
-      "default": "./dist/esm/accordion-item/define.js"
-    },
-    "./anchor-button.js": {
-      "types": "./dist/dts/anchor-button/define.d.ts",
-      "default": "./dist/esm/anchor-button/define.js"
-    },
-    "./avatar.js": {
-      "types": "./dist/dts/avatar/define.d.ts",
-      "default": "./dist/esm/avatar/define.js"
-    },
-    "./badge.js": {
-      "types": "./dist/dts/badge/define.d.ts",
-      "default": "./dist/esm/badge/define.js"
-    },
-    "./button.js": {
-      "types": "./dist/dts/button/define.d.ts",
-      "default": "./dist/esm/button/define.js"
-    },
-    "./checkbox.js": {
-      "types": "./dist/dts/checkbox/define.d.ts",
-      "default": "./dist/esm/checkbox/define.js"
-    },
-    "./compound-button.js": {
-      "types": "./dist/dts/compound-button/define.d.ts",
-      "default": "./dist/esm/compound-button/define.js"
-    },
-    "./counter-badge.js": {
-      "types": "./dist/dts/counter-badge/define.d.ts",
-      "default": "./dist/esm/counter-badge/define.js"
-    },
-    "./dialog.js": {
-      "types": "./dist/dts/dialog/define.d.ts",
-      "default": "./dist/esm/dialog/define.js"
-    },
-    "./divider.js": {
-      "types": "./dist/dts/divider/define.d.ts",
-      "default": "./dist/esm/divider/define.js"
-    },
-    "./image.js": {
-      "types": "./dist/dts/image/define.d.ts",
-      "default": "./dist/esm/image/define.js"
-    },
-    "./label.js": {
-      "types": "./dist/dts/label/define.d.ts",
-      "default": "./dist/esm/label/define.js"
-    },
-    "./menu.js": {
-      "types": "./dist/dts/menu/define.d.ts",
-      "default": "./dist/esm/menu/define.js"
-    },
-    "./menu-list.js": {
-      "types": "./dist/dts/menu-list/define.d.ts",
-      "default": "./dist/esm/menu-list/define.js"
-    },
-    "./menu-button.js": {
-      "types": "./dist/dts/menu-button/define.d.ts",
-      "default": "./dist/esm/menu-button/define.js"
-    },
-    "./menu-item.js": {
-      "types": "./dist/dts/menu-item/define.d.ts",
-      "default": "./dist/esm/menu-item/define.js"
-    },
-    "./progress-bar.js": {
-      "types": "./dist/dts/progress-bar/define.d.ts",
-      "default": "./dist/esm/progress-bar/define.js"
-    },
-    "./radio.js": {
-      "types": "./dist/dts/radio/define.d.ts",
-      "default": "./dist/esm/radio/define.js"
-    },
-    "./radio-group.js": {
-      "types": "./dist/dts/radio-group/define.d.ts",
-      "default": "./dist/esm/radio-group/define.js"
-    },
-    "./slider.js": {
-      "types": "./dist/dts/slider/define.d.ts",
-      "default": "./dist/esm/slider/define.js"
-    },
-    "./spinner.js": {
-      "types": "./dist/dts/spinner/define.d.ts",
-      "default": "./dist/esm/spinner/define.js"
-    },
-    "./switch.js": {
-      "types": "./dist/dts/switch/define.d.ts",
-      "default": "./dist/esm/switch/define.js"
-    },
-    "./tab.js": {
-      "types": "./dist/dts/tab/define.d.ts",
-      "default": "./dist/esm/tab/define.js"
-    },
-    "./tabs.js": {
-      "types": "./dist/dts/tabs/define.d.ts",
-      "default": "./dist/esm/tabs/define.js"
-    },
-    "./tab-panel.js": {
-      "types": "./dist/dts/tab-panel/define.d.ts",
-      "default": "./dist/esm/tab-panel/define.js"
-    },
-    "./text.js": {
-      "types": "./dist/dts/text/define.d.ts",
-      "default": "./dist/esm/text/define.js"
-    },
-    "./text-input.js": {
-      "types": "./dist/dts/text-input/define.d.ts",
-      "default": "./dist/esm/text-input/define.js"
-    },
-    "./toggle-button.js": {
-      "types": "./dist/dts/toggle-button/define.d.ts",
-      "default": "./dist/esm/toggle-button/define.js"
-    },
-    "./theme.js": {
-      "types": "./dist/dts/theme/index.d.ts",
-      "default": "./dist/esm/theme/index.js"
-    }
+    ".": "./dist/esm/index.js",
+    "./utils/behaviors/*.js": "./dist/esm/utils/behaviors/*.js",
+    "./utils/*.js": "./dist/esm/utils/*.js",
+    "./utilities.js": "./dist/esm/utils/index.js",
+    "./theme/*.js": "./dist/esm/theme/*.js",
+    "./*/base.js": "./dist/esm/*/*.base.js",
+    "./*/define.js": "./dist/esm/*/define.js",
+    "./*/definition.js": "./dist/esm/*/*.definition.js",
+    "./*/options.js": "./dist/esm/*/*.options.js",
+    "./*/styles.js": "./dist/esm/*/*.styles.js",
+    "./*/template.js": "./dist/esm/*/*.template.js",
+    "./*/index.js": "./dist/esm/*/index.js",
+    "./*.js": "./dist/esm/*/define.js",
+    "./custom-elements.json": "./custom-elements.json",
+    "./package.json": "./package.json"
   },
   "sideEffects": [
-    "./dist/esm/accordion/define.js",
-    "./dist/esm/accordion-item/define.js",
-    "./dist/esm/anchor-button/define.js",
-    "./dist/esm/avatar/define.js",
-    "./dist/esm/badge/define.js",
-    "./dist/esm/button/define.js",
-    "./dist/esm/checkbox/define.js",
-    "./dist/esm/compound-button/define.js",
-    "./dist/esm/counter-badge/define.js",
-    "./dist/esm/dialog/define.js",
-    "./dist/esm/divider/define.js",
-    "./dist/esm/image/define.js",
-    "./dist/esm/label/define.js",
-    "./dist/esm/menu/define.js",
-    "./dist/esm/menu-list/define.js",
-    "./dist/esm/menu-button/define.js",
-    "./dist/esm/menu-item/define.js",
-    "./dist/esm/progress-bar/define.js",
-    "./dist/esm/radio/define.js",
-    "./dist/esm/radio-group/define.js",
-    "./dist/esm/slider/define.js",
-    "./dist/esm/spinner/define.js",
-    "./dist/esm/switch/define.js",
-    "./dist/esm/tab/define.js",
-    "./dist/esm/tabs/define.js",
-    "./dist/esm/tab-panel/define.js",
-    "./dist/esm/text/define.js",
-    "./dist/esm/text-input/define.js",
-    "./dist/esm/toggle-button/define.js"
+    "define.*",
+    "index-rollup.*",
+    "./dist/esm/**/define.js",
+    "./dist/web-components.js",
+    "./dist/web-components.min.js"
   ],
   "scripts": {
-    "tsc": "tsc",
-    "api-extractor": "api-extractor",
+    "analyze": "cem analyze",
+    "verify-packaging": "node ./scripts/verify-packaging",
+    "type-check": "node ./scripts/type-check",
     "benchmark": "yarn clean && yarn compile:benchmark && yarn compile && node ./scripts/run-benchmarks",
     "compile": "node ./scripts/compile",
     "compile:benchmark": "rollup -c rollup.bench.js",
     "clean": "node ./scripts/clean dist",
     "generate-api": "api-extractor run --local",
-    "build": "yarn compile && yarn rollup -c && yarn generate-api",
-    "lint": "eslint . --ext .ts",
+    "build": "yarn compile && yarn rollup -c && yarn generate-api && yarn analyze",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
-    "format": "prettier -w 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore",
+    "format": "prettier -w src/**/*.{ts,html} src/*.{ts,html} --ignore-path ../../.prettierignore",
     "format:check": "yarn format -c",
     "code-style": "yarn format:check && yarn lint",
-    "start": "yarn start-storybook -p 6006 --docs --no-manager-cache",
-    "start-storybook": "node node_modules/@storybook/html/bin/index",
-    "build-storybook": "node node_modules/@storybook/html/bin/build -o ./dist/storybook --docs",
-    "pretest": "yarn build-storybook --quiet",
-    "test": "npx playwright test",
-    "test:dev": "playwright test"
+    "start": "yarn start-storybook -p 6006 --docs",
+    "start-storybook": "storybook dev",
+    "build-storybook": "storybook build -o ./dist/storybook --docs",
+    "build-storybook:docsite": "cross-env DEPLOY_PATH=/web-components/ storybook build -o ./dist/storybook --docs",
+    "e2e": "node ./scripts/e2e.js",
+    "e2e:local": "node ./scripts/e2e.js --ui"
   },
   "devDependencies": {
-    "@types/web": "^0.0.142",
-    "@microsoft/api-extractor": "7.31.2",
-    "@storybook/html": "6.5.15",
-    "@tensile-perf/web-components": "~0.1.13",
-    "rimraf": "^3.0.2",
-    "typescript": "4.7.4"
+    "@custom-elements-manifest/analyzer": "0.10.10",
+    "@fluentui/scripts-api-extractor": "*",
+    "@microsoft/fast-element": "2.0.0",
+    "@tensile-perf/web-components": "~0.2.2",
+    "@storybook/html": "7.6.20",
+    "@storybook/html-webpack5": "7.6.20",
+    "@wc-toolkit/cem-validator": "1.0.3",
+    "@wc-toolkit/cem-inheritance": "1.2.2",
+    "@wc-toolkit/module-path-resolver": "1.0.0",
+    "@wc-toolkit/type-parser": "1.0.3",
+    "chromedriver": "^125.0.0"
   },
   "dependencies": {
-    "@microsoft/fast-element": "2.0.0-beta.26",
     "@microsoft/fast-web-utilities": "^6.0.0",
-    "@fluentui/tokens": "1.0.0-alpha.2",
+    "@fluentui/tokens": "1.0.0-alpha.22",
     "tabbable": "^6.2.0",
     "tslib": "^2.1.0"
   },
+  "peerDependencies": {
+    "@microsoft/fast-element": "^2.0.0-beta.26 || ^2.0.0"
+  },
   "beachball": {
     "disallowedChangeTypes": [
       "major",
@@ -218,5 +103,6 @@
       "patch"
     ],
     "tag": "beta"
-  }
+  },
+  "customElements": "./custom-elements.json"
 }

package/dist/dts/accordion/accordion.d.ts

@@ -1,51 +0,0 @@
-import { FASTElement } from '@microsoft/fast-element';
-import { AccordionExpandMode } from './accordion.options.js';
-/**
- * An Accordion Custom HTML Element
- * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
- *
- * @fires change - Fires a custom 'change' event when the active item changes
- * @csspart item - The slot for the accordion items
- * @public
- */
-export declare class Accordion extends FASTElement {
-    /**
-     * Controls the expand mode of the Accordion, either allowing
-     * single or multiple item expansion.
-     * @public
-     *
-     * @remarks
-     * HTML attribute: expand-mode
-     */
-    expandmode: AccordionExpandMode;
-    expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void;
-    /**
-     * @internal
-     */
-    slottedAccordionItems: HTMLElement[];
-    protected accordionItems: Element[];
-    /**
-     * @internal
-     */
-    slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
-    /**
-     * @internal
-     */
-    handleChange(source: any, propertyName: string): void;
-    private activeid;
-    private activeItemIndex;
-    private accordionIds;
-    private change;
-    private findExpandedItem;
-    private setItems;
-    private setSingleExpandMode;
-    private removeItemListeners;
-    private activeItemChange;
-    private handleExpandedChange;
-    private getItemIds;
-    private isSingleExpandMode;
-    private handleItemKeyDown;
-    private handleItemFocus;
-    private adjust;
-    private focusItem;
-}

package/dist/dts/accordion/accordion.options.d.ts

@@ -1,14 +0,0 @@
-import type { ValuesOf } from '../utils/index.js';
-/**
- * Expand mode for {@link FASTAccordion}
- * @public
- */
-export declare const AccordionExpandMode: {
-    readonly single: "single";
-    readonly multi: "multi";
-};
-/**
- * Type for the {@link FASTAccordion} Expand Mode
- * @public
- */
-export declare type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;

package/dist/dts/accordion/accordion.template.d.ts

@@ -1,7 +0,0 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import type { Accordion } from './accordion.js';
-/**
- * @public
- */
-export declare function accordionTemplate<T extends Accordion>(): ElementViewTemplate<T>;
-export declare const template: ElementViewTemplate<Accordion>;

package/dist/dts/accordion/index.d.ts

@@ -1,4 +0,0 @@
-export * from './accordion.js';
-export { template as accordionTemplate } from './accordion.template.js';
-export { styles as accordionStyles } from './accordion.styles.js';
-export { definition as accordionDefinition } from './accordion.definition.js';

package/dist/dts/accordion-item/accordion-item.d.ts

@@ -1,108 +0,0 @@
-import { FASTElement } from '@microsoft/fast-element';
-import type { StaticallyComposableHTML } from '../utils/index.js';
-import { StartEnd } from '../patterns/index.js';
-import type { StartEndOptions } from '../patterns/index.js';
-import { AccordionItemExpandIconPosition, AccordionItemSize } from './accordion-item.options.js';
-/**
- * Accordion Item configuration options
- * @public
- */
-export declare type AccordionItemOptions = StartEndOptions<AccordionItem> & {
-    expandedIcon?: StaticallyComposableHTML<AccordionItem>;
-    collapsedIcon?: StaticallyComposableHTML<AccordionItem>;
-};
-/**
- *
- * @slot start - Content which can be provided between the heading and the icon
- * @slot end - Content which can be provided between the start slot and icon
- * @slot heading - Content which serves as the accordion item heading and text of the expand button
- * @slot - The default slot for accordion item content
- * @slot expanded-icon - The expanded icon
- * @slot collapsed-icon - The collapsed icon
- * @fires change - Fires a custom 'change' event when the button is invoked
- * @csspart heading - Wraps the button
- * @csspart button - The button which serves to invoke the item
- * @csspart heading-content - Wraps the slot for the heading content within the button
- * @csspart icon - The icon container
- * @csspart region - The wrapper for the accordion item content
- *
- * @public
- */
-export declare class AccordionItem extends FASTElement {
-    /**
-     * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
-     * heading element.
-     *
-     * @defaultValue 2
-     * @public
-     * @remarks
-     * HTML attribute: heading-level
-     */
-    headinglevel: 1 | 2 | 3 | 4 | 5 | 6;
-    /**
-     * Expands or collapses the item.
-     *
-     * @public
-     * @remarks
-     * HTML attribute: expanded
-     */
-    expanded: boolean;
-    /**
-     * Disables an accordion item
-     *
-     * @public
-     * @remarks
-     * HTML attribute: disabled
-     */
-    disabled: boolean;
-    /**
-     * The item ID
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: id
-     */
-    id: string;
-    /**
-     * Defines accordion header font size.
-     *
-     * @public
-     * @default 'medium'
-     * @remarks
-     * HTML Attribute: size
-     */
-    size?: AccordionItemSize;
-    /**
-     * Sets the width of the focus state.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: block
-     */
-    block: boolean;
-    /**
-     * Sets expand and collapsed icon position.
-     *
-     * @public
-     * @default 'start'
-     * @remarks
-     * HTML Attribute: expandIconPosition
-     */
-    expandIconPosition?: AccordionItemExpandIconPosition;
-    /**
-     * @internal
-     */
-    expandbutton: HTMLElement;
-    /**
-     * @internal
-     */
-    clickHandler: (e: MouseEvent) => void;
-}
-/**
- * Mark internal because exporting class and interface of the same name
- * confuses API documenter.
- * TODO: https://github.com/microsoft/fast/issues/3317
- * @internal
- */
-export interface AccordionItem extends StartEnd {
-}

package/dist/dts/accordion-item/accordion-item.options.d.ts

@@ -1,27 +0,0 @@
-import type { ValuesOf } from '../utils/index.js';
-/**
- * An Accordion Item header font size can be small, medium, large, and extra-large
- */
-export declare const AccordionItemSize: {
-    readonly small: "small";
-    readonly medium: "medium";
-    readonly large: "large";
-    readonly extraLarge: "extra-large";
-};
-/**
- * Applies font size to accordion header
- * @public
- */
-export declare type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
-/**
- * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
- */
-export declare const AccordionItemExpandIconPosition: {
-    readonly start: "start";
-    readonly end: "end";
-};
-/**
- * Applies expand/collapse icon position
- * @public
- */
-export declare type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;

package/dist/dts/accordion-item/accordion-item.template.d.ts

@@ -1,8 +0,0 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { AccordionItem, AccordionItemOptions } from './accordion-item.js';
-export declare function accordionItemTemplate<T extends AccordionItem>(options?: AccordionItemOptions): ElementViewTemplate<T>;
-/**
- * The template for the fluent-accordion component.
- * @public
- */
-export declare const template: ElementViewTemplate<AccordionItem>;

package/dist/dts/accordion-item/index.d.ts

@@ -1,5 +0,0 @@
-export * from './accordion-item.js';
-export * from './accordion-item.options.js';
-export { styles as accordionItemStyles } from './accordion-item.styles.js';
-export { definition as accordionItemDefinition } from './accordion-item.definition.js';
-export { template as accordionItemTemplate } from './accordion-item.template.js';