@almoamendev/ngx-md3 0.5.5 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almoamendev/ngx-md3",
-  "version": "0.5.5",
+  "version": "0.7.0",
   "description": "MD3-style Angular components & style library",
   "author": "Murtadha (Hussain) Almoamen",
   "license": "MIT",

package/src/lib/styles/md3.scss

@@ -510,6 +510,14 @@ md3-badge {
         height: 100%;
         overflow-x: hidden;
         overflow-y: auto;
+
+        // A floating toolbar in a scaffold bar covers content that it does not reserve. The
+        // scaffold publishes how much, and the fallback is 0, so a layout without one is
+        // unchanged. Set these to 0 on a page that needs full-bleed content.
+        padding-block-start: var(--md-scaffold-floating-inset-block-start, 0em);
+        padding-block-end: var(--md-scaffold-floating-inset-block-end, 0em);
+        scroll-padding-block-start: var(--md-scaffold-floating-inset-block-start, 0em);
+        scroll-padding-block-end: var(--md-scaffold-floating-inset-block-end, 0em);
     }
 }
 

package/types/almoamendev-ngx-md3.d.ts

@@ -53,6 +53,62 @@ type ListLeadingSize = 'image' | 'small-video' | 'large-video';
  */
 type CarouselLayout = 'multi-browse';
 
+/**
+ * The toolbar container style.
+ *
+ * `floating` draws a rounded, elevated container with an outside margin. In a scaffold bar
+ * region it leaves the layout flow, so the content passes behind it. In a scaffold rail
+ * region it stays in the flow and reserves its own space.
+ *
+ * `docked` fills its region, has square corners and no elevation. The Material 3
+ * specification allows it in a bar region only, because it spans the full window width.
+ */
+type ToolbarType = 'floating' | 'docked';
+
+/**
+ * The toolbar color configuration.
+ *
+ * `standard` uses a surface container. `vibrant` uses a primary container, and remaps the
+ * colors of the buttons inside it, as the Material 3 specification describes.
+ */
+type ToolbarColor = 'standard' | 'vibrant';
+
+/**
+ * The axis the toolbar items follow.
+ *
+ * The value is optional on the component. When it is not set, a toolbar in a scaffold rail
+ * region becomes `vertical`, and every other toolbar becomes `horizontal`.
+ */
+type ToolbarOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Where the toolbar sits along its main axis.
+ *
+ * A docked toolbar fills its region, so the value moves the item row inside the container. A
+ * floating toolbar is as wide as its content, so the value moves the container itself, and the
+ * FAB with it, inside the region.
+ */
+type ToolbarAlignment = 'start' | 'center' | 'end';
+
+/**
+ * What the toolbar does when the scaffold main pane scrolls down.
+ *
+ * `none` does nothing. `hide` moves the toolbar out of the region. `collapse` hides every
+ * item that does not carry the `md3-toolbar-persistent` attribute, and keeps the FAB.
+ *
+ * A vertical toolbar ignores this input.
+ */
+type ToolbarScrollAction = 'none' | 'hide' | 'collapse';
+
+/**
+ * The scaffold region a toolbar sits in, named by its logical side.
+ *
+ * `blockStart` and `blockEnd` are the top and bottom scaffold bars. `inlineStart` and
+ * `inlineEnd` are the leading and trailing scaffold rails. The names are logical, so they
+ * follow the document direction.
+ */
+type ToolbarRegion = 'blockStart' | 'blockEnd' | 'inlineStart' | 'inlineEnd';
+
 /**
  * Where the focal (large) items sit within the carousel container.
  */
@@ -569,26 +625,107 @@ type ViewportWidth = 'compact' | 'medium' | 'expanded' | 'large' | 'extra-large'
 type ViewportHeight = 'compact' | 'medium' | 'expanded';
 
 type Md3NavigationMode = 'none' | 'navigation-bar' | 'navigation-rail' | 'standard-drawer' | 'modal-drawer';
-declare class LayoutService {
+/**
+ * The state of the window and of the document, for the whole application.
+ *
+ * This service is a singleton on purpose. A layout region can appear more than once — a page
+ * scaffold, and a contained layout inside a full screen dialog — and each one keeps its own
+ * scroll and inset state in its own {@link LayoutService}. The window size, the breakpoints,
+ * the reading direction and the color scheme belong to the document, so they live here and
+ * every layout reads the same values.
+ */
+declare class ViewportService {
     private readonly document;
     private readonly breakpointObserver;
-    private readonly router;
     private readonly widthQueries;
     private readonly heightQueries;
+    readonly viewport: _angular_core.Signal<{
+        width: number;
+        height: number;
+    } | {
+        readonly width: number;
+        readonly height: number;
+    }>;
+    readonly widthClass: _angular_core.Signal<ViewportWidth>;
+    readonly heightClass: _angular_core.Signal<ViewportHeight>;
+    readonly direction: _angular_core.WritableSignal<"ltr" | "rtl">;
+    readonly isCompact: _angular_core.Signal<boolean>;
+    readonly isMedium: _angular_core.Signal<boolean>;
+    readonly isExpanded: _angular_core.Signal<boolean>;
+    readonly isLarge: _angular_core.Signal<boolean>;
+    readonly isExtraLarge: _angular_core.Signal<boolean>;
+    readonly isPortrait: _angular_core.Signal<boolean>;
+    readonly isLandscape: _angular_core.Signal<boolean>;
+    readonly preferredNavigationMode: _angular_core.Signal<"navigation-bar" | "navigation-rail" | "standard-drawer">;
+    darkMode: _angular_core.WritableSignal<boolean>;
+    constructor();
+    setDirection(direction: 'ltr' | 'rtl'): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewportService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewportService>;
+}
+
+type FloatingBarSide = 'blockStart' | 'blockEnd';
+interface FloatingInset {
+    blockStart: number;
+    blockEnd: number;
+}
+
+/**
+ * The state of one layout container: what its main pane scrolls, and what its floating bars
+ * cover.
+ *
+ * The service is provided at the root, and the page scaffold uses that root instance. A
+ * contained layout — `md3-layout`, the one a full screen dialog holds — provides its own
+ * instance instead, so a toolbar inside it reads the scroll and the insets of that layout and
+ * never of the page behind it.
+ *
+ * The window size, the breakpoints, the reading direction and the color scheme belong to the
+ * document, not to a container. They live in {@link ViewportService}, and every instance of
+ * this service exposes the same signals, so an instance stays a complete view of the layout.
+ */
+declare class LayoutService {
+    private readonly viewportService;
+    private readonly router;
     private mainPaneSub?;
     private mainPaneEl?;
     private panesContainerResizeObserver?;
     private panesContainerResizeListener?;
+    /** Floating bars currently registered, keyed by the measured element. */
+    private readonly floatingBars;
+    /** How far the main pane must move before the scroll direction flips. Stops jitter. */
+    private static readonly scrollDirectionThreshold;
+    private scrollPosition;
     readonly mainScrollTop: _angular_core.WritableSignal<number>;
     readonly mainIsScrolled: _angular_core.Signal<boolean>;
     /**
-     * Distance, in pixels, between the viewport bottom and the bottom edge of
-     * the scaffold's .md3-panes-container — i.e. whatever the bottom scaffold
-     * bar (nav bar) currently reserves, or 0 when there is none. Overlay-based
-     * components anchored to the viewport bottom (like Snackbar) read this so
-     * they never render lower than the panes container.
+     * True while the main pane moves down, false while it moves up. A small threshold keeps
+     * a jitter from flipping the value. Components that react to scrolling — the app bar and
+     * the toolbar — read this, so they can never disagree.
+     */
+    readonly isScrollingDown: _angular_core.WritableSignal<boolean>;
+    /**
+     * Distance, in pixels, between the bottom of the container and the bottom edge of
+     * the .md3-panes-container — i.e. whatever the bottom bar currently reserves, or 0 when
+     * there is none. Overlay-based components anchored to the bottom (like Snackbar) read
+     * this so they never render lower than the panes container.
      */
     readonly bottomInset: _angular_core.WritableSignal<number>;
+    /**
+     * Space a floating bar covers but does not reserve, per logical block side.
+     *
+     * A floating toolbar in a bar region leaves the layout flow, so its grid track collapses
+     * and the content flows under it. This signal reports what it covers, so the layout can
+     * pad the main pane and overlays can stay clear of it.
+     *
+     * A floating toolbar in a *rail* region stays in the flow and reserves its own space, so
+     * it never appears here.
+     */
+    readonly floatingInset: _angular_core.WritableSignal<FloatingInset>;
+    /**
+     * The distance from the bottom that an anchored overlay must keep clear. It covers both
+     * the reserved bottom bar and any floating bottom bar over it.
+     */
+    readonly bottomSafeInset: _angular_core.Signal<number>;
     readonly viewport: _angular_core.Signal<{
         width: number;
         height: number;
@@ -613,7 +750,24 @@ declare class LayoutService {
     private scrollMainPaneToTop;
     registerMainPane(element: HTMLElement): void;
     unregisterMainPane(element: HTMLElement): void;
+    private resetScrollDirection;
+    private updateScrollDirection;
     registerPanesContainer(element: HTMLElement): void;
+    /**
+     * Register a floating bar so the layout and the overlays know what it covers.
+     *
+     * Call this for a floating toolbar in a *bar* region only. A rail region keeps the toolbar
+     * in the layout flow, so it reserves its space and needs no inset.
+     */
+    registerFloatingBar(element: HTMLElement, side: FloatingBarSide): void;
+    unregisterFloatingBar(element: HTMLElement): void;
+    private measureFloatingBars;
+    /**
+     * `offsetHeight` ignores transforms. So a toolbar that scrolling has hidden or collapsed
+     * still reports its expanded size, and the content padding never moves while the user
+     * scrolls.
+     */
+    private measureBlockSize;
     unregisterPanesContainer(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<LayoutService>;
@@ -627,12 +781,43 @@ declare class Scaffold implements AfterViewInit, OnDestroy {
     private sheets;
     private bottomSheets;
     private layout;
+    private el;
+    constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Scaffold, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Scaffold, "md3-scaffold", never, {}, {}, never, ["[md3-scaffold-bar=top]", "[md3-scaffold-rail=leading]", "[md3-scaffold-pane=start]", "[md3-scaffold-pane=main]", "[md3-scaffold-pane=end]", "[md3-scaffold-rail=trailing]", "[md3-scaffold-bar=bottom]"], true, never>;
 }
 
+/**
+ * A layout region shell that fills its parent instead of the window.
+ *
+ * It places the same regions as `md3-scaffold` — the bar rows, the rail columns and the three
+ * panes — so the same region attributes work inside it:
+ *
+ * ```html
+ * <md3-layout>
+ *     <md3-toolbar md3-scaffold-bar="bottom" toolbar-type="floating">...</md3-toolbar>
+ *
+ *     <div md3-scaffold-pane="main">...</div>
+ * </md3-layout>
+ * ```
+ *
+ * Use it wherever a page-sized scaffold does not fit: the content of a full screen dialog, a
+ * card, a preview pane. A full screen dialog is the common one, because a toolbar needs a bar
+ * or a rail region and the dialog shell has none of its own.
+ *
+ * The layout provides its own {@link LayoutService}, so everything inside it reads the scroll
+ * position and the floating insets of *this* container. A floating toolbar therefore pads the
+ * main pane of the layout, and `scroll-action` follows the pane of the layout — never the page
+ * behind it. The window size, the breakpoints, the reading direction and the color scheme stay
+ * shared with the rest of the application.
+ */
+declare class Layout extends Scaffold {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Layout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Layout, "md3-layout", never, {}, {}, never, ["[md3-scaffold-bar=top]", "[md3-scaffold-rail=leading]", "[md3-scaffold-pane=start]", "[md3-scaffold-pane=main]", "[md3-scaffold-pane=end]", "[md3-scaffold-rail=trailing]", "[md3-scaffold-bar=bottom]"], true, never>;
+}
+
 declare class ScaffoldBar {
     region: _angular_core.InputSignal<"top" | "bottom">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScaffoldBar, never>;
@@ -1343,6 +1528,16 @@ type AppBarScrollingStyle = 'none' | 'transparent' | 'elevate';
 declare class AppBar implements ButtonContext {
     private el;
     private layoutService;
+    private readonly inDialog;
+    /**
+     * The landmark role of the bar.
+     *
+     * A page has one banner, and the app bar of the page is it. A bar inside a dialog is not
+     * the banner of the document — a banner nested in a dialog misleads a screen reader — so a
+     * bar that finds itself in one carries no role. Set this input to force either value.
+     */
+    barRole: _angular_core.InputSignal<"none" | "banner" | null>;
+    protected readonly resolvedRole: Signal<string | null>;
     title: _angular_core.InputSignal<string | null>;
     subtitle: _angular_core.InputSignal<string | null>;
     appBarType: _angular_core.InputSignal<AppBarType>;
@@ -1354,8 +1549,7 @@ declare class AppBar implements ButtonContext {
     hasLogo: Signal<boolean>;
     hasAvatar: Signal<boolean>;
     mainIsScrolled: Signal<boolean>;
-    isScrollingDown: _angular_core.WritableSignal<boolean>;
-    private scrollPosition;
+    isScrollingDown: Signal<boolean>;
     private bottomExpandedHeight;
     private bottomCollapse;
     buttonContextSize: Signal<ButtonSize>;
@@ -1363,11 +1557,10 @@ declare class AppBar implements ButtonContext {
     get element(): HTMLElement;
     private getBottomOpacity;
     private isBottomCollapsed;
-    private updateScrollDirection;
     private hasCollapsibleBottom;
     private getHostFontSize;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppBar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppBar, "md3-app-bar", never, { "title": { "alias": "bar-title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "bar-subtitle"; "required": false; "isSignal": true; }; "appBarType": { "alias": "bar-type"; "required": false; "isSignal": true; }; "appBarScrollingStyle": { "alias": "scroll-style"; "required": false; "isSignal": true; }; "autoHide": { "alias": "auto-hide"; "required": false; "isSignal": true; }; "centerAligned": { "alias": "center-aligned"; "required": false; "isSignal": true; }; }, {}, ["logo", "avatar"], ["[md3-app-bar-leading]", "[md3-search-leading]", "[md3-input-element]", "[md3-search-trailing]", "[md3-app-bar-logo]", "[md3-app-bar-trailing]", "[md3-avatar]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppBar, "md3-app-bar", never, { "barRole": { "alias": "bar-role"; "required": false; "isSignal": true; }; "title": { "alias": "bar-title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "bar-subtitle"; "required": false; "isSignal": true; }; "appBarType": { "alias": "bar-type"; "required": false; "isSignal": true; }; "appBarScrollingStyle": { "alias": "scroll-style"; "required": false; "isSignal": true; }; "autoHide": { "alias": "auto-hide"; "required": false; "isSignal": true; }; "centerAligned": { "alias": "center-aligned"; "required": false; "isSignal": true; }; }, {}, ["logo", "avatar"], ["[md3-app-bar-leading]", "[md3-search-leading]", "[md3-input-element]", "[md3-search-trailing]", "[md3-app-bar-logo]", "[md3-app-bar-trailing]", "[md3-avatar]"], true, never>;
 }
 
 declare class AppBarLogo {
@@ -1375,6 +1568,119 @@ declare class AppBarLogo {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AppBarLogo, "[md3-app-bar-logo]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * Material 3 toolbar.
+ *
+ * The toolbar holds the actions of the current page. Put it in a scaffold region, and the
+ * region decides where it goes:
+ *
+ * ```html
+ * <md3-toolbar md3-scaffold-bar="bottom" toolbar-type="floating" scroll-action="collapse">
+ *     <md3-toolbar-item><button md3-icon-button>...</button></md3-toolbar-item>
+ *     <md3-toolbar-item md3-toolbar-persistent><button md3-icon-button>...</button></md3-toolbar-item>
+ *     <button md3-fab>...</button>
+ * </md3-toolbar>
+ * ```
+ *
+ * Every action goes inside an `md3-toolbar-item`. The toolbar projects that element only. A FAB is
+ * the one exception: it sits beside the container, and a floating toolbar takes it.
+ *
+ * A **floating** toolbar in a *bar* region leaves the layout flow, so the content passes
+ * behind it. The scaffold pads the main pane by the height it covers. In a *rail* region it
+ * stays in the flow and reserves its own space, so no padding is necessary.
+ *
+ * A **docked** toolbar fills its region. The specification allows it in a bar region only.
+ *
+ * Group actions with `md3-button-group`. The toolbar has one slots region, and it keeps the
+ * authored order. The space between the items follows the free space of the container, between
+ * `--md-toolbar-gap-min` and `--md-toolbar-gap-max`.
+ */
+declare class Toolbar implements ButtonContext, OnDestroy {
+    private readonly el;
+    private readonly layout;
+    private readonly scaffoldBar;
+    private readonly scaffoldRail;
+    toolbarType: _angular_core.InputSignal<ToolbarType>;
+    toolbarColor: _angular_core.InputSignal<ToolbarColor>;
+    /**
+     * Leave this unset to follow the region. A rail region gives `vertical`, and every other
+     * placement gives `horizontal`. Read `effectiveOrientation` for the resolved value.
+     */
+    orientation: _angular_core.InputSignal<ToolbarOrientation | null>;
+    alignment: _angular_core.InputSignal<ToolbarAlignment>;
+    scrollAction: _angular_core.InputSignal<ToolbarScrollAction>;
+    fabPosition: _angular_core.InputSignal<"start" | "end">;
+    /** The collapse state. Scrolling writes to it, and you can read or set it yourself. */
+    expanded: _angular_core.ModelSignal<boolean>;
+    private readonly layoutElement;
+    private readonly containerElement;
+    private readonly slotsElement;
+    private readonly fab;
+    /** Set from the DOM, because `md3-toolbar-persistent` is a plain attribute, not a directive. */
+    private readonly hasPersistentItem;
+    private readonly hasFocusWithin;
+    private persistentObserver?;
+    private readonly isBrowser;
+    /** The last published free space, to keep an unchanged measurement from writing to the DOM. */
+    private lastGap;
+    readonly isFloating: Signal<boolean>;
+    readonly effectiveOrientation: Signal<ToolbarOrientation>;
+    /** The logical side of the scaffold region, or null outside a scaffold. */
+    readonly region: Signal<ToolbarRegion | null>;
+    protected readonly isBarRegion: Signal<boolean>;
+    protected readonly isRailRegion: Signal<boolean>;
+    /** A floating toolbar inside a scaffold region needs the region to stop clipping it. */
+    protected readonly isFloatingRegion: Signal<boolean>;
+    /** Only a floating bar covers content it does not reserve. Everything else reserves its space. */
+    private readonly coversContent;
+    /** Something must survive a collapse, or a collapse is just a hide. */
+    private readonly canCollapse;
+    /** With a FAB and no marked item, a collapse takes the container away and the FAB stays alone. */
+    protected readonly collapsesToFab: Signal<boolean>;
+    /** A vertical toolbar never reacts to scrolling, and a docked one never collapses. */
+    readonly resolvedScrollAction: Signal<ToolbarScrollAction>;
+    readonly isHidden: _angular_core.WritableSignal<boolean>;
+    readonly isCollapsed: Signal<boolean>;
+    /**
+     * The collapsed state in which the FAB stays alone.
+     *
+     * This is the state, not the capability. A FAB by itself must never take the container
+     * away, because a toolbar that does not collapse keeps its items at all times.
+     */
+    protected readonly isCollapsedToFab: Signal<boolean>;
+    buttonContextSize: Signal<ButtonSize>;
+    constructor();
+    ngOnDestroy(): void;
+    get element(): HTMLElement;
+    protected onFocusIn(): void;
+    protected onFocusOut(event: FocusEvent): void;
+    private updateScrollState;
+    /**
+     * Divide the free space of the container between the gaps.
+     *
+     * The measurement starts from the host, because the host holds the space the region gives
+     * the toolbar. A floating container is only as wide as its content, so reading the container
+     * itself would feed the gap back into the measurement and the value would never settle.
+     */
+    private measureGap;
+    private publishGap;
+    private extent;
+    private contentExtent;
+    private paddingExtent;
+    /** What the other children of the layout take, the flex gap that separates them included. */
+    private siblingExtent;
+    private watchPersistentItems;
+    private checkConfiguration;
+    private warn;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Toolbar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Toolbar, "md3-toolbar", never, { "toolbarType": { "alias": "toolbar-type"; "required": false; "isSignal": true; }; "toolbarColor": { "alias": "toolbar-color"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "scrollAction": { "alias": "scroll-action"; "required": false; "isSignal": true; }; "fabPosition": { "alias": "fab-position"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, ["fab"], ["[md3-fab]", "md3-toolbar-item"], true, never>;
+}
+
+declare class ToolbarItem {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToolbarItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ToolbarItem, "md3-toolbar-item", never, {}, {}, never, never, true, never>;
+}
+
 declare class NavigationItem {
     private readonly el;
     private routerLinkActive;
@@ -1680,21 +1986,35 @@ declare class DialogActions {
 }
 
 /**
- * Material 3 full screen dialog shell. It covers the viewport and lays its
- * content out like the scaffold does, with a main pane and a side sheet outlet
- * on each side, so side sheets opened while it is up land inside the dialog
- * instead of behind it.
+ * Material 3 full screen dialog shell. It covers the viewport and holds the content.
+ *
+ * The content is an `md3-layout`. The layout places the regions — the bar rows for an app bar
+ * or a toolbar, the rail columns, and the panes where side sheets open — so the dialog itself
+ * places nothing but the content. A content root that is not a layout gets a warning in
+ * development mode, and the shell falls back to panes of its own, so a side sheet never opens
+ * behind the dialog where nobody can see it.
  */
 declare class FullScreenDialog extends CdkDialogContainer implements DialogContainer, AfterViewInit {
     private readonly surface;
+    private readonly mainPane;
     private readonly startOutlet;
     private readonly endOutlet;
     private readonly sheets;
+    /** True while the shell holds the side sheet outlets, which happens without a layout only. */
+    private ownsSideSheetOutlets;
     isActive: _angular_core.WritableSignal<boolean>;
     protected readonly config: DialogConfig<unknown>;
     get surfaceElement(): HTMLElement | null;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /**
+     * The layout at the root of the content, if the content brought one.
+     *
+     * The root is either the layout itself, or the component that holds it — a dialog is
+     * normally opened with a component whose own template starts with `md3-layout`.
+     */
+    private findContentLayout;
+    private checkContentLayout;
     startEnterAnimation(): void;
     setActive(value: boolean): void;
     recaptureFocus(): void;
@@ -1702,18 +2022,6 @@ declare class FullScreenDialog extends CdkDialogContainer implements DialogConta
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FullScreenDialog, "md3-fullscreen-dialog", never, {}, {}, never, never, true, never>;
 }
 
-/**
- * Header of a full screen dialog: a leading icon button to leave the dialog,
- * the headline, and a trailing action. It sticks to the top of the dialog while
- * the content scrolls underneath.
- */
-declare class FullScreenDialogHeader implements ButtonContext {
-    buttonContextSize: Signal<ButtonSize>;
-    buttonContextWidth: Signal<IconButtonWidth>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FullScreenDialogHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FullScreenDialogHeader, "md3-fullscreen-dialog-header", never, {}, {}, never, ["[md3-icon-button][md3-header-leading]", "*", "[md3-header-trailing]"], true, never>;
-}
-
 declare class Menu implements AfterContentInit {
     private el;
     private readonly portalOutlet;
@@ -2148,5 +2456,5 @@ declare class SnackbarService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<SnackbarService>;
 }
 
-export { AppBar, AppBarLogo, Avatar, BOTTOM_SHEET_COMPONENT, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, Badge, BottomSheetRef, BottomSheetService, 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, ModalBottomSheetRef, 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, StandardBottomSheetRef, StateComponent, SupportingText, Switch, TextField, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
-export type { AppBarScrollingStyle, AppBarType, BottomSheetConfig, BottomSheetContainer, BottomSheetState, BottomSheetSurfaceHost, BottomSheetType, ButtonGroupSelection, ButtonGroupType, ButtonSize, ButtonType, CardType, CarouselAlignment, CarouselArrangement, CarouselGeometry, CarouselItemGeometry, CarouselItemSize, CarouselKeyline, CarouselKeylineState, CarouselLayout, CarouselOrientation, CarouselStrategy, CarouselStrategyContext, ChipStyle, ChipType, DialogConfig, DialogContainer, DialogRole, FabSize, FabType, FullScreenDialogConfig, IconButtonType, IconButtonWidth, ListLeadingSize, ListLeadingType, Md3NavigationMode, MenuConfig, MenuPositionOrigin, MenuPositionX, MenuPositionY, MenuScrollStrategy, PreviousDialog, SideSheetConfig, SideSheetContainer, SideSheetSide, SideSheetType, SliderSize, SnackbarConfig, SnackbarDismiss, SnackbarDismissReason, SnackbarPoliteness, SplitButtonType, StandardBottomSheetHost, TextColor, TextSize };
+export { AppBar, AppBarLogo, Avatar, BOTTOM_SHEET_COMPONENT, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, Badge, BottomSheetRef, BottomSheetService, 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, Grid, GridItem, IconButton, IconElement, InputElement, Layout, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, ModalBottomSheetRef, 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, StandardBottomSheetRef, StateComponent, SupportingText, Switch, TextField, Toolbar, ToolbarItem, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, ViewportService, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
+export type { AppBarScrollingStyle, AppBarType, BottomSheetConfig, BottomSheetContainer, BottomSheetState, BottomSheetSurfaceHost, BottomSheetType, ButtonGroupSelection, ButtonGroupType, ButtonSize, ButtonType, CardType, CarouselAlignment, CarouselArrangement, CarouselGeometry, CarouselItemGeometry, CarouselItemSize, CarouselKeyline, CarouselKeylineState, CarouselLayout, CarouselOrientation, CarouselStrategy, CarouselStrategyContext, ChipStyle, ChipType, DialogConfig, DialogContainer, DialogRole, FabSize, FabType, FloatingBarSide, FloatingInset, FullScreenDialogConfig, IconButtonType, IconButtonWidth, ListLeadingSize, ListLeadingType, Md3NavigationMode, MenuConfig, MenuPositionOrigin, MenuPositionX, MenuPositionY, MenuScrollStrategy, PreviousDialog, SideSheetConfig, SideSheetContainer, SideSheetSide, SideSheetType, SliderSize, SnackbarConfig, SnackbarDismiss, SnackbarDismissReason, SnackbarPoliteness, SplitButtonType, StandardBottomSheetHost, TextColor, TextSize, ToolbarAlignment, ToolbarColor, ToolbarOrientation, ToolbarRegion, ToolbarScrollAction, ToolbarType };