@expressivecss/expressive 0.15.0 → 0.16.0

package/src/sass/components/_snackbar.scss

@@ -5,7 +5,7 @@
 // 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
 // action; a .circle button is the optional close. An optional leading
-// <i> is an icon.
+// icon comes first.
 //
 // Tokens follow https://m3.material.io/components/snackbar/specs
 //   container    inverse-surface, 4dp corners, elevation 3, min 48dp
@@ -35,10 +35,9 @@ $_bar: ".snackbar";
   align-items: stretch;
   gap: 8px;
   position: fixed;
-  z-index: 10000;
-  inset: auto var(--md-comp-snackbar-container-margin-trailing)
-    max(var(--md-comp-snackbar-container-margin-bottom), env(safe-area-inset-bottom, 0px))
-    var(--md-comp-snackbar-container-margin-leading);
+  z-index: var(--expressive-z-snackbar);
+  inset-block: auto max(var(--md-comp-snackbar-container-margin-bottom), env(safe-area-inset-bottom, 0px));
+  inset-inline: var(--md-comp-snackbar-container-margin-leading) var(--md-comp-snackbar-container-margin-trailing);
   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.
@@ -72,7 +71,7 @@ $_bar: ".snackbar";
 
 #{$_bar} {
   --md-comp-snackbar-container-color: var(--md-sys-color-inverse-surface);
-  --md-comp-snackbar-container-shape: 4px;
+  --md-comp-snackbar-container-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-snackbar-supporting-text-color: var(--md-sys-color-inverse-on-surface);
   --md-comp-snackbar-action-label-text-color: var(--md-sys-color-inverse-primary);
   --md-comp-snackbar-icon-color: var(--md-sys-color-inverse-on-surface);
@@ -91,7 +90,8 @@ $_bar: ".snackbar";
   max-width: 672px;
   min-height: 48px;
   margin: 0;
-  padding: 4px 8px 4px 16px;
+  padding-block: 4px;
+  padding-inline: 16px 8px;
   border: none;
   border-radius: var(--md-comp-snackbar-container-shape);
   background-color: var(--md-comp-snackbar-container-color);
@@ -124,10 +124,10 @@ $_bar: ".snackbar";
   // Optional leading icon. M3 snackbars have no leading icon.
   > #{$icon}:first-child {
     flex: 0 0 auto;
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
+    font-size: rem(24px);
+    width: rem(24px);
+    height: rem(24px);
+    line-height: rem(24px);
     color: var(--md-comp-snackbar-icon-color);
   }
 
@@ -158,19 +158,19 @@ $_bar: ".snackbar";
     min-width: 48px;
     padding: 0 12px;
     border: none;
-    border-radius: 20px;
+    border-radius: var(--md-sys-shape-corner-large-increased);
     background-color: transparent;
     color: var(--md-comp-snackbar-action-label-text-color);
     box-shadow: none;
     @include typescale("label-large");
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-inverse-primary) state-opacity("hover"), transparent);
+      background-color: state-layer(var(--md-sys-color-inverse-primary), "hover");
     }
 
     &:active,
     &:focus {
-      background-color: color-mix(in oklab, var(--md-sys-color-inverse-primary) state-opacity("focus"), transparent);
+      background-color: state-layer(var(--md-sys-color-inverse-primary), "focus");
     }
 
     &:focus-visible {
@@ -193,19 +193,19 @@ $_bar: ".snackbar";
     box-shadow: none;
 
     > #{$icon} {
-      font-size: 24px;
-      width: 24px;
-      height: 24px;
-      line-height: 24px;
+      font-size: rem(24px);
+      width: rem(24px);
+      height: rem(24px);
+      line-height: rem(24px);
     }
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) state-opacity("hover"), transparent);
+      background-color: state-layer(var(--md-sys-color-inverse-on-surface), "hover");
     }
 
     &:active,
     &:focus {
-      background-color: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) state-opacity("focus"), transparent);
+      background-color: state-layer(var(--md-sys-color-inverse-on-surface), "focus");
     }
 
     &:focus-visible {
@@ -235,7 +235,7 @@ $_bar: ".snackbar";
 // Default: bottom of the UI, centered from the Medium breakpoint.
 #{$_bar}.active {
   position: fixed;
-  z-index: 10000;
+  z-index: var(--expressive-z-snackbar);
   left: 50%;
   right: auto;
   bottom: 24px;
@@ -264,3 +264,9 @@ $_bar: ".snackbar";
     }
   }
 }
+
+// Transient messages are not part of the page. Important so a size or state rule that sets
+// `display` cannot bring it back; see base/_print.scss for the page itself.
+@media print {
+  #snackbar-container { display: none !important; }
+}

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

@@ -85,14 +85,14 @@ $_sizes: (
 
   --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-trailing-icon-size: #{rem(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;
+  --md-comp-split-button-container-shape: var(--md-sys-shape-corner-full);
 
   @include button-size("small");
   @include _split-size("small");
@@ -128,8 +128,8 @@ $_sizes: (
     // 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;
+    transition: border-radius var(--md-sys-motion-duration-short4) ease-out, background-color var(--md-sys-motion-duration-short4) ease-out,
+      box-shadow var(--md-sys-motion-duration-short4) ease-out;
 
     // M3 gives hovered and pressed the same swollen corner.
     &:hover,
@@ -178,7 +178,7 @@ $_sizes: (
     }
 
     > #{$icon} {
-      transition: transform .2s ease-out;
+      transition: transform var(--md-sys-motion-duration-short4) ease-out;
     }
 
     &[aria-expanded="true"] > #{$icon} {

package/src/sass/components/_stat.scss

@@ -16,8 +16,8 @@
 
 .stats {
   --md-comp-stat-container-color: var(--md-sys-color-surface-container-low);
-  --md-comp-stat-shape: 16px;
-  --md-comp-stat-min-width: 160px;
+  --md-comp-stat-shape: var(--md-sys-shape-corner-large);
+  --md-comp-stat-min-width: #{rem(160px)};
 
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--md-comp-stat-min-width)), 1fr));
@@ -56,12 +56,7 @@
     @include typescale("label-large");
 
     &:is(.up, .down)::before {
-      content: "";
-      flex: none;
-      width: 18px;
-      height: 18px;
-      background-color: currentColor;
-      mask: $trend-arrow center / 18px no-repeat;
+      @include trend-arrow;
     }
 
     &.down::before {

package/src/sass/components/_stepper.scss

@@ -97,7 +97,7 @@ $_stepper-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
 
     > a {
       color: inherit;
-      border-radius: 4px;
+      border-radius: var(--md-sys-shape-corner-extra-small);
       text-decoration: underline;
       text-underline-offset: 2px;
       @include focus-visible;

package/src/sass/components/_swipe-actions.scss

@@ -0,0 +1,71 @@
+@use "../abstracts" as *;
+
+// Swipe actions. A touch swipe toward a row's inline start slides the row and
+// brings its `.swipe-actions` group in from the inline end. The
+// `[data-swipe-toggle]` button does the same without a swipe.
+//
+//   <ul class="list swipeable" aria-label="Inbox">
+//     <li>
+//       Label
+//       <button type="button" class="icon-button" data-swipe-toggle aria-label="Actions for Label">…</button>
+//       <span class="swipe-actions">
+//         <button type="button" class="icon-button" aria-label="Archive Label">…</button>
+//       </span>
+//     </li>
+//   </ul>
+//
+// The group waits just past the row's inline end and slides with it, so the
+// two never overlap. The script sets `--swipe-offset` on the row, adds
+// `.swiping` while a finger is down and `.swipe-open` while it is open.
+//
+// Tokens:
+//   --md-comp-swipe-actions-gap              4px  between the actions
+//   --md-comp-swipe-actions-motion           default spatial spring, for opening and closing
+//   --md-comp-swipe-actions-motion-duration  its duration
+
+.list.swipeable {
+  --md-comp-swipe-actions-gap: 4px;
+  --md-comp-swipe-actions-motion: var(--md-sys-motion-spring-default-spatial);
+  --md-comp-swipe-actions-motion-duration: var(--md-sys-motion-spring-default-spatial-duration);
+
+  // Clip, not hidden: a hidden list would scroll to an action that takes
+  // focus, and the row opening is what brings it into view.
+  overflow-x: clip;
+
+  > li:has(> .swipe-actions) {
+    position: relative;
+    translate: var(--swipe-offset, 0px) 0;
+    transition:
+      background-color var(--md-sys-motion-duration-short4) ease-out,
+      translate var(--md-comp-swipe-actions-motion-duration) var(--md-comp-swipe-actions-motion);
+
+    // The row follows the finger.
+    &.swiping {
+      transition: none;
+    }
+
+    // The toggle is the trailing action, though the group comes after it.
+    > [data-swipe-toggle] {
+      grid-column: 3;
+      grid-row: 1 / -1;
+      justify-self: end;
+      align-self: center;
+    }
+
+    > .swipe-actions {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 100%;
+      display: flex;
+      align-items: center;
+      gap: var(--md-comp-swipe-actions-gap);
+      padding-inline: var(--md-comp-swipe-actions-gap);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .list.swipeable > li:has(> .swipe-actions) {
+    transition: none;
+  }
+}

package/src/sass/components/_tabs.scss

@@ -3,7 +3,7 @@
 // Tabs.
 //
 // 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.
+// bar. A heading or <span> is the label; a leading icon is the icon.
 // .active is the selected tab. Helpers: .tabs-secondary, .horizontal,
 // .max.
 //
@@ -17,13 +17,10 @@
 //   divider     1dp outline-variant
 //   disabled    38%
 
-// Comma list of tab-link selectors. Always nest suffixes inside
-// `#{$_tab} { &.foo {} }` — interpolating `#{$_tab}.foo` only
-// attaches `.foo` to the last alternative and leaves `> a` bare
-// (same bug as the icon size classes). That compiled the disabled
-// rule as `.tabs > a, .tabs > .tab > a.disabled`, so every
-// `nav.tabs > a` got pointer-events:none and could not switch panels.
-$_tab: "> a, > .tab > a";
+// The tab link. Nest suffixes inside `#{$_tab} { &.foo {} }`: when this
+// was a comma list, `#{$_tab}.foo` attached `.foo` to the last alternative
+// only and compiled the disabled rule onto every `nav.tabs > a`.
+$_tab: "> a";
 
 .tabs {
   --md-comp-primary-tab-container-color: var(--md-sys-color-surface);
@@ -32,6 +29,10 @@ $_tab: "> a, > .tab > a";
   --md-comp-primary-tab-active-indicator-color: var(--md-sys-color-primary);
   --md-comp-primary-tab-active-indicator-height: 3px;
   --md-comp-primary-tab-active-indicator-shape: 3px 3px 0 0;
+  // The sliding indicator moves on the default spatial spring; Tabs reads
+  // these unless its duration option is set.
+  --md-comp-tabs-indicator-easing: var(--md-sys-motion-spring-default-spatial);
+  --md-comp-tabs-indicator-duration: var(--md-sys-motion-spring-default-spatial-duration);
   --md-comp-primary-tab-icon-size: 24px;
   --md-comp-primary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
   --md-comp-primary-tab-active-label-text-color: var(--md-sys-color-primary);
@@ -54,14 +55,6 @@ $_tab: "> a, > .tab > a";
     display: none;
   }
 
-  > .tab {
-    display: flex;
-    flex: 0 0 auto;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
   #{$_tab} {
     box-sizing: border-box;
     position: relative;
@@ -83,7 +76,7 @@ $_tab: "> a, > .tab > a";
     cursor: pointer;
     appearance: none;
     @include typescale("title-small");
-    transition: color .2s ease, background-color .2s ease;
+    transition: color var(--md-sys-motion-duration-short4) ease, background-color var(--md-sys-motion-duration-short4) ease;
 
     > #{$icon} {
       flex: 0 0 auto;
@@ -96,32 +89,38 @@ $_tab: "> a, > .tab > a";
 
     &:hover {
       color: var(--md-sys-color-on-surface);
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
     }
 
     &:focus-visible,
     &:focus {
       color: var(--md-sys-color-on-surface);
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("focus"), transparent);
+      background-color: state-layer(var(--md-sys-color-on-surface), "focus");
       outline: none;
     }
 
+    // The tint alone is faint and vanishes under forced colors. Inset, so the
+    // scrolling tab row does not clip it.
+    &:focus-visible {
+      @include focus-ring;
+      outline-offset: -3px;
+    }
+
     &.active {
       color: var(--md-comp-primary-tab-active-label-text-color);
       background-color: transparent;
     }
 
     &.active:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
+      background-color: state-layer(var(--md-sys-color-primary), "hover");
     }
 
     &.active:focus-visible,
     &.active:focus {
-      background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
+      background-color: state-layer(var(--md-sys-color-primary), "focus");
     }
 
-    // Disabled — on the <a>. The wrapping `.tab.disabled` case is
-    // below; it cannot live in this block.
+    // Disabled — on the <a>.
     &.disabled,
     &[aria-disabled="true"] {
       color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
@@ -151,6 +150,7 @@ $_tab: "> a, > .tab > a";
         height: var(--md-comp-primary-tab-active-indicator-height);
         background-color: var(--md-comp-primary-tab-active-indicator-color);
         border-radius: var(--md-comp-primary-tab-active-indicator-shape);
+        @include forced-colors-fill(Highlight);
       }
     }
   }
@@ -165,13 +165,7 @@ $_tab: "> a, > .tab > a";
     list-style: none;
     padding: 0;
     margin: 0;
-  }
-
-  > .tab.disabled > a {
-    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-    background-color: transparent;
-    cursor: default;
-    pointer-events: none;
+    @include forced-colors-fill(Highlight);
   }
 }
 
@@ -199,7 +193,7 @@ $_tab: "> a, > .tab > a";
 
 // Equal-width tabs. Default on compact so a few destinations still fill.
 .tabs.max {
-  > :is(a, .tab) {
+  > a {
     flex: 1 1 0;
     min-width: 0;
   }
@@ -211,7 +205,7 @@ $_tab: "> a, > .tab > a";
 
 @include bp-down("expanded") {
   .tabs {
-    > :is(a, .tab) {
+    > a {
       flex: 1 1 0;
       min-width: 0;
     }
@@ -222,3 +216,28 @@ $_tab: "> a, > .tab > a";
     }
   }
 }
+
+// Swipeable tabs. The script moves the panels into this track, one panel per
+// track width, so a touch or trackpad swipe is native scrolling and the snap
+// settles it on a panel.
+.tabs-content {
+  display: flex;
+  align-items: flex-start;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  > * {
+    flex: 0 0 100%;
+    box-sizing: border-box;
+    min-width: 0;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+  }
+}

package/src/sass/components/_timeline.scss

@@ -76,17 +76,20 @@
     }
   }
 
-  // A leading icon takes the dot's place in a 32px tonal circle.
+  // A leading icon takes the dot's place in a 32dp tonal circle, sized in rem
+  // so it grows with the icon; the text and the line clear it. A short row
+  // still leaves 8px before the next event's circle.
   > li:has(> #{$icon}:first-child) {
-    padding-inline-start: 48px;
+    min-block-size: calc(#{rem(32px)} + 8px);
+    padding-inline-start: calc(#{rem(32px)} + 16px);
 
     &::before {
       content: none;
     }
 
     &::after {
-      inset-block-start: 36px;
-      inset-inline-start: 15.5px;
+      inset-block-start: calc(#{rem(32px)} + 4px);
+      inset-inline-start: calc(#{rem(16px)} - 0.5px);
     }
 
     > #{$icon}:first-child {
@@ -96,19 +99,16 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 32px;
-      height: 32px;
+      width: rem(32px);
+      height: rem(32px);
       border-radius: 50%;
       background-color: var(--md-sys-color-secondary-container);
       color: var(--md-sys-color-on-secondary-container);
-      font-size: 18px;
+      font-size: rem(18px);
     }
   }
 }
 
-@media (forced-colors: active) {
-  .timeline > li::before {
-    forced-color-adjust: none;
-    background-color: CanvasText;
-  }
+.timeline > li::before {
+  @include forced-colors-fill;
 }