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

package/fesm2022/slotted-angular-toolbar.mjs

@@ -0,0 +1,536 @@
+import { createRovingTabindex, toolbarOwnedKeys, TOOLBAR_ITEM_SELECTOR } from '@slotted/core/focus';
+import { createCollapse } from '@slotted/core/overflow';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, output, ElementRef, signal, computed, DestroyRef, afterNextRender, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, HostAttributeToken, viewChild, Injector } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlMenu, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';
+
+const FALLBACK = {
+    loop: true,
+    orientation: 'horizontal',
+    overflow: 'wrap',
+    size: 'md',
+    variant: 'plain',
+};
+const TOOLBAR_DEFAULTS = new InjectionToken('slotted toolbar defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its bars are drawn and how they behave — a
+ * product whose bars are all framed and compact says so in one place rather
+ * than on every bar. A bar that states any of them itself still wins.
+ */
+function provideToolbarDefaults(defaults) {
+    return {
+        provide: TOOLBAR_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a toolbar renders as here, before it states anything of its own. */
+function injectToolbarDefaults() {
+    return inject(TOOLBAR_DEFAULTS);
+}
+
+/** The attribute that says a unit has somewhere to go. */
+const TOOLBAR_UNIT_ATTRIBUTE = 'data-unit';
+/**
+ * Everything the bar lays out, and nothing that is or holds the trigger: the
+ * control the units give way *to* would otherwise be counted twice, and the
+ * Angular trigger sits inside a `display: contents` host of its own.
+ */
+function unitsOf(container) {
+    return [...container.children].filter((child) => child instanceof HTMLElement &&
+        child.getAttribute('data-part') !== 'overflow' &&
+        child.querySelector('[data-part="overflow"]') === null);
+}
+/**
+ * Whether one of the bar's own rules sits between two units that both gave way.
+ * 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;
+}
+/**
+ * A set of controls that share one tab stop.
+ *
+ * **The keyboard is the whole point of the role.** `Tab` enters the bar once and
+ * lands on the control that last had focus, the arrows of the flow axis move
+ * between the controls and wrap — from row to row when the bar wrapped, because
+ * the item list is linear — and `Home` and `End` reach the ends. The cross axis
+ * duplicates the pair, which the APG permits and which is what gives focus a way
+ * out of an item that keeps the flow arrows for itself.
+ *
+ * **The items are the consumer's own controls.** Anything focusable inside the
+ * bar is an item, found through `TOOLBAR_ITEM_SELECTOR`, so this library's
+ * `button`, `link`, `checkbox`, `switch` and `text-field` — and a menu trigger,
+ * and a consumer's own control — drop in unwrapped.
+ *
+ * **The bar paints itself and nothing inside it.** A bar out of action is
+ * `<fieldset disabled>` around it: the platform disables every control inside,
+ * and a natively disabled control cannot be focused, so the arrows skip exactly
+ * those.
+ */
+class SlToolbar {
+    orientation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    overflow = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
+    /** Whether the arrows wrap past the ends of the bar. */
+    loop = input(undefined, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /**
+     * Reports how many units gave way, once per change. The collapsed set is a
+     * measurement rather than a value, so there is no two-way binding over it: a
+     * consumer who owned it could assert that a bar fits when the layout says it
+     * does not.
+     */
+    overflowChange = output();
+    defaults = injectToolbarDefaults();
+    element = inject((ElementRef)).nativeElement;
+    counterparts = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counterparts" }] : /* istanbul ignore next */ []));
+    trigger = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    ready = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    ring = null;
+    /** The units that gave way, in the order the bar held them. */
+    collapsedUnits = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedUnits" }] : /* istanbul ignore next */ []));
+    resolvedOrientation = computed(() => this.orientation() ?? this.defaults.orientation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOrientation" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedOverflow = computed(() => this.overflow() ?? this.defaults.overflow, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOverflow" }] : /* istanbul ignore next */ []));
+    resolvedLoop = computed(() => this.loop() ?? this.defaults.loop, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLoop" }] : /* istanbul ignore next */ []));
+    ariaOrientation = computed(() => this.resolvedOrientation() === 'vertical' ? 'vertical' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaOrientation" }] : /* istanbul ignore next */ []));
+    collapsedCount = computed(() => this.resolvedOverflow() === 'menu' ? String(this.collapsedUnits().length) : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedCount" }] : /* istanbul ignore next */ []));
+    /** Records what a unit 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);
+    }
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const ring = createRovingTabindex(this.element, {
+                crossAxis: true,
+                includeAriaDisabled: true,
+                itemSelector: TOOLBAR_ITEM_SELECTOR,
+                loop: () => this.resolvedLoop(),
+                orientation: () => this.resolvedOrientation(),
+                ownedKeys: (item) => toolbarOwnedKeys(item, this.resolvedOrientation()),
+            });
+            this.ring = ring;
+            /**
+             * A control arriving or leaving has to reach the tab stop, and neither
+             * binding can be told by the other's change detection. The DOM is the one
+             * thing they agree on — and the same event invalidates the measurement,
+             * because a bar that grows a button collapses one.
+             */
+            const observer = new MutationObserver(() => {
+                ring.refresh();
+                this.collapse?.refresh();
+            });
+            observer.observe(this.element, { childList: true, subtree: true });
+            this.ready.set(true);
+            destroyRef.onDestroy(() => {
+                observer.disconnect();
+                ring.destroy();
+                this.ring = null;
+            });
+        });
+        /**
+         * The collapse runs only under `overflow="menu"`, and only once the bar
+         * holds a trigger: with nothing to give way *to*, every unit is pinned and
+         * the bar scrolls instead — the same degradation a bar of pinned units
+         * gets.
+         */
+        effect((onCleanup) => {
+            const trigger = this.trigger();
+            const orientation = this.resolvedOrientation();
+            if (!this.ready() || this.resolvedOverflow() !== 'menu')
+                return;
+            const handle = createCollapse(this.element, {
+                collapsible: (unit) => unit.hasAttribute(TOOLBAR_UNIT_ATTRIBUTE),
+                divides: (unit) => unit.getAttribute('data-part') === 'separator',
+                /* A spacer grows into whatever is left, so its room is nought — and it
+                   is still one of the boxes the gaps run between. */
+                fixedSize: (unit) => (unit.getAttribute('data-part') === 'spacer' ? 0 : undefined),
+                onChange: (units) => {
+                    const named = units.filter((unit) => unit.hasAttribute(TOOLBAR_UNIT_ATTRIBUTE));
+                    this.collapsedUnits.set(named.map((unit, index) => {
+                        const previous = named[index - 1];
+                        return {
+                            id: unit.getAttribute(TOOLBAR_UNIT_ATTRIBUTE) ?? '',
+                            separatorBefore: previous !== undefined && ruleBetween(previous, unit),
+                        };
+                    }));
+                    /* A unit that left the bar leaves the ring with it, and one that came
+                       back rejoins it. */
+                    this.ring?.refresh();
+                    this.overflowChange.emit(named.length);
+                },
+                orientation: () => orientation,
+                trigger: () => trigger,
+                units: () => unitsOf(this.element),
+            });
+            this.collapse = handle;
+            onCleanup(() => {
+                handle.destroy();
+                this.collapse = null;
+                this.collapsedUnits.set([]);
+            });
+        });
+    }
+    collapse = null;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlToolbar, isStandalone: true, selector: "[slToolbar]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflowChange: "overflowChange" }, host: { attributes: { "data-ui": "toolbar", "data-part": "root", "role": "toolbar" }, properties: { "attr.data-orientation": "resolvedOrientation()", "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-overflow": "resolvedOverflow()", "attr.data-collapsed": "collapsedCount()", "attr.aria-orientation": "ariaOrientation()" } }, exportAs: ["slToolbar"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=toolbar]{--_gap: var(--slotted-control-gap-md, .375rem);--_inset: var(--slotted-space-2, .25rem);--_height: var(--slotted-control-height-md, 34px);--_separator-inset: var(--slotted-space-2, .25rem);--_font-size: var(--slotted-control-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_pad: var(--_inset);align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-toolbar-gap, var(--_gap));min-inline-size:0;padding:var(--slotted-toolbar-inset, var(--_pad))}[data-ui=toolbar][data-size=sm]{--_gap: var(--slotted-control-gap-sm, .25rem);--_inset: var(--slotted-space-1, .125rem);--_height: var(--slotted-control-height-sm, 30px);--_separator-inset: var(--slotted-space-1, .125rem);--_font-size: var(--slotted-control-font-size-sm, .8125rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=toolbar][data-size=lg]{--_gap: var(--slotted-control-gap-lg, .5rem);--_inset: var(--slotted-space-3, .375rem);--_height: var(--slotted-control-height-lg, 40px);--_separator-inset: var(--slotted-space-3, .375rem);--_font-size: var(--slotted-control-font-size-lg, .9375rem);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=toolbar]:empty{display:none}[data-ui=toolbar][data-orientation=vertical]{align-items:stretch;flex-direction:column;inline-size:fit-content}[data-ui=toolbar][data-variant=outline]{--_pad: max( var(--_inset), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) );background-color:var(--slotted-toolbar-background, var(--slotted-surface-raised));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-toolbar-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-radius-md, 6px)}[data-ui=toolbar]:is([data-overflow=scroll],[data-overflow=menu]){--_pad: max( var(--_inset), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) );flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}[data-ui=toolbar]:is([data-overflow=scroll],[data-overflow=menu])[data-orientation=vertical]{inline-size:auto;overflow-x:hidden;overflow-y:auto}[data-ui=toolbar]:is([data-overflow=scroll],[data-overflow=menu])>*{flex:none}[data-ui=toolbar] [data-part=item]{align-items:center;display:inline-flex;min-inline-size:0}[data-ui=toolbar][data-orientation=vertical] [data-part=item]{align-items:stretch;flex-direction:column}[data-ui=toolbar] :is([data-part=item],[data-part=group],[data-part=separator],[data-part=overflow])[hidden]{display:none}[data-ui=toolbar] [data-part=overflow]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-toolbar-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;min-block-size:var(--_height);min-inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=toolbar] [data-part=overflow]:not(:disabled):hover{background-color:var( --slotted-toolbar-overflow-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=toolbar] [data-part=overflow]:not(:disabled):active{background-color:var( --slotted-toolbar-overflow-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=toolbar] [data-part=overflow][data-open]{background-color:var( --slotted-toolbar-overflow-open-background, var(--slotted-tone-secondary-subtle-active) );color:var(--slotted-toolbar-overflow-hover-color, var(--slotted-text, CanvasText))}@media(pointer:coarse){[data-ui=toolbar] [data-part=overflow]{min-block-size:max(var(--slotted-target-comfortable, 44px),var(--_height));min-inline-size:max(var(--slotted-target-comfortable, 44px),var(--_height))}}[data-ui=toolbar] [data-part=overflow]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=toolbar] [data-part=overflow]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=toolbar] [data-part=group]{align-items:center;display:flex;flex-wrap:inherit;gap:calc(var(--_gap) / 2);min-inline-size:0}[data-ui=toolbar][data-orientation=vertical] [data-part=group]{align-items:stretch;flex-direction:column}[data-ui=toolbar] [data-part=group]:not(:first-child){margin-inline-start:calc(var(--_gap) / 2)}[data-ui=toolbar] [data-part=group]:not(:last-child){margin-inline-end:calc(var(--_gap) / 2)}[data-ui=toolbar][data-orientation=vertical] [data-part=group]:not(:first-child){margin-block-start:calc(var(--_gap) / 2);margin-inline-start:0}[data-ui=toolbar][data-orientation=vertical] [data-part=group]:not(:last-child){margin-block-end:calc(var(--_gap) / 2);margin-inline-end:0}[data-ui=toolbar] [data-part=separator]{align-self:stretch;background-color:var( --slotted-toolbar-separator-color, var(--slotted-control-border-color, 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=toolbar][data-orientation=vertical] [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}@media(forced-colors:active){[data-ui=toolbar] [data-part=separator]{background-color:CanvasText;forced-color-adjust:none}}[data-ui=toolbar] [data-part=spacer]{flex:1 1 0;min-block-size:0;min-inline-size:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbar, decorators: [{
+            type: Component,
+            args: [{ selector: '[slToolbar]', standalone: true, exportAs: 'slToolbar', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'toolbar',
+                        'data-part': 'root',
+                        role: 'toolbar',
+                        '[attr.data-orientation]': 'resolvedOrientation()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-overflow]': 'resolvedOverflow()',
+                        '[attr.data-collapsed]': 'collapsedCount()',
+                        '[attr.aria-orientation]': 'ariaOrientation()',
+                    }, styles: ["@layer slotted.components{[data-ui=toolbar]{--_gap: var(--slotted-control-gap-md, .375rem);--_inset: var(--slotted-space-2, .25rem);--_height: var(--slotted-control-height-md, 34px);--_separator-inset: var(--slotted-space-2, .25rem);--_font-size: var(--slotted-control-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_pad: var(--_inset);align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-toolbar-gap, var(--_gap));min-inline-size:0;padding:var(--slotted-toolbar-inset, var(--_pad))}[data-ui=toolbar][data-size=sm]{--_gap: var(--slotted-control-gap-sm, .25rem);--_inset: var(--slotted-space-1, .125rem);--_height: var(--slotted-control-height-sm, 30px);--_separator-inset: var(--slotted-space-1, .125rem);--_font-size: var(--slotted-control-font-size-sm, .8125rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=toolbar][data-size=lg]{--_gap: var(--slotted-control-gap-lg, .5rem);--_inset: var(--slotted-space-3, .375rem);--_height: var(--slotted-control-height-lg, 40px);--_separator-inset: var(--slotted-space-3, .375rem);--_font-size: var(--slotted-control-font-size-lg, .9375rem);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=toolbar]:empty{display:none}[data-ui=toolbar][data-orientation=vertical]{align-items:stretch;flex-direction:column;inline-size:fit-content}[data-ui=toolbar][data-variant=outline]{--_pad: max( var(--_inset), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) );background-color:var(--slotted-toolbar-background, var(--slotted-surface-raised));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-toolbar-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-radius-md, 6px)}[data-ui=toolbar]:is([data-overflow=scroll],[data-overflow=menu]){--_pad: max( var(--_inset), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) );flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}[data-ui=toolbar]:is([data-overflow=scroll],[data-overflow=menu])[data-orientation=vertical]{inline-size:auto;overflow-x:hidden;overflow-y:auto}[data-ui=toolbar]:is([data-overflow=scroll],[data-overflow=menu])>*{flex:none}[data-ui=toolbar] [data-part=item]{align-items:center;display:inline-flex;min-inline-size:0}[data-ui=toolbar][data-orientation=vertical] [data-part=item]{align-items:stretch;flex-direction:column}[data-ui=toolbar] :is([data-part=item],[data-part=group],[data-part=separator],[data-part=overflow])[hidden]{display:none}[data-ui=toolbar] [data-part=overflow]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-toolbar-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;min-block-size:var(--_height);min-inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=toolbar] [data-part=overflow]:not(:disabled):hover{background-color:var( --slotted-toolbar-overflow-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=toolbar] [data-part=overflow]:not(:disabled):active{background-color:var( --slotted-toolbar-overflow-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=toolbar] [data-part=overflow][data-open]{background-color:var( --slotted-toolbar-overflow-open-background, var(--slotted-tone-secondary-subtle-active) );color:var(--slotted-toolbar-overflow-hover-color, var(--slotted-text, CanvasText))}@media(pointer:coarse){[data-ui=toolbar] [data-part=overflow]{min-block-size:max(var(--slotted-target-comfortable, 44px),var(--_height));min-inline-size:max(var(--slotted-target-comfortable, 44px),var(--_height))}}[data-ui=toolbar] [data-part=overflow]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=toolbar] [data-part=overflow]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=toolbar] [data-part=group]{align-items:center;display:flex;flex-wrap:inherit;gap:calc(var(--_gap) / 2);min-inline-size:0}[data-ui=toolbar][data-orientation=vertical] [data-part=group]{align-items:stretch;flex-direction:column}[data-ui=toolbar] [data-part=group]:not(:first-child){margin-inline-start:calc(var(--_gap) / 2)}[data-ui=toolbar] [data-part=group]:not(:last-child){margin-inline-end:calc(var(--_gap) / 2)}[data-ui=toolbar][data-orientation=vertical] [data-part=group]:not(:first-child){margin-block-start:calc(var(--_gap) / 2);margin-inline-start:0}[data-ui=toolbar][data-orientation=vertical] [data-part=group]:not(:last-child){margin-block-end:calc(var(--_gap) / 2);margin-inline-end:0}[data-ui=toolbar] [data-part=separator]{align-self:stretch;background-color:var( --slotted-toolbar-separator-color, var(--slotted-control-border-color, 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=toolbar][data-orientation=vertical] [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}@media(forced-colors:active){[data-ui=toolbar] [data-part=separator]{background-color:CanvasText;forced-color-adjust:none}}[data-ui=toolbar] [data-part=spacer]{flex:1 1 0;min-block-size:0;min-inline-size:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], overflowChange: [{ type: i0.Output, args: ["overflowChange"] }] } });
+/**
+ * A run of related controls, announced as a group.
+ *
+ * The distance inside it is half the bar's gap and the distance around it is a
+ * gap and a half, so the boundary between two groups reads wider than the
+ * boundary between two controls. Its accessible name is the consumer's own
+ * `aria-label`.
+ *
+ * The arrows do not stop at its edge: a group is a label around a run, not a
+ * second keyboard.
+ */
+class SlToolbarGroup {
+    /**
+     * What the whole run becomes when the bar has no room for it, under
+     * `overflow="menu"`. A group that declares none is pinned.
+     */
+    counterpart = input(undefined, { ...(ngDevMode ? { debugName: "counterpart" } : /* istanbul ignore next */ {}), alias: 'slToolbarGroupCounterpart' });
+    unit = declareUnit(() => this.counterpart());
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlToolbarGroup, isStandalone: true, selector: "[slToolbarGroup]", inputs: { counterpart: { classPropertyName: "counterpart", publicName: "slToolbarGroupCounterpart", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "group", "role": "group" }, properties: { "attr.data-unit": "unit.id()" } }, exportAs: ["slToolbarGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slToolbarGroup]',
+                    standalone: true,
+                    exportAs: 'slToolbarGroup',
+                    host: { 'data-part': 'group', role: 'group', '[attr.data-unit]': 'unit.id()' },
+                }]
+        }], propDecorators: { counterpart: [{ type: i0.Input, args: [{ isSignal: true, alias: "slToolbarGroupCounterpart", required: false }] }] } });
+/**
+ * One unit the bar may give up, and what it becomes when it does.
+ *
+ * A unit is a direct child of the root, which is deliberately not the same
+ * thing as an item: the keyboard finds items by being focusable, at any depth,
+ * and the collapse acts on the boxes the bar lays out. A `slButtonGroup` inside
+ * one of these is one unit and four items.
+ *
+ * It is only needed under `overflow="menu"`, and only around a control the bar
+ * is allowed to hide. A control placed in a bar unwrapped is a unit too — a
+ * pinned one, because it declares nothing to become.
+ */
+class SlToolbarItem {
+    /**
+     * What the control becomes in the surface. An item that declares none cannot
+     * be hidden, which is how a primary action stays visible: it has nowhere to
+     * go, rather than a rank above the others.
+     */
+    counterpart = input(undefined, { ...(ngDevMode ? { debugName: "counterpart" } : /* istanbul ignore next */ {}), alias: 'slToolbarItemCounterpart' });
+    unit = declareUnit(() => this.counterpart());
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlToolbarItem, isStandalone: true, selector: "[slToolbarItem]", inputs: { counterpart: { classPropertyName: "counterpart", publicName: "slToolbarItemCounterpart", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "item" }, properties: { "attr.data-unit": "unit.id()" } }, exportAs: ["slToolbarItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slToolbarItem]',
+                    standalone: true,
+                    exportAs: 'slToolbarItem',
+                    host: { 'data-part': 'item', '[attr.data-unit]': 'unit.id()' },
+                }]
+        }], propDecorators: { counterpart: [{ type: i0.Input, args: [{ isSignal: true, alias: "slToolbarItemCounterpart", required: false }] }] } });
+/**
+ * Records what a unit becomes in the surface, and says so in the DOM.
+ *
+ * The attribute is what the measurement reads: a unit carrying it has somewhere
+ * to go, and one without it is pinned. Pinning is therefore the absence of a
+ * counterpart rather than a second input — one fact, in the place a reader is
+ * already looking, and no way for the two to disagree.
+ */
+let unitCount = 0;
+function declareUnit(counterpart) {
+    const toolbar = inject(SlToolbar, { optional: true });
+    const destroyRef = inject(DestroyRef);
+    const identity = `slotted-toolbar-unit-${(unitCount += 1)}`;
+    const id = computed(() => (counterpart() === undefined ? null : identity), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    effect(() => {
+        const template = counterpart();
+        if (toolbar === null)
+            return;
+        if (template === undefined)
+            toolbar.releaseUnit(identity);
+        else
+            toolbar.registerUnit(identity, template);
+    });
+    destroyRef.onDestroy(() => toolbar?.releaseUnit(identity));
+    return { id };
+}
+/**
+ * A hairline between two runs.
+ *
+ * It is a part of this family rather than a `divider`, because its geometry
+ * belongs to the bar: it is measured against the controls beside it, and it
+ * turns with the bar. `aria-orientation` states the axis of the rule itself,
+ * which is perpendicular to the one the controls run along.
+ */
+class SlToolbarSeparator {
+    toolbar = inject(SlToolbar);
+    ariaOrientation = computed(() => this.toolbar.resolvedOrientation() === 'vertical' ? 'horizontal' : 'vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaOrientation" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToolbarSeparator, isStandalone: true, selector: "[slToolbarSeparator]", host: { attributes: { "data-part": "separator", "role": "separator" }, properties: { "attr.aria-orientation": "ariaOrientation()" } }, exportAs: ["slToolbarSeparator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slToolbarSeparator]',
+                    standalone: true,
+                    exportAs: 'slToolbarSeparator',
+                    host: {
+                        'data-part': 'separator',
+                        role: 'separator',
+                        '[attr.aria-orientation]': 'ariaOrientation()',
+                    },
+                }]
+        }] });
+/**
+ * The free space between two runs, so what follows sits at the end of the bar.
+ *
+ * It replaces a `justify` axis: an axis decides the placement of every control
+ * at once, and what a bar needs is one boundary — the editing controls at the
+ * start, the destructive one at the end.
+ */
+class SlToolbarSpacer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarSpacer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToolbarSpacer, isStandalone: true, selector: "[slToolbarSpacer]", host: { attributes: { "data-part": "spacer", "aria-hidden": "true" } }, exportAs: ["slToolbarSpacer"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarSpacer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slToolbarSpacer]',
+                    standalone: true,
+                    exportAs: 'slToolbarSpacer',
+                    host: { 'data-part': 'spacer', 'aria-hidden': 'true' },
+                }]
+        }] });
+
+/**
+ * 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 units
+ * give way, and the counterparts they declared are rendered here in the order
+ * the bar held them, with a separator wherever one of the bar's own rules sat
+ * between two of them.
+ *
+ * The counterpart is an `ng-template` rendered through `NgTemplateOutlet` only
+ * while its unit is collapsed, 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` looked for the `SlMenu` above the bar
+ * and found none — `NG0201`. The outlet is therefore given an injector that
+ * provides the surface this component draws, and the item finds the menu it is
+ * actually inside. The DOM was never wrong; only the injector was.
+ *
+ * The host is `display: contents`, so the `button` below is a child of the bar
+ * itself: the part that carries the geometry has to be the box the bar lays
+ * out, and a wrapper between them would be a unit the collapse would try to
+ * measure.
+ *
+ * **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 SlToolbarOverflow {
+    /** 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 */ []));
+    toolbar = inject(SlToolbar);
+    /** 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.toolbar.collapsedUnits().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 nothing has collapsed 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.
+             *
+             * React does not have the problem because the family's own props are
+             * spread after the menu's; here the two writers are directives on one
+             * element and the last one wins.
+             */
+            element.setAttribute('data-part', 'overflow');
+            /* The bar measures the control, so it has to hold it. */
+            this.toolbar.registerTrigger(element);
+        });
+        destroyRef.onDestroy(() => this.toolbar.registerTrigger(null));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarOverflow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlToolbarOverflow, isStandalone: true, selector: "sl-toolbar-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: ["slToolbarOverflow"], 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 toolbar.collapsedUnits(); track unit.id) {
+        @if (unit.separatorBefore) {
+          <hr slMenuSeparator />
+        }
+        <ng-container
+          *ngTemplateOutlet="toolbar.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: SlToolbarOverflow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sl-toolbar-overflow',
+                    standalone: true,
+                    exportAs: 'slToolbarOverflow',
+                    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 toolbar.collapsedUnits(); track unit.id) {
+        @if (unit.separatorBefore) {
+          <hr slMenuSeparator />
+        }
+        <ng-container
+          *ngTemplateOutlet="toolbar.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 { SlToolbar, SlToolbarGroup, SlToolbarItem, SlToolbarOverflow, SlToolbarSeparator, SlToolbarSpacer, TOOLBAR_DEFAULTS, TOOLBAR_UNIT_ATTRIBUTE, injectToolbarDefaults, provideToolbarDefaults };
+//# sourceMappingURL=slotted-angular-toolbar.mjs.map