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

package/CHANGELOG.md

@@ -1,5 +1,118 @@
 # Changelog
 
+## 1.0.0-next.79
+
+### Minor Changes
+
+- The package ships the `sdk` design base under `design/sdk`, with a `design/config.json` that declares the `sdk` product. A consumer extends it with `"base": "node_modules/@ethlete/components/design/sdk"`.
+- The shared focus ring is drawn in the theme's ink tone in the light scheme and stays primary in the dark scheme.
+- Add an `ariaLabel` input to `et-tab` that names the trigger button, for icon-only tabs.
+- Text fields get a 3:1 rest frame, a 2px focus frame in the text colour, a dashed readonly frame with a dashed focus frame, a 4.5:1 placeholder, a 4px text-prefix gap, and the textarea grip in the frame corner.
+
+### Patch Changes
+
+- Size an `etIcon` inside an avatar per avatar size. It filled the whole avatar and was clipped.
+- Fix banner headings and bodies without break points overflowing the banner.
+- Show the full focus ring on breadcrumb links and the overflow trigger. The breadcrumb's clip cut it off.
+- Keep the first and last category label of a chart axis inside the plot when labels are thinned.
+- Checkbox, checkbox option and select-all boxes now keep their set size in apps without a global `box-sizing: border-box` reset, so hints and errors line up with the label.
+- The focus rings of grid items, accordion, breadcrumb, chip, tabs, table, calendar and scheduler are drawn in the theme's ink tone in the light scheme, matching the shared focus ring.
+- Add `accordion()` and `accordionGroup()` design mocks under `@ethlete/components/design/accordion` that draw the accordion with its real markup and CSS.
+- Add `avatar()`, `avatarGroup()` and `avatarRow()` design mocks under `@ethlete/components/design/avatar` that draw the avatar and avatar group with their real markup and CSS.
+- Add `badge()` and `badgeRow()` design mocks under `@ethlete/components/design/badge` that draw the badge with its real markup and CSS.
+- Add a `banner()` design mock under `@ethlete/components/design/banner` that draws the banner with its real markup and CSS.
+- Add `bracket()` and `bracketParticipants()` design mocks under `@ethlete/components/design/bracket` that draw `et-bracket` with its real markup, CSS and `@ethlete/bracket` geometry.
+- Add `breadcrumb()` and `breadcrumbOverflowPanel()` design mocks under `@ethlete/components/design/breadcrumb` that draw the breadcrumb with its real markup and CSS.
+- Move the `et-breadcrumb-outlet` styles into a stylesheet.
+- A filled button now hovers to its theme's active color and darkens further while pressed, so hover is visible on light accent colors.
+- The `button()` design mock emits `data-can-animate` like `et-button`, so a drawn button transitions and `et design complete` no longer reports CONTROL-TRANSITION-MISSING on it.
+- Match merged design for tooltip, OTP input and tabs: dark tooltip ring, ink OTP caret and hover edges, ink tab focus ring and solid baseline.
+- Add a `calendar()` design mock under `@ethlete/components/design/calendar` that draws the inline calendar with its real markup and CSS.
+- Add `card()` and `cardContent()` design mocks under `@ethlete/components/design/card` that draw the card with its real markup and CSS.
+- Add a `carousel()` design mock under `@ethlete/components/design/carousel` that draws the carousel with its real markup and CSS, including its track, previous and next buttons, dots and autoplay countdown. The `scrollable()` mock takes an `itemSize`, an `itemGap` and extra host classes.
+- Add `barChart()`, `lineChart()` and `pieChart()` design mocks under `@ethlete/components/design/chart` that draw the charts with their real markup and CSS.
+- Add a checkbox design mock at `@ethlete/components/design/checkbox` with `checkbox()`, `checkboxGroup()`, `checkboxStyles` and `checkboxGroupStyles`.
+- Add `chip()` and `chipRow()` design mocks under `@ethlete/components/design/chip` that draw the chip with its real markup and CSS.
+- Add a `copyButton()` design mock under `@ethlete/components/design/copy-button` that draws the copy button with its real markup and CSS.
+- Add a `descriptionList()` design mock under `@ethlete/components/design/description-list` that draws the description list with its real markup and CSS.
+- Move the `et-description` styles into a stylesheet.
+- `control(markup, name)` from `@ethlete/components/design/control` renames a control that is already marked, so a design reuses a control part under its own control name.
+- The design mocks now draw the icons the package ships, and `@ethlete/components/design/icon-set` lists every built-in icon.
+- Add `dialog()`, `alertDialog()` and `overlayBackdrop()` design mocks under `@ethlete/components/design/dialog` that draw the dialog pane with its real markup and CSS.
+- Add a `divider()` design mock under `@ethlete/components/design/divider` that draws the divider with its real markup and CSS.
+- Add an `emptyState()` design mock under `@ethlete/components/design/empty-state` that draws the empty state with its real markup and CSS.
+- An invalid text field's frame uses the full error tone instead of a faded one, and an invalid checkbox keeps its error border on hover.
+- An invalid text field's frame and an invalid checkbox's box use the error theme's hover tone on hover in light and its active ink tone in dark.
+- An invalid dropzone and switch keep their error colour on hover instead of turning neutral.
+- Add a `floatingAction()` design mock under `@ethlete/components/design/floating-action` that draws the floating action with its real markup and CSS, in its inline, floating and hidden states.
+- Give the floating action trigger a light shadow that fades in with opacity only while it floats, and in light a 1px inset ink edge (`--et-button-shadow`) so it stands out from a light grey row.
+- Form field: a text field in error switches its border and label to the error colour theme and keeps distinct rest, hover and focus states.
+- Add a `grid()` design mock under `@ethlete/components/design/grid` that draws `et-grid`, its items, the item toolbar and the default actions with their real markup and CSS.
+- Add an `iconButton()` design mock under `@ethlete/components/design/button` that draws `et-icon-button` with its real markup, `aria-label` and CSS.
+- Loader, match, menu, progress-steps, standings and stat-tile accents use the theme's ink tone in the light scheme.
+- Badge, banner, carousel, scrollable, timeline and stream accents use the theme's ink tone in the light scheme.
+- Refine selection accents and light-scheme ink edges across components.
+- Descriptions align with the label, search inputs lose the native clear button, and a textarea cannot shrink below one line. A one-row textarea lines up with the input, also with an inline label.
+- Add a `kbd()` design mock under `@ethlete/components/design/kbd` that draws the keycaps with their real markup and CSS.
+- Add `spinner()`, `progressBar()` and `brandLoader()` design mocks under `@ethlete/components/design/loader` that draw the loaders with their real markup and CSS, with each animation held at one frame.
+- Add a `masonry()` design mock under `@ethlete/components/design/masonry` that draws an `etMasonry` list with its items packed by the masonry maths, using the real masonry CSS.
+- Add a `matchCard()` design mock under `@ethlete/components/design/match` that draws `et-match-card` with its real markup and CSS.
+- Add a `menu()` design mock under `@ethlete/components/design/menu` that draws the open `et-menu` panel with its real markup and CSS.
+- Add `notification()` and `notificationStack()` design mocks under `@ethlete/components/design/notification` that draw the notification with its real markup and CSS.
+- Add an otp input design mock at `@ethlete/components/design/otp-input` with `otpInput()` and `otpInputStyles`.
+- Add a `pagination()` design mock under `@ethlete/components/design/pagination` that draws `et-pagination` with its real markup and CSS.
+- Add a `picture()` design mock under `@ethlete/components/design/picture` that draws the picture with its real markup and CSS.
+- Add a `progressSteps()` design mock under `@ethlete/components/design/progress-steps` that draws the progress steps with their real markup and CSS.
+- Add a `queryError()` design mock under `@ethlete/components/design/query-error` that draws the query error with its real markup and CSS.
+- Add a radio group design mock at `@ethlete/components/design/radio-group` with `radioGroup()` and `radioGroupStyles`.
+- Add `scheduler()`, `schedulerTimeGrid()`, `schedulerMonth()` and `schedulerAgenda()` design mocks under `@ethlete/components/design/scheduler` that draw `et-scheduler` and its week, day, month and agenda views with their real markup and CSS.
+- Add a `scrollable()` design mock under `@ethlete/components/design/scrollable` that draws the scrollable with its real markup and CSS, including its edge masks, scroll buttons and navigation dots.
+- Add a `scrollbar()` design mock under `@ethlete/components/design/scrollbar` that draws the scrollbar with its real markup and CSS.
+- The shipped sdk design tokens (`design/sdk/foundations/colors/colors.css`) apply `.et-surface--default-dark` only with the dark surface values, not also with the dark-elevated ones.
+- A select option draws its check mark in `--et-theme-color-ink-solid`, and a keyboard-active option gets a 2px ink outline instead of a background tint, so both keep a 3:1 contrast on a light surface.
+- Add a `skeleton()` design mock under `@ethlete/components/design/skeleton` that draws the skeleton, its items and text lines with their real markup and CSS, with the shimmer held at one frame.
+- Add a slider design mock at `@ethlete/components/design/slider` with `slider()` and `sliderStyles`.
+- Add `standings()` and `standingsPick()` design mocks under `@ethlete/components/design/standings` that draw `et-standings` and `et-standings-pick` with their real markup and CSS.
+- Add a `statTile()` design mock under `@ethlete/components/design/stat-tile` that draws the stat tile and its sparkline with their real markup and CSS.
+- Fix `et-stat-tile` throwing on a coloured delta when the app registers no `success` or `error` theme; the delta now keeps the inherited theme and warns once in dev mode.
+- Add a `streamPlayerSlot()` design mock under `@ethlete/components/design/stream` that draws the stream player slot with its consent, loading, error and PiP placeholder overlays, with their real markup and CSS.
+- Move the `et-stream-consent`, `et-stream-player-error`, `et-stream-player-loading` and `et-pip-slot-placeholder` styles into stylesheets.
+- Add a `switchControl()` design mock under `@ethlete/components/design/switch` that draws `et-switch` with its real markup and CSS.
+- `et-tab-group` takes its styles from `tab-group.component.css` instead of an inline `styles` block, and a new design mock `@ethlete/components/design/tabs` draws the tab group for design tools. The look does not change.
+- Add a `table()` design mock under `@ethlete/components/design/table` that draws the table with its real markup and CSS.
+- Add a text input design mock at `@ethlete/components/design/input` with `textInput()` and `textInputStyles`.
+- Add a textarea design mock at `@ethlete/components/design/textarea` with `textareaField()` and `textareaFieldStyles`.
+- Add a `timeline()` design mock under `@ethlete/components/design/timeline` that draws the timeline with its real markup and CSS.
+- Add a `toolbar()` design mock under `@ethlete/components/design/toolbar` that draws the toolbar with its real markup and CSS.
+- Add a `tooltip()` design mock under `@ethlete/components/design/tooltip` that draws `et-tooltip` with its real markup and CSS.
+- Add a `tree()` design mock under `@ethlete/components/design/tree` that draws `et-tree` with its real markup and CSS.
+- Tree: the keyboard focus outline of a row and of the status row uses `--et-theme-color-ink-solid` instead of the primary colour, so it stays visible on a light surface.
+- Use the surface interaction color for resting selection card, checkbox, and radio frames.
+- Fix inline description-list values without break points overflowing the list.
+- The `control()` design helper writes `data-can-animate="true"`, as the real components do.
+- The accordion, breadcrumb overflow and switch design mocks emit `data-can-animate` as the components do, and `@ethlete/components/design/control` marks a control's root element for the design check.
+- A filled button in a dialog draws an inset ink edge in the light scheme.
+- Radio circles, OTP input segments, the color input swatch, and the color picker thumbs and preview now keep their set size in apps without a global `box-sizing: border-box` reset.
+- Form controls draw their focus rings in ink in the light scheme, like the shared focus ring. The dark scheme keeps primary.
+- Keep a grid item's content clear of its actions, so a long title ends before the remove button; tune the space with `--et-grid-item-actions-reserve`.
+- Move the `et-grid-item-toolbar` styles from an inline `styles` block into `grid-item-toolbar.component.css`, so the grid design mock can draw them.
+- The filled icon button draws its inset ink edge only in the light scheme.
+- Align filled icon buttons with the merged design, including their inset edge and interaction colors.
+- Draw the clipboard-check, floppy-disk, pencil, arrow-up, arrow-right, arrows-left-right, plus and underline icons as outlines. They rendered filled before.
+- Fix the match score clipping its digits at rest (it now clips only while a value rolls) and the winner's subtitle turning bold (the winner weight now sits on the name).
+- `et-otp-input` no longer shows the caret on a focused readonly field, and its segments now shrink when the host is narrower than the row.
+- The required marker on every form field uses the theme's ink tone, so it keeps 4.5:1, also in error on dark surfaces.
+- Show the scheduler appointment color dot, truncate long badge text with an ellipsis, and stop clipping the first hour label in the time grid.
+- Add `selectOption`, `selectAllOption`, `selectOptionGroup` and `selectPanel` design mocks, and draw option groups and the select-all row in `selectStyles`.
+- Fix slider value bubbles covering the label, and vertical and end-of-track labels overhanging the host. The range slider grows by 16px to the 44px touch box of `et-slider`.
+- Fix the standings draw letter contrast (lighter draw fill) and draw the zone bar as an inset shadow, so the row line runs the full row width; the bar stays on the start side in RTL.
+- The switch track transitions its edge, and the chip remove button transitions its hover and pressed background and colour.
+- The switch track draws a 1px edge, ink when on and only in the light scheme. The menu selection check and the indeterminate switch use ink.
+- The tab group drops two focus ring rules that the global focus ring always overrode.
+- Fix the table sort header focus ring cutting through the label.
+- `et-input`, `et-password-input` and `et-textarea` now clear the native field when the value is reset to the one the field last rendered, for example right after a paste and Enter.
+- Fix long timeline item content without break points overflowing the timeline.
+
 ## 1.0.0-next.78
 
 ### Patch Changes

package/design/accordion.ts

@@ -0,0 +1,73 @@
+import accordionGroupBase from '../src/lib/accordion/accordion-group.component.css?inline';
+import accordionBase from '../src/lib/accordion/accordion.component.css?inline';
+import iconStyles from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { CHEVRON_ICON } from '../src/lib/icon/headless/chevron-icon';
+import { iconMarkup } from './icon';
+
+export type AccordionMockItem = {
+  label: string;
+  /** Secondary text at the end of the header, as the `etAccordionHint` template renders it. */
+  hint?: string;
+  /** The panel content, as HTML. */
+  content: string;
+  open?: boolean;
+  disabled?: boolean;
+  /** Extra attributes on the trigger button, e.g. design markers. */
+  triggerAttributes?: string;
+};
+
+export type AccordionMockOptions = {
+  label: string;
+  hint?: string;
+  content: string;
+  open?: boolean;
+  disabled?: boolean;
+  /** Defaults to 3. */
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Used for the trigger and panel ids. */
+  id?: string;
+  triggerAttributes?: string;
+  /** Extra attributes on the accordion, e.g. design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `accordion()` and `accordionGroup()` draw with: the real accordion, group and icon CSS. */
+export const accordionStyles = /* @__PURE__ */ [iconStyles, accordionBase, accordionGroupBase].join('\n');
+
+/** Draws an `et-accordion` as the component renders it, as HTML. */
+export const accordion = (options: AccordionMockOptions) => {
+  const id = options.id ?? 'et-accordion-mock';
+  const hostAttributes = [
+    options.attributes,
+    'class="et-accordion"',
+    'data-can-animate="true"',
+    options.open && 'data-open=""',
+    options.disabled && 'data-disabled=""',
+  ].filter(Boolean);
+  const triggerAttributes = [
+    options.triggerAttributes,
+    'class="et-accordion-trigger"',
+    'etaccordiontrigger=""',
+    'type="button"',
+    `id="${id}-trigger"`,
+    `aria-controls="${id}-panel"`,
+    `aria-expanded="${options.open ? 'true' : 'false'}"`,
+    options.disabled && 'aria-disabled="true"',
+  ].filter(Boolean);
+  const panelAttributes = [
+    'class="et-accordion-panel"',
+    'role="region"',
+    `id="${id}-panel"`,
+    `aria-labelledby="${id}-trigger"`,
+    options.open ? 'data-open=""' : 'inert=""',
+  ];
+  const hint = options.hint ? ` <span class="et-accordion-hint">${options.hint}</span>` : '';
+
+  return `<et-accordion ${hostAttributes.join(' ')}><div class="et-accordion-heading" role="heading" aria-level="${options.headingLevel ?? 3}"><button ${triggerAttributes.join(' ')}><span class="et-accordion-label">${options.label}</span>${hint}${iconMarkup(CHEVRON_ICON, 'et-accordion-chevron')}</button></div><div ${panelAttributes.join(' ')}><div class="et-accordion-panel-clip"><div class="et-accordion-panel-body">${options.content}</div></div></div></et-accordion>`;
+};
+
+/** Draws an `et-accordion-group` around one `et-accordion` per item, as HTML. */
+export const accordionGroup = (items: AccordionMockItem[], attributes?: string) =>
+  `<et-accordion-group class="et-accordion-group"${attributes ? ` ${attributes}` : ''}>${items
+    .map((item, index) => accordion({ ...item, id: `et-accordion-mock-${index}` }))
+    .join('')}</et-accordion-group>`;

package/design/avatar.ts

@@ -0,0 +1,90 @@
+import avatarBase from '../src/lib/avatar/avatar.component.css?inline';
+import avatarGroupBase from '../src/lib/avatar/avatar-group.component.css?inline';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { IconDefinition } from '../src/lib/icon/headless/icon-definition';
+import { iconMarkup } from './icon';
+
+export type AvatarMockOptions = {
+  /** Image URL. Keep it a data URI in a drawing. */
+  src?: string;
+  name?: string;
+  initials?: string;
+  /** Projected content, shown when there is no image and no initials. */
+  icon?: IconDefinition;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  shape?: 'circle' | 'square';
+  /** A color theme name the app registers. Left out, the avatar takes the color theme around it. */
+  color?: string;
+  /** Extra attributes on the avatar, e.g. design markers. */
+  attributes?: string;
+};
+
+/** A generic placeholder portrait as an SVG data URI, for drawing the image form. */
+export const avatarPlaceholderImage = `data:image/svg+xml,${
+  /* @__PURE__ */ encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#8a94a6"/><circle cx="32" cy="25" r="11" fill="#e6e9ef"/><path d="M12 60c2-12 10-18 20-18s18 6 20 18z" fill="#e6e9ef"/></svg>',
+  )
+}`;
+
+/** The stylesheets `avatar()` and `avatarGroup()` draw with: the real avatar, avatar group and icon CSS. */
+export const avatarStyles = /* @__PURE__ */ [
+  iconBase,
+  avatarBase,
+  avatarGroupBase,
+  `@layer components {
+  .et-avatar-mock-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+  }
+}`,
+].join('\n');
+
+const initialsFromName = (name: string) => {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  const first = words[0]?.[0] ?? '';
+  const last = words.length > 1 ? (words[words.length - 1]?.[0] ?? '') : '';
+
+  return (first + last).toUpperCase();
+};
+
+const avatarAttributes = (options: Pick<AvatarMockOptions, 'size' | 'shape' | 'color' | 'attributes'>, extra = '') =>
+  [
+    options.attributes ?? '',
+    `data-size="${options.size ?? 'md'}"`,
+    `data-shape="${options.shape ?? 'circle'}"`,
+    `class="${extra}et-avatar et-color--${options.color ?? 'inherited'}"`,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+/** Draws an `et-avatar` as the component renders it, as HTML: image, else initials, else the icon. */
+export const avatar = (options: AvatarMockOptions) => {
+  const initials = options.initials ?? (options.name ? initialsFromName(options.name) : '');
+  const content = options.src
+    ? `<img src="${options.src}" alt="${options.name ?? ''}" class="et-avatar-image" />`
+    : initials
+      ? `<span${options.name ? ` role="img" aria-label="${options.name}"` : ''} class="et-avatar-initials">${initials}</span>`
+      : options.icon
+        ? iconMarkup(options.icon)
+        : '';
+
+  return `<et-avatar ${avatarAttributes(options)}>${content}</et-avatar>`;
+};
+
+/** Draws an `et-avatar-group`: the avatars past `maxVisible` hidden and counted into a trailing `+N` avatar. */
+export const avatarGroup = (avatars: AvatarMockOptions[], maxVisible?: number) => {
+  const visible = maxVisible === undefined ? avatars : avatars.slice(0, Math.max(maxVisible, 0));
+  const overflow = avatars.length - visible.length;
+  const first = avatars[0] ?? {};
+  const more =
+    overflow > 0
+      ? `<et-avatar ${avatarAttributes({ size: first.size, shape: first.shape }, 'et-avatar-group-overflow ')} role="img" aria-label="${overflow} more">+${overflow}</et-avatar>`
+      : '';
+
+  return `<et-avatar-group class="et-avatar-group">${visible.map((each) => avatar(each)).join('')}${more}</et-avatar-group>`;
+};
+
+/** Draws avatars or groups in a wrapping row. */
+export const avatarRow = (items: string[]) => `<div class="et-avatar-mock-row">${items.join('')}</div>`;

package/design/badge.ts

@@ -0,0 +1,48 @@
+import badgeBase from '../src/lib/badge/badge.component.css?inline';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { IconDefinition } from '../src/lib/icon/headless/icon-definition';
+import { iconMarkup } from './icon';
+
+export type BadgeMockOptions = {
+  label: string;
+  variant?: 'filled' | 'tonal' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+  icon?: IconDefinition;
+  iconAlignment?: 'start' | 'end';
+  /** A color theme name the app registers. Left out, the badge takes the color theme around it. */
+  color?: string;
+  /** Extra attributes on the badge, e.g. design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `badge()` draws with: the real badge and icon CSS. */
+export const badgeStyles = /* @__PURE__ */ [
+  iconBase,
+  badgeBase,
+  `@layer components {
+  .et-badge-mock-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+}`,
+].join('\n');
+
+/** Draws an `et-badge` as the component renders it, as HTML. */
+export const badge = (options: BadgeMockOptions) => {
+  const alignment = options.iconAlignment ?? 'start';
+  const icon = `<div class="et-badge-icon">${options.icon ? iconMarkup(options.icon) : ''}</div>`;
+  const attributes = [
+    options.attributes ?? '',
+    `data-variant="${options.variant ?? 'tonal'}"`,
+    `data-size="${options.size ?? 'md'}"`,
+    `data-icon-alignment="${alignment}"`,
+    `class="et-badge et-color--${options.color ?? 'inherited'}"`,
+  ].filter(Boolean);
+
+  return `<et-badge ${attributes.join(' ')}>${alignment === 'start' ? icon : ''}<span class="et-badge-label">${options.label}</span>${alignment === 'end' ? icon : ''}</et-badge>`;
+};
+
+/** Draws badges in a wrapping row. */
+export const badgeRow = (badges: string[]) => `<div class="et-badge-mock-row">${badges.join('')}</div>`;

package/design/banner.ts

@@ -0,0 +1,77 @@
+import bannerBase from '../src/lib/banner/banner.component.css?inline';
+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 { buttonStyles } from './button';
+import { iconMarkup } from './icon';
+
+export type BannerMockType = 'info' | 'success' | 'warning' | 'error';
+
+export type BannerMockOptions = {
+  type?: BannerMockType;
+  heading?: string;
+  description?: string;
+  /** The projected `[etIcon]`. Left out, the type's usual icon; `false` draws none. */
+  icon?: 'info' | 'check' | 'triangle' | false;
+  /** The label of a projected `et-text-button etBannerAction`. Left out, no action. */
+  action?: string;
+  /** Extra attributes on the action button, e.g. design markers. */
+  actionAttributes?: string;
+  dismissible?: boolean;
+  /** Extra attributes on the dismiss button, e.g. design markers. */
+  dismissAttributes?: string;
+  /**
+   * The color theme name the banner forces: the `color` input, else the app's semantic theme for `success`,
+   * `warning` and `error`. Left out, the banner takes the color theme around it, as `info` does.
+   */
+  color?: string;
+  /** Extra attributes on the banner, e.g. design markers. */
+  attributes?: string;
+};
+
+const ICONS = {
+  info: CIRCLE_INFO_ICON,
+  check: CIRCLE_CHECK_ICON,
+  triangle: TRIANGLE_EXCLAMATION_ICON,
+} as const;
+
+const TYPE_ICONS: Record<BannerMockType, keyof typeof ICONS> = {
+  info: 'info',
+  success: 'check',
+  warning: 'triangle',
+  error: 'triangle',
+};
+
+/** The stylesheets `banner()` draws with: the real banner, icon button, text button and icon CSS. */
+export const bannerStyles = /* @__PURE__ */ [buttonStyles, iconBase, iconButtonBase, textButtonBase, bannerBase].join(
+  '\n',
+);
+
+const dismissButton = (attributes?: string) =>
+  `<button ${attributes ?? ''} aria-label="Dismiss" type="button" class="et-banner-dismiss-btn et-surface-interactive et-color-interactive et-icon-button et-focus-ring et-color--inherited" data-variant="transparent" data-size="xs"><div class="et-icon-button-icon">${iconMarkup(TIMES_ICON)}</div></button>`;
+
+const actionButton = (label: string, attributes?: string) =>
+  `<button ${attributes ?? ''} etBannerAction type="button" class="et-text-button et-color-interactive et-focus-ring et-color--inherited" data-icon-alignment="start" data-size="md"><div class="et-text-button-contents">${label}</div></button>`;
+
+/** Draws an `et-banner` with its projected icon and action as the component renders it, as HTML. */
+export const banner = (options: BannerMockOptions) => {
+  const type = options.type ?? 'info';
+  const icon = options.icon === false ? '' : iconMarkup(ICONS[options.icon ?? TYPE_ICONS[type]]);
+  const heading = options.heading ? `<p class="et-banner-heading">${options.heading}</p>` : '';
+  const description = options.description ? `<p class="et-banner-description">${options.description}</p>` : '';
+  const action = options.action ? actionButton(options.action, options.actionAttributes) : '';
+  const dismiss = options.dismissible ? dismissButton(options.dismissAttributes) : '';
+  const role = type === 'warning' || type === 'error' ? 'alert' : 'status';
+  const attributes = [
+    options.attributes,
+    `class="et-color--${options.color ?? 'inherited'} et-banner"`,
+    `role="${role}"`,
+    `data-type="${type}"`,
+  ].filter(Boolean);
+
+  return `<et-banner ${attributes.join(' ')}>${icon}<div class="et-banner-content">${heading}${description}${action}</div>${dismiss}</et-banner>`;
+};