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

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## 1.0.0-next.81
+
+### Minor Changes
+
+- Anchored overlays take `arrowAnchor`, an element the arrow points at instead of the origin; the `anchoredDialog()` design mock takes a matching `anchor` selector.
+- The focus ring takes public `--et-focus-ring-*` tokens; `design check` stops flagging base parts and spinner clipping.
+- Breaking: the `et-progress-step` input `state` is now `stepState`, so it no longer collides with the `state` input of `RouterLink`.
+- The window control button takes `shape: 'caption'`, a full-height 46px Windows caption tile with a 10px glyph.
+
+### Patch Changes
+
+- Name the scheduler appointment buttons with `aria-label` (the appointment title) in the month and time grid views. The `title` attribute stays. The scheduler test driver now selects appointments by `aria-label`.
+- The select design mock takes an `ariaLabel` and names its trigger like `et-select` does.
+- `etTooltip` now opens on touch devices with a long press. A normal tap still does only the trigger's own action. The tooltip hides 1.5s after the finger lifts.
+
+## 1.0.0-next.80
+
+### Minor Changes
+
+- Add a `stretchContents` input to `et-button`: the label box fills the button beside the icon, so a wide button can push a trailing element to its far edge.
+- Add the `anchoredDialog()` design renderer, and draw the dialog, menu, select panel and tooltip panes of the design renderers with `data-et-auto-surface` when no `surface` is passed.
+- Add the `--et-kbd-color` custom property to `et-kbd` to set the key text colour.
+- Add a `shape` input to the window control button: `round` draws a GNOME (Adwaita) style circle next to the default `square` tile.
+
+### Patch Changes
+
+- The off switch track draws no edge and a 38% surface-interaction fill, and keeps that look on hover.
+- The pressed filled button now darkens only slightly, so it keeps clear contrast with its label, and a loading or disabled button no longer lights up while pressed.
+- The button design mock draws the busy state with its spinner when `loading` is set.
+- The `tooltip()` design renderer keeps `et-surface--inherited` on the inner `et-tooltip`, like the real component, and puts `data-et-auto-surface` on the pane only.
+- The pressed filled icon button, and so the split button trigger, darkens less and keeps its disabled colour when inactive.
+- The notification takes `--et-font-family` when it is set, like the menu and the tooltip, and the notification design mock draws its surface one elevation above its parent when no `surface` is given, as the component forces elevation 1.
+- Table: the stamped feature cells inject their feature through a token, so no table file imports itself in a cycle.
+- The textarea design mock takes an `ariaLabel` for a field without a visible label.
+- Button, icon button, chip and calendar nav buttons no longer change their background on hover or press while disabled.
+- The `menu()` design mock takes `activeSource` on a row and draws it as `data-active-source`, so a forced focus-visible row with `activeSource: 'keyboard'` shows the keyboard highlight the real menu paints.
+- The notification dismiss icon now meets the 3:1 non-text contrast minimum at rest.
+- `et-select` and `et-menu` show the option focus ring only during keyboard use; a click open or a mouse move shows none.
+- Closing a query-param overlay no longer cancels a pending navigation that already drops its query param, such as a `routerLink` inside the overlay.
+- Escape that hides an `etTooltip` now also reaches the trigger's own key handlers; a dialog beneath it still stays open.
+
 ## 1.0.0-next.79
 
 ### Minor Changes

package/design/anchored-dialog.ts

@@ -0,0 +1,98 @@
+import { Placement } from '@floating-ui/dom';
+import overlayContainer from '../src/lib/overlay/overlay-container.component.css?inline';
+import overlayMain from '../src/lib/overlay/overlay-main-styles.component.css?inline';
+import anchoredDialogStrategy from '../src/lib/overlay/strategies/anchored-dialog-styles.component.css?inline';
+import overlayArrow from '../src/lib/overlay/strategies/overlay-arrow-styles.component.css?inline';
+
+export type AnchoredDialogMockOptions = {
+  /** The pane's content, as HTML. */
+  content: string;
+  /** Draws the `et-overlay-arrow` pointing back at the trigger. Defaults to `true`, like `anchoredDialogOverlayStrategy`. */
+  arrow?: boolean;
+  /** The side the pane opened on, which places the arrow. Defaults to `bottom-end`, the strategy's default. */
+  placement?: Placement;
+  /**
+   * A CSS selector of the drawn element the arrow points at, like `arrowAnchor` of the strategy. The design frame aims
+   * the arrow at its centre, and the render check reports a tip that misses it.
+   */
+  anchor?: string;
+  /** The pane's role. Defaults to `dialog`. */
+  role?: 'dialog' | 'alertdialog';
+  /** Draws `aria-modal="true"`. Defaults to `true`, as for a modal overlay; `false` for `mode: 'non-modal'`. */
+  modal?: boolean;
+  /** The id of the element that labels the pane. */
+  labelledBy?: string;
+  /** An `aria-label` for a pane without a visible title. */
+  label?: string;
+  /** A surface theme name the app registers. Left out, the pane takes the surface one elevation above its parent. */
+  surface?: string;
+  /** Extra attributes on the pane, e.g. design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `anchoredDialog()` draws with: the real overlay pane, anchored-dialog strategy and arrow CSS. */
+export const anchoredDialogStyles = /* @__PURE__ */ [
+  overlayContainer,
+  overlayMain,
+  anchoredDialogStrategy,
+  overlayArrow,
+  `@layer components {
+  .et-anchored-dialog-mock {
+    --_et-overlay-arrow-pane-border-width: var(--et-overlay-surface-border-width);
+    inline-size: max-content;
+    min-inline-size: 288px;
+    max-inline-size: 80vw;
+  }
+  .et-anchored-dialog-mock:is([data-overlay-placement^='top'], [data-overlay-placement^='bottom']) > .et-overlay-arrow {
+    left: calc(50% - 10px);
+  }
+  .et-anchored-dialog-mock:is([data-overlay-placement^='left'], [data-overlay-placement^='right']) > .et-overlay-arrow {
+    top: calc(50% - 10px);
+  }
+  .et-anchored-dialog-mock:is([data-overlay-placement$='-start']):is([data-overlay-placement^='top'], [data-overlay-placement^='bottom']) > .et-overlay-arrow {
+    left: 16px;
+  }
+  .et-anchored-dialog-mock:is([data-overlay-placement$='-end']):is([data-overlay-placement^='top'], [data-overlay-placement^='bottom']) > .et-overlay-arrow {
+    left: calc(100% - 36px);
+  }
+  .et-anchored-dialog-mock:is([data-overlay-placement$='-start']):is([data-overlay-placement^='left'], [data-overlay-placement^='right']) > .et-overlay-arrow {
+    top: 16px;
+  }
+  .et-anchored-dialog-mock:is([data-overlay-placement$='-end']):is([data-overlay-placement^='left'], [data-overlay-placement^='right']) > .et-overlay-arrow {
+    top: calc(100% - 36px);
+  }
+}`,
+].join('\n');
+
+/**
+ * Draws an open anchored dialog pane (`anchoredDialogOverlayStrategy`) around `content`, as HTML. The pane
+ * sits in flow instead of where the overlay runtime would position it, so place it next to the drawn trigger.
+ */
+export const anchoredDialog = (options: AnchoredDialogMockOptions) => {
+  const { placement = 'bottom-end', arrow = true, role = 'dialog', modal = true } = options;
+  const classes = [
+    'et-overlay',
+    'et-overlay-runtime-pane',
+    'et-overlay--anchored-dialog',
+    'et-anchored-dialog-mock',
+    'et-color--inherited',
+    options.surface && `et-surface--${options.surface}`,
+    'et-with-default-animation',
+    'et-animation-enter-done',
+  ].filter(Boolean);
+  const attributes = [
+    options.attributes,
+    !options.surface && 'data-et-auto-surface',
+    `role="${role}"`,
+    modal && 'aria-modal="true"',
+    'tabindex="-1"',
+    options.labelledBy && `aria-labelledby="${options.labelledBy}"`,
+    options.label && `aria-label="${options.label}"`,
+    `data-overlay-placement="${placement}"`,
+    options.anchor && `data-et-arrow-anchor="${options.anchor.replaceAll('"', '"')}"`,
+    `class="${classes.join(' ')}"`,
+  ].filter(Boolean);
+  const arrowMarkup = arrow ? '<div class="et-overlay-arrow" et-floating-arrow></div>' : '';
+
+  return `<et-overlay-container ${attributes.join(' ')}><div>${options.content}</div>${arrowMarkup}</et-overlay-container>`;
+};

package/design/button.ts

@@ -2,7 +2,9 @@ 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';
+import { BUTTON_SPINNER_CONFIG } from '../src/lib/button/button.types';
 import iconButtonBase from '../src/lib/button/icon-button.component.css?inline';
+import { spinner } from './loader';
 
 export type ButtonMockOptions = {
   /** The label, as HTML. */
@@ -10,6 +12,8 @@ export type ButtonMockOptions = {
   /** The icon, as HTML. Leave it out for a button without one. */
   icon?: string;
   iconAlignment?: 'start' | 'end';
+  /** Lets the label fill the space beside the icon, like `stretchContents` on `et-button`. */
+  stretchContents?: boolean;
   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. */
@@ -17,6 +21,8 @@ export type ButtonMockOptions = {
   /** Makes the button a toggle: `false` draws it unpressed, left out it is no toggle. */
   pressed?: boolean;
   disabled?: boolean;
+  /** Draws the busy button with its spinner, like `loading` on `et-button`. Needs `loaderStyles` from the loader mock. */
+  loading?: boolean;
   tag?: 'button' | 'a';
   class?: string;
   style?: string;
@@ -47,15 +53,21 @@ export const button = (options: ButtonMockOptions) => {
     options.pressed && 'data-pressed="true"',
     options.pressed !== undefined && `aria-pressed="${options.pressed}"`,
     options.disabled && (tag === 'button' ? 'disabled aria-disabled="true"' : 'aria-disabled="true"'),
+    options.loading && `data-loading="true" aria-busy="true"${options.disabled ? '' : ' aria-disabled="true"'}`,
     `data-icon-alignment="${iconAlignment}"`,
     `data-variant="${variant}"`,
     `data-size="${size}"`,
+    options.stretchContents && 'data-stretch-contents="true"',
     'data-can-animate="true"',
     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}>`;
+  const loader = options.loading
+    ? `<div class="et-button-loader" aria-hidden="true">${spinner(BUTTON_SPINNER_CONFIG[size]).replace('class="et-spinner', 'class="et-button-loader-spinner et-spinner')}</div>`
+    : '';
+
+  return `<${tag} ${attributes.join(' ')}>${iconAlignment === 'start' ? iconBox : ''}<div class="et-button-contents">${label}</div>${iconAlignment === 'end' ? iconBox : ''}${loader}</${tag}>`;
 };
 
 export type IconButtonMockOptions = Omit<ButtonMockOptions, 'label' | 'icon' | 'iconAlignment'> & {

package/design/config.json

@@ -16,7 +16,12 @@
       },
       "generatedFiles": [
         "foundations/colors/colors.css"
-      ]
+      ],
+      "harness": {
+        "app": "apps/docs-examples",
+        "map": "apps/docs-examples/src/app/design-harness/design-harness-parts.ts",
+        "baseBranch": "origin/next"
+      }
     }
   }
 }

package/design/dialog.ts

@@ -28,7 +28,7 @@ export type DialogMockOptions = {
   close?: boolean | string;
   /** As the body's `dividers` input. `dynamic` draws the body scrolled to its start. */
   dividers?: false | 'static' | 'dynamic';
-  /** A surface theme name the app registers, for the pane. */
+  /** A surface theme name the app registers, for the pane. Left out, the pane takes the surface one elevation above its parent. */
   surface?: string;
   /** Extra attributes on the pane, e.g. design markers. */
   attributes?: string;
@@ -49,6 +49,7 @@ export type AlertDialogMockOptions = {
   confirmAttributes?: string;
   /** Extra attributes on the cancel button. */
   cancelAttributes?: string;
+  /** A surface theme name the app registers, for the pane. Left out, the pane takes the surface one elevation above its parent. */
   surface?: string;
   attributes?: string;
   id?: string;
@@ -121,12 +122,13 @@ const pane = (
     'et-overlay-runtime-pane',
     'et-overlay--dialog',
     'et-color--inherited',
-    `et-surface--${options.surface ?? 'inherited'}`,
+    options.surface && `et-surface--${options.surface}`,
     'et-with-default-animation',
     'et-animation-enter-done',
-  ];
+  ].filter(Boolean);
   const attributes = [
     options.attributes,
+    !options.surface && 'data-et-auto-surface',
     `role="${options.role}"`,
     'aria-modal="true"',
     'tabindex="-1"',

package/design/form-field.ts

@@ -84,6 +84,8 @@ export type TextareaMockOptions = {
   /** Grows with its content, from `minRows` (default `rows`). On by default, like the real textarea. */
   autosize?: boolean;
   minRows?: number;
+  /** The native textarea's `aria-label`, for a field without a visible label. */
+  ariaLabel?: string;
 };
 
 /** The stylesheets `formField()`, `input()` and `textarea()` draw with: the real `et-form-field` CSS. */
@@ -144,6 +146,7 @@ export const textarea = (options: TextareaMockOptions = {}): FormFieldControlMoc
       state.invalid && 'aria-invalid="true"',
       state.describedBy && `aria-describedby="${state.describedBy}"`,
       state.labelId && `aria-labelledby="${state.labelId}"`,
+      options.ariaLabel && `aria-label="${options.ariaLabel}"`,
       `data-resize="${autosize ? 'none' : 'vertical'}"`,
       autosize && 'data-et-textarea-autosize=""',
       autosize && `style="--et-textarea-min-rows: ${options.minRows ?? rows}"`,

package/design/menu.ts

@@ -13,6 +13,8 @@ type MenuMockRowState = {
   disabled?: boolean;
   /** The menu's active item: the keyboard or the pointer points at it. */
   active?: boolean;
+  /** What made the row active. `keyboard` draws the keyboard highlight on a focus-visible row. */
+  activeSource?: 'keyboard' | 'pointer';
   /** Extra attributes on the row's element, e.g. design markers. */
   attributes?: string;
 };
@@ -48,7 +50,7 @@ export type MenuMockOptions = {
   id?: string;
   /** The app's default color theme name, as the menu syncs it from its trigger. */
   color?: string;
-  /** A surface theme name the app registers, for the panel. */
+  /** A surface theme name the app registers, for the panel. Left out, the panel takes the surface one elevation above its parent. */
   surface?: string;
 };
 
@@ -69,6 +71,7 @@ const rowAttributes = (row: MenuMockRowState) =>
     `tabindex="${row.active && !row.disabled ? 0 : -1}"`,
     row.disabled && 'aria-disabled="true"',
     row.active && 'data-active="true"',
+    row.active && row.activeSource && `data-active-source="${row.activeSource}"`,
   ].filter(Boolean);
 
 const menuItem = (row: MenuMockItem, submenuId: string) => {
@@ -136,8 +139,9 @@ export const menu = (options: MenuMockOptions) => {
   const classes = [
     'et-menu',
     `et-color--${options.color ?? 'inherited'}`,
-    `et-surface--${options.surface ?? 'inherited'}`,
-  ];
+    options.surface && `et-surface--${options.surface}`,
+  ].filter(Boolean);
+  const autoSurface = options.surface ? '' : ' data-et-auto-surface';
 
-  return `<et-menu id="et-menu-panel-${id}" class="${classes.join(' ')}" role="menu" aria-orientation="vertical" tabindex="-1"><div class="et-menu-header"><div class="et-menu-search-field"></div></div><div class="et-menu-body-wrapper"><div class="et-menu-body"><div class="et-menu-body-content">${options.rows.map(rowMarkup).join('')}</div></div></div></et-menu>`;
+  return `<et-menu id="et-menu-panel-${id}"${autoSurface} class="${classes.join(' ')}" role="menu" aria-orientation="vertical" tabindex="-1"><div class="et-menu-header"><div class="et-menu-search-field"></div></div><div class="et-menu-body-wrapper"><div class="et-menu-body"><div class="et-menu-body-content">${options.rows.map(rowMarkup).join('')}</div></div></div></et-menu>`;
 };

package/design/notification.ts

@@ -29,7 +29,10 @@ export type NotificationMockOptions = {
    * its type). Left out, the notification takes the color theme around it.
    */
   color?: string;
-  /** A surface theme name the app registers. Left out, the notification inherits it. */
+  /**
+   * A surface theme name the app registers. Left out, the notification takes the surface one elevation above its
+   * parent, as the component forces elevation 1 on the page.
+   */
   surface?: string;
   /** Extra attributes on the dismiss button, e.g. design markers. */
   dismissAttributes?: string;
@@ -117,11 +120,12 @@ export const notification = (options: NotificationMockOptions) => {
   const classes = [
     'et-notification',
     `et-color--${options.color ?? 'inherited'}`,
-    `et-surface--${options.surface ?? 'inherited'}`,
+    options.surface && `et-surface--${options.surface}`,
     'et-animation-enter-done',
-  ];
+  ].filter(Boolean);
+  const autoSurface = options.surface ? '' : ' data-et-auto-surface';
 
-  return `<et-notification ${options.attributes ?? ''} class="${classes.join(' ')}"><div class="et-notification-content">${header}${message}${footer}</div></et-notification>`;
+  return `<et-notification ${options.attributes ?? ''}${autoSurface} class="${classes.join(' ')}"><div class="et-notification-content">${header}${message}${footer}</div></et-notification>`;
 };
 
 /** Draws notifications in the stack's column and gap, in flow instead of fixed to the viewport. */

package/design/sdk/components/accordion/accordion.ts

@@ -56,9 +56,13 @@ export default definePart({
     shipping: { kind: 'button', input: ['pointer', 'keyboard'] },
     archive: { kind: 'button', input: ['pointer', 'keyboard'] },
   },
+  frame: (body) => `<div class="accordion-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="accordion-frame">${accordionGroup(items(props)).replaceAll('inert=""><div class="et-accordion-panel-clip"', 'inert=""><div data-et-skip="CLIPPED" class="et-accordion-panel-clip"')}</div>`,
+      body: accordionGroup(items(props)).replaceAll(
+        'inert=""><div class="et-accordion-panel-clip"',
+        'inert=""><div data-et-skip="CLIPPED" class="et-accordion-panel-clip"',
+      ),
       styles: [accordionStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/anchored-dialog/anchored-dialog.css

@@ -0,0 +1,63 @@
+.anchored-dialog-frame {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: var(--anchored-dialog-justify, flex-end);
+  padding: 1.6rem 3.2rem 2.4rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+.anchored-dialog-frame [data-et-anchor] {
+  position: relative;
+}
+
+.anchored-dialog-frame .et-anchored-dialog-mock {
+  margin-block-start: 1.2rem;
+}
+
+.anchored-dialog-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.8rem;
+  padding: 1.2rem 1.2rem 0.8rem;
+  border-block-end: 1px solid var(--et-surface-border-solid);
+  font-weight: 600;
+}
+
+.anchored-dialog-header > :last-child {
+  margin-inline-start: auto;
+  color: var(--et-surface-color-muted-solid);
+  font-size: 1.2rem;
+  font-weight: 400;
+}
+
+.anchored-dialog-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0.4rem 0;
+  list-style: none;
+}
+
+.anchored-dialog-list > li {
+  display: flex;
+  gap: 0.8rem;
+  align-items: baseline;
+  padding: 0.6rem 1.2rem;
+}
+
+.anchored-dialog-list label {
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+  flex: 1;
+}
+
+.anchored-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.8rem;
+  padding: 0.8rem 1.2rem 1.2rem;
+  border-block-start: 1px solid var(--et-surface-border-solid);
+}

package/design/sdk/components/anchored-dialog/anchored-dialog.ts

@@ -0,0 +1,75 @@
+import { anchoredDialog, anchoredDialogStyles } from '@ethlete/components/design/anchored-dialog';
+import { definePart, drawing } from '@design-system';
+import button from '@system/components/button';
+import edge from './anchored-dialog.css?inline';
+
+type Props = {
+  kind?: 'open-points' | 'filter';
+  content?: string;
+  label?: string;
+  placement?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+  arrow?: boolean;
+  anchor?: string;
+  modal?: boolean;
+};
+
+const POINTS = ['Hover on the tonal button', 'Focus ring in dark mode', 'Disabled outline'];
+
+const openPoints =
+  () => `<header class="anchored-dialog-header"><span>Open points</span><span>components/button</span></header>
+<ul class="anchored-dialog-list">${POINTS.map((point) => `<li><span>${point}</span></li>`).join('')}</ul>`;
+
+const FILTERS = [
+  { label: 'Ready', checked: true },
+  { label: 'Open sketch', checked: false },
+  { label: 'Has comments', checked: true },
+];
+
+const filter = (apply: string) => `<header class="anchored-dialog-header"><span>Filter</span></header>
+<ul class="anchored-dialog-list">${FILTERS.map(
+  ({ label, checked }) =>
+    `<li><label><input type="checkbox" data-et-control="option"${checked ? ' checked' : ''} />${label}</label></li>`,
+).join('')}</ul>
+<footer class="anchored-dialog-footer">${apply}</footer>`;
+
+export default definePart({
+  note: 'An open popover anchored to its trigger: surface pane, arrow, free content',
+  madeBy: ['claude-sonnet-5-5', 'claude-opus-5-5'],
+  states: {
+    'open-points': { kind: 'open-points', modal: false },
+    filter: { kind: 'filter', placement: 'bottom-start' },
+    'no-arrow': { kind: 'filter', placement: 'bottom-start', arrow: false },
+    'top-start': { kind: 'open-points', placement: 'top-start', modal: false },
+  },
+  widths: [480],
+  controls: {
+    option: { kind: 'row', input: ['pointer', 'keyboard'] },
+    apply: { kind: 'button', part: 'components/button' },
+  },
+  frame: (body, { placement = 'bottom-end' }) =>
+    `<div class="anchored-dialog-frame" style="--anchored-dialog-justify:${placement.endsWith('start') ? 'flex-start' : 'flex-end'}"><div data-et-anchor>${body}</div></div>`,
+  render: async ({
+    kind = 'open-points',
+    content,
+    label,
+    placement = 'bottom-end',
+    arrow,
+    anchor,
+    modal = true,
+  }: Props) => {
+    const apply = await button.render({ label: 'Apply', variant: 'filled' });
+    const pane = content ?? (kind === 'filter' ? filter(apply.body) : openPoints());
+
+    return drawing({
+      body: anchoredDialog({
+        label: label ?? (kind === 'filter' ? 'Filter' : 'Open points'),
+        placement,
+        arrow,
+        anchor,
+        modal,
+        content: pane,
+      }),
+      styles: [anchoredDialogStyles, apply.styles, edge].join('\n'),
+    });
+  },
+});

package/design/sdk/components/avatar/avatar.ts

@@ -67,12 +67,13 @@ export default definePart({
     },
   },
   widths: [480],
+  frame: (body) => `<div class="avatar-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="avatar-frame">${avatarRow([
+      body: avatarRow([
         ...(props.avatars ?? []).map((each) => avatar(each)),
         ...(props.groups ?? []).map((each) => avatarGroup(each.avatars, each.maxVisible)),
-      ])}</div>`,
+      ]),
       styles: [avatarStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/badge/badge.ts

@@ -44,9 +44,10 @@ export default definePart({
     'outline-sizes': sizes('outline'),
   },
   widths: [480],
+  frame: (body) => `<div class="badge-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="badge-frame">${badgeRow(props.badges.map((each) => badge(each)))}</div>`,
+      body: badgeRow(props.badges.map((each) => badge(each))),
       styles: [badgeStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/banner/banner.ts

@@ -79,9 +79,10 @@ export default definePart({
     close: { kind: 'button', input: ['pointer', 'keyboard'] },
     action: { kind: 'button', input: ['pointer', 'keyboard'] },
   },
+  frame: (body) => `<div class="banner-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="banner-frame">${render(props)}</div>`,
+      body: render(props),
       styles: [bannerStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/bracket/bracket.ts

@@ -135,9 +135,10 @@ export default definePart({
     ],
   },
   widths: [1040, 1680],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="t-frame">${render(props)}</div>`,
+      body: render(props),
       styles: [bracketStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/breadcrumb/breadcrumb.ts

@@ -73,9 +73,10 @@ export default definePart({
     link: { kind: 'button', input: ['pointer', 'keyboard'] },
     overflow: { kind: 'disclosure', input: ['pointer', 'keyboard'], surfaces: { body: 'overflow-open' } },
   },
+  frame: (body) => `<div class="breadcrumb-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="breadcrumb-frame">${props.long ? longMarkup(props) : breadcrumb({ crumbs: shortTrail(props) })}</div>`,
+      body: props.long ? longMarkup(props) : breadcrumb({ crumbs: shortTrail(props) }),
       styles: [breadcrumbStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/button/button.css

@@ -3,16 +3,24 @@
     --_et-focus-ring-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
   }
 
+  .et-button:where([data-variant='filled']):not([disabled], [aria-disabled='true']):active {
+    --_et-button-background: color-mix(
+      in srgb,
+      rgb(var(--et-color-primary)) 96%,
+      var(--et-theme-color-on-primary-solid)
+    );
+  }
+
   .et-icon-button:where([data-variant='filled']) {
     --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
 
     @media (hover: hover) {
-      &:hover {
+      &:not([disabled], [aria-disabled='true']):hover {
         --et-theme-color-primary-rgb: var(--et-color-primary-active);
       }
     }
 
-    &:active {
+    &:not([disabled], [aria-disabled='true']):active {
       --_et-button-background: color-mix(
         in srgb,
         var(--et-theme-color-primary-solid) 84%,
@@ -25,7 +33,7 @@
     box-shadow: var(--et-button-shadow, none);
 
     @media (hover: hover) {
-      &:hover {
+      &:not([disabled], [aria-disabled='true']):hover {
         --et-theme-color-primary-opacity: 1;
       }
     }

package/design/sdk/components/button/button.ts

@@ -7,6 +7,7 @@ import {
   iconButtonStyles,
 } from '@ethlete/components/design/button';
 import { iconMarkup } from '@ethlete/components/design/icon';
+import { loaderStyles } from '@ethlete/components/design/loader';
 import { SDK_ICONS } from '@ethlete/components/design/icon-set';
 import { definePart, drawing, forceInteraction, interactionRows } from '@design-system';
 import hover from './button.css?inline';
@@ -19,12 +20,18 @@ type Props = (ButtonMockOptions | IconOnly) & { interaction?: ButtonInteraction
 
 const control = ({ interaction, ...options }: Props) => {
   const drawn = 'iconOnly' in options ? iconButton(options) : button(options);
-  const markup = drawn.replace(/^<(button|a) /, '<$1 data-et-control="button" data-can-animate ');
+  const markup = drawn
+    .replace(/^<(button|a) /, '<$1 data-et-control="button" data-can-animate ')
+    .replace('<div class="et-button-loader"', '<div class="et-button-loader" data-et-skip="CLIPPED"');
 
   return interaction ? forceInteraction(markup, interaction) : markup;
 };
 
-const plus = iconMarkup(SDK_ICONS.find((each) => each.name === 'et-plus')!);
+const fail = (message: string): never => {
+  throw new Error(message);
+};
+
+const plus = iconMarkup(SDK_ICONS.find((each) => each.name === 'et-plus') ?? fail('SDK_ICONS has no et-plus'));
 const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
 const VARIANTS = ['filled', 'outline', 'tonal', 'transparent'] as const;
 type Size = (typeof SIZES)[number];
@@ -70,13 +77,19 @@ export const grid = {
 
 export default definePart({
   note: 'scale of the decided shape, Q182, lead merge',
-  madeBy: ['claude-opus-5-5', 'claude-sonnet-5-5'],
+  madeBy: ['claude-opus-5-5', 'claude-sonnet-5-5', 'design check'],
   states,
   grid,
   controls: { button: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true } },
   render: (props: Props) =>
     drawing({
       body: control(props),
-      styles: ['iconOnly' in props ? iconButtonStyles : buttonStyles, hover].join('\n'),
+      styles: [
+        'iconOnly' in props ? iconButtonStyles : buttonStyles,
+        hover,
+        !('iconOnly' in props) && props.loading && loaderStyles,
+      ]
+        .filter(Boolean)
+        .join('\n'),
     }),
 });

package/design/sdk/components/calendar/calendar.ts

@@ -88,9 +88,10 @@ export default definePart({
     'long-label': { compact: true, selected: true },
   },
   widths: [480],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="t-frame">${render(props)}</div>`,
+      body: render(props),
       styles: [calendarStyles, frame].join('\n'),
     }),
 });