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

package/src/expansion-panel/useExpansionPanels.ts

@@ -26,7 +26,7 @@ export interface ExpansionPanelHookOptions {
    *
    * @defaultValue `false`
    */
-  preventAllClosed?: boolean;
+  preventAllCollapsed?: boolean;
 
   /**
    * This is a convenience option to disable the expansion transition for all
@@ -37,7 +37,7 @@ export interface ExpansionPanelHookOptions {
   disableTransition?: boolean;
 
   /**
-   * @defaultValue `preventAllClosed ? ["expansion-panel-" + useId() + "-1"] : []`
+   * @defaultValue `preventAllCollapsed ? ["expansion-panel-" + useId() + "-1"] : []`
    */
   defaultExpandedIds?: UseStateInitializer<string[]>;
 
@@ -71,13 +71,12 @@ export interface ExpansionPanelHookOptions {
 /** @remarks \@since 6.0.0 */
 export type ProvidedExpansionPanelProps = Pick<
   Required<ExpansionPanelProps>,
-  | "id"
   | "disabled"
   | "expanded"
   | "onExpandClick"
   | "disableTransition"
   | "disableContentPadding"
->;
+> & { id?: string };
 
 /**
  * @param indexOrPanelId - This should either be a DOM id to use for the panel
@@ -207,7 +206,7 @@ export function useExpansionPanels(
   const {
     baseId: propBaseId,
     multiple = false,
-    preventAllClosed = false,
+    preventAllCollapsed = false,
     disableTransition = false,
     defaultExpandedIds,
     defaultExpandedIndex,
@@ -219,7 +218,7 @@ export function useExpansionPanels(
   const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => {
     if (typeof defaultExpandedIds === "undefined") {
       const initialList: string[] = [];
-      if (typeof defaultExpandedIndex === "number" || preventAllClosed) {
+      if (typeof defaultExpandedIndex === "number" || preventAllCollapsed) {
         initialList.push(createId(defaultExpandedIndex ?? 0));
       }
 
@@ -237,13 +236,18 @@ export function useExpansionPanels(
     expandedIds,
     setExpandedIds,
     getPanelProps(indexOrPanelId) {
-      const id =
-        typeof indexOrPanelId === "string"
-          ? indexOrPanelId
-          : createId(indexOrPanelId);
+      let id: string | undefined;
+      let panelId: string;
+      if (typeof indexOrPanelId === "number") {
+        id = createId(indexOrPanelId);
+        panelId = id;
+      } else {
+        panelId = indexOrPanelId;
+      }
 
-      const expanded = expandedIds.has(id);
-      const disabled = expanded && preventAllClosed && expandedIds.size === 1;
+      const expanded = expandedIds.has(panelId);
+      const disabled =
+        expanded && preventAllCollapsed && expandedIds.size === 1;
       return {
         id,
         disabled,
@@ -254,16 +258,16 @@ export function useExpansionPanels(
           }
 
           setExpandedIds((prevIds) => {
-            const expanded = prevIds.has(id);
+            const expanded = prevIds.has(panelId);
             if (!multiple) {
-              return new Set(expanded ? [] : [id]);
+              return new Set(expanded ? [] : [panelId]);
             }
 
             const nextIds = new Set(prevIds);
             if (expanded) {
-              nextIds.delete(id);
+              nextIds.delete(panelId);
             } else {
-              nextIds.add(id);
+              nextIds.add(panelId);
             }
 
             return nextIds;

package/src/form/MenuItemInputToggle.tsx

@@ -96,7 +96,7 @@ export interface BaseMenuItemInputToggleProps
   height?: ListItemHeight;
 
   /** @defaultValue `false` */
-  threeLines?: boolean;
+  multiline?: boolean;
 
   /** @defaultValue `false` */
   disableTextChildren?: boolean;

package/src/form/Select.tsx

@@ -411,7 +411,7 @@ export function Select<Value extends string>(
   const { onEntering, onEntered, onExiting, onExited, disableTransition } =
     menuProps;
   const handleMounting =
-    (callback: TransitionEnterHandler | undefined = noop, skipped = false) =>
+    (callback: TransitionEnterHandler | undefined = noop, skipped: boolean) =>
     (appearing: boolean) => {
       callback(appearing);
 
@@ -509,6 +509,14 @@ export function Select<Value extends string>(
           onEntered={handleMounting(onEntered, !disableTransition)}
           onExiting={handleUnmounting(onExiting, false)}
           onExited={handleUnmounting(onExited, !disableTransition)}
+          sheetProps={{
+            ...menuProps.sheetProps,
+            onEntering: handleMounting(menuProps.sheetProps?.onEntering, false),
+            onEntered: handleMounting(
+              menuProps.sheetProps?.onEntered,
+              !disableTransition
+            ),
+          }}
         >
           {children}
         </Menu>

package/src/form/_form.scss

@@ -427,8 +427,14 @@ $variables: (
 }
 
 @mixin file-input-styles {
-  .rmd-file-input:focus-within::before {
-    @include utils.keyboard-only {
+  @if utils.$disable-has-selectors or utils.$disable-focus-visible {
+    .rmd-file-input:focus-within::before {
+      @include utils.keyboard-only {
+        @include interaction.focus-styles;
+      }
+    }
+  } @else {
+    .rmd-file-input:has(:focus-visible)::before {
       @include interaction.focus-styles;
     }
   }
@@ -1193,7 +1199,14 @@ $variables: (
 @mixin input-toggle-styles {
   .rmd-input-toggle {
     @include interaction.surface(
-      $focus-selector: "&:focus-within",
+      $focus-selector:
+        if(
+          utils.$disable-has-selectors or utils.$disable-focus-visible,
+          "&:focus-within",
+          "&:has(:focus-visible)"
+        ),
+      $keyboard-only-focus: utils.$disable-has-selectors or
+        utils.$disable-focus-visible,
       $disabled-selector: "&--disabled",
       $higher-contrast: false
     );
@@ -1280,8 +1293,14 @@ $variables: (
     }
 
     &__input {
-      @include utils.keyboard-only {
-        &:focus + .rmd-switch__ball::before {
+      @if utils.$disable-focus-visible {
+        @include utils.keyboard-only {
+          &:focus + .rmd-switch__ball::before {
+            @include interaction.focus-styles;
+          }
+        }
+      } @else {
+        &:focus-visible + .rmd-switch__ball::before {
           @include interaction.focus-styles;
         }
       }
@@ -1613,18 +1632,6 @@ $variables: (
       background-color,
       if($slider-track-color, slider-color, slider-active-color)
     );
-    @include utils.keyboard-only {
-      &:focus::after {
-        transform: scale($slider-thumb-focus-scale);
-      }
-    }
-    @include utils.touch-only {
-      &:hover::after,
-      &--active:after,
-      &--active:hover::after {
-        transform: none;
-      }
-    }
 
     border-radius: $slider-thumb-border-radius;
     height: $slider-thumb-size;
@@ -1642,13 +1649,24 @@ $variables: (
         $slider-transition-timing-function;
     }
 
-    &:hover::after {
-      transform: scale($slider-thumb-focus-scale);
+    @if utils.$disable-focus-visible {
+      @include utils.keyboard-only {
+        &:focus::after {
+          transform: scale($slider-thumb-focus-scale);
+        }
+      }
+    } @else {
+      &:focus-visible::after {
+        transform: scale($slider-thumb-focus-scale);
+      }
     }
 
-    &--active::after,
-    &--active:hover::after {
-      transform: scale($slider-thumb-active-scale);
+    @include utils.mouse-hover(false) {
+      &:hover::after,
+      &--active::after,
+      &--active:hover::after {
+        transform: scale($slider-thumb-active-scale);
+      }
     }
 
     &--animate {

package/src/icon/IconRotator.tsx

@@ -50,7 +50,6 @@ export interface IconRotatorProps extends IconRotatorBaseProps {
 export const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(
   function IconRotator(props, ref) {
     const {
-      style,
       className: propClassName,
       rotated,
       children,
@@ -72,7 +71,7 @@ export const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(
     }
 
     return (
-      <span {...remaining} style={style} className={className} ref={ref}>
+      <span {...remaining} ref={ref} className={className}>
         {children}
       </span>
     );

package/src/icon/_icon.scss

@@ -108,6 +108,11 @@ $variables: (
     @include set-var(symbol-weight, $symbol-weight);
     @include set-var(symbol-optical-size, $symbol-optical-size);
   }
+
+  @if not $disable-rotator {
+    @include set-var(rotate-from, $rotate-from);
+    @include set-var(rotate-to, $rotate-to);
+  }
 }
 
 @mixin styles {
@@ -170,13 +175,13 @@ $variables: (
 
       @if not $disable-spacing-above {
         &--above {
-          @include use-var(margin-top, spacing);
+          @include use-var(margin-bottom, spacing);
         }
       }
 
       @if not $disable-spacing-below {
         &--below {
-          @include use-var(margin-bottom, spacing);
+          @include use-var(margin-top, spacing);
         }
       }
 

package/src/index.ts

@@ -13,6 +13,7 @@ export * from "./button/AsyncButton.js";
 export * from "./button/Button.js";
 export * from "./button/ButtonUnstyled.js";
 export * from "./button/FloatingActionButton.js";
+export * from "./button/TooltippedButton.js";
 export * from "./button/buttonStyles.js";
 export * from "./button/buttonUnstyledStyles.js";
 export * from "./card/Card.js";
@@ -21,6 +22,7 @@ export * from "./card/CardFooter.js";
 export * from "./card/CardHeader.js";
 export * from "./card/CardSubtitle.js";
 export * from "./card/CardTitle.js";
+export * from "./card/ClickableCard.js";
 export * from "./card/styles.js";
 export * from "./chip/Chip.js";
 export * from "./chip/styles.js";
@@ -260,6 +262,7 @@ export * from "./transition/Slide.js";
 export * from "./transition/SlideContainer.js";
 export * from "./transition/config.js";
 export * from "./transition/maxWidthTransition.js";
+export * from "./transition/skeletonPlaceholderUtils.js";
 export * from "./transition/types.js";
 export * from "./transition/useCSSTransition.js";
 export * from "./transition/useCarousel.js";
@@ -291,6 +294,7 @@ export * from "./typography/WritingDirectionProvider.js";
 export * from "./useAsyncAction.js";
 export * from "./useDebouncedFunction.js";
 export * from "./useDropzone.js";
+export * from "./useElementSize.js";
 export * from "./useEnsuredId.js";
 export * from "./useEnsuredRef.js";
 export * from "./useHtmlClassName.js";
@@ -311,6 +315,7 @@ export * from "./utils/applyRef.js";
 export * from "./utils/bem.js";
 export * from "./utils/filters.js";
 export * from "./utils/getClientPosition.js";
+export * from "./utils/getMiddleOfRange.js";
 export * from "./utils/getPercentage.js";
 export * from "./utils/getRangeDefaultValue.js";
 export * from "./utils/getRangeSteps.js";

package/src/interaction/_interaction.scss

@@ -284,7 +284,8 @@ $variables: (
 }
 
 @mixin surface(
-  $focus-selector: "&:focus",
+  $focus-selector: "&:focus" + if(utils.$disable-focus-visible, "", "-visible"),
+  $keyboard-only-focus: utils.$disable-focus-visible,
   $disabled-selector: "&:disabled",
   $clickable: true,
   $hoverable: true,
@@ -322,7 +323,13 @@ $variables: (
   }
 
   @if $focus-selector {
-    @include utils.keyboard-only($css-modules) {
+    @if $keyboard-only-focus {
+      @include utils.keyboard-only($css-modules) {
+        #{$focus-selector + "::before"} {
+          @include focus-styles($box-shadow, $disable-background);
+        }
+      }
+    } @else {
       #{$focus-selector + "::before"} {
         @include focus-styles($box-shadow, $disable-background);
       }
@@ -330,13 +337,9 @@ $variables: (
   }
 
   @if $hoverable {
-    &:hover::before {
-      @include set-var(background-color, get-var(hover-background-color));
-    }
-
-    @include utils.touch-only {
-      &:hover::before {
-        @include set-var(background-color, transparent);
+    @include utils.mouse-hover {
+      &::before {
+        @include set-var(background-color, get-var(hover-background-color));
       }
     }
 

package/src/layout/__tests__/__snapshots__/LayoutAppBar.tsx.snap

@@ -12,7 +12,7 @@ exports[`LayoutAppBar should allow props to be passed to the SkipToMainContent c
 
 exports[`LayoutAppBar should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   id="layout-header-:r0:"
 >
   <a
@@ -28,7 +28,7 @@ exports[`LayoutAppBar should apply the correct styling, HTMLAttributes, and allo
 
 exports[`LayoutAppBar should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container custom-class-name"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container custom-class-name"
   id="layout-header-:r0:"
   style="color: white;"
 >
@@ -45,7 +45,7 @@ exports[`LayoutAppBar should apply the correct styling, HTMLAttributes, and allo
 
 exports[`LayoutAppBar should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-app-bar--elevated rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-app-bar--elevated rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   id="layout-header-:r0:"
   style=""
 >
@@ -62,7 +62,7 @@ exports[`LayoutAppBar should apply the correct styling, HTMLAttributes, and allo
 
 exports[`LayoutAppBar should apply the correct styling, HTMLAttributes, and allow a ref 4`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="div"
   id="layout-header-:r0:"
 >

package/src/layout/__tests__/__snapshots__/useExpandableLayout.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`useExpandableLayout should allow you to create an expandable layout quickly 1`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
 >
   <button
     aria-label="Navigation"

package/src/layout/__tests__/__snapshots__/useLayoutTree.tsx.snap

@@ -127,7 +127,7 @@ exports[`useLayoutTree should automatically expand parent items if the pathname
       class="rmd-list rmd-tree-group rmd-collapse rmd-collapse--no-overflow rmd-display-none"
       id="tree-item-:rk:-group"
       role="group"
-      style="max-height: 0; padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: -1;"
+      style="max-height: 0; padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: 1;"
     >
       <li
         class="rmd-tree-item rmd-tree-item--expander-right"
@@ -136,7 +136,7 @@ exports[`useLayoutTree should automatically expand parent items if the pathname
         <a
           aria-expanded="false"
           aria-selected="false"
-          class="rmd-tree-item__content rmd-tree-item__content--link rmd-tree-item__content--padded rmd-list-item rmd-interaction-surface"
+          class="rmd-tree-item__content rmd-tree-item__content--link rmd-list-item rmd-interaction-surface"
           href="/route-3/1"
           id="tree-item-:rl:"
           role="treeitem"
@@ -160,7 +160,7 @@ exports[`useLayoutTree should automatically expand parent items if the pathname
           class="rmd-list rmd-tree-group rmd-collapse rmd-collapse--no-overflow rmd-display-none"
           id="tree-item-:rl:-group"
           role="group"
-          style="max-height: 0; padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: 0;"
+          style="max-height: 0; padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: 2;"
         >
           <li
             class="rmd-tree-item rmd-tree-item--expander-right"
@@ -169,7 +169,7 @@ exports[`useLayoutTree should automatically expand parent items if the pathname
             <a
               aria-expanded="false"
               aria-selected="false"
-              class="rmd-tree-item__content rmd-tree-item__content--link rmd-tree-item__content--padded rmd-list-item rmd-interaction-surface"
+              class="rmd-tree-item__content rmd-tree-item__content--link rmd-list-item rmd-interaction-surface"
               href="/route-3/1/1"
               id="tree-item-:rm:"
               role="treeitem"
@@ -193,7 +193,7 @@ exports[`useLayoutTree should automatically expand parent items if the pathname
               class="rmd-list rmd-tree-group rmd-collapse rmd-collapse--no-overflow rmd-display-none"
               id="tree-item-:rm:-group"
               role="group"
-              style="max-height: 0; padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: 1;"
+              style="max-height: 0; padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: 3;"
             >
               <li
                 class="rmd-tree-item"
@@ -201,7 +201,7 @@ exports[`useLayoutTree should automatically expand parent items if the pathname
               >
                 <a
                   aria-selected="false"
-                  class="rmd-tree-item__content rmd-tree-item__content--link rmd-tree-item__content--padded rmd-list-item rmd-interaction-surface"
+                  class="rmd-tree-item__content rmd-tree-item__content--link rmd-list-item rmd-interaction-surface"
                   href="/route-3/1/1/1"
                   id="tree-item-:rn:"
                   role="treeitem"
@@ -352,7 +352,7 @@ exports[`useLayoutTree should automatically expand parent items if the pathname
       class="rmd-list rmd-tree-group rmd-collapse rmd-collapse--enter rmd-collapse--no-overflow"
       id="tree-item-:rk:-group"
       role="group"
-      style="max-height: 0; padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: -1; transition-duration: 250ms;"
+      style="max-height: 0; padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: 1; transition-duration: 250ms;"
     >
       <li
         class="rmd-tree-item rmd-tree-item--expander-right"
@@ -361,7 +361,7 @@ exports[`useLayoutTree should automatically expand parent items if the pathname
         <a
           aria-expanded="true"
           aria-selected="false"
-          class="rmd-tree-item__content rmd-tree-item__content--link rmd-tree-item__content--padded rmd-list-item rmd-interaction-surface"
+          class="rmd-tree-item__content rmd-tree-item__content--link rmd-list-item rmd-interaction-surface"
           href="/route-3/1"
           id="tree-item-:rl:"
           role="treeitem"
@@ -385,7 +385,7 @@ exports[`useLayoutTree should automatically expand parent items if the pathname
           class="rmd-list rmd-tree-group rmd-collapse rmd-collapse--enter rmd-collapse--no-overflow"
           id="tree-item-:rl:-group"
           role="group"
-          style="max-height: 0; padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: 0; transition-duration: 250ms;"
+          style="max-height: 0; padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: 2; transition-duration: 250ms;"
         >
           <li
             class="rmd-tree-item rmd-tree-item--expander-right"
@@ -394,7 +394,7 @@ exports[`useLayoutTree should automatically expand parent items if the pathname
             <a
               aria-expanded="true"
               aria-selected="true"
-              class="rmd-tree-item__content rmd-tree-item__content--link rmd-tree-item__content--padded rmd-tree-item__content--selected rmd-list-item rmd-interaction-surface"
+              class="rmd-tree-item__content rmd-tree-item__content--link rmd-tree-item__content--selected rmd-list-item rmd-interaction-surface"
               href="/route-3/1/1"
               id="tree-item-:rm:"
               role="treeitem"
@@ -418,7 +418,7 @@ exports[`useLayoutTree should automatically expand parent items if the pathname
               class="rmd-list rmd-tree-group rmd-collapse rmd-collapse--enter rmd-collapse--no-overflow"
               id="tree-item-:rm:-group"
               role="group"
-              style="max-height: 0; padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: 1; transition-duration: 250ms;"
+              style="max-height: 0; padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: 3; transition-duration: 250ms;"
             >
               <li
                 class="rmd-tree-item"
@@ -426,7 +426,7 @@ exports[`useLayoutTree should automatically expand parent items if the pathname
               >
                 <a
                   aria-selected="false"
-                  class="rmd-tree-item__content rmd-tree-item__content--link rmd-tree-item__content--padded rmd-list-item rmd-interaction-surface"
+                  class="rmd-tree-item__content rmd-tree-item__content--link rmd-list-item rmd-interaction-surface"
                   href="/route-3/1/1/1"
                   id="tree-item-:rn:"
                   role="treeitem"
@@ -577,7 +577,7 @@ exports[`useLayoutTree should default to expanding all parent items from the sta
       class="rmd-list rmd-tree-group rmd-collapse"
       id="tree-item-:rc:-group"
       role="group"
-      style="--rmd-tree-depth: -1;"
+      style="--rmd-tree-depth: 1;"
     >
       <li
         class="rmd-tree-item rmd-tree-item--expander-right"
@@ -586,7 +586,7 @@ exports[`useLayoutTree should default to expanding all parent items from the sta
         <a
           aria-expanded="true"
           aria-selected="false"
-          class="rmd-tree-item__content rmd-tree-item__content--link rmd-tree-item__content--padded rmd-list-item rmd-interaction-surface"
+          class="rmd-tree-item__content rmd-tree-item__content--link rmd-list-item rmd-interaction-surface"
           href="/route-3/1"
           id="tree-item-:rd:"
           role="treeitem"
@@ -610,7 +610,7 @@ exports[`useLayoutTree should default to expanding all parent items from the sta
           class="rmd-list rmd-tree-group rmd-collapse"
           id="tree-item-:rd:-group"
           role="group"
-          style="--rmd-tree-depth: 0;"
+          style="--rmd-tree-depth: 2;"
         >
           <li
             class="rmd-tree-item rmd-tree-item--expander-right"
@@ -619,7 +619,7 @@ exports[`useLayoutTree should default to expanding all parent items from the sta
             <a
               aria-expanded="true"
               aria-selected="false"
-              class="rmd-tree-item__content rmd-tree-item__content--link rmd-tree-item__content--padded rmd-list-item rmd-interaction-surface"
+              class="rmd-tree-item__content rmd-tree-item__content--link rmd-list-item rmd-interaction-surface"
               href="/route-3/1/1"
               id="tree-item-:re:"
               role="treeitem"
@@ -643,7 +643,7 @@ exports[`useLayoutTree should default to expanding all parent items from the sta
               class="rmd-list rmd-tree-group rmd-collapse"
               id="tree-item-:re:-group"
               role="group"
-              style="--rmd-tree-depth: 1;"
+              style="--rmd-tree-depth: 3;"
             >
               <li
                 class="rmd-tree-item"
@@ -651,7 +651,7 @@ exports[`useLayoutTree should default to expanding all parent items from the sta
               >
                 <a
                   aria-selected="true"
-                  class="rmd-tree-item__content rmd-tree-item__content--link rmd-tree-item__content--padded rmd-tree-item__content--selected rmd-list-item rmd-interaction-surface"
+                  class="rmd-tree-item__content rmd-tree-item__content--link rmd-tree-item__content--selected rmd-list-item rmd-interaction-surface"
                   href="/route-3/1/1/1"
                   id="tree-item-:rf:"
                   role="treeitem"

package/src/layout/__tests__/__snapshots__/useResizableLayout.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`useResizableLayout should allow you to create a resizable layout quickly 1`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
 >
   <button
     aria-label="Navigation"

package/src/layout/__tests__/__snapshots__/useTemporaryLayout.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`useTemporaryLayout should allow you to create a temporary layout quickly 1`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
 >
   <button
     aria-label="Navigation"

package/src/layout/useLayoutAppBarHeight.ts

@@ -1,9 +1,9 @@
 "use client";
 import type { Ref, RefCallback } from "react";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo } from "react";
 import type { DefinedCSSVariableName } from "../theme/types.js";
 import type { CSSVariable } from "../theme/useCSSVariables.js";
-import { useResizeObserver } from "../useResizeObserver.js";
+import { useElementSize } from "../useElementSize.js";
 
 declare module "react" {
   interface CSSProperties {
@@ -74,16 +74,12 @@ export interface LayoutAppBarHeightResult {
 export function useLayoutAppBarHeight(
   ref?: Ref<HTMLDivElement>
 ): LayoutAppBarHeightResult {
-  const [height, setHeight] = useState<number | undefined>();
-  const targetRef = useResizeObserver({
+  const { height, elementRef } = useElementSize({
     ref,
-    onUpdate: useCallback((entry) => {
-      setHeight(entry.borderBoxSize[0].blockSize);
-    }, []),
     disableWidth: true,
   });
   const variables = useMemo<CSSVariable<DefinedCSSVariableName>[]>(() => {
-    if (typeof height !== "number") {
+    if (Number.isNaN(height)) {
       return [];
     }
 
@@ -93,6 +89,6 @@ export function useLayoutAppBarHeight(
   return {
     height,
     variables,
-    appBarRef: targetRef,
+    appBarRef: elementRef,
   };
 }