@ethlete/components 1.0.0-next.78 → 1.0.0-next.80

package/design/dialog.ts

@@ -0,0 +1,216 @@
+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. Left out, the pane takes the surface one elevation above its parent. */
+  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;
+  /** A surface theme name the app registers, for the pane. Left out, the pane takes the surface one elevation above its parent. */
+  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',
+    options.surface && `et-surface--${options.surface}`,
+    'et-with-default-animation',
+    'et-animation-enter-done',
+  ].filter(Boolean);
+  const attributes = [
+    options.attributes,
+    !options.surface && 'data-et-auto-surface',
+    `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

@@ -84,6 +84,8 @@ export type TextareaMockOptions = {
   /** Grows with its content, from `minRows` (default `rows`). On by default, like the real textarea. */
   autosize?: boolean;
   minRows?: number;
+  /** The native textarea's `aria-label`, for a field without a visible label. */
+  ariaLabel?: string;
 };
 
 /** The stylesheets `formField()`, `input()` and `textarea()` draw with: the real `et-form-field` CSS. */
@@ -144,6 +146,7 @@ export const textarea = (options: TextareaMockOptions = {}): FormFieldControlMoc
       state.invalid && 'aria-invalid="true"',
       state.describedBy && `aria-describedby="${state.describedBy}"`,
       state.labelId && `aria-labelledby="${state.labelId}"`,
+      options.ariaLabel && `aria-label="${options.ariaLabel}"`,
       `data-resize="${autosize ? 'none' : 'vertical'}"`,
       autosize && 'data-et-textarea-autosize=""',
       autosize && `style="--et-textarea-min-rows: ${options.minRows ?? rows}"`,

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/input.ts

@@ -0,0 +1,86 @@
+import description from '../src/lib/forms/description/description.component.css?inline';
+import { CHECK_ICON } from '../src/lib/icon/headless/check-icon';
+import { LOCK_ICON } from '../src/lib/icon/headless/lock-icon';
+import { formField, formFieldStyles, FormFieldMockOptions, input, InputMockOptions } from './form-field';
+import { iconMarkup } from './icon';
+
+/** An interaction a frame forces with the `data-et-force` design marker. */
+export type TextInputMockForce = 'hover' | 'focus-visible';
+
+/** The icons the input stories put in the affixes. */
+export const textInputAffixIcons = { lock: LOCK_ICON, check: CHECK_ICON };
+
+export type TextInputMockOptions = Omit<FormFieldMockOptions, 'control'> &
+  InputMockOptions & {
+    /** An unresolved bulk-edit value: the raw value stays hidden and `mixedLabel` shows as the placeholder. */
+    mixed?: boolean;
+    mixedLabel?: string;
+    /** An `et-description` under the field, as HTML. */
+    description?: string;
+    prefixIcon?: keyof typeof textInputAffixIcons;
+    suffixIcon?: keyof typeof textInputAffixIcons;
+    /** Forced interactions: `hover` on the control frame, `focus-visible` on the native input. */
+    force?: TextInputMockForce | TextInputMockForce[];
+  };
+
+/** The stylesheets `textInput()` draws with: the real `et-form-field`, `et-input` and `et-description` CSS. */
+export const textInputStyles = /* @__PURE__ */ [formFieldStyles, description].join('\n');
+
+const forceList = (force: TextInputMockForce | TextInputMockForce[] | undefined) =>
+  force === undefined ? [] : Array.isArray(force) ? force : [force];
+
+/** Draws `<et-form-field>` around `<et-input>` as HTML, with the DOM the components render. */
+export const textInput = (options: TextInputMockOptions = {}) => {
+  const { id = 'field', value, placeholder, type, textAlign, mixed, mixedLabel = 'Mixed', force, ...field } = options;
+  const forced = forceList(force);
+  const descriptionId = `et-description-${id}`;
+  const control = input({
+    value: mixed ? undefined : value,
+    placeholder: mixed ? mixedLabel : placeholder,
+    type,
+    textAlign,
+  });
+  const prefix = options.prefixIcon ? iconMarkup(textInputAffixIcons[options.prefixIcon]) : options.prefix;
+  const suffix = options.suffixIcon ? iconMarkup(textInputAffixIcons[options.suffixIcon]) : options.suffix;
+  const prefixOffset = options.prefixIcon
+    ? '--_et-form-field-prefix-offset: calc(16px + var(--et-form-field-control-affix-gap));'
+    : undefined;
+
+  let html = formField({
+    ...field,
+    id,
+    prefix,
+    suffix,
+    style: [prefixOffset, options.style].filter(Boolean).join(' ') || undefined,
+    control: {
+      ...control,
+      hasValue: !!mixed || control.hasValue,
+      html: (state) => {
+        const describedBy = [options.description !== undefined && descriptionId, state.describedBy]
+          .filter(Boolean)
+          .join(' ');
+        let markup = control.html({ ...state, describedBy: describedBy || null });
+
+        if (mixed) markup = markup.replace('<et-input class="et-color-interactive et-input"', '$& data-mixed="true"');
+        if (forced.includes('focus-visible'))
+          markup = markup.replace('<input ', '<input data-et-force="focus-visible" ');
+
+        return markup;
+      },
+    },
+  });
+
+  if (forced.includes('hover')) {
+    html = html.replace('<div class="et-form-field-control-frame"', '$& data-et-force="hover"');
+  }
+
+  if (options.description !== undefined) {
+    const descriptionHtml = `<et-description class="et-description" id="${descriptionId}">${options.description}</et-description>`;
+    const supportStart = html.indexOf('<div class="et-color-interactive-exclude et-form-field-support"');
+    const at = supportStart === -1 ? html.lastIndexOf('</et-form-field>') : supportStart;
+
+    html = `${html.slice(0, at)}${descriptionHtml}${html.slice(at)}`;
+  }
+
+  return html;
+};

package/design/kbd.ts

@@ -0,0 +1,19 @@
+import kbdBase from '../src/lib/kbd/kbd.component.css?inline';
+
+export type KbdMockOptions = {
+  /** The glyph printed on each keycap, in order, e.g. `['⌘', '⇧', 'Z']` for `mod+shift+z` on Apple. */
+  keys: string[];
+  /** Extra attributes on the kbd, e.g. design markers. */
+  attributes?: string;
+};
+
+/** The stylesheet `kbd()` draws with: the real kbd CSS. */
+export const kbdStyles = kbdBase;
+
+/** Draws an `et-kbd` with one keycap per key as the component renders it, as HTML, without its visually hidden spoken label. */
+export const kbd = (options: KbdMockOptions) => {
+  const keys = options.keys.map((key) => `<kbd class="et-kbd-key" aria-hidden="true">${key}</kbd>`).join('');
+  const attributes = [options.attributes, 'class="et-kbd"'].filter(Boolean);
+
+  return `<et-kbd ${attributes.join(' ')}>${keys}</et-kbd>`;
+};