@slotted/angular 0.1.0-beta.7 → 0.1.0-beta.9

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

@@ -127,7 +127,7 @@ class SlPageHeader {
     /** 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. */
+    /** The frame is narrower than the compact size class — a phone; the header 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. */
@@ -273,9 +273,9 @@ class SlPageHeader {
         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()">
+    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-ui-page-header": "", "data-part": "root", "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]:not(:has(>*>[data-part=header-area]))>*>[data-part=title-area]{background-color:transparent}[data-ui=page-header][data-stuck]{-webkit-backdrop-filter:var(--slotted-page-header-backdrop-filter, none);backdrop-filter:var(--slotted-page-header-backdrop-filter, none)}@media(prefers-reduced-transparency:reduce),(forced-colors:active){[data-ui=page-header][data-stuck]{-webkit-backdrop-filter:none;backdrop-filter:none}}[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 });
+  </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]:not(:has(>*>[data-part-header-area]))>*>[data-part-title-area]{background-color:transparent}[data-ui-page-header][data-stuck]{-webkit-backdrop-filter:var(--slotted-page-header-backdrop-filter, none);backdrop-filter:var(--slotted-page-header-backdrop-filter, none)}@media(prefers-reduced-transparency:reduce),(forced-colors:active){[data-ui-page-header][data-stuck]{-webkit-backdrop-filter:none;backdrop-filter:none}}[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,
@@ -283,7 +283,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     <ng-content />
   </div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-ui': 'page-header',
+                        'data-ui-page-header': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-variant]': 'resolvedVariant()',
                         '[attr.data-size]': 'resolvedSize()',
                         '[attr.data-level]': 'resolvedLevel()',
@@ -296,7 +298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[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]:not(:has(>*>[data-part=header-area]))>*>[data-part=title-area]{background-color:transparent}[data-ui=page-header][data-stuck]{-webkit-backdrop-filter:var(--slotted-page-header-backdrop-filter, none);backdrop-filter:var(--slotted-page-header-backdrop-filter, none)}@media(prefers-reduced-transparency:reduce),(forced-colors:active){[data-ui=page-header][data-stuck]{-webkit-backdrop-filter:none;backdrop-filter:none}}[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"] }]
+                    }, 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]:not(:has(>*>[data-part-header-area]))>*>[data-part-title-area]{background-color:transparent}[data-ui-page-header][data-stuck]{-webkit-backdrop-filter:var(--slotted-page-header-backdrop-filter, none);backdrop-filter:var(--slotted-page-header-backdrop-filter, none)}@media(prefers-reduced-transparency:reduce),(forced-colors:active){[data-ui-page-header][data-stuck]{-webkit-backdrop-filter:none;backdrop-filter:none}}[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']);
@@ -307,24 +309,28 @@ function activationReason(event) {
 /** 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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderTitleArea, isStandalone: true, selector: "[slPageHeaderTitleArea]", host: { attributes: { "data-part": "title-area", "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' },
+                    host: { 'data-part': 'title-area', '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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderNav, isStandalone: true, selector: "[slPageHeaderNav]", host: { attributes: { "data-part": "nav", "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' } }]
+            args: [{
+                    selector: '[slPageHeaderNav]',
+                    standalone: true,
+                    host: { 'data-part': 'nav', 'data-part-nav': '' },
+                }]
         }] });
 /**
  * The way back: the consumer's own link or button, with the arrow the family
@@ -333,7 +339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  */
 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderBack, isStandalone: true, selector: "[slPageHeaderBack]", host: { attributes: { "data-part": "back", "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,
@@ -343,118 +349,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     imports: [SlGlyph, SlIcon],
                     template: `<span slIcon directional><svg slGlyph name="arrow-left"></svg></span><ng-content />`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { 'data-part': 'back' },
+                    host: { 'data-part': 'back', '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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderBreadcrumbs, isStandalone: true, selector: "[slPageHeaderBreadcrumbs]", host: { attributes: { "data-part": "breadcrumbs", "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' },
+                    host: { 'data-part': 'breadcrumbs', '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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderTitleRow, isStandalone: true, selector: "[slPageHeaderTitleRow]", host: { attributes: { "data-part": "title-row", "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' },
+                    host: { 'data-part': 'title-row', '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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderVisual, isStandalone: true, selector: "[slPageHeaderVisual]", host: { attributes: { "data-part": "visual", "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' } }]
+            args: [{
+                    selector: '[slPageHeaderVisual]',
+                    standalone: true,
+                    host: { 'data-part': 'visual', '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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderTitle, isStandalone: true, selector: "[slPageHeaderTitle]", host: { attributes: { "data-part": "title", "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' } }]
+            args: [{
+                    selector: '[slPageHeaderTitle]',
+                    standalone: true,
+                    host: { 'data-part': 'title', '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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderMarks, isStandalone: true, selector: "[slPageHeaderMarks]", host: { attributes: { "data-part": "marks", "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' } }]
+            args: [{
+                    selector: '[slPageHeaderMarks]',
+                    standalone: true,
+                    host: { 'data-part': 'marks', '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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderActions, isStandalone: true, selector: "[slPageHeaderActions]", host: { attributes: { "data-part": "actions", "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' },
+                    host: { 'data-part': 'actions', '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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderNavigation, isStandalone: true, selector: "[slPageHeaderNavigation]", host: { attributes: { "data-part": "navigation", "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' },
+                    host: { 'data-part': 'navigation', '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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderFigure, isStandalone: true, selector: "[slPageHeaderFigure]", host: { attributes: { "data-part": "figure", "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' } }]
+            args: [{
+                    selector: '[slPageHeaderFigure]',
+                    standalone: true,
+                    host: { 'data-part': 'figure', '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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderContent, isStandalone: true, selector: "[slPageHeaderContent]", host: { attributes: { "data-part": "content", "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' },
+                    host: { 'data-part': 'content', '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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderTabs, isStandalone: true, selector: "[slPageHeaderTabs]", host: { attributes: { "data-part": "tabs", "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' } }]
+            args: [{
+                    selector: '[slPageHeaderTabs]',
+                    standalone: true,
+                    host: { 'data-part': 'tabs', 'data-part-tabs': '' },
+                }]
         }] });
 /**
  * The heading. The element is the consumer's own: `<h1 slPageHeaderHeading>`
@@ -471,7 +497,7 @@ class SlPageHeaderHeading {
     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()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlPageHeaderHeading, isStandalone: true, selector: "[slPageHeaderHeading]", host: { attributes: { "data-part": "heading", "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 />
@@ -493,6 +519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         'data-part': 'heading',
+                        'data-part-heading': '',
                         '[attr.id]': 'header.ids().headingId',
                         '[attr.role]': 'ariaRole()',
                         '[attr.aria-level]': 'ariaLevel()',
@@ -503,7 +530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 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()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlPageHeaderSubheading, isStandalone: true, selector: "[slPageHeaderSubheading]", host: { attributes: { "data-part": "subheading", "data-part-subheading": "" } }, ngImport: i0, template: `@if (header.loading()) {
       <span slSkeletonText [lines]="1"></span>
     } @else {
       <ng-content />
@@ -522,14 +549,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     }`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { 'data-part': 'subheading' },
+                    host: { 'data-part': 'subheading', '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()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlPageHeaderDescription, isStandalone: true, selector: "[slPageHeaderDescription]", host: { attributes: { "data-part": "description", "data-part-description": "" } }, ngImport: i0, template: `@if (header.loading()) {
       <span slSkeletonText [lines]="2"></span>
     } @else {
       <ng-content />
@@ -548,7 +575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     }`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { 'data-part': 'description' },
+                    host: { 'data-part': 'description', 'data-part-description': '' },
                 }]
         }] });
 /**
@@ -577,7 +604,7 @@ class SlPageHeaderArea {
         });
     }
     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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderArea, isStandalone: true, selector: "[slPageHeaderArea]", host: { attributes: { "data-part": "header-area", "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,
@@ -587,6 +614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slPageHeaderArea',
                     host: {
                         'data-part': 'header-area',
+                        'data-part-header-area': '',
                         role: 'region',
                         '[attr.id]': 'header.ids().areaId',
                         '[attr.aria-label]': 'label()',
@@ -596,7 +624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 /** 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderControls, isStandalone: true, selector: "[slPageHeaderControls]", host: { attributes: { "data-part": "controls", "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,
@@ -606,7 +634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     template: `<div><ng-content /></div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { 'data-part': 'controls' },
+                    host: { 'data-part': 'controls', 'data-part-controls': '' },
                 }]
         }] });
 /**
@@ -629,7 +657,7 @@ class SlPageHeaderToggle {
         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
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderToggle, isStandalone: true, selector: "button[slPageHeaderToggle]", host: { attributes: { "data-part": "toggle", "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 });
 }
@@ -647,6 +675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         'data-part': 'toggle',
+                        'data-part-toggle': '',
                         type: 'button',
                         '[attr.aria-expanded]': 'header.expanded()',
                         '[attr.aria-controls]': 'header.ids().areaId',
@@ -671,7 +700,7 @@ class SlPageHeaderPin {
         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
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlPageHeaderPin, isStandalone: true, selector: "button[slPageHeaderPin]", host: { attributes: { "data-part": "pin", "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 });
 }
@@ -689,6 +718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         'data-part': 'pin',
+                        'data-part-pin': '',
                         type: 'button',
                         '[attr.aria-pressed]': 'header.pinned()',
                         '[attr.data-pressed]': "header.pinned() ? '' : null",
@@ -734,7 +764,7 @@ class SlPageHeaderProgress {
     /** 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
+    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", "data-part-progress": "" } }, exportAs: ["slPageHeaderProgress"], ngImport: i0, template: `<div
     slProgressBar
     placement="edge-end"
     [buffer]="buffer()"
@@ -776,7 +806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
   ></div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { 'data-part': 'progress' },
+                    host: { 'data-part': 'progress', '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"] }] } });