@expressivecss/expressive 0.14.1 → 0.15.0

package/src/sass/components/_menu.scss

@@ -28,6 +28,13 @@
 
 $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E");
 
+// Item states, interpolated after `li`. An item is any <li> that is not a
+// divider, optgroup, gap or label; an enabled item is also not disabled.
+$_item: ":not(.divider, .optgroup, .gap, .label)";
+$_enabled: ':not(.disabled, [aria-disabled="true"], .divider, .optgroup, .gap, .label)';
+$_selected: ':is(.selected, [aria-selected="true"], [aria-checked="true"])';
+$_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
+
 [popover] {
   outline: none;
   padding: 0;
@@ -188,7 +195,8 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     // butted against the label instead of flush right.
     //
     // Leading stays the default; a trailing icon names its side, the same way
-    // a field icon must (see rule 3 in CLAUDE.md).
+    // a field icon must (see rule 3 under "HTML semantics" in
+    // docs/development-notes.md).
     > :is(a, button) > #{$icon}:is(.suffix, :last-child:not(:only-child)) {
       margin-inline-start: auto;
       color: var(--md-comp-menu-item-trailing-icon-color);
@@ -209,33 +217,26 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     }
   }
 
-  > li:not(.divider, .optgroup, .gap, .label) {
+  > li#{$_item} {
     min-height: var(--md-comp-menu-item-container-height);
   }
 
-  > li:not(.divider, .optgroup, .gap, .label):first-child {
+  > li#{$_item}:first-child {
     border-radius: var(--md-comp-menu-item-edge-shape)
       var(--md-comp-menu-item-edge-shape)
       var(--md-comp-menu-item-container-shape)
       var(--md-comp-menu-item-container-shape);
   }
 
-  > li:not(.divider, .optgroup, .gap, .label):last-child {
+  > li#{$_item}:last-child {
     border-radius: var(--md-comp-menu-item-container-shape)
       var(--md-comp-menu-item-container-shape)
       var(--md-comp-menu-item-edge-shape) var(--md-comp-menu-item-edge-shape);
   }
 
   // Hover / press sit on extra-small corners and do not span the container.
-  > li:not(
-      .disabled,
-      [aria-disabled="true"],
-      .divider,
-      .optgroup,
-      .gap,
-      .label
-    ):hover,
-  > li.active:not(.selected, [aria-selected="true"], [aria-checked="true"]) {
+  > li#{$_enabled}:hover,
+  > li.active#{$_unselected} {
     background-color: color-mix(
       in oklab,
       var(--md-comp-menu-item-label-text-color) 8%,
@@ -243,14 +244,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     );
   }
 
-  > li:not(
-      .disabled,
-      [aria-disabled="true"],
-      .divider,
-      .optgroup,
-      .gap,
-      .label
-    ):active {
+  > li#{$_enabled}:active {
     background-color: color-mix(
       in oklab,
       var(--md-comp-menu-item-label-text-color) 10%,
@@ -261,9 +255,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
   // :not(.divider) only buys specificity: menu-item.selected.shape is 12dp
   // unconditionally, so it has to outrank the first/last-child edge rule that
   // would otherwise leave a selected end item with 4dp inner corners.
-  > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):not(
-      .divider
-    ) {
+  > li#{$_selected}:not(.divider) {
     border-radius: var(--md-comp-menu-item-selected-container-shape);
     background-color: var(--md-comp-menu-item-selected-container-color);
     color: var(--md-comp-menu-item-selected-label-text-color);
@@ -282,7 +274,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     }
   }
 
-  > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):hover {
+  > li#{$_selected}:hover {
     background-color: color-mix(
       in oklab,
       var(--md-comp-menu-item-selected-label-text-color) 8%,
@@ -290,11 +282,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     );
   }
 
-  > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):is(
-      :focus,
-      :focus-visible,
-      :active
-    ) {
+  > li#{$_selected}:is(:focus, :focus-visible, :active) {
     background-color: color-mix(
       in oklab,
       var(--md-comp-menu-item-selected-label-text-color) 10%,
@@ -365,21 +353,21 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     // blur the menu itself. Grouped menus stay solid.
     backdrop-filter: none;
 
-    > li:not(.divider, .optgroup, .gap, .label) {
+    > li#{$_item} {
       padding-inline: var(--md-comp-menu-group-padding);
       background-color: var(--md-comp-menu-container-color);
       border-radius: 0;
     }
 
-    > li:not(.divider, .optgroup, .gap, .label):first-child,
-    > li.gap + li:not(.divider, .optgroup, .gap, .label) {
+    > li#{$_item}:first-child,
+    > li.gap + li#{$_item} {
       padding-block-start: var(--md-comp-menu-group-padding);
       border-start-start-radius: var(--md-comp-menu-group-shape);
       border-start-end-radius: var(--md-comp-menu-group-shape);
     }
 
-    > li:not(.divider, .optgroup, .gap, .label):has(+ li.gap),
-    > li:not(.divider, .optgroup, .gap, .label):last-child {
+    > li#{$_item}:has(+ li.gap),
+    > li#{$_item}:last-child {
       padding-block-end: var(--md-comp-menu-group-padding);
       border-end-start-radius: var(--md-comp-menu-group-shape);
       border-end-end-radius: var(--md-comp-menu-group-shape);
@@ -390,14 +378,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     }
 
     // State layers belong to the inset item while the group surface remains.
-    > li:not(
-        .disabled,
-        [aria-disabled="true"],
-        .divider,
-        .optgroup,
-        .gap,
-        .label
-      ):hover,
+    > li#{$_enabled}:hover,
     > li.active,
     > li.selected,
     > li[aria-selected="true"],
@@ -405,16 +386,9 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
       background-color: var(--md-comp-menu-container-color);
     }
 
-    > li:not(
-        .disabled,
-        [aria-disabled="true"],
-        .divider,
-        .optgroup,
-        .gap,
-        .label
-      ):hover
+    > li#{$_enabled}:hover
       > :is(a, button, #{$icon-label}),
-    > li.active:not(.selected, [aria-selected="true"], [aria-checked="true"])
+    > li.active#{$_unselected}
       > :is(a, button, #{$icon-label}) {
       border-radius: var(--md-comp-menu-item-container-shape);
       background-color: color-mix(
@@ -424,14 +398,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
       );
     }
 
-    > li:not(
-        .disabled,
-        [aria-disabled="true"],
-        .divider,
-        .optgroup,
-        .gap,
-        .label
-      ):active
+    > li#{$_enabled}:active
       > :is(a, button, #{$icon-label}) {
       background-color: color-mix(
         in oklab,
@@ -440,13 +407,13 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
       );
     }
 
-    > li:is(.selected, [aria-selected="true"], [aria-checked="true"])
+    > li#{$_selected}
       > :is(a, button, #{$icon-label}) {
       border-radius: var(--md-comp-menu-item-selected-container-shape);
       background-color: var(--md-comp-menu-item-selected-container-color);
     }
 
-    > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):hover
+    > li#{$_selected}:hover
       > :is(a, button, #{$icon-label}) {
       background-color: color-mix(
         in oklab,
@@ -455,11 +422,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
       );
     }
 
-    > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):is(
-        :focus,
-        :focus-visible,
-        :active
-      )
+    > li#{$_selected}:is(:focus, :focus-visible, :active)
       > :is(a, button, #{$icon-label}) {
       background-color: color-mix(
         in oklab,
@@ -576,18 +539,12 @@ menu[id] > li:focus-visible {
   );
 }
 
-menu[id]
-  > li:focus-visible:not(.selected, [aria-selected="true"], [aria-checked="true"]) {
-  outline: 3px solid var(--md-sys-color-secondary);
-  outline-offset: -3px;
-}
-
 menu[id].grouped > li:focus-visible {
   background-color: var(--md-comp-menu-container-color);
 }
 
 menu[id].grouped
-  > li:focus-visible:not(.selected, [aria-selected="true"], [aria-checked="true"])
+  > li:focus-visible#{$_unselected}
   > :is(a, button, span:not(.material-symbols, .badge, .supporting-text)) {
   border-radius: var(--md-comp-menu-item-container-shape);
   background-color: color-mix(

package/src/sass/components/_mixed-chart.scss

@@ -125,7 +125,7 @@
     inset: 0;
     z-index: -1;
     border-radius: var(--md-comp-mixed-chart-shape);
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
   }
 
   > span {

package/src/sass/components/_navbar.scss

@@ -107,11 +107,7 @@ header:has(> #{$_bar}) {
   > #{$_bar} > hgroup > #{$_heading} {
     margin: 0;
     color: inherit;
-    font-family: var(--md-sys-typescale-title-large-font-family-name);
-    font-size: var(--md-sys-typescale-title-large-font-size);
-    font-weight: var(--md-sys-typescale-title-large-font-weight);
-    line-height: var(--md-sys-typescale-title-large-line-height);
-    letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+    @include typescale("title-large");
   }
 
   > #{$_bar} > hgroup {
@@ -126,11 +122,7 @@ header:has(> #{$_bar}) {
   > #{$_bar} > hgroup > p {
     margin: 0;
     color: inherit;
-    font-family: var(--md-sys-typescale-label-medium-font-family-name);
-    font-size: var(--md-sys-typescale-label-medium-font-size);
-    font-weight: var(--md-sys-typescale-label-medium-font-weight);
-    line-height: var(--md-sys-typescale-label-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
+    @include typescale("label-medium");
   }
 
   // Icon-only actions — 48dp target, 24dp glyph, 4dp from the container edge.
@@ -281,11 +273,7 @@ header:has(> #{$_bar}) {
   padding: 0 12px;
   color: inherit;
   text-decoration: none;
-  font-family: var(--md-sys-typescale-label-large-font-family-name);
-  font-size: var(--md-sys-typescale-label-large-font-size);
-  font-weight: var(--md-sys-typescale-label-large-font-weight);
-  line-height: var(--md-sys-typescale-label-large-line-height);
-  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+  @include typescale("label-large");
   @include focus-visible;
 
   &:hover:not(.active) {
@@ -378,19 +366,11 @@ header.medium:has(> #{$_bar}) > #{$_bar} {
 
   > #{$_heading},
   > hgroup > #{$_heading} {
-    font-family: var(--md-sys-typescale-headline-medium-font-family-name);
-    font-size: var(--md-sys-typescale-headline-medium-font-size);
-    font-weight: var(--md-sys-typescale-headline-medium-font-weight);
-    line-height: var(--md-sys-typescale-headline-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
+    @include typescale("headline-medium");
   }
 
   > hgroup > p {
-    font-family: var(--md-sys-typescale-label-large-font-family-name);
-    font-size: var(--md-sys-typescale-label-large-font-size);
-    font-weight: var(--md-sys-typescale-label-large-font-weight);
-    line-height: var(--md-sys-typescale-label-large-line-height);
-    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+    @include typescale("label-large");
   }
 }
 
@@ -408,19 +388,11 @@ header.large:has(> #{$_bar}) > #{$_bar} {
 
   > #{$_heading},
   > hgroup > #{$_heading} {
-    font-family: var(--md-sys-typescale-display-small-font-family-name);
-    font-size: var(--md-sys-typescale-display-small-font-size);
-    font-weight: var(--md-sys-typescale-display-small-font-weight);
-    line-height: var(--md-sys-typescale-display-small-line-height);
-    letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
+    @include typescale("display-small");
   }
 
   > hgroup > p {
-    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);
+    @include typescale("title-medium");
   }
 }
 
@@ -473,20 +445,12 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-family: var(--md-sys-typescale-title-large-font-family-name);
-    font-size: var(--md-sys-typescale-title-large-font-size);
-    font-weight: var(--md-sys-typescale-title-large-font-weight);
-    line-height: var(--md-sys-typescale-title-large-line-height);
-    letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+    @include typescale("title-large");
   }
 
   > hgroup > p {
     padding: 0;
-    font-family: var(--md-sys-typescale-label-medium-font-family-name);
-    font-size: var(--md-sys-typescale-label-medium-font-size);
-    font-weight: var(--md-sys-typescale-label-medium-font-weight);
-    line-height: var(--md-sys-typescale-label-medium-line-height);
-    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
+    @include typescale("label-medium");
   }
 }
 

package/src/sass/components/_navigation-rail.scss

@@ -29,6 +29,27 @@
   --md-comp-nav-rail-expanded-width: 280px;
 }
 
+// Expanded rail as an overlay with a scrim.
+@mixin _modal-rail {
+  position: fixed;
+  inset: 0 auto 0 0;
+  z-index: 998;
+  @include z-depth("1");
+
+  // A blurred rail would become the containing block of the fixed scrim
+  // below and clip it to the rail, so a modal rail stays solid.
+  background-color: var(--md-sys-color-surface-container);
+  backdrop-filter: none;
+
+  &::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-color: var(--md-comp-scrim-color);
+    z-index: -1;
+  }
+}
+
 .navigation-rail {
   --md-comp-nav-rail-icon-size: 24px;
   --md-comp-nav-rail-indicator-width: 56px;
@@ -278,42 +299,12 @@
   }
 
   &.expanded.modal {
-    position: fixed;
-    inset: 0 auto 0 0;
-    z-index: 998;
-    @include z-depth("1");
-
-    // A blurred rail would become the containing block of the fixed scrim
-    // below and clip it to the rail, so a modal rail stays solid.
-    background-color: var(--md-sys-color-surface-container);
-    backdrop-filter: none;
-
-    &::before {
-      content: "";
-      position: fixed;
-      inset: 0;
-      background-color: var(--md-comp-scrim-color);
-      z-index: -1;
-    }
+    @include _modal-rail;
   }
 
   @include bp-down("medium") {
     &.expanded:not(.modal) {
-      position: fixed;
-      inset: 0 auto 0 0;
-      z-index: 998;
-      @include z-depth("1");
-
-      background-color: var(--md-sys-color-surface-container);
-      backdrop-filter: none;
-
-      &::before {
-        content: "";
-        position: fixed;
-        inset: 0;
-        background-color: var(--md-comp-scrim-color);
-        z-index: -1;
-      }
+      @include _modal-rail;
     }
   }
 }

package/src/sass/components/_page-footer.scss

@@ -17,7 +17,10 @@
 // Unfilled by default (dashed hairline). .filled uses surface-container.
 // There is no JavaScript.
 
-footer:not(:has(> .navigation-bar:only-child)) {
+// Any footer except one wrapping a lone navigation bar.
+$_footer: "footer:not(:has(> .navigation-bar:only-child))";
+
+#{$_footer} {
   --md-comp-footer-padding-block: 3rem;
   --md-comp-footer-padding-inline: 1rem;
   --md-comp-footer-gap: 2rem;
@@ -54,16 +57,16 @@ footer:not(:has(> .navigation-bar:only-child)) {
   }
 }
 
-footer:not(:has(> nav:only-child)).filled,
-footer:not(:has(> nav:only-child)).surface {
+#{$_footer}.filled,
+#{$_footer}.surface {
   background-color: var(--md-sys-color-surface-container);
   border-top: 1px solid var(--md-sys-color-outline-variant);
 }
 
 // Columns: direct <nav> children. A wrapping .container is the grid
 // when the author uses one. Legacy .row still spans the full measure.
-footer:not(:has(> nav:only-child)) > .container,
-footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+#{$_footer} > .container,
+#{$_footer}:not(:has(> .container)) {
   display: grid;
   gap: var(--md-comp-footer-gap);
   grid-template-columns: 1fr;
@@ -85,14 +88,14 @@ footer:not(:has(> nav:only-child)):not(:has(> .container)) {
   }
 }
 
-footer:not(:has(> nav:only-child)) > .container > .row,
-footer:not(:has(> nav:only-child)) > .row {
+#{$_footer} > .container > .row,
+#{$_footer} > .row {
   grid-column: 1 / -1;
 }
 
 // A column with no links is a <section>, not a <nav> - see rule 4. Both are
 // columns to look at.
-footer:not(:has(> nav:only-child)) :is(nav, section) {
+#{$_footer} :is(nav, section) {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -100,8 +103,8 @@ footer:not(:has(> nav:only-child)) :is(nav, section) {
   min-width: 0;
 }
 
-footer:not(:has(> nav:only-child)) nav > a:not(.button, .icon-button, .circle, .extra),
-footer:not(:has(> nav:only-child)) ul a:not(.button, .icon-button, .circle, .extra) {
+#{$_footer} nav > a:not(.button, .icon-button, .circle, .extra),
+#{$_footer} ul a:not(.button, .icon-button, .circle, .extra) {
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -119,8 +122,8 @@ footer:not(:has(> nav:only-child)) ul a:not(.button, .icon-button, .circle, .ext
 // The legal bar. `.container` is a supported columns wrapper - the rule above
 // already accounts for it - so the bar has to be found through it too, or a
 // footer written the documented way gets an unstyled copyright row.
-footer:not(:has(> nav:only-child)) > small:last-child,
-footer:not(:has(> nav:only-child)) > .container > small:last-child {
+#{$_footer} > small:last-child,
+#{$_footer} > .container > small:last-child {
   display: flex;
   flex-wrap: wrap;
   align-items: center;

package/src/sass/components/_panes.scss

@@ -169,7 +169,6 @@
     @include z-depth("0");
 
     &.elevated {
-      background-color: var(--md-sys-color-surface-container-low);
       @include z-depth("1");
     }
 
@@ -255,10 +254,7 @@
         background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
       }
 
-      &:focus-visible {
-        outline: 3px solid var(--md-sys-color-secondary);
-        outline-offset: 2px;
-      }
+      @include focus-visible;
     }
   }
 
@@ -281,7 +277,7 @@
   }
 
   // Footer / Action Bar
-  > footer:not(:has(> nav:only-child)),
+  > footer:not(:has(> .navigation-bar:only-child)),
   > :is(footer, .pane-footer, nav:last-child) {
     display: flex;
     flex-wrap: wrap;

package/src/sass/components/_progress.scss

@@ -102,7 +102,9 @@ progress.progress {
 // `<span class="progress circular">` is not a <progress>, has no determinate
 // child, and so matched this too - drawing a linear fill on top of the conic
 // circular indicator.
-.progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)) {
+$_bare: ".progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate))";
+
+#{$_bare} {
   &::after {
     content: "";
     position: absolute;
@@ -219,7 +221,7 @@ progress.progress:indeterminate {
   .progress > .determinate,
   .progress > .indeterminate::before,
   .progress > .indeterminate::after,
-  .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate))::after,
+  #{$_bare}::after,
   progress.progress:indeterminate::before,
   progress.progress:indeterminate::after {
     background-color: CanvasText;
@@ -253,7 +255,7 @@ progress.progress:indeterminate {
   .progress::after,
   progress.progress:indeterminate::before,
   progress.progress:indeterminate::after,
-  .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after,
+  #{$_bare}:not([style*="--md-comp-progress-value"])::after,
   :is(.preloader, .progress.circular) {
     animation: none;
   }
@@ -262,7 +264,7 @@ progress.progress:indeterminate {
   .progress > .indeterminate::after,
   progress.progress:indeterminate::before,
   progress.progress:indeterminate::after,
-  .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after {
+  #{$_bare}:not([style*="--md-comp-progress-value"])::after {
     width: 40%;
   }
 

package/src/sass/components/_side-sheet.scss

@@ -153,10 +153,7 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
       background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
     }
 
-    &:focus-visible {
-      outline: 3px solid var(--md-sys-color-secondary);
-      outline-offset: 2px;
-    }
+    @include focus-visible;
   }
 
   > :is(form, nav):last-child {

package/src/sass/components/_stepper.scss

@@ -166,10 +166,6 @@ $_stepper-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/sv
         margin-block: 4px;
       }
 
-      &:last-child::after {
-        content: none;
-      }
-
       > .stepper-content {
         grid-column: 2;
         grid-row: 3;