@fluentui/react-tabs 9.0.10 → 9.1.0

package/CHANGELOG.json

@@ -2,7 +2,74 @@
   "name": "@fluentui/react-tabs",
   "entries": [
     {
-      "date": "Wed, 02 Nov 2022 11:55:04 GMT",
+      "date": "Fri, 11 Nov 2022 14:53:30 GMT",
+      "tag": "@fluentui/react-tabs_v9.1.0",
+      "version": "9.1.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "715bd7f0686e1080ec0cbbdb5aa14c0d6ef18498",
+            "comment": "Added support for regular/filled icon toggling"
+          }
+        ],
+        "minor": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "b0f2a9accff1456c09a3df81b46a7e84191cb3d6",
+            "comment": "Added support for reserving space for selected state"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "d5d03853c4aabcf7cedd715caddd987ba44c1a60",
+            "comment": "Added large size tabs"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.1",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.3.0",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-theme to v9.1.2",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.2.1",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "87859b052155ca206ef3540a2a9623803f6e2b93",
+            "comment": "test: replace deprecated module.parent with require.main within isConformance"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 02 Nov 2022 11:58:03 GMT",
       "tag": "@fluentui/react-tabs_v9.0.10",
       "version": "9.0.10",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Wed, 02 Nov 2022 11:55:04 GMT and should not be manually modified.
+This log was last generated on Fri, 11 Nov 2022 14:53:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.1.0)
+
+Fri, 11 Nov 2022 14:53:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.10..@fluentui/react-tabs_v9.1.0)
+
+### Minor changes
+
+- Added support for reserving space for selected state ([PR #25542](https://github.com/microsoft/fluentui/pull/25542) by gcox@microsoft.com)
+- Added large size tabs ([PR #25577](https://github.com/microsoft/fluentui/pull/25577) by gcox@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-tabster to v9.3.0 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-theme to v9.1.2 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-utilities to v9.2.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+
+### Patches
+
+- Added support for regular/filled icon toggling ([PR #25597](https://github.com/microsoft/fluentui/pull/25597) by gcox@microsoft.com)
+
 ## [9.0.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.10)
 
-Wed, 02 Nov 2022 11:55:04 GMT 
+Wed, 02 Nov 2022 11:58:03 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.9..@fluentui/react-tabs_v9.0.10)
 
 ### Patches

package/dist/index.d.ts

@@ -42,7 +42,7 @@ export declare const TabList: ForwardRefComponent<TabListProps>;
 
 export declare const tabListClassNames: SlotClassNames<TabListSlots>;
 
-export declare type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectedValue'> & Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
+export declare type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectedValue' | 'reserveSelectedTabSpace'> & Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
     /** A callback to allow a tab to register itself with the tab list. */
     onRegister: RegisterTabEventHandler;
     /** A callback to allow a tab to unregister itself with the tab list. */
@@ -83,6 +83,14 @@ export declare type TabListProps = ComponentProps<TabListSlots> & {
      * @default 'transparent'
      */
     appearance?: 'transparent' | 'subtle';
+    /**
+     * Tab size may change between unselected and selected states.
+     * The default scenario is a selected tab has bold text.
+     *
+     * When true, this property requests tabs be the same size whether unselected or selected.
+     * @default true
+     */
+    reserveSelectedTabSpace?: boolean;
     /**
      * The value of the tab to be selected by default.
      * Typically useful when the selectedValue is uncontrolled.
@@ -102,11 +110,11 @@ export declare type TabListProps = ComponentProps<TabListSlots> & {
      */
     selectedValue?: TabValue;
     /**
-     * A tab list can be either 'small' or 'medium' size.
+     * A tab list can be either 'small', 'medium', or 'large' size.
      * The size affects each of the contained tabs.
      * @default 'medium'
      */
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
     /**
      * A tab list can arrange its tabs vertically.
      * @default false
@@ -185,9 +193,14 @@ export declare type TabState = ComponentState<TabSlots> & Pick<TabProps, 'value'
      */
     selected: boolean;
     /**
-     * A tab can be either 'small' or 'medium' size.
+     * When defined, tab content with selected style is rendered hidden to reserve space.
+     * This keeps consistent content size between unselected and selected states.
+     */
+    contentReservedSpaceClassName?: string;
+    /**
+     * A tab can be either 'small', 'medium', or 'large' size.
      */
-    size: 'small' | 'medium';
+    size: 'small' | 'medium' | 'large';
     /**
      * A tab can arrange its content based on if the tabs in the list are arranged vertically.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/Tab.types.ts"],"names":[],"mappings":"","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\n/**\n * Tab Props\n */\nexport type TabProps = ComponentProps<Partial<TabSlots>> & {\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<TabSlots> &\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     * A tab can be either 'small' or 'medium' size.\n     */\n    size: 'small' | 'medium';\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"]}
+{"version":3,"file":"Tab.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/Tab.types.ts"],"names":[],"mappings":"","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\n/**\n * Tab Props\n */\nexport type TabProps = ComponentProps<Partial<TabSlots>> & {\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<TabSlots> &\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    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"]}

package/lib/components/Tab/renderTab.js

@@ -12,6 +12,8 @@ export const renderTab_unstable = state => {
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
   }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
   }), !state.iconOnly && /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
+  }), !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content,
+    className: state.contentReservedSpaceClassName
   }));
 };
 //# sourceMappingURL=renderTab.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/components/Tab/renderTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoB;EACpD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAW,KAAX,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,CAAC,KAAK,CAAC,QAAP,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAFtB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n  const { slots, slotProps } = getSlots<TabSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!state.iconOnly && <slots.content {...slotProps.content} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-tabs/src/components/Tab/renderTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoB;EACpD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAW,KAAX,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,CAAC,KAAK,CAAC,QAAP,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAFtB,EAGG,CAAC,KAAK,CAAC,QAAP,IAAmB,CAAC,KAAK,CAAC,QAA1B,IAAsC,KAAK,CAAC,6BAAN,KAAwC,SAA9E,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC,OAAf;IAAwB,SAAS,EAAE,KAAK,CAAC;EAAzC,CAAd,CAJJ,CADF;AASD,CAZM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n  const { slots, slotProps } = getSlots<TabSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!state.iconOnly && <slots.content {...slotProps.content} />}\n      {!state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && (\n        <slots.content {...slotProps.content} className={state.contentReservedSpaceClassName} />\n      )}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Tab/useTab.js

@@ -20,6 +20,7 @@ export const useTab_unstable = (props, ref) => {
     value
   } = props;
   const appearance = useContextSelector(TabListContext, ctx => ctx.appearance);
+  const reserveSelectedTabSpace = useContextSelector(TabListContext, ctx => ctx.reserveSelectedTabSpace);
   const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);
   const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);
   const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);
@@ -72,6 +73,7 @@ export const useTab_unstable = (props, ref) => {
     iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
     content: contentShorthand,
     appearance,
+    contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,
     disabled,
     selected,
     size,

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

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

package/lib/components/Tab/useTabStyles.js

@@ -7,6 +7,15 @@ export const tabClassNames = {
   icon: 'fui-Tab__icon',
   content: 'fui-Tab__content'
 };
+const reservedSpaceClassNames = {
+  content: 'fui-Tab__content--reserved-space'
+}; // These should match the constants defined in @fluentui/react-icons
+// This package avoids taking a dependency on the icons package for only the constants.
+
+const iconClassNames = {
+  filled: 'fui-Icon-filled',
+  regular: 'fui-Icon-regular'
+};
 /**
  * Styles for the root slot
  */
@@ -48,6 +57,20 @@ const useRootStyles = /*#__PURE__*/__styles({
   "vertical": {
     "Brf1p80": "f1s9ku6b"
   },
+  "smallHorizontal": {
+    "i8kkvl": "f14mj54c",
+    "z8tnut": "fp2oml8",
+    "z189sj": ["fdw0yi8", "fk8j09s"],
+    "Byoj8tv": "f1tdddsa",
+    "uwmqm3": ["fk8j09s", "fdw0yi8"]
+  },
+  "smallVertical": {
+    "i8kkvl": "f14mj54c",
+    "z8tnut": "fclwglc",
+    "z189sj": ["fdw0yi8", "fk8j09s"],
+    "Byoj8tv": "fywfov9",
+    "uwmqm3": ["fk8j09s", "fdw0yi8"]
+  },
   "mediumHorizontal": {
     "i8kkvl": "f1rjii52",
     "z8tnut": "f5yzyt",
@@ -62,19 +85,19 @@ const useRootStyles = /*#__PURE__*/__styles({
     "Byoj8tv": "f1tdddsa",
     "uwmqm3": ["f1ng84yb", "f11gcy0p"]
   },
-  "smallHorizontal": {
-    "i8kkvl": "f14mj54c",
-    "z8tnut": "fp2oml8",
-    "z189sj": ["fdw0yi8", "fk8j09s"],
-    "Byoj8tv": "f1tdddsa",
-    "uwmqm3": ["fk8j09s", "fdw0yi8"]
+  "largeHorizontal": {
+    "i8kkvl": "f1rjii52",
+    "z8tnut": "fikn0iw",
+    "z189sj": ["f11gcy0p", "f1ng84yb"],
+    "Byoj8tv": "fdxej3c",
+    "uwmqm3": ["f1ng84yb", "f11gcy0p"]
   },
-  "smallVertical": {
-    "i8kkvl": "f14mj54c",
-    "z8tnut": "fclwglc",
-    "z189sj": ["fdw0yi8", "fk8j09s"],
-    "Byoj8tv": "fywfov9",
-    "uwmqm3": ["fk8j09s", "fdw0yi8"]
+  "largeVertical": {
+    "i8kkvl": "f1rjii52",
+    "z8tnut": "f1kwiid1",
+    "z189sj": ["f11gcy0p", "f1ng84yb"],
+    "Byoj8tv": "f5b47ha",
+    "uwmqm3": ["f1ng84yb", "f11gcy0p"]
   },
   "transparent": {
     "De3pzq": "f1c21dwh",
@@ -113,7 +136,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     "a4hkcw": "fhklyu5"
   }
 }, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fwhevhj{border-top-color:none;}", ".f61n433{border-right-color:none;}", ".f1q8l70w{border-left-color:none;}", ".fv1dfc8{border-bottom-color:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1u07yai{grid-auto-flow:column;}", ".frn2hmy{grid-template-columns:auto;}", ".f1olsevy{grid-template-rows:auto;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1s6fcnf{outline-style:none;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1cxpek8{text-transform:none;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s9ku6b{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f5yzyt{padding-top:var(--spacingVerticalM);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fx3omr{padding-bottom:var(--spacingVerticalM);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".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);}"],
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fwhevhj{border-top-color:none;}", ".f61n433{border-right-color:none;}", ".f1q8l70w{border-left-color:none;}", ".fv1dfc8{border-bottom-color:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1u07yai{grid-auto-flow:column;}", ".frn2hmy{grid-template-columns:auto;}", ".f1olsevy{grid-template-rows:auto;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1s6fcnf{outline-style:none;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1cxpek8{text-transform:none;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s9ku6b{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f5yzyt{padding-top:var(--spacingVerticalM);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fx3omr{padding-bottom:var(--spacingVerticalM);}", ".fikn0iw{padding-top:var(--spacingVerticalL);}", ".fdxej3c{padding-bottom:var(--spacingVerticalL);}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".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);}"]
 });
@@ -169,6 +192,18 @@ const usePendingIndicatorStyles = /*#__PURE__*/__styles({
     "az7l2e": "f1ut20fw",
     "Bkydozb": "fhrzcfn"
   },
+  "smallHorizontal": {
+    "lawp4y": "fchca7p",
+    "Baz25je": "f1r53b5e",
+    "Fbdkly": ["f1s6rxz5", "fo35v8s"],
+    "mdwyqc": ["fo35v8s", "f1s6rxz5"]
+  },
+  "smallVertical": {
+    "lawp4y": "fze4zud",
+    "Fbdkly": ["f1fzr1x6", "f1f351id"],
+    "Bciustq": "fdp32p8",
+    "Ccq8qp": "f1aij3q"
+  },
   "mediumHorizontal": {
     "lawp4y": "fchca7p",
     "Baz25je": "f1s2r9ax",
@@ -181,16 +216,16 @@ const usePendingIndicatorStyles = /*#__PURE__*/__styles({
     "Bciustq": "f117lcb2",
     "Ccq8qp": "f1aij3q"
   },
-  "smallHorizontal": {
+  "largeHorizontal": {
     "lawp4y": "fchca7p",
-    "Baz25je": "f1r53b5e",
-    "Fbdkly": ["f1s6rxz5", "fo35v8s"],
-    "mdwyqc": ["fo35v8s", "f1s6rxz5"]
+    "Baz25je": "f1s2r9ax",
+    "Fbdkly": ["f1o0nnkk", "fxb7rol"],
+    "mdwyqc": ["fxb7rol", "f1o0nnkk"]
   },
-  "smallVertical": {
-    "lawp4y": "fze4zud",
+  "largeVertical": {
+    "lawp4y": "fel9d3z",
     "Fbdkly": ["f1fzr1x6", "f1f351id"],
-    "Bciustq": "fdp32p8",
+    "Bciustq": "f6vqlre",
     "Ccq8qp": "f1aij3q"
   }
 }, {
@@ -201,7 +236,7 @@ const usePendingIndicatorStyles = /*#__PURE__*/__styles({
   }], ["@media (forced-colors: active){.fvje46l:active::before{background-color:Highlight;}}", {
     "m": "(forced-colors: active)"
   }]],
-  "d": [".fchca7p::before{bottom:0;}", ".f1s2r9ax::before{height:var(--strokeWidthThicker);}", ".f1o0nnkk::before{left:var(--spacingHorizontalM);}", ".fxb7rol::before{right:var(--spacingHorizontalM);}", ".f17jracn::before{bottom:var(--spacingVerticalS);}", ".f1fzr1x6::before{left:0;}", ".f1f351id::before{right:0;}", ".f117lcb2::before{top:var(--spacingVerticalS);}", ".f1aij3q::before{width:var(--strokeWidthThicker);}", ".f1r53b5e::before{height:var(--strokeWidthThick);}", ".f1s6rxz5::before{left:var(--spacingHorizontalSNudge);}", ".fo35v8s::before{right:var(--spacingHorizontalSNudge);}", ".fze4zud::before{bottom:var(--spacingVerticalXS);}", ".fdp32p8::before{top:var(--spacingVerticalXS);}"]
+  "d": [".fchca7p::before{bottom:0;}", ".f1r53b5e::before{height:var(--strokeWidthThick);}", ".f1s6rxz5::before{left:var(--spacingHorizontalSNudge);}", ".fo35v8s::before{right:var(--spacingHorizontalSNudge);}", ".fze4zud::before{bottom:var(--spacingVerticalXS);}", ".f1fzr1x6::before{left:0;}", ".f1f351id::before{right:0;}", ".fdp32p8::before{top:var(--spacingVerticalXS);}", ".f1aij3q::before{width:var(--strokeWidthThicker);}", ".f1s2r9ax::before{height:var(--strokeWidthThicker);}", ".f1o0nnkk::before{left:var(--spacingHorizontalM);}", ".fxb7rol::before{right:var(--spacingHorizontalM);}", ".f17jracn::before{bottom:var(--spacingVerticalS);}", ".f117lcb2::before{top:var(--spacingVerticalS);}", ".fel9d3z::before{bottom:var(--spacingVerticalMNudge);}", ".f6vqlre::before{top:var(--spacingVerticalMNudge);}"]
 });
 
 const useActiveIndicatorStyles = /*#__PURE__*/__styles({
@@ -226,6 +261,18 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
   "disabled": {
     "Bjyk6c5": "f13lkzet"
   },
+  "smallHorizontal": {
+    "By385i5": "fo72kxq",
+    "Dlnsje": "f9bb2ob",
+    "Eqx8gd": ["f1q70ajw", "f18rbzdx"],
+    "B1piin3": ["f18rbzdx", "f1q70ajw"]
+  },
+  "smallVertical": {
+    "By385i5": "fqbue9b",
+    "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
+    "bn5sak": "fk1klkt",
+    "a2br6o": "f1o25lip"
+  },
   "mediumHorizontal": {
     "By385i5": "fo72kxq",
     "Dlnsje": "f1vx7lu8",
@@ -238,20 +285,20 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
     "bn5sak": "fqchiol",
     "a2br6o": "f1o25lip"
   },
-  "smallHorizontal": {
+  "largeHorizontal": {
     "By385i5": "fo72kxq",
-    "Dlnsje": "f9bb2ob",
-    "Eqx8gd": ["f1q70ajw", "f18rbzdx"],
-    "B1piin3": ["f18rbzdx", "f1q70ajw"]
+    "Dlnsje": "f1vx7lu8",
+    "Eqx8gd": ["fna7m5n", "f1oxpfwv"],
+    "B1piin3": ["f1oxpfwv", "fna7m5n"]
   },
-  "smallVertical": {
-    "By385i5": "fqbue9b",
+  "largeVertical": {
+    "By385i5": "f1w7dm5g",
     "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
-    "bn5sak": "fk1klkt",
+    "bn5sak": "f1p6em4m",
     "a2br6o": "f1o25lip"
   }
 }, {
-  "d": [".f1rp0jgh::after{background-color:var(--colorTransparentStroke);}", ".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}", ".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".ffmd2fr::after{z-index:1;}", ".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}", ".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}", ".fo72kxq::after{bottom:0;}", ".f1vx7lu8::after{height:var(--strokeWidthThicker);}", ".fna7m5n::after{left:var(--spacingHorizontalM);}", ".f1oxpfwv::after{right:var(--spacingHorizontalM);}", ".fipylg0::after{bottom:var(--spacingVerticalS);}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fqchiol::after{top:var(--spacingVerticalS);}", ".f1o25lip::after{width:var(--strokeWidthThicker);}", ".f9bb2ob::after{height:var(--strokeWidthThick);}", ".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}", ".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}", ".fqbue9b::after{bottom:var(--spacingVerticalXS);}", ".fk1klkt::after{top:var(--spacingVerticalXS);}"],
+  "d": [".f1rp0jgh::after{background-color:var(--colorTransparentStroke);}", ".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}", ".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".ffmd2fr::after{z-index:1;}", ".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}", ".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}", ".fo72kxq::after{bottom:0;}", ".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);}"],
   "m": [["@media (forced-colors: active){.fy7ktjt::after{background-color:ButtonText;}}", {
@@ -269,11 +316,15 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
 
 const useIconStyles = /*#__PURE__*/__styles({
   "base": {
+    "Br312pm": "fwpfdsa",
+    "Ijaq50": "f16hsg94",
     "Bt984gj": "f122n59",
     "mc9l5x": "ftuwxu6",
     "Brf1p80": "f4d9j23",
     "B68tc82": "f1p9o1ba",
-    "Bmxbyg5": "f1sil6mw"
+    "Bmxbyg5": "f1sil6mw",
+    "D0sxk3": "f16u1re",
+    "t6yez3": "f8bsbmo"
   },
   "small": {
     "Be2twd7": "fe5j1ua",
@@ -284,9 +335,18 @@ const useIconStyles = /*#__PURE__*/__styles({
     "Be2twd7": "fe5j1ua",
     "Bqenvij": "fjamq6b",
     "a9b677": "f64fuq3"
+  },
+  "large": {
+    "Be2twd7": "f1rt2boy",
+    "Bqenvij": "frvgh55",
+    "a9b677": "fq4mcun"
+  },
+  "selected": {
+    "D0sxk3": "fxoiby5",
+    "t6yez3": "f15q0o9g"
   }
 }, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}"]
+  "d": [".fwpfdsa{grid-column-start:1;}", ".f16hsg94{grid-row-start:1;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f16u1re .fui-Icon-filled{display:none;}", ".f8bsbmo .fui-Icon-regular{display:inline;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}"]
 });
 /**
  * Styles for the content slot (children)
@@ -311,9 +371,32 @@ const useContentStyles = /*#__PURE__*/__styles({
     "Be2twd7": "fkhj508",
     "Bhrd7zp": "fl43uef",
     "Bg96gwp": "f1i3iumi"
+  },
+  "large": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "faaz57k"
+  },
+  "largeSelected": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "faaz57k"
+  },
+  "noIconBefore": {
+    "Br312pm": "fwpfdsa",
+    "Ijaq50": "f16hsg94"
+  },
+  "iconBefore": {
+    "Br312pm": "fd46tj4",
+    "Ijaq50": "f16hsg94"
+  },
+  "placeholder": {
+    "Bcdw1i0": "fd7fpy0"
   }
 }, {
-  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fztplxc{padding-top:var(--spacingVerticalNone);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".f9g1xly{padding-bottom:var(--spacingVerticalNone);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fztplxc{padding-top:var(--spacingVerticalNone);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".f9g1xly{padding-bottom:var(--spacingVerticalNone);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fwpfdsa{grid-column-start:1;}", ".f16hsg94{grid-row-start:1;}", ".fd46tj4{grid-column-start:2;}", ".fd7fpy0{visibility:hidden;}"]
 });
 /**
  * Apply styling to the Tab slots based on the state
@@ -334,15 +417,20 @@ export const useTabStyles_unstable = state => {
     size,
     vertical
   } = state;
-  state.root.className = mergeClasses(tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, // pending indicator (before pseudo element)
-  pendingIndicatorStyles.base, size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)
-  selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size !== 'small' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);
+  state.root.className = mergeClasses(tabClassNames.root, rootStyles.base, 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, // 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);
 
   if (state.icon) {
-    state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
+    state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);
+  } // This needs to be before state.content.className is updated
+
+
+  if (state.contentReservedSpaceClassName !== undefined) {
+    state.contentReservedSpaceClassName = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);
   }
 
-  state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, selected && contentStyles.selected, state.content.className);
+  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);
   useTabAnimatedIndicatorStyles_unstable(state);
   return state;
 };