@lotics/ui 26.4.1 → 27.7.0

package/src/reference_field.tsx

@@ -220,6 +220,7 @@ export function ReferenceField(props: ReferenceFieldProps) {
       triggerRef={anchor}
       side="bottom"
       align="start"
+      inheritTriggerWidth
     >
       {/* THE KIT'S FIELD, not a lookalike. This was hand-rolled — a Pressable
           wearing copies of the field's border, radius, height and hover — and it
@@ -261,12 +262,24 @@ export function ReferenceField(props: ReferenceFieldProps) {
           rather than a hand-picked font weight; the facts are `DetailRow`s, which
           is what label-beside-value IS everywhere else on this page; and the
           verbs sit in the popover's own pinned footer rather than floating after
-          the last fact. Width matches `Peek`'s own content width so every peek in
-          an app is the same object.
-          `labelWidth` is the one override, and it is not arbitrary: a `DetailTable`
-          STACKS its columns below `labelWidth + MIN_CONTROL_WIDTH + 24`, so the
-          page's 150 would flip a 320 popover into stacked form grammar. 88 keeps
-          the summary side-by-side, which is the whole point of a glance. */}
+          the last fact.
+
+          WIDTH COMES FROM THE FIELD (`inheritTriggerWidth`), not a constant. A
+          fixed 320 was "every peek in an app is the same object", and the object
+          it was actually the same as was nothing on screen: measured on a record
+          page, a 558px field opened a 320px panel left-aligned under it, stopping
+          238px short of the edge the reader's eye had just travelled to. A
+          popover narrower than the control that opened it reads as belonging to
+          something else. `InlineSelect` — the same shape, an inline field opening
+          a `triggerRef` popover — already inherits its field's width, so the two
+          were following different rules for one job.
+
+          The prop is floored at `MIN_CONTROL_WIDTH`, so a reference in a dense
+          grid column still opens something readable rather than a 90px sliver.
+          Between that floor and `labelWidth + MIN_CONTROL_WIDTH + 24` a
+          `DetailTable` STACKS its columns, which is the right answer at that
+          width, not a failure — 88 keeps the side-by-side grammar wherever there
+          is room for it, which is the whole point of a glance. */}
       {/* `PopoverContent` PARTITIONS its children: a `PopoverHeader` sits above
           the scroller, a `PopoverFooter` is pinned below it, and everything else
           scrolls between them. This component used none of that — it disabled
@@ -274,11 +287,12 @@ export function ReferenceField(props: ReferenceFieldProps) {
           is invisible at three facts and fatal at eleven: the panel ran past the
           viewport with no way to scroll, carrying its own Save button off-screen
           with it. The three-fact fixture is what hid it. */}
-      {/* `width` on the PANEL, not `style` — `style` reaches only the body, so a
-          long referenced name in the header stretched the panel past it and the
-          facts sat in a box wider than themselves. `maxHeight` stays on the
-          body: that is the band that scrolls. */}
-      <PopoverContent width={320} style={{ maxHeight: 420 }}>
+      {/* No `width` here at all now: a fixed panel width is applied LAST in the
+          style chain, so it beats `inheritTriggerWidth` — passing both would have
+          silently kept the 320. `maxHeight` stays on the body, which is the band
+          that scrolls; the header keeps its own height so a wrapped two-line name
+          is never what scrolls out of view. */}
+      <PopoverContent style={{ maxHeight: 420 }}>
         <PopoverHeader>
           <DialogSectionHeadingTitle description={code}>{name}</DialogSectionHeadingTitle>
         </PopoverHeader>

package/src/select.tsx

@@ -226,12 +226,27 @@ function SelectTrigger<T extends string>({
     <FocusRingPressable
       ref={ref}
       testID={testID}
-      // Without a role this Pressable renders as an unfocusable <div> on web — the
-      // trigger drops out of the tab order and Enter/Space can't open it. `button`
-      // makes it tab-focusable and maps keyboard activation to onPress; `aria-expanded`
-      // announces open/closed to assistive tech. The W3C props, NOT `accessibilityState` —
-      // this react-native-web build drops the latter silently.
-      accessibilityRole="button"
+      // `combobox`, NOT `button`, and the reason is structural rather than semantic.
+      // A role is what react-native-web picks the ELEMENT from, and `button` gave a real
+      // <button> — whose content model forbids interactive descendants. The sanctioned
+      // chip-box (`renderSelected` → `<Chip onDismiss>`, the reason there is no separate
+      // TagInput) puts a remove button inside the trigger, so the trigger rendered a
+      // <button> inside a <button>: invalid HTML, a React error on every mount, and a
+      // removal control of doubtful reachability. `combobox` renders a <div>, which may
+      // legally contain buttons, and it is the role the APG pattern this control already
+      // follows actually calls for (docs/accessibility.md: a popup opens on Enter/Space,
+      // never on Tab arrival). Verified on the chip demo: tab-focusable (tabindex 0),
+      // Enter opens, pointer opens, Escape closes, and the ✕ removes without opening.
+      //
+      // Without any role this Pressable would render an unfocusable <div> — out of the
+      // tab order, no keyboard activation. `aria-expanded` announces open/closed. The
+      // W3C props, NOT `accessibilityState` — this build drops the latter silently.
+      //
+      // When `searchable`, OptionList's filter input is ALSO a combobox (it owns
+      // aria-controls + aria-activedescendant, the editable half of the pattern). Two
+      // combobox-shaped controls across two focus events is redundant, not wrong — and
+      // strictly better than the invalid nesting it replaced.
+      accessibilityRole="combobox"
       accessibilityLabel={accessibilityLabel}
       aria-expanded={open}
       aria-disabled={disabled}

package/src/summary_line.tsx

@@ -32,6 +32,20 @@ export interface SummaryLineProps {
  * dashboard stat band: that's `KPIStrip` (a boxed metric grid for dashboard
  * pages, left untouched). Here there's no card, no big numbers, no column rules
  * — a small `Metric` value + a muted label, items wrapping, separated by space.
+ *
+ * **It summarizes a SET, and it goes with the set it summarizes.** Every item must be
+ * an aggregate over the rows in view — a count, a sum, a fill — so the strip earns its
+ * place by answering something no single row can. Nesting counts as a set: a record
+ * that gathers children (a consol of house shipments, an order of lines) may carry one
+ * above THAT list.
+ *
+ * **Never on a record's identity band, reporting that record's own state.** Derived
+ * verdicts about one record — "documents incomplete", "2 fields need checking", "no
+ * next milestone" — are a checklist, and a record does not carry a checklist
+ * (`docs/catalog.md`); work state belongs to `Pipeline`, a field's problem to a
+ * `Callout` on the field that can fix it. Such a strip also restates at a distance
+ * what the sections below state in place, so it goes stale against its own record and
+ * gives the reader two versions of one truth.
  */
 export function SummaryLine(props: SummaryLineProps) {
   const { items } = props;

package/src/text_input_field.tsx

@@ -256,7 +256,14 @@ const styles = StyleSheet.create({
   // padding stay (they hold the field's size); the horizontal padding goes,
   // because the host already spent CONTROL_TEXT_INSET and two insets stacked
   // shift the text 8px right the moment the field focuses.
-  seamless: { borderColor: "transparent", backgroundColor: "transparent", paddingHorizontal: 0 },
+  //
+  // `borderWidth: 0`, not merely a transparent colour. A transparent border still
+  // OCCUPIES its 1px in the box model, so hiding the colour left the second inset
+  // in place at 1/8th the size: measured, the text moved 561 → 562 on focus — the
+  // same defect this style exists to fix, at the scale that survives a glance.
+  // Safe for height because the box is `border-box`: dropping the border changes
+  // the content box, never the field's 40px outer size.
+  seamless: { borderColor: "transparent", borderWidth: 0, backgroundColor: "transparent", paddingHorizontal: 0 },
   disabled: {
     color: colors.zinc["400"],
     outlineStyle: "none" as unknown as "solid",

package/src/text_link.tsx

@@ -20,11 +20,15 @@ export interface TextLinkProps extends TextProps {
  * "this opens somewhere else" signal.
  *
  * It does NOT act. An `onPress` here used to resolve to `role="button"`, so one
- * export was three components — a link, a button, and a passive marker — behind
- * one name, inside `OptionList`, `FilterChip` and others. That mode is
- * `TextButton` now — also underlined, since that is what marks a surface-less
- * control interactive, but in ZINC: blue is reserved for navigation, so the ink is
- * what says whether a press moves you or acts. Pick by what the press DOES.
+ * export was three components — a link, a button, and a passive marker — behind one
+ * name, inside `OptionList`, `FilterChip` and others.
+ *
+ * The act mode briefly became its own surface-less component and is now gone
+ * entirely: it made underline mean two things separable only by ink, and it competed
+ * with the `Button` colour ladder for the job `muted` already does. **Underlined text
+ * is the NAVIGATION affordance; anything that acts carries a control surface** —
+ * `Button` in chrome, `InlineButton` on a field. A quiet verb that cannot sit against
+ * a text column belongs in chrome, not in a rung of its own.
  */
 export function TextLink(props: TextLinkProps) {
   const { icon, href, children, color, style, ...textProps } = props;

package/src/text_button.tsx

@@ -1,139 +0,0 @@
-import { type ReactNode } from "react";
-import { StyleSheet } from "react-native";
-import { PressableHighlight } from "./pressable_highlight";
-import { Text } from "./text";
-
-/** Two only. Deliberately NOT the whole `TextColor` palette: `muted` would mute the
- *  one thing carrying the act's weight, and the rest (warning/success/inverted) name
- *  states, not verbs. Reach for `Button color="muted"` when an act must be quieter. */
-export type TextButtonColor = "default" | "danger";
-
-export interface TextButtonProps {
-  /** The verb, as words. */
-  children: ReactNode;
-  /** The act. REQUIRED — a text button with nothing to do is just `Text`. */
-  onPress: () => void;
-  /** `default` = neutral ink; `danger` = destructive. */
-  color?: TextButtonColor;
-  /**
-   * Nothing to act on. Pass it UNCONDITIONALLY and disable it rather than
-   * rendering the verb only once its target exists — an action that appears and
-   * disappears reflows the line it sits in, which is the one thing a control in
-   * a row of text must never do.
-   */
-  disabled?: boolean;
-  /** Announced name, when the words alone are ambiguous ("Open" → "Open customer"). */
-  accessibilityLabel?: string;
-  /** Truncate at this many lines (a label in a narrow row). */
-  numberOfLines?: number;
-  tooltip?: string;
-}
-
-/**
- * A low-chrome ACTION rendered at text weight — "Select all", "Clear",
- * "Add stop". The third member of the action family, by CHROME:
- * `Button` (a 40px control with a surface) → `InlineButton` (28px, filled, living
- * on a field's own surface) → this (no surface AT REST, sitting in a line of text).
- *
- * UNDERLINED, in NEUTRAL ink — what Airbnb ships for a text action, and the shape
- * that keeps this kit's own colour rule intact:
- *
- *   underline = INTERACTIVE      blue = NAVIGATION
- *   `Link`/`TextLink`  blue + underline  → navigates
- *   `TextButton`       zinc + underline  → acts
- *
- * The underline is the affordance and it is not optional. With no surface and no
- * tint, nothing else says at rest that the words can be pressed: POSITION is a
- * learned convention rather than an affordance (invisible to a first-time reader),
- * and hover is not one either — absent on touch, and revealed only once you are
- * already there. A tint is the other way to say it, the one Material and HIG take,
- * but blue is spoken for here and a second accent for "actionable" would collide
- * with the one-accent-per-purpose rule.
- *
- * This is also why it holds INSIDE a run of prose, where colour alone could not
- * distinguish an embedded control at all (WCAG 1.4.1 / F73).
- *
- * Built on `PressableHighlight` rather than a pressable `Text`, because a `Text`
- * with `onPress` gets NEITHER hover nor a focus ring: it renders a real
- * `<button>` with `tabIndex=0`, `outline: none` and no box-shadow, so a keyboard
- * user lands on it with no indication they have. A focusable control with no focus
- * treatment is a bug, and hand-rolling hover + focus onto `Text` would duplicate
- * machinery this already owns. The inherited hover wash is Material's state layer
- * by another name, and it costs nothing at rest, so the chrome ladder above holds.
- *
- * The padding/negative-margin bleed is `Peek`'s: the wash and the focus ring need
- * room off the glyphs, and the margins give it back so the line's layout never
- * shifts — `OptionList` depends on that, insetting 8px so its select-all verbs
- * line up under the option labels above.
- *
- * ONE SIZE (`Text`'s own `sm`) and no icon: it sits in a line of text and matches
- * it. A verb needing an icon or a real hit target is a `Button`.
- *
- * It is TEXT-height, not control-height, and that is deliberate: `marginVertical`
- * absorbs the touch box so the height IN FLOW stays 24 and dropping one into a
- * dense band (`OptionList`'s select-all, `FilterChip`'s Clear) cannot grow that
- * band. Do NOT match `Button`'s 40 to make a mixed row line up — that inflates
- * every inline use and collapses the chrome ladder above, turning this into a
- * Button without a fill. A row that mixes rungs aligns them the way such a row
- * should anyway: `alignItems: "center"`, which lands a centred 32px box's text on
- * the same line as a centred 40px one (measured: 0px apart in a peek footer).
- *
- * It sets NO `alignSelf`, so it obeys its parent — which is what a row wants, and
- * a baked `flex-start` top-aligned it against a taller sibling and silently
- * overrode a footer's `alignItems: center`. In a COLUMN container a `Pressable`
- * stretches, so the hover wash would run the full width for a two-word verb: wrap
- * it in a `flexDirection: "row"` View there, the same thing a `Button` needs.
- */
-export function TextButton(props: TextButtonProps) {
-  const { children, onPress, color = "default", disabled, accessibilityLabel, numberOfLines, tooltip } = props;
-  // `TextColor` tokens throughout, no raw palette access: neutral ink IS `default`,
-  // and `zinc-400` is `Button`'s own disabled ink — an inert control should read the
-  // same whatever its chrome, where muting to zinc-600 left it looking merely quiet.
-  const ink = disabled === true ? "zinc-400" : color === "danger" ? "danger" : "default";
-  return (
-    <PressableHighlight
-      focusRing
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      aria-disabled={disabled === true ? true : undefined}
-      disabled={disabled}
-      tooltip={tooltip}
-      // 32px box + 4px slop = the 40px target `Peek` keeps for the same shape. A
-      // text action measured 24px on its own, which clears WCAG 2.5.8's 24×24
-      // floor and nothing else — and it sits in dense rows, exactly where a thumb
-      // needs the margin most.
-      hitSlop={4}
-      onPress={onPress}
-      // After the inherited wash, so a disabled verb does not light up under the
-      // pointer — `hovered` still fires on a disabled Pressable.
-      style={[styles.trigger, disabled === true ? styles.dead : null]}
-    >
-      <Text decoration="underline" weight="medium" color={ink} numberOfLines={numberOfLines}>
-        {children}
-      </Text>
-    </PressableHighlight>
-  );
-}
-
-const styles = StyleSheet.create({
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    // NO `alignSelf` here — see the prop. A baked `flex-start` is a CROSS-axis
-    // instruction, so it means "hug the words" only in a column; in a row it means
-    // top-align, and it silently overrode a footer's `alignItems: center`.
-    borderRadius: 6,
-    // Room for the wash + focus ring, given straight back as margin so adding a
-    // TextButton to a line cannot move anything around it (`Peek`'s idiom). The
-    // 32px box carries the touch target; `marginVertical` absorbs 8 of it, so the
-    // height IN FLOW stays 24 and a row's rhythm is unchanged.
-    minHeight: 32,
-    marginVertical: -4,
-    // 6 rather than `Peek`'s 8: these come in GROUPS (OptionList's select-all /
-    // deselect-all sit 16 apart), and an 8px bleed each side would leave adjacent
-    // washes touching.
-    paddingHorizontal: 6,
-    marginHorizontal: -6,
-  },
-  dead: { backgroundColor: "transparent" },
-});