@fluentui/react-tabs 9.5.2 → 9.6.1

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Tue, 08 Oct 2024 22:02:32 GMT and should not be manually modified.
+This log was last generated on Mon, 11 Nov 2024 09:55:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.6.1)
+
+Mon, 11 Nov 2024 09:55:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.6.0..@fluentui/react-tabs_v9.6.1)
+
+### Patches
+
+- chore: replace npm-scripts and just-scrtips with nx inferred tasks ([PR #33074](https://github.com/microsoft/fluentui/pull/33074) by martinhochel@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.69 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.46 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.21.0 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
+- Bump @fluentui/react-tabster to v9.23.0 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
+- Bump @fluentui/react-theme to v9.1.22 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
+- Bump @fluentui/react-utilities to v9.18.17 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
+
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.6.0)
+
+Tue, 15 Oct 2024 17:17:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.5.2..@fluentui/react-tabs_v9.6.0)
+
+### Minor changes
+
+- feature: add rounded tab variant ([PR #32944](https://github.com/microsoft/fluentui/pull/32944) by kirpadv@gmail.com)
+- Bump @fluentui/react-context-selector to v9.1.68 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.45 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.20.2 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-tabster to v9.22.9 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-theme to v9.1.21 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-utilities to v9.18.16 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+
 ## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.5.2)
 
-Tue, 08 Oct 2024 22:02:32 GMT 
+Tue, 08 Oct 2024 22:05:59 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.5.1..@fluentui/react-tabs_v9.5.2)
 
 ### Patches

package/dist/index.d.ts

@@ -87,10 +87,13 @@ export declare type TabListProps = ComponentProps<TabListSlots> & {
      * A tab list can supports 'transparent' and 'subtle' appearance.
      *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
      *- 'transparent': No background and border styling
+     *- 'subtle-circular': Adds background and border styling
+     *- 'filled-circular': Adds background styling
+     *
      * The appearance affects each of the contained tabs.
      * @default 'transparent'
      */
-    appearance?: 'transparent' | 'subtle';
+    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';
     /**
      * Tab size may change between unselected and selected states.
      * The default scenario is a selected tab has bold text.
@@ -196,9 +199,9 @@ export declare type TabSlots = {
  */
 export declare type TabState = ComponentState<TabInternalSlots> & Pick<TabProps, 'value'> & Required<Pick<TabProps, 'disabled'>> & {
     /**
-     * A tab supports 'transparent' and 'subtle' appearance.
+     * A tab supports 'transparent', 'subtle', `subtle-circular` and `filled-circular` appearance.
      */
-    appearance?: 'transparent' | 'subtle';
+    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';
     /**
      * A tab can have only an icon slot filled and no content.
      */

package/lib/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tab.ts"],"sourcesContent":["export * from './components/Tab/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,yBAAyB"}
+{"version":3,"sources":["../src/Tab.ts"],"sourcesContent":["export * from './components/Tab/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,yBAAyB"}

package/lib/TabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TabList.ts"],"sourcesContent":["export * from './components/TabList/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,6BAA6B"}
+{"version":3,"sources":["../src/TabList.ts"],"sourcesContent":["export * from './components/TabList/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,6BAA6B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["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"],"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["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'> &\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' and 'subtle' appearance.\n     */\n    appearance?: 'transparent' | 'subtle';\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,WA8BI"}
+{"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'> &\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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles.styles';\nexport * from './useTabAnimatedIndicator.styles';\n"],"names":[],"rangeMappings":";;;;;","mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,wBAAwB;AACtC,cAAc,mCAAmC"}
+{"version":3,"sources":["../src/components/Tab/index.ts"],"sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles.styles';\nexport * from './useTabAnimatedIndicator.styles';\n"],"names":[],"rangeMappings":";;;;;","mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,wBAAwB;AACtC,cAAc,mCAAmC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["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"],"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\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  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        ...props,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      }),\n      { elementType: 'button' },\n    ),\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","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","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","contentReservedSpace","iconOnly","Boolean","components","root","role","type","undefined","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\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  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        ...props,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      }),\n      { elementType: 'button' },\n    ),\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","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","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,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,WAAW9B,MAAM+B,MAAM,CAAc;IAC3C,MAAMC,mBAAmB,CAACC,QAA0BN,SAASM,OAAO;YAAEhB;QAAM;IAC5E,MAAMiB,aAAa/B,iBAAiBD,eAAea,SAASiB;IAC5D,MAAMG,aAAahC,iBAAiBD,eAAec,SAASgB;IAE5DhC,MAAMoC,SAAS,CAAC;QACdX,WAAW;YACTR;YACAP,KAAKoB;QACP;QAEA,OAAO;YACLJ,aAAa;gBAAET;gBAAOP,KAAKoB;YAAS;QACtC;IACF,GAAG;QAACL;QAAYC;QAAcI;QAAUb;KAAM;IAE9C,MAAMoB,WAAWhC,KAAKiC,QAAQ,CAACxB,MAAM;QAAEyB,aAAa;IAAO;IAC3D,MAAMC,cAAcnC,KAAKoC,MAAM,CAAC9B,SAAS;QACvC+B,cAAc;YAAEC,UAAUlC,MAAMkC,QAAQ;QAAC;QACzCJ,aAAa;IACf;IACA,MAAMK,uBACJjC,WAAW,OAAOA,YAAY,WAAWL,KAAKK,SAAS;QAAC;KAA8B,IAAIA;IAC5F,MAAMkC,WAAWC,QAAQT,CAAAA,qBAAAA,+BAAAA,SAAUM,QAAQ,KAAI,CAACH,YAAYG,QAAQ;IACpE,OAAO;QACLI,YAAY;YAAEC,MAAM;YAAUlC,MAAM;YAAQH,SAAS;YAAQiC,sBAAsB;QAAO;QAC1FI,MAAM3C,KAAKoC,MAAM,CACfxC,yBAAyB,UAAU;YACjC,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FS,KAAKN,cAAcM,KAAKoB;YACxBmB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBtC,WAAWuC,YAAa,CAAC,EAAE5B,SAAS,CAAC;YACtD,GAAGd,KAAK;YACRG;YACAG,SAASmB;YACTlB,SAASK,mBAAmBc,aAAanB;QAC3C,IACA;YAAEuB,aAAa;QAAS;QAE1BzB,MAAMuB;QACNQ;QACAlC,SAAS6B;QACTI,sBAAsBvC,KAAKiC,QAAQ,CAACM,sBAAsB;YACxDQ,iBAAiB,CAAC7B,YAAY,CAACsB,YAAYzB;YAC3CsB,cAAc;gBAAEC,UAAUlC,MAAMkC,QAAQ;YAAC;YACzCJ,aAAa;QACf;QACArB;QACAN;QACAW;QACAK;QACAX;QACAY;IACF;AACF,EAAE"}

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

@@ -129,5 +129,4 @@ export const useTabAnimatedIndicatorStyles_unstable = state => {
     ...state.root.style
   };
   return state;
-};
-//# sourceMappingURL=useTabAnimatedIndicator.styles.js.map
+};

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

@@ -125,25 +125,25 @@ const useRootStyles = /*#__PURE__*/__styles({
   },
   transparent: {
     De3pzq: "f1c21dwh",
-    Jwef8y: "fjxutwb",
-    ecr2s2: "fophhak",
+    B95qlz1: "f9rvdkv",
+    B7xitij: "f1051ucx",
     Bptxc3x: "fmmjozx",
-    B076xvk: "f1mfqf41",
-    q9r9w5: "f10aiid4",
+    Bwqhzpy: "fqhzt5g",
+    iyk698: "f7l5cgy",
     cl4aha: "fpkze5g",
-    Bk452zc: "f149wc3x",
-    a4hkcw: "fjioou7"
+    B0q3jbp: "f1iywnoi",
+    Be9ayug: "f9n45c4"
   },
   subtle: {
     De3pzq: "fhovq9v",
-    Jwef8y: "f1t94bn6",
-    ecr2s2: "f1wfn5kd",
+    B95qlz1: "f1bifk9c",
+    B7xitij: "fo6hitd",
     Bptxc3x: "fmmjozx",
-    B076xvk: "f1mfqf41",
-    q9r9w5: "f10aiid4",
+    Bwqhzpy: "fqhzt5g",
+    iyk698: "f7l5cgy",
     cl4aha: "fpkze5g",
-    Bk452zc: "f149wc3x",
-    a4hkcw: "fjioou7"
+    B0q3jbp: "f1iywnoi",
+    Be9ayug: "f9n45c4"
   },
   disabled: {
     De3pzq: "f1c21dwh",
@@ -153,11 +153,234 @@ const useRootStyles = /*#__PURE__*/__styles({
   },
   selected: {
     Bptxc3x: "f1cadz5z",
-    B076xvk: "f1ck17l",
-    q9r9w5: "f42ak0g",
+    Bwqhzpy: "fwhdxxj",
+    iyk698: "fintccb",
     cl4aha: "ffplhdr",
-    Bk452zc: "ffth601",
-    a4hkcw: "fhklyu5"
+    B0q3jbp: "fjo17wb",
+    Be9ayug: "f148789c"
+  },
+  circular: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f44lkw9",
+    Bptxc3x: "ftorr8m",
+    cl4aha: "f16lqpmv"
+  },
+  subtleCircular: {
+    De3pzq: "f1c21dwh",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fp7rvkm",
+    sj55zd: "fkfq4zb",
+    B95qlz1: "f1yywxnv",
+    Eo63ln: 0,
+    r9osk6: 0,
+    Itrz8y: 0,
+    zeg6vx: 0,
+    l65xgk: 0,
+    Bw4olcx: 0,
+    Folb0i: 0,
+    I2h8y4: 0,
+    Bgxgoyi: 0,
+    Bvlkotb: 0,
+    Fwyncl: 0,
+    Byh5edv: 0,
+    Becqvjq: 0,
+    uumbiq: 0,
+    B73q3dg: 0,
+    Bblwbaf: 0,
+    B0ezav: "ft57sj0",
+    r4wkhp: "f1fcoy83",
+    B7xitij: "f1lzpamt",
+    d3wsvi: 0,
+    Hdqn7s: 0,
+    zu5y1p: 0,
+    owqphb: 0,
+    g9c53k: 0,
+    Btmu08z: 0,
+    Bthxvy6: 0,
+    gluvuq: 0,
+    tb88gp: 0,
+    wns6jk: 0,
+    kdfdk4: 0,
+    Bbw008l: 0,
+    Bayi1ib: 0,
+    B1kkfu3: 0,
+    J1oqyp: 0,
+    kem6az: 0,
+    goa3yj: "fhn220o",
+    p743kt: "f15qf7sh"
+  },
+  subtleCircularSelected: {
+    De3pzq: "f16xkysk",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f1c2pc3t",
+    sj55zd: "faj9fo0",
+    B95qlz1: "fsm7zmf",
+    Eo63ln: 0,
+    r9osk6: 0,
+    Itrz8y: 0,
+    zeg6vx: 0,
+    l65xgk: 0,
+    Bw4olcx: 0,
+    Folb0i: 0,
+    I2h8y4: 0,
+    Bgxgoyi: 0,
+    Bvlkotb: 0,
+    Fwyncl: 0,
+    Byh5edv: 0,
+    Becqvjq: 0,
+    uumbiq: 0,
+    B73q3dg: 0,
+    Bblwbaf: 0,
+    B0ezav: "f1wo0sfq",
+    r4wkhp: "f1afuynh",
+    B7xitij: "f94ddyl",
+    d3wsvi: 0,
+    Hdqn7s: 0,
+    zu5y1p: 0,
+    owqphb: 0,
+    g9c53k: 0,
+    Btmu08z: 0,
+    Bthxvy6: 0,
+    gluvuq: 0,
+    tb88gp: 0,
+    wns6jk: 0,
+    kdfdk4: 0,
+    Bbw008l: 0,
+    Bayi1ib: 0,
+    B1kkfu3: 0,
+    J1oqyp: 0,
+    kem6az: 0,
+    goa3yj: "fmle6oo",
+    p743kt: "f1d3itm4"
+  },
+  subtleCircularDisabled: {
+    De3pzq: "f1c21dwh",
+    sj55zd: "f1s2aq7o",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fp7rvkm"
+  },
+  subtleCircularDisabledSelected: {
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fegtqic"
+  },
+  filledCircular: {
+    De3pzq: "f16xq7d1",
+    sj55zd: "fkfq4zb",
+    B95qlz1: "fwwxidx",
+    r4wkhp: "f1fcoy83",
+    B7xitij: "f14i52sd",
+    p743kt: "f15qf7sh"
+  },
+  filledCircularSelected: {
+    De3pzq: "ffp7eso",
+    sj55zd: "f1phragk",
+    B95qlz1: "f1lm9dni",
+    r4wkhp: "f1mn5ei1",
+    B7xitij: "f1g6ncd0",
+    p743kt: "fl71aob"
+  },
+  filledCircularDisabled: {
+    De3pzq: "f1bg9a2p",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fp7rvkm",
+    sj55zd: "f1s2aq7o"
+  },
+  filledCircularDisabledSelected: {
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fegtqic"
   }
 }, {
   d: [".f122n59{align-items:center;}", ".f13qh94s{display:grid;}", ".fi64zpg{flex-shrink:0;}", ".f1u07yai{grid-auto-flow:column;}", ".frn2hmy{grid-template-columns:auto;}", ".f1olsevy{grid-template-rows:auto;}", ".f1s6fcnf{outline-style:none;}", ".f10pi13n{position:relative;}", [".f3bhgqh{border:none;}", {
@@ -178,9 +401,29 @@ const useRootStyles = /*#__PURE__*/__styles({
     p: -1
   }], [".fwkd1rq{padding:var(--spacingVerticalS) var(--spacingHorizontalMNudge);}", {
     p: -1
-  }], ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fmmjozx .fui-Tab__icon{color:var(--colorNeutralForeground2);}", ".fpkze5g .fui-Tab__content{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fato7r6 .fui-Tab__icon{color:var(--colorNeutralForegroundDisabled);}", ".fao1bnu .fui-Tab__content{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1cadz5z .fui-Tab__icon{color:var(--colorCompoundBrandForeground1);}", ".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}"],
-  h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1mfqf41:hover .fui-Tab__icon{color:var(--colorNeutralForeground2Hover);}", ".f149wc3x:hover .fui-Tab__content{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1ck17l:hover .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Hover);}", ".ffth601:hover .fui-Tab__content{color:var(--colorNeutralForeground1Hover);}"],
-  a: [".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f10aiid4:active .fui-Tab__icon{color:var(--colorNeutralForeground2Pressed);}", ".fjioou7:active .fui-Tab__content{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f42ak0g:active .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Pressed);}", ".fhklyu5:active .fui-Tab__content{color:var(--colorNeutralForeground1Pressed);}"]
+  }], ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f9rvdkv:enabled:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1051ucx:enabled:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fmmjozx .fui-Tab__icon{color:var(--colorNeutralForeground2);}", ".fqhzt5g:enabled:hover .fui-Tab__icon{color:var(--colorNeutralForeground2Hover);}", ".f7l5cgy:enabled:active .fui-Tab__icon{color:var(--colorNeutralForeground2Pressed);}", ".fpkze5g .fui-Tab__content{color:var(--colorNeutralForeground2);}", ".f1iywnoi:enabled:hover .fui-Tab__content{color:var(--colorNeutralForeground2Hover);}", ".f9n45c4:enabled:active .fui-Tab__content{color:var(--colorNeutralForeground2Pressed);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".f1bifk9c:enabled:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fo6hitd:enabled:active{background-color:var(--colorSubtleBackgroundPressed);}", ".fato7r6 .fui-Tab__icon{color:var(--colorNeutralForegroundDisabled);}", ".fao1bnu .fui-Tab__content{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1cadz5z .fui-Tab__icon{color:var(--colorCompoundBrandForeground1);}", ".fwhdxxj:enabled:hover .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Hover);}", ".fintccb:enabled:active .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Pressed);}", ".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}", ".fjo17wb:enabled:hover .fui-Tab__content{color:var(--colorNeutralForeground1Hover);}", ".f148789c:enabled:active .fui-Tab__content{color:var(--colorNeutralForeground1Pressed);}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], ".ftorr8m .fui-Tab__icon{color:inherit;}", ".f16lqpmv .fui-Tab__content{color:inherit;}", [".fp7rvkm{border:solid var(--strokeWidthThin) var(--colorTransparentStroke);}", {
+    p: -2
+  }], ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1yywxnv:enabled:hover{background-color:var(--colorNeutralBackground1Hover);}", [".ft57sj0:enabled:hover{border:solid var(--strokeWidthThin) var(--colorNeutralStroke1Hover);}", {
+    p: -2
+  }], ".f1fcoy83:enabled:hover{color:var(--colorNeutralForeground2Hover);}", ".f1lzpamt:enabled:active{background-color:var(--colorNeutralBackground1Pressed);}", [".fhn220o:enabled:active{border:solid var(--strokeWidthThin) var(--colorNeutralStroke1Pressed);}", {
+    p: -2
+  }], ".f15qf7sh:enabled:active{color:var(--colorNeutralForeground2Pressed);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", [".f1c2pc3t{border:solid var(--strokeWidthThin) var(--colorCompoundBrandStroke);}", {
+    p: -2
+  }], ".faj9fo0{color:var(--colorBrandForeground2);}", ".fsm7zmf:enabled:hover{background-color:var(--colorBrandBackground2Hover);}", [".f1wo0sfq:enabled:hover{border:solid var(--strokeWidthThin) var(--colorCompoundBrandStrokeHover);}", {
+    p: -2
+  }], ".f1afuynh:enabled:hover{color:var(--colorBrandForeground2Hover);}", ".f94ddyl:enabled:active{background-color:var(--colorBrandBackground2Pressed);}", [".fmle6oo:enabled:active{border:solid var(--strokeWidthThin) var(--colorCompoundBrandStrokePressed);}", {
+    p: -2
+  }], ".f1d3itm4:enabled:active{color:var(--colorBrandForeground2Pressed);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", [".fp7rvkm{border:solid var(--strokeWidthThin) var(--colorTransparentStroke);}", {
+    p: -2
+  }], [".fegtqic{border:solid var(--strokeWidthThin) var(--colorNeutralStrokeDisabled);}", {
+    p: -2
+  }], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fwwxidx:enabled:hover{background-color:var(--colorNeutralBackground3Hover);}", ".f14i52sd:enabled:active{background-color:var(--colorNeutralBackground3Pressed);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".f1lm9dni:enabled:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1mn5ei1:enabled:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1g6ncd0:enabled:active{background-color:var(--colorBrandBackgroundPressed);}", ".fl71aob:enabled:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", [".fp7rvkm{border:solid var(--strokeWidthThin) var(--colorTransparentStroke);}", {
+    p: -2
+  }], [".fegtqic{border:solid var(--strokeWidthThin) var(--colorNeutralStrokeDisabled);}", {
+    p: -2
+  }]]
 });
 /**
  * Focus styles for the root slot
@@ -289,11 +532,11 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
   },
   selected: {
     Bjyk6c5: "f1ksivud",
-    Glksuk: "f1eytvvh",
-    Blzl0y7: "fuaa9s",
+    Bej4dhw: "f1476jrx",
+    B7wqxwa: "f18q216b",
     f7digc: "fy7ktjt",
-    Biqphg1: "f16tp0gf",
-    Bntoloa: "fj0yp7j"
+    Bvuzv5k: "f1033yux",
+    k4sdgo: "fkh9b8o"
   },
   disabled: {
     Bjyk6c5: "f13lkzet"
@@ -337,14 +580,12 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
 }, {
   d: [".f1rp0jgh::after{background-color:var(--colorTransparentStroke);}", [".f3b9emi::after{border-radius:var(--borderRadiusCircular);}", {
     p: -1
-  }], ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}", ".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}", ".fo72kxq::after{bottom:0;}", ".f9bb2ob::after{height:var(--strokeWidthThick);}", ".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}", ".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}", ".fqbue9b::after{bottom:var(--spacingVerticalXS);}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fk1klkt::after{top:var(--spacingVerticalXS);}", ".f1o25lip::after{width:var(--strokeWidthThicker);}", ".f1vx7lu8::after{height:var(--strokeWidthThicker);}", ".fna7m5n::after{left:var(--spacingHorizontalM);}", ".f1oxpfwv::after{right:var(--spacingHorizontalM);}", ".fipylg0::after{bottom:var(--spacingVerticalS);}", ".fqchiol::after{top:var(--spacingVerticalS);}", ".f1w7dm5g::after{bottom:var(--spacingVerticalMNudge);}", ".f1p6em4m::after{top:var(--spacingVerticalMNudge);}"],
-  h: [".f1eytvvh:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}"],
-  a: [".fuaa9s:active::after{background-color:var(--colorCompoundBrandStrokePressed);}"],
+  }], ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}", ".f1476jrx:enabled:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}", ".f18q216b:enabled:active::after{background-color:var(--colorCompoundBrandStrokePressed);}", ".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}", ".fo72kxq::after{bottom:0;}", ".f9bb2ob::after{height:var(--strokeWidthThick);}", ".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}", ".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}", ".fqbue9b::after{bottom:var(--spacingVerticalXS);}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fk1klkt::after{top:var(--spacingVerticalXS);}", ".f1o25lip::after{width:var(--strokeWidthThicker);}", ".f1vx7lu8::after{height:var(--strokeWidthThicker);}", ".fna7m5n::after{left:var(--spacingHorizontalM);}", ".f1oxpfwv::after{right:var(--spacingHorizontalM);}", ".fipylg0::after{bottom:var(--spacingVerticalS);}", ".fqchiol::after{top:var(--spacingVerticalS);}", ".f1w7dm5g::after{bottom:var(--spacingVerticalMNudge);}", ".f1p6em4m::after{top:var(--spacingVerticalMNudge);}"],
   m: [["@media (forced-colors: active){.fy7ktjt::after{background-color:ButtonText;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f16tp0gf:hover::after{background-color:ButtonText;}}", {
+  }], ["@media (forced-colors: active){.f1033yux:enabled:hover::after{background-color:ButtonText;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fj0yp7j:active::after{background-color:ButtonText;}}", {
+  }], ["@media (forced-colors: active){.fkh9b8o:enabled:active::after{background-color:ButtonText;}}", {
     m: "(forced-colors: active)"
   }]]
 });
@@ -469,16 +710,21 @@ export const useTabIndicatorStyles_unstable = state => {
   const pendingIndicatorStyles = usePendingIndicatorStyles();
   const activeIndicatorStyles = useActiveIndicatorStyles();
   const {
+    appearance,
     disabled,
     selected,
     size,
     vertical
   } = state;
-  state.root.className = mergeClasses(tabClassNames.root, rootStyles.root,
-  // pending indicator (before pseudo element)
-  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)
-  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, state.root.className);
+  const classes = [tabClassNames.root, rootStyles.root];
+  if (appearance !== 'subtle-circular' && appearance !== 'filled-circular') {
+    classes.push(
+    // pending indicator (before pseudo element)
+    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)
+    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);
+  }
+  state.root.className = mergeClasses(...classes, state.root.className);
   useTabAnimatedIndicatorStyles_unstable(state);
   return state;
 };
@@ -504,7 +750,19 @@ export const useTabButtonStyles_unstable = (state, slot) => {
     size,
     vertical
   } = state;
-  slot.className = mergeClasses(rootStyles.button, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, slot.className);
+  const isSubtleCircular = appearance === 'subtle-circular';
+  const isFilledCircular = appearance === 'filled-circular';
+  const isCircular = isSubtleCircular || isFilledCircular;
+  const circularAppearance = [rootStyles.circular,
+  // subtle-circular appearance
+  isSubtleCircular && rootStyles.subtleCircular, selected && isSubtleCircular && rootStyles.subtleCircularSelected, disabled && isSubtleCircular && rootStyles.subtleCircularDisabled, selected && disabled && isSubtleCircular && rootStyles.subtleCircularDisabledSelected,
+  // filled-circular appearance
+  isFilledCircular && rootStyles.filledCircular, selected && isFilledCircular && rootStyles.filledCircularSelected, disabled && isFilledCircular && rootStyles.filledCircularDisabled, selected && disabled && isFilledCircular && rootStyles.filledCircularDisabledSelected];
+  slot.className = mergeClasses(rootStyles.button,
+  // orientation
+  vertical ? rootStyles.vertical : rootStyles.horizontal,
+  // size
+  size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, ...(isCircular ? circularAppearance : [!disabled && selected && rootStyles.selected]), disabled && rootStyles.disabled, slot.className);
   return state;
 };
 /**
@@ -538,5 +796,4 @@ export const useTabContentStyles_unstable = state => {
   }
   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);
   return state;
-};
-//# sourceMappingURL=useTabStyles.styles.js.map
+};