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

package/design/notification.ts

@@ -0,0 +1,129 @@
+import iconButtonBase from '../src/lib/button/icon-button.component.css?inline';
+import textButtonBase from '../src/lib/button/text-button.component.css?inline';
+import { CIRCLE_CHECK_ICON } from '../src/lib/icon/headless/circle-check-icon';
+import { CIRCLE_INFO_ICON } from '../src/lib/icon/headless/circle-info-icon';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { TIMES_ICON } from '../src/lib/icon/headless/times-icon';
+import { TRIANGLE_EXCLAMATION_ICON } from '../src/lib/icon/headless/triangle-exclamation-icon';
+import spinnerBase from '../src/lib/loader/spinner/spinner-styles.component.css?inline';
+import notificationBase from '../src/lib/notification/notification.component.css?inline';
+import { buttonStyles } from './button';
+import { iconMarkup } from './icon';
+
+export type NotificationMockAction = {
+  label: string;
+  /** Extra attributes on the action button, e.g. design markers. */
+  attributes?: string;
+};
+
+export type NotificationMockOptions = {
+  status: 'success' | 'error' | 'info' | 'loading';
+  title: string;
+  message?: string;
+  /** The `action` of the notification config. */
+  action?: NotificationMockAction;
+  /** The `secondaryAction` of the notification config. */
+  secondaryAction?: NotificationMockAction;
+  /**
+   * The color theme name the manager resolves for the status (`statusColorMapping`, else the semantic theme of
+   * its type). Left out, the notification takes the color theme around it.
+   */
+  color?: string;
+  /** A surface theme name the app registers. Left out, the notification inherits it. */
+  surface?: string;
+  /** Extra attributes on the dismiss button, e.g. design markers. */
+  dismissAttributes?: string;
+  /** Extra attributes on the notification, e.g. design markers. */
+  attributes?: string;
+};
+
+const STATUS_ICONS = {
+  success: CIRCLE_CHECK_ICON,
+  error: TRIANGLE_EXCLAMATION_ICON,
+  info: CIRCLE_INFO_ICON,
+  loading: null,
+} as const;
+
+/** The stylesheets `notification()` draws with: the real notification, icon button, text button, spinner and icon CSS. */
+export const notificationStyles = /* @__PURE__ */ [
+  buttonStyles,
+  iconBase,
+  iconButtonBase,
+  textButtonBase,
+  spinnerBase,
+  notificationBase,
+  `@layer components {
+  .et-notification-mock-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--et-notification-stack-gap, 0.5rem);
+  }
+  .et-notification-mock-spinner {
+    --et-spinner-size: 16px;
+    --et-spinner-stroke-width: 2px;
+  }
+  .et-notification-mock-spinner circle {
+    stroke-dasharray: 18.85px;
+    stroke-dashoffset: 9.42px;
+    stroke-width: 12.5%;
+  }
+}`,
+].join('\n');
+
+const spinner = () => {
+  const circle = `<svg viewBox="0 0 8 8" class="et-spinner-circle-graphic" xmlns="http://www.w3.org/2000/svg" focusable="false"><circle r="3" cx="50%" cy="50%"></circle></svg>`;
+
+  return `<et-spinner data-et-skip="CLIPPED" class="et-notification-spinner et-notification-mock-spinner et-color--inherited et-spinner" role="progressbar" aria-label="Loading"><div class="et-spinner-indeterminate"><div class="et-spinner-indeterminate-container" aria-hidden="true"><div class="et-spinner-layer"><div class="et-spinner-circle-clipper et-spinner-circle-left">${circle}</div><div class="et-spinner-gap-patch">${circle}</div><div class="et-spinner-circle-clipper et-spinner-circle-right">${circle}</div></div></div></div></et-spinner>`;
+};
+
+const dismissButton = (color: string | undefined, attributes?: string) => {
+  const classes = [
+    'et-notification-dismiss-btn',
+    'et-surface-interactive',
+    'et-color-interactive',
+    'et-icon-button',
+    'et-focus-ring',
+    `et-color--${color ?? 'inherited'}`,
+  ];
+
+  return `<button ${attributes ?? ''} etNotificationDismiss type="button" aria-label="Dismiss" class="${classes.join(' ')}" data-variant="transparent" data-size="xs"><div class="et-icon-button-icon">${iconMarkup(TIMES_ICON)}</div></button>`;
+};
+
+const actionButton = (action: NotificationMockAction, slot: 'primary' | 'secondary') => {
+  const classes = [
+    slot === 'secondary' && 'et-notification-secondary-action',
+    'et-text-button',
+    'et-color-interactive',
+    'et-focus-ring',
+    'et-color--inherited',
+  ].filter(Boolean);
+  const slotAttribute = slot === 'secondary' ? 'etNotificationAction="secondary"' : 'etNotificationAction';
+
+  return `<button ${action.attributes ?? ''} ${slotAttribute} type="button" class="${classes.join(' ')}" data-icon-alignment="start" data-size="xs"><div class="et-text-button-contents">${action.label}</div></button>`;
+};
+
+/** Draws an `et-notification` as the notification stack renders it, entered and at rest, as HTML. */
+export const notification = (options: NotificationMockOptions) => {
+  const icon = STATUS_ICONS[options.status];
+  const glyph = icon ? iconMarkup(icon, 'et-notification-icon') : options.status === 'loading' ? spinner() : '';
+  const header = `<div class="et-notification-header">${glyph}<span class="et-notification-title">${options.title}</span>${dismissButton(options.color, options.dismissAttributes)}</div>`;
+  const message = options.message ? `<p class="et-notification-message">${options.message}</p>` : '';
+  const actions = [
+    options.action && actionButton(options.action, 'primary'),
+    options.secondaryAction && actionButton(options.secondaryAction, 'secondary'),
+  ].filter(Boolean);
+  const footer = actions.length ? `<div class="et-notification-footer">${actions.join('')}</div>` : '';
+  const classes = [
+    'et-notification',
+    `et-color--${options.color ?? 'inherited'}`,
+    `et-surface--${options.surface ?? 'inherited'}`,
+    'et-animation-enter-done',
+  ];
+
+  return `<et-notification ${options.attributes ?? ''} class="${classes.join(' ')}"><div class="et-notification-content">${header}${message}${footer}</div></et-notification>`;
+};
+
+/** Draws notifications in the stack's column and gap, in flow instead of fixed to the viewport. */
+export const notificationStack = (notifications: string[]) =>
+  `<div class="et-notification-stack et-notification-mock-stack">${notifications.join('')}</div>`;

package/design/otp-input.ts

@@ -0,0 +1,107 @@
+import formSupport from '../src/lib/forms/form-field/form-support-styles.component.css?inline';
+import label from '../src/lib/forms/form-field/headless/label.directive.css?inline';
+import otpInputBase from '../src/lib/forms/otp-input/otp-input.component.css?inline';
+
+/** An interaction a frame forces with the `data-et-force` design marker. */
+export type OtpInputMockForce = 'hover' | 'active';
+
+export type OtpInputMockOptions = {
+  /** The number of segments. */
+  length?: number;
+  /** The typed characters; only the first `length` show. */
+  value?: string;
+  /** Draws each typed character as a dot. */
+  masked?: boolean;
+  /** Draws the field focused: the caret segment after the last character, or the last segment when full. */
+  focused?: boolean;
+  /** The label, as HTML. */
+  label?: string;
+  /** The hint, as HTML. Hidden while an `error` shows. */
+  hint?: string;
+  /** The error message, as HTML. Draws the field touched and invalid. */
+  error?: string;
+  /** The color theme name the app registers for errors, e.g. `danger` in Storybook. */
+  errorColor?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  /** Unique per frame: the label and message ids derive from it. */
+  id?: string;
+  /** A color theme name the app registers. */
+  color?: string;
+  /** Forced interactions on the field. */
+  force?: OtpInputMockForce | OtpInputMockForce[];
+};
+
+/** The stylesheets `otpInput()` draws with: the real `et-otp-input` and form support CSS. */
+export const otpInputStyles = /* @__PURE__ */ [label, formSupport, otpInputBase].join('\n');
+
+const forceList = (force: OtpInputMockForce | OtpInputMockForce[] | undefined) =>
+  force === undefined ? [] : Array.isArray(force) ? force : [force];
+
+/** Draws `<et-otp-input>` as HTML, with the DOM the component renders. */
+export const otpInput = (options: OtpInputMockOptions) => {
+  const { id = 'otp-input', length = 6, value = '' } = options;
+  const ids = { hint: `et-form-field-hint-${id}`, error: `et-form-field-error-${id}` };
+  const labelId = options.label !== undefined ? `et-label-${id}` : null;
+  const invalid = options.error !== undefined;
+  const supportId = invalid ? ids.error : options.hint !== undefined ? ids.hint : null;
+  const colorClass = invalid && options.errorColor ? options.errorColor : (options.color ?? 'inherited');
+  const chars = value.slice(0, length);
+  const caretIndex = options.focused && !options.readonly ? Math.min(chars.length, length - 1) : -1;
+  const force = forceList(options.force);
+
+  const hostAttributes = [
+    `class="et-otp-input et-color--${colorClass}"`,
+    invalid && 'data-error="true"',
+    force.length > 0 && `data-et-force="${force.join(' ')}"`,
+  ].filter(Boolean);
+
+  const segments = Array.from({ length }, (_, index) => {
+    const char = chars[index];
+    const attributes = [
+      'class="et-otp-input-segment"',
+      index === caretIndex && 'data-caret="true"',
+      char !== undefined && 'data-filled="true"',
+    ].filter(Boolean);
+    const content =
+      char !== undefined
+        ? `<span class="et-otp-input-segment-char">${options.masked ? '•' : char}</span>`
+        : index === caretIndex
+          ? '<span class="et-otp-input-caret"></span>'
+          : '';
+
+    return `<div ${attributes.join(' ')}>${content}</div>`;
+  }).join('');
+
+  const inputAttributes = [
+    'class="et-otp-input-native"',
+    'autocapitalize="off"',
+    'autocomplete="one-time-code"',
+    'spellcheck="false"',
+    `type="${options.masked ? 'password' : 'text'}"`,
+    'inputmode="numeric"',
+    `value="${chars}"`,
+    options.required && 'required',
+    options.disabled && 'disabled',
+    options.readonly && 'readonly',
+    labelId && `aria-labelledby="${labelId}"`,
+    supportId && `aria-describedby="${supportId}"`,
+    invalid && 'aria-invalid="true"',
+  ].filter(Boolean);
+
+  const labelHtml = labelId
+    ? `<et-label id="${labelId}"${options.disabled ? ' data-disabled="true"' : ''}><span class="et-label-content">${options.label}</span>${options.required ? '<span aria-hidden="true" class="et-label-required-marker">*</span>' : ''}</et-label>`
+    : '';
+
+  const support =
+    options.hint === undefined && options.error === undefined
+      ? ''
+      : `<et-form-support class="et-form-support"><div class="et-form-support-stack">${
+          invalid
+            ? `<div class="et-form-support-content et-form-support-errors${options.errorColor ? ` et-color--${options.errorColor}` : ''}" id="${ids.error}" aria-atomic="true" aria-live="polite" data-active="true" data-direction="from-below" data-state="active"><et-form-error class="et-form-error">${options.error}</et-form-error></div>`
+            : `<div class="et-form-support-content et-form-support-hint" id="${ids.hint}" data-active="true" data-direction="from-above" data-state="active"><et-hint>${options.hint}</et-hint></div>`
+        }</div></et-form-support>`;
+
+  return `<et-otp-input ${hostAttributes.join(' ')}>${labelHtml}<div class="et-otp-input-field"><div class="et-otp-input-segments" aria-hidden="true">${segments}</div><input ${inputAttributes.join(' ')}></div>${support}</et-otp-input>`;
+};

package/design/pagination.ts

@@ -0,0 +1,120 @@
+import paginationBase from '../src/lib/pagination/pagination.component.css?inline';
+import { button, buttonStyles } from './button';
+
+type PaginationMockControlType = 'first' | 'previous' | 'next' | 'last';
+
+export type PaginationMockItem =
+  | {
+      type: 'page';
+      page: number;
+      current?: boolean;
+      /** Extra attributes on the item's button, e.g. design markers. */
+      attributes?: string;
+    }
+  | {
+      type: PaginationMockControlType;
+      /** The page the control goes to; links draw it into their href. */
+      page?: number;
+      disabled?: boolean;
+      attributes?: string;
+    }
+  | { type: 'ellipsis' };
+
+export type PaginationMockOptions = {
+  items: PaginationMockItem[];
+  /** Defaults to `md`. */
+  size?: 'sm' | 'md';
+  /** Draws `<a href>` items instead of `<button>`s, as `renderAs="links"` does. */
+  renderAs?: 'buttons' | 'links';
+  /** The "Showing 1–10 of 200" readout before the list, as `totalItems` and `pageSize` turn it on. */
+  range?: string;
+  /** Draws the compact pager: this "3 / 20" readout, then only the previous and next items. */
+  compactStatus?: string;
+  /** Defaults to `true`, as `responsive` sets it. */
+  fitWidth?: boolean;
+};
+
+const CHEVRON_PATHS: Record<PaginationMockControlType, string> = {
+  first: 'M11 3 6 8l5 5M5 3v10',
+  previous: 'M10 3 5 8l5 5',
+  next: 'M6 3l5 5-5 5',
+  last: 'M5 3l5 5-5 5M11 3v10',
+};
+
+const CONTROL_LABELS: Record<PaginationMockControlType, string> = {
+  first: 'First page',
+  previous: 'Previous page',
+  next: 'Next page',
+  last: 'Last page',
+};
+
+const chevron = (type: PaginationMockControlType) =>
+  `<svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden="true"><path d="${CHEVRON_PATHS[type]}" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+
+/** The stylesheets `pagination()` draws with: the real `et-pagination` and `et-button` CSS. */
+export const paginationStyles = `${buttonStyles}\n${paginationBase}`;
+
+const control = (item: Exclude<PaginationMockItem, { type: 'ellipsis' }>, renderAs: 'buttons' | 'links') => {
+  const isPage = item.type === 'page';
+  const current = isPage && !!item.current;
+  const disabled = !isPage && !!item.disabled;
+  const link = renderAs === 'links' && !disabled && item.page !== undefined;
+  const label = isPage ? `Page ${item.page}` : CONTROL_LABELS[item.type];
+
+  const markup = button({
+    label: isPage ? `${item.page}` : chevron(item.type),
+    size: 'sm',
+    variant: current ? 'filled' : 'transparent',
+    color: current ? undefined : 'surface',
+    disabled,
+    tag: link ? 'a' : 'button',
+    class: isPage ? 'et-pagination-button' : 'et-pagination-button et-pagination-button--control',
+  });
+
+  const attributes = [
+    item.attributes,
+    link && `href="?page=${item.page}"`,
+    `aria-label="${label}"`,
+    current && 'aria-current="page"',
+    `data-type="${item.type}"`,
+  ].filter(Boolean);
+
+  return markup.replace(/^<(button|a) /, `<$1 ${attributes.join(' ')} `);
+};
+
+const listItem = (item: PaginationMockItem, renderAs: 'buttons' | 'links') =>
+  `<li data-type="${item.type}" class="et-pagination-item">${
+    item.type === 'ellipsis'
+      ? '<span class="et-pagination-ellipsis" aria-hidden="true">…</span>'
+      : control(item, renderAs)
+  }</li>`;
+
+const readout = (text: string) =>
+  `<span class="et-pagination-readout-sizer" aria-hidden="true">${text}</span><span class="et-pagination-readout-text">${text}</span>`;
+
+/** Draws `<et-pagination>` as HTML, with the DOM and classes the component renders. */
+export const pagination = (options: PaginationMockOptions) => {
+  const { size = 'md', renderAs = 'buttons', compactStatus, fitWidth = true } = options;
+  const compact = compactStatus !== undefined;
+
+  const hostAttributes = [
+    'class="et-pagination-host"',
+    'role="navigation"',
+    'aria-label="Pagination"',
+    `data-size="${size}"`,
+    compact && 'data-compact=""',
+    fitWidth && !compact && 'data-fit-width=""',
+  ].filter(Boolean);
+
+  const range =
+    !compact && options.range ? `<p class="et-pagination-range" aria-live="polite">${readout(options.range)}</p>` : '';
+
+  const items = compact
+    ? `<li class="et-pagination-status" aria-live="polite">${readout(compactStatus)}</li>${options.items
+        .filter((item) => item.type === 'previous' || item.type === 'next')
+        .map((item) => listItem(item, renderAs))
+        .join('')}`
+    : options.items.map((item) => listItem(item, renderAs)).join('');
+
+  return `<et-pagination ${hostAttributes.join(' ')}>${range}<ul class="et-pagination-list">${items}</ul></et-pagination>`;
+};

package/design/picture.ts

@@ -0,0 +1,80 @@
+import pictureBase from '../src/lib/picture/picture.component.css?inline';
+
+export type PictureMockSource = {
+  srcset: string;
+  media?: string;
+  type?: string;
+};
+
+export type PictureMockOptions = {
+  /** The `<img>` URL. Left out, no `<img>` renders, as when `defaultSrc` has not arrived yet. */
+  src?: string;
+  alt: string;
+  /** The `<source>` candidates before the `<img>`. */
+  sources?: PictureMockSource[];
+  /** The `<figcaption>` text. Left out, no caption renders. */
+  figcaption?: string;
+  /** Held only when `width` is left out, as the component does. */
+  aspectRatio?: string;
+  width?: number;
+  height?: number;
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+  /** The host's `data-state`. Left out, `loaded`. */
+  state?: 'loading' | 'loaded' | 'error';
+  /** The projected `etPicturePlaceholder` HTML, drawn while `state` is `loading`. */
+  placeholder?: string;
+  /** The projected `etPictureError` HTML, drawn while `state` is `error`. */
+  error?: string;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+/** The stylesheet `picture()` draws with: the real picture CSS. */
+export const pictureStyles = /* @__PURE__ */ [pictureBase].join('\n');
+
+const attr = (name: string, value: string | number | undefined) => (value === undefined ? '' : ` ${name}="${value}"`);
+
+/**
+ * Draws `<et-picture>` as HTML: the figure, the picture with its sources and `<img>`, the placeholder or error slot
+ * for the state, and the caption.
+ */
+export const picture = (options: PictureMockOptions) => {
+  const state = options.state ?? 'loaded';
+  const aspectRatio = options.width === undefined ? options.aspectRatio : undefined;
+  const hostStyle = [
+    options.fit ? `--_et-picture-fit: ${options.fit}` : '',
+    aspectRatio ? `--_et-picture-aspect-ratio: ${aspectRatio}` : '',
+  ].filter(Boolean);
+  const host = [
+    options.attributes,
+    'class="et-picture"',
+    `data-state="${state}"`,
+    options.fit ? `data-fit="${options.fit}"` : '',
+    aspectRatio ? `data-aspect-ratio="${aspectRatio}"` : '',
+    hostStyle.length ? `style="${hostStyle.join('; ')}"` : '',
+  ].filter(Boolean);
+
+  const sources = (options.sources ?? [])
+    .map((source) => `<source${attr('type', source.type)} srcset="${source.srcset}"${attr('media', source.media)}>`)
+    .join('');
+  const img =
+    options.src === undefined
+      ? ''
+      : `<img src="${options.src}" alt="${options.alt}"${attr('width', options.width)}${attr('height', options.height)}` +
+        `${aspectRatio ? ` style="aspect-ratio: ${aspectRatio}"` : ''} class="et-picture-img">`;
+  const slot =
+    state === 'loading' && options.placeholder
+      ? `<span class="et-picture-slot" aria-hidden="true">${options.placeholder}</span>`
+      : state === 'error' && options.error
+        ? `<span class="et-picture-slot">${options.error}</span>`
+        : '';
+  const caption = options.figcaption
+    ? `<figcaption class="et-picture-figcaption">${options.figcaption}</figcaption>`
+    : '';
+
+  return (
+    `<et-picture ${host.join(' ')}><figure class="et-picture-figure">` +
+    `<picture class="et-picture-picture">${sources}${img}${slot}</picture>${caption}` +
+    `</figure></et-picture>`
+  );
+};

package/design/progress-steps.ts

@@ -0,0 +1,79 @@
+import focusRing from '../src/lib/focus-ring/focus-ring-styles.component.css?inline';
+import { CHECK_ICON } from '../src/lib/icon/headless/check-icon';
+import { IconDefinition } from '../src/lib/icon/headless/icon-definition';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { TIMES_ICON } from '../src/lib/icon/headless/times-icon';
+import { TRIANGLE_EXCLAMATION_ICON } from '../src/lib/icon/headless/triangle-exclamation-icon';
+import progressStepBase from '../src/lib/progress-steps/progress-step.component.css?inline';
+import progressStepsBase from '../src/lib/progress-steps/progress-steps.component.css?inline';
+import { iconMarkup } from './icon';
+
+export type ProgressStepMockState = 'complete' | 'current' | 'upcoming' | 'success' | 'warning' | 'error';
+
+export type ProgressStepMockStep = {
+  /** The step label, as HTML. */
+  label: string;
+  state?: ProgressStepMockState;
+  /** The muted second line, as HTML. */
+  description?: string;
+  /** Draws the step on a link or a button, as `<a et-progress-step>` or `<button et-progress-step>`. */
+  as?: 'a' | 'button';
+  /**
+   * The color theme name the step forces, as the app's semantic theme for `success`, `warning` and `error`
+   * resolves. Left out, the step takes the color theme around it.
+   */
+  color?: string;
+  /** Extra attributes on the step, e.g. design markers. */
+  attributes?: string;
+};
+
+export type ProgressStepsMockOptions = {
+  steps: ProgressStepMockStep[];
+  orientation?: 'horizontal' | 'vertical';
+  /** Extra attributes on the steps, e.g. design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `progressSteps()` draws with: the real progress steps, focus ring and icon CSS. */
+export const progressStepsStyles = /* @__PURE__ */ [focusRing, iconBase, progressStepsBase, progressStepBase].join(
+  '\n',
+);
+
+const STATE_ICONS: Partial<Record<ProgressStepMockState, IconDefinition>> = {
+  complete: CHECK_ICON,
+  success: CHECK_ICON,
+  warning: TRIANGLE_EXCLAMATION_ICON,
+  error: TIMES_ICON,
+};
+
+const step = (item: ProgressStepMockStep) => {
+  const state = item.state ?? 'upcoming';
+  const tag = item.as ?? 'et-progress-step';
+  const icon = STATE_ICONS[state];
+  const marker = icon ? iconMarkup(icon) : '<span class="et-progress-step-marker-number"></span>';
+  const description = item.description ? `<span etProgressStepDescription>${item.description}</span>` : '';
+  const attributes = [
+    item.attributes,
+    item.as !== undefined && 'et-progress-step=""',
+    item.as === 'a' && 'href="#"',
+    item.as === 'button' && 'type="button"',
+    `class="et-color--${item.color ?? 'inherited'} et-focus-ring et-progress-step"`,
+    `data-state="${state}"`,
+    state === 'current' && 'aria-current="step"',
+    item.as === undefined && 'role="listitem"',
+  ].filter(Boolean);
+
+  return `<${tag} ${attributes.join(' ')}><span class="et-progress-step-marker">${marker}</span><span class="et-progress-step-text"><span class="et-progress-step-label">${item.label}</span>${description}</span></${tag}>`;
+};
+
+/** Draws an `et-progress-steps` row or column with its `et-progress-step`s as the components render them, as HTML. */
+export const progressSteps = (options: ProgressStepsMockOptions) => {
+  const attributes = [
+    options.attributes,
+    'class="et-progress-steps"',
+    'role="list"',
+    `data-orientation="${options.orientation ?? 'horizontal'}"`,
+  ].filter(Boolean);
+
+  return `<et-progress-steps ${attributes.join(' ')}>${options.steps.map(step).join('')}</et-progress-steps>`;
+};

package/design/query-error.ts

@@ -0,0 +1,60 @@
+import { TRIANGLE_EXCLAMATION_ICON } from '../src/lib/icon/headless/triangle-exclamation-icon';
+import queryErrorBase from '../src/lib/query-error/query-error.component.css?inline';
+import { bannerStyles } from './banner';
+import { button } from './button';
+import { iconMarkup } from './icon';
+
+export type QueryErrorMockOptions = {
+  /** The HTTP status, drawn as the host's `data-status`. */
+  status: number;
+  title: string;
+  /** One message draws a paragraph; more than one, or `list`, a violation list. */
+  messages: string[];
+  list?: boolean;
+  /** Draws the default retry button with this label. Left out, no retry button. */
+  retry?: string;
+  /** Extra attributes on the retry button, e.g. design markers. */
+  retryAttributes?: string;
+  /** The projected `etQueryErrorActions` HTML. Replaces the retry button. */
+  actions?: string;
+  /** The color theme name the banner forces: the `color` input, else the app's `type: 'error'` theme. */
+  color: string;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `queryError()` draws with: the real banner, button, icon and query-error CSS. */
+export const queryErrorStyles = /* @__PURE__ */ [bannerStyles, queryErrorBase].join('\n');
+
+/**
+ * Draws `<et-query-error>` as HTML: the error banner with its icon, the title, the message or violation list, and
+ * the retry button or the projected actions.
+ */
+export const queryError = (options: QueryErrorMockOptions) => {
+  const isList = options.list ?? options.messages.length > 1;
+  const body = isList
+    ? `<ul class="et-query-error-list" etBannerBody>${options.messages
+        .map((message) => `<li class="et-query-error-list-item">${message}</li>`)
+        .join('')}</ul>`
+    : `<p class="et-query-error-message" etBannerBody>${options.messages[0] ?? ''}</p>`;
+  const retry =
+    options.retry === undefined
+      ? ''
+      : button({ label: options.retry }).replace('<button ', `<button ${options.retryAttributes ?? ''} `);
+  const actionsContent = options.actions ?? retry;
+  const actions = actionsContent ? `<div class="et-query-error-actions" etBannerAction>${actionsContent}</div>` : '';
+  const host = [
+    options.attributes,
+    'class="et-query-error-host et-query-error"',
+    'role="alert"',
+    `data-status="${options.status}"`,
+    isList ? 'data-list=""' : '',
+  ].filter(Boolean);
+
+  return (
+    `<et-query-error ${host.join(' ')}>` +
+    `<et-banner class="et-color--${options.color} et-banner" data-type="error">${iconMarkup(TRIANGLE_EXCLAMATION_ICON)}` +
+    `<div class="et-banner-content"><h3 class="et-query-error-title" etBannerHeading>${options.title}</h3>${body}${actions}</div>` +
+    `</et-banner></et-query-error>`
+  );
+};