@expressivecss/expressive 0.15.0 → 0.16.0

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

@@ -11,8 +11,15 @@
 // circle, from the --radial-chart-dash RadialChart sets, so it can grow in;
 // --radial-chart-offset moves a round-capped dash in by half the width.
 //
-// Modifiers: .gauge draws half circles over the middle, .sparkline is a
-// small chart with no legend or tooltip. A <tfoot> row shows in the middle.
+// data-segments on the figure splits each ring into that many segments,
+// filled whole, with the ring gap between them.
+//
+// Modifiers: .gauge draws half circles over the middle, .gradient shades
+// each fill along its ring, from a light tint at the start to the full
+// color at the end, .labels draws
+// three-quarter rings and names each one in the empty top left quarter,
+// or under the base line of a gauge, .sparkline is a small chart with no legend, tooltip or names. A <tfoot>
+// row shows in the middle.
 //
 // Tokens:
 //   --md-comp-radial-chart-height       240px, the rings' diameter (sparkline 48px)
@@ -71,8 +78,9 @@
   stroke: var(--md-comp-radial-chart-track-color);
 }
 
-// A gauge's track ends where its fill would, so it ends round too.
-.radial-chart.gauge .radial-chart-track {
+// A track short of a whole circle ends where its fill would, so it ends
+// round too.
+.radial-chart-track.capped {
   stroke-linecap: round;
 }
 
@@ -90,7 +98,7 @@
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: stroke-dasharray 600ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms cubic-bezier(0.2, 0, 0, 1);
+    transition: stroke-dasharray var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard), opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
 
     @starting-style {
       stroke-dasharray: 0 1000;
@@ -98,6 +106,106 @@
   }
 }
 
+// .gradient draws each fill again in HTML: a conic gradient round the
+// ring's middle, masked by RadialChart to the fill's own dash, from a tint
+// of the ring's color to the color itself where the fill ends. The SVG fill
+// under it keeps its shape for the cap and the hover, and drops its color.
+// A second mask, a conic reveal, grows the fill in as the SVG dash does. A
+// shadow root ignores @property, so the reveal falls back to the whole turn
+// there and the fill appears without growing.
+@property --radial-chart-reveal {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 360deg;
+}
+
+.radial-chart.gradient .radial-chart-ring {
+  stroke: transparent;
+}
+
+.radial-chart-sweep {
+  // The rings' middle: the box's, or for a gauge the middle of its base line.
+  --radial-chart-at: 50% 50%;
+
+  position: absolute;
+  inset: 0;
+  background: conic-gradient(
+    from var(--radial-chart-from, 0turn) at var(--radial-chart-at),
+    color-mix(in oklab, var(--radial-chart-color) 35%, var(--md-sys-color-surface)),
+    var(--radial-chart-color) var(--radial-chart-to, 1turn)
+  );
+  mask-image:
+    var(--radial-chart-shape, none),
+    conic-gradient(from var(--radial-chart-from, 0turn) at var(--radial-chart-at), #000 var(--radial-chart-reveal, 360deg), transparent 0);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  mask-composite: intersect;
+  pointer-events: none;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      --radial-chart-reveal var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard),
+      opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+
+    @starting-style {
+      --radial-chart-reveal: 0deg;
+    }
+  }
+
+  .radial-chart.gauge & {
+    --radial-chart-at: 50% 100%;
+  }
+
+  .radial-chart-rings:has(.active) &:not(.active) {
+    opacity: 0.38;
+  }
+}
+
+// The names' font shrinks with the plot, so they need its size.
+.radial-chart.labels .radial-chart-rings {
+  container-type: size;
+}
+
+// RadialChart sets each name's --radial-chart-at to its ring's top. Names
+// end at the middle line, beside the start of their ring, and shrink to fit
+// between crowded rings: one unit of the SVG's 100-unit box is 1cqw. They
+// stay in a text color, since a ring color token may be too light to read.
+.radial-chart-names > span {
+  position: absolute;
+  top: var(--radial-chart-at, 50%);
+  right: calc(50% + 4px);
+  max-width: calc(50% - 8px);
+  overflow: hidden;
+  translate: 0 -50%;
+  color: var(--md-sys-color-on-surface-variant);
+  @include typescale("label-medium");
+  font-size: min(var(--md-sys-typescale-label-medium-font-size), var(--radial-chart-step, 10) * 0.6cqw);
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// A gauge's names hang under its base line, a row each with the innermost
+// ring's on top. Each starts at its ring's start, after a line down from
+// it, and every line passes left of the names above it.
+.radial-chart.gauge.labels:not(.sparkline) .radial-chart-plot {
+  margin-block-end: calc(var(--radial-chart-rows, 0) * var(--md-sys-typescale-label-medium-line-height) + 4px);
+}
+
+.radial-chart.gauge .radial-chart-names > span {
+  top: calc(100% + 4px);
+  right: 0;
+  left: var(--radial-chart-at, 0);
+  max-width: none;
+  padding: calc(var(--radial-chart-row, 0) * var(--md-sys-typescale-label-medium-line-height)) 0 0 4px;
+  border-left: 1px solid var(--md-sys-color-outline-variant);
+  translate: none;
+  // The rings do not mirror in RTL, so each name stays beside its line.
+  text-align: left;
+  font-size: var(--md-sys-typescale-label-medium-font-size);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+}
+
 .radial-chart-tooltip {
   translate: 12px -50%;
 

package/src/sass/components/_rich-text-editor.scss

@@ -12,7 +12,7 @@
 
 .rich-text-editor {
   --md-comp-rich-text-editor-min-height: 160px;
-  --md-comp-rich-text-editor-shape: 16px;
+  --md-comp-rich-text-editor-shape: var(--md-sys-shape-corner-large);
 
   display: flex;
   flex-direction: column;
@@ -76,7 +76,7 @@
 
     :not(pre) > code,
     pre {
-      border-radius: 8px;
+      border-radius: var(--md-sys-shape-corner-small);
       background-color: var(--md-sys-color-surface-container-highest);
       font-family: ui-monospace, monospace;
     }

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

@@ -0,0 +1,114 @@
+@use "../abstracts" as *;
+
+// Sankey chart. A <figure class="sankey-chart"> holds a <figcaption> and a
+// <table> of flows: the first column names each row's source node, the
+// second its target node, and the third holds the value. Without JavaScript
+// the table shows. SankeyChart draws the nodes in columns and each row as a
+// link between two of them, and hides the table visually, so a screen
+// reader still reads the flows as a table. The plot and tooltip come from
+// chart().
+//
+// The SVG stretches to the plot (preserveAspectRatio="none"). Nodes and
+// links are filled shapes with no stroke, so stretching keeps every link
+// as thick as its value and every node as tall as its total.
+//
+// Each node takes a color in node order through data-series, and each link
+// its source node's color, lighter. The names sit over the drawing, level
+// with their nodes, from --sankey-chart-x and --sankey-chart-y, the
+// script's percentages of the plot from its inline start and top.
+//
+// Tokens:
+//   --md-comp-sankey-chart-height        240px
+//   --md-comp-sankey-chart-link-opacity  0.4
+//   --md-comp-sankey-chart-color-1..6    primary, tertiary, secondary,
+//                                        on-surface-variant, then primary-
+//                                        and tertiary-container deepened
+//                                        toward on-surface, as the pie chart's
+
+@include chart("sankey-chart");
+
+.sankey-chart {
+  --md-comp-sankey-chart-link-opacity: 0.4;
+  --md-comp-sankey-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
+  --md-comp-sankey-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
+}
+
+// chart() sets colors 1 to 4.
+@for $i from 5 through 6 {
+  .sankey-chart [data-series="#{$i}"] {
+    --sankey-chart-color: var(--md-comp-sankey-chart-color-#{$i});
+  }
+}
+
+// No grid lines or baseline: the nodes and links have no value axis.
+.sankey-chart-plot {
+  border: 0;
+  background: none;
+
+  > svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+}
+
+.sankey-chart-node {
+  fill: var(--sankey-chart-color);
+}
+
+.sankey-chart-link {
+  fill: var(--sankey-chart-color);
+  fill-opacity: var(--md-comp-sankey-chart-link-opacity);
+
+  // The link the keys or pointer picked.
+  &.active {
+    fill-opacity: 0.8;
+  }
+}
+
+// Level with the link's middle.
+.sankey-chart-tooltip {
+  translate: 12px -50%;
+
+  &.end {
+    translate: calc(-100% - 12px) -50%;
+  }
+
+  // The value header names a column, not a node, so it has no swatch.
+  > span.value::before {
+    content: none;
+  }
+}
+
+// Over the drawing, and out of the pointer's way, so a link under a name
+// still takes it.
+.sankey-chart-names {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.sankey-chart-name {
+  position: absolute;
+  top: var(--sankey-chart-y, 0%);
+  inset-inline-start: var(--sankey-chart-x, 0%);
+  padding-inline: 4px;
+  color: var(--md-sys-color-on-surface);
+  @include typescale("body-small");
+  white-space: nowrap;
+  translate: 0 -50%;
+
+  &.end {
+    inset-inline: auto calc(100% - var(--sankey-chart-x, 0%));
+  }
+}
+
+// The colors tell the nodes apart, so they keep them.
+@media (forced-colors: active) {
+  .sankey-chart-plot > svg {
+    forced-color-adjust: none;
+  }
+}

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

@@ -0,0 +1,153 @@
+@use "../abstracts" as *;
+
+// Scatter chart. A <figure class="scatter-chart"> holds a <figcaption> and a
+// <table> of data: the first column labels each row, the second is the x
+// axis, and each further column is a series named by its header cell.
+// Without JavaScript the table shows. ScatterChart draws each row as one
+// point per series and hides the table visually, so a screen reader still
+// reads the data as a table. The plot, tooltip and legend come from chart().
+//
+// The SVG stretches to the plot (preserveAspectRatio="none"), and points are
+// round caps on zero-length lines with a non-scaling stroke, so they stay
+// round at any size.
+//
+// Modifiers: .axis labels both axes at round values with grid lines,
+// .toggle makes each legend item a button that shows or hides its series,
+// and .bubble makes the last column each row's size, drawing every point as
+// a bubble whose area follows it. The script sets each bubble's
+// --scatter-chart-size, its diameter as a share of the largest, and animates
+// it on update(), so it is registered as a number.
+//
+// Tokens:
+//   --md-comp-scatter-chart-height       240px
+//   --md-comp-scatter-chart-point-size   8px
+//   --md-comp-scatter-chart-bubble-size  48px, the largest bubble's diameter
+//   --md-comp-scatter-chart-grid-color   outline-variant
+//   --md-comp-scatter-chart-color-1..4   primary, tertiary, secondary,
+//                                        on-surface-variant
+
+@property --scatter-chart-size {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@include chart("scatter-chart");
+@include chart-axis("scatter-chart");
+
+.scatter-chart {
+  --md-comp-scatter-chart-point-size: 8px;
+  --md-comp-scatter-chart-bubble-size: 48px;
+}
+
+.scatter-chart-plot > svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.scatter-chart-points {
+  fill: none;
+  stroke: var(--scatter-chart-color);
+  stroke-width: var(--md-comp-scatter-chart-point-size);
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+// Partly transparent, so overlapping bubbles still show through.
+.scatter-chart.bubble .scatter-chart-points {
+  stroke-width: calc(var(--md-comp-scatter-chart-bubble-size) * var(--scatter-chart-size));
+  stroke-opacity: 0.7;
+}
+
+// With .bubble, room the largest bubble's radius wide around the plot, and
+// the axis labels moved out by as much, so a bubble at the end of a scale
+// spills into empty space instead of over the labels, caption or legend.
+.scatter-chart.bubble {
+  --scatter-chart-room: calc(var(--md-comp-scatter-chart-bubble-size) / 2);
+
+  > .scatter-chart-plot {
+    margin: var(--scatter-chart-room);
+  }
+
+  &.axis > .scatter-chart-plot {
+    margin-block: calc(8px + var(--scatter-chart-room)) calc(#{rem(20px)} + var(--scatter-chart-room));
+    margin-inline-start: calc(var(--md-comp-scatter-chart-axis-width) + var(--scatter-chart-room));
+  }
+
+  .scatter-chart-axis:not(.x) > li > span {
+    inset-inline-end: calc(100% + var(--scatter-chart-room));
+  }
+
+  .scatter-chart-axis.x > li > span {
+    top: calc(100% + var(--scatter-chart-room));
+  }
+}
+
+// The x scale's labels, below the plot, each with a grid line up through it
+// at --at from the left. The script mirrors --at in a right-to-left chart.
+.scatter-chart.axis > .scatter-chart-plot {
+  margin-block-end: rem(20px);
+}
+
+.scatter-chart-axis.x {
+  > li {
+    inset-inline: auto;
+    inset-block: 0;
+    left: var(--at, 0%);
+    border-block-start: 0;
+    border-inline-start: 1px solid var(--md-comp-scatter-chart-grid-color);
+  }
+
+  > li > span {
+    inset-inline: auto;
+    top: 100%;
+    left: 0;
+    width: auto;
+    padding: 4px 0 0;
+    translate: -50% 0;
+  }
+}
+
+// The highlighted point's marker, and the tooltip level with it.
+.scatter-chart-cursor {
+  inset-block: auto;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--md-sys-color-surface);
+  border-radius: 50%;
+  box-sizing: border-box;
+  background-color: var(--scatter-chart-color);
+  translate: -50% -50%;
+}
+
+// Around a bubble, the marker is the bubble's size plus its border.
+.scatter-chart.bubble .scatter-chart-cursor {
+  width: max(14px, calc(var(--md-comp-scatter-chart-bubble-size) * var(--scatter-chart-size) + 4px));
+  height: max(14px, calc(var(--md-comp-scatter-chart-bubble-size) * var(--scatter-chart-size) + 4px));
+}
+
+.scatter-chart-tooltip {
+  translate: 12px -50%;
+
+  &.end {
+    translate: calc(-100% - 12px) -50%;
+  }
+
+  // The x header names the axis, not a series, so it has no swatch.
+  > span.x::before {
+    content: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .scatter-chart-cursor {
+    forced-color-adjust: none;
+  }
+
+  .scatter-chart.bubble .scatter-chart-points {
+    stroke-opacity: 1;
+  }
+}

package/src/sass/components/_scrim.scss

@@ -1,5 +1,3 @@
-@use "../abstracts" as *;
-
 // Scrim (M3 Expressive). A foundation, not a component: there is no markup an
 // author writes to get one. It is the wash a modal surface puts behind itself
 // to dim what it covers, and this is the one place its value is decided -

package/src/sass/components/_scrollspy.scss

@@ -1,5 +1,3 @@
-@use "../abstracts" as *;
-
 // ScrollSpy. The section is the target of a hash link. Offset is CSS
 // (scroll-margin). Which TOC link is current is IntersectionObserver.
 //

package/src/sass/components/_search.scss

@@ -4,7 +4,7 @@
 //
 // Anatomy is the HTML. A `<search class="search-bar">` is the bar - an
 // optional leading icon or icon button, an `<input type="search">`, and
-// optional trailing actions. `.searchbar` is the pre-1.0 alias.
+// optional trailing actions.
 //
 // `.search-view` is the surface the bar expands into, and it is two different
 // native elements because the two variants want two different behaviours:
@@ -46,17 +46,17 @@
 // a bare list interpolated into `.search-view > #{$_bar}` breaks out of its
 // context and emits a top-level rule.
 
-$_bar: ":is(.search-bar, .searchbar)";
+$_bar: ".search-bar";
 
 #{$_bar} {
   --md-comp-search-bar-container-color: var(--md-sys-color-surface-container-high);
-  --md-comp-search-bar-container-height: 56px;
-  --md-comp-search-bar-container-shape: 9999px;
+  --md-comp-search-bar-container-height: #{rem(56px)};
+  --md-comp-search-bar-container-shape: var(--md-sys-shape-corner-full);
   --md-comp-search-bar-leading-space: 16px;
   --md-comp-search-bar-trailing-space: 16px;
   --md-comp-search-bar-icon-label-space: 16px;
-  --md-comp-search-bar-icon-size: 24px;
-  --md-comp-search-bar-avatar-size: 30px;
+  --md-comp-search-bar-icon-size: #{rem(24px)};
+  --md-comp-search-bar-avatar-size: #{rem(30px)};
 
   position: relative;
   box-sizing: border-box;
@@ -151,26 +151,11 @@ $_bar: ":is(.search-bar, .searchbar)";
       appearance: none;
     }
   }
-
-  // Pre-1.0 `.searchbar` sat in a navbar beside a fixed drawer.
-  &.has-sidebar {
-    margin-inline-start: 0;
-
-    @include bp-up("expanded") {
-      // `width: auto`, because the margin sits *outside* the base bar's
-      // `width: 100%`: the two together make the bar 100% + 300px wide and
-      // push its trailing edge past the viewport, on exactly the fixed-drawer
-      // layout this rule exists to preserve. The legacy bar had no width of
-      // its own, so the margin shrank it.
-      width: auto;
-      margin-inline-start: 300px;
-    }
-  }
 }
 
 .search-view {
   --md-comp-search-view-container-color: var(--md-sys-color-surface-container-high);
-  --md-comp-search-view-container-shape: 12px;
+  --md-comp-search-view-container-shape: var(--md-sys-shape-corner-medium);
   --md-comp-search-view-header-height: 56px;
   --md-comp-search-view-divider-color: var(--md-sys-color-outline);
   --md-comp-search-view-bar-results-gap: 2px;
@@ -258,3 +243,22 @@ $_bar: ":is(.search-bar, .searchbar)";
     backdrop-filter: none;
   }
 }
+
+// The input inside clears its own focus ring, so the bar shows it.
+:is(#{$_bar}):not(.search-view *):has(input:focus-visible) {
+  @include focus-ring;
+}
+
+// Both surfaces are fills and shadows, which forced colors paint as Canvas and
+// drop. A bar inside the view is part of the view's surface.
+@media (forced-colors: active) {
+  :is(#{$_bar}):not(.search-view *),
+  .search-view {
+    outline: 1px solid CanvasText;
+  }
+
+  // The input inside clears its own focus ring.
+  :is(#{$_bar}):not(.search-view *):has(input:focus-visible) {
+    outline: 2px solid Highlight;
+  }
+}

package/src/sass/components/_show-more.scss

@@ -0,0 +1,8 @@
+@use "../abstracts" as *;
+
+// Show more. Clamped text and the <button> that shows all of it; the ShowMore
+// component hides the button with the hidden attribute while the text fits,
+// which the button's own display rule would otherwise beat.
+.show-more > button[hidden] {
+  display: none;
+}

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

@@ -2,7 +2,7 @@
 
 // Side sheets.
 //
-// Anatomy is the HTML. A dialog.side-sheet (or .right / .left) is the
+// Anatomy is the HTML. A dialog.side-sheet is the
 // surface, docked to the trailing edge by default. showModal() is the
 // modal variant (scrim, rounded inner corners). show() is the standard
 // variant (no scrim, a divider on the inner edge, page stays interactive).
@@ -21,38 +21,45 @@
 // Standard is for large windows next to the main pane. Modal is for
 // compact/medium, or whenever the sheet should interrupt.
 
-$_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet";
+$_sheet: "dialog.side-sheet";
 
 #{$_sheet} {
   --md-comp-side-sheet-container-color: var(--md-sys-color-surface-container-low);
-  --md-comp-side-sheet-container-shape: 28px;
+  --md-comp-side-sheet-container-shape: var(--md-sys-shape-corner-extra-large);
   --md-comp-side-sheet-container-width: 400px;
   --md-comp-side-sheet-shift: 0px;
+  // Entry and drag snap-back run on the default spatial spring, which follows
+  // the motion="expressive" switch.
+  --md-comp-side-sheet-motion: var(--md-sys-motion-spring-default-spatial);
+  --md-comp-side-sheet-motion-duration: var(--md-sys-motion-spring-default-spatial-duration);
+  // A spatial spring overshoots, so the sheet runs on past its docked edge by
+  // this much, padded, and the overshoot never uncovers the page there.
+  --_bleed: 24px;
 
   box-sizing: border-box;
   position: fixed;
-  float: none !important;
   inset-block: 0;
   inset-inline-start: auto;
-  inset-inline-end: 0;
-  width: min(var(--md-comp-side-sheet-container-width), 85%);
-  max-width: var(--md-comp-side-sheet-container-width);
+  inset-inline-end: calc(-1 * var(--_bleed));
+  width: calc(min(var(--md-comp-side-sheet-container-width), 85%) + var(--_bleed));
+  max-width: calc(var(--md-comp-side-sheet-container-width) + var(--_bleed));
   height: auto;
   max-height: none;
   min-width: 0;
   min-height: 0;
   margin: 0;
   padding: 0;
+  padding-inline-end: var(--_bleed);
   border: none;
   background-color: var(--md-comp-side-sheet-container-color);
   color: var(--md-sys-color-on-surface);
   outline: none;
   translate: var(--md-comp-side-sheet-shift) 0;
-  transition: translate 280ms ease, border-radius 200ms ease;
+  transition: translate var(--md-comp-side-sheet-motion-duration) var(--md-comp-side-sheet-motion), border-radius var(--md-sys-motion-duration-short4) ease;
   @include glass(var(--md-comp-side-sheet-container-color));
 
   &:not(:modal) {
-    z-index: 1100;
+    z-index: var(--expressive-z-sheet);
     border-radius: 0;
     box-shadow: none;
     // Standard: attached to the page, inner edge is a divider.
@@ -72,11 +79,10 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
   }
 
   // Leading-edge dock.
-  &.left,
-  &.left-sheet,
   &.start {
-    inset-inline-start: 0;
+    inset-inline-start: calc(-1 * var(--_bleed));
     inset-inline-end: auto;
+    padding-inline: var(--_bleed) 0;
 
     &:not(:modal) {
       border-inline-start: 0;
@@ -103,6 +109,9 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
     padding-inline: 24px 12px;
     background: none;
     box-shadow: none;
+    // A horizontal touch drag here dismisses the sheet; the browser would
+    // otherwise take it as a pan and cancel the pointer.
+    touch-action: pan-y;
   }
 
   > header:has(> :is(button, a):first-child) {
@@ -130,30 +139,7 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
   }
 
   > header :is(button, a.button) {
-    flex: 0 0 48px;
-    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;
-
-    > #{$icon} {
-      font-size: 24px;
-      width: 24px;
-      height: 24px;
-      line-height: 24px;
-    }
-
-    &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
-    }
-
-    @include focus-visible;
+    @include header-icon-action;
   }
 
   > :is(form, nav):last-child {
@@ -184,7 +170,7 @@ $_sheet: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dial
       translate: -100% 0;
     }
 
-    &:is(.start, .left, .left-sheet) {
+    &.start {
       translate: -100% 0;
 
       &:dir(rtl) {

package/src/sass/components/_skeleton.scss

@@ -1,5 +1,3 @@
-@use "../abstracts" as *;
-
 // Skeleton. An empty block that holds the place of content still loading,
 // with a shimmer passing across it. The block has no text and nothing to
 // announce: mark the region being filled with aria-busy="true", and report
@@ -25,7 +23,7 @@
     var(--md-sys-color-surface) 50%,
     transparent
   );
-  --md-comp-skeleton-shape: 8px;
+  --md-comp-skeleton-shape: var(--md-sys-shape-corner-small);
   --md-comp-skeleton-circle-size: 40px;
 
   display: block;
@@ -47,7 +45,7 @@
   }
 
   &.text {
-    --md-comp-skeleton-shape: 4px;
+    --md-comp-skeleton-shape: var(--md-sys-shape-corner-extra-small);
 
     width: 100%;
     height: 1em;