@fluentui/react-card 9.0.0-beta.12 → 9.0.0-beta.15

package/dist/{react-card.d.ts → index.d.ts}

@@ -17,10 +17,6 @@ export declare const cardClassName = "fui-Card";
 
 export declare const cardClassNames: SlotClassNames<CardSlots>;
 
-export declare type CardCommons = {
-    appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
-};
-
 /**
  * Component to render Button actions in a Card component.
  */
@@ -109,7 +105,30 @@ export declare type CardPreviewState = ComponentState<CardPreviewSlots>;
 /**
  * Card Props
  */
-export declare type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;
+export declare type CardProps = ComponentProps<CardSlots> & {
+    appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
+    /**
+     * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.
+     *
+     * `off`
+     * The card will not focusable.
+     *
+     * `no-tab`
+     * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when
+     * pressing the Escape key.
+     *
+     * `tab-exit`
+     * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing
+     * the Tab key on the last inner element.
+     *
+     * `tab-only`
+     * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus
+     * after the last inner element.
+     *
+     * @defaultvalue off
+     */
+    focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
+};
 
 export declare type CardSlots = {
     root: Slot<'div'>;
@@ -118,7 +137,7 @@ export declare type CardSlots = {
 /**
  * State used in rendering Card
  */
-export declare type CardState = ComponentState<CardSlots> & CardCommons;
+export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance'>>;
 
 /**
  * Render the final JSX of Card

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

@@ -1 +1 @@
-{"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardSlots = {\n  root: Slot<'div'>;\n};\n\nexport type CardCommons = {\n  appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & CardCommons;\n"]}
+{"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n  appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n  /**\n   * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.\n   *\n   * `off`\n   * The card will not focusable.\n   *\n   * `no-tab`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n   * pressing the Escape key.\n   *\n   * `tab-exit`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n   * the Tab key on the last inner element.\n   *\n   * `tab-only`\n   * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n   * after the last inner element.\n   *\n   * @defaultvalue off\n   */\n  focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n};\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance'>>;\n"]}

package/lib/components/Card/useCard.js

@@ -11,12 +11,23 @@ import { useFocusableGroup } from '@fluentui/react-tabster';
  */
 
 export const useCard_unstable = (props, ref) => {
-  const groupperAttrs = useFocusableGroup({
-    tabBehavior: 'limitedTrapFocus'
-  });
   const {
-    appearance = 'filled'
+    appearance = 'filled',
+    focusMode = 'off'
   } = props;
+  const focusMap = {
+    off: undefined,
+    'no-tab': 'limitedTrapFocus',
+    'tab-exit': 'limited',
+    'tab-only': 'unlimited'
+  };
+  const groupperAttrs = useFocusableGroup({
+    tabBehavior: focusMap[focusMode]
+  });
+  const focusAttrs = focusMode !== 'off' ? {
+    tabIndex: 0,
+    ...groupperAttrs
+  } : null;
   return {
     appearance,
     components: {
@@ -25,7 +36,7 @@ export const useCard_unstable = (props, ref) => {
     root: getNativeElementProps(props.as || 'div', {
       ref,
       role: 'group',
-      ...groupperAttrs,
+      ...focusAttrs,
       ...props
     })
   };

package/lib/components/Card/useCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE;AADyB,GAAD,CAAvC;AAIA,QAAM;AAAE,IAAA,UAAU,GAAG;AAAf,MAA4B,KAAlC;AACA,SAAO;AACL,IAAA,UADK;AAGL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAHP;AAIL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,aAH0C;AAI7C,SAAG;AAJ0C,KAApB;AAJtB,GAAP;AAWD,CAjBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: 'limitedTrapFocus',\n  });\n\n  const { appearance = 'filled' } = props;\n  return {\n    appearance,\n\n    components: { root: 'div' },\n    root: getNativeElementProps(props.as || 'div', {\n      ref,\n      role: 'group',\n      ...groupperAttrs,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM;AAAE,IAAA,UAAU,GAAG,QAAf;AAAyB,IAAA,SAAS,GAAG;AAArC,MAA+C,KAArD;AAEA,QAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,SADU;AAEf,cAAU,kBAFK;AAGf,gBAAY,SAHG;AAIf,gBAAY;AAJG,GAAjB;AAOA,QAAM,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE,QAAQ,CAAC,SAAD;AADiB,GAAD,CAAvC;AAIA,QAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;AAAE,IAAA,QAAQ,EAAE,CAAZ;AAAe,OAAG;AAAlB,GAAtB,GAA0D,IAA7E;AAEA,SAAO;AACL,IAAA,UADK;AAGL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAHP;AAIL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,UAH0C;AAI7C,SAAG;AAJ0C,KAApB;AAJtB,GAAP;AAWD,CA3BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n  const { appearance = 'filled', focusMode = 'off' } = props;\n\n  const focusMap = {\n    off: undefined,\n    'no-tab': 'limitedTrapFocus',\n    'tab-exit': 'limited',\n    'tab-only': 'unlimited',\n  } as const;\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[focusMode],\n  });\n\n  const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n  return {\n    appearance,\n\n    components: { root: 'div' },\n    root: getNativeElementProps(props.as || 'div', {\n      ref,\n      role: 'group',\n      ...focusAttrs,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Card/useCardStyles.js

@@ -16,132 +16,138 @@ export const cardClassNames = {
 const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "ftgm304",
+    "qhf8xq": "f10pi13n",
     "B68tc82": "f1p9o1ba",
     "Bmxbyg5": "f1sil6mw",
     "sj55zd": "f19n0e5",
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "B4j52fo": "f192inf7",
-    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
-    "Bn0qgzm": "f1vxd6vx",
-    "ibv6hh": ["f1ojsxk5", "f5tn483"],
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
     "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
     "B7oj6ja": ["f1jar5jt", "fyu767a"],
     "Btl43ni": ["fyu767a", "f1jar5jt"],
+    "E3zdtr": "f1mdlcz9",
+    "bn5sak": "frwkxtg",
+    "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
+    "B1piin3": ["f15yvnhg", "f1n6gb5g"],
+    "By385i5": "fo72kxq",
+    "Bsft5z2": "f13zj6fq",
+    "B80jsxd": "f1nwj1ja",
+    "Bm2nyyq": "f8rth92",
+    "Barhvk9": ["flthirb", "ftkbnf5"],
+    "Bw17bha": "f1lh990p",
+    "vfts7": ["ftkbnf5", "flthirb"],
+    "xrcqlc": "f6czdpx",
+    "Ihftqj": ["f13hvwk3", "f1en4csx"],
+    "Bcgy8vk": "f1i1u9k0",
+    "Bhxzhr1": ["f1en4csx", "f13hvwk3"],
+    "B3778ie": ["f1ibwz09", "f1kp91vd"],
+    "d9w3h3": ["f1kp91vd", "f1ibwz09"],
+    "Bl18szs": ["f1pix4dl", "f13nd1z4"],
+    "B4j8arr": ["f13nd1z4", "f1pix4dl"],
     "Ecqjvq": "f70or3y",
     "B39syqp": ["f1s27jks", "f1x7x6se"],
     "m3o775": "f1q2lvbs",
     "I0kkcn": ["f1x7x6se", "f1s27jks"]
   },
+  "interactiveNoOutline": {
+    "Be0v6ae": "ftr40te",
+    "B5kxglz": ["fcsoo7g", "f1rl4q8i"],
+    "B3pwyw6": "fbb4roj",
+    "Bymgtzf": ["f1rl4q8i", "fcsoo7g"],
+    "dmfk": "fd4vwcp",
+    "B4ofi8": ["f1crelnc", "fup9tr0"],
+    "jgq6uv": "f12d33p4",
+    "Baxewws": ["fup9tr0", "f1crelnc"]
+  },
   "filledInteractive": {
     "Bceei9c": "f1k6fduh",
     "De3pzq": "fxugw4r",
-    "g2u3we": "fghlq4f",
-    "h3c5rm": ["f1gn591s", "fjscplz"],
-    "B9xav0g": "fb073pr",
-    "zhjwy3": ["fjscplz", "f1gn591s"],
     "E5pizo": "f1whvlc6",
+    "B0n5ga8": "f16gxe2i",
+    "s924m2": ["fpgykix", "fzybk4o"],
+    "B1q35kw": "f1osi826",
+    "Gp14am": ["fzybk4o", "fpgykix"],
     "Jwef8y": "f1knas48",
-    "Bgoe8wy": "fpa59ij",
-    "Bwzppfd": ["f1rhln42", "f1l1ogpg"],
-    "oetu4i": "fz67qlh",
-    "gg5e9n": ["f1l1ogpg", "f1rhln42"],
     "Bvxd0ez": "f1m145df",
-    "ecr2s2": "fb40n2d",
-    "B6oc9vd": "f7cshhm",
-    "ak43y8": ["f1bzyac8", "f131p3c2"],
-    "wmxk5l": "f1bazisv",
-    "B50zh58": ["f131p3c2", "f1bzyac8"]
+    "ecr2s2": "fb40n2d"
   },
   "filled": {
     "De3pzq": "fxugw4r",
-    "g2u3we": "fghlq4f",
-    "h3c5rm": ["f1gn591s", "fjscplz"],
-    "B9xav0g": "fb073pr",
-    "zhjwy3": ["fjscplz", "f1gn591s"],
-    "E5pizo": "f1whvlc6"
+    "E5pizo": "f1whvlc6",
+    "B0n5ga8": "f16gxe2i",
+    "s924m2": ["fpgykix", "fzybk4o"],
+    "B1q35kw": "f1osi826",
+    "Gp14am": ["fzybk4o", "fpgykix"]
   },
   "filledAlternativeInteractive": {
     "Bceei9c": "f1k6fduh",
     "De3pzq": "f1dmdbja",
-    "g2u3we": "fghlq4f",
-    "h3c5rm": ["f1gn591s", "fjscplz"],
-    "B9xav0g": "fb073pr",
-    "zhjwy3": ["fjscplz", "f1gn591s"],
     "E5pizo": "f1whvlc6",
+    "B0n5ga8": "f16gxe2i",
+    "s924m2": ["fpgykix", "fzybk4o"],
+    "B1q35kw": "f1osi826",
+    "Gp14am": ["fzybk4o", "fpgykix"],
     "Jwef8y": "f1uvynv3",
-    "Bgoe8wy": "fpa59ij",
-    "Bwzppfd": ["f1rhln42", "f1l1ogpg"],
-    "oetu4i": "fz67qlh",
-    "gg5e9n": ["f1l1ogpg", "f1rhln42"],
     "Bvxd0ez": "f1m145df",
-    "ecr2s2": "f1yhgkbh",
-    "B6oc9vd": "f7cshhm",
-    "ak43y8": ["f1bzyac8", "f131p3c2"],
-    "wmxk5l": "f1bazisv",
-    "B50zh58": ["f131p3c2", "f1bzyac8"]
+    "ecr2s2": "f1yhgkbh"
   },
   "filledAlternative": {
     "De3pzq": "f1dmdbja",
-    "g2u3we": "fghlq4f",
-    "h3c5rm": ["f1gn591s", "fjscplz"],
-    "B9xav0g": "fb073pr",
-    "zhjwy3": ["fjscplz", "f1gn591s"],
-    "E5pizo": "f1whvlc6"
+    "E5pizo": "f1whvlc6",
+    "B0n5ga8": "f16gxe2i",
+    "s924m2": ["fpgykix", "fzybk4o"],
+    "B1q35kw": "f1osi826",
+    "Gp14am": ["fzybk4o", "fpgykix"]
   },
   "outlineInteractive": {
     "Bceei9c": "f1k6fduh",
     "De3pzq": "f1c21dwh",
-    "g2u3we": "fj3muxo",
-    "h3c5rm": ["f1akhkt", "f1lxtadh"],
-    "B9xav0g": "f1aperda",
-    "zhjwy3": ["f1lxtadh", "f1akhkt"],
     "E5pizo": "f1couhl3",
+    "B0n5ga8": "ft83z1f",
+    "s924m2": ["f1g4150c", "f192dr6e"],
+    "B1q35kw": "f1qnawh6",
+    "Gp14am": ["f192dr6e", "f1g4150c"],
     "Jwef8y": "fjxutwb",
-    "Bgoe8wy": "fvcxoqz",
-    "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
-    "oetu4i": "f1xlaoq0",
-    "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
+    "Be0v6ae": "f1llr77y",
+    "B5kxglz": ["fzk0khw", "fjj8tog"],
+    "B3pwyw6": "fb1u8ub",
+    "Bymgtzf": ["fjj8tog", "fzk0khw"],
     "ecr2s2": "fophhak",
-    "B6oc9vd": "fvs00aa",
-    "ak43y8": ["f1assf6x", "f4ruux4"],
-    "wmxk5l": "fumykes",
-    "B50zh58": ["f4ruux4", "f1assf6x"]
+    "dmfk": "f1uohb70",
+    "B4ofi8": ["f1jm7v1n", "f1bus3rq"],
+    "jgq6uv": "f1fbu7rr",
+    "Baxewws": ["f1bus3rq", "f1jm7v1n"]
   },
   "outline": {
     "De3pzq": "f1c21dwh",
-    "g2u3we": "fj3muxo",
-    "h3c5rm": ["f1akhkt", "f1lxtadh"],
-    "B9xav0g": "f1aperda",
-    "zhjwy3": ["f1lxtadh", "f1akhkt"],
-    "E5pizo": "f1couhl3"
+    "E5pizo": "f1couhl3",
+    "B0n5ga8": "ft83z1f",
+    "s924m2": ["f1g4150c", "f192dr6e"],
+    "B1q35kw": "f1qnawh6",
+    "Gp14am": ["f192dr6e", "f1g4150c"]
   },
   "subtleInteractive": {
     "Bceei9c": "f1k6fduh",
     "De3pzq": "fhovq9v",
-    "g2u3we": "fghlq4f",
-    "h3c5rm": ["f1gn591s", "fjscplz"],
-    "B9xav0g": "fb073pr",
-    "zhjwy3": ["fjscplz", "f1gn591s"],
     "E5pizo": "f1couhl3",
+    "B0n5ga8": "f16gxe2i",
+    "s924m2": ["fpgykix", "fzybk4o"],
+    "B1q35kw": "f1osi826",
+    "Gp14am": ["fzybk4o", "fpgykix"],
     "Jwef8y": "f1t94bn6",
     "ecr2s2": "f1wfn5kd"
   },
   "subtle": {
     "De3pzq": "fhovq9v",
-    "g2u3we": "fghlq4f",
-    "h3c5rm": ["f1gn591s", "fjscplz"],
-    "B9xav0g": "fb073pr",
-    "zhjwy3": ["fjscplz", "f1gn591s"],
-    "E5pizo": "f1couhl3"
+    "E5pizo": "f1couhl3",
+    "B0n5ga8": "f16gxe2i",
+    "s924m2": ["fpgykix", "fzybk4o"],
+    "B1q35kw": "f1osi826",
+    "Gp14am": ["fzybk4o", "fpgykix"]
   }
 }, {
-  "d": [".ftgm304{display:block;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".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);}", ".f70or3y>*:not(.fui-CardPreview){margin-top:12px;}", ".f1s27jks>*:not(.fui-CardPreview){margin-right:12px;}", ".f1x7x6se>*:not(.fui-CardPreview){margin-left:12px;}", ".f1q2lvbs>*:not(.fui-CardPreview){margin-bottom:12px;}", ".f1k6fduh{cursor:pointer;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1couhl3{box-shadow:none;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
-  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
-  "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f7cshhm:active{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1bzyac8:active{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f131p3c2:active{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1bazisv:active{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
+  "d": [".ftgm304{display:block;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".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);}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f13zj6fq::after{content:\"\";}", ".f1nwj1ja::after{pointer-events:none;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f70or3y>*:not(.fui-CardPreview){margin-top:12px;}", ".f1s27jks>*:not(.fui-CardPreview){margin-right:12px;}", ".f1x7x6se>*:not(.fui-CardPreview){margin-left:12px;}", ".f1q2lvbs>*:not(.fui-CardPreview){margin-bottom:12px;}", ".f1k6fduh{cursor:pointer;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".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);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1couhl3{box-shadow:none;}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
+  "h": [".ftr40te:hover::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fcsoo7g:hover::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1rl4q8i:hover::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fbb4roj:hover::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}", ".fzk0khw:hover::after{border-right-color:var(--colorNeutralStroke1Hover);}", ".fjj8tog:hover::after{border-left-color:var(--colorNeutralStroke1Hover);}", ".fb1u8ub:hover::after{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
+  "a": [".fd4vwcp:active::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crelnc:active::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fup9tr0:active::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f12d33p4:active::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1uohb70:active::after{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1jm7v1n:active::after{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1bus3rq:active::after{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1fbu7rr:active::after{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });
 /**
  * Apply styling to the Card slots based on the state
@@ -151,7 +157,7 @@ const useStyles = /*#__PURE__*/__styles({
 export const useCardStyles_unstable = state => {
   const styles = useStyles();
   const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
-  state.root.className = mergeClasses(cardClassNames.root, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, state.root.className);
+  state.root.className = mergeClasses(cardClassNames.root, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, interactive && state.appearance !== 'outline' && styles.interactiveNoOutline, state.root.className);
   return state;
 };
 //# sourceMappingURL=useCardStyles.js.map

package/lib/components/Card/useCardStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,qBAAT,QAAsC,sBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,aAAa,GAAG,UAAtB;AACP,OAAO,MAAM,cAAc,GAA8B;AACvD,EAAA,IAAI,EAAE;AADiD,CAAlD;AAIP;;AAEG;;AACH,MAAM,SAAS,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;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,EAAlB;AAoGA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cAAc,CAAC,IADkB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHP,EAIjC,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJnB,EAKjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALR,EAMjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANP,EAOjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPtB,EAQjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BARlC,EASjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATvB,EAUjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVtB,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAcA,SAAO,KAAP;AACD,CA3BM","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/index';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `cardClassNames.root` instead.\n */\nexport const cardClassName = 'fui-Card';\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n  root: 'fui-Card',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'block',\n    ...shorthands.overflow('hidden'),\n\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    // Size: medium\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    [`> *:not(.${cardPreviewClassNames.root})`]: {\n      // Size: medium\n      ...shorthands.margin('12px'),\n    },\n  },\n\n  filledInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    boxShadow: tokens.shadow4,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    boxShadow: tokens.shadow4,\n  },\n  filledAlternativeInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground2,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    boxShadow: tokens.shadow4,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground2Hover,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground2Pressed,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  filledAlternative: {\n    backgroundColor: tokens.colorNeutralBackground2,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    boxShadow: tokens.shadow4,\n  },\n  outlineInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    boxShadow: 'none',\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n    },\n  },\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    boxShadow: 'none',\n  },\n  subtleInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackground,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    boxShadow: 'none',\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    boxShadow: 'none',\n  },\n});\n\n/**\n * Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n  const styles = useStyles();\n\n  const interactive =\n    state.root.onClick ||\n    state.root.onMouseUp ||\n    state.root.onMouseDown ||\n    state.root.onPointerUp ||\n    state.root.onPointerDown ||\n    state.root.onTouchStart ||\n    state.root.onTouchEnd;\n\n  state.root.className = mergeClasses(\n    cardClassNames.root,\n    styles.root,\n    state.appearance === 'filled' && styles.filled,\n    state.appearance === 'filled-alternative' && styles.filledAlternative,\n    state.appearance === 'outline' && styles.outline,\n    state.appearance === 'subtle' && styles.subtle,\n    interactive && state.appearance === 'filled' && styles.filledInteractive,\n    interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n    interactive && state.appearance === 'outline' && styles.outlineInteractive,\n    interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,qBAAT,QAAsC,sBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,aAAa,GAAG,UAAtB;AACP,OAAO,MAAM,cAAc,GAA8B;AACvD,EAAA,IAAI,EAAE;AADiD,CAAlD;AAIP;;AAEG;;AACH,MAAM,SAAS,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;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,EAAlB;AAoJA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cAAc,CAAC,IADkB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHP,EAIjC,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJnB,EAKjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALR,EAMjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANP,EAOjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPtB,EAQjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BARlC,EASjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATvB,EAUjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVtB,EAWjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,oBAXvB,EAYjC,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAeA,SAAO,KAAP;AACD,CA5BM","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/index';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `cardClassNames.root` instead.\n */\nexport const cardClassName = 'fui-Card';\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n  root: 'fui-Card',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'block',\n    position: 'relative',\n    ...shorthands.overflow('hidden'),\n    color: tokens.colorNeutralForeground1,\n\n    // TODO: Extract this to separate stiles when tackling the `size` prop\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    '::after': {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      content: '\"\"',\n      pointerEvents: 'none',\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(tokens.strokeWidthThin),\n      // TODO: Extract this to separate styles when tackling the `size` prop\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    },\n\n    [`> *:not(.${cardPreviewClassNames.root})`]: {\n      // TODO: Extract this to separate styles when tackling the `size` prop\n      ...shorthands.margin('12px'),\n    },\n  },\n\n  interactiveNoOutline: {\n    ':hover::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n    ':active::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n\n  filledInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n    },\n  },\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n  filledAlternativeInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground2,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground2Hover,\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground2Pressed,\n    },\n  },\n  filledAlternative: {\n    backgroundColor: tokens.colorNeutralBackground2,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n  outlineInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n\n      '::after': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      },\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n      '::after': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      },\n    },\n  },\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n  },\n  subtleInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n});\n\n/**\n * Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n  const styles = useStyles();\n\n  const interactive =\n    state.root.onClick ||\n    state.root.onMouseUp ||\n    state.root.onMouseDown ||\n    state.root.onPointerUp ||\n    state.root.onPointerDown ||\n    state.root.onTouchStart ||\n    state.root.onTouchEnd;\n\n  state.root.className = mergeClasses(\n    cardClassNames.root,\n    styles.root,\n    state.appearance === 'filled' && styles.filled,\n    state.appearance === 'filled-alternative' && styles.filledAlternative,\n    state.appearance === 'outline' && styles.outline,\n    state.appearance === 'subtle' && styles.subtle,\n    interactive && state.appearance === 'filled' && styles.filledInteractive,\n    interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n    interactive && state.appearance === 'outline' && styles.outlineInteractive,\n    interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n    interactive && state.appearance !== 'outline' && styles.interactiveNoOutline,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA;AAEA,SACE,IADF,EAEE,aAFF,EAGE,cAHF,EAIE,mBAJF,EAKE,sBALF,EAME,gBANF,QAOO,QAPP;AASA,SACE,UADF,EAEE,mBAFF,EAGE,oBAHF,EAIE,yBAJF,EAKE,4BALF,EAME,sBANF,QAOO,cAPP;AASA,SACE,UADF,EAEE,mBAFF,EAGE,oBAHF,EAIE,yBAJF,EAKE,4BALF,EAME,sBANF,QAOO,cAPP;AASA,SACE,WADF,EAEE,oBAFF,EAGE,qBAHF,EAIE,0BAJF,EAKE,6BALF,EAME,uBANF,QAOO,eAPP","sourcesContent":["/* eslint-disable deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851*/\n\nexport {\n  Card,\n  cardClassName,\n  cardClassNames,\n  renderCard_unstable,\n  useCardStyles_unstable,\n  useCard_unstable,\n} from './Card';\nexport type { CardCommons, CardProps, CardSlots, CardState } from './Card';\nexport {\n  CardFooter,\n  cardFooterClassName,\n  cardFooterClassNames,\n  renderCardFooter_unstable,\n  useCardFooterStyles_unstable,\n  useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n  CardHeader,\n  cardHeaderClassName,\n  cardHeaderClassNames,\n  renderCardHeader_unstable,\n  useCardHeaderStyles_unstable,\n  useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n  CardPreview,\n  cardPreviewClassName,\n  cardPreviewClassNames,\n  renderCardPreview_unstable,\n  useCardPreviewStyles_unstable,\n  useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA;AAEA,SACE,IADF,EAEE,aAFF,EAGE,cAHF,EAIE,mBAJF,EAKE,sBALF,EAME,gBANF,QAOO,QAPP;AASA,SACE,UADF,EAEE,mBAFF,EAGE,oBAHF,EAIE,yBAJF,EAKE,4BALF,EAME,sBANF,QAOO,cAPP;AASA,SACE,UADF,EAEE,mBAFF,EAGE,oBAHF,EAIE,yBAJF,EAKE,4BALF,EAME,sBANF,QAOO,cAPP;AASA,SACE,WADF,EAEE,oBAFF,EAGE,qBAHF,EAIE,0BAJF,EAKE,6BALF,EAME,uBANF,QAOO,eAPP","sourcesContent":["/* eslint-disable deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851*/\n\nexport {\n  Card,\n  cardClassName,\n  cardClassNames,\n  renderCard_unstable,\n  useCardStyles_unstable,\n  useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState } from './Card';\nexport {\n  CardFooter,\n  cardFooterClassName,\n  cardFooterClassNames,\n  renderCardFooter_unstable,\n  useCardFooterStyles_unstable,\n  useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n  CardHeader,\n  cardHeaderClassName,\n  cardHeaderClassNames,\n  renderCardHeader_unstable,\n  useCardHeaderStyles_unstable,\n  useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n  CardPreview,\n  cardPreviewClassName,\n  cardPreviewClassNames,\n  renderCardPreview_unstable,\n  useCardPreviewStyles_unstable,\n  useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Card/useCard.js

@@ -20,12 +20,23 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
 
 const useCard_unstable = (props, ref) => {
-  const groupperAttrs = react_tabster_1.useFocusableGroup({
-    tabBehavior: 'limitedTrapFocus'
-  });
   const {
-    appearance = 'filled'
+    appearance = 'filled',
+    focusMode = 'off'
   } = props;
+  const focusMap = {
+    off: undefined,
+    'no-tab': 'limitedTrapFocus',
+    'tab-exit': 'limited',
+    'tab-only': 'unlimited'
+  };
+  const groupperAttrs = react_tabster_1.useFocusableGroup({
+    tabBehavior: focusMap[focusMode]
+  });
+  const focusAttrs = focusMode !== 'off' ? {
+    tabIndex: 0,
+    ...groupperAttrs
+  } : null;
   return {
     appearance,
     components: {
@@ -34,7 +45,7 @@ const useCard_unstable = (props, ref) => {
     root: react_utilities_1.getNativeElementProps(props.as || 'div', {
       ref,
       role: 'group',
-      ...groupperAttrs,
+      ...focusAttrs,
       ...props
     })
   };

package/lib-commonjs/components/Card/useCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE;AADyB,GAAlB,CAAtB;AAIA,QAAM;AAAE,IAAA,UAAU,GAAG;AAAf,MAA4B,KAAlC;AACA,SAAO;AACL,IAAA,UADK;AAGL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAHP;AAIL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,aAH0C;AAI7C,SAAG;AAJ0C,KAAzC;AAJD,GAAP;AAWD,CAjBM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: 'limitedTrapFocus',\n  });\n\n  const { appearance = 'filled' } = props;\n  return {\n    appearance,\n\n    components: { root: 'div' },\n    root: getNativeElementProps(props.as || 'div', {\n      ref,\n      role: 'group',\n      ...groupperAttrs,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM;AAAE,IAAA,UAAU,GAAG,QAAf;AAAyB,IAAA,SAAS,GAAG;AAArC,MAA+C,KAArD;AAEA,QAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,SADU;AAEf,cAAU,kBAFK;AAGf,gBAAY,SAHG;AAIf,gBAAY;AAJG,GAAjB;AAOA,QAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE,QAAQ,CAAC,SAAD;AADiB,GAAlB,CAAtB;AAIA,QAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;AAAE,IAAA,QAAQ,EAAE,CAAZ;AAAe,OAAG;AAAlB,GAAtB,GAA0D,IAA7E;AAEA,SAAO;AACL,IAAA,UADK;AAGL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAHP;AAIL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,UAH0C;AAI7C,SAAG;AAJ0C,KAAzC;AAJD,GAAP;AAWD,CA3BM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n  const { appearance = 'filled', focusMode = 'off' } = props;\n\n  const focusMap = {\n    off: undefined,\n    'no-tab': 'limitedTrapFocus',\n    'tab-exit': 'limited',\n    'tab-only': 'unlimited',\n  } as const;\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[focusMode],\n  });\n\n  const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n  return {\n    appearance,\n\n    components: { root: 'div' },\n    root: getNativeElementProps(props.as || 'div', {\n      ref,\n      role: 'group',\n      ...focusAttrs,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}