@scalewing/react 1.44.0 → 1.46.0

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

@@ -0,0 +1,106 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { touchTarget } from './touch-target.js';
+const body = typographyVariants.body;
+/*
+ * Remove beside a chosen file in the full field: the change button and
+ * Remove together at the row's end, a space-2 apart.
+ */
+function actionsRules() {
+    return `.sw-file-field-actions {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+}`;
+}
+/*
+ * A compact field is a text field's height (the md control, 44 px), on
+ * one line. Empty, its zone holds the choose words at its start. Chosen,
+ * the row is the change button (the thumbnail or mark a space-1 from the
+ * frame's start, then the name in the body weight cut to one line) and a
+ * quiet Remove at its end. The button's focus ring sits inside the frame.
+ */
+function compactRules() {
+    return `.sw-file-field-compact.sw-file-field-chosen {
+  flex-wrap: nowrap;
+  gap: var(--sw-space-1);
+  min-height: ${touchTarget};
+  padding-block: 0;
+  padding-inline: 0 var(--sw-space-1);
+}
+
+.sw-file-field-compact .sw-file-field-zone {
+  justify-content: flex-start;
+  padding: var(--sw-space-2) var(--sw-space-4);
+  text-align: start;
+}
+
+.sw-file-field-pick {
+  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: 1 1 auto;
+  font-family: var(--sw-font-sans);
+  gap: var(--sw-space-3);
+  margin: 0;
+  min-height: ${touchTarget};
+  min-width: 0;
+  padding-block: var(--sw-space-1);
+  padding-inline: var(--sw-space-1) var(--sw-space-2);
+  text-align: start;
+}
+
+.sw-file-field-pick:focus { outline: none; }
+
+.sw-file-field-pick: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-pick:disabled { cursor: not-allowed; }
+
+.sw-file-field-pick .sw-file-field-name {
+  font-weight: ${body.fontWeight};
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* With no thumbnail or mark, the name starts where a text field's words do. */
+.sw-file-field-pick > .sw-file-field-name:first-child { margin-inline-start: var(--sw-space-3); }
+
+.sw-file-field-compact .sw-file-field-preview,
+.sw-file-field-compact .sw-file-field-icon { margin-inline-start: var(--sw-space-1); }
+
+.sw-file-field-remove { flex: none; }
+
+@media (forced-colors: active) {
+  .sw-file-field-pick { color: ButtonText; }
+  .sw-file-field-pick:disabled { color: GrayText; }
+}
+
+/* Disabled, the row fades as its Remove does. */
+.sw-file-field-pick:disabled { opacity: var(--sw-disabled-opacity); }`;
+}
+export function cssFileFieldCompactClasses() {
+    return `${actionsRules()}
+
+${compactRules()}`;
+}
+export function fileFieldCompactClassCatalog() {
+    return [
+        'sw-file-field-actions',
+        'sw-file-field-compact',
+        'sw-file-field-pick',
+        'sw-file-field-remove',
+    ];
+}

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

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { disabledControlSurface } from './css-document.js';
+import { cssFileFieldCompactClasses, fileFieldCompactClassCatalog, } from './css-file-field-compact.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
@@ -172,6 +173,8 @@ ${zoneRules()}
 
 ${fileRules()}
 
+${cssFileFieldCompactClasses()}
+
 ${forcedColorRules()}`;
 }
 export function fileFieldClassCatalog() {
@@ -190,5 +193,6 @@ export function fileFieldClassCatalog() {
         'sw-file-field-file',
         'sw-file-field-name',
         'sw-file-field-detail',
+        ...fileFieldCompactClassCatalog(),
     ];
 }

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

@@ -0,0 +1,6 @@
+/** How many tiles share a row from `md` up; one a row below it. */
+export declare const listTileColumnCounts: readonly [2, 3, 4];
+export type ListGroupTileColumns = (typeof listTileColumnCounts)[number];
+export declare function listTileColumnsClass(columns: ListGroupTileColumns): string;
+export declare function cssListTilesClasses(): string;
+export declare function listTilesClassCatalog(): string[];

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

@@ -0,0 +1,50 @@
+import { breakpointQuery } from './breakpoints.js';
+/** How many tiles share a row from `md` up; one a row below it. */
+export const listTileColumnCounts = [2, 3, 4];
+export function listTileColumnsClass(columns) {
+    return `sw-list-group-tiles-${columns}`;
+}
+const tiles = '.sw-list-group-tiles';
+/*
+ * A tiled ListGroup is still one list (`sw-list`), its rows laid out as
+ * tiles: equal columns a space-3 apart from `md` up, one column below it,
+ * each row its own bordered panel on the surface (the panel variant's
+ * look, per row), with no hairlines between them. A row's press fill and
+ * its inset focus ring stay inside its tile.
+ *
+ * Generated after the list's hairline rules (css-list.ts), whose
+ * `.sw-list > .sw-list-item + .sw-list-item` has the same specificity as
+ * the tile rule: being later is what lets a tile's own border replace the
+ * hairline. `list-group-tiles.test.tsx` holds that order.
+ */
+export function cssListTilesClasses() {
+    const columns = listTileColumnCounts.map((count) => `.${listTileColumnsClass(count)} > .sw-list { grid-template-columns: repeat(${count}, minmax(0, 1fr)); }`);
+    return `${tiles} > .sw-list {
+  display: grid;
+  gap: var(--sw-space-3);
+}
+
+${columns.join('\n')}
+
+${tiles} > .sw-list > .sw-list-item {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  min-width: 0;
+  overflow: clip;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  ${tiles} > .sw-list { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (forced-colors: active) {
+  ${tiles} > .sw-list > .sw-list-item { border-color: CanvasText; }
+}`;
+}
+export function listTilesClassCatalog() {
+    return [
+        'sw-list-group-tiles',
+        ...listTileColumnCounts.map((count) => listTileColumnsClass(count)),
+    ];
+}

package/dist/css/css-list.js

@@ -2,6 +2,7 @@ import { typographyVariants } from '@scalewing/tokens';
 import { cssListRowClasses, listRowClassCatalog } from './css-list-row.js';
 import { cssListRowTrailingClasses, listRowTrailingClassCatalog, } from './css-list-row-trailing.js';
 import { cssListRowTruncateClasses, listRowTruncateClassCatalog, } from './css-list-row-truncate.js';
+import { cssListTilesClasses, listTilesClassCatalog, } from './css-list-tiles.js';
 import { blockEdgeShadeRules, scrollRegionRules } from './css-scroll-region.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
@@ -75,7 +76,9 @@ ${cssListRowClasses()}
 
 ${cssListRowTrailingClasses()}
 
-${cssListRowTruncateClasses()}`;
+${cssListRowTruncateClasses()}
+
+${cssListTilesClasses()}`;
 }
 export function listClassCatalog() {
     return [
@@ -86,6 +89,7 @@ export function listClassCatalog() {
         'sw-list-group-plain',
         'sw-list-group-scroll',
         'sw-list-group-footer',
+        ...listTilesClassCatalog(),
         ...listRowClassCatalog(),
         ...listRowTrailingClassCatalog(),
         ...listRowTruncateClassCatalog(),

package/dist/css/css-steps-title-detail.d.ts

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

package/dist/css/css-steps-title-detail.js

@@ -0,0 +1,36 @@
+import { typographyVariants } from '@scalewing/tokens';
+const body = typographyVariants.body;
+const label = typographyVariants.label;
+/*
+ * An open step's muted words after its title ("Optional", "Wetlands done ·
+ * Woodlands empty"): the title and the words share one line that wraps, the
+ * words on the title's baseline a space-2 after it, or on a line of their
+ * own under the title when they do not fit beside it. The line gives way
+ * to a done step's summary and Edit in an open list, as the title does.
+ * The words are the label size at the body's weight in the muted colour,
+ * a skipped step's reason's colour beside its title; a long word breaks
+ * rather than pass the panel.
+ */
+export function cssStepsTitleDetailClasses() {
+    return `.sw-steps-title-line {
+  align-items: baseline;
+  column-gap: var(--sw-space-2);
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.sw-steps-title-detail {
+  color: var(--sw-color-muted);
+  font-size: ${label.fontSize}px;
+  font-weight: ${body.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}`;
+}
+export function stepsTitleDetailClassCatalog() {
+    return ['sw-steps-title-line', 'sw-steps-title-detail'];
+}

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

@@ -1,7 +1,7 @@
 /**
  * The one-page vertical stepper: an ordered list of glass panels a small
- * gap apart. Each has a header line (marker, title, and on a done step its
- * summary and Edit) and, while open (current or error), a body indented to
+ * gap apart. Each has a header line (marker, title, an open step's muted
+ * words beside it, and on a done step its summary and Edit) and, while open (current or error), a body indented to
  * the title. An open step's title is the title variant; a folded one's is
  * body size at label weight, muted ahead of the form or skipped. In an
  * open list (`sw-steps-open`) every step is open: each panel takes the open

package/dist/css/css-steps.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { checkStrokeIn } from './chevron.js';
+import { cssStepsTitleDetailClasses, stepsTitleDetailClassCatalog, } from './css-steps-title-detail.js';
 const body = typographyVariants.body;
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
@@ -69,8 +70,8 @@ function forcedColorRules() {
 }
 /**
  * The one-page vertical stepper: an ordered list of glass panels a small
- * gap apart. Each has a header line (marker, title, and on a done step its
- * summary and Edit) and, while open (current or error), a body indented to
+ * gap apart. Each has a header line (marker, title, an open step's muted
+ * words beside it, and on a done step its summary and Edit) and, while open (current or error), a body indented to
  * the title. An open step's title is the title variant; a folded one's is
  * body size at label weight, muted ahead of the form or skipped. In an
  * open list (`sw-steps-open`) every step is open: each panel takes the open
@@ -190,6 +191,8 @@ export function cssStepsClasses() {
   min-width: 0;
 }
 
+${cssStepsTitleDetailClasses()}
+
 ${markerRules()}
 
 ${connectorRules()}
@@ -214,5 +217,6 @@ export function stepsClassCatalog() {
         'sw-steps-edit',
         'sw-steps-body',
         'sw-steps-region',
+        ...stepsTitleDetailClassCatalog(),
     ];
 }

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { ListGroup, type ListGroupProps } from './components/ListGroup.js';
 export { inspectMarkdown, markdownOmissionKinds, MarkdownView, type MarkdownHeading, type MarkdownInspection, type MarkdownImage, type MarkdownImageResolver, type MarkdownOmission, type MarkdownOmissionCounts, type MarkdownOmissionKind, type MarkdownOptions, type MarkdownViewProps, } from './components/MarkdownView.js';
 export { ListRow, type ListRowProps } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, type ListGroupMaxHeight, type ListGroupVariant, type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone, } from './list-options.js';
+export { listTileColumnCounts, type ListGroupTileColumns, } from './css/css-list-tiles.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { GlyphTile, glyphTileSizes, type GlyphTileHue, type GlyphTileProps, type GlyphTileSize, } from './components/GlyphTile.js';
@@ -29,7 +30,8 @@ export { ColumnChart, type ColumnChartCallout, type ColumnChartLine, type Column
 export { LineChart, type LineChartCurve, type LineChartMarker, type LineChartPeriod, type LineChartPoint, type LineChartProps, lineChartCurves, } from './components/LineChart.js';
 export { DataBar, type DataBarProps, type DataBarTone, dataBarTones, } from './components/DataBar.js';
 export { Pagination, type PaginationLabels, type PaginationProps, } from './components/Pagination.js';
-export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
+export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonWidth, } from './components/Button.js';
+export { buttonWidths } from './css/css-button-width.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, type BoxBorder, type BoxElement, type BoxLink, type BoxProps, } from './components/Box.js';
 export { boxLinkAppearances } from './css/css-box-link.js';

package/dist/index.js

@@ -12,6 +12,7 @@ export { ListGroup } from './components/ListGroup.js';
 export { inspectMarkdown, markdownOmissionKinds, MarkdownView, } from './components/MarkdownView.js';
 export { ListRow } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, } from './list-options.js';
+export { listTileColumnCounts, } from './css/css-list-tiles.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
 export { GlyphTile, glyphTileSizes, } from './components/GlyphTile.js';
@@ -29,6 +30,7 @@ export { LineChart, lineChartCurves, } from './components/LineChart.js';
 export { DataBar, dataBarTones, } from './components/DataBar.js';
 export { Pagination, } from './components/Pagination.js';
 export { Button, } from './components/Button.js';
+export { buttonWidths } from './css/css-button-width.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, } from './components/Box.js';
 export { boxLinkAppearances } from './css/css-box-link.js';

package/dist/list-options.d.ts

@@ -4,9 +4,11 @@ import { listRowValueTones, type ListRowValueTone } from './css/css-list-row.js'
 /**
  * `panel` (the default) is one bordered panel on the surface; `plain`
  * draws no panel and a hairline above the first row too, for rows inside
- * a surface that already has one, such as a Card.
+ * a surface that already has one, such as a Card; `tiles` lays the rows
+ * out as tiles, each its own panel, in equal columns (one a row below
+ * `md`).
  */
-export declare const listGroupVariants: readonly ["panel", "plain"];
+export declare const listGroupVariants: readonly ["panel", "plain", "tiles"];
 export type ListGroupVariant = (typeof listGroupVariants)[number];
 /**
  * A list's bounded height, counted in rows: as tall as `rows` rows of a
@@ -30,17 +32,23 @@ export type ListGroupInput = {
     labelledBy: string | undefined;
     variant: unknown;
     maxHeight: ListGroupMaxHeight | undefined;
+    tileColumns: unknown;
+    hasFooter: boolean;
 };
 /**
  * Fails closed on a ListGroup it cannot draw: an unknown variant, a
- * `maxHeight` that is not a whole row count from 1, or a bounded list with
- * no name (its scroll region is a keyboard stop and must say what it holds).
+ * `maxHeight` that is not a whole row count from 1, a bounded list with
+ * no name (its scroll region is a keyboard stop and must say what it
+ * holds), `tileColumns` other than 2, 3 or 4 or on a list that is not
+ * tiles, or tiles with `maxHeight` or a `footer` (tiles neither scroll as
+ * rows nor add up to a total).
  */
-export declare function assertListGroup({ label, labelledBy, variant, maxHeight, }: ListGroupInput): void;
+export declare function assertListGroup({ label, labelledBy, variant, maxHeight, tileColumns, hasFooter, }: ListGroupInput): void;
 /** The row count the generated `sw-list-group-scroll` height reads. */
 export declare function listMaxHeightStyle(maxHeight: ListGroupMaxHeight): CSSProperties;
 export type ListRowInput = {
     title: string;
+    titleLang: string | undefined;
     tone: unknown;
     titleAppearance: unknown;
     valueTone: unknown;
@@ -54,12 +62,12 @@ export type ListRowInput = {
     unreadLabel: string | undefined;
 };
 /**
- * Fails closed on a ListRow it cannot draw: an empty title or value, an
- * unknown tone, title appearance, value tone, badge tone or accessory, a
- * `valueDetail`, `valueTone` or `valueBadge` with no value, a value both
- * toned and a badge, `selected` on a row that is not a button or link
- * (its check would be a state nothing can read), or an unread row with no
- * words for its dot (a colour alone says nothing).
+ * Fails closed on a ListRow it cannot draw: an empty title, titleLang or
+ * value, an unknown tone, title appearance, value tone, badge tone or
+ * accessory, a `valueDetail`, `valueTone` or `valueBadge` with no value, a
+ * value both toned and a badge, `selected` on a row that is not a button or
+ * link (its check would be a state nothing can read), or an unread row with
+ * no words for its dot (a colour alone says nothing).
  */
 export declare function assertListRow(input: ListRowInput): void;
 /**

package/dist/list-options.js

@@ -1,12 +1,15 @@
 import { badgeTones } from './css/css-data.js';
 import { listRowValueTones, } from './css/css-list-row.js';
+import { listTileColumnCounts } from './css/css-list-tiles.js';
 import { isOneOf } from './is-one-of.js';
 /**
  * `panel` (the default) is one bordered panel on the surface; `plain`
  * draws no panel and a hairline above the first row too, for rows inside
- * a surface that already has one, such as a Card.
+ * a surface that already has one, such as a Card; `tiles` lays the rows
+ * out as tiles, each its own panel, in equal columns (one a row below
+ * `md`).
  */
-export const listGroupVariants = ['panel', 'plain'];
+export const listGroupVariants = ['panel', 'plain', 'tiles'];
 /** `danger` draws the title in the danger colour, for a row that ends something. */
 export const listRowTones = ['default', 'danger'];
 /** `strong` (the default) sets the title at the label weight; `plain` at the body's. */
@@ -17,12 +20,23 @@ function isBlank(text) {
 }
 /**
  * Fails closed on a ListGroup it cannot draw: an unknown variant, a
- * `maxHeight` that is not a whole row count from 1, or a bounded list with
- * no name (its scroll region is a keyboard stop and must say what it holds).
+ * `maxHeight` that is not a whole row count from 1, a bounded list with
+ * no name (its scroll region is a keyboard stop and must say what it
+ * holds), `tileColumns` other than 2, 3 or 4 or on a list that is not
+ * tiles, or tiles with `maxHeight` or a `footer` (tiles neither scroll as
+ * rows nor add up to a total).
  */
-export function assertListGroup({ label, labelledBy, variant, maxHeight, }) {
+export function assertListGroup({ label, labelledBy, variant, maxHeight, tileColumns, hasFooter, }) {
     if (!isOneOf(listGroupVariants, variant))
         throw new RangeError(`Unknown ListGroup variant: ${String(variant)}`);
+    if (tileColumns !== undefined) {
+        if (variant !== 'tiles')
+            throw new RangeError('ListGroup tileColumns needs variant="tiles"');
+        if (!listTileColumnCounts.includes(tileColumns))
+            throw new RangeError(`ListGroup tileColumns must be 2, 3 or 4: ${String(tileColumns)}`);
+    }
+    if (variant === 'tiles' && (maxHeight !== undefined || hasFooter))
+        throw new RangeError('A ListGroup of tiles takes no maxHeight or footer');
     if (maxHeight === undefined)
         return;
     const rows = typeof maxHeight === 'object' && maxHeight !== null
@@ -38,16 +52,18 @@ export function listMaxHeightStyle(maxHeight) {
     return { '--sw-list-max-rows': maxHeight.rows };
 }
 /**
- * Fails closed on a ListRow it cannot draw: an empty title or value, an
- * unknown tone, title appearance, value tone, badge tone or accessory, a
- * `valueDetail`, `valueTone` or `valueBadge` with no value, a value both
- * toned and a badge, `selected` on a row that is not a button or link
- * (its check would be a state nothing can read), or an unread row with no
- * words for its dot (a colour alone says nothing).
+ * Fails closed on a ListRow it cannot draw: an empty title, titleLang or
+ * value, an unknown tone, title appearance, value tone, badge tone or
+ * accessory, a `valueDetail`, `valueTone` or `valueBadge` with no value, a
+ * value both toned and a badge, `selected` on a row that is not a button or
+ * link (its check would be a state nothing can read), or an unread row with
+ * no words for its dot (a colour alone says nothing).
  */
 export function assertListRow(input) {
     if (isBlank(input.title))
         throw new RangeError('ListRow title must be non-empty text');
+    if (input.titleLang !== undefined && isBlank(input.titleLang))
+        throw new RangeError('ListRow titleLang must be a non-empty language tag');
     if (!isOneOf(listRowTones, input.tone))
         throw new RangeError(`Unknown ListRow tone: ${String(input.tone)}`);
     if (!isOneOf(listRowTitleAppearances, input.titleAppearance))

package/dist/styles.css

@@ -967,6 +967,19 @@ body {
 .sw-button-xs { min-height: 28px; padding-inline: 10px; }
 .sw-button-sm { min-height: 32px; padding-inline: 12px; }
 .sw-button-md { min-height: 44px; padding-inline: 16px; }
+.sw-button-full {
+  width: 100%;
+}
+
+.sw-inline > .sw-button-full {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.sw-inline.sw-wrap > .sw-button-full {
+  flex: 1 1 auto;
+  width: auto;
+}
 .sw-button-group { align-items: center; display: flex; flex-wrap: wrap; gap: var(--sw-space-2); min-width: 0; }
 .sw-button-group-start { justify-content: flex-start; }
 .sw-button-group-end { justify-content: flex-end; }
@@ -3018,6 +3031,31 @@ body {
   white-space: nowrap;
 }
 
+.sw-list-group-tiles > .sw-list {
+  display: grid;
+  gap: var(--sw-space-3);
+}
+
+.sw-list-group-tiles-2 > .sw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.sw-list-group-tiles-3 > .sw-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.sw-list-group-tiles-4 > .sw-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+.sw-list-group-tiles > .sw-list > .sw-list-item {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  min-width: 0;
+  overflow: clip;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-list-group-tiles > .sw-list { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (forced-colors: active) {
+  .sw-list-group-tiles > .sw-list > .sw-list-item { border-color: CanvasText; }
+}
+
 .sw-file-field-frame {
   border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-md);
@@ -3147,6 +3185,83 @@ body {
   margin-inline-start: auto;
 }
 
+.sw-file-field-actions {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+}
+
+.sw-file-field-compact.sw-file-field-chosen {
+  flex-wrap: nowrap;
+  gap: var(--sw-space-1);
+  min-height: var(--sw-control-md-min-height);
+  padding-block: 0;
+  padding-inline: 0 var(--sw-space-1);
+}
+
+.sw-file-field-compact .sw-file-field-zone {
+  justify-content: flex-start;
+  padding: var(--sw-space-2) var(--sw-space-4);
+  text-align: start;
+}
+
+.sw-file-field-pick {
+  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: 1 1 auto;
+  font-family: var(--sw-font-sans);
+  gap: var(--sw-space-3);
+  margin: 0;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  padding-block: var(--sw-space-1);
+  padding-inline: var(--sw-space-1) var(--sw-space-2);
+  text-align: start;
+}
+
+.sw-file-field-pick:focus { outline: none; }
+
+.sw-file-field-pick: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-pick:disabled { cursor: not-allowed; }
+
+.sw-file-field-pick .sw-file-field-name {
+  font-weight: 400;
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* With no thumbnail or mark, the name starts where a text field's words do. */
+.sw-file-field-pick > .sw-file-field-name:first-child { margin-inline-start: var(--sw-space-3); }
+
+.sw-file-field-compact .sw-file-field-preview,
+.sw-file-field-compact .sw-file-field-icon { margin-inline-start: var(--sw-space-1); }
+
+.sw-file-field-remove { flex: none; }
+
+@media (forced-colors: active) {
+  .sw-file-field-pick { color: ButtonText; }
+  .sw-file-field-pick:disabled { color: GrayText; }
+}
+
+/* Disabled, the row fades as its Remove does. */
+.sw-file-field-pick:disabled { opacity: var(--sw-disabled-opacity); }
+
 @media (forced-colors: active) {
   .sw-file-field-frame { border-color: CanvasText; }
   .sw-field-invalid .sw-file-field-frame { border-color: Mark; }
@@ -7303,6 +7418,25 @@ body {
   min-width: 0;
 }
 
+.sw-steps-title-line {
+  align-items: baseline;
+  column-gap: var(--sw-space-2);
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.sw-steps-title-detail {
+  color: var(--sw-color-muted);
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .sw-steps-item-upcoming .sw-steps-marker,
 .sw-steps-item-skipped .sw-steps-marker {
   box-shadow: inset 0 0 0 2px var(--sw-color-border);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.44.0",
+  "version": "1.46.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",