@expressivecss/expressive 0.7.0 → 0.8.0

package/src/sass/components/_expanding-card.scss

@@ -0,0 +1,260 @@
+@use "../abstracts" as *;
+
+// Expanding cards.
+//
+// A compact feed card morphs into a full-screen modal detail surface. The
+// dialog begins clipped to the measured card bounds, then expands to the
+// viewport while its hero media grows and the detail content fades in.
+
+article.expanding-card {
+  --md-comp-expanding-card-container-color: var(--md-sys-color-surface);
+  --md-comp-expanding-card-expanded-shape: 0;
+  --md-comp-expanding-card-motion-duration: 500ms;
+  --md-comp-expanding-card-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+  --md-comp-expanding-card-content-padding: 16px;
+  --md-comp-expanding-card-expanded-media-height: min(56dvh, 560px);
+}
+
+article.expanding-card > figure > .expanding-card-trigger {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: inherit;
+  box-shadow: none;
+  color: transparent;
+  cursor: pointer;
+}
+
+// The trigger covers the media, so it carries the state layer itself, off the
+// same `--md-comp-card-*` opacities the card's own layer reads.
+article.expanding-card > figure > .expanding-card-trigger:hover {
+  background-color: color-mix(in oklab, var(--md-comp-card-state-layer-color) calc(var(--md-comp-card-hover-state-layer-opacity) * 100%), transparent);
+  box-shadow: none;
+}
+
+article.expanding-card > figure > .expanding-card-trigger:focus-visible {
+  background-color: color-mix(in oklab, var(--md-comp-card-state-layer-color) calc(var(--md-comp-card-focus-state-layer-opacity) * 100%), transparent);
+  box-shadow: none;
+  outline: var(--md-comp-card-focus-indicator-thickness) solid var(--md-comp-card-focus-indicator-color);
+  outline-offset: calc(-1 * var(--md-comp-card-focus-indicator-thickness));
+}
+
+article.expanding-card > figure > .expanding-card-trigger:active {
+  background-color: color-mix(in oklab, var(--md-comp-card-state-layer-color) calc(var(--md-comp-card-pressed-state-layer-opacity) * 100%), transparent);
+  box-shadow: none;
+}
+
+article.expanding-card > header.expanding-card-summary {
+  padding-bottom: var(--md-comp-expanding-card-content-padding);
+}
+
+dialog.expanding-card-dialog {
+  --md-comp-expanding-card-from-top: 0px;
+  --md-comp-expanding-card-from-right: 0px;
+  --md-comp-expanding-card-from-bottom: 0px;
+  --md-comp-expanding-card-from-left: 0px;
+  --md-comp-expanding-card-from-media-height: 0px;
+
+  position: fixed;
+  inset: 0;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background-color: var(--md-comp-expanding-card-container-color);
+  color: var(--md-sys-color-on-surface);
+  border: 0;
+  border-radius: var(--md-comp-expanding-card-expanded-shape);
+  box-shadow: none;
+  clip-path: inset(
+    var(--md-comp-expanding-card-from-top)
+    var(--md-comp-expanding-card-from-right)
+    var(--md-comp-expanding-card-from-bottom)
+    var(--md-comp-expanding-card-from-left)
+    round var(--md-comp-card-container-shape)
+  );
+  transition: clip-path var(--md-comp-expanding-card-motion-duration) var(--md-comp-expanding-card-motion-easing);
+}
+
+dialog.expanding-card-dialog[open] {
+  display: block;
+  overflow-y: auto;
+}
+
+dialog.expanding-card-dialog::backdrop {
+  background: transparent;
+  backdrop-filter: none;
+}
+
+dialog.expanding-card-dialog.expanded {
+  clip-path: inset(0 round var(--md-comp-expanding-card-expanded-shape));
+}
+
+dialog.expanding-card-dialog > .expanding-card-hero {
+  position: relative;
+  box-sizing: border-box;
+  width: calc(100% - 16px);
+  height: var(--md-comp-expanding-card-from-media-height);
+  min-height: 0;
+  margin: 8px;
+  overflow: hidden;
+  border-radius: var(--md-comp-card-media-shape);
+  transition: height var(--md-comp-expanding-card-motion-duration) var(--md-comp-expanding-card-motion-easing);
+}
+
+dialog.expanding-card-dialog.expanded > .expanding-card-hero {
+  height: var(--md-comp-expanding-card-expanded-media-height);
+}
+
+dialog.expanding-card-dialog > .expanding-card-hero > :is(img, picture),
+dialog.expanding-card-dialog > .expanding-card-hero > picture > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+dialog.expanding-card-dialog > .expanding-card-close {
+  position: absolute;
+  inset-block-start: 16px;
+  inset-inline-start: 16px;
+  z-index: 2;
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  margin: 0;
+  padding: 0;
+  color: var(--md-sys-color-on-surface);
+  background-color: var(--md-sys-color-surface);
+  border: 0;
+  border-radius: 50%;
+  box-shadow: none;
+  opacity: 0;
+  transform: scale(.8);
+  transition:
+    opacity 150ms ease-out,
+    transform 300ms var(--md-comp-expanding-card-motion-easing);
+}
+
+dialog.expanding-card-dialog.expanded > .expanding-card-close {
+  opacity: 1;
+  transform: scale(1);
+  transition-delay: 150ms;
+}
+
+dialog.expanding-card-dialog > .expanding-card-content {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+  margin: 0;
+  padding: 0 var(--md-comp-expanding-card-content-padding) 32px;
+  overflow: visible;
+  opacity: 0;
+  transform: translateY(16px);
+  transition:
+    opacity 150ms ease-out,
+    transform 300ms var(--md-comp-expanding-card-motion-easing);
+}
+
+dialog.expanding-card-dialog.expanded > .expanding-card-content {
+  opacity: 1;
+  transform: translateY(0);
+  transition-delay: 180ms;
+}
+
+.expanding-card-detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0 0 8px;
+}
+
+.expanding-card-detail-header > :is(h1, h2, h3, h4, h5, h6) {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  color: var(--md-sys-color-on-surface);
+  @include typescale("title-large");
+}
+
+.expanding-card-actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.expanding-card-actions > .expanding-card-favorite {
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  padding: 0;
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+  border-radius: 50%;
+}
+
+.expanding-card-actions > .expanding-card-play {
+  width: 88px;
+  height: 48px;
+  min-width: 88px;
+  padding: 0;
+  color: var(--md-sys-color-on-primary-container);
+  background-color: var(--md-sys-color-primary-container);
+  border-radius: 24px;
+}
+
+.expanding-card-track {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 2px 16px;
+  align-items: center;
+  padding-block: 8px;
+}
+
+.expanding-card-track > :is(strong, span, small, time) {
+  margin: 0;
+}
+
+.expanding-card-track > strong {
+  color: var(--md-sys-color-on-surface);
+  @include typescale("body-large");
+}
+
+.expanding-card-track > small,
+.expanding-card-track > time {
+  color: var(--md-sys-color-on-surface-variant);
+  @include typescale("body-small");
+}
+
+.expanding-card-track > small {
+  grid-column: 1;
+}
+
+.expanding-card-track > time {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  dialog.expanding-card-dialog,
+  dialog.expanding-card-dialog > :is(.expanding-card-hero, .expanding-card-close, .expanding-card-content) {
+    transition: none;
+  }
+}

package/src/sass/components/_fab-menu.scss

@@ -0,0 +1,232 @@
+@use "../abstracts" as *;
+
+// FAB menu. A FAB that expands into a list of labelled actions and morphs
+// into a close button while it is open. `.fab-menu` is the host; `.active`
+// and `aria-expanded` are the framework's, never the author's.
+//
+// It shares the FloatingActionButton class with the `.fab` speed dial next
+// door and nothing else. The two never collide: `$_fab` is
+// `:is(.fab, .fixed-action-btn)`, and a class selector matches whole class
+// names, so `.fab` does not reach `.fab-menu`. The one name that looks shared
+// is `--md-comp-fab-menu-gap`, which is the speed dial's own gap token and is
+// deliberately not one of the names below.
+//
+// Tokens (M3 md.comp.fab-menu.*, DSP 34.0.21):
+//
+//   close-button   56x56, icon 20dp, corner.full, elevation 3, 8dp above list
+//   menu-item      56dp tall, icon 24dp, 24dp insets, 8dp icon-label space,
+//                  4dp between items, corner.full, elevation 0, title-medium
+//
+// The colour axis is M3's three roles, and each one moves two pairs at once:
+// the list item takes `<role>-container` / `on-<role>-container`, the close
+// button the solid `<role>` / `on-<role>`. That pairing is M3's - the close
+// button is deliberately the louder of the two.
+$_fab-menu-roles: ("primary", "secondary", "tertiary");
+
+.fab-menu {
+  --md-comp-fab-menu-close-button-container-height: 56px;
+  --md-comp-fab-menu-close-button-container-width: 56px;
+  --md-comp-fab-menu-close-button-icon-size: 20px;
+  --md-comp-fab-menu-close-button-between-space: 8px;
+  --md-comp-fab-menu-close-button-container-color: var(--md-sys-color-primary);
+  --md-comp-fab-menu-close-button-icon-color: var(--md-sys-color-on-primary);
+  --md-comp-fab-menu-menu-item-container-height: 56px;
+  --md-comp-fab-menu-menu-item-between-space: 4px;
+  --md-comp-fab-menu-menu-item-icon-size: 24px;
+  --md-comp-fab-menu-menu-item-icon-label-space: 8px;
+  --md-comp-fab-menu-menu-item-leading-space: 24px;
+  --md-comp-fab-menu-menu-item-trailing-space: 24px;
+  --md-comp-fab-menu-menu-item-container-color: var(
+    --md-sys-color-primary-container
+  );
+  --md-comp-fab-menu-menu-item-label-text-color: var(
+    --md-sys-color-on-primary-container
+  );
+  --md-comp-fab-menu-offset: 16px;
+  --md-comp-fab-menu-z: 997;
+  --md-comp-fab-menu-duration: 200ms;
+  --md-comp-fab-menu-stagger: 40ms;
+  --md-comp-fab-menu-easing: cubic-bezier(0.65, 0, 0.35, 1);
+
+  position: fixed;
+  inset-inline-end: var(--md-comp-fab-menu-offset);
+  bottom: var(--md-comp-fab-menu-offset);
+  z-index: var(--md-comp-fab-menu-z);
+  margin: 0;
+
+  // The trigger is the host's only in-flow child, so the host is exactly its
+  // size and the list can hang off `bottom: 100%`. Taking the list out of
+  // flow is what keeps a closed menu from reserving its own height.
+  > :is(a, button) {
+    position: relative;
+    z-index: 1;
+
+    // A second glyph in the trigger is the close button's, and only one of
+    // the two is ever in the box. With one glyph the morph is the whole
+    // affordance. `inline-block` is restated rather than reverted: the icon's
+    // own rule is in this layer too, so `revert-layer` would skip past it to
+    // the base default.
+    > #{$icon}:nth-child(2) {
+      display: none;
+    }
+  }
+
+  :is(ul, menu) {
+    position: absolute;
+    inset-inline-end: 0;
+    bottom: calc(100% + var(--md-comp-fab-menu-close-button-between-space));
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--md-comp-fab-menu-menu-item-between-space);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    visibility: hidden;
+    transition: visibility 0s var(--md-comp-fab-menu-duration);
+
+    // Opening runs bottom-up, so the item nearest the FAB moves first. Past
+    // six the ladder runs out and the rest move together, which is where M3
+    // stops recommending actions anyway.
+    li:nth-last-child(1) { --i: 0; }
+    li:nth-last-child(2) { --i: 1; }
+    li:nth-last-child(3) { --i: 2; }
+    li:nth-last-child(4) { --i: 3; }
+    li:nth-last-child(5) { --i: 4; }
+    li:nth-last-child(6) { --i: 5; }
+
+    > li > :is(a, button) {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--md-comp-fab-menu-menu-item-icon-label-space);
+      height: var(--md-comp-fab-menu-menu-item-container-height);
+      padding-inline: var(--md-comp-fab-menu-menu-item-leading-space)
+        var(--md-comp-fab-menu-menu-item-trailing-space);
+      border: none;
+      border-radius: 9999px;
+      color: var(--md-comp-fab-menu-menu-item-label-text-color);
+      background-color: var(--md-comp-fab-menu-menu-item-container-color);
+      white-space: nowrap;
+      text-decoration: none;
+      cursor: pointer;
+      appearance: none;
+      opacity: 0;
+      transform: scale(.8) translateY(1rem);
+      transition:
+        opacity var(--md-comp-fab-menu-duration) var(--md-comp-fab-menu-easing),
+        transform var(--md-comp-fab-menu-duration) var(--md-comp-fab-menu-easing),
+        background-color .2s ease-out,
+        box-shadow .2s ease-out;
+      @include typescale("title-medium");
+      @include focus-visible;
+
+      > #{$icon} {
+        font-size: var(--md-comp-fab-menu-menu-item-icon-size);
+        width: var(--md-comp-fab-menu-menu-item-icon-size);
+        height: var(--md-comp-fab-menu-menu-item-icon-size);
+        line-height: var(--md-comp-fab-menu-menu-item-icon-size);
+        color: inherit;
+      }
+
+      // Enabled is elevation 0; only the states lift.
+      &:hover {
+        @include z-depth("4");
+        background-color: color-mix(
+          in oklab,
+          var(--md-comp-fab-menu-menu-item-label-text-color) state-opacity("hover"),
+          var(--md-comp-fab-menu-menu-item-container-color)
+        );
+      }
+
+      &:active,
+      &:focus {
+        @include z-depth("3");
+        background-color: color-mix(
+          in oklab,
+          var(--md-comp-fab-menu-menu-item-label-text-color) state-opacity("focus"),
+          var(--md-comp-fab-menu-menu-item-container-color)
+        );
+      }
+    }
+  }
+
+  &.active :is(ul, menu) {
+    visibility: visible;
+    transition-delay: 0s;
+
+    > li > :is(a, button) {
+      opacity: 1;
+      transform: none;
+      transition-delay: calc(var(--md-comp-fab-menu-stagger) * var(--i, 0));
+    }
+  }
+
+  // Open, the FAB is the close button: the same disc on corner.full, the
+  // solid role colour, and a 20dp glyph. Four of those are the FAB's own
+  // tokens, so retuning them is the whole morph - `.fab-menu.active` outweighs
+  // `:where(.button).extra.circle`, which contributes only `.extra.circle`.
+  &.active > :is(a, button) {
+    --md-comp-fab-container-height: var(
+      --md-comp-fab-menu-close-button-container-height
+    );
+    --md-comp-fab-container-width: var(
+      --md-comp-fab-menu-close-button-container-width
+    );
+    --md-comp-fab-container-shape: 9999px;
+    --md-comp-fab-icon-size: var(--md-comp-fab-menu-close-button-icon-size);
+
+    color: var(--md-comp-fab-menu-close-button-icon-color);
+    background-color: var(--md-comp-fab-menu-close-button-container-color);
+
+    > #{$icon}:first-child:not(:only-child) {
+      display: none;
+    }
+
+    > #{$icon}:nth-child(2) {
+      display: inline-block;
+    }
+
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-fab-menu-close-button-icon-color) state-opacity("hover"),
+        var(--md-comp-fab-menu-close-button-container-color)
+      );
+    }
+
+    &:active,
+    &:focus {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-fab-menu-close-button-icon-color) state-opacity("focus"),
+        var(--md-comp-fab-menu-close-button-container-color)
+      );
+    }
+  }
+
+  // `.primary-container` is the default and is named anyway, so all three
+  // roles are a class a page can be written with.
+  @each $role in $_fab-menu-roles {
+    &.#{$role}-container {
+      --md-comp-fab-menu-menu-item-container-color: var(
+        --md-sys-color-#{$role}-container
+      );
+      --md-comp-fab-menu-menu-item-label-text-color: var(
+        --md-sys-color-on-#{$role}-container
+      );
+      --md-comp-fab-menu-close-button-container-color: var(
+        --md-sys-color-#{$role}
+      );
+      --md-comp-fab-menu-close-button-icon-color: var(
+        --md-sys-color-on-#{$role}
+      );
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fab-menu {
+    --md-comp-fab-menu-duration: 0s;
+    --md-comp-fab-menu-stagger: 0s;
+  }
+}

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

@@ -0,0 +1,86 @@
+@use "../abstracts" as *;
+
+// Floating sheets.
+//
+// The third member of M3's sheet family (`md.comp.sheet.floating`). A
+// dialog.floating-sheet is the surface, detached from every window edge
+// instead of docked to one. showModal() is the modal variant (scrim,
+// page inert); show() is the standard variant (no scrim, the page stays
+// interactive and the sheet floats above it).
+//
+// It is a <dialog>, so every dialog slot already applies - heading, body,
+// optional <hr> and extra content, and a last-child form[method=dialog]
+// as the action row. Only the container differs, and the sheet states it
+// by re-pointing the basic-dialog container tokens at its own.
+//
+// The token set is small on purpose: md.comp.sheet.floating publishes
+// exactly three values (DSP 34.0.21) and nothing about placement.
+//   container    surface-container-low, 28dp corners, elevation 1
+//   inset        24dp from every edge; the sheet centres in what is left
+//
+// There are deliberately no edge modifiers. `.bottom` and `.left` /
+// `.right` already select a bottom or side sheet, so a floating sheet
+// that borrowed those names would pick up two sheets' rules at once.
+// Author placement with `inset` / `margin` when a corner is wanted.
+
+dialog.floating-sheet {
+  --md-comp-floating-sheet-container-color: var(--md-sys-color-surface-container-low);
+  --md-comp-floating-sheet-container-shape: 28px;
+  --md-comp-floating-sheet-container-max-width: 400px;
+  --md-comp-floating-sheet-inset: 24px;
+
+  // The surface is the dialog's; the sheet only swaps what it owns.
+  --md-comp-basic-dialog-container-color: var(--md-comp-floating-sheet-container-color);
+  --md-comp-basic-dialog-container-shape: var(--md-comp-floating-sheet-container-shape);
+
+  box-sizing: border-box;
+  position: fixed;
+  inset: var(--md-comp-floating-sheet-inset);
+  width: min(
+    var(--md-comp-floating-sheet-container-max-width),
+    calc(100% - 2 * var(--md-comp-floating-sheet-inset))
+  );
+  min-width: 0;
+  max-width: var(--md-comp-floating-sheet-container-max-width);
+  // `inset` sets both block edges, and an `auto` height between two fixed
+  // edges is *solved*, not shrink-wrapped - the sheet would fill the window
+  // whatever it holds. `fit-content` makes all three non-auto, which is the
+  // case where auto margins centre instead.
+  height: fit-content;
+  // A percentage max-height resolves against the containing block, which is
+  // the whole viewport - not the box `inset` leaves. At 100% a tall sheet
+  // grew to viewport height, went over-constrained, and auto margins split
+  // the overflow as -24px top and bottom: the inset disappeared exactly when
+  // the sheet was large enough to need it.
+  max-height: calc(100% - 2 * var(--md-comp-floating-sheet-inset));
+  margin: auto;
+  @include z-depth("1");
+  opacity: 1;
+  scale: 1;
+  transition: opacity 200ms ease, scale 200ms ease;
+
+  // Non-modal `show()` is not in the top layer - sit above page content
+  // and below snackbars (z-index 10000).
+  &:not(:modal) {
+    z-index: 1100;
+  }
+
+  // Standard: no scrim. Modal keeps the basic-dialog backdrop.
+  &:not(:modal)::backdrop {
+    background: none;
+    backdrop-filter: none;
+  }
+}
+
+@starting-style {
+  dialog.floating-sheet[open] {
+    opacity: 0;
+    scale: 0.9;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  dialog.floating-sheet {
+    transition: none;
+  }
+}