@deriv-com/dds-marketing 0.2.0 → 1.0.1

package/dist/components/blocks/product-hero/product-hero-impl.css

@@ -0,0 +1,354 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * The photograph, drawn the one way a band wants it.
+ *
+ * The page passes which image; how it is fitted is this component's decision and belongs here
+ * rather than in the inline style, where a page could not see it. `cover` because a band of fixed
+ * height letterboxing a photograph would show the ground through it.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+/*
+ * A title with nothing under it carries no step under it.
+ *
+ * The steps inside the text block sit on each part's own `margin-block-end`, because eyebrow-to-
+ * title and title-to-description are two roles that agree at full width and part company on a
+ * phone. The cost is a trailing margin: with `description` absent the title is the last child and
+ * its step is measured against nothing.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * A screen tall, like the tier above it.
+ *
+ * `100cqh` rather than `100svh`, and the two are the same number on a real page: with no ancestor
+ * declaring size containment, a container query length falls back to the small viewport. What the
+ * container unit adds is an answer for a frame standing in for a window, which is what the preview
+ * gives a band — see `spansThePage`.
+ *
+ * `min-block-size` rather than `block-size`, so a band whose copy runs long grows instead of
+ * clipping it.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero {
+  min-block-size: 100cqh;
+}
+
+/*
+ * Centred, and centred on the measure rather than on the band.
+ *
+ * `size.measure.hero-description` caps the line length; without `margin-inline: auto` the capped block
+ * sits at the column's leading edge while the text inside it is centred, which reads as a
+ * paragraph nudged toward the start of everything above it. The same correction the actions need, for the same
+ * reason: a wrapped row of buttons hugs its content and would otherwise sit at the start edge.
+ */
+/*
+ * Two calls to action stack on a phone and stand side by side once there is room.
+ *
+ * The reference design makes each one full width at the narrow end — a button that hugs its label
+ * on a phone is a tap target sized by how long the word happens to be, so "Try free demo" is an
+ * easier press than "Buy" for no reason a reader would agree with — and lets them hug once the
+ * band is wide enough to hold both on a line.
+ *
+ * Before the wide rules below, not after them: a container query adds no weight, so a phone rule
+ * written later at the same specificity wins at every width — which is how it stood once, with the
+ * actions stacked and stretched across a desktop band.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__actions {
+  align-items: stretch;
+  flex-direction: column;
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__actions > * {
+  inline-size: 100%;
+}
+
+/*
+ * Whatever the page put in a visual slot fills the slot's width.
+ *
+ * The slots take a node rather than a source, so what arrives is the page's element — an `<img>`,
+ * a `<picture>`, or a ratio box holding one — and this cannot know whether it carries dimensions.
+ * Width only: the height is the visual's own business here, unlike the landing tier where the slot
+ * is a sized box and the subject has to fill it.
+ *
+ * The `<img>` rule reaches a level deeper on purpose, for the case where the page wraps its
+ * picture in something: `object-fit` does nothing on a `<div>`, so a rule aimed at the slot's
+ * immediate child was silently a no-op whenever that child was a ratio box.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media > * {
+  inline-size: 100%;
+}
+
+/*
+ * Starts on a phone, centred once the band is wide enough to hold a line.
+ *
+ * The reference design does exactly this, and the reason is legibility rather than taste: centred
+ * text is read from a different starting edge on every line, which costs little across a wide
+ * measure and a great deal across a narrow one. The claim is centred where it is short relative to
+ * the band and ranged where it is not.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__content {
+    align-items: center;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__actions {
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__actions > * {
+    inline-size: auto;
+  }
+}
+
+/*
+ * The product, under the claim and narrower than it.
+ *
+ * In flow here, where the landing tier places its subject against the band's edge — so the rules
+ * that tier needs are wrong for this one. `block-size: 100%` on the child was carried over from it
+ * and is the reason the visual sat where it did: the slot has no height of its own, so the
+ * percentage resolved to auto and whatever was inside sized itself.
+ *
+ * Capped at sixty per cent of the column rather than filling it. A screenshot run to the measure's
+ * full width is taller than the band that holds it, and the claim above it goes off the top. The
+ * same percentage reasoning as the landing tier's half-measure text column, and a share rather
+ * than a token for the same reason: it is this arrangement's proportion, not a value the system
+ * names.
+ */
+/*
+ * The column fills the band, said outright rather than inherited.
+ *
+ * Everything about where this band's contents sit depends on it: the product is stood on the foot
+ * by the room left above it, and room only exists if the column is taller than what is in it. It
+ * should stretch on its own — it is the only item of a flex row that sets no cross size — and it
+ * was not, which is what left the claim at the top, the picture under it, and the rest of the band
+ * empty beneath both. `align-self` asks for it directly, so nothing between here and the band has
+ * to agree for the arrangement to hold.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__content {
+  align-self: stretch;
+}
+
+/*
+ * The product stands on the band's foot rather than floating above it, at every width.
+ *
+ * It is the last thing in the column, so what separates it from the band's edge is the section
+ * step `inner` carries. Dropped, the picture meets the foot and is cropped by it — which is what
+ * makes a product read as standing in the band rather than as a picture placed on it, and is the
+ * arrangement LandingHero's subject takes for the same reason.
+ *
+ * At every width, which is the correction. This sat inside the wide layout's query for a while and
+ * the phone kept its step: the picture was aligned to the foot of a column that stopped short of
+ * the band, so every arrangement above it was right and there was a hand's width of ground under
+ * it regardless. A band that clips its subject is not a decision about how wide the window is.
+ *
+ * Only where there is a product. `:has()` asks the band whether one was passed, because without it
+ * the claim and its actions would be the thing resting on the edge, and a band of words with no
+ * air under them is a band that looks cut off rather than composed.
+ *
+ * The step above is untouched: this is the distance from the picture down, not the rhythm of the
+ * column.
+ */
+:where([data-dds-context="marketing"])
+  .dds-producthero:has(.dds-producthero__media)
+  .dds-producthero__inner {
+  padding-block-end: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media {
+  inline-size: 100%;
+}
+
+/*
+ * Below the fold the whole column sits at the foot, rather than the picture alone.
+ *
+ * There is no bar to clear on a phone and nothing above the claim worth the space, so a band that
+ * put its words at the top and its picture at the bottom was a screen with a hole in the middle.
+ * Everything together at the base reads as one thing standing on the ground the page continues
+ * from.
+ *
+ * The auto margin has to go with it. Left on, it would take every pixel of the free space for
+ * itself and put the picture back at the foot on its own — which is the arrangement this rule
+ * exists to replace, not one to stack on top of.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__content {
+    justify-content: flex-end;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media {
+    margin-block-start: 0;
+  }
+}
+
+
+
+
+@container (min-width: 48rem) {
+  /*
+   * Capped on both axes, and sized by width rather than height.
+ *
+ * `max-block-size` is what stops the band outgrowing the screen it is supposed to be one of. A
+ * sixty-per-cent-wide widescreen picture is four hundred tall on a wide band, and with the claim
+ * and the section step above it the band came to a thousand — taller than a viewport, so its own
+ * rounded bottom corners scrolled past the fold and the exit animation looked like it was only
+ * scaling. It is a `max-`, so it caps without demanding, which is the difference from the
+ * `block-size` that pushed the picture over its own button.
+   *
+   * The reference design writes this as `height: 50vh; aspect-ratio: 1/1`, and reading it across
+   * literally was wrong here: a definite block-size on a flex item in a column asks for that height
+   * whatever is above it, so the product demanded half the band while the claim and the actions had
+   * already spent it. The column overran and the visual rode up over its own button.
+   *
+   * A width cap cannot do that. The visual takes the height its ratio gives it from the room that
+   * is actually left, which is the same picture at every size the band is ever shown at — and the
+   * reference's 50vh square lands within a few per cent of it at the widths that matter.
+   */
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media {
+    /*
+     * Pushed to the foot of the band by the room left over.
+     *
+     * `margin-block-start: auto` is what stands the product on the edge: the column fills the band,
+     * the claim sits at the top of it under the bar's clearance, and every pixel between them goes
+     * above the picture. Aligning the whole column to the end instead would have bunched the claim
+     * onto the product with a screen of nothing over it.
+     */
+    margin-block-start: auto;
+    /*
+     * One cap, on the axis the shape is measured from.
+     *
+     * Capping the height and the width separately is what flattened the portrait: the box took
+     * sixty per cent of the column, `aspect.portrait` asked for a height a quarter greater again,
+     * and `max-block-size` clamped that back — leaving the width where it was. A ratio clamped on
+     * one axis is not a ratio; it is a landscape box that used to be a portrait.
+     *
+     * So the height's limit is expressed as a width instead, which a square makes exact: the widest
+     * the picture may be is the tallest it may be, because `aspect.square` is one to one. A ratio
+     * that was not would have to restate itself here as a fraction, and that restatement is the one
+     * place the two could drift.
+     *
+     * Half the band, which is the reference design's own `height: 50vh` — reachable now that the
+     * slot is a square, where before it was two numbers that had to be reconciled. It was forty per
+     * cent while the picture could ride up over its own button; standing on the foot it cannot, and
+     * the band clips, so the ceiling can be what the design asked for.
+     *
+     * The width guard is the second half of the `min()`, for a window tall enough that half its
+     * height is wider than the measure — there the picture would outrun the claim above it.
+     */
+    max-inline-size: min(80%, 50cqh);
+  }
+
+  /*
+   * The claim starts below where a navigation bar would be.
+   *
+   * The band is the first thing on the page and a bar sits over it, so the section's own step is
+   * measured from under the bar rather than from the top of the window — `size.bar-height` is what
+   * a collapsed one takes, and the step is the band's usual one on top of it. Without this the
+   * eyebrow began at the section step and the bar ate it.
+   */
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__inner {
+    padding-block-start: calc(var(--size-bar-height) + var(--space-section-default));
+  }
+
+
+
+  /*
+   * The visual takes its height from that cap and its width from its own ratio, so a wide band
+   * does not make it taller. Without the second half of this the cap clipped the picture instead
+   * of resizing it.
+   */
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media > * {
+    block-size: 100%;
+    inline-size: auto;
+    margin-inline: auto;
+    max-inline-size: 100%;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media img {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+/*
+ * The band rounds off as it leaves.
+ *
+ * Scroll-driven rather than timed: `view()` measures the band against the viewport, so the corner
+ * arrives as the reader scrolls and reverses when they scroll back. There is no element entering
+ * and no transition to hang it on, which is what puts a keyframed animation in this file rather
+ * than in a binding.
+ *
+ * `radius.expressive` is the corner — the role's own description names high-impact visual sections
+ * and banners. Only the two lower corners: the band starts at the top of the document with nothing
+ * above it to round away from.
+ */
+@keyframes dds-producthero-exit {
+  to {
+    border-end-end-radius: var(--radius-expressive);
+    border-end-start-radius: var(--radius-expressive);
+    scale: var(--motion-scale-band-exit);
+  }
+}
+
+@supports (animation-timeline: view()) {
+  :where([data-dds-context="marketing"]) .dds-producthero {
+    animation: dds-producthero-exit linear both;
+    animation-range: exit 0% exit 40%;
+    animation-timeline: view();
+  }
+}
+
+/*
+ * A reader who asked for less movement gets none of it.
+ *
+ * The generated sheet writes a reduced-motion block from its bindings, and this animation is not
+ * one of them — it is written here, so its own exception has to be too.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-producthero {
+    animation: none;
+  }
+}
+
+/*
+ * A band in a short container compacts, rather than clipping what it holds.
+ *
+ * `space.section.default` is 112 top and bottom — 224 of the band before a word is set, which is
+ * right at a screen's height and is most of an overview row. The band is as tall as the screen, so
+ * it is the screen's height that is asked: a `@media` query, on a real page. The band's own
+ * `container-type` is `inline-size`, which cannot answer a height, so a container query alone
+ * matched only inside a frame that measures its height — the preview's — and never in production.
+ * Both are written: the media query for a page, the container query for a frame. The role already
+ * exists for a band that has to be shorter; nothing new is named here.
+ */
+@container (max-height: 40rem) {
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__inner {
+    padding-block: var(--space-section-compact);
+  }
+}
+
+@media (max-height: 40rem) {
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__inner {
+    padding-block: var(--space-section-compact);
+  }
+}

package/dist/components/blocks/testimonial-row/TestimonialRow.css

@@ -0,0 +1,245 @@
+/* GENERATED from testimonialrow.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: clip;
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+  margin-block-end: var(--space-heading-title-description);
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__summary {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin: 0;
+  column-gap: var(--space-gap-sm);
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-description);
+  row-gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__carousel {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__track {
+  transition-property: outline-color, outline-width;
+  display: flex;
+  outline-style: solid;
+  column-gap: var(--space-grid-gutter);
+  outline-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__review-link {
+  transition-property: outline-color, outline-width, translate;
+  box-sizing: border-box;
+  color: inherit;
+  display: flex;
+  outline-style: solid;
+  text-decoration: none;
+  transition-property: translate;
+  border-radius: var(--radius-container);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__item {
+  align-items: flex-start;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  min-inline-size: 0;
+  position: relative;
+  border-radius: var(--radius-container);
+  min-block-size: var(--size-review-card-min);
+  padding-block: var(--space-inset-lg);
+  padding-inline: var(--space-inset-lg);
+  row-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__rating {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-fg-brand-accent);
+  column-gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__star {
+  display: grid;
+  flex: none;
+  block-size: var(--icon-size-sm);
+  inline-size: var(--icon-size-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__star-track {
+  display: block;
+  opacity: var(--opacity-track);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__star-fill {
+  display: block;
+  color: var(--color-fg-brand-accent);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__quote {
+  margin: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__author {
+  align-items: center;
+  display: flex;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__name {
+  display: block;
+  font-family: var(--font-label-lg-family);
+  font-size: var(--font-label-lg-size);
+  font-weight: var(--font-label-lg-weight);
+  letter-spacing: var(--font-label-lg-letter-spacing);
+  line-height: var(--font-label-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__detail {
+  display: block;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__footer {
+  align-items: center;
+  display: flex;
+  row-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__nav {
+  display: flex;
+  flex: none;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__nav-slot {
+  display: flex;
+  border-radius: var(--radius-pill);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__review-link:hover {
+  translate: var(--motion-translate-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__review-link:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__track:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="page"] .dds-testimonialrow__detail {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="page"] .dds-testimonialrow__item {
+  background-color: var(--color-bg-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="strong"] .dds-testimonialrow__detail {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="strong"] .dds-testimonialrow__item {
+  background-color: var(--color-bg-surface-card-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="subtle"] .dds-testimonialrow__detail {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="subtle"] .dds-testimonialrow__item {
+  background-color: var(--color-bg-surface-card-raised);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="strong"] .dds-testimonialrow__review-link:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="strong"] .dds-testimonialrow__track:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-testimonialrow,
+  :where([data-dds-context="marketing"]) .dds-testimonialrow * { transition: none !important; }
+}
+

package/dist/components/blocks/testimonial-row/TestimonialRow.d.ts

@@ -0,0 +1,20 @@
+import "./TestimonialRow.css";
+import "./testimonial-row-impl.css";
+import "../block-reveal.css";
+import { type TestimonialRowProps } from "./TestimonialRow.types.js";
+export type { TestimonialRowProps };
+/**
+ * A heading over a row of rated reviews, stepped through by the reader — the reference site's
+ * Testimonial in its review-row form, named for no review service.
+ *
+ * The browser does the scrolling and the snapping; this only reads where the row is, so each arrow
+ * is offered while it has somewhere to go. Read on scroll and on resize — a row that grows wide
+ * enough to hold every card has nowhere to go in either direction, and the arrows go with it.
+ *
+ * Nothing here moves on its own, which is the difference from TestimonialSlider: several cards are in
+ * view at once, so there is no "next" for a timer to bring.
+ *
+ * `'use client'` for the row's scroll position, the arrival, and `useId`, which names the region
+ * by its heading.
+ */
+export declare function TestimonialRow({ ground, title, reviews, summary, ratingLabel, label, previousLabel, nextLabel, }: TestimonialRowProps): import("react").JSX.Element | null;