@fluentui/react-tabs 1.0.0-beta.98 → 9.0.0-beta.11

package/lib/components/Tab/useTabStyles.js

@@ -0,0 +1,403 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';
+export const tabClassNames = {
+  root: 'fui-Tab',
+  icon: 'fui-Tab__icon',
+  content: 'fui-Tab__content'
+}; // TODO temporary export to pass conformance test.
+
+export const tabClassName = tabClassNames.root;
+/**
+ * Styles for the root slot
+ */
+
+/* eslint-disable @typescript-eslint/naming-convention */
+
+const useRootStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Bt984gj": "f122n59",
+    "g2u3we": "fwhevhj",
+    "h3c5rm": ["f61n433", "f1q8l70w"],
+    "B9xav0g": "fv1dfc8",
+    "zhjwy3": ["f1q8l70w", "f61n433"],
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
+    "B4j52fo": "fre7gi1",
+    "Bekrc4i": ["f1358rze", "f1rvrf73"],
+    "Bn0qgzm": "fqdk4by",
+    "ibv6hh": ["f1rvrf73", "f1358rze"],
+    "Bceei9c": "f1k6fduh",
+    "mc9l5x": "f22iagw",
+    "Beiy3e4": "f1063pyq",
+    "Bnnss6s": "fi64zpg",
+    "Bahqtrf": "fk6fouc",
+    "Bg96gwp": "f1i3iumi",
+    "oeaueh": "f1s6fcnf",
+    "qhf8xq": "f10pi13n",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw",
+    "B9bfxx9": "f1cxpek8"
+  },
+  "mediumHorizontal": {
+    "i8kkvl": "f1rjii52",
+    "Brf1p80": "f4d9j23",
+    "z8tnut": "f5yzyt",
+    "z189sj": ["f11gcy0p", "f1ng84yb"],
+    "Byoj8tv": "fx3omr",
+    "uwmqm3": ["f1ng84yb", "f11gcy0p"]
+  },
+  "mediumVertical": {
+    "i8kkvl": "f1rjii52",
+    "Brf1p80": "fbhxue7",
+    "Bf4jedk": "fyvtabn",
+    "z8tnut": "fp2oml8",
+    "z189sj": ["f11gcy0p", "f1ng84yb"],
+    "Byoj8tv": "f1tdddsa",
+    "uwmqm3": ["f1ng84yb", "f11gcy0p"]
+  },
+  "smallHorizontal": {
+    "i8kkvl": "f14mj54c",
+    "z8tnut": "fp2oml8",
+    "z189sj": ["fdw0yi8", "fk8j09s"],
+    "Byoj8tv": "f1tdddsa",
+    "uwmqm3": ["fk8j09s", "fdw0yi8"]
+  },
+  "smallVertical": {
+    "i8kkvl": "f14mj54c",
+    "z8tnut": "fclwglc",
+    "z189sj": ["fdw0yi8", "fk8j09s"],
+    "Byoj8tv": "fywfov9",
+    "uwmqm3": ["fk8j09s", "fdw0yi8"]
+  },
+  "transparent": {
+    "De3pzq": "f1c21dwh",
+    "Jwef8y": "fjxutwb",
+    "ecr2s2": "fophhak",
+    "Bptxc3x": "fmmjozx",
+    "B076xvk": "f1mfqf41",
+    "q9r9w5": "f10aiid4",
+    "cl4aha": "fpkze5g",
+    "Bk452zc": "f149wc3x",
+    "a4hkcw": "fjioou7"
+  },
+  "subtle": {
+    "De3pzq": "fhovq9v",
+    "Jwef8y": "f1t94bn6",
+    "ecr2s2": "f1wfn5kd",
+    "Bptxc3x": "fmmjozx",
+    "B076xvk": "f1mfqf41",
+    "q9r9w5": "f10aiid4",
+    "cl4aha": "fpkze5g",
+    "Bk452zc": "f149wc3x",
+    "a4hkcw": "fjioou7"
+  },
+  "disabled": {
+    "De3pzq": "f1c21dwh",
+    "Bptxc3x": "fato7r6",
+    "cl4aha": "fao1bnu",
+    "Bceei9c": "fdrzuqr"
+  },
+  "selected": {
+    "Bptxc3x": "f1cadz5z",
+    "B076xvk": "f1ck17l",
+    "q9r9w5": "f42ak0g",
+    "cl4aha": "ffplhdr",
+    "Bk452zc": "ffth601",
+    "a4hkcw": "fhklyu5"
+  }
+}, {
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fwhevhj{border-top-color:none;}", ".f61n433{border-right-color:none;}", ".f1q8l70w{border-left-color:none;}", ".fv1dfc8{border-bottom-color:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1k6fduh{cursor:pointer;}", ".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);}"],
+  "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);}"]
+});
+/* eslint-enable @typescript-eslint/naming-convention */
+
+/**
+ * Focus styles for the root slot
+ */
+
+
+const useFocusStyles = /*#__PURE__*/__styles({
+  "base": {
+    "B486eqv": "f2hkw1w",
+    "Bnmjwt4": "flfsvnh",
+    "Jopkrh": ["f1781m5e", "flvaaa9"],
+    "hhrs2v": "f50u1b5",
+    "B7jbng7": ["flvaaa9", "f1781m5e"],
+    "B32s92o": "fgeg2qa",
+    "Bh48x57": "f19j8a82",
+    "B5hngm5": "fhcq1yo",
+    "D4py6b": "f1gkya50",
+    "Bgwpjed": "fpt6wn7"
+  }
+}, {
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gkya50:focus{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}"]
+});
+/** Indicator styles for when pending selection */
+
+
+const usePendingIndicatorStyles = /*#__PURE__*/__styles({
+  "base": {
+    "az7l2e": "f1en1q2u",
+    "Ewkbr9": "f1k6j818",
+    "B82ziue": ["fuksyai", "ft3obag"],
+    "B5vr1qa": "f1pf7yz1",
+    "Bly3rvn": ["ft3obag", "fuksyai"],
+    "Bo3r8zu": "f1w2y1rc",
+    "Hpvxnh": ["f1gofhvl", "f18htlvq"],
+    "Bx11ytk": "fmj5o30",
+    "B1rg0w0": ["f18htlvq", "f1gofhvl"],
+    "Bv4n3vi": ["f10y1uxy", "f6aiuy0"],
+    "vqofr": ["f6aiuy0", "f10y1uxy"],
+    "B0uxbk8": ["f1kfpfnu", "f1dx5wco"],
+    "Bgqb9hq": ["f1dx5wco", "f1kfpfnu"],
+    "g0koyt": "flavhbd",
+    "amg5m6": "f1kmhr4c",
+    "zkfqfm": "fl1ydde",
+    "Bkydozb": "fgv4l33",
+    "Bve7jt4": "f1c6521h",
+    "Dnitkm": ["f1wuxlei", "f1sgdlzs"],
+    "Bf38x9m": "f2jhn7t",
+    "wguk8y": ["f1sgdlzs", "f1wuxlei"],
+    "vot02b": "f4qfhqc",
+    "Bk5rshv": ["f15hpu67", "f4z2jj6"],
+    "Bfh7x2i": "f1gpo00o",
+    "g1lt9r": ["f4z2jj6", "f15hpu67"],
+    "vzq8l0": ["f105swax", "fscdmel"],
+    "Bka2azo": ["fscdmel", "f105swax"],
+    "Br4ovkg": ["f1tkcw1w", "f1u11x8o"],
+    "csmgbd": ["f1u11x8o", "f1tkcw1w"],
+    "Bxvbc28": "f17b494j",
+    "y36c18": "f16cxu0",
+    "B1ctymy": "f1nwgacf"
+  },
+  "disabled": {
+    "Bo3r8zu": "fw4ani8",
+    "Hpvxnh": ["f16d985o", "f6tcbgz"],
+    "Bx11ytk": "f1b8a0pq",
+    "B1rg0w0": ["f6tcbgz", "f16d985o"],
+    "vot02b": "fjs3nuh",
+    "Bk5rshv": ["f1di1kpg", "furcot2"],
+    "Bfh7x2i": "f2pqeb2",
+    "g1lt9r": ["furcot2", "f1di1kpg"]
+  },
+  "mediumHorizontal": {
+    "lawp4y": "fchca7p",
+    "B0qfbqy": "f1kvmim2",
+    "B4f6apu": ["f1m7sk04", "frl2ks5"],
+    "y0oebl": "f95p06y",
+    "uvfttm": ["frl2ks5", "f1m7sk04"],
+    "Baz25je": "f1kz84di",
+    "Fbdkly": ["f1o0nnkk", "fxb7rol"],
+    "mdwyqc": ["fxb7rol", "f1o0nnkk"]
+  },
+  "mediumVertical": {
+    "lawp4y": "f17jracn",
+    "B0qfbqy": "f1kvmim2",
+    "B4f6apu": ["f1m7sk04", "frl2ks5"],
+    "y0oebl": "f95p06y",
+    "uvfttm": ["frl2ks5", "f1m7sk04"],
+    "Fbdkly": ["f1fzr1x6", "f1f351id"],
+    "Bciustq": "f117lcb2",
+    "Ccq8qp": "f13zdgtj"
+  },
+  "smallHorizontal": {
+    "lawp4y": "fchca7p",
+    "B0qfbqy": "f1yrrkkt",
+    "B4f6apu": ["f70k5xa", "fezrrg8"],
+    "y0oebl": "f1qe1oji",
+    "uvfttm": ["fezrrg8", "f70k5xa"],
+    "Baz25je": "f1kz84di",
+    "Fbdkly": ["f1s6rxz5", "fo35v8s"],
+    "mdwyqc": ["fo35v8s", "f1s6rxz5"]
+  },
+  "smallVertical": {
+    "lawp4y": "fze4zud",
+    "B0qfbqy": "f1kvmim2",
+    "B4f6apu": ["f1m7sk04", "frl2ks5"],
+    "y0oebl": "f95p06y",
+    "uvfttm": ["frl2ks5", "f1m7sk04"],
+    "Fbdkly": ["f1fzr1x6", "f1f351id"],
+    "Bciustq": "fdp32p8",
+    "Ccq8qp": "f13zdgtj"
+  }
+}, {
+  "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);}"],
+  "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);}"],
+  "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);}"]
+});
+
+const useActiveIndicatorStyles = /*#__PURE__*/__styles({
+  "base": {
+    "B0n5ga8": "f16gxe2i",
+    "s924m2": ["fpgykix", "fzybk4o"],
+    "B1q35kw": "f1osi826",
+    "Gp14am": ["fzybk4o", "fpgykix"],
+    "Bm2nyyq": "f8rth92",
+    "Barhvk9": ["flthirb", "ftkbnf5"],
+    "Bw17bha": "f1lh990p",
+    "vfts7": ["ftkbnf5", "flthirb"],
+    "B3778ie": ["fprarqb", "f14vs0nd"],
+    "d9w3h3": ["f14vs0nd", "fprarqb"],
+    "Bl18szs": ["f1gtfqs9", "f18zvfd9"],
+    "B4j8arr": ["f18zvfd9", "f1gtfqs9"],
+    "li1rpt": "f1gw3sf2",
+    "Bsft5z2": "f13zj6fq",
+    "E3zdtr": "f1mdlcz9",
+    "t2ki1e": "ffmd2fr"
+  },
+  "selected": {
+    "B0n5ga8": "ff21voz",
+    "s924m2": ["f13e2re1", "fr799w5"],
+    "B1q35kw": "f1jc6hxc",
+    "Gp14am": ["fr799w5", "f13e2re1"],
+    "Be0v6ae": "f183gc6g",
+    "B5kxglz": ["f9bu0jf", "f1gl5qk4"],
+    "B3pwyw6": "f1bsp7n4",
+    "Bymgtzf": ["f1gl5qk4", "f9bu0jf"],
+    "dmfk": "f9opluq",
+    "B4ofi8": ["f1efh3oj", "f14e19o9"],
+    "jgq6uv": "f73i0vf",
+    "Baxewws": ["f14e19o9", "f1efh3oj"]
+  },
+  "disabled": {
+    "B0n5ga8": "f1meqbmf",
+    "s924m2": ["f1uv8s8a", "fl4jjo8"],
+    "B1q35kw": "f1jzbv2r",
+    "Gp14am": ["fl4jjo8", "f1uv8s8a"]
+  },
+  "mediumHorizontal": {
+    "By385i5": "fo72kxq",
+    "xrcqlc": "f1o9a6jw",
+    "Ihftqj": ["fo3g43a", "fx9b69t"],
+    "Bcgy8vk": "fe59e93",
+    "Bhxzhr1": ["fx9b69t", "fo3g43a"],
+    "Dlnsje": "f1aztngc",
+    "Eqx8gd": ["fna7m5n", "f1oxpfwv"],
+    "B1piin3": ["f1oxpfwv", "fna7m5n"]
+  },
+  "mediumVertical": {
+    "By385i5": "fipylg0",
+    "xrcqlc": "f1o9a6jw",
+    "Ihftqj": ["fo3g43a", "fx9b69t"],
+    "Bcgy8vk": "fe59e93",
+    "Bhxzhr1": ["fx9b69t", "fo3g43a"],
+    "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
+    "bn5sak": "fqchiol",
+    "a2br6o": "f1x60ewe"
+  },
+  "smallHorizontal": {
+    "By385i5": "fo72kxq",
+    "xrcqlc": "fchc3a4",
+    "Ihftqj": ["f1g9ny6e", "f1faeqkd"],
+    "Bcgy8vk": "f2swisw",
+    "Bhxzhr1": ["f1faeqkd", "f1g9ny6e"],
+    "Dlnsje": "f1aztngc",
+    "Eqx8gd": ["f1q70ajw", "f18rbzdx"],
+    "B1piin3": ["f18rbzdx", "f1q70ajw"]
+  },
+  "smallVertical": {
+    "By385i5": "fqbue9b",
+    "xrcqlc": "f1o9a6jw",
+    "Ihftqj": ["fo3g43a", "fx9b69t"],
+    "Bcgy8vk": "fe59e93",
+    "Bhxzhr1": ["fx9b69t", "fo3g43a"],
+    "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
+    "bn5sak": "fk1klkt",
+    "a2br6o": "f1x60ewe"
+  }
+}, {
+  "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);}"],
+  "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);}"],
+  "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);}"]
+});
+/**
+ * Styles for the icon slot.
+ */
+
+
+const useIconStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Bt984gj": "f122n59",
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "f4d9j23",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw"
+  },
+  "small": {
+    "Be2twd7": "fe5j1ua",
+    "Bqenvij": "fjamq6b",
+    "a9b677": "f64fuq3"
+  },
+  "medium": {
+    "Be2twd7": "fe5j1ua",
+    "Bqenvij": "fjamq6b",
+    "a9b677": "f64fuq3"
+  }
+}, {
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}"]
+});
+/**
+ * Styles for the content slot (children)
+ */
+
+
+const useContentStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "f1i3iumi",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw",
+    "z8tnut": "fztplxc",
+    "z189sj": ["ffczdla", "fgiv446"],
+    "Byoj8tv": "f9g1xly",
+    "uwmqm3": ["fgiv446", "ffczdla"]
+  },
+  "selected": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "f1i3iumi"
+  }
+}, {
+  "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);}"]
+});
+/**
+ * Apply styling to the Tab slots based on the state
+ */
+
+
+export const useTabStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const focusStyles = useFocusStyles();
+  const pendingIndicatorStyles = usePendingIndicatorStyles();
+  const activeIndicatorStyles = useActiveIndicatorStyles();
+  const iconStyles = useIconStyles();
+  const contentStyles = useContentStyles();
+  const {
+    appearance,
+    disabled,
+    selected,
+    size,
+    vertical
+  } = state;
+  state.root.className = mergeClasses(tabClassNames.root, rootStyles.base, size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, // pending indicator (before pseudo element)
+  pendingIndicatorStyles.base, size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)
+  selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size !== 'small' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
+  }
+
+  state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, selected && contentStyles.selected, state.content.className);
+  useTabAnimatedIndicatorStyles_unstable(state);
+  return state;
+};
+//# sourceMappingURL=useTabStyles.js.map

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

@@ -0,0 +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/components/TabList/TabList.d.ts

@@ -0,0 +1,6 @@
+import type { TabListProps } from './TabList.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * A tab list provides single selection from a set of tabs.
+ */
+export declare const TabList: ForwardRefComponent<TabListProps>;

package/lib/components/TabList/TabList.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useTabList_unstable } from './useTabList';
+import { renderTabList_unstable } from './renderTabList';
+import { useTabListStyles_unstable } from './useTabListStyles';
+import { useTabListContextValues } from './useTabListContextValues';
+/**
+ * A tab list provides single selection from a set of tabs.
+ */
+
+export const TabList = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTabList_unstable(props, ref);
+  const contextValues = useTabListContextValues(state);
+  useTabListStyles_unstable(state);
+  return renderTabList_unstable(state, contextValues);
+});
+TabList.displayName = 'TabList';
+//# sourceMappingURL=TabList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TabList/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAGA,SAAS,uBAAT,QAAwC,2BAAxC;AAEA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxF,QAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;AACA,QAAM,aAAa,GAAG,uBAAuB,CAAC,KAAD,CAA7C;AAEA,EAAA,yBAAyB,CAAC,KAAD,CAAzB;AACA,SAAO,sBAAsB,CAAC,KAAD,EAAQ,aAAR,CAA7B;AACD,CANyD,CAAnD;AAQP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues } from './useTabListContextValues';\n\n/**\n * A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n  const state = useTabList_unstable(props, ref);\n  const contextValues = useTabListContextValues(state);\n\n  useTabListStyles_unstable(state);\n  return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"sourceRoot":"../src/"}

package/lib/components/TabList/TabList.types.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { TabValue } from '../Tab/Tab.types';
+export declare type TabRegisterData = {
+    /**
+     * The value of the tab.
+     */
+    value: TabValue;
+    /**
+     * The reference to the tab HTML element.
+     */
+    ref: React.RefObject<HTMLElement>;
+};
+export declare type RegisterTabEventHandler = (data: TabRegisterData) => void;
+export declare type SelectTabData = {
+    /**
+     * The value of the selected tab.
+     */
+    value: TabValue;
+};
+export declare type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
+export declare type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;
+export declare type TabListSlots = {
+    /**
+     * The slot associated with the root element of this tab list.
+     */
+    root: Slot<'div'>;
+};
+declare type TabListCommons = {
+    /**
+     * A tab list can supports 'transparent' and 'subtle' appearance.
+     *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
+     *- 'transparent': No background and border styling
+     * The appearance affects each of the contained tabs.
+     * @default 'transparent'
+     */
+    appearance?: 'transparent' | 'subtle';
+    /**
+     * A tab list can be set to disable interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Raised when a tab is selected.
+     */
+    onTabSelect?: SelectTabEventHandler;
+    /**
+     * The value of the currently selected tab.
+     */
+    selectedValue?: TabValue;
+    /**
+     * A tab list can be either 'small' or 'medium' size.
+     * The size affects each of the contained tabs.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * A tab list can arrange its tabs vertically.
+     * @default false
+     */
+    vertical?: boolean;
+};
+/**
+ * TabList Props
+ */
+export declare type TabListProps = ComponentProps<TabListSlots> & TabListCommons & {
+    /**
+     * The value of the tab to be selected by default.
+     * Typically useful when the selectedValue is uncontrolled.
+     */
+    defaultSelectedValue?: TabValue;
+};
+export declare type TabListContextValue = Pick<TabListCommons, 'onTabSelect' | 'selectedValue'> & Required<Pick<TabListCommons, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
+    /** A callback to allow a tab to register itself with the tab list. */
+    onRegister: RegisterTabEventHandler;
+    /** A callback to allow a tab to unregister itself with the tab list. */
+    onUnregister: RegisterTabEventHandler;
+    /**
+     * A callback to allow a tab to select itself when pressed.
+     */
+    onSelect: SelectTabEventHandler;
+    /**
+     * Gets the registered tab data along with current and previous selected values.
+     */
+    getRegisteredTabs: () => {
+        selectedValue?: TabValue;
+        previousSelectedValue?: TabValue;
+        registeredTabs: Record<string, TabRegisterData>;
+    };
+};
+/**
+ * Context values used in rendering TabList.
+ */
+export declare type TabListContextValues = {
+    /**
+     * The context of the tab list available to each tab.
+     */
+    tabList: TabListContextValue;
+};
+/**
+ * State used in rendering TabList.
+ */
+export declare type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;
+export {};

package/lib/components/TabList/TabList.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TabList.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.types.js","sourceRoot":"../src/","sources":["components/TabList/TabList.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type TabRegisterData = {\n  /**\n   * The value of the tab.\n   */\n  value: TabValue;\n\n  /**\n   * The reference to the tab HTML element.\n   */\n  ref: React.RefObject<HTMLElement>;\n};\n\nexport type RegisterTabEventHandler = (data: TabRegisterData) => void;\n\nexport type SelectTabData = {\n  /**\n   * The value of the selected tab.\n   */\n  value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n  /**\n   * The slot associated with the root element of this tab list.\n   */\n  root: Slot<'div'>;\n};\n\ntype TabListCommons = {\n  /**\n   * A tab list can supports 'transparent' and 'subtle' appearance.\n   *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   *- 'transparent': No background and border styling\n   * The appearance affects each of the contained tabs.\n   * @default 'transparent'\n   */\n  appearance?: 'transparent' | 'subtle';\n\n  /**\n   * A tab list can be set to disable interaction.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Raised when a tab is selected.\n   */\n  onTabSelect?: SelectTabEventHandler;\n\n  /**\n   * The value of the currently selected tab.\n   */\n  selectedValue?: TabValue;\n\n  /**\n   * A tab list can be either 'small' or 'medium' size.\n   * The size affects each of the contained tabs.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * A tab list can arrange its tabs vertically.\n   * @default false\n   */\n  vertical?: boolean;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> &\n  TabListCommons & {\n    /**\n     * The value of the tab to be selected by default.\n     * Typically useful when the selectedValue is uncontrolled.\n     */\n    defaultSelectedValue?: TabValue;\n  };\n\nexport type TabListContextValue = Pick<TabListCommons, 'onTabSelect' | 'selectedValue'> &\n  Required<Pick<TabListCommons, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {\n    /** A callback to allow a tab to register itself with the tab list. */\n    onRegister: RegisterTabEventHandler;\n\n    /** A callback to allow a tab to unregister itself with the tab list. */\n    onUnregister: RegisterTabEventHandler;\n    /**\n     * A callback to allow a tab to select itself when pressed.\n     */\n    onSelect: SelectTabEventHandler;\n    /**\n     * Gets the registered tab data along with current and previous selected values.\n     */\n    getRegisteredTabs: () => {\n      selectedValue?: TabValue;\n      previousSelectedValue?: TabValue;\n      registeredTabs: Record<string, TabRegisterData>;\n    };\n  };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n  /**\n   * The context of the tab list available to each tab.\n   */\n  tabList: TabListContextValue;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;\n"]}

package/lib/components/TabList/TabListContext.d.ts

@@ -0,0 +1,3 @@
+import type { Context } from '@fluentui/react-context-selector';
+import { TabListContextValue } from './TabList.types';
+export declare const TabListContext: Context<TabListContextValue>;

package/lib/components/TabList/TabListContext.js

@@ -0,0 +1,23 @@
+import { createContext } from '@fluentui/react-context-selector';
+export const TabListContext = /*#__PURE__*/createContext({
+  appearance: 'transparent',
+  disabled: false,
+  selectedValue: undefined,
+  onRegister: () => {
+    /* noop */
+  },
+  onUnregister: () => {
+    /* noop */
+  },
+  onSelect: () => {
+    /* noop */
+  },
+  getRegisteredTabs: () => {
+    return {
+      registeredTabs: {}
+    };
+  },
+  size: 'medium',
+  vertical: false
+});
+//# sourceMappingURL=TabListContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TabList/TabListContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA,OAAO,MAAM,cAAc,gBAAiC,aAAa,CAAsB;AAC7F,EAAA,UAAU,EAAE,aADiF;AAE7F,EAAA,QAAQ,EAAE,KAFmF;AAG7F,EAAA,aAAa,EAAE,SAH8E;AAI7F,EAAA,UAAU,EAAE,MAAK;AACf;AACD,GAN4F;AAO7F,EAAA,YAAY,EAAE,MAAK;AACjB;AACD,GAT4F;AAU7F,EAAA,QAAQ,EAAE,MAAK;AACb;AACD,GAZ4F;AAa7F,EAAA,iBAAiB,EAAE,MAAK;AACtB,WAAO;AACL,MAAA,cAAc,EAAE;AADX,KAAP;AAGD,GAjB4F;AAkB7F,EAAA,IAAI,EAAE,QAlBuF;AAmB7F,EAAA,QAAQ,EAAE;AAnBmF,CAAtB,CAAlE","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n  appearance: 'transparent',\n  disabled: false,\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredTabs: () => {\n    return {\n      registeredTabs: {},\n    };\n  },\n  size: 'medium',\n  vertical: false,\n});\n"],"sourceRoot":"../src/"}