@terpjs/react-core 0.6.1 → 0.8.0

package/src/ui/Menu.tsx

@@ -1,49 +1,11 @@
 import { useRef } from "react";
-import type { CSSProperties, KeyboardEvent, ReactNode } from "react";
+import type { KeyboardEvent, ReactNode } from "react";
 
 import { Icon } from "../icons";
 import { useUiText } from "../uiText";
 import type { UiText } from "../uiText";
-import { CONTROL_TEXT_STYLE } from "./controlStyles";
 import { Popover } from "./Popover";
-import type { PopoverAlign, PopoverPlacement } from "./Popover";
-
-const triggerStyle: CSSProperties = {
-  ...CONTROL_TEXT_STYLE,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  minHeight: "2rem",
-  gap: "var(--space-1)",
-  padding: "var(--space-1) var(--space-2)",
-  background: "transparent",
-  color: "var(--color-neutral-700)",
-  border: "1px solid var(--color-neutral-300)",
-  borderRadius: "var(--radius-md)",
-  cursor: "pointer",
-};
-
-const menuStyle: CSSProperties = { display: "grid", gap: "var(--space-1)" };
-
-const itemStyle = (destructive: boolean, disabled: boolean): CSSProperties => ({
-  ...CONTROL_TEXT_STYLE,
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  width: "100%",
-  padding: "var(--space-2)",
-  background: "transparent",
-  border: "none",
-  borderRadius: "var(--radius-sm)",
-  textAlign: "left",
-  justifyContent: "flex-start",
-  cursor: disabled ? "not-allowed" : "pointer",
-  color: disabled
-    ? "var(--color-neutral-300)"
-    : destructive
-      ? "var(--color-status-danger)"
-      : "var(--color-neutral-900)",
-});
+import type { PopoverAlign, PopoverPlacement, PopoverRootMarker, PopoverRootVariant } from "./Popover";
 
 export interface MenuProps {
   trigger: ReactNode;
@@ -54,8 +16,16 @@ export interface MenuProps {
   onOpenChange?: (open: boolean) => void;
   align?: PopoverAlign;
   placement?: PopoverPlacement;
-  triggerStyle?: CSSProperties;
-  panelStyle?: CSSProperties;
+  /**
+   * Name this menu's rendered root — which is Popover's wrapper, since a Menu adds no root
+   * element of its own. `ThemeToggle`, `LanguageSwitcher` and `UserMenu` each return a bare
+   * Menu, so without this their roots all read `data-terp="popover"`.
+   */
+  "data-terp"?: PopoverRootMarker;
+  /** Distinguishes that component's variants on the same root. */
+  "data-variant"?: PopoverRootVariant;
+  /** Who owns the portalled panel — see PopoverProps; supply it in EVERY variant. */
+  "data-owner"?: string;
 }
 
 /** Dropdown menu built on Popover with roving focus and ARIA menu semantics. */
@@ -68,8 +38,9 @@ export function Menu({
   onOpenChange,
   align = "end",
   placement = "bottom",
-  triggerStyle: triggerStyleOverride,
-  panelStyle,
+  "data-terp": rootMarker,
+  "data-variant": rootVariant,
+  "data-owner": owner,
 }: MenuProps) {
   const resolve = useUiText();
   const menuRef = useRef<HTMLDivElement>(null);
@@ -97,14 +68,26 @@ export function Menu({
       onOpenChange={onOpenChange}
       align={align}
       placement={placement}
-      panelStyle={panelStyle}
+      data-terp={rootMarker}
+      data-variant={rootVariant}
+      data-owner={owner}
       trigger={
+        // Its own marker rather than the shared `iconbutton` it used to borrow. That marker
+        // is worn by sixteen visually different sites — the shell's two header toggles, four
+        // pagination arrows, a toast dismisser, the combobox's clear button, the calendar's
+        // month arrows, the DataView's expand toggle, the view-options panel's two reorder
+        // arrows and the DataView toolbar's clear-search button and two layout toggles — and it
+        // has no base rule at all, because each is styled by where it sits.
+        // This one is an outlined control with a border, a radius and control
+        // typography, and it is also the trigger whose root marker is about to become
+        // configurable, so a `[data-terp="popover"] > [data-terp="iconbutton"]` structural
+        // rule would have to grow a branch per root name and would silently stop matching
+        // the day one was added. A name of its own has neither problem.
         <button
           type="button"
-          data-terp="iconbutton"
+          data-terp="menu-trigger"
           aria-label={resolve(triggerLabel)}
           aria-haspopup="menu"
-          style={{ ...triggerStyle, ...triggerStyleOverride }}
         >
           {trigger}
         </button>
@@ -120,7 +103,6 @@ export function Menu({
           }}
           role="menu"
           data-terp="menu"
-          style={menuStyle}
           onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {
             switch (event.key) {
               case "Escape":
@@ -144,7 +126,16 @@ export function Menu({
                 focusItem("last");
                 break;
               case "Tab":
-                close(false);
+                // close(TRUE) — restore focus to the trigger, then let Tab's default action
+                // run from there. close(false) left focus on a tabIndex=-1 item inside a panel
+                // portalled to the END of document.body, and the panel is unmounted before the
+                // browser performs the default action: the sequential-navigation starting point
+                // was a removed node at the wrong end of the document, so Tab landed past all
+                // page content and Shift+Tab at the last focusable element on the page. The APG
+                // menu-button contract is that Tab closes the popup and moves to the next
+                // element after the BUTTON, which is what restoring focus first produces — in
+                // both directions. preventDefault is deliberately absent and must stay absent.
+                close(true);
                 break;
               default:
                 break;
@@ -186,6 +177,10 @@ export function MenuItem({
       aria-checked={selected}
       data-terp="menu-item"
       data-selected={selected === true ? "true" : undefined}
+      // Destructive is an enumerable choice, so it becomes an attribute. Disabled is not:
+      // this is a real <button> carrying the real disabled attribute, so :disabled already
+      // says it and inventing data-disabled beside it would be a second source of truth.
+      data-destructive={destructive ? "true" : undefined}
       tabIndex={-1}
       disabled={disabled}
       onClick={() => {
@@ -193,12 +188,15 @@ export function MenuItem({
           onSelect();
         }
       }}
-      style={itemStyle(destructive, disabled)}
     >
-      {icon !== undefined && <span aria-hidden="true" style={{ display: "inline-flex" }}>{icon}</span>}
+      {icon !== undefined && (
+        <span aria-hidden="true" data-terp="menu-item-icon">
+          {icon}
+        </span>
+      )}
       {resolve(label)}
       {selected === true && (
-        <span aria-hidden="true" style={{ display: "inline-flex", marginLeft: "auto" }}>
+        <span aria-hidden="true" data-terp="menu-item-check">
           <Icon name="check" />
         </span>
       )}

package/src/ui/Popover.tsx

@@ -9,6 +9,23 @@ injectTerpStyles();
 export type PopoverPlacement = "bottom" | "top";
 export type PopoverAlign = "start" | "end";
 
+/**
+ * The `data-terp` marker a Popover stamps on its rendered root.
+ *
+ * Three components in the package return a bare `Menu`, whose rendered root is this
+ * wrapper — so their root was indistinguishable from any other popover, and none of them
+ * could be styled or found. Threading the name through is what lets each say what it is
+ * without adding an element to anybody's layout.
+ *
+ * A closed union rather than `string`, because a marker is framework vocabulary: every value
+ * here needs a rule in the sheet and a line in the inventory, and the type says so before a
+ * test has to.
+ */
+export type PopoverRootMarker = "popover" | "theme-toggle" | "language-switcher" | "user-menu";
+
+/** Separates the variants of a component whose root is a Popover. */
+export type PopoverRootVariant = "inline" | "stacked" | "collapsed";
+
 export interface PopoverProps {
   trigger: ReactElement;
   children: (api: { close: (restoreFocus?: boolean) => void; panelId: string }) => ReactNode;
@@ -18,24 +35,29 @@ export interface PopoverProps {
   placement?: PopoverPlacement;
   align?: PopoverAlign;
   focusOnOpen?: boolean;
-  panelStyle?: CSSProperties;
+  /**
+   * Override the root's marker, for a component whose rendered root this wrapper IS.
+   * Named for the attribute it becomes, which is also what keeps the marker inventory
+   * honest — the scanner reads `data-terp` sites in component source, so a consumer
+   * writing `data-terp="user-menu"` is seen, while a `rootMarker` prop would not be.
+   */
+  "data-terp"?: PopoverRootMarker;
+  /** Distinguishes that component's variants on the same root. */
+  "data-variant"?: PopoverRootVariant;
+  /**
+   * Who owns the portalled panel, for a panel rule that has to reach it.
+   *
+   * Separate from `data-terp` on purpose. The root marker is necessarily CONDITIONAL — a
+   * component whose stacked variant renders its own div must not stamp the marker on the
+   * nested menu as well — so deriving the owner from it made the same component's panel
+   * `theme-toggle` in one variant and `popover` in the other. A panel rule would then reach
+   * one variant and silently miss the other, which is the failure mode the root selector
+   * list two doors down exists to warn about. Defaults to the root marker for callers who
+   * have no panel rule and do not care.
+   */
+  "data-owner"?: string;
 }
 
-const rootStyle: CSSProperties = { position: "relative", display: "inline-flex" };
-
-const basePanelStyle: CSSProperties = {
-  position: "fixed",
-  zIndex: 60,
-  minWidth: "12rem",
-  padding: "var(--space-1)",
-  fontFamily: "var(--font-family-sans)",
-  color: "var(--color-neutral-900)",
-  background: "var(--color-neutral-0)",
-  border: "1px solid var(--color-neutral-200)",
-  borderRadius: "var(--radius-lg)",
-  boxShadow: "var(--shadow-lg)",
-};
-
 const VIEWPORT_GUTTER = 8;
 const PANEL_GAP = 4;
 
@@ -55,7 +77,9 @@ export function Popover({
   placement = "bottom",
   align = "end",
   focusOnOpen = false,
-  panelStyle,
+  "data-terp": rootMarker,
+  "data-variant": rootVariant,
+  "data-owner": owner,
 }: PopoverProps) {
   const panelId = useId();
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
@@ -199,15 +223,25 @@ export function Popover({
   } as Partial<typeof trigger.props>);
 
   return (
-    <div ref={rootRef} data-terp="popover" style={rootStyle}>
+    <div ref={rootRef} data-terp={rootMarker ?? "popover"} data-variant={rootVariant}>
       {cloned}
       {isOpen && createPortal(
         <div
           id={panelId}
           ref={panelRef}
           data-terp="popover-panel"
+          // Whose panel this is. The panel is portalled to document.body, so a descendant
+          // selector rooted at the trigger's side of the tree cannot reach it — and a
+          // per-caller panel geometry therefore has nowhere to hang unless the panel itself
+          // says who owns it. This is what replaced the `panelStyle` prop: the owner's rule
+          // lives in the sheet with everything else instead of travelling as an object.
+          data-owner={owner ?? rootMarker ?? "popover"}
           tabIndex={-1}
-          style={{ ...basePanelStyle, ...panelStyle, ...panelPosition }}
+          // Only the measured part is inline: the left/top the layout effect computes from
+          // the trigger's rect and clamps against the viewport, and the visibility that
+          // hides the panel for the frame before that measurement exists. Everything the
+          // panel LOOKS like is a rule (ADR 0094).
+          style={panelPosition}
         >
           {children({ close, panelId })}
         </div>,

package/src/ui/Radio.tsx

@@ -1,5 +1,5 @@
 import { useId, useState } from "react";
-import type { CSSProperties, InputHTMLAttributes, ReactNode } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
 
 import { injectTerpStyles } from "../styles";
 import { useUiText } from "../uiText";
@@ -7,30 +7,6 @@ import type { UiText } from "../uiText";
 
 injectTerpStyles();
 
-const groupStyle: CSSProperties = { display: "grid", gap: "var(--space-2)", border: 0, padding: 0, margin: 0 };
-const legendStyle: CSSProperties = {
-  fontWeight: "var(--font-weight-medium)" as never,
-  padding: 0,
-  marginBlockEnd: "var(--space-1)",
-  fontSize: "var(--font-size-sm)",
-  color: "var(--color-neutral-700)",
-};
-const optionsStyle: CSSProperties = { display: "grid", gap: "var(--space-2)" };
-const labelStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  color: "var(--color-neutral-900)",
-  cursor: "pointer",
-  fontSize: "var(--font-size-sm)",
-};
-const inputStyle: CSSProperties = {
-  inlineSize: "1rem",
-  blockSize: "1rem",
-  accentColor: "var(--color-brand-primary)",
-  cursor: "pointer",
-};
-
 export interface RadioProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "checked" | "defaultChecked" | "onChange" | "value"> {
   label: UiText;
@@ -44,7 +20,7 @@ export interface RadioProps
 export function Radio({ label, value, checked, defaultChecked, onChange, style, ...rest }: RadioProps) {
   const resolve = useUiText();
   return (
-    <label style={{ ...labelStyle, ...style }}>
+    <label data-terp="control-label" style={style}>
       <input
         {...rest}
         type="radio"
@@ -53,7 +29,6 @@ export function Radio({ label, value, checked, defaultChecked, onChange, style,
         checked={checked}
         defaultChecked={defaultChecked}
         onChange={(event) => onChange?.(event.currentTarget.checked)}
-        style={inputStyle}
       />
       <span>{resolve(label)}</span>
     </label>
@@ -102,9 +77,9 @@ export function RadioGroup({
   }
 
   return (
-    <fieldset style={groupStyle}>
-      <legend style={legendStyle}>{resolve(label)}</legend>
-      <div style={optionsStyle}>
+    <fieldset data-terp="radio-group">
+      <legend data-terp="radio-group-legend">{resolve(label)}</legend>
+      <div data-terp="radio-group-options">
         {options?.map((option) => (
           <Radio
             key={option.value}

package/src/ui/Select.tsx

@@ -1,40 +1,17 @@
-import type { CSSProperties, SelectHTMLAttributes } from "react";
+import type { SelectHTMLAttributes } from "react";
 
 import { injectTerpStyles } from "../styles";
-import { CONTROL_TEXT_STYLE } from "./controlStyles";
 
 injectTerpStyles();
 
-// SVG chevron rendered via a data URL background — keeps the token-only styling
-// contract while giving <select> a consistent affordance across platforms.
-const chevronUrl =
-  "url(\"data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E\")";
-
-const selectStyle: CSSProperties = {
-  ...CONTROL_TEXT_STYLE,
-  lineHeight: 1.2,
-  maxWidth: "100%",
-  minWidth: 0,
-  minHeight: "2.25rem",
-  padding: "0 calc(var(--space-3) + 1.25rem) 0 var(--space-3)",
-  border: "1px solid var(--color-neutral-300)",
-  borderRadius: "var(--radius-md)",
-  color: "var(--color-neutral-900)",
-  background: `${chevronUrl} no-repeat right var(--space-2) center / 1rem 1rem, var(--color-neutral-0)`,
-  boxSizing: "border-box",
-  appearance: "none",
-  WebkitAppearance: "none",
-  MozAppearance: "none",
-};
-
 export type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
 
 /**
- * Token-styled select — use instead of a raw `<select>` (the module-boundary rule). Pass `<option>`
- * children as usual. The `data-terp="input"` marker opts the element into the shared focus
- * ring; a subtle SVG chevron replaces the native affordance for a consistent look.
+ * Token-styled select — use instead of a raw `<select>` (the module-boundary rule). Pass
+ * `<option>` children as usual. The `data-terp="input"` marker opts the element into the
+ * shared control surface and focus ring; the sheet replaces the native affordance with an
+ * SVG chevron so the control looks the same on every platform (ADR 0094).
  */
-export function Select({ style, ...rest }: SelectProps) {
-  return <select data-terp="input" {...rest} style={{ ...selectStyle, ...style }} />;
+export function Select(props: SelectProps) {
+  return <select data-terp="input" {...props} />;
 }
-

package/src/ui/Switch.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, InputHTMLAttributes } from "react";
+import type { InputHTMLAttributes } from "react";
 
 import { injectTerpStyles } from "../styles";
 import { useUiText } from "../uiText";
@@ -6,23 +6,6 @@ import type { UiText } from "../uiText";
 
 injectTerpStyles();
 
-const labelStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  color: "var(--color-neutral-900)",
-  cursor: "pointer",
-  fontSize: "var(--font-size-sm)",
-};
-
-const inputStyle: CSSProperties = {
-  inlineSize: "2.25rem",
-  blockSize: "1.25rem",
-  accentColor: "var(--color-brand-primary)",
-  cursor: "pointer",
-  transition: "background-color 150ms ease",
-};
-
 export interface SwitchProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "checked" | "defaultChecked" | "onChange" | "role"> {
   label: UiText;
@@ -35,7 +18,7 @@ export interface SwitchProps
 export function Switch({ label, checked, defaultChecked, onChange, style, ...rest }: SwitchProps) {
   const resolve = useUiText();
   return (
-    <label style={{ ...labelStyle, ...style }}>
+    <label data-terp="control-label" style={style}>
       <input
         {...rest}
         type="checkbox"
@@ -44,7 +27,6 @@ export function Switch({ label, checked, defaultChecked, onChange, style, ...res
         checked={checked}
         defaultChecked={defaultChecked}
         onChange={(event) => onChange?.(event.currentTarget.checked)}
-        style={inputStyle}
       />
       <span>{resolve(label)}</span>
     </label>

package/src/ui/Tabs.tsx

@@ -1,35 +1,12 @@
 import { useId, useMemo, useState } from "react";
-import type { CSSProperties, KeyboardEvent, ReactNode } from "react";
+import type { KeyboardEvent, ReactNode } from "react";
 
 import { injectTerpStyles } from "../styles";
 import { useUiText } from "../uiText";
 import type { UiText } from "../uiText";
-import { CONTROL_TEXT_STYLE } from "./controlStyles";
 
 injectTerpStyles();
 
-const rootStyle: CSSProperties = { display: "grid", gap: "var(--space-3)" };
-const tabListStyle: CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "var(--space-1)",
-  borderBlockEnd: "1px solid var(--color-neutral-200)",
-};
-const tabStyle = (selected: boolean): CSSProperties => ({
-  ...CONTROL_TEXT_STYLE,
-  fontWeight: (selected
-    ? "var(--font-weight-semibold)"
-    : "var(--font-weight-medium)") as never,
-  padding: "var(--space-2) var(--space-3)",
-  border: 0,
-  borderBlockEnd: selected ? "2px solid var(--color-brand-primary)" : "2px solid transparent",
-  color: selected ? "var(--color-brand-primary)" : "var(--color-neutral-600)",
-  background: "transparent",
-  cursor: "pointer",
-  marginBlockEnd: "-1px",
-});
-const panelStyle: CSSProperties = { color: "var(--color-neutral-900)" };
-
 export interface TabItem {
   value: string;
   label: UiText;
@@ -90,8 +67,8 @@ export function Tabs({ tabs, value, defaultValue, onChange, label }: TabsProps)
   }
 
   return (
-    <div data-terp="tabs" style={rootStyle}>
-      <div role="tablist" aria-label={label === undefined ? undefined : resolve(label)} style={tabListStyle} onKeyDown={onKeyDown}>
+    <div data-terp="tabs">
+      <div role="tablist" data-terp="tab-list" aria-label={label === undefined ? undefined : resolve(label)} onKeyDown={onKeyDown}>
         {tabs.map((tab) => {
           const selected = tab.value === selectedTab?.value;
           return (
@@ -106,7 +83,6 @@ export function Tabs({ tabs, value, defaultValue, onChange, label }: TabsProps)
               tabIndex={selected ? 0 : -1}
               disabled={tab.disabled}
               onClick={() => select(tab.value)}
-              style={tabStyle(selected)}
             >
               {resolve(tab.label)}
             </button>
@@ -118,7 +94,7 @@ export function Tabs({ tabs, value, defaultValue, onChange, label }: TabsProps)
           id={`${baseId}-panel-${selectedTab.value}`}
           role="tabpanel"
           aria-labelledby={`${baseId}-tab-${selectedTab.value}`}
-          style={panelStyle}
+          data-terp="tab-panel"
         >
           {selectedTab.content}
         </div>

package/src/ui/Textarea.tsx

@@ -1,27 +1,16 @@
-import type { CSSProperties, TextareaHTMLAttributes } from "react";
+import type { TextareaHTMLAttributes } from "react";
 
 import { injectTerpStyles } from "../styles";
-import { CONTROL_TEXT_STYLE } from "./controlStyles";
 
 injectTerpStyles();
 
-const textareaStyle: CSSProperties = {
-  ...CONTROL_TEXT_STYLE,
-  lineHeight: 1.4,
-  padding: "var(--space-2) var(--space-3)",
-  border: "1px solid var(--color-neutral-300)",
-  borderRadius: "var(--radius-md)",
-  color: "var(--color-neutral-900)",
-  background: "var(--color-neutral-0)",
-  boxSizing: "border-box",
-};
-
 export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 /**
- * Token-styled multiline input — use instead of a raw `<textarea>` (the module-boundary rule).
+ * Token-styled multiline input — use instead of a raw `<textarea>` (the module-boundary
+ * rule). Shares the `data-terp="input"` control surface; the sheet gives it the looser
+ * line height and block padding multiline copy needs (ADR 0094).
  */
-export function Textarea({ style, ...rest }: TextareaProps) {
-  return <textarea data-terp="input" {...rest} style={{ ...textareaStyle, ...style }} />;
+export function Textarea(props: TextareaProps) {
+  return <textarea data-terp="input" {...props} />;
 }
-

package/src/ui/Tooltip.tsx

@@ -1,27 +1,11 @@
 import { cloneElement, isValidElement, useId, useState } from "react";
-import type { CSSProperties, FocusEvent, MouseEvent, ReactElement } from "react";
+import type { FocusEvent, MouseEvent, ReactElement } from "react";
 
+import { injectTerpStyles } from "../styles";
 import { useUiText } from "../uiText";
 import type { UiText } from "../uiText";
 
-const wrapperStyle: CSSProperties = { position: "relative", display: "inline-flex" };
-const tooltipStyle: CSSProperties = {
-  position: "absolute",
-  zIndex: 1,
-  insetBlockEnd: "calc(100% + var(--space-1))",
-  insetInlineStart: 0,
-  maxInlineSize: "min(18rem, calc(100vw - 2 * var(--space-4)))",
-  padding: "var(--space-1) var(--space-2)",
-  borderRadius: "var(--radius-sm)",
-  color: "var(--color-neutral-0)",
-  background: "var(--color-neutral-900)",
-  fontSize: "var(--font-size-xs)",
-  fontWeight: "var(--font-weight-medium)" as never,
-  lineHeight: 1.4,
-  boxShadow: "var(--shadow-md)",
-  pointerEvents: "none",
-  whiteSpace: "normal",
-};
+injectTerpStyles();
 
 export interface TooltipProps {
   content: UiText;
@@ -47,7 +31,11 @@ export function Tooltip({ content, children }: TooltipProps) {
   }
 
   return (
-    <span style={wrapperStyle} onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
+    <span
+      data-terp="tooltip-anchor"
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+    >
       {cloneElement(children, {
         "aria-describedby": id,
         onFocus: (event: FocusEvent) => {
@@ -59,7 +47,7 @@ export function Tooltip({ content, children }: TooltipProps) {
           setOpen(false);
         },
       })}
-      <span id={id} role="tooltip" hidden={!open} style={tooltipStyle}>
+      <span id={id} role="tooltip" data-terp="tooltip" hidden={!open}>
         {resolve(content)}
       </span>
     </span>

package/src/uiText.tsx

@@ -100,6 +100,12 @@ export interface TerpStrings {
   themeLight: string;
   /** {@link ThemeToggle} option: the dark theme. */
   themeDark: string;
+  /** {@link ThemeToggle} option: the near-black dark theme. */
+  themeMidnight: string;
+  /** {@link ThemeToggle} option: the violet-tinted dark theme. */
+  themeTwilight: string;
+  /** {@link ThemeToggle} option: the high-contrast theme. */
+  themeContrast: string;
   /** {@link ThemeToggle} option: follow the OS preference. */
   themeSystem: string;
   /** Label of the {@link LanguageSwitcher} select. */
@@ -239,6 +245,9 @@ export const DEFAULT_STRINGS: TerpStrings = {
   theme: "Theme",
   themeLight: "Light",
   themeDark: "Dark",
+  themeMidnight: "Midnight",
+  themeTwilight: "Twilight",
+  themeContrast: "High contrast",
   themeSystem: "System",
   language: "Language",
   admin: "Admin",

package/src/ui/controlStyles.ts

@@ -1,9 +0,0 @@
-import type { CSSProperties } from "react";
-
-/** Stable typography for interactive controls, independent of surrounding display text. */
-export const CONTROL_TEXT_STYLE: CSSProperties = {
-  fontFamily: "var(--font-family-sans)",
-  fontSize: "var(--font-size-sm)",
-  fontWeight: "var(--font-weight-normal)" as CSSProperties["fontWeight"],
-  lineHeight: 1.25,
-};