@fluentui/react-tabs 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.0

package/CHANGELOG.md

@@ -1,23 +1,47 @@
 # Change Log - @fluentui/react-tabs
 
-<!-- This log was last generated on Tue, 06 Oct 2026 11:40:34 GMT and should not be manually modified. -->
+<!-- This log was last generated on Sat, 31 Oct 2026 11:08:57 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
-## [9.74.7-experimental.cli-api.20261006-ccaa611d58.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.74.7-experimental.cli-api.20261006-ccaa611d58.0)
+## [9.75.0-experimental.css-modules.20261031-810ab07afb.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.75.0-experimental.css-modules.20261031-810ab07afb.0)
 
-Tue, 06 Oct 2026 11:40:34 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.12.4..@fluentui/react-tabs_v9.74.7-experimental.cli-api.20261006-ccaa611d58.0)
+Sat, 31 Oct 2026 11:08:57 GMT
 
 ### Changes
 
-- Release 9.74.7-experimental.cli-api.20261006-ccaa611d58 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
-- Bump @fluentui/react-context-selector to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-tabster to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-theme to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-utilities to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Release 9.75.0-experimental.css-modules.20261031-810ab07afb ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
+- Bump @fluentui/react-context-selector to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.12.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.12.6)
+
+Mon, 19 Oct 2026 16:49:01 GMT
+
+### Patches
+
+- Bump @fluentui/react-context-selector to v9.2.21 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.19 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.27.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.12.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.12.5)
+
+Tue, 22 Sep 2026 11:25:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.12.4..@fluentui/react-tabs_v9.12.5)
+
+### Patches
+
+- fix: remove unused react-dom and @types/react-dom peer dependencies, mark @types/react as optional ([PR #36559](https://github.com/microsoft/fluentui/pull/36559) by martinhochel@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.20 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.18 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
 
 ## [9.12.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.12.4)
 

package/README.md

@@ -68,3 +68,11 @@ See [SPEC.md](./SPEC.md).
 ### Migration Guide
 
 If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Link implementation.
+
+## Opt-in CSS Modules styles
+
+Tab animated indicators have layered CSS Modules alternatives beside their Griffel style hooks.
+Resolve the relevant `.styles.js` imports to `.styles.css.js` (and source `.styles`
+imports to `.styles.css.ts`) only in an explicitly opted-in bundler configuration.
+Keep CSS assets and process the headless icon stylesheet in the `fluentui` layer.
+The default component imports and Griffel implementations are unchanged.

package/lib/components/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n\n  useTabStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","Tab","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,cAAW;AAC3C,SAASC,kBAAkB,QAAQ,iBAAc;AACjD,SAASC,qBAAqB,QAAQ,2BAAwB;AAG9D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,oBAAqCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,QAAQR,gBAAgBM,OAAOC;IAErCL,sBAAsBM;IAEtBL,4BAA4B,yBAAyBK;IAErD,OAAOP,mBAAmBO;AAC5B,GAAG;AAEHJ,IAAIK,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n\n  useTabStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","Tab","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,cAAW;AAC3C,SAASC,kBAAkB,QAAQ,iBAAc;AACjD,SAASC,qBAAqB,QAAQ,2BAAwB;AAG9D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,oBAAqCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,QAAQR,gBAAgBM,OAAOC;IAErCL,sBAAsBM;IAEtBL,4BAA4B,yBAAyBK;IAErD,OAAOP,mBAAmBO;AAC5B,GAAG;AAEHJ,IAAIK,WAAW,GAAG"}

package/lib/components/Tab/Tab.module.css

@@ -0,0 +1,475 @@
+@layer fluentui {
+  /* ---- Root: grid wrapper that holds content + pseudo-element indicators ---- */
+  .root {
+    align-items: center;
+    display: grid;
+    flex-shrink: 0;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+    outline-style: none;
+    position: relative;
+  }
+
+  /* ---- Button: interactive button layered on the root grid ---- */
+  .button {
+    align-items: center;
+    border: none;
+    border-radius: var(--borderRadiusMedium);
+    cursor: pointer;
+    display: grid;
+    flex-shrink: 0;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+    font-family: var(--fontFamilyBase);
+    line-height: var(--lineHeightBase300);
+    outline-style: none;
+    position: relative;
+    overflow: hidden;
+    text-transform: none;
+  }
+
+  /* ---- Orientation (also carries default "medium" padding) ---- */
+  .horizontal {
+    justify-content: center;
+    column-gap: var(--spacingHorizontalSNudge);
+    padding: var(--spacingVerticalM) var(--spacingHorizontalMNudge);
+  }
+  .vertical {
+    justify-content: start;
+    column-gap: var(--spacingHorizontalSNudge);
+    padding: var(--spacingVerticalSNudge) var(--spacingHorizontalMNudge);
+  }
+
+  /* ---- Size × orientation: padding overrides for small/large ---- */
+  /* medium is the default, covered by .horizontal/.vertical above */
+  .small.horizontal {
+    column-gap: var(--spacingHorizontalXXS);
+    padding: var(--spacingVerticalSNudge) var(--spacingHorizontalSNudge);
+  }
+  .small.vertical {
+    column-gap: var(--spacingHorizontalXXS);
+    padding: var(--spacingVerticalXXS) var(--spacingHorizontalSNudge);
+  }
+  .large.horizontal {
+    column-gap: var(--spacingHorizontalSNudge);
+    padding: var(--spacingVerticalL) var(--spacingHorizontalMNudge);
+  }
+  .large.vertical {
+    column-gap: var(--spacingHorizontalSNudge);
+    padding: var(--spacingVerticalS) var(--spacingHorizontalMNudge);
+  }
+
+  /* ---- Appearance: transparent ---- */
+  .transparent {
+    background-color: var(--colorTransparentBackground);
+  }
+  .transparent:enabled:hover {
+    background-color: var(--colorTransparentBackgroundHover);
+  }
+  .transparent:enabled:active {
+    background-color: var(--colorTransparentBackgroundPressed);
+  }
+
+  .transparent :global(.fui-Tab__icon),
+  .transparent :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground2);
+  }
+  .transparent:enabled:hover :global(.fui-Tab__icon),
+  .transparent:enabled:hover :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground2Hover);
+  }
+  .transparent:enabled:active :global(.fui-Tab__icon),
+  .transparent:enabled:active :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground2Pressed);
+  }
+
+  /* ---- Appearance: subtle ---- */
+  .subtle {
+    background-color: var(--colorSubtleBackground);
+  }
+  .subtle:enabled:hover {
+    background-color: var(--colorSubtleBackgroundHover);
+  }
+  .subtle:enabled:active {
+    background-color: var(--colorSubtleBackgroundPressed);
+  }
+
+  .subtle :global(.fui-Tab__icon),
+  .subtle :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground2);
+  }
+  .subtle:enabled:hover :global(.fui-Tab__icon),
+  .subtle:enabled:hover :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground2Hover);
+  }
+  .subtle:enabled:active :global(.fui-Tab__icon),
+  .subtle:enabled:active :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground2Pressed);
+  }
+
+  /* ---- Selected state colors (non-circular only — guarded below by .circularBase reset) ---- */
+  .selected :global(.fui-Tab__icon) {
+    color: var(--colorCompoundBrandForeground1);
+  }
+  .selected:enabled:hover :global(.fui-Tab__icon) {
+    color: var(--colorCompoundBrandForeground1Hover);
+  }
+  .selected:enabled:active :global(.fui-Tab__icon) {
+    color: var(--colorCompoundBrandForeground1Pressed);
+  }
+
+  .selected :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground1);
+  }
+  .selected:enabled:hover :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground1Hover);
+  }
+  .selected:enabled:active :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground1Pressed);
+  }
+
+  /* ---- Disabled ---- */
+  .disabled {
+    cursor: not-allowed;
+    background-color: var(--colorTransparentBackground);
+  }
+  .disabled :global(.fui-Tab__icon),
+  .disabled :global(.fui-Tab__content) {
+    color: var(--colorNeutralForegroundDisabled);
+  }
+
+  /* ---- Focus indicator ---- */
+  .focusBase[data-fui-focus-visible] {
+    border-color: transparent;
+    outline-width: var(--strokeWidthThick);
+    outline-color: transparent;
+    outline-style: solid;
+    box-shadow: var(--shadow4), 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);
+    z-index: 1;
+  }
+
+  .focusCircular[data-fui-focus-visible] {
+    border-color: transparent;
+    outline-width: var(--strokeWidthThick);
+    outline-color: transparent;
+    outline-style: solid;
+    box-shadow: var(--shadow4), 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),
+      0 0 0 var(--strokeWidthThin) var(--colorNeutralStrokeOnBrand) inset;
+    z-index: 1;
+  }
+
+  /* ---- Pending indicator (::before) ---- */
+  .pendingBase:hover::before,
+  .pendingBase:active::before {
+    background-color: var(--colorNeutralStroke1Hover);
+    border-radius: var(--borderRadiusCircular);
+    content: '';
+    position: absolute;
+  }
+  .pendingBase:active::before {
+    background-color: var(--colorNeutralStroke1Pressed);
+  }
+
+  @media (forced-colors: active) {
+    .pendingBase:hover::before,
+    .pendingBase:active::before {
+      background-color: Highlight;
+    }
+  }
+
+  .pendingDisabled:hover::before,
+  .pendingDisabled:active::before {
+    background-color: var(--colorTransparentStroke);
+  }
+
+  @media (forced-colors: active) {
+    .pendingDisabled:hover::before,
+    .pendingDisabled:active::before {
+      background-color: transparent;
+    }
+  }
+
+  /* ---- Active indicator (::after) ---- */
+  .activeBase::after {
+    background-color: var(--colorTransparentStroke);
+    border-radius: var(--borderRadiusCircular);
+    content: '';
+    position: absolute;
+  }
+  .activeSelected::after {
+    background-color: var(--colorCompoundBrandStroke);
+  }
+  .activeSelected:enabled:hover::after {
+    background-color: var(--colorCompoundBrandStrokeHover);
+  }
+  .activeSelected:enabled:active::after {
+    background-color: var(--colorCompoundBrandStrokePressed);
+  }
+
+  @media (forced-colors: active) {
+    .activeSelected::after,
+    .activeSelected:enabled:hover::after,
+    .activeSelected:enabled:active::after {
+      background-color: ButtonText;
+    }
+  }
+
+  .activeDisabled::after {
+    background-color: var(--colorNeutralForegroundDisabled);
+  }
+
+  /* ---- Indicator positions: compound size × orientation selectors ---- */
+  /* Pending (::before) and active (::after) share the same geometry — handled together. */
+
+  /* Medium + horizontal (default via .horizontal baseline; small/large override below) */
+  .horizontal.pendingBase::before,
+  .horizontal.activeBase::after {
+    bottom: 0;
+    height: var(--strokeWidthThicker);
+    left: var(--spacingHorizontalM);
+    right: var(--spacingHorizontalM);
+  }
+  /* Medium + vertical */
+  .vertical.pendingBase::before,
+  .vertical.activeBase::after {
+    bottom: var(--spacingVerticalS);
+    inset-inline-start: 0;
+    top: var(--spacingVerticalS);
+    width: var(--strokeWidthThicker);
+  }
+  /* Small + horizontal */
+  .small.horizontal.pendingBase::before,
+  .small.horizontal.activeBase::after {
+    bottom: 0;
+    height: var(--strokeWidthThick);
+    left: var(--spacingHorizontalSNudge);
+    right: var(--spacingHorizontalSNudge);
+  }
+  /* Small + vertical */
+  .small.vertical.pendingBase::before,
+  .small.vertical.activeBase::after {
+    bottom: var(--spacingVerticalXS);
+    inset-inline-start: 0;
+    top: var(--spacingVerticalXS);
+    width: var(--strokeWidthThicker);
+  }
+  /* Large + horizontal: same geometry as medium, no override needed */
+  /* Large + vertical */
+  .large.vertical.pendingBase::before,
+  .large.vertical.activeBase::after {
+    bottom: var(--spacingVerticalMNudge);
+    inset-inline-start: 0;
+    top: var(--spacingVerticalMNudge);
+    width: var(--strokeWidthThicker);
+  }
+
+  /* ---- Circular appearance base ---- */
+  .circularBase {
+    border-radius: var(--borderRadiusCircular);
+    border: solid var(--strokeWidthThin) var(--colorTransparentStroke);
+  }
+
+  /* Reset selected icon/content colors inherited from non-circular .selected rules */
+  .circularBase :global(.fui-Tab__icon),
+  .circularBase :global(.fui-Tab__content) {
+    color: inherit;
+  }
+
+  /* Circular size padding: compound with .small/.large on the same button element */
+  .circularBase {
+    padding-block: calc(var(--spacingVerticalSNudge) - var(--strokeWidthThin));
+  }
+  .circularBase.small {
+    padding-block: calc(var(--spacingVerticalXXS) - var(--strokeWidthThin));
+  }
+  .circularBase.large {
+    padding-block: calc(var(--spacingVerticalS) - var(--strokeWidthThin));
+  }
+
+  /* ---- Subtle-circular appearance ---- */
+  .subtleCircular {
+    background-color: var(--colorSubtleBackground);
+    color: var(--colorNeutralForeground2);
+  }
+  .subtleCircular:enabled:hover {
+    background-color: var(--colorSubtleBackgroundHover);
+    border: solid var(--strokeWidthThin) var(--colorNeutralStroke1Hover);
+    color: var(--colorNeutralForeground2Hover);
+  }
+  .subtleCircular:enabled:active {
+    background-color: var(--colorSubtleBackgroundPressed);
+    border: solid var(--strokeWidthThin) var(--colorNeutralStroke1Pressed);
+    color: var(--colorNeutralForeground2Pressed);
+  }
+  @media (forced-colors: active) {
+    .subtleCircular {
+      border: solid var(--strokeWidthThin) Canvas;
+    }
+  }
+
+  /* selected, disabled: compound — CSS handles combinations, hook applies orthogonal classes */
+  .subtleCircular.selected {
+    background-color: var(--colorBrandBackground2);
+    border: solid var(--strokeWidthThin) var(--colorCompoundBrandStroke);
+    color: var(--colorBrandForeground2);
+  }
+  .subtleCircular.selected:enabled:hover {
+    background-color: var(--colorBrandBackground2Hover);
+    border: solid var(--strokeWidthThin) var(--colorCompoundBrandStrokeHover);
+    color: var(--colorBrandForeground2Hover);
+  }
+  .subtleCircular.selected:enabled:active {
+    background-color: var(--colorBrandBackground2Pressed);
+    border: solid var(--strokeWidthThin) var(--colorCompoundBrandStrokePressed);
+    color: var(--colorBrandForeground2Pressed);
+  }
+  @media (forced-colors: active) {
+    .subtleCircular.selected {
+      border: solid var(--strokeWidthThin) Highlight;
+    }
+  }
+
+  .subtleCircular.disabled {
+    background-color: var(--colorSubtleBackground);
+    color: var(--colorNeutralForegroundDisabled);
+  }
+  .subtleCircular.selected.disabled {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    border: solid var(--strokeWidthThin) var(--colorNeutralStrokeDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+  }
+
+  /* ---- Filled-circular appearance ---- */
+  .filledCircular {
+    background-color: var(--colorNeutralBackground3);
+    color: var(--colorNeutralForeground2);
+  }
+  .filledCircular:enabled:hover {
+    background-color: var(--colorNeutralBackground3Hover);
+    color: var(--colorNeutralForeground2Hover);
+  }
+  .filledCircular:enabled:active {
+    background-color: var(--colorNeutralBackground3Pressed);
+    color: var(--colorNeutralForeground2Pressed);
+  }
+
+  @media (forced-colors: active) {
+    .filledCircular:enabled:hover {
+      background-color: Highlight;
+      forced-color-adjust: none;
+    }
+    .filledCircular:enabled:hover :global(.fui-Tab__content),
+    .filledCircular:enabled:hover :global(.fui-Icon-filled),
+    .filledCircular:enabled:hover :global(.fui-Icon-regular) {
+      color: HighlightText;
+    }
+  }
+
+  .filledCircular.selected {
+    background-color: var(--colorBrandBackground);
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+  .filledCircular.selected:enabled:hover {
+    background-color: var(--colorBrandBackgroundHover);
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+  .filledCircular.selected:enabled:active {
+    background-color: var(--colorBrandBackgroundPressed);
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+
+  @media (forced-colors: active) {
+    .filledCircular.selected:enabled {
+      background-color: ButtonText;
+    }
+    .filledCircular.selected:enabled :global(.fui-Tab__content) {
+      color: ButtonFace;
+      forced-color-adjust: none;
+    }
+    .filledCircular.selected:enabled :global(.fui-Tab__icon) {
+      color: ButtonFace;
+    }
+  }
+
+  .filledCircular.disabled {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+  }
+  .filledCircular.selected.disabled {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    border: solid var(--strokeWidthThin) var(--colorNeutralStrokeDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+  }
+
+  /* ---- Icon slot ---- */
+  .icon {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    overflow: hidden;
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+  }
+
+  .icon :global(.fui-Icon-filled) {
+    display: none;
+  }
+  .icon :global(.fui-Icon-regular) {
+    display: inline;
+  }
+
+  /* Large tab: bigger icon via descendant selector from the button's .large class */
+  .large :global(.fui-Tab__icon) {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+
+  /* Selected state: swap to filled icon variant */
+  .selected :global(.fui-Tab__icon) :global(.fui-Icon-filled) {
+    display: inline;
+  }
+  .selected :global(.fui-Tab__icon) :global(.fui-Icon-regular) {
+    display: none;
+  }
+
+  /* ---- Content slot ---- */
+  .content {
+    overflow: hidden;
+    padding: 0 var(--spacingHorizontalXXS);
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+  }
+
+  /* Selected: semibold (body1Strong). Applies to all tabs including circular. */
+  .selected :global(.fui-Tab__content) {
+    font-weight: var(--fontWeightSemibold);
+  }
+
+  /* Large: bigger font (body2 / subtitle2) via descendant from button's .large class */
+  .large .content {
+    font-size: var(--fontSizeBase400);
+    line-height: var(--lineHeightBase400);
+  }
+
+  .contentNoIconBefore {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+  .contentIconBefore {
+    grid-column-start: 2;
+    grid-row-start: 1;
+  }
+
+  .contentPlaceholder {
+    visibility: hidden;
+    font-weight: var(--fontWeightSemibold);
+  }
+}

package/lib/components/Tab/Tab.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/Tab.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n  /**\n   * Root of the component.\n   */\n  root: Slot<'button'>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n   */\n  content: NonNullable<Slot<'span'>>;\n};\n\nexport type TabInternalSlots = TabSlots & {\n  contentReservedSpace?: Slot<'span'>;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = Omit<ComponentProps<Partial<TabSlots>>, 'content' | 'value'> &\n  Pick<Partial<TabSlots>, 'content'> & {\n    /**\n     * A tab can be set to disable interaction.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * The value that identifies this tab when selected.\n     */\n    value: TabValue;\n  };\n\nexport type TabBaseProps = Omit<TabProps, 'contentReservedSpace'>;\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabInternalSlots> &\n  Pick<TabProps, 'value'> &\n  Required<Pick<TabProps, 'disabled'>> & {\n    /**\n     * A tab supports 'transparent', 'subtle', `subtle-circular` and `filled-circular` appearance.\n     */\n    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';\n\n    /**\n     * A tab can have only an icon slot filled and no content.\n     */\n    iconOnly: boolean;\n    /**\n     * If this tab is selected\n     */\n    selected: boolean;\n    /**\n     * When defined, tab content with selected style is rendered hidden to reserve space.\n     * This keeps consistent content size between unselected and selected states.\n     *\n     * @deprecated - use `contentReservedSpace` internal slot instead.\n     */\n    contentReservedSpaceClassName?: string;\n    /**\n     * A tab can be either 'small', 'medium', or 'large' size.\n     */\n    size: 'small' | 'medium' | 'large';\n    /**\n     * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n     */\n    vertical: boolean;\n  };\n\nexport type TabBaseState = Omit<TabState, 'appearance' | 'size' | 'contentReservedSpace'>;\n"],"names":[],"mappings":"AAmFA,WAA0F"}
+{"version":3,"sources":["../../../src/components/Tab/Tab.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n  /**\n   * Root of the component.\n   */\n  root: Slot<'button'>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n   */\n  content: NonNullable<Slot<'span'>>;\n};\n\nexport type TabInternalSlots = TabSlots & {\n  contentReservedSpace?: Slot<'span'>;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = Omit<ComponentProps<Partial<TabSlots>>, 'content' | 'value'> &\n  Pick<Partial<TabSlots>, 'content'> & {\n    /**\n     * A tab can be set to disable interaction.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * The value that identifies this tab when selected.\n     */\n    value: TabValue;\n  };\n\nexport type TabBaseProps = Omit<TabProps, 'contentReservedSpace'>;\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabInternalSlots> &\n  Pick<TabProps, 'value'> &\n  Required<Pick<TabProps, 'disabled'>> & {\n    /**\n     * A tab supports 'transparent', 'subtle', `subtle-circular` and `filled-circular` appearance.\n     */\n    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';\n\n    /**\n     * A tab can have only an icon slot filled and no content.\n     */\n    iconOnly: boolean;\n    /**\n     * If this tab is selected\n     */\n    selected: boolean;\n    /**\n     * When defined, tab content with selected style is rendered hidden to reserve space.\n     * This keeps consistent content size between unselected and selected states.\n     *\n     * @deprecated - use `contentReservedSpace` internal slot instead.\n     */\n    contentReservedSpaceClassName?: string;\n    /**\n     * A tab can be either 'small', 'medium', or 'large' size.\n     */\n    size: 'small' | 'medium' | 'large';\n    /**\n     * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n     */\n    vertical: boolean;\n  };\n\nexport type TabBaseState = Omit<TabState, 'appearance' | 'size' | 'contentReservedSpace'>;\n"],"names":[],"mappings":"AAmFA,WAA0F"}

package/lib/components/Tab/TabAnimatedIndicator.module.css

@@ -0,0 +1,27 @@
+@layer fluentui {
+  .base {
+    overflow: visible;
+  }
+  .animated::after {
+    transition-property: transform;
+    transition-duration: var(--durationSlow);
+    transition-timing-function: var(--curveDecelerateMax);
+  }
+  .horizontal::after {
+    transform-origin: left;
+    transform: translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));
+  }
+  :global([dir='rtl']) .horizontal::after {
+    transform-origin: right;
+  }
+  .vertical::after {
+    transform-origin: top;
+    transform: translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .animated::after {
+      transition-property: none;
+      transition-duration: 0.01ms;
+    }
+  }
+}

package/lib/components/Tab/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/index.ts"],"sourcesContent":["export { Tab } from './Tab';\nexport type { TabInternalSlots, TabBaseProps, TabProps, TabSlots, TabBaseState, TabState, TabValue } from './Tab.types';\nexport { renderTab_unstable } from './renderTab';\nexport { useTab_unstable, useTabBase_unstable, useTabA11yBehavior_unstable } from './useTab';\nexport {\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n} from './useTabStyles.styles';\nexport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n"],"names":["Tab","renderTab_unstable","useTab_unstable","useTabBase_unstable","useTabA11yBehavior_unstable","tabClassNames","tabReservedSpaceClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTabAnimatedIndicatorStyles_unstable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,WAAQ;AAE5B,SAASC,kBAAkB,QAAQ,iBAAc;AACjD,SAASC,eAAe,EAAEC,mBAAmB,EAAEC,2BAA2B,QAAQ,cAAW;AAC7F,SACEC,aAAa,EACbC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,QAChB,2BAAwB;AAC/B,SAASC,sCAAsC,QAAQ,sCAAmC"}
+{"version":3,"sources":["../../../src/components/Tab/index.ts"],"sourcesContent":["export { Tab } from './Tab';\nexport type { TabInternalSlots, TabBaseProps, TabProps, TabSlots, TabBaseState, TabState, TabValue } from './Tab.types';\nexport { renderTab_unstable } from './renderTab';\nexport { useTab_unstable, useTabBase_unstable, useTabA11yBehavior_unstable } from './useTab';\nexport {\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n} from './useTabStyles.styles';\nexport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n"],"names":["Tab","renderTab_unstable","useTab_unstable","useTabBase_unstable","useTabA11yBehavior_unstable","tabClassNames","tabReservedSpaceClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTabAnimatedIndicatorStyles_unstable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,WAAQ;AAE5B,SAASC,kBAAkB,QAAQ,iBAAc;AACjD,SAASC,eAAe,EAAEC,mBAAmB,EAAEC,2BAA2B,QAAQ,cAAW;AAC7F,SACEC,aAAa,EACbC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,QAChB,2BAAwB;AAC/B,SAASC,sCAAsC,QAAQ,sCAAmC"}

package/lib/components/Tab/renderTab.js

@@ -1,5 +1,5 @@
-  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from "@fluentui/react-utilities";
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of Tab
  */ export const renderTab_unstable = (state)=>{

package/lib/components/Tab/renderTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/renderTab.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabBaseState, TabInternalSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabBaseState): JSXElement => {\n  assertSlots<TabInternalSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!state.iconOnly && <state.content />}\n      {state.contentReservedSpace && <state.contentReservedSpace />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTab_unstable","state","root","icon","iconOnly","content","contentReservedSpace"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,IAAI,kBAAI,KAACF,MAAME,IAAI;YACzB,CAACF,MAAMG,QAAQ,kBAAI,KAACH,MAAMI,OAAO;YACjCJ,MAAMK,oBAAoB,kBAAI,KAACL,MAAMK,oBAAoB;;;AAGhE,EAAE"}
+{"version":3,"sources":["../../../src/components/Tab/renderTab.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabBaseState, TabInternalSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabBaseState): JSXElement => {\n  assertSlots<TabInternalSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!state.iconOnly && <state.content />}\n      {state.contentReservedSpace && <state.contentReservedSpace />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTab_unstable","state","root","icon","iconOnly","content","contentReservedSpace"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,IAAI,kBAAI,KAACF,MAAME,IAAI;YACzB,CAACF,MAAMG,QAAQ,kBAAI,KAACH,MAAMI,OAAO;YACjCJ,MAAMK,oBAAoB,kBAAI,KAACL,MAAMK,oBAAoB;;;AAGhE,EAAE"}