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

package/src/form/textAreaStyles.ts

@@ -8,8 +8,8 @@ import { type TextAreaResize } from "./useResizingTextArea.js";
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-form-textarea-height"?: string | number;
-    "--rmd-form-textarea-padding"?: string | number;
+    "--rmd-textarea-height"?: string | number;
+    "--rmd-textarea-padding"?: string | number;
   }
 }
 

package/src/form/types.ts

@@ -9,10 +9,8 @@ import { type PropsWithRef } from "../types.js";
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-form-error-color"?: string;
     "--rmd-form-active-color"?: string;
     "--rmd-form-focus-color"?: string;
-    "--rmd-form-disabled-color"?: string;
   }
 }
 

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

@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "sass:map";
 @use "../theme/theme";
 @use "../transition/transition";
 @use "../utils";
@@ -47,61 +46,31 @@ $rotate-from: 0deg !default;
 $rotate-to: 180deg !default;
 $rotate-duration: transition.$linear-duration !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-icon-color,
-    value: $color,
-  ),
-  size: (
-    var: --rmd-icon-size,
-    value: $size,
-  ),
-  spacing: (
-    var: --rmd-icon-spacing,
-    value: $spacing,
-  ),
-  rotate-from: (
-    var: --rmd-icon-rotate-from,
-    value: $rotate-from,
-  ),
-  rotate-to: (
-    var: --rmd-icon-rotate-to,
-    value: $rotate-to,
-  ),
-  symbol-fill: (
-    var: --rmd-symbol-fill,
-    value: $symbol-fill,
-  ),
-  symbol-grade: (
-    var: --rmd-symbol-grad,
-    value: $symbol-grade,
-  ),
-  symbol-weight: (
-    var: --rmd-symbol-wght,
-    value: $symbol-weight,
-  ),
-  symbol-optical-size: (
-    var: --rmd-symbol-opsz,
-    value: $symbol-optical-size,
-  ),
+$variables: (
+  color,
+  size,
+  spacing,
+  rotate-from,
+  rotate-to,
+  symbol-fill,
+  symbol-grade,
+  symbol-weight,
+  symbol-optical-size
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "icon var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "icon");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "icon var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "icon")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -126,6 +95,26 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-font or not $disable-svg or not $disable-symbol {
+    @include set-var(color, $color);
+    @include set-var(size, $size);
+    @include set-var(spacing, $spacing);
+  }
+
+  @if not $disable-symbol {
+    @include set-var(symbol-fill, $symbol-fill);
+    @include set-var(symbol-grade, $symbol-grade);
+    @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 {
   // shouldn't really use react-md without icons though...
   @if not $disable-font or not $disable-svg and not $disable-symbol {
@@ -186,13 +175,13 @@ $var-lookup: (
 
       @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

@@ -117,55 +117,19 @@ $selected-background-color: theme.get-default-color(
   $dark-surface-selected-background-color
 ) !default;
 
-$var-lookup: (
-  ripple-background-color: (
-    var: --rmd-ripple-background-color,
-    value: $ripple-background-color,
-  ),
-  background-color: (
-    var: --rmd-interaction-background-color,
-    value: null,
-  ),
-  hover-background-color: (
-    var: --rmd-hover-background-color,
-    value: $hover-background-color,
-  ),
-  focus-background-color: (
-    var: --rmd-focus-background-color,
-    value: $focus-background-color,
-  ),
-  press-background-color: (
-    var: --rmd-press-background-color,
-    value: $press-background-color,
-  ),
-  selected-background-color: (
-    var: --rmd-selected-background-color,
-    value: $selected-background-color,
-  ),
-  focus-color: (
-    var: --rmd-focus-color,
-    value: $focus-color,
-  ),
-  focus-width: (
-    var: --rmd-focus-width,
-    value: $focus-width,
-  ),
-  ripple-inset: (
-    var: --rmd-ripple-inset,
-    value: 0,
-  ),
-  ripple-border-radius: (
-    var: --rmd-ripple-border-radius,
-    value: inherit,
-  ),
-  surface-inset: (
-    var: --rmd-surface-inset,
-    value: 0,
-  ),
-  surface-border-radius: (
-    var: --rmd-surface-border-radius,
-    value: inherit,
-  ),
+$variables: (
+  background-color,
+  hover-background-color,
+  focus-background-color,
+  press-background-color,
+  selected-background-color,
+  focus-color,
+  focus-width,
+  ripple-inset,
+  ripple-border-radius,
+  ripple-background-color,
+  surface-inset,
+  surface-border-radius
 );
 
 @function _is-var-disabled($name) {
@@ -189,27 +153,35 @@ $var-lookup: (
 }
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "interaction var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+  // cannot set a custom property to `inherit` for some reason. It will not be parsed.
+  @if not
+    $fallback and
+    ($name == ripple-border-radius or $name == surface-border-radius)
+  {
+    $fallback: inherit;
+  }
+
   @if _is-var-disabled($name) {
-    @return $value;
+    @return $fallback;
   }
 
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "interaction");
+
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "interaction var"), var);
   @if _is-var-disabled($name) {
     @error '"#{$name}" is currently disabled and cannot be changed. Set "$disable-#{$name}-var" to `true` or remove it from the Sass module overrides.';
   }
 
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "interaction")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -312,7 +284,8 @@ $var-lookup: (
 }
 
 @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,
@@ -350,7 +323,13 @@ $var-lookup: (
   }
 
   @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);
       }
@@ -358,13 +337,9 @@ $var-lookup: (
   }
 
   @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));
       }
     }
 
@@ -382,6 +357,24 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @include set-var(focus-color, $focus-color);
+  @include set-var(focus-width, $focus-width);
+  @include set-var(hover-background-color, $hover-background-color);
+  @include set-var(focus-background-color, $focus-background-color);
+  @include set-var(press-background-color, $press-background-color);
+  @include set-var(selected-background-color, $selected-background-color);
+
+  @if not $_disable-ripple {
+    @include set-var(ripple-background-color, $ripple-background-color);
+    @include set-var(ripple-inset, 0);
+  }
+
+  @if not $disable-surface-inset-var {
+    @include set-var(surface-inset, 0);
+  }
+}
+
 @mixin styles {
   @if not $_disable-ripple {
     .rmd-ripple-container {

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/_layout.scss

@@ -29,39 +29,34 @@ $enter-timing-function: sheet.$enter-timing-function !default;
 $leave-duration: sheet.$leave-duration !default;
 $leave-timing-function: sheet.$leave-timing-function !default;
 
-$var-lookup: (
-  size: (
-    var: --rmd-layout-size,
-    value: $navigation-static-width,
-  ),
-  header-height: (
-    var: --rmd-layout-header-height,
-    value: $header-height,
-  ),
-);
+$variables: (size, header-height);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "layout var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "layout");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "layout var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "layout")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(size, $navigation-static-width);
+    @include set-var(header-height, $header-height);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-layout-main {