@fluentui/react-tabs 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.0

package/lib-commonjs/components/Tab/Tab.module.css

@@ -0,0 +1,475 @@
+@layer fluentui {
+  /* ---- Root: grid wrapper that holds content + pseudo-element indicators ---- */
+  .root {
+    align-items: center;
+    display: grid;
+    flex-shrink: 0;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+    outline-style: none;
+    position: relative;
+  }
+
+  /* ---- Button: interactive button layered on the root grid ---- */
+  .button {
+    align-items: center;
+    border: none;
+    border-radius: var(--borderRadiusMedium);
+    cursor: pointer;
+    display: grid;
+    flex-shrink: 0;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+    font-family: var(--fontFamilyBase);
+    line-height: var(--lineHeightBase300);
+    outline-style: none;
+    position: relative;
+    overflow: hidden;
+    text-transform: none;
+  }
+
+  /* ---- Orientation (also carries default "medium" padding) ---- */
+  .horizontal {
+    justify-content: center;
+    column-gap: var(--spacingHorizontalSNudge);
+    padding: var(--spacingVerticalM) var(--spacingHorizontalMNudge);
+  }
+  .vertical {
+    justify-content: start;
+    column-gap: var(--spacingHorizontalSNudge);
+    padding: var(--spacingVerticalSNudge) var(--spacingHorizontalMNudge);
+  }
+
+  /* ---- Size × orientation: padding overrides for small/large ---- */
+  /* medium is the default, covered by .horizontal/.vertical above */
+  .small.horizontal {
+    column-gap: var(--spacingHorizontalXXS);
+    padding: var(--spacingVerticalSNudge) var(--spacingHorizontalSNudge);
+  }
+  .small.vertical {
+    column-gap: var(--spacingHorizontalXXS);
+    padding: var(--spacingVerticalXXS) var(--spacingHorizontalSNudge);
+  }
+  .large.horizontal {
+    column-gap: var(--spacingHorizontalSNudge);
+    padding: var(--spacingVerticalL) var(--spacingHorizontalMNudge);
+  }
+  .large.vertical {
+    column-gap: var(--spacingHorizontalSNudge);
+    padding: var(--spacingVerticalS) var(--spacingHorizontalMNudge);
+  }
+
+  /* ---- Appearance: transparent ---- */
+  .transparent {
+    background-color: var(--colorTransparentBackground);
+  }
+  .transparent:enabled:hover {
+    background-color: var(--colorTransparentBackgroundHover);
+  }
+  .transparent:enabled:active {
+    background-color: var(--colorTransparentBackgroundPressed);
+  }
+
+  .transparent :global(.fui-Tab__icon),
+  .transparent :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground2);
+  }
+  .transparent:enabled:hover :global(.fui-Tab__icon),
+  .transparent:enabled:hover :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground2Hover);
+  }
+  .transparent:enabled:active :global(.fui-Tab__icon),
+  .transparent:enabled:active :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground2Pressed);
+  }
+
+  /* ---- Appearance: subtle ---- */
+  .subtle {
+    background-color: var(--colorSubtleBackground);
+  }
+  .subtle:enabled:hover {
+    background-color: var(--colorSubtleBackgroundHover);
+  }
+  .subtle:enabled:active {
+    background-color: var(--colorSubtleBackgroundPressed);
+  }
+
+  .subtle :global(.fui-Tab__icon),
+  .subtle :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground2);
+  }
+  .subtle:enabled:hover :global(.fui-Tab__icon),
+  .subtle:enabled:hover :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground2Hover);
+  }
+  .subtle:enabled:active :global(.fui-Tab__icon),
+  .subtle:enabled:active :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground2Pressed);
+  }
+
+  /* ---- Selected state colors (non-circular only — guarded below by .circularBase reset) ---- */
+  .selected :global(.fui-Tab__icon) {
+    color: var(--colorCompoundBrandForeground1);
+  }
+  .selected:enabled:hover :global(.fui-Tab__icon) {
+    color: var(--colorCompoundBrandForeground1Hover);
+  }
+  .selected:enabled:active :global(.fui-Tab__icon) {
+    color: var(--colorCompoundBrandForeground1Pressed);
+  }
+
+  .selected :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground1);
+  }
+  .selected:enabled:hover :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground1Hover);
+  }
+  .selected:enabled:active :global(.fui-Tab__content) {
+    color: var(--colorNeutralForeground1Pressed);
+  }
+
+  /* ---- Disabled ---- */
+  .disabled {
+    cursor: not-allowed;
+    background-color: var(--colorTransparentBackground);
+  }
+  .disabled :global(.fui-Tab__icon),
+  .disabled :global(.fui-Tab__content) {
+    color: var(--colorNeutralForegroundDisabled);
+  }
+
+  /* ---- Focus indicator ---- */
+  .focusBase[data-fui-focus-visible] {
+    border-color: transparent;
+    outline-width: var(--strokeWidthThick);
+    outline-color: transparent;
+    outline-style: solid;
+    box-shadow: var(--shadow4), 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);
+    z-index: 1;
+  }
+
+  .focusCircular[data-fui-focus-visible] {
+    border-color: transparent;
+    outline-width: var(--strokeWidthThick);
+    outline-color: transparent;
+    outline-style: solid;
+    box-shadow: var(--shadow4), 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),
+      0 0 0 var(--strokeWidthThin) var(--colorNeutralStrokeOnBrand) inset;
+    z-index: 1;
+  }
+
+  /* ---- Pending indicator (::before) ---- */
+  .pendingBase:hover::before,
+  .pendingBase:active::before {
+    background-color: var(--colorNeutralStroke1Hover);
+    border-radius: var(--borderRadiusCircular);
+    content: '';
+    position: absolute;
+  }
+  .pendingBase:active::before {
+    background-color: var(--colorNeutralStroke1Pressed);
+  }
+
+  @media (forced-colors: active) {
+    .pendingBase:hover::before,
+    .pendingBase:active::before {
+      background-color: Highlight;
+    }
+  }
+
+  .pendingDisabled:hover::before,
+  .pendingDisabled:active::before {
+    background-color: var(--colorTransparentStroke);
+  }
+
+  @media (forced-colors: active) {
+    .pendingDisabled:hover::before,
+    .pendingDisabled:active::before {
+      background-color: transparent;
+    }
+  }
+
+  /* ---- Active indicator (::after) ---- */
+  .activeBase::after {
+    background-color: var(--colorTransparentStroke);
+    border-radius: var(--borderRadiusCircular);
+    content: '';
+    position: absolute;
+  }
+  .activeSelected::after {
+    background-color: var(--colorCompoundBrandStroke);
+  }
+  .activeSelected:enabled:hover::after {
+    background-color: var(--colorCompoundBrandStrokeHover);
+  }
+  .activeSelected:enabled:active::after {
+    background-color: var(--colorCompoundBrandStrokePressed);
+  }
+
+  @media (forced-colors: active) {
+    .activeSelected::after,
+    .activeSelected:enabled:hover::after,
+    .activeSelected:enabled:active::after {
+      background-color: ButtonText;
+    }
+  }
+
+  .activeDisabled::after {
+    background-color: var(--colorNeutralForegroundDisabled);
+  }
+
+  /* ---- Indicator positions: compound size × orientation selectors ---- */
+  /* Pending (::before) and active (::after) share the same geometry — handled together. */
+
+  /* Medium + horizontal (default via .horizontal baseline; small/large override below) */
+  .horizontal.pendingBase::before,
+  .horizontal.activeBase::after {
+    bottom: 0;
+    height: var(--strokeWidthThicker);
+    left: var(--spacingHorizontalM);
+    right: var(--spacingHorizontalM);
+  }
+  /* Medium + vertical */
+  .vertical.pendingBase::before,
+  .vertical.activeBase::after {
+    bottom: var(--spacingVerticalS);
+    inset-inline-start: 0;
+    top: var(--spacingVerticalS);
+    width: var(--strokeWidthThicker);
+  }
+  /* Small + horizontal */
+  .small.horizontal.pendingBase::before,
+  .small.horizontal.activeBase::after {
+    bottom: 0;
+    height: var(--strokeWidthThick);
+    left: var(--spacingHorizontalSNudge);
+    right: var(--spacingHorizontalSNudge);
+  }
+  /* Small + vertical */
+  .small.vertical.pendingBase::before,
+  .small.vertical.activeBase::after {
+    bottom: var(--spacingVerticalXS);
+    inset-inline-start: 0;
+    top: var(--spacingVerticalXS);
+    width: var(--strokeWidthThicker);
+  }
+  /* Large + horizontal: same geometry as medium, no override needed */
+  /* Large + vertical */
+  .large.vertical.pendingBase::before,
+  .large.vertical.activeBase::after {
+    bottom: var(--spacingVerticalMNudge);
+    inset-inline-start: 0;
+    top: var(--spacingVerticalMNudge);
+    width: var(--strokeWidthThicker);
+  }
+
+  /* ---- Circular appearance base ---- */
+  .circularBase {
+    border-radius: var(--borderRadiusCircular);
+    border: solid var(--strokeWidthThin) var(--colorTransparentStroke);
+  }
+
+  /* Reset selected icon/content colors inherited from non-circular .selected rules */
+  .circularBase :global(.fui-Tab__icon),
+  .circularBase :global(.fui-Tab__content) {
+    color: inherit;
+  }
+
+  /* Circular size padding: compound with .small/.large on the same button element */
+  .circularBase {
+    padding-block: calc(var(--spacingVerticalSNudge) - var(--strokeWidthThin));
+  }
+  .circularBase.small {
+    padding-block: calc(var(--spacingVerticalXXS) - var(--strokeWidthThin));
+  }
+  .circularBase.large {
+    padding-block: calc(var(--spacingVerticalS) - var(--strokeWidthThin));
+  }
+
+  /* ---- Subtle-circular appearance ---- */
+  .subtleCircular {
+    background-color: var(--colorSubtleBackground);
+    color: var(--colorNeutralForeground2);
+  }
+  .subtleCircular:enabled:hover {
+    background-color: var(--colorSubtleBackgroundHover);
+    border: solid var(--strokeWidthThin) var(--colorNeutralStroke1Hover);
+    color: var(--colorNeutralForeground2Hover);
+  }
+  .subtleCircular:enabled:active {
+    background-color: var(--colorSubtleBackgroundPressed);
+    border: solid var(--strokeWidthThin) var(--colorNeutralStroke1Pressed);
+    color: var(--colorNeutralForeground2Pressed);
+  }
+  @media (forced-colors: active) {
+    .subtleCircular {
+      border: solid var(--strokeWidthThin) Canvas;
+    }
+  }
+
+  /* selected, disabled: compound — CSS handles combinations, hook applies orthogonal classes */
+  .subtleCircular.selected {
+    background-color: var(--colorBrandBackground2);
+    border: solid var(--strokeWidthThin) var(--colorCompoundBrandStroke);
+    color: var(--colorBrandForeground2);
+  }
+  .subtleCircular.selected:enabled:hover {
+    background-color: var(--colorBrandBackground2Hover);
+    border: solid var(--strokeWidthThin) var(--colorCompoundBrandStrokeHover);
+    color: var(--colorBrandForeground2Hover);
+  }
+  .subtleCircular.selected:enabled:active {
+    background-color: var(--colorBrandBackground2Pressed);
+    border: solid var(--strokeWidthThin) var(--colorCompoundBrandStrokePressed);
+    color: var(--colorBrandForeground2Pressed);
+  }
+  @media (forced-colors: active) {
+    .subtleCircular.selected {
+      border: solid var(--strokeWidthThin) Highlight;
+    }
+  }
+
+  .subtleCircular.disabled {
+    background-color: var(--colorSubtleBackground);
+    color: var(--colorNeutralForegroundDisabled);
+  }
+  .subtleCircular.selected.disabled {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    border: solid var(--strokeWidthThin) var(--colorNeutralStrokeDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+  }
+
+  /* ---- Filled-circular appearance ---- */
+  .filledCircular {
+    background-color: var(--colorNeutralBackground3);
+    color: var(--colorNeutralForeground2);
+  }
+  .filledCircular:enabled:hover {
+    background-color: var(--colorNeutralBackground3Hover);
+    color: var(--colorNeutralForeground2Hover);
+  }
+  .filledCircular:enabled:active {
+    background-color: var(--colorNeutralBackground3Pressed);
+    color: var(--colorNeutralForeground2Pressed);
+  }
+
+  @media (forced-colors: active) {
+    .filledCircular:enabled:hover {
+      background-color: Highlight;
+      forced-color-adjust: none;
+    }
+    .filledCircular:enabled:hover :global(.fui-Tab__content),
+    .filledCircular:enabled:hover :global(.fui-Icon-filled),
+    .filledCircular:enabled:hover :global(.fui-Icon-regular) {
+      color: HighlightText;
+    }
+  }
+
+  .filledCircular.selected {
+    background-color: var(--colorBrandBackground);
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+  .filledCircular.selected:enabled:hover {
+    background-color: var(--colorBrandBackgroundHover);
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+  .filledCircular.selected:enabled:active {
+    background-color: var(--colorBrandBackgroundPressed);
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+
+  @media (forced-colors: active) {
+    .filledCircular.selected:enabled {
+      background-color: ButtonText;
+    }
+    .filledCircular.selected:enabled :global(.fui-Tab__content) {
+      color: ButtonFace;
+      forced-color-adjust: none;
+    }
+    .filledCircular.selected:enabled :global(.fui-Tab__icon) {
+      color: ButtonFace;
+    }
+  }
+
+  .filledCircular.disabled {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+  }
+  .filledCircular.selected.disabled {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    border: solid var(--strokeWidthThin) var(--colorNeutralStrokeDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+  }
+
+  /* ---- Icon slot ---- */
+  .icon {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    overflow: hidden;
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+  }
+
+  .icon :global(.fui-Icon-filled) {
+    display: none;
+  }
+  .icon :global(.fui-Icon-regular) {
+    display: inline;
+  }
+
+  /* Large tab: bigger icon via descendant selector from the button's .large class */
+  .large :global(.fui-Tab__icon) {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+
+  /* Selected state: swap to filled icon variant */
+  .selected :global(.fui-Tab__icon) :global(.fui-Icon-filled) {
+    display: inline;
+  }
+  .selected :global(.fui-Tab__icon) :global(.fui-Icon-regular) {
+    display: none;
+  }
+
+  /* ---- Content slot ---- */
+  .content {
+    overflow: hidden;
+    padding: 0 var(--spacingHorizontalXXS);
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+  }
+
+  /* Selected: semibold (body1Strong). Applies to all tabs including circular. */
+  .selected :global(.fui-Tab__content) {
+    font-weight: var(--fontWeightSemibold);
+  }
+
+  /* Large: bigger font (body2 / subtitle2) via descendant from button's .large class */
+  .large .content {
+    font-size: var(--fontSizeBase400);
+    line-height: var(--lineHeightBase400);
+  }
+
+  .contentNoIconBefore {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+  .contentIconBefore {
+    grid-column-start: 2;
+    grid-row-start: 1;
+  }
+
+  .contentPlaceholder {
+    visibility: hidden;
+    font-weight: var(--fontWeightSemibold);
+  }
+}

package/lib-commonjs/components/Tab/Tab.types.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/Tab.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n  /**\n   * Root of the component.\n   */\n  root: Slot<'button'>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n   */\n  content: NonNullable<Slot<'span'>>;\n};\n\nexport type TabInternalSlots = TabSlots & {\n  contentReservedSpace?: Slot<'span'>;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = Omit<ComponentProps<Partial<TabSlots>>, 'content' | 'value'> &\n  Pick<Partial<TabSlots>, 'content'> & {\n    /**\n     * A tab can be set to disable interaction.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * The value that identifies this tab when selected.\n     */\n    value: TabValue;\n  };\n\nexport type TabBaseProps = Omit<TabProps, 'contentReservedSpace'>;\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabInternalSlots> &\n  Pick<TabProps, 'value'> &\n  Required<Pick<TabProps, 'disabled'>> & {\n    /**\n     * A tab supports 'transparent', 'subtle', `subtle-circular` and `filled-circular` appearance.\n     */\n    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';\n\n    /**\n     * A tab can have only an icon slot filled and no content.\n     */\n    iconOnly: boolean;\n    /**\n     * If this tab is selected\n     */\n    selected: boolean;\n    /**\n     * When defined, tab content with selected style is rendered hidden to reserve space.\n     * This keeps consistent content size between unselected and selected states.\n     *\n     * @deprecated - use `contentReservedSpace` internal slot instead.\n     */\n    contentReservedSpaceClassName?: string;\n    /**\n     * A tab can be either 'small', 'medium', or 'large' size.\n     */\n    size: 'small' | 'medium' | 'large';\n    /**\n     * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n     */\n    vertical: boolean;\n  };\n\nexport type TabBaseState = Omit<TabState, 'appearance' | 'size' | 'contentReservedSpace'>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../../../src/components/Tab/Tab.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n  /**\n   * Root of the component.\n   */\n  root: Slot<'button'>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n   */\n  content: NonNullable<Slot<'span'>>;\n};\n\nexport type TabInternalSlots = TabSlots & {\n  contentReservedSpace?: Slot<'span'>;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = Omit<ComponentProps<Partial<TabSlots>>, 'content' | 'value'> &\n  Pick<Partial<TabSlots>, 'content'> & {\n    /**\n     * A tab can be set to disable interaction.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * The value that identifies this tab when selected.\n     */\n    value: TabValue;\n  };\n\nexport type TabBaseProps = Omit<TabProps, 'contentReservedSpace'>;\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabInternalSlots> &\n  Pick<TabProps, 'value'> &\n  Required<Pick<TabProps, 'disabled'>> & {\n    /**\n     * A tab supports 'transparent', 'subtle', `subtle-circular` and `filled-circular` appearance.\n     */\n    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';\n\n    /**\n     * A tab can have only an icon slot filled and no content.\n     */\n    iconOnly: boolean;\n    /**\n     * If this tab is selected\n     */\n    selected: boolean;\n    /**\n     * When defined, tab content with selected style is rendered hidden to reserve space.\n     * This keeps consistent content size between unselected and selected states.\n     *\n     * @deprecated - use `contentReservedSpace` internal slot instead.\n     */\n    contentReservedSpaceClassName?: string;\n    /**\n     * A tab can be either 'small', 'medium', or 'large' size.\n     */\n    size: 'small' | 'medium' | 'large';\n    /**\n     * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n     */\n    vertical: boolean;\n  };\n\nexport type TabBaseState = Omit<TabState, 'appearance' | 'size' | 'contentReservedSpace'>;\n"],"names":[],"mappings":""}

package/lib-commonjs/components/Tab/TabAnimatedIndicator.module.css

@@ -0,0 +1,27 @@
+@layer fluentui {
+  .base {
+    overflow: visible;
+  }
+  .animated::after {
+    transition-property: transform;
+    transition-duration: var(--durationSlow);
+    transition-timing-function: var(--curveDecelerateMax);
+  }
+  .horizontal::after {
+    transform-origin: left;
+    transform: translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));
+  }
+  :global([dir='rtl']) .horizontal::after {
+    transform-origin: right;
+  }
+  .vertical::after {
+    transform-origin: top;
+    transform: translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .animated::after {
+      transition-property: none;
+      transition-duration: 0.01ms;
+    }
+  }
+}

package/lib-commonjs/components/Tab/index.cjs

@@ -5,44 +5,44 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    Tab: function() {
+    get Tab () {
         return _Tab.Tab;
     },
-    renderTab_unstable: function() {
+    get renderTab_unstable () {
         return _renderTab.renderTab_unstable;
     },
-    tabClassNames: function() {
+    get tabClassNames () {
         return _useTabStylesstyles.tabClassNames;
     },
-    tabReservedSpaceClassNames: function() {
+    get tabReservedSpaceClassNames () {
         return _useTabStylesstyles.tabReservedSpaceClassNames;
     },
-    useTabA11yBehavior_unstable: function() {
+    get useTabA11yBehavior_unstable () {
         return _useTab.useTabA11yBehavior_unstable;
     },
-    useTabAnimatedIndicatorStyles_unstable: function() {
+    get useTabAnimatedIndicatorStyles_unstable () {
         return _useTabAnimatedIndicatorstyles.useTabAnimatedIndicatorStyles_unstable;
     },
-    useTabBase_unstable: function() {
+    get useTabBase_unstable () {
         return _useTab.useTabBase_unstable;
     },
-    useTabButtonStyles_unstable: function() {
+    get useTabButtonStyles_unstable () {
         return _useTabStylesstyles.useTabButtonStyles_unstable;
     },
-    useTabContentStyles_unstable: function() {
+    get useTabContentStyles_unstable () {
         return _useTabStylesstyles.useTabContentStyles_unstable;
     },
-    useTabIndicatorStyles_unstable: function() {
+    get useTabIndicatorStyles_unstable () {
         return _useTabStylesstyles.useTabIndicatorStyles_unstable;
     },
-    useTabStyles_unstable: function() {
+    get useTabStyles_unstable () {
         return _useTabStylesstyles.useTabStyles_unstable;
     },
-    useTab_unstable: function() {
+    get useTab_unstable () {
         return _useTab.useTab_unstable;
     }
 });

package/lib-commonjs/components/Tab/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/index.ts"],"sourcesContent":["export { Tab } from './Tab';\nexport type { TabInternalSlots, TabBaseProps, TabProps, TabSlots, TabBaseState, TabState, TabValue } from './Tab.types';\nexport { renderTab_unstable } from './renderTab';\nexport { useTab_unstable, useTabBase_unstable, useTabA11yBehavior_unstable } from './useTab';\nexport {\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n} from './useTabStyles.styles';\nexport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n"],"names":["Tab","renderTab_unstable","useTab_unstable","useTabBase_unstable","useTabA11yBehavior_unstable","tabClassNames","tabReservedSpaceClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTabAnimatedIndicatorStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;uBAAG;;;eAEHC,6BAAkB;;;eAGzBI,iCAAa;;8BACa;eAA1BC;;;eAH6CF,mCAA2B;;0CAS3B;eAAtCO;;;eATiBR,2BAAmB;;+BAIhB;eAA3BI;;IACAC,4BAA4B;;;;eAC5BC,kDAA8B;;;eAC9BC,yCAAqB;;;eAPdR,uBAAe;;;qBAHJ,WAAQ;2BAEO,iBAAc;wBACiC,cAAW;oCAQtF,2BAAwB;+CACwB,sCAAmC"}
+{"version":3,"sources":["../../../src/components/Tab/index.ts"],"sourcesContent":["export { Tab } from './Tab';\nexport type { TabInternalSlots, TabBaseProps, TabProps, TabSlots, TabBaseState, TabState, TabValue } from './Tab.types';\nexport { renderTab_unstable } from './renderTab';\nexport { useTab_unstable, useTabBase_unstable, useTabA11yBehavior_unstable } from './useTab';\nexport {\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n} from './useTabStyles.styles';\nexport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n"],"names":["Tab","renderTab_unstable","useTab_unstable","useTabBase_unstable","useTabA11yBehavior_unstable","tabClassNames","tabReservedSpaceClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTabAnimatedIndicatorStyles_unstable"],"mappings":";;;;;;;;;;;QAASA;uBAAG;;;eAEHC,6BAAkB;;;eAGzBI,iCAAa;;;eACbC,8CAA0B;;;eAHmBF,mCAA2B;;;eASjEO,qEAAsC;;;eATrBR,2BAAmB;;;eAI3CI,+CAA2B;;;eAC3BC,gDAA4B;;;eAC5BC,kDAA8B;;;eAC9BC,yCAAqB;;;eAPdR,uBAAe;;;qBAHJ,WAAQ;2BAEO,iBAAc;wBACiC,cAAW;oCAQtF,2BAAwB;+CACwB,sCAAmC"}

package/lib-commonjs/components/Tab/renderTab.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/renderTab.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabBaseState, TabInternalSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabBaseState): JSXElement => {\n  assertSlots<TabInternalSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!state.iconOnly && <state.content />}\n      {state.contentReservedSpace && <state.contentReservedSpace />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTab_unstable","state","root","icon","iconOnly","content","contentReservedSpace"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCACrB,4BAA4B;AAOjD,2BAA2B,CAACC;QACjCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,IAAI,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,IAAI,EAAA,CAAA;YACzB,CAACF,MAAMG,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMI,OAAO,EAAA,CAAA;YACjCJ,MAAMK,oBAAoB,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,oBAAoB,EAAA,CAAA;;;AAGhE,EAAE"}
+{"version":3,"sources":["../../../src/components/Tab/renderTab.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabBaseState, TabInternalSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabBaseState): JSXElement => {\n  assertSlots<TabInternalSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!state.iconOnly && <state.content />}\n      {state.contentReservedSpace && <state.contentReservedSpace />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTab_unstable","state","root","icon","iconOnly","content","contentReservedSpace"],"mappings":";;;;+BASaC;;;;;;;gCARb,gDAAiD,GACjD,SAASD,WAAW,QAAQ,4BAA4B;AAOjD,2BAA2B,CAACE;QACjCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,IAAI,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,IAAI,EAAA,CAAA;YACzB,CAACF,MAAMG,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMI,OAAO,EAAA,CAAA;YACjCJ,MAAMK,oBAAoB,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,oBAAoB,EAAA,CAAA;;;AAGhE,EAAE"}

package/lib-commonjs/components/Tab/useTab.cjs

@@ -6,17 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    useTabA11yBehavior_unstable: function() {
+    get useTabA11yBehavior_unstable () {
         return useTabA11yBehavior_unstable;
     },
-    useTabBase_unstable: function() {
+    get useTabBase_unstable () {
         return useTabBase_unstable;
     },
-    useTab_unstable: function() {
+    get useTab_unstable () {
         return useTab_unstable;
     }
 });

package/lib-commonjs/components/Tab/useTab.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type TabsterDOMAttribute, useTabsterAttributes } from '@fluentui/react-tabster';\nimport { mergeCallbacks, useEventCallback, useMergedRefs, slot, omit } from '@fluentui/react-utilities';\nimport type { TabProps, TabState, TabBaseProps, TabBaseState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList';\nimport type { SelectTabEvent } from '../TabList';\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 } = props;\n\n  const state = useTabBase_unstable(props, ref);\n  const focusAttributes = useTabA11yBehavior_unstable(state);\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const size = useTabListContext_unstable(ctx => ctx.size ?? 'medium');\n\n  const contentReservedSpace: typeof content =\n    content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, contentReservedSpace: 'span' },\n    root: {\n      ...focusAttributes,\n      ...state.root,\n    },\n    contentReservedSpace: slot.optional(contentReservedSpace, {\n      renderByDefault: !state.selected && !state.iconOnly && reserveSelectedTabSpace,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    appearance,\n    size,\n  };\n};\n\n/**\n * Create the based state required to render Tab without design specifics and focus attributes.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTabBase_unstable = (props: TabBaseProps, ref: React.Ref<HTMLElement>): TabBaseState => {\n  const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value, ...rest } = props;\n\n  const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n  const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  const iconSlot = slot.optional(icon, { elementType: 'span' });\n  const contentSlot = slot.always(content, {\n    defaultProps: { children: props.children },\n    elementType: 'span',\n  });\n  const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n  return {\n    components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n    root: slot.always(\n      {\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}` as 'true' | 'false'),\n        value,\n        ...rest,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      },\n      { elementType: 'button' },\n    ) as TabBaseState['root'],\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    disabled,\n    selected,\n    value,\n    vertical,\n  };\n};\n\n/**\n * Hook to return a11y attributes to a Tab based on selected state.\n * Should be applied on the button with role=\"tab\".\n *\n * @param selected - whether the Tab is selected\n * @returns Tabster DOM attributes\n */\nexport const useTabA11yBehavior_unstable = ({ selected }: Pick<TabBaseState, 'selected'>): TabsterDOMAttribute => {\n  return useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n};\n"],"names":["React","useTabsterAttributes","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","state","useTabBase_unstable","focusAttributes","useTabA11yBehavior_unstable","appearance","ctx","reserveSelectedTabSpace","size","contentReservedSpace","components","root","optional","renderByDefault","selected","iconOnly","defaultProps","children","elementType","disabled","tabDisabled","icon","onClick","onFocus","value","rest","selectTabOnFocus","listDisabled","selectedValue","onRegister","onUnregister","onSelect","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","useEffect","iconSlot","contentSlot","always","Boolean","role","type","undefined","focusable","isDefault"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Tab/useTab.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type TabsterDOMAttribute, useTabsterAttributes } from '@fluentui/react-tabster';\nimport { mergeCallbacks, useEventCallback, useMergedRefs, slot, omit } from '@fluentui/react-utilities';\nimport type { TabProps, TabState, TabBaseProps, TabBaseState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList';\nimport type { SelectTabEvent } from '../TabList';\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 } = props;\n\n  const state = useTabBase_unstable(props, ref);\n  const focusAttributes = useTabA11yBehavior_unstable(state);\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const size = useTabListContext_unstable(ctx => ctx.size ?? 'medium');\n\n  const contentReservedSpace: typeof content =\n    content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, contentReservedSpace: 'span' },\n    root: {\n      ...focusAttributes,\n      ...state.root,\n    },\n    contentReservedSpace: slot.optional(contentReservedSpace, {\n      renderByDefault: !state.selected && !state.iconOnly && reserveSelectedTabSpace,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    appearance,\n    size,\n  };\n};\n\n/**\n * Create the based state required to render Tab without design specifics and focus attributes.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTabBase_unstable = (props: TabBaseProps, ref: React.Ref<HTMLElement>): TabBaseState => {\n  const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value, ...rest } = props;\n\n  const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n  const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  const iconSlot = slot.optional(icon, { elementType: 'span' });\n  const contentSlot = slot.always(content, {\n    defaultProps: { children: props.children },\n    elementType: 'span',\n  });\n  const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n  return {\n    components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n    root: slot.always(\n      {\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}` as 'true' | 'false'),\n        value,\n        ...rest,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      },\n      { elementType: 'button' },\n    ) as TabBaseState['root'],\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    disabled,\n    selected,\n    value,\n    vertical,\n  };\n};\n\n/**\n * Hook to return a11y attributes to a Tab based on selected state.\n * Should be applied on the button with role=\"tab\".\n *\n * @param selected - whether the Tab is selected\n * @returns Tabster DOM attributes\n */\nexport const useTabA11yBehavior_unstable = ({ selected }: Pick<TabBaseState, 'selected'>): TabsterDOMAttribute => {\n  return useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n};\n"],"names":["React","useTabsterAttributes","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","state","useTabBase_unstable","focusAttributes","useTabA11yBehavior_unstable","appearance","ctx","reserveSelectedTabSpace","size","contentReservedSpace","components","root","optional","renderByDefault","selected","iconOnly","defaultProps","children","elementType","disabled","tabDisabled","icon","onClick","onFocus","value","rest","selectTabOnFocus","listDisabled","selectedValue","onRegister","onUnregister","onSelect","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","useEffect","iconSlot","contentSlot","always","Boolean","role","type","undefined","focusable","isDefault"],"mappings":"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"}