@openwarelabs/ui 0.13.0 → 0.14.1

package/dist/components.css

@@ -1622,6 +1622,60 @@
     transform: rotate(180deg);
 }
 
+/* components/TagInput/TagInput.css */
+/* TagInput: a grouped field (Input.css) that wraps, with Tags (Tag.css) before the text box, over Select's listbox. */
+.ow-tag-input {
+    height: auto;
+    min-height: 40px;
+    flex-wrap: wrap;
+    gap: var(--ow-space-2xs);
+    padding: 5px var(--ow-space-sm) 5px 5px;
+    cursor: text;
+}
+
+.ow-tag-input.ow-input-group--sm {
+    min-height: 32px;
+    gap: var(--ow-space-2xs);
+    padding: var(--ow-space-2xs) var(--ow-space-xs) var(--ow-space-2xs) var(--ow-space-2xs);
+}
+
+.ow-tag-input.ow-input-group--disabled {
+    cursor: not-allowed;
+}
+
+/* The list is only for screen readers: its tags sit in the field's own row, beside the text box. */
+.ow-tag-input__tags {
+    display: contents;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* A tag whose ✕ has focus (after Backspace or the arrow keys) is the one Backspace removes. */
+.ow-tag-input .ow-tag:has(.ow-tag__remove:focus-visible) {
+    border-color: var(--ow-primary-border);
+    background: var(--ow-primary-subtle);
+    color: var(--ow-primary-text);
+}
+
+.ow-tag-input__input {
+    width: auto;
+    min-width: 64px;
+    height: 28px;
+    flex: 1 1 64px;
+    /* With no tags, the text lines up with Input's. */
+    padding-left: 7px;
+}
+
+.ow-input-group--sm .ow-tag-input__input {
+    height: 22px;
+    padding-left: var(--ow-space-xs);
+}
+
+.ow-tag-input--filled .ow-tag-input__input {
+    padding-left: var(--ow-space-2xs);
+}
+
 /* components/Checkbox/Checkbox.css */
 /* Checkbox: a native input with its look replaced. */
 .ow-checkbox {
@@ -2106,6 +2160,147 @@
     cursor: not-allowed;
 }
 
+/* components/Rating/Rating.css */
+/* Rating: a row of stars. Filled ones are brass (one of the few places it shows), empty ones a quiet grey. */
+.ow-rating {
+    --ow-rating-size: 20px;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ow-space-sm);
+    color: var(--ow-text-muted);
+    font-size: 14px;
+    line-height: 1.4;
+    vertical-align: middle;
+}
+
+.ow-rating--sm {
+    --ow-rating-size: 16px;
+    gap: var(--ow-space-xs);
+    font-size: 13px;
+}
+
+.ow-rating--lg {
+    --ow-rating-size: 24px;
+}
+
+.ow-rating__stars {
+    display: inline-flex;
+    border-radius: var(--ow-radius-md);
+}
+
+/* Each star is a 24px (or larger) box, so it's a big enough target to tap. */
+.ow-rating__star {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    min-height: 24px;
+    padding: 2px;
+}
+
+.ow-rating--readonly .ow-rating__star {
+    min-width: 0;
+    min-height: 0;
+    padding: 1px;
+}
+
+.ow-rating__icon {
+    display: block;
+    width: var(--ow-rating-size);
+    height: var(--ow-rating-size);
+    flex-shrink: 0;
+    fill: var(--ow-brass);
+    stroke: var(--ow-brass-deep);
+}
+
+.ow-rating__icon--empty {
+    fill: var(--ow-meter-track);
+    stroke: var(--ow-border-hover);
+}
+
+.ow-rating__glyph {
+    position: relative;
+    display: block;
+}
+
+/* The brass star on top, cut to the filled share of this one. */
+.ow-rating__fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: var(--ow-rating-fill);
+    overflow: hidden;
+    pointer-events: none;
+    transition: width var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+/* Each radio covers its star (or the start half of it, for a half point) and is drawn by the star. */
+.ow-rating__input {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    margin: 0;
+    appearance: none;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.ow-rating__input--half {
+    z-index: 1;
+    width: 50%;
+}
+
+.ow-rating__input:disabled {
+    cursor: not-allowed;
+}
+
+.ow-rating__stars:has(:focus-visible) {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 0;
+}
+
+.ow-rating__star .ow-rating__glyph {
+    transition: transform var(--ow-duration-base) var(--ow-ease-spring);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .ow-rating__star:has(.ow-rating__input:hover:not(:disabled)) .ow-rating__glyph,
+    .ow-rating__star:has(.ow-rating__input:focus-visible) .ow-rating__glyph {
+        transform: scale(1.12);
+    }
+
+    .ow-rating__star:has(.ow-rating__input:active:not(:disabled)) .ow-rating__glyph {
+        transform: scale(0.92);
+    }
+}
+
+.ow-rating__stars[aria-invalid="true"] .ow-rating__icon--empty {
+    stroke: var(--ow-danger-text);
+}
+
+.ow-rating--disabled {
+    opacity: 0.55;
+}
+
+.ow-rating__value {
+    color: var(--ow-text);
+    font-weight: var(--ow-weight-emphasis);
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-rating__value + .ow-rating__count {
+    margin-inline-start: calc(var(--ow-space-sm) * -0.5);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-rating__fill,
+    .ow-rating__star .ow-rating__glyph {
+        transition: none;
+    }
+}
+
 /* components/NumberField/NumberField.css */
 /* NumberField: − value + in one field. */
 .ow-number-field {
@@ -2584,6 +2779,199 @@
     color: var(--ow-danger-text);
 }
 
+/* components/Banner/Banner.css */
+/* Banner: a bar across the top of the page. Each tone sets the ground, the rule under it and the icon's colour; on
+   narrow bars (its own width, a container query) the action moves under the message. */
+.ow-banner {
+    --ow-banner-ground: var(--ow-primary);
+    --ow-banner-rule: var(--ow-primary);
+    --ow-banner-icon: var(--ow-on-primary);
+    container: ow-banner / inline-size;
+    display: grid;
+    grid-template-rows: 1fr;
+    border-bottom: 1px solid var(--ow-banner-rule);
+    /* Over the surface, so a translucent dark-theme tint stays solid when the page scrolls under a sticky bar. */
+    background: linear-gradient(var(--ow-banner-ground), var(--ow-banner-ground)) var(--ow-surface);
+    color: var(--ow-text);
+    font-size: 14px;
+    line-height: 1.5;
+    transition-property: grid-template-rows, opacity;
+    transition-duration: var(--ow-duration-exit);
+    transition-timing-function: var(--ow-ease-exit);
+}
+
+.ow-banner--sticky {
+    position: sticky;
+    z-index: 10;
+    top: 0;
+}
+
+.ow-banner[data-state="closed"] {
+    grid-template-rows: 0fr;
+    opacity: 0;
+}
+
+.ow-banner__clip {
+    min-height: 0;
+}
+
+.ow-banner[data-state="closed"] .ow-banner__clip {
+    overflow: hidden;
+}
+
+.ow-banner__inner {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ow-space-md);
+    padding: var(--ow-space-md) var(--ow-space-2xl);
+}
+
+/* Room on the left as wide as the ✕ on the right, so a centred message sits in the middle of the bar. */
+.ow-banner--center.ow-banner--dismissible .ow-banner__inner::before {
+    content: "";
+    width: 24px;
+    flex-shrink: 0;
+}
+
+.ow-banner__content {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    gap: var(--ow-space-sm);
+}
+
+.ow-banner--center .ow-banner__content {
+    justify-content: center;
+    text-align: center;
+}
+
+.ow-banner__icon {
+    display: inline-flex;
+    height: 21px;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--ow-banner-icon);
+}
+
+.ow-banner__text {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: inherit;
+    gap: var(--ow-space-2xs) var(--ow-space-lg);
+}
+
+.ow-banner__message {
+    min-width: 0;
+}
+
+.ow-banner__message > p {
+    margin: 0;
+}
+
+/* A small button reaches into the bar's padding, so it doesn't push the message off the icon's line. */
+.ow-banner__action {
+    display: flex;
+    margin-block: -4px;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ow-space-sm);
+    font-weight: var(--ow-weight-control);
+}
+
+.ow-banner .ow-link,
+.ow-banner .ow-link:hover {
+    color: inherit;
+}
+
+.ow-banner .ow-link:hover {
+    text-decoration-color: currentColor;
+}
+
+.ow-banner__close {
+    margin-block: -1px;
+}
+
+.ow-banner__close:hover:not(:disabled) {
+    background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+@container ow-banner (max-width: 559px) {
+    .ow-banner .ow-banner__content {
+        justify-content: flex-start;
+        text-align: start;
+    }
+
+    .ow-banner .ow-banner__text {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .ow-banner .ow-banner__action {
+        margin-block: 0;
+    }
+
+    .ow-banner .ow-banner__inner::before {
+        display: none;
+    }
+}
+
+/* Tones */
+
+.ow-banner--brand {
+    color: var(--ow-on-primary);
+}
+
+.ow-banner--brand .ow-link {
+    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
+}
+
+.ow-banner--brand .ow-banner__close,
+.ow-banner--brand .ow-banner__close:hover:not(:disabled) {
+    color: var(--ow-on-primary);
+}
+
+.ow-banner--brand .ow-banner__inner :focus-visible {
+    outline-color: var(--ow-on-primary);
+}
+
+.ow-banner--neutral {
+    --ow-banner-ground: var(--ow-surface-muted);
+    --ow-banner-rule: var(--ow-border);
+    --ow-banner-icon: var(--ow-text-muted);
+}
+
+.ow-banner--info {
+    --ow-banner-ground: var(--ow-primary-subtle);
+    --ow-banner-rule: var(--ow-primary-border);
+    --ow-banner-icon: var(--ow-primary-text);
+}
+
+.ow-banner--success {
+    --ow-banner-ground: var(--ow-success-surface);
+    --ow-banner-rule: var(--ow-success-border);
+    --ow-banner-icon: var(--ow-success-text);
+}
+
+.ow-banner--warning {
+    --ow-banner-ground: var(--ow-warning-surface);
+    --ow-banner-rule: var(--ow-warning-border);
+    --ow-banner-icon: var(--ow-warning-text);
+}
+
+.ow-banner--danger {
+    --ow-banner-ground: var(--ow-danger-surface);
+    --ow-banner-rule: var(--ow-danger-border);
+    --ow-banner-icon: var(--ow-danger-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-banner {
+        transition: none;
+    }
+}
+
 /* components/Progress/Progress.css */
 /* ProgressBar and ProgressCircle. The fill is ow-progress; tones swap in a status colour. */
 .ow-progress {
@@ -2798,20 +3186,152 @@
     }
 }
 
-/* components/Tooltip/Tooltip.css */
-/* Tooltip: a small dark label in the top layer, on the side of the child it prefers (or the other side when there's no room). */
-.ow-tooltip {
-    display: inline-flex;
+/* components/PasswordInput/PasswordInput.css */
+/* PasswordInput: an Input group with a show and hide button at the end, and an optional strength meter and checklist under it. */
+.ow-password-input {
+    display: grid;
+    width: 100%;
+    min-width: 0;
+    gap: var(--ow-space-sm);
 }
 
-.ow-tooltip__bubble {
-    z-index: 70;
-    max-width: 240px;
-    overflow: visible;
+/* The show and hide button: CloseButton's quiet square, a size down so it sits inside the field. */
+.ow-password-input__toggle {
+    display: inline-flex;
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
     border: 0;
     border-radius: var(--ow-radius-md);
-    background: var(--ow-tooltip);
-    padding: var(--ow-space-2xs) var(--ow-space-sm);
+    background: transparent;
+    padding: 0;
+    color: var(--ow-icon);
+    cursor: pointer;
+    transition-property: color, background-color;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-password-input__toggle--sm {
+    width: 24px;
+    height: 24px;
+}
+
+.ow-password-input__toggle:hover:not(:disabled) {
+    background: var(--ow-surface-muted);
+    color: var(--ow-text);
+}
+
+.ow-password-input__toggle:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 1px;
+}
+
+.ow-password-input__toggle:disabled {
+    cursor: not-allowed;
+}
+
+/* The strength line: the meter's blocks, then "Password strength: Good", the word in the meter's colour. */
+.ow-password-input__strength {
+    display: grid;
+    gap: var(--ow-space-xs);
+}
+
+.ow-password-input__strength-text {
+    min-height: 1.45em;
+    margin: 0;
+    color: var(--ow-text-muted);
+    font-size: 13px;
+    line-height: 1.45;
+}
+
+.ow-password-input__strength-word {
+    color: var(--ow-text);
+    font-weight: var(--ow-weight-emphasis);
+    transition: color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-password-input__strength--danger .ow-password-input__strength-word {
+    color: var(--ow-danger-text);
+}
+
+.ow-password-input__strength--warning .ow-password-input__strength-word {
+    color: var(--ow-warning-text);
+}
+
+.ow-password-input__strength--success .ow-password-input__strength-word {
+    color: var(--ow-success-text);
+}
+
+/* The checklist: a ring for each rule, filled with a tick once it's met. */
+.ow-password-input__requirements {
+    display: grid;
+    gap: var(--ow-space-2xs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-password-input__requirement {
+    display: flex;
+    align-items: center;
+    gap: var(--ow-space-sm);
+    color: var(--ow-text-muted);
+    font-size: 13px;
+    line-height: 1.45;
+    transition: color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-password-input__mark {
+    display: inline-flex;
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border: 1.5px solid var(--ow-border-strong);
+    border-radius: var(--ow-radius-pill);
+    color: var(--ow-success-text);
+    transition-property: border-color, background-color;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-password-input__requirement--met {
+    color: var(--ow-text);
+}
+
+.ow-password-input__requirement--met .ow-password-input__mark {
+    border-color: var(--ow-success-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-password-input__toggle,
+    .ow-password-input__strength-word,
+    .ow-password-input__requirement,
+    .ow-password-input__mark {
+        transition: none;
+    }
+}
+
+/* components/Tooltip/Tooltip.css */
+/* Tooltip: a small dark label in the top layer, on the side of the child it prefers (or the other side when there's no room). */
+.ow-tooltip {
+    display: inline-flex;
+}
+
+.ow-tooltip__bubble {
+    z-index: 70;
+    max-width: 240px;
+    overflow: visible;
+    border: 0;
+    border-radius: var(--ow-radius-md);
+    background: var(--ow-tooltip);
+    padding: var(--ow-space-2xs) var(--ow-space-sm);
     color: var(--ow-on-tooltip);
     font-family: var(--ow-font-sans);
     font-size: 12px;
@@ -3345,6 +3865,172 @@
     line-height: 1.3;
 }
 
+/* components/Tour/Tour.css */
+/* Tour and Coachmark: a popover-like card beside each step's target, over an optional spotlight that dims the
+   rest of the page. Both sit in the top layer, the spotlight first. */
+.ow-tour {
+    z-index: 60;
+    display: grid;
+    gap: var(--ow-space-md);
+    max-width: calc(100vw - 16px);
+    overflow: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-surface);
+    padding: var(--ow-space-xl) var(--ow-space-xl) var(--ow-space-lg);
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+    font-size: 14px;
+    line-height: 1.45;
+    box-shadow: var(--ow-shadow-menu);
+    outline: none;
+}
+
+/* A step without a target: in the middle of the window, where the browser puts a popover. */
+.ow-tour--centred {
+    position: fixed;
+    inset: 0;
+    height: fit-content;
+    max-height: calc(100dvh - 32px);
+    margin: auto;
+}
+
+.ow-tour > * {
+    min-width: 0;
+}
+
+.ow-tour__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--ow-space-sm);
+}
+
+.ow-tour__title {
+    padding-top: 2px;
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.3;
+}
+
+.ow-tour__header .ow-close-button {
+    flex-shrink: 0;
+    margin: -2px -4px 0 0;
+}
+
+.ow-tour__content {
+    color: var(--ow-text-muted);
+}
+
+.ow-tour__content > p {
+    margin: 0;
+}
+
+.ow-tour__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ow-space-sm);
+    margin-top: var(--ow-space-2xs);
+}
+
+.ow-tour__progress {
+    color: var(--ow-text-muted);
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-tour__actions {
+    display: flex;
+    gap: var(--ow-space-sm);
+    margin-left: auto;
+}
+
+/* The spotlight: the whole window, in the top layer under the card. It only dims: clicks go through to the page. */
+.ow-tour-spotlight {
+    position: fixed;
+    inset: 0;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: hidden;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    pointer-events: none;
+}
+
+.ow-tour-spotlight[data-state="open"] {
+    animation: ow-tour-fade-in var(--ow-duration-slow) var(--ow-ease-standard);
+}
+
+.ow-tour-spotlight[data-state="closed"] {
+    animation: ow-tour-fade-out var(--ow-duration-exit) var(--ow-ease-exit) forwards;
+}
+
+/* The hole over the target: a rounded box whose shadow covers everything else. */
+.ow-tour-spotlight__hole {
+    position: absolute;
+    border-radius: var(--ow-radius-tile);
+    box-shadow: 0 0 0 200vmax var(--ow-backdrop);
+}
+
+.ow-tour-spotlight__hole[data-moving] {
+    transition-duration: var(--ow-duration-panel);
+    transition-property: top, left, width, height;
+    transition-timing-function: var(--ow-ease-emphasized);
+}
+
+.ow-tour-spotlight__dim {
+    position: absolute;
+    inset: 0;
+    background: var(--ow-backdrop);
+}
+
+@keyframes ow-tour-fade-in {
+    from {
+        opacity: 0;
+    }
+}
+
+@keyframes ow-tour-fade-out {
+    to {
+        opacity: 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-tour-spotlight__hole[data-moving] {
+        transition: none;
+    }
+}
+
+/* components/HoverCard/HoverCard.css */
+/* HoverCard: Popover's surface, opened by resting the pointer on (or tabbing to) its trigger. */
+.ow-hover-card-anchor {
+    display: inline-flex;
+}
+
+.ow-hover-card {
+    z-index: 60;
+    display: grid;
+    gap: var(--ow-space-md);
+    overflow: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-surface);
+    padding: var(--ow-space-lg);
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+    font-size: 14px;
+    line-height: 1.45;
+    box-shadow: var(--ow-shadow-menu);
+}
+
+.ow-hover-card > * {
+    min-width: 0;
+}
+
 /* components/Calendar/Calendar.css */
 /* Calendar: a quiet month grid. The chosen day is filled with the primary colour; today has a brass dot. */
 .ow-calendar {
@@ -4486,6 +5172,14 @@
     background: var(--ow-border);
 }
 
+/* components/ContextMenu/ContextMenu.css */
+/* ContextMenu: the wrapper adds no box of its own; the panel is Menu's (.ow-menu__panel), opened at the pointer. */
+.ow-context-menu {
+    display: contents;
+    /* A long press opens the menu, not the browser's callout. */
+    -webkit-touch-callout: none;
+}
+
 /* components/Accordion/Accordion.css */
 /* Disclosure and Accordion: a header with a chevron that turns as the panel opens. */
 .ow-disclosure,
@@ -4978,35 +5672,253 @@
     }
 }
 
-/* components/ChoiceCard/ChoiceCard.css */
-/* ChoiceCard: a tactile card-button with an icon tile, a title and one line of description. */
-.ow-choice {
+/* components/Timeline/Timeline.css */
+/* Timeline: events down a 1px line. Each item draws the line above its marker (::before) and below it (::after), so
+   the line stops a few pixels short of every marker, whatever its size, and can turn dashed around a pending item. */
+.ow-timeline {
+    --ow-timeline-marker: 28px;
+    --ow-timeline-dot: 10px;
+    --ow-timeline-space: var(--ow-space-5xl);
+    --ow-timeline-line: var(--ow-border-strong);
+
     display: grid;
-    align-content: start;
-    gap: var(--ow-space-lg);
     margin: 0;
-    border: 1px solid var(--ow-border-strong);
-    border-radius: var(--ow-radius-container);
-    background-color: var(--ow-control);
-    background-image: linear-gradient(to bottom, var(--ow-control), var(--ow-control-shade));
-    padding: var(--ow-space-2xl);
-    color: var(--ow-text);
-    font: inherit;
-    text-align: left;
-    cursor: pointer;
-    box-shadow: var(--ow-shadow-button-secondary);
-    transition-property: transform, border-color, color, background-color, box-shadow, opacity;
-    transition-duration: var(--ow-duration-base);
-    transition-timing-function: var(--ow-ease-standard);
+    padding: 0;
+    list-style: none;
 }
 
-.ow-choice--recommended {
-    border-color: var(--ow-primary-border);
+.ow-timeline--compact {
+    --ow-timeline-marker: 24px;
+    --ow-timeline-dot: 8px;
+    --ow-timeline-space: var(--ow-space-xl);
 }
 
-.ow-choice:hover:not(:disabled),
-.ow-choice:focus-visible {
-    border-color: var(--ow-primary-text);
+.ow-timeline__item {
+    /* Half of what shows of the marker, plus the gap to the line. */
+    --ow-timeline-reach: calc(var(--ow-timeline-marker) / 2 + 4px);
+    --ow-timeline-pad: var(--ow-timeline-space);
+
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--ow-timeline-marker) minmax(0, 1fr);
+    column-gap: var(--ow-space-lg);
+    padding-top: var(--ow-timeline-pad);
+}
+
+.ow-timeline__item:first-child {
+    --ow-timeline-pad: 0px;
+}
+
+.ow-timeline__item--dot {
+    --ow-timeline-reach: calc(var(--ow-timeline-dot) / 2 + 4px);
+}
+
+.ow-timeline__item::before,
+.ow-timeline__item::after {
+    content: "";
+    position: absolute;
+    left: calc(var(--ow-timeline-marker) / 2 - 0.5px);
+    border-left: 1px solid var(--ow-timeline-line);
+}
+
+/* From the item's top edge down to just above its marker. */
+.ow-timeline__item:not(:first-child)::before {
+    top: 0;
+    height: max(0px, calc(var(--ow-timeline-pad) + var(--ow-timeline-marker) / 2 - var(--ow-timeline-reach)));
+}
+
+/* From just below the marker to the item's bottom edge, where the next item's line takes over. */
+.ow-timeline__item:not(:last-child)::after {
+    top: calc(var(--ow-timeline-pad) + var(--ow-timeline-marker) / 2 + var(--ow-timeline-reach));
+    bottom: 0;
+}
+
+/* The way to and from something that hasn't happened yet is dashed. */
+.ow-timeline__item--pending::before,
+.ow-timeline__item--pending::after,
+.ow-timeline__item:has(+ .ow-timeline__item--pending)::after {
+    border-left-style: dashed;
+}
+
+.ow-timeline__marker {
+    display: flex;
+    width: var(--ow-timeline-marker);
+    height: var(--ow-timeline-marker);
+    align-items: center;
+    justify-content: center;
+}
+
+.ow-timeline__dot {
+    width: var(--ow-timeline-dot);
+    height: var(--ow-timeline-dot);
+    box-sizing: border-box;
+    border: 2px solid var(--ow-timeline-solid, var(--ow-border-strong));
+    border-radius: 50%;
+    background: var(--ow-timeline-solid, var(--ow-border-strong));
+}
+
+.ow-timeline__item--icon .ow-timeline__marker {
+    box-sizing: border-box;
+    border: 1px solid var(--ow-timeline-border, var(--ow-border));
+    border-radius: 50%;
+    background: var(--ow-timeline-surface, var(--ow-surface-muted));
+    color: var(--ow-timeline-text, var(--ow-icon));
+}
+
+.ow-timeline__item--brand {
+    --ow-timeline-solid: var(--ow-primary);
+    --ow-timeline-border: var(--ow-primary-border);
+    --ow-timeline-surface: var(--ow-primary-subtle);
+    --ow-timeline-text: var(--ow-primary-text);
+}
+
+.ow-timeline__item--success {
+    --ow-timeline-solid: var(--ow-success-solid);
+    --ow-timeline-border: var(--ow-success-border);
+    --ow-timeline-surface: var(--ow-success-surface);
+    --ow-timeline-text: var(--ow-success-text);
+}
+
+.ow-timeline__item--warning {
+    --ow-timeline-solid: var(--ow-warning-solid);
+    --ow-timeline-border: var(--ow-warning-border);
+    --ow-timeline-surface: var(--ow-warning-surface);
+    --ow-timeline-text: var(--ow-warning-text);
+}
+
+.ow-timeline__item--danger {
+    --ow-timeline-solid: var(--ow-danger-solid);
+    --ow-timeline-border: var(--ow-danger-border);
+    --ow-timeline-surface: var(--ow-danger-surface);
+    --ow-timeline-text: var(--ow-danger-text);
+}
+
+/* Pending: a hollow marker, drawn with a dashed edge when it's an icon's circle. */
+.ow-timeline__item--pending .ow-timeline__dot {
+    background: transparent;
+}
+
+.ow-timeline__item--pending.ow-timeline__item--icon .ow-timeline__marker {
+    border-style: dashed;
+    border-color: var(--ow-border-strong);
+    background: transparent;
+    color: var(--ow-text-muted);
+}
+
+.ow-timeline__content {
+    display: grid;
+    min-width: 0;
+    align-content: start;
+    gap: var(--ow-space-xs);
+    /* Centres the first line (20px) on the marker. */
+    padding-top: calc((var(--ow-timeline-marker) - 20px) / 2);
+}
+
+.ow-timeline__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--ow-space-2xs) var(--ow-space-md);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.ow-timeline__title {
+    min-width: 0;
+    flex: 1 1 auto;
+    color: var(--ow-text);
+    font-weight: var(--ow-weight-emphasis);
+}
+
+.ow-timeline__separator {
+    display: none;
+}
+
+.ow-timeline__time {
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.ow-timeline__item--pending .ow-timeline__title {
+    color: var(--ow-text-muted);
+}
+
+.ow-timeline__body {
+    min-width: 0;
+    color: var(--ow-text-soft);
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.ow-timeline__body > p {
+    margin: 0;
+}
+
+/* Compact: one sentence with the time after it, in the flow of the text. */
+.ow-timeline--compact .ow-timeline__header {
+    display: block;
+}
+
+.ow-timeline--compact .ow-timeline__title {
+    color: var(--ow-text-soft);
+    font-weight: var(--ow-weight-regular);
+}
+
+.ow-timeline--compact .ow-timeline__title :is(strong, b) {
+    color: var(--ow-text);
+    font-weight: var(--ow-weight-emphasis);
+}
+
+.ow-timeline--compact .ow-timeline__separator {
+    display: inline;
+    margin-inline: var(--ow-space-xs);
+    color: var(--ow-text-muted);
+}
+
+.ow-timeline--compact .ow-timeline__time {
+    font-size: 13px;
+}
+
+.ow-timeline--compact .ow-timeline__content {
+    gap: var(--ow-space-2xs);
+}
+
+.ow-timeline--compact .ow-timeline__body {
+    color: var(--ow-text-muted);
+    font-size: 13px;
+}
+
+/* components/ChoiceCard/ChoiceCard.css */
+/* ChoiceCard: a tactile card-button with an icon tile, a title and one line of description. */
+.ow-choice {
+    display: grid;
+    align-content: start;
+    gap: var(--ow-space-lg);
+    margin: 0;
+    border: 1px solid var(--ow-border-strong);
+    border-radius: var(--ow-radius-container);
+    background-color: var(--ow-control);
+    background-image: linear-gradient(to bottom, var(--ow-control), var(--ow-control-shade));
+    padding: var(--ow-space-2xl);
+    color: var(--ow-text);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    box-shadow: var(--ow-shadow-button-secondary);
+    transition-property: transform, border-color, color, background-color, box-shadow, opacity;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-choice--recommended {
+    border-color: var(--ow-primary-border);
+}
+
+.ow-choice:hover:not(:disabled),
+.ow-choice:focus-visible {
+    border-color: var(--ow-primary-text);
 }
 
 .ow-choice:focus-visible {
@@ -5205,6 +6117,86 @@
     white-space: nowrap;
 }
 
+/* components/Image/Image.css */
+/* Image: an <img> in a box that pulses while it loads and shows a fallback if it fails. With a ratio, the box is an
+   AspectRatio and the image fills it. */
+.ow-image {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    vertical-align: top;
+}
+
+.ow-image.ow-aspect-ratio {
+    display: block;
+}
+
+.ow-image__img {
+    display: block;
+    max-width: 100%;
+    transition: opacity var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-image--cover .ow-image__img {
+    object-fit: cover;
+}
+
+.ow-image--contain .ow-image__img {
+    object-fit: contain;
+}
+
+.ow-image--radius-control {
+    border-radius: var(--ow-radius-form);
+}
+
+.ow-image--radius-container {
+    border-radius: var(--ow-radius-container);
+}
+
+/* Loading: the Skeleton's grey and pulse, with the image hidden until it's ready. */
+.ow-image--loading {
+    background: var(--ow-skeleton);
+    animation: ow-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.ow-image--loading .ow-image__img {
+    opacity: 0;
+}
+
+.ow-image__fallback {
+    display: flex;
+    box-sizing: border-box;
+    min-width: 64px;
+    max-width: 100%;
+    min-height: 64px;
+    align-items: center;
+    justify-content: center;
+}
+
+.ow-image__fallback--default {
+    background: var(--ow-skeleton-soft);
+    color: var(--ow-icon);
+}
+
+.ow-image-figure {
+    display: grid;
+    margin: 0;
+    gap: var(--ow-space-sm);
+    justify-items: start;
+}
+
+.ow-image-figure > .ow-aspect-ratio {
+    justify-self: stretch;
+}
+
+.ow-image-figure__caption {
+    color: var(--ow-text-muted);
+    font-family: var(--ow-font-sans);
+    font-size: 13px;
+    line-height: 1.4;
+}
+
 /* components/Kbd/Kbd.css */
 /* Kbd and inline Code, both in the mono face. */
 .ow-kbd {
@@ -5890,6 +6882,287 @@
     transform: translate(-50%, -50%);
 }
 
+/* components/Carousel/Carousel.css */
+/* Carousel: a row of slides on the browser's own scroll-snap, with round buttons on the edges and dots below. */
+.ow-carousel {
+    --ow-carousel-per-view: 1;
+    --ow-carousel-gap: var(--ow-space-md);
+    --ow-carousel-arrow: 32px;
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--ow-space-md);
+}
+
+.ow-carousel__viewport {
+    position: relative;
+    container-type: inline-size;
+}
+
+.ow-carousel--arrows-outside .ow-carousel__viewport {
+    margin-inline: calc(var(--ow-carousel-arrow) + var(--ow-space-sm));
+}
+
+.ow-carousel__track {
+    --ow-carousel-slide: calc((100cqi - (var(--ow-carousel-per-view) - 1) * var(--ow-carousel-gap)) / var(--ow-carousel-per-view));
+    display: flex;
+    gap: var(--ow-carousel-gap);
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    border-radius: var(--ow-radius-container);
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+}
+
+.ow-carousel__track::-webkit-scrollbar {
+    display: none;
+}
+
+.ow-carousel--center .ow-carousel__track {
+    padding-inline: calc((100cqi - var(--ow-carousel-slide)) / 2);
+}
+
+.ow-carousel__track:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-carousel__slide {
+    flex: 0 0 var(--ow-carousel-slide);
+    min-width: 0;
+    scroll-snap-align: start;
+}
+
+.ow-carousel--center .ow-carousel__slide {
+    scroll-snap-align: center;
+}
+
+.ow-carousel__arrow,
+.ow-carousel__play {
+    position: absolute;
+    z-index: 1;
+    border-radius: 50%;
+}
+
+.ow-carousel__arrow {
+    top: 50%;
+    translate: 0 -50%;
+}
+
+.ow-carousel__arrow--previous {
+    left: var(--ow-space-sm);
+}
+
+.ow-carousel__arrow--next {
+    right: var(--ow-space-sm);
+}
+
+.ow-carousel--arrows-outside .ow-carousel__arrow--previous {
+    left: calc(-1 * (var(--ow-carousel-arrow) + var(--ow-space-sm)));
+}
+
+.ow-carousel--arrows-outside .ow-carousel__arrow--next {
+    right: calc(-1 * (var(--ow-carousel-arrow) + var(--ow-space-sm)));
+}
+
+/* On the slides, a button with nowhere to go gets out of the way. */
+.ow-carousel--arrows-overlay .ow-carousel__arrow:disabled {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.ow-carousel__play {
+    right: var(--ow-space-sm);
+    bottom: var(--ow-space-sm);
+}
+
+.ow-carousel__dots {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+/* A 24px target around a small dot; the current one stretches into a pill in the primary colour. */
+.ow-carousel__dot {
+    display: inline-flex;
+    width: 24px;
+    height: 24px;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    border: 0;
+    border-radius: 999px;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+}
+
+.ow-carousel__dot::before {
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background: var(--ow-text-muted);
+    content: "";
+    transition-property: width, background-color;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-carousel__dot:hover::before {
+    background: var(--ow-text-soft);
+}
+
+.ow-carousel__dot[aria-current="true"]::before {
+    width: 20px;
+    background: var(--ow-primary);
+}
+
+.ow-carousel__dot[aria-current="true"] {
+    width: 32px;
+}
+
+.ow-carousel__dot:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: -2px;
+}
+
+/* components/DescriptionList/DescriptionList.css */
+/* DescriptionList: terms and their values in a <dl>. Its own width decides the layout (a container query), so it
+   stacks in a narrow card or panel as well as on a phone. */
+.ow-description-list {
+    container: ow-description-list / inline-size;
+    display: grid;
+    margin: 0;
+    color: var(--ow-text);
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.ow-description-item {
+    display: grid;
+    min-width: 0;
+    align-content: start;
+    gap: var(--ow-space-2xs);
+    padding-block: var(--ow-space-lg);
+}
+
+.ow-description-list--compact .ow-description-item {
+    padding-block: var(--ow-space-sm);
+}
+
+.ow-description-item__term {
+    color: var(--ow-text-muted);
+}
+
+.ow-description-item__value {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+
+.ow-description-item__value--action {
+    display: flex;
+    align-items: center;
+    gap: var(--ow-space-lg);
+}
+
+.ow-description-item__content {
+    min-width: 0;
+    flex: 1;
+}
+
+.ow-description-item__action {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--ow-space-2xs);
+    margin-block: -4px;
+}
+
+/* Horizontal and vertical: one pair under another, without space past the first and last. */
+.ow-description-list:not(.ow-description-list--grid) > .ow-description-item:first-child {
+    padding-top: 0;
+}
+
+.ow-description-list:not(.ow-description-list--grid) > .ow-description-item:last-child {
+    padding-bottom: 0;
+}
+
+.ow-description-list--divided:not(.ow-description-list--grid) > .ow-description-item + .ow-description-item {
+    border-top: 1px solid var(--ow-border);
+}
+
+.ow-description-list--horizontal > .ow-description-item {
+    grid-template-columns: var(--ow-description-term-width, 160px) minmax(0, 1fr);
+    align-items: baseline;
+    column-gap: var(--ow-space-2xl);
+}
+
+/* Grid: the pairs in columns, term above value, with a smaller label. A column is at least 160px, so a grid with
+   less room has fewer columns; the items then read the list's width (the container) to keep their spans inside it. */
+.ow-description-list--grid {
+    --ow-description-gap: var(--ow-space-4xl);
+    grid-template-columns: repeat(
+        auto-fill,
+        minmax(max(160px, (100% - (var(--ow-description-columns) - 1) * var(--ow-description-gap)) / var(--ow-description-columns)), 1fr)
+    );
+    column-gap: var(--ow-description-gap);
+}
+
+.ow-description-list--cols-2 {
+    --ow-description-columns: 2;
+}
+
+.ow-description-list--cols-3 {
+    --ow-description-columns: 3;
+}
+
+.ow-description-list--cols-4 {
+    --ow-description-columns: 4;
+}
+
+.ow-description-list--grid .ow-description-item__term {
+    font-size: 12px;
+    font-weight: var(--ow-weight-control);
+}
+
+.ow-description-list--grid.ow-description-list--divided > .ow-description-item {
+    border-top: 1px solid var(--ow-border);
+}
+
+.ow-description-item--span-2 {
+    grid-column: span 2;
+}
+
+.ow-description-item--span-3 {
+    grid-column: span 3;
+}
+
+.ow-description-item--span-4,
+.ow-description-item--span-full,
+.ow-description-list--cols-2 > .ow-description-item--span-3 {
+    grid-column: 1 / -1;
+}
+
+@container ow-description-list (max-width: 519px) {
+    .ow-description-item--span-3 {
+        grid-column: 1 / -1;
+    }
+}
+
+@container ow-description-list (max-width: 419px) {
+    .ow-description-list--horizontal > .ow-description-item {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+@container ow-description-list (max-width: 339px) {
+    .ow-description-item--span-2,
+    .ow-description-item--span-3 {
+        grid-column: auto;
+    }
+}
+
 /* components/Chart/Chart.css */
 /* Charts: thin marks in the chart palette (--ow-chart-1 to 8), hairline grids, text in text colours, never the series'. */
 
@@ -6847,6 +8120,179 @@
     }
 }
 
+/* components/Splitter/Splitter.css */
+/* Splitter: panels with handles between them. A panel's flex-grow is its size in percent. */
+.ow-splitter {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.ow-splitter--vertical {
+    flex-direction: column;
+}
+
+.ow-splitter__panel {
+    flex: 0 1 0px;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+}
+
+.ow-splitter__panel[data-collapsed="hidden"] {
+    visibility: hidden;
+}
+
+/* The line is 1px; the area you can catch is 9px. */
+.ow-splitter__handle {
+    position: relative;
+    flex: none;
+    background: var(--ow-border);
+    outline: none;
+    touch-action: none;
+    transition: background-color var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+.ow-splitter--horizontal > .ow-splitter__handle {
+    width: 1px;
+    cursor: col-resize;
+}
+
+.ow-splitter--vertical > .ow-splitter__handle {
+    height: 1px;
+    cursor: row-resize;
+}
+
+.ow-splitter__handle::before,
+.ow-splitter__handle::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+}
+
+.ow-splitter--horizontal > .ow-splitter__handle::before {
+    inset: 0 -4px;
+}
+
+.ow-splitter--vertical > .ow-splitter__handle::before {
+    inset: -4px 0;
+}
+
+/* The highlight: a 3px bar over the line. */
+.ow-splitter__handle::after {
+    inset: 0 -1px;
+    border-radius: var(--ow-radius-pill);
+    opacity: 0;
+    background: var(--ow-border-strong);
+    transition: opacity var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+.ow-splitter--vertical > .ow-splitter__handle::after {
+    inset: -1px 0;
+}
+
+.ow-splitter__handle:hover::after {
+    opacity: 1;
+}
+
+.ow-splitter__handle[data-dragging]::after,
+.ow-splitter__handle:focus-visible::after {
+    opacity: 1;
+    background: var(--ow-focus-ring);
+}
+
+.ow-splitter__handle[aria-disabled] {
+    cursor: default;
+}
+
+.ow-splitter__handle[aria-disabled]::after {
+    display: none;
+}
+
+/* A grip in the middle of the line. */
+.ow-splitter__handle--grip::after {
+    inset: 50% auto auto 50%;
+    width: 6px;
+    height: 24px;
+    translate: -50% -50%;
+    opacity: 1;
+    border: 1px solid var(--ow-border-strong);
+    background: var(--ow-surface);
+    box-shadow: var(--ow-shadow-control);
+}
+
+.ow-splitter--vertical > .ow-splitter__handle--grip::after {
+    inset: 50% auto auto 50%;
+    width: 24px;
+    height: 6px;
+}
+
+.ow-splitter__handle--grip:hover::after {
+    background: var(--ow-surface-muted);
+}
+
+.ow-splitter__handle--grip[data-dragging]::after,
+.ow-splitter__handle--grip:focus-visible::after {
+    border-color: var(--ow-focus-ring);
+    background: var(--ow-surface);
+    box-shadow: 0 0 0 1px var(--ow-focus-ring);
+}
+
+/* While dragging, the cursor stays a resize one everywhere and nothing gets selected. */
+:root[data-ow-splitter-drag],
+:root[data-ow-splitter-drag] * {
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+:root[data-ow-splitter-drag="horizontal"] * {
+    cursor: col-resize !important;
+}
+
+:root[data-ow-splitter-drag="vertical"] * {
+    cursor: row-resize !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-splitter__handle,
+    .ow-splitter__handle::after {
+        transition: none;
+    }
+}
+
+/* components/AspectRatio/AspectRatio.css */
+/* AspectRatio: a box that keeps its shape, with whatever is inside filling it. The hidden overflow keeps the ratio
+   when the content is taller than the box would be. */
+.ow-aspect-ratio {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    overflow: hidden;
+}
+
+.ow-aspect-ratio > * {
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+}
+
+.ow-aspect-ratio > :is(img, video, iframe, embed, object, picture, canvas, svg) {
+    border: 0;
+    object-fit: cover;
+}
+
+.ow-aspect-ratio > picture > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 /* components/Marketing/Marketing.css */
 /* Marketing patterns from the site: Chip, SectionHeading, SiteHeader and the dot grid. */
 .ow-chip {