@almoamendev/ngx-md3 0.2.1 → 0.3.4

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, effect, Directive, inject, signal, computed, Injectable, InjectionToken, ViewChild, Component, ViewContainerRef, Injector, viewChild, numberAttribute, HostListener, model, contentChild, contentChildren, output, ElementRef, HostBinding, TemplateRef } from '@angular/core';
-import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
+import { input, booleanAttribute, effect, Directive, inject, signal, computed, Injectable, InjectionToken, ViewChild, Component, ViewContainerRef, Injector, viewChild, numberAttribute, HostListener, model, contentChild, contentChildren, PLATFORM_ID, afterNextRender, output, ElementRef, HostBinding, TemplateRef } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser, NgClass, NgTemplateOutlet } from '@angular/common';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/router';
@@ -9,10 +9,11 @@ import { fromEvent, startWith, map, filter, Subscription, Subject, merge, take }
 import { ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import * as i2 from '@angular/cdk/scrolling';
 import { CdkScrollable } from '@angular/cdk/scrolling';
+import { Directionality } from '@angular/cdk/bidi';
 import { FormControlName } from '@angular/forms';
 import { CdkDialogContainer, Dialog as Dialog$1 } from '@angular/cdk/dialog';
 import { hasModifierKey } from '@angular/cdk/keycodes';
-import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { Overlay, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
 
 class TypeDisplay {
     el;
@@ -1553,6 +1554,947 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     ], template: "<ng-content></ng-content>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-on-surface));--state-color: var(--md-scheme-on-surface);--border-radius: var(--md-border-radius-medium);--border-size: 0em;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: -.125em;font-size:1rem;border-radius:var(--md-border-radius-medium);display:block;width:100%;text-align:start;padding:0;border:none;text-decoration:none;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--md-shadow-1dp);transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing)}:host.md3-interactive:hover{box-shadow:var(--md-shadow-3dp)}:host.md3-interactive:active,:host.md3-interactive:focus{box-shadow:var(--md-shadow-1dp)}:host.md3-filled{--background-color: rgb(var(--md-scheme-surface-container-highest));box-shadow:var(--md-shadow-0dp)}:host.md3-filled.md3-interactive:hover{box-shadow:var(--md-shadow-1dp)}:host.md3-filled.md3-interactive:active,:host.md3-filled.md3-interactive:focus{box-shadow:var(--md-shadow-0dp)}:host.md3-outlined{--background-color: rgb(var(--md-scheme-surface));--border-size: .0625em;box-shadow:var(--md-shadow-0dp);border:var(--border-size) solid rgb(var(--md-scheme-outline-variant))}:host.md3-outlined.md3-interactive:hover{box-shadow:var(--md-shadow-1dp)}:host.md3-outlined.md3-interactive:active{box-shadow:var(--md-shadow-0dp)}:host.md3-outlined.md3-interactive:focus{box-shadow:var(--md-shadow-0dp);border-color:rgb(var(--md-scheme-on-surface))}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: StateComponent }], propDecorators: { cardType: [{ type: i0.Input, args: [{ isSignal: true, alias: "card-type", required: false }] }], isInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
 
+/** Fraction of its own size a medium item may flex by to protect the large item's target size. */
+const MEDIUM_FLEX = 0.1;
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Solves for the large item size given that medium items are always the mean of large and small.
+ *
+ * containerSize = largeSize * largeCount
+ *               + ((largeSize + smallSize) / 2) * mediumCount
+ *               + smallSize * smallCount
+ */
+function solveLargeSize(containerSize, smallSize, smallCount, mediumCount, largeCount) {
+    const smallContribution = (smallCount + mediumCount / 2) * smallSize;
+    return (containerSize - smallContribution) / (largeCount + mediumCount / 2);
+}
+/**
+ * Shrinks or grows a candidate until it exactly fills the container, disturbing the large items
+ * as little as possible: small items absorb the difference first, then medium items flex, and
+ * only what is left over changes the large size.
+ */
+function fit(containerSize, targetLargeSize, smallSizeMin, smallSizeMax, smallCount, mediumCount, largeCount, targetSmallSize, priority) {
+    let smallSize = clamp(targetSmallSize, smallSizeMin, smallSizeMax);
+    let largeSize = targetLargeSize;
+    let mediumSize = (targetLargeSize + smallSize) / 2;
+    const occupied = largeSize * largeCount + mediumSize * mediumCount + smallSize * smallCount;
+    const delta = containerSize - occupied;
+    if (smallCount > 0 && delta > 0) {
+        smallSize += Math.min(delta / smallCount, smallSizeMax - smallSize);
+    }
+    else if (smallCount > 0 && delta < 0) {
+        smallSize += Math.max(delta / smallCount, smallSizeMin - smallSize);
+    }
+    if (smallCount === 0) {
+        smallSize = 0;
+    }
+    largeSize = solveLargeSize(containerSize, smallSize, smallCount, mediumCount, largeCount);
+    mediumSize = (largeSize + smallSize) / 2;
+    // Give the large items back as much of their target size as the medium items can spare.
+    if (mediumCount > 0 && largeSize !== targetLargeSize) {
+        const targetAdjustment = (targetLargeSize - largeSize) * largeCount;
+        const availableFlex = mediumSize * MEDIUM_FLEX * mediumCount;
+        const distribute = Math.min(Math.abs(targetAdjustment), availableFlex);
+        const direction = targetAdjustment > 0 ? 1 : -1;
+        mediumSize -= (direction * distribute) / mediumCount;
+        largeSize += (direction * distribute) / largeCount;
+    }
+    return {
+        largeSize,
+        largeCount,
+        mediumSize,
+        mediumCount,
+        smallSize,
+        smallCount,
+        cost: cost(targetLargeSize, largeSize, mediumSize, smallSize, largeCount, mediumCount, smallCount, priority),
+    };
+}
+function isValid(largeSize, mediumSize, smallSize, largeCount, mediumCount, smallCount) {
+    if (largeSize <= 0) {
+        return false;
+    }
+    if (largeCount > 0 && smallCount > 0 && mediumCount > 0) {
+        return largeSize > mediumSize && mediumSize > smallSize;
+    }
+    if (largeCount > 0 && smallCount > 0) {
+        return largeSize > smallSize;
+    }
+    return true;
+}
+function cost(targetLargeSize, largeSize, mediumSize, smallSize, largeCount, mediumCount, smallCount, priority) {
+    if (!isValid(largeSize, mediumSize, smallSize, largeCount, mediumCount, smallCount)) {
+        return Number.POSITIVE_INFINITY;
+    }
+    // Prefer arrangements that appear earlier in the priority order and that leave the large
+    // item closest to the size the consumer asked for.
+    return Math.abs(targetLargeSize - largeSize) * priority;
+}
+/**
+ * Fits every permutation of the supplied counts and returns the cheapest.
+ *
+ * Permutations are generated in priority order, so a zero-cost candidate is provably optimal
+ * and ends the search early.
+ */
+function findLowestCostArrangement(containerSize, targetLargeSize, targetSmallSize, smallSizeMin, smallSizeMax, smallCounts, mediumCounts, largeCounts) {
+    let best;
+    let priority = 1;
+    for (const largeCount of largeCounts) {
+        for (const mediumCount of mediumCounts) {
+            for (const smallCount of smallCounts) {
+                const candidate = fit(containerSize, targetLargeSize, smallSizeMin, smallSizeMax, smallCount, mediumCount, largeCount, targetSmallSize, priority);
+                if (!best || candidate.cost < best.cost) {
+                    best = candidate;
+                    if (best.cost === 0) {
+                        return best;
+                    }
+                }
+                priority++;
+            }
+        }
+    }
+    // Every permutation was invalid; fall back to a single full-width item.
+    return best ?? {
+        largeSize: containerSize,
+        largeCount: 1,
+        mediumSize: 0,
+        mediumCount: 0,
+        smallSize: 0,
+        smallCount: 0,
+        cost: Number.POSITIVE_INFINITY,
+    };
+}
+/**
+ * Trims keylines until there are no more of them than there are items, so a short list never
+ * leaves empty slots. Small items go first, then medium — never large, since large items are
+ * already fully unmasked.
+ *
+ * Returns true when the counts changed and the arrangement needs re-solving.
+ */
+function trimToItemCount(candidate, itemCount) {
+    let surplus = candidate.smallCount + candidate.mediumCount + candidate.largeCount - itemCount;
+    let changed = false;
+    while (surplus > 0 && (candidate.smallCount > 0 || candidate.mediumCount > 1)) {
+        if (candidate.smallCount > 0) {
+            candidate.smallCount--;
+        }
+        else {
+            candidate.mediumCount--;
+        }
+        changed = true;
+        surplus--;
+    }
+    return changed;
+}
+/**
+ * The Material Design 3 multi-browse layout: a run of large items followed by a medium and a
+ * small item, sized so the whole arrangement fills the container exactly.
+ *
+ * Ported from `MultiBrowseCarouselStrategy` and `Arrangement` in Material Components for
+ * Android so the two implementations agree on sizing.
+ */
+const multiBrowseStrategy = {
+    // Multi-browse resizes items, so it only reads correctly with items resting on keylines.
+    snap: true,
+    arrange(context) {
+        const { containerSize, itemSize, smallSizeMin, smallSizeMax, itemCount, alignment } = context;
+        const maxSmallSize = Math.max(smallSizeMax, smallSizeMin);
+        const targetLargeSize = Math.min(itemSize, containerSize);
+        // A small item ideally reads as a third of a large one, held within its allowed range.
+        const targetSmallSize = clamp(itemSize / 3, smallSizeMin, maxSmallSize);
+        const targetMediumSize = (targetLargeSize + targetSmallSize) / 2;
+        let smallCounts = containerSize <= smallSizeMin * 2 ? [0] : [1];
+        let mediumCounts = [1, 0];
+        // A centred focal range needs matching keylines on both sides of it.
+        if (alignment === 'center') {
+            smallCounts = smallCounts.map((count) => count * 2);
+            mediumCounts = mediumCounts.map((count) => count * 2);
+        }
+        const minLargeSpace = containerSize
+            - targetMediumSize * Math.max(...mediumCounts)
+            - maxSmallSize * Math.max(...smallCounts);
+        const largeCountMin = Math.max(1, Math.floor(minLargeSpace / targetLargeSize));
+        const largeCountMax = Math.max(largeCountMin, Math.ceil(containerSize / targetLargeSize));
+        const largeCounts = [];
+        for (let count = largeCountMax; count >= largeCountMin; count--) {
+            largeCounts.push(count);
+        }
+        let arrangement = findLowestCostArrangement(containerSize, targetLargeSize, targetSmallSize, smallSizeMin, maxSmallSize, smallCounts, mediumCounts, largeCounts);
+        let resolve = trimToItemCount(arrangement, itemCount);
+        // An arrangement of nothing but large items has no visual hint that the list continues,
+        // so force a small item back in whenever there is room for one.
+        if (arrangement.mediumCount === 0 && arrangement.smallCount === 0 && containerSize > 2 * smallSizeMin) {
+            arrangement.smallCount = 1;
+            resolve = true;
+        }
+        if (resolve) {
+            arrangement = findLowestCostArrangement(containerSize, targetLargeSize, targetSmallSize, smallSizeMin, maxSmallSize, [arrangement.smallCount], [arrangement.mediumCount], [arrangement.largeCount]);
+        }
+        return {
+            largeSize: arrangement.largeSize,
+            largeCount: arrangement.largeCount,
+            mediumSize: arrangement.mediumSize,
+            mediumCount: arrangement.mediumCount,
+            smallSize: arrangement.smallSize,
+            smallCount: arrangement.smallCount,
+        };
+    },
+};
+/**
+ * Registry of the available carousel layouts.
+ *
+ * Adding a layout means implementing {@link CarouselStrategy}, widening `CarouselLayout` and
+ * adding the entry here — no changes to the component itself.
+ */
+const CAROUSEL_STRATEGIES = {
+    'multi-browse': multiBrowseStrategy,
+};
+
+/** Anchor size fallback, as a fraction of the large item, when an arrangement has no small items. */
+const ANCHOR_FALLBACK_RATIO = 0.2;
+function lerp(from, to, progress) {
+    return from + (to - from) * progress;
+}
+/**
+ * Lays out one shift step.
+ *
+ * Keylines before the focal range ascend in size towards it and keylines after it descend away
+ * from it, which is what keeps the arrangement looking balanced as it shifts. An off-screen
+ * anchor sits at each end so items have somewhere to shrink into rather than popping out.
+ */
+function buildState(step, arrangement, anchorSize) {
+    const { largeSize, largeCount, mediumSize, mediumCount, smallSize, smallCount } = arrangement;
+    const before = [
+        ...new Array(step.smallBefore).fill(smallSize),
+        ...new Array(step.mediumBefore).fill(mediumSize),
+    ];
+    const after = [
+        ...new Array(mediumCount - step.mediumBefore).fill(mediumSize),
+        ...new Array(smallCount - step.smallBefore).fill(smallSize),
+    ];
+    const sizes = [
+        anchorSize,
+        ...before,
+        ...new Array(largeCount).fill(largeSize),
+        ...after,
+        anchorSize,
+    ];
+    const firstFocalIndex = 1 + before.length;
+    const lastFocalIndex = firstFocalIndex + largeCount - 1;
+    // The leading anchor occupies [-anchorSize, 0] so the first real keyline starts at 0.
+    let cursor = -anchorSize;
+    const screenLocs = sizes.map((size) => {
+        const loc = cursor + size / 2;
+        cursor += size;
+        return loc;
+    });
+    // In scroll space every item occupies exactly `largeSize`, so keylines are evenly spaced.
+    // Anchoring that spacing to the first focal keyline keeps screen and scroll space aligned
+    // wherever an item is fully unmasked.
+    const focalLoc = screenLocs[firstFocalIndex];
+    const keylines = sizes.map((size, index) => ({
+        scrollLoc: focalLoc + (index - firstFocalIndex) * largeSize,
+        screenLoc: screenLocs[index],
+        maskedSize: size,
+        isFocal: index >= firstFocalIndex && index <= lastFocalIndex,
+        isAnchor: index === 0 || index === sizes.length - 1,
+    }));
+    return {
+        keylines,
+        focalStart: focalLoc - largeSize / 2,
+        firstFocalIndex,
+        lastFocalIndex,
+    };
+}
+/**
+ * Enumerates every shift step from "focal range at the start of the container" through to
+ * "focal range at the end", ordered by ascending `focalStart`.
+ *
+ * Each step moves exactly one keyline across the focal range, which is what guarantees every
+ * item passes through the focal range as the carousel scrolls. Smaller keylines migrate first,
+ * so items pile up smallest-outermost at whichever edge they are collecting against.
+ */
+function buildSteps(arrangement, alignment) {
+    const { smallCount, mediumCount } = arrangement;
+    const restingStep = alignment === 'center'
+        ? { smallBefore: Math.floor(smallCount / 2), mediumBefore: Math.floor(mediumCount / 2) }
+        : { smallBefore: 0, mediumBefore: 0 };
+    // Walk backwards from the resting step, retiring the smallest leading keyline each time.
+    const towardsStart = [restingStep];
+    let { smallBefore, mediumBefore } = restingStep;
+    while (smallBefore > 0 || mediumBefore > 0) {
+        if (smallBefore > 0) {
+            smallBefore--;
+        }
+        else {
+            mediumBefore--;
+        }
+        towardsStart.push({ smallBefore, mediumBefore });
+    }
+    // Walk forwards, promoting the smallest trailing keyline each time.
+    const towardsEnd = [restingStep];
+    ({ smallBefore, mediumBefore } = restingStep);
+    while (smallBefore + mediumBefore < smallCount + mediumCount) {
+        if (smallBefore < smallCount) {
+            smallBefore++;
+        }
+        else {
+            mediumBefore++;
+        }
+        towardsEnd.push({ smallBefore, mediumBefore });
+    }
+    const ordered = [...towardsStart.slice(1).reverse(), ...towardsEnd];
+    const anchorSize = arrangement.smallSize > 0
+        ? arrangement.smallSize
+        : arrangement.largeSize * ANCHOR_FALLBACK_RATIO;
+    return {
+        steps: ordered.map((step) => buildState(step, arrangement, anchorSize)),
+        defaultStep: towardsStart.length - 1,
+    };
+}
+/**
+ * Turns a solved arrangement into everything the component needs to place items.
+ */
+function buildGeometry(arrangement, alignment, itemCount, containerSize) {
+    const { steps, defaultStep } = buildSteps(arrangement, alignment);
+    const resting = steps[defaultStep];
+    const startShiftRange = resting.focalStart - steps[0].focalStart;
+    const endShiftRange = steps[steps.length - 1].focalStart - resting.focalStart;
+    // Each item owns exactly `largeSize` of scroll range, and the final `largeCount` items share
+    // the focal region, so they need no scroll range of their own.
+    const lastIndex = Math.max(0, itemCount - arrangement.largeCount);
+    const maxScroll = lastIndex * arrangement.largeSize;
+    return {
+        arrangement,
+        steps,
+        defaultStep,
+        itemSize: arrangement.largeSize,
+        startShiftRange,
+        endShiftRange,
+        maxScroll,
+        lastIndex,
+        scrollSize: maxScroll + containerSize,
+    };
+}
+/**
+ * Where the focal range sits for a given scroll offset.
+ *
+ * It rests at its default position through the middle of the list and slides towards whichever
+ * edge is being approached, so the first and last items can reach the focal range without
+ * detaching from the container edges.
+ */
+function focalStartFor(geometry, scrollOffset) {
+    const resting = geometry.steps[geometry.defaultStep].focalStart;
+    const first = geometry.steps[0].focalStart;
+    const last = geometry.steps[geometry.steps.length - 1].focalStart;
+    const startShift = Math.max(0, geometry.startShiftRange - scrollOffset);
+    const endShift = Math.max(0, scrollOffset - (geometry.maxScroll - geometry.endShiftRange));
+    return Math.min(Math.max(resting - startShift + endShift, first), last);
+}
+/**
+ * Interpolates the two shift steps bracketing `focalStart` into a single state.
+ *
+ * Every step holds the same number of keylines, so this is a straight index-by-index blend.
+ */
+function stateAt(geometry, focalStart) {
+    const { steps } = geometry;
+    let upper = 1;
+    while (upper < steps.length && steps[upper].focalStart < focalStart) {
+        upper++;
+    }
+    if (upper >= steps.length) {
+        return steps[steps.length - 1];
+    }
+    const from = steps[upper - 1];
+    const to = steps[upper];
+    const span = to.focalStart - from.focalStart;
+    if (span <= 0) {
+        return from;
+    }
+    const progress = Math.min(Math.max((focalStart - from.focalStart) / span, 0), 1);
+    return {
+        focalStart,
+        firstFocalIndex: progress < 0.5 ? from.firstFocalIndex : to.firstFocalIndex,
+        lastFocalIndex: progress < 0.5 ? from.lastFocalIndex : to.lastFocalIndex,
+        keylines: from.keylines.map((keyline, index) => {
+            const target = to.keylines[index];
+            return {
+                scrollLoc: lerp(keyline.scrollLoc, target.scrollLoc, progress),
+                screenLoc: lerp(keyline.screenLoc, target.screenLoc, progress),
+                maskedSize: lerp(keyline.maskedSize, target.maskedSize, progress),
+                isFocal: progress < 0.5 ? keyline.isFocal : target.isFocal,
+                isAnchor: keyline.isAnchor && target.isAnchor,
+            };
+        }),
+    };
+}
+/**
+ * Resolves the keyline arrangement in effect at a given scroll offset.
+ */
+function resolveState(geometry, scrollOffset) {
+    return stateAt(geometry, focalStartFor(geometry, scrollOffset));
+}
+/**
+ * Finds the keylines either side of a scroll-space position, and how far between them it sits.
+ */
+function keylineRange(keylines, scrollCenter) {
+    let upper = 1;
+    while (upper < keylines.length - 1 && keylines[upper].scrollLoc < scrollCenter) {
+        upper++;
+    }
+    const from = keylines[upper - 1];
+    const to = keylines[upper];
+    const span = to.scrollLoc - from.scrollLoc;
+    const progress = span <= 0 ? 0 : Math.min(Math.max((scrollCenter - from.scrollLoc) / span, 0), 1);
+    return [from, to, progress];
+}
+/**
+ * Classifies a rendered size against the arrangement's three sizes.
+ *
+ * Items resize continuously, so this snaps to whichever size the item currently reads as,
+ * flipping at the midpoint between one size and the next.
+ */
+function sizeBandFor(maskedSize, geometry) {
+    const { largeSize, mediumSize, smallSize } = geometry.arrangement;
+    if (maskedSize >= (largeSize + mediumSize) / 2) {
+        return 'large';
+    }
+    if (maskedSize >= (mediumSize + smallSize) / 2) {
+        return 'medium';
+    }
+    return 'small';
+}
+/**
+ * Places one item.
+ *
+ * The item's centre is a plain linear function of the scroll offset in scroll space; looking
+ * that position up against the current keylines is what converts it into a rendered size and
+ * an on-screen position.
+ */
+function resolveItemGeometry(geometry, state, index, scrollOffset) {
+    const { itemSize } = geometry;
+    const { keylines } = state;
+    const scrollCenter = index * itemSize + itemSize / 2 - scrollOffset + state.focalStart;
+    const first = keylines[0];
+    const last = keylines[keylines.length - 1];
+    if (scrollCenter < first.scrollLoc || scrollCenter > last.scrollLoc) {
+        return {
+            offset: 0,
+            maskedSize: 0,
+            size: 'small',
+            maskRatio: 1,
+            isFocal: false,
+            isVisible: false,
+        };
+    }
+    const [from, to, progress] = keylineRange(keylines, scrollCenter);
+    const maskedSize = lerp(from.maskedSize, to.maskedSize, progress);
+    const screenCenter = lerp(from.screenLoc, to.screenLoc, progress);
+    return {
+        offset: screenCenter - maskedSize / 2,
+        maskedSize,
+        size: sizeBandFor(maskedSize, geometry),
+        maskRatio: itemSize <= 0 ? 1 : Math.min(Math.max(1 - maskedSize / itemSize, 0), 1),
+        isFocal: (from.isFocal && progress < 0.5) || (to.isFocal && progress >= 0.5),
+        isVisible: maskedSize > 0.5,
+    };
+}
+/**
+ * Clamps an index to one the carousel can actually come to rest on.
+ */
+function clampIndex(geometry, index) {
+    return Math.min(Math.max(Math.round(index), 0), geometry.lastIndex);
+}
+/**
+ * Scroll offset at which `index` leads the focal range.
+ *
+ * The shifting focal range cancels out here, so this stays a simple multiple regardless of
+ * alignment or how close to either end of the list the item is.
+ */
+function scrollOffsetForIndex(geometry, index) {
+    return clampIndex(geometry, index) * geometry.itemSize;
+}
+/**
+ * The item leading the focal range at a given scroll offset.
+ */
+function indexForScrollOffset(geometry, scrollOffset) {
+    if (geometry.itemSize <= 0) {
+        return 0;
+    }
+    return clampIndex(geometry, scrollOffset / geometry.itemSize);
+}
+
+/**
+ * A single item within an `md3-carousel`.
+ *
+ * The item is a clipping box whose content stays at full size, so scrolling crops the item
+ * towards its centre rather than squashing it. Content should be full-bleed — an image or a
+ * background that reaches the edges — or the crop will reveal empty space.
+ *
+ * Position and size are written straight to CSS custom properties by the parent carousel, so
+ * styling never waits on change detection. The same values are mirrored onto signals and onto
+ * `md3-large` / `md3-medium` / `md3-small` classes, so content can react to the item's size
+ * either declaratively or from a stylesheet.
+ */
+class CarouselItem {
+    el;
+    /** 0 while the item is fully unmasked, approaching 1 as it crops away. */
+    maskRatio = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maskRatio" }] : /* istanbul ignore next */ []));
+    /** Current rendered size of the item, in pixels. */
+    maskedSize = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maskedSize" }] : /* istanbul ignore next */ []));
+    /** True while the item rests in the carousel's focal range. */
+    isFocal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFocal" }] : /* istanbul ignore next */ []));
+    /**
+     * Which of the arrangement's three sizes the item currently reads as.
+     *
+     * Mirrored onto the element as `md3-large`, `md3-medium` or `md3-small`.
+     */
+    size = signal('large', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    constructor(el) {
+        this.el = el;
+        effect((onCleanup) => {
+            const size = 'md3-' + this.size();
+            this.element.classList.add(size);
+            onCleanup(() => {
+                this.element.classList.remove(size);
+            });
+        });
+    }
+    get element() {
+        return this.el.nativeElement;
+    }
+    /**
+     * Applies a resolved placement.
+     *
+     * Called from the carousel's scroll handler on every frame, so this writes to the DOM
+     * directly and only touches signals when a value actually changes.
+     */
+    applyGeometry(geometry, itemSize) {
+        const style = this.element.style;
+        if (!geometry.isVisible) {
+            this.element.setAttribute('hidden', '');
+            return;
+        }
+        this.element.removeAttribute('hidden');
+        style.setProperty('--md3-carousel-item-size', `${geometry.maskedSize}px`);
+        style.setProperty('--md3-carousel-item-full-size', `${itemSize}px`);
+        style.setProperty('--md3-carousel-item-offset', `${geometry.offset}px`);
+        style.setProperty('--md3-carousel-item-mask-ratio', `${geometry.maskRatio}`);
+        if (this.maskedSize() !== geometry.maskedSize) {
+            this.maskedSize.set(geometry.maskedSize);
+        }
+        if (this.maskRatio() !== geometry.maskRatio) {
+            this.maskRatio.set(geometry.maskRatio);
+        }
+        if (this.size() !== geometry.size) {
+            this.size.set(geometry.size);
+        }
+        if (this.isFocal() !== geometry.isFocal) {
+            this.isFocal.set(geometry.isFocal);
+            this.element.classList.toggle('md3-focal', geometry.isFocal);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselItem, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: CarouselItem, isStandalone: true, selector: "md3-carousel-item", host: { attributes: { "role": "group", "aria-roledescription": "slide" } }, ngImport: i0, template: "<div class=\"md3-carousel-item-content\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{--md3-carousel-item-size: 0px;--md3-carousel-item-full-size: 0px;--md3-carousel-item-offset: 0px;--md3-carousel-item-mask-ratio: 0;--background-color: rgb(var(--md-scheme-surface-container-high));--border-radius: var(--md-border-radius-xlarge);--md3-carousel-item-gap: var(--md3-carousel-gap, 0px);--md3-carousel-item-visible-size: max( 0px, calc(var(--md3-carousel-item-size) - var(--md3-carousel-item-gap)) );--md3-carousel-item-visible-full-size: max( 0px, calc(var(--md3-carousel-item-full-size) - var(--md3-carousel-item-gap)) );position:absolute;inset-block:0;inset-inline-start:calc(var(--md3-carousel-item-offset) + var(--md3-carousel-item-gap) / 2);inline-size:var(--md3-carousel-item-visible-size);overflow:hidden;border-radius:var(--border-radius);background-color:var(--background-color);contain:paint}:host([hidden]){display:none}.md3-carousel-item-content{position:absolute;inset-block:0;inset-inline-start:50%;inline-size:var(--md3-carousel-item-visible-full-size);margin-inline-start:calc(var(--md3-carousel-item-visible-full-size) / -2)}:host ::ng-deep .md3-carousel-item-content>img,:host ::ng-deep .md3-carousel-item-content>video,:host ::ng-deep .md3-carousel-item-content>picture{display:block;inline-size:100%;block-size:100%;object-fit:cover}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-carousel-item', host: {
+                        'role': 'group',
+                        'aria-roledescription': 'slide',
+                    }, template: "<div class=\"md3-carousel-item-content\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{--md3-carousel-item-size: 0px;--md3-carousel-item-full-size: 0px;--md3-carousel-item-offset: 0px;--md3-carousel-item-mask-ratio: 0;--background-color: rgb(var(--md-scheme-surface-container-high));--border-radius: var(--md-border-radius-xlarge);--md3-carousel-item-gap: var(--md3-carousel-gap, 0px);--md3-carousel-item-visible-size: max( 0px, calc(var(--md3-carousel-item-size) - var(--md3-carousel-item-gap)) );--md3-carousel-item-visible-full-size: max( 0px, calc(var(--md3-carousel-item-full-size) - var(--md3-carousel-item-gap)) );position:absolute;inset-block:0;inset-inline-start:calc(var(--md3-carousel-item-offset) + var(--md3-carousel-item-gap) / 2);inline-size:var(--md3-carousel-item-visible-size);overflow:hidden;border-radius:var(--border-radius);background-color:var(--background-color);contain:paint}:host([hidden]){display:none}.md3-carousel-item-content{position:absolute;inset-block:0;inset-inline-start:50%;inline-size:var(--md3-carousel-item-visible-full-size);margin-inline-start:calc(var(--md3-carousel-item-visible-full-size) / -2)}:host ::ng-deep .md3-carousel-item-content>img,:host ::ng-deep .md3-carousel-item-content>video,:host ::ng-deep .md3-carousel-item-content>picture{display:block;inline-size:100%;block-size:100%;object-fit:cover}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+/** Grace period after a programmatic scroll before the index is synced back from the DOM. */
+const SCROLL_END_FALLBACK = 120;
+/**
+ * A Material Design 3 carousel.
+ *
+ * Items are laid out against a set of keylines — large, medium, small and an off-screen anchor —
+ * and adopt the size of whichever keyline they are passing through, so they grow into the focal
+ * range and crop away as they leave it.
+ *
+ * Scrolling is native, which keeps momentum, touch, snapping and the scrollbar intact. Only the
+ * visual sizing is derived in TypeScript, and it is written straight to CSS custom properties so
+ * scrolling never triggers change detection.
+ *
+ * All size inputs are in pixels.
+ *
+ * ```html
+ * <md3-carousel [(index)]="selected" [item-size]="200">
+ *   @for (photo of photos(); track photo.id) {
+ *     <md3-carousel-item>
+ *       <img [src]="photo.url" [alt]="photo.alt" />
+ *     </md3-carousel-item>
+ *   }
+ * </md3-carousel>
+ * ```
+ */
+class Carousel {
+    el;
+    /** Arrangement strategy. Additional Material Design layouts will widen this type. */
+    carouselLayout = input('multi-browse', { ...(ngDevMode ? { debugName: "carouselLayout" } : /* istanbul ignore next */ {}), alias: 'carousel-layout' });
+    /** Where the focal (large) items sit within the container. */
+    alignment = input('start', { ...(ngDevMode ? { debugName: "alignment" } : /* istanbul ignore next */ {}), alias: 'alignment' });
+    /** Scroll axis. Only `horizontal` is implemented today. */
+    orientation = input('horizontal', { ...(ngDevMode ? { debugName: "orientation" } : /* istanbul ignore next */ {}), alias: 'orientation' });
+    /** Preferred size of a fully unmasked item, in pixels. */
+    itemSize = input(200, { ...(ngDevMode ? { debugName: "itemSize" } : /* istanbul ignore next */ {}), alias: 'item-size',
+        transform: numberAttribute });
+    /** Smallest a small item may shrink to, in pixels. */
+    smallItemSizeMin = input(40, { ...(ngDevMode ? { debugName: "smallItemSizeMin" } : /* istanbul ignore next */ {}), alias: 'small-item-size-min',
+        transform: numberAttribute });
+    /** Largest a small item may grow to, in pixels. */
+    smallItemSizeMax = input(56, { ...(ngDevMode ? { debugName: "smallItemSizeMax" } : /* istanbul ignore next */ {}), alias: 'small-item-size-max',
+        transform: numberAttribute });
+    /** Space between items, in pixels. */
+    gap = input(8, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), alias: 'gap',
+        transform: numberAttribute });
+    /**
+     * Index of the item leading the focal range. Two-way bindable.
+     *
+     * Clamped to {@link lastIndex}: the final items share the focal range and are all visible at
+     * once, so there is no scroll position where any of them leads on its own. Setting a higher
+     * value scrolls to the end and reads back as `lastIndex`.
+     */
+    index = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    /** Items projected into the carousel, in document order. */
+    items = contentChildren(CarouselItem, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
+    /**
+     * Whether the current layout brings items to rest on keylines.
+     *
+     * Decided by the layout, not by the consumer: an arrangement that resizes items only reads
+     * correctly when they are sitting on keylines.
+     */
+    snap = computed(() => CAROUSEL_STRATEGIES[this.carouselLayout()].snap, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snap" }] : /* istanbul ignore next */ []));
+    scroller = viewChild.required('scroller', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
+    containerSize = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerSize" }] : /* istanbul ignore next */ []));
+    directionality = inject(Directionality, { optional: true });
+    /**
+     * Sizes handed to the solver.
+     *
+     * Gaps are folded into item sizes so the solver only has one quantity to balance, then
+     * removed again visually by insetting each item half a gap on both sides.
+     */
+    metrics = computed(() => {
+        const gap = this.gap();
+        return {
+            gap,
+            itemSize: this.itemSize() + gap,
+            smallSizeMin: this.smallItemSizeMin() + gap,
+            smallSizeMax: this.smallItemSizeMax() + gap,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
+    /** The solved distribution of large, medium and small items for the current container. */
+    arrangement = computed(() => {
+        const containerSize = this.containerSize();
+        const itemCount = this.items().length;
+        const { itemSize, smallSizeMin, smallSizeMax } = this.metrics();
+        if (containerSize <= 0 || itemCount === 0 || itemSize <= 0) {
+            return undefined;
+        }
+        return CAROUSEL_STRATEGIES[this.carouselLayout()].arrange({
+            containerSize,
+            itemSize,
+            smallSizeMin,
+            smallSizeMax,
+            itemCount,
+            alignment: this.alignment(),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrangement" }] : /* istanbul ignore next */ []));
+    /** Keyline geometry derived from the arrangement. */
+    geometry = computed(() => {
+        const arrangement = this.arrangement();
+        if (!arrangement) {
+            return undefined;
+        }
+        return buildGeometry(arrangement, this.alignment(), this.items().length, this.containerSize());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "geometry" }] : /* istanbul ignore next */ []));
+    /** Scroll offsets that items snap to, one per item. */
+    snapPoints = computed(() => {
+        const geometry = this.geometry();
+        if (!geometry) {
+            return [];
+        }
+        return this.items().map((_, index) => scrollOffsetForIndex(geometry, index));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapPoints" }] : /* istanbul ignore next */ []));
+    /**
+     * Highest index the carousel can rest on.
+     *
+     * Lower than the last item's index, because the trailing items share the focal range once
+     * the carousel is scrolled to the end. It moves as the container is resized, since a wider
+     * container fits more items in the focal range.
+     */
+    lastIndex = computed(() => this.geometry()?.lastIndex ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastIndex" }] : /* istanbul ignore next */ []));
+    atStart = computed(() => this.index() <= 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atStart" }] : /* istanbul ignore next */ []));
+    /** True when the carousel cannot scroll any further towards the end. */
+    atEnd = computed(() => this.index() >= this.lastIndex(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atEnd" }] : /* istanbul ignore next */ []));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    scrollEndTimer;
+    frame = 0;
+    /**
+     * Target of an in-flight programmatic scroll.
+     *
+     * Smooth scrolling reports intermediate offsets, and reading the index back from those would
+     * fight the animation, so index syncing pauses until the target is reached or the user takes
+     * over.
+     */
+    pendingScroll;
+    constructor(el) {
+        this.el = el;
+        // ResizeObserver alone would leave the carousel unmeasured until its first callback, so
+        // take an initial measurement as soon as the view exists.
+        afterNextRender(() => this.measure());
+        effect((onCleanup) => {
+            if (!this.isBrowser) {
+                return;
+            }
+            const observer = new ResizeObserver(() => this.measure());
+            observer.observe(this.element);
+            onCleanup(() => observer.disconnect());
+        });
+        effect((onCleanup) => {
+            if (!this.isBrowser) {
+                return;
+            }
+            const scroller = this.scroller().nativeElement;
+            const onScroll = () => this.scheduleGeometry();
+            const onScrollEnd = () => this.syncIndexFromScroll();
+            const onInteract = () => {
+                this.pendingScroll = undefined;
+            };
+            scroller.addEventListener('scroll', onScroll, { passive: true });
+            scroller.addEventListener('scrollend', onScrollEnd);
+            scroller.addEventListener('pointerdown', onInteract, { passive: true });
+            scroller.addEventListener('wheel', onInteract, { passive: true });
+            scroller.addEventListener('touchstart', onInteract, { passive: true });
+            onCleanup(() => {
+                clearTimeout(this.scrollEndTimer);
+                cancelAnimationFrame(this.frame);
+                scroller.removeEventListener('scroll', onScroll);
+                scroller.removeEventListener('scrollend', onScrollEnd);
+                scroller.removeEventListener('pointerdown', onInteract);
+                scroller.removeEventListener('wheel', onInteract);
+                scroller.removeEventListener('touchstart', onInteract);
+            });
+        });
+        // Re-place every item whenever the arrangement or the item list changes. Reading the
+        // signals here is what registers the dependency.
+        effect(() => {
+            this.geometry();
+            this.items();
+            this.applyGeometry();
+        });
+        // Follow the index when it is set from outside, but not while the user is scrolling —
+        // `syncIndexFromScroll` only writes a value the DOM already agrees with.
+        effect(() => {
+            const index = this.index();
+            const geometry = this.geometry();
+            if (!geometry || !this.isBrowser) {
+                return;
+            }
+            // A resize changes how many items share the focal range, so an index that was
+            // reachable before may no longer be.
+            const clamped = clampIndex(geometry, index);
+            if (clamped !== index) {
+                this.index.set(clamped);
+                return;
+            }
+            const target = scrollOffsetForIndex(geometry, clamped);
+            if (Math.abs(this.scrollOffset() - target) > 1) {
+                this.scrollTo(target, 'smooth');
+            }
+        });
+    }
+    get element() {
+        return this.el.nativeElement;
+    }
+    /** True when laid out right-to-left. */
+    get isRtl() {
+        return this.directionality?.value === 'rtl'
+            || getComputedStyle(this.element).direction === 'rtl';
+    }
+    onKeydown(event) {
+        // Arrow keys are direction-agnostic here: ArrowRight always moves towards the visual
+        // right, which under RTL is the previous item.
+        const forward = this.isRtl ? 'ArrowLeft' : 'ArrowRight';
+        const backward = this.isRtl ? 'ArrowRight' : 'ArrowLeft';
+        switch (event.key) {
+            case forward:
+                this.next();
+                break;
+            case backward:
+                this.previous();
+                break;
+            case 'Home':
+                this.scrollToIndex(0);
+                break;
+            case 'End':
+                this.scrollToIndex(this.lastIndex());
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * Keeps a focused item in view.
+     *
+     * Items are absolutely positioned, so the browser cannot scroll them into view on its own.
+     * Without this, tabbing to a link inside a cropped item would leave it invisible.
+     */
+    onFocusIn(event) {
+        const target = event.target;
+        if (!(target instanceof Node)) {
+            return;
+        }
+        const index = this.items().findIndex((item) => item.element.contains(target));
+        if (index >= 0 && index !== this.index()) {
+            this.scrollToIndex(index);
+        }
+    }
+    /** Scrolls until `index` leads the focal range, clamping to {@link lastIndex}. */
+    scrollToIndex(index, behavior = 'smooth') {
+        const geometry = this.geometry();
+        if (!geometry) {
+            return;
+        }
+        const clamped = clampIndex(geometry, index);
+        this.index.set(clamped);
+        this.scrollTo(scrollOffsetForIndex(geometry, clamped), behavior);
+    }
+    next() {
+        this.scrollToIndex(this.index() + 1);
+    }
+    previous() {
+        this.scrollToIndex(this.index() - 1);
+    }
+    measure() {
+        if (!this.isBrowser) {
+            return;
+        }
+        this.containerSize.set(this.scroller().nativeElement.clientWidth);
+    }
+    /**
+     * Current scroll position as a positive offset from the logical start edge.
+     *
+     * Right-to-left scroll containers report `scrollLeft` as zero at the start and negative
+     * moving away from it, so the magnitude is the logical offset in both directions.
+     */
+    scrollOffset() {
+        return Math.abs(this.scroller().nativeElement.scrollLeft);
+    }
+    scrollTo(offset, behavior) {
+        if (!this.isBrowser) {
+            return;
+        }
+        const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+        this.pendingScroll = offset;
+        this.scroller().nativeElement.scrollTo({
+            left: this.isRtl ? -offset : offset,
+            behavior: reduceMotion ? 'auto' : behavior,
+        });
+        this.scheduleIndexSync();
+    }
+    scheduleGeometry() {
+        if (this.frame) {
+            return;
+        }
+        this.frame = requestAnimationFrame(() => {
+            this.frame = 0;
+            this.applyGeometry();
+        });
+        this.scheduleIndexSync();
+    }
+    /** `scrollend` is not universally supported, so back it with a timer. */
+    scheduleIndexSync() {
+        clearTimeout(this.scrollEndTimer);
+        this.scrollEndTimer = setTimeout(() => this.syncIndexFromScroll(), SCROLL_END_FALLBACK);
+    }
+    syncIndexFromScroll() {
+        const geometry = this.geometry();
+        if (!geometry || !this.isBrowser) {
+            return;
+        }
+        const offset = this.scrollOffset();
+        // Wait for a programmatic scroll to land rather than reading the index off an
+        // intermediate frame of the animation.
+        if (this.pendingScroll !== undefined) {
+            if (Math.abs(offset - this.pendingScroll) > 1) {
+                return;
+            }
+            this.pendingScroll = undefined;
+        }
+        // Once the final items share the focal range they also share a scroll offset, so an
+        // index that already resolves to this offset is left alone.
+        if (Math.abs(scrollOffsetForIndex(geometry, this.index()) - offset) <= 1) {
+            return;
+        }
+        const index = indexForScrollOffset(geometry, offset);
+        if (index !== this.index()) {
+            this.index.set(index);
+        }
+    }
+    /**
+     * Writes the current placement of every item.
+     *
+     * Runs on every scroll frame, so it touches the DOM directly and allocates nothing beyond
+     * the resolved state.
+     */
+    applyGeometry() {
+        const geometry = this.geometry();
+        const items = this.items();
+        if (!geometry) {
+            return;
+        }
+        const style = this.element.style;
+        style.setProperty('--md3-carousel-scroll-size', `${geometry.scrollSize}px`);
+        style.setProperty('--md3-carousel-viewport-size', `${this.containerSize()}px`);
+        style.setProperty('--md3-carousel-gap', `${this.metrics().gap}px`);
+        const scrollOffset = this.scrollOffset();
+        const state = resolveState(geometry, scrollOffset);
+        const itemCount = items.length;
+        items.forEach((item, index) => {
+            item.applyGeometry(resolveItemGeometry(geometry, state, index, scrollOffset), geometry.itemSize);
+            const label = `${index + 1} of ${itemCount}`;
+            if (item.element.getAttribute('aria-label') !== label) {
+                item.element.setAttribute('aria-label', label);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Carousel, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Carousel, isStandalone: true, selector: "md3-carousel", inputs: { carouselLayout: { classPropertyName: "carouselLayout", publicName: "carousel-layout", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "item-size", isSignal: true, isRequired: false, transformFunction: null }, smallItemSizeMin: { classPropertyName: "smallItemSizeMin", publicName: "small-item-size-min", isSignal: true, isRequired: false, transformFunction: null }, smallItemSizeMax: { classPropertyName: "smallItemSizeMax", publicName: "small-item-size-max", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "role": "group", "aria-roledescription": "carousel" }, listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusIn($event)" } }, queries: [{ propertyName: "items", predicate: CarouselItem, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #scroller class=\"md3-carousel-scroller\" tabindex=\"0\" [class.md3-snap]=\"snap()\">\n    <div class=\"md3-carousel-content\">\n        <div class=\"md3-carousel-viewport\">\n            <ng-content></ng-content>\n        </div>\n\n        @for (point of snapPoints(); track $index) {\n            <div class=\"md3-carousel-snap\" aria-hidden=\"true\" [style.inset-inline-start.px]=\"point\"></div>\n        }\n    </div>\n</div>\n", styles: [":host{--md3-carousel-height: 14em;--md3-carousel-scroll-size: 100%;--md3-carousel-viewport-size: 100%;--md3-carousel-gap: 0px;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: .125em;font-size:1rem;display:block;inline-size:100%;block-size:var(--md3-carousel-height)}.md3-carousel-scroller{block-size:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;outline:none}.md3-carousel-scroller::-webkit-scrollbar{display:none}.md3-carousel-scroller:focus-visible{outline:var(--outline-width) solid var(--outline-color);outline-offset:var(--outline-offset);border-radius:var(--md-border-radius-xlarge)}.md3-carousel-scroller.md3-snap{scroll-snap-type:x mandatory}.md3-carousel-content{position:relative;inline-size:var(--md3-carousel-scroll-size);block-size:100%}.md3-carousel-viewport{position:sticky;inset-inline-start:0;inset-block-start:0;inline-size:var(--md3-carousel-viewport-size);block-size:100%}.md3-carousel-snap{position:absolute;inset-block-start:0;inline-size:1px;block-size:1px;scroll-snap-align:start;pointer-events:none;visibility:hidden}@media(prefers-reduced-motion:reduce){.md3-carousel-scroller{scroll-behavior:auto}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Carousel, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-carousel', host: {
+                        'role': 'group',
+                        'aria-roledescription': 'carousel',
+                    }, template: "<div #scroller class=\"md3-carousel-scroller\" tabindex=\"0\" [class.md3-snap]=\"snap()\">\n    <div class=\"md3-carousel-content\">\n        <div class=\"md3-carousel-viewport\">\n            <ng-content></ng-content>\n        </div>\n\n        @for (point of snapPoints(); track $index) {\n            <div class=\"md3-carousel-snap\" aria-hidden=\"true\" [style.inset-inline-start.px]=\"point\"></div>\n        }\n    </div>\n</div>\n", styles: [":host{--md3-carousel-height: 14em;--md3-carousel-scroll-size: 100%;--md3-carousel-viewport-size: 100%;--md3-carousel-gap: 0px;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: .125em;font-size:1rem;display:block;inline-size:100%;block-size:var(--md3-carousel-height)}.md3-carousel-scroller{block-size:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;outline:none}.md3-carousel-scroller::-webkit-scrollbar{display:none}.md3-carousel-scroller:focus-visible{outline:var(--outline-width) solid var(--outline-color);outline-offset:var(--outline-offset);border-radius:var(--md-border-radius-xlarge)}.md3-carousel-scroller.md3-snap{scroll-snap-type:x mandatory}.md3-carousel-content{position:relative;inline-size:var(--md3-carousel-scroll-size);block-size:100%}.md3-carousel-viewport{position:sticky;inset-inline-start:0;inset-block-start:0;inline-size:var(--md3-carousel-viewport-size);block-size:100%}.md3-carousel-snap{position:absolute;inset-block-start:0;inline-size:1px;block-size:1px;scroll-snap-align:start;pointer-events:none;visibility:hidden}@media(prefers-reduced-motion:reduce){.md3-carousel-scroller{scroll-behavior:auto}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { carouselLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "carousel-layout", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "item-size", required: false }] }], smallItemSizeMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "small-item-size-min", required: false }] }], smallItemSizeMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "small-item-size-max", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselItem), { ...{ descendants: true }, isSignal: true }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }] } });
+
 class ChipAvatar {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ChipAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: ChipAvatar, isStandalone: true, selector: "[md3-chip-avatar]", ngImport: i0 });
@@ -3115,6 +4057,7 @@ class DialogRef {
     isFullScreen;
     closed = new Subject();
     closing = new Subject();
+    hiddenChanges = new Subject();
     closePromise = null;
     closeStarted = false;
     closeSettled = false;
@@ -3134,7 +4077,7 @@ class DialogRef {
     get isClosing() {
         return this.closeStarted;
     }
-    /** Whether the dialog is currently hidden behind another dialog. */
+    /** Whether the dialog is currently hidden, on request or behind another dialog. */
     get isHidden() {
         return this.hidden;
     }
@@ -3163,6 +4106,7 @@ class DialogRef {
     /**
      * Hides the dialog with the closing animation while keeping it alive, so
      * its content, form state and subscriptions survive until show() is called.
+     * The page underneath becomes usable again while the dialog waits behind it.
      * The promise resolves once the dialog is out of sight.
      */
     hide() {
@@ -3172,6 +4116,7 @@ class DialogRef {
         this.hidden = true;
         this.toggleHiddenState(true);
         this.dialogInstance?.setActive(false);
+        this.hiddenChanges.next(true);
         return this.waitForSurfaceAnimation();
     }
     /**
@@ -3187,6 +4132,7 @@ class DialogRef {
             this.hidden = false;
             this.toggleHiddenState(false);
             this.dialogInstance?.setActive(true);
+            this.hiddenChanges.next(false);
         }
         this.dialogInstance?.recaptureFocus();
     }
@@ -3194,6 +4140,10 @@ class DialogRef {
     beforeClosed() {
         return this.closing.asObservable();
     }
+    /** Emits the new value of `isHidden` every time the dialog is hidden or shown. */
+    hiddenChanged() {
+        return this.hiddenChanges.asObservable();
+    }
     afterClosed() {
         return this.closed.asObservable();
     }
@@ -3204,7 +4154,9 @@ class DialogRef {
             this.cdkRef.containerInstance._closeInteractionType = 'mouse';
             this.close();
         });
-        this.cdkRef.keydownEvents.pipe(filter((event) => event.key === 'Escape' && !hasModifierKey(event)), take(1)).subscribe((event) => {
+        // A hidden dialog is not the one the Escape key is meant for, even
+        // though the overlay it sits in is still the one receiving the event.
+        this.cdkRef.keydownEvents.pipe(filter((event) => !this.hidden && event.key === 'Escape' && !hasModifierKey(event)), take(1)).subscribe((event) => {
             event.preventDefault();
             this.cdkRef.containerInstance._closeInteractionType = 'keyboard';
             this.close();
@@ -3276,6 +4228,7 @@ class DialogRef {
         // waiting on beforeClosed() is still notified.
         this.startClosing();
         this.closeSettled = true;
+        this.hiddenChanges.complete();
         this.closed.next(result);
         this.closed.complete();
     }
@@ -3312,13 +4265,13 @@ class Dialog extends CdkDialogContainer {
         this._recaptureFocus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Dialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Dialog, isStandalone: true, selector: "md3-dialog", viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    #surface\n    class=\"md3-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .md3-dialog-scrim{position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);opacity:.32}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-opening{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-closing{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-hidden{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-kept{opacity:.32;transition:none}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-instant{transition:none}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 1.5rem;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel{position:absolute;pointer-events:auto;max-width:35em}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-closing,::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-hidden{pointer-events:none}:host{display:block;max-width:100%;min-width:17.5em;outline:0}:host .md3-dialog-container{display:block;width:100%;max-height:inherit;overflow:auto;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-high));border-radius:var(--md-border-radius-xlarge);box-shadow:var(--md-shadow-6dp);transform-origin:center;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8);margin-top:-8rem}:host .md3-dialog-container.md3-active{opacity:1;transform:scaleY(1);margin-top:0}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Dialog, isStandalone: true, selector: "md3-dialog", viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    #surface\n    class=\"md3-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .md3-dialog-scrim{position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);opacity:.32}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-opening{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-closing{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-hidden{opacity:0;pointer-events:none}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-kept{opacity:.32;transition:none}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-instant{transition:none}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 1.5rem;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel{position:absolute;pointer-events:auto;max-width:35em}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-closing,::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-hidden{pointer-events:none}:host{display:block;max-width:100%;min-width:17.5em;outline:0}:host .md3-dialog-container{display:block;width:100%;max-height:inherit;overflow:auto;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-high));border-radius:var(--md-border-radius-xlarge);box-shadow:var(--md-shadow-6dp);transform-origin:center;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8);margin-top:-8rem}:host .md3-dialog-container.md3-active{opacity:1;transform:scaleY(1);margin-top:0}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Dialog, decorators: [{
             type: Component,
             args: [{ selector: 'md3-dialog', imports: [
                         CdkPortalOutlet,
-                    ], template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    #surface\n    class=\"md3-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .md3-dialog-scrim{position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);opacity:.32}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-opening{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-closing{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-hidden{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-kept{opacity:.32;transition:none}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-instant{transition:none}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 1.5rem;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel{position:absolute;pointer-events:auto;max-width:35em}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-closing,::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-hidden{pointer-events:none}:host{display:block;max-width:100%;min-width:17.5em;outline:0}:host .md3-dialog-container{display:block;width:100%;max-height:inherit;overflow:auto;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-high));border-radius:var(--md-border-radius-xlarge);box-shadow:var(--md-shadow-6dp);transform-origin:center;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8);margin-top:-8rem}:host .md3-dialog-container.md3-active{opacity:1;transform:scaleY(1);margin-top:0}\n"] }]
+                    ], template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    #surface\n    class=\"md3-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .md3-dialog-scrim{position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);opacity:.32}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-opening{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-closing{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-hidden{opacity:0;pointer-events:none}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-kept{opacity:.32;transition:none}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-instant{transition:none}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 1.5rem;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel{position:absolute;pointer-events:auto;max-width:35em}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-closing,::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-hidden{pointer-events:none}:host{display:block;max-width:100%;min-width:17.5em;outline:0}:host .md3-dialog-container{display:block;width:100%;max-height:inherit;overflow:auto;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-high));border-radius:var(--md-border-radius-xlarge);box-shadow:var(--md-shadow-6dp);transform-origin:center;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8);margin-top:-8rem}:host .md3-dialog-container.md3-active{opacity:1;transform:scaleY(1);margin-top:0}\n"] }]
         }], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }] } });
 
 /**
@@ -3397,10 +4350,16 @@ const DIALOG_HANDOVER_DELAY_MS = 160;
 class DialogService {
     cdkDialog = inject(Dialog$1);
     overlay = inject(Overlay);
+    overlayContainer = inject(OverlayContainer);
     injector = inject(Injector);
     document = inject(DOCUMENT);
     /** Open dialogs, from the first one opened to the one currently on top. */
     refs = [];
+    /**
+     * Elements the page was made of that the CDK hid from assistive technology,
+     * kept here while the dialogs are hidden and the page is given back.
+     */
+    pageAriaHidden = new Map();
     /**
      * Page scrolling is blocked here instead of per overlay, so stacked dialogs
      * cannot unblock the page while another dialog is still open.
@@ -3408,9 +4367,14 @@ class DialogService {
     scrollBlock = this.overlay.scrollStrategies.block();
     /** Element that was focused before the first dialog of the stack opened. */
     rootTrigger = null;
+    pageStateQueued = false;
     get openDialogs() {
         return this.refs;
     }
+    /** Open dialogs that are currently on screen, from the bottom one up. */
+    get visibleDialogs() {
+        return this.refs.filter((ref) => !ref.isHidden);
+    }
     /** The full screen dialog that is open, if there is one. */
     get fullScreenDialog() {
         return this.refs.find((ref) => ref.isFullScreen && !ref.isClosing);
@@ -3546,7 +4510,7 @@ class DialogService {
             this.bindDataToInputs(cdkRef.componentRef, dialogConfig);
         }
         this.refs.push(dialogRef);
-        this.updateScrollBlock();
+        this.syncPageState();
         if (previousRef) {
             setTimeout(() => this.startReplacingAnimation(dialogRef, previousRef), DIALOG_HANDOVER_DELAY_MS);
         }
@@ -3557,6 +4521,41 @@ class DialogService {
         // already coming back while this one is fading out.
         dialogRef.beforeClosed().subscribe(() => this.restorePreviousDialog(dialogRef));
         dialogRef.afterClosed().subscribe(() => this.removeRef(dialogRef));
+        // Hiding and showing can also come straight from the reference, so the
+        // page state is driven by what the dialogs report rather than by the
+        // calls that went through this service.
+        dialogRef.hiddenChanged().subscribe(() => this.syncPageState());
+    }
+    /**
+     * Hides every dialog that is on screen, the full screen one included, with
+     * the closing animation. They stay alive with their content and state, the
+     * page underneath becomes usable, and showAll() puts them back. The promise
+     * resolves once they are all out of sight.
+     */
+    hideAll() {
+        const visible = this.refs.filter((ref) => !ref.isHidden && !ref.isClosing);
+        return Promise.all(visible.map((ref) => ref.hide())).then(() => undefined);
+    }
+    /**
+     * Brings the dialogs back on screen, whether they were hidden one by one or
+     * all at once: the dialog that was on top returns, along with the full
+     * screen dialog it sits in. Dialogs hidden behind another dialog stay
+     * hidden, since that is where they belong once the stack is back.
+     */
+    showAll() {
+        const topRef = this.topRef();
+        if (!topRef) {
+            return;
+        }
+        const fullScreenRef = this.fullScreenDialog;
+        // The full screen dialog is the context the top one sits in, so it
+        // comes back first and the dialog on top ends up on top, with the focus.
+        if (fullScreenRef && fullScreenRef !== topRef && fullScreenRef.isHidden) {
+            fullScreenRef.show();
+        }
+        if (topRef.isHidden) {
+            topRef.show();
+        }
     }
     /** Closes every open dialog, including the hidden and the full screen ones. */
     closeAll() {
@@ -3719,15 +4718,82 @@ class DialogService {
         if (this.refs.length === 0) {
             this.rootTrigger = null;
         }
-        this.updateScrollBlock();
+        this.syncPageState();
     }
-    updateScrollBlock() {
-        if (this.refs.length > 0) {
+    /**
+     * State that belongs to the dialogs as a whole rather than to one of them:
+     * page scrolling, the page being hidden from assistive technology, and
+     * where focus sits. Applied in a task of its own, so a dialog handing the
+     * screen over to another one does not give the page back and take it again
+     * within the same frame.
+     */
+    syncPageState() {
+        if (this.pageStateQueued) {
+            return;
+        }
+        this.pageStateQueued = true;
+        setTimeout(() => {
+            this.pageStateQueued = false;
+            this.applyPageState();
+        });
+    }
+    applyPageState() {
+        const hasVisibleDialog = this.refs.some((ref) => !ref.isHidden);
+        if (hasVisibleDialog) {
             this.scrollBlock.enable();
         }
         else {
             this.scrollBlock.disable();
         }
+        if (this.refs.length === 0) {
+            // Nothing is open anymore: the CDK gives the page back to assistive
+            // technology on its own, so there is nothing left to restore here.
+            this.pageAriaHidden.clear();
+            return;
+        }
+        if (hasVisibleDialog) {
+            this.hidePageFromAssistiveTechnology();
+            return;
+        }
+        this.exposePageToAssistiveTechnology();
+        this.releaseFocus();
+    }
+    /**
+     * Gives the page back to assistive technology while every dialog is hidden.
+     * The CDK hides it for as long as a dialog is open, which would otherwise
+     * leave nothing to read at all once the dialogs are out of sight.
+     */
+    exposePageToAssistiveTechnology() {
+        if (this.pageAriaHidden.size > 0) {
+            return;
+        }
+        const container = this.overlayContainer.getContainerElement();
+        Array.from(container.parentElement?.children ?? []).forEach((sibling) => {
+            const value = sibling.getAttribute('aria-hidden');
+            if (sibling === container || value === null) {
+                return;
+            }
+            this.pageAriaHidden.set(sibling, value);
+            sibling.removeAttribute('aria-hidden');
+        });
+    }
+    /** Hides the page again as soon as a dialog is back on screen. */
+    hidePageFromAssistiveTechnology() {
+        this.pageAriaHidden.forEach((value, element) => {
+            element.setAttribute('aria-hidden', value);
+        });
+        this.pageAriaHidden.clear();
+    }
+    /**
+     * Focus follows the dialogs off the screen: it goes back to whatever opened
+     * the stack, so the page stays usable with the keyboard while the dialogs
+     * wait behind it. Focus that already moved somewhere else is left alone.
+     */
+    releaseFocus() {
+        const activeElement = this.document.activeElement;
+        if (this.rootTrigger && (!activeElement || activeElement === this.document.body)) {
+            this.rootTrigger.focus();
+        }
     }
     getFocusedElement() {
         const activeElement = this.document.activeElement;
@@ -4835,5 +5901,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppBar, AppBarLogo, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, FullScreenDialog, FullScreenDialogHeader, Grid, GridItem, IconButton, IconElement, InputElement, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StateComponent, SupportingText, Switch, TextField, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle };
+export { AppBar, AppBarLogo, Avatar, Badge, Button, ButtonGroup, CAROUSEL_STRATEGIES, Card, Carousel, CarouselItem, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, FullScreenDialog, FullScreenDialogHeader, Grid, GridItem, IconButton, IconElement, InputElement, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StateComponent, SupportingText, Switch, TextField, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
 //# sourceMappingURL=almoamendev-ngx-md3.mjs.map