@fluentui/react-card 0.0.0-nightly-20240819-2137.1 → 0.0.0-nightly-20240822-0407.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,26 +1,63 @@
1
1
  # Change Log - @fluentui/react-card
2
2
 
3
- This log was last generated on Mon, 19 Aug 2024 21:48:22 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 22 Aug 2024 04:12:09 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240819-2137.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20240819-2137.1)
7
+ ## [0.0.0-nightly-20240822-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20240822-0407.1)
8
8
 
9
- Mon, 19 Aug 2024 21:48:22 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.87..@fluentui/react-card_v0.0.0-nightly-20240819-2137.1)
9
+ Thu, 22 Aug 2024 04:12:09 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.91..@fluentui/react-card_v0.0.0-nightly-20240822-0407.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
16
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
19
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
20
- - Bump @fluentui/react-provider to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
21
- - Bump @fluentui/react-button to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
22
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
23
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
15
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
17
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
18
+ - Bump @fluentui/react-text to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
19
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
20
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
21
+ - Bump @fluentui/react-button to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
22
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
23
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
24
+ - Bump @fluentui/react-provider to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
25
+
26
+ ## [9.0.91](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.91)
27
+
28
+ Thu, 15 Aug 2024 13:49:46 GMT
29
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.90..@fluentui/react-card_v9.0.91)
30
+
31
+ ### Patches
32
+
33
+ - Bump @fluentui/react-tabster to v9.22.5 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
34
+
35
+ ## [9.0.90](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.90)
36
+
37
+ Thu, 15 Aug 2024 08:22:08 GMT
38
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.89..@fluentui/react-card_v9.0.90)
39
+
40
+ ### Patches
41
+
42
+ - Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
43
+
44
+ ## [9.0.89](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.89)
45
+
46
+ Tue, 06 Aug 2024 21:40:43 GMT
47
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.88..@fluentui/react-card_v9.0.89)
48
+
49
+ ### Patches
50
+
51
+ - fix: Card does not override specified focusMode based on event listeners ([PR #32200](https://github.com/microsoft/fluentui/pull/32200) by sarah.higley@microsoft.com)
52
+
53
+ ## [9.0.88](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.88)
54
+
55
+ Tue, 30 Jul 2024 18:47:32 GMT
56
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.87..@fluentui/react-card_v9.0.88)
57
+
58
+ ### Patches
59
+
60
+ - fix: improve hover for HC mode ([PR #31953](https://github.com/microsoft/fluentui/pull/31953) by marcosvmmoura@gmail.com)
24
61
 
25
62
  ## [9.0.87](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.87)
26
63
 
@@ -16,7 +16,7 @@ const focusMap = {
16
16
  * and control focus properties based on that.
17
17
  *
18
18
  * @param props - props from this instance of Card
19
- */ const useCardInteractive = ({ focusMode = 'off', ...props })=>{
19
+ */ const useCardInteractive = ({ focusMode: initialFocusMode, ...props })=>{
20
20
  const interactive = [
21
21
  'onClick',
22
22
  'onDoubleClick',
@@ -29,8 +29,10 @@ const focusMap = {
29
29
  'onDragStart',
30
30
  'onDragEnd'
31
31
  ].some((prop)=>props[prop]);
32
+ // default focusMode to tab-only when interactive, and off when not
33
+ const focusMode = initialFocusMode !== null && initialFocusMode !== void 0 ? initialFocusMode : interactive ? 'no-tab' : 'off';
32
34
  const groupperAttrs = useFocusableGroup({
33
- tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
35
+ tabBehavior: focusMap[focusMode]
34
36
  });
35
37
  const interactiveFocusAttributes = {
36
38
  ...groupperAttrs,
@@ -38,7 +40,7 @@ const focusMap = {
38
40
  };
39
41
  return {
40
42
  interactive,
41
- focusAttributes: !interactive && focusMode === 'off' ? null : interactiveFocusAttributes
43
+ focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
42
44
  };
43
45
  };
44
46
  /**
@@ -1 +1 @@
1
- {"version":3,"sources":["useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode = 'off', ...props }: CardProps) => {\n const interactive = (\n [\n 'onClick',\n 'onDoubleClick',\n 'onMouseUp',\n 'onMouseDown',\n 'onPointerUp',\n 'onPointerDown',\n 'onTouchStart',\n 'onTouchEnd',\n 'onDragStart',\n 'onDragEnd',\n ] as (keyof React.HTMLAttributes<HTMLElement>)[]\n ).some(prop => props[prop]);\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n });\n\n const interactiveFocusAttributes = {\n ...groupperAttrs,\n tabIndex: 0,\n };\n\n return {\n interactive,\n focusAttributes: !interactive && focusMode === 'off' ? null : interactiveFocusAttributes,\n };\n};\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 the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;\n\n const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n const cardBaseRef = useFocusWithin<HTMLDivElement>();\n const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } =\n useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef);\n\n const cardRef = useMergedRefs(cardBaseRef, ref);\n\n const { interactive, focusAttributes } = useCardInteractive(props);\n\n return {\n appearance,\n orientation,\n size,\n interactive,\n selectable,\n selectFocused,\n selected,\n selectableA11yProps: {\n setReferenceId,\n referenceId,\n referenceLabel,\n setReferenceLabel,\n },\n\n components: {\n root: 'div',\n floatingAction: 'div',\n checkbox: 'input',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: cardRef,\n role: 'group',\n ...(!selectable ? focusAttributes : null),\n ...props,\n ...selectableCardProps,\n }),\n { elementType: 'div' },\n ),\n\n floatingAction: floatingActionSlot,\n checkbox: checkboxSlot,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusableGroup","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","useCard_unstable","ref","appearance","orientation","size","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRef","components","root","floatingAction","checkbox","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,0BAA0B;AAG5E,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,uBAAuB,QAAQ,gBAAgB;AAExD,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AAEA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAAEC,YAAY,KAAK,EAAE,GAAGC,OAAkB;IACpE,MAAMC,cAAc,AAClB;QACE;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CACDC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAE1B,MAAMC,gBAAgBb,kBAAkB;QACtCc,aAAaV,QAAQ,CAACM,cAAc,WAAWF,UAAU;IAC3D;IAEA,MAAMO,6BAA6B;QACjC,GAAGF,aAAa;QAChBG,UAAU;IACZ;IAEA,OAAO;QACLN;QACAO,iBAAiB,CAACP,eAAeF,cAAc,QAAQ,OAAOO;IAChE;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMG,mBAAmB,CAACT,OAAkBU;IACjD,MAAM,EAAEC,aAAa,QAAQ,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGb;IAE7E,MAAM,CAACc,aAAaC,eAAe,GAAG5B,MAAM6B,QAAQ,CAACtB,wBAAwBuB,mBAAmB,CAACH,WAAW;IAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,GAAGhC,MAAM6B,QAAQ,CAACtB,wBAAwBuB,mBAAmB,CAACH,WAAW;IAElH,MAAMM,cAAc5B;IACpB,MAAM,EAAE6B,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAClGjC,kBAAkBO,OAAO;QAAEc;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,UAAUtC,cAAc+B,aAAaV;IAE3C,MAAM,EAAET,WAAW,EAAEO,eAAe,EAAE,GAAGV,mBAAmBE;IAE5D,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAoB;QACAG;QACAF;QACAL,qBAAqB;YACnBF;YACAD;YACAI;YACAC;QACF;QAEAS,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,MAAMvC,KAAK0C,MAAM,CACf5C,yBAAyB,OAAO;YAC9BsB,KAAKiB;YACLM,MAAM;YACN,GAAI,CAACZ,aAAab,kBAAkB,IAAI;YACxC,GAAGR,KAAK;YACR,GAAGuB,mBAAmB;QACxB,IACA;YAAEW,aAAa;QAAM;QAGvBJ,gBAAgBJ;QAChBK,UAAUN;IACZ;AACF,EAAE"}
1
+ {"version":3,"sources":["useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode: initialFocusMode, ...props }: CardProps) => {\n const interactive = (\n [\n 'onClick',\n 'onDoubleClick',\n 'onMouseUp',\n 'onMouseDown',\n 'onPointerUp',\n 'onPointerDown',\n 'onTouchStart',\n 'onTouchEnd',\n 'onDragStart',\n 'onDragEnd',\n ] as (keyof React.HTMLAttributes<HTMLElement>)[]\n ).some(prop => props[prop]);\n\n // default focusMode to tab-only when interactive, and off when not\n const focusMode = initialFocusMode ?? (interactive ? 'no-tab' : 'off');\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n const interactiveFocusAttributes = {\n ...groupperAttrs,\n tabIndex: 0,\n };\n\n return {\n interactive,\n focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n };\n};\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 the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;\n\n const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n const cardBaseRef = useFocusWithin<HTMLDivElement>();\n const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } =\n useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef);\n\n const cardRef = useMergedRefs(cardBaseRef, ref);\n\n const { interactive, focusAttributes } = useCardInteractive(props);\n\n return {\n appearance,\n orientation,\n size,\n interactive,\n selectable,\n selectFocused,\n selected,\n selectableA11yProps: {\n setReferenceId,\n referenceId,\n referenceLabel,\n setReferenceLabel,\n },\n\n components: {\n root: 'div',\n floatingAction: 'div',\n checkbox: 'input',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: cardRef,\n role: 'group',\n ...(!selectable ? focusAttributes : null),\n ...props,\n ...selectableCardProps,\n }),\n { elementType: 'div' },\n ),\n\n floatingAction: floatingActionSlot,\n checkbox: checkboxSlot,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusableGroup","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","useCardInteractive","focusMode","initialFocusMode","props","interactive","some","prop","groupperAttrs","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","useCard_unstable","ref","appearance","orientation","size","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRef","components","root","floatingAction","checkbox","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,0BAA0B;AAG5E,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,uBAAuB,QAAQ,gBAAgB;AAExD,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AAEA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAAEC,WAAWC,gBAAgB,EAAE,GAAGC,OAAkB;IAC9E,MAAMC,cAAc,AAClB;QACE;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CACDC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAE1B,mEAAmE;IACnE,MAAML,YAAYC,6BAAAA,8BAAAA,mBAAqBE,cAAc,WAAW;IAEhE,MAAMG,gBAAgBd,kBAAkB;QACtCe,aAAaX,QAAQ,CAACI,UAAU;IAClC;IAEA,MAAMQ,6BAA6B;QACjC,GAAGF,aAAa;QAChBG,UAAU;IACZ;IAEA,OAAO;QACLN;QACAO,iBAAiBV,cAAc,QAAQ,OAAOQ;IAChD;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMG,mBAAmB,CAACT,OAAkBU;IACjD,MAAM,EAAEC,aAAa,QAAQ,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGb;IAE7E,MAAM,CAACc,aAAaC,eAAe,GAAG7B,MAAM8B,QAAQ,CAACvB,wBAAwBwB,mBAAmB,CAACH,WAAW;IAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,GAAGjC,MAAM8B,QAAQ,CAACvB,wBAAwBwB,mBAAmB,CAACH,WAAW;IAElH,MAAMM,cAAc7B;IACpB,MAAM,EAAE8B,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAClGlC,kBAAkBQ,OAAO;QAAEc;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,UAAUvC,cAAcgC,aAAaV;IAE3C,MAAM,EAAET,WAAW,EAAEO,eAAe,EAAE,GAAGX,mBAAmBG;IAE5D,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAoB;QACAG;QACAF;QACAL,qBAAqB;YACnBF;YACAD;YACAI;YACAC;QACF;QAEAS,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,MAAMxC,KAAK2C,MAAM,CACf7C,yBAAyB,OAAO;YAC9BuB,KAAKiB;YACLM,MAAM;YACN,GAAI,CAACZ,aAAab,kBAAkB,IAAI;YACxC,GAAGR,KAAK;YACR,GAAGuB,mBAAmB;QACxB,IACA;YAAEW,aAAa;QAAM;QAGvBJ,gBAAgBJ;QAChBK,UAAUN;IACZ;AACF,EAAE"}
@@ -1,10 +1,11 @@
1
- import { shorthands, __styles, mergeClasses } from '@griffel/react';
1
+ import * as React from 'react';
2
+ import { shorthands, __styles, mergeClasses, __resetStyles } from '@griffel/react';
2
3
  import { tokens } from '@fluentui/react-theme';
4
+ import { textClassNames } from '@fluentui/react-text';
3
5
  import { createFocusOutlineStyle } from '@fluentui/react-tabster';
4
6
  import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
5
7
  import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
6
8
  import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';
7
- import * as React from 'react';
8
9
  /**
9
10
  * Static CSS class names used internally for the component slots.
10
11
  */
@@ -22,53 +23,11 @@ export const cardCSSVars = {
22
23
  };
23
24
  const focusOutlineStyle = {
24
25
  outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
25
- outlineWidth: `var(--ctrl-token-Card-697, var(--semantic-token-Card-698, ${tokens.strokeWidthThick}))`,
26
+ outlineWidth: tokens.strokeWidthThick,
26
27
  outlineOffset: '-2px'
27
28
  };
28
- const useStyles = /*#__PURE__*/__styles({
29
- root: {
30
- B68tc82: 0,
31
- Bmxbyg5: 0,
32
- Bpg54ce: "f1a3p1vp",
33
- Beyfa6y: 0,
34
- Bbmb7ep: 0,
35
- Btl43ni: 0,
36
- B7oj6ja: 0,
37
- Dimara: "flpxrij",
38
- Byoj8tv: 0,
39
- uwmqm3: 0,
40
- z189sj: 0,
41
- z8tnut: 0,
42
- B0ocmuz: "fi54ll6",
43
- i8kkvl: 0,
44
- Belr9w4: 0,
45
- rmohyg: "fs0zar4",
46
- mc9l5x: "f22iagw",
47
- qhf8xq: "f10pi13n",
48
- B7ck84d: "f1ewtqcl",
49
- sj55zd: "f1py3b4z",
50
- E3zdtr: "f1mdlcz9",
51
- bn5sak: "frwkxtg",
52
- Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
53
- B1piin3: ["f15yvnhg", "f1n6gb5g"],
54
- By385i5: "fo72kxq",
55
- Bsft5z2: "f13zj6fq",
56
- B80jsxd: "f1nwj1ja",
57
- Bm2nyyq: "f8rth92",
58
- Barhvk9: ["flthirb", "ftkbnf5"],
59
- Bw17bha: "f1lh990p",
60
- vfts7: ["ftkbnf5", "flthirb"],
61
- xrcqlc: "f6czdpx",
62
- Ihftqj: ["f13hvwk3", "f1en4csx"],
63
- Bcgy8vk: "f1i1u9k0",
64
- Bhxzhr1: ["f1en4csx", "f13hvwk3"],
65
- d9w3h3: 0,
66
- B3778ie: 0,
67
- B4j8arr: 0,
68
- Bl18szs: 0,
69
- Blrzh8d: "fw3u9gn",
70
- Bwr1qzv: "fnk4z59"
71
- },
29
+ const useCardResetStyles = /*#__PURE__*/__resetStyles("rfxo2k2", "rgle7w9", [".rfxo2k2{overflow:hidden;border-radius:var(--fui-Card--border-radius);padding:var(--fui-Card--size);gap:var(--fui-Card--size);display:flex;position:relative;box-sizing:border-box;color:var(--colorNeutralForeground1);}", ".rfxo2k2::after{position:absolute;top:0;left:0;right:0;bottom:0;content:\"\";pointer-events:none;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-radius:var(--fui-Card--border-radius);}", ".rfxo2k2>.fui-CardHeader,.rfxo2k2>.fui-CardFooter{flex-shrink:0;}", ".rgle7w9{overflow:hidden;border-radius:var(--fui-Card--border-radius);padding:var(--fui-Card--size);gap:var(--fui-Card--size);display:flex;position:relative;box-sizing:border-box;color:var(--colorNeutralForeground1);}", ".rgle7w9::after{position:absolute;top:0;right:0;left:0;bottom:0;content:\"\";pointer-events:none;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-radius:var(--fui-Card--border-radius);}", ".rgle7w9>.fui-CardHeader,.rgle7w9>.fui-CardFooter{flex-shrink:0;}"]);
30
+ const useCardStyles = /*#__PURE__*/__styles({
72
31
  focused: {
73
32
  Brovlpu: "ftqa4ok",
74
33
  B486eqv: "f2hkw1w",
@@ -100,16 +59,16 @@ const useStyles = /*#__PURE__*/__styles({
100
59
  B6dhp37: 0,
101
60
  Bf4ptjt: 0,
102
61
  Bqtpl0w: 0,
103
- i4rwgc: "f1xbuv65",
62
+ i4rwgc: "fpqizxz",
104
63
  Dah5zi: 0,
105
64
  B1tsrr9: 0,
106
65
  qqdqy8: 0,
107
66
  Bkh64rk: 0,
108
67
  e3fwne: "fnd8nzh",
109
- J0r882: "f1ja06rw",
110
- Bule8hv: ["f1fgi2v", "f13s1pi5"],
111
- Bjwuhne: "f5o6laa",
112
- Ghsupd: ["f13s1pi5", "f1fgi2v"]
68
+ J0r882: "f15fr7a0",
69
+ Bule8hv: ["fwsq40z", "fy0y4wt"],
70
+ Bjwuhne: "f34ld9f",
71
+ Ghsupd: ["fy0y4wt", "fwsq40z"]
113
72
  },
114
73
  selectableFocused: {
115
74
  Brovlpu: "ftqa4ok",
@@ -142,16 +101,16 @@ const useStyles = /*#__PURE__*/__styles({
142
101
  nr063g: 0,
143
102
  ghq09: 0,
144
103
  Bbgo44z: 0,
145
- Bseh09z: "f5o6rnv",
104
+ Bseh09z: "f1i978nd",
146
105
  az1dzo: 0,
147
106
  Ba3ybja: 0,
148
107
  B6352mv: 0,
149
108
  vppk2z: 0,
150
109
  Biaj6j7: "f1nh8hsq",
151
- B2pnrqr: "f1vngpbu",
152
- B29w5g4: ["f1pf2b7l", "fb1a886"],
153
- Bhhzhcn: "f1bquznm",
154
- Bec0n69: ["fb1a886", "f1pf2b7l"]
110
+ B2pnrqr: "f1amxum7",
111
+ B29w5g4: ["f1cec8w7", "f554mv0"],
112
+ Bhhzhcn: "f1sj6kbr",
113
+ Bec0n69: ["f554mv0", "f1cec8w7"]
155
114
  },
156
115
  orientationHorizontal: {
157
116
  Beiy3e4: "f1063pyq",
@@ -172,19 +131,22 @@ const useStyles = /*#__PURE__*/__styles({
172
131
  },
173
132
  sizeSmall: {
174
133
  B7balbw: "f1pi9uxy",
175
- B1h88n7: "f15mxzhv"
134
+ B1h88n7: "f1h1zgly"
176
135
  },
177
136
  sizeMedium: {
178
137
  B7balbw: "frsmuga",
179
- B1h88n7: "fw2n66"
138
+ B1h88n7: "fuldkky"
180
139
  },
181
140
  sizeLarge: {
182
141
  B7balbw: "f1qua4xo",
183
- B1h88n7: "f18zjdj0"
142
+ B1h88n7: "fimkt6v"
143
+ },
144
+ interactive: {
145
+ rhjd8f: "f1epqm3e"
184
146
  },
185
147
  filled: {
186
- De3pzq: "f1y5ql7n",
187
- E5pizo: "f1l2ude5",
148
+ De3pzq: "fxugw4r",
149
+ E5pizo: "f1whvlc6",
188
150
  B0n5ga8: "f16gxe2i",
189
151
  s924m2: ["fpgykix", "fzybk4o"],
190
152
  B1q35kw: "f1osi826",
@@ -192,27 +154,29 @@ const useStyles = /*#__PURE__*/__styles({
192
154
  },
193
155
  filledInteractive: {
194
156
  Bceei9c: "f1k6fduh",
195
- De3pzq: "fiekp45",
196
- E5pizo: "f7rwcsy",
157
+ De3pzq: "fxugw4r",
158
+ E5pizo: "f1whvlc6",
197
159
  B0n5ga8: "f16gxe2i",
198
160
  s924m2: ["fpgykix", "fzybk4o"],
199
161
  B1q35kw: "f1osi826",
200
162
  Gp14am: ["fzybk4o", "fpgykix"],
201
- Jwef8y: "f9iybsv",
202
- Bvxd0ez: "f1b9qmj4",
203
- ecr2s2: "fljdlzu"
163
+ Bi91k9c: "feu1g3u",
164
+ Jwef8y: "f1knas48",
165
+ Bvxd0ez: "f1m145df",
166
+ ecr2s2: "fb40n2d"
204
167
  },
205
168
  filledInteractiveSelected: {
206
- De3pzq: "f12vh31t",
169
+ De3pzq: "f1nfm20t",
207
170
  B0n5ga8: "f16eln5f",
208
171
  s924m2: ["fa2okxs", "fg4zq3l"],
209
172
  B1q35kw: "ff6932p",
210
173
  Gp14am: ["fg4zq3l", "fa2okxs"],
211
- Jwef8y: "fe4l7lm"
174
+ Bi91k9c: "fx9teim",
175
+ Jwef8y: "f1kz6goq"
212
176
  },
213
177
  filledAlternative: {
214
- De3pzq: "f145rpb8",
215
- E5pizo: "f1jrlzwb",
178
+ De3pzq: "f1dmdbja",
179
+ E5pizo: "f1whvlc6",
216
180
  B0n5ga8: "f16gxe2i",
217
181
  s924m2: ["fpgykix", "fzybk4o"],
218
182
  B1q35kw: "f1osi826",
@@ -220,26 +184,28 @@ const useStyles = /*#__PURE__*/__styles({
220
184
  },
221
185
  filledAlternativeInteractive: {
222
186
  Bceei9c: "f1k6fduh",
223
- De3pzq: "f1kgqpjs",
224
- E5pizo: "f1a2zne9",
187
+ De3pzq: "f1dmdbja",
188
+ E5pizo: "f1whvlc6",
225
189
  B0n5ga8: "f16gxe2i",
226
190
  s924m2: ["fpgykix", "fzybk4o"],
227
191
  B1q35kw: "f1osi826",
228
192
  Gp14am: ["fzybk4o", "fpgykix"],
229
- Jwef8y: "fqm50rs",
230
- Bvxd0ez: "fq5fk87",
231
- ecr2s2: "f15wjqsw"
193
+ Bi91k9c: "fnwyq0v",
194
+ Jwef8y: "f1uvynv3",
195
+ Bvxd0ez: "f1m145df",
196
+ ecr2s2: "f1yhgkbh"
232
197
  },
233
198
  filledAlternativeInteractiveSelected: {
234
- De3pzq: "flecxhl",
199
+ De3pzq: "fjxa0vh",
235
200
  B0n5ga8: "f16eln5f",
236
201
  s924m2: ["fa2okxs", "fg4zq3l"],
237
202
  B1q35kw: "ff6932p",
238
203
  Gp14am: ["fg4zq3l", "fa2okxs"],
239
- Jwef8y: "f1oin7as"
204
+ Bi91k9c: "f1luvkty",
205
+ Jwef8y: "fehi0vp"
240
206
  },
241
207
  outline: {
242
- De3pzq: "f11a8mzo",
208
+ De3pzq: "f1c21dwh",
243
209
  E5pizo: "f1couhl3",
244
210
  B0n5ga8: "ft83z1f",
245
211
  s924m2: ["f1g4150c", "f192dr6e"],
@@ -248,33 +214,35 @@ const useStyles = /*#__PURE__*/__styles({
248
214
  },
249
215
  outlineInteractive: {
250
216
  Bceei9c: "f1k6fduh",
251
- De3pzq: "f134r7n3",
217
+ De3pzq: "f1c21dwh",
252
218
  E5pizo: "f1couhl3",
253
219
  B0n5ga8: "ft83z1f",
254
220
  s924m2: ["f1g4150c", "f192dr6e"],
255
221
  B1q35kw: "f1qnawh6",
256
222
  Gp14am: ["f192dr6e", "f1g4150c"],
257
- Jwef8y: "frxoo8s",
223
+ Bi91k9c: "feu1g3u",
224
+ Jwef8y: "fjxutwb",
258
225
  Be0v6ae: "f1llr77y",
259
226
  B5kxglz: ["fzk0khw", "fjj8tog"],
260
227
  B3pwyw6: "fb1u8ub",
261
228
  Bymgtzf: ["fjj8tog", "fzk0khw"],
262
- ecr2s2: "f1djjq2p",
229
+ ecr2s2: "fophhak",
263
230
  dmfk: "f1uohb70",
264
231
  B4ofi8: ["f1jm7v1n", "f1bus3rq"],
265
232
  jgq6uv: "f1fbu7rr",
266
233
  Baxewws: ["f1bus3rq", "f1jm7v1n"]
267
234
  },
268
235
  outlineInteractiveSelected: {
269
- De3pzq: "f3jdprh",
236
+ De3pzq: "f1q9pm1r",
270
237
  B0n5ga8: "f16eln5f",
271
238
  s924m2: ["fa2okxs", "fg4zq3l"],
272
239
  B1q35kw: "ff6932p",
273
240
  Gp14am: ["fg4zq3l", "fa2okxs"],
274
- Jwef8y: "f1tbkf9f"
241
+ Bi91k9c: "fx9teim",
242
+ Jwef8y: "fg59vm4"
275
243
  },
276
244
  subtle: {
277
- De3pzq: "focdvv2",
245
+ De3pzq: "fhovq9v",
278
246
  E5pizo: "f1couhl3",
279
247
  B0n5ga8: "f16gxe2i",
280
248
  s924m2: ["fpgykix", "fzybk4o"],
@@ -283,22 +251,24 @@ const useStyles = /*#__PURE__*/__styles({
283
251
  },
284
252
  subtleInteractive: {
285
253
  Bceei9c: "f1k6fduh",
286
- De3pzq: "f1rfvwxm",
254
+ De3pzq: "fhovq9v",
287
255
  E5pizo: "f1couhl3",
288
256
  B0n5ga8: "f16gxe2i",
289
257
  s924m2: ["fpgykix", "fzybk4o"],
290
258
  B1q35kw: "f1osi826",
291
259
  Gp14am: ["fzybk4o", "fpgykix"],
292
- Jwef8y: "f1cdzzdq",
293
- ecr2s2: "fe89iq9"
260
+ Bi91k9c: "feu1g3u",
261
+ Jwef8y: "f1t94bn6",
262
+ ecr2s2: "f1wfn5kd"
294
263
  },
295
264
  subtleInteractiveSelected: {
296
- De3pzq: "f8hjf28",
265
+ De3pzq: "fq5gl1p",
297
266
  B0n5ga8: "f16eln5f",
298
267
  s924m2: ["fa2okxs", "fg4zq3l"],
299
268
  B1q35kw: "ff6932p",
300
269
  Gp14am: ["fg4zq3l", "fa2okxs"],
301
- Jwef8y: "f241ven"
270
+ Bi91k9c: "fx9teim",
271
+ Jwef8y: "f1uqaxdt"
302
272
  },
303
273
  highContrastSelected: {
304
274
  ycbfsm: "fkc42ay",
@@ -338,29 +308,19 @@ const useStyles = /*#__PURE__*/__styles({
338
308
  Huce71: "fz5stix"
339
309
  }
340
310
  }, {
341
- d: [[".f1a3p1vp{overflow:hidden;}", {
342
- p: -1
343
- }], [".flpxrij{border-radius:var(--fui-Card--border-radius);}", {
344
- p: -1
345
- }], [".fi54ll6{padding:var(--fui-Card--size);}", {
346
- p: -1
347
- }], [".fs0zar4{gap:var(--fui-Card--size);}", {
348
- p: -1
349
- }], ".f22iagw{display:flex;}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1py3b4z{color:var(--ctrl-token-Card-699, var(--semantic-token-Card-700, var(--colorNeutralForeground1)));}", ".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);}", [".fw3u9gn::after{border-radius:var(--fui-Card--border-radius);}", {
350
- p: -1
351
- }], ".fnk4z59>.fui-CardHeader,.fnk4z59>.fui-CardFooter{flex-shrink:0;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".f1xbuv65[data-fui-focus-visible]::after{border:var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) solid var(--colorStrokeFocus2);}", {
311
+ f: [".ftqa4ok:focus{outline-style:none;}"],
312
+ i: [".f2hkw1w:focus-visible{outline-style:none;}"],
313
+ d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".fpqizxz[data-fui-focus-visible]::after{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
352
314
  p: -2
353
315
  }], [".fnd8nzh[data-fui-focus-visible]::after{border-radius:var(--fui-Card--border-radius);}", {
354
316
  p: -1
355
- }], ".f1ja06rw[data-fui-focus-visible]::after{top:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f1fgi2v[data-fui-focus-visible]::after{right:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f13s1pi5[data-fui-focus-visible]::after{left:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f5o6laa[data-fui-focus-visible]::after{bottom:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", [".f5o6rnv[data-fui-focus-within]:focus-within::after{border:var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) solid var(--colorStrokeFocus2);}", {
317
+ }], ".f15fr7a0[data-fui-focus-visible]::after{top:calc(0px - var(--strokeWidthThick) - -2px);}", ".fwsq40z[data-fui-focus-visible]::after{right:calc(0px - var(--strokeWidthThick) - -2px);}", ".fy0y4wt[data-fui-focus-visible]::after{left:calc(0px - var(--strokeWidthThick) - -2px);}", ".f34ld9f[data-fui-focus-visible]::after{bottom:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", [".f1i978nd[data-fui-focus-within]:focus-within::after{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
356
318
  p: -2
357
319
  }], [".f1nh8hsq[data-fui-focus-within]:focus-within::after{border-radius:var(--fui-Card--border-radius);}", {
358
320
  p: -1
359
- }], ".f1vngpbu[data-fui-focus-within]:focus-within::after{top:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f1pf2b7l[data-fui-focus-within]:focus-within::after{right:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".fb1a886[data-fui-focus-within]:focus-within::after{left:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f1bquznm[data-fui-focus-within]:focus-within::after{bottom:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f1063pyq{flex-direction:row;}", ".f122n59{align-items:center;}", ".ftrw7vg>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f18opajm>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f13002it>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".fqo182t>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f18yna97>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1kd6wh7>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f4i4759>.fui-CardHeader:last-of-type,.f4i4759>.fui-CardFooter:last-of-type{flex-grow:1;}", ".f1vx9l62{flex-direction:column;}", ".f14k419y>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1fgo9fz>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".fvqmfsm>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".f3am6yf>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1r5wgso>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f15mxzhv{--fui-Card--border-radius:var(--ctrl-token-Card-701, var(--semantic-token-Card-702, var(--borderRadiusSmall)));}", ".frsmuga{--fui-Card--size:12px;}", ".fw2n66{--fui-Card--border-radius:var(--ctrl-token-Card-703, var(--semantic-token-Card-704, var(--borderRadiusMedium)));}", ".f1qua4xo{--fui-Card--size:16px;}", ".f18zjdj0{--fui-Card--border-radius:var(--ctrl-token-Card-705, var(--semantic-token-Card-706, var(--borderRadiusLarge)));}", ".f1y5ql7n{background-color:var(--ctrl-token-Card-707, var(--semantic-token-Card-708, var(--colorNeutralBackground1)));}", ".f1l2ude5{box-shadow:var(--ctrl-token-Card-709, var(--semantic-token-Card-710, 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);}", ".f1k6fduh{cursor:pointer;}", ".fiekp45{background-color:var(--ctrl-token-Card-711, var(--semantic-token-Card-712, var(--colorNeutralBackground1)));}", ".f7rwcsy{box-shadow:var(--ctrl-token-Card-713, var(--semantic-token-Card-714, var(--shadow4)));}", ".f12vh31t{background-color:var(--ctrl-token-Card-721, var(--semantic-token-Card-722, var(--colorNeutralBackground1Selected)));}", ".f16eln5f::after{border-top-color:var(--colorNeutralStroke1Selected);}", ".fa2okxs::after{border-right-color:var(--colorNeutralStroke1Selected);}", ".fg4zq3l::after{border-left-color:var(--colorNeutralStroke1Selected);}", ".ff6932p::after{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f145rpb8{background-color:var(--ctrl-token-Card-725, var(--semantic-token-Card-726, var(--colorNeutralBackground2)));}", ".f1jrlzwb{box-shadow:var(--ctrl-token-Card-727, var(--semantic-token-Card-728, var(--shadow4)));}", ".f1kgqpjs{background-color:var(--ctrl-token-Card-729, var(--semantic-token-Card-730, var(--colorNeutralBackground2)));}", ".f1a2zne9{box-shadow:var(--ctrl-token-Card-731, var(--semantic-token-Card-732, var(--shadow4)));}", ".flecxhl{background-color:var(--ctrl-token-Card-739, var(--semantic-token-Card-740, var(--colorNeutralBackground2Selected)));}", ".f11a8mzo{background-color:var(--ctrl-token-Card-743, var(--semantic-token-Card-744, 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);}", ".f134r7n3{background-color:var(--ctrl-token-Card-745, var(--semantic-token-Card-746, var(--colorTransparentBackground)));}", ".f3jdprh{background-color:var(--ctrl-token-Card-751, var(--semantic-token-Card-752, var(--colorTransparentBackgroundSelected)));}", ".focdvv2{background-color:var(--ctrl-token-Card-755, var(--semantic-token-Card-756, var(--colorSubtleBackground)));}", ".f1rfvwxm{background-color:var(--ctrl-token-Card-757, var(--semantic-token-Card-758, var(--colorSubtleBackground)));}", ".f8hjf28{background-color:var(--ctrl-token-Card-763, var(--semantic-token-Card-764, var(--colorSubtleBackgroundSelected)));}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".f19g0ac{z-index:1;}", [".f1a3p1vp{overflow:hidden;}", {
321
+ }], ".f1amxum7[data-fui-focus-within]:focus-within::after{top:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1cec8w7[data-fui-focus-within]:focus-within::after{right:calc(0px - var(--strokeWidthThick) - -2px);}", ".f554mv0[data-fui-focus-within]:focus-within::after{left:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1sj6kbr[data-fui-focus-within]:focus-within::after{bottom:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1063pyq{flex-direction:row;}", ".f122n59{align-items:center;}", ".ftrw7vg>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f18opajm>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f13002it>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".fqo182t>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f18yna97>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1kd6wh7>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f4i4759>.fui-CardHeader:last-of-type,.f4i4759>.fui-CardFooter:last-of-type{flex-grow:1;}", ".f1vx9l62{flex-direction:column;}", ".f14k419y>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1fgo9fz>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".fvqmfsm>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".f3am6yf>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1r5wgso>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}", ".f1epqm3e .fui-Text{color:currentColor;}", ".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);}", ".f1k6fduh{cursor:pointer;}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f16eln5f::after{border-top-color:var(--colorNeutralStroke1Selected);}", ".fa2okxs::after{border-right-color:var(--colorNeutralStroke1Selected);}", ".fg4zq3l::after{border-left-color:var(--colorNeutralStroke1Selected);}", ".ff6932p::after{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".fjxa0vh{background-color:var(--colorNeutralBackground2Selected);}", ".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);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".f19g0ac{z-index:1;}", [".f1a3p1vp{overflow:hidden;}", {
360
322
  p: -1
361
323
  }], ".frkrog8{width:1px;}", ".f1mpe4l3{height:1px;}", ".fmf1zke{clip:rect(0 0 0 0);}", ".f1wch0ki{clip-path:inset(50%);}", ".fz5stix{white-space:nowrap;}"],
362
- f: [".ftqa4ok:focus{outline-style:none;}"],
363
- i: [".f2hkw1w:focus-visible{outline-style:none;}"],
364
324
  m: [["@media (forced-colors: active){.f226i61[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
365
325
  m: "(forced-colors: active)"
366
326
  }], ["@media (forced-colors: active){.f13kzufm[data-fui-focus-visible]::after{border-right-color:Highlight;}.fsx75g8[data-fui-focus-visible]::after{border-left-color:Highlight;}}", {
@@ -396,8 +356,8 @@ const useStyles = /*#__PURE__*/__styles({
396
356
  }], ["@media (forced-colors: active){.fnn5dk0:hover .fui-CardPreview,.fnn5dk0 :active .fui-CardPreview,.fnn5dk0:hover .fui-CardFooter,.fnn5dk0 :active .fui-CardFooter{forced-color-adjust:auto;}}", {
397
357
  m: "(forced-colors: active)"
398
358
  }]],
399
- h: [".f9iybsv:hover{background-color:var(--ctrl-token-Card-715, var(--semantic-token-Card-716, var(--colorNeutralBackground1Hover)));}", ".f1b9qmj4:hover{box-shadow:var(--ctrl-token-Card-717, var(--semantic-token-Card-718, var(--shadow8)));}", ".fe4l7lm:hover{background-color:var(--ctrl-token-Card-723, var(--semantic-token-Card-724, var(--colorNeutralBackground1Selected)));}", ".fqm50rs:hover{background-color:var(--ctrl-token-Card-733, var(--semantic-token-Card-734, var(--colorNeutralBackground2Hover)));}", ".fq5fk87:hover{box-shadow:var(--ctrl-token-Card-735, var(--semantic-token-Card-736, var(--shadow8)));}", ".f1oin7as:hover{background-color:var(--ctrl-token-Card-741, var(--semantic-token-Card-742, var(--colorNeutralBackground2Selected)));}", ".frxoo8s:hover{background-color:var(--ctrl-token-Card-747, var(--semantic-token-Card-748, 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);}", ".f1tbkf9f:hover{background-color:var(--ctrl-token-Card-753, var(--semantic-token-Card-754, var(--colorTransparentBackgroundSelected)));}", ".f1cdzzdq:hover{background-color:var(--ctrl-token-Card-759, var(--semantic-token-Card-760, var(--colorSubtleBackgroundHover)));}", ".f241ven:hover{background-color:var(--ctrl-token-Card-765, var(--semantic-token-Card-766, var(--colorSubtleBackgroundSelected)));}"],
400
- a: [".fljdlzu:active{background-color:var(--ctrl-token-Card-719, var(--semantic-token-Card-720, var(--colorNeutralBackground1Pressed)));}", ".f15wjqsw:active{background-color:var(--ctrl-token-Card-737, var(--semantic-token-Card-738, var(--colorNeutralBackground2Pressed)));}", ".f1djjq2p:active{background-color:var(--ctrl-token-Card-749, var(--semantic-token-Card-750, 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);}", ".fe89iq9:active{background-color:var(--ctrl-token-Card-761, var(--semantic-token-Card-762, var(--colorSubtleBackgroundPressed)));}"]
359
+ h: [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".fx9teim:hover{color:var(--colorNeutralForeground1Selected);}", ".f1kz6goq:hover{background-color:var(--colorNeutralBackground1Selected);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".f1luvkty:hover{color:var(--colorNeutralForeground2Selected);}", ".fehi0vp:hover{background-color:var(--colorNeutralBackground2Selected);}", ".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);}", ".fg59vm4:hover{background-color:var(--colorTransparentBackgroundSelected);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
360
+ a: [".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);}"]
401
361
  });
402
362
  /**
403
363
  * Apply styling to the Card slots based on the state.
@@ -405,7 +365,8 @@ const useStyles = /*#__PURE__*/__styles({
405
365
  export const useCardStyles_unstable = state => {
406
366
  'use no memo';
407
367
 
408
- const styles = useStyles();
368
+ const resetStyles = useCardResetStyles();
369
+ const styles = useCardStyles();
409
370
  const orientationMap = {
410
371
  horizontal: styles.orientationHorizontal,
411
372
  vertical: styles.orientationVertical
@@ -443,11 +404,7 @@ export const useCardStyles_unstable = state => {
443
404
  }
444
405
  return styles.focused;
445
406
  }, [state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);
446
- state.root.className = mergeClasses(cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance],
447
- // Focus overrides
448
- focusedClassName,
449
- // High contrast overrides
450
- isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);
407
+ state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);
451
408
  if (state.floatingAction) {
452
409
  state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
453
410
  }