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

package/fesm2022/slotted-angular-tooltip.mjs

@@ -0,0 +1,798 @@
+import { isClipped } from '@slotted/core/overflow';
+import { createControllable } from '@slotted/core/state';
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, inject, booleanAttribute, numberAttribute, model, input, output, DestroyRef, signal, computed, effect, untracked, Directive, ElementRef, TemplateRef, ViewContainerRef, PLATFORM_ID, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { setPortalContainer, createPortalRoot } from '@slotted/core/portal';
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { createPositioner } from '@slotted/core/positioner';
+import { createPresence } from '@slotted/core/presence';
+import { isPlatformBrowser } from '@angular/common';
+
+/**
+ * The numbers, and why they are these numbers.
+ *
+ * `openDelay` is long enough that a pointer crossing a toolbar opens nothing
+ * and short enough that a deliberate hover is answered; `closeDelay` is the
+ * window the pointer has to travel onto the layer, and zero makes a hoverable
+ * tooltip unreachable; `groupDelay` is what stops a row of icon buttons
+ * charging the warmup once per button.
+ */
+const TOOLTIP_FALLBACK = {
+    align: 'center',
+    alignOffset: 0,
+    arrow: true,
+    arrowPadding: 8,
+    closeDelay: 150,
+    closeOnPress: true,
+    collisionPadding: 8,
+    describes: 'description',
+    flip: true,
+    groupDelay: 400,
+    hideWhenDetached: true,
+    hoverable: true,
+    mount: 'active',
+    openDelay: 600,
+    openOn: 'hover',
+    portal: true,
+    shift: true,
+    side: 'top',
+    sideOffset: 0,
+    size: 'md',
+    strategy: 'absolute',
+    touchDelay: 500,
+    variant: 'inverse',
+    whenClipped: false,
+};
+const TOOLTIP_DEFAULTS = new InjectionToken('slotted tooltip defaults', {
+    providedIn: 'root',
+    factory: () => TOOLTIP_FALLBACK,
+});
+/**
+ * When the last tooltip in this injector closed. A tooltip asked to open inside
+ * `groupDelay` of that moment opens in the same task, so reading a row of icon
+ * buttons pays the warmup once. It is held per injector rather than per
+ * tooltip, because a value held per tooltip could not say what "the next one"
+ * means.
+ */
+class SlTooltipGroup {
+    lastClosedAt = 0;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipGroup, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipGroup, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipGroup, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * An application decides once how its tooltips behave and look. A tooltip that
+ * states any of them itself still wins.
+ *
+ * What is stated here is written over the defaults already in force rather than
+ * over the fallback, which is what React's provider does and what a family that
+ * sets two axes for itself needs: a column header asking for `describes="none"`
+ * would otherwise hand the application's own delays back to the fallback.
+ *
+ * The group is provided beside the defaults, so a component that sets its own
+ * defaults also gets its own warmup window — the same scoping React's provider
+ * gives.
+ */
+function provideTooltipDefaults(defaults) {
+    return [
+        {
+            provide: TOOLTIP_DEFAULTS,
+            useFactory: () => ({
+                ...(inject(TOOLTIP_DEFAULTS, { optional: true, skipSelf: true }) ?? TOOLTIP_FALLBACK),
+                ...defaults,
+            }),
+        },
+        SlTooltipGroup,
+    ];
+}
+/** What a tooltip renders as here, before it states anything of its own. */
+function injectTooltipDefaults() {
+    return inject(TOOLTIP_DEFAULTS);
+}
+/**
+ * Whether `provideSlottedPortalContainer` named a container in this injector.
+ * A factory runs only when something injects its token, so `slTooltipLayer`
+ * injects this one before it builds a layer.
+ */
+const SLOTTED_PORTAL_CONTAINER = new InjectionToken('slotted portal container');
+/**
+ * Where every layer is rendered, for the whole application. It calls
+ * `setPortalContainer` from `@slotted/core/portal`, which is per document, so
+ * an application shell that builds its own stacking context names it once.
+ */
+function provideSlottedPortalContainer(container) {
+    return {
+        provide: SLOTTED_PORTAL_CONTAINER,
+        useFactory: () => {
+            setPortalContainer(container());
+            return true;
+        },
+    };
+}
+/**
+ * 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 server and the client sequences have to
+ * match for hydration.
+ */
+class SlTooltipIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-tooltip-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Unstated stays unstated, so a tooltip defers to the provider rather than to `false`. */
+const optionalBoolean = (state) => state === undefined ? undefined : booleanAttribute(state);
+/** Unstated stays unstated, for the same reason, on a number. */
+const optionalNumber = (value) => value === undefined ? undefined : numberAttribute(value);
+/**
+ * A short, non-interactive sentence about the element under the pointer or
+ * under focus.
+ *
+ * It is written on an `ng-container`, because it renders nothing: the trigger
+ * stays where the consumer wrote it and the layer is portalled to the end of
+ * the document, so no one element could hold both. What it holds is the state,
+ * the delays, and the values every part reads.
+ *
+ * The layer never takes focus and never holds a control. The APG's tooltip
+ * pattern says so, and names the non-modal dialog for the other case, which is
+ * `slPopover`.
+ */
+class SlTooltip {
+    /** Whether the hint 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 tooltip starts in, read once in `ngOnInit`. */
+    defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The tooltip never opens. The trigger's own `disabled` is the consumer's. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Opens only while the trigger's own content is cut by its box — a column
+     * header narrowed to `Op…`, a breadcrumb in a rail. The measurement is taken
+     * at the moment the hint would open, so a column dragged wider stops opening
+     * one without anything being told.
+     */
+    whenClipped = input(undefined, { ...(ngDevMode ? { debugName: "whenClipped" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    describes = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describes" }] : /* istanbul ignore next */ []));
+    openOn = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openOn" }] : /* 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 */ []));
+    arrow = input(undefined, { ...(ngDevMode ? { debugName: "arrow" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    hoverable = input(undefined, { ...(ngDevMode ? { debugName: "hoverable" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    closeOnPress = input(undefined, { ...(ngDevMode ? { debugName: "closeOnPress" } : /* 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 });
+    openDelay = input(undefined, { ...(ngDevMode ? { debugName: "openDelay" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    closeDelay = input(undefined, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    touchDelay = input(undefined, { ...(ngDevMode ? { debugName: "touchDelay" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    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 = injectTooltipDefaults();
+    group = inject(SlTooltipGroup);
+    destroyRef = inject(DestroyRef);
+    contentId = `${inject(SlTooltipIdFactory).next()}-content`;
+    /** The elements the parts register, which the layer measures and listens to. */
+    triggerNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerNode" }] : /* istanbul ignore next */ []));
+    arrowNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrowNode" }] : /* istanbul ignore next */ []));
+    isOpen = computed(() => this.open() && !this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedDescribes = computed(() => this.describes() ?? this.defaults.describes, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDescribes" }] : /* istanbul ignore next */ []));
+    resolvedWhenClipped = computed(() => this.whenClipped() ?? this.defaults.whenClipped, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedWhenClipped" }] : /* istanbul ignore next */ []));
+    resolvedOpenOn = computed(() => this.openOn() ?? this.defaults.openOn, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOpenOn" }] : /* 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 */ []));
+    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 */ []));
+    resolvedHoverable = computed(() => (this.hoverable() ?? this.defaults.hoverable) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHoverable" }] : /* istanbul ignore next */ []));
+    resolvedCloseOnPress = computed(() => (this.closeOnPress() ?? this.defaults.closeOnPress) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCloseOnPress" }] : /* 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 */ []));
+    /**
+     * Under `label` the layer is the trigger's accessible name, so it has to be
+     * in the document before it is ever opened. Forcing the axis is deliberate:
+     * the alternative is a button silently announced as "button".
+     */
+    resolvedMount = computed(() => this.resolvedDescribes() === 'label' ? 'eager' : (this.mount() ?? this.defaults.mount), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMount" }] : /* 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 */ []));
+    /**
+     * One timer for the whole family. An open waiting on `openDelay`, a close
+     * waiting on `closeDelay` and a long press waiting on `touchDelay` are never
+     * pending at once — each cancels the others.
+     */
+    timer;
+    constructor() {
+        this.destroyRef.onDestroy(() => this.cancelPending());
+        /** Disabling cancels a waiting open and drops an open one, so enabling opens nothing. */
+        effect(() => {
+            if (!this.disabled())
+                return;
+            untracked(() => {
+                this.cancelPending();
+                if (this.open())
+                    this.open.set(false);
+            });
+        });
+    }
+    /**
+     * 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.open.set(true);
+    }
+    cancelPending() {
+        if (this.timer !== undefined)
+            clearTimeout(this.timer);
+        this.timer = undefined;
+    }
+    /** Opens after `openDelay`, or in the same task inside the group window. */
+    openAfterDelay(source) {
+        this.cancelPending();
+        const delay = this.openDelay() ?? this.defaults.openDelay;
+        const sinceLast = Date.now() - this.group.lastClosedAt;
+        if (delay <= 0 || sinceLast < this.defaults.groupDelay) {
+            this.toggle(true, 'pointer', source);
+            return;
+        }
+        this.timer = setTimeout(() => this.toggle(true, 'pointer', source), delay);
+    }
+    /** Closes after `closeDelay`, which is the window the pointer has to reach the layer. */
+    closeAfterDelay(source) {
+        this.cancelPending();
+        const delay = this.closeDelay() ?? this.defaults.closeDelay;
+        if (delay <= 0) {
+            this.toggle(false, 'pointer', source);
+            return;
+        }
+        this.timer = setTimeout(() => this.toggle(false, 'pointer', source), delay);
+    }
+    /** A coarse pointer has no hover, so a press held still opens the hint. */
+    pressAndHold(source) {
+        this.cancelPending();
+        const delay = this.touchDelay() ?? this.defaults.touchDelay;
+        this.timer = setTimeout(() => this.toggle(true, 'pointer', source), delay);
+    }
+    /** Opens now, ignoring every delay. One of the two imperative actions. */
+    show() {
+        this.toggle(true, 'programmatic');
+    }
+    /** Closes now. */
+    hide() {
+        this.toggle(false, 'programmatic');
+    }
+    toggle(next, reason, source) {
+        this.cancelPending();
+        if (next === this.isOpen())
+            return;
+        /**
+         * Refused rather than recorded: an open granted while disabled is hidden by
+         * `isOpen`, and the leave that follows finds nothing to close, so it would
+         * surface the moment `disabled` turned false.
+         */
+        if (next && this.disabled())
+            return;
+        /**
+         * Measured here rather than watched: the answer is needed at the moment the
+         * hint would open, and a box measured then is never a box two column drags
+         * old.
+         */
+        const trigger = this.triggerNode();
+        if (next && this.resolvedWhenClipped() && trigger !== null && !isClipped(trigger))
+            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);
+        /**
+         * The window the next tooltip opens instantly inside starts when this one
+         * closes, so a reader crossing a toolbar pays one warmup.
+         */
+        if (!next)
+            this.group.lastClosedAt = Date.now();
+        if (moved)
+            this.open.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTooltip, isStandalone: true, selector: "[slTooltip]", 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 }, whenClipped: { classPropertyName: "whenClipped", publicName: "whenClipped", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, describes: { classPropertyName: "describes", publicName: "describes", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", 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 }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, closeOnPress: { classPropertyName: "closeOnPress", publicName: "closeOnPress", 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 }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, touchDelay: { classPropertyName: "touchDelay", publicName: "touchDelay", 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: ["slTooltip"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTooltip]',
+                    standalone: true,
+                    exportAs: 'slTooltip',
+                }]
+        }], ctorParameters: () => [], 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 }] }], whenClipped: [{ type: i0.Input, args: [{ isSignal: true, alias: "whenClipped", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], describes: [{ type: i0.Input, args: [{ isSignal: true, alias: "describes", required: false }] }], openOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOn", 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 }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], closeOnPress: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnPress", 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 }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], touchDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchDelay", 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"] }] } });
+
+/**
+ * The element the hint is about.
+ *
+ * The directive goes on the consumer's own control, which is what this
+ * ecosystem composes with. It writes the ARIA relationship and `data-open` and
+ * **no `data-part`**: `data-part` names a part of the family that owns the
+ * element, and sixteen stylesheets in this repository key on
+ * `[data-part='root']`, so claiming a `slBadge` or a `slCheckbox` used as a
+ * trigger would unstyle it and nothing would report it.
+ *
+ * A control the page disabled with the native attribute fires no pointer events
+ * at all, so the one explanation of why it is disabled would be unreachable.
+ * The reference page shows the two shapes that work: `aria-disabled` on a
+ * control that stays focusable, or a wrapping element carrying the trigger.
+ */
+class SlTooltipTrigger {
+    tooltip = inject(SlTooltip);
+    native = inject(ElementRef).nativeElement;
+    holding = false;
+    /**
+     * Named by the layer under `label`, described by it otherwise. Under `none`
+     * the trigger references nothing: it already says the words.
+     */
+    names = computed(() => this.tooltip.resolvedDescribes() !== 'none' &&
+        (this.tooltip.isOpen() || this.tooltip.resolvedDescribes() === 'label'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "names" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.names() && this.tooltip.resolvedDescribes() === 'description'
+        ? this.tooltip.contentId
+        : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.names() && this.tooltip.resolvedDescribes() === 'label' ? this.tooltip.contentId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.tooltip.triggerNode.set(this.native);
+        inject(DestroyRef).onDestroy(() => this.tooltip.triggerNode.set(null));
+    }
+    onPointerEnter(event) {
+        if (this.tooltip.resolvedOpenOn() !== 'hover' || event.pointerType === 'touch')
+            return;
+        this.tooltip.openAfterDelay(event);
+    }
+    onPointerLeave(event) {
+        this.holding = false;
+        if (this.tooltip.resolvedOpenOn() === 'manual')
+            return;
+        this.tooltip.closeAfterDelay(event);
+    }
+    onPointerDown(event) {
+        if (event.pointerType === 'touch') {
+            this.holding = true;
+            this.tooltip.pressAndHold(event);
+            return;
+        }
+        if (this.tooltip.resolvedCloseOnPress() && this.tooltip.isOpen()) {
+            this.tooltip.toggle(false, 'pointer', event);
+        }
+    }
+    onPointerRelease() {
+        if (!this.holding)
+            return;
+        this.holding = false;
+        this.tooltip.cancelPending();
+    }
+    /**
+     * `:focus-visible` rather than every focus. A pointer press focuses a button
+     * too, and a tooltip opened by it would arrive before the delay it was given
+     * and stay after the press that was meant to dismiss it.
+     */
+    onFocus(event) {
+        if (this.tooltip.resolvedOpenOn() === 'manual')
+            return;
+        if (!this.native.matches(':focus-visible'))
+            return;
+        this.tooltip.toggle(true, 'keyboard', event);
+    }
+    onBlur(event) {
+        if (this.tooltip.resolvedOpenOn() === 'manual')
+            return;
+        this.tooltip.toggle(false, 'blur', event);
+    }
+    /**
+     * A click synthesised by the keyboard reports no detail; a real one reports
+     * the click count. It is how `Enter` and `Space` are told from a press
+     * without a key listener existing for either.
+     */
+    onClick(event) {
+        if (!this.tooltip.resolvedCloseOnPress() || !this.tooltip.isOpen())
+            return;
+        this.tooltip.toggle(false, event.detail === 0 ? 'keyboard' : 'pointer', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTooltipTrigger, isStandalone: true, selector: "[slTooltipTrigger]", host: { listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerRelease()", "pointercancel": "onPointerRelease()", "focus": "onFocus($event)", "blur": "onBlur($event)", "click": "onClick($event)" }, properties: { "attr.aria-describedby": "describedBy()", "attr.aria-labelledby": "labelledBy()", "attr.data-open": "tooltip.isOpen() ? '' : null" } }, exportAs: ["slTooltipTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTooltipTrigger]',
+                    standalone: true,
+                    exportAs: 'slTooltipTrigger',
+                    host: {
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.data-open]': "tooltip.isOpen() ? '' : null",
+                        '(pointerenter)': 'onPointerEnter($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointerup)': 'onPointerRelease()',
+                        '(pointercancel)': 'onPointerRelease()',
+                        '(focus)': 'onFocus($event)',
+                        '(blur)': 'onBlur($event)',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * The positioned layer, built from a template rather than from an element.
+ *
+ * `mount="active"` means the layer exists only while it is open, and a
+ * component cannot remove its own host element — so the consumer writes an
+ * `ng-template` and this directive builds the layer around the stamped view.
+ * It is the shape `ng-template[slCollapsibleContent]` already uses here, and
+ * Angular Material's `matExpansionPanelContent` before it.
+ *
+ * The element it builds is what `packages/core/src/positioner` writes
+ * `position`, `left` and `top` onto, and the one that scales and fades; its
+ * padding is the gap the pointer crosses onto a hoverable tooltip.
+ */
+class SlTooltipLayer {
+    tooltip = inject(SlTooltip);
+    template = inject((TemplateRef));
+    viewContainer = inject(ViewContainerRef);
+    comment = this.viewContainer.element.nativeElement;
+    /**
+     * Angular's server document is not the page. There the layer stays where the
+     * template wrote it, as React's server markup has it, and nothing measures,
+     * stacks or moves it into a portal.
+     */
+    browser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Where the arrow stood in the layer while `arrow` is false. */
+    arrowPlace = null;
+    /**
+     * A signal rather than a field, and the reason is a defect the first spec run
+     * found: the effects that place, stack and paint the layer all read it, and
+     * with a plain field none of them re-ran when `build()` filled it in a later
+     * flush. The layer existed and carried no attribute the stylesheet reads.
+     */
+    layerNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layerNode" }] : /* istanbul ignore next */ []));
+    view = null;
+    portal = null;
+    positioner = null;
+    dismissable = null;
+    releaseBridge = null;
+    status = signal('unmounted', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    positioned = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []));
+    presence = createPresence({
+        present: false,
+        onStatusChange: (next) => this.status.set(next),
+    });
+    /**
+     * `active` drops the layer after the exit, `lazy` keeps it once it has been
+     * open, `eager` never removes it — which is what `describes="label"` forces,
+     * because an accessible name has to exist before it is read.
+     */
+    mounted = computed(() => {
+        const mount = this.tooltip.resolvedMount();
+        if (mount === 'eager')
+            return true;
+        if (mount === 'lazy')
+            return this.tooltip.seen();
+        return this.status() !== 'unmounted';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mounted" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* Injected for its side effect: the factory of
+           `provideSlottedPortalContainer` names the document's portal container,
+           and runs only when something asks for its token — before the first layer
+           asks `createPortalRoot` for a container. */
+        inject(SLOTTED_PORTAL_CONTAINER, { optional: true });
+        effect(() => this.presence.sync(this.tooltip.isOpen()));
+        effect(() => (this.mounted() ? this.build() : this.teardown()));
+        effect(() => this.place());
+        effect(() => this.stack());
+        effect(() => this.paint());
+        inject(DestroyRef).onDestroy(() => {
+            this.presence.destroy();
+            this.teardown();
+        });
+    }
+    /** Measures and places the layer again. The imperative action of this part. */
+    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', 'tooltip');
+        layer.setAttribute('data-part', 'root');
+        const view = this.viewContainer.createEmbeddedView(this.template);
+        view.detectChanges();
+        for (const node of view.rootNodes)
+            layer.appendChild(node);
+        const portal = this.browser
+            ? createPortalRoot({
+                origin: this.tooltip.triggerNode(),
+                disabled: !this.tooltip.resolvedPortal(),
+            })
+            : null;
+        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.releaseBridge = bindHoverBridge(layer, this.tooltip);
+        this.presence.setNode(layer);
+        this.layerNode.set(layer);
+    }
+    teardown() {
+        this.releaseBridge?.();
+        this.releaseBridge = null;
+        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.arrowPlace = null;
+        this.positioned.set(false);
+    }
+    /** Rebuilt whenever an option it was created with changes. */
+    place() {
+        const layer = this.layerNode();
+        const anchor = this.tooltip.triggerNode();
+        const options = {
+            align: this.tooltip.resolvedAlign(),
+            alignOffset: this.tooltip.resolvedAlignOffset(),
+            boundaryPadding: this.tooltip.resolvedCollisionPadding(),
+            flip: this.tooltip.resolvedFlip(),
+            hideWhenDetached: this.tooltip.resolvedHideWhenDetached(),
+            shift: this.tooltip.resolvedShift(),
+            side: this.tooltip.resolvedSide(),
+            sideOffset: this.tooltip.resolvedSideOffset(),
+            strategy: this.tooltip.resolvedStrategy(),
+        };
+        const arrow = this.tooltip.resolvedArrow() ? this.tooltip.arrowNode() : null;
+        this.positioner?.destroy();
+        this.positioner = null;
+        if (layer === null || anchor === null || !this.browser)
+            return;
+        this.positioner = createPositioner(anchor, layer, {
+            ...options,
+            ...(arrow ? { arrow, arrowPadding: this.tooltip.resolvedArrowPadding() } : {}),
+        });
+        void this.positioner.update().then(() => this.positioned.set(true));
+    }
+    /**
+     * The layer joins the single stack only while it is open, so its depth is its
+     * real position among the layers a reader has opened. Escape reaches the
+     * topmost layer alone; the trigger is a branch, so pressing it is not an
+     * outside press and the family closes on it deliberately instead.
+     */
+    stack() {
+        const layer = this.layerNode();
+        const open = this.tooltip.isOpen();
+        const trigger = this.tooltip.triggerNode();
+        this.dismissable?.destroy();
+        this.dismissable = null;
+        if (layer === null || !open || !this.browser)
+            return;
+        this.dismissable = createDismissableLayer(layer, {
+            escape: true,
+            focusOutside: false,
+            modal: false,
+            outsidePress: true,
+            scrollLock: false,
+            ...(trigger ? { branches: [trigger] } : {}),
+            onDismiss: (request) => {
+                this.tooltip.toggle(false, request.reason === 'escape' ? 'escape' : 'pointer', request.source);
+            },
+        });
+    }
+    /** Every attribute the stylesheet reads, and the two listeners hoverable needs. */
+    paint() {
+        const layer = this.layerNode();
+        if (layer === null)
+            return;
+        layer.setAttribute('data-align', this.tooltip.resolvedAlign());
+        layer.setAttribute('data-size', this.tooltip.resolvedSize());
+        layer.setAttribute('data-variant', this.tooltip.resolvedVariant());
+        toggleAttribute(layer, 'data-hoverable', this.tooltip.resolvedHoverable());
+        toggleAttribute(layer, 'data-open', this.tooltip.isOpen() && this.positioned());
+        this.showArrow(layer);
+    }
+    /**
+     * The arrow is the consumer's element inside the template, so under
+     * `arrow="false"` the layer takes it out — React's arrow renders nothing
+     * then — and puts it back in the same place under `true`.
+     */
+    showArrow(layer) {
+        const arrow = this.tooltip.arrowNode();
+        if (arrow === null)
+            return;
+        if (this.tooltip.resolvedArrow()) {
+            this.arrowPlace?.replaceWith(arrow);
+            this.arrowPlace = null;
+            return;
+        }
+        if (this.arrowPlace !== null || !layer.contains(arrow))
+            return;
+        this.arrowPlace = layer.ownerDocument.createComment('');
+        arrow.replaceWith(this.arrowPlace);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipLayer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTooltipLayer, isStandalone: true, selector: "ng-template[slTooltipLayer]", exportAs: ["slTooltipLayer"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipLayer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[slTooltipLayer]',
+                    standalone: true,
+                    exportAs: 'slTooltipLayer',
+                }]
+        }], ctorParameters: () => [] });
+function toggleAttribute(element, name, present) {
+    if (present)
+        element.setAttribute(name, '');
+    else
+        element.removeAttribute(name);
+}
+/**
+ * The painted surface, and the element the trigger's ARIA relationship names.
+ *
+ * It is the one part written as a component, because a component is what can
+ * carry `styleUrl`: this is where the family's single authored stylesheet
+ * enters an Angular application, exactly as every other family here does it.
+ */
+class SlTooltipContent {
+    tooltip = inject(SlTooltip);
+    /** Hidden from the reader under `none`, which is a hint shown and not read. */
+    hidden = computed(() => this.tooltip.resolvedDescribes() === 'none' ? true : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlTooltipContent, isStandalone: true, selector: "[slTooltipContent]", host: { attributes: { "data-part": "content", "role": "tooltip" }, properties: { "attr.id": "tooltip.contentId", "attr.aria-hidden": "hidden()" } }, exportAs: ["slTooltipContent"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=tooltip]{--_gap: var(--slotted-tooltip-gap, var(--slotted-space-4, .5rem));--_surface: var(--slotted-tooltip-surface, var(--slotted-surface-inverse, #172033));--_text: var(--slotted-tooltip-text, var(--slotted-text-inverse, #f8fafc));--_border-color: transparent;--_border-width: 0;--_radius: var(--slotted-tooltip-radius, var(--slotted-radius-sm, 4px));--_shadow: var(--slotted-tooltip-shadow, var(--slotted-shadow-xs));--_arrow-size: var(--slotted-tooltip-arrow-size, .5rem);--_arrow-tip-radius: var(--slotted-tooltip-arrow-tip-radius, var(--slotted-radius-xs, 2px));--_padding-inline: var(--slotted-control-padding-inline-md, .8125rem);--_padding-block: var(--slotted-control-gap-md, .5rem);--_font-size: var(--slotted-control-font-size-md, .8125rem);--_line-height: var(--slotted-line-height-sm, 1.45);--_measure: var(--slotted-tooltip-measure, 18rem);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=tooltip][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=tooltip]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=tooltip][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=tooltip][data-open][data-positioned]{animation:slotted-tooltip-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=tooltip][data-open][data-positioned][data-side=top]{animation-name:slotted-tooltip-enter-up}[data-ui=tooltip][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-tooltip-fade}@keyframes slotted-tooltip-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-tooltip-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-tooltip-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=tooltip],[data-ui=tooltip][data-side=top],[data-ui=tooltip][data-side=left],[data-ui=tooltip][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=tooltip][data-open][data-positioned],[data-ui=tooltip][data-open][data-positioned][data-side=top],[data-ui=tooltip][data-open][data-positioned][data-side=left],[data-ui=tooltip][data-open][data-positioned][data-side=right]{animation-name:slotted-tooltip-fade}}[data-ui=tooltip][data-open][data-hoverable]{pointer-events:auto}[data-ui=tooltip][data-detached]{visibility:hidden}[data-ui=tooltip][data-size=sm]{--_padding-inline: var(--slotted-control-padding-inline-sm, .625rem);--_padding-block: var(--slotted-control-gap-sm, .375rem);--_font-size: var(--slotted-control-font-size-sm, .75rem);--_measure: var(--slotted-tooltip-measure-sm, 14rem)}[data-ui=tooltip][data-variant=surface]{--_surface: var(--slotted-tooltip-surface-raised, var(--slotted-surface-raised, #ffffff));--_text: var(--slotted-tooltip-text-raised, var(--slotted-text, #0f172a));--_border-color: var(--slotted-tooltip-border-color, var(--slotted-border-subtle, #e2e8f0));--_border-width: var(--slotted-border-width-thin, 1px)}[data-ui=tooltip]>[data-part=content]{box-sizing:border-box;display:block;max-inline-size:100%;border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);box-shadow:var(--_shadow);padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--_line-height);text-align:start;overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=tooltip]>[data-part=arrow]{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=tooltip][data-side=top]>[data-part=arrow]{left:var(--slotted-positioner-arrow-x, 0);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=tooltip][data-side=bottom]>[data-part=arrow]{left:var(--slotted-positioner-arrow-x, 0);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=tooltip][data-side=left]>[data-part=arrow]{top:var(--slotted-positioner-arrow-y, 0);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=tooltip][data-side=right]>[data-part=arrow]{top:var(--slotted-positioner-arrow-y, 0);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: SlTooltipContent, decorators: [{
+            type: Component,
+            args: [{ selector: '[slTooltipContent]', standalone: true, exportAs: 'slTooltipContent', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-part': 'content',
+                        role: 'tooltip',
+                        '[attr.id]': 'tooltip.contentId',
+                        '[attr.aria-hidden]': 'hidden()',
+                    }, styles: ["@layer slotted.components{[data-ui=tooltip]{--_gap: var(--slotted-tooltip-gap, var(--slotted-space-4, .5rem));--_surface: var(--slotted-tooltip-surface, var(--slotted-surface-inverse, #172033));--_text: var(--slotted-tooltip-text, var(--slotted-text-inverse, #f8fafc));--_border-color: transparent;--_border-width: 0;--_radius: var(--slotted-tooltip-radius, var(--slotted-radius-sm, 4px));--_shadow: var(--slotted-tooltip-shadow, var(--slotted-shadow-xs));--_arrow-size: var(--slotted-tooltip-arrow-size, .5rem);--_arrow-tip-radius: var(--slotted-tooltip-arrow-tip-radius, var(--slotted-radius-xs, 2px));--_padding-inline: var(--slotted-control-padding-inline-md, .8125rem);--_padding-block: var(--slotted-control-gap-md, .5rem);--_font-size: var(--slotted-control-font-size-md, .8125rem);--_line-height: var(--slotted-line-height-sm, 1.45);--_measure: var(--slotted-tooltip-measure, 18rem);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=tooltip][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=tooltip]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=tooltip][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=tooltip][data-open][data-positioned]{animation:slotted-tooltip-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=tooltip][data-open][data-positioned][data-side=top]{animation-name:slotted-tooltip-enter-up}[data-ui=tooltip][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-tooltip-fade}@keyframes slotted-tooltip-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-tooltip-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-tooltip-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=tooltip],[data-ui=tooltip][data-side=top],[data-ui=tooltip][data-side=left],[data-ui=tooltip][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=tooltip][data-open][data-positioned],[data-ui=tooltip][data-open][data-positioned][data-side=top],[data-ui=tooltip][data-open][data-positioned][data-side=left],[data-ui=tooltip][data-open][data-positioned][data-side=right]{animation-name:slotted-tooltip-fade}}[data-ui=tooltip][data-open][data-hoverable]{pointer-events:auto}[data-ui=tooltip][data-detached]{visibility:hidden}[data-ui=tooltip][data-size=sm]{--_padding-inline: var(--slotted-control-padding-inline-sm, .625rem);--_padding-block: var(--slotted-control-gap-sm, .375rem);--_font-size: var(--slotted-control-font-size-sm, .75rem);--_measure: var(--slotted-tooltip-measure-sm, 14rem)}[data-ui=tooltip][data-variant=surface]{--_surface: var(--slotted-tooltip-surface-raised, var(--slotted-surface-raised, #ffffff));--_text: var(--slotted-tooltip-text-raised, var(--slotted-text, #0f172a));--_border-color: var(--slotted-tooltip-border-color, var(--slotted-border-subtle, #e2e8f0));--_border-width: var(--slotted-border-width-thin, 1px)}[data-ui=tooltip]>[data-part=content]{box-sizing:border-box;display:block;max-inline-size:100%;border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);box-shadow:var(--_shadow);padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--_line-height);text-align:start;overflow-wrap:anywhere;unicode-bidi:plaintext}[data-ui=tooltip]>[data-part=arrow]{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=tooltip][data-side=top]>[data-part=arrow]{left:var(--slotted-positioner-arrow-x, 0);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=tooltip][data-side=bottom]>[data-part=arrow]{left:var(--slotted-positioner-arrow-x, 0);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=tooltip][data-side=left]>[data-part=arrow]{top:var(--slotted-positioner-arrow-y, 0);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=tooltip][data-side=right]>[data-part=arrow]{top:var(--slotted-positioner-arrow-y, 0);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"] }]
+        }] });
+/**
+ * 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,
+ * because it is decoration a reader has no use for.
+ */
+class SlTooltipArrow {
+    constructor() {
+        const tooltip = inject(SlTooltip);
+        const native = inject(ElementRef).nativeElement;
+        tooltip.arrowNode.set(native);
+        inject(DestroyRef).onDestroy(() => tooltip.arrowNode.set(null));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTooltipArrow, isStandalone: true, selector: "[slTooltipArrow]", host: { attributes: { "data-part": "arrow", "aria-hidden": "true" } }, exportAs: ["slTooltipArrow"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTooltipArrow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTooltipArrow]',
+                    standalone: true,
+                    exportAs: 'slTooltipArrow',
+                    host: {
+                        'data-part': 'arrow',
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * The layer's own pointer handlers, written on the layer element rather than
+ * bound by a directive, because the element is built here rather than by the
+ * consumer. Entering the layer cancels the pending close; leaving it starts one
+ * again, which is the whole of `hoverable`.
+ */
+function bindHoverBridge(layer, tooltip) {
+    const enter = () => {
+        if (tooltip.resolvedHoverable())
+            tooltip.cancelPending();
+    };
+    const leave = (event) => {
+        if (tooltip.resolvedHoverable())
+            tooltip.closeAfterDelay(event);
+    };
+    layer.addEventListener('pointerenter', enter);
+    layer.addEventListener('pointerleave', leave);
+    return () => {
+        layer.removeEventListener('pointerenter', enter);
+        layer.removeEventListener('pointerleave', leave);
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlTooltip, SlTooltipArrow, SlTooltipContent, SlTooltipGroup, SlTooltipIdFactory, SlTooltipLayer, SlTooltipTrigger, TOOLTIP_DEFAULTS, TOOLTIP_FALLBACK, injectTooltipDefaults, provideSlottedPortalContainer, provideTooltipDefaults };
+//# sourceMappingURL=slotted-angular-tooltip.mjs.map