@fluentui/react-tabs 9.5.2 → 9.6.0

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

@@ -149,25 +149,25 @@ const iconClassNames = {
     },
     transparent: {
         De3pzq: "f1c21dwh",
-        Jwef8y: "fjxutwb",
-        ecr2s2: "fophhak",
+        B95qlz1: "f9rvdkv",
+        B7xitij: "f1051ucx",
         Bptxc3x: "fmmjozx",
-        B076xvk: "f1mfqf41",
-        q9r9w5: "f10aiid4",
+        Bwqhzpy: "fqhzt5g",
+        iyk698: "f7l5cgy",
         cl4aha: "fpkze5g",
-        Bk452zc: "f149wc3x",
-        a4hkcw: "fjioou7"
+        B0q3jbp: "f1iywnoi",
+        Be9ayug: "f9n45c4"
     },
     subtle: {
         De3pzq: "fhovq9v",
-        Jwef8y: "f1t94bn6",
-        ecr2s2: "f1wfn5kd",
+        B95qlz1: "f1bifk9c",
+        B7xitij: "fo6hitd",
         Bptxc3x: "fmmjozx",
-        B076xvk: "f1mfqf41",
-        q9r9w5: "f10aiid4",
+        Bwqhzpy: "fqhzt5g",
+        iyk698: "f7l5cgy",
         cl4aha: "fpkze5g",
-        Bk452zc: "f149wc3x",
-        a4hkcw: "fjioou7"
+        B0q3jbp: "f1iywnoi",
+        Be9ayug: "f9n45c4"
     },
     disabled: {
         De3pzq: "f1c21dwh",
@@ -177,11 +177,234 @@ const iconClassNames = {
     },
     selected: {
         Bptxc3x: "f1cadz5z",
-        B076xvk: "f1ck17l",
-        q9r9w5: "f42ak0g",
+        Bwqhzpy: "fwhdxxj",
+        iyk698: "fintccb",
         cl4aha: "ffplhdr",
-        Bk452zc: "ffth601",
-        a4hkcw: "fhklyu5"
+        B0q3jbp: "fjo17wb",
+        Be9ayug: "f148789c"
+    },
+    circular: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f44lkw9",
+        Bptxc3x: "ftorr8m",
+        cl4aha: "f16lqpmv"
+    },
+    subtleCircular: {
+        De3pzq: "f1c21dwh",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "fp7rvkm",
+        sj55zd: "fkfq4zb",
+        B95qlz1: "f1yywxnv",
+        Eo63ln: 0,
+        r9osk6: 0,
+        Itrz8y: 0,
+        zeg6vx: 0,
+        l65xgk: 0,
+        Bw4olcx: 0,
+        Folb0i: 0,
+        I2h8y4: 0,
+        Bgxgoyi: 0,
+        Bvlkotb: 0,
+        Fwyncl: 0,
+        Byh5edv: 0,
+        Becqvjq: 0,
+        uumbiq: 0,
+        B73q3dg: 0,
+        Bblwbaf: 0,
+        B0ezav: "ft57sj0",
+        r4wkhp: "f1fcoy83",
+        B7xitij: "f1lzpamt",
+        d3wsvi: 0,
+        Hdqn7s: 0,
+        zu5y1p: 0,
+        owqphb: 0,
+        g9c53k: 0,
+        Btmu08z: 0,
+        Bthxvy6: 0,
+        gluvuq: 0,
+        tb88gp: 0,
+        wns6jk: 0,
+        kdfdk4: 0,
+        Bbw008l: 0,
+        Bayi1ib: 0,
+        B1kkfu3: 0,
+        J1oqyp: 0,
+        kem6az: 0,
+        goa3yj: "fhn220o",
+        p743kt: "f15qf7sh"
+    },
+    subtleCircularSelected: {
+        De3pzq: "f16xkysk",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f1c2pc3t",
+        sj55zd: "faj9fo0",
+        B95qlz1: "fsm7zmf",
+        Eo63ln: 0,
+        r9osk6: 0,
+        Itrz8y: 0,
+        zeg6vx: 0,
+        l65xgk: 0,
+        Bw4olcx: 0,
+        Folb0i: 0,
+        I2h8y4: 0,
+        Bgxgoyi: 0,
+        Bvlkotb: 0,
+        Fwyncl: 0,
+        Byh5edv: 0,
+        Becqvjq: 0,
+        uumbiq: 0,
+        B73q3dg: 0,
+        Bblwbaf: 0,
+        B0ezav: "f1wo0sfq",
+        r4wkhp: "f1afuynh",
+        B7xitij: "f94ddyl",
+        d3wsvi: 0,
+        Hdqn7s: 0,
+        zu5y1p: 0,
+        owqphb: 0,
+        g9c53k: 0,
+        Btmu08z: 0,
+        Bthxvy6: 0,
+        gluvuq: 0,
+        tb88gp: 0,
+        wns6jk: 0,
+        kdfdk4: 0,
+        Bbw008l: 0,
+        Bayi1ib: 0,
+        B1kkfu3: 0,
+        J1oqyp: 0,
+        kem6az: 0,
+        goa3yj: "fmle6oo",
+        p743kt: "f1d3itm4"
+    },
+    subtleCircularDisabled: {
+        De3pzq: "f1c21dwh",
+        sj55zd: "f1s2aq7o",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "fp7rvkm"
+    },
+    subtleCircularDisabledSelected: {
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "fegtqic"
+    },
+    filledCircular: {
+        De3pzq: "f16xq7d1",
+        sj55zd: "fkfq4zb",
+        B95qlz1: "fwwxidx",
+        r4wkhp: "f1fcoy83",
+        B7xitij: "f14i52sd",
+        p743kt: "f15qf7sh"
+    },
+    filledCircularSelected: {
+        De3pzq: "ffp7eso",
+        sj55zd: "f1phragk",
+        B95qlz1: "f1lm9dni",
+        r4wkhp: "f1mn5ei1",
+        B7xitij: "f1g6ncd0",
+        p743kt: "fl71aob"
+    },
+    filledCircularDisabled: {
+        De3pzq: "f1bg9a2p",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "fp7rvkm",
+        sj55zd: "f1s2aq7o"
+    },
+    filledCircularDisabledSelected: {
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "fegtqic"
     }
 }, {
     d: [
@@ -256,30 +479,116 @@ const iconClassNames = {
             }
         ],
         ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".f9rvdkv:enabled:hover{background-color:var(--colorTransparentBackgroundHover);}",
+        ".f1051ucx:enabled:active{background-color:var(--colorTransparentBackgroundPressed);}",
         ".fmmjozx .fui-Tab__icon{color:var(--colorNeutralForeground2);}",
+        ".fqhzt5g:enabled:hover .fui-Tab__icon{color:var(--colorNeutralForeground2Hover);}",
+        ".f7l5cgy:enabled:active .fui-Tab__icon{color:var(--colorNeutralForeground2Pressed);}",
         ".fpkze5g .fui-Tab__content{color:var(--colorNeutralForeground2);}",
+        ".f1iywnoi:enabled:hover .fui-Tab__content{color:var(--colorNeutralForeground2Hover);}",
+        ".f9n45c4:enabled:active .fui-Tab__content{color:var(--colorNeutralForeground2Pressed);}",
         ".fhovq9v{background-color:var(--colorSubtleBackground);}",
+        ".f1bifk9c:enabled:hover{background-color:var(--colorSubtleBackgroundHover);}",
+        ".fo6hitd:enabled:active{background-color:var(--colorSubtleBackgroundPressed);}",
         ".fato7r6 .fui-Tab__icon{color:var(--colorNeutralForegroundDisabled);}",
         ".fao1bnu .fui-Tab__content{color:var(--colorNeutralForegroundDisabled);}",
         ".fdrzuqr{cursor:not-allowed;}",
         ".f1cadz5z .fui-Tab__icon{color:var(--colorCompoundBrandForeground1);}",
-        ".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}"
-    ],
-    h: [
-        ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}",
-        ".f1mfqf41:hover .fui-Tab__icon{color:var(--colorNeutralForeground2Hover);}",
-        ".f149wc3x:hover .fui-Tab__content{color:var(--colorNeutralForeground2Hover);}",
-        ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}",
-        ".f1ck17l:hover .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Hover);}",
-        ".ffth601:hover .fui-Tab__content{color:var(--colorNeutralForeground1Hover);}"
-    ],
-    a: [
-        ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}",
-        ".f10aiid4:active .fui-Tab__icon{color:var(--colorNeutralForeground2Pressed);}",
-        ".fjioou7:active .fui-Tab__content{color:var(--colorNeutralForeground2Pressed);}",
-        ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}",
-        ".f42ak0g:active .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Pressed);}",
-        ".fhklyu5:active .fui-Tab__content{color:var(--colorNeutralForeground1Pressed);}"
+        ".fwhdxxj:enabled:hover .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Hover);}",
+        ".fintccb:enabled:active .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Pressed);}",
+        ".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}",
+        ".fjo17wb:enabled:hover .fui-Tab__content{color:var(--colorNeutralForeground1Hover);}",
+        ".f148789c:enabled:active .fui-Tab__content{color:var(--colorNeutralForeground1Pressed);}",
+        [
+            ".f44lkw9{border-radius:var(--borderRadiusCircular);}",
+            {
+                p: -1
+            }
+        ],
+        ".ftorr8m .fui-Tab__icon{color:inherit;}",
+        ".f16lqpmv .fui-Tab__content{color:inherit;}",
+        [
+            ".fp7rvkm{border:solid var(--strokeWidthThin) var(--colorTransparentStroke);}",
+            {
+                p: -2
+            }
+        ],
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}",
+        ".f1yywxnv:enabled:hover{background-color:var(--colorNeutralBackground1Hover);}",
+        [
+            ".ft57sj0:enabled:hover{border:solid var(--strokeWidthThin) var(--colorNeutralStroke1Hover);}",
+            {
+                p: -2
+            }
+        ],
+        ".f1fcoy83:enabled:hover{color:var(--colorNeutralForeground2Hover);}",
+        ".f1lzpamt:enabled:active{background-color:var(--colorNeutralBackground1Pressed);}",
+        [
+            ".fhn220o:enabled:active{border:solid var(--strokeWidthThin) var(--colorNeutralStroke1Pressed);}",
+            {
+                p: -2
+            }
+        ],
+        ".f15qf7sh:enabled:active{color:var(--colorNeutralForeground2Pressed);}",
+        ".f16xkysk{background-color:var(--colorBrandBackground2);}",
+        [
+            ".f1c2pc3t{border:solid var(--strokeWidthThin) var(--colorCompoundBrandStroke);}",
+            {
+                p: -2
+            }
+        ],
+        ".faj9fo0{color:var(--colorBrandForeground2);}",
+        ".fsm7zmf:enabled:hover{background-color:var(--colorBrandBackground2Hover);}",
+        [
+            ".f1wo0sfq:enabled:hover{border:solid var(--strokeWidthThin) var(--colorCompoundBrandStrokeHover);}",
+            {
+                p: -2
+            }
+        ],
+        ".f1afuynh:enabled:hover{color:var(--colorBrandForeground2Hover);}",
+        ".f94ddyl:enabled:active{background-color:var(--colorBrandBackground2Pressed);}",
+        [
+            ".fmle6oo:enabled:active{border:solid var(--strokeWidthThin) var(--colorCompoundBrandStrokePressed);}",
+            {
+                p: -2
+            }
+        ],
+        ".f1d3itm4:enabled:active{color:var(--colorBrandForeground2Pressed);}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        [
+            ".fp7rvkm{border:solid var(--strokeWidthThin) var(--colorTransparentStroke);}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".fegtqic{border:solid var(--strokeWidthThin) var(--colorNeutralStrokeDisabled);}",
+            {
+                p: -2
+            }
+        ],
+        ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
+        ".fwwxidx:enabled:hover{background-color:var(--colorNeutralBackground3Hover);}",
+        ".f14i52sd:enabled:active{background-color:var(--colorNeutralBackground3Pressed);}",
+        ".ffp7eso{background-color:var(--colorBrandBackground);}",
+        ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
+        ".f1lm9dni:enabled:hover{background-color:var(--colorBrandBackgroundHover);}",
+        ".f1mn5ei1:enabled:hover{color:var(--colorNeutralForegroundOnBrand);}",
+        ".f1g6ncd0:enabled:active{background-color:var(--colorBrandBackgroundPressed);}",
+        ".fl71aob:enabled:active{color:var(--colorNeutralForegroundOnBrand);}",
+        ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}",
+        [
+            ".fp7rvkm{border:solid var(--strokeWidthThin) var(--colorTransparentStroke);}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".fegtqic{border:solid var(--strokeWidthThin) var(--colorNeutralStrokeDisabled);}",
+            {
+                p: -2
+            }
+        ]
     ]
 });
 /**
@@ -477,11 +786,11 @@ const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
     },
     selected: {
         Bjyk6c5: "f1ksivud",
-        Glksuk: "f1eytvvh",
-        Blzl0y7: "fuaa9s",
+        Bej4dhw: "f1476jrx",
+        B7wqxwa: "f18q216b",
         f7digc: "fy7ktjt",
-        Biqphg1: "f16tp0gf",
-        Bntoloa: "fj0yp7j"
+        Bvuzv5k: "f1033yux",
+        k4sdgo: "fkh9b8o"
     },
     disabled: {
         Bjyk6c5: "f13lkzet"
@@ -561,6 +870,8 @@ const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f13zj6fq::after{content:\"\";}",
         ".f1mdlcz9::after{position:absolute;}",
         ".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}",
+        ".f1476jrx:enabled:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}",
+        ".f18q216b:enabled:active::after{background-color:var(--colorCompoundBrandStrokePressed);}",
         ".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}",
         ".fo72kxq::after{bottom:0;}",
         ".f9bb2ob::after{height:var(--strokeWidthThick);}",
@@ -579,12 +890,6 @@ const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f1w7dm5g::after{bottom:var(--spacingVerticalMNudge);}",
         ".f1p6em4m::after{top:var(--spacingVerticalMNudge);}"
     ],
-    h: [
-        ".f1eytvvh:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}"
-    ],
-    a: [
-        ".fuaa9s:active::after{background-color:var(--colorCompoundBrandStrokePressed);}"
-    ],
     m: [
         [
             "@media (forced-colors: active){.fy7ktjt::after{background-color:ButtonText;}}",
@@ -593,13 +898,13 @@ const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
             }
         ],
         [
-            "@media (forced-colors: active){.f16tp0gf:hover::after{background-color:ButtonText;}}",
+            "@media (forced-colors: active){.f1033yux:enabled:hover::after{background-color:ButtonText;}}",
             {
                 m: "(forced-colors: active)"
             }
         ],
         [
-            "@media (forced-colors: active){.fj0yp7j:active::after{background-color:ButtonText;}}",
+            "@media (forced-colors: active){.fkh9b8o:enabled:active::after{background-color:ButtonText;}}",
             {
                 m: "(forced-colors: active)"
             }
@@ -750,10 +1055,17 @@ const useTabIndicatorStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const pendingIndicatorStyles = usePendingIndicatorStyles();
     const activeIndicatorStyles = useActiveIndicatorStyles();
-    const { disabled, selected, size, vertical } = state;
-    state.root.className = (0, _react.mergeClasses)(tabClassNames.root, rootStyles.root, // pending indicator (before pseudo element)
-    pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)
-    selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);
+    const { appearance, disabled, selected, size, vertical } = state;
+    const classes = [
+        tabClassNames.root,
+        rootStyles.root
+    ];
+    if (appearance !== 'subtle-circular' && appearance !== 'filled-circular') {
+        classes.push(// pending indicator (before pseudo element)
+        pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)
+        selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled);
+    }
+    state.root.className = (0, _react.mergeClasses)(...classes, state.root.className);
     (0, _useTabAnimatedIndicatorstyles.useTabAnimatedIndicatorStyles_unstable)(state);
     return state;
 };
@@ -762,7 +1074,27 @@ const useTabButtonStyles_unstable = (state, slot)=>{
     const rootStyles = useRootStyles();
     const focusStyles = useFocusStyles();
     const { appearance, disabled, selected, size, vertical } = state;
-    slot.className = (0, _react.mergeClasses)(rootStyles.button, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, slot.className);
+    const isSubtleCircular = appearance === 'subtle-circular';
+    const isFilledCircular = appearance === 'filled-circular';
+    const isCircular = isSubtleCircular || isFilledCircular;
+    const circularAppearance = [
+        rootStyles.circular,
+        // subtle-circular appearance
+        isSubtleCircular && rootStyles.subtleCircular,
+        selected && isSubtleCircular && rootStyles.subtleCircularSelected,
+        disabled && isSubtleCircular && rootStyles.subtleCircularDisabled,
+        selected && disabled && isSubtleCircular && rootStyles.subtleCircularDisabledSelected,
+        // filled-circular appearance
+        isFilledCircular && rootStyles.filledCircular,
+        selected && isFilledCircular && rootStyles.filledCircularSelected,
+        disabled && isFilledCircular && rootStyles.filledCircularDisabled,
+        selected && disabled && isFilledCircular && rootStyles.filledCircularDisabledSelected
+    ];
+    slot.className = (0, _react.mergeClasses)(rootStyles.button, // orientation
+    vertical ? rootStyles.vertical : rootStyles.horizontal, // size
+    size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, ...isCircular ? circularAppearance : [
+        !disabled && selected && rootStyles.selected
+    ], disabled && rootStyles.disabled, slot.className);
     return state;
 };
 const useTabContentStyles_unstable = (state)=>{