@scalewing/react 1.40.0 → 1.42.0

package/dist/css/css-file-field.js

@@ -0,0 +1,180 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { disabledControlSurface } from './css-document.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+const caption = typographyVariants.caption;
+/*
+ * The frame holds the field's one file: empty, a wide zone on the subtle
+ * fill that opens the picker (the choose words in the text colour at
+ * label weight, as the accent falls under 4.5:1 on the subtle fill in
+ * some palettes, the drop words muted after them); chosen, a row on the surface
+ * with the consumer's mark, the file's name over its detail and the
+ * change button at the end. Both are a hairline frame at the medium
+ * radius. A file dragged over either draws the accent edge and tint. A
+ * chosen row too narrow for a long name and the button wraps the button
+ * under the name, at the row's end.
+ */
+function frameRules() {
+    return `.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; }`;
+}
+/*
+ * The empty zone is one button filling the frame, a space-6 of padding
+ * above and below its words, its focus ring inside the frame's edge. On a
+ * coarse pointer, where nothing is dragged, the drop words are left out.
+ */
+function zoneRules() {
+    return `.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: ${label.fontSize}px;
+  gap: var(--sw-space-1);
+  justify-content: center;
+  line-height: ${label.lineHeight}px;
+  margin: 0;
+  min-height: ${touchTarget};
+  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: ${label.fontWeight};
+}
+
+.sw-file-field-drop { color: var(--sw-color-muted); }
+
+.sw-file-field-zone:disabled {
+  ${disabledControlSurface}
+  border-radius: inherit;
+}
+
+.sw-file-field-zone:disabled .sw-file-field-choose { color: var(--sw-color-muted); }
+
+@media ${coarsePointerQuery} {
+  .sw-file-field-drop { display: none; }
+}`;
+}
+/*
+ * The chosen file: the mark, then the name over its detail (at least four
+ * space-8 wide before the button wraps under it), then the button.
+ */
+function fileRules() {
+    return `.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: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  line-height: ${label.lineHeight}px;
+  overflow-wrap: anywhere;
+}
+
+.sw-file-field-detail {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-file-field-chosen > .sw-button {
+  flex: none;
+  margin-inline-start: auto;
+}`;
+}
+/* Forced colours: system edges, Highlight for a drag, the button text colour for the words. */
+function forcedColorRules() {
+    return `@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; }
+}`;
+}
+export function cssFileFieldClasses() {
+    return `${frameRules()}
+
+${zoneRules()}
+
+${fileRules()}
+
+${forcedColorRules()}`;
+}
+export function fileFieldClassCatalog() {
+    return [
+        'sw-file-field',
+        'sw-file-field-frame',
+        'sw-file-field-empty',
+        'sw-file-field-chosen',
+        'sw-file-field-dragging',
+        'sw-file-field-disabled',
+        'sw-file-field-zone',
+        'sw-file-field-choose',
+        'sw-file-field-drop',
+        'sw-file-field-icon',
+        'sw-file-field-file',
+        'sw-file-field-name',
+        'sw-file-field-detail',
+    ];
+}

package/dist/css/css-filter-chips-layout.d.ts

@@ -0,0 +1,2 @@
+export declare function cssFilterChipsLayoutClasses(): string;
+export declare function filterChipsLayoutClassCatalog(): string[];

package/dist/css/css-filter-chips-layout.js

@@ -0,0 +1,42 @@
+/*
+ * The chips' opt-in layouts.
+ *
+ * An inline count is set in the chip's own words, at tabular figures, after
+ * a middle dot ("Open · 3"); a chosen chip keeps it in its own ink.
+ *
+ * Chips that scroll keep one row and scroll sideways inside their own box
+ * (never the page) when they do not fit, each chip at its words' width on
+ * one line (no wrapping, which overrides the wrapping row's
+ * `overflow-wrap: anywhere`). The box is padded by the focus ring's reach and pulled back by
+ * the same amount, so a focused chip's ring is not clipped and the chips
+ * stay where a wrapped row puts them. A focused chip past the edge is
+ * scrolled into view by the browser. The scrollbar stays, thin, so a
+ * pointer without a sideways wheel can still reach the last chip.
+ */
+const ringReach = 'calc(var(--sw-focus-ring-width) + var(--sw-focus-ring-offset))';
+export function cssFilterChipsLayoutClasses() {
+    return `.sw-filter-chip-count-inline {
+  font-variant-numeric: tabular-nums;
+}
+
+.sw-filter-chips-scroll .sw-filter-chips-options {
+  flex-wrap: nowrap;
+  margin: calc(-1 * ${ringReach});
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: ${ringReach};
+  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;
+}`;
+}
+export function filterChipsLayoutClassCatalog() {
+    return ['sw-filter-chip-count-inline', 'sw-filter-chips-scroll'];
+}

package/dist/css/css-filter-chips.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { cssFilterChipsLayoutClasses, filterChipsLayoutClassCatalog, } from './css-filter-chips-layout.js';
 const label = typographyVariants.label;
 const data = typographyVariants.data;
 const caption = typographyVariants.caption;
@@ -123,6 +124,8 @@ export function cssFilterChipsClasses() {
   border-color: var(--sw-color-danger);
 }
 
+${cssFilterChipsLayoutClasses()}
+
 @media (forced-colors: active) {
   .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
   .sw-filter-chips-error { color: Mark; }
@@ -144,5 +147,6 @@ export function filterChipsClassCatalog() {
         'sw-filter-chip-count',
         'sw-filter-chip-quiet',
         'sw-filter-chips-error',
+        ...filterChipsLayoutClassCatalog(),
     ];
 }

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

@@ -0,0 +1,2 @@
+export declare function cssListRowTrailingClasses(): string;
+export declare function listRowTrailingClassCatalog(): string[];

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

@@ -0,0 +1,91 @@
+import { quietFill } from './quiet-fill.js';
+/*
+ * The unread dot: an accent circle a space-2 across after the title's last
+ * word, on its line. It is drawn as a border, so forced colours keep it
+ * (in the text colour); the hidden words beside the title say what it is.
+ * Centred on the words' middle, as an inline mark.
+ */
+function unreadRules() {
+    return `.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; }
+}`;
+}
+/*
+ * The tag (a Badge, "Only in English") sits before the accessory, centred
+ * on the row's height and never shrunk or wrapped.
+ */
+function tagRules() {
+    return `.sw-list-row-tag {
+  align-self: center;
+  display: inline-flex;
+  flex: none;
+  white-space: nowrap;
+}`;
+}
+/*
+ * A row with an action is the row's button or link followed by the
+ * action's control in one list item, the control centred on the row's
+ * height after it and outside its press area. The row ends a space-2
+ * before the control, and the control keeps the row's inline end padding
+ * after it (a space-4 in a panel, none in a plain list). Where :has() is
+ * supported, the hover fill spans the whole item, so the row and its
+ * control read as one line; elsewhere the row keeps its own fill.
+ */
+function actionRules() {
+    return `.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: ${quietFill};
+    }
+
+    .sw-list-item-action > .sw-list-row-pressable:hover:not(.sw-list-row-disabled) {
+      background: transparent;
+    }
+  }
+}`;
+}
+export function cssListRowTrailingClasses() {
+    return `${unreadRules()}
+
+${tagRules()}
+
+${actionRules()}`;
+}
+export function listRowTrailingClassCatalog() {
+    return [
+        'sw-list-row-unread',
+        'sw-list-row-tag',
+        'sw-list-item-action',
+        'sw-list-row-action',
+    ];
+}

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

@@ -1,2 +1,8 @@
+/**
+ * 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 declare const listRowValueTones: readonly ["success", "danger", "muted", "accent", "warning"];
+export type ListRowValueTone = (typeof listRowValueTones)[number];
 export declare function cssListRowClasses(): string;
 export declare function listRowClassCatalog(): string[];

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

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { checkStrokeIn, chevronStrokeIn } from './chevron.js';
-import { tableCellTones as listRowValueTones } from './css-table-ledger.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;
@@ -81,8 +82,22 @@ function rowRules() {
   }
 }`;
 }
+/**
+ * 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 = listRowValueTones
+    const tones = tableCellTones
         .map((tone) => `.sw-list-row-value-${tone} { color: var(--sw-color-${tone}); }`)
         .join('\n');
     return `.sw-list-row-leading {
@@ -132,7 +147,8 @@ function partRules() {
 
 .sw-list-row-value { font-weight: ${label.fontWeight}; }
 
-${tones}`;
+${tones}
+${warningValueRule()}`;
 }
 /*
  * The chevron is the stroke Accordion and the menus share, pointing to the

package/dist/css/css-list.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { cssListRowClasses, listRowClassCatalog } from './css-list-row.js';
+import { cssListRowTrailingClasses, listRowTrailingClassCatalog, } from './css-list-row-trailing.js';
 import { blockEdgeShadeRules, scrollRegionRules } from './css-scroll-region.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
@@ -69,7 +70,9 @@ export function cssListClasses() {
 
 ${boundedRules()}
 
-${cssListRowClasses()}`;
+${cssListRowClasses()}
+
+${cssListRowTrailingClasses()}`;
 }
 export function listClassCatalog() {
     return [
@@ -81,5 +84,6 @@ export function listClassCatalog() {
         'sw-list-group-scroll',
         'sw-list-group-footer',
         ...listRowClassCatalog(),
+        ...listRowTrailingClassCatalog(),
     ];
 }

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

@@ -0,0 +1,2 @@
+export declare function cssMarkdownClasses(): string;
+export declare function markdownClassCatalog(): string[];

package/dist/css/css-markdown.js

@@ -0,0 +1,144 @@
+import { typographyVariants } from '@scalewing/tokens';
+const { body, title, label, caption } = typographyVariants;
+/*
+ * A page of Markdown in body type: blocks a space-4 apart, a heading a
+ * space-6 below what comes before it and a space-2 above what follows.
+ * `#` is the title size, `##` body size and `###` label size, all at the
+ * title's weight. At zero specificity (`:where`), so a consumer's layout
+ * can still space the view itself.
+ */
+function flowRules() {
+    return `.sw-markdown {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: ${body.fontSize}px;
+  letter-spacing: ${body.letterSpacing}px;
+  line-height: ${body.lineHeight}px;
+  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: ${title.fontWeight};
+  scroll-margin-block-start: var(--sw-space-6);
+}
+
+.sw-markdown-heading-1 {
+  font-size: ${title.fontSize}px;
+  letter-spacing: ${title.letterSpacing}px;
+  line-height: ${title.lineHeight}px;
+}
+
+.sw-markdown-heading-2 {
+  font-size: ${body.fontSize}px;
+  line-height: ${body.lineHeight}px;
+}
+
+.sw-markdown-heading-3 {
+  font-size: ${label.fontSize}px;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+}`;
+}
+/*
+ * Lists hang their markers in the page's margin a space-5 in; a tight
+ * list's items are a space-2 apart. A link is the accent, underlined, so
+ * it never depends on colour alone, and thickens to the focus ring's
+ * width while hovered. In the highlighted box, whose tint neither the
+ * accent nor the muted colour clears at 4.5:1 in every palette, links
+ * (still underlined) and photo captions are the text colour.
+ */
+function inlineRules() {
+    return `.sw-markdown-list {
+  padding-inline-start: var(--sw-space-5);
+}
+
+.sw-markdown-list > li + li { margin-block-start: var(--sw-space-2); }
+
+[data-theme] .sw-markdown-link {
+  color: var(--sw-color-accent);
+  text-decoration-line: underline;
+}
+
+[data-theme] .sw-markdown-link:hover {
+  text-decoration-thickness: var(--sw-focus-ring-width);
+}
+
+[data-theme] .sw-markdown-quote :is(.sw-markdown-link, .sw-markdown-caption) {
+  color: var(--sw-color-text);
+}`;
+}
+/*
+ * A block quote is the highlighted box: the accent's subtle tint with an
+ * accent bar at its start, at the small radius. A photo fills the page's
+ * width at the medium radius, its caption muted under it.
+ */
+function boxRules() {
+    return `.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-markdown-figure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  margin-inline: 0;
+}
+
+.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: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+@media (forced-colors: active) {
+  .sw-markdown-quote { border: 1px solid CanvasText; border-inline-start-width: var(--sw-space-1); }
+}`;
+}
+export function cssMarkdownClasses() {
+    return `${flowRules()}
+
+${inlineRules()}
+
+${boxRules()}`;
+}
+export function markdownClassCatalog() {
+    return [
+        'sw-markdown',
+        'sw-markdown-paragraph',
+        'sw-markdown-heading',
+        'sw-markdown-heading-1',
+        'sw-markdown-heading-2',
+        'sw-markdown-heading-3',
+        'sw-markdown-list',
+        'sw-markdown-item-text',
+        'sw-markdown-link',
+        'sw-markdown-quote',
+        'sw-markdown-figure',
+        'sw-markdown-image',
+        'sw-markdown-caption',
+    ];
+}

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-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[];