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

package/coverage/lcov.info

@@ -0,0 +1,474 @@
+TN:
+SF:src/suspense/CircularProgressSuspense.tsx
+FN:44,CircularProgressSuspense
+FNF:1
+FNH:1
+FNDA:3,CircularProgressSuspense
+DA:1,1
+DA:2,1
+DA:3,1
+DA:4,1
+DA:5,1
+DA:6,1
+DA:7,1
+DA:8,1
+DA:9,1
+DA:10,1
+DA:11,1
+DA:12,1
+DA:13,1
+DA:14,1
+DA:15,1
+DA:16,1
+DA:17,1
+DA:18,1
+DA:19,1
+DA:20,1
+DA:21,1
+DA:22,1
+DA:23,1
+DA:24,1
+DA:25,1
+DA:26,1
+DA:27,1
+DA:28,1
+DA:29,1
+DA:30,1
+DA:31,1
+DA:32,1
+DA:33,1
+DA:34,1
+DA:35,1
+DA:36,1
+DA:37,1
+DA:38,1
+DA:39,1
+DA:40,1
+DA:41,1
+DA:42,1
+DA:43,1
+DA:44,1
+DA:45,3
+DA:46,3
+DA:47,3
+DA:48,3
+DA:49,3
+DA:50,3
+DA:51,3
+DA:52,3
+DA:53,3
+DA:54,3
+DA:55,3
+DA:56,3
+DA:57,3
+DA:58,3
+DA:59,3
+DA:60,3
+DA:61,3
+DA:62,3
+DA:63,3
+DA:64,3
+DA:65,3
+DA:66,3
+LF:66
+LH:66
+BRDA:44,0,0,3
+BRDA:50,1,0,1
+BRDA:50,2,0,1
+BRF:3
+BRH:3
+end_of_record
+TN:
+SF:src/suspense/NullSuspense.tsx
+FN:35,NullSuspense
+FNF:1
+FNH:1
+FNDA:1,NullSuspense
+DA:1,1
+DA:2,1
+DA:3,1
+DA:4,1
+DA:5,1
+DA:6,1
+DA:7,1
+DA:8,1
+DA:9,1
+DA:10,1
+DA:11,1
+DA:12,1
+DA:13,1
+DA:14,1
+DA:15,1
+DA:16,1
+DA:17,1
+DA:18,1
+DA:19,1
+DA:20,1
+DA:21,1
+DA:22,1
+DA:23,1
+DA:24,1
+DA:25,1
+DA:26,1
+DA:27,1
+DA:28,1
+DA:29,1
+DA:30,1
+DA:31,1
+DA:32,1
+DA:33,1
+DA:34,1
+DA:35,1
+DA:36,1
+DA:37,1
+DA:38,1
+DA:39,1
+LF:39
+LH:39
+BRDA:35,0,0,1
+BRF:1
+BRH:1
+end_of_record
+TN:
+SF:src/typography/Typography.tsx
+FN:139,typography
+FN:175,getComponent
+FN:275,Typography
+FNF:3
+FNH:3
+FNDA:4,typography
+FNDA:4,getComponent
+FNDA:4,Typography
+DA:1,1
+DA:2,1
+DA:3,1
+DA:4,1
+DA:5,1
+DA:6,1
+DA:7,1
+DA:8,1
+DA:9,1
+DA:10,1
+DA:11,1
+DA:12,1
+DA:13,1
+DA:14,1
+DA:15,1
+DA:16,1
+DA:17,1
+DA:18,1
+DA:19,1
+DA:20,1
+DA:21,1
+DA:22,1
+DA:23,1
+DA:24,1
+DA:25,1
+DA:26,1
+DA:27,1
+DA:28,1
+DA:29,1
+DA:30,1
+DA:31,1
+DA:32,1
+DA:33,1
+DA:34,1
+DA:35,1
+DA:36,1
+DA:37,1
+DA:38,1
+DA:39,1
+DA:40,1
+DA:41,1
+DA:42,1
+DA:43,1
+DA:44,1
+DA:45,1
+DA:46,1
+DA:47,1
+DA:48,1
+DA:49,1
+DA:50,1
+DA:51,1
+DA:52,1
+DA:53,1
+DA:54,1
+DA:55,1
+DA:56,1
+DA:57,1
+DA:58,1
+DA:59,1
+DA:60,1
+DA:61,1
+DA:62,1
+DA:63,1
+DA:64,1
+DA:65,1
+DA:66,1
+DA:67,1
+DA:68,1
+DA:69,1
+DA:70,1
+DA:71,1
+DA:72,1
+DA:73,1
+DA:74,1
+DA:75,1
+DA:76,1
+DA:77,1
+DA:78,1
+DA:79,1
+DA:80,1
+DA:81,1
+DA:82,1
+DA:83,1
+DA:84,1
+DA:85,1
+DA:86,1
+DA:87,1
+DA:88,1
+DA:89,1
+DA:90,1
+DA:91,1
+DA:92,1
+DA:93,1
+DA:94,1
+DA:95,1
+DA:96,1
+DA:97,1
+DA:98,1
+DA:99,1
+DA:100,1
+DA:101,1
+DA:102,1
+DA:103,1
+DA:104,1
+DA:105,1
+DA:106,1
+DA:107,1
+DA:108,1
+DA:109,1
+DA:110,1
+DA:111,1
+DA:112,1
+DA:113,1
+DA:114,1
+DA:115,1
+DA:116,1
+DA:117,1
+DA:118,1
+DA:119,1
+DA:120,1
+DA:121,1
+DA:122,1
+DA:123,1
+DA:124,1
+DA:125,1
+DA:126,1
+DA:127,1
+DA:128,1
+DA:129,1
+DA:130,1
+DA:131,1
+DA:132,1
+DA:133,1
+DA:134,1
+DA:135,1
+DA:136,1
+DA:137,1
+DA:138,1
+DA:139,1
+DA:140,4
+DA:141,4
+DA:142,4
+DA:143,4
+DA:144,4
+DA:145,4
+DA:146,4
+DA:147,4
+DA:148,4
+DA:149,4
+DA:150,4
+DA:151,4
+DA:152,1
+DA:153,1
+DA:154,1
+DA:155,1
+DA:156,1
+DA:157,1
+DA:158,1
+DA:159,1
+DA:160,1
+DA:161,1
+DA:162,1
+DA:163,1
+DA:164,1
+DA:165,1
+DA:166,1
+DA:167,1
+DA:168,1
+DA:169,1
+DA:170,1
+DA:171,1
+DA:172,1
+DA:173,1
+DA:174,1
+DA:175,4
+DA:176,4
+DA:177,4
+DA:178,4
+DA:179,4
+DA:180,0
+DA:181,0
+DA:182,4
+DA:183,4
+DA:184,4
+DA:185,0
+DA:186,4
+DA:187,0
+DA:188,4
+DA:189,0
+DA:190,4
+DA:191,0
+DA:192,4
+DA:193,0
+DA:194,4
+DA:195,4
+DA:196,4
+DA:197,0
+DA:198,4
+DA:199,4
+DA:200,4
+DA:201,4
+DA:202,0
+DA:203,4
+DA:204,0
+DA:205,4
+DA:206,4
+DA:207,1
+DA:208,1
+DA:209,1
+DA:210,1
+DA:211,1
+DA:212,1
+DA:213,1
+DA:214,1
+DA:215,1
+DA:216,1
+DA:217,1
+DA:218,1
+DA:219,1
+DA:220,1
+DA:221,1
+DA:222,1
+DA:223,1
+DA:224,1
+DA:225,1
+DA:226,1
+DA:227,1
+DA:228,1
+DA:229,1
+DA:230,1
+DA:231,1
+DA:232,1
+DA:233,1
+DA:234,1
+DA:235,1
+DA:236,1
+DA:237,1
+DA:238,1
+DA:239,1
+DA:240,1
+DA:241,1
+DA:242,1
+DA:243,1
+DA:244,1
+DA:245,1
+DA:246,1
+DA:247,1
+DA:248,1
+DA:249,1
+DA:250,1
+DA:251,1
+DA:252,1
+DA:253,1
+DA:254,1
+DA:255,1
+DA:256,1
+DA:257,1
+DA:258,1
+DA:259,1
+DA:260,1
+DA:261,1
+DA:262,1
+DA:263,1
+DA:264,1
+DA:265,1
+DA:266,1
+DA:267,1
+DA:268,1
+DA:269,1
+DA:270,1
+DA:271,1
+DA:272,1
+DA:273,1
+DA:274,1
+DA:275,1
+DA:276,4
+DA:277,4
+DA:278,4
+DA:279,4
+DA:280,4
+DA:281,4
+DA:282,4
+DA:283,4
+DA:284,4
+DA:285,4
+DA:286,4
+DA:287,4
+DA:288,4
+DA:289,4
+DA:290,4
+DA:291,4
+DA:292,4
+DA:293,4
+DA:294,4
+DA:295,4
+DA:296,4
+DA:297,4
+DA:298,4
+DA:299,4
+DA:300,4
+DA:301,4
+DA:302,4
+DA:303,4
+DA:304,4
+DA:305,4
+DA:306,4
+DA:307,4
+DA:308,4
+DA:309,4
+DA:310,4
+DA:311,4
+DA:312,4
+DA:313,4
+DA:314,1
+LF:314
+LH:304
+BRDA:139,0,0,4
+BRDA:175,1,0,4
+BRDA:179,2,0,0
+BRDA:184,3,0,0
+BRDA:186,4,0,0
+BRDA:188,5,0,0
+BRDA:190,6,0,0
+BRDA:192,7,0,0
+BRDA:194,8,0,0
+BRDA:195,9,0,0
+BRDA:196,10,0,0
+BRDA:201,11,0,0
+BRDA:203,12,0,0
+BRDA:275,13,0,4
+BRF:14
+BRH:3
+end_of_record

package/dist/_box-shadows.scss

@@ -168,8 +168,16 @@ $box-shadow-3-layers: (
       }
     }
 
-    #{$active-string} {
-      opacity: 1;
+    @if $active-selectors == "&:hover" {
+      @include utils.mouse-hover {
+        #{$active-string} {
+          opacity: 1;
+        }
+      }
+    } @else {
+      #{$active-string} {
+        opacity: 1;
+      }
     }
   }
 }
@@ -179,6 +187,7 @@ $box-shadow-3-layers: (
   $end-z-value,
   $active-selectors,
   $pseudo-before: true,
+  $pseudo-z-index: 0,
   $duration: transition.$linear-duration,
   $color: $box-shadow-color,
   $opacity-boost: 0,
@@ -201,6 +210,7 @@ $box-shadow-3-layers: (
     $active-selectors,
     $duration,
     $pseudo-before,
+    $pseudo-z-index,
     $position-relative: $position-relative
   );
 }

package/dist/_core.scss

@@ -1,5 +1,3 @@
-@use "sass:list" as sassList;
-
 @forward "utils";
 @forward "media-queries/media-queries";
 @forward "box/box" as box-*;
@@ -312,6 +310,7 @@ $_layer-order: (
   @include form.use-light-theme;
   @include table.use-light-theme;
   @include segmented-button.use-light-theme;
+  @include badge.use-light-theme;
 }
 
 @mixin use-dark-theme {
@@ -326,6 +325,38 @@ $_layer-order: (
   @include form.use-dark-theme;
   @include table.use-dark-theme;
   @include segmented-button.use-dark-theme;
+  @include badge.use-dark-theme;
+}
+
+@mixin variables {
+  @include theme.theme-variables;
+  @include app-bar.variables;
+  @include avatar.variables;
+  @include badge.variables;
+  @include box.variables;
+  @include button.variables;
+  @include card.variables;
+  @include chip.variables;
+  @include dialog.variables;
+  @include divider.variables;
+  @include form.variables;
+  @include icon.variables;
+  @include interaction.variables;
+  @include layout.variables;
+  @include link.variables;
+  @include list.variables;
+  @include menu.variables;
+  @include overlay.variables;
+  @include progress.variables;
+  @include segmented-button.variables;
+  @include sheet.variables;
+  @include snackbar.variables;
+  @include table.variables;
+  @include tabs.variables;
+  @include tooltip.variables;
+  @include transition.transition-variables;
+  @include tree.variables;
+  @include typography.typography-variables;
 }
 
 @mixin styles {
@@ -453,7 +484,7 @@ $_layer-order: (
 
   @if not theme.$disable-default-root-theme {
     :root {
-      @include theme.colors;
+      @include variables;
 
       @if not
         theme.$disable-default-system-theme and

package/dist/_utils.scss

@@ -5,6 +5,16 @@
 
 $disable-rtl: false !default;
 $disable-validation: false !default;
+// :has css selectors will arrive in firefox 121 so the browsers I support will
+// also support it by the time of the react-md release. allowing this to be
+// disabled just to be safe though
+$disable-has-selectors: false !default;
+// I'm reducing the required CSS for `:focus` styles by switching to
+// `:focus-visible` instead of `.keyboard-only .some-selector:focus` but there
+// are some things I don't like as much when switching from mouse to keyboard.
+// Defaulting to `:focus-visible`, but allowing the keyboard-only styles as well
+// if users are more familiar with it
+$disable-focus-visible: false !default;
 $temporary-element-z-index: 30 !default;
 
 $_swappable-positions: top right bottom left;
@@ -64,6 +74,63 @@ $_swappable-properties: text-align;
   @return if($is-list, $key-or-value, map.get($list-or-map, $key-or-value));
 }
 
+@function get-var-name($variables, $name, $group) {
+  @if $group == icon {
+    @if $name == symbol-grade {
+      @return --rmd-symbol-grad;
+    }
+    @if $name == symbol-weight {
+      @return --rmd-symbol-wght;
+    }
+    @if $name == optical-size {
+      @return --rmd-symbol-opsz;
+    }
+  }
+  @if $group == name and $name == fab-offset {
+    @return --rmd-fab-offset;
+  }
+
+  @if $group == form {
+    @if $name ==
+      addon-top or
+      $name ==
+      addon-margin-top or
+      $name ==
+      active-color or
+      $name ==
+      focus-color
+    {
+      @return --rmd-form-#{$name};
+    }
+  }
+  @if $group == interaction and $name == background-color {
+    @return --rmd-interaction-#{$name};
+  }
+
+  @if $group == list {
+    $updated: str-replace(
+      str-replace($name, "horizontal-padding", "padding-h"),
+      "vertical-padding",
+      "padding-v"
+    );
+    @if $updated != $name {
+      @return --rmd-list-#{$name};
+    }
+  }
+
+  @if $group == snackbar and $name != offset {
+    @return --rmd-toast-#{$name};
+  }
+
+  $prefix: "";
+  @if not list.index((theme, form, interaction, transition, typography), $group)
+  {
+    $prefix: $group + "-";
+  }
+
+  @return "--rmd-" + $prefix + validate($variables, $name, $group + " var");
+}
+
 @mixin map-to-styles($map) {
   @each $property, $value in $map {
     @if meta.type-of($value) == map {
@@ -257,3 +324,15 @@ $_swappable-properties: text-align;
     @content;
   }
 }
+
+@mixin mouse-hover($wrap-in-hover: true) {
+  @media (hover: hover) and (pointer: fine) {
+    @if $wrap-in-hover {
+      &:hover {
+        @content;
+      }
+    } @else {
+      @content;
+    }
+  }
+}

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

@@ -1,4 +1,5 @@
 import { type ElementType, type HTMLAttributes, type Ref } from "react";
+import { type BoxOptions } from "../box/styles.js";
 import { type BackgroundColor } from "../cssUtils.js";
 import { type CssPosition } from "../types.js";
 declare module "react" {
@@ -33,7 +34,7 @@ export type AppBarTheme = BackgroundColor | "clear";
  */
 export type AppBarHeight = "auto" | "normal" | "prominent" | "dense" | "prominent-dense";
 /** @remarks \@since 6.0.0 */
-export interface AppBarClassNameOptions {
+export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
     className?: string;
     /**
      * Set this to `"fixed"` or `"sticky"` to set `position: fixed;` or
@@ -63,19 +64,13 @@ export interface AppBarClassNameOptions {
      * @see {@link AppBarTheme}
      */
     theme?: AppBarTheme;
-    /**
-     * Set this to `true` to update the `AppBar` to have `flex-direction: column`.
-     * This is useful when nesting `AppBar`s.
-     *
-     * @remarks \@since 6.0.0
-     * @defaultValue `false`
-     */
-    stacked?: boolean;
     /**
      * @defaultValue `stacked ? "auto" : "normal"`
      * @see {@link AppBarHeight}
      */
     height?: AppBarHeight;
+    /** @see {@link CssUtilsOptions.surfaceColor} */
+    surfaceColor?: "light" | "dark";
     /**
      * Set this to `true` if the app bar's positioning and width should be
      * changed whenever the scrollbar is visible on the page. This defaults to