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

package/design/sdk/components/textarea/textarea.css

@@ -0,0 +1,116 @@
+.t-frame {
+  box-sizing: border-box;
+  display: grid;
+  gap: 1.6rem;
+  padding: 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+@layer components {
+  et-form-field[data-text-shell] {
+    --_t-focus-frame: var(--et-surface-color-solid);
+    --_et-form-field-frame-border: var(--et-surface-interaction-solid);
+    --_et-form-field-frame-border-hover: color-mix(
+      in srgb,
+      var(--et-surface-interaction-solid) 75%,
+      var(--et-surface-color-solid)
+    );
+  }
+
+  et-form-field[data-text-shell][data-error] {
+    --_t-focus-frame: var(--et-theme-color-ink-solid);
+    --_et-form-field-frame-border: var(--et-theme-color-primary-solid);
+    --_et-form-field-frame-border-hover: light-dark(
+      rgb(var(--et-color-primary-hover, var(--et-color-primary))),
+      rgb(
+        var(
+          --et-color-primary-ink-active,
+          var(
+            --et-color-primary-ink-focus,
+            var(
+              --et-color-primary-ink-hover,
+              var(
+                --et-color-primary-ink,
+                var(
+                  --et-color-primary-active,
+                  var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+                )
+              )
+            )
+          )
+        )
+      )
+    );
+  }
+
+  et-form-field[data-text-shell]:is([data-focused], :has(:focus-visible)):not([data-readonly])
+    .et-form-field-control-frame {
+    border-color: var(--_t-focus-frame);
+    box-shadow: inset 0 0 0 var(--et-form-field-control-border-width) var(--_t-focus-frame);
+  }
+
+  et-form-field[data-text-shell][data-readonly] .et-form-field-control-frame {
+    border-style: dashed;
+  }
+
+  et-form-field[data-text-shell][data-readonly]:is([data-focused], :has(:focus-visible)) .et-form-field-control-frame {
+    outline: calc(2 * var(--et-form-field-control-border-width)) dashed var(--_t-focus-frame);
+    outline-offset: calc(-2 * var(--et-form-field-control-border-width));
+  }
+
+  et-textarea .et-textarea-native::placeholder {
+    color: color-mix(in srgb, currentColor 60%, transparent);
+  }
+
+  et-form-field et-label .et-label-required-marker {
+    color: var(--et-theme-color-ink-solid);
+  }
+}
+
+@layer components {
+  et-form-field[data-text-shell][data-control-type='textarea'][data-appearance='box']:not(
+      [data-label-mode='floating-inside']
+    ) {
+    --_t-line: calc(var(--et-form-field-control-font-size) * var(--et-form-field-control-line-height));
+    --_t-pad: max(
+      var(--et-form-field-control-padding-block),
+      (
+          var(--et-form-field-control-min-height) - var(--et-form-field-control-font-size) *
+            var(--et-form-field-control-line-height) - 2 * var(--et-form-field-control-border-width)
+        ) /
+        2
+    );
+
+    .et-form-field-control-frame {
+      padding-block: 0;
+      padding-inline-end: 0;
+    }
+
+    .et-textarea-native {
+      box-sizing: border-box;
+      padding-block: var(--_t-pad);
+      padding-inline-end: var(--et-form-field-control-padding-inline);
+    }
+
+    textarea[data-et-textarea-autosize] {
+      min-block-size: calc(var(--et-textarea-min-rows, 1) * 1lh + 2 * var(--_t-pad));
+      max-block-size: calc(var(--et-textarea-max-block-size, 1000lh) + 2 * var(--_t-pad));
+    }
+
+    &[data-label-mode='inline'] .et-form-field-label-area--inline {
+      margin-block: 0;
+    }
+
+    .t-scrolled & .et-form-field-control-slot {
+      overflow: clip;
+      max-block-size: calc(4 * var(--_t-line) + 2 * var(--_t-pad));
+    }
+
+    .t-scrolled & textarea[data-et-textarea-autosize] {
+      max-block-size: none;
+      translate: 0 calc(-2.5 * var(--_t-line) - var(--_t-pad));
+    }
+  }
+}

package/design/sdk/components/textarea/textarea.ts

@@ -0,0 +1,64 @@
+import { textareaField, type TextareaFieldMockOptions, textareaFieldStyles } from '@ethlete/components/design/textarea';
+import { definePart, drawing } from '@design-system';
+import frame from './textarea.css?inline';
+
+type Props = { field: TextareaFieldMockOptions; scrolled?: boolean };
+
+const message = (extra: Partial<TextareaFieldMockOptions> = {}): Props => ({
+  field: { id: 'message', label: 'Message', placeholder: 'Write something…', ...extra },
+});
+
+const VALUE = 'Hi Lena,\nthe venue moved to Hall B.\nKick-off stays at 18:00.';
+
+const LONG =
+  'Hi Lena,\nthe venue moved to Hall B, next to the north entrance.\nKick-off stays at 18:00, doors open at 17:15.\nPlease bring your team list and the signed waiver for every player.\nParking is free after 17:00 on the east lot.\nThe referee briefing starts at 17:30 in room 2.\nSee you there,\nJonas';
+
+const INVALID = {
+  required: true,
+  value: 'Hi',
+  error: 'Write at least 20 characters.',
+  errorColor: 'danger',
+} satisfies Partial<TextareaFieldMockOptions>;
+
+export default definePart({
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    empty: message({ placeholder: undefined }),
+    placeholder: message(),
+    filled: message({ value: VALUE }),
+    hover: message({ force: 'hover' }),
+    'hover-filled': message({ value: VALUE, force: 'hover' }),
+    focus: message({ focused: true, force: 'focus-visible' }),
+    'focus-filled': message({ value: VALUE, focused: true, force: 'focus-visible' }),
+    'focus-hover': message({ value: VALUE, focused: true, force: ['hover', 'focus-visible'] }),
+    hint: message({ hint: 'Visible to everyone on the team.' }),
+    description: message({ description: 'Shown above the event on the team page.' }),
+    required: message({ required: true, hint: 'Visible to everyone on the team.' }),
+    invalid: message(INVALID),
+    'invalid-hover': message({ ...INVALID, force: 'hover' }),
+    'invalid-focus': message({ ...INVALID, focused: true, force: 'focus-visible' }),
+    disabled: message({ disabled: true }),
+    'disabled-filled': message({ value: VALUE, disabled: true }),
+    readonly: message({ value: VALUE, readonly: true }),
+    'readonly-focus': message({ value: VALUE, readonly: true, focused: true, force: 'focus-visible' }),
+    'long-autosize': message({ value: LONG }),
+    'long-max-rows': message({ value: LONG, maxRows: 4 }),
+    'long-max-rows-scrolled': { ...message({ value: LONG, maxRows: 4 }), scrolled: true },
+    'manual-resize': message({ value: VALUE, autosize: false, rows: 4 }),
+    'manual-resize-overflow': message({ value: LONG, autosize: false, rows: 4 }),
+    'single-row': message({ rows: 1, placeholder: 'Add a note…' }),
+    mixed: message({ value: VALUE, mixed: true, mixedLabel: 'Mixed values' }),
+    'no-label': message({ label: undefined, placeholder: 'Add a comment…' }),
+    'size-sm': message({ value: VALUE, size: 'sm' }),
+    'size-lg': message({ value: VALUE, size: 'lg' }),
+  },
+  widths: [320, 360, 640],
+  render: (props: Props) =>
+    drawing({
+      body: props.scrolled
+        ? `<div class="t-frame t-scrolled">${textareaField(props.field).replace('<div class="et-form-field-control-frame"', '$& data-et-skip="CLIPPED"')}</div>`
+        : `<div class="t-frame">${textareaField(props.field)}</div>`,
+      styles: [textareaFieldStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/timeline/timeline.css

@@ -0,0 +1,30 @@
+.timeline-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;
+
+  .timeline-label,
+  .timeline-description {
+    margin: 0;
+  }
+
+  .timeline-description {
+    color: var(--et-surface-color-muted-solid);
+    font-size: 1.2rem;
+  }
+}
+
+.timeline-frame--compact .et-timeline {
+  --et-timeline-gap: 8px;
+  --et-timeline-rail-gap: 8px;
+  --et-timeline-marker-size: 14px;
+  --et-timeline-dot-size: 6px;
+}
+
+@layer components {
+  .timeline-frame .et-timeline-item {
+    --et-timeline-marker-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+}

package/design/sdk/components/timeline/timeline.ts

@@ -0,0 +1,87 @@
+import { SDK_ICONS } from '@ethlete/components/design/icon-set';
+import { iconMarkup } from '@ethlete/components/design/icon';
+import { timeline, timelineStyles, type TimelineMockItem } from '@ethlete/components/design/timeline';
+import { definePart, drawing } from '@design-system';
+import frame from './timeline.css?inline';
+
+const icon = (name: string) => SDK_ICONS.find((each) => each.name === name)!;
+
+type Props = {
+  markers?: boolean;
+  themedDots?: boolean;
+  time?: boolean;
+  compact?: boolean;
+  long?: boolean;
+  count?: number;
+};
+
+const EVENTS = [
+  {
+    time: '18:30',
+    label: 'Squad announced',
+    description: 'Both line-ups published 60 minutes before kickoff.',
+    icon: 'et-clock',
+    color: undefined,
+  },
+  {
+    time: "23'",
+    label: 'Goal by A. Rossi',
+    description: 'Assisted by M. Keller after a counter down the left.',
+    icon: 'et-circle-check',
+    color: 'warning',
+  },
+  {
+    time: "67'",
+    label: 'Second yellow for L. Turner',
+    description: 'Sent off; the home side plays the rest a player down.',
+    icon: 'et-triangle-exclamation',
+    color: 'danger',
+  },
+  {
+    time: "90+4'",
+    label: 'Fulltime - 2:1',
+    description: 'The visitors take all three points and go top of the table.',
+    icon: 'et-trophy',
+    color: 'brand',
+  },
+];
+
+const LONG_LABEL = 'Match report filed by the referee with notes on both sendings-off and the crowd incident';
+const LONG_DESCRIPTION =
+  'league.example.com/matches/20261031_home_visitors_report_attachments_referee_statement_final.pdf';
+
+const items = ({ markers, themedDots, time = true, compact, long, count = EVENTS.length }: Props) =>
+  EVENTS.slice(0, count).map((event, index): TimelineMockItem => {
+    const label = long && index === 1 ? LONG_LABEL : event.label;
+    const description = long && index === 1 ? LONG_DESCRIPTION : event.description;
+
+    return {
+      time: time ? event.time : undefined,
+      marker: markers ? iconMarkup(icon(event.icon)) : undefined,
+      color: markers || themedDots ? event.color : undefined,
+      content:
+        `<p class="timeline-label">${label}</p>` +
+        (compact ? '' : `<p class="timeline-description">${description}</p>`),
+    };
+  });
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: {},
+    'with-markers': { markers: true },
+    'themed-dots': { themedDots: true },
+    compact: { compact: true },
+    'compact-markers': { compact: true, markers: true },
+    'no-time': { time: false },
+    'long-content': { long: true, markers: true },
+    single: { count: 1 },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="timeline-frame${props.compact ? ' timeline-frame--compact' : ''}">${timeline({ items: items(props) })}</div>`,
+      styles: [timelineStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/toolbar/toolbar.css

@@ -0,0 +1,24 @@
+.toolbar-frame {
+  display: flex;
+  align-items: flex-start;
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+
+  .et-toolbar {
+    --et-toolbar-background: var(--et-surface-background-solid);
+
+    inline-size: fit-content;
+    border: 1px solid var(--et-surface-border-solid);
+  }
+}
+
+@layer components {
+  .toolbar-frame .et-focus-ring {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .toolbar-frame .et-icon-button[data-pressed='true'] {
+    box-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+}

package/design/sdk/components/toolbar/toolbar.ts

@@ -0,0 +1,87 @@
+import { toolbar, toolbarStyles, type ToolbarMockItem } from '@ethlete/components/design/toolbar';
+import { SDK_ICONS } from '@ethlete/components/design/icon-set';
+import { definePart, drawing } from '@design-system';
+import frame from './toolbar.css?inline';
+
+const icon = (name: string) => SDK_ICONS.find((each) => each.name === name)!;
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+type Control = 'bold' | 'italic' | 'underline' | 'bulleted' | 'numbered' | 'quote' | 'link';
+
+type Props = {
+  orientation?: 'horizontal' | 'vertical';
+  /** The controls an interaction is forced on. */
+  forced?: Control[];
+  interaction?: Interaction;
+  italicDisabled?: boolean;
+  tabStop?: Control;
+  size?: 'xs' | 'md' | 'lg' | 'xl';
+};
+
+const BUTTONS: { control: Control; icon: (typeof SDK_ICONS)[number]; label: string; pressed?: boolean }[] = [
+  { control: 'bold', icon: icon('et-bold'), label: 'Bold', pressed: true },
+  { control: 'italic', icon: icon('et-italic'), label: 'Italic', pressed: false },
+  { control: 'underline', icon: icon('et-underline'), label: 'Underline', pressed: false },
+  { control: 'bulleted', icon: icon('et-list-bulleted'), label: 'Bulleted list', pressed: true },
+  { control: 'numbered', icon: icon('et-list-numbered'), label: 'Numbered list', pressed: false },
+  { control: 'quote', icon: icon('et-quote'), label: 'Quote', pressed: false },
+  { control: 'link', icon: icon('et-link'), label: 'Link' },
+];
+
+const GROUP_ENDS: Control[] = ['underline', 'numbered'];
+
+const items = ({ forced = [], interaction, italicDisabled }: Props) =>
+  BUTTONS.flatMap(({ control, icon, label, pressed }): ToolbarMockItem[] => {
+    const attributes = [
+      `data-et-control="${control}" data-can-animate`,
+      interaction && forced.includes(control) && `data-et-force="${interaction}"`,
+    ]
+      .filter(Boolean)
+      .join(' ');
+    const button: ToolbarMockItem = {
+      type: 'button',
+      icon,
+      label,
+      pressed,
+      disabled: control === 'italic' && italicDisabled,
+      attributes,
+    };
+
+    return GROUP_ENDS.includes(control) ? [button, { type: 'divider' }] : [button];
+  });
+
+const render = (props: Props) => {
+  const list = items(props);
+  const tabStop = props.tabStop
+    ? list.findIndex((item) => item.type === 'button' && item.attributes?.includes(`"${props.tabStop}"`))
+    : undefined;
+
+  return toolbar({ items: list, orientation: props.orientation, size: props.size, tabStop });
+};
+
+export default definePart({
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: {},
+    hover: { interaction: 'hover', forced: ['bold', 'italic'] },
+    active: { interaction: 'active', forced: ['bold', 'italic'] },
+    'focus-visible': { interaction: 'focus-visible', forced: ['bold'] },
+    'focus-visible-unpressed': { interaction: 'focus-visible', forced: ['italic'], tabStop: 'italic' },
+    disabled: { italicDisabled: true },
+    vertical: { orientation: 'vertical' },
+    'size-xs': { size: 'xs' },
+    'size-md': { size: 'md' },
+    'size-lg': { size: 'lg' },
+    'size-xl': { size: 'xl' },
+  },
+  widths: [528],
+  controls: Object.fromEntries(
+    BUTTONS.map(({ control }) => [control, { kind: 'button', input: ['pointer', 'keyboard'] }]),
+  ),
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="toolbar-frame">${render(props)}</div>`,
+      styles: [toolbarStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/tooltip/tooltip.css

@@ -0,0 +1,15 @@
+.sdk-tooltip-stage {
+  display: inline-block;
+  padding: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .et-tooltip-panel {
+    --et-surface-ring-solid: color-mix(in srgb, var(--et-surface-color-solid) 24%, var(--et-surface-background-solid));
+    --et-overlay-arrow-border: var(--et-surface-ring-solid);
+  }
+
+  .et-tooltip {
+    --_et-floating-tip-border: var(--et-surface-ring-solid);
+  }
+}

package/design/sdk/components/tooltip/tooltip.ts

@@ -0,0 +1,28 @@
+import { tooltip, type TooltipMockOptions, tooltipStyles } from '@ethlete/components/design/tooltip';
+import { definePart, drawing } from '@design-system';
+import edge from './tooltip.css?inline';
+
+const SHORT = 'Copy link';
+const LONG = 'Everyone with the link can view this board. Comments stay private to the members of the workspace.';
+const TEMPLATE = '<p><strong>Shift + C</strong></p><p>Copies the link to this board. Anyone with it can view.</p>';
+
+export default definePart<TooltipMockOptions>({
+  note: 'The SDK tooltip, drawn by its mock from @ethlete/components/design: the open pane with its arrow on the inherited surface. Short text, long text that wraps at the 34ch max width, template content, and each side the pane opens on, plus a -start and an -end placement with the arrow 20 px in. In the dark scheme the pane border and the arrow edge are a 1 px ring in --et-surface-ring-solid, 24 % --et-surface-color-solid over the fill, as in the foundations/elevation round. The token is defined here; the generator does not emit it yet.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    short: { text: SHORT },
+    long: { text: LONG },
+    template: { content: TEMPLATE },
+    top: { text: SHORT, placement: 'top' },
+    right: { text: SHORT, placement: 'right' },
+    bottom: { text: SHORT, placement: 'bottom' },
+    left: { text: SHORT, placement: 'left' },
+    'bottom-start': { text: 'Copy the link to this board', placement: 'bottom-start' },
+    'top-end': { text: 'Copy the link to this board', placement: 'top-end' },
+  },
+  render: (options: TooltipMockOptions) =>
+    drawing({
+      body: `<div class="sdk-tooltip-stage">${tooltip(options)}</div>`,
+      styles: [tooltipStyles, edge].join('\n'),
+    }),
+});

package/design/sdk/components/tree/selected-tint.css

@@ -0,0 +1,15 @@
+@layer components {
+  @container style(--et-surface-type: light) {
+    .et-tree:not(:where([aria-multiselectable])) .et-tree-node:where([data-selected]) {
+      background: color-mix(in srgb, var(--et-theme-color-primary-solid, gray) 32%, transparent);
+
+      &:not(:where([aria-disabled])):hover {
+        background: color-mix(in srgb, var(--et-theme-color-primary-solid, gray) 38%, transparent);
+      }
+
+      &:not(:where([aria-disabled])):active {
+        background: color-mix(in srgb, var(--et-theme-color-primary-solid, gray) 44%, transparent);
+      }
+    }
+  }
+}

package/design/sdk/components/tree/tree.ts

@@ -0,0 +1,70 @@
+import { tree, TreeMockItem, treeStyles } from '@ethlete/components/design/tree';
+import { definePart, drawing, interactionRows } from '@design-system';
+import selectedTint from './selected-tint.css?inline';
+
+type RowInteraction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  items: TreeMockItem[];
+  expanded?: string[];
+  value?: string;
+  active?: string;
+  forced?: { row: string; interaction: RowInteraction };
+};
+
+const FILES: TreeMockItem[] = [
+  {
+    label: 'src',
+    children: [
+      {
+        label: 'app',
+        children: [{ label: 'app.component.ts' }, { label: 'app.config.ts' }, { label: 'legacy.ts', disabled: true }],
+      },
+      { label: 'assets', children: [{ label: 'logo.svg' }] },
+      { label: 'main.ts' },
+    ],
+  },
+  { label: 'docs', children: [{ label: 'getting-started.md' }] },
+  { label: 'package.json' },
+];
+
+const SHORT: TreeMockItem[] = [{ label: 'docs' }, { label: 'notes.md' }, { label: 'README.md' }];
+
+const { states, grid } = interactionRows(
+  {
+    row: { items: SHORT },
+    selected: { items: SHORT, value: 'notes.md' },
+  } satisfies Record<string, Props>,
+  {
+    interactions: ['hover', 'active', 'focus-visible'],
+    force: (props: Props, interaction: RowInteraction): Props => ({
+      ...props,
+      active: 'notes.md',
+      forced: { row: 'notes.md', interaction },
+    }),
+  },
+);
+
+export default definePart({
+  note: 'The SDK tree, drawn by its mock from @ethlete/components/design. Rows keep a roving tab stop, so a focused row draws the real :focus-visible ring.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    ...states,
+    collapsed: { items: FILES },
+    expanded: { items: FILES, expanded: ['src', 'src/app', 'docs'], value: 'src/app/app.config.ts' },
+  },
+  grid,
+  widths: [320],
+  controls: {
+    row: { kind: 'row', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  render: ({ forced, ...props }: Props) =>
+    drawing({
+      body: tree({
+        ...props,
+        label: 'Files',
+        rowAttributes: forced && { [forced.row]: `data-et-force="${forced.interaction}"` },
+      }).replaceAll('role="treeitem"', 'data-et-control="row" role="treeitem"'),
+      styles: [treeStyles, selectedTint].join('\n'),
+    }),
+});