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

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,7 +54,7 @@ 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;
 };
 
@@ -122,10 +122,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>`;
 };
 
 /**

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>`;
 };