material 3.2.5 → 3.2.7

package/src/styles/components/_badge.scss

@@ -13,8 +13,10 @@
  * - Large badge height: 16dp
  * - Small badge corner radius: 3dp
  * - Large badge corner radius: 8dp
- * - Small badge: positioned 6dp from container edge
- * - Large badge: positioned 14dp (height) x 12dp (width) from container edge
+ * - Small badge: 6dp from the icon's top trailing corner to the badge's
+ *   bottom leading corner
+ * - Large badge: 14dp (height) x 12dp (width) from the icon's top trailing
+ *   corner to the badge's bottom leading corner
  */
 $component: '#{base.$prefix}-badge';
 $wrapper: '#{base.$prefix}-badge__wrapper';
@@ -27,9 +29,13 @@ $wrapper: '#{base.$prefix}-badge__wrapper';
 }
 
 .#{$component} {
-  // Base badge styles
-  position: absolute;
-  display: flex;
+  // In flow until it is attached. A standalone badge -- `<m-badge>`, "the
+  // badge alone, placed by the page like any inline element"
+  // (src/elements/badge.ts) -- is sized by its own box; `--positioned` takes
+  // an attached badge out of the flow onto its target. Inline-flex sizes the
+  // standalone box to its content, and an absolutely positioned box is
+  // blockified, so attached badges lay out exactly as they did.
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: 500;
@@ -73,49 +79,56 @@ $wrapper: '#{base.$prefix}-badge__wrapper';
   
   // Position specs
   &--positioned {
-    // Small badge placement (6dp from container edge)
+    position: absolute;
+
+    // The specs measure from the icon's top trailing corner to the badge's
+    // bottom leading corner (m3.material.io/components/badges/specs, "Badge
+    // padding and size measurements"): 6x6dp for the 6dp dot and 14x12dp for
+    // the 16dp large badge. The dot therefore sits flush in the corner; the
+    // large badge reaches 2dp above the icon and 4dp past it, which is what
+    // "anchored inside the icon bounding box" (guidelines) leaves of a badge
+    // larger than its distance.
     &.#{$component}--small {
       &.#{$component}--top-right {
-        top: -3px;
-        right: -3px;
+        top: 0;
+        right: 0;
       }
       
       &.#{$component}--top-left {
-        top: -3px;
-        left: -3px;
+        top: 0;
+        left: 0;
       }
       
       &.#{$component}--bottom-right {
-        bottom: -3px;
-        right: -3px;
+        bottom: 0;
+        right: 0;
       }
       
       &.#{$component}--bottom-left {
-        bottom: -3px;
-        left: -3px;
+        bottom: 0;
+        left: 0;
       }
     }
     
-    // Large badge placement (14dp x 12dp from container edge)
     &.#{$component}--large {
       &.#{$component}--top-right {
-        top: -8px;
-        right: -8px;
+        top: -2px;
+        right: -4px;
       }
       
       &.#{$component}--top-left {
-        top: -8px;
-        left: -8px;
+        top: -2px;
+        left: -4px;
       }
       
       &.#{$component}--bottom-right {
-        bottom: -8px;
-        right: -8px;
+        bottom: -2px;
+        right: -4px;
       }
       
       &.#{$component}--bottom-left {
-        bottom: -8px;
-        left: -8px;
+        bottom: -2px;
+        left: -4px;
       }
     }
   }
@@ -156,27 +169,51 @@ $wrapper: '#{base.$prefix}-badge__wrapper';
     color: t.color('on-info');
   }
 
-  // RTL support: the positions swap under the mixin's two directions.
+  // RTL support: the horizontal side swaps, the distance stays the specs'.
   &--positioned {
     @include m.rtl {
-      &.#{$component}--top-right {
-        right: auto;
-        left: -8px;
-      }
+      &.#{$component}--small {
+        &.#{$component}--top-right {
+          right: auto;
+          left: 0;
+        }
 
-      &.#{$component}--top-left {
-        left: auto;
-        right: -8px;
-      }
+        &.#{$component}--top-left {
+          left: auto;
+          right: 0;
+        }
 
-      &.#{$component}--bottom-right {
-        right: auto;
-        left: -8px;
+        &.#{$component}--bottom-right {
+          right: auto;
+          left: 0;
+        }
+
+        &.#{$component}--bottom-left {
+          left: auto;
+          right: 0;
+        }
       }
 
-      &.#{$component}--bottom-left {
-        left: auto;
-        right: -8px;
+      &.#{$component}--large {
+        &.#{$component}--top-right {
+          right: auto;
+          left: -4px;
+        }
+
+        &.#{$component}--top-left {
+          left: auto;
+          right: -4px;
+        }
+
+        &.#{$component}--bottom-right {
+          right: auto;
+          left: -4px;
+        }
+
+        &.#{$component}--bottom-left {
+          left: auto;
+          right: -4px;
+        }
       }
     }
   }

package/src/styles/components/_navigation-rail.scss

@@ -242,13 +242,16 @@ $snap: 0s linear $midpoint;
     animation: #{$component}-swap v.motion('spring-default-spatial-duration') linear;
   }
 
-  // Badges: the large badge sits on the top end corner of the icon, the dot
-  // just off it; expanded, both move to the end of the pill.
+  // Badges: the large badge and the dot sit inside the icon's top trailing
+  // corner at the badges spec's distances — 14x12dp for the large one, 6x6dp
+  // for the dot (m3.material.io/components/badges/specs, Measurements; the
+  // icon starts 10dp into the collapsed item); expanded, both move to the end
+  // of the pill.
   &__badge {
     position: absolute;
     box-sizing: border-box;
-    inset-inline-start: 54px;
-    inset-block-start: 2px;
+    inset-inline-start: 48px;
+    inset-block-start: 8px;
     min-inline-size: 16px;
     min-block-size: 16px;
     padding-inline: 4px;
@@ -264,8 +267,8 @@ $snap: 0s linear $midpoint;
       min-inline-size: 0;
       min-block-size: 0;
       padding: 0;
-      inset-inline-start: 58px;
-      inset-block-start: 6px;
+      inset-inline-start: 54px;
+      inset-block-start: 10px;
     }
   }
   &--expanded &__badge { inset-inline-start: auto; inset-inline-end: 36px; inset-block-start: 20px; }

package/src/styles/elements/_badge.scss

@@ -1,12 +1,73 @@
 // src/styles/elements/_badge.scss
-// <m-badge> before upgrade: as the upgraded host, which lays out no box of
-// its own (the badge is positioned from it). Its text is drawn on upgrade.
+// <m-badge> before upgrade: the badge itself. A standalone badge takes its
+// place in the flow (src/styles/components/_badge.scss), so the undefined host
+// is the large badge's 16dp box around its label -- drawn from the label
+// attribute, as the text field's pre-upgrade host draws its value -- or the
+// 6dp dot. An empty or zero large label hides on upgrade, so it reserves no
+// box before it either.
+@use '../abstract/variables' as v;
+@use '../abstract/theme' as t;
 @use 'config' as c;
 
+// As components/_badge.scss: the badge's colours, the default error above.
+$colors: ('primary', 'secondary', 'tertiary', 'success', 'warning', 'info');
+
 @include c.host('badge') {
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
   vertical-align: middle;
-  width: 0;
-  height: 0;
   overflow: hidden;
+  height: 16px;
+  min-width: 16px;
+  max-width: 34px; // the overflow badge's 16x34dp
+  padding: 0 4px;
+  border-radius: v.shape('full');
+  font-weight: 500;
+  font-size: 11px;
+  line-height: 16px;
+  background-color: t.color('error');
+  color: t.color('on-error');
+
+  @each $color in $colors {
+    &[color='#{$color}'] {
+      background-color: t.color($color);
+      color: t.color('on-#{$color}');
+    }
+  }
+
+  // The label the markup carries sets the box's width as it will set the
+  // badge's on upgrade. With text inside the tag too, the text draws it: the
+  // element reads the attribute and ignores the text, but CSS cannot hide the
+  // text alone, so it must not be drawn twice. A label past the max
+  // re-formats on upgrade ("1000" becomes "999+"), which CSS cannot repeat.
+  &:empty[label]:not([label=''])::before {
+    content: attr(label);
+  }
+
+  // Nothing to show: an empty or zero label hides the large badge on upgrade,
+  // so it reserves no box. A whitespace-only text node is not matched here --
+  // CSS cannot see it -- so `<m-badge> </m-badge>` (or the tag with a line
+  // break inside) keeps the box before upgrade although the element then hides
+  // the badge. Write the tag with nothing between its tags.
+  &:not([variant='small']):is(:empty:not([label]), [label=''], [label='0']) {
+    width: 0;
+    height: 0;
+    min-width: 0;
+    max-width: none;
+    padding: 0;
+    font-size: 0;
+    background-color: transparent;
+  }
+
+  // The dot is its own box whether or not it carries a label, and shows it.
+  &[variant='small'] {
+    width: 6px;
+    height: 6px;
+    min-width: 6px;
+    max-width: none;
+    padding: 0;
+    font-size: 0;
+  }
 }

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 {};