@phreshos/react-ui 0.1.42 → 0.1.43

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/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.43",
   "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",