@viax.io/uxm 4.36.0

package/dist/ui/editable-cell/editable-cell.css

@@ -0,0 +1,693 @@
+@charset "UTF-8";
+/* ── EditableCell ──
+   Inline-editable text/number cell. Display mode is a button styled as
+   text — hover surfaces a subtle background tint as the affordance, so
+   users know it's interactive without needing a pencil icon in every
+   cell. Edit mode swaps in an input that fills the cell; commit cues
+   (Enter / blur) are baked into the atom, no per-consumer wiring.
+
+   Every dimension and color is themable via `--uxm-editable-cell-*`
+   tokens so a designer can:
+     - bump the click-target size (padding) for touch
+     - shift the hover affordance from background tint to underline
+     - swap the focus ring color for a non-accent theme
+     - re-tint the inline error pill */
+.uxm-editable-cell {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  /* Width cap, per size (see the size presets at the bottom): `small` caps so
+     a long value can't push a table column unboundedly — past the cap it
+     truncates (display) or scrolls inside the input (editing); `medium` has NO
+     cap and simply fills its container, like every other input-family field in
+     a side panel. */
+  max-width: var(--_uxm-editable-cell-max-width, 320px);
+  padding: var(--_uxm-editable-cell-padding-y, 4px) var(--_uxm-editable-cell-padding-x, 8px);
+  /* PUBLISHED measurement, not a knob: how far the cell's TEXT sits from its
+     own box edge (inline padding + the transparent border below). A consumer
+     that has to align the text against something outside the cell reads this
+     instead of re-deriving it from the padding — FormField's outdent does,
+     so the cell's hover pill can bleed into the label gutter while the text
+     stays on the content grid.
+     Reads the INTERNAL per-size padding var (resolved by the size classes
+     below), so this stays correct at both `size="small"` and `size="medium"`
+     without FormField needing to know sizes exist.
+     KEEP IN STEP with the `padding` above and the `border` below: this is the
+     one place the inset is expressed, deliberately adjacent to what it
+     measures so a change to either can't silently drift from it. */
+  --uxm-editable-cell-text-inset: calc(var(--_uxm-editable-cell-padding-x, 8px) + 1px);
+  margin: 0;
+  /* Outdent — the cell APPLIES it, a host only asks for it. Hosts that lay the
+     cell out against their own content grid (FormField does) set
+     `--uxm-editable-cell-outdent: 1`; the default `0` leaves standalone and
+     table cells exactly where they were. The host deliberately passes a FLAG
+     rather than a length: the inset above is declared here, so it resolves
+     only on this element and below — a host computing the length itself would
+     read an undefined var and silently land on the fallback. Doing the
+     arithmetic here also means the flag can inherit from any ancestor, so a
+     cell wrapped in a row (paired with a translation count, a unit suffix)
+     lines up like a bare one. Align variants below re-anchor it. */
+  margin-inline-start: calc(-1 * var(--uxm-editable-cell-outdent, 0) * var(--uxm-editable-cell-text-inset));
+  /* Read inheritance for the FONT: a cell must read at the scale of whatever
+     surrounds it (13px table row, a PageHeader heading) — that genuinely
+     varies, which is why `size` exposes it as `1em`-by-default rather than a
+     pinned number. The COLOUR does not vary that way: primary text is
+     `--color-text` everywhere in the system, so inheriting only let a muted
+     column / dimmed row bleed in (consumers were pinning it back on the
+     wrapping cell). Pin it here through the component layer instead. */
+  font: inherit;
+  color: var(--uxm-editable-cell-color, var(--color-text));
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--uxm-editable-cell-radius, 4px);
+  cursor: text;
+  transition: background-color 0.1s ease, border-color 0.1s ease;
+  /* Position to anchor the inline error overlay. */
+  position: relative;
+  /* Every width in this atom — the `100%` above, the per-size `max-width`,
+     the input's `min-width: 100%`, the ghosts' cap — is meant to INCLUDE the
+     paddings and border, which is what the README documents and what the
+     input-family siblings (NumberInput, CurrencyInput, …) all declare. Until
+     now the atom inherited that from the consumer's global reset and silently
+     overflowed its container by padding + border in an app without one. State
+     it here; the elements below that carry their own padded, sized box repeat
+     it rather than relying on inheritance (`box-sizing` is not inherited). */
+  box-sizing: border-box;
+}
+
+.uxm-editable-cell:hover:not(:disabled) {
+  background-color: var(--uxm-editable-cell-hover-bg, var(--color-surface-alt));
+}
+
+/* Keyboard focus on the display cell matches the family's focus language —
+   accent border + 2px offset ring (same halo as TextInput and this atom's
+   own editing input), so tabbing across a table reads unmistakably. The
+   forced `--state-focus` variant lets the UXM canvas render it without
+   real keyboard interaction. */
+.uxm-editable-cell:focus-visible,
+.uxm-editable-cell--state-focus {
+  border-color: var(--uxm-editable-cell-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-editable-cell-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+/* Select / multiselect display cells put the focusable element on the INNER
+   trigger button, not the wrapper span — so the family focus halo has to
+   target the trigger directly. Without this, tabbing onto one of these cells
+   showed no focus ring at all (the wrapper's `:focus-visible` above can never
+   match a span that isn't focusable), even though the forced `--state-focus`
+   variant painted it in the canvas. (Date needs no entry here — its display
+   root is the `.uxm-editable-cell` button itself, covered above.) */
+.uxm-editable-cell__select-trigger:focus-visible {
+  border-color: var(--uxm-editable-cell-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-editable-cell-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+/* Forced hover — mirrors `:hover` above for the canvas. Editor preview only. */
+.uxm-editable-cell--state-hover:not(:disabled) {
+  background-color: var(--uxm-editable-cell-hover-bg, var(--color-surface-alt));
+}
+
+/* Pencil affordance — appears on hover / keyboard focus. The hover tint
+   alone can't signal editability inside a DataTable (the row's own hover
+   tint coincides with it), so the glyph is the unambiguous cue. Absolute
+   overlay: it never reflows the value. */
+.uxm-editable-cell__pencil {
+  position: absolute;
+  top: 50%;
+  right: var(--_uxm-editable-cell-padding-x, 8px);
+  transform: translateY(-50%);
+  display: inline-flex;
+  pointer-events: none;
+  color: var(--uxm-editable-cell-pencil-color, var(--color-text-muted));
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+
+.uxm-editable-cell:hover:not(:disabled) .uxm-editable-cell__pencil,
+.uxm-editable-cell:focus-visible .uxm-editable-cell__pencil,
+.uxm-editable-cell--state-hover:not(:disabled) .uxm-editable-cell__pencil,
+.uxm-editable-cell--state-focus .uxm-editable-cell__pencil {
+  opacity: 1;
+}
+
+/* Right-aligned cells anchor the glyph on the leading (left) edge so it
+   never collides with the value sitting against the right edge. */
+.uxm-editable-cell--align-right .uxm-editable-cell__pencil {
+  right: auto;
+  left: var(--_uxm-editable-cell-padding-x, 8px);
+}
+
+/* Reserve a gutter on the pencil's side so the glyph never overlaps the
+   value in narrow table cells. The value's anchored edge (left for left /
+   center align, right for right align) is unchanged — only the empty
+   opposite side gains room — so display→edit causes no text shift. The
+   editing branch is excluded; the input fills the cell with its own
+   padding. */
+.uxm-editable-cell:not(.uxm-editable-cell--editing):not(.uxm-editable-cell--align-right):not(.uxm-editable-cell--type-select):not(.uxm-editable-cell--type-multiselect) {
+  /* 20px = the fixed 16px pencil glyph + 4px breathing room. */
+  padding-inline-end: calc(var(--_uxm-editable-cell-padding-x, 8px) + 20px);
+}
+
+.uxm-editable-cell--align-right:not(.uxm-editable-cell--editing):not(.uxm-editable-cell--type-select):not(.uxm-editable-cell--type-multiselect) {
+  padding-inline-start: calc(var(--_uxm-editable-cell-padding-x, 8px) + 20px);
+}
+
+/* Date cells reserve the ISO editing width up front. */
+.uxm-editable-cell--type-date:not(.uxm-editable-cell--editing) {
+  min-width: calc(10ch + 2 * var(--_uxm-editable-cell-padding-x, 8px) + 20px);
+}
+
+/* Pick cells (select/multiselect) delegate the padded, bordered, chevron-
+   gutter surface to their inner `__select-trigger` button — the wrapper span
+   is only a positioning context for the Listbox + error popover. Strip the
+   wrapper's own box (it's excluded from the gutter rules above too) so the
+   value aligns at the same inset as text/number/date cells instead of sitting
+   double-indented, and so hover/focus tints paint on the trigger alone. */
+.uxm-editable-cell--type-select,
+.uxm-editable-cell--type-multiselect {
+  cursor: pointer;
+  padding: 0;
+  border: none;
+}
+
+/* Chevron affordance for select */
+.uxm-editable-cell__chevron {
+  position: absolute;
+  top: 50%;
+  right: var(--_uxm-editable-cell-padding-x, 8px);
+  transform: translateY(-50%);
+  display: inline-flex;
+  pointer-events: none;
+  color: var(--uxm-editable-cell-chevron-color, var(--color-text-muted));
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+
+.uxm-editable-cell:hover:not(:disabled) .uxm-editable-cell__chevron,
+.uxm-editable-cell:focus-visible .uxm-editable-cell__chevron,
+.uxm-editable-cell__select-trigger:focus-visible .uxm-editable-cell__chevron,
+.uxm-editable-cell--state-hover:not(:disabled) .uxm-editable-cell__chevron,
+.uxm-editable-cell--state-focus .uxm-editable-cell__chevron,
+.uxm-editable-cell--open .uxm-editable-cell__chevron {
+  opacity: 1;
+}
+
+.uxm-editable-cell__chevron svg {
+  transition: transform 0.12s ease;
+}
+
+/* Right-aligned select cells anchor the chevron on the leading edge */
+.uxm-editable-cell--align-right .uxm-editable-cell__chevron {
+  right: auto;
+  left: var(--_uxm-editable-cell-padding-x, 8px);
+}
+
+/* Select option labels truncate with an ellipsis */
+.uxm-editable-cell__option-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* One-click clear (×) inside the editing input — text/number/date cells with
+   `clearable`. The trailing gutter is reserved by the `--clearable` modifier
+   (not by the ✕'s presence), so the ✕ appearing/hiding with the draft never
+   shifts the text. Non-clearable cells carry no gutter at all. */
+.uxm-editable-cell--clearable.uxm-editable-cell--editing .uxm-editable-cell__input {
+  padding-inline-end: calc(var(--_uxm-editable-cell-padding-x, 8px) + 18px);
+}
+
+.uxm-editable-cell--clearable.uxm-editable-cell--align-right.uxm-editable-cell--editing .uxm-editable-cell__input {
+  padding-inline-end: var(--_uxm-editable-cell-padding-x, 8px);
+  padding-inline-start: calc(var(--_uxm-editable-cell-padding-x, 8px) + 18px);
+}
+
+.uxm-editable-cell--align-right .uxm-editable-cell__clear {
+  right: auto;
+  left: var(--_uxm-editable-cell-padding-x, 8px);
+}
+
+/* Deliberately NOT the family's `.uxm-field-clear` IconButton: that affordance
+   is 22×22, sized for the 12px-padded input family, and a `small` cell is only
+   ~24px tall in total — it would fill the whole row and blow the 18px gutter
+   the ghosts/input reserve above. This is the same glyph at a table-dense
+   footprint (12px icon + 2px padding), themed through the component-scoped
+   layer like every other surface here. */
+.uxm-editable-cell__clear {
+  position: absolute;
+  top: 50%;
+  right: var(--_uxm-editable-cell-padding-x, 8px);
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  margin: 0;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--uxm-editable-cell-clear-color, var(--color-text-muted));
+  cursor: pointer;
+}
+
+.uxm-editable-cell__clear:hover {
+  color: var(--uxm-editable-cell-clear-hover-color, var(--color-text));
+  background-color: var(--uxm-editable-cell-clear-hover-bg, var(--color-surface-alt));
+}
+
+/* Select trigger — reset to match the editable cell's display surface */
+.uxm-editable-cell__select-trigger {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--_uxm-editable-cell-padding-y, 4px) var(--_uxm-editable-cell-padding-x, 8px);
+  padding-inline-end: calc(var(--_uxm-editable-cell-padding-x, 8px) + 20px);
+  margin: 0;
+  font: inherit;
+  /* Same pinned colour as the cell above — the trigger IS the display surface
+     for pickers, so it must not fall back to whatever the row inherits. */
+  color: var(--uxm-editable-cell-color, var(--color-text));
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--uxm-editable-cell-radius, 4px);
+  cursor: pointer;
+  text-align: inherit;
+  transition: background-color 0.1s ease, border-color 0.1s ease;
+  box-sizing: border-box;
+}
+
+/* Open picker = this cell's "editing" state. Mirror the text/number/date
+   editing input's chrome exactly (same vars: card surface, accent border,
+   TextInput focus halo) so a cell being edited reads identically across all
+   five editor types instead of the picker staying a bare text run. */
+.uxm-editable-cell--open .uxm-editable-cell__select-trigger {
+  color: var(--uxm-editable-cell-input-color, var(--color-text));
+  background-color: var(--uxm-editable-cell-input-bg, var(--color-card));
+  border-color: var(--uxm-editable-cell-input-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-editable-cell-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+/* Clearable pickers clear from the field itself (the input-family
+   convention), so the trigger reserves a second gutter slot for the ✕
+   inboard of the chevron — the same two-slot layout as the date editor.
+   Gated on `--open`, the state that actually reveals the ✕, exactly as the
+   text/number/date twin gates its clear gutter on `--editing`. Reserving it
+   unconditionally instead would tax EVERY clearable picker cell ~22px of
+   label width for a control that is only ever reachable while the panel is
+   open — a permanent cost in a dense table, paid by cells that are merely
+   being read. The trade is that a long label can re-ellipsize as the panel
+   opens; that is the cheaper side, because opening already repaints the whole
+   trigger (surface, border, halo) and the open panel is `matchAnchorWidth`,
+   so it shows the full label right under the truncated one. No transition on
+   the padding on purpose — the reflow should land with the chrome, not
+   animate the text through intermediate truncations. */
+.uxm-editable-cell--clearable.uxm-editable-cell--open .uxm-editable-cell__select-trigger {
+  padding-inline-end: calc(var(--_uxm-editable-cell-padding-x, 8px) + 42px);
+}
+
+/* Right-aligned pickers move BOTH gutter controls to the leading edge (see the
+   chevron / ✕ rules below), so the reservation has to move with them — reserving
+   the trailing side would leave the label running straight under the icons. Same
+   swap the input and the width-keeper ghosts already do. */
+.uxm-editable-cell--align-right .uxm-editable-cell__select-trigger {
+  padding-inline-end: var(--_uxm-editable-cell-padding-x, 8px);
+  padding-inline-start: calc(var(--_uxm-editable-cell-padding-x, 8px) + 20px);
+}
+
+/* (0,4,0) — outranks BOTH the plain `--align-right` rule above (0,2,0) and the
+   `--clearable.--open` rule (0,3,0), so it has to restate both paddings: the
+   latter would otherwise leave a 42px trailing reservation on a cell whose
+   controls have all moved to the leading edge. */
+.uxm-editable-cell--clearable.uxm-editable-cell--align-right.uxm-editable-cell--open .uxm-editable-cell__select-trigger {
+  padding-inline-end: var(--_uxm-editable-cell-padding-x, 8px);
+  padding-inline-start: calc(var(--_uxm-editable-cell-padding-x, 8px) + 42px);
+}
+
+.uxm-editable-cell__trigger-clear {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--_uxm-editable-cell-padding-x, 8px) + 22px);
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  margin: 0;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--uxm-editable-cell-clear-color, var(--color-text-muted));
+  cursor: pointer;
+  /* Revealed with the chevron — the cell stays a quiet text run at rest.
+     `pointer-events` is gated ALONGSIDE the opacity, the same pairing the
+     pencil and chevron use: this element overlays the trigger, so an
+     `opacity: 0` that stayed hit-testable would turn its slice of a cell at
+     rest into an invisible one-click clear — swallowing the click that should
+     have opened the panel. Hidden means unclickable. */
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s ease;
+}
+
+/* Revealed ONLY while the panel is open — a picker's open panel IS its editing
+   surface (it wears the editing chrome above), so the ✕ lives there exactly
+   like the text/number/date ✕ lives inside the editing input. Hover keeps
+   surfacing the chevron alone, so a table at rest stays a quiet text run and
+   never offers a one-click destroy on a display cell. */
+.uxm-editable-cell--open .uxm-editable-cell__trigger-clear {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.uxm-editable-cell__trigger-clear:hover {
+  color: var(--uxm-editable-cell-clear-hover-color, var(--color-text));
+  background-color: var(--uxm-editable-cell-clear-hover-bg, var(--color-surface-alt));
+}
+
+.uxm-editable-cell--align-right .uxm-editable-cell__trigger-clear {
+  right: auto;
+  left: calc(var(--_uxm-editable-cell-padding-x, 8px) + 22px);
+}
+
+/* Calendar toggle inside the date editing cell — absolutely positioned in the
+   input's reserved trailing gutter (like the display pencil), so it overlays
+   the field without contributing width to the editing grid track. */
+.uxm-editable-cell__date-icon {
+  position: absolute;
+  top: 50%;
+  right: var(--_uxm-editable-cell-padding-x, 8px);
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  margin: 0;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--uxm-editable-cell-pencil-color, var(--color-text-muted));
+  cursor: pointer;
+}
+
+.uxm-editable-cell__date-icon:hover {
+  color: var(--uxm-editable-cell-date-icon-hover-color, var(--color-text));
+}
+
+.uxm-editable-cell--align-right .uxm-editable-cell__date-icon {
+  right: auto;
+  left: var(--_uxm-editable-cell-padding-x, 8px);
+}
+
+/* Reserve room for the calendar toggle so a full date never sits under it. */
+.uxm-editable-cell--type-date.uxm-editable-cell--editing .uxm-editable-cell__input {
+  padding-inline-end: calc(var(--_uxm-editable-cell-padding-x, 8px) + 20px);
+}
+
+.uxm-editable-cell--type-date.uxm-editable-cell--align-right.uxm-editable-cell--editing .uxm-editable-cell__input {
+  padding-inline-end: var(--_uxm-editable-cell-padding-x, 8px);
+  padding-inline-start: calc(var(--_uxm-editable-cell-padding-x, 8px) + 20px);
+}
+
+/* Clearable date cells host TWO gutter controls — the ✕ sits inboard of the
+   calendar toggle (mirrors DateInput's layout), so the input reserves both
+   slots (20px calendar + 22px clear). */
+.uxm-editable-cell--type-date .uxm-editable-cell__clear {
+  right: calc(var(--_uxm-editable-cell-padding-x, 8px) + 22px);
+}
+
+.uxm-editable-cell--type-date.uxm-editable-cell--align-right .uxm-editable-cell__clear {
+  right: auto;
+  left: calc(var(--_uxm-editable-cell-padding-x, 8px) + 22px);
+}
+
+.uxm-editable-cell--clearable.uxm-editable-cell--type-date.uxm-editable-cell--editing .uxm-editable-cell__input {
+  padding-inline-end: calc(var(--_uxm-editable-cell-padding-x, 8px) + 42px);
+}
+
+.uxm-editable-cell--clearable.uxm-editable-cell--type-date.uxm-editable-cell--align-right.uxm-editable-cell--editing .uxm-editable-cell__input {
+  padding-inline-end: var(--_uxm-editable-cell-padding-x, 8px);
+  padding-inline-start: calc(var(--_uxm-editable-cell-padding-x, 8px) + 42px);
+}
+
+.uxm-editable-cell--disabled .uxm-listbox {
+  pointer-events: none;
+}
+
+.uxm-editable-cell--disabled,
+.uxm-editable-cell:disabled {
+  cursor: default;
+  opacity: var(--uxm-editable-cell-disabled-opacity, 0.55);
+}
+
+/* The picker's text lives in its trigger, which declares its own `color` (see
+   `__select-trigger` above) — an inherited placeholder colour would lose to it,
+   so the empty rule has to name the trigger too. The (0,2,0) descendant
+   selector outranks the trigger's own (0,1,0) declaration. text/number/date
+   need no such entry: their value spans declare no colour and inherit this. */
+.uxm-editable-cell--empty,
+.uxm-editable-cell--empty .uxm-editable-cell__select-trigger {
+  color: var(--uxm-editable-cell-placeholder-color, var(--color-text-subtle));
+  font-style: italic;
+}
+
+/* Value container — truncates with an ellipsis once the cell hits its
+   max-width instead of growing the column. Needs to be an element of its
+   own: text-overflow can't ellipsize a flex container's anonymous text. */
+.uxm-editable-cell__value {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* An empty value renders no line box, which would collapse the cell to
+     its paddings and leave no click target. `1lh` guarantees one text
+     line's height, so the cell's height always derives from font-size +
+     padding alone — there is deliberately NO min-height knob. (The span is
+     a flex item here, so min-height applies despite the inline markup.)
+     The `1.2em` above is the pre-`lh` fallback (the unit needs Chrome 109 /
+     Safari 16.4 / Firefox 120): an engine that drops the `1lh` declaration
+     keeps a one-line floor approximating `line-height: normal`, rather than
+     collapsing an empty cell — with the min-height knob gone there is no
+     other backstop. Engines that do support `lh` take the exact value from
+     the later declaration. */
+  min-height: 1.2em;
+  min-height: 1lh;
+}
+
+.uxm-editable-cell--align-left {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+/* The outdent follows the edge the text is anchored to: a right-aligned cell
+   pulls on its TRAILING side, or the leading side would come off-grid while
+   the text stayed inset. A centered cell is anchored to neither edge, so it
+   gets none. (Both re-declare the leading margin rather than relying on the
+   base rule — same specificity, and these come later in the cascade.) */
+.uxm-editable-cell--align-right {
+  justify-content: flex-end;
+  text-align: right;
+  margin-inline-start: 0;
+  margin-inline-end: calc(-1 * var(--uxm-editable-cell-outdent, 0) * var(--uxm-editable-cell-text-inset));
+}
+
+.uxm-editable-cell--align-center {
+  justify-content: center;
+  text-align: center;
+  margin-inline-start: 0;
+}
+
+.uxm-editable-cell--editing {
+  /* inline-grid stacks the invisible width-keeper ghosts and the input in
+     one grid cell: the track (and thus the cell's min-content contribution
+     to auto table-column sizing) is sized by the ghosts, while the input —
+     which contributes zero width of its own — stretches to the track. */
+  display: inline-grid;
+  /* minmax(<floor>, 1fr): the track is at least the ghosts' width (the
+     cell's stable min-content contribution) and absorbs all free space up
+     to the wrapper's 100%. An auto track would NOT stretch here — the
+     align modifiers set justify-content on this same element, which
+     disables auto-track stretching.
+
+     The floor is a PUBLISHED knob because `max-content` is only the right
+     answer where the container is auto-sized. A `max-content` floor means
+     "never narrower than the whole draft on one line", so in a container
+     that's merely NARROWER than the draft — any fixed-width panel — the
+     track, and the input stretched to it, overflowed the cell's own box
+     (a 436px field in a Card ran 281px past it). Capping to the container
+     and preserving a `max-content` contribution are contradictory demands
+     on one track, so the context that knows which it needs picks: a host
+     laying the cell out at a definite width sets the floor to `0` and the
+     cell simply fills what it's given (FormField does exactly this — see
+     form-field.scss), while a DataTable leaves the default and keeps the
+     anti-jump behaviour the ghosts exist for. The ghosts still render
+     either way; a `0` floor just stops them forcing the track wider than
+     the cell. */
+  grid-template-columns: minmax(var(--uxm-editable-cell-editing-track-floor, max-content), 1fr);
+  padding: 0;
+  border: none;
+}
+
+/* Width-keeper ghosts — mirror the display button's text-affecting box
+   (font, paddings incl. the pencil gutter, border) so the editing cell
+   contributes exactly the same min-content width the display cell did. */
+.uxm-editable-cell__ghost {
+  grid-area: 1/1;
+  visibility: hidden;
+  white-space: pre;
+  /* Same cap as the display cell: a long value / draft must not expand the
+     column past max-width while editing — the input scrolls internally
+     instead. A fixed-px max (the var resolves to px) also caps the ghost's
+     intrinsic contribution to auto table-column sizing. */
+  max-width: var(--_uxm-editable-cell-max-width, 320px);
+  overflow: hidden;
+  padding: var(--_uxm-editable-cell-padding-y, 4px) calc(var(--_uxm-editable-cell-padding-x, 8px) + 20px) var(--_uxm-editable-cell-padding-y, 4px) var(--_uxm-editable-cell-padding-x, 8px);
+  border: 1px solid transparent;
+  font: inherit;
+  /* Same box model as the display cell whose width these mirror — under
+     `content-box` the cap above would exclude these paddings and the editing
+     track would come out wider than the display cell it replaces. */
+  box-sizing: border-box;
+}
+
+/* Clearable date editing reserves BOTH gutter slots in the input (calendar
+   20px + clear 22px = 42px) — the ghosts must reserve the same, or the grid
+   track (sized by the ghosts) undersizes the input by the clear slot and the
+   date's tail clips out of view. Only the TOTAL horizontal padding matters
+   here (the ghosts are invisible width-keepers), so one physical side is
+   enough for both alignments. */
+.uxm-editable-cell--clearable.uxm-editable-cell--type-date .uxm-editable-cell__ghost {
+  padding-inline-end: calc(var(--_uxm-editable-cell-padding-x, 8px) + 42px);
+}
+
+.uxm-editable-cell__input {
+  grid-area: 1/1;
+  /* `width: 0; min-width: 100%` — the input contributes ZERO intrinsic
+     (min-content) width to sizing (its default ~20ch would widen an auto
+     table column on entering edit mode — the display→edit "jump"; `size`
+     is even ignored for type=number), then stretches to the grid track in
+     layout via the percentage min-width. The track itself is sized by the
+     width-keeper ghosts above. */
+  width: 0;
+  min-width: 100%;
+  /* `min-width: 100%` is the grid track's width — under `content-box` the
+     paddings and border would be added ON TOP of it and the input would
+     overhang the cell it's editing. (Browsers ship form controls as
+     `content-box`, so this can't be left to inheritance either.) */
+  box-sizing: border-box;
+  padding: var(--_uxm-editable-cell-padding-y, 4px) var(--_uxm-editable-cell-padding-x, 8px);
+  margin: 0;
+  font: inherit;
+  color: var(--uxm-editable-cell-input-color, var(--color-text));
+  background-color: var(--uxm-editable-cell-input-bg, var(--color-card));
+  /* Border defaults match TextInput: idle = `--color-border`, focused =
+     `--color-accent`. The earlier "start at accent → focus to accent-bold"
+     pattern read as a different family of input than the rest of the
+     library, which broke the design-system promise that a focused input
+     looks the same wherever it appears. */
+  border: 1px solid var(--uxm-editable-cell-input-border, var(--color-border));
+  border-radius: var(--uxm-editable-cell-radius, 4px);
+  outline: none;
+  transition: border-color 0.15s ease;
+  text-align: inherit;
+  /* Inherit alignment from the parent's --align modifier via flex/text
+     alignment on the wrapper. */
+}
+
+.uxm-editable-cell--align-left .uxm-editable-cell__input {
+  text-align: left;
+}
+
+.uxm-editable-cell--align-right .uxm-editable-cell__input {
+  text-align: right;
+}
+
+.uxm-editable-cell--align-center .uxm-editable-cell__input {
+  text-align: center;
+}
+
+.uxm-editable-cell__input:focus,
+.uxm-editable-cell--force-input-focus .uxm-editable-cell__input {
+  /* Match TextInput's focus halo exactly — same 2px outline + 2px offset
+     accent ring on top of the accent border. Designers and end users see
+     identical visual language for "input has focus" everywhere in the
+     library. */
+  border-color: var(--uxm-editable-cell-input-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-editable-cell-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+/* Severity tints the input border; the message itself rides in a popover
+   Banner (warning = recoverable input problem, error = failed save). No
+   halo ring while a problem shows — the banner already carries the signal,
+   and a second ring reads as noise. `outline: none` is explicit so the
+   accent :focus halo (declared above) can't bleed through and clash with
+   the severity border while the user corrects in place. */
+.uxm-editable-cell--error .uxm-editable-cell__input {
+  border-color: var(--uxm-editable-cell-error-border, var(--color-danger-text));
+  outline: none;
+}
+
+.uxm-editable-cell--warning .uxm-editable-cell__input {
+  border-color: var(--uxm-editable-cell-warning-border, var(--color-warning-text));
+  outline: none;
+}
+
+/* Compact Banner for the cell's error popover — the stock Banner is a
+   page-level strip (12/16px padding, 14px font); inside a table-cell
+   popover it shrinks to caption scale. Colors stay the Banner's own
+   variant tokens so warning / error read identically everywhere. */
+.uxm-editable-cell__error-banner {
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  font-size: calc(12px * var(--type-scale, 1));
+  border-radius: 6px;
+  max-width: 320px;
+}
+
+.uxm-editable-cell__error-banner .uxm-banner__icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* ── Size presets ──
+   Symmetric per-size knob sets, same pattern as Tag: each size owns
+   `--uxm-editable-cell-{size}-{padding-x,padding-y,font-size}`. There is no
+   height knob — the cell's height always DERIVES from font-size × line-height
+   + paddings (the `1lh` floor on `__value` covers the empty-value case), so
+   no setting can silently stop mattering. Instead of duplicating every
+   consumption site (gutters, ghosts, input, trigger all derive from the same
+   dimension vars), the base rules read private `--_uxm-editable-cell-*` pipe
+   vars and each size modifier re-points them at its own knob set. Defining
+   the pipes ON the cell also means one size's override can't leak into the
+   other. Double-class selector = (0,2,0), beating any single-class override
+   regardless of source order.
+   `small` = the dense DataTable scale (default). Its font-size falls back
+   to `1em` — i.e. exactly the pre-knob `font: inherit` behaviour (a cell in
+   a PageHeader rename keeps the heading's size, a table cell the table's) —
+   until a designer pins a px value.
+   `medium` = the input-family scale for standalone use (side panels,
+   detail views), where a table-dense cell looks undersized next to real
+   inputs. It pins 14px: standalone contexts have no table scale to inherit,
+   and it drops the width cap entirely (`none`) so the field fills whatever
+   column it sits in — a 600px panel with 16px padding gives a 568px cell,
+   `border-box`, its own padding inside that. */
+.uxm-editable-cell.uxm-editable-cell--small {
+  --_uxm-editable-cell-max-width: var(--uxm-editable-cell-small-max-width, 320px);
+  --_uxm-editable-cell-padding-x: var(--uxm-editable-cell-small-padding-x, 8px);
+  --_uxm-editable-cell-padding-y: var(--uxm-editable-cell-small-padding-y, 4px);
+  font-size: var(--uxm-editable-cell-small-font-size, 1em);
+}
+
+.uxm-editable-cell.uxm-editable-cell--medium {
+  --_uxm-editable-cell-max-width: var(--uxm-editable-cell-medium-max-width, none);
+  --_uxm-editable-cell-padding-x: var(--uxm-editable-cell-medium-padding-x, 12px);
+  --_uxm-editable-cell-padding-y: var(--uxm-editable-cell-medium-padding-y, 6px);
+  font-size: calc(var(--uxm-editable-cell-medium-font-size, 14px) * var(--type-scale, 1));
+}