@expressivecss/expressive 0.4.0 → 0.5.0

package/src/sass/components/_cards.scss

@@ -9,9 +9,9 @@
 // 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
@@ -20,7 +20,7 @@
 $_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;
@@ -43,7 +43,7 @@ $_card: "article";
 
 :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,

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/_dialog.scss

@@ -0,0 +1,268 @@
+@use "../abstracts" as *;
+
+// Dialogs (M3 Expressive).
+//
+// Anatomy is the HTML. A <dialog> is a basic dialog: optional leading
+// <i>, a heading, supporting <p> (or a wrapping <div>), optional <hr>
+// + extra content, and a last-child <form method="dialog"> or <nav>
+// as the action row. dialog.max is the full-screen variant: a <header>
+// holds close, the headline, and the confirming action.
+//
+// Tokens follow https://m3.material.io/components/dialogs/specs
+//   basic        surface-container-high, 28dp corners, 280–560dp, elevation 3
+//   headline     headline-small / on-surface (centered when an icon leads)
+//   body         body-medium / on-surface-variant
+//   icon         24dp, secondary
+//   actions      text buttons, end-aligned, 8dp gap
+//   padding      24dp; 16dp between headline and body
+//   scrim        32% + 12px blur
+//   full-screen  surface, 64dp header, no corners, no scrim
+
+dialog {
+  --md-comp-basic-dialog-container-color: var(--md-sys-color-surface-container-high);
+  --md-comp-basic-dialog-container-shape: 28px;
+  --md-comp-basic-dialog-container-min-width: 280px;
+  --md-comp-basic-dialog-container-max-width: 560px;
+  --md-comp-basic-dialog-scrim-blur: 12px;
+
+  box-sizing: border-box;
+  width: min(var(--md-comp-basic-dialog-container-max-width), calc(100% - 48px));
+  min-width: min(var(--md-comp-basic-dialog-container-min-width), calc(100% - 48px));
+  max-height: min(70vh, calc(100% - 48px));
+  margin: auto;
+  padding: 0;
+  border: none;
+  border-radius: var(--md-comp-basic-dialog-container-shape);
+  background-color: var(--md-comp-basic-dialog-container-color);
+  color: var(--md-sys-color-on-surface);
+  outline: none;
+  @include z-depth("3");
+
+  &::backdrop {
+    background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+    backdrop-filter: blur(var(--md-comp-basic-dialog-scrim-blur));
+  }
+}
+
+// showModal() puts the dialog in the top layer but does not lock the
+// document scroller. :modal is the modal-only match — a modeless
+// dialog.show() must not freeze the page.
+html:has(dialog:modal) {
+  overflow: hidden;
+}
+
+dialog[open] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  overscroll-behavior: contain;
+}
+
+// Optional leading icon (M3 basic dialog).
+dialog > i:first-child {
+  flex: 0 0 auto;
+  align-self: center;
+  margin: 24px 24px 0;
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  color: var(--md-sys-color-secondary);
+}
+
+dialog > :is(h1, h2, h3, h4, h5, h6) {
+  flex: 0 0 auto;
+  margin: 0;
+  padding: 24px 24px 16px;
+  color: var(--md-sys-color-on-surface);
+  @include typescale("headline-small");
+}
+
+dialog > i:first-child + :is(h1, h2, h3, h4, h5, h6) {
+  padding-top: 16px;
+  text-align: center;
+}
+
+dialog > p,
+dialog > div {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  margin: 0;
+  padding: 0 24px 24px;
+}
+
+dialog > p {
+  color: var(--md-sys-color-on-surface-variant);
+  @include typescale("body-medium");
+}
+
+dialog > i:first-child + :is(h1, h2, h3, h4, h5, h6) + p {
+  text-align: center;
+}
+
+dialog > :is(h1, h2, h3, h4, h5, h6) + p {
+  padding-top: 0;
+}
+
+// Optional divider when extra content (a list, a form) follows the copy.
+dialog > hr {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: 100%;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: var(--md-sys-color-outline-variant);
+}
+
+// Extra content. A .list inside the dialog lines up with the 24dp inset.
+dialog > .list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  margin: 0;
+  --md-comp-list-item-padding: 24px;
+}
+
+// Action row. form[method=dialog] is the native close mechanism.
+// Text buttons are the spec default; .filled / .tonal / .outlined opt in.
+dialog > :is(form, nav):last-child {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  margin: 0;
+  padding: 0 24px 24px;
+  border: 0;
+  background: none;
+}
+
+dialog:not(
+    .bottom,
+    .bottom-sheet,
+    .side-sheet,
+    .right,
+    .right-sheet,
+    .left,
+    .left-sheet,
+    .sidenav,
+    .sidenav-overlay
+  )
+  > :is(form, nav):last-child
+  > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled) {
+  @include btn-flat;
+}
+
+// Full-screen. Fills the viewport; no corners, no elevation, no scrim.
+// A <header> is the 64dp top bar: close, title-large headline, confirm.
+// UA `dialog:modal` sets max-width: calc(100% - 2em - 6px). Without
+// clearing it, width: 100% is capped and a strip of scrim shows on the
+// right. Bottom sheet already overrides this.
+dialog.max {
+  --md-comp-basic-dialog-container-color: var(--md-sys-color-surface);
+
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  min-width: 0;
+  max-height: none;
+  margin: 0;
+  border-radius: 0;
+  @include z-depth("0");
+
+  &::backdrop {
+    background: none;
+    backdrop-filter: none;
+  }
+
+  > header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    min-height: 64px;
+    margin: 0;
+    padding: 8px 4px;
+    background: none;
+    box-shadow: none;
+  }
+
+  > header > :is(h1, h2, h3, h4, h5, h6) {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    padding: 0 12px;
+    text-align: start;
+    color: var(--md-sys-color-on-surface);
+    @include typescale("title-large");
+  }
+
+  > header > form {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin: 0;
+    padding: 0 8px 0 0;
+    border: 0;
+    background: none;
+    box-shadow: none;
+  }
+
+  // Close is a 48dp icon button. 4dp bar inset + 12dp to the glyph = 16dp.
+  > header > :is(button, a):has(> i:only-child) {
+    display: inline-flex;
+    flex: 0 0 48px;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface-variant);
+    box-shadow: none;
+
+    > i {
+      font-size: 24px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+    }
+
+    &:hover {
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+    }
+
+    &:focus-visible {
+      outline: 3px solid var(--md-sys-color-secondary);
+      outline-offset: 2px;
+    }
+  }
+
+  // Confirming action in the header is a text button, not an icon.
+  > header :is(button, a.button):not(:has(> i:only-child)) {
+    @include btn-flat;
+    width: auto;
+    min-width: 0;
+    height: 40px;
+    padding-inline: 12px;
+    border-radius: 20px;
+  }
+
+  > :is(p, div) {
+    padding: 8px 24px 24px;
+  }
+
+  > .list {
+    padding-block: 8px;
+  }
+}

package/src/sass/components/_index.scss

@@ -2,23 +2,25 @@
 // together and append new components at the end unless order matters.
 
 @forward "buttons";
-@forward "collection";
+@forward "list";
 @forward "badges";
 @forward "icons-material-design";
 @forward "navbar";
+@forward "navigation-bar";
+@forward "navigation-rail";
 @forward "toolbar";
 @forward "transitions";
 @forward "cards";
-@forward "toast";
+@forward "snackbar";
 @forward "tabs";
 @forward "tooltip";
-@forward "dropdown";
-@forward "modal";
-@forward "collapsible";
+@forward "menu";
+@forward "dialog";
+@forward "bottom-sheet";
+@forward "side-sheet";
 @forward "chips";
 @forward "lightbox";
 @forward "parallax";
-@forward "pushpin";
 @forward "docked-display";
 @forward "page-footer";
 @forward "forms";
@@ -28,7 +30,6 @@
 @forward "preloader";
 @forward "slider";
 @forward "carousel";
-@forward "tapTarget";
 @forward "pulse";
 @forward "datepicker";
 @forward "timepicker";

package/src/sass/components/_list.scss

@@ -0,0 +1,253 @@
+@use "../abstracts" as *;
+
+// List. Anatomy is the HTML: a ul/ol/menu.list of items. A leading icon,
+// image, or input is the first child; a trailing icon, kbd, button, time,
+// or .meta is the last child; a following <p> is supporting text.
+//
+// Two variants (M3 Expressive):
+//   (default)  standard — transparent rows, selected is a pill
+//   .segmented — each row is a rounded tile with a gap
+//
+// Tokens:
+//   --md-comp-list-item-height              56px
+//   --md-comp-list-item-two-line-height     72px
+//   --md-comp-list-item-padding             16px
+//   --md-comp-list-item-shape               100px (pill) / 20px segmented
+//   --md-comp-list-item-container-color     transparent / surface mix
+//   --md-comp-list-selected-container-color secondary-container
+//   --md-comp-list-gap                      16px (icon to text)
+//   --md-comp-list-leading-icon-size        24px
+//   --md-comp-list-trailing-icon-size       24px
+//   --md-comp-list-avatar-size              40px
+//   --md-comp-list-image-size               56px
+//   --md-comp-list-segmented-gap            2px
+//
+// Nest descendants inside this block.
+
+.list {
+  --md-comp-list-item-height: 56px;
+  --md-comp-list-item-two-line-height: 72px;
+  --md-comp-list-item-padding: 16px;
+  --md-comp-list-item-shape: 100px;
+  --md-comp-list-item-container-color: transparent;
+  --md-comp-list-selected-container-color: var(--md-sys-color-secondary-container);
+  --md-comp-list-selected-color: var(--md-sys-color-on-secondary-container);
+  --md-comp-list-gap: 16px;
+  --md-comp-list-leading-icon-size: 24px;
+  --md-comp-list-trailing-icon-size: 24px;
+  --md-comp-list-avatar-size: 40px;
+  --md-comp-list-image-size: 56px;
+  --md-comp-list-segmented-gap: 2px;
+
+  box-sizing: border-box;
+  margin: $element-top-margin 0 $element-bottom-margin;
+  padding: 0;
+  list-style: none;
+  color: var(--md-sys-color-on-surface);
+
+  > li {
+    box-sizing: border-box;
+    margin: 0;
+    border-radius: var(--md-comp-list-item-shape);
+    background-color: var(--md-comp-list-item-container-color);
+    color: inherit;
+    transition: background-color 0.2s ease-out;
+  }
+
+  // The row grid lives on the item, or on a wrapping <a>/<label>.
+  > li:not(:has(> :is(a, label):only-child)),
+  > li > :is(a, label):only-child {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto auto;
+    align-items: center;
+    column-gap: var(--md-comp-list-gap);
+    box-sizing: border-box;
+    min-height: var(--md-comp-list-item-height);
+    padding: 8px var(--md-comp-list-item-padding);
+    @include typescale("body-large");
+
+    > :is(i, img, input):first-child {
+      grid-column: 1;
+      grid-row: 1 / -1;
+      align-self: center;
+      flex-shrink: 0;
+    }
+
+    > i:first-child:not(.circle) {
+      font-size: var(--md-comp-list-leading-icon-size);
+      width: var(--md-comp-list-leading-icon-size);
+      height: var(--md-comp-list-leading-icon-size);
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    > img:first-child {
+      width: var(--md-comp-list-image-size);
+      height: var(--md-comp-list-image-size);
+      object-fit: cover;
+      border-radius: 8px;
+    }
+
+    > :is(img, i).circle {
+      width: var(--md-comp-list-avatar-size);
+      height: var(--md-comp-list-avatar-size);
+      border-radius: 50%;
+      object-fit: cover;
+    }
+
+    > i.circle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      line-height: 1;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+
+    > div:not(.meta),
+    > span {
+      grid-column: 2;
+      min-width: 0;
+    }
+
+    > p {
+      grid-column: 2;
+      grid-row: 2;
+      min-width: 0;
+      margin: 0;
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("body-medium");
+    }
+
+    > :is(i, kbd, button, time, .meta, .badge, .button, a):last-child:not(:first-child) {
+      grid-column: 3;
+      grid-row: 1 / -1;
+      justify-self: end;
+      align-self: center;
+    }
+
+    > i:last-child:not(:first-child) {
+      font-size: var(--md-comp-list-trailing-icon-size);
+      width: var(--md-comp-list-trailing-icon-size);
+      height: var(--md-comp-list-trailing-icon-size);
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    > :is(kbd, time, .meta):last-child {
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("label-small");
+    }
+
+    > kbd:last-child {
+      font-family: inherit;
+      border: 0;
+      background: none;
+      padding: 0;
+    }
+
+    > button:last-child:not(:first-child):not(.button),
+    > a:last-child:not(:first-child):not(.button):has(> i:only-child) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      appearance: none;
+      @include focus-visible;
+    }
+
+    &:has(> p),
+    &:has(> div:not(.meta) > p) {
+      min-height: var(--md-comp-list-item-two-line-height);
+    }
+
+    &:has(> img:first-child:not(.circle)) {
+      min-height: calc(var(--md-comp-list-image-size) + 16px);
+    }
+  }
+
+  > li > :is(a, label):only-child {
+    color: inherit;
+    text-decoration: none;
+    border-radius: inherit;
+    cursor: pointer;
+    @include focus-visible;
+  }
+
+  > li:not(.active):not([aria-selected="true"]):not([aria-current]):not(:has(> [aria-current])):not(:has([aria-selected="true"])):not(:has(:checked)):hover {
+    background-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-surface) 8%,
+      var(--md-comp-list-item-container-color)
+    );
+  }
+
+  > li.active,
+  > li[aria-selected="true"],
+  > li[aria-current],
+  > li:has(> [aria-current]),
+  > li:has([aria-selected="true"]),
+  > li:has(:checked) {
+    background-color: var(--md-comp-list-selected-container-color);
+    color: var(--md-comp-list-selected-color);
+
+    i,
+    p,
+    kbd,
+    time,
+    .meta {
+      color: inherit;
+    }
+
+    > i:first-child,
+    > :is(a, label):only-child > i:first-child {
+      --md-icon-fill: 1;
+    }
+  }
+
+  > li:has(> :is(h1, h2, h3, h4, h5, h6):only-child) {
+    min-height: 0;
+    padding: 16px var(--md-comp-list-item-padding) 8px;
+    background: transparent;
+    pointer-events: none;
+    color: var(--md-sys-color-on-surface-variant);
+
+    > :is(h1, h2, h3, h4, h5, h6) {
+      margin: 0;
+      @include typescale("title-small");
+    }
+  }
+
+  > li.divider {
+    height: 1px;
+    min-height: 0;
+    padding: 0;
+    margin: 8px var(--md-comp-list-item-padding);
+    border-radius: 0;
+    background-color: var(--md-sys-color-outline-variant);
+    pointer-events: none;
+  }
+
+  > li.disabled,
+  > li[aria-disabled="true"] {
+    pointer-events: none;
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  &.segmented {
+    --md-comp-list-item-container-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-surface) 8%,
+      var(--md-sys-color-surface)
+    );
+    --md-comp-list-item-shape: 20px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--md-comp-list-segmented-gap);
+  }
+}