@fpkit/acss 0.5.12 → 0.6.0

package/libs/components/card.d.cts

@@ -1,56 +1,300 @@
-import React__default from 'react';
-import { F as FP } from '../ui-9a6f9f8d.js';
+import React from 'react';
+import { U as UI } from '../ui-d01b50d4.js';
 
-type CardProps = {
-    elm?: 'div' | 'aside' | 'section' | 'article';
-    title?: React__default.ReactNode;
-    footer?: React__default.ReactNode;
-} & React__default.ComponentProps<typeof FP>;
+/**
+ * Base props shared across all Card sub-components.
+ *
+ * This interface provides common styling and structural props
+ * that all Card sub-components support.
+ */
+interface CardSubComponentProps {
+    /** CSS class names to apply */
+    className?: string;
+    /** Inline styles to apply */
+    style?: React.CSSProperties;
+    /** Child elements to render */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the Card.Title sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardTitleProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * @default 'h3'
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * HTML id attribute for the title.
+     * Useful for aria-labelledby references.
+     */
+    id?: string;
+}
+/**
+ * Props for the Card.Content sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardContentProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * Use 'article' for standalone content, 'div' for generic containers.
+     * @default 'article'
+     */
+    as?: 'article' | 'div' | 'section';
+}
+/**
+ * Props for the Card.Footer sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardFooterProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * @default 'div'
+     */
+    as?: 'div' | 'footer';
+}
+/**
+ * Props for the main Card component.
+ *
+ * Extends all props from the UI component while adding Card-specific functionality.
+ * Supports polymorphic rendering via the `as` prop.
+ *
+ * @extends React.ComponentProps<typeof UI>
+ */
+interface CardProps extends React.ComponentProps<typeof UI> {
+    /**
+     * HTML element to render the Card as.
+     * Inherits from UI component's polymorphic `as` prop.
+     * @default 'div'
+     */
+    as?: React.ElementType;
+    /**
+     * ARIA role for the card.
+     * Use 'article' for standalone content, 'region' with aria-label for landmarks.
+     * @example
+     * ```tsx
+     * <Card role="article">...</Card>
+     * <Card role="region" aria-label="User profile">...</Card>
+     * ```
+     */
+    role?: string;
+    /**
+     * Accessible label for the card.
+     * Required when using interactive cards or role="region".
+     * @example
+     * ```tsx
+     * <Card role="region" aria-label="Featured products">...</Card>
+     * ```
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element that labels this card.
+     * @example
+     * ```tsx
+     * <Card aria-labelledby="card-title-1">
+     *   <Card.Title id="card-title-1">Title</Card.Title>
+     * </Card>
+     * ```
+     */
+    'aria-labelledby'?: string;
+    /**
+     * ID of element that describes this card.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Makes the card interactive with keyboard support.
+     * Adds tabIndex, role="button", and keyboard event handlers.
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Click handler for interactive cards.
+     * When provided without `interactive`, a warning will be logged in development.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Tab index for keyboard navigation.
+     * Automatically set to 0 when `interactive` is true.
+     */
+    tabIndex?: number;
+}
+
+/**
+ * Card.Title - Title sub-component for Card
+ *
+ * Renders a heading element for the card title. Defaults to h3 for proper
+ * document outline, but can be customized via the `as` prop.
+ *
+ * ## Accessibility
+ * - Use appropriate heading level based on document structure
+ * - Combine with `aria-labelledby` on parent Card for accessible names
+ *
+ * @example
+ * ```tsx
+ * <Card aria-labelledby="card-title-1">
+ *   <Card.Title id="card-title-1">Featured Product</Card.Title>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom heading level
+ * <Card.Title as="h2">Section Title</Card.Title>
+ * ```
+ */
 declare const Title: {
-    ({ children, className, styles, as, ...props }: React__default.PropsWithChildren<{
-        className?: string | undefined;
-        styles?: React__default.CSSProperties | undefined;
-        as?: React__default.ElementType<any> | undefined;
-    }>): React__default.JSX.Element;
+    ({ children, className, style, as, ...props }: CardTitleProps): React.JSX.Element;
     displayName: string;
 };
+/**
+ * Card.Content - Content sub-component for Card
+ *
+ * Renders the main content area of the card. Defaults to `<article>` for
+ * standalone content, but can be changed to `div` or `section` via the `as` prop.
+ *
+ * ## Semantic HTML Guidelines
+ * - Use `article` (default) for self-contained, syndicate-able content
+ * - Use `div` for generic content containers
+ * - Use `section` for thematic groupings with a heading
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Article Title</Card.Title>
+ *   <Card.Content>
+ *     <p>This is standalone content...</p>
+ *   </Card.Content>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Generic container (not standalone content)
+ * <Card.Content as="div">
+ *   <p>Generic content...</p>
+ * </Card.Content>
+ * ```
+ */
 declare const Content: {
-    ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
-        className?: string | undefined;
-        styles?: React__default.CSSProperties | undefined;
-    }>): React__default.JSX.Element;
+    ({ children, className, style, as, ...props }: CardContentProps): React.JSX.Element;
     displayName: string;
 };
+/**
+ * Card.Footer - Footer sub-component for Card
+ *
+ * Renders a footer section for the card. Use for actions, metadata, or
+ * supplementary information.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Product</Card.Title>
+ *   <Card.Content>Description...</Card.Content>
+ *   <Card.Footer>
+ *     <button>Add to Cart</button>
+ *     <span>$29.99</span>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Semantic footer element
+ * <Card.Footer as="footer">
+ *   <p>Last updated: 2024-01-15</p>
+ * </Card.Footer>
+ * ```
+ */
 declare const Footer: {
-    ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
-        className?: string | undefined;
-        styles?: React__default.CSSProperties | undefined;
-    }>): React__default.JSX.Element;
+    ({ children, className, style, as, ...props }: CardFooterProps): React.JSX.Element;
     displayName: string;
 };
+/**
+ * Card - A flexible, accessible card component with compound component pattern
+ *
+ * The Card component provides a container for grouping related content and actions.
+ * It follows the compound component pattern, exposing `Card.Title`, `Card.Content`,
+ * and `Card.Footer` sub-components for structured layouts.
+ *
+ * ## Features
+ * - **Polymorphic rendering**: Render as any HTML element via `as` prop
+ * - **Compound components**: Structured sub-components for consistent layouts
+ * - **Interactive variant**: Built-in keyboard navigation and ARIA support
+ * - **Fully accessible**: WCAG 2.1 AA compliant with proper semantic HTML
+ *
+ * ## Accessibility
+ *
+ * ### Non-Interactive Cards
+ * - Use semantic HTML: `article` for standalone content, `section` for groupings
+ * - Provide accessible names with `aria-labelledby` referencing the title
+ *
+ * ### Interactive Cards (Clickable)
+ * - Set `interactive={true}` to enable keyboard navigation (Enter/Space)
+ * - Provide accessible name via `aria-label` or `aria-labelledby`
+ * - Ensure adequate focus indicators (handled by CSS)
+ *
+ * @example
+ * // Basic card with compound components
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Product Name</Card.Title>
+ *   <Card.Content>
+ *     <p>Product description goes here...</p>
+ *   </Card.Content>
+ *   <Card.Footer>
+ *     <button>Buy Now</button>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ *
+ * @example
+ * // Accessible interactive card
+ * ```tsx
+ * <Card
+ *   interactive
+ *   aria-label="View product details"
+ *   onClick={() => navigate('/product/123')}
+ * >
+ *   <Card.Title>Product Name</Card.Title>
+ *   <Card.Content>Click anywhere to view details</Card.Content>
+ * </Card>
+ * ```
+ *
+ * @example
+ * // Semantic article card with accessible name
+ * ```tsx
+ * <Card as="article" aria-labelledby="article-title">
+ *   <Card.Title id="article-title">Article Headline</Card.Title>
+ *   <Card.Content>Article body...</Card.Content>
+ * </Card>
+ * ```
+ *
+ * @example
+ * // Card as a landmark region
+ * ```tsx
+ * <Card role="region" aria-label="Featured products">
+ *   <Card.Title>Featured</Card.Title>
+ *   <Card.Content>...</Card.Content>
+ * </Card>
+ * ```
+ */
 declare const Card: {
-    ({ elm, styles, children, classes, id, ...props }: CardProps): React__default.JSX.Element;
+    ({ as, styles, children, classes, id, interactive, onClick, tabIndex, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: CardProps): React.JSX.Element;
     displayName: string;
     Title: {
-        ({ children, className, styles, as, ...props }: React__default.PropsWithChildren<{
-            className?: string | undefined;
-            styles?: React__default.CSSProperties | undefined;
-            as?: React__default.ElementType<any> | undefined;
-        }>): React__default.JSX.Element;
+        ({ children, className, style, as, ...props }: CardTitleProps): React.JSX.Element;
         displayName: string;
     };
     Content: {
-        ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
-            className?: string | undefined;
-            styles?: React__default.CSSProperties | undefined;
-        }>): React__default.JSX.Element;
+        ({ children, className, style, as, ...props }: CardContentProps): React.JSX.Element;
         displayName: string;
     };
     Footer: {
-        ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
-            className?: string | undefined;
-            styles?: React__default.CSSProperties | undefined;
-        }>): React__default.JSX.Element;
+        ({ children, className, style, as, ...props }: CardFooterProps): React.JSX.Element;
         displayName: string;
     };
 };

package/libs/components/card.d.ts

@@ -1,56 +1,300 @@
-import React__default from 'react';
-import { F as FP } from '../ui-9a6f9f8d.js';
+import React from 'react';
+import { U as UI } from '../ui-d01b50d4.js';
 
-type CardProps = {
-    elm?: 'div' | 'aside' | 'section' | 'article';
-    title?: React__default.ReactNode;
-    footer?: React__default.ReactNode;
-} & React__default.ComponentProps<typeof FP>;
+/**
+ * Base props shared across all Card sub-components.
+ *
+ * This interface provides common styling and structural props
+ * that all Card sub-components support.
+ */
+interface CardSubComponentProps {
+    /** CSS class names to apply */
+    className?: string;
+    /** Inline styles to apply */
+    style?: React.CSSProperties;
+    /** Child elements to render */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the Card.Title sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardTitleProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * @default 'h3'
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * HTML id attribute for the title.
+     * Useful for aria-labelledby references.
+     */
+    id?: string;
+}
+/**
+ * Props for the Card.Content sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardContentProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * Use 'article' for standalone content, 'div' for generic containers.
+     * @default 'article'
+     */
+    as?: 'article' | 'div' | 'section';
+}
+/**
+ * Props for the Card.Footer sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardFooterProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * @default 'div'
+     */
+    as?: 'div' | 'footer';
+}
+/**
+ * Props for the main Card component.
+ *
+ * Extends all props from the UI component while adding Card-specific functionality.
+ * Supports polymorphic rendering via the `as` prop.
+ *
+ * @extends React.ComponentProps<typeof UI>
+ */
+interface CardProps extends React.ComponentProps<typeof UI> {
+    /**
+     * HTML element to render the Card as.
+     * Inherits from UI component's polymorphic `as` prop.
+     * @default 'div'
+     */
+    as?: React.ElementType;
+    /**
+     * ARIA role for the card.
+     * Use 'article' for standalone content, 'region' with aria-label for landmarks.
+     * @example
+     * ```tsx
+     * <Card role="article">...</Card>
+     * <Card role="region" aria-label="User profile">...</Card>
+     * ```
+     */
+    role?: string;
+    /**
+     * Accessible label for the card.
+     * Required when using interactive cards or role="region".
+     * @example
+     * ```tsx
+     * <Card role="region" aria-label="Featured products">...</Card>
+     * ```
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element that labels this card.
+     * @example
+     * ```tsx
+     * <Card aria-labelledby="card-title-1">
+     *   <Card.Title id="card-title-1">Title</Card.Title>
+     * </Card>
+     * ```
+     */
+    'aria-labelledby'?: string;
+    /**
+     * ID of element that describes this card.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Makes the card interactive with keyboard support.
+     * Adds tabIndex, role="button", and keyboard event handlers.
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Click handler for interactive cards.
+     * When provided without `interactive`, a warning will be logged in development.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Tab index for keyboard navigation.
+     * Automatically set to 0 when `interactive` is true.
+     */
+    tabIndex?: number;
+}
+
+/**
+ * Card.Title - Title sub-component for Card
+ *
+ * Renders a heading element for the card title. Defaults to h3 for proper
+ * document outline, but can be customized via the `as` prop.
+ *
+ * ## Accessibility
+ * - Use appropriate heading level based on document structure
+ * - Combine with `aria-labelledby` on parent Card for accessible names
+ *
+ * @example
+ * ```tsx
+ * <Card aria-labelledby="card-title-1">
+ *   <Card.Title id="card-title-1">Featured Product</Card.Title>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom heading level
+ * <Card.Title as="h2">Section Title</Card.Title>
+ * ```
+ */
 declare const Title: {
-    ({ children, className, styles, as, ...props }: React__default.PropsWithChildren<{
-        className?: string | undefined;
-        styles?: React__default.CSSProperties | undefined;
-        as?: React__default.ElementType<any> | undefined;
-    }>): React__default.JSX.Element;
+    ({ children, className, style, as, ...props }: CardTitleProps): React.JSX.Element;
     displayName: string;
 };
+/**
+ * Card.Content - Content sub-component for Card
+ *
+ * Renders the main content area of the card. Defaults to `<article>` for
+ * standalone content, but can be changed to `div` or `section` via the `as` prop.
+ *
+ * ## Semantic HTML Guidelines
+ * - Use `article` (default) for self-contained, syndicate-able content
+ * - Use `div` for generic content containers
+ * - Use `section` for thematic groupings with a heading
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Article Title</Card.Title>
+ *   <Card.Content>
+ *     <p>This is standalone content...</p>
+ *   </Card.Content>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Generic container (not standalone content)
+ * <Card.Content as="div">
+ *   <p>Generic content...</p>
+ * </Card.Content>
+ * ```
+ */
 declare const Content: {
-    ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
-        className?: string | undefined;
-        styles?: React__default.CSSProperties | undefined;
-    }>): React__default.JSX.Element;
+    ({ children, className, style, as, ...props }: CardContentProps): React.JSX.Element;
     displayName: string;
 };
+/**
+ * Card.Footer - Footer sub-component for Card
+ *
+ * Renders a footer section for the card. Use for actions, metadata, or
+ * supplementary information.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Product</Card.Title>
+ *   <Card.Content>Description...</Card.Content>
+ *   <Card.Footer>
+ *     <button>Add to Cart</button>
+ *     <span>$29.99</span>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Semantic footer element
+ * <Card.Footer as="footer">
+ *   <p>Last updated: 2024-01-15</p>
+ * </Card.Footer>
+ * ```
+ */
 declare const Footer: {
-    ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
-        className?: string | undefined;
-        styles?: React__default.CSSProperties | undefined;
-    }>): React__default.JSX.Element;
+    ({ children, className, style, as, ...props }: CardFooterProps): React.JSX.Element;
     displayName: string;
 };
+/**
+ * Card - A flexible, accessible card component with compound component pattern
+ *
+ * The Card component provides a container for grouping related content and actions.
+ * It follows the compound component pattern, exposing `Card.Title`, `Card.Content`,
+ * and `Card.Footer` sub-components for structured layouts.
+ *
+ * ## Features
+ * - **Polymorphic rendering**: Render as any HTML element via `as` prop
+ * - **Compound components**: Structured sub-components for consistent layouts
+ * - **Interactive variant**: Built-in keyboard navigation and ARIA support
+ * - **Fully accessible**: WCAG 2.1 AA compliant with proper semantic HTML
+ *
+ * ## Accessibility
+ *
+ * ### Non-Interactive Cards
+ * - Use semantic HTML: `article` for standalone content, `section` for groupings
+ * - Provide accessible names with `aria-labelledby` referencing the title
+ *
+ * ### Interactive Cards (Clickable)
+ * - Set `interactive={true}` to enable keyboard navigation (Enter/Space)
+ * - Provide accessible name via `aria-label` or `aria-labelledby`
+ * - Ensure adequate focus indicators (handled by CSS)
+ *
+ * @example
+ * // Basic card with compound components
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Product Name</Card.Title>
+ *   <Card.Content>
+ *     <p>Product description goes here...</p>
+ *   </Card.Content>
+ *   <Card.Footer>
+ *     <button>Buy Now</button>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ *
+ * @example
+ * // Accessible interactive card
+ * ```tsx
+ * <Card
+ *   interactive
+ *   aria-label="View product details"
+ *   onClick={() => navigate('/product/123')}
+ * >
+ *   <Card.Title>Product Name</Card.Title>
+ *   <Card.Content>Click anywhere to view details</Card.Content>
+ * </Card>
+ * ```
+ *
+ * @example
+ * // Semantic article card with accessible name
+ * ```tsx
+ * <Card as="article" aria-labelledby="article-title">
+ *   <Card.Title id="article-title">Article Headline</Card.Title>
+ *   <Card.Content>Article body...</Card.Content>
+ * </Card>
+ * ```
+ *
+ * @example
+ * // Card as a landmark region
+ * ```tsx
+ * <Card role="region" aria-label="Featured products">
+ *   <Card.Title>Featured</Card.Title>
+ *   <Card.Content>...</Card.Content>
+ * </Card>
+ * ```
+ */
 declare const Card: {
-    ({ elm, styles, children, classes, id, ...props }: CardProps): React__default.JSX.Element;
+    ({ as, styles, children, classes, id, interactive, onClick, tabIndex, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: CardProps): React.JSX.Element;
     displayName: string;
     Title: {
-        ({ children, className, styles, as, ...props }: React__default.PropsWithChildren<{
-            className?: string | undefined;
-            styles?: React__default.CSSProperties | undefined;
-            as?: React__default.ElementType<any> | undefined;
-        }>): React__default.JSX.Element;
+        ({ children, className, style, as, ...props }: CardTitleProps): React.JSX.Element;
         displayName: string;
     };
     Content: {
-        ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
-            className?: string | undefined;
-            styles?: React__default.CSSProperties | undefined;
-        }>): React__default.JSX.Element;
+        ({ children, className, style, as, ...props }: CardContentProps): React.JSX.Element;
         displayName: string;
     };
     Footer: {
-        ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
-            className?: string | undefined;
-            styles?: React__default.CSSProperties | undefined;
-        }>): React__default.JSX.Element;
+        ({ children, className, style, as, ...props }: CardFooterProps): React.JSX.Element;
         displayName: string;
     };
 };

package/libs/components/card.js

@@ -1,4 +1,4 @@
-export { d as Card, b as Content, c as Footer, a as Title, e as default } from '../chunk-BSPKFLO4.js';
-import '../chunk-NE6YXTMC.js';
+export { d as Card, b as Content, c as Footer, a as Title, e as default } from '../chunk-KK47SYZI.js';
+import '../chunk-HHLNOC5T.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=card.js.map

package/libs/components/cards/card.css

@@ -1 +1 @@
-:root{--card-p: 2rem;--card-bg: #fff;--card-radius: calc(var(--card-p) / 4);--card-position: relative;--card-display: flex;--card-direction: column;--card-gap: 1rem}[data-card],[data-component~=card]{display:var(--card-display);flex-direction:var(--card-direction);gap:var(--card-gap);border-radius:var(--card-radius);background-color:var(--card-bg);text-align:var(--card-align, left)}[data-card] h3,[data-card] h2,[data-component~=card] h3,[data-component~=card] h2{margin-block-end:0;padding-block-end:0}[data-card]+div,[data-component~=card]+div{margin-block-start:0}[data-card]>article,[data-component~=card]>article{display:flex;flex-direction:column;flex:2}[data-card]>*:not(img),[data-component~=card]>*:not(img){padding-inline:var(--card-p)}[data-card]>*:last-child:not(img),[data-component~=card]>*:last-child:not(img){padding-block-end:var(--card-p)}[data-card]>*:first-child:not(img),[data-component~=card]>*:first-child:not(img){padding-block-start:calc(var(--card-p) - .5rem)}/*# sourceMappingURL=card.css.map */
+:root{--card-p: 2rem;--card-bg: #fff;--card-radius: calc(var(--card-p) / 4);--card-position: relative;--card-display: flex;--card-direction: column;--card-gap: 1rem}[data-card],[data-component~=card]{display:var(--card-display);flex-direction:var(--card-direction);gap:var(--card-gap);border-radius:var(--card-radius);background-color:var(--card-bg);text-align:var(--card-align, left)}[data-card] h3,[data-card] h2,[data-component~=card] h3,[data-component~=card] h2{margin-block-end:0;padding-block-end:0}[data-card]+div,[data-component~=card]+div{margin-block-start:0}[data-card]>article,[data-component~=card]>article{display:flex;flex-direction:column;flex:2}[data-card]>*:not(img),[data-component~=card]>*:not(img){padding-inline:var(--card-p)}[data-card]>*:last-child:not(img),[data-component~=card]>*:last-child:not(img){padding-block-end:var(--card-p)}[data-card]>*:first-child:not(img),[data-component~=card]>*:first-child:not(img){padding-block-start:calc(var(--card-p) - .5rem)}[data-card=interactive]{cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}[data-card=interactive]:hover{transform:translateY(-2px);box-shadow:0 .25rem .75rem rgba(0,0,0,.15)}[data-card=interactive]:focus-visible{outline:.125rem solid var(--focus-color, #0066CC);outline-offset:.125rem}[data-card=interactive]:focus:not(:focus-visible){outline:none}/*# sourceMappingURL=card.css.map */

package/libs/components/cards/card.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/cards/card.scss"],"names":[],"mappings":"AAAA,MACE,eACA,gBACA,uCACA,0BACA,qBACA,yBACA,iBAGF,mCAEE,4BACA,qCACA,oBACA,iCACA,gCACA,mCAEA,kFAEE,mBACA,oBAEF,2CACE,qBAEF,mDACE,aACA,sBACA,OAGF,yDACE,6BAEF,+EAEE,gCAEF,iFACE","file":"card.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/cards/card.scss"],"names":[],"mappings":"AAAA,MACE,eACA,gBACA,uCACA,0BACA,qBACA,yBACA,iBAGF,mCAEE,4BACA,qCACA,oBACA,iCACA,gCACA,mCAEA,kFAEE,mBACA,oBAEF,2CACE,qBAEF,mDACE,aACA,sBACA,OAGF,yDACE,6BAEF,+EAEE,gCAEF,iFACE,gDAKJ,wBACE,eACA,kDAEA,8BACE,2BACA,2CAIF,sCACE,kDACA,uBAIF,kDACE","file":"card.css"}