feature-split era el único block de sección del tier sin parte .Header. Sus
filas emitían h2 por defecto, así que una sección de tres filas aportaba tres
h2 hermanos al outline y la sección misma no tenía nombre (A-110). La página
compuesta lo rodeaba a mano: encabezado escrito como primer hijo y un level={3}
repetido fila a fila.
El h2 de las filas no era un descuido: era una decisión ESCRITA en el README
del block —«.Title emits h2 by default (each row is a section-level statement
of its own)… drop it to 3 when the page already put an h2 above the rows»—. Se
deroga en sitio, y no por gusto sino porque el resto del tier declara lo
contrario: FeatureGrid.ItemTitle, las preguntas de faq y Pricing.PlanName ponen
en level 3 lo que se repite, y el h2 lo lleva el Header.
Nace FeatureSplit.Header, calcado de Testimonials.Header (Box con medida +
Motion + Stack) y sin contexto, porque este block no tiene eje align que
heredar. Y .Title baja su default de 2 a 3. La forma queda coherente en los dos
casos, que es lo que la hace preferible a las alternativas: con .Header el h2 es
suyo y las filas cuelgan; sin .Header la app ya puso el h2 encima y las filas
cuelgan igual. La tercera vía —un contexto donde el Header marcase su presencia
y el Title derivara su nivel— daba el mismo resultado a cambio de un hijo
escribiendo en el contexto del padre, que es el patrón que ya costó un bucle de
$effect en este repo. Por un solo bit, no compensa.
Verificado en navegador, outline leído del DOM:
/blocks/feature-split/preview h2 «Del evento crudo a la decisión»
h3 ×3 (las filas) ← antes: h2 ×3, sin nombre
/blocks/landing h2 + h3 ×2, dentro de un outline de página
que ya no salta de nivel
La demo compone su encabezado y LandingSite deja de hacerlo a mano: fuera el
Stack escrito a pelo y fuera los dos level={3}. Header medido en su sitio (x
144, 768 de ancho: la misma medida que la copia de las filas).
Gates: svelte-check 72/62 antes y después · vitest src/uix/blocks 36/36 ·
blocks:check verde (19 blocks, 147 ficheros) · docs:check 0/0.
Primera fila del ledger arreglada DENTRO del tier, por acotación del eje: las
tres anteriores de la sesión (A-111, A-112, A-109) eran todas de canon.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
alpha-0.1-background
parent
1e3a67ad39
commit
48bad6c726
@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* FeatureSplit.Header — the section title + description, measure-capped. The
|
||||
* app supplies a `Heading` (level 2) and a `Text`; their alignment is the
|
||||
* app's to choose, as in `Testimonials.Header` (this block has no `align`
|
||||
* axis of its own, so there is nothing to inherit).
|
||||
*
|
||||
* It exists because a section names itself through its header (A-110): this
|
||||
* was the only section block of the tier without one, so a three-row section
|
||||
* contributed three sibling `h2`s and no name of its own.
|
||||
*/
|
||||
import { Box } from '$uix/eidos/components/box';
|
||||
import { Stack } from '$uix/eidos/components/stack';
|
||||
import { Motion } from '$uix/eidos/components/motion';
|
||||
import type { FeatureSplitHeaderProps } from './types';
|
||||
|
||||
let { maxWidth = '48rem', children, ...rest }: FeatureSplitHeaderProps = $props();
|
||||
</script>
|
||||
|
||||
<Box {maxWidth} width="100%" {...rest}>
|
||||
<Motion trigger="viewport">
|
||||
<Stack gap={3}>
|
||||
{@render children?.()}
|
||||
</Stack>
|
||||
</Motion>
|
||||
</Box>
|
||||
Loading…
Reference in new issue