@fluentui/react-tabs 9.0.0-rc.5 → 9.0.1

package/CHANGELOG.json

@@ -2,7 +2,140 @@
   "name": "@fluentui/react-tabs",
   "entries": [
     {
-      "date": "Tue, 31 May 2022 21:26:42 GMT",
+      "date": "Tue, 28 Jun 2022 17:37:53 GMT",
+      "tag": "@fluentui/react-tabs_v9.0.1",
+      "version": "9.0.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
+            "comment": "fix: Use caret dependency range for Griffel"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.0.1",
+            "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
+            "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 28 Jun 2022 15:14:06 GMT",
+      "tag": "@fluentui/react-tabs_v9.0.0",
+      "version": "9.0.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "09f58dcbef2306875046261dc0b7821283ccc287",
+            "comment": "chore: Using ::before and ::after instead of :before and :after."
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
+            "comment": "Bump Griffel dependencies"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
+            "comment": "Update 9.0.0-rc dependencies to use caret range"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "ddf16d80c50d80bc07331b478f567629775f2898",
+            "comment": "chore: Adding scheduler as a peer dependency since this package has a dependency on @fluentui/react-context-selector."
+          }
+        ],
+        "none": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "0a2e4c179791510becb1495d836a97e997f5f16d",
+            "comment": "chore: Convert tabs to index based stories"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "5ea871d03d388b192a83e2e5c0e0717e7dc61add",
+            "comment": "docs: README, spec and migration guide cleanup for react-tabs."
+          }
+        ],
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "c7b1348bdad7aa883c29bfbc96ef2a32e6ebc7dd",
+            "comment": "feat: Initial 9.0.0 release"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-theme to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 23 Jun 2022 14:25:31 GMT",
+      "tag": "@fluentui/react-tabs_v9.0.0-rc.6",
+      "version": "9.0.0-rc.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.14",
+            "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
+            "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 31 May 2022 21:28:48 GMT",
       "tag": "@fluentui/react-tabs_v9.0.0-rc.5",
       "version": "9.0.0-rc.5",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,54 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Tue, 31 May 2022 21:26:42 GMT and should not be manually modified.
+This log was last generated on Tue, 28 Jun 2022 17:37:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.1)
+
+Tue, 28 Jun 2022 17:37:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0..@fluentui/react-tabs_v9.0.1)
+
+### Patches
+
+- fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
+- Bump @fluentui/react-tabster to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
+
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0)
+
+Tue, 28 Jun 2022 15:14:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-rc.6..@fluentui/react-tabs_v9.0.0)
+
+### Patches
+
+- feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
+- Bump @fluentui/react-context-selector to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+
+### Changes
+
+- chore: Using ::before and ::after instead of :before and :after. ([PR #23469](https://github.com/microsoft/fluentui/pull/23469) by Humberto.Morimoto@microsoft.com)
+- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
+- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
+- chore: Adding scheduler as a peer dependency since this package has a dependency on @fluentui/react-context-selector. ([PR #23681](https://github.com/microsoft/fluentui/pull/23681) by Humberto.Morimoto@microsoft.com)
+
+## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-rc.6)
+
+Thu, 23 Jun 2022 14:25:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-rc.5..@fluentui/react-tabs_v9.0.0-rc.6)
+
+### Changes
+
+- Bump @fluentui/react-tabster to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+
 ## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-rc.5)
 
-Tue, 31 May 2022 21:26:42 GMT 
+Tue, 31 May 2022 21:28:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-rc.4..@fluentui/react-tabs_v9.0.0-rc.5)
 
 ### Changes

package/MIGRATION.md

@@ -0,0 +1,14 @@
+# Tab and TabList Migration
+
+### Migration from v8
+
+1. Replace occurrences of `<Pivot>` with `<TabList>`
+2. Replace occurrences of `<PivotItem>` with `<Tab>`
+3. Replace `<PivotItem>` content with handling onTabSelected to show/hide associated content.
+4. Move PivotItem.headerText to be the content of Tab
+5. Subscribe to onTabSelected to show/hide content when a tab is selected.
+
+### Migration from v0
+
+1. Replace use of `<Menu>` with `<TabList>`
+2. Replace items data with Tab instances, writing a `map` function as needed.

package/README.md

@@ -1,6 +1,6 @@
 # @fluentui/react-tabs
 
-**React Tabs components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+**Tabs components for [Fluent UI React](https://aka.ms/fluentui-storybook)**
 
 - A `TabList` provides single selection from a list of tabs.
 - When a `Tab` is selected, the content associated with the selected tab is displayed and other content is hidden.
@@ -12,6 +12,14 @@
 
 ## Usage
 
+To import Tabs:
+
+```js
+import { Tablist, Tab } from '@fluentui/react-components';
+```
+
+### Examples
+
 To display tabs, declare a `TabList` with a list of `Tab` components as children.
 
 Text is typically used within each tab, but you can place any content you like.
@@ -46,6 +54,17 @@ export const TabExample = () => {
 };
 ```
 
-### More information
+See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
+
+Alternatively, run Storybook locally with:
+
+1. `yarn start`
+2. Select `react-tabs` from the list.
+
+### Specification
+
+See [SPEC.md](./SPEC.md).
+
+### Migration Guide
 
-See [SPEC.md](./Spec.md) to learn more specifics how the `TabList` and `Tab` were built.
+If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Link implementation.

package/Spec.md

@@ -234,84 +234,25 @@ An icon only tab is displayed when the icon slot is filled and tab content is om
 
 ### Tab
 
-TabCommons.value supports an arbitrary identifier value.
-This is similar to Accordion's selection approach.
+See API at [Tab.types.ts](./src/components/Tab/Tab.types.ts).
 
-```ts
-export type TabValue = unknown;
+Notes:
 
-export type TabCommons = {
-  disabled?: boolean;
-  disabledFocusable?: boolean;
-  value: TabValue;
-};
-```
-
-Each tab has an icon slot.
-
-```ts
-export type TabSlots = {
-  root: IntrinsicSlotProps<'div'>;
-  icon?: IntrinsicSlotProps<'span'>;
-};
-```
-
-```ts
-export type TabProps = ComponentProps<TabSlots> & TabCommons;
-```
+- `TabCommons.value` supports an arbitrary identifier value. This is similar to Accordion's selection approach.
+- Each tab has an `icon` slot.
 
 ### TabList
 
-The tab list only has the root slot.
-
-```ts
-export type TabListSlots = {
-  root: IntrinsicSlotProps<'div'>;
-};
-```
-
-The tab list supports tab selection events that include the value of the tab selected.
+See API at [TabList.types.ts](./src/components/TabList/TabList.types.ts).
 
-```ts
-export type TabSelectedEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
+Notes:
 
-export type TabSelectedData = {
-  value: TabValue;
-};
-
-export type TabSelectedEventHandler = (event: TabSelectedEvent, data: TabSelectedData) => void;
-```
-
-Tab list supports default and selected values for controlled and uncontrolled scenarios.
-
-```ts
-export type TabListProps = ComponentProps<TabListSlots> & {
-  appearance?: 'transparent' | 'subtle';
-  defaultSelectedValue?: string | number;
-  selectedValue?: string | number;
-  size?: 'small' | 'medium';
-  vertical?: boolean;
-  verticalTabContent?: boolean;
-  onTabSelected?: TabSelectedEventHandler;
-};
-```
-
-The tab list communicates with tabs via context.
-This applies appearance, size, and layout.
-The tab can leverage the selectedValue and is expected to call selectTab when clicked.
-
-By adding these properties to TabProps we could allow individual tabs to override these values.
-However the expectation is that the tabs within a tab list have consistent layout and appearance.
-
-```ts
-export type TabListContextValue = TabListCommons & {
-  appearance: 'transparent' | 'subtle';
-  selectedValue: string;
-  size: 'small' | 'medium';
-  selectTab: SelectTabEventHandler;
-  vertical: boolean;
-};
-```
+- The tab list only has the `root` slot.
+- The tab list supports tab selection events that include the value of the tab selected.
+- Tab list supports default and selected values for controlled and uncontrolled scenarios.
+- The tab list communicates with tabs via context. This applies `appearance`, `size`, and `layout`.
+- The tab can leverage the `selectedValue` and is expected to call `selectTab` when clicked.
+- By adding these context properties to `TabProps` we could allow individual tabs to override these values. However the expectation is that the tabs within a tab list have a consistent layout and appearance.
 
 ## Structure
 
@@ -337,18 +278,7 @@ export type TabListContextValue = TabListCommons & {
 
 ## Migration
 
-### From v8
-
-1. Replace occurrences of `<Pivot>` with `<TabList>`
-2. Replace occurrences of `<PivotItem>` with `<Tab>`
-3. Replace `<PivotItem>` content with handling onTabSelected to show/hide associated content.
-4. Move PivotItem.headerText to be the content of Tab
-5. Subscribe to onTabSelected to show/hide content when a tab is selected.
-
-### From v0
-
-1. Replace use of `<Menu>` with `<TabList>`
-2. Replace items data with Tab instances, writing a `map` function as needed.
+See [MIGRATION.md](./MIGRATION.md).
 
 ## Behaviors
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,UAAhC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,GAAG,gBAAkC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChF,QAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AAEA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AACA,SAAO,kBAAkB,CAAC,KAAD,CAAzB;AACD,CALiD,CAA3C;AAOP,GAAG,CAAC,WAAJ,GAAkB,KAAlB","sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,UAAhC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,GAAG,gBAAkC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChF,MAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;EAEA,qBAAqB,CAAC,KAAD,CAArB;EACA,OAAO,kBAAkB,CAAC,KAAD,CAAzB;AACD,CALiD,CAA3C;AAOP,GAAG,CAAC,WAAJ,GAAkB,KAAlB","sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Tab/renderTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoB;AACpD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAW,KAAX,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,CAAC,KAAK,CAAC,QAAP,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAFtB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n  const { slots, slotProps } = getSlots<TabSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!state.iconOnly && <slots.content {...slotProps.content} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Tab/renderTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoB;EACpD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAW,KAAX,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,CAAC,KAAK,CAAC,QAAP,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAFtB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n  const { slots, slotProps } = getSlots<TabSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!state.iconOnly && <slots.content {...slotProps.content} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { TabListContext } from '../TabList/TabListContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, disabled: tabDisabled = false, icon, value } = props;\n\n  const appearance = useContextSelector(TabListContext, ctx => ctx.appearance);\n  const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);\n  const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);\n  const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);\n  const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);\n  const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);\n  const size = useContextSelector(TabListContext, ctx => ctx.size);\n  const vertical = useContextSelector(TabListContext, ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onClick = useEventCallback((event: SelectTabEvent) => onSelect(event, { value }));\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  const iconShorthand = resolveShorthand(icon);\n  const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n  return {\n    components: {\n      root: 'button',\n      icon: 'span',\n      content: 'span',\n    },\n    root: getNativeElementProps('button', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tab',\n      // aria-selected undefined indicates it is not selectable\n      // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n      'aria-selected': disabled ? undefined : `${selected}`,\n      ...props,\n      disabled,\n      onClick,\n    }),\n    icon: iconShorthand,\n    iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n    content: contentShorthand,\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { TabListContext } from '../TabList/TabListContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, disabled: tabDisabled = false, icon, value } = props;\n\n  const appearance = useContextSelector(TabListContext, ctx => ctx.appearance);\n  const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);\n  const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);\n  const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);\n  const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);\n  const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);\n  const size = useContextSelector(TabListContext, ctx => ctx.size);\n  const vertical = useContextSelector(TabListContext, ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onClick = useEventCallback((event: SelectTabEvent) => onSelect(event, { value }));\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  const iconShorthand = resolveShorthand(icon);\n  const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n  return {\n    components: {\n      root: 'button',\n      icon: 'span',\n      content: 'span',\n    },\n    root: getNativeElementProps('button', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tab',\n      // aria-selected undefined indicates it is not selectable\n      // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n      'aria-selected': disabled ? undefined : `${selected}`,\n      ...props,\n      disabled,\n      onClick,\n    }),\n    icon: iconShorthand,\n    iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n    content: contentShorthand,\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Tab/useTabAnimatedIndicator.js

@@ -15,23 +15,27 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
     "Bmxbyg5": "f1y7q3j9"
   },
   "animated": {
-    "wbfbqe": "fopw4to",
-    "mafdb0": "f1gswng4",
-    "Jgwf15": "fjw9r1k",
-    "Bh4j9q1": "f1cif4e6",
-    "Gk6w4d": "fa42t5a"
+    "Ba2ppi3": "fhwpy7i",
+    "F2fol1": "f6zz20j",
+    "B1dyfl9": "f1ai4sc1",
+    "B0vmy72": "f9qxlq5",
+    "u9bimw": "f1aql376"
   },
   "horizontal": {
-    "Blx6ldh": ["f1g89gis", "fcjnwxz"],
-    "xn0juu": "f7m34ad"
+    "sjv3b2": ["fug4aj8", "f1i5xzg7"],
+    "b1kco5": "f1q7ujh"
   },
   "vertical": {
-    "Blx6ldh": "fqfgdei",
-    "xn0juu": "fwvsziq"
+    "sjv3b2": "f1hqboyk",
+    "b1kco5": "f1dxupa6"
   }
 }, {
-  "d": [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fopw4to:after{transition-property:transform;}", ".f1gswng4:after{transition-duration:var(--durationSlow);}", ".fjw9r1k:after{transition-timing-function:var(--curveDecelerateMax);}", ".f1g89gis:after{transform-origin:left;}", ".fcjnwxz:after{transform-origin:right;}", ".f7m34ad:after{-webkit-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-moz-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-ms-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}", ".fqfgdei:after{transform-origin:top;}", ".fwvsziq:after{-webkit-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-moz-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-ms-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"],
-  "t": ["@media (prefers-reduced-motion: reduce){.f1cif4e6:after{transition-property:none;}}", "@media (prefers-reduced-motion: reduce){.fa42t5a:after{transition-duration:0.01ms;}}"]
+  "d": [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fhwpy7i::after{transition-property:transform;}", ".f6zz20j::after{transition-duration:var(--durationSlow);}", ".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}", ".fug4aj8::after{transform-origin:left;}", ".f1i5xzg7::after{transform-origin:right;}", ".f1q7ujh::after{-webkit-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-moz-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-ms-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}", ".f1hqboyk::after{transform-origin:top;}", ".f1dxupa6::after{-webkit-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-moz-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-ms-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"],
+  "m": [["@media (prefers-reduced-motion: reduce){.f9qxlq5::after{transition-property:none;}}", {
+    "m": "(prefers-reduced-motion: reduce)"
+  }], ["@media (prefers-reduced-motion: reduce){.f1aql376::after{transition-duration:0.01ms;}}", {
+    "m": "(prefers-reduced-motion: reduce)"
+  }]]
 });
 
 const calculateTabRect = element => {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Tab/useTabAnimatedIndicator.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContext } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n  offsetVar: '--fui-Tab__indicator--offset',\n  scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n  base: {\n    // overflow is required to allow the selection indicator to animate outside the tab area.\n    ...shorthands.overflow('visible'),\n  },\n  animated: {\n    ':after': {\n      transitionProperty: 'transform',\n      transitionDuration: `${tokens.durationSlow}`,\n      transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n    },\n    '@media (prefers-reduced-motion: reduce)': {\n      ':after': {\n        transitionProperty: 'none',\n        transitionDuration: '0.01ms',\n      },\n    },\n  },\n  horizontal: {\n    ':after': {\n      transformOrigin: 'left',\n      transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n    },\n  },\n  vertical: {\n    ':after': {\n      transformOrigin: 'top',\n      transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n    },\n  },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n  if (element) {\n    const parentRect = element.parentElement?.getBoundingClientRect() || { x: 0, y: 0, width: 0, height: 0 };\n    const tabRect = element.getBoundingClientRect();\n\n    return {\n      x: tabRect.x - parentRect.x,\n      y: tabRect.y - parentRect.y,\n      width: tabRect.width,\n      height: tabRect.height,\n    };\n  }\n  return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n  const element =\n    value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n  return element ? calculateTabRect(element) : undefined;\n};\n\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n  const { disabled, selected, vertical } = state;\n\n  const activeIndicatorStyles = useActiveIndicatorStyles();\n  const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n  const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n  const getRegisteredTabs = useContextSelector(TabListContext, ctx => ctx.getRegisteredTabs);\n\n  React.useEffect(() => {\n    if (lastAnimatedFrom) {\n      setAnimationValues({ offset: 0, scale: 1 });\n    }\n  }, [lastAnimatedFrom]);\n\n  if (selected) {\n    const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n    const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n    const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n    if (\n      selectedTabRect &&\n      previousSelectedTabRect &&\n      previousSelectedValue &&\n      lastAnimatedFrom !== previousSelectedValue\n    ) {\n      const offset = vertical\n        ? previousSelectedTabRect.y - selectedTabRect.y\n        : previousSelectedTabRect.x - selectedTabRect.x;\n\n      const scale = vertical\n        ? previousSelectedTabRect.height / selectedTabRect.height\n        : previousSelectedTabRect.width / selectedTabRect.width;\n\n      setAnimationValues({ offset, scale });\n      setLastAnimatedFrom(previousSelectedValue);\n    }\n  } else if (lastAnimatedFrom) {\n    // need to clear the last animated from so that if this tab is selected again\n    // from the same previous tab as last time, that animation still happens.\n    setLastAnimatedFrom(undefined);\n  }\n\n  // do not apply any animation if the tab is disabled\n  if (disabled) {\n    return state;\n  }\n\n  // the animation should only happen as the selection indicator returns to its\n  // original position and not when set at the previous tabs position.\n  const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n  state.root.className = mergeClasses(\n    state.root.className,\n    selected && activeIndicatorStyles.base,\n    selected && animating && activeIndicatorStyles.animated,\n    selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n  );\n\n  const rootCssVars = {\n    [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n    [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n  };\n\n  state.root.style = {\n    ...rootCssVars,\n    ...state.root.style,\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Tab/useTabAnimatedIndicator.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContext } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n  offsetVar: '--fui-Tab__indicator--offset',\n  scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n  base: {\n    // overflow is required to allow the selection indicator to animate outside the tab area.\n    ...shorthands.overflow('visible'),\n  },\n  animated: {\n    '::after': {\n      transitionProperty: 'transform',\n      transitionDuration: `${tokens.durationSlow}`,\n      transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n    },\n    '@media (prefers-reduced-motion: reduce)': {\n      '::after': {\n        transitionProperty: 'none',\n        transitionDuration: '0.01ms',\n      },\n    },\n  },\n  horizontal: {\n    '::after': {\n      transformOrigin: 'left',\n      transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n    },\n  },\n  vertical: {\n    '::after': {\n      transformOrigin: 'top',\n      transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n    },\n  },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n  if (element) {\n    const parentRect = element.parentElement?.getBoundingClientRect() || { x: 0, y: 0, width: 0, height: 0 };\n    const tabRect = element.getBoundingClientRect();\n\n    return {\n      x: tabRect.x - parentRect.x,\n      y: tabRect.y - parentRect.y,\n      width: tabRect.width,\n      height: tabRect.height,\n    };\n  }\n  return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n  const element =\n    value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n  return element ? calculateTabRect(element) : undefined;\n};\n\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n  const { disabled, selected, vertical } = state;\n\n  const activeIndicatorStyles = useActiveIndicatorStyles();\n  const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n  const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n  const getRegisteredTabs = useContextSelector(TabListContext, ctx => ctx.getRegisteredTabs);\n\n  React.useEffect(() => {\n    if (lastAnimatedFrom) {\n      setAnimationValues({ offset: 0, scale: 1 });\n    }\n  }, [lastAnimatedFrom]);\n\n  if (selected) {\n    const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n    const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n    const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n    if (\n      selectedTabRect &&\n      previousSelectedTabRect &&\n      previousSelectedValue &&\n      lastAnimatedFrom !== previousSelectedValue\n    ) {\n      const offset = vertical\n        ? previousSelectedTabRect.y - selectedTabRect.y\n        : previousSelectedTabRect.x - selectedTabRect.x;\n\n      const scale = vertical\n        ? previousSelectedTabRect.height / selectedTabRect.height\n        : previousSelectedTabRect.width / selectedTabRect.width;\n\n      setAnimationValues({ offset, scale });\n      setLastAnimatedFrom(previousSelectedValue);\n    }\n  } else if (lastAnimatedFrom) {\n    // need to clear the last animated from so that if this tab is selected again\n    // from the same previous tab as last time, that animation still happens.\n    setLastAnimatedFrom(undefined);\n  }\n\n  // do not apply any animation if the tab is disabled\n  if (disabled) {\n    return state;\n  }\n\n  // the animation should only happen as the selection indicator returns to its\n  // original position and not when set at the previous tabs position.\n  const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n  state.root.className = mergeClasses(\n    state.root.className,\n    selected && activeIndicatorStyles.base,\n    selected && animating && activeIndicatorStyles.animated,\n    selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n  );\n\n  const rootCssVars = {\n    [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n    [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n  };\n\n  state.root.style = {\n    ...rootCssVars,\n    ...state.root.style,\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Tab/useTabStyles.js

@@ -194,7 +194,11 @@ const usePendingIndicatorStyles = /*#__PURE__*/__styles({
 }, {
   "h": [".fhw179n:hover::before{background-color:var(--colorNeutralStroke1Hover);}", ".f10y1uxy:hover::before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f6aiuy0:hover::before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1kfpfnu:hover::before{border-top-right-radius:var(--borderRadiusCircular);}", ".f1dx5wco:hover::before{border-top-left-radius:var(--borderRadiusCircular);}", ".f1kmhr4c:hover::before{content:\"\";}", ".fl1ydde:hover::before{position:absolute;}", ".f1ut20fw:hover::before{background-color:var(--colorTransparentStroke);}"],
   "a": [".f1y7maxz:active::before{background-color:var(--colorNeutralStroke1Pressed);}", ".f105swax:active::before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".fscdmel:active::before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1tkcw1w:active::before{border-top-right-radius:var(--borderRadiusCircular);}", ".f1u11x8o:active::before{border-top-left-radius:var(--borderRadiusCircular);}", ".f16cxu0:active::before{content:\"\";}", ".f1nwgacf:active::before{position:absolute;}", ".fhrzcfn:active::before{background-color:var(--colorTransparentStroke);}"],
-  "t": ["@media (forced-colors: active){.f15ovonk:hover::before{background-color:Highlight;}}", "@media (forced-colors: active){.fvje46l:active::before{background-color:Highlight;}}"],
+  "m": [["@media (forced-colors: active){.f15ovonk:hover::before{background-color:Highlight;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fvje46l:active::before{background-color:Highlight;}}", {
+    "m": "(forced-colors: active)"
+  }]],
   "d": [".fchca7p::before{bottom:0;}", ".f1s2r9ax::before{height:var(--strokeWidthThicker);}", ".f1o0nnkk::before{left:var(--spacingHorizontalM);}", ".fxb7rol::before{right:var(--spacingHorizontalM);}", ".f17jracn::before{bottom:var(--spacingVerticalS);}", ".f1fzr1x6::before{left:0;}", ".f1f351id::before{right:0;}", ".f117lcb2::before{top:var(--spacingVerticalS);}", ".f1aij3q::before{width:var(--strokeWidthThicker);}", ".f1r53b5e::before{height:var(--strokeWidthThick);}", ".f1s6rxz5::before{left:var(--spacingHorizontalSNudge);}", ".fo35v8s::before{right:var(--spacingHorizontalSNudge);}", ".fze4zud::before{bottom:var(--spacingVerticalXS);}", ".fdp32p8::before{top:var(--spacingVerticalXS);}"]
 });
 
@@ -248,7 +252,13 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
   "d": [".f1rp0jgh::after{background-color:var(--colorTransparentStroke);}", ".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}", ".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".ffmd2fr::after{z-index:1;}", ".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}", ".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}", ".fo72kxq::after{bottom:0;}", ".f1vx7lu8::after{height:var(--strokeWidthThicker);}", ".fna7m5n::after{left:var(--spacingHorizontalM);}", ".f1oxpfwv::after{right:var(--spacingHorizontalM);}", ".fipylg0::after{bottom:var(--spacingVerticalS);}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fqchiol::after{top:var(--spacingVerticalS);}", ".f1o25lip::after{width:var(--strokeWidthThicker);}", ".f9bb2ob::after{height:var(--strokeWidthThick);}", ".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}", ".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}", ".fqbue9b::after{bottom:var(--spacingVerticalXS);}", ".fk1klkt::after{top:var(--spacingVerticalXS);}"],
   "h": [".f1eytvvh:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}"],
   "a": [".fuaa9s:active::after{background-color:var(--colorCompoundBrandStrokePressed);}"],
-  "t": ["@media (forced-colors: active){.fy7ktjt::after{background-color:ButtonText;}}", "@media (forced-colors: active){.f16tp0gf:hover::after{background-color:ButtonText;}}", "@media (forced-colors: active){.fj0yp7j:active::after{background-color:ButtonText;}}"]
+  "m": [["@media (forced-colors: active){.fy7ktjt::after{background-color:ButtonText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f16tp0gf:hover::after{background-color:ButtonText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fj0yp7j:active::after{background-color:ButtonText;}}", {
+    "m": "(forced-colors: active)"
+  }]]
 });
 /**
  * Styles for the icon slot.