material 3.0.2 → 3.0.3

package/dist/themes/tealcaramel-contrast.css

@@ -1,2 +1,2 @@
-/*! material v3.0.2 | MIT */
+/*! material v3.0.3 | MIT */
 [data-theme=tealcaramel]:is([data-theme-contrast=medium],[data-theme-contrast=high]):not([data-theme-mode=dark]){--mtrl-sys-color-on-error-container: #ffffff;--mtrl-sys-color-on-primary-container: #ffffff;--mtrl-sys-color-on-secondary-container: #ffffff;--mtrl-sys-color-on-tertiary-container: #ffffff;--mtrl-sys-color-on-primary-fixed: #ffffff;--mtrl-sys-color-on-primary-fixed-variant: #ffffff;--mtrl-sys-color-on-secondary-fixed: #ffffff;--mtrl-sys-color-on-secondary-fixed-variant: #ffffff;--mtrl-sys-color-on-tertiary-fixed: #ffffff;--mtrl-sys-color-on-tertiary-fixed-variant: #ffffff}[data-theme=tealcaramel]:is([data-theme-contrast=medium],[data-theme-contrast=high])[data-theme-mode=dark]{--mtrl-sys-color-on-surface: #ffffff;--mtrl-sys-color-inverse-primary: #004f5e}[data-theme=tealcaramel][data-theme-contrast=medium]:not([data-theme-mode=dark]){--mtrl-sys-color-error: #740006;--mtrl-sys-color-error-container: #cf2c27;--mtrl-sys-color-primary: #003c47;--mtrl-sys-color-primary-container: #1e778a;--mtrl-sys-color-secondary: #552c00;--mtrl-sys-color-secondary-container: #966130;--mtrl-sys-color-tertiary: #2e3453;--mtrl-sys-color-tertiary-container: #656b8d;--mtrl-sys-color-primary-fixed: #1e778a;--mtrl-sys-color-primary-fixed-dim: #005d6e;--mtrl-sys-color-secondary-fixed: #966130;--mtrl-sys-color-secondary-fixed-dim: #7a491a;--mtrl-sys-color-tertiary-fixed: #656b8d;--mtrl-sys-color-tertiary-fixed-dim: #4d5374;--mtrl-sys-color-surface-dim: #c2c7c9;--mtrl-sys-color-surface-container: #e4e9eb;--mtrl-sys-color-surface-container-high: #d8dee0;--mtrl-sys-color-surface-container-highest: #cdd2d5;--mtrl-sys-color-on-surface: #0c1214;--mtrl-sys-color-on-surface-variant: #2f383a;--mtrl-sys-color-outline: #4b5457;--mtrl-sys-color-outline-variant: #666f71}[data-theme=tealcaramel][data-theme-contrast=medium][data-theme-mode=dark]{--mtrl-sys-color-error: #ffd2cc;--mtrl-sys-color-on-error: #540003;--mtrl-sys-color-error-container: #ff5449;--mtrl-sys-color-on-error-container: #000000;--mtrl-sys-color-primary: #9ae8fd;--mtrl-sys-color-on-primary: #002a33;--mtrl-sys-color-primary-container: #4c9baf;--mtrl-sys-color-on-primary-container: #000000;--mtrl-sys-color-secondary: #ffd4b3;--mtrl-sys-color-on-secondary: #3d1e00;--mtrl-sys-color-secondary-container: #bf8450;--mtrl-sys-color-on-secondary-container: #000000;--mtrl-sys-color-tertiary: #d5daff;--mtrl-sys-color-on-tertiary: #1d2442;--mtrl-sys-color-tertiary-container: #898fb3;--mtrl-sys-color-on-tertiary-container: #000000;--mtrl-sys-color-on-primary-fixed: #001419;--mtrl-sys-color-on-primary-fixed-variant: #003c47;--mtrl-sys-color-on-secondary-fixed: #1f0c00;--mtrl-sys-color-on-secondary-fixed-variant: #552c00;--mtrl-sys-color-on-tertiary-fixed: #080f2c;--mtrl-sys-color-on-tertiary-fixed-variant: #2e3453;--mtrl-sys-color-surface-bright: #404547;--mtrl-sys-color-surface-container-lowest: #04080a;--mtrl-sys-color-surface-container-low: #191e20;--mtrl-sys-color-surface-container: #23292b;--mtrl-sys-color-surface-container-high: #2e3335;--mtrl-sys-color-surface-container-highest: #393f40;--mtrl-sys-color-on-surface-variant: #d5dee1;--mtrl-sys-color-outline: #aab3b6;--mtrl-sys-color-outline-variant: #899295;--mtrl-sys-color-inverse-on-surface: #252b2d}[data-theme=tealcaramel][data-theme-contrast=high]:not([data-theme-mode=dark]){--mtrl-sys-color-error: #600004;--mtrl-sys-color-error-container: #98000a;--mtrl-sys-color-primary: #00313b;--mtrl-sys-color-primary-container: #00515f;--mtrl-sys-color-secondary: #462300;--mtrl-sys-color-secondary-container: #6c3e0f;--mtrl-sys-color-tertiary: #242a48;--mtrl-sys-color-tertiary-container: #414767;--mtrl-sys-color-primary-fixed: #00515f;--mtrl-sys-color-primary-fixed-dim: #003843;--mtrl-sys-color-secondary-fixed: #6c3e0f;--mtrl-sys-color-secondary-fixed-dim: #502900;--mtrl-sys-color-tertiary-fixed: #414767;--mtrl-sys-color-tertiary-fixed-dim: #2b314f;--mtrl-sys-color-surface-dim: #b4babc;--mtrl-sys-color-surface-container-low: #ecf2f4;--mtrl-sys-color-surface-container: #dee3e5;--mtrl-sys-color-surface-container-high: #d0d5d7;--mtrl-sys-color-surface-container-highest: #c2c7c9;--mtrl-sys-color-on-surface: #000000;--mtrl-sys-color-on-surface-variant: #000000;--mtrl-sys-color-outline: #252d30;--mtrl-sys-color-outline-variant: #424b4d;--mtrl-sys-color-inverse-on-surface: #ffffff}[data-theme=tealcaramel][data-theme-contrast=high][data-theme-mode=dark]{--mtrl-sys-color-error: #ffece9;--mtrl-sys-color-on-error: #000000;--mtrl-sys-color-error-container: #ffaea4;--mtrl-sys-color-on-error-container: #220001;--mtrl-sys-color-primary: #d6f5ff;--mtrl-sys-color-on-primary: #000000;--mtrl-sys-color-primary-container: #80cee3;--mtrl-sys-color-on-primary-container: #000d12;--mtrl-sys-color-secondary: #ffede0;--mtrl-sys-color-on-secondary: #000000;--mtrl-sys-color-secondary-container: #f8b57c;--mtrl-sys-color-on-secondary-container: #160800;--mtrl-sys-color-tertiary: #efefff;--mtrl-sys-color-on-tertiary: #000000;--mtrl-sys-color-tertiary-container: #bbc1e7;--mtrl-sys-color-on-tertiary-container: #030826;--mtrl-sys-color-on-primary-fixed: #000000;--mtrl-sys-color-on-primary-fixed-variant: #001419;--mtrl-sys-color-on-secondary-fixed: #000000;--mtrl-sys-color-on-secondary-fixed-variant: #1f0c00;--mtrl-sys-color-on-tertiary-fixed: #000000;--mtrl-sys-color-on-tertiary-fixed-variant: #080f2c;--mtrl-sys-color-surface-bright: #4b5153;--mtrl-sys-color-surface-container-lowest: #000000;--mtrl-sys-color-surface-container-low: #1b2022;--mtrl-sys-color-surface-container: #2c3133;--mtrl-sys-color-surface-container-high: #373c3e;--mtrl-sys-color-surface-container-highest: #42484a;--mtrl-sys-color-on-surface-variant: #ffffff;--mtrl-sys-color-outline: #e9f1f5;--mtrl-sys-color-outline-variant: #bbc4c7;--mtrl-sys-color-inverse-on-surface: #000000}

package/dist/themes/tealcaramel.css

@@ -1,2 +1,2 @@
-/*! material v3.0.2 | MIT */
+/*! material v3.0.3 | MIT */
 [data-theme=tealcaramel]{--mtrl-sys-color-error: #B3261E;--mtrl-sys-color-on-error: #FFFFFF;--mtrl-sys-color-error-container: #F9DEDC;--mtrl-sys-color-on-error-container: #410E0B;--mtrl-sys-color-success: #006C4E;--mtrl-sys-color-on-success: #FFFFFF;--mtrl-sys-color-warning: #974800;--mtrl-sys-color-on-warning: #FFFFFF;--mtrl-sys-color-info: #0061A4;--mtrl-sys-color-on-info: #FFFFFF;--mtrl-sys-color-error: #ba1a1a;--mtrl-sys-color-on-error: #ffffff;--mtrl-sys-color-error-container: #ffdad6;--mtrl-sys-color-on-error-container: #93000a;--mtrl-sys-color-primary: #00687a;--mtrl-sys-color-on-primary: #ffffff;--mtrl-sys-color-primary-container: #acedff;--mtrl-sys-color-on-primary-container: #004e5c;--mtrl-sys-color-secondary: #855323;--mtrl-sys-color-on-secondary: #ffffff;--mtrl-sys-color-secondary-container: #ffdcc2;--mtrl-sys-color-on-secondary-container: #693c0d;--mtrl-sys-color-tertiary: #565d7e;--mtrl-sys-color-on-tertiary: #ffffff;--mtrl-sys-color-tertiary-container: #dde1ff;--mtrl-sys-color-on-tertiary-container: #3f4565;--mtrl-sys-color-primary-fixed: #acedff;--mtrl-sys-color-primary-fixed-dim: #84d2e7;--mtrl-sys-color-on-primary-fixed: #001f26;--mtrl-sys-color-on-primary-fixed-variant: #004e5c;--mtrl-sys-color-secondary-fixed: #ffdcc2;--mtrl-sys-color-secondary-fixed-dim: #fcb880;--mtrl-sys-color-on-secondary-fixed: #2e1500;--mtrl-sys-color-on-secondary-fixed-variant: #693c0d;--mtrl-sys-color-tertiary-fixed: #dde1ff;--mtrl-sys-color-tertiary-fixed-dim: #bfc4eb;--mtrl-sys-color-on-tertiary-fixed: #131937;--mtrl-sys-color-on-tertiary-fixed-variant: #3f4565;--mtrl-sys-color-surface: #f5fafc;--mtrl-sys-color-surface-dim: #d5dbdd;--mtrl-sys-color-surface-bright: #f5fafc;--mtrl-sys-color-surface-variant: #dbe4e7;--mtrl-sys-color-surface-container-lowest: #ffffff;--mtrl-sys-color-surface-container-low: #eff4f7;--mtrl-sys-color-surface-container: #e9eff1;--mtrl-sys-color-surface-container-high: #e4e9eb;--mtrl-sys-color-surface-container-highest: #dee3e5;--mtrl-sys-color-on-surface: #171c1e;--mtrl-sys-color-on-surface-variant: #3f484b;--mtrl-sys-color-outline: #70797b;--mtrl-sys-color-outline-variant: #bfc8cb;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-inverse-surface: #2c3133;--mtrl-sys-color-inverse-on-surface: #ecf2f4;--mtrl-sys-color-inverse-primary: #84d2e7}[data-theme=tealcaramel][data-theme-mode=dark]{--mtrl-sys-color-error: #F2B8B5;--mtrl-sys-color-on-error: #601410;--mtrl-sys-color-error-container: #8C1D18;--mtrl-sys-color-on-error-container: #F9DEDC;--mtrl-sys-color-success: #8CD6AF;--mtrl-sys-color-on-success: #003824;--mtrl-sys-color-warning: #FFB95C;--mtrl-sys-color-on-warning: #462A00;--mtrl-sys-color-info: #99CBFF;--mtrl-sys-color-on-info: #003355;--mtrl-sys-color-error: #ffb4ab;--mtrl-sys-color-on-error: #690005;--mtrl-sys-color-error-container: #93000a;--mtrl-sys-color-on-error-container: #ffdad6;--mtrl-sys-color-primary: #84d2e7;--mtrl-sys-color-on-primary: #003640;--mtrl-sys-color-primary-container: #004e5c;--mtrl-sys-color-on-primary-container: #acedff;--mtrl-sys-color-secondary: #fcb880;--mtrl-sys-color-on-secondary: #4c2700;--mtrl-sys-color-secondary-container: #693c0d;--mtrl-sys-color-on-secondary-container: #ffdcc2;--mtrl-sys-color-tertiary: #bfc4eb;--mtrl-sys-color-on-tertiary: #282f4d;--mtrl-sys-color-tertiary-container: #3f4565;--mtrl-sys-color-on-tertiary-container: #dde1ff;--mtrl-sys-color-primary-fixed: #acedff;--mtrl-sys-color-primary-fixed-dim: #84d2e7;--mtrl-sys-color-on-primary-fixed: #001f26;--mtrl-sys-color-on-primary-fixed-variant: #004e5c;--mtrl-sys-color-secondary-fixed: #ffdcc2;--mtrl-sys-color-secondary-fixed-dim: #fcb880;--mtrl-sys-color-on-secondary-fixed: #2e1500;--mtrl-sys-color-on-secondary-fixed-variant: #693c0d;--mtrl-sys-color-tertiary-fixed: #dde1ff;--mtrl-sys-color-tertiary-fixed-dim: #bfc4eb;--mtrl-sys-color-on-tertiary-fixed: #131937;--mtrl-sys-color-on-tertiary-fixed-variant: #3f4565;--mtrl-sys-color-surface: #0f1416;--mtrl-sys-color-surface-dim: #0f1416;--mtrl-sys-color-surface-bright: #343a3c;--mtrl-sys-color-surface-variant: #3f484b;--mtrl-sys-color-surface-container-lowest: #090f11;--mtrl-sys-color-surface-container-low: #171c1e;--mtrl-sys-color-surface-container: #1b2022;--mtrl-sys-color-surface-container-high: #252b2d;--mtrl-sys-color-surface-container-highest: #303638;--mtrl-sys-color-on-surface: #dee3e5;--mtrl-sys-color-on-surface-variant: #bfc8cb;--mtrl-sys-color-outline: #899295;--mtrl-sys-color-outline-variant: #3f484b;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-inverse-surface: #dee3e5;--mtrl-sys-color-inverse-on-surface: #2c3133;--mtrl-sys-color-inverse-primary: #00687a}@media(prefers-contrast: more){[data-theme=tealcaramel]:not([data-theme-contrast]):not([data-theme-mode=dark]){--mtrl-sys-color-error: #600004;--mtrl-sys-color-error-container: #98000a;--mtrl-sys-color-on-error-container: #ffffff;--mtrl-sys-color-primary: #00313b;--mtrl-sys-color-primary-container: #00515f;--mtrl-sys-color-on-primary-container: #ffffff;--mtrl-sys-color-secondary: #462300;--mtrl-sys-color-secondary-container: #6c3e0f;--mtrl-sys-color-on-secondary-container: #ffffff;--mtrl-sys-color-tertiary: #242a48;--mtrl-sys-color-tertiary-container: #414767;--mtrl-sys-color-on-tertiary-container: #ffffff;--mtrl-sys-color-primary-fixed: #00515f;--mtrl-sys-color-primary-fixed-dim: #003843;--mtrl-sys-color-on-primary-fixed: #ffffff;--mtrl-sys-color-on-primary-fixed-variant: #ffffff;--mtrl-sys-color-secondary-fixed: #6c3e0f;--mtrl-sys-color-secondary-fixed-dim: #502900;--mtrl-sys-color-on-secondary-fixed: #ffffff;--mtrl-sys-color-on-secondary-fixed-variant: #ffffff;--mtrl-sys-color-tertiary-fixed: #414767;--mtrl-sys-color-tertiary-fixed-dim: #2b314f;--mtrl-sys-color-on-tertiary-fixed: #ffffff;--mtrl-sys-color-on-tertiary-fixed-variant: #ffffff;--mtrl-sys-color-surface-dim: #b4babc;--mtrl-sys-color-surface-container-low: #ecf2f4;--mtrl-sys-color-surface-container: #dee3e5;--mtrl-sys-color-surface-container-high: #d0d5d7;--mtrl-sys-color-surface-container-highest: #c2c7c9;--mtrl-sys-color-on-surface: #000000;--mtrl-sys-color-on-surface-variant: #000000;--mtrl-sys-color-outline: #252d30;--mtrl-sys-color-outline-variant: #424b4d;--mtrl-sys-color-inverse-on-surface: #ffffff}[data-theme=tealcaramel]:not([data-theme-contrast])[data-theme-mode=dark]{--mtrl-sys-color-error: #ffece9;--mtrl-sys-color-on-error: #000000;--mtrl-sys-color-error-container: #ffaea4;--mtrl-sys-color-on-error-container: #220001;--mtrl-sys-color-primary: #d6f5ff;--mtrl-sys-color-on-primary: #000000;--mtrl-sys-color-primary-container: #80cee3;--mtrl-sys-color-on-primary-container: #000d12;--mtrl-sys-color-secondary: #ffede0;--mtrl-sys-color-on-secondary: #000000;--mtrl-sys-color-secondary-container: #f8b57c;--mtrl-sys-color-on-secondary-container: #160800;--mtrl-sys-color-tertiary: #efefff;--mtrl-sys-color-on-tertiary: #000000;--mtrl-sys-color-tertiary-container: #bbc1e7;--mtrl-sys-color-on-tertiary-container: #030826;--mtrl-sys-color-on-primary-fixed: #000000;--mtrl-sys-color-on-primary-fixed-variant: #001419;--mtrl-sys-color-on-secondary-fixed: #000000;--mtrl-sys-color-on-secondary-fixed-variant: #1f0c00;--mtrl-sys-color-on-tertiary-fixed: #000000;--mtrl-sys-color-on-tertiary-fixed-variant: #080f2c;--mtrl-sys-color-surface-bright: #4b5153;--mtrl-sys-color-surface-container-lowest: #000000;--mtrl-sys-color-surface-container-low: #1b2022;--mtrl-sys-color-surface-container: #2c3133;--mtrl-sys-color-surface-container-high: #373c3e;--mtrl-sys-color-surface-container-highest: #42484a;--mtrl-sys-color-on-surface: #ffffff;--mtrl-sys-color-on-surface-variant: #ffffff;--mtrl-sys-color-outline: #e9f1f5;--mtrl-sys-color-outline-variant: #bbc4c7;--mtrl-sys-color-inverse-on-surface: #000000;--mtrl-sys-color-inverse-primary: #004f5e}}

package/dist/themes/vibrant-contrast.css

@@ -1,2 +1,2 @@
-/*! material v3.0.2 | MIT */
+/*! material v3.0.3 | MIT */
 [data-theme=vibrant]:is([data-theme-contrast=medium],[data-theme-contrast=high]):not([data-theme-mode=dark]){--mtrl-sys-color-on-error-container: #ffffff;--mtrl-sys-color-on-primary-container: #ffffff;--mtrl-sys-color-on-secondary-container: #ffffff;--mtrl-sys-color-on-tertiary-container: #ffffff;--mtrl-sys-color-on-primary-fixed: #ffffff;--mtrl-sys-color-on-primary-fixed-variant: #ffffff;--mtrl-sys-color-on-secondary-fixed: #ffffff;--mtrl-sys-color-on-secondary-fixed-variant: #ffffff;--mtrl-sys-color-on-tertiary-fixed: #ffffff;--mtrl-sys-color-on-tertiary-fixed-variant: #ffffff}[data-theme=vibrant]:is([data-theme-contrast=medium],[data-theme-contrast=high])[data-theme-mode=dark]{--mtrl-sys-color-on-surface: #ffffff;--mtrl-sys-color-inverse-primary: #5500cf}[data-theme=vibrant][data-theme-contrast=medium]:not([data-theme-mode=dark]){--mtrl-sys-color-error: #740006;--mtrl-sys-color-error-container: #cf2c27;--mtrl-sys-color-primary: #4100a1;--mtrl-sys-color-primary-container: #7d40ff;--mtrl-sys-color-secondary: #412f4e;--mtrl-sys-color-secondary-container: #7a6587;--mtrl-sys-color-tertiary: #4d294f;--mtrl-sys-color-tertiary-container: #895f89;--mtrl-sys-color-primary-fixed: #7d40ff;--mtrl-sys-color-primary-fixed-dim: #6400f0;--mtrl-sys-color-secondary-fixed: #7a6587;--mtrl-sys-color-secondary-fixed-dim: #614d6e;--mtrl-sys-color-tertiary-fixed: #895f89;--mtrl-sys-color-tertiary-fixed-dim: #6e4770;--mtrl-sys-color-surface-dim: #cbc4d2;--mtrl-sys-color-surface-container: #ede5f4;--mtrl-sys-color-surface-container-high: #e1dae9;--mtrl-sys-color-surface-container-highest: #d6cfdd;--mtrl-sys-color-on-surface: #12101a;--mtrl-sys-color-on-surface-variant: #383442;--mtrl-sys-color-outline: #55505f;--mtrl-sys-color-outline-variant: #706a7a}[data-theme=vibrant][data-theme-contrast=medium][data-theme-mode=dark]{--mtrl-sys-color-error: #ffd2cc;--mtrl-sys-color-on-error: #540003;--mtrl-sys-color-error-container: #ff5449;--mtrl-sys-color-on-error-container: #000000;--mtrl-sys-color-primary: #e3d6ff;--mtrl-sys-color-on-primary: #2e0077;--mtrl-sys-color-primary-container: #9e79ff;--mtrl-sys-color-on-primary-container: #000000;--mtrl-sys-color-secondary: #edd3fb;--mtrl-sys-color-on-secondary: #301e3c;--mtrl-sys-color-secondary-container: #9f88ad;--mtrl-sys-color-on-secondary-container: #000000;--mtrl-sys-color-tertiary: #ffccfd;--mtrl-sys-color-on-tertiary: #3a183e;--mtrl-sys-color-tertiary-container: #af82af;--mtrl-sys-color-on-tertiary-container: #000000;--mtrl-sys-color-on-primary-fixed: #160042;--mtrl-sys-color-on-primary-fixed-variant: #4100a1;--mtrl-sys-color-on-secondary-fixed: #1a0926;--mtrl-sys-color-on-secondary-fixed-variant: #412f4e;--mtrl-sys-color-on-tertiary-fixed: #230328;--mtrl-sys-color-on-tertiary-fixed-variant: #4d294f;--mtrl-sys-color-surface-bright: #47434e;--mtrl-sys-color-surface-container-lowest: #08060f;--mtrl-sys-color-surface-container-low: #1f1c26;--mtrl-sys-color-surface-container: #292631;--mtrl-sys-color-surface-container-high: #34313c;--mtrl-sys-color-surface-container-highest: #403c47;--mtrl-sys-color-on-surface-variant: #e1d9eb;--mtrl-sys-color-outline: #b6afc0;--mtrl-sys-color-outline-variant: #948e9e;--mtrl-sys-color-inverse-on-surface: #2c2833}[data-theme=vibrant][data-theme-contrast=high]:not([data-theme-mode=dark]){--mtrl-sys-color-error: #600004;--mtrl-sys-color-error-container: #98000a;--mtrl-sys-color-primary: #350087;--mtrl-sys-color-primary-container: #5700d2;--mtrl-sys-color-secondary: #362543;--mtrl-sys-color-secondary-container: #554262;--mtrl-sys-color-tertiary: #421e45;--mtrl-sys-color-tertiary-container: #623b64;--mtrl-sys-color-primary-fixed: #5700d2;--mtrl-sys-color-primary-fixed-dim: #3d0098;--mtrl-sys-color-secondary-fixed: #554262;--mtrl-sys-color-secondary-fixed-dim: #3d2b4a;--mtrl-sys-color-tertiary-fixed: #623b64;--mtrl-sys-color-tertiary-fixed-dim: #49254c;--mtrl-sys-color-surface-dim: #bdb6c4;--mtrl-sys-color-surface-container-low: #f5eefd;--mtrl-sys-color-surface-container: #e7e0ef;--mtrl-sys-color-surface-container-high: #d9d2e0;--mtrl-sys-color-surface-container-highest: #cbc4d2;--mtrl-sys-color-on-surface: #000000;--mtrl-sys-color-on-surface-variant: #000000;--mtrl-sys-color-outline: #2e2a38;--mtrl-sys-color-outline-variant: #4c4755;--mtrl-sys-color-inverse-on-surface: #ffffff}[data-theme=vibrant][data-theme-contrast=high][data-theme-mode=dark]{--mtrl-sys-color-error: #ffece9;--mtrl-sys-color-on-error: #000000;--mtrl-sys-color-error-container: #ffaea4;--mtrl-sys-color-on-error-container: #220001;--mtrl-sys-color-primary: #f5edff;--mtrl-sys-color-on-primary: #000000;--mtrl-sys-color-primary-container: #ccb8ff;--mtrl-sys-color-on-primary-container: #0f0033;--mtrl-sys-color-secondary: #faebff;--mtrl-sys-color-on-secondary: #000000;--mtrl-sys-color-secondary-container: #d3bae0;--mtrl-sys-color-on-secondary-container: #140420;--mtrl-sys-color-tertiary: #ffeafa;--mtrl-sys-color-on-tertiary: #000000;--mtrl-sys-color-tertiary-container: #e4b3e3;--mtrl-sys-color-on-tertiary-container: #1b0020;--mtrl-sys-color-on-primary-fixed: #000000;--mtrl-sys-color-on-primary-fixed-variant: #160042;--mtrl-sys-color-on-secondary-fixed: #000000;--mtrl-sys-color-on-secondary-fixed-variant: #1a0926;--mtrl-sys-color-on-tertiary-fixed: #000000;--mtrl-sys-color-on-tertiary-fixed-variant: #230328;--mtrl-sys-color-surface-bright: #524e5a;--mtrl-sys-color-surface-container-lowest: #000000;--mtrl-sys-color-surface-container-low: #211e28;--mtrl-sys-color-surface-container: #322f3a;--mtrl-sys-color-surface-container-high: #3d3a45;--mtrl-sys-color-surface-container-highest: #494551;--mtrl-sys-color-on-surface-variant: #ffffff;--mtrl-sys-color-outline: #f5edff;--mtrl-sys-color-outline-variant: #c7bfd1;--mtrl-sys-color-inverse-on-surface: #000000}

package/dist/themes/vibrant.css

@@ -1,2 +1,2 @@
-/*! material v3.0.2 | MIT */
+/*! material v3.0.3 | MIT */
 [data-theme=vibrant]{--mtrl-sys-color-error: #B3261E;--mtrl-sys-color-on-error: #FFFFFF;--mtrl-sys-color-error-container: #F9DEDC;--mtrl-sys-color-on-error-container: #410E0B;--mtrl-sys-color-success: #006C4E;--mtrl-sys-color-on-success: #FFFFFF;--mtrl-sys-color-warning: #974800;--mtrl-sys-color-on-warning: #FFFFFF;--mtrl-sys-color-info: #0061A4;--mtrl-sys-color-on-info: #FFFFFF;--mtrl-sys-color-error: #ba1a1a;--mtrl-sys-color-on-error: #ffffff;--mtrl-sys-color-error-container: #ffdad6;--mtrl-sys-color-on-error-container: #93000a;--mtrl-sys-color-primary: #6f19ff;--mtrl-sys-color-on-primary: #ffffff;--mtrl-sys-color-primary-container: #e9ddff;--mtrl-sys-color-on-primary-container: #5400cc;--mtrl-sys-color-secondary: #6b5778;--mtrl-sys-color-on-secondary: #ffffff;--mtrl-sys-color-secondary-container: #f3daff;--mtrl-sys-color-on-secondary-container: #523f5f;--mtrl-sys-color-tertiary: #79507a;--mtrl-sys-color-on-tertiary: #ffffff;--mtrl-sys-color-tertiary-container: #ffd6fc;--mtrl-sys-color-on-tertiary-container: #5f3961;--mtrl-sys-color-primary-fixed: #e9ddff;--mtrl-sys-color-primary-fixed-dim: #cfbcff;--mtrl-sys-color-on-primary-fixed: #22005d;--mtrl-sys-color-on-primary-fixed-variant: #5400cc;--mtrl-sys-color-secondary-fixed: #f3daff;--mtrl-sys-color-secondary-fixed-dim: #d7bee4;--mtrl-sys-color-on-secondary-fixed: #251431;--mtrl-sys-color-on-secondary-fixed-variant: #523f5f;--mtrl-sys-color-tertiary-fixed: #ffd6fc;--mtrl-sys-color-tertiary-fixed-dim: #e8b7e7;--mtrl-sys-color-on-tertiary-fixed: #2f0d33;--mtrl-sys-color-on-tertiary-fixed-variant: #5f3961;--mtrl-sys-color-surface: #fdf7ff;--mtrl-sys-color-surface-dim: #ded7e6;--mtrl-sys-color-surface-bright: #fdf7ff;--mtrl-sys-color-surface-variant: #e7dff2;--mtrl-sys-color-surface-container-lowest: #ffffff;--mtrl-sys-color-surface-container-low: #f8f1ff;--mtrl-sys-color-surface-container: #f2ebfa;--mtrl-sys-color-surface-container-high: #ede5f4;--mtrl-sys-color-surface-container-highest: #e7e0ef;--mtrl-sys-color-on-surface: #1d1a24;--mtrl-sys-color-on-surface-variant: #494453;--mtrl-sys-color-outline: #7a7484;--mtrl-sys-color-outline-variant: #cbc3d5;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-inverse-surface: #322f3a;--mtrl-sys-color-inverse-on-surface: #f5eefd;--mtrl-sys-color-inverse-primary: #cfbcff}[data-theme=vibrant][data-theme-mode=dark]{--mtrl-sys-color-error: #F2B8B5;--mtrl-sys-color-on-error: #601410;--mtrl-sys-color-error-container: #8C1D18;--mtrl-sys-color-on-error-container: #F9DEDC;--mtrl-sys-color-success: #8CD6AF;--mtrl-sys-color-on-success: #003824;--mtrl-sys-color-warning: #FFB95C;--mtrl-sys-color-on-warning: #462A00;--mtrl-sys-color-info: #99CBFF;--mtrl-sys-color-on-info: #003355;--mtrl-sys-color-error: #ffb4ab;--mtrl-sys-color-on-error: #690005;--mtrl-sys-color-error-container: #93000a;--mtrl-sys-color-on-error-container: #ffdad6;--mtrl-sys-color-primary: #cfbcff;--mtrl-sys-color-on-primary: #3a0092;--mtrl-sys-color-primary-container: #5400cc;--mtrl-sys-color-on-primary-container: #e9ddff;--mtrl-sys-color-secondary: #d7bee4;--mtrl-sys-color-on-secondary: #3b2948;--mtrl-sys-color-secondary-container: #523f5f;--mtrl-sys-color-on-secondary-container: #f3daff;--mtrl-sys-color-tertiary: #e8b7e7;--mtrl-sys-color-on-tertiary: #462349;--mtrl-sys-color-tertiary-container: #5f3961;--mtrl-sys-color-on-tertiary-container: #ffd6fc;--mtrl-sys-color-primary-fixed: #e9ddff;--mtrl-sys-color-primary-fixed-dim: #cfbcff;--mtrl-sys-color-on-primary-fixed: #22005d;--mtrl-sys-color-on-primary-fixed-variant: #5400cc;--mtrl-sys-color-secondary-fixed: #f3daff;--mtrl-sys-color-secondary-fixed-dim: #d7bee4;--mtrl-sys-color-on-secondary-fixed: #251431;--mtrl-sys-color-on-secondary-fixed-variant: #523f5f;--mtrl-sys-color-tertiary-fixed: #ffd6fc;--mtrl-sys-color-tertiary-fixed-dim: #e8b7e7;--mtrl-sys-color-on-tertiary-fixed: #2f0d33;--mtrl-sys-color-on-tertiary-fixed-variant: #5f3961;--mtrl-sys-color-surface: #15121c;--mtrl-sys-color-surface-dim: #15121c;--mtrl-sys-color-surface-bright: #3b3743;--mtrl-sys-color-surface-variant: #494453;--mtrl-sys-color-surface-container-lowest: #0f0d16;--mtrl-sys-color-surface-container-low: #1d1a24;--mtrl-sys-color-surface-container: #211e28;--mtrl-sys-color-surface-container-high: #2c2833;--mtrl-sys-color-surface-container-highest: #37333e;--mtrl-sys-color-on-surface: #e7e0ef;--mtrl-sys-color-on-surface-variant: #cbc3d5;--mtrl-sys-color-outline: #948e9f;--mtrl-sys-color-outline-variant: #494453;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-inverse-surface: #e7e0ef;--mtrl-sys-color-inverse-on-surface: #322f3a;--mtrl-sys-color-inverse-primary: #6f19ff}@media(prefers-contrast: more){[data-theme=vibrant]:not([data-theme-contrast]):not([data-theme-mode=dark]){--mtrl-sys-color-error: #600004;--mtrl-sys-color-error-container: #98000a;--mtrl-sys-color-on-error-container: #ffffff;--mtrl-sys-color-primary: #350087;--mtrl-sys-color-primary-container: #5700d2;--mtrl-sys-color-on-primary-container: #ffffff;--mtrl-sys-color-secondary: #362543;--mtrl-sys-color-secondary-container: #554262;--mtrl-sys-color-on-secondary-container: #ffffff;--mtrl-sys-color-tertiary: #421e45;--mtrl-sys-color-tertiary-container: #623b64;--mtrl-sys-color-on-tertiary-container: #ffffff;--mtrl-sys-color-primary-fixed: #5700d2;--mtrl-sys-color-primary-fixed-dim: #3d0098;--mtrl-sys-color-on-primary-fixed: #ffffff;--mtrl-sys-color-on-primary-fixed-variant: #ffffff;--mtrl-sys-color-secondary-fixed: #554262;--mtrl-sys-color-secondary-fixed-dim: #3d2b4a;--mtrl-sys-color-on-secondary-fixed: #ffffff;--mtrl-sys-color-on-secondary-fixed-variant: #ffffff;--mtrl-sys-color-tertiary-fixed: #623b64;--mtrl-sys-color-tertiary-fixed-dim: #49254c;--mtrl-sys-color-on-tertiary-fixed: #ffffff;--mtrl-sys-color-on-tertiary-fixed-variant: #ffffff;--mtrl-sys-color-surface-dim: #bdb6c4;--mtrl-sys-color-surface-container-low: #f5eefd;--mtrl-sys-color-surface-container: #e7e0ef;--mtrl-sys-color-surface-container-high: #d9d2e0;--mtrl-sys-color-surface-container-highest: #cbc4d2;--mtrl-sys-color-on-surface: #000000;--mtrl-sys-color-on-surface-variant: #000000;--mtrl-sys-color-outline: #2e2a38;--mtrl-sys-color-outline-variant: #4c4755;--mtrl-sys-color-inverse-on-surface: #ffffff}[data-theme=vibrant]:not([data-theme-contrast])[data-theme-mode=dark]{--mtrl-sys-color-error: #ffece9;--mtrl-sys-color-on-error: #000000;--mtrl-sys-color-error-container: #ffaea4;--mtrl-sys-color-on-error-container: #220001;--mtrl-sys-color-primary: #f5edff;--mtrl-sys-color-on-primary: #000000;--mtrl-sys-color-primary-container: #ccb8ff;--mtrl-sys-color-on-primary-container: #0f0033;--mtrl-sys-color-secondary: #faebff;--mtrl-sys-color-on-secondary: #000000;--mtrl-sys-color-secondary-container: #d3bae0;--mtrl-sys-color-on-secondary-container: #140420;--mtrl-sys-color-tertiary: #ffeafa;--mtrl-sys-color-on-tertiary: #000000;--mtrl-sys-color-tertiary-container: #e4b3e3;--mtrl-sys-color-on-tertiary-container: #1b0020;--mtrl-sys-color-on-primary-fixed: #000000;--mtrl-sys-color-on-primary-fixed-variant: #160042;--mtrl-sys-color-on-secondary-fixed: #000000;--mtrl-sys-color-on-secondary-fixed-variant: #1a0926;--mtrl-sys-color-on-tertiary-fixed: #000000;--mtrl-sys-color-on-tertiary-fixed-variant: #230328;--mtrl-sys-color-surface-bright: #524e5a;--mtrl-sys-color-surface-container-lowest: #000000;--mtrl-sys-color-surface-container-low: #211e28;--mtrl-sys-color-surface-container: #322f3a;--mtrl-sys-color-surface-container-high: #3d3a45;--mtrl-sys-color-surface-container-highest: #494551;--mtrl-sys-color-on-surface: #ffffff;--mtrl-sys-color-on-surface-variant: #ffffff;--mtrl-sys-color-outline: #f5edff;--mtrl-sys-color-outline-variant: #c7bfd1;--mtrl-sys-color-inverse-on-surface: #000000;--mtrl-sys-color-inverse-primary: #5500cf}}

package/dist/vue/create.d.ts

@@ -13,7 +13,7 @@
  * template and the light DOM from a single pass over the slots, including an
  * `async setup()` child under Suspense. The client renders the slots and not
  * the template: the HTML parser has already moved that template into the
- * shadow root. Without the import the markup is unchanged (FLO-373).
+ * shadow root. Without the import the markup is unchanged.
  *
  * @module vue
  */
@@ -80,7 +80,7 @@ export interface Exposed<E extends HTMLElement> {
  * element its template ref exposes as `element` (see `Exposed`).
  */
 export type MComponent<S, _E extends HTMLElement> = DefineSetupFnComponent<VueProps<S>, VueEmits<S>, VueSlots<S>>;
-/** Its slots: the default one, and each named slot the element reads (`<template #actions>`, FLO-325). */
+/** Its slots: the default one, and each named slot the element reads (`<template #actions>`). */
 export type VueSlots<S> = SlotsType<{
     default?: () => VNodeChild;
 } & {

package/dist/vue/create.js

@@ -103,8 +103,11 @@ export const createComponent = (spec, define, name) => {
             const rendered = typeof inner === "string"
                 ? inner.startsWith("<template shadowrootmode=")
                 : !staticallyOptedOut;
-            if (rendered)
+            if (rendered) {
                 hostProps[RENDERED_HOST_ATTRIBUTE] = "";
+                if (spec.marker)
+                    hostProps[spec.marker] = "";
+            }
             if (typeof inner !== "string") {
                 const held = createStaticVNode("", 1);
                 held.children = inner;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Material Design 3 components for the web: plain JavaScript, web components, and React, Vue, Svelte and Solid components. TypeScript, zero dependencies.",
   "author": "floor",
   "license": "MIT",

package/src/styles/abstract/_mixins.scss

@@ -31,7 +31,7 @@ $icons: (
 @mixin typography($scale) {
   $styles: f.get-typography($scale);
   // The role's face as its reference token, the compiled family as the fallback
-  // (FLO-330): an app or theme sets --{prefix}-ref-typeface-brand or -plain
+  // An app or theme sets --{prefix}-ref-typeface-brand or -plain
   font-family: var(--#{base.$prefix}-ref-typeface-#{f.typeface($scale)}, #{map.get($styles, 'font-family')});
   font-size: map.get($styles, 'font-size');
   line-height: map.get($styles, 'line-height');
@@ -39,7 +39,7 @@ $icons: (
   font-weight: map.get($styles, 'font-weight');
 }
 
-/// A typescale role through its custom properties (FLO-315): the
+/// A typescale role through its custom properties: the
 /// `--{prefix}-sys-typescale-{role}-*` tokens base/_tokens.scss emits from the
 /// same map, so setting `--{prefix}-ref-typeface-brand`/`-plain`, or a size
 /// token, reaches everything that uses it.
@@ -65,7 +65,7 @@ $icons: (
     position: relative;
   }
 
-  // The ripple is the press (FLO-260, as Compose draws it: one pressed indication at
+  // The ripple is the press (as Compose draws it: one pressed indication at
   // 0.10). An element that carries a ripple leaves its pressed layer to the wave, so
   // the two no longer add up to about 0.18; one without a ripple keeps it.
   @if $state == 'pressed' {
@@ -366,7 +366,7 @@ $sheet-overshoot-guard: 32px;
   &::after {
     content: '';
     position: absolute;
-    // Centred physically, as the icon button's own rule is (FLO-592). The
+    // Centred physically, as the icon button's own rule is. The
     // translate is physical, so the offsets must be: a logical inline-start
     // inset pinned the box's inline-start edge to the centre, and the translate
     // then moved the whole box a further 24px past it — a full box-width off

package/src/styles/abstract/_theme.scss

@@ -35,7 +35,7 @@ $mtrl-sys-motion: (
 
 /**
  * A colour role at an opacity, as color-mix on the role's custom property.
- * The themes define the colour roles only (no `-rgb` twins since FLO-311).
+ * The themes define the colour roles only (no `-rgb` twins).
  * @param {String} $key - Color token name
  * @param {Number} $opacity - Opacity value (0-1)
  * @return {String} color-mix CSS function with variable

package/src/styles/abstract/_variables.scss

@@ -85,7 +85,7 @@ $motion: (
   'spring-fast-spatial-easing': spring-linear($spring-fast-spatial-points),
   // The same spring with its progress clamped to 1, for colours: Compose's
   // Color.lerp clamps the fraction, so an overshooting spring never takes a
-  // colour past its target (FLO-348)
+  // colour past its target
   'spring-fast-spatial-clamped-easing': spring-linear($spring-fast-spatial-points, $clamp: true),
   'spring-slow-spatial-duration': 625ms,
   'spring-slow-spatial-easing': linear(0.0, 0.056, 0.182, 0.335, 0.488, 0.624, 0.738, 0.827, 0.895, 0.943, 0.975, 0.996, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.008, 1.006, 1.004, 1.003, 1.002, 1.001, 1),
@@ -214,7 +214,7 @@ $typescale: (
   )
 ) !default;
 
-// M3's shape scale, Compose ShapeTokens, and nothing else (FLO-345)
+// M3's shape scale, Compose ShapeTokens, and nothing else
 $shape: (
   'none': 0,
   'extra-small': 4px,
@@ -226,7 +226,7 @@ $shape: (
   'large-increased': 20px,
   'extra-large': 28px,
   // Compose ShapeTokens.CornerValueExtraLargeIncreased and
-  // CornerValueExtraExtraLarge (FLO-345)
+  // CornerValueExtraExtraLarge
   'extra-large-increased': 32px,
   'extra-extra-large': 48px,
   'full': 9999px
@@ -390,12 +390,12 @@ $spacing-scale: (
   @return map.get($typescale, $scale);
 }
 
-// A corner as its token, the compiled value as the fallback (FLO-330): an app or
+// A corner as its token, the compiled value as the fallback: an app or
 // theme sets --{prefix}-sys-shape-corner-<size> (base/_tokens.scss declares them)
 @function shape($size) {
   @if not map.has-key($shape, $size) {
     @error "No shape step '#{$size}'. M3's scale: #{map.keys($shape)}. "
-      + "extra-tiny, tiny and pill were removed in material 3.0.0: write a literal radius, or use full (FLO-345).";
+      + "extra-tiny, tiny and pill were removed in material 3.0.0: write a literal radius, or use full.";
   }
   @return var(--#{$prefix}-sys-shape-corner-#{$size}, #{map.get($shape, $size)});
 }
@@ -450,7 +450,7 @@ $text-field: (
   // than text fields", text fields guidelines, "Input text").
   'height-multiline': 100px,
   // Where the first line starts, which a sibling on the field's line aligns
-  // to: the single-line field's text (FLO-299). 16px, the content padding
+  // to: the single-line field's text. 16px, the content padding
   // (TextFieldPadding), outlined or without a label; under a filled field's
   // floated label, 8px and the label's 16px line.
   'padding-top-multiline': 16px,
@@ -468,7 +468,7 @@ $text-field: (
 ) !default;
 
 /// A text field measurement: `v.text-field('height')`. 0.10's `$textfield` and
-/// `textfield()` are removed in material 3.0.0 (FLO-383).
+/// `textfield()` are removed in material 3.0.0.
 @function text-field($key) {
   @if $key == 'border-radius' { @return shape('extra-small'); }
   @return map.get($text-field, $key);

package/src/styles/base/_foundation.scss

@@ -1,4 +1,4 @@
 // Tokens on the base stylesheet: shape, the two typefaces, and the three
 // body-medium typescale tokens the body rule reads. The rest of the
-// typescale is material/styles/typography (FLO-539).
+// typescale is material/styles/typography.
 @use "tokens" with ($typescale-tokens: "body");

package/src/styles/base/_typescale-tokens.scss

@@ -1,7 +1,7 @@
 // The typescale custom properties, one mixin so the full stylesheet, the base
 // and material/styles/typography emit the same declarations.
 // `all` is every role. `body` is the three body-medium tokens the base body
-// rule reads; the other 72 leave the base (FLO-539).
+// rule reads; the other 72 leave the base.
 
 @use 'sass:map';
 @use '../abstract/base' as base;

package/src/styles/base/_typography.scss

@@ -8,7 +8,7 @@ $prefix: base.$prefix;
 
 // The typescale classes, one per role of the same map the tokens come from,
 // each reading its role's custom properties rather than fixed values, so a
-// typeface or size set on the tokens reaches them (FLO-315)
+// typeface or size set on the tokens reaches them
 @each $role, $spec in v.$typescale {
   .#{$prefix}-#{$role} {
     @include m.typescale($role);

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

@@ -88,7 +88,7 @@ $component: "#{base.$prefix}-bottom-sheet";
 
     // A 48dp button (Compose: 22dp vertical padding round the 4dp bar, and the
     // minimum interactive size) drawing the 32x4dp bar
-    // (DockedDragHandleWidth / DockedDragHandleHeight), FLO-324
+    // (DockedDragHandleWidth / DockedDragHandleHeight)
     &__handle {
         flex: 0 0 auto;
         position: relative;

package/src/styles/components/_button.scss

@@ -116,7 +116,7 @@ $content-color: (
   // State layer: one ::before in currentColor, the content role each colour
   // style and toggle state sets as `color`. Hover, focus and pressed change
   // only its opacity (m3.material.io state layers: 0.08, 0.10, 0.10). The
-  // ripple is the press (FLO-260): a button that carries one leaves its
+  // ripple is the press: a button that carries one leaves its
   // pressed layer to the wave, as m.state-layer does.
   &::before {
     content: '';

package/src/styles/components/_checkbox.scss

@@ -48,14 +48,14 @@ $component: '#{base.$prefix}-checkbox';
 
   // The box: 18dp, a 2dp corner and a 2dp on-surface-variant outline, with no fill
   // until selected (CheckboxTokens, md-comp-checkbox). It carried a
-  // surface-container-highest fill and an outline-coloured stroke. FLO-265.
+  // surface-container-highest fill and an outline-coloured stroke.
   &__icon {
     position: relative;
     flex-shrink: 0;
     width: 18px;
     height: 18px;
     box-sizing: border-box;
-    // CheckboxTokens.ContainerShape: 2dp, outside the shape scale (FLO-345)
+    // CheckboxTokens.ContainerShape: 2dp, outside the shape scale
     border-radius: 2px;
     background-color: transparent;
     border: 2px solid t.color('on-surface-variant');
@@ -134,7 +134,7 @@ $component: '#{base.$prefix}-checkbox';
   }
 
   // Error (m3: "those states on error"): the outline, the selected container and
-  // every state layer are error, the check and dash on-error. FLO-265.
+  // every state layer are error, the check and dash on-error.
   &--error {
     .#{$component}__icon {
       border-color: t.color('error');
@@ -158,7 +158,7 @@ $component: '#{base.$prefix}-checkbox';
   // Disabled state. Per role, not a blanket opacity: CheckboxTokens gives the
   // unselected outline and the selected container OnSurface at 0.38, and the selected
   // checkmark Surface at full opacity. The indeterminate dash follows the check: it
-  // was an on-primary dash on a transparent box, which painted nothing. FLO-265.
+  // was an on-primary dash on a transparent box, which painted nothing.
   &--disabled {
     .#{$component}__input {
       cursor: not-allowed;
@@ -191,7 +191,7 @@ $component: '#{base.$prefix}-checkbox';
   // State layers (md-comp-checkbox). Unselected: on-surface on hover and focus, and
   // the outline turns on-surface; selected: primary. A press takes the colour of the
   // state it leads to (unselected presses primary, selected presses on-surface), and
-  // error is error throughout. Checked hover used the pressed opacity. FLO-265.
+  // error is error throughout. Checked hover used the pressed opacity.
   &:not(&--disabled) {
     $input: '.#{$component}__input';
     $layer: '.#{$component}__icon::before';

package/src/styles/components/_chips.scss

@@ -25,7 +25,7 @@ $container: "#{base.$prefix}-chips";
     max-width: 100%;
     // The outline is drawn over the container, as Compose draws a chip's border, so
     // it takes no room: as a 1px border it moved every padding 1px further in than
-    // M3 measures (the remove icon sat 9px from the edge). FLO-256.
+    // M3 measures (the remove icon sat 9px from the edge).
     border: 0;
     outline: 1px solid t.color("outline-variant");
     outline-offset: -1px;
@@ -59,11 +59,11 @@ $container: "#{base.$prefix}-chips";
         margin: 0;
         border-radius: inherit;
         &:disabled { cursor: default; }
-        // md.comp.focus-ring: 3dp at a 2dp outward offset (it was 2px). FLO-261.
+        // md.comp.focus-ring: 3dp at a 2dp outward offset (it was 2px).
         &:focus-visible { outline: 3px solid t.color("secondary"); outline-offset: 2px; }
     }
     // The 8dp between an icon and the label is the icon's margin, not the action's
-    // gap, so it can open and close with the icon (FLO-256).
+    // gap, so it can open and close with the icon.
     &__action {
         flex-shrink: 1;
         min-width: 0;
@@ -77,7 +77,7 @@ $container: "#{base.$prefix}-chips";
     &--input.#{$component}--avatar &__action { padding-inline-start: 4px; }
     // The remove icon sits 8dp from the label (the action's end padding) and 8dp from
     // the chip's edge (site, Compose): 18 + 8, the icon at the start.
-    // A filter chip's trailing button (FLO-259) takes the same place and target.
+    // A filter chip's trailing button takes the same place and target.
     &__remove, &__trailing-action {
         width: calc(#{v.chip("icon-size")} + 8px);
         padding: 0;
@@ -117,7 +117,7 @@ $container: "#{base.$prefix}-chips";
     // Only under --motion, which the chip sets on its first change after it was made:
     // @starting-style also applies to an element's first render, so without it every
     // chip grew its icons on page load. A chip appears finished and animates what
-    // changes after. FLO-256 follow-up.
+    // changes after.
     &--motion &__action {
         transition: m.spring(padding-inline-start, fast-spatial), m.spring(padding-inline-end, fast-spatial);
     }
@@ -171,7 +171,7 @@ $container: "#{base.$prefix}-chips";
     &:is(:has(:focus-visible), :focus-visible):not(.#{$component}--disabled):not(.#{$component}--selected):not(.#{$component}--elevated):not(.#{$component}--pointer-focus) { outline-color: t.color("on-surface-variant"); }
     &--assist:is(:has(:focus-visible), :focus-visible):not(.#{$component}--disabled):not(.#{$component}--elevated):not(.#{$component}--pointer-focus) { outline-color: t.color("on-surface"); }
     // A focused cell draws the focus ring itself: its outline is the chip's stroke, so
-    // the ring is a ::before 2dp outside the chip, 3dp wide. FLO-261.
+    // the ring is a ::before 2dp outside the chip, 3dp wide.
     &:focus-visible:not(.#{$component}--pointer-focus)::before {
         content: "";
         position: absolute;
@@ -190,13 +190,13 @@ $container: "#{base.$prefix}-chips";
         opacity: 0;
     }
     &:hover:not(.#{$component}--disabled)::after { opacity: v.state("hover-state-layer-opacity"); }
-    // Keyboard focus only: a click leaves no focus layer (FLO-256).
+    // Keyboard focus only: a click leaves no focus layer.
     &:is(:has(:focus-visible), :focus-visible):not(.#{$component}--disabled):not(.#{$component}--pointer-focus)::after { opacity: v.state("focus-state-layer-opacity"); }
-    // A press on a rippled action is the ripple's to draw (FLO-260); the remove and
+    // A press on a rippled action is the ripple's to draw; the remove and
     // trailing buttons have none, so a press on them keeps the layer.
     &:active:not(.#{$component}--disabled):not(:has(> .#{$component}__action:active > .#{base.$prefix}-ripple))::after { opacity: v.state("pressed-state-layer-opacity"); }
     // Dragged (Compose DraggedContainerElevation Level4, DraggedStateLayerOpacity),
-    // set while an app drags a draggable chip. FLO-259.
+    // set while an app drags a draggable chip.
     &--dragged { box-shadow: f.get-elevation(4); }
     &--dragged:not(.#{$component}--disabled)::after { opacity: v.state("dragged-state-layer-opacity"); }
     &--disabled {

package/src/styles/components/_datepicker.scss

@@ -13,7 +13,7 @@ $component: '#{base.$prefix}-datepicker';
   width: 100%;
   max-width: 360px;
   // Where it shrinks to fit (an element's host), 280px as the text field,
-  // not its input's platform-dependent width (FLO-293).
+  // not its input's platform-dependent width.
   contain: inline-size;
   contain-intrinsic-inline-size: v.text-field('width');
   color: t.color('on-surface');
@@ -46,7 +46,6 @@ $component: '#{base.$prefix}-datepicker';
   &--modal { position: fixed; inset: 0; margin: auto; }
   // Full screen (m3.material.io: recommended on compact screens; the range picker's
   // form): the whole viewport, no corners, level 0 (range-selection.container tokens).
-  // FLO-276.
   &--fullscreen {
     width: 100%; max-width: none; height: 100%; max-height: none;
     border-radius: 0; box-shadow: none; overflow: hidden;
@@ -60,7 +59,7 @@ $component: '#{base.$prefix}-datepicker';
   }
   &__list { flex: 1; min-height: 0; position: relative; overflow-y: auto; overscroll-behavior: contain; }
   &__subhead { @include m.typography('title-small'); color: t.color('on-surface-variant'); padding: 20px 24px 8px; }
-  // Docked: corner-large (16dp), where the dialogs are extra-large. FLO-277.
+  // Docked: corner-large (16dp), where the dialogs are extra-large.
   &--docked { border-radius: v.shape('large'); }
   &--docked { position: absolute; inset: auto; top: 100%; inset-inline-start: 0; margin: 8px 0 0; z-index: v.z-index('dropdown'); }
   &__content { display: flex; flex-direction: column; }
@@ -88,10 +87,10 @@ $component: '#{base.$prefix}-datepicker';
   &__trigger, &__mode-toggle, &__prev, &__next, &__close { display: inline-flex; align-items: center; justify-content: center; }
   &--animate[open] { animation: #{$component}-appear v.motion('duration-short3') v.motion('easing-standard'); }
   @media (prefers-reduced-motion: reduce) { &--animate[open] { animation: none; } }
-  // No bottom padding: the modal is Compose's 568dp, the footer included. FLO-277.
+  // No bottom padding: the modal is Compose's 568dp, the footer included.
   &__days { padding: 0 var(--#{$component}-grid-inset); }
   // The months' scroll-snapping track: one month per page, no visible scrollbar.
-  // Swipe, trackpad and wheel paging are the browser's own. FLO-274.
+  // Swipe, trackpad and wheel paging are the browser's own.
   &__track {
     display: flex; overflow-x: auto; overscroll-behavior-x: contain;
     scroll-snap-type: x mandatory; scrollbar-width: none;
@@ -104,7 +103,7 @@ $component: '#{base.$prefix}-datepicker';
   // The in-range band: a 40dp secondary-container strip, starting and ending at the
   // centre of the endpoint circles, square, under the selection (Compose's
   // drawRangeBackground); it was rounded to the cell edge. In-range days read
-  // on-secondary-container. FLO-277.
+  // on-secondary-container.
   &__cell--range {
     position: relative;
     background: linear-gradient(transparent 4px, t.color('secondary-container') 4px, t.color('secondary-container') 44px, transparent 44px) no-repeat;
@@ -129,7 +128,7 @@ $component: '#{base.$prefix}-datepicker';
     @include m.typography('body-large');
     // ::before is the 40dp selection (fill, today's ring); ::after is the state layer
     // above it: on-surface-variant, on-primary on the selected day, at 0.08 hover and
-    // 0.10 focus and pressed, with md.comp.focus-ring 2dp outside it. FLO-277.
+    // 0.10 focus and pressed, with md.comp.focus-ring 2dp outside it.
     &::before, &::after { content: ''; position: absolute; z-index: -1; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; }
     --#{$component}-day-layer: #{t.color('on-surface-variant')};
     &:hover:not(:disabled)::after { background: color-mix(in srgb, var(--#{$component}-day-layer) #{v.state('hover-state-layer-opacity') * 100%}, transparent); }
@@ -143,7 +142,7 @@ $component: '#{base.$prefix}-datepicker';
   }
   &__months, &__years { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; padding: 16px 24px; }
   // The year list scrolls vertically within the calendar's own height (a weekday row
-  // and six weeks), so the picker keeps its size. FLO-275.
+  // and six weeks), so the picker keeps its size.
   &__years { position: relative; box-sizing: border-box; height: 336px; overflow-y: auto; overscroll-behavior: contain; }
   &__month, &__year {
     position: relative; isolation: isolate; min-width: 0; height: 48px; border: 0; background: transparent;
@@ -156,7 +155,7 @@ $component: '#{base.$prefix}-datepicker';
   &__fields { display: grid; gap: 16px; padding: 24px; }
   &__field { display: flex; flex-direction: column; }
   &__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 4px 12px; }
-  // The chevrons point the way the months go: mirrored right to left. FLO-277.
+  // The chevrons point the way the months go: mirrored right to left.
   &__prev svg, &__next svg { &:dir(rtl) { transform: scaleX(-1); } }
   &__cancel, &__confirm, &__save { @include m.typography('label-large'); padding: 0 12px; color: t.color('primary'); }
   &__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

package/src/styles/components/_dialog.scss

@@ -327,7 +327,7 @@ dialog.#{$component} {
             height: 24px;
         }
 
-        // 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.
         // m3.material.io, Density: "The default target size should be at least
         // 48x48 CSS pixels".

package/src/styles/components/_drawer.scss

@@ -399,7 +399,7 @@ $default-width: 360px;
         &:active:not([disabled]) {
             color: t.color("on-surface");
 
-            // A rippled item leaves the press to its ripple (FLO-260).
+            // A rippled item leaves the press to its ripple.
             &:not(:has(> .#{base.$prefix}-ripple))::before {
                 opacity: v.state("pressed-state-layer-opacity");
             }

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

@@ -136,7 +136,7 @@ $swap: 48ms;
     // Half the close button, not the full-shape token: the corner lerps from
     // the FAB's 16/20/28dp to 28dp (Compose FabFinalCornerRadius). Towards
     // 9999px it went round in one frame, and the spring's undershoot on
-    // closing took it below 0, a square corner (FLO-348).
+    // closing took it below 0, a square corner.
     border-radius: 28px;
     background-color: var(--#{$component}-close);
     color: var(--#{$component}-on-close);

package/src/styles/components/_icon-button.scss

@@ -201,7 +201,7 @@ $widths: (
         opacity: 0.1;
     }
 
-    // Pressed state layer (10%), left to the ripple when there is one (FLO-260)
+    // Pressed state layer (10%), left to the ripple when there is one
     &:active:not(:has(> .#{base.$prefix}-ripple))::before {
         opacity: 0.1;
     }
@@ -331,25 +331,43 @@ $widths: (
         }
     }
 
-    // Shape morph on press - both round and square morph to pressed radius
+    // Shape morph on press - both round and square morph to pressed radius.
+    // A container can keep the resting shape instead (a toolbar does: see
+    // the toolbar rule in _toolbar.scss) through the icon button's own
+    // override, which an explicit --…-button-shape-pressed still beats.
     &:active {
         &.#{$component}--round {
-            border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("s", pressed-radius));
+            border-radius: var(
+                --#{base.$prefix}-button-shape-pressed,
+                var(--#{base.$prefix}-icon-button-shape-pressed, get-size("s", pressed-radius))
+            );
 
             &.#{$component}--xs {
-                border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("xs", pressed-radius));
+                border-radius: var(
+                    --#{base.$prefix}-button-shape-pressed,
+                    var(--#{base.$prefix}-icon-button-shape-pressed, get-size("xs", pressed-radius))
+                );
             }
 
             &.#{$component}--m {
-                border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("m", pressed-radius));
+                border-radius: var(
+                    --#{base.$prefix}-button-shape-pressed,
+                    var(--#{base.$prefix}-icon-button-shape-pressed, get-size("m", pressed-radius))
+                );
             }
 
             &.#{$component}--l {
-                border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("l", pressed-radius));
+                border-radius: var(
+                    --#{base.$prefix}-button-shape-pressed,
+                    var(--#{base.$prefix}-icon-button-shape-pressed, get-size("l", pressed-radius))
+                );
             }
 
             &.#{$component}--xl {
-                border-radius: var(--#{base.$prefix}-button-shape-pressed, get-size("xl", pressed-radius));
+                border-radius: var(
+                    --#{base.$prefix}-button-shape-pressed,
+                    var(--#{base.$prefix}-icon-button-shape-pressed, get-size("xl", pressed-radius))
+                );
             }
         }
 
@@ -492,26 +510,45 @@ $widths: (
         // Shape morphs on selection (handled by selected class)
     }
 
-    // Selected state - shape morphs (round becomes square, square becomes round)
+    // Selected state - shape morphs (round becomes square, square becomes
+    // round). Inside a toolbar the morph stays out: the toolbar pins the
+    // round radius through the icon button's own override (see the toolbar
+    // rule in _toolbar.scss), which an explicit
+    // --…-button-shape-selected still beats.
     &--selected {
         // Round buttons become square when selected
         &.#{$component}--round:not(:active) {
-            border-radius: var(--#{base.$prefix}-button-shape-selected, get-size("s", square-radius));
+            border-radius: var(
+                --#{base.$prefix}-button-shape-selected,
+                var(--#{base.$prefix}-icon-button-shape-selected, get-size("s", square-radius))
+            );
 
             &.#{$component}--xs {
-                border-radius: var(--#{base.$prefix}-button-shape-selected, get-size("xs", square-radius));
+                border-radius: var(
+                    --#{base.$prefix}-button-shape-selected,
+                    var(--#{base.$prefix}-icon-button-shape-selected, get-size("xs", square-radius))
+                );
             }
 
             &.#{$component}--m {
-                border-radius: var(--#{base.$prefix}-button-shape-selected, get-size("m", square-radius));
+                border-radius: var(
+                    --#{base.$prefix}-button-shape-selected,
+                    var(--#{base.$prefix}-icon-button-shape-selected, get-size("m", square-radius))
+                );
             }
 
             &.#{$component}--l {
-                border-radius: var(--#{base.$prefix}-button-shape-selected, get-size("l", square-radius));
+                border-radius: var(
+                    --#{base.$prefix}-button-shape-selected,
+                    var(--#{base.$prefix}-icon-button-shape-selected, get-size("l", square-radius))
+                );
             }
 
             &.#{$component}--xl {
-                border-radius: var(--#{base.$prefix}-button-shape-selected, get-size("xl", square-radius));
+                border-radius: var(
+                    --#{base.$prefix}-button-shape-selected,
+                    var(--#{base.$prefix}-icon-button-shape-selected, get-size("xl", square-radius))
+                );
             }
         }
 

package/src/styles/components/_menu.scss

@@ -313,7 +313,6 @@ $component: "#{$prefix}-menu";
         height: 1px;
         // The list is a flex column: in a menu that scrolls, a divider that
         // may shrink is the one item without a minimum, and collapses to 0
-        // (FLO-273)
         flex-shrink: 0;
         margin: 8px 0;
         background-color: t.color("outline-variant");

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

@@ -3,7 +3,7 @@
 @use '../abstract/mixins' as m;
 @use '../abstract/variables' as v;
 
-// M3 Expressive navigation bar (FLO-305): Compose ShortNavigationBar with
+// M3 Expressive navigation bar: Compose ShortNavigationBar with
 // NavigationBarTokens, NavigationBarVerticalItemTokens and
 // NavigationBarHorizontalItemTokens (v0_11_0); MDC-Android BottomNavigation as a
 // cross-check. 64dp tall, surface container, no elevation (ShortNavigationBar