@fluentui/react-tabs 9.0.0-beta.10 → 9.0.0-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.json +72 -1
  2. package/CHANGELOG.md +23 -6
  3. package/dist/{react-tabs.d.ts → index.d.ts} +0 -0
  4. package/lib/components/Tab/useTab.js +3 -0
  5. package/lib/components/Tab/useTab.js.map +1 -1
  6. package/lib/components/Tab/useTabAnimatedIndicator.js +6 -6
  7. package/lib/components/Tab/useTabAnimatedIndicator.js.map +1 -1
  8. package/lib/components/Tab/useTabStyles.js +171 -170
  9. package/lib/components/Tab/useTabStyles.js.map +1 -1
  10. package/lib-commonjs/components/Tab/useTab.js +3 -0
  11. package/lib-commonjs/components/Tab/useTab.js.map +1 -1
  12. package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js +7 -7
  13. package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js.map +1 -1
  14. package/lib-commonjs/components/Tab/useTabStyles.js +170 -170
  15. package/lib-commonjs/components/Tab/useTabStyles.js.map +1 -1
  16. package/package.json +8 -8
  17. package/lib/tab.constants.d.ts +0 -62
  18. package/lib/tab.constants.js +0 -68
  19. package/lib/tab.constants.js.map +0 -1
  20. package/lib-commonjs/tab.constants.d.ts +0 -62
  21. package/lib-commonjs/tab.constants.js +0 -75
  22. package/lib-commonjs/tab.constants.js.map +0 -1
package/lib/components/Tab/useTabStyles.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { __styles, mergeClasses, shorthands } from '@griffel/react';
2
2
  import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
3
- import { tokens } from '@fluentui/react-theme';
4
- import { pendingContentSizeTokens, pendingSpacingTokens, tabIndicatorPadding, tabIndicatorStrokeWidths } from '../../tab.constants';
3
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
5
4
  import { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';
6
5
  export const tabClassNames = {
7
6
  root: 'fui-Tab',
@@ -44,35 +43,35 @@ const useRootStyles = /*#__PURE__*/__styles({
44
43
  "B9bfxx9": "f1cxpek8"
45
44
  },
46
45
  "mediumHorizontal": {
47
- "i8kkvl": "fgfbwa2",
46
+ "i8kkvl": "f1rjii52",
48
47
  "Brf1p80": "f4d9j23",
49
- "z8tnut": "f1kcqot9",
50
- "z189sj": ["f81rol6", "frdkuqy"],
51
- "Byoj8tv": "fpe6lb7",
52
- "uwmqm3": ["frdkuqy", "f81rol6"]
48
+ "z8tnut": "f5yzyt",
49
+ "z189sj": ["f11gcy0p", "f1ng84yb"],
50
+ "Byoj8tv": "fx3omr",
51
+ "uwmqm3": ["f1ng84yb", "f11gcy0p"]
53
52
  },
54
53
  "mediumVertical": {
55
- "i8kkvl": "fgfbwa2",
54
+ "i8kkvl": "f1rjii52",
56
55
  "Brf1p80": "fbhxue7",
57
56
  "Bf4jedk": "fyvtabn",
58
- "z8tnut": "f1xp5gbu",
59
- "z189sj": ["f81rol6", "frdkuqy"],
60
- "Byoj8tv": "f1d7kygh",
61
- "uwmqm3": ["frdkuqy", "f81rol6"]
57
+ "z8tnut": "fp2oml8",
58
+ "z189sj": ["f11gcy0p", "f1ng84yb"],
59
+ "Byoj8tv": "f1tdddsa",
60
+ "uwmqm3": ["f1ng84yb", "f11gcy0p"]
62
61
  },
63
62
  "smallHorizontal": {
64
- "i8kkvl": "f16mnhsx",
65
- "z8tnut": "f1xp5gbu",
66
- "z189sj": ["f1sgzk6v", "f1bg5zqg"],
67
- "Byoj8tv": "f1d7kygh",
68
- "uwmqm3": ["f1bg5zqg", "f1sgzk6v"]
63
+ "i8kkvl": "f14mj54c",
64
+ "z8tnut": "fp2oml8",
65
+ "z189sj": ["fdw0yi8", "fk8j09s"],
66
+ "Byoj8tv": "f1tdddsa",
67
+ "uwmqm3": ["fk8j09s", "fdw0yi8"]
69
68
  },
70
69
  "smallVertical": {
71
- "i8kkvl": "f16mnhsx",
72
- "z8tnut": "fq1loh5",
73
- "z189sj": ["f1sgzk6v", "f1bg5zqg"],
74
- "Byoj8tv": "futqtb8",
75
- "uwmqm3": ["f1bg5zqg", "f1sgzk6v"]
70
+ "i8kkvl": "f14mj54c",
71
+ "z8tnut": "fclwglc",
72
+ "z189sj": ["fdw0yi8", "fk8j09s"],
73
+ "Byoj8tv": "fywfov9",
74
+ "uwmqm3": ["fk8j09s", "fdw0yi8"]
76
75
  },
77
76
  "transparent": {
78
77
  "De3pzq": "f1c21dwh",
@@ -111,7 +110,7 @@ const useRootStyles = /*#__PURE__*/__styles({
111
110
  "a4hkcw": "fhklyu5"
112
111
  }
113
112
  }, {
114
- "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fwhevhj{border-top-color:none;}", ".f61n433{border-right-color:none;}", ".f1q8l70w{border-left-color:none;}", ".fv1dfc8{border-bottom-color:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1k6fduh{cursor:pointer;}", ".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;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1s6fcnf{outline-style:none;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1cxpek8{text-transform:none;}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1kcqot9{padding-top:12px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fpe6lb7{padding-bottom:12px;}", ".fbhxue7{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}", ".fyvtabn{min-width:120px;}", ".f1xp5gbu{padding-top:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".fq1loh5{padding-top:2px;}", ".futqtb8{padding-bottom:2px;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fmmjozx .fui-Tab__icon{color:var(--colorNeutralForeground2);}", ".fpkze5g .fui-Tab__content{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fato7r6 .fui-Tab__icon{color:var(--colorNeutralForegroundDisabled);}", ".fao1bnu .fui-Tab__content{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1cadz5z .fui-Tab__icon{color:var(--colorCompoundBrandForeground1);}", ".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}"],
113
+ "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fwhevhj{border-top-color:none;}", ".f61n433{border-right-color:none;}", ".f1q8l70w{border-left-color:none;}", ".fv1dfc8{border-bottom-color:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1k6fduh{cursor:pointer;}", ".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;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1s6fcnf{outline-style:none;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1cxpek8{text-transform:none;}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f5yzyt{padding-top:var(--spacingVerticalM);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fx3omr{padding-bottom:var(--spacingVerticalM);}", ".fbhxue7{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}", ".fyvtabn{min-width:120px;}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fmmjozx .fui-Tab__icon{color:var(--colorNeutralForeground2);}", ".fpkze5g .fui-Tab__content{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fato7r6 .fui-Tab__icon{color:var(--colorNeutralForegroundDisabled);}", ".fao1bnu .fui-Tab__content{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1cadz5z .fui-Tab__icon{color:var(--colorCompoundBrandForeground1);}", ".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}"],
115
114
  "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);}"],
116
115
  "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);}"]
117
116
  });
@@ -144,178 +143,178 @@ const useFocusStyles = /*#__PURE__*/__styles({
144
143
 
145
144
  const usePendingIndicatorStyles = /*#__PURE__*/__styles({
146
145
  "base": {
147
- "Cgij5x": "f19tg446",
148
- "z7qlni": "f1mav41w",
149
- "Bdipjll": ["f1suiu43", "f1kv3e19"],
150
- "B37a91": "f1hmukci",
151
- "Buig1va": ["f1kv3e19", "f1suiu43"],
152
- "Bdyfc3e": "f1lqhc19",
153
- "Bpjys6e": ["fgp1lrp", "f14he6sl"],
154
- "pnx8oc": "f1c4qkgw",
155
- "Btzsvkb": ["f14he6sl", "fgp1lrp"],
156
- "d7kyl9": ["f1cj3r78", "f1xncuur"],
157
- "Bisz106": ["f1xncuur", "f1cj3r78"],
158
- "Bllnwrd": ["fi30ndc", "f19d7f88"],
159
- "B3dpmnz": ["f19d7f88", "fi30ndc"],
160
- "Fs9z49": "f56rwnc",
161
- "Baevmrh": "f1lqcl48",
162
- "ri70ih": "f1ego73q",
163
- "Br1f9q3": "f1ppf73u",
164
- "Bh9m8uq": "fkgvshs",
165
- "f79n2v": ["f9ce8dc", "f1m8imsn"],
166
- "zvkrb6": "fxkorn8",
167
- "y3supe": ["f1m8imsn", "f9ce8dc"],
168
- "Bcbdomo": "f1bb2bd5",
169
- "gg7wqr": ["fyhhhxy", "flt5dqy"],
170
- "Ixc8c": "fw019zk",
171
- "B1ltu2w": ["flt5dqy", "fyhhhxy"],
172
- "B2yjemk": ["f7c36j8", "f1tzhx6f"],
173
- "Bph9bk4": ["f1tzhx6f", "f7c36j8"],
174
- "utwc0c": ["f15ne2sm", "f18vik6r"],
175
- "B5rxhlh": ["f18vik6r", "f15ne2sm"],
176
- "Bseepjv": "f2sk4z1",
177
- "Iy3360": "frq4ova",
178
- "Dlf1w5": "f416fxa"
146
+ "az7l2e": "f1en1q2u",
147
+ "Ewkbr9": "f1k6j818",
148
+ "B82ziue": ["fuksyai", "ft3obag"],
149
+ "B5vr1qa": "f1pf7yz1",
150
+ "Bly3rvn": ["ft3obag", "fuksyai"],
151
+ "Bo3r8zu": "f1w2y1rc",
152
+ "Hpvxnh": ["f1gofhvl", "f18htlvq"],
153
+ "Bx11ytk": "fmj5o30",
154
+ "B1rg0w0": ["f18htlvq", "f1gofhvl"],
155
+ "Bv4n3vi": ["f10y1uxy", "f6aiuy0"],
156
+ "vqofr": ["f6aiuy0", "f10y1uxy"],
157
+ "B0uxbk8": ["f1kfpfnu", "f1dx5wco"],
158
+ "Bgqb9hq": ["f1dx5wco", "f1kfpfnu"],
159
+ "g0koyt": "flavhbd",
160
+ "amg5m6": "f1kmhr4c",
161
+ "zkfqfm": "fl1ydde",
162
+ "Bkydozb": "fgv4l33",
163
+ "Bve7jt4": "f1c6521h",
164
+ "Dnitkm": ["f1wuxlei", "f1sgdlzs"],
165
+ "Bf38x9m": "f2jhn7t",
166
+ "wguk8y": ["f1sgdlzs", "f1wuxlei"],
167
+ "vot02b": "f4qfhqc",
168
+ "Bk5rshv": ["f15hpu67", "f4z2jj6"],
169
+ "Bfh7x2i": "f1gpo00o",
170
+ "g1lt9r": ["f4z2jj6", "f15hpu67"],
171
+ "vzq8l0": ["f105swax", "fscdmel"],
172
+ "Bka2azo": ["fscdmel", "f105swax"],
173
+ "Br4ovkg": ["f1tkcw1w", "f1u11x8o"],
174
+ "csmgbd": ["f1u11x8o", "f1tkcw1w"],
175
+ "Bxvbc28": "f17b494j",
176
+ "y36c18": "f16cxu0",
177
+ "B1ctymy": "f1nwgacf"
179
178
  },
180
179
  "disabled": {
181
- "Bdyfc3e": "ft6wof",
182
- "Bpjys6e": ["f1ojwtdc", "fgjfpko"],
183
- "pnx8oc": "f5s0kyi",
184
- "Btzsvkb": ["fgjfpko", "f1ojwtdc"],
185
- "Bcbdomo": "f1dodv9r",
186
- "gg7wqr": ["f1shuycv", "f19t3g6y"],
187
- "Ixc8c": "f6psttw",
188
- "B1ltu2w": ["f19t3g6y", "f1shuycv"]
180
+ "Bo3r8zu": "fw4ani8",
181
+ "Hpvxnh": ["f16d985o", "f6tcbgz"],
182
+ "Bx11ytk": "f1b8a0pq",
183
+ "B1rg0w0": ["f6tcbgz", "f16d985o"],
184
+ "vot02b": "fjs3nuh",
185
+ "Bk5rshv": ["f1di1kpg", "furcot2"],
186
+ "Bfh7x2i": "f2pqeb2",
187
+ "g1lt9r": ["furcot2", "f1di1kpg"]
189
188
  },
190
189
  "mediumHorizontal": {
191
- "Bj2wrql": "flqennz",
192
- "dj0dih": "fyg4ez2",
193
- "D4ky5z": ["f1cquro8", "f1ro2kyx"],
194
- "k1i1uq": "ffvjagy",
195
- "Bcasopp": ["f1ro2kyx", "f1cquro8"],
196
- "Bbc2r3f": "fvqq5f6",
197
- "Byque4d": ["frssmbg", "fxzecjq"],
198
- "qd6xl9": ["fxzecjq", "frssmbg"]
190
+ "lawp4y": "fchca7p",
191
+ "B0qfbqy": "f1kvmim2",
192
+ "B4f6apu": ["f1m7sk04", "frl2ks5"],
193
+ "y0oebl": "f95p06y",
194
+ "uvfttm": ["frl2ks5", "f1m7sk04"],
195
+ "Baz25je": "f1kz84di",
196
+ "Fbdkly": ["f1o0nnkk", "fxb7rol"],
197
+ "mdwyqc": ["fxb7rol", "f1o0nnkk"]
199
198
  },
200
199
  "mediumVertical": {
201
- "Bj2wrql": "fa48u8l",
202
- "dj0dih": "fyg4ez2",
203
- "D4ky5z": ["f1cquro8", "f1ro2kyx"],
204
- "k1i1uq": "ffvjagy",
205
- "Bcasopp": ["f1ro2kyx", "f1cquro8"],
206
- "Byque4d": ["f1t0u0az", "fmlx6bj"],
207
- "Bf8kmfk": "f1itw4t3",
208
- "Bdn98qo": "f1382oex"
200
+ "lawp4y": "f17jracn",
201
+ "B0qfbqy": "f1kvmim2",
202
+ "B4f6apu": ["f1m7sk04", "frl2ks5"],
203
+ "y0oebl": "f95p06y",
204
+ "uvfttm": ["frl2ks5", "f1m7sk04"],
205
+ "Fbdkly": ["f1fzr1x6", "f1f351id"],
206
+ "Bciustq": "f117lcb2",
207
+ "Ccq8qp": "f13zdgtj"
209
208
  },
210
209
  "smallHorizontal": {
211
- "Bj2wrql": "flqennz",
212
- "dj0dih": "f1kkj9j",
213
- "D4ky5z": ["f14ip387", "f1uj4yfi"],
214
- "k1i1uq": "f7vsd80",
215
- "Bcasopp": ["f1uj4yfi", "f14ip387"],
216
- "Bbc2r3f": "f1y1nr8p",
217
- "Byque4d": ["f1i98inn", "fadekk3"],
218
- "qd6xl9": ["fadekk3", "f1i98inn"]
210
+ "lawp4y": "fchca7p",
211
+ "B0qfbqy": "f1yrrkkt",
212
+ "B4f6apu": ["f70k5xa", "fezrrg8"],
213
+ "y0oebl": "f1qe1oji",
214
+ "uvfttm": ["fezrrg8", "f70k5xa"],
215
+ "Baz25je": "f1kz84di",
216
+ "Fbdkly": ["f1s6rxz5", "fo35v8s"],
217
+ "mdwyqc": ["fo35v8s", "f1s6rxz5"]
219
218
  },
220
219
  "smallVertical": {
221
- "Bj2wrql": "f7efb1c",
222
- "dj0dih": "fyg4ez2",
223
- "D4ky5z": ["f1cquro8", "f1ro2kyx"],
224
- "k1i1uq": "ffvjagy",
225
- "Bcasopp": ["f1ro2kyx", "f1cquro8"],
226
- "Byque4d": ["f1t0u0az", "fmlx6bj"],
227
- "Bf8kmfk": "f1q0qvio",
228
- "Bdn98qo": "f1382oex"
220
+ "lawp4y": "fze4zud",
221
+ "B0qfbqy": "f1kvmim2",
222
+ "B4f6apu": ["f1m7sk04", "frl2ks5"],
223
+ "y0oebl": "f95p06y",
224
+ "uvfttm": ["frl2ks5", "f1m7sk04"],
225
+ "Fbdkly": ["f1fzr1x6", "f1f351id"],
226
+ "Bciustq": "fdp32p8",
227
+ "Ccq8qp": "f13zdgtj"
229
228
  }
230
229
  }, {
231
- "h": [".f19tg446:hover:before{background-color:none;}", ".f1mav41w:hover:before{border-top-style:solid;}", ".f1suiu43:hover:before{border-right-style:solid;}", ".f1kv3e19:hover:before{border-left-style:solid;}", ".f1hmukci:hover:before{border-bottom-style:solid;}", ".f1lqhc19:hover:before{border-top-color:var(--colorNeutralStroke1Hover);}", ".fgp1lrp:hover:before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f14he6sl:hover:before{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1c4qkgw:hover:before{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1cj3r78:hover:before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1xncuur:hover:before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fi30ndc:hover:before{border-top-right-radius:var(--borderRadiusCircular);}", ".f19d7f88:hover:before{border-top-left-radius:var(--borderRadiusCircular);}", ".f56rwnc:hover:before{box-sizing:border-box;}", ".f1lqcl48:hover:before{content:\"\";}", ".f1ego73q:hover:before{position:absolute;}", ".ft6wof:hover:before{border-top-color:var(--colorTransparentStroke);}", ".f1ojwtdc:hover:before{border-right-color:var(--colorTransparentStroke);}", ".fgjfpko:hover:before{border-left-color:var(--colorTransparentStroke);}", ".f5s0kyi:hover:before{border-bottom-color:var(--colorTransparentStroke);}"],
232
- "a": [".f1ppf73u:active:before{background-color:none;}", ".fkgvshs:active:before{border-top-style:solid;}", ".f9ce8dc:active:before{border-right-style:solid;}", ".f1m8imsn:active:before{border-left-style:solid;}", ".fxkorn8:active:before{border-bottom-style:solid;}", ".f1bb2bd5:active:before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fyhhhxy:active:before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".flt5dqy:active:before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fw019zk:active:before{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f7c36j8:active:before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1tzhx6f:active:before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f15ne2sm:active:before{border-top-right-radius:var(--borderRadiusCircular);}", ".f18vik6r:active:before{border-top-left-radius:var(--borderRadiusCircular);}", ".f2sk4z1:active:before{box-sizing:border-box;}", ".frq4ova:active:before{content:\"\";}", ".f416fxa:active:before{position:absolute;}", ".f1dodv9r:active:before{border-top-color:var(--colorTransparentStroke);}", ".f1shuycv:active:before{border-right-color:var(--colorTransparentStroke);}", ".f19t3g6y:active:before{border-left-color:var(--colorTransparentStroke);}", ".f6psttw:active:before{border-bottom-color:var(--colorTransparentStroke);}"],
233
- "d": [".flqennz:before{bottom:0;}", ".fyg4ez2:before{border-top-width:calc(var(--strokeWidthThicker) / 2.0);}", ".f1cquro8:before{border-right-width:calc(var(--strokeWidthThicker) / 2.0);}", ".f1ro2kyx:before{border-left-width:calc(var(--strokeWidthThicker) / 2.0);}", ".ffvjagy:before{border-bottom-width:calc(var(--strokeWidthThicker) / 2.0);}", ".fvqq5f6:before{height:var(--strokeWidthThicker);}", ".frssmbg:before{left:12px;}", ".fxzecjq:before{right:12px;}", ".fa48u8l:before{bottom:8px;}", ".f1t0u0az:before{left:0;}", ".fmlx6bj:before{right:0;}", ".f1itw4t3:before{top:8px;}", ".f1382oex:before{width:var(--strokeWidthThicker);}", ".f1kkj9j:before{border-top-width:calc(var(--strokeWidthThick) / 2.0);}", ".f14ip387:before{border-right-width:calc(var(--strokeWidthThick) / 2.0);}", ".f1uj4yfi:before{border-left-width:calc(var(--strokeWidthThick) / 2.0);}", ".f7vsd80:before{border-bottom-width:calc(var(--strokeWidthThick) / 2.0);}", ".f1y1nr8p:before{height:var(--strokeWidthThick);}", ".f1i98inn:before{left:6px;}", ".fadekk3:before{right:6px;}", ".f7efb1c:before{bottom:4px;}", ".f1q0qvio:before{top:4px;}"]
230
+ "h": [".f1en1q2u:hover::before{background-color:none;}", ".f1k6j818:hover::before{border-top-style:solid;}", ".fuksyai:hover::before{border-right-style:solid;}", ".ft3obag:hover::before{border-left-style:solid;}", ".f1pf7yz1:hover::before{border-bottom-style:solid;}", ".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".fmj5o30:hover::before{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f10y1uxy:hover::before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f6aiuy0:hover::before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1kfpfnu:hover::before{border-top-right-radius:var(--borderRadiusCircular);}", ".f1dx5wco:hover::before{border-top-left-radius:var(--borderRadiusCircular);}", ".flavhbd:hover::before{box-sizing:border-box;}", ".f1kmhr4c:hover::before{content:\"\";}", ".fl1ydde:hover::before{position:absolute;}", ".fw4ani8:hover::before{border-top-color:var(--colorTransparentStroke);}", ".f16d985o:hover::before{border-right-color:var(--colorTransparentStroke);}", ".f6tcbgz:hover::before{border-left-color:var(--colorTransparentStroke);}", ".f1b8a0pq:hover::before{border-bottom-color:var(--colorTransparentStroke);}"],
231
+ "a": [".fgv4l33:active::before{background-color:none;}", ".f1c6521h:active::before{border-top-style:solid;}", ".f1wuxlei:active::before{border-right-style:solid;}", ".f1sgdlzs:active::before{border-left-style:solid;}", ".f2jhn7t:active::before{border-bottom-style:solid;}", ".f4qfhqc:active::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f15hpu67:active::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4z2jj6:active::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1gpo00o:active::before{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f105swax:active::before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".fscdmel:active::before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1tkcw1w:active::before{border-top-right-radius:var(--borderRadiusCircular);}", ".f1u11x8o:active::before{border-top-left-radius:var(--borderRadiusCircular);}", ".f17b494j:active::before{box-sizing:border-box;}", ".f16cxu0:active::before{content:\"\";}", ".f1nwgacf:active::before{position:absolute;}", ".fjs3nuh:active::before{border-top-color:var(--colorTransparentStroke);}", ".f1di1kpg:active::before{border-right-color:var(--colorTransparentStroke);}", ".furcot2:active::before{border-left-color:var(--colorTransparentStroke);}", ".f2pqeb2:active::before{border-bottom-color:var(--colorTransparentStroke);}"],
232
+ "d": [".fchca7p::before{bottom:0;}", ".f1kvmim2::before{border-top-width:calc(var(--strokeWidthThicker) / 2.0);}", ".f1m7sk04::before{border-right-width:calc(var(--strokeWidthThicker) / 2.0);}", ".frl2ks5::before{border-left-width:calc(var(--strokeWidthThicker) / 2.0);}", ".f95p06y::before{border-bottom-width:calc(var(--strokeWidthThicker) / 2.0);}", ".f1kz84di::before{height:0;}", ".f1o0nnkk::before{left:var(--spacingHorizontalM);}", ".fxb7rol::before{right:var(--spacingHorizontalM);}", ".f17jracn::before{bottom:var(--spacingVerticalS);}", ".f1fzr1x6::before{left:0;}", ".f1f351id::before{right:0;}", ".f117lcb2::before{top:var(--spacingVerticalS);}", ".f13zdgtj::before{width:0;}", ".f1yrrkkt::before{border-top-width:calc(var(--strokeWidthThick) / 2.0);}", ".f70k5xa::before{border-right-width:calc(var(--strokeWidthThick) / 2.0);}", ".fezrrg8::before{border-left-width:calc(var(--strokeWidthThick) / 2.0);}", ".f1qe1oji::before{border-bottom-width:calc(var(--strokeWidthThick) / 2.0);}", ".f1s6rxz5::before{left:var(--spacingHorizontalSNudge);}", ".fo35v8s::before{right:var(--spacingHorizontalSNudge);}", ".fze4zud::before{bottom:var(--spacingVerticalXS);}", ".fdp32p8::before{top:var(--spacingVerticalXS);}"]
234
233
  });
235
234
 
236
235
  const useActiveIndicatorStyles = /*#__PURE__*/__styles({
237
236
  "base": {
238
- "F7kzw7": "f1vw7pcs",
239
- "B13j16c": ["fi41b8y", "f1jbgs3z"],
240
- "Bk8j60v": "f1p43pof",
241
- "Bpbi4o9": ["f1jbgs3z", "fi41b8y"],
242
- "rskduk": "f1iq3fds",
243
- "Dctjco": ["f1r2jemi", "f11olovk"],
244
- "J4s2b0": "fd0py6g",
245
- "svcy3r": ["f11olovk", "f1r2jemi"],
246
- "frdscb": ["fc4gh2t", "flndy84"],
247
- "B9nohqn": ["flndy84", "fc4gh2t"],
248
- "B1dhsta": ["fxgx2h0", "fh20ihy"],
249
- "Bjdmjzx": ["fh20ihy", "fxgx2h0"],
250
- "oqd9ik": "ffdc0f3",
251
- "Bs6t6z0": "fqc6z8f",
252
- "Hdbjpj": "f11ef69",
253
- "Bunff0j": "fs357bs"
237
+ "B0n5ga8": "f16gxe2i",
238
+ "s924m2": ["fpgykix", "fzybk4o"],
239
+ "B1q35kw": "f1osi826",
240
+ "Gp14am": ["fzybk4o", "fpgykix"],
241
+ "Bm2nyyq": "f8rth92",
242
+ "Barhvk9": ["flthirb", "ftkbnf5"],
243
+ "Bw17bha": "f1lh990p",
244
+ "vfts7": ["ftkbnf5", "flthirb"],
245
+ "B3778ie": ["fprarqb", "f14vs0nd"],
246
+ "d9w3h3": ["f14vs0nd", "fprarqb"],
247
+ "Bl18szs": ["f1gtfqs9", "f18zvfd9"],
248
+ "B4j8arr": ["f18zvfd9", "f1gtfqs9"],
249
+ "li1rpt": "f1gw3sf2",
250
+ "Bsft5z2": "f13zj6fq",
251
+ "E3zdtr": "f1mdlcz9",
252
+ "t2ki1e": "ffmd2fr"
254
253
  },
255
254
  "selected": {
256
- "F7kzw7": "f27ds8h",
257
- "B13j16c": ["f2f2y1h", "fvkrelc"],
258
- "Bk8j60v": "f1ta67ae",
259
- "Bpbi4o9": ["fvkrelc", "f2f2y1h"],
260
- "xay6vd": "f155wmea",
261
- "F7whla": ["fz4itc5", "f10rdlzq"],
262
- "Bkmnrzr": "f16a8na0",
263
- "jjqiyg": ["f10rdlzq", "fz4itc5"],
264
- "wo4o56": "fn9ghnu",
265
- "Bm7x6ru": ["faeqx0n", "fyxlcfc"],
266
- "id6p2d": "f1i10yqr",
267
- "obzwb3": ["fyxlcfc", "faeqx0n"]
255
+ "B0n5ga8": "ff21voz",
256
+ "s924m2": ["f13e2re1", "fr799w5"],
257
+ "B1q35kw": "f1jc6hxc",
258
+ "Gp14am": ["fr799w5", "f13e2re1"],
259
+ "Be0v6ae": "f183gc6g",
260
+ "B5kxglz": ["f9bu0jf", "f1gl5qk4"],
261
+ "B3pwyw6": "f1bsp7n4",
262
+ "Bymgtzf": ["f1gl5qk4", "f9bu0jf"],
263
+ "dmfk": "f9opluq",
264
+ "B4ofi8": ["f1efh3oj", "f14e19o9"],
265
+ "jgq6uv": "f73i0vf",
266
+ "Baxewws": ["f14e19o9", "f1efh3oj"]
268
267
  },
269
268
  "disabled": {
270
- "F7kzw7": "f8fvnjs",
271
- "B13j16c": ["f1sie595", "f68ecio"],
272
- "Bk8j60v": "f17l895u",
273
- "Bpbi4o9": ["f68ecio", "f1sie595"]
269
+ "B0n5ga8": "f1meqbmf",
270
+ "s924m2": ["f1uv8s8a", "fl4jjo8"],
271
+ "B1q35kw": "f1jzbv2r",
272
+ "Gp14am": ["fl4jjo8", "f1uv8s8a"]
274
273
  },
275
274
  "mediumHorizontal": {
276
- "Bj55yzk": "fw2wsqs",
277
- "Bouo9z4": "f1dqk8ca",
278
- "Bjz4wo8": ["f6x7jdz", "f18ezp6p"],
279
- "B3zxwmv": "fvhr22v",
280
- "exdlgl": ["f18ezp6p", "f6x7jdz"],
281
- "mpb1vu": "f11eg72r",
282
- "jc51t6": ["fohqjvh", "f3if56i"],
283
- "cnmfks": ["f3if56i", "fohqjvh"]
275
+ "By385i5": "fo72kxq",
276
+ "xrcqlc": "f1o9a6jw",
277
+ "Ihftqj": ["fo3g43a", "fx9b69t"],
278
+ "Bcgy8vk": "fe59e93",
279
+ "Bhxzhr1": ["fx9b69t", "fo3g43a"],
280
+ "Dlnsje": "f1aztngc",
281
+ "Eqx8gd": ["fna7m5n", "f1oxpfwv"],
282
+ "B1piin3": ["f1oxpfwv", "fna7m5n"]
284
283
  },
285
284
  "mediumVertical": {
286
- "Bj55yzk": "f1wxxv1q",
287
- "Bouo9z4": "f1dqk8ca",
288
- "Bjz4wo8": ["f6x7jdz", "f18ezp6p"],
289
- "B3zxwmv": "fvhr22v",
290
- "exdlgl": ["f18ezp6p", "f6x7jdz"],
291
- "jc51t6": ["f1cvlmu2", "f15lyva8"],
292
- "u6d25": "f1lbpgiz",
293
- "Biobvvw": "fqauqbq"
285
+ "By385i5": "fipylg0",
286
+ "xrcqlc": "f1o9a6jw",
287
+ "Ihftqj": ["fo3g43a", "fx9b69t"],
288
+ "Bcgy8vk": "fe59e93",
289
+ "Bhxzhr1": ["fx9b69t", "fo3g43a"],
290
+ "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
291
+ "bn5sak": "fqchiol",
292
+ "a2br6o": "f1x60ewe"
294
293
  },
295
294
  "smallHorizontal": {
296
- "Bj55yzk": "fw2wsqs",
297
- "Bouo9z4": "fz0tshs",
298
- "Bjz4wo8": ["fyhqs13", "f11og0us"],
299
- "B3zxwmv": "f1qq4lft",
300
- "exdlgl": ["f11og0us", "fyhqs13"],
301
- "mpb1vu": "f4hj4m7",
302
- "jc51t6": ["f1i8k3s6", "fy447wy"],
303
- "cnmfks": ["fy447wy", "f1i8k3s6"]
295
+ "By385i5": "fo72kxq",
296
+ "xrcqlc": "fchc3a4",
297
+ "Ihftqj": ["f1g9ny6e", "f1faeqkd"],
298
+ "Bcgy8vk": "f2swisw",
299
+ "Bhxzhr1": ["f1faeqkd", "f1g9ny6e"],
300
+ "Dlnsje": "f1aztngc",
301
+ "Eqx8gd": ["f1q70ajw", "f18rbzdx"],
302
+ "B1piin3": ["f18rbzdx", "f1q70ajw"]
304
303
  },
305
304
  "smallVertical": {
306
- "Bj55yzk": "fu7gapb",
307
- "Bouo9z4": "f1dqk8ca",
308
- "Bjz4wo8": ["f6x7jdz", "f18ezp6p"],
309
- "B3zxwmv": "fvhr22v",
310
- "exdlgl": ["f18ezp6p", "f6x7jdz"],
311
- "jc51t6": ["f1cvlmu2", "f15lyva8"],
312
- "u6d25": "f1vmyuyf",
313
- "Biobvvw": "fqauqbq"
305
+ "By385i5": "fqbue9b",
306
+ "xrcqlc": "f1o9a6jw",
307
+ "Ihftqj": ["fo3g43a", "fx9b69t"],
308
+ "Bcgy8vk": "fe59e93",
309
+ "Bhxzhr1": ["fx9b69t", "fo3g43a"],
310
+ "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
311
+ "bn5sak": "fk1klkt",
312
+ "a2br6o": "f1x60ewe"
314
313
  }
315
314
  }, {
316
- "d": [".f1vw7pcs:after{border-top-color:var(--colorTransparentStroke);}", ".fi41b8y:after{border-right-color:var(--colorTransparentStroke);}", ".f1jbgs3z:after{border-left-color:var(--colorTransparentStroke);}", ".f1p43pof:after{border-bottom-color:var(--colorTransparentStroke);}", ".f1iq3fds:after{border-top-style:solid;}", ".f1r2jemi:after{border-right-style:solid;}", ".f11olovk:after{border-left-style:solid;}", ".fd0py6g:after{border-bottom-style:solid;}", ".fc4gh2t:after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".flndy84:after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fxgx2h0:after{border-top-right-radius:var(--borderRadiusCircular);}", ".fh20ihy:after{border-top-left-radius:var(--borderRadiusCircular);}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".fs357bs:after{z-index:1;}", ".f27ds8h:after{border-top-color:var(--colorCompoundBrandStroke);}", ".f2f2y1h:after{border-right-color:var(--colorCompoundBrandStroke);}", ".fvkrelc:after{border-left-color:var(--colorCompoundBrandStroke);}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f8fvnjs:after{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1sie595:after{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f68ecio:after{border-left-color:var(--colorNeutralForegroundDisabled);}", ".f17l895u:after{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".fw2wsqs:after{bottom:0;}", ".f1dqk8ca:after{border-top-width:calc(var(--strokeWidthThicker) / 2.0);}", ".f6x7jdz:after{border-right-width:calc(var(--strokeWidthThicker) / 2.0);}", ".f18ezp6p:after{border-left-width:calc(var(--strokeWidthThicker) / 2.0);}", ".fvhr22v:after{border-bottom-width:calc(var(--strokeWidthThicker) / 2.0);}", ".f11eg72r:after{height:var(--strokeWidthThicker);}", ".fohqjvh:after{left:12px;}", ".f3if56i:after{right:12px;}", ".f1wxxv1q:after{bottom:8px;}", ".f1cvlmu2:after{left:0;}", ".f15lyva8:after{right:0;}", ".f1lbpgiz:after{top:8px;}", ".fqauqbq:after{width:var(--strokeWidthThicker);}", ".fz0tshs:after{border-top-width:calc(var(--strokeWidthThick) / 2.0);}", ".fyhqs13:after{border-right-width:calc(var(--strokeWidthThick) / 2.0);}", ".f11og0us:after{border-left-width:calc(var(--strokeWidthThick) / 2.0);}", ".f1qq4lft:after{border-bottom-width:calc(var(--strokeWidthThick) / 2.0);}", ".f4hj4m7:after{height:var(--strokeWidthThick);}", ".f1i8k3s6:after{left:6px;}", ".fy447wy:after{right:6px;}", ".fu7gapb:after{bottom:4px;}", ".f1vmyuyf:after{top:4px;}"],
317
- "h": [".f155wmea:hover:after{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".fz4itc5:hover:after{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f10rdlzq:hover:after{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f16a8na0:hover:after{border-bottom-color:var(--colorCompoundBrandStrokeHover);}"],
318
- "a": [".fn9ghnu:active:after{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".faeqx0n:active:after{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fyxlcfc:active:after{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f1i10yqr:active:after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"]
315
+ "d": [".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}", ".fpgykix::after{border-right-color:var(--colorTransparentStroke);}", ".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}", ".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}", ".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".ffmd2fr::after{z-index:1;}", ".ff21voz::after{border-top-color:var(--colorCompoundBrandStroke);}", ".f13e2re1::after{border-right-color:var(--colorCompoundBrandStroke);}", ".fr799w5::after{border-left-color:var(--colorCompoundBrandStroke);}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f1meqbmf::after{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1uv8s8a::after{border-right-color:var(--colorNeutralForegroundDisabled);}", ".fl4jjo8::after{border-left-color:var(--colorNeutralForegroundDisabled);}", ".f1jzbv2r::after{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".fo72kxq::after{bottom:0;}", ".f1o9a6jw::after{border-top-width:calc(var(--strokeWidthThicker) / 2.0);}", ".fo3g43a::after{border-right-width:calc(var(--strokeWidthThicker) / 2.0);}", ".fx9b69t::after{border-left-width:calc(var(--strokeWidthThicker) / 2.0);}", ".fe59e93::after{border-bottom-width:calc(var(--strokeWidthThicker) / 2.0);}", ".f1aztngc::after{height:0;}", ".fna7m5n::after{left:var(--spacingHorizontalM);}", ".f1oxpfwv::after{right:var(--spacingHorizontalM);}", ".fipylg0::after{bottom:var(--spacingVerticalS);}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fqchiol::after{top:var(--spacingVerticalS);}", ".f1x60ewe::after{width:0;}", ".fchc3a4::after{border-top-width:calc(var(--strokeWidthThick) / 2.0);}", ".f1g9ny6e::after{border-right-width:calc(var(--strokeWidthThick) / 2.0);}", ".f1faeqkd::after{border-left-width:calc(var(--strokeWidthThick) / 2.0);}", ".f2swisw::after{border-bottom-width:calc(var(--strokeWidthThick) / 2.0);}", ".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}", ".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}", ".fqbue9b::after{bottom:var(--spacingVerticalXS);}", ".fk1klkt::after{top:var(--spacingVerticalXS);}"],
316
+ "h": [".f183gc6g:hover::after{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".f9bu0jf:hover::after{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f1gl5qk4:hover::after{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1bsp7n4:hover::after{border-bottom-color:var(--colorCompoundBrandStrokeHover);}"],
317
+ "a": [".f9opluq:active::after{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f1efh3oj:active::after{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".f14e19o9:active::after{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f73i0vf:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"]
319
318
  });
320
319
  /**
321
320
  * Styles for the icon slot.
@@ -350,23 +349,25 @@ const useIconStyles = /*#__PURE__*/__styles({
350
349
 
351
350
  const useContentStyles = /*#__PURE__*/__styles({
352
351
  "base": {
352
+ "Bahqtrf": "fk6fouc",
353
353
  "Be2twd7": "fkhj508",
354
354
  "Bhrd7zp": "figsok6",
355
355
  "Bg96gwp": "f1i3iumi",
356
356
  "B68tc82": "f1p9o1ba",
357
357
  "Bmxbyg5": "f1sil6mw",
358
- "z8tnut": "f1g0x7ka",
359
- "z189sj": ["f12huiiw", "f161knb0"],
360
- "Byoj8tv": "f1qch9an",
361
- "uwmqm3": ["f161knb0", "f12huiiw"]
358
+ "z8tnut": "fztplxc",
359
+ "z189sj": ["ffczdla", "fgiv446"],
360
+ "Byoj8tv": "f9g1xly",
361
+ "uwmqm3": ["fgiv446", "ffczdla"]
362
362
  },
363
363
  "selected": {
364
+ "Bahqtrf": "fk6fouc",
364
365
  "Be2twd7": "fkhj508",
365
366
  "Bhrd7zp": "fl43uef",
366
367
  "Bg96gwp": "f1i3iumi"
367
368
  }
368
369
  }, {
369
- "d": [".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1g0x7ka{padding-top:0;}", ".f12huiiw{padding-right:2px;}", ".f161knb0{padding-left:2px;}", ".f1qch9an{padding-bottom:0;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
370
+ "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fztplxc{padding-top:var(--spacingVerticalNone);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".f9g1xly{padding-bottom:var(--spacingVerticalNone);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
370
371
  });
371
372
  /**
372
373
  * Apply styling to the Tab slots based on the state
package/lib/components/Tab/useTabStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SACE,wBADF,EAEE,oBAFF,EAGE,mBAHF,EAIE,wBAJF,QAKO,qBALP;AAOA,SAAS,sCAAT,QAAuD,2BAAvD;AAEA,OAAO,MAAM,aAAa,GAA6B;AACrD,EAAA,IAAI,EAAE,SAD+C;AAErD,EAAA,IAAI,EAAE,eAF+C;AAGrD,EAAA,OAAO,EAAE;AAH4C,CAAhD,C,CAMP;;AACA,OAAO,MAAM,YAAY,GAAG,aAAa,CAAC,IAAnC;AAEP;;AAEG;;AACH;;AACA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;AA0HA;;AAEA;;AAEG;;;AACH,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;AAiBA;;;AACA,MAAM,yBAAyB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlC;;AAmEA,MAAM,wBAAwB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAjC;AAkEA;;AAEG;;;AACH,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;AAqBA;;AAEG;;;AACH,MAAM,gBAAgB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAzB;AAYA;;AAEG;;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAA8B;AACjE,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AACA,QAAM,sBAAsB,GAAG,yBAAyB,EAAxD;AACA,QAAM,qBAAqB,GAAG,wBAAwB,EAAtD;AACA,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,aAAa,GAAG,gBAAgB,EAAtC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,QAAd;AAAwB,IAAA,QAAxB;AAAkC,IAAA,IAAlC;AAAwC,IAAA;AAAxC,MAAqD,KAA3D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,aAAa,CAAC,IADmB,EAEjC,UAAU,CAAC,IAFsB,EAGjC,IAAI,KAAK,OAAT,KAAqB,QAAQ,GAAG,UAAU,CAAC,cAAd,GAA+B,UAAU,CAAC,gBAAvE,CAHiC,EAIjC,IAAI,KAAK,OAAT,KAAqB,QAAQ,GAAG,UAAU,CAAC,aAAd,GAA8B,UAAU,CAAC,eAAtE,CAJiC,EAKjC,WAAW,CAAC,IALqB,EAMjC,CAAC,QAAD,IAAa,UAAU,KAAK,QAA5B,IAAwC,UAAU,CAAC,MANlB,EAOjC,CAAC,QAAD,IAAa,UAAU,KAAK,aAA5B,IAA6C,UAAU,CAAC,WAPvB,EAQjC,CAAC,QAAD,IAAa,QAAb,IAAyB,UAAU,CAAC,QARH,EASjC,QAAQ,IAAI,UAAU,CAAC,QATU,EAWjC;AACA,EAAA,sBAAsB,CAAC,IAZU,EAajC,IAAI,KAAK,OAAT,KAAqB,QAAQ,GAAG,sBAAsB,CAAC,cAA1B,GAA2C,sBAAsB,CAAC,gBAA/F,CAbiC,EAcjC,IAAI,KAAK,OAAT,KAAqB,QAAQ,GAAG,sBAAsB,CAAC,aAA1B,GAA0C,sBAAsB,CAAC,eAA9F,CAdiC,EAejC,QAAQ,IAAI,sBAAsB,CAAC,QAfF,EAiBjC;AACA,EAAA,QAAQ,IAAI,qBAAqB,CAAC,IAlBD,EAmBjC,QAAQ,IAAI,CAAC,QAAb,IAAyB,qBAAqB,CAAC,QAnBd,EAoBjC,QAAQ,IACN,IAAI,KAAK,OADX,KAEG,QAAQ,GAAG,qBAAqB,CAAC,cAAzB,GAA0C,qBAAqB,CAAC,gBAF3E,CApBiC,EAuBjC,QAAQ,IACN,IAAI,KAAK,OADX,KAEG,QAAQ,GAAG,qBAAqB,CAAC,aAAzB,GAAyC,qBAAqB,CAAC,eAF1E,CAvBiC,EA0BjC,QAAQ,IAAI,QAAZ,IAAwB,qBAAqB,CAAC,QA1Bb,EA2BjC,KAAK,CAAC,IAAN,CAAW,SA3BsB,CAAnC;;AA8BA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,aAAa,CAAC,IAAf,EAAqB,UAAU,CAAC,IAAhC,EAAsC,UAAU,CAAC,IAAD,CAAhD,EAAwD,KAAK,CAAC,IAAN,CAAW,SAAnE,CAAnC;AACD;;AAED,EAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CACpC,aAAa,CAAC,OADsB,EAEpC,aAAa,CAAC,IAFsB,EAGpC,QAAQ,IAAI,aAAa,CAAC,QAHU,EAIpC,KAAK,CAAC,OAAN,CAAc,SAJsB,CAAtC;AAOA,EAAA,sCAAsC,CAAC,KAAD,CAAtC;AAEA,SAAO,KAAP;AACD,CAtDM","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport {\n pendingContentSizeTokens,\n pendingSpacingTokens,\n tabIndicatorPadding,\n tabIndicatorStrokeWidths,\n} from '../../tab.constants';\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\n// TODO temporary export to pass conformance test.\nexport const tabClassName = tabClassNames.root;\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: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n mediumHorizontal: {\n columnGap: pendingSpacingTokens.sNudge,\n justifyContent: 'center',\n ...shorthands.padding(pendingSpacingTokens.m, pendingSpacingTokens.mNudge),\n },\n mediumVertical: {\n columnGap: pendingSpacingTokens.sNudge,\n justifyContent: 'flex-start',\n minWidth: '120px',\n ...shorthands.padding(pendingSpacingTokens.sNudge, pendingSpacingTokens.mNudge),\n },\n smallHorizontal: {\n columnGap: pendingSpacingTokens.xxs,\n ...shorthands.padding(pendingSpacingTokens.sNudge, pendingSpacingTokens.sNudge),\n },\n smallVertical: {\n columnGap: pendingSpacingTokens.xxs,\n ...shorthands.padding(pendingSpacingTokens.xxs, pendingSpacingTokens.sNudge),\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: 'none',\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n },\n ':active:before': {\n backgroundColor: 'none',\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n },\n },\n disabled: {\n ':hover:before': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n ':active:before': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n mediumHorizontal: {\n ':before': {\n bottom: 0,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.mediumHorizontal} / 2.0)`),\n height: tabIndicatorStrokeWidths.mediumHorizontal,\n left: tabIndicatorPadding.mediumHorizontal,\n right: tabIndicatorPadding.mediumHorizontal,\n },\n },\n mediumVertical: {\n ':before': {\n bottom: tabIndicatorPadding.mediumVertical,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.mediumVertical} / 2.0)`),\n left: 0,\n top: tabIndicatorPadding.mediumVertical,\n width: tabIndicatorStrokeWidths.mediumVertical,\n },\n },\n smallHorizontal: {\n ':before': {\n bottom: 0,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.smallHorizontal} / 2.0)`),\n height: tabIndicatorStrokeWidths.smallHorizontal,\n left: tabIndicatorPadding.smallHorizontal,\n right: tabIndicatorPadding.smallHorizontal,\n },\n },\n smallVertical: {\n ':before': {\n bottom: tabIndicatorPadding.smallVertical,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.smallVertical} / 2.0)`),\n left: 0,\n top: tabIndicatorPadding.smallVertical,\n width: tabIndicatorStrokeWidths.smallVertical,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n ':after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n ':after': {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n },\n ':hover:after': {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n },\n ':active:after': {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n },\n },\n disabled: {\n ':after': {\n ...shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n },\n },\n mediumHorizontal: {\n ':after': {\n bottom: '0',\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.mediumHorizontal} / 2.0)`),\n height: tabIndicatorStrokeWidths.mediumHorizontal,\n left: tabIndicatorPadding.mediumHorizontal,\n right: tabIndicatorPadding.mediumHorizontal,\n },\n },\n mediumVertical: {\n ':after': {\n bottom: tabIndicatorPadding.mediumVertical,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.mediumVertical} / 2.0)`),\n left: 0,\n top: tabIndicatorPadding.mediumVertical,\n width: tabIndicatorStrokeWidths.mediumVertical,\n },\n },\n smallHorizontal: {\n ':after': {\n bottom: 0,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.smallHorizontal} / 2.0)`),\n height: tabIndicatorStrokeWidths.smallHorizontal,\n left: tabIndicatorPadding.smallHorizontal,\n right: tabIndicatorPadding.smallHorizontal,\n },\n },\n smallVertical: {\n ':after': {\n bottom: tabIndicatorPadding.smallVertical,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.smallVertical} / 2.0)`),\n left: '0',\n top: tabIndicatorPadding.smallVertical,\n width: tabIndicatorStrokeWidths.smallVertical,\n },\n },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\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});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...pendingContentSizeTokens.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(0, pendingSpacingTokens.xxs),\n },\n selected: {\n ...pendingContentSizeTokens.body1Strong,\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 size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\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.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\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.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["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\n// TODO temporary export to pass conformance test.\nexport const tabClassName = tabClassNames.root;\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: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n justifyContent: 'center',\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 justifyContent: 'flex-start',\n minWidth: '120px',\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\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 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: 'none',\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: 'none',\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n },\n },\n disabled: {\n ':hover::before': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n ':active::before': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n mediumHorizontal: {\n '::before': {\n bottom: 0,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThicker} / 2.0)`),\n height: 0,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::before': {\n bottom: tokens.spacingVerticalS,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThicker} / 2.0)`),\n left: 0,\n top: tokens.spacingVerticalS,\n width: 0,\n },\n },\n smallHorizontal: {\n '::before': {\n bottom: 0,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThick} / 2.0)`),\n height: 0,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::before': {\n bottom: tokens.spacingVerticalXS,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThicker} / 2.0)`),\n left: 0,\n top: tokens.spacingVerticalXS,\n width: 0,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n },\n ':hover::after': {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n },\n ':active::after': {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n },\n },\n disabled: {\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n },\n },\n mediumHorizontal: {\n '::after': {\n bottom: '0',\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThicker} / 2.0)`),\n height: 0,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::after': {\n bottom: tokens.spacingVerticalS,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThicker} / 2.0)`),\n left: 0,\n top: tokens.spacingVerticalS,\n width: 0,\n },\n },\n smallHorizontal: {\n '::after': {\n bottom: 0,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThick} / 2.0)`),\n height: 0,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::after': {\n bottom: tokens.spacingVerticalXS,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThicker} / 2.0)`),\n left: '0',\n top: tokens.spacingVerticalXS,\n width: 0,\n },\n },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\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});\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});\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 size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\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.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\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.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Tab/useTab.js CHANGED
@@ -71,6 +71,9 @@ const useTab_unstable = (props, ref) => {
71
71
  root: react_utilities_1.getNativeElementProps('button', {
72
72
  ref: react_utilities_1.useMergedRefs(ref, innerRef),
73
73
  role: 'tab',
74
+ // aria-selected undefined indicates it is not selectable
75
+ // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
76
+ 'aria-selected': disabled ? undefined : `${selected}`,
74
77
  ...props,
75
78
  disabled,
76
79
  onClick