@tempoxyz/ds 0.2.6 → 0.3.1

package/src/web/components/AgentLogo.tsx

@@ -0,0 +1,330 @@
+import { type ComponentPropsWithRef, type ReactNode, useId } from 'react'
+import type * as zyzz from 'zyzz'
+import { variants } from '../zyzz.config.js'
+
+// The Agent Logo marks from the TDPS page of Web-Wallet, with each clip and gradient ID suffixed
+// per instance. A brand tile fills with the agent's color and draws its white mark in
+// `currentColor`. An outlined tile draws the mark in its own colors, or in `currentColor` for a
+// black mark.
+const agents = {
+  amp: {
+    frame: 'outlined',
+    mark: (id) => (
+      <>
+        <g clipPath={`url(#clip0_670_2873-${id})`}>
+          <path
+            d="M9.42887 14.4874L7.51824 14.9999L6.20762 10.1105L2.62137 13.6968L1.21449 12.2899L4.78824 8.71554L-0.0673828 7.41429L0.445117 5.50366L7.50387 7.42866L9.42887 14.4874Z"
+            fill="#F34E3F"
+          />
+          <path
+            d="M12.1909 11.7262L10.2803 12.2387L8.67781 6.25556L2.69531 4.65306L3.20719 2.74243L10.2666 4.66681L12.1916 11.7262H12.1909Z"
+            fill="#F34E3F"
+          />
+          <path
+            d="M14.9331 8.98375L13.0225 9.49625L11.4194 3.51375L5.4375 1.91062L5.95 0L13.0094 1.925L14.9331 8.98375Z"
+            fill="#F34E3F"
+          />
+        </g>
+        <defs>
+          <clipPath id={`clip0_670_2873-${id}`}>
+            <rect fill="white" height="15" width="15" />
+          </clipPath>
+        </defs>
+      </>
+    ),
+    viewBox: '0 0 15 15',
+  },
+  claude: {
+    frame: 'brand',
+    mark: () => (
+      <path
+        d="M3.45602 8.92288L5.75096 7.6361L5.78936 7.52395L5.75096 7.46197H5.63872L5.25476 7.43836L3.94336 7.40294L2.80623 7.35572L1.70455 7.29669L1.42691 7.23767L1.16699 6.89531L1.19357 6.72413L1.42691 6.56771L1.76066 6.59722L2.49906 6.6474L3.60665 6.72413L4.41003 6.77135L5.60033 6.89531H5.78936L5.81594 6.81857L5.75096 6.77135L5.70075 6.72413L4.55476 5.94793L3.31425 5.12745L2.66446 4.65524L2.31298 4.41618L2.13577 4.19188L2.05898 3.70195L2.37796 3.35074L2.80623 3.38026L2.91552 3.40977L3.34969 3.74327L4.27712 4.46045L5.48809 5.35176L5.6653 5.49932L5.73619 5.44915L5.74505 5.41373L5.6653 5.28092L5.00665 4.09153L4.3037 2.88148L3.99062 2.37975L3.90792 2.07871C3.87838 1.95476 3.85771 1.85146 3.85771 1.72455L4.221 1.23168L4.42184 1.16675L4.90623 1.23168L5.11003 1.40876L5.4113 2.09642L5.89864 3.17957L6.65476 4.65229L6.87628 5.08909L6.99442 5.49342L7.03872 5.61738H7.11552V5.54654L7.17754 4.71722L7.29273 3.699L7.40497 2.3886L7.44336 2.01969L7.62649 1.57699L7.98978 1.33793L8.27332 1.47369L8.50666 1.80719L8.47417 2.02264L8.33535 2.9228L8.06362 4.33354L7.8864 5.27797H7.98978L8.10792 5.15992L8.5864 4.52538L9.38978 3.52192L9.74421 3.12349L10.1577 2.68374L10.4235 2.47419H10.9256L11.2948 3.02314L11.1294 3.5898L10.6126 4.245L10.1843 4.79985L9.56995 5.62623L9.18598 6.28733L9.22142 6.34046L9.31298 6.3316L10.7012 6.03647L11.4514 5.90071L12.3463 5.74724L12.751 5.93612L12.7953 6.12796L12.6358 6.52049L11.6788 6.7566L10.5564 6.9809L8.88471 7.37638L8.86404 7.39113L8.88767 7.42065L9.64083 7.49148L9.96277 7.50919H10.7514L12.2193 7.61839L12.6033 7.8722L12.8337 8.1821L12.7953 8.4182L12.2045 8.71924L11.4071 8.53035L9.54632 8.08765L8.90834 7.92828H8.81974V7.9814L9.35138 8.50084L10.3261 9.38034L11.5459 10.5137L11.6079 10.794L11.4514 11.0154L11.286 10.9918L10.2138 10.1861L9.80033 9.82304L8.86404 9.03503H8.80201V9.11767L9.01763 9.43347L10.1577 11.1452L10.2168 11.6706L10.1341 11.8418L9.83872 11.9451L9.51383 11.886L8.84632 10.9505L8.15813 9.89683L7.60286 8.9524L7.53493 8.99076L7.20708 12.5176L7.05349 12.6977L6.69906 12.8334L6.4037 12.6091L6.24716 12.2461L6.4037 11.5289L6.59273 10.5933L6.74632 9.84961L6.88514 8.92584L6.96784 8.6189L6.96193 8.59824L6.894 8.60709L6.19695 9.56333L5.13661 10.9947L4.29779 11.8919L4.09695 11.9716L3.74843 11.7916L3.78092 11.4699L3.97585 11.1836L5.13661 9.70794L5.83661 8.79302L6.28851 8.26473L6.28556 8.188H6.25898L3.17543 10.189L2.62606 10.2598L2.38978 10.0385L2.41931 9.67548L2.53155 9.55742L3.45898 8.91993L3.45602 8.92288Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: '0 0 14 14',
+  },
+  cli: {
+    frame: 'brand',
+    mark: () => (
+      <>
+        <path
+          d="M2.1875 2.77083C2.1875 2.44867 2.44867 2.1875 2.77083 2.1875H11.2292C11.5513 2.1875 11.8125 2.44867 11.8125 2.77083V11.2292C11.8125 11.5513 11.5513 11.8125 11.2292 11.8125H2.77083C2.44867 11.8125 2.1875 11.5513 2.1875 11.2292V2.77083Z"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="0.875"
+        />
+        <path
+          d="M4.22949 4.52075L5.25033 5.54159L4.22949 6.56242"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="0.875"
+        />
+      </>
+    ),
+    viewBox: '0 0 14 14',
+  },
+  codex: {
+    frame: 'codex',
+    mark: (id) => (
+      <>
+        <path
+          d="M7.17552 2.64735C7.74755 2.412 8.3703 2.32697 8.98448 2.40035C9.77615 2.49139 10.4815 2.82785 11.1006 3.40973C11.1085 3.41764 11.1196 3.42319 11.1299 3.42635C11.1411 3.4291 11.1528 3.4291 11.1639 3.42635C11.9688 3.21851 12.8207 3.29542 13.5754 3.64406L13.6126 3.66148L13.7044 3.7066C14.4943 4.10696 15.1104 4.78249 15.4366 5.60581C15.602 6.00956 15.6844 6.42994 15.6859 6.86852C15.6978 7.1947 15.6621 7.52087 15.5799 7.83673C15.5758 7.85267 15.5759 7.86939 15.58 7.88531C15.5842 7.90123 15.5923 7.91584 15.6036 7.92777C16.0739 8.40831 16.3858 8.98069 16.5401 9.64569C16.7689 10.7738 16.5346 11.7911 15.8379 12.6968L15.7303 12.8282C15.2689 13.3563 14.6633 13.7383 13.9878 13.927C13.9732 13.9313 13.9597 13.939 13.9486 13.9495C13.9374 13.9599 13.9289 13.9728 13.9237 13.9872C13.7725 14.4234 13.6205 14.7971 13.3379 15.1699C12.6254 16.1096 11.5788 16.6314 10.4 16.625C9.46027 16.6203 8.62744 16.2767 7.90069 15.5943C7.88975 15.584 7.87629 15.5769 7.86169 15.5735C7.84709 15.5702 7.83186 15.5708 7.81756 15.5753C7.5104 15.6742 7.20006 15.6885 6.8644 15.6845C6.32976 15.6802 5.80314 15.5541 5.3246 15.3156C4.82334 15.0672 4.38692 14.7053 4.05002 14.2587C3.92969 14.0988 3.81015 13.9484 3.72227 13.7703C3.60231 13.5258 3.50428 13.2712 3.42935 13.0095C3.27118 12.4138 3.26737 11.7877 3.41827 11.1902C3.42323 11.176 3.42486 11.1608 3.42302 11.1459C3.42031 11.1312 3.41279 11.1178 3.40165 11.1079C3.03595 10.7377 2.75644 10.2914 2.58306 9.80085C2.46776 9.49866 2.4007 9.18021 2.38435 8.85719C2.35559 8.43173 2.39325 8.00439 2.49598 7.59052C2.76277 6.71019 3.2734 6.01906 4.02627 5.51794C4.1941 5.40631 4.35323 5.31923 4.50206 5.25669C4.67227 5.18623 4.84248 5.12685 5.01348 5.07698C5.0257 5.07319 5.03679 5.06643 5.04577 5.05732C5.05475 5.0482 5.06133 5.037 5.06494 5.02473C5.19478 4.55847 5.41807 4.12348 5.72123 3.74619C6.10339 3.2609 6.6043 2.88243 7.17552 2.64735ZM9.9321 11.0113C9.80345 11.0185 9.68244 11.0747 9.59391 11.1684C9.50539 11.262 9.45606 11.386 9.45606 11.5148C9.45606 11.6437 9.50539 11.7676 9.59391 11.8613C9.68244 11.9549 9.80345 12.0111 9.9321 12.0183H12.8106C12.8791 12.0222 12.9477 12.012 13.0121 11.9884C13.0765 11.9648 13.1355 11.9284 13.1853 11.8812C13.2352 11.8341 13.2749 11.7773 13.302 11.7143C13.3291 11.6513 13.3431 11.5834 13.3431 11.5148C13.3431 11.4462 13.3291 11.3783 13.302 11.3153C13.2749 11.2523 13.2352 11.1955 13.1853 11.1484C13.1355 11.1012 13.0765 11.0648 13.0121 11.0412C12.9477 11.0176 12.8791 11.0075 12.8106 11.0113H9.9321ZM6.69894 7.3071C6.63043 7.19552 6.5212 7.11495 6.39436 7.08245C6.26752 7.04995 6.13301 7.06806 6.01928 7.13294C5.90555 7.19783 5.82152 7.30441 5.78495 7.43014C5.74839 7.55586 5.76216 7.69089 5.82335 7.80664L6.83035 9.56731L5.8281 11.2583C5.79437 11.3152 5.77217 11.3782 5.76279 11.4437C5.7534 11.5092 5.75701 11.5759 5.7734 11.64C5.7898 11.7041 5.81865 11.7644 5.85833 11.8173C5.89801 11.8703 5.94773 11.9149 6.00465 11.9486C6.06157 11.9824 6.12457 12.0046 6.19007 12.014C6.25557 12.0233 6.32227 12.0197 6.38637 12.0033C6.45048 11.987 6.51073 11.9581 6.56368 11.9184C6.61663 11.8787 6.66124 11.829 6.69498 11.7721L7.84606 9.82856C7.89145 9.75199 7.91572 9.66476 7.91642 9.57576C7.91711 9.48676 7.8942 9.39916 7.85002 9.32189L6.69894 7.3071Z"
+          fill={`url(#paint0_linear_670_2842-${id})`}
+        />
+        <defs>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id={`paint0_linear_670_2842-${id}`}
+            x1="9.49985"
+            x2="9.49985"
+            y1="2.37502"
+            y2="16.625"
+          >
+            <stop stopColor="#B1A7FF" />
+            <stop offset="0.5" stopColor="#7A9DFF" />
+            <stop offset="1" stopColor="#3941FF" />
+          </linearGradient>
+        </defs>
+      </>
+    ),
+    viewBox: '0 0 19 19',
+  },
+  cursor: {
+    frame: 'brand',
+    mark: () => (
+      <path
+        d="M12.16 3.77448L7.25599 0.943203C7.09852 0.852266 6.90421 0.852266 6.74674 0.943203L1.84301 3.77448C1.71064 3.85091 1.62891 3.99225 1.62891 4.14536V9.85465C1.62891 10.0075 1.71064 10.1491 1.84301 10.2255L6.74697 13.0568C6.90445 13.1477 7.09876 13.1477 7.25623 13.0568L12.1602 10.2255C12.2926 10.1491 12.3743 10.0077 12.3743 9.85465V4.14536C12.3743 3.99249 12.2926 3.85091 12.1602 3.77448H12.16ZM11.8519 4.3742L7.11786 12.5738C7.08586 12.6291 7.00138 12.6065 7.00138 12.5425V7.17347C7.00138 7.06619 6.94404 6.96695 6.85103 6.91308L2.20147 4.2287C2.14622 4.19671 2.16878 4.1122 2.23278 4.1122H11.7009C11.8354 4.1122 11.9194 4.25794 11.8521 4.37444H11.8519V4.3742Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: '0 0 14 14',
+  },
+  gemini: {
+    frame: 'outlined',
+    mark: (id) => {
+      const d =
+        'M12.8851 6.77177C11.8469 6.32977 10.9028 5.6931 10.1039 4.89614C8.99131 3.78135 8.19757 2.38895 7.80514 0.863643C7.78792 0.795897 7.74861 0.735822 7.69343 0.692913C7.63825 0.650005 7.57035 0.626709 7.50045 0.626709C7.43055 0.626709 7.36264 0.650005 7.30746 0.692913C7.25228 0.735822 7.21298 0.795897 7.19576 0.863643C6.80249 2.38876 6.00862 3.78099 4.89639 4.89614C4.09741 5.69301 3.15335 6.32966 2.11514 6.77177C1.70889 6.94677 1.29139 7.08739 0.863886 7.19552C0.795725 7.21227 0.735148 7.25138 0.691842 7.30662C0.648535 7.36186 0.625 7.43002 0.625 7.50021C0.625 7.57039 0.648535 7.63856 0.691842 7.69379C0.735148 7.74903 0.795725 7.78815 0.863886 7.80489C1.29139 7.91239 1.70764 8.05302 2.11514 8.22802C3.15341 8.67002 4.09749 9.30668 4.89639 10.1036C6.00926 11.2186 6.80322 12.6112 7.19576 14.1368C7.21251 14.2049 7.25163 14.2655 7.30686 14.3088C7.3621 14.3521 7.43026 14.3757 7.50045 14.3757C7.57064 14.3757 7.6388 14.3521 7.69403 14.3088C7.74927 14.2655 7.78839 14.2049 7.80514 14.1368C7.91264 13.7086 8.05326 13.2924 8.22826 12.8849C8.67024 11.8466 9.3069 10.9025 10.1039 10.1036C11.2189 8.99102 12.6115 8.19728 14.137 7.80489C14.2048 7.78767 14.2648 7.74837 14.3077 7.69319C14.3506 7.63801 14.3739 7.5701 14.3739 7.50021C14.3739 7.43031 14.3506 7.3624 14.3077 7.30722C14.2648 7.25204 14.2048 7.21274 14.137 7.19552C13.7091 7.08786 13.2905 6.94616 12.8851 6.77177Z'
+
+      return (
+        <>
+          <path d={d} fill="#3186FF" />
+          <path d={d} fill={`url(#paint0_linear_670_2851-${id})`} />
+          <path d={d} fill={`url(#paint1_linear_670_2851-${id})`} />
+          <path d={d} fill={`url(#paint2_linear_670_2851-${id})`} />
+          <defs>
+            <linearGradient
+              gradientUnits="userSpaceOnUse"
+              id={`paint0_linear_670_2851-${id}`}
+              x1="4.37514"
+              x2="6.87514"
+              y1="9.68739"
+              y2="7.49989"
+            >
+              <stop stopColor="#08B962" />
+              <stop offset="1" stopColor="#08B962" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              gradientUnits="userSpaceOnUse"
+              id={`paint1_linear_670_2851-${id}`}
+              x1="5.00014"
+              x2="7.18764"
+              y1="3.43739"
+              y2="6.87489"
+            >
+              <stop stopColor="#F94543" />
+              <stop offset="1" stopColor="#F94543" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              gradientUnits="userSpaceOnUse"
+              id={`paint2_linear_670_2851-${id}`}
+              x1="2.18764"
+              x2="10.9376"
+              y1="8.43739"
+              y2="7.49989"
+            >
+              <stop stopColor="#FABC12" />
+              <stop offset="0.46" stopColor="#FABC12" stopOpacity="0" />
+            </linearGradient>
+          </defs>
+        </>
+      )
+    },
+    viewBox: '0 0 15 15',
+  },
+  muse: {
+    frame: 'brand',
+    mark: () => (
+      <path
+        clipRule="evenodd"
+        d="M12.3962 7.00008C8.64905 7.00008 7.00033 8.64881 7.00033 12.3959C7.00033 8.64881 5.3516 7.00008 1.60449 7.00008C5.3516 7.00008 7.00033 5.35135 7.00033 1.60425C7.00033 5.35135 8.64905 7.00008 12.3962 7.00008Z"
+        fillRule="evenodd"
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="0.875"
+      />
+    ),
+    viewBox: '0 0 14 14',
+  },
+  opencode: {
+    frame: 'outlined',
+    // Figma draws the mark black, which would vanish on the dark elevated tile.
+    mark: () => (
+      <path
+        clipRule="evenodd"
+        d="M10 3.75H5V11.25H10V3.75ZM12.5 13.75H2.5V1.25H12.5V13.75Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    ),
+    viewBox: '0 0 15 15',
+  },
+} satisfies Record<
+  string,
+  { frame: 'brand' | 'codex' | 'outlined'; mark: (id: string) => ReactNode; viewBox: string }
+>
+
+/**
+ * The logo of an AI agent that works with a wallet, such as Claude or Codex: its mark on a 24 or
+ * 28px rounded tile, rendered as a `span`. It is hidden from assistive technology unless it has an
+ * `aria-label` or `aria-labelledby`.
+ *
+ * - Show the agent's name beside the logo, since many people know agents by name alone.
+ * - Use the 24px size in rows and the 28px size where the agent leads a section.
+ * - Use `Avatar` for a person and `TokenLogo` for a token.
+ *
+ * @example
+ * <AgentLogo agent="claude" />
+ * <AgentLogo agent="codex" aria-label="Codex" size="28" />
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/img_role | MDN img role}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export function AgentLogo(props: AgentLogo.Props) {
+  const { agent, className, size, vars, ...attributes } = props
+  const id = useId()
+  const labelled = props['aria-label'] || props['aria-labelledby']
+  const entry = agents[agent]
+
+  return (
+    <span
+      aria-hidden={labelled ? undefined : true}
+      role={labelled ? 'img' : undefined}
+      {...attributes}
+      data-agent={agent}
+      {...styles.tile({ className, frame: entry.frame, size, style: props.style, vars })}
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        viewBox={entry.viewBox}
+        xmlns="http://www.w3.org/2000/svg"
+        {...styles.mark({ frame: entry.frame, size })}
+      >
+        {entry.mark(id)}
+      </svg>
+    </span>
+  )
+}
+
+export namespace AgentLogo {
+  export type Props = Omit<ComponentPropsWithRef<'span'>, 'children'> &
+    Omit<zyzz.Props.Variants<typeof styles.tile>, 'frame'> & {
+      /** Agent whose logo renders. */
+      agent: keyof typeof agents
+    }
+}
+
+namespace styles {
+  // The tiles stay concentric with their marks: a 6px corner at 24px and a 7px corner at 28px, which
+  // no radius token sets.
+  export const tile = variants(
+    {
+      base: {
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        display: 'inline-flex',
+        flexShrink: '0 !custom',
+        justifyContent: 'center',
+        verticalAlign: 'middle',
+      },
+      defaultVariants: { frame: 'brand', size: '24' },
+      variants: {
+        frame: {
+          brand: {
+            color: 'neutral.000',
+            selectors: {
+              '&[data-agent="claude"]': { backgroundColor: '#d97757 !custom' },
+              '&[data-agent="cli"]': { backgroundColor: '#0a0a0a !custom' },
+              '&[data-agent="cursor"]': { backgroundColor: '#1f1f1f !custom' },
+              '&[data-agent="muse"]': { backgroundColor: '#7c5cff !custom' },
+            },
+          },
+          codex: {
+            backgroundColor: 'background.elevated',
+            border: '1px solid !custom',
+            borderColor: 'line.secondary',
+            color: 'content.primary',
+          },
+          outlined: {
+            backgroundColor: 'background.elevated',
+            border: '1px solid !custom',
+            borderColor: 'line.secondary',
+            color: 'content.primary',
+          },
+        },
+        size: {
+          '24': {
+            borderRadius: 'calc(0.375rem * var(--tds-corner-scale, 1)) !custom',
+            height: '24',
+            width: '24',
+          },
+          '28': {
+            borderRadius: 'calc(0.4375rem * var(--tds-corner-scale, 1)) !custom',
+            height: '28',
+            width: '28',
+          },
+        },
+      },
+    },
+    { id: 'tds/web/agent-logo' },
+  )
+
+  // Brand marks fill 14 or 16px, the Codex mark 19 or 22px, and the other outlined marks 15 or 17px.
+  export const mark = variants(
+    {
+      base: { display: 'block', flexShrink: '0 !custom' },
+      compoundVariants: [
+        {
+          when: { frame: 'brand', size: '24' },
+          style: { height: '14px !custom', width: '14px !custom' },
+        },
+        { when: { frame: 'brand', size: '28' }, style: { height: '16', width: '16' } },
+        {
+          when: { frame: 'codex', size: '24' },
+          style: { height: '19px !custom', width: '19px !custom' },
+        },
+        {
+          when: { frame: 'codex', size: '28' },
+          style: { height: '22px !custom', width: '22px !custom' },
+        },
+        {
+          when: { frame: 'outlined', size: '24' },
+          style: { height: '15px !custom', width: '15px !custom' },
+        },
+        {
+          when: { frame: 'outlined', size: '28' },
+          style: { height: '17px !custom', width: '17px !custom' },
+        },
+      ],
+      defaultVariants: { frame: 'brand', size: '24' },
+      variants: {
+        frame: { brand: {}, codex: {}, outlined: {} },
+        size: { '24': {}, '28': {} },
+      },
+    },
+    { id: 'tds/web/agent-logo/mark' },
+  )
+}

package/src/web/components/Alert.tsx

@@ -0,0 +1,321 @@
+import * as BaseUi from '@base-ui/react/button'
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { style, variants } from '../zyzz.config.js'
+
+/**
+ * An inline message on a tinted container, marked by an indicator in the color of its `intent`.
+ * The `negative` and `warning` intents render `role="alert"` and interrupt screen readers. The
+ * rest render `role="status"` and announce politely. Pass `role` to override either.
+ *
+ * - Use for guidance tied to nearby content. Use `Banner` for system or page-wide messages.
+ * - Keep the message short, with one `Alert.Action` at most, placed inside `Alert.Content`.
+ * - State the outcome in the text, so the meaning never depends on color alone.
+ *
+ * @example
+ * <Alert intent="warning">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>New address</Alert.Title>
+ *     Check the first and last 4 characters.
+ *     <Alert.Action onClick={review}>Review</Alert.Action>
+ *   </Alert.Content>
+ *   <Alert.Dismiss onClick={() => setOpen(false)} />
+ * </Alert>
+ *
+ * @see {@link https://base-ui.com/react/components/button | Base UI Button}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role | MDN status role}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role | MDN alert role}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 2.2 Status Messages}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html | WCAG 2.2 Contrast (Minimum)}
+ */
+export function Alert(props: Alert.Props) {
+  const { className, intent, vars, ...attributes } = props
+
+  return (
+    <div
+      // Urgent intents interrupt assistive technology, the rest announce politely.
+      role={intent === 'negative' || intent === 'warning' ? 'alert' : 'status'}
+      {...attributes}
+      {...styles.note({ className, intent, style: props.style, vars })}
+    />
+  )
+}
+
+export namespace Alert {
+  export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.note>
+
+  /**
+   * A text `<button>` with a 44px tall target, in the alert's strong type. Place it inside
+   * `Alert.Content`, after the message, or at the end of the row, where its label sits in line
+   * with the first line. Name the action it performs, such as Review fees.
+   */
+  export function Action(props: Action.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <BaseUi.Button
+        {...attributes}
+        data-alert-action=""
+        {...styles.action({ className, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace Action {
+    export type Props = ComponentPropsWithRef<'button'> &
+      zyzz.Props.Variants<typeof styles.action> &
+      Pick<BaseUi.Button.Props, 'nativeButton' | 'render'>
+  }
+
+  /**
+   * Stacks the title, message, and action in a `<div>` that fills the row and can shrink, so long
+   * text wraps beside the indicator. The message flows as text. When it sits beside a paragraph or
+   * a list, wrap it in a `p`, so the blocks keep their 4px gap.
+   */
+  export function Content(props: Content.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <div {...attributes} {...styles.content({ className, style: props.style, vars })} />
+  }
+
+  export namespace Content {
+    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.content>
+  }
+
+  /**
+   * A 44px icon button at the end of the row. Without children it shows a `×` glyph labelled
+   * `Dismiss`. It only renders the button, so remove the alert in its `onClick`.
+   */
+  export function Dismiss(props: Dismiss.Props) {
+    const { children, className, vars, ...attributes } = props
+
+    return (
+      <BaseUi.Button
+        aria-label="Dismiss"
+        {...attributes}
+        {...styles.dismiss({ className, style: props.style, vars })}
+      >
+        {children ?? <span aria-hidden="true">×</span>}
+      </BaseUi.Button>
+    )
+  }
+
+  export namespace Dismiss {
+    export type Props = ComponentPropsWithRef<'button'> &
+      zyzz.Props.Variants<typeof styles.dismiss> &
+      Pick<BaseUi.Button.Props, 'nativeButton' | 'render'>
+  }
+
+  /**
+   * Renders an 8px square in the color of the alert's `intent`, inside an `aria-hidden` `<span>`
+   * as tall as the first line. The indicator stays decorative, so the text must carry the meaning.
+   */
+  export function Icon(props: Icon.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <span
+        aria-hidden="true"
+        {...attributes}
+        data-alert-icon=""
+        {...styles.icon({ className, style: props.style, vars })}
+      >
+        <span {...styles.indicator()} />
+      </span>
+    )
+  }
+
+  export namespace Icon {
+    export type Props = Omit<ComponentPropsWithRef<'span'>, 'children'> &
+      zyzz.Props.Variants<typeof styles.icon>
+  }
+
+  /** Renders the heading of the message in a `<div>`, in the strong weight of the alert's type. */
+  export function Title(props: Title.Props) {
+    return <div {...props} data-alert-title="" />
+  }
+
+  export namespace Title {
+    export type Props = ComponentPropsWithRef<'div'>
+  }
+}
+
+namespace styles {
+  export const action = style(
+    {
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      backgroundColor: 'transparent !custom',
+      border: 'none !custom',
+      borderRadius: '3xs',
+      color: 'content.primary',
+      cursor: 'pointer',
+      display: 'inline-flex',
+      flexShrink: '0 !custom',
+      height: '44',
+      outlineColor: 'transparent !custom',
+      outlineOffset: '0',
+      outlineStyle: 'solid !custom',
+      outlineWidth: '2',
+      padding: '0',
+      transitionDuration: '160',
+      transitionProperty: 'opacity, outline-color, outline-offset, scale',
+      transitionTimingFunction: 'snappy',
+      whiteSpace: 'nowrap',
+      selectors: {
+        '&:active:not([data-disabled])': { scale: 'press' },
+        '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
+        '&:hover:not([data-disabled])': { opacity: 'hover' },
+        '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
+      },
+      '@media (prefers-reduced-motion: reduce)': {
+        transitionProperty: 'opacity, outline-color',
+        selectors: { '&:active:not([data-disabled])': { scale: 'none !custom' } },
+      },
+    },
+    { id: 'tds/web/alert/action' },
+  )
+
+  // The message flows as text, so inline elements such as `strong` stay on its lines. The title,
+  // the action and block children each take a line of their own, 4px from the content beside
+  // them.
+  export const content = style(
+    {
+      display: 'block',
+      flex: '1 !custom',
+      minWidth: '0',
+      selectors: {
+        '& > [data-alert-action]': {
+          display: 'flex',
+          marginBlockStart: '4',
+          width: 'fit-content !custom',
+        },
+        '& > [data-alert-title]': { marginBlockEnd: '4' },
+        // The browser's block margins of paragraphs and lists give way to the 4px gap. `:where`
+        // keeps the reset below any class that sets a margin of its own.
+        '& > :where(p, ul, ol)': { marginBlock: '0' },
+        // A list sits 4px below the message, and a paragraph 4px below the element before it. A
+        // list follows text in practice, which CSS cannot select, so it always takes the gap.
+        '& > :is(ul, ol), & > * + :is(p, div)': { marginBlockStart: '4' },
+      },
+    },
+    { id: 'tds/web/alert/content' },
+  )
+
+  export const dismiss = style(
+    {
+      alignItems: 'center',
+      backgroundColor: 'transparent !custom',
+      border: 'none !custom',
+      borderRadius: 'full',
+      color: 'content.secondary',
+      cornerShape: 'round',
+      cursor: 'pointer',
+      display: 'inline-flex',
+      flexShrink: '0 !custom',
+      height: '44',
+      justifyContent: 'center',
+      outlineColor: 'transparent !custom',
+      outlineOffset: '-2',
+      outlineStyle: 'solid !custom',
+      outlineWidth: '2',
+      padding: '0',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, color, outline-color, scale',
+      transitionTimingFunction: 'snappy',
+      typography: 'body.b2Strong',
+      width: '44',
+      selectors: {
+        '&:active:not([data-disabled])': { scale: 'press' },
+        '&:focus-visible': { outlineColor: 'border.focus' },
+        '&:hover:not([data-disabled])': {
+          backgroundColor: 'container.regular',
+          color: 'content.primary',
+        },
+        '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
+      },
+      '@media (prefers-reduced-motion: reduce)': {
+        transitionProperty: 'background-color, color, outline-color',
+        selectors: { '&:active:not([data-disabled])': { scale: 'none !custom' } },
+      },
+    },
+    { id: 'tds/web/alert/dismiss' },
+  )
+
+  export const icon = style(
+    {
+      alignItems: 'center',
+      display: 'inline-flex',
+      flexShrink: '0 !custom',
+      justifyContent: 'center',
+    },
+    { id: 'tds/web/alert/icon' },
+  )
+
+  export const indicator = style(
+    {
+      backgroundColor: 'currentColor !custom',
+      // Platform has no 2px radius step, so the literal takes the squircle scale of the steps.
+      borderRadius: 'calc(0.125rem * var(--tds-corner-scale, 1)) !custom',
+      height: '8',
+      width: '8',
+    },
+    { id: 'tds/web/alert/indicator' },
+  )
+
+  export const note = variants(
+    {
+      base: {
+        alignItems: 'flex-start',
+        borderRadius: 'xs',
+        boxSizing: 'border-box',
+        color: 'content.primary',
+        columnGap: '12',
+        display: 'flex',
+        padding: '16',
+        typography: 'body.b3',
+        selectors: {
+          // An action at the end of the row centers its 44px target on the 16px first line, so its
+          // label stays in line with the message.
+          '& > [data-alert-action]': { marginBlock: 'calc((1rem - 2.75rem) / 2) !custom' },
+          '& [data-alert-action], & [data-alert-title]': { typography: 'body.b3Strong' },
+          '& [data-alert-icon]': { height: '16', width: '16' },
+        },
+      },
+      defaultVariants: { intent: 'neutral' },
+      variants: {
+        // Text stays primary on every tint, and the indicator takes the intent color. Platform has no
+        // blue or violet container, so `tip` and `special` take the 8% and 16% accent alphas.
+        intent: {
+          negative: {
+            backgroundColor: 'container.negative',
+            selectors: { '& [data-alert-icon]': { color: 'content.negative' } },
+          },
+          neutral: {
+            backgroundColor: 'container.regular',
+            selectors: { '& [data-alert-icon]': { color: 'content.subtle' } },
+          },
+          positive: {
+            backgroundColor: 'container.positive',
+            selectors: { '& [data-alert-icon]': { color: 'content.positive' } },
+          },
+          special: {
+            backgroundColor: 'light-dark(rgb(126 89 228 / 0.08), rgb(152 119 241 / 0.16)) !custom',
+            selectors: { '& [data-alert-icon]': { color: 'accent.violet.background' } },
+          },
+          tip: {
+            backgroundColor: 'light-dark(rgb(68 113 237 / 0.08), rgb(116 152 251 / 0.16)) !custom',
+            selectors: { '& [data-alert-icon]': { color: 'accent.blue.background' } },
+          },
+          warning: {
+            backgroundColor: 'container.warning',
+            selectors: { '& [data-alert-icon]': { color: 'content.warning' } },
+          },
+        },
+      },
+    },
+    { id: 'tds/web/alert' },
+  )
+}