@threadlabs/looma 0.10.11 → 0.11.0

package/editor/icons.d.ts

@@ -4,16 +4,20 @@ export declare const LOOMA_ICONS: {
     'align-center': IconNode;
     'align-left': IconNode;
     'align-right': IconNode;
+    'arrow-left': IconNode;
     bold: IconNode;
     braces: IconNode;
     'circle-check': IconNode;
     'circle-x': IconNode;
     'chevron-down': IconNode;
     'chevron-left': IconNode;
+    'chevron-right': IconNode;
     'code-xml': IconNode;
     columns: IconNode;
     ellipsis: IconNode;
     eraser: IconNode;
+    'file-text': IconNode;
+    folder: IconNode;
     'grip-horizontal': IconNode;
     'grip-vertical': IconNode;
     'heading-1': IconNode;
@@ -26,6 +30,7 @@ export declare const LOOMA_ICONS: {
     list: IconNode;
     'list-ordered': IconNode;
     'list-todo': IconNode;
+    loader: IconNode;
     merge: IconNode;
     'notebook-pen': IconNode;
     minus: IconNode;

package/editor/index.js

@@ -1,23 +1,27 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS } from "./chunks/table-backgrounds.js";
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
 import { A as LOOMA_ACTIVE_BLOCK_CLASS, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, M as LoomaActiveBlock, N as LoomaActiveBlockPluginKey, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, k as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "./chunks/extensions.js";
-import { AlignCenter, AlignLeft, AlignRight, Bold, Braces, ChevronDown, ChevronLeft, CircleCheck, CircleX, CodeXml, Columns3, Ellipsis, Eraser, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, List, ListOrdered, ListTodo, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pilcrow, Plus, Quote, Redo2, Rows3, Split, Strikethrough, Table2, Trash2, TriangleAlert, Underline, Undo2 } from "lucide";
+import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bold, Braces, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleX, CodeXml, Columns3, Ellipsis, Eraser, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pilcrow, Plus, Quote, Redo2, Rows3, Split, Strikethrough, Table2, Trash2, TriangleAlert, Underline, Undo2 } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
 var LOOMA_ICONS = {
 	"align-center": AlignCenter,
 	"align-left": AlignLeft,
 	"align-right": AlignRight,
+	"arrow-left": ArrowLeft,
 	bold: Bold,
 	braces: Braces,
 	"circle-check": CircleCheck,
 	"circle-x": CircleX,
 	"chevron-down": ChevronDown,
 	"chevron-left": ChevronLeft,
+	"chevron-right": ChevronRight,
 	"code-xml": CodeXml,
 	columns: Columns3,
 	ellipsis: Ellipsis,
 	eraser: Eraser,
+	"file-text": FileText,
+	folder: Folder,
 	"grip-horizontal": GripHorizontal,
 	"grip-vertical": GripVertical,
 	"heading-1": Heading1,
@@ -30,6 +34,7 @@ var LOOMA_ICONS = {
 	list: List,
 	"list-ordered": ListOrdered,
 	"list-todo": ListTodo,
+	loader: LoaderCircle,
 	merge: Merge,
 	"notebook-pen": NotebookPen,
 	minus: Minus,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.10.11",
+  "version": "0.11.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-avatar-group.css

@@ -1,10 +1,10 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
 @scope ([data-component~="ui-avatar-group"]) to ([data-component], [data-slotted]) {
 :scope {
-      /* Avatars separate with a tight, crisp edge, matching Looma's 1px borders rather than the
-       * diffuse elevation overlays use. */
-      --_overlap-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.22);
-      --_edge-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
+      /* Each avatar is ringed in the surface colour, so where one overlaps the next it reads as a
+       * whole circle set on top, not a shape cut into the one beneath. */
+      --_overlap-shadow: 0 0 0 0 transparent;
+      --_edge-ring: 0 0 0 2px var(--ui-surface);
 
       display: flex;
       align-items: center;
@@ -16,7 +16,7 @@
      * component roots outside this style scope. */
 
     .overflow {
-      margin-inline-start: -0.625rem;
+      margin-inline-start: -0.5rem;
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -48,7 +48,7 @@
 /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
      * component roots outside this style scope. */
     :where([data-slotted], [data-slotted] *):is(*) {
-      margin-inline-start: -0.625rem;
+      margin-inline-start: -0.5rem;
       flex-shrink: 0;
       border-radius: 999px;
     }

package/styles/ui-breadcrumb-item.css

@@ -0,0 +1,57 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-breadcrumb-item"]) to ([data-component], [data-slotted]) {
+/* One step in a ui-breadcrumbs trail: a link up to that place, or the current view. A chevron leads
+       every step but the first. An icon slotted before the name sits with it. */
+    :scope {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+    }
+
+    .separator {
+      display: inline-flex;
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-xs);
+    }
+
+    :scope:first-child .separator {
+      display: none;
+    }
+
+    .content {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+    }
+
+    :scope[data-ui-breadcrumb-item-state~="current"] .content {
+      color: var(--ui-text-primary);
+      font-weight: var(--ui-font-medium);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-breadcrumb-item"]) to ([data-component]) {
+/* One step in a ui-breadcrumbs trail: a link up to that place, or the current view. A chevron leads
+       every step but the first. An icon slotted before the name sits with it. */
+
+    .content > :where([data-slotted], [data-slotted] *):is(a) {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-1);
+      color: var(--ui-text-secondary);
+      text-decoration: none;
+    }
+
+    .content > :where([data-slotted], [data-slotted] *):is(a:hover) {
+      color: var(--ui-text-primary);
+      text-decoration: underline;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-breadcrumbs.css

@@ -0,0 +1,32 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-breadcrumbs"]) to ([data-component], [data-slotted]) {
+/* Where a view sits: a trail of ui-breadcrumb-item, from the top down to the current view. It wraps
+       rather than scrolls, so every step stays reachable. */
+    :scope {
+      display: block;
+      min-inline-size: 0;
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    ol {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-1) var(--ui-space-2);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-breadcrumbs"]) to ([data-component]) {
+/* Where a view sits: a trail of ui-breadcrumb-item, from the top down to the current view. It wraps
+       rather than scrolls, so every step stays reachable. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-card.css

@@ -0,0 +1,51 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-card"]) to ([data-component], [data-slotted]) {
+/* A surface that groups content. Its children stack with even space between them, so a card
+       needs no layout of its own. */
+    :scope {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-space-4);
+      box-sizing: border-box;
+      min-inline-size: 0;
+      padding: var(--ui-space-5);
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-lg);
+      background: var(--ui-surface-raised);
+      color: var(--ui-text-primary);
+    }
+
+    :scope[data-ui-card-state~="padding=sm"] {
+      gap: var(--ui-space-2);
+      padding: var(--ui-space-3);
+    }
+
+    :scope[data-ui-card-state~="padding=lg"] {
+      padding: var(--ui-space-6);
+    }
+
+    :scope[data-ui-card-state~="variant=subtle"] {
+      border-color: transparent;
+      background: var(--ui-surface-muted);
+    }
+
+    :scope[data-ui-card-state~="variant=elevated"] {
+      border-color: var(--ui-border-subtle);
+      box-shadow: var(--ui-shadow-lg);
+    }
+
+    :scope[data-ui-card-state~="tone=danger"] {
+      border-color: var(--ui-danger);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-card"]) to ([data-component]) {
+/* A surface that groups content. Its children stack with even space between them, so a card
+       needs no layout of its own. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-cover.css

@@ -0,0 +1,35 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-cover"]) to ([data-component], [data-slotted]) {
+/* A layout primitive that centres its content in the space, both ways, with room around it: the
+       frame for a view that is one card or one message. */
+    :scope {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--ui-space-6);
+      box-sizing: border-box;
+      min-block-size: 100dvh;
+      padding: var(--ui-space-6) var(--ui-space-4);
+    }
+
+    :scope[data-ui-cover-state~="size=fill"] {
+      flex: 1;
+      min-block-size: 100%;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-cover"]) to ([data-component]) {
+/* A layout primitive that centres its content in the space, both ways, with room around it: the
+       frame for a view that is one card or one message. */
+
+    :scope > :where([data-slotted], [data-slotted] *):is(*) {
+      max-inline-size: 100%;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-description-item.css

@@ -0,0 +1,43 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-description-item"]) to ([data-component], [data-slotted]) {
+/* One term and its value in a ui-description-list, laid out by the list's layout. */
+    :scope {
+      display: var(--_ui-description-display, grid);
+      grid-column: var(--_ui-description-column, 1 / -1);
+      grid-template-columns: subgrid;
+      flex-direction: column;
+      align-items: var(--_ui-description-align, baseline);
+      gap: var(--ui-space-1) var(--ui-space-6);
+      min-inline-size: 0;
+      padding: var(--_ui-description-padding, 0);
+      border-width: var(--_ui-description-border-width, 0);
+      border-style: solid;
+      border-color: var(--ui-border-default);
+      border-radius: var(--ui-radius-md);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    dt {
+      color: var(--ui-text-muted);
+    }
+
+    dd {
+      margin: 0;
+      min-inline-size: 0;
+      color: var(--ui-text-primary);
+      font-weight: var(--ui-font-medium);
+      font-size: var(--_ui-description-value-size, inherit);
+      text-align: start;
+      overflow-wrap: anywhere;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-description-item"]) to ([data-component]) {
+/* One term and its value in a ui-description-list, laid out by the list's layout. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-description-list.css

@@ -0,0 +1,38 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-description-list"]) to ([data-component], [data-slotted]) {
+/* Named values: a term and what it is, for each item (ui-description-item). */
+    /* Rows line every term up in one column and every value in the next, through subgrid. */
+    :scope {
+      display: grid;
+      grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
+      gap: var(--ui-space-2) var(--ui-space-6);
+      min-inline-size: 0;
+      margin: 0;
+    }
+
+    /* Tiles pass their shape to the items through private properties, which cross into each item. */
+    :scope[data-ui-description-list-state~="layout=tiles"] {
+      --_ui-description-display: flex;
+      --_ui-description-column: auto;
+      --_ui-description-align: flex-start;
+      --_ui-description-value-size: var(--ui-font-size-lg);
+      --_ui-description-padding: var(--ui-space-3);
+      --_ui-description-border-width: 1px;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
+      gap: var(--ui-space-3);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-description-list"]) to ([data-component]) {
+/* Named values: a term and what it is, for each item (ui-description-item). */
+    /* Rows line every term up in one column and every value in the next, through subgrid. */
+
+    /* Tiles pass their shape to the items through private properties, which cross into each item. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-list-item.css

@@ -0,0 +1,146 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-list-item"]) to ([data-component], [data-slotted]) {
+/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+    :scope {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      gap: var(--ui-list-item-gap, var(--ui-space-3));
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size, 2.5rem);
+      padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
+      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+      border-radius: var(--ui-radius-md);
+      color: var(--ui-text-primary);
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :scope[data-ui-list-item-state~="variant=card"] {
+      padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
+      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-lg);
+      background: var(--ui-surface-raised);
+    }
+
+    :scope:has(.title a[href]:hover) {
+      background: var(--ui-surface-hover);
+    }
+
+    :scope[data-ui-list-item-state~="variant=card"]:has(.title a[href]:hover) {
+      border-color: var(--ui-border-strong);
+    }
+
+    :scope[data-ui-list-item-state~="current"] {
+      background: var(--ui-surface-hover);
+    }
+
+    :scope:has(.title a[href]:focus-visible) {
+      box-shadow: 0 0 0 2px var(--ui-focus-ring);
+    }
+
+    .leading,
+    .trailing {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      gap: var(--ui-space-2);
+    }
+
+    .leading {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-list-item-icon-size, var(--ui-font-size-lg));
+    }
+
+    /* Trailing controls take their own clicks, above the title link's stretched hit area. */
+    .trailing {
+      position: relative;
+      z-index: 1;
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    .content {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: var(--ui-space-0-5, 2px);
+      min-inline-size: 0;
+    }
+
+    .title,
+    .description {
+      display: block;
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .title {
+      font-size: var(--ui-font-size-md);
+      font-weight: var(--ui-font-medium);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    .description {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    /* An unused region takes no space. */
+    .leading:empty,
+    .description:empty,
+    .trailing:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-list-item"]) to ([data-component]) {
+/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+
+    /* Trailing controls take their own clicks, above the title link's stretched hit area. */
+
+    .title > :where([data-slotted], [data-slotted] *):is(a) {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .title > :where([data-slotted], [data-slotted] *):is(a:focus-visible) {
+      outline: none;
+      box-shadow: none;
+    }
+
+    .title > :where([data-slotted], [data-slotted] *):is(a[href])::after {
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      content: "";
+    }
+
+    /* An unused region takes no space. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-list.css

@@ -0,0 +1,33 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-list"]) to ([data-component], [data-slotted]) {
+/* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+    :scope {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-list-gap, var(--ui-space-1));
+      min-inline-size: 0;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    :scope[data-ui-list-state~="layout=grid"] {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
+      gap: var(--ui-list-gap, var(--ui-space-3));
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-list"]) to ([data-component]) {
+/* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-page-header.css

@@ -0,0 +1,89 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-page-header"]) to ([data-component], [data-slotted]) {
+/* The top of a view: its title (the page's one h1), with an optional icon or mark before it, a
+       short eyebrow above it, a line or two of description under it, and the view's own actions at
+       the end. Every view titles itself the same way, at the same size. */
+    :scope {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-3) var(--ui-space-4);
+      min-inline-size: 0;
+    }
+
+    .leading {
+      display: inline-flex;
+      flex: none;
+      align-self: center;
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-2xl);
+    }
+
+    .copy {
+      display: flex;
+      flex: 1 1 16rem;
+      flex-direction: column;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+    }
+
+    .eyebrow {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-xs);
+      font-weight: var(--ui-font-semibold);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .title {
+      margin: 0;
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-2xl);
+      font-weight: var(--ui-font-bold, 700);
+      line-height: var(--ui-line-height-tight);
+      overflow-wrap: anywhere;
+    }
+
+    .description {
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-md);
+      line-height: var(--ui-line-height);
+    }
+
+    .actions {
+      display: inline-flex;
+      flex: none;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-2);
+    }
+
+    :scope[data-ui-page-header-state~="align=center"] {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    :scope[data-ui-page-header-state~="align=center"] .copy {
+      align-items: center;
+      flex-basis: auto;
+    }
+
+    .leading:empty,
+    .eyebrow:empty,
+    .description:empty,
+    .actions:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-page-header"]) to ([data-component]) {
+/* The top of a view: its title (the page's one h1), with an optional icon or mark before it, a
+       short eyebrow above it, a line or two of description under it, and the view's own actions at
+       the end. Every view titles itself the same way, at the same size. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}