@ponchia/ui 0.6.12 → 0.8.0

package/classes/index.js

@@ -25,6 +25,8 @@ export const cls = Object.freeze({
   buttonIcon: 'ui-button--icon',
   buttonSm: 'ui-button--sm',
   buttonLg: 'ui-button--lg',
+  buttonDense: 'ui-button--dense',
+  buttonLabel: 'ui-button__label',
   card: 'ui-card',
   cardHead: 'ui-card__head',
   cardAccent: 'ui-card--accent',
@@ -58,6 +60,10 @@ export const cls = Object.freeze({
   linkCta: 'ui-link--cta',
   keyValue: 'ui-key-value',
   emptyState: 'ui-empty-state',
+  emptyStateInvite: 'ui-empty-state--invite',
+  emptyStateGlyph: 'ui-empty-state__glyph',
+  emptyStateLead: 'ui-empty-state__lead',
+  emptyStateHint: 'ui-empty-state__hint',
   // dots
   dot: 'ui-dot',
   dotAccent: 'ui-dot--accent',
@@ -597,6 +603,12 @@ export const cls = Object.freeze({
   jobBlocked: 'ui-job--blocked',
   jobFailed: 'ui-job--failed',
   jobComplete: 'ui-job--complete',
+  // severity ladder — the second axis of state (css/state.css)
+  severity: 'ui-severity',
+  severityDot: 'ui-severity-dot',
+  severityRow: 'ui-severity-row',
+  severityRowTitle: 'ui-severity-row__title',
+  severityRowMeta: 'ui-severity-row__meta',
   // generated content / AI-trust surfaces (css/generated.css)
   generated: 'ui-generated',
   generatedLabel: 'ui-generated__label',
@@ -616,11 +628,22 @@ export const cls = Object.freeze({
   toolstrip: 'ui-toolstrip',
   toolstripFloating: 'ui-toolstrip--floating',
   toolstripCompact: 'ui-toolstrip--compact',
+  toolstripPane: 'ui-toolstrip--pane',
+  toolstripAnchored: 'ui-toolstrip--anchored',
+  toolstripAnchorBlockStart: 'ui-toolstrip--anchor-block-start',
+  toolstripAnchorBlockEnd: 'ui-toolstrip--anchor-block-end',
   toolstripBrand: 'ui-toolstrip__brand',
   toolstripContext: 'ui-toolstrip__context',
   toolstripGroup: 'ui-toolstrip__group',
   toolstripActions: 'ui-toolstrip__actions',
+  toolstripFill: 'ui-toolstrip__fill',
   toolstripSearch: 'ui-toolstrip__search',
+  pane: 'ui-pane',
+  paneHead: 'ui-pane__head',
+  paneTitle: 'ui-pane__title',
+  paneTitleInput: 'ui-pane__title-input',
+  paneActions: 'ui-pane__actions',
+  paneBody: 'ui-pane__body',
   segmentedButtons: 'ui-segmented-buttons',
   segmentedButtonsButton: 'ui-segmented-buttons__button',
   property: 'ui-property',
@@ -629,6 +652,9 @@ export const cls = Object.freeze({
   selectionbar: 'ui-selectionbar',
   selectionbarCount: 'ui-selectionbar__count',
   selectionbarActions: 'ui-selectionbar__actions',
+  selectionbarAnchored: 'ui-selectionbar--anchored',
+  selectionbarAnchorBlockStart: 'ui-selectionbar--anchor-block-start',
+  selectionbarAnchorBlockEnd: 'ui-selectionbar--anchor-block-end',
   splitter: 'ui-splitter',
   splitterVertical: 'ui-splitter--vertical',
   splitterHorizontal: 'ui-splitter--horizontal',
@@ -934,6 +960,7 @@ export const ui = {
       icon && cls.buttonIcon,
       size === 'sm' && cls.buttonSm,
       size === 'lg' && cls.buttonLg,
+      size === 'dense' && cls.buttonDense,
     ),
   card: ({ accent, interactive } = {}) =>
     j(cls.card, accent && cls.cardAccent, interactive && cls.cardInteractive),
@@ -1092,8 +1119,41 @@ export const ui = {
   state: ({ state, busy } = {}) => j(cls.state, stateTone(state), busy && cls.stateBusy),
   job: ({ state, compact } = {}) => j(cls.job, jobTone(state), compact && cls.jobCompact),
   originLabel: ({ ai } = {}) => j(cls.originLabel, ai && cls.originLabelAi),
+  emptyState: ({ invite } = {}) => j(cls.emptyState, invite && cls.emptyStateInvite),
+  toolstrip: ({ variant, anchor } = {}) =>
+    j(
+      cls.toolstrip,
+      variant === 'floating' && cls.toolstripFloating,
+      variant === 'compact' && cls.toolstripCompact,
+      variant === 'pane' && cls.toolstripPane,
+      anchor && cls.toolstripAnchored,
+      anchor === 'block-start' && cls.toolstripAnchorBlockStart,
+      anchor === 'block-end' && cls.toolstripAnchorBlockEnd,
+    ),
+  selectionbar: ({ anchor } = {}) =>
+    j(
+      cls.selectionbar,
+      anchor && cls.selectionbarAnchored,
+      anchor === 'block-start' && cls.selectionbarAnchorBlockStart,
+      anchor === 'block-end' && cls.selectionbarAnchorBlockEnd,
+    ),
 };
 
+/** The canonical severity ladder, worst to best. `unknown` is deliberately NOT
+ *  in the ordering — it means "not measured", not "nearly ok", and sorting it
+ *  next to `ok` is how a dead collector reads as a healthy system. Exported as
+ *  data so a host can drive filters and sorts from the same list the CSS
+ *  paints, instead of re-typing the tiers. */
+export const SEVERITY_LEVELS = Object.freeze(['critical', 'error', 'warning', 'notice', 'ok']);
+
+/** `data-level` + the severity class, bundled so the attribute that carries the
+ *  meaning cannot be forgotten — the class alone paints the neutral tone and
+ *  silently loses the level. Unknown/absent levels resolve to `unknown`. */
+export const severity = (level, { part = 'chip' } = {}) => ({
+  class: part === 'dot' ? cls.severityDot : part === 'row' ? cls.severityRow : cls.severity,
+  'data-level': SEVERITY_LEVELS.includes(level) ? level : 'unknown',
+});
+
 // Attribute + style bundle for the data-bearing fills (`ui-meter`/`ui-progress`).
 // The class string alone paints a 0-width, unannounced bar: the fill width is a
 // UNITLESS `--value` (0–100) and AT needs role + aria-valuenow/min/max. This sets

package/classes/vscode.css-custom-data.json

@@ -257,6 +257,22 @@
       "name": "--radius-xl",
       "description": "Global scale token. Value: `4px`"
     },
+    {
+      "name": "--safe-area-bottom",
+      "description": "Global scale token. Value: `env(safe-area-inset-bottom, 0px)`"
+    },
+    {
+      "name": "--safe-area-left",
+      "description": "Global scale token. Value: `env(safe-area-inset-left, 0px)`"
+    },
+    {
+      "name": "--safe-area-right",
+      "description": "Global scale token. Value: `env(safe-area-inset-right, 0px)`"
+    },
+    {
+      "name": "--safe-area-top",
+      "description": "Global scale token. Value: `env(safe-area-inset-top, 0px)`"
+    },
     {
       "name": "--sans",
       "description": "Global scale token. Value: `'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif`"
@@ -341,6 +357,14 @@
       "name": "--surface-raised",
       "description": "Global scale token. Value: `var(--panel-strong)`"
     },
+    {
+      "name": "--tap-target",
+      "description": "Global scale token. Value: `max(44px, 2.9rem)`"
+    },
+    {
+      "name": "--tap-target-min",
+      "description": "Global scale token. Value: `max(24px, 1.6rem)`"
+    },
     {
       "name": "--text",
       "description": "Theme token. Light: `#0a0a0a` · Dark: `#e6e6e6`"

package/css/app.css

@@ -21,7 +21,15 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
-  padding: var(--space-md);
+
+  /* The rail runs the full viewport height, so on a notched device its top and
+     bottom sit under the status bar and the home indicator. Grow the padding to
+     clear them; `max()` keeps the desktop value exactly as authored, since the
+     insets resolve to 0px there. The inline-start inset covers a landscape
+     rotation that puts the cutout on the rail's side. */
+  padding: max(var(--space-md), var(--safe-area-top)) var(--space-md)
+    max(var(--space-md), var(--safe-area-bottom))
+    max(var(--space-md), var(--safe-area-left));
   position: sticky;
   inset-block-start: 0;
   block-size: 100svh;
@@ -108,7 +116,7 @@
 
 @media (pointer: coarse) {
   .ui-app-nav a {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
     padding-inline: 0.9rem;
   }
 }
@@ -178,7 +186,10 @@
   display: flex;
   gap: var(--space-md);
   justify-content: space-between;
-  padding: 0.75rem var(--space-lg);
+
+  /* Sticks to the very top, so the bar's own background must bleed under the
+     status bar while its CONTENT clears it — pad, do not offset. */
+  padding: max(0.75rem, var(--safe-area-top)) var(--space-lg) 0.75rem;
   position: sticky;
   inset-block-start: 0;
   z-index: var(--z-raised);

package/css/disclosure.css

@@ -44,11 +44,11 @@
     border-color var(--duration-fast) var(--ease-standard);
 }
 
-/* Coarse-pointer tap-target floor (~2.9rem ≈ 44px), matching inputs/sitenav —
+/* Coarse-pointer tap-target floor (`--tap-target`), matching inputs/sitenav —
    tabs are easy to mis-tap on touch (WCAG 2.5.8 — C24). */
 @media (pointer: coarse) {
   .ui-tab {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
   }
 }
 
@@ -272,6 +272,16 @@
   }
 }
 
+@media (pointer: coarse) {
+  .ui-breadcrumb__item a {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-block-size: var(--tap-target-min);
+    min-inline-size: var(--tap-target-min);
+  }
+}
+
 /* --- Pagination --- */
 
 .ui-pagination {
@@ -339,12 +349,12 @@
   }
 }
 
-/* Coarse-pointer tap-target floor, matching inputs/sitenav (~2.9rem ≈ 44px) —
+/* Coarse-pointer tap-target floor (`--tap-target`), matching inputs/sitenav —
    pagination controls are easy to mis-tap on touch (WCAG 2.5.8 — C24). */
 @media (pointer: coarse) {
   .ui-pagination__item {
-    min-block-size: 2.9rem;
-    min-inline-size: 2.9rem;
+    min-block-size: var(--tap-target);
+    min-inline-size: var(--tap-target);
   }
 }
 

package/css/dots.css

@@ -136,7 +136,9 @@
 
 /* Status dot — the glyph-style state indicator. */
 .ui-dot {
-  background: var(--text-dim);
+  --ui-dot-color: var(--text-dim);
+
+  background: var(--ui-dot-color);
   border-radius: 50%;
   display: inline-block;
   flex: 0 0 auto;
@@ -145,34 +147,45 @@
 }
 
 .ui-dot--accent {
-  background: var(--accent);
+  --ui-dot-color: var(--accent);
 }
 
 .ui-dot--success {
-  background: var(--success);
+  --ui-dot-color: var(--success);
 }
 
 .ui-dot--warning {
-  background: var(--warning);
+  --ui-dot-color: var(--warning);
 }
 
 .ui-dot--danger {
-  background: var(--danger);
+  --ui-dot-color: var(--danger);
 }
 
 .ui-dot--info {
-  background: var(--info);
+  --ui-dot-color: var(--info);
 }
 
 .ui-dot--live {
-  background: var(--success);
-  box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 70%, transparent);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-dot-color) 70%, transparent);
   position: relative;
 }
 
+/* Live describes motion, not status. A standalone live dot defaults to
+   success; an explicit tone remains the colour of both the dot and ring. */
+.ui-dot--live:not(
+    .ui-dot--accent,
+    .ui-dot--success,
+    .ui-dot--warning,
+    .ui-dot--danger,
+    .ui-dot--info
+  ) {
+  --ui-dot-color: var(--success);
+}
+
 .ui-dot--live::after {
   animation: pulseRing 1.8s var(--ease-out) infinite;
-  border: 1px solid var(--success);
+  border: 1px solid var(--ui-dot-color);
   border-radius: 50%;
   content: '';
   inset: -3px;
@@ -562,36 +575,48 @@
    differentiable. */
 @media (forced-colors: active) {
   .ui-dot--success {
+    --ui-dot-color: LinkText;
+
     forced-color-adjust: none;
-    background: LinkText;
   }
 
   .ui-dot--warning {
+    --ui-dot-color: Mark;
+
     forced-color-adjust: none;
-    background: Mark;
   }
 
   .ui-dot--danger {
+    --ui-dot-color: Highlight;
+
     forced-color-adjust: none;
-    background: Highlight;
   }
 
   .ui-dot--info {
+    --ui-dot-color: ButtonText;
+
     forced-color-adjust: none;
-    background: ButtonText;
   }
 
   /* Brand/live dots aren't status tones, but they still encode meaning via
      background-color alone, which HCM flattens. Keep them on a distinct,
      opted-out system colour for completeness. */
-  .ui-dot--accent,
-  .ui-dot--live {
+  .ui-dot--accent {
+    --ui-dot-color: LinkText;
+
     forced-color-adjust: none;
-    background: LinkText;
   }
 
-  .ui-dot--live::after {
-    border-color: LinkText;
+  .ui-dot--live:not(
+      .ui-dot--accent,
+      .ui-dot--success,
+      .ui-dot--warning,
+      .ui-dot--danger,
+      .ui-dot--info
+    ) {
+    --ui-dot-color: LinkText;
+
+    forced-color-adjust: none;
   }
 
   /* The masked one-node icon paints `background: currentcolor` through an SVG

package/css/feedback.css

@@ -130,9 +130,12 @@
   display: grid;
   gap: 0.5rem;
 
-  /* Logical so the stack anchors bottom inline-end and mirrors in RTL. */
-  inset-block: auto 1.25rem;
-  inset-inline: auto 1.25rem;
+  /* Logical so the stack anchors bottom inline-end and mirrors in RTL. The
+     bottom offset clears the home-indicator gesture area: a toast landing there
+     is both hard to read and hard to dismiss, because the system swallows the
+     swipe. `max()` leaves the desktop offset untouched. */
+  inset-block: auto max(1.25rem, var(--safe-area-bottom));
+  inset-inline: auto max(1.25rem, var(--safe-area-right));
   justify-items: end;
   max-inline-size: min(22rem, calc(100vw - 2rem));
   pointer-events: none;
@@ -144,7 +147,7 @@
    overlaps the polite bottom stack and reads as a distinct, urgent
    channel. */
 .ui-toast-stack--assertive {
-  inset-block: 1.25rem auto;
+  inset-block: max(1.25rem, var(--safe-area-top)) auto;
 }
 
 .ui-toast {
@@ -225,15 +228,15 @@
 }
 
 /* Touch: enlarge the dismiss/close hit areas to the project's coarse-pointer
-   tap-target floor (2.9rem, as in primitives.css / forms.css) without changing
-   the desktop glyph size. The box is centred so the glyph stays put. */
+   tap-target floor (`--tap-target`, as in primitives.css / forms.css) without
+   changing the desktop glyph size. The box is centred so the glyph stays put. */
 @media (pointer: coarse) {
   .ui-alert__close,
   .ui-toast__close {
     display: inline-grid;
     place-items: center;
-    min-block-size: 2.9rem;
-    min-inline-size: 2.9rem;
+    min-block-size: var(--tap-target);
+    min-inline-size: var(--tap-target);
   }
 
   .ui-alert__close {
@@ -517,6 +520,41 @@
   background: var(--info);
 }
 
+/* A labelled meter is core feedback grammar, not report-only layout. The
+   visible value remains the data of record because role=meter support varies. */
+.ui-meter__row {
+  align-items: center;
+  display: grid;
+  gap: var(--space-2xs) var(--space-md);
+  grid-template-columns: minmax(9rem, 14rem) 1fr auto;
+  margin-block: var(--space-2xs);
+}
+
+.ui-meter__row .ui-meter {
+  min-inline-size: 8rem;
+}
+
+.ui-meter__label {
+  color: var(--text-soft);
+}
+
+.ui-meter__value {
+  color: var(--text);
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+@media (max-width: 32rem) {
+  .ui-meter__row {
+    grid-template-columns: 1fr;
+  }
+
+  .ui-meter__value {
+    text-align: start;
+  }
+}
+
 /* --- Steps — progress through a multi-step flow. Use an <ol>; the
    current step is aria-current="step" (no class), completed steps take
    --done. Counter-numbered markers, hairline connectors. --- */

package/css/forms.css

@@ -476,18 +476,18 @@
   .ui-input,
   .ui-select,
   .ui-textarea {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
   }
 
   .ui-search {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
   }
 
   /* The whole label is the toggle target — float it to the ~44px floor so the
      small track/box isn't a sub-target on touch (WCAG 2.5.8 — C24). */
   .ui-switch,
   .ui-check {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
   }
 
   .ui-check input {

package/css/navigation.css

@@ -95,7 +95,7 @@
 
 @media (pointer: coarse) {
   .ui-themetoggle__button {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
     padding-inline: 0.9rem;
   }
 }

package/css/overlay.css

@@ -149,6 +149,15 @@ html:has(.ui-modal.is-open) {
   margin-inline-start: auto;
   max-block-size: 100vh;
   max-inline-size: min(26rem, 100vw);
+
+  /* Full-height by design, so the panel's edges are the screen's edges: its
+     surface should still reach them, but its content must clear the cutout and
+     the home indicator. Add the INSET ONLY — `.ui-modal` is deliberately
+     `padding: 0` (its head/body parts own their spacing), so a `max(space, …)`
+     floor here would silently pad the drawer on every device, not just a
+     notched one. */
+  padding-block: var(--safe-area-top) var(--safe-area-bottom);
+  padding-inline-end: var(--safe-area-right);
   border-radius: 0;
   border-width: 0;
   border-inline-start-width: 1px;
@@ -162,16 +171,16 @@ html:has(.ui-modal.is-open) {
 }
 
 /* Comfortable hit target on coarse pointers — this bespoke close button measured
-   ~26px on touch, below the 2.9rem floor the rest of the button family meets
-   (WCAG 2.5.8). Scoped to coarse so the fine-pointer (mouse) rendering, which
+   ~26px on touch, below the `--tap-target` floor the rest of the button family
+   meets. Scoped to coarse so the fine-pointer (mouse) rendering, which
    already clears 24×24, is unchanged; centre the glyph in the enlarged box. */
 @media (pointer: coarse) {
   .ui-modal__close {
     align-items: center;
     display: inline-flex;
     justify-content: center;
-    min-block-size: 2.9rem;
-    min-inline-size: 2.9rem;
+    min-block-size: var(--tap-target);
+    min-inline-size: var(--tap-target);
   }
 }
 
@@ -187,7 +196,12 @@ html:has(.ui-modal.is-open) {
   color: var(--text);
   max-block-size: 100vh;
   max-inline-size: 100vw;
-  padding: 0;
+
+  /* Deliberately full-bleed — the dimmed ground SHOULD cover the whole screen,
+     including the cutout. Only the insets keep the carousel's own controls out
+     from under it. */
+  padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom)
+    var(--safe-area-left);
   inline-size: 100vw;
 }
 

package/css/primitives.css

@@ -423,6 +423,53 @@
   padding: 0.85rem 1.4rem;
 }
 
+/* Dense — for bars whose HEIGHT is the constraint: a pane/node title bar, a
+   packed toolbar, a table row's actions. It lowers only the *visual* floor, to
+   the WCAG 2.5.8 minimum, and deliberately declares no coarse-pointer opinion:
+   the `@media (pointer: coarse)` block below matches at equal specificity and
+   later in the file, so it still floats a dense control to the full
+   `--tap-target`. Shrinking a control for a mouse therefore never shrinks it
+   for a finger — which is the reason this is a separate tier and not just a
+   smaller `--sm`. */
+.ui-button--dense {
+  gap: 0.25rem;
+  min-block-size: var(--tap-target-min);
+  min-inline-size: var(--tap-target-min);
+  padding: 0.2rem 0.35rem;
+}
+
+/* Keep the square icon well; padding is safe to raise specificity on because
+   it is not the tap floor. */
+.ui-button--dense.ui-button--icon {
+  padding: 0;
+}
+
+/* The label slot. An icon button still needs its words — for the accessible
+   name, and for the test/automation selector that reads the button by its
+   text — but not the pixels. Wrapping the text in this slot lets ONE markup
+   shape serve both: the button keeps a real text node, and `--icon` is what
+   decides whether it is painted. Without it, an icon-only button has to choose
+   between an empty accessible name and a title-bar-inflating word.
+
+   The hiding technique matches `.ui-visually-hidden` (base.css) rather than
+   `display: none`, which would take the text out of the accessible name too —
+   the exact opposite of the point. */
+.ui-button__label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-button--icon .ui-button__label {
+  clip-path: inset(50%);
+  block-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
+}
+
 .ui-button:disabled,
 .ui-button[aria-disabled='true'] {
   cursor: not-allowed;
@@ -539,11 +586,11 @@
 /* Standalone CTA links are tap targets, not inline prose links: on a coarse
    pointer float them to the WCAG 2.5.8 AA 24px floor (the 2.5.8 inline-link
    exception doesn't cover a block-level call-to-action, which is what these
-   are). Buttons already auto-grow to ~44px on coarse pointers. */
+   are). Buttons already float to the full `--tap-target` on coarse pointers. */
 @media (pointer: coarse) {
   .ui-link--arrow,
   .ui-link--cta {
-    min-block-size: max(24px, 1.6rem);
+    min-block-size: var(--tap-target-min);
   }
 }
 
@@ -743,16 +790,23 @@
   }
 }
 
-/* --- Touch: comfortable hit targets on coarse pointers --- */
+/* --- Touch: comfortable hit targets on coarse pointers.
+
+   The floor is `--tap-target`, not a bare rem. Bronto's own base sets
+   `html { font-size: 0.9375rem }`, so the 2.9rem this family used to carry
+   resolved to 43.5px — half a pixel under the 44px WCAG 2.5.5 / platform-HIG
+   target, and under any host that shrinks the root further it drifted further
+   still. The token clamps in px against the rem so the standard holds however
+   the root is re-pointed. --- */
 
 @media (pointer: coarse) {
   .ui-button {
-    min-block-size: 2.9rem;
-    min-inline-size: 2.9rem;
+    min-block-size: var(--tap-target);
+    min-inline-size: var(--tap-target);
   }
 
   .ui-button--icon {
-    min-inline-size: 2.9rem;
+    min-inline-size: var(--tap-target);
   }
 }
 
@@ -774,6 +828,47 @@
   margin: 0.3rem 0 0;
 }
 
+/* Slots. Without them every empty surface in an app re-invents the same three
+   parts under a different name, and they drift: one has a glyph, the next has
+   two sentences in the same weight, a third is a bare <p>. The shape is always
+   mark → one sentence in full ink → a quieter follow-up. */
+.ui-empty-state__glyph {
+  display: block;
+  font-size: 1.5rem;
+  line-height: 1;
+  opacity: 0.5;
+}
+
+/* The one sentence that says what is missing. Full ink — it is the message,
+   not a caption, and the container's --text-dim would bury it. */
+.ui-empty-state__lead {
+  color: var(--text);
+  margin: 0;
+}
+
+.ui-empty-state__hint {
+  font-size: var(--text-2xs);
+  margin: 0;
+  opacity: 0.8;
+}
+
+/* An empty state REPORTS absence; an invite OFFERS the next action. That is a
+   different job, so it gets a different frame: no dashed box (there is nothing
+   to outline — the surface itself is the thing you are being invited into) and
+   it centres in whatever block space it is given rather than sitting as a
+   card. Use it for a surface the user is meant to fill, and keep the plain
+   `.ui-empty-state` for a region that simply has no rows today. */
+.ui-empty-state--invite {
+  align-items: center;
+  border: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2xs);
+  justify-content: center;
+  min-block-size: 100%;
+  padding: var(--space-sm);
+}
+
 /* --- Keyboard key — inline glyph for shortcut hints. Wrap a <kbd>. --- */
 
 .ui-kbd {