@openwarelabs/ui 0.15.0 → 0.16.0

package/dist/styles.css

@@ -2254,6 +2254,99 @@ textarea.ow-inline-edit__input[aria-invalid="true"]:focus {
     }
 }
 
+/* components/TransferList/TransferList.css */
+/* TransferList: two standalone ListBoxes (ListBox.css) with a column of Buttons between them. Its own width decides
+   the layout (a container query): side by side, or stacked with the buttons turned to point down and up. */
+.ow-transfer-list {
+    container: ow-transfer-list / inline-size;
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+}
+
+.ow-transfer-list__body {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    gap: var(--ow-space-lg);
+}
+
+.ow-transfer-list__pane {
+    display: grid;
+    min-width: 0;
+    align-content: start;
+    gap: var(--ow-space-sm);
+}
+
+.ow-transfer-list__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--ow-space-sm);
+}
+
+.ow-transfer-list__label {
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.4;
+}
+
+.ow-transfer-list__count {
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.ow-transfer-list .ow-transfer-list__list {
+    height: var(--ow-transfer-list-height);
+}
+
+.ow-transfer-list__actions {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    gap: var(--ow-space-xs);
+}
+
+.ow-transfer-list__icon {
+    display: flex;
+}
+
+/* The arrows point the way the items go, so they turn round right to left. */
+.ow-transfer-list__icon--back,
+.ow-transfer-list:dir(rtl) .ow-transfer-list__icon {
+    transform: scaleX(-1);
+}
+
+.ow-transfer-list:dir(rtl) .ow-transfer-list__icon--back {
+    transform: none;
+}
+
+.ow-transfer-list__order {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--ow-space-2xs);
+}
+
+@container ow-transfer-list (max-width: 519px) {
+    .ow-transfer-list__body {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .ow-transfer-list__actions {
+        flex-direction: row;
+        justify-content: center;
+    }
+
+    /* Across becomes down: → turns to ↓ and ← to ↑, whichever way the text runs. */
+    .ow-transfer-list .ow-transfer-list__actions .ow-transfer-list__icon {
+        transform: rotate(90deg);
+    }
+
+    .ow-transfer-list .ow-transfer-list__actions .ow-transfer-list__icon--back {
+        transform: rotate(-90deg);
+    }
+}
+
 /* components/Combobox/Combobox.css */
 /* Combobox: a grouped field (Input.css) with a chevron, over Select's listbox. */
 .ow-combobox {
@@ -2342,6 +2435,20 @@ textarea.ow-inline-edit__input[aria-invalid="true"]:focus {
     padding-left: var(--ow-space-2xs);
 }
 
+/* components/MentionInput/MentionInput.css */
+/* MentionInput: an Input or a Textarea, with Select's listbox (Select.css) under the trigger character. */
+.ow-mention-list {
+    width: max-content;
+    min-width: 224px;
+    max-width: min(360px, calc(100vw - 16px));
+}
+
+.ow-mention-list__empty {
+    display: flex;
+    align-items: center;
+    gap: var(--ow-space-xs);
+}
+
 /* components/Checkbox/Checkbox.css */
 /* Checkbox: a native input with its look replaced. */
 .ow-checkbox {
@@ -2967,6 +3074,99 @@ textarea.ow-inline-edit__input[aria-invalid="true"]:focus {
     }
 }
 
+/* components/SignaturePad/SignaturePad.css */
+/* SignaturePad: a field-like box to sign in, on a signing line, with its buttons underneath. */
+.ow-signature-pad {
+    position: relative;
+    display: grid;
+    width: 100%;
+    min-width: 0;
+    gap: var(--ow-space-sm);
+}
+
+.ow-signature-pad__surface {
+    position: relative;
+    height: var(--ow-signature-pad-height, 160px);
+    overflow: hidden;
+    border: 1px solid var(--ow-border-strong);
+    border-radius: var(--ow-radius-form);
+    background: var(--ow-surface);
+    transition-property: border-color, box-shadow;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+/* The ink is this colour (a penColor replaces it); the script reads it from CSS, so it follows the theme. */
+.ow-signature-pad__canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: var(--ow-text);
+    cursor: crosshair;
+    touch-action: none;
+}
+
+.ow-signature-pad--typing .ow-signature-pad__canvas,
+.ow-signature-pad--readonly .ow-signature-pad__canvas,
+.ow-signature-pad--disabled .ow-signature-pad__canvas {
+    cursor: default;
+}
+
+.ow-signature-pad:not(.ow-signature-pad--typing, .ow-signature-pad--readonly, .ow-signature-pad--disabled) .ow-signature-pad__surface:hover {
+    border-color: var(--ow-border-hover);
+}
+
+.ow-signature-pad--drawing .ow-signature-pad__surface {
+    border-color: var(--ow-focus-border);
+    box-shadow: var(--ow-shadow-focus);
+}
+
+.ow-signature-pad--invalid .ow-signature-pad__surface {
+    border-color: var(--ow-danger-line);
+}
+
+/* At 72% of the height, where the script sets a typed name. */
+.ow-signature-pad__line {
+    position: absolute;
+    top: 72%;
+    inset-inline: var(--ow-space-2xl);
+    border-top: 1px dashed var(--ow-border-strong);
+    pointer-events: none;
+}
+
+.ow-signature-pad__prompt {
+    position: absolute;
+    bottom: calc(28% + var(--ow-space-xs));
+    inset-inline-start: var(--ow-space-2xl);
+    color: var(--ow-text-muted);
+    font-size: 14px;
+    line-height: 1.4;
+    pointer-events: none;
+}
+
+.ow-signature-pad__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ow-space-xs);
+}
+
+.ow-signature-pad__edit {
+    display: inline-flex;
+    gap: var(--ow-space-xs);
+    margin-inline-start: auto;
+}
+
+.ow-signature-pad--disabled .ow-signature-pad__surface {
+    opacity: 0.62;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-signature-pad__surface {
+        transition: none;
+    }
+}
+
 /* components/NumberField/NumberField.css */
 /* NumberField: − value + in one field. */
 .ow-number-field {
@@ -3228,6 +3428,198 @@ textarea.ow-inline-edit__input[aria-invalid="true"]:focus {
     color: var(--ow-danger-text);
 }
 
+/* components/UploadList/UploadList.css */
+/* UploadList: a row (or a tile) per file being uploaded, with its progress, status and buttons. */
+.ow-upload-list {
+    width: 100%;
+    min-width: 0;
+}
+
+.ow-upload-list__items {
+    display: grid;
+    gap: var(--ow-space-sm);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-radius: var(--ow-radius-container);
+}
+
+.ow-upload-list__items:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-upload-list__item {
+    position: relative;
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--ow-space-md);
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-surface);
+    padding: var(--ow-space-sm);
+    padding-inline-start: var(--ow-space-md);
+}
+
+.ow-upload-list__item--error {
+    border-color: var(--ow-danger-line);
+}
+
+.ow-upload-list__thumb {
+    position: relative;
+    display: inline-flex;
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: var(--ow-radius-md);
+    background: var(--ow-surface-muted);
+    color: var(--ow-text-muted);
+}
+
+.ow-upload-list__thumb img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.ow-upload-list__body {
+    display: grid;
+    min-width: 0;
+    flex: 1;
+    gap: 2px;
+}
+
+.ow-upload-list__name {
+    overflow: hidden;
+    color: var(--ow-text);
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ow-upload-list__detail {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--ow-space-xs);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    line-height: 1.35;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-upload-list__detail > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ow-upload-list__icon {
+    flex-shrink: 0;
+}
+
+.ow-upload-list__item--done .ow-upload-list__icon {
+    color: var(--ow-success-text);
+}
+
+.ow-upload-list__item--error .ow-upload-list__detail {
+    color: var(--ow-danger-text);
+}
+
+.ow-upload-list__progress {
+    margin-top: var(--ow-space-xs);
+}
+
+.ow-upload-list__actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--ow-space-2xs);
+}
+
+.ow-upload-list__actions:empty {
+    display: none;
+}
+
+/* Compact: one short line per file, its progress a hairline along the bottom. */
+.ow-upload-list--compact .ow-upload-list__items {
+    gap: var(--ow-space-xs);
+}
+
+.ow-upload-list--compact .ow-upload-list__item {
+    gap: var(--ow-space-sm);
+    padding-block: var(--ow-space-2xs);
+}
+
+.ow-upload-list--compact .ow-upload-list__thumb {
+    width: auto;
+    height: auto;
+    background: none;
+}
+
+.ow-upload-list--compact .ow-upload-list__body {
+    display: flex;
+    align-items: baseline;
+    gap: var(--ow-space-sm);
+}
+
+.ow-upload-list--compact .ow-upload-list__name {
+    min-width: 4em;
+    flex: 1 1 auto;
+    font-size: 13px;
+}
+
+.ow-upload-list--compact .ow-upload-list__progress {
+    position: absolute;
+    inset: auto var(--ow-space-md) 2px;
+    margin: 0;
+}
+
+/* Grid: a tile per file, the thumbnail on top and the buttons over its corner. */
+.ow-upload-list--grid .ow-upload-list__items {
+    grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
+    gap: var(--ow-space-md);
+}
+
+.ow-upload-list--grid .ow-upload-list__item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--ow-space-sm);
+    padding: var(--ow-space-xs) var(--ow-space-xs) var(--ow-space-sm);
+}
+
+.ow-upload-list--grid .ow-upload-list__thumb {
+    width: auto;
+    height: auto;
+    aspect-ratio: 1;
+    border-radius: calc(var(--ow-radius-container) - 4px);
+}
+
+.ow-upload-list--grid .ow-upload-list__thumb svg {
+    width: 28px;
+    height: 28px;
+}
+
+.ow-upload-list--grid .ow-upload-list__body {
+    padding-inline: var(--ow-space-xs);
+}
+
+.ow-upload-list--grid .ow-upload-list__actions {
+    position: absolute;
+    inset-block-start: var(--ow-space-sm);
+    inset-inline-end: var(--ow-space-sm);
+    border-radius: var(--ow-radius-md);
+    background: var(--ow-surface);
+    box-shadow: 0 0 0 1px var(--ow-border);
+}
+
 /* components/Field/Field.css */
 /* Field: label, control, hint, error. */
 .ow-field {
@@ -4432,103 +4824,320 @@ textarea.ow-inline-edit__input[aria-invalid="true"]:focus {
         display 220ms allow-discrete;
 }
 
-.ow-drawer[open]::backdrop {
-    background-color: var(--ow-backdrop);
+.ow-drawer[open]::backdrop {
+    background-color: var(--ow-backdrop);
+}
+
+@starting-style {
+    .ow-drawer[open]::backdrop {
+        background-color: rgb(0 0 0 / 0);
+    }
+}
+
+.ow-drawer__header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: flex-start;
+    gap: var(--ow-space-md);
+    border-bottom: 1px solid var(--ow-border);
+    padding: var(--ow-space-lg) var(--ow-space-lg) var(--ow-space-lg) var(--ow-space-3xl);
+}
+
+.ow-drawer__titles {
+    display: grid;
+    min-width: 0;
+    flex: 1;
+    gap: var(--ow-space-2xs);
+    padding-top: 5px;
+}
+
+.ow-drawer__title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: var(--ow-weight-display);
+    line-height: 1.3;
+}
+
+.ow-drawer__description {
+    margin: 0;
+    color: var(--ow-text-muted);
+    font-size: 13px;
+    line-height: 1.5;
+}
+
+.ow-drawer__body {
+    min-height: 0;
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--ow-space-xl) var(--ow-space-3xl);
+}
+
+.ow-drawer__footer {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--ow-space-sm);
+    border-top: 1px solid var(--ow-border);
+    padding: var(--ow-space-lg) var(--ow-space-3xl);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-drawer,
+    .ow-drawer::backdrop {
+        transition: none;
+    }
+}
+
+/* components/Popover/Popover.css */
+/* Popover: a surface card with the menu shadow, attached to its trigger. */
+.ow-popover-anchor {
+    display: inline-flex;
+}
+
+.ow-popover {
+    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-xl);
+    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;
+}
+
+/* Children may shrink to the popover's width instead of pushing past it. */
+.ow-popover > * {
+    min-width: 0;
+}
+
+.ow-popover__title {
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.3;
+}
+
+/* components/NotificationCenter/NotificationCenter.css */
+/* NotificationCenter: a bell with a count, opening a popover inbox. NotificationList: the rows inside it. */
+.ow-notification-center {
+    display: inline-flex;
+}
+
+.ow-notification-center__bell {
+    position: relative;
+}
+
+/* The count sits on the bell's corner, cut out of whatever is behind it. */
+.ow-notification-center__count.ow-badge {
+    position: absolute;
+    top: 0;
+    inset-inline-end: -2px;
+    min-width: 18px;
+    min-height: 18px;
+    border: 2px solid var(--ow-surface);
+    background: var(--ow-primary);
+    padding: 0 4px;
+    color: var(--ow-on-primary);
+    font-size: 10.5px;
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+}
+
+/* Edge-to-edge rows, so the popover's own padding goes; only the list scrolls when the window is short. */
+.ow-notification-center__popover.ow-popover {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    overflow: hidden;
+}
+
+.ow-notification-center__head,
+.ow-notification-center__foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ow-space-md);
+    padding: var(--ow-space-md) var(--ow-space-md) var(--ow-space-xs);
+    padding-inline-start: var(--ow-space-2xl);
+}
+
+.ow-notification-center__title {
+    font-weight: var(--ow-weight-emphasis);
+}
+
+.ow-notification-center__tabs.ow-tabs {
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+    gap: 0;
+}
+
+.ow-notification-center__tabs .ow-tabs__list {
+    padding: 0 var(--ow-space-2xl);
+}
+
+.ow-notification-center__tab-count {
+    border-radius: var(--ow-radius-pill);
+    background: var(--ow-surface-muted);
+    padding: 1px 6px;
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-notification-center__body {
+    min-height: 0;
+    max-height: min(420px, 60dvh);
+    overflow-y: auto;
+    padding: var(--ow-space-xs);
+    outline: none;
+}
+
+.ow-notification-center__body:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--ow-focus-ring);
+}
+
+.ow-notification-center__foot {
+    border-top: 1px solid var(--ow-border);
+    padding-block: var(--ow-space-md);
+}
+
+/* The list. */
+.ow-notification-list__heading {
+    margin: 0;
+    padding: var(--ow-space-lg) var(--ow-space-lg) var(--ow-space-xs);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-weight: var(--ow-weight-strong);
+}
+
+.ow-notification-list__items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* One row: the whole of it opens the item, through the link stretched over it. */
+.ow-notification {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ow-space-lg);
+    border-radius: var(--ow-radius-form);
+    padding-block: var(--ow-space-lg);
+    padding-inline: 22px var(--ow-space-md);
+    color: var(--ow-text-soft);
+    transition: background-color var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+.ow-notification:hover {
+    background: var(--ow-hover);
 }
 
-@starting-style {
-    .ow-drawer[open]::backdrop {
-        background-color: rgb(0 0 0 / 0);
-    }
+.ow-notification__dot {
+    position: absolute;
+    top: 20px;
+    inset-inline-start: 8px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--ow-primary);
 }
 
-.ow-drawer__header {
-    display: flex;
+.ow-notification__media {
+    display: inline-flex;
     flex-shrink: 0;
-    align-items: flex-start;
-    gap: var(--ow-space-md);
-    border-bottom: 1px solid var(--ow-border);
-    padding: var(--ow-space-lg) var(--ow-space-lg) var(--ow-space-lg) var(--ow-space-3xl);
 }
 
-.ow-drawer__titles {
+.ow-notification__icon {
+    display: inline-flex;
+    width: 28px;
+    height: 28px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--ow-border);
+    border-radius: 50%;
+    background: var(--ow-surface-muted);
+    color: var(--ow-text-soft);
+}
+
+.ow-notification__body {
     display: grid;
     min-width: 0;
     flex: 1;
-    gap: var(--ow-space-2xs);
-    padding-top: 5px;
+    gap: var(--ow-space-md);
 }
 
-.ow-drawer__title {
-    margin: 0;
-    font-size: 16px;
-    font-weight: var(--ow-weight-display);
-    line-height: 1.3;
+.ow-notification__main {
+    display: grid;
+    gap: 2px;
+    border: 0;
+    background: none;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
 }
 
-.ow-drawer__description {
-    margin: 0;
-    color: var(--ow-text-muted);
-    font-size: 13px;
-    line-height: 1.5;
+.ow-notification__main::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
 }
 
-.ow-drawer__body {
-    min-height: 0;
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--ow-space-xl) var(--ow-space-3xl);
+.ow-notification__main:focus-visible::after {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: -2px;
 }
 
-.ow-drawer__footer {
-    display: flex;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--ow-space-sm);
-    border-top: 1px solid var(--ow-border);
-    padding: var(--ow-space-lg) var(--ow-space-3xl);
+.ow-notification--unread .ow-notification__title {
+    color: var(--ow-text);
+    font-weight: var(--ow-weight-strong);
 }
 
-@media (prefers-reduced-motion: reduce) {
-    .ow-drawer,
-    .ow-drawer::backdrop {
-        transition: none;
-    }
+.ow-notification__description {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
 }
 
-/* components/Popover/Popover.css */
-/* Popover: a surface card with the menu shadow, attached to its trigger. */
-.ow-popover-anchor {
-    display: inline-flex;
+.ow-notification__time {
+    color: var(--ow-text-muted);
+    font-size: 12px;
 }
 
-.ow-popover {
-    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-xl);
-    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;
+/* Actions and the ✕ sit above the stretched link, so they take their own clicks. */
+.ow-notification__actions,
+.ow-notification__dismiss {
+    position: relative;
+    z-index: 1;
 }
 
-/* Children may shrink to the popover's width instead of pushing past it. */
-.ow-popover > * {
-    min-width: 0;
+.ow-notification__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ow-space-sm);
 }
 
-.ow-popover__title {
-    font-size: 14px;
-    font-weight: var(--ow-weight-emphasis);
-    line-height: 1.3;
+.ow-notification__dismiss {
+    flex-shrink: 0;
+    margin: -4px 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-notification {
+        transition: none;
+    }
 }
 
 /* components/Tour/Tour.css */
@@ -6783,6 +7392,25 @@ textarea.ow-inline-edit__input[aria-invalid="true"]:focus {
     white-space: nowrap;
 }
 
+/* components/QRCode/QRCode.css */
+/* QRCode: near black on near white in both themes, since scanners need a light ground and strong contrast. */
+.ow-qr-code {
+    display: block;
+    flex: none;
+    max-width: 100%;
+    height: auto;
+    forced-color-adjust: none;
+    print-color-adjust: exact;
+}
+
+.ow-qr-code__ground {
+    fill: var(--ow-gray-50);
+}
+
+.ow-qr-code__modules {
+    fill: var(--ow-gray-950);
+}
+
 /* 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. */
@@ -6804,63 +7432,227 @@ textarea.ow-inline-edit__input[aria-invalid="true"]:focus {
     transition: opacity var(--ow-duration-base) var(--ow-ease-standard);
 }
 
-.ow-image--cover .ow-image__img {
-    object-fit: cover;
+.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/MediaPlayer/MediaPlayer.css */
+/* MediaPlayer: audio is a bar of controls; video is the picture, with the same bar floating over its foot. */
+.ow-media {
+    position: relative;
+    container-type: inline-size;
+    border-radius: var(--ow-radius-container);
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+}
+
+.ow-media:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-media--audio {
+    display: grid;
+    gap: var(--ow-space-2xs);
+    border: 1px solid var(--ow-border);
+    background: var(--ow-surface);
+    padding: var(--ow-space-xs);
+}
+
+.ow-media--audio .ow-media__element {
+    display: none;
+}
+
+.ow-media__title {
+    overflow: hidden;
+    padding: var(--ow-space-2xs) var(--ow-space-xs) 0;
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ow-media--video {
+    overflow: hidden;
+    background: var(--ow-gray-950);
+}
+
+/* Letterboxed, never cropped. */
+.ow-media__screen > .ow-media__element {
+    object-fit: contain;
+    cursor: pointer;
+}
+
+.ow-media__controls {
+    display: flex;
+    align-items: center;
+    gap: var(--ow-space-2xs);
+    min-width: 0;
+}
+
+.ow-media--video .ow-media__controls {
+    position: absolute;
+    inset-inline: var(--ow-space-sm);
+    bottom: var(--ow-space-sm);
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-lg);
+    background: var(--ow-surface);
+    padding: var(--ow-space-2xs);
+    box-shadow: var(--ow-shadow-menu);
+    transition: opacity var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+/* Playing and left alone: the controls fade out (still reachable with Tab, which brings them back) and so does the pointer. */
+.ow-media--idle {
+    cursor: none;
+}
+
+.ow-media--idle .ow-media__controls {
+    opacity: 0;
+    pointer-events: none;
+}
+
+/* Captions rise above the controls while they show (Chromium and Safari let the page move them). */
+.ow-media__element::-webkit-media-text-track-container {
+    transition: transform var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-media--video:not(.ow-media--idle) .ow-media__element::-webkit-media-text-track-container {
+    transform: translateY(-56px);
+}
+
+/* The timeline reads left to right in every language, as players do; the loaded part is a shade darker than the rest. */
+.ow-media__seek {
+    flex: 1;
+    min-width: 48px;
+    direction: ltr;
 }
 
-.ow-image--contain .ow-image__img {
-    object-fit: contain;
+.ow-media__seek .ow-slider__track {
+    background: linear-gradient(to right, var(--ow-border-strong) var(--ow-media-buffered), var(--ow-meter-track) 0);
 }
 
-.ow-image--radius-control {
-    border-radius: var(--ow-radius-form);
+.ow-media__volume {
+    width: 72px;
 }
 
-.ow-image--radius-container {
-    border-radius: var(--ow-radius-container);
+.ow-media__time {
+    padding-inline: var(--ow-space-2xs);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
 }
 
-/* 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-media__rate {
+    min-width: 44px;
+    font-variant-numeric: tabular-nums;
 }
 
-.ow-image--loading .ow-image__img {
-    opacity: 0;
+.ow-media__controls [aria-pressed="true"],
+.ow-media__on {
+    background: var(--ow-surface-muted);
+    color: var(--ow-primary-text);
 }
 
-.ow-image__fallback {
+.ow-media__blank {
+    display: block;
+    width: 15px;
+    height: 15px;
+}
+
+.ow-media--fullscreen {
     display: flex;
-    box-sizing: border-box;
-    min-width: 64px;
-    max-width: 100%;
-    min-height: 64px;
     align-items: center;
-    justify-content: center;
+    border-radius: 0;
 }
 
-.ow-image__fallback--default {
-    background: var(--ow-skeleton-soft);
-    color: var(--ow-icon);
+/* AspectRatio sets its ratio inline; full screen, the picture takes the whole screen instead. */
+.ow-media--fullscreen .ow-media__screen {
+    height: 100%;
+    aspect-ratio: auto !important;
 }
 
-.ow-image-figure {
-    display: grid;
-    margin: 0;
-    gap: var(--ow-space-sm);
-    justify-items: start;
+@container (max-width: 440px) {
+    .ow-media__volume,
+    .ow-media__pip {
+        display: none;
+    }
 }
 
-.ow-image-figure > .ow-aspect-ratio {
-    justify-self: stretch;
+/* On a phone the device's buttons set the volume; M still mutes. */
+@container (max-width: 360px) {
+    .ow-media--video .ow-media__mute {
+        display: none;
+    }
 }
 
-.ow-image-figure__caption {
-    color: var(--ow-text-muted);
-    font-family: var(--ow-font-sans);
-    font-size: 13px;
-    line-height: 1.4;
+@container (max-width: 240px) {
+    .ow-media__time {
+        display: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-media__controls,
+    .ow-media__element::-webkit-media-text-track-container {
+        transition: none !important;
+    }
 }
 
 /* components/Kbd/Kbd.css */
@@ -7092,6 +7884,159 @@ textarea.ow-inline-edit__input[aria-invalid="true"]:focus {
     transform: none;
 }
 
+/* components/DiffViewer/DiffViewer.css */
+/* DiffViewer: a code block's ground and header (it uses CodeBlock's classes), with a table of lines tinted from the
+   success and danger colours. The code block is dark in both themes, so the tints are too. */
+.ow-diff {
+    --ow-diff-add: var(--ow-success-solid);
+    --ow-diff-del: var(--ow-danger-solid);
+    display: grid;
+    min-width: 0;
+    gap: var(--ow-space-md);
+}
+
+.ow-diff__counts {
+    font-family: var(--ow-font-mono);
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+/* Signs and counts are lifted toward the text colour so they read on the tints. */
+.ow-diff__added,
+.ow-diff__add > .ow-diff__sign {
+    color: color-mix(in srgb, var(--ow-diff-add) 60%, var(--ow-on-code-block));
+}
+
+.ow-diff__removed,
+.ow-diff__del > .ow-diff__sign {
+    color: color-mix(in srgb, var(--ow-diff-del) 60%, var(--ow-on-code-block));
+}
+
+.ow-diff__scroll {
+    overflow: auto;
+}
+
+.ow-diff__scroll:focus-visible {
+    outline: 2px solid var(--ow-brand-300);
+    outline-offset: -2px;
+}
+
+.ow-diff__table {
+    min-width: 100%;
+    border-collapse: collapse;
+    font-family: var(--ow-font-mono);
+    font-size: 13px;
+    line-height: 1.6;
+    tab-size: 4;
+}
+
+.ow-diff__table--wrap {
+    width: 100%;
+    table-layout: fixed;
+}
+
+/* Cells have no padding of their own; the classes below add it. */
+:where(.ow-diff__table td) {
+    padding: 0;
+    vertical-align: top;
+}
+
+.ow-diff__num-col {
+    width: calc(var(--ow-diff-digits) * 1ch + 20px);
+}
+
+.ow-diff__num {
+    padding-inline: 10px;
+    color: var(--ow-on-code-block-muted);
+    text-align: right;
+    user-select: none;
+}
+
+/* The sign hangs in the margin, so wrapped lines line up under the code. */
+.ow-diff__code {
+    padding: 0 var(--ow-space-lg) 0 calc(var(--ow-space-sm) + 2ch);
+    text-indent: -2ch;
+    white-space: pre;
+}
+
+.ow-diff__table--wrap .ow-diff__code {
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+}
+
+.ow-diff__code:focus {
+    outline: none;
+}
+
+.ow-diff__sign {
+    display: inline-block;
+    width: 2ch;
+    text-indent: 0;
+    user-select: none;
+}
+
+.ow-diff__add {
+    background: color-mix(in srgb, var(--ow-diff-add) 14%, transparent);
+}
+
+.ow-diff__del {
+    background: color-mix(in srgb, var(--ow-diff-del) 14%, transparent);
+}
+
+.ow-diff__word {
+    border-radius: 2px;
+    background: color-mix(in srgb, var(--ow-diff-add) 34%, transparent);
+}
+
+.ow-diff__del .ow-diff__word {
+    background: color-mix(in srgb, var(--ow-diff-del) 34%, transparent);
+}
+
+.ow-diff__empty {
+    background: color-mix(in srgb, var(--ow-on-code-block) 3%, transparent);
+}
+
+.ow-diff__table--split .ow-diff__num:nth-child(3) {
+    border-left: 1px solid color-mix(in srgb, var(--ow-on-code-block) 8%, transparent);
+}
+
+.ow-diff__hunk > td,
+.ow-diff__gap > td {
+    background: color-mix(in srgb, var(--ow-on-code-block) 5%, transparent);
+    color: var(--ow-on-code-block-muted);
+}
+
+.ow-diff__hunk > td {
+    padding: 2px var(--ow-space-lg);
+    white-space: pre;
+}
+
+.ow-diff__expand {
+    display: flex;
+    width: 100%;
+    min-height: 28px;
+    align-items: center;
+    gap: var(--ow-space-sm);
+    border: 0;
+    background: transparent;
+    padding: 0 var(--ow-space-lg);
+    color: inherit;
+    font: inherit;
+    font-family: var(--ow-font-sans);
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.ow-diff__expand:hover {
+    background: color-mix(in srgb, var(--ow-on-code-block) 6%, transparent);
+    color: var(--ow-on-code-block);
+}
+
+.ow-diff__expand:focus-visible {
+    outline: 2px solid var(--ow-brand-300);
+    outline-offset: -2px;
+}
+
 /* components/Tag/Tag.css */
 /* Tag, TagGroup and ColorSwatch. */
 .ow-tag-group {
@@ -8225,6 +9170,113 @@ textarea.ow-inline-edit__input[aria-invalid="true"]:focus {
     }
 }
 
+/* components/ActivityHeatmap/ActivityHeatmap.css */
+/* ActivityHeatmap: a square per day, shaded from the empty track to one chart colour, so the shades follow the theme. */
+.ow-heatmap {
+    --ow-heatmap-cell: 12px;
+    display: grid;
+    min-width: 0;
+    gap: var(--ow-space-xs);
+    color: var(--ow-text-muted);
+    font-size: 11.5px;
+    line-height: 1;
+}
+
+/* It scrolls sideways inside itself on a narrow screen, never the page. */
+.ow-heatmap__scroll {
+    min-width: 0;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+}
+
+/* The spacing round the edge leaves room for the focus ring. */
+.ow-heatmap__grid {
+    border-collapse: separate;
+    border-spacing: max(3px, calc(var(--ow-heatmap-cell) / 4));
+}
+
+.ow-heatmap__grid th,
+.ow-heatmap__grid td {
+    padding: 0;
+}
+
+.ow-heatmap__grid th {
+    font-weight: var(--ow-weight-regular);
+    text-align: start;
+    white-space: nowrap;
+}
+
+/* A month's name starts over its first week and runs on over the next, without widening the columns. */
+.ow-heatmap__month {
+    position: relative;
+    height: 1.3em;
+}
+
+.ow-heatmap__month span {
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+}
+
+.ow-heatmap__grid .ow-heatmap__weekday {
+    padding-inline-end: 4px;
+    font-size: 11px;
+}
+
+.ow-heatmap__cell {
+    width: var(--ow-heatmap-cell);
+    height: var(--ow-heatmap-cell);
+    border-radius: 3px;
+}
+
+.ow-heatmap__day {
+    display: block;
+    width: var(--ow-heatmap-cell);
+    height: var(--ow-heatmap-cell);
+    border: 0;
+    border-radius: 3px;
+    background: color-mix(in oklab, var(--ow-heatmap-color) var(--ow-heatmap-mix, 0%), var(--ow-meter-track));
+    padding: 0;
+}
+
+button.ow-heatmap__day {
+    cursor: pointer;
+}
+
+.ow-heatmap__cell:hover > .ow-heatmap__day {
+    box-shadow: inset 0 0 0 1px var(--ow-text-muted);
+}
+
+.ow-heatmap [data-date]:focus {
+    outline: none;
+}
+
+.ow-heatmap [data-date]:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 1px;
+}
+
+.ow-heatmap__legend {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--ow-heatmap-cell) / 4);
+}
+
+.ow-heatmap__legend > :first-child {
+    margin-inline-start: 4px;
+}
+
+.ow-heatmap__legend > :last-child {
+    margin-inline-end: 4px;
+}
+
+@media (forced-colors: active) {
+    .ow-heatmap__day {
+        forced-color-adjust: none;
+    }
+}
+
 /* components/FileTree/FileTree.css */
 /* FileTree: a project structure explorer. Monospace names, hairline guides, a tinted selected file. */
 .ow-tree,
@@ -10205,6 +11257,44 @@ textarea.ow-inline-edit__input[aria-invalid="true"]:focus {
     }
 }
 
+/* components/Markdown/Markdown.css */
+/* Markdown: Prose does the typography; this is only the caret that follows a streaming answer's last character. */
+.ow-markdown__caret {
+    display: inline-block;
+    width: 2px;
+    height: 1.15em;
+    margin-inline-start: 2px;
+    border-radius: 1px;
+    background: currentColor;
+    vertical-align: -0.2em;
+    animation: ow-markdown-caret 1s var(--ow-ease-standard) infinite;
+}
+
+@keyframes ow-markdown-caret {
+    0%,
+    100% {
+        opacity: 0.9;
+    }
+    50% {
+        opacity: 0.15;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-markdown__caret {
+        opacity: 0.6;
+        animation: none;
+    }
+}
+
+/* Forced colours drop backgrounds: draw the caret in the text colour. */
+@media (forced-colors: active) {
+    .ow-markdown__caret {
+        forced-color-adjust: none;
+        background: CanvasText;
+    }
+}
+
 /* components/TextShimmer/TextShimmer.css */
 /* TextShimmer: muted text with a band of full-strength text sweeping across it. */
 .ow-shimmer {