@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-action-bar.mjs

@@ -0,0 +1,639 @@
+import { createCollapse } from '@slotted/core/overflow';
+import { createPresence } from '@slotted/core/presence';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, output, ElementRef, HostAttributeToken, signal, computed, DestroyRef, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, viewChild, Injector } from '@angular/core';
+import { BUTTON_DEFAULTS_TOKEN } from '@slotted/angular/button';
+import { NgTemplateOutlet } from '@angular/common';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlMenu, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';
+
+const FALLBACK = {
+    align: 'end',
+    size: 'md',
+    sticky: false,
+    variant: 'plain',
+};
+const ACTION_BAR_DEFAULTS = new InjectionToken('slotted action bar defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once how its action bars are drawn — a product whose
+ * bars are all raised, compact and stuck to the bottom of the page says so in
+ * one place rather than on every bar. A bar that states any of them itself
+ * still wins.
+ */
+function provideActionBarDefaults(defaults) {
+    return {
+        provide: ACTION_BAR_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a bar renders as here, before it states anything of its own. */
+function injectActionBarDefaults() {
+    return inject(ACTION_BAR_DEFAULTS);
+}
+
+/** The attribute that says an action has somewhere to go. */
+const ACTION_BAR_UNIT_ATTRIBUTE = 'data-unit';
+/** The attribute the measurement reads a rank from. */
+const ACTION_BAR_PRIORITY_ATTRIBUTE = 'data-priority';
+/**
+ * The custom property the stacking query raises, read back by the measurement.
+ *
+ * The breakpoint is literal because `@container (width < var(--x))` is invalid,
+ * and it is written once — in the stylesheet. The binding asks CSS what it
+ * decided rather than comparing widths of its own, so the layout and the
+ * measurement cannot disagree about where the bar becomes a column.
+ */
+const ACTION_BAR_STACK_PROPERTY = '--_stacked';
+/**
+ * Where each rank stands in the order of giving way: the lowest goes first, and
+ * position decides inside one rank.
+ */
+const ACTION_BAR_RANK = Object.freeze({
+    always: 0,
+    hide: 0,
+    high: 2,
+    low: 1,
+    pinned: 0,
+});
+function priorityOf(unit) {
+    return unit.getAttribute(ACTION_BAR_PRIORITY_ATTRIBUTE) ?? 'pinned';
+}
+/**
+ * Everything the run lays out.
+ *
+ * The trigger is not one of them — a control that took part in its own
+ * measurement would be counted twice, and the Angular trigger sits inside a
+ * `display: contents` host of its own — and neither is an `always` action, which
+ * is never in the bar to give way.
+ */
+function unitsOf(container) {
+    return [...container.children].filter((child) => child instanceof HTMLElement &&
+        child.getAttribute('data-part') !== 'overflow' &&
+        child.querySelector('[data-part="overflow"]') === null &&
+        child.getAttribute(ACTION_BAR_PRIORITY_ATTRIBUTE) !== 'always');
+}
+/**
+ * Whether one of the bar's own rules sits between two units that are both in the
+ * surface. It is read from the DOM because a separator is a sibling of the units
+ * it divides and nothing in the component tree relates them.
+ */
+function ruleBetween(from, to) {
+    for (let node = from.nextElementSibling; node !== null && node !== to; node = node.nextElementSibling) {
+        if (node.getAttribute('data-part') === 'separator')
+            return true;
+    }
+    return false;
+}
+/**
+ * The one axis the bar hands down to the buttons inside it, through the button
+ * family's own defaults token rather than through a second channel of this
+ * family's invention. That is what keeps an explicit `size` on a button winning
+ * over the bar, because it is the rule `button` already implements.
+ *
+ * The value is read through a getter so that a button's `computed` tracks the
+ * bar's signal: a plain snapshot would fix the step at the moment the first
+ * button was created and never move again.
+ */
+function provideBarStep() {
+    return {
+        provide: BUTTON_DEFAULTS_TOKEN,
+        useFactory: () => {
+            const bar = inject(SlActionBar);
+            const inherited = inject(BUTTON_DEFAULTS_TOKEN, { skipSelf: true });
+            return {
+                ...inherited,
+                get size() {
+                    return bar.resolvedSize();
+                },
+            };
+        },
+    };
+}
+/**
+ * The actions that finish a task on a page or in a panel.
+ *
+ * **It is not a composite.** `Tab` reaches every action, in the order the author
+ * wrote them, and the arrows are not bound. The controls here are the page's own
+ * form actions, and a reader walking a form expects to arrive at Cancel and then
+ * at Save; roving focus would make the whole bar one tab stop and put Save
+ * behind an arrow key that announces nothing. A strip of ten icon buttons is a
+ * `toolbar`, and that family binds the arrows against the APG.
+ *
+ * **What gives way is decided by rank, not by position**, which is the whole of
+ * why this family stands beside `toolbar` rather than configuring it.
+ *
+ * **The action that confirms does not move.** The run carries an `auto` margin
+ * against the bar's end edge, so a message appearing in the status, a button
+ * going busy and a permission filter removing a control all move what is
+ * *before* the last action and never the last action itself.
+ */
+class SlActionBar {
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    sticky = input(undefined, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /**
+     * Whether the bar belongs on screen at all. A bulk bar exists while there is a
+     * selection and a contextual save bar while there are unsaved changes.
+     *
+     * It is an input rather than a two-way value: the bar never asks to appear or
+     * to leave, so there is nothing to cancel.
+     */
+    present = input(true, { ...(ngDevMode ? { debugName: "present" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? true : booleanAttribute(state)) });
+    /**
+     * Reports how many actions gave way, once per change. The collapsed set is a
+     * measurement rather than a value, so there is no two-way binding over it.
+     */
+    overflowChange = output();
+    defaults = injectActionBarDefaults();
+    element = inject((ElementRef)).nativeElement;
+    /**
+     * A consumer who has ten icon-only actions and wants the composite may write
+     * `role="toolbar"` themselves, and what they wrote survives the host binding.
+     * The arrows are still not bound, so that consumer wants `toolbar`.
+     */
+    statedRole = inject(new HostAttributeToken('role'), { optional: true });
+    counterparts = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counterparts" }] : /* istanbul ignore next */ []));
+    trigger = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    actions = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    stacked = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
+    ready = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    collapse = null;
+    /** What the surface holds: the collapsed actions and every `always` one. */
+    surfaceUnits = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surfaceUnits" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedAlign = computed(() => this.align() ?? this.defaults.align, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
+    resolvedSticky = computed(() => this.sticky() ?? this.defaults.sticky, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSticky" }] : /* istanbul ignore next */ []));
+    role = computed(() => this.statedRole ?? 'group', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    status = signal('open', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    mounted = computed(() => this.status() !== 'unmounted', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mounted" }] : /* istanbul ignore next */ []));
+    presenceAttribute = computed(() => {
+        const status = this.status();
+        return status === 'open' || status === 'unmounted' ? null : status;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presenceAttribute" }] : /* istanbul ignore next */ []));
+    collapsedCount = computed(() => this.trigger() === null ? null : String(this.surfaceUnits().length), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedCount" }] : /* istanbul ignore next */ []));
+    /** Records what an action becomes in the surface. */
+    registerUnit(id, template) {
+        this.counterparts.update((held) => new Map(held).set(id, template));
+    }
+    releaseUnit(id) {
+        this.counterparts.update((held) => {
+            const next = new Map(held);
+            next.delete(id);
+            return next;
+        });
+    }
+    counterpart(id) {
+        return this.counterparts().get(id) ?? null;
+    }
+    /** The control that opens what did not fit. The bar measures it. */
+    registerTrigger(element) {
+        this.trigger.set(element);
+    }
+    /** The run, which is the box the collapse measures rather than the root. */
+    registerActions(element) {
+        this.actions.set(element);
+    }
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        /**
+         * The bar is held through its exit, so a bulk bar slides out rather than
+         * vanishing. Carbon keeps its batch bar mounted and writes `aria-hidden` on
+         * the root instead, which leaves the buttons inside reachable by `Tab`.
+         */
+        const presence = createPresence({
+            present: true,
+            skipInitialAnimation: true,
+            onStatusChange: (next) => this.status.set(next),
+        });
+        presence.setNode(this.element);
+        destroyRef.onDestroy(() => presence.destroy());
+        effect(() => presence.sync(this.present()));
+        afterNextRender(() => this.ready.set(true));
+        /**
+         * Whether the bar is drawn as a column. The number lives in the stylesheet's
+         * container query, and this asks CSS what it decided rather than comparing
+         * widths against a copy of it.
+         */
+        effect((onCleanup) => {
+            const container = this.actions();
+            if (container === null || !this.ready())
+                return;
+            const read = () => {
+                const view = container.ownerDocument?.defaultView;
+                const raised = view?.getComputedStyle(container).getPropertyValue(ACTION_BAR_STACK_PROPERTY).trim() ===
+                    '1';
+                if (this.stacked() !== raised)
+                    this.stacked.set(raised);
+            };
+            read();
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const observer = new ResizeObserver(read);
+            observer.observe(container);
+            onCleanup(() => observer.disconnect());
+        });
+        /**
+         * The collapse. It does not run while the bar is a column: a column has room
+         * for every action, and a surface holding what did not fit would be a menu
+         * for nothing. Leaving the effect destroys the handle, which reveals every
+         * unit it had hidden.
+         */
+        effect((onCleanup) => {
+            const container = this.actions();
+            const trigger = this.trigger();
+            if (container === null || !this.ready() || this.stacked())
+                return;
+            const sync = (collapsedUnits) => {
+                const collapsed = new Set(collapsedUnits);
+                const held = [...container.children].filter((child) => child instanceof HTMLElement &&
+                    child.hasAttribute(ACTION_BAR_UNIT_ATTRIBUTE) &&
+                    (collapsed.has(child) ||
+                        child.getAttribute(ACTION_BAR_PRIORITY_ATTRIBUTE) === 'always'));
+                this.surfaceUnits.set(held.map((unit, index) => {
+                    const previous = held[index - 1];
+                    return {
+                        id: unit.getAttribute(ACTION_BAR_UNIT_ATTRIBUTE) ?? '',
+                        separatorBefore: previous !== undefined && ruleBetween(previous, unit),
+                    };
+                }));
+            };
+            const handle = createCollapse(container, {
+                /* A pinned action has nowhere to go. Every other rank does, and `hide`'s
+                   somewhere is nowhere — it gives way and is not offered in the
+                   surface. */
+                collapsible: (unit) => priorityOf(unit) !== 'pinned',
+                divides: (unit) => unit.getAttribute('data-part') === 'separator',
+                onChange: (units) => {
+                    sync(units);
+                    this.overflowChange.emit(units.filter((unit) => unit.hasAttribute(ACTION_BAR_UNIT_ATTRIBUTE)).length);
+                },
+                rank: (unit) => ACTION_BAR_RANK[priorityOf(unit)],
+                trigger: () => trigger,
+                /* An `always` action is in the surface while every other one still fits,
+                   and a control that hid itself then would be a menu nobody can open. */
+                triggerAlways: () => container.querySelector(`[${ACTION_BAR_PRIORITY_ATTRIBUTE}='always']`) !== null,
+                units: () => unitsOf(container),
+            });
+            this.collapse = handle;
+            sync(handle.collapsed());
+            /**
+             * An action arriving or leaving invalidates the measurement — a bar that
+             * grows a button collapses one — and an `always` action arriving changes
+             * what the surface holds without changing what collapsed.
+             */
+            const observer = new MutationObserver(() => {
+                handle.refresh();
+                sync(handle.collapsed());
+            });
+            observer.observe(container, { childList: true, subtree: true });
+            onCleanup(() => {
+                observer.disconnect();
+                handle.destroy();
+                this.collapse = null;
+                this.surfaceUnits.set([]);
+            });
+        });
+    }
+    /** Measures again, after the consumer changed something the DOM cannot report. */
+    refresh() {
+        this.collapse?.refresh();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlActionBar, isStandalone: true, selector: "[slActionBar]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, present: { classPropertyName: "present", publicName: "present", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflowChange: "overflowChange" }, host: { attributes: { "data-ui": "action-bar", "data-part": "root" }, properties: { "attr.role": "role()", "attr.data-variant": "resolvedVariant()", "attr.data-size": "resolvedSize()", "attr.data-align": "resolvedAlign()", "attr.data-sticky": "resolvedSticky() ? \"\" : null", "attr.data-collapsed": "collapsedCount()", "attr.data-status": "presenceAttribute()", "style.display": "mounted() ? null : \"none\"" } }, providers: [provideBarStep()], exportAs: ["slActionBar"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=action-bar]{--_gap: var(--slotted-control-gap-md, .5rem);--_inset-block: var(--slotted-space-4, .5rem);--_inset-inline: var(--slotted-space-5, .75rem);--_height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-control-font-size-md, .8125rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_separator-inset: var(--slotted-space-2, .25rem);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);align-items:center;box-sizing:border-box;container-name:slotted-action-bar;container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--slotted-action-bar-gap, var(--_gap));inline-size:100%;min-block-size:calc(var(--_height) + 2 * var(--_inset-block));min-inline-size:0;padding-block:var(--slotted-action-bar-inset-block, var(--_inset-block));padding-inline:var(--slotted-action-bar-inset-inline, var(--_inset-inline))}[data-ui=action-bar][data-size=sm]{--_gap: var(--slotted-control-gap-sm, .375rem);--_inset-block: var(--slotted-space-3, .375rem);--_inset-inline: var(--slotted-space-4, .5rem);--_height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, .75rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_separator-inset: var(--slotted-space-1, .125rem)}[data-ui=action-bar][data-size=lg]{--_gap: var(--slotted-control-gap-lg, .5rem);--_inset-block: var(--slotted-space-5, .75rem);--_inset-inline: var(--slotted-space-6, 1rem);--_height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, .875rem);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_separator-inset: var(--slotted-space-3, .375rem)}[data-ui=action-bar]:not(:has([data-part=actions]>*:not([hidden]))):not(:has([data-part=status])){display:none}[data-ui=action-bar][data-variant=raised]{background-color:var(--slotted-action-bar-background, var(--slotted-surface, Canvas));border-block-start:var(--slotted-border-width-thin, 1px) solid var(--slotted-action-bar-border-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=action-bar][data-sticky]{inset-block-end:var(--slotted-page-sticky-bottom, 0px);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=action-bar][data-status]{transition:translate var(--_duration) var(--_easing),opacity var(--_duration) var(--_easing)}[data-ui=action-bar]:is([data-status=entering],[data-status=exiting]){opacity:0;translate:0 100%}[data-ui=action-bar] [data-part=status]{align-items:center;color:var(--slotted-action-bar-status-color, var(--slotted-text-muted, GrayText));display:flex;flex:1 1 auto;font-family:var(--slotted-control-font-family, inherit);font-size:var(--_font-size);gap:var(--_gap);min-inline-size:0}[data-ui=action-bar] [data-part=actions]{align-items:center;display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--_gap);justify-content:flex-end;margin-inline-start:auto;max-inline-size:100%;min-inline-size:0}[data-ui=action-bar][data-align=start] [data-part=actions]{justify-content:flex-start;margin-inline:0 auto}[data-ui=action-bar][data-align=center] [data-part=actions]{justify-content:center;margin-inline:auto}[data-ui=action-bar][data-align=center]:not(:has([data-part=status])) [data-part=actions]{margin-inline:auto}[data-ui=action-bar] [data-part=action]{align-items:center;display:inline-flex;flex:none;min-inline-size:0}[data-ui=action-bar] :is([data-part=action],[data-part=separator],[data-part=overflow])[hidden]{display:none}[data-ui=action-bar] [data-part=separator]{align-self:stretch;background-color:var( --slotted-action-bar-separator-color, var(--slotted-border-strong, ButtonBorder) );border:0;flex:none;inline-size:var(--slotted-border-width-thin, 1px);margin-block:var(--_separator-inset);margin-inline:calc(var(--_gap) / 2);min-block-size:calc(var(--_height) - 2 * var(--_separator-inset))}[data-ui=action-bar] [data-part=overflow]{align-items:center;appearance:none;background-color:transparent;border:0;--slotted-icon-size: var(--_icon-size);border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-action-bar-overflow-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:none;font-family:var(--slotted-control-font-family, inherit);justify-content:center;line-height:1;margin-inline-start:calc(var(--_gap) / 2);min-block-size:var(--_height);min-inline-size:max(var(--slotted-target-min, 24px),var(--_height));padding:0;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=action-bar] [data-part=overflow]:not(:disabled):hover{background-color:var( --slotted-action-bar-overflow-hover-background, var(--slotted-tone-secondary-subtle-hover) );color:var(--slotted-action-bar-overflow-hover-color, var(--slotted-text, CanvasText))}[data-ui=action-bar] [data-part=overflow]:not(:disabled):active{background-color:var( --slotted-action-bar-overflow-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=action-bar] [data-part=overflow][data-open]{background-color:var( --slotted-action-bar-overflow-open-background, var(--slotted-tone-secondary-subtle-active) );color:var(--slotted-action-bar-overflow-hover-color, var(--slotted-text, CanvasText))}[data-ui=action-bar] [data-part=overflow]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=action-bar] [data-part=overflow]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}@container slotted-action-bar (width < 24rem){[data-ui=action-bar] [data-part=actions]{--_stacked: 1;align-items:stretch;flex:1 1 100%;flex-direction:column-reverse;margin-inline:0}[data-ui=action-bar] [data-part=action]>*{inline-size:100%}[data-ui=action-bar] [data-part=overflow]{display:none}[data-ui=action-bar] [data-part=separator]{block-size:var(--slotted-border-width-thin, 1px);inline-size:auto;margin-block:calc(var(--_gap) / 2);margin-inline:var(--_separator-inset);min-block-size:0}[data-ui=action-bar] [data-part=status]{flex:1 1 100%}[data-ui=action-bar] [data-part=status]>*{align-content:space-between;inline-size:100%}}@media(forced-colors:active){[data-ui=action-bar] [data-part=separator]{background-color:CanvasText;forced-color-adjust:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlActionBar, decorators: [{
+            type: Component,
+            args: [{ selector: '[slActionBar]', standalone: true, exportAs: 'slActionBar', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [provideBarStep()], host: {
+                        'data-ui': 'action-bar',
+                        'data-part': 'root',
+                        '[attr.role]': 'role()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-align]': 'resolvedAlign()',
+                        '[attr.data-sticky]': 'resolvedSticky() ? "" : null',
+                        '[attr.data-collapsed]': 'collapsedCount()',
+                        '[attr.data-status]': 'presenceAttribute()',
+                        '[style.display]': 'mounted() ? null : "none"',
+                    }, styles: ["@layer slotted.components{[data-ui=action-bar]{--_gap: var(--slotted-control-gap-md, .5rem);--_inset-block: var(--slotted-space-4, .5rem);--_inset-inline: var(--slotted-space-5, .75rem);--_height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-control-font-size-md, .8125rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_separator-inset: var(--slotted-space-2, .25rem);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);align-items:center;box-sizing:border-box;container-name:slotted-action-bar;container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--slotted-action-bar-gap, var(--_gap));inline-size:100%;min-block-size:calc(var(--_height) + 2 * var(--_inset-block));min-inline-size:0;padding-block:var(--slotted-action-bar-inset-block, var(--_inset-block));padding-inline:var(--slotted-action-bar-inset-inline, var(--_inset-inline))}[data-ui=action-bar][data-size=sm]{--_gap: var(--slotted-control-gap-sm, .375rem);--_inset-block: var(--slotted-space-3, .375rem);--_inset-inline: var(--slotted-space-4, .5rem);--_height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, .75rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_separator-inset: var(--slotted-space-1, .125rem)}[data-ui=action-bar][data-size=lg]{--_gap: var(--slotted-control-gap-lg, .5rem);--_inset-block: var(--slotted-space-5, .75rem);--_inset-inline: var(--slotted-space-6, 1rem);--_height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, .875rem);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_separator-inset: var(--slotted-space-3, .375rem)}[data-ui=action-bar]:not(:has([data-part=actions]>*:not([hidden]))):not(:has([data-part=status])){display:none}[data-ui=action-bar][data-variant=raised]{background-color:var(--slotted-action-bar-background, var(--slotted-surface, Canvas));border-block-start:var(--slotted-border-width-thin, 1px) solid var(--slotted-action-bar-border-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=action-bar][data-sticky]{inset-block-end:var(--slotted-page-sticky-bottom, 0px);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=action-bar][data-status]{transition:translate var(--_duration) var(--_easing),opacity var(--_duration) var(--_easing)}[data-ui=action-bar]:is([data-status=entering],[data-status=exiting]){opacity:0;translate:0 100%}[data-ui=action-bar] [data-part=status]{align-items:center;color:var(--slotted-action-bar-status-color, var(--slotted-text-muted, GrayText));display:flex;flex:1 1 auto;font-family:var(--slotted-control-font-family, inherit);font-size:var(--_font-size);gap:var(--_gap);min-inline-size:0}[data-ui=action-bar] [data-part=actions]{align-items:center;display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--_gap);justify-content:flex-end;margin-inline-start:auto;max-inline-size:100%;min-inline-size:0}[data-ui=action-bar][data-align=start] [data-part=actions]{justify-content:flex-start;margin-inline:0 auto}[data-ui=action-bar][data-align=center] [data-part=actions]{justify-content:center;margin-inline:auto}[data-ui=action-bar][data-align=center]:not(:has([data-part=status])) [data-part=actions]{margin-inline:auto}[data-ui=action-bar] [data-part=action]{align-items:center;display:inline-flex;flex:none;min-inline-size:0}[data-ui=action-bar] :is([data-part=action],[data-part=separator],[data-part=overflow])[hidden]{display:none}[data-ui=action-bar] [data-part=separator]{align-self:stretch;background-color:var( --slotted-action-bar-separator-color, var(--slotted-border-strong, ButtonBorder) );border:0;flex:none;inline-size:var(--slotted-border-width-thin, 1px);margin-block:var(--_separator-inset);margin-inline:calc(var(--_gap) / 2);min-block-size:calc(var(--_height) - 2 * var(--_separator-inset))}[data-ui=action-bar] [data-part=overflow]{align-items:center;appearance:none;background-color:transparent;border:0;--slotted-icon-size: var(--_icon-size);border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-action-bar-overflow-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:none;font-family:var(--slotted-control-font-family, inherit);justify-content:center;line-height:1;margin-inline-start:calc(var(--_gap) / 2);min-block-size:var(--_height);min-inline-size:max(var(--slotted-target-min, 24px),var(--_height));padding:0;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=action-bar] [data-part=overflow]:not(:disabled):hover{background-color:var( --slotted-action-bar-overflow-hover-background, var(--slotted-tone-secondary-subtle-hover) );color:var(--slotted-action-bar-overflow-hover-color, var(--slotted-text, CanvasText))}[data-ui=action-bar] [data-part=overflow]:not(:disabled):active{background-color:var( --slotted-action-bar-overflow-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=action-bar] [data-part=overflow][data-open]{background-color:var( --slotted-action-bar-overflow-open-background, var(--slotted-tone-secondary-subtle-active) );color:var(--slotted-action-bar-overflow-hover-color, var(--slotted-text, CanvasText))}[data-ui=action-bar] [data-part=overflow]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=action-bar] [data-part=overflow]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}@container slotted-action-bar (width < 24rem){[data-ui=action-bar] [data-part=actions]{--_stacked: 1;align-items:stretch;flex:1 1 100%;flex-direction:column-reverse;margin-inline:0}[data-ui=action-bar] [data-part=action]>*{inline-size:100%}[data-ui=action-bar] [data-part=overflow]{display:none}[data-ui=action-bar] [data-part=separator]{block-size:var(--slotted-border-width-thin, 1px);inline-size:auto;margin-block:calc(var(--_gap) / 2);margin-inline:var(--_separator-inset);min-block-size:0}[data-ui=action-bar] [data-part=status]{flex:1 1 100%}[data-ui=action-bar] [data-part=status]>*{align-content:space-between;inline-size:100%}}@media(forced-colors:active){[data-ui=action-bar] [data-part=separator]{background-color:CanvasText;forced-color-adjust:none}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], present: [{ type: i0.Input, args: [{ isSignal: true, alias: "present", required: false }] }], overflowChange: [{ type: i0.Output, args: ["overflowChange"] }] } });
+/**
+ * The sentence at the start of the bar: a dirty-state marker, a timestamp, the
+ * count of what is selected and the control that selects the rest.
+ *
+ * It is a slot rather than a component: the library already has
+ * `inline-message`, `status-indicator` and `badge`, and `table` already owns the
+ * selection and its count.
+ */
+class SlActionBarStatus {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlActionBarStatus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlActionBarStatus, isStandalone: true, selector: "[slActionBarStatus]", host: { attributes: { "data-part": "status" } }, exportAs: ["slActionBarStatus"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlActionBarStatus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slActionBarStatus]',
+                    standalone: true,
+                    exportAs: 'slActionBarStatus',
+                    host: { 'data-part': 'status' },
+                }]
+        }] });
+/**
+ * The run of actions, and the box the collapse measures.
+ *
+ * It is the run rather than the root, because the root is the query container
+ * and a container is a container for its descendants and not for itself — so the
+ * rule that turns the run into a column has to reach a descendant.
+ */
+class SlActionBarActions {
+    bar = inject(SlActionBar);
+    constructor() {
+        const element = inject((ElementRef)).nativeElement;
+        this.bar.registerActions(element);
+        inject(DestroyRef).onDestroy(() => this.bar.registerActions(null));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlActionBarActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlActionBarActions, isStandalone: true, selector: "[slActionBarActions]", host: { attributes: { "data-part": "actions" } }, exportAs: ["slActionBarActions"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlActionBarActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slActionBarActions]',
+                    standalone: true,
+                    exportAs: 'slActionBarActions',
+                    host: { 'data-part': 'actions' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * One action the bar may give up, its rank, and what it becomes when it goes.
+ *
+ * The rank and the counterpart are one fact seen from two sides. A control with
+ * nothing to become in the surface is pinned — it has nowhere to go, which is
+ * why the action that confirms stays visible — and a rank that needs somewhere
+ * to go and has nowhere behaves as pinned too, so a consumer error leaves the
+ * control on the bar rather than hiding it silently.
+ */
+class SlActionBarAction {
+    /**
+     * What the action becomes in the surface when the bar has no room for it.
+     *
+     * It is deliberately not called `overflow`: that word names what a container
+     * does with more content than it has room for, and one term with two meanings
+     * is the ambiguity the contract exists to prevent.
+     */
+    counterpart = input(undefined, { ...(ngDevMode ? { debugName: "counterpart" } : /* istanbul ignore next */ {}), alias: 'slActionBarActionCounterpart' });
+    /**
+     * Where this action stands in the order of giving way.
+     *
+     * It is the selector's own value, so the terse form reads as the sentence it
+     * is — `slActionBarAction="high"`. A bare `slActionBarAction` hands the
+     * directive an empty string, which is the attribute being present rather than
+     * a rank, and the transform reads it as unstated.
+     */
+    priority = input(undefined, { ...(ngDevMode ? { debugName: "priority" } : /* istanbul ignore next */ {}), alias: 'slActionBarAction', transform: (rank) => (rank === '' ? undefined : rank) });
+    bar = inject(SlActionBar, { optional: true });
+    identity = `slotted-action-bar-unit-${(unitCount += 1)}`;
+    unitId = computed(() => this.counterpart() === undefined ? null : this.identity, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unitId" }] : /* istanbul ignore next */ []));
+    resolvedPriority = computed(() => {
+        const stated = this.priority();
+        const declared = this.counterpart() !== undefined;
+        if (stated === undefined)
+            return declared ? 'low' : 'pinned';
+        if (stated === 'hide' || stated === 'pinned')
+            return stated;
+        return declared ? stated : 'pinned';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPriority" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const bar = this.bar;
+        effect(() => {
+            const template = this.counterpart();
+            if (bar === null)
+                return;
+            if (template === undefined)
+                bar.releaseUnit(this.identity);
+            else
+                bar.registerUnit(this.identity, template);
+        });
+        inject(DestroyRef).onDestroy(() => bar?.releaseUnit(this.identity));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlActionBarAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlActionBarAction, isStandalone: true, selector: "[slActionBarAction]", inputs: { counterpart: { classPropertyName: "counterpart", publicName: "slActionBarActionCounterpart", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "slActionBarAction", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "action" }, properties: { "attr.data-unit": "unitId()", "attr.data-priority": "resolvedPriority()", "attr.hidden": "resolvedPriority() === \"always\" ? \"\" : null" } }, exportAs: ["slActionBarAction"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlActionBarAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slActionBarAction]',
+                    standalone: true,
+                    exportAs: 'slActionBarAction',
+                    host: {
+                        'data-part': 'action',
+                        '[attr.data-unit]': 'unitId()',
+                        '[attr.data-priority]': 'resolvedPriority()',
+                        '[attr.hidden]': 'resolvedPriority() === "always" ? "" : null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { counterpart: [{ type: i0.Input, args: [{ isSignal: true, alias: "slActionBarActionCounterpart", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "slActionBarAction", required: false }] }] } });
+let unitCount = 0;
+/**
+ * A hairline between two runs of actions.
+ *
+ * It is the answer to the one line of `docs/component-features.md` §5 that names
+ * no mechanism: a destructive action does not sit flush against a frequent one.
+ * It is a part of this family rather than a `divider` because its geometry
+ * belongs to the bar.
+ */
+class SlActionBarSeparator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlActionBarSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlActionBarSeparator, isStandalone: true, selector: "[slActionBarSeparator]", host: { attributes: { "data-part": "separator", "role": "separator", "aria-orientation": "vertical" } }, exportAs: ["slActionBarSeparator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlActionBarSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slActionBarSeparator]',
+                    standalone: true,
+                    exportAs: 'slActionBarSeparator',
+                    host: { 'data-part': 'separator', role: 'separator', 'aria-orientation': 'vertical' },
+                }]
+        }] });
+
+/**
+ * The control that opens what did not fit, and the surface holding it.
+ *
+ * It is `menu`'s own trigger and surface wearing this family's geometry, so the
+ * keyboard, the dismissal and the focus return are `menu`'s and are not written
+ * twice. What this family adds is the measurement: the bar decides which actions
+ * give way, **by rank**, and the counterparts they declared are rendered here in
+ * the order the bar holds them — with a separator wherever one of the bar's own
+ * rules sits between two of them.
+ *
+ * The surface also holds every action ranked `always`, which was never drawn in
+ * the bar at all. A reader opening the menu sees one list, so the two sources
+ * are read together and in the bar's own order.
+ *
+ * The counterpart is an `ng-template` rendered through `NgTemplateOutlet` only
+ * while its action is in the surface, so a menu item that is never reached
+ * builds nothing. That is where the two bindings differ most, and it is idiom
+ * rather than asymmetry: React's `ReactNode` is built with the element that
+ * declares it, which is React's own answer and its own cost.
+ *
+ * **A template resolves its dependencies where it was written, not where it is
+ * rendered.** The counterpart is authored beside the control it replaces, which
+ * is outside the surface, so `slMenuItem` would look for the `SlMenu` above the
+ * bar and find none. The outlet is therefore given an injector that provides the
+ * surface this component draws.
+ *
+ * The host is `display: contents`, so the `button` below is a child of the run
+ * itself: the part that carries the geometry has to be the box the bar lays out.
+ *
+ * **The `hidden` attribute on the trigger belongs to the bar.** `createCollapse`
+ * writes it, because the same measurement that decides whether the control is
+ * needed is the one that has to reveal it to read its width.
+ */
+class SlActionBarOverflow {
+    /** Where the surface sits against the trigger. */
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    side = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /** The surface's own measure, which is `menu`'s axis rather than the bar's. */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * The accessible name. Defaults to a count — "3 more actions" — because the
+     * mark says nothing about how much is behind it.
+     */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    bar = inject(SlActionBar);
+    /** A name the consumer wrote on the host survives the counted default. */
+    stated = inject(new HostAttributeToken('aria-label'), { optional: true });
+    name = computed(() => {
+        if (this.stated !== null)
+            return this.stated;
+        const given = this.label();
+        const hidden = this.bar.surfaceUnits().length;
+        if (typeof given === 'function')
+            return given(hidden);
+        if (given !== undefined)
+            return given;
+        return `${hidden} more ${hidden === 1 ? 'action' : 'actions'}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    trigger = viewChild.required('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    surface = viewChild(SlMenu, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
+    /**
+     * `null` until the view exists, which is also while the surface holds nothing
+     * and the outlet renders nothing.
+     */
+    surfaceInjector = computed(() => {
+        const menu = this.surface();
+        if (menu === undefined)
+            return null;
+        return Injector.create({
+            parent: this.injector,
+            providers: [{ provide: SlMenu, useValue: menu }],
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surfaceInjector" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const element = this.trigger().nativeElement;
+            /**
+             * `slMenuTriggerFor` binds `[attr.data-part]` and resolves it to `null`
+             * for a trigger that is neither a bar's item nor a submenu's, and a host
+             * binding of `null` removes the attribute the author wrote. The part is
+             * therefore written back after the first change detection, where nothing
+             * writes over it again: the expression is a constant, so Angular applies
+             * it once. `docs/build-briefing.md` records the rule; `toolbar` is where
+             * it was learnt.
+             */
+            element.setAttribute('data-part', 'overflow');
+            /* The bar measures the control, so it has to hold it. */
+            this.bar.registerTrigger(element);
+        });
+        destroyRef.onDestroy(() => this.bar.registerTrigger(null));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlActionBarOverflow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlActionBarOverflow, isStandalone: true, selector: "sl-action-bar-overflow", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "surface", first: true, predicate: SlMenu, descendants: true, isSignal: true }], exportAs: ["slActionBarOverflow"], ngImport: i0, template: `
+    <button
+      #trigger
+      data-part="overflow"
+      type="button"
+      [slMenuTriggerFor]="surface"
+      [attr.aria-label]="name()"
+    >
+      <span slIcon><svg slGlyph name="ellipsis"></svg></span>
+    </button>
+    <sl-menu #surface [align]="align()" [side]="side()" [size]="size()">
+      @for (unit of bar.surfaceUnits(); track unit.id) {
+        @if (unit.separatorBefore) {
+          <hr slMenuSeparator />
+        }
+        <ng-container *ngTemplateOutlet="bar.counterpart(unit.id)!; injector: surfaceInjector()" />
+      }
+    </sl-menu>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlMenu, selector: "sl-menu", inputs: ["value", "aria-label", "aria-describedby", "open", "align", "side", "size", "mount", "strategy", "sideOffset", "alignOffset", "collisionPadding", "submenuOpenDelay", "submenuCloseDelay", "typeaheadTimeout", "disabled", "loop", "typeahead", "openOnHover", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "loading"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slMenu"] }, { kind: "directive", type: SlMenuSeparator, selector: "hr[slMenuSeparator]" }, { kind: "directive", type: SlMenuTrigger, selector: "[slMenuTriggerFor]", inputs: ["slMenuTriggerFor"], exportAs: ["slMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlActionBarOverflow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sl-action-bar-overflow',
+                    standalone: true,
+                    exportAs: 'slActionBarOverflow',
+                    imports: [NgTemplateOutlet, SlGlyph, SlIcon, SlMenu, SlMenuSeparator, SlMenuTrigger],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { style: 'display: contents' },
+                    template: `
+    <button
+      #trigger
+      data-part="overflow"
+      type="button"
+      [slMenuTriggerFor]="surface"
+      [attr.aria-label]="name()"
+    >
+      <span slIcon><svg slGlyph name="ellipsis"></svg></span>
+    </button>
+    <sl-menu #surface [align]="align()" [side]="side()" [size]="size()">
+      @for (unit of bar.surfaceUnits(); track unit.id) {
+        @if (unit.separatorBefore) {
+          <hr slMenuSeparator />
+        }
+        <ng-container *ngTemplateOutlet="bar.counterpart(unit.id)!; injector: surfaceInjector()" />
+      }
+    </sl-menu>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], surface: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SlMenu), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ACTION_BAR_DEFAULTS, ACTION_BAR_PRIORITY_ATTRIBUTE, ACTION_BAR_RANK, ACTION_BAR_STACK_PROPERTY, ACTION_BAR_UNIT_ATTRIBUTE, SlActionBar, SlActionBarAction, SlActionBarActions, SlActionBarOverflow, SlActionBarSeparator, SlActionBarStatus, injectActionBarDefaults, provideActionBarDefaults };
+//# sourceMappingURL=slotted-angular-action-bar.mjs.map