|
|
|
|
[data-editable] {
|
|
|
|
|
--_editable-gap: var(--editable-gap-md);
|
|
|
|
|
--_editable-control-height: var(--editable-control-height-md);
|
|
|
|
|
--_editable-control-px: var(--editable-control-px-md);
|
|
|
|
|
--_editable-font-size: var(--editable-font-size-md);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
/* `--_editable-accent-*` is TSC-emitted from `lib/recipes/base.ts > editable._accent-*`. */
|
|
|
|
|
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--_editable-gap);
|
|
|
|
|
max-inline-size: 100%;
|
|
|
|
|
min-inline-size: 0;
|
|
|
|
|
font-family: var(--editable-font-family);
|
|
|
|
|
font-size: var(--_editable-font-size);
|
|
|
|
|
line-height: var(--editable-line-height);
|
|
|
|
|
color: var(--editable-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-editing] {
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
[data-editable][data-size='xs'] {
|
|
|
|
|
--_editable-gap: var(--editable-gap-xs);
|
|
|
|
|
--_editable-control-height: var(--editable-control-height-xs);
|
|
|
|
|
--_editable-control-px: var(--editable-control-px-xs);
|
|
|
|
|
--_editable-font-size: var(--editable-font-size-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-size='sm'] {
|
|
|
|
|
--_editable-gap: var(--editable-gap-sm);
|
|
|
|
|
--_editable-control-height: var(--editable-control-height-sm);
|
|
|
|
|
--_editable-control-px: var(--editable-control-px-sm);
|
|
|
|
|
--_editable-font-size: var(--editable-font-size-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-size='lg'] {
|
|
|
|
|
--_editable-gap: var(--editable-gap-lg);
|
|
|
|
|
--_editable-control-height: var(--editable-control-height-lg);
|
|
|
|
|
--_editable-control-px: var(--editable-control-px-lg);
|
|
|
|
|
--_editable-font-size: var(--editable-font-size-lg);
|
|
|
|
|
}
|
|
|
|
|
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
[data-editable][data-size='xl'] {
|
|
|
|
|
--_editable-gap: var(--editable-gap-xl);
|
|
|
|
|
--_editable-control-height: var(--editable-control-height-xl);
|
|
|
|
|
--_editable-control-px: var(--editable-control-px-xl);
|
|
|
|
|
--_editable-font-size: var(--editable-font-size-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-area] {
|
|
|
|
|
display: grid;
|
|
|
|
|
align-items: center;
|
|
|
|
|
min-inline-size: var(--editable-area-min-inline-size);
|
|
|
|
|
max-inline-size: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-control] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--editable-trigger-gap);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-preview],
|
|
|
|
|
[data-editable-input] {
|
|
|
|
|
grid-area: 1 / 1;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
min-inline-size: 0;
|
|
|
|
|
min-block-size: var(--_editable-control-height);
|
|
|
|
|
padding-inline: var(--_editable-control-px);
|
|
|
|
|
border: var(--editable-control-border-width) solid transparent;
|
|
|
|
|
border-radius: var(--editable-control-radius);
|
|
|
|
|
background: transparent;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
color: inherit;
|
|
|
|
|
font: inherit;
|
|
|
|
|
outline: none;
|
|
|
|
|
transition:
|
|
|
|
|
background var(--editable-transition-duration) var(--editable-transition-ease),
|
|
|
|
|
border-color var(--editable-transition-duration) var(--editable-transition-ease),
|
|
|
|
|
box-shadow var(--editable-transition-duration) var(--editable-transition-ease);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-preview] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
inline-size: fit-content;
|
|
|
|
|
max-inline-size: 100%;
|
|
|
|
|
cursor: text;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-input] {
|
|
|
|
|
inline-size: 100%;
|
|
|
|
|
border-color: var(--_editable-accent-border);
|
|
|
|
|
background: var(--editable-control-bg);
|
|
|
|
|
box-shadow: var(--editable-control-shadow);
|
|
|
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
|
|
|
outline-offset: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-variant='outline'] [data-editable-input] {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-variant='ghost'] [data-editable-preview] {
|
|
|
|
|
padding-inline: 0;
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-variant='ghost'] [data-editable-input] {
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
background: transparent;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-preview]:hover:not([data-disabled]):not([data-readonly]) {
|
|
|
|
|
border-color: var(--editable-control-border-hover);
|
|
|
|
|
background: var(--editable-control-bg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-variant='ghost']
|
|
|
|
|
[data-editable-preview]:hover:not([data-disabled]):not([data-readonly]) {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-input]:hover:not([data-disabled]):not([data-readonly]) {
|
|
|
|
|
border-color: var(--_editable-accent-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-preview]:focus-visible,
|
|
|
|
|
[data-editable-input]:focus-visible {
|
|
|
|
|
border-color: var(--_editable-accent-border);
|
|
|
|
|
/* Focus ring as a flush outline (no offset → no gap) — survives forced-colors. */
|
|
|
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
|
|
|
outline-offset: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Invalid state: mirror field.css risk-border treatment on Input + Control. */
|
|
|
|
|
[data-editable][data-invalid] [data-editable-input],
|
|
|
|
|
[data-editable-input][data-invalid] {
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
border-color: var(--editable-risk-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-invalid] [data-editable-control],
|
|
|
|
|
[data-editable-control][data-invalid] {
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
border-color: var(--editable-risk-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-invalid] [data-editable-preview]:focus-visible,
|
|
|
|
|
[data-editable][data-invalid] [data-editable-input]:focus-visible {
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
border-color: var(--editable-risk-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-preview][data-placeholder-shown],
|
|
|
|
|
[data-editable-input]::placeholder {
|
|
|
|
|
color: var(--editable-placeholder-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-edit-trigger],
|
|
|
|
|
[data-editable-submit-trigger],
|
|
|
|
|
[data-editable-cancel-trigger] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: var(--editable-trigger-gap);
|
|
|
|
|
block-size: var(--_editable-control-height);
|
|
|
|
|
padding-inline: var(--editable-trigger-px);
|
|
|
|
|
border: var(--editable-trigger-border-width) solid var(--editable-trigger-border);
|
|
|
|
|
border-radius: var(--editable-trigger-radius);
|
|
|
|
|
background: var(--editable-trigger-bg);
|
|
|
|
|
color: var(--editable-trigger-color);
|
|
|
|
|
font: inherit;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
outline: none;
|
|
|
|
|
transition:
|
|
|
|
|
background var(--editable-transition-duration) var(--editable-transition-ease),
|
|
|
|
|
border-color var(--editable-transition-duration) var(--editable-transition-ease),
|
|
|
|
|
color var(--editable-transition-duration) var(--editable-transition-ease),
|
|
|
|
|
box-shadow var(--editable-transition-duration) var(--editable-transition-ease);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-submit-trigger] {
|
|
|
|
|
border-color: var(--_editable-accent-border);
|
|
|
|
|
background: var(--_editable-accent-solid);
|
|
|
|
|
color: var(--editable-submit-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-edit-trigger]:hover:not(:disabled),
|
|
|
|
|
[data-editable-cancel-trigger]:hover:not(:disabled) {
|
|
|
|
|
border-color: var(--editable-trigger-border-hover);
|
|
|
|
|
background: var(--editable-trigger-bg-hover);
|
|
|
|
|
color: var(--editable-trigger-color-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-submit-trigger]:hover:not(:disabled) {
|
|
|
|
|
background: var(--_editable-accent-solid-hover);
|
|
|
|
|
border-color: var(--_editable-accent-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-edit-trigger]:focus-visible,
|
|
|
|
|
[data-editable-submit-trigger]:focus-visible,
|
|
|
|
|
[data-editable-cancel-trigger]:focus-visible {
|
|
|
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
|
|
|
outline-offset: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-preview][hidden],
|
|
|
|
|
[data-editable-input][hidden],
|
|
|
|
|
[data-editable-edit-trigger][hidden],
|
|
|
|
|
[data-editable-submit-trigger][hidden],
|
|
|
|
|
[data-editable-cancel-trigger][hidden] {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-editing] [data-editable-edit-trigger],
|
|
|
|
|
[data-editable]:not([data-editing]) [data-editable-submit-trigger],
|
|
|
|
|
[data-editable]:not([data-editing]) [data-editable-cancel-trigger] {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-disabled],
|
|
|
|
|
[data-editable-preview][data-disabled],
|
|
|
|
|
[data-editable-input][data-disabled],
|
|
|
|
|
[data-editable-control][data-disabled],
|
|
|
|
|
[data-editable-edit-trigger][data-disabled],
|
|
|
|
|
[data-editable-submit-trigger][data-disabled],
|
|
|
|
|
[data-editable-cancel-trigger][data-disabled] {
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
opacity: var(--editable-disabled-opacity);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-disabled] [data-editable-preview],
|
|
|
|
|
[data-editable][data-disabled] [data-editable-input],
|
|
|
|
|
[data-editable][data-disabled] [data-editable-edit-trigger],
|
|
|
|
|
[data-editable][data-disabled] [data-editable-submit-trigger],
|
|
|
|
|
[data-editable][data-disabled] [data-editable-cancel-trigger],
|
|
|
|
|
[data-editable-preview][data-disabled],
|
|
|
|
|
[data-editable-input][data-disabled],
|
|
|
|
|
[data-editable-edit-trigger][data-disabled],
|
|
|
|
|
[data-editable-submit-trigger][data-disabled],
|
|
|
|
|
[data-editable-cancel-trigger][data-disabled] {
|
|
|
|
|
color: var(--color-content-disabled, var(--color-content-muted));
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
[data-editable-preview],
|
|
|
|
|
[data-editable-input],
|
|
|
|
|
[data-editable-edit-trigger],
|
|
|
|
|
[data-editable-submit-trigger],
|
|
|
|
|
[data-editable-cancel-trigger] {
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
