From 9edee68623426d12ba264f4732f8d2fefbaf26b7 Mon Sep 17 00:00:00 2001 From: Jane Chu <7559015+janechu@users.noreply.github.com> Date: Tue, 16 Jun 2026 12:37:24 -0700 Subject: [PATCH 1/5] feat(web-components): migrate to FAST Element v3 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- apps/vr-tests-web-components/package.json | 48 +- ...-50b97aae-ff24-4aca-9a91-390941c95e54.json | 7 + ...-1e295f01-c5f7-4b8f-b199-3a2502008645.json | 7 + package.json | 766 +- .../charts/chart-web-components/package.json | 180 +- .../chart-web-components/rollup.config.js | 97 +- .../src/donut-chart/donut-chart.definition.ts | 36 +- .../horizontal-bar-chart.definition.ts | 40 +- .../web-components/docs/web-components.api.md | 8 +- packages/web-components/package.json | 262 +- packages/web-components/rollup.config.js | 97 +- .../accordion-item.definition-async.ts | 27 +- .../accordion-item.definition.ts | 32 +- .../src/accordion-item/define-async.ts | 9 +- .../accordion/accordion.definition-async.ts | 31 +- .../src/accordion/accordion.definition.ts | 30 +- .../src/accordion/define-async.ts | 9 +- .../anchor-button.definition-async.ts | 27 +- .../anchor-button/anchor-button.definition.ts | 30 +- .../src/anchor-button/define-async.ts | 9 +- .../src/avatar/avatar.definition-async.ts | 27 +- .../src/avatar/avatar.definition.ts | 34 +- .../web-components/src/avatar/define-async.ts | 9 +- .../src/badge/badge.definition-async.ts | 27 +- .../src/badge/badge.definition.ts | 32 +- .../web-components/src/badge/define-async.ts | 9 +- .../src/button/button.definition-async.ts | 27 +- .../src/button/button.definition.ts | 34 +- .../src/button/button.template.ts | 63 +- .../web-components/src/button/define-async.ts | 9 +- .../src/checkbox/checkbox.definition-async.ts | 27 +- .../src/checkbox/checkbox.definition.ts | 34 +- .../src/checkbox/define-async.ts | 9 +- .../compound-button.definition-async.ts | 27 +- .../compound-button.definition.ts | 30 +- .../src/compound-button/define-async.ts | 9 +- .../counter-badge.definition-async.ts | 27 +- .../counter-badge/counter-badge.definition.ts | 30 +- .../src/counter-badge/define-async.ts | 9 +- .../src/dialog-body/define-async.ts | 9 +- .../dialog-body.definition-async.ts | 27 +- .../src/dialog-body/dialog-body.definition.ts | 34 +- .../web-components/src/dialog/define-async.ts | 9 +- .../src/dialog/dialog.definition-async.ts | 27 +- .../src/dialog/dialog.definition.ts | 34 +- .../src/divider/define-async.ts | 9 +- .../src/divider/divider.definition-async.ts | 27 +- .../src/divider/divider.definition.ts | 34 +- .../src/drawer-body/define-async.ts | 9 +- .../drawer-body.definition-async.ts | 27 +- .../src/drawer-body/drawer-body.definition.ts | 34 +- .../web-components/src/drawer/define-async.ts | 9 +- .../src/drawer/drawer.definition-async.ts | 27 +- .../src/drawer/drawer.definition.ts | 34 +- .../src/drawer/drawer.styles.css | 31 +- .../src/dropdown/define-async.ts | 9 +- .../src/dropdown/dropdown.definition-async.ts | 27 +- .../src/dropdown/dropdown.definition.ts | 34 +- .../src/dropdown/dropdown.template.ts | 201 +- .../web-components/src/field/define-async.ts | 9 +- .../src/field/field.definition-async.ts | 37 +- .../src/field/field.definition.ts | 40 +- .../web-components/src/image/define-async.ts | 9 +- .../src/image/image.definition-async.ts | 27 +- .../src/image/image.definition.ts | 34 +- .../web-components/src/label/define-async.ts | 9 +- .../src/label/label.definition-async.ts | 27 +- .../src/label/label.definition.ts | 36 +- .../web-components/src/link/define-async.ts | 9 +- .../src/link/link.definition-async.ts | 27 +- .../src/link/link.definition.ts | 30 +- .../src/listbox/define-async.ts | 9 +- .../src/listbox/listbox.definition-async.ts | 27 +- .../src/listbox/listbox.definition.ts | 34 +- .../src/menu-button/define-async.ts | 9 +- .../menu-button.definition-async.ts | 27 +- .../src/menu-button/menu-button.definition.ts | 30 +- .../src/menu-item/define-async.ts | 9 +- .../menu-item/menu-item.definition-async.ts | 27 +- .../src/menu-item/menu-item.definition.ts | 30 +- .../src/menu-list/define-async.ts | 9 +- .../menu-list/menu-list.definition-async.ts | 27 +- .../src/menu-list/menu-list.definition.ts | 30 +- .../web-components/src/menu/define-async.ts | 9 +- .../src/menu/menu.definition-async.ts | 27 +- .../src/menu/menu.definition.ts | 34 +- .../src/message-bar/define-async.ts | 9 +- .../message-bar.definition-async.ts | 27 +- .../src/message-bar/message-bar.definition.ts | 42 +- .../web-components/src/option/define-async.ts | 9 +- .../src/option/option.definition-async.ts | 27 +- .../src/option/option.definition.ts | 34 +- .../web-components/src/patterns/start-end.ts | 154 +- .../src/progress-bar/define-async.ts | 9 +- .../progress-bar.definition-async.ts | 27 +- .../progress-bar/progress-bar.definition.ts | 36 +- .../src/radio-group/define-async.ts | 9 +- .../radio-group.definition-async.ts | 27 +- .../src/radio-group/radio-group.definition.ts | 36 +- .../web-components/src/radio/define-async.ts | 9 +- .../src/radio/radio.definition-async.ts | 27 +- .../src/radio/radio.definition.ts | 36 +- .../src/rating-display/define-async.ts | 9 +- .../rating-display.definition-async.ts | 27 +- .../rating-display.definition.ts | 34 +- .../web-components/src/slider/define-async.ts | 9 +- .../src/slider/slider.definition-async.ts | 27 +- .../src/slider/slider.definition.ts | 36 +- .../src/spinner/define-async.ts | 9 +- .../src/spinner/spinner.definition-async.ts | 27 +- .../src/spinner/spinner.definition.ts | 30 +- .../web-components/src/switch/define-async.ts | 9 +- .../src/switch/switch.definition-async.ts | 27 +- .../src/switch/switch.definition.ts | 34 +- .../web-components/src/tab/define-async.ts | 9 +- .../src/tab/tab.definition-async.ts | 27 +- .../web-components/src/tab/tab.definition.ts | 20 +- .../src/tablist/define-async.ts | 9 +- .../src/tablist/tablist.definition-async.ts | 27 +- .../src/tablist/tablist.definition.ts | 30 +- .../src/tablist/tablist.stories.ts | 342 +- .../src/text-input/define-async.ts | 9 +- .../text-input/text-input.definition-async.ts | 37 +- .../src/text-input/text-input.definition.ts | 40 +- .../src/text-input/text-input.template.html | 3 +- .../web-components/src/text/define-async.ts | 9 +- .../src/text/text.definition-async.ts | 27 +- .../src/text/text.definition.ts | 36 +- .../src/textarea/define-async.ts | 9 +- .../src/textarea/textarea.definition-async.ts | 37 +- .../src/textarea/textarea.definition.ts | 40 +- .../src/toggle-button/define-async.ts | 9 +- .../toggle-button.definition-async.ts | 27 +- .../toggle-button/toggle-button.definition.ts | 32 +- .../src/tooltip/define-async.ts | 9 +- .../src/tooltip/tooltip.definition-async.ts | 27 +- .../src/tooltip/tooltip.definition.ts | 34 +- .../src/tree-item/define-async.ts | 9 +- .../tree-item/tree-item.definition-async.ts | 27 +- .../src/tree-item/tree-item.definition.ts | 32 +- .../web-components/src/tree/define-async.ts | 9 +- .../src/tree/tree.definition-async.ts | 27 +- .../src/tree/tree.definition.ts | 32 +- .../src/utils/template-helpers.ts | 88 +- .../web-components/test/src/entry-client.ts | 50 +- .../web-components/test/src/entry-server.ts | 67 +- packages/web-components/test/vite.config.ts | 23 +- yarn.lock | 42688 ++++++++-------- 148 files changed, 24124 insertions(+), 24082 deletions(-) create mode 100644 change/@fluentui-chart-web-components-50b97aae-ff24-4aca-9a91-390941c95e54.json create mode 100644 change/@fluentui-web-components-1e295f01-c5f7-4b8f-b199-3a2502008645.json diff --git a/apps/vr-tests-web-components/package.json b/apps/vr-tests-web-components/package.json index 026b60422ff0b..f71b6c4b1f4e5 100644 --- a/apps/vr-tests-web-components/package.json +++ b/apps/vr-tests-web-components/package.json @@ -1,24 +1,24 @@ -{ - "name": "@fluentui/vr-tests-web-components", - "version": "0.0.1", - "private": true, - "description": "Visual regression tests for @fluentui/web-components", - "type": "module", - "scripts": { - "build-storybook": "storybook build -o dist/storybook", - "format": "prettier . -w --ignore-path ../../.prettierignore", - "lint": "eslint src --ext .ts,.tsx", - "start": "storybook dev", - "type-check": "tsc -p . --baseUrl . --noEmit", - "test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --stepsApi parameters --bailOnStoriesError" - }, - "dependencies": { - "react": "19.2.0", - "react-dom": "19.2.0", - "html-react-parser": "4.0.0", - "@fluentui/tokens": ">=1.0.0-alpha", - "@fluentui/web-components": ">=3.0.0-alpha", - "@microsoft/fast-element": "^2.0.0", - "tslib": "^2.1.0" - } -} +{ + "name": "@fluentui/vr-tests-web-components", + "version": "0.0.1", + "private": true, + "description": "Visual regression tests for @fluentui/web-components", + "type": "module", + "scripts": { + "build-storybook": "storybook build -o dist/storybook", + "format": "prettier . -w --ignore-path ../../.prettierignore", + "lint": "eslint src --ext .ts,.tsx", + "start": "storybook dev", + "type-check": "tsc -p . --baseUrl . --noEmit", + "test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --stepsApi parameters --bailOnStoriesError" + }, + "dependencies": { + "react": "19.2.0", + "react-dom": "19.2.0", + "html-react-parser": "4.0.0", + "@fluentui/tokens": ">=1.0.0-alpha", + "@fluentui/web-components": ">=3.0.0-alpha", + "@microsoft/fast-element": "^3.0.0-rc.1", + "tslib": "^2.1.0" + } +} diff --git a/change/@fluentui-chart-web-components-50b97aae-ff24-4aca-9a91-390941c95e54.json b/change/@fluentui-chart-web-components-50b97aae-ff24-4aca-9a91-390941c95e54.json new file mode 100644 index 0000000000000..fbaed503159a9 --- /dev/null +++ b/change/@fluentui-chart-web-components-50b97aae-ff24-4aca-9a91-390941c95e54.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update FAST Element peer dependency to v3.", + "packageName": "@fluentui/chart-web-components", + "email": "chujane@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-web-components-1e295f01-c5f7-4b8f-b199-3a2502008645.json b/change/@fluentui-web-components-1e295f01-c5f7-4b8f-b199-3a2502008645.json new file mode 100644 index 0000000000000..28f05977b3d51 --- /dev/null +++ b/change/@fluentui-web-components-1e295f01-c5f7-4b8f-b199-3a2502008645.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Update FAST Element peer dependency to v3.", + "packageName": "@fluentui/web-components", + "email": "chujane@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/package.json b/package.json index 01af4fd25eec7..ac5289e40c304 100644 --- a/package.json +++ b/package.json @@ -1,383 +1,383 @@ -{ - "name": "@fluentui/fluentui-repo", - "version": "1.0.0", - "description": "Reusable React components for building experiences for Microsoft 365.", - "private": true, - "repository": { - "type": "git", - "url": "https://github.com/microsoft/fluentui" - }, - "engines": { - "node": "^22.0.0 || ^24.0.0" - }, - "scripts": { - "dedupe": "npx yarn-deduplicate@latest --strategy fewer", - "change": "beachball change --no-commit", - "check:change": "beachball check", - "check:modified-files": "node -r ./scripts/ts-node/src/register ./scripts/executors/src/check-for-modified-files", - "check:affected": "node ./scripts/executors/src/checkIfPackagesAffected.js", - "check:installed-dependencies-versions": "satisfied --no-peers --skip-invalid", - "create-component": "yarn nx g @fluentui/workspace-plugin:react-component", - "create-package": "yarn nx g @fluentui/workspace-plugin:react-library", - "format": "node scripts/executors/src/format.js", - "generate-version-files": "node -r ./scripts/ts-node/src/register ./scripts/generators/src/generate-version-files", - "postinstall": "yarn patch-package && husky && node ./scripts/package-manager/src/postinstall.js", - "preinstall": "node ./scripts/package-manager/src/preinstall.js", - "publish:beachball": "beachball publish -b origin/master --access public -y", - "start": "node -r ./scripts/ts-node/src/register ./scripts/executors/src/start", - "generate": "node -r ./scripts/ts-node/src/register ./scripts/executors/src/generate-ui", - "clean": "nx run-many -t clean --verbose", - "reset-workspace": "node -r ./scripts/ts-node/src/register ./scripts/executors/src/reset-workspace.ts" - }, - "devDependencies": { - "@actions/core": "1.9.1", - "@actions/github": "5.0.3", - "@babel/core": "7.29.0", - "@babel/generator": "7.29.1", - "@babel/parser": "7.29.3", - "@babel/plugin-proposal-class-properties": "7.18.6", - "@babel/plugin-proposal-decorators": "7.29.0", - "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", - "@babel/plugin-proposal-optional-chaining": "7.21.0", - "@babel/plugin-syntax-dynamic-import": "7.8.3", - "@babel/plugin-syntax-object-rest-spread": "7.8.3", - "@babel/plugin-transform-object-rest-spread": "7.28.6", - "@babel/plugin-transform-runtime": "7.29.0", - "@babel/preset-env": "7.29.5", - "@babel/preset-react": "7.28.5", - "@babel/preset-typescript": "7.28.5", - "@babel/register": "7.29.3", - "@babel/standalone": "7.29.4", - "@babel/traverse": "7.29.0", - "@babel/types": "7.29.0", - "@cactuslab/usepubsub": "^1.0.2", - "@ctrl/tinycolor": "3.3.4", - "@cypress/react": "9.0.1", - "@dnd-kit/core": "^6.0.8", - "@dnd-kit/sortable": "^7.0.2", - "@dnd-kit/utilities": "^3.2.1", - "@eslint/compat": "1.3.0", - "@eslint/js": "9.26.0", - "@floating-ui/dom": "1.6.12", - "@fluentui/react-compiler-analyzer": "0.0.0-experimental.rc-analyzer.20260526-7c5862ce36.0", - "@fluentui/react-icons": "^2.0.306", - "@griffel/babel-preset": "1.5.8", - "@griffel/eslint-plugin": "^2.0.0", - "@griffel/jest-serializer": "1.1.24", - "@griffel/react": "^1.5.32", - "@griffel/shadow-dom": "0.2.2", - "@griffel/webpack-loader": "2.2.10", - "@jest/reporters": "30.2.0", - "@mdx-js/loader": "2.3.0", - "@microsoft/api-extractor": "7.51.0", - "@microsoft/api-extractor-model": "7.31.2", - "@microsoft/eslint-plugin-sdl": "1.0.1", - "@microsoft/fast-build": "0.7.0", - "@microsoft/fast-element": "2.10.4", - "@microsoft/fast-html": "1.0.0-alpha.54", - "@microsoft/fast-test-harness": "0.3.1", - "@microsoft/focusgroup-polyfill": "1.5.0", - "@microsoft/load-themed-styles": "1.10.26", - "@microsoft/loader-load-themed-styles": "2.0.17", - "@microsoft/tsdoc": "0.15.1", - "@nx/devkit": "21.6.10", - "@nx/eslint": "21.6.10", - "@nx/eslint-plugin": "21.6.10", - "@nx/jest": "21.6.10", - "@nx/js": "21.6.10", - "@nx/node": "21.6.10", - "@nx/plugin": "21.6.10", - "@nx/workspace": "21.6.10", - "@octokit/rest": "18.12.0", - "@oddbird/css-anchor-positioning": "0.4.0", - "@phenomnomnominal/tsquery": "6.1.3", - "@playwright/test": "1.56.1", - "@react-native/babel-preset": "0.73.21", - "@rnx-kit/eslint-plugin": "0.8.6", - "@rollup/plugin-node-resolve": "13.3.0", - "@storybook/addon-a11y": "9.1.17", - "@storybook/addon-docs": "9.1.17", - "@storybook/addon-links": "9.1.17", - "@storybook/icons": "1.3.2", - "@storybook/react": "9.1.17", - "@storybook/react-webpack5": "9.1.17", - "@swc/cli": "0.7.7", - "@swc/core": "1.11.24", - "@swc/helpers": "0.5.1", - "@swc/jest": "0.2.38", - "@testing-library/dom": "10.4.0", - "@testing-library/jest-dom": "5.16.5", - "@testing-library/react": "16.3.0", - "@testing-library/react-hooks": "8.0.1", - "@testing-library/user-event": "13.5.0", - "@tsconfig/node20": "20.1.6", - "@types/babel__core": "7.20.5", - "@types/babel__helper-plugin-utils": "7.10.3", - "@types/babel__register": "7.17.3", - "@types/babel__traverse": "7.20.6", - "@types/chrome-remote-interface": "0.30.0", - "@types/circular-dependency-plugin": "5.0.8", - "@types/copy-webpack-plugin": "10.1.0", - "@types/d3-array": "3.2.1", - "@types/d3-axis": "3.0.6", - "@types/d3-format": "3.0.4", - "@types/d3-hierarchy": "3.1.7", - "@types/d3-sankey": "0.12.4", - "@types/d3-scale": "4.0.8", - "@types/d3-selection": "3.0.10", - "@types/d3-shape": "3.1.6", - "@types/d3-time": "3.0.3", - "@types/d3-time-format": "3.0.4", - "@types/ejs": "3.1.5", - "@types/eslint": "9.6.1", - "@types/express": "4.17.21", - "@types/fs-extra": "8.0.1", - "@types/glob": "7.1.1", - "@types/jest": "30.0.0", - "@types/jest-axe": "3.5.9", - "@types/jju": "1.4.1", - "@types/json-schema": "^7.0.8", - "@types/loader-utils": "2.0.3", - "@types/lodash": "4.14.182", - "@types/markdown-table": "2.0.0", - "@types/micromatch": "4.0.2", - "@types/node": "^22.0.0", - "@types/prettier": "2.7.2", - "@types/progress": "2.0.5", - "@types/react": "19.2.2", - "@types/react-dom": "19.2.2", - "@types/react-frame-component": "4.1.1", - "@types/react-is": "19.2.0", - "@types/react-test-renderer": "19.1.0", - "@types/react-transition-group": "4.4.6", - "@types/react-window": "^1.8.2", - "@types/scheduler": "0.16.2", - "@types/semver": "^6.2.0", - "@types/tmp": "0.2.0", - "@types/turndown": "5.0.5", - "@types/use-sync-external-store": "0.0.6", - "@types/webpack-bundle-analyzer": "4.7.0", - "@types/webpack-dev-middleware": "5.3.0", - "@types/webpack-env": "1.18.8", - "@types/webpack-hot-middleware": "2.25.9", - "@types/yargs": "13.0.11", - "@types/yargs-unparser": "2.0.1", - "@typescript-eslint/eslint-plugin": "^8.46.2", - "@typescript-eslint/rule-tester": "8.46.2", - "autoprefixer": "10.2.1", - "babel-jest": "30.4.1", - "babel-loader": "9.1.3", - "babel-plugin-annotate-pure-calls": "0.4.0", - "babel-plugin-annotate-pure-imports": "1.0.0-1", - "babel-plugin-iife-wrap-react-components": "1.0.0-5", - "babel-plugin-lodash": "3.3.4", - "babel-plugin-module-resolver": "5.0.3", - "babel-plugin-tester": "10.1.0", - "beachball": "2.31.0", - "chalk": "4.1.0", - "chrome-remote-interface": "0.28.2", - "ci-info": "3.9.0", - "circular-dependency-plugin": "5.2.2", - "clean-css": "4.2.3", - "clean-webpack-plugin": "4.0.0", - "connect-history-api-fallback": "1.6.0", - "copy-webpack-plugin": "12.0.2", - "cross-env": "^5.1.4", - "css-loader": "5.0.1", - "cypress": "14.4.1", - "cypress-real-events": "1.14.0", - "d3-array": "3.2.4", - "d3-axis": "3.0.0", - "d3-format": "3.1.0", - "d3-hierarchy": "3.1.2", - "d3-sankey": "0.12.3", - "d3-scale": "4.0.2", - "d3-selection": "3.0.0", - "d3-shape": "3.2.0", - "d3-time": "3.1.0", - "d3-time-format": "3.0.0", - "dedent": "1.2.0", - "del": "6.0.0", - "doctoc": "2.0.1", - "dotparser": "1.1.1", - "ejs": "3.1.10", - "embla-carousel": "8.5.1", - "embla-carousel-autoplay": "8.5.1", - "embla-carousel-fade": "8.5.1", - "enquirer": "2.3.6", - "esbuild": "0.25.0", - "esbuild-loader": "4.1.0", - "eslint": "9.31.0", - "eslint-config-airbnb-extended": "2.1.2", - "eslint-config-prettier": "10.1.8", - "eslint-import-resolver-typescript": "3.7.0", - "eslint-plugin-compat": "6.0.2", - "eslint-plugin-es": "4.1.0", - "eslint-plugin-import": "2.31.0", - "eslint-plugin-jest": "28.11.0", - "eslint-plugin-jsdoc": "50.6.14", - "eslint-plugin-jsx-a11y": "6.10.2", - "eslint-plugin-playwright": "2.2.0", - "eslint-plugin-react": "7.37.5", - "eslint-plugin-react-hooks": "7.1.1", - "babel-plugin-react-compiler": "1.0.0", - "express": "4.22.1", - "extract-comments": "1.1.0", - "file-loader": "6.2.0", - "find-free-port": "2.0.0", - "flamegrill": "0.2.0", - "fork-ts-checker-webpack-plugin": "9.0.2", - "fs-extra": "8.1.0", - "glob": "7.2.0", - "globals": "13.24.0", - "html-webpack-plugin": "5.6.0", - "husky": "9.1.7", - "ignore-not-found-export-webpack-plugin": "1.0.2", - "imports-loader": "1.2.0", - "jest": "30.2.0", - "jest-axe": "10.0.0", - "jest-cli": "30.2.0", - "jest-environment-jsdom": "30.2.0", - "jest-environment-node": "30.2.0", - "jest-snapshot": "30.2.0", - "jest-watch-typeahead": "3.0.1", - "jju": "1.4.0", - "json-schema": "0.4.0", - "jsonc-eslint-parser": "2.4.1", - "just-scripts": "1.8.2", - "license-webpack-plugin": "4.0.2", - "loader-utils": "2.0.4", - "lodash": "4.17.21", - "markdown-table": "2.0.0", - "memfs": "3.5.3", - "micromatch": "4.0.8", - "monosize": "0.6.3", - "monosize-bundler-webpack": "0.1.6", - "monosize-storage-azure": "0.0.16", - "nano-staged": "0.9.0", - "node-plop": "0.25.0", - "nx": "21.6.10", - "p-queue": "6.6.2", - "parse-diff": "0.7.1", - "patch-package": "8.0.0", - "path-browserify": "1.0.1", - "playwright": "1.56.1", - "plop": "2.6.0", - "portfinder": "1.0.28", - "postcss": "8.5.10", - "postcss-loader": "4.1.0", - "postcss-modules": "4.1.3", - "prettier": "2.8.8", - "progress": "2.0.3", - "puppeteer": "24.42.0", - "raw-loader": "4.0.2", - "react": "19.2.0", - "react-app-polyfill": "2.0.0", - "react-compiler-webpack": "1.0.0", - "react-dom": "19.2.0", - "react-frame-component": "4.1.1", - "react-is": "19.2.0", - "react-shadow": "20.3.0", - "react-test-renderer": "19.2.0", - "react-window": "^1.8.6", - "read-pkg-up": "7.0.1", - "remark-gfm": "4.0.1", - "replace-in-file": "6.1.0", - "resolve": "1.22.8", - "riceburn": "1.3.1", - "rollup": "2.79.2", - "rollup-plugin-commonjs": "10.1.0", - "rollup-plugin-esbuild": "6.1.1", - "rollup-plugin-node-resolve": "5.2.0", - "rollup-plugin-terser": "5.3.1", - "rollup-plugin-transform-tagged-template": "0.0.3", - "sass": "1.83.0", - "sass-loader": "12.4.0", - "satisfied": "^1.1.1", - "scheduler": "0.27.0", - "schema-utils": "3.1.1", - "semver": "^6.2.0", - "source-map-loader": "4.0.0", - "storybook": "9.1.17", - "storywright": "0.0.27-storybook7.14", - "strip-ansi": "6.0.0", - "style-loader": "2.0.0", - "swc-loader": "0.2.6", - "swc-plugin-de-indent-template-literal": "1.5.0", - "syncpack": "10.6.1", - "terser": "5.39.1", - "terser-webpack-plugin": "5.3.10", - "through2": "4.0.2", - "tmp": "0.2.1", - "ts-jest": "29.4.5", - "ts-loader": "9.4.2", - "ts-node": "10.9.2", - "tsconfig-paths": "4.2.0", - "tsconfig-paths-webpack-plugin": "4.1.0", - "tslib": "2.8.1", - "turndown": "7.2.0", - "turndown-plugin-gfm": "1.0.2", - "typescript": "5.7.3", - "typescript-eslint": "8.46.2", - "vite": "6.4.2", - "webpack": "5.99.8", - "webpack-bundle-analyzer": "4.10.1", - "webpack-cli": "5.1.4", - "webpack-dev-middleware": "7.1.0", - "webpack-dev-server": "4.15.2", - "webpack-hot-middleware": "2.26.1", - "webpack-merge": "5.10.0", - "workspace-tools": "0.29.1", - "yargs": "13.3.2", - "yargs-parser": "13.1.2", - "yargs-unparser": "2.0.0" - }, - "dependencies": { - "@fluentui/react-icons-northstar": "0.66.5", - "@fluentui/react-northstar": "0.66.5", - "copy-to-clipboard": "3.3.1" - }, - "license": "MIT", - "workspaces": { - "packages": [ - "apps/*", - "packages/*", - "packages/react-components/*", - "packages/react-components/*/*", - "packages/charts/*", - "packages/charts/*/*", - "scripts/*", - "tools/*", - "typings", - "starter-templates" - ] - }, - "resolutions": { - "@types/jest-axe/axe-core": "4.7.2", - "@phenomnomnominal/tsquery": "6.1.3", - "esbuild": "0.25.0", - "swc-loader": "^0.2.6", - "prettier": "2.8.8", - "puppeteer": "24.42.0", - "ws": "8.17.1", - "playwright": "1.56.1", - "**/prismjs": "^1.30.0", - "**/@tensile-perf/runner/express": "^4.22.1", - "**/tar-fs": "^2.1.4", - "jackspeak": "2.1.1", - "**/micromatch/braces": "^3.0.3", - "**/just-scripts-utils/tar": "^7.5.8", - "**/body-parser/qs": "^6.14.2", - "**/@cypress/request/qs": "^6.14.2", - "handlebars": "^4.7.9", - "shell-quote": "^1.8.2", - "basic-ftp": "^5.2.0", - "**/@nx/devkit/minimatch": "^9.0.7", - "**/@nx/jest/minimatch": "^9.0.7", - "**/nx/minimatch": "^9.0.7", - "**/syncpack/minimatch": "^9.0.7" - }, - "nx": { - "includedScripts": [] - } -} +{ + "name": "@fluentui/fluentui-repo", + "version": "1.0.0", + "description": "Reusable React components for building experiences for Microsoft 365.", + "private": true, + "repository": { + "type": "git", + "url": "https://github.com/microsoft/fluentui" + }, + "engines": { + "node": "^22.0.0 || ^24.0.0" + }, + "scripts": { + "dedupe": "npx yarn-deduplicate@latest --strategy fewer", + "change": "beachball change --no-commit", + "check:change": "beachball check", + "check:modified-files": "node -r ./scripts/ts-node/src/register ./scripts/executors/src/check-for-modified-files", + "check:affected": "node ./scripts/executors/src/checkIfPackagesAffected.js", + "check:installed-dependencies-versions": "satisfied --no-peers --skip-invalid", + "create-component": "yarn nx g @fluentui/workspace-plugin:react-component", + "create-package": "yarn nx g @fluentui/workspace-plugin:react-library", + "format": "node scripts/executors/src/format.js", + "generate-version-files": "node -r ./scripts/ts-node/src/register ./scripts/generators/src/generate-version-files", + "postinstall": "yarn patch-package && husky && node ./scripts/package-manager/src/postinstall.js", + "preinstall": "node ./scripts/package-manager/src/preinstall.js", + "publish:beachball": "beachball publish -b origin/master --access public -y", + "start": "node -r ./scripts/ts-node/src/register ./scripts/executors/src/start", + "generate": "node -r ./scripts/ts-node/src/register ./scripts/executors/src/generate-ui", + "clean": "nx run-many -t clean --verbose", + "reset-workspace": "node -r ./scripts/ts-node/src/register ./scripts/executors/src/reset-workspace.ts" + }, + "devDependencies": { + "@actions/core": "1.9.1", + "@actions/github": "5.0.3", + "@babel/core": "7.29.0", + "@babel/generator": "7.29.1", + "@babel/parser": "7.29.3", + "@babel/plugin-proposal-class-properties": "7.18.6", + "@babel/plugin-proposal-decorators": "7.29.0", + "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", + "@babel/plugin-proposal-optional-chaining": "7.21.0", + "@babel/plugin-syntax-dynamic-import": "7.8.3", + "@babel/plugin-syntax-object-rest-spread": "7.8.3", + "@babel/plugin-transform-object-rest-spread": "7.28.6", + "@babel/plugin-transform-runtime": "7.29.0", + "@babel/preset-env": "7.29.5", + "@babel/preset-react": "7.28.5", + "@babel/preset-typescript": "7.28.5", + "@babel/register": "7.29.3", + "@babel/standalone": "7.29.4", + "@babel/traverse": "7.29.0", + "@babel/types": "7.29.0", + "@cactuslab/usepubsub": "^1.0.2", + "@ctrl/tinycolor": "3.3.4", + "@cypress/react": "9.0.1", + "@dnd-kit/core": "^6.0.8", + "@dnd-kit/sortable": "^7.0.2", + "@dnd-kit/utilities": "^3.2.1", + "@eslint/compat": "1.3.0", + "@eslint/js": "9.26.0", + "@floating-ui/dom": "1.6.12", + "@fluentui/react-compiler-analyzer": "0.0.0-experimental.rc-analyzer.20260526-7c5862ce36.0", + "@fluentui/react-icons": "^2.0.306", + "@griffel/babel-preset": "1.5.8", + "@griffel/eslint-plugin": "^2.0.0", + "@griffel/jest-serializer": "1.1.24", + "@griffel/react": "^1.5.32", + "@griffel/shadow-dom": "0.2.2", + "@griffel/webpack-loader": "2.2.10", + "@jest/reporters": "30.2.0", + "@mdx-js/loader": "2.3.0", + "@microsoft/api-extractor": "7.51.0", + "@microsoft/api-extractor-model": "7.31.2", + "@microsoft/eslint-plugin-sdl": "1.0.1", + "@microsoft/fast-build": "0.7.0", + "@microsoft/fast-element": "3.0.0-rc.1", + "@microsoft/fast-html": "1.0.0-alpha.54", + "@microsoft/fast-test-harness": "0.3.1", + "@microsoft/focusgroup-polyfill": "1.5.0", + "@microsoft/load-themed-styles": "1.10.26", + "@microsoft/loader-load-themed-styles": "2.0.17", + "@microsoft/tsdoc": "0.15.1", + "@nx/devkit": "21.6.10", + "@nx/eslint": "21.6.10", + "@nx/eslint-plugin": "21.6.10", + "@nx/jest": "21.6.10", + "@nx/js": "21.6.10", + "@nx/node": "21.6.10", + "@nx/plugin": "21.6.10", + "@nx/workspace": "21.6.10", + "@octokit/rest": "18.12.0", + "@oddbird/css-anchor-positioning": "0.4.0", + "@phenomnomnominal/tsquery": "6.1.3", + "@playwright/test": "1.56.1", + "@react-native/babel-preset": "0.73.21", + "@rnx-kit/eslint-plugin": "0.8.6", + "@rollup/plugin-node-resolve": "13.3.0", + "@storybook/addon-a11y": "9.1.17", + "@storybook/addon-docs": "9.1.17", + "@storybook/addon-links": "9.1.17", + "@storybook/icons": "1.3.2", + "@storybook/react": "9.1.17", + "@storybook/react-webpack5": "9.1.17", + "@swc/cli": "0.7.7", + "@swc/core": "1.11.24", + "@swc/helpers": "0.5.1", + "@swc/jest": "0.2.38", + "@testing-library/dom": "10.4.0", + "@testing-library/jest-dom": "5.16.5", + "@testing-library/react": "16.3.0", + "@testing-library/react-hooks": "8.0.1", + "@testing-library/user-event": "13.5.0", + "@tsconfig/node20": "20.1.6", + "@types/babel__core": "7.20.5", + "@types/babel__helper-plugin-utils": "7.10.3", + "@types/babel__register": "7.17.3", + "@types/babel__traverse": "7.20.6", + "@types/chrome-remote-interface": "0.30.0", + "@types/circular-dependency-plugin": "5.0.8", + "@types/copy-webpack-plugin": "10.1.0", + "@types/d3-array": "3.2.1", + "@types/d3-axis": "3.0.6", + "@types/d3-format": "3.0.4", + "@types/d3-hierarchy": "3.1.7", + "@types/d3-sankey": "0.12.4", + "@types/d3-scale": "4.0.8", + "@types/d3-selection": "3.0.10", + "@types/d3-shape": "3.1.6", + "@types/d3-time": "3.0.3", + "@types/d3-time-format": "3.0.4", + "@types/ejs": "3.1.5", + "@types/eslint": "9.6.1", + "@types/express": "4.17.21", + "@types/fs-extra": "8.0.1", + "@types/glob": "7.1.1", + "@types/jest": "30.0.0", + "@types/jest-axe": "3.5.9", + "@types/jju": "1.4.1", + "@types/json-schema": "^7.0.8", + "@types/loader-utils": "2.0.3", + "@types/lodash": "4.14.182", + "@types/markdown-table": "2.0.0", + "@types/micromatch": "4.0.2", + "@types/node": "^22.0.0", + "@types/prettier": "2.7.2", + "@types/progress": "2.0.5", + "@types/react": "19.2.2", + "@types/react-dom": "19.2.2", + "@types/react-frame-component": "4.1.1", + "@types/react-is": "19.2.0", + "@types/react-test-renderer": "19.1.0", + "@types/react-transition-group": "4.4.6", + "@types/react-window": "^1.8.2", + "@types/scheduler": "0.16.2", + "@types/semver": "^6.2.0", + "@types/tmp": "0.2.0", + "@types/turndown": "5.0.5", + "@types/use-sync-external-store": "0.0.6", + "@types/webpack-bundle-analyzer": "4.7.0", + "@types/webpack-dev-middleware": "5.3.0", + "@types/webpack-env": "1.18.8", + "@types/webpack-hot-middleware": "2.25.9", + "@types/yargs": "13.0.11", + "@types/yargs-unparser": "2.0.1", + "@typescript-eslint/eslint-plugin": "^8.46.2", + "@typescript-eslint/rule-tester": "8.46.2", + "autoprefixer": "10.2.1", + "babel-jest": "30.4.1", + "babel-loader": "9.1.3", + "babel-plugin-annotate-pure-calls": "0.4.0", + "babel-plugin-annotate-pure-imports": "1.0.0-1", + "babel-plugin-iife-wrap-react-components": "1.0.0-5", + "babel-plugin-lodash": "3.3.4", + "babel-plugin-module-resolver": "5.0.3", + "babel-plugin-tester": "10.1.0", + "beachball": "2.31.0", + "chalk": "4.1.0", + "chrome-remote-interface": "0.28.2", + "ci-info": "3.9.0", + "circular-dependency-plugin": "5.2.2", + "clean-css": "4.2.3", + "clean-webpack-plugin": "4.0.0", + "connect-history-api-fallback": "1.6.0", + "copy-webpack-plugin": "12.0.2", + "cross-env": "^5.1.4", + "css-loader": "5.0.1", + "cypress": "14.4.1", + "cypress-real-events": "1.14.0", + "d3-array": "3.2.4", + "d3-axis": "3.0.0", + "d3-format": "3.1.0", + "d3-hierarchy": "3.1.2", + "d3-sankey": "0.12.3", + "d3-scale": "4.0.2", + "d3-selection": "3.0.0", + "d3-shape": "3.2.0", + "d3-time": "3.1.0", + "d3-time-format": "3.0.0", + "dedent": "1.2.0", + "del": "6.0.0", + "doctoc": "2.0.1", + "dotparser": "1.1.1", + "ejs": "3.1.10", + "embla-carousel": "8.5.1", + "embla-carousel-autoplay": "8.5.1", + "embla-carousel-fade": "8.5.1", + "enquirer": "2.3.6", + "esbuild": "0.25.0", + "esbuild-loader": "4.1.0", + "eslint": "9.31.0", + "eslint-config-airbnb-extended": "2.1.2", + "eslint-config-prettier": "10.1.8", + "eslint-import-resolver-typescript": "3.7.0", + "eslint-plugin-compat": "6.0.2", + "eslint-plugin-es": "4.1.0", + "eslint-plugin-import": "2.31.0", + "eslint-plugin-jest": "28.11.0", + "eslint-plugin-jsdoc": "50.6.14", + "eslint-plugin-jsx-a11y": "6.10.2", + "eslint-plugin-playwright": "2.2.0", + "eslint-plugin-react": "7.37.5", + "eslint-plugin-react-hooks": "7.1.1", + "babel-plugin-react-compiler": "1.0.0", + "express": "4.22.1", + "extract-comments": "1.1.0", + "file-loader": "6.2.0", + "find-free-port": "2.0.0", + "flamegrill": "0.2.0", + "fork-ts-checker-webpack-plugin": "9.0.2", + "fs-extra": "8.1.0", + "glob": "7.2.0", + "globals": "13.24.0", + "html-webpack-plugin": "5.6.0", + "husky": "9.1.7", + "ignore-not-found-export-webpack-plugin": "1.0.2", + "imports-loader": "1.2.0", + "jest": "30.2.0", + "jest-axe": "10.0.0", + "jest-cli": "30.2.0", + "jest-environment-jsdom": "30.2.0", + "jest-environment-node": "30.2.0", + "jest-snapshot": "30.2.0", + "jest-watch-typeahead": "3.0.1", + "jju": "1.4.0", + "json-schema": "0.4.0", + "jsonc-eslint-parser": "2.4.1", + "just-scripts": "1.8.2", + "license-webpack-plugin": "4.0.2", + "loader-utils": "2.0.4", + "lodash": "4.17.21", + "markdown-table": "2.0.0", + "memfs": "3.5.3", + "micromatch": "4.0.8", + "monosize": "0.6.3", + "monosize-bundler-webpack": "0.1.6", + "monosize-storage-azure": "0.0.16", + "nano-staged": "0.9.0", + "node-plop": "0.25.0", + "nx": "21.6.10", + "p-queue": "6.6.2", + "parse-diff": "0.7.1", + "patch-package": "8.0.0", + "path-browserify": "1.0.1", + "playwright": "1.56.1", + "plop": "2.6.0", + "portfinder": "1.0.28", + "postcss": "8.5.10", + "postcss-loader": "4.1.0", + "postcss-modules": "4.1.3", + "prettier": "2.8.8", + "progress": "2.0.3", + "puppeteer": "24.42.0", + "raw-loader": "4.0.2", + "react": "19.2.0", + "react-app-polyfill": "2.0.0", + "react-compiler-webpack": "1.0.0", + "react-dom": "19.2.0", + "react-frame-component": "4.1.1", + "react-is": "19.2.0", + "react-shadow": "20.3.0", + "react-test-renderer": "19.2.0", + "react-window": "^1.8.6", + "read-pkg-up": "7.0.1", + "remark-gfm": "4.0.1", + "replace-in-file": "6.1.0", + "resolve": "1.22.8", + "riceburn": "1.3.1", + "rollup": "2.79.2", + "rollup-plugin-commonjs": "10.1.0", + "rollup-plugin-esbuild": "6.1.1", + "rollup-plugin-node-resolve": "5.2.0", + "rollup-plugin-terser": "5.3.1", + "rollup-plugin-transform-tagged-template": "0.0.3", + "sass": "1.83.0", + "sass-loader": "12.4.0", + "satisfied": "^1.1.1", + "scheduler": "0.27.0", + "schema-utils": "3.1.1", + "semver": "^6.2.0", + "source-map-loader": "4.0.0", + "storybook": "9.1.17", + "storywright": "0.0.27-storybook7.14", + "strip-ansi": "6.0.0", + "style-loader": "2.0.0", + "swc-loader": "0.2.6", + "swc-plugin-de-indent-template-literal": "1.5.0", + "syncpack": "10.6.1", + "terser": "5.39.1", + "terser-webpack-plugin": "5.3.10", + "through2": "4.0.2", + "tmp": "0.2.1", + "ts-jest": "29.4.5", + "ts-loader": "9.4.2", + "ts-node": "10.9.2", + "tsconfig-paths": "4.2.0", + "tsconfig-paths-webpack-plugin": "4.1.0", + "tslib": "2.8.1", + "turndown": "7.2.0", + "turndown-plugin-gfm": "1.0.2", + "typescript": "5.7.3", + "typescript-eslint": "8.46.2", + "vite": "6.4.2", + "webpack": "5.99.8", + "webpack-bundle-analyzer": "4.10.1", + "webpack-cli": "5.1.4", + "webpack-dev-middleware": "7.1.0", + "webpack-dev-server": "4.15.2", + "webpack-hot-middleware": "2.26.1", + "webpack-merge": "5.10.0", + "workspace-tools": "0.29.1", + "yargs": "13.3.2", + "yargs-parser": "13.1.2", + "yargs-unparser": "2.0.0" + }, + "dependencies": { + "@fluentui/react-icons-northstar": "0.66.5", + "@fluentui/react-northstar": "0.66.5", + "copy-to-clipboard": "3.3.1" + }, + "license": "MIT", + "workspaces": { + "packages": [ + "apps/*", + "packages/*", + "packages/react-components/*", + "packages/react-components/*/*", + "packages/charts/*", + "packages/charts/*/*", + "scripts/*", + "tools/*", + "typings", + "starter-templates" + ] + }, + "resolutions": { + "@types/jest-axe/axe-core": "4.7.2", + "@phenomnomnominal/tsquery": "6.1.3", + "esbuild": "0.25.0", + "swc-loader": "^0.2.6", + "prettier": "2.8.8", + "puppeteer": "24.42.0", + "ws": "8.17.1", + "playwright": "1.56.1", + "**/prismjs": "^1.30.0", + "**/@tensile-perf/runner/express": "^4.22.1", + "**/tar-fs": "^2.1.4", + "jackspeak": "2.1.1", + "**/micromatch/braces": "^3.0.3", + "**/just-scripts-utils/tar": "^7.5.8", + "**/body-parser/qs": "^6.14.2", + "**/@cypress/request/qs": "^6.14.2", + "handlebars": "^4.7.9", + "shell-quote": "^1.8.2", + "basic-ftp": "^5.2.0", + "**/@nx/devkit/minimatch": "^9.0.7", + "**/@nx/jest/minimatch": "^9.0.7", + "**/nx/minimatch": "^9.0.7", + "**/syncpack/minimatch": "^9.0.7" + }, + "nx": { + "includedScripts": [] + } +} diff --git a/packages/charts/chart-web-components/package.json b/packages/charts/chart-web-components/package.json index f122a77f7342e..f2fdf0cab8ad3 100644 --- a/packages/charts/chart-web-components/package.json +++ b/packages/charts/chart-web-components/package.json @@ -1,90 +1,90 @@ -{ - "name": "@fluentui/chart-web-components", - "description": "A library of Fluent Chart Web Components", - "version": "0.0.85", - "author": { - "name": "Microsoft" - }, - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/microsoft/fluentui/tree/master/packages/charts/chart-web-components" - }, - "bugs": { - "url": "https://github.com/Microsoft/fluentui/issues/new/choose" - }, - "type": "module", - "main": "dist/esm/index.js", - "types": "dist/chart-web-components.d.ts", - "unpkg": "dist/chart-web-components.min.js", - "files": [ - "*.md", - "dist/esm/", - "dist/*.js", - "dist/*.d.ts" - ], - "exports": { - ".": "./dist/esm/index.js", - "./utilities.js": "./dist/esm/utils/index.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", - "./package.json": "./package.json" - }, - "sideEffects": [ - "./dist/esm/**/define.js", - "./dist/chart-web-components.js", - "./dist/chart-web-components.min.js" - ], - "scripts": { - "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", - "lint:fix": "eslint . --ext .ts --fix", - "format": "prettier -w 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", - "start-storybook": "storybook dev", - "build-storybook": "storybook build -o ./dist/storybook --docs", - "e2e": "node ./scripts/e2e.js", - "test:dev": "node ./scripts/e2e.js" - }, - "devDependencies": { - "@tensile-perf/web-components": "~0.2.2", - "@storybook/html": "9.1.17", - "@storybook/html-vite": "9.1.17", - "chromedriver": "^125.0.0" - }, - "dependencies": { - "@microsoft/fast-web-utilities": "^6.0.0", - "@fluentui/tokens": "^1.0.0-alpha.23", - "@fluentui/web-components": "^3.0.0-rc.27", - "@types/d3-selection": "^3.0.0", - "@types/d3-shape": "^3.0.0", - "d3-selection": "^3.0.0", - "d3-shape": "^3.0.0", - "tabbable": "^6.2.0", - "tslib": "^2.1.0" - }, - "peerDependencies": { - "@microsoft/fast-element": "^2.0.0" - }, - "beachball": { - "disallowedChangeTypes": [ - "major", - "minor" - ], - "tag": "alpha" - } -} +{ + "name": "@fluentui/chart-web-components", + "description": "A library of Fluent Chart Web Components", + "version": "0.0.85", + "author": { + "name": "Microsoft" + }, + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/microsoft/fluentui/tree/master/packages/charts/chart-web-components" + }, + "bugs": { + "url": "https://github.com/Microsoft/fluentui/issues/new/choose" + }, + "type": "module", + "main": "dist/esm/index.js", + "types": "dist/chart-web-components.d.ts", + "unpkg": "dist/chart-web-components.min.js", + "files": [ + "*.md", + "dist/esm/", + "dist/*.js", + "dist/*.d.ts" + ], + "exports": { + ".": "./dist/esm/index.js", + "./utilities.js": "./dist/esm/utils/index.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", + "./package.json": "./package.json" + }, + "sideEffects": [ + "./dist/esm/**/define.js", + "./dist/chart-web-components.js", + "./dist/chart-web-components.min.js" + ], + "scripts": { + "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", + "lint:fix": "eslint . --ext .ts --fix", + "format": "prettier -w 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", + "start-storybook": "storybook dev", + "build-storybook": "storybook build -o ./dist/storybook --docs", + "e2e": "node ./scripts/e2e.js", + "test:dev": "node ./scripts/e2e.js" + }, + "devDependencies": { + "@tensile-perf/web-components": "~0.2.2", + "@storybook/html": "9.1.17", + "@storybook/html-vite": "9.1.17", + "chromedriver": "^125.0.0" + }, + "dependencies": { + "@microsoft/fast-web-utilities": "^6.0.0", + "@fluentui/tokens": "^1.0.0-alpha.23", + "@fluentui/web-components": "^3.0.0-rc.27", + "@types/d3-selection": "^3.0.0", + "@types/d3-shape": "^3.0.0", + "d3-selection": "^3.0.0", + "d3-shape": "^3.0.0", + "tabbable": "^6.2.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@microsoft/fast-element": "^3.0.0-rc.1" + }, + "beachball": { + "disallowedChangeTypes": [ + "major", + "minor" + ], + "tag": "alpha" + } +} diff --git a/packages/charts/chart-web-components/rollup.config.js b/packages/charts/chart-web-components/rollup.config.js index 83e86ddda735e..ce9b90d19fa49 100644 --- a/packages/charts/chart-web-components/rollup.config.js +++ b/packages/charts/chart-web-components/rollup.config.js @@ -1,48 +1,49 @@ -/** - * This config should be shared for all web-component packages. - * Tracking issue - https://github.com/microsoft/fluentui/issues/33576 - */ - -import { nodeResolve } from '@rollup/plugin-node-resolve'; -import commonJS from 'rollup-plugin-commonjs'; -import esbuild, { minify } from 'rollup-plugin-esbuild'; -import transformTaggedTemplate from 'rollup-plugin-transform-tagged-template'; -import { transformCSSFragment, transformHTMLFragment } from './scripts/transform-fragments'; - -const parserOptions = { - sourceType: 'module', -}; - -export default [ - { - input: 'src/index-rollup.ts', - output: [ - { - file: 'dist/chart-web-components.js', - format: 'esm', - }, - { - file: 'dist/chart-web-components.min.js', - format: 'esm', - plugins: [minify()], - }, - ], - plugins: [ - nodeResolve({ browser: true }), - commonJS(), - esbuild({ - tsconfig: './tsconfig.lib.json', - }), - transformTaggedTemplate({ - tagsToProcess: ['css'], - transformer: transformCSSFragment, - parserOptions, - }), - transformTaggedTemplate({ - tagsToProcess: ['html'], - transformer: transformHTMLFragment, - parserOptions, - }), - ], - }, -]; +/** + * This config should be shared for all web-component packages. + * Tracking issue - https://github.com/microsoft/fluentui/issues/33576 + */ + +import { nodeResolve } from '@rollup/plugin-node-resolve'; +import commonJS from 'rollup-plugin-commonjs'; +import esbuild, { minify } from 'rollup-plugin-esbuild'; +import transformTaggedTemplate from 'rollup-plugin-transform-tagged-template'; +import { transformCSSFragment, transformHTMLFragment } from './scripts/transform-fragments'; + +const parserOptions = { + sourceType: 'module', +}; + +export default [ + { + input: 'src/index-rollup.ts', + output: [ + { + file: 'dist/chart-web-components.js', + format: 'esm', + }, + { + file: 'dist/chart-web-components.min.js', + format: 'esm', + plugins: [minify({ target: 'es2022' })], + }, + ], + plugins: [ + nodeResolve({ browser: true }), + commonJS(), + esbuild({ + tsconfig: './tsconfig.lib.json', + target: 'es2022', + }), + transformTaggedTemplate({ + tagsToProcess: ['css'], + transformer: transformCSSFragment, + parserOptions, + }), + transformTaggedTemplate({ + tagsToProcess: ['html'], + transformer: transformHTMLFragment, + parserOptions, + }), + ], + }, +]; diff --git a/packages/charts/chart-web-components/src/donut-chart/donut-chart.definition.ts b/packages/charts/chart-web-components/src/donut-chart/donut-chart.definition.ts index 3cf608dc04648..96bc3beca0ba0 100644 --- a/packages/charts/chart-web-components/src/donut-chart/donut-chart.definition.ts +++ b/packages/charts/chart-web-components/src/donut-chart/donut-chart.definition.ts @@ -1,18 +1,18 @@ -import { FluentDesignSystem } from '@fluentui/web-components'; -import { DonutChart } from './donut-chart.js'; -import { styles } from './donut-chart.styles.js'; -import { template } from './donut-chart.template.js'; - -/** - * @public - * @remarks - * HTML Element: `` - */ -export const definition = DonutChart.compose({ - name: `${FluentDesignSystem.prefix}-donut-chart`, - template, - styles, - shadowOptions: { - delegatesFocus: true, - }, -}); +import { FluentDesignSystem } from '@fluentui/web-components'; +import { DonutChart } from './donut-chart.js'; +import { styles } from './donut-chart.styles.js'; +import { template } from './donut-chart.template.js'; + +/** + * @public + * @remarks + * HTML Element: `` + */ +export const definition = await DonutChart.compose({ + name: `${FluentDesignSystem.prefix}-donut-chart`, + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}); diff --git a/packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.definition.ts b/packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.definition.ts index 211c4d0b63c56..4cfcbe1fd279f 100644 --- a/packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.definition.ts +++ b/packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.definition.ts @@ -1,20 +1,20 @@ -import { FluentDesignSystem } from '@fluentui/web-components'; -import { HorizontalBarChart } from './horizontal-bar-chart.js'; -import { styles } from './horizontal-bar-chart.styles.js'; -import { template } from './horizontal-bar-chart.template.js'; - -/** - * The Fluent Textarea Element definition. - * - * @public - * @remarks - * HTML Element: `` - */ -export const definition = HorizontalBarChart.compose({ - name: `${FluentDesignSystem.prefix}-horizontal-bar-chart`, - template, - styles, - shadowOptions: { - delegatesFocus: true, - }, -}); +import { FluentDesignSystem } from '@fluentui/web-components'; +import { HorizontalBarChart } from './horizontal-bar-chart.js'; +import { styles } from './horizontal-bar-chart.styles.js'; +import { template } from './horizontal-bar-chart.template.js'; + +/** + * The Fluent Textarea Element definition. + * + * @public + * @remarks + * HTML Element: `` + */ +export const definition = await HorizontalBarChart.compose({ + name: `${FluentDesignSystem.prefix}-horizontal-bar-chart`, + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}); diff --git a/packages/web-components/docs/web-components.api.md b/packages/web-components/docs/web-components.api.md index fef7fb412a672..8ca1aa4180ea4 100644 --- a/packages/web-components/docs/web-components.api.md +++ b/packages/web-components/docs/web-components.api.md @@ -1200,7 +1200,7 @@ export const ButtonSize: { export type ButtonSize = ValuesOf; // @public -export const ButtonTemplate: ElementViewTemplate; +export const ButtonTemplate: ElementViewTemplate -`; - -/** - * Generates a template for the {@link (Dropdown:class)} component. - * - * @param options - The {@link (DropdownOptions:interface)} to use for generating the template. - * @returns The template object. - * - * @public - */ -export function dropdownTemplate(options: DropdownOptions = {}): ElementViewTemplate { - return html` - - `; -} - -/** - * Template for the Dropdown component. - * - * @public - */ -export const template: ElementViewTemplate = dropdownTemplate({ - indicator: dropdownIndicatorTemplate, -}); +import { type ElementViewTemplate, html, ref } from '@microsoft/fast-element'; +import { staticallyCompose } from '../utils/template-helpers.js'; +import type { BaseDropdown } from './dropdown.base.js'; +import type { Dropdown } from './dropdown.js'; +import type { DropdownOptions } from './dropdown.options.js'; + +const dropdownIndicatorTemplate = html` + +`; + +/** + * The template partial for the dropdown input element. This template is used when the `type` property is set to "combobox". + * + * @public + * @remarks + * Since the input element must be present in the light DOM for ARIA to function correctly, this template should not be + * overridden. + * @see {@link BaseDropdown.insertControl} + */ +export const dropdownInputTemplate = html` + +`; + +/** + * The template partial for the dropdown button element. This template is used when the `type` property is set to "dropdown". + * + * @public + * @remarks + * Since the button element must be present in the light DOM for ARIA to function correctly, this template should not be + * overridden. + * @see {@link BaseDropdown.insertControl} + */ +export const dropdownButtonTemplate = html` + +`; + +/** + * Generates a template for the {@link (Dropdown:class)} component. + * + * @param options - The {@link (DropdownOptions:interface)} to use for generating the template. + * @returns The template object. + * + * @public + */ +export function dropdownTemplate(options: DropdownOptions = {}): ElementViewTemplate { + return html` + + `; +} + +/** + * Template for the Dropdown component. + * + * @public + */ +export const template: ElementViewTemplate = dropdownTemplate({ + indicator: dropdownIndicatorTemplate, +}); diff --git a/packages/web-components/src/field/define-async.ts b/packages/web-components/src/field/define-async.ts index f8ed499e649d8..f00873629f753 100644 --- a/packages/web-components/src/field/define-async.ts +++ b/packages/web-components/src/field/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './field.definition-async.js'; -import { Field } from './field.js'; - -RenderableFASTElement(Field).defineAsync(definition); +import { definition } from './field.definition-async.js'; +import { Field } from './field.js'; + +await Field.define(definition); diff --git a/packages/web-components/src/field/field.definition-async.ts b/packages/web-components/src/field/field.definition-async.ts index 0dc76c88961f2..3d077f8756910 100644 --- a/packages/web-components/src/field/field.definition-async.ts +++ b/packages/web-components/src/field/field.definition-async.ts @@ -1,18 +1,19 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './field.options.js'; - -/** - * The async definition configuration for the fluent-field element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ -export const definition: PartialFASTElementDefinition = { - name: tagName, - templateOptions: 'defer-and-hydrate', - shadowOptions: { - delegatesFocus: true, - }, -}; +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './field.options.js'; + +/** + * The async definition configuration for the fluent-field element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ +export const definition: PartialFASTElementDefinition = { + name: tagName, + template: declarativeTemplate(), + shadowOptions: { + delegatesFocus: true, + }, +}; diff --git a/packages/web-components/src/field/field.definition.ts b/packages/web-components/src/field/field.definition.ts index 2f0128c8740e6..69626d380cacc 100644 --- a/packages/web-components/src/field/field.definition.ts +++ b/packages/web-components/src/field/field.definition.ts @@ -1,20 +1,20 @@ -import { tagName } from './field.options.js'; -import { Field } from './field.js'; -import { styles } from './field.styles.js'; -import { template } from './field.template.js'; - -/** - * The Fluent Field Element - * - * @public - * @remarks - * HTML Element: `` - */ -export const definition = Field.compose({ - name: tagName, - template, - styles, - shadowOptions: { - delegatesFocus: true, - }, -}); +import { tagName } from './field.options.js'; +import { Field } from './field.js'; +import { styles } from './field.styles.js'; +import { template } from './field.template.js'; + +/** + * The Fluent Field Element + * + * @public + * @remarks + * HTML Element: `` + */ +export const definition = await Field.compose({ + name: tagName, + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}); diff --git a/packages/web-components/src/image/define-async.ts b/packages/web-components/src/image/define-async.ts index 870830b404310..a8c56486a37d3 100644 --- a/packages/web-components/src/image/define-async.ts +++ b/packages/web-components/src/image/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './image.definition-async.js'; -import { Image } from './image.js'; - -RenderableFASTElement(Image).defineAsync(definition); +import { definition } from './image.definition-async.js'; +import { Image } from './image.js'; + +await Image.define(definition); diff --git a/packages/web-components/src/image/image.definition-async.ts b/packages/web-components/src/image/image.definition-async.ts index 6b8aafbd2206c..73af516520b43 100644 --- a/packages/web-components/src/image/image.definition-async.ts +++ b/packages/web-components/src/image/image.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './image.options.js'; - -/** - * The async definition configuration for the fluent-image element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './image.options.js'; + +/** + * The async definition configuration for the fluent-image element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/image/image.definition.ts b/packages/web-components/src/image/image.definition.ts index f09a9a1e30ad8..3c14d6aae64e8 100644 --- a/packages/web-components/src/image/image.definition.ts +++ b/packages/web-components/src/image/image.definition.ts @@ -1,17 +1,17 @@ -import { tagName } from './image.options.js'; -import { Image } from './image.js'; -import { template } from './image.template.js'; -import { styles } from './image.styles.js'; - -/** - * The Fluent Image Element - * - * @public - * @remarks - * HTML Element: \ - */ -export const definition = Image.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './image.options.js'; +import { Image } from './image.js'; +import { template } from './image.template.js'; +import { styles } from './image.styles.js'; + +/** + * The Fluent Image Element + * + * @public + * @remarks + * HTML Element: \ + */ +export const definition = await Image.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/label/define-async.ts b/packages/web-components/src/label/define-async.ts index 8ebd43f6a12dd..f9a1fc7604b44 100644 --- a/packages/web-components/src/label/define-async.ts +++ b/packages/web-components/src/label/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './label.definition-async.js'; -import { Label } from './label.js'; - -RenderableFASTElement(Label).defineAsync(definition); +import { definition } from './label.definition-async.js'; +import { Label } from './label.js'; + +await Label.define(definition); diff --git a/packages/web-components/src/label/label.definition-async.ts b/packages/web-components/src/label/label.definition-async.ts index 920ed9210dd56..aedaef4e77515 100644 --- a/packages/web-components/src/label/label.definition-async.ts +++ b/packages/web-components/src/label/label.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './label.options.js'; - -/** - * The async definition configuration for the fluent-label element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './label.options.js'; + +/** + * The async definition configuration for the fluent-label element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/label/label.definition.ts b/packages/web-components/src/label/label.definition.ts index b001a20ff4667..bc0526fdcf457 100644 --- a/packages/web-components/src/label/label.definition.ts +++ b/packages/web-components/src/label/label.definition.ts @@ -1,18 +1,18 @@ -import { tagName } from './label.options.js'; -import { Label } from './label.js'; -import { styles } from './label.styles.js'; -import { template } from './label.template.js'; - -/** - * The Fluent Label Element. - * - * - * @public - * @remarks - * HTML Element: \ - */ -export const definition = Label.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './label.options.js'; +import { Label } from './label.js'; +import { styles } from './label.styles.js'; +import { template } from './label.template.js'; + +/** + * The Fluent Label Element. + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const definition = await Label.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/link/define-async.ts b/packages/web-components/src/link/define-async.ts index 5afa687531622..6e7f7fb3ecc15 100644 --- a/packages/web-components/src/link/define-async.ts +++ b/packages/web-components/src/link/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './link.definition-async.js'; -import { Link } from './link.js'; - -RenderableFASTElement(Link).defineAsync(definition); +import { definition } from './link.definition-async.js'; +import { Link } from './link.js'; + +await Link.define(definition); diff --git a/packages/web-components/src/link/link.definition-async.ts b/packages/web-components/src/link/link.definition-async.ts index 200ff916aa0e9..b1d5973c6f886 100644 --- a/packages/web-components/src/link/link.definition-async.ts +++ b/packages/web-components/src/link/link.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './link.options.js'; - -/** - * The async definition configuration for the fluent-link element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './link.options.js'; + +/** + * The async definition configuration for the fluent-link element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/link/link.definition.ts b/packages/web-components/src/link/link.definition.ts index b2ad1a33c6069..14bf769365d5d 100644 --- a/packages/web-components/src/link/link.definition.ts +++ b/packages/web-components/src/link/link.definition.ts @@ -1,15 +1,15 @@ -import { tagName } from './link.options.js'; -import { Link } from './link.js'; -import { styles } from './link.styles.js'; -import { template } from './link.template.js'; - -/** - * @public - * @remarks - * HTML Element: \ - */ -export const definition = Link.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './link.options.js'; +import { Link } from './link.js'; +import { styles } from './link.styles.js'; +import { template } from './link.template.js'; + +/** + * @public + * @remarks + * HTML Element: \ + */ +export const definition = await Link.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/listbox/define-async.ts b/packages/web-components/src/listbox/define-async.ts index e24628e131794..f42cf51dc34a1 100644 --- a/packages/web-components/src/listbox/define-async.ts +++ b/packages/web-components/src/listbox/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './listbox.definition-async.js'; -import { Listbox } from './listbox.js'; - -RenderableFASTElement(Listbox).defineAsync(definition); +import { definition } from './listbox.definition-async.js'; +import { Listbox } from './listbox.js'; + +await Listbox.define(definition); diff --git a/packages/web-components/src/listbox/listbox.definition-async.ts b/packages/web-components/src/listbox/listbox.definition-async.ts index 1aa451393212d..811f7f54a06a9 100644 --- a/packages/web-components/src/listbox/listbox.definition-async.ts +++ b/packages/web-components/src/listbox/listbox.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './listbox.options.js'; - -/** - * The async definition configuration for the fluent-listbox element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './listbox.options.js'; + +/** + * The async definition configuration for the fluent-listbox element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/listbox/listbox.definition.ts b/packages/web-components/src/listbox/listbox.definition.ts index ba3a23fc73517..b88305e4105d0 100644 --- a/packages/web-components/src/listbox/listbox.definition.ts +++ b/packages/web-components/src/listbox/listbox.definition.ts @@ -1,17 +1,17 @@ -import { tagName } from './listbox.options.js'; -import { Listbox } from './listbox.js'; -import { styles } from './listbox.styles.js'; -import { template } from './listbox.template.js'; - -/** - * The Fluent Listbox Element - * - * @public - * @remarks - * HTML Element: `` - */ -export const definition = Listbox.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './listbox.options.js'; +import { Listbox } from './listbox.js'; +import { styles } from './listbox.styles.js'; +import { template } from './listbox.template.js'; + +/** + * The Fluent Listbox Element + * + * @public + * @remarks + * HTML Element: `` + */ +export const definition = await Listbox.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/menu-button/define-async.ts b/packages/web-components/src/menu-button/define-async.ts index b1e8d80315b70..6ba3900c5929f 100644 --- a/packages/web-components/src/menu-button/define-async.ts +++ b/packages/web-components/src/menu-button/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './menu-button.definition-async.js'; -import { MenuButton } from './menu-button.js'; - -RenderableFASTElement(MenuButton).defineAsync(definition); +import { definition } from './menu-button.definition-async.js'; +import { MenuButton } from './menu-button.js'; + +await MenuButton.define(definition); diff --git a/packages/web-components/src/menu-button/menu-button.definition-async.ts b/packages/web-components/src/menu-button/menu-button.definition-async.ts index 475b17a276d8c..04ce436d92086 100644 --- a/packages/web-components/src/menu-button/menu-button.definition-async.ts +++ b/packages/web-components/src/menu-button/menu-button.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './menu-button.options.js'; - -/** - * The async definition configuration for the fluent-menu-button element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './menu-button.options.js'; + +/** + * The async definition configuration for the fluent-menu-button element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/menu-button/menu-button.definition.ts b/packages/web-components/src/menu-button/menu-button.definition.ts index 2a7adf248deac..251a24e1495cf 100644 --- a/packages/web-components/src/menu-button/menu-button.definition.ts +++ b/packages/web-components/src/menu-button/menu-button.definition.ts @@ -1,15 +1,15 @@ -import { styles } from './menu-button.styles.js'; -import { tagName } from './menu-button.options.js'; -import { MenuButton } from './menu-button.js'; -import { template } from './menu-button.template.js'; - -/** - * @public - * @remarks - * HTML Element: \ - */ -export const definition = MenuButton.compose({ - name: tagName, - template, - styles, -}); +import { styles } from './menu-button.styles.js'; +import { tagName } from './menu-button.options.js'; +import { MenuButton } from './menu-button.js'; +import { template } from './menu-button.template.js'; + +/** + * @public + * @remarks + * HTML Element: \ + */ +export const definition = await MenuButton.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/menu-item/define-async.ts b/packages/web-components/src/menu-item/define-async.ts index 1e12121ec3a63..31fbadde88dbd 100644 --- a/packages/web-components/src/menu-item/define-async.ts +++ b/packages/web-components/src/menu-item/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './menu-item.definition-async.js'; -import { MenuItem } from './menu-item.js'; - -RenderableFASTElement(MenuItem).defineAsync(definition); +import { definition } from './menu-item.definition-async.js'; +import { MenuItem } from './menu-item.js'; + +await MenuItem.define(definition); diff --git a/packages/web-components/src/menu-item/menu-item.definition-async.ts b/packages/web-components/src/menu-item/menu-item.definition-async.ts index 8c786ea119dc6..353296eaa7cac 100644 --- a/packages/web-components/src/menu-item/menu-item.definition-async.ts +++ b/packages/web-components/src/menu-item/menu-item.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './menu-item.options.js'; - -/** - * The async definition configuration for the fluent-menu-item element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './menu-item.options.js'; + +/** + * The async definition configuration for the fluent-menu-item element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/menu-item/menu-item.definition.ts b/packages/web-components/src/menu-item/menu-item.definition.ts index 1c01b3aa143ae..55987eb0b2ec4 100644 --- a/packages/web-components/src/menu-item/menu-item.definition.ts +++ b/packages/web-components/src/menu-item/menu-item.definition.ts @@ -1,15 +1,15 @@ -import { tagName } from './menu-item.options.js'; -import { MenuItem } from './menu-item.js'; -import { styles } from './menu-item.styles.js'; -import { template } from './menu-item.template.js'; - -/** - * @public - * @remarks - * HTML Element: - */ -export const definition = MenuItem.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './menu-item.options.js'; +import { MenuItem } from './menu-item.js'; +import { styles } from './menu-item.styles.js'; +import { template } from './menu-item.template.js'; + +/** + * @public + * @remarks + * HTML Element: + */ +export const definition = await MenuItem.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/menu-list/define-async.ts b/packages/web-components/src/menu-list/define-async.ts index 2af6afeac35ac..a4c65eb2c6066 100644 --- a/packages/web-components/src/menu-list/define-async.ts +++ b/packages/web-components/src/menu-list/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './menu-list.definition-async.js'; -import { MenuList } from './menu-list.js'; - -RenderableFASTElement(MenuList).defineAsync(definition); +import { definition } from './menu-list.definition-async.js'; +import { MenuList } from './menu-list.js'; + +await MenuList.define(definition); diff --git a/packages/web-components/src/menu-list/menu-list.definition-async.ts b/packages/web-components/src/menu-list/menu-list.definition-async.ts index b40b105d34f2b..21920cb1d561c 100644 --- a/packages/web-components/src/menu-list/menu-list.definition-async.ts +++ b/packages/web-components/src/menu-list/menu-list.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './menu-list.options.js'; - -/** - * The async definition configuration for the fluent-menu-list element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './menu-list.options.js'; + +/** + * The async definition configuration for the fluent-menu-list element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/menu-list/menu-list.definition.ts b/packages/web-components/src/menu-list/menu-list.definition.ts index 1266db6ee8a53..32690539f1daf 100644 --- a/packages/web-components/src/menu-list/menu-list.definition.ts +++ b/packages/web-components/src/menu-list/menu-list.definition.ts @@ -1,15 +1,15 @@ -import { tagName } from './menu-list.options.js'; -import { MenuList } from './menu-list.js'; -import { styles } from './menu-list.styles.js'; -import { template } from './menu-list.template.js'; - -/** - * @public - * @remarks - * HTML Element: - */ -export const definition = MenuList.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './menu-list.options.js'; +import { MenuList } from './menu-list.js'; +import { styles } from './menu-list.styles.js'; +import { template } from './menu-list.template.js'; + +/** + * @public + * @remarks + * HTML Element: + */ +export const definition = await MenuList.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/menu/define-async.ts b/packages/web-components/src/menu/define-async.ts index 33dcd84c56e45..8d104a26dbedb 100644 --- a/packages/web-components/src/menu/define-async.ts +++ b/packages/web-components/src/menu/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './menu.definition-async.js'; -import { Menu } from './menu.js'; - -RenderableFASTElement(Menu).defineAsync(definition); +import { definition } from './menu.definition-async.js'; +import { Menu } from './menu.js'; + +await Menu.define(definition); diff --git a/packages/web-components/src/menu/menu.definition-async.ts b/packages/web-components/src/menu/menu.definition-async.ts index d7c3bc1380d14..719cf466346d4 100644 --- a/packages/web-components/src/menu/menu.definition-async.ts +++ b/packages/web-components/src/menu/menu.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './menu.options.js'; - -/** - * The async definition configuration for the fluent-menu element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './menu.options.js'; + +/** + * The async definition configuration for the fluent-menu element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/menu/menu.definition.ts b/packages/web-components/src/menu/menu.definition.ts index 51afcd373e110..dd15e9fc1f34f 100644 --- a/packages/web-components/src/menu/menu.definition.ts +++ b/packages/web-components/src/menu/menu.definition.ts @@ -1,17 +1,17 @@ -import { tagName } from './menu.options.js'; -import { Menu } from './menu.js'; -import { styles } from './menu.styles.js'; -import { template } from './menu.template.js'; - -/** - * The Fluent Menu Element. - * - * @public - * @remarks - * HTML Element: - */ -export const definition = Menu.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './menu.options.js'; +import { Menu } from './menu.js'; +import { styles } from './menu.styles.js'; +import { template } from './menu.template.js'; + +/** + * The Fluent Menu Element. + * + * @public + * @remarks + * HTML Element: + */ +export const definition = await Menu.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/message-bar/define-async.ts b/packages/web-components/src/message-bar/define-async.ts index 1a9fd874a6bfa..8ffe5f99139c8 100644 --- a/packages/web-components/src/message-bar/define-async.ts +++ b/packages/web-components/src/message-bar/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './message-bar.definition-async.js'; -import { MessageBar } from './message-bar.js'; - -RenderableFASTElement(MessageBar).defineAsync(definition); +import { definition } from './message-bar.definition-async.js'; +import { MessageBar } from './message-bar.js'; + +await MessageBar.define(definition); diff --git a/packages/web-components/src/message-bar/message-bar.definition-async.ts b/packages/web-components/src/message-bar/message-bar.definition-async.ts index 21b61d437e87c..bf6dff74d284a 100644 --- a/packages/web-components/src/message-bar/message-bar.definition-async.ts +++ b/packages/web-components/src/message-bar/message-bar.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './message-bar.options.js'; - -/** - * The async definition configuration for the fluent-message-bar element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './message-bar.options.js'; + +/** + * The async definition configuration for the fluent-message-bar element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/message-bar/message-bar.definition.ts b/packages/web-components/src/message-bar/message-bar.definition.ts index 92387f1abb11a..cb1b93cd0993d 100644 --- a/packages/web-components/src/message-bar/message-bar.definition.ts +++ b/packages/web-components/src/message-bar/message-bar.definition.ts @@ -1,21 +1,21 @@ -import { FluentDesignSystem } from '../fluent-design-system.js'; -import { tagName } from './message-bar.options.js'; -import { MessageBar } from './message-bar.js'; -import { styles } from './message-bar.styles.js'; -import { template } from './message-bar.template.js'; - -/** - * The Fluent MessageBar Element definition. - * - * @public - * @remarks - * HTML Element: `` - */ -export const definition = MessageBar.compose({ - name: tagName, - template, - styles, - shadowOptions: { - mode: FluentDesignSystem.shadowRootMode, - }, -}); +import { FluentDesignSystem } from '../fluent-design-system.js'; +import { tagName } from './message-bar.options.js'; +import { MessageBar } from './message-bar.js'; +import { styles } from './message-bar.styles.js'; +import { template } from './message-bar.template.js'; + +/** + * The Fluent MessageBar Element definition. + * + * @public + * @remarks + * HTML Element: `` + */ +export const definition = await MessageBar.compose({ + name: tagName, + template, + styles, + shadowOptions: { + mode: FluentDesignSystem.shadowRootMode, + }, +}); diff --git a/packages/web-components/src/option/define-async.ts b/packages/web-components/src/option/define-async.ts index a8a18ce86fef0..f1d39e63a3fb5 100644 --- a/packages/web-components/src/option/define-async.ts +++ b/packages/web-components/src/option/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './option.definition-async.js'; -import { DropdownOption } from './option.js'; - -RenderableFASTElement(DropdownOption).defineAsync(definition); +import { definition } from './option.definition-async.js'; +import { DropdownOption } from './option.js'; + +await DropdownOption.define(definition); diff --git a/packages/web-components/src/option/option.definition-async.ts b/packages/web-components/src/option/option.definition-async.ts index 0c6a27c210d32..fc5f61d651782 100644 --- a/packages/web-components/src/option/option.definition-async.ts +++ b/packages/web-components/src/option/option.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './option.options.js'; - -/** - * The async definition configuration for the fluent-option element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './option.options.js'; + +/** + * The async definition configuration for the fluent-option element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/option/option.definition.ts b/packages/web-components/src/option/option.definition.ts index 0610f3220e131..beea8af5a18e5 100644 --- a/packages/web-components/src/option/option.definition.ts +++ b/packages/web-components/src/option/option.definition.ts @@ -1,17 +1,17 @@ -import { tagName } from './option.options.js'; -import { DropdownOption } from './option.js'; -import { styles } from './option.styles.js'; -import { template } from './option.template.js'; - -/** - * The Fluent Option Element. - * - * @public - * @remarks - * HTML Element: `` - */ -export const definition = DropdownOption.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './option.options.js'; +import { DropdownOption } from './option.js'; +import { styles } from './option.styles.js'; +import { template } from './option.template.js'; + +/** + * The Fluent Option Element. + * + * @public + * @remarks + * HTML Element: `` + */ +export const definition = await DropdownOption.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/patterns/start-end.ts b/packages/web-components/src/patterns/start-end.ts index 4b206e14b78d5..758ee186d1837 100644 --- a/packages/web-components/src/patterns/start-end.ts +++ b/packages/web-components/src/patterns/start-end.ts @@ -1,77 +1,77 @@ -//Copied from @microsoft/fast-foundation - -import { type CaptureType, html, ref } from '@microsoft/fast-element'; -import { type StaticallyComposableHTML, staticallyCompose } from '../utils/template-helpers.js'; - -/** - * Start configuration options - * @public - */ -export type StartOptions = { - start?: StaticallyComposableHTML; -}; - -/** - * End configuration options - * @public - */ -export type EndOptions = { - end?: StaticallyComposableHTML; -}; - -/** - * Start/End configuration options - * @public - */ -export type StartEndOptions = StartOptions & - EndOptions; - -/** - * A mixin class implementing start slots. - * @public - */ -export class Start { - public start!: HTMLSlotElement; -} - -/** - * A mixin class implementing end slots. - * @public - */ -export class End { - public end!: HTMLSlotElement; -} - -/** - * 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 implements Start, End { - public start!: HTMLSlotElement; - public end!: HTMLSlotElement; -} - -/** - * The template for the end slot. - * For use with {@link StartEnd} - * - * @public - */ -export function endSlotTemplate( - options: EndOptions, -): CaptureType { - return html` ${staticallyCompose(options.end)} `.inline(); -} - -/** - * The template for the start slots. - * For use with {@link StartEnd} - * - * @public - */ -export function startSlotTemplate = StartEnd, TParent = any>( - options: StartOptions, -): CaptureType { - return html` ${staticallyCompose(options.start)} `.inline(); -} +//Copied from @microsoft/fast-foundation + +import { type CaptureType, html, ref } from '@microsoft/fast-element'; +import { type StaticallyComposableHTML, staticallyCompose } from '../utils/template-helpers.js'; + +/** + * Start configuration options + * @public + */ +export type StartOptions = { + start?: StaticallyComposableHTML; +}; + +/** + * End configuration options + * @public + */ +export type EndOptions = { + end?: StaticallyComposableHTML; +}; + +/** + * Start/End configuration options + * @public + */ +export type StartEndOptions = StartOptions & + EndOptions; + +/** + * A mixin class implementing start slots. + * @public + */ +export class Start { + public start!: HTMLSlotElement; +} + +/** + * A mixin class implementing end slots. + * @public + */ +export class End { + public end!: HTMLSlotElement; +} + +/** + * 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 implements Start, End { + public start!: HTMLSlotElement; + public end!: HTMLSlotElement; +} + +/** + * The template for the end slot. + * For use with {@link StartEnd} + * + * @public + */ +export function endSlotTemplate( + options: EndOptions, +): CaptureType { + return html` ${staticallyCompose(options.end)} `.inline(); +} + +/** + * The template for the start slots. + * For use with {@link StartEnd} + * + * @public + */ +export function startSlotTemplate = StartEnd, TParent = any>( + options: StartOptions, +): CaptureType { + return html` ${staticallyCompose(options.start)} `.inline(); +} diff --git a/packages/web-components/src/progress-bar/define-async.ts b/packages/web-components/src/progress-bar/define-async.ts index 2141578a470fd..12a3d19499702 100644 --- a/packages/web-components/src/progress-bar/define-async.ts +++ b/packages/web-components/src/progress-bar/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './progress-bar.definition-async.js'; -import { ProgressBar } from './progress-bar.js'; - -RenderableFASTElement(ProgressBar).defineAsync(definition); +import { definition } from './progress-bar.definition-async.js'; +import { ProgressBar } from './progress-bar.js'; + +await ProgressBar.define(definition); diff --git a/packages/web-components/src/progress-bar/progress-bar.definition-async.ts b/packages/web-components/src/progress-bar/progress-bar.definition-async.ts index 7d71946ce81a5..50b00564531d0 100644 --- a/packages/web-components/src/progress-bar/progress-bar.definition-async.ts +++ b/packages/web-components/src/progress-bar/progress-bar.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './progress-bar.options.js'; - -/** - * The async definition configuration for the fluent-progress-bar element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './progress-bar.options.js'; + +/** + * The async definition configuration for the fluent-progress-bar element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/progress-bar/progress-bar.definition.ts b/packages/web-components/src/progress-bar/progress-bar.definition.ts index 7dc7abc51e6c0..fedea96fc3be6 100644 --- a/packages/web-components/src/progress-bar/progress-bar.definition.ts +++ b/packages/web-components/src/progress-bar/progress-bar.definition.ts @@ -1,18 +1,18 @@ -import { tagName } from './progress-bar.options.js'; -import { ProgressBar } from './progress-bar.js'; -import { styles } from './progress-bar.styles.js'; -import { template } from './progress-bar.template.js'; - -/** - * The Fluent ProgressBar Element. - * - * - * @public - * @remarks - * HTML Element: \ - */ -export const definition = ProgressBar.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './progress-bar.options.js'; +import { ProgressBar } from './progress-bar.js'; +import { styles } from './progress-bar.styles.js'; +import { template } from './progress-bar.template.js'; + +/** + * The Fluent ProgressBar Element. + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const definition = await ProgressBar.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/radio-group/define-async.ts b/packages/web-components/src/radio-group/define-async.ts index 8737512660629..10c3d4608b2dc 100644 --- a/packages/web-components/src/radio-group/define-async.ts +++ b/packages/web-components/src/radio-group/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './radio-group.definition-async.js'; -import { RadioGroup } from './radio-group.js'; - -RenderableFASTElement(RadioGroup).defineAsync(definition); +import { definition } from './radio-group.definition-async.js'; +import { RadioGroup } from './radio-group.js'; + +await RadioGroup.define(definition); diff --git a/packages/web-components/src/radio-group/radio-group.definition-async.ts b/packages/web-components/src/radio-group/radio-group.definition-async.ts index 3fa3396b0d563..2f1e3c19ef77f 100644 --- a/packages/web-components/src/radio-group/radio-group.definition-async.ts +++ b/packages/web-components/src/radio-group/radio-group.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './radio-group.options.js'; - -/** - * The async definition configuration for the fluent-radio-group element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './radio-group.options.js'; + +/** + * The async definition configuration for the fluent-radio-group element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/radio-group/radio-group.definition.ts b/packages/web-components/src/radio-group/radio-group.definition.ts index 766dd6e30766d..e3c89a686d731 100644 --- a/packages/web-components/src/radio-group/radio-group.definition.ts +++ b/packages/web-components/src/radio-group/radio-group.definition.ts @@ -1,18 +1,18 @@ -import { tagName } from './radio-group.options.js'; -import { RadioGroup } from './radio-group.js'; -import { styles } from './radio-group.styles.js'; -import { template } from './radio-group.template.js'; - -/** - * The Fluent RadioGroup Element. - * - * - * @public - * @remarks - * HTML Element: \ - */ -export const definition = RadioGroup.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './radio-group.options.js'; +import { RadioGroup } from './radio-group.js'; +import { styles } from './radio-group.styles.js'; +import { template } from './radio-group.template.js'; + +/** + * The Fluent RadioGroup Element. + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const definition = await RadioGroup.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/radio/define-async.ts b/packages/web-components/src/radio/define-async.ts index fc45bfbe4d5f2..2d674a4c54a01 100644 --- a/packages/web-components/src/radio/define-async.ts +++ b/packages/web-components/src/radio/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './radio.definition-async.js'; -import { Radio } from './radio.js'; - -RenderableFASTElement(Radio).defineAsync(definition); +import { definition } from './radio.definition-async.js'; +import { Radio } from './radio.js'; + +await Radio.define(definition); diff --git a/packages/web-components/src/radio/radio.definition-async.ts b/packages/web-components/src/radio/radio.definition-async.ts index e70fcfbc88574..8e2254262afbf 100644 --- a/packages/web-components/src/radio/radio.definition-async.ts +++ b/packages/web-components/src/radio/radio.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './radio.options.js'; - -/** - * The async definition configuration for the fluent-radio element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './radio.options.js'; + +/** + * The async definition configuration for the fluent-radio element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/radio/radio.definition.ts b/packages/web-components/src/radio/radio.definition.ts index ddd902a5374e6..32670a299bc19 100644 --- a/packages/web-components/src/radio/radio.definition.ts +++ b/packages/web-components/src/radio/radio.definition.ts @@ -1,18 +1,18 @@ -import { tagName } from './radio.options.js'; -import { Radio } from './radio.js'; -import { styles } from './radio.styles.js'; -import { template } from './radio.template.js'; - -/** - * The Fluent Radio Element. - * - * - * @public - * @remarks - * HTML Element: \ - */ -export const definition = Radio.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './radio.options.js'; +import { Radio } from './radio.js'; +import { styles } from './radio.styles.js'; +import { template } from './radio.template.js'; + +/** + * The Fluent Radio Element. + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const definition = await Radio.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/rating-display/define-async.ts b/packages/web-components/src/rating-display/define-async.ts index 905fe90d3f860..055238d494c02 100644 --- a/packages/web-components/src/rating-display/define-async.ts +++ b/packages/web-components/src/rating-display/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './rating-display.definition-async.js'; -import { RatingDisplay } from './rating-display.js'; - -RenderableFASTElement(RatingDisplay).defineAsync(definition); +import { definition } from './rating-display.definition-async.js'; +import { RatingDisplay } from './rating-display.js'; + +await RatingDisplay.define(definition); diff --git a/packages/web-components/src/rating-display/rating-display.definition-async.ts b/packages/web-components/src/rating-display/rating-display.definition-async.ts index 668ab908ec50f..9ed709cc3ad16 100644 --- a/packages/web-components/src/rating-display/rating-display.definition-async.ts +++ b/packages/web-components/src/rating-display/rating-display.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './rating-display.options.js'; - -/** - * The async definition configuration for the fluent-rating-display element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './rating-display.options.js'; + +/** + * The async definition configuration for the fluent-rating-display element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/rating-display/rating-display.definition.ts b/packages/web-components/src/rating-display/rating-display.definition.ts index 0bcc6563aa8f5..f0788b9c38bea 100644 --- a/packages/web-components/src/rating-display/rating-display.definition.ts +++ b/packages/web-components/src/rating-display/rating-display.definition.ts @@ -1,17 +1,17 @@ -import { tagName } from './rating-display.options.js'; -import { RatingDisplay } from './rating-display.js'; -import { styles } from './rating-display.styles.js'; -import { template } from './rating-display.template.js'; - -/** - * The definition for the Fluent Rating Display component. - * - * @public - * @remarks - * HTML Element: `` - */ -export const definition = RatingDisplay.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './rating-display.options.js'; +import { RatingDisplay } from './rating-display.js'; +import { styles } from './rating-display.styles.js'; +import { template } from './rating-display.template.js'; + +/** + * The definition for the Fluent Rating Display component. + * + * @public + * @remarks + * HTML Element: `` + */ +export const definition = await RatingDisplay.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/slider/define-async.ts b/packages/web-components/src/slider/define-async.ts index 537437e857680..a36f2e93b5ac8 100644 --- a/packages/web-components/src/slider/define-async.ts +++ b/packages/web-components/src/slider/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './slider.definition-async.js'; -import { Slider } from './slider.js'; - -RenderableFASTElement(Slider).defineAsync(definition); +import { definition } from './slider.definition-async.js'; +import { Slider } from './slider.js'; + +await Slider.define(definition); diff --git a/packages/web-components/src/slider/slider.definition-async.ts b/packages/web-components/src/slider/slider.definition-async.ts index 52984b1185f69..97eb951746e30 100644 --- a/packages/web-components/src/slider/slider.definition-async.ts +++ b/packages/web-components/src/slider/slider.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './slider.options.js'; - -/** - * The async definition configuration for the fluent-slider element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './slider.options.js'; + +/** + * The async definition configuration for the fluent-slider element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/slider/slider.definition.ts b/packages/web-components/src/slider/slider.definition.ts index 2f6b170624ce1..9eb678493f9af 100644 --- a/packages/web-components/src/slider/slider.definition.ts +++ b/packages/web-components/src/slider/slider.definition.ts @@ -1,18 +1,18 @@ -import { tagName } from './slider.options.js'; -import { Slider } from './slider.js'; -import { styles } from './slider.styles.js'; -import { template } from './slider.template.js'; - -/** - * The Fluent Slider Element. - * - * - * @public - * @remarks - * HTML Element: \ - */ -export const definition = Slider.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './slider.options.js'; +import { Slider } from './slider.js'; +import { styles } from './slider.styles.js'; +import { template } from './slider.template.js'; + +/** + * The Fluent Slider Element. + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const definition = await Slider.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/spinner/define-async.ts b/packages/web-components/src/spinner/define-async.ts index 2a289a586963d..b917f98b0a924 100644 --- a/packages/web-components/src/spinner/define-async.ts +++ b/packages/web-components/src/spinner/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './spinner.definition-async.js'; -import { Spinner } from './spinner.js'; - -RenderableFASTElement(Spinner).defineAsync(definition); +import { definition } from './spinner.definition-async.js'; +import { Spinner } from './spinner.js'; + +await Spinner.define(definition); diff --git a/packages/web-components/src/spinner/spinner.definition-async.ts b/packages/web-components/src/spinner/spinner.definition-async.ts index f581a21c84348..5d61b8dc6ebad 100644 --- a/packages/web-components/src/spinner/spinner.definition-async.ts +++ b/packages/web-components/src/spinner/spinner.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './spinner.options.js'; - -/** - * The async definition configuration for the fluent-spinner element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './spinner.options.js'; + +/** + * The async definition configuration for the fluent-spinner element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/spinner/spinner.definition.ts b/packages/web-components/src/spinner/spinner.definition.ts index 9900088d6f7db..f3f5f3ec9d289 100644 --- a/packages/web-components/src/spinner/spinner.definition.ts +++ b/packages/web-components/src/spinner/spinner.definition.ts @@ -1,15 +1,15 @@ -import { tagName } from './spinner.options.js'; -import { Spinner } from './spinner.js'; -import { styles } from './spinner.styles.js'; -import { template } from './spinner.template.js'; - -/** - * @public - * @remarks - * HTML Element: \ - */ -export const definition = Spinner.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './spinner.options.js'; +import { Spinner } from './spinner.js'; +import { styles } from './spinner.styles.js'; +import { template } from './spinner.template.js'; + +/** + * @public + * @remarks + * HTML Element: \ + */ +export const definition = await Spinner.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/switch/define-async.ts b/packages/web-components/src/switch/define-async.ts index 3a25e9fc595c8..7643690fbfa44 100644 --- a/packages/web-components/src/switch/define-async.ts +++ b/packages/web-components/src/switch/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './switch.definition-async.js'; -import { Switch } from './switch.js'; - -RenderableFASTElement(Switch).defineAsync(definition); +import { definition } from './switch.definition-async.js'; +import { Switch } from './switch.js'; + +await Switch.define(definition); diff --git a/packages/web-components/src/switch/switch.definition-async.ts b/packages/web-components/src/switch/switch.definition-async.ts index 2b1c2c227c4dd..6c9d631d3dd49 100644 --- a/packages/web-components/src/switch/switch.definition-async.ts +++ b/packages/web-components/src/switch/switch.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './switch.options.js'; - -/** - * The async definition configuration for the fluent-switch element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './switch.options.js'; + +/** + * The async definition configuration for the fluent-switch element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/switch/switch.definition.ts b/packages/web-components/src/switch/switch.definition.ts index 31111900c3fbc..855e0916f6d38 100644 --- a/packages/web-components/src/switch/switch.definition.ts +++ b/packages/web-components/src/switch/switch.definition.ts @@ -1,17 +1,17 @@ -import { tagName } from './switch.options.js'; -import { Switch } from './switch.js'; -import { template } from './switch.template.js'; -import { styles } from './switch.styles.js'; - -/** - * The Fluent Switch Element. - * - * @public - * @remarks - * HTML Element: \ - */ -export const definition = Switch.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './switch.options.js'; +import { Switch } from './switch.js'; +import { template } from './switch.template.js'; +import { styles } from './switch.styles.js'; + +/** + * The Fluent Switch Element. + * + * @public + * @remarks + * HTML Element: \ + */ +export const definition = await Switch.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/tab/define-async.ts b/packages/web-components/src/tab/define-async.ts index 0dec63a5aceb0..c6cf488894d10 100644 --- a/packages/web-components/src/tab/define-async.ts +++ b/packages/web-components/src/tab/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './tab.definition-async.js'; -import { Tab } from './tab.js'; - -RenderableFASTElement(Tab).defineAsync(definition); +import { definition } from './tab.definition-async.js'; +import { Tab } from './tab.js'; + +await Tab.define(definition); diff --git a/packages/web-components/src/tab/tab.definition-async.ts b/packages/web-components/src/tab/tab.definition-async.ts index f013d18c43e41..cd88d1348d2dd 100644 --- a/packages/web-components/src/tab/tab.definition-async.ts +++ b/packages/web-components/src/tab/tab.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './tab.options.js'; - -/** - * The async definition configuration for the fluent-tab element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './tab.options.js'; + +/** + * The async definition configuration for the fluent-tab element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/tab/tab.definition.ts b/packages/web-components/src/tab/tab.definition.ts index b44c105640455..5eaafb0096e72 100644 --- a/packages/web-components/src/tab/tab.definition.ts +++ b/packages/web-components/src/tab/tab.definition.ts @@ -1,10 +1,10 @@ -import { tagName } from './tab.options.js'; -import { Tab } from './tab.js'; -import { template } from './tab.template.js'; -import { styles } from './tab.styles.js'; - -export const definition = Tab.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './tab.options.js'; +import { Tab } from './tab.js'; +import { template } from './tab.template.js'; +import { styles } from './tab.styles.js'; + +export const definition = await Tab.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/tablist/define-async.ts b/packages/web-components/src/tablist/define-async.ts index 34ed996aa2a1b..c137c0d0ca80b 100644 --- a/packages/web-components/src/tablist/define-async.ts +++ b/packages/web-components/src/tablist/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './tablist.definition-async.js'; -import { Tablist } from './tablist.js'; - -RenderableFASTElement(Tablist).defineAsync(definition); +import { definition } from './tablist.definition-async.js'; +import { Tablist } from './tablist.js'; + +await Tablist.define(definition); diff --git a/packages/web-components/src/tablist/tablist.definition-async.ts b/packages/web-components/src/tablist/tablist.definition-async.ts index eee672e6aadef..815d9ccd1d6c4 100644 --- a/packages/web-components/src/tablist/tablist.definition-async.ts +++ b/packages/web-components/src/tablist/tablist.definition-async.ts @@ -1,15 +1,16 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './tablist.options.js'; - -/** - * The async definition configuration for the fluent-tablist element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './tablist.options.js'; + +/** + * The async definition configuration for the fluent-tablist element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ export const definition: PartialFASTElementDefinition = { name: tagName, - templateOptions: 'defer-and-hydrate', -}; + template: declarativeTemplate(), +}; diff --git a/packages/web-components/src/tablist/tablist.definition.ts b/packages/web-components/src/tablist/tablist.definition.ts index a8995f19ac787..1bbbb5d704c08 100644 --- a/packages/web-components/src/tablist/tablist.definition.ts +++ b/packages/web-components/src/tablist/tablist.definition.ts @@ -1,15 +1,15 @@ -import { tagName } from './tablist.options.js'; -import { Tablist } from './tablist.js'; -import { template } from './tablist.template.js'; -import { styles } from './tablist.styles.js'; - -/** - * @public - * @remarks - * HTML Element: \ - */ -export const definition = Tablist.compose({ - name: tagName, - template, - styles, -}); +import { tagName } from './tablist.options.js'; +import { Tablist } from './tablist.js'; +import { template } from './tablist.template.js'; +import { styles } from './tablist.styles.js'; + +/** + * @public + * @remarks + * HTML Element: \ + */ +export const definition = await Tablist.compose({ + name: tagName, + template, + styles, +}); diff --git a/packages/web-components/src/tablist/tablist.stories.ts b/packages/web-components/src/tablist/tablist.stories.ts index 94b7a0125e408..c6cf026599367 100644 --- a/packages/web-components/src/tablist/tablist.stories.ts +++ b/packages/web-components/src/tablist/tablist.stories.ts @@ -1,171 +1,171 @@ -import { html, ref, when } from '@microsoft/fast-element'; -import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js'; -import { getStorybookHelpers } from '../../.storybook/wc-toolkit-helpers.js'; -import type { Tablist as FluentTablist } from './tablist.js'; -import { TablistAppearance as TablistAppearanceValues, TablistOrientation, TablistSize } from './tablist.options.js'; - -type Story = StoryObj; -const { argTypes } = getStorybookHelpers('fluent-tablist'); - -const storyTemplate = html>` -
- - First Tab - - ${when( - story => story.hasStartSlot, - html` - - `, - )} - Second Tab - - Third Tab - Fourth Tab - -
-
-`; - -export default { - title: 'Components/Tablist', - render: renderComponent(storyTemplate), - argTypes: { - ...argTypes, - ids: { table: { disable: true } }, - hasStartSlot: { table: { disable: true } }, - }, -} as Meta; - -export const Default: Story = {}; - -export const HorizontalWithStartSlot: Story = { - args: { - hasStartSlot: true, - }, -}; - -export const VerticalOrientation: Story = { - args: { - orientation: TablistOrientation.vertical, - }, - decorators: [ - Story => { - const story = Story() as HTMLDivElement; - story.style.flexDirection = 'row'; - return story; - }, - ], -}; - -export const VerticalOrientationWithStartSlot: Story = { - args: { - orientation: TablistOrientation.vertical, - hasStartSlot: true, - }, - decorators: [ - Story => { - const story = Story() as HTMLDivElement; - story.style.flexDirection = 'row'; - return story; - }, - ], -}; - -export const Disabled: Story = { - args: { - disabled: true, - }, -}; - -export const ActiveId: Story = { - args: { - activeid: 'third-tab', - ids: ['first-tab', 'second-tab', 'third-tab', 'fourth-tab'], - }, -}; - -export const SubtleAppearance: Story = { - args: { - appearance: 'subtle', - }, -}; - -export const SmallSize: Story = { - args: { - size: 'small', - }, -}; - -export const LargeSize: Story = { - args: { - size: 'small', - }, -}; - -export const SmallSizeVerticalOrientation: Story = { - args: { - orientation: TablistOrientation.vertical, - size: 'small', - }, - decorators: [ - Story => { - const story = Story() as HTMLDivElement; - story.style.flexDirection = 'row'; - return story; - }, - ], -}; - -export const LargeSizeVerticalOrientation: Story = { - args: { - orientation: TablistOrientation.vertical, - size: 'large', - }, - decorators: [ - Story => { - const story = Story() as HTMLDivElement; - story.style.flexDirection = 'row'; - return story; - }, - ], -}; - -export const AutoPanelAssociation: Story = { - render: renderComponent(html>` -
- - First Tab - Second Tab - Third Tab - Fourth Tab - -
First panel
-
Second panel
-
Third panel
-
Fourth panel
-
- `), -}; +import { html, ref, when } from '@microsoft/fast-element'; +import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js'; +import { getStorybookHelpers } from '../../.storybook/wc-toolkit-helpers.js'; +import type { Tablist as FluentTablist } from './tablist.js'; +import { TablistAppearance as TablistAppearanceValues, TablistOrientation, TablistSize } from './tablist.options.js'; + +type Story = StoryObj; +const { argTypes } = getStorybookHelpers('fluent-tablist'); + +const storyTemplate = html>` +
+ + First Tab + + ${when>( + story => story.hasStartSlot, + html` + + `, + )} + Second Tab + + Third Tab + Fourth Tab + +
+
+`; + +export default { + title: 'Components/Tablist', + render: renderComponent(storyTemplate), + argTypes: { + ...argTypes, + ids: { table: { disable: true } }, + hasStartSlot: { table: { disable: true } }, + }, +} as Meta; + +export const Default: Story = {}; + +export const HorizontalWithStartSlot: Story = { + args: { + hasStartSlot: true, + }, +}; + +export const VerticalOrientation: Story = { + args: { + orientation: TablistOrientation.vertical, + }, + decorators: [ + Story => { + const story = Story() as HTMLDivElement; + story.style.flexDirection = 'row'; + return story; + }, + ], +}; + +export const VerticalOrientationWithStartSlot: Story = { + args: { + orientation: TablistOrientation.vertical, + hasStartSlot: true, + }, + decorators: [ + Story => { + const story = Story() as HTMLDivElement; + story.style.flexDirection = 'row'; + return story; + }, + ], +}; + +export const Disabled: Story = { + args: { + disabled: true, + }, +}; + +export const ActiveId: Story = { + args: { + activeid: 'third-tab', + ids: ['first-tab', 'second-tab', 'third-tab', 'fourth-tab'], + }, +}; + +export const SubtleAppearance: Story = { + args: { + appearance: 'subtle', + }, +}; + +export const SmallSize: Story = { + args: { + size: 'small', + }, +}; + +export const LargeSize: Story = { + args: { + size: 'small', + }, +}; + +export const SmallSizeVerticalOrientation: Story = { + args: { + orientation: TablistOrientation.vertical, + size: 'small', + }, + decorators: [ + Story => { + const story = Story() as HTMLDivElement; + story.style.flexDirection = 'row'; + return story; + }, + ], +}; + +export const LargeSizeVerticalOrientation: Story = { + args: { + orientation: TablistOrientation.vertical, + size: 'large', + }, + decorators: [ + Story => { + const story = Story() as HTMLDivElement; + story.style.flexDirection = 'row'; + return story; + }, + ], +}; + +export const AutoPanelAssociation: Story = { + render: renderComponent(html>` +
+ + First Tab + Second Tab + Third Tab + Fourth Tab + +
First panel
+
Second panel
+
Third panel
+
Fourth panel
+
+ `), +}; diff --git a/packages/web-components/src/text-input/define-async.ts b/packages/web-components/src/text-input/define-async.ts index 05fc2acae5119..62b6700e738d9 100644 --- a/packages/web-components/src/text-input/define-async.ts +++ b/packages/web-components/src/text-input/define-async.ts @@ -1,5 +1,4 @@ -import { RenderableFASTElement } from '@microsoft/fast-html'; -import { definition } from './text-input.definition-async.js'; -import { TextInput } from './text-input.js'; - -RenderableFASTElement(TextInput).defineAsync(definition); +import { definition } from './text-input.definition-async.js'; +import { TextInput } from './text-input.js'; + +await TextInput.define(definition); diff --git a/packages/web-components/src/text-input/text-input.definition-async.ts b/packages/web-components/src/text-input/text-input.definition-async.ts index f95e17eacc7b3..66a0591b16010 100644 --- a/packages/web-components/src/text-input/text-input.definition-async.ts +++ b/packages/web-components/src/text-input/text-input.definition-async.ts @@ -1,18 +1,19 @@ -import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; -import { tagName } from './text-input.options.js'; - -/** - * The async definition configuration for the fluent-text-input element. - * - * @public - * @remarks - * This is used in server-side rendering (SSR) scenarios where the template - * is provided as a deferred option to be hydrated later. - */ -export const definition: PartialFASTElementDefinition = { - name: tagName, - templateOptions: 'defer-and-hydrate', - shadowOptions: { - delegatesFocus: true, - }, -}; +import type { PartialFASTElementDefinition } from '@microsoft/fast-element'; +import { declarativeTemplate } from '@microsoft/fast-element/declarative.js'; +import { tagName } from './text-input.options.js'; + +/** + * The async definition configuration for the fluent-text-input element. + * + * @public + * @remarks + * This is used in server-side rendering (SSR) scenarios where the template + * is resolved from its SSR `` by the declarative renderer. + */ +export const definition: PartialFASTElementDefinition = { + name: tagName, + template: declarativeTemplate(), + shadowOptions: { + delegatesFocus: true, + }, +}; diff --git a/packages/web-components/src/text-input/text-input.definition.ts b/packages/web-components/src/text-input/text-input.definition.ts index a540c31d9014b..0cbb33f093d2a 100644 --- a/packages/web-components/src/text-input/text-input.definition.ts +++ b/packages/web-components/src/text-input/text-input.definition.ts @@ -1,20 +1,20 @@ -import { tagName } from './text-input.options.js'; -import { TextInput } from './text-input.js'; -import { styles } from './text-input.styles.js'; -import { template } from './text-input.template.js'; - -/** - * The Fluent TextInput Element definition. - * - * @public - * @remarks - * HTML Element: `` - */ -export const definition = TextInput.compose({ - name: tagName, - template, - styles, - shadowOptions: { - delegatesFocus: true, - }, -}); +import { tagName } from './text-input.options.js'; +import { TextInput } from './text-input.js'; +import { styles } from './text-input.styles.js'; +import { template } from './text-input.template.js'; + +/** + * The Fluent TextInput Element definition. + * + * @public + * @remarks + * HTML Element: `` + */ +export const definition = await TextInput.compose({ + name: tagName, + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}); diff --git a/packages/web-components/src/text-input/text-input.template.html b/packages/web-components/src/text-input/text-input.template.html index 838b1bd2c548a..78b247bb3853f 100644 --- a/packages/web-components/src/text-input/text-input.template.html +++ b/packages/web-components/src/text-input/text-input.template.html @@ -1,5 +1,5 @@ -