@expressivecss/expressive 0.1.0 → 0.3.0

package/src/sass/components/_breadcrumb.scss

@@ -1,29 +1,106 @@
 @use "../abstracts" as *;
 
+// Breadcrumbs. Anatomy is the HTML: a <nav> whose child is an <ol> of
+// links. The last crumb is the current page (aria-current="page").
+// .breadcrumb / .breadcrumb-wrapper stay as aliases.
+//
+// Tokens:
+//   --md-comp-breadcrumb-label-color      ancestors
+//   --md-comp-breadcrumb-current-color    current page
+//   --md-comp-breadcrumb-separator        "/"
+//   --md-comp-breadcrumb-gap              8px
+//
+// Nest descendants inside this block. `#{$_crumb} > ol` would only attach
+// `> ol` to the last item in the list (same bug as the icon size classes).
+
+nav:has(> ol):not(.pagination),
+nav:has(> .breadcrumb),
 .breadcrumb-wrapper {
+  --md-comp-breadcrumb-label-color: var(--md-sys-color-on-surface-variant);
+  --md-comp-breadcrumb-current-color: var(--md-sys-color-on-surface);
+  --md-comp-breadcrumb-separator: "/";
+  --md-comp-breadcrumb-gap: 8px;
+
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-}
+  margin: 0;
+  padding: 0;
+  color: var(--md-comp-breadcrumb-label-color);
+  @include typescale("body-small");
 
-.breadcrumb {
-  display: inline-flex;
-  align-items: center;
+  &.nowrap {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  > ol {
+    display: flex;
+    flex-wrap: inherit;
+    align-items: center;
+    list-style: none;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+
+    > li {
+      display: inline-flex;
+      align-items: center;
+      min-width: 0;
+    }
 
-  i,
-  i.material-icons, i.material-symbols-outlined,
-  i.material-symbols-rounded, i.material-symbols-sharp,
-  &:before {
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
+    > li:has(> [aria-current="page"]) {
+      flex-shrink: 0;
+    }
+
+    // Separator before every crumb after the first. A real character, not
+    // a private-use icon-font slot — no Symbols file required.
+    > li + li::before {
+      content: var(--md-comp-breadcrumb-separator);
+      margin-inline: var(--md-comp-breadcrumb-gap);
+      color: var(--md-comp-breadcrumb-label-color);
+    }
+  }
+
+  > .breadcrumb + .breadcrumb::before {
+    content: var(--md-comp-breadcrumb-separator);
+    margin-inline: var(--md-comp-breadcrumb-gap);
+    color: var(--md-comp-breadcrumb-label-color);
+  }
+
+  :is(a, .breadcrumb) {
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+    color: var(--md-comp-breadcrumb-label-color);
+    text-decoration: none;
+    @include focus-visible;
+
+    &:hover {
+      color: var(--md-comp-breadcrumb-current-color);
+    }
   }
 
-  &:before {
-    content: '\E5CC';
-    font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
+  [aria-current="page"] {
+    color: var(--md-comp-breadcrumb-current-color);
   }
 
-  &:first-child:before {
-    visibility: hidden;
+  i {
+    font-size: 1.125em;
+    margin-inline-end: 4px;
   }
 }
+
+// Inside a top app bar the trail follows the bar, not the muted ancestor
+// pair. Loose .breadcrumb links in the bar are already excluded from
+// destination styling in _navbar.scss.
+header:has(> nav) > nav:has(> ol):not(.pagination),
+header:has(> nav) > nav:has(> .breadcrumb) {
+  --md-comp-breadcrumb-label-color: inherit;
+  --md-comp-breadcrumb-current-color: inherit;
+}

package/src/sass/components/_buttons.scss

@@ -232,12 +232,12 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
 
   &.halfway-fab {
     position: absolute;
-    right: 24px;
+    inset-inline-end: 24px;
     bottom: -28px;
 
     &.left {
-      right: auto;
-      left: 24px;
+      inset-inline-end: auto;
+      inset-inline-start: 24px;
     }
   }
 }
@@ -262,70 +262,166 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   @include btn-disabled;
 }
 
-// Fixed Action Button — JS-driven menu around a FAB.
+// Speed dial. .active (and :hover when the pointer can hover) opens the
+// menu. Motion is CSS. .click-to-toggle is the markup switch for click
+// mode. .fixed-action-btn stays the public class.
+//
+// Tokens:
+//   --md-comp-fab-offset            16px from the corner
+//   --md-comp-fab-z                 997
+//   --md-comp-fab-menu-gap          16px
+//   --md-comp-fab-duration          200ms
+//   --md-comp-fab-stagger           40ms
+//   --md-comp-fab-easing            soft ease-in-out
+//   --md-comp-fab-travel            center-to-center step into the main disc
+//   --md-comp-fab-hidden-transform  toward / into the main button
 .fixed-action-btn {
+  --md-comp-fab-offset: 16px;
+  --md-comp-fab-z: 997;
+  --md-comp-fab-menu-gap: 16px;
+  --md-comp-fab-duration: 200ms;
+  --md-comp-fab-stagger: 40ms;
+  --md-comp-fab-easing: cubic-bezier(0.65, 0, 0.35, 1);
+  --md-comp-fab-travel: 64px;
+  --md-comp-fab-hidden-transform: scale(0)
+    translateY(calc(var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
+
   position: fixed;
-  right: 23px;
-  bottom: 23px;
-  padding-top: 15px;
-  margin-bottom: 0;
-  z-index: 997;
-
-  &.active {
-    ul {
-      visibility: visible;
-      padding-left: 0;
-      list-style-type: none;
+  inset-inline-end: var(--md-comp-fab-offset);
+  bottom: var(--md-comp-fab-offset);
+  z-index: var(--md-comp-fab-z);
+  padding-top: var(--md-comp-fab-menu-gap);
+  margin: 0;
+  overflow: visible;
+
+  // Main disc stays above retracting actions so they slide under it.
+  > :is(a, button) {
+    position: relative;
+    z-index: 1;
+  }
+
+  :is(ul, menu) {
+    --n: 1;
+    position: absolute;
+    inset-inline: 0;
+    bottom: 64px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--md-comp-fab-menu-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    visibility: hidden;
+    overflow: visible;
+    transition: visibility 0s
+      calc(var(--md-comp-fab-duration) + var(--md-comp-fab-stagger) * (var(--n) - 1));
+
+    &:has(> :nth-child(2)) { --n: 2; }
+    &:has(> :nth-child(3)) { --n: 3; }
+    &:has(> :nth-child(4)) { --n: 4; }
+    &:has(> :nth-child(5)) { --n: 5; }
+    &:has(> :nth-child(6)) { --n: 6; }
+    &:has(> :nth-child(7)) { --n: 7; }
+    &:has(> :nth-child(8)) { --n: 8; }
+
+    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:nth-last-child(7) { --i: 6; }
+    li:nth-last-child(8) { --i: 7; }
+
+    :is(a, button) {
+      opacity: 0;
+      transform: var(--md-comp-fab-hidden-transform);
+      transition:
+        opacity var(--md-comp-fab-duration) var(--md-comp-fab-easing),
+        transform var(--md-comp-fab-duration) var(--md-comp-fab-easing);
+      // Close: farthest first, so they funnel into the disc.
+      transition-delay: calc(
+        var(--md-comp-fab-stagger) * (var(--n) - 1 - var(--i, 0))
+      );
+    }
+  }
+
+  &.active :is(ul, menu) {
+    visibility: visible;
+    transition-delay: 0s;
+
+    :is(a, button) {
+      opacity: 1;
+      transform: none;
+      transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));
+    }
+  }
+
+  // Closest-to-FAB is the first child when the menu is left, right, or
+  // down (row-reverse / row / column). Top uses nth-last-child above.
+  &.direction-left,
+  &.direction-right,
+  &.direction-bottom {
+    :is(ul, menu) {
+      li:nth-child(1) { --i: 0; }
+      li:nth-child(2) { --i: 1; }
+      li:nth-child(3) { --i: 2; }
+      li:nth-child(4) { --i: 3; }
+      li:nth-child(5) { --i: 4; }
+      li:nth-child(6) { --i: 5; }
+      li:nth-child(7) { --i: 6; }
+      li:nth-child(8) { --i: 7; }
     }
   }
 
   &.direction-left,
   &.direction-right {
-    padding: 0 0 0 15px;
+    padding: 0;
 
-    ul {
-      text-align: right;
-      right: 64px;
+    :is(ul, menu) {
+      inset: auto;
       top: 50%;
-      transform: translateY(-50%);
-      height: 100%;
-      left: auto;
-      width: 500px;
+      translate: 0 -50%;
+      flex-direction: row;
+      width: max-content;
+      height: auto;
+    }
+  }
 
-      li {
-        display: inline-block;
-        margin: 7.5px 15px 0 0;
-      }
+  // Hidden offset is toward the main button, one step per index, so
+  // close sends every action into the disc.
+  &.direction-left {
+    --md-comp-fab-hidden-transform: scale(0)
+      translateX(calc(var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
+    padding-inline-start: var(--md-comp-fab-menu-gap);
+
+    :is(ul, menu) {
+      inset-inline-end: 64px;
+      flex-direction: row-reverse;
     }
   }
 
   &.direction-right {
-    padding: 0 15px 0 0;
-
-    ul {
-      text-align: left;
-      direction: rtl;
-      left: 64px;
-      right: auto;
+    --md-comp-fab-hidden-transform: scale(0)
+      translateX(calc(-1 * var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
+    padding-inline-end: var(--md-comp-fab-menu-gap);
 
-      li {
-        margin: 7.5px 0 0 15px;
-      }
+    :is(ul, menu) {
+      inset-inline-start: 64px;
     }
   }
 
   &.direction-bottom {
-    padding: 0 0 15px 0;
+    --md-comp-fab-hidden-transform: scale(0)
+      translateY(calc(-1 * var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
+    padding: 0 0 var(--md-comp-fab-menu-gap);
 
-    ul {
+    :is(ul, menu) {
+      inset: auto;
       top: 64px;
       bottom: auto;
-      display: flex;
-      flex-direction: column-reverse;
-
-      li {
-        margin: 15px 0 0 0;
-      }
+      inset-inline: 0;
     }
   }
 
@@ -333,75 +429,78 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
     padding: 0;
     height: 56px;
 
-    &.active {
-      & > a i,
-      & > button i {
-        opacity: 0;
-      }
+    :is(ul, menu) :is(a, button) {
+      opacity: 1;
+      transform: none;
+      transition: opacity var(--md-comp-fab-duration);
     }
 
-    ul {
-      display: flex;
-      top: 0;
+    &.active {
+      inset-inline: 0;
       bottom: 0;
-      z-index: 1;
+      width: 100%;
+      height: 56px;
+
+      > :is(a, button) > i {
+        opacity: 0;
+      }
 
-      li {
-        flex: 1;
-        display: inline-block;
-        margin: 0;
+      :is(ul, menu) {
+        visibility: visible;
+        position: static;
+        display: flex;
+        flex-direction: row;
+        width: 100%;
         height: 100%;
-        transition: none;
-
-        a,
-        button {
-          display: block;
-          overflow: hidden;
-          position: relative;
-          width: 100%;
-          height: 100%;
-          background-color: transparent;
-          box-shadow: none;
-          color: var(--md-sys-color-on-primary-container);
-          line-height: 56px;
-          z-index: 1;
-
-          i {
-            line-height: inherit;
-          }
-        }
+        gap: 0;
       }
     }
-  }
 
-  ul {
-    left: 0;
-    right: 0;
-    text-align: center;
-    position: absolute;
-    bottom: 64px;
-    margin: 0;
-    visibility: hidden;
-
-    li {
-      margin-bottom: 15px;
-    }
+    :is(ul, menu) li {
+      flex: 1;
+      margin: 0;
+      height: 100%;
 
-    a.btn-floating,
-    button.btn-floating {
-      opacity: 0;
+      :is(a, button) {
+        display: grid;
+        place-items: center;
+        width: 100%;
+        height: 100%;
+        background: transparent;
+        box-shadow: none;
+        color: var(--md-sys-color-on-primary-container);
+      }
     }
   }
 
   .fab-backdrop {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset: 0 auto auto 0;
     z-index: -1;
     width: 56px;
     height: 56px;
-    background-color: var(--md-sys-color-primary-container);
     border-radius: 16px;
+    background-color: var(--md-sys-color-primary-container);
     transform: scale(0);
   }
 }
+
+@media (hover: hover) {
+  .fixed-action-btn:not(.click-to-toggle):hover :is(ul, menu) {
+    visibility: visible;
+    transition-delay: 0s;
+
+    :is(a, button) {
+      opacity: 1;
+      transform: none;
+      transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fixed-action-btn {
+    --md-comp-fab-duration: 0s;
+    --md-comp-fab-stagger: 0s;
+  }
+}

package/src/sass/components/_carousel.scss

@@ -1,95 +1,162 @@
 @use "../abstracts" as *;
 
+// Carousel. Two layouts, one class:
+//   .carousel           3D coverflow (JS)
+//   .carousel.flat      linear snap track (CSS). .carousel-slider is an alias.
+//
+// Anatomy: direct children move. .carousel-item is optional. Indicators and
+// .carousel-fixed-item are chrome, not slides.
+//
+// Tokens:
+//   --md-comp-carousel-height   400px  (--carousel-height still wins)
+//   --md-comp-carousel-shape    12px
+//   --md-comp-carousel-gap      0
+
 .carousel {
-  --carousel-height: 400px;
+  --md-comp-carousel-height: 400px;
+  --md-comp-carousel-shape: 12px;
+  --md-comp-carousel-gap: 0px;
 
   overflow: hidden;
   position: relative;
   width: 100%;
-  height: var(--carousel-height);
-  perspective: 500px;
-  transform-style: preserve-3d;
-  transform-origin: 0% 50%;
+  height: var(--carousel-height, var(--md-comp-carousel-height));
+  border-radius: var(--md-comp-carousel-shape);
 
-  &.carousel-slider {
-    top: 0;
-    left: 0;
+  .carousel-item > img,
+  .carousel-item > video {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 
-    .carousel-fixed-item {
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 20px;
-      z-index: 1;
+  .indicators {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    list-style: none;
+    position: absolute;
+    inset: auto 0 0;
+    z-index: 2;
+    margin: 0;
+    padding: 16px 0;
+    border: 0;
+    background: none;
 
-      &.with-indicators {
-        bottom: 68px;
-      }
-    }
+    .indicator-item {
+      appearance: none;
+      box-sizing: border-box;
+      display: block;
+      width: 8px;
+      height: 8px;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      border-radius: 50%;
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 45%, transparent);
+      cursor: pointer;
+      transition: background-color 0.2s ease-out;
 
-    .carousel-item {
-      width: 100%;
-      height: 100%;
-      min-height: var(--carousel-height);
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      h2 {
-        font-size: 24px;
-        font-weight: 500;
-        line-height: 32px;
+      &:is(.active, [aria-current="true"]) {
+        background-color: var(--md-sys-color-primary);
       }
 
-      p {
-        font-size: 15px;
-      }
+      @include focus-visible;
     }
   }
+}
 
-  .carousel-item {
+// Coverflow. JS writes transform / opacity / visibility on each item.
+.carousel:not(.flat):not(.carousel-slider) {
+  perspective: 500px;
+  transform-style: preserve-3d;
+  transform-origin: 0% 50%;
+  touch-action: pan-y;
+
+  > .carousel-item {
     visibility: hidden;
-    width: calc(var(--carousel-height) * 0.5);
-    height: calc(var(--carousel-height) * 0.5);
     position: absolute;
     top: 0;
     left: 0;
+    width: calc(var(--carousel-height, var(--md-comp-carousel-height)) * 0.5);
+    height: calc(var(--carousel-height, var(--md-comp-carousel-height)) * 0.5);
+    overflow: hidden;
+    border-radius: var(--md-comp-carousel-shape);
+  }
+}
+
+// Linear track. The outer box clips and holds chrome (dots, fixed item).
+// Slides live in .carousel-track so they can scroll without taking the
+// controls with them — abspos children of an overflow:auto box scroll too.
+.carousel.flat,
+.carousel.carousel-slider {
+  overflow: hidden;
+  perspective: none;
+  transform: none;
+
+  > .carousel-track {
+    display: flex;
+    gap: var(--md-comp-carousel-gap);
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    touch-action: pan-x;
+    scrollbar-width: none;
 
-    & > img {
-      width: 100%;
+    &::-webkit-scrollbar {
+      display: none;
     }
   }
 
-  .indicators {
-    padding-left: 0;
-    list-style-type: none;
+  .carousel-track > .carousel-item {
+    flex: 0 0 100%;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    position: relative;
+    visibility: visible;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+  }
+
+  .carousel-fixed-item {
     position: absolute;
-    text-align: center;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0;
+    inset: auto 0 20px;
+    z-index: 1;
 
-    .indicator-item {
-      display: inline-block;
-      position: relative;
-      cursor: pointer;
-      height: 8px;
-      width: 8px;
-      margin: 24px 4px;
-      background-color: rgba(255, 255, 255, 0.45);
-      transition: background-color .3s;
-      border-radius: 50%;
+    &.with-indicators {
+      bottom: 68px;
+    }
+  }
 
-      &.active {
-        background-color: var(--md-ref-palette-primary100);
-      }
+  .carousel-item {
+    h2 {
+      @include typescale("headline-small");
+      margin: 0 0 8px;
+    }
+
+    p {
+      @include typescale("body-medium");
+      margin: 0;
     }
   }
+}
 
-  // Lightbox compatibility
-  &.scrolling .carousel-item .lightboxed,
-  .carousel-item:not(.active) .lightboxed {
-    pointer-events: none;
+@media (prefers-reduced-motion: reduce) {
+  .carousel.flat > .carousel-track,
+  .carousel.carousel-slider > .carousel-track {
+    scroll-behavior: auto;
   }
 }
+
+// Lightbox: do not open a boxed image while the track is moving.
+.carousel.scrolling .carousel-item .lightboxed,
+.carousel-item:not(.active) .lightboxed {
+  pointer-events: none;
+}