@ethlete/components 1.0.0-next.77 → 1.0.0-next.79

package/design/dialog.ts

@@ -0,0 +1,214 @@
+import iconButtonBase from '../src/lib/button/icon-button.component.css?inline';
+import { TIMES_ICON } from '../src/lib/icon/headless/times-icon';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import alertDialogBase from '../src/lib/overlay/alert-dialog/alert-dialog.component.css?inline';
+import overlayContainer from '../src/lib/overlay/overlay-container.component.css?inline';
+import overlayMain from '../src/lib/overlay/overlay-main-styles.component.css?inline';
+import dialogStrategy from '../src/lib/overlay/strategies/dialog-styles.component.css?inline';
+import { button, buttonStyles } from './button';
+import { iconMarkup } from './icon';
+
+export type DialogMockButton = {
+  label: string;
+  variant?: 'filled' | 'outline' | 'tonal' | 'transparent';
+  /** A color theme name the app registers. Left out, the button takes the dialog's color theme. */
+  color?: string;
+  /** Extra attributes on the button, e.g. design markers. */
+  attributes?: string;
+};
+
+export type DialogMockOptions = {
+  /** The title, as HTML. */
+  title: string;
+  /** The body content, as HTML. */
+  body: string;
+  /** The footer buttons, in order. Leave it out for a dialog without a footer. */
+  actions?: DialogMockButton[];
+  /** Draws an `et-icon-button` with `etOverlayClose` in the header; the string adds attributes to it. */
+  close?: boolean | string;
+  /** As the body's `dividers` input. `dynamic` draws the body scrolled to its start. */
+  dividers?: false | 'static' | 'dynamic';
+  /** A surface theme name the app registers, for the pane. */
+  surface?: string;
+  /** Extra attributes on the pane, e.g. design markers. */
+  attributes?: string;
+  /** Unique per frame: the title id derives from it. */
+  id?: string;
+};
+
+export type AlertDialogMockOptions = {
+  kind: 'alert' | 'confirm';
+  title: string;
+  message?: string;
+  /** The confirm button's color theme name, as `confirmColor` sets it. */
+  confirmColor?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  acknowledgeLabel?: string;
+  /** Extra attributes on the confirm (or acknowledge) button. */
+  confirmAttributes?: string;
+  /** Extra attributes on the cancel button. */
+  cancelAttributes?: string;
+  surface?: string;
+  attributes?: string;
+  id?: string;
+};
+
+/** The stylesheets `dialog()` and `alertDialog()` draw with: the real overlay pane, dialog, button and icon button CSS. */
+export const dialogStyles = /* @__PURE__ */ [
+  buttonStyles,
+  iconBase,
+  iconButtonBase,
+  overlayContainer,
+  overlayMain,
+  dialogStrategy,
+  alertDialogBase,
+  `@layer components {
+  .et-dialog-mock-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.2rem;
+  }
+  .et-dialog-mock-title {
+    margin: 0;
+    font-size: 1.8rem;
+    font-weight: 600;
+  }
+  .et-dialog-mock-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 0.8rem;
+  }
+  .et-dialog-mock-scene {
+    position: relative;
+    display: grid;
+    place-items: center;
+    padding: 4rem 2.4rem;
+  }
+  .et-dialog-mock-scene > .et-overlay-runtime-backdrop {
+    position: absolute;
+    inset: 0;
+  }
+}`,
+].join('\n');
+
+const footerButton = (action: DialogMockButton) => {
+  const markup = button({ label: action.label, variant: action.variant ?? 'filled', color: action.color, size: 'md' });
+
+  return action.attributes ? markup.replace(/^<button /, `<button ${action.attributes} `) : markup;
+};
+
+const closeButton = (attributes?: string) => {
+  const classes = [
+    'et-surface-interactive',
+    'et-color-interactive',
+    'et-icon-button',
+    'et-focus-ring',
+    'et-color--inherited',
+  ];
+
+  return `<button ${attributes ?? ''} etOverlayClose type="button" aria-label="Close" class="${classes.join(' ')}" data-variant="transparent" data-size="sm"><div class="et-icon-button-icon">${iconMarkup(TIMES_ICON)}</div></button>`;
+};
+
+const pane = (
+  options: { surface?: string; attributes?: string; role: string; labelledBy: string; describedBy?: string },
+  content: string,
+) => {
+  const classes = [
+    'et-overlay',
+    'et-overlay-runtime-pane',
+    'et-overlay--dialog',
+    'et-color--inherited',
+    `et-surface--${options.surface ?? 'inherited'}`,
+    'et-with-default-animation',
+    'et-animation-enter-done',
+  ];
+  const attributes = [
+    options.attributes,
+    `role="${options.role}"`,
+    'aria-modal="true"',
+    'tabindex="-1"',
+    `aria-labelledby="${options.labelledBy}"`,
+    options.describedBy && `aria-describedby="${options.describedBy}"`,
+    `class="${classes.join(' ')}"`,
+  ].filter(Boolean);
+
+  return `<et-overlay-container ${attributes.join(' ')}>${content}</et-overlay-container>`;
+};
+
+const body = (content: string, dividers: DialogMockOptions['dividers'] = false) => {
+  const classes = [
+    'et-overlay-body',
+    dividers && 'et-overlay-body--render-dividers',
+    dividers === 'dynamic' && 'et-overlay-body--dynamic-dividers',
+    dividers === 'dynamic' && 'et-scrollable-body--can-scroll',
+    dividers === 'dynamic' && 'et-scrollable-body--is-at-start',
+  ].filter(Boolean);
+
+  return `<div class="${classes.join(' ')}"><div class="et-overlay-body-container"><div class="et-overlay-body-start-element"></div>${content}<div class="et-overlay-body-end-element"></div></div></div>`;
+};
+
+/**
+ * Draws an open dialog pane (`dialogOverlayStrategy`) with an `et-overlay-main` of header, body and
+ * footer, as HTML. The pane sits in flow; wrap it in `overlayBackdrop()` to draw the scrim.
+ */
+export const dialog = (options: DialogMockOptions) => {
+  const titleId = `et-overlay-title-${options.id ?? 'dialog'}`;
+  const close = options.close ? closeButton(typeof options.close === 'string' ? options.close : undefined) : '';
+  const header = `<div class="et-overlay-header et-dialog-mock-header"><h2 class="et-dialog-mock-title" id="${titleId}" et-overlay-title>${options.title}</h2>${close}</div>`;
+  const footer = options.actions
+    ? `<div class="et-overlay-footer et-dialog-mock-actions">${options.actions.map(footerButton).join('')}</div>`
+    : '';
+
+  return pane(
+    { surface: options.surface, attributes: options.attributes, role: 'dialog', labelledBy: titleId },
+    `<et-overlay-main class="et-overlay-main">${header}${body(options.body, options.dividers)}${footer}</et-overlay-main>`,
+  );
+};
+
+/** Draws the open `et-alert-dialog` from `injectAlertDialog()` in its dialog pane, as HTML. */
+export const alertDialog = (options: AlertDialogMockOptions) => {
+  const id = options.id ?? 'alert';
+  const titleId = `et-overlay-title-${id}`;
+  const messageId = `et-alert-dialog-message-${id}`;
+  const actions =
+    options.kind === 'confirm'
+      ? [
+          footerButton({
+            label: options.cancelLabel ?? 'Cancel',
+            variant: 'outline',
+            attributes: ['data-et-alert-dialog-initial-focus', options.cancelAttributes].filter(Boolean).join(' '),
+          }),
+          footerButton({
+            label: options.confirmLabel ?? 'Confirm',
+            color: options.confirmColor,
+            attributes: options.confirmAttributes,
+          }),
+        ]
+      : [
+          footerButton({
+            label: options.acknowledgeLabel ?? 'OK',
+            attributes: ['data-et-alert-dialog-initial-focus', options.confirmAttributes].filter(Boolean).join(' '),
+          }),
+        ];
+  const message = options.message
+    ? body(`<p id="${messageId}" class="et-alert-dialog-message">${options.message}</p>`)
+    : '';
+
+  return pane(
+    {
+      surface: options.surface,
+      attributes: options.attributes,
+      role: 'alertdialog',
+      labelledBy: titleId,
+      describedBy: options.message ? messageId : undefined,
+    },
+    `<et-alert-dialog class="et-alert-dialog et-overlay-main" data-kind="${options.kind}"><div class="et-overlay-header"><h2 class="et-alert-dialog-title" id="${titleId}" et-overlay-title>${options.title}</h2></div>${message}<div class="et-alert-dialog-actions et-overlay-footer">${actions.join('')}</div></et-alert-dialog>`,
+  );
+};
+
+/** Draws the visible `et-overlay-runtime-backdrop` behind `content`, both in flow. */
+export const overlayBackdrop = (content: string) =>
+  `<div class="et-dialog-mock-scene"><div class="et-overlay-runtime-backdrop et-overlay-backdrop--visible"></div>${content}</div>`;

package/design/divider.ts

@@ -0,0 +1,27 @@
+import dividerBase from '../src/lib/divider/divider.component.css?inline';
+
+export type DividerMockOptions = {
+  orientation?: 'horizontal' | 'vertical';
+  /** Draws the divider as `decorative`: no separator role, hidden from assistive tech. */
+  decorative?: boolean;
+  /** Extra attributes on the divider, e.g. design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `divider()` draws with: the real divider CSS. */
+export const dividerStyles = /* @__PURE__ */ [dividerBase].join('\n');
+
+/** Draws an `et-divider` as the component renders it, as HTML. */
+export const divider = (options: DividerMockOptions = {}) => {
+  const orientation = options.orientation ?? 'horizontal';
+  const attributes = [
+    options.attributes,
+    'class="et-divider"',
+    `data-orientation="${orientation}"`,
+    options.decorative ? 'role="presentation"' : 'role="separator"',
+    !options.decorative && `aria-orientation="${orientation}"`,
+    options.decorative && 'aria-hidden="true"',
+  ].filter(Boolean);
+
+  return `<et-divider ${attributes.join(' ')}></et-divider>`;
+};

package/design/empty-state.ts

@@ -0,0 +1,45 @@
+import emptyStateBase from '../src/lib/empty-state/empty-state.component.css?inline';
+import { FILE_ICON } from '../src/lib/icon/headless/file-icon';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { TRIANGLE_EXCLAMATION_ICON } from '../src/lib/icon/headless/triangle-exclamation-icon';
+import { button, ButtonMockOptions, buttonStyles } from './button';
+import { iconMarkup } from './icon';
+
+export type EmptyStateMockOptions = {
+  heading?: string;
+  description?: string;
+  /** The projected `[etIcon]`. Left out, the file icon; `false` draws none. */
+  icon?: 'file' | 'triangle' | false;
+  /** The label of a projected `et-button etEmptyStateAction`. Left out, no action. */
+  action?: string;
+  /** The action's button variant. Left out, `filled`, as `et-button` defaults to. */
+  actionVariant?: ButtonMockOptions['variant'];
+  /** Extra attributes on the action button, e.g. design markers. */
+  actionAttributes?: string;
+  /** Extra attributes on the empty state, e.g. design markers. */
+  attributes?: string;
+};
+
+const ICONS = {
+  file: FILE_ICON,
+  triangle: TRIANGLE_EXCLAMATION_ICON,
+} as const;
+
+/** The stylesheets `emptyState()` draws with: the real empty-state, button and icon CSS. */
+export const emptyStateStyles = /* @__PURE__ */ [buttonStyles, iconBase, emptyStateBase].join('\n');
+
+/** Draws an `et-empty-state` with its projected icon and action as the component renders it, as HTML. */
+export const emptyState = (options: EmptyStateMockOptions) => {
+  const icon = options.icon === false ? '' : iconMarkup(ICONS[options.icon ?? 'file']);
+  const heading = options.heading ? `<p class="et-empty-state-title">${options.heading}</p>` : '';
+  const description = options.description ? `<p class="et-empty-state-description">${options.description}</p>` : '';
+  const action = options.action
+    ? button({ label: options.action, variant: options.actionVariant }).replace(
+        /^<button /,
+        `<button ${options.actionAttributes ?? ''} etEmptyStateAction `,
+      )
+    : '';
+  const attributes = [options.attributes, 'class="et-empty-state"'].filter(Boolean);
+
+  return `<et-empty-state ${attributes.join(' ')}>${icon}${heading}${description}${action}</et-empty-state>`;
+};

package/design/floating-action.ts

@@ -0,0 +1,55 @@
+import floatingActionBase from '../src/lib/floating-action/floating-action-styles.component.css?inline';
+import { FILTER_ICON } from '../src/lib/icon/headless/filter-icon';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { button, buttonStyles, ButtonMockOptions } from './button';
+import { iconMarkup } from './icon';
+
+export type FloatingActionMockOptions = {
+  /** The trigger, drawn as an `et-button`. */
+  trigger: ButtonMockOptions;
+  /** Draws the filter icon in the trigger, as the story's Filter button could carry. */
+  filterIcon?: boolean;
+  /** Where the trigger is. Left out, `inline`. */
+  state?: 'inline' | 'floating' | 'hidden';
+  /** The in-flow size the anchor holds while the trigger is out of the flow, in px. */
+  heldSize?: { inlineSize: number; blockSize: number };
+  /** Extra attributes on the trigger, e.g. design markers. */
+  triggerAttributes?: string;
+  /** Content before the anchor, as HTML. */
+  before?: string;
+  /** The region the trigger acts on (`etFloatingActionScope`), as HTML. Left out, no scope. */
+  scope?: string;
+  /** Content after the scope, as HTML. */
+  after?: string;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `floatingAction()` draws with: the real floating-action, button and icon CSS. */
+export const floatingActionStyles = /* @__PURE__ */ [buttonStyles, iconBase, floatingActionBase].join('\n');
+
+/** Draws `[etFloatingAction]` with its anchor, trigger and scope as a static snapshot of one state. */
+export const floatingAction = (options: FloatingActionMockOptions) => {
+  const { state = 'inline', heldSize } = options;
+  const trigger = button({
+    ...options.trigger,
+    icon: options.filterIcon ? iconMarkup(FILTER_ICON) : options.trigger.icon,
+    class: ['et-floating-action-trigger', options.trigger.class].filter(Boolean).join(' '),
+    style: [state !== 'inline' && 'animation: none; transition: none', options.trigger.style]
+      .filter(Boolean)
+      .join('; '),
+  }).replace(
+    /^<(button|a) /,
+    `<$1 ${[options.triggerAttributes, `data-floating-action-state="${state}"`].filter(Boolean).join(' ')} `,
+  );
+
+  const held =
+    state !== 'inline' && heldSize
+      ? ` style="min-inline-size: ${heldSize.inlineSize}px; min-block-size: ${heldSize.blockSize}px"`
+      : '';
+  const anchor = `<div class="et-floating-action-anchor"${held}>${trigger}</div>`;
+  const scope = options.scope === undefined ? '' : `<div class="et-floating-action-scope">${options.scope}</div>`;
+  const host = [options.attributes, 'class="et-floating-action"', `data-state="${state}"`].filter(Boolean);
+
+  return `<div ${host.join(' ')}>${options.before ?? ''}${anchor}${scope}${options.after ?? ''}</div>`;
+};

package/design/form-field.ts

@@ -5,6 +5,8 @@ import suffixOverlap from '../src/lib/forms/form-field/form-field-suffix-overlap
 import label from '../src/lib/forms/form-field/headless/label.directive.css?inline';
 import hint from '../src/lib/forms/form-field/hint.component.css?inline';
 import inputBase from '../src/lib/forms/input/input.component.css?inline';
+import textareaBase from '../src/lib/forms/textarea/textarea.component.css?inline';
+import textareaAutosize from '../src/lib/forms/textarea/textarea-autosize-styles.component.css?inline';
 import iconStyles from '../src/lib/icon/headless/icon-styles.component.css?inline';
 
 /** The field state a control draws itself from. */
@@ -75,7 +77,16 @@ export type InputMockOptions = {
   textAlign?: 'start' | 'center' | 'end';
 };
 
-/** The stylesheets `formField()` and `input()` draw with: the real `et-form-field` CSS. */
+export type TextareaMockOptions = {
+  value?: string;
+  placeholder?: string;
+  rows?: number;
+  /** Grows with its content, from `minRows` (default `rows`). On by default, like the real textarea. */
+  autosize?: boolean;
+  minRows?: number;
+};
+
+/** The stylesheets `formField()`, `input()` and `textarea()` draw with: the real `et-form-field` CSS. */
 export const formFieldStyles = /* @__PURE__ */ [
   interactiveStyles,
   iconStyles,
@@ -85,6 +96,8 @@ export const formFieldStyles = /* @__PURE__ */ [
   label,
   hint,
   inputBase,
+  textareaBase,
+  textareaAutosize,
   `.et-design-panel-anchor { position: relative; }
 .et-design-panel { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 0.3rem); z-index: 1; }`,
 ].join('\n');
@@ -114,6 +127,32 @@ export const input = (options: InputMockOptions = {}): FormFieldControlMock => (
   },
 });
 
+/** Draws `<et-textarea>` as a control for `formField()`. */
+export const textarea = (options: TextareaMockOptions = {}): FormFieldControlMock => ({
+  controlType: 'textarea',
+  hasValue: !!options.value,
+  html: (state) => {
+    const rows = options.rows ?? 3;
+    const autosize = options.autosize ?? true;
+    const attributes = attributesOf([
+      'class="et-textarea-native"',
+      `rows="${rows}"`,
+      state.disabled && 'disabled',
+      state.readonly && 'readonly',
+      state.required && 'required',
+      options.placeholder && `placeholder="${options.placeholder}"`,
+      state.invalid && 'aria-invalid="true"',
+      state.describedBy && `aria-describedby="${state.describedBy}"`,
+      state.labelId && `aria-labelledby="${state.labelId}"`,
+      `data-resize="${autosize ? 'none' : 'vertical'}"`,
+      autosize && 'data-et-textarea-autosize=""',
+      autosize && `style="--et-textarea-min-rows: ${options.minRows ?? rows}"`,
+    ]);
+
+    return `<et-textarea class="et-color-interactive et-textarea"><textarea ${attributes}>${options.value ?? ''}</textarea></et-textarea>`;
+  },
+});
+
 /** Draws `<et-form-field>` with a control, its label, affixes and messages, as the component renders them. */
 export const formField = (options: FormFieldMockOptions) => {
   const control: FormFieldControlMock =

package/design/grid.ts

@@ -0,0 +1,148 @@
+import { resizeHandlesStyles } from '@ethlete/core/design/resize-handles';
+import iconButtonBase from '../src/lib/button/icon-button.component.css?inline';
+import defaultActionsBase from '../src/lib/grid/grid-item-default-actions.component.css?inline';
+import toolbarBase from '../src/lib/grid/grid-item-toolbar.component.css?inline';
+import gridItemBase from '../src/lib/grid/grid-item.component.css?inline';
+import gridBase from '../src/lib/grid/grid.component.css?inline';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { TIMES_ICON } from '../src/lib/icon/headless/times-icon';
+import { buttonStyles } from './button';
+import { iconMarkup } from './icon';
+
+export type GridMockPosition = {
+  col: number;
+  row: number;
+  colSpan: number;
+  rowSpan: number;
+};
+
+export type GridMockItem = GridMockPosition & {
+  title: string;
+  /** A muted second line under the title. */
+  subtitle?: string;
+  /** A design marker for the item, e.g. `hover` or `focus-visible`. */
+  force?: string;
+  /** A design marker for the default remove action, e.g. `hover` or `focus-visible`. */
+  removeForce?: string;
+  /** `dragging` lifts the item off its slot by `offset`; `resizing` shows every handle, `activeEdge` held. */
+  state?: 'dragging' | 'resizing';
+  /** The pixel offset from the slot a dragged item follows the pointer by. */
+  offset?: { x: number; y: number };
+  activeEdge?: 'n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+};
+
+export type GridMockOptions = {
+  items: readonly GridMockItem[];
+  /** Left out, 448: the content width the grid would measure, in px. */
+  width?: number;
+  /** Left out, 4: the columns of the active breakpoint. */
+  columns?: number;
+  /** Left out, 100, the component default. */
+  rowHeight?: number;
+  /** Left out, 16, the component default. */
+  gap?: number;
+  /** Draws `et-grid-item-default-actions` in every item, as a registered `actionsComponent` does. */
+  actions?: boolean;
+  /** The drop placeholder (`.et-grid-ghost`) at the dragged item's target slot. */
+  ghost?: GridMockPosition;
+  readOnly?: boolean;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+const RESIZE_EDGES = ['n', 'e', 's', 'w', 'ne', 'nw', 'se', 'sw'] as const;
+
+/** The stylesheets the grid mock draws with: the real grid, grid item, toolbar, default actions and resize handle CSS. */
+export const gridStyles = /* @__PURE__ */ [
+  buttonStyles,
+  iconBase,
+  iconButtonBase,
+  resizeHandlesStyles,
+  gridBase,
+  gridItemBase,
+  toolbarBase,
+  defaultActionsBase,
+  `@layer components {
+  .et-grid-mock-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    box-sizing: border-box;
+    height: 100%;
+    padding: 12px;
+  }
+  .et-grid-mock-title {
+    overflow: hidden;
+    font-size: 1.4rem;
+    font-weight: 600;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--et-surface-color-solid);
+  }
+  .et-grid-mock-subtitle {
+    font-size: 1.2rem;
+    color: var(--et-surface-color-muted-solid);
+  }
+}`,
+].join('\n');
+
+const geometryOf = (options: GridMockOptions) => {
+  const width = options.width ?? 448;
+  const columns = options.columns ?? 4;
+  const gap = options.gap ?? 16;
+  const rowHeight = options.rowHeight ?? 100;
+  const cellWidth = Math.max(0, (width - gap * (columns - 1)) / columns);
+
+  return { gap, rowHeight, cellWidth };
+};
+
+const rectOf = (position: GridMockPosition, geometry: ReturnType<typeof geometryOf>) => ({
+  x: position.col * (geometry.cellWidth + geometry.gap),
+  y: position.row * (geometry.rowHeight + geometry.gap),
+  width: position.colSpan * geometry.cellWidth + (position.colSpan - 1) * geometry.gap,
+  height: position.rowSpan * geometry.rowHeight + (position.rowSpan - 1) * geometry.gap,
+});
+
+const styled = (css: string) => ` style="${css}"`;
+
+const sizeStyle = (rect: { x: number; y: number; width: number; height: number }) =>
+  styled(`translate: ${rect.x}px ${rect.y}px; width: ${rect.width}px; height: ${rect.height}px;`);
+
+const removeAction = (item: GridMockItem) =>
+  `<div etGridItemAction><et-grid-item-default-actions><et-grid-item-toolbar class="et-grid-item-toolbar"><button aria-label="Remove ${item.title}" type="button" class="et-grid-item-default-actions__remove et-surface-interactive et-color-interactive et-icon-button et-focus-ring et-color--inherited" data-variant="transparent" data-size="xs"${item.removeForce ? ` data-et-force="${item.removeForce}"` : ''}><div class="et-icon-button-icon">${iconMarkup(TIMES_ICON)}</div></button></et-grid-item-toolbar></et-grid-item-default-actions></div>`;
+
+const gridItem = (item: GridMockItem, options: GridMockOptions) => {
+  const geometry = geometryOf(options);
+  const slot = rectOf(item, geometry);
+  const rect =
+    item.state === 'dragging' && item.offset ? { ...slot, x: slot.x + item.offset.x, y: slot.y + item.offset.y } : slot;
+  const classes = [
+    'et-grid-item',
+    'et-surface--inherited',
+    item.state === 'dragging' && 'et-grid-item--dragging et-grid-item--direct',
+    item.state === 'resizing' && 'et-grid-item--resizing',
+  ]
+    .filter(Boolean)
+    .join(' ');
+  const handles = RESIZE_EDGES.map((edge) => `<div class="et-resize-handle et-resize-handle--${edge}"></div>`).join('');
+  const subtitle = item.subtitle ? `<div class="et-grid-mock-subtitle">${item.subtitle}</div>` : '';
+
+  return [
+    `<et-grid-item class="${classes}" data-et-surface-fill role="group" aria-label="${item.title}" tabindex="0" ${sizeStyle(rect)}${item.force ? ` data-et-force="${item.force}"` : ''}>`,
+    `<div class="et-grid-item__content"><div class="et-grid-mock-content"><div class="et-grid-mock-title">${item.title}</div>${subtitle}</div></div>`,
+    `<et-resize-handles class="et-resize-handles"${item.activeEdge ? ` data-active-edge="${item.activeEdge}"` : ''}${options.readOnly ? ' inert=""' : ''}>${handles}</et-resize-handles>`,
+    `<div class="et-grid-item__actions">${options.actions ? removeAction(item) : ''}</div>`,
+    `</et-grid-item>`,
+  ].join('');
+};
+
+/** Draws an `et-grid` with its items laid out by the grid maths, at rest or mid-drag or mid-resize. */
+export const grid = (options: GridMockOptions) => {
+  const geometry = geometryOf(options);
+  const rows = Math.max(0, ...options.items.map((item) => item.row + item.rowSpan));
+  const height = rows <= 0 ? 0 : rows * geometry.rowHeight + (rows - 1) * geometry.gap;
+  const classes = ['et-grid', options.readOnly && 'et-grid--readonly'].filter(Boolean).join(' ');
+  const ghost = options.ghost ? `<div class="et-grid-ghost" ${sizeStyle(rectOf(options.ghost, geometry))}></div>` : '';
+
+  return `<et-grid class="${classes}" role="region" aria-label="Dashboard" ${styled(`height: ${height}px; --et-grid-gap: ${geometry.gap}px;`)} ${options.attributes ?? ''}>${options.items.map((item) => gridItem(item, options)).join('')}${ghost}</et-grid>`;
+};

package/design/icon-set.ts

@@ -0,0 +1,19 @@
+/// <reference types="vite/client" />
+import { IconDefinition } from '../src/lib/icon/headless/icon-definition';
+
+const modules = /* @__PURE__ */ import.meta.glob<Record<string, unknown>>(
+  ['../src/lib/icon/headless/*-icon.ts', '../src/lib/icon/headless/*-icons.ts'],
+  { eager: true },
+);
+
+const isIconDefinition = (value: unknown): value is IconDefinition =>
+  !!value &&
+  typeof value === 'object' &&
+  typeof (value as IconDefinition).name === 'string' &&
+  typeof (value as IconDefinition).data === 'string';
+
+/** Every icon the SDK ships, read from the icon source files and sorted by name. */
+export const SDK_ICONS: readonly IconDefinition[] = /* @__PURE__ */ Object.values(modules)
+  .flatMap((module) => Object.values(module))
+  .filter(isIconDefinition)
+  .sort((a, b) => a.name.localeCompare(b.name));

package/design/icon.ts

@@ -0,0 +1,9 @@
+import { IconDefinition } from '../src/lib/icon/headless/icon-definition';
+
+/** Draws `<i etIcon>` as the icon directive renders it: the icon's classes around its trimmed SVG. */
+export const iconMarkup = (icon: IconDefinition, className?: string) => {
+  const base = `et-icon et-icon--${icon.name}`;
+  const classes = [className, base, icon.variant ? `${base}--${icon.variant}` : undefined].filter(Boolean).join(' ');
+
+  return `<i etIcon="${icon.name}" aria-hidden="true" class="${classes}">${icon.data.trim()}</i>`;
+};