Andreas Reinhold / reiniandClaude Opus 5
a54f79a085
Plan step 23, containment.md § Missing ("Divider: the divider-with-text /
subheader configuration"). `<x-divider text="…">` draws the label at the
start and the rule running on from it, with the divider specs table's
geometry: 4dp between the words and the rule, 8dp right margin, 8dp
bottom margin. The label is M3's subhead — title-small in
on-surface-variant, the only subhead type M3 publishes (the rich
tooltip's specs), since the divider page names none. The words stay text
naming the group; only the rule is the separator.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
51 lines
2.3 KiB
PHP
51 lines
2.3 KiB
PHP
{{-- An M3 divider: a thin outline-variant line between groups of content (DividerTokens).
|
|
|
|
Horizontal by default; `vertical` stands it between items in a row (give the row a height).
|
|
`inset` indents it from the start by 16px, as under a list's leading icon; `middle` from both
|
|
ends. It is `role="separator"`; with `decorative` it is hidden from assistive tech.
|
|
|
|
`text` is the divider with a subheader, as M3 draws it to head a group in a list or a menu:
|
|
the label at the start and the rule running on from it. The divider specs table gives the
|
|
geometry — "space between divider & supporting text 4dp", "divider right margin 8dp",
|
|
"divider bottom margin 8dp" — so the rule starts 4px after the words, stops 8px short of the
|
|
end and leaves 8px under the row. The label is M3's subhead: title-small in
|
|
on-surface-variant, the type the rich tooltip's specs give a subhead, since the divider's own
|
|
page names none (docs/reference/m3/components-actions-communication-containment.md
|
|
§ Divider → Specs, § Tooltips → Specs). The words stay readable text that names the group
|
|
after them; only the rule is the separator, and `decorative` hides the rule and leaves the
|
|
words. `text` is for a horizontal divider; a vertical one ignores it. --}}
|
|
|
|
@props([
|
|
'vertical' => false,
|
|
'inset' => false,
|
|
'middle' => false,
|
|
'decorative' => false,
|
|
'text' => null,
|
|
])
|
|
|
|
@if (filled($text) && ! $vertical)
|
|
<div {{ $attributes->class([
|
|
'flex shrink-0 items-center gap-1 pb-2',
|
|
'ms-4' => $inset,
|
|
'mx-4' => $middle,
|
|
]) }}>
|
|
<span class="shrink-0 type-title-sm text-on-surface-variant">{{ $text }}</span>
|
|
<div
|
|
@if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="horizontal" @endif
|
|
class="me-2 h-px min-w-0 flex-1 bg-outline-variant"
|
|
></div>
|
|
</div>
|
|
@else
|
|
<div
|
|
@if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="{{ $vertical ? 'vertical' : 'horizontal' }}" @endif
|
|
{{ $attributes->class([
|
|
'shrink-0 bg-outline-variant',
|
|
'h-px w-auto' => ! $vertical,
|
|
'w-px self-stretch' => $vertical,
|
|
'ms-4' => $inset && ! $vertical,
|
|
'mx-4' => $middle && ! $vertical,
|
|
'my-2' => $middle && $vertical,
|
|
]) }}
|
|
></div>
|
|
@endif
|