Zacky Ma

This commit introduces **Server-Side Rendering (SSR) compatibility** for the **`RatingDisplay` web component** within `packages/web-components`. It achieves this by fundamentally **refactoring** the component's icon rendering mechanism, transitioning from direct SVG generation to a CSS-driven approach utilizing custom properties, mask images, and linear gradients. This significant change impacts the `BaseRatingDisplay` class, its styles (`rating-display.styles.ts`), and template (`rating-display.template.ts`), along with updated tests and API documentation. As a result, applications using the `RatingDisplay` will benefit from improved initial page load performance and better SEO due to server-side pre-rendering.

This commit introduces a significant **refactoring** within the **`@fluentui-web-components`** package, specifically impacting the **`Tree`** and **`TreeItem`** components. It replaces the reliance on the `slotted` decorator and directive with the native `slotchange` event for more robust and efficient management of child elements within slots. New methods, such as `handleDefaultSlotChange` in `tree.base.ts` and `handleItemSlotChange` in `tree-item.base.ts`, are implemented to process these slot changes. The component templates are updated to utilize `ref` and `@slotchange`, and the API documentation is adjusted to reflect these internal architectural improvements. This change enhances the internal mechanism for detecting and reacting to slot content modifications.

This commit introduces **Server-Side Rendering (SSR) compatibility** for the **`Tree`** and **`TreeItem`** web components within `@fluentui-web-components`. This **feature enhancement** involved **refactoring** their templates to correctly handle child elements using `slotted` and adjusting `tabIndex` management in `tree-item.base.ts` and `tree.base.ts` for proper hydration. Lifecycle methods like `connectedCallback` were added or modified, and `sizeChanged` and `appearanceChanged` methods were updated to `protected` visibility. Minor styling adjustments and accessibility improvements, such as adding `aria-hidden` to chevron icons, were also included. This work enables these **UI components** to be pre-rendered on the server, significantly improving initial page load performance and SEO for consuming applications.

This commit introduces a **fix** to enhance **Server-Side Rendering (SSR) compatibility** for the **`tablist` component** within the **Fluent UI Web Components** library. It specifically refines the method for checking the presence of a `start` slot in `tablist.base.ts`, impacting the `setTabs` symbol. This **compatibility improvement** ensures that the `tablist` component renders correctly and consistently in SSR environments, preventing potential display issues related to incorrect slot detection.

This commit **fixes** a potential issue in the **Fluent UI Web Components** by **refactoring type checks** within the **`menu-list`** component. It introduces a new predicate function, `isMenuItem`, in `menu-item.options.ts` to safely identify menu items without relying on `instanceof`. The `menu-list.ts` component's `connectedCallback` and `isMenuItemElement` methods are updated to utilize this new predicate, thereby **removing problematic `instanceof` checks**. This **bug fix** enhances the robustness and compatibility of the **`menu-list`** component, preventing potential errors in environments where `instanceof` might behave unexpectedly.

This commit delivers a **bug fix** to enhance **Server-Side Rendering (SSR) compatibility** for the **Accordion component** in the `web-components` package. Specifically, it **removes an unnecessary `instanceof BaseAccordionItem` type check** from the `connectedCallback` method in `accordion.ts`. This adjustment prevents potential issues when the component is rendered outside of a traditional browser environment, ensuring more robust behavior. A related **test refactoring** was also performed, moving the `expand-mode` attribute in the accordion's test setup.

This commit introduces **Server-Side Rendering (SSR) support** for several **Fluent UI web components**, specifically `dialog`, `drawer`, `field`, and `textarea`. It involves significant **refactoring** to dynamically manage attributes like `role` and `aria-modal` for `dialog` and `drawer`, ensuring proper accessibility and rendering in SSR environments. For `field` and `textarea`, the changes focus on robustly handling slotted content and attribute changes, including the use of `MutationObserver` in `field.base.ts` to monitor input attributes. This **feature** enhancement improves the overall compatibility and reliability of these components when used in pre-rendered applications.

This commit introduces **new tests** across numerous **Fluent UI Web Components** to verify their proper instantiation. Specifically, it adds tests to ensure that each component, such as `fluent-accordion`, `fluent-button`, and `fluent-dialog`, can be successfully created using the standard `document.createElement()` method without throwing any errors. This **test enhancement** improves the overall **robustness** and **reliability** of the component library. By expanding **test coverage** for programmatic component creation, it guarantees that developers can confidently instantiate these UI elements without unexpected runtime issues.

This commit provides a **bug fix** for the **Fluent UI Web Components button component**, specifically addressing an issue related to its **disabled state handling**. It prevents the `tabindex` attribute from being set prematurely before the button element is fully connected to the DOM, which could lead to incorrect initialization. The fix modifies the `disabledChanged` and `connectedCallback` methods in `button.base.ts` to ensure proper timing. This guarantees **correct button initialization** and improves the overall robustness and accessibility of the component.

This commit **fixes** issues within the **Fluent UI web components Switch component**, enhancing its **accessibility and usability**. It **removes unnecessary `tabindex` logic** from the switch template, streamlining its keyboard navigation behavior. Additionally, the CSS in `switch.styles.ts` is adjusted to apply `cursor: pointer` only when the switch host element is enabled, providing more accurate visual feedback. This work collectively improves the interactive experience and correctness of the **Switch component**.

This commit delivers a **bug fix** for the **Fluent UI web components `Slider` component**, resolving an issue where **vertical sliders** exhibited an inverted value compared to their visual position in **Right-to-Left (RTL) mode**. The core fix in `packages/web-components/src/slider/slider.ts` **adjusts the calculation of slider position and value** (specifically `updatePosition` and `getNewValue`) to correctly apply directionality only for horizontal orientations. This ensures that **vertical sliders** now behave as expected in **RTL locales**, providing an accurate representation of their value. Additionally, new **test cases** have been introduced in `packages/web-components/src/slider/slider.spec.ts` to validate the correct pointer event coordinates for both horizontal and vertical sliders in RTL, safeguarding against future regressions.

This commit **fixes an accessibility issue** within the **Fluent UI web components `radio-group` component**, ensuring that an initially checked radio button is properly **focusable via keyboard navigation**. Previously, if a `radio-group` was rendered with a pre-selected radio but no explicit `value` attribute on the group itself, the checked radio would not receive `tabindex=0`, making it inaccessible to keyboard users. The **bug fix** adjusts the `connectedCallback` logic in `packages/web-components/src/radio-group/radio-group.ts` to correctly assign focusability. A new test case in `packages/web-components/src/radio-group/radio-group.spec.ts` validates this behavior, significantly improving the user experience for keyboard-only users interacting with `radio-group` elements.

This commit **refactors** the internal management of `tabIndex` for disabled interactive elements within the **`@fluentui/web-components` library**. The logic for dynamically setting `tabIndex` based on the `disabled` state has been centralized into a new `disabledChanged` method within the `BaseButton` and `BaseCheckbox` classes, improving consistency and maintainability. Additionally, the `RadioGroup` component now explicitly casts the `disabled` property for child radio elements, and the API documentation for `BaseButton` and `Radio` has been updated to reflect these changes. This ensures correct keyboard navigation and accessibility behavior for disabled components across the library.

This commit delivers a **bug fix** for the **Fluent UI web components** `progress-bar` to address incorrect rendering when its `value` property is missing or invalid, specifically observed in Firefox and Safari. The change updates the internal logic within `packages/web-components/src/progress-bar/progress-bar.base.ts` to ensure the progress bar's value is a valid number before processing, preventing visual glitches. This **maintenance** work improves the robustness and cross-browser compatibility of the `progress-bar` component. A new test case has also been added to `packages/web-components/src/progress-bar/progress-bar.spec.ts` to validate the indicator width under these conditions.

This commit **refactors** the **`ProgressBar` component** within **`@fluentui-web-components`** to enhance performance and maintainability. It shifts the progress indicator width calculation from a JavaScript-driven `percentComplete` property to leverage the CSS `attr()` function, conditionally applied via `@supports` rules in `progress-bar.styles.ts`. This change simplifies the component's template by removing inline width styles and updates the `progress-bar.spec.ts` tests to directly verify the indicator width. The API documentation for `BaseProgressBar` has also been updated to reflect these internal implementation improvements.

This commit delivers a **bug fix** to significantly improve **sub-menu positioning** within the **Fluent UI Web Components** library. It specifically updates the CSS `position-try-fallbacks` property in `packages/web-components/src/menu-item/menu-item.styles.ts` to include `block-start` and `block-end` values. This modification ensures more reliable and visually consistent fallback behavior for sub-menus, preventing them from being misaligned or cut off in various layout scenarios. The change directly impacts the rendering of interactive menus, providing a more robust and user-friendly experience for components utilizing the `menu-item` styling.

This commit **fixes a bug** within the **Web Components Menu component's focus management**. It modifies the `toggle` event handler in `menu.ts` to ensure focus is only directed to the menu list when the menu is actively open. This **improves accessibility and user experience** by preventing unintended focus shifts or interactions when the menu is closed, leading to more predictable UI behavior.

This commit delivers a **bug fix** for the **Fluent UI Web Components `TabList` component**, addressing an issue where the `change` event was emitted redundantly. Specifically, the `tablist.base.ts` file is updated to ensure the `change` event only fires when the active tab's ID (`activeid`) has genuinely changed, rather than on every interaction. This prevents unnecessary event emissions, thereby improving the efficiency and correctness of event handling for applications consuming the `TabList` component.

This commit introduces a **new feature** to the **`tablist` web component** within `@fluentui-web-components` that automatically associates tab panels with their respective tabs. It implements logic in `tablist.ts` to manage the `hidden` state and `role` attributes of tab panels based on the `aria-controls` attribute, ensuring only the active panel is visible and correctly identified for accessibility. This enhancement simplifies the development of tabbed interfaces by automating a crucial part of their behavior, improving **usability and accessibility**. The change includes new **tests** to verify the association and a **Storybook story** to demonstrate its usage.

This commit **fixes a bug** in the **Fluent UI web components Slider component** where keyboard interactions were not functional after a user clicked on the slider's thumb. It **refactors the event handling** within `slider.ts` by removing `setupListeners` and `keypressHandler`, introducing a new `handleKeydown` method to manage keyboard events and adjusting pointer event handler return types. A new test case was added to `slider.spec.ts` to verify this corrected behavior, and the API documentation for the `Slider` component was updated to reflect these changes. This significantly improves the **accessibility and usability** of the `Slider` component, ensuring consistent keyboard navigation and control for all users.