@scalewing/react 1.40.0 → 1.42.0

package/dist/styles.css

@@ -57,6 +57,7 @@
   --sw-dialog-max: 32rem;
   --sw-dialog-max-lg: 56rem;
   --sw-dialog-max-xl: 65rem;
+  --sw-reading-max: 46rem;
   --sw-select-max: 16rem;
   --sw-split-min: 14rem;
   --sw-split-size: 22rem;
@@ -130,6 +131,7 @@
   --sw-dialog-max: 32rem;
   --sw-dialog-max-lg: 56rem;
   --sw-dialog-max-xl: 65rem;
+  --sw-reading-max: 46rem;
   --sw-select-max: 16rem;
   --sw-split-min: 14rem;
   --sw-split-size: 22rem;
@@ -614,6 +616,18 @@ body {
   color-scheme: dark;
 }
 
+[data-theme] {
+  --sw-canvas-grouped: color-mix(in srgb, var(--sw-color-muted) 7%, var(--sw-color-background));
+}
+
+[data-theme='dark'] {
+  --sw-canvas-grouped: var(--sw-color-background);
+}
+
+[data-theme][data-canvas='grouped'] {
+  background-color: var(--sw-canvas-grouped);
+}
+
 [data-theme] a {
   color: var(--sw-color-accent);
   text-decoration: none;
@@ -1003,6 +1017,12 @@ body {
   .sw-button-group.sw-button-group-attached > * { width: auto; }
 }
 
+/* Its own block, after the phone row's, so a group that does not fill is unchanged. */
+@media not all and (min-width: 48rem) {
+  .sw-button-group.sw-button-group-attached.sw-button-group-full-below-md { width: 100%; }
+  .sw-button-group.sw-button-group-attached.sw-button-group-full-below-md > .sw-button { flex: 1 1 0; min-width: 0; }
+}
+
 .sw-button-group.sw-button-group-attached.sw-button-group-track {
   background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
   border-radius: var(--sw-radius-sm);
@@ -1545,6 +1565,37 @@ body {
   .sw-segmented.sw-segmented-raised[aria-invalid='true'] { border-color: Mark; }
 }
 
+@media not all and (min-width: 48rem) {
+  .sw-segmented-field.sw-segmented-field-full-below-md {
+    align-self: stretch;
+    display: flex;
+    width: 100%;
+  }
+  .sw-segmented-field.sw-segmented-field-full-below-md > .sw-segmented {
+    align-self: stretch;
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+  }
+}
+
+.sw-segmented.sw-segmented-sm .sw-segmented-item {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.sw-segmented.sw-segmented-sm:not(.sw-segmented-with-icons) .sw-segmented-item {
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-segmented-sm .sw-segmented-item-label {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .sw-segmented-disabled {
   opacity: var(--sw-disabled-opacity);
 }
@@ -2191,6 +2242,36 @@ body {
 .sw-date-field-error { color: var(--sw-color-danger); }
 .sw-date-field-error:empty { position: absolute; }
 
+.sw-button.sw-date-field-calendar-entry {
+  align-self: flex-start;
+  border-radius: var(--sw-radius-sm);
+  flex: none;
+  justify-content: flex-start;
+  max-width: 100%;
+  text-align: start;
+  white-space: nowrap;
+}
+
+/* A long day or word in a narrow column ends in an ellipsis; the name keeps it whole. */
+.sw-date-field-calendar-entry-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sw-button.sw-date-field-calendar-entry .sw-date-field-glyph {
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
+.sw-button.sw-date-field-calendar-entry.sw-date-field-calendar-entry-invalid {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  .sw-button.sw-date-field-calendar-entry.sw-date-field-calendar-entry-invalid { border-color: Mark; }
+}
+
 .sw-date-field-calendar {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -2801,63 +2882,555 @@ body {
   text-align: end;
 }
 
-.sw-list-row-title {
-  font-weight: 600;
-  overflow-wrap: anywhere;
+.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-value-warning { color: color-mix(in srgb, var(--sw-color-warning) 50%, var(--sw-color-text)); }
+
+.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; }
+}
+
+.sw-list-row-unread {
+  border: calc(var(--sw-space-2) / 2) solid var(--sw-color-accent);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-block;
+  height: var(--sw-space-2);
+  margin-inline-start: var(--sw-space-2);
+  vertical-align: middle;
+  width: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  .sw-list-row-unread { border-color: CanvasText; }
+}
+
+.sw-list-row-tag {
+  align-self: center;
+  display: inline-flex;
+  flex: none;
+  white-space: nowrap;
+}
+
+.sw-list-item-action {
+  align-items: center;
+  display: flex;
+}
+
+.sw-list-item-action > .sw-list-row {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-inline-end: var(--sw-space-2);
+}
+
+.sw-list-row-action {
+  display: inline-flex;
+  flex: none;
+  padding-inline-end: var(--sw-space-4);
+}
+
+.sw-list-group-plain .sw-list-row-action { padding-inline-end: 0; }
+
+@supports selector(:has(*)) {
+  @media (hover: hover) {
+    .sw-list-item-action:has(> .sw-list-row-pressable:hover:not(.sw-list-row-disabled)) {
+      background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+    }
+
+    .sw-list-item-action > .sw-list-row-pressable:hover:not(.sw-list-row-disabled) {
+      background: transparent;
+    }
+  }
+}
+
+.sw-file-field-frame {
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.sw-file-field-empty { background: var(--sw-color-subtle); }
+
+.sw-file-field-chosen {
+  align-items: center;
+  background: var(--sw-color-surface);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-3);
+  padding: var(--sw-space-2) var(--sw-space-2) var(--sw-space-2) var(--sw-space-4);
+}
+
+.sw-field-invalid .sw-file-field-frame { border-color: var(--sw-color-danger); }
+
+/* A drag wins over an error's edge: it says where the file goes. */
+.sw-file-field-frame.sw-file-field-dragging {
+  background: var(--sw-color-accentSubtle);
+  border-color: var(--sw-color-accent);
+  outline: 1px solid var(--sw-color-accent);
+}
+
+/* On the tint, muted words fall under 4.5:1 in light palettes: every word takes the text colour. */
+.sw-file-field-dragging :is(.sw-file-field-choose, .sw-file-field-drop, .sw-file-field-detail, .sw-file-field-icon) {
+  color: var(--sw-color-text);
+}
+
+/* Disabled, the frame's hairline is dashed, as a disabled text control's. */
+.sw-file-field-disabled { border-style: dashed; }
+
+.sw-file-field-zone {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  gap: var(--sw-space-1);
+  justify-content: center;
+  line-height: 20px;
+  margin: 0;
+  min-height: var(--sw-control-md-min-height);
+  padding: var(--sw-space-6) var(--sw-space-4);
+  text-align: center;
+  width: 100%;
+}
+
+.sw-file-field-zone:focus { outline: none; }
+
+.sw-file-field-zone:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-file-field-choose {
+  color: var(--sw-color-text);
+  font-weight: 600;
+}
+
+.sw-file-field-drop { color: var(--sw-color-muted); }
+
+.sw-file-field-zone:disabled {
+  background-color: var(--sw-color-subtle);
+  border-style: dashed;
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;
+  border-radius: inherit;
+}
+
+.sw-file-field-zone:disabled .sw-file-field-choose { color: var(--sw-color-muted); }
+
+@media (pointer: coarse) {
+  .sw-file-field-drop { display: none; }
+}
+
+.sw-file-field-icon {
+  align-items: center;
+  color: var(--sw-color-muted);
+  display: flex;
+  flex: none;
+}
+
+.sw-file-field-file {
+  display: flex;
+  flex: 1 1 calc(4 * var(--sw-space-8));
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-file-field-name {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+
+.sw-file-field-detail {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sw-file-field-chosen > .sw-button {
+  flex: none;
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .sw-file-field-frame { border-color: CanvasText; }
+  .sw-field-invalid .sw-file-field-frame { border-color: Mark; }
+  .sw-file-field-frame.sw-file-field-dragging { border-color: Highlight; outline-color: Highlight; }
+  .sw-file-field-choose { color: ButtonText; }
+  .sw-file-field-zone:disabled,
+  .sw-file-field-zone:disabled .sw-file-field-choose { color: GrayText; }
+}
+
+.sw-article {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  max-inline-size: var(--sw-reading-max);
+  min-width: 0;
+}
+
+.sw-article-cover {
+  aspect-ratio: 3 / 1;
+  background: var(--sw-color-subtle);
+  border-start-end-radius: inherit;
+  border-start-start-radius: inherit;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+.sw-article-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: var(--sw-space-6) var(--sw-space-8);
+}
+
+.sw-article-header {
+  display: flex;
+  flex-direction: column;
+  margin-block-end: var(--sw-space-3);
+  min-width: 0;
+}
+
+.sw-article-top {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+  justify-content: space-between;
+  margin-block-end: var(--sw-space-3);
+}
+
+.sw-article-eyebrow {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sw-article-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+}
+
+.sw-article-actions:only-child { margin-inline-start: auto; }
+
+.sw-article-title { overflow-wrap: anywhere; }
+
+.sw-article-meta {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  margin-block-start: var(--sw-space-3);
+  overflow-wrap: anywhere;
+}
+
+.sw-article-content {
+  margin-block-start: var(--sw-space-4);
+  min-width: 0;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-article-cover { aspect-ratio: 2 / 1; }
+  .sw-article-body { padding: var(--sw-space-5); }
+}
+
+.sw-document-viewer {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  border-radius: var(--sw-radius-lg);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding-block-end: var(--sw-space-4);
+}
+
+.sw-document-viewer-stage {
+  box-sizing: border-box;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: var(--sw-space-5);
+  touch-action: pan-x pan-y;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-document-viewer-stage { padding: var(--sw-space-3); }
+}
+
+.sw-document-viewer-stage:focus { outline: none; }
+
+.sw-document-viewer-stage:focus-visible {
+  border-radius: var(--sw-radius-lg);
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-document-viewer-page {
+  aspect-ratio: 1 / var(--sw-document-page-aspect);
+  background: var(--sw-color-surface);
+  box-shadow: var(--sw-elevation-sm);
+  margin-inline: auto;
+  position: relative;
+  width: var(--sw-document-page-width);
+}
+
+.sw-document-viewer-page > canvas {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.sw-document-viewer-text {
+  --scale-round-x: 1px;
+  --scale-round-y: 1px;
+  --min-font-size: 1;
+  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
+  --min-font-size-inv: calc(1 / var(--min-font-size));
+  forced-color-adjust: none;
+  inset: 0;
+  letter-spacing: normal;
+  line-height: 1;
+  overflow: clip;
+  position: absolute;
+  text-align: initial;
+  text-size-adjust: none;
+  transform-origin: 0 0;
+  word-spacing: normal;
+}
+
+.sw-document-viewer-text :is(span, br) {
+  color: transparent;
+  cursor: text;
+  position: absolute;
+  transform-origin: 0% 0%;
+  user-select: text;
+  white-space: pre;
+}
+
+.sw-document-viewer-text > :not(.markedContent),
+.sw-document-viewer-text .markedContent span:not(.markedContent) {
+  --font-height: 0;
+  --scale-x: 1;
+  --rotate: 0deg;
+  font-size: calc(var(--text-scale-factor) * var(--font-height));
+  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
+}
+
+.sw-document-viewer-text .markedContent { display: contents; }
+
+.sw-document-viewer-text ::selection {
+  background: color-mix(in srgb, var(--sw-color-accent) 30%, transparent);
+  color: transparent;
+}
+
+.sw-document-viewer-bar {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-3);
+  justify-content: center;
+  padding-inline: var(--sw-space-3);
+}
+
+.sw-button.sw-document-viewer-step {
+  border-radius: var(--sw-radius-pill);
+  flex: none;
+  min-height: var(--sw-space-8);
+  min-width: var(--sw-space-8);
+  padding-inline: 0;
+}
+
+.sw-document-viewer-status {
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-variant-numeric: tabular-nums;
+  line-height: 20px;
+  text-align: center;
+}
+
+.sw-document-viewer-message {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  justify-content: center;
+  min-height: calc(4 * var(--sw-space-8));
+  text-align: center;
+}
+
+.sw-document-viewer-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: center;
+  margin-block-start: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  .sw-document-viewer { border: 1px solid CanvasText; }
+  .sw-document-viewer-page { outline: 1px solid CanvasText; }
+}
+
+.sw-markdown {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 17px;
+  letter-spacing: -0.2px;
+  line-height: 25px;
+  overflow-wrap: anywhere;
+}
+
+:where(.sw-markdown) > *,
+:where(.sw-markdown-quote) > *,
+:where(.sw-markdown-list li) > * { margin-block: 0; }
+
+:where(.sw-markdown, .sw-markdown-quote, .sw-markdown-list li) > * + * {
+  margin-block-start: var(--sw-space-4);
+}
+
+:where(.sw-markdown) > * + .sw-markdown-heading { margin-block-start: var(--sw-space-6); }
+:where(.sw-markdown) > .sw-markdown-heading + * { margin-block-start: var(--sw-space-2); }
+
+.sw-markdown-heading {
+  color: var(--sw-color-text);
+  font-weight: 600;
+  scroll-margin-block-start: var(--sw-space-6);
+}
+
+.sw-markdown-heading-1 {
+  font-size: 20px;
+  letter-spacing: -0.3px;
+  line-height: 28px;
+}
+
+.sw-markdown-heading-2 {
+  font-size: 17px;
+  line-height: 25px;
 }
 
-.sw-list-row-title-plain { font-weight: 400; }
-
-.sw-list-row-title-danger { color: var(--sw-color-danger); }
+.sw-markdown-heading-3 {
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+}
 
-.sw-list-row-detail,
-.sw-list-row-value-detail {
-  color: var(--sw-color-muted);
-  font-size: 13px;
-  line-height: 18px;
+.sw-markdown-list {
+  padding-inline-start: var(--sw-space-5);
 }
 
-/* The label takes the wrap; the end keeps its words whole up to half the row. */
-.sw-list-row-detail { overflow-wrap: anywhere; }
+.sw-markdown-list > li + li { margin-block-start: var(--sw-space-2); }
 
-.sw-list-row-value,
-.sw-list-row-value-detail { font-variant-numeric: tabular-nums; }
+[data-theme] .sw-markdown-link {
+  color: var(--sw-color-accent);
+  text-decoration-line: underline;
+}
 
-.sw-list-row-value { font-weight: 600; }
+[data-theme] .sw-markdown-link:hover {
+  text-decoration-thickness: var(--sw-focus-ring-width);
+}
 
-.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); }
+[data-theme] .sw-markdown-quote :is(.sw-markdown-link, .sw-markdown-caption) {
+  color: var(--sw-color-text);
+}
 
-.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-markdown-quote {
+  background: var(--sw-color-accentSubtle);
+  border-inline-start: var(--sw-space-1) solid var(--sw-color-accent);
+  border-radius: var(--sw-radius-sm);
+  margin-inline: 0;
+  padding: var(--sw-space-3) var(--sw-space-4);
 }
 
-.sw-list-row-chevron:dir(rtl) { transform: rotate(135deg); }
+.sw-markdown-figure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  margin-inline: 0;
+}
 
-.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);
+.sw-markdown-image {
+  border-radius: var(--sw-radius-md);
+  display: block;
+  height: auto;
+  width: 100%;
+}
+
+.sw-markdown-caption {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
 }
 
 @media (forced-colors: active) {
-  .sw-list-row-check { border-color: CanvasText; }
+  .sw-markdown-quote { border: 1px solid CanvasText; border-inline-start-width: var(--sw-space-1); }
 }
 
 [data-theme] .sw-section-nav-count,
@@ -2879,6 +3452,17 @@ body {
   padding-inline: var(--sw-space-1);
 }
 
+/*
+ * NavCount's `tone="accent"`: a count that is news, not work waiting (what
+ * was added since the person last looked), is the accent fill with its
+ * on-colour figures (4.5:1 in every palette, as a primary Button's label).
+ * One class more specific than the pill, so it wins in any order.
+ */
+[data-theme] .sw-nav-count.sw-nav-count-accent {
+  background: var(--sw-color-accent);
+  color: var(--sw-color-onAccent);
+}
+
 /*
  * 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
@@ -2958,6 +3542,7 @@ body {
 .sw-bar-chart-fill-success { background: var(--sw-color-success); }
 .sw-bar-chart-fill-warning { background: var(--sw-color-warning); }
 .sw-bar-chart-fill-danger { background: var(--sw-color-danger); }
+.sw-bar-chart-fill-neutral { background: var(--sw-color-muted); }
 
 .sw-bar-chart-value {
   color: var(--sw-color-text);
@@ -3016,6 +3601,16 @@ body {
   .sw-bar-chart-diverging .sw-bar-chart-track::before { background: CanvasText; }
 }
 
+.sw-bar-chart-bare .sw-bar-chart-track {
+  background: transparent;
+  border-color: transparent;
+}
+
+/* Forced colours replace a transparent edge; the canvas colour hides it. */
+@media (forced-colors: active) {
+  .sw-bar-chart-bare .sw-bar-chart-track { border-color: Canvas; }
+}
+
 @media (forced-colors: active) {
   .sw-bar-chart-fill { background: CanvasText; }
 }
@@ -3698,13 +4293,27 @@ body {
 
 .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;
 }
 
-/* With no summary the live region stays in the dialog, so a first figure
-   is still announced, but it takes no room in the footer. */
+/* 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;
@@ -3772,6 +4381,36 @@ body {
   .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);
@@ -4660,6 +5299,29 @@ body {
   line-height: 18px;
 }
 
+.sw-switch-trailing {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--sw-space-3);
+  justify-content: space-between;
+  width: 100%;
+}
+
+.sw-switch-trailing .sw-switch-copy {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-block: calc((var(--sw-control-md-min-height) - 20px) / 2);
+}
+
+.sw-switch-success .sw-switch-input:checked + .sw-switch-track {
+  background: var(--sw-color-success);
+  border-color: var(--sw-color-success);
+}
+
+@media (forced-colors: active) {
+  .sw-switch-success .sw-switch-input:checked + .sw-switch-track { background: Highlight; border-color: Highlight; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sw-switch-thumb { transition: none; }
 }
@@ -5288,6 +5950,28 @@ body {
   border-color: var(--sw-color-danger);
 }
 
+.sw-filter-chip-count-inline {
+  font-variant-numeric: tabular-nums;
+}
+
+.sw-filter-chips-scroll .sw-filter-chips-options {
+  flex-wrap: nowrap;
+  margin: calc(-1 * calc(var(--sw-focus-ring-width) + var(--sw-focus-ring-offset)));
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: calc(var(--sw-focus-ring-width) + var(--sw-focus-ring-offset));
+  scrollbar-width: thin;
+}
+
+.sw-filter-chips-scroll .sw-filter-chip {
+  flex: none;
+  max-width: none;
+}
+
+.sw-filter-chips-scroll .sw-filter-chip-face {
+  white-space: nowrap;
+}
+
 @media (forced-colors: active) {
   .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
   .sw-filter-chips-error { color: Mark; }
@@ -5865,6 +6549,146 @@ body {
   .sw-denomination-strip .sw-denomination-value-row .sw-denomination-value { color: CanvasText; }
 }
 
+.sw-denomination-transposed {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.sw-denomination-transposed th,
+.sw-denomination-transposed td {
+  padding: var(--sw-space-1) var(--sw-space-2);
+  vertical-align: middle;
+}
+
+.sw-denomination-transposed tbody tr,
+.sw-denomination-transposed tfoot tr {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-denomination-transposed .sw-denomination-transposed-head {
+  vertical-align: bottom;
+  white-space: nowrap;
+}
+
+.sw-denomination-transposed .sw-denomination-label-line {
+  justify-content: flex-end;
+}
+
+.sw-denomination-transposed-label {
+  color: var(--sw-color-text);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  text-align: start;
+  white-space: nowrap;
+}
+
+.sw-denomination-transposed td.sw-denomination-entry {
+  padding: var(--sw-space-1);
+}
+
+.sw-denomination-transposed-entry .sw-denomination-transposed-head,
+.sw-denomination-transposed-entry .sw-denomination-cell {
+  text-align: center;
+}
+
+.sw-denomination-transposed-entry .sw-denomination-label-line {
+  justify-content: center;
+}
+
+.sw-denomination-transposed-value {
+  background: var(--sw-color-subtle);
+  font-size: 15px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.sw-denomination-transposed-total {
+  color: var(--sw-denomination-tone);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  text-align: end;
+  white-space: nowrap;
+}
+
+.sw-denomination-transposed-entry .sw-denomination-transposed-total {
+  text-align: center;
+}
+
+/* The denomination column and its corner stay in view, as the strip's labels do. */
+.sw-denomination-transposed .sw-denomination-transposed-label,
+.sw-denomination-transposed :is(thead, tfoot) .sw-denomination-corner:first-child {
+  background: var(--sw-glass-fill);
+  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));
+  inset-inline-start: 0;
+  position: sticky;
+  z-index: 1;
+}
+
+.sw-denomination-scroll-transposed.sw-scroll-more-start .sw-denomination-transposed-label::after {
+  background: linear-gradient(to right, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 100%;
+  pointer-events: none;
+  position: absolute;
+  width: var(--sw-space-5);
+}
+
+.sw-denomination-scroll-transposed.sw-scroll-more-start:dir(rtl) .sw-denomination-transposed-label::after {
+  background: linear-gradient(to left, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-scroll-transposed.sw-scroll-more-start .sw-denomination-transposed-label::after { display: none; }
+}
+
+.sw-denomination-transposed-quiet {
+  background: var(--sw-color-subtle);
+}
+
+/* Over a toned count's full strength (three classes, emitted later). */
+.sw-denomination-grid.sw-denomination-transposed .sw-denomination-transposed-disabled:is(.sw-denomination-cell, .sw-denomination-transposed-value, .sw-denomination-transposed-total, .sw-denomination-transposed-head) {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-transposed-value,
+  .sw-denomination-transposed-quiet { background: Canvas; }
+  .sw-denomination-transposed-label,
+  .sw-denomination-transposed-value,
+  .sw-denomination-transposed-total { color: CanvasText; }
+}
+
+.sw-denomination-cell-signed.sw-denomination-cell-positive {
+  color: var(--sw-color-success);
+}
+
+.sw-denomination-cell-negative.sw-denomination-cell-plain {
+  color: var(--sw-color-text);
+}
+
+.sw-denomination-count-digits .sw-denomination-entry .sw-stepper-full .sw-stepper-track {
+  font-size: 17px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  grid-template-columns: var(--sw-space-6) minmax(calc(var(--sw-denomination-count-digits) * 1ch + 2 * var(--sw-space-1) + 2px), 1fr) var(--sw-space-6);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-cell-signed.sw-denomination-cell-positive,
+  .sw-denomination-cell-negative.sw-denomination-cell-plain { color: CanvasText; }
+}
+
 @media (forced-colors: active) {
   .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
   .sw-denomination-strip .sw-denomination-label::before { background: CanvasText; forced-color-adjust: none; }
@@ -6093,6 +6917,27 @@ body {
     linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%); }
 }
 
+.sw-field-width-xs { --sw-field-width: 4rem; }
+.sw-field-width-sm { --sw-field-width: 6rem; }
+.sw-field-width-md { --sw-field-width: 8rem; }
+.sw-field-width-lg { --sw-field-width: 12rem; }
+.sw-field-width-xl { --sw-field-width: 16rem; }
+
+.sw-field-sized > :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea, select, .sw-field-adorned, .sw-field-search) {
+  align-self: flex-start;
+  box-sizing: border-box;
+  inline-size: min(100%, var(--sw-field-width));
+  max-inline-size: 100%;
+}
+
+[data-theme] .sw-field-sized > select {
+  height: var(--sw-control-md-min-height);
+}
+
+[data-theme] .sw-field-xs.sw-field-sized > select {
+  height: var(--sw-control-xs-min-height);
+}
+
 @media (forced-colors: active) {
   [data-theme] .sw-field-invalid :is(input, select, textarea),
   .sw-field-invalid .sw-field-adorned { border-color: Mark; }