@expressivecss/expressive 0.4.0 → 0.6.0

package/src/sass/components/{_toast.scss → _snackbar.scss}

@@ -1,6 +1,6 @@
 @use "../abstracts" as *;
 
-// Snackbars (toasts).
+// Snackbars.
 //
 // Anatomy is the HTML. A .snackbar is the container. A <p> (or <span>,
 // or loose text) is the supporting text. A trailing <button> is the
@@ -13,14 +13,18 @@
 //   text         body-medium / inverse-on-surface, two lines max
 //   action       label-large / inverse-primary text button
 //   close        24dp icon, inverse-on-surface
-//   inset        8dp compact, 24dp from start+bottom on larger screens
+//   inset        8dp compact, 24dp from the bottom on larger screens
+//   placement    bottom of the UI; centered from the small breakpoint
 //
-// The constructor adds .snackbar. A static .snackbar is in-flow (docs
-// previews). .active pins it to the viewport. There is no AutoInit.
+// Snackbars must not interrupt browsing: the container is pointer-events
+// none except on the bar, and the live region is polite. One at a time
+// is a JS concern. The constructor adds .snackbar. A static .snackbar
+// is in-flow (docs previews). .active pins it to the viewport. There
+// is no AutoInit.
 
 $_bar: ".snackbar";
 
-#toast-container {
+#snackbar-container {
   --md-comp-snackbar-container-margin-leading: 8px;
   --md-comp-snackbar-container-margin-trailing: 8px;
   --md-comp-snackbar-container-margin-bottom: 8px;
@@ -33,10 +37,11 @@ $_bar: ".snackbar";
   position: fixed;
   z-index: 10000;
   inset: auto var(--md-comp-snackbar-container-margin-trailing)
-    var(--md-comp-snackbar-container-margin-bottom)
+    max(var(--md-comp-snackbar-container-margin-bottom), env(safe-area-inset-bottom, 0px))
     var(--md-comp-snackbar-container-margin-leading);
   width: auto;
   max-width: calc(100% - var(--md-comp-snackbar-container-margin-leading) - var(--md-comp-snackbar-container-margin-trailing));
+  // The page stays browsable — only the bar itself receives pointer events.
   pointer-events: none;
 
   > * {
@@ -48,26 +53,20 @@ $_bar: ".snackbar";
     --md-comp-snackbar-container-margin-trailing: 24px;
     --md-comp-snackbar-container-margin-bottom: 24px;
     --md-comp-snackbar-container-margin-top: 24px;
-    align-items: flex-start;
+    align-items: center;
+    left: 50%;
+    right: auto;
     width: max-content;
     min-width: min(344px, calc(100% - 48px));
     max-width: min(672px, calc(100% - 48px));
+    transform: translateX(-50%);
   }
 
-  // Position helpers on the container, or on a child via :has().
+  // Opt-in: M3 places snackbars at the bottom. `.top` is the exception.
   &:has(> .top),
   &.top {
-    inset: var(--md-comp-snackbar-container-margin-top)
-      var(--md-comp-snackbar-container-margin-trailing)
-      auto
-      var(--md-comp-snackbar-container-margin-leading);
-  }
-
-  &:has(> .center),
-  &.center {
-    left: 50%;
-    right: auto;
-    transform: translateX(-50%);
+    inset-block-start: var(--md-comp-snackbar-container-margin-top);
+    inset-block-end: auto;
   }
 }
 
@@ -215,45 +214,47 @@ $_bar: ".snackbar";
   }
 }
 
-// Stacked in-flow previews. JS toasts use the container gap instead.
+// Stacked in-flow previews. JS-created snackbars use the container gap instead.
 #{$_bar} + #{$_bar} {
   margin-top: 8px;
 }
 
-// JS enter animation starts the bar 35px below its rest position.
-#toast-container #{$_bar} {
+#snackbar-container #{$_bar} {
   position: relative;
-  top: 35px;
   margin-top: 0;
 }
 
 // Static overlay. In-flow without this (docs previews). Not AutoInit —
 // add and remove the class yourself, or use the constructor for timing.
+// Default: bottom of the UI, centered from the small breakpoint.
 #{$_bar}.active {
   position: fixed;
   z-index: 10000;
-  inset: auto auto 16px 16px;
+  left: 50%;
+  right: auto;
+  bottom: 24px;
   top: auto;
+  transform: translateX(-50%);
   width: max-content;
-  max-width: min(672px, calc(100% - 32px));
+  max-width: min(672px, calc(100% - 48px));
 
   @include bp-down("small") {
-    inset: auto 8px 8px 8px;
+    left: 8px;
+    right: 8px;
+    bottom: max(8px, env(safe-area-inset-bottom, 0px));
+    transform: none;
     width: auto;
     max-width: none;
   }
 
   &.top {
-    inset: 16px auto auto 16px;
+    top: 24px;
+    bottom: auto;
 
     @include bp-down("small") {
-      inset: 8px 8px auto 8px;
+      top: 8px;
+      left: 8px;
+      right: 8px;
     }
   }
-
-  &.center {
-    left: 50%;
-    right: auto;
-    transform: translateX(-50%);
-  }
 }

package/src/sass/components/_tabs.scss

@@ -5,7 +5,7 @@
 // Anatomy is the HTML. A <nav class="tabs"> of <a href="#panel"> is the
 // bar. A heading or <span> is the label; a leading <i> is the icon.
 // .active is the selected tab. Helpers: .tabs-secondary, .horizontal,
-// .max, .transparent.
+// .max.
 //
 // Tokens follow https://m3.material.io/components/tabs/specs
 //   primary     surface, 48dp (64 with stacked icon), title-small
@@ -223,29 +223,3 @@ $_tab: "> a, > .tab > a";
     }
   }
 }
-
-// On a colored app bar (header.primary > .tabs).
-.tabs.transparent {
-  --md-comp-primary-tab-container-color: transparent;
-  --md-comp-primary-tab-label-text-color: color-mix(
-    in oklab,
-    var(--md-sys-color-on-primary) 74%,
-    transparent
-  );
-  --md-comp-primary-tab-active-label-text-color: var(--md-sys-color-on-primary);
-  --md-comp-primary-tab-active-indicator-color: var(--md-sys-color-on-primary);
-  border-block-end-color: color-mix(in oklab, var(--md-sys-color-on-primary) 20%, transparent);
-
-  #{$_tab} {
-    &:hover,
-    &:focus {
-      color: var(--md-sys-color-on-primary);
-      background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 8%, transparent);
-    }
-
-    &.active:hover,
-    &.active:focus {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 10%, transparent);
-    }
-  }
-}

package/src/sass/components/_toolbar.scss

@@ -1,32 +1,41 @@
 @use "../abstracts" as *;
 
-// Toolbars.
+// Toolbars (M3 Expressive).
 //
 // Anatomy is the HTML. A <nav class="toolbar"> is the bar. Direct
 // <button> / <a> children are the actions. An <i> is the icon; wrap a
-// label in <span>. .active marks the selected action. Helpers are only
-// for variants markup cannot express: .filled, .vertical, .max / .docked,
-// .fixed, .top, .bottom.
+// label in <span>. .active marks the selected action. A .filled action
+// is the emphasized control (the in-bar FAB). Helpers are only for
+// variants markup cannot express: .docked, .vibrant / .filled (on the
+// nav), .vertical, .fixed, .top, .bottom.
+//
+// Two variants:
+//   floating   default. Hugs its actions, 64dp, 32dp stadium,
+//              surface-container, elevation 2. Horizontal or .vertical.
+//   docked     .docked (or .max). Full width, 64dp, square, no
+//              elevation. Replaces the bottom app bar.
+//
+// Color: standard (surface-container) or .vibrant (primary-container).
+// Pair a floating bar with a FAB via .toolbar-group. Do not show a
+// toolbar at the same time as nav.navigation-bar.
 //
 // Tokens follow https://m3.material.io/components/toolbars/specs
-//   floating   hug, 64dp, 32dp stadium, surface-variant, elevation 2
-//   docked     full width, 64dp, 0 radius, surface-variant, no elevation
-//              (M3 replacement for the bottom app bar)
-//   vibrant    primary-container / on-primary-container (.filled)
 //   action     48dp target, 24dp icon, transparent at rest
-//   selected   secondary-container / on-secondary-container
+//   selected   secondary-container (standard) / surface (vibrant)
+//   emphasized 48dp, 16dp corners, primary / on-primary
 //
-// nav.toolbar only — do not style every <nav> (app bars, card actions,
-// radio rows). div.fixed-action-btn.toolbar is the FAB-to-toolbar
-// transition, not this component.
+// nav.toolbar only — do not style every <nav>. div.fixed-action-btn.toolbar
+// is the FAB-to-toolbar transition, not this component.
 
 nav.toolbar {
-  --md-comp-toolbar-container-color: var(--md-sys-color-surface-variant);
+  --md-comp-toolbar-container-color: var(--md-sys-color-surface-container);
   --md-comp-toolbar-container-shape: 32px;
   --md-comp-toolbar-container-height: 64px;
   --md-comp-toolbar-leading-space: 12px;
   --md-comp-toolbar-action-size: 48px;
   --md-comp-toolbar-icon-size: 24px;
+  --md-comp-toolbar-selected-container-color: var(--md-sys-color-secondary-container);
+  --md-comp-toolbar-selected-color: var(--md-sys-color-on-secondary-container);
 
   box-sizing: border-box;
   display: inline-flex;
@@ -48,7 +57,7 @@ nav.toolbar {
   }
 
   // Actions — transparent at rest so they sit on the container, not filled.
-  // .extra is the 56dp FAB; leave it alone so a docked bar can embed one.
+  // .extra is the 56dp companion FAB; leave it alone.
   > :is(a, button):not(.extra) {
     box-sizing: border-box;
     display: inline-flex;
@@ -81,17 +90,17 @@ nav.toolbar {
       line-height: var(--md-comp-toolbar-icon-size);
     }
 
-    &:hover:not(.active) {
+    &:hover:not(.active, .filled) {
       background-color: color-mix(in oklab, currentColor 8%, transparent);
     }
 
-    &:active:not(.active) {
+    &:active:not(.active, .filled) {
       background-color: color-mix(in oklab, currentColor 10%, transparent);
     }
 
     &.active {
-      background-color: var(--md-sys-color-secondary-container);
-      color: var(--md-sys-color-on-secondary-container);
+      background-color: var(--md-comp-toolbar-selected-container-color);
+      color: var(--md-comp-toolbar-selected-color);
     }
 
     &:disabled {
@@ -109,6 +118,46 @@ nav.toolbar {
     border-radius: 50%;
   }
 
+  // Emphasized action (the in-bar FAB). 48dp, 16dp corners, primary.
+  > :is(a, button).filled:not(.extra) {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+    border-radius: 16px;
+    box-shadow: none;
+
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-primary) 8%,
+        var(--md-sys-color-primary)
+      );
+    }
+
+    &:active {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-primary) 10%,
+        var(--md-sys-color-primary)
+      );
+    }
+  }
+
+  > :is(a, button).filled:not(.extra):has(> span) {
+    height: 40px;
+    min-height: 40px;
+    padding: 0 24px;
+    border-radius: 20px;
+    width: auto;
+  }
+
+  // Text field or other control stretching between leading and trailing.
+  > .field {
+    flex: 1 1 auto;
+    align-self: center;
+    min-width: 0;
+    margin: 0;
+  }
+
   // Spacer between leading and trailing actions.
   > .max {
     flex: 1 1 auto;
@@ -118,15 +167,13 @@ nav.toolbar {
   }
 }
 
-// Vibrant. Pair with .active using the inverse of the container.
+// Vibrant color style. Pair .active with surface so it still contrasts.
+nav.toolbar.vibrant,
 nav.toolbar.filled {
   --md-comp-toolbar-container-color: var(--md-sys-color-primary-container);
+  --md-comp-toolbar-selected-container-color: var(--md-sys-color-surface);
+  --md-comp-toolbar-selected-color: var(--md-sys-color-on-surface);
   color: var(--md-sys-color-on-primary-container);
-
-  > :is(a, button).active {
-    background-color: var(--md-sys-color-surface-variant);
-    color: var(--md-sys-color-on-surface);
-  }
 }
 
 // Vertical floating bar.
@@ -144,7 +191,8 @@ nav.toolbar.vertical {
 }
 
 // Docked — full width, square, no lift. M3's replacement for the bottom
-// app bar. .max is the BeerCSS name; .docked is the M3 name.
+// app bar. Shorter than that bar (64dp, not 80). .max is the BeerCSS
+// name; .docked is the M3 name.
 nav.toolbar.max,
 nav.toolbar.docked {
   display: flex;
@@ -154,6 +202,22 @@ nav.toolbar.docked {
   @include z-depth("0");
 }
 
+// Pair a floating toolbar with a companion FAB. The FAB is a sibling,
+// not a child — typically .extra.circle.
+.toolbar-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+
+  &.vertical {
+    flex-direction: column;
+  }
+
+  > nav.toolbar {
+    margin: 0;
+  }
+}
+
 // Pin to the viewport. Floating defaults to bottom-center; docked
 // defaults to the bottom edge.
 nav.toolbar.fixed {
@@ -184,9 +248,11 @@ nav.toolbar:is(.max, .docked).fixed,
 nav.toolbar:is(.max, .docked).fixed.bottom {
   inset: auto 0 0 0;
   transform: none;
+  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
 }
 
 nav.toolbar:is(.max, .docked).fixed.top {
   inset: 0 0 auto 0;
   transform: none;
+  padding-bottom: 8px;
 }

package/src/sass/components/_tooltip.scss

@@ -119,7 +119,7 @@ body > .tooltip {
 // Rich tooltip — title, supporting text, optional action.
 .tooltip.rich,
 .tooltip.max {
-  --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface);
+  --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface-container);
   --md-comp-rich-tooltip-container-shape: 12px;
 
   display: flex;

package/src/sass/components/forms/_fieldset.scss

@@ -85,7 +85,7 @@ fieldset {
 }
 
 fieldset.filled {
-  --md-comp-fieldset-container-color: var(--md-sys-color-surface-variant);
+  --md-comp-fieldset-container-color: var(--md-sys-color-surface-container-highest);
   --md-comp-fieldset-outline-color: transparent;
 }
 

package/src/sass/components/forms/_input-fields.scss

@@ -38,7 +38,7 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
 }
 
 .field {
-  --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-variant);
+  --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-container-highest);
   --md-comp-filled-text-field-container-shape: 1rem;
   --md-comp-filled-text-field-caret-color: var(--md-sys-color-primary);
   --input-color: var(--md-comp-filled-text-field-caret-color);
@@ -293,8 +293,8 @@ textarea {
   li {
     .highlight { color: var(--md-sys-color-on-surface); }
     img {
-      height: $dropdown-item-height - 10;
-      width: $dropdown-item-height - 10;
+      height: $menu-item-height - 10;
+      width: $menu-item-height - 10;
       margin: 5px 15px;
     }
   }