@scalewing/react 1.47.0 → 1.49.0

package/dist/styles.css

@@ -18,6 +18,8 @@
   --sw-color-success: #087443;
   --sw-color-warning: #B54708;
   --sw-color-border: #D2D2D7;
+  --sw-color-inverse: #1D1D1F;
+  --sw-color-onInverse: #FFFFFF;
   --sw-button-secondary-border: #D2D2D7;
   --sw-categorical-green: #2E8F47;
   --sw-categorical-blue: #0A7AFF;
@@ -92,6 +94,8 @@
   --sw-color-success: #5BE0A0;
   --sw-color-warning: #FDB022;
   --sw-color-border: #3A3A3C;
+  --sw-color-inverse: #2C2C2E;
+  --sw-color-onInverse: #F5F5F7;
   --sw-button-secondary-border: #3A3A3C;
   --sw-categorical-green: #2E8F47;
   --sw-categorical-blue: #0A7AFF;
@@ -854,8 +858,8 @@ body {
 }
 
 /* Backdrop blur makes a glass surface its own stacking context, so it lifts while it holds an open popup (see stacking.ts). */
-.sw-card-glass:has(.sw-select-list, .sw-action-menu-list, .sw-multi-select-panel, .sw-combobox-popup, .sw-tooltip:not([hidden]), .sw-date-field-calendar),
-.sw-accordion:has(.sw-select-list, .sw-action-menu-list, .sw-multi-select-panel, .sw-combobox-popup, .sw-tooltip:not([hidden]), .sw-date-field-calendar) {
+.sw-card-glass:has(.sw-select-list, .sw-action-menu-list, .sw-multi-select-panel, .sw-combobox-popup, .sw-context-switcher-popup, .sw-tooltip:not([hidden]), .sw-date-field-calendar),
+.sw-accordion:has(.sw-select-list, .sw-action-menu-list, .sw-multi-select-panel, .sw-combobox-popup, .sw-context-switcher-popup, .sw-tooltip:not([hidden]), .sw-date-field-calendar) {
   position: relative;
   z-index: 4;
 }
@@ -890,19 +894,25 @@ body {
 .sw-text-align-center { text-align: center; }
 .sw-text-align-end { text-align: end; }
 
-:where(.sw-text-display, .sw-text-heading, .sw-text-title, .sw-text-body, .sw-text-label, .sw-text-caption, .sw-text-data) { margin: 0; }
+:where(.sw-text-hero, .sw-text-display, .sw-text-headline, .sw-text-heading, .sw-text-title, .sw-text-lead, .sw-text-body, .sw-text-label, .sw-text-caption, .sw-text-data) { margin: 0; }
 
+.sw-text-hero { font-family: var(--sw-font-sans); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -1.7px; }
 .sw-text-display { font-family: var(--sw-font-sans); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.8px; }
+.sw-text-headline { font-family: var(--sw-font-sans); font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.7px; }
 .sw-text-heading { font-family: var(--sw-font-sans); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.45px; }
 .sw-text-title { font-family: var(--sw-font-sans); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
+.sw-text-lead { font-family: var(--sw-font-sans); font-size: 20px; line-height: 29px; font-weight: 400; letter-spacing: -0.3px; }
 .sw-text-body { font-family: var(--sw-font-sans); font-size: 17px; line-height: 25px; font-weight: 400; letter-spacing: -0.2px; }
 .sw-text-label { font-family: var(--sw-font-sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.2px; }
 .sw-text-caption { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: -0.08px; }
 .sw-text-data { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.08px; font-variant-numeric: tabular-nums; }
 
 @media not all and (min-width: 48rem) {
+  .sw-text-hero { font-size: 36px; line-height: 40px; letter-spacing: -0.7px; }
   .sw-text-display { font-size: 32px; line-height: 38px; letter-spacing: -0.6px; }
+  .sw-text-headline { font-size: 26px; line-height: 30px; letter-spacing: -0.4px; }
   .sw-text-heading { font-size: 24px; line-height: 30px; letter-spacing: -0.4px; }
+  .sw-text-lead { font-size: 17px; line-height: 25px; letter-spacing: -0.2px; }
 }
 
 [data-theme] .sw-font-mono,
@@ -1066,6 +1076,37 @@ body {
   .sw-button-group.sw-button-group-attached.sw-button-group-track > .sw-button[aria-pressed='true'] { border-color: Highlight; }
 }
 
+[data-theme] a.sw-button-link {
+  text-decoration: none;
+}
+
+[data-theme] a.sw-button-link.sw-button-primary,
+[data-theme] a.sw-button-link.sw-button-primary:hover { color: var(--sw-color-onAccent); }
+[data-theme] a.sw-button-link.sw-button-secondary,
+[data-theme] a.sw-button-link.sw-button-secondary:hover { color: var(--sw-color-onSecondary); }
+[data-theme] a.sw-button-link.sw-button-tertiary,
+[data-theme] a.sw-button-link.sw-button-tertiary:hover { color: var(--sw-color-onTertiary); }
+[data-theme] a.sw-button-link.sw-button-ghost,
+[data-theme] a.sw-button-link.sw-button-ghost:hover { color: var(--sw-color-accent); }
+[data-theme] a.sw-button-link.sw-button-danger,
+[data-theme] a.sw-button-link.sw-button-danger:hover { color: var(--sw-color-onDanger); }
+[data-theme] a.sw-button-link.sw-button-neutral,
+[data-theme] a.sw-button-link.sw-button-neutral:hover { color: var(--sw-color-text); }
+
+[data-theme] a.sw-button-link[aria-current='page'] {
+  box-shadow: 0 0 0 2px var(--sw-color-background), 0 0 0 4px var(--sw-color-accent);
+}
+
+[data-theme] a.sw-button-link[aria-current='page']:focus-visible {
+  outline-offset: calc(var(--sw-focus-ring-offset) + 4px);
+}
+
+@media (forced-colors: active) {
+  [data-theme] a.sw-button-link { color: LinkText; }
+  [data-theme] a.sw-button-link[aria-current='page'] { border-color: Highlight; position: relative; }
+  [data-theme] a.sw-button-link[aria-current='page']::after { border: 2px solid Highlight; border-radius: inherit; content: ''; inset: calc(-1px - 4px); pointer-events: none; position: absolute; }
+}
+
 .sw-checkbox {
   display: flex;
   flex-direction: column;
@@ -3056,6 +3097,203 @@ body {
   .sw-list-group-tiles > .sw-list > .sw-list-item { border-color: CanvasText; }
 }
 
+.sw-fixture-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.sw-fixture-group-title {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  padding-block: var(--sw-space-2) var(--sw-space-1);
+}
+
+.sw-fixture-list {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-fixture-item,
+.sw-fixture-row {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+}
+
+.sw-fixture-item {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-fixture-row {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  margin: 0;
+  min-height: var(--sw-control-md-min-height);
+  padding: var(--sw-space-2);
+  row-gap: var(--sw-space-1);
+  text-align: start;
+  text-decoration: none;
+  width: 100%;
+}
+
+.sw-fixture-row-pressable { cursor: pointer; }
+
+@media (hover: hover) {
+  .sw-fixture-row-pressable:hover { background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent); }
+}
+
+.sw-fixture-row-pressable:focus { outline: none; }
+
+.sw-fixture-row-pressable:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+[data-theme] a.sw-fixture-row,
+[data-theme] a.sw-fixture-row:hover {
+  color: var(--sw-color-text);
+}
+
+[data-theme] a.sw-fixture-row:focus-visible {
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-fixture-team {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-2);
+  min-width: 0;
+}
+
+.sw-fixture-team-home {
+  grid-column: 1;
+  justify-content: flex-end;
+  text-align: end;
+}
+
+.sw-fixture-team-away {
+  grid-column: 3;
+}
+
+.sw-fixture-name {
+  font-weight: 500;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sw-fixture-mark {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-fixture-center {
+  font-variant-numeric: tabular-nums;
+  grid-column: 2;
+  margin-inline: var(--sw-space-3);
+  justify-self: center;
+  white-space: nowrap;
+}
+
+.sw-fixture-center-time {
+  background: var(--sw-color-subtle);
+  border-radius: var(--sw-radius-sm);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  padding: calc(var(--sw-space-1) / 2) var(--sw-space-2);
+}
+
+.sw-fixture-center-score {
+  font-weight: 700;
+}
+
+.sw-fixture-end {
+  align-items: center;
+  color: var(--sw-color-muted);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 13px;
+  gap: var(--sw-space-2);
+  grid-column: 4;
+  justify-content: flex-end;
+  letter-spacing: -0.08px;
+  margin-inline-start: var(--sw-space-3);
+  line-height: 18px;
+}
+
+.sw-fixture-chevron {
+  border-bottom: 2px solid var(--sw-color-muted);
+  border-right: 2px solid var(--sw-color-muted);
+  box-sizing: border-box;
+  height: var(--sw-space-2);
+  width: var(--sw-space-2);
+  grid-column: 5;
+  justify-self: end;
+  margin-inline: var(--sw-space-3) var(--sw-space-1);
+  transform: rotate(-45deg);
+}
+
+.sw-fixture-chevron:dir(rtl) { transform: rotate(135deg); }
+
+@media (forced-colors: active) {
+  .sw-fixture-row-pressable:hover {
+    outline: var(--sw-focus-ring-width) solid Highlight;
+    outline-offset: calc(-1 * var(--sw-focus-ring-width));
+  }
+  .sw-fixture-center-time { border: 1px solid CanvasText; }
+  .sw-fixture-chevron { border-color: CanvasText; }
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-fixture-list {
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
+  }
+
+  .sw-fixture-end {
+    grid-column: 1 / 4;
+    grid-row: 2;
+    justify-content: flex-start;
+    margin-inline-start: 0;
+  }
+
+  .sw-fixture-chevron {
+    grid-column: 4;
+    grid-row: 1 / span 2;
+  }
+}
+
+@supports not (grid-template-columns: subgrid) {
+  .sw-fixture-item {
+    display: block;
+  }
+
+  .sw-fixture-row {
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto;
+  }
+
+  @media not all and (min-width: 48rem) {
+    .sw-fixture-row {
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
+    }
+  }
+}
+
 .sw-file-field-frame {
   border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-md);
@@ -3583,7 +3821,8 @@ body {
 
 [data-theme] .sw-section-nav-count,
 [data-theme] .sw-nav-count,
-[data-theme] .sw-app-shell-count {
+[data-theme] .sw-app-shell-count,
+[data-theme] .sw-context-switcher-count {
   align-items: center;
   background: var(--sw-color-danger);
   border-radius: var(--sw-radius-pill);
@@ -3612,13 +3851,15 @@ body {
  * each wins in any order.
  */
 [data-theme] .sw-nav-count.sw-nav-count-accent,
-[data-theme] .sw-app-shell-count.sw-app-shell-count-accent {
+[data-theme] .sw-app-shell-count.sw-app-shell-count-accent,
+[data-theme] .sw-context-switcher-count.sw-context-switcher-count-accent {
   background: var(--sw-color-accent);
   color: var(--sw-color-onAccent);
 }
 
 [data-theme] .sw-nav-count.sw-nav-count-warning,
-[data-theme] .sw-app-shell-count.sw-app-shell-count-warning {
+[data-theme] .sw-app-shell-count.sw-app-shell-count-warning,
+[data-theme] .sw-context-switcher-count.sw-context-switcher-count-warning {
   background: color-mix(in srgb, var(--sw-color-warning) 10%, var(--sw-color-surface));
   border: 1px solid var(--sw-color-warning);
   color: color-mix(in srgb, var(--sw-color-warning) 70%, var(--sw-color-text));
@@ -3642,7 +3883,8 @@ body {
 @media (forced-colors: active) {
   [data-theme] .sw-section-nav-count,
   [data-theme] .sw-nav-count,
-  [data-theme] .sw-app-shell-count { border: 1px solid CanvasText; }
+  [data-theme] .sw-app-shell-count,
+  [data-theme] .sw-context-switcher-count { border: 1px solid CanvasText; }
 }
 
 .sw-bar-chart {
@@ -4306,701 +4548,1597 @@ body {
   [data-theme] .sw-section-nav-link[aria-current] { border-color: Highlight; color: CanvasText; }
 }
 
-.sw-app-shell {
-  min-height: 100vh;
-  min-height: 100dvh;
+.sw-band {
+  box-sizing: border-box;
+  width: 100%;
 }
 
-.sw-app-shell-bar {
-  align-items: center;
-  display: flex;
-  gap: var(--sw-space-2);
+.sw-band-surface {
+  background: var(--sw-color-surface);
+  color: var(--sw-color-text);
 }
 
-.sw-app-shell-bar-title {
-  flex: 1 1 auto;
-  min-width: 0;
+.sw-band-subtle {
+  background: var(--sw-color-subtle);
+  color: var(--sw-color-text);
 }
 
-.sw-app-shell-bar-end {
-  align-items: center;
-  display: flex;
-  flex: none;
-  gap: var(--sw-space-2);
+.sw-band-inverse {
+  --sw-color-background: var(--sw-color-inverse);
+  --sw-color-surface: var(--sw-color-inverse);
+  --sw-color-text: var(--sw-color-onInverse);
+  --sw-color-muted: color-mix(in srgb, var(--sw-color-onInverse) 78%, var(--sw-color-inverse));
+  --sw-color-border: color-mix(in srgb, var(--sw-color-onInverse) 18%, var(--sw-color-inverse));
+  --sw-color-subtle: color-mix(in srgb, var(--sw-color-onInverse) 10%, var(--sw-color-inverse));
+  --sw-color-accent: var(--sw-color-onInverse);
+  --sw-color-onAccent: var(--sw-color-inverse);
+  background: var(--sw-color-inverse);
+  color: var(--sw-color-onInverse);
 }
 
-.sw-button.sw-app-shell-menu {
-  flex: none;
-  padding-inline: 0;
+[data-theme] .sw-band-inverse a:not(.sw-button) {
+  color: var(--sw-color-onInverse);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
+  text-underline-offset: 0.2em;
 }
 
-.sw-button-xs.sw-app-shell-menu { min-width: var(--sw-control-xs-min-height); }
-.sw-button-sm.sw-app-shell-menu { min-width: var(--sw-control-sm-min-height); }
-.sw-button-md.sw-app-shell-menu { min-width: var(--sw-control-md-min-height); }
-
-@media (pointer: coarse) {
-  .sw-button.sw-app-shell-menu {
-    min-height: var(--sw-control-md-min-height);
-    min-width: var(--sw-control-md-min-height);
-  }
+[data-theme] .sw-band-inverse a:not(.sw-button):hover {
+  text-decoration-color: currentColor;
 }
 
-.sw-app-shell-main {
-  display: block;
-  min-width: 0;
+.sw-band-inner {
+  box-sizing: border-box;
+  margin-inline: auto;
+  padding-inline: var(--sw-space-4);
+  width: 100%;
 }
 
-.sw-app-shell-sidebar,
-.sw-app-shell-sidebar .sw-app-shell-rail-slot {
-  display: none;
+.sw-band-inner-container { max-width: calc(var(--sw-container-max) + 2 * var(--sw-space-5)); }
+
+.sw-band-inner-reading { max-width: calc(var(--sw-reading-max) + 2 * var(--sw-space-5)); }
+
+@media (min-width: 48rem) {
+  .sw-band-inner { padding-inline: var(--sw-space-5); }
 }
 
-.sw-app-shell-header,
-.sw-app-shell-footer {
-  flex: none;
-  padding: var(--sw-space-3);
+@media (forced-colors: active) {
+  .sw-band-inverse { border-block: 1px solid CanvasText; }
 }
 
-.sw-app-shell-footer {
-  border-top: 1px solid var(--sw-color-border);
+.sw-hero {
+  align-items: center;
+  display: grid;
+  gap: var(--sw-space-8);
+  min-width: 0;
 }
 
-.sw-app-shell-nav {
-  box-sizing: border-box;
+.sw-hero-text {
   display: flex;
-  flex: 1 1 auto;
   flex-direction: column;
   gap: var(--sw-space-4);
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: var(--sw-space-2) var(--sw-space-3);
+  min-width: 0;
 }
 
-.sw-app-shell-group {
+.sw-hero:not(.sw-hero-with-media) .sw-hero-text {
+  max-width: var(--sw-reading-max);
+}
+
+.sw-hero-actions {
   display: flex;
-  flex-direction: column;
-  gap: var(--sw-space-1);
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+  padding-top: var(--sw-space-1);
 }
 
-.sw-app-shell-group-label {
-  color: var(--sw-color-muted);
-  font-family: var(--sw-font-sans);
-  font-size: 13px;
-  font-weight: 600;
-  letter-spacing: -0.08px;
-  line-height: 18px;
-  margin: 0;
-  padding-inline: var(--sw-space-2);
+.sw-hero-media {
+  justify-self: center;
+  max-width: 100%;
+  min-width: 0;
 }
 
-.sw-app-shell-list {
+@media (min-width: 48rem) {
+  .sw-hero-text { gap: var(--sw-space-5); }
+  .sw-hero-with-media { grid-template-columns: minmax(0, 1fr) auto; }
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-hero { gap: var(--sw-space-6); }
+  .sw-hero-actions { align-items: stretch; flex-direction: column; }
+}
+
+.sw-site-footer-top {
+  display: grid;
+  gap: var(--sw-space-6) var(--sw-space-5);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.sw-site-footer-brand {
   display: flex;
   flex-direction: column;
-  gap: var(--sw-space-1);
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  gap: var(--sw-space-3);
+  grid-column: 1 / -1;
+  max-width: 20rem;
 }
 
-.sw-app-shell-item > .sw-tooltip-anchor {
-  display: flex;
+.sw-site-footer-brand > :first-child {
+  align-self: flex-start;
 }
 
-[data-theme] .sw-app-shell-link {
-  align-items: center;
-  border: 2px solid transparent;
-  border-radius: var(--sw-radius-sm);
-  box-sizing: border-box;
-  color: var(--sw-color-text);
-  display: flex;
-  flex: 1 1 auto;
-  font-family: var(--sw-font-sans);
+.sw-site-footer-tagline {
+  color: var(--sw-color-muted);
+  margin: 0;
   font-size: 15px;
-  font-weight: 500;
-  gap: var(--sw-space-3);
+  font-weight: 400;
   letter-spacing: -0.2px;
   line-height: 20px;
-  min-height: var(--sw-control-sm-min-height);
-  padding: var(--sw-space-1) var(--sw-space-2);
-  text-decoration: none;
 }
 
-[data-theme] .sw-app-shell-link:hover {
-  background: color-mix(in srgb, var(--sw-color-muted) 12%, transparent);
+.sw-site-footer-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  min-width: 0;
 }
 
-[data-theme] .sw-app-shell-link:focus-visible {
-  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
-  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+.sw-site-footer-label {
+  color: var(--sw-color-text);
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
 }
 
-[data-theme] .sw-app-shell-link[aria-current] {
-  background: color-mix(in srgb, var(--sw-color-muted) 18%, transparent);
-  font-weight: 600;
+.sw-site-footer-links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.sw-app-shell-icon {
+[data-theme] .sw-band-inverse a.sw-site-footer-link {
+  color: var(--sw-color-muted);
   display: inline-flex;
-  flex: none;
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+  text-decoration-color: transparent;
 }
 
-.sw-app-shell-label {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow-wrap: anywhere;
+[data-theme] .sw-band-inverse a.sw-site-footer-link:is(:hover, :focus-visible) {
+  color: var(--sw-color-text);
+  text-decoration-color: currentColor;
 }
 
-.sw-app-shell-count {
-  flex: none;
+[data-theme] .sw-band-inverse a.sw-site-footer-link[aria-current='page'] {
+  color: var(--sw-color-text);
+  font-weight: 600;
 }
 
-@media (pointer: coarse) {
-  [data-theme] .sw-app-shell-link { min-height: var(--sw-control-md-min-height); }
+.sw-site-footer-bottom {
+  align-items: center;
+  border-top: 1px solid var(--sw-color-border);
+  color: var(--sw-color-muted);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+  justify-content: space-between;
+  margin-top: var(--sw-space-6);
+  padding-top: var(--sw-space-4);
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: -0.08px;
+  line-height: 18px;
 }
 
-@media (forced-colors: active) {
-  [data-theme] .sw-app-shell-link { color: LinkText; }
-  [data-theme] .sw-app-shell-link[aria-current] { border-color: Highlight; color: CanvasText; }
+.sw-site-footer-end {
+  margin-inline-start: auto;
 }
 
-@media (min-width: 64rem) {
-  .sw-app-shell {
-    align-items: start;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
+@media (min-width: 48rem) {
+  .sw-site-footer-top {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sw-space-6) var(--sw-space-8);
+    justify-content: space-between;
   }
+}
 
-  .sw-app-shell-bar {
-    display: none;
+@media (pointer: coarse) {
+  [data-theme] .sw-band-inverse a.sw-site-footer-link {
+    align-items: center;
+    min-height: var(--sw-control-md-min-height);
   }
 
-  .sw-app-shell-sidebar {
-    background: var(--sw-color-surface);
-    border-inline-end: 1px solid var(--sw-color-border);
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    height: 100dvh;
-    position: sticky;
-    top: 0;
-    width: calc(var(--sw-control-md-min-height) + 2 * var(--sw-space-3) + 1px);
+  .sw-site-footer-links {
+    gap: 0;
   }
+}
 
-  @media not all and (min-width: 75rem) {
-    .sw-app-shell-sidebar .sw-app-shell-slot {
-      display: none;
-    }
-
-    .sw-app-shell-sidebar .sw-app-shell-rail-slot {
-      display: block;
-    }
-
-    .sw-app-shell-sidebar .sw-app-shell-label,
-    .sw-app-shell-sidebar .sw-app-shell-group-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-
-    .sw-app-shell-sidebar .sw-app-shell-nav {
-      gap: var(--sw-space-2);
-    }
-
-    .sw-app-shell-sidebar .sw-app-shell-group + .sw-app-shell-group {
-      border-top: 1px solid var(--sw-color-border);
-      padding-top: var(--sw-space-2);
-    }
-
-    [data-theme] .sw-app-shell-sidebar .sw-app-shell-link {
-      justify-content: center;
-      min-height: var(--sw-control-md-min-height);
-      padding: 0;
-      position: relative;
-    }
-
-    .sw-app-shell-sidebar .sw-app-shell-count {
-      inset-block-start: 0;
-      inset-inline-end: 0;
-      position: absolute;
-    }
+@media (forced-colors: active) {
+  [data-theme] .sw-band-inverse a.sw-site-footer-link {
+    color: LinkText;
   }
-}
 
-@media (min-width: 75rem) {
-  .sw-app-shell-sidebar {
-    width: 15rem;
+  .sw-site-footer-bottom {
+    border-top-color: CanvasText;
   }
 }
 
-.sw-app-shell-drawer {
+.sw-site-header {
+  --sw-site-header-height: calc(var(--sw-control-md-min-height) + var(--sw-space-3));
   background: var(--sw-color-surface);
-  border: 0;
-  border-inline-end: 1px solid var(--sw-color-border);
-  box-sizing: border-box;
+  border-bottom: 1px solid var(--sw-color-border);
   color: var(--sw-color-text);
-  height: 100%;
-  inset-block: 0;
-  inset-inline: 0 auto;
-  margin: 0;
-  max-height: none;
-  max-width: calc(100% - var(--sw-space-8));
-  overflow: hidden;
-  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
-  padding-inline-start: env(safe-area-inset-left, 0px);
-  width: 20rem;
+  font-family: var(--sw-font-sans);
+  position: relative;
 }
 
-.sw-app-shell-drawer:dir(rtl) {
-  padding-inline-start: env(safe-area-inset-right, 0px);
+.sw-site-header-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 5;
 }
 
-.sw-app-shell-drawer[open] {
-  animation: sw-app-shell-drawer-in var(--sw-motion-default) var(--sw-motion-easing);
+.sw-site-header-bar {
+  align-items: center;
+  box-sizing: border-box;
   display: flex;
-  flex-direction: column;
+  gap: var(--sw-space-5);
+  justify-content: space-between;
+  margin-inline: auto;
+  max-width: calc(var(--sw-container-max) + 2 * var(--sw-space-5));
+  min-height: var(--sw-site-header-height);
+  padding-inline: var(--sw-space-4);
 }
 
-.sw-app-shell-drawer[open]:dir(rtl) {
-  animation-name: sw-app-shell-drawer-in-rtl;
+.sw-site-header-brand {
+  align-items: center;
+  display: flex;
+  flex: none;
 }
 
-@keyframes sw-app-shell-drawer-in {
-  from { translate: -100% 0; }
+.sw-site-header-nav,
+.sw-site-header-actions {
+  display: none;
 }
 
-@keyframes sw-app-shell-drawer-in-rtl {
-  from { translate: 100% 0; }
+.sw-site-header-compact {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-1);
 }
 
-.sw-app-shell-drawer::backdrop {
-  background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
+.sw-site-header-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.sw-app-shell-drawer-top {
-  align-items: center;
+.sw-site-header-nav .sw-site-header-list {
   display: flex;
-  flex: none;
-  gap: var(--sw-space-2);
-  padding: var(--sw-space-3) var(--sw-space-3) 0;
+  gap: var(--sw-space-5);
 }
 
-.sw-app-shell-drawer-top .sw-app-shell-header {
-  flex: 1 1 auto;
-  min-width: 0;
-  padding: 0;
+[data-theme] .sw-site-header-nav .sw-site-header-link {
+  align-items: center;
+  color: var(--sw-color-text);
+  display: inline-flex;
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-height: var(--sw-site-header-height);
+  text-decoration: none;
 }
 
-.sw-button.sw-app-shell-close {
-  flex: none;
-  padding-inline: 0;
+[data-theme] .sw-site-header-nav .sw-site-header-link:hover {
+  box-shadow: inset 0 -2px 0 var(--sw-color-border);
 }
 
-.sw-button-xs.sw-app-shell-close { min-width: var(--sw-control-xs-min-height); }
-.sw-button-sm.sw-app-shell-close { min-width: var(--sw-control-sm-min-height); }
-.sw-button-md.sw-app-shell-close { min-width: var(--sw-control-md-min-height); }
+[data-theme] .sw-site-header-nav .sw-site-header-link[aria-current] {
+  box-shadow: inset 0 -2px 0 currentColor;
+  font-weight: 600;
+}
 
-@media (pointer: coarse) {
-  .sw-button.sw-app-shell-close {
-    min-height: var(--sw-control-md-min-height);
-    min-width: var(--sw-control-md-min-height);
-  }
+[data-theme] .sw-site-header-nav .sw-site-header-link:focus-visible {
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .sw-app-shell-drawer[open],
-  .sw-app-shell-drawer[open]:dir(rtl) { animation: none; }
+.sw-site-header-actions {
+  align-items: center;
+  gap: var(--sw-space-4);
 }
 
-@media (forced-colors: active) {
-  .sw-app-shell-drawer { border-inline-end-color: CanvasText; }
+@media (min-width: 48rem) {
+  .sw-site-header-bar { padding-inline: var(--sw-space-5); }
 }
 
-.sw-dialog {
-  background: var(--sw-glass-fill);
-  border: 1px solid var(--sw-glass-border);
-  border-radius: var(--sw-radius-lg);
-  box-shadow: inset 0 1px 0 var(--sw-glass-specular);
-  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
-  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
-  box-sizing: border-box;
-  color: var(--sw-color-text);
-  margin: auto;
-  max-height: min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8));
-  max-width: min(var(--sw-dialog-max), calc(100vw - var(--sw-space-8)));
-  overflow: auto;
-  width: calc(100% - var(--sw-space-8));
+@media (min-width: 64rem) {
+  .sw-site-header { --sw-site-header-height: calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1)); }
+  .sw-site-header-nav { display: block; }
+  .sw-site-header-actions { display: flex; }
+  .sw-site-header-compact { display: none; }
 }
 
-.sw-dialog-lg {
-  max-width: min(var(--sw-dialog-max-lg), calc(100vw - var(--sw-space-8)));
+.sw-site-header-menu > summary {
+  list-style: none;
 }
 
-.sw-dialog-xl {
-  max-width: min(var(--sw-dialog-max-xl), calc(100vw - var(--sw-space-8)));
+.sw-site-header-menu > summary::-webkit-details-marker {
+  display: none;
 }
 
-@media not all and (min-width: 48rem) {
-  .sw-dialog-sheet-below-md {
-    border-radius: var(--sw-radius-lg) var(--sw-radius-lg) 0 0;
-    border-width: 1px 0 0;
-    margin: auto 0 0;
-    max-height: min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8));
-    max-width: none;
-    padding-bottom: calc(var(--sw-space-5) + env(safe-area-inset-bottom, 0px));
-    padding-left: max(var(--sw-space-5), env(safe-area-inset-left, 0px));
-    padding-right: max(var(--sw-space-5), env(safe-area-inset-right, 0px));
-    width: 100%;
-  }
+.sw-site-header-menu-button {
+  align-items: center;
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  height: var(--sw-control-md-min-height);
+  justify-content: center;
+  width: var(--sw-control-md-min-height);
+}
 
-  .sw-dialog-sheet-below-md[open] {
-    animation: sw-dialog-sheet-in var(--sw-motion-default) var(--sw-motion-easing);
-  }
+.sw-site-header-menu-button:hover {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
 
-  .sw-dialog-sheet-below-md .sw-dialog-footer {
-    bottom: calc(-1 * (var(--sw-space-5) + env(safe-area-inset-bottom, 0px)));
-    margin-bottom: calc(-1 * (var(--sw-space-5) + env(safe-area-inset-bottom, 0px)));
-    padding-bottom: calc(var(--sw-space-3) + env(safe-area-inset-bottom, 0px));
-  }
+.sw-site-header-menu-button:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
 }
 
-@keyframes sw-dialog-sheet-in {
-  from { translate: 0 100%; }
+.sw-site-header-menu-open,
+.sw-site-header-menu-close,
+.sw-site-header-glyph {
+  align-items: center;
+  display: inline-flex;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .sw-dialog-sheet-below-md[open] { animation: none; }
+.sw-site-header-menu[open] .sw-site-header-menu-open,
+.sw-site-header-menu:not([open]) .sw-site-header-menu-close {
+  display: none;
 }
 
-.sw-dialog::backdrop {
-  background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
+.sw-site-header-panel {
+  background: var(--sw-color-surface);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: calc(100dvh - var(--sw-site-header-height) - 1px);
+  inset-inline: 0;
+  overflow-y: auto;
+  padding: var(--sw-space-2) var(--sw-space-4) var(--sw-space-6);
+  position: absolute;
+  top: calc(100% + 1px);
 }
 
-.sw-dialog:focus-visible {
-  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
-  outline-offset: var(--sw-focus-ring-offset);
+.sw-site-header-menu-nav .sw-site-header-list {
+  display: flex;
+  flex-direction: column;
 }
 
-.sw-dialog-header {
-  align-items: flex-start;
+[data-theme] .sw-site-header-menu-nav .sw-site-header-link {
+  align-items: center;
+  border-bottom: 1px solid var(--sw-color-border);
+  color: var(--sw-color-text);
+  display: flex;
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.3px;
+  line-height: 28px;
+  min-height: calc(var(--sw-control-md-min-height) + var(--sw-space-3));
+  text-decoration: none;
+}
+
+[data-theme] .sw-site-header-menu-nav .sw-site-header-link[aria-current] {
+  color: var(--sw-color-accent);
+}
+
+[data-theme] .sw-site-header-menu-nav .sw-site-header-link:focus-visible {
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-site-header-menu-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  margin-top: auto;
+  padding-top: var(--sw-space-5);
+}
+
+/*
+ * Forced colours drop box shadows, so the current destination's bar is a
+ * thick underline there.
+ */
+@media (forced-colors: active) {
+  .sw-site-header,
+  [data-theme] .sw-site-header-menu-nav .sw-site-header-link {
+    border-color: CanvasText;
+  }
+
+  [data-theme] .sw-site-header-link[aria-current] {
+    color: Highlight;
+  }
+
+  [data-theme] .sw-site-header-nav .sw-site-header-link[aria-current] {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: var(--sw-space-2);
+  }
+
+  .sw-site-header-menu-button {
+    border: 1px solid ButtonText;
+  }
+}
+
+.sw-app-shell {
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+.sw-app-shell-bar {
+  align-items: center;
   display: flex;
   gap: var(--sw-space-2);
 }
 
-.sw-dialog-header > :is(h2, h3),
-.sw-dialog-titles {
+.sw-app-shell-bar-title {
   flex: 1 1 auto;
   min-width: 0;
 }
 
-.sw-button.sw-dialog-close {
+.sw-app-shell-bar-end {
+  align-items: center;
+  display: flex;
+  flex: none;
+  gap: var(--sw-space-2);
+}
+
+.sw-button.sw-app-shell-menu {
   flex: none;
   padding-inline: 0;
-  min-width: var(--sw-control-sm-min-height);
-    margin-block: calc((28px - var(--sw-control-sm-min-height)) / 2);
-    margin-inline-end: calc((var(--sw-space-4) - var(--sw-control-sm-min-height)) / 2);
 }
 
+.sw-button-xs.sw-app-shell-menu { min-width: var(--sw-control-xs-min-height); }
+.sw-button-sm.sw-app-shell-menu { min-width: var(--sw-control-sm-min-height); }
+.sw-button-md.sw-app-shell-menu { min-width: var(--sw-control-md-min-height); }
+
 @media (pointer: coarse) {
-  .sw-button.sw-dialog-close {
+  .sw-button.sw-app-shell-menu {
     min-height: var(--sw-control-md-min-height);
     min-width: var(--sw-control-md-min-height);
-    margin-block: calc((28px - var(--sw-control-md-min-height)) / 2);
-    margin-inline-end: calc((var(--sw-space-4) - var(--sw-control-md-min-height)) / 2);
   }
 }
 
-/* Private control chrome: two strokes crossed in a space-4 square, in the
-   button's color; borders, so forced colors keep them. */
-.sw-dialog-close-glyph {
-  flex: none;
-  height: var(--sw-space-4);
-  position: relative;
-  width: var(--sw-space-4);
-}
-
-.sw-dialog-close-glyph::before,
-.sw-dialog-close-glyph::after {
-  border-top: 2px solid currentColor;
-  border-radius: 1px;
-  box-sizing: border-box;
-  content: '';
-  left: 0;
-  margin-top: -1px;
-  position: absolute;
-  top: 50%;
-  width: 100%;
+.sw-app-shell-main {
+  display: block;
+  min-width: 0;
 }
 
-.sw-dialog-close-glyph::before { transform: rotate(45deg); }
-.sw-dialog-close-glyph::after { transform: rotate(-45deg); }
-
-.sw-dialog-header-framed {
-  align-items: center;
-  gap: var(--sw-space-3);
+.sw-app-shell-sidebar,
+.sw-app-shell-sidebar .sw-app-shell-rail-slot {
+  display: none;
 }
 
-.sw-dialog-icon {
-  display: inline-flex;
+.sw-app-shell-header,
+.sw-app-shell-footer {
   flex: none;
+  padding: var(--sw-space-3);
 }
 
-.sw-dialog-description { margin: 0; }
-
-.sw-dialog-footer {
-  align-items: center;
-  background: var(--sw-color-surface);
+.sw-app-shell-footer {
   border-top: 1px solid var(--sw-color-border);
-  /* Sticky insets count from the scrollport's padding edge: step past the
-     dialog's own padding to sit on its bottom edge. */
-  bottom: calc(-1 * var(--sw-space-5));
+}
+
+.sw-app-shell-nav {
   box-sizing: border-box;
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--sw-space-2) var(--sw-space-4);
-  margin: 0 calc(-1 * var(--sw-space-5)) calc(-1 * var(--sw-space-5));
-  padding: var(--sw-space-3) var(--sw-space-5);
-  position: sticky;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--sw-space-4);
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--sw-space-2) var(--sw-space-3);
 }
 
-.sw-dialog-footer-status {
-  align-items: center;
-  column-gap: var(--sw-space-2);
+.sw-app-shell-group {
   display: flex;
-  flex: 1 1 auto;
-  flex-wrap: wrap;
-  min-width: 0;
+  flex-direction: column;
+  gap: var(--sw-space-1);
 }
 
-/* The status line: muted caption words beside the actions. Its children
-   sit on one row and wrap as one phrase. */
-.sw-dialog-footer-note {
+.sw-app-shell-group-label {
   color: var(--sw-color-muted);
   font-family: var(--sw-font-sans);
   font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
   line-height: 18px;
-  min-width: 0;
-  overflow-wrap: anywhere;
+  margin: 0;
+  padding-inline: var(--sw-space-2);
 }
 
-/* With no figure and no status line the live region stays in the
-   dialog, so a first figure is still announced, but it takes no room in
-   the footer. */
-.sw-dialog-footer-status:empty {
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
+.sw-app-shell-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.sw-dialog-footer-actions {
+.sw-app-shell-item > .sw-tooltip-anchor {
   display: flex;
-  flex: 0 1 auto;
-  flex-wrap: wrap;
-  gap: var(--sw-space-2);
-  justify-content: flex-end;
-  margin-inline-start: auto;
 }
 
-@media (forced-colors: active) {
-  .sw-dialog-footer { border-top-color: CanvasText; }
+[data-theme] .sw-app-shell-link {
+  align-items: center;
+  border: 2px solid transparent;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  flex: 1 1 auto;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 500;
+  gap: var(--sw-space-3);
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-height: var(--sw-control-sm-min-height);
+  padding: var(--sw-space-1) var(--sw-space-2);
+  text-decoration: none;
 }
 
-.sw-dialog-banded {
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
-  background: var(--sw-color-surface);
-  border-color: transparent;
-  box-shadow: var(--sw-elevation-md);
+[data-theme] .sw-app-shell-link:hover {
+  background: color-mix(in srgb, var(--sw-color-muted) 12%, transparent);
 }
 
-.sw-dialog-banded .sw-dialog-header {
-  align-items: center;
-  background: var(--sw-color-surface);
-  border-bottom: 1px solid var(--sw-color-border);
-  margin: calc(-1 * var(--sw-space-5)) calc(-1 * var(--sw-space-5)) 0;
-  padding: var(--sw-space-4) var(--sw-space-5);
-  position: sticky;
-  top: calc(-1 * var(--sw-space-5));
-  z-index: 5;
+[data-theme] .sw-app-shell-link:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
 }
 
-@media not all and (min-width: 48rem) {
-  .sw-dialog-sheet-below-md.sw-dialog-banded .sw-dialog-header {
-    margin-left: calc(-1 * max(var(--sw-space-5), env(safe-area-inset-left, 0px)));
-    margin-right: calc(-1 * max(var(--sw-space-5), env(safe-area-inset-right, 0px)));
-    padding-left: max(var(--sw-space-5), env(safe-area-inset-left, 0px));
-    padding-right: max(var(--sw-space-5), env(safe-area-inset-right, 0px));
-  }
+[data-theme] .sw-app-shell-link[aria-current] {
+  background: color-mix(in srgb, var(--sw-color-muted) 18%, transparent);
+  font-weight: 600;
 }
 
-.sw-dialog-banded .sw-button.sw-dialog-close {
-  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
-  border-radius: var(--sw-radius-pill);
-  color: var(--sw-color-text);
-  margin: 0;
+.sw-app-shell-icon {
+  display: inline-flex;
+  flex: none;
 }
 
-@media (hover: hover) {
-  .sw-dialog-banded .sw-button.sw-dialog-close:hover {
-    background: color-mix(in srgb, var(--sw-color-muted) 24%, transparent);
-  }
+.sw-app-shell-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sw-app-shell-count {
+  flex: none;
+}
+
+@media (pointer: coarse) {
+  [data-theme] .sw-app-shell-link { min-height: var(--sw-control-md-min-height); }
 }
 
 @media (forced-colors: active) {
-  .sw-dialog-banded { border-color: CanvasText; }
-  .sw-dialog-banded .sw-dialog-header { border-bottom-color: CanvasText; }
+  [data-theme] .sw-app-shell-link { color: LinkText; }
+  [data-theme] .sw-app-shell-link[aria-current] { border-color: Highlight; color: CanvasText; }
 }
 
-.sw-dialog.sw-dialog-canvas-grouped {
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
-  background: var(--sw-canvas-grouped);
+.sw-app-shell-page-bar {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-bottom: 1px solid var(--sw-color-border);
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-3);
+  justify-content: space-between;
+  padding: var(--sw-space-2) var(--sw-space-4);
+  position: sticky;
+  top: var(--sw-app-shell-bar-height, calc(var(--sw-control-sm-min-height) + 2 * var(--sw-space-2) + 1px));
+  z-index: 5;
 }
 
-.sw-dialog-grabber { display: none; }
+@media (pointer: coarse) {
+  .sw-app-shell-page-bar {
+    top: var(--sw-app-shell-bar-height, calc(var(--sw-control-md-min-height) + 2 * var(--sw-space-2) + 1px));
+  }
+}
 
-@media not all and (min-width: 48rem) {
-  .sw-dialog-sheet-below-md .sw-dialog-grabber {
-    background: color-mix(in srgb, var(--sw-color-muted) 40%, transparent);
-    border-radius: var(--sw-radius-pill);
-    display: block;
-    height: var(--sw-space-1);
-    margin: calc(var(--sw-space-2) - var(--sw-space-5)) auto var(--sw-space-3);
+@media (min-width: 64rem) {
+  .sw-app-shell-page-bar {
+    padding-inline: var(--sw-space-6);
+    top: 0;
+  }
+}
+
+.sw-app-shell-menu {
+  position: relative;
+}
+
+.sw-app-shell-menu .sw-app-shell-count {
+  inset-block-start: calc(-1 * var(--sw-space-1));
+  inset-inline-end: calc(-1 * var(--sw-space-1));
+  pointer-events: none;
+  position: absolute;
+}
+
+@media (min-width: 64rem) {
+  .sw-app-shell {
+    align-items: start;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .sw-app-shell-bar {
+    display: none;
+  }
+
+  .sw-app-shell-sidebar {
+    background: var(--sw-color-surface);
+    border-inline-end: 1px solid var(--sw-color-border);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    height: 100dvh;
     position: sticky;
-    top: calc(var(--sw-space-2) - var(--sw-space-5));
-    width: var(--sw-space-6);
-    z-index: 6;
+    top: 0;
+    width: calc(var(--sw-control-md-min-height) + 2 * var(--sw-space-3) + 1px);
   }
 
-  .sw-dialog-sheet-below-md.sw-dialog-banded.sw-dialog-has-grabber .sw-dialog-header {
-    padding-top: var(--sw-space-5);
+  @media not all and (min-width: 75rem) {
+    .sw-app-shell-sidebar .sw-app-shell-slot {
+      display: none;
+    }
+
+    .sw-app-shell-sidebar .sw-app-shell-rail-slot {
+      display: block;
+    }
+
+    .sw-app-shell-sidebar .sw-app-shell-label,
+    .sw-app-shell-sidebar .sw-app-shell-group-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+
+    .sw-app-shell-sidebar .sw-app-shell-nav {
+      gap: var(--sw-space-2);
+    }
+
+    .sw-app-shell-sidebar .sw-app-shell-group + .sw-app-shell-group {
+      border-top: 1px solid var(--sw-color-border);
+      padding-top: var(--sw-space-2);
+    }
+
+    [data-theme] .sw-app-shell-sidebar .sw-app-shell-link {
+      justify-content: center;
+      min-height: var(--sw-control-md-min-height);
+      padding: 0;
+      position: relative;
+    }
+
+    .sw-app-shell-sidebar .sw-app-shell-count {
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      position: absolute;
+    }
   }
+}
 
-  @media (forced-colors: active) {
-    .sw-dialog-sheet-below-md .sw-dialog-grabber { background: CanvasText; forced-color-adjust: none; }
+@media (min-width: 75rem) {
+  .sw-app-shell-sidebar {
+    width: 15rem;
   }
 }
 
-.sw-accordion {
-  background: var(--sw-glass-fill);
-  border: 1px solid var(--sw-glass-border);
-  border-radius: var(--sw-radius-lg);
-  box-shadow: inset 0 1px 0 var(--sw-glass-specular);
-  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
-  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+.sw-app-shell-drawer {
+  background: var(--sw-color-surface);
+  border: 0;
+  border-inline-end: 1px solid var(--sw-color-border);
+  box-sizing: border-box;
   color: var(--sw-color-text);
+  height: 100%;
+  inset-block: 0;
+  inset-inline: 0 auto;
+  margin: 0;
+  max-height: none;
+  max-width: calc(100% - var(--sw-space-8));
+  overflow: hidden;
+  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
+  padding-inline-start: env(safe-area-inset-left, 0px);
+  width: 20rem;
 }
 
-/* A nested disclosure sits inside a larger surface, so its corners are smaller. */
-.sw-accordion-sm { border-radius: var(--sw-radius-md); }
+.sw-app-shell-drawer:dir(rtl) {
+  padding-inline-start: env(safe-area-inset-right, 0px);
+}
 
-.sw-accordion-summary {
-  align-items: center;
-  box-sizing: border-box;
-  cursor: pointer;
+.sw-app-shell-drawer[open] {
+  animation: sw-app-shell-drawer-in var(--sw-motion-default) var(--sw-motion-easing);
   display: flex;
-  gap: var(--sw-space-3);
-  list-style: none;
-  min-height: var(--sw-control-md-min-height);
+  flex-direction: column;
 }
 
-/* A nested header is an sm control, still a comfortable pointer and touch target. */
-.sw-accordion-sm > .sw-accordion-summary { min-height: var(--sw-control-sm-min-height); }
+.sw-app-shell-drawer[open]:dir(rtl) {
+  animation-name: sw-app-shell-drawer-in-rtl;
+}
 
-.sw-accordion-heading {
+@keyframes sw-app-shell-drawer-in {
+  from { translate: -100% 0; }
+}
+
+@keyframes sw-app-shell-drawer-in-rtl {
+  from { translate: 100% 0; }
+}
+
+.sw-app-shell-drawer::backdrop {
+  background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
+}
+
+.sw-app-shell-drawer-top {
+  align-items: center;
   display: flex;
+  flex: none;
+  gap: var(--sw-space-2);
+  padding: var(--sw-space-3) var(--sw-space-3) 0;
+}
+
+.sw-app-shell-drawer-top .sw-app-shell-header {
   flex: 1 1 auto;
-  flex-direction: column;
   min-width: 0;
+  padding: 0;
 }
 
-.sw-accordion-summary:focus-visible {
-  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
-  outline-offset: var(--sw-focus-ring-offset);
+.sw-button.sw-app-shell-close {
+  flex: none;
+  padding-inline: 0;
+}
+
+.sw-button-xs.sw-app-shell-close { min-width: var(--sw-control-xs-min-height); }
+.sw-button-sm.sw-app-shell-close { min-width: var(--sw-control-sm-min-height); }
+.sw-button-md.sw-app-shell-close { min-width: var(--sw-control-md-min-height); }
+
+@media (pointer: coarse) {
+  .sw-button.sw-app-shell-close {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-app-shell-drawer[open],
+  .sw-app-shell-drawer[open]:dir(rtl) { animation: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-app-shell-drawer { border-inline-end-color: CanvasText; }
+}
+
+.sw-dialog {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-lg);
+  box-shadow: inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  margin: auto;
+  max-height: min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8));
+  max-width: min(var(--sw-dialog-max), calc(100vw - var(--sw-space-8)));
+  overflow: auto;
+  width: calc(100% - var(--sw-space-8));
+}
+
+.sw-dialog-lg {
+  max-width: min(var(--sw-dialog-max-lg), calc(100vw - var(--sw-space-8)));
+}
+
+.sw-dialog-xl {
+  max-width: min(var(--sw-dialog-max-xl), calc(100vw - var(--sw-space-8)));
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-dialog-sheet-below-md {
+    border-radius: var(--sw-radius-lg) var(--sw-radius-lg) 0 0;
+    border-width: 1px 0 0;
+    margin: auto 0 0;
+    max-height: min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8));
+    max-width: none;
+    padding-bottom: calc(var(--sw-space-5) + env(safe-area-inset-bottom, 0px));
+    padding-left: max(var(--sw-space-5), env(safe-area-inset-left, 0px));
+    padding-right: max(var(--sw-space-5), env(safe-area-inset-right, 0px));
+    width: 100%;
+  }
+
+  .sw-dialog-sheet-below-md[open] {
+    animation: sw-dialog-sheet-in var(--sw-motion-default) var(--sw-motion-easing);
+  }
+
+  .sw-dialog-sheet-below-md .sw-dialog-footer {
+    bottom: calc(-1 * (var(--sw-space-5) + env(safe-area-inset-bottom, 0px)));
+    margin-bottom: calc(-1 * (var(--sw-space-5) + env(safe-area-inset-bottom, 0px)));
+    padding-bottom: calc(var(--sw-space-3) + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+@keyframes sw-dialog-sheet-in {
+  from { translate: 0 100%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-dialog-sheet-below-md[open] { animation: none; }
+}
+
+.sw-dialog::backdrop {
+  background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
+}
+
+.sw-dialog:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-dialog-header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--sw-space-2);
+}
+
+.sw-dialog-header > :is(h2, h3),
+.sw-dialog-titles {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sw-button.sw-dialog-close {
+  flex: none;
+  padding-inline: 0;
+  min-width: var(--sw-control-sm-min-height);
+    margin-block: calc((28px - var(--sw-control-sm-min-height)) / 2);
+    margin-inline-end: calc((var(--sw-space-4) - var(--sw-control-sm-min-height)) / 2);
+}
+
+@media (pointer: coarse) {
+  .sw-button.sw-dialog-close {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+    margin-block: calc((28px - var(--sw-control-md-min-height)) / 2);
+    margin-inline-end: calc((var(--sw-space-4) - var(--sw-control-md-min-height)) / 2);
+  }
+}
+
+/* Private control chrome: two strokes crossed in a space-4 square, in the
+   button's color; borders, so forced colors keep them. */
+.sw-dialog-close-glyph {
+  flex: none;
+  height: var(--sw-space-4);
+  position: relative;
+  width: var(--sw-space-4);
+}
+
+.sw-dialog-close-glyph::before,
+.sw-dialog-close-glyph::after {
+  border-top: 2px solid currentColor;
+  border-radius: 1px;
+  box-sizing: border-box;
+  content: '';
+  left: 0;
+  margin-top: -1px;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+}
+
+.sw-dialog-close-glyph::before { transform: rotate(45deg); }
+.sw-dialog-close-glyph::after { transform: rotate(-45deg); }
+
+.sw-dialog-header-framed {
+  align-items: center;
+  gap: var(--sw-space-3);
+}
+
+.sw-dialog-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-dialog-description { margin: 0; }
+
+.sw-dialog-footer {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-top: 1px solid var(--sw-color-border);
+  /* Sticky insets count from the scrollport's padding edge: step past the
+     dialog's own padding to sit on its bottom edge. */
+  bottom: calc(-1 * var(--sw-space-5));
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-4);
+  margin: 0 calc(-1 * var(--sw-space-5)) calc(-1 * var(--sw-space-5));
+  padding: var(--sw-space-3) var(--sw-space-5);
+  position: sticky;
+}
+
+.sw-dialog-footer-status {
+  align-items: center;
+  column-gap: var(--sw-space-2);
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+/* The status line: muted caption words beside the actions. Its children
+   sit on one row and wrap as one phrase. */
+.sw-dialog-footer-note {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  line-height: 18px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* With no figure and no status line the live region stays in the
+   dialog, so a first figure is still announced, but it takes no room in
+   the footer. */
+.sw-dialog-footer-status:empty {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-dialog-footer-actions {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .sw-dialog-footer { border-top-color: CanvasText; }
+}
+
+.sw-dialog-banded {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: var(--sw-color-surface);
+  border-color: transparent;
+  box-shadow: var(--sw-elevation-md);
+}
+
+.sw-dialog-banded .sw-dialog-header {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-bottom: 1px solid var(--sw-color-border);
+  margin: calc(-1 * var(--sw-space-5)) calc(-1 * var(--sw-space-5)) 0;
+  padding: var(--sw-space-4) var(--sw-space-5);
+  position: sticky;
+  top: calc(-1 * var(--sw-space-5));
+  z-index: 5;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-dialog-sheet-below-md.sw-dialog-banded .sw-dialog-header {
+    margin-left: calc(-1 * max(var(--sw-space-5), env(safe-area-inset-left, 0px)));
+    margin-right: calc(-1 * max(var(--sw-space-5), env(safe-area-inset-right, 0px)));
+    padding-left: max(var(--sw-space-5), env(safe-area-inset-left, 0px));
+    padding-right: max(var(--sw-space-5), env(safe-area-inset-right, 0px));
+  }
+}
+
+.sw-dialog-banded .sw-button.sw-dialog-close {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-text);
+  margin: 0;
+}
+
+@media (hover: hover) {
+  .sw-dialog-banded .sw-button.sw-dialog-close:hover {
+    background: color-mix(in srgb, var(--sw-color-muted) 24%, transparent);
+  }
+}
+
+@media (forced-colors: active) {
+  .sw-dialog-banded { border-color: CanvasText; }
+  .sw-dialog-banded .sw-dialog-header { border-bottom-color: CanvasText; }
+}
+
+.sw-dialog.sw-dialog-canvas-grouped {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: var(--sw-canvas-grouped);
+}
+
+.sw-dialog-grabber { display: none; }
+
+@media not all and (min-width: 48rem) {
+  .sw-dialog-sheet-below-md .sw-dialog-grabber {
+    background: color-mix(in srgb, var(--sw-color-muted) 40%, transparent);
+    border-radius: var(--sw-radius-pill);
+    display: block;
+    height: var(--sw-space-1);
+    margin: calc(var(--sw-space-2) - var(--sw-space-5)) auto var(--sw-space-3);
+    position: sticky;
+    top: calc(var(--sw-space-2) - var(--sw-space-5));
+    width: var(--sw-space-6);
+    z-index: 6;
+  }
+
+  .sw-dialog-sheet-below-md.sw-dialog-banded.sw-dialog-has-grabber .sw-dialog-header {
+    padding-top: var(--sw-space-5);
+  }
+
+  @media (forced-colors: active) {
+    .sw-dialog-sheet-below-md .sw-dialog-grabber { background: CanvasText; forced-color-adjust: none; }
+  }
+}
+
+.sw-accordion {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-lg);
+  box-shadow: inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  color: var(--sw-color-text);
+}
+
+/* A nested disclosure sits inside a larger surface, so its corners are smaller. */
+.sw-accordion-sm { border-radius: var(--sw-radius-md); }
+
+.sw-accordion-summary {
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  gap: var(--sw-space-3);
+  list-style: none;
+  min-height: var(--sw-control-md-min-height);
+}
+
+/* A nested header is an sm control, still a comfortable pointer and touch target. */
+.sw-accordion-sm > .sw-accordion-summary { min-height: var(--sw-control-sm-min-height); }
+
+.sw-accordion-heading {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-accordion-summary:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+/* A token chevron replaces the user-agent triangle: it points to the inline end when closed and down when open. */
+.sw-accordion-summary::-webkit-details-marker { display: none; }
+
+.sw-accordion-marker {
+  border-bottom: 2px solid var(--sw-color-muted);
+  border-right: 2px solid var(--sw-color-muted);
+  box-sizing: border-box;
+  height: var(--sw-space-2);
+  width: var(--sw-space-2);
+  flex: none;
+  margin-inline-end: var(--sw-space-1);
+  transform: rotate(-45deg);
+  transition: transform var(--sw-motion-default) var(--sw-motion-easing);
+}
+
+.sw-accordion-marker:dir(rtl) { transform: rotate(135deg); }
+
+.sw-accordion[open] > .sw-accordion-summary .sw-accordion-marker {
+  transform: rotate(45deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-accordion-marker { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-accordion-marker { border-color: CanvasText; }
+}
+
+.sw-select {
+  max-width: 100%;
+  width: max-content;
+}
+
+/*
+ * width="full": the field and its trigger fill the container's inline size.
+ * The value still takes the free space and ellipsizes, and the chevron stays
+ * last, at the inline end. In an Inline row the field takes only the space
+ * its siblings leave, so a Button beside it keeps its label on one line.
+ */
+.sw-select-full {
+  width: 100%;
+}
+
+.sw-inline > .sw-select-full {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.sw-select-full .sw-select-trigger {
+  width: 100%;
+}
+
+.sw-select-control {
+  position: relative;
+}
+
+.sw-select-trigger {
+  align-items: center;
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: inherit;
+  gap: var(--sw-space-3);
+  letter-spacing: inherit;
+  line-height: inherit;
+  margin: 0;
+  max-width: 100%;
+  min-height: var(--sw-control-md-min-height);
+  padding-block: 0;
+  padding-inline: var(--sw-control-md-padding-inline);
+  text-align: start;
+}
+
+/* The chevron Accordion uses, pointing down, centred on the text. */
+.sw-select-trigger::after {
+  border-bottom: 2px solid var(--sw-color-muted);
+  border-right: 2px solid var(--sw-color-muted);
+  box-sizing: border-box;
+  height: var(--sw-space-2);
+  width: var(--sw-space-2);
+  content: '';
+  flex: none;
+  transform: translateY(-25%) rotate(45deg);
+}
+
+/*
+ * The current label and a hidden copy of every option's label share one grid
+ * cell, so the trigger is as wide as the longest option and keeps that width
+ * when the value changes; past the available width the label ellipsizes.
+ */
+.sw-select-value {
+  display: grid;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sw-select-value > * {
+  grid-area: 1 / 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sw-select-value-sizer {
+  visibility: hidden;
+}
+
+.sw-select-placeholder {
+  color: var(--sw-color-muted);
+}
+
+.sw-select-invalid .sw-select-trigger {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-select-value-sizer::before {
+  content: attr(data-label);
+}
+
+.sw-select-trigger:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.sw-select-trigger:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-select-xs .sw-select-trigger {
+  font-size: 13px;
+  gap: var(--sw-space-2);
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+@media (forced-colors: active) {
+  .sw-select-trigger::after { border-color: CanvasText; }
+  .sw-select-invalid .sw-select-trigger { border-color: Mark; }
+}
+
+.sw-select-list {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-sm);
+  box-shadow: var(--sw-elevation-sm), inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  inset-inline-start: 0;
+  margin: var(--sw-space-1) 0 0;
+  max-height: var(--sw-select-max);
+  max-width: var(--sw-dialog-max);
+  min-width: 100%;
+  overflow: auto;
+  padding: var(--sw-space-1);
+  position: absolute;
+  width: max-content;
+  z-index: 10;
+}
+
+/*
+ * A full-width field's open list is exactly the trigger's width (min-width
+ * already beats the dialog-max cap), so it never runs past a phone's edge;
+ * a long option wraps inside it, even a single long word.
+ */
+.sw-select-full .sw-select-list {
+  width: 100%;
+}
+
+.sw-select-option {
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+.sw-select-full .sw-select-option {
+  overflow-wrap: anywhere;
+}
+
+.sw-select-option[aria-selected='true'] {
+  font-weight: 600;
+}
+
+.sw-select-option[data-active='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-select-xs .sw-select-option {
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+.sw-select-action {
+  border-top: 1px solid var(--sw-color-border);
+  color: var(--sw-color-accent);
+  margin-top: var(--sw-space-1);
+}
+
+.sw-action-menu {
+  display: inline-flex;
+  position: relative;
+}
+
+.sw-action-menu-trigger {
+  appearance: none;
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  color: var(--sw-color-text);
+  cursor: pointer;
+  font: inherit;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+.sw-action-menu-trigger:focus-visible,
+.sw-action-menu-item:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-action-menu-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.sw-action-menu-list {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-sm);
+  box-shadow: var(--sw-elevation-sm), inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  /* The popover layer's inset: 0 would ignore the placed left in right-to-left. */
+  inset: auto;
+  margin: 0;
+  max-height: var(--sw-select-max);
+  /* On the top layer 100% is the viewport without a classic scrollbar. */
+  max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  /* Never narrower than a touch target. */
+  min-width: var(--sw-control-md-min-height);
+  overflow: auto;
+  padding: var(--sw-space-1);
+  position: fixed;
+  /* As wide as its longest command, until max-width wraps it. */
+  width: max-content;
+  z-index: 10;
+}
+
+/* Each child of the header is a line of its own: a name, then a role. */
+.sw-action-menu-header {
+  border-bottom: 1px solid var(--sw-color-border);
+  color: var(--sw-color-muted);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  margin-bottom: var(--sw-space-1);
+  /* The commands' inline padding, so the header's words line up with theirs. */
+  padding: var(--sw-space-1) var(--sw-control-xs-padding-inline) var(--sw-space-2);
+}
+
+/* With a header, the commands are the menu inside the popover. */
+.sw-action-menu-items {
+  display: block;
+}
+
+.sw-action-menu-item {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  gap: var(--sw-space-2);
+  line-height: 20px;
+  min-height: var(--sw-control-xs-min-height);
+  /* A long command wraps inside the capped menu, a word at a time if it must. */
+  overflow-wrap: anywhere;
+  padding-block: var(--sw-space-1);
+  padding-inline: var(--sw-control-xs-padding-inline);
+  text-align: start;
+  width: 100%;
+}
+
+.sw-action-menu-item:hover,
+.sw-action-menu-item:focus-visible {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-action-menu-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.sw-action-menu-item-danger {
+  color: var(--sw-color-danger);
+}
+
+/*
+ * A command's detail: its current value at the inline end in the muted
+ * colour, then a chevron pointing to the inline end (mirrored right to
+ * left). A long value wraps between words, never inside one (the command
+ * itself may break anywhere), and the chevron stays last.
+ */
+.sw-action-menu-detail {
+  align-items: center;
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+  overflow-wrap: normal;
+  padding-inline-start: var(--sw-space-3);
+  text-align: end;
+}
+
+.sw-action-menu-chevron {
+  border-bottom: 2px solid var(--sw-color-muted);
+  border-right: 2px solid var(--sw-color-muted);
+  box-sizing: border-box;
+  height: var(--sw-space-2);
+  width: var(--sw-space-2);
+  flex: none;
+  transform: rotate(-45deg);
+}
+
+.sw-action-menu-chevron:dir(rtl) {
+  transform: rotate(135deg);
+}
+
+/* A hairline that sets a command apart from the ones above. */
+.sw-action-menu-separator {
+  border-top: 1px solid var(--sw-color-border);
+  margin-block: var(--sw-space-1);
+}
+
+@media (forced-colors: active) {
+  .sw-action-menu-chevron { border-color: CanvasText; }
+}
+
+/* A coarse pointer gets the full touch target: the trigger at least square, and every command as tall. */
+@media (pointer: coarse) {
+  .sw-action-menu-trigger {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+
+  .sw-action-menu-item {
+    min-height: var(--sw-control-md-min-height);
+  }
+}
+
+.sw-action-menu-trigger.sw-action-menu-trigger-text {
+  align-items: center;
+  background: transparent;
+  border-color: transparent;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 500;
+  gap: var(--sw-space-2);
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-height: var(--sw-control-sm-min-height);
+  padding-inline: var(--sw-space-3) var(--sw-space-2);
 }
 
-/* A token chevron replaces the user-agent triangle: it points to the inline end when closed and down when open. */
-.sw-accordion-summary::-webkit-details-marker { display: none; }
-
-.sw-accordion-marker {
+.sw-action-menu-trigger.sw-action-menu-trigger-text::after {
   border-bottom: 2px solid var(--sw-color-muted);
   border-right: 2px solid var(--sw-color-muted);
   box-sizing: border-box;
   height: var(--sw-space-2);
   width: var(--sw-space-2);
+  content: '';
   flex: none;
-  margin-inline-end: var(--sw-space-1);
-  transform: rotate(-45deg);
-  transition: transform var(--sw-motion-default) var(--sw-motion-easing);
+  transform: translateY(-25%) rotate(45deg);
 }
 
-.sw-accordion-marker:dir(rtl) { transform: rotate(135deg); }
+.sw-action-menu-trigger.sw-action-menu-trigger-text[aria-expanded='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
 
-.sw-accordion[open] > .sw-accordion-summary .sw-accordion-marker {
-  transform: rotate(45deg);
+@media (hover: hover) {
+  .sw-action-menu-trigger.sw-action-menu-trigger-text:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .sw-accordion-marker { transition: none; }
+@media (pointer: coarse) {
+  .sw-action-menu-trigger.sw-action-menu-trigger-text { min-height: var(--sw-control-md-min-height); }
 }
 
 @media (forced-colors: active) {
-  .sw-accordion-marker { border-color: CanvasText; }
+  .sw-action-menu-trigger.sw-action-menu-trigger-text::after { border-color: CanvasText; }
+  .sw-action-menu-trigger.sw-action-menu-trigger-text[aria-expanded='true'] { border-color: Highlight; }
 }
 
-.sw-select {
-  max-width: 100%;
-  width: max-content;
+.sw-action-menu-trigger.sw-action-menu-trigger-icon {
+  align-items: center;
+  background: transparent;
+  border-color: transparent;
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  justify-content: center;
+  min-height: var(--sw-control-sm-min-height);
+  min-width: var(--sw-control-sm-min-height);
+  padding: 0;
 }
 
-/*
- * width="full": the field and its trigger fill the container's inline size.
- * The value still takes the free space and ellipsizes, and the chevron stays
- * last, at the inline end. In an Inline row the field takes only the space
- * its siblings leave, so a Button beside it keeps its label on one line.
- */
-.sw-select-full {
-  width: 100%;
+.sw-action-menu-trigger.sw-action-menu-trigger-icon[aria-expanded='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  color: var(--sw-color-text);
 }
 
-.sw-inline > .sw-select-full {
-  flex: 1 1 0;
-  min-width: 0;
+@media (hover: hover) {
+  .sw-action-menu-trigger.sw-action-menu-trigger-icon:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+    color: var(--sw-color-text);
+  }
 }
 
-.sw-select-full .sw-select-trigger {
-  width: 100%;
+@media (pointer: coarse) {
+  .sw-action-menu-trigger.sw-action-menu-trigger-icon {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
 }
 
-.sw-select-control {
-  position: relative;
+@media (forced-colors: active) {
+  .sw-action-menu-trigger.sw-action-menu-trigger-icon { color: ButtonText; }
+  .sw-action-menu-trigger.sw-action-menu-trigger-icon[aria-expanded='true'] { border-color: Highlight; }
 }
 
-.sw-select-trigger {
+.sw-context-switcher {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.sw-context-switcher-full {
+  display: flex;
+  width: 100%;
+}
+
+.sw-context-switcher-trigger {
   align-items: center;
   appearance: none;
-  -webkit-appearance: none;
-  background-color: var(--sw-glass-fill);
-  border: 1px solid var(--sw-color-border);
+  background: transparent;
+  border: 1px solid transparent;
   border-radius: var(--sw-radius-sm);
   box-sizing: border-box;
   color: var(--sw-color-text);
   cursor: pointer;
   display: inline-flex;
-  font-family: inherit;
-  font-size: inherit;
-  gap: var(--sw-space-3);
-  letter-spacing: inherit;
-  line-height: inherit;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 500;
+  gap: var(--sw-space-2);
+  letter-spacing: -0.2px;
+  line-height: 20px;
   margin: 0;
   max-width: 100%;
-  min-height: var(--sw-control-md-min-height);
-  padding-block: 0;
-  padding-inline: var(--sw-control-md-padding-inline);
+  min-height: var(--sw-control-sm-min-height);
+  padding-block: var(--sw-space-1);
+  padding-inline: var(--sw-space-3) var(--sw-space-2);
   text-align: start;
 }
 
-/* The chevron Accordion uses, pointing down, centred on the text. */
-.sw-select-trigger::after {
+.sw-context-switcher-full .sw-context-switcher-trigger {
+  width: 100%;
+}
+
+.sw-context-switcher-trigger-content {
+  align-items: center;
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--sw-space-2);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sw-context-switcher-trigger:not(.sw-context-switcher-trigger-icon)::after {
   border-bottom: 2px solid var(--sw-color-muted);
   border-right: 2px solid var(--sw-color-muted);
   box-sizing: border-box;
@@ -5011,66 +6149,77 @@ body {
   transform: translateY(-25%) rotate(45deg);
 }
 
-/*
- * The current label and a hidden copy of every option's label share one grid
- * cell, so the trigger is as wide as the longest option and keeps that width
- * when the value changes; past the available width the label ellipsizes.
- */
-.sw-select-value {
-  display: grid;
-  flex: 1 1 auto;
-  min-width: 0;
+.sw-context-switcher-trigger[aria-expanded='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
 }
 
-.sw-select-value > * {
-  grid-area: 1 / 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+@media (hover: hover) {
+  .sw-context-switcher-trigger:hover {
+    background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  }
 }
 
-.sw-select-value-sizer {
-  visibility: hidden;
+.sw-context-switcher-trigger:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
 }
 
-.sw-select-placeholder {
-  color: var(--sw-color-muted);
+@media (pointer: coarse) {
+  .sw-context-switcher-trigger { min-height: var(--sw-control-md-min-height); }
 }
 
-.sw-select-invalid .sw-select-trigger {
-  border-color: var(--sw-color-danger);
+.sw-context-switcher-trigger.sw-context-switcher-trigger-framed {
+  background: var(--sw-glass-fill);
+  border-color: var(--sw-color-border);
 }
 
-.sw-select-value-sizer::before {
-  content: attr(data-label);
+.sw-context-switcher-trigger.sw-context-switcher-trigger-pill {
+  background: var(--sw-color-surface);
+  border-color: var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  font-weight: 600;
 }
 
-.sw-select-trigger:focus {
-  box-shadow: none;
-  outline: none;
+.sw-context-switcher-trigger.sw-context-switcher-trigger-framed[aria-expanded='true'],
+.sw-context-switcher-trigger.sw-context-switcher-trigger-pill[aria-expanded='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
 }
 
-.sw-select-trigger:focus-visible {
-  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
-  outline-offset: var(--sw-focus-ring-offset);
+@media (hover: hover) {
+  .sw-context-switcher-trigger.sw-context-switcher-trigger-framed:hover,
+  .sw-context-switcher-trigger.sw-context-switcher-trigger-pill:hover {
+    background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  }
 }
 
-.sw-select-xs .sw-select-trigger {
-  font-size: 13px;
-  gap: var(--sw-space-2);
-  letter-spacing: -0.08px;
-  line-height: 18px;
-  min-height: var(--sw-control-xs-min-height);
-  padding-inline: var(--sw-control-xs-padding-inline);
+.sw-context-switcher-trigger.sw-context-switcher-trigger-icon {
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-muted);
+  justify-content: center;
+  min-width: var(--sw-control-sm-min-height);
+  padding: 0;
+}
+
+.sw-context-switcher-trigger.sw-context-switcher-trigger-icon .sw-context-switcher-trigger-content {
+  flex: none;
+  justify-content: center;
+}
+
+.sw-context-switcher-trigger.sw-context-switcher-trigger-icon[aria-expanded='true'] {
+  color: var(--sw-color-text);
+}
+
+@media (pointer: coarse) {
+  .sw-context-switcher-trigger.sw-context-switcher-trigger-icon { min-width: var(--sw-control-md-min-height); }
 }
 
 @media (forced-colors: active) {
-  .sw-select-trigger::after { border-color: CanvasText; }
-  .sw-select-invalid .sw-select-trigger { border-color: Mark; }
+  .sw-context-switcher-trigger::after { border-color: CanvasText; }
+  .sw-context-switcher-trigger[aria-expanded='true'] { border-color: Highlight; }
+  .sw-context-switcher-trigger.sw-context-switcher-trigger-icon { color: ButtonText; }
 }
 
-.sw-select-list {
+.sw-context-switcher-popup {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
   border-radius: var(--sw-radius-sm);
@@ -5079,304 +6228,390 @@ body {
   -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
   box-sizing: border-box;
   color: var(--sw-color-text);
-  inset-inline-start: 0;
-  margin: var(--sw-space-1) 0 0;
-  max-height: var(--sw-select-max);
-  max-width: var(--sw-dialog-max);
-  min-width: 100%;
-  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  inset: auto;
+  margin: 0;
+  max-height: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  max-width: min(max(var(--sw-dialog-max), var(--sw-context-switcher-trigger-width, 0px)), calc(100% - var(--sw-space-2) - var(--sw-space-2)));
+  min-width: min(max(15rem, var(--sw-context-switcher-trigger-width, 0px)), calc(100% - var(--sw-space-2) - var(--sw-space-2)));
   padding: var(--sw-space-1);
-  position: absolute;
+  position: fixed;
   width: max-content;
   z-index: 10;
 }
 
-/*
- * A full-width field's open list is exactly the trigger's width (min-width
- * already beats the dialog-max cap), so it never runs past a phone's edge;
- * a long option wraps inside it, even a single long word.
- */
-.sw-select-full .sw-select-list {
-  width: 100%;
+.sw-context-switcher-filter {
+  box-sizing: border-box;
+  flex: none;
+  margin: var(--sw-space-1);
+  width: calc(100% - var(--sw-space-2));
+}
+
+.sw-context-switcher-list {
+  flex: 1 1 auto;
+  max-height: var(--sw-select-max);
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.sw-context-switcher-list:focus {
+  outline: none;
+}
+
+.sw-context-switcher-heading {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  padding: var(--sw-space-2) var(--sw-space-2) var(--sw-space-1);
+}
+
+.sw-context-switcher-empty {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  margin: 0;
+  padding: var(--sw-space-2);
+}
+
+.sw-context-switcher-footer {
+  border-top: 1px solid var(--sw-color-border);
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: var(--sw-space-1);
+  padding-top: var(--sw-space-1);
+}
+
+.sw-context-switcher-action-icon {
+  display: inline-flex;
+  flex: none;
 }
 
-.sw-select-option {
+.sw-context-switcher-option {
+  align-items: center;
   border-radius: var(--sw-radius-sm);
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
-  align-items: center;
-  min-height: var(--sw-control-xs-min-height);
-  padding-inline: var(--sw-control-xs-padding-inline);
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  gap: var(--sw-space-2);
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-height: var(--sw-control-sm-min-height);
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-1) var(--sw-space-2);
 }
 
-.sw-select-full .sw-select-option {
-  overflow-wrap: anywhere;
+.sw-context-switcher-option[data-active='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
 }
 
-.sw-select-option[aria-selected='true'] {
-  font-weight: 600;
+/* On the quiet fill the muted detail moves toward the text colour, keeping 4.5:1. */
+.sw-context-switcher-option[data-active='true'] .sw-context-switcher-detail {
+  color: color-mix(in srgb, var(--sw-color-muted) 70%, var(--sw-color-text));
 }
 
-.sw-select-option[data-active='true'] {
-  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+.sw-context-switcher-list:focus-visible .sw-context-switcher-option[data-active='true'] {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
 }
 
-.sw-select-xs .sw-select-option {
+.sw-context-switcher-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-context-switcher-words {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-context-switcher-option[aria-selected='true'] .sw-context-switcher-label {
+  font-weight: 600;
+}
+
+.sw-context-switcher-detail {
+  color: var(--sw-color-muted);
   font-size: 13px;
   letter-spacing: -0.08px;
   line-height: 18px;
 }
 
-.sw-select-action {
-  border-top: 1px solid var(--sw-color-border);
-  color: var(--sw-color-accent);
-  margin-top: var(--sw-space-1);
-}
-
-.sw-action-menu {
-  display: inline-flex;
-  position: relative;
+.sw-context-switcher-count {
+  flex: none;
 }
 
-.sw-action-menu-trigger {
-  appearance: none;
-  background: var(--sw-glass-fill);
-  border: 1px solid var(--sw-color-border);
-  border-radius: var(--sw-radius-sm);
-  color: var(--sw-color-text);
-  cursor: pointer;
-  font: inherit;
-  min-height: var(--sw-control-xs-min-height);
-  padding-inline: var(--sw-control-xs-padding-inline);
+.sw-context-switcher-check {
+  border-bottom: 2px solid var(--sw-color-accent);
+  border-right: 2px solid var(--sw-color-accent);
+  box-sizing: border-box;
+  flex: none;
+  height: var(--sw-space-3);
+  margin-inline: var(--sw-space-1);
+  transform: rotate(45deg);
+  width: var(--sw-space-2);
 }
 
-.sw-action-menu-trigger:focus-visible,
-.sw-action-menu-item:focus-visible {
-  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
-  outline-offset: var(--sw-focus-ring-offset);
+@media (pointer: coarse) {
+  .sw-context-switcher-option { min-height: var(--sw-control-md-min-height); }
 }
 
-.sw-action-menu-trigger:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+@media (forced-colors: active) {
+  .sw-context-switcher-popup { border-color: CanvasText; }
+  .sw-context-switcher-option[data-active='true'] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
+  .sw-context-switcher-option[data-active='true'] .sw-context-switcher-detail { color: HighlightText; }
+  .sw-context-switcher-option[data-active='true'] .sw-badge,
+  .sw-context-switcher-option[data-active='true'] .sw-context-switcher-count { forced-color-adjust: auto; }
+  .sw-context-switcher-check { border-color: CanvasText; }
+  .sw-context-switcher-option[data-active='true'] .sw-context-switcher-check { border-color: HighlightText; }
+  .sw-context-switcher-footer { border-color: CanvasText; }
 }
 
-.sw-action-menu-list {
-  background: var(--sw-glass-fill);
-  border: 1px solid var(--sw-glass-border);
+.sw-command-palette-key {
+  align-items: center;
+  border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-sm);
-  box-shadow: var(--sw-elevation-sm), inset 0 1px 0 var(--sw-glass-specular);
-  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
-  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
   box-sizing: border-box;
-  color: var(--sw-color-text);
-  /* The popover layer's inset: 0 would ignore the placed left in right-to-left. */
-  inset: auto;
-  margin: 0;
-  max-height: var(--sw-select-max);
-  /* On the top layer 100% is the viewport without a classic scrollbar. */
-  max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
-  /* Never narrower than a touch target. */
-  min-width: var(--sw-control-md-min-height);
-  overflow: auto;
-  padding: var(--sw-space-1);
-  position: fixed;
-  /* As wide as its longest command, until max-width wraps it. */
-  width: max-content;
-  z-index: 10;
-}
-
-/* Each child of the header is a line of its own: a name, then a role. */
-.sw-action-menu-header {
-  border-bottom: 1px solid var(--sw-color-border);
   color: var(--sw-color-muted);
-  display: flex;
-  flex-direction: column;
-  gap: var(--sw-space-1);
+  display: inline-flex;
+  flex: none;
   font-family: var(--sw-font-sans);
   font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  justify-content: center;
   letter-spacing: -0.08px;
   line-height: 18px;
-  margin-bottom: var(--sw-space-1);
-  /* The commands' inline padding, so the header's words line up with theirs. */
-  padding: var(--sw-space-1) var(--sw-control-xs-padding-inline) var(--sw-space-2);
+  min-width: var(--sw-space-5);
+  padding-inline: var(--sw-space-1);
+  white-space: nowrap;
 }
 
-/* With a header, the commands are the menu inside the popover. */
-.sw-action-menu-items {
-  display: block;
+@media (forced-colors: active) {
+  .sw-command-palette-key { border-color: CanvasText; color: CanvasText; }
 }
 
-.sw-action-menu-item {
+.sw-command-palette-trigger {
   align-items: center;
   appearance: none;
-  background: transparent;
-  border: 0;
-  border-radius: var(--sw-radius-sm);
-  color: inherit;
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  color: var(--sw-color-muted);
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   font-family: var(--sw-font-sans);
   font-size: 15px;
+  font-weight: 400;
   gap: var(--sw-space-2);
+  letter-spacing: -0.2px;
   line-height: 20px;
-  min-height: var(--sw-control-xs-min-height);
-  /* A long command wraps inside the capped menu, a word at a time if it must. */
-  overflow-wrap: anywhere;
-  padding-block: var(--sw-space-1);
-  padding-inline: var(--sw-control-xs-padding-inline);
+  margin: 0;
+  max-width: 100%;
+  min-height: var(--sw-control-sm-min-height);
+  min-width: min(12rem, 100%);
+  padding-inline: var(--sw-space-3) var(--sw-space-2);
   text-align: start;
-  width: 100%;
 }
 
-.sw-action-menu-item:hover,
-.sw-action-menu-item:focus-visible {
-  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+.sw-command-palette-trigger-icon {
+  display: inline-flex;
+  flex: none;
 }
 
-.sw-action-menu-item:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+.sw-command-palette-trigger-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.sw-action-menu-item-danger {
-  color: var(--sw-color-danger);
+@media (hover: hover) {
+  .sw-command-palette-trigger:hover { background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent); color: var(--sw-color-text); }
 }
 
-/*
- * A command's detail: its current value at the inline end in the muted
- * colour, then a chevron pointing to the inline end (mirrored right to
- * left). A long value wraps between words, never inside one (the command
- * itself may break anywhere), and the chevron stays last.
- */
-.sw-action-menu-detail {
-  align-items: center;
-  color: var(--sw-color-muted);
-  display: inline-flex;
-  gap: var(--sw-space-2);
-  margin-inline-start: auto;
-  overflow-wrap: normal;
-  padding-inline-start: var(--sw-space-3);
-  text-align: end;
+.sw-command-palette-trigger:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
 }
 
-.sw-action-menu-chevron {
-  border-bottom: 2px solid var(--sw-color-muted);
-  border-right: 2px solid var(--sw-color-muted);
+.sw-command-palette-trigger.sw-command-palette-trigger-compact {
+  background: transparent;
+  border-color: transparent;
+  justify-content: center;
+  min-width: var(--sw-control-sm-min-height);
+  padding: 0;
+}
+
+@media (pointer: coarse) {
+  .sw-command-palette-trigger { min-height: var(--sw-control-md-min-height); }
+  .sw-command-palette-trigger.sw-command-palette-trigger-compact { min-width: var(--sw-control-md-min-height); }
+}
+
+@media (forced-colors: active) {
+  .sw-command-palette-trigger { color: ButtonText; }
+}
+
+.sw-command-palette {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-lg);
+  box-shadow: var(--sw-elevation-sm), inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  margin: var(--sw-space-2) auto auto;
+  max-height: calc(100dvh - 2 * var(--sw-space-2));
+  max-width: calc(100% - 2 * var(--sw-space-2));
+  overflow: hidden;
+  padding: 0;
+  width: 40rem;
+}
+
+@media (min-width: 48rem) {
+  .sw-command-palette {
+    margin-top: max(var(--sw-space-2), 10vh);
+    max-height: calc(100dvh - max(var(--sw-space-2), 10vh) - var(--sw-space-8));
+  }
+}
+
+.sw-command-palette::backdrop {
+  background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
+}
+
+.sw-command-palette-body {
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+}
+
+[data-theme] input.sw-command-palette-field {
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--sw-color-border);
+  border-radius: 0;
   box-sizing: border-box;
-  height: var(--sw-space-2);
-  width: var(--sw-space-2);
   flex: none;
-  transform: rotate(-45deg);
+  font-size: 17px;
+  letter-spacing: -0.2px;
+  line-height: 25px;
+  min-height: var(--sw-control-md-min-height);
+  padding: var(--sw-space-3) var(--sw-space-4);
+  width: 100%;
 }
 
-.sw-action-menu-chevron:dir(rtl) {
-  transform: rotate(135deg);
+[data-theme] input.sw-command-palette-field:focus,
+[data-theme] input.sw-command-palette-field:focus-visible {
+  border-bottom-color: var(--sw-color-accent);
+  box-shadow: inset 0 -1px 0 var(--sw-color-accent);
+  outline: none;
 }
 
-/* A hairline that sets a command apart from the ones above. */
-.sw-action-menu-separator {
-  border-top: 1px solid var(--sw-color-border);
-  margin-block: var(--sw-space-1);
+.sw-command-palette-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--sw-space-1) var(--sw-space-2);
 }
 
-@media (forced-colors: active) {
-  .sw-action-menu-chevron { border-color: CanvasText; }
+.sw-command-palette-heading {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  padding: var(--sw-space-2) var(--sw-space-2) var(--sw-space-1);
+}
+
+.sw-command-palette-message,
+.sw-command-palette-hint {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  margin: 0;
+  padding: var(--sw-space-3) var(--sw-space-4);
 }
 
-/* A coarse pointer gets the full touch target: the trigger at least square, and every command as tall. */
-@media (pointer: coarse) {
-  .sw-action-menu-trigger {
-    min-height: var(--sw-control-md-min-height);
-    min-width: var(--sw-control-md-min-height);
-  }
-
-  .sw-action-menu-item {
-    min-height: var(--sw-control-md-min-height);
-  }
+.sw-command-palette-hint {
+  border-top: 1px solid var(--sw-color-border);
+  flex: none;
 }
 
-.sw-action-menu-trigger.sw-action-menu-trigger-text {
+.sw-command-palette-item {
   align-items: center;
-  background: transparent;
-  border-color: transparent;
-  display: inline-flex;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
   font-family: var(--sw-font-sans);
   font-size: 15px;
-  font-weight: 500;
-  gap: var(--sw-space-2);
+  gap: var(--sw-space-3);
   letter-spacing: -0.2px;
   line-height: 20px;
   min-height: var(--sw-control-sm-min-height);
-  padding-inline: var(--sw-space-3) var(--sw-space-2);
-}
-
-.sw-action-menu-trigger.sw-action-menu-trigger-text::after {
-  border-bottom: 2px solid var(--sw-color-muted);
-  border-right: 2px solid var(--sw-color-muted);
-  box-sizing: border-box;
-  height: var(--sw-space-2);
-  width: var(--sw-space-2);
-  content: '';
-  flex: none;
-  transform: translateY(-25%) rotate(45deg);
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-1) var(--sw-space-2);
 }
 
-.sw-action-menu-trigger.sw-action-menu-trigger-text[aria-expanded='true'] {
+.sw-command-palette-item[aria-selected='true'] {
   background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
 }
 
-@media (hover: hover) {
-  .sw-action-menu-trigger.sw-action-menu-trigger-text:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
-  }
+.sw-command-palette-icon {
+  display: inline-flex;
+  flex: none;
 }
 
-@media (pointer: coarse) {
-  .sw-action-menu-trigger.sw-action-menu-trigger-text { min-height: var(--sw-control-md-min-height); }
+.sw-command-palette-words {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
 }
 
-@media (forced-colors: active) {
-  .sw-action-menu-trigger.sw-action-menu-trigger-text::after { border-color: CanvasText; }
-  .sw-action-menu-trigger.sw-action-menu-trigger-text[aria-expanded='true'] { border-color: Highlight; }
+.sw-command-palette-label {
+  font-weight: 500;
 }
 
-.sw-action-menu-trigger.sw-action-menu-trigger-icon {
-  align-items: center;
-  background: transparent;
-  border-color: transparent;
-  border-radius: var(--sw-radius-pill);
+.sw-command-palette-detail {
   color: var(--sw-color-muted);
-  display: inline-flex;
-  justify-content: center;
-  min-height: var(--sw-control-sm-min-height);
-  min-width: var(--sw-control-sm-min-height);
-  padding: 0;
-}
-
-.sw-action-menu-trigger.sw-action-menu-trigger-icon[aria-expanded='true'] {
-  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
-  color: var(--sw-color-text);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
 }
 
-@media (hover: hover) {
-  .sw-action-menu-trigger.sw-action-menu-trigger-icon:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
-    color: var(--sw-color-text);
-  }
+.sw-command-palette-item[aria-selected='true'] .sw-command-palette-detail {
+  color: color-mix(in srgb, var(--sw-color-muted) 70%, var(--sw-color-text));
 }
 
 @media (pointer: coarse) {
-  .sw-action-menu-trigger.sw-action-menu-trigger-icon {
-    min-height: var(--sw-control-md-min-height);
-    min-width: var(--sw-control-md-min-height);
-  }
+  .sw-command-palette-item { min-height: var(--sw-control-md-min-height); }
 }
 
 @media (forced-colors: active) {
-  .sw-action-menu-trigger.sw-action-menu-trigger-icon { color: ButtonText; }
-  .sw-action-menu-trigger.sw-action-menu-trigger-icon[aria-expanded='true'] { border-color: Highlight; }
+  .sw-command-palette { border-color: CanvasText; }
+  .sw-command-palette-item[aria-selected='true'] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
+  .sw-command-palette-item[aria-selected='true'] .sw-command-palette-detail,
+  .sw-command-palette-item[aria-selected='true'] .sw-command-palette-key { border-color: HighlightText; color: HighlightText; }
+  [data-theme] input.sw-command-palette-field:focus-visible { border-bottom-color: Highlight; box-shadow: inset 0 -1px 0 Highlight; }
 }
 
 .sw-combobox {
@@ -5874,6 +7109,141 @@ body {
   .sw-spinner-icon { border-color: CanvasText; border-block-start-color: Highlight; }
 }
 
+.sw-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  width: 100%;
+}
+
+.sw-skeleton-bar,
+.sw-skeleton-mark {
+  animation: sw-skeleton-pulse calc(2 * var(--sw-motion-travel)) var(--sw-motion-travel-easing) infinite alternate;
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  display: block;
+  flex: none;
+}
+
+.sw-skeleton-bar {
+  height: calc(17px * 0.8);
+}
+
+.sw-skeleton-lines > .sw-skeleton-bar:nth-of-type(1) { width: 100%; }
+.sw-skeleton-lines > .sw-skeleton-bar:nth-of-type(2) { width: 92%; }
+.sw-skeleton-lines > .sw-skeleton-bar:nth-of-type(3) { width: 84%; }
+.sw-skeleton-lines > .sw-skeleton-bar:nth-of-type(4) { width: 96%; }
+.sw-skeleton-lines > .sw-skeleton-bar:nth-of-type(5) { width: 88%; }
+.sw-skeleton-lines > .sw-skeleton-bar:nth-of-type(6) { width: 80%; }
+.sw-skeleton-lines > .sw-skeleton-bar:last-of-type:not(:first-of-type) { width: 60%; }
+
+.sw-skeleton-rows {
+  gap: 0;
+}
+
+.sw-skeleton-row {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--sw-space-3);
+  min-height: var(--sw-control-md-min-height);
+  padding-block: var(--sw-space-2);
+}
+
+.sw-skeleton-row + .sw-skeleton-row {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-skeleton-row .sw-skeleton-bar {
+  flex: 0 1 60%;
+}
+
+.sw-skeleton-row:nth-of-type(even) .sw-skeleton-bar {
+  flex-basis: 45%;
+}
+
+.sw-skeleton-mark {
+  height: var(--sw-space-6);
+  width: var(--sw-space-6);
+}
+
+@keyframes sw-skeleton-pulse {
+  from { opacity: 1; }
+  to { opacity: 0.6; }
+}
+
+@media (pointer: coarse) {
+  .sw-skeleton-row { min-height: var(--sw-control-md-min-height); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-skeleton-bar,
+  .sw-skeleton-mark { animation: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-skeleton-bar,
+  .sw-skeleton-mark { border: 1px solid GrayText; }
+  .sw-skeleton-row + .sw-skeleton-row { border-color: GrayText; }
+}
+
+.sw-empty-state {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border: 1px dashed var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-8) var(--sw-space-4);
+  text-align: center;
+  width: 100%;
+}
+
+.sw-empty-state-icon {
+  align-items: center;
+  background: var(--sw-color-subtle);
+  border-radius: var(--sw-radius-md);
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  flex: none;
+  height: var(--sw-space-8);
+  justify-content: center;
+  width: var(--sw-space-8);
+}
+
+.sw-empty-state-icon > svg {
+  height: var(--sw-space-5);
+  width: var(--sw-space-5);
+}
+
+.sw-empty-state-title,
+.sw-empty-state-description {
+  margin: 0;
+  max-width: var(--sw-reading-max);
+}
+
+.sw-empty-state-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: center;
+  margin-top: var(--sw-space-1);
+}
+
+@media (pointer: coarse) {
+  .sw-empty-state-actions .sw-button { min-height: var(--sw-control-md-min-height); }
+}
+
+@media (forced-colors: active) {
+  .sw-empty-state { border-color: CanvasText; }
+  .sw-empty-state-icon { color: CanvasText; }
+}
+
 .sw-progress {
   display: flex;
   flex-direction: column;
@@ -6064,6 +7434,28 @@ body {
   width: var(--sw-space-4);
 }
 
+/*
+ * Letters in place of a glyph: one line, centred, weight 600, the line as
+ * tall as the letters, sized from the tile's side rather than the text
+ * round it, so they fit at every size: one letter at half the side, two
+ * at 0.42 of it, three at a third, tightened a little, so even a wide
+ * trio ("WMW") fits inside the smallest tile.
+ */
+.sw-glyph-tile-text {
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.sw-glyph-tile-text-1 { font-size: calc(var(--sw-glyph-tile-side) / 2); }
+
+.sw-glyph-tile-text-2 { font-size: calc(var(--sw-glyph-tile-side) * 0.42); }
+
+.sw-glyph-tile-text-3 {
+  font-size: calc(var(--sw-glyph-tile-side) / 3);
+  letter-spacing: -0.02em;
+}
+
 .sw-glyph-tile-green { --sw-glyph-tile-fill: var(--sw-categorical-green); }
 .sw-glyph-tile-blue { --sw-glyph-tile-fill: var(--sw-categorical-blue); }
 .sw-glyph-tile-orange { --sw-glyph-tile-fill: var(--sw-categorical-orange); }
@@ -6072,9 +7464,9 @@ body {
 .sw-glyph-tile-rose { --sw-glyph-tile-fill: var(--sw-categorical-rose); }
 .sw-glyph-tile-neutral { --sw-glyph-tile-fill: var(--sw-categorical-neutral); }
 
-.sw-glyph-tile-sm { height: var(--sw-space-5); width: var(--sw-space-5); }
-.sw-glyph-tile-md { height: var(--sw-control-xs-min-height); width: var(--sw-control-xs-min-height); }
-.sw-glyph-tile-lg { height: var(--sw-space-6); width: var(--sw-space-6); }
+.sw-glyph-tile-sm { --sw-glyph-tile-side: var(--sw-space-5); height: var(--sw-space-5); width: var(--sw-space-5); }
+.sw-glyph-tile-md { --sw-glyph-tile-side: var(--sw-control-xs-min-height); height: var(--sw-control-xs-min-height); width: var(--sw-control-xs-min-height); }
+.sw-glyph-tile-lg { --sw-glyph-tile-side: var(--sw-space-6); height: var(--sw-space-6); width: var(--sw-space-6); }
 
 @media (forced-colors: active) {
   .sw-glyph-tile { border: 1px solid CanvasText; color: CanvasText; }
@@ -6579,6 +7971,9 @@ body {
 .sw-grid-cols-below-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .sw-grid-cols-below-md-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 }
+.sw-grid-fit-narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
+.sw-grid-fit-medium { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr)); }
+.sw-grid-fit-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); }
 .sw-grid-span-1 { grid-column: span 1; }
 .sw-grid-span-2 { grid-column: span 2; }
 .sw-grid-span-3 { grid-column: span 3; }
@@ -6594,6 +7989,18 @@ body {
 :where(.sw-grid-cols-3) > .sw-grid-span-4 { grid-column: span 3; }
 :where(.sw-grid-cols-3) > .sw-grid-span-6 { grid-column: span 3; }
 :where(.sw-grid-cols-4) > .sw-grid-span-6 { grid-column: span 4; }
+:where(.sw-grid-fit-narrow) > .sw-grid-span-2 { grid-column: auto; }
+:where(.sw-grid-fit-narrow) > .sw-grid-span-3 { grid-column: auto; }
+:where(.sw-grid-fit-narrow) > .sw-grid-span-4 { grid-column: auto; }
+:where(.sw-grid-fit-narrow) > .sw-grid-span-6 { grid-column: auto; }
+:where(.sw-grid-fit-medium) > .sw-grid-span-2 { grid-column: auto; }
+:where(.sw-grid-fit-medium) > .sw-grid-span-3 { grid-column: auto; }
+:where(.sw-grid-fit-medium) > .sw-grid-span-4 { grid-column: auto; }
+:where(.sw-grid-fit-medium) > .sw-grid-span-6 { grid-column: auto; }
+:where(.sw-grid-fit-wide) > .sw-grid-span-2 { grid-column: auto; }
+:where(.sw-grid-fit-wide) > .sw-grid-span-3 { grid-column: auto; }
+:where(.sw-grid-fit-wide) > .sw-grid-span-4 { grid-column: auto; }
+:where(.sw-grid-fit-wide) > .sw-grid-span-6 { grid-column: auto; }
 @media not all and (min-width: 48rem) {
   :where(.sw-grid-cols-below-md-1) > .sw-grid-span-2 { grid-column: span 1; }
   :where(.sw-grid-cols-below-md-1) > .sw-grid-span-3 { grid-column: span 1; }
@@ -7626,6 +9033,99 @@ body {
   [data-theme] .sw-stepper-changed input.sw-stepper-input { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; background-image: none; }
 }
 
+.sw-stepper-count {
+  background-color: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  padding-inline: var(--sw-control-md-padding-inline);
+  align-items: center;
+  box-sizing: border-box;
+  cursor: text;
+  display: inline-flex;
+  gap: var(--sw-space-1);
+  justify-content: center;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-stepper-full .sw-stepper-count { display: flex; }
+
+[data-theme] .sw-stepper .sw-stepper-count > input.sw-stepper-input {
+  align-self: stretch;
+  background: transparent;
+  background-image: none;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  inline-size: 5ch;
+  min-height: 0;
+  padding-inline: 0;
+  text-align: end;
+}
+
+[data-theme] .sw-stepper .sw-stepper-count > input.sw-stepper-input:focus-visible { outline: none; }
+
+.sw-stepper-count:focus-within {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-stepper-unit {
+  color: var(--sw-color-muted);
+  flex: none;
+  font-size: 17px;
+  line-height: 25px;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.sw-stepper-invalid .sw-stepper-count { border-color: var(--sw-color-danger); }
+
+.sw-stepper-changed .sw-stepper-count {
+  border-color: var(--sw-color-accent);
+  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
+}
+
+.sw-stepper-changed .sw-stepper-count:not(:has(> input:placeholder-shown)) { background-image: linear-gradient(color-mix(in srgb, var(--sw-color-accent) 12%, transparent), color-mix(in srgb, var(--sw-color-accent) 12%, transparent)); }
+
+.sw-stepper-changed .sw-stepper-count:not(:has(> input:placeholder-shown)) > .sw-stepper-unit { color: var(--sw-color-text); }
+
+/*
+ * The frame draws the surface, so it carries the disabled look for its count,
+ * and only that look: a locked count drops the invalid and changed edges and
+ * tint, which name nothing a person can act on.
+ */
+.sw-stepper .sw-stepper-count:has(> input:disabled) {
+  background-color: var(--sw-color-subtle);
+  border-style: dashed;
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;
+  background-image: none;
+  border-color: var(--sw-color-border);
+  box-shadow: none;
+}
+
+.sw-stepper .sw-stepper-count:has(> input:disabled) > .sw-stepper-unit {
+  color: var(--sw-color-muted);
+}
+
+@media (forced-colors: active) {
+  .sw-stepper-unit { color: CanvasText; }
+  .sw-stepper-invalid .sw-stepper-count { border-color: Mark; }
+  .sw-stepper-changed .sw-stepper-count { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; background-image: none; }
+  .sw-stepper .sw-stepper-count:has(> input:disabled) {
+    border-color: GrayText;
+  color: GrayText;
+  -webkit-text-fill-color: GrayText;
+    box-shadow: none;
+  }
+}
+
 .sw-steps {
   display: flex;
   flex-direction: column;