|
|
|
|
[data-stepper] {
|
|
|
|
|
--_stepper-gap: var(--stepper-gap-md);
|
|
|
|
|
--_stepper-indicator-size: var(--stepper-indicator-size-md);
|
|
|
|
|
--_stepper-font-size: var(--stepper-font-size-md);
|
feat(theming+soma): media-player Batch-4 (SOM-4) + THM-2 shared-palette rollout to 14 surfaces
media-player Batch-4 (closes SOM-4): the 10 sub-parts migrate to
renderProps() (35 attr-dup hits -> 0). Register the sources the morfo
reads (label propRef, on stateRef, direction/type) so renderProps emits
type/role/aria-*/data-state; keep only contract-only soma-owned attrs.
Pin the soma-attr-audit ceiling to 0.
THM-2 rollout - collapse each per-component palette cascade into the
shared per-instance layer (size win, behavior-preserving for roles,
adds the 33 scales):
- Rename palette tokens to canonical _palette-{slot} + route via the
presence-guarded forward: tags-input, stepper, badge, card, select
(parts-aware trigger+content), file-upload, editable, tag-group.
- Extend the shared vocabulary with alpha surface(a2)/surface-hover(a3)
slots (soft variant of variant-aware recipes) and hover(4) - the
latter also fixes Toggle's latent scale-hover.
- tag-group: variant-aware migration (solid/outline -> canonical,
soft -> alpha surface; merge outline-fg into text, prune orphans).
- toggle-group: replace the 4-role cross-recipe composition with a
hand-authored presence-scoped route to the shared layer (the
composition DSL can't presence-scope); covers roles + 33 scales.
- Widen color to ComponentColor (roles + 33 scales) where arbitrary
color is meaningful: badge, tag-group, tags-input, toggle-group, and
add the scale picker to their demos. Semantic controls stay restricted.
Verified end-to-end with the REAL components (drive the demo color
control -> the component emits data-color -> the shared layer resolves
the exact scale). Gates: recipe-css-contract/config/contracts/
soma-attr-audit/media-player suites green; 0 orphan tokens.
avatar remains for a focused pass: its variant-resolved matrix and badge
sub-part don't fit a mechanical migration.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 months ago
|
|
|
/* `--_stepper-palette-*` private tokens are TSC-emitted from
|
|
|
|
|
* `lib/recipes/base.ts > stepper._palette-*` with the per-color cascade;
|
|
|
|
|
* the THM-2 shared-layer forward routes them to `color="teal"` + 33 scales. */
|
|
|
|
|
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: var(--_stepper-gap);
|
|
|
|
|
min-inline-size: 0;
|
|
|
|
|
font-family: var(--stepper-font-family);
|
|
|
|
|
font-size: var(--_stepper-font-size);
|
|
|
|
|
line-height: var(--stepper-line-height);
|
|
|
|
|
color: var(--stepper-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper][data-size='sm'] {
|
|
|
|
|
--_stepper-gap: var(--stepper-gap-sm);
|
|
|
|
|
--_stepper-indicator-size: var(--stepper-indicator-size-sm);
|
|
|
|
|
--_stepper-font-size: var(--stepper-font-size-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper][data-size='lg'] {
|
|
|
|
|
--_stepper-gap: var(--stepper-gap-lg);
|
|
|
|
|
--_stepper-indicator-size: var(--stepper-indicator-size-lg);
|
|
|
|
|
--_stepper-font-size: var(--stepper-font-size-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-list] {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
gap: var(--stepper-list-gap);
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
list-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-list][data-orientation='vertical'] {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-item] {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: auto minmax(var(--stepper-separator-min-size), 1fr);
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--stepper-item-gap);
|
|
|
|
|
min-inline-size: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-item][data-orientation='vertical'] {
|
|
|
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
|
|
|
grid-template-rows: auto minmax(var(--stepper-separator-min-size), 1fr);
|
|
|
|
|
align-items: start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-trigger] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--stepper-trigger-gap);
|
|
|
|
|
min-inline-size: 0;
|
feat(audit): component re-audit + fixes P0–P5 (P4 complete, P5 in progress)
Re-audit of the whole component catalog at pilot depth (91 fichas + the
checkpoint verdicts in docs/audit/components/) and the executed fix packages.
- P0–P3: doctrine (sema participation, CANON §3 intent, component-guide §5 +
API naming, §32 outline), guards (morfo-vocabulary-check S10/S11d,
component-audit A-3.1/A-1.4/S9, eidos-lint classHooks), morfo contracts
(role=application removed ×4, aria-selected off the Day, drp translationRef,
field data-state prune, pin-input commit-set, media-player renames), 13 new
sema packs + 12 morfos family-default → pack.
- P4 (N1–N10) COMPLETE: selectionMode (select/combobox/toggle-group/calendar);
onValueCommit terminal-callback norm (pin-input/search/password/textarea +
date/time/color-field add); typed validation reason + onInvalid (tags-input,
css-field); index/onIndexChange (carousel); deselectable; openDelay/
groupSkipDelay; allowCustomValue; defaultValue prune.
- P5 (in progress): S1 class-hooks codemod (22 hooks → data-attrs across
cropper/button/image-picker/toggle/image-adjustments); S5 outline remnant in
field.css; depth pass (data-depth=overlay on tooltip/toast/float-panel);
touch-rows (--touch-target token, decoupled ::before hit-slop, area-not-visual,
44 AAA). S6 (Field composition) + S8 (calendar-surface) pending.
Verification: errors-outside-(alpha|words|palabras|chronos) == 59 (baseline);
morfo-vocabulary-check exit 0; eidos-lint class-hooks/invalid 0 on touched
components; per-component vitest suites green.
Handoff + remaining plan: docs/process/continue-audit-fixes-2026-07.md
Excluded (broken by the N1 rename, left broken per user decision, not staged):
words/**, palabras/**, chronos, web/routes/alpha/**.
Reconciliation pending: the touch-rows ::before for checkbox/switch reverses
changelog §37's earlier pseudo-element rejection (WCAG-overlap) that had routed
markers to a labeled-row/Field task — flagged for the user in the handoff.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
|
|
|
padding-block: var(--stepper-trigger-padding-block);
|
|
|
|
|
padding-inline: var(--stepper-trigger-padding-inline);
|
|
|
|
|
border: var(--stepper-trigger-border-width) solid transparent;
|
|
|
|
|
border-radius: var(--stepper-trigger-radius);
|
|
|
|
|
background: transparent;
|
|
|
|
|
color: var(--stepper-trigger-color);
|
|
|
|
|
font: inherit;
|
|
|
|
|
text-align: start;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
outline: none;
|
|
|
|
|
transition:
|
|
|
|
|
background var(--stepper-transition-duration) var(--stepper-transition-ease),
|
|
|
|
|
border-color var(--stepper-transition-duration) var(--stepper-transition-ease),
|
|
|
|
|
color var(--stepper-transition-duration) var(--stepper-transition-ease),
|
|
|
|
|
box-shadow var(--stepper-transition-duration) var(--stepper-transition-ease);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-trigger]:hover:not([data-disabled]) {
|
feat(uix): --state-* rollout — 19 neutral-hover components use the state layer
Propagates the state-layer unification (after the accordion pilot a13ca387): each
neutral :hover swaps its bespoke --{x}-bg-hover for the canonical MD3 state layer via
`background-image: linear-gradient(var(--state-hover), var(--state-hover))` — a
translucent currentColor overlay that works UNIFORMLY on transparent (tint shows) AND
filled (base bg survives under the overlay) bases. Keeps each component's `color:` text
shift; leaves the VALENCED palette hovers (pagination-selected, tag-group per-color,
toast, toggle, menu-item highlight) untouched.
Components: accordion, breadcrumb, calendar, collapsible, editable, field-control-trigger,
field-segment, file-upload, month-grid, pagination(control), radio-cards, range-calendar,
select(filled base), spin-field, stepper, tag-group(item+remove), tags-input, toolbar,
year-grid.
Verified: the gradient resolves to currentColor at 8% (`srgb .../0.08`) + the base bg
survives under it (computed probe); NO new test failures (the 6 failing eidos test files
are identical with and without the migration, and --state-hover/press/selected appear in
NONE of the failures — those are pre-existing card-group / palabras / dialog / icon).
Deferred: tabs + color-picker carry another session's uncommitted work (migrate once they
commit). Orphan --{x}-bg-hover recipe-token cleanup + guard test + the transversal
trigger/item fold follow.
3 months ago
|
|
|
background-image: linear-gradient(var(--state-hover), var(--state-hover));
|
|
|
|
|
color: var(--stepper-trigger-color-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-trigger]:focus-visible {
|
|
|
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
|
|
|
outline-offset: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-indicator] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
inline-size: var(--_stepper-indicator-size);
|
|
|
|
|
block-size: var(--_stepper-indicator-size);
|
|
|
|
|
border: var(--stepper-indicator-border-width) solid var(--stepper-indicator-border);
|
|
|
|
|
border-radius: var(--stepper-indicator-radius);
|
|
|
|
|
background: var(--stepper-indicator-bg);
|
|
|
|
|
color: var(--stepper-indicator-color);
|
|
|
|
|
font-weight: var(--stepper-indicator-font-weight);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-trigger][data-state='current'] [data-stepper-indicator],
|
|
|
|
|
[data-stepper-indicator][data-state='current'] {
|
feat(theming+soma): media-player Batch-4 (SOM-4) + THM-2 shared-palette rollout to 14 surfaces
media-player Batch-4 (closes SOM-4): the 10 sub-parts migrate to
renderProps() (35 attr-dup hits -> 0). Register the sources the morfo
reads (label propRef, on stateRef, direction/type) so renderProps emits
type/role/aria-*/data-state; keep only contract-only soma-owned attrs.
Pin the soma-attr-audit ceiling to 0.
THM-2 rollout - collapse each per-component palette cascade into the
shared per-instance layer (size win, behavior-preserving for roles,
adds the 33 scales):
- Rename palette tokens to canonical _palette-{slot} + route via the
presence-guarded forward: tags-input, stepper, badge, card, select
(parts-aware trigger+content), file-upload, editable, tag-group.
- Extend the shared vocabulary with alpha surface(a2)/surface-hover(a3)
slots (soft variant of variant-aware recipes) and hover(4) - the
latter also fixes Toggle's latent scale-hover.
- tag-group: variant-aware migration (solid/outline -> canonical,
soft -> alpha surface; merge outline-fg into text, prune orphans).
- toggle-group: replace the 4-role cross-recipe composition with a
hand-authored presence-scoped route to the shared layer (the
composition DSL can't presence-scope); covers roles + 33 scales.
- Widen color to ComponentColor (roles + 33 scales) where arbitrary
color is meaningful: badge, tag-group, tags-input, toggle-group, and
add the scale picker to their demos. Semantic controls stay restricted.
Verified end-to-end with the REAL components (drive the demo color
control -> the component emits data-color -> the shared layer resolves
the exact scale). Gates: recipe-css-contract/config/contracts/
soma-attr-audit/media-player suites green; 0 orphan tokens.
avatar remains for a focused pass: its variant-resolved matrix and badge
sub-part don't fit a mechanical migration.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 months ago
|
|
|
border-color: var(--_stepper-palette-border);
|
|
|
|
|
background: var(--_stepper-palette-track);
|
|
|
|
|
color: var(--_stepper-palette-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-trigger][data-state='complete'] [data-stepper-indicator],
|
|
|
|
|
[data-stepper-indicator][data-state='complete'] {
|
feat(theming+soma): media-player Batch-4 (SOM-4) + THM-2 shared-palette rollout to 14 surfaces
media-player Batch-4 (closes SOM-4): the 10 sub-parts migrate to
renderProps() (35 attr-dup hits -> 0). Register the sources the morfo
reads (label propRef, on stateRef, direction/type) so renderProps emits
type/role/aria-*/data-state; keep only contract-only soma-owned attrs.
Pin the soma-attr-audit ceiling to 0.
THM-2 rollout - collapse each per-component palette cascade into the
shared per-instance layer (size win, behavior-preserving for roles,
adds the 33 scales):
- Rename palette tokens to canonical _palette-{slot} + route via the
presence-guarded forward: tags-input, stepper, badge, card, select
(parts-aware trigger+content), file-upload, editable, tag-group.
- Extend the shared vocabulary with alpha surface(a2)/surface-hover(a3)
slots (soft variant of variant-aware recipes) and hover(4) - the
latter also fixes Toggle's latent scale-hover.
- tag-group: variant-aware migration (solid/outline -> canonical,
soft -> alpha surface; merge outline-fg into text, prune orphans).
- toggle-group: replace the 4-role cross-recipe composition with a
hand-authored presence-scoped route to the shared layer (the
composition DSL can't presence-scope); covers roles + 33 scales.
- Widen color to ComponentColor (roles + 33 scales) where arbitrary
color is meaningful: badge, tag-group, tags-input, toggle-group, and
add the scale picker to their demos. Semantic controls stay restricted.
Verified end-to-end with the REAL components (drive the demo color
control -> the component emits data-color -> the shared layer resolves
the exact scale). Gates: recipe-css-contract/config/contracts/
soma-attr-audit/media-player suites green; 0 orphan tokens.
avatar remains for a focused pass: its variant-resolved matrix and badge
sub-part don't fit a mechanical migration.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 months ago
|
|
|
border-color: var(--_stepper-palette-solid);
|
|
|
|
|
background: var(--_stepper-palette-solid);
|
|
|
|
|
color: var(--stepper-complete-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper][data-variant='outline'] [data-stepper-indicator][data-state='current'],
|
|
|
|
|
[data-stepper][data-variant='outline']
|
|
|
|
|
[data-stepper-trigger][data-state='current']
|
|
|
|
|
[data-stepper-indicator] {
|
|
|
|
|
background: transparent;
|
feat(theming+soma): media-player Batch-4 (SOM-4) + THM-2 shared-palette rollout to 14 surfaces
media-player Batch-4 (closes SOM-4): the 10 sub-parts migrate to
renderProps() (35 attr-dup hits -> 0). Register the sources the morfo
reads (label propRef, on stateRef, direction/type) so renderProps emits
type/role/aria-*/data-state; keep only contract-only soma-owned attrs.
Pin the soma-attr-audit ceiling to 0.
THM-2 rollout - collapse each per-component palette cascade into the
shared per-instance layer (size win, behavior-preserving for roles,
adds the 33 scales):
- Rename palette tokens to canonical _palette-{slot} + route via the
presence-guarded forward: tags-input, stepper, badge, card, select
(parts-aware trigger+content), file-upload, editable, tag-group.
- Extend the shared vocabulary with alpha surface(a2)/surface-hover(a3)
slots (soft variant of variant-aware recipes) and hover(4) - the
latter also fixes Toggle's latent scale-hover.
- tag-group: variant-aware migration (solid/outline -> canonical,
soft -> alpha surface; merge outline-fg into text, prune orphans).
- toggle-group: replace the 4-role cross-recipe composition with a
hand-authored presence-scoped route to the shared layer (the
composition DSL can't presence-scope); covers roles + 33 scales.
- Widen color to ComponentColor (roles + 33 scales) where arbitrary
color is meaningful: badge, tag-group, tags-input, toggle-group, and
add the scale picker to their demos. Semantic controls stay restricted.
Verified end-to-end with the REAL components (drive the demo color
control -> the component emits data-color -> the shared layer resolves
the exact scale). Gates: recipe-css-contract/config/contracts/
soma-attr-audit/media-player suites green; 0 orphan tokens.
avatar remains for a focused pass: its variant-resolved matrix and badge
sub-part don't fit a mechanical migration.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 months ago
|
|
|
color: var(--_stepper-palette-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper][data-variant='solid'] [data-stepper-indicator][data-state='current'],
|
|
|
|
|
[data-stepper][data-variant='solid']
|
|
|
|
|
[data-stepper-trigger][data-state='current']
|
|
|
|
|
[data-stepper-indicator] {
|
feat(theming+soma): media-player Batch-4 (SOM-4) + THM-2 shared-palette rollout to 14 surfaces
media-player Batch-4 (closes SOM-4): the 10 sub-parts migrate to
renderProps() (35 attr-dup hits -> 0). Register the sources the morfo
reads (label propRef, on stateRef, direction/type) so renderProps emits
type/role/aria-*/data-state; keep only contract-only soma-owned attrs.
Pin the soma-attr-audit ceiling to 0.
THM-2 rollout - collapse each per-component palette cascade into the
shared per-instance layer (size win, behavior-preserving for roles,
adds the 33 scales):
- Rename palette tokens to canonical _palette-{slot} + route via the
presence-guarded forward: tags-input, stepper, badge, card, select
(parts-aware trigger+content), file-upload, editable, tag-group.
- Extend the shared vocabulary with alpha surface(a2)/surface-hover(a3)
slots (soft variant of variant-aware recipes) and hover(4) - the
latter also fixes Toggle's latent scale-hover.
- tag-group: variant-aware migration (solid/outline -> canonical,
soft -> alpha surface; merge outline-fg into text, prune orphans).
- toggle-group: replace the 4-role cross-recipe composition with a
hand-authored presence-scoped route to the shared layer (the
composition DSL can't presence-scope); covers roles + 33 scales.
- Widen color to ComponentColor (roles + 33 scales) where arbitrary
color is meaningful: badge, tag-group, tags-input, toggle-group, and
add the scale picker to their demos. Semantic controls stay restricted.
Verified end-to-end with the REAL components (drive the demo color
control -> the component emits data-color -> the shared layer resolves
the exact scale). Gates: recipe-css-contract/config/contracts/
soma-attr-audit/media-player suites green; 0 orphan tokens.
avatar remains for a focused pass: its variant-resolved matrix and badge
sub-part don't fit a mechanical migration.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 months ago
|
|
|
border-color: var(--_stepper-palette-solid);
|
|
|
|
|
background: var(--_stepper-palette-solid);
|
|
|
|
|
color: var(--stepper-complete-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-separator] {
|
|
|
|
|
align-self: center;
|
|
|
|
|
min-inline-size: var(--stepper-separator-min-size);
|
|
|
|
|
block-size: var(--stepper-separator-thickness);
|
|
|
|
|
border-radius: var(--stepper-separator-radius);
|
|
|
|
|
background: var(--stepper-separator-bg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-separator][data-orientation='vertical'] {
|
|
|
|
|
justify-self: center;
|
|
|
|
|
inline-size: var(--stepper-separator-thickness);
|
|
|
|
|
block-size: 100%;
|
|
|
|
|
min-block-size: var(--stepper-separator-min-size);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-separator][data-state='complete'] {
|
feat(theming+soma): media-player Batch-4 (SOM-4) + THM-2 shared-palette rollout to 14 surfaces
media-player Batch-4 (closes SOM-4): the 10 sub-parts migrate to
renderProps() (35 attr-dup hits -> 0). Register the sources the morfo
reads (label propRef, on stateRef, direction/type) so renderProps emits
type/role/aria-*/data-state; keep only contract-only soma-owned attrs.
Pin the soma-attr-audit ceiling to 0.
THM-2 rollout - collapse each per-component palette cascade into the
shared per-instance layer (size win, behavior-preserving for roles,
adds the 33 scales):
- Rename palette tokens to canonical _palette-{slot} + route via the
presence-guarded forward: tags-input, stepper, badge, card, select
(parts-aware trigger+content), file-upload, editable, tag-group.
- Extend the shared vocabulary with alpha surface(a2)/surface-hover(a3)
slots (soft variant of variant-aware recipes) and hover(4) - the
latter also fixes Toggle's latent scale-hover.
- tag-group: variant-aware migration (solid/outline -> canonical,
soft -> alpha surface; merge outline-fg into text, prune orphans).
- toggle-group: replace the 4-role cross-recipe composition with a
hand-authored presence-scoped route to the shared layer (the
composition DSL can't presence-scope); covers roles + 33 scales.
- Widen color to ComponentColor (roles + 33 scales) where arbitrary
color is meaningful: badge, tag-group, tags-input, toggle-group, and
add the scale picker to their demos. Semantic controls stay restricted.
Verified end-to-end with the REAL components (drive the demo color
control -> the component emits data-color -> the shared layer resolves
the exact scale). Gates: recipe-css-contract/config/contracts/
soma-attr-audit/media-player suites green; 0 orphan tokens.
avatar remains for a focused pass: its variant-resolved matrix and badge
sub-part don't fit a mechanical migration.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 months ago
|
|
|
background: var(--_stepper-palette-solid);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-content],
|
|
|
|
|
[data-stepper-completed-content] {
|
|
|
|
|
padding: var(--stepper-content-padding);
|
|
|
|
|
border: var(--stepper-content-border-width) solid var(--stepper-content-border);
|
|
|
|
|
border-radius: var(--stepper-content-radius);
|
|
|
|
|
background: var(--stepper-content-bg);
|
|
|
|
|
color: var(--stepper-color);
|
|
|
|
|
box-shadow: var(--stepper-content-shadow);
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-content]:focus-visible,
|
|
|
|
|
[data-stepper-completed-content]:focus-visible {
|
|
|
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
|
|
|
outline-offset: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-prev-trigger],
|
|
|
|
|
[data-stepper-next-trigger] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
block-size: var(--stepper-nav-height);
|
feat(audit): component re-audit + fixes P0–P5 (P4 complete, P5 in progress)
Re-audit of the whole component catalog at pilot depth (91 fichas + the
checkpoint verdicts in docs/audit/components/) and the executed fix packages.
- P0–P3: doctrine (sema participation, CANON §3 intent, component-guide §5 +
API naming, §32 outline), guards (morfo-vocabulary-check S10/S11d,
component-audit A-3.1/A-1.4/S9, eidos-lint classHooks), morfo contracts
(role=application removed ×4, aria-selected off the Day, drp translationRef,
field data-state prune, pin-input commit-set, media-player renames), 13 new
sema packs + 12 morfos family-default → pack.
- P4 (N1–N10) COMPLETE: selectionMode (select/combobox/toggle-group/calendar);
onValueCommit terminal-callback norm (pin-input/search/password/textarea +
date/time/color-field add); typed validation reason + onInvalid (tags-input,
css-field); index/onIndexChange (carousel); deselectable; openDelay/
groupSkipDelay; allowCustomValue; defaultValue prune.
- P5 (in progress): S1 class-hooks codemod (22 hooks → data-attrs across
cropper/button/image-picker/toggle/image-adjustments); S5 outline remnant in
field.css; depth pass (data-depth=overlay on tooltip/toast/float-panel);
touch-rows (--touch-target token, decoupled ::before hit-slop, area-not-visual,
44 AAA). S6 (Field composition) + S8 (calendar-surface) pending.
Verification: errors-outside-(alpha|words|palabras|chronos) == 59 (baseline);
morfo-vocabulary-check exit 0; eidos-lint class-hooks/invalid 0 on touched
components; per-component vitest suites green.
Handoff + remaining plan: docs/process/continue-audit-fixes-2026-07.md
Excluded (broken by the N1 rename, left broken per user decision, not staged):
words/**, palabras/**, chronos, web/routes/alpha/**.
Reconciliation pending: the touch-rows ::before for checkbox/switch reverses
changelog §37's earlier pseudo-element rejection (WCAG-overlap) that had routed
markers to a labeled-row/Field task — flagged for the user in the handoff.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
|
|
|
padding-inline: var(--stepper-nav-padding-inline);
|
|
|
|
|
border: var(--stepper-nav-border-width) solid var(--stepper-nav-border);
|
|
|
|
|
border-radius: var(--stepper-nav-radius);
|
|
|
|
|
background: var(--stepper-nav-bg);
|
|
|
|
|
color: var(--stepper-nav-color);
|
|
|
|
|
font: inherit;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
outline: none;
|
|
|
|
|
transition:
|
|
|
|
|
background var(--stepper-transition-duration) var(--stepper-transition-ease),
|
|
|
|
|
border-color var(--stepper-transition-duration) var(--stepper-transition-ease),
|
|
|
|
|
color var(--stepper-transition-duration) var(--stepper-transition-ease),
|
|
|
|
|
box-shadow var(--stepper-transition-duration) var(--stepper-transition-ease);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-next-trigger] {
|
feat(theming+soma): media-player Batch-4 (SOM-4) + THM-2 shared-palette rollout to 14 surfaces
media-player Batch-4 (closes SOM-4): the 10 sub-parts migrate to
renderProps() (35 attr-dup hits -> 0). Register the sources the morfo
reads (label propRef, on stateRef, direction/type) so renderProps emits
type/role/aria-*/data-state; keep only contract-only soma-owned attrs.
Pin the soma-attr-audit ceiling to 0.
THM-2 rollout - collapse each per-component palette cascade into the
shared per-instance layer (size win, behavior-preserving for roles,
adds the 33 scales):
- Rename palette tokens to canonical _palette-{slot} + route via the
presence-guarded forward: tags-input, stepper, badge, card, select
(parts-aware trigger+content), file-upload, editable, tag-group.
- Extend the shared vocabulary with alpha surface(a2)/surface-hover(a3)
slots (soft variant of variant-aware recipes) and hover(4) - the
latter also fixes Toggle's latent scale-hover.
- tag-group: variant-aware migration (solid/outline -> canonical,
soft -> alpha surface; merge outline-fg into text, prune orphans).
- toggle-group: replace the 4-role cross-recipe composition with a
hand-authored presence-scoped route to the shared layer (the
composition DSL can't presence-scope); covers roles + 33 scales.
- Widen color to ComponentColor (roles + 33 scales) where arbitrary
color is meaningful: badge, tag-group, tags-input, toggle-group, and
add the scale picker to their demos. Semantic controls stay restricted.
Verified end-to-end with the REAL components (drive the demo color
control -> the component emits data-color -> the shared layer resolves
the exact scale). Gates: recipe-css-contract/config/contracts/
soma-attr-audit/media-player suites green; 0 orphan tokens.
avatar remains for a focused pass: its variant-resolved matrix and badge
sub-part don't fit a mechanical migration.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 months ago
|
|
|
border-color: var(--_stepper-palette-border);
|
|
|
|
|
background: var(--_stepper-palette-solid);
|
|
|
|
|
color: var(--stepper-complete-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-prev-trigger]:hover:not(:disabled),
|
|
|
|
|
[data-stepper-next-trigger]:hover:not(:disabled) {
|
|
|
|
|
filter: brightness(var(--stepper-nav-hover-brightness));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-prev-trigger]:focus-visible,
|
|
|
|
|
[data-stepper-next-trigger]:focus-visible {
|
|
|
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
|
|
|
outline-offset: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper-trigger][data-disabled],
|
|
|
|
|
[data-stepper-prev-trigger][data-disabled],
|
|
|
|
|
[data-stepper-next-trigger][data-disabled] {
|
|
|
|
|
cursor: default;
|
|
|
|
|
opacity: var(--stepper-disabled-opacity);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
[data-stepper-trigger],
|
|
|
|
|
[data-stepper-prev-trigger],
|
|
|
|
|
[data-stepper-next-trigger] {
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
