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

package/fesm2022/slotted-angular-section.mjs

@@ -0,0 +1,266 @@
+import * as i1 from '@slotted/angular/typography';
+import { SlHeadingLevel } from '@slotted/angular/typography';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, booleanAttribute, HostAttributeToken, signal, ElementRef, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+
+const FALLBACK = {
+    divider: false,
+    ground: 'none',
+    size: 'md',
+    sticky: false,
+};
+const SECTION_DEFAULTS = new InjectionToken('slotted section defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its sections separate — a rule, a surface,
+ * the step of their headings — rather than repeating the same inputs on every
+ * one. A section that states any of them itself still wins.
+ */
+function provideSectionDefaults(defaults) {
+    return {
+        provide: SECTION_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a section renders as here, before it states anything of its own. */
+function injectSectionDefaults() {
+    return inject(SECTION_DEFAULTS);
+}
+/** Application-scoped, for the reason `field` records: the server and the client sequences must match. */
+class SlSectionIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-section-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * One unit of content inside a page: a header — eyebrow, heading,
+ * description, actions — and a body one outline step deeper.
+ *
+ * **The rank is the outline's.** `typography` owns it: the heading takes the
+ * rank `slHeadingLevel` gives — `h2` directly in a page body, one deeper
+ * inside another section's body — unless `level` says otherwise. The element
+ * is the consumer's: `<h2 slSectionHeading>` is a native heading and the
+ * directive adds nothing to it; `<div slSectionHeading>` gets `role="heading"`
+ * and the level the section resolved.
+ *
+ * **A region only when it has a name.** The root is `aria-labelledby` its
+ * heading once one is rendered, which makes the `section` a region landmark.
+ *
+ * **The hooks anchor navigation needs.** The root carries an `id`, the
+ * consumer's own or a generated one, and a scroll margin the height of the
+ * page's fixed chrome, so a hash link lands under the header.
+ */
+/** The measured height of a sticky section's header, written on the root. */
+const HEADER_SIZE_PROPERTY = '--slotted-section-header-size';
+class SlSection {
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Defaults to `auto`: the rank the outline gives. */
+    level = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    ground = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ground" }] : /* istanbul ignore next */ []));
+    divider = input(undefined, { ...(ngDevMode ? { debugName: "divider" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    sticky = input(undefined, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    defaults = injectSectionDefaults();
+    outline = inject(SlHeadingLevel, { optional: true });
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    generated = inject(SlSectionIdFactory).next();
+    /** Whether a heading is rendered, which is what makes the section a region. */
+    hasHeading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasHeading" }] : /* istanbul ignore next */ []));
+    /** The header element, handed over by `slSectionHeader`, so a sticky header can be measured. */
+    header = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    native = inject(ElementRef).nativeElement;
+    id = computed(() => this.writtenId ?? this.generated, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    headingId = computed(() => `${this.id()}-heading`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headingId" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedGround = computed(() => this.ground() ?? this.defaults.ground, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedGround" }] : /* istanbul ignore next */ []));
+    resolvedDivider = computed(() => (this.divider() ?? this.defaults.divider) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDivider" }] : /* istanbul ignore next */ []));
+    resolvedSticky = computed(() => (this.sticky() ?? this.defaults.sticky) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSticky" }] : /* istanbul ignore next */ []));
+    resolvedLevel = computed(() => {
+        const level = this.level();
+        if (level === undefined || level === 'auto')
+            return this.outline?.level ?? 1;
+        return Number(level);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLevel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /**
+         * A sticky header is chrome for what is under it: its height, measured,
+         * goes on the root as `--slotted-section-header-size`, and the stylesheet
+         * republishes `--slotted-page-sticky-top` for the body as page plus
+         * header, so a table's column header or a nested section stops under this
+         * header. Written on the element, so a resize costs no change detection.
+         */
+        effect((onCleanup) => {
+            const header = this.header();
+            if (!this.resolvedSticky() || header === null)
+                return;
+            /* Rounded up: a fractional height rounded down leaves a hairline gap the rows show through. */
+            const write = () => this.native.style.setProperty(HEADER_SIZE_PROPERTY, `${Math.ceil(header.getBoundingClientRect().height || header.offsetHeight)}px`);
+            write();
+            const sizes = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(write);
+            sizes?.observe(header);
+            onCleanup(() => {
+                sizes?.disconnect();
+                this.native.style.removeProperty(HEADER_SIZE_PROPERTY);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlSection, isStandalone: true, selector: "[slSection]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, ground: { classPropertyName: "ground", publicName: "ground", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "section", "data-part": "root" }, properties: { "attr.id": "id()", "attr.aria-labelledby": "hasHeading() ? headingId() : null", "attr.data-size": "resolvedSize()", "attr.data-level": "resolvedLevel()", "attr.data-ground": "resolvedGround()", "attr.data-divider": "resolvedDivider() ? '' : null", "attr.data-sticky": "resolvedSticky() ? '' : null" } }, exportAs: ["slSection"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=section]{--_gap: var(--slotted-section-gap, var(--slotted-space-5, .75rem));--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-section-border, var(--slotted-border-subtle, ButtonBorder));--_heading-size: var(--slotted-section-heading-size-md, var(--slotted-font-size-lg, 1rem));--_heading-line-height: var(--slotted-line-height-lg, 1.5);--_ground: var(--slotted-page-ground, var(--slotted-surface, Canvas));color:var(--_text);display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);gap:var(--_gap);min-inline-size:0;scroll-margin-block-start:var(--slotted-page-sticky-top, 0px)}[data-ui=section][data-size=sm]{--_heading-size: var(--slotted-section-heading-size-sm, var(--slotted-font-size-md, .875rem));--_heading-line-height: var(--slotted-line-height-md, 1.5)}[data-ui=section][data-size=lg]{--_heading-size: var(--slotted-section-heading-size-lg, var(--slotted-font-size-xl, 1.125rem));--_heading-line-height: var(--slotted-line-height-xl, 1.45)}[data-ui=section][data-ground=surface]{--_ground: var(--slotted-section-surface, var(--slotted-surface-raised, Canvas));--slotted-ground: var(--_ground);background-color:var(--_ground);border:var(--slotted-border-width-thin, 1px) solid var(--_rule);border-radius:var(--slotted-section-radius, var(--slotted-radius-lg, 8px));padding:var(--slotted-section-inset, var(--slotted-space-6, 1rem))}[data-ui=section]>[data-part=header]{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--slotted-space-3, .375rem) var(--slotted-space-6, 1rem);min-inline-size:0}[data-ui=section][data-divider]>[data-part=header]{border-block-end:var(--slotted-border-width-thin, 1px) solid var(--_rule);padding-block-end:var(--slotted-space-4, .5rem)}[data-ui=section][data-sticky]>[data-part=header]{background-color:var(--_ground);inset-block-start:var(--slotted-page-sticky-top, 0px);margin-block-start:calc(-1 * var(--slotted-space-4, .5rem));padding-block-start:var(--slotted-space-4, .5rem);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=section][data-sticky]{--_above: var(--slotted-page-sticky-top, 0px)}[data-ui=section][data-sticky]>[data-part=body]{--slotted-page-sticky-top: calc(var(--_above) + var(--slotted-section-header-size, 0px));--slotted-table-sticky-offset: var(--slotted-page-sticky-top)}[data-ui=section]>[data-part=header]>[data-part=title]{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-inline-size:0}[data-ui=section]>[data-part=header]>[data-part=title]>[data-part=eyebrow]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:.06em;line-height:var(--slotted-line-height-xs, 1.4);text-transform:uppercase}[data-ui=section]>[data-part=header]>[data-part=title]>[data-part=heading]{color:var(--_text);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;line-height:var(--_heading-line-height);margin:0;min-inline-size:0;overflow-wrap:anywhere;text-wrap:pretty}[data-ui=section]>[data-part=header]>[data-part=title]>[data-part=description]{color:var(--_muted);font-size:var(--slotted-font-size-sm, .8125rem);line-height:var(--slotted-line-height-sm, 1.45);margin:0;max-inline-size:var(--slotted-section-description-measure, 70ch);text-wrap:pretty}[data-ui=section]>[data-part=header]>[data-part=actions]{align-items:center;display:flex;flex:none;gap:var(--slotted-control-gap-md, 8px);margin-inline-start:auto}[data-ui=section]>[data-part=header]>[data-part=actions]:empty{display:none}[data-ui=section]>[data-part=body]{min-inline-size:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSection, decorators: [{
+            type: Component,
+            args: [{ selector: '[slSection]', standalone: true, exportAs: 'slSection', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'section',
+                        'data-part': 'root',
+                        '[attr.id]': 'id()',
+                        '[attr.aria-labelledby]': 'hasHeading() ? headingId() : null',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-level]': 'resolvedLevel()',
+                        '[attr.data-ground]': 'resolvedGround()',
+                        '[attr.data-divider]': "resolvedDivider() ? '' : null",
+                        '[attr.data-sticky]': "resolvedSticky() ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=section]{--_gap: var(--slotted-section-gap, var(--slotted-space-5, .75rem));--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-section-border, var(--slotted-border-subtle, ButtonBorder));--_heading-size: var(--slotted-section-heading-size-md, var(--slotted-font-size-lg, 1rem));--_heading-line-height: var(--slotted-line-height-lg, 1.5);--_ground: var(--slotted-page-ground, var(--slotted-surface, Canvas));color:var(--_text);display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);gap:var(--_gap);min-inline-size:0;scroll-margin-block-start:var(--slotted-page-sticky-top, 0px)}[data-ui=section][data-size=sm]{--_heading-size: var(--slotted-section-heading-size-sm, var(--slotted-font-size-md, .875rem));--_heading-line-height: var(--slotted-line-height-md, 1.5)}[data-ui=section][data-size=lg]{--_heading-size: var(--slotted-section-heading-size-lg, var(--slotted-font-size-xl, 1.125rem));--_heading-line-height: var(--slotted-line-height-xl, 1.45)}[data-ui=section][data-ground=surface]{--_ground: var(--slotted-section-surface, var(--slotted-surface-raised, Canvas));--slotted-ground: var(--_ground);background-color:var(--_ground);border:var(--slotted-border-width-thin, 1px) solid var(--_rule);border-radius:var(--slotted-section-radius, var(--slotted-radius-lg, 8px));padding:var(--slotted-section-inset, var(--slotted-space-6, 1rem))}[data-ui=section]>[data-part=header]{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--slotted-space-3, .375rem) var(--slotted-space-6, 1rem);min-inline-size:0}[data-ui=section][data-divider]>[data-part=header]{border-block-end:var(--slotted-border-width-thin, 1px) solid var(--_rule);padding-block-end:var(--slotted-space-4, .5rem)}[data-ui=section][data-sticky]>[data-part=header]{background-color:var(--_ground);inset-block-start:var(--slotted-page-sticky-top, 0px);margin-block-start:calc(-1 * var(--slotted-space-4, .5rem));padding-block-start:var(--slotted-space-4, .5rem);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=section][data-sticky]{--_above: var(--slotted-page-sticky-top, 0px)}[data-ui=section][data-sticky]>[data-part=body]{--slotted-page-sticky-top: calc(var(--_above) + var(--slotted-section-header-size, 0px));--slotted-table-sticky-offset: var(--slotted-page-sticky-top)}[data-ui=section]>[data-part=header]>[data-part=title]{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-inline-size:0}[data-ui=section]>[data-part=header]>[data-part=title]>[data-part=eyebrow]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:.06em;line-height:var(--slotted-line-height-xs, 1.4);text-transform:uppercase}[data-ui=section]>[data-part=header]>[data-part=title]>[data-part=heading]{color:var(--_text);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;line-height:var(--_heading-line-height);margin:0;min-inline-size:0;overflow-wrap:anywhere;text-wrap:pretty}[data-ui=section]>[data-part=header]>[data-part=title]>[data-part=description]{color:var(--_muted);font-size:var(--slotted-font-size-sm, .8125rem);line-height:var(--slotted-line-height-sm, 1.45);margin:0;max-inline-size:var(--slotted-section-description-measure, 70ch);text-wrap:pretty}[data-ui=section]>[data-part=header]>[data-part=actions]{align-items:center;display:flex;flex:none;gap:var(--slotted-control-gap-md, 8px);margin-inline-start:auto}[data-ui=section]>[data-part=header]>[data-part=actions]:empty{display:none}[data-ui=section]>[data-part=body]{min-inline-size:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], ground: [{ type: i0.Input, args: [{ isSignal: true, alias: "ground", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }] } });
+
+const HEADINGS = new Set(['H1', 'H2', 'H3', 'H4', 'H5', 'H6']);
+/**
+ * The row above the body: the title column and the actions. It hands the
+ * root its element, so a sticky header's height reaches the stylesheet.
+ */
+class SlSectionHeader {
+    section = inject(SlSection);
+    native = inject(ElementRef).nativeElement;
+    ngOnInit() {
+        this.section.header.set(this.native);
+    }
+    ngOnDestroy() {
+        if (this.section.header() === this.native)
+            this.section.header.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSectionHeader, isStandalone: true, selector: "[slSectionHeader]", host: { attributes: { "data-part": "header" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionHeader, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slSectionHeader]', standalone: true, host: { 'data-part': 'header' } }]
+        }] });
+/** Eyebrow, heading, description, in that order. */
+class SlSectionTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSectionTitle, isStandalone: true, selector: "[slSectionTitle]", host: { attributes: { "data-part": "title" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionTitle, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slSectionTitle]', standalone: true, host: { 'data-part': 'title' } }]
+        }] });
+/** A short overline above the heading — a count, a category. Structural, not status. */
+class SlSectionEyebrow {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionEyebrow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSectionEyebrow, isStandalone: true, selector: "[slSectionEyebrow]", host: { attributes: { "data-part": "eyebrow" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionEyebrow, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slSectionEyebrow]', standalone: true, host: { 'data-part': 'eyebrow' } }]
+        }] });
+/** A paragraph under the heading, in the muted text, with a measure. */
+class SlSectionDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSectionDescription, isStandalone: true, selector: "[slSectionDescription]", host: { attributes: { "data-part": "description" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slSectionDescription]',
+                    standalone: true,
+                    host: { 'data-part': 'description' },
+                }]
+        }] });
+/** The end of the header row: a button, a toolbar, a link. */
+class SlSectionActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSectionActions, isStandalone: true, selector: "[slSectionActions]", host: { attributes: { "data-part": "actions" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionActions, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slSectionActions]', standalone: true, host: { 'data-part': 'actions' } }]
+        }] });
+/**
+ * The heading, at the rank the section resolved. Rendering it is what makes
+ * the section a region: the root names it through `aria-labelledby`. The
+ * element is the consumer's own — a native heading gets nothing added, and
+ * anything else gets `role="heading"` and `aria-level`.
+ */
+class SlSectionHeading {
+    section = inject(SlSection);
+    native = inject(ElementRef).nativeElement;
+    isNativeHeading = HEADINGS.has(this.native.tagName);
+    ariaRole = computed(() => (this.isNativeHeading ? null : 'heading'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRole" }] : /* istanbul ignore next */ []));
+    ariaLevel = computed(() => this.isNativeHeading ? null : this.section.resolvedLevel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLevel" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.section.hasHeading.set(true);
+    }
+    ngOnDestroy() {
+        this.section.hasHeading.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionHeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSectionHeading, isStandalone: true, selector: "[slSectionHeading]", host: { attributes: { "data-part": "heading" }, properties: { "attr.id": "section.headingId()", "attr.role": "ariaRole()", "attr.aria-level": "ariaLevel()" } }, exportAs: ["slSectionHeading"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionHeading, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slSectionHeading]',
+                    standalone: true,
+                    exportAs: 'slSectionHeading',
+                    host: {
+                        'data-part': 'heading',
+                        '[attr.id]': 'section.headingId()',
+                        '[attr.role]': 'ariaRole()',
+                        '[attr.aria-level]': 'ariaLevel()',
+                    },
+                }]
+        }] });
+/** The content, one outline step deeper: `slHeadingLevel` is a host directive. */
+class SlSectionBody {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSectionBody, isStandalone: true, selector: "[slSectionBody]", host: { attributes: { "data-part": "body" } }, hostDirectives: [{ directive: i1.SlHeadingLevel }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSectionBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slSectionBody]',
+                    standalone: true,
+                    hostDirectives: [SlHeadingLevel],
+                    host: { 'data-part': 'body' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HEADER_SIZE_PROPERTY, SECTION_DEFAULTS, SlSection, SlSectionActions, SlSectionBody, SlSectionDescription, SlSectionEyebrow, SlSectionHeader, SlSectionHeading, SlSectionIdFactory, SlSectionTitle, injectSectionDefaults, provideSectionDefaults };
+//# sourceMappingURL=slotted-angular-section.mjs.map

package/fesm2022/slotted-angular-section.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-section.mjs","sources":["../../section/src/section-defaults.ts","../../section/src/section.ts","../../section/src/section-parts.ts","../../section/src/slotted-angular-section.ts"],"sourcesContent":["import { inject, Injectable, InjectionToken } from '@angular/core';\n\n/** The type step the heading sits at, independent of its rank. */\nexport type SectionSize = 'sm' | 'md' | 'lg';\n\n/** The rank of the heading. `auto` takes the one the outline gives. */\nexport type SectionLevel = 'auto' | '1' | '2' | '3' | '4' | '5' | '6';\n\n/** The ground: nothing, or a surface with an edge and a radius and no shadow. */\nexport type SectionGround = 'none' | 'surface';\n\nexport interface SectionDefaults {\n  divider: boolean;\n  ground: SectionGround;\n  size: SectionSize;\n  sticky: boolean;\n}\n\nconst FALLBACK: SectionDefaults = {\n  divider: false,\n  ground: 'none',\n  size: 'md',\n  sticky: false,\n};\n\nexport const SECTION_DEFAULTS = new InjectionToken<SectionDefaults>('slotted section defaults', {\n  providedIn: 'root',\n  factory: () => FALLBACK,\n});\n\n/**\n * An application decides once how its sections separate — a rule, a surface,\n * the step of their headings — rather than repeating the same inputs on every\n * one. A section that states any of them itself still wins.\n */\nexport function provideSectionDefaults(defaults: Partial<SectionDefaults>) {\n  return {\n    provide: SECTION_DEFAULTS,\n    useFactory: (): SectionDefaults => ({ ...FALLBACK, ...defaults }),\n  };\n}\n\n/** What a section renders as here, before it states anything of its own. */\nexport function injectSectionDefaults(): SectionDefaults {\n  return inject(SECTION_DEFAULTS);\n}\n\n/** Application-scoped, for the reason `field` records: the server and the client sequences must match. */\n@Injectable({ providedIn: 'root' })\nexport class SlSectionIdFactory {\n  private count = 0;\n\n  next() {\n    this.count += 1;\n    return `slotted-section-${this.count}`;\n  }\n}\n","import { SlHeadingLevel } from '@slotted/angular/typography';\nimport type { HeadingLevelValue } from '@slotted/angular/typography';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  HostAttributeToken,\n  inject,\n  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { injectSectionDefaults, SlSectionIdFactory } from './section-defaults';\nimport type { SectionGround, SectionLevel, SectionSize } from './section-defaults';\n\nexport type { SectionDefaults, SectionGround, SectionLevel, SectionSize } from './section-defaults';\n\n/**\n * One unit of content inside a page: a header — eyebrow, heading,\n * description, actions — and a body one outline step deeper.\n *\n * **The rank is the outline's.** `typography` owns it: the heading takes the\n * rank `slHeadingLevel` gives — `h2` directly in a page body, one deeper\n * inside another section's body — unless `level` says otherwise. The element\n * is the consumer's: `<h2 slSectionHeading>` is a native heading and the\n * directive adds nothing to it; `<div slSectionHeading>` gets `role=\"heading\"`\n * and the level the section resolved.\n *\n * **A region only when it has a name.** The root is `aria-labelledby` its\n * heading once one is rendered, which makes the `section` a region landmark.\n *\n * **The hooks anchor navigation needs.** The root carries an `id`, the\n * consumer's own or a generated one, and a scroll margin the height of the\n * page's fixed chrome, so a hash link lands under the header.\n */\n/** The measured height of a sticky section's header, written on the root. */\nexport const HEADER_SIZE_PROPERTY = '--slotted-section-header-size';\n\n@Component({\n  selector: '[slSection]',\n  standalone: true,\n  exportAs: 'slSection',\n  template: '<ng-content />',\n  styleUrl: '../../../styles/src/section/section.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'section',\n    'data-part': 'root',\n    '[attr.id]': 'id()',\n    '[attr.aria-labelledby]': 'hasHeading() ? headingId() : null',\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-level]': 'resolvedLevel()',\n    '[attr.data-ground]': 'resolvedGround()',\n    '[attr.data-divider]': \"resolvedDivider() ? '' : null\",\n    '[attr.data-sticky]': \"resolvedSticky() ? '' : null\",\n  },\n})\nexport class SlSection {\n  readonly size = input<SectionSize | undefined>(undefined);\n  /** Defaults to `auto`: the rank the outline gives. */\n  readonly level = input<SectionLevel | undefined>(undefined);\n  readonly ground = input<SectionGround | undefined>(undefined);\n  readonly divider = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (state) => (state === undefined ? undefined : booleanAttribute(state)),\n  });\n  readonly sticky = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (state) => (state === undefined ? undefined : booleanAttribute(state)),\n  });\n\n  private readonly defaults = injectSectionDefaults();\n  private readonly outline = inject(SlHeadingLevel, { optional: true });\n  private readonly writtenId = inject(new HostAttributeToken('id'), { optional: true });\n  private readonly generated = inject(SlSectionIdFactory).next();\n\n  /** Whether a heading is rendered, which is what makes the section a region. */\n  readonly hasHeading = signal(false);\n  /** The header element, handed over by `slSectionHeader`, so a sticky header can be measured. */\n  readonly header = signal<HTMLElement | null>(null);\n\n  private readonly native: HTMLElement = inject(ElementRef).nativeElement;\n\n  readonly id = computed(() => this.writtenId ?? this.generated);\n  readonly headingId = computed(() => `${this.id()}-heading`);\n  readonly resolvedSize = computed(() => this.size() ?? this.defaults.size);\n  readonly resolvedGround = computed(() => this.ground() ?? this.defaults.ground);\n  readonly resolvedDivider = computed(() => (this.divider() ?? this.defaults.divider) === true);\n  readonly resolvedSticky = computed(() => (this.sticky() ?? this.defaults.sticky) === true);\n  readonly resolvedLevel = computed<HeadingLevelValue>(() => {\n    const level = this.level();\n    if (level === undefined || level === 'auto') return this.outline?.level ?? 1;\n    return Number(level) as HeadingLevelValue;\n  });\n\n  constructor() {\n    /**\n     * A sticky header is chrome for what is under it: its height, measured,\n     * goes on the root as `--slotted-section-header-size`, and the stylesheet\n     * republishes `--slotted-page-sticky-top` for the body as page plus\n     * header, so a table's column header or a nested section stops under this\n     * header. Written on the element, so a resize costs no change detection.\n     */\n    effect((onCleanup) => {\n      const header = this.header();\n      if (!this.resolvedSticky() || header === null) return;\n      /* Rounded up: a fractional height rounded down leaves a hairline gap the rows show through. */\n      const write = () =>\n        this.native.style.setProperty(\n          HEADER_SIZE_PROPERTY,\n          `${Math.ceil(header.getBoundingClientRect().height || header.offsetHeight)}px`,\n        );\n      write();\n      const sizes = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(write);\n      sizes?.observe(header);\n      onCleanup(() => {\n        sizes?.disconnect();\n        this.native.style.removeProperty(HEADER_SIZE_PROPERTY);\n      });\n    });\n  }\n}\n","import { SlHeadingLevel } from '@slotted/angular/typography';\nimport { computed, Directive, ElementRef, inject } from '@angular/core';\nimport type { OnDestroy, OnInit } from '@angular/core';\n\nimport { SlSection } from './section';\n\nconst HEADINGS = new Set(['H1', 'H2', 'H3', 'H4', 'H5', 'H6']);\n\n/**\n * The row above the body: the title column and the actions. It hands the\n * root its element, so a sticky header's height reaches the stylesheet.\n */\n@Directive({ selector: '[slSectionHeader]', standalone: true, host: { 'data-part': 'header' } })\nexport class SlSectionHeader implements OnInit, OnDestroy {\n  private readonly section = inject(SlSection);\n  private readonly native: HTMLElement = inject(ElementRef).nativeElement;\n\n  ngOnInit() {\n    this.section.header.set(this.native);\n  }\n\n  ngOnDestroy() {\n    if (this.section.header() === this.native) this.section.header.set(null);\n  }\n}\n\n/** Eyebrow, heading, description, in that order. */\n@Directive({ selector: '[slSectionTitle]', standalone: true, host: { 'data-part': 'title' } })\nexport class SlSectionTitle {}\n\n/** A short overline above the heading — a count, a category. Structural, not status. */\n@Directive({ selector: '[slSectionEyebrow]', standalone: true, host: { 'data-part': 'eyebrow' } })\nexport class SlSectionEyebrow {}\n\n/** A paragraph under the heading, in the muted text, with a measure. */\n@Directive({\n  selector: '[slSectionDescription]',\n  standalone: true,\n  host: { 'data-part': 'description' },\n})\nexport class SlSectionDescription {}\n\n/** The end of the header row: a button, a toolbar, a link. */\n@Directive({ selector: '[slSectionActions]', standalone: true, host: { 'data-part': 'actions' } })\nexport class SlSectionActions {}\n\n/**\n * The heading, at the rank the section resolved. Rendering it is what makes\n * the section a region: the root names it through `aria-labelledby`. The\n * element is the consumer's own — a native heading gets nothing added, and\n * anything else gets `role=\"heading\"` and `aria-level`.\n */\n@Directive({\n  selector: '[slSectionHeading]',\n  standalone: true,\n  exportAs: 'slSectionHeading',\n  host: {\n    'data-part': 'heading',\n    '[attr.id]': 'section.headingId()',\n    '[attr.role]': 'ariaRole()',\n    '[attr.aria-level]': 'ariaLevel()',\n  },\n})\nexport class SlSectionHeading implements OnInit, OnDestroy {\n  protected readonly section = inject(SlSection);\n  private readonly native: HTMLElement = inject(ElementRef).nativeElement;\n  private readonly isNativeHeading = HEADINGS.has(this.native.tagName);\n\n  protected readonly ariaRole = computed(() => (this.isNativeHeading ? null : 'heading'));\n  protected readonly ariaLevel = computed(() =>\n    this.isNativeHeading ? null : this.section.resolvedLevel(),\n  );\n\n  ngOnInit() {\n    this.section.hasHeading.set(true);\n  }\n\n  ngOnDestroy() {\n    this.section.hasHeading.set(false);\n  }\n}\n\n/** The content, one outline step deeper: `slHeadingLevel` is a host directive. */\n@Directive({\n  selector: '[slSectionBody]',\n  standalone: true,\n  hostDirectives: [SlHeadingLevel],\n  host: { 'data-part': 'body' },\n})\nexport class SlSectionBody {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,QAAQ,GAAoB;AAChC,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,MAAM,EAAE,MAAM;AACd,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,MAAM,EAAE,KAAK;CACd;MAEY,gBAAgB,GAAG,IAAI,cAAc,CAAkB,0BAA0B,EAAE;AAC9F,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,QAAQ;AACxB,CAAA;AAED;;;;AAIG;AACG,SAAU,sBAAsB,CAAC,QAAkC,EAAA;IACvE,OAAO;AACL,QAAA,OAAO,EAAE,gBAAgB;AACzB,QAAA,UAAU,EAAE,OAAwB,EAAE,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;KAClE;AACH;AAEA;SACgB,qBAAqB,GAAA;AACnC,IAAA,OAAO,MAAM,CAAC,gBAAgB,CAAC;AACjC;AAEA;MAEa,kBAAkB,CAAA;IACrB,KAAK,GAAG,CAAC;IAEjB,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC;AACf,QAAA,OAAO,CAAA,gBAAA,EAAmB,IAAI,CAAC,KAAK,EAAE;IACxC;uGANW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,cADL,MAAM,EAAA,CAAA;;2FACnB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAD9B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;AC3BlC;;;;;;;;;;;;;;;;;AAiBG;AACH;AACO,MAAM,oBAAoB,GAAG;MAsBvB,SAAS,CAAA;IACX,IAAI,GAAG,KAAK,CAA0B,SAAS;6EAAC;;IAEhD,KAAK,GAAG,KAAK,CAA2B,SAAS;8EAAC;IAClD,MAAM,GAAG,KAAK,CAA4B,SAAS;+EAAC;AACpD,IAAA,OAAO,GAAG,KAAK,CAAoD,SAAS,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,SAAA,EAAA,8BAAA,EAAA,CAAA,EACnF,SAAS,EAAE,CAAC,KAAK,MAAM,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC,GACjF;AACO,IAAA,MAAM,GAAG,KAAK,CAAoD,SAAS,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,CAAA,EAClF,SAAS,EAAE,CAAC,KAAK,MAAM,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC,GACjF;IAEe,QAAQ,GAAG,qBAAqB,EAAE;IAClC,OAAO,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACpD,IAAA,SAAS,GAAG,MAAM,CAAC,IAAI,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACpE,SAAS,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,EAAE;;IAGrD,UAAU,GAAG,MAAM,CAAC,KAAK;mFAAC;;IAE1B,MAAM,GAAG,MAAM,CAAqB,IAAI;+EAAC;AAEjC,IAAA,MAAM,GAAgB,MAAM,CAAC,UAAU,CAAC,CAAC,aAAa;AAE9D,IAAA,EAAE,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS;2EAAC;IACrD,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,IAAI,CAAC,EAAE,EAAE,CAAA,QAAA,CAAU;kFAAC;AAClD,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI;qFAAC;AAChE,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM;uFAAC;AACtE,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,MAAM,IAAI;wFAAC;AACpF,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,MAAM,IAAI;uFAAC;AACjF,IAAA,aAAa,GAAG,QAAQ,CAAoB,MAAK;AACxD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,MAAM;AAAE,YAAA,OAAO,IAAI,CAAC,OAAO,EAAE,KAAK,IAAI,CAAC;AAC5E,QAAA,OAAO,MAAM,CAAC,KAAK,CAAsB;IAC3C,CAAC;sFAAC;AAEF,IAAA,WAAA,GAAA;AACE;;;;;;AAMG;AACH,QAAA,MAAM,CAAC,CAAC,SAAS,KAAI;AACnB,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;YAC5B,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,MAAM,KAAK,IAAI;gBAAE;;AAE/C,YAAA,MAAM,KAAK,GAAG,MACZ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAC3B,oBAAoB,EACpB,CAAA,EAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,CAAA,EAAA,CAAI,CAC/E;AACH,YAAA,KAAK,EAAE;AACP,YAAA,MAAM,KAAK,GAAG,OAAO,cAAc,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,cAAc,CAAC,KAAK,CAAC;AACtF,YAAA,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC;YACtB,SAAS,CAAC,MAAK;gBACb,KAAK,EAAE,UAAU,EAAE;gBACnB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;AACxD,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;uGA7DW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,8kCAhBV,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,qyHAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAgBf,SAAS,EAAA,UAAA,EAAA,CAAA;kBApBrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,QAAA,EACN,WAAW,YACX,gBAAgB,EAAA,eAAA,EAET,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,SAAS;AACpB,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,wBAAwB,EAAE,mCAAmC;AAC7D,wBAAA,kBAAkB,EAAE,gBAAgB;AACpC,wBAAA,mBAAmB,EAAE,iBAAiB;AACtC,wBAAA,oBAAoB,EAAE,kBAAkB;AACxC,wBAAA,qBAAqB,EAAE,+BAA+B;AACtD,wBAAA,oBAAoB,EAAE,8BAA8B;AACrD,qBAAA,EAAA,MAAA,EAAA,CAAA,qyHAAA,CAAA,EAAA;;;ACtDH,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAE9D;;;AAGG;MAEU,eAAe,CAAA;AACT,IAAA,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;AAC3B,IAAA,MAAM,GAAgB,MAAM,CAAC,UAAU,CAAC,CAAC,aAAa;IAEvE,QAAQ,GAAA;QACN,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IACtC;IAEA,WAAW,GAAA;QACT,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;IAC1E;uGAVW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAD3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,QAAQ,EAAE,mBAAmB,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE;;AAc/F;MAEa,cAAc,CAAA;uGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,OAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAD1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE;;AAG7F;MAEa,gBAAgB,CAAA;uGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAD5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,QAAQ,EAAE,oBAAoB,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE;;AAGjG;MAMa,oBAAoB,CAAA;uGAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBALhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,wBAAwB;AAClC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE;AACrC,iBAAA;;AAGD;MAEa,gBAAgB,CAAA;uGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAD5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,QAAQ,EAAE,oBAAoB,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE;;AAGjG;;;;;AAKG;MAYU,gBAAgB,CAAA;AACR,IAAA,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;AAC7B,IAAA,MAAM,GAAgB,MAAM,CAAC,UAAU,CAAC,CAAC,aAAa;IACtD,eAAe,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;AAEjD,IAAA,QAAQ,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;iFAAC;IACpE,SAAS,GAAG,QAAQ,CAAC,MACtC,IAAI,CAAC,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE;kFAC3D;IAED,QAAQ,GAAA;QACN,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;IACnC;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;IACpC;uGAhBW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,SAAA,EAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAX5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,oBAAoB;AAC9B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,IAAI,EAAE;AACJ,wBAAA,WAAW,EAAE,SAAS;AACtB,wBAAA,WAAW,EAAE,qBAAqB;AAClC,wBAAA,aAAa,EAAE,YAAY;AAC3B,wBAAA,mBAAmB,EAAE,aAAa;AACnC,qBAAA;AACF,iBAAA;;AAoBD;MAOa,aAAa,CAAA;uGAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,cAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,IAAI;oBAChB,cAAc,EAAE,CAAC,cAAc,CAAC;AAChC,oBAAA,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE;AAC9B,iBAAA;;;ACxFD;;AAEG;;"}