@slotted/styles 0.0.0-stage → 0.1.0-beta.1

package/src/carousel/carousel.css

@@ -0,0 +1,860 @@
+@layer slotted.components {
+  /**
+   * A set of slides shown a page at a time, and the controls that move it.
+   *
+   * The root is a one-cell grid, and every control written as its direct child
+   * is placed in that cell over the viewport rather than positioned over it:
+   * the previous and next controls sit on the two ends of the axis, the bar
+   * at the foot. A control written inside `controls` takes the bar's row
+   * instead. Where a control stands is therefore where the consumer wrote it,
+   * and no prop restates it.
+   *
+   *   ┌────────────────────────────────────────┐
+   *   │ ◀            viewport               ▶  │   arrows="inset"
+   *   │              ● ━━ ● ●                   │   controls placement="overlay"
+   *   └────────────────────────────────────────┘
+   *     ⏸   ◀   ● ━━ ● ●   ▶   2 / 4             controls placement="below"
+   */
+  [data-ui='carousel'] {
+    --_control-size: var(--slotted-control-height-md, 34px);
+    --_icon-size: var(--slotted-control-icon-size-md, 16px);
+    --_gap: var(--slotted-carousel-gap, var(--slotted-space-6, 1rem));
+    --_peek: var(--slotted-carousel-peek, 0px);
+    --_per-view: var(--slotted-carousel-slides-per-view, 1);
+    --_radius: var(--slotted-carousel-radius, var(--slotted-radius-lg, 8px));
+    /**
+     * How far an inset control stands from the viewport's edge: one step of
+     * air past the ring, so a focused control's ring never touches the edge it
+     * is drawn against.
+     */
+    --_inset: var(--slotted-space-5, 0.75rem);
+    /**
+     * The scroll the engine animates runs on a critically damped spring whose
+     * stiffness is read from this duration in the viewport's computed style,
+     * so the theme's motion scale — and its collapse to an instant under
+     * reduced motion — reaches a movement no `transition` describes. At this
+     * duration less than one per cent of the way is left; the spring carries
+     * the speed of the hand that let go, which no easing curve can.
+     */
+    --_scroll-duration: var(--slotted-carousel-duration, var(--slotted-duration-long));
+    /**
+     * A dot, and the bar the current dot stretches into. The bar is three dots
+     * long so it reads as a different shape, not a bigger dot: shape, not
+     * colour alone, says which page is shown (WCAG 1.4.1).
+     */
+    --_dot: var(--slotted-space-4, 0.5rem);
+    --_dot-current: var(--slotted-space-8, 1.5rem);
+    --_dot-air: var(--slotted-space-3, 0.375rem);
+    --_line: var(--slotted-border-width-thick, 2px);
+    --_thumbnail: var(--slotted-carousel-thumbnail-size, var(--slotted-space-12, 4rem));
+
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto;
+    min-inline-size: 0;
+    row-gap: var(--slotted-carousel-controls-gap, var(--slotted-space-5, 0.75rem));
+  }
+
+  [data-ui='carousel'][data-size='sm'] {
+    --_control-size: var(--slotted-control-height-sm, 30px);
+    --_icon-size: var(--slotted-control-icon-size-sm, 14px);
+  }
+
+  [data-ui='carousel'][data-size='lg'] {
+    --_control-size: var(--slotted-control-height-lg, 38px);
+    --_icon-size: var(--slotted-control-icon-size-lg, 18px);
+  }
+
+  /**
+   * Outside the viewport the two controls take columns of their own, so a row
+   * of cards keeps its whole width for cards and no arrow covers the first
+   * one's corner — ReUI's `-left-12`, measured at 48 pixels outside the
+   * viewport, without the absolute positioning that puts it outside the
+   * component's box.
+   */
+  [data-ui='carousel'][data-arrows='outside'] {
+    column-gap: var(--slotted-space-4, 0.5rem);
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
+  /* ── The viewport ─────────────────────────────────────────────────────── */
+
+  /**
+   * The scroller, and the one element the family moves. Touch, a trackpad and
+   * the keyboard scroll it natively and snap does the paging, so the family
+   * works before any script and a swipe is the platform's own swipe. The
+   * slides are grid columns sized from the slides-per-view count, so a
+   * container query that writes `--slotted-carousel-slides-per-view` changes
+   * the layout and the engine reads the new pages from it.
+   */
+  [data-ui='carousel'] > [data-part='viewport'] {
+    /**
+     * The share of the row a slide takes, never below the slide's own floor:
+     * three cards per view at 240 pixels are 64-pixel cards, and the floor
+     * turns the same carousel into one card and the edge of the next. The
+     * engine reads the pages from the boxes, so the floor needs no script.
+     */
+    --_track: max(
+      var(--slotted-carousel-slide-min-size, 0px),
+      calc((100% - (var(--_per-view) - 1) * var(--_gap)) / var(--_per-view))
+    );
+
+    border-radius: var(--_radius);
+    display: grid;
+    gap: var(--_gap);
+    grid-area: 1 / 1;
+    grid-auto-columns: var(--_track);
+    grid-auto-flow: column;
+    min-inline-size: 0;
+    outline: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-inline: contain;
+    padding-inline: var(--_peek);
+    scroll-behavior: auto;
+    scroll-padding-inline: var(--_peek);
+    scroll-snap-type: x mandatory;
+    /**
+     * The scrollbar is not the affordance: the controls and the indicators
+     * are, and a scrollbar under a row of slides reads as a page that did not
+     * fit. The viewport stays scrollable by touch, trackpad and keyboard.
+     */
+    scrollbar-width: none;
+  }
+
+  [data-ui='carousel'][data-arrows='outside'] > [data-part='viewport'] {
+    grid-area: 1 / 2;
+  }
+
+  [data-ui='carousel'] > [data-part='viewport']::-webkit-scrollbar {
+    display: none;
+  }
+
+  [data-ui='carousel'] > [data-part='viewport']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  /**
+   * While the engine moves the scroll, and while a mouse drags it, snap is
+   * off: a snapping scroller pulls every intermediate position back to the
+   * nearest page. The engine writes `data-moving` in the same task as the
+   * movement — the root's `data-dragging` comes from a framework render a
+   * frame later, and the first frames of a drag were snapped back under the
+   * pointer. Both movements end exactly on a page, so snap returns without
+   * moving anything.
+   */
+  [data-ui='carousel'] > [data-part='viewport'][data-moving] {
+    scroll-snap-type: none;
+  }
+
+  /**
+   * A mouse can drag the row, and the cursor says so before the press. The
+   * rule is gated on a fine pointer: a finger drags the scroller natively and
+   * has no cursor to change.
+   */
+  @media (hover: hover) and (pointer: fine) {
+    [data-ui='carousel'][data-draggable]:not([data-transition='fade']) > [data-part='viewport'] {
+      cursor: grab;
+    }
+  }
+
+  [data-ui='carousel'][data-dragging] > [data-part='viewport'] {
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  /** A picture inside a draggable row would otherwise start the browser's own image drag. */
+  [data-ui='carousel'][data-draggable] > [data-part='viewport'] img {
+    -webkit-user-drag: none;
+  }
+
+  [data-ui='carousel'][data-orientation='vertical'] > [data-part='viewport'] {
+    /**
+     * A column of slides needs a height to divide, and the content cannot
+     * give one: the tallest slide would make the viewport as tall as the
+     * column. Twenty rem is a card and a half at comfortable density.
+     */
+    block-size: var(--slotted-carousel-viewport-size, 20rem);
+    grid-auto-columns: 100%;
+    grid-auto-flow: row;
+    grid-auto-rows: calc((100% - (var(--_per-view) - 1) * var(--_gap)) / var(--_per-view));
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior-block: contain;
+    padding-block: var(--_peek);
+    padding-inline: 0;
+    scroll-padding-block: var(--_peek);
+    scroll-padding-inline: 0;
+    scroll-snap-type: y mandatory;
+  }
+
+  /* ── The slides ───────────────────────────────────────────────────────── */
+
+  /**
+   * A scroller cannot go past its ends, so a drag that pulls past one moves
+   * the slides instead, by the distance the engine writes as
+   * `--slotted-carousel-overscroll` — less and less the further the hand
+   * goes — and springs it back to nothing on release.
+   */
+  [data-ui='carousel'] > [data-part='viewport'] > [data-part='slide'] {
+    min-block-size: 0;
+    min-inline-size: 0;
+    position: relative;
+    scroll-snap-align: start;
+    translate: var(--slotted-carousel-overscroll, none);
+  }
+
+  [data-ui='carousel'][data-align='center'] > [data-part='viewport'] > [data-part='slide'] {
+    scroll-snap-align: center;
+  }
+
+  /**
+   * Once the engine has read the pages, only a slide a page starts at is a
+   * snap point. Before that every slide is one, which is the right paging for
+   * a server response and for one slide per view.
+   */
+  [data-ui='carousel'][data-measured]
+    > [data-part='viewport']
+    > [data-part='slide']:not([data-snap]) {
+    scroll-snap-align: none;
+  }
+
+  /**
+   * ── Fade ───────────────────────────────────────────────────────────────
+   *
+   * The slides are stacked in one cell and only the current one is shown.
+   * The viewport does not scroll, so a finger's horizontal swipe is the
+   * family's and a vertical one stays the page's.
+   *
+   * The arriving slide fades in on the enter curve over the long step; the
+   * leaving one fades out on the exit curve over the medium step, so the exit
+   * is never slower than the enter. The two overlap for the medium step
+   * rather than following each other, which keeps the cell from going empty
+   * between them. `visibility` interpolates as visible while either end is,
+   * so it hides the leaving slide when its fade ends and nothing in it can be
+   * reached once it is gone.
+   */
+  [data-ui='carousel'][data-transition='fade'] > [data-part='viewport'] {
+    grid-auto-columns: 100%;
+    grid-template-areas: 'stack';
+    overflow: hidden;
+    scroll-snap-type: none;
+    touch-action: pan-y;
+  }
+
+  [data-ui='carousel'][data-transition='fade'] > [data-part='viewport'] > [data-part='slide'] {
+    grid-area: stack;
+    opacity: 0;
+    transition:
+      opacity var(--slotted-duration-medium) var(--slotted-easing-exit, ease-in),
+      visibility var(--slotted-duration-medium) linear;
+    visibility: hidden;
+  }
+
+  [data-ui='carousel'][data-transition='fade']
+    > [data-part='viewport']
+    > [data-part='slide'][data-current] {
+    opacity: 1;
+    transition:
+      opacity var(--slotted-duration-long) var(--slotted-easing-enter, ease-out),
+      visibility var(--slotted-duration-long) linear;
+    visibility: visible;
+  }
+
+  /* ── Previous, next and the rotation control ──────────────────────────── */
+
+  /**
+   * One round control for all three, on the raised surface with the control
+   * shadow, because the inset pair stands over a picture and has to read as
+   * a thing on top of it in both schemes. ReUI measures 28 pixels with a
+   * 16-pixel mark; the family takes the control scale, 34 at `md`, so the
+   * pair is a step larger than the dots and matches a toolbar's buttons.
+   */
+  [data-ui='carousel'] [data-part='previous'],
+  [data-ui='carousel'] [data-part='next'],
+  [data-ui='carousel'] [data-part='autoplay'] {
+    --slotted-icon-size: var(--_icon-size);
+
+    align-items: center;
+    appearance: none;
+    background: var(--slotted-control-surface, Field);
+    block-size: var(--_control-size);
+    border: var(--slotted-control-border-width, 1px) solid
+      var(--slotted-control-border-color, ButtonBorder);
+    border-radius: var(--slotted-radius-full, 9999px);
+    box-shadow: var(--slotted-control-shadow, none);
+    color: var(--slotted-text, ButtonText);
+    cursor: pointer;
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--_control-size);
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    transition:
+      background-color var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing, ease),
+      border-color var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing, ease),
+      box-shadow var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing, ease),
+      color var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing, ease),
+      scale var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing, ease);
+  }
+
+  /** Over the viewport, at the two ends of its axis. */
+  [data-ui='carousel'] > [data-part='previous'],
+  [data-ui='carousel'] > [data-part='next'] {
+    align-self: center;
+    grid-area: 1 / 1;
+    margin-inline: var(--_inset);
+    z-index: 1;
+  }
+
+  [data-ui='carousel'] > [data-part='previous'] {
+    justify-self: start;
+  }
+
+  [data-ui='carousel'] > [data-part='next'] {
+    justify-self: end;
+  }
+
+  [data-ui='carousel'][data-arrows='outside'] > [data-part='previous'] {
+    grid-area: 1 / 1;
+    margin-inline: 0;
+  }
+
+  [data-ui='carousel'][data-arrows='outside'] > [data-part='next'] {
+    grid-area: 1 / 3;
+    margin-inline: 0;
+  }
+
+  [data-ui='carousel'][data-orientation='vertical'] > [data-part='previous'],
+  [data-ui='carousel'][data-orientation='vertical'] > [data-part='next'] {
+    justify-self: center;
+    margin-block: var(--_inset);
+    margin-inline: 0;
+  }
+
+  [data-ui='carousel'][data-orientation='vertical'] > [data-part='previous'] {
+    align-self: start;
+  }
+
+  [data-ui='carousel'][data-orientation='vertical'] > [data-part='next'] {
+    align-self: end;
+  }
+
+  /**
+   * The chevron is drawn once, pointing along the reading direction, and the
+   * icon box mirrors it in a right-to-left document. Previous turns it round;
+   * a vertical carousel turns both a quarter so they point along the column.
+   */
+  [data-ui='carousel'] [data-part='previous'] > [data-ui='icon'] {
+    rotate: 180deg;
+  }
+
+  [data-ui='carousel'][data-orientation='vertical'] [data-part='previous'] > [data-ui='icon'] {
+    rotate: -90deg;
+  }
+
+  [data-ui='carousel'][data-orientation='vertical'] [data-part='next'] > [data-ui='icon'] {
+    rotate: 90deg;
+  }
+
+  /**
+   * A column does not run along the reading direction, so a right-to-left
+   * document leaves its arrows alone. The icon box mirrors before it turns,
+   * and a mirrored chevron turned a quarter points the other way along the
+   * column.
+   */
+  [data-ui='carousel'][data-orientation='vertical']
+    :is([data-part='previous'], [data-part='next'])
+    > [data-ui='icon']:dir(rtl) {
+    scale: none;
+  }
+
+  [data-ui='carousel'] [data-part='previous']:hover:not([data-disabled]):not(:disabled),
+  [data-ui='carousel'] [data-part='next']:hover:not([data-disabled]):not(:disabled),
+  [data-ui='carousel'] [data-part='autoplay']:hover:not([data-disabled]):not(:disabled) {
+    background: var(--slotted-tone-secondary-subtle-hover, ButtonFace);
+  }
+
+  /**
+   * A press lands at once and releases at the control's pace. The round
+   * control shrinks by six per cent rather than dropping a hairline: a circle
+   * standing over a picture has no floor to be put down on, and a scale is
+   * the press that reads on a shape with no bottom edge.
+   */
+  [data-ui='carousel'] [data-part='previous']:active:not([data-disabled]):not(:disabled),
+  [data-ui='carousel'] [data-part='next']:active:not([data-disabled]):not(:disabled),
+  [data-ui='carousel'] [data-part='autoplay']:active:not([data-disabled]):not(:disabled) {
+    background: var(--slotted-tone-secondary-subtle-active, ButtonFace);
+    box-shadow: none;
+    scale: 0.94;
+    transition-duration: var(--slotted-duration-instant);
+  }
+
+  [data-ui='carousel'] [data-part='previous']:focus-visible,
+  [data-ui='carousel'] [data-part='next']:focus-visible,
+  [data-ui='carousel'] [data-part='autoplay']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  /**
+   * At an end without a loop the control stays where it is and stays
+   * focusable — `aria-disabled`, never `disabled`, so the focus it holds is
+   * not dropped onto the page — and says it has nowhere to go in the
+   * foundation's disabled ink, with its ground kept so it still reads as a
+   * control over a picture.
+   */
+  [data-ui='carousel'] :is([data-part='previous'], [data-part='next'])[data-disabled] {
+    border-color: var(--slotted-disabled-border, GrayText);
+    box-shadow: none;
+    color: var(--slotted-disabled-foreground, GrayText);
+    cursor: default;
+  }
+
+  /* ── The bar ──────────────────────────────────────────────────────────── */
+
+  /**
+   * The bar wraps rather than overflows: five dots and a counter are 180
+   * pixels, and a carousel in a third of a dashboard is narrower than that.
+   * The counter drops under the dots, centred, before anything is clipped.
+   */
+  [data-ui='carousel'] > [data-part='controls'] {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--slotted-space-4, 0.5rem);
+    grid-column: 1 / -1;
+    justify-content: center;
+    min-inline-size: 0;
+  }
+
+  [data-ui='carousel'][data-arrows='outside'] > [data-part='controls'] {
+    grid-column: 2;
+  }
+
+  /**
+   * Over the picture, at its foot, on a pill of the raised surface. Solid
+   * rather than translucent: the dots are the one thing on the picture that
+   * has to read in every scheme, and a ground that lets the picture through
+   * gives the dots a different ground on every slide.
+   */
+  [data-ui='carousel'] > [data-part='controls'][data-placement='overlay'] {
+    align-self: end;
+    background: var(--slotted-surface-raised, Canvas);
+    border-radius: var(--slotted-radius-full, 9999px);
+    box-shadow: var(--slotted-shadow-sm, none);
+    gap: var(--slotted-space-2, 0.25rem);
+    grid-area: 1 / 1;
+    justify-self: center;
+    margin-block-end: var(--_inset);
+    padding-block: var(--slotted-space-2, 0.25rem);
+    padding-inline: var(--slotted-space-3, 0.375rem);
+    z-index: 1;
+  }
+
+  /**
+   * Inside the pill the round controls give their frame to the pill: a
+   * bordered circle inside a bordered pill is two edges where one is enough.
+   * They take the height the foundation gives the inside of a control, so
+   * the pill is that height and a step of air either side of it.
+   */
+  [data-ui='carousel']
+    > [data-part='controls'][data-placement='overlay']
+    > :is([data-part='previous'], [data-part='next'], [data-part='autoplay']) {
+    --_control-size: var(--slotted-control-inner-size-md, 24px);
+
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  [data-ui='carousel'][data-size='sm']
+    > [data-part='controls'][data-placement='overlay']
+    > :is([data-part='previous'], [data-part='next'], [data-part='autoplay']) {
+    --_control-size: var(--slotted-control-inner-size-sm, 22px);
+  }
+
+  [data-ui='carousel'][data-size='lg']
+    > [data-part='controls'][data-placement='overlay']
+    > :is([data-part='previous'], [data-part='next'], [data-part='autoplay']) {
+    --_control-size: var(--slotted-control-inner-size-lg, 28px);
+  }
+
+  [data-ui='carousel'][data-arrows='outside'] > [data-part='controls'][data-placement='overlay'] {
+    grid-area: 1 / 2;
+  }
+
+  [data-ui='carousel'] > [data-part='controls'] > [data-part='indicators'][data-variant='line'] {
+    flex: 1 1 auto;
+  }
+
+  /* ── The indicators ───────────────────────────────────────────────────── */
+
+  [data-ui='carousel'] [data-part='indicators'] {
+    align-items: center;
+    display: flex;
+    /* A dot's box is twenty pixels; four between two boxes puts their centres twenty-four apart. */
+    gap: var(--slotted-space-2, 0.25rem);
+    justify-content: center;
+    min-inline-size: 0;
+  }
+
+  /**
+   * A dot is eight pixels and the button around it is a 24-pixel row: the
+   * mark is drawn by the button's own `::before`, and the box is what the
+   * pointer hits. Two boxes side by side stand twenty-four pixels centre to
+   * centre, which is the spacing WCAG 2.2 SC 2.5.8 accepts for a target
+   * smaller than twenty-four.
+   */
+  [data-ui='carousel'] [data-part='indicator'] {
+    appearance: none;
+    background: transparent;
+    block-size: var(--slotted-target-min, 24px);
+    border: 0;
+    border-radius: var(--slotted-radius-full, 9999px);
+    color: inherit;
+    cursor: pointer;
+    flex: none;
+    inline-size: calc(var(--_dot) + 2 * var(--_dot-air));
+    margin: 0;
+    padding: 0;
+    position: relative;
+    transition: inline-size var(--slotted-duration-medium) var(--slotted-easing-standard, ease);
+  }
+
+  [data-ui='carousel'] [data-part='indicator'][data-current] {
+    inline-size: calc(var(--_dot-current) + 2 * var(--_dot-air));
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators']:not([data-variant='thumbnails'])
+    > [data-part='indicator']::before,
+  [data-ui='carousel']
+    [data-part='indicators']:not([data-variant='thumbnails'])
+    > [data-part='indicator']::after {
+    block-size: var(--_dot);
+    border-radius: var(--slotted-radius-full, 9999px);
+    content: '';
+    inset-block-start: calc(50% - var(--_dot) / 2);
+    inset-inline: var(--_dot-air);
+    position: absolute;
+  }
+
+  /**
+   * The resting dot is the line between two surfaces, which holds 3:1 on
+   * every surface a carousel stands on; the current one is the ink, and its
+   * shape already differs.
+   */
+  [data-ui='carousel']
+    [data-part='indicators']:not([data-variant='thumbnails'])
+    > [data-part='indicator']::before {
+    background: var(--slotted-border-strong, transparent);
+    transition: background-color var(--slotted-control-transition-duration)
+      var(--slotted-control-transition-easing, ease);
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators']:not([data-variant='thumbnails'])
+    > [data-part='indicator']:hover:not([data-current]):not([data-disabled])::before {
+    background: var(--slotted-text-muted, transparent);
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators']:not([data-variant='thumbnails'])
+    > [data-part='indicator']:active:not([data-current]):not([data-disabled])::before {
+    background: var(--slotted-text, transparent);
+    transition-duration: var(--slotted-duration-instant);
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators']:not([data-variant='thumbnails'])
+    > [data-part='indicator'][data-current]::before {
+    background: var(--slotted-text, transparent);
+  }
+
+  /**
+   * ── The time left ──────────────────────────────────────────────────────
+   *
+   * While the rotation runs the current mark becomes a track and fills with
+   * the ink over exactly the delay the timer was given, because it reads the
+   * same number: `--slotted-carousel-autoplay-delay`, written by the binding.
+   * Hover and a hidden document pause the timer, and `data-paused` freezes
+   * the fill at the same instant, so the picture and the timer never
+   * disagree. The fill grows its own inline size from the inline start, like
+   * `toast`'s countdown, so there is no origin to mirror.
+   */
+  [data-ui='carousel'][data-playing]
+    [data-part='indicators']:not([data-variant='thumbnails'])
+    > [data-part='indicator'][data-current]::before {
+    background: var(--slotted-border-strong, transparent);
+  }
+
+  [data-ui='carousel'][data-playing]
+    [data-part='indicators']:not([data-variant='thumbnails'])
+    > [data-part='indicator'][data-current]::after {
+    animation: slotted-carousel-countdown
+      var(--slotted-carousel-autoplay-delay, var(--slotted-duration-loop-slow)) linear forwards;
+    background: var(--slotted-text, transparent);
+    inset-inline-end: auto;
+  }
+
+  [data-ui='carousel'][data-playing][data-paused]
+    [data-part='indicators']
+    > [data-part='indicator'][data-current]::after {
+    animation-play-state: paused;
+  }
+
+  /* From a dot rather than from nothing: a fill one pixel wide with round caps reads as a tick. */
+  @keyframes slotted-carousel-countdown {
+    from {
+      inline-size: var(--_dot);
+    }
+
+    to {
+      inline-size: calc(100% - 2 * var(--_dot-air));
+    }
+  }
+
+  /**
+   * Past eight pages a row of dots is a ruler nobody reads. The engine writes
+   * each dot's distance from the current one; two steps away a dot shrinks by
+   * a third, and beyond the window it collapses to nothing. A collapsed dot
+   * stays a tab in the arrow ring, and moving onto it makes it current, which
+   * brings the window to it.
+   */
+  [data-ui='carousel']
+    [data-part='indicators'][data-adaptive]
+    > [data-part='indicator'][data-distance='2']::before {
+    scale: 0.66;
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators'][data-adaptive]
+    > [data-part='indicator'][data-distance='far'] {
+    inline-size: 0;
+    overflow: hidden;
+  }
+
+  /**
+   * ── Line ───────────────────────────────────────────────────────────────
+   *
+   * Segments that share the row. The mark is a two-pixel rule rather than a
+   * dot, and the current one is the ink — the progress line ReUI's `blog-3`
+   * draws as a single pixel, at the thickness the foundation gives a marker.
+   */
+  [data-ui='carousel'] [data-part='indicators'][data-variant='line'] {
+    gap: var(--slotted-space-2, 0.25rem);
+  }
+
+  [data-ui='carousel'] [data-part='indicators'][data-variant='line'] > [data-part='indicator'],
+  [data-ui='carousel']
+    [data-part='indicators'][data-variant='line']
+    > [data-part='indicator'][data-current] {
+    flex: 1 1 0;
+    inline-size: auto;
+    min-inline-size: var(--slotted-target-min, 24px);
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators'][data-variant='line']
+    > [data-part='indicator']::before,
+  [data-ui='carousel']
+    [data-part='indicators'][data-variant='line']
+    > [data-part='indicator']::after {
+    block-size: var(--_line);
+    border-radius: var(--slotted-radius-full, 9999px);
+    inset-block-start: calc(50% - var(--_line) / 2);
+    inset-inline: 0;
+  }
+
+  [data-ui='carousel'][data-playing]
+    [data-part='indicators'][data-variant='line']
+    > [data-part='indicator'][data-current]::after {
+    animation-name: slotted-carousel-countdown-line;
+  }
+
+  @keyframes slotted-carousel-countdown-line {
+    from {
+      inline-size: 0;
+    }
+
+    to {
+      inline-size: 100%;
+    }
+  }
+
+  /**
+   * ── Thumbnails ─────────────────────────────────────────────────────────
+   *
+   * Each indicator holds the consumer's picture. The strip scrolls on its own
+   * when it holds more than it can show, and the engine keeps the current one
+   * in view. The resting pictures are held back so the current one is the
+   * brightest thing in the strip; the current one carries an inset ring of
+   * the ink, inside its own box, so the focus ring drawn outside it is never
+   * confused with it.
+   */
+  [data-ui='carousel'] [data-part='indicators'][data-variant='thumbnails'] {
+    gap: var(--slotted-space-4, 0.5rem);
+    justify-content: flex-start;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    /* Room for the focus ring, which the scroller would otherwise clip. */
+    padding: calc(var(--slotted-focus-ring-width, 2px) + var(--slotted-focus-ring-offset, 2px));
+    scrollbar-width: none;
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators'][data-variant='thumbnails']
+    > [data-part='indicator'],
+  [data-ui='carousel']
+    [data-part='indicators'][data-variant='thumbnails']
+    > [data-part='indicator'][data-current] {
+    block-size: var(--_thumbnail);
+    border-radius: var(--slotted-radius-md, 6px);
+    inline-size: var(--_thumbnail);
+    overflow: hidden;
+    transition: none;
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators'][data-variant='thumbnails']
+    > [data-part='indicator']
+    > * {
+    block-size: 100%;
+    display: block;
+    inline-size: 100%;
+    object-fit: cover;
+    opacity: 0.6;
+    transition: opacity var(--slotted-control-transition-duration)
+      var(--slotted-control-transition-easing, ease);
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators'][data-variant='thumbnails']
+    > [data-part='indicator']:hover:not([data-current]):not([data-disabled])
+    > * {
+    opacity: 0.85;
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators'][data-variant='thumbnails']
+    > [data-part='indicator'][data-current]
+    > * {
+    opacity: 1;
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators'][data-variant='thumbnails']
+    > [data-part='indicator']::after {
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--slotted-border-width-thin, 1px)
+      var(--slotted-border-subtle, transparent);
+    content: '';
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+    transition: box-shadow var(--slotted-control-transition-duration)
+      var(--slotted-control-transition-easing, ease);
+  }
+
+  /**
+   * The ring answers the pointer as well as the picture does: a step darker
+   * under hover, and the ink under the press, so the part itself carries the
+   * state and not only the picture inside it.
+   */
+  [data-ui='carousel']
+    [data-part='indicators'][data-variant='thumbnails']
+    > [data-part='indicator']:hover:not([data-current]):not([data-disabled])::after {
+    box-shadow: inset 0 0 0 var(--slotted-border-width-thin, 1px)
+      var(--slotted-border-strong, transparent);
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators'][data-variant='thumbnails']
+    > [data-part='indicator']:active:not([data-current]):not([data-disabled])::after {
+    box-shadow: inset 0 0 0 var(--slotted-border-width-thick, 2px)
+      var(--slotted-border-strong, transparent);
+    transition-duration: var(--slotted-duration-instant);
+  }
+
+  [data-ui='carousel']
+    [data-part='indicators'][data-variant='thumbnails']
+    > [data-part='indicator'][data-current]::after {
+    box-shadow: inset 0 0 0 var(--slotted-border-width-thick, 2px) var(--slotted-text, transparent);
+  }
+
+  [data-ui='carousel'] [data-part='indicator']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  /**
+   * A dot on a line drawn inside a 24-pixel row would put the ring four
+   * pixels round a box much taller than the mark. The ring of a dot or a
+   * segment hugs the row instead, which is the box the pointer hits.
+   */
+  [data-ui='carousel']
+    [data-part='indicators']:not([data-variant='thumbnails'])
+    > [data-part='indicator']:focus-visible {
+    outline-offset: calc(var(--slotted-focus-ring-width, 2px) * -1);
+  }
+
+  /* ── The counter ──────────────────────────────────────────────────────── */
+
+  /**
+   * Tabular figures, so "9 / 12" and "10 / 12" are the same width and the
+   * controls beside the counter do not move when the page changes.
+   */
+  [data-ui='carousel'] [data-part='counter'] {
+    color: var(--slotted-text-muted, GrayText);
+    font-family: var(--slotted-font-family-sans, sans-serif);
+    font-size: var(--slotted-font-size-sm, 0.8125rem);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--slotted-line-height-sm, 1.45);
+    /**
+     * "3 / 8" is a fraction and reads first-to-last in every script; left to
+     * the bidirectional algorithm in a right-to-left page the neutral slash
+     * turned it into "8 / 3".
+     */
+    direction: ltr;
+    unicode-bidi: isolate;
+    white-space: nowrap;
+  }
+
+  /**
+   * The marks are painted by pseudo-elements, and forced colours repaint a
+   * pseudo-element's ground as the page's and lose the mark. The theme has
+   * already mapped the tokens the marks read to system colours, so the rule
+   * only stops the repaint, and moves the current mark to the accent tone,
+   * which forced colours map to the highlight.
+   */
+  @media (forced-colors: active) {
+    [data-ui='carousel'] [data-part='indicator']::before,
+    [data-ui='carousel'] [data-part='indicator']::after {
+      forced-color-adjust: none;
+    }
+
+    [data-ui='carousel']
+      [data-part='indicators']:not([data-variant='thumbnails'])
+      > [data-part='indicator'][data-current]::before,
+    [data-ui='carousel']
+      [data-part='indicators']:not([data-variant='thumbnails'])
+      > [data-part='indicator'][data-current]::after {
+      background: var(--slotted-tone-accent-solid, transparent);
+    }
+
+    [data-ui='carousel']
+      [data-part='indicators'][data-variant='thumbnails']
+      > [data-part='indicator'][data-current]::after {
+      box-shadow: inset 0 0 0 var(--slotted-border-width-thick, 2px)
+        var(--slotted-tone-accent-solid, transparent);
+    }
+  }
+}