ngwr 15.6.0 → 15.7.0

package/animations/glitch/styles/_index.scss

@@ -0,0 +1,189 @@
+@use '../../../theme/styles' as theme;
+@include theme.loaded('animations/glitch');
+
+// `[wrGlitch]`: while a pointer is over a short text, or focus is in it, the
+// text looks like a broken signal: two tinted copies of it, cut into thin
+// horizontal slices, jump sideways a few pixels while the text leans and
+// shifts a little; the moment the pointer leaves, everything snaps back. At
+// rest the block declares only its hooks and `position: relative`, the anchor
+// for the copies, so the target looks the way its own rules say; the copies
+// and `--live` exist only while it plays. The directive owns the state (under
+// a pointer or not); the sheet owns the paint and the cadence.
+.wr-glitch {
+  // One pass of the loop: six held steps, each a different slice of each
+  // copy. At 1.2 s a step is 200 ms, which reads as a signal breaking up, not
+  // a flicker, and keeps the flash budget below: see the keyframes.
+  --wr-glitch-cycle: 1.2s;
+  // How far a slice and the text jump, in `em`: 2.4px on the 24px result
+  // title, a smear rather than a tear, and the same share of any heading.
+  --wr-glitch-shift: 0.1em;
+  // How far the text leans at its worst frame.
+  --wr-glitch-skew: 2deg;
+  // The two copies' colours: theme inks, each the intent as text on the
+  // surface, at reduced strength over `transparent`. Primary and danger sit
+  // far apart in hue, so the two fringes read as a split signal, and at this
+  // strength a copy over the text darkens or lightens a glyph pixel by well
+  // under the full ink: a faint fringe, never a strobe, and the text under it
+  // keeps its own colour in every frame. Inks, never ramp steps.
+  --wr-glitch-strength: 55%;
+  --wr-glitch-tint-a: color-mix(in srgb, var(--wr-color-primary-ink) var(--wr-glitch-strength), transparent);
+  --wr-glitch-tint-b: color-mix(in srgb, var(--wr-color-danger-ink) var(--wr-glitch-strength), transparent);
+
+  // The anchor for the copies. A transform never moves the box, so a centred
+  // title stays centred while it leans.
+  position: relative;
+
+  // One copy: the same text over the same box, so it inherits the font, the
+  // alignment and the line height and its glyphs land exactly over the real
+  // ones. Out of flow, out of the selection, under no pointer. Clipped to
+  // nothing until its animation says otherwise, so a copy that is somehow
+  // present at rest paints nothing.
+  &__copy {
+    position: absolute;
+    inset: 0;
+    color: var(--wr-glitch-tint-a);
+    clip-path: inset(100% 0 0 0);
+    pointer-events: none;
+    user-select: none;
+  }
+
+  &__copy--b {
+    color: var(--wr-glitch-tint-b);
+  }
+
+  @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
+    // `steps(1, end)` holds each keyframe's value until the next keyframe, so
+    // a slice jumps from one place to the next instead of sliding: six holds
+    // per cycle, each a different slice at a different offset, round and
+    // round while `--live` is on. The directive takes the copies out when the
+    // pointer leaves, so no late frame is left on screen.
+    &--live {
+      animation: wr-glitch-lean var(--wr-glitch-cycle) steps(1, end) infinite;
+    }
+
+    &--live &__copy--a {
+      animation: wr-glitch-slice-a var(--wr-glitch-cycle) steps(1, end) infinite;
+    }
+
+    &--live &__copy--b {
+      animation: wr-glitch-slice-b var(--wr-glitch-cycle) steps(1, end) infinite;
+    }
+  }
+
+  // Belt and braces: the directive adds no copy under either, but a preference
+  // flipped mid-play must not leave a fringe behind.
+  @media (prefers-reduced-motion: reduce), (forced-colors: active) {
+    &__copy {
+      display: none;
+    }
+  }
+}
+
+// The text itself: a lean and a shift of a fraction of the slice jump, so the
+// real glyphs stay where the eye expects them while the fringes jump around.
+// Physical on purpose: a broken signal has no reading direction.
+@keyframes wr-glitch-lean {
+  0% {
+    transform: skewX(calc(var(--wr-glitch-skew) * -1)) translateX(calc(var(--wr-glitch-shift) * 0.3));
+  }
+
+  17% {
+    transform: none;
+  }
+
+  33% {
+    transform: skewX(var(--wr-glitch-skew)) translateX(calc(var(--wr-glitch-shift) * -0.3));
+  }
+
+  50% {
+    transform: translateX(calc(var(--wr-glitch-shift) * 0.5));
+  }
+
+  67% {
+    transform: skewX(calc(var(--wr-glitch-skew) * -0.5));
+  }
+
+  83% {
+    transform: none;
+  }
+}
+
+// The flash budget (WCAG 2.3.1: no more than three flashes in any second,
+// a flash being a pair of opposing luminance changes). The line is cut into
+// twelve bands of 8%, with 2% left at the top and bottom: copy A owns the
+// odd bands and copy B the even ones, and each copy visits each of its six
+// bands once per cycle, in a scrambled order. So no point of the text is
+// lit by a copy more than once per cycle, and with the cycle at a second or
+// more, any one-second window lights a point at most twice: once at the end
+// of a cycle and once at the start of the next. `inset(top 0 bottom 0)`
+// keeps one horizontal band of the copy; the rest is clipped, so what shows
+// is a strip of tinted glyphs beside the real ones. `glitch.spec.ts` reads
+// these keyframes and holds the bands disjoint.
+
+// Copy A: bands 34-42, 2-10, 66-74, 18-26, 82-90, 50-58, pushed toward the start first.
+@keyframes wr-glitch-slice-a {
+  0% {
+    clip-path: inset(34% 0 58% 0);
+    transform: translateX(calc(var(--wr-glitch-shift) * -1));
+  }
+
+  17% {
+    clip-path: inset(2% 0 90% 0);
+    transform: translateX(calc(var(--wr-glitch-shift) * 0.6));
+  }
+
+  33% {
+    clip-path: inset(66% 0 26% 0);
+    transform: translateX(calc(var(--wr-glitch-shift) * -0.8));
+  }
+
+  50% {
+    clip-path: inset(18% 0 74% 0);
+    transform: translateX(calc(var(--wr-glitch-shift) * 1.2));
+  }
+
+  67% {
+    clip-path: inset(82% 0 10% 0);
+    transform: translateX(calc(var(--wr-glitch-shift) * -0.5));
+  }
+
+  83% {
+    clip-path: inset(50% 0 42% 0);
+    transform: translateX(calc(var(--wr-glitch-shift) * 0.9));
+  }
+}
+
+// Copy B: bands 74-82, 26-34, 90-98, 10-18, 58-66, 42-50, pushed the other
+// way, so the two fringes never cover the same band and the text between
+// them stays clean.
+@keyframes wr-glitch-slice-b {
+  0% {
+    clip-path: inset(74% 0 18% 0);
+    transform: translateX(var(--wr-glitch-shift));
+  }
+
+  17% {
+    clip-path: inset(26% 0 66% 0);
+    transform: translateX(calc(var(--wr-glitch-shift) * -0.7));
+  }
+
+  33% {
+    clip-path: inset(90% 0 2% 0);
+    transform: translateX(calc(var(--wr-glitch-shift) * 0.9));
+  }
+
+  50% {
+    clip-path: inset(10% 0 82% 0);
+    transform: translateX(calc(var(--wr-glitch-shift) * -1.1));
+  }
+
+  67% {
+    clip-path: inset(58% 0 34% 0);
+    transform: translateX(calc(var(--wr-glitch-shift) * 0.4));
+  }
+
+  83% {
+    clip-path: inset(42% 0 50% 0);
+    transform: translateX(calc(var(--wr-glitch-shift) * -0.6));
+  }
+}

package/animations/glow-border/styles/_index.scss

@@ -0,0 +1,89 @@
+@use '../../../theme/styles' as theme;
+@include theme.loaded('animations/glow-border');
+
+// `[wrGlowBorder]`: a short arc of brand light running round the host's edge,
+// with a soft glow spilling outward. Two pseudo-elements carry one conic
+// gradient turned by a registered angle: `::before` is the arc itself, masked
+// down to the ring; `::after` is a wider, blurred copy sitting UNDER the host
+// (negative z-index), so only what spills past the edge shows. The host's
+// stacking parent isolates itself (`isolation: isolate`), which keeps that
+// copy above the page background; the host itself must not form a stacking
+// context, or the copy would paint over its own fill.
+
+// Registered so the angle interpolates. Only the angle: a colour hook is never
+// registered.
+@property --wr-glow-border-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+.wr-glow-border {
+  // The arc's centre, and its two edges mixed from it toward danger and
+  // success, so one hook recolours the whole arc and the edges still lean
+  // warm and cool. A role, never a step.
+  --wr-glow-border-color: var(--wr-color-primary);
+  --wr-glow-border-warm: color-mix(in oklch, var(--wr-glow-border-color) 70%, var(--wr-color-danger));
+  --wr-glow-border-cool: color-mix(in oklch, var(--wr-glow-border-color) 70%, var(--wr-color-success));
+  --wr-glow-border-width: 1.5px;
+  --wr-glow-border-blur: 14px;
+  --wr-glow-border-strength: 0.6;
+  --wr-glow-border-period: 4.5s;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  &::before {
+    padding: var(--wr-glow-border-width);
+    background: conic-gradient(
+      from var(--wr-glow-border-angle),
+      transparent 0deg,
+      var(--wr-glow-border-cool) 5deg,
+      var(--wr-glow-border-color) 7.5deg,
+      var(--wr-glow-border-warm) 10deg,
+      transparent 15deg
+    );
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+  }
+
+  &::after {
+    z-index: -1;
+    background: conic-gradient(
+      from var(--wr-glow-border-angle),
+      transparent 0deg,
+      var(--wr-glow-border-cool) 8deg,
+      var(--wr-glow-border-color) 12deg,
+      var(--wr-glow-border-warm) 16deg,
+      transparent 24deg
+    );
+    filter: blur(var(--wr-glow-border-blur));
+    opacity: var(--wr-glow-border-strength);
+  }
+
+  &--live::before,
+  &--live::after {
+    animation: wr-glow-border var(--wr-glow-border-period) linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &--live::before,
+    &--live::after {
+      animation: none;
+    }
+  }
+}
+
+@keyframes wr-glow-border {
+  to {
+    --wr-glow-border-angle: 360deg;
+  }
+}

package/animations/gradient-flow/styles/_index.scss

@@ -0,0 +1,101 @@
+@use '../../../theme/styles' as theme;
+@include theme.loaded('animations/gradient-flow');
+
+// `[wrGradientFlow]`: a short piece of text filled with a gradient of theme
+// inks that drifts along it, forever, as a seamless loop. The static gradient
+// is the block itself, so a server render and a reader with reduced motion get
+// the final colours from CSS alone; the drift is one paused animation on the
+// host that the directive's `--run` sets running while the text is on screen.
+.wr-gradient-flow {
+  // The colour the loop starts and ends on, and the stops in between, in
+  // reading order. Inks, not bare intents: `-ink` is each intent as TEXT on the
+  // surface, calibrated to 5:1 in both schemes (7:1 under `prefers-contrast:
+  // more`), and the inks mix toward the surface's own ink, so a blend of two
+  // of them is at least as readable as the paler one. Sampled every 5% of
+  // each ramp, the default set never falls below 5.2:1 against the surface or
+  // its 7% primary wash in either scheme. Primary is the brand and the
+  // chip beside the name; success is what a check that passes wears, which is
+  // what ngtrue is for; info sits between them in hue, so the blue phase is
+  // longer and the green reads as a wave passing rather than half the word.
+  --wr-gradient-flow-from: var(--wr-color-primary-ink);
+  --wr-gradient-flow-via: var(--wr-color-info-ink), var(--wr-color-success-ink);
+  // One full loop. The image is two text widths, so a wave crosses the word in
+  // half of this: 4 s reads as a drift, not a shimmer, and the word never looks
+  // stuck between two colours.
+  --wr-gradient-flow-cycle: 8s;
+  // The slide is stepped, not continuous: a 100px word moves its gradient by
+  // 0.4px per frame at 60 fps, below a pixel, so most frames repaint for
+  // nothing. 120 steps per cycle is 15 repaints a second, each moving the
+  // image by under 2% of a ramp, which no eye reads as a jump.
+  --wr-gradient-flow-steps: 120;
+  // What the glyphs are filled with while selected: the gradient sits under
+  // the highlight, so the selected text needs a solid fill of its own.
+  --wr-gradient-flow-selected: var(--wr-color-on-surface);
+
+  // The gradient, clipped to the glyphs. The image is twice the host wide and
+  // closes on the colour it opened with, so under `repeat` the tile is
+  // continuous and one tile of travel lands on the same picture: that is the
+  // seam-free loop. The glyph paint goes transparent through
+  // `-webkit-text-fill-color`, not `color`, which a host's own colour rule
+  // would outrank, and which keeps the host's `color` for `currentColor`.
+  background-image: linear-gradient(
+    90deg,
+    var(--wr-gradient-flow-from),
+    var(--wr-gradient-flow-via),
+    var(--wr-gradient-flow-from)
+  );
+  background-size: 200% 100%;
+  // rtl-ok: the keyframes below slide this; `:dir(rtl)` reverses them
+  background-position-x: 0%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  // Chrome and Safari read the fill colour here, Firefox the colour.
+  &::selection {
+    color: var(--wr-gradient-flow-selected);
+    -webkit-text-fill-color: var(--wr-gradient-flow-selected);
+  }
+
+  // The drift: declared on the block, paused, so `--run` only flips the play
+  // state and the phase survives a pause. Not under reduced motion, where the
+  // gradient stays as colour and nothing moves.
+  @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
+    animation-name: wr-gradient-flow-drift;
+    animation-duration: var(--wr-gradient-flow-cycle);
+    animation-timing-function: steps(var(--wr-gradient-flow-steps), end);
+    animation-iteration-count: infinite;
+    animation-play-state: paused;
+
+    // The wave travels the reading direction; the keyframes are physical, so
+    // RTL plays them backwards.
+    &:dir(rtl) {
+      animation-direction: reverse;
+    }
+
+    &--run {
+      animation-play-state: running;
+    }
+  }
+
+  // Plain text in the system colour: the UA drops the gradient image, and the
+  // fill has to come back with it or the glyphs stay transparent.
+  @media (forced-colors: active) {
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+
+// One tile of travel. With an image twice the host wide a percentage position
+// is read against the negative free space, so -200% is a slide of two host
+// widths toward the inline end: exactly one tile, exactly the start picture.
+// rtl-ok: background-position-x is physical by nature; `:dir(rtl)` above reverses the run
+@keyframes wr-gradient-flow-drift {
+  from {
+    background-position-x: 0%;
+  }
+
+  to {
+    background-position-x: -200%;
+  }
+}

package/animations/marquee/styles/_index.scss

@@ -0,0 +1,179 @@
+@use '../../../theme/styles' as theme;
+@use '../../../button/styles' as button-styles; // WrButton
+@include theme.loaded('animations/marquee');
+
+// `<wr-marquee>`: a row of links gliding sideways in an endless loop. The
+// belt holds the list twice and one CSS animation slides it by exactly one
+// copy's width, which the component measures and writes as
+// `--wr-marquee-shift` with the duration beside it, so the frame the cycle
+// ends on is the frame it began on. The animation is declared paused on the
+// belt and `--run` only flips the play state, so a pause keeps the phase.
+// Without the component (the server, reduced motion) the row is one copy,
+// still, scrolling natively, under the same fade.
+.wr-marquee {
+  // The air on each side of the dot between two names.
+  --wr-marquee-gap: 1.25rem;
+  // How far from each end an item is fully in: the width of the fade.
+  --wr-marquee-fade: 3rem;
+  // A name at rest, and under the pointer or focus. Muted prose reads the muted
+  // role; the active state reads primary as text, so `-ink`.
+  --wr-marquee-color: var(--wr-color-on-surface-muted);
+  --wr-marquee-color-active: var(--wr-color-primary-ink);
+  --wr-marquee-dot: var(--wr-border-strong);
+  // Which way the belt travels: toward the inline start, so names enter at
+  // the end of the line and leave at its start, the way the line is read.
+  --wr-marquee-dir: -1;
+  // Written by the component on the belt, not hooks: one copy's measured width
+  // and the time one copy takes. Reset here so a marquee inside an item
+  // template of another never inherits the outer belt's numbers.
+  --wr-marquee-shift: initial;
+  --wr-marquee-duration: initial;
+
+  display: flex;
+  align-items: center;
+  gap: var(--wr-space-sm);
+  padding-block: var(--wr-space-md);
+  color: var(--wr-marquee-color);
+  font-size: var(--wr-text-sm);
+  font-weight: var(--wr-font-weight-medium);
+
+  &:dir(rtl) {
+    --wr-marquee-dir: 1;
+  }
+
+  // The window the belt moves in. Scrollable by default, which is what the
+  // still row needs; the loop hides the overflow instead. The fade is a mask,
+  // symmetric, so it is the same picture in both directions. The block padding
+  // is room for a link's focus ring, which the overflow would otherwise clip.
+  &__viewport {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding-block: 0.375rem;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-padding-inline: var(--wr-marquee-fade);
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      #000 var(--wr-marquee-fade),
+      #000 calc(100% - var(--wr-marquee-fade)),
+      transparent
+    );
+
+    @include theme.scrollbar;
+  }
+
+  &--loop:not(&--static) &__viewport {
+    overflow: hidden;
+  }
+
+  // Both copies, side by side, as wide as they are. The animation is declared
+  // paused here, under the loop, so `--run` only flips its play state.
+  &__belt {
+    display: flex;
+    width: max-content;
+  }
+
+  &--loop &__belt {
+    animation: wr-marquee-run var(--wr-marquee-duration, 60s) linear infinite paused;
+  }
+
+  &--run &__belt {
+    animation-play-state: running;
+  }
+
+  // Focus in the belt: no motion, and the first and last names stand clear
+  // of the fade, so the one with focus is whole. The same under reduced
+  // motion, below, from CSS alone, so the row is right before any script.
+  &--static &__belt {
+    animation: none;
+    padding-inline: var(--wr-marquee-fade);
+  }
+
+  &__track {
+    display: flex;
+    flex: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    white-space: nowrap;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+  }
+
+  // The dot between two names, decorative. Every name but the first of the
+  // row carries one before it, the first of the copy included, so the seam
+  // between the copies is spaced like any other gap.
+  &__item + &__item::before,
+  &__track--copy &__item:first-child::before {
+    content: '';
+    flex: none;
+    width: 3px;
+    height: 3px;
+    margin-inline: var(--wr-marquee-gap);
+    border-radius: 50%;
+    background: var(--wr-marquee-dot);
+  }
+
+  // An item may carry an icon before its name: the link lays the two out on
+  // one line with a small gap, and the icon takes the link's colour.
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--wr-space-xs);
+    padding: 0.125rem 0.25rem;
+    border-radius: var(--wr-border-radius-sm);
+    color: inherit;
+    text-decoration: none;
+    transition: color var(--wr-transition-base);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--wr-marquee-color-active);
+    }
+
+    &:focus-visible {
+      @include theme.focus-ring;
+    }
+  }
+
+  // The pause button. Its glyph is a bare SVG projected into the label, so the
+  // button cannot see an empty label and square itself the way `wr-btn` does for
+  // an `icon`-only button: the same square is made here, from the button's own
+  // hooks, so the toggle sits as any icon-only `wr-btn` of its size would.
+  &__toggle {
+    flex: none;
+    padding-inline: calc(var(--wr-btn-padding-y) * var(--wr-density-y, 1));
+  }
+
+  &__glyph {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--wr-btn-line-height);
+    height: var(--wr-btn-line-height);
+
+    .wr-icon__svg {
+      width: var(--wr-btn-icon-size);
+      height: var(--wr-btn-icon-size);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &__belt {
+      animation: none;
+      padding-inline: var(--wr-marquee-fade);
+    }
+  }
+}
+
+// One copy of travel. The keyframe reads the belt's own `--wr-marquee-shift`
+// and the host's direction, so one set of keyframes serves both directions.
+@keyframes wr-marquee-run {
+  to {
+    translate: calc(var(--wr-marquee-dir) * var(--wr-marquee-shift, 0px));
+  }
+}

package/animations/orbit/styles/_index.scss

@@ -0,0 +1,77 @@
+@use '../../../theme/styles' as theme;
+@include theme.loaded('animations/orbit');
+
+// `<wr-orbit>`: a short label set around a circle, like a seal,
+// turning slowly, with a mark in the middle that does not turn. The ring is
+// static SVG: a `<textPath>` on a circle, stretched to the circumference by
+// `textLength`, so the server and a still page draw the finished, even ring
+// from the markup alone. The component writes one transform on the `<svg>`
+// per frame while `--run` is on the host; nothing here moves on its own.
+.wr-orbit {
+  // The `size` input's channel. Reset on every block, so a ring projected into
+  // another ring's slot never inherits the outer one's size.
+  --wr-orbit-input-size: initial;
+  // The box. A square: the ring fills it and the slot sits in its middle.
+  --wr-orbit-size: 6rem;
+  // The glyphs' fill. `currentColor`, so the ring reads in the colour of the
+  // text around it: muted in a footer, ink in a heading, `-contrast` on a fill.
+  --wr-orbit-color: currentColor;
+  // In user units of the 100-unit drawing, so it scales with the box: 9 of
+  // 100 is 8.6px on a 6rem ring, the size of a seal's legend. The baseline
+  // circle leaves 9 units outside it; a larger font clips at the box edge.
+  --wr-orbit-font-size: 9px;
+  --wr-orbit-weight: var(--wr-font-weight-semibold);
+
+  display: inline-grid;
+  place-items: center;
+  // The `size` input first, written under its own name so an unset input
+  // never wipes a value the author set on the element, then the hook.
+  inline-size: var(--wr-orbit-input-size, var(--wr-orbit-size));
+  block-size: var(--wr-orbit-input-size, var(--wr-orbit-size));
+  // A decorative ring: a drag across the page should not pick up the legend,
+  // and a double-click on the seal should not highlight a word of it.
+  user-select: none;
+  -webkit-user-select: none;
+
+  // The ring and the slot share the one cell, the slot on top.
+  &__ring,
+  &__centre {
+    grid-area: 1 / 1;
+  }
+
+  &__ring {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    // An outer `<svg>` is a CSS box and turns about its centre by default;
+    // said anyway, because the whole effect rests on it.
+    transform-origin: 50% 50%;
+    // A glyph that overhangs the drawing's edge is drawn, not cut.
+    overflow: visible;
+  }
+
+  // Only while the component turns it: a promoted layer costs memory, and a
+  // still ring has no reason to hold one.
+  &--run &__ring {
+    will-change: transform;
+  }
+
+  // The legend. The glyphs' advance is the browser's business: `textLength`
+  // spreads them over the circumference, so no tracking is set here, and a
+  // tracking set from outside would be absorbed into the same total.
+  // `white-space: pre`, with `xml:space` in the markup, keeps the trailing
+  // blank the author ends the text with: it is the gap at the seam.
+  &__text {
+    fill: var(--wr-orbit-color);
+    font-family: var(--wr-font-family-base);
+    font-size: var(--wr-orbit-font-size);
+    font-weight: var(--wr-orbit-weight);
+    text-transform: uppercase;
+    white-space: pre;
+  }
+
+  &__centre {
+    display: grid;
+    place-items: center;
+  }
+}