@ethlete/components 1.0.0-next.69 → 1.0.0-next.70

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## 1.0.0-next.70
+
+### Minor Changes
+
+- New `@ethlete/components/design/button`: a framework-free `button()` mock that draws the real `et-button` DOM and CSS for design calls in Ethlete Studio.
+- New `@ethlete/components/design/form-field` and `/design/select`: framework-free `formField()`, `input()` and `select()` mocks that draw the real DOM and CSS, with an open select panel drawn below the field.
+- `provideDateLocale` also accepts a function `(locale) => dateFnsLocale`, which follows `injectLocale().currentLocale` so date controls, calendars, pickers and range validators reformat on a live language switch. `injectDateLocaleSignal()` exposes the resolved locale as a signal; a control's `locale` input still wins.
+- Every label set that shipped English only (calendar, chip, avatar, stat-tile, alert-dialog, table, pagination, forms, date-time, rich-text-editor and the rest) now also ships German defaults that follow `injectLocale().currentLocale`.
+- `OverlayRef.layout` is a signal with the layout the active strategy shows the overlay as (`'bottom-sheet'`, `'dialog'`, …). It follows breakpoint switches, so a consumer no longer keys on the `.et-overlay--bottom-sheet` class.
+
+### Patch Changes
+
+- An anchored overlay strategy's `width`, such as `anchoredDialogOverlayStrategy({ width: '42rem' })`, now sizes the pane instead of being cleared by anchored positioning.
+- `et-badge` no longer stretches to the full width of a flex or grid parent and sizes to its content.
+- A bottom sheet whose content reaches its max height keeps the drag handle's row, so the content scrolls instead of sliding under the handle.
+- `--et-button-gap` now spaces every child of the button content, so a plain `<svg>` next to text gets the gap too.
+- A looping `et-carousel` dragged with the mouse past its first or last slide lands on the wrapped slide instead of sweeping back through every slide.
+- An overlay strategy that sets `arrow` without `enableAnchoredOverlayPositionExtras()` now throws `ET1212` in dev mode instead of silently rendering no arrow.
+- An open overlay, for example a select panel, now follows its opener to another surface type, as when an app switches between dark and light mode. Before, it kept the surface it had when it opened.
+- Overlays are about 0.9 kB gz smaller again: the dark or light switch in an open overlay no longer pulls in the generic element mutation helper.
+- `setupComponentsTestEnvironment()` now stubs `Element.prototype.scroll`, which `et-carousel` calls.
+- Setting `--et-description-list-term-font-size`, `--et-description-list-detail-font-size` and the row and stacked gap tokens on the `<dl>` now reaches its terms and details.
+- `et-form-field size="sm"` is now a 32px control instead of 42px, and a static label with the `hidden` attribute no longer reserves its line of height.
+- An overlay backdrop gets its visible class at once on a server render, so it no longer ships at opacity 0 in SSR markup.
+- `etOverlay` writes its `placement` to a `data-overlay-placement` attribute on its host, so a server render shows where an open panel belongs.
+- `etOverlayTrigger` sets `aria-controls` to the stable `panelId` of its `etOverlay`, which the mounted overlay element carries as its `id`.
+- Show the pointer cursor over the whole select trigger, not only over the value text.
+- The theming docs and skill warn that `hover:bg-et-surface-interaction-hover` is a full-strength tint and name `etSurfaceInteractive` for hover rows.
+
 ## 1.0.0-next.69
 
 ### Major Changes

package/design/button.ts

@@ -0,0 +1,57 @@
+import { interactiveStyles } from '@ethlete/core/design/interactive-styles';
+import focusRing from '../src/lib/focus-ring/focus-ring-styles.component.css?inline';
+import buttonProperties from '../src/lib/button/button-properties-styles.component.css?inline';
+import buttonBase from '../src/lib/button/button.component.css?inline';
+
+export type ButtonMockOptions = {
+  /** The label, as HTML. */
+  label: string;
+  /** The icon, as HTML. Leave it out for a button without one. */
+  icon?: string;
+  iconAlignment?: 'start' | 'end';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'filled' | 'outline' | 'tonal' | 'transparent';
+  /** A color theme name the app registers. Left out, the button takes the color theme around it. */
+  color?: string;
+  /** Makes the button a toggle: `false` draws it unpressed, left out it is no toggle. */
+  pressed?: boolean;
+  disabled?: boolean;
+  tag?: 'button' | 'a';
+  class?: string;
+  style?: string;
+};
+
+const PRESSED_VARIANT = { filled: 'outline', outline: 'filled', tonal: 'filled', transparent: 'tonal' } as const;
+
+/** The stylesheets `button()` draws with: the real `et-button` CSS. */
+export const buttonStyles = `${interactiveStyles}\n${focusRing}\n${buttonProperties}\n${buttonBase}`;
+
+/** Draws `<button et-button>` as HTML, with the DOM and classes the component renders. */
+export const button = (options: ButtonMockOptions) => {
+  const { label, icon, iconAlignment = 'start', size = 'md', variant = 'filled', tag = 'button' } = options;
+  const iconBox = `<div class="et-button-icon">${icon ?? ''}</div>`;
+
+  const classes = [
+    'et-surface-interactive',
+    'et-color-interactive',
+    'et-button',
+    'et-focus-ring',
+    options.color ? `et-color--${options.color}` : 'et-color--inherited',
+    options.class,
+  ].filter(Boolean);
+
+  const attributes = [
+    `class="${classes.join(' ')}"`,
+    tag === 'button' && 'type="button"',
+    options.pressed && 'data-pressed="true"',
+    options.pressed !== undefined && `aria-pressed="${options.pressed}"`,
+    options.disabled && (tag === 'button' ? 'disabled aria-disabled="true"' : 'aria-disabled="true"'),
+    `data-icon-alignment="${iconAlignment}"`,
+    `data-variant="${variant}"`,
+    `data-size="${size}"`,
+    options.pressed && `data-pressed-variant="${PRESSED_VARIANT[variant]}"`,
+    options.style && `style="${options.style}"`,
+  ].filter(Boolean);
+
+  return `<${tag} ${attributes.join(' ')}>${iconAlignment === 'start' ? iconBox : ''}<div class="et-button-contents">${label}</div>${iconAlignment === 'end' ? iconBox : ''}</${tag}>`;
+};

package/design/form-field.ts

@@ -0,0 +1,210 @@
+import { interactiveStyles } from '@ethlete/core/design/interactive-styles';
+import formFieldBase from '../src/lib/forms/form-field/form-field.component.css?inline';
+import textShell from '../src/lib/forms/form-field/form-field-text-shell-styles.component.css?inline';
+import suffixOverlap from '../src/lib/forms/form-field/form-field-suffix-overlap-styles.component.css?inline';
+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 iconStyles from '../src/lib/icon/headless/icon-styles.component.css?inline';
+
+/** The field state a control draws itself from. */
+export type FormFieldMockState = {
+  id: string;
+  disabled: boolean;
+  readonly: boolean;
+  required: boolean;
+  invalid: boolean;
+  focused: boolean;
+  open: boolean;
+  labelId: string | null;
+  describedBy: string | null;
+};
+
+/** A control drawn inside `formField()`, for example `input()` or `select()`. */
+export type FormFieldControlMock = {
+  controlType: string;
+  hasValue: boolean;
+  /** Can be opened, like a select: `open` then draws the field expanded. */
+  expandable?: boolean;
+  html: (state: FormFieldMockState) => string;
+  /** The control's own affordances, drawn first in the suffix area. */
+  suffix?: (state: FormFieldMockState) => string;
+  /** Drawn below the field, where the overlay would open. */
+  panel?: (state: FormFieldMockState) => string;
+};
+
+export type FormFieldMockOptions = {
+  /** The control, from `input()` or `select()`, or plain HTML for a text input. */
+  control: FormFieldControlMock | string;
+  /** The label, as HTML. */
+  label?: string;
+  /** Unique per frame: the ids that link the label, the control and the messages derive from it. */
+  id?: string;
+  /** The hint, as HTML. */
+  hint?: string;
+  /** The error message, as HTML. Draws the field in its error state. */
+  error?: string;
+  /** The color theme name the app registers for errors. */
+  errorColor?: string;
+  /** Prefix content, as HTML, for example an icon. */
+  prefix?: string;
+  /** Suffix content, as HTML. */
+  suffix?: string;
+  appearance?: 'box' | 'underline';
+  fill?: 'transparent' | 'filled';
+  labelMode?: 'static' | 'inline' | 'floating-inside' | 'floating-outside';
+  size?: 'sm' | 'md' | 'lg';
+  /** A color theme name the app registers. */
+  color?: string;
+  /** A surface theme name the app registers. */
+  surface?: string;
+  required?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  focused?: boolean;
+  /** Opens an expandable control, like a select. */
+  open?: boolean;
+  class?: string;
+  style?: string;
+};
+
+export type InputMockOptions = {
+  value?: string;
+  placeholder?: string;
+  type?: string;
+  textAlign?: 'start' | 'center' | 'end';
+};
+
+/** The stylesheets `formField()` and `input()` draw with: the real `et-form-field` CSS. */
+export const formFieldStyles = /* @__PURE__ */ [
+  interactiveStyles,
+  iconStyles,
+  formFieldBase,
+  textShell,
+  suffixOverlap,
+  label,
+  hint,
+  inputBase,
+  `.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');
+
+const attributesOf = (entries: (string | false | null | undefined)[]) => entries.filter(Boolean).join(' ');
+
+/** Draws `<et-input>` as a control for `formField()`. */
+export const input = (options: InputMockOptions = {}): FormFieldControlMock => ({
+  controlType: 'text-input',
+  hasValue: !!options.value,
+  html: (state) => {
+    const attributes = attributesOf([
+      'class="et-input-native"',
+      `type="${options.type ?? 'text'}"`,
+      options.value && `value="${options.value}"`,
+      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-text-align="${options.textAlign ?? 'start'}"`,
+    ]);
+
+    return `<et-input class="et-color-interactive et-input"><input ${attributes}></et-input>`;
+  },
+});
+
+/** 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 =
+    typeof options.control === 'string'
+      ? { controlType: 'text-input', hasValue: false, html: () => options.control as string }
+      : options.control;
+
+  const {
+    id = 'field',
+    appearance = 'box',
+    fill = 'transparent',
+    labelMode = 'static',
+    size = 'md',
+    error,
+    hint,
+  } = options;
+  const open = !!control.expandable && !!options.open;
+  const focused = !!options.focused || open;
+  const labelId = options.label ? `et-label-${id}` : null;
+  const errorId = `et-form-field-error-${id}`;
+  const hintId = `et-form-field-hint-${id}`;
+
+  const state: FormFieldMockState = {
+    id,
+    disabled: !!options.disabled,
+    readonly: !!options.readonly,
+    required: !!options.required,
+    invalid: error !== undefined,
+    focused,
+    open,
+    labelId,
+    describedBy: error !== undefined ? errorId : hint !== undefined ? hintId : null,
+  };
+
+  const errorColor = error !== undefined && options.errorColor;
+  const floating = labelMode === 'floating-inside' || labelMode === 'floating-outside';
+
+  const classes = [
+    'et-color-interactive--has-focus',
+    'et-form-field',
+    errorColor ? `et-color--${errorColor}` : `et-color--${options.color ?? 'inherited'}`,
+    `et-surface--${options.surface ?? 'inherited'}`,
+    options.class,
+  ].filter(Boolean);
+
+  const attributes = attributesOf([
+    `class="${classes.join(' ')}"`,
+    `data-control-type="${control.controlType}"`,
+    error !== undefined && 'data-error="true"',
+    open && 'data-expanded=""',
+    focused && 'data-focused=""',
+    state.readonly && 'data-readonly=""',
+    state.disabled && 'data-disabled=""',
+    `data-appearance="${appearance}"`,
+    `data-fill="${fill}"`,
+    floating && (focused || control.hasValue) && 'data-label-floated=""',
+    options.label && 'data-has-label=""',
+    `data-label-mode="${labelMode}"`,
+    `data-size="${size}"`,
+    'data-text-shell="true"',
+    options.style && `style="${options.style}"`,
+  ]);
+
+  const labelAreaClasses = [
+    'et-form-field-label-area',
+    floating && 'et-form-field-label-area--floating',
+    labelMode === 'inline' && 'et-form-field-label-area--inline',
+  ].filter(Boolean);
+
+  const labelHtml = options.label
+    ? `<et-label id="${labelId}"${state.disabled ? ' data-disabled="true"' : ''}><span class="et-label-content">${options.label}</span>${state.required ? '<span class="et-label-required-marker" aria-hidden="true">*</span>' : ''}</et-label>`
+    : '';
+
+  const errorHtml =
+    error !== undefined
+      ? `<div class="et-form-field-support-content et-form-field-errors${errorColor ? ` et-color--${errorColor}` : ''}" id="${errorId}" aria-atomic="true" aria-live="polite" data-active="true" data-direction="from-below" data-state="active"><et-form-error class="et-form-error">${error}</et-form-error></div>`
+      : '';
+
+  const hintHtml =
+    hint !== undefined && error === undefined
+      ? `<div class="et-form-field-support-content et-form-field-hint" id="${hintId}" data-active="true" data-direction="from-above" data-state="active"><et-hint>${hint}</et-hint></div>`
+      : '';
+
+  const support =
+    error !== undefined || hint !== undefined
+      ? `<div class="et-color-interactive-exclude et-form-field-support"><div class="et-form-field-support-row"><div class="et-form-field-support-stack">${errorHtml}${hintHtml}</div><div class="et-form-field-support-counter${options.errorColor ? ` et-color--${options.errorColor}` : ''}" hidden></div></div></div>`
+      : '';
+
+  const field = `<et-form-field ${attributes}><div class="et-form-field-shell"><div class="et-form-field-control-frame"><div class="et-form-field-affix et-form-field-prefix">${options.prefix ?? ''}</div><div class="et-form-field-control-area"><div class="${labelAreaClasses.join(' ')}">${labelHtml}</div><div class="et-form-field-control-slot">${control.html(state)}</div></div><div class="et-form-field-affix et-form-field-suffix">${control.suffix?.(state) ?? ''}${options.suffix ?? ''}</div></div></div>${support}</et-form-field>`;
+
+  if (!open || !control.panel) return field;
+
+  return `<div class="et-design-panel-anchor">${field}<div class="et-design-panel">${control.panel(state)}</div></div>`;
+};

package/design/select.ts

@@ -0,0 +1,110 @@
+import controlSuffix from '../src/lib/forms/form-field/form-field-control-suffix-styles.component.css?inline';
+import selectBase from '../src/lib/forms/select/select.component.css?inline';
+import selectOption from '../src/lib/forms/select/select-option-styles.component.css?inline';
+import selectPanel from '../src/lib/forms/select/select-panel.component.css?inline';
+import { FormFieldControlMock, formFieldStyles, FormFieldMockState } from './form-field';
+
+export const CHECK_ICON_SVG = `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`;
+
+export const CHEVRON_ICON_SVG = `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M244.7 116.7c6.2-6.2 16.4-6.2 22.6 0l192 192c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L256 150.6 75.3 331.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l192-192z"/></svg>`;
+
+export const TIMES_ICON_SVG = `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z"/></svg>`;
+
+export type SelectMockOption = { value: string; label: string };
+
+export type SelectMockOptions = {
+  options: SelectMockOption[];
+  /** The selected option's `value`. Left out, the select shows its placeholder. */
+  value?: string;
+  placeholder?: string;
+  /** The `value` of the option the keyboard points at while the panel is open. */
+  active?: string;
+  /** Shows the clear button while the field has focus and a value. Defaults to `true`. */
+  clearable?: boolean;
+  clearLabel?: string;
+  /** The app's default color theme name: the panel provides it to the options. */
+  panelColor?: string;
+  /** A surface theme name the app registers, for the panel. */
+  panelSurface?: string;
+};
+
+/** The stylesheets `formField()` with a `select()` control draws with: the real `et-select` CSS. */
+export const selectStyles = /* @__PURE__ */ [
+  formFieldStyles,
+  controlSuffix,
+  selectBase,
+  selectOption,
+  selectPanel,
+].join('\n');
+
+const icon = (name: string, svg: string) =>
+  `<i eticon="${name}" aria-hidden="true" class="et-icon et-icon--${name}">${svg}</i>`;
+
+/**
+ * Draws `<et-select>` as a control for `formField()`. Pass `open: true` to `formField()` to draw
+ * the panel below the field, where the overlay would open.
+ */
+export const select = (options: SelectMockOptions): FormFieldControlMock => {
+  const selected = options.options.find((option) => option.value === options.value);
+
+  const optionHtml = (state: FormFieldMockState) => (option: SelectMockOption, index: number) => {
+    const isSelected = option === selected;
+    const isActive = state.open && option.value === options.active;
+    const attributes = [
+      'role="option"',
+      `value="${option.value}"`,
+      'class="et-select-option"',
+      `id="et-select-option-${state.id}-${index}"`,
+      `aria-selected="${isSelected}"`,
+      isSelected && 'data-selected="true"',
+      isActive && 'data-active="true" data-active-source="keyboard"',
+    ].filter(Boolean);
+
+    return `<et-select-option ${attributes.join(' ')}><span class="et-select-option-label">${option.label}</span><span class="et-select-option-check">${icon('et-check', CHECK_ICON_SVG)}</span></et-select-option>`;
+  };
+
+  const optionsHtml = (state: FormFieldMockState) => options.options.map(optionHtml(state)).join('');
+
+  return {
+    controlType: 'select',
+    hasValue: !!selected,
+    expandable: true,
+    html: (state) => {
+      const triggerId = `et-select-trigger-${state.id}`;
+      const activeIndex = options.options.findIndex((option) => option.value === options.active);
+      const triggerAttributes = [
+        'class="et-select-trigger"',
+        `id="${triggerId}"`,
+        'role="combobox"',
+        'aria-haspopup="listbox"',
+        `aria-expanded="${state.open}"`,
+        `aria-labelledby="${[state.labelId, triggerId].filter(Boolean).join(' ')}"`,
+        `tabindex="${state.disabled ? -1 : 0}"`,
+        state.disabled && 'aria-disabled="true" data-disabled="true"',
+        state.open && activeIndex >= 0 && `aria-activedescendant="et-select-option-${state.id}-${activeIndex}"`,
+        state.open && 'data-select-open="true"',
+        state.open && `aria-controls="et-select-listbox-${state.id}"`,
+      ].filter(Boolean);
+
+      const value = selected
+        ? `<span class="et-select-value">${selected.label}</span>`
+        : `<span data-placeholder="true" class="et-select-value">${options.placeholder ?? ''}</span>`;
+
+      const detached = state.open
+        ? ''
+        : `<div aria-hidden="true" hidden class="et-select-detached-options">${optionsHtml(state)}</div>`;
+
+      return `<et-select class="et-color-interactive et-select"${state.open ? ' data-select-open="true"' : ''}><div ${triggerAttributes.join(' ')}><div class="et-select-trigger-content">${value}</div></div>${detached}</et-select>`;
+    },
+    suffix: (state) => {
+      const clear =
+        (options.clearable ?? true) && selected && state.focused && !state.disabled && !state.readonly
+          ? `<button aria-label="${options.clearLabel ?? 'Clear'}" class="et-input-clear" tabindex="-1" type="button">${icon('et-times', TIMES_ICON_SVG)}</button>`
+          : '';
+
+      return `${clear}<button aria-hidden="true" tabindex="-1" type="button" class="et-input-picker-trigger et-select-arrow"${state.disabled ? ' disabled' : ''}>${icon('et-chevron', CHEVRON_ICON_SVG)}</button>`;
+    },
+    panel: (state) =>
+      `<et-select-panel class="et-select-panel et-color--inherited${options.panelColor ? ` et-color--${options.panelColor}` : ''} et-surface--${options.panelSurface ?? 'inherited'}"><div class="et-select-panel-scroller"><div class="et-select-panel-body"><div role="listbox" class="et-select-listbox" id="et-select-listbox-${state.id}"${state.labelId ? ` aria-labelledby="${state.labelId}"` : ''}>${optionsHtml(state)}</div><div class="et-select-panel-extras"></div></div></div></et-select-panel>`,
+  };
+};

package/fesm2022/ethlete-components-testing.mjs

@@ -258,6 +258,7 @@ const createTestOverlayRef = (config = {}) => {
         elements: null,
         config,
         headerTemplate: signal(null).asReadonly(),
+        layout: signal(null).asReadonly(),
         componentInstance: () => null,
         close: (result) => requestClose(result, 'api', false),
         busy,
@@ -505,7 +506,7 @@ const defineMissing = (target, key, value) => {
 };
 /**
  * Installs the browser APIs jsdom lacks and `@ethlete/components` needs to render: `ResizeObserver`,
- * `IntersectionObserver`, `matchMedia` and `Element.prototype.animate`. Call it once in a test setup file;
+ * `IntersectionObserver`, `matchMedia`, `Element.prototype.animate` and `Element.prototype.scroll`. Call it once in a test setup file;
  * an API that already exists is left alone. The fakes never report: observers never fire, no media query
  * matches, and an animation finishes on the next microtask.
  */
@@ -514,6 +515,7 @@ const setupComponentsTestEnvironment = () => {
     defineMissing(globalThis, 'IntersectionObserver', IntersectionObserverFake);
     defineMissing(globalThis, 'matchMedia', fakeMediaQueryList);
     defineMissing(Element.prototype, 'animate', () => new AnimationFake());
+    defineMissing(Element.prototype, 'scroll', () => undefined);
 };
 
 /**