@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/sticky-cards/sticky-cards-impl.css

@@ -0,0 +1,393 @@
+/*
+ * 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 header starts on a phone and is centred from the fold.
+ *
+ * FeatureCards' rule and its reason: the cards are stacked under the heading, so the heading is
+ * centred over them — and both references turn at 768px. The header and its line are capped
+ * narrower than the column, so `margin-inline: auto` centres those boxes as well as their words.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__description {
+    margin-inline: auto;
+  }
+}
+
+/*
+ * A heading with nothing under it closes up: its bound step is the distance to the line.
+ */
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * One column, and every row as tall as the tallest card.
+ *
+ * Equal rows are what let a card hide the one under it completely: a shorter card arriving over a
+ * taller one would leave the taller one's foot showing under it, words and all. The reference
+ * measured every card with a script and wrote the tallest height onto each, again on resize and
+ * again once the fonts arrived; `1fr` rows in a list whose height is its content are the same
+ * answer, given by the layout before anything runs. `minmax(0, 1fr)` across, so a long word or a
+ * wide picture shrinks to the column rather than pushing the list past the page.
+ */
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__list {
+  grid-auto-rows: 1fr;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* The Card fills its place, so a short card in a tall row is drawn the row's height. */
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__item > .dds-card {
+  flex: auto;
+}
+
+/*
+ * A light and a dark card are raised a step on the subtle band — FeatureCards' answer, and its
+ * reason: surface-light is gray.50, the band's own colour in light mode, and accent-strong lands
+ * within a shade of the band in dark mode. Both raised fills are opaque in both themes, which a
+ * card in a pile has to be: a see-through card would show the one it covers.
+ */
+:where([data-dds-context="marketing"])
+  .dds-stickycards[data-ground="subtle"]
+  .dds-stickycards__item
+  > .dds-card[data-variant="surface-light"] {
+  background-color: var(--color-bg-surface-card-light-raised);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-stickycards[data-ground="subtle"]
+  .dds-stickycards__item
+  > .dds-card[data-variant="accent-strong"] {
+  background-color: var(--color-bg-surface-card-strong-raised);
+}
+
+/*
+ * ── compact ──────────────────────────────────────────────────────────────────────────────────
+ *
+ * The picture is inset from the card's edges, under the words on a phone: CardBody's own inset
+ * holds the words, and the picture takes the same inset on its three open sides — the words' foot
+ * padding is already the step between the two.
+ */
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__media {
+  margin-block-end: var(--space-inset-card);
+  margin-inline: var(--space-inset-card);
+}
+
+/*
+ * The container: a landscape panel, aspect.landscape, whatever the page puts in it — the reference
+ * design's animation panel, and the same panel for a picture. The picture fills it, cropped to fill;
+ * a player the page mounts stretches to it, a grid of one cell so it does not collapse to nothing in
+ * a box with no height of its own. A panel of one shape down the pile is what keeps the set reading
+ * as a set.
+ */
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__media {
+  aspect-ratio: var(--aspect-landscape);
+  display: grid;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__image {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+/*
+ * A card's background photograph, under a wash of the card's own fill at opacity.muted (72%) — the
+ * reference design's market cards, which washed at 85%: at that strength a photograph barely showed
+ * through, and the card read as plain fill. At 72% the photograph reads as texture and the words keep
+ * their contrast over the brightest photograph — about 9:1 dark on the light card, 7:1 white on the
+ * dark one; the coral card was under body contrast on its plain fill already, and stays the
+ * recorded exception. The wash is the fill the card already paints, mixed toward transparent, so it
+ * follows the variant and the ground's raised fills with nothing to keep in step. The words and the
+ * container sit above it.
+ */
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__item > .dds-card {
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__backdrop {
+  border-radius: inherit;
+  z-index: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__backdrop > img {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__backdrop::after {
+  background-color: color-mix(in srgb, var(--dds-stickycards-fill) calc(var(--opacity-muted) * 100%), transparent);
+  content: '';
+  inset: 0;
+  position: absolute;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-card { --dds-stickycards-fill: var(--color-bg-surface-card-strong); }
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-card[data-variant="accent"] { --dds-stickycards-fill: var(--color-bg-brand); }
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-card[data-variant="surface-light"] { --dds-stickycards-fill: var(--color-bg-surface-card-light); }
+:where([data-dds-context="marketing"]) .dds-stickycards[data-ground="subtle"] .dds-card[data-variant="accent-strong"] { --dds-stickycards-fill: var(--color-bg-surface-card-strong-raised); }
+:where([data-dds-context="marketing"]) .dds-stickycards[data-ground="subtle"] .dds-card[data-variant="surface-light"] { --dds-stickycards-fill: var(--color-bg-surface-card-light-raised); }
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__body {
+  position: relative;
+  z-index: 1;
+}
+
+/*
+ * A pile of words alone stands each card's words in the middle of its height, the reference's
+ * alignment. Only where no card in the pile has a picture: in a pile where some do, a card without one
+ * keeps its words stacked at the top like the rest, so the set reads as one set.
+ */
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"][data-pile="words"] [data-media="none"] .dds-cardbody {
+  justify-content: center;
+}
+
+@container (min-width: 48rem) {
+  /*
+   * From the fold the words and the picture sit side by side, halves of the card, the words at the
+   * start and both at the top. The picture's inset moves to its open sides: the words' own end
+   * padding is the step between the halves. The words keep the card's height, so a card of words
+   * alone can still stand them in its middle; the container keeps its landscape shape.
+   */
+  :where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__body {
+    flex-direction: row;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__media {
+    align-self: flex-start;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__body > :is(.dds-cardbody, .dds-stickycards__media) {
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__media {
+    margin-block: var(--space-inset-card);
+    margin-inline: 0 var(--space-inset-card);
+  }
+
+  /* In a pile where other cards have a picture, a card without one keeps its words to the same half
+     the others' take, so the words line up down the pile and wrap the same way; the other half is
+     the card's own fill. */
+  :where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"][data-pile="pictured"] [data-media="none"] .dds-stickycards__body > .dds-cardbody {
+    flex: 0 1 50%;
+  }
+
+  /*
+   * And a card of words alone sets its title beside its sentence — the reference design's two
+   * columns, the sentence the wider. The two are a heading and the content it introduces turned on
+   * its side, so the step between them is space.heading.content, the rule's measure for that.
+   */
+  :where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"][data-pile="words"] [data-media="none"] .dds-cardbody__content {
+    align-items: center;
+    column-gap: var(--space-heading-content);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
+  }
+}
+
+/*
+ * ── feature ──────────────────────────────────────────────────────────────────────────────────
+ *
+ * The picture reaches the card's edges and fills its slot, cropped to fill — the reference's hero
+ * image, which a card the width of the page holds as half of itself rather than as an inset
+ * thumbnail. Landscape under the words on a phone, aspect.landscape; from the fold the right half
+ * of the card, at least landscape tall and as tall as the words if they run longer.
+ */
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-stickycards__media {
+  aspect-ratio: var(--aspect-landscape);
+  display: grid;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-stickycards__image {
+  block-size: 100%;
+  inline-size: 100%;
+  inset: 0;
+  object-fit: cover;
+  position: absolute;
+}
+
+/*
+ * The title at the h3 step: a card the width of the page is a chapter rather than a tile, and the
+ * reference sets it there. CardBody draws its title at the card's h5; the block, which knows how
+ * big its cards are, is what can say so.
+ */
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-cardbody__title {
+  font-family: var(--font-h3-family);
+  font-size: var(--font-h3-size);
+  font-weight: var(--font-h3-weight);
+  letter-spacing: var(--font-h3-letter-spacing);
+  line-height: var(--font-h3-line-height);
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-stickycards__body {
+    align-items: stretch;
+    flex-direction: row;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-stickycards__body > :is(.dds-cardbody, .dds-stickycards__media) {
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+}
+
+/*
+ * ── the pile ─────────────────────────────────────────────────────────────────────────────────
+ *
+ * Each card's place sticks under the room a navigation bar takes — size.bar-height and the page's
+ * own gutter — and each a step of space.pile.peek lower than the one before, so the top edge of
+ * every covered card shows over the card laid on it. The step is the component's: only the last
+ * four cards are given one (`--dds-stickycards-depth`), so a long set never shows more than four
+ * edges. Later cards are later in the list, so they paint over the earlier ones with no stacking
+ * order of their own.
+ *
+ * Only for a reader who has not asked for less motion, and only in a window tall enough to hold a
+ * card under the bar — `40rem`, a laptop's short screen and a phone held upright, and not a phone
+ * held on its side. A card taller than the window it is pinned in would be covered before its foot
+ * was ever on screen, which is words a reader cannot reach. Everywhere else the cards are a plain
+ * column, each in full. Asked around the rule rather than undone after it, so no reset has to win.
+ *
+ * Sticky is decided by the nearest scroll container, which is why nothing between this section and
+ * the page may clip with `overflow: hidden`.
+ *
+ * While anything in a card has focus, that card comes to the top of the pile: a focused control
+ * under the next card is one the eye cannot find. Only what a page renders through `media` can take
+ * focus here.
+ *
+ * …and only while every card fits the window below the bar. The 40rem floor is a guess at a card's
+ * height, and a translation is what breaks it: German runs a third longer, and a card of it on an
+ * upright phone grew past the window and was covered before its foot was on screen. The component
+ * measures and marks the list `data-tall` when the tallest card would not fit, and the pile steps
+ * aside for a plain column — every card in full.
+ */
+@media (prefers-reduced-motion: no-preference) and (min-height: 40rem) {
+  :where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__list:not([data-tall]) > .dds-stickycards__item {
+    --dds-stickycards-top: calc(var(--size-bar-height) + var(--space-inset-page) + var(--dds-stickycards-head, var(--space-gap-none)));
+    inset-block-start: calc(var(--dds-stickycards-top) + var(--dds-stickycards-depth, 0) * var(--space-pile-peek));
+    position: sticky;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__list:not([data-tall]) > .dds-stickycards__item:focus-within {
+    z-index: 1;
+  }
+
+  /*
+   * The heading pins above the pile, so a reader halfway down the stack still knows what it is a
+   * stack of. It stops at the bar's foot, where the cards used to, and they now stop under it — at
+   * its measured height, which the component hands over as --dds-stickycards-head. It leaves with
+   * the last card, because a sticky box is held only inside its parent, and the inner box ends
+   * where the pile does.
+   *
+   * Only once that height is known (`data-head-pinned`), so no card can come to rest over the
+   * words, and never when the cards are a plain column (`data-tall`).
+   *
+   * And it leaves when the pile does. A sticky box is held until its margin box reaches the end of
+   * its parent, which is the list's foot — a whole card later than the pile lets go, so the cards
+   * scrolled up over a heading still pinned. The heading's margin reaches as far below it as the
+   * card on top does (--dds-stickycards-tail, measured), and the list comes back up by the same
+   * amount, so nothing moves on the page and the two let go together.
+   */
+  :where([data-dds-context="marketing"]) .dds-stickycards[data-head-pinned]:not(:has(.dds-stickycards__list[data-tall])) .dds-stickycards__header {
+    inset-block-start: calc(var(--size-bar-height) + var(--space-inset-page));
+    margin-block-end: var(--dds-stickycards-tail, var(--space-gap-none));
+    position: sticky;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stickycards[data-head-pinned]:not(:has(.dds-stickycards__list[data-tall])) .dds-stickycards__list {
+    margin-block-start: calc(-1 * var(--dds-stickycards-tail, var(--space-gap-none)));
+  }
+}
+
+/*
+ * The covered card draws back and darkens, scrubbed by the scroll.
+ *
+ * The reference measured, on every scroll, how far the next card had come over this one, and drew
+ * this one back by that fraction. Said as a range: every card's place names a view timeline
+ * (`--dds-stickycards-own`, unique per card and per section, set by the component and brought into
+ * scope on the list), and each card but the last runs down the *next* card's timeline. It starts
+ * when the next card's top reaches this card's foot — the window's height less this card's sticky
+ * top and the card's own height, which is `100%` of the timeline's `entry` range — and ends when the
+ * next card reaches its own sticky top. Every card is the same height, so the next card's height is
+ * this one's. `100cqh` is the window's height: with no ancestor declaring size containment a
+ * container query length falls back to the small viewport, LandingHero's and SceneScroll's reason
+ * for it over `vh`, and a frame that does declare one — the preview's — is measured instead.
+ *
+ * Over that stretch the card draws back to motion.scale.pile-covered from its top edge, and the
+ * scrim over it fades in from opacity.hidden to color.bg.overlay at full strength. Linear, because
+ * the scroll is the easing. Both hold once the next card lands, and run back as the reader scrolls
+ * up.
+ *
+ * Only where a scroll timeline exists, and only where the pile runs at all — the same two questions
+ * asked around the rules. Without a timeline the cards still pile, without drawing back; the scrim
+ * is not drawn, so no card is ever left dark.
+ *
+ * A card holding focus stands at full size with no scrim, at the top of the pile.
+ */
+@keyframes dds-stickycards-recede {
+  to {
+    scale: var(--motion-scale-pile-covered);
+  }
+}
+
+@keyframes dds-stickycards-darken {
+  from {
+    opacity: var(--opacity-hidden);
+  }
+}
+
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) and (min-height: 40rem) {
+    :where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__list:not([data-tall]) {
+      timeline-scope: var(--dds-stickycards-scope, none);
+    }
+
+    :where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__list:not([data-tall]) > .dds-stickycards__item {
+      --dds-stickycards-next-top: calc(var(--dds-stickycards-top) + var(--dds-stickycards-next-depth, 0) * var(--space-pile-peek));
+      view-timeline: var(--dds-stickycards-own, none) block;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__list:not([data-tall]) > .dds-stickycards__item:not(:last-child) {
+      animation: dds-stickycards-recede linear both;
+      animation-range:
+        entry calc(100cqh - 100% - var(--dds-stickycards-top) - var(--dds-stickycards-depth, 0) * var(--space-pile-peek))
+        cover calc(100cqh - var(--dds-stickycards-next-top));
+      animation-timeline: var(--dds-stickycards-next);
+      transform-origin: 50% 0;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__list:not([data-tall]) > .dds-stickycards__item:not(:last-child) > .dds-stickycards__scrim {
+      animation: dds-stickycards-darken linear both;
+      animation-range:
+        entry calc(100cqh - 100% - var(--dds-stickycards-top) - var(--dds-stickycards-depth, 0) * var(--space-pile-peek))
+        cover calc(100cqh - var(--dds-stickycards-next-top));
+      animation-timeline: var(--dds-stickycards-next);
+      display: block;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__list:not([data-tall]) > .dds-stickycards__item:focus-within {
+      animation: none;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__list:not([data-tall]) > .dds-stickycards__item:focus-within > .dds-stickycards__scrim {
+      animation: none;
+      display: none;
+    }
+  }
+}

package/dist/components/blocks/team-grid/TeamGrid.css

@@ -0,0 +1,159 @@
+/* GENERATED from teamgrid.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-teamgrid {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__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-teamgrid .dds-teamgrid__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-teamgrid .dds-teamgrid__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);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__description {
+  margin-block: 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);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__people {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__list {
+  display: grid;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+  column-gap: var(--space-grid-gutter);
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__item {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__media {
+  overflow: clip;
+  border-radius: var(--radius-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__text {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__name {
+  margin-block: 0;
+  font-family: var(--font-h5-family);
+  font-size: var(--font-h5-size);
+  font-weight: var(--font-h5-weight);
+  letter-spacing: var(--font-h5-letter-spacing);
+  line-height: var(--font-h5-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__role {
+  margin-block: 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-teamgrid .dds-teamgrid__profile {
+  align-items: center;
+  display: flex;
+  min-block-size: var(--size-target-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__actions {
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--space-actions-gap);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid[data-ground="page"] .dds-teamgrid__media {
+  background-color: var(--color-bg-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid[data-ground="page"] .dds-teamgrid__role {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid[data-ground="strong"] .dds-teamgrid__media {
+  background-color: var(--color-bg-subtle-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid[data-ground="strong"] .dds-teamgrid__role {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid[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-teamgrid[data-ground="subtle"] .dds-teamgrid__media {
+  background-color: var(--color-bg-surface-card-raised);
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid[data-ground="subtle"] .dds-teamgrid__role {
+  color: var(--color-fg-muted);
+}
+

package/dist/components/blocks/team-grid/TeamGrid.d.ts

@@ -0,0 +1,28 @@
+import './TeamGrid.css';
+import './team-grid-impl.css';
+import '../block-reveal.css';
+import { type TeamGridProps } from './TeamGrid.types.js';
+export type { TeamGridProps };
+/**
+ * A heading over a grid of people — the reference design's Leaders template, AvatarGrid in its
+ * source.
+ *
+ * Each person is a square photograph over their name, their role and, where they have one, a link
+ * to a profile of theirs elsewhere. The people are records rather than cards the page composes: a
+ * person here is words and a picture, and the grid is what decides how each one is drawn.
+ *
+ * The first `collapsedCount` show at once and the rest wait behind a button under the grid. One
+ * list rather than the reference's two grids, so a screen reader counts the whole set and the
+ * order is the same whether it is open or not; the people past the count are in the markup from
+ * the first render and `hidden` until asked for, which takes them out of the accessibility tree
+ * and the tab order as well as off the page. The reference marked its hidden half `aria-hidden`
+ * only, and left their links in the tab order behind a collapsed row.
+ *
+ * Pressing the button leaves focus on it. The people it shows sit straight before it in reading
+ * order, so they are the next thing a reader moving back meets, and the people it hides take any
+ * focus they could have held away with them — which they cannot be holding, the button having it.
+ *
+ * `'use client'` for the button's state, for the arrival, and for `useId`, which names the region
+ * by its heading and gives the button the list's id to control.
+ */
+export declare function TeamGrid({ ground, title, description, people, collapsedCount, expandLabel, collapseLabel, profileName, externalLabel, }: TeamGridProps): import("react").JSX.Element;

package/dist/components/blocks/team-grid/TeamGrid.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import './TeamGrid.css';
+import './team-grid-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { Button } from '../../core/button/Button.js';
+import { Link } from '../../core/link/Link.js';
+import { AspectRatio } from '../../layout/aspect-ratio/AspectRatio.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { teamGridDefaults, teamGridParts } from './TeamGrid.types.js';
+/**
+ * A profile link's accessible name when the page gives none: the visible word, then whose it is.
+ *
+ * The word first, because it is what a reader using speech sees and says — "click LinkedIn" has to
+ * match — and the name after it, because "LinkedIn" alone is the same on every card and a list of
+ * links heard out of context would be one word repeated.
+ */
+const profileNameOf = (person) => `${person.profile?.label ?? ''}, ${person.name}`;
+/**
+ * Where a person comes in the arrival, capped so a long set does not keep a reader waiting.
+ *
+ * The heading and the line under it take the first two steps; the people showing follow a step
+ * apart up to the fourth, and the button arrives a step after the last of them. FeatureCards' cap,
+ * for its reason: block-reveal.css keeps a block's trail inside its own movement.
+ */
+const FIRST_PERSON = 2;
+const LAST_STEP = FIRST_PERSON + 3;
+/**
+ * A heading over a grid of people — the reference design's Leaders template, AvatarGrid in its
+ * source.
+ *
+ * Each person is a square photograph over their name, their role and, where they have one, a link
+ * to a profile of theirs elsewhere. The people are records rather than cards the page composes: a
+ * person here is words and a picture, and the grid is what decides how each one is drawn.
+ *
+ * The first `collapsedCount` show at once and the rest wait behind a button under the grid. One
+ * list rather than the reference's two grids, so a screen reader counts the whole set and the
+ * order is the same whether it is open or not; the people past the count are in the markup from
+ * the first render and `hidden` until asked for, which takes them out of the accessibility tree
+ * and the tab order as well as off the page. The reference marked its hidden half `aria-hidden`
+ * only, and left their links in the tab order behind a collapsed row.
+ *
+ * Pressing the button leaves focus on it. The people it shows sit straight before it in reading
+ * order, so they are the next thing a reader moving back meets, and the people it hides take any
+ * focus they could have held away with them — which they cannot be holding, the button having it.
+ *
+ * `'use client'` for the button's state, for the arrival, and for `useId`, which names the region
+ * by its heading and gives the button the list's id to control.
+ */
+export function TeamGrid({ ground = teamGridDefaults.ground, title, description, people, collapsedCount = teamGridDefaults.collapsedCount, expandLabel = teamGridDefaults.expandLabel, collapseLabel = teamGridDefaults.collapseLabel, profileName = profileNameOf, externalLabel = teamGridDefaults.externalLabel, }) {
+    const titleId = useId();
+    const listId = useId();
+    const [band, revealed] = useReveal();
+    const [expanded, setExpanded] = useState(false);
+    // A count below one would hide everyone behind the button; a fraction is not a number of people.
+    const shown = Math.max(1, Math.floor(collapsedCount));
+    const longer = people.length > shown;
+    const inverse = ground === 'strong';
+    return (_jsx("section", { className: teamGridParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: teamGridParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: teamGridParts.header, children: [_jsx("h2", { className: teamGridParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: teamGridParts.description, ...arriving(1), children: description })) : null] }), _jsxs("div", { className: teamGridParts.people, children: [_jsx("ul", { className: teamGridParts.list, id: listId, children: people.map((person, at) => {
+                                const extra = at >= shown;
+                                /* A person showing from the start arrives with the block. One past the count arrives
+                                   when the button shows them, by the stylesheet's own animation, a step behind the
+                                   one before — so it carries its place among the extras rather than the block's. */
+                                const motion = extra
+                                    ? {
+                                        'data-extra': '',
+                                        style: { '--dds-teamgrid-extra-at': at - shown },
+                                    }
+                                    : arriving(Math.min(FIRST_PERSON + at, LAST_STEP));
+                                return (_jsxs("li", { className: teamGridParts.item, hidden: extra && !expanded, ...motion, children: [_jsx("div", { className: teamGridParts.media, children: _jsx(AspectRatio, { ratio: "square", children: _jsx("img", { src: person.image.src, alt: person.image.alt, loading: "lazy", decoding: "async" }) }) }), _jsxs("div", { className: teamGridParts.text, children: [_jsx("h3", { className: teamGridParts.name, children: person.name }), _jsx("p", { className: teamGridParts.role, children: person.role }), person.profile !== undefined ? (_jsx("div", { className: teamGridParts.profile, children: _jsx(Link, { href: person.profile.href, external: true, tone: inverse ? 'inherit' : 'brand', "aria-label": `${profileName(person)} ${externalLabel}`, children: person.profile.label }) })) : null] })] }, `${person.name}-${at}`));
+                            }) }), longer ? (_jsx("div", { className: teamGridParts.actions, ...arriving(Math.min(FIRST_PERSON + shown, LAST_STEP + 1)), children: _jsx(Button, { variant: "secondary", size: "md", tone: inverse ? 'inverse' : 'default', "aria-expanded": expanded, "aria-controls": listId, onClick: () => setExpanded((open) => !open), children: expanded ? collapseLabel : expandLabel }) })) : null] })] }) }));
+}