@expressivecss/expressive 0.2.0 → 0.4.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

@@ -2,10 +2,10 @@
 
 // Common buttons and FABs.
 //
-// Anatomy is the HTML. A <button> (or <a class="button"> / .btn) is a filled
-// common button. Put an <i> first or last for a leading/trailing icon — no
-// icon-left / icon-right required. Icon-only is a 40dp icon button. Helpers
-// switch the M3 variant (tonal, outlined, elevated, text) or the size.
+// Anatomy is the HTML. A <button> (or <a class="button">) is a filled
+// common button. Put an <i> first or last for a leading/trailing icon.
+// Icon-only is a 40dp icon button. Helpers switch the M3 variant
+// (tonal, outlined, elevated, text) or the size.
 //
 // Tokens follow https://m3.material.io/components/buttons/specs
 //   height 40 / 32 small / 56 large, label-large, 20dp stadium
@@ -28,7 +28,7 @@
 // Widget chrome that happens to be a <button> — not a common button.
 $_not-btn: ".datepicker-day-button, .month-prev, .month-next, .indicator-item-btn";
 
-$_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-small";
+$_btn: "button:not(#{$_not-btn}), a.button";
 
 :where(#{$_btn}) {
   @include btn;
@@ -69,7 +69,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
 }
 
 // Default variant is filled. :where() keeps specificity at zero so .tonal etc. win.
-:where(#{$_btn}):not(.tonal, .outlined, .border, .elevated, .text, .transparent, .btn-flat) {
+:where(#{$_btn}):not(.tonal, .outlined, .elevated, .text) {
   @include btn-filled;
 }
 
@@ -77,8 +77,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   @include btn-tonal;
 }
 
-:where(#{$_btn}).outlined,
-:where(#{$_btn}).border {
+:where(#{$_btn}).outlined {
   @include btn-outlined;
 }
 
@@ -86,20 +85,12 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   @include btn-elevated;
 }
 
-:where(#{$_btn}).text,
-:where(#{$_btn}).transparent,
-.btn-flat {
+:where(#{$_btn}).text {
   @include btn-flat;
 }
 
-// icon-right is a compat alias: new markup puts the icon last in the DOM.
-:where(#{$_btn}).icon-right {
-  flex-direction: row-reverse;
-}
-
 // Sizes. small = 32dp, large/extra = 56dp (M3 extra-large / FAB height).
-:where(#{$_btn}).small,
-.btn-small {
+:where(#{$_btn}).small {
   --md-comp-filled-button-container-height: 32px;
   --md-comp-filled-button-container-shape: 16px;
   --md-comp-filled-button-leading-space: 16px;
@@ -111,8 +102,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
 }
 
 :where(#{$_btn}).large,
-:where(#{$_btn}).extra,
-.btn-large {
+:where(#{$_btn}).extra {
   --md-comp-filled-button-container-height: 56px;
   --md-comp-filled-button-container-shape: 28px;
   --md-comp-filled-button-leading-space: 24px;
@@ -126,11 +116,6 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   border-radius: 9999px;
 }
 
-.btn-block {
-  display: flex;
-  width: 100%;
-}
-
 // Extended FAB: 56dp, large corners, primary-container, icon + label.
 :where(#{$_btn}).extend {
   height: 56px;
@@ -168,13 +153,10 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   }
 }
 
-// FAB. .btn-floating is the JS contract (FloatingActionButton looks it up).
-// Icon-only .extra / .large is the same 56dp regular FAB. Bare .btn-floating
-// is the 40dp small FAB.
-.btn-floating,
+// FAB. Icon-only .extra / .large is the 56dp regular FAB. Add .small for
+// the 40dp small FAB. The speed-dial host is .fixed-action-btn.
 :where(#{$_btn}).extra.circle,
-:where(#{$_btn}).large.circle,
-:where(#{$_btn}).btn-large.circle {
+:where(#{$_btn}).large.circle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -191,7 +173,6 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   vertical-align: middle;
   @include z-depth("3");
   @include focus-visible;
-  transition: background-color .2s ease-out, box-shadow .2s ease-out;
 
   > i {
     font-size: 24px;
@@ -219,8 +200,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
     );
   }
 
-  &.small,
-  &.btn-small {
+  &.small {
     width: 40px;
     height: 40px;
     border-radius: 12px;
@@ -232,100 +212,184 @@ $_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;
     }
   }
 }
 
-// Small FAB alias: .btn-floating alone is 40dp (historical size + M3 small).
-.btn-floating:not(.large, .btn-large, .extra, .small, .btn-small) {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
-
-  &.halfway-fab {
-    bottom: -20px;
-  }
-}
-
 :where(#{$_btn}):disabled,
 :where(#{$_btn})[disabled],
-:where(#{$_btn}).disabled,
-.btn-floating:disabled,
-.btn-floating[disabled],
-.btn-floating.disabled {
+:where(#{$_btn}).disabled {
   @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; }
+
+    > li > :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),
+        background-color .2s ease-out,
+        box-shadow .2s ease-out;
+      // 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;
+
+    > li > :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 +397,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) > li > :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;
 
-      li {
-        flex: 1;
-        display: inline-block;
-        margin: 0;
+      > :is(a, button) > i {
+        opacity: 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;
+
+    > li > :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;
+  }
+}