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

package/design/sdk/components/radio-group/radio-group.ts

@@ -0,0 +1,167 @@
+import {
+  radioGroup,
+  type RadioGroupMockOption,
+  type RadioGroupMockOptions,
+  type RadioMockForce,
+  radioGroupStyles,
+} from '@ethlete/components/design/radio-group';
+import { control } from '@ethlete/components/design/control';
+import { definePart, drawing } from '@design-system';
+import frame from './radio-group.css?inline';
+
+type Props = { group: RadioGroupMockOptions } & Partial<RadioGroupMockOptions>;
+
+const LABEL = 'Remind me one hour before';
+
+const ROWS = {
+  unchecked: {},
+  checked: { checked: true },
+} satisfies Record<string, Partial<RadioGroupMockOption>>;
+
+const COLUMNS = ['rest', 'hover', 'focus-visible', 'active', 'disabled', 'readonly'] as const;
+
+type Row = keyof typeof ROWS;
+type Column = (typeof COLUMNS)[number];
+
+const cellOf = (row: Row, column: Column): RadioGroupMockOptions => ({
+  id: `${row}-${column}`,
+  readonly: column === 'readonly',
+  options: [
+    {
+      ...ROWS[row],
+      label: LABEL,
+      disabled: column === 'disabled',
+      force:
+        column === 'rest' || column === 'disabled' || column === 'readonly'
+          ? undefined
+          : (column satisfies RadioMockForce),
+    },
+  ],
+});
+
+const stateOf = (row: Row, column: Column) => (column === 'rest' ? row : `${row}-${column}`);
+
+const gridStates = Object.fromEntries(
+  (Object.keys(ROWS) as Row[]).flatMap((row) =>
+    COLUMNS.map((column) => [stateOf(row, column), { group: cellOf(row, column) }]),
+  ),
+) as Record<string, Props>;
+
+const marked = (markup: string) =>
+  markup.replace(/<et-radio(?=[\s>])/gu, (tag) => control(`${tag}>`, 'radio').slice(0, -1));
+
+const REMINDERS = ['One hour before', 'Fifteen minutes before', 'At kick-off'];
+
+const reminderGroup = (
+  checked: number | null,
+  extra: Partial<RadioGroupMockOptions> & { force?: RadioMockForce[] } = {},
+): RadioGroupMockOptions => {
+  const { force, ...rest } = extra;
+
+  return {
+    id: 'reminder',
+    label: 'Kick-off reminder',
+    ...rest,
+    options: REMINDERS.map((label, index) => ({
+      label,
+      checked: index === checked,
+      force: index === 1 ? force : undefined,
+    })),
+  };
+};
+
+const formatGroup = (checked: number | null, force?: RadioMockForce[]): RadioGroupMockOptions => ({
+  id: 'format',
+  label: 'Match report format',
+  variant: 'card',
+  options: [
+    { label: 'Short', description: 'The score and the scorers.', checked: checked === 0, force },
+    { label: 'Full', description: 'Every event, with the line-ups.', checked: checked === 1 },
+  ],
+});
+
+const INVALID = {
+  required: true,
+  error: 'Pick a reminder to continue.',
+  errorColor: 'danger',
+} satisfies Partial<RadioGroupMockOptions>;
+
+export default definePart({
+  note: 'The SDK radio group (et-radio-group with et-radio) in flow, first drawing, drawn by the mock from @ethlete/components/design/radio-group with the real markup and CSS: et-label, et-radio in the plain and the card variant (et-selection-card), et-description, et-form-support with hint and error, the required marker, plus the color-interactive sheet; the brand theme, danger as the error theme. Fixtures are fictional: a match reminder form (Kick-off reminder: One hour before, Fifteen minutes before, At kick-off; hint We send it as a push notification.; required with error Pick a reminder to continue.; mixed hint The selected matches disagree.; card group Match report format: Short, The score and the scorers. / Full, Every event, with the line-ups.; horizontal group Show matches at: Home, Away, Neutral ground; grid label Remind me one hour before). Framed as a page with 16px padding at 360 and 640. States: a grid of unchecked and checked by rest, hover, focus-visible, active, disabled and readonly (one-option groups); group-none, group-checked, group-support (descriptions and hint), group-option-hover, group-option-pressed, group-option-focus-visible, group-mixed (bulk edit, dashed circles), group-disabled, group-readonly, invalid, invalid-focus-visible, invalid-checked, group-horizontal, card-rest, card-checked, card-hover, card-focus-visible and card-checked-focus-visible. Numbers (light / dark), from shot pixels at scale 2 at 360, brand mint, a: circle 20px with a 2px border and a 10px dot (border-box, fixed in 00072d935); unchecked circle border (surface border) vs page 1.26 / 1.73; checked ring and dot (primary) 1.33 / 13.50; checked hover dot and ring (-hover via color-interactive; the lib hover rule skips a checked radio) 1.37 / 13.06, 1.03 from rest; active 2.24 / 8.01; focus ring and focused border (primary -focus), checked or unchecked, 1.37 / 13.06; card checked edge and ring (primary) 1.33 / 13.50; mixed dashed border (primary) 1.33 / 13.50; invalid circle border (danger) 4.83 / 3.71; disabled checked ring 2.12 / 1.65, disabled label 1.41 / 1.65 (exempt under 1.4.11). Decided rules that arise: Q88 (every radio focus ring in ink, the unchecked one too, since unlike the checkbox it is primary, not the surface text colour; the invalid ring takes the danger ink; the card ring in ink), Q99a (the checked circle border, the focused circle border, the mixed dashed border and the card checked and focus edge take light-dark(ink, primary); the checked dot is a mint fill, so it takes a 1px inset ink edge, an outline at -1px) and Q101 (a checked radio hovers to -active). The ink edge on a mint fill arises, so Q102 arises: b draws the dot edge in both schemes, c keeps dark as today (light-dark(ink, transparent)). The error border is the danger theme, not mint, and passes 3:1, so it is kept. Findings for later: no new lib CSS bug; the radio circle box-sizing bug is fixed (00072d935, measured 40 sheet px = 20px). (1) WCAG 1.4.11: the unchecked circle border is 1.26 / 1.73 vs page, under 3:1, the only edge of an unchecked radio (the same open question as the checkbox box and the switch off track). Not drawn. (2) The required marker takes the error theme primary: 3.71:1 in dark, under 4.5:1; exempted here as in checkbox r1. (3) A checked radio has no hover rule of its own; only color-interactive shifts it to -hover, 1.03 from rest, so hover on a checked radio is invisible in a; Q101 fixes it in b and c. (4) Readonly draws exactly like rest, as with the checkbox. (5) A disabled group dims its options (opacity 0.5 and the disabled label colour, both at once) but not the group label, which keeps 7.81 in light; the same holds for the checkbox group. Later rounds, left out here: the sizes sm and lg, the card with the control at start and the card slots, a coloured (non-brand) radio, the warning state, a disabled option inside an enabled group, a pending (aria-busy) group, long labels that wrap, RTL and the check animation.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    ...gridStates,
+    'group-none': { group: reminderGroup(null) },
+    'group-checked': { group: reminderGroup(0) },
+    'group-support': {
+      group: {
+        id: 'support',
+        label: 'Kick-off reminder',
+        hint: 'We send it as a push notification.',
+        options: [
+          { label: 'One hour before', description: 'Time to get to the ground.', checked: true },
+          { label: 'At kick-off', description: 'Only when the whistle goes.' },
+        ],
+      },
+    },
+    'group-option-hover': { group: reminderGroup(0, { force: ['hover'] }) },
+    'group-option-pressed': { group: reminderGroup(0, { force: ['hover', 'active'] }) },
+    'group-option-focus-visible': { group: reminderGroup(1, { force: ['focus-visible'] }) },
+    'group-mixed': { group: reminderGroup(0, { mixed: true, hint: 'The selected matches disagree.' }) },
+    'group-disabled': { group: reminderGroup(0, { disabled: true }) },
+    'group-readonly': { group: reminderGroup(0, { readonly: true }) },
+    invalid: { group: reminderGroup(null, INVALID) },
+    'invalid-focus-visible': { group: reminderGroup(null, { ...INVALID, force: ['focus-visible'] }) },
+    'invalid-checked': { group: reminderGroup(1, INVALID) },
+    'group-horizontal': {
+      group: {
+        id: 'venue',
+        label: 'Show matches at',
+        orientation: 'horizontal',
+        options: [{ label: 'Home', checked: true }, { label: 'Away' }, { label: 'Neutral ground' }],
+      },
+    },
+    'card-rest': { group: formatGroup(null) },
+    'card-checked': { group: formatGroup(0) },
+    'card-hover': { group: formatGroup(1, ['hover']) },
+    'card-focus-visible': { group: formatGroup(1, ['focus-visible']) },
+    'card-checked-focus-visible': { group: formatGroup(0, ['focus-visible']) },
+  },
+  grid: {
+    columns: COLUMNS,
+    rows: Object.fromEntries(
+      (Object.keys(ROWS) as Row[]).map((row) => [
+        row,
+        Object.fromEntries(COLUMNS.map((column) => [column, stateOf(row, column)])),
+      ]),
+    ),
+  },
+  omits: [
+    { option: 'size', value: 'sm', reason: 'Not drawn in this round: sizes are a later round.' },
+    { option: 'size', value: 'md', reason: 'The default size, which every state draws without setting it.' },
+    { option: 'size', value: 'lg', reason: 'Not drawn in this round: sizes are a later round.' },
+    {
+      option: 'orientation',
+      value: 'vertical',
+      reason: 'The default orientation, drawn by the group-* states, outside the grid.',
+    },
+    { option: 'orientation', value: 'horizontal', reason: 'Drawn as the group-horizontal state, outside the grid.' },
+    { option: 'variant', value: 'plain', reason: 'The default variant, which the grid draws without setting it.' },
+    { option: 'variant', value: 'card', reason: 'Drawn as the card-* states, outside the grid.' },
+    {
+      option: 'controlPosition',
+      value: 'start',
+      reason: 'Not drawn in this round: the card with the control at start is a later round.',
+    },
+    { option: 'controlPosition', value: 'end', reason: 'Drawn as the card-* states, outside the grid.' },
+  ],
+  controls: {
+    radio: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  widths: [360, 640],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="t-frame">${marked(radioGroup(props.group))}</div>`,
+      styles: [radioGroupStyles, 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);
+  }
+}

package/design/sdk/components/scheduler/scheduler.ts

@@ -0,0 +1,240 @@
+import {
+  scheduler,
+  schedulerAgenda,
+  SchedulerMockAppointment,
+  SchedulerMockDay,
+  SchedulerMockMonthCell,
+  SchedulerMockTimeBlock,
+  SchedulerMockView,
+  schedulerMonth,
+  schedulerStyles,
+  schedulerTimeGrid,
+} from '@ethlete/components/design/scheduler';
+import { definePart, drawing } from '@design-system';
+import frame from './scheduler.css?inline';
+
+type Interaction = 'hover' | 'focus-visible';
+
+type Props = {
+  view: SchedulerMockView;
+  appointment?: Interaction;
+  slot?: Interaction;
+  cell?: Interaction;
+  dragging?: boolean;
+};
+
+const clock = (time: number) => {
+  const hour = Math.floor(time);
+  const minutes = String(Math.round((time - hour) * 60)).padStart(2, '0');
+
+  return `${hour % 12 || 12}:${minutes} ${hour < 12 ? 'AM' : 'PM'}`;
+};
+
+const range = (start: number, end: number) => `${clock(start)}–${clock(end)}`;
+
+const WED: SchedulerMockDay = { weekday: 'Wed', date: 4, label: 'Wednesday, March 4th, 2026', today: true };
+const THU: SchedulerMockDay = { weekday: 'Thu', date: 5, label: 'Thursday, March 5th, 2026' };
+const FRI: SchedulerMockDay = { weekday: 'Fri', date: 6, label: 'Friday, March 6th, 2026' };
+
+const WEEK: SchedulerMockDay[] = [
+  { weekday: 'Mon', date: 2, label: 'Monday, March 2nd, 2026' },
+  { weekday: 'Tue', date: 3, label: 'Tuesday, March 3rd, 2026' },
+  WED,
+  THU,
+  FRI,
+  { weekday: 'Sat', date: 7, label: 'Saturday, March 7th, 2026' },
+  { weekday: 'Sun', date: 8, label: 'Sunday, March 8th, 2026' },
+];
+
+const TODAY = 2;
+
+const block = (
+  day: number,
+  start: number,
+  end: number,
+  appointment: SchedulerMockAppointment,
+  extra: Partial<SchedulerMockTimeBlock> = {},
+): SchedulerMockTimeBlock => ({ day, start, end, timeRange: range(start, end), ...appointment, ...extra });
+
+const weekBlocks = (props: Props): SchedulerMockTimeBlock[] => [
+  block(0, 9, 9.5, { title: 'Daily sync', force: props.appointment }),
+  block(1, 9, 9.5, { title: 'Daily sync' }),
+  block(
+    1,
+    10,
+    12,
+    { title: 'Roadmap planning', color: 'warning', location: 'Room 2', chainCount: 1 },
+    { inlineOffset: 50, inlineSize: 50 },
+  ),
+  block(1, 10.5, 11.5, { title: 'Budget check', color: 'warning' }, { inlineOffset: 0, inlineSize: 50, depth: 1 }),
+  block(TODAY, 9, 9.5, { title: 'Daily sync' }),
+  block(TODAY, 13, 14.5, { title: 'Design review', location: 'Studio A', selected: true }),
+  block(3, 9, 9.5, { title: 'Daily sync' }),
+  block(3, 14, 16, { title: 'Hiring panel', color: 'danger', location: 'Room 4' }),
+  block(4, 9, 9.5, { title: 'Daily sync' }),
+  block(4, props.dragging ? 15.5 : 15, props.dragging ? 16.5 : 16, { title: 'Retro', dragging: props.dragging }),
+];
+
+const weekNonBusiness = WEEK.flatMap((_, day) =>
+  day >= 5
+    ? [{ day, from: 8, to: 18 }]
+    : [
+        { day, from: 8, to: 9 },
+        { day, from: 17, to: 18 },
+      ],
+);
+
+const timeGrid = (props: Props) => {
+  const single = props.view === 'day';
+  const days = single ? [WED] : WEEK;
+  const pick = (day: number) => (single ? (day === TODAY ? 0 : -1) : day);
+  const blocks = weekBlocks(props)
+    .map((entry) => ({ ...entry, day: pick(entry.day) }))
+    .filter((entry) => entry.day >= 0);
+
+  return schedulerTimeGrid({
+    days,
+    fromHour: 8,
+    toHour: 18,
+    hourLabel: (hour) => clock(hour),
+    blocks,
+    allDay: single ? [] : [{ day: 3, span: 2, title: 'Conference', color: 'danger' }],
+    now: { day: pick(TODAY), time: 11.25 },
+    nonBusiness: weekNonBusiness
+      .map((segment) => ({ ...segment, day: pick(segment.day) }))
+      .filter((segment) => segment.day >= 0),
+    forcedSlot: props.slot ? { day: single ? 0 : 3, hour: 11, force: props.slot } : undefined,
+    ariaLabel: single ? 'Wednesday, March 4, 2026' : 'March 2 – 8, 2026',
+  });
+};
+
+const MONTH_APPOINTMENTS: Record<number, SchedulerMockAppointment[]> = {
+  2: [{ title: 'Daily sync', timeRange: range(9, 9.5) }],
+  3: [
+    { title: 'Daily sync', timeRange: range(9, 9.5) },
+    { title: 'Roadmap planning', timeRange: range(10, 12) },
+  ],
+  4: [
+    { title: 'Daily sync', timeRange: range(9, 9.5) },
+    { title: 'Design review', timeRange: range(13, 14.5), selected: true },
+  ],
+  5: [{ title: 'Conference', color: 'danger' }],
+  6: [{ title: 'Conference', color: 'danger' }],
+  12: [{ title: 'Quarterly review', timeRange: range(14, 16) }],
+  17: [
+    { title: 'Daily sync', timeRange: range(9, 9.5) },
+    { title: 'Workshop', color: 'warning', timeRange: range(10, 13) },
+  ],
+  25: [{ title: 'Release', color: 'danger' }],
+};
+
+const monthCell = (date: number, outsideMonth: boolean, props: Props): SchedulerMockMonthCell => {
+  const appointments = outsideMonth ? [] : (MONTH_APPOINTMENTS[date] ?? []);
+
+  return {
+    date,
+    label: date === 4 && !outsideMonth ? 'Wednesday, March 4th, 2026' : `${date}`,
+    outsideMonth,
+    today: !outsideMonth && date === 4,
+    appointments: (date === 3 && !outsideMonth ? appointments.slice(0, 2) : appointments).map((appointment) =>
+      date === 2 && !outsideMonth ? { ...appointment, force: props.appointment } : appointment,
+    ),
+    overflow: date === 17 && !outsideMonth ? 3 : undefined,
+    force: date === 19 && !outsideMonth ? props.cell : undefined,
+  };
+};
+
+const month = (props: Props) => {
+  const dates = [23, 24, 25, 26, 27, 28, ...Array.from({ length: 31 }, (_, index) => index + 1), 1, 2, 3, 4, 5];
+  const weeks = Array.from({ length: 6 }, (_, week) =>
+    dates.slice(week * 7, week * 7 + 7).map((date, index) => {
+      const position = week * 7 + index;
+
+      return monthCell(date, position < 6 || position > 36, props);
+    }),
+  );
+
+  return schedulerMonth({
+    weekdays: WEEK.map((day) => ({ short: day.weekday, long: day.label.split(',')[0] ?? day.weekday })),
+    weeks,
+    ariaLabel: 'March 2026',
+  });
+};
+
+const agenda = (props: Props) =>
+  schedulerAgenda({
+    days: [
+      {
+        ...WED,
+        month: 'March 2026',
+        rows: [
+          { title: 'Daily sync', timeRange: range(9, 9.5), force: props.appointment },
+          {
+            title: 'Design review',
+            timeRange: range(13, 14.5),
+            location: 'Studio A',
+            selected: true,
+          },
+        ],
+      },
+      {
+        ...THU,
+        rows: [
+          { title: 'Conference', color: 'danger' },
+          { title: 'Daily sync', timeRange: range(9, 9.5) },
+          { title: 'Hiring panel', color: 'danger', timeRange: range(14, 16), location: 'Room 4', chainCount: 2 },
+          { title: 'Intro call', color: 'danger', timeRange: range(14, 14.5), guides: ['branch'] },
+          { title: 'Debrief', color: 'danger', timeRange: range(15.5, 16), guides: ['last-branch'] },
+        ],
+      },
+      {
+        ...FRI,
+        rows: [
+          { title: 'Conference', color: 'danger' },
+          { title: 'Retro', timeRange: range(15, 16) },
+        ],
+      },
+    ],
+  });
+
+const HEADER_LABELS: Record<SchedulerMockView, string> = {
+  week: 'March 2 – 8, 2026',
+  day: 'Wednesday, March 4, 2026',
+  month: 'March 2026',
+  agenda: 'March 4 – 10, 2026',
+};
+
+const render = (props: Props) => {
+  const body = props.view === 'month' ? month(props) : props.view === 'agenda' ? agenda(props) : timeGrid(props);
+
+  return scheduler({ view: props.view, headerLabel: HEADER_LABELS[props.view], addAction: true, body });
+};
+
+const skipClipped = (markup: string) =>
+  markup.replaceAll(
+    'class="et-scheduler-time-grid-block',
+    'data-et-skip="CLIPPED" class="et-scheduler-time-grid-block',
+  );
+
+export default definePart({
+  note: "The SDK scheduler (et-scheduler) in flow, first drawing, drawn by the mock from @ethlete/components/design/scheduler with the real markup and CSS: the wide header (outline Today button, filled Add appointment, previous and next icon buttons, the range label, the tabs view switch), et-scheduler-time-grid-view (week and day), et-scheduler-month-view and et-scheduler-agenda-view, the appointment badges (color dot, title, time range, location, chain count) and the resize handles; default labels, en-US times. Fixtures are fictional: one week (Mon March 2 to Sun March 8, 2026, today Wed March 4) with a daily sync, an overlapping parent and nested child (Roadmap planning / Budget check), a selected appointment (Design review, brand), a two-day all-day Conference, Hiring panel and Retro; the colors are the sdk product's registered themes brand (default), warning and danger. The time grid draws 8:00 to 18:00 as if the scrolling body sat on that window, with business hours 9 to 17 on weekdays and the weekend outside them; the current time line sits on today at 11:15. Framed as a page with 16px padding. Widths 560, 800 and 1200 (all above the 480px container width where the header switches to floating action buttons). States: week, week-dragging (Retro lifted, with the drag shadow), appointment-hover, appointment-focus-visible (Daily sync on Monday forced), slot-focus-visible (Thursday 11:00 forced), day, month (outside-month days, today, a +3 more trigger, the selected appointment), month-cell-focus-visible, agenda (a month heading, today, nested rows with tree guides, the selected appointment). Numbers (light / dark), from shot pixels at scale 2 at 800, brand mint, a: appointment tint (14 %) vs page 1.07 / 1.37, its title ink on it 5.12 / 9.84; selected appointment (mint fill) vs page 1.33 / 13.50, its text 15.82 / 15.82; today date circle (mint fill) vs page 1.33 / 13.50, its digit 15.82; current time line and its dot vs the today column 1.29 / 12.14; focus ring (primary) vs page 1.35 / 13.50, vs the appointment tint 1.26 / 9.84; Add appointment fill vs page 1.33 / 13.50, its label 15.82. Q98 numbers only: grid lines (hour rows, day columns, header and all-day edges, month cells) vs page 1.26 / 1.73; the non-business band 1.07 / 1.08; the today column tint is 6 % mint. Decided rules that arise: Q88 (every focus ring: slots, all-day cells, month cells, appointments, the overflow trigger, the view switch, the header buttons), Q99a (the current time line and its dot, the appointment color dot; the selected appointment, the today date circles and the filled Add appointment button are mint fills, so they take a 1px inset ink edge) and Q101 (the filled button hover = -active). The ink edge on a mint fill arises, so Q102 arises: b draws the edges in both schemes, c keeps dark as today (light-dark(ink, transparent)). The 32 / 38 / 44 % selection step does not arise: a selected appointment is a solid mint fill, not a tint. Findings for later: (1) lib bug: the badge pieces render inside their component hosts (et-scheduler-badge-color-dot, -title, -time-range, -location, -chain-count), which are inline, so the flex rules on the inner spans never apply: the color dot is 0 x 0 and never shows (also in Storybook), the title does not take flex: 1 or ellipsis, and the time range and location are cut hard at the block edge (the agenda location shrinks to one letter while the title has room). Fixed in the lib (display: contents on the five hosts; the time range and location shrink with an ellipsis before the title). Narrow week blocks still clip, because the gaps, the dot and the chain count alone are wider than the block (31 px at 560), so data-et-skip CLIPPED stays on every time grid block; the month cell skip is gone. (2) The first hour label sat half above the scroll body (translateY(-50%)) and was clipped by its overflow; fixed in the lib with a top padding of half the label line height. (3) Outside-month dates read nearly like in-month ones. (4) The selected appointment edge and the drag shadow share box-shadow, so a selected appointment being dragged would lose one (not drawn); the lib has no selected edge yet, so whoever merges b or c must list the edge and the drag shadow in one rule on [data-selected][data-dragging]. (5) The Add appointment hover (Q101) is not forced here; it is the same et-button as in the stream round (hover 1.69 from rest). Later rounds, left out here: the edit surface (scheduler-edit-surface and its parts, an overlay), the month +n more menu, the narrow header with floating action buttons, the drag-to-create draft and committed blocks, month draft and drop-target cells, the scrollbar, custom badge adornments, the read-only scheduler, RTL and long labels.",
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    week: { view: 'week' },
+    'week-dragging': { view: 'week', dragging: true },
+    'appointment-hover': { view: 'week', appointment: 'hover' },
+    'appointment-focus-visible': { view: 'week', appointment: 'focus-visible' },
+    'slot-focus-visible': { view: 'week', slot: 'focus-visible' },
+    day: { view: 'day' },
+    month: { view: 'month' },
+    'month-cell-focus-visible': { view: 'month', cell: 'focus-visible' },
+    agenda: { view: 'agenda' },
+  },
+  widths: [560, 800, 1200],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: skipClipped(render(props)),
+      styles: [schedulerStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/scrollable/scrollable.css

@@ -0,0 +1,58 @@
+.scrollable-frame {
+  padding: 2.4rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+
+  .et-scrollable[direction='vertical'] {
+    inline-size: 400px;
+
+    .et-scrollable-container {
+      block-size: 258px;
+    }
+
+    .et-scrollable-container > * {
+      translate: 0 var(--scrollable-offset);
+    }
+  }
+
+  .et-scrollable-container {
+    block-size: 128px;
+    gap: 12px;
+    padding-block: 4px;
+    margin-block: -4px;
+  }
+
+  .et-scrollable-container > * {
+    translate: var(--scrollable-offset) 0;
+  }
+
+  .scrollable-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 200px;
+    min-block-size: 80px;
+    block-size: 100%;
+    border: none;
+    border-radius: 12px;
+    font-size: 1.8rem;
+    font-weight: 600;
+    background: color-mix(in srgb, var(--et-surface-color-solid) 14%, transparent);
+    color: var(--et-surface-color-solid);
+  }
+
+  .scrollable-item:focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
+}
+
+.scrollable-frame--sized .scrollable-item {
+  min-inline-size: 0;
+}
+
+@layer components {
+  .et-scrollable-navigation-item.et-scrollable-navigation-item--active::after {
+    background-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary));
+  }
+}

package/design/sdk/components/scrollable/scrollable.ts

@@ -0,0 +1,133 @@
+import { scrollable, scrollableStyles } from '@ethlete/components/design/scrollable';
+import { definePart, drawing } from '@design-system';
+import frame from './scrollable.css?inline';
+
+type Position = 'start' | 'middle' | 'end';
+type Interaction = 'hover' | 'active';
+
+const ITEM_SIZES = ['same', 'full', 'half', 'third', 'quarter'] as const;
+type ItemSize = (typeof ITEM_SIZES)[number];
+
+type Props = {
+  direction?: 'horizontal' | 'vertical';
+  position?: Position;
+  items?: number;
+  maskVariant?: 'gradient' | 'border';
+  buttons?: 'inside' | 'footer' | 'none';
+  navigation?: boolean;
+  darken?: boolean;
+  color?: string;
+  endButton?: Interaction;
+  focusItem?: number;
+  itemSize?: ItemSize;
+};
+
+const ITEM = { horizontal: 200, vertical: 80 };
+const VIEWPORT = { horizontal: 432, vertical: 258 };
+const GAP = 12;
+
+const extent = (count: number, size: number) => count * size + (count - 1) * GAP;
+
+const offsetOf = (props: Required<Pick<Props, 'direction' | 'position' | 'items'>>) => {
+  const size = ITEM[props.direction];
+  const max = Math.max(0, extent(props.items, size) - VIEWPORT[props.direction]);
+
+  if (props.position === 'start') return 0;
+  if (props.position === 'end') return max;
+
+  return Math.min(max, 3 * (size + GAP) - Math.round((VIEWPORT[props.direction] - size) / 2));
+};
+
+const visibleRange = (offset: number, size: number, viewport: number, count: number) =>
+  Array.from({ length: count }, (_, index) => {
+    const start = index * (size + GAP) - offset;
+    const end = start + size;
+    const ratio = Math.max(0, Math.min(end, viewport) - Math.max(start, 0)) / size;
+
+    return ratio;
+  });
+
+const render = (props: Props) => {
+  const direction = props.direction ?? 'horizontal';
+  const items = props.items ?? 8;
+  const position = props.position ?? 'start';
+  const size = ITEM[direction];
+  const canScroll = extent(items, size) > VIEWPORT[direction];
+  const offset = offsetOf({ direction, position, items });
+  const ratios = visibleRange(offset, size, VIEWPORT[direction], items);
+  const best = ratios.reduce((found, ratio, index) => (ratio > (ratios[found] ?? 0) ? index : found), 0);
+  const active = position === 'end' ? items - 1 : position === 'start' ? 0 : best;
+  const buttons = props.buttons ?? 'inside';
+
+  const markup = scrollable({
+    direction,
+    canScroll,
+    position,
+    maskVariant: props.maskVariant,
+    buttons: buttons === 'none' ? undefined : buttons,
+    navigationActive: props.navigation ? active : undefined,
+    darken: props.darken,
+    itemSize: props.itemSize,
+    itemGap: props.itemSize ? GAP : undefined,
+    color: props.color,
+    endButtonAttributes: props.endButton ? `data-et-force="${props.endButton}"` : undefined,
+    containerAttributes: `data-et-skip="CLIPPED" style="--scrollable-offset: -${offset}px"`,
+    items: Array.from({ length: items }, (_, index) => ({
+      tag: 'button',
+      content: `Item ${index}`,
+      notIntersecting: props.darken && (ratios[index] ?? 0) < 1,
+      attributes: [
+        'class="scrollable-item"',
+        'type="button"',
+        props.focusItem === index && 'data-et-force="focus-visible"',
+      ]
+        .filter(Boolean)
+        .join(' '),
+    })),
+  });
+
+  return markup.replace(
+    'class="et-scrollable-progress-bar"',
+    'data-et-skip="CLIPPED" class="et-scrollable-progress-bar"',
+  );
+};
+
+export default definePart({
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5', 'claude-sonnet-5-5'],
+  states: {
+    'horizontal-start': {},
+    'horizontal-middle': { position: 'middle' },
+    'horizontal-end': { position: 'end' },
+    'vertical-start': { direction: 'vertical' },
+    'vertical-middle': { direction: 'vertical', position: 'middle' },
+    'vertical-end': { direction: 'vertical', position: 'end' },
+    'button-hover': { position: 'middle', endButton: 'hover' },
+    'button-active': { position: 'middle', endButton: 'active' },
+    'border-mask': { position: 'middle', maskVariant: 'border' },
+    'vertical-border-mask': { direction: 'vertical', position: 'middle', maskVariant: 'border' },
+    'navigation-start': { navigation: true },
+    'navigation-middle': { position: 'middle', navigation: true },
+    'navigation-end': { position: 'end', navigation: true },
+    'vertical-navigation': { direction: 'vertical', position: 'middle', navigation: true },
+    'footer-buttons': { position: 'middle', buttons: 'footer', navigation: true },
+    'footer-button-hover': { position: 'middle', buttons: 'footer', navigation: true, endButton: 'hover' },
+    'danger-navigation': { position: 'middle', navigation: true, color: 'danger' },
+    darken: { position: 'middle', darken: true },
+    'item-focus-visible': { focusItem: 1 },
+    'short-content': { items: 2 },
+    'short-content-navigation': { items: 2, navigation: true },
+    ...(Object.fromEntries(
+      ITEM_SIZES.map((itemSize) => [
+        `item-size-${itemSize}`,
+        itemSize === 'same' ? { itemSize, items: 2 } : { itemSize },
+      ]),
+    ) as Record<`item-size-${ItemSize}`, Props>),
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="scrollable-frame ${props.itemSize ? 'scrollable-frame--sized' : ''}">${render(props)}</div>`,
+      styles: [scrollableStyles, frame].join('\n'),
+    }),
+});