@scalewing/react 1.39.0 → 1.41.0

package/dist/css/css-list-row.js

@@ -0,0 +1,209 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { checkStrokeIn, chevronStrokeIn } from './chevron.js';
+import { chartColorMix, chartInkMixes } from './chart-tones.js';
+import { tableCellTones } from './css-table-ledger.js';
+import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+const body = typographyVariants.body;
+const caption = typographyVariants.caption;
+/* Centres a mark of `size` on the title's first line. */
+function onTitleLine(size) {
+    return `calc((${label.lineHeight}px - ${size}) / 2)`;
+}
+/*
+ * A row: the leading mark, the title over its detail, the value over its
+ * detail at the end, then the chevron or check, each lined up with the
+ * title's first line. A pressable row is the whole button or link: a
+ * quiet fill under the pointer, the focus ring inside its edge, 44 px on a
+ * coarse pointer. Plain rows (inside a Card) have no inline padding.
+ */
+function rowRules() {
+    return `.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: ${label.fontSize}px;
+  gap: var(--sw-space-3);
+  line-height: ${label.lineHeight}px;
+  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: ${quietFill}; }
+}
+
+.sw-list-row-pressable:active:not(.sw-list-row-disabled) { background: ${quietFill}; }
+
+.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 ${coarsePointerQuery} {
+  .sw-list-row-pressable { min-height: ${touchTarget}; }
+}
+
+/* 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));
+  }
+}`;
+}
+/**
+ * The colours a row's value can take: a table cell's, and `warning`, for a
+ * figure that needs a look but is not wrong yet.
+ */
+export const listRowValueTones = [...tableCellTones, 'warning'];
+/*
+ * A warning value is the warning colour's ink, moved halfway to the text
+ * colour as a chart's warning words are: the warning colour alone falls
+ * under 4.5:1 on the surface in some palettes. Forced colours draw it as
+ * text, as every tone.
+ */
+function warningValueRule() {
+    return `.sw-list-row-value-warning { color: ${chartColorMix(chartInkMixes.warning)}; }`;
+}
+function partRules() {
+    const tones = tableCellTones
+        .map((tone) => `.sw-list-row-value-${tone} { color: var(--sw-color-${tone}); }`)
+        .join('\n');
+    return `.sw-list-row-leading {
+  align-items: center;
+  display: flex;
+  flex: none;
+  height: ${label.lineHeight}px;
+}
+
+.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: ${label.fontWeight};
+  overflow-wrap: anywhere;
+}
+
+.sw-list-row-title-plain { font-weight: ${body.fontWeight}; }
+
+.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: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+/* 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: ${label.fontWeight}; }
+
+${tones}
+${warningValueRule()}`;
+}
+/*
+ * The chevron is the stroke Accordion and the menus share, pointing to the
+ * inline end; the check is the same stroke in the accent, a short side and
+ * a long one. Both are borders, so forced colours keep them.
+ */
+function accessoryRules() {
+    return `.sw-list-row-chevron {
+  ${chevronStrokeIn('var(--sw-color-muted)')}
+  flex: none;
+  margin-block-start: ${onTitleLine('var(--sw-space-2)')};
+  margin-inline-end: var(--sw-space-1);
+  transform: rotate(-45deg);
+}
+
+.sw-list-row-chevron:dir(rtl) { transform: rotate(135deg); }
+
+.sw-list-row-check {
+  ${checkStrokeIn('var(--sw-color-accent)')}
+  box-sizing: border-box;
+  flex: none;
+  height: var(--sw-space-3);
+  margin-block-start: ${onTitleLine('var(--sw-space-3)')};
+  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; }
+}`;
+}
+export function cssListRowClasses() {
+    return `${rowRules()}
+
+${partRules()}
+
+${accessoryRules()}`;
+}
+export function listRowClassCatalog() {
+    return [
+        'sw-list-row',
+        'sw-list-row-pressable',
+        'sw-list-row-disabled',
+        'sw-list-row-leading',
+        'sw-list-row-label',
+        'sw-list-row-title',
+        'sw-list-row-title-plain',
+        'sw-list-row-title-danger',
+        'sw-list-row-detail',
+        'sw-list-row-end',
+        'sw-list-row-value',
+        ...listRowValueTones.map((tone) => `sw-list-row-value-${tone}`),
+        'sw-list-row-value-detail',
+        'sw-list-row-chevron',
+        'sw-list-row-check',
+    ];
+}

package/dist/css/css-list.d.ts

@@ -0,0 +1,3 @@
+export declare const listRowPadBlock = "var(--sw-space-3)";
+export declare function cssListClasses(): string;
+export declare function listClassCatalog(): string[];

package/dist/css/css-list.js

@@ -0,0 +1,85 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { cssListRowClasses, listRowClassCatalog } from './css-list-row.js';
+import { blockEdgeShadeRules, scrollRegionRules } from './css-scroll-region.js';
+const label = typographyVariants.label;
+const caption = typographyVariants.caption;
+/* A row's padding, shared by the row rules and the bounded list's height. */
+export const listRowPadBlock = 'var(--sw-space-3)';
+const scroll = '.sw-list-group-scroll';
+/*
+ * A ListGroup is one list (`sw-list`) with a hairline between its rows:
+ * a bordered panel on the surface, or plain rows inside a surface that
+ * already has one, with a hairline above the first row too. A footer sits
+ * under the rows, outside any scroll, under a hairline.
+ */
+function groupRules() {
+    return `.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;
+}`;
+}
+/*
+ * A bounded list (\`maxHeight\`) is as tall as its row count
+ * (\`--sw-list-max-rows\`) of rows with a title and one detail line: the
+ * padding twice, the title's line, the detail's line and the hairline.
+ * Taller rows show fewer at a time. Its region is the shared scroll
+ * region (a named keyboard stop); while rows are past its top or bottom,
+ * that edge draws the scroll shade a spacing step 5 deep, a background
+ * layer under the rows. Forced colours draw no shade; printed, every row
+ * shows.
+ */
+function boundedRules() {
+    const top = `${scroll}.sw-scroll-more-top`;
+    const bottom = `${scroll}.sw-scroll-more-bottom`;
+    return `${scrollRegionRules(scroll)}
+
+${scroll} {
+  max-height: calc(var(--sw-list-max-rows) * (2 * ${listRowPadBlock} + ${label.lineHeight}px + ${caption.lineHeight}px + 1px));
+}
+
+${blockEdgeShadeRules({ top, bottom, both: `${top}.sw-scroll-more-bottom` })}
+
+@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 {
+  ${scroll} { max-height: none; }
+}`;
+}
+export function cssListClasses() {
+    return `${groupRules()}
+
+${boundedRules()}
+
+${cssListRowClasses()}`;
+}
+export function listClassCatalog() {
+    return [
+        'sw-list',
+        'sw-list-item',
+        'sw-list-group',
+        'sw-list-group-panel',
+        'sw-list-group-plain',
+        'sw-list-group-scroll',
+        'sw-list-group-footer',
+        ...listRowClassCatalog(),
+    ];
+}

package/dist/css/css-scroll-region.d.ts

@@ -23,6 +23,24 @@ export declare function scrollShadeRules(selector: string): string;
  * and the DenominationGrid strip share it.
  */
 export declare function scrollRegionRules(selector: string): string;
+/** The scroll shade fading away from an edge, a gradient toward `direction`. */
+export declare function blockShade(direction: 'bottom' | 'top'): string;
+/** The selectors of a region scrolled past its top, its bottom, or both. */
+export type BlockEdgeSelectors = {
+    top: string;
+    bottom: string;
+    both: string;
+};
+/**
+ * The shade a region of bounded height draws on its own top or bottom
+ * edge while `ScrollRegion` marks rows past it (`sw-scroll-more-top`,
+ * `sw-scroll-more-bottom`): a background layer a spacing step 5 deep,
+ * fixed to the box and under the rows. A caller narrows the selectors to
+ * the edges nothing pinned covers. Forced colours draw no shade; the
+ * system's scrollbar is the cue. A bounded Table and a bounded ListGroup
+ * share it.
+ */
+export declare function blockEdgeShadeRules({ top, bottom, both, }: BlockEdgeSelectors): string;
 export declare function scrollRegionClassCatalog(): string[];
 /**
  * A region whose start column is pinned (sticky, on an opaque fill) hides

package/dist/css/css-scroll-region.js

@@ -60,6 +60,47 @@ ${selector}:focus-visible {
 
 ${scrollShadeRules(selector)}`;
 }
+/** The scroll shade fading away from an edge, a gradient toward `direction`. */
+export function blockShade(direction) {
+    return `linear-gradient(to ${direction}, ${scrollShadeColor}, transparent)`;
+}
+/**
+ * The shade a region of bounded height draws on its own top or bottom
+ * edge while `ScrollRegion` marks rows past it (`sw-scroll-more-top`,
+ * `sw-scroll-more-bottom`): a background layer a spacing step 5 deep,
+ * fixed to the box and under the rows. A caller narrows the selectors to
+ * the edges nothing pinned covers. Forced colours draw no shade; the
+ * system's scrollbar is the cue. A bounded Table and a bounded ListGroup
+ * share it.
+ */
+export function blockEdgeShadeRules({ top, bottom, both, }) {
+    return `${top},
+${bottom} {
+  background-repeat: no-repeat;
+  background-size: 100% var(--sw-space-5);
+}
+
+${top} {
+  background-image: ${blockShade('bottom')};
+  background-position: top;
+}
+
+${bottom} {
+  background-image: ${blockShade('top')};
+  background-position: bottom;
+}
+
+${both} {
+  background-image: ${blockShade('bottom')}, ${blockShade('top')};
+  background-position: top, bottom;
+}
+
+@media (forced-colors: active) {
+  ${top},
+  ${bottom},
+  ${both} { background-image: none; }
+}`;
+}
 export function scrollRegionClassCatalog() {
     return [
         'sw-scroll-more-start',

package/dist/css/css-section-nav-filled.js

@@ -1,6 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
-const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 /** How a section navigation marks its current item. */
 export const sectionNavAppearances = ['underline', 'filled'];
@@ -18,10 +17,7 @@ export function assertSectionNavAppearance(appearance) {
  * hovered link. A 2 px transparent border keeps room for forced colours,
  * where the current link's border turns Highlight.
  *
- * A count after a label (a number waiting there) is a filled pill: the
- * danger colour with its on-colour figures (4.5:1 in every palette, as a
- * danger Button's label), caption size at weight 700, a space-5 less
- * space-1 (20) high and at least as wide. Forced colours draw its edge.
+ * A count after a label is the shared count pill (`css-count-pill.ts`).
  */
 export function cssSectionNavFilledClasses() {
     // Two classes, so every filled rule outranks the side list's (one class
@@ -48,33 +44,14 @@ export function cssSectionNavFilledClasses() {
   font-weight: ${label.fontWeight};
 }
 
-[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: ${caption.fontSize}px;
-  font-variant-numeric: tabular-nums;
-  font-weight: 700;
-  justify-content: center;
-  letter-spacing: ${caption.letterSpacing}px;
-  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 ${coarsePointerQuery} {
   [data-theme] ${filled} .sw-section-nav-link { min-height: ${touchTarget}; }
 }
 
 @media (forced-colors: active) {
   [data-theme] ${filled} .sw-section-nav-link[aria-current] { border-color: Highlight; }
-  [data-theme] .sw-section-nav-count { border: 1px solid CanvasText; }
 }`;
 }
 export function sectionNavFilledClassCatalog() {
-    return ['sw-section-nav-filled', 'sw-section-nav-count'];
+    return ['sw-section-nav-filled'];
 }

package/dist/css/css-segmented-sizing.d.ts

@@ -0,0 +1,13 @@
+import { type Breakpoint } from './breakpoints.js';
+/** The class that stretches a SegmentedControl's field below a breakpoint. */
+export declare function segmentedFullWidthClass(breakpoint: Breakpoint): string;
+/**
+ * `md` (the default) is each track's own segment padding; `sm` pads every
+ * segment a step less and keeps its label on one line, ending in an
+ * ellipsis past its share, so a few segments fit a phone's card.
+ */
+export declare const segmentedSizes: readonly ["md", "sm"];
+export type SegmentedSize = (typeof segmentedSizes)[number];
+export declare const segmentedSmClass = "sw-segmented-sm";
+export declare function cssSegmentedSizingClasses(): string;
+export declare function segmentedSizingClassCatalog(): string[];

package/dist/css/css-segmented-sizing.js

@@ -0,0 +1,66 @@
+import { breakpointQuery } from './breakpoints.js';
+/** The class that stretches a SegmentedControl's field below a breakpoint. */
+export function segmentedFullWidthClass(breakpoint) {
+    return `sw-segmented-field-full-below-${breakpoint}`;
+}
+/**
+ * `md` (the default) is each track's own segment padding; `sm` pads every
+ * segment a step less and keeps its label on one line, ending in an
+ * ellipsis past its share, so a few segments fit a phone's card.
+ */
+export const segmentedSizes = ['md', 'sm'];
+export const segmentedSmClass = 'sw-segmented-sm';
+/*
+ * Below the breakpoint a full-width field fills its column and its track
+ * shares that width equally among its segments (the filled track's grid),
+ * whatever its variant, a raised one included (three classes, after the
+ * raised and Inline rules that size it to its segments).
+ *
+ * A small track pads each segment without a mark a space-2 step on both
+ * sides (a segment with a mark keeps its variant's padding), never wraps a
+ * label and ends a label that does not fit its segment in an ellipsis on
+ * the label's own block box (`sw-segmented-item-label`; an inline box
+ * cannot clip), so a plain segment and a flex item (a
+ * filled or marked segment) truncate too; the radio's name still reads
+ * the whole label. After every variant's padding.
+ */
+export function cssSegmentedSizingClasses() {
+    const full = segmentedFullWidthClass('md');
+    return `@media ${breakpointQuery('below', 'md')} {
+  .sw-segmented-field.${full} {
+    align-self: stretch;
+    display: flex;
+    width: 100%;
+  }
+  .sw-segmented-field.${full} > .sw-segmented {
+    align-self: stretch;
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+  }
+}
+
+.sw-segmented.${segmentedSmClass} .sw-segmented-item {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.sw-segmented.${segmentedSmClass}:not(.sw-segmented-with-icons) .sw-segmented-item {
+  padding-inline: var(--sw-space-2);
+}
+
+.${segmentedSmClass} .sw-segmented-item-label {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}`;
+}
+export function segmentedSizingClassCatalog() {
+    return [
+        segmentedFullWidthClass('md'),
+        segmentedSmClass,
+        'sw-segmented-item-label',
+    ];
+}

package/dist/css/css-segmented.js

@@ -1,5 +1,6 @@
 import { trackInset, typographyVariants } from '@scalewing/tokens';
 import { cssSegmentedRaisedClasses, segmentedRaisedClassCatalog, } from './css-segmented-raised.js';
+import { cssSegmentedSizingClasses, segmentedSizingClassCatalog, } from './css-segmented-sizing.js';
 const body = typographyVariants.body;
 const data = typographyVariants.data;
 const label = typographyVariants.label;
@@ -167,6 +168,8 @@ ${iconRules()}
 
 ${cssSegmentedRaisedClasses()}
 
+${cssSegmentedSizingClasses()}
+
 .sw-segmented-disabled {
   opacity: var(--sw-disabled-opacity);
 }
@@ -187,5 +190,6 @@ export function segmentedClassCatalog() {
         'sw-segmented-item-icon',
         'sw-segmented-disabled',
         ...segmentedRaisedClassCatalog(),
+        ...segmentedSizingClassCatalog(),
     ];
 }

package/dist/css/css-stat-tile.d.ts

@@ -1,5 +1,12 @@
 export declare const statTileTones: readonly ["default", "accent", "success", "danger", "warning"];
 export type StatTileTone = (typeof statTileTones)[number];
+/**
+ * `card` (the default) is a tile on the surface with its own hairline and
+ * radius; `plain` has no surface, edge or padding, for figures inside a
+ * card that already has them, such as a row of answers divided by hairlines.
+ */
+export declare const statTileAppearances: readonly ["card", "plain"];
+export type StatTileAppearance = (typeof statTileAppearances)[number];
 /** The figure tile: a glyph circle before a label, a tabular value and a caption. Text colours come from `Text color`. */
 export declare function cssStatTileClasses(): string;
 export declare function statTileClassCatalog(): string[];

package/dist/css/css-stat-tile.js

@@ -5,6 +5,12 @@ export const statTileTones = [
     'danger',
     'warning',
 ];
+/**
+ * `card` (the default) is a tile on the surface with its own hairline and
+ * radius; `plain` has no surface, edge or padding, for figures inside a
+ * card that already has them, such as a row of answers divided by hairlines.
+ */
+export const statTileAppearances = ['card', 'plain'];
 /** The figure tile: a glyph circle before a label, a tabular value and a caption. Text colours come from `Text color`. */
 export function cssStatTileClasses() {
     return `.sw-stat-tile {
@@ -44,6 +50,15 @@ export function cssStatTileClasses() {
   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;
@@ -63,6 +78,7 @@ export function cssStatTileClasses() {
 export function statTileClassCatalog() {
     return [
         'sw-stat-tile',
+        'sw-stat-tile-plain',
         'sw-stat-tile-primary',
         'sw-stat-tile-glyph',
         'sw-stat-tile-body',

package/dist/css/css-steps.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { checkStrokeIn } from './chevron.js';
 const body = typographyVariants.body;
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
@@ -29,8 +30,7 @@ function markerRules() {
 
 /* Private chrome: a check drawn with two borders, as Checkbox's. */
 .sw-steps-item-done .sw-steps-marker::after {
-  border-bottom: 2px solid var(--sw-color-surface);
-  border-right: 2px solid var(--sw-color-surface);
+  ${checkStrokeIn('var(--sw-color-surface)')}
   content: '';
   height: var(--sw-space-3);
   margin-top: calc(-1 * var(--sw-space-1) / 2);

package/dist/css/css-switch.d.ts

@@ -1,2 +1,8 @@
+/** Where the control sits: before its label, or at the row's end after it. */
+export declare const switchLayouts: readonly ["leading", "trailing"];
+export type SwitchLayout = (typeof switchLayouts)[number];
+/** The track's colour while on. */
+export declare const switchCheckedTones: readonly ["accent", "success"];
+export type SwitchCheckedTone = (typeof switchCheckedTones)[number];
 export declare function cssSwitchClasses(): string;
 export declare function switchClassCatalog(): string[];

package/dist/css/css-switch.js

@@ -1,6 +1,41 @@
 import { typographyVariants } from '@scalewing/tokens';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
+/** Where the control sits: before its label, or at the row's end after it. */
+export const switchLayouts = ['leading', 'trailing'];
+/** The track's colour while on. */
+export const switchCheckedTones = ['accent', 'success'];
+/*
+ * A trailing switch is a row as wide as its column: the label and its
+ * description take the room, the control sits at the end, a step apart,
+ * lined up with the label's first line. A success switch fills its track
+ * with the success colour while on (3:1 or more against the surface in
+ * every palette, as the accent is); forced colours keep Highlight.
+ */
+function optionRules() {
+    return `.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) - ${label.lineHeight}px) / 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; }
+}`;
+}
 export function cssSwitchClasses() {
     return `.sw-switch {
   align-items: center;
@@ -90,6 +125,8 @@ export function cssSwitchClasses() {
   line-height: ${caption.lineHeight}px;
 }
 
+${optionRules()}
+
 @media (prefers-reduced-motion: reduce) {
   .sw-switch-thumb { transition: none; }
 }
@@ -111,5 +148,7 @@ export function switchClassCatalog() {
         'sw-switch-copy',
         'sw-switch-label',
         'sw-switch-description',
+        'sw-switch-trailing',
+        'sw-switch-success',
     ];
 }