rift-ds 1.0.0

package/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Button } from "../Button/Button.js";
+import "./ButtonGroup.css";
+const ButtonGroup = ({
+  orientation = "horizontal",
+  buttons,
+  ariaLabel,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `ds-button-group ds-button-group--${orientation} ${className}`,
+      role: "group",
+      "aria-label": ariaLabel,
+      children: buttons.map((button, index) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...button,
+          variant: button.variant ?? button.priority ?? "tertiary"
+        },
+        index
+      ))
+    }
+  );
+};
+export {
+  ButtonGroup
+};

package/components/Card/Card.css

@@ -0,0 +1,190 @@
+/* ============================================
+   CARD COMPONENT
+   Content card with preview area and title
+   ============================================ */
+
+.ds-card {
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-400); /* 12px */
+
+  /* Sizing */
+  flex: 1 1 0;
+  min-width: 250px;
+  height: 268px;
+
+  /* Appearance */
+  background: var(--color-bg-container-primary-semi);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600); /* 24px */
+  padding: var(--padding-500); /* 20px */
+  overflow: hidden;
+  color: inherit;
+  text-decoration: none;
+
+  /* Interaction */
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard), box-shadow var(--motion-duration-slow) var(--motion-ease-standard);
+  /* ds-allow(color): transparent resting state of the sanctioned Card
+     hover-lift shadow (see design.md — Do's and Don'ts). */
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+
+.ds-card--interactive {
+  cursor: pointer;
+}
+
+.ds-card--interactive:hover {
+  transform: translateY(-4px);
+  /* ds-allow(color): the sanctioned Card hover-lift shadow — deliberately
+     heavier than --shadow-floating (see design.md — Do's and Don'ts). */
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+/* ============================================
+   PREVIEW AREA
+   ============================================ */
+
+.ds-card__preview {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 184px;
+  min-height: 0;
+}
+
+/* ============================================
+   TITLE
+   ============================================ */
+
+.ds-card__title {
+  font-family: var(--font-paragraph-family);
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
+  color: var(--color-text-primary);
+  width: 100%;
+  text-align: center;
+}
+
+/* ============================================
+   CASE-STUDY VARIANT
+   ============================================ */
+
+.ds-card--case-study {
+  height: auto;
+  min-width: 0;
+  /* The cover is inset, not full-bleed: 12px of card around a 12px-radius
+     cover keeps the corners concentric with the card's 24px shell. */
+  padding: var(--padding-300);
+  gap: 0;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.ds-card--case-study:hover {
+  transform: translateY(-4px);
+  /* ds-allow(color): same sanctioned hover-lift shadow as the interactive
+     variant. */
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.ds-card--case-study--placeholder {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.ds-card--case-study--placeholder:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+.ds-card--case-study__cover-wrap {
+  width: 100%;
+  aspect-ratio: 940 / 480;
+  overflow: hidden;
+  border-radius: var(--radius-300);
+  background: var(--color-bg-container-secondary);
+}
+
+/* A drawn cover (the `cover` prop) fills the same slot the image would, so a
+   grid of cards keeps one cover shape whichever kind it was given. */
+.ds-card--case-study__cover-slot,
+.ds-card--case-study__cover-slot > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.ds-card--case-study__cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.ds-card--case-study__cover-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-container-secondary);
+}
+
+.ds-card--case-study__cover-placeholder-logo {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  opacity: 0.6;
+}
+
+.ds-card--case-study__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200);
+  /* 8px on top of the card's 12px inset: text lands 20px from the card edge
+     (the old full-bleed body padding) and sits slightly inside the cover. */
+  padding: var(--padding-400) var(--padding-200) var(--padding-300);
+}
+
+.ds-card--case-study__eyebrow {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+}
+
+.ds-card--case-study__company-logo {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.ds-card--case-study__company-name {
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+}
+
+.ds-card--case-study__title {
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
+  color: var(--color-text-primary);
+  margin: 0;
+  text-align: left;
+}
+
+.ds-card--case-study__dek {
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+}

package/components/Card/Card.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+/** Props owned by Card itself — everything else falls through to the DOM node. */
+type CardOwnProps = {
+    /** Card variant */
+    variant?: 'default' | 'case-study';
+    /**
+     * Card title displayed below the preview.
+     * Note: this shadows the native `title` tooltip attribute, which Card does not expose.
+     */
+    title: string;
+    /** Preview content rendered inside the card (default variant only) */
+    children?: React.ReactNode;
+    /** Whether the card is interactive (hoverable) */
+    interactive?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Navigation href — renders the card as an <a> tag */
+    href?: string;
+    /** Cover image src */
+    coverSrc?: string;
+    /**
+     * Cover content rendered in place of the image — for a cover that is drawn
+     * rather than photographed (an SVG, a chart, a live preview). Takes
+     * precedence over `coverSrc`, and fills the same fixed-ratio slot.
+     */
+    cover?: React.ReactNode;
+    /** Cover image alt text */
+    coverAlt?: string;
+    /** Path to the company logo shown in the eyebrow */
+    companyLogo?: string;
+    /** Company name shown in the eyebrow */
+    companyName?: string;
+    /** Subtitle / dek line below the title */
+    dek?: string;
+    /** Render as a disabled placeholder (no href, dimmed, not interactive) */
+    placeholder?: boolean;
+};
+export interface CardProps extends CardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CardOwnProps> {
+}
+/**
+ * Card renders a preview tile, or a case-study tile when `variant="case-study"`.
+ *
+ * Renders a `<div>`, or an `<a>` in the case-study variant when `href` is
+ * supplied. Forwards a ref to whichever element it renders and spreads
+ * unrecognised props onto it.
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+export {};

package/components/Card/Card.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./Card.css";
+import "../../fonts/material-symbols.css";
+const Card = React.forwardRef(
+  ({
+    variant = "default",
+    title,
+    children,
+    interactive = false,
+    onClick,
+    onKeyDown,
+    className = "",
+    href,
+    coverSrc,
+    cover,
+    coverAlt,
+    companyLogo,
+    companyName,
+    dek,
+    placeholder = false,
+    ...rest
+  }, ref) => {
+    if (variant === "case-study") {
+      const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-card--case-study__cover-wrap", children: cover ? /* @__PURE__ */ jsx("div", { className: "ds-card--case-study__cover-slot", children: cover }) : coverSrc ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: coverSrc,
+            alt: coverAlt ?? `${title} cover`,
+            className: "ds-card--case-study__cover-image"
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "ds-card--case-study__cover-placeholder", children: companyLogo && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: companyLogo,
+            alt: "",
+            className: "ds-card--case-study__cover-placeholder-logo"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-card--case-study__body", children: [
+          (companyLogo || companyName) && /* @__PURE__ */ jsxs("div", { className: "ds-card--case-study__eyebrow", children: [
+            companyLogo && /* @__PURE__ */ jsx("img", { src: companyLogo, alt: "", className: "ds-card--case-study__company-logo" }),
+            companyName && /* @__PURE__ */ jsx("span", { className: "ds-card--case-study__company-name", children: companyName })
+          ] }),
+          /* @__PURE__ */ jsx("h3", { className: "ds-card--case-study__title", children: title }),
+          dek && /* @__PURE__ */ jsx("p", { className: "ds-card--case-study__dek", children: dek })
+        ] })
+      ] });
+      const classes2 = [
+        "ds-card",
+        "ds-card--case-study",
+        placeholder ? "ds-card--case-study--placeholder" : "",
+        className
+      ].filter(Boolean).join(" ");
+      if (placeholder || !href) {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...rest,
+            ref,
+            className: classes2,
+            "aria-disabled": "true",
+            children: inner
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ...rest,
+          ref,
+          href,
+          className: classes2,
+          onClick,
+          children: inner
+        }
+      );
+    }
+    const baseClass = "ds-card";
+    const classes = [baseClass, interactive ? `${baseClass}--interactive` : "", className].filter(Boolean).join(" ");
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (!interactive) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick?.(e);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        onClick: interactive ? onClick : void 0,
+        onKeyDown: handleKeyDown,
+        role: interactive ? "button" : void 0,
+        tabIndex: interactive ? 0 : void 0,
+        "aria-label": interactive ? title : void 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__preview`, children }),
+          /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title })
+        ]
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+export {
+  Card
+};

package/components/CardStack/CardStack.css

@@ -0,0 +1,106 @@
+/* ============================================
+   CARD STACK COMPONENT
+   A deck showing one card, the rest peeking out
+   beneath. Forward flips lift the top card away;
+   backward flips drop it in from above. Depth
+   offsets are percentages of the card itself, so
+   the choreography scales with whatever card the
+   deck holds.
+   ============================================ */
+
+/* Base */
+
+.ds-card-stack {
+  /* How far each buried card peeks out below the one above it. */
+  --ds-card-stack-peek: var(--gap-400);
+
+  position: relative;
+  display: grid;
+  border-radius: var(--radius-600);
+  padding-bottom: calc(var(--ds-card-stack-peek) * var(--ds-card-stack-depth, 0));
+  outline: none;
+}
+
+.ds-card-stack:focus-visible {
+  outline: var(--border-050) solid var(--color-action-primary-bg);
+  outline-offset: var(--padding-100);
+}
+
+/* Items — every card occupies the same cell; position is one transform. */
+
+.ds-card-stack__item {
+  grid-area: 1 / 1;
+  /* An opaque page-colour backing behind each card: the system's cards sit on
+     translucent surfaces, and without this the buried cards read through the
+     top one. Rounded to Card's radius; a deck of differently shaped cards
+     repoints --ds-card-stack-card-radius. */
+  background: var(--color-bg-page-primary);
+  border-radius: var(--ds-card-stack-card-radius, var(--radius-600));
+  transform-origin: 50% 100%;
+  transform: translateY(calc(var(--ds-card-stack-peek) * var(--ds-card-stack-pos, 0)))
+    scale(calc(1 - 0.04 * var(--ds-card-stack-pos, 0)));
+  transition:
+    transform var(--motion-duration-deliberate) var(--motion-ease-emphasized),
+    opacity var(--motion-duration-deliberate) var(--motion-ease-emphasized);
+}
+
+/* Deeper than the visible peek: parked at the last slot, faded out. */
+.ds-card-stack__item--buried {
+  opacity: 0;
+  transform: translateY(calc(var(--ds-card-stack-peek) * var(--ds-card-stack-depth, 0)))
+    scale(calc(1 - 0.04 * var(--ds-card-stack-depth, 0)));
+}
+
+/* Flipped away with loop off: lifted out of view, above the deck. */
+.ds-card-stack__item--gone {
+  opacity: 0;
+  transform: translateY(-12%) scale(0.98);
+}
+
+/* Flip choreography — the lift is a fraction of the card's own height. */
+
+.ds-card-stack__item--leaving {
+  animation: ds-card-stack-leave var(--motion-duration-deliberate) var(--motion-ease-emphasized)
+    both;
+}
+
+.ds-card-stack__item--entering {
+  animation: ds-card-stack-enter var(--motion-duration-deliberate) var(--motion-ease-entrance)
+    both;
+}
+
+@keyframes ds-card-stack-leave {
+  from {
+    transform: translateY(0) rotate(0deg) scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-18%) rotate(-3deg) scale(0.98);
+    opacity: 0;
+  }
+}
+
+@keyframes ds-card-stack-enter {
+  from {
+    transform: translateY(-18%) rotate(-3deg) scale(0.98);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) rotate(0deg) scale(1);
+    opacity: 1;
+  }
+}
+
+/* Screen-reader announcement of the deck position. */
+
+.ds-card-stack__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/components/CardStack/CardStack.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+/** Props owned by CardStack itself — everything else falls through to the root `<div>`. */
+type CardStackOwnProps = {
+    /** The cards, in order. The first child starts on top. */
+    children?: React.ReactNode;
+    /**
+     * Controlled top card, as an index into `children`. Pair with
+     * `onIndexChange`. Omit to let the stack own its position.
+     */
+    index?: number;
+    /** Initial top card when uncontrolled. */
+    defaultIndex?: number;
+    /** Fires when the top card changes, with the new index. */
+    onIndexChange?: (index: number) => void;
+    /** How many card edges peek out behind the top card. */
+    peek?: number;
+    /** Wrap from the last card back to the first. Off, the stack stops at both ends. */
+    loop?: boolean;
+    /**
+     * Clicking the top card flips to the next. Clicks that land on a link or
+     * control inside the card are left alone, so a card can still carry its
+     * own actions.
+     */
+    advanceOnClick?: boolean;
+    /** Accessible name for the stack, e.g. "Open roles". */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface CardStackProps extends CardStackOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CardStackOwnProps> {
+}
+/**
+ * CardStack — a deck of cards showing one at a time, the rest peeking out
+ * beneath it. Flipping forward lifts the top card up and away while the next
+ * one rises into place; flipping back drops the previous card in from above.
+ * The stack is the pattern, not the cards: any children work, Card and
+ * EntityCard are the intended fillings, and every card should share one size
+ * so the deck keeps its shape.
+ *
+ * Flip by clicking the top card, or with the arrow keys when the stack has
+ * focus. Cards behind the top one are inert until their turn.
+ */
+export declare const CardStack: React.ForwardRefExoticComponent<CardStackProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/CardStack/CardStack.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback } from "react";
+import "./CardStack.css";
+const INTERACTIVE_SELECTOR = 'a, button, input, select, textarea, summary, [role="button"], [role="link"], [tabindex]';
+const NEXT_KEYS = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown", " ", "Enter"]);
+const PREV_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+const CardStack = React.forwardRef(
+  ({
+    children,
+    index: indexProp,
+    defaultIndex = 0,
+    onIndexChange,
+    peek = 2,
+    loop = true,
+    advanceOnClick = true,
+    label,
+    className = "",
+    onClick,
+    onKeyDown,
+    style,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-card-stack";
+    const items = React.Children.toArray(children);
+    const count = items.length;
+    const isControlled = indexProp !== void 0;
+    const [innerIndex, setInnerIndex] = useState(defaultIndex);
+    const index = Math.max(0, Math.min(isControlled ? indexProp : innerIndex, count - 1));
+    const [leaving, setLeaving] = useState(false);
+    const [entering, setEntering] = useState(false);
+    const pendingRef = useRef(null);
+    const commit = useCallback(
+      (next2) => {
+        const normalized = (next2 % count + count) % count;
+        if (!isControlled) setInnerIndex(normalized);
+        onIndexChange?.(normalized);
+      },
+      [count, isControlled, onIndexChange]
+    );
+    const next = useCallback(() => {
+      if (count < 2 || leaving || entering) return;
+      if (!loop && index >= count - 1) return;
+      pendingRef.current = index + 1;
+      setLeaving(true);
+    }, [count, leaving, entering, loop, index]);
+    const prev = useCallback(() => {
+      if (count < 2 || leaving || entering) return;
+      if (!loop && index <= 0) return;
+      commit(index - 1);
+      setEntering(true);
+    }, [count, leaving, entering, loop, index, commit]);
+    const handleTopAnimationEnd = (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (leaving) {
+        setLeaving(false);
+        if (pendingRef.current !== null) commit(pendingRef.current);
+        pendingRef.current = null;
+      }
+      if (entering) setEntering(false);
+    };
+    const handleClick = (e) => {
+      onClick?.(e);
+      if (!advanceOnClick || e.defaultPrevented) return;
+      const target = e.target;
+      const control = target.closest(INTERACTIVE_SELECTOR);
+      if (control && control !== e.currentTarget) return;
+      next();
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented || e.target !== e.currentTarget) return;
+      if (NEXT_KEYS.has(e.key)) {
+        e.preventDefault();
+        next();
+      } else if (PREV_KEYS.has(e.key)) {
+        e.preventDefault();
+        prev();
+      }
+    };
+    const visiblePeek = Math.max(0, Math.min(peek, count - 1));
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        role: "group",
+        "aria-roledescription": "card stack",
+        "aria-label": label,
+        tabIndex: count > 1 ? 0 : void 0,
+        style: { ...style, "--ds-card-stack-depth": visiblePeek },
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: [
+          items.map((child, k) => {
+            const raw = k - index;
+            const pos = loop ? (raw % count + count) % count : raw;
+            const gone = pos < 0;
+            const buried = pos > visiblePeek;
+            const isTop = pos === 0;
+            const itemClasses = [
+              `${baseClass}__item`,
+              gone ? `${baseClass}__item--gone` : "",
+              buried ? `${baseClass}__item--buried` : "",
+              isTop && leaving ? `${baseClass}__item--leaving` : "",
+              isTop && entering ? `${baseClass}__item--entering` : ""
+            ].filter(Boolean).join(" ");
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: itemClasses,
+                style: {
+                  "--ds-card-stack-pos": gone ? 0 : Math.min(pos, visiblePeek),
+                  zIndex: count - pos
+                },
+                inert: !isTop || void 0,
+                "aria-hidden": !isTop || void 0,
+                onAnimationEnd: isTop ? handleTopAnimationEnd : void 0,
+                children: child
+              },
+              k
+            );
+          }),
+          count > 1 && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__sr-only`, role: "status", children: [
+            "Card ",
+            index + 1,
+            " of ",
+            count
+          ] })
+        ]
+      }
+    );
+  }
+);
+CardStack.displayName = "CardStack";
+export {
+  CardStack
+};