@react-md/core 1.0.0-next.12 → 1.0.0-next.14

package/dist/interaction/useElementInteraction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/useElementInteraction.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  TouchEvent,\n} from \"react\";\nimport { useCallback, useReducer, useRef } from \"react\";\nimport { RippleContainer } from \"./RippleContainer.js\";\nimport { useUserInteractionMode } from \"./UserInteractionModeProvider.js\";\nimport { INTERACTION_CONFIG } from \"./config.js\";\nimport type {\n  ElementInteractionHandlers,\n  ElementInteractionState,\n  RippleState,\n  RippleStyle,\n} from \"./types.js\";\nimport { getRippleStyle, releaseRipple, updateRipplesState } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/** @remarks \\@since 6.0.0 */\nexport const PRESSED_CLASS_NAME = \"rmd-pressed\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface ElementInteractionOptions<E extends HTMLElement>\n  extends Partial<ElementInteractionHandlers<E>> {\n  /**\n   * Boolean if the element is currently disabled which will prevent any of the\n   * element interaction states from happening.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface ElementInteractionHookReturnValue<E extends HTMLElement> {\n  /**\n   * The event handlers required for element interaction.\n   */\n  handlers: Readonly<ElementInteractionHandlers<E>>;\n\n  /**\n   * Boolean if the element is currently pressed. This will always be `false` if\n   * the {@link ElementInteractionMode} is set to `\"none\"`\n   */\n  pressed: boolean;\n\n  /**\n   * This will be set to {@link PRESSED_CLASS_NAME} only when {@link pressed} is\n   * `true` and the {@link ElementInteractionMode} is set to `\"press\"`. It will\n   * be `undefined` otherwise.\n   */\n  pressedClassName: string | undefined;\n\n  /**\n   * The ripple click/touch interaction. This will be `undefined` when the {@Link ElementInteractionMode}\n   * is set to `\"none\"` or `\"press\"`.\n   */\n  ripples?: ReactElement;\n}\n\ntype ElementInteractionAction =\n  | { type: \"press\"; style?: RippleStyle; programmatic?: boolean }\n  | { type: \"release\" | \"cancel\" }\n  | { type: \"entered\" | \"exited\"; ripple: RippleState };\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This hook is used to apply the required element interaction based on the\n * {@link ElementInteractionMode} and should generally be used internally only.\n *\n * @example\n * Providing Element Interaction\n * ```tsx\n * import { useElementInteraction } from \"@react-md/core\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement } from \"react\";\n *\n * import styles from \"./CustomComponent.module.scss\";\n *\n * interface Props extends HTMLAttributes<HTMLDivElement> {\n *   disabled?: boolean;\n * }\n *\n * function CustomComponent(props: Props): ReactElement {\n *   const {\n *     disabled = false,\n *     className,\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *     ...remaining,\n *   } = props;\n *\n *   const { handlers, pressed, ripples } =\n *     useElementInteraction({\n *       disabled,\n *       // pass remaining props so that if any event handlers were provided to\n *       // the component, they will be merged with the element interaction\n *       // handlers\n *       onBlur,\n *       onClick,\n *       onKeyDown,\n *       onKeyUp,\n *       onMouseDown,\n *       onMouseUp,\n *       onMouseLeave,\n *       onTouchStart,\n *       onTouchMove,\n *       onTouchEnd,\n *     })\n *\n *   return (\n *     <div\n *       {...remaining}\n *       {...handlers}\n *       aria-disabled={disabled}\n *       role=\"button\"\n *       className={cnb(styles.button, pressed && styles.pressed)}\n *       tabIndex={disabled ? undefined : 0}\n *     >\n *       {children}\n *       {ripples}\n *     </div>\n *   );\n * }\n * ```\n *\n * @param options - An object of {@link ElementInteractionOptions} that is used\n * to merge event handlers or disable the interactions.\n * @returns the {@link ElementInteractionHookReturnValue}\n * @remarks \\@since 6.0.0 Touch interactions were removed since it never looked\n * good if the user touched a clickable element right before scrolling. The\n * ripple effect will only be fired on click now for touch devices.\n */\nexport function useElementInteraction<E extends HTMLElement>(\n  options: ElementInteractionOptions<E> = {}\n): ElementInteractionHookReturnValue<E> {\n  const {\n    onBlur = noop,\n    onClick = noop,\n    onMouseDown = noop,\n    onMouseUp = noop,\n    onMouseLeave = noop,\n    onKeyUp = noop,\n    onKeyDown = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onTouchMove = noop,\n    onDragStart = noop,\n    disabled = false,\n  } = options;\n\n  const { mode } = INTERACTION_CONFIG;\n\n  const holding = useRef(false);\n  const disableClick = useRef(false);\n  const userMode = useUserInteractionMode();\n  const isInteractionDisabled = disabled || mode === \"none\";\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: ElementInteractionState,\n      action: ElementInteractionAction\n    ): ElementInteractionState {\n      switch (action.type) {\n        case \"press\": {\n          const { style } = action;\n          let { ripples } = state;\n          if (style) {\n            ripples = [\n              ...ripples,\n              {\n                style,\n                entered: false,\n                exiting: false,\n                startTime: Date.now(),\n              },\n            ];\n          }\n\n          return {\n            pressed: true,\n            ripples,\n          };\n        }\n        case \"cancel\":\n          // Note: unlike previous react-md versions, this will immediately\n          // remove ALL ripple effects instead of trying to fade out. this seems\n          // much nicer for touch devices when they are trying to scroll\n          return {\n            pressed: false,\n            ripples: [],\n          };\n        case \"release\": {\n          if (mode === \"press\") {\n            return { ...state, pressed: false };\n          }\n\n          return releaseRipple(state);\n        }\n        case \"entered\":\n          return updateRipplesState({\n            type: \"entered\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n        case \"exited\":\n          return updateRipplesState({\n            type: \"exited\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n\n        default:\n          return state;\n      }\n    },\n    { pressed: false, ripples: [] }\n  );\n  const { pressed } = state;\n\n  let ripples: ReactElement | undefined;\n  if (mode == \"ripple\") {\n    ripples = (\n      <RippleContainer\n        ripples={state.ripples}\n        onEntered={(ripple) => {\n          dispatch({ type: \"entered\", ripple });\n        }}\n        onExited={(ripple) => {\n          dispatch({ type: \"exited\", ripple });\n        }}\n      />\n    );\n  }\n\n  return {\n    pressed,\n    pressedClassName:\n      pressed && mode === \"press\" ? PRESSED_CLASS_NAME : undefined,\n    ripples,\n    handlers: {\n      onBlur: useCallback(\n        (event: FocusEvent<E>) => {\n          onBlur(event);\n          if (holding.current) {\n            holding.current = false;\n            dispatch({ type: \"release\" });\n          }\n        },\n        [onBlur]\n      ),\n      onClick: useCallback(\n        (event: MouseEvent<E>) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n          if (\n            event.isPropagationStopped() ||\n            userMode === \"touch\" ||\n            mode !== \"ripple\" ||\n            disableClick.current ||\n            holding.current ||\n            document.activeElement === event.currentTarget\n          ) {\n            disableClick.current = false;\n            return;\n          }\n\n          dispatch({\n            type: \"press\",\n            style: getRippleStyle(event, true),\n          });\n        },\n        [disabled, mode, onClick, userMode]\n      ),\n      onMouseDown: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseDown(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            event.shiftKey ||\n            event.ctrlKey ||\n            event.metaKey ||\n            event.altKey ||\n            event.button !== 0\n          ) {\n            return;\n          }\n\n          // prevent text selection on double click\n          // https://stackoverflow.com/a/43321596\n          if (event.detail > 1) {\n            event.preventDefault();\n          }\n\n          holding.current = true;\n          disableClick.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [onMouseDown, isInteractionDisabled, userMode, mode]\n      ),\n      onMouseUp: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseUp(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onMouseUp]\n      ),\n      onMouseLeave: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseLeave(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onMouseLeave, userMode]\n      ),\n      onDragStart(event) {\n        onDragStart(event);\n        if (\n          event.isPropagationStopped() ||\n          !holding.current ||\n          userMode !== \"mouse\"\n        ) {\n          return;\n        }\n\n        holding.current = false;\n        dispatch({ type: \"cancel\" });\n      },\n      onKeyDown: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyDown(event);\n          const { key } = event;\n          const { tagName } = event.currentTarget;\n\n          if (\n            event.isPropagationStopped() ||\n            userMode !== \"keyboard\" ||\n            disabled ||\n            (key !== \" \" && key !== \"Enter\") ||\n            // links do not support clicking on space\n            (key === \" \" && tagName === \"A\") ||\n            // inputs submit a form instead of clicking on enter\n            (key === \"Enter\" && tagName === \"INPUT\")\n          ) {\n            return;\n          }\n\n          // stop propagation since we're starting to do custom event behavior\n          // to click the element for everything except elements that the\n          // browser clicks natively\n          event.stopPropagation();\n\n          if (tagName !== \"BUTTON\" && tagName !== \"A\") {\n            if (key === \" \") {\n              // prevent the pager from scrolling\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n\n          if (holding.current || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          dispatch({ type: \"press\", style: getRippleStyle(event, false) });\n        },\n        [disabled, isInteractionDisabled, onKeyDown, userMode]\n      ),\n      onKeyUp: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyUp(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"keyboard\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onKeyUp, userMode]\n      ),\n      onTouchStart: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchStart(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [mode, isInteractionDisabled, onTouchStart]\n      ),\n      onTouchEnd: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchEnd(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onTouchEnd]\n      ),\n      onTouchMove: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchMove(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onTouchMove]\n      ),\n    },\n  };\n}\n"],"names":["useCallback","useReducer","useRef","RippleContainer","useUserInteractionMode","INTERACTION_CONFIG","getRippleStyle","releaseRipple","updateRipplesState","PRESSED_CLASS_NAME","noop","useElementInteraction","options","onBlur","onClick","onMouseDown","onMouseUp","onMouseLeave","onKeyUp","onKeyDown","onTouchStart","onTouchEnd","onTouchMove","onDragStart","disabled","mode","holding","disableClick","userMode","isInteractionDisabled","state","dispatch","reducer","action","type","style","ripples","entered","exiting","startTime","Date","now","pressed","ripple","current","onEntered","onExited","pressedClassName","undefined","handlers","event","isPropagationStopped","document","activeElement","currentTarget","shiftKey","ctrlKey","metaKey","altKey","button","detail","preventDefault","key","tagName","stopPropagation","click"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../src/interaction/useElementInteraction.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  TouchEvent,\n} from \"react\";\nimport { useCallback, useReducer, useRef } from \"react\";\nimport { RippleContainer } from \"./RippleContainer.js\";\nimport { useUserInteractionMode } from \"./UserInteractionModeProvider.js\";\nimport { INTERACTION_CONFIG } from \"./config.js\";\nimport type {\n  ElementInteractionHandlers,\n  ElementInteractionState,\n  RippleState,\n  RippleStyle,\n} from \"./types.js\";\nimport { getRippleStyle, releaseRipple, updateRipplesState } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport const PRESSED_CLASS_NAME = \"rmd-pressed\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionOptions<E extends HTMLElement>\n  extends Partial<ElementInteractionHandlers<E>> {\n  /**\n   * Boolean if the element is currently disabled which will prevent any of the\n   * element interaction states from happening.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface ElementInteractionHookReturnValue<E extends HTMLElement> {\n  /**\n   * The event handlers required for element interaction.\n   */\n  handlers: Readonly<ElementInteractionHandlers<E>>;\n\n  /**\n   * Boolean if the element is currently pressed. This will always be `false` if\n   * the {@link ElementInteractionMode} is set to `\"none\"`\n   */\n  pressed: boolean;\n\n  /**\n   * This will be set to {@link PRESSED_CLASS_NAME} only when {@link pressed} is\n   * `true` and the {@link ElementInteractionMode} is set to `\"press\"`. It will\n   * be `undefined` otherwise.\n   */\n  pressedClassName: string | undefined;\n\n  /**\n   * The ripple click/touch interaction. This will be `undefined` when the {@link ElementInteractionMode}\n   * is set to `\"none\"` or `\"press\"`.\n   */\n  ripples?: ReactElement;\n}\n\ntype ElementInteractionAction =\n  | { type: \"press\"; style?: RippleStyle; programmatic?: boolean }\n  | { type: \"release\" | \"cancel\" }\n  | { type: \"entered\" | \"exited\"; ripple: RippleState };\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This hook is used to apply the required element interaction based on the\n * {@link ElementInteractionMode} and should generally be used internally only.\n *\n * @example Providing Element Interaction\n * ```tsx\n * import { useElementInteraction } from \"@react-md/core\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement } from \"react\";\n *\n * import styles from \"./CustomComponent.module.scss\";\n *\n * interface Props extends HTMLAttributes<HTMLDivElement> {\n *   disabled?: boolean;\n * }\n *\n * function CustomComponent(props: Props): ReactElement {\n *   const {\n *     disabled = false,\n *     className,\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *     ...remaining,\n *   } = props;\n *\n *   const { handlers, pressed, ripples } =\n *     useElementInteraction({\n *       disabled,\n *       // pass remaining props so that if any event handlers were provided to\n *       // the component, they will be merged with the element interaction\n *       // handlers\n *       onBlur,\n *       onClick,\n *       onKeyDown,\n *       onKeyUp,\n *       onMouseDown,\n *       onMouseUp,\n *       onMouseLeave,\n *       onTouchStart,\n *       onTouchMove,\n *       onTouchEnd,\n *     })\n *\n *   return (\n *     <div\n *       {...remaining}\n *       {...handlers}\n *       aria-disabled={disabled}\n *       role=\"button\"\n *       className={cnb(styles.button, pressed && styles.pressed)}\n *       tabIndex={disabled ? undefined : 0}\n *     >\n *       {children}\n *       {ripples}\n *     </div>\n *   );\n * }\n * ```\n *\n * @param options - An object of {@link ElementInteractionOptions} that is used\n * to merge event handlers or disable the interactions.\n * @returns the {@link ElementInteractionHookReturnValue}\n * @since 6.0.0 Touch interactions were removed since it never looked\n * good if the user touched a clickable element right before scrolling. The\n * ripple effect will only be fired on click now for touch devices.\n */\nexport function useElementInteraction<E extends HTMLElement>(\n  options: ElementInteractionOptions<E> = {}\n): ElementInteractionHookReturnValue<E> {\n  const {\n    onBlur = noop,\n    onClick = noop,\n    onMouseDown = noop,\n    onMouseUp = noop,\n    onMouseLeave = noop,\n    onKeyUp = noop,\n    onKeyDown = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onTouchMove = noop,\n    onDragStart = noop,\n    disabled = false,\n  } = options;\n\n  const { mode } = INTERACTION_CONFIG;\n\n  const holding = useRef(false);\n  const disableClick = useRef(false);\n  const userMode = useUserInteractionMode();\n  const isInteractionDisabled = disabled || mode === \"none\";\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: ElementInteractionState,\n      action: ElementInteractionAction\n    ): ElementInteractionState {\n      switch (action.type) {\n        case \"press\": {\n          const { style } = action;\n          let { ripples } = state;\n          if (style) {\n            ripples = [\n              ...ripples,\n              {\n                style,\n                entered: false,\n                exiting: false,\n                startTime: Date.now(),\n              },\n            ];\n          }\n\n          return {\n            pressed: true,\n            ripples,\n          };\n        }\n        case \"cancel\":\n          // Note: unlike previous react-md versions, this will immediately\n          // remove ALL ripple effects instead of trying to fade out. this seems\n          // much nicer for touch devices when they are trying to scroll\n          return {\n            pressed: false,\n            ripples: [],\n          };\n        case \"release\": {\n          if (mode === \"press\") {\n            return { ...state, pressed: false };\n          }\n\n          return releaseRipple(state);\n        }\n        case \"entered\":\n          return updateRipplesState({\n            type: \"entered\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n        case \"exited\":\n          return updateRipplesState({\n            type: \"exited\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n\n        default:\n          return state;\n      }\n    },\n    { pressed: false, ripples: [] }\n  );\n  const { pressed } = state;\n\n  let ripples: ReactElement | undefined;\n  if (mode == \"ripple\") {\n    ripples = (\n      <RippleContainer\n        ripples={state.ripples}\n        onEntered={(ripple) => {\n          dispatch({ type: \"entered\", ripple });\n        }}\n        onExited={(ripple) => {\n          dispatch({ type: \"exited\", ripple });\n        }}\n      />\n    );\n  }\n\n  return {\n    pressed,\n    pressedClassName:\n      pressed && mode === \"press\" ? PRESSED_CLASS_NAME : undefined,\n    ripples,\n    handlers: {\n      onBlur: useCallback(\n        (event: FocusEvent<E>) => {\n          onBlur(event);\n          if (holding.current) {\n            holding.current = false;\n            dispatch({ type: \"release\" });\n          }\n        },\n        [onBlur]\n      ),\n      onClick: useCallback(\n        (event: MouseEvent<E>) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n          if (\n            event.isPropagationStopped() ||\n            userMode === \"touch\" ||\n            mode !== \"ripple\" ||\n            disableClick.current ||\n            holding.current ||\n            document.activeElement === event.currentTarget\n          ) {\n            disableClick.current = false;\n            return;\n          }\n\n          dispatch({\n            type: \"press\",\n            style: getRippleStyle(event, true),\n          });\n        },\n        [disabled, mode, onClick, userMode]\n      ),\n      onMouseDown: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseDown(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            event.shiftKey ||\n            event.ctrlKey ||\n            event.metaKey ||\n            event.altKey ||\n            event.button !== 0\n          ) {\n            return;\n          }\n\n          // prevent text selection on double click\n          // https://stackoverflow.com/a/43321596\n          if (event.detail > 1) {\n            event.preventDefault();\n          }\n\n          holding.current = true;\n          disableClick.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [onMouseDown, isInteractionDisabled, userMode, mode]\n      ),\n      onMouseUp: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseUp(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onMouseUp]\n      ),\n      onMouseLeave: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseLeave(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onMouseLeave, userMode]\n      ),\n      onDragStart(event) {\n        onDragStart(event);\n        if (\n          event.isPropagationStopped() ||\n          !holding.current ||\n          userMode !== \"mouse\"\n        ) {\n          return;\n        }\n\n        holding.current = false;\n        dispatch({ type: \"cancel\" });\n      },\n      onKeyDown: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyDown(event);\n          const { key } = event;\n          const { tagName } = event.currentTarget;\n\n          if (\n            event.isPropagationStopped() ||\n            userMode !== \"keyboard\" ||\n            disabled ||\n            (key !== \" \" && key !== \"Enter\") ||\n            // links do not support clicking on space\n            (key === \" \" && tagName === \"A\") ||\n            // inputs submit a form instead of clicking on enter\n            (key === \"Enter\" && tagName === \"INPUT\")\n          ) {\n            return;\n          }\n\n          // stop propagation since we're starting to do custom event behavior\n          // to click the element for everything except elements that the\n          // browser clicks natively\n          event.stopPropagation();\n\n          if (tagName !== \"BUTTON\" && tagName !== \"A\") {\n            if (key === \" \") {\n              // prevent the pager from scrolling\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n\n          if (holding.current || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          dispatch({ type: \"press\", style: getRippleStyle(event, false) });\n        },\n        [disabled, isInteractionDisabled, onKeyDown, userMode]\n      ),\n      onKeyUp: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyUp(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"keyboard\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onKeyUp, userMode]\n      ),\n      onTouchStart: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchStart(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [mode, isInteractionDisabled, onTouchStart]\n      ),\n      onTouchEnd: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchEnd(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onTouchEnd]\n      ),\n      onTouchMove: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchMove(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onTouchMove]\n      ),\n    },\n  };\n}\n"],"names":["useCallback","useReducer","useRef","RippleContainer","useUserInteractionMode","INTERACTION_CONFIG","getRippleStyle","releaseRipple","updateRipplesState","PRESSED_CLASS_NAME","noop","useElementInteraction","options","onBlur","onClick","onMouseDown","onMouseUp","onMouseLeave","onKeyUp","onKeyDown","onTouchStart","onTouchEnd","onTouchMove","onDragStart","disabled","mode","holding","disableClick","userMode","isInteractionDisabled","state","dispatch","reducer","action","type","style","ripples","entered","exiting","startTime","Date","now","pressed","ripple","current","onEntered","onExited","pressedClassName","undefined","handlers","event","isPropagationStopped","document","activeElement","currentTarget","shiftKey","ctrlKey","metaKey","altKey","button","detail","preventDefault","key","tagName","stopPropagation","click"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/interaction/useHigherContrastChildren.d.ts

@@ -10,8 +10,7 @@ import { type ReactNode } from "react";
  * Note: This should generally be used with the {@link useElementInteraction}
  * hook.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import {
  *   useElementInteraction,
@@ -64,7 +63,7 @@ import { type ReactNode } from "react";
  * contrast mode is enabled. This is really used within `ListItem`s so there
  * aren't unneeded `<span>`s for string/number children when there are addons.
  * @returns the children to render
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export declare function useHigherContrastChildren(propChildren: ReactNode, disable?: boolean): ReactNode;

package/dist/interaction/useHigherContrastChildren.js

@@ -12,8 +12,7 @@ import { INTERACTION_CONFIG } from "./config.js";
  * Note: This should generally be used with the {@link useElementInteraction}
  * hook.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import {
  *   useElementInteraction,
@@ -66,7 +65,7 @@ import { INTERACTION_CONFIG } from "./config.js";
  * contrast mode is enabled. This is really used within `ListItem`s so there
  * aren't unneeded `<span>`s for string/number children when there are addons.
  * @returns the children to render
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */ export function useHigherContrastChildren(propChildren, disable = false) {
     if (!INTERACTION_CONFIG.higherContrast || disable) {

package/dist/interaction/useHigherContrastChildren.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/useHigherContrastChildren.tsx"],"sourcesContent":["import { Children, type ReactNode } from \"react\";\nimport { INTERACTION_CONFIG } from \"./config.js\";\n\n/**\n * This hook is used to wrap any `number` and `string` children with a `<span>`\n * so that the ripple/hover/focus background colors do not cause the text to\n * become dimmed.\n *\n * If the {@link INTERACTION_CONFIG.higherContrast} is set to `false`, this hook\n * will just return the `children` unmodified.\n *\n * Note: This should generally be used with the {@link useElementInteraction}\n * hook.\n *\n * @example\n * Simple Example\n * ```tsx\n * import {\n *   useElementInteraction,\n *   useHigherContrastChildren,\n * } from \"@react-md/core\";\n * import type { ButtonHTMLAttributes, ReactElement, ReactNode } from \"react\";\n *\n * function Example(props: ButtonHTMLAttributes<HTMLButtonElement>): ReactElement {\n *   const {\n *     children: propChildren,\n *     disabled = false,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchEnd,\n *     onTouchMove,\n *     ...remaining\n *   } = props;\n *   const { pressedClassName, ripples, handlers } =\n *     useElementInteraction({\n *       disabled,\n *       onClick,\n *       onKeyDown,\n *       onKeyUp,\n *       onMouseDown,\n *       onMouseUp,\n *       onMouseLeave,\n *       onTouchStart,\n *       onTouchEnd,\n *       onTouchMove,\n *     });\n *\n *   const children = useHigherContrastChildren(propChildren)\n *\n *   return (\n *     <button {...remaining} {...handlers} className={pressedClassName}>\n *       {children}\n *       {ripples}\n *     </button>\n *   );\n * }\n * ```\n *\n * @param propChildren - The children to conditionally wrap in spans.\n * @param disable - Manually disable this functionality even if the higher\n * contrast mode is enabled. This is really used within `ListItem`s so there\n * aren't unneeded `<span>`s for string/number children when there are addons.\n * @returns the children to render\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport function useHigherContrastChildren(\n  propChildren: ReactNode,\n  disable = false\n): ReactNode {\n  if (!INTERACTION_CONFIG.higherContrast || disable) {\n    return propChildren;\n  }\n\n  // Note: This will fail if the child is wrapped in a Fragment, but that use\n  // case doesn't matter to me\n  return Children.map(propChildren, (child) => {\n    const t = typeof child;\n    if (t === \"string\" || t === \"number\") {\n      return <span>{child}</span>;\n    }\n\n    return child;\n  });\n}\n"],"names":["Children","INTERACTION_CONFIG","useHigherContrastChildren","propChildren","disable","higherContrast","map","child","t","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,QAAQ,QAAwB,QAAQ;AACjD,SAASC,kBAAkB,QAAQ,cAAc;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEC,GACD,OAAO,SAASC,0BACdC,YAAuB,EACvBC,UAAU,KAAK;IAEf,IAAI,CAACH,mBAAmBI,cAAc,IAAID,SAAS;QACjD,OAAOD;IACT;IAEA,2EAA2E;IAC3E,4BAA4B;IAC5B,OAAOH,SAASM,GAAG,CAACH,cAAc,CAACI;QACjC,MAAMC,IAAI,OAAOD;QACjB,IAAIC,MAAM,YAAYA,MAAM,UAAU;YACpC,qBAAO,KAACC;0BAAMF;;QAChB;QAEA,OAAOA;IACT;AACF"}
+{"version":3,"sources":["../../src/interaction/useHigherContrastChildren.tsx"],"sourcesContent":["import { Children, type ReactNode } from \"react\";\nimport { INTERACTION_CONFIG } from \"./config.js\";\n\n/**\n * This hook is used to wrap any `number` and `string` children with a `<span>`\n * so that the ripple/hover/focus background colors do not cause the text to\n * become dimmed.\n *\n * If the {@link INTERACTION_CONFIG.higherContrast} is set to `false`, this hook\n * will just return the `children` unmodified.\n *\n * Note: This should generally be used with the {@link useElementInteraction}\n * hook.\n *\n * @example Simple Example\n * ```tsx\n * import {\n *   useElementInteraction,\n *   useHigherContrastChildren,\n * } from \"@react-md/core\";\n * import type { ButtonHTMLAttributes, ReactElement, ReactNode } from \"react\";\n *\n * function Example(props: ButtonHTMLAttributes<HTMLButtonElement>): ReactElement {\n *   const {\n *     children: propChildren,\n *     disabled = false,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchEnd,\n *     onTouchMove,\n *     ...remaining\n *   } = props;\n *   const { pressedClassName, ripples, handlers } =\n *     useElementInteraction({\n *       disabled,\n *       onClick,\n *       onKeyDown,\n *       onKeyUp,\n *       onMouseDown,\n *       onMouseUp,\n *       onMouseLeave,\n *       onTouchStart,\n *       onTouchEnd,\n *       onTouchMove,\n *     });\n *\n *   const children = useHigherContrastChildren(propChildren)\n *\n *   return (\n *     <button {...remaining} {...handlers} className={pressedClassName}>\n *       {children}\n *       {ripples}\n *     </button>\n *   );\n * }\n * ```\n *\n * @param propChildren - The children to conditionally wrap in spans.\n * @param disable - Manually disable this functionality even if the higher\n * contrast mode is enabled. This is really used within `ListItem`s so there\n * aren't unneeded `<span>`s for string/number children when there are addons.\n * @returns the children to render\n * @since 6.0.0\n * @internal\n */\nexport function useHigherContrastChildren(\n  propChildren: ReactNode,\n  disable = false\n): ReactNode {\n  if (!INTERACTION_CONFIG.higherContrast || disable) {\n    return propChildren;\n  }\n\n  // Note: This will fail if the child is wrapped in a Fragment, but that use\n  // case doesn't matter to me\n  return Children.map(propChildren, (child) => {\n    const t = typeof child;\n    if (t === \"string\" || t === \"number\") {\n      return <span>{child}</span>;\n    }\n\n    return child;\n  });\n}\n"],"names":["Children","INTERACTION_CONFIG","useHigherContrastChildren","propChildren","disable","higherContrast","map","child","t","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,QAAQ,QAAwB,QAAQ;AACjD,SAASC,kBAAkB,QAAQ,cAAc;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEC,GACD,OAAO,SAASC,0BACdC,YAAuB,EACvBC,UAAU,KAAK;IAEf,IAAI,CAACH,mBAAmBI,cAAc,IAAID,SAAS;QACjD,OAAOD;IACT;IAEA,2EAA2E;IAC3E,4BAA4B;IAC5B,OAAOH,SAASM,GAAG,CAACH,cAAc,CAACI;QACjC,MAAMC,IAAI,OAAOD;QACjB,IAAIC,MAAM,YAAYA,MAAM,UAAU;YACpC,qBAAO,KAACC;0BAAMF;;QAChB;QAEA,OAAOA;IACT;AACF"}

package/dist/layout/LayoutAppBar.d.ts

@@ -3,7 +3,7 @@ import { type AppBarProps, type CustomAppBarComponent } from "../app-bar/AppBar.
 import { type SkipToMainContentProps } from "../link/SkipToMainContent.js";
 import { type CssPosition, type PropsWithRef } from "../types.js";
 /**
- * @remarks \@since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props
+ * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props
  */
 export interface LayoutAppBarProps extends AppBarProps {
     /** @defaultValue `"header"` */
@@ -23,8 +23,7 @@ export interface LayoutAppBarProps extends AppBarProps {
  * javascript bundle size, it is recommended to configure this variable in SCSS
  * instead.
  *
- * @example
- * Static Height
+ * @example Static Height
  * ```scss
  * @use "everything";
  *
@@ -33,8 +32,7 @@ export interface LayoutAppBarProps extends AppBarProps {
  * }
  * ```
  *
- * @example
- * Media Query Height Changes
+ * @example Media Query Height Changes
  * ```scss
  * @use "everything";
  *
@@ -46,8 +44,7 @@ export interface LayoutAppBarProps extends AppBarProps {
  * }
  * ```
  *
- * @remarks
- * \@since 6.0.0 This component no longer renders the `LayoutNavToggle` and
+ * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and
  * `LayoutAppBarTitle` since they no longer exist. The only purpose of this
  * component is to dynamically set the `--rmd-layout-header-height` variable.
  */

package/dist/layout/LayoutAppBar.js

@@ -14,8 +14,7 @@ import { useLayoutAppBarHeight } from "./useLayoutAppBarHeight.js";
  * javascript bundle size, it is recommended to configure this variable in SCSS
  * instead.
  *
- * @example
- * Static Height
+ * @example Static Height
  * ```scss
  * @use "everything";
  *
@@ -24,8 +23,7 @@ import { useLayoutAppBarHeight } from "./useLayoutAppBarHeight.js";
  * }
  * ```
  *
- * @example
- * Media Query Height Changes
+ * @example Media Query Height Changes
  * ```scss
  * @use "everything";
  *
@@ -37,8 +35,7 @@ import { useLayoutAppBarHeight } from "./useLayoutAppBarHeight.js";
  * }
  * ```
  *
- * @remarks
- * \@since 6.0.0 This component no longer renders the `LayoutNavToggle` and
+ * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and
  * `LayoutAppBarTitle` since they no longer exist. The only purpose of this
  * component is to dynamically set the `--rmd-layout-header-height` variable.
  */ export const LayoutAppBar = /*#__PURE__*/ forwardRef(function LayoutAppBar(props, ref) {

package/dist/layout/LayoutAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutAppBar.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport {\n  AppBar,\n  type AppBarProps,\n  type CustomAppBarComponent,\n} from \"../app-bar/AppBar.js\";\nimport {\n  SkipToMainContent,\n  type SkipToMainContentProps,\n} from \"../link/SkipToMainContent.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport { type CssPosition, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useLayoutAppBarHeight } from \"./useLayoutAppBarHeight.js\";\n\n/**\n * @remarks \\@since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props\n */\nexport interface LayoutAppBarProps extends AppBarProps {\n  /** @defaultValue `\"header\"` */\n  as?: CustomAppBarComponent;\n\n  /** @defaultValue `\"fixed\"` */\n  position?: CssPosition;\n\n  /**\n   * Any additional props to pass to the {@link SkipToMainContent} component.\n   */\n  skipProps?: PropsWithRef<SkipToMainContentProps, HTMLAnchorElement>;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to dynamically update the `--rmd-layout-header-offset`\n * based on the current height of this app bar. If you are concerned about\n * javascript bundle size, it is recommended to configure this variable in SCSS\n * instead.\n *\n * @example\n * Static Height\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n * }\n * ```\n *\n * @example\n * Media Query Height Changes\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n *   @include everything.tablet-media {\n *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);\n *   }\n * }\n * ```\n *\n * @remarks\n * \\@since 6.0.0 This component no longer renders the `LayoutNavToggle` and\n * `LayoutAppBarTitle` since they no longer exist. The only purpose of this\n * component is to dynamically set the `--rmd-layout-header-height` variable.\n */\nexport const LayoutAppBar = forwardRef<HTMLDivElement, LayoutAppBarProps>(\n  function LayoutAppBar(props, ref) {\n    const {\n      as = \"header\",\n      id: propId,\n      position = \"fixed\",\n      skipProps,\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"layout-header\");\n    const { appBarRef, variables } = useLayoutAppBarHeight(ref);\n    useCSSVariables(variables);\n\n    return (\n      <AppBar\n        {...remaining}\n        id={id}\n        as={as}\n        ref={appBarRef}\n        position={position}\n      >\n        <SkipToMainContent {...skipProps} />\n        {children}\n      </AppBar>\n    );\n  }\n);\n"],"names":["forwardRef","AppBar","SkipToMainContent","useCSSVariables","useEnsuredId","useLayoutAppBarHeight","LayoutAppBar","props","ref","as","id","propId","position","skipProps","children","remaining","appBarRef","variables"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,MAAM,QAGD,uBAAuB;AAC9B,SACEC,iBAAiB,QAEZ,+BAA+B;AACtC,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,qBAAqB,QAAQ,6BAA6B;AAkBnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,MAAMC,6BAAeN,WAC1B,SAASM,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,KAAK,QAAQ,EACbC,IAAIC,MAAM,EACVC,WAAW,OAAO,EAClBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMG,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAE,GAAGZ,sBAAsBG;IACvDL,gBAAgBc;IAEhB,qBACE,MAAChB;QACE,GAAGc,SAAS;QACbL,IAAIA;QACJD,IAAIA;QACJD,KAAKQ;QACLJ,UAAUA;;0BAEV,KAACV;gBAAmB,GAAGW,SAAS;;YAC/BC;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/LayoutAppBar.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport {\n  AppBar,\n  type AppBarProps,\n  type CustomAppBarComponent,\n} from \"../app-bar/AppBar.js\";\nimport {\n  SkipToMainContent,\n  type SkipToMainContentProps,\n} from \"../link/SkipToMainContent.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport { type CssPosition, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useLayoutAppBarHeight } from \"./useLayoutAppBarHeight.js\";\n\n/**\n * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props\n */\nexport interface LayoutAppBarProps extends AppBarProps {\n  /** @defaultValue `\"header\"` */\n  as?: CustomAppBarComponent;\n\n  /** @defaultValue `\"fixed\"` */\n  position?: CssPosition;\n\n  /**\n   * Any additional props to pass to the {@link SkipToMainContent} component.\n   */\n  skipProps?: PropsWithRef<SkipToMainContentProps, HTMLAnchorElement>;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to dynamically update the `--rmd-layout-header-offset`\n * based on the current height of this app bar. If you are concerned about\n * javascript bundle size, it is recommended to configure this variable in SCSS\n * instead.\n *\n * @example Static Height\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n * }\n * ```\n *\n * @example Media Query Height Changes\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n *   @include everything.tablet-media {\n *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);\n *   }\n * }\n * ```\n *\n * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and\n * `LayoutAppBarTitle` since they no longer exist. The only purpose of this\n * component is to dynamically set the `--rmd-layout-header-height` variable.\n */\nexport const LayoutAppBar = forwardRef<HTMLDivElement, LayoutAppBarProps>(\n  function LayoutAppBar(props, ref) {\n    const {\n      as = \"header\",\n      id: propId,\n      position = \"fixed\",\n      skipProps,\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"layout-header\");\n    const { appBarRef, variables } = useLayoutAppBarHeight(ref);\n    useCSSVariables(variables);\n\n    return (\n      <AppBar\n        {...remaining}\n        id={id}\n        as={as}\n        ref={appBarRef}\n        position={position}\n      >\n        <SkipToMainContent {...skipProps} />\n        {children}\n      </AppBar>\n    );\n  }\n);\n"],"names":["forwardRef","AppBar","SkipToMainContent","useCSSVariables","useEnsuredId","useLayoutAppBarHeight","LayoutAppBar","props","ref","as","id","propId","position","skipProps","children","remaining","appBarRef","variables"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,MAAM,QAGD,uBAAuB;AAC9B,SACEC,iBAAiB,QAEZ,+BAA+B;AACtC,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,qBAAqB,QAAQ,6BAA6B;AAkBnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,MAAMC,6BAAeN,WAC1B,SAASM,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,KAAK,QAAQ,EACbC,IAAIC,MAAM,EACVC,WAAW,OAAO,EAClBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMG,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAE,GAAGZ,sBAAsBG;IACvDL,gBAAgBc;IAEhB,qBACE,MAAChB;QACE,GAAGc,SAAS;QACbL,IAAIA;QACJD,IAAIA;QACJD,KAAKQ;QACLJ,UAAUA;;0BAEV,KAACV;gBAAmB,GAAGW,SAAS;;YAC/BC;;;AAGP,GACA"}

package/dist/layout/LayoutNav.d.ts

@@ -2,7 +2,7 @@ import { type HTMLAttributes, type ReactNode } from "react";
 import { type BaseSheetClassNameOptions } from "../sheet/styles.js";
 import { type CSSTransitionClassNames, type TransitionActions, type TransitionCallbacks, type TransitionTimeout } from "../transition/types.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface LayoutNavProps extends HTMLAttributes<HTMLDivElement>, BaseSheetClassNameOptions, TransitionCallbacks, TransitionActions {
     children: ReactNode;
@@ -36,8 +36,7 @@ export interface LayoutNavProps extends HTMLAttributes<HTMLDivElement>, BaseShee
  * `LayoutWindowSplitter` and expandable layouts. Do not use this component for
  * temporary navigation and instead use a `Sheet`.
  *
- * @example
- * Full Height Layout
+ * @example Full Height Layout
  * ```tsx
  * "use client";
  * import {
@@ -69,8 +68,7 @@ export interface LayoutNavProps extends HTMLAttributes<HTMLDivElement>, BaseShee
  * }
  * ```
  *
- * @example
- * Toggleable Layout
+ * @example Toggleable Layout
  * ```tsx
  * "use client";
  * import {
@@ -112,6 +110,6 @@ export interface LayoutNavProps extends HTMLAttributes<HTMLDivElement>, BaseShee
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const LayoutNav: import("react").ForwardRefExoticComponent<LayoutNavProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/layout/LayoutNav.js

@@ -14,8 +14,7 @@ import { layoutNav } from "./layoutNavStyles.js";
  * `LayoutWindowSplitter` and expandable layouts. Do not use this component for
  * temporary navigation and instead use a `Sheet`.
  *
- * @example
- * Full Height Layout
+ * @example Full Height Layout
  * ```tsx
  * "use client";
  * import {
@@ -47,8 +46,7 @@ import { layoutNav } from "./layoutNavStyles.js";
  * }
  * ```
  *
- * @example
- * Toggleable Layout
+ * @example Toggleable Layout
  * ```tsx
  * "use client";
  * import {
@@ -90,7 +88,7 @@ import { layoutNav } from "./layoutNavStyles.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const LayoutNav = /*#__PURE__*/ forwardRef(function LayoutNav(props, ref) {
     const { as: Component = "nav", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = Component == "nav" && !ariaLabelledBy ? "Navigation" : undefined, expanded, children, className, timeout = DEFAULT_SHEET_TIMEOUT, classNames = DEFAULT_SHEET_CLASSNAMES, appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExited, onExiting, appBarOffset, ...remaining } = props;
     const { elementProps } = useCSSTransition({

package/dist/layout/LayoutNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutNav.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport {\n  DEFAULT_SHEET_CLASSNAMES,\n  DEFAULT_SHEET_TIMEOUT,\n} from \"../sheet/Sheet.js\";\nimport { sheet, type BaseSheetClassNameOptions } from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionActions,\n  type TransitionCallbacks,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { layoutNav } from \"./layoutNavStyles.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface LayoutNavProps\n  extends HTMLAttributes<HTMLDivElement>,\n    BaseSheetClassNameOptions,\n    TransitionCallbacks,\n    TransitionActions {\n  children: ReactNode;\n\n  /**\n   * The component to render as.\n   *\n   * @defaultValue `\"nav\"`\n   */\n  as?: \"nav\" | \"div\";\n\n  /**\n   * Set this to `true` to display the navigation.\n   */\n  expanded: boolean;\n\n  /**\n   * Set this to `true` to force the navigation to appear below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /** @defaultValue {@link DEFAULT_SHEET_TIMEOUT} */\n  timeout?: TransitionTimeout;\n  /** @defaultValue {@link DEFAULT_SHEET_CLASSNAMES} */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a persistent navigation on the left of the\n * page. There is some built-in functionality to support resizing with the\n * `LayoutWindowSplitter` and expandable layouts. Do not use this component for\n * temporary navigation and instead use a `Sheet`.\n *\n * @example\n * Full Height Layout\n * ```tsx\n * \"use client\";\n * import {\n *   LayoutAppBar,\n *   LayoutNav,\n *   Main,\n *   useHorizontalLayoutTransition,\n * } from \"@react-md/core\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: true,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * Toggleable Layout\n * ```tsx\n * \"use client\";\n * import {\n *   LayoutNav,\n *   Main,\n *   useHorizontalLayoutTransition,\n *   useToggle,\n * } from \"@react-md/core\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { toggled: expanded, toggle } = useToggle();\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: expanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           onClick={toggle}\n *           buttonType=\"icon\"\n *         >\n *           <MenuIcon />\n *         </Button>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset={expanded} appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(\n  function LayoutNav(props, ref) {\n    const {\n      as: Component = \"nav\",\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = Component == \"nav\" && !ariaLabelledBy\n        ? \"Navigation\"\n        : undefined,\n      expanded,\n      children,\n      className,\n      timeout = DEFAULT_SHEET_TIMEOUT,\n      classNames = DEFAULT_SHEET_CLASSNAMES,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const { elementProps } = useCSSTransition({\n      nodeRef: ref,\n      timeout,\n      className: cnb(\n        layoutNav({ appBarOffset }),\n        sheet({\n          className,\n          horizontalSize: \"none\",\n          disableOverlay: true,\n        })\n      ),\n      classNames,\n      enter,\n      exit,\n      appear,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      exitedHidden: true,\n      transitionIn: expanded,\n    });\n\n    return (\n      <Component\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...remaining}\n        {...elementProps}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","useCSSTransition","layoutNav","LayoutNav","props","ref","as","Component","ariaLabelledBy","ariaLabel","undefined","expanded","children","className","timeout","classNames","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExited","onExiting","appBarOffset","remaining","elementProps","nodeRef","horizontalSize","disableOverlay","exitedHidden","transitionIn","aria-label","aria-labelledby"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SACEC,wBAAwB,EACxBC,qBAAqB,QAChB,oBAAoB;AAC3B,SAASC,KAAK,QAAwC,qBAAqB;AAO3E,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,SAAS,QAAQ,uBAAuB;AAsCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,YAAY,KAAK,EACrB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,aAAa,SAAS,CAACC,iBAC7C,eACAE,SAAS,EACbC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAUf,qBAAqB,EAC/BgB,aAAajB,wBAAwB,EACrCkB,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGtB;IACJ,MAAM,EAAEuB,YAAY,EAAE,GAAG1B,iBAAiB;QACxC2B,SAASvB;QACTS;QACAD,WAAWjB,IACTM,UAAU;YAAEuB;QAAa,IACzBzB,MAAM;YACJa;YACAgB,gBAAgB;YAChBC,gBAAgB;QAClB;QAEFf;QACAE;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO,cAAc;QACdC,cAAcrB;IAChB;IAEA,qBACE,KAACJ;QACC0B,cAAYxB;QACZyB,mBAAiB1B;QAChB,GAAGkB,SAAS;QACZ,GAAGC,YAAY;kBAEff;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/LayoutNav.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport {\n  DEFAULT_SHEET_CLASSNAMES,\n  DEFAULT_SHEET_TIMEOUT,\n} from \"../sheet/Sheet.js\";\nimport { sheet, type BaseSheetClassNameOptions } from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionActions,\n  type TransitionCallbacks,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { layoutNav } from \"./layoutNavStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutNavProps\n  extends HTMLAttributes<HTMLDivElement>,\n    BaseSheetClassNameOptions,\n    TransitionCallbacks,\n    TransitionActions {\n  children: ReactNode;\n\n  /**\n   * The component to render as.\n   *\n   * @defaultValue `\"nav\"`\n   */\n  as?: \"nav\" | \"div\";\n\n  /**\n   * Set this to `true` to display the navigation.\n   */\n  expanded: boolean;\n\n  /**\n   * Set this to `true` to force the navigation to appear below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /** @defaultValue {@link DEFAULT_SHEET_TIMEOUT} */\n  timeout?: TransitionTimeout;\n  /** @defaultValue {@link DEFAULT_SHEET_CLASSNAMES} */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a persistent navigation on the left of the\n * page. There is some built-in functionality to support resizing with the\n * `LayoutWindowSplitter` and expandable layouts. Do not use this component for\n * temporary navigation and instead use a `Sheet`.\n *\n * @example Full Height Layout\n * ```tsx\n * \"use client\";\n * import {\n *   LayoutAppBar,\n *   LayoutNav,\n *   Main,\n *   useHorizontalLayoutTransition,\n * } from \"@react-md/core\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: true,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Toggleable Layout\n * ```tsx\n * \"use client\";\n * import {\n *   LayoutNav,\n *   Main,\n *   useHorizontalLayoutTransition,\n *   useToggle,\n * } from \"@react-md/core\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { toggled: expanded, toggle } = useToggle();\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: expanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           onClick={toggle}\n *           buttonType=\"icon\"\n *         >\n *           <MenuIcon />\n *         </Button>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset={expanded} appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(\n  function LayoutNav(props, ref) {\n    const {\n      as: Component = \"nav\",\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = Component == \"nav\" && !ariaLabelledBy\n        ? \"Navigation\"\n        : undefined,\n      expanded,\n      children,\n      className,\n      timeout = DEFAULT_SHEET_TIMEOUT,\n      classNames = DEFAULT_SHEET_CLASSNAMES,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const { elementProps } = useCSSTransition({\n      nodeRef: ref,\n      timeout,\n      className: cnb(\n        layoutNav({ appBarOffset }),\n        sheet({\n          className,\n          horizontalSize: \"none\",\n          disableOverlay: true,\n        })\n      ),\n      classNames,\n      enter,\n      exit,\n      appear,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      exitedHidden: true,\n      transitionIn: expanded,\n    });\n\n    return (\n      <Component\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...remaining}\n        {...elementProps}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","useCSSTransition","layoutNav","LayoutNav","props","ref","as","Component","ariaLabelledBy","ariaLabel","undefined","expanded","children","className","timeout","classNames","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExited","onExiting","appBarOffset","remaining","elementProps","nodeRef","horizontalSize","disableOverlay","exitedHidden","transitionIn","aria-label","aria-labelledby"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SACEC,wBAAwB,EACxBC,qBAAqB,QAChB,oBAAoB;AAC3B,SAASC,KAAK,QAAwC,qBAAqB;AAO3E,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,SAAS,QAAQ,uBAAuB;AAsCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,YAAY,KAAK,EACrB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,aAAa,SAAS,CAACC,iBAC7C,eACAE,SAAS,EACbC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAUf,qBAAqB,EAC/BgB,aAAajB,wBAAwB,EACrCkB,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGtB;IACJ,MAAM,EAAEuB,YAAY,EAAE,GAAG1B,iBAAiB;QACxC2B,SAASvB;QACTS;QACAD,WAAWjB,IACTM,UAAU;YAAEuB;QAAa,IACzBzB,MAAM;YACJa;YACAgB,gBAAgB;YAChBC,gBAAgB;QAClB;QAEFf;QACAE;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO,cAAc;QACdC,cAAcrB;IAChB;IAEA,qBACE,KAACJ;QACC0B,cAAYxB;QACZyB,mBAAiB1B;QAChB,GAAGkB,SAAS;QACZ,GAAGC,YAAY;kBAEff;;AAGP,GACA"}

package/dist/layout/LayoutWindowSplitter.d.ts

@@ -3,7 +3,7 @@ import { type BaseWindowSplitterProps } from "../window-splitter/WindowSplitter.
 import { type WindowSplitterWidgetProps } from "../window-splitter/useWindowSplitter.js";
 import { type LayoutWindowSplitterClassNameOptions } from "./layoutWindowSplitterStyles.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface LayoutWindowSplitterProps extends WindowSplitterWidgetProps<HTMLButtonElement>, Omit<BaseWindowSplitterProps, keyof WindowSplitterWidgetProps<HTMLButtonElement>>, LayoutWindowSplitterClassNameOptions {
     /** @defaultValue `"Resize Navigation"` */
@@ -21,8 +21,7 @@ export interface LayoutWindowSplitterProps extends WindowSplitterWidgetProps<HTM
  * @see {@link useResizableExpandableLayout} for a default implementation for
  * this component.
  *
- * @example
- * Dynamic Resizing
+ * @example Dynamic Resizing
  * ```tsx
  * import {
  *   LayoutNav,
@@ -72,6 +71,6 @@ export interface LayoutWindowSplitterProps extends WindowSplitterWidgetProps<HTM
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const LayoutWindowSplitter: import("react").ForwardRefExoticComponent<Omit<LayoutWindowSplitterProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/layout/LayoutWindowSplitter.js

@@ -12,8 +12,7 @@ import { layoutWindowSplitter } from "./layoutWindowSplitterStyles.js";
  * @see {@link useResizableExpandableLayout} for a default implementation for
  * this component.
  *
- * @example
- * Dynamic Resizing
+ * @example Dynamic Resizing
  * ```tsx
  * import {
  *   LayoutNav,
@@ -63,7 +62,7 @@ import { layoutWindowSplitter } from "./layoutWindowSplitterStyles.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const LayoutWindowSplitter = /*#__PURE__*/ forwardRef(function LayoutWindowSplitter(props, ref) {
     const { "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = ariaLabelledBy ? undefined : "Resize Navigation", appBarOffset, disableResponsive, className, navWidth, ...remaining } = props;
     useCSSVariables(useMemo(()=>[

package/dist/layout/LayoutWindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutWindowSplitter.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useMemo } from \"react\";\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport {\n  WindowSplitter,\n  type BaseWindowSplitterProps,\n} from \"../window-splitter/WindowSplitter.js\";\nimport { type WindowSplitterWidgetProps } from \"../window-splitter/useWindowSplitter.js\";\nimport {\n  layoutWindowSplitter,\n  type LayoutWindowSplitterClassNameOptions,\n} from \"./layoutWindowSplitterStyles.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface LayoutWindowSplitterProps\n  extends WindowSplitterWidgetProps<HTMLButtonElement>,\n    Omit<\n      BaseWindowSplitterProps,\n      keyof WindowSplitterWidgetProps<HTMLButtonElement>\n    >,\n    LayoutWindowSplitterClassNameOptions {\n  /** @defaultValue `\"Resize Navigation\"` */\n  \"aria-label\"?: string;\n\n  /**\n   * The current navigation width (in px).\n   */\n  navWidth: number;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to resize the `LayoutNav` component.\n *\n * @see {@link useResizableExpandableLayout} for a default implementation for\n * this component.\n *\n * @example\n * Dynamic Resizing\n * ```tsx\n * import {\n *   LayoutNav,\n *   LayoutWindowSplitter,\n *   Main,\n *   NoSsr,\n *   useWindowSize,\n *   useWindowSplitter,\n * } from \"@react-md/core\";\n * import type { ReactElement, PropsWithChildren } from \"react\"\n *\n * function MyWindowSplitter(): ReactElement {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const min = 96;\n *   const max = Math.max(600, width * .7);\n *\n *   const { value, splitterProps } = useWindowSplitter({\n *     min,\n *     max,\n *     defaultValue: 256,\n *   });\n *\n *   return (\n *     <LayoutWindowSplitter\n *       aria-controls=\"layout-nav-id\"\n *       {...splitterProps}\n *       value={value}\n *     />\n *   );\n * }\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   return (\n *     <>\n *       <LayoutNav id=\"layout-nav\" {...otherProps}>\n *         <YourNavigation />\n *       </LayoutNav>\n *       // only required when using SSR\n *       <NoSsr>\n *         <MyWindowSplitter />\n *       </NoSsr>\n *       <Main navOffset>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const LayoutWindowSplitter = forwardRef<\n  HTMLButtonElement,\n  LayoutWindowSplitterProps\n>(function LayoutWindowSplitter(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = ariaLabelledBy ? undefined : \"Resize Navigation\",\n    appBarOffset,\n    disableResponsive,\n    className,\n    navWidth,\n    ...remaining\n  } = props;\n\n  useCSSVariables<DefinedCSSVariableName>(\n    useMemo(\n      () => [{ name: \"--rmd-layout-size\", value: `${navWidth}px` }],\n      [navWidth]\n    )\n  );\n\n  return (\n    <WindowSplitter\n      {...remaining}\n      ref={ref}\n      aria-label={ariaLabel as string}\n      aria-labelledby={ariaLabelledBy}\n      className={layoutWindowSplitter({\n        appBarOffset,\n        disableResponsive,\n        className,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","useMemo","useCSSVariables","WindowSplitter","layoutWindowSplitter","LayoutWindowSplitter","props","ref","ariaLabelledBy","ariaLabel","undefined","appBarOffset","disableResponsive","className","navWidth","remaining","name","value","aria-label","aria-labelledby"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAE5C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SACEC,cAAc,QAET,uCAAuC;AAE9C,SACEC,oBAAoB,QAEf,kCAAkC;AAqBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DC,GACD,OAAO,MAAMC,qCAAuBL,WAGlC,SAASK,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,mBAAmB,EAC1EC,YAAY,EACZC,iBAAiB,EACjBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJJ,gBACED,QACE,IAAM;YAAC;gBAAEe,MAAM;gBAAqBC,OAAO,CAAC,EAAEH,SAAS,EAAE,CAAC;YAAC;SAAE,EAC7D;QAACA;KAAS;IAId,qBACE,KAACX;QACE,GAAGY,SAAS;QACbR,KAAKA;QACLW,cAAYT;QACZU,mBAAiBX;QACjBK,WAAWT,qBAAqB;YAC9BO;YACAC;YACAC;QACF;;AAGN,GAAG"}
+{"version":3,"sources":["../../src/layout/LayoutWindowSplitter.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useMemo } from \"react\";\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport {\n  WindowSplitter,\n  type BaseWindowSplitterProps,\n} from \"../window-splitter/WindowSplitter.js\";\nimport { type WindowSplitterWidgetProps } from \"../window-splitter/useWindowSplitter.js\";\nimport {\n  layoutWindowSplitter,\n  type LayoutWindowSplitterClassNameOptions,\n} from \"./layoutWindowSplitterStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterProps\n  extends WindowSplitterWidgetProps<HTMLButtonElement>,\n    Omit<\n      BaseWindowSplitterProps,\n      keyof WindowSplitterWidgetProps<HTMLButtonElement>\n    >,\n    LayoutWindowSplitterClassNameOptions {\n  /** @defaultValue `\"Resize Navigation\"` */\n  \"aria-label\"?: string;\n\n  /**\n   * The current navigation width (in px).\n   */\n  navWidth: number;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to resize the `LayoutNav` component.\n *\n * @see {@link useResizableExpandableLayout} for a default implementation for\n * this component.\n *\n * @example Dynamic Resizing\n * ```tsx\n * import {\n *   LayoutNav,\n *   LayoutWindowSplitter,\n *   Main,\n *   NoSsr,\n *   useWindowSize,\n *   useWindowSplitter,\n * } from \"@react-md/core\";\n * import type { ReactElement, PropsWithChildren } from \"react\"\n *\n * function MyWindowSplitter(): ReactElement {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const min = 96;\n *   const max = Math.max(600, width * .7);\n *\n *   const { value, splitterProps } = useWindowSplitter({\n *     min,\n *     max,\n *     defaultValue: 256,\n *   });\n *\n *   return (\n *     <LayoutWindowSplitter\n *       aria-controls=\"layout-nav-id\"\n *       {...splitterProps}\n *       value={value}\n *     />\n *   );\n * }\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   return (\n *     <>\n *       <LayoutNav id=\"layout-nav\" {...otherProps}>\n *         <YourNavigation />\n *       </LayoutNav>\n *       // only required when using SSR\n *       <NoSsr>\n *         <MyWindowSplitter />\n *       </NoSsr>\n *       <Main navOffset>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const LayoutWindowSplitter = forwardRef<\n  HTMLButtonElement,\n  LayoutWindowSplitterProps\n>(function LayoutWindowSplitter(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = ariaLabelledBy ? undefined : \"Resize Navigation\",\n    appBarOffset,\n    disableResponsive,\n    className,\n    navWidth,\n    ...remaining\n  } = props;\n\n  useCSSVariables<DefinedCSSVariableName>(\n    useMemo(\n      () => [{ name: \"--rmd-layout-size\", value: `${navWidth}px` }],\n      [navWidth]\n    )\n  );\n\n  return (\n    <WindowSplitter\n      {...remaining}\n      ref={ref}\n      aria-label={ariaLabel as string}\n      aria-labelledby={ariaLabelledBy}\n      className={layoutWindowSplitter({\n        appBarOffset,\n        disableResponsive,\n        className,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","useMemo","useCSSVariables","WindowSplitter","layoutWindowSplitter","LayoutWindowSplitter","props","ref","ariaLabelledBy","ariaLabel","undefined","appBarOffset","disableResponsive","className","navWidth","remaining","name","value","aria-label","aria-labelledby"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAE5C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SACEC,cAAc,QAET,uCAAuC;AAE9C,SACEC,oBAAoB,QAEf,kCAAkC;AAqBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DC,GACD,OAAO,MAAMC,qCAAuBL,WAGlC,SAASK,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,mBAAmB,EAC1EC,YAAY,EACZC,iBAAiB,EACjBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJJ,gBACED,QACE,IAAM;YAAC;gBAAEe,MAAM;gBAAqBC,OAAO,CAAC,EAAEH,SAAS,EAAE,CAAC;YAAC;SAAE,EAC7D;QAACA;KAAS;IAId,qBACE,KAACX;QACE,GAAGY,SAAS;QACbR,KAAKA;QACLW,cAAYT;QACZU,mBAAiBX;QACjBK,WAAWT,qBAAqB;YAC9BO;YACAC;YACAC;QACF;;AAGN,GAAG"}

package/dist/layout/Main.d.ts

@@ -1,7 +1,7 @@
 import { type ElementType, type HTMLAttributes, type ReactNode, type Ref } from "react";
 import { type MainClassNameOptions } from "./mainStyles.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type CustomMainElement = ElementType<HTMLAttributes<HTMLElement> & {
     ref: Ref<HTMLElement>;
@@ -9,7 +9,7 @@ export type CustomMainElement = ElementType<HTMLAttributes<HTMLElement> & {
     tabIndex?: number;
 }>;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface MainProps extends HTMLAttributes<HTMLElement>, MainClassNameOptions {
     /**
@@ -26,8 +26,7 @@ export interface MainProps extends HTMLAttributes<HTMLElement>, MainClassNameOpt
  * to work correctly. If you don't need that functionality, use the {@link main}
  * style utility instead.
  *
- * @example
- * Styles Only
+ * @example Styles Only
  * ```tsx
  * import { main as mainStyles } from "@react-md/core":
  *
@@ -45,7 +44,7 @@ export interface MainProps extends HTMLAttributes<HTMLElement>, MainClassNameOpt
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Renamed from `LayoutMain` removed a lot of
+ * @since 6.0.0 Renamed from `LayoutMain` removed a lot of
  * functionality to keep this component simple.
  */
 export declare const Main: import("react").ForwardRefExoticComponent<MainProps & import("react").RefAttributes<HTMLElement>>;

package/dist/layout/Main.js

@@ -12,8 +12,7 @@ import { useMainTabIndex } from "./useMainTabIndex.js";
  * to work correctly. If you don't need that functionality, use the {@link main}
  * style utility instead.
  *
- * @example
- * Styles Only
+ * @example Styles Only
  * ```tsx
  * import { main as mainStyles } from "@react-md/core":
  *
@@ -31,7 +30,7 @@ import { useMainTabIndex } from "./useMainTabIndex.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Renamed from `LayoutMain` removed a lot of
+ * @since 6.0.0 Renamed from `LayoutMain` removed a lot of
  * functionality to keep this component simple.
  */ export const Main = /*#__PURE__*/ forwardRef(function Main(props, ref) {
     const { as: Component = "main", id: propId, className, children, tabIndex: propTabIndex, navOffset, appBarOffset, ...remaining } = props;

package/dist/layout/Main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/Main.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { main, type MainClassNameOptions } from \"./mainStyles.js\";\nimport { useMainTabIndex } from \"./useMainTabIndex.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type CustomMainElement = ElementType<\n  HTMLAttributes<HTMLElement> & {\n    ref: Ref<HTMLElement>;\n    className?: string;\n    tabIndex?: number;\n  }\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MainProps\n  extends HTMLAttributes<HTMLElement>,\n    MainClassNameOptions {\n  /**\n   * @defaultValue `\"main\"`\n   */\n  as?: CustomMainElement;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is really only used to dynamically set the `tabIndex` to `-1`\n * while using a keyboard for the `SkipToMainContent` component's focus behavior\n * to work correctly. If you don't need that functionality, use the {@link main}\n * style utility instead.\n *\n * @example\n * Styles Only\n * ```tsx\n * import { main as mainStyles } from \"@react-md/core\":\n *\n * function MyCustomMainElement({ children }) {\n *   return (\n *     <main\n *       className={mainStyles({\n *         navOffset: true,\n *         appBarOffset: true,\n *       })}\n *     >\n *       {children}\n *     </main>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Renamed from `LayoutMain` removed a lot of\n * functionality to keep this component simple.\n */\nexport const Main = forwardRef<HTMLElement, MainProps>(\n  function Main(props, ref) {\n    const {\n      as: Component = \"main\",\n      id: propId,\n      className,\n      children,\n      tabIndex: propTabIndex,\n      navOffset,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"main\");\n    const tabIndex = useMainTabIndex(propTabIndex);\n\n    return (\n      <Component\n        {...remaining}\n        id={id}\n        ref={ref}\n        className={main({ navOffset, appBarOffset, className })}\n        tabIndex={tabIndex}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","main","useMainTabIndex","Main","props","ref","as","Component","id","propId","className","children","tabIndex","propTabIndex","navOffset","appBarOffset","remaining"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,IAAI,QAAmC,kBAAkB;AAClE,SAASC,eAAe,QAAQ,uBAAuB;AA0BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,qBAAOJ,WAClB,SAASI,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,IAAIC,YAAY,MAAM,EACtBC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,UAAUC,YAAY,EACtBC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGZ;IACJ,MAAMI,KAAKR,aAAaS,QAAQ;IAChC,MAAMG,WAAWV,gBAAgBW;IAEjC,qBACE,KAACN;QACE,GAAGS,SAAS;QACbR,IAAIA;QACJH,KAAKA;QACLK,WAAWT,KAAK;YAAEa;YAAWC;YAAcL;QAAU;QACrDE,UAAUA;kBAETD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/Main.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { main, type MainClassNameOptions } from \"./mainStyles.js\";\nimport { useMainTabIndex } from \"./useMainTabIndex.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomMainElement = ElementType<\n  HTMLAttributes<HTMLElement> & {\n    ref: Ref<HTMLElement>;\n    className?: string;\n    tabIndex?: number;\n  }\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MainProps\n  extends HTMLAttributes<HTMLElement>,\n    MainClassNameOptions {\n  /**\n   * @defaultValue `\"main\"`\n   */\n  as?: CustomMainElement;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is really only used to dynamically set the `tabIndex` to `-1`\n * while using a keyboard for the `SkipToMainContent` component's focus behavior\n * to work correctly. If you don't need that functionality, use the {@link main}\n * style utility instead.\n *\n * @example Styles Only\n * ```tsx\n * import { main as mainStyles } from \"@react-md/core\":\n *\n * function MyCustomMainElement({ children }) {\n *   return (\n *     <main\n *       className={mainStyles({\n *         navOffset: true,\n *         appBarOffset: true,\n *       })}\n *     >\n *       {children}\n *     </main>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Renamed from `LayoutMain` removed a lot of\n * functionality to keep this component simple.\n */\nexport const Main = forwardRef<HTMLElement, MainProps>(\n  function Main(props, ref) {\n    const {\n      as: Component = \"main\",\n      id: propId,\n      className,\n      children,\n      tabIndex: propTabIndex,\n      navOffset,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"main\");\n    const tabIndex = useMainTabIndex(propTabIndex);\n\n    return (\n      <Component\n        {...remaining}\n        id={id}\n        ref={ref}\n        className={main({ navOffset, appBarOffset, className })}\n        tabIndex={tabIndex}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","main","useMainTabIndex","Main","props","ref","as","Component","id","propId","className","children","tabIndex","propTabIndex","navOffset","appBarOffset","remaining"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,IAAI,QAAmC,kBAAkB;AAClE,SAASC,eAAe,QAAQ,uBAAuB;AA0BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,MAAMC,qBAAOJ,WAClB,SAASI,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,IAAIC,YAAY,MAAM,EACtBC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,UAAUC,YAAY,EACtBC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGZ;IACJ,MAAMI,KAAKR,aAAaS,QAAQ;IAChC,MAAMG,WAAWV,gBAAgBW;IAEjC,qBACE,KAACN;QACE,GAAGS,SAAS;QACbR,IAAIA;QACJH,KAAKA;QACLK,WAAWT,KAAK;YAAEa;YAAWC;YAAcL;QAAU;QACrDE,UAAUA;kBAETD;;AAGP,GACA"}

package/dist/layout/_layout.scss

@@ -13,6 +13,7 @@
 
 $disable-everything: false !default;
 $disable-resizable: false !default;
+$disable-full-height-navigation: false !default;
 
 $main-focus-z-index: 999 !default;
 
@@ -93,8 +94,10 @@ $variables: (size, header-height);
       .rmd-layout-nav {
         @include sheet.set-var(width, get-var(size));
         @include media-queries.media($navigation-breakpoint) {
+          // Why did I want grid? flex seems easier atm
           // use grid so that you can easily have a header + tree that fills the remaining space
-          display: grid;
+          display: flex;
+          flex-direction: column;
         }
 
         container: $navigation-container-name;
@@ -106,6 +109,14 @@ $variables: (size, header-height);
         }
       }
 
+      @if not $disable-full-height-navigation {
+        .rmd-layout-nav-toggle {
+          @include media-queries.media($navigation-breakpoint) {
+            display: none;
+          }
+        }
+      }
+
       /// This class is used to transition when the nav expands/collapses on
       /// larger screen sizes
       .rmd-layout-h {

package/dist/layout/layoutNavStyles.d.ts

@@ -1,5 +1,5 @@
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface LayoutNavClassNameOptions {
     className?: string;
@@ -11,6 +11,6 @@ export interface LayoutNavClassNameOptions {
     appBarOffset?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function layoutNav(options?: LayoutNavClassNameOptions): string;

package/dist/layout/layoutNavStyles.js

@@ -2,7 +2,7 @@ import { cnb } from "cnbuilder";
 import { bem } from "../utils/bem.js";
 const styles = bem("rmd-layout-nav");
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function layoutNav(options = {}) {
     const { className, appBarOffset } = options;
     return cnb(styles({

package/dist/layout/layoutNavStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/layoutNavStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-layout-nav\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface LayoutNavClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the nav should appear below the fixed app bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function layoutNav(options: LayoutNavClassNameOptions = {}): string {\n  const { className, appBarOffset } = options;\n\n  return cnb(styles({ \"offset-v\": appBarOffset }), className);\n}\n"],"names":["cnb","bem","styles","layoutNav","options","className","appBarOffset"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAgBnB;;CAEC,GACD,OAAO,SAASE,UAAUC,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGF;IAEpC,OAAOJ,IAAIE,OAAO;QAAE,YAAYI;IAAa,IAAID;AACnD"}
+{"version":3,"sources":["../../src/layout/layoutNavStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-layout-nav\");\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutNavClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the nav should appear below the fixed app bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function layoutNav(options: LayoutNavClassNameOptions = {}): string {\n  const { className, appBarOffset } = options;\n\n  return cnb(styles({ \"offset-v\": appBarOffset }), className);\n}\n"],"names":["cnb","bem","styles","layoutNav","options","className","appBarOffset"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAgBnB;;CAEC,GACD,OAAO,SAASE,UAAUC,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGF;IAEpC,OAAOJ,IAAIE,OAAO;QAAE,YAAYI;IAAa,IAAID;AACnD"}

package/dist/layout/layoutWindowSplitterStyles.d.ts

@@ -1,5 +1,5 @@
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface LayoutWindowSplitterClassNameOptions {
     className?: string;
@@ -20,6 +20,6 @@ export interface LayoutWindowSplitterClassNameOptions {
     disableResponsive?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function layoutWindowSplitter(options?: LayoutWindowSplitterClassNameOptions): string;

package/dist/layout/layoutWindowSplitterStyles.js

@@ -2,7 +2,7 @@ import { cnb } from "cnbuilder";
 import { bem } from "../utils/bem.js";
 const styles = bem("rmd-layout-splitter");
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function layoutWindowSplitter(options = {}) {
     const { className, appBarOffset, disableResponsive } = options;
     return cnb(styles({

package/dist/layout/layoutWindowSplitterStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/layoutWindowSplitterStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-layout-splitter\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface LayoutWindowSplitterClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the window splitter should stop below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /**\n   * Set this to `true` if the window splitter should no longer automatically be\n   * hidden on for any viewport below the `$layout-navigation-breakpoint`\n   * (default phone).\n   *\n   * @defaultValue `false`\n   */\n  disableResponsive?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function layoutWindowSplitter(\n  options: LayoutWindowSplitterClassNameOptions = {}\n): string {\n  const { className, appBarOffset, disableResponsive } = options;\n\n  return cnb(\n    styles({\n      \"offset-v\": appBarOffset,\n      responsive: !disableResponsive,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","layoutWindowSplitter","options","className","appBarOffset","disableResponsive","responsive"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA0BnB;;CAEC,GACD,OAAO,SAASE,qBACdC,UAAgD,CAAC,CAAC;IAElD,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,iBAAiB,EAAE,GAAGH;IAEvD,OAAOJ,IACLE,OAAO;QACL,YAAYI;QACZE,YAAY,CAACD;IACf,IACAF;AAEJ"}
+{"version":3,"sources":["../../src/layout/layoutWindowSplitterStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-layout-splitter\");\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the window splitter should stop below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /**\n   * Set this to `true` if the window splitter should no longer automatically be\n   * hidden on for any viewport below the `$layout-navigation-breakpoint`\n   * (default phone).\n   *\n   * @defaultValue `false`\n   */\n  disableResponsive?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function layoutWindowSplitter(\n  options: LayoutWindowSplitterClassNameOptions = {}\n): string {\n  const { className, appBarOffset, disableResponsive } = options;\n\n  return cnb(\n    styles({\n      \"offset-v\": appBarOffset,\n      responsive: !disableResponsive,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","layoutWindowSplitter","options","className","appBarOffset","disableResponsive","responsive"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA0BnB;;CAEC,GACD,OAAO,SAASE,qBACdC,UAAgD,CAAC,CAAC;IAElD,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,iBAAiB,EAAE,GAAGH;IAEvD,OAAOJ,IACLE,OAAO;QACL,YAAYI;QACZE,YAAY,CAACD;IACf,IACAF;AAEJ"}