@misoto22/kioku-ui 0.0.0 → 0.2.0

package/src/Spinner/Spinner.tsx

@@ -7,7 +7,14 @@ const spin = stylex.keyframes({
   to: {transform: 'rotate(360deg)'},
 });
 
+// Two hairlines wide. At fourteen pixels a one-pixel ring is a thread: it
+// reads as a control that failed to draw rather than as something turning.
+const ringWidth = `calc(2 * ${semanticTokens.borderWidth})`;
+
 const styles = stylex.create({
+  // The ring at rest is the hairline rank; the arc that moves is full ink.
+  // The accent's jobs are the focus ring, the selected mark and a link on
+  // hover, and a spinner is none of the three.
   spinner: {
     animationDuration: semanticTokens.durationSlow,
     animationIterationCount: 'infinite',
@@ -15,12 +22,16 @@ const styles = stylex.create({
       default: spin,
       '@media (prefers-reduced-motion: reduce)': 'none',
     },
-    animationTimingFunction: semanticTokens.easingStandard,
-    borderBlockStartColor: semanticTokens.colorAccent,
-    borderColor: semanticTokens.colorSurfaceMuted,
+    // Linear, and deliberately not the standard easing. An easing curve
+    // describes a move from somewhere to somewhere; this ring never arrives,
+    // so an ease-out spends the first third of every turn racing and the last
+    // third drifting, then snaps back to the start.
+    animationTimingFunction: 'linear',
+    borderBlockStartColor: semanticTokens.colorText,
+    borderColor: semanticTokens.borderDefault,
     borderRadius: semanticTokens.radiusFull,
     borderStyle: semanticTokens.borderStyle,
-    borderWidth: semanticTokens.borderWidth,
+    borderWidth: ringWidth,
     display: 'inline-block',
     height: semanticTokens.spacingLg,
     width: semanticTokens.spacingLg,

package/src/StatusDot/StatusDot.tsx

@@ -2,7 +2,7 @@ import * as stylex from '@stylexjs/stylex';
 import type {HTMLAttributes} from 'react';
 
 import {semanticTokens} from '../authoring.stylex.js';
-import type {StatusTone} from '../Badge/index.js';
+import type {BadgeTone} from '../Badge/index.js';
 
 const styles = stylex.create({
   base: {
@@ -11,6 +11,17 @@ const styles = stylex.create({
     height: semanticTokens.spacingSm,
     width: semanticTokens.spacingSm,
   },
+  // Hollow, and the only tone that is. The four status tones each say a thing
+  // has happened; neutral says nothing has happened yet — queued, idle, not
+  // run. A filled dot in the third ink would read as a fifth status, so this
+  // one is a ring: present, but not reporting.
+  neutral: {
+    backgroundColor: 'transparent',
+    borderColor: semanticTokens.colorTextMuted,
+    borderStyle: semanticTokens.borderStyle,
+    borderWidth: `calc(1.5 * ${semanticTokens.borderWidth})`,
+    boxSizing: 'border-box',
+  },
   info: {backgroundColor: semanticTokens.statusInfoText},
   success: {backgroundColor: semanticTokens.statusSuccessText},
   warning: {backgroundColor: semanticTokens.statusWarningText},
@@ -23,7 +34,7 @@ export interface StatusDotProps extends Omit<
   'aria-label' | 'children' | 'className' | 'role'
 > {
   readonly 'aria-label': string;
-  readonly tone?: StatusTone;
+  readonly tone?: BadgeTone;
 }
 
 export function StatusDot({tone = 'info', ...props}: StatusDotProps) {

package/src/Switch/Switch.doc.ts

@@ -0,0 +1,19 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const switchDoc = {
+  name: 'Switch',
+  description: 'Turns a setting on or off, taking effect immediately.',
+  props: [
+    {
+      name: 'defaultPressed',
+      description: 'Sets the initial uncontrolled state.',
+    },
+    {name: 'disabled', description: 'Blocks activation.'},
+    {name: 'onPressedChange', description: 'Receives the next state.'},
+    {name: 'pressed', description: 'Controls the current state.'},
+  ],
+  inheritedProps: ['ToggleProps, the same prop contract Toggle accepts'],
+  example:
+    '<Switch onPressedChange={setLive} pressed={live}>Live updates</Switch>',
+  storyId: 'core-switch--default',
+} satisfies ComponentDoc;

package/src/Switch/Switch.tsx

@@ -0,0 +1,152 @@
+import * as stylex from '@stylexjs/stylex';
+import {useState} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+import type {ToggleProps} from '../Toggle/index.js';
+
+// The console's switch, in tokens. Its proportions are the point: a track as
+// tall as one spacing step, a knob inset by a hairline on each side, and a
+// travel of exactly the difference. Nothing here is a literal, so the control
+// keeps its proportions when density moves it.
+const trackHeight = semanticTokens.spacingLg;
+const trackWidth = semanticTokens.sizeControlMd;
+const knobInset = `calc(${semanticTokens.borderWidth} * 2)`;
+const knobSize = `calc(${trackHeight} - ${knobInset} * 2)`;
+const knobTravel = `calc(${trackWidth} - ${trackHeight})`;
+
+const styles = stylex.create({
+  control: {
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    borderRadius: semanticTokens.radiusElement,
+    borderStyle: semanticTokens.borderStyle,
+    borderWidth: semanticTokens.borderWidth,
+    color: semanticTokens.colorText,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeMd,
+    gap: semanticTokens.spacingSm,
+    justifyContent: 'flex-start',
+    letterSpacing: semanticTokens.letterSpacingLabel,
+    lineHeight: semanticTokens.lineHeightBody,
+    minHeight: semanticTokens.sizeHitTarget,
+    minWidth: semanticTokens.sizeHitTarget,
+    paddingBlock: semanticTokens.spacingXs,
+    paddingInline: semanticTokens.spacingXs,
+    transitionDuration: semanticTokens.durationFast,
+    transitionProperty: 'background-color, color',
+    transitionTimingFunction: semanticTokens.easingStandard,
+    ':active:not(:disabled)': {
+      backgroundImage: `linear-gradient(${semanticTokens.colorOverlayActive}, ${semanticTokens.colorOverlayActive})`,
+    },
+    ':disabled': {color: semanticTokens.colorDisabledText, cursor: 'default'},
+    ':focus-visible': {
+      outlineColor: semanticTokens.colorFocus,
+      outlineOffset: semanticTokens.focusOffset,
+      outlineStyle: semanticTokens.borderStyle,
+      outlineWidth: semanticTokens.focusWidth,
+    },
+    ':hover:not(:disabled):not(:active)': {
+      backgroundImage: `linear-gradient(${semanticTokens.colorOverlayHover}, ${semanticTokens.colorOverlayHover})`,
+    },
+  },
+  // No border. The track is a solid block that changes colour, not a small
+  // input box with something inside it — an outlined track reads as a field,
+  // and at 14px a field reads as a mistake.
+  track: {
+    alignItems: 'center',
+    backgroundColor: semanticTokens.borderStrong,
+    borderRadius: semanticTokens.radiusElement,
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    flexShrink: 0,
+    height: trackHeight,
+    justifyContent: 'flex-start',
+    padding: knobInset,
+    transitionDuration: semanticTokens.durationFast,
+    transitionProperty: 'background-color',
+    transitionTimingFunction: semanticTokens.easingStandard,
+    width: trackWidth,
+  },
+  // On is ink. "In effect" is the same colour as the seal on the primary
+  // button, and for the same reason: the accent is reserved for thin marks.
+  trackOn: {backgroundColor: semanticTokens.colorText},
+  trackDisabled: {backgroundColor: semanticTokens.colorDisabledSurface},
+  // A round knob travelling inside a squared track reads as a physical switch;
+  // two capsules read as a widget.
+  knob: {
+    backgroundColor: semanticTokens.colorSurface,
+    borderRadius: semanticTokens.radiusFull,
+    height: knobSize,
+    insetInlineStart: 0,
+    position: 'relative',
+    transitionDuration: semanticTokens.durationModerate,
+    transitionProperty: 'inset-inline-start',
+    transitionTimingFunction: semanticTokens.easingStandard,
+    width: knobSize,
+  },
+  knobOn: {insetInlineStart: knobTravel},
+  knobDisabled: {backgroundColor: semanticTokens.colorDisabledText},
+});
+
+/** Props for a control that applies its change immediately. */
+export type SwitchProps = ToggleProps;
+
+/**
+ * Turns a setting on or off, taking effect at once. Use `Toggle` when the
+ * control expresses a pressed state inside a toolbar instead of a setting,
+ * and a `CheckboxInput` when the value is only submitted with a form.
+ */
+export function Switch({
+  children,
+  defaultPressed = false,
+  disabled,
+  onClick,
+  onPressedChange,
+  pressed,
+  type = 'button',
+  ...props
+}: SwitchProps) {
+  const [internalPressed, setInternalPressed] = useState(defaultPressed);
+  const isPressed = pressed ?? internalPressed;
+
+  return (
+    <button
+      {...props}
+      aria-checked={isPressed}
+      disabled={disabled}
+      onClick={(event) => {
+        const nextPressed = !isPressed;
+        if (pressed === undefined) {
+          setInternalPressed(nextPressed);
+        }
+        onPressedChange?.(nextPressed);
+        onClick?.(event);
+      }}
+      role="switch"
+      {...stylex.props(styles.control)}
+      type={type}
+    >
+      <span
+        aria-hidden="true"
+        {...stylex.props(
+          styles.track,
+          isPressed ? styles.trackOn : undefined,
+          disabled ? styles.trackDisabled : undefined,
+        )}
+      >
+        <span
+          aria-hidden="true"
+          {...stylex.props(
+            styles.knob,
+            isPressed ? styles.knobOn : undefined,
+            disabled ? styles.knobDisabled : undefined,
+          )}
+        />
+      </span>
+      {children}
+    </button>
+  );
+}

package/src/Switch/index.ts

@@ -0,0 +1 @@
+export {Switch, type SwitchProps} from './Switch.js';

package/src/TabList/TabList.doc.ts

@@ -0,0 +1,28 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const tabListDoc = {
+  name: 'TabList',
+  description: 'Selects one of several panels through the ARIA tabs pattern.',
+  props: [
+    {
+      name: 'label',
+      description: 'Names the tab strip for assistive technology.',
+    },
+    {
+      name: 'onSelect',
+      description: 'Receives the id of the newly selected tab.',
+    },
+    {name: 'selectedId', description: 'Identifies the currently selected tab.'},
+    {
+      name: 'tabs',
+      description:
+        'Supplies the tab options in reading order; each may name the panel it controls.',
+    },
+  ],
+  inheritedProps: [
+    'HTMLAttributes<HTMLDivElement> except children, className, onSelect, and role',
+  ],
+  example:
+    '<TabList label="Views" onSelect={setView} selectedId={view} tabs={views} />',
+  storyId: 'core-tab-list--default',
+} satisfies ComponentDoc;

package/src/TabList/TabList.tsx

@@ -0,0 +1,151 @@
+import * as stylex from '@stylexjs/stylex';
+import {useId, useRef, type HTMLAttributes, type ReactNode} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+import {useListFocus} from '../hooks/useListFocus.js';
+
+// The primary rank of underline: two hairlines, one weight above the rule the
+// strip stands on. A subordinate rank of tab would take a single hairline.
+const selectedMarkWidth = `calc(2 * ${semanticTokens.borderWidth})`;
+
+const styles = stylex.create({
+  list: {
+    // The whole strip stands on one rule, and the tabs sit on it at a shared
+    // baseline so a label carrying a numeral or a count does not ride up.
+    alignItems: 'baseline',
+    borderBlockEndColor: semanticTokens.borderDefault,
+    borderBlockEndStyle: semanticTokens.borderStyle,
+    borderBlockEndWidth: semanticTokens.borderWidth,
+    columnGap: semanticTokens.spacingXl,
+    display: 'flex',
+    fontFamily: semanticTokens.fontFamilyBody,
+  },
+  tab: {
+    backgroundColor: 'transparent',
+    borderBlockEndColor: 'transparent',
+    borderBlockEndStyle: semanticTokens.borderStyle,
+    borderBlockEndWidth: selectedMarkWidth,
+    borderBlockStartStyle: 'none',
+    borderBlockStartWidth: 0,
+    borderInlineStyle: 'none',
+    borderInlineWidth: 0,
+    color: semanticTokens.colorTextSecondary,
+    cursor: 'pointer',
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeMd,
+    // One weight throughout. Setting the whole strip medium made it shout
+    // over the page and left nothing for the selected tab to gain; the ink
+    // rank and the underline say which tab is current, and neither reflows.
+    fontWeight: semanticTokens.fontWeightRegular,
+    letterSpacing: semanticTokens.letterSpacingLabel,
+    // The mark overlaps the strip's own rule instead of sitting under it.
+    marginBlockEnd: `calc(-1 * ${semanticTokens.borderWidth})`,
+    // The underline is the width of the label and nothing else. Inline padding
+    // would run the mark out past the word it marks, and the tabs are held
+    // apart by the strip's own gap rather than by a box around each one.
+    paddingBlockEnd: semanticTokens.spacingMd,
+    paddingBlockStart: 0,
+    paddingInline: 0,
+    transitionDuration: semanticTokens.durationFast,
+    transitionProperty: 'border-color, color',
+    transitionTimingFunction: semanticTokens.easingStandard,
+    ':disabled': {color: semanticTokens.colorDisabledText, cursor: 'default'},
+    ':focus-visible': {
+      outlineColor: semanticTokens.colorFocus,
+      outlineOffset: semanticTokens.focusOffset,
+      outlineStyle: semanticTokens.borderStyle,
+      outlineWidth: semanticTokens.focusWidth,
+    },
+  },
+  unselected: {
+    ':hover:not(:disabled)': {color: semanticTokens.colorText},
+  },
+  // Selection is a mark, never a fill: the tab keeps its transparent ground
+  // and states its case with an underline in ink.
+  selected: {
+    borderBlockEndColor: semanticTokens.colorText,
+    color: semanticTokens.colorText,
+  },
+});
+
+/** One selectable tab in a `TabList`. */
+export interface TabOption {
+  /**
+   * The `id` of the panel this tab reveals. Supply it when the panel is in the
+   * DOM: `aria-controls` pointing at an element that does not exist is worse
+   * than omitting it, because assistive technology follows the reference.
+   */
+  readonly controls?: string;
+  readonly disabled?: boolean;
+  readonly id: string;
+  readonly label: ReactNode;
+}
+
+/** Props for a single-select strip of tabs. */
+export interface TabListProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children' | 'className' | 'onSelect' | 'role'
+> {
+  readonly label: string;
+  readonly onSelect: (id: string) => void;
+  readonly selectedId: string;
+  readonly tabs: readonly TabOption[];
+}
+
+/**
+ * Selects one of several panels. The strip is one tab stop: arrow keys move
+ * between tabs and selection follows focus, matching the ARIA tabs pattern.
+ */
+export function TabList({
+  label,
+  onSelect,
+  selectedId,
+  tabs,
+  ...props
+}: TabListProps) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const {onKeyDown} = useListFocus(listRef, {orientation: 'horizontal'});
+  const prefix = useId();
+
+  return (
+    <div
+      {...props}
+      aria-label={label}
+      onKeyDown={onKeyDown}
+      ref={listRef}
+      role="tablist"
+      {...stylex.props(styles.list)}
+    >
+      {tabs.map(({controls, disabled, id, label: tabLabel}) => {
+        const selected = id === selectedId;
+
+        return (
+          <button
+            {...(controls === undefined ? {} : {'aria-controls': controls})}
+            aria-selected={selected}
+            disabled={disabled ?? false}
+            id={`${prefix}-${id}-tab`}
+            key={id}
+            onClick={() => {
+              onSelect(id);
+            }}
+            onFocus={() => {
+              if (!disabled) {
+                onSelect(id);
+              }
+            }}
+            role="tab"
+            {...stylex.props(
+              styles.tab,
+              selected ? styles.selected : styles.unselected,
+            )}
+            tabIndex={selected ? 0 : -1}
+            type="button"
+          >
+            {tabLabel}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/TabList/index.ts

@@ -0,0 +1 @@
+export {TabList, type TabListProps, type TabOption} from './TabList.js';

package/src/Table/Table.doc.ts

@@ -70,7 +70,13 @@ export const tableBodyDoc = {
 export const tableRowDoc = {
   name: 'TableRow',
   description: 'Groups related header or data cells in a native table row.',
-  props: [{name: 'children', description: 'Supplies cells.', required: true}],
+  props: [
+    {
+      name: 'selected',
+      description: 'Marks the row as chosen with a rule down its leading edge.',
+    },
+    {name: 'children', description: 'Supplies cells.', required: true},
+  ],
   inheritedProps: ['HTMLAttributes<HTMLTableRowElement> except className'],
   example: '<TableRow><TableCell>Value</TableCell></TableRow>',
   storyId: 'core-table--table-row',
@@ -86,6 +92,10 @@ export const tableHeaderCellDoc = {
       required: true,
     },
     {name: 'scope', description: 'Associates the header with a row or column.'},
+    {
+      name: 'numeric',
+      description: 'Aligns the label over a column of figures.',
+    },
   ],
   inheritedProps: ['ThHTMLAttributes<HTMLTableCellElement> except className'],
   example: '<TableHeaderCell scope="col">Name</TableHeaderCell>',
@@ -97,6 +107,10 @@ export const tableCellDoc = {
   description: 'Renders one native data cell in a table row.',
   props: [
     {name: 'children', description: 'Supplies the cell value.', required: true},
+    {
+      name: 'numeric',
+      description: 'Sets the value as a figure so a column of them lines up.',
+    },
   ],
   inheritedProps: ['TdHTMLAttributes<HTMLTableCellElement> except className'],
   example: '<TableCell>24</TableCell>',

package/src/Table/Table.tsx

@@ -28,18 +28,40 @@ const defaultTableStyle: TableStyleContextValue = {
 
 const TableStyleContext = createContext(defaultTableStyle);
 
+// Two hairlines wide, so the mark reads at the same weight as the underline a
+// selected tab carries. Written as a calc over the border token rather than as
+// 2px, so a theme that draws heavier lines gets a heavier mark with them.
+const selectionRule = `inset calc(2 * ${semanticTokens.borderWidth}) 0 0 ${semanticTokens.colorAccent}`;
+
 const styles = stylex.create({
   table: {
     borderCollapse: 'collapse',
     color: semanticTokens.colorText,
     fontFamily: semanticTokens.fontFamilyBody,
     fontSize: semanticTokens.fontSizeMd,
+    letterSpacing: semanticTokens.letterSpacingBody,
+    // Nothing above a table sets a line-height to inherit — not the theme, not
+    // the provider — so without this the rows were spaced by whatever the
+    // browser's default happened to be while `List` and `Item` beside them
+    // were on the system's own leading.
+    lineHeight: semanticTokens.lineHeightBody,
     width: '100%',
   },
+  // The caption is the page's title, so it is set as one: the heading face at
+  // card-title size, opened to the heading tracking, and only medium — a page
+  // of accounts is titled, not shouted at.
   caption: {
+    color: semanticTokens.colorText,
     fontFamily: semanticTokens.fontFamilyHeading,
-    fontWeight: semanticTokens.fontWeightStrong,
+    fontSize: semanticTokens.fontSizeLg,
+    fontWeight: semanticTokens.fontWeightMedium,
+    letterSpacing: semanticTokens.letterSpacingHeading,
+    lineHeight: semanticTokens.lineHeightHeading,
     paddingBlock: semanticTokens.spacingSm,
+    // The title sits on the same margin as the first column: a caption that
+    // starts flush with the table box and cells that start one step in read
+    // as two documents stacked on each other.
+    paddingInline: semanticTokens.spacingLg,
     textAlign: 'start',
   },
   bodyRow: {
@@ -56,19 +78,47 @@ const styles = stylex.create({
       backgroundColor: semanticTokens.colorOverlayActive,
     },
   },
+  // A ledger header is an eyebrow, not a filled strip: smallest size, opened
+  // right up, one rank of ink below the rows it names. The rule under it does
+  // the separating, which is why it is drawn in the strong border while the
+  // row rules stay in the default one.
   headerCell: {
-    backgroundColor: semanticTokens.colorSurfaceMuted,
     color: semanticTokens.colorTextSecondary,
-    fontWeight: semanticTokens.fontWeightStrong,
-    paddingInline: semanticTokens.spacingMd,
+    fontFamily: semanticTokens.fontFamilyHeading,
+    fontSize: semanticTokens.fontSizeXs,
+    fontWeight: semanticTokens.fontWeightRegular,
+    letterSpacing: semanticTokens.letterSpacingEyebrow,
+    paddingInline: semanticTokens.spacingLg,
     textAlign: 'start',
   },
   cell: {
-    paddingInline: semanticTokens.spacingMd,
+    paddingInline: semanticTokens.spacingLg,
   },
+  // A selected row is marked, not filled: the fill is what hover uses, and a
+  // row that is both selected and pointed at must still show both.
+  selectedRow: {boxShadow: selectionRule},
+  // A column of figures only reads as a column when the digits are the same
+  // width and the last one is flush. Mono, tabular and end-aligned; the header
+  // above it takes the alignment alone so it stays an eyebrow.
+  // No size of its own: `Numeral`, which is where this recipe lives, declares
+  // only the face, the figures and the tracking. A step down put the column of
+  // figures a rank below the words it belongs to.
+  numericCell: {
+    fontFamily: semanticTokens.fontFamilyMono,
+    fontVariantNumeric: 'tabular-nums',
+    letterSpacing: semanticTokens.letterSpacingMono,
+    textAlign: 'end',
+  },
+  numericHeaderCell: {textAlign: 'end'},
   compact: {paddingBlock: semanticTokens.spacingSm},
   default: {paddingBlock: semanticTokens.spacingMd},
   spacious: {paddingBlock: semanticTokens.spacingLg},
+  // The header sits one step tighter than the rows it names at every density.
+  // It carries a line of 11px eyebrow, not a line of data, so matching the row
+  // height would give the strip more air than the entries underneath it.
+  headCompact: {paddingBlock: semanticTokens.spacingXs},
+  headDefault: {paddingBlock: semanticTokens.spacingSm},
+  headSpacious: {paddingBlock: semanticTokens.spacingMd},
   rowDivider: {
     ':not(:last-child)': {
       borderBlockEndColor: semanticTokens.borderDefault,
@@ -76,8 +126,11 @@ const styles = stylex.create({
       borderBlockEndWidth: semanticTokens.borderWidth,
     },
   },
+  // This rule is not a divider between rows — it is what says the row above it
+  // is a legend and the rows below it are data. `dividers` decides whether the
+  // body is ruled; it has no say in whether the table has a head.
   headerRowDivider: {
-    borderBlockEndColor: semanticTokens.borderDefault,
+    borderBlockEndColor: semanticTokens.borderStrong,
     borderBlockEndStyle: semanticTokens.borderStyle,
     borderBlockEndWidth: semanticTokens.borderWidth,
   },
@@ -90,6 +143,12 @@ const styles = stylex.create({
   },
 });
 
+const headerDensities = {
+  compact: styles.headCompact,
+  default: styles.headDefault,
+  spacious: styles.headSpacious,
+} satisfies Record<TableDensity, (typeof styles)[keyof typeof styles]>;
+
 export interface TableProps extends Omit<
   TableHTMLAttributes<HTMLTableElement>,
   'className'
@@ -106,18 +165,28 @@ export type TableHeadProps = Omit<
   'className'
 >;
 export type TableBodyProps = TableHeadProps;
-export type TableRowProps = Omit<
+export interface TableRowProps extends Omit<
   HTMLAttributes<HTMLTableRowElement>,
-  'className'
->;
-export type TableHeaderCellProps = Omit<
+  'aria-selected' | 'className'
+> {
+  /**
+   * Marks the row as the chosen one. A rule down its leading edge, and
+   * `aria-selected` so the choice is not carried by the mark alone.
+   */
+  readonly selected?: boolean;
+}
+export interface TableHeaderCellProps extends Omit<
   ThHTMLAttributes<HTMLTableCellElement>,
   'className'
->;
-export type TableCellProps = Omit<
+> {
+  readonly numeric?: boolean;
+}
+export interface TableCellProps extends Omit<
   TdHTMLAttributes<HTMLTableCellElement>,
   'className'
->;
+> {
+  readonly numeric?: boolean;
+}
 
 function usesRowDividers(dividers: TableDividers) {
   return dividers === 'rows' || dividers === 'grid';
@@ -168,14 +237,16 @@ export function TableBody({children, ...props}: TableBodyProps) {
   );
 }
 
-export function TableRow({children, ...props}: TableRowProps) {
+export function TableRow({children, selected, ...props}: TableRowProps) {
   const {dividers, section} = useContext(TableStyleContext);
   return (
     <tr
       {...props}
+      {...(selected === undefined ? {} : {'aria-selected': selected})}
       {...stylex.props(
         section === 'body' && styles.bodyRow,
         section === 'body' && usesRowDividers(dividers) && styles.rowDivider,
+        section === 'body' && selected === true && styles.selectedRow,
       )}
     >
       {children}
@@ -185,6 +256,7 @@ export function TableRow({children, ...props}: TableRowProps) {
 
 export function TableHeaderCell({
   children,
+  numeric = false,
   scope = 'col',
   ...props
 }: TableHeaderCellProps) {
@@ -195,8 +267,9 @@ export function TableHeaderCell({
       scope={scope}
       {...stylex.props(
         styles.headerCell,
-        styles[density],
-        usesRowDividers(dividers) && styles.headerRowDivider,
+        headerDensities[density],
+        numeric && styles.numericHeaderCell,
+        styles.headerRowDivider,
         usesColumnDividers(dividers) && styles.columnDivider,
       )}
     >
@@ -205,7 +278,11 @@ export function TableHeaderCell({
   );
 }
 
-export function TableCell({children, ...props}: TableCellProps) {
+export function TableCell({
+  children,
+  numeric = false,
+  ...props
+}: TableCellProps) {
   const {density, dividers} = useContext(TableStyleContext);
   return (
     <td
@@ -213,6 +290,7 @@ export function TableCell({children, ...props}: TableCellProps) {
       {...stylex.props(
         styles.cell,
         styles[density],
+        numeric && styles.numericCell,
         usesColumnDividers(dividers) && styles.columnDivider,
       )}
     >