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

package/fesm2022/slotted-angular-drawer.mjs

@@ -0,0 +1,1397 @@
+import { isPlatformBrowser } from '@angular/common';
+import { injectMessages } from '@slotted/angular/i18n';
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { extentBounds, isInlineSide, attachSheetDrag, settleExtent, dampenExtent, sameStop, measureSheetStops, stopAsExtent, EXTENT_STEP_PX, EXTENT_LARGE_STEP_PX, extentAtPoint, holdResizeGesture, extentVelocity, SHEET_FLING_PX_PER_S, anchorsAtStart, stepAmountFromPixels, stepExtent } from '@slotted/core/extent';
+import { createFocusScope } from '@slotted/core/focus';
+import { drawerMessages } from '@slotted/core/i18n';
+import { observeKeyboardInset, clamp } from '@slotted/core/measure';
+import { createPortalRoot } from '@slotted/core/portal';
+import { createPresence } from '@slotted/core/presence';
+import { createControllable } from '@slotted/core/state';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, model, input, booleanAttribute, output, ElementRef, PLATFORM_ID, DestroyRef, HostAttributeToken, viewChild, signal, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+
+const FALLBACK = {
+    back: 'close',
+    escape: 'close',
+    modal: true,
+    mode: 'overlay',
+    mount: 'active',
+    outsidePress: 'close',
+    side: 'end',
+    size: undefined,
+    drag: 'panel',
+};
+const DRAWER_DEFAULTS = new InjectionToken('slotted drawer defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its drawers behave and look, rather than
+ * repeating the same seven inputs on every one in a product. Ant reaches the
+ * same place through `ConfigProvider`; no React drawer in the surveyed set has
+ * an equivalent, and React gets one here too rather than being levelled down.
+ */
+function provideDrawerDefaults(defaults) {
+    return {
+        provide: DRAWER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a drawer renders as here, before it states anything of its own. */
+function injectDrawerDefaults() {
+    return inject(DRAWER_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 server and the client sequences must
+ * match for hydration.
+ */
+class SlDrawerIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-drawer-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const NO_SNAP_POINTS = [];
+/** What the stylesheet leaves above a content sheet, for the press outside. */
+const CONTENT_RESERVE = 'var(--slotted-space-12, 4rem)';
+/**
+ * A panel that comes in from an edge, and either covers the page or stands
+ * beside it.
+ *
+ * The layer is composed from `packages/core` and rewritten nowhere: `portal`
+ * decides where it lives and keeps the theme of the region that opened it,
+ * `dismissable-layer` owns Escape, outside press, `inert`, the scroll lock and
+ * the single z-index stack, `presence` keeps it mounted long enough to leave,
+ * `focus` contains the keyboard and gives it back to the trigger, and `extent`
+ * holds the arithmetic the separator's pointer and keyboard share.
+ *
+ * **The host is not the layer.** `<sl-drawer>` renders `display: contents` and
+ * stays exactly where the consumer wrote it; the layer is the `div` in the
+ * template. Under `mode="overlay"` that `div` is moved into the portal and
+ * given back before it is destroyed; under `mode="inline"` it never moves,
+ * which is what makes the host's own parent the drawer's place in the layout.
+ * Either way the host is the portal's *origin*, so the layer keeps the scheme,
+ * density, theme and direction of the region it was written in whether or not
+ * a trigger exists — React has to use the trigger for that, and
+ * `docs/history/designs/2026-09-04-drawer-design.md` §11 records the
+ * asymmetry rather than levelling both down.
+ */
+class SlDrawer {
+    /** Whether the drawer is open. Two-way, so a template may bind it directly. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * How much of the box the panel is measured in it takes, in `[0, 1]`. Unset
+     * means the `size` step decides. It is a fraction rather than a length so
+     * that the separator's three ARIA values, the limits and the snap points are
+     * all the same kind of number.
+     */
+    extent = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extent" }] : /* istanbul ignore next */ []));
+    mode = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    side = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    mount = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mount" }] : /* istanbul ignore next */ []));
+    escape = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "escape" }] : /* istanbul ignore next */ []));
+    outsidePress = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outsidePress" }] : /* istanbul ignore next */ []));
+    /**
+     * The platform's way back — a phone's gesture, a browser's button — closes
+     * the layer instead of leaving the page, while the layer is modal.
+     */
+    back = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "back" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the background is inert, the scroll is locked and focus is
+     * contained. Fixed at `false` under `mode="inline"`: a panel in the flow that
+     * claimed `aria-modal` while the page around it stayed reachable is the
+     * failure the APG calls severe.
+     */
+    modal = input(true, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the panel's content is still on its way. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Words laid over the catalog of the language in force, key by key: the close control's name (`close`). */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** What a hand moves an overlay sheet from the bottom by. */
+    drag = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drag" }] : /* istanbul ignore next */ []));
+    /**
+     * Below this fraction the scrim is not painted and a press reaches the page:
+     * the sheet over a map. It pairs with `[modal]="false"` and
+     * `outsidePress="none"`, because a page left undimmed and inert would promise
+     * something it does not do.
+     */
+    scrimFrom = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrimFrom" }] : /* istanbul ignore next */ []));
+    /** The smallest the reader may make it. A drag released below it asks to close. */
+    minExtent = input(0.2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minExtent" }] : /* istanbul ignore next */ []));
+    maxExtent = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxExtent" }] : /* istanbul ignore next */ []));
+    /** The stops the separator lands on. Empty means the range is continuous. */
+    snapPoints = input(NO_SNAP_POINTS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapPoints" }] : /* istanbul ignore next */ []));
+    /** A parent for this layer alone, instead of the shared portal root. */
+    container = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    initialFocus = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialFocus" }] : /* istanbul ignore next */ []));
+    finalFocus = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "finalFocus" }] : /* istanbul ignore next */ []));
+    /** One output per transition, each carrying its reason and its event. */
+    openChangeRequest = output();
+    extentChangeRequest = output();
+    /**
+     * What `afterClosed()` is in Angular Material, as an output. It fires once
+     * the drawer has actually closed, with the result the close carried.
+     */
+    closed = output();
+    defaults = injectDrawerDefaults();
+    /** The family's words in the language in force, with this drawer's `messages` laid over them. */
+    t = injectMessages(drawerMessages, this.messages);
+    host = inject(ElementRef).nativeElement;
+    /** The server lays nothing out, and its DOM cannot be measured. */
+    browser = isPlatformBrowser(inject(PLATFORM_ID));
+    destroyRef = inject(DestroyRef);
+    baseId = inject(SlDrawerIdFactory).next();
+    /** The element the consumer wrote us beside, recorded before anything moves. */
+    origin = this.host.parentElement;
+    /**
+     * A consumer's own `aria-label` on `<sl-drawer>`, read before the host
+     * bindings are written and moved to the panel, which is the element the role
+     * is on. Without this a label written on the host would name a box with
+     * `display: contents` and no role at all.
+     */
+    writtenLabel = inject(new HostAttributeToken('aria-label'), {
+        optional: true,
+    });
+    layerRef = viewChild('layer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layerRef" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    /** The parts that have said they exist, so only what was rendered is wired. */
+    hasTitle = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []));
+    hasDescription = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
+    triggerNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerNode" }] : /* istanbul ignore next */ []));
+    /** Whether the reader has the separator under the pointer. */
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    /**
+     * Where the hand is holding the panel while the body is dragged, which may be
+     * past the highest stop. `null` outside a gesture: the request is made once,
+     * on release, rather than once per move.
+     */
+    live = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "live" }] : /* istanbul ignore next */ []));
+    /**
+     * What the panel measures at rest — the height of its content under
+     * `size="content"` — as a fraction, measured while `extent` is unset.
+     */
+    rest = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rest" }] : /* istanbul ignore next */ []));
+    titleId = `${this.baseId}-title`;
+    descriptionId = `${this.baseId}-description`;
+    panelId = `${this.baseId}-panel`;
+    triggerId = `${this.baseId}-trigger`;
+    /**
+     * The status rather than a boolean. `entering` is one frame long and it is
+     * the whole reason it exists: a panel that appears already open gives its CSS
+     * transition no closed style to start from.
+     */
+    status = signal('unmounted', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    presence = createPresence({
+        present: false,
+        onStatusChange: (next) => this.status.set(next),
+    });
+    /** Whether this drawer has ever been open, which is what `lazy` reads. */
+    seen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seen" }] : /* istanbul ignore next */ []));
+    result = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
+    /** The measured length the stylesheet reads, kept in step by an observer. */
+    measured = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measured" }] : /* istanbul ignore next */ []));
+    resolvedMode = computed(() => this.mode() ?? this.defaults.mode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
+    resolvedSide = computed(() => this.side() ?? this.defaults.side, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []));
+    /**
+     * A sheet measures what it holds and a side panel takes a named step: every
+     * native sheet sizes to its content, and Ant, Fluent and MUI all give a side
+     * panel a width. The side decides only when nothing else has.
+     */
+    resolvedSize = computed(() => {
+        const side = this.resolvedSide();
+        return (this.size() ?? this.defaults.size ?? (side === 'top' || side === 'bottom' ? 'content' : 'md'));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedDrag = computed(() => this.drag() ?? this.defaults.drag, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDrag" }] : /* istanbul ignore next */ []));
+    /** An overlay sheet from the bottom, which is the only panel a body drag moves. */
+    sheet = computed(() => this.resolvedMode() === 'overlay' && this.resolvedSide() === 'bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sheet" }] : /* istanbul ignore next */ []));
+    /** The measure right now: the hand's while a body drag holds it, the state otherwise. */
+    currentExtent = computed(() => this.live() ?? this.extent(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentExtent" }] : /* istanbul ignore next */ []));
+    undimmed = computed(() => this.resolvedMode() === 'overlay' &&
+        (this.currentExtent() ?? this.rest() ?? 1) < this.scrimFrom(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "undimmed" }] : /* istanbul ignore next */ []));
+    resolvedMount = computed(() => this.mount() ?? this.defaults.mount, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMount" }] : /* istanbul ignore next */ []));
+    resolvedModal = computed(() => this.resolvedMode() === 'inline' ? false : this.modal(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedModal" }] : /* istanbul ignore next */ []));
+    resolvedEscape = computed(() => this.resolvedMode() === 'inline' ? 'none' : (this.escape() ?? this.defaults.escape), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedEscape" }] : /* istanbul ignore next */ []));
+    resolvedBack = computed(() => this.resolvedMode() === 'inline' ? 'none' : (this.back() ?? this.defaults.back), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedBack" }] : /* istanbul ignore next */ []));
+    resolvedOutsidePress = computed(() => this.resolvedMode() === 'inline' ? 'none' : (this.outsidePress() ?? this.defaults.outsidePress), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOutsidePress" }] : /* istanbul ignore next */ []));
+    /**
+     * The limits are the first and last stop when there are stops, because a
+     * range whose ends no stop can reach has two values nothing produces.
+     */
+    bounds = computed(() => {
+        const stops = extentBounds(this.snapPoints(), this.minExtent(), this.maxExtent());
+        /* Under `content` the height of the content is a stop above the snap
+           points, so the range reaches past the last of them. */
+        return this.resolvedSize() === 'content'
+            ? { ...stops, max: Math.max(stops.max, this.maxExtent()) }
+            : stops;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
+    /**
+     * An inline drawer is always in the document: its own measure is what opens
+     * and closes, and a box that left the layout would take the page's columns
+     * with it every time the reader closed the panel.
+     */
+    mounted = computed(() => {
+        if (this.resolvedMode() === 'inline')
+            return true;
+        const mount = this.resolvedMount();
+        if (mount === 'eager')
+            return true;
+        if (mount === 'lazy')
+            return this.seen();
+        return this.status() !== 'unmounted';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mounted" }] : /* istanbul ignore next */ []));
+    /** What the stylesheet keys on, which is a frame behind what was asked. */
+    visible = computed(() => this.resolvedMode() === 'inline' ? this.open() : this.status() === 'open', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the layer takes focus and the pointer. `entering` counts: the
+     * focus scope enters in that frame, and a layer still `inert` then refuses
+     * the initial focus and leaves it on `body`.
+     */
+    interactive = computed(() => {
+        if (this.resolvedMode() === 'inline')
+            return this.open();
+        const status = this.status();
+        return status === 'entering' || status === 'open';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /**
+     * The scrim belongs to the layer, not to the dismissal policy: `modal`
+     * decides what happens to the page behind it and never what is painted.
+     * `dialog` draws it the same way, and a consumer who wants none sets
+     * `--slotted-drawer-scrim: transparent`.
+     */
+    showBackdrop = computed(() => this.resolvedMode() === 'overlay', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showBackdrop" }] : /* istanbul ignore next */ []));
+    extentLength = computed(() => this.measured(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extentLength" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.hasTitle() && this.writtenLabel === null ? this.titleId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.hasDescription() ? this.descriptionId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.writtenLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Under `inline` the panel is a region of the page rather than a window over
+     * it, so it writes no role: a navigation drawer is a navigation landmark and
+     * a filter panel is complementary, and a family that cannot know which one
+     * guesses wrong half the time. A consumer names it on their own element.
+     */
+    role = computed(() => (this.resolvedMode() === 'overlay' ? 'dialog' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    portal = null;
+    layer = null;
+    scope = null;
+    /**
+     * What the consumer's own binding said before the reader moved anything.
+     *
+     * Read in `ngOnInit` and not in the field initializer: Angular creates every
+     * directive in a template before it binds any input, so a measure read at
+     * construction is always the model's own default and never the consumer's.
+     */
+    initialExtent = undefined;
+    ngOnInit() {
+        this.initialExtent = this.extent();
+    }
+    constructor() {
+        effect(() => {
+            if (this.open())
+                this.seen.set(true);
+            this.presence.sync(this.open());
+        });
+        /* A sheet closed by a drag keeps the hand's position through its exit, so
+           it slides from there; opening again starts from rest. */
+        effect(() => {
+            if (this.open())
+                untracked(() => this.live.set(null));
+        });
+        /** Where an overlay layer lives, for as long as it is in the document. */
+        effect(() => {
+            const node = this.layerRef()?.nativeElement ?? null;
+            this.presence.setNode(node);
+            if (node === null || this.resolvedMode() === 'inline') {
+                this.releasePortal();
+                return;
+            }
+            if (this.portal !== null)
+                return;
+            const named = this.container();
+            this.portal = createPortalRoot({
+                origin: this.origin,
+                ...(named === undefined ? {} : { container: named }),
+            });
+            this.portal.container?.append(node);
+        });
+        /**
+         * The measure as a length the stylesheet can use. The public value is a
+         * fraction; a percentage would not do, because under `inline` the drawer is
+         * the box being sized and a percentage of its own containing block resolves
+         * against a track whose size depends on it. The observer is what keeps the
+         * pixels and the fraction in step when the window changes.
+         */
+        effect((onCleanup) => {
+            const box = this.measuringBox();
+            const fraction = this.currentExtent();
+            const inline = isInlineSide(this.resolvedSide());
+            if (box === null || fraction === undefined || !this.browser) {
+                this.measured.set(null);
+                return;
+            }
+            const measure = () => {
+                const rect = box.getBoundingClientRect();
+                const span = inline ? rect.width : rect.height;
+                if (span > 0)
+                    this.measured.set(`${Math.round(fraction * span)}px`);
+            };
+            measure();
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const observer = new ResizeObserver(measure);
+            observer.observe(box);
+            onCleanup(() => observer.disconnect());
+        });
+        /**
+         * Everything the drawer does while it is open, taken down when it closes
+         * rather than when the node leaves — `presence` keeps the node mounted
+         * through the exit, and a layer still holding the scroll lock and the
+         * background's `inert` for those milliseconds is a page nobody can touch.
+         *
+         * An inline drawer composes neither the layer nor containment: it is a box
+         * in the page, nothing is inert and nothing is contained. It still enters a
+         * focus scope, because the scope is what returns focus to the trigger when
+         * a panel the reader is standing in closes underneath them.
+         */
+        effect((onCleanup) => {
+            const node = this.layerRef()?.nativeElement;
+            const panel = this.panelRef()?.nativeElement;
+            if (!this.open() || node === undefined || panel === undefined)
+                return;
+            const overlay = this.resolvedMode() === 'overlay';
+            const escape = this.resolvedEscape() === 'close';
+            const outsidePress = this.resolvedOutsidePress() === 'close';
+            const modal = this.resolvedModal();
+            /* A history entry is a modal layer's: a layer the page stays reachable
+               under has no claim on the way back. */
+            const back = modal && this.resolvedBack() === 'close';
+            const trigger = this.triggerNode();
+            if (overlay) {
+                /* The panel is what a press is inside of; the scrim is the way out, on
+                   the click rather than the pointerdown so a selection dragged out of
+                   the panel is not a press on the scrim. */
+                this.layer = createDismissableLayer(node, {
+                    back,
+                    branches: trigger === null ? [] : [trigger],
+                    content: panel,
+                    escape,
+                    modal,
+                    onDismiss: (request) => {
+                        if (request.reason === 'outsidePress' && !outsidePress)
+                            return request.cancel();
+                        this.request(false, request.reason, undefined, request.source);
+                    },
+                    outsidePress,
+                    outsidePressEvent: 'click',
+                });
+            }
+            const wanted = this.initialFocus() ?? 'first';
+            const returnTo = this.finalFocus();
+            /**
+             * Where focus goes back to with no `finalFocus`: what held it when the
+             * drawer opened, or the trigger when that was nothing. A click does not
+             * focus a button in Safari, so a drawer opened from its trigger there
+             * had `body` as its origin and gave focus back to nowhere.
+             */
+            const origin = panel.ownerDocument.activeElement;
+            const originParent = origin?.parentElement ?? null;
+            const fallback = () => {
+                if (origin === null || origin === origin.ownerDocument.body)
+                    return this.triggerNode();
+                if (origin.isConnected)
+                    return origin;
+                /* The row the drawer was opened from has gone: its nearest ancestor
+                   that is still in the document, as the contract's restore rule says. */
+                let node = originParent;
+                while (node !== null && !node.isConnected)
+                    node = node.parentElement;
+                return node;
+            };
+            this.scope = createFocusScope(panel, {
+                contain: overlay && modal,
+                initial: !overlay ? false : wanted instanceof HTMLElement ? () => wanted : wanted,
+                restore: returnTo === undefined ? fallback : returnTo === false ? false : () => returnTo,
+            });
+            this.scope.enter();
+            onCleanup(() => {
+                /* The layer first: while it stands, a modal layer keeps every sibling
+                   up to the root `inert`, and focus given back to a trigger there is
+                   refused — the reader lands on `body`. */
+                this.layer?.destroy();
+                this.layer = null;
+                this.scope?.destroy();
+                this.scope = null;
+                this.closed.emit(this.result());
+                this.result.set(undefined);
+            });
+        });
+        /**
+         * What the panel measures at rest, as a fraction, while nothing has moved
+         * it. It is what the separator reports and what `scrimFrom` compares
+         * against, and content that arrives while the sheet is open moves it, so it
+         * is observed rather than read once.
+         */
+        effect((onCleanup) => {
+            const box = this.measuringBox();
+            const panel = this.panelRef()?.nativeElement;
+            if (!this.browser ||
+                box === null ||
+                panel === undefined ||
+                !this.open() ||
+                this.extent() !== undefined ||
+                this.live() !== null) {
+                return;
+            }
+            const inline = isInlineSide(this.resolvedSide());
+            const read = () => {
+                const rect = box.getBoundingClientRect();
+                const span = inline ? rect.width : rect.height;
+                if (span <= 0)
+                    return;
+                const own = inline ? panel.offsetWidth : panel.offsetHeight;
+                this.rest.set(Math.round((own / span) * 1000) / 1000);
+            };
+            read();
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const observer = new ResizeObserver(read);
+            observer.observe(panel);
+            observer.observe(box);
+            onCleanup(() => observer.disconnect());
+        });
+        /**
+         * The virtual keyboard. The layer recedes by what it covers, so the panel
+         * lands above the keys; `@slotted/core/measure` reads it from the visual
+         * viewport.
+         */
+        effect((onCleanup) => {
+            const node = this.layerRef()?.nativeElement;
+            if (node === undefined || !this.open() || this.resolvedMode() !== 'overlay')
+                return;
+            const stop = observeKeyboardInset(node.ownerDocument.defaultView, (pixels) => {
+                if (pixels === 0)
+                    node.style.removeProperty('--slotted-keyboard-inset');
+                else
+                    node.style.setProperty('--slotted-keyboard-inset', `${pixels}px`);
+            });
+            onCleanup(() => {
+                stop();
+                node.style.removeProperty('--slotted-keyboard-inset');
+            });
+        });
+        /**
+         * The body of a sheet from the bottom moves it under a touch, and hands the
+         * gesture to the scroll of what it holds when that is what it is —
+         * `attachSheetDrag` decides which. The request is made once, on release,
+         * and the hand's position lives in `live` until then.
+         */
+        effect((onCleanup) => {
+            const node = this.layerRef()?.nativeElement;
+            const panel = this.panelRef()?.nativeElement;
+            if (node === undefined ||
+                panel === undefined ||
+                !this.open() ||
+                !this.sheet() ||
+                this.resolvedDrag() !== 'panel') {
+                return;
+            }
+            let span = 0;
+            let start = 0;
+            let last = 0;
+            let measured = {
+                rest: undefined,
+                stops: [],
+            };
+            const now = () => {
+                span = node.getBoundingClientRect().height;
+                return span > 0 ? panel.offsetHeight / span : 0;
+            };
+            onCleanup(attachSheetDrag(panel, {
+                enabled: () => this.open(),
+                canGrow: () => {
+                    const at = now();
+                    const top = this.measureStops(panel, span).stops.at(-1);
+                    return top !== undefined && at < top && !sameStop(at, top);
+                },
+                onStart: () => {
+                    start = now();
+                    last = start;
+                    measured = this.measureStops(panel, span);
+                    this.dragging.set(true);
+                    this.live.set(start);
+                },
+                onMove: (distance) => {
+                    if (span <= 0)
+                        return;
+                    last = Math.max(0, start + distance / span);
+                    this.live.set(dampenExtent(last, measured.stops.at(-1) ?? start));
+                },
+                onEnd: (velocity) => {
+                    this.dragging.set(false);
+                    const landed = settleExtent({
+                        fraction: Math.min(last, measured.stops.at(-1) ?? last),
+                        span,
+                        stops: measured.stops,
+                        velocity: span > 0 ? velocity / span : 0,
+                    });
+                    if (landed === 'close') {
+                        /* The panel stays where the hand left it, so the exit slides from
+                           there; a close the consumer refused puts it back. */
+                        this.request(false, 'pointer', undefined, null);
+                        if (this.open())
+                            this.live.set(null);
+                        return;
+                    }
+                    this.live.set(null);
+                    this.requestExtent(this.asRequest(landed, measured.rest), 'pointer', null);
+                },
+            }));
+        });
+        this.destroyRef.onDestroy(() => {
+            this.scope?.destroy();
+            this.layer?.destroy();
+            this.presence.destroy();
+            this.releasePortal();
+        });
+    }
+    /** The stops a sheet rests on and the rest among them, measured now. */
+    measureStops(panel, span) {
+        return measureSheetStops({
+            atRest: this.extent() === undefined && this.live() === null,
+            content: this.resolvedSize() === 'content',
+            panel,
+            reserve: CONTENT_RESERVE,
+            rest: this.rest(),
+            snapPoints: this.snapPoints(),
+            span,
+        });
+    }
+    /**
+     * What a settled fraction is asked as: the content stop is `undefined`, so
+     * the sheet follows its content again when the content grows.
+     */
+    asRequest(fraction, rest) {
+        return stopAsExtent(fraction, rest, this.resolvedSize() === 'content');
+    }
+    /**
+     * The box the panel's measure is a fraction of: the layer under `overlay`,
+     * which is fixed to the viewport, and the drawer's own parent under `inline`,
+     * where the drawer is what is being sized and cannot measure itself.
+     */
+    measuringBox() {
+        const node = this.layerRef()?.nativeElement ?? null;
+        if (node === null)
+            return null;
+        /* Under `inline` the layer's parent is the host, which renders
+           `display: contents` and lays nothing out: the box is the host's own
+           parent, the consumer's layout. */
+        return this.resolvedMode() === 'inline' ? this.host.parentElement : node;
+    }
+    /**
+     * The layer element is given back to the host before the portal goes, so
+     * Angular removes a node that is where its own view expects it to be.
+     */
+    releasePortal() {
+        if (this.portal === null)
+            return;
+        const node = this.layerRef()?.nativeElement;
+        if (node !== undefined)
+            this.host.append(node);
+        this.portal.release();
+        this.portal = null;
+    }
+    /** Asks to open or close, carrying the reason, the result and the event. */
+    request(next, reason, result, source) {
+        if (next === this.open())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.open(),
+            onRequest: (raw) => {
+                cancelled = raw.cancelled;
+                this.openChangeRequest.emit({
+                    cancel: () => raw.cancel(),
+                    get cancelled() {
+                        return raw.cancelled;
+                    },
+                    previous: raw.previous,
+                    reason,
+                    result,
+                    source: raw.source,
+                    value: raw.value,
+                });
+            },
+        });
+        if (!state.request(next, reason, source) || cancelled)
+            return;
+        if (!next)
+            this.result.set(result);
+        this.open.set(next);
+    }
+    /**
+     * Asks to move the measure. While the pointer is down the floor is not
+     * enforced — a sheet the reader is pulling down has to follow the hand — and
+     * the separator decides on release whether that means a smaller panel or a
+     * closed one.
+     */
+    requestExtent(next, reason, source) {
+        /* `undefined` travels whole: it is the panel back on its size step, and a
+           clamp of it would be a clamp of a value that is not a fraction. */
+        const wanted = next === undefined ? undefined : clamp(next, 0, this.bounds().max);
+        if (wanted === this.extent())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            /* `undefined` is a value of this state — the panel on its size step —
+               and not a gap to fill: a floor standing in for it made a request for
+               the floor from the content stop look like no change at all. */
+            initial: this.extent(),
+            onRequest: (raw) => {
+                cancelled = raw.cancelled;
+                this.extentChangeRequest.emit({
+                    cancel: () => raw.cancel(),
+                    get cancelled() {
+                        return raw.cancelled;
+                    },
+                    previous: raw.previous,
+                    reason,
+                    source: raw.source,
+                    value: raw.value,
+                });
+            },
+        });
+        if (!state.request(wanted, reason, source) || cancelled)
+            return;
+        this.extent.set(wanted);
+    }
+    /**
+     * Back to the measure the size step gives it, which is where the panel
+     * started. Angular has one model rather than a controlled and an
+     * uncontrolled input, so the measure to restore is the one the model held
+     * before anything moved it, read once.
+     */
+    restoreExtent(reason, source) {
+        this.requestExtent(this.initialExtent, reason, source);
+    }
+    /** Opens the drawer from code, carrying `programmatic`. */
+    openDrawer() {
+        this.request(true, 'programmatic', undefined, undefined);
+    }
+    /** Closes it from code, carrying `programmatic` and the result given. */
+    close(result) {
+        this.request(false, 'programmatic', result, undefined);
+    }
+    /**
+     * The panel, once it is in the document — what React's handle calls
+     * `panel`. A family that composes the drawer reads it to hand the panel a
+     * value only it knows, as `action-sheet` hands it its measure.
+     */
+    get panel() {
+        return this.panelRef()?.nativeElement ?? null;
+    }
+    /** Moves focus into the panel, as opening an overlay drawer does. */
+    focus() {
+        this.panelRef()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDrawer, isStandalone: true, selector: "sl-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, extent: { classPropertyName: "extent", publicName: "extent", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, outsidePress: { classPropertyName: "outsidePress", publicName: "outsidePress", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, scrimFrom: { classPropertyName: "scrimFrom", publicName: "scrimFrom", isSignal: true, isRequired: false, transformFunction: null }, minExtent: { classPropertyName: "minExtent", publicName: "minExtent", isSignal: true, isRequired: false, transformFunction: null }, maxExtent: { classPropertyName: "maxExtent", publicName: "maxExtent", isSignal: true, isRequired: false, transformFunction: null }, snapPoints: { classPropertyName: "snapPoints", publicName: "snapPoints", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", 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 } }, outputs: { open: "openChange", extent: "extentChange", openChangeRequest: "openChangeRequest", extentChangeRequest: "extentChangeRequest", closed: "closed" }, host: { properties: { "style.display": "'contents'" } }, viewQueries: [{ propertyName: "layerRef", first: true, predicate: ["layer"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], exportAs: ["slDrawer"], ngImport: i0, template: `
+    @if (mounted()) {
+      <div
+        #layer
+        data-ui="drawer"
+        data-part="root"
+        [attr.data-mode]="resolvedMode()"
+        [attr.data-side]="resolvedSide()"
+        [attr.data-size]="resolvedSize()"
+        [attr.data-mount]="resolvedMount()"
+        [attr.data-modal]="resolvedModal() ? '' : null"
+        [attr.data-open]="visible() ? '' : null"
+        [attr.data-loading]="loading() ? '' : null"
+        [attr.data-dragging]="dragging() ? '' : null"
+        [attr.data-drag]="sheet() ? resolvedDrag() : null"
+        [attr.data-undimmed]="undimmed() ? '' : null"
+        [attr.inert]="interactive() ? null : ''"
+        [style.--slotted-drawer-extent]="extentLength()"
+      >
+        @if (showBackdrop()) {
+          <div data-part="backdrop"></div>
+        }
+        <div
+          #panel
+          data-part="panel"
+          [id]="panelId"
+          [attr.role]="role()"
+          [attr.aria-modal]="resolvedModal() ? 'true' : null"
+          [attr.aria-label]="label()"
+          [attr.aria-labelledby]="labelledBy()"
+          [attr.aria-describedby]="describedBy()"
+        >
+          <ng-content />
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=drawer]{--_step: var(--slotted-drawer-extent-md, 24rem);--_extent: var(--slotted-drawer-extent, var(--_step));--_padding-inline: var(--slotted-space-7, 1.25rem);--_padding-block: var(--slotted-space-6, 1rem);--_gap: var(--slotted-space-5, .75rem);--_rule-size: var(--slotted-border-width-thin, 1px);--_title-font-size: var(--slotted-font-size-lg, 1rem);--_description-font-size: var(--slotted-font-size-md, .875rem);--_body-font-size: var(--slotted-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_close-size: max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_resizer-thickness: var(--slotted-space-6, 1rem);--_resizer-reach: var(--slotted-target-min, 24px);--_resizer-line: var(--slotted-border-width-thick, 2px);--_radius: var(--slotted-radius-lg, 8px);--_slide: var(--slotted-duration-long) var(--slotted-easing-enter);--_move: var(--slotted-duration-medium) var(--slotted-easing-enter);--_reveal: content-visibility var(--slotted-duration-medium) allow-discrete;box-sizing:border-box;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);color:var(--slotted-drawer-color, var(--slotted-text, CanvasText));font-family:var(--slotted-control-font-family, var(--slotted-font-family-sans));content-visibility:visible;transition:var(--_reveal)}[data-ui=drawer]:not([data-open]){--_slide: var(--slotted-duration-medium) var(--slotted-easing-exit);--_move: var(--slotted-duration-medium) var(--slotted-easing-exit)}[data-ui=drawer][data-dragging]{--_move: var(--slotted-duration-instant) var(--slotted-easing-standard)}[data-ui=drawer][data-size=sm]{--_step: var(--slotted-drawer-extent-sm, 18rem);--_padding-inline: var(--slotted-space-6, 1rem)}[data-ui=drawer][data-size=lg]{--_step: var(--slotted-drawer-extent-lg, 30rem)}[data-ui=drawer][data-size=xl]{--_step: var(--slotted-drawer-extent-xl, 40rem);--_padding-inline: var(--slotted-space-8, 1.5rem);--_title-font-size: var(--slotted-font-size-xl, 1.125rem)}[data-ui=drawer][data-size=full]{--_step: 100%}[data-ui=drawer][data-mode=overlay]{position:fixed;inset:0;z-index:calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0))}[data-ui=drawer][data-mode=inline]{overflow:clip}[data-ui=drawer][data-mode=inline][data-side=start],[data-ui=drawer][data-mode=inline][data-side=end]{inline-size:0;transition:inline-size var(--_move),var(--_reveal)}[data-ui=drawer][data-mode=inline][data-side=top],[data-ui=drawer][data-mode=inline][data-side=bottom]{block-size:0;transition:block-size var(--_move),var(--_reveal)}[data-ui=drawer][data-mode=inline][data-open][data-side=start],[data-ui=drawer][data-mode=inline][data-open][data-side=end]{inline-size:var(--_extent);max-inline-size:100%}[data-ui=drawer][data-mode=inline][data-open][data-side=top],[data-ui=drawer][data-mode=inline][data-open][data-side=bottom]{block-size:var(--_extent);max-block-size:100%}[data-ui=drawer][inert]{content-visibility:hidden;pointer-events:none}[data-ui=drawer]>[data-part=backdrop]{grid-area:1 / 1;background:var(--slotted-drawer-scrim, var(--slotted-scrim, Canvas));opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=drawer][data-open]>[data-part=backdrop]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=drawer]>[data-part=panel]{grid-area:1 / 1;box-sizing:border-box;transition:inline-size var(--_move),block-size var(--_move);position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-inline-size:0;min-block-size:0;--_row-padding-inline-start: var(--_padding-inline);--_row-padding-inline-end: var(--_padding-inline);background:var(--slotted-drawer-surface, var(--slotted-surface-raised, Canvas));border-color:var(--slotted-drawer-border-color, var(--slotted-border-subtle, ButtonBorder));border-style:solid;border-width:0;overflow:hidden}[data-ui=drawer][data-mode=overlay]>[data-part=panel]{box-shadow:var(--slotted-shadow-lg);translate:0 0;transition:translate var(--_slide),inline-size var(--_move),block-size var(--_move)}[data-ui=drawer][data-mode=overlay]:not([data-open])>[data-part=panel]{translate:var(--_shift-x, 0) var(--_shift-y, 0)}[data-ui=drawer][data-dragging]>[data-part=panel]{transition:none}[data-ui=drawer][data-dragging][data-mode=overlay]>[data-part=panel]{transition:translate var(--_slide)}[data-ui=drawer][data-dragging][data-mode=inline][data-side=start],[data-ui=drawer][data-dragging][data-mode=inline][data-side=end],[data-ui=drawer][data-dragging][data-mode=inline][data-side=top],[data-ui=drawer][data-dragging][data-mode=inline][data-side=bottom]{transition:var(--_reveal)}@media(prefers-reduced-motion:reduce){[data-ui=drawer][data-mode=overlay]>[data-part=panel]{translate:0 0;transition:inline-size var(--_move),block-size var(--_move)}}[data-ui=drawer][data-side=start]>[data-part=panel],[data-ui=drawer][data-side=end]>[data-part=panel]{align-self:stretch;inline-size:min(var(--_extent),100%);grid-template-rows:auto minmax(0,1fr) auto}[data-ui=drawer][data-side=top]>[data-part=panel],[data-ui=drawer][data-side=bottom]>[data-part=panel]{justify-self:stretch;block-size:min(var(--_extent),100%)}[data-ui=drawer][data-side=start]>[data-part=panel]{justify-self:start;--_shift-x: -100%;--_row-padding-inline-end: max(var(--_padding-inline), var(--_resizer-thickness));border-inline-end-width:var(--_rule-size)}[data-ui=drawer][data-side=end]>[data-part=panel]{justify-self:end;--_shift-x: 100%;--_row-padding-inline-start: max(var(--_padding-inline), var(--_resizer-thickness));border-inline-start-width:var(--_rule-size)}[data-ui=drawer][data-side=top]>[data-part=panel]{align-self:start;grid-template-rows:auto minmax(0,1fr) auto auto;--_shift-y: -100%;border-block-end-width:var(--_rule-size);border-end-start-radius:var(--slotted-drawer-radius, var(--_radius));border-end-end-radius:var(--slotted-drawer-radius, var(--_radius))}[data-ui=drawer][data-side=bottom]>[data-part=panel]{align-self:end;grid-template-rows:auto auto minmax(0,1fr) auto;--_shift-y: 100%;border-block-start-width:var(--_rule-size);border-start-start-radius:var(--slotted-drawer-radius, var(--_radius));border-start-end-radius:var(--slotted-drawer-radius, var(--_radius))}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=header]{grid-row:2}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=body]{grid-row:3}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=footer]{grid-row:4}[data-ui=drawer][data-mode=overlay][data-side=top]>[data-part=panel],[data-ui=drawer][data-mode=overlay][data-side=bottom]>[data-part=panel]{justify-self:center;inline-size:min(100%,var(--slotted-drawer-sheet-inline-size, var(--slotted-drawer-extent-xl, 40rem)));border-inline-width:var(--_rule-size)}[data-ui=drawer][data-size=content]{--_step: auto;--_content-cap: min( var(--slotted-drawer-extent, calc(100% - var(--slotted-space-12, 4rem))), 100% );interpolate-size:allow-keywords}[data-ui=drawer][data-size=content][data-side=start],[data-ui=drawer][data-size=content][data-side=end]{--_step: max-content}[data-ui=drawer][data-size=content][data-side=start]>[data-part=panel],[data-ui=drawer][data-size=content][data-side=end]>[data-part=panel]{inline-size:var(--_extent);max-inline-size:var(--_content-cap)}[data-ui=drawer][data-size=content][data-side=top]>[data-part=panel],[data-ui=drawer][data-size=content][data-side=bottom]>[data-part=panel]{block-size:var(--_extent);max-block-size:var(--_content-cap)}[data-ui=drawer][data-mode=overlay]{padding-block-end:var(--slotted-keyboard-inset, 0px)}[data-ui=drawer][data-undimmed]>[data-part=backdrop]{opacity:0;pointer-events:none}[data-ui=drawer][data-undimmed]{pointer-events:none}[data-ui=drawer][data-undimmed]>[data-part=panel]{pointer-events:auto}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=body]:last-child{padding-block-end:calc(var(--_padding-block) + env(safe-area-inset-bottom,0px))}[data-ui=drawer][data-side=start]:dir(rtl)>[data-part=panel]{--_shift-x: 100%}[data-ui=drawer][data-side=end]:dir(rtl)>[data-part=panel]{--_shift-x: -100%}[data-ui=drawer][data-size=full]>[data-part=panel]{border-width:0;border-radius:0}[data-ui=drawer][data-mode=inline][data-side=start]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-side=end]>[data-part=panel]{inline-size:var(--_extent)}[data-ui=drawer][data-mode=inline][data-side=top]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-side=bottom]>[data-part=panel]{block-size:var(--_extent)}[data-ui=drawer][data-mode=inline][data-open][data-side=start]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-open][data-side=end]>[data-part=panel]{max-inline-size:100%}[data-ui=drawer][data-mode=inline][data-open][data-side=top]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-open][data-side=bottom]>[data-part=panel]{max-block-size:100%}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]{display:flex;align-items:center;justify-content:center;gap:min(var(--slotted-space-9, 2rem),12%);background:transparent;touch-action:none;--_rest: var(--slotted-drawer-resizer-line-color, var(--slotted-border-strong, ButtonBorder));--_active: var( --slotted-drawer-resizer-line-active-color, var(--slotted-text-muted, ButtonText) )}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover,[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible,[data-ui=drawer][data-dragging]>[data-part=panel]>[data-part=resizer]{gap:var(--slotted-space-4, .5rem)}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer],[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]{flex-direction:column}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:before{content:\"\";position:absolute;--_reach-overhang: calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2)}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]:before,[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]:before{inset-block:0;inset-inline:var(--_reach-overhang)}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]:before,[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]:before{inset-inline:0;inset-block:var(--_reach-overhang)}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer],[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]{position:absolute;inset-block:0;inline-size:var(--_resizer-thickness);cursor:col-resize}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]{inset-inline-end:0}[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]{inset-inline-start:0}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]{position:relative;block-size:var(--_resizer-thickness);cursor:row-resize}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]{grid-row:1}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]{grid-row:4}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]>[data-part=line]{flex:0 1 min(var(--slotted-space-12, 4rem),20%);min-block-size:0;min-inline-size:0;inline-size:var(--slotted-border-width-thin, 1px);border-radius:var(--slotted-radius-sm, 2px);transition:flex-basis var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]>[data-part=line]:first-child,[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]>[data-part=line]:first-child{background:linear-gradient(to bottom,transparent,var(--_rest))}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]>[data-part=line]:last-child,[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]>[data-part=line]:last-child{background:linear-gradient(to top,transparent,var(--_rest))}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=line],[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=line],[data-ui=drawer][data-dragging]>[data-part=panel]>[data-part=resizer]>[data-part=line]{flex-basis:100%;background:var(--_active)}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{flex:none;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=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]>[data-part=grip],[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{color:var(--_rest);background-image:radial-gradient(circle at center,currentColor 40%,transparent 42%);background-size:var(--slotted-space-2, .25rem) var(--slotted-space-2, .25rem);inline-size:calc(2 * var(--slotted-space-2, .25rem));block-size:calc(3 * var(--slotted-space-2, .25rem))}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]>[data-part=grip],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{background-color:var(--_rest);border-radius:var(--slotted-radius-full, 9999px);block-size:var(--slotted-space-2, .25rem);inline-size:var(--slotted-space-11, 3rem)}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]>[data-part=line],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]>[data-part=line]{display:none}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=grip],[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=grip],[data-ui=drawer][data-dragging]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{color:var(--_active)}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=grip],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=grip],[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=grip],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=grip],[data-ui=drawer][data-dragging][data-side=top]>[data-part=panel]>[data-part=resizer]>[data-part=grip],[data-ui=drawer][data-dragging][data-side=bottom]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{background-color:var(--_active)}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=drawer][data-dragging][data-side=start]>[data-part=panel],[data-ui=drawer][data-dragging][data-side=end]>[data-part=panel]{will-change:inline-size}[data-ui=drawer][data-dragging][data-side=top]>[data-part=panel],[data-ui=drawer][data-dragging][data-side=bottom]>[data-part=panel]{will-change:block-size}[data-ui=drawer]>[data-part=panel]>[data-part=header]{grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--_gap);row-gap:var(--slotted-space-2, .25rem);padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end)}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=title]{grid-column:1;grid-row:1;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-family:var( --slotted-drawer-title-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(--slotted-drawer-title-color, var(--slotted-text, CanvasText))}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=description]{grid-column:1;grid-row:2;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-size:var(--_description-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-drawer-description-color, var(--slotted-text-muted, GrayText))}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]{--slotted-icon-size: var(--_icon-size);grid-column:2;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-end:calc(-1 * (var(--_close-size) - var(--_icon-size)) / 2);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-drawer-close-color, var(--slotted-text-muted, GrayText));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))}@media(pointer:coarse){[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]{position:relative}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:not(:disabled):hover{background-color:var( --slotted-drawer-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:not(:disabled):active{background-color:var( --slotted-drawer-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=drawer]>[data-part=panel]>[data-part=body]{grid-row:2;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end);font-size:var(--_body-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-drawer-body-color, var(--slotted-text, CanvasText))}[data-ui=drawer]>[data-part=panel]>[data-part=body][data-inset=none]{padding:0}[data-ui=drawer]>[data-part=panel]>[data-part=body]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=drawer][data-loading]>[data-part=panel]>[data-part=body]{min-block-size:var(--slotted-space-12, 4rem)}[data-ui=drawer]>[data-part=panel]>[data-part=footer]{grid-row:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--_gap);padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end);background:var(--slotted-drawer-footer-surface, var(--slotted-surface-sunken, Canvas))}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=footer]{padding-block-end:calc(var(--_footer-padding-block, var(--_padding-block)) + env(safe-area-inset-bottom,0px))}[data-ui=drawer]>[data-part=panel]>[data-part=footer]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder))}@media(forced-colors:active){[data-ui=drawer]>[data-part=panel]{border-width:var(--slotted-border-width-thick, 2px);border-color:CanvasText}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'sl-drawer', standalone: true, exportAs: 'slDrawer', template: `
+    @if (mounted()) {
+      <div
+        #layer
+        data-ui="drawer"
+        data-part="root"
+        [attr.data-mode]="resolvedMode()"
+        [attr.data-side]="resolvedSide()"
+        [attr.data-size]="resolvedSize()"
+        [attr.data-mount]="resolvedMount()"
+        [attr.data-modal]="resolvedModal() ? '' : null"
+        [attr.data-open]="visible() ? '' : null"
+        [attr.data-loading]="loading() ? '' : null"
+        [attr.data-dragging]="dragging() ? '' : null"
+        [attr.data-drag]="sheet() ? resolvedDrag() : null"
+        [attr.data-undimmed]="undimmed() ? '' : null"
+        [attr.inert]="interactive() ? null : ''"
+        [style.--slotted-drawer-extent]="extentLength()"
+      >
+        @if (showBackdrop()) {
+          <div data-part="backdrop"></div>
+        }
+        <div
+          #panel
+          data-part="panel"
+          [id]="panelId"
+          [attr.role]="role()"
+          [attr.aria-modal]="resolvedModal() ? 'true' : null"
+          [attr.aria-label]="label()"
+          [attr.aria-labelledby]="labelledBy()"
+          [attr.aria-describedby]="describedBy()"
+        >
+          <ng-content />
+        </div>
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[style.display]': "'contents'" }, styles: ["@layer slotted.components{[data-ui=drawer]{--_step: var(--slotted-drawer-extent-md, 24rem);--_extent: var(--slotted-drawer-extent, var(--_step));--_padding-inline: var(--slotted-space-7, 1.25rem);--_padding-block: var(--slotted-space-6, 1rem);--_gap: var(--slotted-space-5, .75rem);--_rule-size: var(--slotted-border-width-thin, 1px);--_title-font-size: var(--slotted-font-size-lg, 1rem);--_description-font-size: var(--slotted-font-size-md, .875rem);--_body-font-size: var(--slotted-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_close-size: max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_resizer-thickness: var(--slotted-space-6, 1rem);--_resizer-reach: var(--slotted-target-min, 24px);--_resizer-line: var(--slotted-border-width-thick, 2px);--_radius: var(--slotted-radius-lg, 8px);--_slide: var(--slotted-duration-long) var(--slotted-easing-enter);--_move: var(--slotted-duration-medium) var(--slotted-easing-enter);--_reveal: content-visibility var(--slotted-duration-medium) allow-discrete;box-sizing:border-box;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);color:var(--slotted-drawer-color, var(--slotted-text, CanvasText));font-family:var(--slotted-control-font-family, var(--slotted-font-family-sans));content-visibility:visible;transition:var(--_reveal)}[data-ui=drawer]:not([data-open]){--_slide: var(--slotted-duration-medium) var(--slotted-easing-exit);--_move: var(--slotted-duration-medium) var(--slotted-easing-exit)}[data-ui=drawer][data-dragging]{--_move: var(--slotted-duration-instant) var(--slotted-easing-standard)}[data-ui=drawer][data-size=sm]{--_step: var(--slotted-drawer-extent-sm, 18rem);--_padding-inline: var(--slotted-space-6, 1rem)}[data-ui=drawer][data-size=lg]{--_step: var(--slotted-drawer-extent-lg, 30rem)}[data-ui=drawer][data-size=xl]{--_step: var(--slotted-drawer-extent-xl, 40rem);--_padding-inline: var(--slotted-space-8, 1.5rem);--_title-font-size: var(--slotted-font-size-xl, 1.125rem)}[data-ui=drawer][data-size=full]{--_step: 100%}[data-ui=drawer][data-mode=overlay]{position:fixed;inset:0;z-index:calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0))}[data-ui=drawer][data-mode=inline]{overflow:clip}[data-ui=drawer][data-mode=inline][data-side=start],[data-ui=drawer][data-mode=inline][data-side=end]{inline-size:0;transition:inline-size var(--_move),var(--_reveal)}[data-ui=drawer][data-mode=inline][data-side=top],[data-ui=drawer][data-mode=inline][data-side=bottom]{block-size:0;transition:block-size var(--_move),var(--_reveal)}[data-ui=drawer][data-mode=inline][data-open][data-side=start],[data-ui=drawer][data-mode=inline][data-open][data-side=end]{inline-size:var(--_extent);max-inline-size:100%}[data-ui=drawer][data-mode=inline][data-open][data-side=top],[data-ui=drawer][data-mode=inline][data-open][data-side=bottom]{block-size:var(--_extent);max-block-size:100%}[data-ui=drawer][inert]{content-visibility:hidden;pointer-events:none}[data-ui=drawer]>[data-part=backdrop]{grid-area:1 / 1;background:var(--slotted-drawer-scrim, var(--slotted-scrim, Canvas));opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=drawer][data-open]>[data-part=backdrop]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=drawer]>[data-part=panel]{grid-area:1 / 1;box-sizing:border-box;transition:inline-size var(--_move),block-size var(--_move);position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-inline-size:0;min-block-size:0;--_row-padding-inline-start: var(--_padding-inline);--_row-padding-inline-end: var(--_padding-inline);background:var(--slotted-drawer-surface, var(--slotted-surface-raised, Canvas));border-color:var(--slotted-drawer-border-color, var(--slotted-border-subtle, ButtonBorder));border-style:solid;border-width:0;overflow:hidden}[data-ui=drawer][data-mode=overlay]>[data-part=panel]{box-shadow:var(--slotted-shadow-lg);translate:0 0;transition:translate var(--_slide),inline-size var(--_move),block-size var(--_move)}[data-ui=drawer][data-mode=overlay]:not([data-open])>[data-part=panel]{translate:var(--_shift-x, 0) var(--_shift-y, 0)}[data-ui=drawer][data-dragging]>[data-part=panel]{transition:none}[data-ui=drawer][data-dragging][data-mode=overlay]>[data-part=panel]{transition:translate var(--_slide)}[data-ui=drawer][data-dragging][data-mode=inline][data-side=start],[data-ui=drawer][data-dragging][data-mode=inline][data-side=end],[data-ui=drawer][data-dragging][data-mode=inline][data-side=top],[data-ui=drawer][data-dragging][data-mode=inline][data-side=bottom]{transition:var(--_reveal)}@media(prefers-reduced-motion:reduce){[data-ui=drawer][data-mode=overlay]>[data-part=panel]{translate:0 0;transition:inline-size var(--_move),block-size var(--_move)}}[data-ui=drawer][data-side=start]>[data-part=panel],[data-ui=drawer][data-side=end]>[data-part=panel]{align-self:stretch;inline-size:min(var(--_extent),100%);grid-template-rows:auto minmax(0,1fr) auto}[data-ui=drawer][data-side=top]>[data-part=panel],[data-ui=drawer][data-side=bottom]>[data-part=panel]{justify-self:stretch;block-size:min(var(--_extent),100%)}[data-ui=drawer][data-side=start]>[data-part=panel]{justify-self:start;--_shift-x: -100%;--_row-padding-inline-end: max(var(--_padding-inline), var(--_resizer-thickness));border-inline-end-width:var(--_rule-size)}[data-ui=drawer][data-side=end]>[data-part=panel]{justify-self:end;--_shift-x: 100%;--_row-padding-inline-start: max(var(--_padding-inline), var(--_resizer-thickness));border-inline-start-width:var(--_rule-size)}[data-ui=drawer][data-side=top]>[data-part=panel]{align-self:start;grid-template-rows:auto minmax(0,1fr) auto auto;--_shift-y: -100%;border-block-end-width:var(--_rule-size);border-end-start-radius:var(--slotted-drawer-radius, var(--_radius));border-end-end-radius:var(--slotted-drawer-radius, var(--_radius))}[data-ui=drawer][data-side=bottom]>[data-part=panel]{align-self:end;grid-template-rows:auto auto minmax(0,1fr) auto;--_shift-y: 100%;border-block-start-width:var(--_rule-size);border-start-start-radius:var(--slotted-drawer-radius, var(--_radius));border-start-end-radius:var(--slotted-drawer-radius, var(--_radius))}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=header]{grid-row:2}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=body]{grid-row:3}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=footer]{grid-row:4}[data-ui=drawer][data-mode=overlay][data-side=top]>[data-part=panel],[data-ui=drawer][data-mode=overlay][data-side=bottom]>[data-part=panel]{justify-self:center;inline-size:min(100%,var(--slotted-drawer-sheet-inline-size, var(--slotted-drawer-extent-xl, 40rem)));border-inline-width:var(--_rule-size)}[data-ui=drawer][data-size=content]{--_step: auto;--_content-cap: min( var(--slotted-drawer-extent, calc(100% - var(--slotted-space-12, 4rem))), 100% );interpolate-size:allow-keywords}[data-ui=drawer][data-size=content][data-side=start],[data-ui=drawer][data-size=content][data-side=end]{--_step: max-content}[data-ui=drawer][data-size=content][data-side=start]>[data-part=panel],[data-ui=drawer][data-size=content][data-side=end]>[data-part=panel]{inline-size:var(--_extent);max-inline-size:var(--_content-cap)}[data-ui=drawer][data-size=content][data-side=top]>[data-part=panel],[data-ui=drawer][data-size=content][data-side=bottom]>[data-part=panel]{block-size:var(--_extent);max-block-size:var(--_content-cap)}[data-ui=drawer][data-mode=overlay]{padding-block-end:var(--slotted-keyboard-inset, 0px)}[data-ui=drawer][data-undimmed]>[data-part=backdrop]{opacity:0;pointer-events:none}[data-ui=drawer][data-undimmed]{pointer-events:none}[data-ui=drawer][data-undimmed]>[data-part=panel]{pointer-events:auto}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=body]:last-child{padding-block-end:calc(var(--_padding-block) + env(safe-area-inset-bottom,0px))}[data-ui=drawer][data-side=start]:dir(rtl)>[data-part=panel]{--_shift-x: 100%}[data-ui=drawer][data-side=end]:dir(rtl)>[data-part=panel]{--_shift-x: -100%}[data-ui=drawer][data-size=full]>[data-part=panel]{border-width:0;border-radius:0}[data-ui=drawer][data-mode=inline][data-side=start]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-side=end]>[data-part=panel]{inline-size:var(--_extent)}[data-ui=drawer][data-mode=inline][data-side=top]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-side=bottom]>[data-part=panel]{block-size:var(--_extent)}[data-ui=drawer][data-mode=inline][data-open][data-side=start]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-open][data-side=end]>[data-part=panel]{max-inline-size:100%}[data-ui=drawer][data-mode=inline][data-open][data-side=top]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-open][data-side=bottom]>[data-part=panel]{max-block-size:100%}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]{display:flex;align-items:center;justify-content:center;gap:min(var(--slotted-space-9, 2rem),12%);background:transparent;touch-action:none;--_rest: var(--slotted-drawer-resizer-line-color, var(--slotted-border-strong, ButtonBorder));--_active: var( --slotted-drawer-resizer-line-active-color, var(--slotted-text-muted, ButtonText) )}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover,[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible,[data-ui=drawer][data-dragging]>[data-part=panel]>[data-part=resizer]{gap:var(--slotted-space-4, .5rem)}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer],[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]{flex-direction:column}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:before{content:\"\";position:absolute;--_reach-overhang: calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2)}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]:before,[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]:before{inset-block:0;inset-inline:var(--_reach-overhang)}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]:before,[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]:before{inset-inline:0;inset-block:var(--_reach-overhang)}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer],[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]{position:absolute;inset-block:0;inline-size:var(--_resizer-thickness);cursor:col-resize}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]{inset-inline-end:0}[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]{inset-inline-start:0}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]{position:relative;block-size:var(--_resizer-thickness);cursor:row-resize}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]{grid-row:1}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]{grid-row:4}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]>[data-part=line]{flex:0 1 min(var(--slotted-space-12, 4rem),20%);min-block-size:0;min-inline-size:0;inline-size:var(--slotted-border-width-thin, 1px);border-radius:var(--slotted-radius-sm, 2px);transition:flex-basis var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]>[data-part=line]:first-child,[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]>[data-part=line]:first-child{background:linear-gradient(to bottom,transparent,var(--_rest))}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]>[data-part=line]:last-child,[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]>[data-part=line]:last-child{background:linear-gradient(to top,transparent,var(--_rest))}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=line],[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=line],[data-ui=drawer][data-dragging]>[data-part=panel]>[data-part=resizer]>[data-part=line]{flex-basis:100%;background:var(--_active)}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{flex:none;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=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]>[data-part=grip],[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{color:var(--_rest);background-image:radial-gradient(circle at center,currentColor 40%,transparent 42%);background-size:var(--slotted-space-2, .25rem) var(--slotted-space-2, .25rem);inline-size:calc(2 * var(--slotted-space-2, .25rem));block-size:calc(3 * var(--slotted-space-2, .25rem))}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]>[data-part=grip],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{background-color:var(--_rest);border-radius:var(--slotted-radius-full, 9999px);block-size:var(--slotted-space-2, .25rem);inline-size:var(--slotted-space-11, 3rem)}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]>[data-part=line],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]>[data-part=line]{display:none}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=grip],[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=grip],[data-ui=drawer][data-dragging]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{color:var(--_active)}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=grip],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=grip],[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=grip],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=grip],[data-ui=drawer][data-dragging][data-side=top]>[data-part=panel]>[data-part=resizer]>[data-part=grip],[data-ui=drawer][data-dragging][data-side=bottom]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{background-color:var(--_active)}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=drawer][data-dragging][data-side=start]>[data-part=panel],[data-ui=drawer][data-dragging][data-side=end]>[data-part=panel]{will-change:inline-size}[data-ui=drawer][data-dragging][data-side=top]>[data-part=panel],[data-ui=drawer][data-dragging][data-side=bottom]>[data-part=panel]{will-change:block-size}[data-ui=drawer]>[data-part=panel]>[data-part=header]{grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--_gap);row-gap:var(--slotted-space-2, .25rem);padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end)}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=title]{grid-column:1;grid-row:1;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-family:var( --slotted-drawer-title-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(--slotted-drawer-title-color, var(--slotted-text, CanvasText))}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=description]{grid-column:1;grid-row:2;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-size:var(--_description-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-drawer-description-color, var(--slotted-text-muted, GrayText))}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]{--slotted-icon-size: var(--_icon-size);grid-column:2;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-end:calc(-1 * (var(--_close-size) - var(--_icon-size)) / 2);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-drawer-close-color, var(--slotted-text-muted, GrayText));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))}@media(pointer:coarse){[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]{position:relative}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:not(:disabled):hover{background-color:var( --slotted-drawer-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:not(:disabled):active{background-color:var( --slotted-drawer-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=drawer]>[data-part=panel]>[data-part=body]{grid-row:2;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end);font-size:var(--_body-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-drawer-body-color, var(--slotted-text, CanvasText))}[data-ui=drawer]>[data-part=panel]>[data-part=body][data-inset=none]{padding:0}[data-ui=drawer]>[data-part=panel]>[data-part=body]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=drawer][data-loading]>[data-part=panel]>[data-part=body]{min-block-size:var(--slotted-space-12, 4rem)}[data-ui=drawer]>[data-part=panel]>[data-part=footer]{grid-row:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--_gap);padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end);background:var(--slotted-drawer-footer-surface, var(--slotted-surface-sunken, Canvas))}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=footer]{padding-block-end:calc(var(--_footer-padding-block, var(--_padding-block)) + env(safe-area-inset-bottom,0px))}[data-ui=drawer]>[data-part=panel]>[data-part=footer]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder))}@media(forced-colors:active){[data-ui=drawer]>[data-part=panel]{border-width:var(--slotted-border-width-thick, 2px);border-color:CanvasText}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], extent: [{ type: i0.Input, args: [{ isSignal: true, alias: "extent", required: false }] }, { type: i0.Output, args: ["extentChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mount: [{ type: i0.Input, args: [{ isSignal: true, alias: "mount", required: false }] }], escape: [{ type: i0.Input, args: [{ isSignal: true, alias: "escape", required: false }] }], outsidePress: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsidePress", required: false }] }], back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], drag: [{ type: i0.Input, args: [{ isSignal: true, alias: "drag", required: false }] }], scrimFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrimFrom", required: false }] }], minExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "minExtent", required: false }] }], maxExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxExtent", required: false }] }], snapPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapPoints", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], finalFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "finalFocus", required: false }] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }], extentChangeRequest: [{ type: i0.Output, args: ["extentChangeRequest"] }], closed: [{ type: i0.Output, args: ["closed"] }], layerRef: [{ type: i0.ViewChild, args: ['layer', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+
+/**
+ * A click synthesised by the keyboard reports no detail; a real one reports the
+ * click count. It is how `Enter`, `Space` and a pointer are told apart without
+ * a key listener existing for something the platform already handles.
+ */
+function activationReason(event) {
+    return event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/**
+ * The control that opens a drawer.
+ *
+ * It is the consumer's own element, which is what this ecosystem composes with:
+ * `<button slButton [slDrawerTrigger]="d">` is the library's own button and
+ * this adds the wiring to it. React reaches the same place with `render`,
+ * because there the component owns the tag.
+ *
+ * The trigger is also an overlay layer's *branch*: a press on it is inside the
+ * layer as far as `dismissable-layer` is concerned, or opening would
+ * immediately be read as an outside press and close what it just opened.
+ *
+ * `aria-haspopup` is written only under `mode="overlay"`. An inline drawer is a
+ * disclosure, not a popup, and the property would promise a layer that never
+ * arrives.
+ */
+class SlDrawerTrigger {
+    /** The drawer this control opens, reached with a template reference variable. */
+    drawer = input.required({ ...(ngDevMode ? { debugName: "drawer" } : /* istanbul ignore next */ {}), alias: 'slDrawerTrigger' });
+    native = inject(ElementRef).nativeElement;
+    /**
+     * `trigger` names the control when it belongs to no family of its own. On
+     * `slButton` the element is that family's root, and the part stays `root`:
+     * two directives write one attribute, and the family the element is drawn by
+     * keeps it, as React's `render` does by spreading the button's props last.
+     */
+    part = this.native.hasAttribute('data-ui')
+        ? this.native.getAttribute('data-part')
+        : 'trigger';
+    controls = computed(() => this.drawer().mounted() ? this.drawer().panelId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    haspopup = computed(() => this.drawer().resolvedMode() === 'overlay' ? 'dialog' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "haspopup" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.drawer().triggerNode.set(this.native);
+    }
+    ngOnDestroy() {
+        if (this.drawer().triggerNode() === this.native)
+            this.drawer().triggerNode.set(null);
+    }
+    press(event) {
+        /* The consumer's own handler ran first, and `preventDefault()` refuses the
+           open — composed with, never replaced. */
+        if (event.defaultPrevented)
+            return;
+        const drawer = this.drawer();
+        drawer.request(!drawer.open(), activationReason(event), undefined, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlDrawerTrigger, isStandalone: true, selector: "[slDrawerTrigger]", inputs: { drawer: { classPropertyName: "drawer", publicName: "slDrawerTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.data-part": "part", "attr.aria-haspopup": "haspopup()", "attr.aria-expanded": "drawer().open()", "attr.aria-controls": "controls()", "attr.data-open": "drawer().open() ? '' : null", "id": "drawer().triggerId" } }, exportAs: ["slDrawerTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDrawerTrigger]',
+                    standalone: true,
+                    exportAs: 'slDrawerTrigger',
+                    host: {
+                        '[attr.data-part]': 'part',
+                        type: 'button',
+                        '[attr.aria-haspopup]': 'haspopup()',
+                        '[attr.aria-expanded]': 'drawer().open()',
+                        '[attr.aria-controls]': 'controls()',
+                        '[attr.data-open]': "drawer().open() ? '' : null",
+                        '[id]': 'drawer().triggerId',
+                        '(click)': 'press($event)',
+                    },
+                }]
+        }], propDecorators: { drawer: [{ type: i0.Input, args: [{ isSignal: true, alias: "slDrawerTrigger", required: true }] }] } });
+class SlDrawerHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDrawerHeader, isStandalone: true, selector: "[slDrawerHeader]", host: { attributes: { "data-part": "header" } }, exportAs: ["slDrawerHeader"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDrawerHeader]',
+                    standalone: true,
+                    exportAs: 'slDrawerHeader',
+                    host: { 'data-part': 'header' },
+                }]
+        }] });
+/**
+ * The visible name, which `aria-labelledby` points at — on the panel and, as
+ * the Window Splitter pattern requires, on the separator that sizes it.
+ */
+class SlDrawerTitle {
+    drawer = inject(SlDrawer);
+    ngOnInit() {
+        this.drawer.hasTitle.set(true);
+    }
+    ngOnDestroy() {
+        this.drawer.hasTitle.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDrawerTitle, isStandalone: true, selector: "[slDrawerTitle]", host: { attributes: { "data-part": "title" }, properties: { "id": "drawer.titleId" } }, exportAs: ["slDrawerTitle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDrawerTitle]',
+                    standalone: true,
+                    exportAs: 'slDrawerTitle',
+                    host: { 'data-part': 'title', '[id]': 'drawer.titleId' },
+                }]
+        }] });
+/** The sentence that says what the drawer is about. */
+class SlDrawerDescription {
+    drawer = inject(SlDrawer);
+    ngOnInit() {
+        this.drawer.hasDescription.set(true);
+    }
+    ngOnDestroy() {
+        this.drawer.hasDescription.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDrawerDescription, isStandalone: true, selector: "[slDrawerDescription]", host: { attributes: { "data-part": "description" }, properties: { "id": "drawer.descriptionId" } }, exportAs: ["slDrawerDescription"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDrawerDescription]',
+                    standalone: true,
+                    exportAs: 'slDrawerDescription',
+                    host: { 'data-part': 'description', '[id]': 'drawer.descriptionId' },
+                }]
+        }] });
+/**
+ * The one row that scrolls, and the row `aria-busy` belongs to while the
+ * content is still on its way — the header, the close button, Escape and the
+ * separator all stay operable, because a drawer a reader cannot leave is the
+ * worse failure of the two.
+ */
+class SlDrawerBody {
+    drawer = inject(SlDrawer);
+    /** `none` drops the body's own padding, for content that brings its own inset — a page, a list on the panel's edges. */
+    inset = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlDrawerBody, isStandalone: true, selector: "[slDrawerBody]", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "body" }, properties: { "attr.aria-busy": "drawer.loading() ? 'true' : null", "attr.data-inset": "inset() ?? null" } }, exportAs: ["slDrawerBody"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDrawerBody]',
+                    standalone: true,
+                    exportAs: 'slDrawerBody',
+                    host: {
+                        'data-part': 'body',
+                        '[attr.aria-busy]': "drawer.loading() ? 'true' : null",
+                        '[attr.data-inset]': 'inset() ?? null',
+                    },
+                }]
+        }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] } });
+class SlDrawerFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDrawerFooter, isStandalone: true, selector: "[slDrawerFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slDrawerFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDrawerFooter]',
+                    standalone: true,
+                    exportAs: 'slDrawerFooter',
+                    host: { 'data-part': 'footer' },
+                }]
+        }] });
+/**
+ * The ✕ in the corner. It carries `dismiss`, which is the word the closed
+ * vocabulary in `docs/state-and-events.md` already has for what a close button
+ * means, and its `value` rides out on the request as the result.
+ */
+class SlDrawerClose {
+    /** The result the close carries out, which is the platform's `returnValue`. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    drawer = inject(SlDrawer);
+    /** A consumer's own `aria-label`, which wins over the catalog. */
+    ownLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    label = computed(() => this.ownLabel ?? this.drawer.t('close'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    press(event) {
+        if (event.defaultPrevented)
+            return;
+        this.drawer.request(false, 'dismiss', this.value(), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerClose, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlDrawerClose, isStandalone: true, selector: "[slDrawerClose]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "close", "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.aria-label": "label()" } }, exportAs: ["slDrawerClose"], ngImport: i0, template: `<ng-content
+    ><span slIcon><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: SlDrawerClose, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slDrawerClose]',
+                    standalone: true,
+                    exportAs: 'slDrawerClose',
+                    imports: [SlGlyph, SlIcon],
+                    /* The cross is drawn unless the consumer wrote content of their own. */
+                    template: `<ng-content
+    ><span slIcon><svg slGlyph name="x"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-part': 'close',
+                        type: 'button',
+                        '[attr.aria-label]': 'label()',
+                        '(click)': 'press($event)',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+/**
+ * The separator the reader moves, from the WAI-ARIA Window Splitter pattern.
+ *
+ * **Rendering it is the capability.** There is no `resizable` input, so an
+ * input with no separator, and a separator an input had switched off, are both
+ * states this family cannot be in.
+ *
+ * The arrows are physical rather than logical, which is the pattern's own
+ * reading: the key names a direction on the screen. `ArrowLeft` grows an
+ * `end`-side panel in a left-to-right document and shrinks it in a mirrored
+ * one, because there the panel is on the left and the reader is pushing its
+ * edge toward the wall.
+ */
+/** How far a press on the separator may wander and still be a tap. */
+const TAP_SLOP_PX = 3;
+class SlDrawerResizer {
+    /**
+     * How far one arrow press moves the separator, **in pixels**, when there are
+     * no snap points. A distance and not a proportion: a reader adjusting a pane
+     * is placing an edge against the content beside it, and a proportion of a
+     * wide layer is a jump.
+     */
+    step = input(EXTENT_STEP_PX, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** How far `Shift` and an arrow move it, in pixels. */
+    largeStep = input(EXTENT_LARGE_STEP_PX, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "largeStep" }] : /* istanbul ignore next */ []));
+    drawer = inject(SlDrawer);
+    native = inject(ElementRef).nativeElement;
+    /** Where the pointer last was, which is what decides a dismissal on release. */
+    dragged = null;
+    /** Where the pointer has been, for the velocity the release reads. */
+    samples = [];
+    /**
+     * Where the press began and how far the panel's edge was from the pointer
+     * then. The panel follows the pointer from that offset rather than jumping
+     * its edge under it, so a press that does not move is a tap and moves nothing.
+     */
+    press = null;
+    /** What `Enter` restores to once it has collapsed the panel. */
+    collapsed = null;
+    /** What the document looked like before the drag, and how to put it back. */
+    gesture = null;
+    orientation = computed(() => isInlineSide(this.drawer.resolvedSide()) ? 'vertical' : 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.drawer.hasTitle() ? this.drawer.titleId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    /* A content sheet may rest below `minExtent`, and its rest is still a value
+       the range holds. */
+    floor = computed(() => {
+        const min = this.drawer.bounds().min;
+        const rest = this.drawer.rest();
+        return this.drawer.resolvedSize() === 'content' && rest !== undefined
+            ? Math.min(min, rest)
+            : min;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floor" }] : /* istanbul ignore next */ []));
+    valueNow = computed(() => this.percent(clamp(this.current(), this.floor(), this.drawer.bounds().max)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueNow" }] : /* istanbul ignore next */ []));
+    percent(value) {
+        return Math.round(clamp(value, 0, 1) * 100);
+    }
+    current() {
+        return this.drawer.currentExtent() ?? this.drawer.rest() ?? this.drawer.bounds().min;
+    }
+    isRtl() {
+        return getComputedStyle(this.native).direction === 'rtl';
+    }
+    span() {
+        const box = this.drawer.measuringBox();
+        if (box === null)
+            return 0;
+        const rect = box.getBoundingClientRect();
+        return isInlineSide(this.drawer.resolvedSide()) ? rect.width : rect.height;
+    }
+    /**
+     * The stops the keyboard, the release and a tap share. Without snap points
+     * the range is continuous and there are none — the content stop joins only a
+     * list the consumer started, or a separator with no stops would stop moving.
+     */
+    stopsNow() {
+        const panel = this.native.parentElement;
+        if (panel === null || this.drawer.snapPoints().length === 0) {
+            return { rest: this.drawer.rest(), stops: [] };
+        }
+        return this.drawer.measureStops(panel, this.span());
+    }
+    fractionAt(event) {
+        const box = this.drawer.measuringBox();
+        if (box === null)
+            return null;
+        return extentAtPoint({
+            point: { x: event.clientX, y: event.clientY },
+            rect: box.getBoundingClientRect(),
+            rtl: this.isRtl(),
+            side: this.drawer.resolvedSide(),
+        });
+    }
+    pointerDown(event) {
+        if (event.defaultPrevented || event.button !== 0)
+            return;
+        const fraction = this.fractionAt(event);
+        if (fraction === null)
+            return;
+        event.preventDefault();
+        this.native.setPointerCapture(event.pointerId);
+        this.native.focus();
+        this.press = {
+            moved: false,
+            offset: this.current() - fraction,
+            x: event.clientX,
+            y: event.clientY,
+        };
+        this.samples = [];
+    }
+    pointerMove(event) {
+        const held = this.press;
+        if (held === null)
+            return;
+        const at = this.fractionAt(event);
+        if (at === null)
+            return;
+        if (!held.moved) {
+            if (Math.hypot(event.clientX - held.x, event.clientY - held.y) < TAP_SLOP_PX)
+                return;
+            held.moved = true;
+            /* The cursor has to survive the pointer leaving the separator, and a drag
+               across the page must not select the text under it. Both are the
+               document's and neither is reachable from the family's own stylesheet. */
+            this.gesture?.();
+            this.gesture = holdResizeGesture(this.native.ownerDocument, isInlineSide(this.drawer.resolvedSide()) ? 'col-resize' : 'row-resize');
+            this.drawer.dragging.set(true);
+        }
+        const fraction = clamp(at + held.offset, 0, 1);
+        this.dragged = fraction;
+        /* Three samples is what `extentVelocity` reads; keeping more would only let
+           an older, slower stretch of the same drag dilute the flick. */
+        this.samples = [...this.samples, { at: event.timeStamp, fraction }].slice(-3);
+        this.drawer.requestExtent(fraction, 'pointer', event);
+    }
+    /**
+     * A tap walks the stops upward and wraps from the highest to the lowest,
+     * which is what the grabber of a native sheet does and what Ionic calls
+     * `handleBehavior="cycle"`. A separator with no stops has nowhere to walk.
+     */
+    cycle(event) {
+        const { rest, stops } = this.stopsNow();
+        if (stops.length < 2)
+            return;
+        /* Where the panel is, read with the stops rather than from state a frame old. */
+        const at = this.drawer.currentExtent() ?? rest ?? this.current();
+        const next = stops.find((stop) => stop > at && !sameStop(stop, at)) ?? stops[0];
+        this.drawer.requestExtent(this.drawer.asRequest(next, rest), 'pointer', event);
+    }
+    /**
+     * Where the release lands. With stops it is `settleExtent`, the same rule
+     * the sheet's body answers: the closed position is the stop `0`, a fling goes
+     * to the next stop, anything slower to the nearest to where it was heading.
+     * Without stops the range is continuous — resizing is what a separator does
+     * on a desktop screen — and only the floor, or a fling toward the edge, asks
+     * to close. A close the consumer cancels leaves the panel at the floor.
+     */
+    endDrag(event) {
+        const held = this.press;
+        if (held === null)
+            return;
+        this.press = null;
+        if (this.native.hasPointerCapture(event.pointerId)) {
+            this.native.releasePointerCapture(event.pointerId);
+        }
+        if (!held.moved) {
+            if (event.type === 'pointerup')
+                this.cycle(event);
+            return;
+        }
+        this.gesture?.();
+        this.gesture = null;
+        this.drawer.dragging.set(false);
+        const bounds = this.drawer.bounds();
+        const span = this.span();
+        const last = this.dragged ?? this.current();
+        const velocity = extentVelocity(this.samples);
+        this.dragged = null;
+        this.samples = [];
+        const { rest, stops } = this.stopsNow();
+        if (stops.length > 0) {
+            const landed = settleExtent({ fraction: last, span, stops, velocity });
+            if (landed === 'close') {
+                this.drawer.request(false, 'pointer', undefined, event);
+                this.drawer.requestExtent(stops[0], 'pointer', event);
+                return;
+            }
+            this.drawer.requestExtent(this.drawer.asRequest(landed, rest), 'pointer', event);
+            return;
+        }
+        if (last < bounds.min || velocity * span <= -SHEET_FLING_PX_PER_S) {
+            this.drawer.request(false, 'pointer', undefined, event);
+            this.drawer.requestExtent(bounds.min, 'pointer', event);
+            return;
+        }
+        this.drawer.requestExtent(clamp(last, bounds.min, bounds.max), 'pointer', event);
+    }
+    /**
+     * Back to the measure the size step gives it, which is what `undefined`
+     * means for this state. It is the one gesture in the family that restores
+     * rather than moves, and every desktop pane divider answers a double click
+     * with it.
+     */
+    restore(event) {
+        if (event.defaultPrevented)
+            return;
+        event.preventDefault();
+        this.drawer.restoreExtent('pointer', event);
+    }
+    keyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const side = this.drawer.resolvedSide();
+        const bounds = this.drawer.bounds();
+        const inline = isInlineSide(side);
+        const atStart = anchorsAtStart(side, this.isRtl());
+        const towardFirstEdge = inline ? 'ArrowLeft' : 'ArrowUp';
+        const towardLastEdge = inline ? 'ArrowRight' : 'ArrowDown';
+        /**
+         * A distance and not a proportion. Five per cent of a twelve-hundred-pixel
+         * layer is sixty pixels, which is a jump rather than an adjustment; the
+         * fraction is still what the family stores, and the pixels are converted
+         * against the layer measured at the moment of the press.
+         */
+        const box = this.drawer.measuringBox();
+        const amount = box === null
+            ? 0
+            : stepAmountFromPixels({
+                pixels: event.shiftKey ? this.largeStep() : this.step(),
+                rect: box.getBoundingClientRect(),
+                side,
+            });
+        const { rest, stops } = this.stopsNow();
+        const by = (direction) => {
+            event.preventDefault();
+            const next = stepExtent({
+                amount,
+                direction,
+                fraction: this.current(),
+                max: stops.at(-1) ?? bounds.max,
+                min: stops[0] ?? bounds.min,
+                snapPoints: stops,
+            });
+            this.drawer.requestExtent(this.drawer.asRequest(next, rest), 'keyboard', event);
+        };
+        /** The two ends of the range: the first and last stop when there are stops. */
+        const to = (target) => {
+            event.preventDefault();
+            this.drawer.requestExtent(this.drawer.asRequest(target, rest), 'keyboard', event);
+        };
+        switch (event.key) {
+            case towardFirstEdge:
+                return by(atStart ? -1 : 1);
+            case towardLastEdge:
+                return by(atStart ? 1 : -1);
+            case 'Home':
+                return to(stops[0] ?? bounds.min);
+            case 'End':
+                return to(stops.at(-1) ?? bounds.max);
+            /**
+             * The pattern's own key, and the one departure from it: "collapses the
+             * pane" would mean closing the drawer, and Escape already means that. A
+             * reader who presses Enter on a separator expects the separator to still
+             * be there afterwards.
+             */
+            case 'Enter': {
+                event.preventDefault();
+                if (this.current() > bounds.min) {
+                    this.collapsed = this.current();
+                    return this.drawer.requestExtent(bounds.min, 'keyboard', event);
+                }
+                return this.drawer.requestExtent(this.collapsed ?? bounds.max, 'keyboard', event);
+            }
+            default:
+                return;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerResizer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlDrawerResizer, isStandalone: true, selector: "[slDrawerResizer]", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "resizer", "role": "separator", "tabindex": "0" }, listeners: { "pointerdown": "pointerDown($event)", "pointermove": "pointerMove($event)", "pointerup": "endDrag($event)", "lostpointercapture": "endDrag($event)", "keydown": "keyDown($event)", "dblclick": "restore($event)" }, properties: { "attr.aria-controls": "drawer.panelId", "attr.aria-labelledby": "labelledBy()", "attr.aria-orientation": "orientation()", "attr.aria-valuemin": "percent(floor())", "attr.aria-valuemax": "percent(drawer.bounds().max)", "attr.aria-valuenow": "valueNow()" } }, exportAs: ["slDrawerResizer"], ngImport: i0, template: `
+    <span data-part="line" aria-hidden="true"></span>
+    <span data-part="grip" aria-hidden="true"></span>
+    <span data-part="line" aria-hidden="true"></span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerResizer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slDrawerResizer]',
+                    standalone: true,
+                    exportAs: 'slDrawerResizer',
+                    /**
+                     * A component rather than a directive, and the template is the whole reason:
+                     * the separator draws its own picture now — two hairlines and a grip, or a
+                     * pill on a block side — and a directive has nothing to draw them with.
+                     *
+                     * Three elements rather than pseudo-elements because
+                     * `packages/styles/src/fallbacks.test.mjs` forbids a system colour inside
+                     * `::before` or `::after`, and both steps these take have one as their last
+                     * resort. The selector is unchanged, so no consumer's template moves.
+                     */
+                    template: `
+    <span data-part="line" aria-hidden="true"></span>
+    <span data-part="grip" aria-hidden="true"></span>
+    <span data-part="line" aria-hidden="true"></span>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'resizer',
+                        role: 'separator',
+                        tabindex: '0',
+                        '[attr.aria-controls]': 'drawer.panelId',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-orientation]': 'orientation()',
+                        '[attr.aria-valuemin]': 'percent(floor())',
+                        '[attr.aria-valuemax]': 'percent(drawer.bounds().max)',
+                        '[attr.aria-valuenow]': 'valueNow()',
+                        '(pointerdown)': 'pointerDown($event)',
+                        '(pointermove)': 'pointerMove($event)',
+                        '(pointerup)': 'endDrag($event)',
+                        '(lostpointercapture)': 'endDrag($event)',
+                        '(keydown)': 'keyDown($event)',
+                        '(dblclick)': 'restore($event)',
+                    },
+                }]
+        }], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], largeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeStep", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DRAWER_DEFAULTS, SlDrawer, SlDrawerBody, SlDrawerClose, SlDrawerDescription, SlDrawerFooter, SlDrawerHeader, SlDrawerIdFactory, SlDrawerResizer, SlDrawerTitle, SlDrawerTrigger, injectDrawerDefaults, provideDrawerDefaults };
+//# sourceMappingURL=slotted-angular-drawer.mjs.map