@zylem/ui 0.8.9 → 0.8.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {
@@ -49,6 +49,15 @@
     "src",
     "vite"
   ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "NODE_ENV=production tsup",
+    "dev": "tsup --watch",
+    "showcase": "vite --host",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "biome check ."
+  },
   "peerDependencies": {
     "solid-js": "^1.9.9"
   },
@@ -82,12 +91,5 @@
     "node": ">=22.12.0",
     "pnpm": ">=10.32.1"
   },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "showcase": "vite --host",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "biome check ."
-  }
-}
+  "packageManager": "pnpm@10.33.0"
+}

package/src/components/Accordion/Accordion.tsx

@@ -18,6 +18,13 @@ export interface AccordionProps {
   class?: string;
   /** Extra class applied to each content region (e.g. scroll helpers). */
   contentClass?: string;
+  /**
+   * Inspector layout: sections take their natural height and the accordion
+   * grows with them, so the surrounding panel scrolls as a whole. Without it
+   * the accordion fills its container and expanded sections share the space
+   * and scroll individually (the editor sidebar behaviour).
+   */
+  stack?: boolean;
 }
 
 /**
@@ -28,7 +35,9 @@ export interface AccordionProps {
 export function Accordion(props: AccordionProps) {
   return (
     <KAccordion.Root
-      class={props.class ? `zylem-accordion ${props.class}` : 'zylem-accordion'}
+      class={['zylem-accordion', props.stack ? 'zylem-accordion--stack' : '', props.class ?? '']
+        .filter(Boolean)
+        .join(' ')}
       multiple={props.multiple}
       collapsible={props.collapsible ?? true}
       value={props.value}

package/src/components/AddTile/AddTile.css.ts

@@ -36,6 +36,14 @@ globalStyle('.zylem-add-tile[data-variant="tall"]', {
   height: `calc(${FRAME_SIZE} + 18px)`,
 });
 
+// Stands in for a card: fills its grid cell and rounds like one.
+globalStyle('.zylem-add-tile[data-variant="fill"]', {
+  width: '100%',
+  height: '100%',
+  minHeight: '110px',
+  borderRadius: vars.radii.card,
+});
+
 globalStyle('.zylem-add-tile:hover:not([disabled])', {
   color: '#E8F4FF',
   borderColor: 'rgba(178, 219, 255, 0.9)',
@@ -70,9 +78,18 @@ globalStyle('.zylem-add-tile[data-variant="tall"] .zylem-add-tile-icon', {
   height: '20px',
 });
 
+globalStyle('.zylem-add-tile[data-variant="fill"] .zylem-add-tile-icon', {
+  width: '24px',
+  height: '24px',
+});
+
 globalStyle('.zylem-add-tile-label', {
   fontSize: '11px',
   fontWeight: 600,
   lineHeight: 1,
   whiteSpace: 'nowrap',
 });
+
+globalStyle('.zylem-add-tile[data-variant="fill"] .zylem-add-tile-label', {
+  fontSize: '13px',
+});

package/src/components/AddTile/AddTile.tsx

@@ -1,35 +1,43 @@
 import Plus from 'lucide-solid/icons/plus';
 import { Show } from 'solid-js';
 
+export type AddTileVariant = 'square' | 'tall' | 'fill';
+
 export interface AddTileProps {
-  /** Text under the plus (tall variant) and the accessible name. */
+  /** Text under the plus (tall and fill variants) and the accessible name. */
   label?: string;
-  /** `square` matches a swatch; `tall` matches a frame thumb with room for text. */
-  variant?: 'square' | 'tall';
+  /**
+   * `square` matches a swatch; `tall` matches a frame thumb with room for
+   * text; `fill` takes the whole grid cell it is placed in, so it can stand
+   * in for a card ("New project") in a card grid.
+   */
+  variant?: AddTileVariant;
   onClick?: (event: MouseEvent) => void;
   disabled?: boolean;
   class?: string;
 }
 
 /**
- * Dashed "add" tile that sits at the end of a swatch row or frame strip. The
- * plus is centered on its own; the tall variant stacks a label beneath it.
+ * Dashed "add" tile that sits at the end of a swatch row, frame strip, or
+ * card grid. The plus is centered on its own; the tall and fill variants
+ * stack a label beneath it.
  */
 export function AddTile(props: AddTileProps) {
   const variant = () => props.variant ?? 'square';
   const label = () => props.label ?? 'Add';
+  const showsLabel = () => variant() !== 'square' && Boolean(props.label);
   return (
     <button
       type="button"
       class={props.class ? `zylem-add-tile ${props.class}` : 'zylem-add-tile'}
       data-variant={variant()}
-      aria-label={variant() === 'square' || !props.label ? label() : undefined}
+      aria-label={showsLabel() ? undefined : label()}
       title={variant() === 'square' ? label() : undefined}
       disabled={props.disabled}
       onClick={props.onClick}
     >
       <Plus class="zylem-icon zylem-add-tile-icon" aria-hidden="true" />
-      <Show when={variant() === 'tall' && props.label}>
+      <Show when={showsLabel()}>
         <span class="zylem-add-tile-label">{props.label}</span>
       </Show>
     </button>

package/src/components/Callout/Callout.css.ts

@@ -0,0 +1,45 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-callout', {
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.xxs,
+  padding: `${vars.spacing.sm} ${vars.spacing.md}`,
+  borderLeft: '2px solid rgba(150, 210, 255, 0.7)',
+  borderRadius: `0 ${vars.radii.control} ${vars.radii.control} 0`,
+  background: 'rgba(97, 166, 232, 0.1)',
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  lineHeight: 1.45,
+});
+
+globalStyle('.zylem-callout-title', {
+  fontWeight: 700,
+  letterSpacing: '0.02em',
+});
+
+globalStyle('.zylem-callout-message code', {
+  fontFamily: "'Courier New', monospace",
+  fontSize: '0.95em',
+});
+
+globalStyle('.zylem-callout[data-tone="warning"]', {
+  borderLeftColor: 'rgba(252, 211, 77, 0.8)',
+  background: 'rgba(252, 211, 77, 0.09)',
+  color: '#FDE68A',
+});
+
+globalStyle('.zylem-callout[data-tone="error"]', {
+  borderLeftColor: 'rgba(255, 132, 114, 0.85)',
+  background: 'rgba(230, 69, 52, 0.14)',
+  color: '#FFD9D3',
+});
+
+globalStyle('.zylem-callout[data-tone="success"]', {
+  borderLeftColor: 'rgba(120, 255, 150, 0.7)',
+  background: 'rgba(60, 200, 100, 0.12)',
+  color: '#D9FFE3',
+});

package/src/components/Callout/Callout.tsx

@@ -0,0 +1,32 @@
+import { Show } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export type CalloutTone = 'info' | 'warning' | 'error' | 'success';
+
+export interface CalloutProps {
+  tone?: CalloutTone;
+  /** Short bold lead-in before the message. */
+  title?: JSX.Element;
+  children: JSX.Element;
+  class?: string;
+}
+
+/**
+ * Inline note: a tinted strip with a coloured left rule for hints, warnings,
+ * and errors that belong next to the thing they describe (a form, a footer).
+ * For transient messages use `Toast`; for one-word labels use `Badge`.
+ */
+export function Callout(props: CalloutProps) {
+  return (
+    <div
+      class={props.class ? `zylem-callout ${props.class}` : 'zylem-callout'}
+      role={props.tone === 'error' ? 'alert' : 'note'}
+      data-tone={props.tone ?? 'info'}
+    >
+      <Show when={props.title}>
+        <span class="zylem-callout-title">{props.title}</span>
+      </Show>
+      <span class="zylem-callout-message">{props.children}</span>
+    </div>
+  );
+}

package/src/components/Card/Card.css.ts

@@ -45,6 +45,24 @@ globalStyle('.zylem-card--selected', {
   boxShadow: `0 8px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08), ${vars.effects.glowActive}`,
 });
 
+// Artwork well: fills the card width, clips its content to the control radius.
+globalStyle('.zylem-card-media', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '64px',
+  borderRadius: vars.radii.control,
+  overflow: 'hidden',
+  color: 'rgba(255, 255, 255, 0.85)',
+});
+
+globalStyle('.zylem-card-media > img', {
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+});
+
 globalStyle('.zylem-card-title', {
   fontSize: vars.typography.fontSize,
   fontWeight: 700,

package/src/components/Card/Card.tsx

@@ -5,24 +5,30 @@ export interface CardProps
   extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'title'> {
   title?: JSX.Element;
   description?: JSX.Element;
+  /** Artwork above the title: a thumbnail, preview swatch, or icon well. */
+  media?: JSX.Element;
   /** Renders hover glow + pointer cursor and click affordances. */
   interactive?: boolean;
   selected?: boolean;
+  /** Rendered after the description: tags, actions, metadata. */
   children?: JSX.Element;
 }
 
 /**
  * HyperGlass card: small index-card tile with a blue glow. Use for entity
- * tiles, project tiles, and asset thumbnails.
+ * tiles, project tiles, and asset thumbnails. Order is media, title,
+ * description, then children.
  */
 export function Card(props: CardProps) {
   const [local, rest] = splitProps(props, [
     'title',
     'description',
+    'media',
     'interactive',
     'selected',
     'children',
     'class',
+    'onKeyDown',
   ]);
 
   const classes = () =>
@@ -35,20 +41,37 @@ export function Card(props: CardProps) {
       .filter(Boolean)
       .join(' ');
 
+  // An interactive card is a button in all but tag name, so Enter and Space
+  // activate it like one.
+  const onKeyDown = (event: KeyboardEvent & { currentTarget: HTMLDivElement; target: Element }) => {
+    if (typeof local.onKeyDown === 'function') local.onKeyDown(event);
+    else if (local.onKeyDown) local.onKeyDown[0](local.onKeyDown[1], event);
+    if (!local.interactive || event.defaultPrevented) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  };
+
   return (
     <div
       class={classes()}
       role={local.interactive ? 'button' : undefined}
       tabIndex={local.interactive ? 0 : undefined}
+      aria-pressed={local.interactive && local.selected !== undefined ? local.selected : undefined}
+      onKeyDown={onKeyDown}
       {...rest}
     >
+      <Show when={local.media}>
+        <div class="zylem-card-media">{local.media}</div>
+      </Show>
       <Show when={local.title}>
         <div class="zylem-card-title">{local.title}</div>
       </Show>
-      {local.children}
       <Show when={local.description}>
         <div class="zylem-card-description">{local.description}</div>
       </Show>
+      {local.children}
     </div>
   );
 }

package/src/components/Dialog/Dialog.css.ts

@@ -32,8 +32,12 @@ globalStyle('.zylem-dialog-positioner', {
 });
 
 globalStyle('.zylem-dialog-content', {
+  display: 'flex',
+  flexDirection: 'column',
   width: '100%',
   maxWidth: '440px',
+  maxHeight: '100%',
+  minHeight: 0,
   borderRadius: vars.radii.window,
   border: '1px solid rgba(146, 205, 255, 0.54)',
   background: vars.material.glassPanelDark,
@@ -48,19 +52,41 @@ globalStyle('.zylem-dialog-content', {
   },
 });
 
+globalStyle('.zylem-dialog-content[data-size="lg"]', {
+  maxWidth: '760px',
+});
+
+// Fullscreen fills the positioner (viewport minus its padding). The body takes
+// whatever height the header and footer leave, so browser-style content can
+// hand scrolling to its own columns.
+globalStyle('.zylem-dialog-content[data-size="fullscreen"]', {
+  maxWidth: 'none',
+  height: '100%',
+  borderRadius: vars.radii.card,
+});
+
 globalStyle('.zylem-dialog-header', {
+  flex: 'none',
   minHeight: '40px',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  gap: vars.spacing.sm,
-  padding: `0 ${vars.spacing.md}`,
+  gap: vars.spacing.md,
+  padding: `${vars.spacing.xs} ${vars.spacing.md}`,
   background: vars.material.glossyBar,
   borderBottom: '1px solid rgba(5, 18, 32, 0.85)',
   boxShadow:
     'inset 0 1px 0 rgba(255,255,255,0.62), inset 0 -1px 0 rgba(255,255,255,0.08)',
 });
 
+globalStyle('.zylem-dialog-titles', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2px',
+  flex: '1 1 auto',
+  minWidth: 0,
+});
+
 globalStyle('.zylem-dialog-title', {
   margin: 0,
   fontSize: '13px',
@@ -71,7 +97,26 @@ globalStyle('.zylem-dialog-title', {
   textShadow: '0 1px 1px rgba(0,0,0,0.65)',
 });
 
+globalStyle('.zylem-dialog-subtitle', {
+  margin: 0,
+  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+  fontWeight: 500,
+  color: 'rgba(232, 244, 255, 0.78)',
+  fontFamily: vars.typography.fontFamily,
+  textShadow: '0 1px 1px rgba(0,0,0,0.5)',
+});
+
+globalStyle('.zylem-dialog-header-extra', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.sm,
+  flex: 'none',
+});
+
 globalStyle('.zylem-dialog-body', {
+  flex: '1 1 auto',
+  minHeight: 0,
+  overflow: 'auto',
   padding: vars.spacing.lg,
   color: vars.colors.text,
   fontFamily: vars.typography.fontFamily,
@@ -79,9 +124,31 @@ globalStyle('.zylem-dialog-body', {
   lineHeight: 1.45,
 });
 
+// In fullscreen the body and its layer scope become flex columns so content
+// can lay out against the dialog's height (and own its scrolling).
+globalStyle('.zylem-dialog-content[data-size="fullscreen"] .zylem-dialog-body', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+globalStyle('.zylem-dialog-content[data-size="fullscreen"] .zylem-dialog-scope', {
+  display: 'flex',
+  flexDirection: 'column',
+  flex: '1 1 auto',
+  minHeight: 0,
+});
+
 globalStyle('.zylem-dialog-footer', {
+  flex: 'none',
   display: 'flex',
+  alignItems: 'center',
   justifyContent: 'flex-end',
   gap: vars.spacing.sm,
   padding: `0 ${vars.spacing.lg} ${vars.spacing.lg}`,
 });
+
+globalStyle('.zylem-dialog-content[data-size="fullscreen"] .zylem-dialog-footer', {
+  padding: `${vars.spacing.sm} ${vars.spacing.lg}`,
+  borderTop: '1px solid rgba(97, 166, 232, 0.28)',
+  background: 'rgba(4, 12, 20, 0.6)',
+});

package/src/components/Dialog/Dialog.tsx

@@ -5,13 +5,29 @@ import { createDismissGuard, LayerScope, useLayer } from '../../layers';
 import { Button } from '../Button/Button';
 import { WindowControls } from '../WindowControls/WindowControls';
 
+/**
+ * Card width. `md` is the default 440px card, `lg` a 760px card for forms
+ * with two columns, and `fullscreen` fills the viewport (minus a margin) with
+ * the body taking the remaining height — the shell for browser-style pickers.
+ */
+export type DialogSize = 'md' | 'lg' | 'fullscreen';
+
 export interface DialogProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   title?: JSX.Element;
+  /** Secondary line under the title. */
+  subtitle?: JSX.Element;
+  /** Content between the titles and the close control, e.g. a search field. */
+  headerExtra?: JSX.Element;
+  size?: DialogSize;
   children: JSX.Element;
   /** Optional footer content (e.g. action buttons). */
   footer?: JSX.Element;
+  /** Extra class on the card. */
+  class?: string;
+  /** Extra class on the body, e.g. to hand scrolling to the content's columns. */
+  bodyClass?: string;
 }
 
 /**
@@ -43,19 +59,31 @@ export function Dialog(props: DialogProps) {
             <div class="zylem-dialog-positioner">
               <KDialog.Content
                 ref={dismiss.ref}
-                class="zylem-dialog-content"
+                class={props.class ? `zylem-dialog-content ${props.class}` : 'zylem-dialog-content'}
+                data-size={props.size}
                 onInteractOutside={dismiss.onInteractOutside}
               >
                 <div class="zylem-dialog-header">
-                  <Show when={props.title}>
-                    <KDialog.Title class="zylem-dialog-title">
-                      {props.title}
-                    </KDialog.Title>
+                  <Show when={props.title || props.subtitle}>
+                    <div class="zylem-dialog-titles">
+                      <Show when={props.title}>
+                        <KDialog.Title class="zylem-dialog-title">{props.title}</KDialog.Title>
+                      </Show>
+                      <Show when={props.subtitle}>
+                        <p class="zylem-dialog-subtitle">{props.subtitle}</p>
+                      </Show>
+                    </div>
+                  </Show>
+                  <Show when={props.headerExtra}>
+                    <div class="zylem-dialog-header-extra">{props.headerExtra}</div>
                   </Show>
                   <WindowControls onClose={() => props.onOpenChange?.(false)} />
                 </div>
-                <KDialog.Description as="div" class="zylem-dialog-body">
-                  <LayerScope>{props.children}</LayerScope>
+                <KDialog.Description
+                  as="div"
+                  class={props.bodyClass ? `zylem-dialog-body ${props.bodyClass}` : 'zylem-dialog-body'}
+                >
+                  <LayerScope class="zylem-dialog-scope">{props.children}</LayerScope>
                 </KDialog.Description>
                 <Show when={props.footer}>
                   <div class="zylem-dialog-footer">{props.footer}</div>

package/src/components/DropdownMenu/DropdownMenu.css.ts

@@ -61,6 +61,28 @@ globalStyle('.zylem-dropdown-item--danger[data-highlighted]', {
   color: '#FFD9D3',
 });
 
+globalStyle('.zylem-dropdown-label', {
+  flex: '1 1 auto',
+  minWidth: 0,
+});
+
+// Check column, reserved on every row of a menu that has a checkable item.
+globalStyle('.zylem-dropdown-check', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: 'none',
+  width: '14px',
+  height: '14px',
+  marginRight: `calc(${vars.spacing.xs} * -1)`,
+});
+
+globalStyle('.zylem-dropdown-check svg', {
+  width: '13px',
+  height: '13px',
+  stroke: 'currentColor',
+});
+
 globalStyle('.zylem-dropdown-shortcut', {
   fontSize: `calc(${vars.typography.fontSize} - 3px)`,
   color: vars.colors.textSecondary,

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,4 +1,5 @@
 import { DropdownMenu as KDropdownMenu } from '@kobalte/core';
+import Check from 'lucide-solid/icons/check';
 import { For, Show } from 'solid-js';
 import type { JSX } from 'solid-js';
 import { createDismissGuard, useLayer } from '../../layers';
@@ -10,6 +11,12 @@ export interface DropdownMenuItemConfig {
   shortcut?: string;
   disabled?: boolean;
   danger?: boolean;
+  /**
+   * Render as a checkable item showing this state. Selecting it still calls
+   * `onSelect`; the owner decides what the new state is (a plain toggle, or
+   * one-of-many the way a stage picker works).
+   */
+  checked?: boolean;
   /** Render a separator line above this item. */
   separatorAbove?: boolean;
 }
@@ -24,40 +31,80 @@ export interface DropdownMenuProps {
 }
 
 /**
- * HyperGlass dropdown menu: floating glass sheet with highlight rows.
+ * The rows of a menu. Shared by `DropdownMenu` and `Menubar`, whose Kobalte
+ * parts are the same underlying menu primitives, so it may be rendered inside
+ * either one's content.
  *
- * Portals into the layer container for its tree at the `menu` tier, so it opens
- * over panels and dialogs and stays styled inside a shadow root.
+ * A menu with any checkable row reserves the check column on every row so
+ * labels line up.
  */
-export function DropdownMenu(props: DropdownMenuProps) {
-  const layer = useLayer('menu');
-  const dismiss = createDismissGuard();
+export function MenuItems(props: { items: DropdownMenuItemConfig[] }) {
+  const hasChecks = () => props.items.some((item) => item.checked !== undefined);
 
-  const items = () => (
+  const body = (item: DropdownMenuItemConfig) => (
+    <>
+      <Show when={hasChecks()}>
+        <span class="zylem-dropdown-check" aria-hidden="true">
+          <Show when={item.checked !== undefined}>
+            <KDropdownMenu.ItemIndicator>
+              <Check />
+            </KDropdownMenu.ItemIndicator>
+          </Show>
+        </span>
+      </Show>
+      <span class="zylem-dropdown-label">{item.label}</span>
+      <Show when={item.shortcut}>
+        <span class="zylem-dropdown-shortcut">{item.shortcut}</span>
+      </Show>
+    </>
+  );
+
+  const itemClass = (item: DropdownMenuItemConfig) =>
+    item.danger ? 'zylem-dropdown-item zylem-dropdown-item--danger' : 'zylem-dropdown-item';
+
+  return (
     <For each={props.items}>
       {(item) => (
         <>
           <Show when={item.separatorAbove}>
             <KDropdownMenu.Separator class="zylem-dropdown-separator" />
           </Show>
-          <KDropdownMenu.Item
-            class={
-              item.danger
-                ? 'zylem-dropdown-item zylem-dropdown-item--danger'
-                : 'zylem-dropdown-item'
+          <Show
+            when={item.checked !== undefined}
+            fallback={
+              <KDropdownMenu.Item
+                class={itemClass(item)}
+                disabled={item.disabled}
+                onSelect={item.onSelect}
+              >
+                {body(item)}
+              </KDropdownMenu.Item>
             }
-            disabled={item.disabled}
-            onSelect={item.onSelect}
           >
-            <span>{item.label}</span>
-            <Show when={item.shortcut}>
-              <span class="zylem-dropdown-shortcut">{item.shortcut}</span>
-            </Show>
-          </KDropdownMenu.Item>
+            <KDropdownMenu.CheckboxItem
+              class={itemClass(item)}
+              checked={item.checked}
+              disabled={item.disabled}
+              onSelect={item.onSelect}
+            >
+              {body(item)}
+            </KDropdownMenu.CheckboxItem>
+          </Show>
         </>
       )}
     </For>
   );
+}
+
+/**
+ * HyperGlass dropdown menu: floating glass sheet with highlight rows.
+ *
+ * Portals into the layer container for its tree at the `menu` tier, so it opens
+ * over panels and dialogs and stays styled inside a shadow root.
+ */
+export function DropdownMenu(props: DropdownMenuProps) {
+  const layer = useLayer('menu');
+  const dismiss = createDismissGuard();
 
   return (
     <KDropdownMenu.Root placement={props.placement ?? 'bottom-start'}>
@@ -72,7 +119,7 @@ export function DropdownMenu(props: DropdownMenuProps) {
               class="zylem-dropdown-content"
               onInteractOutside={dismiss.onInteractOutside}
             >
-              {items()}
+              <MenuItems items={props.items} />
             </KDropdownMenu.Content>
           </KDropdownMenu.Portal>
         )}

package/src/components/EmptyState/EmptyState.css.ts

@@ -27,3 +27,12 @@ globalStyle('.zylem-empty-state-message', {
   lineHeight: 1.45,
   maxWidth: '360px',
 });
+
+// One or several actions side by side, wrapping on narrow hosts.
+globalStyle('.zylem-empty-state-actions', {
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'center',
+  gap: vars.spacing.sm,
+  marginTop: vars.spacing.xs,
+});