@expressivecss/expressive 0.7.0-rc.0 → 0.8.0

package/src/sass/components/_search.scss

@@ -0,0 +1,259 @@
+@use "../abstracts" as *;
+
+// Search: the M3 search bar and the view it expands into.
+//
+// Anatomy is the HTML. A `<search class="search-bar">` is the bar - an
+// optional leading icon or icon button, an `<input type="search">`, and
+// optional trailing actions. `.searchbar` is the pre-1.0 alias.
+//
+// `.search-view` is the surface the bar expands into, and it is two different
+// native elements because the two variants want two different behaviours:
+//
+//   docked       a plain element inside the bar, shown by dropping `hidden`.
+//                The bar keeps focus, which is the whole point - a modeless
+//                `<dialog>.show()` moves focus into the dialog and would take
+//                the caret out of the input the user is typing in.
+//   full-screen  a `<dialog class="search-view full-screen">` opened with
+//                `showModal()`, so Escape and light dismiss come from the
+//                platform and `behaviors/dialogs.ts` rather than from here.
+//
+// Suggestions are Autocomplete's, not this component's. Put `autocomplete` on
+// the bar's input and the combobox, its listbox and the keyboard contract
+// behind them are the ones already implemented and tested. The search view
+// holds content - recent searches, results, filters - and takes no composite
+// role of its own; see SEMANTICS.md.
+//
+// Tokens follow md.comp.search-bar.* / md.comp.search-view.* at DSP 34.0.21
+//   bar          56dp, corner-full, surface-container-high, elevation 3
+//   input        body-large / on-surface; the placeholder is M3's supporting
+//                text, hence on-surface-variant
+//   icons        24dp; leading on-surface, trailing on-surface-variant
+//   avatar       30dp, corner-full
+//   spacing      16dp at an end with no action, 4dp at one with an icon
+//                button, which carries its own 12dp inset
+//   view         surface-container-high, corner-medium, elevation 3, 2dp
+//                below the bar
+//   full-screen  fills the viewport, no corners, 72dp header
+//   divider      outline
+//
+// The bar and the docked view are both the *contained* (Expressive) variant,
+// which is what the 4dp/16dp spacing pair and the 2dp gap belong to; taking
+// the shape from the divided/baseline set instead would mix two anatomies.
+// `--md-comp-search-view-max-height` is a framework knob, not a DSP token -
+// M3 sizes the docked view by its content and leaves the cap to the platform.
+//
+// Nest descendants inside these blocks, and keep `$_bar` wrapped in `:is()` -
+// a bare list interpolated into `.search-view > #{$_bar}` breaks out of its
+// context and emits a top-level rule.
+
+$_bar: ":is(.search-bar, .searchbar)";
+
+#{$_bar} {
+  --md-comp-search-bar-container-color: var(--md-sys-color-surface-container-high);
+  --md-comp-search-bar-container-height: 56px;
+  --md-comp-search-bar-container-shape: 9999px;
+  --md-comp-search-bar-leading-space: 16px;
+  --md-comp-search-bar-trailing-space: 16px;
+  --md-comp-search-bar-icon-label-space: 16px;
+  --md-comp-search-bar-icon-size: 24px;
+  --md-comp-search-bar-avatar-size: 30px;
+
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--md-comp-search-bar-icon-label-space);
+  width: 100%;
+  min-height: var(--md-comp-search-bar-container-height);
+  padding-inline: var(--md-comp-search-bar-leading-space)
+    var(--md-comp-search-bar-trailing-space);
+  border-radius: var(--md-comp-search-bar-container-shape);
+  background-color: var(--md-comp-search-bar-container-color);
+  color: var(--md-sys-color-on-surface);
+  @include z-depth("3");
+
+  // An icon *button* already insets its glyph by 12dp, so M3 pulls the end
+  // space in to 4dp beside one. A bare glyph keeps the full 16dp.
+  // A `form[method="dialog"]` wrapper is spelled out rather than folded into
+  // the compound: `:has()` may not be nested inside `:has()`, and because the
+  // argument list is forgiving, `form:has(> .icon-button)` in there would be
+  // dropped silently rather than reported.
+  &:has(> .icon-button:first-child),
+  &:has(> form:first-child > .icon-button) {
+    --md-comp-search-bar-leading-space: 4px;
+  }
+
+  // The docked view is a child of the bar but out of flow, so the last
+  // *control* is the last child that is not it - `:last-child` alone reads the
+  // view as the trailing element and leaves the icon button on 16dp.
+  &:has(> .icon-button:nth-last-child(1 of :not(.search-view))),
+  &:has(> form:nth-last-child(1 of :not(.search-view)) > .icon-button) {
+    --md-comp-search-bar-trailing-space: 4px;
+  }
+
+  // A leading or trailing action wrapped in `form[method="dialog"]` - how the
+  // full-screen view closes itself without script.
+  > form {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin: 0;
+  }
+
+  > #{$icon} {
+    flex: 0 0 auto;
+    font-size: var(--md-comp-search-bar-icon-size);
+    width: var(--md-comp-search-bar-icon-size);
+    height: var(--md-comp-search-bar-icon-size);
+    line-height: var(--md-comp-search-bar-icon-size);
+    color: var(--md-sys-color-on-surface);
+  }
+
+  > #{$icon}:nth-last-child(1 of :not(.search-view)) {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  // An account avatar, the one non-icon element M3 puts in the bar. A tappable
+  // one goes inside a button, which brings its own 48dp target.
+  > img {
+    flex: 0 0 auto;
+    width: var(--md-comp-search-bar-avatar-size);
+    height: var(--md-comp-search-bar-avatar-size);
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  // The input carries none of the text-field chrome: no underline, no floating
+  // label, no 56dp block of its own. It is the bar that is the container.
+  > input {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    box-shadow: none;
+    color: var(--md-sys-color-on-surface);
+    @include typescale("body-large");
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    // The UA's own clear affordance duplicates the trailing icon button M3
+    // asks for, and cannot be styled to match it.
+    &::-webkit-search-cancel-button {
+      appearance: none;
+    }
+  }
+
+  // Pre-1.0 `.searchbar` sat in a navbar beside a fixed drawer.
+  &.has-sidebar {
+    margin-inline-start: 0;
+
+    @include bp-up("expanded") {
+      // `width: auto`, because the margin sits *outside* the base bar's
+      // `width: 100%`: the two together make the bar 100% + 300px wide and
+      // push its trailing edge past the viewport, on exactly the fixed-drawer
+      // layout this rule exists to preserve. The legacy bar had no width of
+      // its own, so the margin shrank it.
+      width: auto;
+      margin-inline-start: 300px;
+    }
+  }
+}
+
+.search-view {
+  --md-comp-search-view-container-color: var(--md-sys-color-surface-container-high);
+  --md-comp-search-view-container-shape: 12px;
+  --md-comp-search-view-header-height: 56px;
+  --md-comp-search-view-divider-color: var(--md-sys-color-outline);
+  --md-comp-search-view-bar-results-gap: 2px;
+  --md-comp-search-view-max-height: 60vh;
+
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 1;
+  inset-inline: 0;
+  top: calc(100% + var(--md-comp-search-view-bar-results-gap));
+  display: flex;
+  flex-direction: column;
+  max-height: var(--md-comp-search-view-max-height);
+  // The surface scrolls when its content is loose (a <div> of results); when
+  // the content is a `.list` the list scrolls instead, so a header and its
+  // divider stay put. Which of the two moves depends on the composition, so
+  // both declare it.
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border-radius: var(--md-comp-search-view-container-shape);
+  background-color: var(--md-comp-search-view-container-color);
+  color: var(--md-sys-color-on-surface);
+  @include z-depth("3");
+
+  // Two ways this surface is closed, and an author `display` beats both of the
+  // UA rules that do the hiding - `[hidden] { display: none }` for the docked
+  // element and `dialog:not([open]) { display: none }` for the full-screen
+  // one. The second is the one that bites: without it a closed <dialog> paints
+  // an opaque panel over the whole viewport, and no visual baseline exists to
+  // catch it on the change that introduces the page.
+  &[hidden],
+  &:not([open]):is(dialog) {
+    display: none;
+  }
+
+  // The view's own header is a search bar with the pill taken off - the same
+  // markup, so nothing new to learn for the full-screen variant.
+  > #{$_bar} {
+    flex: 0 0 auto;
+    min-height: var(--md-comp-search-view-header-height);
+    border-radius: 0;
+    background-color: transparent;
+    @include z-depth("0");
+  }
+
+  > hr {
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    width: 100%;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background-color: var(--md-comp-search-view-divider-color);
+  }
+
+  > .list {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    margin: 0;
+    padding-block: 8px;
+  }
+}
+
+// Full-screen. The UA caps a modal dialog at `calc(100% - 2em - 6px)`, so
+// width: 100% alone leaves a strip of scrim down the side - the same clearing
+// dialog.max and the bottom sheet already do.
+.search-view.full-screen {
+  --md-comp-search-view-container-shape: 0;
+  --md-comp-search-view-header-height: 72px;
+  --md-comp-search-view-max-height: none;
+
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  height: 100%;
+  margin: 0;
+
+  &::backdrop {
+    background: none;
+    backdrop-filter: none;
+  }
+}

package/src/sass/components/_segmented-buttons.scss

@@ -0,0 +1,188 @@
+@use "../abstracts" as *;
+
+// Segmented buttons.
+//
+// Anatomy is the HTML. A <fieldset class="segmented-button"> is the group and
+// its <legend> names it. Each segment is an <input> and the
+// <label class="segment"> beside it, tied by id: radios make the group
+// single-select, checkboxes make it multi-select, and the input type is the
+// whole difference.
+//
+// The control is the label's *sibling*, not its child, which is the same
+// arrangement filter chips use and for the same reason: to
+// forms/_radio-buttons and forms/_checkboxes, a <label> wrapping one of those
+// inputs *is* a radio or a checkbox. They would paint a 20dp ring on the
+// input, stretch the label to a 48dp row and, for a checkbox, mask a
+// checkmark onto its ::before - none of which a segment wants, and all of
+// which outweigh a segment rule that only names two classes.
+//
+// Nothing here is scripted, and that is the point. The browser owns the
+// checked state and, for radios, the arrow-key model a single-select group
+// promises: SEMANTICS rule 2 asks that a composite keyboard contract be
+// implemented before the role is claimed, and the native one is implemented
+// by the platform. No ARIA role is declared, so none is withheld.
+//
+// Tokens follow M3, md.comp.outlined-segmented-button.* (DSP 34.0.21):
+//   container    40dp, corner.full, 1dp outline, dividers between segments
+//   segment      12dp insets, 18dp icon, 8dp icon-label space, label-large
+//   unselected   on-surface on a transparent container
+//   selected     on-secondary-container on secondary-container
+//   state layer  8% hover, 10% press (focus is the ring, not a layer)
+//   disabled     label and icon at 38%, outline at 12%
+.segmented-button {
+  --md-comp-outlined-segmented-button-container-height: 40px;
+  --md-comp-outlined-segmented-button-container-shape: 9999px;
+  --md-comp-outlined-segmented-button-outline-width: 1px;
+  --md-comp-outlined-segmented-button-outline-color: var(--md-sys-color-outline);
+  --md-comp-outlined-segmented-button-leading-space: 12px;
+  --md-comp-outlined-segmented-button-trailing-space: 12px;
+  --md-comp-outlined-segmented-button-icon-size: 18px;
+  --md-comp-outlined-segmented-button-icon-label-space: 8px;
+  --md-comp-outlined-segmented-button-label-text-color: var(--md-sys-color-on-surface);
+  --md-comp-outlined-segmented-button-selected-container-color: var(--md-sys-color-secondary-container);
+  --md-comp-outlined-segmented-button-selected-label-text-color: var(--md-sys-color-on-secondary-container);
+
+  // A <fieldset> arrives with a border, 16dp of padding and a min-width; the
+  // group's own outline replaces all three.
+  box-sizing: border-box;
+  // Equal columns across whatever inline size the group is given, which is
+  // what M3 specifies - material-web's own set is `grid-auto-columns: 1fr` on
+  // a full-width grid, not a shrink-wrapped row. Constrain the group with a
+  // width or a wrapper when it should be narrower than its container.
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  border: var(--md-comp-outlined-segmented-button-outline-width) solid
+    var(--md-comp-outlined-segmented-button-outline-color);
+  border-radius: var(--md-comp-outlined-segmented-button-container-shape);
+  // Squares the segments off against the pill, so the end segments' fill and
+  // their focus ring both stop at the outline.
+  overflow: hidden;
+
+  & + & {
+    margin-block-start: 24px;
+  }
+
+  // M3's anatomy has no visible group label. A set of radios is only a set
+  // because a <fieldset> says so, and a <fieldset> is only named because of
+  // its <legend> — so the legend is the accessible name and nothing else.
+  //
+  // There is deliberately no modifier that shows it. The root is both the
+  // fieldset and the grid of segments, so a legend back in flow is another
+  // column beside them; putting it above the pill would take an inner
+  // wrapper the markup does not have. A group that needs a visible label
+  // writes one before the fieldset and leaves the legend as the name.
+  > legend {
+    @include visually-hidden();
+  }
+
+  // The control carries the state and the form value; the label is the
+  // segment. Clipped rather than `display: none` so it stays focusable — and
+  // so the arrow keys still move between the radios.
+  > input {
+    @include visually-hidden();
+    border: 0;
+    appearance: none;
+  }
+
+  > .segment {
+    // Read back by the state layer below, so hover and press are one rule
+    // each rather than one per selected/unselected pair.
+    --_label-color: var(--md-comp-outlined-segmented-button-label-text-color);
+    --_container-color: transparent;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--md-comp-outlined-segmented-button-icon-label-space);
+    margin: 0;
+    min-block-size: calc(
+      var(--md-comp-outlined-segmented-button-container-height) - 2 *
+        var(--md-comp-outlined-segmented-button-outline-width)
+    );
+    padding-inline: var(--md-comp-outlined-segmented-button-leading-space)
+      var(--md-comp-outlined-segmented-button-trailing-space);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    color: var(--_label-color);
+    background-color: var(--_container-color);
+    transition: background-color .2s ease, color .2s ease;
+    @include typescale("label-large");
+  }
+
+  // Divider, not a border on every segment: the group's own outline is the
+  // outer edge, so only the joins are drawn. `:first-of-type` counts labels,
+  // and every segment is one — the legend and the inputs are other types.
+  > .segment:not(:first-of-type) {
+    border-inline-start: var(--md-comp-outlined-segmented-button-outline-width) solid
+      var(--md-comp-outlined-segmented-button-outline-color);
+  }
+
+  // Selected is the input's business. The adjacency is what lets the label
+  // read a state only the control has, with no class for the page to sync.
+  > input:checked + .segment {
+    --_label-color: var(--md-comp-outlined-segmented-button-selected-label-text-color);
+    --_container-color: var(--md-comp-outlined-segmented-button-selected-container-color);
+  }
+
+  > .segment > #{$icon} {
+    font-size: var(--md-comp-outlined-segmented-button-icon-size);
+    width: var(--md-comp-outlined-segmented-button-icon-size);
+    height: var(--md-comp-outlined-segmented-button-icon-size);
+    line-height: var(--md-comp-outlined-segmented-button-icon-size);
+    color: inherit;
+  }
+
+  > input:not(:disabled) + .segment {
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--_label-color) state-opacity("hover"),
+        var(--_container-color)
+      );
+    }
+
+    &:active {
+      background-color: color-mix(
+        in oklab,
+        var(--_label-color) state-opacity("pressed"),
+        var(--_container-color)
+      );
+    }
+  }
+
+  // The ring is drawn inside the segment: `overflow: hidden` above would clip
+  // an outline sitting outside it, and the end segments would lose half of it
+  // to the pill's own corner.
+  > input:focus-visible + .segment {
+    @include focus-ring();
+    outline-offset: -3px;
+  }
+
+  > input:disabled + .segment {
+    --_label-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    cursor: default;
+  }
+}
+
+.segmented-button:disabled {
+  --md-comp-outlined-segmented-button-outline-color: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) 12%,
+    transparent
+  );
+  --md-comp-outlined-segmented-button-label-text-color: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) 38%,
+    transparent
+  );
+
+  > .segment {
+    cursor: default;
+  }
+}

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;