@expressivecss/expressive 0.2.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

@@ -1,95 +1,160 @@
 @use "../abstracts" as *;
 
+// Carousel. Two layouts, one class:
+//   .carousel           3D coverflow (JS)
+//   .carousel.flat      linear snap track (CSS).
+//
+// 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) {
+  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 {
+  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 {
+    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;
+}

package/src/sass/components/_chips.scss

@@ -43,7 +43,7 @@
   border-radius: 12px;
 }
 
-.chip > .material-icons {
+.chip > :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
   font-size: var(--font-size-icon);
   color: var(--md-sys-color-on-surface-variant);
 }