@react-md/core 1.0.0-next.1 → 1.0.0-next.10

package/dist/app-bar/AppBar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
+import { box } from "../box/styles.js";
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 const styles = bem("rmd-app-bar");
@@ -10,21 +11,33 @@ const styles = bem("rmd-app-bar");
  *
  * @remarks \@since 6.0.0
  */ export function appBar(options = {}) {
-    const { className, height = "normal", theme = "primary", stacked = false, position = "static", pagePosition = "top", scrollbarOffset = position === "fixed", disableElevation = false } = options;
+    const { className, theme = "primary", stacked, height = stacked ? "auto" : "normal", position = "static", pagePosition = "top", scrollbarOffset = position === "fixed", align, grid, gridColumns, gridName, justify, reversed, surfaceColor, disableWrap = true, disablePadding, disableElevation } = options;
     const surface = theme === "surface";
     const clear = theme === "clear";
     return cnb(styles({
         surface,
         [height]: height !== "normal",
         fixed: position !== "static",
-        sticky: position === "sticky",
         stacked,
+        sticky: position === "sticky",
         [pagePosition]: position !== "static",
         elevated: position !== "static" && !disableElevation,
         "scrollbar-offset": scrollbarOffset,
         "static-scrollbar-offset": position === "static" && scrollbarOffset
+    }), box({
+        align,
+        stacked,
+        fullWidth: true,
+        grid,
+        gridColumns,
+        gridName,
+        justify,
+        reversed,
+        disableWrap,
+        disablePadding
     }), cssUtils({
-        backgroundColor: !surface && !clear ? theme : undefined
+        backgroundColor: !surface && !clear ? theme : undefined,
+        surfaceColor
     }), className);
 }
 /**
@@ -53,18 +66,27 @@ const styles = bem("rmd-app-bar");
  * \@since 6.0.0 The `AppBar` was updated to use `gap` for spacing
  * instead of requiring the `AppBarNav` and `AppBarAction` components.
  */ export const AppBar = /*#__PURE__*/ forwardRef(function AppBar(props, ref) {
-    const { className, theme, stacked, height = stacked ? "auto" : "normal", position, pagePosition, scrollbarOffset, disableElevation, as: Component = position ? "header" : "div", children, ...remaining } = props;
+    const { className, theme, stacked, height, align, grid, gridName, justify, reversed, gridColumns, disableWrap, disablePadding, position, pagePosition, surfaceColor, scrollbarOffset, disableElevation, as: Component = position ? "header" : "div", children, ...remaining } = props;
     return /*#__PURE__*/ _jsx(Component, {
         ...remaining,
         className: appBar({
+            className,
             theme,
             position,
             pagePosition,
             disableElevation,
-            stacked,
+            scrollbarOffset,
             height,
-            className,
-            scrollbarOffset
+            grid,
+            gridName,
+            gridColumns,
+            align,
+            stacked,
+            justify,
+            reversed,
+            surfaceColor,
+            disableWrap,
+            disablePadding
         }),
         ref: ref,
         children: children

package/dist/app-bar/AppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { cssUtils, type BackgroundColor } from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-app-bar-height\"?: string | number;\n    \"--rmd-app-bar-background-color\"?: string;\n    \"--rmd-app-bar-color\"?: string;\n    \"--rmd-app-bar-surface-background-color\"?: string;\n    \"--rmd-app-bar-surface-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-app-bar\");\n\nexport type AppBarPosition = \"top\" | \"bottom\";\n\n/**\n * - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n *   defaults to `#fff` for light themes, `#242424` for dark themes, and\n *   `#424242` for dark themes when the `$disable-dark-elevation` is set to\n *   `true`\n *\n * The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n */\nexport type AppBarTheme = BackgroundColor | \"clear\";\n\n/**\n * - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n */\nexport type AppBarHeight =\n  | \"auto\"\n  | \"normal\"\n  | \"prominent\"\n  | \"dense\"\n  | \"prominent-dense\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface AppBarClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n   * `position: sticky;` to the app bar. The default position will be static and\n   * inline with other content.\n   *\n   * @defaultValue `'static'`\n   */\n  position?: CssPosition;\n\n  /**\n   * The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n   * enabled.\n   *\n   * @defaultValue `\"top\"`\n   */\n  pagePosition?: AppBarPosition;\n\n  /**\n   * Set this to `true` to remove the box-shadow.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * The theme to apply to the `AppBar`.\n   *\n   * @defaultValue `\"primary\"`\n   * @see {@link AppBarTheme}\n   */\n  theme?: AppBarTheme;\n\n  /**\n   * Set this to `true` to update the `AppBar` to have `flex-direction: column`.\n   * This is useful when nesting `AppBar`s.\n   *\n   * @remarks \\@since 6.0.0\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * @defaultValue `stacked ? \"auto\" : \"normal\"`\n   * @see {@link AppBarHeight}\n   */\n  height?: AppBarHeight;\n\n  /**\n   * Set this to `true` if the app bar's positioning and width should be\n   * changed whenever the scrollbar is visible on the page. This defaults to\n   * `true` when the {@link position} prop is `true` so that once dialogs and menus\n   * become visible the contents in the app bar do not need to be repainted.\n   *\n   * @remarks \\@since 6.0.0\n   * @defaultValue `position === \"fixed\"`\n   */\n  scrollbarOffset?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n  const {\n    className,\n    height = \"normal\",\n    theme = \"primary\",\n    stacked = false,\n    position = \"static\",\n    pagePosition = \"top\",\n    scrollbarOffset = position === \"fixed\",\n    disableElevation = false,\n  } = options;\n  const surface = theme === \"surface\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({\n      surface,\n      [height]: height !== \"normal\",\n      fixed: position !== \"static\",\n      sticky: position === \"sticky\",\n      stacked,\n      [pagePosition]: position !== \"static\",\n      elevated: position !== \"static\" && !disableElevation,\n      \"scrollbar-offset\": scrollbarOffset,\n      \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n    }),\n    cssUtils({\n      backgroundColor: !surface && !clear ? theme : undefined,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: Ref<HTMLDivElement>;\n    className: string;\n  }\n>;\n\n/**\n * @remarks\n * \\@since 6.0.0 Renamed the `component` prop to `as` and updated the default\n * value to be a `\"div\"` when `fixed` is `false`.\n * \\@since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to\n * match naming conventions when a feature is enabled by default.\n * \\@since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are\n * no longer required.\n * \\@since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop\n * which enables position `fixed` or `sticky` behavior.\n * \\@since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.\n */\nexport interface AppBarProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AppBarClassNameOptions {\n  /** @defaultValue `fixed ? \"header\" : \"div\"` */\n  as?: CustomAppBarComponent;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { AppBar, AppBarTitle, Button } from \"@react-md/core\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <Button aria-label=\"Navigation\"><MenuIcon /></Button>\n *       <AppBarTitle>My Main Title</AppBarTitle>\n *       <Button aria-label=\"Options\"><MoreVertIcon /></Button>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 6.0.0 The `AppBar` was updated to use `gap` for spacing\n * instead of requiring the `AppBarNav` and `AppBarAction` components.\n */\nexport const AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n  function AppBar(props, ref) {\n    const {\n      className,\n      theme,\n      stacked,\n      height = stacked ? \"auto\" : \"normal\",\n      position,\n      pagePosition,\n      scrollbarOffset,\n      disableElevation,\n      as: Component = position ? \"header\" : \"div\",\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <Component\n        {...remaining}\n        className={appBar({\n          theme,\n          position,\n          pagePosition,\n          disableElevation,\n          stacked,\n          height,\n          className,\n          scrollbarOffset,\n        })}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","styles","appBar","options","className","height","theme","stacked","position","pagePosition","scrollbarOffset","disableElevation","surface","clear","fixed","sticky","elevated","backgroundColor","undefined","AppBar","props","ref","as","Component","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,QAAQ,QAA8B,iBAAiB;AAEhE,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AA+FnB;;;;;CAKC,GACD,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,SAAS,QAAQ,EACjBC,QAAQ,SAAS,EACjBC,UAAU,KAAK,EACfC,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,mBAAmB,KAAK,EACzB,GAAGR;IACJ,MAAMS,UAAUN,UAAU;IAC1B,MAAMO,QAAQP,UAAU;IAExB,OAAOT,IACLI,OAAO;QACLW;QACA,CAACP,OAAO,EAAEA,WAAW;QACrBS,OAAON,aAAa;QACpBO,QAAQP,aAAa;QACrBD;QACA,CAACE,aAAa,EAAED,aAAa;QAC7BQ,UAAUR,aAAa,YAAY,CAACG;QACpC,oBAAoBD;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAX,SAAS;QACPkB,iBAAiB,CAACL,WAAW,CAACC,QAAQP,QAAQY;IAChD,IACAd;AAEJ;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMe,uBAASrB,WACpB,SAASqB,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJjB,SAAS,EACTE,KAAK,EACLC,OAAO,EACPF,SAASE,UAAU,SAAS,QAAQ,EACpCC,QAAQ,EACRC,YAAY,EACZC,eAAe,EACfC,gBAAgB,EAChBW,IAAIC,YAAYf,WAAW,WAAW,KAAK,EAC3CgB,QAAQ,EACR,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACG;QACE,GAAGE,SAAS;QACbrB,WAAWF,OAAO;YAChBI;YACAE;YACAC;YACAE;YACAJ;YACAF;YACAD;YACAM;QACF;QACAW,KAAKA;kBAEJG;;AAGP,GACA"}
+{"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { box, type BoxOptions } from \"../box/styles.js\";\nimport {\n  cssUtils,\n  type BackgroundColor,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type CssUtilsOptions,\n} from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-app-bar-height\"?: string | number;\n    \"--rmd-app-bar-background-color\"?: string;\n    \"--rmd-app-bar-color\"?: string;\n    \"--rmd-app-bar-surface-background-color\"?: string;\n    \"--rmd-app-bar-surface-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-app-bar\");\n\nexport type AppBarPosition = \"top\" | \"bottom\";\n\n/**\n * - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n *   defaults to `#fff` for light themes, `#242424` for dark themes, and\n *   `#424242` for dark themes when the `$disable-dark-elevation` is set to\n *   `true`\n *\n * The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n */\nexport type AppBarTheme = BackgroundColor | \"clear\";\n\n/**\n * - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n */\nexport type AppBarHeight =\n  | \"auto\"\n  | \"normal\"\n  | \"prominent\"\n  | \"dense\"\n  | \"prominent-dense\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface AppBarClassNameOptions extends Omit<BoxOptions, \"fullWidth\"> {\n  className?: string;\n\n  /**\n   * Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n   * `position: sticky;` to the app bar. The default position will be static and\n   * inline with other content.\n   *\n   * @defaultValue `'static'`\n   */\n  position?: CssPosition;\n\n  /**\n   * The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n   * enabled.\n   *\n   * @defaultValue `\"top\"`\n   */\n  pagePosition?: AppBarPosition;\n\n  /**\n   * Set this to `true` to remove the box-shadow.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * The theme to apply to the `AppBar`.\n   *\n   * @defaultValue `\"primary\"`\n   * @see {@link AppBarTheme}\n   */\n  theme?: AppBarTheme;\n\n  /**\n   * @defaultValue `stacked ? \"auto\" : \"normal\"`\n   * @see {@link AppBarHeight}\n   */\n  height?: AppBarHeight;\n\n  /** @see {@link CssUtilsOptions.surfaceColor} */\n  surfaceColor?: \"light\" | \"dark\";\n\n  /**\n   * Set this to `true` if the app bar's positioning and width should be\n   * changed whenever the scrollbar is visible on the page. This defaults to\n   * `true` when the {@link position} prop is `true` so that once dialogs and menus\n   * become visible the contents in the app bar do not need to be repainted.\n   *\n   * @remarks \\@since 6.0.0\n   * @defaultValue `position === \"fixed\"`\n   */\n  scrollbarOffset?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"primary\",\n    stacked,\n    height = stacked ? \"auto\" : \"normal\",\n    position = \"static\",\n    pagePosition = \"top\",\n    scrollbarOffset = position === \"fixed\",\n    align,\n    grid,\n    gridColumns,\n    gridName,\n    justify,\n    reversed,\n    surfaceColor,\n    disableWrap = true,\n    disablePadding,\n    disableElevation,\n  } = options;\n  const surface = theme === \"surface\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({\n      surface,\n      [height]: height !== \"normal\",\n      fixed: position !== \"static\",\n      stacked,\n      sticky: position === \"sticky\",\n      [pagePosition]: position !== \"static\",\n      elevated: position !== \"static\" && !disableElevation,\n      \"scrollbar-offset\": scrollbarOffset,\n      \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n    }),\n    box({\n      align,\n      stacked,\n      fullWidth: true,\n      grid,\n      gridColumns,\n      gridName,\n      justify,\n      reversed,\n      disableWrap,\n      disablePadding,\n    }),\n    cssUtils({\n      backgroundColor: !surface && !clear ? theme : undefined,\n      surfaceColor,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: Ref<HTMLDivElement>;\n    className: string;\n  }\n>;\n\n/**\n * @remarks\n * \\@since 6.0.0 Renamed the `component` prop to `as` and updated the default\n * value to be a `\"div\"` when `fixed` is `false`.\n * \\@since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to\n * match naming conventions when a feature is enabled by default.\n * \\@since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are\n * no longer required.\n * \\@since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop\n * which enables position `fixed` or `sticky` behavior.\n * \\@since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.\n */\nexport interface AppBarProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AppBarClassNameOptions {\n  /** @defaultValue `fixed ? \"header\" : \"div\"` */\n  as?: CustomAppBarComponent;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { AppBar, AppBarTitle, Button } from \"@react-md/core\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <Button aria-label=\"Navigation\"><MenuIcon /></Button>\n *       <AppBarTitle>My Main Title</AppBarTitle>\n *       <Button aria-label=\"Options\"><MoreVertIcon /></Button>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 6.0.0 The `AppBar` was updated to use `gap` for spacing\n * instead of requiring the `AppBarNav` and `AppBarAction` components.\n */\nexport const AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n  function AppBar(props, ref) {\n    const {\n      className,\n      theme,\n      stacked,\n      height,\n      align,\n      grid,\n      gridName,\n      justify,\n      reversed,\n      gridColumns,\n      disableWrap,\n      disablePadding,\n      position,\n      pagePosition,\n      surfaceColor,\n      scrollbarOffset,\n      disableElevation,\n      as: Component = position ? \"header\" : \"div\",\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <Component\n        {...remaining}\n        className={appBar({\n          className,\n          theme,\n          position,\n          pagePosition,\n          disableElevation,\n          scrollbarOffset,\n          height,\n          grid,\n          gridName,\n          gridColumns,\n          align,\n          stacked,\n          justify,\n          reversed,\n          surfaceColor,\n          disableWrap,\n          disablePadding,\n        })}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","box","cssUtils","bem","styles","appBar","options","className","theme","stacked","height","position","pagePosition","scrollbarOffset","align","grid","gridColumns","gridName","justify","reversed","surfaceColor","disableWrap","disablePadding","disableElevation","surface","clear","fixed","sticky","elevated","fullWidth","backgroundColor","undefined","AppBar","props","ref","as","Component","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,GAAG,QAAyB,mBAAmB;AACxD,SACEC,QAAQ,QAIH,iBAAiB;AAExB,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AAyFnB;;;;;CAKC,GACD,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,SAASD,UAAU,SAAS,QAAQ,EACpCE,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,cAAc,IAAI,EAClBC,cAAc,EACdC,gBAAgB,EACjB,GAAGjB;IACJ,MAAMkB,UAAUhB,UAAU;IAC1B,MAAMiB,QAAQjB,UAAU;IAExB,OAAOT,IACLK,OAAO;QACLoB;QACA,CAACd,OAAO,EAAEA,WAAW;QACrBgB,OAAOf,aAAa;QACpBF;QACAkB,QAAQhB,aAAa;QACrB,CAACC,aAAa,EAAED,aAAa;QAC7BiB,UAAUjB,aAAa,YAAY,CAACY;QACpC,oBAAoBV;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAZ,IAAI;QACFa;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACApB,SAAS;QACP4B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMyB,uBAAShC,WACpB,SAASgC,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ3B,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNI,KAAK,EACLC,IAAI,EACJE,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRH,WAAW,EACXK,WAAW,EACXC,cAAc,EACdX,QAAQ,EACRC,YAAY,EACZQ,YAAY,EACZP,eAAe,EACfU,gBAAgB,EAChBY,IAAIC,YAAYzB,WAAW,WAAW,KAAK,EAC3C0B,QAAQ,EACR,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACG;QACE,GAAGE,SAAS;QACb/B,WAAWF,OAAO;YAChBE;YACAC;YACAG;YACAC;YACAW;YACAV;YACAH;YACAK;YACAE;YACAD;YACAF;YACAL;YACAS;YACAC;YACAC;YACAC;YACAC;QACF;QACAY,KAAKA;kBAEJG;;AAGP,GACA"}

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,38 +60,25 @@ $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;
 
-$var-lookup: (
-  height: (
-    var: --rmd-app-bar-height,
-    value: $height,
-  ),
-  surface-background-color: (
-    var: --rmd-app-bar-surface-background-color,
-    value: $surface-background-color,
-  ),
-  surface-color: (
-    var: --rmd-app-bar-surface-color,
-    value: $surface-color,
-  ),
-);
+$variables: (height, surface-background-color, surface-color);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "app-bar var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "app-bar");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "app-bar var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "app-bar")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -121,134 +109,138 @@ $var-lookup: (
   @include set-var(height, $dense-height);
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
+    @include set-var(height, $height);
+    @include set-var(surface-background-color, $surface-background-color);
+    @include set-var(surface-color, $surface-color);
+  }
+}
 
-    .rmd-app-bar {
-      @include use-var(height);
-
-      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 {
-          left: 0;
-          position: fixed;
-          // Note: right and width were added to support the main navigation
-          // behavior with toggleable full-height navigation
-          right: 0;
-          width: auto;
-          z-index: $fixed-z-index;
-        }
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(app-bar, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
+      }
 
-        @if $fixed-elevation and $fixed-elevation != 0 {
-          &--elevated {
-            @include box-shadows.box-shadow(
-              $fixed-elevation,
-              $disable-colors: true
-            );
+      .rmd-app-bar {
+        @include use-var(height);
+        @include box.set-var(gap, $gap);
+        @include box.set-var(padding, $vertical-padding $horizontal-padding);
+
+        // 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;
+
+        @if not $disable-fixed or not $disable-sticky {
+          &--fixed {
+            left: 0;
+            position: fixed;
+            // Note: right and width were added to support the main navigation
+            // behavior with toggleable full-height navigation
+            right: 0;
+            width: auto;
+            z-index: $fixed-z-index;
           }
-        }
 
-        @each $position in $fixed-positions {
-          &--#{$position} {
-            #{$position}: 0;
+          @if $fixed-elevation and $fixed-elevation != 0 {
+            &--elevated {
+              @include box-shadows.box-shadow(
+                $fixed-elevation,
+                $disable-colors: true
+              );
+            }
           }
-        }
 
-        @if not $disable-sticky {
-          &--sticky {
-            position: sticky;
+          @each $position in $fixed-positions {
+            &--#{$position} {
+              #{$position}: 0;
+            }
           }
-        }
-      }
-
-      &--auto {
-        // do not set variable so that child AppBar can maintain their height as needed
-        height: auto;
-      }
 
-      &--stacked {
-        flex-direction: column;
-        gap: 0;
-        padding: 0;
-      }
+          @if not $disable-sticky {
+            &--sticky {
+              position: sticky;
+            }
+          }
+        }
 
-      @if not $disable-dense-theme {
-        &--dense {
-          @include set-var(height, $dense-height);
+        &--auto {
+          // do not set variable so that child AppBar can maintain their height as needed
+          height: auto;
         }
-      }
 
-      @if not $disable-prominent-theme {
-        &--prominent {
-          @include set-var(height, $prominent-height);
+        &--stacked {
+          flex-direction: column;
+          gap: 0;
+          padding: 0;
         }
-      }
 
-      @if not $disable-prominent-dense-theme {
-        &--prominent-dense {
-          @include set-var(height, $prominent-dense-height);
+        @if not $disable-dense-theme {
+          &--dense {
+            @include set-var(height, $dense-height);
+          }
         }
-      }
 
-      @if not $disable-surface-theme {
-        &--surface {
-          @include use-var(background-color, surface-background-color);
-          @include use-var(color, surface-color);
+        @if not $disable-prominent-theme {
+          &--prominent {
+            @include set-var(height, $prominent-height);
+          }
         }
-      }
 
-      @if not $disable-scrollbar-offset {
-        &--scrollbar-offset {
-          @include utils.rtl {
-            margin-right: calc(-1 * #{utils.scrollbar-size()});
+        @if not $disable-prominent-dense-theme {
+          &--prominent-dense {
+            @include set-var(height, $prominent-dense-height);
           }
+        }
 
-          padding-right: calc(
-            #{$horizontal-padding} + #{utils.scrollbar-size()}
-          );
+        @if not $disable-surface-theme {
+          &--surface {
+            @include use-var(background-color, surface-background-color);
+            @include use-var(color, surface-color);
+          }
         }
 
-        @if not $disable-static-scrollbar-offset {
-          &--static-scrollbar-offset {
-            width: calc(100% + utils.scrollbar-size());
+        @if not $disable-scrollbar-offset {
+          &--scrollbar-offset {
+            @include utils.rtl {
+              margin-right: calc(-1 * #{utils.scrollbar-size()});
+            }
+
+            padding-right: calc(
+              #{$horizontal-padding} + #{utils.scrollbar-size()}
+            );
+          }
+
+          @if not $disable-static-scrollbar-offset {
+            &--static-scrollbar-offset {
+              width: calc(100% + utils.scrollbar-size());
+            }
           }
         }
       }
-    }
 
-    @if not $disable-title {
-      .rmd-app-bar-title {
-        @include utils.auto-rtl(margin-left, $keyline - $horizontal-padding);
+      @if not $disable-title {
+        .rmd-app-bar-title {
+          @include utils.auto-rtl(margin-left, $keyline - $horizontal-padding);
 
-        flex: 1 1 auto;
-        margin-bottom: 0;
-        margin-top: 0;
+          flex: 1 1 auto;
+          margin-bottom: 0;
+          margin-top: 0;
 
-        &--keyline {
-          @include utils.auto-rtl(
-            margin-left,
-            $title-keyline - $horizontal-padding
-          );
-        }
+          &--keyline {
+            @include utils.auto-rtl(
+              margin-left,
+              $title-keyline - $horizontal-padding
+            );
+          }
 
-        &--nav-keyline {
-          @include utils.auto-rtl(
-            margin-left,
-            $title-keyline - $horizontal-padding - $gap - button.$icon-size
-          );
+          &--nav-keyline {
+            @include utils.auto-rtl(margin-left, $nav-keyline);
+          }
         }
       }
     }

package/dist/avatar/Avatar.d.ts

@@ -12,7 +12,18 @@ declare module "react" {
     }
 }
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
-export interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, AvatarClassNameOptions {
+/**
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
+ */
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, AvatarClassNameOptions {
+    /**
+     * Since avatars are normally presentational data, they are hidden from screen
+     * readers by default.
+     *
+     * @defaultValue `true`
+     */
+    "aria-hidden"?: HTMLAttributes<HTMLSpanElement>["aria-hidden"];
     /**
      * 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
@@ -71,5 +82,8 @@ export interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, AvatarClas
  *   return <Avatar src="/path-to-img.png" />;
  * }
  * ```
+ *
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
  */
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/avatar/Avatar.js

@@ -19,8 +19,11 @@ import { avatar, avatarImage } from "./styles.js";
  *   return <Avatar src="/path-to-img.png" />;
  * }
  * ```
+ *
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
  */ export const Avatar = /*#__PURE__*/ forwardRef(function Avatar(props, ref) {
-    const { className, children, src, alt = "", size = "avatar", color = "", theme, imgProps, referrerPolicy, ...remaining } = props;
+    const { "aria-hidden": ariaHidden = true, className, children, src, alt = "", size = "avatar", color = "", theme, imgProps, referrerPolicy, ...remaining } = props;
     let img;
     if (src || imgProps) {
         img = /*#__PURE__*/ _jsx("img", {
@@ -35,8 +38,8 @@ import { avatar, avatarImage } from "./styles.js";
     }
     return /*#__PURE__*/ _jsxs("span", {
         ...remaining,
+        "aria-hidden": ariaHidden,
         ref: ref,
-        role: "presentation",
         className: avatar({
             size,
             color,

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 {\n  forwardRef,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n} 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\n/**\n * @remarks \\@since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n    AvatarClassNameOptions {\n  /**\n   * Since avatars are normally presentational data, they are hidden from screen\n   * readers by default.\n   *\n   * @defaultValue `true`\n   */\n  \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\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 *\n * @remarks \\@since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\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: ReactNode;\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        aria-hidden={ariaHidden}\n        ref={ref}\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","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA0E/E;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}