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

package/dist/link/SkipToMainContent.d.ts

@@ -1,11 +1,14 @@
 import { type ReactNode } from "react";
 import { type LinkProps } from "./Link.js";
-import { type SKipToMainContentClassNameOptions } from "./styles.js";
+import { type SkipToMainContentClassNameOptions } from "./styles.js";
 /**
- * @remarks
- * \@since 6.0.0 The {@link mainId} is optional
+ * @since 6.0.0 The `mainId` is optional
  */
-export interface SkipToMainContentProps extends Omit<LinkProps, "href">, SKipToMainContentClassNameOptions {
+export interface SkipToMainContentProps extends Omit<LinkProps, "href">, SkipToMainContentClassNameOptions {
+    /**
+     * @since 6.0.0 Changed default value from `"skip-to-main-content"`
+     * @defaultValue `"skip-to-main"`
+     */
     id?: string;
     /**
      * An optional id for the main element. When this is not provided, the main
@@ -24,8 +27,32 @@ export interface SkipToMainContentProps extends Omit<LinkProps, "href">, SKipToM
 /**
  * **Client Component**
  *
- * @remarks
- * \@since 6.0.0 Throws an error after rendering if no main element can be found
+ * This component is used to allow keyboard users a quick way to skip directly
+ * to the main content instead of needing to tab through all navigation items.
+ *
+ * This component should not be used if using the LayoutAppBar component since
+ * it is already built-in.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { SkipToMainContent } from "@react-md/core/link/SkipToMainContent";
+ * import { type ReactElement } from "react";
+ *
+ * export default function SimpleSkipToMainContentExample(): ReactElement {
+ *   return (
+ *     <AppBar style={{ position: "relative" }}>
+ *       <SkipToMainContent />
+ *     </AppBar>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/skip-to-main-content | SkipToMainContent Demos}
+ * @since 6.0.0 Changed the default `id` from `"skip-to-main-content"` to
+ * `"skip-to-main"`.
+ * @since 6.0.0 The `mainId` prop is optional
+ * @since 6.0.0 Throws an error after rendering if no main element can be found
  * with the provided `mainId` in development mode. The previous behavior would
  * only log an error after being clicked.
  */

package/dist/link/SkipToMainContent.js

@@ -10,12 +10,36 @@ const getMainElement = (mainId)=>mainId ? document.getElementById(mainId) : docu
 /**
  * **Client Component**
  *
- * @remarks
- * \@since 6.0.0 Throws an error after rendering if no main element can be found
+ * This component is used to allow keyboard users a quick way to skip directly
+ * to the main content instead of needing to tab through all navigation items.
+ *
+ * This component should not be used if using the LayoutAppBar component since
+ * it is already built-in.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { SkipToMainContent } from "@react-md/core/link/SkipToMainContent";
+ * import { type ReactElement } from "react";
+ *
+ * export default function SimpleSkipToMainContentExample(): ReactElement {
+ *   return (
+ *     <AppBar style={{ position: "relative" }}>
+ *       <SkipToMainContent />
+ *     </AppBar>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/skip-to-main-content | SkipToMainContent Demos}
+ * @since 6.0.0 Changed the default `id` from `"skip-to-main-content"` to
+ * `"skip-to-main"`.
+ * @since 6.0.0 The `mainId` prop is optional
+ * @since 6.0.0 Throws an error after rendering if no main element can be found
  * with the provided `mainId` in development mode. The previous behavior would
  * only log an error after being clicked.
  */ export const SkipToMainContent = /*#__PURE__*/ forwardRef(function SkipToMainContent(props, ref) {
-    const { id = "skip-to-main", className, children = "Skip to main content", mainId = "", onClick = noop, unstyled = false, ...remaining } = props;
+    const { id = "skip-to-main", className, children = "Skip to main content", mainId = "", onClick = noop, unstyled, ...remaining } = props;
     const mainNodeRef = useRef(null);
     // want to warn the developer about missing main element in development
     // immediately to help prevent errors, but in production this can be lazy

package/dist/link/SkipToMainContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/link/SkipToMainContent.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useEffect, useRef, type ReactNode } from \"react\";\nimport { Link, type LinkProps } from \"./Link.js\";\nimport {\n  skipToMainContent,\n  type SKipToMainContentClassNameOptions,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst getMainElement = (mainId: string): HTMLElement | null =>\n  mainId\n    ? document.getElementById(mainId)\n    : document.querySelector<HTMLElement>('main,[role=\"main\"]');\n\n/**\n * @remarks\n * \\@since 6.0.0 The {@link mainId} is optional\n */\nexport interface SkipToMainContentProps\n  extends Omit<LinkProps, \"href\">,\n    SKipToMainContentClassNameOptions {\n  id?: string;\n\n  /**\n   * An optional id for the main element. When this is not provided, the main\n   * element will be found by:\n   *\n   * ```ts\n   * document.querySelector('main,[role=\"main\"]');\n   * ```\n   */\n  mainId?: string;\n\n  /**\n   * @defaultValue `\"Skip to main content\"`\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @remarks\n * \\@since 6.0.0 Throws an error after rendering if no main element can be found\n * with the provided `mainId` in development mode. The previous behavior would\n * only log an error after being clicked.\n */\nexport const SkipToMainContent = forwardRef<\n  HTMLAnchorElement,\n  SkipToMainContentProps\n>(function SkipToMainContent(props, ref) {\n  const {\n    id = \"skip-to-main\",\n    className,\n    children = \"Skip to main content\",\n    mainId = \"\",\n    onClick = noop,\n    unstyled = false,\n    ...remaining\n  } = props;\n\n  const mainNodeRef = useRef<HTMLElement | null>(null);\n  // want to warn the developer about missing main element in development\n  // immediately to help prevent errors, but in production this can be lazy\n  // initialized only once a keyboard user focuses and clicks this element\n  if (process.env.NODE_ENV !== \"production\") {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      mainNodeRef.current = getMainElement(mainId);\n\n      if (!mainNodeRef.current) {\n        const foundMainId = document.querySelector('main,[role=\"main\"]')?.id;\n        let message = `Unable to find a main element to focus`;\n        if (mainId) {\n          message += ` with an id of \"${mainId}\"`;\n\n          if (foundMainId) {\n            message += ` but a main element was found with an id of \"${foundMainId}\".`;\n          }\n        }\n        if (!foundMainId) {\n          message +=\n            '. There should be at least one <main> element or an element with role=\"main\" on the page for accessibility.';\n        }\n\n        throw new Error(message);\n      }\n    }, [mainId]);\n  }\n\n  return (\n    <Link\n      {...remaining}\n      id={id}\n      ref={ref}\n      href={`#${mainId}`}\n      onClick={(event) => {\n        onClick(event);\n        if (event.isPropagationStopped()) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        // see comment above useEffect\n        mainNodeRef.current ||= getMainElement(mainId);\n        mainNodeRef.current?.focus();\n      }}\n      className={skipToMainContent({\n        unstyled,\n        className,\n      })}\n    >\n      {children}\n    </Link>\n  );\n});\n"],"names":["forwardRef","useEffect","useRef","Link","skipToMainContent","noop","getMainElement","mainId","document","getElementById","querySelector","SkipToMainContent","props","ref","id","className","children","onClick","unstyled","remaining","mainNodeRef","process","env","NODE_ENV","current","foundMainId","message","Error","href","event","isPropagationStopped","preventDefault","stopPropagation","focus"],"mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAwB,QAAQ;AACtE,SAASC,IAAI,QAAwB,YAAY;AACjD,SACEC,iBAAiB,QAEZ,cAAc;AAErB,MAAMC,OAAO;AACX,aAAa;AACf;AAEA,MAAMC,iBAAiB,CAACC,SACtBA,SACIC,SAASC,cAAc,CAACF,UACxBC,SAASE,aAAa,CAAc;AA2B1C;;;;;;;CAOC,GACD,OAAO,MAAMC,kCAAoBX,WAG/B,SAASW,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,KAAK,cAAc,EACnBC,SAAS,EACTC,WAAW,sBAAsB,EACjCT,SAAS,EAAE,EACXU,UAAUZ,IAAI,EACda,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGP;IAEJ,MAAMQ,cAAclB,OAA2B;IAC/C,uEAAuE;IACvE,yEAAyE;IACzE,wEAAwE;IACxE,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtDtB,UAAU;YACRmB,YAAYI,OAAO,GAAGlB,eAAeC;YAErC,IAAI,CAACa,YAAYI,OAAO,EAAE;gBACxB,MAAMC,cAAcjB,SAASE,aAAa,CAAC,uBAAuBI;gBAClE,IAAIY,UAAU,CAAC,sCAAsC,CAAC;gBACtD,IAAInB,QAAQ;oBACVmB,WAAW,CAAC,gBAAgB,EAAEnB,OAAO,CAAC,CAAC;oBAEvC,IAAIkB,aAAa;wBACfC,WAAW,CAAC,6CAA6C,EAAED,YAAY,EAAE,CAAC;oBAC5E;gBACF;gBACA,IAAI,CAACA,aAAa;oBAChBC,WACE;gBACJ;gBAEA,MAAM,IAAIC,MAAMD;YAClB;QACF,GAAG;YAACnB;SAAO;IACb;IAEA,qBACE,KAACJ;QACE,GAAGgB,SAAS;QACbL,IAAIA;QACJD,KAAKA;QACLe,MAAM,CAAC,CAAC,EAAErB,OAAO,CAAC;QAClBU,SAAS,CAACY;YACRZ,QAAQY;YACR,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEAD,MAAME,cAAc;YACpBF,MAAMG,eAAe;YAErB,8BAA8B;YAC9BZ,YAAYI,OAAO,KAAKlB,eAAeC;YACvCa,YAAYI,OAAO,EAAES;QACvB;QACAlB,WAAWX,kBAAkB;YAC3Bc;YACAH;QACF;kBAECC;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/link/SkipToMainContent.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, forwardRef, useEffect, useRef } from \"react\";\n\nimport { Link, type LinkProps } from \"./Link.js\";\nimport {\n  type SkipToMainContentClassNameOptions,\n  skipToMainContent,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst getMainElement = (mainId: string): HTMLElement | null =>\n  mainId\n    ? document.getElementById(mainId)\n    : document.querySelector<HTMLElement>('main,[role=\"main\"]');\n\n/**\n * @since 6.0.0 The `mainId` is optional\n */\nexport interface SkipToMainContentProps\n  extends Omit<LinkProps, \"href\">,\n    SkipToMainContentClassNameOptions {\n  /**\n   * @since 6.0.0 Changed default value from `\"skip-to-main-content\"`\n   * @defaultValue `\"skip-to-main\"`\n   */\n  id?: string;\n\n  /**\n   * An optional id for the main element. When this is not provided, the main\n   * element will be found by:\n   *\n   * ```ts\n   * document.querySelector('main,[role=\"main\"]');\n   * ```\n   */\n  mainId?: string;\n\n  /**\n   * @defaultValue `\"Skip to main content\"`\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to allow keyboard users a quick way to skip directly\n * to the main content instead of needing to tab through all navigation items.\n *\n * This component should not be used if using the LayoutAppBar component since\n * it is already built-in.\n *\n * @example Simple Example\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { SkipToMainContent } from \"@react-md/core/link/SkipToMainContent\";\n * import { type ReactElement } from \"react\";\n *\n * export default function SimpleSkipToMainContentExample(): ReactElement {\n *   return (\n *     <AppBar style={{ position: \"relative\" }}>\n *       <SkipToMainContent />\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/skip-to-main-content | SkipToMainContent Demos}\n * @since 6.0.0 Changed the default `id` from `\"skip-to-main-content\"` to\n * `\"skip-to-main\"`.\n * @since 6.0.0 The `mainId` prop is optional\n * @since 6.0.0 Throws an error after rendering if no main element can be found\n * with the provided `mainId` in development mode. The previous behavior would\n * only log an error after being clicked.\n */\nexport const SkipToMainContent = forwardRef<\n  HTMLAnchorElement,\n  SkipToMainContentProps\n>(function SkipToMainContent(props, ref) {\n  const {\n    id = \"skip-to-main\",\n    className,\n    children = \"Skip to main content\",\n    mainId = \"\",\n    onClick = noop,\n    unstyled,\n    ...remaining\n  } = props;\n\n  const mainNodeRef = useRef<HTMLElement | null>(null);\n  // want to warn the developer about missing main element in development\n  // immediately to help prevent errors, but in production this can be lazy\n  // initialized only once a keyboard user focuses and clicks this element\n  if (process.env.NODE_ENV !== \"production\") {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      mainNodeRef.current = getMainElement(mainId);\n\n      if (!mainNodeRef.current) {\n        const foundMainId = document.querySelector('main,[role=\"main\"]')?.id;\n        let message = `Unable to find a main element to focus`;\n        if (mainId) {\n          message += ` with an id of \"${mainId}\"`;\n\n          if (foundMainId) {\n            message += ` but a main element was found with an id of \"${foundMainId}\".`;\n          }\n        }\n        if (!foundMainId) {\n          message +=\n            '. There should be at least one <main> element or an element with role=\"main\" on the page for accessibility.';\n        }\n\n        throw new Error(message);\n      }\n    }, [mainId]);\n  }\n\n  return (\n    <Link\n      {...remaining}\n      id={id}\n      ref={ref}\n      href={`#${mainId}`}\n      onClick={(event) => {\n        onClick(event);\n        if (event.isPropagationStopped()) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        // see comment above useEffect\n        mainNodeRef.current ||= getMainElement(mainId);\n        mainNodeRef.current?.focus();\n      }}\n      className={skipToMainContent({\n        unstyled,\n        className,\n      })}\n    >\n      {children}\n    </Link>\n  );\n});\n"],"names":["forwardRef","useEffect","useRef","Link","skipToMainContent","noop","getMainElement","mainId","document","getElementById","querySelector","SkipToMainContent","props","ref","id","className","children","onClick","unstyled","remaining","mainNodeRef","process","env","NODE_ENV","current","foundMainId","message","Error","href","event","isPropagationStopped","preventDefault","stopPropagation","focus"],"mappings":"AAAA;;AAEA,SAAyBA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAEtE,SAASC,IAAI,QAAwB,YAAY;AACjD,SAEEC,iBAAiB,QACZ,cAAc;AAErB,MAAMC,OAAO;AACX,aAAa;AACf;AAEA,MAAMC,iBAAiB,CAACC,SACtBA,SACIC,SAASC,cAAc,CAACF,UACxBC,SAASE,aAAa,CAAc;AA8B1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,MAAMC,kCAAoBX,WAG/B,SAASW,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,KAAK,cAAc,EACnBC,SAAS,EACTC,WAAW,sBAAsB,EACjCT,SAAS,EAAE,EACXU,UAAUZ,IAAI,EACda,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,MAAMQ,cAAclB,OAA2B;IAC/C,uEAAuE;IACvE,yEAAyE;IACzE,wEAAwE;IACxE,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtDtB,UAAU;YACRmB,YAAYI,OAAO,GAAGlB,eAAeC;YAErC,IAAI,CAACa,YAAYI,OAAO,EAAE;gBACxB,MAAMC,cAAcjB,SAASE,aAAa,CAAC,uBAAuBI;gBAClE,IAAIY,UAAU,CAAC,sCAAsC,CAAC;gBACtD,IAAInB,QAAQ;oBACVmB,WAAW,CAAC,gBAAgB,EAAEnB,OAAO,CAAC,CAAC;oBAEvC,IAAIkB,aAAa;wBACfC,WAAW,CAAC,6CAA6C,EAAED,YAAY,EAAE,CAAC;oBAC5E;gBACF;gBACA,IAAI,CAACA,aAAa;oBAChBC,WACE;gBACJ;gBAEA,MAAM,IAAIC,MAAMD;YAClB;QACF,GAAG;YAACnB;SAAO;IACb;IAEA,qBACE,KAACJ;QACE,GAAGgB,SAAS;QACbL,IAAIA;QACJD,KAAKA;QACLe,MAAM,CAAC,CAAC,EAAErB,QAAQ;QAClBU,SAAS,CAACY;YACRZ,QAAQY;YACR,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEAD,MAAME,cAAc;YACpBF,MAAMG,eAAe;YAErB,8BAA8B;YAC9BZ,YAAYI,OAAO,KAAKlB,eAAeC;YACvCa,YAAYI,OAAO,EAAES;QACvB;QACAlB,WAAWX,kBAAkB;YAC3Bc;YACAH;QACF;kBAECC;;AAGP,GAAG"}

package/dist/link/_link.scss

@@ -1,3 +1,7 @@
+////
+/// @group link
+////
+
 @use "sass:map";
 @use "../utils";
 @use "../theme/colors";
@@ -7,16 +11,41 @@
 @use "../typography/typography";
 @use "../transition/transition";
 
+/// Set to `true` to disable all the styles
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` to disable the `SkipToMainContent` component styles.
+/// @type Boolean
 $disable-skip-to-main: false !default;
+
+/// Set to `true` to disable the `display: inline-flex` styles for the link.
+/// @type Boolean
 $disable-flex: false !default;
 
+/// The transition duration for changing the link's color while hovered or
+/// visited.
+/// @type Number
 $transition-duration: transition.$linear-duration !default;
+
+/// The link's default text color
+/// @type Color
 $color: colors.$blue-500 !default;
+
+/// The link's default visited text color
+/// @type Color
 $visited-color: colors.$blue-600 !default;
+
+/// The link's default hover text color
+/// @type Color
 $hover-color: colors.$blue-400 !default;
 
+/// The `z-index` for the `SkipToMainContent` component.
+/// @type Number
 $skip-to-main-z-index: 10000 !default;
+
+/// A custom map of styles to apply to the `SkipToMainContent` component.
+/// @type Map
 $skip-to-main-styles: (
   color: theme.theme-get-var(on-primary-color),
   left: 50%,
@@ -25,12 +54,24 @@ $skip-to-main-styles: (
   transform: translateX(-50%),
   z-index: $skip-to-main-z-index,
 ) !default;
+
+/// A custom map of styles to apply to the `SkipToMainContent` component while
+/// it is focused. This will be applied on top of the `$skip-to-main-styles`.
+///
+/// @see $skip-to-main-styles
+/// @type Map
 $skip-to-main-active-styles: (
-  outline: 0.25rem dashed #000,
+  outline: 0.25rem dashed currentcolor,
 ) !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (color, visited-color, hover-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, "link");
   @if $fallback {
@@ -40,30 +81,34 @@ $variables: (color, visited-color, hover-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, "link")}: #{$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 {
   @include set-var(color, $light-theme-color);
 }
 
+/// Applies the dark the variables based on feature flags
 @mixin use-dark-theme {
   @include set-var(color, $dark-theme-color);
 }
 
-@mixin style($position) {
-  $property: "border-#{$position}";
-
-  #{$property}: get-var(size) inset get-var(color);
-}
-
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(color, $color);
@@ -72,58 +117,78 @@ $variables: (color, visited-color, hover-color);
   }
 }
 
-@mixin styles {
+/// 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 {
-    .rmd-link {
-      // can't use the normal @include interaction.surface since links are
-      // rendered inline and the `::before`/`::after` pseudo selectors only work
-      // nicely with block-like elements
-      @include utils.keyboard-only {
-        &:focus {
-          @include interaction.focus-styles($disable-background: true);
-        }
-      }
-      @include interaction.outline($outline-offset: false);
-      @include use-var(color);
-
-      transition: color $transition-duration;
+    @include utils.optional-layer(link, $disable-layer) {
+      .rmd-link {
+        @include interaction.outline($outline-offset: false);
+        @include use-var(color);
 
-      &:visited {
-        @include set-var(color, get-var(visited-color));
-      }
+        transition: color $transition-duration;
 
-      &:hover {
-        @include set-var(color, get-var(hover-color));
-      }
+        &:visited {
+          @include set-var(color, get-var(visited-color));
+        }
 
-      @if not $disable-flex {
-        &--flex {
-          @include icon.use-var(gap, spacing);
+        &:hover {
+          @include set-var(color, get-var(hover-color));
+        }
 
-          align-items: center;
-          display: inline-flex;
+        // can't use the normal @include interaction.surface since links are
+        // rendered inline and the `::before`/`::after` pseudo selectors only work
+        // nicely with block-like elements
+        @if utils.$disable-focus-visible {
+          @include utils.keyboard-only {
+            &:focus {
+              @include interaction.focus-styles($disable-background: true);
+            }
+          }
+        } @else {
+          &:focus-visible {
+            @include interaction.focus-styles($disable-background: true);
+          }
         }
-      }
 
-      @if not $disable-skip-to-main {
-        &--skip {
-          @include utils.map-to-styles(
-            map.remove(
-              typography.$headline-6-styles,
-              font-size,
-              font-weight,
-              letter-spacing
-            )
-          );
-          @include utils.sr-only(true, null);
+        @if not $disable-flex {
+          &--flex {
+            @include icon.use-var(gap, spacing);
+
+            align-items: center;
+            display: inline-flex;
+          }
         }
 
-        &--skip-styled {
-          @include utils.map-to-styles($skip-to-main-styles);
-          @include utils.keyboard-only {
-            &:focus,
-            &:active {
-              @include utils.map-to-styles($skip-to-main-active-styles);
+        @if not $disable-skip-to-main {
+          &--skip {
+            @include utils.map-to-styles(
+              map.remove(
+                typography.$headline-6-styles,
+                font-size,
+                font-weight,
+                letter-spacing
+              )
+            );
+            @include utils.sr-only(true, null);
+          }
+
+          &--skip-styled {
+            @include utils.map-to-styles($skip-to-main-styles);
+
+            @if utils.$disable-focus-visible {
+              @include utils.keyboard-only {
+                &:focus,
+                &:active {
+                  @include utils.map-to-styles($skip-to-main-active-styles);
+                }
+              }
+            } @else {
+              &:focus-visible {
+                @include utils.map-to-styles($skip-to-main-active-styles);
+              }
             }
           }
         }

package/dist/link/styles.d.ts

@@ -1,4 +1,4 @@
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface LinkClassNameOptions {
     className?: string;
     /** @defaultValue `false` */
@@ -8,11 +8,11 @@ export interface LinkClassNameOptions {
  * This really doesn't do much at this time since it only merges `rmd-link` with
  * the optional className. This was mostly added just for convention purposes.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function link(options?: LinkClassNameOptions): string;
-/** @remarks \@since 6.0.0 */
-export interface SKipToMainContentClassNameOptions {
+/** @since 6.0.0 */
+export interface SkipToMainContentClassNameOptions {
     className?: string;
     /**
      * @defaultValue `false`
@@ -20,6 +20,6 @@ export interface SKipToMainContentClassNameOptions {
     unstyled?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export declare function skipToMainContent(options?: SKipToMainContentClassNameOptions): string;
+export declare function skipToMainContent(options?: SkipToMainContentClassNameOptions): string;

package/dist/link/styles.js

@@ -5,7 +5,7 @@ const styles = bem("rmd-link");
  * This really doesn't do much at this time since it only merges `rmd-link` with
  * the optional className. This was mostly added just for convention purposes.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function link(options = {}) {
     const { flex, className } = options;
     return cnb(styles({
@@ -13,7 +13,7 @@ const styles = bem("rmd-link");
     }), className);
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function skipToMainContent(options = {}) {
     const { unstyled = false, className } = options;
     return cnb(styles({

package/dist/link/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/link/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-link\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface LinkClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  flex?: boolean;\n}\n\n/**\n * This really doesn't do much at this time since it only merges `rmd-link` with\n * the optional className. This was mostly added just for convention purposes.\n *\n * @remarks \\@since 6.0.0\n */\nexport function link(options: LinkClassNameOptions = {}): string {\n  const { flex, className } = options;\n\n  return cnb(styles({ flex }), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface SKipToMainContentClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  unstyled?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function skipToMainContent(\n  options: SKipToMainContentClassNameOptions = {}\n): string {\n  const { unstyled = false, className } = options;\n\n  return cnb(\n    styles({\n      skip: true,\n      \"skip-styled\": !unstyled,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","link","options","flex","className","skipToMainContent","unstyled","skip"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAUnB;;;;;CAKC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGF;IAE5B,OAAOJ,IAAIE,OAAO;QAAEG;IAAK,IAAIC;AAC/B;AAYA;;CAEC,GACD,OAAO,SAASC,kBACdH,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEI,WAAW,KAAK,EAAEF,SAAS,EAAE,GAAGF;IAExC,OAAOJ,IACLE,OAAO;QACLO,MAAM;QACN,eAAe,CAACD;IAClB,IACAF;AAEJ"}
+{"version":3,"sources":["../../src/link/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-link\");\n\n/** @since 6.0.0 */\nexport interface LinkClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  flex?: boolean;\n}\n\n/**\n * This really doesn't do much at this time since it only merges `rmd-link` with\n * the optional className. This was mostly added just for convention purposes.\n *\n * @since 6.0.0\n */\nexport function link(options: LinkClassNameOptions = {}): string {\n  const { flex, className } = options;\n\n  return cnb(styles({ flex }), className);\n}\n\n/** @since 6.0.0 */\nexport interface SkipToMainContentClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  unstyled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function skipToMainContent(\n  options: SkipToMainContentClassNameOptions = {}\n): string {\n  const { unstyled = false, className } = options;\n\n  return cnb(\n    styles({\n      skip: true,\n      \"skip-styled\": !unstyled,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","link","options","flex","className","skipToMainContent","unstyled","skip"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAUnB;;;;;CAKC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGF;IAE5B,OAAOJ,IAAIE,OAAO;QAAEG;IAAK,IAAIC;AAC/B;AAYA;;CAEC,GACD,OAAO,SAASC,kBACdH,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEI,WAAW,KAAK,EAAEF,SAAS,EAAE,GAAGF;IAExC,OAAOJ,IACLE,OAAO;QACLO,MAAM;QACN,eAAe,CAACD;IAClB,IACAF;AAEJ"}

package/dist/list/List.d.ts

@@ -5,18 +5,6 @@ declare module "react" {
         "--rmd-list-padding-v"?: string | number;
     }
 }
-/** @remarks \@since 6.0.0 */
-export interface ListClassNameOptions {
-    className?: string;
-    /** @defaultValue `false` */
-    dense?: boolean;
-    /** @defaultValue `false` */
-    horizontal?: boolean;
-}
-/**
- * @remarks \@since 6.0.0
- */
-export declare function list(options?: ListClassNameOptions): string;
 export type ListElement = HTMLUListElement | HTMLOListElement;
 export interface ListProps extends HTMLAttributes<ListElement> {
     /**
@@ -45,15 +33,14 @@ export interface ListProps extends HTMLAttributes<ListElement> {
     horizontal?: boolean;
 }
 /**
- * **Server Component**
- *
  * The `List` component is used to render a collection of clickable actions
  * vertically or horizontally and does not include the default `ol`/`ul` styles.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { List, ListItem, ListItemLink } from "@react-md/core";
+ * import { List } from "@react-md/core/list/List";
+ * import { ListItem } from "@react-md/core/list/ListItem";
+ * import { ListItemLink } from "@react-md/core/list/ListItemLink";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -85,5 +72,7 @@ export interface ListProps extends HTMLAttributes<ListElement> {
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/list | List Demos}
  */
 export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<ListElement>>;

package/dist/list/List.js

@@ -1,27 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
-import { bem } from "../utils/bem.js";
-const styles = bem("rmd-list");
+import { list } from "./listStyles.js";
 /**
- * @remarks \@since 6.0.0
- */ export function list(options = {}) {
-    const { dense = false, horizontal = false, className } = options;
-    return cnb(styles({
-        dense,
-        horizontal
-    }), className);
-}
-/**
- * **Server Component**
- *
  * The `List` component is used to render a collection of clickable actions
  * vertically or horizontally and does not include the default `ol`/`ul` styles.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { List, ListItem, ListItemLink } from "@react-md/core";
+ * import { List } from "@react-md/core/list/List";
+ * import { ListItem } from "@react-md/core/list/ListItem";
+ * import { ListItemLink } from "@react-md/core/list/ListItemLink";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -53,6 +41,8 @@ const styles = bem("rmd-list");
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/list | List Demos}
  */ export const List = /*#__PURE__*/ forwardRef(function List(props, ref) {
     const { className, children, role = "none", dense = false, ordered = false, horizontal = false, ...remaining } = props;
     const Component = ordered ? "ol" : "ul";

package/dist/list/List.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/List.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-list-padding-h\"?: string | number;\n    \"--rmd-list-padding-v\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-list\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface ListClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  horizontal?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function list(options: ListClassNameOptions = {}): string {\n  const { dense = false, horizontal = false, className } = options;\n\n  return cnb(styles({ dense, horizontal }), className);\n}\n\nexport type ListElement = HTMLUListElement | HTMLOListElement;\n\nexport interface ListProps extends HTMLAttributes<ListElement> {\n  /**\n   * @defaultValue `\"none\"`\n   */\n  role?: HTMLAttributes<ListElement>[\"role\"];\n\n  /**\n   * Set to `true` to decrease the amount of padding and font size within the\n   * list.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to render as `<ol>` instead of `<ul>` when the children\n   * are in a specific order. For example: steps within a recipe.\n   *\n   * @defaultValue `false`\n   */\n  ordered?: boolean;\n\n  /**\n   * Set this to `true` to render horizontally instead of vertically.\n   *\n   * @defaultValue `false`\n   */\n  horizontal?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * The `List` component is used to render a collection of clickable actions\n * vertically or horizontally and does not include the default `ol`/`ul` styles.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { List, ListItem, ListItemLink } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 1\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 3\n *       </ListItem>\n *       <ListItemLink href=\"/some-route\">Link Example</ListItemLink>\n *     </List>\n *   );\n * }\n * ```\n */\nexport const List = forwardRef<ListElement, ListProps>(\n  function List(props, ref) {\n    const {\n      className,\n      children,\n      role = \"none\",\n      dense = false,\n      ordered = false,\n      horizontal = false,\n      ...remaining\n    } = props;\n    const Component = (ordered ? \"ol\" : \"ul\") as \"ul\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        role={role}\n        className={list({\n          dense,\n          horizontal,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","list","options","dense","horizontal","className","List","props","ref","children","role","ordered","remaining","Component"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,QAAQ,KAAK,EAAEC,aAAa,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEzD,OAAOL,IAAIG,OAAO;QAAEG;QAAOC;IAAW,IAAIC;AAC5C;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMC,qBAAOR,WAClB,SAASQ,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJH,SAAS,EACTI,QAAQ,EACRC,OAAO,MAAM,EACbP,QAAQ,KAAK,EACbQ,UAAU,KAAK,EACfP,aAAa,KAAK,EAClB,GAAGQ,WACJ,GAAGL;IACJ,MAAMM,YAAaF,UAAU,OAAO;IACpC,qBACE,KAACE;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLE,MAAMA;QACNL,WAAWJ,KAAK;YACdE;YACAC;YACAC;QACF;kBAECI;;AAGP,GACA"}
+{"version":3,"sources":["../../src/list/List.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { list } from \"./listStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-list-padding-h\"?: string | number;\n    \"--rmd-list-padding-v\"?: string | number;\n  }\n}\n\nexport type ListElement = HTMLUListElement | HTMLOListElement;\n\nexport interface ListProps extends HTMLAttributes<ListElement> {\n  /**\n   * @defaultValue `\"none\"`\n   */\n  role?: HTMLAttributes<ListElement>[\"role\"];\n\n  /**\n   * Set to `true` to decrease the amount of padding and font size within the\n   * list.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to render as `<ol>` instead of `<ul>` when the children\n   * are in a specific order. For example: steps within a recipe.\n   *\n   * @defaultValue `false`\n   */\n  ordered?: boolean;\n\n  /**\n   * Set this to `true` to render horizontally instead of vertically.\n   *\n   * @defaultValue `false`\n   */\n  horizontal?: boolean;\n}\n\n/**\n * The `List` component is used to render a collection of clickable actions\n * vertically or horizontally and does not include the default `ol`/`ul` styles.\n *\n * @example Simple Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import { ListItemLink } from \"@react-md/core/list/ListItemLink\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 1\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 3\n *       </ListItem>\n *       <ListItemLink href=\"/some-route\">Link Example</ListItemLink>\n *     </List>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/list | List Demos}\n */\nexport const List = forwardRef<ListElement, ListProps>(\n  function List(props, ref) {\n    const {\n      className,\n      children,\n      role = \"none\",\n      dense = false,\n      ordered = false,\n      horizontal = false,\n      ...remaining\n    } = props;\n    const Component = (ordered ? \"ol\" : \"ul\") as \"ul\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        role={role}\n        className={list({\n          dense,\n          horizontal,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","list","List","props","ref","className","children","role","dense","ordered","horizontal","remaining","Component"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,IAAI,QAAQ,kBAAkB;AAyCvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,OAAO,MAAM,EACbC,QAAQ,KAAK,EACbC,UAAU,KAAK,EACfC,aAAa,KAAK,EAClB,GAAGC,WACJ,GAAGR;IACJ,MAAMS,YAAaH,UAAU,OAAO;IACpC,qBACE,KAACG;QACE,GAAGD,SAAS;QACbP,KAAKA;QACLG,MAAMA;QACNF,WAAWJ,KAAK;YACdO;YACAE;YACAL;QACF;kBAECC;;AAGP,GACA"}

package/dist/list/ListItem.d.ts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { type ListItemChildrenProps, type ListItemHeight } from "./types.js";
 declare module "react" {
     interface CSSProperties {
@@ -9,13 +10,18 @@ declare module "react" {
         "--rmd-list-item-medium-height"?: string | number;
         "--rmd-list-item-large-height"?: string | number;
         "--rmd-list-item-extra-large-height"?: string | number;
-        "--rmd-list-item-three-line-height"?: string | number;
+        "--rmd-list-item-multiline-clamp"?: string | number;
+        "--rmd-list-item-multiline-height"?: string | number;
         "--rmd-list-item-media-size"?: string | number;
         "--rmd-list-item-media-spacing"?: string | number;
-        "--rmd-list-item-text-three-line-height"?: string | number;
+        "--rmd-list-item-text-multiline-height"?: string | number;
     }
 }
-export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemChildrenProps {
+/**
+ * @since 6.0.0 Renamed `threeLines` to `multiline` since it can
+ * support more than three lines of text.
+ */
+export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemChildrenProps, ComponentWithRippleProps {
     /**
      * @defaultValue `"button"`
      */
@@ -32,7 +38,7 @@ export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemCh
     /**
      * @defaultValue `false`
      */
-    threeLines?: boolean;
+    multiline?: boolean;
     /**
      * @defaultValue `false`
      */
@@ -41,7 +47,7 @@ export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemCh
      * Note: This does nothing if the `disabled` prop is not enabled.
      *
      * @defaultValue `false`
-     * @remarks \@since 2.4.3
+     * @since 2.4.3
      */
     disabledOpacity?: boolean;
     /**
@@ -59,10 +65,10 @@ export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemCh
  * The `ListItem` is used to create a clickable/focusable button within a
  * `List` and removes the normal `<li>` styles.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { List, ListItem } from "@react-md/core";
+ * import { List } from "@react-md/core/list/List";
+ * import { ListItem } from "@react-md/core/list/ListItem";
  * import type { ReactElement  } from "react";
  *
  * function Example(): ReactElement {
@@ -89,10 +95,10 @@ export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemCh
  * }
  * ```
  *
- * @example
- * Applying Addons Example
+ * @example Applying Addons Example
  * ```tsx
- * import { List, ListItem } from "@react-md/core";
+ * import { List } from "@react-md/core/list/List";
+ * import { ListItem } from "@react-md/core/list/ListItem";
  * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
  * import type { ReactElement  } from "react";
  *
@@ -117,5 +123,7 @@ export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemCh
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/list | List Demos}
  */
 export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLLIElement>>;