material 3.0.2 → 3.0.4

package/src/styles/components/_radios.scss

@@ -139,7 +139,7 @@ $component: '#{base.$prefix}-radios';
 
   // The 20dp icon: a 2dp ring (RadioStrokeWidth; it was 1.5px, which Chromium
   // paints as 1px) in on-surface-variant, and a 10dp dot (Compose and material-web;
-  // it was 12px) that springs in on the fast spatial spring. FLO-266.
+  // it was 12px) that springs in on the fast spatial spring.
   &__circle {
     position: relative;
     width: 20px;
@@ -167,7 +167,7 @@ $component: '#{base.$prefix}-radios';
   // The state layer (md-comp-radio-button): unselected on-surface on hover and
   // focus, selected primary; a press takes the colour of the state it leads to. The
   // unselected ring turns on-surface. Hover was primary even when unselected, a
-  // plain :focus showed on mouse clicks, and there was no press. FLO-266.
+  // plain :focus showed on mouse clicks, and there was no press.
   &__ripple {
     position: absolute;
     inset: 0;
@@ -201,7 +201,7 @@ $component: '#{base.$prefix}-radios';
   }
 
   // Radio text: the gap follows the reading direction (it was a physical
-  // margin-left, 0px in right-to-left layouts). FLO-266.
+  // margin-left, 0px in right-to-left layouts).
   &__text {
     margin-inline-start: 8px;
 

package/src/styles/components/_search.scss

@@ -16,7 +16,7 @@ $component: "#{base.$prefix}-search";
 $bar-height: 56px;
 // SearchBarTokens.ContainerShape is CornerFull. Half the height, so the
 // radius animates to the view's corners; min() keeps a theme's full corner
-// in charge when it is smaller (FLO-345).
+// in charge when it is smaller.
 $bar-shape: min(var(--#{base.$prefix}-sys-shape-corner-full, 9999px), calc(#{$bar-height} / 2));
 $bar-min-width: 360px;
 $bar-max-width: 720px;
@@ -59,7 +59,7 @@ $transition-easing: cubic-bezier(0.2, 0, 0, 1);
 
 // The root keeps the bar's place in the page. While the view is open, the bar
 // and its results show in the top layer as one surface, placed over it
-// (FLO-285): a docked view no longer pushes the page down, and a full-screen
+// A docked view no longer pushes the page down, and a full-screen
 // search no longer covers the page while it is a bar.
 .#{$component} {
     position: relative;
@@ -187,7 +187,7 @@ $transition-easing: cubic-bezier(0.2, 0, 0, 1);
 
 
 // ============================================================================
-// Styles (FLO-287)
+// Styles
 // ============================================================================
 
 // The rules above draw the divided style, the baseline: the bar squares off
@@ -237,7 +237,7 @@ $transition-easing: cubic-bezier(0.2, 0, 0, 1);
     @include contained-fullscreen;
 }
 
-// The results reveal on the emphasized decelerate curve (FLO-287: the
+// The results reveal on the emphasized decelerate curve (the
 // --expanding and --collapsing classes were never driven, and are gone).
 .#{$component}--view .#{$component}__content {
     animation: #{$component}-reveal v.motion("duration-medium2") v.motion("easing-emphasized-decelerate");
@@ -284,7 +284,7 @@ $transition-easing: cubic-bezier(0.2, 0, 0, 1);
 // Icon buttons: leading, clear, trailing
 // ============================================================================
 
-// 48dp tap targets around 24dp icons (FLO-286: they were 24dp buttons), with
+// 48dp tap targets around 24dp icons (they were 24dp buttons), with
 // state layers in their icon colour and md.comp.focus-ring.
 .#{$component}__leading-icon,
 .#{$component}__clear-button,
@@ -300,7 +300,7 @@ $transition-easing: cubic-bezier(0.2, 0, 0, 1);
     padding: 0;
     border: none;
     border-radius: 50%;
-    // A shadow root does not get the page's font reset (FLO-291).
+    // A shadow root does not get the page's font reset.
     font: inherit;
     background-color: color-mix(in srgb, currentColor var(--#{$component}-layer), transparent);
     cursor: pointer;
@@ -442,7 +442,7 @@ $transition-easing: cubic-bezier(0.2, 0, 0, 1);
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
-    // The arrows name no behaviour, so that reduced motion can stop it (FLO-553)
+    // The arrows name no behaviour, so that reduced motion can stop it
     scroll-behavior: smooth;
 }
 

package/src/styles/components/_select.scss

@@ -63,7 +63,7 @@ $component: "#{base.$prefix}-select";
         // No viewport scrim: the old `::before` one shared the root's
         // pseudo-element with the filled indicator (height 2px), so it was a
         // 2px strip and never blocked anything; a click outside closes the
-        // menu (FLO-300 moved the indicator to the field, which revived it).
+        // menu (the indicator moved to the field, which revived it).
 
         // These styles handle the focused state when the menu is open
         .#{base.$prefix}-text-field--filled {
@@ -188,7 +188,7 @@ $component: "#{base.$prefix}-select";
 
 }
 
-// `.mtrl-select__menu` marks the select's menu (FLO-295: the class was unprefixed,
+// `.mtrl-select__menu` marks the select's menu (the class was unprefixed,
 // so nothing here ever applied). Its never-applied rules are gone: a 460px max
 // width fought the menu's field width, a 4px margin its top-layer placement, and
 // the fade classes were never set; the menu's own motion and size apply.

package/src/styles/components/_side-sheet.scss

@@ -115,7 +115,7 @@ $component: "#{base.$prefix}-side-sheet";
             outline-offset: 2px;
         }
 
-        // FLO-579: the 40px button carries a 48px target, the icon button's own
+        // The 40px button carries a 48px target, the icon button's own
         // mechanism (its --xs/--s ::after): the box reaches 4px past each edge.
         // The `position: relative` above is the button's own, so the box anchors
         // to the button whatever the page does to buttons.
@@ -170,7 +170,7 @@ $component: "#{base.$prefix}-side-sheet";
 
         // Only the modal sheet rounds, on its inner edge: CornerLarge where it
         // faces the page. The standard one is square (MDC
-        // Sheet.Side.Docked.Container.Shape = Corner.None), FLO-324.
+        // Sheet.Side.Docked.Container.Shape = Corner.None),
         &.#{$component}--end .#{$component}__container {
             box-shadow: f.get-elevation(1), m.$sheet-overshoot-guard 0 0 0 t.color("surface-container-low");
             border-start-start-radius: v.shape("large");

package/src/styles/components/_slider.scss

@@ -5,14 +5,14 @@
 @use '../../styles/abstract/mixins' as m;
 @use '../../styles/abstract/theme' as t;
 
-// Motion (FLO-250). A value change that does not follow a pointer -- a tap on the
+// Motion. A value change that does not follow a pointer -- a tap on the
 // track, a key, setValue() -- carries the handle, the value indicator and the track
 // to the new value on the default spatial spring, as the m3.material.io sliders
 // video shows: a tap slides the handle over, peaking about 300ms in with a 3-5%
 // overshoot and settled by 450ms. The default spatial spring peaks at about 270ms
 // with 1.5% and settles in 450ms; the fast one (140ms, 9%) was visibly too strong. The controller sets
 // `--settling` for those changes alone, so a drag follows the pointer and a layout
-// render (the first one, a resize) never moves anything (FLO-249).
+// render (the first one, a resize) never moves anything.
 //
 // The value indicator grows out of the handle and shrinks back into it: in on
 // motionDurationMedium4 emphasized decelerate, out on motionDurationShort3
@@ -39,7 +39,7 @@ $component: '#{base.$prefix}-slider';
   // inactive track and the ticks on the active track take its container colour
   // (secondaryContainer). A stylesheet overrides them per slider with
   // --<prefix>-slider-color, --<prefix>-slider-container-color and, for the ticks on
-  // the active track alone, --<prefix>-slider-on-color. FLO-250.
+  // the active track alone, --<prefix>-slider-on-color.
   --#{base.$prefix}-slider-track-color: var(--#{base.$prefix}-slider-color, #{t.color('primary')});
   --#{base.$prefix}-slider-inactive-track-color: var(--#{base.$prefix}-slider-container-color, #{t.color('secondary-container')});
   --#{base.$prefix}-slider-tick-color: var(--#{base.$prefix}-slider-on-color, var(--#{base.$prefix}-slider-inactive-track-color));
@@ -55,7 +55,7 @@ $component: '#{base.$prefix}-slider';
   }
   
   // Label
-  // Body Large, as the checkbox, radio and switch labels (FLO-587).
+  // Body Large, as the checkbox, radio and switch labels.
   &__label {
     display: block;
     @include m.typography('body-large');
@@ -84,7 +84,7 @@ $component: '#{base.$prefix}-slider';
   // An icon outside the track sits level with it, before or after it (the M3
   // guidelines' icons at either end); the label spans the track's column, above or
   // below. It used to be absolutely placed at a fixed top on the start side, so
-  // iconPosition and labelPosition changed nothing on screen. FLO-107.
+  // iconPosition and labelPosition changed nothing on screen.
   &--icon {
     display: grid;
     grid-template-columns: 40px minmax(0, 1fr);
@@ -327,7 +327,7 @@ $component: '#{base.$prefix}-slider';
     .#{$component}__value--visible { transition: $settle-position, $bubble-transition-visible; }
   }
 
-  // Vertical (FLO-252): the same parts turned a quarter. withTracks and the
+  // Vertical: the same parts turned a quarter. withTracks and the
   // controller write positions along the axis -- to bottom, or to top with
   // topToBottom -- and thicknesses across it; the length is the slider's height.
   &--vertical {

package/src/styles/components/_switch.scss

@@ -56,7 +56,7 @@ $component: '#{base.$prefix}-switch';
     flex-grow: 1;
   }
 
-  // labelPosition 'end' only added this class, and the label stayed first. FLO-267.
+  // labelPosition 'end' only added this class, and the label stayed first.
   &--label-end &__container {
     flex-direction: row-reverse;
   }
@@ -83,7 +83,7 @@ $component: '#{base.$prefix}-switch';
     }
 
     // md.comp.focus-ring around the track (material-web's switch ring), 3dp
-    // secondary at a 2dp offset. FLO-267.
+    // secondary at a 2dp offset.
     &:focus-visible ~ .#{$component}__track {
       outline: 3px solid t.color('secondary');
       outline-offset: 2px;
@@ -92,7 +92,7 @@ $component: '#{base.$prefix}-switch';
 
   // The track (52 x 32dp, a 2dp outline). The handle and its state layer are
   // placed with inset-inline-start, so both mirror in right-to-left layouts: a
-  // physical left plus translateX put the selected handle off the track. FLO-267.
+  // physical left plus translateX put the selected handle off the track.
   &__track {
     position: relative;
     flex-shrink: 0;
@@ -140,7 +140,7 @@ $component: '#{base.$prefix}-switch';
     pointer-events: none;
 
     // Icons: 16dp. The selected one is on-primary-container, the unselected one
-    // surface-container-highest (SwitchTokens). FLO-267.
+    // surface-container-highest (SwitchTokens).
     &-icon {
       position: absolute;
       display: flex;
@@ -270,7 +270,7 @@ $component: '#{base.$prefix}-switch';
 
   // Interaction states. The handle takes on-surface-variant (unselected) or
   // primary-container (selected) on hover, focus and press, over an on-surface or
-  // primary layer at the hover, focus and pressed opacities. FLO-267.
+  // primary layer at the hover, focus and pressed opacities.
   &:not(.#{$component}--disabled) {
     .#{$component}__input:is(:hover, :focus-visible, :active) ~ .#{$component}__track .#{$component}__thumb {
       background-color: t.color('on-surface-variant');

package/src/styles/components/_tabs.scss

@@ -28,7 +28,7 @@ $container: "#{base.$prefix}-tabs";
         }
 
         // Primary indicator: m3.material.io tabs specs, shape "3, 3, 0, 0" (the top
-        // corners only; Compose rounds all four) at 3dp, set by indicator.ts. FLO-262.
+        // corners only; Compose rounds all four) at 3dp, set by indicator.ts.
         .#{$container}__indicator {
             border-radius: 3px 3px 0 0;
             background-color: t.color("primary");
@@ -40,7 +40,7 @@ $container: "#{base.$prefix}-tabs";
         // Tab indicator styling for secondary variant
         .#{$container}__indicator {
             // 2dp, set by indicator.ts: the site's secondary indicator height (Compose's
-            // SecondaryIndicator takes the primary 3dp; the site wins). FLO-262.
+            // SecondaryIndicator takes the primary 3dp; the site wins).
             border-radius: 0;
             background-color: t.color("primary");
         }
@@ -62,7 +62,7 @@ $container: "#{base.$prefix}-tabs";
     // container the tabs inherited that and stacked vertically -- `flex: 1`
     // below was dividing the height rather than the row the comment above
     // describes. The divider and the indicator are both absolutely
-    // positioned, so neither depends on the container's direction. FLO-241.
+    // positioned, so neither depends on the container's direction.
     &:not(&--scrollable) {
         flex-direction: row;
     }
@@ -82,7 +82,7 @@ $container: "#{base.$prefix}-tabs";
             // tabs inside the row.
             padding-inline: 52px;
             overflow-x: auto;
-            // The scroll buttons name no behaviour, so that reduced motion can stop it (FLO-553)
+            // The scroll buttons name no behaviour, so that reduced motion can stop it
             scroll-behavior: smooth;
             scrollbar-width: none; // Firefox
             -ms-overflow-style: none; // IE and Edge
@@ -108,7 +108,7 @@ $container: "#{base.$prefix}-tabs";
     // Tab indicator styling - base styles
     &__indicator {
         position: absolute;
-        // On the row's bottom edge, over the divider, as the site draws it. FLO-262.
+        // On the row's bottom edge, over the divider, as the site draws it.
         bottom: 0;
         // indicator.ts measures from the scroll container's left edge and moves the
         // indicator with translateX, so it has to start there. Without `left` an
@@ -117,7 +117,7 @@ $container: "#{base.$prefix}-tabs";
         left: 0;
         // Compose springs the indicator's offset and width (damping 0.9, stiffness
         // 700): the default spatial spring. indicator.ts moves it without motion on
-        // the first render and on resize. FLO-262.
+        // the first render and on resize.
         transition: m.spring(transform, default-spatial), m.spring(width, default-spatial);
         z-index: 1; // Ensure indicator appears above divider
     }
@@ -125,7 +125,7 @@ $container: "#{base.$prefix}-tabs";
     // Resting position where anchor positioning exists (Baseline 2026). `left: 0`
     // above stays the fallback, and older browsers keep the transform spring.
     // The name is scoped to this component. The active tab carries it; a primary
-    // label replaces it so the indicator insets that text. FLO-369.
+    // label replaces it so the indicator insets that text.
     @supports (#{string.unquote("anchor-name: --a")}) {
         anchor-scope: string.unquote("--#{base.$prefix}-tabs-indicator");
         $anchor: string.unquote("--#{base.$prefix}-tabs-indicator");
@@ -228,7 +228,7 @@ $container: "#{base.$prefix}-tabs";
     }
 
     // A tab with an icon is a button with an icon, whose text-button padding is
-    // 12dp on the icon side: the stacked icon sat 2px off-centre. FLO-262.
+    // 12dp on the icon side: the stacked icon sat 2px off-centre.
     &.#{base.$prefix}-button--icon {
         padding: 0 16px;
     }
@@ -239,7 +239,7 @@ $container: "#{base.$prefix}-tabs";
     }
 
     // md.comp.focus-ring: 3dp in secondary, drawn inward because a tab sits at the
-    // row's edge and inside a scroll container that would clip it. FLO-262.
+    // row's edge and inside a scroll container that would clip it.
     &:focus-visible {
         outline: 3px solid t.color("secondary");
         outline-offset: -3px;
@@ -331,7 +331,7 @@ $container: "#{base.$prefix}-tabs";
             }
 
             // Pressed state for active tabs
-            // A rippled tab leaves the press to its ripple (FLO-260).
+            // A rippled tab leaves the press to its ripple.
             &:active:not(:has(> .#{base.$prefix}-ripple)),
             &.#{$component}--pressed {
                 background-color: t.alpha("primary", v.state("pressed-state-layer-opacity"));
@@ -346,7 +346,7 @@ $container: "#{base.$prefix}-tabs";
 
             // An inactive tab's label and icon turn on-surface in every interaction
             // state (InactiveHover/Focus/PressedLabelTextColor = OnSurface), over an
-            // on-surface layer; FLO-262.
+            // on-surface layer;
             &:hover,
             &.#{$component}--hover {
                 color: t.color("on-surface");
@@ -360,7 +360,7 @@ $container: "#{base.$prefix}-tabs";
             }
 
             // The press is primary: "tapping a non-selected tab will select it"
-            // (MDC inactive_pressed_state_layer_color). The ripple draws it (FLO-260).
+            // (MDC inactive_pressed_state_layer_color). The ripple draws it.
             &:active,
             &.#{$component}--pressed {
                 color: t.color("on-surface");
@@ -400,7 +400,7 @@ $container: "#{base.$prefix}-tabs";
             }
 
             // Pressed state for active tabs - secondary
-            // A rippled tab leaves the press to its ripple (FLO-260).
+            // A rippled tab leaves the press to its ripple.
             &:active:not(:has(> .#{base.$prefix}-ripple)),
             &.#{$component}--pressed {
                 background-color: t.alpha("on-surface", v.state("pressed-state-layer-opacity"));
@@ -414,7 +414,7 @@ $container: "#{base.$prefix}-tabs";
             color: t.color("on-surface-variant");
 
             // Secondary tabs: label, icon and layer on-surface in every interaction
-            // state, active or not (SecondaryNavigationTabTokens). FLO-262.
+            // state, active or not (SecondaryNavigationTabTokens).
             &:hover,
             &.#{$component}--hover {
                 color: t.color("on-surface");
@@ -432,7 +432,7 @@ $container: "#{base.$prefix}-tabs";
                 color: t.color("on-surface");
             }
 
-            // A rippled tab leaves the press to its ripple (FLO-260).
+            // A rippled tab leaves the press to its ripple.
             &:active:not(:has(> .#{base.$prefix}-ripple)),
             &.#{$component}--pressed {
                 background-color: t.alpha("on-surface", v.state("pressed-state-layer-opacity"));

package/src/styles/components/_text-field.scss

@@ -8,7 +8,7 @@
 // Define the component once
 $component: "#{base.$prefix}-text-field";
 
-// Right to left (FLO-562). Every horizontal inset is a custom property, set
+// Right to left. Every horizontal inset is a custom property, set
 // once whatever the direction, and the rules in this mixin, at the end of the
 // component's block, are the whole mirror. Two selectors: an ancestor's `dir`,
 // which needs no script, and --rtl, which placement.ts sets from the computed
@@ -49,13 +49,13 @@ $component: "#{base.$prefix}-text-field";
     // Unsized, the field is 280px wide (TextFieldDefaults.MinWidth), not as
     // wide as its input's 20 average characters, which Chrome measures
     // differently per platform for the same font: 167px on macOS, 220px on
-    // Linux (FLO-293). A width from the page still applies.
+    // Linux. A width from the page still applies.
     contain: inline-size;
     contain-intrinsic-inline-size: v.text-field('width');
     // align-self: flex-start; // Prevents growing to fill the container's height
     flex: 0 0 auto; // Don't grow or shrink; keep natural size
     // The container: the label, input, outline, icons and affixes are placed
-    // against it, so the supporting text row under it never moves them (FLO-300)
+    // against it, so the supporting text row under it never moves them
     &__field {
         position: relative;
         display: flex;
@@ -100,7 +100,7 @@ $component: "#{base.$prefix}-text-field";
         transition: background-color 0s ease-out 50000000s;
 
         // InputPlaceholderColor, shown while the field is focused or has no
-        // label: under a resting label it would collide with it (FLO-298)
+        // label: under a resting label it would collide with it
         &::placeholder {
             color: t.color("on-surface-variant");
             opacity: 1;
@@ -114,7 +114,7 @@ $component: "#{base.$prefix}-text-field";
             transition: background-color 5000s ease-in-out 0s; // Long transition to keep the background
         }
 
-        // Firefox autofill; the animation reports it as on WebKit (FLO-335)
+        // Firefox autofill; the animation reports it as on WebKit
         &:autofill {
             animation-name: onAutoFillStart;
             animation-duration: 10ms;
@@ -123,14 +123,14 @@ $component: "#{base.$prefix}-text-field";
     }
 
     // The disabled input's -webkit-text-fill-color is inherited by its
-    // placeholder and paints over color, so both are cleared (FLO-354)
+    // placeholder and paints over color, so both are cleared
     &:has(> .#{$component}__field > .#{$component}__label):not(.#{$component}--focused) .#{$component}__input::placeholder {
         color: transparent;
         -webkit-text-fill-color: transparent;
     }
 
     // While the label rests in the input area it is all that area shows: the
-    // prefix and suffix appear as it floats, like the placeholder (FLO-355).
+    // prefix and suffix appear as it floats, like the placeholder.
     // Resting is the float rules' complement: empty to the script and to the
     // input itself, and not focused.
     &--empty:has(> .#{$component}__field > .#{$component}__label):not(.#{$component}--focused):not(:has(.#{$component}__input:is(:not(:placeholder-shown), :autofill, :-webkit-autofill))) {
@@ -153,7 +153,7 @@ $component: "#{base.$prefix}-text-field";
         max-width: 40%; // Prevent extreme overflow
         overflow: hidden;
         text-overflow: ellipsis;
-        // opacity as the label floats (FLO-355); top where a label is added
+        // opacity as the label floats; top where a label is added
         // or removed
         transition:
             top v.motion("duration-short4") v.motion("easing-emphasized"),
@@ -196,7 +196,7 @@ $component: "#{base.$prefix}-text-field";
         transition: top v.motion("duration-short4")
             v.motion("easing-emphasized"); // Add transition for top position
 
-        // LeadingIconSize / TrailingIconSize: 24dp, the whole box (FLO-298)
+        // LeadingIconSize / TrailingIconSize: 24dp, the whole box
         svg {
             width: 24px;
             height: 24px;
@@ -219,7 +219,7 @@ $component: "#{base.$prefix}-text-field";
         transition: top v.motion("duration-short4")
             v.motion("easing-emphasized"); // Add transition for top position
 
-        // LeadingIconSize / TrailingIconSize: 24dp, the whole box (FLO-298)
+        // LeadingIconSize / TrailingIconSize: 24dp, the whole box
         svg {
             width: 24px;
             height: 24px;
@@ -266,7 +266,7 @@ $component: "#{base.$prefix}-text-field";
 
     // What a prefix or a suffix adds before the text: its width, which
     // placement.ts measures into a custom property (32px until it has), and
-    // the 2dp to the text (PrefixSuffixTextPadding) (FLO-299)
+    // the 2dp to the text (PrefixSuffixTextPadding)
     &--with-prefix {
         --#{$component}-prefix-space: calc(var(--#{$component}-prefix-width, 32px) + 2px);
     }
@@ -291,7 +291,7 @@ $component: "#{base.$prefix}-text-field";
 
     // Disabled state
     // Disabled: the roles at 38%, not the element faded, which also faded
-    // the filled container's 4% (FLO-298). The fill is the filled variant's.
+    // the filled container's 4%. The fill is the filled variant's.
     &--disabled {
         .#{$component}__input {
             color: t.alpha("on-surface", 0.38);
@@ -319,7 +319,7 @@ $component: "#{base.$prefix}-text-field";
     }
 
     // The label comes before the input, so no sibling selector reaches it:
-    // the root reads the input's state instead (FLO-303).
+    // the root reads the input's state instead.
     &:has(.#{$component}__input:disabled) {
         .#{$component}__label,
         .#{$component}__supporting {
@@ -347,7 +347,6 @@ $component: "#{base.$prefix}-text-field";
     // the start, the counter at the end, 4dp below the field and 16dp in from
     // each side (TextFieldDefaults.supportingTextPadding). It was absolute,
     // 18px under the field, so it overlapped what followed and never wrapped
-    // (FLO-300).
     &__supporting {
         @include m.typography("body-small");
         display: flex;
@@ -376,7 +375,7 @@ $component: "#{base.$prefix}-text-field";
         color: t.color("error");
     }
 
-    // The required asterisk (FLO-301): part of the label, in its colour and
+    // The required asterisk: part of the label, in its colour and
     // straight after its text, as Material Web appends it. It was the error
     // colour with a 4px gap, a style no element carried until now.
     &__required {
@@ -439,7 +438,7 @@ $component: "#{base.$prefix}-text-field";
             transition: opacity v.motion("duration-short4") v.motion("easing-standard");
 
             // Here, not in the block above with the label and the outline:
-            // this rule comes later and would win over it (FLO-299)
+            // this rule comes later and would win over it
             @include m.reduced-motion {
                 transition: none;
             }
@@ -455,7 +454,7 @@ $component: "#{base.$prefix}-text-field";
 
         // Floated from the input's own state too: a value, or autofill before
         // the script has seen it. The label precedes the input, so the root
-        // reads it (FLO-303).
+        // reads it.
         &:has(.#{$component}__input:is(:not(:placeholder-shown), :autofill, :-webkit-autofill)) .#{$component}__label {
             transform: translateY(calc(-12px - 37.5%)) scale(0.75);
         }
@@ -650,7 +649,7 @@ $component: "#{base.$prefix}-text-field";
             }
         }
 
-        // LabelColor at full strength: faded to 0.5 it failed 4.5:1 (FLO-298)
+        // LabelColor at full strength: faded to 0.5 it failed 4.5:1
         .#{$component}__label {
             top: 50%;
         }
@@ -723,7 +722,7 @@ $component: "#{base.$prefix}-text-field";
 
     // Multiline styles
     // The first line and the label are where a single-line field has them
-    // (FLO-299): Compose places the text with no singleLine branch,
+    // Compose places the text with no singleLine branch,
     // `textPosition = topPaddingValue + labelPlaceable.height`. The textarea's
     // own 12px put the first line under the filled field's floated label.
     &--multiline {
@@ -939,7 +938,7 @@ $component: "#{base.$prefix}-text-field";
 }
 
 // ============================================================================
-// An interactive trailing icon (FLO-301)
+// An interactive trailing icon
 // ============================================================================
 // With `trailingIconLabel` the trailing icon is a button: M3 draws an
 // interactive trailing icon as an icon button, as Compose's trailing slot holds
@@ -990,7 +989,7 @@ $component: "#{base.$prefix}-text-field";
     }
 
     // The field's mirror, for the button: an ancestor's `dir`, or the
-    // field's --rtl inside a shadow root (FLO-562)
+    // field's --rtl inside a shadow root
     [dir='rtl'] &,
     .#{$component}--rtl & {
         right: auto;

package/src/styles/components/_timepicker.scss

@@ -13,7 +13,7 @@ $component: '#{base.$prefix}-time-picker';
   position: relative;
   display: inline-block;
   
-  // A native modal <dialog> (FLO-278): the browser centres it in the top layer and
+  // A native modal <dialog>: the browser centres it in the top layer and
   // draws ::backdrop; the scrim is scrim at 0.32, as for every M3 dialog.
   &__dialog {
     box-sizing: border-box;
@@ -160,7 +160,7 @@ $component: '#{base.$prefix}-time-picker';
       }
     }
 
-    // Dial mode: the boxes are radios (FLO-283). TimeSelector tokens: an 8dp
+    // Dial mode: the boxes are radios. TimeSelector tokens: an 8dp
     // surface-container-highest container with an on-surface label, filled
     // primary-container when selected; state layers in the label colour.
     &:not([type="number"]) {
@@ -242,7 +242,7 @@ $component: '#{base.$prefix}-time-picker';
         background-color: t.alpha('on-surface-variant', v.state('pressed-state-layer-opacity'));
       }
 
-      // No time in this half of the day is inside minTime/maxTime (FLO-281).
+      // No time in this half of the day is inside minTime/maxTime.
       &[aria-disabled="true"] {
         opacity: 0.38;
         cursor: default;
@@ -279,7 +279,7 @@ $component: '#{base.$prefix}-time-picker';
     
   }
 
-  // The DOM dial (FLO-279), m3.material.io's clock dial: a 256dp surface-container-
+  // The DOM dial, m3.material.io's clock dial: a 256dp surface-container-
   // highest face with Body Large numbers, a 2dp primary track, an 8dp centre dot and
   // a 48dp primary handle; under the handle the numbers read on-primary. One
   // animated angle and radius place the track, the handle and that clipped copy, so
@@ -334,7 +334,7 @@ $component: '#{base.$prefix}-time-picker';
     // md.comp.focus-ring on the focused number.
     &:focus-visible { outline: 3px solid t.color('secondary'); outline-offset: 2px; }
 
-    // Outside minTime/maxTime or off the step (FLO-281): M3's disabled content,
+    // Outside minTime/maxTime or off the step: M3's disabled content,
     // at 38%.
     &[aria-disabled="true"] { opacity: 0.38; cursor: default; }
   }
@@ -518,7 +518,7 @@ $component: '#{base.$prefix}-time-picker';
 
 
 // The dial's angle and radius animate as values, so the hand, the handle and the
-// clipped labels move together on one spring (FLO-279).
+// clipped labels move together on one spring.
 @property --#{$component}-angle { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
 @property --#{$component}-radius { syntax: '<length>'; inherits: true; initial-value: 101px; }
 

package/src/styles/components/_toolbar.scss

@@ -201,3 +201,51 @@ $component: '#{base.$prefix}-toolbar';
     }
   }
 }
+
+// A toolbar shows a selected item through its colour alone: the m3 toolbars
+// specs give a selected toggle item colour roles and the toolbar token set
+// has no item shape tokens, while a standalone toggle icon button morphs
+// round to square when selected (icon buttons specs) and "their square
+// shape conflicts with the fully-rounded shape of the floating toolbar
+// container". So the morph targets of a round item are pinned to its round
+// radius, selected and pressed. (Pressed is this library's reading of the
+// report — round stays round — not something the toolbars spec asks for.)
+// The pins are each item's own resting round radius, half the container
+// height per size (styles/components/_icon-button.scss, which owns them),
+// and they reach only the bar's direct items:
+// - a round icon button that is a child of the bar in the same tree (a
+//   factory toolbar's items and overflow button, and the <m-toolbar>
+//   element's own overflow button): a size changed later swaps the size
+//   class, and the selector follows;
+// - an icon-button host assigned to the bar's default slot (an
+//   <m-icon-button> slotted into an <m-toolbar>), behind its own shadow
+//   root where no descendant selector reaches: ::slotted() matches it where
+//   it is assigned, by the marker attribute every icon-button host of this
+//   library carries whatever its tag prefix (src/elements/icon-button.ts,
+//   src/elements/define.ts — the sheet cannot spell a tag the page chose),
+//   and [size=…] follows a size changed after insertion, the size attribute
+//   being the host's public size (the element exposes no size property to
+//   drift from it). The default tag is matched as well, so markup that
+//   reaches the browser without the marker by any path — an adapter not
+//   writing it, hand-written HTML, a cached page from an older server
+//   render — still pins under the default prefix, as before the marker; a
+//   custom prefix cannot be spelled and needs the marker. :is() weighs its
+//   most specific argument, so the compound keeps the bare attribute's
+//   (0,1,0). Another library's icon button keeps the standalone
+//   morphs.
+// Anything deeper — an icon button in the overflow menu's content, a dialog
+// or menu opened from the bar, a composite child — matches neither selector
+// and keeps the standalone morphs.
+.#{base.$prefix}-toolbar .#{base.$prefix}-toolbar__bar > .#{base.$prefix}-icon-button--round,
+slot:not([name])::slotted(:is([data-mtrl-icon-button], m-icon-button)) {
+  --#{base.$prefix}-icon-button-shape-selected: 20px;
+  --#{base.$prefix}-icon-button-shape-pressed: 20px;
+}
+
+@each $size, $radius in ("xs": 16px, "m": 28px, "l": 48px, "xl": 68px) {
+  .#{base.$prefix}-toolbar .#{base.$prefix}-toolbar__bar > .#{base.$prefix}-icon-button--round.#{base.$prefix}-icon-button--#{$size},
+  slot:not([name])::slotted(:is([data-mtrl-icon-button], m-icon-button)[size=#{$size}]) {
+    --#{base.$prefix}-icon-button-shape-selected: #{$radius};
+    --#{base.$prefix}-icon-button-shape-pressed: #{$radius};
+  }
+}