@fluentui/react-tabs 9.1.4 → 9.1.6

package/lib-commonjs/components/Tab/useTabStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n  root: 'fui-Tab',\n  icon: 'fui-Tab__icon',\n  content: 'fui-Tab__content',\n};\n\nconst reservedSpaceClassNames = {\n  content: 'fui-Tab__content--reserved-space',\n};\n\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n  filled: 'fui-Icon-filled',\n  regular: 'fui-Icon-regular',\n};\n\n/**\n * Styles for the root slot\n */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    ...shorthands.borderColor('none'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.borderWidth(0),\n    cursor: 'pointer',\n    display: 'grid',\n    flexShrink: 0,\n    gridAutoFlow: 'column',\n    gridTemplateColumns: 'auto',\n    gridTemplateRows: 'auto',\n    fontFamily: tokens.fontFamilyBase,\n    lineHeight: tokens.lineHeightBase300,\n    outlineStyle: 'none',\n    position: 'relative',\n    ...shorthands.overflow('hidden'),\n    textTransform: 'none',\n  },\n  horizontal: {\n    justifyContent: 'center',\n  },\n  vertical: {\n    justifyContent: 'start',\n  },\n  smallHorizontal: {\n    columnGap: tokens.spacingHorizontalXXS,\n    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n  },\n  smallVertical: {\n    // horizontal spacing is deliberate. This is the gap between icon and content.\n    columnGap: tokens.spacingHorizontalXXS,\n    ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n  },\n  mediumHorizontal: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n  },\n  mediumVertical: {\n    // horizontal spacing is deliberate. This is the gap between icon and content.\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n  },\n  largeHorizontal: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge),\n  },\n  largeVertical: {\n    // horizontal spacing is deliberate. This is the gap between icon and content.\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge),\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n    '& .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':hover .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '& .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':hover .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n    '& .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':hover .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '& .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':hover .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    '& .fui-Tab__icon': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n    '& .fui-Tab__content': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n    cursor: 'not-allowed',\n  },\n  selected: {\n    '& .fui-Tab__icon': {\n      color: tokens.colorCompoundBrandForeground1,\n    },\n    ':hover .fui-Tab__icon': {\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active .fui-Tab__icon': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n    '& .fui-Tab__content': {\n      color: tokens.colorNeutralForeground1,\n    },\n    ':hover .fui-Tab__content': {\n      color: tokens.colorNeutralForeground1Hover,\n    },\n    ':active .fui-Tab__content': {\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n  // Tab creates a custom focus indicator because the default focus indicator\n  // is applied using an ::after pseudo-element on the root. Since the selection\n  // indicator uses an ::after pseudo-element on the root, there is a conflict.\n  base: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor('transparent'),\n    outlineWidth: tokens.strokeWidthThick,\n    outlineColor: 'transparent',\n    outlineStyle: 'solid',\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n  base: {\n    ':hover::before': {\n      backgroundColor: tokens.colorNeutralStroke1Hover,\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      content: '\"\"',\n      position: 'absolute',\n    },\n    ':active::before': {\n      backgroundColor: tokens.colorNeutralStroke1Pressed,\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      content: '\"\"',\n      position: 'absolute',\n    },\n    '@media (forced-colors: active)': {\n      ':hover::before': {\n        backgroundColor: 'Highlight',\n      },\n      ':active::before': {\n        backgroundColor: 'Highlight',\n      },\n    },\n  },\n  disabled: {\n    ':hover::before': {\n      backgroundColor: tokens.colorTransparentStroke,\n    },\n    ':active::before': {\n      backgroundColor: tokens.colorTransparentStroke,\n    },\n  },\n  smallHorizontal: {\n    '::before': {\n      bottom: 0,\n      height: tokens.strokeWidthThick,\n      left: tokens.spacingHorizontalSNudge,\n      right: tokens.spacingHorizontalSNudge,\n    },\n  },\n  smallVertical: {\n    '::before': {\n      bottom: tokens.spacingVerticalXS,\n      left: 0,\n      top: tokens.spacingVerticalXS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  mediumHorizontal: {\n    '::before': {\n      bottom: 0,\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  mediumVertical: {\n    '::before': {\n      bottom: tokens.spacingVerticalS,\n      left: 0,\n      top: tokens.spacingVerticalS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  largeHorizontal: {\n    '::before': {\n      bottom: 0,\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  largeVertical: {\n    '::before': {\n      bottom: tokens.spacingVerticalMNudge,\n      left: 0,\n      top: tokens.spacingVerticalMNudge,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n  base: {\n    '::after': {\n      backgroundColor: tokens.colorTransparentStroke,\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      content: '\"\"',\n      position: 'absolute',\n      zIndex: 1,\n    },\n  },\n  selected: {\n    '::after': {\n      backgroundColor: tokens.colorCompoundBrandStroke,\n    },\n    ':hover::after': {\n      backgroundColor: tokens.colorCompoundBrandStrokeHover,\n    },\n    ':active::after': {\n      backgroundColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    '@media (forced-colors: active)': {\n      '::after': {\n        backgroundColor: 'ButtonText',\n      },\n      ':hover::after': {\n        backgroundColor: 'ButtonText',\n      },\n      ':active::after': {\n        backgroundColor: 'ButtonText',\n      },\n    },\n  },\n  disabled: {\n    '::after': {\n      backgroundColor: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  smallHorizontal: {\n    '::after': {\n      bottom: 0,\n      height: tokens.strokeWidthThick,\n      left: tokens.spacingHorizontalSNudge,\n      right: tokens.spacingHorizontalSNudge,\n    },\n  },\n  smallVertical: {\n    '::after': {\n      bottom: tokens.spacingVerticalXS,\n      left: '0',\n      top: tokens.spacingVerticalXS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  mediumHorizontal: {\n    '::after': {\n      bottom: '0',\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  mediumVertical: {\n    '::after': {\n      bottom: tokens.spacingVerticalS,\n      left: 0,\n      top: tokens.spacingVerticalS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  largeHorizontal: {\n    '::after': {\n      bottom: 0,\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  largeVertical: {\n    '::after': {\n      bottom: tokens.spacingVerticalMNudge,\n      left: 0,\n      top: tokens.spacingVerticalMNudge,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n  base: {\n    gridColumnStart: 1,\n    gridRowStart: 1,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n    [`& .${iconClassNames.filled}`]: {\n      display: 'none',\n    },\n    [`& .${iconClassNames.regular}`]: {\n      display: 'inline',\n    },\n  },\n  // per design, the small and medium font sizes are the same.\n  // the size prop only affects spacing.\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n  selected: {\n    [`& .${iconClassNames.filled}`]: {\n      display: 'inline',\n    },\n    [`& .${iconClassNames.regular}`]: {\n      display: 'none',\n    },\n  },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n  base: {\n    ...typographyStyles.body1,\n    ...shorthands.overflow('hidden'),\n    // content padding is the same for medium & small, horiztonal & vertical\n    ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n  },\n  selected: {\n    ...typographyStyles.body1Strong,\n  },\n  large: {\n    ...typographyStyles.body2,\n  },\n  largeSelected: {\n    ...typographyStyles.subtitle2,\n  },\n  noIconBefore: {\n    gridColumnStart: 1,\n    gridRowStart: 1,\n  },\n  iconBefore: {\n    gridColumnStart: 2,\n    gridRowStart: 1,\n  },\n  placeholder: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n  const pendingIndicatorStyles = usePendingIndicatorStyles();\n  const activeIndicatorStyles = useActiveIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const contentStyles = useContentStyles();\n\n  const { appearance, disabled, selected, size, vertical } = state;\n\n  state.root.className = mergeClasses(\n    tabClassNames.root,\n    rootStyles.base,\n    vertical ? rootStyles.vertical : rootStyles.horizontal,\n    size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n    size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n    size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),\n    focusStyles.base,\n    !disabled && appearance === 'subtle' && rootStyles.subtle,\n    !disabled && appearance === 'transparent' && rootStyles.transparent,\n    !disabled && selected && rootStyles.selected,\n    disabled && rootStyles.disabled,\n\n    // pending indicator (before pseudo element)\n    pendingIndicatorStyles.base,\n    size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n    size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n    size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal),\n    disabled && pendingIndicatorStyles.disabled,\n\n    // active indicator (after pseudo element)\n    selected && activeIndicatorStyles.base,\n    selected && !disabled && activeIndicatorStyles.selected,\n    selected &&\n      size === 'small' &&\n      (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n    selected &&\n      size === 'medium' &&\n      (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n    selected &&\n      size === 'large' &&\n      (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal),\n    selected && disabled && activeIndicatorStyles.disabled,\n\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      tabClassNames.icon,\n      iconStyles.base,\n      iconStyles[size],\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  // This needs to be before state.content.className is updated\n  if (state.contentReservedSpaceClassName !== undefined) {\n    state.contentReservedSpaceClassName = mergeClasses(\n      reservedSpaceClassNames.content,\n      contentStyles.base,\n      size === 'large' ? contentStyles.largeSelected : contentStyles.selected,\n      state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n      contentStyles.placeholder,\n      state.content.className,\n    );\n  }\n\n  state.content.className = mergeClasses(\n    tabClassNames.content,\n    contentStyles.base,\n    size === 'large' && contentStyles.large,\n    selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected),\n    state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n    state.content.className,\n  );\n\n  useTabAnimatedIndicatorStyles_unstable(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["exports","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","react_1","useFocusStyles","usePendingIndicatorStyles","useActiveIndicatorStyles","useIconStyles","useContentStyles","useTabStyles_unstable","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","disabled","selected","size","vertical","className","base","horizontal","smallVertical","smallHorizontal","mediumVertical","mediumHorizontal","largeVertical","largeHorizontal","subtle","transparent","contentReservedSpaceClassName","undefined","largeSelected","iconBefore","noIconBefore","placeholder","large","useTabAnimatedIndicator_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts"],"sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n  root: 'fui-Tab',\n  icon: 'fui-Tab__icon',\n  content: 'fui-Tab__content',\n};\n\nconst reservedSpaceClassNames = {\n  content: 'fui-Tab__content--reserved-space',\n};\n\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n  filled: 'fui-Icon-filled',\n  regular: 'fui-Icon-regular',\n};\n\n/**\n * Styles for the root slot\n */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    ...shorthands.borderColor('none'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.borderWidth(0),\n    cursor: 'pointer',\n    display: 'grid',\n    flexShrink: 0,\n    gridAutoFlow: 'column',\n    gridTemplateColumns: 'auto',\n    gridTemplateRows: 'auto',\n    fontFamily: tokens.fontFamilyBase,\n    lineHeight: tokens.lineHeightBase300,\n    outlineStyle: 'none',\n    position: 'relative',\n    ...shorthands.overflow('hidden'),\n    textTransform: 'none',\n  },\n  horizontal: {\n    justifyContent: 'center',\n  },\n  vertical: {\n    justifyContent: 'start',\n  },\n  smallHorizontal: {\n    columnGap: tokens.spacingHorizontalXXS,\n    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n  },\n  smallVertical: {\n    // horizontal spacing is deliberate. This is the gap between icon and content.\n    columnGap: tokens.spacingHorizontalXXS,\n    ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n  },\n  mediumHorizontal: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n  },\n  mediumVertical: {\n    // horizontal spacing is deliberate. This is the gap between icon and content.\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n  },\n  largeHorizontal: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge),\n  },\n  largeVertical: {\n    // horizontal spacing is deliberate. This is the gap between icon and content.\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge),\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n    '& .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':hover .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '& .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':hover .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n    '& .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':hover .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '& .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':hover .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    '& .fui-Tab__icon': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n    '& .fui-Tab__content': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n    cursor: 'not-allowed',\n  },\n  selected: {\n    '& .fui-Tab__icon': {\n      color: tokens.colorCompoundBrandForeground1,\n    },\n    ':hover .fui-Tab__icon': {\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active .fui-Tab__icon': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n    '& .fui-Tab__content': {\n      color: tokens.colorNeutralForeground1,\n    },\n    ':hover .fui-Tab__content': {\n      color: tokens.colorNeutralForeground1Hover,\n    },\n    ':active .fui-Tab__content': {\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n  // Tab creates a custom focus indicator because the default focus indicator\n  // is applied using an ::after pseudo-element on the root. Since the selection\n  // indicator uses an ::after pseudo-element on the root, there is a conflict.\n  base: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor('transparent'),\n    outlineWidth: tokens.strokeWidthThick,\n    outlineColor: 'transparent',\n    outlineStyle: 'solid',\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n  base: {\n    ':hover::before': {\n      backgroundColor: tokens.colorNeutralStroke1Hover,\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      content: '\"\"',\n      position: 'absolute',\n    },\n    ':active::before': {\n      backgroundColor: tokens.colorNeutralStroke1Pressed,\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      content: '\"\"',\n      position: 'absolute',\n    },\n    '@media (forced-colors: active)': {\n      ':hover::before': {\n        backgroundColor: 'Highlight',\n      },\n      ':active::before': {\n        backgroundColor: 'Highlight',\n      },\n    },\n  },\n  disabled: {\n    ':hover::before': {\n      backgroundColor: tokens.colorTransparentStroke,\n    },\n    ':active::before': {\n      backgroundColor: tokens.colorTransparentStroke,\n    },\n  },\n  smallHorizontal: {\n    '::before': {\n      bottom: 0,\n      height: tokens.strokeWidthThick,\n      left: tokens.spacingHorizontalSNudge,\n      right: tokens.spacingHorizontalSNudge,\n    },\n  },\n  smallVertical: {\n    '::before': {\n      bottom: tokens.spacingVerticalXS,\n      left: 0,\n      top: tokens.spacingVerticalXS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  mediumHorizontal: {\n    '::before': {\n      bottom: 0,\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  mediumVertical: {\n    '::before': {\n      bottom: tokens.spacingVerticalS,\n      left: 0,\n      top: tokens.spacingVerticalS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  largeHorizontal: {\n    '::before': {\n      bottom: 0,\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  largeVertical: {\n    '::before': {\n      bottom: tokens.spacingVerticalMNudge,\n      left: 0,\n      top: tokens.spacingVerticalMNudge,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n  base: {\n    '::after': {\n      backgroundColor: tokens.colorTransparentStroke,\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      content: '\"\"',\n      position: 'absolute',\n      zIndex: 1,\n    },\n  },\n  selected: {\n    '::after': {\n      backgroundColor: tokens.colorCompoundBrandStroke,\n    },\n    ':hover::after': {\n      backgroundColor: tokens.colorCompoundBrandStrokeHover,\n    },\n    ':active::after': {\n      backgroundColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    '@media (forced-colors: active)': {\n      '::after': {\n        backgroundColor: 'ButtonText',\n      },\n      ':hover::after': {\n        backgroundColor: 'ButtonText',\n      },\n      ':active::after': {\n        backgroundColor: 'ButtonText',\n      },\n    },\n  },\n  disabled: {\n    '::after': {\n      backgroundColor: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  smallHorizontal: {\n    '::after': {\n      bottom: 0,\n      height: tokens.strokeWidthThick,\n      left: tokens.spacingHorizontalSNudge,\n      right: tokens.spacingHorizontalSNudge,\n    },\n  },\n  smallVertical: {\n    '::after': {\n      bottom: tokens.spacingVerticalXS,\n      left: '0',\n      top: tokens.spacingVerticalXS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  mediumHorizontal: {\n    '::after': {\n      bottom: '0',\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  mediumVertical: {\n    '::after': {\n      bottom: tokens.spacingVerticalS,\n      left: 0,\n      top: tokens.spacingVerticalS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  largeHorizontal: {\n    '::after': {\n      bottom: 0,\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  largeVertical: {\n    '::after': {\n      bottom: tokens.spacingVerticalMNudge,\n      left: 0,\n      top: tokens.spacingVerticalMNudge,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n  base: {\n    gridColumnStart: 1,\n    gridRowStart: 1,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n    [`& .${iconClassNames.filled}`]: {\n      display: 'none',\n    },\n    [`& .${iconClassNames.regular}`]: {\n      display: 'inline',\n    },\n  },\n  // per design, the small and medium font sizes are the same.\n  // the size prop only affects spacing.\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n  selected: {\n    [`& .${iconClassNames.filled}`]: {\n      display: 'inline',\n    },\n    [`& .${iconClassNames.regular}`]: {\n      display: 'none',\n    },\n  },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n  base: {\n    ...typographyStyles.body1,\n    ...shorthands.overflow('hidden'),\n    // content padding is the same for medium & small, horiztonal & vertical\n    ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n  },\n  selected: {\n    ...typographyStyles.body1Strong,\n  },\n  large: {\n    ...typographyStyles.body2,\n  },\n  largeSelected: {\n    ...typographyStyles.subtitle2,\n  },\n  noIconBefore: {\n    gridColumnStart: 1,\n    gridRowStart: 1,\n  },\n  iconBefore: {\n    gridColumnStart: 2,\n    gridRowStart: 1,\n  },\n  placeholder: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n  const pendingIndicatorStyles = usePendingIndicatorStyles();\n  const activeIndicatorStyles = useActiveIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const contentStyles = useContentStyles();\n\n  const { appearance, disabled, selected, size, vertical } = state;\n\n  state.root.className = mergeClasses(\n    tabClassNames.root,\n    rootStyles.base,\n    vertical ? rootStyles.vertical : rootStyles.horizontal,\n    size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n    size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n    size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),\n    focusStyles.base,\n    !disabled && appearance === 'subtle' && rootStyles.subtle,\n    !disabled && appearance === 'transparent' && rootStyles.transparent,\n    !disabled && selected && rootStyles.selected,\n    disabled && rootStyles.disabled,\n\n    // pending indicator (before pseudo element)\n    pendingIndicatorStyles.base,\n    size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n    size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n    size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal),\n    disabled && pendingIndicatorStyles.disabled,\n\n    // active indicator (after pseudo element)\n    selected && activeIndicatorStyles.base,\n    selected && !disabled && activeIndicatorStyles.selected,\n    selected &&\n      size === 'small' &&\n      (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n    selected &&\n      size === 'medium' &&\n      (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n    selected &&\n      size === 'large' &&\n      (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal),\n    selected && disabled && activeIndicatorStyles.disabled,\n\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      tabClassNames.icon,\n      iconStyles.base,\n      iconStyles[size],\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  // This needs to be before state.content.className is updated\n  if (state.contentReservedSpaceClassName !== undefined) {\n    state.contentReservedSpaceClassName = mergeClasses(\n      reservedSpaceClassNames.content,\n      contentStyles.base,\n      size === 'large' ? contentStyles.largeSelected : contentStyles.selected,\n      state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n      contentStyles.placeholder,\n      state.content.className,\n    );\n  }\n\n  state.content.className = mergeClasses(\n    tabClassNames.content,\n    contentStyles.base,\n    size === 'large' && contentStyles.large,\n    selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected),\n    state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n    state.content.className,\n  );\n\n  useTabAnimatedIndicatorStyles_unstable(state);\n\n  return state;\n};\n"]}

package/lib-commonjs/components/TabList/TabList.js

@@ -4,21 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabList = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useTabList_1 = /*#__PURE__*/require("./useTabList");
-
 const renderTabList_1 = /*#__PURE__*/require("./renderTabList");
-
 const useTabListStyles_1 = /*#__PURE__*/require("./useTabListStyles");
-
 const useTabListContextValues_1 = /*#__PURE__*/require("./useTabListContextValues");
 /**
  * A tab list provides single selection from a set of tabs.
  */
-
-
 exports.TabList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTabList_1.useTabList_unstable(props, ref);
   const contextValues = useTabListContextValues_1.useTabListContextValues(state);

package/lib-commonjs/components/TabList/TabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EACA,MAAM,aAAa,GAAG,yBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAtB;EAEA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,aAA9B,CAAP;AACD,CANyD,CAA7C;AAQb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues } from './useTabListContextValues';\n\n/**\n * A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n  const state = useTabList_unstable(props, ref);\n  const contextValues = useTabListContextValues(state);\n\n  useTabListStyles_unstable(state);\n  return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAGA;AAEA;;;AAGaA,eAAO,gBAAsCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGC,gCAAmB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAMG,aAAa,GAAGC,iDAAuB,CAACH,KAAK,CAAC;EAEpDI,4CAAyB,CAACJ,KAAK,CAAC;EAChC,OAAOK,sCAAsB,CAACL,KAAK,EAAEE,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFP,eAAO,CAACW,WAAW,GAAG,SAAS","names":["exports","React","forwardRef","props","ref","state","useTabList_1","contextValues","useTabListContextValues_1","useTabListStyles_1","renderTabList_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues } from './useTabListContextValues';\n\n/**\n * A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n  const state = useTabList_unstable(props, ref);\n  const contextValues = useTabListContextValues(state);\n\n  useTabListStyles_unstable(state);\n  return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"]}

package/lib-commonjs/components/TabList/TabList.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/TabList/TabListContext.js

@@ -4,10 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabListContext = void 0;
-
-const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector"); // eslint-disable-next-line @fluentui/no-context-default-value
-
-
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+// eslint-disable-next-line @fluentui/no-context-default-value
 exports.TabListContext = /*#__PURE__*/react_context_selector_1.createContext({
   appearance: 'transparent',
   reserveSelectedTabSpace: true,

package/lib-commonjs/components/TabList/TabListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA,C,CAIA;;;AACa,OAAA,CAAA,cAAA,gBAA+C,wBAAA,CAAA,aAAA,CAAmC;EAC7F,UAAU,EAAE,aADiF;EAE7F,uBAAuB,EAAE,IAFoE;EAG7F,QAAQ,EAAE,KAHmF;EAI7F,aAAa,EAAE,SAJ8E;EAK7F,UAAU,EAAE,MAAK;IACf;EACD,CAP4F;EAQ7F,YAAY,EAAE,MAAK;IACjB;EACD,CAV4F;EAW7F,QAAQ,EAAE,MAAK;IACb;EACD,CAb4F;EAc7F,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACL,cAAc,EAAE;IADX,CAAP;EAGD,CAlB4F;EAmB7F,IAAI,EAAE,QAnBuF;EAoB7F,QAAQ,EAAE;AApBmF,CAAnC,CAA/C","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n  appearance: 'transparent',\n  reserveSelectedTabSpace: true,\n  disabled: false,\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredTabs: () => {\n    return {\n      registeredTabs: {},\n    };\n  },\n  size: 'medium',\n  vertical: false,\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAIA;AACaA,sBAAc,gBAAiCC,sCAAa,CAAsB;EAC7FC,UAAU,EAAE,aAAa;EACzBC,uBAAuB,EAAE,IAAI;EAC7BC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAEC,SAAS;EACxBC,UAAU,EAAE,MAAK;IACf;EAAA,CACD;EACDC,YAAY,EAAE,MAAK;IACjB;EAAA,CACD;EACDC,QAAQ,EAAE,MAAK;IACb;EAAA,CACD;EACDC,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACLC,cAAc,EAAE;KACjB;EACH,CAAC;EACDC,IAAI,EAAE,QAAQ;EACdC,QAAQ,EAAE;CACX,CAAC","names":["exports","react_context_selector_1","appearance","reserveSelectedTabSpace","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n  appearance: 'transparent',\n  reserveSelectedTabSpace: true,\n  disabled: false,\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredTabs: () => {\n    return {\n      registeredTabs: {},\n    };\n  },\n  size: 'medium',\n  vertical: false,\n});\n"]}

package/lib-commonjs/components/TabList/index.js

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./TabList"), exports);
-
 tslib_1.__exportStar(require("./TabList.types"), exports);
-
 tslib_1.__exportStar(require("./renderTabList"), exports);
-
 tslib_1.__exportStar(require("./useTabList"), exports);
-
 tslib_1.__exportStar(require("./useTabListStyles"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/TabList/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/index.ts"],"sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListStyles';\n"]}

package/lib-commonjs/components/TabList/renderTabList.js

@@ -4,27 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderTabList_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const TabListContext_1 = /*#__PURE__*/require("./TabListContext");
 /**
  * Render the final JSX of TabList
  */
-
-
 const renderTabList_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
+  return React.createElement(slots.root, {
+    ...slotProps.root
   }, React.createElement(TabListContext_1.TabListContext.Provider, {
     value: contextValues.tabList
   }, state.root.children));
 };
-
 exports.renderTabList_unstable = renderTabList_unstable;
 //# sourceMappingURL=renderTabList.js.map

package/lib-commonjs/components/TabList/renderTabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EAAwD,KAAK,CAAC,IAAN,CAAW,QAAnE,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListContext } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n  const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TabListContext.Provider value={contextValues.tabList}>{state.root.children}</TabListContext.Provider>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAEA;;;AAGO,MAAMA,sBAAsB,GAAG,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAeJ,KAAK,CAAC;EAE1D,OACEK,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACE,+BAAc,CAACC,QAAQ;IAACC,KAAK,EAAER,aAAa,CAACS;EAAO,GAAGV,KAAK,CAACM,IAAI,CAACK,QAAQ,CAA2B,CAC3F;AAEjB,CAAC;AARYC,8BAAsB","names":["renderTabList_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","root","TabListContext_1","Provider","value","tabList","children","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListContext } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n  const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TabListContext.Provider value={contextValues.tabList}>{state.root.children}</TabListContext.Provider>\n    </slots.root>\n  );\n};\n"]}

package/lib-commonjs/components/TabList/useTabList.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTabList_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Create the state required to render TabList.
@@ -19,8 +16,6 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
  * @param props - props from this instance of TabList
  * @param ref - reference to root HTMLElement of TabList
  */
-
-
 const useTabList_unstable = (props, ref) => {
   const {
     appearance = 'transparent',
@@ -40,11 +35,11 @@ const useTabList_unstable = (props, ref) => {
     state: props.selectedValue,
     defaultState: props.defaultSelectedValue,
     initialState: undefined
-  }); // considered usePrevious, but it is sensitive to re-renders
+  });
+  // considered usePrevious, but it is sensitive to re-renders
   // this could cause the previous to move to current in the case where the tab list re-renders.
   // these refs avoid getRegisteredTabs changing when selectedValue changes and causing
   // renders for tabs that have not changed.
-
   const currentSelectedValue = React.useRef(undefined);
   const previousSelectedValue = React.useRef(undefined);
   React.useEffect(() => {
@@ -91,6 +86,5 @@ const useTabList_unstable = (props, ref) => {
     getRegisteredTabs
   };
 };
-
 exports.useTabList_unstable = useTabList_unstable;
 //# sourceMappingURL=useTabList.js.map

package/lib-commonjs/components/TabList/useTabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/useTabList.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getNativeElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    registeredTabs.current[JSON.stringify(data.value)] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tablist',\n      ...focusAttributes,\n      ...props,\n    }),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AASA;;;;;;;;;AASO,MAAMA,mBAAmB,GAAG,CAACC,KAAmB,EAAEC,GAA2B,KAAkB;EACpG,MAAM;IACJC,UAAU,GAAG,aAAa;IAC1BC,uBAAuB,GAAG,IAAI;IAC9BC,QAAQ,GAAG,KAAK;IAChBC,WAAW;IACXC,IAAI,GAAG,QAAQ;IACfC,QAAQ,GAAG;EAAK,CACjB,GAAGP,KAAK;EAET,MAAMQ,QAAQ,GAAGC,KAAK,CAACC,MAAM,CAAc,IAAI,CAAC;EAEhD,MAAMC,eAAe,GAAGC,uCAAuB,CAAC;IAC9CC,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAEP,QAAQ,GAAG,UAAU,GAAG,YAAY;IAC1CQ,eAAe,EAAE;GAClB,CAAC;EAEF,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGC,sCAAoB,CAAC;IAC7DC,KAAK,EAAEnB,KAAK,CAACgB,aAAa;IAC1BI,YAAY,EAAEpB,KAAK,CAACqB,oBAAoB;IACxCC,YAAY,EAAEC;GACf,CAAC;EAEF;EACA;EACA;EACA;EACA,MAAMC,oBAAoB,GAAGf,KAAK,CAACC,MAAM,CAAuBa,SAAS,CAAC;EAC1E,MAAME,qBAAqB,GAAGhB,KAAK,CAACC,MAAM,CAAuBa,SAAS,CAAC;EAE3Ed,KAAK,CAACiB,SAAS,CAAC,MAAK;IACnBD,qBAAqB,CAACE,OAAO,GAAGH,oBAAoB,CAACG,OAAO;IAC5DH,oBAAoB,CAACG,OAAO,GAAGX,aAAa;EAC9C,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,MAAMY,QAAQ,GAAGV,kCAAgB,CAAC,CAACW,KAAqB,EAAEC,IAAmB,KAAI;IAC/Eb,gBAAgB,CAACa,IAAI,CAACC,KAAK,CAAC;IAC5B1B,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAGwB,KAAK,EAAEC,IAAI,CAAC;EAC5B,CAAC,CAAC;EAEF,MAAME,cAAc,GAAGvB,KAAK,CAACC,MAAM,CAAkC,EAAE,CAAC;EAExE,MAAMuB,UAAU,GAAGf,kCAAgB,CAAEY,IAAqB,IAAI;IAC5DE,cAAc,CAACL,OAAO,CAACO,IAAI,CAACC,SAAS,CAACL,IAAI,CAACC,KAAK,CAAC,CAAC,GAAGD,IAAI;EAC3D,CAAC,CAAC;EAEF,MAAMM,YAAY,GAAGlB,kCAAgB,CAAEY,IAAqB,IAAI;IAC9D,OAAOE,cAAc,CAACL,OAAO,CAACO,IAAI,CAACC,SAAS,CAACL,IAAI,CAACC,KAAK,CAAC,CAAC;EAC3D,CAAC,CAAC;EAEF,MAAMM,iBAAiB,GAAG5B,KAAK,CAAC6B,WAAW,CAAC,MAAK;IAC/C,OAAO;MACLtB,aAAa,EAAEQ,oBAAoB,CAACG,OAAO;MAC3CF,qBAAqB,EAAEA,qBAAqB,CAACE,OAAO;MACpDK,cAAc,EAAEA,cAAc,CAACL;KAChC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACLY,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEtB,uCAAqB,CAAC,KAAK,EAAE;MACjCjB,GAAG,EAAEiB,+BAAa,CAACjB,GAAG,EAAEO,QAAQ,CAAC;MACjCiC,IAAI,EAAE,SAAS;MACf,GAAG9B,eAAe;MAClB,GAAGX;KACJ,CAAC;IACFE,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRY,aAAa;IACbV,IAAI;IACJC,QAAQ;IACR0B,UAAU;IACVG,YAAY;IACZR,QAAQ;IACRS;GACD;AACH,CAAC;AAhFYK,2BAAmB","names":["useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","React","useRef","focusAttributes","react_tabster_1","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","react_utilities_1","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","role","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getNativeElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    registeredTabs.current[JSON.stringify(data.value)] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tablist',\n      ...focusAttributes,\n      ...props,\n    }),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"]}

package/lib-commonjs/components/TabList/useTabListContextValues.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTabListContextValues = void 0;
-
 function useTabListContextValues(state) {
   const {
     appearance,
@@ -34,6 +33,5 @@ function useTabListContextValues(state) {
     tabList
   };
 }
-
 exports.useTabListContextValues = useTabListContextValues;
 //# sourceMappingURL=useTabListContextValues.js.map

package/lib-commonjs/components/TabList/useTabListContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,uBAAhB,CAAwC,KAAxC,EAA2D;EACzD,MAAM;IACJ,UADI;IAEJ,uBAFI;IAGJ,QAHI;IAIJ,aAAa,EAAE,WAJX;IAKJ,UALI;IAMJ,YANI;IAOJ,QAPI;IAQJ,iBARI;IASJ,IATI;IAUJ;EAVI,IAWF,KAXJ;EAaA,MAAM,OAAO,GAAwB;IACnC,UADmC;IAEnC,uBAFmC;IAGnC,QAHmC;IAInC,aAAa,EAAE,WAJoB;IAKnC,QALmC;IAMnC,UANmC;IAOnC,YAPmC;IAQnC,iBARmC;IASnC,IATmC;IAUnC;EAVmC,CAArC;EAaA,OAAO;IAAE;EAAF,CAAP;AACD;;AA5BD,OAAA,CAAA,uBAAA,GAAA,uBAAA","sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues(state: TabListState): TabListContextValues {\n  const {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    size,\n    vertical,\n  } = state;\n\n  const tabList: TabListContextValue = {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onSelect,\n    onRegister,\n    onUnregister,\n    getRegisteredTabs,\n    size,\n    vertical,\n  };\n\n  return { tabList };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAEA,SAAgBA,uBAAuB,CAACC,KAAmB;EACzD,MAAM;IACJC,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BC,UAAU;IACVC,YAAY;IACZC,QAAQ;IACRC,iBAAiB;IACjBC,IAAI;IACJC;EAAQ,CACT,GAAGX,KAAK;EAET,MAAMY,OAAO,GAAwB;IACnCX,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BG,QAAQ;IACRF,UAAU;IACVC,YAAY;IACZE,iBAAiB;IACjBC,IAAI;IACJC;GACD;EAED,OAAO;IAAEC;EAAO,CAAE;AACpB;AA5BAC","names":["useTabListContextValues","state","appearance","reserveSelectedTabSpace","disabled","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues(state: TabListState): TabListContextValues {\n  const {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    size,\n    vertical,\n  } = state;\n\n  const tabList: TabListContextValue = {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onSelect,\n    onRegister,\n    onUnregister,\n    getRegisteredTabs,\n    size,\n    vertical,\n  };\n\n  return { tabList };\n}\n"]}

package/lib-commonjs/components/TabList/useTabListStyles.js

@@ -4,40 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTabListStyles_unstable = exports.tabListClassNames = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 exports.tabListClassNames = {
   root: 'fui-TabList'
 };
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1063pyq",
-    "Bnnss6s": "fi64zpg",
-    "Eh141a": "flvyvdh",
-    "qhf8xq": "f10pi13n"
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq",
+    Bnnss6s: "fi64zpg",
+    Eh141a: "flvyvdh",
+    qhf8xq: "f10pi13n"
   },
-  "horizontal": {
-    "Bt984gj": "f1q9h2pe",
-    "Beiy3e4": "f1063pyq"
+  horizontal: {
+    Bt984gj: "f1q9h2pe",
+    Beiy3e4: "f1063pyq"
   },
-  "vertical": {
-    "Bt984gj": "f1q9h2pe",
-    "Beiy3e4": "f1vx9l62"
+  vertical: {
+    Bt984gj: "f1q9h2pe",
+    Beiy3e4: "f1vx9l62"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f10pi13n{position:relative;}", ".f1q9h2pe{-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f10pi13n{position:relative;}", ".f1q9h2pe{-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
 });
 /**
  * Apply styling to the TabList slots based on the state
  */
-
-
 const useTabListStyles_unstable = state => {
   const {
     vertical
@@ -46,6 +41,5 @@ const useTabListStyles_unstable = state => {
   state.root.className = react_1.mergeClasses(exports.tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, state.root.className);
   return state;
 };
-
 exports.useTabListStyles_unstable = useTabListStyles_unstable;
 //# sourceMappingURL=useTabListStyles.js.map

package/lib-commonjs/components/TabList/useTabListStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,IAAI,EAAE;AADuD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAkBA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM;IAAE;EAAF,IAAe,KAArB;EAEA,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBAAA,CAAkB,IADG,EAErB,MAAM,CAAC,IAFc,EAGrB,QAAQ,GAAG,MAAM,CAAC,QAAV,GAAqB,MAAM,CAAC,UAHf,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAbM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n  root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexShrink: 0,\n    flexWrap: 'nowrap',\n    position: 'relative',\n  },\n  horizontal: {\n    alignItems: 'stretch',\n    flexDirection: 'row',\n  },\n  vertical: {\n    alignItems: 'stretch',\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n  const { vertical } = state;\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    tabListClassNames.root,\n    styles.root,\n    vertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AAGaA,yBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAgB1B;AAEF;;;AAGO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAM;IAAEC;EAAQ,CAAE,GAAGD,KAAK;EAE1B,MAAME,MAAM,GAAGL,SAAS,EAAE;EAE1BG,KAAK,CAACJ,IAAI,CAACO,SAAS,GAAGL,oBAAY,CACjCH,yBAAiB,CAACC,IAAI,EACtBM,MAAM,CAACN,IAAI,EACXK,QAAQ,GAAGC,MAAM,CAACD,QAAQ,GAAGC,MAAM,CAACE,UAAU,EAC9CJ,KAAK,CAACJ,IAAI,CAACO,SAAS,CACrB;EAED,OAAOH,KAAK;AACd,CAAC;AAbYL,iCAAyB","names":["exports","root","useStyles","react_1","useTabListStyles_unstable","state","vertical","styles","className","horizontal"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n  root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexShrink: 0,\n    flexWrap: 'nowrap',\n    position: 'relative',\n  },\n  horizontal: {\n    alignItems: 'stretch',\n    flexDirection: 'row',\n  },\n  vertical: {\n    alignItems: 'stretch',\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n  const { vertical } = state;\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    tabListClassNames.root,\n    styles.root,\n    vertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}

package/lib-commonjs/index.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTabList_unstable = exports.useTabListStyles_unstable = exports.tabListClassNames = exports.TabList = exports.renderTabList_unstable = exports.useTab_unstable = exports.useTabStyles_unstable = exports.tabClassNames = exports.Tab = exports.renderTab_unstable = void 0;
-
 var Tab_1 = /*#__PURE__*/require("./Tab");
-
 Object.defineProperty(exports, "renderTab_unstable", {
   enumerable: true,
   get: function () {
@@ -37,9 +35,7 @@ Object.defineProperty(exports, "useTab_unstable", {
     return Tab_1.useTab_unstable;
   }
 });
-
 var TabList_1 = /*#__PURE__*/require("./TabList");
-
 Object.defineProperty(exports, "renderTabList_unstable", {
   enumerable: true,
   get: function () {

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/index.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,KAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,GAAA;EAAG;AAAH,CAAA;AAAK,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAe,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA;AAAuB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,KAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AAaxE,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA","sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  tabListClassNames,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './TabList';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AAASA;EAAAC;EAAAC;IAAA,+BAAkB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,gBAAG;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,0BAAa;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,kCAAqB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,4BAAe;EAAA;AAAA;AAavF;AACEF;EAAAC;EAAAC;IAAA,uCAAsB;EAAA;AAAA;AACtBF;EAAAC;EAAAC;IAAA,wBAAO;EAAA;AAAA;AACPF;EAAAC;EAAAC;IAAA,kCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,0CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,oCAAmB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  tabListClassNames,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './TabList';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.1.4",
+  "version": "9.1.6",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -26,15 +26,15 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
+    "@fluentui/scripts": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.3",
-    "@fluentui/react-tabster": "^9.3.4",
+    "@fluentui/react-context-selector": "^9.1.5",
+    "@fluentui/react-tabster": "^9.3.6",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.3.0",
-    "@griffel/react": "^1.4.2",
+    "@fluentui/react-utilities": "^9.4.0",
+    "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {