72 Commits (18edecba5bc8975ffeb33de4146e02804f8f89af)

Author	SHA1	Message	Date
dev	18edecba5b	fix(date-range-field demo): key each segments by index, not seg.part ... Soma's segments array uses `'literal'` as the part for every visual separator (e.g. the `/` between dd / mm / yyyy). Keying the {#each} by `seg.part` produced duplicate keys → `each_key_duplicate` runtime error at the second `literal` separator. Switch to positional key `(i)` — segments don't reorder, so positional is stable and correct. Snippet template strings updated to match so the visible code in the Live tab reflects the right pattern. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	754754d4a4	feat(date-range-field): port from soma to eidos (Tier 2 sprint, 1/3) ... Two-endpoint date entry. Mirrors DateField × 2 with shared validation and a single label naming the whole range. Each Input scopes its own DateField context internally, so segments inside re-use the existing date-field recipe automatically. Eidos surface: - variant / color / size — same vocabulary as <DateField>, cascaded via data-* on the root to both endpoint inputs and their segments - Re-uses DateField.Segment (zero duplication) Recipe (date-range-field.css): - Label + control row stack - Em-dash separator rendered via `::before` on the end Input (no manual `<span>—</span>` needed) - Endpoint-aware tint via `data-active` on the holding input Morfo: - scope: ['soma'] → ['soma', 'sema', 'eidos'] - apg URL: Spinbutton (per segment) - Passive at this contract layer (events come from the two endpoint DateField runtimes); README documents the classification Sidebar nav: 'Date range field' added under Forms (next to Date field). Tier 2 sprint progress: 1/3 (date-range-field next: time-range-field, range-calendar). Checks: svelte-check 0 errors, component:audit 91/91 PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	207774714a	feat(pin-input): port from soma to eidos (Tier 1 sprint, 5/5 — DONE) ... Multi-cell OTP / verification code input. Two parts (Provider, Cell) with a snippet-driven cell iteration. Architecture: - A transparent absolutely-positioned <input> captures every keystroke, paste and IME event (soma). - Visible bordered cells follow the hidden input's caret via data-active / data-filled emitted by the morfo. - Single-input approach (shadcn / Bits family) — preserves paste distribution, autocomplete='one-time-code' for SMS autofill on iOS/Android, and IME quality. Eidos surface: - size: 'sm' | 'md' | 'lg' | 'xl' (responsive), cascades cell dimension + glyph size tokens to all cells - Recipe paints square bordered cells with focus ring tracking data-active, subtle bg lift on data-filled, threat-toned border when [data-invalid] cascades from the provider Morfo: - scope: ['soma'] → ['soma', 'sema', 'eidos'] - apg URL added (Textbox pattern — OTP has no formal ARIA pattern) - Passive at the morfo layer (no events array; perceptual feedback via the commit family base when onComplete fires) - README documents the passive classification Comparativa: aligned with shadcn / Bits UI (single hidden input). Ark and Chakra use one input per cell which loses paste / IME quality. Sidebar nav: 'Pin input' added under Forms (next to Tags input). === Sprint Tier 1 — DONE === 1. toggle-group 61ffbade 2. alert-dialog d5630a52 3. dropdown-menu 4e477e63 4. context-menu 21eb8a62 5. pin-input (this) Checks: svelte-check 0 errors, component:audit 91/91 PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	21eb8a6264	feat(context-menu): port from soma to eidos (Tier 1 sprint, 4/5) ... 14-part compound — DropdownMenu surface minus CheckboxGroup. Same visual recipe vocabulary; the only differences vs DropdownMenu are the trigger surface (a `<span>` wrapping right-clickable content rather than a `<button>` toggle) and cursor-anchored positioning (soma's floating layer handles that). Parts: Provider · Trigger · Content · Arrow · Item · Group · GroupHeading · Separator · CheckboxItem · RadioGroup · RadioItem · Sub · SubTrigger · SubContent. Recipe (context-menu.css): - Panel chrome + item rows identical to dropdown-menu - Trigger gets a subtle `data-state='open'` dashed outline as a "this region summoned the menu" affordance - Recipe duplication over aliasing — each component evolves freely without CSS cascade coupling Sidebar nav: 'Context menu' added under Overlays. Morfo scope: ['soma'] → ['soma', 'sema', 'eidos']. Sprint progress: 4/5 (toggle-group, alert-dialog, dropdown-menu, context-menu). Last is pin-input. Checks: svelte-check 0 errors, component:audit 91/91 PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	4e477e637b	feat(dropdown-menu): port from soma to eidos (Tier 1 sprint, 3/5) ... Full 15-part compound — pass-through wrappers over soma with the canonical visual recipe. Parts: Provider · Trigger · Content · Arrow · Item · Group · GroupHeading · Separator · CheckboxItem · CheckboxGroup · RadioGroup · RadioItem · Sub · SubTrigger · SubContent. API parity with Bits UI (richest reference): CheckboxGroup + RadioGroup binding arrays / scalars, nested Sub-menus, Arrow pointer. Radix Primitives + Ark UI lack CheckboxGroup; Chakra v3 + Radix Themes lack Arrow. Recipe (dropdown-menu.css): - Uniform chrome across Content + SubContent (panel shadow, border, padding, max-height) - Items share one set of tokens (hover/focus highlight, disabled opacity, indicator slot via `::before` for Checkbox/Radio data-state='checked') - SubTrigger gets a chevron via `::after` - GroupHeading: muted uppercase, micro-tracked - Separator: 1px subtle divider - Enter animation on `data-state='open'` No `variant` / `color` / `size` knobs at the eidos layer — menus are themselves the visual variant of "list of actions" within an app. Per-item destructive coloring deferred to next pass (cascade via item's `data-color` attr). Morfo scope: ['soma'] → ['soma', 'sema', 'eidos']. Sound comes from the family bases (`emerge` for open/close, `commit` for select) — no per-component cascade needed. Demo: 6-tab template, items hooked to `lastSelected` tracker, all three groupings demoed (Items / CheckboxGroup / RadioGroup / Sub). Checks: svelte-check 0 errors, component:audit 91/91 PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	d5630a528f	feat(alert-dialog): port from soma to eidos (Tier 1 sprint, 2/5) ... Modal Dialog variant with role=alertdialog, forced modal=true, and click-outside disabled. Soma delegates to the Dialog runtime (variant='alertdialog') so DOM markers are Dialog's (data-dialog-*) — eidos reuses Dialog's recipe for chrome and adds two alert-dialog-specific buttons: Action + Cancel. Eidos shape: - Provider, Content, Action, Cancel — alert-dialog-specific wrappers - Trigger, Overlay, Title, Description, Header, Footer, Portal — re-exported from Dialog's eidos barrel (zero duplication) Recipe (alert-dialog.css): - Only styles Action + Cancel - Buttons consume Toggle palette tokens (same "interactive button" vocabulary used by <Toggle> and <ToggleGroup.Item>) - Auto-color cascade: Action picks up the dialog's data-color so a risk/threat-flagged dialog gets a red/amber Action button without manual recipe code - Cancel stays neutral so the safe-choice contrast is preserved Morfo: - scope: ['soma'] → ['soma', 'sema', 'eidos'] - The morfo declares Action + Cancel parts only (Provider is virtual, other parts inherited via Dialog runtime delegation) - Classified passive at this contract level (Dialog owns the events); README documents this in §"Passive justification" Demo: 6-tab canonical template with intent / size / position chips, soma + eidos snippets, references comparison table vs Radix Primitives / Bits UI / Ark UI / Chakra v3 / Radix Themes / shadcn. Checks: svelte-check 0 errors, component:audit 91/91 PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	61ffbade46	feat(toggle-group): port from soma to eidos (Tier 1 sprint, 1/5) ... First component in the soma→eidos porting sprint. Two-part compound (Provider + Item), modeled on radio-group's structure. Eidos surface: - variant: 'solid' | 'outline' | 'ghost' — mirrors <Toggle> - color: 7 tones, propagated to items via data-color cascade - size: xs/sm/md/lg/xl (responsive) - attached: boolean — segmented control affordance (shared borders, active item z-indexed above neighbors) - block: boolean — items grow to fill the inline-size - iconOnly: per-item flag — square aspect, sr-only label Items consume the Toggle palette token vocabulary (--toggle-*) so a standalone <Toggle> and a <ToggleGroup.Item> at the same variant × color × size are visually identical — single source of truth for the "toggle button" recipe. Morfo scope fix: ['soma'] → ['soma', 'sema', 'eidos']. Adds apg URL (WAI-ARIA Button pattern) so the audit's A-1.4 rule passes. The commit-toggle event's sound comes from the `commit` family base — no per-component cascade needed. Demo: canonical 6-tab template (Live / API / Morfo / Sema / Recipe / A11y) with every prop exposed as a chip/switch, soma + eidos snippets update live, sema "▶ play" button on the commit-toggle event. Reference comparison vs Radix Primitives / Bits UI / Ark UI / Chakra v3 / Mantine / Radix Themes / shadcn documented in README §Comparativa. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	e11d3539ef	feat(scroll-area): add size/radius/scrollbars props + fix scroll-type race ... Reference-library parity (Radix Themes, Chakra v3): - size: 'xs' | 'sm' | 'md' | 'lg' (Chakra t-shirt scale) → thickness via --scroll-area-scrollbar-size. - radius: 'none' | 'sm' | 'md' | 'lg' | 'full' (Radix Themes) → thumb curvature via --scroll-area-thumb-radius. - scrollbars: 'vertical' | 'horizontal' | 'both' (Radix Themes) → recipe-level sugar that auto-mounts Scrollbar / Thumb / Corner from the root. Explicit composition still supported (omit the prop). Bug fix — type='scroll' + horizontal sometimes stuck hidden: - `mounted` on ScrollAreaScrollbarProvider is now $state. Previously a plain field, so the `shouldShow` derived didn't invalidate when the requestFrame mount-flag flipped during the first frame. - The reveal-on-scroll $effect now skips its first run via a `firstRun` flag. That first run was the subscription pass with scrollTop/scrollLeft still 0 — it was eagerly calling show() and setting `visible=true` before `mounted` flipped. Subsequent real scrolls then assigned visible=true again (no-op), so shouldShow didn't re-run and the bar stayed hidden until the hide timer expired. Now the bar only reveals on genuine scroll deltas. Demo: chip controls for size + radius, switched to scrollbars prop on the root (drops the explicit Scrollbar/Thumb children), eidos snippet shows the recipe-sugar form, soma snippet still shows the explicit Radix-style composition. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	560ce8f66c	fix(scroll-area, drawer): horizontal scrollbar visibility + drawer drag affordance ... - scroll-area soma: defer the mount-frame request to `$effect` so SSR doesn't hit `dom::window_required` during constructor evaluation. - scroll-area recipe: scrollbars now `position: absolute` (overlay style) so the horizontal track lands at the viewport's block-end instead of flowing below it. `:has` rules reserve corresponding edges when both axes mount; corner switched to absolute as well. - drawer demo: drop the ↑↓←→ glyph pop-outs and `overflow: visible` during dragging. The handle's own pill grip is the affordance — the same shape the splitter uses, no extra chrome. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	bd2e40366a	feat(layout): Layout Batch 3 — scroll-area, separator, splitter + splitter sema rewire ... 3 new layout primitives close the air port set (15 / 15 done). `npm run component:audit`: 91 / 91 PASS, all 3 new PASS with 0 errors. **scroll-area** — eidos compound wrapper over the existing soma: `<ScrollArea><ScrollArea.Viewport>{content}</ScrollArea.Viewport> <ScrollArea.Scrollbar orientation="vertical"><ScrollArea.Thumb /> </ScrollArea.Scrollbar><ScrollArea.Corner /></ScrollArea>`. Mirrors Radix Primitives / Bits UI shape. Demo 667 lines. **separator** — visual primitive (`scope: ['eidos']`) with conditional ARIA: `role="separator"` + `aria-orientation` when not decorative, `aria-hidden="true"` when decorative. New morfo `src/uix/morfo/components/separator.ts`. Demo 645 lines. **splitter** — eidos compound over existing soma: `<Splitter orientation="horizontal"><Splitter.Panel>{a}</Splitter.Panel> <Splitter.ResizeTrigger /><Splitter.Panel>{b}</Splitter.Panel> </Splitter>`. Demo 824 lines. **Splitter sema rewire — match Slider's handle/drag/commit shape:** The morfo previously declared only `commit-resize`. Direct-manipulation primitives (Slider, Splitter) should share the same event vocabulary so audio/haptic projections feel coherent across the family. Renamed + expanded to mirror Slider: - `handle-pick` (family: handle, verb: pick, sequence: coincident, target: resize-trigger) — fires on pointerdown when user grabs the trigger. - `handle-drag` (family: handle, verb: drag, sequence: coincident, target: resize-trigger) — fires on each pointermove frame. - `commit-set` (family: commit, verb: set, intent: neutral, sequence: post, target: provider) — fires on pointerup. The runtime `commit-set` handler is wired to call the consumer's `onResizeEnd` callback, so sema and JS callback land at the same moment (parity with Slider's `onValueCommit`). Soma provider triggers these via `this.runtime.trigger(name)` in `onpointerdown` / `onpointermove` / `notifyResizeEnd` (the latter unchanged externally — internally now routes through the runtime trigger). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	a08a0a9890	fix(aspect-ratio): fill inline axis by default + panel demo uses solid colors ... Two bugs surfaced when verifying the panel demo visually: 1. **AspectRatio shrunk to content width inside grid/flex containers.** Grid items default to `width: max-content`, so AspectRatio without an explicit width was sizing itself to its child's intrinsic content instead of filling the slot. The ratio still applied but against the collapsed width, producing a tiny box. Fix: recipe sets `inline-size: var(--box-width, 100%)` so the default is "fill the slot". `width=…` from Box still wins; `maxWidth=…` constrains the upper bound exactly as before. Block-level containers are unaffected (100% of the line box matches their natural width). 2. **Panel demo gradient invisible in dark mode.** The demo used `--color-primary-track` + `--color-affirm-track` which are surface tokens (near-black in dark theme). Swapped to `*-solid` tokens with `--color-content-on-solid` text for high contrast in both themes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	d421f1fb5d	feat(typography): 8 primitives — Heading, Display, Code, CodeBlock, Kbd, Mark, Highlight, Link ... Full canon for the rest of the typography family, following Text (commit `03531709`) as template. Each primitive ships morfo (passive, scope eidos, 0 events) + full eidos set (svelte/css/types/index + README with required sections) + canon 6-tab demo (≥400 lines each). **Heading** — semantic h1..h6 via `level` prop, visual style decoupled via `style` prop (defaults to match level but `<Heading level={3} style="h1">` allowed). Demo 594 lines. **Display** — always-h1 page-title primitive. Always uses `style="hero"`. Tracking via literal em values until foundation emits hero-scale tracking tokens. Demo 546 lines. **Code** — inline code via `<code>`. `variant: 'plain' | 'soft' | 'outline'` for subtle background chrome. Demo 423 lines. **CodeBlock** — multi-line `<pre><code>` with optional title + copy button (button utility, NOT a sema verb — kept out of morfo per 2-of-3 rule). Demo 402 lines. **Kbd** — keyboard shortcut chrome over `style="code"`. Demo 418 lines. **Mark** — text highlight via `<mark>`. Palette uses canonical `ColorRole` intents (default `fulfill` ≈ legacy yellow). Demo 402 lines. **Highlight** — substring highlighter inside Text. Scans children for `query` and wraps matches. Same intent palette as Mark. Demo 407 lines. **Link** — text link via `<a>`. `variant: 'default' | 'subtle' | 'plain'` for underline style, `intent: ColorRole` for color. Passive on the morfo — hover/active is CSS-only, navigation belongs to the consumer (router). Demo 448 lines. **Architectural deviations from air documented per README's Decisiones section:** - Heading: semantic level vs visual style decoupling - Code split into inline `<Code>` + block `<CodeBlock>` (was one component with `variant='block'` in air) - Mark/Highlight palette swapped from literal hue names to canonical ColorRole intents (theme contract) - Link palette opened to full ColorRole; `quiet`/`emphasized` air variants dropped in favour of composable patterns `npm run component:audit`: **90 / 90 PASS**, 0 NEEDS-WORK. svelte-check: 0 errors, 0 new warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	0353170982	feat(typography): Text — POC consuming new --style-* foundation tokens ... First typography primitive consuming the named-style tokens added in `015bd761`. Sets the canon for the remaining typography ports (Heading, Display, Code, CodeBlock, Kbd, Mark, Highlight, Link). API: - `style: 'body' | 'prose' | 'label' | 'caption'` (default `body`). Selects which `--style-{name}-*` token set the recipe consumes. - Per-axis overrides via `size`, `family`, `weight`, `color`, `align`. Each writes a local `--_text-{axis}` CSS variable that wins over the named style's default via the cascade. - `italic`, `underline` shorthand booleans. - `truncate` (single-line ellipsis) + `clamp={N}` (multi-line via CSS `-webkit-line-clamp`). - `as` prop switches the tag (default `'span'` — inline composable). - `tagStyle` escape hatch for one-off inline CSS that the prop surface doesn't cover (separate from the `style` named-style prop). Architectural choices documented in README: - Sizes map to eidos `xxs..xxxl` (not air's `1..12`). - Families use the eidos slot names (`primary/secondary/mono/display`) not air's domain aliases (`ui/prose/code`) — coherence with the foundation contract. - Colors are restricted to the content-role slots (`--color-content-*`) to preserve contrast guarantees. Free colors via `tagStyle`. - Canvas line-count measurement (air's `text` + bindable `lineCount`) deferred; CSS line-clamp covers the visual-truncate use case. Sidebar nav gains a `Typography` group with Text as its first entry. `npm run component:audit`: 82 / 82 PASS, 0 NEEDS-WORK. svelte-check 0 errors. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	376f9e33eb	feat(layout): Layout Batch 2 — aspect-ratio, auto-grid, banner, float ... 4 new layout primitives, full canon (morfo + eidos full set + canon demo + README). `npm run component:audit`: 81 / 81 PASS, 0 NEEDS-WORK. **AspectRatio** — composes through Box; emits single `--aspect-ratio` CSS var (uses modern CSS `aspect-ratio` property, drops legacy padding-bottom hack). Accepts numeric (16/9 → 1.777…) or string ("16/9") values. **AutoGrid** — composes through Grid. Resolves `templateColumns` from `minItemWidth` to `repeat(auto-fill, minmax(MIN, 1fr))` in JS so the recipe stays declarative. Uses `auto-fill` (not auto-fit) to preserve empty tracks when item count is low. **Banner** — `<header role="banner">` announcement strip with intent (full 8-role UIX `ColorRole`), variant (`ChipVariant` soft/solid/ outline/ghost), size (sm/md/lg). Dismissal is composition-driven: consumer wraps in {#if show} and adds `<Banner.Close>`. No `dismissible` boolean. **Float** — CSS `float` primitive with logical `inline-start` / `inline-end` sides. Redefined from air's 9-zone overlay primitive (which becomes a future `<Positioned>` component if real demand surfaces). Useful for inline images / pull-quotes / drop caps. Each component ships morfo (`scope: ['eidos']`, 1 part, 0 events, justified) + eidos set + README (Baseline / Comparativa / Decisiones / Eventos Sema / Gaps with disposition markers / Referencias / Passive justification) + canon demo with 6 tabs. Sidebar nav appends the 4 entries to the existing Layout group. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	591b08853a	feat(layout): canon demos + morfos for the remaining 6 primitives ... Replicates the box / flex canonical pattern across grid, stack, group, wrap, container and section. Each gets: - `src/uix/morfo/components/{name}.ts` — scope `eidos`, single Provider part, no events. Header comment justifies the 0-event surface as a passive container composing through Box / Flex. - Rewritten demo following DEMO_AUTHORING_GUIDE: 6 tabs (Live · API · Morfo · Sema · Recipe · A11y), `Layout · {Name}` eyebrow, 4 meta pills, permanent stage between header and tablist, trace strip, MutationObserver wired to data-event, reactive soma + eidos snippets, API tables grouped by concern, reference comparison vs radix-themes / chakra-ui / mantine. Cross-references in every lede + API tab: - Grid → Box (item placement) + Flex (flex containers) - Stack → Flex (full API) + Group (row cluster) - Group → Stack / Wrap / Flex - Wrap → Flex (`wrap="wrap"`) + Group (nowrap) - Container → Box (arbitrary maxWidth) + Section (block padding) - Section → Box (non-semantic padding) + Container (max-width) Demo sizes: grid 479L, stack 426L, group 458L, wrap 460L, container 415L, section 386L (vs 80-95L before — matches drawer/avatar canon mass). svelte-check: 0 errors, 0 new warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	0dc9c523d1	feat(layout): canon Flex demo + morfo (mirrors Box pattern) ... Second POC for redoing Layout Batch 1 demos. Mirrors `box`'s canonical shape adapted for a flex container: - 7 container-side controls (direction, align, justify, wrap, gap, padding, inline) — chips for unions, number for space tokens, switch for the boolean. - API tab separates "Container props (Flex-only)" from "Inherited from Box" with a forward-link. - Cross-references: lede + API call out that item-side props (alignSelf, gridColumn, …) live on the child `<Box>`, and that Stack / Group are direction-specific helpers. - Reference comparison row reflects the Radix Themes split (item vs container) and notes Chakra's `HStack`/`VStack` map to UIX `Stack`. Adds `src/uix/morfo/components/flex.ts` (scope `eidos`, 1 part, 0 events, mirrors box.ts justification). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	66c6897c61	feat(layout): canon Box demo + relocate grid item placement props to Box ... POC for redoing Layout Batch 1 demos to follow DEMO_AUTHORING_GUIDE. Box becomes the reference template for the remaining 7 primitives. Demo follows the canon shape: - Header with eyebrow + 4 meta pills (parts, events, props, scope). - Stage permanently rendered with 3 nested boxes + trace strip showing live display/padding/gap state. - 6 tabs in canonical order (Live · API · Morfo · Sema · Recipe · A11y). - Live tab: 7 controls + reactive soma/eidos snippets. - API tab: 6 subsections grouped by concern (sizing / spacing / display+position / flex/grid item / escape hatch / reference comparison vs radix-themes / chakra / mantine). - Morfo / Sema / Recipe / A11y tabs each populated with the contract appropriate to a passive eidos-native primitive. Architectural fixes (heredados de air, ahora correctos): - `gridColumn`, `gridRow`, `gridArea` move from `<Grid>` to `<Box>` — these are item placement props, they belong on the CHILD that declares its slot, not the container. - Add `placeSelf` to Box (grid item shorthand for align-self + justify-self). - Grid recipe + props updated accordingly; comment clarifies that item placement lives on Box. Add `src/uix/morfo/components/box.ts` (scope `eidos`, 1 part, 0 events with justification comment). Box demo updated lede to point at Flex / Grid for container-side props (Radix Themes split, not Chakra everything-on-Box). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	9ec2a57a85	feat(eidos): port 8 layout primitives from air (box, flex, grid, stack, group, wrap, container, section) ... Visual-only primitives translated from the legacy `air/components/layout` on the morfo-runtime branch. Architectural adjustments for the eidos target: drop the `air-` class prefix, target `[data-{name}]` directly, rename CSS vars to `--{name}-*`, replace `var(--air-space-N)` with the eidos foundation `var(--space-N)` token, resolve responsive props via `ActiveEidos.resolve(prop)`. - `box` — universal box-model utility (size, padding, margin, gap, position, overflow, flex/grid item props). Every prop maps to a CSS custom property; unset props fall through via `revert-layer`. - `flex` / `grid` / `stack` / `group` / `wrap` — layout containers that render through Box (single `<div>` per primitive, no semantic-tag prop in this batch). Markers stack as `[data-box][data-{name}]`. - `container` — max-width centered (sm/md/lg/xl/full). - `section` — semantic-padding block with background tone variants. Shared helpers at `_layout/shared.ts` (formatLayoutSpace / formatLayoutLength / formatLayoutRaw / pushStyleVar / composeStyle) plus an optional `Layout.*` namespace barrel for consumers who prefer that style; the individual `import { Box }` from each component dir also works. Each primitive ships a demo at `/uix/components/{name}/` with a live example, a props table, and a reference comparison row (radix-themes / chakra-ui / mantine). svelte-check: 0 errors / 0 new warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	20709caf9c	refactor(combobox): SelectedTags as band above the Control (Chakra pattern) ... Switched the multi-mode chips from MUI-style "inline inside the input" to the Chakra v3 multi-select pattern — chips render as a separated band ABOVE the Control. Two wins: - The dropdown popover (opens downward) never covers the selected chips, which sit comfortably above the input. - The Control stays a normal-height single-line input. No layout shifts, no absolute-positioned affordances, no `display: contents` gymnastics, no input flex tuning. Reverts the inside-the-Control CSS gymnastics from `30e9517a` / `64bbe9b1` / `87e3d68f` (flex-wrap, padding-right reservation, absolute clear+trigger, input flex basis). `<Combobox.SelectedTags>` now renders as a plain `flex-wrap` row with chip gap and a margin- block-end separating it from the Control. Demo composes `<Combobox.SelectedTags />` BEFORE `<Combobox.Control>` when `mode === 'multiple'`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	30e9517a9a	feat(combobox): SelectedTags inline chips for multi mode ... New parts `<Combobox.SelectedTags>`, `<Combobox.SelectedTag>` and `<Combobox.SelectedTagRemove>` render the current selection as removable chips inside `<Combobox.Control>` when `type='multiple'` (Material UI Autocomplete pattern): - Morfo: 3 new public parts with kebab names + texts entries. - Langs: es/en entries `selected-tags` / `selected-tag-remove`. - Soma: `ComboboxSelectedTagsProvider` exposes `items` derived from the provider's label registry; `ComboboxSelectedTagProvider` surfaces `data-value` / `data-label`; `ComboboxSelectedTagRemoveProvider` resolves its parent tag via context and calls `provider.removeValue` on click. Provider gains `getSelectedItems()` and `removeValue()` helpers; `selectedTagsEmpty` runtime prop drives `[data-empty]`. - Soma item registry: stop unregistering labels on Item cleanup so chips keep proper labels after the listbox closes/lazy-unmounts. - Eidos: default snippet loops items and renders a chip + X icon per entry; consumer can override the snippet for custom rendering. - CSS: chip styling, wrap-friendly Control with breathing padding when chips are present, ClearButton pinned right via auto margin, input flex basis reduced to 4rem so it shares a row with chips. - Demo: renders `<Combobox.SelectedTags />` inside Control when `mode === 'multiple'`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	26daa9e22e	feat(search-field demo): full keyboard nav for results popover ... Follows the WAI-ARIA combobox pattern via aria-activedescendant — the input keeps DOM focus, highlight moves virtually: - ArrowDown / ArrowUp: open popover if closed, cycle highlight (wrapping at edges). - Home / End: jump to first / last (when open). - Enter: commit the highlighted item, close popover. - Escape: close popover without clearing value; Soma's clearOnEscape fires only when popover is already closed. - pointermove on a result moves the highlight to it (mouse mirrors keyboard). - highlighted item auto-scrolls into view; index resets when result set shrinks past it or after commit/clear. Wires aria-controls / aria-expanded / aria-activedescendant / aria-autocomplete on `<SearchField.Input>` and ids + data-highlighted on each option. Header meta pill updated to 7 keys. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	99a1f05cd7	fix(search-field demo): close popover after pick without reopening on refocus ... `commitPick()` set `value`, closed the popover, then refocused the input — but the `onfocusin` on `<Popover.Anchor>` reopened it. Guard the anchor's open handler with a `justCommitted` flag cleared on the next microtask so the refocus that follows a pick is ignored. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	82349f15b4	feat(search-field): floating results popover in demo + hide native clear ... - Demo `/uix/components/search-field` wraps the SearchField in `<Popover.Anchor>`; results render in `<Popover.Content>` (intrinsic width, align="start") wrapped in `<PickerShell.Body>` so the panel inherits the canonical picker chrome. Items are real `<button>`s with `onclick` — committing a selection sets `value`, closes the popover, and restores focus to the input. - Forward `bind:ref` through the eidos `<SearchField.Input>` wrapper so consumers can refocus the input from the demo's pick handler. - Hide the browser's native `::-webkit-search-cancel-button` / `::-webkit-search-decoration` / `::-ms-clear` so only the canonical `<SearchField.ClearTrigger>` X is visible. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	afb09c2254	feat(picker-shell): extend to Root + Header + Body + Footer layout ... Promote PickerShell from action-row-only to a canonical 4-zone shell (Root → Header / Body / Footer) shared by every composite picker so date/time/color popovers get the same visual contract for free. - Add `<PickerShell.Root>` flex-column wrapper (emits data-picker-shell, data-mode) plus `<PickerShell.Header>` and `<PickerShell.Body>` zones matching the existing Footer's spacing + border tokens. - Auto-wrap all 5 *-content.svelte popovers (date / date-range / time / time-range / color) in `<PickerShell.Root>` so consumers only compose Body + Footer. - Refresh all 5 demos to use `<PickerShell.Body>` around picker content; date-picker demo gains a `showShellHeader` toggle showcasing the new Header zone. - CSS scales section gap + header spacing across xs/sm/md/lg picker sizes via [data-popover-content][data-picker-size] scopes, in sync with the existing Footer scale. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	8aa6086976	docs(search-field demo): add live filterable results panel ... The demo only had the SearchField input by itself with a trace strip; nothing actually demonstrated the search outcome. Added a 34-item dataset of UIX components (name + group) and a live results grid that filters by name or group substring as the user types. - Empty input renders 34/34 results. - Typing "form" filters to 17 components from the Forms group. - "drawer" filters to 1 (Drawer). - Empty results state renders a graceful "No matches for ..." message. - Counter shows `results N / total` so the demo doubles as a quick feedback loop for the debounceMs control (count + meta animate together when the debounced onValueChange finally fires). CSS lives inline in the demo (`.search-field-results*` selectors) since this is demo content rather than reusable component visuals. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	9fbf8e48b5	feat(number-field, search-field, combobox): audit-driven improvements ... Three components closing the 6-component audit batch. number-field - N1 RTL scrubber: invert horizontal delta sign when dir='rtl' so dragging right decrements (visually backward) in RTL layouts. Vertical unaffected. Added 2 RTL scrub tests; existing scrub test pinned to ltr. - N2 stepper height: Increment/Decrement now use --_number-field-height for inline-size/block-size/min-inline-size so they always match the input row at every size token (xs/sm/md/lg/xl). - N3 input focus ring: explicit [data-number-field-input]:focus-visible with --_number-field-accent-border box-shadow, alongside the existing Provider-level ring. search-field - S1 icon tokens: added --search-field-icon-size-{xs..xl} + icon-color + icon-margin-inline-end + a Morfo Icon part + soma/eidos wrappers. Demo uses <SearchField.Icon><Search /></SearchField.Icon>. - S2 debounceMs prop: soma wraps onValueChange in a timers.schedule with the provided delay. clear() cancels, submit() flushes synchronously. - S3 loading slot: new LoadingIndicator part (morfo + soma + eidos) + data-loading on Provider + CSS spinner via @keyframes search-field-spin honoring prefers-reduced-motion. combobox - C1 ClearButton part: new morfo trigger + soma provider + eidos wrapper with X icon. Hidden via [data-empty] (opacity + pointer-events:none). Click clears value + inputValue and refocuses input. - C2 allowsCustomValue: when true and no highlighted item, Enter commits the current inputValue as the value. Single mode closes after commit; multi appends + clears input + stays open. - C4 Backspace removes last tag in multi mode when input is empty. - C5 Sticky group headers: CSS position:sticky with content-overlay bg. Plus: fixed search-field demo's brittle parts[1] index reference to a named lookup (parts.find(p => p.kebab === 'input')). Verified: svelte-check --threshold error → 0 errors / 0 warnings / 4584 files. All component tests pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	7bc17485dc	feat(editable): invalid + required + form + Control + better hover/disabled + defaultValue ... Audit-driven improvements (7 items) to Editable: - E1 invalid + required props - morfo: Provider gains data-required/data-invalid + aria-required/aria-invalid; Input emits data-invalid + aria-invalid. - soma: opts include `invalid` and `required`; runtime registration + provider props derivation emits the data-attrs. - eidos css: risk-border on Input + Control when [data-invalid]. - E2 APG: added `apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/textbox/'` to morfo — Editable is essentially a textbox swap. - E3 form integration: new HiddenInput part (morfo + soma + eidos). The Provider wrapper auto-renders `<EditableHiddenInput>` when `name` is set, so consumers don't have to compose it manually. Submits value as native form data. - E4 Control re-export: Eidos namespace now exposes `Editable.Control`, matching the soma surface. - E7 submit hover: replaced `filter: brightness(1.04)` with `--_editable-accent-solid-hover` per color variant. Consistent with the other triggers' bg+border transition pattern. - E9 disabled state: added `cursor: not-allowed` + `color: content-disabled` on Preview/Input/triggers, alongside the existing opacity. Clearer feedback than opacity alone. - E10 defaultValue: new prop seeds `value` once via untrack when `value` is uncontrolled. Same pattern as the recent select.defaultValue. Demo at /uix/components/editable: switches for invalid/required/disabled, a Form integration section with native form submit + FormData panel, and a defaultValue uncontrolled example. Verified: svelte-check --threshold error → 0 errors / 0 warnings / 4578 files. Soma tests: 3/3 pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	75136e6de5	fix(select) + feat(field): match-anchor width, label persistence, OptionalIndicator, auto-label ... select bugs - The popover content didn't match the trigger width even though matchAnchorWidth was already implemented in the eidos layer. Root cause was in soma/layers/floating/floating.svelte.ts: `transformedStyle` read `this.opts.style` directly without `.current`, so consumer styles never merged into the floating wrapper. Fixed by reading `this.opts.style.current` and also returning the value when it's an object (previously fell through to undefined). All popover-based components (select, combobox, date/time pickers, color picker) now get their `style` prop applied. - The trigger value text reverted from the rendered label (e.g. "Apple") to the raw value string ("apple") whenever the popover closed. Items unmount when Content's Presence collapses, and they were unregistering their label on cleanup — leaving the label registry empty between opens. Drop the unregister on cleanup; keep registrations alive across popover open/close cycles. Re-mounts overwrite the entry. field improvements (F1 + F2 + F3) - F1: add an explicit `[data-field][data-variant='surface']` CSS block so the surface variant (declared in the type union) has its own rule instead of silently falling back to the default style. - F2: new `OptionalIndicator` part (morfo + soma wrapper + eidos wrapper). Renders only when `required === false`. Default text comes from `texts['optional-indicator']` ("(optional)"). Styled muted + 0.85em. - F3: `<Field.Label />` without children now auto-renders the localised label from `texts.label`. Reduces boilerplate when consumers rely on the field name for its label. - Demo at /uix/components/field gained composition examples for the new parts. Verified: svelte-check --threshold error → 0 errors / 0 warnings / 4576 files. In-browser: select trigger and popover widths both 336 px; closed and open values both show labels (e.g. "Apple, Pear, Orange"). Field demo shows 2 required `*`, 1 `(optional)`, and an empty `<Field.Label />` falling back to the literal "Field". Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	ffdb480403	feat(select): invalid state + ItemDescription + defaultValue + visual fixes ... Audit-driven improvements to Select: - morfo APG URL fixed (combobox → listbox; Select is a collapsible-listbox per ARIA APG, not a text-input combobox). - `invalid` prop added to soma + morfo data-invalid/aria-invalid on Provider and Trigger. Eidos applies risk-border + tinted focus shadow when invalid. - `defaultValue` prop added (string | string[]) for uncontrolled init. Normalized to string[] inside the soma wrapper via untrack so the reference is intentionally non-reactive. - `ItemDescription` part: new morfo part (kebab item-description, archetype description), new soma wrapper + new eidos wrapper. CSS gives muted color and 0.85em font-size; when the parent item is checked, the description inherits accent color. - Value truncation: ensure `min-inline-size: 0` + `max-inline-size: 100%` on the trigger value so long labels ellipsis instead of overflowing. - Highlighted vs checked distinction: the highlighted-only state now uses a lighter hover background, and an item that is both highlighted and checked gets an additional inset focus ring on top of the accent fill. Demo at /uix/components/select adds an `invalid` switch, and three of the six items now ship with a description (Apple / Pear / Carrot). Verified in browser: - triggerInvalid + aria-invalid = true after toggling switch. - Description on non-checked item: rgb(123,123,123) (content-muted). - Description on checked item: accent purple (inherits). - svelte-check --threshold error → 0 errors / 0 warnings / 4574 files. Deferred: SL3 readonly (rare use case), SL4 virtual scrolling (own task). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	fd3a0b00c9	feat(calendar, date-picker, date-range-picker): add xs size + fix duplicate footer ... xs propagation - Add [data-size='xs'] blocks to calendar.css, date-picker.css, date-range-picker.css (root + inline range calendar). - Extend CalendarSize union with 'xs'; DatePicker / DateRangePicker inherit it through their type re-exports. - date-picker-content + date-range-picker-content clamp xs to sm when forwarding to PopoverContent (PopoverSize starts at sm; the calendar inside still receives xs via data-size). - size chip groups in calendar / date-picker / date-range-picker demos now list xs / sm / md / lg. date-picker demo: fix duplicate footer - The `calendarBody` snippet had a hardcoded <DatePicker.Footer> that rendered alongside the controllable `pickerFooter` snippet, producing two footer rows when showFooter=true. Removed the hardcoded one. Verified in browser: - date-picker size='xs' -> data-date-field-input height 26px (control-height-xs), padding 8px (space-2), font-size 12px. - date-picker popover now shows a single footer. - svelte-check --threshold error -> 0 errors / 0 warnings / 4572 files. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	f4707bd0c9	feat(month-grid, year-grid): add xs size ... Both grids now accept size='xs' alongside sm/md/lg. - recipe: add calendar-padding-xs / control-size-xs / day-size-xs / font-size-xs tokens (space-2, control-height-xxs=22px, font-size-xs). Regenerated generated/base.css. - eidos css: add [data-month-grid][data-size='xs'] and the year-grid equivalent before the existing sm block. - types: MonthGridSize / YearGridSize extend Size with 'xs'. - demos: size chip group now lists xs / sm / md / lg. Verified in browser at /uix/components/month-grid with size='xs': cell block-size = 22px, padding = 8px (space-2), font-size = 12px. svelte-check --threshold error -> 0 errors / 0 warnings / 4572 files. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	f7831563a1	feat(month-grid, year-grid): standalone primitives parallel to date-picker views ... DatePicker.MonthView / YearView require a DatePickerProvider context and can't be used standalone. This commit introduces MonthGrid and YearGrid as independent primitives that accept value / placeholder / minValue / maxValue as props and work anywhere. morfo - New morfo/components/month-grid.ts and year-grid.ts. - scope: ['soma','sema'], apg: grid pattern. - 7 parts each: Provider (role=application) / Header / Heading / PrevButton / NextButton / Grid (role=grid) / Cell (role=gridcell). - Events: commit-set (cell click) + nav-step (prev/next). - Cell data-attrs: data-value, data-selected, data-current, data-disabled, data-focused. - Keyboard map covers arrows / Home / End / PageUp/Down / Enter / Space. soma - New soma/components/{month-grid,year-grid}/ with provider class + langs + types + exports + 7 thin svelte wrappers each. - MonthGridProvider: 12-cell grid keyed to placeholder.year; localized month names via Intl.DateTimeFormat with configurable monthFormat ('long'|'short'|'narrow'). Prev/Next step ±1 year. - YearGridProvider: decadeSize-cell grid (default 12); page anchored at placeholder.year - (placeholder.year % decadeSize). Prev/Next step ± decadeSize. - Both expose Cell sub-provider with snippetProps {selected, disabled, current, value, label} + roving tabindex + RTL-aware keyboard nav. eidos - New eidos/components/{month-grid,year-grid}/ — namespace-style index with size / variant / color visual props + dedicated CSS reusing the --calendar-* token family. - Each grid renders Header (Prev/Heading/Next) + 3-col Grid. demo - New /uix/components/month-grid and /uix/components/year-grid demo pages with the standard live/api/morfo/sema/recipe/a11y tabs, interactive controls for every public prop, soma+eidos snippets that reactively rebuild from controls, and sema event play buttons. Verified: svelte-check --threshold error -> 0 errors / 0 warnings / 4572 files. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	dd22cfc2bc	feat(time-range-picker): eidos wrapper + canonical picker-shell parity ... Builds the Eidos time-range-picker layer end-to-end and brings color-picker's morfo into parity with the other pickers. time-range-picker - soma: `mode` prop, `pickerShellContext` registration with commit/cancel/clear and `valueOnOpen` snapshot for revert; Provider now renders a div with data-state/disabled/readonly/required + aria mirrors. - soma: new `Clock` part (mirrors TimePicker.Clock with role="dialog" and data-state). - morfo: scope ['soma','sema'] + apg dialog-modal; promoted Provider to public div with states/data-state; added Clock part; declared the 6 canonical picker events (open / close-commit / close-cancel / close-dismiss / close-dismiss-outside / commit-clear); slider parts declare data-endpoint + data-disabled. - eidos: full namespace (Trigger / Content / Clock / HourSlider / MinuteSlider / SecondSlider / DayPeriodToggle + re-exported PickerShell Footer / Clear / Cancel / Close). Sliders compose generic SliderProvider (N-8) and ship with optional rulers above hour / below minute+second. - eidos css: 2-column endpoint grid in the clock; per-endpoint range tint; AM/PM toggle styling; reuses time-field tokens. - demo: interactive testbed at /uix/components/time-range-picker mirroring the time-picker demo — every soma + eidos prop has a live control, closeOnRangeComplete + start/endReadonlySegments toggles, footer composition switches, sema play buttons, soma+eidos snippets. - nav: added entry between Time picker and Color field. color-picker (audit fixes) - morfo: Provider declares states ['open','closed'] + data-state attr; added the same 6 canonical picker events targeting the `content` part (handle-pick / handle-drag / commit-set preserved). - soma: runtime now feeds open state + disabled/readonly/required/invalid props to the morfo runtime so data-state actually emits. Verified: svelte-check --threshold error → 0 errors / 0 warnings / 4524 files. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	da19728cb6	feat(color-picker): area drag emits handle-pick/handle-drag/commit-set + refresh demo snippets ... User report: 'el selector del cuadro de colores, no tiene semántica, es un drag, etc como el slider, no?' You're right — the 2D area is a drag interaction with the same shape as a slider. It was wiring pointer events to soma state but staying silent to sema; nothing for sounds/haptics/transient styles to hook onto. Now it speaks the same vocabulary as the slider. Morfo additions (color-picker) ------------------------------ - `handle-pick` (family: handle, verb: pick, sequence: coincident, target: area) — fires once at pointer-down. - `handle-drag` (family: handle, verb: drag, sequence: coincident, target: area) — fires on each move (pointer or keyboard step). - `commit-set` already existed — now also emitted on pointer-up and on each keyboard step (slider parity). Soma changes (color-picker-provider) ------------------------------------ - ColorPickerAreaProvider: - `onpointerdown` → trigger `handle-pick` then continue to drag. - `handlePointerMove` → trigger `handle-drag` after writing the value. - `onpointerup` → trigger `commit-set` then `commitChange()` for the onValueChangeEnd callback. - ColorPickerAreaThumbProvider.onkeydown: - Each arrow / Home / End / PageUp / PageDown step now triggers `handle-drag` + `commit-set` + commitChange(). Matches the slider's keyboard semantics (one step = one drag + one commit). Demo snippet refresh -------------------- The `somaSnippet` / `eidosSnippet` in `/uix/components/color-picker` were stuck on the pre-refactor API (`<ColorPicker.Area>` with explicit Background+Thumb children, no `Control`, no `ValueSwatch`, no PickerShell footer). Updated both to mirror the current demo body: - Eidos: `Label / Control[Trigger + ValueText + HiddenInput] / Portal / Content[Area / ChannelSlider hue / alpha / ValueSwatch + ChannelInput + EyeDropper / SwatchGroup / Footer[Clear/Cancel/ Close]]`. - Soma: same shape but uses `PickerShell.Footer / Clear / Cancel / Close` explicitly (and the explicit Track/Thumb composition on channel sliders for the curious). - Both snippets honor the live `mode / inline / closeOnSelect / enableAlpha / showFooter / showClear / showCancel / showClose` flags from the chip controls. Checks: 67/67 component-audit PASS, 40/40 morfo:check PASS, svelte-check 0 errors / 0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	3e5be857c4	fix(color-picker): single-row preset palette of 10 swatches that share container width ... User report: 'la paleta dejala en 10 y más pequeños para que solo ocupen una linea, se deben de ajustar a lo ancho'. Demo ---- - Preset palette trimmed from 11 to 10 colors. CSS — swatch-group rewritten to single-row flex layout ------------------------------------------------------ - `display: flex; flex-wrap: nowrap; inline-size: 100%; min-inline-size: 0` so all swatches share the available width. - Each `<SwatchTrigger>` becomes `flex: 1 1 0` + `min-inline-size: 0` + `aspect-ratio: 1` + `inline-size/block-size: auto`, with the recipe token (`--color-picker-swatch-size`) acting as `max-inline- size` instead of a fixed size. Net effect: swatches shrink/grow together to fit any popover width and any number of presets, while capping at 1.5rem so they don't blow up on huge containers. Math at default md popover (~19.5rem content width, ~14px padding each side, 10 swatches × ~23px + 9 × 6px gap ≈ ~284px usable). Each swatch lands at ~23px and the row never wraps. Checks: 67/67 component-audit PASS, svelte-check 0 errors / 0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	aaf35fdbb0	fix(color-picker/demo): compact value row — swatch + channel input + eyedropper inline ... User feedback: 'se pueden realinear los diferentes elementos para que no sea tan alto, el pick from screen en la misma linea del color seleccionado, o el input del valor al lado del color, etc.' Collapses three previously-stacked rows into one: Before: [preview swatch + value text] ← row 1 [channel input segments + format] ← row 2 [eyedropper button + label] ← row 3 (right-aligned) After: [swatch] [channel input ........] [eyedropper] ← single row The ValueText is dropped because the channel input segments already show the hex/rgb/hsl value digit-by-digit (more useful than a static string). The eyedropper becomes a compact icon button at the end of the row — `aria-label="Pick color from screen"` still announces it. Net effect: ~50px shorter popover. Files ----- - web/routes/uix/components/color-picker/+page.svelte — `.cp-value-row` flex layout with swatch (1.75rem) + ChannelField (flex: 1 1 auto) + EyeDropper. ChannelField input forced `flex-wrap: nowrap` so segments stay inline. Old `.cp-preview-row` / `.cp-eyedropper-row` styles removed. Checks: 67/67 component-audit PASS, svelte-check 0 errors / 0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	709d8a108e	fix(color-picker): fix slider gradients + add live preview + label eyedropper ... User report: 'los sliders son deficitarios, no muestra la banda de color ni de transferencia, faltan textos, el color seleccionado aparte del valor ascii, un texto que indique el gotero, etc.' Three concrete issues addressed. 1. Slider gradients invisible ----------------------------- Root cause: the soma channel-slider div carries BOTH `data-slider` (from SliderProvider.props) and `data-color-picker-channel-slider` (from mergeProps). My CSS targeted `[data-color-picker-channel-slider] [data-slider]::before` — i.e. as a *descendant*. They're the same element, so the selector never matched and the rainbow / alpha gradient stayed hidden. Fix: - New selector `[data-color-picker-channel-slider][data-slider]::before` paints the gradient on the slider's own track strip. - Transparency checker moved to the wrapper's `::after` (with `z-index: -1` + `isolation: isolate`) so it sits behind the gradient — visible only where the alpha gradient ramps to transparent. - Adds a subtle border on the track so the strip is visible against the popover surface. 2. Live preview alongside the hex/rgb/hsl string ------------------------------------------------ The popover used to show only the segmented ChannelInput (digits) and a small swatch dot on the trigger. Now the popover has a `.cp-preview- row` with `<ColorPicker.ValueSwatch>` (2rem) + `<ColorPicker.ValueText>` + uppercase format tag, so the user always sees the actual color visually alongside its numeric representation. 3. Eyedropper label ------------------- Added a textual `Pick from screen` label next to the icon button, plus `aria-label` on the EyeDropper. The button is no longer a mystery glyph. 4. Channel slider row labels ---------------------------- Each ChannelSlider now sits in a `.cp-slider-row` with a leading uppercase label (Hue / Alpha) so the user knows what each track drives without hovering or reading aria. 5. Section header for swatches ------------------------------ 'Preset colors' header above the swatch grid for visual hierarchy inside the popover. Files ----- - src/uix/eidos/components/color-picker/color-picker.css — slider gradient routing + checker-on-::after layering. - web/routes/uix/components/color-picker/+page.svelte — preview row, slider row labels, eyedropper label, section headers + local scoped CSS in <style>. Checks: 67/67 component-audit PASS, 40/40 morfo:check PASS, svelte-check 0 errors / 0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	714ee3735c	feat(picker-shell): extract shared Footer/Clear/Cancel/Close + apply to color-picker ... Introduces PickerShell — a soma context + eidos parts shared by every composite picker (date, time, color, future range pickers). Aligns with norm N-8 (reuse components across complex composites) so the Footer/Clear/Cancel/Close behavior lives in ONE place instead of being duplicated per picker family. New files --------- - src/uix/soma/components/picker-shell/ picker-shell-handle.svelte.ts → pickerShellContext + PickerShellHandle interface (getMode / commit / cancel / clear). exports.ts, index.ts → public surface. - src/uix/eidos/components/picker-shell/ picker-shell-footer.svelte → [data-picker-footer][data-mode] picker-shell-clear.svelte → [data-picker-clear][data-action] picker-shell-cancel.svelte → [data-picker-cancel][data-action] picker-shell-close.svelte → [data-picker-close][data-action] picker-shell.css → canonical action-row recipe. index.ts, types.ts → PickerShell namespace + prop types. - Registered in src/uix/eidos/index.css. Color-picker now consumes the shell ----------------------------------- - ColorPickerProvider gets `mode: 'inline' | 'modal'` opt + a `valueOnOpen` snapshot via watch(open) so cancel() can revert. - New `commit()` / `cancel()` / `clear()` methods with shell-picker semantics. The previous `commit()` (fires onValueChangeEnd) was renamed `commitChange()` since the picker-shell `commit()` means "save + close". All internal callers (area-thumb pointerup, swatch click, eyedropper open, channel-slider drop) updated. - Constructor registers the handle: `pickerShellContext.set(this.pickerShellHandle)`. - PopoverProvider receives `modal: mode === 'modal'` so outside-click + Escape get blocked when modal. - Eidos `ColorPicker.Footer / .Clear / .Cancel / .Close` re-export the shared parts. The old `ColorPicker.Close = PopoverClose` was renamed `ColorPicker.PopoverClose`; the canonical `Close` is now the picker-shell save action. Demo ---- - New `mode` chip (inline | modal). - Footer composition switches (render footer / clear / cancel / close). - Renders <ColorPicker.Footer> with shell parts inside <Content>. Visual fixes ------------ - Horizontal overflow on the popover content: added `min-inline-size: 0 / max-inline-size: 100% / box-sizing: border-box / overflow-x: hidden` on `[data-popover-content][data-color-picker-content]` and on its direct children. Inner ChannelInput allowed to wrap segments instead of pushing the popover wider. - ColorField segments inside the popover gain `flex: 0 1 auto`. Norms ----- - N-8 case study appended to PENDIENTES.md documenting the PickerShell extraction alongside the channel-slider refactor. Checks ------ - 67/67 component-audit PASS - 40/40 morfo:check PASS - svelte-check 0 errors / 0 warnings Follow-up (task #81): migrate date-picker / time-picker Footer to use PickerShell too — drop the duplicate `date-picker-footer/clear/ cancel/close.svelte` and `time-picker-footer/clear/cancel/close.svelte` files; update CSS selectors to `[data-picker-footer/...]`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	2731ee567b	feat(eidos): add ColorPicker wrapper + demo ... Composite popover: 2D saturation/brightness area, hue + alpha channel sliders, preset swatches, eye-dropper, and a segmented channel input composed from ColorField. Builds on the existing soma color-picker (23 parts) — eidos layer is mostly thin pass-throughs adding visual chrome. What landed ----------- - New `src/uix/eidos/components/color-picker/`: - Root visual (Provider) + visual-context (size/variant/color) - Trigger with a default swatch dot tinted from `--cp-trigger-color` (the air pattern from morfo-runtime) - Content (popover wrapper), Area (+ Background + Thumb), TransparencyGrid - ChannelSlider (+ Track + Thumb) — generic per-channel slider; default-composes Track+Thumb when no children - SwatchGroup + SwatchTrigger + Swatch + SwatchIndicator - EyeDropper (Pipette icon by default) - ChannelInput + ChannelSegment + FormatSelect (composed from ColorField parts; same provider injected automatically) - Label, Control, ValueSwatch, ValueText, HiddenInput - Recipe section `color-picker` in `recipes/base.ts` (regenerated `generated/base.css`) — trigger, content, area, channel slider, swatches, eye-dropper tokens. - CSS reuses color-field tokens for the segmented input portion and adds picker-specific visuals. Transparency checker on trigger swatch + value swatch + alpha slider track via conic-gradient pattern. - Morfo updates: scope `['soma','sema']`, `apg: dialog-modal`, added `commit-set` event so audit classifies it as interactive. - Soma exports: ColorPickerProvider class so eidos Trigger can read the current value for the swatch tint. - Demo at `/uix/components/color-picker` with the standard 6 tabs; live stage exercises area drag + channel sliders + preset swatches + eye-dropper + format switch. - README documents the surface, comparativa vs air/Ark/Chakra, and flags the picker contract (mode/Footer/commit/cancel) as gap to align with date/time-picker in a follow-up. Checks ------ - 67/67 component-audit PASS - 40/40 morfo:check PASS (new color-picker demo validates against morfo DOM) - svelte-check 0 errors / 0 warnings Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	2f147897d9	feat(morfo/time-picker): declare HourSlider/MinuteSlider/SecondSlider as parts + ruler opt-out prop ... User pointed out that TimePicker exposes <TimePicker.HourSlider> / .MinuteSlider / .SecondSlider in its public API but those weren't declared in the time-picker morfo — the contract was implicit (data- slider attrs from the slider morfo). Now made explicit. Morfo additions (all optional, archetype: 'group'): - HourSlider → data-time-picker-hour-slider - MinuteSlider → data-time-picker-minute-slider - SecondSlider → data-time-picker-second-slider Eidos slider wrappers stamp the corresponding data-attr on the outer wrapper div so morfo:check finds the parts in the DOM. The inner slider DOM (data-slider, data-slider-thumb, data-slider-range) keeps its own contract via the slider morfo — composition, not duplication. Also: - Hour ticks now end-inclusive: 24h shows 0/3/6/9/12/15/18/21/23 (was 0..21, missing the upper cap). 12h shows 1/3/6/9/12. - Minute / Second scale now ends with 59 so the upper bound is shown. - New optional `ruler` prop on <TimePicker> (default `true`) and matching per-slider `ruler` opt-out. Propagated via visual context. - Demo: new switch to toggle the ruler scale. 67/67 component-audit PASS, 39/39 morfo:check PASS, svelte-check 0 errors / 0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	391de6e04c	feat(eidos): add TimePicker wrapper + demo following P-1..P-5 picker contract ... Builds on the existing soma TimePicker slider-based clock (HourSlider / MinuteSlider / SecondSlider + DayPeriodToggle). Adds the canonical picker shell: - mode='inline' | 'modal' on the Provider, propagated to popover.modal - Provider helpers commit() / cancel() / clear() with watch(open) snapshot for cancel-revert - Footer composition (TimePicker.Footer / Clear / Cancel / Close as pure-composition Eidos parts; no *Button root props) - New TimePicker.Clock soma component that carries the data-time-picker-clock contract attr, wraps the slider stack - Eidos shell: Provider visual root, Trigger (clock icon), Content (popover content), Clock, Footer + action parts, slider/toggle pass-throughs Renews the time-picker morfo to declare Provider / Trigger / Clock / DayPeriodToggle / DayPeriodItem / Footer / Clear / Cancel / Close, plus all 6 commit/emerge events (open + close-commit/cancel/dismiss/ dismiss-outside + commit-clear). apg=dialog-modal. Demo at /uix/components/time-picker exercises all controls, Footer composition switches, soma + eidos code snippets, morfo / sema / recipe / a11y tabs. README documents the picker contract. 67/67 component-audit PASS, 39/39 morfo:check PASS, svelte-check 0 errors / 0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	ff279ae828	feat(eidos): add TimeField + ColorField wrappers and demos ... Mirrors the date-field pattern (Provider visual root + Label / Input / Segment / HiddenInput parts; ColorField also exposes FormatSelect). Soma owns segment editing, ARIA spinbuttons, validation, format switching and form submission; Eidos adds size (xs..xl), control variant (surface/outline/ghost) and intent color recipes. Adds time-field and color-field recipe sections to recipes/base.ts (regenerated generated/base.css) and registers both routes in the sidebar nav. apg=spinbutton declared on both morfos. READMEs follow the Baseline / Superficie / Comparativa / Decisiones / Gaps / Referencias template required by audit F-1.x. All 67 component-audit components PASS, 38/38 morfo:check PASS, svelte-check 0 errors/0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	05a432afc0	date-range-picker: YearRangeView + MonthRangeView (kind grids) ... Completes the kind contract for the range picker. The popover used to render the day-grid range calendar regardless of kind; now it switches to a year-grid or month-grid view that handles range selection on the appropriate granularity. New Eidos parts: - <DateRangePicker.YearView>: 3×4 decade grid with prev/next decade buttons. Selection state machine (mirrors the day-grid range selection): * empty → click sets startValue (and clears endValue) * pending (start set, no end) → click sets endValue. Swap if the clicked year is before the existing start. * complete (both set) → click resets to a fresh start + clears end. Year endpoints normalise to Jan 1 (start) / Dec 31 (end). - <DateRangePicker.MonthView>: 3×4 month grid for the placeholder's year, with prev/next year navigation. Same state machine using `year*12 + month` as the comparison key, so ranges span multi-year boundaries cleanly. Start = day 1; end = last day of the month (computed via Date(y, m, 0).getDate()). - Localised month names via DateFormatter(locale, { month: 'short' }). Index + CSS: - index.ts: registers YearView + MonthView on the DateRangePicker namespace. - date-range-picker.css: shared grid layout (3 columns, gap-2), hover surface-overlay, selected cells get primary-solid + content-on-solid, in-range cells get color-mix(primary-solid 22%, transparent) as a stripe with border-radius:0 (start/end keep their outer corner radius). Reduced-motion respected. Demo: - {#if kind === 'year'} → <YearView>; {:else if 'month'} → <MonthView>; {:else} → existing day calendar. - pickerFooter snippet rendered once at the Content level (removed the inline render at the end of calendarBody to avoid duplication). Verified in browser: 1. kind='year' chip → popover shows year grid '2020 – 2031'. 2. Click 2024 → cell marked start (purple solid). 3. Click 2027 → cell marked end, 2025-2026 marked in-range. trace shows 'range 2024-01-01 -> 2027-12-31'. Popover stays open (closeOnRangeSelect=false in the demo). 0 type errors, 67/67 component:audit PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	9baccecda9	picker demos: footer composition switches + popover closed by default ... Two follow-ups from user feedback: (1) User: 'en los demos no existen para definir las propiedades y visibilidad del pie y los botones' — after the previous refactor that moved visibility from props to composition, the demos lost their UI switches and there was no way to toggle the parts on/off. Restored toggles but with the correct semantics: the switches now decide whether each part is INCLUDED in the markup, not whether the part renders internally. Composition first, demo UX second. - Both demos: new state vars showFooter / showClear / showCancel / showClose (default all true). - New `{#snippet pickerFooter()}` snippet that renders <Footer><Clear/><Cancel/><Close/></Footer> with {#if show*} guards on each child. Rendered once via {@render pickerFooter()} at the end of every calendar branch (Calendar / MonthView / YearView for single; the rangeCalendar for range). - New 'footer' control row with 4 switches per demo, labelled with the structural intent ('compose parts inside <Footer>'). (2) User: 'el popover del calendar aparece, eso es un error' — the previous commit defaulted open=true on both demos so the new Footer was visible at first paint. That conflicted with the natural flow (user expects to click the trigger to open). Reverted to open=false by default. Also removed the auto-reopen $effect that re-opened the popover whenever `kind` changed. The chip click can close the popover via outside-click in inline mode; the user re-opens deliberately. No more magic. Verification: 0 type errors, 67/67 component:audit PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	4a866cf86a	date-range-picker: propagate kind to start/end inputs ... User: 'lo has trasladado da daterangepicker?' — only the Footer pure- composition refactor had landed in range; the `kind` prop (Chakra date/month/year variant) was still single-picker only. The range demo's input segments stayed MM/DD/YYYY regardless of the chip. This commit propagates `kind` end-to-end through the range stack. Calendar view-mode (year-grid / month-grid for ranges) is still pending — that's the next commit. soma: - DateRangePickerKind type exported alongside DateRangePickerMode. - DateRangePickerProvider opts gain `kind`. Root .svelte threads it through readableActive both to the picker context AND to the DateRangeFieldProvider it creates. - DateRangeFieldProvider opts gain `kind` (single value — there's no use case for kind='year' on start + kind='month' on end; the range picker enforces a uniform kind on both endpoints). - date-range-field-input forwards provider.opts.kind to each endpoint DateField it spawns. The constant `kind: 'date'` placeholder is gone. - types.ts (range-picker + range-field): JSDoc + prop declarations. - exports.ts: surface DateRangePickerKind alongside DateRangePickerMode. - Test fixtures (range-picker + range-field): extended with the new opt. demo: - `let kind = $state<'date' | 'month' | 'year'>('date')` + chip control next to the `mode` radio + prop pass-through to <DateRangePicker>. Browser confirmed: clicking 'year' chip collapses BOTH start and end inputs to a single `2026` segment. 'month' shows MM/YYYY on both. 'date' restores MM/DD/YYYY. What's still pending (next commit): - Year-grid and month-grid views for the range popover. Currently the day calendar still renders regardless of kind. The range picker's popover view-mode needs RangeCalendar to gain a `view` prop and the eidos surface to dispatch to YearRangeView / MonthRangeView components (range selection state machine: first click sets start, second click sets end). Verification: 0 type errors, 18/18 tests across the date-* soma suite, 67/67 component:audit PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	6299e6ebc6	pickers: Footer parts = pure composition (drop *Button props) ... User correctly pointed out: button visibility should not be exposed as properties on the picker root. It should be expressed via composition — if you include <DatePicker.Clear/> inside <DatePicker.Footer/>, it shows; if you omit it, it doesn't. Same as how Header parts work, and extensible to derivatives (date-range-picker follows the same rule). This commit removes the visibility props + visibility checks. Pure composition wins. soma: - DatePickerProvider opts: drop clearButton / cancelButton / closeButton. The root soma component drops the props + the readableActive passes. Same for DateRangePickerProvider. - types.ts: drop the prop declarations + JSDoc. - Test fixtures: drop the state() entries for the removed opts. eidos parts: - date-picker-clear / cancel / close: drop the `visible` $derived and the {#if visible} guard. Render unconditionally. - date-range-picker-clear / cancel / close: same. - date-picker-footer / date-range-picker-footer: also drop the combined `visible` $derived. The Footer container always renders whatever children are composed inside. Modal mode: previously the Close part forced itself visible whenever mode='modal'. That magic is gone too — the consumer is now responsible for including <Close/> if mode='modal'; otherwise the modal has no exit affordance (and that's documented in the Close part's comment). demos: - Drop clearButton/cancelButton/closeButton state vars. - Drop the prop pass-through on <DatePicker> / <DateRangePicker>. - Drop the 'footer buttons' switch group. - Drop snippet code refs to those props. - Keep the same <Footer><Clear/><Cancel/><Close/></Footer> markup inside the calendar branches — now visibility is purely structural. Verification: 0 type errors, 7/7 date-picker + date-range-picker soma tests, 67/67 component:audit PASS. The picker still renders with all three buttons by default (because the demos compose them). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	0956aa1c37	date-picker: kind derives segments at soma layer + year/month views ... User correctly pointed out: the input segments depend on the kind of calendar — they're *derived* values, not independently controlled. Filtering segments in the demo snippet (commit A) was wrong; the derivation belongs in the DateField provider. This commit refactors the contract + lands the year/month-grid views (combining commit B + C into one). Architecture fix (segments derive from kind): - DateFieldProvider opts gain `kind: 'date' | 'month' | 'year'`. - `segmentContents` filters `allSegmentContent.arr` by a derived `visibleDatePartsByKind` set, collapsing runs of literals and trimming leading/trailing separators. Time segments (hour/minute/ second/dayPeriod) are passed through untouched — `kind` is orthogonal to `granularity`. - DateField root component accepts `kind` prop and threads it. - DatePicker root forwards its `kind` to the DateField provider it creates internally. - DateRangeField passes `kind: 'date'` as a constant for now; range propagation lands in commit D. - Test fixtures extended with the new opt. New Eidos parts (commit B + C in one shot): - `<DatePicker.YearView>`: 3×4 decade grid centred on placeholder's decade boundary. Header shows the decade range with prev/next decade buttons. Click on a year sets value to (year, 1, 1) and calls handleDateSelect (closes if closeOnDateSelect=true inline). - `<DatePicker.MonthView>`: 3×4 month grid for the placeholder's year. Localised month names via DateFormatter. Header shows the year with prev/next year buttons. Click sets (year, month, 1). - CSS for both: shared 3-column grid layout, hover surface-overlay background, selected cell uses primary-solid + content-on-solid. focus-visible outline. prefers-reduced-motion honoured. Demo wiring: - Removed the local `filterByKind` helper — soma derives it now. - The snippet just iterates `segments` as it comes. - The popover content branches on `kind`: Calendar for 'date', MonthView for 'month', YearView for 'year'. The Footer renders in all three branches. - An $effect re-opens the popover whenever `kind` changes (clicking the chip outside the popover would otherwise close it in inline mode). What this commit DOES NOT do (commit D): - Propagate `kind` to date-range-picker (start + end inputs + the range-calendar popover view-mode). - date-range-field consumes `kind: 'date'` only for now. Verification: 0 type errors, 11/11 date-field + date-picker tests, 67/67 component:audit PASS. Browser confirmed: - kind=date → MM/DD/YYYY input + day calendar - kind=month → MM/YYYY input + month grid (2026) - kind=year → YYYY input + year grid (2020 – 2031) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	46ce1d800d	date-picker: kind prop (date/month/year) — commit A scaffolding ... User wants Chakra-style behavior: the chip in the demo should drive both the visible segments in the input AND the calendar view (year-only grid, month-only grid, day calendar). The previous 'readonly segments' chip was a Bits-style input lock, not a picker kind switch — wrong contract. This commit lays the scaffolding for the Chakra model, in four incremental landings (A → D). It's the FIRST landing. What changes: - DatePickerKind type ('date' | 'month' | 'year') exported from soma. - DatePickerProvider opts gain a `kind` slot; the root .svelte defaults to 'date' and threads it through readableActive. - exports.ts surfaces the new type alongside DatePickerMode. - The root <div data-date-picker> emits data-kind for downstream CSS / picker parts to consume in subsequent commits. - Test fixture extended with the new opt. Demo (date-picker single): - Chip control renamed from 'readonly segments' to 'kind' with values date / month / year. A hint shows the current input format (YYYY / MM/YYYY / MM/DD/YYYY). - New `visibleDateParts` derived set drives a `filterByKind` helper applied to the segment snippet, so the input renders the right subset on first selection. Literals (separators) between dropped parts are removed; leading/trailing literals are trimmed. - Snippet code refs updated: closeButton && readonlySegments line replaced with kind !== 'date' && ` kind="${kind}"`. What this commit DOES NOT do (next commits): - B: render the year-grid in the calendar popover when data-kind=year. - C: render the month-grid when data-kind=month. - D: propagate to date-range-picker + wire the soma date-field to drop segments based on kind (currently the filter lives in the demo snippet — works for single-picker but isn't a contract for third-party consumers). Verification: 0 type errors. Browser-confirmed: clicking 'year' chip collapses the input to a single '2026' segment and stamps data-kind='year' on the picker root. Calendar still shows day-grid (that's commit B's scope). 67/67 component:audit PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	3956a5d39e	picker demos: open by default + footer buttons enabled ... User report: 'no veo que haga nada nuevo en la demo' — the new canonical Footer/Clear/Cancel/Close parts existed but were invisible on first load because every *Button toggle defaulted to false and the popovers opened closed. The user reloaded, saw the same baseline as before, and concluded nothing had landed. Fix: - date-picker demo: open=true, closeOnDateSelect=false (so the user can pick a date without the popover collapsing while exploring), clearButton=true, cancelButton=true, closeButton=true. Result: on first load the calendar is visible with 'Borrar fecha · Cancelar · Cerrar' below it, in the active locale. - date-range-picker demo: same — open=true, clear/cancel/close all default to true. The comment claiming the popover should stay closed because 'segments are for keyboard entry' is replaced; the demo's purpose is to surface the API, and the segments are still reachable by Tab-focus even when the popover is open. These changes are demo-only — the actual provider defaults stay inline/false. Production consumers must opt in. 0 type errors. Browser verified: Footer renders with all three i18n-driven labels at the bottom of the calendar. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	bf9dc8934d	pickers: visible readonly segment styling + date-picker demo control ... User report: setting startReadonlySegments/endReadonlySegments in the date-range-picker demo didn't change anything visible, and the date-picker demo had no equivalent control. Root cause #1 (visible): the readonly segment styling was background: var(--color-neutral-track) — primitive-neutral-3 — too close to the surface background in both themes. Mechanically the lock was working (data-readonly stamped, keyboard updates blocked) but the visual delta was invisible. Fix: add segment-readonly-color + segment-readonly-decoration tokens to the recipe. Read-only segments now render with - background: var(--color-surface-overlay) (clearer step from default) - color: var(--color-content-secondary) (slightly faded) - text-decoration: underline dotted var(--color-content-muted) - cursor: default both in date-field.css and the date-range-picker per-component override. Root cause #2 (consistency): date-picker demo lacked the segment-lock chip group that the range demo has. Added segmentLock state + readonly-segments derived array (year / monthYear / date presets) + chip control + snippet integration. Now both pickers expose the prop identically. Verification (browser): clicking the 'monthYear' chip in date-picker demo stamps data-readonly on the month + year segments; the dotted underline + lighter color are visible. Range demo: clicking 'year' under 'start segments' affects only the start year segment, end stays editable. 0 type errors, 67/67 component:audit PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago