Selkie.git | xt/snapshots/ | 54-hbox-cross-end.raku

---

use lib 'lib';
use Selkie::Test::Snapshot;
use Selkie::Align;
use Selkie::Layout::HBox;
use Selkie::Widget::Border;
use Selkie::Sizing;

# HBox cross-axis alignment — VBox's story with the axes swapped. The
# cross axis here is rows, so `align-items => CrossEnd` pushes children
# to the *bottom* of the 8-row box:
#
#   * 'tall'  — no cross-sizing, so it fills all 8 rows: the historical
#               layout, unmoved.
#   * 'foot'  — cross-sizing fixed(3), so its 3 rows sit at rows 5-7.
#   * 'head'  — cross-sizing fixed(3) with align-self CrossStart, back
#               at the top regardless of the container's rule.
#
# `gap => 2` runs along the column axis at the same time and changes
# none of the row arithmetic.

my $box = Selkie::Layout::HBox.new(
    sizing      => Sizing.flex,
    gap         => 2,
    align-items => CrossEnd,
);

$box.add: Selkie::Widget::Border.new(title => 'tall', sizing => Sizing.fixed(10));
$box.add: Selkie::Widget::Border.new(
    title        => 'foot',
    sizing       => Sizing.flex,
    cross-sizing => Sizing.fixed(3),
);
$box.add: Selkie::Widget::Border.new(
    title        => 'head',
    sizing       => Sizing.fixed(10),
    cross-sizing => Sizing.fixed(3),
    align-self   => CrossStart,
);

print render-to-string($box, rows => 8, cols => 38);