@scalewing/react 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @scalewing/react
 
+## 1.1.0
+
+### Minor Changes
+
+- f45ef5d: Generate compact `display` and `heading` sizes below the `md` breakpoint from the new tokens, so page titles and panel figures stop dominating a phone screen. No product change needed.
+- 01e7d0e: Add `align` (`start`, `center`, `end`) to `Text`, backed by generated `sw-text-align-*` classes, and keep `DenominationGrid` tiles three per row below the `md` breakpoint.
+- f00b3cc: Add `DenominationGrid`, a read-only count-per-unit display across a fixed column set. The `strip` layout is a captioned table with a toned row label (icon slot), muted zero cells, signed delta cells toned by sign, and an optional consumer-formatted total that moves under the row label below the `md` breakpoint; the `tiles` layout stacks the column label, count, and an optional consumer-formatted subtotal per column. Generated `sw-denomination-*` classes; invalid columns, rows, or cells throw.
+- cc9aa28: Add an optional `count` to `FilterChipOption`. It renders as a tabular chicklet after the chip label (generated `sw-filter-chip-count`), joins the option's accessible name, and a zero count quiets the chip (`sw-filter-chip-quiet`) until it is selected. Negative or fractional counts throw.
+- f7f3bf9: Add `Grid`, a Box-based layout that places children in one to four equal-width columns with a token gap step and an optional smaller column count below the `md` breakpoint (`columnsBelow={{ md: 2 }}`), backed by generated `sw-grid-*` classes.
+
+### Patch Changes
+
+- Updated dependencies [f45ef5d]
+  - @scalewing/tokens@1.1.0
+
 ## 1.0.0
 
 ### Major Changes

package/README.md

@@ -18,7 +18,9 @@ import {
   Progress,
   Tooltip,
   Separator,
+  DenominationGrid,
   FilterChips,
+  Grid,
   DateField,
   Field,
   Select,
@@ -62,7 +64,15 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 
 `Separator` divides sections with a token-colored line. It is horizontal by default; use `orientation="vertical"` in a flex row. Set `decorative` when the line only supports layout so assistive technology ignores it.
 
-`FilterChips` presents a long, wrapping single-choice filter set. Provide a localized group `label`, controlled `value`, `onChange`, and options with stable values and localized labels. Counts belong in those labels. Native radios provide arrow and Space navigation; disabled options are skipped.
+`Text` steps `display` and `heading` down to the compact token sizes below the `md` breakpoint; consumers do not size type per viewport.
+
+`Text` takes an optional `align` (`start`, `center`, `end`) mapped to generated `sw-text-align-*` classes, for a heading that must stay centered when it wraps.
+
+`Grid` places children in one to four equal-width columns with a token `gap` step. `columnsBelow={{ md: 2 }}` drops to fewer columns below the `md` breakpoint so tiles and stat cards stay readable on a phone. It accepts every `Box` prop.
+
+`DenominationGrid` shows integer counts per unit across a fixed set of columns. The `strip` layout is a captioned table: each row has a toned label with an icon slot, muted zero cells, optional signed deltas toned by sign, and an optional consumer-formatted `total` that moves under the label on a phone. The `tiles` layout stacks the column label, the count, and an optional `subtotal` string per column. The primitive does no arithmetic and no currency formatting; tones reuse the Badge vocabulary. Invalid columns, rows, or cells throw.
+
+`FilterChips` presents a long, wrapping single-choice filter set. Provide a localized group `label`, controlled `value`, `onChange`, and options with stable values and localized labels. An optional non-negative integer `count` renders as a tabular chicklet after the label and is part of the option's accessible name; a zero count quiets the chip until it is selected. Native radios provide arrow and Space navigation; disabled options are skipped.
 
 `DateField` is a controlled native date input. Supply `value`, `min`, and `max` as valid `YYYY-MM-DD` dates; use an empty `value` for a blank field. Its callback returns a date-only string or an empty string, without timezone conversion. Invalid serialized dates and inverted bounds throw; a value outside the bounds remains visible with invalid styling. For a blank required field, supply `error` when form validation runs to show the message and invalid styling. The browser chooses the calendar and localized display.
 

package/dist/components/DenominationGrid.d.ts

@@ -0,0 +1,3 @@
+import { type DenominationGridProps } from './denomination-grid/types.js';
+export type { DenominationGridColumn, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridTone, } from './denomination-grid/types.js';
+export declare function DenominationGrid({ label, columns, rows, layout, subtotal, zeroLabel, }: DenominationGridProps): import("react").JSX.Element;

package/dist/components/DenominationGrid.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DenominationStrip } from './denomination-grid/DenominationStrip.js';
+import { DenominationTiles } from './denomination-grid/DenominationTiles.js';
+import { assertDenominationGrid } from './denomination-grid/validate.js';
+export function DenominationGrid({ label, columns, rows, layout = 'strip', subtotal, zeroLabel = '—', }) {
+    assertDenominationGrid(label, columns, rows);
+    if (!zeroLabel)
+        throw new RangeError('zeroLabel must not be empty');
+    if (layout === 'tiles')
+        return (_jsx(DenominationTiles, { columns: columns, label: label, rows: rows, subtotal: subtotal, zeroLabel: zeroLabel }));
+    return (_jsx(DenominationStrip, { columns: columns, label: label, rows: rows, zeroLabel: zeroLabel }));
+}

package/dist/components/FilterChips.d.ts

@@ -1,6 +1,7 @@
 export type FilterChipOption = {
     value: string;
     label: string;
+    count?: number;
     disabled?: boolean;
 };
 export type FilterChipsProps = {

package/dist/components/FilterChips.js

@@ -1,6 +1,10 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
+import { cx } from '../class-names.js';
+function isCount(count) {
+    return count === undefined || (Number.isInteger(count) && count >= 0);
+}
 export function FilterChips({ label, value, onChange, options, }) {
     const name = useId();
     const values = options.map((option) => option.value);
@@ -13,8 +17,10 @@ export function FilterChips({ label, value, onChange, options, }) {
         throw new RangeError('options must have unique values');
     if (!values.includes(value))
         throw new RangeError('value must match an option');
-    return (_jsxs("fieldset", { className: "sw-filter-chips", children: [_jsx("legend", { className: "sw-filter-chips-legend", children: label }), _jsx("span", { className: "sw-filter-chips-options", children: options.map((option) => (_jsxs("label", { className: "sw-filter-chip", children: [_jsx("input", { checked: option.value === value, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
+    if (options.some((option) => !isCount(option.count)))
+        throw new RangeError('count must be a non-negative integer');
+    return (_jsxs("fieldset", { className: "sw-filter-chips", children: [_jsx("legend", { className: "sw-filter-chips-legend", children: label }), _jsx("span", { className: "sw-filter-chips-options", children: options.map((option) => (_jsxs("label", { className: cx('sw-filter-chip', option.count === 0 && 'sw-filter-chip-quiet'), children: [_jsx("input", { checked: option.value === value, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
                                 if (event.currentTarget.checked && !option.disabled)
                                     onChange(option.value);
-                            }, type: "radio", value: option.value }), _jsx("span", { className: "sw-filter-chip-face", children: option.label })] }, option.value))) })] }));
+                            }, type: "radio", value: option.value }), _jsxs("span", { className: "sw-filter-chip-face", children: [option.label, option.count === undefined ? null : (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-filter-chip-count", children: option.count })] }))] })] }, option.value))) })] }));
 }

package/dist/components/Grid.d.ts

@@ -0,0 +1,11 @@
+import { type SpacingStep } from '@scalewing/tokens';
+import { type Breakpoint } from '../css/breakpoints.js';
+import { type GridColumns } from '../css/css-grid.js';
+import { type BoxProps } from './Box.js';
+export type { GridColumns };
+export type GridProps = BoxProps & {
+    columns?: GridColumns;
+    columnsBelow?: Partial<Record<Breakpoint, GridColumns>>;
+    gap?: SpacingStep;
+};
+export declare function Grid({ className, columns, columnsBelow, gap, ...rest }: GridProps): import("react").JSX.Element;

package/dist/components/Grid.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { breakpoints } from '../css/breakpoints.js';
+import { gridColumnCounts, gridColumnsBelowClass, gridColumnsClass, } from '../css/css-grid.js';
+import { spacingClass } from '../css/spacing-classes.js';
+import { Box } from './Box.js';
+function assertColumns(columns) {
+    if (!gridColumnCounts.includes(columns))
+        throw new RangeError(`columns must be one of ${gridColumnCounts.join(', ')}`);
+}
+export function Grid({ className, columns = 1, columnsBelow, gap = 0, ...rest }) {
+    assertColumns(columns);
+    const belowClasses = breakpoints.flatMap((breakpoint) => {
+        const count = columnsBelow?.[breakpoint];
+        if (count === undefined)
+            return [];
+        assertColumns(count);
+        return [gridColumnsBelowClass(breakpoint, count)];
+    });
+    return (_jsx(Box, { className: cx('sw-grid', gridColumnsClass(columns), ...belowClasses, spacingClass('gap', 'all', gap), className), ...rest }));
+}

package/dist/components/Text.d.ts

@@ -1,13 +1,16 @@
 import { type SemanticColorKey, type TypographyVariant } from '@scalewing/tokens';
 import { type HTMLAttributes, type LabelHTMLAttributes } from 'react';
 export type TextElement = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'label' | 'strong';
+export type TextAlign = 'start' | 'center' | 'end';
 export type TextProps = HTMLAttributes<HTMLElement> & Pick<LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'> & {
+    align?: TextAlign;
     as?: TextElement;
     color?: SemanticColorKey;
     truncate?: boolean;
     variant?: TypographyVariant;
 };
 export declare const Text: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & Pick<LabelHTMLAttributes<HTMLLabelElement>, "htmlFor"> & {
+    align?: TextAlign;
     as?: TextElement;
     color?: SemanticColorKey;
     truncate?: boolean;

package/dist/components/Text.js

@@ -10,7 +10,7 @@ const defaultElement = {
     label: 'span',
     title: 'h3',
 };
-export const Text = forwardRef(function Text({ as, className, color = 'text', style, truncate = false, variant = 'body', ...rest }, ref) {
+export const Text = forwardRef(function Text({ align, as, className, color = 'text', style, truncate = false, variant = 'body', ...rest }, ref) {
     const Component = as ?? defaultElement[variant];
-    return (_jsx(Component, { ref: ref, className: cx(`sw-text-${variant}`, truncate && 'sw-truncate', className), style: { color: `var(--sw-color-${color})`, ...style }, ...rest }));
+    return (_jsx(Component, { ref: ref, className: cx(`sw-text-${variant}`, align && `sw-text-align-${align}`, truncate && 'sw-truncate', className), style: { color: `var(--sw-color-${color})`, ...style }, ...rest }));
 });

package/dist/components/denomination-grid/DenominationStrip.d.ts

@@ -0,0 +1,4 @@
+import { type DenominationGridProps } from './types.js';
+type StripProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>>;
+export declare function DenominationStrip({ label, columns, rows, zeroLabel, }: StripProps): import("react").JSX.Element;
+export {};

package/dist/components/denomination-grid/DenominationStrip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { denominationCellView } from '../../denomination-cells.js';
+export function DenominationStrip({ label, columns, rows, zeroLabel, }) {
+    const hasTotals = rows.some((row) => row.total !== undefined);
+    return (_jsxs("table", { className: "sw-denomination-grid sw-denomination-strip", children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: column.label }, column.key))), hasTotals ? _jsx("td", { className: "sw-denomination-corner" }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed'), children: [_jsxs("th", { className: "sw-denomination-label", scope: "row", children: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }), columns.map((column, index) => {
+                            const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
+                            return (_jsx("td", { className: `sw-denomination-cell sw-denomination-cell-${view.state}`, children: view.text }, column.key));
+                        }), hasTotals ? (_jsx("td", { className: "sw-denomination-total", children: row.total ?? '' })) : null] }, row.id))) })] }));
+}

package/dist/components/denomination-grid/DenominationTiles.d.ts

@@ -0,0 +1,4 @@
+import { type DenominationGridProps } from './types.js';
+type TilesProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'subtotal'>;
+export declare function DenominationTiles({ label, columns, rows, subtotal, zeroLabel, }: TilesProps): import("react").JSX.Element;
+export {};

package/dist/components/denomination-grid/DenominationTiles.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { denominationCellView } from '../../denomination-cells.js';
+export function DenominationTiles({ label, columns, rows, subtotal, zeroLabel, }) {
+    return (_jsx("div", { "aria-label": label, className: "sw-denomination-grid sw-denomination-tiles", role: "group", children: rows.map((row) => (_jsxs("section", { "aria-label": row.label, className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`), children: [rows.length > 1 || row.icon ? (_jsxs("span", { className: "sw-denomination-label", children: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label }), row.total !== undefined ? (_jsx("span", { className: "sw-denomination-total", children: row.total })) : null] })) : null, _jsx("ul", { className: "sw-denomination-tile-list", children: columns.map((column, index) => {
+                        const cell = row.cells[index] ?? null;
+                        const view = denominationCellView(cell, row.signed ?? false, zeroLabel);
+                        const amount = subtotal && cell !== null && cell !== 0
+                            ? subtotal(cell, column)
+                            : null;
+                        return (_jsxs("li", { className: "sw-denomination-tile", children: [_jsx("span", { className: "sw-denomination-head", children: column.label }), _jsx("span", { className: `sw-denomination-cell sw-denomination-cell-${view.state}`, children: view.text }), subtotal ? (_jsx("span", { className: "sw-denomination-subtotal", children: amount ?? zeroLabel })) : null] }, column.key));
+                    }) })] }, row.id))) }));
+}

package/dist/components/denomination-grid/types.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import { type BadgeTone } from '../../css/css-data.js';
+export type DenominationGridTone = BadgeTone;
+export type DenominationGridLayout = 'strip' | 'tiles';
+export type DenominationGridColumn = {
+    key: string;
+    label: string;
+};
+export type DenominationGridRow = {
+    id: string;
+    label: string;
+    cells: readonly (number | null)[];
+    icon?: ReactNode;
+    tone?: DenominationGridTone;
+    signed?: boolean;
+    total?: string;
+};
+export type DenominationGridProps = {
+    label: string;
+    columns: readonly DenominationGridColumn[];
+    rows: readonly DenominationGridRow[];
+    layout?: DenominationGridLayout;
+    subtotal?: (count: number, column: DenominationGridColumn) => string;
+    zeroLabel?: string;
+};

package/dist/components/denomination-grid/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/denomination-grid/validate.d.ts

@@ -0,0 +1,2 @@
+import { type DenominationGridColumn, type DenominationGridRow } from './types.js';
+export declare function assertDenominationGrid(label: string, columns: readonly DenominationGridColumn[], rows: readonly DenominationGridRow[]): void;

package/dist/components/denomination-grid/validate.js

@@ -0,0 +1,18 @@
+import { isDenominationCount } from '../../denomination-cells.js';
+export function assertDenominationGrid(label, columns, rows) {
+    if (!label.trim())
+        throw new RangeError('label must not be empty');
+    if (columns.length === 0 ||
+        columns.some((column) => !column.key.trim() || !column.label.trim()))
+        throw new RangeError('columns must have nonempty keys and labels');
+    if (new Set(columns.map((column) => column.key)).size !== columns.length)
+        throw new RangeError('columns must have unique keys');
+    if (rows.some((row) => !row.id.trim() || !row.label.trim()))
+        throw new RangeError('rows must have nonempty ids and labels');
+    if (new Set(rows.map((row) => row.id)).size !== rows.length)
+        throw new RangeError('rows must have unique ids');
+    if (rows.some((row) => row.cells.length !== columns.length))
+        throw new RangeError('each row needs one cell per column');
+    if (rows.some((row) => row.cells.some((cell) => !isDenominationCount(cell))))
+        throw new RangeError('cells must be integers or null');
+}

package/dist/css/css-components.js

@@ -1,4 +1,5 @@
-import { typographyVariants } from '@scalewing/tokens';
+import { compactTypographyVariants, typographyVariants, } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
 import { cssActionMenuClasses } from './css-action-menu.js';
 import { cssAccordionClasses } from './css-accordion.js';
 import { cssButtonClasses } from './css-button.js';
@@ -18,6 +19,8 @@ import { cssTooltipClasses } from './css-tooltip.js';
 import { cssSeparatorClasses } from './css-separator.js';
 import { cssResponsiveClasses } from './css-responsive.js';
 import { cssFilterChipsClasses } from './css-filter-chips.js';
+import { cssGridClasses } from './css-grid.js';
+import { cssDenominationGridClasses } from './css-denomination-grid.js';
 import { cssFieldClasses } from './css-field.js';
 import { cssToastClasses } from './css-toast.js';
 function textVariantRules() {
@@ -30,6 +33,12 @@ function textVariantRules() {
     })
         .join('\n');
 }
+function compactTextVariantRules() {
+    const rules = Object.entries(compactTypographyVariants)
+        .map(([name, variant]) => `  .sw-text-${name} { font-size: ${variant.fontSize}px; line-height: ${variant.lineHeight}px; letter-spacing: ${variant.letterSpacing}px; }`)
+        .join('\n');
+    return `@media ${breakpointQuery('below', 'md')} {\n${rules}\n}`;
+}
 export function cssComponentClasses() {
     return `.sw-card {
   border-radius: var(--sw-radius-lg);
@@ -74,6 +83,10 @@ export function cssComponentClasses() {
   }
 }
 
+.sw-text-align-start { text-align: start; }
+.sw-text-align-center { text-align: center; }
+.sw-text-align-end { text-align: end; }
+
 .sw-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -86,6 +99,8 @@ export function cssComponentClasses() {
 
 ${textVariantRules()}
 
+${compactTextVariantRules()}
+
 ${cssButtonClasses()}
 
 ${cssCheckboxClasses()}
@@ -120,6 +135,9 @@ ${cssSeparatorClasses()}
 
 ${cssFilterChipsClasses()}
 
+${cssGridClasses()}
+${cssDenominationGridClasses()}
+
 ${cssFieldClasses()}
 
 ${cssSplitClasses()}

package/dist/css/css-denomination-grid.d.ts

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

package/dist/css/css-denomination-grid.js

@@ -0,0 +1,213 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { badgeTones } from './css-data.js';
+const caption = typographyVariants.caption;
+const data = typographyVariants.data;
+const label = typographyVariants.label;
+const title = typographyVariants.title;
+function toneRules() {
+    return badgeTones
+        .map((tone) => `.sw-denomination-row-${tone} { --sw-denomination-tone: var(--sw-color-${tone === 'neutral' ? 'muted' : tone}); }`)
+        .join('\n');
+}
+export function cssDenominationGridClasses() {
+    return `.sw-denomination-grid {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  max-width: 100%;
+  min-width: 0;
+}
+
+${toneRules()}
+
+.sw-denomination-strip {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.sw-denomination-strip th,
+.sw-denomination-strip td {
+  padding: var(--sw-space-1) var(--sw-space-2);
+  vertical-align: middle;
+}
+
+.sw-denomination-strip tbody tr {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-denomination-head {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  font-weight: 600;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  text-align: end;
+}
+
+.sw-denomination-corner {
+  padding: 0;
+}
+
+.sw-denomination-label {
+  align-items: center;
+  border-inline-start: var(--sw-space-1) solid var(--sw-denomination-tone);
+  color: var(--sw-denomination-tone);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  gap: var(--sw-space-2);
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-width: 0;
+  text-align: start;
+}
+
+.sw-denomination-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-denomination-cell {
+  color: var(--sw-color-text);
+  font-size: ${data.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: ${data.letterSpacing}px;
+  line-height: ${data.lineHeight}px;
+  text-align: end;
+}
+
+.sw-denomination-cell-zero {
+  color: var(--sw-color-muted);
+  font-weight: ${data.fontWeight};
+  opacity: var(--sw-quiet-opacity);
+}
+
+.sw-denomination-row-signed .sw-denomination-cell-positive {
+  color: var(--sw-color-success);
+}
+
+.sw-denomination-cell-negative {
+  color: var(--sw-color-danger);
+}
+
+.sw-denomination-total {
+  color: var(--sw-denomination-tone);
+  font-size: ${data.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: ${data.letterSpacing}px;
+  line-height: ${data.lineHeight}px;
+  text-align: end;
+  white-space: nowrap;
+}
+
+.sw-denomination-total-inline {
+  display: none;
+  flex-basis: 100%;
+  font-size: ${caption.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-denomination-tiles {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+}
+
+.sw-denomination-tiles .sw-denomination-label {
+  border-inline-start: 0;
+}
+
+.sw-denomination-tiles .sw-denomination-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+}
+
+.sw-denomination-tile-list {
+  display: grid;
+  gap: var(--sw-space-2);
+  grid-template-columns: repeat(auto-fit, minmax(var(--sw-space-8), 1fr));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-denomination-tile {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  min-width: 0;
+  padding: var(--sw-space-3) var(--sw-space-2);
+}
+
+.sw-denomination-tile .sw-denomination-head,
+.sw-denomination-tile .sw-denomination-cell {
+  text-align: center;
+}
+
+.sw-denomination-tile .sw-denomination-cell {
+  font-size: ${title.fontSize}px;
+  letter-spacing: ${title.letterSpacing}px;
+  line-height: ${title.lineHeight}px;
+}
+
+.sw-denomination-subtotal {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  text-align: center;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-denomination-strip .sw-denomination-total { display: none; }
+  .sw-denomination-total-inline { display: block; }
+  .sw-denomination-strip .sw-denomination-label { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
+  .sw-denomination-strip th,
+  .sw-denomination-strip td { padding: var(--sw-space-1); }
+  .sw-denomination-tile-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
+  .sw-denomination-cell-zero { color: GrayText; opacity: 1; }
+  .sw-denomination-cell-negative,
+  .sw-denomination-row-signed .sw-denomination-cell-positive,
+  .sw-denomination-total { color: CanvasText; }
+  .sw-denomination-tile { border-color: CanvasText; }
+}`;
+}
+export function denominationGridClassCatalog() {
+    return [
+        'sw-denomination-grid',
+        ...badgeTones.map((tone) => `sw-denomination-row-${tone}`),
+        'sw-denomination-strip',
+        'sw-denomination-head',
+        'sw-denomination-corner',
+        'sw-denomination-row',
+        'sw-denomination-row-signed',
+        'sw-denomination-label',
+        'sw-denomination-label-text',
+        'sw-denomination-icon',
+        'sw-denomination-cell',
+        'sw-denomination-cell-zero',
+        'sw-denomination-cell-positive',
+        'sw-denomination-cell-negative',
+        'sw-denomination-total',
+        'sw-denomination-total-inline',
+        'sw-denomination-tiles',
+        'sw-denomination-tile-list',
+        'sw-denomination-tile',
+        'sw-denomination-subtotal',
+    ];
+}

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

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 const label = typographyVariants.label;
+const data = typographyVariants.data;
 export function cssFilterChipsClasses() {
     return `.sw-filter-chips {
   border: 0;
@@ -51,6 +52,7 @@ export function cssFilterChipsClasses() {
   display: inline-flex;
   font-family: var(--sw-font-sans);
   font-size: ${label.fontSize}px;
+  gap: var(--sw-space-2);
   line-height: ${label.lineHeight}px;
   min-height: var(--sw-control-md-min-height);
   min-width: 0;
@@ -58,12 +60,30 @@ export function cssFilterChipsClasses() {
   padding: var(--sw-space-1) var(--sw-space-3);
 }
 
+.sw-filter-chip-count {
+  color: var(--sw-color-muted);
+  flex: none;
+  font-size: ${data.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: ${data.fontWeight};
+  letter-spacing: ${data.letterSpacing}px;
+  line-height: ${data.lineHeight}px;
+}
+
+.sw-filter-chip-quiet:not(:has(.sw-filter-chip-input:checked)) .sw-filter-chip-face {
+  opacity: var(--sw-quiet-opacity);
+}
+
 .sw-filter-chip-input:checked + .sw-filter-chip-face {
   background: var(--sw-color-accent);
   border-color: var(--sw-color-accent);
   color: var(--sw-color-onAccent);
 }
 
+.sw-filter-chip-input:checked + .sw-filter-chip-face .sw-filter-chip-count {
+  color: inherit;
+}
+
 .sw-filter-chip-input:focus-visible + .sw-filter-chip-face {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
@@ -78,6 +98,8 @@ export function cssFilterChipsClasses() {
   .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
   .sw-filter-chip-input:checked + .sw-filter-chip-face { background: Highlight; border-color: Highlight; color: HighlightText; }
   .sw-filter-chip-input:focus-visible + .sw-filter-chip-face { outline-color: Highlight; }
+  .sw-filter-chip-count { color: inherit; }
+  .sw-filter-chip-quiet:not(:has(.sw-filter-chip-input:checked)) .sw-filter-chip-face { opacity: 1; color: GrayText; border-color: GrayText; }
 }`;
 }
 export function filterChipsClassCatalog() {
@@ -88,5 +110,7 @@ export function filterChipsClassCatalog() {
         'sw-filter-chip',
         'sw-filter-chip-input',
         'sw-filter-chip-face',
+        'sw-filter-chip-count',
+        'sw-filter-chip-quiet',
     ];
 }

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

@@ -0,0 +1,7 @@
+import { type Breakpoint } from './breakpoints.js';
+export declare const gridColumnCounts: readonly [1, 2, 3, 4];
+export type GridColumns = (typeof gridColumnCounts)[number];
+export declare function gridColumnsClass(columns: GridColumns): string;
+export declare function gridColumnsBelowClass(breakpoint: Breakpoint, columns: GridColumns): string;
+export declare function cssGridClasses(): string;
+export declare function gridClassCatalog(): string[];

package/dist/css/css-grid.js

@@ -0,0 +1,31 @@
+import { breakpointQuery, breakpoints, } from './breakpoints.js';
+export const gridColumnCounts = [1, 2, 3, 4];
+export function gridColumnsClass(columns) {
+    return `sw-grid-cols-${columns}`;
+}
+export function gridColumnsBelowClass(breakpoint, columns) {
+    return `sw-grid-cols-below-${breakpoint}-${columns}`;
+}
+function columnsRule(className, columns) {
+    return `.${className} { grid-template-columns: repeat(${columns}, minmax(0, 1fr)); }`;
+}
+export function cssGridClasses() {
+    const base = `.sw-grid {
+  display: grid;
+  min-width: 0;
+}`;
+    const columns = gridColumnCounts.map((count) => columnsRule(gridColumnsClass(count), count));
+    const below = breakpoints.map((breakpoint) => `@media ${breakpointQuery('below', breakpoint)} {
+${gridColumnCounts
+        .map((count) => columnsRule(gridColumnsBelowClass(breakpoint, count), count))
+        .join('\n')}
+}`);
+    return [base, ...columns, ...below].join('\n');
+}
+export function gridClassCatalog() {
+    return [
+        'sw-grid',
+        ...gridColumnCounts.map((count) => gridColumnsClass(count)),
+        ...breakpoints.flatMap((breakpoint) => gridColumnCounts.map((count) => gridColumnsBelowClass(breakpoint, count))),
+    ];
+}

package/dist/css/stylesheet.js

@@ -11,6 +11,8 @@ import { tooltipClassCatalog } from './css-tooltip.js';
 import { separatorClassCatalog } from './css-separator.js';
 import { responsiveClassCatalog } from './css-responsive.js';
 import { filterChipsClassCatalog } from './css-filter-chips.js';
+import { gridClassCatalog } from './css-grid.js';
+import { denominationGridClassCatalog } from './css-denomination-grid.js';
 import { fieldClassCatalog } from './css-field.js';
 import { cssComponentClasses } from './css-components.js';
 import { buttonClassCatalog } from './css-button.js';
@@ -34,6 +36,9 @@ export function utilityClassCatalog() {
         'sw-card',
         ...cardVariants.map((variant) => `sw-card-${variant}`),
         'sw-truncate',
+        'sw-text-align-start',
+        'sw-text-align-center',
+        'sw-text-align-end',
         'sw-tabular',
         ...Object.keys(typographyVariants).map((name) => `sw-text-${name}`),
         ...buttonClassCatalog(),
@@ -53,6 +58,8 @@ export function utilityClassCatalog() {
         ...tooltipClassCatalog(),
         ...separatorClassCatalog(),
         ...filterChipsClassCatalog(),
+        ...gridClassCatalog(),
+        ...denominationGridClassCatalog(),
         ...fieldClassCatalog(),
         ...splitClassCatalog(),
         ...toastClassCatalog(),

package/dist/denomination-cells.d.ts

@@ -0,0 +1,12 @@
+export type DenominationCellState = 'zero' | 'positive' | 'negative';
+export type DenominationCellView = {
+    state: DenominationCellState;
+    text: string;
+};
+/**
+ * Classifies one count for display. A null or zero count renders the zero
+ * label; a signed row prefixes positive counts with "+" so movement reads as
+ * a delta. Formatting stays plain digits: the consumer owns locale grouping.
+ */
+export declare function denominationCellView(count: number | null, signed: boolean, zeroLabel: string): DenominationCellView;
+export declare function isDenominationCount(count: number | null): boolean;

package/dist/denomination-cells.js

@@ -0,0 +1,15 @@
+/**
+ * Classifies one count for display. A null or zero count renders the zero
+ * label; a signed row prefixes positive counts with "+" so movement reads as
+ * a delta. Formatting stays plain digits: the consumer owns locale grouping.
+ */
+export function denominationCellView(count, signed, zeroLabel) {
+    if (count === null || count === 0)
+        return { state: 'zero', text: zeroLabel };
+    if (count < 0)
+        return { state: 'negative', text: String(count) };
+    return { state: 'positive', text: signed ? `+${count}` : String(count) };
+}
+export function isDenominationCount(count) {
+    return count === null || Number.isInteger(count);
+}

package/dist/index.d.ts

@@ -28,11 +28,15 @@ export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, } from './components/Select.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
 export { Table, TableBody, TableCell, TableHeader, TableRow, type TableBodyProps, type TableCellProps, type TableDensity, type TableHeaderProps, type TableProps, type TableRowProps, } from './components/Table.js';
-export { Text, type TextElement, type TextProps } from './components/Text.js';
+export { Text, type TextAlign, type TextElement, type TextProps, } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export type { VisibilityProps } from './visibility-classes.js';
 export { Separator } from './components/Separator.js';
 export type { SeparatorOrientation, SeparatorProps, } from './components/Separator.js';
+export { Grid } from './components/Grid.js';
+export type { GridColumns, GridProps } from './components/Grid.js';
+export { DenominationGrid } from './components/DenominationGrid.js';
+export type { DenominationGridColumn, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridTone, } from './components/DenominationGrid.js';
 export { FilterChips } from './components/FilterChips.js';
 export type { FilterChipOption, FilterChipsProps, } from './components/FilterChips.js';

package/dist/index.js

@@ -23,8 +23,10 @@ export { SegmentedControl, } from './components/SegmentedControl.js';
 export { Select } from './components/Select.js';
 export { Stack, } from './components/Stack.js';
 export { Table, TableBody, TableCell, TableHeader, TableRow, } from './components/Table.js';
-export { Text } from './components/Text.js';
+export { Text, } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export { Separator } from './components/Separator.js';
+export { Grid } from './components/Grid.js';
+export { DenominationGrid } from './components/DenominationGrid.js';
 export { FilterChips } from './components/FilterChips.js';

package/dist/styles.css

@@ -708,6 +708,10 @@ body {
   }
 }
 
+.sw-text-align-start { text-align: start; }
+.sw-text-align-center { text-align: center; }
+.sw-text-align-end { text-align: end; }
+
 .sw-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -726,6 +730,11 @@ body {
 .sw-text-caption { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: -0.08px; }
 .sw-text-data { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.08px; font-variant-numeric: tabular-nums; }
 
+@media not all and (min-width: 48rem) {
+  .sw-text-display { font-size: 32px; line-height: 38px; letter-spacing: -0.6px; }
+  .sw-text-heading { font-size: 24px; line-height: 30px; letter-spacing: -0.4px; }
+}
+
 .sw-button {
   appearance: none;
   align-items: center;
@@ -1915,6 +1924,7 @@ body {
   display: inline-flex;
   font-family: var(--sw-font-sans);
   font-size: 15px;
+  gap: var(--sw-space-2);
   line-height: 20px;
   min-height: var(--sw-control-md-min-height);
   min-width: 0;
@@ -1922,12 +1932,30 @@ body {
   padding: var(--sw-space-1) var(--sw-space-3);
 }
 
+.sw-filter-chip-count {
+  color: var(--sw-color-muted);
+  flex: none;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+.sw-filter-chip-quiet:not(:has(.sw-filter-chip-input:checked)) .sw-filter-chip-face {
+  opacity: var(--sw-quiet-opacity);
+}
+
 .sw-filter-chip-input:checked + .sw-filter-chip-face {
   background: var(--sw-color-accent);
   border-color: var(--sw-color-accent);
   color: var(--sw-color-onAccent);
 }
 
+.sw-filter-chip-input:checked + .sw-filter-chip-face .sw-filter-chip-count {
+  color: inherit;
+}
+
 .sw-filter-chip-input:focus-visible + .sw-filter-chip-face {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
@@ -1942,6 +1970,201 @@ body {
   .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
   .sw-filter-chip-input:checked + .sw-filter-chip-face { background: Highlight; border-color: Highlight; color: HighlightText; }
   .sw-filter-chip-input:focus-visible + .sw-filter-chip-face { outline-color: Highlight; }
+  .sw-filter-chip-count { color: inherit; }
+  .sw-filter-chip-quiet:not(:has(.sw-filter-chip-input:checked)) .sw-filter-chip-face { opacity: 1; color: GrayText; border-color: GrayText; }
+}
+
+.sw-grid {
+  display: grid;
+  min-width: 0;
+}
+.sw-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.sw-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.sw-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.sw-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+@media not all and (min-width: 48rem) {
+.sw-grid-cols-below-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.sw-grid-cols-below-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.sw-grid-cols-below-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.sw-grid-cols-below-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+.sw-denomination-grid {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-denomination-row-neutral { --sw-denomination-tone: var(--sw-color-muted); }
+.sw-denomination-row-accent { --sw-denomination-tone: var(--sw-color-accent); }
+.sw-denomination-row-success { --sw-denomination-tone: var(--sw-color-success); }
+.sw-denomination-row-danger { --sw-denomination-tone: var(--sw-color-danger); }
+
+.sw-denomination-strip {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.sw-denomination-strip th,
+.sw-denomination-strip td {
+  padding: var(--sw-space-1) var(--sw-space-2);
+  vertical-align: middle;
+}
+
+.sw-denomination-strip tbody tr {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-denomination-head {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  text-align: end;
+}
+
+.sw-denomination-corner {
+  padding: 0;
+}
+
+.sw-denomination-label {
+  align-items: center;
+  border-inline-start: var(--sw-space-1) solid var(--sw-denomination-tone);
+  color: var(--sw-denomination-tone);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 15px;
+  font-weight: 600;
+  gap: var(--sw-space-2);
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-width: 0;
+  text-align: start;
+}
+
+.sw-denomination-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-denomination-cell {
+  color: var(--sw-color-text);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  text-align: end;
+}
+
+.sw-denomination-cell-zero {
+  color: var(--sw-color-muted);
+  font-weight: 500;
+  opacity: var(--sw-quiet-opacity);
+}
+
+.sw-denomination-row-signed .sw-denomination-cell-positive {
+  color: var(--sw-color-success);
+}
+
+.sw-denomination-cell-negative {
+  color: var(--sw-color-danger);
+}
+
+.sw-denomination-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-total-inline {
+  display: none;
+  flex-basis: 100%;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.sw-denomination-tiles {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+}
+
+.sw-denomination-tiles .sw-denomination-label {
+  border-inline-start: 0;
+}
+
+.sw-denomination-tiles .sw-denomination-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+}
+
+.sw-denomination-tile-list {
+  display: grid;
+  gap: var(--sw-space-2);
+  grid-template-columns: repeat(auto-fit, minmax(var(--sw-space-8), 1fr));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-denomination-tile {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  min-width: 0;
+  padding: var(--sw-space-3) var(--sw-space-2);
+}
+
+.sw-denomination-tile .sw-denomination-head,
+.sw-denomination-tile .sw-denomination-cell {
+  text-align: center;
+}
+
+.sw-denomination-tile .sw-denomination-cell {
+  font-size: 20px;
+  letter-spacing: -0.3px;
+  line-height: 28px;
+}
+
+.sw-denomination-subtotal {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  text-align: center;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-denomination-strip .sw-denomination-total { display: none; }
+  .sw-denomination-total-inline { display: block; }
+  .sw-denomination-strip .sw-denomination-label { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
+  .sw-denomination-strip th,
+  .sw-denomination-strip td { padding: var(--sw-space-1); }
+  .sw-denomination-tile-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
+  .sw-denomination-cell-zero { color: GrayText; opacity: 1; }
+  .sw-denomination-cell-negative,
+  .sw-denomination-row-signed .sw-denomination-cell-positive,
+  .sw-denomination-total { color: CanvasText; }
+  .sw-denomination-tile { border-color: CanvasText; }
 }
 
 .sw-field-required { color: var(--sw-color-danger); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@scalewing/tokens": "^1.0.0"
+    "@scalewing/tokens": "^1.1.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",