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

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

@@ -38,7 +38,7 @@ export type SelectPanelMockOptions = {
   multiple?: boolean;
   /** The app's default color theme name: the panel provides it to the options. */
   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;
 };
 
@@ -54,8 +54,10 @@ export type SelectMockOptions = {
   clearLabel?: string;
   /** The app's default color theme name: the panel provides it to the options. */
   panelColor?: 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. */
   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. */
@@ -122,10 +124,11 @@ export const selectPanel = (options: SelectPanelMockOptions) => {
     'et-select-panel',
     'et-color--inherited',
     options.color && `et-color--${options.color}`,
-    `et-surface--${options.surface ?? 'inherited'}`,
+    options.surface && `et-surface--${options.surface}`,
   ].filter(Boolean);
+  const autoSurface = options.surface ? '' : ' data-et-auto-surface';
 
-  return `<et-select-panel class="${classes.join(' ')}"><div class="et-select-panel-scroller et-scrollbar-host"><div class="et-select-panel-body"><div ${listbox.join(' ')}>${options.content}</div><div class="et-select-panel-extras"></div></div></div><et-scrollbar class="et-scrollbar" data-orientation="vertical"><div class="et-scrollbar-thumb"></div></et-scrollbar></et-select-panel>`;
+  return `<et-select-panel${autoSurface} class="${classes.join(' ')}"><div class="et-select-panel-scroller et-scrollbar-host"><div class="et-select-panel-body"><div ${listbox.join(' ')}>${options.content}</div><div class="et-select-panel-extras"></div></div></div><et-scrollbar class="et-scrollbar" data-orientation="vertical"><div class="et-scrollbar-thumb"></div></et-scrollbar></et-select-panel>`;
 };
 
 /**
@@ -157,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}"`,

package/design/textarea.ts

@@ -37,6 +37,7 @@ export const textareaField = (options: TextareaFieldMockOptions = {}) => {
     mixed,
     mixedLabel = 'Mixed',
     force,
+    ariaLabel,
     ...field
   } = options;
   const forced = forceList(force);
@@ -47,6 +48,7 @@ export const textareaField = (options: TextareaFieldMockOptions = {}) => {
     rows,
     autosize,
     minRows,
+    ariaLabel,
   });
 
   let html = formField({

package/design/tooltip.ts

@@ -11,7 +11,7 @@ export type TooltipMockOptions = {
   content?: string;
   /** The side the pane opened on; the arrow points back at the trigger. Defaults to `top`. */
   placement?: Placement;
-  /** A surface theme name the app registers. */
+  /** A surface theme name the app registers. Left out, the pane takes the surface one elevation above its parent. */
   surface?: string;
   /** The tooltip id, which the trigger's `aria-describedby` points at. */
   id?: string;
@@ -58,7 +58,7 @@ export const tooltipStyles = /* @__PURE__ */ [
  */
 export const tooltip = (options: TooltipMockOptions = {}) => {
   const { placement = 'top', id = 'et-tooltip-1' } = options;
-  const surface = `et-surface--${options.surface ?? 'inherited'}`;
+  const surface = options.surface && `et-surface--${options.surface}`;
   const hasTemplate = options.content !== undefined;
 
   const paneClasses = [
@@ -71,17 +71,17 @@ export const tooltip = (options: TooltipMockOptions = {}) => {
     surface,
     'et-with-default-animation',
     'et-animation-enter-done',
-  ];
+  ].filter(Boolean);
 
   const tooltipAttributes = [
     options.attributes,
     'role="tooltip"',
-    `class="et-tooltip et-color--inherited ${surface}"`,
+    `class="et-tooltip et-color--inherited ${surface ?? 'et-surface--inherited'}"`,
     `id="${id}"`,
     hasTemplate && 'data-has-template="true"',
   ].filter(Boolean);
 
   const body = hasTemplate ? options.content : `<p class="et-tooltip__text">${options.text ?? ''}</p>`;
 
-  return `<div class="et-tooltip-mock-frame"><div class="${paneClasses.join(' ')}" data-overlay-placement="${placement}"><et-tooltip ${tooltipAttributes.join(' ')}><div class="et-tooltip__surface"><div class="et-tooltip__content">${body}</div></div></et-tooltip><div et-floating-arrow class="et-overlay-arrow"></div></div></div>`;
+  return `<div class="et-tooltip-mock-frame"><div class="${paneClasses.join(' ')}" data-overlay-placement="${placement}"${surface ? '' : ' data-et-auto-surface'}><et-tooltip ${tooltipAttributes.join(' ')}><div class="et-tooltip__surface"><div class="et-tooltip__content">${body}</div></div></et-tooltip><div et-floating-arrow class="et-overlay-arrow"></div></div></div>`;
 };