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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # 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

package/design/anchored-dialog.ts

@@ -11,6 +11,11 @@ export type AnchoredDialogMockOptions = {
   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'`. */
@@ -84,6 +89,7 @@ export const anchoredDialog = (options: AnchoredDialogMockOptions) => {
     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>' : '';

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

@@ -9,6 +9,7 @@ type Props = {
   label?: string;
   placement?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
   arrow?: boolean;
+  anchor?: string;
   modal?: boolean;
 };
 
@@ -47,7 +48,15 @@ export default definePart({
   },
   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, modal = true }: Props) => {
+  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());
 
@@ -56,6 +65,7 @@ export default definePart({
         label: label ?? (kind === 'filter' ? 'Filter' : 'Open points'),
         placement,
         arrow,
+        anchor,
         modal,
         content: pane,
       }),

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

@@ -27,7 +27,11 @@ const control = ({ interaction, ...options }: Props) => {
   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];
@@ -73,7 +77,7 @@ 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 } },

package/design/sdk/components/select/shared/select-part.ts

@@ -6,6 +6,7 @@ type FieldInteraction = 'hover' | 'active' | 'focus-visible';
 
 export type SelectProps = {
   label?: string;
+  ariaLabel?: string;
   options?: { value: string; label: string }[];
   value?: string;
   open?: boolean;
@@ -76,6 +77,7 @@ export const selectBody = (props: SelectProps) =>
         value: props.value,
         active: props.active,
         placeholder: 'Pick a status',
+        ariaLabel: props.ariaLabel,
       }),
     }),
     props,

package/design/sdk/lint-baseline.json

@@ -0,0 +1,6 @@
+{
+  "components/breadcrumb/breadcrumb.ts": { "@typescript-eslint/no-non-null-assertion": 1 },
+  "components/tabs/tabs.ts": { "@typescript-eslint/no-non-null-assertion": 1 },
+  "components/timeline/timeline.ts": { "@typescript-eslint/no-non-null-assertion": 1 },
+  "components/toolbar/toolbar.ts": { "@typescript-eslint/no-non-null-assertion": 1 }
+}

package/design/sdk/pictures.json

@@ -23,14 +23,15 @@
     }
   },
   "components/anchored-dialog": {
-    "review": {
-      "hash": "02e3cce0bd8f11b6",
+    "record": {
+      "hash": "15ba4525ab01bffc",
       "states": {
         "open-points": "226f8135b514b073",
         "filter": "3ecf9f95f7739891",
         "no-arrow": "a071879be802f635",
         "top-start": "afe5a3fd876a51e4"
       },
+      "partHash": "1e60e9f9e74b4c91",
       "slots": true
     }
   },
@@ -1179,5 +1180,16 @@
       },
       "slots": true
     }
+  },
+  "foundations/icons": {
+    "record": {
+      "hash": "8f54284f202642c8",
+      "states": {
+        "catalogue": "4e2a1394b85b1546",
+        "construction": "be42f54e25b07e1f"
+      },
+      "partHash": "693a3ae986c6ad3f",
+      "slots": true
+    }
   }
 }

package/design/sdk/ready.json

@@ -0,0 +1,64 @@
+{
+  "foundations/colors": {
+    "hash": "90cda4cd58b51ef5",
+    "files": {
+      ".ethlete/design/sdk/foundations/colors/colors.ts": "5f21e1f2948db378",
+      ".ethlete/design/sdk/foundations/colors/overrides.json": "37529d9089744c64",
+      ".ethlete/design/sdk/foundations/colors/shared/contrast.ts": "b93de9afab5a930e"
+    },
+    "at": "2026-11-08T14:57:09.725Z",
+    "by": "et design check",
+    "cmd": "design check",
+    "pid": 1454598
+  },
+  "foundations/elevation": {
+    "hash": "097c0586609d90ad",
+    "files": {
+      ".ethlete/design/sdk/foundations/elevation/elevation.css": "f2f220dfb86a39c2",
+      ".ethlete/design/sdk/foundations/elevation/elevation.ts": "db933f910ada1a89",
+      ".ethlete/design/sdk/foundations/elevation/shared/elevation/scene.css": "1f8f38c213e70f13",
+      ".ethlete/design/sdk/foundations/elevation/shared/elevation/scene.ts": "936205798eb8c95c",
+      "libs/components/design/form-field.ts": "6910b0bf23eb0f3c",
+      "libs/components/design/icon.ts": "829a95253b948ba9",
+      "libs/components/design/select.ts": "d9dba51f6cbeb2df",
+      "libs/components/src/lib/forms/form-field/form-field-control-suffix-styles.component.css": "cc2cea40f4a0f4ae",
+      "libs/components/src/lib/forms/form-field/form-field-suffix-overlap-styles.component.css": "74e1b9ee85a9cc51",
+      "libs/components/src/lib/forms/form-field/form-field-text-shell-styles.component.css": "2eac704dfac0a6aa",
+      "libs/components/src/lib/forms/form-field/form-field.component.css": "4063eb2012233778",
+      "libs/components/src/lib/forms/form-field/headless/label.directive.css": "c010d55fd205c6fa",
+      "libs/components/src/lib/forms/form-field/hint.component.css": "d2c4f0ec2ef6bac4",
+      "libs/components/src/lib/forms/input/input.component.css": "02a190d06c08aa88",
+      "libs/components/src/lib/forms/select/select-all-option.component.css": "79b5a2ae71dbd24b",
+      "libs/components/src/lib/forms/select/select-option-group.component.css": "b6451eacb9b026b3",
+      "libs/components/src/lib/forms/select/select-option-styles.component.css": "24a12532fc82fb09",
+      "libs/components/src/lib/forms/select/select-panel.component.css": "b85bb18bab2890e3",
+      "libs/components/src/lib/forms/select/select.component.css": "fa54cb1b79ba643b",
+      "libs/components/src/lib/forms/textarea/textarea-autosize-styles.component.css": "27aa7dd9c197e96d",
+      "libs/components/src/lib/forms/textarea/textarea.component.css": "e1e6b6061ab5c476",
+      "libs/components/src/lib/icon/headless/check-icon.ts": "6a14df4cc853b42d",
+      "libs/components/src/lib/icon/headless/chevron-icon.ts": "d2c88d30d687a8bf",
+      "libs/components/src/lib/icon/headless/icon-definition.ts": "180b7ea77305a404",
+      "libs/components/src/lib/icon/headless/icon-styles.component.css": "c137a7a10599dc3f",
+      "libs/components/src/lib/icon/headless/times-icon.ts": "52047c20b1cf421d",
+      "libs/core/design/interactive-styles.ts": "781528322bd34499",
+      "libs/core/src/lib/theming/color-interactive-styles.component.css": "8baece3a25375ed8",
+      "libs/core/src/lib/theming/surface-interactive-styles.component.css": "944cbb76b1d15611"
+    },
+    "at": "2026-11-08T14:57:09.841Z",
+    "by": "et design check",
+    "cmd": "design check",
+    "pid": 1454598
+  },
+  "foundations/icons": {
+    "hash": "8f54284f202642c8",
+    "files": {
+      ".ethlete/design/sdk/foundations/icons/icons.ts": "92fe04df2b6735e5",
+      "libs/components/design/icon-set.ts": "2aab551c1dd9aedc",
+      "libs/components/src/lib/icon/headless/icon-definition.ts": "180b7ea77305a404"
+    },
+    "at": "2026-11-08T14:57:09.936Z",
+    "by": "et design check",
+    "cmd": "design check",
+    "pid": 1454598
+  }
+}

package/design/sdk/rule-baseline.json

@@ -0,0 +1,104 @@
+{
+  "OFF-CENTRE": {
+    "components/button: size-lg at fitted: button[data-et-part=components/button]": {
+      "finding": "628",
+      "sketch": "components/button@off-centre"
+    },
+    "components/button: size-xl at fitted: button[data-et-part=components/button]": {
+      "finding": "628",
+      "sketch": "components/button@off-centre"
+    },
+    "components/chart: pie-tooltip at 480px: div.et-tooltip-mock-frame > div.et-overlay > et-tooltip.et-tooltip > div.et-tooltip__surface": {
+      "finding": "631",
+      "sketch": "components/chart@off-centre"
+    },
+    "components/pagination: current at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: current-active at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: current-focus-visible at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: current-hover at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: few at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: first at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: last at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: links at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > a.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: middle at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: page at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: page-active at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: page-focus-visible at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: page-hover at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: range at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/pagination: sm at 480px: et-pagination[data-et-part=components/pagination] > ul.et-pagination-list > li.et-pagination-item > button.et-surface-interactive": {
+      "finding": "629",
+      "sketch": "components/pagination@off-centre"
+    },
+    "components/scrollable: vertical-border-mask at 480px: et-scrollable.et-scrollable > div.et-scrollable-wrapper > div.et-scrollable-container > button.et-scrollable-item": {
+      "finding": "630",
+      "sketch": "components/scrollable@off-centre"
+    },
+    "components/scrollable: vertical-end at 480px: et-scrollable.et-scrollable > div.et-scrollable-wrapper > div.et-scrollable-container > button.et-scrollable-item": {
+      "finding": "630",
+      "sketch": "components/scrollable@off-centre"
+    },
+    "components/scrollable: vertical-middle at 480px: et-scrollable.et-scrollable > div.et-scrollable-wrapper > div.et-scrollable-container > button.et-scrollable-item": {
+      "finding": "630",
+      "sketch": "components/scrollable@off-centre"
+    },
+    "components/scrollable: vertical-navigation at 480px: et-scrollable.et-scrollable > div.et-scrollable-wrapper > div.et-scrollable-container > button.et-scrollable-item": {
+      "finding": "630",
+      "sketch": "components/scrollable@off-centre"
+    },
+    "components/scrollable: vertical-start at 480px: et-scrollable.et-scrollable > div.et-scrollable-wrapper > div.et-scrollable-container > button.et-scrollable-item": {
+      "finding": "630",
+      "sketch": "components/scrollable@off-centre"
+    },
+    "components/skeleton: in-text at 480px: div.skeleton-frame": {
+      "finding": "633",
+      "sketch": "components/skeleton@off-centre"
+    },
+    "components/table: group-header at 480px: et-table[data-et-part=components/table] > div.et-table > et-table-group-header-row.et-table-group-row > div.et-table-group-cell": {
+      "finding": "632",
+      "sketch": "components/table@off-centre"
+    }
+  }
+}

package/design/select.ts

@@ -56,6 +56,8 @@ export type SelectMockOptions = {
   panelColor?: string;
   /** A surface theme name the app registers, for the panel. Left out, the panel takes the surface one elevation above its parent. */
   panelSurface?: string;
+  /** The trigger's `aria-label`, for a select without a visible label. */
+  ariaLabel?: string;
 };
 
 /** The stylesheets `formField()` with a `select()` control draws with: the real `et-select` CSS. */
@@ -158,7 +160,8 @@ export const select = (options: SelectMockOptions): FormFieldControlMock => {
         'role="combobox"',
         'aria-haspopup="listbox"',
         `aria-expanded="${state.open}"`,
-        `aria-labelledby="${[state.labelId, triggerId].filter(Boolean).join(' ')}"`,
+        options.ariaLabel && `aria-label="${options.ariaLabel}"`,
+        state.labelId && `aria-labelledby="${state.labelId} ${triggerId}"`,
         `tabindex="${state.disabled ? -1 : 0}"`,
         state.disabled && 'aria-disabled="true" data-disabled="true"',
         state.open && activeIndex >= 0 && `aria-activedescendant="et-select-option-${state.id}-${activeIndex}"`,