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

package/fesm2022/slotted-angular-page-header.mjs

@@ -0,0 +1,788 @@
+import { pageHeaderMessages } from '@slotted/core/i18n';
+import { createControllable } from '@slotted/core/state';
+import { createStickyHeader } from '@slotted/core/sticky-header';
+import { SlContainer } from '@slotted/angular/container';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlPage } from '@slotted/angular/page';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, model, input, booleanAttribute, output, ElementRef, computed, signal, DestroyRef, untracked, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, HostAttributeToken } from '@angular/core';
+import { SlSkeletonText } from '@slotted/angular/skeleton';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { injectProgressIndicatorDefaults, SlProgressBar } from '@slotted/angular/progress-indicator';
+
+const FALLBACK = {
+    collapse: 'scroll',
+    level: '1',
+    size: 'md',
+    variant: 'band',
+};
+const PAGE_HEADER_DEFAULTS = new InjectionToken('slotted page-header defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once how its page headers behave — the size, the
+ * rank, whether a scroll collapses the area — rather than repeating them on
+ * every screen. A header that states any of them itself still wins. Its words
+ * come from the language in force (`provideSlotted`).
+ */
+function providePageHeaderDefaults(defaults) {
+    return {
+        provide: PAGE_HEADER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a page header renders as here, before it states anything of its own. */
+function injectPageHeaderDefaults() {
+    return inject(PAGE_HEADER_DEFAULTS);
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason `field`
+ * records: a module-level counter produces colliding sequences when two
+ * applications render in one server process, and the server and the client
+ * sequences must match for hydration.
+ */
+class SlPageHeaderIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-page-header-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * The shell of a screen's top: a title area that never leaves, a header area
+ * that scrolls away under it and comes back, a pill of controls on the
+ * chrome's edge, and a slot for tabs. SAP Fiori's Dynamic Page, rebuilt on one
+ * sticky root.
+ *
+ * **The stylesheet does the moving.** The root is `position: sticky` with a
+ * negative offset the size of the header area, measured into
+ * `--slotted-page-header-collapse` by `@slotted/core/sticky-header`, which
+ * the React binding drives the same way. Scrolling takes the area under the
+ * title and leaves the title where it is.
+ *
+ * **Two values a template may bind.** `expanded` moves by the toggle, by the
+ * pin, by the application and by the scroll; `pinned` by the pin and the
+ * application. Each move is first a request on `expandedRequest` or
+ * `pinnedRequest`, carrying the reason — `scroll` is a reason of its own — and
+ * `cancel()`.
+ */
+class SlPageHeader {
+    /** Whether the header area is open. Two-way, so a template may bind it directly. */
+    expanded = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** Whether the pin holds the area open. Two-way. */
+    pinned = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinned" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    level = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    collapse = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapse" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the title has not arrived yet. The heading, the subheading and the
+     * description render `slSkeletonText` in place of their words; the actions
+     * stay operable; the root carries `aria-busy`.
+     */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * toggle, the pin and the header area's name. A static `aria-label` on a
+     * part still wins.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** One output for one transition of the header area, carrying the reason and the event. */
+    expandedRequest = output();
+    /** One output for one transition of the pin, carrying the reason and the event. */
+    pinnedRequest = output();
+    defaults = injectPageHeaderDefaults();
+    page = inject(SlPage, { optional: true });
+    native = inject(ElementRef).nativeElement;
+    generated = inject(SlPageHeaderIdFactory).next();
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedLevel = computed(() => this.level() ?? this.defaults.level, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLevel" }] : /* istanbul ignore next */ []));
+    resolvedCollapse = computed(() => this.collapse() ?? this.defaults.collapse, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCollapse" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this header's `messages` laid over them. */
+    t = injectMessages(pageHeaderMessages, this.messages);
+    containerSize = computed(() => this.page?.resolvedWidth() ?? 'content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerSize" }] : /* istanbul ignore next */ []));
+    containerInset = computed(() => this.page?.resolvedInset(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerInset" }] : /* istanbul ignore next */ []));
+    /** Whether the scroll has passed the area — a measured fact. */
+    scrolled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrolled" }] : /* istanbul ignore next */ []));
+    /** The header is too much of the screen to hold; the pin is hidden and a held header let go. */
+    tall = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tall" }] : /* istanbul ignore next */ []));
+    /** The header is narrower than the compact size class; it is in the flow and nothing condenses it. */
+    compact = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    /** Whether the area is shown whole in place although the scroll has passed it. */
+    revealed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
+    /** Whether content passes under the chrome — a measured fact `plain` and `floating` read. */
+    stuck = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stuck" }] : /* istanbul ignore next */ []));
+    engine = null;
+    /** Who asked for the move the next change detection will show. */
+    expandedBy = 'programmatic';
+    /** The identifiers that wire the toggle to the area and the root to its heading. */
+    ids() {
+        return { areaId: `${this.generated}-area`, headingId: `${this.generated}-heading` };
+    }
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        /* The engine is told once a value has actually changed, whoever changed it. */
+        let seenExpanded = untracked(() => this.expanded());
+        effect(() => {
+            const expanded = this.expanded();
+            if (expanded === seenExpanded)
+                return;
+            seenExpanded = expanded;
+            this.engine?.expandedChanged(expanded, this.expandedBy);
+            this.expandedBy = 'programmatic';
+        });
+        let seenPinned = untracked(() => this.pinned());
+        effect(() => {
+            const pinned = this.pinned();
+            if (pinned === seenPinned)
+                return;
+            seenPinned = pinned;
+            this.engine?.pinnedChanged(pinned);
+        });
+        afterNextRender(() => {
+            const part = (name) => this.native.querySelector(`:scope > * > [data-part="${name}"]`);
+            const attach = () => {
+                this.engine?.destroy();
+                this.engine = createStickyHeader({
+                    root: this.native,
+                    area: () => part('header-area'),
+                    chrome: () => [part('title-area'), part('controls'), part('tabs')].filter((element) => element !== null),
+                    state: () => ({
+                        expanded: this.expanded(),
+                        pinned: this.pinned(),
+                        collapse: this.resolvedCollapse(),
+                    }),
+                    onScrolled: (next) => this.scrolled.set(next),
+                    onRevealed: (next) => this.revealed.set(next),
+                    onStuck: (next) => this.stuck.set(next),
+                    onScrollRequest: (next) => this.request(next, 'scroll', undefined, 'scroll'),
+                    onTall: (next) => this.tall.set(next),
+                    onCompact: (next) => this.compact.set(next),
+                    onPinRequest: (next) => this.requestPinned(next, 'programmatic'),
+                    contained: () => this.filledBody(),
+                });
+            };
+            attach();
+            destroyRef.onDestroy(() => this.engine?.destroy());
+        });
+        /* The axis rebuilds the engine, because it decides which observers exist. */
+        effect(() => {
+            this.resolvedCollapse();
+            untracked(() => this.engine?.refresh());
+        });
+    }
+    /**
+     * The body of the page this header heads, while that page fills: nothing
+     * scrolls outside it there, so its principal scroller is what snaps the area.
+     * Read from the DOM on every scroll, so a page that turns `fill` on or off
+     * is followed without rebuilding the engine.
+     */
+    filledBody() {
+        const page = this.native.closest('[data-ui="page"]');
+        if (page === null || !page.hasAttribute('data-fill'))
+            return null;
+        return page.querySelector(':scope > [data-part="scroll"] > [data-part="body"]');
+    }
+    request(next, reason, source, by) {
+        if (next === this.expanded())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.expanded(),
+            onRequest: (request) => {
+                this.expandedRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (cancelled || !moved)
+            return;
+        this.expandedBy = by;
+        this.expanded.set(next);
+    }
+    requestPinned(next, reason, source) {
+        if (next === this.pinned())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.pinned(),
+            onRequest: (request) => {
+                this.pinnedRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (cancelled || !moved)
+            return;
+        this.pinned.set(next);
+        /* A pinned header is by definition an open one. */
+        if (next && !this.expanded())
+            this.request(true, 'programmatic', source, 'pin');
+    }
+    /** Asks the header area to open or close, carrying the reason and the originating event. */
+    setExpanded(next, reason, source) {
+        /* Collapsing by the toggle while pinned lets the pin go first. */
+        if (!next && this.pinned())
+            this.requestPinned(false, 'programmatic', source);
+        this.request(next, reason, source, reason === 'programmatic' ? 'programmatic' : 'control');
+    }
+    /** Asks the pin to take hold or let go, carrying the reason and the originating event. */
+    setPinned(next, reason, source) {
+        this.requestPinned(next, reason, source);
+    }
+    /** Opens the header area, carrying `programmatic`. Scrolled past, it reveals it in place. */
+    expand() {
+        this.request(true, 'programmatic', undefined, 'programmatic');
+    }
+    /** Closes the header area, carrying `programmatic`. */
+    collapseArea() {
+        if (this.pinned())
+            this.requestPinned(false, 'programmatic');
+        this.request(false, 'programmatic', undefined, 'programmatic');
+    }
+    /** Takes hold, carrying `programmatic`; a collapsed area opens with it. */
+    pin() {
+        this.requestPinned(true, 'programmatic');
+    }
+    /** Lets go, carrying `programmatic`. */
+    unpin() {
+        this.requestPinned(false, 'programmatic');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlPageHeader, isStandalone: true, selector: "[slPageHeader]", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, collapse: { classPropertyName: "collapse", publicName: "collapse", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", pinned: "pinnedChange", expandedRequest: "expandedRequest", pinnedRequest: "pinnedRequest" }, host: { attributes: { "data-ui": "page-header", "data-part": "root" }, properties: { "attr.data-variant": "resolvedVariant()", "attr.data-size": "resolvedSize()", "attr.data-level": "resolvedLevel()", "attr.data-collapse": "resolvedCollapse()", "attr.data-expanded": "expanded() ? '' : null", "attr.data-revealed": "revealed() ? '' : null", "attr.data-scrolled": "scrolled() ? '' : null", "attr.data-tall": "tall() ? '' : null", "attr.data-compact": "compact() ? '' : null", "attr.data-stuck": "stuck() ? '' : null", "attr.data-loading": "loading() ? '' : null", "attr.aria-busy": "loading() ? 'true' : null" } }, exportAs: ["slPageHeader"], ngImport: i0, template: `<div slContainer [size]="containerSize()" [inset]="containerInset()">
+    <ng-content />
+  </div>`, isInline: true, styles: ["@layer slotted.components{[data-ui=page-header]{--_surface: var(--slotted-page-header-background, var(--slotted-surface, Canvas));--_ground: var(--_surface);--_sticky-inset: 0px;--_rule: var(--slotted-page-header-border, var(--slotted-border-subtle, ButtonBorder));--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_gap: var(--slotted-page-header-gap, var(--slotted-space-4, .5rem));--_padding-block: var(--slotted-page-header-padding-block, var(--slotted-space-5, .75rem));--_heading-size: var( --slotted-page-header-heading-size-md, var(--slotted-font-size-2xl, 1.25rem) );--_heading-line-height: var(--slotted-line-height-2xl, 1.4);--_snapped-heading-size: var( --slotted-page-header-snapped-heading-size-md, var(--slotted-font-size-lg, 1rem) );--_snapped-heading-line-height: var(--slotted-line-height-lg, 1.5);--_subheading-size: var(--slotted-font-size-md, .875rem);--_description-measure: var(--slotted-page-header-description-measure, 70ch);--_control-size: var( --slotted-page-header-control-size, var(--slotted-control-height-sm, 30px) );--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_rule-size: var(--slotted-border-width-thin, 1px);--_duration: var(--slotted-duration-medium);--_easing: var(--slotted-easing-standard, cubic-bezier(.2, 0, 0, 1));background-color:var(--_ground);color:var(--_text);container-name:page-header;container-type:inline-size;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);inline-size:100%;inset-block-start:calc(var(--_sticky-inset) - var(--slotted-page-header-collapse, 0px));min-inline-size:0;overflow-anchor:none;position:sticky;transition:inset-block-start var(--_duration) var(--_easing);z-index:calc(var(--slotted-z-index-sticky, 100) + 3);border-block-end:var(--_rule-size) solid var(--_rule);overflow-x:clip}[data-ui=page-header][data-size=sm]{--_heading-size: var( --slotted-page-header-heading-size-sm, var(--slotted-font-size-xl, 1.125rem) );--_heading-line-height: var(--slotted-line-height-xl, 1.45);--_snapped-heading-size: var( --slotted-page-header-snapped-heading-size-sm, var(--slotted-font-size-md, .875rem) );--_snapped-heading-line-height: var(--slotted-line-height-md, 1.5)}[data-ui=page-header][data-size=lg]{--_heading-size: var( --slotted-page-header-heading-size-lg, var(--slotted-font-size-3xl, 1.5rem) );--_heading-line-height: var(--slotted-line-height-3xl, 1.3);--_snapped-heading-size: var( --slotted-page-header-snapped-heading-size-lg, var(--slotted-font-size-xl, 1.125rem) );--_snapped-heading-line-height: var(--slotted-line-height-xl, 1.45)}[data-ui=page-header][data-revealed],[data-ui=page-header][data-collapse=manual],[data-ui=page-header]:has([data-part=pin][data-pressed]){inset-block-start:var(--_sticky-inset)}[data-ui=page-header][data-variant=plain]:not([data-stuck]){--_ground: transparent}[data-ui=page-header][data-variant=floating]{--_radius: var(--slotted-page-header-radius, var(--slotted-radius-lg, 8px));border:var(--_rule-size) solid var(--_rule);border-radius:var(--_radius);box-sizing:border-box}[data-ui=page-header][data-variant=floating]>*>[data-part=title-area]{border-start-end-radius:calc(var(--_radius) - var(--_rule-size));border-start-start-radius:calc(var(--_radius) - var(--_rule-size));transition:inset-block-start var(--_duration) var(--_easing)}[data-ui=page-header][data-variant=floating][data-stuck]{--_sticky-inset: var(--slotted-page-header-inset, var(--slotted-space-4, .5rem));box-shadow:var(--slotted-page-header-shadow, var(--slotted-shadow-sm))}[data-ui=page-header][data-compact]{inset-block-start:0;position:relative}[data-ui=page-header][data-compact]>*>[data-part=title-area]{inset-block-start:0;position:relative}[data-ui=page-header]>*>[data-part=title-area]{background-color:var(--_ground);display:flex;flex-direction:column;gap:var(--slotted-space-3, .375rem);inset-block-start:var(--_sticky-inset);overflow-anchor:none;padding-block:var(--_padding-block) var(--slotted-space-4, .5rem);position:sticky;z-index:2}[data-ui=page-header]:has([data-part=controls]>*)>*>[data-part=title-area]{padding-block-end:calc(var(--slotted-space-4, .5rem) + var(--_control-size) / 2)}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]{align-items:center;color:var(--_muted);display:flex;font-size:var(--slotted-font-size-sm, .8125rem);gap:var(--slotted-space-5, .75rem);line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]:empty{display:none}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]:has(~[data-part=breadcrumbs]:not(:empty)){display:none}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]{--slotted-icon-size: var(--_icon-size);align-items:center;background:none;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--_muted);cursor:pointer;display:inline-flex;flex:none;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-control-gap-sm, 6px);margin:0;min-block-size:var(--slotted-target-min, 24px);padding:0;text-decoration:none;transition:color var(--slotted-duration-short) var(--_easing)}@media(pointer:coarse){[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]{--_reach: max( 0px, calc((var(--slotted-target-comfortable, 44px) - var(--slotted-target-min, 24px)) / 2) );margin-block:calc(var(--_reach) * -1);padding-block:var(--_reach)}}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]:not([data-disabled]):not(:disabled):hover{color:var(--_text)}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=breadcrumbs]{min-inline-size:0}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--_gap) var(--slotted-space-6, 1rem);min-inline-size:0}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=visual]{align-items:center;align-self:flex-start;display:inline-flex;flex:none}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]{align-items:center;column-gap:var(--slotted-space-4, .5rem);display:flex;flex:1 1 20rem;flex-wrap:wrap;min-block-size:var(--slotted-control-height-md, 34px);min-inline-size:0;row-gap:var(--slotted-space-1, .125rem)}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=heading]{-webkit-box-orient:vertical;color:var(--_text);display:-webkit-box;font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_heading-size);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:-.01em;-webkit-line-clamp:2;line-height:var(--_heading-line-height);margin:0;min-inline-size:0;overflow:hidden;overflow-wrap:anywhere;text-wrap:pretty}[data-ui=page-header]:not([data-expanded])>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=heading]{display:block;flex:0 1 auto;font-size:var(--_snapped-heading-size);line-height:var(--_snapped-heading-line-height);text-overflow:ellipsis;white-space:nowrap}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=marks]{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--slotted-space-2, .25rem);min-inline-size:0}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=marks]:empty{display:none}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=subheading]{-webkit-box-orient:vertical;color:var(--_muted);display:-webkit-box;flex-basis:100%;font-size:var(--_subheading-size);-webkit-line-clamp:2;line-height:var(--slotted-line-height-md, 1.5);margin:0;min-inline-size:0;overflow:hidden;text-wrap:pretty}[data-ui=page-header]:not([data-expanded])>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=subheading]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=actions]{align-items:center;display:flex;flex:0 1 auto;flex-wrap:wrap;gap:var(--slotted-control-gap-md, 8px);min-inline-size:0}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=actions]>[data-ui=toolbar]:not([data-variant=outline]){margin-block:calc(-1 * var(--slotted-toolbar-inset, var(--slotted-space-2, .25rem)))}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=actions]>[data-ui=toolbar]:not([data-variant=outline]):is([data-overflow=menu],[data-overflow=scroll]){margin-block:calc(-1 * var( --slotted-toolbar-inset, max( var(--slotted-space-2, .25rem), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) ) ))}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]:has(>[data-part=actions]>[data-ui=toolbar][data-overflow=menu]){flex-wrap:nowrap}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]:has(>[data-part=actions]>[data-ui=toolbar][data-overflow=menu])>[data-part=title]{align-items:center;display:grid;flex:0 1 auto;grid-template-columns:minmax(0,auto) auto;justify-content:start}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]:has(>[data-part=actions]>[data-ui=toolbar][data-overflow=menu])>[data-part=title]>[data-part=heading]{grid-column:1}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]:has(>[data-part=actions]>[data-ui=toolbar][data-overflow=menu])>[data-part=title]>[data-part=subheading]{grid-column:1 / -1}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=actions]:has(>[data-ui=toolbar][data-overflow=menu]){flex:1 1 0%;min-inline-size:calc(var(--slotted-control-height-md, 34px) + 2 * var( --slotted-toolbar-inset, max( var(--slotted-space-2, .25rem), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) ) ))}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=actions]>[data-ui=toolbar][data-overflow=menu]{flex:1 1 0%;justify-content:safe flex-end}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=navigation]{align-items:center;border-inline-start:var(--_rule-size) solid var(--_rule);display:flex;flex:none;gap:var(--slotted-control-gap-sm, 6px);margin-inline-start:auto;padding-block:var(--slotted-space-2, .25rem);padding-inline-start:var(--slotted-space-4, .5rem)}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=navigation]:dir(rtl) :is(svg,[data-ui=icon]){scale:-1 1}[data-ui=page-header]>*>[data-part=header-area]{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr;min-inline-size:0;overflow-anchor:none;transition:grid-template-rows var(--_duration) var(--_easing),opacity var(--_duration) var(--_easing)}[data-ui=page-header]>*>[data-part=header-area]:not(:has([data-part=figure])){grid-template-columns:minmax(0,1fr)}[data-ui=page-header]>*>[data-part=header-area]>*{min-block-size:0}[data-ui=page-header]:not([data-expanded]):not([data-scrolled])>*>[data-part=header-area]{grid-template-rows:0fr;opacity:0}[data-ui=page-header]:not([data-expanded]):not([data-scrolled])>*>[data-part=header-area]>*{overflow:clip}[data-ui=page-header]>*>[data-part=header-area]>[data-part=figure]{display:flex;padding-block-end:var(--_padding-block);padding-inline-end:var(--slotted-space-6, 1rem)}[data-ui=page-header]>*>[data-part=header-area]>[data-part=content]{display:flex;flex-direction:column;gap:var(--_gap);min-inline-size:0;padding-block-end:var(--_padding-block)}[data-ui=page-header]>*>[data-part=header-area]>[data-part=content]>[data-part=description]{-webkit-box-orient:vertical;color:var(--_muted);display:-webkit-box;font-size:var(--slotted-font-size-md, .875rem);-webkit-line-clamp:3;line-height:var(--slotted-line-height-md, 1.5);margin:0;max-inline-size:var(--_description-measure);overflow:hidden;text-wrap:pretty}[data-ui=page-header]:has([data-part=controls]>*)>*>[data-part=header-area]>[data-part=figure],[data-ui=page-header]:has([data-part=controls]>*)>*>[data-part=header-area]>[data-part=content]{padding-block-end:calc(var(--_padding-block) + var(--_control-size) / 2)}[data-ui=page-header]:not([data-expanded]):not([data-scrolled])>*>[data-part=header-area]>*{padding-block:0}[data-ui=page-header]>*>[data-part=controls]{block-size:0;position:relative;z-index:4}[data-ui=page-header]:has(>*>[data-part=tabs]:not(:empty))>*>[data-part=controls]:before{border-block-start:var(--_rule-size) solid var(--_rule);content:\"\";inset-block-start:0;inset-inline:-50vw;position:absolute}[data-ui=page-header]>*>[data-part=controls]>*{background-color:var(--_surface);border:var(--_rule-size) solid var(--_rule);border-radius:var(--slotted-radius-full, 9999px);display:inline-flex;gap:var(--slotted-space-1, .125rem);inline-size:max-content;inset-block-start:0;inset-inline:0;margin-inline:auto;padding:var(--slotted-space-1, .125rem);position:absolute;translate:0 -50%}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=toggle],[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin]{--slotted-icon-size: var(--slotted-control-icon-size-md, 16px);align-items:center;appearance:none;background-color:transparent;block-size:var(--_control-size);border:0;border-radius:var(--slotted-radius-full, 9999px);color:var(--_muted);cursor:pointer;display:inline-flex;inline-size:var(--_control-size);justify-content:center;margin:0;min-block-size:var(--slotted-target-min, 24px);min-inline-size:var(--slotted-target-min, 24px);padding:0;transition:background-color var(--slotted-duration-short) var(--_easing),color var(--slotted-duration-short) var(--_easing)}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=toggle]>[data-ui=icon]{transition:rotate var(--slotted-duration-short) var(--_easing)}[data-ui=page-header][data-expanded]>*>[data-part=controls]>*>[data-part=toggle]>[data-ui=icon]{rotate:180deg}[data-ui=page-header][data-tall]>*>[data-part=controls]>*>[data-part=pin]{display:none}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin][data-pressed]{background-color:var(--slotted-tone-accent-surface, transparent);color:var(--slotted-tone-accent-text, LinkText)}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin][data-pressed]:not(:disabled):hover{background-color:var(--slotted-tone-accent-subtle-hover, ButtonFace);color:var(--slotted-tone-accent-text, LinkText)}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=toggle]:not(:disabled):hover,[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin]:not(:disabled):hover{background-color:var(--slotted-tone-secondary-subtle-hover, ButtonFace);color:var(--_text)}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=toggle]:not(:disabled):active,[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin]:not(:disabled):active{background-color:var(--slotted-tone-secondary-subtle-active, ButtonFace)}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=toggle]:focus-visible,[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=toggle]:disabled,[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=page-header]>*>[data-part=tabs]{--slotted-tabs-track-color: transparent;min-inline-size:0;padding-block-start:calc(var(--_control-size) / 2 + var(--slotted-space-2, .25rem))}[data-ui=page-header]>*>[data-part=tabs]:empty{display:none}[data-ui=page-header]>*>[data-part=controls]:empty+[data-part=tabs]{padding-block-start:0}[data-ui=page-header][data-expanded]>*>[data-part=title-area] [data-part][data-when=snapped][data-when],[data-ui=page-header]:not([data-expanded])>*>[data-part=title-area] [data-part][data-when=expanded][data-when]{display:none}[data-ui=page-header][data-loading]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=heading]{--slotted-skeleton-inline-size: 24ch;flex:0 1 auto}[data-ui=page-header][data-loading]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=subheading]{--slotted-skeleton-inline-size: 32ch}[data-ui=page-header][data-loading]>*>[data-part=header-area]>[data-part=content]>[data-part=description]{--slotted-skeleton-inline-size: 40ch}[data-ui=page-header]>*>[data-part=progress]{block-size:var(--_rule-size);grid-column:full;margin-block-end:calc(-1 * var(--_rule-size));pointer-events:none;position:relative;z-index:3}[data-ui=page-header][data-loading]>*>[data-part=progress],[aria-busy=true] [data-ui=page-header]>*>[data-part=progress]{display:none}@container page-header (width < 600px){[data-ui=page-header]{--_heading-size: var( --slotted-page-header-heading-size-sm, var(--slotted-font-size-xl, 1.125rem) );--_heading-line-height: var(--slotted-line-height-xl, 1.45);--_snapped-heading-size: var( --slotted-page-header-snapped-heading-size-sm, var(--slotted-font-size-md, .875rem) );--_snapped-heading-line-height: var(--slotted-line-height-md, 1.5)}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]~[data-part=breadcrumbs]{display:none}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]:has(~[data-part=breadcrumbs]:not(:empty)){display:inline-flex}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin]{display:none}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]{flex:1 1 0;min-inline-size:60%}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=actions]{flex:1 1 auto;justify-content:flex-end}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=marks]{flex-basis:100%}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]:has(>[data-part=actions]>[data-ui=toolbar][data-overflow=menu])>[data-part=title]>[data-part=marks]{grid-column:1 / -1}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=subheading]{display:block;text-overflow:ellipsis;white-space:nowrap}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=navigation]{border-inline-start:0;padding-inline-start:0}[data-ui=page-header]>*>[data-part=header-area]{grid-template-columns:minmax(0,1fr)}[data-ui=page-header]>*>[data-part=header-area]>[data-part=figure]{padding-block-end:var(--_gap);padding-inline-end:0}}}\n"], dependencies: [{ kind: "component", type: SlContainer, selector: "[slContainer]", inputs: ["size", "inset", "align"], exportAs: ["slContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeader, decorators: [{
+            type: Component,
+            args: [{ selector: '[slPageHeader]', standalone: true, exportAs: 'slPageHeader', imports: [SlContainer], template: `<div slContainer [size]="containerSize()" [inset]="containerInset()">
+    <ng-content />
+  </div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'page-header',
+                        'data-part': 'root',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-level]': 'resolvedLevel()',
+                        '[attr.data-collapse]': 'resolvedCollapse()',
+                        '[attr.data-expanded]': "expanded() ? '' : null",
+                        '[attr.data-revealed]': "revealed() ? '' : null",
+                        '[attr.data-scrolled]': "scrolled() ? '' : null",
+                        '[attr.data-tall]': "tall() ? '' : null",
+                        '[attr.data-compact]': "compact() ? '' : null",
+                        '[attr.data-stuck]': "stuck() ? '' : null",
+                        '[attr.data-loading]': "loading() ? '' : null",
+                        '[attr.aria-busy]': "loading() ? 'true' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=page-header]{--_surface: var(--slotted-page-header-background, var(--slotted-surface, Canvas));--_ground: var(--_surface);--_sticky-inset: 0px;--_rule: var(--slotted-page-header-border, var(--slotted-border-subtle, ButtonBorder));--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_gap: var(--slotted-page-header-gap, var(--slotted-space-4, .5rem));--_padding-block: var(--slotted-page-header-padding-block, var(--slotted-space-5, .75rem));--_heading-size: var( --slotted-page-header-heading-size-md, var(--slotted-font-size-2xl, 1.25rem) );--_heading-line-height: var(--slotted-line-height-2xl, 1.4);--_snapped-heading-size: var( --slotted-page-header-snapped-heading-size-md, var(--slotted-font-size-lg, 1rem) );--_snapped-heading-line-height: var(--slotted-line-height-lg, 1.5);--_subheading-size: var(--slotted-font-size-md, .875rem);--_description-measure: var(--slotted-page-header-description-measure, 70ch);--_control-size: var( --slotted-page-header-control-size, var(--slotted-control-height-sm, 30px) );--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_rule-size: var(--slotted-border-width-thin, 1px);--_duration: var(--slotted-duration-medium);--_easing: var(--slotted-easing-standard, cubic-bezier(.2, 0, 0, 1));background-color:var(--_ground);color:var(--_text);container-name:page-header;container-type:inline-size;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);inline-size:100%;inset-block-start:calc(var(--_sticky-inset) - var(--slotted-page-header-collapse, 0px));min-inline-size:0;overflow-anchor:none;position:sticky;transition:inset-block-start var(--_duration) var(--_easing);z-index:calc(var(--slotted-z-index-sticky, 100) + 3);border-block-end:var(--_rule-size) solid var(--_rule);overflow-x:clip}[data-ui=page-header][data-size=sm]{--_heading-size: var( --slotted-page-header-heading-size-sm, var(--slotted-font-size-xl, 1.125rem) );--_heading-line-height: var(--slotted-line-height-xl, 1.45);--_snapped-heading-size: var( --slotted-page-header-snapped-heading-size-sm, var(--slotted-font-size-md, .875rem) );--_snapped-heading-line-height: var(--slotted-line-height-md, 1.5)}[data-ui=page-header][data-size=lg]{--_heading-size: var( --slotted-page-header-heading-size-lg, var(--slotted-font-size-3xl, 1.5rem) );--_heading-line-height: var(--slotted-line-height-3xl, 1.3);--_snapped-heading-size: var( --slotted-page-header-snapped-heading-size-lg, var(--slotted-font-size-xl, 1.125rem) );--_snapped-heading-line-height: var(--slotted-line-height-xl, 1.45)}[data-ui=page-header][data-revealed],[data-ui=page-header][data-collapse=manual],[data-ui=page-header]:has([data-part=pin][data-pressed]){inset-block-start:var(--_sticky-inset)}[data-ui=page-header][data-variant=plain]:not([data-stuck]){--_ground: transparent}[data-ui=page-header][data-variant=floating]{--_radius: var(--slotted-page-header-radius, var(--slotted-radius-lg, 8px));border:var(--_rule-size) solid var(--_rule);border-radius:var(--_radius);box-sizing:border-box}[data-ui=page-header][data-variant=floating]>*>[data-part=title-area]{border-start-end-radius:calc(var(--_radius) - var(--_rule-size));border-start-start-radius:calc(var(--_radius) - var(--_rule-size));transition:inset-block-start var(--_duration) var(--_easing)}[data-ui=page-header][data-variant=floating][data-stuck]{--_sticky-inset: var(--slotted-page-header-inset, var(--slotted-space-4, .5rem));box-shadow:var(--slotted-page-header-shadow, var(--slotted-shadow-sm))}[data-ui=page-header][data-compact]{inset-block-start:0;position:relative}[data-ui=page-header][data-compact]>*>[data-part=title-area]{inset-block-start:0;position:relative}[data-ui=page-header]>*>[data-part=title-area]{background-color:var(--_ground);display:flex;flex-direction:column;gap:var(--slotted-space-3, .375rem);inset-block-start:var(--_sticky-inset);overflow-anchor:none;padding-block:var(--_padding-block) var(--slotted-space-4, .5rem);position:sticky;z-index:2}[data-ui=page-header]:has([data-part=controls]>*)>*>[data-part=title-area]{padding-block-end:calc(var(--slotted-space-4, .5rem) + var(--_control-size) / 2)}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]{align-items:center;color:var(--_muted);display:flex;font-size:var(--slotted-font-size-sm, .8125rem);gap:var(--slotted-space-5, .75rem);line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]:empty{display:none}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]:has(~[data-part=breadcrumbs]:not(:empty)){display:none}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]{--slotted-icon-size: var(--_icon-size);align-items:center;background:none;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--_muted);cursor:pointer;display:inline-flex;flex:none;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-control-gap-sm, 6px);margin:0;min-block-size:var(--slotted-target-min, 24px);padding:0;text-decoration:none;transition:color var(--slotted-duration-short) var(--_easing)}@media(pointer:coarse){[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]{--_reach: max( 0px, calc((var(--slotted-target-comfortable, 44px) - var(--slotted-target-min, 24px)) / 2) );margin-block:calc(var(--_reach) * -1);padding-block:var(--_reach)}}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]:not([data-disabled]):not(:disabled):hover{color:var(--_text)}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=breadcrumbs]{min-inline-size:0}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--_gap) var(--slotted-space-6, 1rem);min-inline-size:0}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=visual]{align-items:center;align-self:flex-start;display:inline-flex;flex:none}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]{align-items:center;column-gap:var(--slotted-space-4, .5rem);display:flex;flex:1 1 20rem;flex-wrap:wrap;min-block-size:var(--slotted-control-height-md, 34px);min-inline-size:0;row-gap:var(--slotted-space-1, .125rem)}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=heading]{-webkit-box-orient:vertical;color:var(--_text);display:-webkit-box;font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_heading-size);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:-.01em;-webkit-line-clamp:2;line-height:var(--_heading-line-height);margin:0;min-inline-size:0;overflow:hidden;overflow-wrap:anywhere;text-wrap:pretty}[data-ui=page-header]:not([data-expanded])>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=heading]{display:block;flex:0 1 auto;font-size:var(--_snapped-heading-size);line-height:var(--_snapped-heading-line-height);text-overflow:ellipsis;white-space:nowrap}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=marks]{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--slotted-space-2, .25rem);min-inline-size:0}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=marks]:empty{display:none}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=subheading]{-webkit-box-orient:vertical;color:var(--_muted);display:-webkit-box;flex-basis:100%;font-size:var(--_subheading-size);-webkit-line-clamp:2;line-height:var(--slotted-line-height-md, 1.5);margin:0;min-inline-size:0;overflow:hidden;text-wrap:pretty}[data-ui=page-header]:not([data-expanded])>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=subheading]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=actions]{align-items:center;display:flex;flex:0 1 auto;flex-wrap:wrap;gap:var(--slotted-control-gap-md, 8px);min-inline-size:0}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=actions]>[data-ui=toolbar]:not([data-variant=outline]){margin-block:calc(-1 * var(--slotted-toolbar-inset, var(--slotted-space-2, .25rem)))}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=actions]>[data-ui=toolbar]:not([data-variant=outline]):is([data-overflow=menu],[data-overflow=scroll]){margin-block:calc(-1 * var( --slotted-toolbar-inset, max( var(--slotted-space-2, .25rem), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) ) ))}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]:has(>[data-part=actions]>[data-ui=toolbar][data-overflow=menu]){flex-wrap:nowrap}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]:has(>[data-part=actions]>[data-ui=toolbar][data-overflow=menu])>[data-part=title]{align-items:center;display:grid;flex:0 1 auto;grid-template-columns:minmax(0,auto) auto;justify-content:start}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]:has(>[data-part=actions]>[data-ui=toolbar][data-overflow=menu])>[data-part=title]>[data-part=heading]{grid-column:1}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]:has(>[data-part=actions]>[data-ui=toolbar][data-overflow=menu])>[data-part=title]>[data-part=subheading]{grid-column:1 / -1}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=actions]:has(>[data-ui=toolbar][data-overflow=menu]){flex:1 1 0%;min-inline-size:calc(var(--slotted-control-height-md, 34px) + 2 * var( --slotted-toolbar-inset, max( var(--slotted-space-2, .25rem), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) ) ))}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=actions]>[data-ui=toolbar][data-overflow=menu]{flex:1 1 0%;justify-content:safe flex-end}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=navigation]{align-items:center;border-inline-start:var(--_rule-size) solid var(--_rule);display:flex;flex:none;gap:var(--slotted-control-gap-sm, 6px);margin-inline-start:auto;padding-block:var(--slotted-space-2, .25rem);padding-inline-start:var(--slotted-space-4, .5rem)}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=navigation]:dir(rtl) :is(svg,[data-ui=icon]){scale:-1 1}[data-ui=page-header]>*>[data-part=header-area]{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr;min-inline-size:0;overflow-anchor:none;transition:grid-template-rows var(--_duration) var(--_easing),opacity var(--_duration) var(--_easing)}[data-ui=page-header]>*>[data-part=header-area]:not(:has([data-part=figure])){grid-template-columns:minmax(0,1fr)}[data-ui=page-header]>*>[data-part=header-area]>*{min-block-size:0}[data-ui=page-header]:not([data-expanded]):not([data-scrolled])>*>[data-part=header-area]{grid-template-rows:0fr;opacity:0}[data-ui=page-header]:not([data-expanded]):not([data-scrolled])>*>[data-part=header-area]>*{overflow:clip}[data-ui=page-header]>*>[data-part=header-area]>[data-part=figure]{display:flex;padding-block-end:var(--_padding-block);padding-inline-end:var(--slotted-space-6, 1rem)}[data-ui=page-header]>*>[data-part=header-area]>[data-part=content]{display:flex;flex-direction:column;gap:var(--_gap);min-inline-size:0;padding-block-end:var(--_padding-block)}[data-ui=page-header]>*>[data-part=header-area]>[data-part=content]>[data-part=description]{-webkit-box-orient:vertical;color:var(--_muted);display:-webkit-box;font-size:var(--slotted-font-size-md, .875rem);-webkit-line-clamp:3;line-height:var(--slotted-line-height-md, 1.5);margin:0;max-inline-size:var(--_description-measure);overflow:hidden;text-wrap:pretty}[data-ui=page-header]:has([data-part=controls]>*)>*>[data-part=header-area]>[data-part=figure],[data-ui=page-header]:has([data-part=controls]>*)>*>[data-part=header-area]>[data-part=content]{padding-block-end:calc(var(--_padding-block) + var(--_control-size) / 2)}[data-ui=page-header]:not([data-expanded]):not([data-scrolled])>*>[data-part=header-area]>*{padding-block:0}[data-ui=page-header]>*>[data-part=controls]{block-size:0;position:relative;z-index:4}[data-ui=page-header]:has(>*>[data-part=tabs]:not(:empty))>*>[data-part=controls]:before{border-block-start:var(--_rule-size) solid var(--_rule);content:\"\";inset-block-start:0;inset-inline:-50vw;position:absolute}[data-ui=page-header]>*>[data-part=controls]>*{background-color:var(--_surface);border:var(--_rule-size) solid var(--_rule);border-radius:var(--slotted-radius-full, 9999px);display:inline-flex;gap:var(--slotted-space-1, .125rem);inline-size:max-content;inset-block-start:0;inset-inline:0;margin-inline:auto;padding:var(--slotted-space-1, .125rem);position:absolute;translate:0 -50%}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=toggle],[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin]{--slotted-icon-size: var(--slotted-control-icon-size-md, 16px);align-items:center;appearance:none;background-color:transparent;block-size:var(--_control-size);border:0;border-radius:var(--slotted-radius-full, 9999px);color:var(--_muted);cursor:pointer;display:inline-flex;inline-size:var(--_control-size);justify-content:center;margin:0;min-block-size:var(--slotted-target-min, 24px);min-inline-size:var(--slotted-target-min, 24px);padding:0;transition:background-color var(--slotted-duration-short) var(--_easing),color var(--slotted-duration-short) var(--_easing)}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=toggle]>[data-ui=icon]{transition:rotate var(--slotted-duration-short) var(--_easing)}[data-ui=page-header][data-expanded]>*>[data-part=controls]>*>[data-part=toggle]>[data-ui=icon]{rotate:180deg}[data-ui=page-header][data-tall]>*>[data-part=controls]>*>[data-part=pin]{display:none}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin][data-pressed]{background-color:var(--slotted-tone-accent-surface, transparent);color:var(--slotted-tone-accent-text, LinkText)}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin][data-pressed]:not(:disabled):hover{background-color:var(--slotted-tone-accent-subtle-hover, ButtonFace);color:var(--slotted-tone-accent-text, LinkText)}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=toggle]:not(:disabled):hover,[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin]:not(:disabled):hover{background-color:var(--slotted-tone-secondary-subtle-hover, ButtonFace);color:var(--_text)}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=toggle]:not(:disabled):active,[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin]:not(:disabled):active{background-color:var(--slotted-tone-secondary-subtle-active, ButtonFace)}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=toggle]:focus-visible,[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=toggle]:disabled,[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=page-header]>*>[data-part=tabs]{--slotted-tabs-track-color: transparent;min-inline-size:0;padding-block-start:calc(var(--_control-size) / 2 + var(--slotted-space-2, .25rem))}[data-ui=page-header]>*>[data-part=tabs]:empty{display:none}[data-ui=page-header]>*>[data-part=controls]:empty+[data-part=tabs]{padding-block-start:0}[data-ui=page-header][data-expanded]>*>[data-part=title-area] [data-part][data-when=snapped][data-when],[data-ui=page-header]:not([data-expanded])>*>[data-part=title-area] [data-part][data-when=expanded][data-when]{display:none}[data-ui=page-header][data-loading]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=heading]{--slotted-skeleton-inline-size: 24ch;flex:0 1 auto}[data-ui=page-header][data-loading]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=subheading]{--slotted-skeleton-inline-size: 32ch}[data-ui=page-header][data-loading]>*>[data-part=header-area]>[data-part=content]>[data-part=description]{--slotted-skeleton-inline-size: 40ch}[data-ui=page-header]>*>[data-part=progress]{block-size:var(--_rule-size);grid-column:full;margin-block-end:calc(-1 * var(--_rule-size));pointer-events:none;position:relative;z-index:3}[data-ui=page-header][data-loading]>*>[data-part=progress],[aria-busy=true] [data-ui=page-header]>*>[data-part=progress]{display:none}@container page-header (width < 600px){[data-ui=page-header]{--_heading-size: var( --slotted-page-header-heading-size-sm, var(--slotted-font-size-xl, 1.125rem) );--_heading-line-height: var(--slotted-line-height-xl, 1.45);--_snapped-heading-size: var( --slotted-page-header-snapped-heading-size-sm, var(--slotted-font-size-md, .875rem) );--_snapped-heading-line-height: var(--slotted-line-height-md, 1.5)}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]~[data-part=breadcrumbs]{display:none}[data-ui=page-header]>*>[data-part=title-area]>[data-part=nav]>[data-part=back]:has(~[data-part=breadcrumbs]:not(:empty)){display:inline-flex}[data-ui=page-header]>*>[data-part=controls]>*>[data-part=pin]{display:none}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]{flex:1 1 0;min-inline-size:60%}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=actions]{flex:1 1 auto;justify-content:flex-end}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=marks]{flex-basis:100%}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]:has(>[data-part=actions]>[data-ui=toolbar][data-overflow=menu])>[data-part=title]>[data-part=marks]{grid-column:1 / -1}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=title]>[data-part=subheading]{display:block;text-overflow:ellipsis;white-space:nowrap}[data-ui=page-header]>*>[data-part=title-area]>[data-part=title-row]>[data-part=navigation]{border-inline-start:0;padding-inline-start:0}[data-ui=page-header]>*>[data-part=header-area]{grid-template-columns:minmax(0,1fr)}[data-ui=page-header]>*>[data-part=header-area]>[data-part=figure]{padding-block-end:var(--_gap);padding-inline-end:0}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }, { type: i0.Output, args: ["pinnedChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], collapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], expandedRequest: [{ type: i0.Output, args: ["expandedRequest"] }], pinnedRequest: [{ type: i0.Output, args: ["pinnedRequest"] }] } });
+
+const HEADINGS = new Set(['H1', 'H2', 'H3', 'H4', 'H5', 'H6']);
+/** A click synthesised by the keyboard reports no detail; a real one reports the click count. */
+function activationReason(event) {
+    return event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/** The strip that never leaves: nav, title row and controls. Sticky at 0 inside the root. */
+class SlPageHeaderTitleArea {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderTitleArea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderTitleArea, isStandalone: true, selector: "[slPageHeaderTitleArea]", host: { attributes: { "data-part": "title-area" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderTitleArea, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPageHeaderTitleArea]',
+                    standalone: true,
+                    host: { 'data-part': 'title-area' },
+                }]
+        }] });
+/** The row above the title: the way back, then the breadcrumbs. */
+class SlPageHeaderNav {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderNav, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderNav, isStandalone: true, selector: "[slPageHeaderNav]", host: { attributes: { "data-part": "nav" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderNav, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slPageHeaderNav]', standalone: true, host: { 'data-part': 'nav' } }]
+        }] });
+/**
+ * The way back: the consumer's own link or button, with the arrow the family
+ * draws before it. The arrow points along the reading direction and mirrors
+ * with it.
+ */
+class SlPageHeaderBack {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderBack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderBack, isStandalone: true, selector: "[slPageHeaderBack]", host: { attributes: { "data-part": "back" } }, ngImport: i0, template: `<span slIcon directional><svg slGlyph name="arrow-left"></svg></span><ng-content />`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderBack, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slPageHeaderBack]',
+                    standalone: true,
+                    imports: [SlGlyph, SlIcon],
+                    template: `<span slIcon directional><svg slGlyph name="arrow-left"></svg></span><ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { 'data-part': 'back' },
+                }]
+        }] });
+/** The slot a breadcrumb sits in. Hidden below 600 pixels. */
+class SlPageHeaderBreadcrumbs {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderBreadcrumbs, isStandalone: true, selector: "[slPageHeaderBreadcrumbs]", host: { attributes: { "data-part": "breadcrumbs" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderBreadcrumbs, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPageHeaderBreadcrumbs]',
+                    standalone: true,
+                    host: { 'data-part': 'breadcrumbs' },
+                }]
+        }] });
+/** Visual, title, actions and navigation, on one row that wraps. */
+class SlPageHeaderTitleRow {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderTitleRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderTitleRow, isStandalone: true, selector: "[slPageHeaderTitleRow]", host: { attributes: { "data-part": "title-row" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderTitleRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPageHeaderTitleRow]',
+                    standalone: true,
+                    host: { 'data-part': 'title-row' },
+                }]
+        }] });
+/** The mark before the heading: an avatar, an icon, an image. */
+class SlPageHeaderVisual {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderVisual, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderVisual, isStandalone: true, selector: "[slPageHeaderVisual]", host: { attributes: { "data-part": "visual" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderVisual, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slPageHeaderVisual]', standalone: true, host: { 'data-part': 'visual' } }]
+        }] });
+/** The column of heading, marks and subheading. */
+class SlPageHeaderTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderTitle, isStandalone: true, selector: "[slPageHeaderTitle]", host: { attributes: { "data-part": "title" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderTitle, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slPageHeaderTitle]', standalone: true, host: { 'data-part': 'title' } }]
+        }] });
+/** The status beside the heading: a tag, a badge, a status indicator. */
+class SlPageHeaderMarks {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderMarks, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderMarks, isStandalone: true, selector: "[slPageHeaderMarks]", host: { attributes: { "data-part": "marks" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderMarks, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slPageHeaderMarks]', standalone: true, host: { 'data-part': 'marks' } }]
+        }] });
+/** The slot a toolbar sits in, pushed to the end of the title row. */
+class SlPageHeaderActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderActions, isStandalone: true, selector: "[slPageHeaderActions]", host: { attributes: { "data-part": "actions" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPageHeaderActions]',
+                    standalone: true,
+                    host: { 'data-part': 'actions' },
+                }]
+        }] });
+/** The previous and next record, at the far end of the title row. */
+class SlPageHeaderNavigation {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderNavigation, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderNavigation, isStandalone: true, selector: "[slPageHeaderNavigation]", host: { attributes: { "data-part": "navigation" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderNavigation, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPageHeaderNavigation]',
+                    standalone: true,
+                    host: { 'data-part': 'navigation' },
+                }]
+        }] });
+/** The picture of the record, a column before the content of the header area. */
+class SlPageHeaderFigure {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderFigure, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderFigure, isStandalone: true, selector: "[slPageHeaderFigure]", host: { attributes: { "data-part": "figure" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderFigure, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slPageHeaderFigure]', standalone: true, host: { 'data-part': 'figure' } }]
+        }] });
+/** A column of whatever only makes sense at rest. */
+class SlPageHeaderContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderContent, isStandalone: true, selector: "[slPageHeaderContent]", host: { attributes: { "data-part": "content" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPageHeaderContent]',
+                    standalone: true,
+                    host: { 'data-part': 'content' },
+                }]
+        }] });
+/** The slot a tabs family sits in, last in the root. */
+class SlPageHeaderTabs {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderTabs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderTabs, isStandalone: true, selector: "[slPageHeaderTabs]", host: { attributes: { "data-part": "tabs" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderTabs, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slPageHeaderTabs]', standalone: true, host: { 'data-part': 'tabs' } }]
+        }] });
+/**
+ * The heading. The element is the consumer's own: `<h1 slPageHeaderHeading>`
+ * is a native heading and this adds nothing to it, while a `div` or an
+ * `input` gets `role="heading"` and the level the header resolved. While
+ * loading it renders `slSkeletonText` in place of its words.
+ */
+class SlPageHeaderHeading {
+    header = inject(SlPageHeader);
+    native = inject(ElementRef).nativeElement;
+    isNativeHeading = HEADINGS.has(this.native.tagName);
+    ariaRole = computed(() => (this.isNativeHeading ? null : 'heading'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRole" }] : /* istanbul ignore next */ []));
+    ariaLevel = computed(() => this.isNativeHeading ? null : this.header.resolvedLevel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLevel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlPageHeaderHeading, isStandalone: true, selector: "[slPageHeaderHeading]", host: { attributes: { "data-part": "heading" }, properties: { "attr.id": "header.ids().headingId", "attr.role": "ariaRole()", "attr.aria-level": "ariaLevel()" } }, exportAs: ["slPageHeaderHeading"], ngImport: i0, template: `@if (header.loading()) {
+      <span slSkeletonText [lines]="1"></span>
+    } @else {
+      <ng-content />
+    }`, isInline: true, dependencies: [{ kind: "component", type: SlSkeletonText, selector: "[slSkeletonText]", inputs: ["lines", "animation", "loading", "lastLineSize", "inlineSize"], exportAs: ["slSkeletonText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderHeading, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slPageHeaderHeading]',
+                    standalone: true,
+                    exportAs: 'slPageHeaderHeading',
+                    imports: [SlSkeletonText],
+                    template: `@if (header.loading()) {
+      <span slSkeletonText [lines]="1"></span>
+    } @else {
+      <ng-content />
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'heading',
+                        '[attr.id]': 'header.ids().headingId',
+                        '[attr.role]': 'ariaRole()',
+                        '[attr.aria-level]': 'ariaLevel()',
+                    },
+                }]
+        }] });
+/** One line under the heading, in the muted text, part of what stays visible. */
+class SlPageHeaderSubheading {
+    header = inject(SlPageHeader);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderSubheading, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlPageHeaderSubheading, isStandalone: true, selector: "[slPageHeaderSubheading]", host: { attributes: { "data-part": "subheading" } }, ngImport: i0, template: `@if (header.loading()) {
+      <span slSkeletonText [lines]="1"></span>
+    } @else {
+      <ng-content />
+    }`, isInline: true, dependencies: [{ kind: "component", type: SlSkeletonText, selector: "[slSkeletonText]", inputs: ["lines", "animation", "loading", "lastLineSize", "inlineSize"], exportAs: ["slSkeletonText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderSubheading, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slPageHeaderSubheading]',
+                    standalone: true,
+                    imports: [SlSkeletonText],
+                    template: `@if (header.loading()) {
+      <span slSkeletonText [lines]="1"></span>
+    } @else {
+      <ng-content />
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'subheading' },
+                }]
+        }] });
+/** A paragraph with a measure, inside the header area's content. */
+class SlPageHeaderDescription {
+    header = inject(SlPageHeader);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlPageHeaderDescription, isStandalone: true, selector: "[slPageHeaderDescription]", host: { attributes: { "data-part": "description" } }, ngImport: i0, template: `@if (header.loading()) {
+      <span slSkeletonText [lines]="2"></span>
+    } @else {
+      <ng-content />
+    }`, isInline: true, dependencies: [{ kind: "component", type: SlSkeletonText, selector: "[slSkeletonText]", inputs: ["lines", "animation", "loading", "lastLineSize", "inlineSize"], exportAs: ["slSkeletonText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderDescription, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slPageHeaderDescription]',
+                    standalone: true,
+                    imports: [SlSkeletonText],
+                    template: `@if (header.loading()) {
+      <span slSkeletonText [lines]="2"></span>
+    } @else {
+      <ng-content />
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'description' },
+                }]
+        }] });
+/**
+ * The region that collapses. Collapsed by the control it is `inert` and
+ * hidden from assistive technology; scrolled past it is neither, so a control
+ * inside it that receives focus is scrolled back into view and the header
+ * re-opens with the reason `scroll`.
+ */
+class SlPageHeaderArea {
+    header = inject(SlPageHeader);
+    written = inject(new HostAttributeToken('aria-label'), { optional: true });
+    native = inject(ElementRef).nativeElement;
+    label = computed(() => this.written ?? this.header.t('headerArea'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const closedByControl = !this.header.expanded() && !this.header.scrolled();
+            if (closedByControl) {
+                this.native.setAttribute('inert', '');
+                this.native.setAttribute('aria-hidden', 'true');
+            }
+            else {
+                this.native.removeAttribute('inert');
+                this.native.removeAttribute('aria-hidden');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderArea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderArea, isStandalone: true, selector: "[slPageHeaderArea]", host: { attributes: { "data-part": "header-area", "role": "region" }, properties: { "attr.id": "header.ids().areaId", "attr.aria-label": "label()" } }, exportAs: ["slPageHeaderArea"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderArea, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slPageHeaderArea]',
+                    standalone: true,
+                    exportAs: 'slPageHeaderArea',
+                    host: {
+                        'data-part': 'header-area',
+                        role: 'region',
+                        '[attr.id]': 'header.ids().areaId',
+                        '[attr.aria-label]': 'label()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/** The zero-height row on the chrome's edge; the pill is its only child. */
+class SlPageHeaderControls {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderControls, isStandalone: true, selector: "[slPageHeaderControls]", host: { attributes: { "data-part": "controls" } }, ngImport: i0, template: `<div><ng-content /></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderControls, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slPageHeaderControls]',
+                    standalone: true,
+                    template: `<div><ng-content /></div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'controls' },
+                }]
+        }] });
+/**
+ * The disclosure control: the consumer's own `button`, so `Enter` and `Space`
+ * are the platform's. `aria-expanded` and `aria-controls` are the pattern's
+ * two properties.
+ */
+class SlPageHeaderToggle {
+    header = inject(SlPageHeader);
+    written = inject(new HostAttributeToken('aria-label'), { optional: true });
+    label = computed(() => {
+        if (this.written !== null)
+            return this.written;
+        return this.header.expanded() ? this.header.t('collapse') : this.header.t('expand');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (event.defaultPrevented)
+            return;
+        this.header.setExpanded(!this.header.expanded(), activationReason(event), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderToggle, isStandalone: true, selector: "button[slPageHeaderToggle]", host: { attributes: { "data-part": "toggle", "type": "button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-expanded": "header.expanded()", "attr.aria-controls": "header.ids().areaId", "attr.aria-label": "label()" } }, exportAs: ["slPageHeaderToggle"], ngImport: i0, template: `<ng-content
+    ><span slIcon><svg slGlyph name="chevron-down"></svg></span
+  ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderToggle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slPageHeaderToggle]',
+                    standalone: true,
+                    exportAs: 'slPageHeaderToggle',
+                    imports: [SlGlyph, SlIcon],
+                    /* The stylesheet turns the chevron half a turn while the area is shown. */
+                    template: `<ng-content
+    ><span slIcon><svg slGlyph name="chevron-down"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-part': 'toggle',
+                        type: 'button',
+                        '[attr.aria-expanded]': 'header.expanded()',
+                        '[attr.aria-controls]': 'header.ids().areaId',
+                        '[attr.aria-label]': 'label()',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }] });
+/** The pin: a toggle button with `aria-pressed`, which is the `pressed` state the vocabulary has. */
+class SlPageHeaderPin {
+    header = inject(SlPageHeader);
+    written = inject(new HostAttributeToken('aria-label'), { optional: true });
+    label = computed(() => {
+        if (this.written !== null)
+            return this.written;
+        return this.header.pinned() ? this.header.t('unpin') : this.header.t('pin');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (event.defaultPrevented)
+            return;
+        this.header.setPinned(!this.header.pinned(), activationReason(event), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderPin, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderPin, isStandalone: true, selector: "button[slPageHeaderPin]", host: { attributes: { "data-part": "pin", "type": "button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-pressed": "header.pinned()", "attr.data-pressed": "header.pinned() ? '' : null", "attr.aria-label": "label()" } }, exportAs: ["slPageHeaderPin"], ngImport: i0, template: `<ng-content
+    ><span slIcon><svg slGlyph [name]="header.pinned() ? 'pin-off' : 'pin'"></svg></span
+  ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderPin, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slPageHeaderPin]',
+                    standalone: true,
+                    exportAs: 'slPageHeaderPin',
+                    imports: [SlGlyph, SlIcon],
+                    /* The mark says what a press does: pin while free, unpin while held. */
+                    template: `<ng-content
+    ><span slIcon><svg slGlyph [name]="header.pinned() ? 'pin-off' : 'pin'"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-part': 'pin',
+                        type: 'button',
+                        '[attr.aria-pressed]': 'header.pinned()',
+                        '[attr.data-pressed]': "header.pinned() ? '' : null",
+                        '[attr.aria-label]': 'label()',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }] });
+/**
+ * A refresh of what is already on screen, drawn over the line where the chrome
+ * ends. Written after the controls and before the tabs, as the controls are:
+ * there it is the line the pill straddles, and with no tabs it is the root's
+ * own hairline. The frame is a row of the container one hairline tall; the
+ * stylesheet gives the bar the header's width and draws nothing while the
+ * title is still loading or while a region around the header is busy. `size`
+ * defaults to `sm`, `delay` to 200 and `minDuration` to 400 milliseconds; an
+ * input, then `provideProgressIndicatorDefaults()`, wins.
+ */
+class SlPageHeaderProgress {
+    header = inject(SlPageHeader);
+    defaults = injectProgressIndicatorDefaults();
+    loading = input(true, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    buffer = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buffer" }] : /* istanbul ignore next */ []));
+    valueText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    tone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    delay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "delay" }] : /* istanbul ignore next */ []));
+    minDuration = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDuration" }] : /* istanbul ignore next */ []));
+    /** The bar was painted and has been withdrawn. */
+    withdraw = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlPageHeaderProgress, isStandalone: true, selector: "[slPageHeaderProgress]", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minDuration: { classPropertyName: "minDuration", publicName: "minDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { withdraw: "withdraw" }, host: { attributes: { "data-part": "progress" } }, exportAs: ["slPageHeaderProgress"], ngImport: i0, template: `<div
+    slProgressBar
+    placement="edge-end"
+    [buffer]="buffer()"
+    [delay]="delay() ?? defaults.delay ?? 200"
+    [label]="label() ?? header.t('progress')"
+    [loading]="loading()"
+    [max]="max()"
+    [min]="min()"
+    [minDuration]="minDuration() ?? defaults.minDuration ?? 400"
+    [size]="size() ?? 'sm'"
+    [tone]="tone()"
+    [value]="value()"
+    [valueText]="valueText()"
+    (withdraw)="withdraw.emit()"
+  ></div>`, isInline: true, dependencies: [{ kind: "component", type: SlProgressBar, selector: "[slProgressBar]", inputs: ["value", "min", "max", "buffer", "showValue", "valueText", "format", "locale", "wave", "placement"], exportAs: ["slProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlPageHeaderProgress, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slPageHeaderProgress]',
+                    standalone: true,
+                    exportAs: 'slPageHeaderProgress',
+                    imports: [SlProgressBar],
+                    template: `<div
+    slProgressBar
+    placement="edge-end"
+    [buffer]="buffer()"
+    [delay]="delay() ?? defaults.delay ?? 200"
+    [label]="label() ?? header.t('progress')"
+    [loading]="loading()"
+    [max]="max()"
+    [min]="min()"
+    [minDuration]="minDuration() ?? defaults.minDuration ?? 400"
+    [size]="size() ?? 'sm'"
+    [tone]="tone()"
+    [value]="value()"
+    [valueText]="valueText()"
+    (withdraw)="withdraw.emit()"
+  ></div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'progress' },
+                }]
+        }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], buffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "buffer", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDuration", required: false }] }], withdraw: [{ type: i0.Output, args: ["withdraw"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PAGE_HEADER_DEFAULTS, SlPageHeader, SlPageHeaderActions, SlPageHeaderArea, SlPageHeaderBack, SlPageHeaderBreadcrumbs, SlPageHeaderContent, SlPageHeaderControls, SlPageHeaderDescription, SlPageHeaderFigure, SlPageHeaderHeading, SlPageHeaderIdFactory, SlPageHeaderMarks, SlPageHeaderNav, SlPageHeaderNavigation, SlPageHeaderPin, SlPageHeaderProgress, SlPageHeaderSubheading, SlPageHeaderTabs, SlPageHeaderTitle, SlPageHeaderTitleArea, SlPageHeaderTitleRow, SlPageHeaderToggle, SlPageHeaderVisual, injectPageHeaderDefaults, providePageHeaderDefaults };
+//# sourceMappingURL=slotted-angular-page-header.mjs.map