@react-md/core 1.0.0-next.2 → 1.0.0-next.3

package/dist/app-bar/_app-bar.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 
 @use "../utils";
+@use "../box/box";
 @use "../box-shadows";
 @use "../interaction/interaction";
 @use "../theme/a11y";
@@ -59,6 +60,9 @@ $vertical-padding: 0 !default;
 
 $keyline: 1rem !default;
 $title-keyline: 4.5rem !default;
+// 3rem is the icon-button's default size. can't use the variables since it's
+// based on font-size now and `em`
+$nav-keyline: $title-keyline - $horizontal-padding - $gap - 3rem !default;
 
 $variables: (height, surface-background-color, surface-color);
 
@@ -121,17 +125,14 @@ $variables: (height, surface-background-color, surface-color);
 
     .rmd-app-bar {
       @include use-var(height);
+      @include box.set-var(gap, $gap);
+      @include box.set-var(padding, $vertical-padding $horizontal-padding);
 
-      align-items: center;
-      display: flex;
       // since app bars can appear a lot in full page dialogs, setting these flex
       // values allows it be be a direct replacement of the `DialogHeader`
       // component without all the offsets and additional styles needed for fixed
       // app bars.
       flex: 0 0 auto;
-      gap: $gap;
-      padding: $vertical-padding $horizontal-padding;
-      width: 100%;
 
       @if not $disable-fixed or not $disable-sticky {
         &--fixed {
@@ -237,10 +238,7 @@ $variables: (height, surface-background-color, surface-color);
         }
 
         &--nav-keyline {
-          @include utils.auto-rtl(
-            margin-left,
-            $title-keyline - $horizontal-padding - $gap - button.$icon-size
-          );
+          @include utils.auto-rtl(margin-left, $nav-keyline);
         }
       }
     }

package/dist/avatar/Avatar.d.ts

@@ -12,7 +12,7 @@ declare module "react" {
     }
 }
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
-export interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, AvatarClassNameOptions {
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, AvatarClassNameOptions {
     /**
      * This should be an image `src` attribute to create an avatar from. When this
      * prop is defined, you should not add any children to the avatar as the

package/dist/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ImgHTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-avatar-background-color\"?: string;\n    \"--rmd-avatar-color\"?: string;\n    \"--rmd-avatar-border-color\"?: string;\n    \"--rmd-avatar-border-radius\"?: string | number;\n    \"--rmd-avatar-size\"?: string | number;\n    \"--rmd-avatar-font-size\"?: string | number;\n  }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\nexport interface AvatarProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    AvatarClassNameOptions {\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @remarks \\@since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @remarks \\@since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/**\n * **Server Component**\n *\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      className,\n      children,\n      src,\n      alt = \"\",\n      size = \"avatar\",\n      color = \"\",\n      theme,\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        ref={ref}\n        role=\"presentation\"\n        className={avatar({\n          size,\n          color,\n          theme,\n          className,\n        })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","role"],"mappings":";AAAA,SAASA,UAAU,QAAqD,QAAQ;AAEhF,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA8D/E;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGX;IAEJ,IAAIY;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWJ,YAAY;gBAAEI,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbV,KAAKA;QACLa,MAAK;QACLZ,WAAWL,OAAO;YAChBS;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ImgHTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-avatar-background-color\"?: string;\n    \"--rmd-avatar-color\"?: string;\n    \"--rmd-avatar-border-color\"?: string;\n    \"--rmd-avatar-border-radius\"?: string | number;\n    \"--rmd-avatar-size\"?: string | number;\n    \"--rmd-avatar-font-size\"?: string | number;\n  }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n    AvatarClassNameOptions {\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @remarks \\@since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @remarks \\@since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/**\n * **Server Component**\n *\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      className,\n      children,\n      src,\n      alt = \"\",\n      size = \"avatar\",\n      color = \"\",\n      theme,\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        ref={ref}\n        role=\"presentation\"\n        className={avatar({\n          size,\n          color,\n          theme,\n          className,\n        })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","role"],"mappings":";AAAA,SAASA,UAAU,QAAqD,QAAQ;AAEhF,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA8D/E;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGX;IAEJ,IAAIY;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWJ,YAAY;gBAAEI,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbV,KAAKA;QACLa,MAAK;QACLZ,WAAWL,OAAO;YAChBS;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}

package/dist/badge/_badge.scss

@@ -12,8 +12,9 @@ $disable-secondary-theme: false !default;
 
 $size: 1.5rem !default;
 $font-size: 0.625rem !default;
-$offset-top: 0 !default;
-$offset-right: 0 !default;
+$offset: 0 !default;
+$offset-top: $offset !default;
+$offset-right: $offset !default;
 $border-radius: 50% !default;
 $typography: map.merge(
   map.remove(typography.$body-1-styles, line-height, font-size),
@@ -101,9 +102,13 @@ $variables: (
     @include set-var(greyscale-background-color, $greyscale-background-color);
     @include set-var(greyscale-color, $greyscale-color);
     @include set-var(size, $size);
-    @include set-var(offset, 0);
-    @include set-var(offset-top, get-var(offset));
-    @include set-var(offset-right, get-var(offset));
+    @include set-var(offset, $offset);
+    @if $offset != $offset-top {
+      @include set-var(offset-top, $offset-top);
+    }
+    @if $offset != $offset-right {
+      @include set-var(offset-right, $offset-right);
+    }
   }
 }
 
@@ -113,8 +118,8 @@ $variables: (
       @include utils.map-to-styles($typography);
       @include use-var(height, size);
       @include use-var(width, size);
-      @include utils.auto-rtl(right, get-var(offset-right));
-      @include use-var(top, offset-top);
+      @include utils.auto-rtl(right, get-var(offset-right, get-var(offset)));
+      @include use-var(top, offset-top, get-var(offset));
 
       align-items: center;
       border-radius: $border-radius;

package/dist/button/TooltippedButton.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from "react";
+import { type TooltipProps } from "../tooltip/Tooltip.js";
+import { type ProvidedTooltipProps, type TooltipOptions, type TooltippedElementEventHandlers } from "../tooltip/useTooltip.js";
+import { type ButtonProps } from "./Button.js";
+import { type ButtonType } from "./buttonStyles.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TooltippedButtonProps extends ButtonProps {
+    /** @defaultValue `"icon"` */
+    buttonType?: ButtonType;
+    /**
+     * The tooltip children to render. When this is falsey, the tooltip event
+     * listeners will not be enabled and the tooltip will never display.
+     */
+    tooltip?: ReactNode;
+    /**
+     * Any additional props to pass to the `Tooltip` component (normally styling
+     * props).
+     */
+    tooltipProps?: Omit<TooltipProps, keyof ProvidedTooltipProps>;
+    /**
+     * Any additional tooltip options to pass to {@link useTooltip}. The most
+     * common options would be:
+     *
+     * ```ts
+     * tooltipOptions={{
+     *   overflowOnly: true,
+     *
+     *   // whatever values you want for these
+     *   hoverTimeout: 0,
+     *   leaveTimeout: 150,
+     *   defaultPosition: "left",
+     * }}
+     * ```
+     */
+    tooltipOptions?: Omit<TooltipOptions, keyof TooltippedElementEventHandlers>;
+}
+/**
+ * **Client Component**
+ *
+ * A simple wrapper around the `Button` and `Tooltip` components to dynamically
+ * add tooltips to buttons. The `buttonType` will default to `icon` instead of
+ * `text`.
+ *
+ * @example
+ * ```tsx
+ * import { TooltippedButton } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ *
+ * export default function Example(): ReactElement {
+ *   return (
+ *     <TooltippedButton tooltip="I am a tooltip!" aria-label="Favorite">
+ *       <FavoriteIcon />
+ *     </TooltippedButton>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const TooltippedButton: import("react").ForwardRefExoticComponent<TooltippedButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/button/TooltippedButton.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { useTooltip } from "../tooltip/useTooltip.js";
+import { Button } from "./Button.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * **Client Component**
+ *
+ * A simple wrapper around the `Button` and `Tooltip` components to dynamically
+ * add tooltips to buttons. The `buttonType` will default to `icon` instead of
+ * `text`.
+ *
+ * @example
+ * ```tsx
+ * import { TooltippedButton } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ *
+ * export default function Example(): ReactElement {
+ *   return (
+ *     <TooltippedButton tooltip="I am a tooltip!" aria-label="Favorite">
+ *       <FavoriteIcon />
+ *     </TooltippedButton>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */ export const TooltippedButton = /*#__PURE__*/ forwardRef(function TooltippedButton(props, ref) {
+    const { tooltip, tooltipProps, tooltipOptions, buttonType = "icon", onBlur = noop, onFocus = noop, onMouseEnter = noop, onMouseLeave = noop, onTouchStart = noop, onTouchEnd = noop, onContextMenu = noop, ...remaining } = props;
+    const { tooltipProps: providedTooltipProps, elementProps } = useTooltip({
+        ...tooltipOptions,
+        disabled: !tooltip || tooltipOptions?.disabled,
+        onBlur,
+        onFocus,
+        onMouseEnter,
+        onMouseLeave,
+        onTouchEnd,
+        onTouchStart,
+        onContextMenu
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                ...elementProps,
+                ...remaining,
+                ref: ref,
+                buttonType: buttonType
+            }),
+            /*#__PURE__*/ _jsx(Tooltip, {
+                ...providedTooltipProps,
+                ...tooltipProps,
+                children: tooltip
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=TooltippedButton.js.map

package/dist/button/TooltippedButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/button/TooltippedButton.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Tooltip, type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport {\n  useTooltip,\n  type ProvidedTooltipProps,\n  type TooltipOptions,\n  type TooltippedElementEventHandlers,\n} from \"../tooltip/useTooltip.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\nimport { type ButtonType } from \"./buttonStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TooltippedButtonProps extends ButtonProps {\n  /** @defaultValue `\"icon\"` */\n  buttonType?: ButtonType;\n\n  /**\n   * The tooltip children to render. When this is falsey, the tooltip event\n   * listeners will not be enabled and the tooltip will never display.\n   */\n  tooltip?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `Tooltip` component (normally styling\n   * props).\n   */\n  tooltipProps?: Omit<TooltipProps, keyof ProvidedTooltipProps>;\n\n  /**\n   * Any additional tooltip options to pass to {@link useTooltip}. The most\n   * common options would be:\n   *\n   * ```ts\n   * tooltipOptions={{\n   *   overflowOnly: true,\n   *\n   *   // whatever values you want for these\n   *   hoverTimeout: 0,\n   *   leaveTimeout: 150,\n   *   defaultPosition: \"left\",\n   * }}\n   * ```\n   */\n  tooltipOptions?: Omit<TooltipOptions, keyof TooltippedElementEventHandlers>;\n}\n\n/**\n * **Client Component**\n *\n * A simple wrapper around the `Button` and `Tooltip` components to dynamically\n * add tooltips to buttons. The `buttonType` will default to `icon` instead of\n * `text`.\n *\n * @example\n * ```tsx\n * import { TooltippedButton } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <TooltippedButton tooltip=\"I am a tooltip!\" aria-label=\"Favorite\">\n *       <FavoriteIcon />\n *     </TooltippedButton>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const TooltippedButton = forwardRef<\n  HTMLButtonElement,\n  TooltippedButtonProps\n>(function TooltippedButton(props, ref) {\n  const {\n    tooltip,\n    tooltipProps,\n    tooltipOptions,\n    buttonType = \"icon\",\n    onBlur = noop,\n    onFocus = noop,\n    onMouseEnter = noop,\n    onMouseLeave = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onContextMenu = noop,\n    ...remaining\n  } = props;\n  const { tooltipProps: providedTooltipProps, elementProps } = useTooltip({\n    ...tooltipOptions,\n    disabled: !tooltip || tooltipOptions?.disabled,\n    onBlur,\n    onFocus,\n    onMouseEnter,\n    onMouseLeave,\n    onTouchEnd,\n    onTouchStart,\n    onContextMenu,\n  });\n\n  return (\n    <>\n      <Button\n        {...elementProps}\n        {...remaining}\n        ref={ref}\n        buttonType={buttonType}\n      />\n      <Tooltip {...providedTooltipProps} {...tooltipProps}>\n        {tooltip}\n      </Tooltip>\n    </>\n  );\n});\n"],"names":["forwardRef","Tooltip","useTooltip","Button","noop","TooltippedButton","props","ref","tooltip","tooltipProps","tooltipOptions","buttonType","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","remaining","providedTooltipProps","elementProps","disabled"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAwB,QAAQ;AACnD,SAASC,OAAO,QAA2B,wBAAwB;AACnE,SACEC,UAAU,QAIL,2BAA2B;AAClC,SAASC,MAAM,QAA0B,cAAc;AAGvD,MAAMC,OAAO;AACX,aAAa;AACf;AAuCA;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAMC,iCAAmBL,WAG9B,SAASK,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,OAAO,EACPC,YAAY,EACZC,cAAc,EACdC,aAAa,MAAM,EACnBC,SAASR,IAAI,EACbS,UAAUT,IAAI,EACdU,eAAeV,IAAI,EACnBW,eAAeX,IAAI,EACnBY,eAAeZ,IAAI,EACnBa,aAAab,IAAI,EACjBc,gBAAgBd,IAAI,EACpB,GAAGe,WACJ,GAAGb;IACJ,MAAM,EAAEG,cAAcW,oBAAoB,EAAEC,YAAY,EAAE,GAAGnB,WAAW;QACtE,GAAGQ,cAAc;QACjBY,UAAU,CAACd,WAAWE,gBAAgBY;QACtCV;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;IACF;IAEA,qBACE;;0BACE,KAACf;gBACE,GAAGkB,YAAY;gBACf,GAAGF,SAAS;gBACbZ,KAAKA;gBACLI,YAAYA;;0BAEd,KAACV;gBAAS,GAAGmB,oBAAoB;gBAAG,GAAGX,YAAY;0BAChDD;;;;AAIT,GAAG"}

package/dist/card/Card.js

@@ -42,7 +42,7 @@ import { card } from "./styles.js";
  *
  * @remarks \@since 6.0.0 Removed the deprecated `raiseable` prop
  */ export const Card = /*#__PURE__*/ forwardRef(function Card(props, ref) {
-    const { children, className, bordered = false, raisable = false, fullWidth = false, ...remaining } = props;
+    const { children, className, bordered, raisable, fullWidth, interactable, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {
         ...remaining,
         ref: ref,
@@ -50,7 +50,8 @@ import { card } from "./styles.js";
             className,
             bordered,
             raisable,
-            fullWidth
+            fullWidth,
+            interactable
         }),
         children: children
     });

package/dist/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { card, type CardClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-card-background-color\"?: string;\n    \"--rmd-card-color\"?: string;\n    \"--rmd-card-secondary-color\"?: string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0 Extends the {@link CardClassNameOptions}.\n */\nexport interface CardProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardClassNameOptions {}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import {\n *   Button,\n *   Card,\n *   CardContent,\n *   CardFooter,\n *   CardHeader,\n *   CardTitle,\n *   CardSubtitle,\n *   Typography,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Card>\n *       <CardHeader>\n *         <CardTitle>Main Title</CardTitle>\n *         <CardSubtitle>A subtitle</CardSubtitle>\n *       </CardHeader>\n *       <CardContent>\n *         <Typography margin=\"none\">\n *           Some paragraph of text.\n *         </Typography>\n *       </CardContent>\n *       <CardFooter>\n *         <Button>Action 1</Button>\n *         <Button>Action 2</Button>\n *       </CardFooter>\n *     </Card>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Removed the deprecated `raiseable` prop\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      children,\n      className,\n      bordered = false,\n      raisable = false,\n      fullWidth = false,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={card({\n          className,\n          bordered,\n          raisable,\n          fullWidth,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","card","Card","props","ref","children","className","bordered","raisable","fullWidth","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,IAAI,QAAmC,cAAc;AAiB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjB,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAC;YACAC;YACAC;QACF;kBAECJ;;AAGP,GACA"}
+{"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { card, type CardClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-card-background-color\"?: string;\n    \"--rmd-card-color\"?: string;\n    \"--rmd-card-secondary-color\"?: string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0 Extends the {@link CardClassNameOptions}.\n */\nexport interface CardProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardClassNameOptions {}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import {\n *   Button,\n *   Card,\n *   CardContent,\n *   CardFooter,\n *   CardHeader,\n *   CardTitle,\n *   CardSubtitle,\n *   Typography,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Card>\n *       <CardHeader>\n *         <CardTitle>Main Title</CardTitle>\n *         <CardSubtitle>A subtitle</CardSubtitle>\n *       </CardHeader>\n *       <CardContent>\n *         <Typography margin=\"none\">\n *           Some paragraph of text.\n *         </Typography>\n *       </CardContent>\n *       <CardFooter>\n *         <Button>Action 1</Button>\n *         <Button>Action 2</Button>\n *       </CardFooter>\n *     </Card>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Removed the deprecated `raiseable` prop\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      children,\n      className,\n      bordered,\n      raisable,\n      fullWidth,\n      interactable,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={card({\n          className,\n          bordered,\n          raisable,\n          fullWidth,\n          interactable,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","card","Card","props","ref","children","className","bordered","raisable","fullWidth","interactable","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,IAAI,QAAmC,cAAc;AAiB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACS;QACE,GAAGD,SAAS;QACbP,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAC;YACAC;YACAC;YACAC;QACF;kBAECL;;AAGP,GACA"}

package/dist/card/CardContent.js

@@ -8,7 +8,7 @@ import { cardContent } from "./styles.js";
  * \@since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
  * removed the `disableParagraphMargin` prop.
  */ export const CardContent = /*#__PURE__*/ forwardRef(function CardContent(props, ref) {
-    const { children, className, disablePadding = false, disableSecondaryColor = false, disableLastChildPadding = false, ...remaining } = props;
+    const { children, className, disablePadding, disableSecondaryColor, disableLastChildPadding, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {
         ...remaining,
         ref: ref,

package/dist/card/CardContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/CardContent.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cardContent, type CardContentClassNameOptions } from \"./styles.js\";\n\n/**\n * @remarks\n * \\@since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport interface CardContentProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardContentClassNameOptions {}\n\n/**\n * **Server Component**\n *\n * @remarks\n * \\@since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(\n  function CardContent(props, ref) {\n    const {\n      children,\n      className,\n      disablePadding = false,\n      disableSecondaryColor = false,\n      disableLastChildPadding = false,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={cardContent({\n          className,\n          disablePadding,\n          disableSecondaryColor,\n          disableLastChildPadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","cardContent","CardContent","props","ref","children","className","disablePadding","disableSecondaryColor","disableLastChildPadding","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,WAAW,QAA0C,cAAc;AAW5E;;;;;;CAMC,GACD,OAAO,MAAMC,4BAAcF,WACzB,SAASE,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,iBAAiB,KAAK,EACtBC,wBAAwB,KAAK,EAC7BC,0BAA0B,KAAK,EAC/B,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLE,WAAWL,YAAY;YACrBK;YACAC;YACAC;YACAC;QACF;kBAECJ;;AAGP,GACA"}
+{"version":3,"sources":["../../src/card/CardContent.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cardContent, type CardContentClassNameOptions } from \"./styles.js\";\n\n/**\n * @remarks\n * \\@since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport interface CardContentProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardContentClassNameOptions {}\n\n/**\n * **Server Component**\n *\n * @remarks\n * \\@since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(\n  function CardContent(props, ref) {\n    const {\n      children,\n      className,\n      disablePadding,\n      disableSecondaryColor,\n      disableLastChildPadding,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={cardContent({\n          className,\n          disablePadding,\n          disableSecondaryColor,\n          disableLastChildPadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","cardContent","CardContent","props","ref","children","className","disablePadding","disableSecondaryColor","disableLastChildPadding","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,WAAW,QAA0C,cAAc;AAW5E;;;;;;CAMC,GACD,OAAO,MAAMC,4BAAcF,WACzB,SAASE,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACvB,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLE,WAAWL,YAAY;YACrBK;YACAC;YACAC;YACAC;QACF;kBAECJ;;AAGP,GACA"}

package/dist/card/ClickableCard.d.ts

@@ -0,0 +1,42 @@
+import { type MouseEventHandler } from "react";
+import { type CardProps } from "./Card.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ClickableCardProps extends CardProps {
+    onClick: MouseEventHandler<HTMLDivElement>;
+    /**
+     * Set this to `true` to disable all click events.
+     *
+     * Note: Any disabled styling will need to be manually applied.
+     *
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+}
+/**
+ * A Small wrapper around the `Card` component that is clickable and has the
+ * element interaction enabled (ripples).
+ *
+ * @example
+ * SImple Example
+ * ```tsx
+ * import { CardContent, ClickableCard } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ *
+ * export default function ClickableCardExample(): ReactElement {
+ *   return (
+ *     <ClickableCard
+ *       onClick={() => {
+ *         // do something
+ *       }}
+ *     >
+ *       <CardContent>Wow</CardContent>
+ *     </ClickableCard>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const ClickableCard: import("react").ForwardRefExoticComponent<ClickableCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/card/ClickableCard.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { useElementInteraction } from "../interaction/useElementInteraction.js";
+import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
+import { Card } from "./Card.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * A Small wrapper around the `Card` component that is clickable and has the
+ * element interaction enabled (ripples).
+ *
+ * @example
+ * SImple Example
+ * ```tsx
+ * import { CardContent, ClickableCard } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ *
+ * export default function ClickableCardExample(): ReactElement {
+ *   return (
+ *     <ClickableCard
+ *       onClick={() => {
+ *         // do something
+ *       }}
+ *     >
+ *       <CardContent>Wow</CardContent>
+ *     </ClickableCard>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */ export const ClickableCard = /*#__PURE__*/ forwardRef(function ClickableCard(props, ref) {
+    const { role = "button", disabled, tabIndex = disabled ? undefined : 0, onClick, onKeyDown = noop, className, children: propChildren, ...remaining } = props;
+    const { handlers, ripples } = useElementInteraction(remaining);
+    const children = useHigherContrastChildren(propChildren);
+    return /*#__PURE__*/ _jsxs(Card, {
+        ...remaining,
+        ...handlers,
+        "aria-disabled": disabled || undefined,
+        ref: ref,
+        role: role,
+        tabIndex: tabIndex,
+        className: cnb("rmd-card--clickable", className),
+        onClick: (event)=>{
+            if (disabled) {
+                return;
+            }
+            onClick(event);
+        },
+        onKeyDown: (event)=>{
+            onKeyDown(event);
+            if (disabled) {
+                return;
+            }
+            const isSpace = event.key === " ";
+            if (isSpace || event.key === "Enter") {
+                if (isSpace) {
+                    event.preventDefault();
+                }
+                event.currentTarget.click();
+            }
+        },
+        children: [
+            children,
+            ripples
+        ]
+    });
+});
+
+//# sourceMappingURL=ClickableCard.js.map

package/dist/card/ClickableCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/card/ClickableCard.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type MouseEventHandler } from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { Card, type CardProps } from \"./Card.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ClickableCardProps extends CardProps {\n  onClick: MouseEventHandler<HTMLDivElement>;\n\n  /**\n   * Set this to `true` to disable all click events.\n   *\n   * Note: Any disabled styling will need to be manually applied.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * A Small wrapper around the `Card` component that is clickable and has the\n * element interaction enabled (ripples).\n *\n * @example\n * SImple Example\n * ```tsx\n * import { CardContent, ClickableCard } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export default function ClickableCardExample(): ReactElement {\n *   return (\n *     <ClickableCard\n *       onClick={() => {\n *         // do something\n *       }}\n *     >\n *       <CardContent>Wow</CardContent>\n *     </ClickableCard>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(\n  function ClickableCard(props, ref) {\n    const {\n      role = \"button\",\n      disabled,\n      tabIndex = disabled ? undefined : 0,\n      onClick,\n      onKeyDown = noop,\n      className,\n      children: propChildren,\n      ...remaining\n    } = props;\n    const { handlers, ripples } = useElementInteraction(remaining);\n    const children = useHigherContrastChildren(propChildren);\n\n    return (\n      <Card\n        {...remaining}\n        {...handlers}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        className={cnb(\"rmd-card--clickable\", className)}\n        onClick={(event) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown(event);\n          if (disabled) {\n            return;\n          }\n\n          const isSpace = event.key === \" \";\n          if (isSpace || event.key === \"Enter\") {\n            if (isSpace) {\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n        }}\n      >\n        {children}\n        {ripples}\n      </Card>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useHigherContrastChildren","Card","noop","ClickableCard","props","ref","role","disabled","tabIndex","undefined","onClick","onKeyDown","className","children","propChildren","remaining","handlers","ripples","aria-disabled","event","isSpace","key","preventDefault","currentTarget","click"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAgC,QAAQ;AAC3D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,IAAI,QAAwB,YAAY;AAEjD,MAAMC,OAAO;AACX,aAAa;AACf;AAkBA;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,MAAMC,8BAAgBL,WAC3B,SAASK,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,OAAO,QAAQ,EACfC,QAAQ,EACRC,WAAWD,WAAWE,YAAY,CAAC,EACnCC,OAAO,EACPC,YAAYT,IAAI,EAChBU,SAAS,EACTC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGX;IACJ,MAAM,EAAEY,QAAQ,EAAEC,OAAO,EAAE,GAAGlB,sBAAsBgB;IACpD,MAAMF,WAAWb,0BAA0Bc;IAE3C,qBACE,MAACb;QACE,GAAGc,SAAS;QACZ,GAAGC,QAAQ;QACZE,iBAAeX,YAAYE;QAC3BJ,KAAKA;QACLC,MAAMA;QACNE,UAAUA;QACVI,WAAWf,IAAI,uBAAuBe;QACtCF,SAAS,CAACS;YACR,IAAIZ,UAAU;gBACZ;YACF;YAEAG,QAAQS;QACV;QACAR,WAAW,CAACQ;YACVR,UAAUQ;YACV,IAAIZ,UAAU;gBACZ;YACF;YAEA,MAAMa,UAAUD,MAAME,GAAG,KAAK;YAC9B,IAAID,WAAWD,MAAME,GAAG,KAAK,SAAS;gBACpC,IAAID,SAAS;oBACXD,MAAMG,cAAc;gBACtB;gBAEAH,MAAMI,aAAa,CAACC,KAAK;YAC3B;QACF;;YAECX;YACAI;;;AAGP,GACA"}

package/dist/card/_card.scss

@@ -4,12 +4,14 @@
 @use "../box-shadows";
 @use "../typography/typography";
 @use "../divider/divider";
+@use "../interaction/interaction";
 
 $disable-everything: false !default;
 $disable-bordered: false !default;
 $disable-shadowed: false !default;
 $disable-raisable: false !default;
 $disable-full-width: false !default;
+$disable-clickable: false !default;
 $disable-content-secondary-color: false !default;
 $disable-content-last-child-padding: false !default;
 
@@ -99,14 +101,12 @@ $variables: (background-color, color, secondary-color);
       max-width: 100%;
 
       @if not $disable-raisable {
-        @include utils.mouse-only {
-          &--raisable {
-            @include box-shadows.elevation-transition(
-              $raisable-start-elevation,
-              $raisable-end-elevation,
-              "&:hover"
-            );
-          }
+        &--raisable {
+          @include box-shadows.elevation-transition(
+            $raisable-start-elevation,
+            $raisable-end-elevation,
+            "&:hover"
+          );
         }
       }
 
@@ -129,6 +129,12 @@ $variables: (background-color, color, secondary-color);
         }
       }
 
+      @if not $disable-clickable {
+        &--clickable {
+          @include interaction.surface;
+        }
+      }
+
       &__header {
         align-items: center;
         column-gap: $header-spacing;
@@ -140,7 +146,7 @@ $variables: (background-color, color, secondary-color);
         @include typography.text-overflow;
 
         flex: 1 1 auto;
-        min-width: 1;
+        min-width: 0;
       }
 
       // does not require custom styles

package/dist/card/styles.d.ts

@@ -22,6 +22,14 @@ export interface CardClassNameOptions {
      * @defaultValue `false`
      */
     fullWidth?: boolean;
+    /**
+     * Set this to `true` if the card should gain the pointer cursor while
+     * hovering and other interaction styles and not using the `ClickableCard`
+     * component.
+     *
+     * @defaultValue `false`
+     */
+    interactable?: boolean;
 }
 /**
  * @remarks \@since 6.0.0

package/dist/card/styles.js

@@ -5,11 +5,12 @@ const cardStyles = bem("rmd-card");
 /**
  * @remarks \@since 6.0.0
  */ export function card(options = {}) {
-    const { className, bordered = false, raisable = false, fullWidth = false } = options;
+    const { className, bordered, raisable, fullWidth, interactable } = options;
     return cnb(cardStyles({
         bordered,
         shadowed: !bordered,
         raisable: !bordered && raisable,
+        interactable,
         "full-width": fullWidth
     }), className);
 }
@@ -39,12 +40,14 @@ const cardStyles = bem("rmd-card");
  * @remarks \@since 6.0.0
  */ export function cardSubtitle(options = {}) {
     const { className } = options;
-    return cnb(cardStyles("subtitle"), className);
+    return cnb(cardStyles("subtitle"), cssUtils({
+        textColor: "text-secondary"
+    }), className);
 }
 /**
  * @remarks \@since 6.0.0
  */ export function cardContent(options = {}) {
-    const { className, disablePadding = false, disableSecondaryColor = false, disableLastChildPadding = false } = options;
+    const { className, disablePadding, disableSecondaryColor, disableLastChildPadding } = options;
     return cnb(cardStyles("content", {
         padded: !disablePadding,
         "padding-bottom": !disableLastChildPadding

package/dist/card/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { cssUtils } from \"../cssUtils.js\";\n\nconst cardStyles = bem(\"rmd-card\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the card should use apply an inset `border` instead\n   * of `box-shadow`.\n   *\n   * @defaultValue `false`\n   */\n  bordered?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain additional box shadow while\n   * hovered.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * Update the card to have `display: block` and `width: 100%` instead of\n   * `display: inline-block`.\n   *\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function card(options: CardClassNameOptions = {}): string {\n  const {\n    className,\n    bordered = false,\n    raisable = false,\n    fullWidth = false,\n  } = options;\n\n  return cnb(\n    cardStyles({\n      bordered,\n      shadowed: !bordered,\n      raisable: !bordered && raisable,\n      \"full-width\": fullWidth,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardHeaderClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  addonAfter?: boolean;\n\n  /** @defaultValue `false` */\n  addonBefore?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardHeader(options: CardHeaderClassNameOptions = {}): string {\n  const { className, addonAfter = false, addonBefore = false } = options;\n\n  return cnb(\n    cardStyles(\"header\", {\n      \"addon-after\": addonAfter && !addonBefore,\n      \"addon-before\": addonBefore && !addonAfter,\n      surrounded: addonAfter && addonBefore,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardHeaderContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardHeaderContent(\n  options: CardHeaderContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"header-content\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardTitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardTitle(options: CardTitleClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"title\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardSubtitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardSubtitle(\n  options: CardSubtitleClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"subtitle\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardContentClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to disable the card's padding.\n   *\n   * @defaultValue `false`\n   */\n  disablePadding?: boolean;\n\n  /**\n   * Set this to `true` to disable applying the `text-secondary-color`.\n   *\n   * @defaultValue `false`\n   */\n  disableSecondaryColor?: boolean;\n\n  /**\n   * Set this to `true` to disable applying extra `padding-bottom` if the\n   * `CardContent` component is the last child.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0 Renamed from `disableExtraPadding`\n   */\n  disableLastChildPadding?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardContent(options: CardContentClassNameOptions = {}): string {\n  const {\n    className,\n    disablePadding = false,\n    disableSecondaryColor = false,\n    disableLastChildPadding = false,\n  } = options;\n\n  return cnb(\n    cardStyles(\"content\", {\n      padded: !disablePadding,\n      \"padding-bottom\": !disableLastChildPadding,\n    }),\n    cssUtils({\n      textColor: !disableSecondaryColor ? \"text-secondary\" : undefined,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardFooterClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardFooter(options: CardFooterClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"footer\"), className);\n}\n"],"names":["cnb","bem","cssUtils","cardStyles","card","options","className","bordered","raisable","fullWidth","shadowed","cardHeader","addonAfter","addonBefore","surrounded","cardHeaderContent","cardTitle","cardSubtitle","cardContent","disablePadding","disableSecondaryColor","disableLastChildPadding","padded","textColor","undefined","cardFooter"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,MAAMC,aAAaF,IAAI;AA+BvB;;CAEC,GACD,OAAO,SAASG,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EACJC,SAAS,EACTC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EAClB,GAAGJ;IAEJ,OAAOL,IACLG,WAAW;QACTI;QACAG,UAAU,CAACH;QACXC,UAAU,CAACD,YAAYC;QACvB,cAAcC;IAChB,IACAH;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASK,WAAWN,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAEM,aAAa,KAAK,EAAEC,cAAc,KAAK,EAAE,GAAGR;IAE/D,OAAOL,IACLG,WAAW,UAAU;QACnB,eAAeS,cAAc,CAACC;QAC9B,gBAAgBA,eAAe,CAACD;QAChCE,YAAYF,cAAcC;IAC5B,IACAP;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASS,kBACdV,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,mBAAmBG;AAC3C;AAOA;;CAEC,GACD,OAAO,SAASU,UAAUX,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,UAAUG;AAClC;AAOA;;CAEC,GACD,OAAO,SAASW,aACdZ,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,aAAaG;AACrC;AA8BA;;CAEC,GACD,OAAO,SAASY,YAAYb,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJC,SAAS,EACTa,iBAAiB,KAAK,EACtBC,wBAAwB,KAAK,EAC7BC,0BAA0B,KAAK,EAChC,GAAGhB;IAEJ,OAAOL,IACLG,WAAW,WAAW;QACpBmB,QAAQ,CAACH;QACT,kBAAkB,CAACE;IACrB,IACAnB,SAAS;QACPqB,WAAW,CAACH,wBAAwB,mBAAmBI;IACzD,IACAlB;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASmB,WAAWpB,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,WAAWG;AACnC"}
+{"version":3,"sources":["../../src/card/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { cssUtils } from \"../cssUtils.js\";\n\nconst cardStyles = bem(\"rmd-card\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the card should use apply an inset `border` instead\n   * of `box-shadow`.\n   *\n   * @defaultValue `false`\n   */\n  bordered?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain additional box shadow while\n   * hovered.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * Update the card to have `display: block` and `width: 100%` instead of\n   * `display: inline-block`.\n   *\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain the pointer cursor while\n   * hovering and other interaction styles and not using the `ClickableCard`\n   * component.\n   *\n   * @defaultValue `false`\n   */\n  interactable?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function card(options: CardClassNameOptions = {}): string {\n  const { className, bordered, raisable, fullWidth, interactable } = options;\n\n  return cnb(\n    cardStyles({\n      bordered,\n      shadowed: !bordered,\n      raisable: !bordered && raisable,\n      interactable,\n      \"full-width\": fullWidth,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardHeaderClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  addonAfter?: boolean;\n\n  /** @defaultValue `false` */\n  addonBefore?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardHeader(options: CardHeaderClassNameOptions = {}): string {\n  const { className, addonAfter = false, addonBefore = false } = options;\n\n  return cnb(\n    cardStyles(\"header\", {\n      \"addon-after\": addonAfter && !addonBefore,\n      \"addon-before\": addonBefore && !addonAfter,\n      surrounded: addonAfter && addonBefore,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardHeaderContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardHeaderContent(\n  options: CardHeaderContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"header-content\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardTitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardTitle(options: CardTitleClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"title\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardSubtitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardSubtitle(\n  options: CardSubtitleClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\n    cardStyles(\"subtitle\"),\n    cssUtils({ textColor: \"text-secondary\" }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardContentClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to disable the card's padding.\n   *\n   * @defaultValue `false`\n   */\n  disablePadding?: boolean;\n\n  /**\n   * Set this to `true` to disable applying the `text-secondary-color`.\n   *\n   * @defaultValue `false`\n   */\n  disableSecondaryColor?: boolean;\n\n  /**\n   * Set this to `true` to disable applying extra `padding-bottom` if the\n   * `CardContent` component is the last child.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0 Renamed from `disableExtraPadding`\n   */\n  disableLastChildPadding?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardContent(options: CardContentClassNameOptions = {}): string {\n  const {\n    className,\n    disablePadding,\n    disableSecondaryColor,\n    disableLastChildPadding,\n  } = options;\n\n  return cnb(\n    cardStyles(\"content\", {\n      padded: !disablePadding,\n      \"padding-bottom\": !disableLastChildPadding,\n    }),\n    cssUtils({\n      textColor: !disableSecondaryColor ? \"text-secondary\" : undefined,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardFooterClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardFooter(options: CardFooterClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"footer\"), className);\n}\n"],"names":["cnb","bem","cssUtils","cardStyles","card","options","className","bordered","raisable","fullWidth","interactable","shadowed","cardHeader","addonAfter","addonBefore","surrounded","cardHeaderContent","cardTitle","cardSubtitle","textColor","cardContent","disablePadding","disableSecondaryColor","disableLastChildPadding","padded","undefined","cardFooter"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,MAAMC,aAAaF,IAAI;AAwCvB;;CAEC,GACD,OAAO,SAASG,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGL;IAEnE,OAAOL,IACLG,WAAW;QACTI;QACAI,UAAU,CAACJ;QACXC,UAAU,CAACD,YAAYC;QACvBE;QACA,cAAcD;IAChB,IACAH;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASM,WAAWP,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAEO,aAAa,KAAK,EAAEC,cAAc,KAAK,EAAE,GAAGT;IAE/D,OAAOL,IACLG,WAAW,UAAU;QACnB,eAAeU,cAAc,CAACC;QAC9B,gBAAgBA,eAAe,CAACD;QAChCE,YAAYF,cAAcC;IAC5B,IACAR;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASU,kBACdX,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,mBAAmBG;AAC3C;AAOA;;CAEC,GACD,OAAO,SAASW,UAAUZ,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,UAAUG;AAClC;AAOA;;CAEC,GACD,OAAO,SAASY,aACdb,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IACLG,WAAW,aACXD,SAAS;QAAEiB,WAAW;IAAiB,IACvCb;AAEJ;AA8BA;;CAEC,GACD,OAAO,SAASc,YAAYf,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJC,SAAS,EACTe,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACxB,GAAGlB;IAEJ,OAAOL,IACLG,WAAW,WAAW;QACpBqB,QAAQ,CAACH;QACT,kBAAkB,CAACE;IACrB,IACArB,SAAS;QACPiB,WAAW,CAACG,wBAAwB,mBAAmBG;IACzD,IACAnB;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASoB,WAAWrB,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,WAAWG;AACnC"}