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

package/design/sdk/components/otp-input/otp-input.ts

@@ -0,0 +1,64 @@
+import { otpInput, type OtpInputMockOptions, otpInputStyles } from '@ethlete/components/design/otp-input';
+import { definePart, drawing } from '@design-system';
+import frame from './otp-input.css?inline';
+
+type Props = { field: OtpInputMockOptions };
+
+const code = (extra: Partial<OtpInputMockOptions> = {}): Props => ({
+  field: { id: 'code', label: 'Verification code', ...extra },
+});
+
+const pin = (extra: Partial<OtpInputMockOptions> = {}): Props => ({
+  field: { id: 'pin', label: 'PIN', length: 4, masked: true, ...extra },
+});
+
+const INVALID = {
+  required: true,
+  error: 'Enter the code from the SMS.',
+  errorColor: 'danger',
+} satisfies Partial<OtpInputMockOptions>;
+
+export default definePart({
+  note: 'The SDK otp input (et-otp-input), first drawing, drawn by the mock from @ethlete/components/design/otp-input with the real markup and CSS: et-label with the required marker, the segment row, the invisible native input over it, et-form-support with hint and error; the brand theme, danger as the error theme. The field has no :focus or :hover CSS of its own: focus is the data-caret segment (a 1px border plus a 1px inset outline in primary, and a blinking 2px caret bar in an empty one), which the mock draws with focused. Fixtures are fictional: Verification code, 6 digits 482193, hint We sent it to +49 151 0000 0000., required with error Enter the code from the SMS.; a 4-digit masked PIN. Framed as a page with 16px padding at 320, 360 and 640. States: empty, partial, filled, hover, focus-empty, focus-partial, focus-filled, hint, required, invalid, invalid-partial, invalid-focus, disabled, disabled-filled, readonly, readonly-focus, pin-partial and pin-focus. Numbers (light / dark), from shot pixels at scale 2 at 360, brand mint, a: segment 44px outer (border-box, fixed in 00072d935), gap 8px, row 304px, digits 19.8px; empty and filled segment border (surface border) vs page 1.26 / 1.73, the only edge of a segment; caret segment edge and caret bar (primary) 1.33 / 13.50; required marker (brand primary) 1.33 / 13.50; invalid border (danger) 4.83 / 3.71; label (muted) 7.81 / 6.94; disabled digits 2.55 / 3.72 (opacity 0.4, exempt). Decided rules that arise: Q88 (focus in ink: the caret segment edge and the caret bar take ink, the invalid one the danger ink) and Q99a (a mint mark on light takes ink: the required marker light-dark(ink, primary)). Hover follows the text field (form-field-text-shell: the frame border to surface-interaction-hover, the error frame to ink, none when readonly or disabled), on the host since the host is the click target (otp.activate()). The filled segment edge in c is my proposal, not a decided rule (Q103). Findings for later, lib bugs apart: (L1) a 6-digit field needed 304px and never shrank; at 320 with 16px page padding it overflowed by 16px (drawn at 320). Now fixed: the segments shrink, 41.3px at 320, and the render at 640 is unchanged. (L2) a readonly field showed the focus caret segment and, when not full, the blinking caret bar, though nothing can be typed (readonly-focus). Now fixed: no caret when readonly. Design: (1) WCAG 1.4.11: the segment border 1.26 / 1.73 is the only edge of an empty segment, as with the checkbox box and the radio circle. Not drawn. (2) A filled segment looks like an empty one apart from its digit; c answers it. (3) The error border is the full danger primary, while the text field draws its error frame at 50 % danger; kept, it passes 3:1. (4) Hover (10.37 / 13.07) outshines the focus edge (5.48 / 13.50) in b and c, as it does on the text field. (5) The masked dot is a 19.8px bullet, about 5px wide. (6) The error marker 3.71 in dark, exempted as in checkbox r1. Later rounds, left out here: data-warning (no CSS of its own), a coloured field, alphanumeric codes, other lengths and segment sizes via the custom properties, RTL and the pop-in animation.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    empty: code(),
+    partial: code({ value: '482' }),
+    filled: code({ value: '482193' }),
+    hover: code({ value: '482', force: 'hover' }),
+    'focus-empty': code({ focused: true }),
+    'focus-partial': code({ value: '482', focused: true }),
+    'focus-filled': code({ value: '482193', focused: true }),
+    hint: code({ hint: 'We sent it to +49 151 0000 0000.' }),
+    required: code({ required: true, hint: 'We sent it to +49 151 0000 0000.' }),
+    invalid: code(INVALID),
+    'invalid-partial': code({ ...INVALID, value: '48' }),
+    'invalid-focus': code({ ...INVALID, value: '48', focused: true }),
+    disabled: code({ disabled: true }),
+    'disabled-filled': code({ value: '482193', disabled: true }),
+    readonly: code({ value: '482193', readonly: true }),
+    'readonly-focus': code({ value: '482', readonly: true, focused: true }),
+    'pin-partial': pin({ value: '73' }),
+    'pin-focus': pin({ value: '73', focused: true }),
+  },
+  contrast: {
+    exceptions: [
+      {
+        selector: 'et-otp-input:has(.et-otp-input-native:disabled) .et-otp-input-segment-char',
+        reason:
+          'A disabled field is exempt under WCAG 1.4.3 (inactive component): opacity 0.4 draws the digits 2.55:1 / 3.72:1.',
+      },
+      {
+        selector: 'et-otp-input[data-error] .et-label-required-marker',
+        reason:
+          'The required marker takes the error theme primary: 3.71:1 in dark, under 4.5:1. An open point (checkbox r1 finding 3), not a decided rule.',
+      },
+    ],
+  },
+  widths: [320, 360, 640],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="t-frame">${otpInput(props.field)}</div>`,
+      styles: [otpInputStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/pagination/pagination.css

@@ -0,0 +1,14 @@
+.pagination-frame {
+  display: flex;
+  padding: 0.8rem;
+}
+
+@layer components {
+  .et-pagination-host .et-pagination-button {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-pagination-host .et-pagination-button[aria-current='page'] {
+    --et-button-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+}

package/design/sdk/components/pagination/pagination.ts

@@ -0,0 +1,75 @@
+import {
+  pagination,
+  type PaginationMockItem,
+  type PaginationMockOptions,
+  paginationStyles,
+} from '@ethlete/components/design/pagination';
+import { definePart, drawing, interactionRows } from '@design-system';
+import edge from './pagination.css?inline';
+
+type ItemInteraction = 'hover' | 'active' | 'focus-visible';
+
+type Props = Omit<PaginationMockOptions, 'items'> & {
+  page: number;
+  pages: (number | null)[];
+  total: number;
+  target?: number;
+  forced?: ItemInteraction;
+};
+
+const MARK = 'data-et-control="item" data-can-animate';
+
+const items = ({ page, pages, total, target, forced }: Props): PaginationMockItem[] => {
+  const attributes = (entry: number) => (forced && entry === target ? `${MARK} data-et-force="${forced}"` : MARK);
+
+  return [
+    { type: 'first', page: 1, disabled: page === 1, attributes: MARK },
+    { type: 'previous', page: page - 1, disabled: page === 1, attributes: MARK },
+    ...pages.map((entry): PaginationMockItem =>
+      entry === null
+        ? { type: 'ellipsis' }
+        : { type: 'page', page: entry, current: entry === page, attributes: attributes(entry) },
+    ),
+    { type: 'next', page: page + 1, disabled: page === total, attributes: MARK },
+    { type: 'last', page: total, disabled: page === total, attributes: MARK },
+  ];
+};
+
+const MIDDLE: Props = { page: 10, total: 20, pages: [1, null, 9, 10, 11, null, 20] };
+
+const { states, grid } = interactionRows(
+  {
+    page: { ...MIDDLE, target: 11 },
+    current: { ...MIDDLE, target: 10 },
+  } satisfies Record<string, Props>,
+  {
+    interactions: ['hover', 'active', 'focus-visible'],
+    force: (props: Props, interaction: ItemInteraction): Props => ({ ...props, forced: interaction }),
+  },
+);
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    first: { page: 1, total: 20, pages: [1, 2, 3, 4, 5, null, 20] },
+    middle: MIDDLE,
+    last: { page: 20, total: 20, pages: [1, null, 16, 17, 18, 19, 20] },
+    few: { page: 2, total: 5, pages: [1, 2, 3, 4, 5] },
+    ...states,
+    range: { ...MIDDLE, range: 'Showing 91–100 of 200' },
+    sm: { ...MIDDLE, size: 'sm' },
+    links: { ...MIDDLE, renderAs: 'links' },
+    compact: { ...MIDDLE, compactStatus: '10 / 20' },
+  },
+  grid,
+  widths: [480],
+  controls: {
+    item: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="pagination-frame">${pagination({ ...props, items: items(props) })}</div>`,
+      styles: [paginationStyles, edge].join('\n'),
+    }),
+});

package/design/sdk/components/picture/picture.css

@@ -0,0 +1,37 @@
+.picture-frame {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  max-inline-size: 520px;
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+
+  .picture-error {
+    margin: 0;
+    color: var(--et-surface-color-muted-solid);
+    font-size: 1.2rem;
+  }
+
+  .picture-fit-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 180px);
+    gap: 1.6rem;
+  }
+
+  .picture-fit-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    margin: 0;
+    font-size: 1.2rem;
+    color: var(--et-surface-color-muted-solid);
+  }
+
+  .picture-fit-cell .et-picture {
+    inline-size: 180px;
+    block-size: 120px;
+    outline: 1px dashed var(--et-surface-border-solid);
+  }
+}

package/design/sdk/components/picture/picture.ts

@@ -0,0 +1,96 @@
+import { picture, pictureStyles, type PictureMockOptions } from '@ethlete/components/design/picture';
+import { skeletonItem, skeletonStyles } from '@ethlete/components/design/skeleton';
+import { definePart, drawing } from '@design-system';
+import fallback from '@assets/fallback.svg?raw';
+import tall from '@assets/tall.svg?raw';
+import wide from '@assets/wide.svg?raw';
+import frame from './picture.css?inline';
+
+const svgUrl = (markup: string) => `data:image/svg+xml;utf8,${encodeURIComponent(markup.trim())}`;
+
+type Fit = NonNullable<PictureMockOptions['fit']>;
+
+type Props = {
+  ratio?: string;
+  caption?: 'short' | 'long' | 'none';
+  intrinsic?: boolean;
+  loading?: boolean;
+  error?: 'slot' | 'bare';
+  fit?: boolean;
+};
+
+const WIDE = svgUrl(wide);
+const TALL = svgUrl(tall);
+const FALLBACK = svgUrl(fallback);
+const BROKEN = 'data:image/png;base64,this-is-not-an-image';
+
+const CAPTIONS = {
+  short: 'A crop that follows the viewport.',
+  long: 'Fulltime at the home ground: the visitors celebrate in front of the away end after the late winner, while the stewards hold the line and the floodlights come on over the north stand.',
+  none: undefined,
+};
+
+const FITS: Fit[] = ['contain', 'cover', 'fill', 'none', 'scale-down'];
+
+const body = ({ ratio = '16 / 9', caption = 'short', intrinsic, loading, error, fit }: Props) => {
+  if (fit) {
+    const cells = FITS.map(
+      (mode) =>
+        `<figure class="picture-fit-cell">${picture({ src: FALLBACK, alt: `fit ${mode}`, fit: mode })}<span>${mode}</span></figure>`,
+    ).join('');
+
+    return `<div class="picture-fit-grid">${cells}</div>`;
+  }
+
+  if (loading) {
+    return picture({
+      alt: 'An image whose URL arrives after the page',
+      aspectRatio: '16 / 9',
+      state: 'loading',
+      placeholder: skeletonItem({ shape: 'rect', style: 'block-size: 100%; inline-size: 100%' }),
+    });
+  }
+
+  if (error) {
+    return picture({
+      src: BROKEN,
+      alt: 'An image that fails to load',
+      aspectRatio: '16 / 9',
+      state: 'error',
+      error: error === 'slot' ? '<p class="picture-error">This image is unavailable.</p>' : undefined,
+    });
+  }
+
+  return picture({
+    sources: intrinsic ? undefined : [{ srcset: WIDE, media: '(min-width: 700px)' }, { srcset: TALL }],
+    src: FALLBACK,
+    alt: 'A coloured block labelled with its aspect ratio',
+    aspectRatio: ratio === 'none' ? undefined : ratio,
+    width: intrinsic ? 800 : undefined,
+    height: intrinsic ? 450 : undefined,
+    figcaption: CAPTIONS[caption],
+  });
+};
+
+export default definePart({
+  note: "Today's look",
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: {},
+    'ratio-4-3': { ratio: '4 / 3' },
+    'no-ratio': { ratio: 'none' },
+    'width-height': { intrinsic: true },
+    'no-caption': { caption: 'none' },
+    'long-caption': { caption: 'long' },
+    fit: { fit: true },
+    loading: { loading: true },
+    'error-slot': { error: 'slot' },
+    'error-bare': { error: 'bare' },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="picture-frame">${body(props)}</div>`,
+      styles: [skeletonStyles, pictureStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/progress-steps/progress-steps.css

@@ -0,0 +1,37 @@
+.progress-steps-frame {
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+@layer components {
+  .et-progress-step {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+
+    &:is(
+        [data-state='current'],
+        [data-state='complete'],
+        [data-state='success'],
+        [data-state='warning'],
+        [data-state='error']
+      )
+      .et-progress-step-marker {
+      border-color: var(--et-theme-color-ink-solid);
+    }
+
+    &:is([data-state='complete'], [data-state='success'], [data-state='warning'], [data-state='error']):not(
+        :last-child
+      )::after {
+      background: var(--et-theme-color-ink-solid);
+    }
+
+    &:is(a, button) {
+      @media (hover: hover) {
+        &:hover .et-progress-step-marker {
+          border-color: var(--et-theme-color-ink-solid);
+        }
+      }
+    }
+  }
+}

package/design/sdk/components/progress-steps/progress-steps.ts

@@ -0,0 +1,91 @@
+import { progressSteps, ProgressStepMockStep, progressStepsStyles } from '@ethlete/components/design/progress-steps';
+import { definePart, drawing } from '@design-system';
+import frame from './progress-steps.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  set?: 'checkout' | 'outcomes' | 'described' | 'vertical' | 'links';
+  complete?: Interaction;
+  upcoming?: Interaction;
+};
+
+const mark = (control: string, interaction?: Interaction) =>
+  [`data-et-control="${control}"`, interaction && `data-et-force="${interaction}"`].filter(Boolean).join(' ');
+
+const checkout: ProgressStepMockStep[] = [
+  { label: 'Account', state: 'complete' },
+  { label: 'Shipping', state: 'current' },
+  { label: 'Payment' },
+  { label: 'Review' },
+];
+
+const outcomes: ProgressStepMockStep[] = [
+  { label: 'Upload', state: 'success' },
+  { label: 'Validate', state: 'warning', color: 'warning' },
+  { label: 'Import', state: 'error', color: 'danger' },
+  { label: 'Publish' },
+];
+
+const described: ProgressStepMockStep[] = [
+  { label: 'Team', state: 'complete', description: '18 players' },
+  { label: 'Squad', state: 'error', color: 'danger', description: '2 missing' },
+  { label: 'Kit', state: 'current', description: 'Home colours' },
+  { label: 'Submit', description: 'By Friday' },
+];
+
+const vertical: ProgressStepMockStep[] = [
+  { label: 'Registration received', state: 'complete', description: 'Mon, 12 Oct' },
+  { label: 'Documents checked', state: 'warning', color: 'warning', description: 'Photo is blurry' },
+  { label: 'Payment', state: 'current', description: 'Waiting for the transfer' },
+  { label: 'Licence issued' },
+];
+
+const links = (props: Props): ProgressStepMockStep[] => [
+  { label: 'Account', state: 'complete', as: 'a', attributes: mark('complete', props.complete) },
+  { label: 'Shipping', state: 'current', as: 'a' },
+  { label: 'Payment', as: 'a', attributes: mark('upcoming', props.upcoming) },
+  { label: 'Review', as: 'a' },
+];
+
+const steps = (props: Props) => {
+  switch (props.set) {
+    case 'outcomes':
+      return progressSteps({ steps: outcomes });
+    case 'described':
+      return progressSteps({ steps: described });
+    case 'vertical':
+      return progressSteps({ steps: vertical, orientation: 'vertical' });
+    case 'links':
+      return progressSteps({ steps: links(props) });
+    default:
+      return progressSteps({ steps: checkout });
+  }
+};
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: {},
+    outcomes: { set: 'outcomes' },
+    described: { set: 'described' },
+    vertical: { set: 'vertical' },
+    links: { set: 'links' },
+    'upcoming-hover': { set: 'links', upcoming: 'hover' },
+    'upcoming-active': { set: 'links', upcoming: 'active' },
+    'upcoming-focus-visible': { set: 'links', upcoming: 'focus-visible' },
+    'complete-hover': { set: 'links', complete: 'hover' },
+    'complete-focus-visible': { set: 'links', complete: 'focus-visible' },
+  },
+  widths: [480],
+  controls: {
+    complete: { kind: 'button', input: ['pointer', 'keyboard'] },
+    upcoming: { kind: 'button', input: ['pointer', 'keyboard'] },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="progress-steps-frame">${steps(props)}</div>`,
+      styles: [progressStepsStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/query-error/query-error.css

@@ -0,0 +1,33 @@
+.query-error-frame {
+  max-inline-size: 520px;
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+
+  .query-error-support {
+    color: inherit;
+    font-size: 1.2rem;
+    text-decoration: underline;
+  }
+}
+
+@layer components {
+  .et-banner {
+    border-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-button {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-button:where([data-variant='filled']) {
+    --et-button-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+
+    @media (hover: hover) {
+      &:hover {
+        --et-theme-color-primary-rgb: var(--et-color-primary-active);
+      }
+    }
+  }
+}

package/design/sdk/components/query-error/query-error.ts

@@ -0,0 +1,120 @@
+import { button } from '@ethlete/components/design/button';
+import { queryError, queryErrorStyles } from '@ethlete/components/design/query-error';
+import { definePart, drawing } from '@design-system';
+import frame from './query-error.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Shape = 'message' | 'violations' | 'classValidator' | 'retryable' | 'empty' | 'echoesTitle' | 'network' | 'long';
+
+type Props = {
+  shape: Shape;
+  alwaysAllowRetry?: boolean;
+  slots?: boolean;
+  color?: string;
+  retry?: Interaction;
+};
+
+const SHAPES: Record<Shape, { status: number; title: string; messages: string[]; canRetry: boolean }> = {
+  message: { status: 403, title: 'Forbidden', messages: ['You do not have access to this team.'], canRetry: false },
+  violations: {
+    status: 422,
+    title: 'Unprocessable entity',
+    messages: ['A name is required.', 'The email address is not valid.', 'The start date must be before the end date.'],
+    canRetry: false,
+  },
+  classValidator: {
+    status: 400,
+    title: 'Bad request',
+    messages: ['name should not be empty', 'email must be an email'],
+    canRetry: false,
+  },
+  retryable: {
+    status: 503,
+    title: 'Service unavailable',
+    messages: ['The service is briefly unavailable.'],
+    canRetry: true,
+  },
+  empty: {
+    status: 500,
+    title: 'Internal server error',
+    messages: ['Something went wrong on our end. Please try again later. (Code: 500)'],
+    canRetry: false,
+  },
+  echoesTitle: {
+    status: 404,
+    title: 'Not found',
+    messages: ['The requested resource was not found. (Code: 404)'],
+    canRetry: false,
+  },
+  network: {
+    status: 0,
+    title: 'Something went wrong',
+    messages: ['Something went wrong. Check your internet connection and try again later. (Code: 0)'],
+    canRetry: true,
+  },
+  long: {
+    status: 409,
+    title: 'Conflict',
+    messages: [
+      'The fixture for matchday 14 was moved by another organiser while you were editing it, so your changes to the kick-off time, the venue and the referee assignment could not be saved. Reload the fixture and quote request league.example.com/fixtures/2026_matchday_14_home_visitors_edit_request_8f3a9c2e7b1d',
+    ],
+    canRetry: false,
+  },
+};
+
+const mark = (control: string, interaction?: Interaction) =>
+  [`data-et-control="${control}" data-can-animate`, interaction && `data-et-force="${interaction}"`]
+    .filter(Boolean)
+    .join(' ');
+
+const slotActions = (interaction?: Interaction) =>
+  button({ label: 'Try again', size: 'sm' }).replace('<button ', `<button ${mark('retry', interaction)} `) +
+  '<a class="query-error-support" href="#">Contact support</a>';
+
+const render = ({ shape, alwaysAllowRetry, slots, color = 'danger', retry }: Props) => {
+  const { status, title, messages, canRetry } = SHAPES[shape];
+
+  return queryError({
+    status,
+    title: slots && status === 403 ? 'This team is private' : title,
+    messages,
+    color,
+    retry: !slots && (canRetry || alwaysAllowRetry) ? 'Retry' : undefined,
+    retryAttributes: mark('retry', retry),
+    actions: slots ? slotActions(retry) : undefined,
+  });
+};
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    message: { shape: 'message' },
+    violations: { shape: 'violations' },
+    'class-validator': { shape: 'classValidator' },
+    retryable: { shape: 'retryable' },
+    'empty-body': { shape: 'empty' },
+    'echoes-title': { shape: 'echoesTitle' },
+    network: { shape: 'network' },
+    'always-allow-retry': { shape: 'echoesTitle', alwaysAllowRetry: true },
+    'long-message': { shape: 'long' },
+    'custom-slots': { shape: 'message', slots: true },
+    'retry-hover': { shape: 'retryable', retry: 'hover' },
+    'retry-active': { shape: 'retryable', retry: 'active' },
+    'retry-focus-visible': { shape: 'retryable', retry: 'focus-visible' },
+    'slot-retry-focus-visible': { shape: 'message', slots: true, retry: 'focus-visible' },
+    'brand-color': { shape: 'retryable', color: 'brand' },
+    'brand-retry-hover': { shape: 'retryable', color: 'brand', retry: 'hover' },
+    'brand-retry-focus-visible': { shape: 'retryable', color: 'brand', retry: 'focus-visible' },
+  },
+  widths: [480],
+  controls: {
+    retry: { kind: 'button', input: ['pointer', 'keyboard'] },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="query-error-frame">${render(props)}</div>`,
+      styles: [queryErrorStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/scheduler/scheduler.css

@@ -0,0 +1,55 @@
+.t-frame {
+  box-sizing: border-box;
+  padding: 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+@layer components {
+  .et-button,
+  .et-icon-button {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-button:where([data-variant='filled']) {
+    --et-button-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+
+    @media (hover: hover) {
+      &:hover {
+        --et-theme-color-primary-rgb: var(--et-color-primary-active);
+      }
+    }
+  }
+
+  .et-segmented-button,
+  .et-scheduler-time-grid-slot,
+  .et-scheduler-time-grid-all-day-cell,
+  .et-scheduler-month-view-cell,
+  .et-scheduler-appointment,
+  .et-scheduler-time-grid-block,
+  .et-scheduler-month-view-overflow-trigger {
+    &:focus-visible {
+      outline-color: var(--et-theme-color-ink-solid);
+    }
+  }
+
+  :is(.et-scheduler-appointment, .et-scheduler-time-grid-block):not([data-selected]) .et-scheduler-appointment-dot {
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  .et-scheduler-time-grid-now {
+    border-block-start-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+
+    &::before {
+      background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+    }
+  }
+
+  .et-scheduler-time-grid-header-day[data-today] .et-scheduler-time-grid-header-date,
+  .et-scheduler-month-view-cell[data-today] .et-scheduler-month-view-cell-date,
+  .et-scheduler-agenda-view-day-header[data-today] .et-scheduler-agenda-view-day-date,
+  :is(.et-scheduler-appointment, .et-scheduler-time-grid-block)[data-selected] {
+    box-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+}