@fluentui/react-tabs 9.75.0-experimental.css-modules.20261031-810ab07afb.0 → 9.75.1-experimental.positioning-engine.20261103-19efe125d1.0

package/CHANGELOG.md

@@ -1,22 +1,22 @@
 # Change Log - @fluentui/react-tabs
 
-<!-- This log was last generated on Sat, 31 Oct 2026 11:08:57 GMT and should not be manually modified. -->
+<!-- This log was last generated on Tue, 03 Nov 2026 14:18:11 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
-## [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)
+## [9.75.1-experimental.positioning-engine.20261103-19efe125d1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0)
 
-Sat, 31 Oct 2026 11:08:57 GMT
+Tue, 03 Nov 2026 14:18:11 GMT
 
 ### Changes
 
-- 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)
+- Release 9.75.1-experimental.positioning-engine.20261103-19efe125d1 ([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.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.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)
 

package/README.md

@@ -68,11 +68,3 @@ 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/package.json

@@ -1,28 +1,25 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
+  "version": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.cjs",
   "module": "lib/index.js",
   "typings": "./dist/index.d.ts",
-  "sideEffects": [
-    "**/*.css"
-  ],
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-context-selector": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-jsx-runtime": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-shared-contexts": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-tabster": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-theme": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-utilities": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
+    "@fluentui/react-context-selector": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-jsx-runtime": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-shared-contexts": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-tabster": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-theme": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-utilities": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
     "@griffel/react": "^1.5.32",
-    "@swc/helpers": "^0.5.1",
-    "clsx": "^2.1.1"
+    "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <20.0.0",

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

@@ -1,475 +0,0 @@
-@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/TabAnimatedIndicator.module.css

@@ -1,27 +0,0 @@
-@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/useTabAnimatedIndicator.styles.css.js

@@ -1,93 +0,0 @@
-'use client';
-import * as React from "react";
-import { clsx } from "clsx";
-import styles from "./TabAnimatedIndicator.module.css";
-import { useTabListContext_unstable } from "../TabList/TabListContext.js";
-import { useAnimationFrame } from "@fluentui/react-utilities";
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const tabIndicatorCssVars_unstable = {
-    offsetVar: '--fui-Tab__indicator--offset',
-    scaleVar: '--fui-Tab__indicator--scale'
-};
-const calculateTabRect = (element)=>{
-    if (element) {
-        var _element_parentElement;
-        const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        };
-        const tabRect = element.getBoundingClientRect();
-        return {
-            x: tabRect.x - parentRect.x,
-            y: tabRect.y - parentRect.y,
-            width: tabRect.width,
-            height: tabRect.height
-        };
-    }
-    return undefined;
-};
-const getRegisteredTabRect = (registeredTabs, value)=>{
-    var _registeredTabs_JSON_stringify;
-    const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;
-    return element ? calculateTabRect(element) : undefined;
-};
-// eslint-disable-next-line eqeqeq
-const isValueDefined = (value)=>value != null;
-/**
- * Adds additional styling to the active tab selection indicator to create a sliding animation.
- */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{
-    const { disabled, selected, vertical } = state;
-    const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();
-    const [animationValues, setAnimationValues] = React.useState({
-        offset: 0,
-        scale: 1
-    });
-    const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);
-    const [requestAnimationFrame] = useAnimationFrame();
-    if (selected) {
-        const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();
-        if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {
-            const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
-            const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
-            if (selectedTabRect && previousSelectedTabRect) {
-                const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;
-                const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;
-                setAnimationValues({
-                    offset,
-                    scale
-                });
-                setLastAnimatedFrom(previousSelectedValue);
-                // Reset the animation values after the animation is complete
-                requestAnimationFrame(()=>setAnimationValues({
-                        offset: 0,
-                        scale: 1
-                    }));
-            }
-        }
-    } else if (isValueDefined(lastAnimatedFrom)) {
-        // need to clear the last animated from so that if this tab is selected again
-        // from the same previous tab as last time, that animation still happens.
-        setLastAnimatedFrom(undefined);
-    }
-    // do not apply any animation if the tab is disabled
-    if (disabled) {
-        return state;
-    }
-    // the animation should only happen as the selection indicator returns to its
-    // original position and not when set at the previous tabs position.
-    const animating = animationValues.offset === 0 && animationValues.scale === 1;
-    // eslint-disable-next-line react-hooks/immutability
-    state.root.className = clsx(selected && styles.base, selected && animating && styles.animated, selected && styles[vertical ? 'vertical' : 'horizontal'], state.root.className);
-    const rootCssVars = {
-        [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,
-        [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`
-    };
-    // eslint-disable-next-line react-hooks/immutability
-    state.root.style = {
-        ...rootCssVars,
-        ...state.root.style
-    };
-    return state;
-};