mtrl 0.10.3 → 0.10.5

package/dist/themes/winter.css

@@ -1,2 +1,2 @@
-/*! mtrl v0.10.3 | MIT */
-[data-theme=winter]{--mtrl-sys-color-primary: #406374;--mtrl-sys-color-on-primary: #ffffff;--mtrl-sys-color-primary-container: #c1e8fc;--mtrl-sys-color-on-primary-container: #001f29;--mtrl-sys-color-secondary: #4a626e;--mtrl-sys-color-on-secondary: #ffffff;--mtrl-sys-color-secondary-container: #cde6f5;--mtrl-sys-color-on-secondary-container: #061e28;--mtrl-sys-color-tertiary: #5d5b7d;--mtrl-sys-color-on-tertiary: #ffffff;--mtrl-sys-color-tertiary-container: #e2dfff;--mtrl-sys-color-on-tertiary-container: #191836;--mtrl-sys-color-surface: #fafcff;--mtrl-sys-color-surface-dim: #dae4e9;--mtrl-sys-color-surface-bright: #fafcff;--mtrl-sys-color-surface-container-lowest: #ffffff;--mtrl-sys-color-surface-container-low: #f5f8fb;--mtrl-sys-color-surface-container: #eff3f6;--mtrl-sys-color-surface-container-high: #e9edf0;--mtrl-sys-color-surface-container-highest: #e3e7ea;--mtrl-sys-color-on-surface: #191c1e;--mtrl-sys-color-on-surface-variant: #40484c;--mtrl-sys-color-outline: #70787d;--mtrl-sys-color-outline-variant: #c0c8cc;--mtrl-sys-color-inverse-surface: #2c3134;--mtrl-sys-color-inverse-on-surface: #edf1f4;--mtrl-sys-color-inverse-primary: #a8ccdf;--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: #007B5A;--mtrl-sys-color-on-success: #FFFFFF;--mtrl-sys-color-warning: #DD6D06;--mtrl-sys-color-on-warning: #FFFFFF;--mtrl-sys-color-info: #0061A4;--mtrl-sys-color-on-info: #FFFFFF}[data-theme=winter][data-theme-mode=dark]{--mtrl-sys-color-primary: #73d0ee;--mtrl-sys-color-on-primary: #003545;--mtrl-sys-color-primary-container: #224c5b;--mtrl-sys-color-on-primary-container: #c1e8fc;--mtrl-sys-color-secondary: #b1cad9;--mtrl-sys-color-on-secondary: #1d343f;--mtrl-sys-color-secondary-container: #334b56;--mtrl-sys-color-on-secondary-container: #cde6f5;--mtrl-sys-color-tertiary: #c6c3eb;--mtrl-sys-color-on-tertiary: #2e2d4d;--mtrl-sys-color-tertiary-container: #454364;--mtrl-sys-color-on-tertiary-container: #e2dfff;--mtrl-sys-color-surface: #191c1e;--mtrl-sys-color-surface-dim: #101416;--mtrl-sys-color-surface-bright: #35393c;--mtrl-sys-color-surface-container-lowest: #0d0e10;--mtrl-sys-color-surface-container-low: #191c1e;--mtrl-sys-color-surface-container: #1d2022;--mtrl-sys-color-surface-container-high: #272a2d;--mtrl-sys-color-surface-container-highest: #323539;--mtrl-sys-color-on-surface: #e1e3e5;--mtrl-sys-color-on-surface-variant: #c0c8cc;--mtrl-sys-color-outline: #8a9297;--mtrl-sys-color-outline-variant: #40484c;--mtrl-sys-color-inverse-surface: #e1e3e5;--mtrl-sys-color-inverse-on-surface: #2c3134;--mtrl-sys-color-inverse-primary: #406374;--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: #85CFA9;--mtrl-sys-color-on-success: #00392D;--mtrl-sys-color-warning: #FFB95C;--mtrl-sys-color-on-warning: #3F2200;--mtrl-sys-color-info: #99CBFF;--mtrl-sys-color-on-info: #003060}
+/*! mtrl v0.10.5 | MIT */
+[data-theme=winter]{--mtrl-sys-color-primary: #406374;--mtrl-sys-color-on-primary: #ffffff;--mtrl-sys-color-primary-container: #c1e8fc;--mtrl-sys-color-on-primary-container: #001f29;--mtrl-sys-color-secondary: #4a626e;--mtrl-sys-color-on-secondary: #ffffff;--mtrl-sys-color-secondary-container: #cde6f5;--mtrl-sys-color-on-secondary-container: #061e28;--mtrl-sys-color-tertiary: #5d5b7d;--mtrl-sys-color-on-tertiary: #ffffff;--mtrl-sys-color-tertiary-container: #e2dfff;--mtrl-sys-color-on-tertiary-container: #191836;--mtrl-sys-color-surface: #fafcff;--mtrl-sys-color-surface-dim: #dae4e9;--mtrl-sys-color-surface-bright: #fafcff;--mtrl-sys-color-surface-container-lowest: #ffffff;--mtrl-sys-color-surface-container-low: #f5f8fb;--mtrl-sys-color-surface-container: #eff3f6;--mtrl-sys-color-surface-container-high: #e9edf0;--mtrl-sys-color-surface-container-highest: #e3e7ea;--mtrl-sys-color-on-surface: #191c1e;--mtrl-sys-color-on-surface-variant: #40484c;--mtrl-sys-color-outline: #70787d;--mtrl-sys-color-outline-variant: #c0c8cc;--mtrl-sys-color-inverse-surface: #2c3134;--mtrl-sys-color-inverse-on-surface: #edf1f4;--mtrl-sys-color-inverse-primary: #a8ccdf;--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}[data-theme=winter][data-theme-mode=dark]{--mtrl-sys-color-primary: #73d0ee;--mtrl-sys-color-on-primary: #003545;--mtrl-sys-color-primary-container: #224c5b;--mtrl-sys-color-on-primary-container: #c1e8fc;--mtrl-sys-color-secondary: #b1cad9;--mtrl-sys-color-on-secondary: #1d343f;--mtrl-sys-color-secondary-container: #334b56;--mtrl-sys-color-on-secondary-container: #cde6f5;--mtrl-sys-color-tertiary: #c6c3eb;--mtrl-sys-color-on-tertiary: #2e2d4d;--mtrl-sys-color-tertiary-container: #454364;--mtrl-sys-color-on-tertiary-container: #e2dfff;--mtrl-sys-color-surface: #191c1e;--mtrl-sys-color-surface-dim: #101416;--mtrl-sys-color-surface-bright: #35393c;--mtrl-sys-color-surface-container-lowest: #0d0e10;--mtrl-sys-color-surface-container-low: #191c1e;--mtrl-sys-color-surface-container: #1d2022;--mtrl-sys-color-surface-container-high: #272a2d;--mtrl-sys-color-surface-container-highest: #323539;--mtrl-sys-color-on-surface: #e1e3e5;--mtrl-sys-color-on-surface-variant: #c0c8cc;--mtrl-sys-color-outline: #8a9297;--mtrl-sys-color-outline-variant: #40484c;--mtrl-sys-color-inverse-surface: #e1e3e5;--mtrl-sys-color-inverse-on-surface: #2c3134;--mtrl-sys-color-inverse-primary: #406374;--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}[data-theme=winter]: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;--mtrl-sys-color-surface: #f5fafd;--mtrl-sys-color-surface-bright: #f5fafd;--mtrl-sys-color-surface-variant: #dce4e9;--mtrl-sys-color-inverse-primary: #8ad0ee}[data-theme=winter]:is([data-theme-contrast=medium],[data-theme-contrast=high])[data-theme-mode=dark]{--mtrl-sys-color-primary-fixed: #bbe9ff;--mtrl-sys-color-primary-fixed-dim: #8ad0ee;--mtrl-sys-color-secondary-fixed: #cde6f5;--mtrl-sys-color-secondary-fixed-dim: #b1cad8;--mtrl-sys-color-tertiary-fixed: #e3dfff;--mtrl-sys-color-tertiary-fixed-dim: #c6c2ea;--mtrl-sys-color-surface: #0f1417;--mtrl-sys-color-surface-dim: #0f1417;--mtrl-sys-color-surface-variant: #40484c;--mtrl-sys-color-on-surface: #ffffff;--mtrl-sys-color-inverse-surface: #dee3e6;--mtrl-sys-color-inverse-primary: #004e64}[data-theme=winter][data-theme-contrast=medium]:not([data-theme-mode=dark]){--mtrl-sys-color-error: #740006;--mtrl-sys-color-error-container: #cf2c27;--mtrl-sys-color-primary: #003b4d;--mtrl-sys-color-primary-container: #287590;--mtrl-sys-color-secondary: #213944;--mtrl-sys-color-secondary-container: #58707d;--mtrl-sys-color-tertiary: #343352;--mtrl-sys-color-tertiary-container: #6c698c;--mtrl-sys-color-primary-fixed: #287590;--mtrl-sys-color-primary-fixed-dim: #005c76;--mtrl-sys-color-secondary-fixed: #58707d;--mtrl-sys-color-secondary-fixed-dim: #405864;--mtrl-sys-color-tertiary-fixed: #6c698c;--mtrl-sys-color-tertiary-fixed-dim: #535173;--mtrl-sys-color-surface-dim: #c2c7ca;--mtrl-sys-color-surface-container-low: #f0f4f8;--mtrl-sys-color-surface-container: #e4e9ec;--mtrl-sys-color-surface-container-high: #d9dde1;--mtrl-sys-color-surface-container-highest: #cdd2d6;--mtrl-sys-color-on-surface: #0d1214;--mtrl-sys-color-on-surface-variant: #2f373b;--mtrl-sys-color-outline: #4c5458;--mtrl-sys-color-outline-variant: #666e73;--mtrl-sys-color-inverse-on-surface: #edf1f5}[data-theme=winter][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: #abe5ff;--mtrl-sys-color-on-primary: #002a37;--mtrl-sys-color-primary-container: #529ab6;--mtrl-sys-color-on-primary-container: #000000;--mtrl-sys-color-secondary: #c7e0ee;--mtrl-sys-color-on-secondary: #0f2933;--mtrl-sys-color-secondary-container: #7c94a1;--mtrl-sys-color-on-secondary-container: #000000;--mtrl-sys-color-tertiary: #dcd8ff;--mtrl-sys-color-on-tertiary: #242241;--mtrl-sys-color-tertiary-container: #908db2;--mtrl-sys-color-on-tertiary-container: #000000;--mtrl-sys-color-on-primary-fixed: #00131b;--mtrl-sys-color-on-primary-fixed-variant: #003b4d;--mtrl-sys-color-on-secondary-fixed: #00131c;--mtrl-sys-color-on-secondary-fixed-variant: #213944;--mtrl-sys-color-on-tertiary-fixed: #0f0d2b;--mtrl-sys-color-on-tertiary-fixed-variant: #343352;--mtrl-sys-color-surface-bright: #404548;--mtrl-sys-color-surface-container-lowest: #04080a;--mtrl-sys-color-surface-container-low: #191e21;--mtrl-sys-color-surface-container: #23292b;--mtrl-sys-color-surface-container-high: #2e3336;--mtrl-sys-color-surface-container-highest: #393e41;--mtrl-sys-color-on-surface-variant: #d6dde2;--mtrl-sys-color-outline: #abb3b8;--mtrl-sys-color-outline-variant: #899196;--mtrl-sys-color-inverse-on-surface: #262b2d}[data-theme=winter][data-theme-contrast=high]:not([data-theme-mode=dark]){--mtrl-sys-color-error: #600004;--mtrl-sys-color-error-container: #98000a;--mtrl-sys-color-primary: #00313f;--mtrl-sys-color-primary-container: #005066;--mtrl-sys-color-secondary: #162f3a;--mtrl-sys-color-secondary-container: #354c58;--mtrl-sys-color-tertiary: #2a2948;--mtrl-sys-color-tertiary-container: #474666;--mtrl-sys-color-primary-fixed: #005066;--mtrl-sys-color-primary-fixed-dim: #003848;--mtrl-sys-color-secondary-fixed: #354c58;--mtrl-sys-color-secondary-fixed-dim: #1d3641;--mtrl-sys-color-tertiary-fixed: #474666;--mtrl-sys-color-tertiary-fixed-dim: #312f4e;--mtrl-sys-color-surface-dim: #b5b9bd;--mtrl-sys-color-surface-container-low: #edf1f5;--mtrl-sys-color-surface-container: #dee3e6;--mtrl-sys-color-surface-container-high: #d0d5d8;--mtrl-sys-color-surface-container-highest: #c2c7ca;--mtrl-sys-color-on-surface: #000000;--mtrl-sys-color-on-surface-variant: #000000;--mtrl-sys-color-outline: #252d31;--mtrl-sys-color-outline-variant: #424a4e;--mtrl-sys-color-inverse-on-surface: #ffffff}[data-theme=winter][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: #ddf3ff;--mtrl-sys-color-on-primary: #000000;--mtrl-sys-color-primary-container: #86ccea;--mtrl-sys-color-on-primary-container: #000d14;--mtrl-sys-color-secondary: #def3ff;--mtrl-sys-color-on-secondary: #000000;--mtrl-sys-color-secondary-container: #adc6d4;--mtrl-sys-color-on-secondary-container: #000d14;--mtrl-sys-color-tertiary: #f2eeff;--mtrl-sys-color-on-tertiary: #000000;--mtrl-sys-color-tertiary-container: #c2bfe6;--mtrl-sys-color-on-tertiary-container: #090725;--mtrl-sys-color-on-primary-fixed: #000000;--mtrl-sys-color-on-primary-fixed-variant: #00131b;--mtrl-sys-color-on-secondary-fixed: #000000;--mtrl-sys-color-on-secondary-fixed-variant: #00131c;--mtrl-sys-color-on-tertiary-fixed: #000000;--mtrl-sys-color-on-tertiary-fixed-variant: #0f0d2b;--mtrl-sys-color-surface-bright: #4c5154;--mtrl-sys-color-surface-container-lowest: #000000;--mtrl-sys-color-surface-container-low: #1b2023;--mtrl-sys-color-surface-container: #2c3134;--mtrl-sys-color-surface-container-high: #373c3f;--mtrl-sys-color-surface-container-highest: #42474a;--mtrl-sys-color-on-surface-variant: #ffffff;--mtrl-sys-color-outline: #e9f1f6;--mtrl-sys-color-outline-variant: #bcc4c9;--mtrl-sys-color-inverse-on-surface: #000000}@media(prefers-contrast: more){[data-theme=winter]: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: #00313f;--mtrl-sys-color-primary-container: #005066;--mtrl-sys-color-on-primary-container: #ffffff;--mtrl-sys-color-secondary: #162f3a;--mtrl-sys-color-secondary-container: #354c58;--mtrl-sys-color-on-secondary-container: #ffffff;--mtrl-sys-color-tertiary: #2a2948;--mtrl-sys-color-tertiary-container: #474666;--mtrl-sys-color-on-tertiary-container: #ffffff;--mtrl-sys-color-primary-fixed: #005066;--mtrl-sys-color-primary-fixed-dim: #003848;--mtrl-sys-color-on-primary-fixed: #ffffff;--mtrl-sys-color-on-primary-fixed-variant: #ffffff;--mtrl-sys-color-secondary-fixed: #354c58;--mtrl-sys-color-secondary-fixed-dim: #1d3641;--mtrl-sys-color-on-secondary-fixed: #ffffff;--mtrl-sys-color-on-secondary-fixed-variant: #ffffff;--mtrl-sys-color-tertiary-fixed: #474666;--mtrl-sys-color-tertiary-fixed-dim: #312f4e;--mtrl-sys-color-on-tertiary-fixed: #ffffff;--mtrl-sys-color-on-tertiary-fixed-variant: #ffffff;--mtrl-sys-color-surface: #f5fafd;--mtrl-sys-color-surface-dim: #b5b9bd;--mtrl-sys-color-surface-bright: #f5fafd;--mtrl-sys-color-surface-variant: #dce4e9;--mtrl-sys-color-surface-container-low: #edf1f5;--mtrl-sys-color-surface-container: #dee3e6;--mtrl-sys-color-surface-container-high: #d0d5d8;--mtrl-sys-color-surface-container-highest: #c2c7ca;--mtrl-sys-color-on-surface: #000000;--mtrl-sys-color-on-surface-variant: #000000;--mtrl-sys-color-outline: #252d31;--mtrl-sys-color-outline-variant: #424a4e;--mtrl-sys-color-inverse-on-surface: #ffffff;--mtrl-sys-color-inverse-primary: #8ad0ee}[data-theme=winter]: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: #ddf3ff;--mtrl-sys-color-on-primary: #000000;--mtrl-sys-color-primary-container: #86ccea;--mtrl-sys-color-on-primary-container: #000d14;--mtrl-sys-color-secondary: #def3ff;--mtrl-sys-color-on-secondary: #000000;--mtrl-sys-color-secondary-container: #adc6d4;--mtrl-sys-color-on-secondary-container: #000d14;--mtrl-sys-color-tertiary: #f2eeff;--mtrl-sys-color-on-tertiary: #000000;--mtrl-sys-color-tertiary-container: #c2bfe6;--mtrl-sys-color-on-tertiary-container: #090725;--mtrl-sys-color-primary-fixed: #bbe9ff;--mtrl-sys-color-primary-fixed-dim: #8ad0ee;--mtrl-sys-color-on-primary-fixed: #000000;--mtrl-sys-color-on-primary-fixed-variant: #00131b;--mtrl-sys-color-secondary-fixed: #cde6f5;--mtrl-sys-color-secondary-fixed-dim: #b1cad8;--mtrl-sys-color-on-secondary-fixed: #000000;--mtrl-sys-color-on-secondary-fixed-variant: #00131c;--mtrl-sys-color-tertiary-fixed: #e3dfff;--mtrl-sys-color-tertiary-fixed-dim: #c6c2ea;--mtrl-sys-color-on-tertiary-fixed: #000000;--mtrl-sys-color-on-tertiary-fixed-variant: #0f0d2b;--mtrl-sys-color-surface: #0f1417;--mtrl-sys-color-surface-dim: #0f1417;--mtrl-sys-color-surface-bright: #4c5154;--mtrl-sys-color-surface-variant: #40484c;--mtrl-sys-color-surface-container-lowest: #000000;--mtrl-sys-color-surface-container-low: #1b2023;--mtrl-sys-color-surface-container: #2c3134;--mtrl-sys-color-surface-container-high: #373c3f;--mtrl-sys-color-surface-container-highest: #42474a;--mtrl-sys-color-on-surface: #ffffff;--mtrl-sys-color-on-surface-variant: #ffffff;--mtrl-sys-color-outline: #e9f1f6;--mtrl-sys-color-outline-variant: #bcc4c9;--mtrl-sys-color-inverse-surface: #dee3e6;--mtrl-sys-color-inverse-on-surface: #000000;--mtrl-sys-color-inverse-primary: #004e64}}

package/dist/vue/dialog.d.ts

@@ -1,3 +1,6 @@
+import "mtrl/elements/css/progress";
+import "mtrl/elements/css/button";
+import "mtrl/elements/css/divider";
 import "mtrl/elements/css/dialog";
 import { type DialogSpec, type DialogElement } from "../elements/dialog.js";
 import { type MComponent } from "./create.js";

package/dist/vue/dialog.js

@@ -1,5 +1,8 @@
 // src/vue/dialog.ts
 // Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+import "mtrl/elements/css/progress";
+import "mtrl/elements/css/button";
+import "mtrl/elements/css/divider";
 import "mtrl/elements/css/dialog";
 import { dialogElement, defineDialog } from "../elements/dialog.js";
 import { createComponent } from "./create.js";

package/dist/vue/index.d.ts

@@ -18,7 +18,10 @@ export { MFab } from "./fab.js";
 export { MExtendedFab } from "./extended-fab.js";
 export { MCheckbox } from "./checkbox.js";
 export { MSlider } from "./slider.js";
-export { MTextfield } from "./textfield.js";
+export { MTextfield as MTextField } from "./textfield.js";
+export { 
+/** @deprecated Use MTextField: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+MTextfield, } from "./textfield.js";
 export { MRadios } from "./radios.js";
 export { MNavigationRail } from "./navigation-rail.js";
 export { MDrawer } from "./drawer.js";

package/dist/vue/index.js

@@ -11,7 +11,8 @@ export { MFab } from "./fab.js";
 export { MExtendedFab } from "./extended-fab.js";
 export { MCheckbox } from "./checkbox.js";
 export { MSlider } from "./slider.js";
-export { MTextfield } from "./textfield.js";
+export { MTextfield as MTextField } from "./textfield.js";
+export { MTextfield, } from "./textfield.js";
 export { MRadios } from "./radios.js";
 export { MNavigationRail } from "./navigation-rail.js";
 export { MDrawer } from "./drawer.js";

package/package.json

@@ -1,23 +1,26 @@
 {
   "name": "mtrl",
-  "version": "0.10.3",
-  "description": "A functional TypeScript/JavaScript component library with composable architecture based on Material Design 3",
+  "version": "0.10.5",
+  "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",
   "keywords": [
-    "component",
-    "library",
-    "ui",
-    "user interface",
-    "typescript",
-    "functional",
-    "composable",
     "material design 3",
+    "material design",
+    "material 3",
     "md3",
-    "testing",
-    "jsdom",
-    "tested",
-    "type-safe"
+    "m3",
+    "material you",
+    "components",
+    "ui",
+    "web components",
+    "custom elements",
+    "typescript",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "design system"
   ],
   "sideEffects": [
     "**/*.css",

package/src/styles/abstract/_theme.scss

@@ -96,14 +96,14 @@ $mtrl-sys-shape: (
   --#{$prefix}-sys-color-error-container: #8C1D18;
   --#{$prefix}-sys-color-on-error-container: #F9DEDC;
   
-  --#{$prefix}-sys-color-success: #85CFA9;
-  --#{$prefix}-sys-color-on-success: #00392D;
+  --#{$prefix}-sys-color-success: #8CD6AF;
+  --#{$prefix}-sys-color-on-success: #003824;
   
   --#{$prefix}-sys-color-warning: #FFB95C;
-  --#{$prefix}-sys-color-on-warning: #3F2200;
+  --#{$prefix}-sys-color-on-warning: #462A00;
   
   --#{$prefix}-sys-color-info: #99CBFF;
-  --#{$prefix}-sys-color-on-info: #003060;
+  --#{$prefix}-sys-color-on-info: #003355;
 
   // Neutral colors
   --#{$prefix}-sys-color-surface: #1C1B1F;
@@ -151,10 +151,10 @@ $mtrl-sys-shape: (
   --#{$prefix}-sys-color-error-container: #F9DEDC;
   --#{$prefix}-sys-color-on-error-container: #410E0B;
   
-  --#{$prefix}-sys-color-success: #007B5A;
+  --#{$prefix}-sys-color-success: #006C4E;
   --#{$prefix}-sys-color-on-success: #FFFFFF;
   
-  --#{$prefix}-sys-color-warning: #DD6D06;
+  --#{$prefix}-sys-color-warning: #974800;
   --#{$prefix}-sys-color-on-warning: #FFFFFF;
   
   --#{$prefix}-sys-color-info: #0061A4;

package/src/styles/abstract/_variables.scss

@@ -438,7 +438,8 @@ $button-shape-tokens: (
   @return $fallback;
 }
 
-// Textfield configuration
+// Text field configuration. `$textfield` is the 0.10 name, deprecated for
+// `$text-field` (FLO-383) and removed in 1.0; it keeps working until then.
 $textfield: (
   // The width of a field the page does not size (TextFieldDefaults.MinWidth)
   'width': 280px,
@@ -453,8 +454,17 @@ $textfield: (
   'icon-size': 24px
 ) !default;
 
-// Add textfield function
-@function textfield($key) {
+// The text field's map, under the name 1.0 keeps (FLO-383): the same map as
+// `$textfield` unless a theme configures this one.
+$text-field: $textfield !default;
+
+/// A text field measurement: `v.text-field('height')`.
+@function text-field($key) {
   @if $key == 'border-radius' { @return shape('extra-small'); }
-  @return map.get($textfield, $key);
+  @return map.get($text-field, $key);
+}
+
+/// Deprecated: use `text-field()`. Removed in 1.0 (FLO-383).
+@function textfield($key) {
+  @return text-field($key);
 }

package/src/styles/components/_datepicker.scss

@@ -35,6 +35,8 @@ $component: '#{base.$prefix}-datepicker';
   &__help { color: t.color('on-surface-variant'); }
   &__error { color: t.color('error'); &:empty { display: none; } }
   &__calendar {
+    // The day grid's inline padding, shared by the range band's bleed into it.
+    --#{$component}-grid-inset: 12px;
     box-sizing: border-box; padding: 0; border: 0;
     width: 360px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px);
     overflow: auto; color: t.color('on-surface'); background: t.color('surface-container-high');
@@ -54,7 +56,7 @@ $component: '#{base.$prefix}-datepicker';
     .#{$component}__save { position: absolute; inset-inline-end: 12px; top: 8px; }
     .#{$component}__title { margin-bottom: 0; }
     .#{$component}__headline { @include m.typography('title-large'); }
-    .#{$component}__weekdays { padding: 0 12px; }
+    .#{$component}__weekdays { padding: 0 var(--#{$component}-grid-inset); }
   }
   &__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; }
@@ -87,7 +89,7 @@ $component: '#{base.$prefix}-datepicker';
   &--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.
-  &__days { padding: 0 12px; }
+  &__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.
   &__track {
@@ -104,12 +106,23 @@ $component: '#{base.$prefix}-datepicker';
   // drawRangeBackground); it was rounded to the cell edge. In-range days read
   // on-secondary-container. FLO-277.
   &__cell--range {
+    position: relative;
     background: linear-gradient(transparent 4px, t.color('secondary-container') 4px, t.color('secondary-container') 44px, transparent 44px) no-repeat;
     .#{$component}__day:not(.#{$component}__day--selected) { color: t.color('on-secondary-container'); }
   }
   &__cell--range-start { background-size: 50% 100%; background-position: 100% 0; &:dir(rtl) { background-position: 0 0; } }
   &__cell--range-end { background-size: 50% 100%; background-position: 0 0; &:dir(rtl) { background-position: 100% 0; } }
   &__cell--range-start#{&}__cell--range-end { background: none; }
+  // Where the range wraps to the next week, the band runs on through the grid's inline
+  // padding to the container edge, as m3.material.io's range picker draws it: the row
+  // it leaves to the end edge, the row it continues on from the start edge. Under the
+  // day by tree order: the day's own ::before and ::after are its selection and layer.
+  &__cell--range:is(:last-child:not(&__cell--range-end), :first-child:not(&__cell--range-start))::before {
+    content: ''; position: absolute; top: 4px; width: var(--#{$component}-grid-inset); height: 40px;
+    background: t.color('secondary-container');
+  }
+  &__cell--range:last-child::before { inset-inline-start: 100%; }
+  &__cell--range:first-child::before { inset-inline-end: 100%; }
   &__day {
     position: relative; isolation: isolate; width: 100%; height: 48px; padding: 0; border: 0;
     background: transparent; color: t.color('on-surface'); cursor: pointer;

package/src/styles/components/_textfield.scss

@@ -380,10 +380,11 @@ $component: "#{base.$prefix}-textfield";
         color: t.color("error");
     }
 
-    // Required indicator
+    // The required asterisk (FLO-301): 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 {
-        color: t.color("error");
-        margin-left: 4px;
+        color: inherit;
     }
 
     // Accessibility
@@ -411,11 +412,6 @@ $component: "#{base.$prefix}-textfield";
             transform-origin: right top;
         }
 
-        &__required {
-            margin-left: 0;
-            margin-right: 4px;
-        }
-
         &__prefix {
             left: auto;
             right: 16px;
@@ -1155,3 +1151,60 @@ $component: "#{base.$prefix}-textfield";
         }
     }
 }
+
+// ============================================================================
+// An interactive trailing icon (FLO-301)
+// ============================================================================
+// With `trailingIconLabel` the trailing icon is a button: M3 draws an
+// interactive trailing icon as an icon button, as Compose's trailing slot holds
+// an IconButton, so a 40dp round state layer centred on the 24dp icon and a 48dp
+// target. Last in the file, and two classes, so the variant and density rules
+// that place the decorative icon keep its centre but not its size.
+.#{$component}__trailing-icon.#{$component}__trailing-icon--button {
+    right: 4px;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    font: inherit;
+    cursor: pointer;
+    @include m.touch-target(48px);
+    // The mixin makes its host relative; the icon stays placed in the field
+    position: absolute;
+
+    // One state layer whose opacity the states set, as the icon button draws it
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background-color: currentColor;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &:hover:not(:disabled)::before {
+        opacity: 0.08;
+    }
+
+    &:focus-visible {
+        outline: 2px solid t.color("secondary");
+        outline-offset: 2px;
+    }
+
+    &:focus-visible::before,
+    &:active:not(:disabled)::before {
+        opacity: 0.1;
+    }
+
+    &:disabled {
+        cursor: default;
+    }
+
+    @include m.rtl {
+        right: auto;
+        left: 4px;
+    }
+}

package/src/styles/themes/_autumn.scss

@@ -1,4 +1,5 @@
 // src/styles/themes/_autumn.scss
+// Medium/high contrast: Tonal Spot from seed #795548, secondary from #a02a2a, tertiary from #4d6642.
 @use "../abstract/base" as *;
 @use "base-theme" as *;
 
@@ -116,3 +117,175 @@
         --#{$prefix}-sys-color-inverse-primary: #7a5649;
     }
 }
+
+// contrast roles: generated, do not edit
+@include create-theme-contrast("autumn", (
+    medium: (
+        light: (
+            error: #740006,
+            error-container: #cf2c27,
+            on-error-container: #ffffff,
+            primary: #5d260f,
+            primary-container: #a05a40,
+            on-primary-container: #ffffff,
+            secondary: #72040e,
+            secondary-container: #bf413e,
+            on-secondary-container: #ffffff,
+            tertiary: #253c1c,
+            tertiary-container: #5a744f,
+            on-tertiary-container: #ffffff,
+            primary-fixed: #a05a40,
+            primary-fixed-dim: #83432a,
+            on-primary-fixed: #ffffff,
+            on-primary-fixed-variant: #ffffff,
+            secondary-fixed: #bf413e,
+            secondary-fixed-dim: #9e2929,
+            on-secondary-fixed: #ffffff,
+            on-secondary-fixed-variant: #ffffff,
+            tertiary-fixed: #5a744f,
+            tertiary-fixed-dim: #435b38,
+            on-tertiary-fixed: #ffffff,
+            on-tertiary-fixed-variant: #ffffff,
+            surface: #fff8f6,
+            surface-dim: #d4c3be,
+            surface-bright: #fff8f6,
+            surface-variant: #f5ded6,
+            surface-container-low: #fff1ec,
+            surface-container: #f7e4df,
+            surface-container-high: #ebd9d4,
+            surface-container-highest: #dfcec9,
+            on-surface: #180f0c,
+            on-surface-variant: #41332e,
+            outline: #5f4f4a,
+            outline-variant: #7b6963,
+            inverse-surface: #392e2b,
+            inverse-on-surface: #ffede7,
+            inverse-primary: #ffb59a,
+        ),
+        dark: (
+            error: #ffd2cc,
+            on-error: #540003,
+            error-container: #ff5449,
+            on-error-container: #000000,
+            primary: #ffd3c4,
+            on-primary: #471602,
+            primary-container: #ca7d60,
+            on-primary-container: #000000,
+            secondary: #ffd2ce,
+            on-secondary: #540007,
+            secondary-container: #ef645e,
+            on-secondary-container: #000000,
+            tertiary: #c8e5b8,
+            on-tertiary: #152b0d,
+            tertiary-container: #7d9870,
+            on-tertiary-container: #000000,
+            primary-fixed-dim: #ffb59a,
+            on-primary-fixed: #260700,
+            on-primary-fixed-variant: #5d260f,
+            on-secondary-fixed: #2d0002,
+            on-secondary-fixed-variant: #72040e,
+            on-tertiary-fixed: #021500,
+            on-tertiary-fixed-variant: #253c1c,
+            surface: #1a110e,
+            surface-dim: #1a110e,
+            surface-bright: #4d423e,
+            surface-variant: #53433e,
+            surface-container-lowest: #0d0604,
+            surface-container-low: #251c18,
+            surface-container: #302622,
+            surface-container-high: #3b302d,
+            surface-container-highest: #463b37,
+            on-surface: #ffffff,
+            on-surface-variant: #eed8d0,
+            outline: #c2ada7,
+            outline-variant: #a08c86,
+            inverse-surface: #f1dfd9,
+            inverse-on-surface: #322824,
+            inverse-primary: #73371f,
+        ),
+    ),
+    high: (
+        light: (
+            error: #600004,
+            error-container: #98000a,
+            on-error-container: #ffffff,
+            primary: #4f1c06,
+            primary-container: #753820,
+            on-primary-container: #ffffff,
+            secondary: #600009,
+            secondary-container: #8e1c1f,
+            on-secondary-container: #ffffff,
+            tertiary: #1b3213,
+            tertiary-container: #374f2e,
+            on-tertiary-container: #ffffff,
+            primary-fixed: #753820,
+            primary-fixed-dim: #58220c,
+            on-primary-fixed: #ffffff,
+            on-primary-fixed-variant: #ffffff,
+            secondary-fixed: #8e1c1f,
+            secondary-fixed-dim: #6d000b,
+            on-secondary-fixed: #ffffff,
+            on-secondary-fixed-variant: #ffffff,
+            tertiary-fixed: #374f2e,
+            tertiary-fixed-dim: #213819,
+            on-tertiary-fixed: #ffffff,
+            on-tertiary-fixed-variant: #ffffff,
+            surface: #fff8f6,
+            surface-dim: #c6b5b0,
+            surface-bright: #fff8f6,
+            surface-variant: #f5ded6,
+            surface-container-low: #ffede7,
+            surface-container: #f1dfd9,
+            surface-container-high: #e2d1cb,
+            surface-container-highest: #d4c3be,
+            on-surface: #000000,
+            on-surface-variant: #000000,
+            outline: #362924,
+            outline-variant: #554641,
+            inverse-surface: #392e2b,
+            inverse-on-surface: #ffffff,
+            inverse-primary: #ffb59a,
+        ),
+        dark: (
+            error: #ffece9,
+            on-error: #000000,
+            error-container: #ffaea4,
+            on-error-container: #220001,
+            primary: #ffece6,
+            on-primary: #000000,
+            primary-container: #ffb093,
+            on-primary-container: #1c0400,
+            secondary: #ffecea,
+            on-secondary: #000000,
+            secondary-container: #ffaea7,
+            on-secondary-container: #220001,
+            tertiary: #dbf9ca,
+            on-tertiary: #000000,
+            tertiary-container: #afcb9f,
+            on-tertiary-container: #010f00,
+            primary-fixed-dim: #ffb59a,
+            on-primary-fixed: #000000,
+            on-primary-fixed-variant: #260700,
+            on-secondary-fixed: #000000,
+            on-secondary-fixed-variant: #2d0002,
+            on-tertiary-fixed: #000000,
+            on-tertiary-fixed-variant: #021500,
+            surface: #1a110e,
+            surface-dim: #1a110e,
+            surface-bright: #5a4d49,
+            surface-variant: #53433e,
+            surface-container-lowest: #000000,
+            surface-container-low: #271e1a,
+            surface-container: #392e2b,
+            surface-container-high: #443935,
+            surface-container-highest: #504440,
+            on-surface: #ffffff,
+            on-surface-variant: #ffffff,
+            outline: #ffece6,
+            outline-variant: #d4beb7,
+            inverse-surface: #f1dfd9,
+            inverse-on-surface: #000000,
+            inverse-primary: #73371f,
+        ),
+    ),
+));

package/src/styles/themes/_base-theme.scss

@@ -1,4 +1,5 @@
 // src/styles/themes/_base-theme.scss
+@use 'sass:map';
 @use '../abstract/base' as *;
 
 // Base theme definition with common properties and structure
@@ -8,34 +9,121 @@
   }
 }
 
+// Media queries cannot condition one member of a selector list. Emit high
+// values in both explicit and system activation rules so standard/inherited
+// tokens stay untouched when the system preference is off.
+@function contrast-scope($name) {
+  @if $name == "baseline" {
+    @return ':is([data-theme="baseline"], :root:not([data-theme]))';
+  }
+  @return '[data-theme="#{$name}"]';
+}
+
+@mixin contrast-values($tokens, $mode) {
+  @each $role, $value in map.get($tokens, $mode) {
+    --#{$prefix}-sys-color-#{$role}: #{$value};
+  }
+}
+
+@mixin contrast-modes($name, $tokens) {
+  // Light must not leak into dark when its unchanged roles are omitted.
+  &:not([data-theme-mode="dark"]) {
+    @if $name == "baseline" {
+      &[data-theme] {
+        @include contrast-values($tokens, light);
+      }
+    } @else {
+      @include contrast-values($tokens, light);
+    }
+  }
+  @if $name == "baseline" {
+    // Match baseline's standard palette: the unthemed root ignores the mode
+    // attribute, following only the OS scheme and the manual dark class.
+    @media not (prefers-color-scheme: dark) {
+      &:root:not([data-theme]):not(.dark-theme) {
+        @include contrast-values($tokens, light);
+      }
+    }
+    &[data-theme][data-theme-mode="dark"], &:root:not([data-theme]).dark-theme {
+      @include contrast-values($tokens, dark);
+    }
+    @media (prefers-color-scheme: dark) {
+      &:root:not([data-theme]):not(.dark-theme) {
+        @include contrast-values($tokens, dark);
+      }
+    }
+  } @else {
+    &[data-theme-mode="dark"] {
+      @include contrast-values($tokens, dark);
+    }
+  }
+}
+
+@mixin create-theme-contrast($name, $levels) {
+  $scope: contrast-scope($name);
+  $high: map.get($levels, high);
+  $shared: (light: (), dark: ());
+  $distinct: $levels;
+  @each $mode, $tokens in map.get($levels, medium) {
+    @each $role, $value in $tokens {
+      @if $value == map.get($high, $mode, $role) {
+        $shared: map.set($shared, $mode, $role, $value);
+        @each $level in (medium, high) {
+          $distinct: map.set($distinct, $level, $mode, map.remove(map.get($distinct, $level, $mode), $role));
+        }
+      }
+    }
+  }
+  #{$scope}:is([data-theme-contrast="medium"], [data-theme-contrast="high"]) {
+    @include contrast-modes($name, $shared);
+  }
+  @each $level, $tokens in $distinct {
+    #{$scope}[data-theme-contrast="#{$level}"] {
+      @include contrast-modes($name, $tokens);
+    }
+  }
+  @media (prefers-contrast: more) {
+    #{$scope}:not([data-theme-contrast]) {
+      @include contrast-modes($name, $high);
+    }
+  }
+}
+
 // Success, warning and info: not M3 scheme roles, so no scheme generates them.
 // Every theme takes these values, baseline included (FLO-329).
+// Each keeps its colour's HCT hue and chroma (material-color-utilities) at the
+// tones M3 uses for a role and its on-role: light tone 40 on 100, dark tone 80
+// on 20 (ColorSpec2021 primary / onPrimary). Those tones clear 4.5:1, so none
+// is shifted further (FLO-407).
 @mixin status-roles-light() {
-  // Success colors
-  --#{$prefix}-sys-color-success: #007B5A;
+  // Success: #007B5A (hue 169, chroma 43) brought from tone 46 to 40. 6.45:1.
+  --#{$prefix}-sys-color-success: #006C4E;
   --#{$prefix}-sys-color-on-success: #FFFFFF;
 
-  // Warning colors
-  --#{$prefix}-sys-color-warning: #DD6D06;
+  // Warning: #DD6D06 (hue 51, chroma 63) was tone 58, 3.35:1 under white.
+  // Tone 40 is #974800, 6.48:1, still orange.
+  --#{$prefix}-sys-color-warning: #974800;
   --#{$prefix}-sys-color-on-warning: #FFFFFF;
 
-  // Info colors
+  // Info: #0061A4 is already tone 40 of its palette. 6.47:1.
   --#{$prefix}-sys-color-info: #0061A4;
   --#{$prefix}-sys-color-on-info: #FFFFFF;
 }
 
 @mixin status-roles-dark() {
-  // Success colors
-  --#{$prefix}-sys-color-success: #85CFA9;
-  --#{$prefix}-sys-color-on-success: #00392D;
+  // Success: #85CFA9 (hue 165, chroma 37) at tone 80, on-role at tone 20. 7.76:1.
+  --#{$prefix}-sys-color-success: #8CD6AF;
+  --#{$prefix}-sys-color-on-success: #003824;
 
-  // Warning colors
+  // Warning: #FFB95C is already tone 80 (hue 71, chroma 43). Its on-role was
+  // tone 16; tone 20 is #462A00. 7.76:1.
   --#{$prefix}-sys-color-warning: #FFB95C;
-  --#{$prefix}-sys-color-on-warning: #3F2200;
+  --#{$prefix}-sys-color-on-warning: #462A00;
 
-  // Info colors
+  // Info: #99CBFF is already tone 80. Its on-role was tone 20 in hue, not of
+  // this palette; tone 20 is #003355. 7.69:1.
   --#{$prefix}-sys-color-info: #99CBFF;
-  --#{$prefix}-sys-color-on-info: #003060;
+  --#{$prefix}-sys-color-on-info: #003355;
 }
 
 // Common status colors that should be available in all themes