@kubex/zinc 1.1.184 → 2.0.0

package/src/components/editor/modules/toolbar/toolbar.component.ts

@@ -1,5 +1,5 @@
 import {colorDataProvider} from "../../../data-select/providers/color-data-provider";
-import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from "lit";
+import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from "lit";
 import {property, query, queryAll} from "lit/decorators.js";
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import ZincElement from "../../../../internal/zinc-element";
@@ -28,9 +28,18 @@ export default class ToolbarComponent extends ZincElement {
 
   private _featureConfig: EditorFeatureConfig = {};
   private _resizeId: number | null = null;
+  // Toolbar widths [min, max) over which the current split of visible and overflowed groups still holds
+  private _fitRange: [number, number] | null = null;
+  // Group widths from the last full measure, so a resize can re-split the groups without forcing a layout
+  private _measured: { groups: HTMLElement[]; widths: number[]; overflowWidth: number | null } | null = null;
 
+  // Dragging a pane resizes this every frame; re-measuring each time costs Safari a forced layout of the page
   private readonly _resizeObserver = new ResizeController(this, {
-    callback: () => this.handleResize(),
+    callback: entries => {
+      const width = entries.find(entry => entry.target === this)?.borderBoxSize?.[0]?.inlineSize;
+      if (width !== undefined && this._fitRange && width >= this._fitRange[0] && width < this._fitRange[1]) return;
+      this.handleResize(width);
+    },
   });
 
   // Tracks DOM nodes (e.g. emoji/date pickers) temporarily moved into the overflow submenu so we can restore them
@@ -38,7 +47,6 @@ export default class ToolbarComponent extends ZincElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.containerWidth = this.offsetWidth;
     if (this.parentElement) {
       this._resizeObserver.observe(this.parentElement);
     }
@@ -58,22 +66,33 @@ export default class ToolbarComponent extends ZincElement {
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
 
-    this.containerWidth = this.getToolbarWidth();
     this.updateEmptyGroups();
 
     const slotElement = this.renderRoot?.querySelector('slot') as HTMLSlotElement | null;
-    slotElement?.addEventListener('slotchange', () => this.calculateOverflow());
+    slotElement?.addEventListener('slotchange', () => this.handleResize());
 
-    this.updateComplete.then(() => this.calculateOverflow());
+    this.handleResize();
   }
 
-  handleResize = () => {
-    this.containerWidth = this.getToolbarWidth();
+  // The resize controller re-renders on every observation, so only a real property change can alter the groups
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if ([...changedProperties.keys()].some(key => key !== 'containerWidth')) {
+      this._measured = null;
+    }
+  }
+
+  // Measuring forces a synchronous layout (tens of ms in Safari on large pages), so batch it to once per frame.
+  // A width (from the resize observer) reuses the last measured group widths; no width measures again.
+  handleResize = (width?: number) => {
+    if (width === undefined) {
+      this._measured = null;
+    }
     if (this._resizeId !== null) {
       cancelAnimationFrame(this._resizeId);
     }
     this._resizeId = requestAnimationFrame(() => {
-      this.calculateOverflow();
+      this.calculateOverflow(width);
       this._resizeId = null;
     });
   }
@@ -172,34 +191,27 @@ export default class ToolbarComponent extends ZincElement {
     });
   }
 
-  private calculateOverflow() {
+  private calculateOverflow(width?: number) {
+    this._fitRange = null;
+    if (this._featureConfig.compact) return;
     const groups = Array.from(this._groups || []);
     if (!groups.length) return;
 
     this.restoreMovedContent();
-    this.updateEmptyGroups();
-
-    const nonOverflowGroups = groups.filter(group => !group.classList.contains('toolbar__group--overflow') && !group.classList.contains('toolbar__group--empty'));
-
-    nonOverflowGroups.forEach(group => {
-      group.style.display = 'flex';
-      group.classList.remove('toolbar__group--hidden', 'toolbar__group--has-prev-visible');
-    });
-
-    if (this._overflowGroup) {
-      this._overflowGroup.style.display = 'none';
-      this._overflowGroup.classList.remove('toolbar__group--hidden', 'toolbar__group--has-prev-visible');
+    if (width === undefined || !this._measured) {
+      width = this.measureGroups(groups);
     }
+    this.containerWidth = width;
 
-    const containerWidth = this.getToolbarWidth();
-
-    if (!containerWidth || containerWidth <= 0) {
-      nonOverflowGroups.forEach(group => (group.style.display = 'flex'));
+    if (!this._measured || width <= 0) {
+      groups.forEach(group => {
+        if (!group.classList.contains('toolbar__group--overflow') && !group.classList.contains('toolbar__group--empty')) {
+          group.style.display = 'flex';
+        }
+      });
       if (this._overflowGroup) {
         this._overflowGroup.style.display = 'none';
       }
-
-      this.restoreMovedContent();
       if (this._overflowMenu) {
         this._overflowMenu.innerHTML = '';
       }
@@ -209,65 +221,74 @@ export default class ToolbarComponent extends ZincElement {
       return;
     }
 
-    let used = 0;
-    let visibleCount = 0;
+    this.layoutGroups(width);
+  }
 
-    for (const group of nonOverflowGroups) {
-      const width = group.offsetWidth;
-      if (used + width <= containerWidth) {
-        used += width;
-        visibleCount++;
-      } else {
-        break;
-      }
-    }
+  /** Shows every group and records their widths. Returns the toolbar width. */
+  private measureGroups(groups: HTMLElement[]): number {
+    this._measured = null;
+    this.updateEmptyGroups();
 
-    if (visibleCount >= nonOverflowGroups.length) {
-      nonOverflowGroups.forEach(group => (group.style.display = 'flex'));
-      if (this._overflowGroup) {
-        this._overflowGroup.style.display = 'none';
-      }
+    const visibleGroups = groups.filter(group => !group.classList.contains('toolbar__group--overflow') && !group.classList.contains('toolbar__group--empty'));
+    visibleGroups.forEach(group => {
+      group.style.display = 'flex';
+      group.classList.remove('toolbar__group--hidden', 'toolbar__group--has-prev-visible');
+    });
 
-      this.restoreMovedContent();
-      if (this._overflowMenu) {
-        this._overflowMenu.innerHTML = '';
-      }
+    if (this._overflowGroup) {
+      this._overflowGroup.style.display = 'none';
+      this._overflowGroup.classList.remove('toolbar__group--hidden', 'toolbar__group--has-prev-visible');
+    }
 
-      this._updateDividerClasses();
-      this._dispatchOverflowEvent();
-      return;
+    const containerWidth = this.getToolbarWidth();
+    if (containerWidth > 0) {
+      this._measured = {groups: visibleGroups, widths: visibleGroups.map(group => group.offsetWidth), overflowWidth: null};
     }
+    return containerWidth;
+  }
 
-    const overflowTriggerWidth = this.getOverflowGroupWidth();
-    used = 0;
-    visibleCount = 0;
-    for (const group of nonOverflowGroups) {
-      const width = group.offsetWidth;
-      if (used + width + overflowTriggerWidth <= containerWidth) {
-        used += width;
+  /** Shows the leading groups that fit `width` and moves the rest into the overflow menu. */
+  private layoutGroups(width: number) {
+    const measured = this._measured!;
+    const {groups, widths} = measured;
+    const total = widths.reduce((sum, groupWidth) => sum + groupWidth, 0);
+
+    let visibleCount = groups.length;
+    if (total > width) {
+      measured.overflowWidth ??= this.getOverflowGroupWidth();
+      const overflowWidth = measured.overflowWidth;
+      let used = 0;
+      visibleCount = 0;
+      for (const groupWidth of widths) {
+        if (used + groupWidth + overflowWidth > width) break;
+        used += groupWidth;
         visibleCount++;
-      } else {
-        break;
       }
+      this._fitRange = [
+        visibleCount ? used + overflowWidth : 0,
+        Math.min(total, used + widths[visibleCount] + overflowWidth),
+      ];
+    } else {
+      this._fitRange = [total, Infinity];
     }
 
-    nonOverflowGroups.forEach((group, index) => {
-      group.style.display = index < visibleCount ? 'flex' : 'none';
-    });
-
-    nonOverflowGroups.forEach((group, index) => {
+    groups.forEach((group, index) => {
       const hidden = index >= visibleCount;
+      group.style.display = hidden ? 'none' : 'flex';
       group.classList.toggle('toolbar__group--hidden', hidden);
     });
 
     if (this._overflowGroup) {
-      this._overflowGroup.style.display = 'flex';
+      this._overflowGroup.style.display = visibleCount < groups.length ? 'flex' : 'none';
     }
 
     this._updateDividerClasses();
 
-    const hiddenGroups = nonOverflowGroups.slice(visibleCount);
-    this.populateOverflowMenu(hiddenGroups);
+    if (visibleCount < groups.length) {
+      this.populateOverflowMenu(groups.slice(visibleCount));
+    } else if (this._overflowMenu) {
+      this._overflowMenu.innerHTML = '';
+    }
 
     this._dispatchOverflowEvent();
   }
@@ -388,6 +409,7 @@ export default class ToolbarComponent extends ZincElement {
             return !isTrigger && !isMenu;
           });
 
+          submenu.classList.add('toolbar__submenu--picker');
           const wrapper = document.createElement('div');
           wrapper.className = 'toolbar__submenu-content';
           contentCandidates.forEach((element: HTMLElement) => this.moveContentTo(element, wrapper));
@@ -464,6 +486,10 @@ export default class ToolbarComponent extends ZincElement {
   }
 
   render() {
+    if (this._featureConfig.compact) {
+      return this._compactToolbar();
+    }
+
     const showInsertOptions = this._featureConfig.dividersEnabled ||
       this._featureConfig.linksEnabled ||
       this._featureConfig.attachmentsEnabled ||
@@ -543,6 +569,33 @@ export default class ToolbarComponent extends ZincElement {
       </zn-dropdown>`;
   }
 
+  private _compactToolbar() {
+    const button = (icon: string, label: string, format: string, type = '') => html`
+      <zn-button class="toolbar__format-button" icon-button="small" plain icon="${icon}" icon-size="16"
+                 tooltip="${label}" data-format="${format}"
+                 data-format-type="${type || nothing}"></zn-button>`;
+
+    return html`
+      <div class="toolbar toolbar--compact">
+        <div class="toolbar__group">
+          ${button('undo@lu', 'Undo', 'undo')}
+          ${button('redo@lu', 'Redo', 'redo')}
+        </div>
+        <div class="toolbar__group">
+          ${button('bold@lu', 'Bold', 'bold')}
+          ${button('italic@lu', 'Italic', 'italic')}
+          ${this._featureConfig.linksEnabled ? button('link@lu', 'Link', 'link') : ''}
+          ${this._featureConfig.linksEnabled ? button('unlink@lu', 'Unlink', 'unlink') : ''}
+          ${button('list@lu', 'Bulleted list', 'list', 'bullet')}
+          ${button('list-ordered@lu', 'Numbered list', 'list', 'ordered')}
+          ${this._featureConfig.codeBlocksEnabled ? button('square-code@lu', 'Code snippet', 'code-block') : ''}
+        </div>
+        <div class="toolbar__group">
+          <slot></slot>
+        </div>
+      </div>`;
+  }
+
   private _formatOptions() {
     return html`
       ${this._commonFormatOptions()}

package/src/components/editor/modules/toolbar/toolbar.scss

@@ -70,3 +70,41 @@
     }
   }
 }
+
+.toolbar--compact {
+  --zn-button-height: 24px;
+  gap: 2px;
+
+  zn-button::part(base) {
+    padding: 4px;
+    color: rgb(var(--zn-color-muted-text));
+  }
+
+  .toolbar__group {
+    gap: 2px;
+  }
+}
+
+// The pickers are wider than a menu's usual cap
+zn-menu.toolbar__submenu--picker {
+  --zn-menu-max-width: none;
+}
+
+// The picker can cover the menu it opens from, which would show through the shell menu's translucent panel
+zn-menu.toolbar__submenu--picker::part(base) {
+  background-color: rgb(var(--zn-color-navigation, 255, 255, 255));
+  backdrop-filter: none;
+}
+
+// In the overflow menu a picker sits in the submenu's panel, which already draws the frame
+.toolbar__submenu-content {
+  em-emoji-picker {
+    --border-radius: 0;
+    --shadow: none;
+  }
+
+  .air-datepicker.-inline- {
+    border: 0;
+    border-radius: 0;
+  }
+}

package/src/components/editor/modules/toolbar/toolbar.ts

@@ -1,4 +1,5 @@
 import './toolbar.component';
+import Link from "quill/formats/link";
 import Quill from "quill";
 import QuillToolbar from "quill/modules/toolbar";
 import type {EditorFeatureConfig} from "../../editor.component";
@@ -38,6 +39,9 @@ class Toolbar extends QuillToolbar {
     }
     this.addHandler('redo', () => quill.history.redo());
     this.addHandler('undo', () => quill.history.undo());
+    if (featureConfig?.linksEnabled) {
+      this.addHandler('unlink', () => this._unlink());
+    }
     this.addHandler('dialog', (value: string) => this._openDialog(value));
 
     this._quill = quill;
@@ -86,7 +90,10 @@ class Toolbar extends QuillToolbar {
     const range = this._quill.getSelection();
     const formats: Record<string, unknown> = range ? this._quill.getFormat(range) : {};
     const current = formats[key];
-    const next: boolean | string | number = value !== undefined ? value as boolean | string | number : !(current as boolean);
+    let next: boolean | string | number = value !== undefined ? value as boolean | string | number : !(current as boolean);
+    if (key === 'list' && current === value) {
+      next = false;
+    }
     this._quill.format(key, next);
   }
 
@@ -194,6 +201,9 @@ class Toolbar extends QuillToolbar {
     this._syncButtonState('bold@lu', !!formats.bold);
     this._syncButtonState('italic@lu', !!formats.italic);
     this._syncButtonState('underline@lu', !!formats.underline);
+    this._syncButtonState('list@lu', formats.list === 'bullet');
+    this._syncButtonState('list-ordered@lu', formats.list === 'ordered');
+    this._syncButtonState('square-code@lu', Object.prototype.hasOwnProperty.call(formats, 'code-block'));
 
     this._updateHeadingFormatMenu(formats);
     this._updateListFormatMenu(formats);
@@ -304,6 +314,20 @@ class Toolbar extends QuillToolbar {
     }
   }
 
+  // With no selection, removes the whole link under the cursor
+  private _unlink() {
+    const range = this._quill.getSelection(true);
+    if (!range) return;
+    if (range.length > 0) {
+      this._quill.formatText(range, 'link', false, Quill.sources.USER);
+      return;
+    }
+    const [link, offset] = this._quill.scroll.descendant(Link, range.index);
+    if (link) {
+      this._quill.formatText(range.index - offset, link.length(), 'link', false, Quill.sources.USER);
+    }
+  }
+
   private _insertDivider() {
     if (!this._quill) return;
 

package/src/components/empty-state/empty-state.component.ts

@@ -36,6 +36,9 @@ export default class ZnEmptyState extends ZincElement {
 
   @property({type: Boolean}) padded: boolean = false;
 
+  /** Draws the icon small inside a tinted, rounded tile rather than as a large glyph. */
+  @property({type: Boolean, reflect: true}) tile: boolean = false;
+
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'caption', 'description');
 
   render() {
@@ -50,7 +53,9 @@ export default class ZnEmptyState extends ZincElement {
         <div class="empty-state__wrapper">
           ${this.icon || this.hasSlotController.test('icon')
             ? html`
-              <zn-icon src="${this.icon}" size="48" color="${this.type ? this.type : 'primary'}"></zn-icon>`
+              ${this.tile
+                ? html`<span class="empty-state__tile"><zn-icon src="${this.icon}" size="20"></zn-icon></span>`
+                : html`<zn-icon src="${this.icon}" size="48" color="${this.type ? this.type : 'primary'}"></zn-icon>`}`
             : ''}
           ${this.caption || this.hasSlotController.test('caption')
             ? html`

package/src/components/empty-state/empty-state.scss

@@ -21,7 +21,8 @@
   }
 
   .caption {
-    font-weight: var(--zn-font-weight-semibold);
+    font-family: var(--zn-empty-state-caption-font-family, inherit);
+    font-weight: var(--zn-empty-state-caption-font-weight, var(--zn-font-weight-semibold));
     font-size: var(--zn-font-size-large);
     line-height: var(--zn-line-height-dense);
     color: rgb(var(--zn-text-heading));
@@ -29,12 +30,28 @@
   }
 
   .description {
+    max-width: var(--zn-empty-state-description-max-width, none);
     font-size: var(--zn-font-size-small);
-    line-height: var(--zn-line-height-normal);
-    color: rgb(var(--zn-text));
+    line-height: var(--zn-empty-state-description-line-height, var(--zn-line-height-normal));
+    color: var(--zn-empty-state-description-color, rgb(var(--zn-text)));
     text-align: center;
   }
 
+  &__tile {
+    display: grid;
+    place-content: center;
+    width: 44px;
+    height: 44px;
+    margin-bottom: var(--zn-spacing-2x-small);
+    border-radius: var(--zn-border-radius-large, 12px);
+    background: var(--zn-color-info-bg, rgba(var(--zn-primary), 0.1));
+    color: rgb(var(--zn-primary));
+
+    zn-icon {
+      --icon-color: currentColor;
+    }
+  }
+
   &__wrapper {
     height: 100%;
     width: 100%;
@@ -84,7 +101,7 @@
     }
 
     ::slotted(*), .caption, .description {
-      color: rgb(var(--zn-primary));
+      color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
     }
   }
 

package/src/components/expanding-action/expanding-action.component.ts

@@ -6,6 +6,7 @@ import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property} from 'lit/decorators.js';
 import {styleMap} from "lit/directives/style-map.js";
 import ZincElement from '../../internal/zinc-element';
+import {onHoverIntent} from '../../internal/hover-intent';
 
 import styles from './expanding-action.scss';
 
@@ -56,7 +57,7 @@ export default class ZnExpandingAction extends ZincElement {
   private _actions: HTMLElement[] = [];
   private _preload = true;
   private _metaObserved = false;
-  private _placementObserver?: MutationObserver;
+  private _fillHadFocus = false;
 
   private readonly _countObserver = new MutationController(this, {
     target: null,
@@ -148,7 +149,7 @@ export default class ZnExpandingAction extends ZincElement {
     this._actions.push(action);
 
     if (this._preload) {
-      action.addEventListener('mouseover', this.fetchUri.bind(this, action));
+      onHoverIntent(action, () => this.fetchUri(action));
     }
 
     action.addEventListener('click', this._handleClick.bind(this));
@@ -242,40 +243,27 @@ export default class ZnExpandingAction extends ZincElement {
     this.open = false;
   }
 
-  private _updateTriggerSide = () => {
-    const trigger = this.shadowRoot?.querySelector('.expanding-action__dropdown zn-button[slot="trigger"]');
-    const content = this.shadowRoot?.querySelector('#content');
-    if (!trigger || !content) return;
-
-    const triggerRect = trigger.getBoundingClientRect();
-    const contentRect = content.getBoundingClientRect();
-    if (contentRect.width === 0) return;
-
-    const triggerCenter = (triggerRect.left + triggerRect.right) / 2;
-    const contentCenter = (contentRect.left + contentRect.right) / 2;
-    this.setAttribute('data-trigger-side', triggerCenter > contentCenter ? 'right' : 'left');
+  protected willUpdate(changed: PropertyValues<this>) {
+    super.willUpdate(changed);
+    if (changed.has('open') && !this.open) {
+      this._fillHadFocus = !!this.shadowRoot?.querySelector('.expanding-action--fill:focus-within');
+    }
   }
 
-  private _observePlacement() {
-    const dropdown = this.shadowRoot?.querySelector('.expanding-action__dropdown');
-    const popup = dropdown?.shadowRoot?.querySelector('.dropdown');
-    if (!popup) {
-      requestAnimationFrame(() => this._observePlacement());
-      return;
+  protected updated(changed: PropertyValues<this>) {
+    super.updated(changed);
+    if (this.method !== 'fill' || !changed.has('open') || changed.get('open') === undefined) return;
+    if (this.open) {
+      this.shadowRoot?.querySelector<HTMLElement>('#content')?.focus();
+    } else if (this._fillHadFocus) {
+      this.shadowRoot?.querySelector<HTMLElement>('.expanding-action__button')?.focus();
     }
-
-    this._updateTriggerSide();
-
-    if (this._placementObserver) return;
-
-    this._placementObserver = new MutationObserver(this._updateTriggerSide);
-    this._placementObserver.observe(popup, {attributes: true, attributeFilter: ['data-current-placement']});
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._placementObserver?.disconnect();
-    this._placementObserver = undefined;
+  private _handleFillKeyDown = (e: KeyboardEvent) => {
+    if (this.method !== 'fill' || e.key !== 'Escape' || !this.open) return;
+    e.stopPropagation();
+    this.open = false;
   }
 
   render() {
@@ -300,7 +288,8 @@ export default class ZnExpandingAction extends ZincElement {
         style=${styleMap({
           '--expanding-action-basis': this.method === "drop" && this.basis ? this.basis.replace('px', '') + 'px' : 'none',
           '--expanding-action-max-height': this.method === "drop" && this.maxHeight ? this.maxHeight.replace('px', '') + 'px' : null,
-        })}>
+        })}
+        @keydown=${this._handleFillKeyDown}>
         ${this.method === 'drop' ? this.renderDropdown() : this.renderFill()}
       </div>`;
   }
@@ -312,7 +301,6 @@ export default class ZnExpandingAction extends ZincElement {
                    @zn-show="${(e: Event) => {
                      if (e.target !== e.currentTarget) return;
                      this.open = true;
-                     this._observePlacement();
                    }}"
                    @zn-hide="${(e: Event) => {
                      if (e.target !== e.currentTarget) return;
@@ -338,7 +326,7 @@ export default class ZnExpandingAction extends ZincElement {
   protected renderFill() {
     return html`
       <zn-icon src="${this.icon}" size="20"></zn-icon>
-      <div id="content" class="expanding-action__content">
+      <div id="content" class="expanding-action__content" tabindex="-1">
         <slot></slot>
       </div>
       <zn-button slot="trigger"

package/src/components/expanding-action/expanding-action.scss

@@ -43,7 +43,7 @@
 
     & > zn-icon {
       display: block;
-      color: rgb(var(--zn-primary));
+      color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
     }
   }
 
@@ -75,8 +75,6 @@
 .expanding-action--drop .expanding-action__frame {
   @include wc.scrollbars;
 
-  --expanding-action-trigger-width: 36px;
-
   position: relative;
   display: flex;
   flex-direction: column;
@@ -87,20 +85,9 @@
   background-color: rgb(var(--zn-panel));
   box-shadow: 0 8px 16px -6px rgba(33, 33, 33, 0.18);
   border: solid 1px rgb(var(--zn-border-color));
-  border-radius: var(--zn-border-radius) 0 var(--zn-border-radius) var(--zn-border-radius);
+  border-radius: var(--zn-border-radius);
   padding: 0;
   height: 100%;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: -1px;
-    left: calc(100% - var(--expanding-action-trigger-width) + 2px); // Works with width of trigger button and borders
-    right: 0;
-    z-index: 1;
-    height: 2px;
-    background: rgb(var(--zn-panel));
-  }
 }
 
 .expanding-action--drop .expanding-action__content {
@@ -110,35 +97,6 @@
   border-radius: inherit;
 }
 
-:host([data-trigger-side="left"]) .expanding-action--drop .expanding-action__frame {
-  border-radius: 0 var(--zn-border-radius) var(--zn-border-radius) var(--zn-border-radius);
-
-  &::before {
-    left: 0;
-    right: calc(100% - var(--expanding-action-trigger-width) + 2px); // Works with width of trigger button and borders
-  }
-}
-
-:host([open]) .expanding-action__dropdown zn-button[slot="trigger"] {
-  position: relative;
-  z-index: calc(var(--zn-z-index-dropdown) + 1);
-
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    height: 41px;
-    background: rgb(var(--zn-panel));
-    border: solid 1px rgb(var(--zn-border-color));
-    border-bottom-color: rgb(var(--zn-panel));
-    border-radius: var(--zn-border-radius) var(--zn-border-radius) 0 0;
-  }
-}
-
 :host([open]) .expanding-action__dropdown zn-button[slot="trigger"]::part(base) {
-  &:hover,
-  &:active {
-    background: transparent;
-  }
+  background: var(--zn-button-plain-hover-background, rgb(var(--zn-color-tab)));
 }

package/src/components/expanding-action/expanding-action.test.ts

@@ -47,7 +47,8 @@ describe('<zn-expanding-action>', () => {
       await openPanel(el);
 
       const frame = el.shadowRoot!.querySelector<HTMLElement>('.expanding-action__frame')!;
-      expect(Math.round(frame.getBoundingClientRect().height)).to.equal(250);
+      // Layout height: the dropdown's open animation briefly scales the rendered box
+      expect(frame.offsetHeight).to.equal(250);
     });
   });
 });