Generic primitive lifted out of pa-card__actions--overflow. Mark any flex row of children with pa-overflow and the JS module (overflow.js) walks the lowest-priority items into a "..." menu when the row can't fit, restoring them as space comes back. Works on toolbars, breadcrumb rows, chip rows, tab bars, anything horizontally laid out.

• Priority via data-pa-actions-priority="N" on a child — higher stays longer (default 0).
• Tiebreak direction via data-pa-actions-overflow-from="end" (default — rightmost drops first) or "start" (leftmost drops first).
• Same SCSS contract as the card variant: min-width: 0; overflow: hidden; flex-shrink: 1 on the wrapper makes scrollWidth > clientWidth a truthful signal.
• The card-flavoured alias pa-card__actions--overflow still works — the JS auto-inits on both selectors.

Drag the bottom-right corner of the framed wrapper below to shrink it. Buttons collapse into "..." by ascending priority; Run is pinned with data-pa-actions-priority="10" and stays last. Flip the drop direction with the checkbox.

No card scaffolding — the pa-overflow row is sitting directly inside an inline-resizable wrapper.

Priority lets you keep the actions that matter visible no matter how narrow the row gets. Here Publish (priority 20) and Save draft (priority 10) stay last; helpers (Preview, History, Settings) drop in DOM order from the right.

Same primitive, different children. Here the row is filled with pa-badge chips — the JS doesn't care what the children are, as long as they're inline-block. No priorities means pure DOM order with the default "end" tiebreaker (rightmost drops first).

Drag the splitter gutter to shrink the left pane — its toolbar collapses the same way. Demonstrates that the primitive doesn't need a card wrapper; the toolbar is plain markup inside the pane.

The existing pa-card__actions--overflow variant still works unchanged — same JS module auto-inits on both selectors. Use it when you want the overflow row to sit inside a pa-card__header (which carries the matching SCSS rules under _cards.scss).

Markup

<div class="pa-overflow" data-pa-actions-overflow-from="end">
  <button class="pa-btn pa-btn--xs">Save</button>
  <button class="pa-btn pa-btn--xs">Format</button>
  <button class="pa-btn pa-btn--xs" data-pa-actions-priority="10">Run</button>
</div>

Attributes

JS API

// Auto-inits on .pa-overflow + .pa-card__actions--overflow at DOMContentLoaded.
// After injecting dynamic markup, re-scan a subtree:
window.PaOverflow.initAll(document.getElementById('inserted-wrapper'));

// Diagnostics (set before page load):
window.PA_OVERFLOW_DEBUG = true;

Layout contract

The wrapper must have min-width: 0; overflow: hidden; flex-shrink: 1 so the row actually shrinks below its content (otherwise the browser keeps the wrapper at intrinsic content width and the overflow signal never fires). The pa-overflow class supplies these via _overflow.scss; the card alias supplies them under .pa-card__header in _cards.scss. If you want the row to live somewhere else with different layout rules, replicate those three properties on whatever wrapper you put around it.