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

package/fesm2022/slotted-angular-popover.mjs

@@ -0,0 +1,799 @@
+import { popoverMessages } from '@slotted/core/i18n';
+import { createControllable } from '@slotted/core/state';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, booleanAttribute, numberAttribute, model, input, output, signal, computed, Directive, ElementRef, DestroyRef, TemplateRef, ViewContainerRef, effect, HostAttributeToken, ViewEncapsulation, ChangeDetectionStrategy, Component, afterEveryRender } from '@angular/core';
+import { injectMessages } from '@slotted/angular/i18n';
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { createPortalRoot } from '@slotted/core/portal';
+import { createPositioner } from '@slotted/core/positioner';
+import { createPresence } from '@slotted/core/presence';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+
+/**
+ * `arrowPadding` is larger than the tooltip's because the panel's corner radius
+ * is larger. `hideWhenDetached` is off: a task the reader is halfway through
+ * must not blink because the row behind it scrolled.
+ */
+const POPOVER_FALLBACK = {
+    align: 'center',
+    alignOffset: 0,
+    arrow: true,
+    arrowPadding: 12,
+    autoFocus: true,
+    closeOnEscape: true,
+    closeOnOutsidePress: true,
+    collisionPadding: 8,
+    flip: true,
+    hideWhenDetached: false,
+    mount: 'active',
+    portal: true,
+    shift: true,
+    side: 'bottom',
+    sideOffset: 0,
+    size: 'md',
+    strategy: 'absolute',
+    width: 'auto',
+};
+const POPOVER_DEFAULTS = new InjectionToken('slotted popover defaults', {
+    providedIn: 'root',
+    factory: () => POPOVER_FALLBACK,
+});
+/**
+ * An application decides once how its popovers behave and look. The close
+ * control's accessible name comes from the language in force
+ * (`provideSlotted`).
+ *
+ * What is stated here is written over the defaults already in force rather than
+ * over the fallback, which is what React's provider does: a section that sets
+ * `width` for itself keeps the application's `size`.
+ */
+function providePopoverDefaults(defaults) {
+    return {
+        provide: POPOVER_DEFAULTS,
+        useFactory: () => ({
+            ...(inject(POPOVER_DEFAULTS, { optional: true, skipSelf: true }) ?? POPOVER_FALLBACK),
+            ...defaults,
+        }),
+    };
+}
+/** What a popover renders as here, before it states anything of its own. */
+function injectPopoverDefaults() {
+    return inject(POPOVER_DEFAULTS);
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason `field` records:
+ * a module-level counter produces colliding sequences when two applications
+ * render in one server process, and the two sequences have to match for
+ * hydration.
+ */
+class SlPopoverIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-popover-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const optionalBoolean = (state) => state === undefined ? undefined : booleanAttribute(state);
+const optionalNumber = (value) => value === undefined ? undefined : numberAttribute(value);
+/**
+ * Interactive, non-modal content anchored to the control that opened it.
+ *
+ * It is the APG's non-modal dialog — the pattern the tooltip page names for a
+ * surface that holds focusable elements — and it is deliberately **not** modal.
+ * Nothing behind it becomes `inert`, the page keeps scrolling, `aria-modal` is
+ * never written and focus is not contained. The modal surface is `slDialog`.
+ *
+ * Written on an `ng-container`, because it renders nothing: the trigger stays
+ * where the consumer wrote it and the layer is portalled.
+ */
+class SlPopover {
+    /** Whether the panel is showing. Two-way, so a template may bind it directly. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** The state an uncontrolled popover starts in, read once in `ngOnInit`. */
+    defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The popover never opens. The trigger's own `disabled` is the consumer's. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    width = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    side = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    mount = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mount" }] : /* istanbul ignore next */ []));
+    strategy = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strategy" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * close control's accessible name (`close`).
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** What takes focus on open instead of the panel — a search field, usually. */
+    initialFocus = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialFocus" }] : /* istanbul ignore next */ []));
+    /** Where focus lands after it closes, for a trigger that is gone by then. */
+    finalFocus = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "finalFocus" }] : /* istanbul ignore next */ []));
+    arrow = input(undefined, { ...(ngDevMode ? { debugName: "arrow" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    autoFocus = input(undefined, { ...(ngDevMode ? { debugName: "autoFocus" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    closeOnEscape = input(undefined, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    closeOnOutsidePress = input(undefined, { ...(ngDevMode ? { debugName: "closeOnOutsidePress" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    flip = input(undefined, { ...(ngDevMode ? { debugName: "flip" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    shift = input(undefined, { ...(ngDevMode ? { debugName: "shift" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    hideWhenDetached = input(undefined, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    portal = input(undefined, { ...(ngDevMode ? { debugName: "portal" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    sideOffset = input(undefined, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    alignOffset = input(undefined, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    collisionPadding = input(undefined, { ...(ngDevMode ? { debugName: "collisionPadding" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    arrowPadding = input(undefined, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** One output for one transition, carrying the reason and the event. */
+    openChangeRequest = output();
+    defaults = injectPopoverDefaults();
+    /** The family's words in the language in force, with this popover's `messages` laid over them. */
+    t = injectMessages(popoverMessages, this.messages);
+    base = inject(SlPopoverIdFactory).next();
+    contentId = `${this.base}-panel`;
+    titleId = `${this.base}-title`;
+    descriptionId = `${this.base}-description`;
+    /** The elements the parts register, which the layer measures and focuses. */
+    triggerNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerNode" }] : /* istanbul ignore next */ []));
+    anchorNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchorNode" }] : /* istanbul ignore next */ []));
+    arrowNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrowNode" }] : /* istanbul ignore next */ []));
+    contentNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentNode" }] : /* istanbul ignore next */ []));
+    hasTitle = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []));
+    hasDescription = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
+    isOpen = computed(() => this.open() && !this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedWidth = computed(() => this.width() ?? this.defaults.width, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
+    resolvedSide = computed(() => this.side() ?? this.defaults.side, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []));
+    resolvedAlign = computed(() => this.align() ?? this.defaults.align, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
+    resolvedMount = computed(() => this.mount() ?? this.defaults.mount, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMount" }] : /* istanbul ignore next */ []));
+    resolvedStrategy = computed(() => this.strategy() ?? this.defaults.strategy, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStrategy" }] : /* istanbul ignore next */ []));
+    resolvedArrow = computed(() => (this.arrow() ?? this.defaults.arrow) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedArrow" }] : /* istanbul ignore next */ []));
+    resolvedAutoFocus = computed(() => (this.autoFocus() ?? this.defaults.autoFocus) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAutoFocus" }] : /* istanbul ignore next */ []));
+    /**
+     * The role the panel carries when the consumer wrote none. A family that
+     * provides itself as this one — `slHoverCard` — decides it here: a card
+     * nothing can enter is `presentation`, not a dialog nobody is told about.
+     */
+    contentRole = computed(() => 'dialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentRole" }] : /* istanbul ignore next */ []));
+    resolvedCloseOnEscape = computed(() => (this.closeOnEscape() ?? this.defaults.closeOnEscape) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCloseOnEscape" }] : /* istanbul ignore next */ []));
+    resolvedCloseOnOutsidePress = computed(() => (this.closeOnOutsidePress() ?? this.defaults.closeOnOutsidePress) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCloseOnOutsidePress" }] : /* istanbul ignore next */ []));
+    resolvedFlip = computed(() => (this.flip() ?? this.defaults.flip) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFlip" }] : /* istanbul ignore next */ []));
+    resolvedShift = computed(() => (this.shift() ?? this.defaults.shift) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedShift" }] : /* istanbul ignore next */ []));
+    resolvedHideWhenDetached = computed(() => (this.hideWhenDetached() ?? this.defaults.hideWhenDetached) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHideWhenDetached" }] : /* istanbul ignore next */ []));
+    resolvedPortal = computed(() => (this.portal() ?? this.defaults.portal) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPortal" }] : /* istanbul ignore next */ []));
+    resolvedSideOffset = computed(() => this.sideOffset() ?? this.defaults.sideOffset, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSideOffset" }] : /* istanbul ignore next */ []));
+    resolvedAlignOffset = computed(() => this.alignOffset() ?? this.defaults.alignOffset, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAlignOffset" }] : /* istanbul ignore next */ []));
+    resolvedCollisionPadding = computed(() => this.collisionPadding() ?? this.defaults.collisionPadding, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCollisionPadding" }] : /* istanbul ignore next */ []));
+    resolvedArrowPadding = computed(() => this.arrowPadding() ?? this.defaults.arrowPadding, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedArrowPadding" }] : /* istanbul ignore next */ []));
+    everOpened = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "everOpened" }] : /* istanbul ignore next */ []));
+    seen = computed(() => this.everOpened() || this.isOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seen" }] : /* istanbul ignore next */ []));
+    /**
+     * Read here rather than in the constructor, because inputs are not set yet
+     * there, and once: a later change to it is not new state.
+     */
+    ngOnInit() {
+        if (this.defaultOpen() && !this.open()) {
+            this.everOpened.set(true);
+            this.open.set(true);
+        }
+    }
+    /** Opens now. One of the two imperative actions a template cannot express. */
+    show() {
+        this.toggle(true, 'programmatic');
+    }
+    /** Closes now. */
+    hide() {
+        this.toggle(false, 'programmatic');
+    }
+    toggle(next, reason, source) {
+        if (next === this.isOpen())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.isOpen(),
+            onRequest: (request) => {
+                this.openChangeRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (cancelled)
+            return;
+        if (next)
+            this.everOpened.set(true);
+        if (moved)
+            this.open.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopover, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlPopover, isStandalone: true, selector: "[slPopover]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, finalFocus: { classPropertyName: "finalFocus", publicName: "finalFocus", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePress: { classPropertyName: "closeOnOutsidePress", publicName: "closeOnOutsidePress", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "shift", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, portal: { classPropertyName: "portal", publicName: "portal", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openChangeRequest: "openChangeRequest" }, exportAs: ["slPopover"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopover, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPopover]',
+                    standalone: true,
+                    exportAs: 'slPopover',
+                }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], mount: [{ type: i0.Input, args: [{ isSignal: true, alias: "mount", required: false }] }], strategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "strategy", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], finalFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "finalFocus", required: false }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnOutsidePress: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePress", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], shift: [{ type: i0.Input, args: [{ isSignal: true, alias: "shift", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], portal: [{ type: i0.Input, args: [{ isSignal: true, alias: "portal", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }] } });
+
+/** An element, or a selector read inside the panel. */
+function resolveFocus(target, scope) {
+    if (target === undefined)
+        return null;
+    if (typeof target === 'string')
+        return scope?.querySelector(target) ?? null;
+    return target;
+}
+/**
+ * How far the layer moves along its alignment axis so the panel's edge, not
+ * the layer's, meets the anchor's. The layer's padding is the gap around the
+ * panel, the same on every side, so a layer aligned to the anchor's start edge
+ * leaves the panel one gap inside it. A centred layer needs nothing, and
+ * neither does one as wide as its anchor, which the positioner centres.
+ */
+function alignInset(layer, side, align, width) {
+    if (align === 'center')
+        return 0;
+    if (width === 'anchor' && (side === 'top' || side === 'bottom'))
+        return 0;
+    const style = layer.ownerDocument.defaultView?.getComputedStyle(layer);
+    const gap = Number.parseFloat(style?.paddingTop ?? '') || 0;
+    return align === 'start' ? -gap : gap;
+}
+/**
+ * The control that opens the panel.
+ *
+ * The directive goes on the consumer's own control — a `button`, which is what
+ * gives `Enter` and `Space` for free. It carries the wiring and `data-open`,
+ * and **no `data-part`**: a trigger is very often another family's root, and
+ * claiming it would unstyle that family.
+ */
+class SlPopoverTrigger {
+    popover = inject(SlPopover);
+    native = inject(ElementRef).nativeElement;
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        this.popover.triggerNode.set(this.native);
+        this.destroyRef.onDestroy(() => this.popover.triggerNode.set(null));
+    }
+    /**
+     * After the view, not as a host listener. A `(click)` the consumer wrote on
+     * the same element is bound when the view is created, so a listener bound any
+     * earlier runs first and reads `defaultPrevented` before the consumer has had
+     * the chance to set it — the order `slIconButton` records.
+     */
+    ngAfterViewInit() {
+        const onClick = (event) => {
+            if (event.defaultPrevented)
+                return;
+            const reason = event.detail === 0 ? 'keyboard' : 'pointer';
+            this.popover.toggle(!this.popover.isOpen(), reason, event);
+        };
+        this.native.addEventListener('click', onClick);
+        this.destroyRef.onDestroy(() => this.native.removeEventListener('click', onClick));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPopoverTrigger, isStandalone: true, selector: "[slPopoverTrigger]", host: { attributes: { "aria-haspopup": "dialog" }, properties: { "attr.aria-controls": "popover.contentNode() !== null ? popover.contentId : null", "attr.aria-expanded": "popover.isOpen()", "attr.data-open": "popover.isOpen() ? '' : null" } }, exportAs: ["slPopoverTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPopoverTrigger]',
+                    standalone: true,
+                    exportAs: 'slPopoverTrigger',
+                    host: {
+                        '[attr.aria-controls]': 'popover.contentNode() !== null ? popover.contentId : null',
+                        '[attr.aria-expanded]': 'popover.isOpen()',
+                        'aria-haspopup': 'dialog',
+                        '[attr.data-open]': "popover.isOpen() ? '' : null",
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * What the panel points at, when that is not the button that opened it — a row
+ * whose action menu hangs off the row rather than off its own control. It
+ * carries no attributes: it is only measured.
+ */
+class SlPopoverAnchor {
+    constructor() {
+        const popover = inject(SlPopover);
+        const native = inject(ElementRef).nativeElement;
+        popover.anchorNode.set(native);
+        inject(DestroyRef).onDestroy(() => popover.anchorNode.set(null));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPopoverAnchor, isStandalone: true, selector: "[slPopoverAnchor]", exportAs: ["slPopoverAnchor"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverAnchor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPopoverAnchor]',
+                    standalone: true,
+                    exportAs: 'slPopoverAnchor',
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * The positioned layer, built from a template rather than from an element, for
+ * the reason `slTooltipLayer` sets out: `mount="active"` means the layer exists
+ * only while it is open, and a component cannot remove its own host.
+ *
+ * It also builds the two focus guards. Focus reaching one arrived by `Tab` at
+ * the edge of a layer that lives at the end of the document, so the family
+ * closes and puts focus back on the trigger, from which the reader's next `Tab`
+ * continues down the page. It is the only answer that keeps the reading order
+ * intact without trapping focus in a layer that is not modal.
+ */
+class SlPopoverLayer {
+    popover = inject(SlPopover);
+    template = inject((TemplateRef));
+    viewContainer = inject(ViewContainerRef);
+    comment = this.viewContainer.element.nativeElement;
+    arrowPlaceholder = this.comment.ownerDocument.createComment('slPopoverArrow');
+    /** A signal, so every effect that reads it re-runs when the layer arrives. */
+    layerNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layerNode" }] : /* istanbul ignore next */ []));
+    view = null;
+    portal = null;
+    positioner = null;
+    dismissable = null;
+    status = signal('unmounted', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    positioned = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []));
+    wasOpen = false;
+    presence = createPresence({
+        present: false,
+        onStatusChange: (next) => this.status.set(next),
+    });
+    mounted = computed(() => {
+        const mount = this.popover.resolvedMount();
+        if (mount === 'eager')
+            return true;
+        if (mount === 'lazy')
+            return this.popover.seen();
+        return this.status() !== 'unmounted';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mounted" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => this.presence.sync(this.popover.isOpen()));
+        effect(() => (this.mounted() ? this.build() : this.teardown()));
+        effect(() => this.place());
+        effect(() => this.stack());
+        effect(() => this.paint());
+        effect(() => this.showArrow());
+        effect(() => this.moveFocus());
+        inject(DestroyRef).onDestroy(() => {
+            this.presence.destroy();
+            this.teardown();
+        });
+    }
+    /** Measures and places the layer again. */
+    reposition() {
+        void this.positioner?.update();
+    }
+    build() {
+        if (this.layerNode() !== null)
+            return;
+        const document = this.comment.ownerDocument;
+        const layer = document.createElement('div');
+        layer.setAttribute('data-ui', 'popover');
+        layer.setAttribute('data-part', 'root');
+        const view = this.viewContainer.createEmbeddedView(this.template);
+        view.detectChanges();
+        layer.appendChild(this.guard(document));
+        for (const node of view.rootNodes)
+            layer.appendChild(node);
+        layer.appendChild(this.guard(document));
+        const portal = createPortalRoot({
+            origin: this.popover.anchorNode() ?? this.popover.triggerNode(),
+            disabled: !this.popover.resolvedPortal(),
+        });
+        const container = portal.container ?? this.comment.parentNode;
+        if (container === this.comment.parentNode)
+            container?.insertBefore(layer, this.comment);
+        else
+            container?.appendChild(layer);
+        this.view = view;
+        this.portal = portal;
+        this.presence.setNode(layer);
+        this.layerNode.set(layer);
+    }
+    guard(document) {
+        const guard = document.createElement('span');
+        guard.setAttribute('data-part', 'focus-guard');
+        guard.setAttribute('aria-hidden', 'true');
+        guard.tabIndex = 0;
+        guard.addEventListener('focus', () => {
+            this.popover.toggle(false, 'keyboard');
+            this.popover.triggerNode()?.focus();
+        });
+        return guard;
+    }
+    teardown() {
+        this.positioner?.destroy();
+        this.positioner = null;
+        this.dismissable?.destroy();
+        this.dismissable = null;
+        this.presence.setNode(null);
+        this.layerNode()?.remove();
+        this.layerNode.set(null);
+        this.view?.destroy();
+        this.view = null;
+        this.portal?.release();
+        this.portal = null;
+        this.positioned.set(false);
+    }
+    place() {
+        const layer = this.layerNode();
+        const anchor = this.popover.anchorNode() ?? this.popover.triggerNode();
+        const align = this.popover.resolvedAlign();
+        const side = this.popover.resolvedSide();
+        const width = this.popover.resolvedWidth();
+        const options = {
+            align,
+            alignOffset: this.popover.resolvedAlignOffset() +
+                (layer === null ? 0 : alignInset(layer, side, align, width)),
+            boundaryPadding: this.popover.resolvedCollisionPadding(),
+            flip: this.popover.resolvedFlip(),
+            hideWhenDetached: this.popover.resolvedHideWhenDetached(),
+            matchWidth: width === 'anchor',
+            shift: this.popover.resolvedShift(),
+            side,
+            sideOffset: this.popover.resolvedSideOffset(),
+            strategy: this.popover.resolvedStrategy(),
+        };
+        const arrow = this.popover.resolvedArrow() ? this.popover.arrowNode() : null;
+        this.positioner?.destroy();
+        this.positioner = null;
+        if (layer === null || anchor === null)
+            return;
+        this.positioner = createPositioner(anchor, layer, {
+            ...options,
+            ...(arrow ? { arrow, arrowPadding: this.popover.resolvedArrowPadding() } : {}),
+        });
+        void this.positioner.update().then(() => this.positioned.set(true));
+    }
+    /**
+     * One layer in the single stack, and only while it is open. It is not modal:
+     * nothing outside becomes `inert` and the page keeps scrolling. The trigger
+     * and the anchor are branches, so pressing either is inside the layer.
+     */
+    stack() {
+        const layer = this.layerNode();
+        const open = this.popover.isOpen();
+        const branches = [this.popover.triggerNode(), this.popover.anchorNode()].filter((element) => element !== null);
+        this.dismissable?.destroy();
+        this.dismissable = null;
+        if (layer === null || !open)
+            return;
+        this.dismissable = createDismissableLayer(layer, {
+            escape: this.popover.resolvedCloseOnEscape(),
+            focusOutside: false,
+            modal: false,
+            outsidePress: this.popover.resolvedCloseOnOutsidePress(),
+            scrollLock: false,
+            ...(branches.length > 0 ? { branches } : {}),
+            onDismiss: (request) => {
+                this.popover.toggle(false, request.reason === 'escape' ? 'escape' : 'outsidePress', request.source);
+            },
+        });
+    }
+    paint() {
+        const layer = this.layerNode();
+        if (layer === null)
+            return;
+        layer.setAttribute('data-align', this.popover.resolvedAlign());
+        layer.setAttribute('data-size', this.popover.resolvedSize());
+        layer.setAttribute('data-width', this.popover.resolvedWidth());
+        if (this.popover.isOpen() && this.positioned())
+            layer.setAttribute('data-open', '');
+        else
+            layer.removeAttribute('data-open');
+    }
+    /**
+     * The arrow the consumer wrote leaves the layer while `arrow` resolves to
+     * false, and a comment holds its place, so the layer holds no arrow — as
+     * React's `PopoverArrow` renders none — and the positioner measures none.
+     */
+    showArrow() {
+        const layer = this.layerNode();
+        const arrow = this.popover.arrowNode();
+        if (layer === null || arrow === null)
+            return;
+        if (this.popover.resolvedArrow()) {
+            if (this.arrowPlaceholder.parentNode === layer)
+                this.arrowPlaceholder.replaceWith(arrow);
+        }
+        else if (arrow.parentNode === layer) {
+            arrow.replaceWith(this.arrowPlaceholder);
+        }
+    }
+    /**
+     * Focus goes to the panel itself rather than to its first control, so a
+     * reader hears the panel's name before its contents. It waits for the first
+     * measurement, because focusing a layer still at the origin scrolls the page
+     * to it.
+     */
+    moveFocus() {
+        const open = this.popover.isOpen();
+        const layer = this.layerNode();
+        const content = this.popover.contentNode();
+        const positioned = this.positioned();
+        if (open && positioned && !this.wasOpen) {
+            this.wasOpen = true;
+            if (!this.popover.resolvedAutoFocus())
+                return;
+            (resolveFocus(this.popover.initialFocus(), content) ?? content)?.focus();
+            return;
+        }
+        if (!open && this.wasOpen) {
+            this.wasOpen = false;
+            /**
+             * Only while the focus is still inside the layer. A reader who closed the
+             * popover by pressing something else on the page keeps the focus they
+             * moved to; taking it back would undo their own move.
+             */
+            const active = layer?.ownerDocument.activeElement ?? null;
+            if (layer !== null && active !== null && !layer.contains(active))
+                return;
+            (resolveFocus(this.popover.finalFocus(), content) ?? this.popover.triggerNode())?.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverLayer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPopoverLayer, isStandalone: true, selector: "ng-template[slPopoverLayer]", exportAs: ["slPopoverLayer"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverLayer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[slPopoverLayer]',
+                    standalone: true,
+                    exportAs: 'slPopoverLayer',
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * The panel. `role="dialog"`, named by its title and described by its
+ * description when those parts are present, and `aria-modal` is never written —
+ * saying it would tell a reader the rest of the page is gone while it is not.
+ *
+ * A popover with no title gets no `aria-labelledby`; the family invents no
+ * name, and a consumer writes `aria-label` here instead — which is why the
+ * host attribute they wrote is read before the binding is computed.
+ *
+ * It is the one part written as a component, because a component is what can
+ * carry `styleUrl`: this is where the family's authored stylesheet enters an
+ * Angular application.
+ */
+class SlPopoverContent {
+    popover = inject(SlPopover);
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenRole = inject(new HostAttributeToken('role'), { optional: true });
+    /* The consumer's own `role` wins; the popover decides the rest. */
+    role = computed(() => this.writtenRole ?? this.popover.contentRole(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.popover.hasTitle() && this.writtenLabel === null ? this.popover.titleId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.popover.hasDescription() ? this.popover.descriptionId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const native = inject(ElementRef).nativeElement;
+        this.popover.contentNode.set(native);
+        inject(DestroyRef).onDestroy(() => this.popover.contentNode.set(null));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlPopoverContent, isStandalone: true, selector: "[slPopoverContent]", host: { attributes: { "data-part": "content", "tabindex": "-1" }, properties: { "attr.role": "role()", "attr.id": "popover.contentId", "attr.aria-labelledby": "labelledBy()", "attr.aria-describedby": "describedBy()" } }, exportAs: ["slPopoverContent"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=popover]{--_gap: var(--slotted-popover-gap, var(--slotted-space-4, .5rem));--_surface: var(--slotted-popover-surface, var(--slotted-surface-raised, #ffffff));--_text: var(--slotted-popover-text, var(--slotted-text, #0f172a));--_border-color: var(--slotted-popover-border-color, var(--slotted-border-subtle, #e2e8f0));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-popover-radius, var(--slotted-radius-lg, 8px));--_shadow: var(--slotted-popover-shadow, var(--slotted-shadow-md));--_arrow-size: var(--slotted-popover-arrow-size, .625rem);--_arrow-tip-radius: var(--slotted-popover-arrow-tip-radius, var(--slotted-radius-xs, 2px));--_inset-block: var(--slotted-popover-padding-block, var(--slotted-space-5, .75rem));--_inset-inline: var(--slotted-popover-padding-inline, var(--slotted-space-6, 1rem));--_row-gap: var(--slotted-control-gap-md, .5rem);--_title-font-size: var(--slotted-font-size-lg, 1rem);--_font-size: var(--slotted-font-size-md, .875rem);--_measure: var(--slotted-popover-measure, 20rem);position:absolute;inset-block-start:0;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));isolation:isolate;box-sizing:border-box;padding:var(--_gap);inline-size:max-content;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));pointer-events:none;opacity:0;--_enter-distance: var(--slotted-space-2, .25rem);translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=popover][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=popover]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=popover][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=popover][data-open][data-positioned]{animation:slotted-popover-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=popover][data-open][data-positioned][data-side=top]{animation-name:slotted-popover-enter-up}[data-ui=popover][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-popover-fade}@keyframes slotted-popover-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-popover-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-popover-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=popover],[data-ui=popover][data-side=top],[data-ui=popover][data-side=left],[data-ui=popover][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=popover][data-open][data-positioned],[data-ui=popover][data-open][data-positioned][data-side=top],[data-ui=popover][data-open][data-positioned][data-side=left],[data-ui=popover][data-open][data-positioned][data-side=right]{animation-name:slotted-popover-fade}}[data-ui=popover][data-detached]{visibility:hidden}[data-ui=popover][data-size=sm]{--_inset-block: var(--slotted-popover-padding-block-sm, var(--slotted-space-4, .5rem));--_inset-inline: var(--slotted-popover-padding-inline-sm, var(--slotted-space-5, .75rem));--_title-font-size: var(--slotted-font-size-md, .875rem);--_font-size: var(--slotted-font-size-sm, .8125rem);--_measure: var(--slotted-popover-measure-sm, 16rem)}[data-ui=popover][data-size=lg]{--_inset-block: var(--slotted-popover-padding-block-lg, var(--slotted-space-6, 1rem));--_inset-inline: var(--slotted-popover-padding-inline-lg, var(--slotted-space-7, 1.25rem));--_title-font-size: var(--slotted-font-size-xl, 1.125rem);--_measure: var(--slotted-popover-measure-lg, 24rem)}[data-ui=popover][data-width=anchor]{inline-size:calc(var(--slotted-positioner-anchor-width, 0px) + 2 * var(--_gap));max-inline-size:var(--slotted-positioner-available-width, 100vw)}[data-ui=popover]>[data-part=focus-guard]{position:absolute;inline-size:1px;block-size:1px;padding:0;overflow:hidden;opacity:0;outline:none;pointer-events:none}[data-ui=popover]>[data-part=content]{box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-inline-size:100%;max-block-size:calc(var(--slotted-positioner-available-height, 100vh) - 2 * var(--_gap));border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);box-shadow:var(--_shadow);overflow:clip;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5);text-align:start;pointer-events:auto;outline:none}[data-ui=popover]>[data-part=content]>:only-child:not([data-part=header],[data-part=body],[data-part=footer]){grid-row:2;min-block-size:0}[data-ui=popover]>[data-part=content]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=popover]>[data-part=content]>[data-part=header]{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--_row-gap);row-gap:var(--slotted-space-2, .25rem);align-items:start;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui=popover]>[data-part=content]>[data-part=header]>[data-part=title]{grid-column:1;margin:0;font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_title-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-lg, 1.5);color:var(--_text);overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=popover]>[data-part=content]>[data-part=header]>[data-part=description]{grid-column:1;margin:0;font-size:var(--slotted-font-size-sm, .8125rem);line-height:var(--slotted-line-height-sm, 1.45);color:var(--slotted-text-muted, #5b6b7f);overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=popover]>[data-part=content]>[data-part=header]>[data-part=close]{grid-column:2;grid-row:1;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;inline-size:var(--slotted-control-height-sm, 30px);block-size:var(--slotted-control-height-sm, 30px);margin-block-start:calc(-1 * var(--slotted-space-2, .25rem));margin-inline-end:calc(-1 * var(--slotted-space-3, .375rem));padding:0;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));background:transparent;color:var(--slotted-text-muted, #5b6b7f);cursor:pointer;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=popover]>[data-part=content]>[data-part=header]>[data-part=close]:enabled:hover{background:var(--slotted-tone-secondary-subtle-hover, rgb(15 23 42 / .06));color:var(--_text)}[data-ui=popover]>[data-part=content]>[data-part=header]>[data-part=close]:enabled:active{background:var(--slotted-tone-secondary-subtle-active, rgb(15 23 42 / .1))}[data-ui=popover]>[data-part=content]>[data-part=header]>[data-part=close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=popover]>[data-part=content]>[data-part=body]{grid-row:2;min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;overflow-wrap:anywhere;unicode-bidi:plaintext;padding-inline:var(--_inset-inline);padding-block-end:var(--_inset-block);background:linear-gradient(var(--_surface) 30%,transparent) center top / 100% var(--_inset-block) no-repeat local,linear-gradient(transparent,var(--_surface) 70%) center bottom / 100% var(--_inset-block) no-repeat local,radial-gradient(farthest-side at 50% 0,color-mix(in oklab,var(--_text) 12%,transparent),transparent) center top / 100% var(--slotted-space-3, .375rem) no-repeat scroll,radial-gradient(farthest-side at 50% 100%,color-mix(in oklab,var(--_text) 12%,transparent),transparent) center bottom / 100% var(--slotted-space-3, .375rem) no-repeat scroll}[data-ui=popover]>[data-part=content]>[data-part=body]:first-child{padding-block-start:var(--_inset-block)}[data-ui=popover]>[data-part=content]>[data-part=footer]{grid-row:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--_row-gap);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);border-block-start:var(--_border-width) solid var(--_border-color)}[data-ui=popover]>[data-part=arrow]{--_arrow-x: clamp( calc(var(--_gap) + var(--_radius)), var(--slotted-positioner-arrow-x, 0px), calc(100% - var(--_gap) - var(--_radius) - var(--_arrow-size)) );--_arrow-y: clamp( calc(var(--_gap) + var(--_radius)), var(--slotted-positioner-arrow-y, 0px), calc(100% - var(--_gap) - var(--_radius) - var(--_arrow-size)) );position:absolute;z-index:1;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);rotate:45deg;background:var(--_surface);border:0 solid var(--_border-color)}[data-ui=popover][data-side=top]>[data-part=arrow]{left:var(--_arrow-x);top:auto;bottom:calc(var(--_gap) - var(--_arrow-size) / 2);border-right-width:var(--_border-width);border-bottom-width:var(--_border-width);border-bottom-right-radius:var(--_arrow-tip-radius)}[data-ui=popover][data-side=bottom]>[data-part=arrow]{left:var(--_arrow-x);top:calc(var(--_gap) - var(--_arrow-size) / 2);bottom:auto;border-top-width:var(--_border-width);border-left-width:var(--_border-width);border-top-left-radius:var(--_arrow-tip-radius)}[data-ui=popover][data-side=left]>[data-part=arrow]{top:var(--_arrow-y);left:auto;right:calc(var(--_gap) - var(--_arrow-size) / 2);border-top-width:var(--_border-width);border-right-width:var(--_border-width);border-top-right-radius:var(--_arrow-tip-radius)}[data-ui=popover][data-side=right]>[data-part=arrow]{top:var(--_arrow-y);left:calc(var(--_gap) - var(--_arrow-size) / 2);right:auto;border-bottom-width:var(--_border-width);border-left-width:var(--_border-width);border-bottom-left-radius:var(--_arrow-tip-radius)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverContent, decorators: [{
+            type: Component,
+            args: [{ selector: '[slPopoverContent]', standalone: true, exportAs: 'slPopoverContent', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-part': 'content',
+                        tabindex: '-1',
+                        '[attr.role]': 'role()',
+                        '[attr.id]': 'popover.contentId',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                    }, styles: ["@layer slotted.components{[data-ui=popover]{--_gap: var(--slotted-popover-gap, var(--slotted-space-4, .5rem));--_surface: var(--slotted-popover-surface, var(--slotted-surface-raised, #ffffff));--_text: var(--slotted-popover-text, var(--slotted-text, #0f172a));--_border-color: var(--slotted-popover-border-color, var(--slotted-border-subtle, #e2e8f0));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-popover-radius, var(--slotted-radius-lg, 8px));--_shadow: var(--slotted-popover-shadow, var(--slotted-shadow-md));--_arrow-size: var(--slotted-popover-arrow-size, .625rem);--_arrow-tip-radius: var(--slotted-popover-arrow-tip-radius, var(--slotted-radius-xs, 2px));--_inset-block: var(--slotted-popover-padding-block, var(--slotted-space-5, .75rem));--_inset-inline: var(--slotted-popover-padding-inline, var(--slotted-space-6, 1rem));--_row-gap: var(--slotted-control-gap-md, .5rem);--_title-font-size: var(--slotted-font-size-lg, 1rem);--_font-size: var(--slotted-font-size-md, .875rem);--_measure: var(--slotted-popover-measure, 20rem);position:absolute;inset-block-start:0;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));isolation:isolate;box-sizing:border-box;padding:var(--_gap);inline-size:max-content;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));pointer-events:none;opacity:0;--_enter-distance: var(--slotted-space-2, .25rem);translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=popover][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=popover]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=popover][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=popover][data-open][data-positioned]{animation:slotted-popover-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=popover][data-open][data-positioned][data-side=top]{animation-name:slotted-popover-enter-up}[data-ui=popover][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-popover-fade}@keyframes slotted-popover-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-popover-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-popover-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=popover],[data-ui=popover][data-side=top],[data-ui=popover][data-side=left],[data-ui=popover][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=popover][data-open][data-positioned],[data-ui=popover][data-open][data-positioned][data-side=top],[data-ui=popover][data-open][data-positioned][data-side=left],[data-ui=popover][data-open][data-positioned][data-side=right]{animation-name:slotted-popover-fade}}[data-ui=popover][data-detached]{visibility:hidden}[data-ui=popover][data-size=sm]{--_inset-block: var(--slotted-popover-padding-block-sm, var(--slotted-space-4, .5rem));--_inset-inline: var(--slotted-popover-padding-inline-sm, var(--slotted-space-5, .75rem));--_title-font-size: var(--slotted-font-size-md, .875rem);--_font-size: var(--slotted-font-size-sm, .8125rem);--_measure: var(--slotted-popover-measure-sm, 16rem)}[data-ui=popover][data-size=lg]{--_inset-block: var(--slotted-popover-padding-block-lg, var(--slotted-space-6, 1rem));--_inset-inline: var(--slotted-popover-padding-inline-lg, var(--slotted-space-7, 1.25rem));--_title-font-size: var(--slotted-font-size-xl, 1.125rem);--_measure: var(--slotted-popover-measure-lg, 24rem)}[data-ui=popover][data-width=anchor]{inline-size:calc(var(--slotted-positioner-anchor-width, 0px) + 2 * var(--_gap));max-inline-size:var(--slotted-positioner-available-width, 100vw)}[data-ui=popover]>[data-part=focus-guard]{position:absolute;inline-size:1px;block-size:1px;padding:0;overflow:hidden;opacity:0;outline:none;pointer-events:none}[data-ui=popover]>[data-part=content]{box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-inline-size:100%;max-block-size:calc(var(--slotted-positioner-available-height, 100vh) - 2 * var(--_gap));border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);box-shadow:var(--_shadow);overflow:clip;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5);text-align:start;pointer-events:auto;outline:none}[data-ui=popover]>[data-part=content]>:only-child:not([data-part=header],[data-part=body],[data-part=footer]){grid-row:2;min-block-size:0}[data-ui=popover]>[data-part=content]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=popover]>[data-part=content]>[data-part=header]{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--_row-gap);row-gap:var(--slotted-space-2, .25rem);align-items:start;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui=popover]>[data-part=content]>[data-part=header]>[data-part=title]{grid-column:1;margin:0;font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_title-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-lg, 1.5);color:var(--_text);overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=popover]>[data-part=content]>[data-part=header]>[data-part=description]{grid-column:1;margin:0;font-size:var(--slotted-font-size-sm, .8125rem);line-height:var(--slotted-line-height-sm, 1.45);color:var(--slotted-text-muted, #5b6b7f);overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=popover]>[data-part=content]>[data-part=header]>[data-part=close]{grid-column:2;grid-row:1;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;inline-size:var(--slotted-control-height-sm, 30px);block-size:var(--slotted-control-height-sm, 30px);margin-block-start:calc(-1 * var(--slotted-space-2, .25rem));margin-inline-end:calc(-1 * var(--slotted-space-3, .375rem));padding:0;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));background:transparent;color:var(--slotted-text-muted, #5b6b7f);cursor:pointer;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=popover]>[data-part=content]>[data-part=header]>[data-part=close]:enabled:hover{background:var(--slotted-tone-secondary-subtle-hover, rgb(15 23 42 / .06));color:var(--_text)}[data-ui=popover]>[data-part=content]>[data-part=header]>[data-part=close]:enabled:active{background:var(--slotted-tone-secondary-subtle-active, rgb(15 23 42 / .1))}[data-ui=popover]>[data-part=content]>[data-part=header]>[data-part=close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=popover]>[data-part=content]>[data-part=body]{grid-row:2;min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;overflow-wrap:anywhere;unicode-bidi:plaintext;padding-inline:var(--_inset-inline);padding-block-end:var(--_inset-block);background:linear-gradient(var(--_surface) 30%,transparent) center top / 100% var(--_inset-block) no-repeat local,linear-gradient(transparent,var(--_surface) 70%) center bottom / 100% var(--_inset-block) no-repeat local,radial-gradient(farthest-side at 50% 0,color-mix(in oklab,var(--_text) 12%,transparent),transparent) center top / 100% var(--slotted-space-3, .375rem) no-repeat scroll,radial-gradient(farthest-side at 50% 100%,color-mix(in oklab,var(--_text) 12%,transparent),transparent) center bottom / 100% var(--slotted-space-3, .375rem) no-repeat scroll}[data-ui=popover]>[data-part=content]>[data-part=body]:first-child{padding-block-start:var(--_inset-block)}[data-ui=popover]>[data-part=content]>[data-part=footer]{grid-row:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--_row-gap);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);border-block-start:var(--_border-width) solid var(--_border-color)}[data-ui=popover]>[data-part=arrow]{--_arrow-x: clamp( calc(var(--_gap) + var(--_radius)), var(--slotted-positioner-arrow-x, 0px), calc(100% - var(--_gap) - var(--_radius) - var(--_arrow-size)) );--_arrow-y: clamp( calc(var(--_gap) + var(--_radius)), var(--slotted-positioner-arrow-y, 0px), calc(100% - var(--_gap) - var(--_radius) - var(--_arrow-size)) );position:absolute;z-index:1;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);rotate:45deg;background:var(--_surface);border:0 solid var(--_border-color)}[data-ui=popover][data-side=top]>[data-part=arrow]{left:var(--_arrow-x);top:auto;bottom:calc(var(--_gap) - var(--_arrow-size) / 2);border-right-width:var(--_border-width);border-bottom-width:var(--_border-width);border-bottom-right-radius:var(--_arrow-tip-radius)}[data-ui=popover][data-side=bottom]>[data-part=arrow]{left:var(--_arrow-x);top:calc(var(--_gap) - var(--_arrow-size) / 2);bottom:auto;border-top-width:var(--_border-width);border-left-width:var(--_border-width);border-top-left-radius:var(--_arrow-tip-radius)}[data-ui=popover][data-side=left]>[data-part=arrow]{top:var(--_arrow-y);left:auto;right:calc(var(--_gap) - var(--_arrow-size) / 2);border-top-width:var(--_border-width);border-right-width:var(--_border-width);border-top-right-radius:var(--_arrow-tip-radius)}[data-ui=popover][data-side=right]>[data-part=arrow]{top:var(--_arrow-y);left:calc(var(--_gap) - var(--_arrow-size) / 2);right:auto;border-bottom-width:var(--_border-width);border-left-width:var(--_border-width);border-bottom-left-radius:var(--_arrow-tip-radius)}}\n"] }]
+        }], ctorParameters: () => [] });
+/** The title, the description and the close control, on the row that stays put. */
+class SlPopoverHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPopoverHeader, isStandalone: true, selector: "[slPopoverHeader]", host: { attributes: { "data-part": "header" } }, exportAs: ["slPopoverHeader"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPopoverHeader]',
+                    standalone: true,
+                    exportAs: 'slPopoverHeader',
+                    host: { 'data-part': 'header' },
+                }]
+        }] });
+/**
+ * The panel's accessible name. The consumer writes the element, so a heading
+ * that belongs in the document outline is theirs to choose — the reason
+ * `result-state` records for the same decision.
+ */
+class SlPopoverTitle {
+    popover = inject(SlPopover);
+    constructor() {
+        this.popover.hasTitle.set(true);
+        inject(DestroyRef).onDestroy(() => this.popover.hasTitle.set(false));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPopoverTitle, isStandalone: true, selector: "[slPopoverTitle]", host: { attributes: { "data-part": "title" }, properties: { "attr.id": "popover.titleId" } }, exportAs: ["slPopoverTitle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPopoverTitle]',
+                    standalone: true,
+                    exportAs: 'slPopoverTitle',
+                    host: { 'data-part': 'title', '[attr.id]': 'popover.titleId' },
+                }]
+        }], ctorParameters: () => [] });
+/** One line under the title, referenced by the panel rather than announced. */
+class SlPopoverDescription {
+    popover = inject(SlPopover);
+    constructor() {
+        this.popover.hasDescription.set(true);
+        inject(DestroyRef).onDestroy(() => this.popover.hasDescription.set(false));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPopoverDescription, isStandalone: true, selector: "[slPopoverDescription]", host: { attributes: { "data-part": "description" }, properties: { "attr.id": "popover.descriptionId" } }, exportAs: ["slPopoverDescription"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPopoverDescription]',
+                    standalone: true,
+                    exportAs: 'slPopoverDescription',
+                    host: { 'data-part': 'description', '[attr.id]': 'popover.descriptionId' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * The only part that scrolls, bounded by the height the engine says is left.
+ * Bounding the whole panel would scroll the title out of sight, which is how a
+ * reader loses track of what they are in.
+ */
+class SlPopoverBody {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPopoverBody, isStandalone: true, selector: "[slPopoverBody]", host: { attributes: { "data-part": "body" } }, exportAs: ["slPopoverBody"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPopoverBody]',
+                    standalone: true,
+                    exportAs: 'slPopoverBody',
+                    host: { 'data-part': 'body' },
+                }]
+        }] });
+/** The actions row, which keeps its height while the body scrolls under it. */
+class SlPopoverFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPopoverFooter, isStandalone: true, selector: "[slPopoverFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slPopoverFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPopoverFooter]',
+                    standalone: true,
+                    exportAs: 'slPopoverFooter',
+                    host: { 'data-part': 'footer' },
+                }]
+        }] });
+/**
+ * The pointer's way out. The keyboard has Escape, and a reader on a touch
+ * device has no Escape key at all. A close control with no text of its own —
+ * the drawn cross, or the consumer's icon — is named by the catalog's `close`;
+ * one that shows words, such as "Done", is named by them, and a name the
+ * consumer wrote on the element wins over both.
+ */
+class SlPopoverClose {
+    popover = inject(SlPopover);
+    written = inject(new HostAttributeToken('aria-label'), { optional: true });
+    native = inject(ElementRef).nativeElement;
+    /** Whether the content shows text, read after every render because it may change. */
+    hasText = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasText" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.written ?? (this.hasText() ? null : this.popover.t('close')), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterEveryRender(() => this.hasText.set((this.native.textContent ?? '').trim() !== ''));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverClose, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlPopoverClose, isStandalone: true, selector: "button[slPopoverClose]", host: { attributes: { "data-part": "close", "type": "button" }, listeners: { "click": "popover.toggle(false, \"dismiss\", $event)" }, properties: { "attr.aria-label": "label()" } }, exportAs: ["slPopoverClose"], ngImport: i0, template: `<ng-content
+    ><span slIcon size="sm"><svg slGlyph name="x"></svg></span
+  ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverClose, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slPopoverClose]',
+                    standalone: true,
+                    exportAs: 'slPopoverClose',
+                    imports: [SlGlyph, SlIcon],
+                    /* The cross is drawn unless the consumer wrote content of their own. */
+                    template: `<ng-content
+    ><span slIcon size="sm"><svg slGlyph name="x"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-part': 'close',
+                        type: 'button',
+                        '[attr.aria-label]': 'label()',
+                        '(click)': 'popover.toggle(false, "dismiss", $event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * The mark that points at the anchor. The family draws it; the positioner
+ * measures it and says where it goes. It is hidden from assistive technology.
+ * While `arrow` resolves to false the layer takes it out (`slPopoverLayer`).
+ */
+class SlPopoverArrow {
+    constructor() {
+        const popover = inject(SlPopover);
+        const native = inject(ElementRef).nativeElement;
+        popover.arrowNode.set(native);
+        inject(DestroyRef).onDestroy(() => popover.arrowNode.set(null));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPopoverArrow, isStandalone: true, selector: "[slPopoverArrow]", host: { attributes: { "data-part": "arrow", "aria-hidden": "true" } }, exportAs: ["slPopoverArrow"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPopoverArrow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPopoverArrow]',
+                    standalone: true,
+                    exportAs: 'slPopoverArrow',
+                    host: { 'data-part': 'arrow', 'aria-hidden': 'true' },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { POPOVER_DEFAULTS, POPOVER_FALLBACK, SlPopover, SlPopoverAnchor, SlPopoverArrow, SlPopoverBody, SlPopoverClose, SlPopoverContent, SlPopoverDescription, SlPopoverFooter, SlPopoverHeader, SlPopoverIdFactory, SlPopoverLayer, SlPopoverTitle, SlPopoverTrigger, injectPopoverDefaults, providePopoverDefaults };
+//# sourceMappingURL=slotted-angular-popover.mjs.map