@expressivecss/expressive 0.7.0 → 0.9.0

package/src/sass/components/{_sidenav.scss → _navigation-drawer.scss}

@@ -3,7 +3,7 @@
 // Navigation drawer.
 //
 // Overlay is a modal <dialog> (JS wraps a <ul class="sidenav"> in
-// dialog.sidenav-overlay, or the author writes <dialog class="sidenav">).
+// dialog:is(.sidenav-overlay, .navigation-drawer-overlay), or the author writes <dialog class="sidenav">).
 // showModal() puts it on the top layer; ::backdrop is the scrim; Escape
 // and a scrim tap close it. Drag writes --md-comp-nav-drawer-shift;
 // this file does the slide.
@@ -12,7 +12,7 @@
 // accordion. The summary is a destination row with an expand_more
 // chevron; there is no Collapsible plugin.
 //
-// .sidenav-fixed is a breakpoint, not a JS open(): at `large` the host
+// :is(.sidenav-fixed, .navigation-drawer-fixed) is a breakpoint, not a JS open(): at `large` the host
 // is display: contents so the list is a docked sidebar. Below that it
 // is the same overlay drawer as any other sidenav.
 //
@@ -26,13 +26,31 @@
 //   --md-comp-nav-drawer-font-size      14px
 //   --md-comp-nav-drawer-padding        16px
 //   --md-comp-nav-drawer-line-height    item height
-
-:root {
+//   --md-comp-nav-drawer-user-view-shape
+//                                       16px, bottom corners of the header
+//   --md-comp-nav-drawer-user-view-scrim
+//                                       gradient laid over the header image
+//   --md-comp-nav-drawer-user-view-ink-color
+//                                       text colour over that scrim
+
+:root, :host {
   --md-comp-nav-drawer-width: 300px;
 }
 
-dialog.sidenav-overlay,
-dialog.sidenav {
+// A drawer row is whatever element the list item holds: a destination
+// <a>, the <summary> of a nested section, the <button> a command row is
+// written with (.navigation-drawer-close), and the plain element a
+// .subheader label is. Keyed on `li > a`, the row layout disappeared the
+// moment a row stopped being an anchor - the same trap $_icon documents.
+// $_row-control is the subset that is operable: it takes the hover and
+// focus treatment, a label does not. Both are wrapped in :is() - a bare
+// comma list breaks out of its context (see $_bar in _navbar).
+$_row: ":is(li > :is(a, button, .subheader), summary)";
+$_row-control: ":is(li > :is(a, button):not(.button, .icon-button, .circle, .extra), summary)";
+
+
+dialog:is(.sidenav-overlay, .navigation-drawer-overlay),
+dialog:is(.sidenav, .navigation-drawer) {
   --md-comp-nav-drawer-item-height: 48px;
   --md-comp-nav-drawer-duration: 250ms;
   --md-comp-nav-drawer-easing: ease;
@@ -41,6 +59,14 @@ dialog.sidenav {
   --md-comp-nav-drawer-font-size: 14px;
   --md-comp-nav-drawer-padding: 16px;
   --md-comp-nav-drawer-line-height: var(--md-comp-nav-drawer-item-height);
+  --md-comp-nav-drawer-user-view-shape: 16px;
+  --md-comp-nav-drawer-user-view-ink-color: var(--md-ref-palette-neutral100);
+  --md-comp-nav-drawer-user-view-scrim: linear-gradient(
+    to bottom,
+    color-mix(in oklab, var(--md-sys-color-scrim) 15%, transparent) 0%,
+    color-mix(in oklab, var(--md-sys-color-scrim) 50%, transparent) 55%,
+    color-mix(in oklab, var(--md-sys-color-scrim) 80%, transparent) 100%
+  );
 
   box-sizing: border-box;
   width: var(--md-comp-nav-drawer-width);
@@ -85,7 +111,7 @@ dialog.sidenav {
   }
 
   &::backdrop {
-    background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+    background-color: var(--md-comp-scrim-color);
     opacity: var(--md-comp-nav-drawer-open, 1);
     backdrop-filter: none;
     transition:
@@ -96,22 +122,22 @@ dialog.sidenav {
 }
 
 @starting-style {
-  :is(dialog.sidenav-overlay, dialog.sidenav):modal {
+  :is(dialog:is(.sidenav-overlay, .navigation-drawer-overlay), dialog:is(.sidenav, .navigation-drawer)):modal {
     transform: translateX(-100%);
   }
 
-  :is(dialog.sidenav-overlay, dialog.sidenav).right-aligned:modal {
+  :is(dialog:is(.sidenav-overlay, .navigation-drawer-overlay), dialog:is(.sidenav, .navigation-drawer)).right-aligned:modal {
     transform: translateX(100%);
   }
 
-  :is(dialog.sidenav-overlay, dialog.sidenav):modal::backdrop {
+  :is(dialog:is(.sidenav-overlay, .navigation-drawer-overlay), dialog:is(.sidenav, .navigation-drawer)):modal::backdrop {
     opacity: 0;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  dialog.sidenav-overlay,
-  dialog.sidenav {
+  dialog:is(.sidenav-overlay, .navigation-drawer-overlay),
+  dialog:is(.sidenav, .navigation-drawer) {
     transition: none;
 
     &::backdrop {
@@ -123,17 +149,25 @@ dialog.sidenav {
 // Docked sidebar: the host must not be a box, or it would steal the
 // list's position:fixed. Closed, so it is not :modal and does not
 // lock the page.
-@include bp-up("large") {
-  dialog.sidenav-overlay:has(> .sidenav-fixed):not(:modal) {
+@include bp-up("expanded") {
+  dialog:is(.sidenav-overlay, .navigation-drawer-overlay):has(> :is(.sidenav-fixed, .navigation-drawer-fixed)):not(:modal) {
     display: contents;
   }
 }
 
-.sidenav {
+:is(.sidenav, .navigation-drawer) {
   --md-comp-nav-drawer-item-height: 48px;
   --md-comp-nav-drawer-font-size: 14px;
   --md-comp-nav-drawer-padding: 16px;
   --md-comp-nav-drawer-line-height: var(--md-comp-nav-drawer-item-height);
+  --md-comp-nav-drawer-user-view-shape: 16px;
+  --md-comp-nav-drawer-user-view-ink-color: var(--md-ref-palette-neutral100);
+  --md-comp-nav-drawer-user-view-scrim: linear-gradient(
+    to bottom,
+    color-mix(in oklab, var(--md-sys-color-scrim) 15%, transparent) 0%,
+    color-mix(in oklab, var(--md-sys-color-scrim) 50%, transparent) 55%,
+    color-mix(in oklab, var(--md-sys-color-scrim) 80%, transparent) 100%
+  );
 
   box-sizing: border-box;
   position: fixed;
@@ -162,12 +196,32 @@ dialog.sidenav {
     align-content: center;
   }
 
-  li.active > a:not(.button, .circle, .extra) {
+  // The selected destination keeps its pill under the pointer: the row's own
+  // state layer mixes into `transparent`, so letting it reach a selected row
+  // would erase the fill rather than tint it. Higher specificity than the row
+  // rule, so order does not matter.
+  li.active > :is(a, button):not(.button, .icon-button, .circle, .extra) {
     background-color: var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
+
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-secondary-container) state-opacity("hover"),
+        var(--md-sys-color-secondary-container)
+      );
+    }
+
+    &:active {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-secondary-container) state-opacity("pressed"),
+        var(--md-sys-color-secondary-container)
+      );
+    }
   }
 
-  :is(li > a, summary) {
+  #{$_row} {
     display: flex;
     align-items: center;
     margin: 0 12px;
@@ -191,25 +245,32 @@ dialog.sidenav {
     }
   }
 
-  li > a:not(.button, .circle, .extra),
-  summary {
+  #{$_row-control} {
     color: var(--md-sys-color-on-surface-variant);
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+    }
+
+    &:active {
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("pressed"), transparent);
     }
 
     @include focus-visible;
   }
 
-  li > a.button,
-  li > a.circle,
-  li > a.extra {
+  li > :is(a, button):is(.button, .circle, .extra) {
     margin: 10px 15px;
   }
 
-  summary {
+  // Every <button> is a styled button ($_btn in _buttons is `button:not(...)`),
+  // so a command row has to be stripped back to a row the same way <summary>
+  // is. The chevron below stays summary-only.
+  :is(summary, li > button:not(.button, .icon-button, .circle, .extra)) {
     box-sizing: border-box;
+    // A <button> centres its own content, so a command row's label sat in the
+    // middle of the row while every anchor row started at the inset.
+    justify-content: flex-start;
     border: 0;
     background: transparent;
     font: inherit;
@@ -217,7 +278,9 @@ dialog.sidenav {
     list-style: none;
     cursor: pointer;
     appearance: none;
+  }
 
+  summary {
     &::-webkit-details-marker {
       display: none;
     }
@@ -282,16 +345,33 @@ dialog.sidenav {
       height: auto;
       padding: 0;
 
-      &:hover {
+      &:is(:hover, :active) {
         background-color: transparent;
       }
     }
 
+    // The header image is clipped by .background, so the radius goes on the
+    // clipping box rather than the <img>: the image is a child of an
+    // overflow: hidden box, and rounding the child alone leaves the box's own
+    // square corners painting behind it.
     .background {
       overflow: hidden;
       position: absolute;
       inset: 0;
       z-index: -1;
+      border-end-start-radius: var(--md-comp-nav-drawer-user-view-shape);
+      border-end-end-radius: var(--md-comp-nav-drawer-user-view-shape);
+
+      // The name and email sit on whatever photograph the author supplied, so
+      // the scrim is what makes them legible - bottom-weighted, because that
+      // is where the text is. It rides inside .background so the rounded
+      // corners clip it too.
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: var(--md-comp-nav-drawer-user-view-scrim);
+      }
     }
 
     .circle,
@@ -311,6 +391,17 @@ dialog.sidenav {
       line-height: calc(var(--md-comp-nav-drawer-line-height) * 0.5);
     }
 
+    // Over an image the surface roles mean nothing and the link colour these
+    // spans inherit is unreadable on a mid-tone photograph. Scoped to
+    // :has(> .background): with no image the header is on the drawer surface
+    // and must keep tracking the theme, where fixed light ink would vanish.
+    &:has(> .background) {
+      .name,
+      .email {
+        color: var(--md-comp-nav-drawer-user-view-ink-color);
+      }
+    }
+
     .name {
       margin-top: 16px;
       font-weight: 500;
@@ -324,10 +415,10 @@ dialog.sidenav {
 }
 
 // Overlay only: the dialog is the panel, so the list fills it. When the
-// host is `display: contents` (a docked .sidenav-fixed) this must not
+// host is `display: contents` (a docked :is(.sidenav-fixed, .navigation-drawer-fixed)) this must not
 // apply — static positioning would drop the list into the header flow
 // and it would read as part of the app bar.
-dialog.sidenav-overlay:modal > .sidenav {
+dialog:is(.sidenav-overlay, .navigation-drawer-overlay):modal > :is(.sidenav, .navigation-drawer) {
   position: static;
   inset: auto;
   width: 100%;
@@ -338,7 +429,7 @@ dialog.sidenav-overlay:modal > .sidenav {
   z-index: auto;
 }
 
-.sidenav.sidenav-fixed {
+:is(.sidenav, .navigation-drawer):is(.sidenav-fixed, .navigation-drawer-fixed) {
   transform: none;
 
   &.right-aligned {
@@ -346,11 +437,11 @@ dialog.sidenav-overlay:modal > .sidenav {
   }
 }
 
-@include bp-down("large") {
+@include bp-down("expanded") {
   // Uninitialized / no-js: keep a fixed drawer off-canvas. Once JS wraps
   // it, the host's display:none hides the closed drawer and this must
   // not also hide the list inside an open dialog.
-  .sidenav.sidenav-fixed {
+  :is(.sidenav, .navigation-drawer):is(.sidenav-fixed, .navigation-drawer-fixed) {
     transform: translateX(-100%);
 
     &.right-aligned {
@@ -358,7 +449,7 @@ dialog.sidenav-overlay:modal > .sidenav {
     }
   }
 
-  .sidenav .user-view {
+  :is(.sidenav, .navigation-drawer) .user-view {
     padding: var(--md-comp-nav-drawer-padding) var(--md-comp-nav-drawer-padding) 0;
   }
 }
@@ -376,11 +467,10 @@ dialog.sidenav-overlay:modal > .sidenav {
   }
 }
 
-@include bp-up("large") {
+@include bp-up("expanded") {
   .drag-target[data-fixed] {
     display: none;
     pointer-events: none;
   }
 }
 
-

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

@@ -24,7 +24,7 @@
 //
 // Nest descendants inside this block.
 
-:root {
+:root, :host {
   --md-comp-nav-rail-collapsed-width: 96px;
   --md-comp-nav-rail-expanded-width: 280px;
 }
@@ -59,7 +59,7 @@
     padding var(--md-comp-nav-rail-duration) ease;
 
   // Menu toggle.
-  > button:not(.button):first-child {
+  > button:not(.button, .icon-button):first-child {
     display: flex;
     flex: 0 0 auto;
     align-items: center;
@@ -76,14 +76,14 @@
     appearance: none;
     @include focus-visible;
 
-    > i {
+    > #{$icon} {
       font-size: var(--md-comp-nav-rail-icon-size);
       width: var(--md-comp-nav-rail-icon-size);
       height: var(--md-comp-nav-rail-icon-size);
     }
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
     }
   }
 
@@ -105,7 +105,7 @@
     background-color: var(--md-sys-color-primary-container);
     text-decoration: none;
 
-    > :not(i) {
+    > :not(#{$icon}) {
       position: absolute;
       width: 1px;
       height: 1px;
@@ -115,8 +115,8 @@
   }
 
   // Destinations.
-  > a:not(.button),
-  > button:not(.button):not(:first-child) {
+  > a:not(.button, .icon-button),
+  > button:not(.button, .icon-button):not(:first-child) {
     position: relative;
     display: flex;
     flex: 0 0 auto;
@@ -138,7 +138,7 @@
     @include typescale("label-medium");
     @include focus-visible;
 
-    > i {
+    > #{$icon} {
       display: flex;
       flex-shrink: 0;
       align-items: center;
@@ -152,15 +152,15 @@
       transition: background-color var(--md-comp-nav-rail-duration) ease;
     }
 
-    &:hover:not(.active, [aria-current]) > i {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+    &:hover:not(.active, [aria-current]) > #{$icon} {
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
     }
 
     &.active,
     &[aria-current] {
       color: var(--md-sys-color-on-surface);
 
-      > i {
+      > #{$icon} {
         background-color: var(--md-comp-nav-rail-active-indicator-color);
         color: var(--md-comp-nav-rail-active-color);
         --md-icon-fill: 1;
@@ -173,8 +173,12 @@
       position: absolute;
       z-index: 1;
       top: calc(6px + (var(--md-comp-nav-rail-indicator-height) - 24px) / 2);
-      left: calc(50% + 12px);
+      inset-inline-start: calc(50% + 12px);
       transform: translate(-50%, -50%);
+
+      &:dir(rtl) {
+        transform: translate(50%, -50%);
+      }
     }
   }
 
@@ -197,7 +201,7 @@
     min-width: 220px;
     padding-inline: 16px;
 
-    > button:not(.button):first-child {
+    > button:not(.button, .icon-button):first-child {
       justify-content: flex-start;
       width: auto;
       padding-inline: 16px;
@@ -210,7 +214,7 @@
       color: var(--md-sys-color-on-primary-container);
       background-color: var(--md-sys-color-primary-container);
 
-      > :not(i) {
+      > :not(#{$icon}) {
         position: static;
         width: auto;
         height: auto;
@@ -220,8 +224,8 @@
       }
     }
 
-    > a:not(.button),
-    > button:not(.button):not(:first-child) {
+    > a:not(.button, .icon-button),
+    > button:not(.button, .icon-button):not(:first-child) {
       flex-direction: row;
       justify-content: flex-start;
       gap: 12px;
@@ -230,16 +234,16 @@
       border-radius: var(--md-comp-nav-rail-indicator-shape);
       text-align: start;
 
-      > i {
+      > #{$icon} {
         width: var(--md-comp-nav-rail-icon-size);
         height: var(--md-comp-nav-rail-icon-size);
         border-radius: 0;
       }
 
       &:hover:not(.active, [aria-current]) {
-        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
 
-        > i {
+        > #{$icon} {
           background-color: transparent;
         }
       }
@@ -249,7 +253,7 @@
         background-color: var(--md-comp-nav-rail-active-indicator-color);
         color: var(--md-comp-nav-rail-active-color);
 
-        > i {
+        > #{$icon} {
           background-color: transparent;
           color: inherit;
         }
@@ -260,6 +264,10 @@
         left: auto;
         inset-inline-start: calc(16px + 24px);
         transform: translate(-50%, -50%);
+
+        &:dir(rtl) {
+          transform: translate(50%, -50%);
+        }
       }
     }
 
@@ -278,12 +286,12 @@
       content: "";
       position: fixed;
       inset: 0;
-      background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+      background-color: var(--md-comp-scrim-color);
       z-index: -1;
     }
   }
 
-  @include bp-down("small") {
+  @include bp-down("medium") {
     &.expanded:not(.modal) {
       position: fixed;
       inset: 0 auto 0 0;
@@ -294,7 +302,7 @@
         content: "";
         position: fixed;
         inset: 0;
-        background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+        background-color: var(--md-comp-scrim-color);
         z-index: -1;
       }
     }

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

@@ -3,7 +3,8 @@
 // Site footer.
 //
 // Anatomy is the HTML. A <footer> is the landmark. A heading is a column
-// title. A <nav> (or ul) is a link list. The last child <small> is the
+// title. A <nav> (or ul) is a link list; a column with no links is a
+// <section>. The last child <small> is the
 // legal bar. A footer whose only child is nav.navigation-bar is the
 // navigation bar, not this component.
 //
@@ -32,10 +33,9 @@ footer:not(:has(> .navigation-bar:only-child)) {
     margin: 0 0 8px;
     color: var(--md-sys-color-on-surface-variant);
     @include typescale("body-medium");
-    font-family: $font-stack;
   }
 
-  a:not(.button, .circle, .extra) {
+  a:not(.button, .icon-button, .circle, .extra) {
     color: var(--md-sys-color-primary);
     text-decoration: none;
     @include focus-visible;
@@ -45,7 +45,6 @@ footer:not(:has(> .navigation-bar:only-child)) {
     margin: 0 0 8px;
     color: var(--md-sys-color-on-surface);
     @include typescale("title-small");
-    font-family: $font-stack;
   }
 
   ul {
@@ -69,19 +68,19 @@ footer:not(:has(> nav:only-child)):not(:has(> .container)) {
   gap: var(--md-comp-footer-gap);
   grid-template-columns: 1fr;
 
-  @include bp-up("small") {
+  @include bp-up("medium") {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @include bp-up("large") {
+  @include bp-up("expanded") {
     grid-template-columns: repeat(4, 1fr);
   }
 
-  @include bp-up("xlarge") {
+  @include bp-up("large") {
     grid-template-columns: repeat(5, 1fr);
   }
 
-  @include bp-up("xxlarge") {
+  @include bp-up("extra-large") {
     grid-template-columns: repeat(6, 1fr);
   }
 }
@@ -91,7 +90,9 @@ footer:not(:has(> nav:only-child)) > .row {
   grid-column: 1 / -1;
 }
 
-footer:not(:has(> nav:only-child)) nav {
+// 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) {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -99,8 +100,8 @@ footer:not(:has(> nav:only-child)) nav {
   min-width: 0;
 }
 
-footer:not(:has(> nav:only-child)) nav > a:not(.button, .circle, .extra),
-footer:not(:has(> nav:only-child)) ul a:not(.button, .circle, .extra) {
+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) {
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -109,14 +110,17 @@ footer:not(:has(> nav:only-child)) ul a:not(.button, .circle, .extra) {
   margin-inline-start: -12px;
   border-radius: 2rem;
   @include typescale("label-large");
-  font-family: $font-stack;
 
   &:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
   }
 }
 
-footer:not(:has(> nav:only-child)) > small:last-child {
+// 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 {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -130,9 +134,8 @@ footer:not(:has(> nav:only-child)) > small:last-child {
   border-top: 1px solid var(--md-sys-color-outline-variant);
   color: var(--md-sys-color-on-surface-variant);
   @include typescale("body-small");
-  font-family: $font-stack;
 
-  a:not(.button) {
+  a:not(.button, .icon-button) {
     color: var(--md-sys-color-primary);
   }
 }

package/src/sass/components/_pagination.scss

@@ -4,7 +4,9 @@
 // <ol> (or <ul>) of page links. The current page is aria-current="page".
 // A bare <ul class="pagination"> stays as an alias.
 //
-// .active / .disabled / .prev / .next / .pages still work.
+// .active / .disabled / .pages still work. .prev / .next are accepted but
+// inert - nothing matches them. They used to drive a 10%/80% split, which
+// .nowrap replaced with scrolling.
 // .nowrap (or the old li.pages nest) scrolls a long run instead of wrapping.
 //
 // Tokens (defaults match the original compact pager):
@@ -86,14 +88,22 @@
     @include focus-visible;
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
     }
 
-    &:has(> span) {
+    // The pressed layer is the only feedback a touch tap gets: hover never
+    // fires there and the tap highlight is suppressed above.
+    &:active {
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("pressed"), transparent);
+    }
+
+    // "Does this control carry a text label?" - the icon is a <span>, so a
+    // bare `span` here answers yes for every icon-only prev/next button.
+    &:has(> #{$icon-label}) {
       width: auto;
     }
 
-    > i {
+    > #{$icon} {
       font-size: var(--md-comp-pagination-icon-size);
       width: var(--md-comp-pagination-icon-size);
       height: var(--md-comp-pagination-icon-size);
@@ -110,7 +120,15 @@
     &:hover {
       background-color: color-mix(
         in oklab,
-        var(--md-comp-pagination-selected-on-color) 8%,
+        var(--md-comp-pagination-selected-on-color) state-opacity("hover"),
+        var(--md-comp-pagination-selected-color)
+      );
+    }
+
+    &:active {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-pagination-selected-on-color) state-opacity("pressed"),
         var(--md-comp-pagination-selected-color)
       );
     }
@@ -124,7 +142,7 @@
     cursor: default;
   }
 
-  li > span {
+  li > #{$icon-label} {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;