@expressivecss/expressive 0.14.1 → 0.16.0

package/src/sass/components/_menu.scss

@@ -3,11 +3,13 @@
 // Vertical menus (M3 Expressive).
 //
 // Anatomy is the HTML. A <menu id> is the surface; each <li> is an item.
-// A leading <i> is the leading icon; a trailing <i> or <kbd> is trailing
-// content. An <li class="divider" role="separator"> is a divider; a bare
-// <hr> is the older form and still styled, though <menu> only permits <li>.
+// An icon leads its label; a trailing icon or <kbd> is trailing content. An
+// <li class="divider" role="separator"> is a divider: <menu> only permits
+// <li>, so a bare <hr> is not styled.
 // A .gap <li> splits groups. A .label
-// <li> is a 32dp group heading. A nested <menu> is a flyout. The trigger
+// <li> is a 32dp group heading. A nested <menu> is a flyout. An
+// <li role="none"> holding a <ul role="group"> is a group of rows, styled
+// as if each row were a direct item. The trigger
 // is .menu-trigger[data-target] — that is the JS contract.
 //
 // Tokens are md.comp.menus - the expressive family, not baseline
@@ -28,23 +30,37 @@
 
 $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E");
 
+// Item states, interpolated after `li`. An item is any <li> that is not a
+// divider, optgroup, gap, label or group wrapper; an enabled item is also not
+// disabled. A segment is a run of a grouped surface, which a wrapper is.
+$_segment: ":not(.divider, .optgroup, .gap, .label)";
+$_item: ':not(.divider, .optgroup, .gap, .label, [role="none"])';
+$_enabled: ':not(.disabled, [aria-disabled="true"], .divider, .optgroup, .gap, .label, [role="none"])';
+// A row is a direct <li> or one inside a group.
+$_rows: '> li, > li > ul[role="group"] > li';
+$_selected: ':is(.selected, [aria-selected="true"], [aria-checked="true"])';
+$_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
+
 [popover] {
   outline: none;
   padding: 0;
   border: none;
 }
 
-@mixin menu-surface {
+// Search dialogs host trees directly, so their rows need the same menu tokens.
+menu[id],
+menu[id] li > menu,
+.select-search-popup {
   --md-comp-menu-container-color: var(--md-sys-color-surface-container-low);
-  --md-comp-menu-container-shape: 16px;
-  --md-comp-menu-group-shape: 8px;
+  --md-comp-menu-container-shape: var(--md-sys-shape-corner-large);
+  --md-comp-menu-group-shape: var(--md-sys-shape-corner-small);
   --md-comp-menu-container-inactive-shape: var(--md-comp-menu-group-shape);
   --md-comp-menu-group-padding: 2px;
   --md-comp-menu-gap: 2px;
   --md-comp-menu-item-container-height: 44px;
-  --md-comp-menu-item-container-shape: 4px;
-  --md-comp-menu-item-edge-shape: 12px;
-  --md-comp-menu-item-selected-container-shape: 12px;
+  --md-comp-menu-item-container-shape: var(--md-sys-shape-corner-extra-small);
+  --md-comp-menu-item-edge-shape: var(--md-sys-shape-corner-medium);
+  --md-comp-menu-item-selected-container-shape: var(--md-sys-shape-corner-medium);
   --md-comp-menu-item-leading-space: 16px;
   --md-comp-menu-item-trailing-space: 16px;
   --md-comp-menu-item-between-space: 12px;
@@ -67,19 +83,6 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
   --md-comp-menu-item-icon-size: 20px;
   --md-comp-menu-supporting-text-color: var(--md-sys-color-on-surface-variant);
 
-  box-sizing: border-box;
-  min-width: 112px;
-  max-width: 280px;
-  margin: 0;
-  padding: var(--md-comp-menu-group-padding);
-  list-style: none;
-  background-color: var(--md-comp-menu-container-color);
-  border-radius: var(--md-comp-menu-container-shape);
-  color: var(--md-comp-menu-item-label-text-color);
-  @include z-depth("2");
-  transition: border-radius 200ms ease;
-  @include glass(var(--md-comp-menu-container-color));
-
   // The [vibrant] arms are not a second mapping - they are the statement that
   // a menu on a vibrant surface IS a vibrant menu. Without them the foundation
   // paints the container tertiary-container while the selected item keeps the
@@ -112,14 +115,35 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
       --md-sys-color-on-tertiary
     );
   }
+}
 
-  > li {
+@mixin menu-surface {
+  box-sizing: border-box;
+  min-width: 112px;
+  max-width: 280px;
+  margin: 0;
+  padding: var(--md-comp-menu-group-padding);
+  list-style: none;
+  background-color: var(--md-comp-menu-container-color);
+  border-radius: var(--md-comp-menu-container-shape);
+  color: var(--md-comp-menu-item-label-text-color);
+  @include z-depth("2");
+  transition: border-radius var(--md-sys-motion-duration-short4) ease;
+  @include glass(var(--md-comp-menu-container-color));
+
+  > li > ul[role="group"] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  #{$_rows} {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     width: 100%;
     cursor: pointer;
-    text-align: left;
+    text-align: start;
     border-radius: var(--md-comp-menu-item-container-shape);
 
     // The bare-span arm is the non-interactive item. It has to exclude icons,
@@ -188,7 +212,8 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     // butted against the label instead of flush right.
     //
     // Leading stays the default; a trailing icon names its side, the same way
-    // a field icon must (see rule 3 in CLAUDE.md).
+    // a field icon must (see rule 3 under "HTML semantics" in
+    // docs/development-notes.md).
     > :is(a, button) > #{$icon}:is(.suffix, :last-child:not(:only-child)) {
       margin-inline-start: auto;
       color: var(--md-comp-menu-item-trailing-icon-color);
@@ -209,111 +234,94 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     }
   }
 
-  > li:not(.divider, .optgroup, .gap, .label) {
-    min-height: var(--md-comp-menu-item-container-height);
+  #{$_rows} {
+    &#{$_item} {
+      min-height: var(--md-comp-menu-item-container-height);
+    }
   }
 
-  > li:not(.divider, .optgroup, .gap, .label):first-child {
+  > li#{$_item}:first-child {
     border-radius: var(--md-comp-menu-item-edge-shape)
       var(--md-comp-menu-item-edge-shape)
       var(--md-comp-menu-item-container-shape)
       var(--md-comp-menu-item-container-shape);
   }
 
-  > li:not(.divider, .optgroup, .gap, .label):last-child {
+  > li#{$_item}:last-child {
     border-radius: var(--md-comp-menu-item-container-shape)
       var(--md-comp-menu-item-container-shape)
       var(--md-comp-menu-item-edge-shape) var(--md-comp-menu-item-edge-shape);
   }
 
-  // Hover / press sit on extra-small corners and do not span the container.
-  > li:not(
-      .disabled,
-      [aria-disabled="true"],
-      .divider,
-      .optgroup,
-      .gap,
-      .label
-    ):hover,
-  > li.active:not(.selected, [aria-selected="true"], [aria-checked="true"]) {
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-menu-item-label-text-color) 8%,
-      transparent
-    );
+  // A group at either end of the menu rounds its end row the same way.
+  > li[role="none"]:first-child
+    > ul[role="group"]
+    > li#{$_item}#{$_unselected}:first-child {
+    border-start-start-radius: var(--md-comp-menu-item-edge-shape);
+    border-start-end-radius: var(--md-comp-menu-item-edge-shape);
   }
 
-  > li:not(
-      .disabled,
-      [aria-disabled="true"],
-      .divider,
-      .optgroup,
-      .gap,
-      .label
-    ):active {
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-menu-item-label-text-color) 10%,
-      transparent
-    );
+  > li[role="none"]:last-child
+    > ul[role="group"]
+    > li#{$_item}#{$_unselected}:last-child {
+    border-end-start-radius: var(--md-comp-menu-item-edge-shape);
+    border-end-end-radius: var(--md-comp-menu-item-edge-shape);
   }
 
-  // :not(.divider) only buys specificity: menu-item.selected.shape is 12dp
-  // unconditionally, so it has to outrank the first/last-child edge rule that
-  // would otherwise leave a selected end item with 4dp inner corners.
-  > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):not(
-      .divider
-    ) {
-    border-radius: var(--md-comp-menu-item-selected-container-shape);
-    background-color: var(--md-comp-menu-item-selected-container-color);
-    color: var(--md-comp-menu-item-selected-label-text-color);
-
-    > :is(a, button, #{$icon-label}) {
-      color: var(--md-comp-menu-item-selected-label-text-color);
+  #{$_rows} {
+    // Hover / press sit on extra-small corners and do not span the container.
+    &#{$_enabled}:hover,
+    &.active#{$_unselected} {
+      background-color: state-layer(var(--md-comp-menu-item-label-text-color), "hover");
     }
 
-    > :is(a, button, #{$icon-label}) > #{$icon},
-    > #{$icon} {
-      color: var(--md-comp-menu-item-selected-leading-icon-color);
+    &#{$_enabled}:active {
+      background-color: state-layer(var(--md-comp-menu-item-label-text-color), "pressed");
     }
 
-    > :is(a, button, #{$icon-label}) :is(.supporting-text, kbd, .shortcut) {
+    // :not(.divider) only buys specificity: menu-item.selected.shape is 12dp
+    // unconditionally, so it has to outrank the first/last-child edge rule that
+    // would otherwise leave a selected end item with 4dp inner corners.
+    &#{$_selected}:not(.divider) {
+      border-radius: var(--md-comp-menu-item-selected-container-shape);
+      background-color: var(--md-comp-menu-item-selected-container-color);
       color: var(--md-comp-menu-item-selected-label-text-color);
+      @include forced-colors-selected;
+
+      > :is(a, button, #{$icon-label}) {
+        color: var(--md-comp-menu-item-selected-label-text-color);
+      }
+
+      > :is(a, button, #{$icon-label}) > #{$icon},
+      > #{$icon} {
+        color: var(--md-comp-menu-item-selected-leading-icon-color);
+      }
+
+      > :is(a, button, #{$icon-label}) :is(.supporting-text, kbd, .shortcut) {
+        color: var(--md-comp-menu-item-selected-label-text-color);
+      }
     }
-  }
 
-  > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):hover {
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-menu-item-selected-label-text-color) 8%,
-      var(--md-comp-menu-item-selected-container-color)
-    );
-  }
+    &#{$_selected}:hover {
+      background-color: state-layer(var(--md-comp-menu-item-selected-label-text-color), "hover", var(--md-comp-menu-item-selected-container-color));
+    }
 
-  > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):is(
-      :focus,
-      :focus-visible,
-      :active
-    ) {
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-menu-item-selected-label-text-color) 10%,
-      var(--md-comp-menu-item-selected-container-color)
-    );
-  }
+    &#{$_selected}:is(:focus, :focus-visible, :active) {
+      background-color: state-layer(var(--md-comp-menu-item-selected-label-text-color), "pressed", var(--md-comp-menu-item-selected-container-color));
+    }
 
-  > li:focus-visible {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: -3px;
-  }
+    &:focus-visible {
+      outline: 3px solid var(--md-sys-color-secondary);
+      outline-offset: -3px;
+    }
 
-  > li:is(.disabled, [aria-disabled="true"]) {
-    pointer-events: none;
-    opacity: 0.38;
+    &:is(.disabled, [aria-disabled="true"]) {
+      pointer-events: none;
+      opacity: 0.38;
+    }
   }
 
   // Inset divider — selection and rules do not span the container.
-  > hr,
   > li.divider {
     display: block;
     width: calc(100% - 8px);
@@ -365,21 +373,21 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     // blur the menu itself. Grouped menus stay solid.
     backdrop-filter: none;
 
-    > li:not(.divider, .optgroup, .gap, .label) {
+    > li#{$_segment} {
       padding-inline: var(--md-comp-menu-group-padding);
       background-color: var(--md-comp-menu-container-color);
       border-radius: 0;
     }
 
-    > li:not(.divider, .optgroup, .gap, .label):first-child,
-    > li.gap + li:not(.divider, .optgroup, .gap, .label) {
+    > li#{$_segment}:first-child,
+    > li.gap + li#{$_segment} {
       padding-block-start: var(--md-comp-menu-group-padding);
       border-start-start-radius: var(--md-comp-menu-group-shape);
       border-start-end-radius: var(--md-comp-menu-group-shape);
     }
 
-    > li:not(.divider, .optgroup, .gap, .label):has(+ li.gap),
-    > li:not(.divider, .optgroup, .gap, .label):last-child {
+    > li#{$_segment}:has(+ li.gap),
+    > li#{$_segment}:last-child {
       padding-block-end: var(--md-comp-menu-group-padding);
       border-end-start-radius: var(--md-comp-menu-group-shape);
       border-end-end-radius: var(--md-comp-menu-group-shape);
@@ -390,14 +398,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     }
 
     // State layers belong to the inset item while the group surface remains.
-    > li:not(
-        .disabled,
-        [aria-disabled="true"],
-        .divider,
-        .optgroup,
-        .gap,
-        .label
-      ):hover,
+    > li#{$_enabled}:hover,
     > li.active,
     > li.selected,
     > li[aria-selected="true"],
@@ -405,67 +406,33 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
       background-color: var(--md-comp-menu-container-color);
     }
 
-    > li:not(
-        .disabled,
-        [aria-disabled="true"],
-        .divider,
-        .optgroup,
-        .gap,
-        .label
-      ):hover
+    > li#{$_enabled}:hover
       > :is(a, button, #{$icon-label}),
-    > li.active:not(.selected, [aria-selected="true"], [aria-checked="true"])
+    > li.active#{$_unselected}
       > :is(a, button, #{$icon-label}) {
       border-radius: var(--md-comp-menu-item-container-shape);
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-menu-item-label-text-color) 8%,
-        transparent
-      );
+      background-color: state-layer(var(--md-comp-menu-item-label-text-color), "hover");
     }
 
-    > li:not(
-        .disabled,
-        [aria-disabled="true"],
-        .divider,
-        .optgroup,
-        .gap,
-        .label
-      ):active
+    > li#{$_enabled}:active
       > :is(a, button, #{$icon-label}) {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-menu-item-label-text-color) 10%,
-        transparent
-      );
+      background-color: state-layer(var(--md-comp-menu-item-label-text-color), "pressed");
     }
 
-    > li:is(.selected, [aria-selected="true"], [aria-checked="true"])
+    > li#{$_selected}
       > :is(a, button, #{$icon-label}) {
       border-radius: var(--md-comp-menu-item-selected-container-shape);
       background-color: var(--md-comp-menu-item-selected-container-color);
     }
 
-    > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):hover
+    > li#{$_selected}:hover
       > :is(a, button, #{$icon-label}) {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-menu-item-selected-label-text-color) 8%,
-        var(--md-comp-menu-item-selected-container-color)
-      );
+      background-color: state-layer(var(--md-comp-menu-item-selected-label-text-color), "hover", var(--md-comp-menu-item-selected-container-color));
     }
 
-    > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):is(
-        :focus,
-        :focus-visible,
-        :active
-      )
+    > li#{$_selected}:is(:focus, :focus-visible, :active)
       > :is(a, button, #{$icon-label}) {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-menu-item-selected-label-text-color) 10%,
-        var(--md-comp-menu-item-selected-container-color)
-      );
+      background-color: state-layer(var(--md-comp-menu-item-selected-label-text-color), "pressed", var(--md-comp-menu-item-selected-container-color));
     }
   }
 
@@ -481,6 +448,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     margin-inline-start: auto;
     background-color: var(--md-comp-menu-item-trailing-icon-color);
     mask: $_menu-chevron center / 20px no-repeat;
+    @include forced-colors-fill;
   }
 }
 
@@ -489,14 +457,21 @@ menu[id] {
 
   display: none;
   position: absolute;
+  // JS positions the menu with physical left/top. Clear the UA [popover]
+  // inset: 0 first, or the over-constrained box ignores left in RTL.
+  inset: auto;
   left: 0;
   top: 0;
-  z-index: 9999;
   overflow-y: auto;
   opacity: 0;
   user-select: none;
   transform-origin: 0 0;
 
+  // Menu opens the surface as a manual popover, in the top layer.
+  &:popover-open {
+    display: block;
+  }
+
   // Nested flyouts sit outside the list box; do not clip them.
   &:has(> li > menu) {
     overflow: visible;
@@ -531,7 +506,13 @@ menu[id] li > menu {
     opacity 180ms ease,
     transform 180ms ease,
     visibility 180ms ease,
-    border-radius 200ms ease;
+    border-radius var(--md-sys-motion-duration-short4) ease;
+
+  // The flyout opens toward inline-end, so it slides in from the other side.
+  &:dir(rtl) {
+    transform: translateX(4px) scale(0.96);
+    transform-origin: 100% 0;
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -540,7 +521,7 @@ menu[id] li > menu {
     opacity: 1;
     pointer-events: auto;
     transform: none;
-    --md-comp-menu-container-shape: 16px;
+    --md-comp-menu-container-shape: var(--md-sys-shape-corner-large);
   }
 }
 
@@ -549,13 +530,22 @@ menu[id] li.open > menu {
   opacity: 1;
   pointer-events: auto;
   transform: none;
-  --md-comp-menu-container-shape: 16px;
+  --md-comp-menu-container-shape: var(--md-sys-shape-corner-large);
 }
 
 menu[id] li.submenu-start > menu {
   inset-inline-start: auto;
   inset-inline-end: 100%;
   transform-origin: 100% 0;
+
+  // Flipped toward inline-start, so it also slides in from the far side:
+  // the right in a right-to-left menu.
+  transform: translateX(4px) scale(0.96);
+
+  &:dir(rtl) {
+    transform: translateX(-4px) scale(0.96);
+    transform-origin: 0 0;
+  }
 }
 
 menu[id] li.submenu-start:is(:hover, :focus-within, .open) > menu {
@@ -568,18 +558,9 @@ menu[id] li.submenu-start:is(:hover, :focus-within, .open) > menu {
 // item gets focus here - inherits :focus-visible from the element that had it,
 // so opening the menu by keyboard still lights the item and opening it by
 // pointer still does not.
-menu[id] > li:focus-visible {
-  background-color: color-mix(
-    in oklab,
-    var(--md-comp-menu-item-label-text-color) 10%,
-    transparent
-  );
-}
-
-menu[id]
-  > li:focus-visible:not(.selected, [aria-selected="true"], [aria-checked="true"]) {
-  outline: 3px solid var(--md-sys-color-secondary);
-  outline-offset: -3px;
+menu[id] > li:focus-visible,
+menu[id] > li > ul[role="group"] > li:focus-visible {
+  background-color: state-layer(var(--md-comp-menu-item-label-text-color), "focus");
 }
 
 menu[id].grouped > li:focus-visible {
@@ -587,14 +568,10 @@ menu[id].grouped > li:focus-visible {
 }
 
 menu[id].grouped
-  > li:focus-visible:not(.selected, [aria-selected="true"], [aria-checked="true"])
+  > li:focus-visible#{$_unselected}
   > :is(a, button, span:not(.material-symbols, .badge, .supporting-text)) {
   border-radius: var(--md-comp-menu-item-container-shape);
-  background-color: color-mix(
-    in oklab,
-    var(--md-comp-menu-item-label-text-color) 10%,
-    transparent
-  );
+  background-color: state-layer(var(--md-comp-menu-item-label-text-color), "focus");
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -618,8 +595,8 @@ menu[id].grouped
   // The trigger stays in its pressed state for as long as its menu is open.
   &[aria-expanded="true"] {
     background-image: linear-gradient(
-      color-mix(in oklab, currentcolor 10%, transparent),
-      color-mix(in oklab, currentcolor 10%, transparent)
+      state-layer(currentcolor, "pressed"),
+      state-layer(currentcolor, "pressed")
     );
   }
 }

package/src/sass/components/_menubar.scss

@@ -0,0 +1,59 @@
+@use "../abstracts" as *;
+
+// Menubar. An application's row of menus (File, Edit, View) on a .menubar of
+// .menu-trigger buttons; each opens an ordinary <menu>. The Menubar
+// component adds the menubar role and keyboard contract. The bar is a
+// surface-container row of text-styled items, and an item whose menu is open
+// stays selected.
+//
+// Tokens:
+//   --md-comp-menubar-container-color   surface-container
+//   --md-comp-menubar-shape             12px
+//   --md-comp-menubar-item-height       40px
+
+.menubar {
+  --md-comp-menubar-container-color: var(--md-sys-color-surface-container);
+  --md-comp-menubar-shape: var(--md-sys-shape-corner-medium);
+  --md-comp-menubar-item-height: 40px;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  padding: 4px;
+  border-radius: var(--md-comp-menubar-shape);
+  background-color: var(--md-comp-menubar-container-color);
+
+  > .menu-trigger {
+    min-block-size: var(--md-comp-menubar-item-height);
+    margin: 0;
+    padding: 0 12px;
+    border: 0;
+    border-radius: var(--md-sys-shape-corner-small);
+    background: none;
+    color: var(--md-sys-color-on-surface);
+    font: inherit;
+    cursor: pointer;
+    @include typescale("label-large");
+    @include focus-visible;
+
+    &:hover {
+      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
+    }
+
+    &[aria-expanded="true"] {
+      background-color: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+    }
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid CanvasText;
+
+    > .menu-trigger[aria-expanded="true"] {
+      outline: 2px solid Highlight;
+    }
+  }
+}

package/src/sass/components/_message-scroller.scss

@@ -51,11 +51,11 @@
   width: fit-content;
   margin-inline: auto;
   @include z-depth("2");
-  transition: opacity .15s ease-out, scale .15s ease-out;
+  transition: opacity var(--md-sys-motion-duration-short3) ease-out, scale var(--md-sys-motion-duration-short3) ease-out;
 
   &[inert] {
     opacity: 0;
-    scale: .8;
+    scale: 0.8;
   }
 }
 

package/src/sass/components/_message.scss

@@ -25,8 +25,8 @@
   --md-comp-message-avatar-size: 32px;
   --md-comp-message-gap: 8px;
   --md-comp-message-surface-max-width: 80%;
-  --md-comp-message-bubble-shape: 20px;
-  --md-comp-message-bubble-grouped-shape: 4px;
+  --md-comp-message-bubble-shape: var(--md-sys-shape-corner-large-increased);
+  --md-comp-message-bubble-grouped-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-message-bubble-container-color: var(--md-sys-color-surface-container-high);
   --md-comp-message-bubble-color: var(--md-sys-color-on-surface);
 
@@ -102,7 +102,7 @@
   }
 
   > #{$icon} {
-    font-size: 20px;
+    font-size: rem(20px);
   }
 }