`item-disabled-opacity` hardcoded `0.55`, off the framework's canonical disabled
opacity (`--opacity-disabled` = 0.4, used by Dialog and others). dropdown-menu +
context-menu now reference the token — disabled menu items match every other
disabled surface. Browser-verified: the resolved token is 0.4.
Scoped to the disabled-opacity drift only. The other THEME-SYS-2 candidates are
left as justified non-drift: `overlay-opacity 62%` / calendar `day-outside 0.62`
are off-scale (no `--opacity-62`; the 0.05-step scale has no slot) named recipe
tokens — a deliberate scrim density, which the off-scale doctrine permits; and
select `item-description-font-size 0.85em` is a RELATIVE unit with no absolute
`--font-size-*` equivalent.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- drawer-007 + popover-001 → fixed (729f3c0b).
- SYS-008 (SYS-A33-CLONE) → refuted: re-verification found NO `new Map(this.x)`
clone-and-reassign or `$state(new Map/Set)` registry in any of the four
providers (nor the shared soma layers). They track items via DOM query + the
value opt + the lifted selectedSet. The finding does not hold.
Note: the drawer SYS-5 double-write is systemic across the provider (Title
role/aria-level, Trigger type/aria-haspopup/aria-expanded share the pattern) —
a broader morfo↔soma de-dup, beyond drawer-007's Content location.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Both parts register with `syncAttrs: true`, so the runtime writes their
morfo-declared attrs to the DOM after render — overwriting any provider re-set
(the dialog-001 mechanism). The providers re-declared the same attrs anyway:
- drawer Content [drawer-007]: dropped manual `role: 'dialog'` + `aria-modal`.
The morfo Content declares `role: 'dialog'` and `aria-modal` (condition: the
registered `modal` source = `variant === 'overlay'` = isOverlay) — identical
values. Browser-verified: after the change the Content still has
role="dialog" + aria-modal="true" on an overlay drawer, now from the morfo.
- popover Close [popover-001]: dropped manual `type: 'button'` +
`aria-label`. The morfo Close declares `type` and `aria-label` via
`commonRef('buttons.close')`, which syncAttrs already wrote (the provider's
POPOVER_LANGS.CLOSE re-set was dead). Removed the now-orphan import.
Single authority per attribute (rule 7.7). check: 0 new errors; drawer +
popover provider tests 7/7.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The ~12 overlay recipes hardcoded an ad-hoc parallel z-index scale (raw integers
60–99/1200) that duplicated nothing reusable and had drifted out of order
(tooltip 76 < dropdown 80 — a tooltip painted BEHIND a dropdown). They are now a
named scale.
- `STATIC_Z_INDEX_OVERLAY` (static.ts) → emitted as `--z-index-overlay-{inline,
backdrop,content,floating,tooltip,detached,toast}`. A SEPARATE scale from the
global `--z-index-*` ladder (which orders the depth planes) — overlays portal
to <body> as siblings of modals, so they share one flat low band where each
rung sits just above the modal scrim. Mapping them to the 300–900 ladder would
hide a dropdown/select/popover opened INSIDE a dialog (dropdown 300 < modal
700); the combobox recipe already warned about this. `tooltip` now sits above
`floating` (fixes the inversion); `toast` stays above the soma FloatPanel band.
- Every overlay recipe token (`content-z`/`overlay-z`/`inline-z`/`toaster-z`/
`preview-z`) now references `var(--z-index-overlay-*)` — zero raw integers.
dialog/drawer gain an explicit `content-z` rung (drops the `calc(... + 1)`).
- Guard (contracts.test.ts, "overlay z-index against raw integers"): a recipe
`*-z` token must reference the scale, never a bare integer. Proven to catch
drift (a raw `'76'` makes it fail). Local `z-index: 0..5` (avatar/tabs/sticky)
is intra-component relative stacking — out of scope, stays.
- Docs: THEMING.md §35 rewritten to describe the consolidated scale + the
flat-band rationale + the guard; token table gains `--z-index-overlay-*`;
testing-and-tooling.md documents the catalogue guards (VG-8/SYS-1/A31/A30/
THEME-SYS-1).
Stacking order verified from the resolved CSS (deterministic z compare: content
70 < floating 80 < tooltip 90 < toast 1200; dropdown-in-dialog preserved). A
live browser check was blocked by a port conflict with another session's server.
check: 0 new type errors; the 5 guards green.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
date/time/color-field assigned `field.inputId.current = opts.id.current` inside
a `$effect` — the A30 anti-pattern (an effect for a one-shot id registration is
wasteful + order-fragile). `opts.id` is available at construction and the
parent Field context resolves synchronously, so this is a plain constructor
assign. Mirrors the 12 field-family providers that already do it right (the fix
is byte-equivalent to number-field:583-587 / css-field). Verified by that
equivalence + the field providers' 15/15 tests (incl. color-field's
input/label wiring test); a live browser check was blocked by a port conflict
with another session's dev server.
Guard (A30, contracts.test.ts): flags `$effect(... inputId.current = opts.X.current ...)`.
- Proven to catch drift: reverting date-field to the effect form makes it fail.
- Scoped to an `opts.*` source on purpose: file-upload registers
`this.hiddenInputId` (empty '' until a child part mounts) inside a $effect —
that source is genuinely async, so the effect is JUSTIFIED, and the `opts.*`
requirement leaves it green without an exception list. (The guard surfaced
file-upload during development, which is how the distinction was found.)
check: 0 new type errors.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Two more catalogue invariants in contracts.test.ts, locking in audit fixes:
- VG-8: every component morfo must be declared `as const satisfies Morfo`,
never `: Morfo` (the annotation widens the literal so the schema can't check
it — how alert-dialog-001 shipped). Green; proven to catch drift (annotating
toggle as `: Morfo` makes it fail).
- A31: a per-item membership predicate (`isSelected` / `isItemPressed` / …) must
not do `.current.includes(...)` — that is O(N²) per render. Lift a Set, use
`.has()`.
The A31 guard immediately surfaced a real violation the human audit missed:
`toolbar-provider` ToolbarGroupProvider.isItemPressed did
`this.opts.value.current.includes(value)`, called from the per-item `isPressed`
$derived — the exact O(N²) pattern, in a component not on the audit's 9-item
A31 list. Fixed with the same lift (`pressedSet` + `.has()`). That catch IS the
guard's proof.
Both guards exclude the active-dev-track set so they stay green for the
maintained catalogue. check: 0 new type errors; toolbar provider tests 3/3.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
A catalogue invariant in contracts.test.ts: every maintained component that
ships an eidos recipe (a `.svelte` wrapper or `.css` under
`eidos/components/{kebab}/` — README-only dirs don't count) MUST declare
`'eidos'` in its morfo `scope`. This is the prevention for the 62-component
drift the audit found and just fixed — turns "an agent has to re-audit" into
"the build goes red".
- Green now (scope-drift = 0 after 212624e0).
- Proven to catch drift: temporarily removing `'eidos'` from toggle's scope
makes the guard fail naming `toggle`.
- Excludes the active-dev-track set (words/palabras/chronos) so the guard stays
green for the maintained catalogue — a regression guard is only useful while
green, so a NEW drift turns it red.
Note: contracts.test.ts has pre-existing local failures from the untracked
`chronos` dev-track component (incomplete soma chrome trips the soma catalogue
guards); those are unrelated to this guard, which adds zero failures.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
SYS-001 (SUMMARY) resolved + 46 per-component scope-drift findings set to
fixed. The other drifted components annotate the drift in their report header
(not a fix-status finding) or capture it only via the systemic SYS-001, so they
have no per-component line to flip. scroll-area's data-overflow finding is a
distinct undeclared-attr issue (not scope) and stays open.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Decision (the one definitional call SYS-1 required): morfo `scope` enumerates
the layers that IMPLEMENT the component (per the glossary), so a component with
an `eidos/components/{c}/` recipe + wrapper MUST list `'eidos'`. This matches the
62 components that already declared it correctly (dropdown-menu, accordion, tabs,
checkbox, radio-group, splitter, …) and makes "which components have eidos"
answerable from the morfo. Chosen over the implicit-eidos alternative for
explicitness.
Added `'eidos'` to the morfo-level `scope` of every drifted component — the 62
with a real eidos recipe (.svelte/.css, not a README-only dir) whose scope
omitted it. After this, all 124 audited morfos declare scope consistently;
scope-drift = 0.
`scope` is purely documentary (the only readers are the schema validator —
`layerSchema` already accepts `'eidos'` — and the 2-of-3 doctrine; nothing keys
behavior off it), so this is a behavior-safe documentation alignment: every diff
is exactly one `scope:` line, `npm run check` adds zero errors.
words/palabras/chronos excluded. calendar included (its morfo is clean; the
view-switch refactor lives in soma/eidos, untouched here).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
fix-status: open -> fixed (<commit>) for every HIGH whose code fix landed this
session, across 12 component reports:
- 92f988e7: listbox-001, grid-list-001/002, tree-view-002, tree-grid-001, tag-group-001 (SYS-7 A31)
- 98954a7c: alert-dialog-001, breadcrumb-001, navigation-menu-006, select-001, dialog-002
- db33f66c: select-002, dialog-001, collapsible-NEW-001
- bac67315: combobox-001, select-003
The HIGH tier is now code-complete; the 2 remaining HIGH (select-004,
combobox-002) are test-coverage gaps for Phase 6.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Commit both virtual-focus list components to a single keyboard model and a
shared, unit-tested index helper (the EX-1 extraction).
- keyboard/directional: new pure `nextIndex(curr, key, len, {loop,nextKey,
prevKey})` — the next/prev/Home/End math every roving/virtual list route
duplicated. Seeds `curr === -1` to first (next) / LAST (prev) BEFORE the
loop/clamp, which kills the off-by where `-1 + prev + loop` wrapped to
`len-2`. 11-case boundary unit suite.
- combobox [combobox-001]: the Input opened then `dom.focus(items[0])` and the
Content route moved real DOM focus onto options — while the Input advertised
`aria-activedescendant`. That's the A17 virtual+real focus mix and breaks the
APG combobox pattern (focus must stay on the textbox). Rewrote the Input route
to own all navigation via a `moveHighlight` helper (highlightedId only, never
`dom.focus(item)`); deleted the real-focus Content route. Browser-verified on
a 19-item list: focus stays on the input, ArrowDown/Up/Home/End drive
aria-activedescendant.
- select [select-003]: the Trigger route now uses the shared `nextIndex`; the
dead Content route (read `activeElement` in a virtual-focus component, carried
the loop off-by) is deleted — verified that activeElement === trigger while
open, so the route never fired. Browser-verified: Trigger route navigates
(Down/Up/End) correctly.
Verified: combobox 3/3, select 3/3, directional 11/11, svelte-check 0 errors in
the touched files, browser-verified keyboard nav for both.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- select: drop the dead `focus` block from the morfo. Select uses VIRTUAL focus
(focus stays on the trigger via aria-activedescendant; items are never
DOM-focused), so the declared `trap: true` / `initial: 'first-focusable'` was
unimplemented and contradicted the behavior. Matches Combobox (no focus
block). [select-002]
- dialog: stop double-writing the Content `role`. The morfo declared
`role: 'dialog'` (literal) AND the provider set `role = variant` — syncAttrs'
dom.apply (which runs after Svelte render) overwrote the provider's
`alertdialog` back to `dialog`, so AlertDialog rendered the wrong a11y role.
Remove `role` from the morfo (it's variant-dependent, which a literal can't
express) → the provider is the sole authority. Also drop the dead
`aria-roledescription: undefined` (syncAttrs wrote the morfo value anyway).
Browser-verified: alertdialog content -> role='alertdialog'. [dialog-001]
- collapsible: `collapse` event -> `sequence: 'post'`. The provider sets
`open = false` in the runtime HANDLER, so `pre` deferred the close behind the
full perceptual hold — measured 250ms dead delay before the content closed
(the Checkbox-lag class). With `post` the content closes immediately; the CSS
exit animation is keyed on data-state. Browser-measured: 250ms -> 1ms. [collapsible-NEW-001]
Verified: dialog/alert-dialog/select/collapsible provider tests green,
morfo:check passes for all four (the 5 unrelated fails — chronos/combobox/fab/
menu-dial/words — are pre-existing and untouched), svelte-check 0 errors in
touched files, browser-verified dialog role + collapsible latency.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- alert-dialog: `: Morfo` -> `as const satisfies Morfo` (restores createAttrs
key narrowing; the only morfo using the loose annotation). [alert-dialog-001]
- breadcrumb: drop `archetype:'item'` from the display <li> Item part — it
pulled cursor:pointer + hover from archetypes.css onto a non-clickable
container (false affordance). Matches Timeline's pattern. [breadcrumb-001]
- navigation-menu: replace the leaked `$effect.root` (never disposed) with a
bare constructor `$effect` that auto-disposes with the component scope. [navigation-menu-006]
- select: `scrollSelectedIntoView` now reuses `resolveItemEl` (which CSS.escapes
the consumer value) instead of an inline unescaped querySelector. [select-001]
- dialog: delete the dead `[data-dialog-trigger]` chrome envelope (the trigger
composes <Button>, so it fought Button's recipe on the same element) + its
orphaned `trigger-font-size` recipe token; regen eidos css. [dialog-002]
Verified: 12/12 provider tests, morfo:check pass, svelte-check 0 errors in
touched files, eidos recipe contract unchanged (3 failures pre-existing/palabras),
browser-verified dialog trigger (solid Button) + breadcrumb (li cursor:auto).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Constant-resistance circles + constant-reactance arcs (clipped to the unit
disk), with normalized impedance points mapped through Γ = (z − 1)/(z + 1)
and a z + Γ hover tooltip. The matched load (z = 1) sits at the centre.
Configurable grid (resistanceCircles / reactanceArcs), labels and fade.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
New eidos-native Metrics component (morfo scope sema+eidos, soma runtime
for the live signal). Parts: featured Icon, Label, Value, Delta (direction
⟂ valence via goodTrend), Trend row (delta + caption inline), Chart
(composes Sparkline), Progress + Gauge (compose Meter), Actions, Description.
Opt-in `live` turns a value change into `signal-notify-update` — flashes the
value, pings sema, announces the new value.
Reference-grade hierarchy: the value is rebased ~2 steps UP the canonical
type scale (md→font-xl, lg→font-xxl) so the small-label → big-number jump
reads as a KPI (the 1:1 mapping collapsed it). Tight rhythm (label→value 8px,
value→trend 14px); featured icon = fixed 48px soft rounded-square.
Demo at /uix/components/metrics: Live (interactive) + Gallery (14 real
compositions, outline cards).
Also: fix Skeleton light-mode visibility (neutral-track is ~white in light,
so the placeholder vanished on a white surface). Defer exposing the full
31-scale palette in component `color` + demos to pendiente_color_demos.md.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Heatmap is now one component, two modes by data shape: matrix {x,y,value}
(columns × rows) and calendar {date,value} (GitHub-style weeks × weekdays,
with granularity year/month, orientation, locale-aware week start, fade).
New standalone charts: Gauge, Funnel (multicolor + labelPosition), Bubble
(size-encoded, axis-padded), PolarArea (Nightingale, padAngle gap between
sectors), CalendarHeatmap (internal renderer behind Heatmap).
Funnel/Bubble/Heatmap/PolarArea gain hover tooltips + dim. CalendarHeatmap
week start + month/weekday labels follow the uix langs locale reactively.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Stacking: a `stack` prop (boolean | 'expand') on the bar + area marks, reusing
$libs/plots `shape-stack`; the frame sums the stacked series for the y-domain.
Entrance animations via an `animate` prop (content domain, reduced-motion-free);
each mark plays its idiomatic motion:
- bars grow from the baseline (new `grow` preset), staggered
- lines draw themselves (new `draw` preset: stroke-dashoffset + pathLength=1)
- area grows up from the baseline (`grow`)
- BarList/BarSegment grow from the left (new `grow-x` preset), staggered
- Pie slices + Radar polygons grow RADIALLY from the chart centre (new `bloom`
preset: scale 0->1 + fade, transform-box: view-box), staggered — so each pie
slice grows out and every radar vertex travels from the origin to its place
- scatter + the area's line edge fade/draw; Sparkline inherits
Four reusable, type-safe, reduced-motion-aware presets added to the eidos motion
engine (grow / draw / grow-x / bloom) + the F7 typegen test. `animate` controls
in every chart demo. Roadmap + MUI X comparison in components/chart/IMPROVEMENTS.md.
Note: generated/base.css is regenerated; it carries one inert `--metrics-*` token
from the metrics recipe that co-lives in the shared generated file.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Month/year choosers replace the native `<select>` with a NON-MODAL popover whose
content is the reused `MonthGrid` / `YearGrid`. Stays non-modal so it also works
opened inside the date-picker's own popover (no nested modal trap). The viewed
month/year is highlighted with the selected style; `locale` is threaded and the
month is capitalized so es ("ene") and en ("Jan") read consistently. `YearGrid`
gains a `pageAligned` opt so the chooser can start on the selected year.
- Prev / Next compose the system `<IconButton>` (chevron glyph from the primitive);
the month / year triggers compose the system `<Button>` via the Popover.Trigger
`child` snippet. The bespoke border / bg / hover / focus / disabled chrome is
removed from `calendar.css` — it all comes from the primitive now; the trigger
label tracks the picker font (16px).
- The day grid is centered under the slightly wider header.
- The date-picker reuses these calendar parts, so it inherits all of the above.
WIP (parked, not composed anywhere): the soma `CalendarProvider` also carries an
unused `view` state + `Calendar.MonthView` / `YearView` / `HeadingTrigger` from an
in-place view-switch attempt. The popover approach above is the active one.
Excludes words/palabras/chronos.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The picker fields (date / time / time-range / date-range) use a flex
`[data-archetype='input']` box that holds the segments AND the overlay icon
trigger, with 12px text padding on BOTH sides — so the trailing icon sat behind
a full text-padding gap on top of its own glyph box (a visible double gap). The
reset that zeroes the input's trigger-side padding moved from the date-only
`field-control-trigger.css` (imported on just the date-picker) into the global
`archetypes.css`, keyed off the `field-trigger` archetype every picker trigger
carries — so it covers ALL pickers on every page, and outranks each
`[data-x-field-input]` rule (0,2,0 > 0,1,0) regardless of load order.
Verified by measurement: time-field input padding-inline-end 12px → 0 (text side
keeps 12px). Cross-checked that password-field / search-field / combobox were
already correct (flex/grid layout, ~2px input padding, affordances as flush
siblings) — only the pickers had the double gap. Excludes words/palabras/chronos.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Two picker-coherence fixes:
1. Field-trigger flush treatment — popover.css excluded the picker's generic
button envelope only for `[data-field-control-trigger]`. The time-picker /
time-range-picker clock icons carry `data-{component}-trigger` (NOT the
field-control marker), so they still got the popover button border/bg —
looking like a bordered button instead of a flush field icon. The exclusion
now keys off the `field-trigger` archetype, which the morfo/soma stamp on
EVERY picker trigger; added the missing override to time-range-picker.
All five pickers verified: date / time / time-range / date-range render a
flush 28px icon; color renders its own field-box (its border is the field's,
not the popover envelope's).
2. Footer follows picker size — picker-shell Clear/Cancel/Close were pinned to
`size="xs"`, so md/lg pickers had a tiny incoherent footer. New shared
`picker-shell/visual-context` lets each picker publish its resolved size;
the footer buttons read it (fallback xs). Wired into all five pickers.
Verified: at picker md the footer buttons are md (36px).
svelte-check clean. Excludes words/palabras/chronos.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Several distinct regressions/latent bugs surfaced via the DatePicker, all the same
root: parts wrongly typed as the interactive `trigger`/`item` archetype pulling
button/listbox chrome they should not have.
- Field overlay triggers (date/time/color picker, date-range) are NOT buttons:
new `field-trigger` archetype; the picker trigger soma overrides the popover's
generic `trigger` archetype with it. popover.css no longer applies the generic
popover-button envelope to `[data-field-control-trigger]` (composing IconButton
flipped CSS load order, so the button border/bg bled into the flush field icon).
- The field input drops its padding on the trigger side (logical → LTR + RTL):
`[data-archetype='input']:has([data-field-control-trigger]) { padding-inline-end: 0 }`
— the trigger sits flush instead of behind the full text padding.
- Calendar/range/month/year-grid Cell + GridRow + Day declared `archetype: 'item'`,
which shipped the listbox-row chrome: 6px cell padding (tall rows), a full-week
hover band, and `[data-archetype='item'][data-selected]` (higher specificity)
OVERRODE the calendar's accent fill so the selected day showed the menu tint
instead of solid accent. These are display gridcells, not menu items — archetype
removed; the Day keeps its bespoke `[data-calendar-day]` styling.
Verified in browser: DatePicker now matches the standalone Calendar (32px rows,
solid-accent selected day, no week-band hover, flush calendar-icon trigger).
morfo 62/62. Excludes words/palabras/chronos.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Records the verified implementation scoping for the two remaining Lote A items so
the next pass is efficient: calendar/range prev-next (recipe untouched — control-*
shared with the selects; needs eidos size contexts + grid handling + demo chevron
update; ~12 files) and code-block copy (compose <Clipboard> with value=codeRef
.textContent; Trigger+Indicator replace the toggling button — a UX change; remove
the copy chrome + handleCopy/timer).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Records the Lote A progress: the close family (dialog/drawer/popover/banner/toast/
float-panel) is fully migrated to compose IconButton, deferring variant/color to
Button's canonical defaults per the close-family decision. Documents the remaining
Lote A items with their discovered complexity: calendar/range prev/next (grid +
control-size shared between button and grid column; shared focus/disabled selectors;
consumer passes the chevron text) and code-block copy (compose <Clipboard>).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
float-panel-close now composes the canonical <IconButton> via soma's child
snippet (variant/color defer to Button defaults; aria-label via the common close
label). Extracted [data-float-panel-close] from the shared chrome selector so
Action + StageTrigger keep their square-button styling while Close inherits
button.css. No recipe change (the shared --float-panel-button-size etc. stay for
the siblings). Verified in browser (solid-primary icon close, "Cerrar").
Completes the close family (dialog/drawer/popover/banner/toast/float-panel).
Excludes words/palabras/chronos.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- toast-close now composes the canonical <IconButton rounded="full"> via soma's
child snippet (keeps the round dismiss shape); removed the bespoke
[data-toast-close] chrome + the orphaned --toast-close-* recipe tokens; the
toast item grid still places it in the trailing column. aria-label routes
through the common close label.
- Per the close-family decision: variant/color defer to Button's canonical
defaults (solid/primary) across the family — no hardcoded ghost/neutral.
banner-close dropped its ghost/neutral defaults to match popover/dialog/drawer.
- component-visual-attrs manifest: toast-close delegates icon-only to IconButton.
Verified in browser (toast close = round solid-primary ✕, correctly placed).
svelte-check + orphan test clean for touched files. Excludes words/palabras/chronos.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
DIM 1 composition (component-coherence audit), close family:
- popover-close + banner-close now compose the canonical <IconButton>/<Button>
(via soma child snippet for popover; direct for the eidos-only banner) instead
of bespoke chrome. They inherit Button's variant/size/color/focus-ring; the
aria-label routes through langs ("Cerrar" / "Descartar"). Consistent with the
already-migrated dialog/drawer closes (solid/primary default; consumer overrides
for subtle).
- Removed the redundant [data-popover-close] / [data-banner-close] chrome from CSS
and the now-orphaned --popover-close-* / --popover-transition-* recipe tokens;
regenerated base.css. banner keeps only `margin-inline-start: auto` for end
placement, scoped under [data-banner] so it out-ranks [data-button] (composing
IconButton flips CSS load order — the equal-specificity bare selector loses).
- Cleaned the 15 orphaned --drawer-close-* recipe tokens the earlier drawer-close
migration left behind, and fixed the component-visual-attrs manifest: drawer +
popover closes delegate icon-only to IconButton, so they stamp no wrapper attr.
eidos suite 9->8 failures (the 8 remaining are inherited: spin-field + palabras +
icon, outside this work). svelte-check clean for all touched files. Verified in
browser. Excludes words/palabras/chronos.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Bundles the uncommitted audit work on this branch (active-uix):
- DIM 5A: focus-ring unified to `outline` across the control/field set (kills
~18 box-shadow rings; closes forced-colors a11y). NOTE: spin-field +
drawer-close orphan-token loose ends from this migration still trip the eidos
contract test — to clean when that migration settles.
- DIM 5D: field/input backgrounds homogenized to surface-default; list-surface
padding recalibrated 2/4/6/8/10; menu-dial internal vars privatized.
- DIM 5E: date/time/color-field + date-range-picker segments delegate the active
state to the shared field-segment-state layer; the input transition is reduced
to `background` only so the focus border no longer flickers on keyboard
increment (border-color is now instant; the ring is an outline).
- Langs (cero-hardcodes): IconButton-cascade wrappers (carousel/combobox/
tree-grid/table/search-field/banner) + onion-menu + cropper + time-picker
day-period now route aria-labels through morfo langs instead of hardcoded
English (the hardcode was overriding soma's already-resolved label). Fixes 2
contract divergences (combobox Clear->Clear value, table toggle label).
- DIM 5B: code-block/kbd variants aliased to ControlVariant (no duplicate
literals); image-picker default size sm->md.
Excludes words/palabras/chronos and the metrics/demos tracks (separate work).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Net-new data-visualisation family on the in-house, zero-dependency $libs/plots
engine (scales · ticks · curves · shapes, all original). Compositional <Chart>
frame (context-shared scales, responsive, cursor-following tooltip) + primitives
Grid/XAxis/YAxis/Line/Area/Bar/Scatter/Tooltip/Legend + presets Line/Area/Bar/
Scatter/Sparkline (line + bars) + standalone Pie/Radar/BarList/BarSegment, each
with a themed hover tooltip. Themed via --chart-* recipe tokens + global colour
tokens; locale via eidos.format/langs; morfo `chart` (scope: eidos, role=img).
Point scales span edge-to-edge. Per-chart demos under web/routes/uix/components.
Roadmap + MUI X Charts comparison in components/chart/IMPROVEMENTS.md.
Note: recipes/base.ts + generated/base.css are shared files; this commit
unavoidably carries the (inert) metrics recipe block that co-lives there.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- MenuDial: a FAB trigger that fans a line OR a placement-driven arc of
mini-FAB actions. 9 zones mirror OnionMenu's onionArc (90 corner / 180
edge / 360 centre); radius auto-scales so the actions never overlap.
- Each action's NAME composes <Tooltip> (Floating-UI positioned, portaled,
collision-corrected) — tooltip on hover/focus, inline = forced open. No
hand-rolled label.
- Hover-open close delay (cross-gap); action size adapts one FAB step below
the trigger.
- Completes the FAB `xs` (30px) mini step: fab.css [data-fab-size='xs']
cascade + FabSize union (the recipe tokens already shipped with timeline).
- morfo + langs + soma (linear nav maths + runtime) + eidos + demo.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Unifies the history/feed pattern (per-item status + evaluative intent) with the
progress/stepper pattern (a root `active` index) in one component. Two
independent color axes: status drives the marker treatment (filled / ring /
hollow); intent overrides the hue via the canonical data-intent channel and
feeds the `emerge-reveal` event in live feeds.
- morfo: <ol>/<li> contract — data-status, data-intent, aria-current; one
`emerge-reveal` event (fromProp intent); scope soma/sema/eidos.
- soma: Provider + Item — status derivation (active|explicit), auto-index,
live-feed emission gated to appends. 4 unit tests.
- sema: emerge-reveal pack (soften gain via op:add + haptic tick).
- eidos: rail · markers · connectors; vertical/horizontal + start/end/alternate;
independent `size` (type) and `markerSize` (circle) axes; connector
solid/dashed/dotted; live-feed reveal. Markers hold icons or numbers.
- demo: web/routes/uix/components/timeline (6-tab interactive testbed) + nav.
Connector runs behind the markers (continuous rail); horizontal entries stack
via flex; horizontal-alternate pins fixed-height rows for a straight rail.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
THEMING.md: new §36 documenting the token-driven floating gap (@property
--floating-gap, the menu/panel archetypes, the conditional stamp, why offset not
margin). Footer date -> 2026-06-22.
COMPONENT_COHERENCE_AUDIT.md: status line + a "hand-off 2026-06-22" section
recording this session's work (action components, 1:1 menu font, 2A radius, the
gap canon) plus the suggested order for next session (color-picker popover bug
task_5d1a10ec, selects faults, focus-ring 5A, field-bg 5D, composition lots).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Stamp `data-floating-gap` on every floating content so the token-driven offset
(the foundation from the previous commit) drives the whole set, replacing the
hardcoded per-component sideOffsets (0/4/6/8):
- menus (dropdown, context, their sub-menus, menubar, select, navigation-menu) =
flush (`menu`, gap 0);
- panels (combobox, link-preview, popover, and the 5 pickers via composed
PopoverContent) = `panel` (gap --space-1-5).
The stamp is CONDITIONAL (`sideOffset === undefined ? archetype : undefined`,
matching split-button): a consumer-set `sideOffset` still wins (the Popover /
picker demos document `sideOffset={N}`); only the default falls through to the
canonical token. The pickers default their `sideOffset` to undefined so they
follow the panel token instead of a hardcoded 6.
Verified in-browser: navigation-menu (demo sets no sideOffset) stamps
`data-floating-gap="menu"` (STAMP branch); combobox / date-picker / dropdown
(demos set sideOffset) stamp nothing (SUPPRESS branch -- override respected). The
token-driven offset itself was validated in the pilot commit. check 0.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
floating-ui's numeric `sideOffset` can't take a token, so the trigger->panel gap
was a hardcoded per-component number (0/4/6/8, inconsistent). Canonize it:
register a `--floating-gap` <length> @property, set it per archetype via a
foundation rule (`--floating-gap-menu: 0`, `--floating-gap-panel: --space-1-5`),
and have the shared positioner (soma FloatingContent) read the resolved px off the
content and feed it as the offset -- token-driven (follows density x scaling) and
arrow-safe (the arrow rides with the offset). A content opts in by stamping
`data-floating-gap`; otherwise the positioner falls back to its numeric
`sideOffset`, so the rest migrates one at a time.
Pilot: Popover.Content stamps `data-floating-gap="panel"`. Verified in-browser:
overriding `--floating-gap-panel` to 20px moves the popover gap to 18px (20 minus
the popover's ~2px border overlap); the default 6px is a no-op vs the old
sideOffset=6. check 0.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The 1:1 font canon (size N -> --font-size-N, md=16) covered the field family but
missed two menus and one picker trigger, which kept the compact md->sm scale:
- menubar trigger: md->16 (was 14); its menu items were already 1:1 via list-surface.
- navigation-menu: md->16 (was 14).
- color-picker trigger: md->16 (was 12 - double-compact md->xs), matching color-field.
combobox / command / textarea were already 1:1 (a grep over-counted by matching
their correct sm/lg variants). Picker PANEL fonts + the menu-dial label are flat
panel/label content (no size axis) and stay at the conventional compact density.
Also tokenized two 2A radius bypasses (the token existed, was ignored):
- grid-list checkbox: 0.2rem -> var(--radius-sm).
- navigation-menu indicator: 1px -> var(--radius-full).
Verified md=16px in-browser for the three font fixes. check 0.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Ship the four action-cluster components. Per the audit the user requested, the
hardcoded magic numbers in their CSS move to recipes (base.ts), so the values
live in one place and pass the recipe-CSS contract:
- fab: the off-ladder Material size / icon / lift scale → `fab` recipe (named
tokens — the canonical control-height / icon-size ladders genuinely can't
express 40/56/72 + 20/24/28; documented as the FAB's own scale).
- onion-menu: the radial-chrome magics (sector ring widths, glyph bar, trail
opacities) → `onion-menu` recipe; the centre trigger's lift + shadow
REFERENCE `--fab-*` (it IS a FAB — the two can't drift apart).
- button-group: the segmented-divider strength → `button-group` recipe.
- split-button: the slim chevron tail's inline padding → `split-button` recipe;
DropdownMenu gains `customAnchor` so the menu spans the whole split surface.
All four compose the framework primitives (Group / Button / Icon / DropdownMenu),
declare a morfo, ship langs + a demo, and pass the recipe-CSS contract test (the
only flagged component left is palabras, an active dev track). check 0;
onion-menu engine tests 31/31.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Selecting an item ran its onSelect but nothing closed the dialog. Add a
provider-level `onSelect` to the soma command (fires for ANY item, on BOTH
paths — `selectCurrent` for the keyboard + the item `onclick` for the mouse,
after the item's own onSelect). The eidos `<Command.Dialog>` hooks it → `open
= false`.
Verified in-browser: click → closes; Enter → closes. check 0; command provider
tests 2/2.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Refine the command-dialog close per review:
- Solid primary → `variant="ghost" color="neutral"` — a subtle borderless gray X
instead of a loud solid purple button.
- The input cleared the close by `--dialog-close-size` (a glyph token that
under-measured the button) → only a 2px gap. Use `--control-height-md` (the
close's real IconButton footprint) → 4px to the button + ghost padding.
- The floating close inherited the dialog's top inset (tuned for a title row) →
5px below the input's center. Override its top to space-2 → centered on the
input row (1px offset).
Verified by measurement: ghost transparent bg · neutral gray X (chroma 0) · gap
4px · vOffset 1px · no overlap. Screenshot omitted — the modal backdrop-filter
hangs the headless capture (preview infra), the layout computes cleanly.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Concentric `[data-shape-nest]` now adopted by menubar / select / combobox /
command (+ default=md / factor / scaling-responsive). Radius axis flips to LIVE.
carousel / time-range use a literal `−2px` in a non-list-popup context → out of
the concentric migration (separate, low-priority).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Concentric (A2): the items hand-rolled `calc(--radius-md − space)` = 2px, using
radius-md as the outer instead of the panel radius — a latent bug (the comment
claimed "panel radius − inset"). Adopt `[data-shape-nest]`: the panel exposes
--shape-outer-radius (FIXED `lg`, so items stay 6px in BOTH the inline palette
and inside <Command.Dialog> — they aren't at the dialog's corner, so they must
not inflate to the dialog radius) + --shape-nest-gap. Items 2px → 6px (truly
concentric), verified inline + in-dialog.
Command-dialog layout (reported as broken):
- Options were inset LESS than the input (list padding-inline space-1=4 vs input
margin space-2=8) → misaligned. List inset → space-2: the input box + option
pills now share one left/right edge (measured: both at x=187).
- The floating top-right close OVERLAPPED the input — the old reserve cleared only
the input TEXT (padding-inline-end), not the box. Clear the BOX instead
(margin-inline-end = close inset + size + gap) so the close sits in the gap to
the right (measured: input ends 689, close starts 691 — no overlap).
Verified by DOM measurement (rects + computed radius). Screenshot omitted: the
modal's backdrop-filter hangs the headless capture (preview infra); the layout
computes cleanly.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Record the A2 concentric progress: `[data-shape-nest]` adopted by
menubar / select / combobox (panel-item concentric, no-op verified).
command / carousel / time-range left — their items are not panel-corner-
concentric (deeply nested / different context), a separate design decision.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Both popups hand-rolled the item's concentric radius
(`calc(<panel-radius> − <content-inline-padding>)`). Consume the shared
shape-engine rule instead: each Content panel exposes its radius + inline inset as
`--shape-outer-radius` + `--shape-nest-gap`, the Item stamps `data-shape-nest`, and
the global `[data-shape-nest]` rule computes the concentric radius once.
No-op (same radius): combobox item = 4px (lg 10 − content-px 6), verified live;
select item = 4px, verified via a detached probe (the real select popup hangs the
preview renderer — known infra issue). Extends the menubar migration (28b0c102).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The in-bar trigger hand-rolled its concentric radius
(`calc(--_menubar-radius − --_menubar-padding)`). Consume the shared shape-engine
rule instead: the bar exposes its radius + padding as `--shape-outer-radius` +
`--shape-nest-gap`, the trigger stamps `data-shape-nest`, and the global
`[data-shape-nest]` rule computes the concentric radius once.
No-op verified in-browser: trigger = 2px at md (same as before); identical across
sizes via the var cascade. First of the A2 concentric migration (§13 — stop
hand-rolling `calc(--radius − pad)` per component).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Reconsidered Decisión 2 against the reference systems: the default radius should
equal the eidos control center-of-gravity (button / field / select-trigger = md /
6px), like Bootstrap / Chakra / Radix-medium. `sm` (4px) would leave the default
tighter than the controls themselves — backwards — and would shrink any control
that later adopts the token; md makes that adoption a no-op.
`--radius-default` = var(--radius-md). Verified in-browser: resolves to 6px. check 0.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
First increment of the A2 (radius) phase. The radius scale was fixed px; now:
- `--radius-default` (= var(--radius-sm)) — the archetype default radius for
components without a radius reason of their own (Decisión 2 / §13).
- `--radius-factor` (default 1) — a global Radix-style roundness knob; a theme
sets it on :root to dial all corners up/down at once.
- Radius responds to `--scaling`: each real radius emits
`calc(base * var(--radius-factor) * var(--scaling))`. `none` (0) and `full`
(the pill sentinel) stay verbatim.
At factor=1 + scaling=100 both resolve to 1 → identical output (zero regression).
Verified in-browser: md=6px default · --radius-default=4px · factor 1.5→9px (at
:root) · scaling 1.1→6.6px · full=9999px. check 0.
Pending (A2 increment 2): components consume --radius-default + adopt
[data-shape-nest] (drop the hand-rolled calc(--radius-md − space)); panel-radius
sub-decision (modal xl vs overlay lg).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The B2 rollout is complete, so the ARCHETYPE_COHERENCE_AUDIT §13 "Superficie /
elevación" axis flips A1 → LIVE. Per the audit's update rule (row → LIVE +
guard), add `elevation-plane.test.ts`: every floating overlay's eidos Content
wrapper must stamp `data-depth` so the plane paints its elevation. 13 wrappers
pass (dropdown/context-menu + their sub-contents, menubar, navigation-menu,
popover, link-preview, command, select, combobox, dialog, drawer). tooltip +
listbox are excluded by design (variant-as-material / inline list).
Catches the menubar-class regression — a panel that reuses a shared content
selector but forgets data-depth silently loses its elevation when the donor
recipe is pruned.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Per the elevation doctrine (variant = emphasis, elevation = plane), the
select / combobox popups now take their surface · border · shadow from the
`overlay` plane via `data-depth="overlay"` — constant across variants. The
variant (surface / outline / ghost) tints only the trigger / control, no
longer the popup elevation.
- Drop the content's own border / bg / shadow + the per-variant elevation
overrides (outline/ghost were `raised` / lighter / borderless).
- Point the arrows at `--depth-overlay-surface` / `--depth-overlay-border`.
- Prune select's 6 now-orphaned `content-*` elevation recipe tokens.
Verified in-browser (measured): combobox surface AND ghost both paint
bg oklch(0.285) + 1px border + overlay shadow from the plane (ghost was
transparent/borderless before — now flattened to the plane). select is the
identical change; its open popup hangs the preview renderer (no console
errors — preview infra), so it rides the same plane mechanism + check 0 +
eidos-lint 0 invalid + contract test (no new orphans).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Two more single-elevation overlays join the plane:
- link-preview: hover-card Content carries `data-depth="overlay"`; drop the
hardcoded border / bg / shadow + point the arrow at `--depth-overlay-surface`.
- command: the palette panel carries `data-depth="overlay"`; drop its hardcoded
border / bg / shadow. Inside `<Command.Dialog>` the existing
`[data-dialog-content] [data-command]` override (higher specificity) strips
the plane so the dialog panel stays the sole surface — no double-elevation.
Verified in-browser: link-preview + inline command paint bg oklch(0.285) + 1px
border + shadow/halo from the plane; command-in-dialog is stripped
(transparent / border 0 / shadow none); check 0.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Extend the dropdown's overlay-plane adoption to the rest of the menu family:
- context-menu: Content / SubContent carry `data-depth="overlay"`; prune the
recipe's content-border / bg / shadow tokens + point the arrow at
`--depth-overlay-surface`.
- menubar: its per-menu panel reuses `[data-dropdown-menu-content]`, so the
dropdown's prune (f80f2225) had left it with NO elevation — restore it by
stamping `data-depth="overlay"` on the eidos Content wrapper. (regression fix)
- navigation-menu: mega-menu panel carries `data-depth="overlay"`; drop the
hardcoded border / bg / shadow from the recipe CSS.
Radius / font / color stay each panel's own. Verified in-browser: all three
paint bg oklch(0.285) + 1px border + shadow/halo from the plane; check 0.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
dev