@expressivecss/expressive 0.1.0 → 0.3.0

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);
 }

package/src/sass/components/_collapsible.scss

@@ -1,81 +1,181 @@
 @use "../abstracts" as *;
 
+// Collapsible. Anatomy is the HTML: a .collapsible of <details> with
+// <summary> headers. Same `name` on each <details> is an accordion;
+// 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.
+//
+// Tokens:
+//   --md-comp-collapsible-shape              12px
+//   --md-comp-collapsible-container-color    surface
+//   --md-comp-collapsible-outline-color      outline-variant
+//   --md-comp-collapsible-header-padding     1rem
+//   --md-comp-collapsible-body-padding       0 1rem
+//   --md-comp-collapsible-duration           500ms
+//   --md-comp-collapsible-easing-open        ease-in-out cubic
+//   --md-comp-collapsible-easing-close       ease-in-out cubic
+//   --md-comp-collapsible-icon-size          24px
+//   --md-comp-collapsible-popout-inset       24px
+//   --md-comp-collapsible-popout-gap         16px
+//
+// Nest descendants inside this block. A list-suffixed selector only
+// attaches the suffix to the last item (same bug as the icon sizes).
+
 .collapsible {
-  padding-left: 0;
-  list-style-type: none;
-  border-top: 1px solid var(--md-sys-color-outline-variant);
-  border-right: 1px solid var(--md-sys-color-outline-variant);
-  border-left: 1px solid var(--md-sys-color-outline-variant);
-  margin: $element-top-margin 0 $element-bottom-margin 0;
+  --md-comp-collapsible-shape: 12px;
+  --md-comp-collapsible-container-color: var(--md-sys-color-surface);
+  --md-comp-collapsible-outline-color: var(--md-sys-color-outline-variant);
+  --md-comp-collapsible-header-padding: 1rem;
+  --md-comp-collapsible-body-padding: 0 1rem;
+  --md-comp-collapsible-duration: 500ms;
+  --md-comp-collapsible-easing-open: cubic-bezier(0.65, 0, 0.35, 1);
+  --md-comp-collapsible-easing-close: cubic-bezier(0.65, 0, 0.35, 1);
+  --md-comp-collapsible-icon-size: 24px;
+  --md-comp-collapsible-popout-inset: 24px;
+  --md-comp-collapsible-popout-gap: 16px;
+
+  box-sizing: border-box;
+  padding: 0;
+  margin: $element-top-margin 0 $element-bottom-margin;
+  list-style: none;
+  overflow: hidden;
+  border: 1px solid var(--md-comp-collapsible-outline-color);
+  border-radius: var(--md-comp-collapsible-shape);
+  background-color: var(--md-comp-collapsible-container-color);
+  color: var(--md-sys-color-on-surface);
   @include z-depth("1");
-}
 
-.collapsible-header {
-  display: flex;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  line-height: 1.5;
-  padding: 1rem;
-  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  > :is(details, li) + :is(details, li) {
+    border-top: 1px solid var(--md-comp-collapsible-outline-color);
+  }
+
+  :is(summary, .collapsible-header) {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: var(--md-comp-collapsible-header-padding);
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-weight: inherit;
+    line-height: 1.5;
+    text-align: start;
+    list-style: none;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
 
-  &:focus {
-    outline: 0
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    @include focus-visible;
+
+    > i {
+      width: 2rem;
+      margin-right: 1rem;
+      font-size: 1.6rem;
+      line-height: 1;
+      text-align: center;
+    }
+
+    &::after {
+      content: "expand_more";
+      flex-shrink: 0;
+      margin-inline-start: auto;
+      font-family: var(--md-icon-font);
+      font-size: var(--md-comp-collapsible-icon-size);
+      font-variation-settings:
+        "FILL" var(--md-icon-fill),
+        "wght" var(--md-icon-weight),
+        "GRAD" var(--md-icon-grade),
+        "opsz" var(--md-icon-optical-size);
+      line-height: 1;
+      -webkit-font-smoothing: antialiased;
+      transition: transform var(--md-comp-collapsible-duration)
+        var(--md-comp-collapsible-easing-close);
+    }
   }
 
-  i {
-    width: 2rem;
-    font-size: 1.6rem;
-    display: inline-block;
-    text-align: center;
-    margin-right: 1rem;
+  :is(details[open] > summary, .active > .collapsible-header)::after {
+    transform: rotate(180deg);
+    transition-timing-function: var(--md-comp-collapsible-easing-open);
   }
-}
 
-.collapsible-header::after {
-  content: '\e5cf';
-  margin-left: .5rem;
-  font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
-  font-size: 25px;
-  line-height: .9;
-  -webkit-font-smoothing: antialiased;
-}
+  .collapsible-header-content {
+    flex-grow: 1;
+  }
 
-.active .collapsible-header::after {
-  content: '\e5ce';
-}
+  // 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 {
+    display: grid;
+    grid-template-rows: 0fr;
+    box-sizing: border-box;
+    padding: var(--md-comp-collapsible-body-padding);
+    overflow: hidden;
+    transition: grid-template-rows var(--md-comp-collapsible-duration)
+      var(--md-comp-collapsible-easing-close);
 
-.keyboard-focused .collapsible-header:focus {
-  background-color: rgba(0, 0, 0, 0.12);
-}
+    > * {
+      min-height: 0;
+      overflow: hidden;
+    }
+  }
 
-.collapsible-header-content {
-  flex-grow: 1;
-}
+  .active > .collapsible-body,
+  details[open] > .collapsible-body {
+    grid-template-rows: 1fr;
+    transition-timing-function: var(--md-comp-collapsible-easing-open);
+  }
 
-.collapsible-body {
-  max-height: 0;
-  border-bottom: 1px solid var(--md-sys-color-outline-variant);
-  box-sizing: border-box;
-  padding: 0 2rem;
-  overflow: hidden;
-}
+  // 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 {
+    display: grid;
+  }
+
+  &.no-icon :is(summary, .collapsible-header)::after {
+    content: none;
+  }
+
+  &.popout {
+    overflow: visible;
+    border: 0;
+    background: transparent;
+    @include z-depth("0");
 
-// Popout Collapsible
+    > :is(details, li) {
+      margin-inline: var(--md-comp-collapsible-popout-inset);
+      overflow: hidden;
+      border: 0;
+      border-radius: var(--md-comp-collapsible-shape);
+      background-color: var(--md-comp-collapsible-container-color);
+      transition: margin var(--md-comp-collapsible-duration)
+        var(--md-comp-collapsible-easing-close);
+      @include z-depth("1");
+    }
 
-.collapsible.popout {
-  border: none;
-  box-shadow: none;
+    > :is(details, li) + :is(details, li) {
+      border-top: 0;
+    }
 
-  > li {
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-    // transform: scaleX(.92);
-    margin: 0 24px;
-    transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940);
+    > :is(details[open], li.active) {
+      margin-block: var(--md-comp-collapsible-popout-gap);
+      margin-inline: 0;
+      transition-timing-function: var(--md-comp-collapsible-easing-open);
+      @include z-depth("2");
+    }
   }
+}
 
-  > li.active {
-    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-    margin: 16px 0;
-    // transform: scaleX(1);
+@media (prefers-reduced-motion: reduce) {
+  .collapsible {
+    --md-comp-collapsible-duration: 0s;
   }
 }

package/src/sass/components/_collection.scss

@@ -1,114 +1,198 @@
 @use "../abstracts" as *;
 
+// Collection. Anatomy is the HTML: a .collection of list items. A heading
+// 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.
+//
+// Tokens:
+//   --md-comp-collection-shape              12px
+//   --md-comp-collection-container-color    surface
+//   --md-comp-collection-outline-color      outline-variant
+//   --md-comp-collection-item-height        56px
+//   --md-comp-collection-item-padding       16px
+//   --md-comp-collection-avatar-size        40px
+//
+// Nest descendants inside this block. A list-suffixed selector only
+// attaches the suffix to the last item (same bug as the icon sizes).
+
 .collection {
-  padding-left: 0;
-  list-style-type: none;
-  margin: $element-top-margin 0 $element-bottom-margin 0;
-  border: 1px solid var(--md-sys-color-outline-variant);
-  border-radius: 2px;
+  --md-comp-collection-shape: 12px;
+  --md-comp-collection-container-color: var(--md-sys-color-surface);
+  --md-comp-collection-outline-color: var(--md-sys-color-outline-variant);
+  --md-comp-collection-item-height: 56px;
+  --md-comp-collection-item-padding: 16px;
+  --md-comp-collection-avatar-size: 40px;
+
+  box-sizing: border-box;
+  padding: 0;
+  margin: $element-top-margin 0 $element-bottom-margin;
   overflow: hidden;
-  position: relative;
+  list-style: none;
+  border: 1px solid var(--md-comp-collection-outline-color);
+  border-radius: var(--md-comp-collection-shape);
+  background-color: var(--md-comp-collection-container-color);
+  color: var(--md-sys-color-on-surface);
+
+  > * + * {
+    border-top: 1px solid var(--md-comp-collection-outline-color);
+  }
 
-  .collection-item {
-    background-color: transparent;
-    line-height: 1.5rem;
-    padding: 10px 20px;
+  > :is(li, a, .collection-item, .collection-header) {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    align-items: center;
+    column-gap: 16px;
+    box-sizing: border-box;
+    min-height: var(--md-comp-collection-item-height);
     margin: 0;
-    border-bottom: 1px solid var(--md-sys-color-outline-variant);
-
-    // Avatar Collection
-    &.avatar {
-      min-height: 84px;
-      padding-left: 72px;
-      position: relative;
-
-      // Don't style circles inside preloader classes.
-      &:not(.circle-clipper) > .circle,
-      :not(.circle-clipper) > .circle {
-        position: absolute;
-        width: 42px;
-        height: 42px;
-        overflow: hidden;
-        left: 15px;
-        display: inline-block;
-        vertical-align: middle;
-      }
-
-      i.circle {
-        font-size: 18px;
-        line-height: 42px;
-        color: #fff;
-        background-color: var(--md-sys-color-shadow);
-        text-align: center;
-      }
-
+    padding: 8px var(--md-comp-collection-item-padding);
+    background-color: transparent;
+    color: inherit;
+    text-decoration: none;
+    transition: background-color 0.2s ease-out;
+
+    > :is(img, i).circle {
+      grid-column: 1;
+      grid-row: 1 / -1;
+      box-sizing: border-box;
+      width: var(--md-comp-collection-avatar-size);
+      height: var(--md-comp-collection-avatar-size);
+      overflow: hidden;
+      object-fit: cover;
+    }
 
-      .title {
-        font-size: 16px;
-      }
+    > i.circle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      line-height: 1;
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+      text-align: center;
+    }
 
-      p {
-        margin: 0;
-      }
+    > .title {
+      grid-column: 2;
+      grid-row: 1;
+      min-width: 0;
+      @include typescale("title-medium");
+    }
 
-      .secondary-content {
-        position: absolute;
-        top: 16px;
-        right: 16px;
-      }
+    > p {
+      grid-column: 2;
+      grid-row: 1;
+      min-width: 0;
+      margin: 0;
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("body-medium");
     }
 
-    &:last-child {
-      border-bottom: none;
+    > .title ~ p {
+      grid-row: 2;
     }
 
-    &.active {
-      background-color: var(--md-sys-color-primary);
-      color:  var(--md-sys-color-on-primary);
+    > :is(.secondary-content, .badge) {
+      grid-column: 3;
+      grid-row: 1 / -1;
+      align-self: center;
+      justify-self: end;
+    }
 
-      .secondary-content {
-        color:  var(--md-sys-color-on-primary);
+    > a:not(.secondary-content, .btn, .btn-floating, .badge) {
+      grid-column: 1 / -1;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      min-width: 0;
+      color: inherit;
+      text-decoration: none;
+
+      > .badge {
+        margin-inline-start: auto;
       }
     }
   }
 
-  a.collection-item {
-    display: block;
-    transition: .25s;
-    color: var(--md-sys-color-primary);
+  > :is(li, .collection-item):is(.avatar, :has(> .circle)),
+  > a:has(> .circle) {
+    min-height: 72px;
+  }
 
-    &:not(.active) {
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.04);
-      }
+  > :is(.collection-header, li:has(> :is(h1, h2, h3, h4, h5, h6))) {
+    min-height: 0;
+    padding-block: 12px;
+
+    > :is(h1, h2, h3, h4, h5, h6) {
+      grid-column: 1 / -1;
+      margin: 0;
+      @include typescale("title-medium");
     }
   }
 
-  &.with-header {
-    .collection-header {
-      background-color: transparent;
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      padding: 10px 20px;
+  > a,
+  > li > a:not(.secondary-content, .btn, .btn-floating) {
+    @include focus-visible;
+  }
+
+  > a:hover,
+  > li:has(> a:not(.secondary-content, .btn, .btn-floating):hover) {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+
+  > :is(.active, [aria-current="page"]),
+  > li:has(> [aria-current="page"]) {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+
+    .secondary-content:not(.btn, .btn-floating) {
+      color: var(--md-sys-color-on-secondary-container);
     }
 
-    .collection-item {
-      padding-left: 30px;
+    span.badge:not(.new) {
+      color: var(--md-sys-color-on-secondary-container);
     }
+  }
 
-    .collection-item.avatar {
-      padding-left: 72px;
+  > :is(.disabled, [aria-disabled="true"]) {
+    pointer-events: none;
+    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;
+    margin-inline-start: auto;
+  }
+
+  &.flush {
+    border: 0;
+    border-radius: 0;
+  }
 }
 
-// Made less specific to allow easier overriding
-.secondary-content {
-  float: right;
+// 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;
-}
+  border-radius: 0;
+}

package/src/sass/components/_icons-material-design.scss

@@ -1,8 +1,81 @@
 @use "../abstracts" as *;
 
-/* This is needed for some mobile phones to display the Google Icon font properly */
-.material-icons, .material-symbols-outlined,
-.material-symbols-rounded, .material-symbols-sharp {
+// Material Symbols. The framework does not ship the font files — outlined,
+// rounded, and sharp are three separate variable fonts, and pulling all
+// three into the main sheet would dwarf the rest of the CSS. Load the
+// families you use (see the Icons docs). Outlined with every axis:
+//
+//   fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
+//
+// Style (outlined / rounded / sharp) is the font family, not a variation
+// axis. Switch it with the `icon-style` attribute (same idea as `theme`)
+// or by setting --md-icon-font. Fill, weight, grade, and optical size
+// are axes and inherit as custom properties.
+
+:root {
+  --md-icon-font-outlined: "Material Symbols Outlined";
+  --md-icon-font-rounded: "Material Symbols Rounded";
+  --md-icon-font-sharp: "Material Symbols Sharp";
+  --md-icon-font: var(--md-icon-font-outlined);
+  --md-icon-fill: 0;
+  --md-icon-weight: 400;
+  --md-icon-grade: 0;
+  --md-icon-optical-size: 24;
+}
+
+[icon-style="outlined"] { --md-icon-font: var(--md-icon-font-outlined); }
+[icon-style="rounded"] { --md-icon-font: var(--md-icon-font-rounded); }
+[icon-style="sharp"] { --md-icon-font: var(--md-icon-font-sharp); }
+
+$_icon: ".material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons";
+
+#{$_icon} {
+  display: inline-block;
+  font-family: var(--md-icon-font);
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  user-select: none;
   text-rendering: optimizeLegibility;
-  font-feature-settings: 'liga';
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings:
+    "FILL" var(--md-icon-fill),
+    "wght" var(--md-icon-weight),
+    "GRAD" var(--md-icon-grade),
+    "opsz" var(--md-icon-optical-size);
+
+  // Nest so each class in $_icon gets the suffix. `#{$_icon}.tiny` would
+  // only attach `.tiny` to the last item and leave every other icon
+  // matching the bare `.material-symbols` selector — including `.large`.
+  &.tiny {
+    font-size: 1rem;
+    --md-icon-optical-size: 20;
+  }
+  &.small {
+    font-size: 2rem;
+    --md-icon-optical-size: 24;
+  }
+  &.medium {
+    font-size: 4rem;
+    --md-icon-optical-size: 40;
+  }
+  &.large {
+    font-size: 6rem;
+    --md-icon-optical-size: 48;
+  }
 }
+
+// One-off family overrides. These only change --md-icon-font so the
+// inherited fill / weight / grade / opsz still apply.
+.material-symbols-outlined { --md-icon-font: var(--md-icon-font-outlined); }
+.material-symbols-rounded { --md-icon-font: var(--md-icon-font-rounded); }
+.material-symbols-sharp { --md-icon-font: var(--md-icon-font-sharp); }
+
+.icon-filled { --md-icon-fill: 1; }

package/src/sass/components/_lightbox.scss

@@ -6,6 +6,10 @@
   position: relative;
   transition: opacity .4s;
   backface-visibility: hidden;
+  // Same 12px as .responsive-img. Exclude .circle so a disc stays a disc.
+  &:not(.circle) {
+    border-radius: 12px;
+  }
 
   &:hover {
     &:not(.active) {