@expressivecss/expressive 0.7.0 → 0.9.0

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

@@ -137,7 +137,7 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
     color: var(--md-sys-color-on-surface-variant);
     box-shadow: none;
 
-    > i {
+    > #{$icon} {
       font-size: 24px;
       width: 24px;
       height: 24px;
@@ -145,7 +145,7 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
     }
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
     }
 
     &:focus-visible {

package/src/sass/components/_snackbar.scss

@@ -14,7 +14,7 @@
 //   action       label-large / inverse-primary text button
 //   close        24dp icon, inverse-on-surface
 //   inset        8dp compact, 24dp from the bottom on larger screens
-//   placement    bottom of the UI; centered from the small breakpoint
+//   placement    bottom of the UI; centered from the Medium breakpoint
 //
 // 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
@@ -48,7 +48,7 @@ $_bar: ".snackbar";
     pointer-events: auto;
   }
 
-  @include bp-up("small") {
+  @include bp-up("medium") {
     --md-comp-snackbar-container-margin-leading: 24px;
     --md-comp-snackbar-container-margin-trailing: 24px;
     --md-comp-snackbar-container-margin-bottom: 24px;
@@ -78,6 +78,11 @@ $_bar: ".snackbar";
   --md-comp-snackbar-icon-color: var(--md-sys-color-inverse-on-surface);
 
   box-sizing: border-box;
+  // Swipe-to-dismiss is horizontal, so claim that axis and leave vertical
+  // panning to the page. Without this the browser takes a horizontal swipe for
+  // itself and cancels the drag mid-gesture: `preventDefault()` on a
+  // `pointermove` cannot stop it the way it stopped a `touchmove`.
+  touch-action: pan-y;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -95,7 +100,7 @@ $_bar: ".snackbar";
   @include z-depth("3");
   cursor: default;
 
-  @include bp-up("small") {
+  @include bp-up("medium") {
     width: max-content;
     min-width: min(344px, 100%);
   }
@@ -116,7 +121,7 @@ $_bar: ".snackbar";
   }
 
   // Optional leading icon (BeerCSS). M3 snackbars have no leading icon.
-  > i:first-child {
+  > #{$icon}:first-child {
     flex: 0 0 auto;
     font-size: 24px;
     width: 24px;
@@ -126,7 +131,7 @@ $_bar: ".snackbar";
   }
 
   // Inline links in the supporting text use the action color.
-  a:not(.button) {
+  a:not(.button, .icon-button) {
     color: var(--md-comp-snackbar-action-label-text-color);
   }
 
@@ -145,8 +150,8 @@ $_bar: ".snackbar";
   }
 
   // Text action — inverse-primary, not the filled common-button default.
-  > :is(button, a.button):not(.circle),
-  > nav > :is(button, a.button):not(.circle) {
+  > :is(button, a.button):not(.circle, .icon-button),
+  > nav > :is(button, a.button):not(.circle, .icon-button) {
     flex: 0 0 auto;
     height: 40px;
     min-width: 48px;
@@ -159,12 +164,12 @@ $_bar: ".snackbar";
     @include typescale("label-large");
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-inverse-primary) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-inverse-primary) state-opacity("hover"), transparent);
     }
 
     &:active,
     &:focus {
-      background-color: color-mix(in oklab, var(--md-sys-color-inverse-primary) 10%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-inverse-primary) state-opacity("focus"), transparent);
     }
 
     &:focus-visible {
@@ -186,7 +191,7 @@ $_bar: ".snackbar";
     color: var(--md-comp-snackbar-icon-color);
     box-shadow: none;
 
-    > i {
+    > #{$icon} {
       font-size: 24px;
       width: 24px;
       height: 24px;
@@ -194,12 +199,12 @@ $_bar: ".snackbar";
     }
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) state-opacity("hover"), transparent);
     }
 
     &:active,
     &:focus {
-      background-color: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 10%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) state-opacity("focus"), transparent);
     }
 
     &:focus-visible {
@@ -226,7 +231,7 @@ $_bar: ".snackbar";
 
 // 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.
+// Default: bottom of the UI, centered from the Medium breakpoint.
 #{$_bar}.active {
   position: fixed;
   z-index: 10000;
@@ -238,7 +243,7 @@ $_bar: ".snackbar";
   width: max-content;
   max-width: min(672px, calc(100% - 48px));
 
-  @include bp-down("small") {
+  @include bp-down("medium") {
     left: 8px;
     right: 8px;
     bottom: max(8px, env(safe-area-inset-bottom, 0px));
@@ -251,7 +256,7 @@ $_bar: ".snackbar";
     top: 24px;
     bottom: auto;
 
-    @include bp-down("small") {
+    @include bp-down("medium") {
       top: 8px;
       left: 8px;
       right: 8px;

package/src/sass/components/_split-button.scss

@@ -0,0 +1,196 @@
+@use "sass:map";
+@use "../abstracts" as *;
+
+// Split buttons.
+//
+// Anatomy is the HTML. A <div class="split-button"> holding two buttons: a
+// leading one that performs the action, and a trailing `.menu-trigger` that
+// opens a <menu> of related ones. They sit 2dp apart, the outside of the pair
+// is round, and the seam between them is square-ish until something happens
+// to it.
+//
+// Both halves are ordinary buttons, so every style class works on them and
+// nothing here restates a colour. What this partial owns is the pair: the
+// seam, the two insets that differ from a lone button's, and the larger
+// trailing icon.
+//
+// No composite role is declared. The two halves are two Tab stops doing two
+// different things - `toolbar` and its nine siblings promise an arrow-key
+// model this is not (SEMANTICS rule 2). The menu the trailing half opens has
+// its own keyboard contract, which Menu implements and owns.
+//
+// `aria-expanded` on the trailing half is Menu's to write, not the author's
+// (SEMANTICS rule 1) - which is exactly why the expanded shape can be drawn
+// from a selector with no script of this component's own.
+//
+// Tokens are md.comp.split-button.{xsmall … xlarge} (DSP 34.0.21). Five
+// families collapse to one here the way the button's own ladder does: the
+// size class rewrites the tokens and the two halves map them onto the button
+// tokens once, below.
+//
+//   size     height  lead-start  lead-end  trail-space  trail-icon  inner  swollen
+//   xsmall     32        12         10          13          22        4       8
+//   small      40        16         12          13          22        4      12
+//   medium     56        24         24          15          26        4      12
+//   large      96        48         48          29          38        8      20
+//   xlarge    136        64         64          43          50       12      20
+//
+// `lead-start` is the button ladder's own `space` at every size, so it is not
+// restated - `button-size()` sets it and the leading half keeps it. Only the
+// inset facing the seam is the split button's, and only at the two smallest
+// sizes does it actually differ. `between-space` is 2dp in all five families,
+// so it is written once for the same reason.
+
+// The two halves. The trailing one *is* the menu trigger: `.menu-trigger`
+// with a target is the JS contract Menu claims, and a split button whose
+// trailing half opened nothing would be a lone button with a decoration
+// glued to it. semantics.json enforces that.
+//
+// `:where()`, not `:is()`: `:is()` takes the specificity of its heaviest
+// argument, so `a.button` would make `> $_half:hover` a class heavier than
+// `> $_trail[aria-expanded]` - and hovering an open split button would
+// collapse the seam Material says stays round for as long as the menu is up.
+//
+// `.icon-button` is deliberately not a half. It is its own component with its
+// own size ladder, insets, colours and icon sizing, all set on the element by
+// its own rule - so the container could not size it by handing it tokens, and
+// the seam here would fight the shape it already draws. Button groups refuse
+// it for the same reason. The trailing half is a `.button.menu-trigger`.
+$_lead: ":where(button:not(.icon-button), a.button):not(.menu-trigger)";
+$_trail: ".menu-trigger:not(.icon-button)";
+$_half: ":where(button:not(.icon-button), a.button)";
+
+// md.comp.split-button.<size>.{leading-button.trailing-space,
+// trailing-button.leading-space, trailing.icon-size, inner-corner,
+// inner-pressed-corner}. The hovered and pressed inner corners are the same
+// value in all five families, so one token carries both states.
+$_sizes: (
+  "xsmall": (lead-end: 10px, trail-space: 13px, trail-icon: 22px, inner: 4px, swollen: 8px),
+  "small": (lead-end: 12px, trail-space: 13px, trail-icon: 22px, inner: 4px, swollen: 12px),
+  "medium": (lead-end: 24px, trail-space: 15px, trail-icon: 26px, inner: 4px, swollen: 12px),
+  "large": (lead-end: 48px, trail-space: 29px, trail-icon: 38px, inner: 8px, swollen: 20px),
+  "xlarge": (lead-end: 64px, trail-space: 43px, trail-icon: 50px, inner: 12px, swollen: 20px),
+);
+
+// The two ladders are keyed alike and read together, so a size added to one
+// and not the other would emit `--token: ;` - a dropped declaration with no
+// error and no visible cause. Fail the build instead.
+@if map.keys($_sizes) != map.keys($button-sizes) {
+  @error "$_sizes and $button-sizes must name the same five sizes; got " +
+    map.keys($_sizes) + " against " + map.keys($button-sizes) + ".";
+}
+
+@mixin _split-size($name) {
+  $s: map.get($_sizes, $name);
+
+  --md-comp-split-button-leading-button-trailing-space: #{map.get($s, lead-end)};
+  --md-comp-split-button-trailing-button-space: #{map.get($s, trail-space)};
+  --md-comp-split-button-trailing-icon-size: #{map.get($s, trail-icon)};
+  --md-comp-split-button-inner-corner-corner-size: #{map.get($s, inner)};
+  --md-comp-split-button-inner-pressed-corner-corner-size: #{map.get($s, swollen)};
+}
+
+.split-button {
+  --md-comp-split-button-between-space: 2px;
+  --md-comp-split-button-container-shape: 9999px;
+
+  @include button-size("small");
+  @include _split-size("small");
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--md-comp-split-button-between-space);
+
+  // The size axis. Height, icon size, the leading inset and the outline width
+  // are the button ladder's, so `button-size()` sets them on the container and
+  // both halves inherit; the five values that are the split button's own are
+  // beside it. The type role cannot travel that way - `btn` states a font-size
+  // of its own - so it is set on the halves.
+  @each $name, $s in $button-sizes {
+    &.#{$name} {
+      @include button-size($name);
+      @include _split-size($name);
+
+      > #{$_half} {
+        @include typescale(map.get($s, label));
+      }
+    }
+  }
+
+  // The seam goes through a variable so that hovering, pressing or opening
+  // changes one value rather than restating `border-radius`. A shorthand under
+  // `:hover` would take the round outer corners with it, which is the bug
+  // `_button-groups.scss` records.
+  > #{$_half} {
+    --_inner: var(--md-comp-split-button-inner-corner-corner-size);
+
+    // `btn` transitions background-color and box-shadow; restating the
+    // property list replaces it wholesale, so both have to be named again or
+    // an `.elevated` split button snaps its shadow where every other elevated
+    // button eases it.
+    transition: border-radius .2s ease-out, background-color .2s ease-out,
+      box-shadow .2s ease-out;
+
+    // M3 gives hovered and pressed the same swollen corner.
+    &:hover,
+    &:active {
+      --_inner: var(--md-comp-split-button-inner-pressed-corner-corner-size);
+    }
+  }
+
+  // Logical, so the outside of the pair is the outside of the pair in RTL too:
+  // the flex row reverses and start follows it.
+  > #{$_lead} {
+    --md-comp-filled-button-trailing-space: var(--md-comp-split-button-leading-button-trailing-space);
+
+    border-start-start-radius: var(--md-comp-split-button-container-shape);
+    border-end-start-radius: var(--md-comp-split-button-container-shape);
+    border-start-end-radius: var(--_inner);
+    border-end-end-radius: var(--_inner);
+  }
+
+  > #{$_trail} {
+    // Symmetric, and narrower than a lone button's - the trailing half is a
+    // glyph in a box, not a label. The width falls out of the two insets and
+    // the icon: 48dp at the two smallest sizes, square at the three largest.
+    --md-comp-filled-button-leading-space: var(--md-comp-split-button-trailing-button-space);
+    --md-comp-filled-button-trailing-space: var(--md-comp-split-button-trailing-button-space);
+    // `_buttons.scss` sizes a button's icon from this token, so rewriting it
+    // here is the whole of the override. M3 draws the trailing glyph larger
+    // than the button ladder's icon at every size (22 against 20, up to 50
+    // against 40).
+    --md-comp-filled-button-icon-size: var(--md-comp-split-button-trailing-icon-size);
+
+    border-start-end-radius: var(--md-comp-split-button-container-shape);
+    border-end-end-radius: var(--md-comp-split-button-container-shape);
+    border-start-start-radius: var(--_inner);
+    border-end-start-radius: var(--_inner);
+
+    // Activation. md.comp.split-button.<size>.trailing.inner-selected-corner
+    // is 50%, and Compose resolves a percentage corner against the shape's
+    // *smaller* dimension - 20dp on the 48x40 half at `small`, which is what
+    // `9999px` clamps to. The two agree at every size, and the outer corners
+    // are the same 50% written the same way. So the pair reads as two
+    // separated round buttons for as long as the menu is open. Menu writes the
+    // attribute; nothing here is scripted.
+    &[aria-expanded="true"] {
+      --_inner: var(--md-comp-split-button-container-shape);
+    }
+
+    > #{$icon} {
+      transition: transform .2s ease-out;
+    }
+
+    &[aria-expanded="true"] > #{$icon} {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+// The corner morph and the spin are the only motion this component has.
+@media (prefers-reduced-motion: reduce) {
+  .split-button > #{$_half},
+  .split-button > #{$_trail} > #{$icon} {
+    transition: none;
+  }
+}

package/src/sass/components/_tabs.scss

@@ -83,10 +83,9 @@ $_tab: "> a, > .tab > a";
     cursor: pointer;
     appearance: none;
     @include typescale("title-small");
-    font-family: $font-stack;
     transition: color .2s ease, background-color .2s ease;
 
-    > i {
+    > #{$icon} {
       flex: 0 0 auto;
       font-size: var(--md-comp-primary-tab-icon-size);
       width: var(--md-comp-primary-tab-icon-size);
@@ -97,13 +96,13 @@ $_tab: "> a, > .tab > a";
 
     &:hover {
       color: var(--md-sys-color-on-surface);
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
     }
 
     &:focus-visible,
     &:focus {
       color: var(--md-sys-color-on-surface);
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("focus"), transparent);
       outline: none;
     }
 
@@ -113,12 +112,12 @@ $_tab: "> a, > .tab > a";
     }
 
     &.active:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
     }
 
     &.active:focus-visible,
     &.active:focus {
-      background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
     }
 
     // Disabled — on the <a>. The wrapping `.tab.disabled` case is
@@ -135,7 +134,7 @@ $_tab: "> a, > .tab > a";
   // Stacked icon + label is 64dp (primary).
   &:not(.horizontal) {
     #{$_tab} {
-      &:has(> i) {
+      &:has(> #{$icon}) {
         min-height: var(--md-comp-primary-tab-with-icon-container-height);
         padding-block: 8px;
       }
@@ -210,7 +209,7 @@ $_tab: "> a, > .tab > a";
   }
 }
 
-@include bp-down("large") {
+@include bp-down("expanded") {
   .tabs {
     > :is(a, .tab) {
       flex: 1 1 0;