uix: date-picker + date-range-picker components + component audit infra
Two new Eidos components shipped end-to-end (wrapper + recipe + demo +
Soma provider hardening) plus a checklist-driven audit pipeline that
scores all 67 morfo components against doctrinal completion criteria.
New components:
- date-picker: full popover-anchored picker over date-field + calendar,
with calendar/content/trigger parts and demo route.
- date-range-picker: standalone wrapper with own calendar/grid/segment
surface, demo route, and recipe CSS.
- Both wrappers follow Option C disciplined (root + parts attached via
explicit assignment, no Object.assign).
Supporting Soma changes:
- range-calendar provider tightened (211 LOC of behavior, 167 LOC of
tests), README brought up to component doctrine.
- date-field, date-picker, date-range-field, date-range-picker Soma
providers + READMEs updated for new wrappers.
- popover provider/close gain props needed by the picker wrappers.
Morfo updates:
- date-picker / date-range-picker / range-calendar morfos refined for
the new APIs (parts, events, ARIA).
Audit infrastructure (new):
- src/uix/COMPONENT_COMPLETION_CHECKLIST.md — 81 doctrinal rules across
morfo / eidos wrapper / recipe CSS / demo / README / cross-layer
scripts. Each rule keyed to active_architecture.md, GUIA_IMPLEMENTACION
and DEMO_AUTHORING_GUIDE.
- scripts/component-audit.ts + `npm run component:audit` — regex parser
over all 67 components, emits tmp/component-audit.md with summary
scoreboard + per-component findings. Validates against canonical
SEMA_FAMILIES / SEMA_VERBS / ARCHETYPE_VOCABULARY / INTENTS.
- Initial baseline: 1 PASS, 64 NEEDS-WORK, 2 BROKEN (tooltip,
date-range-picker). Top systemic gaps: translations.label (49),
README Gaps/Comparativa/Baseline sections (87 combined), keyboard
/event ratio under-declaration (15), apg URL absent (19).
Misc:
- src/uix/kimi-audit-eidos.md — supplementary audit notes.
- .gitignore: ignore .codex-* agent scratch artifacts at repo root.
- continue.md + READMEs updated through the migration.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
# Component completion checklist
> Doctrinal criteria for considering a UIX component **done** across all four
> layers (Morfo · Soma · Sema · Eidos), its recipe CSS, and its demo page.
>
> Source of truth — `src/uix/active_architecture.md`, `src/docs/GUIA_IMPLEMENTACION_SEMAUIX.md`, `web/routes/uix/lib/DEMO_AUTHORING_GUIDE.md`.
>
> Machine-validated by `scripts/component-audit.ts`. Run via
> `npm run component:audit [name]?`. Outputs a markdown report at
> `tmp/component-audit.md`.
## How to read this
Each rule has a **severity** and an **applicability** :
- **Severity**:
- `error` — blocks the component from being considered done.
- `warn` — should be fixed but not blocking.
- `info` — informational, no remediation expected.
- **Applicability**:
- `all` — every public component.
- `interactive` — components with user actions (most). Identified by `morfo.events.length > 0` OR `morfo.parts.*.keyboard.length > 0` .
- `passive` — purely structural / display components (icon, avatar, breadcrumb, meter, progress). Allowed `0 events` only after README justifies it.
---
## A. Morfo declaration
The morfo is DNA. If it's incomplete, every downstream layer is incomplete.
### A1 · Basics
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| M-1.1 | Exports a single `{Name}Morfo` const satisfying `Morfo` | error | all |
| M-1.2 | Has `name` , `kebab` , `scope: ['soma', ...]` declared | error | all |
| M-1.3 | Has `translations.label` with at least `es` + `en` | error | all |
| M-1.4 | If interactive: `apg` URL declared pointing at the relevant W3C ARIA pattern | warn | interactive |
### A2 · Parts
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| M-2.1 | Has at least one `Provider` part with `archetype: 'provider'` | error | all |
| M-2.2 | Every part declares `kebab` , `archetype` , `kind: 'public' \| 'internal'` , `defaultElement` , `role` | error | all |
| M-2.3 | Every public part has at least one `data-*` attr OR explicit justification in component README (`A2.3 exception: ...`) | warn | all |
| M-2.4 | Parts with non-trivial state declare `states: [...]` array | warn | interactive |
| M-2.5 | Archetype ∈ `ARCHETYPE_VOCABULARY` (`src/uix/morfo/types.ts`). No invented archetypes. | error | all |
| M-2.6 | Every part with focusable behavior has a `tabindex` or `role` that the browser focuses (no silent unfocusable interactive parts) | warn | interactive |
### A3 · Events — the part where current components leak
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| M-3.1 | If interactive: `events.length >= 1` | error | interactive |
| M-3.2 | Every event has `name` , `semantic.family` , `semantic.target` (partRef) | error | all |
| M-3.3 | `semantic.family` ∈ `SEMA_FAMILIES` (7 valid) | error | all |
| M-3.4 | `semantic.verb` ∈ `SEMA_VERBS[family]` | error | all |
| M-3.5 | `semantic.sequence` ∈ `'pre' \| 'coincident' \| 'post'` declared explicitly | warn | interactive |
| M-3.6 | Event name follows `{verb}-{variant}` or `{family}-{verb}` pattern | warn | interactive |
| M-3.7 | **Event/keyboard coverage** : every distinct keyboard action that mutates state has a corresponding semantic event. Pure focus moves don't need an event. | error | interactive |
| M-3.8 | If component supports value reset/clear: `commit.reset` or `commit.discard` event declared | warn | interactive |
| M-3.9 | If component supports navigation steps (calendar, stepper, pagination): `shift.navigate` event declared with target part | warn | interactive |
| M-3.10 | Intent is declared (`'neutral' \| 'affirm' \| 'fulfill' \| 'risk' \| 'threat' \| 'loss'`) when family is valenced (commit/signal). `target.partRef` always set | warn | interactive |
### A4 · ARIA + keyboard
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| M-4.1 | Provider part has `aria-label` or `aria-labelledby` declared with `severity: 'recommended'` | warn | interactive |
| M-4.2 | If component has invalid/disabled/readonly/required state: matching `aria-invalid` /`aria-disabled`/`aria-readonly`/`aria-required` declared conditionally | error | interactive |
| M-4.3 | If APG pattern requires specific keys (e.g., Grid: Arrow×
| M-4.4 | No reinvented keys (`Spacebar` is `' '` ; `Esc` is `'Escape'` ; etc.) — must match KeyboardEvent.key values | error | interactive |
---
## B. Eidos wrapper
### B1 · API shape (Option C disciplined)
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| E-1.1 | Has `{name}.svelte` (root visual) + per-part files `{name}-{part}.svelte` | error | all |
| E-1.2 | `index.ts` does **explicit per-property assignment** (`X.Part = Part`), not `Object.assign(X, { ... })` — see DEMO_AUTHORING §12.3 | error | all |
| E-1.3 | `index.ts` exports `{Name}` named + `default {Name}` | error | all |
| E-1.4 | No exports of `Provider` , `Base` , `Root` , `Parts` , or `Soma{Name}Provider` | error | all |
| E-1.5 | Imports Soma as `import * as {Name} from '$soma/components/{kebab}'` — namespace, not destructured | warn | all |
| E-1.6 | Types: `{Name}Props` , `{Name}Size` , `{Name}Variant` (no `EidosX*` prefixes) | error | all |
| E-1.7 | For single-part components, the default IS the component (Toggle, Switch, Icon) — no fake compound API | error | all |
### B2 · Files + structure
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| E-2.1 | `types.ts` exports the public Props + size/variant/color unions | error | all |
| E-2.2 | `{name}.css` exists and is imported from `src/uix/eidos/index.css` | error | all |
| E-2.3 | `README.md` exists with baseline (Air or "no baseline"), external comparison table, decisions, gaps | error | all |
| E-2.4 | Every part declared in morfo (`kind: 'public'`) has either a wrapper file or an explicit README note explaining why it's not exposed | warn | all |
### B3 · Wrapper internals
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| E-3.1 | `{name}.svelte` renders Soma's `{Name}.Provider` (or equivalent) — does NOT mount Soma `Trigger` /`Content` directly | error | all |
| E-3.2 | No `$state` re-declaration of bindable props from Soma (use `$bindable` proxy) | warn | all |
| E-3.3 | Snippets receive `children` prop and don't shadow it with `{#snippet children}` in same scope — see DEMO_AUTHORING §12.4 | error | all |
| E-3.4 | No data-*/CSS leaking from other layers: no `data-soma-*` , no `--soma-*` /`--air-*` CSS variables | error | all |
| E-3.5 | All visual props (`size`, `variant` , `color` , `radius` ) map to `data-{prop}="value"` on the root for CSS to read | warn | all |
---
## C. Recipe CSS
### C1 · State coverage
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| R-1.1 | Has root selector `[data-{component}]` defining base layout/spacing | error | all |
| R-1.2 | If morfo declares `data-disabled` on any part: `[data-disabled]` styled | error | interactive |
| R-1.3 | If morfo declares `data-readonly` : `[data-readonly]` styled | warn | interactive |
| R-1.4 | If morfo declares `data-invalid` : `[data-invalid]` styled (using `--color-risk-element` or similar) | warn | interactive |
| R-1.5 | All focusable parts have `:focus-visible` styled | error | interactive |
| R-1.6 | Hover state defined for trigger-like archetypes (`trigger`, `item` , `option` , `close` , `action` ) | warn | interactive |
| R-1.7 | Disabled state has `cursor: not-allowed` OR documented exception in README | warn | interactive |
### C2 · Token discipline
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
| R-2.1 | No raw colors (hex/rgb/named). All colors come from `var(--color-*)` or `var(--{component}-*)` . Applies to `recipes/base.ts` , `archetypes.css` , `events.css` and every component `*.css` — no exceptions. | error | all |
uix: date-picker + date-range-picker components + component audit infra
Two new Eidos components shipped end-to-end (wrapper + recipe + demo +
Soma provider hardening) plus a checklist-driven audit pipeline that
scores all 67 morfo components against doctrinal completion criteria.
New components:
- date-picker: full popover-anchored picker over date-field + calendar,
with calendar/content/trigger parts and demo route.
- date-range-picker: standalone wrapper with own calendar/grid/segment
surface, demo route, and recipe CSS.
- Both wrappers follow Option C disciplined (root + parts attached via
explicit assignment, no Object.assign).
Supporting Soma changes:
- range-calendar provider tightened (211 LOC of behavior, 167 LOC of
tests), README brought up to component doctrine.
- date-field, date-picker, date-range-field, date-range-picker Soma
providers + READMEs updated for new wrappers.
- popover provider/close gain props needed by the picker wrappers.
Morfo updates:
- date-picker / date-range-picker / range-calendar morfos refined for
the new APIs (parts, events, ARIA).
Audit infrastructure (new):
- src/uix/COMPONENT_COMPLETION_CHECKLIST.md — 81 doctrinal rules across
morfo / eidos wrapper / recipe CSS / demo / README / cross-layer
scripts. Each rule keyed to active_architecture.md, GUIA_IMPLEMENTACION
and DEMO_AUTHORING_GUIDE.
- scripts/component-audit.ts + `npm run component:audit` — regex parser
over all 67 components, emits tmp/component-audit.md with summary
scoreboard + per-component findings. Validates against canonical
SEMA_FAMILIES / SEMA_VERBS / ARCHETYPE_VOCABULARY / INTENTS.
- Initial baseline: 1 PASS, 64 NEEDS-WORK, 2 BROKEN (tooltip,
date-range-picker). Top systemic gaps: translations.label (49),
README Gaps/Comparativa/Baseline sections (87 combined), keyboard
/event ratio under-declaration (15), apg URL absent (19).
Misc:
- src/uix/kimi-audit-eidos.md — supplementary audit notes.
- .gitignore: ignore .codex-* agent scratch artifacts at repo root.
- continue.md + READMEs updated through the migration.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
| R-2.2 | No raw font-size in px/rem. Use `var(--font-size-*)` from Eidos recipe | warn | all |
| R-2.3 | No magic numbers in spacing — use `var(--space-*)` or `var(--{component}-*)` | warn | all |
| R-2.4 | Component-scoped tokens come from `EidosConfig.recipes` (`base.css`) — verify via `ActiveEidos.listRecipes()` | warn | all |
| R-2.5 | No `--eidos-*` or `--soma-*` variable invented in component recipe | error | all |
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
| R-2.6 | Every `var(--color-X)` referenced in recipes or component CSS is declared in `generated/base.css` . The theme contract (`SurfaceColorRoles`, `ContentColorRoles` , `BorderColorRoles` , `FocusColorRoles` + intent role maps) is the closed set; new tokens go through `themes/base.ts` + regen. | error | all |
uix: date-picker + date-range-picker components + component audit infra
Two new Eidos components shipped end-to-end (wrapper + recipe + demo +
Soma provider hardening) plus a checklist-driven audit pipeline that
scores all 67 morfo components against doctrinal completion criteria.
New components:
- date-picker: full popover-anchored picker over date-field + calendar,
with calendar/content/trigger parts and demo route.
- date-range-picker: standalone wrapper with own calendar/grid/segment
surface, demo route, and recipe CSS.
- Both wrappers follow Option C disciplined (root + parts attached via
explicit assignment, no Object.assign).
Supporting Soma changes:
- range-calendar provider tightened (211 LOC of behavior, 167 LOC of
tests), README brought up to component doctrine.
- date-field, date-picker, date-range-field, date-range-picker Soma
providers + READMEs updated for new wrappers.
- popover provider/close gain props needed by the picker wrappers.
Morfo updates:
- date-picker / date-range-picker / range-calendar morfos refined for
the new APIs (parts, events, ARIA).
Audit infrastructure (new):
- src/uix/COMPONENT_COMPLETION_CHECKLIST.md — 81 doctrinal rules across
morfo / eidos wrapper / recipe CSS / demo / README / cross-layer
scripts. Each rule keyed to active_architecture.md, GUIA_IMPLEMENTACION
and DEMO_AUTHORING_GUIDE.
- scripts/component-audit.ts + `npm run component:audit` — regex parser
over all 67 components, emits tmp/component-audit.md with summary
scoreboard + per-component findings. Validates against canonical
SEMA_FAMILIES / SEMA_VERBS / ARCHETYPE_VOCABULARY / INTENTS.
- Initial baseline: 1 PASS, 64 NEEDS-WORK, 2 BROKEN (tooltip,
date-range-picker). Top systemic gaps: translations.label (49),
README Gaps/Comparativa/Baseline sections (87 combined), keyboard
/event ratio under-declaration (15), apg URL absent (19).
Misc:
- src/uix/kimi-audit-eidos.md — supplementary audit notes.
- .gitignore: ignore .codex-* agent scratch artifacts at repo root.
- continue.md + READMEs updated through the migration.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
### C3 · Color resolution
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| R-3.1 | Recipe uses `[data-color='X']` selectors only for the subset declared in component's README | warn | colored |
| R-3.2 | No legacy color names (`success`, `warning` , `danger` , `info` ) | error | all |
| R-3.3 | Intent ↔ color resolution implemented: when component receives `intent != 'neutral'` , `data-color` reflects the intent | warn | colored |
---
## D. Demo page (`web/routes/uix/components/{kebab}/+page.svelte`)
### D1 · Template compliance
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| D-1.1 | Outer element is `<div data-uix-canvas-inner>` | error | all |
| D-1.2 | Tab union is exactly `'live' \| 'api' \| 'morfo' \| 'sema' \| 'recipe' \| 'a11y'` | error | all |
| D-1.3 | Imports `compileMorfo` + the component's morfo | error | all |
| D-1.4 | Imports `getActiveUix` if Sema tab has interactive Play buttons | warn | interactive |
| D-1.5 | Has MutationObserver on `data-event` attribute, populating `trace` state | error | interactive |
| D-1.6 | Has `<div data-uix-stage>` between header and tablist (live always rendered) | error | all |
| D-1.7 | Has `<div data-uix-stage-trace>` with at least the trace strip | error | interactive |
### D2 · Header
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| D-2.1 | Header has `data-uix-eyebrow` (Category · Name) | error | all |
| D-2.2 | Header has `<h1 data-uix-page-title>` and `<p data-uix-page-lede>` (single paragraph summary) | error | all |
| D-2.3 | Header has `data-uix-page-meta` with at minimum `parts` and `events` pills | error | all |
### D3 · Snippet parity (DEMO_AUTHORING §8.1)
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| D-3.1 | Both `somaSnippet` and `eidosSnippet` derived and rendered | error | all |
| D-3.2 | Snippet code reflects current control values (not static placeholders) | warn | all |
| D-3.3 | If live preview uses a schema/options/state, snippet declares the same | warn | all |
### D4 · Sema tab
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| D-4.1 | Sema tab always rendered (even for 0-event components, with explicit empty state) | error | all |
| D-4.2 | Sema tab has events table: `name / family / verb / sequence / intent / play` | error | interactive |
| D-4.3 | Play buttons emit via `uix.events.emit(...)` onto a real DOM target inside the stage | error | interactive |
### D5 · Morfo tab (declarative contract surface)
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| D-5.1 | Has header table: name / kebab / scope / apg / parts / events | error | all |
| D-5.2 | Has parts overview table | error | all |
| D-5.3 | For each part with data/aria/keyboard: per-part subsection rendered | warn | all |
| D-5.4 | Events declaration table rendered | error | interactive |
### D6 · A11y tab + Recipe tab
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| D-6.1 | A11y tab has keyboard table (from morfo) + ARIA contract table | warn | interactive |
| D-6.2 | Recipe tab lists selectors with their layer source (`morfo` / `eidos` ) | warn | all |
### D7 · Visible controls discipline (DEMO_AUTHORING §12.6)
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| D-7.1 | Every control on the Live tab produces a visible change on the stage | warn | all |
| D-7.2 | No demo-only `data-*` attrs hand-stamped to fake morfo selectors | error | all |
| D-7.3 | Soma layer badge `[soma]` and Eidos layer badge `[eidos]` used to group control subsections | warn | all |
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
| D-7.4 | **Chip parity** : every chip-group control (`size`, `variant` , `color` ) enumerates the **full** union of the component's type — no truncated arrays. Theme defines 3 variants → all 3 are selectable. See DEMO_AUTHORING §7.x. | error | all |
| D-7.5 | **Size coverage** : the chip array for `size` matches the component's category in DEMO_AUTHORING §7.x (form controls / text inputs / progress-meter / field-form expose `xs..xl` ; nav controls expose `xs..lg` ; passive panels keep `sm..lg` ). | warn | all |
uix: date-picker + date-range-picker components + component audit infra
Two new Eidos components shipped end-to-end (wrapper + recipe + demo +
Soma provider hardening) plus a checklist-driven audit pipeline that
scores all 67 morfo components against doctrinal completion criteria.
New components:
- date-picker: full popover-anchored picker over date-field + calendar,
with calendar/content/trigger parts and demo route.
- date-range-picker: standalone wrapper with own calendar/grid/segment
surface, demo route, and recipe CSS.
- Both wrappers follow Option C disciplined (root + parts attached via
explicit assignment, no Object.assign).
Supporting Soma changes:
- range-calendar provider tightened (211 LOC of behavior, 167 LOC of
tests), README brought up to component doctrine.
- date-field, date-picker, date-range-field, date-range-picker Soma
providers + READMEs updated for new wrappers.
- popover provider/close gain props needed by the picker wrappers.
Morfo updates:
- date-picker / date-range-picker / range-calendar morfos refined for
the new APIs (parts, events, ARIA).
Audit infrastructure (new):
- src/uix/COMPONENT_COMPLETION_CHECKLIST.md — 81 doctrinal rules across
morfo / eidos wrapper / recipe CSS / demo / README / cross-layer
scripts. Each rule keyed to active_architecture.md, GUIA_IMPLEMENTACION
and DEMO_AUTHORING_GUIDE.
- scripts/component-audit.ts + `npm run component:audit` — regex parser
over all 67 components, emits tmp/component-audit.md with summary
scoreboard + per-component findings. Validates against canonical
SEMA_FAMILIES / SEMA_VERBS / ARCHETYPE_VOCABULARY / INTENTS.
- Initial baseline: 1 PASS, 64 NEEDS-WORK, 2 BROKEN (tooltip,
date-range-picker). Top systemic gaps: translations.label (49),
README Gaps/Comparativa/Baseline sections (87 combined), keyboard
/event ratio under-declaration (15), apg URL absent (19).
Misc:
- src/uix/kimi-audit-eidos.md — supplementary audit notes.
- .gitignore: ignore .codex-* agent scratch artifacts at repo root.
- continue.md + READMEs updated through the migration.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
---
## E. Cross-layer integrity
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| X-1.1 | `npm run morfo:check` PASS for this component | error | all |
| X-1.2 | `npm run perm:check` PASS for this component if it's instrumented | warn | interactive |
| X-1.3 | `eidos-lint-all.ts` invalid count = 0 for this component | error | all |
| X-1.4 | `npm run check` does not produce errors in this component's files | error | all |
| X-1.5 | Component's smoke route loads without console errors (`SMOKE_SCOPE=/uix/components/{kebab} npm run smoke`) | error | all |
---
## F. Documentation completeness (component README)
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| F-1.1 | README has section "## Baseline" with Air comparison or explicit "no Air baseline" | error | all |
| F-1.2 | README has section "## Comparativa" with at least 3 external references (Ark UI, Bits UI, Radix/shadcn, React Aria, MUI, or similar) | error | all |
| F-1.3 | README has section "## Decisiones" with explicit choices made vs alternatives | warn | all |
| F-1.4 | README has section "## Gaps" listing what's deferred / not implemented, each with disposition (implementar / diferir / descartar) | error | all |
| F-1.5 | If component is `passive` (0 events): README explicitly justifies why (`## Passive justification`) | error | passive |
---
## G. Doctrinal canon (intent + color + sequence)
### G1 · Subset declaration
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| G-1.1 | README declares `## Subset` listing which `color` values + which `intent` values the component accepts (per GUIA_IMPLEMENTACION_SEMAUIX §3) | warn | colored |
| G-1.2 | Types restrict `intent` /`color` props to the declared subset via union types — not free-form string | warn | colored |
| G-1.3 | Recipe CSS only matches `[data-color='X']` for X in the declared subset | warn | colored |
### G2 · Sequence canon
| ID | Rule | Severity | Applicability |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| G-2.1 | Events that animate exit before structural commit use `sequence: 'pre'` (dismiss, close-cancel, etc.) | warn | interactive |
| G-2.2 | Events that confirm a result use `sequence: 'post'` (commit-save, submit, etc.) | warn | interactive |
| G-2.3 | Continuous progress events use `sequence: 'coincident'` (sustain.progress) | warn | passive |
---
## H. Severity summary table
A component is **PASS** when:
- **0 errors** across A–
- **≤3 warnings**, each justified in README "## Audit exceptions"
- All required scripts (X-1.x) pass
A component is **NEEDS-WORK** when 1-5 errors or >3 unjustified warnings.
A component is **BROKEN** when >5 errors OR any X-1.x script fails.
---
## I. How to add a new rule
1. Append to the appropriate section table.
2. Update `scripts/component-audit.ts` with a check function that returns `CheckResult` .
3. Add the rule to the doctrinal source if it crosses a layer (`active_architecture.md`, `GUIA_IMPLEMENTACION_SEMAUIX.md` , or `DEMO_AUTHORING_GUIDE.md` ).
4. Document the rationale at the top of the new rule's check function.
Rules should be **doctrinally grounded** (cite the source doc) and **machine-checkable** (avoid pure aesthetic criteria — those go in the per-component README review).
