@scalewing/react 1.38.0 → 1.40.0

package/dist/styles.css

@@ -970,21 +970,21 @@ body {
   border-radius: 0;
 }
 
-.sw-button-group.sw-button-group-attached > .sw-button + .sw-button {
+.sw-button-group.sw-button-group-attached > .sw-button ~ .sw-button {
   margin-inline-start: -1px;
 }
 
-.sw-button-group.sw-button-group-attached > .sw-button:first-child {
+.sw-button-group.sw-button-group-attached > .sw-button:first-of-type {
   border-end-start-radius: var(--sw-radius-sm);
   border-start-start-radius: var(--sw-radius-sm);
 }
 
-.sw-button-group.sw-button-group-attached > .sw-button:last-child {
+.sw-button-group.sw-button-group-attached > .sw-button:last-of-type {
   border-end-end-radius: var(--sw-radius-sm);
   border-start-end-radius: var(--sw-radius-sm);
 }
 
-.sw-button-group.sw-button-group-attached > .sw-button + .sw-button:not(.sw-button-secondary) {
+.sw-button-group.sw-button-group-attached > .sw-button ~ .sw-button:not(.sw-button-secondary) {
   border-inline-start-color: color-mix(in srgb, currentColor 30%, transparent);
 }
 
@@ -1014,7 +1014,7 @@ body {
   color: var(--sw-color-text);
 }
 
-.sw-button-group.sw-button-group-attached.sw-button-group-track > .sw-button + .sw-button {
+.sw-button-group.sw-button-group-attached.sw-button-group-track > .sw-button ~ .sw-button {
   border-inline-start-color: var(--sw-color-border);
 }
 
@@ -1952,13 +1952,16 @@ body {
 }
 
 @media (forced-colors: active) {
-  .sw-table-bounded.sw-scroll-more-top > .sw-table-sticky > thead > tr:last-child > :is(th, td)::before,
-  .sw-table-bounded.sw-scroll-more-bottom > .sw-table > .sw-table-footer-sticky > tr:first-child > :is(th, td)::before { background: none; border-color: CanvasText; }
   .sw-table-bounded.sw-scroll-more-top:not(:has(> .sw-table > thead)),
   .sw-table-bounded.sw-scroll-more-bottom:not(:has(> .sw-table > .sw-table-footer-sticky)),
   .sw-table-bounded.sw-scroll-more-top.sw-scroll-more-bottom:not(:has(> .sw-table > thead)):not(:has(> .sw-table > .sw-table-footer-sticky)) { background-image: none; }
 }
 
+@media (forced-colors: active) {
+  .sw-table-bounded.sw-scroll-more-top > .sw-table-sticky > thead > tr:last-child > :is(th, td)::before,
+  .sw-table-bounded.sw-scroll-more-bottom > .sw-table > .sw-table-footer-sticky > tr:first-child > :is(th, td)::before { background: none; border-color: CanvasText; }
+}
+
 .sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr > :is(th, td),
 .sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr > :is(th, td) {
   box-shadow: var(--sw-table-ring-block, 0 0 transparent), var(--sw-table-ring-start, 0 0 transparent), var(--sw-table-ring-end, 0 0 transparent);
@@ -2408,6 +2411,494 @@ body {
   width: var(--sw-space-4);
 }
 
+.sw-date-range-button {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.sw-date-range-button:not(.sw-button-md) .sw-date-field-glyph {
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
+@media (pointer: coarse) {
+  .sw-button.sw-date-range-button,
+  .sw-date-range-actions > .sw-button { min-height: var(--sw-control-md-min-height); }
+}
+
+.sw-date-field-calendar.sw-date-range-popover {
+  gap: 0;
+  padding: 0;
+}
+
+.sw-date-range-body {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 64rem) {
+  .sw-date-range-body { flex-direction: row; }
+}
+
+.sw-date-range-footer {
+  align-items: center;
+  border-top: 1px solid var(--sw-color-border);
+  contain: inline-size;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-4);
+  padding: var(--sw-space-3);
+}
+
+.sw-date-range-summary {
+  color: var(--sw-color-muted);
+  flex: 1 1 auto;
+  font-size: 13px;
+  line-height: 18px;
+  min-width: 0;
+}
+
+.sw-date-range-status { display: inline; }
+
+.sw-date-range-line {
+  color: var(--sw-color-text);
+  display: block;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.sw-date-range-actions {
+  display: flex;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+}
+
+.sw-date-range-months {
+  display: flex;
+  gap: var(--sw-space-5);
+  justify-content: center;
+  padding: var(--sw-space-3);
+}
+
+.sw-date-range-month {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+}
+
+.sw-date-range-month-header {
+  align-items: center;
+  display: grid;
+  grid-template-columns: var(--sw-control-md-min-height) 1fr var(--sw-control-md-min-height);
+  min-height: var(--sw-control-md-min-height);
+}
+
+.sw-date-range-month-title {
+  font-size: 15px;
+  font-weight: 600;
+  grid-column: 2;
+  line-height: 20px;
+  text-align: center;
+}
+
+.sw-date-range-months .sw-date-field-day-in-range[aria-selected='true']:not(.sw-date-field-day-range-start, .sw-date-field-day-range-end) {
+  background: color-mix(in srgb, var(--sw-color-accent) 16%, transparent);
+  border-color: transparent;
+  border-radius: 0;
+  color: var(--sw-color-text);
+  font-weight: inherit;
+}
+
+.sw-date-range-months .sw-date-field-day-in-range[aria-selected='true']:not(.sw-date-field-day-range-start, .sw-date-field-day-range-end):hover:not([aria-disabled='true']) { background: color-mix(in srgb, var(--sw-color-accent) 24%, transparent); }
+
+.sw-date-range-months .sw-date-field-day-in-range[aria-selected='true']:not(.sw-date-field-day-range-start, .sw-date-field-day-range-end)[aria-current='date'] { border-color: var(--sw-color-accent); }
+
+.sw-date-range-sheet .sw-date-range-months { padding: 0; }
+
+.sw-date-range-sheet .sw-dialog-footer-actions {
+  flex: 1 1 100%;
+  margin-inline-start: 0;
+}
+
+.sw-date-range-sheet-footer {
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+}
+
+.sw-date-range-sheet-footer .sw-date-range-hint {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sw-date-range-sheet-footer .sw-date-range-actions {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  margin-inline-start: 0;
+}
+
+.sw-date-range-presets {
+  contain: inline-size;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-1);
+  padding: var(--sw-space-3) var(--sw-space-3) 0;
+}
+
+@media (min-width: 64rem) {
+  .sw-date-range-presets:not(.sw-date-range-presets-row) {
+    border-inline-end: 1px solid var(--sw-color-border);
+    contain: none;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    padding: var(--sw-space-3) var(--sw-space-2);
+  }
+}
+
+.sw-date-range-preset {
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  flex: none;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 20px;
+  margin: 0;
+  min-height: var(--sw-control-sm-min-height);
+  padding: 0 var(--sw-control-sm-padding-inline);
+  text-align: start;
+  white-space: nowrap;
+}
+
+.sw-date-range-preset:hover,
+.sw-date-range-preset[aria-pressed='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-date-range-preset[aria-pressed='true'] {
+  font-weight: 600;
+}
+
+.sw-date-range-preset:focus { outline: none; }
+
+.sw-date-range-preset:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-date-range-presets-row {
+  contain: none;
+  flex-wrap: nowrap;
+  gap: var(--sw-space-2);
+  overflow-x: auto;
+  padding: var(--sw-focus-ring-width) var(--sw-focus-ring-offset);
+}
+
+.sw-date-range-presets-row .sw-date-range-preset {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  border-radius: var(--sw-radius-pill);
+}
+
+.sw-date-range-presets-row .sw-date-range-preset[aria-pressed='true'] {
+  background: var(--sw-color-text);
+  color: var(--sw-color-surface);
+}
+
+@media (pointer: coarse) {
+  .sw-date-range-preset { min-height: var(--sw-control-md-min-height); }
+}
+
+@media (forced-colors: active) {
+  .sw-date-range-presets { border-color: CanvasText; }
+  .sw-date-range-presets-row .sw-date-range-preset { border-color: ButtonText; }
+  .sw-date-range-preset[aria-pressed='true'],
+  .sw-date-range-presets-row .sw-date-range-preset[aria-pressed='true'] {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .sw-date-range-footer { border-top-color: CanvasText; }
+  .sw-date-range-months .sw-date-field-day-in-range[aria-selected='true']:not(.sw-date-field-day-range-start, .sw-date-field-day-range-end),
+  .sw-date-range-months .sw-date-field-day-in-range[aria-selected='true']:not(.sw-date-field-day-range-start, .sw-date-field-day-range-end):hover:not([aria-disabled='true']) {
+    background: Mark;
+    color: MarkText;
+    forced-color-adjust: none;
+  }
+}
+
+.sw-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-list > .sw-list-item + .sw-list-item,
+.sw-list-group-plain .sw-list > .sw-list-item:first-child,
+.sw-list-group-footer {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-list-group-panel {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  overflow: clip;
+}
+
+.sw-list-group-scroll {
+  overflow: auto;
+  position: relative;
+  width: 100%;
+}
+
+.sw-list-group-scroll:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-list-group-scroll.sw-scroll-more-start { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-list-group-scroll.sw-scroll-more-end { box-shadow: inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-list-group-scroll.sw-scroll-more-start:dir(rtl) { box-shadow: inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-list-group-scroll.sw-scroll-more-end:dir(rtl) { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-list-group-scroll.sw-scroll-more-start.sw-scroll-more-end { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent), inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+
+.sw-list-group-scroll {
+  max-height: calc(var(--sw-list-max-rows) * (2 * var(--sw-space-3) + 20px + 18px + 1px));
+}
+
+.sw-list-group-scroll.sw-scroll-more-top,
+.sw-list-group-scroll.sw-scroll-more-bottom {
+  background-repeat: no-repeat;
+  background-size: 100% var(--sw-space-5);
+}
+
+.sw-list-group-scroll.sw-scroll-more-top {
+  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  background-position: top;
+}
+
+.sw-list-group-scroll.sw-scroll-more-bottom {
+  background-image: linear-gradient(to top, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  background-position: bottom;
+}
+
+.sw-list-group-scroll.sw-scroll-more-top.sw-scroll-more-bottom {
+  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent), linear-gradient(to top, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  background-position: top, bottom;
+}
+
+@media (forced-colors: active) {
+  .sw-list-group-scroll.sw-scroll-more-top,
+  .sw-list-group-scroll.sw-scroll-more-bottom,
+  .sw-list-group-scroll.sw-scroll-more-top.sw-scroll-more-bottom { background-image: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-list > .sw-list-item + .sw-list-item,
+  .sw-list-group-plain .sw-list > .sw-list-item:first-child,
+  .sw-list-group-footer,
+  .sw-list-group-panel { border-color: CanvasText; }
+}
+
+@media print {
+  .sw-list-group-scroll { max-height: none; }
+}
+
+.sw-list-row {
+  align-items: flex-start;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  gap: var(--sw-space-3);
+  line-height: 20px;
+  margin: 0;
+  padding: var(--sw-space-3) var(--sw-space-4);
+  text-align: start;
+  text-decoration: none;
+  width: 100%;
+}
+
+.sw-list-group-plain .sw-list-row { padding-inline: 0; }
+
+.sw-list-row-pressable { cursor: pointer; }
+
+@media (hover: hover) {
+  .sw-list-row-pressable:hover:not(.sw-list-row-disabled) { background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent); }
+}
+
+.sw-list-row-pressable:active:not(.sw-list-row-disabled) { background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent); }
+
+.sw-list-row-pressable:focus { outline: none; }
+
+.sw-list-row-pressable:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+/* A link row keeps the text colour and the inset ring over the canvas link rules. */
+[data-theme] a.sw-list-row,
+[data-theme] a.sw-list-row:hover {
+  color: var(--sw-color-text);
+}
+
+[data-theme] a.sw-list-row:focus-visible {
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-list-row-disabled {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media (pointer: coarse) {
+  .sw-list-row-pressable { min-height: var(--sw-control-md-min-height); }
+}
+
+/* Forced colours drop the fill, so a hovered row is outlined instead, as a pressable table row is. */
+@media (forced-colors: active) {
+  .sw-list-row-pressable:hover:not(.sw-list-row-disabled) {
+    outline: var(--sw-focus-ring-width) solid Highlight;
+    outline-offset: calc(-1 * var(--sw-focus-ring-width));
+  }
+}
+
+.sw-list-row-leading {
+  align-items: center;
+  display: flex;
+  flex: none;
+  height: 20px;
+}
+
+.sw-list-row-label,
+.sw-list-row-end {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-list-row-label { flex: 1 1 auto; }
+
+.sw-list-row-end {
+  align-items: flex-end;
+  flex: none;
+  max-width: 50%;
+  text-align: end;
+}
+
+.sw-list-row-title {
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.sw-list-row-title-plain { font-weight: 400; }
+
+.sw-list-row-title-danger { color: var(--sw-color-danger); }
+
+.sw-list-row-detail,
+.sw-list-row-value-detail {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+/* The label takes the wrap; the end keeps its words whole up to half the row. */
+.sw-list-row-detail { overflow-wrap: anywhere; }
+
+.sw-list-row-value,
+.sw-list-row-value-detail { font-variant-numeric: tabular-nums; }
+
+.sw-list-row-value { font-weight: 600; }
+
+.sw-list-row-value-success { color: var(--sw-color-success); }
+.sw-list-row-value-danger { color: var(--sw-color-danger); }
+.sw-list-row-value-muted { color: var(--sw-color-muted); }
+.sw-list-row-value-accent { color: var(--sw-color-accent); }
+
+.sw-list-row-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;
+  margin-block-start: calc((20px - var(--sw-space-2)) / 2);
+  margin-inline-end: var(--sw-space-1);
+  transform: rotate(-45deg);
+}
+
+.sw-list-row-chevron:dir(rtl) { transform: rotate(135deg); }
+
+.sw-list-row-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-block-start: calc((20px - var(--sw-space-3)) / 2);
+  margin-inline-end: var(--sw-space-1);
+  transform: rotate(45deg);
+  width: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  .sw-list-row-check { border-color: CanvasText; }
+}
+
+[data-theme] .sw-section-nav-count,
+[data-theme] .sw-nav-count {
+  align-items: center;
+  background: var(--sw-color-danger);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  color: var(--sw-color-onDanger);
+  display: inline-flex;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  justify-content: center;
+  letter-spacing: -0.08px;
+  line-height: 1;
+  min-height: calc(var(--sw-space-5) - var(--sw-space-1));
+  min-width: calc(var(--sw-space-5) - var(--sw-space-1));
+  padding-inline: var(--sw-space-1);
+}
+
+/*
+ * A Nav link holding a count lays out as SectionNav's link does: the words
+ * and the pill centred on one line a space-2 apart (the space text node
+ * that keeps the name collapses), so the link is as tall as its siblings
+ * and its words stay level with theirs. A Button already does this. At
+ * zero specificity, so a link's `hideBelow` or `hideFrom` still hides it.
+ * In forced colours a current link's underline runs under the pill's
+ * figure too, as the pill is a flex item of the link.
+ */
+:where(.sw-nav a:has(> .sw-nav-count)) {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  [data-theme] .sw-section-nav-count,
+  [data-theme] .sw-nav-count { border: 1px solid CanvasText; }
+}
+
 .sw-bar-chart {
   display: grid;
   gap: var(--sw-space-2);
@@ -2550,6 +3041,7 @@ body {
 .sw-data-bar-muted > .sw-data-bar-fill { background: color-mix(in srgb, var(--sw-color-muted) 35%, var(--sw-color-surface)); }
 .sw-data-bar-strong > .sw-data-bar-fill { background: color-mix(in srgb, var(--sw-color-text) 85%, var(--sw-color-surface)); }
 .sw-data-bar-accent > .sw-data-bar-fill { background: var(--sw-color-accent); }
+.sw-data-bar-danger > .sw-data-bar-fill { background: color-mix(in srgb, var(--sw-color-danger) 40%, var(--sw-color-surface)); }
 
 .sw-data-bar-diverging::before {
   background: var(--sw-color-border);
@@ -2577,6 +3069,224 @@ body {
   .sw-data-bar-diverging::before { background: CanvasText; }
 }
 
+.sw-chart-tone-green { --sw-chart-fill: color-mix(in srgb, var(--sw-categorical-green) 72%, var(--sw-color-surface)); --sw-chart-ink: color-mix(in srgb, var(--sw-categorical-green) 30%, var(--sw-color-text)); }
+.sw-chart-tone-blue { --sw-chart-fill: color-mix(in srgb, var(--sw-categorical-blue) 72%, var(--sw-color-surface)); --sw-chart-ink: color-mix(in srgb, var(--sw-categorical-blue) 30%, var(--sw-color-text)); }
+.sw-chart-tone-orange { --sw-chart-fill: color-mix(in srgb, var(--sw-categorical-orange) 72%, var(--sw-color-surface)); --sw-chart-ink: color-mix(in srgb, var(--sw-categorical-orange) 30%, var(--sw-color-text)); }
+.sw-chart-tone-purple { --sw-chart-fill: color-mix(in srgb, var(--sw-categorical-purple) 72%, var(--sw-color-surface)); --sw-chart-ink: color-mix(in srgb, var(--sw-categorical-purple) 30%, var(--sw-color-text)); }
+.sw-chart-tone-teal { --sw-chart-fill: color-mix(in srgb, var(--sw-categorical-teal) 72%, var(--sw-color-surface)); --sw-chart-ink: color-mix(in srgb, var(--sw-categorical-teal) 30%, var(--sw-color-text)); }
+.sw-chart-tone-rose { --sw-chart-fill: color-mix(in srgb, var(--sw-categorical-rose) 72%, var(--sw-color-surface)); --sw-chart-ink: color-mix(in srgb, var(--sw-categorical-rose) 30%, var(--sw-color-text)); }
+.sw-chart-tone-neutral { --sw-chart-fill: color-mix(in srgb, var(--sw-color-muted) 65%, var(--sw-color-surface)); --sw-chart-stroke: var(--sw-color-muted); --sw-chart-ink: var(--sw-color-muted); }
+.sw-chart-tone-success { --sw-chart-fill: color-mix(in srgb, var(--sw-color-success) 55%, var(--sw-color-surface)); --sw-chart-stroke: var(--sw-color-success); --sw-chart-ink: color-mix(in srgb, var(--sw-color-success) 50%, var(--sw-color-text)); }
+.sw-chart-tone-muted { --sw-chart-fill: color-mix(in srgb, var(--sw-color-muted) 35%, var(--sw-color-surface)); }
+.sw-chart-tone-strong { --sw-chart-fill: color-mix(in srgb, var(--sw-color-text) 85%, var(--sw-color-surface)); }
+.sw-chart-tone-accent { --sw-chart-fill: var(--sw-color-accent); --sw-chart-stroke: var(--sw-color-accent); --sw-chart-ink: color-mix(in srgb, var(--sw-color-accent) 50%, var(--sw-color-text)); }
+.sw-chart-tone-danger { --sw-chart-fill: color-mix(in srgb, var(--sw-color-danger) 40%, var(--sw-color-surface)); --sw-chart-stroke: var(--sw-color-danger); --sw-chart-ink: color-mix(in srgb, var(--sw-color-danger) 50%, var(--sw-color-text)); }
+.sw-chart-tone-warning { --sw-chart-stroke: var(--sw-color-warning); --sw-chart-ink: color-mix(in srgb, var(--sw-color-warning) 50%, var(--sw-color-text)); }
+
+.sw-chart-legend {
+  color: var(--sw-color-text);
+  column-gap: var(--sw-space-5);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  row-gap: var(--sw-space-2);
+}
+
+.sw-chart-legend-item {
+  align-items: flex-start;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  min-width: 0;
+}
+
+.sw-chart-legend-swatch {
+  display: block;
+  flex: none;
+  /* Centred on the first line of the words, however many lines they wrap to. */
+  margin-block-start: calc((18px - var(--sw-space-3)) / 2);
+}
+
+.sw-chart-legend-line {
+  margin-block-start: calc((18px - 2px) / 2);
+}
+
+.sw-chart-legend-bar {
+  background: var(--sw-chart-fill);
+  border-radius: calc(var(--sw-radius-sm) / 4);
+  height: var(--sw-space-3);
+  width: var(--sw-space-3);
+}
+
+.sw-chart-legend-line {
+  background: var(--sw-chart-stroke);
+  border-radius: var(--sw-radius-pill);
+  height: 2px;
+  width: var(--sw-space-4);
+}
+
+.sw-chart-legend-marker {
+  background: var(--sw-chart-stroke);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  height: var(--sw-space-3);
+  width: var(--sw-space-3);
+}
+
+.sw-chart-legend-box {
+  border: 1px dashed var(--sw-chart-stroke);
+  border-radius: calc(var(--sw-radius-sm) / 2);
+  box-sizing: border-box;
+  height: var(--sw-space-3);
+  width: var(--sw-space-4);
+}
+
+@media (forced-colors: active) {
+  .sw-chart-legend-bar,
+  .sw-chart-legend-line,
+  .sw-chart-legend-marker { background: CanvasText; }
+  .sw-chart-legend-box { border-color: CanvasText; }
+}
+
+.sw-chart {
+  display: grid;
+  gap: var(--sw-space-2);
+  min-width: 0;
+}
+
+.sw-chart-svg {
+  display: block;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  height: auto;
+  letter-spacing: -0.08px;
+  max-width: 100%;
+  overflow: visible;
+  width: 100%;
+}
+
+.sw-chart-tick,
+.sw-chart-category {
+  fill: var(--sw-color-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.sw-chart-tick-line { fill: var(--sw-chart-ink); }
+
+.sw-chart-grid {
+  stroke: var(--sw-color-border);
+  stroke-width: 1;
+}
+
+.sw-chart-zero {
+  stroke: var(--sw-color-muted);
+  stroke-width: 1;
+}
+
+.sw-chart-highlight {
+  fill: none;
+  stroke: var(--sw-chart-stroke);
+  stroke-dasharray: 3 3;
+  stroke-width: 1;
+}
+
+.sw-chart-line {
+  fill: none;
+  stroke: var(--sw-chart-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.sw-chart-dot { fill: var(--sw-chart-stroke); }
+
+.sw-chart-end-label {
+  fill: var(--sw-chart-ink);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+.sw-chart-leader {
+  stroke: var(--sw-chart-ink, var(--sw-color-text));
+  stroke-dasharray: 2 2;
+  stroke-width: 1;
+}
+
+.sw-chart-callout-text {
+  fill: var(--sw-chart-ink, var(--sw-color-text));
+  font-weight: 600;
+}
+
+.sw-chart-column { fill: var(--sw-chart-fill); }
+
+.sw-chart-callouts {
+  display: grid;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  gap: var(--sw-space-1);
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-chart-callout {
+  align-items: flex-start;
+  color: var(--sw-chart-ink, var(--sw-color-text));
+  display: flex;
+  font-weight: 600;
+  gap: var(--sw-space-2);
+}
+
+.sw-chart-callout-dot {
+  background: var(--sw-chart-fill, currentColor);
+  border-radius: var(--sw-radius-pill);
+  flex: none;
+  height: var(--sw-space-2);
+  margin-block-start: calc((18px - var(--sw-space-2)) / 2);
+  width: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  .sw-chart-column { fill: CanvasText; stroke: Canvas; }
+  .sw-chart-grid { stroke: GrayText; }
+  .sw-chart-zero,
+  .sw-chart-highlight,
+  .sw-chart-leader { stroke: CanvasText; }
+  .sw-chart-line { stroke: Highlight; }
+  .sw-chart-dot,
+  .sw-chart-end-label { fill: Highlight; }
+  .sw-chart-tick,
+  .sw-chart-category,
+  .sw-chart-callout-text { fill: CanvasText; }
+  .sw-chart-callout { color: CanvasText; }
+  .sw-chart-callout-dot { background: CanvasText; }
+}
+
+.sw-chart-area {
+  fill: color-mix(in srgb, var(--sw-chart-stroke) 12%, transparent);
+}
+
+.sw-chart-marker { fill: var(--sw-chart-stroke); }
+
+.sw-chart-marker-label {
+  fill: var(--sw-chart-ink);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+@media (forced-colors: active) {
+  .sw-chart-area { fill: none; }
+  .sw-chart-marker,
+  .sw-chart-marker-label { fill: CanvasText; }
+}
+
 .sw-pagination {
   align-items: center;
   display: flex;
@@ -2822,31 +3532,12 @@ body {
   font-weight: 600;
 }
 
-[data-theme] .sw-section-nav-count {
-  align-items: center;
-  background: var(--sw-color-danger);
-  border-radius: var(--sw-radius-pill);
-  box-sizing: border-box;
-  color: var(--sw-color-onDanger);
-  display: inline-flex;
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-  font-weight: 700;
-  justify-content: center;
-  letter-spacing: -0.08px;
-  line-height: 1;
-  min-height: calc(var(--sw-space-5) - var(--sw-space-1));
-  min-width: calc(var(--sw-space-5) - var(--sw-space-1));
-  padding-inline: var(--sw-space-1);
-}
-
 @media (pointer: coarse) {
   [data-theme] .sw-section-nav.sw-section-nav-filled .sw-section-nav-link { min-height: var(--sw-control-md-min-height); }
 }
 
 @media (forced-colors: active) {
   [data-theme] .sw-section-nav.sw-section-nav-filled .sw-section-nav-link[aria-current] { border-color: Highlight; }
-  [data-theme] .sw-section-nav-count { border: 1px solid CanvasText; }
 }
 
 @media (pointer: coarse) {
@@ -4328,6 +5019,15 @@ body {
   overflow-wrap: anywhere;
 }
 
+/* A plain tile is its figure alone, top-aligned, inside the card around it. */
+.sw-stat-tile-plain {
+  align-items: flex-start;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+}
+
 .sw-stat-tile-primary {
   background: var(--sw-color-accent);
   border-color: transparent;