@expressivecss/expressive 0.3.0 → 0.5.0

package/src/sass/abstracts/_breakpoints.scss

@@ -18,10 +18,21 @@
 // and IE, and `screen` alone excludes print anyway - which these rules never
 // wanted to do, since a hidden element should stay hidden on paper.
 
+// Boundaries, not the size of the screen they target. Column prefixes
+// s / m / l / xl / xxl sit on these in order; there is no `medium` key
+// because the tablet class is `m` and the mixin name is the boundary.
+//
+// M3 window-size classes, for the ones that line up:
+//   compact      width <  600     below "small"
+//   medium       600 ≤ width < 840   (we do not split 840 out of "small")
+//   expanded     840 ≤ width < 1200  "large" is 993, close enough
+//   large       1200 ≤ width < 1600  "xlarge"
+//   extra-large  width ≥ 1600        "xxlarge"
 $breakpoints: (
-  "small": 601px,   // phone      -> tablet
-  "large": 993px,   // tablet     -> desktop
-  "xlarge": 1201px, // desktop    -> wide desktop
+  "small": 601px,     // phone        -> tablet
+  "large": 993px,     // tablet       -> desktop
+  "xlarge": 1201px,   // desktop      -> large desktop
+  "xxlarge": 1601px,  // large        -> extra-large / widescreen
 ) !default;
 
 @function breakpoint($name) {
@@ -51,19 +62,3 @@ $breakpoints: (
     @content;
   }
 }
-
-// Deprecated: the interpolated-string breakpoints.
-//
-// Kept so a downstream `@media #{$medium-and-up}` keeps compiling - the
-// framework itself no longer uses them. Values are now range syntax, so the
-// queries they produce match the mixins above exactly. Prefer the mixins.
-$small-screen-up: breakpoint("small") !default;
-$medium-screen-up: breakpoint("large") !default;
-$large-screen-up: breakpoint("xlarge") !default;
-
-$medium-and-up: "(width >= #{breakpoint('small')})" !default;
-$large-and-up: "(width >= #{breakpoint('large')})" !default;
-$extra-large-and-up: "(width >= #{breakpoint('xlarge')})" !default;
-$small-and-down: "(width < #{breakpoint('small')})" !default;
-$medium-and-down: "(width < #{breakpoint('large')})" !default;
-$medium-only: "(#{breakpoint('small')} <= width < #{breakpoint('large')})" !default;

package/src/sass/abstracts/_mixins.scss

@@ -89,18 +89,18 @@
 
 @mixin btn-elevated {
   color: var(--md-sys-color-primary);
-  background-color: var(--md-sys-color-surface);
+  background-color: var(--md-sys-color-surface-container-low);
   @include z-depth("1");
 
   &:hover {
     @include z-depth("2");
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface));
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-low));
   }
 
   &:active,
   &:focus {
     @include z-depth("1");
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, var(--md-sys-color-surface));
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, var(--md-sys-color-surface-container-low));
   }
 
   @include focus-visible();

package/src/sass/abstracts/_variables.scss

@@ -1,6 +1,3 @@
-// TypeScale
-$md_sys_typescale_body-large_size: 16px;
-
 @use "sass:math";
 
 // Colors
@@ -11,23 +8,39 @@ $md_sys_typescale_body-large_size: 16px;
 // value from it: this link color. Everything now comes from --md-sys-color-*.
 $link-color: var(--md-sys-color-primary) !default;
 
-// Floating buttons
-$button-floating-background: var(--md-sys-color-secondary) !default;
-$button-floating-background-hover: var(--md-ref-palette-secondary70) !default;
-$button-floating-background-focus: var(--md-ref-palette-secondary80) !default;
-$button-floating-color: var(--md-sys-color-on-secondary) !default;
-$button-floating-size: 40px !default;
-$button-floating-radius: 16px !default;
-
-// Dropdown
-$dropdown-item-height: 50px !default;
+// M3 Expressive color roles. The live tokens are --md-sys-color-#{role}.
+// 26 standard roles in six groups (primary, secondary, tertiary, error,
+// surface, outline), plus optional add-ons (fixed accents, the surface
+// container scale) and four legacy aliases (background, on-background,
+// surface-variant, surface-tint). Consumed by tokens/_theme.scss and
+// utilities/_colors.scss so the token layer and the utility classes
+// cannot drift.
+$sys-color-roles: (
+  "primary", "on-primary", "primary-container", "on-primary-container",
+  "primary-fixed", "primary-fixed-dim", "on-primary-fixed", "on-primary-fixed-variant",
+  "secondary", "on-secondary", "secondary-container", "on-secondary-container",
+  "secondary-fixed", "secondary-fixed-dim", "on-secondary-fixed", "on-secondary-fixed-variant",
+  "tertiary", "on-tertiary", "tertiary-container", "on-tertiary-container",
+  "tertiary-fixed", "tertiary-fixed-dim", "on-tertiary-fixed", "on-tertiary-fixed-variant",
+  "error", "on-error", "error-container", "on-error-container",
+  "surface", "on-surface", "on-surface-variant",
+  "surface-dim", "surface-bright",
+  "surface-container-lowest", "surface-container-low", "surface-container",
+  "surface-container-high", "surface-container-highest",
+  "outline", "outline-variant",
+  "inverse-surface", "inverse-on-surface", "inverse-primary",
+  "scrim", "shadow",
+  "background", "on-background", "surface-variant", "surface-tint"
+) !default;
+
+// Menu
+$menu-item-height: 50px !default;
 
 // Media query ranges now live in abstracts/_breakpoints.scss, which states
 // each boundary once and emits range syntax - see the note there about why
 // the 600.99px / 992.99px / 1200.99px values are gone.
 
 // Grid
-$num-cols: 12 !default;
 $gutter-width: 1.5rem !default;
 $element-top-margin: math.div($gutter-width, 3) !default;
 $element-bottom-margin: math.div($gutter-width * 2, 3) !default;
@@ -40,15 +53,6 @@ $text-color: var(--md-sys-color-on-background) !default;
 // derived from it, so the two cannot drift.
 $root-font-size: 14px !default;
 
-// Legacy rem heading ladder. Headings now consume --md-sys-typescale-*
-// (see base/_typography.scss). Kept so existing Sass overrides still compile.
-$h1-fontsize: 4.2rem !default;
-$h2-fontsize: 3.56rem !default;
-$h3-fontsize: 2.92rem !default;
-$h4-fontsize: 2.28rem !default;
-$h5-fontsize: 1.64rem !default;
-$h6-fontsize: 1.15rem !default;
-
 // Flow text: font-size interpolates between these two across the viewport
 // range below. This used to be a @while loop emitting 21 media queries.
 $flow-text-min: 1.2rem !default;

package/src/sass/base/_global.scss

@@ -14,7 +14,7 @@ html {
 }
 
 body {
-  background-color: var(--md-sys-color-background);
+  background-color: var(--md-sys-color-surface);
   color: var(--md-sys-color-on-background);
 }
 

package/src/sass/base/_grid.scss

@@ -1,166 +1,97 @@
-@use "sass:math";
 @use "../abstracts" as *;
 
+// 12-column CSS Grid. Prefixes map onto $breakpoints; s is the mobile
+// default (no query). xxl is M3 extra-large — the class that actually
+// sees a 4K or ultrawide window, since xlarge starts at 1201px.
+$grid-columns: 12;
+$grid-prefixes: (
+  "s": null,
+  "m": "small",
+  "l": "large",
+  "xl": "xlarge",
+  "xxl": "xxlarge",
+);
+
+@mixin grid-spans($prefix) {
+  @for $i from 1 through $grid-columns {
+    .#{$prefix}#{$i} {
+      grid-column: auto / span $i;
+    }
+  }
+  @for $i from 1 through ($grid-columns - 1) {
+    .offset-#{$prefix}#{$i} {
+      grid-column-start: $i + 1;
+    }
+  }
+}
+
 .container {
+  --md-comp-container-max-width: 1280px;
+  --md-comp-container-width: 90%;
   margin: 0 auto;
-  max-width: 1280px;
-  width: 90%;
+  width: var(--md-comp-container-width);
+  max-width: var(--md-comp-container-max-width);
 }
 
 @include bp-up("small") {
   .container {
-    width: 85%;
+    --md-comp-container-width: 85%;
   }
 }
 
 @include bp-up("large") {
   .container {
-    width: 70%;
+    --md-comp-container-width: 70%;
   }
 }
 
-.section {
-  padding: 1rem 0;
+// The 1280 cap is what made 4K look empty: 70% of 3840 is 2688, then
+// max-width snapped it back to 1280. Extra-large lifts the cap to 1920
+// (binds once 75% of the viewport exceeds it, around 2560) and opens
+// the measure a little so QHD lands on that cap instead of 1792.
+@include bp-up("xxlarge") {
+  .container {
+    --md-comp-container-width: 75%;
+    --md-comp-container-max-width: 1920px;
+  }
 }
 
-// Mixins to eliminate code repetition
-@mixin reset-offset {
-  margin-left: auto;
-  left: auto;
-  right: auto;
+// Dashboards / media that should keep growing. `.wide` caps at 2400
+// (binds around 3200). `.max` is the percentage with no cap.
+.container.wide {
+  --md-comp-container-max-width: 2400px;
 }
 
-@mixin grid-classes($size, $i, $perc) {
-  &.offset-#{$size}#{$i} {
-    margin-left: $perc;
-  }
-  &.pull-#{$size}#{$i} {
-    right: $perc;
-  }
-  &.push-#{$size}#{$i} {
-    left: $perc;
-  }
+.container.max {
+  --md-comp-container-max-width: none;
+}
+
+.section {
+  padding: 1rem 0;
 }
 
 body {
-  --gap-size: 1.5rem; // default
+  --gap-size: #{$gutter-width};
+
+  @include bp-up("xxlarge") {
+    --gap-size: 2rem;
+  }
 }
 
 .row {
   display: grid;
-  grid-template-columns: repeat(12, 1fr);
+  grid-template-columns: repeat(#{$grid-columns}, 1fr);
   gap: var(--gap-size);
 
-  //--- S
-  .s1  { grid-column: auto / span 1; }
-  .s2  { grid-column: auto / span 2; }
-  .s3  { grid-column: auto / span 3; }
-  .s4  { grid-column: auto / span 4; }
-  .s5  { grid-column: auto / span 5; }
-  .s6  { grid-column: auto / span 6; }
-  .s7  { grid-column: auto / span 7; }
-  .s8  { grid-column: auto / span 8; }
-  .s9  { grid-column: auto / span 9; }
-  .s10 { grid-column: auto / span 10; }
-  .s11 { grid-column: auto / span 11; }
-  .s12 { grid-column: auto / span 12; }
-
-  .offset-s1 { grid-column-start:  3; }
-  .offset-s2 { grid-column-start:  2; }
-  .offset-s3 { grid-column-start:  4; }
-  .offset-s4 { grid-column-start:  5; }
-  .offset-s5 { grid-column-start:  6; }
-  .offset-s6 { grid-column-start:  7; }
-  .offset-s7 { grid-column-start:  8; }
-  .offset-s8 { grid-column-start:  9; }
-  .offset-s9 { grid-column-start: 10; }
-  .offset-s10 { grid-column-start: 11; }
-  .offset-s11 { grid-column-start: 12; }
-
-  //--- M
-  @include bp-up("small") {
-    .m1  { grid-column: auto / span 1; }
-    .m2  { grid-column: auto / span 2; }
-    .m3  { grid-column: auto / span 3; }
-    .m4  { grid-column: auto / span 4; }
-    .m5  { grid-column: auto / span 5; }
-    .m6  { grid-column: auto / span 6; }
-    .m7  { grid-column: auto / span 7; }
-    .m8  { grid-column: auto / span 8; }
-    .m9  { grid-column: auto / span 9; }
-    .m10 { grid-column: auto / span 10; }
-    .m11 { grid-column: auto / span 11; }
-    .m12 { grid-column: auto / span 12; }
-  
-    .offset-m1 { grid-column-start:  2; }
-    .offset-m2 { grid-column-start:  3; }
-    .offset-m3 { grid-column-start:  4; }
-    .offset-m4 { grid-column-start:  5; }
-    .offset-m5 { grid-column-start:  6; }
-    .offset-m6 { grid-column-start:  7; }
-    .offset-m7 { grid-column-start:  8; }
-    .offset-m8 { grid-column-start:  9; }
-    .offset-m9 { grid-column-start: 10; }
-    .offset-m10 { grid-column-start: 11; }
-    .offset-m11 { grid-column-start: 12; }
-  }
-
-  //--- L
-  @include bp-up("large") {
-    .l1  { grid-column: auto / span 1; }
-    .l2  { grid-column: auto / span 2; }
-    .l3  { grid-column: auto / span 3; }
-    .l4  { grid-column: auto / span 4; }
-    .l5  { grid-column: auto / span 5; }
-    .l6  { grid-column: auto / span 6; }
-    .l7  { grid-column: auto / span 7; }
-    .l8  { grid-column: auto / span 8; }
-    .l9  { grid-column: auto / span 9; }
-    .l10 { grid-column: auto / span 10; }
-    .l11 { grid-column: auto / span 11; }
-    .l12 { grid-column: auto / span 12; }
-  
-    .offset-l1  { grid-column-start:  2; }
-    .offset-l2  { grid-column-start:  3; }
-    .offset-l3  { grid-column-start:  4; }
-    .offset-l4  { grid-column-start:  5; }
-    .offset-l5  { grid-column-start:  6; }
-    .offset-l6  { grid-column-start:  7; }
-    .offset-l7  { grid-column-start:  8; }
-    .offset-l8  { grid-column-start:  9; }
-    .offset-l9  { grid-column-start: 10; }
-    .offset-l10 { grid-column-start: 11; }
-    .offset-l11 { grid-column-start: 12; }
+  @each $prefix, $bp in $grid-prefixes {
+    @if $bp == null {
+      @include grid-spans($prefix);
+    } @else {
+      @include bp-up($bp) {
+        @include grid-spans($prefix);
+      }
+    }
   }
-
-  //--- XL
-  @include bp-up("xlarge") {
-    .xl1  { grid-column: auto / span 1; }
-    .xl2  { grid-column: auto / span 2; }
-    .xl3  { grid-column: auto / span 3; }
-    .xl4  { grid-column: auto / span 4; }
-    .xl5  { grid-column: auto / span 5; }
-    .xl6  { grid-column: auto / span 6; }
-    .xl7  { grid-column: auto / span 7; }
-    .xl8  { grid-column: auto / span 8; }
-    .xl9  { grid-column: auto / span 9; }
-    .xl10 { grid-column: auto / span 10; }
-    .xl11 { grid-column: auto / span 11; }
-    .xl12 { grid-column: auto / span 12; }
-  
-    .offset-xl1 { grid-column-start:  2; }
-    .offset-xl2 { grid-column-start:  3; }
-    .offset-xl3 { grid-column-start:  4; }
-    .offset-xl4 { grid-column-start:  5; }
-    .offset-xl5 { grid-column-start:  6; }
-    .offset-xl6 { grid-column-start:  7; }
-    .offset-xl7 { grid-column-start:  8; }
-    .offset-xl8 { grid-column-start:  9; }
-    .offset-xl9 { grid-column-start: 10; }
-    .offset-xl10 { grid-column-start: 11; }
-    .offset-xl11 { grid-column-start: 12; }
-  }
-
 }
 
 //--- Gap

package/src/sass/base/_index.scss

@@ -3,4 +3,4 @@
 @forward "normalize";
 @forward "global";      // z-depth, spacing helpers, positioning, element defaults
 @forward "typography";
-@forward "grid";        // .container, .row, .s1-.s12
+@forward "grid";        // .container, .row, .s1–.s12 … .xxl1–.xxl12

package/src/sass/components/_badges.scss

@@ -1,78 +1,93 @@
 @use "../abstracts" as *;
 
-// TODO: Make better structure
-:root {
-  --bagde-height: 22px;
-}
+// Badge. Notifications, counts, or status on navigation items and icons.
+//
+// Anatomy is the HTML: a span.badge. Empty is the small dot; text is
+// the large labelled variant. Nest the badge in the icon to anchor it
+// at the upper trailing edge of the 24dp glyph. In a list or drawer
+// row, a trailing .badge stays in flow.
+//
+// Tokens follow https://m3.material.io/components/badges/specs
+//   color          error / on-error  (the default mapping)
+//   small          6dp circle, no label
+//   large          16dp stadium, label-small, 4dp inset
+//   max            four characters, including +
 
-span.badge {
-  min-width: 3rem;
-  padding: 0 6px;
-  margin-left: 14px;
-  text-align: center;
-  font-size: 1rem;
-  line-height: var(--bagde-height);
-  height: var(--bagde-height);
-  color: var(--md-sys-color-on-surface-variant);
-  float: right;
-  box-sizing: border-box;
+.badge {
+  --md-comp-badge-color: var(--md-sys-color-error);
+  --md-comp-badge-label-text-color: var(--md-sys-color-on-error);
+  --md-comp-badge-large-size: 16px;
+  --md-comp-badge-small-size: 6px;
+  --md-comp-badge-large-shape: 8px;
+  --md-comp-badge-icon-size: 24px;
 
-  &.new {
-    font-weight: 300;
-    font-size: 0.8rem;
-    color:  var(--md-sys-color-on-primary);
-    background-color: var(--md-sys-color-primary);
-    border-radius: 2px;
-  }
-  &.new:after {
-    content: " new";
-  }
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--md-comp-badge-large-size);
+  height: var(--md-comp-badge-large-size);
+  max-width: calc(4ch + 8px);
+  margin: 0;
+  padding: 0 4px;
+  overflow: hidden;
+  border-radius: var(--md-comp-badge-large-shape);
+  background-color: var(--md-comp-badge-color);
+  color: var(--md-comp-badge-label-text-color);
+  white-space: nowrap;
+  @include typescale("label-small");
+  line-height: var(--md-comp-badge-large-size);
+  font-family: $font-stack;
 
-  &[data-badge-caption]::after {
-    content: " " attr(data-badge-caption);
+  // Small. No label — a 6dp dot.
+  &:empty {
+    width: var(--md-comp-badge-small-size);
+    min-width: var(--md-comp-badge-small-size);
+    max-width: var(--md-comp-badge-small-size);
+    height: var(--md-comp-badge-small-size);
+    padding: 0;
+    border-radius: 50%;
+    font-size: 0;
+    line-height: 0;
+    color: transparent;
   }
 }
 
-.active span.badge {
-  color: var(--md-sys-color-on-primary);
-}
-
-// Special cases
+// Child of an icon: sit on the upper trailing corner of the 24dp
+// glyph, even when the <i> is a larger indicator pill.
+:is(
+  i,
+  .material-symbols,
+  .material-symbols-outlined,
+  .material-symbols-rounded,
+  .material-symbols-sharp,
+  .material-icons
+) {
+  position: relative;
+  overflow: visible;
 
-header:has(> nav) nav a span.badge {
-  display: inline-block;
-  float: none;
-  margin-left: 4px;
-  line-height: var(--bagde-height);
-  height: var(--bagde-height);
-  -webkit-font-smoothing: auto;
-}
-
-.collection span.badge {
-  float: none;
-  margin-block: 0;
-  margin-inline-start: auto;
-}
-
-.collapsible span.badge {
-  margin-left: auto;
-
-  &.leading {
-    margin-right: 7px;
-    order: -1;
+  > .badge {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: calc((100% - var(--md-comp-badge-icon-size)) / 2);
+    inset-inline-end: calc((100% - var(--md-comp-badge-icon-size)) / 2);
+    transform: translate(50%, -50%);
   }
 }
 
-.collapsible :is(.active, [open]) span.badge:not(.new) {
-  color: var(--md-sys-color-on-surface-variant);
+// Trailing count in a list or drawer row stays in flow.
+.list .badge,
+.sidenav .badge,
+menu .badge {
+  position: static;
+  transform: none;
 }
 
-.sidenav span.badge {
-  margin-top: calc(calc(var(--sidenav-line-height) * 0.5) - calc(22px * 0.5));
+.list .badge {
+  margin-inline-start: auto;
 }
 
-table span.badge {
-  display: inline-block;
-  float: none;
-  margin-left: auto;
+.sidenav summary .badge {
+  margin-inline-start: 14px;
 }

package/src/sass/components/_bottom-sheet.scss

@@ -0,0 +1,137 @@
+@use "../abstracts" as *;
+
+// Bottom sheets.
+//
+// Anatomy is the HTML. A dialog.bottom-sheet (or .bottom) is the surface.
+// showModal() is the modal variant (scrim). show() is the standard variant
+// (no scrim, page stays interactive). ::before is the optional drag handle;
+// an explicit .handle button replaces it. A heading, body, and trailing
+// form[method=dialog] are the same slots as a basic dialog.
+//
+// Tokens follow https://m3.material.io/components/bottom-sheets
+//   container    surface-container-low, 28dp top corners, elevation 1
+//   max width    640dp; 56dp inset from the small breakpoint
+//   max height   viewport minus 72dp
+//   handle       32×4dp bar in a 48dp hit target, on-surface-variant
+//   scrim        modal only (UA ::backdrop + the dialog scrim token)
+//
+// Compact and medium are the intended windows. On large screens prefer a
+// side sheet or a basic dialog; the sheet still lays out (640 + 56).
+
+$_handle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='4'%3E%3Crect width='32' height='4' rx='2' fill='black'/%3E%3C/svg%3E");
+
+dialog.bottom,
+dialog.bottom-sheet {
+  --md-comp-bottom-sheet-container-color: var(--md-sys-color-surface-container-low);
+  --md-comp-bottom-sheet-container-shape: 28px;
+  --md-comp-bottom-sheet-container-max-width: 640px;
+  --md-comp-bottom-sheet-margin-inline: 56px;
+  --md-comp-bottom-sheet-top-inset: 72px;
+  --md-comp-bottom-sheet-drag-handle-color: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface-variant) 40%,
+    transparent
+  );
+  --md-comp-bottom-sheet-shift: 0px;
+
+  box-sizing: border-box;
+  position: fixed;
+  inset: auto 0 0;
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  height: auto;
+  max-height: calc(100dvh - var(--md-comp-bottom-sheet-top-inset));
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--md-comp-bottom-sheet-container-shape)
+    var(--md-comp-bottom-sheet-container-shape) 0 0;
+  background-color: var(--md-comp-bottom-sheet-container-color);
+  color: var(--md-sys-color-on-surface);
+  outline: none;
+  @include z-depth("1");
+  translate: 0 var(--md-comp-bottom-sheet-shift);
+  transition: translate 280ms ease;
+
+  // Non-modal `show()` is not in the top layer — sit above page content
+  // and below snackbars (z-index 10000).
+  &:not(:modal) {
+    z-index: 1100;
+  }
+
+  @include bp-up("small") {
+    width: min(
+      var(--md-comp-bottom-sheet-container-max-width),
+      calc(100% - 2 * var(--md-comp-bottom-sheet-margin-inline))
+    );
+    max-width: var(--md-comp-bottom-sheet-container-max-width);
+    margin-inline: auto;
+  }
+
+  // Standard: no scrim. Modal keeps the basic-dialog backdrop.
+  &:not(:modal)::backdrop {
+    background: none;
+    backdrop-filter: none;
+  }
+
+  // Drag handle. 32×4 bar, 48dp hit. Hidden when the author supplies .handle.
+  &::before {
+    content: "";
+    box-sizing: border-box;
+    flex: 0 0 48px;
+    width: 48px;
+    height: 48px;
+    align-self: center;
+    margin: 0;
+    padding: 0;
+    background-color: var(--md-comp-bottom-sheet-drag-handle-color);
+    mask: $_handle center / 32px 4px no-repeat;
+    pointer-events: none;
+  }
+
+  &:has(> .handle)::before {
+    content: none;
+    display: none;
+  }
+
+  > .handle {
+    box-sizing: border-box;
+    flex: 0 0 48px;
+    align-self: center;
+    width: 48px;
+    height: 48px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background-color: var(--md-comp-bottom-sheet-drag-handle-color);
+    mask: $_handle center / 32px 4px no-repeat;
+    cursor: grab;
+    appearance: none;
+  }
+
+  > :is(h1, h2, h3, h4, h5, h6) {
+    padding-top: 8px;
+  }
+}
+
+dialog.bottom[open],
+dialog.bottom-sheet[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+@starting-style {
+  dialog.bottom[open],
+  dialog.bottom-sheet[open] {
+    translate: 0 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  dialog.bottom,
+  dialog.bottom-sheet {
+    transition: none;
+  }
+}