@fluentui/react-tabs 9.9.0 → 9.9.2

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Thu, 17 Jul 2025 13:45:48 GMT and should not be manually modified.
+This log was last generated on Wed, 30 Jul 2025 08:41:07 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.9.2)
+
+Wed, 30 Jul 2025 08:41:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.9.1..@fluentui/react-tabs_v9.9.2)
+
+### Patches
+
+- Bump @fluentui/react-context-selector to v9.2.4 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.4 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.24.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-tabster to v9.26.2 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-theme to v9.2.0 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-utilities to v9.23.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+
+## [9.9.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.9.1)
+
+Mon, 28 Jul 2025 18:48:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.9.0..@fluentui/react-tabs_v9.9.1)
+
+### Patches
+
+- fix: adjust circular sizes to Figma spec ([PR #34859](https://github.com/microsoft/fluentui/pull/34859) by vgenaev@gmail.com)
+- Bump @fluentui/react-context-selector to v9.2.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-tabster to v9.26.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+
 ## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.9.0)
 
-Thu, 17 Jul 2025 13:45:48 GMT 
+Thu, 17 Jul 2025 13:49:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.8.3..@fluentui/react-tabs_v9.9.0)
 
 ### Minor changes

package/lib/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Tab.ts"],"sourcesContent":["export type { TabInternalSlots, TabProps, TabSlots, TabState, TabValue } from './components/Tab/index';\nexport {\n  Tab,\n  renderTab_unstable,\n  tabClassNames,\n  useTabAnimatedIndicatorStyles_unstable,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n  useTab_unstable,\n} from './components/Tab/index';\n"],"names":["Tab","renderTab_unstable","tabClassNames","useTabAnimatedIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,GAAG,EACHC,kBAAkB,EAClBC,aAAa,EACbC,sCAAsC,EACtCC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,EACrBC,eAAe,QACV,yBAAyB"}
+{"version":3,"sources":["../src/Tab.ts"],"sourcesContent":["export type { TabInternalSlots, TabProps, TabSlots, TabState, TabValue } from './components/Tab/index';\nexport {\n  Tab,\n  renderTab_unstable,\n  tabClassNames,\n  useTabAnimatedIndicatorStyles_unstable,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n  useTab_unstable,\n} from './components/Tab/index';\n"],"names":["Tab","renderTab_unstable","tabClassNames","useTabAnimatedIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable"],"mappings":"AACA,SACEA,GAAG,EACHC,kBAAkB,EAClBC,aAAa,EACbC,sCAAsC,EACtCC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,EACrBC,eAAe,QACV,yBAAyB"}

package/lib/TabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/TabList.ts"],"sourcesContent":["export type {\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n  TabRegisterData,\n} from './components/TabList/index';\nexport {\n  TabList,\n  TabListContext,\n  TabListProvider,\n  renderTabList_unstable,\n  tabListClassNames,\n  useTabListContextValues_unstable,\n  useTabListContext_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './components/TabList/index';\n"],"names":["TabList","TabListContext","TabListProvider","renderTabList_unstable","tabListClassNames","useTabListContextValues_unstable","useTabListContext_unstable","useTabListStyles_unstable","useTabList_unstable"],"rangeMappings":"","mappings":"AAYA,SACEA,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,sBAAsB,EACtBC,iBAAiB,EACjBC,gCAAgC,EAChCC,0BAA0B,EAC1BC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B"}
+{"version":3,"sources":["../src/TabList.ts"],"sourcesContent":["export type {\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n  TabRegisterData,\n} from './components/TabList/index';\nexport {\n  TabList,\n  TabListContext,\n  TabListProvider,\n  renderTabList_unstable,\n  tabListClassNames,\n  useTabListContextValues_unstable,\n  useTabListContext_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './components/TabList/index';\n"],"names":["TabList","TabListContext","TabListProvider","renderTabList_unstable","tabListClassNames","useTabListContextValues_unstable","useTabListContext_unstable","useTabListStyles_unstable","useTabList_unstable"],"mappings":"AAYA,SACEA,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,sBAAsB,EACtBC,iBAAiB,EACjBC,gCAAgC,EAChCC,0BAA0B,EAC1BC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/Tab.tsx"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,WAAW;AAC3C,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,wBAAwB;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":["import * 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,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,WAAW;AAC3C,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,wBAAwB;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.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\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"],"names":[],"rangeMappings":";;","mappings":"AA6CA;;CAEC,GACD,WA+BI"}
+{"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\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"],"names":[],"mappings":"AA6CA;;CAEC,GACD,WA+BI"}

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, TabProps, TabSlots, TabState, TabValue } from './Tab.types';\nexport { renderTab_unstable } from './renderTab';\nexport { useTab_unstable } from './useTab';\nexport {\n  tabClassNames,\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","tabClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTabAnimatedIndicatorStyles_unstable"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,QAAQ;AAE5B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,eAAe,QAAQ,WAAW;AAC3C,SACEC,aAAa,EACbC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,QAChB,wBAAwB;AAC/B,SAASC,sCAAsC,QAAQ,mCAAmC"}
+{"version":3,"sources":["../src/components/Tab/index.ts"],"sourcesContent":["export { Tab } from './Tab';\nexport type { TabInternalSlots, TabProps, TabSlots, TabState, TabValue } from './Tab.types';\nexport { renderTab_unstable } from './renderTab';\nexport { useTab_unstable } from './useTab';\nexport {\n  tabClassNames,\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","tabClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTabAnimatedIndicatorStyles_unstable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,QAAQ;AAE5B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,eAAe,QAAQ,WAAW;AAC3C,SACEC,aAAa,EACbC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,QAChB,wBAAwB;AAC/B,SAASC,sCAAsC,QAAQ,mCAAmC"}

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 { TabState, TabInternalSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;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 { TabState, TabInternalSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\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;AAGxD;;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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n  omit,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\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, onClick, onFocus, value } = props;\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n  const size = useTabListContext_unstable(ctx => ctx.size);\n  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n  const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n  const focusProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\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 iconSlot = slot.optional(icon, { elementType: 'span' });\n  const contentSlot = slot.always(content, {\n    defaultProps: { children: props.children },\n    elementType: 'span',\n  });\n  const contentReservedSpace: typeof content =\n    content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n  const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n  return {\n    components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\n        role: 'tab',\n        type: 'button',\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}` as 'true' | 'false'),\n        ...focusProps,\n        ...props,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      }),\n      { elementType: 'button' },\n    ) as TabState['root'],\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    contentReservedSpace: slot.optional(contentReservedSpace, {\n      renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"names":["React","useTabsterAttributes","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","focusProps","focusable","isDefault","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","contentReservedSpace","iconOnly","Boolean","components","root","role","type","undefined","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SACEC,wBAAwB,EACxBC,cAAc,EACdC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,EACJC,IAAI,QACC,4BAA4B;AAEnC,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC;IAC/C,MAAM,EAAEC,OAAO,EAAEC,UAAUC,cAAc,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGR;IAElF,MAAMS,aAAaX,2BAA2BY,CAAAA,MAAOA,IAAID,UAAU;IACnE,MAAME,0BAA0Bb,2BAA2BY,CAAAA,MAAOA,IAAIC,uBAAuB;IAC7F,MAAMC,mBAAmBd,2BAA2BY,CAAAA,MAAOA,IAAIE,gBAAgB;IAC/E,MAAMC,eAAef,2BAA2BY,CAAAA,MAAOA,IAAIP,QAAQ;IACnE,MAAMW,WAAWhB,2BAA2BY,CAAAA,MAAOA,IAAIK,aAAa,KAAKP;IACzE,MAAMQ,aAAalB,2BAA2BY,CAAAA,MAAOA,IAAIM,UAAU;IACnE,MAAMC,eAAenB,2BAA2BY,CAAAA,MAAOA,IAAIO,YAAY;IACvE,MAAMC,WAAWpB,2BAA2BY,CAAAA,MAAOA,IAAIQ,QAAQ;IAC/D,MAAMC,OAAOrB,2BAA2BY,CAAAA,MAAOA,IAAIS,IAAI;IACvD,MAAMC,WAAWtB,2BAA2BY,CAAAA,MAAO,CAAC,CAACA,IAAIU,QAAQ;IACjE,MAAMjB,WAAWU,gBAAgBT;IAEjC,MAAMiB,WAAW/B,MAAMgC,MAAM,CAAc;IAC3C,MAAMC,mBAAmB,CAACC,QAA0BN,SAASM,OAAO;YAAEhB;QAAM;IAC5E,MAAMiB,aAAa/B,iBAAiBD,eAAea,SAASiB;IAC5D,MAAMG,aAAahC,iBAAiBD,eAAec,SAASgB;IAE5D,MAAMI,aAAapC,qBAAqB;QACtCqC,WAAW;YAAEC,WAAWf;QAAS;IACnC;IAEAxB,MAAMwC,SAAS,CAAC;QACdd,WAAW;YACTR;YACAP,KAAKoB;QACP;QAEA,OAAO;YACLJ,aAAa;gBAAET;gBAAOP,KAAKoB;YAAS;QACtC;IACF,GAAG;QAACL;QAAYC;QAAcI;QAAUb;KAAM;IAE9C,MAAMuB,WAAWnC,KAAKoC,QAAQ,CAAC3B,MAAM;QAAE4B,aAAa;IAAO;IAC3D,MAAMC,cAActC,KAAKuC,MAAM,CAACjC,SAAS;QACvCkC,cAAc;YAAEC,UAAUrC,MAAMqC,QAAQ;QAAC;QACzCJ,aAAa;IACf;IACA,MAAMK,uBACJpC,WAAW,OAAOA,YAAY,WAAWL,KAAKK,SAAS;QAAC;KAA8B,IAAIA;IAC5F,MAAMqC,WAAWC,QAAQT,CAAAA,qBAAAA,+BAAAA,SAAUM,QAAQ,KAAI,CAACH,YAAYG,QAAQ;IACpE,OAAO;QACLI,YAAY;YAAEC,MAAM;YAAUrC,MAAM;YAAQH,SAAS;YAAQoC,sBAAsB;QAAO;QAC1FI,MAAM9C,KAAKuC,MAAM,CACf3C,yBAAyB,UAAU;YACjC,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FS,KAAKN,cAAcM,KAAKoB;YACxBsB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBzC,WAAW0C,YAAa,CAAC,EAAE/B,SAAS,CAAC;YACtD,GAAGa,UAAU;YACb,GAAG3B,KAAK;YACRG;YACAG,SAASmB;YACTlB,SAASK,mBAAmBc,aAAanB;QAC3C,IACA;YAAE0B,aAAa;QAAS;QAE1B5B,MAAM0B;QACNQ;QACArC,SAASgC;QACTI,sBAAsB1C,KAAKoC,QAAQ,CAACM,sBAAsB;YACxDQ,iBAAiB,CAAChC,YAAY,CAACyB,YAAY5B;YAC3CyB,cAAc;gBAAEC,UAAUrC,MAAMqC,QAAQ;YAAC;YACzCJ,aAAa;QACf;QACAxB;QACAN;QACAW;QACAK;QACAX;QACAY;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n  omit,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\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, onClick, onFocus, value } = props;\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n  const size = useTabListContext_unstable(ctx => ctx.size);\n  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n  const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n  const focusProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\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 iconSlot = slot.optional(icon, { elementType: 'span' });\n  const contentSlot = slot.always(content, {\n    defaultProps: { children: props.children },\n    elementType: 'span',\n  });\n  const contentReservedSpace: typeof content =\n    content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n  const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n  return {\n    components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\n        role: 'tab',\n        type: 'button',\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}` as 'true' | 'false'),\n        ...focusProps,\n        ...props,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      }),\n      { elementType: 'button' },\n    ) as TabState['root'],\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    contentReservedSpace: slot.optional(contentReservedSpace, {\n      renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"names":["React","useTabsterAttributes","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","focusProps","focusable","isDefault","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","contentReservedSpace","iconOnly","Boolean","components","root","role","type","undefined","renderByDefault"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/useTabAnimatedIndicator.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\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    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 = isValueDefined(value) ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n  return element ? calculateTabRect(element) : undefined;\n};\n\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value: TabValue) => value != null;\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 = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n\n  const [requestAnimationFrame] = useAnimationFrame();\n\n  if (selected) {\n    const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n\n    if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n      const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n      const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n      if (selectedTabRect && previousSelectedTabRect) {\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        // Reset the animation values after the animation is complete\n        requestAnimationFrame(() => setAnimationValues({ offset: 0, scale: 1 }));\n      }\n    }\n  } else if (isValueDefined(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"],"names":["React","makeStyles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","overflow","animated","transitionProperty","transitionDuration","durationSlow","transitionTimingFunction","curveDecelerateMax","horizontal","transformOrigin","transform","vertical","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","requestAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Tab/useTabAnimatedIndicator.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\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    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 = isValueDefined(value) ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n  return element ? calculateTabRect(element) : undefined;\n};\n\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value: TabValue) => value != null;\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 = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n\n  const [requestAnimationFrame] = useAnimationFrame();\n\n  if (selected) {\n    const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n\n    if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n      const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n      const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n      if (selectedTabRect && previousSelectedTabRect) {\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        // Reset the animation values after the animation is complete\n        requestAnimationFrame(() => setAnimationValues({ offset: 0, scale: 1 }));\n      }\n    }\n  } else if (isValueDefined(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"],"names":["React","makeStyles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","overflow","animated","transitionProperty","transitionDuration","durationSlow","transitionTimingFunction","curveDecelerateMax","horizontal","transformOrigin","transform","vertical","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","requestAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"mappings":"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"}

package/lib/components/Tab/useTabStyles.styles.js

@@ -209,10 +209,20 @@ const useCircularAppearanceStyles = /*#__PURE__*/__styles({
     Bptxc3x: "ftorr8m",
     cl4aha: "f16lqpmv"
   },
+  small: {
+    Dbcxam: 0,
+    rjzwhg: 0,
+    Bblux5w: "fzklhed"
+  },
   medium: {
     Dbcxam: 0,
     rjzwhg: 0,
-    Bblux5w: "f1lj1ynd"
+    Bblux5w: "f1j721cc"
+  },
+  large: {
+    Dbcxam: 0,
+    rjzwhg: 0,
+    Bblux5w: "frx9knr"
   },
   subtle: {
     De3pzq: "fhovq9v",
@@ -429,7 +439,11 @@ const useCircularAppearanceStyles = /*#__PURE__*/__styles({
     p: -1
   }], [".fp7rvkm{border:solid var(--strokeWidthThin) var(--colorTransparentStroke);}", {
     p: -2
-  }], ".ftorr8m .fui-Tab__icon{color:inherit;}", ".f16lqpmv .fui-Tab__content{color:inherit;}", [".f1lj1ynd{padding-block:var(--spacingVerticalSNudge);}", {
+  }], ".ftorr8m .fui-Tab__icon{color:inherit;}", ".f16lqpmv .fui-Tab__content{color:inherit;}", [".fzklhed{padding-block:calc(var(--spacingVerticalXXS) - var(--strokeWidthThin));}", {
+    p: -1
+  }], [".f1j721cc{padding-block:calc(var(--spacingVerticalSNudge) - var(--strokeWidthThin));}", {
+    p: -1
+  }], [".frx9knr{padding-block:calc(var(--spacingVerticalS) - var(--strokeWidthThin));}", {
     p: -1
   }], ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1bifk9c:enabled:hover{background-color:var(--colorSubtleBackgroundHover);}", [".ft57sj0:enabled:hover{border:solid var(--strokeWidthThin) var(--colorNeutralStroke1Hover);}", {
     p: -2
@@ -820,7 +834,7 @@ export const useTabButtonStyles_unstable = (state, slot) => {
   const isCircular = isSubtleCircular || isFilledCircular;
   const circularAppearance = [circularStyles.base, focusStyles.circular,
   // sizes
-  size === 'medium' && circularStyles.medium,
+  size === 'small' && circularStyles.small, size === 'medium' && circularStyles.medium, size === 'large' && circularStyles.large,
   // subtle-circular appearance
   isSubtleCircular && circularStyles.subtle, selected && isSubtleCircular && circularStyles.subtleSelected, disabled && isSubtleCircular && circularStyles.subtleDisabled, selected && disabled && isSubtleCircular && circularStyles.subtleDisabledSelected,
   // filled-circular appearance

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","Bt984gj","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","oeaueh","qhf8xq","button","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bceei9c","Bahqtrf","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","B95qlz1","B7xitij","Bptxc3x","Bwqhzpy","iyk698","cl4aha","B0q3jbp","Be9ayug","subtle","disabledCursor","disabled","selected","d","p","useCircularAppearanceStyles","base","medium","Dbcxam","rjzwhg","Bblux5w","sj55zd","Eo63ln","r9osk6","Itrz8y","zeg6vx","l65xgk","Bw4olcx","Folb0i","I2h8y4","Bgxgoyi","Bvlkotb","Fwyncl","Byh5edv","Becqvjq","uumbiq","B73q3dg","Bblwbaf","B0ezav","r4wkhp","d3wsvi","Hdqn7s","zu5y1p","owqphb","g9c53k","Btmu08z","Bthxvy6","gluvuq","tb88gp","wns6jk","kdfdk4","Bbw008l","Bayi1ib","B1kkfu3","J1oqyp","kem6az","goa3yj","p743kt","uu68id","Bxeuatn","felo30","Bc736ss","Bhz882k","n51gp8","Eshu5l","Bk6ri7n","v49c4f","Bn1d65q","c4eypz","v3aym","hft9gk","Bjwas2f","Bk5ld8o","gwxt9v","B6k8go","subtleSelected","subtleDisabled","subtleDisabledSelected","Bw5j0gk","Baikq8m","B2ndh17","w0x64w","Bdzpij4","filledSelected","bml8oc","qew46a","B84x17g","Jetwu1","filledDisabled","filledDisabledSelected","m","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","circular","usePendingIndicatorStyles","az7l2e","vqofr","Bv4n3vi","Bgqb9hq","B0uxbk8","Bf3jju6","amg5m6","zkfqfm","Bkydozb","Bka2azo","vzq8l0","csmgbd","Br4ovkg","aelrif","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","h","a","useActiveIndicatorStyles","Bjyk6c5","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","E3zdtr","Bej4dhw","B7wqxwa","f7digc","Bvuzv5k","k4sdgo","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","useTabStyles_unstable","state","useTabIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","rootStyles","pendingIndicatorStyles","activeIndicatorStyles","appearance","size","classes","push","className","slot","focusStyles","circularStyles","isSubtleCircular","isFilledCircular","isCircular","circularAppearance","regularAppearance","iconStyles","contentStyles","contentReservedSpace","contentReservedSpaceClassName"],"sources":["useTabStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\nexport const tabClassNames = {\n    root: 'fui-Tab',\n    icon: 'fui-Tab__icon',\n    content: 'fui-Tab__content'\n};\nconst reservedSpaceClassNames = {\n    content: 'fui-Tab__content--reserved-space'\n};\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n    filled: 'fui-Icon-filled',\n    regular: 'fui-Icon-regular'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        display: 'grid',\n        flexShrink: 0,\n        gridAutoFlow: 'column',\n        gridTemplateColumns: 'auto',\n        gridTemplateRows: 'auto',\n        outlineStyle: 'none',\n        position: 'relative'\n    },\n    button: {\n        alignItems: 'center',\n        border: 'none',\n        borderRadius: tokens.borderRadiusMedium,\n        cursor: 'pointer',\n        display: 'grid',\n        flexShrink: 0,\n        gridAutoFlow: 'column',\n        gridTemplateColumns: 'auto',\n        gridTemplateRows: 'auto',\n        fontFamily: tokens.fontFamilyBase,\n        lineHeight: tokens.lineHeightBase300,\n        outlineStyle: 'none',\n        position: 'relative',\n        overflow: 'hidden',\n        textTransform: 'none'\n    },\n    horizontal: {\n        justifyContent: 'center'\n    },\n    vertical: {\n        justifyContent: 'start'\n    },\n    smallHorizontal: {\n        columnGap: tokens.spacingHorizontalXXS,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalSNudge}`\n    },\n    smallVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalXXS,\n        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`\n    },\n    mediumHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalMNudge}`\n    },\n    mediumVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalMNudge}`\n    },\n    largeHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalMNudge}`\n    },\n    largeVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':enabled:hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':enabled:active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        },\n        [`& .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        [`:enabled:hover .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        [`:enabled:active .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        [`& .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        [`:enabled:hover .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        [`:enabled:active .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        ':enabled:hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':enabled:active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        },\n        [`& .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        [`:enabled:hover .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        [`:enabled:active .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        [`& .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        [`:enabled:hover .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        [`:enabled:active .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    disabledCursor: {\n        cursor: 'not-allowed'\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        [`& .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        [`& .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    selected: {\n        [`& .${tabClassNames.icon}`]: {\n            color: tokens.colorCompoundBrandForeground1\n        },\n        [`:enabled:hover .${tabClassNames.icon}`]: {\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        [`:enabled:active .${tabClassNames.icon}`]: {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        [`& .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        [`:enabled:hover .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground1Hover\n        },\n        [`:enabled:active .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground1Pressed\n        }\n    }\n});\nconst useCircularAppearanceStyles = makeStyles({\n    base: {\n        borderRadius: tokens.borderRadiusCircular,\n        border: `solid ${tokens.strokeWidthThin} ${tokens.colorTransparentStroke}`,\n        [`& .${tabClassNames.icon}`]: {\n            color: 'inherit'\n        },\n        [`& .${tabClassNames.content}`]: {\n            color: 'inherit'\n        }\n    },\n    medium: {\n        paddingBlock: `${tokens.spacingVerticalSNudge}`\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForeground2,\n        ':enabled:hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Hover}`,\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':enabled:active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Pressed}`,\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '@media (forced-colors: active)': {\n            border: `solid ${tokens.strokeWidthThin} Canvas`\n        }\n    },\n    subtleSelected: {\n        backgroundColor: tokens.colorBrandBackground2,\n        border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStroke}`,\n        color: tokens.colorBrandForeground2,\n        ':enabled:hover': {\n            backgroundColor: tokens.colorBrandBackground2Hover,\n            border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokeHover}`,\n            color: tokens.colorBrandForeground2Hover\n        },\n        ':enabled:active': {\n            backgroundColor: tokens.colorBrandBackground2Pressed,\n            border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokePressed}`,\n            color: tokens.colorBrandForeground2Pressed\n        },\n        '@media (forced-colors: active)': {\n            border: `solid ${tokens.strokeWidthThin} Highlight`\n        }\n    },\n    subtleDisabled: {\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForegroundDisabled\n    },\n    subtleDisabledSelected: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,\n        color: tokens.colorNeutralForegroundDisabled\n    },\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground2,\n        ':enabled:hover': {\n            backgroundColor: tokens.colorNeutralBackground3Hover,\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':enabled:active': {\n            backgroundColor: tokens.colorNeutralBackground3Pressed,\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '@media (forced-colors: active)': {\n            ':enabled:hover': {\n                backgroundColor: 'Highlight',\n                forcedColorAdjust: 'none',\n                [`& .${tabClassNames.content}`]: {\n                    color: 'HighlightText'\n                },\n                [`& .${iconClassNames.filled}`]: {\n                    color: 'HighlightText'\n                },\n                [`& .${iconClassNames.regular}`]: {\n                    color: 'HighlightText'\n                }\n            }\n        }\n    },\n    filledSelected: {\n        backgroundColor: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand,\n        ':enabled:hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':enabled:active': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        '@media (forced-colors: active)': {\n            ':enabled': {\n                backgroundColor: 'ButtonText',\n                [`& .${tabClassNames.content}`]: {\n                    color: 'ButtonFace',\n                    forcedColorAdjust: 'none'\n                }\n            },\n            [`:enabled .${tabClassNames.icon}`]: {\n                color: 'ButtonFace'\n            }\n        }\n    },\n    filledDisabled: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled\n    },\n    filledDisabledSelected: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,\n        color: tokens.colorNeutralForegroundDisabled\n    }\n});\n/**\n * Focus styles for the root slot\n */ const useFocusStyles = makeStyles({\n    // Tab creates a custom focus indicator because the default focus indicator\n    // is applied using an ::after pseudo-element on the root. Since the selection\n    // indicator uses an ::after pseudo-element on the root, there is a conflict.\n    base: createCustomFocusIndicatorStyle({\n        ...shorthands.borderColor('transparent'),\n        outlineWidth: tokens.strokeWidthThick,\n        outlineColor: 'transparent',\n        outlineStyle: 'solid',\n        boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n        zIndex: 1\n    }, {\n        enableOutline: true\n    }),\n    circular: createCustomFocusIndicatorStyle({\n        ...shorthands.borderColor('transparent'),\n        outlineWidth: tokens.strokeWidthThick,\n        outlineColor: 'transparent',\n        outlineStyle: 'solid',\n        boxShadow: `\n        ${tokens.shadow4},\n        0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2},\n        0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeOnBrand} inset\n      `,\n        zIndex: 1\n    }, {\n        enableOutline: true\n    })\n});\n/** Indicator styles for when pending selection */ const usePendingIndicatorStyles = makeStyles({\n    base: {\n        ':hover::before': {\n            backgroundColor: tokens.colorNeutralStroke1Hover,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorNeutralStroke1Pressed,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        },\n        '@media (forced-colors: active)': {\n            ':hover::before': {\n                backgroundColor: 'Highlight'\n            },\n            ':active::before': {\n                backgroundColor: 'Highlight'\n            }\n        }\n    },\n    disabled: {\n        ':hover::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        },\n        '@media (forced-colors: active)': {\n            ':hover::before': {\n                backgroundColor: 'transparent'\n            },\n            ':active::before': {\n                backgroundColor: 'transparent'\n            }\n        }\n    },\n    smallHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalXS,\n            left: 0,\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        '::after': {\n            backgroundColor: tokens.colorTransparentStroke,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        }\n    },\n    selected: {\n        '::after': {\n            backgroundColor: tokens.colorCompoundBrandStroke\n        },\n        ':enabled:hover::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokeHover\n        },\n        ':enabled:active::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokePressed\n        },\n        '@media (forced-colors: active)': {\n            '::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':enabled:hover::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':enabled:active::after': {\n                backgroundColor: 'ButtonText'\n            }\n        }\n    },\n    disabled: {\n        '::after': {\n            backgroundColor: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    smallHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalXS,\n            left: '0',\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::after': {\n            bottom: '0',\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\n/**\n * Styles for the icon slot.\n */ const useIconStyles = makeStyles({\n    base: {\n        gridColumnStart: 1,\n        gridRowStart: 1,\n        alignItems: 'center',\n        display: 'inline-flex',\n        justifyContent: 'center',\n        overflow: 'hidden',\n        [`& .${iconClassNames.filled}`]: {\n            display: 'none'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'inline'\n        }\n    },\n    // per design, the small and medium font sizes are the same.\n    // the size prop only affects spacing.\n    small: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    medium: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    large: {\n        fontSize: '24px',\n        height: '24px',\n        width: '24px'\n    },\n    selected: {\n        [`& .${iconClassNames.filled}`]: {\n            display: 'inline'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'none'\n        }\n    }\n});\n/**\n * Styles for the content slot (children)\n */ const useContentStyles = makeStyles({\n    base: {\n        ...typographyStyles.body1,\n        overflow: 'hidden',\n        // content padding is the same for medium & small, horizontal & vertical\n        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXXS}`\n    },\n    selected: {\n        ...typographyStyles.body1Strong\n    },\n    large: {\n        ...typographyStyles.body2\n    },\n    largeSelected: {\n        ...typographyStyles.subtitle2\n    },\n    noIconBefore: {\n        gridColumnStart: 1,\n        gridRowStart: 1\n    },\n    iconBefore: {\n        gridColumnStart: 2,\n        gridRowStart: 1\n    },\n    placeholder: {\n        visibility: 'hidden'\n    }\n});\n/**\n * Apply styling to the Tab slots based on the state\n */ export const useTabStyles_unstable = (state)=>{\n    'use no memo';\n    useTabIndicatorStyles_unstable(state);\n    useTabButtonStyles_unstable(state, state.root);\n    useTabContentStyles_unstable(state);\n    return state;\n};\n/**\n * Applies styles for the Tab indicator based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The `Tab` component's current state\n * @returns The state object with updated button styles\n */ export const useTabIndicatorStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const pendingIndicatorStyles = usePendingIndicatorStyles();\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const { appearance, disabled, selected, size, vertical } = state;\n    const classes = [\n        tabClassNames.root,\n        rootStyles.root\n    ];\n    if (appearance !== 'subtle-circular' && appearance !== 'filled-circular') {\n        classes.push(// pending indicator (before pseudo element)\n        pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)\n        selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled);\n    }\n    state.root.className = mergeClasses(...classes, state.root.className);\n    useTabAnimatedIndicatorStyles_unstable(state);\n    return state;\n};\n/**\n * Applies styles to the Tab button slot based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The Tab component's current state\n * @param slot - The button slot of the Tab component\n * @returns The state object with updated button styles\n */ export const useTabButtonStyles_unstable = (state, slot)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const circularStyles = useCircularAppearanceStyles();\n    const { appearance, disabled, selected, size, vertical } = state;\n    const isSubtleCircular = appearance === 'subtle-circular';\n    const isFilledCircular = appearance === 'filled-circular';\n    const isCircular = isSubtleCircular || isFilledCircular;\n    const circularAppearance = [\n        circularStyles.base,\n        focusStyles.circular,\n        // sizes\n        size === 'medium' && circularStyles.medium,\n        // subtle-circular appearance\n        isSubtleCircular && circularStyles.subtle,\n        selected && isSubtleCircular && circularStyles.subtleSelected,\n        disabled && isSubtleCircular && circularStyles.subtleDisabled,\n        selected && disabled && isSubtleCircular && circularStyles.subtleDisabledSelected,\n        // filled-circular appearance\n        isFilledCircular && circularStyles.filled,\n        selected && isFilledCircular && circularStyles.filledSelected,\n        disabled && isFilledCircular && circularStyles.filledDisabled,\n        selected && disabled && isFilledCircular && circularStyles.filledDisabledSelected\n    ];\n    const regularAppearance = [\n        focusStyles.base,\n        !disabled && appearance === 'subtle' && rootStyles.subtle,\n        !disabled && appearance === 'transparent' && rootStyles.transparent,\n        !disabled && selected && rootStyles.selected,\n        disabled && rootStyles.disabled\n    ];\n    slot.className = mergeClasses(rootStyles.button, // orientation\n    vertical ? rootStyles.vertical : rootStyles.horizontal, // size\n    size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), ...isCircular ? circularAppearance : regularAppearance, disabled && rootStyles.disabledCursor, slot.className);\n    return state;\n};\n/**\n * Applies styles to the Tab content slot based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The Tab component's current state\n * @returns The state object with updated content styles\n */ export const useTabContentStyles_unstable = (state)=>{\n    'use no memo';\n    const iconStyles = useIconStyles();\n    const contentStyles = useContentStyles();\n    const { selected, size } = state;\n    if (state.icon) {\n        state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);\n    }\n    // This needs to be before state.content.className is updated\n    if (state.contentReservedSpace) {\n        state.contentReservedSpace.className = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);\n        // FIXME: this is a deprecated API\n        // should be removed in the next major version\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n    }\n    state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","Bt984gj","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","oeaueh","qhf8xq","button","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bceei9c","Bahqtrf","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","B95qlz1","B7xitij","Bptxc3x","Bwqhzpy","iyk698","cl4aha","B0q3jbp","Be9ayug","subtle","disabledCursor","disabled","selected","d","p","useCircularAppearanceStyles","base","small","Dbcxam","rjzwhg","Bblux5w","medium","large","sj55zd","Eo63ln","r9osk6","Itrz8y","zeg6vx","l65xgk","Bw4olcx","Folb0i","I2h8y4","Bgxgoyi","Bvlkotb","Fwyncl","Byh5edv","Becqvjq","uumbiq","B73q3dg","Bblwbaf","B0ezav","r4wkhp","d3wsvi","Hdqn7s","zu5y1p","owqphb","g9c53k","Btmu08z","Bthxvy6","gluvuq","tb88gp","wns6jk","kdfdk4","Bbw008l","Bayi1ib","B1kkfu3","J1oqyp","kem6az","goa3yj","p743kt","uu68id","Bxeuatn","felo30","Bc736ss","Bhz882k","n51gp8","Eshu5l","Bk6ri7n","v49c4f","Bn1d65q","c4eypz","v3aym","hft9gk","Bjwas2f","Bk5ld8o","gwxt9v","B6k8go","subtleSelected","subtleDisabled","subtleDisabledSelected","Bw5j0gk","Baikq8m","B2ndh17","w0x64w","Bdzpij4","filledSelected","bml8oc","qew46a","B84x17g","Jetwu1","filledDisabled","filledDisabledSelected","m","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","circular","usePendingIndicatorStyles","az7l2e","vqofr","Bv4n3vi","Bgqb9hq","B0uxbk8","Bf3jju6","amg5m6","zkfqfm","Bkydozb","Bka2azo","vzq8l0","csmgbd","Br4ovkg","aelrif","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","h","a","useActiveIndicatorStyles","Bjyk6c5","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","E3zdtr","Bej4dhw","B7wqxwa","f7digc","Bvuzv5k","k4sdgo","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","Be2twd7","Bqenvij","a9b677","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","useTabStyles_unstable","state","useTabIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","rootStyles","pendingIndicatorStyles","activeIndicatorStyles","appearance","size","classes","push","className","slot","focusStyles","circularStyles","isSubtleCircular","isFilledCircular","isCircular","circularAppearance","regularAppearance","iconStyles","contentStyles","contentReservedSpace","contentReservedSpaceClassName"],"sources":["useTabStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\nexport const tabClassNames = {\n    root: 'fui-Tab',\n    icon: 'fui-Tab__icon',\n    content: 'fui-Tab__content'\n};\nconst reservedSpaceClassNames = {\n    content: 'fui-Tab__content--reserved-space'\n};\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n    filled: 'fui-Icon-filled',\n    regular: 'fui-Icon-regular'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        display: 'grid',\n        flexShrink: 0,\n        gridAutoFlow: 'column',\n        gridTemplateColumns: 'auto',\n        gridTemplateRows: 'auto',\n        outlineStyle: 'none',\n        position: 'relative'\n    },\n    button: {\n        alignItems: 'center',\n        border: 'none',\n        borderRadius: tokens.borderRadiusMedium,\n        cursor: 'pointer',\n        display: 'grid',\n        flexShrink: 0,\n        gridAutoFlow: 'column',\n        gridTemplateColumns: 'auto',\n        gridTemplateRows: 'auto',\n        fontFamily: tokens.fontFamilyBase,\n        lineHeight: tokens.lineHeightBase300,\n        outlineStyle: 'none',\n        position: 'relative',\n        overflow: 'hidden',\n        textTransform: 'none'\n    },\n    horizontal: {\n        justifyContent: 'center'\n    },\n    vertical: {\n        justifyContent: 'start'\n    },\n    smallHorizontal: {\n        columnGap: tokens.spacingHorizontalXXS,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalSNudge}`\n    },\n    smallVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalXXS,\n        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`\n    },\n    mediumHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalMNudge}`\n    },\n    mediumVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalMNudge}`\n    },\n    largeHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalMNudge}`\n    },\n    largeVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':enabled:hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':enabled:active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        },\n        [`& .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        [`:enabled:hover .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        [`:enabled:active .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        [`& .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        [`:enabled:hover .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        [`:enabled:active .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        ':enabled:hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':enabled:active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        },\n        [`& .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        [`:enabled:hover .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        [`:enabled:active .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        [`& .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        [`:enabled:hover .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        [`:enabled:active .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    disabledCursor: {\n        cursor: 'not-allowed'\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        [`& .${tabClassNames.icon}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        [`& .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    selected: {\n        [`& .${tabClassNames.icon}`]: {\n            color: tokens.colorCompoundBrandForeground1\n        },\n        [`:enabled:hover .${tabClassNames.icon}`]: {\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        [`:enabled:active .${tabClassNames.icon}`]: {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        [`& .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        [`:enabled:hover .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground1Hover\n        },\n        [`:enabled:active .${tabClassNames.content}`]: {\n            color: tokens.colorNeutralForeground1Pressed\n        }\n    }\n});\nconst useCircularAppearanceStyles = makeStyles({\n    base: {\n        borderRadius: tokens.borderRadiusCircular,\n        border: `solid ${tokens.strokeWidthThin} ${tokens.colorTransparentStroke}`,\n        [`& .${tabClassNames.icon}`]: {\n            color: 'inherit'\n        },\n        [`& .${tabClassNames.content}`]: {\n            color: 'inherit'\n        }\n    },\n    small: {\n        paddingBlock: `calc(${tokens.spacingVerticalXXS} - ${tokens.strokeWidthThin})`\n    },\n    medium: {\n        paddingBlock: `calc(${tokens.spacingVerticalSNudge} - ${tokens.strokeWidthThin})`\n    },\n    large: {\n        paddingBlock: `calc(${tokens.spacingVerticalS} - ${tokens.strokeWidthThin})`\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForeground2,\n        ':enabled:hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Hover}`,\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':enabled:active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Pressed}`,\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '@media (forced-colors: active)': {\n            border: `solid ${tokens.strokeWidthThin} Canvas`\n        }\n    },\n    subtleSelected: {\n        backgroundColor: tokens.colorBrandBackground2,\n        border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStroke}`,\n        color: tokens.colorBrandForeground2,\n        ':enabled:hover': {\n            backgroundColor: tokens.colorBrandBackground2Hover,\n            border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokeHover}`,\n            color: tokens.colorBrandForeground2Hover\n        },\n        ':enabled:active': {\n            backgroundColor: tokens.colorBrandBackground2Pressed,\n            border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokePressed}`,\n            color: tokens.colorBrandForeground2Pressed\n        },\n        '@media (forced-colors: active)': {\n            border: `solid ${tokens.strokeWidthThin} Highlight`\n        }\n    },\n    subtleDisabled: {\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForegroundDisabled\n    },\n    subtleDisabledSelected: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,\n        color: tokens.colorNeutralForegroundDisabled\n    },\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground2,\n        ':enabled:hover': {\n            backgroundColor: tokens.colorNeutralBackground3Hover,\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':enabled:active': {\n            backgroundColor: tokens.colorNeutralBackground3Pressed,\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '@media (forced-colors: active)': {\n            ':enabled:hover': {\n                backgroundColor: 'Highlight',\n                forcedColorAdjust: 'none',\n                [`& .${tabClassNames.content}`]: {\n                    color: 'HighlightText'\n                },\n                [`& .${iconClassNames.filled}`]: {\n                    color: 'HighlightText'\n                },\n                [`& .${iconClassNames.regular}`]: {\n                    color: 'HighlightText'\n                }\n            }\n        }\n    },\n    filledSelected: {\n        backgroundColor: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand,\n        ':enabled:hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':enabled:active': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        '@media (forced-colors: active)': {\n            ':enabled': {\n                backgroundColor: 'ButtonText',\n                [`& .${tabClassNames.content}`]: {\n                    color: 'ButtonFace',\n                    forcedColorAdjust: 'none'\n                }\n            },\n            [`:enabled .${tabClassNames.icon}`]: {\n                color: 'ButtonFace'\n            }\n        }\n    },\n    filledDisabled: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled\n    },\n    filledDisabledSelected: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,\n        color: tokens.colorNeutralForegroundDisabled\n    }\n});\n/**\n * Focus styles for the root slot\n */ const useFocusStyles = makeStyles({\n    // Tab creates a custom focus indicator because the default focus indicator\n    // is applied using an ::after pseudo-element on the root. Since the selection\n    // indicator uses an ::after pseudo-element on the root, there is a conflict.\n    base: createCustomFocusIndicatorStyle({\n        ...shorthands.borderColor('transparent'),\n        outlineWidth: tokens.strokeWidthThick,\n        outlineColor: 'transparent',\n        outlineStyle: 'solid',\n        boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n        zIndex: 1\n    }, {\n        enableOutline: true\n    }),\n    circular: createCustomFocusIndicatorStyle({\n        ...shorthands.borderColor('transparent'),\n        outlineWidth: tokens.strokeWidthThick,\n        outlineColor: 'transparent',\n        outlineStyle: 'solid',\n        boxShadow: `\n        ${tokens.shadow4},\n        0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2},\n        0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeOnBrand} inset\n      `,\n        zIndex: 1\n    }, {\n        enableOutline: true\n    })\n});\n/** Indicator styles for when pending selection */ const usePendingIndicatorStyles = makeStyles({\n    base: {\n        ':hover::before': {\n            backgroundColor: tokens.colorNeutralStroke1Hover,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorNeutralStroke1Pressed,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        },\n        '@media (forced-colors: active)': {\n            ':hover::before': {\n                backgroundColor: 'Highlight'\n            },\n            ':active::before': {\n                backgroundColor: 'Highlight'\n            }\n        }\n    },\n    disabled: {\n        ':hover::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        },\n        '@media (forced-colors: active)': {\n            ':hover::before': {\n                backgroundColor: 'transparent'\n            },\n            ':active::before': {\n                backgroundColor: 'transparent'\n            }\n        }\n    },\n    smallHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalXS,\n            left: 0,\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        '::after': {\n            backgroundColor: tokens.colorTransparentStroke,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        }\n    },\n    selected: {\n        '::after': {\n            backgroundColor: tokens.colorCompoundBrandStroke\n        },\n        ':enabled:hover::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokeHover\n        },\n        ':enabled:active::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokePressed\n        },\n        '@media (forced-colors: active)': {\n            '::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':enabled:hover::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':enabled:active::after': {\n                backgroundColor: 'ButtonText'\n            }\n        }\n    },\n    disabled: {\n        '::after': {\n            backgroundColor: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    smallHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalXS,\n            left: '0',\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::after': {\n            bottom: '0',\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\n/**\n * Styles for the icon slot.\n */ const useIconStyles = makeStyles({\n    base: {\n        gridColumnStart: 1,\n        gridRowStart: 1,\n        alignItems: 'center',\n        display: 'inline-flex',\n        justifyContent: 'center',\n        overflow: 'hidden',\n        [`& .${iconClassNames.filled}`]: {\n            display: 'none'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'inline'\n        }\n    },\n    // per design, the small and medium font sizes are the same.\n    // the size prop only affects spacing.\n    small: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    medium: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    large: {\n        fontSize: '24px',\n        height: '24px',\n        width: '24px'\n    },\n    selected: {\n        [`& .${iconClassNames.filled}`]: {\n            display: 'inline'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'none'\n        }\n    }\n});\n/**\n * Styles for the content slot (children)\n */ const useContentStyles = makeStyles({\n    base: {\n        ...typographyStyles.body1,\n        overflow: 'hidden',\n        // content padding is the same for medium & small, horizontal & vertical\n        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXXS}`\n    },\n    selected: {\n        ...typographyStyles.body1Strong\n    },\n    large: {\n        ...typographyStyles.body2\n    },\n    largeSelected: {\n        ...typographyStyles.subtitle2\n    },\n    noIconBefore: {\n        gridColumnStart: 1,\n        gridRowStart: 1\n    },\n    iconBefore: {\n        gridColumnStart: 2,\n        gridRowStart: 1\n    },\n    placeholder: {\n        visibility: 'hidden'\n    }\n});\n/**\n * Apply styling to the Tab slots based on the state\n */ export const useTabStyles_unstable = (state)=>{\n    'use no memo';\n    useTabIndicatorStyles_unstable(state);\n    useTabButtonStyles_unstable(state, state.root);\n    useTabContentStyles_unstable(state);\n    return state;\n};\n/**\n * Applies styles for the Tab indicator based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The `Tab` component's current state\n * @returns The state object with updated button styles\n */ export const useTabIndicatorStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const pendingIndicatorStyles = usePendingIndicatorStyles();\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const { appearance, disabled, selected, size, vertical } = state;\n    const classes = [\n        tabClassNames.root,\n        rootStyles.root\n    ];\n    if (appearance !== 'subtle-circular' && appearance !== 'filled-circular') {\n        classes.push(// pending indicator (before pseudo element)\n        pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)\n        selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled);\n    }\n    state.root.className = mergeClasses(...classes, state.root.className);\n    useTabAnimatedIndicatorStyles_unstable(state);\n    return state;\n};\n/**\n * Applies styles to the Tab button slot based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The Tab component's current state\n * @param slot - The button slot of the Tab component\n * @returns The state object with updated button styles\n */ export const useTabButtonStyles_unstable = (state, slot)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const circularStyles = useCircularAppearanceStyles();\n    const { appearance, disabled, selected, size, vertical } = state;\n    const isSubtleCircular = appearance === 'subtle-circular';\n    const isFilledCircular = appearance === 'filled-circular';\n    const isCircular = isSubtleCircular || isFilledCircular;\n    const circularAppearance = [\n        circularStyles.base,\n        focusStyles.circular,\n        // sizes\n        size === 'small' && circularStyles.small,\n        size === 'medium' && circularStyles.medium,\n        size === 'large' && circularStyles.large,\n        // subtle-circular appearance\n        isSubtleCircular && circularStyles.subtle,\n        selected && isSubtleCircular && circularStyles.subtleSelected,\n        disabled && isSubtleCircular && circularStyles.subtleDisabled,\n        selected && disabled && isSubtleCircular && circularStyles.subtleDisabledSelected,\n        // filled-circular appearance\n        isFilledCircular && circularStyles.filled,\n        selected && isFilledCircular && circularStyles.filledSelected,\n        disabled && isFilledCircular && circularStyles.filledDisabled,\n        selected && disabled && isFilledCircular && circularStyles.filledDisabledSelected\n    ];\n    const regularAppearance = [\n        focusStyles.base,\n        !disabled && appearance === 'subtle' && rootStyles.subtle,\n        !disabled && appearance === 'transparent' && rootStyles.transparent,\n        !disabled && selected && rootStyles.selected,\n        disabled && rootStyles.disabled\n    ];\n    slot.className = mergeClasses(rootStyles.button, // orientation\n    vertical ? rootStyles.vertical : rootStyles.horizontal, // size\n    size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), ...isCircular ? circularAppearance : regularAppearance, disabled && rootStyles.disabledCursor, slot.className);\n    return state;\n};\n/**\n * Applies styles to the Tab content slot based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The Tab component's current state\n * @returns The state object with updated content styles\n */ export const useTabContentStyles_unstable = (state)=>{\n    'use no memo';\n    const iconStyles = useIconStyles();\n    const contentStyles = useContentStyles();\n    const { selected, size } = state;\n    if (state.icon) {\n        state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);\n    }\n    // This needs to be before state.content.className is updated\n    if (state.contentReservedSpace) {\n        state.contentReservedSpace.className = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);\n        // FIXME: this is a deprecated API\n        // should be removed in the next major version\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n    }\n    state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Tab/useTabStyles.styles.raw.js

@@ -177,8 +177,14 @@ const useCircularAppearanceStyles = makeStyles({
             color: 'inherit'
         }
     },
+    small: {
+        paddingBlock: `calc(${tokens.spacingVerticalXXS} - ${tokens.strokeWidthThin})`
+    },
     medium: {
-        paddingBlock: `${tokens.spacingVerticalSNudge}`
+        paddingBlock: `calc(${tokens.spacingVerticalSNudge} - ${tokens.strokeWidthThin})`
+    },
+    large: {
+        paddingBlock: `calc(${tokens.spacingVerticalS} - ${tokens.strokeWidthThin})`
     },
     subtle: {
         backgroundColor: tokens.colorSubtleBackground,
@@ -623,7 +629,9 @@ const useActiveIndicatorStyles = makeStyles({
         circularStyles.base,
         focusStyles.circular,
         // sizes
+        size === 'small' && circularStyles.small,
         size === 'medium' && circularStyles.medium,
+        size === 'large' && circularStyles.large,
         // subtle-circular appearance
         isSubtleCircular && circularStyles.subtle,
         selected && isSubtleCircular && circularStyles.subtleSelected,