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

package/fesm2022/slotted-angular-detail-panel.mjs

@@ -0,0 +1,754 @@
+import { createControllable } from '@slotted/core/state';
+import { findScrollParent } from '@slotted/core/sticky-header';
+import { injectMessages } from '@slotted/angular/i18n';
+import { detailPanelMessages } from '@slotted/core/i18n';
+import * as i1 from '@slotted/angular/page-header';
+import { PAGE_HEADER_DEFAULTS, SlPageHeaderTabs } from '@slotted/angular/page-header';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, booleanAttribute, TemplateRef, Directive, model, output, ElementRef, HostAttributeToken, contentChildren, signal, computed, effect, afterRenderEffect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChild, viewChild } from '@angular/core';
+import { SlBadge } from '@slotted/angular/badge';
+import { SlContainer } from '@slotted/angular/container';
+import { SlPage } from '@slotted/angular/page';
+import { SlSection, SlSectionActions, SlSectionBody, SlSectionHeader, SlSectionHeading, SlSectionTitle } from '@slotted/angular/section';
+import { SlSkeletonText } from '@slotted/angular/skeleton';
+import { SlTabs, SlTab, SlTabList } from '@slotted/angular/tabs';
+import { NgTemplateOutlet } from '@angular/common';
+
+const FALLBACK = {
+    aside: 'end',
+    layout: 'stacked',
+    level: '2',
+    mount: 'active',
+    scroll: 'ancestor',
+    size: 'md',
+};
+const DETAIL_PANEL_DEFAULTS = new InjectionToken('slotted detail-panel defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once how its records read — stacked or tabbed, the
+ * aside's side, the rank, the size, who scrolls — rather than repeating them
+ * on every screen. A panel that states any of them itself still wins. Its
+ * words come from the language in force (`provideSlotted`).
+ */
+function provideDetailPanelDefaults(defaults) {
+    return {
+        provide: DETAIL_PANEL_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+function injectDetailPanelDefaults() {
+    return inject(DETAIL_PANEL_DEFAULTS);
+}
+class SlDetailPanelIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-detail-panel-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** The selector for the heading the panel is named by and focuses: the page-header's. */
+const HEADING_SELECTOR = ':scope > [data-ui="page-header"] [data-part="heading"]';
+/**
+ * One named unit of content, declared as a template so the panel decides
+ * when it exists: `mount` under `tabs`, and `loading` under both layouts.
+ *
+ * ```html
+ * <ng-template slDetailPanelSection name="linhas" label="Linhas" [count]="4">
+ *   …
+ * </ng-template>
+ * ```
+ */
+class SlDetailPanelSection {
+    /** The value the section is named by in `section` and the URL. */
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** The tab's words, and the stacked heading. */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Drawn in the tab, or as a badge after the stacked heading. */
+    count = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /** Takes the tab out of the strip's sequence. Inert under `stacked`. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The section's own controls, as a template: in the stacked heading's actions column, or in a row above a tabbed section. */
+    actions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelSection, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlDetailPanelSection, isStandalone: true, selector: "ng-template[slDetailPanelSection]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["slDetailPanelSection"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelSection, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[slDetailPanelSection]',
+                    standalone: true,
+                    exportAs: 'slDetailPanelSection',
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }] } });
+/**
+ * One record on screen: what identifies it, what state it is in, what can be
+ * done to it, and what happened to it.
+ *
+ * **The top is a `[slPageHeader]` the consumer writes**, the root's first
+ * child. The panel provides `PAGE_HEADER_DEFAULTS` for its subtree from its
+ * own `level` and `size`, so a header that states neither takes the panel's;
+ * one that does still wins.
+ *
+ * **One value moves: the current section.** `section` is a model; every move
+ * is first a request on `sectionRequest`, carrying the reason and `cancel()`.
+ * Under `layout="tabs"` the strip (`[slDetailPanelTabs]`, placed in the
+ * header's tabs slot) asks with `pointer` or `keyboard`; under `stacked` the
+ * value arrives as `programmatic` and the named section is scrolled under the
+ * chrome and marked `data-current`.
+ *
+ * **Focus follows the record.** When `recordKey` changes while focus is
+ * inside the root, the heading takes focus and the scroller returns to its
+ * start.
+ */
+class SlDetailPanel {
+    layout = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    aside = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aside" }] : /* istanbul ignore next */ []));
+    level = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    scroll = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []));
+    mount = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mount" }] : /* istanbul ignore next */ []));
+    status = input('ready', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** The record has not arrived: `aria-busy`, and skeleton lines in every section. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The identity of the record on screen. */
+    recordKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "recordKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * aside's name (`aside`) and the root's name while loading (`loading`).
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** The current section. Two-way, so a template may bind it directly. */
+    section = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
+    /** One output for one move of the current section, carrying the reason and the event. */
+    sectionRequest = output();
+    defaults = injectDetailPanelDefaults();
+    native = inject(ElementRef).nativeElement;
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {
+        optional: true,
+    });
+    id = inject(SlDetailPanelIdFactory).next();
+    /** Every section declared inside the panel, in declaration order. */
+    sections = contentChildren(SlDetailPanelSection, { ...(ngDevMode ? { debugName: "sections" } : /* istanbul ignore next */ {}), descendants: true });
+    /** The strip's ids for a section, once the strip has attached. */
+    identify = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "identify" }] : /* istanbul ignore next */ []));
+    headingId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headingId" }] : /* istanbul ignore next */ []));
+    seen = new Set();
+    resolvedLayout = computed(() => this.layout() ?? this.defaults.layout, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
+    resolvedAside = computed(() => this.aside() ?? this.defaults.aside, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAside" }] : /* istanbul ignore next */ []));
+    resolvedLevel = computed(() => this.level() ?? this.defaults.level, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLevel" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedScroll = computed(() => this.scroll() ?? this.defaults.scroll, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
+    resolvedMount = computed(() => this.mount() ?? this.defaults.mount, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMount" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this panel's `messages` laid over them. */
+    t = injectMessages(detailPanelMessages, this.messages);
+    /** The current section: the model, or under tabs the first section when nothing is named. */
+    current = computed(() => {
+        const named = this.section();
+        if (named !== undefined)
+            return named;
+        return this.resolvedLayout() === 'tabs' ? this.sections()[0]?.name() : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => {
+        if (this.writtenLabel !== null || this.writtenLabelledBy !== null)
+            return this.writtenLabelledBy;
+        return this.headingId() ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    label = computed(() => {
+        if (this.writtenLabel !== null)
+            return this.writtenLabel;
+        if (this.writtenLabelledBy !== null || this.headingId() !== undefined)
+            return null;
+        return this.loading() ? this.t('loading') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const current = this.current();
+            if (current !== undefined)
+                this.seen.add(current);
+        });
+        /**
+         * The root is named by the page-header's heading, which is in the DOM
+         * once the consumer's header has rendered. Read there rather than
+         * passed, because the heading's id is the page-header's to give.
+         */
+        afterRenderEffect(() => {
+            this.loading();
+            this.recordKey();
+            const heading = this.native.querySelector(HEADING_SELECTOR);
+            untracked(() => this.headingId.set(heading?.id || undefined));
+        });
+        /**
+         * Focus follows the record. The first key is the record the panel
+         * opened on and moves nothing; a later one is the previous or next
+         * control, or the application, changing what is under the reader.
+         */
+        let seenKey = untracked(() => this.recordKey());
+        afterRenderEffect(() => {
+            const key = this.recordKey();
+            if (key === seenKey)
+                return;
+            seenKey = key;
+            const active = this.native.ownerDocument.activeElement;
+            if (active === null || !this.native.contains(active))
+                return;
+            this.scroller()?.scrollTo({ top: 0 });
+            this.focus();
+        });
+        /**
+         * Under `stacked` the current section is a place, so a value that
+         * arrived is scrolled under the chrome; the section's
+         * `scroll-margin-block-start` reads the chrome's height.
+         */
+        let scrolledTo;
+        afterRenderEffect(() => {
+            const current = this.current();
+            if (this.resolvedLayout() !== 'stacked' || current === undefined)
+                return;
+            if (scrolledTo === current)
+                return;
+            scrolledTo = current;
+            this.native
+                .querySelector(`[data-part="section"][data-name="${CSS.escape(current)}"]`)
+                ?.scrollIntoView({ block: 'start' });
+        });
+    }
+    /** Whether a section has been current at least once, which is what `lazy` reads. */
+    hasSeen(name) {
+        return this.seen.has(name);
+    }
+    /** Asks to move the current section, carrying the reason and the originating event. */
+    select(next, reason, source) {
+        if (next === this.current())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.current(),
+            onRequest: (request) => {
+                this.sectionRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (cancelled || !moved)
+            return;
+        this.section.set(next);
+    }
+    /** Scrolls a stacked section under the chrome, or shows a tabbed one, with the reason `programmatic`. */
+    scrollToSection(name) {
+        this.select(name, 'programmatic');
+    }
+    /** Puts focus on the page-header's heading, which is where a new record starts. */
+    focus() {
+        const heading = this.native.querySelector(HEADING_SELECTOR);
+        if (heading === null)
+            return;
+        if (!heading.hasAttribute('tabindex'))
+            heading.setAttribute('tabindex', '-1');
+        heading.focus({ preventScroll: true });
+    }
+    scroller() {
+        return this.resolvedScroll() === 'self' ? this.native : findScrollParent(this.native);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlDetailPanel, isStandalone: true, selector: "[slDetailPanel]", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, aside: { classPropertyName: "aside", publicName: "aside", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, recordKey: { classPropertyName: "recordKey", publicName: "recordKey", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { section: "sectionChange", sectionRequest: "sectionRequest" }, host: { attributes: { "data-ui": "detail-panel", "data-part": "root" }, properties: { "attr.data-layout": "resolvedLayout()", "attr.data-aside": "resolvedAside()", "attr.data-level": "resolvedLevel()", "attr.data-size": "resolvedSize()", "attr.data-scroll": "resolvedScroll()", "attr.data-mount": "resolvedMount()", "attr.data-status": "status()", "attr.data-loading": "loading() ? '' : null", "attr.aria-busy": "loading() ? 'true' : null", "attr.data-key": "recordKey() ?? null", "attr.aria-labelledby": "labelledBy()", "attr.aria-label": "label()" } }, providers: [
+            {
+                provide: PAGE_HEADER_DEFAULTS,
+                useFactory: () => {
+                    const inherited = inject(PAGE_HEADER_DEFAULTS, { skipSelf: true });
+                    const panel = inject(SlDetailPanel);
+                    /* Getters over signals: a computed in the page-header that reads
+                       `defaults.level` tracks the panel's own resolved level. */
+                    return {
+                        get collapse() {
+                            return inherited.collapse;
+                        },
+                        get level() {
+                            return panel.resolvedLevel();
+                        },
+                        get size() {
+                            return panel.resolvedSize();
+                        },
+                        get variant() {
+                            return inherited.variant;
+                        },
+                    };
+                },
+            },
+        ], queries: [{ propertyName: "sections", predicate: SlDetailPanelSection, descendants: true, isSignal: true }], exportAs: ["slDetailPanel"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=detail-panel]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-detail-panel-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-page-ground, var(--slotted-surface, Canvas));--_aside-size: var(--slotted-detail-panel-aside-size-md, 16rem);--_gap: var(--slotted-detail-panel-gap-md, var(--slotted-space-8, 1.5rem));--_rhythm: var(--slotted-detail-panel-rhythm, var(--slotted-space-8, 1.5rem));--_inset-block: var(--slotted-detail-panel-inset-block-md, var(--slotted-space-8, 1.5rem));--_rule-size: var(--slotted-border-width-thin, 1px);color:var(--_text);container-name:detail-panel;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0;position:relative}[data-ui=detail-panel][data-size=sm]{--_aside-size: var(--slotted-detail-panel-aside-size-sm, 14rem);--_gap: var(--slotted-detail-panel-gap-sm, var(--slotted-space-7, 1.25rem));--_inset-block: var(--slotted-detail-panel-inset-block-sm, var(--slotted-space-7, 1.25rem))}[data-ui=detail-panel][data-size=lg]{--_aside-size: var(--slotted-detail-panel-aside-size-lg, 18rem);--_gap: var(--slotted-detail-panel-gap-lg, var(--slotted-space-9, 2rem));--_inset-block: var(--slotted-detail-panel-inset-block-lg, var(--slotted-space-9, 2rem))}[data-ui=detail-panel][data-scroll=self]{block-size:100%;min-block-size:0;overflow:auto;overscroll-behavior:contain}[data-ui=detail-panel]>[data-part=body]{display:flex;flex:1 0 auto;flex-direction:column;min-inline-size:0;padding-block:var(--_inset-block)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]{row-gap:var(--_rhythm)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=banner]{min-inline-size:0}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]{display:grid;gap:var(--_gap);grid-template-columns:minmax(0,1fr);min-inline-size:0}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]{display:flex;flex-direction:column;gap:var(--_rhythm);min-inline-size:0}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=aside]{border-block-start:var(--_rule-size) solid var(--_rule);min-inline-size:0;overflow-wrap:anywhere;padding-block-start:var(--_gap)}@container detail-panel (min-width: 600px){[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]{grid-template-columns:minmax(0,1fr) var(--_aside-size)}[data-ui=detail-panel][data-aside=start]>[data-part=body]>[data-ui=container]>[data-part=columns]{grid-template-columns:var(--_aside-size) minmax(0,1fr)}[data-ui=detail-panel][data-aside=none]>[data-part=body]>[data-ui=container]>[data-part=columns]{grid-template-columns:minmax(0,1fr)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=aside]{border-block-start:0;border-inline-start:var(--_rule-size) solid var(--_rule);padding-block-start:0;padding-inline-start:var(--_gap)}[data-ui=detail-panel][data-aside=start]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=aside]{border-inline-end:var(--_rule-size) solid var(--_rule);border-inline-start:0;order:-1;padding-inline-end:var(--_gap);padding-inline-start:0}}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section]{min-inline-size:0;scroll-margin-block-start:var(--slotted-page-sticky-top, 0px)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section][hidden]{display:none}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section][role=tabpanel]: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=detail-panel][data-layout=tabs]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section]:not([hidden]){animation:slotted-detail-panel-section-in var(--slotted-duration-short) var(--slotted-easing-enter)}@keyframes slotted-detail-panel-section-in{0%{opacity:0}}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section]>[data-part=section-actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-md, 8px);justify-content:flex-end;margin-block-end:var(--slotted-space-5, .75rem)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=message]{display:grid;min-block-size:calc(4 * var(--slotted-space-12, 4rem));min-inline-size:0;place-items:center}[data-ui=detail-panel]>[data-part=footer]{background-color:var(--_ground);border-block-start:var(--_rule-size) solid var(--_rule);inset-block-end:var(--slotted-page-sticky-bottom, 0px);margin-block-start:auto;padding-block:var(--slotted-space-4, .5rem);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanel, decorators: [{
+            type: Component,
+            args: [{ selector: '[slDetailPanel]', standalone: true, exportAs: 'slDetailPanel', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: PAGE_HEADER_DEFAULTS,
+                            useFactory: () => {
+                                const inherited = inject(PAGE_HEADER_DEFAULTS, { skipSelf: true });
+                                const panel = inject(SlDetailPanel);
+                                /* Getters over signals: a computed in the page-header that reads
+                                   `defaults.level` tracks the panel's own resolved level. */
+                                return {
+                                    get collapse() {
+                                        return inherited.collapse;
+                                    },
+                                    get level() {
+                                        return panel.resolvedLevel();
+                                    },
+                                    get size() {
+                                        return panel.resolvedSize();
+                                    },
+                                    get variant() {
+                                        return inherited.variant;
+                                    },
+                                };
+                            },
+                        },
+                    ], host: {
+                        'data-ui': 'detail-panel',
+                        'data-part': 'root',
+                        '[attr.data-layout]': 'resolvedLayout()',
+                        '[attr.data-aside]': 'resolvedAside()',
+                        '[attr.data-level]': 'resolvedLevel()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-scroll]': 'resolvedScroll()',
+                        '[attr.data-mount]': 'resolvedMount()',
+                        '[attr.data-status]': 'status()',
+                        '[attr.data-loading]': "loading() ? '' : null",
+                        '[attr.aria-busy]': "loading() ? 'true' : null",
+                        '[attr.data-key]': 'recordKey() ?? null',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-label]': 'label()',
+                    }, styles: ["@layer slotted.components{[data-ui=detail-panel]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-detail-panel-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-page-ground, var(--slotted-surface, Canvas));--_aside-size: var(--slotted-detail-panel-aside-size-md, 16rem);--_gap: var(--slotted-detail-panel-gap-md, var(--slotted-space-8, 1.5rem));--_rhythm: var(--slotted-detail-panel-rhythm, var(--slotted-space-8, 1.5rem));--_inset-block: var(--slotted-detail-panel-inset-block-md, var(--slotted-space-8, 1.5rem));--_rule-size: var(--slotted-border-width-thin, 1px);color:var(--_text);container-name:detail-panel;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0;position:relative}[data-ui=detail-panel][data-size=sm]{--_aside-size: var(--slotted-detail-panel-aside-size-sm, 14rem);--_gap: var(--slotted-detail-panel-gap-sm, var(--slotted-space-7, 1.25rem));--_inset-block: var(--slotted-detail-panel-inset-block-sm, var(--slotted-space-7, 1.25rem))}[data-ui=detail-panel][data-size=lg]{--_aside-size: var(--slotted-detail-panel-aside-size-lg, 18rem);--_gap: var(--slotted-detail-panel-gap-lg, var(--slotted-space-9, 2rem));--_inset-block: var(--slotted-detail-panel-inset-block-lg, var(--slotted-space-9, 2rem))}[data-ui=detail-panel][data-scroll=self]{block-size:100%;min-block-size:0;overflow:auto;overscroll-behavior:contain}[data-ui=detail-panel]>[data-part=body]{display:flex;flex:1 0 auto;flex-direction:column;min-inline-size:0;padding-block:var(--_inset-block)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]{row-gap:var(--_rhythm)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=banner]{min-inline-size:0}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]{display:grid;gap:var(--_gap);grid-template-columns:minmax(0,1fr);min-inline-size:0}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]{display:flex;flex-direction:column;gap:var(--_rhythm);min-inline-size:0}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=aside]{border-block-start:var(--_rule-size) solid var(--_rule);min-inline-size:0;overflow-wrap:anywhere;padding-block-start:var(--_gap)}@container detail-panel (min-width: 600px){[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]{grid-template-columns:minmax(0,1fr) var(--_aside-size)}[data-ui=detail-panel][data-aside=start]>[data-part=body]>[data-ui=container]>[data-part=columns]{grid-template-columns:var(--_aside-size) minmax(0,1fr)}[data-ui=detail-panel][data-aside=none]>[data-part=body]>[data-ui=container]>[data-part=columns]{grid-template-columns:minmax(0,1fr)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=aside]{border-block-start:0;border-inline-start:var(--_rule-size) solid var(--_rule);padding-block-start:0;padding-inline-start:var(--_gap)}[data-ui=detail-panel][data-aside=start]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=aside]{border-inline-end:var(--_rule-size) solid var(--_rule);border-inline-start:0;order:-1;padding-inline-end:var(--_gap);padding-inline-start:0}}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section]{min-inline-size:0;scroll-margin-block-start:var(--slotted-page-sticky-top, 0px)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section][hidden]{display:none}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section][role=tabpanel]: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=detail-panel][data-layout=tabs]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section]:not([hidden]){animation:slotted-detail-panel-section-in var(--slotted-duration-short) var(--slotted-easing-enter)}@keyframes slotted-detail-panel-section-in{0%{opacity:0}}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section]>[data-part=section-actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-md, 8px);justify-content:flex-end;margin-block-end:var(--slotted-space-5, .75rem)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=message]{display:grid;min-block-size:calc(4 * var(--slotted-space-12, 4rem));min-inline-size:0;place-items:center}[data-ui=detail-panel]>[data-part=footer]{background-color:var(--_ground);border-block-start:var(--_rule-size) solid var(--_rule);inset-block-end:var(--slotted-page-sticky-bottom, 0px);margin-block-start:auto;padding-block:var(--slotted-space-4, .5rem);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], aside: [{ type: i0.Input, args: [{ isSignal: true, alias: "aside", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], mount: [{ type: i0.Input, args: [{ isSignal: true, alias: "mount", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], recordKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordKey", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: false }] }, { type: i0.Output, args: ["sectionChange"] }], sectionRequest: [{ type: i0.Output, args: ["sectionRequest"] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlDetailPanelSection), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/** How many placeholder lines a waiting section and a waiting aside draw. */
+const SECTION_SKELETON_LINES = 3;
+const ASIDE_SKELETON_LINES = 4;
+/** An alert about the record, above the columns. */
+class SlDetailPanelBanner {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelBanner, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDetailPanelBanner, isStandalone: true, selector: "[slDetailPanelBanner]", host: { attributes: { "data-part": "banner" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelBanner, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slDetailPanelBanner]', standalone: true, host: { 'data-part': 'banner' } }]
+        }] });
+/** What stands in place of the columns when the record is not there: a result-state. */
+class SlDetailPanelMessage {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDetailPanelMessage, isStandalone: true, selector: "[slDetailPanelMessage]", host: { attributes: { "data-part": "message" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelMessage, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDetailPanelMessage]',
+                    standalone: true,
+                    host: { 'data-part': 'message' },
+                }]
+        }] });
+/**
+ * The metadata column beside the sections. An `aside` element, named by
+ * the `aside` message unless the consumer names it; while the panel is loading
+ * it shows four short skeleton lines in place of its content.
+ */
+class SlDetailPanelAside {
+    panel = inject(SlDetailPanel);
+    lines = ASIDE_SKELETON_LINES;
+    written = inject(new HostAttributeToken('aria-label'), { optional: true });
+    name = computed(() => this.written ?? this.panel.t('aside'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelAside, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDetailPanelAside, isStandalone: true, selector: "aside[slDetailPanelAside]", host: { attributes: { "data-part": "aside" }, properties: { "attr.aria-label": "name()" } }, exportAs: ["slDetailPanelAside"], ngImport: i0, template: `@if (panel.loading()) {
+      <span slSkeletonText [lines]="lines" inlineSize="60%"></span>
+    } @else {
+      <ng-content />
+    }`, isInline: true, dependencies: [{ kind: "component", type: SlSkeletonText, selector: "[slSkeletonText]", inputs: ["lines", "animation", "loading", "lastLineSize", "inlineSize"], exportAs: ["slSkeletonText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelAside, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'aside[slDetailPanelAside]',
+                    standalone: true,
+                    exportAs: 'slDetailPanelAside',
+                    imports: [SlSkeletonText],
+                    template: `@if (panel.loading()) {
+      <span slSkeletonText [lines]="lines" inlineSize="60%"></span>
+    } @else {
+      <ng-content />
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'aside',
+                        '[attr.aria-label]': 'name()',
+                    },
+                }]
+        }] });
+/**
+ * The row that stays at the bottom: an action-bar, aligned with the column
+ * above through a container at the page's width and inset.
+ */
+class SlDetailPanelFooter {
+    page = inject(SlPage, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlDetailPanelFooter, isStandalone: true, selector: "footer[slDetailPanelFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slDetailPanelFooter"], ngImport: i0, template: `<div slContainer [size]="page?.resolvedWidth()" [inset]="page?.resolvedInset()">
+    <ng-content />
+  </div>`, isInline: true, 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: SlDetailPanelFooter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'footer[slDetailPanelFooter]',
+                    standalone: true,
+                    exportAs: 'slDetailPanelFooter',
+                    imports: [SlContainer],
+                    template: `<div slContainer [size]="page?.resolvedWidth()" [inset]="page?.resolvedInset()">
+    <ng-content />
+  </div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'footer' },
+                }]
+        }] });
+/**
+ * The column under the header: a container at the page's width and inset,
+ * so the columns align with the header's own; the banner above, the two
+ * columns — the sections and the aside — and, when the record is not
+ * there, the message in their place.
+ *
+ * The sections are the panel's `ng-template[slDetailPanelSection]`s,
+ * rendered here in either shape: a tabpanel wired to the strip's tab, or a
+ * `[slSection]` at the rank below the panel's. Rendering a template is what
+ * lets `mount` and `loading` decide whether the consumer's view exists.
+ */
+class SlDetailPanelBody {
+    panel = inject(SlDetailPanel);
+    page = inject(SlPage, { optional: true });
+    aside = contentChild(SlDetailPanelAside, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aside" }] : /* istanbul ignore next */ []));
+    lines = SECTION_SKELETON_LINES;
+    tabbed = computed(() => this.panel.resolvedLayout() === 'tabs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabbed" }] : /* istanbul ignore next */ []));
+    sectionLevel = computed(() => String(Math.min(Number(this.panel.resolvedLevel()) + 1, 6)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sectionLevel" }] : /* istanbul ignore next */ []));
+    identity(name) {
+        return this.panel.identify()?.(name);
+    }
+    /** Whether a tabbed section's content exists, by the mount axis. */
+    present(name) {
+        const mount = this.panel.resolvedMount();
+        if (mount === 'eager')
+            return true;
+        if (this.panel.current() === name)
+            return true;
+        return mount === 'lazy' && this.panel.hasSeen(name);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDetailPanelBody, isStandalone: true, selector: "[slDetailPanelBody]", host: { attributes: { "data-part": "body" } }, queries: [{ propertyName: "aside", first: true, predicate: SlDetailPanelAside, descendants: true, isSignal: true }], exportAs: ["slDetailPanelBody"], ngImport: i0, template: `<div slContainer [size]="page?.resolvedWidth()" [inset]="page?.resolvedInset()">
+    <ng-content select="[slDetailPanelBanner]" />
+    @if (panel.status() === 'ready') {
+      <div data-part="columns">
+        <div data-part="main">
+          @for (section of panel.sections(); track section.name()) {
+            @if (tabbed()) {
+              <div
+                data-part="section"
+                role="tabpanel"
+                tabindex="0"
+                [attr.id]="identity(section.name())?.panelId"
+                [attr.aria-labelledby]="identity(section.name())?.tabId"
+                [attr.data-name]="section.name()"
+                [attr.data-current]="panel.current() === section.name() ? '' : null"
+                [hidden]="panel.current() !== section.name()"
+              >
+                @if (section.actions(); as actions) {
+                  <div data-part="section-actions">
+                    <ng-container *ngTemplateOutlet="actions" />
+                  </div>
+                }
+                @if (present(section.name())) {
+                  @if (panel.loading()) {
+                    <span slSkeletonText [lines]="lines"></span>
+                  } @else {
+                    <ng-container *ngTemplateOutlet="section.template" />
+                  }
+                }
+              </div>
+            } @else {
+              <div
+                data-part="section"
+                [attr.data-name]="section.name()"
+                [attr.data-current]="panel.current() === section.name() ? '' : null"
+              >
+                <section slSection [level]="sectionLevel()" [size]="panel.resolvedSize()">
+                  <div slSectionHeader>
+                    <div slSectionTitle>
+                      <div slSectionHeading>
+                        {{ section.label() }}&ngsp;
+                        @if (section.count() !== undefined) {
+                          <span
+                            slBadge
+                            [count]="section.count()"
+                            shape="pill"
+                            size="sm"
+                            tone="secondary"
+                            variant="soft"
+                          ></span>
+                        }
+                      </div>
+                    </div>
+                    @if (section.actions(); as actions) {
+                      <div slSectionActions>
+                        <ng-container *ngTemplateOutlet="actions" />
+                      </div>
+                    }
+                  </div>
+                  <div slSectionBody>
+                    @if (panel.loading()) {
+                      <span slSkeletonText [lines]="lines"></span>
+                    } @else {
+                      <ng-container *ngTemplateOutlet="section.template" />
+                    }
+                  </div>
+                </section>
+              </div>
+            }
+          }
+        </div>
+        @if (panel.resolvedAside() !== 'none' && aside() !== undefined) {
+          <ng-content select="aside[slDetailPanelAside]" />
+        }
+      </div>
+    } @else {
+      <ng-content select="[slDetailPanelMessage]" />
+    }
+  </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlBadge, selector: "[slBadge]", inputs: ["tone", "variant", "size", "shape", "live", "count", "max", "showZero", "locale"], exportAs: ["slBadge"] }, { kind: "component", type: SlContainer, selector: "[slContainer]", inputs: ["size", "inset", "align"], exportAs: ["slContainer"] }, { kind: "component", type: SlSection, selector: "[slSection]", inputs: ["size", "level", "ground", "divider", "sticky"], exportAs: ["slSection"] }, { kind: "directive", type: SlSectionActions, selector: "[slSectionActions]" }, { kind: "directive", type: SlSectionBody, selector: "[slSectionBody]" }, { kind: "directive", type: SlSectionHeader, selector: "[slSectionHeader]" }, { kind: "directive", type: SlSectionHeading, selector: "[slSectionHeading]", exportAs: ["slSectionHeading"] }, { kind: "directive", type: SlSectionTitle, selector: "[slSectionTitle]" }, { kind: "component", type: SlSkeletonText, selector: "[slSkeletonText]", inputs: ["lines", "animation", "loading", "lastLineSize", "inlineSize"], exportAs: ["slSkeletonText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelBody, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slDetailPanelBody]',
+                    standalone: true,
+                    exportAs: 'slDetailPanelBody',
+                    imports: [
+                        NgTemplateOutlet,
+                        SlBadge,
+                        SlContainer,
+                        SlSection,
+                        SlSectionActions,
+                        SlSectionBody,
+                        SlSectionHeader,
+                        SlSectionHeading,
+                        SlSectionTitle,
+                        SlSkeletonText,
+                    ],
+                    template: `<div slContainer [size]="page?.resolvedWidth()" [inset]="page?.resolvedInset()">
+    <ng-content select="[slDetailPanelBanner]" />
+    @if (panel.status() === 'ready') {
+      <div data-part="columns">
+        <div data-part="main">
+          @for (section of panel.sections(); track section.name()) {
+            @if (tabbed()) {
+              <div
+                data-part="section"
+                role="tabpanel"
+                tabindex="0"
+                [attr.id]="identity(section.name())?.panelId"
+                [attr.aria-labelledby]="identity(section.name())?.tabId"
+                [attr.data-name]="section.name()"
+                [attr.data-current]="panel.current() === section.name() ? '' : null"
+                [hidden]="panel.current() !== section.name()"
+              >
+                @if (section.actions(); as actions) {
+                  <div data-part="section-actions">
+                    <ng-container *ngTemplateOutlet="actions" />
+                  </div>
+                }
+                @if (present(section.name())) {
+                  @if (panel.loading()) {
+                    <span slSkeletonText [lines]="lines"></span>
+                  } @else {
+                    <ng-container *ngTemplateOutlet="section.template" />
+                  }
+                }
+              </div>
+            } @else {
+              <div
+                data-part="section"
+                [attr.data-name]="section.name()"
+                [attr.data-current]="panel.current() === section.name() ? '' : null"
+              >
+                <section slSection [level]="sectionLevel()" [size]="panel.resolvedSize()">
+                  <div slSectionHeader>
+                    <div slSectionTitle>
+                      <div slSectionHeading>
+                        {{ section.label() }}&ngsp;
+                        @if (section.count() !== undefined) {
+                          <span
+                            slBadge
+                            [count]="section.count()"
+                            shape="pill"
+                            size="sm"
+                            tone="secondary"
+                            variant="soft"
+                          ></span>
+                        }
+                      </div>
+                    </div>
+                    @if (section.actions(); as actions) {
+                      <div slSectionActions>
+                        <ng-container *ngTemplateOutlet="actions" />
+                      </div>
+                    }
+                  </div>
+                  <div slSectionBody>
+                    @if (panel.loading()) {
+                      <span slSkeletonText [lines]="lines"></span>
+                    } @else {
+                      <ng-container *ngTemplateOutlet="section.template" />
+                    }
+                  </div>
+                </section>
+              </div>
+            }
+          }
+        </div>
+        @if (panel.resolvedAside() !== 'none' && aside() !== undefined) {
+          <ng-content select="aside[slDetailPanelAside]" />
+        }
+      </div>
+    } @else {
+      <ng-content select="[slDetailPanelMessage]" />
+    }
+  </div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'body' },
+                }]
+        }], propDecorators: { aside: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlDetailPanelAside), { isSignal: true }] }] } });
+/**
+ * The strip: a `[slTabs]` list rendered from the panel's sections, placed
+ * on the element in the page-header's tabs slot — `slPageHeaderTabs` is a
+ * host directive, so the element is that slot. It holds the list alone; the
+ * panels are the body's sections, wired by the ids this strip hands the
+ * panel. A toolbar beside the list is the consumer's own `[slTabActions]`
+ * element, projected into the strip. Under `layout="stacked"` it renders
+ * nothing.
+ */
+class SlDetailPanelTabs {
+    /** The list's accessible name. */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    panel = inject(SlDetailPanel);
+    tabs = viewChild(SlTabs, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* The strip hands the panel its ids, so the sections can be wired to the tabs. */
+        effect((onCleanup) => {
+            const tabs = this.tabs();
+            untracked(() => this.panel.identify.set(tabs === undefined ? undefined : (name) => tabs.identify(name)));
+            onCleanup(() => this.panel.identify.set(undefined));
+        });
+    }
+    forward(request) {
+        if (request.value === undefined)
+            return;
+        this.panel.select(request.value, request.reason, request.source);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDetailPanelTabs, isStandalone: true, selector: "[slDetailPanelTabs]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "tabs", first: true, predicate: SlTabs, descendants: true, isSignal: true }], exportAs: ["slDetailPanelTabs"], hostDirectives: [{ directive: i1.SlPageHeaderTabs }], ngImport: i0, template: `@if (panel.resolvedLayout() === 'tabs') {
+    <div slTabs track="none" [value]="panel.current()" (valueChange)="forward($event)">
+      <div slTabList [attr.aria-label]="label()">
+        @for (section of panel.sections(); track section.name()) {
+          <div slTab [value]="section.name()" [disabled]="section.disabled()">
+            {{ section.label() }}&ngsp;
+            @if (section.count() !== undefined) {
+              <span
+                slBadge
+                [count]="section.count()"
+                shape="pill"
+                size="sm"
+                tone="secondary"
+                variant="soft"
+              ></span>
+            }
+          </div>
+        }
+      </div>
+      <ng-content select="[slTabActions]" />
+    </div>
+  }`, isInline: true, dependencies: [{ kind: "component", type: SlBadge, selector: "[slBadge]", inputs: ["tone", "variant", "size", "shape", "live", "count", "max", "showZero", "locale"], exportAs: ["slBadge"] }, { kind: "component", type: SlTab, selector: "[slTab]", inputs: ["value", "disabled", "dismissible", "dismissLabel", "href", "controls"], exportAs: ["slTab"] }, { kind: "directive", type: SlTabList, selector: "[slTabList]", exportAs: ["slTabList"] }, { kind: "component", type: SlTabs, selector: "[slTabs]", inputs: ["value", "defaultValue", "activation", "orientation", "size", "variant", "track", "fit", "mount", "loop", "disabled"], outputs: ["valueChange", "tabDismiss"], exportAs: ["slTabs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelTabs, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slDetailPanelTabs]',
+                    standalone: true,
+                    exportAs: 'slDetailPanelTabs',
+                    hostDirectives: [SlPageHeaderTabs],
+                    imports: [SlBadge, SlTab, SlTabList, SlTabs],
+                    template: `@if (panel.resolvedLayout() === 'tabs') {
+    <div slTabs track="none" [value]="panel.current()" (valueChange)="forward($event)">
+      <div slTabList [attr.aria-label]="label()">
+        @for (section of panel.sections(); track section.name()) {
+          <div slTab [value]="section.name()" [disabled]="section.disabled()">
+            {{ section.label() }}&ngsp;
+            @if (section.count() !== undefined) {
+              <span
+                slBadge
+                [count]="section.count()"
+                shape="pill"
+                size="sm"
+                tone="secondary"
+                variant="soft"
+              ></span>
+            }
+          </div>
+        }
+      </div>
+      <ng-content select="[slTabActions]" />
+    </div>
+  }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], tabs: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SlTabs), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DETAIL_PANEL_DEFAULTS, SlDetailPanel, SlDetailPanelAside, SlDetailPanelBanner, SlDetailPanelBody, SlDetailPanelFooter, SlDetailPanelIdFactory, SlDetailPanelMessage, SlDetailPanelSection, SlDetailPanelTabs, injectDetailPanelDefaults, provideDetailPanelDefaults };
+//# sourceMappingURL=slotted-angular-detail-panel.mjs.map