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

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-*;
@@ -15,15 +13,15 @@
 @forward "icon/icon" as icon-*;
 @forward "divider/divider" as divider-*;
 @forward "progress/progress" as progress-*;
+@forward "overlay/overlay" as overlay-*;
 @forward "button/button" as button-*;
 @forward "badge/badge" as badge-*;
 @forward "tabs/tabs" as tabs-*;
+@forward "avatar/avatar" as avatar-*;
 @forward "chip/chip" as chip-*;
 @forward "table/table" as table-*;
 @forward "app-bar/app-bar" as app-bar-*;
 @forward "responsive-item/responsive-item" as responsive-item-*;
-@forward "overlay/overlay" as overlay-*;
-@forward "avatar/avatar" as avatar-*;
 @forward "card/card" as card-*;
 @forward "link/link" as link-*;
 @forward "list/list" as list-*;
@@ -142,160 +140,162 @@ $_layer-order: (
   }
 }
 
-@mixin css-utils {
-  .rmd-display-none {
-    display: none !important;
-  }
+@mixin css-utils($disable-layer: false) {
+  @include utils.optional-layer(utils, $disable-layer) {
+    .rmd-display-none {
+      display: none !important;
+    }
 
-  .rmd-sr-only {
-    @include utils.sr-only(true);
-  }
+    .rmd-sr-only {
+      @include utils.sr-only(true);
+    }
 
-  .rmd-phone-sr-only {
-    @include media-queries.phone-media {
-      @include utils.sr-only;
+    .rmd-phone-sr-only {
+      @include media-queries.phone-media {
+        @include utils.sr-only;
+      }
     }
-  }
 
-  .rmd-outline {
-    // inset box-shadow is faded on the lower right half? use outline instead
-    outline: theme.theme-get-var(outline-width) solid
-      theme.theme-get-var(outline-color);
-    outline-offset: utils.negate-var(theme.theme-get-var(outline-width));
-  }
+    .rmd-outline {
+      // inset box-shadow is faded on the lower right half? use outline instead
+      outline: theme.theme-get-var(outline-width) solid
+        theme.theme-get-var(outline-color);
+      outline-offset: utils.negate-var(theme.theme-get-var(outline-width));
+    }
 
-  .rmd-greyscale-outline {
-    @include theme.theme-set-var(outline-color, outline-grey-color);
-  }
+    .rmd-greyscale-outline {
+      @include theme.theme-set-var(outline-color, outline-grey-color);
+    }
 
-  .rmd-background-container {
-    @include theme.theme-use-var(background-color);
-    @include theme.theme-use-var(color, on-background-color, currentcolor);
-  }
+    .rmd-background-container {
+      @include theme.theme-use-var(background-color);
+      @include theme.theme-use-var(color, on-background-color, currentcolor);
+    }
 
-  @each $color in (primary, secondary, warning, success, error) {
-    $theme-name: $color + "-color";
-    $on-theme-name: "on-" + $theme-name;
+    @each $color in (primary, secondary, warning, success, error) {
+      $theme-name: $color + "-color";
+      $on-theme-name: "on-" + $theme-name;
 
-    .rmd-#{$color}-container {
-      @include theme.theme-set-var(background-color, $theme-name);
-      @include theme.theme-set-var(on-background-color, $on-theme-name);
-    }
+      .rmd-#{$color}-container {
+        @include theme.theme-set-var(background-color, $theme-name);
+        @include theme.theme-set-var(on-background-color, $on-theme-name);
+      }
 
-    .rmd-#{$theme-name} {
-      @include theme.theme-use-var(color, $theme-name);
-    }
+      .rmd-#{$theme-name} {
+        @include theme.theme-use-var(color, $theme-name);
+      }
 
-    .rmd-#{$on-theme-name} {
-      @include theme.theme-use-var(color, $on-theme-name);
-    }
+      .rmd-#{$on-theme-name} {
+        @include theme.theme-use-var(color, $on-theme-name);
+      }
 
-    .rmd-#{$color}-outline {
-      @include theme.theme-set-var(outline-color, $theme-name);
+      .rmd-#{$color}-outline {
+        @include theme.theme-set-var(outline-color, $theme-name);
+      }
     }
-  }
 
-  @each $color in (primary, secondary, hint, disabled) {
-    .rmd-text-#{$color}-color {
-      @include theme.theme-use-var(color, text-#{$color}-color);
+    @each $color in (primary, secondary, hint, disabled) {
+      .rmd-text-#{$color}-color {
+        @include theme.theme-use-var(color, text-#{$color}-color);
+      }
     }
-  }
 
-  .rmd-light-surface {
-    @include interaction.use-light-surface;
-    @include theme.theme-set-var(
-      text-primary-color,
-      theme.$light-theme-text-primary-color
-    );
-    @include theme.theme-set-var(
-      text-secondary-color,
-      theme.$light-theme-text-secondary-color
-    );
-    @include theme.theme-set-var(
-      text-hint-color,
-      theme.$light-theme-text-hint-color
-    );
-    @include theme.theme-set-var(
-      text-disabled-color,
-      theme.$dark-theme-text-disabled-color
-    );
-  }
+    .rmd-light-surface {
+      @include interaction.use-light-surface;
+      @include theme.theme-set-var(
+        text-primary-color,
+        theme.$light-theme-text-primary-color
+      );
+      @include theme.theme-set-var(
+        text-secondary-color,
+        theme.$light-theme-text-secondary-color
+      );
+      @include theme.theme-set-var(
+        text-hint-color,
+        theme.$light-theme-text-hint-color
+      );
+      @include theme.theme-set-var(
+        text-disabled-color,
+        theme.$dark-theme-text-disabled-color
+      );
+    }
 
-  .rmd-dark-surface {
-    @include interaction.use-dark-surface;
-    @include theme.theme-set-var(
-      text-primary-color,
-      theme.$dark-theme-text-primary-color
-    );
-    @include theme.theme-set-var(
-      text-secondary-color,
-      theme.$dark-theme-text-secondary-color
-    );
-    @include theme.theme-set-var(
-      text-hint-color,
-      theme.$dark-theme-text-hint-color
-    );
-    @include theme.theme-set-var(
-      text-disabled-color,
-      theme.$dark-theme-text-disabled-color
-    );
-  }
+    .rmd-dark-surface {
+      @include interaction.use-dark-surface;
+      @include theme.theme-set-var(
+        text-primary-color,
+        theme.$dark-theme-text-primary-color
+      );
+      @include theme.theme-set-var(
+        text-secondary-color,
+        theme.$dark-theme-text-secondary-color
+      );
+      @include theme.theme-set-var(
+        text-hint-color,
+        theme.$dark-theme-text-hint-color
+      );
+      @include theme.theme-set-var(
+        text-disabled-color,
+        theme.$dark-theme-text-disabled-color
+      );
+    }
 
-  .rmd-no-margin {
-    margin: 0;
-  }
+    .rmd-no-margin {
+      margin: 0;
+    }
 
-  .rmd-no-margin-top {
-    margin-top: 0;
-  }
+    .rmd-no-margin-top {
+      margin-top: 0;
+    }
 
-  .rmd-no-margin-bottom {
-    margin-bottom: 0;
-  }
+    .rmd-no-margin-bottom {
+      margin-bottom: 0;
+    }
 
-  .rmd-centered {
-    margin: 0 auto;
-  }
+    .rmd-centered {
+      margin: 0 auto;
+    }
 
-  .rmd-nowrap {
-    white-space: nowrap;
-  }
+    .rmd-nowrap {
+      white-space: nowrap;
+    }
 
-  .rmd-ellipsis {
-    @include typography.text-overflow(null);
-  }
+    .rmd-ellipsis {
+      @include typography.text-overflow(null);
+    }
 
-  @each $alignment in typography.$text-alignments {
-    .rmd-align-#{$alignment} {
-      @if $alignment != center {
-        @include utils.auto-rtl(text-align, $alignment);
-      } @else {
-        text-align: $alignment;
+    @each $alignment in typography.$text-alignments {
+      .rmd-align-#{$alignment} {
+        @if $alignment != center {
+          @include utils.auto-rtl(text-align, $alignment);
+        } @else {
+          text-align: $alignment;
+        }
       }
     }
-  }
 
-  @each $decoration in typography.$text-decorations {
-    .rmd-#{$decoration} {
-      text-decoration: $decoration;
+    @each $decoration in typography.$text-decorations {
+      .rmd-#{$decoration} {
+        text-decoration: $decoration;
+      }
     }
-  }
 
-  @each $transform in typography.$text-transforms {
-    .rmd-#{$transform} {
-      text-transform: $transform;
+    @each $transform in typography.$text-transforms {
+      .rmd-#{$transform} {
+        text-transform: $transform;
+      }
     }
-  }
 
-  @each $font-style in typography.$font-styles {
-    .rmd-#{$font-style} {
-      font-style: $font-style;
+    @each $font-style in typography.$font-styles {
+      .rmd-#{$font-style} {
+        font-style: $font-style;
+      }
     }
-  }
 
-  @each $name, $font-weight in typography.$font-weights {
-    .rmd-#{$name} {
-      font-weight: $font-weight;
+    @each $name, $font-weight in typography.$font-weights {
+      .rmd-#{$name} {
+        font-weight: $font-weight;
+      }
     }
   }
 }
@@ -312,6 +312,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,140 +327,93 @@ $_layer-order: (
   @include form.use-dark-theme;
   @include table.use-dark-theme;
   @include segmented-button.use-dark-theme;
+  @include badge.use-dark-theme;
 }
 
-@mixin styles {
-  @include css-reset;
-
-  @layer #{$_layer-order};
-  @layer utils {
-    @include css-utils;
-  }
-
-  @layer app-bar {
-    @include app-bar.styles;
-  }
-  @layer avatar {
-    @include avatar.styles;
-  }
-  @layer badge {
-    @include badge.styles;
-  }
-  @layer box {
-    @include box.styles;
-  }
-  @layer button {
-    @include button.styles;
-  }
-  @layer card {
-    @include card.styles;
-  }
-  @layer chip {
-    @include chip.styles;
-  }
-
-  @layer dialog {
-    @include dialog.styles;
-  }
-  @layer divider {
-    @include divider.styles;
-  }
-  @layer draggable {
-    @include draggable.styles;
-  }
-  @layer expansion-panel {
-    @include expansion-panel.styles;
-  }
-
-  @layer form {
-    @include form.styles;
-  }
-
-  @layer icon {
-    @include icon.styles;
-  }
-
-  @layer interaction {
-    @include interaction.styles;
-  }
-
-  @layer layout {
-    @include layout.styles;
-  }
-
-  @layer link {
-    @include link.styles;
-  }
-
-  @layer list {
-    @include list.styles;
-  }
-
-  @layer menu {
-    @include menu.styles;
-  }
-
-  @layer overlay {
-    @include overlay.styles;
-  }
-
-  @layer progress {
-    @include progress.styles;
-  }
-
-  @layer responsive-item {
-    @include responsive-item.styles;
-  }
-
-  @layer segmented-button {
-    @include segmented-button.styles;
-  }
-
-  @layer sheet {
-    @include sheet.styles;
-  }
-
-  @layer snackbar {
-    @include snackbar.styles;
-  }
-
-  @layer table {
-    @include table.styles;
-  }
-
-  @layer tabs {
-    @include tabs.styles;
-  }
-
-  @layer tooltip {
-    @include tooltip.styles;
-  }
-
-  @layer transition {
-    @include transition.transition-styles;
-  }
-
-  @layer tree {
-    @include tree.styles;
-  }
-
-  @layer typography {
-    @include typography.typography-styles;
-  }
+@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;
+}
 
-  @layer window-splitter {
-    @include window-splitter.styles;
-  }
+@mixin styles(
+  $disable-layer: false,
+  $disable-layer-order: $disable-layer,
+  $disable-reset: false,
+  $disable-css-utils: false
+) {
+  @if not $disable-layer-order {
+    @layer #{$_layer-order};
+  }
+  @if not $disable-reset {
+    @include css-reset;
+  }
+  @if not $disable-css-utils {
+    @include css-utils($disable-layer);
+  }
+
+  @include app-bar.styles($disable-layer);
+  @include avatar.styles($disable-layer);
+  @include badge.styles($disable-layer);
+  @include box.styles($disable-layer);
+  @include button.styles($disable-layer);
+  @include card.styles($disable-layer);
+  @include chip.styles($disable-layer);
+  @include dialog.styles($disable-layer);
+  @include divider.styles($disable-layer);
+  @include draggable.styles($disable-layer);
+  @include expansion-panel.styles($disable-layer);
+  @include form.styles($disable-layer);
+  @include icon.styles($disable-layer);
+  @include interaction.styles($disable-layer);
+  @include layout.styles($disable-layer);
+  @include link.styles($disable-layer);
+  @include list.styles($disable-layer);
+  @include menu.styles($disable-layer);
+  @include overlay.styles($disable-layer);
+  @include progress.styles($disable-layer);
+  @include responsive-item.styles($disable-layer);
+  @include segmented-button.styles($disable-layer);
+  @include sheet.styles($disable-layer);
+  @include snackbar.styles($disable-layer);
+  @include table.styles($disable-layer);
+  @include tabs.styles($disable-layer);
+  @include tooltip.styles($disable-layer);
+  @include transition.transition-styles($disable-layer);
+  @include tree.styles($disable-layer);
+  @include typography.typography-styles($disable-layer);
+  @include window-splitter.styles($disable-layer);
 
   @if not theme.$disable-default-root-theme {
     :root {
-      @include theme.colors;
+      @include variables;
 
-      @if not
-        theme.$disable-default-system-theme and
-        theme.$color-scheme ==
-        system
-      {
+      @if theme.$color-scheme == system {
         @media (prefers-color-scheme: dark) {
           @include use-dark-theme;
         }

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,25 @@ $_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;
+    }
+  }
+}
+
+@mixin optional-layer($name, $disabled) {
+  @if $disabled {
+    @content;
+  } @else {
+    @layer #{$name} {
+      @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