blade('One
Two
'));
expect($root)->toMatchArray(['<' => 'div', 'data-md-stack' => 'data-md-stack'])
->not->toHaveKeys(['data-md-gap', 'data-md-align', 'data-md-hide-below', 'data-md-hide-from']);
});
it('aligns its children across it', function () {
foreach (['stretch', 'start', 'center', 'end'] as $align) {
expect(layoutRoot((string) $this->blade('', ['align' => $align]))['data-md-align'])->toBe($align);
}
expect(layoutRoot((string) $this->blade('')))->not->toHaveKey('data-md-align');
});
it('draws the stack from a stylesheet in the layout layer', function () {
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/stack.css');
expect($css)->toContain("[data-md-stack] {\n display: flex;\n flex-direction: column;\n gap: var(--md-gap);")
// A stack inside another never takes its parent's gap.
->toContain(":where([data-md-stack]) {\n --md-gap: 0px;");
});
it('keeps a button at its label\'s width while the stack stretches the rest', function () {
// M3: keep a button's width "dynamic to fit label"; don't "stretch buttons into long flat shapes".
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/stack.css');
expect($css)->toContain("[data-md-stack]:is(:not([data-md-align]), [data-md-align='stretch']) > [data-md-button] {\n align-self: start;\n }");
});