John Kreitlow

This commit delivers a **bug fix** for the **`@fluentui/web-components` `Avatar` component**, resolving an issue where empty text nodes could be inadvertently rendered within its default slot. The **fix** involves implementing new logic in `avatar.base.ts` to programmatically identify and remove these extraneous text nodes, ensuring cleaner rendering and preventing potential layout problems. This includes adding a `ref` directive to the `avatar.template.ts` for programmatic slot access and correcting a `this` context issue in the `generateInitials` method. New test cases have been added to `avatar.spec.ts` to validate the improved rendering behavior, and the `web-components.api.md` documentation has been updated to reflect these changes.

This commit delivers a **bug fix** for the **`Menu` component** within the **`@fluentui-web-components` package**. It **ensures proper menu initialization** by modifying the `connectedCallback` to utilize `queueMicrotask` instead of `Updates.enqueue`. This change resolves potential timing-related issues, guaranteeing that the **`Menu` component** initializes reliably and consistently, thereby preventing incorrect behavior or rendering.

This commit performs a significant **infrastructure update** by bumping the minimum required **Node.js version from 20 to 22**, a crucial **maintenance** step to align with the latest LTS release. This change broadly impacts the **development environment**, updating **dev container configurations** and **Azure DevOps and GitHub Actions workflows** to utilize Node.js 22 for all automated checks, builds, and deployments. Numerous **TypeScript configurations** across various applications and scripts were adjusted to ensure compatibility, and **E2E test scripts** for components like `chart-web-components` and `web-components` were updated to handle Node.js 22's experimental options for Playwright. Additionally, project documentation was updated to reflect the new Node.js requirement. This ensures the entire project ecosystem operates on a modern, supported runtime, affecting all developers and automated processes.

This commit provides a **bug fix** for the **web-components** package, enhancing the robustness of the `requestIdleCallback` utility. It updates the `requestIdleCallback` implementation to correctly align with the `IdleDeadline` type and, critically, modifies the `waitForConnectedDescendants` function. This modification ensures that the system accurately queries for and waits on custom elements that are not yet defined, preventing potential timing or rendering issues for **web components** relying on deferred work. Additionally, a minor **refactoring** was applied to `listbox.ts` to improve code clarity within the `slotchangeHandler`.

This commit primarily **refactors the `Dropdown` and `Listbox` web components** within the `web-components` package to enhance their robustness and adherence to web standards. It transitions from manual slot assignment and `connectedCallback` event handling to leveraging **`slotchange` events** for dynamically managing slotted elements like options and controls. Concurrently, this update includes a **bug fix** for the **`Option` component**, ensuring that the form value is correctly unset when a previously selected option becomes disabled. The changes also encompass updated API documentation, improved Storybook examples, and the introduction of new `requestIdleCallback` utility functions.

This commit introduces a **robust fallback positioning mechanism** for the **`Dropdown` web component's listbox** within `@fluentui-web-components`. It **fixes** issues where the dropdown might not position correctly in browsers without full CSS anchor positioning support or when rendered inside overflowing scroll containers, by implementing event listeners for scroll and resize. Styles for `dropdown.styles.ts` and `listbox.styles.ts` are updated to support this new logic and define necessary CSS variables, ensuring the dropdown consistently appears in the correct location. A new story in `dropdown.stories.ts` was added to demonstrate this improved behavior, enhancing the reliability and user experience of the **`Dropdown` component**.

This **maintenance chore** refines the **Storybook demonstrations** for several **web components** by **removing extraneous validation or informational message content**. Specifically, it targets the "Required" stories for the `Checkbox`, `Dropdown`, `Radio Group`, and `Switch` components, deleting `messageTemplate` definitions, message slot content, message-related imports, and associated arguments from their respective `*.stories.ts` files. This **cleanup** ensures that the Storybook examples accurately reflect the intended presentation of "Required" states without unnecessary message fields, thereby improving the clarity and focus of these component stories. The core functionality of the components remains unaffected, with changes limited to their **development-time documentation**.

This commit delivers a series of **bug fixes** and **refactorings** to various **Fluent UI web components**, primarily enhancing form field interactions and resolving Storybook inconsistencies. Key changes include preventing inadvertent checkbox state changes during form submission via space key presses and refactoring event listener management in `field.base.ts` using `connectedCallback` and `disconnectedCallback`. It also improves **accessibility** by adding `aria-hidden` to required field asterisks, introduces new styling for required fields, and updates Storybook examples for better clarity and validation demonstrations. These updates collectively improve the **robustness, accessibility, and consistency** of form elements across the web components library.

This commit **fixes a bug** in the **Fluent UI web components dialog** by removing `event.preventDefault()` from its `clickHandler`. Previously, this prevented interactive elements within the dialog content from functioning correctly, making buttons and inputs unresponsive to user clicks. This **bug fix** ensures that users can now properly interact with all elements inside a `<fluent-dialog>`. A new test case was added to `dialog.spec.ts` to validate this behavior, and the `dialog.stories.ts` was updated to demonstrate the improved interactivity.

This commit delivers a **bug fix** for the **`text-input` web component** within the Fluent UI web components package. It resolves an issue where the `setValidity` method could fail if the underlying control was not yet available, leading to runtime errors. A new `controlChanged` method is introduced, and the `setValidity` implementation is updated to ensure it only executes when the control is properly initialized, thereby improving the component's **robustness and reliability**. The API documentation for `BaseTextInput` is also updated to reflect these changes.

This commit **fixes a bug** in the **Fluent UI Web Components Dropdown** where validation messages were not displaying correctly. It **enhances** the component's validation capabilities by implementing standard HTML form validation APIs, including `checkValidity()`, `reportValidity()`, and `setValidity()`, ensuring proper message display when the component is required but lacks a value. This **maintenance and feature work** improves the reliability and standard compliance of the `Dropdown` component's validation system. The change also includes **updated API documentation** for `dropdown.base.ts` and a **new Storybook story** to demonstrate the corrected validation behavior.

This commit performs a **maintenance chore** by **removing unused form-associated modules** from the **Fluent UI `web-components` package**. This cleanup effort helps reduce the overall bundle size and complexity of the component library. The change is internal and does not affect the public API or behavior of existing web components.

This commit **fixes** a bug in the **Fluent UI Web Components** to ensure the **Dropdown component** reliably emits a `change` event. It modifies event handlers (`handleInput`, `handleClick`, `handleKeydown`) and the `selectOption` method in `dropdown.ts` to emit this event exclusively when the dropdown's value is updated by user interaction, such as blur, click, or Enter key, and not when set programmatically. A related adjustment in `listbox.ts` prevents its `clickHandler` from interfering when used within a dropdown. New tests in `dropdown.spec.ts` validate this behavior, providing a more predictable and standard eventing model for applications consuming the **Dropdown component**.

This commit delivers a **bug fix** for the **Fluent UI Dropdown web component**, resolving an issue where the dropdown would open but then immediately close when activated using the space key. The fix involves adding `e.preventDefault()` within the keydown handler in `packages/web-components/src/dropdown/dropdown.ts` to prevent the default browser action that caused the premature closure. A new test case has also been introduced in `dropdown.spec.ts` to ensure the correct behavior of the dropdown when interacted with via the space key. This change significantly improves the **usability and accessibility** of the **Dropdown component** for keyboard navigation within the **web-components** package.

This commit introduces **three new web components** to the `@fluentui-web-components` package: `Dropdown`, `Listbox`, and `Option`. This **new capability** provides fundamental UI elements for selection and list presentation, complete with their core logic, styling, templates, and comprehensive Playwright tests. The implementation includes updated API documentation, new Storybook stories demonstrating various configurations, and several new or refactored utility functions for language detection, feature support, and unique ID generation. This significantly enhances the library's form and interaction capabilities, offering developers robust, accessible, and well-tested components for building complex user interfaces.

This commit implements a **chore** to improve the **build and test setup** for **Fluent UI Web Components**. It ensures that the `@fluentui/tokens` package is built prior to executing **end-to-end (e2e) tests**, preventing potential test failures due to unresolved dependencies. Specifically, a module alias is added to `packages/web-components/test/harness/vite.config.ts` to correctly resolve the tokens package within the test harness. This change enhances the reliability of the **web components testing infrastructure** by guaranteeing that all necessary build artifacts are available and correctly referenced during test execution.