@fluentui/react-card 0.0.0-nightly-20220531-0421.1 → 0.0.0-nightly-20220607-0421.1

package/CHANGELOG.json

@@ -2,11 +2,62 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Tue, 31 May 2022 04:31:13 GMT",
-      "tag": "@fluentui/react-card_v0.0.0-nightly-20220531-0421.1",
-      "version": "0.0.0-nightly-20220531-0421.1",
+      "date": "Tue, 07 Jun 2022 04:34:23 GMT",
+      "tag": "@fluentui/react-card_v0.0.0-nightly-20220607-0421.1",
+      "version": "0.0.0-nightly-20220607-0421.1",
       "comments": {
         "prerelease": [
+          {
+            "author": "39736248+andrefcdias@users.noreply.github.com",
+            "package": "@fluentui/react-card",
+            "commit": "06030b7cbf61b157df4b2a203a456aca6380ea6b",
+            "comment": "feat: add `orientation` prop"
+          },
+          {
+            "author": "39736248+andrefcdias@users.noreply.github.com",
+            "package": "@fluentui/react-card",
+            "commit": "0a35ab4703e21e5f6763b17ed33a48ad3ae4409b",
+            "comment": "chore: add basic API documentation"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220607-0421.1",
+            "commit": "b264fd655a010e09847726c4b0481262f8f4a949"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220607-0421.1",
+            "commit": "b264fd655a010e09847726c4b0481262f8f4a949"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-text to v0.0.0-nightly-20220607-0421.1",
+            "commit": "b264fd655a010e09847726c4b0481262f8f4a949"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220607-0421.1",
+            "commit": "b264fd655a010e09847726c4b0481262f8f4a949"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 31 May 2022 21:28:36 GMT",
+      "tag": "@fluentui/react-card_v9.0.0-beta.18",
+      "version": "9.0.0-beta.18",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "39736248+andrefcdias@users.noreply.github.com",
+            "package": "@fluentui/react-card",
+            "commit": "8caa7bbfd4c5cb91324def7470a280ac9bf6dec8",
+            "comment": "feat: Add `size` property to control card padding and border radius"
+          },
           {
             "author": "olfedias@microsoft.com",
             "package": "@fluentui/react-card",
@@ -16,26 +67,32 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220531-0421.1",
-            "commit": "387c27574bf67b9a6eabd24706d59253c3f66487"
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
+            "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.13",
+            "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220531-0421.1",
-            "commit": "387c27574bf67b9a6eabd24706d59253c3f66487"
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
+            "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-text to v0.0.0-nightly-20220531-0421.1",
-            "commit": "387c27574bf67b9a6eabd24706d59253c3f66487"
+            "comment": "Bump @fluentui/react-text to v9.0.0-rc.11",
+            "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220531-0421.1",
-            "commit": "387c27574bf67b9a6eabd24706d59253c3f66487"
+            "comment": "Bump @fluentui/react-button to v9.0.0-rc.13",
+            "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,21 +1,37 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Tue, 31 May 2022 04:31:13 GMT and should not be manually modified.
+This log was last generated on Tue, 07 Jun 2022 04:34:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20220531-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220531-0421.1)
+## [0.0.0-nightly-20220607-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220607-0421.1)
 
-Tue, 31 May 2022 04:31:13 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.17..@fluentui/react-card_v0.0.0-nightly-20220531-0421.1)
+Tue, 07 Jun 2022 04:34:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.18..@fluentui/react-card_v0.0.0-nightly-20220607-0421.1)
 
 ### Changes
 
+- feat: add `orientation` prop ([PR #23037](https://github.com/microsoft/fluentui/pull/23037) by 39736248+andrefcdias@users.noreply.github.com)
+- chore: add basic API documentation ([PR #23410](https://github.com/microsoft/fluentui/pull/23410) by 39736248+andrefcdias@users.noreply.github.com)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220607-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b264fd655a010e09847726c4b0481262f8f4a949) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20220607-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b264fd655a010e09847726c4b0481262f8f4a949) by beachball)
+- Bump @fluentui/react-text to v0.0.0-nightly-20220607-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b264fd655a010e09847726c4b0481262f8f4a949) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20220607-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b264fd655a010e09847726c4b0481262f8f4a949) by beachball)
+
+## [9.0.0-beta.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.18)
+
+Tue, 31 May 2022 21:28:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.17..@fluentui/react-card_v9.0.0-beta.18)
+
+### Changes
+
+- feat: Add `size` property to control card padding and border radius ([PR #22915](https://github.com/microsoft/fluentui/pull/22915) by 39736248+andrefcdias@users.noreply.github.com)
 - chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20220531-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/387c27574bf67b9a6eabd24706d59253c3f66487) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220531-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/387c27574bf67b9a6eabd24706d59253c3f66487) by beachball)
-- Bump @fluentui/react-text to v0.0.0-nightly-20220531-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/387c27574bf67b9a6eabd24706d59253c3f66487) by beachball)
-- Bump @fluentui/react-button to v0.0.0-nightly-20220531-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/387c27574bf67b9a6eabd24706d59253c3f66487) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-text to v9.0.0-rc.11 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-button to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
 
 ## [9.0.0-beta.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.17)
 

package/Spec.md

@@ -105,7 +105,7 @@ Card goes for a more structural and generic approach to a card component and is
 | Property    | Values                                                                               | Default    | Purpose                                                                          |
 | ----------- | ------------------------------------------------------------------------------------ | ---------- | -------------------------------------------------------------------------------- |
 | orientation | `vertical`, `horizontal`                                                             | `vertical` | Orientation of the card                                                          |
-| size        | `smallest`, `smaller`, `small`, `medium`, `large`                                    | `medium`   | Define the minimum size of the card. Smaller sizes only apply to horizontal card |
+| size        | `small`, `medium`, `large`                                                           | `medium`   | Define the minimum size of the card. Smaller sizes only apply to horizontal card |
 | scale       | `fixed`, `auto-width`, `auto-height`, `auto`, `fluid-width`, `fluid-height`, `fluid` | `auto`     | Manages how the card handles it's scaling depending on the content               |
 | appearance  | `filled`, `filled-alternative`, `outline`, `subtle`                                  | `filled`   | Define the appearance of the card                                                |
 | selectable  | boolean                                                                              | false      | Makes the card selectable by adding a checkbox to the _Actions_ area             |

package/assets/logo.svg

@@ -0,0 +1,9 @@
+<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="192" height="192" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_8855_1044" transform="scale(0.00520833)"/>
+</pattern>
+<image id="image0_8855_1044" width="192" height="192" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

package/dist/index.d.ts

@@ -10,27 +10,49 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const Card: ForwardRefComponent<CardProps>;
 
+/**
+ * Static CSS class names used internally for the component slots.
+ */
 export declare const cardClassNames: SlotClassNames<CardSlots>;
 
+/**
+ * CSS variable names used internally for uniform styling in Card.
+ */
+export declare const cardCSSVars: {
+    cardSizeVar: string;
+};
+
 /**
  * Component to render Button actions in a Card component.
  */
 export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
 
+/**
+ * Static CSS class names used internally for the component slots.
+ */
 export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
 
 /**
- * CardFooter props
+ * CardFooter component props.
  */
 export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
 
+/**
+ * Slots available in the CardFooter component.
+ */
 export declare type CardFooterSlots = {
+    /**
+     * Root element of the component.
+     */
     root: Slot<'div'>;
+    /**
+     * Container that renders on the far end of the footer, used for action buttons.
+     */
     action?: Slot<'div'>;
 };
 
 /**
- * State used in rendering CardFooter
+ * State used in rendering CardFooter.
  */
 export declare type CardFooterState = ComponentState<CardFooterSlots>;
 
@@ -39,24 +61,48 @@ export declare type CardFooterState = ComponentState<CardFooterSlots>;
  */
 export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;
 
+/**
+ * Static CSS class names used internally for the component slots.
+ */
 export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
 
 /**
- * CardHeader props
+ * CardHeader component props.
  */
 export declare type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
 
+/**
+ * Slots available in the CardHeader component.
+ */
 export declare type CardHeaderSlots = {
+    /**
+     * Root element of the component.
+     */
     root: Slot<'div'>;
+    /**
+     * Element used to render an image or avatar related to the card.
+     */
     image: Slot<'div'>;
+    /**
+     * Parent container of the header and description slots.
+     */
     content?: Slot<'div'>;
+    /**
+     * Element used to render the main header title.
+     */
     header: Slot<'span'>;
+    /**
+     * Element used to render short descriptions related to the title.
+     */
     description: Slot<'span'>;
+    /**
+     * Container that renders on the far end of the footer, used for action buttons.
+     */
     action?: Slot<'div'>;
 };
 
 /**
- * State used in rendering CardHeader
+ * State used in rendering CardHeader.
  */
 export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
 
@@ -65,25 +111,37 @@ export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
  */
 export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;
 
+/**
+ * Static CSS class names used internally for the component slots.
+ */
 export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
 
 /**
- * CardPreview props
+ * CardPreview component props.
  */
 export declare type CardPreviewProps = ComponentProps<CardPreviewSlots>;
 
+/**
+ * Slots available in the Card component.
+ */
 export declare type CardPreviewSlots = {
+    /**
+     * Root element of the component.
+     */
     root: Slot<'div'>;
+    /**
+     * Container that holds a logo related to the image preview provided.
+     */
     logo?: Slot<'div'>;
 };
 
 /**
- * State used in rendering CardPreview
+ * State used in rendering CardPreview.
  */
 export declare type CardPreviewState = ComponentState<CardPreviewSlots>;
 
 /**
- * Card Props
+ * Card component props.
  */
 export declare type CardProps = ComponentProps<CardSlots> & {
     appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
@@ -105,37 +163,55 @@ export declare type CardProps = ComponentProps<CardSlots> & {
      * 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
+     * @default 'off'
      */
     focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
+    /**
+     * Defines the orientation of the card.
+     *
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Controls the card's border radius and padding between inner elements.
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
 };
 
+/**
+ * Slots available in the Card component.
+ */
 export declare type CardSlots = {
+    /**
+     * Root element of the component.
+     */
     root: Slot<'div'>;
 };
 
 /**
- * State used in rendering Card
+ * State used in rendering Card.
  */
-export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance'>>;
+export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'>>;
 
 /**
- * Render the final JSX of Card
+ * Render the final JSX of Card.
  */
 export declare const renderCard_unstable: (state: CardState) => JSX.Element;
 
 /**
- * Render the final JSX of CardFooter
+ * Render the final JSX of CardFooter.
  */
 export declare const renderCardFooter_unstable: (state: CardFooterState) => JSX.Element;
 
 /**
- * Render the final JSX of CardHeader
+ * Render the final JSX of CardHeader.
  */
 export declare const renderCardHeader_unstable: (state: CardHeaderState) => JSX.Element;
 
 /**
- * Render the final JSX of CardPreview
+ * Render the final JSX of CardPreview.
  */
 export declare const renderCardPreview_unstable: (state: CardPreviewState) => JSX.Element;
 
@@ -162,7 +238,7 @@ export declare const useCard_unstable: (props: CardProps, ref: React_2.Ref<HTMLE
 export declare const useCardFooter_unstable: (props: CardFooterProps, ref: React_2.Ref<HTMLElement>) => CardFooterState;
 
 /**
- * Apply styling to the CardFooter slots based on the state
+ * Apply styling to the CardFooter slots based on the state.
  */
 export declare const useCardFooterStyles_unstable: (state: CardFooterState) => CardFooterState;
 
@@ -178,7 +254,7 @@ export declare const useCardFooterStyles_unstable: (state: CardFooterState) => C
 export declare const useCardHeader_unstable: (props: CardHeaderProps, ref: React_2.Ref<HTMLElement>) => CardHeaderState;
 
 /**
- * Apply styling to the CardHeader slots based on the state
+ * Apply styling to the CardHeader slots based on the state.
  */
 export declare const useCardHeaderStyles_unstable: (state: CardHeaderState) => CardHeaderState;
 
@@ -194,12 +270,12 @@ export declare const useCardHeaderStyles_unstable: (state: CardHeaderState) => C
 export declare const useCardPreview_unstable: (props: CardPreviewProps, ref: React_2.Ref<HTMLElement>) => CardPreviewState;
 
 /**
- * Apply styling to the CardPreview slots based on the state
+ * Apply styling to the CardPreview slots based on the state.
  */
 export declare const useCardPreviewStyles_unstable: (state: CardPreviewState) => CardPreviewState;
 
 /**
- * Apply styling to the Card slots based on the state
+ * Apply styling to the Card slots based on the state.
  */
 export declare const useCardStyles_unstable: (state: CardState) => CardState;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;AAEA,EAAA,sBAAsB,CAAC,KAAD,CAAtB;AACA,SAAO,mBAAmB,CAAC,KAAD,CAA1B;AACD,CALmD,CAA7C;AAOP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef((props, ref) => {\n  const state = useCard_unstable(props, ref);\n\n  useCardStyles_unstable(state);\n  return renderCard_unstable(state);\n});\n\nCard.displayName = 'Card';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClF,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;EAEA,sBAAsB,CAAC,KAAD,CAAtB;EACA,OAAO,mBAAmB,CAAC,KAAD,CAA1B;AACD,CALmD,CAA7C;AAOP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef((props, ref) => {\n  const state = useCard_unstable(props, ref);\n\n  useCardStyles_unstable(state);\n  return renderCard_unstable(state);\n});\n\nCard.displayName = 'Card';\n"],"sourceRoot":"../src/"}

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\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"]}
+{"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\n/**\n * Slots available in the Card component.\n */\nexport type CardSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * Card component 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   * @default 'off'\n   */\n  focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n  /**\n   * Defines the orientation of the card.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n\n  /**\n   * Controls the card's border radius and padding between inner elements.\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'>>;\n"]}

package/lib/components/Card/renderCard.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 /**
- * Render the final JSX of Card
+ * Render the final JSX of Card.
  */
 
 export const renderCard_unstable = state => {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Card/renderCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAqB;AACtD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAY,KAAZ,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Render the final JSX of Card\n */\nexport const renderCard_unstable = (state: CardState) => {\n  const { slots, slotProps } = getSlots<CardSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Card/renderCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAqB;EACtD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAY,KAAZ,CAArC;EAEA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState) => {\n  const { slots, slotProps } = getSlots<CardSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Card/useCard.js

@@ -13,7 +13,9 @@ import { useFocusableGroup } from '@fluentui/react-tabster';
 export const useCard_unstable = (props, ref) => {
   const {
     appearance = 'filled',
-    focusMode = 'off'
+    focusMode = 'off',
+    orientation = 'vertical',
+    size = 'medium'
   } = props;
   const focusMap = {
     off: undefined,
@@ -30,6 +32,8 @@ export const useCard_unstable = (props, ref) => {
   } : null;
   return {
     appearance,
+    orientation,
+    size,
     components: {
       root: 'div'
     },

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;AAAE,IAAA,UAAU,GAAG,QAAf;AAAyB,IAAA,SAAS,GAAG;AAArC,MAA+C,KAArD;AAEA,QAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,SADU;AAEf,cAAU,oBAFK;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': 'limited-trap-focus',\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/"}
+{"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;EAC3F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,SAAS,GAAG,KAArC;IAA4C,WAAW,GAAG,UAA1D;IAAsE,IAAI,GAAG;EAA7E,IAA0F,KAAhG;EAEA,MAAM,QAAQ,GAAG;IACf,GAAG,EAAE,SADU;IAEf,UAAU,oBAFK;IAGf,YAAY,SAHG;IAIf,YAAY;EAJG,CAAjB;EAOA,MAAM,aAAa,GAAG,iBAAiB,CAAC;IACtC,WAAW,EAAE,QAAQ,CAAC,SAAD;EADiB,CAAD,CAAvC;EAIA,MAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;IAAE,QAAQ,EAAE,CAAZ;IAAe,GAAG;EAAlB,CAAtB,GAA0D,IAA7E;EAEA,OAAO;IACL,UADK;IAEL,WAFK;IAGL,IAHK;IAKL,UAAU,EAAE;MAAE,IAAI,EAAE;IAAR,CALP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;MAC7C,GAD6C;MAE7C,IAAI,EAAE,OAFuC;MAG7C,GAAG,UAH0C;MAI7C,GAAG;IAJ0C,CAApB;EANtB,CAAP;AAaD,CA7BM","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', orientation = 'vertical', size = 'medium' } = props;\n\n  const focusMap = {\n    off: undefined,\n    'no-tab': 'limited-trap-focus',\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    orientation,\n    size,\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/"}