@expressivecss/expressive 0.3.0 → 0.5.0

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;
@@ -242,23 +222,9 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   }
 }
 
-// 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;
 }
 
@@ -334,12 +300,14 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
     li:nth-last-child(7) { --i: 6; }
     li:nth-last-child(8) { --i: 7; }
 
-    :is(a, button) {
+    > 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);
+        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))
@@ -351,7 +319,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
     visibility: visible;
     transition-delay: 0s;
 
-    :is(a, button) {
+    > li > :is(a, button) {
       opacity: 1;
       transform: none;
       transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));
@@ -429,7 +397,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
     padding: 0;
     height: 56px;
 
-    :is(ul, menu) :is(a, button) {
+    :is(ul, menu) > li > :is(a, button) {
       opacity: 1;
       transform: none;
       transition: opacity var(--md-comp-fab-duration);
@@ -490,7 +458,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
     visibility: visible;
     transition-delay: 0s;
 
-    :is(a, button) {
+    > li > :is(a, button) {
       opacity: 1;
       transform: none;
       transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));

package/src/sass/components/_cards.scss

@@ -3,23 +3,24 @@
 // Cards.
 //
 // Anatomy is the HTML. An <article> is an elevated card. A heading is the
-// headline, a <p> is supporting text, a direct <nav> is the action row,
+// headline, a <p> is supporting text, a direct <nav> (not .tabs) is the
+// action row,
 // <img> / <figure> is media. Helpers switch the M3 variant (filled, outlined)
-// or the layout (horizontal). .card and .card-panel stay as aliases.
+// or the layout (horizontal).
 //
 // Tokens follow https://m3.material.io/components/cards/specs
-//   container  surface, 12dp corners
+//   container  surface-container-low, 12dp corners
 //   elevated   level 1, hover level 2
-//   filled     surface-variant, level 0
+//   filled     surface-container-highest, level 0
 //   outlined   surface + 1dp outline, level 0
 //   headline   title-medium / on-surface
 //   body       body-medium / on-surface-variant
 //   padding    16dp
 
-$_card: "article, .card, .card-panel";
+$_card: "article";
 
 :where(#{$_card}) {
-  --md-comp-elevated-card-container-color: var(--md-sys-color-surface);
+  --md-comp-elevated-card-container-color: var(--md-sys-color-surface-container-low);
   --md-comp-elevated-card-container-shape: 12px;
 
   position: relative;
@@ -42,7 +43,7 @@ $_card: "article, .card, .card-panel";
 
 :where(#{$_card}).filled {
   @include z-depth("0");
-  background-color: var(--md-sys-color-surface-variant);
+  background-color: var(--md-sys-color-surface-container-highest);
 }
 
 :where(#{$_card}).outlined,
@@ -88,7 +89,8 @@ article > header {
   color: inherit;
 }
 
-article > nav {
+// Action row. nav.tabs is a tab bar, not actions — leave it to _tabs.scss.
+article > nav:not(.tabs) {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -132,8 +134,7 @@ article > figure > figcaption {
 }
 
 // Horizontal: media on the start, body stacked beside it.
-article.horizontal,
-.card.horizontal {
+article.horizontal {
   display: flex;
   flex-direction: row;
   align-items: stretch;
@@ -141,8 +142,7 @@ article.horizontal,
 
   > img,
   > picture,
-  > figure,
-  > .card-image {
+  > figure {
     flex: 0 0 40%;
     max-width: 40%;
     width: 40%;
@@ -151,8 +151,7 @@ article.horizontal,
 
   > img,
   > picture img,
-  > figure img,
-  > .card-image img {
+  > figure img {
     height: 100%;
     object-fit: cover;
   }
@@ -165,55 +164,56 @@ article.horizontal,
   }
 }
 
-// Fixed heights (Materialize sizes, still useful for uniform grids).
-article.small, .card.small { height: 300px; }
-article.medium, .card.medium { height: 400px; }
-article.large, .card.large { height: 500px; }
+// Fixed heights for uniform grids.
+article.small { height: 300px; }
+article.medium { height: 400px; }
+article.large { height: 500px; }
 
-article.small, article.medium, article.large,
-.card.small, .card.medium, .card.large {
+article.small, article.medium, article.large {
   display: flex;
   flex-direction: column;
 
-  > img, > picture, > figure, > .card-image {
+  > img, > picture, > figure {
     flex: 0 1 60%;
     min-height: 0;
     overflow: hidden;
   }
 
-  > img, > figure img, > .card-image img {
+  > img, > figure img {
     height: 100%;
   }
 
-  > p, > .card-content {
+  > p {
     flex: 1 1 auto;
     min-height: 0;
     overflow: hidden;
   }
 
-  > nav, > .card-action {
+  > nav:not(.tabs) {
     margin-top: auto;
   }
 }
 
 article.horizontal.small,
 article.horizontal.medium,
-article.horizontal.large,
-.card.horizontal.small,
-.card.horizontal.medium,
-.card.horizontal.large {
+article.horizontal.large {
   flex-direction: row;
 
-  > img, > picture, > figure, > .card-image {
+  > img, > picture, > figure {
     flex: 0 0 40%;
     max-height: none;
   }
 }
 
-// Reveal overlay. aside is the semantic name; .card-reveal is the JS alias.
-article > aside,
-.card-reveal {
-  display: none;
+// Reveal overlay. aside is the panel. Parked under the card (translateY 100%)
+// and clipped by overflow:hidden. Open is aria-expanded="true" → slide up
+// to cover. Do not use inset:0 as the closed geometry and then
+// translateY(-100%): that slides the panel *off* the card, and isOpen stays
+// true so a second click is a no-op.
+article > aside {
+  --md-comp-card-reveal-duration: 300ms;
+  --md-comp-card-reveal-easing: ease;
+
   position: absolute;
   inset: 0;
   z-index: 3;
@@ -222,107 +222,34 @@ article > aside,
   overflow-y: auto;
   background-color: var(--md-sys-color-surface);
   color: var(--md-sys-color-on-surface);
+  transform: translateY(100%);
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    transform var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing),
+    visibility 0s var(--md-comp-card-reveal-duration);
 }
 
-article.sticky > nav,
-.card.sticky-action > .card-action {
-  position: relative;
-  z-index: 4;
-  background-color: inherit;
-}
-
-article.sticky > aside,
-.card.sticky-action > .card-reveal {
-  bottom: auto;
-  height: calc(100% - 52px);
-}
-
-// Simple padded surface. Same tokens as a card with no slots.
-.card-panel {
-  padding: 16px;
-  margin: $element-top-margin 0 $element-bottom-margin 0;
-}
-
-// --- Legacy slots (.card-*) so existing markup keeps working --------------
-
-.card-title {
-  font-family: var(--md-sys-typescale-title-medium-font-family-name);
-  font-size: var(--md-sys-typescale-title-medium-font-size);
-  font-weight: var(--md-sys-typescale-title-medium-font-weight);
-  line-height: var(--md-sys-typescale-title-medium-line-height);
-  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
-}
-
-.card .card-image {
-  position: relative;
-
-  img {
-    display: block;
-    width: 100%;
-    object-fit: cover;
-  }
-
-  .card-title {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    max-width: 100%;
-    padding: 16px;
-    color: var(--md-sys-color-on-surface);
-    background: color-mix(in oklab, var(--md-sys-color-surface) 72%, transparent);
-  }
-
-  .activator {
-    position: absolute;
-    inset: 0;
-    cursor: pointer;
-  }
-
-  img.activator {
-    position: relative;
-  }
-}
-
-.card .card-content {
-  padding: 16px;
-  border-radius: 0;
-
-  p { margin: 0; }
-
-  .card-title {
-    display: block;
-    margin-bottom: 8px;
-
-    &.activator { cursor: pointer; }
-  }
+article > aside[aria-expanded="true"] {
+  transform: translateY(0);
+  visibility: visible;
+  pointer-events: auto;
+  transition: transform var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing);
 }
 
-.card .card-action {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 8px 8px;
-
-  a:not(.button):not(.btn):not(.btn-floating) {
-    @include btn-flat;
-    height: auto;
-    padding: 8px 12px;
-    min-height: 40px;
+@media (prefers-reduced-motion: reduce) {
+  article > aside {
+    transition: none;
   }
 }
 
-.card .card-stacked {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-
-  .card-content { flex-grow: 1; }
+article.sticky > nav {
+  position: relative;
+  z-index: 4;
+  background-color: inherit;
 }
 
-.card .card-image .activator {
-  cursor: pointer;
+article.sticky > aside {
+  bottom: auto;
+  height: calc(100% - 52px);
 }
-
-.no-padding { padding: 0 !important; }

package/src/sass/components/_carousel.scss

@@ -2,7 +2,7 @@
 
 // Carousel. Two layouts, one class:
 //   .carousel           3D coverflow (JS)
-//   .carousel.flat      linear snap track (CSS). .carousel-slider is an alias.
+//   .carousel.flat      linear snap track (CSS).
 //
 // Anatomy: direct children move. .carousel-item is optional. Indicators and
 // .carousel-fixed-item are chrome, not slides.
@@ -69,7 +69,7 @@
 }
 
 // Coverflow. JS writes transform / opacity / visibility on each item.
-.carousel:not(.flat):not(.carousel-slider) {
+.carousel:not(.flat) {
   perspective: 500px;
   transform-style: preserve-3d;
   transform-origin: 0% 50%;
@@ -90,8 +90,7 @@
 // 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 {
+.carousel.flat {
   overflow: hidden;
   perspective: none;
   transform: none;
@@ -149,8 +148,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .carousel.flat > .carousel-track,
-  .carousel.carousel-slider > .carousel-track {
+  .carousel.flat > .carousel-track {
     scroll-behavior: auto;
   }
 }

package/src/sass/components/_chips.scss

@@ -6,7 +6,7 @@
   --padding: 8px;
 
   color: var(--md-sys-color-on-surface-variant);
-  background-color: rgba(0, 0, 0, 0.09);
+  background-color: var(--md-sys-color-surface-container-low);
   display: inline-flex;
   white-space: nowrap;
   gap: 8px;
@@ -21,10 +21,11 @@
   user-select: none;
   vertical-align: top;
 
-  &:focus {
+  &:focus,
+  &.active {
     outline: none;
-    background-color: var(--md-sys-color-primary);
-    color:  var(--md-sys-color-on-primary);
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
   }
 }
 
@@ -60,7 +61,7 @@
 }
 
 .chip .close:hover {
-  background-color: #8888;
+  background-color: color-mix(in oklab, var(--md-sys-color-on-surface-variant) 8%, transparent);
 }
 
 //--------------------------

package/src/sass/components/_datepicker.scss

@@ -1,14 +1,5 @@
 @use "../abstracts" as *;
 
-/* Modal */
-// @removed since v2.2.1
-/*.datepicker-modal {
-  max-width: 325px;
-  // @removed since v2.2.1-dev regarding Material M3 standards
-  min-width: 300px;
-  max-height: none;
-}*/
-
 .datepicker-container {
   display: flex;
   flex-direction: column;
@@ -27,7 +18,7 @@
     display: flex;
   }
 
-  .select-wrapper {
+  .field:has(> .hide-select) {
     input {
       height: 49px;
       margin: 4px 0 0 0;
@@ -50,11 +41,6 @@
     }
   }
 
-  .select-dropdown {
-    padding: 0;
-    vertical-align: middle;
-  }
-
   .select-year input,
   .select-month input {
     background-color: transparent;