[pull] master from microsoft:master

change/@fluentui-react-color-picker-23cd9249-19ec-4f83-b918-1fbfa29c5119.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use nullish fallback in adjustChannel so a channel whose value is 0 resolves to its own action instead of hue's",
+  "packageName": "@fluentui/react-color-picker",
+  "email": "array.knight@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-headless-components-preview-bebba5c3-9ce1-42db-b357-0a5b55eec41e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: renderTooltip applies state.arrowClassName to the arrow element instead of silently discarding it",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "array.knight@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-color-picker/library/src/utils/adjustChannel.test.ts

@@ -38,4 +38,18 @@ describe('adjustChannel', () => {
     expect(adjustChannel('saturation', actions)).toBe('saturationAction');
     expect(adjustChannel('value', actions)).toBe('valueAction');
   });
+
+  // Regression test for https://github.com/microsoft/fluentui/issues/36646 — the previous `||`
+  // fallback treated falsy channel values (e.g. 0) as missing and returned the hue action instead.
+  it('should return falsy channel values instead of falling back to the hue action', () => {
+    const numericActions: ChannelActions<number> = {
+      hue: 120,
+      saturation: 0,
+      value: 0,
+    };
+
+    expect(adjustChannel('saturation', numericActions)).toBe(0);
+    expect(adjustChannel('value', numericActions)).toBe(0);
+    expect(adjustChannel('hue', numericActions)).toBe(120);
+  });
 });

packages/react-components/react-color-picker/library/src/utils/adjustChannel.ts

@@ -29,5 +29,5 @@ export type ChannelActions<T> = {
  * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.
  */
 export function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {
-  return actions[channel] || actions.hue;
+  return actions[channel] ?? actions.hue;
 }

packages/react-components/react-headless-components-preview/library/src/components/Tooltip/Tooltip.test.tsx

@@ -4,6 +4,9 @@ import { resetIdsForTests } from '@fluentui/react-utilities';
 import { isConformant } from '../../testing/isConformant';
 import type { IsConformantOptions } from '@fluentui/react-conformance';
 import { Tooltip } from './Tooltip';
+import { useTooltip } from './useTooltip';
+import { renderTooltip } from './renderTooltip';
+import type { TooltipProps } from './Tooltip.types';
 
 export const getTooltipElement: IsConformantOptions['getTargetElement'] = () => {
   return screen.queryByRole('tooltip') as HTMLElement;
@@ -111,6 +114,26 @@ describe('Tooltip', () => {
     expect(screen.getByRole('tooltip').querySelector('[data-arrow]')).not.toBeNull();
   });
 
+  // Regression test for https://github.com/microsoft/fluentui/issues/36650 — renderTooltip dropped
+  // state.arrowClassName, so a styled layer setting it between useTooltip and renderTooltip never
+  // reached the arrow element.
+  it('applies state.arrowClassName to the arrow element', () => {
+    const StyledTooltip = (props: TooltipProps) => {
+      const state = useTooltip(props);
+      state.arrowClassName = 'custom-arrow-class';
+      return renderTooltip(state);
+    };
+
+    render(
+      <StyledTooltip content="Styled arrow tooltip" relationship="label" visible withArrow>
+        <button>Trigger</button>
+      </StyledTooltip>,
+    );
+
+    const arrow = screen.getByRole('tooltip').querySelector('[data-arrow]');
+    expect(arrow).toHaveClass('custom-arrow-class');
+  });
+
   it('does not render arrow element when withArrow is false', () => {
     render(
       <Tooltip content="No arrow tooltip" relationship="label" visible>

packages/react-components/react-headless-components-preview/library/src/components/Tooltip/renderTooltip.tsx

@@ -16,7 +16,7 @@ export const renderTooltip = (state: TooltipState): JSXElement => {
       {state.children}
       {state.shouldRenderTooltip && (
         <state.content>
-          {state.withArrow && <div ref={state.arrowRef} data-arrow="" />}
+          {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} data-arrow="" />}
           {state.content.children}
         </state.content>
       )}