@react-md/core 1.0.0-next.9 → 6.0.1

package/dist/app-bar/AppBar.js

@@ -1,52 +1,12 @@
 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");
+import { appBar } from "./styles.js";
 /**
- * Apply the `className`s for a tree component. This will be type-safe if using
- * typescript.
- *
- * @remarks \@since 6.0.0
- */ export function appBar(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",
-        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,
-        surfaceColor
-    }), className);
-}
-/**
- * **Server Component**
- *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { AppBar, AppBarTitle, Button } from "@react-md/core";
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
+ * import { Button } from "@react-md/core/button/Button";
  * import MenuIcon from "@react-md/material-icons/MenuIcon";
  * import MoreVertIcon from "@react-md/material-icons/MoreVertIcon";
  * import type { ReactElement } from "react";
@@ -62,8 +22,7 @@ const styles = bem("rmd-app-bar");
  * }
  * ```
  *
- * @remarks
- * \@since 6.0.0 The `AppBar` was updated to use `gap` for spacing
+ * @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, align, grid, gridName, justify, reversed, gridColumns, disableWrap, disablePadding, position, pagePosition, surfaceColor, scrollbarOffset, disableElevation, as: Component = position ? "header" : "div", children, ...remaining } = props;

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 { 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"}
+{"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import {\n  type ElementType,\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n} from \"react\";\n\nimport { type AppBarClassNameOptions, appBar } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: Ref<HTMLDivElement>;\n    className: string;\n  }\n>;\n\n/**\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 * @example Simple Example\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\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 * @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":["forwardRef","appBar","AppBar","props","ref","className","theme","stacked","height","align","grid","gridName","justify","reversed","gridColumns","disableWrap","disablePadding","position","pagePosition","surfaceColor","scrollbarOffset","disableElevation","as","Component","children","remaining"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAAsCC,MAAM,QAAQ,cAAc;AA4BlE;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,uBAASF,WACpB,SAASE,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,cAAc,EACdC,QAAQ,EACRC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,gBAAgB,EAChBC,IAAIC,YAAYN,WAAW,WAAW,KAAK,EAC3CO,QAAQ,EACR,GAAGC,WACJ,GAAGtB;IAEJ,qBACE,KAACoB;QACE,GAAGE,SAAS;QACbpB,WAAWJ,OAAO;YAChBI;YACAC;YACAW;YACAC;YACAG;YACAD;YACAZ;YACAE;YACAC;YACAG;YACAL;YACAF;YACAK;YACAC;YACAM;YACAJ;YACAC;QACF;QACAZ,KAAKA;kBAEJoB;;AAGP,GACA"}

package/dist/app-bar/AppBarTitle.d.ts

@@ -1,36 +1,13 @@
-/// <reference types="react" />
 import { type TextOverflow } from "../cssUtils.js";
-import { type TypographyProps, type TypographyType } from "../typography/Typography.js";
+import { type TypographyProps } from "../typography/Typography.js";
+import { type TypographyType } from "../typography/typographyStyles.js";
+import { type AppBarTitleClassNameOptions } from "./styles.js";
 /**
- * - `"small"` - the first character in the title will be `1rem` (`$keyline`)
- *   from the edge of the app bar horizontally
- * - `"nav"` - this should be set when there is a nav button before the title so
- *   that the first character in the title will be `4.5rem` (`title-keyline`)
- * - `"list"` - this should be used when the title should align with the list
- *   item keyline and there is no nav icon before.
- *
- * @remarks \@since 6.0.0
- */
-export type AppBarTitleKeyline = "small" | "nav" | "list";
-/** @remarks \@since 6.0.0 */
-export interface AppBarTitleClassNameOptions {
-    className?: string;
-    /**
-     * @defaultValue `"small"`
-     * @see {@link AppBarTitleKeyline}
-     */
-    keyline?: AppBarTitleKeyline;
-}
-/**
- * Apply the `className`s for a `AppBarTitle` component. This will be type-safe
- * if using typescript.
- *
- * @remarks \@since 6.0.0
- */
-export declare function appBarTitle(options?: AppBarTitleClassNameOptions): string;
-/**
- * @remarks \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the
- * `AppBarTitle` does not line wrap by default.
+ * @since 6.0.0 The `keyline` prop was changed from a boolean to a type
+ * union of different keylines: {@link AppBarTitleKeyline}
+ * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`
+ * prop inherited through the base `Typography` component. The `textOverflow`
+ * will default to `"ellipsis"` which is new as well.
  */
 export interface AppBarTitleProps extends TypographyProps, AppBarTitleClassNameOptions {
     /** @defaultValue `"headline-6"` */
@@ -41,12 +18,10 @@ export interface AppBarTitleProps extends TypographyProps, AppBarTitleClassNameO
     textOverflow?: TextOverflow;
 }
 /**
- * **Server Component**
- *
- * @example
- * Updating the Keyline
+ * @example Updating the Keyline
  * ```tsx
- * import { AppBar, AppBarTitle } from "@react-md/core";
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -60,10 +35,10 @@ export interface AppBarTitleProps extends TypographyProps, AppBarTitleClassNameO
  * }
  * ```
  *
- * @remarks
- * \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`
- * does not line wrap by default.
- * \@since 6.0.0 The {@link keyline} prop was changed from a boolean to a type
+ * @since 6.0.0 The `keyline` prop was changed from a boolean to a type
  * union of different keylines: {@link AppBarTitleKeyline}
+ * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`
+ * prop inherited through the base `Typography` component. The `textOverflow`
+ * will default to `"ellipsis"` which is new as well.
  */
 export declare const AppBarTitle: import("react").ForwardRefExoticComponent<AppBarTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/app-bar/AppBarTitle.js

@@ -1,28 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 import { Typography } from "../typography/Typography.js";
-import { bem } from "../utils/bem.js";
-const styles = bem("rmd-app-bar-title");
+import { appBarTitle } from "./styles.js";
 /**
- * Apply the `className`s for a `AppBarTitle` component. This will be type-safe
- * if using typescript.
- *
- * @remarks \@since 6.0.0
- */ export function appBarTitle(options = {}) {
-    const { className, keyline = "small" } = options;
-    return cnb(styles({
-        keyline: keyline == "list",
-        "nav-keyline": keyline === "nav"
-    }), className);
-}
-/**
- * **Server Component**
- *
- * @example
- * Updating the Keyline
+ * @example Updating the Keyline
  * ```tsx
- * import { AppBar, AppBarTitle } from "@react-md/core";
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -36,11 +20,11 @@ const styles = bem("rmd-app-bar-title");
  * }
  * ```
  *
- * @remarks
- * \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`
- * does not line wrap by default.
- * \@since 6.0.0 The {@link keyline} prop was changed from a boolean to a type
+ * @since 6.0.0 The `keyline` prop was changed from a boolean to a type
  * union of different keylines: {@link AppBarTitleKeyline}
+ * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`
+ * prop inherited through the base `Typography` component. The `textOverflow`
+ * will default to `"ellipsis"` which is new as well.
  */ export const AppBarTitle = /*#__PURE__*/ forwardRef(function AppBarTitle(props, ref) {
     const { type = "headline-6", keyline = "small", children, className, textOverflow = "ellipsis", ...remaining } = props;
     return /*#__PURE__*/ _jsx(Typography, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/app-bar/AppBarTitle.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport {\n  Typography,\n  type TypographyProps,\n  type TypographyType,\n} from \"../typography/Typography.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-app-bar-title\");\n\n/**\n * - `\"small\"` - the first character in the title will be `1rem` (`$keyline`)\n *   from the edge of the app bar horizontally\n * - `\"nav\"` - this should be set when there is a nav button before the title so\n *   that the first character in the title will be `4.5rem` (`title-keyline`)\n * - `\"list\"` - this should be used when the title should align with the list\n *   item keyline and there is no nav icon before.\n *\n * @remarks \\@since 6.0.0\n */\nexport type AppBarTitleKeyline = \"small\" | \"nav\" | \"list\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface AppBarTitleClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"small\"`\n   * @see {@link AppBarTitleKeyline}\n   */\n  keyline?: AppBarTitleKeyline;\n}\n\n/**\n * Apply the `className`s for a `AppBarTitle` component. This will be type-safe\n * if using typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {\n  const { className, keyline = \"small\" } = options;\n  return cnb(\n    styles({\n      keyline: keyline == \"list\",\n      \"nav-keyline\": keyline === \"nav\",\n    }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the\n * `AppBarTitle` does not line wrap by default.\n */\nexport interface AppBarTitleProps\n  extends TypographyProps,\n    AppBarTitleClassNameOptions {\n  /** @defaultValue `\"headline-6\"` */\n  type?: TypographyType;\n\n  /**\n   * @defaultValue `\"ellipsis\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Updating the Keyline\n * ```tsx\n * import { AppBar, AppBarTitle } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <AppBarTitle keyline=\"nav\">\n *         Offset as if there was a nav button to the left\n *       </AppBarTitle>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`\n * does not line wrap by default.\n * \\@since 6.0.0 The {@link keyline} prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n */\nexport const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(\n  function AppBarTitle(props, ref) {\n    const {\n      type = \"headline-6\",\n      keyline = \"small\",\n      children,\n      className,\n      textOverflow = \"ellipsis\",\n      ...remaining\n    } = props;\n    return (\n      <Typography\n        {...remaining}\n        ref={ref}\n        type={type}\n        className={appBarTitle({\n          keyline,\n          className,\n        })}\n        textOverflow={textOverflow}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","Typography","bem","styles","appBarTitle","options","className","keyline","AppBarTitle","props","ref","type","children","textOverflow","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AAEnC,SACEC,UAAU,QAGL,8BAA8B;AACrC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAyBnB;;;;;CAKC,GACD,OAAO,SAASE,YAAYC,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAEC,UAAU,OAAO,EAAE,GAAGF;IACzC,OAAON,IACLI,OAAO;QACLI,SAASA,WAAW;QACpB,eAAeA,YAAY;IAC7B,IACAD;AAEJ;AAkBA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAME,4BAAcR,WACzB,SAASQ,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,OAAO,YAAY,EACnBJ,UAAU,OAAO,EACjBK,QAAQ,EACRN,SAAS,EACTO,eAAe,UAAU,EACzB,GAAGC,WACJ,GAAGL;IACJ,qBACE,KAACR;QACE,GAAGa,SAAS;QACbJ,KAAKA;QACLC,MAAMA;QACNL,WAAWF,YAAY;YACrBG;YACAD;QACF;QACAO,cAAcA;kBAEbD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/app-bar/AppBarTitle.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport { type AppBarTitleClassNameOptions, appBarTitle } from \"./styles.js\";\n\n/**\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport interface AppBarTitleProps\n  extends TypographyProps,\n    AppBarTitleClassNameOptions {\n  /** @defaultValue `\"headline-6\"` */\n  type?: TypographyType;\n\n  /**\n   * @defaultValue `\"ellipsis\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @example Updating the Keyline\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <AppBarTitle keyline=\"nav\">\n *         Offset as if there was a nav button to the left\n *       </AppBarTitle>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(\n  function AppBarTitle(props, ref) {\n    const {\n      type = \"headline-6\",\n      keyline = \"small\",\n      children,\n      className,\n      textOverflow = \"ellipsis\",\n      ...remaining\n    } = props;\n    return (\n      <Typography\n        {...remaining}\n        ref={ref}\n        type={type}\n        className={appBarTitle({\n          keyline,\n          className,\n        })}\n        textOverflow={textOverflow}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["forwardRef","Typography","appBarTitle","AppBarTitle","props","ref","type","keyline","children","className","textOverflow","remaining"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAGnC,SAASC,UAAU,QAA8B,8BAA8B;AAE/E,SAA2CC,WAAW,QAAQ,cAAc;AAqB5E;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,OAAO,YAAY,EACnBC,UAAU,OAAO,EACjBC,QAAQ,EACRC,SAAS,EACTC,eAAe,UAAU,EACzB,GAAGC,WACJ,GAAGP;IACJ,qBACE,KAACH;QACE,GAAGU,SAAS;QACbN,KAAKA;QACLC,MAAMA;QACNG,WAAWP,YAAY;YACrBK;YACAE;QACF;QACAC,cAAcA;kBAEbF;;AAGP,GACA"}

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

@@ -1,3 +1,7 @@
+////
+/// @group app-bar
+////
+
 @use "sass:map";
 
 @use "../utils";
@@ -5,67 +9,173 @@
 @use "../box-shadows";
 @use "../interaction/interaction";
 @use "../theme/a11y";
+@use "../theme/colors";
 @use "../theme/theme";
 @use "../button/button";
 @use "../typography/typography";
 
+/// Set to `true` to disable all the styles
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` to only disable the `position: fixed` styles
+/// @type Boolean
 $disable-fixed: false !default;
+
+/// Set to `true` to only disable the `position: sticky` styles
+/// @type Boolean
 $disable-sticky: false !default;
+
+/// Set to `true` to only disable the app bar surface color styles.
+/// @type Boolean
 $disable-surface-theme: $disable-everything !default;
-$disable-dense-theme: false !default;
+
+/// Set to `true` to only disable the dense height styles
+/// @type Boolean
+$disable-dense: false !default;
+
+/// Set to `true` to only disable the prominent height styles
+/// @type Boolean
 $disable-prominent-theme: false !default;
-$disable-prominent-dense-theme: false !default;
+
+/// Set to `true` to only disable the prominent-dense height styles
+/// @type Boolean
+$disable-prominent-dense: false !default;
+
+/// Set to `true` to disable the styles that offset the app bar based on a
+/// visible scrollbar.
+///
+/// @type Boolean
 $disable-scrollbar-offset: false !default;
+
+/// Set to `true` to only disable the styles for offsetting the app bar for a
+/// visible toolbar while `position: static`.
+///
+/// @type Boolean
 $disable-static-scrollbar-offset: false !default;
-$disable-primary-interaction-colors: interaction.$light-surface-base-background-color
-  == interaction.$dark-surface-base-background-color !default;
-$disable-secondary-interaction-colors: interaction.$light-surface-base-background-color
-  == interaction.$dark-surface-base-background-color !default;
 
+/// Set to `true` to only disable the app bar title styles.
+/// @type Boolean
 $disable-title: false !default;
 
+/// Sets the `gap` css property to apply spacing between each item.
+/// @type Number
 $gap: 0.25rem !default;
+
+/// The default height for an app bar.
+/// @type Number
 $height: 3.5rem !default;
+
+/// The default dense height for an app bar.
+/// @type Number
 $dense-height: 3rem !default;
+
+/// The default prominent height for an app bar.
+/// @type Number
 $prominent-height: $height * 2 !default;
+
+/// The default dense prominent height for an app bar.
+/// @type Number
 $prominent-dense-height: $dense-height * 2 !default;
 
+/// The z-index to use when the app bar is `position: fixed` or
+/// `position: sticky.
+///
+/// @type Number
 $fixed-z-index: 10 !default;
+
+/// This should be a number from 0 to 24 representing the material design
+/// elevation. It is used to generate the correct surface styles with box shadow.
+/// @type Number
 $fixed-elevation: 2 !default;
+
+/// Allows the app bar to be fixed to the top and bottom of the viewport. If you
+/// don't need support for one, remove it from the list.
+///
+/// @example scss - Removing Top Fixed Position<!-- no-compile -->
+///   @use "@react-md/core" with (
+///     $app-bar-fixed-positions: (bottom)
+///   );
+///
+/// @type List
 $fixed-positions: top bottom !default;
 
+/// The background color to use when `theme="surface"` and using the global light
+/// theme
+/// @type Color
 $light-theme-surface-background-color: theme.$light-theme-surface-color !default;
+
+/// The text color to use when `theme="surface"` and using the global light theme
+/// @type Color
 $light-theme-surface-color: a11y.contrast-color(
   $light-theme-surface-background-color
 ) !default;
+
+/// The background color to use when `theme="surface"` and using the global dark
+/// theme
+/// @type Color
 $dark-theme-surface-background-color: if(
   theme.$disable-dark-elevation,
   theme.$dark-theme-surface-color,
   map.get(theme.$dark-elevation-colors, $fixed-elevation)
 ) !default;
-$dark-theme-surface-color: #fff !default;
 
+/// The text color to use when `theme="surface"` and using the global dark theme
+/// @type Color
+$dark-theme-surface-color: colors.$white !default;
+
+/// The default `theme="surface"` background color. You normally don't want to
+/// change this value.
+/// @type Color
 $surface-background-color: theme.get-default-color(
   $light-theme-surface-background-color,
   $dark-theme-surface-background-color
 ) !default;
+
+/// The default `theme="surface"` text color. You normally don't want to change
+/// this value.
+/// @type Color
 $surface-color: theme.get-default-color(
   $light-theme-surface-color,
   $dark-theme-surface-color
 ) !default;
 
+/// Horizontal padding for the app bar
+/// @type String|Number
 $horizontal-padding: 0.25rem !default;
+
+/// Vertical padding for the app bar
+/// @type String|Number
 $vertical-padding: 0 !default;
 
+/// This value is used to align the first element (normally a button) nicely with
+/// other elements on the page.
+///
+/// @type String|Number
 $keyline: 1rem !default;
+
+/// This value is used to align the `AppBarTitle` with other elements on the page
+/// (like `ListItem`).
+/// @type String|Number
 $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`
+
+/// This is used to align a nav button with an `AppBarTitle` nicely in the
+/// `AppBar`.
+///
+/// 3rem is the icon-button's default size. can't use the variables since it's
+/// based on font-size now and `em`
+///
+/// @type String|Number
 $nav-keyline: $title-keyline - $horizontal-padding - $gap - 3rem !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (height, surface-background-color, surface-color);
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "app-bar");
   @if $fallback {
@@ -75,18 +185,26 @@ $variables: (height, surface-background-color, surface-color);
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "app-bar")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+/// Applies the light the variables based on feature flags
 @mixin use-light-theme {
-  @if not $disable-surface-theme {
+  @if not $disable-everything and not $disable-surface-theme {
     @include set-var(
       surface-background-color,
       $light-theme-surface-background-color
@@ -95,8 +213,9 @@ $variables: (height, surface-background-color, surface-color);
   }
 }
 
+/// Applies the dark the variables based on feature flags
 @mixin use-dark-theme {
-  @if not $disable-surface-theme {
+  @if not $disable-everything and not $disable-surface-theme {
     @include set-var(
       surface-background-color,
       $dark-theme-surface-background-color
@@ -105,10 +224,14 @@ $variables: (height, surface-background-color, surface-color);
   }
 }
 
-@mixin dense {
-  @include set-var(height, $dense-height);
+/// Applies the dense height variables
+@mixin dense-variables {
+  @if not $disable-everything and $dense-height {
+    @include set-var(height, $dense-height);
+  }
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(height, $height);
@@ -117,6 +240,10 @@ $variables: (height, surface-background-color, surface-color);
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(app-bar, $disable-layer) {
@@ -125,9 +252,9 @@ $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);
+        @include use-var(height);
 
         // 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`
@@ -179,21 +306,21 @@ $variables: (height, surface-background-color, surface-color);
           padding: 0;
         }
 
-        @if not $disable-dense-theme {
+        @if not $disable-dense {
           &--dense {
-            @include set-var(height, $dense-height);
+            height: $dense-height;
           }
         }
 
         @if not $disable-prominent-theme {
           &--prominent {
-            @include set-var(height, $prominent-height);
+            height: $prominent-height;
           }
         }
 
-        @if not $disable-prominent-dense-theme {
+        @if not $disable-prominent-dense {
           &--prominent-dense {
-            @include set-var(height, $prominent-dense-height);
+            height: $prominent-dense-height;
           }
         }
 
@@ -206,10 +333,6 @@ $variables: (height, surface-background-color, surface-color);
 
         @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()}
             );
@@ -225,21 +348,33 @@ $variables: (height, surface-background-color, surface-color);
 
       @if not $disable-title {
         .rmd-app-bar-title {
-          @include utils.auto-rtl(margin-left, $keyline - $horizontal-padding);
+          $title-h-margin: $keyline - $horizontal-padding;
+          $title-keyline-h-margin: $title-keyline - $horizontal-padding;
 
           flex: 1 1 auto;
-          margin-bottom: 0;
-          margin-top: 0;
+          margin: 0 auto 0 $title-h-margin;
 
           &--keyline {
-            @include utils.auto-rtl(
-              margin-left,
-              $title-keyline - $horizontal-padding
-            );
+            margin-left: $title-keyline-h-margin;
           }
 
           &--nav-keyline {
-            @include utils.auto-rtl(margin-left, $nav-keyline);
+            margin-left: $nav-keyline;
+          }
+
+          @include utils.rtl {
+            margin-left: 0;
+            margin-right: $title-h-margin;
+
+            &--keyline {
+              margin-left: 0;
+              margin-right: $title-keyline-h-margin;
+            }
+
+            &--nav-keyline {
+              margin-left: 0;
+              margin-right: $nav-keyline;
+            }
           }
         }
       }