material 3.2.6 → 3.3.0

package/src/styles/components/_fab-menu.scss

@@ -66,23 +66,43 @@ $swap: 48ms;
   }
 
   &--bottom-end {
-    inset-inline-end: var(--#{$component}-margin);
+    right: var(--#{$component}-margin);
+
+    @include m.rtl(true) {
+      left: var(--#{$component}-margin);
+      right: auto;
+    }
   }
 
   &--bottom-start {
-    inset-inline-start: var(--#{$component}-margin);
+    left: var(--#{$component}-margin);
+
+    @include m.rtl(true) {
+      right: var(--#{$component}-margin);
+      left: auto;
+    }
 
     // Into the page from this edge. The shared rules stay on the inline end,
     // which is where bottom-end and an unplaced menu already open.
     .#{$fab}.#{$component}__fab {
-      inset-inline-start: 0;
-      inset-inline-end: auto;
+      left: 0;
+      right: auto;
+
+      @include m.rtl {
+        right: 0;
+        left: auto;
+      }
     }
 
     .#{$component}__list {
-      inset-inline-start: 0;
-      inset-inline-end: auto;
+      left: 0;
+      right: auto;
       align-items: flex-start;
+
+      @include m.rtl {
+        right: 0;
+        left: auto;
+      }
     }
 
     .#{$component}__item {
@@ -95,7 +115,7 @@ $swap: 48ms;
   @at-root .#{$fab}.#{$component}__fab {
     position: absolute;
     inset-block-start: 0;
-    inset-inline-end: 0;
+    right: 0;
     display: grid;
     place-items: center;
     transition:
@@ -106,6 +126,13 @@ $swap: 48ms;
       color $spatial-colour,
       box-shadow $spatial;
 
+    // The corner follows the inline direction; the rule above is its
+    // left-to-right form.
+    @include m.rtl {
+      left: 0;
+      right: auto;
+    }
+
     > * {
       grid-area: 1 / 1;
     }
@@ -155,7 +182,7 @@ $swap: 48ms;
   &__list {
     position: absolute;
     bottom: calc(100% + 8px);
-    inset-inline-end: 0;
+    right: 0;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
@@ -164,6 +191,29 @@ $swap: 48ms;
     visibility: hidden;
     // Hidden once the last item has left
     transition: visibility 0s linear var(--#{$component}-exit, 0ms);
+
+    // The end edge follows the inline direction.
+    @include m.rtl {
+      left: 0;
+      right: auto;
+    }
+  }
+
+  // The placement class and the direction marker are the same element here:
+  // the runtime writes mtrl-rtl on this root, and dir="rtl" may sit on it. The
+  // arms above need a strict ancestor; a root-carried [dir] does reach the
+  // inner parts through the at-root attribute arm, but that arm sets the
+  // left-to-right edges, so this root-carried form is written after it.
+  &--bottom-start:where(.#{base.$prefix}-rtl, [dir='rtl']) {
+    .#{$fab}.#{$component}__fab {
+      right: 0;
+      left: auto;
+    }
+
+    .#{$component}__list {
+      right: 0;
+      left: auto;
+    }
   }
 
   &--menu .#{$component}__list {

package/src/styles/components/_fab.scss

@@ -159,34 +159,60 @@ $component: '#{base.$prefix}-fab';
     }
   }
 
-  // Positioning utilities
-  &--top-right {
+  // Positioning utilities. A logical corner shares the rule of the physical
+  // corner it matches left-to-right; the direction arms below flip it.
+  &--top-right,
+  &--top-end {
     position: fixed;
     top: 16px;
     right: 16px;
     z-index: v.z-index('dropdown');
   }
-  
-  &--top-left {
+
+  &--top-left,
+  &--top-start {
     position: fixed;
     top: 16px;
     left: 16px;
     z-index: v.z-index('dropdown');
   }
-  
-  &--bottom-right {
+
+  &--bottom-right,
+  &--bottom-end {
     position: fixed;
     bottom: 16px;
     right: 16px;
     z-index: v.z-index('dropdown');
   }
-  
-  &--bottom-left {
+
+  &--bottom-left,
+  &--bottom-start {
     position: fixed;
     bottom: 16px;
     left: 16px;
     z-index: v.z-index('dropdown');
   }
+
+  // A logical corner follows the inline direction; the physical aliases stay
+  // put. Bundlers lower inset-inline-start into :lang() arms that miss
+  // dir="rtl" (src/styles/components/_text-field.scss), about 1.5 kB of the
+  // built full sheet per declaration, so the flip is written as direction
+  // arms instead.
+  &--top-start,
+  &--bottom-start {
+    @include m.rtl(true) {
+      left: auto;
+      right: 16px;
+    }
+  }
+
+  &--top-end,
+  &--bottom-end {
+    @include m.rtl(true) {
+      right: auto;
+      left: 16px;
+    }
+  }
   
   // Optional animations
   @keyframes fab-enter {

package/src/styles/elements/_button.scss

@@ -25,8 +25,11 @@ $containers: (
   border-radius: v.button('shape-round-#{$size}');
   @include m.typography(map.get($label-typescale, $size));
 
-  // The leading icon's place (its markup is an attribute, drawn on upgrade).
-  &[icon]::before {
+  // The icon's place (its markup is an attribute, drawn on upgrade). A
+  // trailing icon is reserved after the label, at the same size, so the
+  // label stays where the upgrade draws it.
+  &[icon]::before,
+  &[icon][icon-position='end']::after {
     width: v.button('icon-size-#{$size}');
     height: v.button('icon-size-#{$size}');
   }
@@ -66,23 +69,42 @@ $containers: (
     padding: 0 v.button('padding-horizontal-small');
   }
 
-  &[icon]::before {
+  &[icon]::before,
+  &[icon][icon-position='end']::after {
     content: '';
     flex: none;
   }
 
+  // The trailing placeholder is ::after. A leading one beside it would push
+  // the label to where the icon sits after the upgrade.
+  &[icon][icon-position='end']::before {
+    content: none;
+  }
+
   // Same 12dp icon-side inset as the component, logical so the reserved box
-  // follows direction. The host is in light DOM until upgrade.
+  // follows direction. With the icon at the end the inset swaps to that side,
+  // as the component's small icon rule does. The host is in light DOM until
+  // upgrade.
   &[icon]:not([size]),
   &[icon][size='s'] {
     padding-inline-start: v.button('padding-icon');
+
+    &[icon-position='end'] {
+      padding-inline-start: v.button('padding-s');
+      padding-inline-end: v.button('padding-icon');
+    }
   }
 
-  // Match the text button's leading-icon insets at its small sizes.
+  // Match the text button's leading-icon insets at its small sizes, and swap
+  // them for a trailing icon as the component's text rule does.
   &[variant='text'][icon]:not([size]),
   &[variant='text'][icon][size='xs'],
   &[variant='text'][icon][size='s'] {
     padding-inline: v.button('padding-horizontal-small') v.button('padding-s');
+
+    &[icon-position='end'] {
+      padding-inline: v.button('padding-s') v.button('padding-horizontal-small');
+    }
   }
 
   // Larger text buttons use the size's spacing on both sides of the icon.

package/src/styles/elements/_card.scss

@@ -54,4 +54,18 @@
     order: -1;
     color: t.color('on-surface-variant');
   }
+
+  // A single slotted actions region follows the padded supporting content.
+  // The factory row adds 8px above/below it and uses an 8px side inset;
+  // transfer the host's last 16px of padding to before that row.
+  &:not(:has(> [slot='actions'] ~ [slot='actions'])) {
+    > [slot='actions'] {
+      align-self: flex-end;
+      margin-block: 24px -8px;
+      margin-inline: -8px;
+    }
+    &[actions-align='start'] > [slot='actions'],
+    &[actions-align='space-between'] > [slot='actions'] { align-self: flex-start; }
+    &[actions-align='center'] > [slot='actions'] { align-self: center; }
+  }
 }

package/src/styles/elements/_extended-fab.scss

@@ -6,6 +6,7 @@
 @use '../abstract/mixins' as m;
 @use '../abstract/theme' as t;
 @use 'config' as c;
+@use '../abstract/floating-placement' as placement;
 
 // As $sizes in components/_extended-fab.scss.
 $sizes: (
@@ -30,6 +31,7 @@ $sizes: (
 }
 
 @include c.host('extended-fab') {
+  @include placement.corners;
   display: inline-flex;
   vertical-align: middle;
   align-items: center;

package/src/styles/elements/_fab.scss

@@ -5,6 +5,7 @@
 @use '../abstract/functions' as f;
 @use '../abstract/theme' as t;
 @use 'config' as c;
+@use '../abstract/floating-placement' as placement;
 
 // As the sizes in components/_fab.scss: container and shape.
 $sizes: ('default': (56px, 'large'), 'medium': (80px, 'large-increased'), 'large': (96px, 'extra-large'));
@@ -17,6 +18,7 @@ $sizes: ('default': (56px, 'large'), 'medium': (80px, 'large-increased'), 'large
 }
 
 @include c.host('fab') {
+  @include placement.corners;
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;

package/dist/components/badge/api.d.ts

@@ -1,41 +0,0 @@
-import { BadgeComponent, BadgeFeatureHost, BadgeVisibility } from "./types.js";
-/**
- * API configuration options for badge component
- * @category Components
- * @internal
- */
-interface ApiOptions {
-    visibility: BadgeVisibility;
-    lifecycle: {
-        destroy: () => void;
-    };
-}
-/**
- * What withAPI needs from the component it wraps: everything a badge feature
- * needs, plus the events withEvents installs.
- *
- * This was a hand-written interface that described `config` as three optional
- * properties. All-optional made it a weak type, so the real component -- whose
- * config is the badge's own -- had "no properties in common" with it, and
- * `addClass` was declared as returning the interface itself, which is the
- * narrowing #120 removed from the source.
- *
- * @category Components
- * @internal
- */
-interface ComponentWithElements extends BadgeFeatureHost {
-    on(event: string, handler: Function): this;
-    off(event: string, handler: Function): this;
-}
-/**
- * Enhances a badge component with API methods.
- * This follows the higher-order function pattern to add public API methods
- * to the component, making them available to the end user.
- *
- * @param {ApiOptions} options - API configuration options
- * @returns {Function} Higher-order function that adds API methods to component
- * @category Components
- * @internal This is an internal utility for the Badge component
- */
-export declare const withAPI: ({ visibility, lifecycle }: ApiOptions) => (component: ComponentWithElements) => BadgeComponent;
-export {};