@phreshos/react-ui 0.1.42 → 0.1.44

package/dist/alert.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { controlFontSizes, controlFontWeight, useControlMetrics } from "./control/control.js";
+import { controlFontSizes, controlFontWeight, useControlMetrics, controlLineHeight } from "./control/control.js";
 import { iconProps } from "./control/icon.js";
 import { meaningIcon, urgentMeaning } from "./control/meaning.js";
 import { colorLevel, resolveColor } from "./foundation/color.js";
@@ -24,7 +24,7 @@ export const Alert = forwardRef(function Alert({ color = "info", title, icon, ch
             gap: metrics.gap * 2,
             padding: containerPadding(metrics.visual.spacing),
             fontSize: controlFontSizes.medium,
-            lineHeight: 1.45,
+            lineHeight: controlLineHeight,
             ...style
-        }, children: [icon !== false && _jsx("span", { style: { display: "grid", height: "1.45em", alignItems: "center" }, children: icon ?? _jsx(MeaningIcon, { ...iconProps(16) }) }), _jsxs("div", { style: { display: "grid", gap: 2, minWidth: 0 }, children: [title != null && _jsx("strong", { style: { fontWeight: controlFontWeight }, children: title }), children != null && _jsx("div", { children: children })] })] });
+        }, children: [icon !== false && _jsx("span", { style: { display: "grid", height: `${controlLineHeight}em`, alignItems: "center" }, children: icon ?? _jsx(MeaningIcon, { ...iconProps(16) }) }), _jsxs("div", { style: { display: "grid", gap: 2, minWidth: 0 }, children: [title != null && _jsx("strong", { style: { fontWeight: controlFontWeight }, children: title }), children != null && _jsx("div", { children: children })] })] });
 });

package/dist/badge.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { controlFontSizes, controlFontWeight, useControlMetrics } from "./control/control.js";
+import { controlFontSizes, controlFontWeight, useControlMetrics, controlLineHeight } from "./control/control.js";
 import { colorLevel, resolveColor } from "./foundation/color.js";
 import { Surface } from "./surface/surface.js";
 const smaller = Object.freeze({ xsmall: "xsmall", small: "xsmall", medium: "small", large: "medium", xlarge: "large" });
@@ -23,7 +23,7 @@ export const Badge = forwardRef(function Badge({ children, color = "foreground",
             color: colorLevel(base, "strong", colors),
             fontSize: controlFontSizes[smaller[size ?? "medium"]],
             fontWeight: controlFontWeight,
-            lineHeight: 1.45,
+            lineHeight: controlLineHeight,
             whiteSpace: "nowrap",
             verticalAlign: "middle",
             ...style

package/dist/breadcrumbs.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createContext, forwardRef, useContext } from "react";
 import { Breadcrumb as AriaBreadcrumb, Breadcrumbs as AriaBreadcrumbs, Link as AriaLink } from "react-aria-components";
 import { ChevronRight } from "lucide-react";
-import { controlFontWeight, controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { controlFontWeight, controlOpacity, transition, useControlMetrics, controlLineHeight } from "./control/control.js";
 import { iconProps } from "./control/icon.js";
 import { surfacePaint } from "./surface/surface.js";
 const BreadcrumbsContext = createContext(null);
@@ -18,7 +18,7 @@ const BreadcrumbsRoot = forwardRef(function Breadcrumbs({ children, size, style,
                 padding: 0,
                 listStyle: "none",
                 fontSize: metrics.fontSize,
-                lineHeight: 1.45,
+                lineHeight: controlLineHeight,
                 ...style
             }, children: children }) });
 });

package/dist/calendar-layout.js

@@ -3,7 +3,7 @@ import { useContext } from "react";
 import { isSameDay } from "@internationalized/date";
 import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarHeading, CalendarStateContext, RangeCalendarStateContext } from "react-aria-components";
 import { Button } from "./button.js";
-import { controlFontWeight, controlOpacity, transition } from "./control/control.js";
+import { controlFontWeight, controlOpacity, transition, controlLineHeight } from "./control/control.js";
 import { selectionColor } from "./control/item.js";
 import { colorOpacity, readableColor, resolveColor } from "./foundation/color.js";
 import { useDirection } from "./foundation/direction.js";
@@ -28,7 +28,7 @@ export function calendarRootStyle(metrics, style) {
         padding: metrics.spacing,
         fontFamily: "inherit",
         fontSize: metrics.fontSize,
-        lineHeight: 1.45
+        lineHeight: controlLineHeight
     };
 }
 /**

package/dist/color-slider.js

@@ -4,7 +4,7 @@ import { ColorSlider as AriaColorSlider, Label, SliderOutput, SliderTrack } from
 import { colorEdge, ColorThumb } from "./control/color-thumb.js";
 import { colorValue } from "./control/color-value.js";
 import { controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
-import { fieldStyle } from "./control/field.js";
+import { fieldStyle, descriptionStyle } from "./control/field.js";
 import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
 import { resolveDirection, useDirection } from "./foundation/direction.js";
 import { dimmedClass } from "./surface/surface.js";
@@ -25,5 +25,5 @@ export const ColorSlider = forwardRef(function ColorSlider({ label, description,
                         // A track is round by its form.
                         borderRadius: 9999,
                         boxShadow: colorEdge(metrics)
-                    }), children: _jsx(ColorThumb, { metrics: metrics, center: vertical ? "left" : "top" }) }), description != null && _jsx("span", { style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] }) });
+                    }), children: _jsx(ColorThumb, { metrics: metrics, center: vertical ? "left" : "top" }) }), description != null && _jsx("span", { style: descriptionStyle, children: description })] }) });
 });

package/dist/control/control.d.ts

@@ -29,6 +29,10 @@ export type ControlOverrides = keyof ControlProps | keyof FieldProps | "children
 export declare const controlFontSizes: Readonly<Record<ScaleLevel, string>>;
 /** A control text size relative to an element that already applies another level. */
 export declare function relativeFontSize(level: ScaleLevel, within: ScaleLevel): string;
+/** Secondary text, such as a description or a section header, reads a step smaller than its control. */
+export declare const secondaryFontSize = "0.92em";
+/** The line height of text in controls and the Surfaces around them. */
+export declare const controlLineHeight = 1.45;
 export declare const controlFontWeight = 600;
 /** Attenuation shared by every control family. */
 export declare const controlOpacity: Readonly<{

package/dist/control/control.js

@@ -14,6 +14,10 @@ export const controlFontSizes = Object.freeze({
 export function relativeFontSize(level, within) {
     return `${Number.parseFloat(controlFontSizes[level]) / Number.parseFloat(controlFontSizes[within])}em`;
 }
+/** Secondary text, such as a description or a section header, reads a step smaller than its control. */
+export const secondaryFontSize = "0.92em";
+/** The line height of text in controls and the Surfaces around them. */
+export const controlLineHeight = 1.45;
 export const controlFontWeight = 600;
 /** Attenuation shared by every control family. */
 export const controlOpacity = Object.freeze({

package/dist/control/field.d.ts

@@ -8,6 +8,8 @@ export declare function fieldStyle(metrics: ControlMetrics, style?: CSSPropertie
 export declare function FieldLabel({ label }: Readonly<{
     label?: ReactNode;
 }>): import("react").JSX.Element | null;
+/** The treatment of a control's description: a little smaller and quieter than its label. */
+export declare const descriptionStyle: CSSProperties;
 /** Description and validation text shared by every field. */
 export declare function FieldFeedback({ description, errorMessage, metrics }: Readonly<{
     description?: ReactNode;

package/dist/control/field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldError, Label, Text } from "react-aria-components";
 import { colorOpacity, mixColor } from "../foundation/color.js";
-import { controlFontWeight, controlOpacity } from "./control.js";
+import { controlFontWeight, controlOpacity, controlLineHeight, secondaryFontSize } from "./control.js";
 /**
  * The root of every value-holding component. It is the only element that
  * applies the control text scale; every part inherits from it.
@@ -14,17 +14,19 @@ export function fieldStyle(metrics, style) {
         minWidth: 0,
         fontFamily: "inherit",
         fontSize: metrics.fontSize,
-        lineHeight: 1.45,
+        lineHeight: controlLineHeight,
         ...style
     };
 }
 export function FieldLabel({ label }) {
     return label == null ? null : _jsx(Label, { style: { fontWeight: controlFontWeight }, children: label });
 }
+/** The treatment of a control's description: a little smaller and quieter than its label. */
+export const descriptionStyle = Object.freeze({ fontSize: secondaryFontSize, opacity: controlOpacity.secondary });
 /** Description and validation text shared by every field. */
 export function FieldFeedback({ description, errorMessage, metrics }) {
     const { colors } = metrics.visual;
-    return _jsxs(_Fragment, { children: [description != null && _jsx(Text, { slot: "description", style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description }), _jsx(FieldError, { style: { fontSize: "0.92em", color: mixColor(colors.danger, colors.foreground, 0.15) }, children: errorMessage })] });
+    return _jsxs(_Fragment, { children: [description != null && _jsx(Text, { slot: "description", style: descriptionStyle, children: description }), _jsx(FieldError, { style: { fontSize: descriptionStyle.fontSize, color: mixColor(colors.danger, colors.foreground, 0.15) }, children: errorMessage })] });
 }
 /** How strongly every separator shows its text color. */
 export const separatorOpacity = 0.1;

package/dist/control/text-control.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SurfaceView } from "../surface/surface.js";
+import { controlLineHeight } from "./control.js";
 /**
  * The recessed well that holds typed content. Native text elements cannot host
  * Surface layers, so the well wraps the element that React Aria renders.
@@ -25,7 +26,7 @@ export function nativeTextStyle(metrics, multiline) {
         color: "inherit",
         caretColor: "currentColor",
         font: "inherit",
-        lineHeight: 1.45,
+        lineHeight: controlLineHeight,
         resize: multiline ? "vertical" : undefined
     };
 }

package/dist/disclosure.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { Button as AriaButton, Disclosure as AriaDisclosure, DisclosurePanel as AriaDisclosurePanel, DisclosureStateContext } from "react-aria-components";
-import { transition, useControlMetrics } from "./control/control.js";
+import { transition, useControlMetrics, controlLineHeight } from "./control/control.js";
 import { surfaceRender } from "./control/surface-render.js";
 import { resolveSpacing } from "./foundation/spacing.js";
 import { ChevronDown } from "lucide-react";
@@ -39,7 +39,7 @@ export const DisclosureTrigger = forwardRef(function DisclosureTrigger({ childre
             cursor: "pointer",
             font: "inherit",
             fontWeight: 500,
-            lineHeight: 1.45,
+            lineHeight: controlLineHeight,
             textAlign: "start",
             userSelect: "none",
             WebkitTapHighlightColor: "transparent",

package/dist/grid-list.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { GridList as AriaGridList, GridListHeader as AriaGridListHeader, GridListItem as AriaGridListItem, GridListSection as AriaGridListSection } from "react-aria-components";
 import { useControlMetrics } from "./control/control.js";
-import { separatorColor } from "./control/field.js";
 import { itemSurface, SelectionMark } from "./control/item.js";
 import { ariaSelection } from "./control/selection.js";
 import { surfaceRender } from "./control/surface-render.js";
@@ -31,18 +30,24 @@ const GridListRootImplementation = forwardRef(function GridList(properties, ref)
                     ...style
                 } }) }) });
 });
-/** One card. It holds whatever it is given, shows its edge at rest, and a check in its corner when selected. */
+/** One card. It holds whatever it is given, and shows a check in its corner when selected. */
 const GridListItemImplementation = forwardRef(function GridListItem({ children, className, color, disabled = false, style, textValue, ...properties }, ref) {
     const inherited = useGridListStyle();
     const itemColor = color ?? inherited.color;
     const { metrics } = inherited;
-    return _jsx(AriaGridListItem, { ...properties, ref: ref, textValue: textValue ?? (typeof children === "string" ? children : undefined), className: className, isDisabled: disabled, render: surfaceRender("div", state => itemSurface(metrics.visual, itemColor, {
-            selected: state.isSelected,
-            hovered: state.isHovered,
-            pressed: state.isPressed,
-            focusVisible: state.isFocusVisible,
-            disabled: state.isDisabled
-        }, metrics.radius)), style: {
+    return _jsx(AriaGridListItem, { ...properties, ref: ref, textValue: textValue ?? (typeof children === "string" ? children : undefined), className: className, isDisabled: disabled, render: surfaceRender("div", state => ({
+            ...itemSurface(metrics.visual, itemColor, {
+                selected: state.isSelected,
+                hovered: state.isHovered,
+                pressed: state.isPressed,
+                focusVisible: state.isFocusVisible,
+                disabled: state.isDisabled
+            }, metrics.radius),
+            // Unlike a list row, a card is a whole Surface: flat, in the default color at rest, in its
+            // selection color once selected, with the default material in both.
+            ...(state.isSelected ? {} : { color: "default" }),
+            material: undefined
+        })), style: {
             position: "relative",
             display: "grid",
             alignContent: "start",
@@ -54,15 +59,7 @@ const GridListItemImplementation = forwardRef(function GridListItem({ children,
             userSelect: "none",
             outlineOffset: -1,
             ...style
-        }, children: state => _jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", style: {
-                        position: "absolute",
-                        inset: 0,
-                        // The card's own radius: the edge sits inside the grid cell, not directly in the card.
-                        borderRadius: metrics.radius,
-                        border: `1px solid ${separatorColor(metrics)}`,
-                        opacity: state.isSelected ? 0 : 1,
-                        pointerEvents: "none"
-                    } }), typeof children === "function" ? children(state) : children, _jsx("span", { style: { position: "absolute", insetBlockStart: metrics.inset, insetInlineEnd: metrics.inset, display: "flex" }, children: _jsx(SelectionMark, { visible: state.isSelected }) })] }) });
+        }, children: state => _jsxs(_Fragment, { children: [typeof children === "function" ? children(state) : children, _jsx("span", { style: { position: "absolute", insetBlockStart: metrics.inset, insetInlineEnd: metrics.inset, display: "flex" }, children: _jsx(SelectionMark, { visible: state.isSelected }) })] }) });
 });
 /** A Section spans the whole grid and lays its own Items out in the same columns. */
 const GridListSectionImplementation = forwardRef(function GridListSection({ className, style, ...properties }, ref) {

package/dist/list-box.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { Header as AriaHeader, ListBox as AriaListBox, ListBoxItem as AriaListBoxItem, ListBoxSection as AriaListBoxSection } from "react-aria-components";
-import { controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
+import { controlFontWeight, controlOpacity, useControlMetrics, secondaryFontSize } from "./control/control.js";
 import { itemStyle, itemSurface, SelectionMark } from "./control/item.js";
 import { ariaSelection } from "./control/selection.js";
 import { surfaceRender } from "./control/surface-render.js";
@@ -52,7 +52,7 @@ export function collectionHeaderStyle(metrics, style) {
     return {
         paddingInline: metrics.inset,
         paddingBlock: metrics.gap,
-        fontSize: "0.92em",
+        fontSize: secondaryFontSize,
         fontWeight: controlFontWeight,
         opacity: controlOpacity.secondary,
         ...style

package/dist/radio.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { Label, RadioButton, RadioField, RadioGroup as AriaRadioGroup, Text } from "react-aria-components";
-import { controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
-import { FieldFeedback, fieldStyle } from "./control/field.js";
+import { controlFontWeight, useControlMetrics } from "./control/control.js";
+import { FieldFeedback, fieldStyle, descriptionStyle } from "./control/field.js";
 import { ToggleIndicator, toggleRowStyle } from "./control/toggle.js";
 import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
 import { resolveDirection, useDirection } from "./foundation/direction.js";
@@ -29,7 +29,7 @@ const RadioGroupItem = forwardRef(function RadioGroupItem({ label, description,
                                 focusVisible: state.isFocusVisible,
                                 invalid: state.isInvalid,
                                 disabled: state.isDisabled
-                            } }), label] }) }), description != null && _jsx(Text, { slot: "description", style: { fontSize: "0.92em", opacity: controlOpacity.secondary, paddingInlineStart: metrics.indicator + metrics.gap }, children: description })] });
+                            } }), label] }) }), description != null && _jsx(Text, { slot: "description", style: { ...descriptionStyle, paddingInlineStart: metrics.indicator + metrics.gap }, children: description })] });
 });
 /** One exclusive-choice field whose options are its Items. */
 export const RadioGroup = Object.assign(RadioGroupRoot, {

package/dist/segmented-control.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useId, useMemo } from "react";
 import { ToggleButton as AriaToggleButton, ToggleButtonGroup as AriaToggleButtonGroup } from "react-aria-components";
-import { controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
-import { fieldStyle } from "./control/field.js";
+import { controlFontWeight, useControlMetrics } from "./control/control.js";
+import { fieldStyle, descriptionStyle } from "./control/field.js";
 import { SelectionItemLabel, selectionItemStyle, selectionListStyle, SelectionTrack } from "./control/selection-track.js";
 import { stringKey } from "./control/selection.js";
 import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
@@ -25,7 +25,7 @@ const SegmentedControlRoot = forwardRef(function SegmentedControl({ label, descr
                                 const [key] = keys;
                                 if (key !== undefined)
                                     onChange?.(stringKey(key));
-                            }, isDisabled: disabled, style: selectionListStyle(orientation), children: children }) }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] }) });
+                            }, isDisabled: disabled, style: selectionListStyle(orientation), children: children }) }) }), description != null && _jsx("span", { id: descriptionId, style: descriptionStyle, children: description })] }) });
 });
 /** One option; its label may lead with an icon. */
 const SegmentedControlItem = forwardRef(function SegmentedControlItem({ children, disabled, className, style, ...properties }, ref) {

package/dist/select.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button as AriaButton, Select as AriaSelect, SelectValue } from "react-aria-components";
-import { controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { controlOpacity, transition, useControlMetrics, controlLineHeight } from "./control/control.js";
 import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
 import { surfaceRender } from "./control/surface-render.js";
 import { resolveDirection, useDirection } from "./foundation/direction.js";
@@ -54,7 +54,7 @@ export function fieldTriggerStyle(metrics, disabled) {
         border: 0,
         background: "none",
         font: "inherit",
-        lineHeight: 1.45,
+        lineHeight: controlLineHeight,
         textAlign: "start",
         cursor: disabled ? "not-allowed" : "pointer"
     };

package/dist/slider.js

@@ -5,7 +5,7 @@ import { Slider as BaseSlider } from "@base-ui/react/slider";
 import { DirectionProvider as BaseDirectionProvider } from "@base-ui/react/direction-provider";
 import { forwardRef, useEffect, useId, useRef, useState } from "react";
 import { controlFontWeight, controlOpacity, transition, useControlMetrics } from "./control/control.js";
-import { fieldStyle } from "./control/field.js";
+import { fieldStyle, descriptionStyle } from "./control/field.js";
 import { lightColor } from "./foundation/color.js";
 import { resolveDirection, useDirection } from "./foundation/direction.js";
 import { SurfaceView, dimmedClass } from "./surface/surface.js";
@@ -68,5 +68,5 @@ export const Slider = forwardRef(function Slider({ label, description, name, for
                                             height: thumb,
                                             cursor: state.disabled ? "not-allowed" : state.dragging ? "grabbing" : "grab",
                                             scale: state.dragging ? "0.92" : "1"
-                                        } }) })] }) }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] }) });
+                                        } }) })] }) }) }), description != null && _jsx("span", { id: descriptionId, style: descriptionStyle, children: description })] }) });
 });

package/dist/table.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { Cell as AriaCell, Column as AriaColumn, Row as AriaRow, Table as AriaTable, TableBody as AriaTableBody, TableHeader as AriaTableHeader } from "react-aria-components";
-import { controlFontWeight, controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { controlFontWeight, controlOpacity, transition, useControlMetrics, secondaryFontSize } from "./control/control.js";
 import { separatorColor } from "./control/field.js";
 import { itemPaint } from "./control/item.js";
 import { ariaSelection, stringKey } from "./control/selection.js";
@@ -50,7 +50,7 @@ const TableColumn = forwardRef(function TableColumn({ sortable = false, rowHeade
             outline: `3px solid ${state.isFocusVisible ? colorOpacity(colors.primary, 0.34) : "transparent"}`,
             outlineOffset: -3,
             cursor: sortable ? "pointer" : "default",
-            fontSize: "0.92em",
+            fontSize: secondaryFontSize,
             fontWeight: controlFontWeight,
             textAlign: "start",
             userSelect: "none",

package/dist/toast.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text, UNSTABLE_Toast as AriaToast, UNSTABLE_ToastContent as AriaToastContent, UNSTABLE_ToastQueue as AriaToastQueue, UNSTABLE_ToastRegion as AriaToastRegion } from "react-aria-components";
 import { X } from "lucide-react";
-import { controlFontSizes, controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
+import { controlFontSizes, controlFontWeight, controlOpacity, useControlMetrics, controlLineHeight } from "./control/control.js";
 import { FieldButton } from "./control/field-button.js";
 import { iconProps } from "./control/icon.js";
 import { meaningIcon } from "./control/meaning.js";
@@ -58,7 +58,7 @@ export function ToastRegion({ className, style }) {
                                 // The close button carries its own padding, so the end keeps less.
                                 paddingInlineEnd: metrics.spacing / 2,
                                 fontSize: controlFontSizes.medium,
-                                lineHeight: 1.45
-                            }, children: [_jsx("span", { style: { display: "grid", height: "1.45em", alignItems: "center", color: colorLevel(resolveColor(color, visual.colors), "strong", visual.colors) }, children: _jsx(Icon, { ...iconProps(Math.round(metrics.height / 2)) }) }), _jsxs(AriaToastContent, { style: { display: "grid", gap: 2, minWidth: 0 }, children: [_jsx(Text, { slot: "title", style: { fontWeight: controlFontWeight }, children: item.content.title }), item.content.description != null && _jsx(Text, { slot: "description", style: { opacity: controlOpacity.secondary }, children: item.content.description })] }), _jsx(FieldButton, { slot: "close", metrics: metrics, "aria-label": "Close", children: _jsx(X, { ...iconProps(Math.round(metrics.height / 2)) }) })] }) });
+                                lineHeight: controlLineHeight
+                            }, children: [_jsx("span", { style: { display: "grid", height: `${controlLineHeight}em`, alignItems: "center", color: colorLevel(resolveColor(color, visual.colors), "strong", visual.colors) }, children: _jsx(Icon, { ...iconProps(16) }) }), _jsxs(AriaToastContent, { style: { display: "grid", gap: 2, minWidth: 0 }, children: [_jsx(Text, { slot: "title", style: { fontWeight: controlFontWeight }, children: item.content.title }), item.content.description != null && _jsx(Text, { slot: "description", style: { opacity: controlOpacity.secondary }, children: item.content.description })] }), _jsx(FieldButton, { slot: "close", metrics: metrics, "aria-label": "Close", children: _jsx(X, { ...iconProps(14) }) })] }) });
                 } })] });
 }

package/dist/typography.d.ts

@@ -33,6 +33,7 @@ export interface KbdProps {
     readonly className?: string;
     readonly style?: CSSProperties;
 }
+/** Running text sets its lines at this height, relative to its size. */
 /**
  * A key to press, drawn as a small raised keycap. Its label takes the control
  * text scale, and the cap is as tall as the line of text around it, so it

package/dist/typography.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Heading as AriaHeading, Keyboard as AriaKeyboard, Text as AriaText } from "react-aria-components";
-import { controlFontSizes, controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
+import { controlFontSizes, controlFontWeight, controlLineHeight, controlOpacity, useControlMetrics } from "./control/control.js";
 import { scale, scaleMultiplier } from "./foundation/scale.js";
 import { useVisual } from "./foundation/visual.js";
 import { Surface } from "./surface/surface.js";
@@ -28,13 +28,12 @@ export const Heading = forwardRef(function Heading({ level = 2, size, style, ...
 export const Text = forwardRef(function Text({ tone = "default", size, style, ...properties }, ref) {
     return _jsx(AriaText, { ...properties, ref: ref, style: {
             fontSize: size === undefined ? undefined : controlFontSizes[size],
-            lineHeight: textLineHeight,
+            lineHeight: controlLineHeight,
             opacity: tone === "secondary" ? controlOpacity.secondary : undefined,
             ...style
         } });
 });
 /** Running text sets its lines at this height, relative to its size. */
-const textLineHeight = 1.45;
 /**
  * A key to press, drawn as a small raised keycap. Its label takes the control
  * text scale, and the cap is as tall as the line of text around it, so it
@@ -43,7 +42,7 @@ const textLineHeight = 1.45;
 export const Kbd = forwardRef(function Kbd({ children, className, style }, ref) {
     const metrics = useControlMetrics("xsmall");
     const label = Number.parseFloat(controlFontSizes.medium);
-    const cap = `${textLineHeight / label}em`;
+    const cap = `${controlLineHeight / label}em`;
     return _jsx(AriaKeyboard, { ref: ref, className: className, style: { display: "inline-block", verticalAlign: "middle", lineHeight: 1 }, children: _jsx(Surface, { as: "span", radius: metrics.radius, shadow: false, style: {
                 display: "inline-flex",
                 alignItems: "center",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -57,7 +57,7 @@
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "@internationalized/date": "^3.12.3",
-    "@phreshos/core": "^0.1.62",
+    "@phreshos/core": "^0.1.63",
     "colorjs.io": "^0.7.1",
     "lucide-react": "^1.48.0",
     "react-aria": "^3.51.0",