@scalewing/react 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @scalewing/react
 
+## 1.4.0
+
+### Minor Changes
+
+- e3b4ddc: Add `StatTile`, one prominent figure with its label: a glyph slot, a tabular value with a `tone` (`accent`, `success`, `danger`, `warning`), an optional caption, and `emphasis="primary"` that fills the tile in the accent for the figure a page leads with (generated `sw-stat-tile`, `sw-stat-tile-primary`, `sw-stat-tile-glyph`, `sw-stat-tile-body`, `sw-stat-tile-label`, `sw-stat-tile-value`, `sw-stat-tile-caption`; the tone colours the value through `Text color`).
+- 97e172a: Add `Tabs` and `TabPanel`: a `tablist` strip with an accent underline under the current tab, roving focus, ArrowLeft / ArrowRight / Home / End that move and select, sideways scrolling when the labels overflow (generated `sw-tabs`, `sw-tab`, `sw-tab-selected`), and a labelled `tabpanel` that hides itself while another tab is current.
+- 98ffed7: Add `Badge tone="warning"`, outlined in the new `warning` colour like `success` and `danger` (generated `sw-badge-warning`), for the middle status a product shows between good and blocked.
+
+### Patch Changes
+
+- aefecaf: `Table` scroll wrapper is keyboard reachable: the `sw-table-wrap` element is a `group` named after the table (`aria-label` / `aria-labelledby` mirrored) with `tabIndex={0}` and an accent focus ring, so a wide table with no focusable cell can be scrolled sideways from the keyboard and passes the axe `scrollable-region-focusable` rule.
+- Updated dependencies [98ffed7]
+  - @scalewing/tokens@1.2.0
+
+## 1.3.0
+
+### Minor Changes
+
+- 3ce39ea: Add `ButtonGroup`, the action row of a form or dialog: buttons on one line from the `md` breakpoint up, aligned `start`, `end` (default) or `between`; below `md` they stack full width in source order (generated `sw-button-group` and `sw-button-group-*`).
+- 3e20a6e: Add `SegmentedControl` `disabled`: the group reports `aria-disabled`, every segment is a disabled button, arrow keys and clicks are ignored, and the track fades to `--sw-disabled-opacity` (generated `sw-segmented-disabled`). The recorded choice stays visible, for an identity that can no longer change; a disabled control may omit `onChange`.
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/components/ButtonGroup.d.ts

@@ -0,0 +1,14 @@
+import { type BoxProps } from './Box.js';
+export type ButtonGroupJustify = 'start' | 'end' | 'between';
+export type ButtonGroupProps = BoxProps & {
+    /** Where the row sits from the `md` breakpoint up; below it every button stacks full width in source order. */
+    justify?: ButtonGroupJustify;
+};
+/**
+ * The action row of a form or dialog: buttons on one line, wrapping when
+ * they must, aligned to the end by default. On a phone the same buttons
+ * stack full width so each one is a whole-row target, in source order
+ * (put the primary action last, as the row already does). It is a `group`,
+ * so an `aria-label` names the row for assistive tech.
+ */
+export declare function ButtonGroup({ className, justify, ...rest }: ButtonGroupProps): import("react").JSX.Element;

package/dist/components/ButtonGroup.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { Box } from './Box.js';
+/**
+ * The action row of a form or dialog: buttons on one line, wrapping when
+ * they must, aligned to the end by default. On a phone the same buttons
+ * stack full width so each one is a whole-row target, in source order
+ * (put the primary action last, as the row already does). It is a `group`,
+ * so an `aria-label` names the row for assistive tech.
+ */
+export function ButtonGroup({ className, justify = 'end', ...rest }) {
+    return (_jsx(Box, { className: cx('sw-button-group', `sw-button-group-${justify}`, className), role: "group", ...rest }));
+}

package/dist/components/SegmentedControl.d.ts

@@ -17,9 +17,20 @@ type SegmentedLabel = {
  * width in a Stack, the width of its widest label in an Inline.
  */
 export type SegmentedControlVariant = 'compact' | 'filled';
-export type SegmentedControlProps = SegmentedLabel & {
-    items: readonly SegmentedItem[];
+/**
+ * A disabled control can never report a change, so it needs no `onChange`;
+ * a live one must have it.
+ */
+type SegmentedChange = {
+    disabled?: false;
     onChange: (id: string) => void;
+} | {
+    /** Keeps the current choice visible but inert, for an identity that can no longer change. */
+    disabled: true;
+    onChange?: (id: string) => void;
+};
+export type SegmentedControlProps = SegmentedLabel & SegmentedChange & {
+    items: readonly SegmentedItem[];
     value: string;
     variant?: SegmentedControlVariant;
 };

package/dist/components/SegmentedControl.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cx } from '../class-names.js';
-export const SegmentedControl = forwardRef(function SegmentedControl({ items, onChange, value, variant = 'compact', ...labelProps }, ref) {
+export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, items, onChange, value, variant = 'compact', ...labelProps }, ref) {
     function onKeyDown(event) {
-        if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
+        if (disabled || (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft')) {
             return;
         }
         const index = items.findIndex((item) => item.id === value);
@@ -14,14 +14,14 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ items, on
         const delta = event.key === 'ArrowRight' ? 1 : -1;
         const next = items[(index + delta + items.length) % items.length];
         if (next) {
-            onChange(next.id);
+            onChange?.(next.id);
         }
     }
-    return (_jsx("div", { ref: ref, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
+    return (_jsx("div", { ref: ref, "aria-disabled": disabled || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', disabled && 'sw-segmented-disabled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
             const selected = item.id === value;
-            return (_jsx("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), onClick: () => {
+            return (_jsx("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), disabled: disabled, onClick: () => {
                     if (!selected) {
-                        onChange(item.id);
+                        onChange?.(item.id);
                     }
                 }, role: "radio", type: "button", children: item.label }, item.id));
         }) }));

package/dist/components/StatTile.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type StatTileTone, statTileTones } from '../css/css-stat-tile.js';
+export type { StatTileTone };
+export { statTileTones };
+export type StatTileEmphasis = 'default' | 'primary';
+export type StatTileProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** A short name for the figure, set in the label variant. */
+    label: ReactNode;
+    /** The figure, already formatted by the consumer; tabular numerals. */
+    value: ReactNode;
+    /** The consumer's glyph (Lucide), shown in a tinted circle before the text. */
+    glyph?: ReactNode;
+    /** Colours the value through `Text color`: the sign of a variance, a count that needs attention. */
+    tone?: StatTileTone;
+    /** A second line under the value: a breakdown, a unit, a comparison. */
+    caption?: ReactNode;
+    /** `primary` fills the tile in the accent for the one figure a page leads with. */
+    emphasis?: StatTileEmphasis;
+};
+/**
+ * One prominent figure with its label: the tiles a report or a list opens
+ * with. Presentation only; the consumer formats the number and picks the
+ * glyph.
+ */
+export declare function StatTile({ caption, className, emphasis, glyph, label, tone, value, ...rest }: StatTileProps): import("react").JSX.Element;

package/dist/components/StatTile.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { statTileTones } from '../css/css-stat-tile.js';
+import { Text } from './Text.js';
+export { statTileTones };
+/**
+ * One prominent figure with its label: the tiles a report or a list opens
+ * with. Presentation only; the consumer formats the number and picks the
+ * glyph.
+ */
+export function StatTile({ caption, className, emphasis = 'default', glyph, label, tone = 'default', value, ...rest }) {
+    const primary = emphasis === 'primary';
+    return (_jsxs("section", { className: cx('sw-stat-tile', primary && 'sw-stat-tile-primary', className), ...rest, children: [glyph ? (_jsx("span", { "aria-hidden": "true", className: "sw-stat-tile-glyph", children: glyph })) : null, _jsxs("span", { className: "sw-stat-tile-body", children: [_jsx(Text, { as: "span", className: "sw-stat-tile-label", color: primary ? 'onAccent' : 'muted', variant: "label", children: label }), _jsx(Text, { as: "strong", className: "sw-stat-tile-value", color: primary ? 'onAccent' : tone === 'default' ? 'text' : tone, variant: "heading", children: value }), caption ? (_jsx(Text, { as: "span", className: "sw-stat-tile-caption", color: primary ? 'onAccent' : 'muted', variant: "caption", children: caption })) : null] })] }));
+}

package/dist/components/Table.d.ts

@@ -4,6 +4,11 @@ export type TableProps = HTMLAttributes<HTMLTableElement> & {
     density?: TableDensity;
     stickyHeader?: boolean;
 };
+/**
+ * The scroll wrapper is a keyboard stop named after the table, so a wide
+ * table with no focusable cell can still be scrolled sideways from the
+ * keyboard and is announced as one group.
+ */
 export declare const Table: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & {
     density?: TableDensity;
     stickyHeader?: boolean;

package/dist/components/Table.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
 import { cx } from '../class-names.js';
+/**
+ * The scroll wrapper is a keyboard stop named after the table, so a wide
+ * table with no focusable cell can still be scrolled sideways from the
+ * keyboard and is announced as one group.
+ */
 export const Table = forwardRef(function Table({ children, className, density = 'comfortable', stickyHeader = true, ...rest }, ref) {
-    return (_jsx("div", { className: "sw-table-wrap", children: _jsx("table", { ref: ref, className: cx('sw-table', density === 'compact' && 'sw-table-compact', stickyHeader && 'sw-table-sticky', className), ...rest, children: children }) }));
+    return (_jsx("div", { "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], className: "sw-table-wrap", role: "group", tabIndex: 0, children: _jsx("table", { ref: ref, className: cx('sw-table', density === 'compact' && 'sw-table-compact', stickyHeader && 'sw-table-sticky', className), ...rest, children: children }) }));
 });
 export const TableHeader = forwardRef(function TableHeader({ className, ...rest }, ref) {
     return _jsx("thead", { ref: ref, className: className, ...rest });

package/dist/components/Tabs.d.ts

@@ -0,0 +1,39 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type TabItem = {
+    id: string;
+    label: ReactNode;
+};
+type TabsLabel = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+};
+export type TabsProps = TabsLabel & {
+    /** Prefix for the tab and panel ids, so a `TabPanel` can point back at its tab. */
+    id: string;
+    items: readonly TabItem[];
+    value: string;
+    onChange: (id: string) => void;
+};
+export declare function tabId(tabsId: string, id: string): string;
+export declare function tabPanelId(tabsId: string, id: string): string;
+/**
+ * A tab strip with `tablist` semantics for the sections of one page. Arrow
+ * keys, Home and End move the focus and select at once; the strip scrolls
+ * sideways when it overflows. Pair each item with a `TabPanel`.
+ */
+export declare function Tabs({ id, items, onChange, value, ...labelProps }: TabsProps): import("react").JSX.Element;
+export type TabPanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
+    /** The `id` of the `Tabs` this panel belongs to. */
+    tabsId: string;
+    /** The item id this panel shows. */
+    id: string;
+    /** The current `Tabs` value; the panel hides itself when another tab is current. */
+    value: string;
+    children: ReactNode;
+};
+/** The content of one tab, labelled by its tab and hidden while another tab is current. */
+export declare function TabPanel({ children, className, id, tabsId, value, ...rest }: TabPanelProps): import("react").JSX.Element;
+export {};

package/dist/components/Tabs.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, } from 'react';
+import { cx } from '../class-names.js';
+export function tabId(tabsId, id) {
+    return `${tabsId}-tab-${id}`;
+}
+export function tabPanelId(tabsId, id) {
+    return `${tabsId}-panel-${id}`;
+}
+/**
+ * A tab strip with `tablist` semantics for the sections of one page. Arrow
+ * keys, Home and End move the focus and select at once; the strip scrolls
+ * sideways when it overflows. Pair each item with a `TabPanel`.
+ */
+export function Tabs({ id, items, onChange, value, ...labelProps }) {
+    const tabs = useRef(new Map());
+    function select(next) {
+        if (!next || next.id === value) {
+            return;
+        }
+        onChange(next.id);
+        tabs.current.get(next.id)?.focus();
+    }
+    function onKeyDown(event) {
+        const index = items.findIndex((item) => item.id === value);
+        if (index < 0) {
+            return;
+        }
+        const last = items.length - 1;
+        const target = event.key === 'ArrowRight'
+            ? items[index === last ? 0 : index + 1]
+            : event.key === 'ArrowLeft'
+                ? items[index === 0 ? last : index - 1]
+                : event.key === 'Home'
+                    ? items[0]
+                    : event.key === 'End'
+                        ? items[last]
+                        : undefined;
+        if (!target) {
+            return;
+        }
+        event.preventDefault();
+        select(target);
+    }
+    return (_jsx("div", { className: "sw-tabs", onKeyDown: onKeyDown, role: "tablist", ...labelProps, children: items.map((item) => {
+            const selected = item.id === value;
+            return (_jsx("button", { "aria-controls": tabPanelId(id, item.id), "aria-selected": selected, className: cx('sw-tab', selected && 'sw-tab-selected'), id: tabId(id, item.id), onClick: () => select(item), ref: (node) => {
+                    if (node) {
+                        tabs.current.set(item.id, node);
+                    }
+                    else {
+                        tabs.current.delete(item.id);
+                    }
+                }, role: "tab", tabIndex: selected ? 0 : -1, type: "button", children: item.label }, item.id));
+        }) }));
+}
+/** The content of one tab, labelled by its tab and hidden while another tab is current. */
+export function TabPanel({ children, className, id, tabsId, value, ...rest }) {
+    return (_jsx("div", { "aria-labelledby": tabId(tabsId, id), className: cx('sw-tab-panel', className), hidden: value !== id, id: tabPanelId(tabsId, id), role: "tabpanel", tabIndex: 0, ...rest, children: children }));
+}

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

@@ -4,4 +4,5 @@ export declare function buttonClassNames(options: {
     variant: ButtonVariant;
 }): string[];
 export declare function cssButtonClasses(): string;
+export declare const buttonGroupJustifies: readonly ["start", "end", "between"];
 export declare function buttonClassCatalog(): string[];

package/dist/css/css-button.js

@@ -1,4 +1,5 @@
 import { buttonSizes, buttonVariants, controlScale, typographyVariants, } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
 const label = typographyVariants.label;
 export function buttonClassNames(options) {
     return [
@@ -57,12 +58,32 @@ export function cssButtonClasses() {
 }
 
 ${variantRules()}
-${sizeRules()}`;
+${sizeRules()}
+${groupRules()}`;
+}
+export const buttonGroupJustifies = ['start', 'end', 'between'];
+/** The action row: one line from md up, full-width stacked buttons below it. */
+function groupRules() {
+    const justify = {
+        start: 'flex-start',
+        end: 'flex-end',
+        between: 'space-between',
+    };
+    return [
+        `.sw-button-group { align-items: center; display: flex; flex-wrap: wrap; gap: var(--sw-space-2); min-width: 0; }`,
+        ...buttonGroupJustifies.map((name) => `.sw-button-group-${name} { justify-content: ${justify[name]}; }`),
+        `@media ${breakpointQuery('below', 'md')} {
+  .sw-button-group { align-items: stretch; flex-direction: column; }
+  .sw-button-group > * { width: 100%; }
+}`,
+    ].join('\n');
 }
 export function buttonClassCatalog() {
     return [
         'sw-button',
         ...buttonVariants.map((variant) => `sw-button-${variant}`),
         ...buttonSizes.map((size) => `sw-button-${size}`),
+        'sw-button-group',
+        ...buttonGroupJustifies.map((name) => `sw-button-group-${name}`),
     ];
 }

package/dist/css/css-components.js

@@ -17,6 +17,8 @@ import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
 import { cssTooltipClasses } from './css-tooltip.js';
 import { cssSeparatorClasses } from './css-separator.js';
+import { cssStatTileClasses } from './css-stat-tile.js';
+import { cssTabsClasses } from './css-tabs.js';
 import { cssResponsiveClasses } from './css-responsive.js';
 import { cssFilterChipsClasses } from './css-filter-chips.js';
 import { cssGridClasses } from './css-grid.js';
@@ -133,6 +135,10 @@ ${cssTooltipClasses()}
 
 ${cssSeparatorClasses()}
 
+${cssStatTileClasses()}
+
+${cssTabsClasses()}
+
 ${cssFilterChipsClasses()}
 
 ${cssGridClasses()}

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

@@ -1,4 +1,4 @@
-export declare const badgeTones: readonly ["neutral", "accent", "success", "danger"];
+export declare const badgeTones: readonly ["neutral", "accent", "success", "danger", "warning"];
 export type BadgeTone = (typeof badgeTones)[number];
 export declare const badgeSizes: readonly ["sm", "md"];
 export type BadgeSize = (typeof badgeSizes)[number];

package/dist/css/css-data.js

@@ -1,5 +1,11 @@
 import { trackInset, typographyVariants } from '@scalewing/tokens';
-export const badgeTones = ['neutral', 'accent', 'success', 'danger'];
+export const badgeTones = [
+    'neutral',
+    'accent',
+    'success',
+    'danger',
+    'warning',
+];
 export const badgeSizes = ['sm', 'md'];
 const caption = typographyVariants.caption;
 const data = typographyVariants.data;
@@ -54,6 +60,12 @@ export function cssDataClasses() {
   color: var(--sw-color-danger);
 }
 
+.sw-badge-warning {
+  background: transparent;
+  border-color: var(--sw-color-warning);
+  color: var(--sw-color-warning);
+}
+
 .sw-segmented {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -114,11 +126,24 @@ export function cssDataClasses() {
   color: var(--sw-color-onAccent);
 }
 
+.sw-segmented-disabled {
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-segmented-item:disabled {
+  cursor: not-allowed;
+}
+
 .sw-table-wrap {
   overflow: auto;
   width: 100%;
 }
 
+.sw-table-wrap:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
 .sw-table {
   border-collapse: collapse;
   width: 100%;
@@ -203,6 +228,7 @@ export function dataClassCatalog() {
         'sw-segmented-item',
         'sw-segmented-item-selected',
         'sw-segmented-filled',
+        'sw-segmented-disabled',
         'sw-table-wrap',
         'sw-table',
         'sw-table-end',

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

@@ -0,0 +1,5 @@
+export declare const statTileTones: readonly ["default", "accent", "success", "danger", "warning"];
+export type StatTileTone = (typeof statTileTones)[number];
+/** The figure tile: a glyph circle before a label, a tabular value and a caption. Text colours come from `Text color`. */
+export declare function cssStatTileClasses(): string;
+export declare function statTileClassCatalog(): string[];

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

@@ -0,0 +1,73 @@
+export const statTileTones = [
+    'default',
+    'accent',
+    'success',
+    'danger',
+    'warning',
+];
+/** The figure tile: a glyph circle before a label, a tabular value and a caption. Text colours come from `Text color`. */
+export function cssStatTileClasses() {
+    return `.sw-stat-tile {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-lg);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  gap: var(--sw-space-3);
+  min-width: 0;
+  padding: var(--sw-space-4);
+}
+
+.sw-stat-tile-glyph {
+  align-items: center;
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-accent);
+  display: inline-flex;
+  flex: none;
+  height: var(--sw-control-md-min-height);
+  justify-content: center;
+  width: var(--sw-control-md-min-height);
+}
+
+.sw-stat-tile-body {
+  display: grid;
+  gap: var(--sw-space-1);
+  min-width: 0;
+}
+
+.sw-stat-tile-value {
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.sw-stat-tile-primary {
+  background: var(--sw-color-accent);
+  border-color: transparent;
+}
+
+.sw-stat-tile-primary .sw-stat-tile-glyph {
+  background: transparent;
+  border-color: var(--sw-color-onAccent);
+  color: var(--sw-color-onAccent);
+}
+
+@media (forced-colors: active) {
+  .sw-stat-tile { border-color: CanvasText; }
+  .sw-stat-tile-primary { background: Highlight; }
+}`;
+}
+export function statTileClassCatalog() {
+    return [
+        'sw-stat-tile',
+        'sw-stat-tile-primary',
+        'sw-stat-tile-glyph',
+        'sw-stat-tile-body',
+        'sw-stat-tile-label',
+        'sw-stat-tile-value',
+        'sw-stat-tile-caption',
+    ];
+}

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

@@ -0,0 +1,3 @@
+/** The tab strip: a scrollable row of tabs with an accent underline under the current one. */
+export declare function cssTabsClasses(): string;
+export declare function tabsClassCatalog(): string[];

package/dist/css/css-tabs.js

@@ -0,0 +1,64 @@
+import { typographyVariants } from '@scalewing/tokens';
+const label = typographyVariants.label;
+/** The tab strip: a scrollable row of tabs with an accent underline under the current one. */
+export function cssTabsClasses() {
+    return `.sw-tabs {
+  border-bottom: 1px solid var(--sw-color-border);
+  display: flex;
+  gap: var(--sw-space-1);
+  margin: 0;
+  overflow-x: auto;
+  padding: 0;
+  scrollbar-width: none;
+}
+
+.sw-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.sw-tab {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: var(--sw-radius-sm) var(--sw-radius-sm) 0 0;
+  color: var(--sw-color-muted);
+  cursor: pointer;
+  flex: none;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  margin-bottom: -1px;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-control-md-padding-inline);
+  white-space: nowrap;
+}
+
+.sw-tab:hover {
+  color: var(--sw-color-text);
+}
+
+.sw-tab:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-tab-selected {
+  border-bottom-color: var(--sw-color-accent);
+  color: var(--sw-color-accent);
+}
+
+.sw-tab-panel:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+@media (forced-colors: active) {
+  .sw-tab-selected { border-bottom-color: Highlight; color: Highlight; }
+}`;
+}
+export function tabsClassCatalog() {
+    return ['sw-tabs', 'sw-tab', 'sw-tab-selected', 'sw-tab-panel'];
+}

package/dist/css/stylesheet.js

@@ -9,6 +9,8 @@ import { spinnerClassCatalog } from './css-spinner.js';
 import { progressClassCatalog } from './css-progress.js';
 import { tooltipClassCatalog } from './css-tooltip.js';
 import { separatorClassCatalog } from './css-separator.js';
+import { statTileClassCatalog } from './css-stat-tile.js';
+import { tabsClassCatalog } from './css-tabs.js';
 import { responsiveClassCatalog } from './css-responsive.js';
 import { filterChipsClassCatalog } from './css-filter-chips.js';
 import { gridClassCatalog } from './css-grid.js';
@@ -57,6 +59,8 @@ export function utilityClassCatalog() {
         ...progressClassCatalog(),
         ...tooltipClassCatalog(),
         ...separatorClassCatalog(),
+        ...statTileClassCatalog(),
+        ...tabsClassCatalog(),
         ...filterChipsClassCatalog(),
         ...gridClassCatalog(),
         ...denominationGridClassCatalog(),

package/dist/index.d.ts

@@ -13,8 +13,11 @@ export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, bad
 export { BarChart, type BarChartItem, type BarChartProps, } from './components/BarChart.js';
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
 export { Box, type BoxElement, type BoxProps } from './components/Box.js';
+export { ButtonGroup, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
 export { Dialog, type DialogProps, type DialogSize, } from './components/Dialog.js';
+export { StatTile, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
+export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast } from './components/Toast.js';
 export type { ToastProps } from './components/Toast.js';
 export { Field, type FieldProps, type FieldSize } from './components/Field.js';

package/dist/index.js

@@ -12,8 +12,11 @@ export { Badge, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, } from './components/BarChart.js';
 export { Button, } from './components/Button.js';
 export { Box } from './components/Box.js';
+export { ButtonGroup, } from './components/ButtonGroup.js';
 export { Card } from './components/Card.js';
 export { Dialog, } from './components/Dialog.js';
+export { StatTile, statTileTones, } from './components/StatTile.js';
+export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast } from './components/Toast.js';
 export { Field } from './components/Field.js';
 export { Inline } from './components/Inline.js';

package/dist/styles.css

@@ -10,6 +10,7 @@
   --sw-color-danger: #B42318;
   --sw-color-onDanger: #FFFFFF;
   --sw-color-success: #087443;
+  --sw-color-warning: #B54708;
   --sw-color-border: #D2D2D7;
   --sw-space-0: 0px;
   --sw-space-1: 4px;
@@ -66,6 +67,7 @@
   --sw-color-danger: #F97066;
   --sw-color-onDanger: #101214;
   --sw-color-success: #5BE0A0;
+  --sw-color-warning: #FDB022;
   --sw-color-border: #3A3A3C;
   --sw-space-0: 0px;
   --sw-space-1: 4px;
@@ -776,6 +778,14 @@ 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-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; }
+.sw-button-group-between { justify-content: space-between; }
+@media not all and (min-width: 48rem) {
+  .sw-button-group { align-items: stretch; flex-direction: column; }
+  .sw-button-group > * { width: 100%; }
+}
 
 .sw-checkbox {
   display: flex;
@@ -1064,6 +1074,12 @@ body {
   color: var(--sw-color-danger);
 }
 
+.sw-badge-warning {
+  background: transparent;
+  border-color: var(--sw-color-warning);
+  color: var(--sw-color-warning);
+}
+
 .sw-segmented {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -1124,11 +1140,24 @@ body {
   color: var(--sw-color-onAccent);
 }
 
+.sw-segmented-disabled {
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-segmented-item:disabled {
+  cursor: not-allowed;
+}
+
 .sw-table-wrap {
   overflow: auto;
   width: 100%;
 }
 
+.sw-table-wrap:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
 .sw-table {
   border-collapse: collapse;
   width: 100%;
@@ -1904,6 +1933,116 @@ body {
   .sw-separator { background: CanvasText; }
 }
 
+.sw-stat-tile {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-lg);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  gap: var(--sw-space-3);
+  min-width: 0;
+  padding: var(--sw-space-4);
+}
+
+.sw-stat-tile-glyph {
+  align-items: center;
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-accent);
+  display: inline-flex;
+  flex: none;
+  height: var(--sw-control-md-min-height);
+  justify-content: center;
+  width: var(--sw-control-md-min-height);
+}
+
+.sw-stat-tile-body {
+  display: grid;
+  gap: var(--sw-space-1);
+  min-width: 0;
+}
+
+.sw-stat-tile-value {
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.sw-stat-tile-primary {
+  background: var(--sw-color-accent);
+  border-color: transparent;
+}
+
+.sw-stat-tile-primary .sw-stat-tile-glyph {
+  background: transparent;
+  border-color: var(--sw-color-onAccent);
+  color: var(--sw-color-onAccent);
+}
+
+@media (forced-colors: active) {
+  .sw-stat-tile { border-color: CanvasText; }
+  .sw-stat-tile-primary { background: Highlight; }
+}
+
+.sw-tabs {
+  border-bottom: 1px solid var(--sw-color-border);
+  display: flex;
+  gap: var(--sw-space-1);
+  margin: 0;
+  overflow-x: auto;
+  padding: 0;
+  scrollbar-width: none;
+}
+
+.sw-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.sw-tab {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: var(--sw-radius-sm) var(--sw-radius-sm) 0 0;
+  color: var(--sw-color-muted);
+  cursor: pointer;
+  flex: none;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  margin-bottom: -1px;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-control-md-padding-inline);
+  white-space: nowrap;
+}
+
+.sw-tab:hover {
+  color: var(--sw-color-text);
+}
+
+.sw-tab:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-tab-selected {
+  border-bottom-color: var(--sw-color-accent);
+  color: var(--sw-color-accent);
+}
+
+.sw-tab-panel:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+@media (forced-colors: active) {
+  .sw-tab-selected { border-bottom-color: Highlight; color: Highlight; }
+}
+
 .sw-filter-chips {
   border: 0;
   margin: 0;
@@ -2031,6 +2170,7 @@ body {
 .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-row-warning { --sw-denomination-tone: var(--sw-color-warning); }
 
 .sw-denomination-strip {
   border-collapse: collapse;

package/package.json

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