@expressivecss/expressive 0.3.0 → 0.4.0

package/src/sass/components/_cards.scss

@@ -3,9 +3,10 @@
 // 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
@@ -16,7 +17,7 @@
 //   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);
@@ -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/_collapsible.scss

@@ -5,8 +5,7 @@
 // omit it (or add .expandable) so several can stay open. The `open`
 // attribute is the preselected section.
 //
-// <ul>/<li> + .collapsible-header / .collapsible-body stay as aliases.
-// .collapsible-accordion is the default and does nothing extra.
+// JS wraps non-summary children in a div so height can clip.
 //
 // Tokens:
 //   --md-comp-collapsible-shape              12px
@@ -48,11 +47,11 @@
   color: var(--md-sys-color-on-surface);
   @include z-depth("1");
 
-  > :is(details, li) + :is(details, li) {
+  > details + details {
     border-top: 1px solid var(--md-comp-collapsible-outline-color);
   }
 
-  :is(summary, .collapsible-header) {
+  summary {
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -102,7 +101,7 @@
     }
   }
 
-  :is(details[open] > summary, .active > .collapsible-header)::after {
+  details[open] > summary::after {
     transform: rotate(180deg);
     transition-timing-function: var(--md-comp-collapsible-easing-open);
   }
@@ -111,9 +110,9 @@
     flex-grow: 1;
   }
 
-  // Shared body for the <ul> alias and for <details> (JS wraps the
-  // latter). Text stays painted and is clipped as the row shrinks.
-  .collapsible-body {
+  // JS wraps non-summary children. Text stays painted and is clipped
+  // as the row shrinks.
+  details > :not(summary) {
     display: grid;
     grid-template-rows: 0fr;
     box-sizing: border-box;
@@ -128,19 +127,18 @@
     }
   }
 
-  .active > .collapsible-body,
-  details[open] > .collapsible-body {
+  details[open] > :not(summary) {
     grid-template-rows: 1fr;
     transition-timing-function: var(--md-comp-collapsible-easing-open);
   }
 
   // UA `display: none` on closed details children. Keep our wrapper as
   // a grid so 0fr can clip instead of popping the copy away.
-  details:not([open]) > .collapsible-body {
+  details:not([open]) > :not(summary) {
     display: grid;
   }
 
-  &.no-icon :is(summary, .collapsible-header)::after {
+  &.no-icon summary::after {
     content: none;
   }
 
@@ -150,7 +148,7 @@
     background: transparent;
     @include z-depth("0");
 
-    > :is(details, li) {
+    > details {
       margin-inline: var(--md-comp-collapsible-popout-inset);
       overflow: hidden;
       border: 0;
@@ -161,11 +159,11 @@
       @include z-depth("1");
     }
 
-    > :is(details, li) + :is(details, li) {
+    > details + details {
       border-top: 0;
     }
 
-    > :is(details[open], li.active) {
+    > details[open] {
       margin-block: var(--md-comp-collapsible-popout-gap);
       margin-inline: 0;
       transition-timing-function: var(--md-comp-collapsible-easing-open);

package/src/sass/components/_collection.scss

@@ -4,8 +4,7 @@
 // as the first child of an item is the header. An <a> may be the item
 // (old <div class="collection"> markup) or live inside an <li>.
 //
-// Aliases: .collection-item, .collection-header, .with-header, .avatar,
-// .title, .secondary-content. .flush drops the boxed outline.
+// .flush drops the boxed outline.
 //
 // Tokens:
 //   --md-comp-collection-shape              12px
@@ -40,7 +39,7 @@
     border-top: 1px solid var(--md-comp-collection-outline-color);
   }
 
-  > :is(li, a, .collection-item, .collection-header) {
+  > :is(li, a) {
     display: grid;
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
@@ -96,14 +95,14 @@
       grid-row: 2;
     }
 
-    > :is(.secondary-content, .badge) {
+    > :is(a:last-child, .badge) {
       grid-column: 3;
       grid-row: 1 / -1;
       align-self: center;
       justify-self: end;
     }
 
-    > a:not(.secondary-content, .btn, .btn-floating, .badge) {
+    > a:not(.badge) {
       grid-column: 1 / -1;
       display: flex;
       align-items: center;
@@ -118,12 +117,11 @@
     }
   }
 
-  > :is(li, .collection-item):is(.avatar, :has(> .circle)),
-  > a:has(> .circle) {
+  > :is(li, a):has(> .circle) {
     min-height: 72px;
   }
 
-  > :is(.collection-header, li:has(> :is(h1, h2, h3, h4, h5, h6))) {
+  > li:has(> :is(h1, h2, h3, h4, h5, h6)) {
     min-height: 0;
     padding-block: 12px;
 
@@ -135,12 +133,12 @@
   }
 
   > a,
-  > li > a:not(.secondary-content, .btn, .btn-floating) {
+  > li > a {
     @include focus-visible;
   }
 
   > a:hover,
-  > li:has(> a:not(.secondary-content, .btn, .btn-floating):hover) {
+  > li:has(> a:hover) {
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
   }
 
@@ -149,7 +147,7 @@
     background-color: var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
 
-    .secondary-content:not(.btn, .btn-floating) {
+    > a:last-child {
       color: var(--md-sys-color-on-secondary-container);
     }
 
@@ -163,16 +161,6 @@
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   }
 
-  .secondary-content {
-    float: none;
-    margin-inline-start: auto;
-    @include focus-visible;
-
-    &:not(.btn, .btn-floating) {
-      color: var(--md-sys-color-primary);
-    }
-  }
-
   span.badge {
     float: none;
     margin-block: 0;
@@ -185,12 +173,6 @@
   }
 }
 
-// Keep the hook public so pages that used it outside a collection still
-// color the trailing action. Layout (no float) is owned by .collection.
-.secondary-content:not(.btn, .btn-floating) {
-  color: var(--md-sys-color-primary);
-}
-
 .collapsible .collection {
   margin: 0;
   border: none;

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;