@magmonium/one 0.4.11 → 0.4.13

package/fesm2022/{magmonium-one-magmonium-one-Cu45fHus.mjs → magmonium-one-magmonium-one-DWeZSPCv.mjs}

@@ -8992,7 +8992,7 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.TOGGLE: {
-                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-DELqFKZY.mjs');
+                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-zniJyl09.mjs');
                     this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                     break;
                 }
@@ -9004,12 +9004,12 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.PASSWORD: {
-                    const { PasswordInputComponent } = await import('./magmonium-one-password-CT8y_iYQ.mjs');
+                    const { PasswordInputComponent } = await import('./magmonium-one-password-CX1OjX5P.mjs');
                     this.createDynamicComponent(seq, PasswordInputComponent);
                     break;
                 }
                 case InputType.OTP: {
-                    const { OtpInputComponent } = await import('./magmonium-one-otp-Ct41thd0.mjs');
+                    const { OtpInputComponent } = await import('./magmonium-one-otp-CpjpaJdi.mjs');
                     this.createDynamicComponent(seq, OtpInputComponent);
                     break;
                 }
@@ -9052,7 +9052,6 @@ class SectionFormItemComponent extends ConfigComponent {
                     this.createDynamicComponent(seq, TextareaInputComponent);
                     break;
                 }
-                case InputType.MULTISELECT:
                 case InputType.DROPDOWN: {
                     const { DropdownInputComponent } = await Promise.resolve().then(function () { return dropdown; });
                     this.createDynamicComponent(seq, DropdownInputComponent, [
@@ -9061,6 +9060,14 @@ class SectionFormItemComponent extends ConfigComponent {
                     ]);
                     break;
                 }
+                case InputType.MULTISELECT: {
+                    const { MultiselectInputComponent } = await Promise.resolve().then(function () { return multiselect; });
+                    this.createDynamicComponent(seq, MultiselectInputComponent, [
+                        inputBinding('options', this.options),
+                        inputBinding('dir', this.dir),
+                    ]);
+                    break;
+                }
                 case InputType.COLOR: {
                     const { ColorPickerInputComponent } = await Promise.resolve().then(function () { return colorPicker; });
                     this.createDynamicComponent(seq, ColorPickerInputComponent);
@@ -9591,10 +9598,17 @@ class SectionFormComponent extends ConfigComponent {
     injector = inject(Injector);
     previousValue = null;
     previousData = undefined;
+    previousReleased = [];
     // Names announced by projected items (content projection has no template
     // `(fieldKey)` hook). Merged with `config.inputs` so the FieldTree always
     // has a slot for every rendered field.
     registeredFields = signal([], ...(ngDevMode ? [{ debugName: "registeredFields" }] : /* istanbul ignore next */ []));
+    // Keys whose item was rendered and has since left — hidden behind an `@if`
+    // or removed. Absent rather than empty: stripped from what `dataChange` and a
+    // submit hand over. A key no item ever registered is never here, so one the
+    // caller's `data` carries without a Field (an `id`) still survives the round
+    // trip.
+    releasedFields = signal([], ...(ngDevMode ? [{ debugName: "releasedFields" }] : /* istanbul ignore next */ []));
     // Keys whose item carries `required` — the tag's word, which has to become
     // the FieldTree's word too. Kept apart from `registeredFields` because a key
     // is announced once and its required flag can flip whenever the Field's
@@ -9613,6 +9627,9 @@ class SectionFormComponent extends ConfigComponent {
             if (!this.registeredFields().includes(name)) {
                 this.registeredFields.update((fields) => [...fields, name]);
             }
+            if (this.releasedFields().includes(name)) {
+                this.releasedFields.update((fields) => fields.filter((field) => field !== name));
+            }
             this.setRequired(name, required);
             this.setPatterns(name, patterns);
         });
@@ -9623,8 +9640,17 @@ class SectionFormComponent extends ConfigComponent {
         untracked(() => {
             this.setRequired(name, false);
             this.setPatterns(name, undefined);
+            if (!this.releasedFields().includes(name)) {
+                this.releasedFields.update((fields) => [...fields, name]);
+            }
         });
     };
+    withoutReleased = (record) => {
+        const released = this.releasedFields();
+        if (!released.length)
+            return record;
+        return Object.fromEntries(Object.entries(record).filter(([key]) => !released.includes(key)));
+    };
     setRequired = (name, required) => {
         const has = this.requiredFields().includes(name);
         if (has === required)
@@ -9716,8 +9742,9 @@ class SectionFormComponent extends ConfigComponent {
     // values, so keys no item renders survive the round trip.
     // The spread is a `T` by the same claim the caller made when it bound `data`:
     // the FieldTree is keyed by the names the Fields registered, which are `T`'s
-    // keys, and the keys no item renders come off `data` itself.
-    submitData = () => ({
+    // keys, and the keys no item renders come off `data` itself. A released key
+    // is the exception — its Field left, so its key does too.
+    submitData = () => this.withoutReleased({
         ...this.data(),
         ...(this.formGroup()?.().value() ?? {}),
     });
@@ -9819,11 +9846,18 @@ class SectionFormComponent extends ConfigComponent {
                 // one, and run in creation order) see the move as suppressed.
                 this.dataVersion.update((version) => version + 1);
             }
-            if (isUserEdit(this.previousValue, value, dataChanged)) {
-                this.dataChange.emit({ ...data, ...value });
+            // A Field leaving is a change to the value as well: whatever hid it was
+            // a caller reacting to an edit, and the key has to leave what the caller
+            // holds. Read here rather than emitted from `releaseField`, so a form
+            // torn down with its items emits nothing — its effect is gone first.
+            const released = this.releasedFields();
+            const left = released.some((name) => !this.previousReleased.includes(name));
+            if (isUserEdit(this.previousValue, value, dataChanged) || left) {
+                this.dataChange.emit(this.withoutReleased({ ...data, ...value }));
             }
             this.previousValue = value;
             this.previousData = data;
+            this.previousReleased = released;
         });
         // A form on a visual editor's Canvas is a picture of a form: it is rebuilt
         // on every config edit, and taking the caret each time would leave the
@@ -9899,7 +9933,7 @@ class SectionFormComponent extends ConfigComponent {
         this.rebuild();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: SectionFormComponent, isStandalone: true, selector: "m-section-form, m-one-section-form", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, heightMode: { classPropertyName: "heightMode", publicName: "heightMode", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, marginX: { classPropertyName: "marginX", publicName: "marginX", isSignal: true, isRequired: false, transformFunction: null }, marginY: { classPropertyName: "marginY", publicName: "marginY", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fieldConfigs: { classPropertyName: "fieldConfigs", publicName: "fieldConfigs", isSignal: true, isRequired: false, transformFunction: null }, fieldRenderIds: { classPropertyName: "fieldRenderIds", publicName: "fieldRenderIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange", submitted: "submitted", formInitialized: "formInitialized" }, host: { properties: { "class.is-full-height": "isFullHeight()", "class.has-max-height": "!!cssMaxHeight()", "class.no-border": "resolvedVariant() === \"noBorder\"", "class.is-with-border": "resolvedVariant() === \"withBorder\"", "class.is-sandwich-border": "resolvedVariant() === \"sandwichBorder\"", "class.align-left": "resolvedAlign() === \"left\"", "class.align-right": "resolvedAlign() === \"right\"", "class.align-center": "resolvedAlign() === \"center\"", "style.font-size": "sizeLength()", "style.--input-size": "sizeLength()", "style.--m-section-align": "resolvedAlign()", "style.--m-section-max-width": "resolvedMaxWidth()", "style.--m-section-max-height": "cssMaxHeight()", "style.min-height": "resolvedMinHeight()", "style.min-width": "resolvedMinWidth()", "style.max-height": "resolvedMaxHeight()", "style.max-width": "resolvedMaxWidth()", "style.padding-inline": "resolvedPaddingInline()", "style.padding-block": "resolvedPaddingBlock()", "style.--m-section-form-margin-inline": "resolvedMarginInline()", "style.margin-block": "resolvedMarginBlock()" }, classAttribute: "m-section-form" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: SectionFormComponent, isStandalone: true, selector: "m-section-form, m-one-section-form", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, heightMode: { classPropertyName: "heightMode", publicName: "heightMode", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, marginX: { classPropertyName: "marginX", publicName: "marginX", isSignal: true, isRequired: false, transformFunction: null }, marginY: { classPropertyName: "marginY", publicName: "marginY", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fieldConfigs: { classPropertyName: "fieldConfigs", publicName: "fieldConfigs", isSignal: true, isRequired: false, transformFunction: null }, fieldRenderIds: { classPropertyName: "fieldRenderIds", publicName: "fieldRenderIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange", submitted: "submitted", formInitialized: "formInitialized" }, host: { properties: { "class.is-full-height": "isFullHeight()", "class.has-max-height": "!!cssMaxHeight()", "class.no-border": "resolvedVariant() === \"noBorder\"", "class.is-with-border": "resolvedVariant() === \"withBorder\"", "class.is-sandwich-border": "resolvedVariant() === \"sandwichBorder\"", "class.is-side-border": "resolvedVariant() === \"sideBorder\"", "class.is-left-border": "resolvedVariant() === \"leftBorder\"", "class.is-right-border": "resolvedVariant() === \"rightBorder\"", "class.align-left": "resolvedAlign() === \"left\"", "class.align-right": "resolvedAlign() === \"right\"", "class.align-center": "resolvedAlign() === \"center\"", "style.font-size": "sizeLength()", "style.--input-size": "sizeLength()", "style.--m-section-align": "resolvedAlign()", "style.--m-section-max-width": "resolvedMaxWidth()", "style.--m-section-max-height": "cssMaxHeight()", "style.min-height": "resolvedMinHeight()", "style.min-width": "resolvedMinWidth()", "style.max-height": "resolvedMaxHeight()", "style.max-width": "resolvedMaxWidth()", "style.padding-inline": "resolvedPaddingInline()", "style.padding-block": "resolvedPaddingBlock()", "style.--m-section-form-margin-inline": "resolvedMarginInline()", "style.margin-block": "resolvedMarginBlock()" }, classAttribute: "m-section-form" }, providers: [
             // Full width, so an `mMargin` narrows it the way its own margin does
             // rather than pushing it past its container (SPACING_INWARD).
             { provide: SPACING_INWARD, useValue: { margin: true } },
@@ -9925,7 +9959,7 @@ class SectionFormComponent extends ConfigComponent {
     <form class="section-form" novalidate (submit)="handleSubmit($event)">
       <ng-content />
     </form>
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:calc(100% - 2 * var(--m-section-form-margin-inline, var(--m-margin-inline, 0px)));margin-inline:var(--m-section-form-margin-inline, var(--m-margin-inline, 0px));box-sizing:border-box;min-height:5em;container-type:inline-size;container-name:mag-grid;--_section-px: 1rem;--_section-pt: 1.5rem;--_section-pb: 0rem}:host(.has-max-height){height:var(--m-section-max-height);overflow:auto}:host(.is-with-border){border:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-sandwich-border){border-block:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}.section-form{margin:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--m-form-group-content-gap, 1.5rem 1.25rem);width:100%}.section-form>*{flex:1 1 100%;min-width:0}.section-form>.col-1{flex:1 1 calc(1 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-2{flex:2 1 calc(2 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-3{flex:3 1 calc(.25*(100% + 1.25rem) - 1.25rem)}.section-form>.col-4{flex:4 1 calc(4 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-5{flex:5 1 calc(5 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-6{flex:6 1 calc(.5*(100% + 1.25rem) - 1.25rem)}.section-form>.col-7{flex:7 1 calc(7 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-8{flex:8 1 calc(8 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-9{flex:9 1 calc(.75*(100% + 1.25rem) - 1.25rem)}.section-form>.col-10{flex:10 1 calc(10 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-11{flex:11 1 calc(11 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-12{flex:12 1 calc(1*(100% + 1.25rem) - 1.25rem)}@media(max-width:480px){.section-form>*{flex-basis:100%}}:host(.align-left) .section-form{margin-inline-start:0;margin-inline-end:auto;justify-content:flex-start}:host(.align-right) .section-form{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .section-form{margin-inline:auto;justify-content:center}:host(.is-full-height){height:100vh;min-height:100vh;overflow:auto}:host(.is-full-height) .section-form{flex:1;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:calc(100% - 2 * var(--m-section-form-margin-inline, var(--m-margin-inline, 0px)));margin-inline:var(--m-section-form-margin-inline, var(--m-margin-inline, 0px));box-sizing:border-box;min-height:5em;container-type:inline-size;container-name:mag-grid;--_section-px: 1rem;--_section-pt: 1.5rem;--_section-pb: 0rem}:host(.has-max-height){height:var(--m-section-max-height);overflow:auto}:host(.is-with-border){border:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-sandwich-border){border-block:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-side-border){border-inline:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-left-border){border-inline-start:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-right-border){border-inline-end:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}.section-form{margin:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--m-form-group-content-gap, 1.5rem 1.25rem);width:100%}.section-form>*{flex:1 1 100%;min-width:0}.section-form>.col-1{flex:1 1 calc(1 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-2{flex:2 1 calc(2 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-3{flex:3 1 calc(.25*(100% + 1.25rem) - 1.25rem)}.section-form>.col-4{flex:4 1 calc(4 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-5{flex:5 1 calc(5 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-6{flex:6 1 calc(.5*(100% + 1.25rem) - 1.25rem)}.section-form>.col-7{flex:7 1 calc(7 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-8{flex:8 1 calc(8 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-9{flex:9 1 calc(.75*(100% + 1.25rem) - 1.25rem)}.section-form>.col-10{flex:10 1 calc(10 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-11{flex:11 1 calc(11 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-12{flex:12 1 calc(1*(100% + 1.25rem) - 1.25rem)}@media(max-width:480px){.section-form>*{flex-basis:100%}}:host(.align-left) .section-form{margin-inline-start:0;margin-inline-end:auto;justify-content:flex-start}:host(.align-right) .section-form{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .section-form{margin-inline:auto;justify-content:center}:host(.is-full-height){height:100vh;min-height:100vh;overflow:auto}:host(.is-full-height) .section-form{flex:1;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFormComponent, decorators: [{
             type: Component,
@@ -9940,6 +9974,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[class.no-border]': 'resolvedVariant() === "noBorder"',
                         '[class.is-with-border]': 'resolvedVariant() === "withBorder"',
                         '[class.is-sandwich-border]': 'resolvedVariant() === "sandwichBorder"',
+                        '[class.is-side-border]': 'resolvedVariant() === "sideBorder"',
+                        '[class.is-left-border]': 'resolvedVariant() === "leftBorder"',
+                        '[class.is-right-border]': 'resolvedVariant() === "rightBorder"',
                         '[class.align-left]': 'resolvedAlign() === "left"',
                         '[class.align-right]': 'resolvedAlign() === "right"',
                         '[class.align-center]': 'resolvedAlign() === "center"',
@@ -9981,7 +10018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                                 };
                             },
                         },
-                    ], styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:calc(100% - 2 * var(--m-section-form-margin-inline, var(--m-margin-inline, 0px)));margin-inline:var(--m-section-form-margin-inline, var(--m-margin-inline, 0px));box-sizing:border-box;min-height:5em;container-type:inline-size;container-name:mag-grid;--_section-px: 1rem;--_section-pt: 1.5rem;--_section-pb: 0rem}:host(.has-max-height){height:var(--m-section-max-height);overflow:auto}:host(.is-with-border){border:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-sandwich-border){border-block:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}.section-form{margin:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--m-form-group-content-gap, 1.5rem 1.25rem);width:100%}.section-form>*{flex:1 1 100%;min-width:0}.section-form>.col-1{flex:1 1 calc(1 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-2{flex:2 1 calc(2 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-3{flex:3 1 calc(.25*(100% + 1.25rem) - 1.25rem)}.section-form>.col-4{flex:4 1 calc(4 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-5{flex:5 1 calc(5 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-6{flex:6 1 calc(.5*(100% + 1.25rem) - 1.25rem)}.section-form>.col-7{flex:7 1 calc(7 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-8{flex:8 1 calc(8 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-9{flex:9 1 calc(.75*(100% + 1.25rem) - 1.25rem)}.section-form>.col-10{flex:10 1 calc(10 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-11{flex:11 1 calc(11 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-12{flex:12 1 calc(1*(100% + 1.25rem) - 1.25rem)}@media(max-width:480px){.section-form>*{flex-basis:100%}}:host(.align-left) .section-form{margin-inline-start:0;margin-inline-end:auto;justify-content:flex-start}:host(.align-right) .section-form{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .section-form{margin-inline:auto;justify-content:center}:host(.is-full-height){height:100vh;min-height:100vh;overflow:auto}:host(.is-full-height) .section-form{flex:1;height:100%}\n"] }]
+                    ], styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:calc(100% - 2 * var(--m-section-form-margin-inline, var(--m-margin-inline, 0px)));margin-inline:var(--m-section-form-margin-inline, var(--m-margin-inline, 0px));box-sizing:border-box;min-height:5em;container-type:inline-size;container-name:mag-grid;--_section-px: 1rem;--_section-pt: 1.5rem;--_section-pb: 0rem}:host(.has-max-height){height:var(--m-section-max-height);overflow:auto}:host(.is-with-border){border:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-sandwich-border){border-block:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-side-border){border-inline:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-left-border){border-inline-start:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-right-border){border-inline-end:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}.section-form{margin:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--m-form-group-content-gap, 1.5rem 1.25rem);width:100%}.section-form>*{flex:1 1 100%;min-width:0}.section-form>.col-1{flex:1 1 calc(1 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-2{flex:2 1 calc(2 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-3{flex:3 1 calc(.25*(100% + 1.25rem) - 1.25rem)}.section-form>.col-4{flex:4 1 calc(4 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-5{flex:5 1 calc(5 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-6{flex:6 1 calc(.5*(100% + 1.25rem) - 1.25rem)}.section-form>.col-7{flex:7 1 calc(7 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-8{flex:8 1 calc(8 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-9{flex:9 1 calc(.75*(100% + 1.25rem) - 1.25rem)}.section-form>.col-10{flex:10 1 calc(10 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-11{flex:11 1 calc(11 * (100% + 1.25rem) / 12 - 1.25rem)}.section-form>.col-12{flex:12 1 calc(1*(100% + 1.25rem) - 1.25rem)}@media(max-width:480px){.section-form>*{flex-basis:100%}}:host(.align-left) .section-form{margin-inline-start:0;margin-inline-end:auto;justify-content:flex-start}:host(.align-right) .section-form{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .section-form{margin-inline:auto;justify-content:center}:host(.is-full-height){height:100vh;min-height:100vh;overflow:auto}:host(.is-full-height) .section-form{flex:1;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], heightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightMode", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingX", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], marginX: [{ type: i0.Input, args: [{ isSignal: true, alias: "marginX", required: false }] }], marginY: [{ type: i0.Input, args: [{ isSignal: true, alias: "marginY", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], formInitialized: [{ type: i0.Output, args: ["formInitialized"] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fieldConfigs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfigs", required: false }] }], fieldRenderIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldRenderIds", required: false }] }] } });
 
 // '' and null are an unset, not a length — a config asset drops a cleared
@@ -10132,6 +10169,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}m-section-button-group{display:flex;flex-wrap:wrap;align-items:center;box-sizing:border-box;--m-button-size: var(--input-size, 1em);gap:calc(var(--input-size, 1em) * .375)}m-section-button-group.is-design-mode{min-width:4em;min-height:4em}m-section-button-group.vertical{flex-direction:column}m-section-button-group.vertical.align-left{align-items:flex-start}m-section-button-group.vertical.align-center{align-items:center}m-section-button-group.vertical.align-right{align-items:flex-end}m-section-button-group.horizontal{flex-direction:row}m-section-button-group.align-left{justify-content:flex-start}m-section-button-group.align-center{justify-content:center}m-section-button-group.align-right{justify-content:flex-end}m-section-button-group.is-full-width{width:100%}m-section-button-group.is-full-width.horizontal>*{flex:1 1 0;min-width:0}m-section-button-group.is-full-width.vertical{align-items:stretch}m-section-button-group.is-joined{gap:0;flex-wrap:nowrap}m-section-button-group.is-joined>*{position:relative}m-section-button-group.is-joined>* button{border-radius:0!important}m-section-button-group.is-joined>*:hover,m-section-button-group.is-joined>*:focus-within{z-index:1}m-section-button-group.is-joined.horizontal>*+*{margin-left:-2px}m-section-button-group.is-joined.horizontal>*:first-child button{border-top-left-radius:4px!important;border-bottom-left-radius:4px!important}m-section-button-group.is-joined.horizontal>*:last-child button{border-top-right-radius:4px!important;border-bottom-right-radius:4px!important}m-section-button-group.is-joined.vertical{align-items:stretch}m-section-button-group.is-joined.vertical>*+*{margin-top:-2px}m-section-button-group.is-joined.vertical>*:first-child button{border-top-left-radius:4px!important;border-top-right-radius:4px!important}m-section-button-group.is-joined.vertical>*:last-child button{border-bottom-left-radius:4px!important;border-bottom-right-radius:4px!important}\n"] }]
         }], propDecorators: { vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
 
+const SECTION_CONTEXT = new InjectionToken('SECTION_CONTEXT');
+
+const BACK_BTN = {
+    icon: 'chevron-left',
+    iconOnly: true,
+    variant: 'ghost',
+};
+class SectionBackComponent {
+    back = input(false, ...(ngDevMode ? [{ debugName: "back" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    html = input(...(ngDevMode ? [undefined, { debugName: "html" }] : /* istanbul ignore next */ []));
+    padding = input(false, ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    paddingX = input(false, ...(ngDevMode ? [{ debugName: "paddingX" }] : /* istanbul ignore next */ []));
+    paddingY = input(false, ...(ngDevMode ? [{ debugName: "paddingY" }] : /* istanbul ignore next */ []));
+    navigate = output();
+    backBtn = BACK_BTN;
+    sectionContext = inject(SECTION_CONTEXT, { optional: true });
+    sidepanel = computed(() => this.sectionContext?.sidepanel() ?? false, ...(ngDevMode ? [{ debugName: "sidepanel" }] : /* istanbul ignore next */ []));
+    noBorder = computed(() => this.sectionContext?.variant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
+    contentRef = viewChild('content', ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
+    hasContent = signal(false, ...(ngDevMode ? [{ debugName: "hasContent" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const el = this.contentRef()?.nativeElement;
+            if (el)
+                this.hasContent.set(el.childNodes.length > 0);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionBackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionBackComponent, isStandalone: true, selector: "m-section-back", inputs: { back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, host: { properties: { "class.has-sidepanel": "sidepanel()", "class.has-padding-x": "padding() || paddingX()", "class.has-padding-y": "padding() || paddingY()", "class.no-border": "noBorder()" }, classAttribute: "m-section-back" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (back()) {
+      <m-button [config]="backBtn" (clicked)="navigate.emit()" />
+    } @else {
+      <m-icon icon="logo" color="mm" />
+    }
+    <span #content><ng-content /></span>
+    @if (!hasContent()) {
+      @if (html()) {
+        <m-header [level]="3" [innerHTML]="html()" />
+      } @else {
+        <m-header [level]="3" [label]="label() ?? 'magmonium'" />
+      }
+    }
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.25rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);width:100%;grid-column:1/-1;--section-back-size: .7rem;--section-back-seat: calc(var(--section-back-size) * 2.25)}:host(.no-border){border-bottom:none}m-button,m-icon{flex-shrink:0}m-button{--m-button-size: var(--section-back-size)}m-icon{display:inline-flex;justify-content:center;width:var(--section-back-seat)}m-logo{flex-shrink:0;width:1.5rem;height:1.5rem}m-header{flex:1;min-width:0}:host>span{display:contents}:host.has-padding-x{padding-inline:var(--section-px, 1rem)}:host.has-padding-y{padding-block:var(--section-header-py, .85rem)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "icon", "actionButton", "actionLabel", "noTranslate", "params"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionBackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'm-section-back', template: `
+    @if (back()) {
+      <m-button [config]="backBtn" (clicked)="navigate.emit()" />
+    } @else {
+      <m-icon icon="logo" color="mm" />
+    }
+    <span #content><ng-content /></span>
+    @if (!hasContent()) {
+      @if (html()) {
+        <m-header [level]="3" [innerHTML]="html()" />
+      } @else {
+        <m-header [level]="3" [label]="label() ?? 'magmonium'" />
+      }
+    }
+  `, imports: [IconComponent, ButtonComponent, HeaderComponent$1], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'm-section-back',
+                        '[class.has-sidepanel]': 'sidepanel()',
+                        '[class.has-padding-x]': 'padding() || paddingX()',
+                        '[class.has-padding-y]': 'padding() || paddingY()',
+                        '[class.no-border]': 'noBorder()',
+                    }, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.25rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);width:100%;grid-column:1/-1;--section-back-size: .7rem;--section-back-seat: calc(var(--section-back-size) * 2.25)}:host(.no-border){border-bottom:none}m-button,m-icon{flex-shrink:0}m-button{--m-button-size: var(--section-back-size)}m-icon{display:inline-flex;justify-content:center;width:var(--section-back-seat)}m-logo{flex-shrink:0;width:1.5rem;height:1.5rem}m-header{flex:1;min-width:0}:host>span{display:contents}:host.has-padding-x{padding-inline:var(--section-px, 1rem)}:host.has-padding-y{padding-block:var(--section-header-py, .85rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], html: [{ type: i0.Input, args: [{ isSignal: true, alias: "html", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingX", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+
+/**
+ * Merges multiple arrays and removes duplicates
+ * @param arrays - Arrays to merge
+ * @returns Merged array with unique values
+ */
+function mergeUnique(...arrays) {
+    return [...new Set(arrays.flat())];
+}
+/**
+ * Merges arrays of objects and removes duplicates by key
+ * @param arrays - Arrays to merge
+ * @param key - Property to use for uniqueness check
+ * @returns Merged array with unique objects
+ */
+function mergeUniqueBy(arrays, key) {
+    const map = new Map();
+    arrays.flat().forEach((item) => {
+        if (!map.has(item[key])) {
+            map.set(item[key], item);
+        }
+    });
+    return Array.from(map.values());
+}
+/**
+ * Merges arrays with custom comparator
+ */
+function mergeUniqueWith(arrays, compareFn) {
+    const map = new Map();
+    arrays.flat().forEach((item) => {
+        const key = compareFn(item);
+        if (!map.has(key)) {
+            map.set(key, item);
+        }
+    });
+    return Array.from(map.values());
+}
+
 var Direction;
 (function (Direction) {
     Direction["TOP"] = "top";
@@ -10928,254 +11072,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }, { type: i0.Output, args: ["toggleChange"] }], remote: [{ type: i0.Input, args: [{ isSignal: true, alias: "remote", required: false }] }], exclude: [{ type: i0.Input, args: [{ isSignal: true, alias: "exclude", required: false }] }], visibilityRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibilityRule", required: false }] }], disableRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRule", required: false }] }], extraData: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraData", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], selectorDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SelectorDirective), { isSignal: true }] }] } });
 
-const SECTION_CONTEXT = new InjectionToken('SECTION_CONTEXT');
-
-// The line box each heading level draws, straight from `header.sass`: its font
-// size and its line-height. The icon beside a heading is boxed to the same
-// span so the two centre on one another — `--m-header-font-size` is read
-// first, so a caller resizing the heading moves the icon's box with it.
-const HEADER_LINE_BOX = {
-    1: 'calc(var(--m-header-font-size, 2.25rem) * 1.15)',
-    2: 'calc(var(--m-header-font-size, 1.75rem) * 1.2)',
-    3: 'calc(var(--m-header-font-size, 1.375rem) * 1.1)',
-    4: 'calc(var(--m-header-font-size, 1.125rem) * 1.1)',
-    5: 'calc(var(--m-header-font-size, 1rem) * 1.1)',
-    6: 'calc(var(--m-header-font-size, 0.875rem) * 1.1)',
-};
-class SectionHeaderComponent {
-    sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
-    level = input(3, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    subLabel = input(...(ngDevMode ? [undefined, { debugName: "subLabel" }] : /* istanbul ignore next */ []));
-    // `label` and `subLabel` are authored text rather than translation keys —
-    // forwarded to `m-header` for the label, and skipping `translate` for the
-    // sub. What a bound label needs above all: a value read from data is the
-    // text itself, and resolving it as a key renders nothing.
-    noTranslate = input(false, ...(ngDevMode ? [{ debugName: "noTranslate" }] : /* istanbul ignore next */ []));
-    // The [MessageVariable] values both lines are resolved with — one record for
-    // the pair, because a page holds one record for every dynamic slot it draws
-    // (m-one-ui ADR 0066) and two headings naming the same slot mean the same
-    // datum. Ignored under `noTranslate`, where neither line is looked up.
-    params = input(undefined, ...(ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []));
-    // Draw the sub line above the label instead of below it. The two nodes keep
-    // their order — title first, sub second — whichever way the pair reads, so
-    // reversing is a setting rather than a second way to arrange the children.
-    reverse = input(false, ...(ngDevMode ? [{ debugName: "reverse" }] : /* istanbul ignore next */ []));
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-    menu = input(...(ngDevMode ? [undefined, { debugName: "menu" }] : /* istanbul ignore next */ []));
-    menuName = input(...(ngDevMode ? [undefined, { debugName: "menuName" }] : /* istanbul ignore next */ []));
-    visibilityRule = input(...(ngDevMode ? [undefined, { debugName: "visibilityRule" }] : /* istanbul ignore next */ []));
-    disableRule = input(...(ngDevMode ? [undefined, { debugName: "disableRule" }] : /* istanbul ignore next */ []));
-    extraData = input(...(ngDevMode ? [undefined, { debugName: "extraData" }] : /* istanbul ignore next */ []));
-    align = input(undefined, ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    // The header's own `align` alone. A Section's `align` places boxes — its
-    // body box, and the header's content box below — and a header whose text
-    // followed it could not be left-aligned inside a centred Section at all.
-    alignment = computed(() => this.align() ?? 'left', ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
-    showBack = input(false, ...(ngDevMode ? [{ debugName: "showBack" }] : /* istanbul ignore next */ []));
-    actionButton = input(...(ngDevMode ? [undefined, { debugName: "actionButton" }] : /* istanbul ignore next */ []));
-    // The action Button's accessible name — it renders icon-only, so without a
-    // label a screen reader has nothing to announce.
-    actionLabel = input(...(ngDevMode ? [undefined, { debugName: "actionLabel" }] : /* istanbul ignore next */ []));
-    spacing = input(false, ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
-    maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
-    actionClick = output();
-    action = output();
-    back = output();
-    translateService = inject(TranslateService);
-    // A computed rather than the impure TranslatePipe, the same trade
-    // HeaderComponent makes: one lookup per sub change instead of one per
-    // change-detection tick, and it still repaints when the language moves.
-    subText = computed(() => this.noTranslate()
-        ? this.subLabel()
-        : this.translateService.translate(this.subLabel(), this.params()), ...(ngDevMode ? [{ debugName: "subText" }] : /* istanbul ignore next */ []));
-    scrollSticky = injectScrollSticky(120, 'none');
-    sectionContext = inject(SECTION_CONTEXT, { optional: true });
-    sidepanel = computed(() => this.sectionContext?.sidepanel() ?? false, ...(ngDevMode ? [{ debugName: "sidepanel" }] : /* istanbul ignore next */ []));
-    noBorder = computed(() => this.sectionContext?.variant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
-    // Falls back to the Section's `maxWidth`: the header sits above the body and
-    // the two are one column, so constraining the body alone left the heading
-    // hanging off the edge of the content it titles. The border stays on the
-    // host and keeps spanning the Section — only this inner box narrows.
-    resolvedMaxWidth = computed(() => this.maxWidth() ?? this.sectionContext?.maxWidth?.(), ...(ngDevMode ? [{ debugName: "resolvedMaxWidth" }] : /* istanbul ignore next */ []));
-    // Where that box sits once it is narrower than the row. The Section's
-    // `align` — the same value that places `.m-section__body` — so header and
-    // body stay in one column.
-    boxAlign = computed(() => this.sectionContext?.align?.() ?? 'left', ...(ngDevMode ? [{ debugName: "boxAlign" }] : /* istanbul ignore next */ []));
-    // The icon sits in the row, not in the heading, so it has no line box of its
-    // own to centre against — it gets the heading's.
-    iconBox = computed(() => HEADER_LINE_BOX[this.level()], ...(ngDevMode ? [{ debugName: "iconBox" }] : /* istanbul ignore next */ []));
-    isSticky = computed(() => this.sticky() && this.scrollSticky(), ...(ngDevMode ? [{ debugName: "isSticky" }] : /* istanbul ignore next */ []));
-    hasMenu = computed(() => !!this.menu() || !!this.menuName(), ...(ngDevMode ? [{ debugName: "hasMenu" }] : /* istanbul ignore next */ []));
-    actionConfig = computed(() => {
-        const icon = this.actionButton();
-        if (!icon)
-            return undefined;
-        return {
-            icon,
-            label: this.actionLabel(),
-            iconOnly: true,
-            variant: 'ghost',
-        };
-    }, ...(ngDevMode ? [{ debugName: "actionConfig" }] : /* istanbul ignore next */ []));
-    // Read through SECTION_CONTEXT rather than by injecting the directive:
-    // every `<m-section>` provides the context, so the nearest one wins and a
-    // header only ever draws the toggle of the Section it belongs to. Injecting
-    // SectionAccordionDirective instead walks past that Section to any ancestor
-    // carrying the behaviour, which put an arrow on every nested header. Null
-    // where the Section has no active accordion (CONTEXT.md SectionAccordion).
-    accordion = computed(() => this.sectionContext?.accordion?.() ?? null, ...(ngDevMode ? [{ debugName: "accordion" }] : /* istanbul ignore next */ []));
-    // toggleIcon set: the glyph itself swaps between closed/open, already
-    // "pointing" the right way, so it never rotates. toggleIcon absent: the
-    // one glyph (icon, or the default chevron) rotates 180° instead.
-    toggleIconName = computed(() => {
-        const accordion = this.accordion();
-        if (!accordion)
-            return undefined;
-        const toggleIcon = accordion.toggleIcon();
-        if (toggleIcon) {
-            return accordion.isOpen() ? toggleIcon : accordion.icon() ?? 'accordion_chevron';
-        }
-        return accordion.icon() ?? 'accordion_chevron';
-    }, ...(ngDevMode ? [{ debugName: "toggleIconName" }] : /* istanbul ignore next */ []));
-    toggleRotates = computed(() => !this.accordion()?.toggleIcon(), ...(ngDevMode ? [{ debugName: "toggleRotates" }] : /* istanbul ignore next */ []));
-    onToggleClick() {
-        this.accordion()?.toggle();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionHeaderComponent, isStandalone: true, selector: "m-section-header", inputs: { sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, noTranslate: { classPropertyName: "noTranslate", publicName: "noTranslate", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null }, menuName: { classPropertyName: "menuName", publicName: "menuName", isSignal: true, isRequired: false, transformFunction: null }, visibilityRule: { classPropertyName: "visibilityRule", publicName: "visibilityRule", isSignal: true, isRequired: false, transformFunction: null }, disableRule: { classPropertyName: "disableRule", publicName: "disableRule", isSignal: true, isRequired: false, transformFunction: null }, extraData: { classPropertyName: "extraData", publicName: "extraData", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, actionButton: { classPropertyName: "actionButton", publicName: "actionButton", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", action: "action", back: "back" }, host: { properties: { "class.is-sticky-enabled": "sticky()", "class.is-sticky": "isSticky()", "class.has-menu": "hasMenu()", "class.align-left": "alignment() === \"left\"", "class.align-center": "alignment() === \"center\"", "class.align-right": "alignment() === \"right\"", "class.has-sidepanel": "sidepanel()", "class.no-border": "noBorder()", "class.spacing": "spacing()", "class.box-center": "boxAlign() === \"center\"", "class.box-right": "boxAlign() === \"right\"", "style.--m-section-header-max-width": "resolvedMaxWidth()", "style.--m-section-header-icon-box": "iconBox()" }, classAttribute: "m-section-header" }, ngImport: i0, template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n     Hoisted into a template rather than written twice: an `<ng-content>` may\n     appear once per selector in a component, so the duplicated copy caught\n     nothing and a header projecting a title rendered it in the `spacing`\n     branch alone. -->\n<ng-template #body>\n  @if (accordion(); as accordionRef) {\n    <div\n      class=\"section-header__toggle\"\n      [class.section-header__toggle--rotate]=\"toggleRotates()\"\n      [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n      [id]=\"accordionRef.headerId\"\n      [attr.aria-expanded]=\"accordionRef.isOpen()\"\n      [attr.aria-controls]=\"accordionRef.bodyId\"\n    >\n      <m-button\n        [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n        (clicked)=\"onToggleClick()\" />\n    </div>\n  }\n  @if (showBack()) {\n    <div class=\"section-header__back\">\n      <m-button\n        [config]=\"{ icon: 'chevron-left', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (!label() && icon(); as iconName) {\n    <!-- Only where no label is written. A header with one hands the icon to\n         `m-header`, which draws it inside the heading's line box and so on the\n         heading's own centre line. Beside a projected title there is no such\n         box to borrow, so the glyph is boxed to the level's line box here and\n         centred in it \u2014 otherwise it centres against the whole title column,\n         which on the Canvas is the label slot's drop rect stacked above the\n         heading. -->\n    <div class=\"section-header__icon\">\n      <m-icon [name]=\"iconName\" />\n    </div>\n  }\n  <div\n    class=\"section-header__title\"\n    [class.section-header__title--reverse]=\"reverse()\"\n  >\n    <!-- The title slot is the catch-all rather than a `[label]` one: every\n         header already projecting a heading writes it unselected, and a\n         selector here would drop that content on the floor. What the design\n         page emits \u2014 `<span label>` \u2014 is caught by it too, nothing else\n         claiming the node. -->\n    <ng-content />\n    <!-- The written label, drawn beside the slot rather than as its\n         `ng-content` fallback. A fallback renders only while *nothing* is\n         projected, and the design Canvas always projects the slot span \u2014\n         empty until a Control is dropped in it \u2014 so a fallback there would\n         blank the label a header is still configured with. `label` answers\n         instead, which no header projecting a title sets. -->\n    @if (label()) {\n      <m-header\n        [level]=\"level()\"\n        [label]=\"label()\"\n        [icon]=\"icon()\"\n        [params]=\"params()\"\n        [noTranslate]=\"noTranslate()\" />\n    }\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\n  </div>\n  <!-- A FilterGroup projected into the header row, selected by tag rather than\n       by an attribute \u2014 the same shape a Section catches its `m-action` with.\n       A header has room for one icon and not for a row, so a group landing\n       here is squeezed by placement (ADR 0025); nothing here enforces that,\n       the caller binding `[squeeze]` on the tag it projects. -->\n  <div class=\"section-header__filters\">\n    <ng-content select=\"m-section-filter-group\" />\n  </div>\n  @if (actionConfig(); as action) {\n    <div class=\"section-header__action\">\n      <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n    </div>\n  }\n  @if (hasMenu()) {\n    <div class=\"section-header__menu\">\n      <m-context-menu\n        [config]=\"menu()\"\n        [name]=\"menuName()\"\n        [visibilityRule]=\"visibilityRule()\"\n        [disableRule]=\"disableRule()\"\n        [extraData]=\"extraData()\"\n        (action)=\"action.emit($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n<!-- Always the same two boxes, whether or not a `maxWidth` is in force. The\n     border and the sticky backdrop live on the host and keep spanning the\n     Section's full width; only this container narrows and is placed by the\n     Section's `align`, so the heading lines up with the body under it. -->\n<div class=\"section-header__container\">\n  <div class=\"section-header__inner\">\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </div>\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;min-width:0;max-width:var(--m-section-header-max-width, none);margin-inline:0 auto}:host(.box-center) .section-header__container{margin-inline:auto}:host(.box-right) .section-header__container{margin-inline:auto 0}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.spacing) .section-header__inner{padding:1rem 1.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__filters{display:contents}.section-header__filters m-section-filter-group{width:auto;flex-shrink:0;border-bottom:none}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;height:var(--m-section-header-icon-box, 1.5125rem)}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ContextMenuComponent, selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted", "options"], outputs: ["toggleChange", "action"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "icon", "actionButton", "actionLabel", "noTranslate", "params"], outputs: ["actionClick"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'm-section-header', imports: [
-                        NgTemplateOutlet,
-                        ContextMenuComponent,
-                        HeaderComponent$1,
-                        IconComponent,
-                        ButtonComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'm-section-header',
-                        '[class.is-sticky-enabled]': 'sticky()',
-                        '[class.is-sticky]': 'isSticky()',
-                        '[class.has-menu]': 'hasMenu()',
-                        '[class.align-left]': 'alignment() === "left"',
-                        '[class.align-center]': 'alignment() === "center"',
-                        '[class.align-right]': 'alignment() === "right"',
-                        '[class.has-sidepanel]': 'sidepanel()',
-                        '[class.no-border]': 'noBorder()',
-                        '[class.spacing]': 'spacing()',
-                        '[class.box-center]': 'boxAlign() === "center"',
-                        '[class.box-right]': 'boxAlign() === "right"',
-                        '[style.--m-section-header-max-width]': 'resolvedMaxWidth()',
-                        '[style.--m-section-header-icon-box]': 'iconBox()',
-                    }, template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n     Hoisted into a template rather than written twice: an `<ng-content>` may\n     appear once per selector in a component, so the duplicated copy caught\n     nothing and a header projecting a title rendered it in the `spacing`\n     branch alone. -->\n<ng-template #body>\n  @if (accordion(); as accordionRef) {\n    <div\n      class=\"section-header__toggle\"\n      [class.section-header__toggle--rotate]=\"toggleRotates()\"\n      [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n      [id]=\"accordionRef.headerId\"\n      [attr.aria-expanded]=\"accordionRef.isOpen()\"\n      [attr.aria-controls]=\"accordionRef.bodyId\"\n    >\n      <m-button\n        [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n        (clicked)=\"onToggleClick()\" />\n    </div>\n  }\n  @if (showBack()) {\n    <div class=\"section-header__back\">\n      <m-button\n        [config]=\"{ icon: 'chevron-left', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (!label() && icon(); as iconName) {\n    <!-- Only where no label is written. A header with one hands the icon to\n         `m-header`, which draws it inside the heading's line box and so on the\n         heading's own centre line. Beside a projected title there is no such\n         box to borrow, so the glyph is boxed to the level's line box here and\n         centred in it \u2014 otherwise it centres against the whole title column,\n         which on the Canvas is the label slot's drop rect stacked above the\n         heading. -->\n    <div class=\"section-header__icon\">\n      <m-icon [name]=\"iconName\" />\n    </div>\n  }\n  <div\n    class=\"section-header__title\"\n    [class.section-header__title--reverse]=\"reverse()\"\n  >\n    <!-- The title slot is the catch-all rather than a `[label]` one: every\n         header already projecting a heading writes it unselected, and a\n         selector here would drop that content on the floor. What the design\n         page emits \u2014 `<span label>` \u2014 is caught by it too, nothing else\n         claiming the node. -->\n    <ng-content />\n    <!-- The written label, drawn beside the slot rather than as its\n         `ng-content` fallback. A fallback renders only while *nothing* is\n         projected, and the design Canvas always projects the slot span \u2014\n         empty until a Control is dropped in it \u2014 so a fallback there would\n         blank the label a header is still configured with. `label` answers\n         instead, which no header projecting a title sets. -->\n    @if (label()) {\n      <m-header\n        [level]=\"level()\"\n        [label]=\"label()\"\n        [icon]=\"icon()\"\n        [params]=\"params()\"\n        [noTranslate]=\"noTranslate()\" />\n    }\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\n  </div>\n  <!-- A FilterGroup projected into the header row, selected by tag rather than\n       by an attribute \u2014 the same shape a Section catches its `m-action` with.\n       A header has room for one icon and not for a row, so a group landing\n       here is squeezed by placement (ADR 0025); nothing here enforces that,\n       the caller binding `[squeeze]` on the tag it projects. -->\n  <div class=\"section-header__filters\">\n    <ng-content select=\"m-section-filter-group\" />\n  </div>\n  @if (actionConfig(); as action) {\n    <div class=\"section-header__action\">\n      <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n    </div>\n  }\n  @if (hasMenu()) {\n    <div class=\"section-header__menu\">\n      <m-context-menu\n        [config]=\"menu()\"\n        [name]=\"menuName()\"\n        [visibilityRule]=\"visibilityRule()\"\n        [disableRule]=\"disableRule()\"\n        [extraData]=\"extraData()\"\n        (action)=\"action.emit($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n<!-- Always the same two boxes, whether or not a `maxWidth` is in force. The\n     border and the sticky backdrop live on the host and keep spanning the\n     Section's full width; only this container narrows and is placed by the\n     Section's `align`, so the heading lines up with the body under it. -->\n<div class=\"section-header__container\">\n  <div class=\"section-header__inner\">\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </div>\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;min-width:0;max-width:var(--m-section-header-max-width, none);margin-inline:0 auto}:host(.box-center) .section-header__container{margin-inline:auto}:host(.box-right) .section-header__container{margin-inline:auto 0}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.spacing) .section-header__inner{padding:1rem 1.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__filters{display:contents}.section-header__filters m-section-filter-group{width:auto;flex-shrink:0;border-bottom:none}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;height:var(--m-section-header-icon-box, 1.5125rem)}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"] }]
-        }], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], noTranslate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noTranslate", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }], reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: false }] }], menuName: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuName", required: false }] }], visibilityRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibilityRule", required: false }] }], disableRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRule", required: false }] }], extraData: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraData", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], actionButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionButton", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], action: [{ type: i0.Output, args: ["action"] }], back: [{ type: i0.Output, args: ["back"] }] } });
-
-const BACK_BTN = {
-    icon: 'chevron-left',
-    iconOnly: true,
-    variant: 'ghost',
-};
-class SectionBackComponent {
-    back = input(false, ...(ngDevMode ? [{ debugName: "back" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    html = input(...(ngDevMode ? [undefined, { debugName: "html" }] : /* istanbul ignore next */ []));
-    padding = input(false, ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
-    paddingX = input(false, ...(ngDevMode ? [{ debugName: "paddingX" }] : /* istanbul ignore next */ []));
-    paddingY = input(false, ...(ngDevMode ? [{ debugName: "paddingY" }] : /* istanbul ignore next */ []));
-    navigate = output();
-    backBtn = BACK_BTN;
-    sectionContext = inject(SECTION_CONTEXT, { optional: true });
-    sidepanel = computed(() => this.sectionContext?.sidepanel() ?? false, ...(ngDevMode ? [{ debugName: "sidepanel" }] : /* istanbul ignore next */ []));
-    noBorder = computed(() => this.sectionContext?.variant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
-    contentRef = viewChild('content', ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
-    hasContent = signal(false, ...(ngDevMode ? [{ debugName: "hasContent" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            const el = this.contentRef()?.nativeElement;
-            if (el)
-                this.hasContent.set(el.childNodes.length > 0);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionBackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionBackComponent, isStandalone: true, selector: "m-section-back", inputs: { back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, host: { properties: { "class.has-sidepanel": "sidepanel()", "class.has-padding-x": "padding() || paddingX()", "class.has-padding-y": "padding() || paddingY()", "class.no-border": "noBorder()" }, classAttribute: "m-section-back" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    @if (back()) {
-      <m-button [config]="backBtn" (clicked)="navigate.emit()" />
-    } @else {
-      <m-icon icon="logo" color="mm" />
-    }
-    <span #content><ng-content /></span>
-    @if (!hasContent()) {
-      @if (html()) {
-        <m-header [level]="3" [innerHTML]="html()" />
-      } @else {
-        <m-header [level]="3" [label]="label() ?? 'magmonium'" />
-      }
-    }
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.25rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);width:100%;grid-column:1/-1;--section-back-size: .7rem;--section-back-seat: calc(var(--section-back-size) * 2.25)}:host(.no-border){border-bottom:none}m-button,m-icon{flex-shrink:0}m-button{--m-button-size: var(--section-back-size)}m-icon{display:inline-flex;justify-content:center;width:var(--section-back-seat)}m-logo{flex-shrink:0;width:1.5rem;height:1.5rem}m-header{flex:1;min-width:0}:host>span{display:contents}:host.has-padding-x{padding-inline:var(--section-px, 1rem)}:host.has-padding-y{padding-block:var(--section-header-py, .85rem)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "icon", "actionButton", "actionLabel", "noTranslate", "params"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionBackComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'm-section-back', template: `
-    @if (back()) {
-      <m-button [config]="backBtn" (clicked)="navigate.emit()" />
-    } @else {
-      <m-icon icon="logo" color="mm" />
-    }
-    <span #content><ng-content /></span>
-    @if (!hasContent()) {
-      @if (html()) {
-        <m-header [level]="3" [innerHTML]="html()" />
-      } @else {
-        <m-header [level]="3" [label]="label() ?? 'magmonium'" />
-      }
-    }
-  `, imports: [IconComponent, ButtonComponent, HeaderComponent$1], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'm-section-back',
-                        '[class.has-sidepanel]': 'sidepanel()',
-                        '[class.has-padding-x]': 'padding() || paddingX()',
-                        '[class.has-padding-y]': 'padding() || paddingY()',
-                        '[class.no-border]': 'noBorder()',
-                    }, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.25rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);width:100%;grid-column:1/-1;--section-back-size: .7rem;--section-back-seat: calc(var(--section-back-size) * 2.25)}:host(.no-border){border-bottom:none}m-button,m-icon{flex-shrink:0}m-button{--m-button-size: var(--section-back-size)}m-icon{display:inline-flex;justify-content:center;width:var(--section-back-seat)}m-logo{flex-shrink:0;width:1.5rem;height:1.5rem}m-header{flex:1;min-width:0}:host>span{display:contents}:host.has-padding-x{padding-inline:var(--section-px, 1rem)}:host.has-padding-y{padding-block:var(--section-header-py, .85rem)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], html: [{ type: i0.Input, args: [{ isSignal: true, alias: "html", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingX", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
-
-/**
- * Merges multiple arrays and removes duplicates
- * @param arrays - Arrays to merge
- * @returns Merged array with unique values
- */
-function mergeUnique(...arrays) {
-    return [...new Set(arrays.flat())];
-}
-/**
- * Merges arrays of objects and removes duplicates by key
- * @param arrays - Arrays to merge
- * @param key - Property to use for uniqueness check
- * @returns Merged array with unique objects
- */
-function mergeUniqueBy(arrays, key) {
-    const map = new Map();
-    arrays.flat().forEach((item) => {
-        if (!map.has(item[key])) {
-            map.set(item[key], item);
-        }
-    });
-    return Array.from(map.values());
-}
-/**
- * Merges arrays with custom comparator
- */
-function mergeUniqueWith(arrays, compareFn) {
-    const map = new Map();
-    arrays.flat().forEach((item) => {
-        const key = compareFn(item);
-        if (!map.has(key)) {
-            map.set(key, item);
-        }
-    });
-    return Array.from(map.values());
-}
-
 class ButtonGroupComponent extends ConfigComponent {
     // to overwrite specific button config
     buttons = input(...(ngDevMode ? [undefined, { debugName: "buttons" }] : /* istanbul ignore next */ []));
@@ -17420,7 +17316,9 @@ class SectionAccordionDirective {
     // Ungrouped default is open (CONTEXT.md) — a bare `register()` call from a
     // group overrides this via setOpen before first render.
     _open = signal(true, ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
-    isOpen = computed(() => this._open(), ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    // Always open on the Canvas: the toggle is inert there, so a group member
+    // closed at registration would hide its children with no way to reach them.
+    isOpen = computed(() => this.isDesignMode || this._open(), ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     sectionAccordionId = `m-section-accordion-${++counter}`;
     headerId = `${this.sectionAccordionId}-header`;
     bodyId = `${this.sectionAccordionId}-body`;
@@ -17487,7 +17385,6 @@ class SectionComponent extends ConfigComponent {
     // on every Section it draws, so an unattached one must not collapse or
     // announce itself as a region.
     accordion = computed(() => this.accordionDirective?.isActive() ? this.accordionDirective : null, ...(ngDevMode ? [{ debugName: "accordion" }] : /* istanbul ignore next */ []));
-    header = contentChild(SectionHeaderComponent, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
     badges = contentChild(SectionBadgesComponent, ...(ngDevMode ? [{ debugName: "badges" }] : /* istanbul ignore next */ []));
     toggle = contentChild(SectionToggleComponent, ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
     action = contentChild(ActionComponent, ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
@@ -17575,7 +17472,7 @@ class SectionComponent extends ConfigComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionComponent, isStandalone: true, selector: "m-section", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, heightMode: { classPropertyName: "heightMode", publicName: "heightMode", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignX: { classPropertyName: "alignX", publicName: "alignX", isSignal: true, isRequired: false, transformFunction: null }, alignY: { classPropertyName: "alignY", publicName: "alignY", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inView: "inView" }, host: { properties: { "class.is-full-height": "isFullHeight()", "class.has-sidepanel": "resolvedSidepanel()", "class.has-max-height": "!!cssMaxHeight()", "class.no-border": "resolvedVariant() === \"noBorder\"", "class.is-with-border": "resolvedVariant() === \"withBorder\"", "class.is-sandwich-border": "resolvedVariant() === \"sandwichBorder\"", "class.align-x-left": "resolvedAlignX() === \"left\"", "class.align-x-center": "resolvedAlignX() === \"center\"", "class.align-x-right": "resolvedAlignX() === \"right\"", "class.align-y-top": "resolvedAlignY() === \"top\"", "class.align-y-center": "resolvedAlignY() === \"center\"", "class.align-y-bottom": "resolvedAlignY() === \"bottom\"", "class.align-left": "resolvedAlign() === \"left\"", "class.align-right": "resolvedAlign() === \"right\"", "class.align-center": "resolvedAlign() === \"center\"", "style.font-size": "sizeLength()", "style.--input-size": "sizeLength()", "style.--m-section-align": "resolvedAlign()", "style.--m-section-max-width": "resolvedMaxWidth()", "style.--m-section-max-height": "cssMaxHeight()" }, classAttribute: "m-section" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionComponent, isStandalone: true, selector: "m-section", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, heightMode: { classPropertyName: "heightMode", publicName: "heightMode", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignX: { classPropertyName: "alignX", publicName: "alignX", isSignal: true, isRequired: false, transformFunction: null }, alignY: { classPropertyName: "alignY", publicName: "alignY", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inView: "inView" }, host: { properties: { "class.is-full-height": "isFullHeight()", "class.has-sidepanel": "resolvedSidepanel()", "class.has-max-height": "!!cssMaxHeight()", "class.no-border": "resolvedVariant() === \"noBorder\"", "class.is-with-border": "resolvedVariant() === \"withBorder\"", "class.is-sandwich-border": "resolvedVariant() === \"sandwichBorder\"", "class.is-side-border": "resolvedVariant() === \"sideBorder\"", "class.is-left-border": "resolvedVariant() === \"leftBorder\"", "class.is-right-border": "resolvedVariant() === \"rightBorder\"", "class.align-x-left": "resolvedAlignX() === \"left\"", "class.align-x-center": "resolvedAlignX() === \"center\"", "class.align-x-right": "resolvedAlignX() === \"right\"", "class.align-y-top": "resolvedAlignY() === \"top\"", "class.align-y-center": "resolvedAlignY() === \"center\"", "class.align-y-bottom": "resolvedAlignY() === \"bottom\"", "class.align-left": "resolvedAlign() === \"left\"", "class.align-right": "resolvedAlign() === \"right\"", "class.align-center": "resolvedAlign() === \"center\"", "style.font-size": "sizeLength()", "style.--input-size": "sizeLength()", "style.--m-section-align": "resolvedAlign()", "style.--m-section-max-width": "resolvedMaxWidth()", "style.--m-section-max-height": "cssMaxHeight()" }, classAttribute: "m-section" }, providers: [
             provideSizeContext(SectionComponent),
             {
                 provide: SECTION_CONTEXT,
@@ -17590,10 +17487,10 @@ class SectionComponent extends ConfigComponent {
                     };
                 },
             },
-        ], queries: [{ propertyName: "header", first: true, predicate: SectionHeaderComponent, descendants: true, isSignal: true }, { propertyName: "badges", first: true, predicate: SectionBadgesComponent, descendants: true, isSignal: true }, { propertyName: "toggle", first: true, predicate: SectionToggleComponent, descendants: true, isSignal: true }, { propertyName: "action", first: true, predicate: ActionComponent, descendants: true, isSignal: true }, { propertyName: "back", first: true, predicate: SectionBackComponent, descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: SectionSearchComponent, descendants: true, isSignal: true }, { propertyName: "filter", first: true, predicate: SectionFilterComponent, descendants: true, isSignal: true }, { propertyName: "filterGroup", first: true, predicate: SectionFilterGroupComponent, descendants: true, isSignal: true }, { propertyName: "stepper", first: true, predicate: SectionStepperComponent, descendants: true, isSignal: true }, { propertyName: "hero", first: true, predicate: SectionHeroComponent, descendants: true, isSignal: true }, { propertyName: "jumbotron", first: true, predicate: JumbotronComponent, descendants: true, isSignal: true }, { propertyName: "carousel", first: true, predicate: CarouselComponent, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: SectionFooterComponent, descendants: true, isSignal: true }, { propertyName: "pagination", first: true, predicate: SectionPaginationComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    @if (header()) {
-      <ng-content select="m-section-header" />
-    }
+        ], queries: [{ propertyName: "badges", first: true, predicate: SectionBadgesComponent, descendants: true, isSignal: true }, { propertyName: "toggle", first: true, predicate: SectionToggleComponent, descendants: true, isSignal: true }, { propertyName: "action", first: true, predicate: ActionComponent, descendants: true, isSignal: true }, { propertyName: "back", first: true, predicate: SectionBackComponent, descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: SectionSearchComponent, descendants: true, isSignal: true }, { propertyName: "filter", first: true, predicate: SectionFilterComponent, descendants: true, isSignal: true }, { propertyName: "filterGroup", first: true, predicate: SectionFilterGroupComponent, descendants: true, isSignal: true }, { propertyName: "stepper", first: true, predicate: SectionStepperComponent, descendants: true, isSignal: true }, { propertyName: "hero", first: true, predicate: SectionHeroComponent, descendants: true, isSignal: true }, { propertyName: "jumbotron", first: true, predicate: JumbotronComponent, descendants: true, isSignal: true }, { propertyName: "carousel", first: true, predicate: CarouselComponent, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: SectionFooterComponent, descendants: true, isSignal: true }, { propertyName: "pagination", first: true, predicate: SectionPaginationComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <!-- Ungated, unlike the slots below: the design Canvas draws its header
+         through an ngTemplateOutlet, which a contentChild query never sees. -->
+    <ng-content select="m-section-header" />
     <div
       class="m-section__collapsible"
       [id]="accordion()?.bodyId"
@@ -17647,14 +17544,14 @@ class SectionComponent extends ConfigComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;min-height:var(--m-section-min-height, 5em);container-type:inline-size;container-name:mag-grid;--_section-px: 1rem;--_section-pt: 1.5rem;--_section-pb: 0rem;--_section-header-py: 1rem}:host(.has-max-height){height:var(--m-section-max-height);overflow:auto}:host(.is-with-border){border:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-sandwich-border){border-block:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}.m-section__collapsible{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);opacity:1}.m-section__collapsible.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none}.m-section__collapsible-content{min-height:0;min-width:0;overflow:clip}.m-section__body{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:stretch;max-width:var(--m-section-max-width);margin-inline:auto}:host(.align-left) .m-section__body{margin-inline-start:0;margin-inline-end:auto}:host(.align-right) .m-section__body{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .m-section__body{margin-inline:auto;justify-content:center}:host(.align-x-left) .m-section__body{justify-content:flex-start}:host(.align-x-center) .m-section__body{justify-content:center}:host(.align-x-right) .m-section__body{justify-content:flex-end}:host(.align-y-top) .m-section__body{align-items:flex-start;align-content:flex-start}:host(.align-y-center) .m-section__body{align-items:center;align-content:center}:host(.align-y-bottom) .m-section__body{align-items:flex-end;align-content:flex-end}:host(.is-full-height){height:100vh;min-height:100vh;overflow:auto}:host(.is-full-height) .m-section__body{flex:1;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;min-height:var(--m-section-min-height, 5em);container-type:inline-size;container-name:mag-grid;--_section-px: 1rem;--_section-pt: 1.5rem;--_section-pb: 0rem;--_section-header-py: 1rem}:host(.has-max-height){height:var(--m-section-max-height);overflow:auto}:host(.is-with-border){border:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-sandwich-border){border-block:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-side-border){border-inline:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-left-border){border-inline-start:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-right-border){border-inline-end:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}.m-section__collapsible{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);opacity:1}.m-section__collapsible.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none}.m-section__collapsible-content{min-height:0;min-width:0;overflow:clip}.m-section__body{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:stretch;max-width:var(--m-section-max-width);margin-inline:auto}:host(.align-left) .m-section__body{margin-inline-start:0;margin-inline-end:auto}:host(.align-right) .m-section__body{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .m-section__body{margin-inline:auto;justify-content:center}:host(.align-x-left) .m-section__body{justify-content:flex-start}:host(.align-x-center) .m-section__body{justify-content:center}:host(.align-x-right) .m-section__body{justify-content:flex-end}:host(.align-y-top) .m-section__body{align-items:flex-start;align-content:flex-start}:host(.align-y-center) .m-section__body{align-items:center;align-content:center}:host(.align-y-bottom) .m-section__body{align-items:flex-end;align-content:flex-end}:host(.is-full-height){height:100vh;min-height:100vh;overflow:auto}:host(.is-full-height) .m-section__body{flex:1;height:100%}:host(.is-full-height) .m-section__collapsible:not(.is-collapsed)>.m-section__collapsible-content{overflow:visible}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'm-section', template: `
-    @if (header()) {
-      <ng-content select="m-section-header" />
-    }
+    <!-- Ungated, unlike the slots below: the design Canvas draws its header
+         through an ngTemplateOutlet, which a contentChild query never sees. -->
+    <ng-content select="m-section-header" />
     <div
       class="m-section__collapsible"
       [id]="accordion()?.bodyId"
@@ -17716,6 +17613,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[class.no-border]': 'resolvedVariant() === "noBorder"',
                         '[class.is-with-border]': 'resolvedVariant() === "withBorder"',
                         '[class.is-sandwich-border]': 'resolvedVariant() === "sandwichBorder"',
+                        '[class.is-side-border]': 'resolvedVariant() === "sideBorder"',
+                        '[class.is-left-border]': 'resolvedVariant() === "leftBorder"',
+                        '[class.is-right-border]': 'resolvedVariant() === "rightBorder"',
                         '[class.align-x-left]': 'resolvedAlignX() === "left"',
                         '[class.align-x-center]': 'resolvedAlignX() === "center"',
                         '[class.align-x-right]': 'resolvedAlignX() === "right"',
@@ -17751,8 +17651,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                                 };
                             },
                         },
-                    ], styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;min-height:var(--m-section-min-height, 5em);container-type:inline-size;container-name:mag-grid;--_section-px: 1rem;--_section-pt: 1.5rem;--_section-pb: 0rem;--_section-header-py: 1rem}:host(.has-max-height){height:var(--m-section-max-height);overflow:auto}:host(.is-with-border){border:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-sandwich-border){border-block:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}.m-section__collapsible{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);opacity:1}.m-section__collapsible.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none}.m-section__collapsible-content{min-height:0;min-width:0;overflow:clip}.m-section__body{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:stretch;max-width:var(--m-section-max-width);margin-inline:auto}:host(.align-left) .m-section__body{margin-inline-start:0;margin-inline-end:auto}:host(.align-right) .m-section__body{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .m-section__body{margin-inline:auto;justify-content:center}:host(.align-x-left) .m-section__body{justify-content:flex-start}:host(.align-x-center) .m-section__body{justify-content:center}:host(.align-x-right) .m-section__body{justify-content:flex-end}:host(.align-y-top) .m-section__body{align-items:flex-start;align-content:flex-start}:host(.align-y-center) .m-section__body{align-items:center;align-content:center}:host(.align-y-bottom) .m-section__body{align-items:flex-end;align-content:flex-end}:host(.is-full-height){height:100vh;min-height:100vh;overflow:auto}:host(.is-full-height) .m-section__body{flex:1;height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionHeaderComponent), { isSignal: true }] }], badges: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionBadgesComponent), { isSignal: true }] }], toggle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionToggleComponent), { isSignal: true }] }], action: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ActionComponent), { isSignal: true }] }], back: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionBackComponent), { isSignal: true }] }], search: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionSearchComponent), { isSignal: true }] }], filter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionFilterComponent), { isSignal: true }] }], filterGroup: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionFilterGroupComponent), { isSignal: true }] }], stepper: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionStepperComponent), { isSignal: true }] }], hero: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionHeroComponent), { isSignal: true }] }], jumbotron: [{ type: i0.ContentChild, args: [i0.forwardRef(() => JumbotronComponent), { isSignal: true }] }], carousel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CarouselComponent), { isSignal: true }] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionFooterComponent), { isSignal: true }] }], pagination: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionPaginationComponent), { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], heightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightMode", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignX: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignX", required: false }] }], alignY: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignY", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inView: [{ type: i0.Output, args: ["inView"] }] } });
+                    ], styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;min-height:var(--m-section-min-height, 5em);container-type:inline-size;container-name:mag-grid;--_section-px: 1rem;--_section-pt: 1.5rem;--_section-pb: 0rem;--_section-header-py: 1rem}:host(.has-max-height){height:var(--m-section-max-height);overflow:auto}:host(.is-with-border){border:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-sandwich-border){border-block:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-side-border){border-inline:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-left-border){border-inline-start:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-right-border){border-inline-end:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}.m-section__collapsible{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);opacity:1}.m-section__collapsible.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none}.m-section__collapsible-content{min-height:0;min-width:0;overflow:clip}.m-section__body{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:stretch;max-width:var(--m-section-max-width);margin-inline:auto}:host(.align-left) .m-section__body{margin-inline-start:0;margin-inline-end:auto}:host(.align-right) .m-section__body{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .m-section__body{margin-inline:auto;justify-content:center}:host(.align-x-left) .m-section__body{justify-content:flex-start}:host(.align-x-center) .m-section__body{justify-content:center}:host(.align-x-right) .m-section__body{justify-content:flex-end}:host(.align-y-top) .m-section__body{align-items:flex-start;align-content:flex-start}:host(.align-y-center) .m-section__body{align-items:center;align-content:center}:host(.align-y-bottom) .m-section__body{align-items:flex-end;align-content:flex-end}:host(.is-full-height){height:100vh;min-height:100vh;overflow:auto}:host(.is-full-height) .m-section__body{flex:1;height:100%}:host(.is-full-height) .m-section__collapsible:not(.is-collapsed)>.m-section__collapsible-content{overflow:visible}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { badges: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionBadgesComponent), { isSignal: true }] }], toggle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionToggleComponent), { isSignal: true }] }], action: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ActionComponent), { isSignal: true }] }], back: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionBackComponent), { isSignal: true }] }], search: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionSearchComponent), { isSignal: true }] }], filter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionFilterComponent), { isSignal: true }] }], filterGroup: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionFilterGroupComponent), { isSignal: true }] }], stepper: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionStepperComponent), { isSignal: true }] }], hero: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionHeroComponent), { isSignal: true }] }], jumbotron: [{ type: i0.ContentChild, args: [i0.forwardRef(() => JumbotronComponent), { isSignal: true }] }], carousel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CarouselComponent), { isSignal: true }] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionFooterComponent), { isSignal: true }] }], pagination: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionPaginationComponent), { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], heightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightMode", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignX: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignX", required: false }] }], alignY: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignY", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inView: [{ type: i0.Output, args: ["inView"] }] } });
 
 class UserApiService {
     http = inject(HttpService);
@@ -19619,25 +19519,166 @@ class RowComponent extends ConfigComponent {
     }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     sectionContext = inject(SECTION_CONTEXT, { optional: true });
     noBorder = computed(() => this.sectionContext?.variant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: RowComponent, isStandalone: true, selector: "m-row", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--m-row-max-width": "resolvedMaxWidth()" }, classAttribute: "m-row" }, usesInheritance: true, ngImport: i0, template: `
-    <div class="m-row__body">
-      <ng-content />
-    </div>
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;grid-column:span 12;width:100%;box-sizing:border-box;border-bottom:1px solid var(--m-backdrop-border);min-height:5em}:host(.no-border){border-bottom:none}:host-context(.is-with-border):last-child,:host-context(.is-sandwich-border):last-child{border-bottom:none}:host.has-padding-y{padding-block:var(--m-row-py, var(--section-pt, var(--_section-pt, 1.5rem)))}.m-row__body{display:flex;flex-wrap:wrap;align-content:flex-start;max-width:var(--m-row-max-width);margin-inline:auto}:host.has-padding-x .m-row__body{padding-inline:var(--m-row-px, var(--section-px, var(--_section-px, 1rem)))}:host.is-center .m-row__body{display:flex;justify-content:center;align-items:center}:host(.align-left) .m-row__body{margin-inline-start:0;margin-inline-end:auto}:host(.align-right) .m-row__body{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .m-row__body{margin-inline:auto;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: RowComponent, isStandalone: true, selector: "m-row", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--m-row-max-width": "resolvedMaxWidth()" }, classAttribute: "m-row" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="m-row__body">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;grid-column:span 12;width:100%;box-sizing:border-box;border-bottom:1px solid var(--m-backdrop-border);min-height:5em}:host(.no-border){border-bottom:none}:host-context(.is-with-border):last-child,:host-context(.is-sandwich-border):last-child{border-bottom:none}:host.has-padding-y{padding-block:var(--m-row-py, var(--section-pt, var(--_section-pt, 1.5rem)))}.m-row__body{display:flex;flex-wrap:wrap;align-content:flex-start;max-width:var(--m-row-max-width);margin-inline:auto}:host.has-padding-x .m-row__body{padding-inline:var(--m-row-px, var(--section-px, var(--_section-px, 1rem)))}:host.is-center .m-row__body{display:flex;justify-content:center;align-items:center}:host(.align-left) .m-row__body{margin-inline-start:0;margin-inline-end:auto}:host(.align-right) .m-row__body{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .m-row__body{margin-inline:auto;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'm-row', template: `
+    <div class="m-row__body">
+      <ng-content />
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'm-row',
+                        '[class]': 'classes()',
+                        '[style.--m-row-max-width]': 'resolvedMaxWidth()',
+                    }, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;grid-column:span 12;width:100%;box-sizing:border-box;border-bottom:1px solid var(--m-backdrop-border);min-height:5em}:host(.no-border){border-bottom:none}:host-context(.is-with-border):last-child,:host-context(.is-sandwich-border):last-child{border-bottom:none}:host.has-padding-y{padding-block:var(--m-row-py, var(--section-pt, var(--_section-pt, 1.5rem)))}.m-row__body{display:flex;flex-wrap:wrap;align-content:flex-start;max-width:var(--m-row-max-width);margin-inline:auto}:host.has-padding-x .m-row__body{padding-inline:var(--m-row-px, var(--section-px, var(--_section-px, 1rem)))}:host.is-center .m-row__body{display:flex;justify-content:center;align-items:center}:host(.align-left) .m-row__body{margin-inline-start:0;margin-inline-end:auto}:host(.align-right) .m-row__body{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .m-row__body{margin-inline:auto;justify-content:center}\n"] }]
+        }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingX", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }] } });
+
+// The line box each heading level draws, straight from `header.sass`: its font
+// size and its line-height. The icon beside a heading is boxed to the same
+// span so the two centre on one another — `--m-header-font-size` is read
+// first, so a caller resizing the heading moves the icon's box with it.
+const HEADER_LINE_BOX = {
+    1: 'calc(var(--m-header-font-size, 2.25rem) * 1.15)',
+    2: 'calc(var(--m-header-font-size, 1.75rem) * 1.2)',
+    3: 'calc(var(--m-header-font-size, 1.375rem) * 1.1)',
+    4: 'calc(var(--m-header-font-size, 1.125rem) * 1.1)',
+    5: 'calc(var(--m-header-font-size, 1rem) * 1.1)',
+    6: 'calc(var(--m-header-font-size, 0.875rem) * 1.1)',
+};
+class SectionHeaderComponent {
+    sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    level = input(3, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    subLabel = input(...(ngDevMode ? [undefined, { debugName: "subLabel" }] : /* istanbul ignore next */ []));
+    // `label` and `subLabel` are authored text rather than translation keys —
+    // forwarded to `m-header` for the label, and skipping `translate` for the
+    // sub. What a bound label needs above all: a value read from data is the
+    // text itself, and resolving it as a key renders nothing.
+    noTranslate = input(false, ...(ngDevMode ? [{ debugName: "noTranslate" }] : /* istanbul ignore next */ []));
+    // The [MessageVariable] values both lines are resolved with — one record for
+    // the pair, because a page holds one record for every dynamic slot it draws
+    // (m-one-ui ADR 0066) and two headings naming the same slot mean the same
+    // datum. Ignored under `noTranslate`, where neither line is looked up.
+    params = input(undefined, ...(ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []));
+    // Draw the sub line above the label instead of below it. The two nodes keep
+    // their order — title first, sub second — whichever way the pair reads, so
+    // reversing is a setting rather than a second way to arrange the children.
+    reverse = input(false, ...(ngDevMode ? [{ debugName: "reverse" }] : /* istanbul ignore next */ []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    menu = input(...(ngDevMode ? [undefined, { debugName: "menu" }] : /* istanbul ignore next */ []));
+    menuName = input(...(ngDevMode ? [undefined, { debugName: "menuName" }] : /* istanbul ignore next */ []));
+    visibilityRule = input(...(ngDevMode ? [undefined, { debugName: "visibilityRule" }] : /* istanbul ignore next */ []));
+    disableRule = input(...(ngDevMode ? [undefined, { debugName: "disableRule" }] : /* istanbul ignore next */ []));
+    extraData = input(...(ngDevMode ? [undefined, { debugName: "extraData" }] : /* istanbul ignore next */ []));
+    align = input(undefined, ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    // The header's own `align` alone. A Section's `align` places boxes — its
+    // body box, and the header's content box below — and a header whose text
+    // followed it could not be left-aligned inside a centred Section at all.
+    alignment = computed(() => this.align() ?? 'left', ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
+    showBack = input(false, ...(ngDevMode ? [{ debugName: "showBack" }] : /* istanbul ignore next */ []));
+    actionButton = input(...(ngDevMode ? [undefined, { debugName: "actionButton" }] : /* istanbul ignore next */ []));
+    // The action Button's accessible name — it renders icon-only, so without a
+    // label a screen reader has nothing to announce.
+    actionLabel = input(...(ngDevMode ? [undefined, { debugName: "actionLabel" }] : /* istanbul ignore next */ []));
+    spacing = input(false, ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
+    maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    actionClick = output();
+    action = output();
+    back = output();
+    translateService = inject(TranslateService);
+    // A computed rather than the impure TranslatePipe, the same trade
+    // HeaderComponent makes: one lookup per sub change instead of one per
+    // change-detection tick, and it still repaints when the language moves.
+    subText = computed(() => this.noTranslate()
+        ? this.subLabel()
+        : this.translateService.translate(this.subLabel(), this.params()), ...(ngDevMode ? [{ debugName: "subText" }] : /* istanbul ignore next */ []));
+    scrollSticky = injectScrollSticky(120, 'none');
+    sectionContext = inject(SECTION_CONTEXT, { optional: true });
+    sidepanel = computed(() => this.sectionContext?.sidepanel() ?? false, ...(ngDevMode ? [{ debugName: "sidepanel" }] : /* istanbul ignore next */ []));
+    noBorder = computed(() => this.sectionContext?.variant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
+    // Falls back to the Section's `maxWidth`: the header sits above the body and
+    // the two are one column, so constraining the body alone left the heading
+    // hanging off the edge of the content it titles. The border stays on the
+    // host and keeps spanning the Section — only this inner box narrows.
+    resolvedMaxWidth = computed(() => this.maxWidth() ?? this.sectionContext?.maxWidth?.(), ...(ngDevMode ? [{ debugName: "resolvedMaxWidth" }] : /* istanbul ignore next */ []));
+    // Where that box sits once it is narrower than the row. The Section's
+    // `align` — the same value that places `.m-section__body` — so header and
+    // body stay in one column.
+    boxAlign = computed(() => this.sectionContext?.align?.() ?? 'left', ...(ngDevMode ? [{ debugName: "boxAlign" }] : /* istanbul ignore next */ []));
+    // The icon sits in the row, not in the heading, so it has no line box of its
+    // own to centre against — it gets the heading's.
+    iconBox = computed(() => HEADER_LINE_BOX[this.level()], ...(ngDevMode ? [{ debugName: "iconBox" }] : /* istanbul ignore next */ []));
+    isSticky = computed(() => this.sticky() && this.scrollSticky(), ...(ngDevMode ? [{ debugName: "isSticky" }] : /* istanbul ignore next */ []));
+    hasMenu = computed(() => !!this.menu() || !!this.menuName(), ...(ngDevMode ? [{ debugName: "hasMenu" }] : /* istanbul ignore next */ []));
+    actionConfig = computed(() => {
+        const icon = this.actionButton();
+        if (!icon)
+            return undefined;
+        return {
+            icon,
+            label: this.actionLabel(),
+            iconOnly: true,
+            variant: 'ghost',
+        };
+    }, ...(ngDevMode ? [{ debugName: "actionConfig" }] : /* istanbul ignore next */ []));
+    // Read through SECTION_CONTEXT rather than by injecting the directive:
+    // every `<m-section>` provides the context, so the nearest one wins and a
+    // header only ever draws the toggle of the Section it belongs to. Injecting
+    // SectionAccordionDirective instead walks past that Section to any ancestor
+    // carrying the behaviour, which put an arrow on every nested header. Null
+    // where the Section has no active accordion (CONTEXT.md SectionAccordion).
+    accordion = computed(() => this.sectionContext?.accordion?.() ?? null, ...(ngDevMode ? [{ debugName: "accordion" }] : /* istanbul ignore next */ []));
+    // toggleIcon set: the glyph itself swaps between closed/open, already
+    // "pointing" the right way, so it never rotates. toggleIcon absent: the
+    // one glyph (icon, or the default chevron) rotates 180° instead.
+    toggleIconName = computed(() => {
+        const accordion = this.accordion();
+        if (!accordion)
+            return undefined;
+        const toggleIcon = accordion.toggleIcon();
+        if (toggleIcon) {
+            return accordion.isOpen() ? toggleIcon : accordion.icon() ?? 'accordion_chevron';
+        }
+        return accordion.icon() ?? 'accordion_chevron';
+    }, ...(ngDevMode ? [{ debugName: "toggleIconName" }] : /* istanbul ignore next */ []));
+    toggleRotates = computed(() => !this.accordion()?.toggleIcon(), ...(ngDevMode ? [{ debugName: "toggleRotates" }] : /* istanbul ignore next */ []));
+    onToggleClick() {
+        this.accordion()?.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionHeaderComponent, isStandalone: true, selector: "m-section-header", inputs: { sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, noTranslate: { classPropertyName: "noTranslate", publicName: "noTranslate", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null }, menuName: { classPropertyName: "menuName", publicName: "menuName", isSignal: true, isRequired: false, transformFunction: null }, visibilityRule: { classPropertyName: "visibilityRule", publicName: "visibilityRule", isSignal: true, isRequired: false, transformFunction: null }, disableRule: { classPropertyName: "disableRule", publicName: "disableRule", isSignal: true, isRequired: false, transformFunction: null }, extraData: { classPropertyName: "extraData", publicName: "extraData", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, actionButton: { classPropertyName: "actionButton", publicName: "actionButton", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", action: "action", back: "back" }, host: { properties: { "class.is-sticky-enabled": "sticky()", "class.is-sticky": "isSticky()", "class.has-menu": "hasMenu()", "class.align-left": "alignment() === \"left\"", "class.align-center": "alignment() === \"center\"", "class.align-right": "alignment() === \"right\"", "class.has-sidepanel": "sidepanel()", "class.no-border": "noBorder()", "class.spacing": "spacing()", "class.box-center": "boxAlign() === \"center\"", "class.box-right": "boxAlign() === \"right\"", "style.--m-section-header-max-width": "resolvedMaxWidth()", "style.--m-section-header-icon-box": "iconBox()" }, classAttribute: "m-section-header" }, ngImport: i0, template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n     Hoisted into a template rather than written twice: an `<ng-content>` may\n     appear once per selector in a component, so the duplicated copy caught\n     nothing and a header projecting a title rendered it in the `spacing`\n     branch alone. -->\n<ng-template #body>\n  @if (accordion(); as accordionRef) {\n    <div\n      class=\"section-header__toggle\"\n      [class.section-header__toggle--rotate]=\"toggleRotates()\"\n      [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n      [id]=\"accordionRef.headerId\"\n      [attr.aria-expanded]=\"accordionRef.isOpen()\"\n      [attr.aria-controls]=\"accordionRef.bodyId\"\n    >\n      <m-button\n        [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n        (clicked)=\"onToggleClick()\" />\n    </div>\n  }\n  @if (showBack()) {\n    <div class=\"section-header__back\">\n      <m-button\n        [config]=\"{ icon: 'chevron-left', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (!label() && icon(); as iconName) {\n    <!-- Only where no label is written. A header with one hands the icon to\n         `m-header`, which draws it inside the heading's line box and so on the\n         heading's own centre line. Beside a projected title there is no such\n         box to borrow, so the glyph is boxed to the level's line box here and\n         centred in it \u2014 otherwise it centres against the whole title column,\n         which on the Canvas is the label slot's drop rect stacked above the\n         heading. -->\n    <div class=\"section-header__icon\">\n      <m-icon [name]=\"iconName\" />\n    </div>\n  }\n  <div\n    class=\"section-header__title\"\n    [class.section-header__title--reverse]=\"reverse()\"\n  >\n    <!-- The title slot is the catch-all rather than a `[label]` one: every\n         header already projecting a heading writes it unselected, and a\n         selector here would drop that content on the floor. What the design\n         page emits \u2014 `<span label>` \u2014 is caught by it too, nothing else\n         claiming the node. -->\n    <ng-content />\n    <!-- The written label, drawn beside the slot rather than as its\n         `ng-content` fallback. A fallback renders only while *nothing* is\n         projected, and the design Canvas always projects the slot span \u2014\n         empty until a Control is dropped in it \u2014 so a fallback there would\n         blank the label a header is still configured with. `label` answers\n         instead, which no header projecting a title sets. -->\n    @if (label()) {\n      <m-header\n        [level]=\"level()\"\n        [label]=\"label()\"\n        [icon]=\"icon()\"\n        [params]=\"params()\"\n        [noTranslate]=\"noTranslate()\" />\n    }\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\n  </div>\n  <!-- A FilterGroup projected into the header row, selected by tag rather than\n       by an attribute \u2014 the same shape a Section catches its `m-action` with.\n       A header has room for one icon and not for a row, so a group landing\n       here is squeezed by placement (ADR 0025); nothing here enforces that,\n       the caller binding `[squeeze]` on the tag it projects. -->\n  <div class=\"section-header__filters\">\n    <ng-content select=\"m-section-filter-group\" />\n  </div>\n  @if (actionConfig(); as action) {\n    <div class=\"section-header__action\">\n      <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n    </div>\n  }\n  @if (hasMenu()) {\n    <div class=\"section-header__menu\">\n      <m-context-menu\n        [config]=\"menu()\"\n        [name]=\"menuName()\"\n        [visibilityRule]=\"visibilityRule()\"\n        [disableRule]=\"disableRule()\"\n        [extraData]=\"extraData()\"\n        (action)=\"action.emit($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n<!-- Always the same two boxes, whether or not a `maxWidth` is in force. The\n     border and the sticky backdrop live on the host and keep spanning the\n     Section's full width; only this container narrows and is placed by the\n     Section's `align`, so the heading lines up with the body under it. -->\n<div class=\"section-header__container\">\n  <div class=\"section-header__inner\">\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </div>\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;min-width:0;max-width:var(--m-section-header-max-width, none);margin-inline:0 auto}:host(.box-center) .section-header__container{margin-inline:auto}:host(.box-right) .section-header__container{margin-inline:auto 0}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.spacing) .section-header__inner{padding:1rem 1.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__filters{display:contents}.section-header__filters m-section-filter-group{width:auto;flex-shrink:0;border-bottom:none}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;height:var(--m-section-header-icon-box, 1.5125rem)}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ContextMenuComponent, selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted", "options"], outputs: ["toggleChange", "action"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "icon", "actionButton", "actionLabel", "noTranslate", "params"], outputs: ["actionClick"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'm-row', template: `
-    <div class="m-row__body">
-      <ng-content />
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'm-row',
-                        '[class]': 'classes()',
-                        '[style.--m-row-max-width]': 'resolvedMaxWidth()',
-                    }, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;grid-column:span 12;width:100%;box-sizing:border-box;border-bottom:1px solid var(--m-backdrop-border);min-height:5em}:host(.no-border){border-bottom:none}:host-context(.is-with-border):last-child,:host-context(.is-sandwich-border):last-child{border-bottom:none}:host.has-padding-y{padding-block:var(--m-row-py, var(--section-pt, var(--_section-pt, 1.5rem)))}.m-row__body{display:flex;flex-wrap:wrap;align-content:flex-start;max-width:var(--m-row-max-width);margin-inline:auto}:host.has-padding-x .m-row__body{padding-inline:var(--m-row-px, var(--section-px, var(--_section-px, 1rem)))}:host.is-center .m-row__body{display:flex;justify-content:center;align-items:center}:host(.align-left) .m-row__body{margin-inline-start:0;margin-inline-end:auto}:host(.align-right) .m-row__body{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .m-row__body{margin-inline:auto;justify-content:center}\n"] }]
-        }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingX", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }] } });
+            args: [{ selector: 'm-section-header', imports: [
+                        NgTemplateOutlet,
+                        ContextMenuComponent,
+                        HeaderComponent$1,
+                        IconComponent,
+                        ButtonComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'm-section-header',
+                        '[class.is-sticky-enabled]': 'sticky()',
+                        '[class.is-sticky]': 'isSticky()',
+                        '[class.has-menu]': 'hasMenu()',
+                        '[class.align-left]': 'alignment() === "left"',
+                        '[class.align-center]': 'alignment() === "center"',
+                        '[class.align-right]': 'alignment() === "right"',
+                        '[class.has-sidepanel]': 'sidepanel()',
+                        '[class.no-border]': 'noBorder()',
+                        '[class.spacing]': 'spacing()',
+                        '[class.box-center]': 'boxAlign() === "center"',
+                        '[class.box-right]': 'boxAlign() === "right"',
+                        '[style.--m-section-header-max-width]': 'resolvedMaxWidth()',
+                        '[style.--m-section-header-icon-box]': 'iconBox()',
+                    }, template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n     Hoisted into a template rather than written twice: an `<ng-content>` may\n     appear once per selector in a component, so the duplicated copy caught\n     nothing and a header projecting a title rendered it in the `spacing`\n     branch alone. -->\n<ng-template #body>\n  @if (accordion(); as accordionRef) {\n    <div\n      class=\"section-header__toggle\"\n      [class.section-header__toggle--rotate]=\"toggleRotates()\"\n      [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n      [id]=\"accordionRef.headerId\"\n      [attr.aria-expanded]=\"accordionRef.isOpen()\"\n      [attr.aria-controls]=\"accordionRef.bodyId\"\n    >\n      <m-button\n        [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n        (clicked)=\"onToggleClick()\" />\n    </div>\n  }\n  @if (showBack()) {\n    <div class=\"section-header__back\">\n      <m-button\n        [config]=\"{ icon: 'chevron-left', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (!label() && icon(); as iconName) {\n    <!-- Only where no label is written. A header with one hands the icon to\n         `m-header`, which draws it inside the heading's line box and so on the\n         heading's own centre line. Beside a projected title there is no such\n         box to borrow, so the glyph is boxed to the level's line box here and\n         centred in it \u2014 otherwise it centres against the whole title column,\n         which on the Canvas is the label slot's drop rect stacked above the\n         heading. -->\n    <div class=\"section-header__icon\">\n      <m-icon [name]=\"iconName\" />\n    </div>\n  }\n  <div\n    class=\"section-header__title\"\n    [class.section-header__title--reverse]=\"reverse()\"\n  >\n    <!-- The title slot is the catch-all rather than a `[label]` one: every\n         header already projecting a heading writes it unselected, and a\n         selector here would drop that content on the floor. What the design\n         page emits \u2014 `<span label>` \u2014 is caught by it too, nothing else\n         claiming the node. -->\n    <ng-content />\n    <!-- The written label, drawn beside the slot rather than as its\n         `ng-content` fallback. A fallback renders only while *nothing* is\n         projected, and the design Canvas always projects the slot span \u2014\n         empty until a Control is dropped in it \u2014 so a fallback there would\n         blank the label a header is still configured with. `label` answers\n         instead, which no header projecting a title sets. -->\n    @if (label()) {\n      <m-header\n        [level]=\"level()\"\n        [label]=\"label()\"\n        [icon]=\"icon()\"\n        [params]=\"params()\"\n        [noTranslate]=\"noTranslate()\" />\n    }\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\n  </div>\n  <!-- A FilterGroup projected into the header row, selected by tag rather than\n       by an attribute \u2014 the same shape a Section catches its `m-action` with.\n       A header has room for one icon and not for a row, so a group landing\n       here is squeezed by placement (ADR 0025); nothing here enforces that,\n       the caller binding `[squeeze]` on the tag it projects. -->\n  <div class=\"section-header__filters\">\n    <ng-content select=\"m-section-filter-group\" />\n  </div>\n  @if (actionConfig(); as action) {\n    <div class=\"section-header__action\">\n      <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n    </div>\n  }\n  @if (hasMenu()) {\n    <div class=\"section-header__menu\">\n      <m-context-menu\n        [config]=\"menu()\"\n        [name]=\"menuName()\"\n        [visibilityRule]=\"visibilityRule()\"\n        [disableRule]=\"disableRule()\"\n        [extraData]=\"extraData()\"\n        (action)=\"action.emit($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n<!-- Always the same two boxes, whether or not a `maxWidth` is in force. The\n     border and the sticky backdrop live on the host and keep spanning the\n     Section's full width; only this container narrows and is placed by the\n     Section's `align`, so the heading lines up with the body under it. -->\n<div class=\"section-header__container\">\n  <div class=\"section-header__inner\">\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </div>\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;min-width:0;max-width:var(--m-section-header-max-width, none);margin-inline:0 auto}:host(.box-center) .section-header__container{margin-inline:auto}:host(.box-right) .section-header__container{margin-inline:auto 0}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.spacing) .section-header__inner{padding:1rem 1.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__filters{display:contents}.section-header__filters m-section-filter-group{width:auto;flex-shrink:0;border-bottom:none}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;height:var(--m-section-header-icon-box, 1.5125rem)}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"] }]
+        }], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], noTranslate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noTranslate", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }], reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: false }] }], menuName: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuName", required: false }] }], visibilityRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibilityRule", required: false }] }], disableRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRule", required: false }] }], extraData: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraData", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], actionButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionButton", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], action: [{ type: i0.Output, args: ["action"] }], back: [{ type: i0.Output, args: ["back"] }] } });
 
 const SECTION_TABLE_CONTEXT = new InjectionToken('SECTION_TABLE_CONTEXT');
 
@@ -21632,7 +21673,8 @@ var checkboxGroup = /*#__PURE__*/Object.freeze({
 
 class DropdownBoxComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    selected = input('', ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** The values ticked, as a list whichever Field drew the panel. */
+    selected = input([], ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     activeIndex = input(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     action = output();
@@ -21647,13 +21689,7 @@ class DropdownBoxComponent {
                 .querySelectorAll('.dropdown-box__option')[index]?.scrollIntoView?.({ block: 'nearest' });
         });
     }
-    isSelected = (value) => {
-        const sel = this.selected();
-        if (Array.isArray(sel)) {
-            return sel.includes(value);
-        }
-        return sel === value;
-    };
+    isSelected = (value) => this.selected().includes(value);
     // Only emit a selection event for enabled options.
     selectOption = (option) => {
         if (option.disabled)
@@ -21744,8 +21780,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.dropdown-box{overflow-y:auto;max-height:15rem;margin:0;padding:.375rem;list-style:none;border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:dropdown-in .2s ease-out}.dropdown-box__checkbox{flex-shrink:0;width:14px;height:14px;margin-right:8px;pointer-events:none;accent-color:var(--m-mm);cursor:pointer}.dropdown-box__option{display:flex;align-items:center;padding:.625rem .75rem;border-radius:.375rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:background .15s ease}.dropdown-box__option:hover,.dropdown-box__option--active{background:color-mix(in srgb,var(--m-focus) 8%,transparent)}.dropdown-box__option--selected{font-weight:600;color:var(--m-mm)}.dropdown-box__option--disabled{opacity:.4;pointer-events:none}.dropdown-box__empty{padding:.75rem;text-align:center;color:var(--m-text-tertiary);font-size:.875rem}@keyframes dropdown-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host(.open-upward) .dropdown-box{animation:dropdown-in-up .2s ease-out}@keyframes dropdown-in-up{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom) .dropdown-box{max-height:70vh;border:none;border-radius:0;background:transparent;box-shadow:none;animation:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
-class DropdownInputComponent extends BaseInputComponent {
-    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+/** The trigger both option Fields draw: a searchable text input and a chevron. */
+const DROPDOWN_TEMPLATE = `
+  @if (config(); as dropdown) {
+    @if (dropdown.label) {
+      <m-label
+        [for]="dropdown.name ?? ''"
+        [placeholder]="dropdown.label"
+        [params]="dropdown.params"
+        [required]="required()"
+        [disabled]="disabled()"
+      />
+    }
+    <div
+      class="trigger-wrap"
+      #wrapper
+      [mSelector]="selectorConfig()"
+      [disabled]="disabled() || readonly() || !!config()?.readonly"
+      (opened)="onOpened()"
+      (closed)="onClosed()"
+      (focusin)="isFocused.set(true)"
+      (focusout)="isFocused.set(false)"
+    >
+      <m-text-input
+        [config]="triggerInputConfig()"
+        [value]="displayValue()"
+        [disabled]="disabled()"
+        [invalid]="invalid()"
+        [hideErrors]="true"
+        [(touched)]="touched"
+        [focused]="focused()"
+        (valueChange)="onInput($event)"
+        (click)="preventToggleWhenOpen($event)"
+        (keydown.space)="$event.stopPropagation()"
+        (keydown.enter)="onEnter($event)"
+        (keydown.arrowdown)="onArrow($event, 1)"
+        (keydown.arrowup)="onArrow($event, -1)"
+        (keydown.tab)="$event.stopPropagation()"
+      />
+      <m-button [disabled]="disabled()" [config]="chevron()" />
+    </div>
+    @if (showErrors()) {
+      @for (error of errors(); track $index) {
+        <m-text-output
+          variant="footer"
+          color="error"
+          [label]="error.message"
+        />
+      }
+    }
+  }
+`;
+const DROPDOWN_IMPORTS = [
+    LabelComponent,
+    TextOutputComponent,
+    TextInputComponent,
+    ButtonComponent,
+    SelectorDirective,
+];
+/**
+ * Everything a Dropdown and a Multiselect share: the options, the search, the
+ * keyboard walk and the panel. What differs is only what the Field holds — one
+ * value or a list — so a subclass says which values are selected and what a
+ * pick does to them.
+ */
+class BaseDropdownComponent extends BaseInputComponent {
     config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -21777,7 +21876,6 @@ class DropdownInputComponent extends BaseInputComponent {
         // what clicking that input already does, so Tab walks past it.
         tabindex: -1,
     }), ...(ngDevMode ? [{ debugName: "chevron" }] : /* istanbul ignore next */ []));
-    isMultiselect = computed(() => this.config()?.type === InputType.MULTISELECT || !!this.config()?.multiple, ...(ngDevMode ? [{ debugName: "isMultiselect" }] : /* istanbul ignore next */ []));
     triggerInputConfig = computed(() => {
         const dropdown = this.config();
         return {
@@ -21791,9 +21889,8 @@ class DropdownInputComponent extends BaseInputComponent {
     dropdownOptions = computed(() => {
         const runtimeOptions = this.options();
         const source = runtimeOptions ?? this.config()?.options;
-        if (typeof source === 'function') {
+        if (typeof source === 'function')
             return source();
-        }
         if (source?.length)
             return source;
         return this.assetOptions();
@@ -21814,7 +21911,8 @@ class DropdownInputComponent extends BaseInputComponent {
             return this.dropdownOptions();
         return this.dropdownOptions().filter((o) => {
             const label = this.optionLabel(o).toLowerCase();
-            return label.includes(search) || o.value.toLowerCase().includes(search);
+            return (label.includes(search) ||
+                String(o.value).toLowerCase().includes(search));
         });
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     /** The option ↑/↓ point at while the panel is open; -1 is none. Reset as the search narrows the list. */
@@ -21830,58 +21928,31 @@ class DropdownInputComponent extends BaseInputComponent {
         }
         return from;
     };
-    displayValue = computed(() => {
-        if (this.toggle())
-            return this.searchTerm();
-        const val = this.value();
-        if (this.isMultiselect()) {
-            if (Array.isArray(val)) {
-                if (val.length === 0)
-                    return '';
-                if (val.length === 1) {
-                    return this.optionLabel(this.dropdownOptions().find((o) => o.value === val[0]));
-                }
-                const translation = this.translateService.translate(`selected?count=${val.length}`);
-                return translation.includes('selected')
-                    ? `${val.length} Selected`
-                    : translation;
-            }
+    /** One pick reads as its option's label, several as a count. */
+    selectionLabel = computed(() => {
+        const values = this.selectedValues();
+        if (values.length === 0)
             return '';
-        }
-        else {
-            return this.optionLabel(this.dropdownOptions().find((o) => o.value === val));
-        }
-    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+        if (values.length === 1) {
+            return this.optionLabel(this.dropdownOptions().find((o) => o.value === values[0]));
+        }
+        const translation = this.translateService.translate(`selected?count=${values.length}`);
+        return translation.includes('selected')
+            ? `${values.length} Selected`
+            : translation;
+    }, ...(ngDevMode ? [{ debugName: "selectionLabel" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => this.toggle() ? this.searchTerm() : this.selectionLabel(), ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     placeholderText = computed(() => {
-        const config = this.config();
         if (this.toggle()) {
-            const val = this.value();
-            if (this.isMultiselect()) {
-                if (Array.isArray(val) && val.length > 0) {
-                    if (val.length === 1) {
-                        return this.optionLabel(this.dropdownOptions().find((o) => o.value === val[0]));
-                    }
-                    const translation = this.translateService.translate(`selected?count=${val.length}`);
-                    return translation.includes('selected')
-                        ? `${val.length} Selected`
-                        : translation;
-                }
-            }
-            else {
-                const label = this.optionLabel(this.dropdownOptions().find((o) => o.value === val));
-                if (label)
-                    return label;
-            }
+            const label = this.selectionLabel();
+            if (label)
+                return label;
         }
-        return config?.placeholder
-            ? this.translateService.translate(config.placeholder)
-            : '';
+        const placeholder = this.config()
+            ?.placeholder;
+        return placeholder ? this.translateService.translate(placeholder) : '';
     }, ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
     wrapperRef = viewChild('wrapper', ...(ngDevMode ? [{ debugName: "wrapperRef" }] : /* istanbul ignore next */ []));
-    setValue = (value) => {
-        this.value.set(value);
-        this.touched.set(true);
-    };
     selectorConfig = computed(() => ({
         component: DropdownBoxComponent,
         base: 'm-dropdown-input',
@@ -21890,38 +21961,22 @@ class DropdownInputComponent extends BaseInputComponent {
         dir: this.dir(),
         bindings: [
             inputBinding('options', this.filteredOptions),
-            inputBinding('selected', this.value),
-            inputBinding('multiple', this.isMultiselect),
+            inputBinding('selected', this.selectedValues),
+            inputBinding('multiple', () => this.multiple),
             inputBinding('activeIndex', this.activeIndex),
-            outputBinding('action', this.selectOption),
+            outputBinding('action', (option) => this.selectOption(option)),
         ],
     }), ...(ngDevMode ? [{ debugName: "selectorConfig" }] : /* istanbul ignore next */ []));
-    selectOption = (option) => {
-        if (this.isMultiselect()) {
-            const val = this.value();
-            const current = Array.isArray(val) ? val : val ? [val] : [];
-            const index = current.indexOf(option.value);
-            let nextValue;
-            if (index > -1) {
-                nextValue = current.filter((v) => v !== option.value);
-            }
-            else {
-                nextValue = [...current, option.value];
-            }
-            this.setValue(nextValue);
-        }
-        else {
-            this.setValue(option.value);
-            this.toggle.set(false);
-            this.searchTerm.set('');
-            setTimeout(() => this.wrapperRef()?.nativeElement.click(), 0);
-        }
+    /** Shuts the panel after a pick, the way a click on the trigger would. */
+    closePanel = () => {
+        this.toggle.set(false);
+        this.searchTerm.set('');
+        setTimeout(() => this.wrapperRef()?.nativeElement.click(), 0);
     };
     onOpened = () => {
         this.toggle.set(true);
         this.searchTerm.set('');
-        const val = this.value();
-        const current = Array.isArray(val) ? val[0] : val;
+        const current = this.selectedValues()[0];
         this.activeIndex.set(this.filteredOptions().findIndex((o) => o.value === current));
     };
     // Focus stays in the trigger input (it is the search box), so ↑/↓ move the
@@ -21956,123 +22011,81 @@ class DropdownInputComponent extends BaseInputComponent {
             event.stopPropagation();
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DropdownInputComponent, isStandalone: true, selector: "m-dropdown-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", toggle: "toggleChange" }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    @if (config(); as dropdown) {
-      @if (dropdown.label) {
-        <m-label
-          [for]="dropdown.name ?? ''"
-          [placeholder]="dropdown.label"
-          [params]="dropdown.params"
-          [required]="required()"
-          [disabled]="disabled()"
-        />
-      }
-      <div
-        class="trigger-wrap"
-        #wrapper
-        [mSelector]="selectorConfig()"
-        [disabled]="disabled() || readonly() || !!config()?.readonly"
-        (opened)="onOpened()"
-        (closed)="onClosed()"
-        (focusin)="isFocused.set(true)"
-        (focusout)="isFocused.set(false)"
-      >
-        <m-text-input
-          [config]="triggerInputConfig()"
-          [value]="displayValue()"
-          [disabled]="disabled()"
-          [invalid]="invalid()"
-          [hideErrors]="true"
-          [(touched)]="touched"
-          [focused]="focused()"
-          (valueChange)="onInput($event)"
-          (click)="preventToggleWhenOpen($event)"
-          (keydown.space)="$event.stopPropagation()"
-          (keydown.enter)="onEnter($event)"
-          (keydown.arrowdown)="onArrow($event, 1)"
-          (keydown.arrowup)="onArrow($event, -1)"
-          (keydown.tab)="$event.stopPropagation()"
-        />
-        <m-button [disabled]="disabled()" [config]="chevron()" />
-      </div>
-      @if (showErrors()) {
-        @for (error of errors(); track $index) {
-          <m-text-output
-            variant="footer"
-            color="error"
-            [label]="error.message"
-          />
-        }
-      }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: BaseDropdownComponent, isStandalone: true, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", toggle: "toggleChange" }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseDropdownComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }, { type: i0.Output, args: ["toggleChange"] }], wrapperRef: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }] } });
+
+/** One value from a list. A list of values is `m-multiselect-input`. */
+class DropdownInputComponent extends BaseDropdownComponent {
+    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    multiple = false;
+    selectedValues = computed(() => {
+        const value = this.value();
+        return value === undefined || value === '' ? [] : [value];
+    }, ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    setValue = (value) => {
+        this.value.set(value);
+        this.touched.set(true);
+    };
+    selectOption(option) {
+        this.setValue(option.value);
+        this.closePanel();
     }
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.trigger-wrap{position:relative;--m-text-input-padding-right: 2.25em }.trigger-wrap m-button{position:absolute;right:0;top:0;bottom:0;--m-button-size: 1em !important;height:100%;border-radius:0 var(--m-input-radius, calc(var(--input-size, 1em) * .5)) var(--m-input-radius, calc(var(--input-size, 1em) * .5)) 0;--m-button-radius: 0 var(--m-input-radius, calc(var(--input-size, 1em) * .5)) var(--m-input-radius, calc(var(--input-size, 1em) * .5)) 0}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "params", "required", "disabled", "color", "noTranslate"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "fontWeight", "label", "noTranslate", "params"], outputs: ["configChange", "clicked"] }, { kind: "component", type: TextInputComponent, selector: "m-text-input", inputs: ["value", "config", "required", "disabled", "invalid", "touched", "focused", "errors", "hideErrors"], outputs: ["valueChange", "touchedChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: SelectorDirective, selector: "[mSelector]", inputs: ["mSelector", "disabled"], outputs: ["opened", "closed"], exportAs: ["mSelector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DropdownInputComponent, isStandalone: true, selector: "m-dropdown-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "\n  @if (config(); as dropdown) {\n    @if (dropdown.label) {\n      <m-label\n        [for]=\"dropdown.name ?? ''\"\n        [placeholder]=\"dropdown.label\"\n        [params]=\"dropdown.params\"\n        [required]=\"required()\"\n        [disabled]=\"disabled()\"\n      />\n    }\n    <div\n      class=\"trigger-wrap\"\n      #wrapper\n      [mSelector]=\"selectorConfig()\"\n      [disabled]=\"disabled() || readonly() || !!config()?.readonly\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      (focusin)=\"isFocused.set(true)\"\n      (focusout)=\"isFocused.set(false)\"\n    >\n      <m-text-input\n        [config]=\"triggerInputConfig()\"\n        [value]=\"displayValue()\"\n        [disabled]=\"disabled()\"\n        [invalid]=\"invalid()\"\n        [hideErrors]=\"true\"\n        [(touched)]=\"touched\"\n        [focused]=\"focused()\"\n        (valueChange)=\"onInput($event)\"\n        (click)=\"preventToggleWhenOpen($event)\"\n        (keydown.space)=\"$event.stopPropagation()\"\n        (keydown.enter)=\"onEnter($event)\"\n        (keydown.arrowdown)=\"onArrow($event, 1)\"\n        (keydown.arrowup)=\"onArrow($event, -1)\"\n        (keydown.tab)=\"$event.stopPropagation()\"\n      />\n      <m-button [disabled]=\"disabled()\" [config]=\"chevron()\" />\n    </div>\n    @if (showErrors()) {\n      @for (error of errors(); track $index) {\n        <m-text-output\n          variant=\"footer\"\n          color=\"error\"\n          [label]=\"error.message\"\n        />\n      }\n    }\n  }\n", isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.trigger-wrap{position:relative;--m-text-input-padding-right: 2.25em }.trigger-wrap m-button{position:absolute;right:0;top:0;bottom:0;--m-button-size: 1em !important;height:100%;border-radius:0 var(--m-input-radius, calc(var(--input-size, 1em) * .5)) var(--m-input-radius, calc(var(--input-size, 1em) * .5)) 0;--m-button-radius: 0 var(--m-input-radius, calc(var(--input-size, 1em) * .5)) var(--m-input-radius, calc(var(--input-size, 1em) * .5)) 0}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "params", "required", "disabled", "color", "noTranslate"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "fontWeight", "label", "noTranslate", "params"], outputs: ["configChange", "clicked"] }, { kind: "component", type: TextInputComponent, selector: "m-text-input", inputs: ["value", "config", "required", "disabled", "invalid", "touched", "focused", "errors", "hideErrors"], outputs: ["valueChange", "touchedChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: SelectorDirective, selector: "[mSelector]", inputs: ["mSelector", "disabled"], outputs: ["opened", "closed"], exportAs: ["mSelector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'm-dropdown-input', template: `
-    @if (config(); as dropdown) {
-      @if (dropdown.label) {
-        <m-label
-          [for]="dropdown.name ?? ''"
-          [placeholder]="dropdown.label"
-          [params]="dropdown.params"
-          [required]="required()"
-          [disabled]="disabled()"
-        />
-      }
-      <div
-        class="trigger-wrap"
-        #wrapper
-        [mSelector]="selectorConfig()"
-        [disabled]="disabled() || readonly() || !!config()?.readonly"
-        (opened)="onOpened()"
-        (closed)="onClosed()"
-        (focusin)="isFocused.set(true)"
-        (focusout)="isFocused.set(false)"
-      >
-        <m-text-input
-          [config]="triggerInputConfig()"
-          [value]="displayValue()"
-          [disabled]="disabled()"
-          [invalid]="invalid()"
-          [hideErrors]="true"
-          [(touched)]="touched"
-          [focused]="focused()"
-          (valueChange)="onInput($event)"
-          (click)="preventToggleWhenOpen($event)"
-          (keydown.space)="$event.stopPropagation()"
-          (keydown.enter)="onEnter($event)"
-          (keydown.arrowdown)="onArrow($event, 1)"
-          (keydown.arrowup)="onArrow($event, -1)"
-          (keydown.tab)="$event.stopPropagation()"
-        />
-        <m-button [disabled]="disabled()" [config]="chevron()" />
-      </div>
-      @if (showErrors()) {
-        @for (error of errors(); track $index) {
-          <m-text-output
-            variant="footer"
-            color="error"
-            [label]="error.message"
-          />
-        }
-      }
-    }
-  `, imports: [
-                        LabelComponent,
-                        TextOutputComponent,
-                        TextInputComponent,
-                        ButtonComponent,
-                        SelectorDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.trigger-wrap{position:relative;--m-text-input-padding-right: 2.25em }.trigger-wrap m-button{position:absolute;right:0;top:0;bottom:0;--m-button-size: 1em !important;height:100%;border-radius:0 var(--m-input-radius, calc(var(--input-size, 1em) * .5)) var(--m-input-radius, calc(var(--input-size, 1em) * .5)) 0;--m-button-radius: 0 var(--m-input-radius, calc(var(--input-size, 1em) * .5)) var(--m-input-radius, calc(var(--input-size, 1em) * .5)) 0}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }, { type: i0.Output, args: ["toggleChange"] }], wrapperRef: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }] } });
+            args: [{ selector: 'm-dropdown-input', template: DROPDOWN_TEMPLATE, imports: DROPDOWN_IMPORTS, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.trigger-wrap{position:relative;--m-text-input-padding-right: 2.25em }.trigger-wrap m-button{position:absolute;right:0;top:0;bottom:0;--m-button-size: 1em !important;height:100%;border-radius:0 var(--m-input-radius, calc(var(--input-size, 1em) * .5)) var(--m-input-radius, calc(var(--input-size, 1em) * .5)) 0;--m-button-radius: 0 var(--m-input-radius, calc(var(--input-size, 1em) * .5)) var(--m-input-radius, calc(var(--input-size, 1em) * .5)) 0}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 var dropdown = /*#__PURE__*/Object.freeze({
     __proto__: null,
     DropdownInputComponent: DropdownInputComponent
 });
 
+/** A list of values from a list. One value is `m-dropdown-input`. */
+class MultiselectInputComponent extends BaseDropdownComponent {
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    multiple = true;
+    // Read defensively: an untyped form model can still hand over one bare value.
+    selectedValues = computed(() => {
+        const value = this.value();
+        if (Array.isArray(value))
+            return value;
+        return typeof value === 'string' || typeof value === 'number'
+            ? value === ''
+                ? []
+                : [value]
+            : [];
+    }, ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    setValue = (value) => {
+        this.value.set(value);
+        this.touched.set(true);
+    };
+    // The panel stays open across picks; each one ticks or unticks its row.
+    selectOption(option) {
+        const current = this.selectedValues();
+        this.setValue(current.includes(option.value)
+            ? current.filter((v) => v !== option.value)
+            : [...current, option.value]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MultiselectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MultiselectInputComponent, isStandalone: true, selector: "m-multiselect-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "\n  @if (config(); as dropdown) {\n    @if (dropdown.label) {\n      <m-label\n        [for]=\"dropdown.name ?? ''\"\n        [placeholder]=\"dropdown.label\"\n        [params]=\"dropdown.params\"\n        [required]=\"required()\"\n        [disabled]=\"disabled()\"\n      />\n    }\n    <div\n      class=\"trigger-wrap\"\n      #wrapper\n      [mSelector]=\"selectorConfig()\"\n      [disabled]=\"disabled() || readonly() || !!config()?.readonly\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      (focusin)=\"isFocused.set(true)\"\n      (focusout)=\"isFocused.set(false)\"\n    >\n      <m-text-input\n        [config]=\"triggerInputConfig()\"\n        [value]=\"displayValue()\"\n        [disabled]=\"disabled()\"\n        [invalid]=\"invalid()\"\n        [hideErrors]=\"true\"\n        [(touched)]=\"touched\"\n        [focused]=\"focused()\"\n        (valueChange)=\"onInput($event)\"\n        (click)=\"preventToggleWhenOpen($event)\"\n        (keydown.space)=\"$event.stopPropagation()\"\n        (keydown.enter)=\"onEnter($event)\"\n        (keydown.arrowdown)=\"onArrow($event, 1)\"\n        (keydown.arrowup)=\"onArrow($event, -1)\"\n        (keydown.tab)=\"$event.stopPropagation()\"\n      />\n      <m-button [disabled]=\"disabled()\" [config]=\"chevron()\" />\n    </div>\n    @if (showErrors()) {\n      @for (error of errors(); track $index) {\n        <m-text-output\n          variant=\"footer\"\n          color=\"error\"\n          [label]=\"error.message\"\n        />\n      }\n    }\n  }\n", isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.trigger-wrap{position:relative;--m-text-input-padding-right: 2.25em }.trigger-wrap m-button{position:absolute;right:0;top:0;bottom:0;--m-button-size: 1em !important;height:100%;border-radius:0 var(--m-input-radius, calc(var(--input-size, 1em) * .5)) var(--m-input-radius, calc(var(--input-size, 1em) * .5)) 0;--m-button-radius: 0 var(--m-input-radius, calc(var(--input-size, 1em) * .5)) var(--m-input-radius, calc(var(--input-size, 1em) * .5)) 0}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "params", "required", "disabled", "color", "noTranslate"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "fontWeight", "label", "noTranslate", "params"], outputs: ["configChange", "clicked"] }, { kind: "component", type: TextInputComponent, selector: "m-text-input", inputs: ["value", "config", "required", "disabled", "invalid", "touched", "focused", "errors", "hideErrors"], outputs: ["valueChange", "touchedChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: SelectorDirective, selector: "[mSelector]", inputs: ["mSelector", "disabled"], outputs: ["opened", "closed"], exportAs: ["mSelector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MultiselectInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'm-multiselect-input', template: DROPDOWN_TEMPLATE, imports: DROPDOWN_IMPORTS, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.trigger-wrap{position:relative;--m-text-input-padding-right: 2.25em }.trigger-wrap m-button{position:absolute;right:0;top:0;bottom:0;--m-button-size: 1em !important;height:100%;border-radius:0 var(--m-input-radius, calc(var(--input-size, 1em) * .5)) var(--m-input-radius, calc(var(--input-size, 1em) * .5)) 0;--m-button-radius: 0 var(--m-input-radius, calc(var(--input-size, 1em) * .5)) var(--m-input-radius, calc(var(--input-size, 1em) * .5)) 0}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+var multiselect = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    MultiselectInputComponent: MultiselectInputComponent
+});
+
 const COLOR_PICKER_FILE_UPLOAD_CONFIG = {
     accept: ['image/*'],
     multiple: false,
@@ -23308,7 +23321,7 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.TOGGLE: {
-                const { ToggleInputComponent } = await import('./magmonium-one-toggle-DELqFKZY.mjs');
+                const { ToggleInputComponent } = await import('./magmonium-one-toggle-zniJyl09.mjs');
                 this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                 break;
             }
@@ -23320,12 +23333,12 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.PASSWORD: {
-                const { PasswordInputComponent } = await import('./magmonium-one-password-CT8y_iYQ.mjs');
+                const { PasswordInputComponent } = await import('./magmonium-one-password-CX1OjX5P.mjs');
                 this.createDynamicComponent(seq, PasswordInputComponent);
                 break;
             }
             case InputType.OTP: {
-                const { OtpInputComponent } = await import('./magmonium-one-otp-Ct41thd0.mjs');
+                const { OtpInputComponent } = await import('./magmonium-one-otp-CpjpaJdi.mjs');
                 this.createDynamicComponent(seq, OtpInputComponent);
                 break;
             }
@@ -23368,7 +23381,6 @@ class WrapperInputComponent extends ConfigComponent {
                 this.createDynamicComponent(seq, TextareaInputComponent);
                 break;
             }
-            case InputType.MULTISELECT:
             case InputType.DROPDOWN: {
                 const { DropdownInputComponent } = await Promise.resolve().then(function () { return dropdown; });
                 this.createDynamicComponent(seq, DropdownInputComponent, [
@@ -23377,6 +23389,14 @@ class WrapperInputComponent extends ConfigComponent {
                 ]);
                 break;
             }
+            case InputType.MULTISELECT: {
+                const { MultiselectInputComponent } = await Promise.resolve().then(function () { return multiselect; });
+                this.createDynamicComponent(seq, MultiselectInputComponent, [
+                    inputBinding('options', this.options),
+                    inputBinding('dir', this.dir),
+                ]);
+                break;
+            }
             case InputType.COLOR: {
                 const { ColorPickerInputComponent } = await Promise.resolve().then(function () { return colorPicker; });
                 this.createDynamicComponent(seq, ColorPickerInputComponent);
@@ -25039,7 +25059,7 @@ class FileUploadInputComponent extends BaseInputComponent {
         const modalStore = this.modalStore;
         if (!modalStore)
             return undefined;
-        const { ImageEditorComponent } = await import('./magmonium-one-image-editor-w_mIbhJH.mjs');
+        const { ImageEditorComponent } = await import('./magmonium-one-image-editor-DN8v0YOv.mjs');
         const ratio = String(this.config()?.ratio ?? '');
         return new Promise((resolve) => {
             const modalRef = new ModalRef();
@@ -40663,5 +40683,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CheckboxGroupComponent as $, ACCESS_DOMAINS as A, ButtonComponent as B, AssetUrlPipe as C, Assets as D, AuthActivityPageComponent as E, AuthApiService as F, AuthStore as G, HeaderComponent$1 as H, InputType as I, AutosizeDirective as J, BadgeComponent as K, LabelComponent as L, MODAL_REF as M, BandingComponent as N, BaseArrayInputComponent as O, BaseRootWebComponent as P, BaseWebComponent as Q, RangeInputComponent as R, ButtonGroupComponent as S, TranslatePipe as T, CALLING_APP_HEADER as U, COMPONENT_INPUT_REGISTRY as V, CardComponent as W, CardWrapperComponent as X, CarouselComponent as Y, ChartComponent as Z, ChatBubbleComponent as _, MIN_ZOOM as a, ICON_SOURCE as a$, CheckboxInputComponent as a0, ClearableInputComponent as a1, ClipboardService as a2, ColComponent as a3, ColorPickerInputComponent as a4, CommentItemComponent as a5, CommentsApiService as a6, CommentsComponent as a7, CommentsStore as a8, CompactNumberPipe as a9, DocComponent as aA, DocEditorComponent as aB, DomService as aC, Domain as aD, DotGridComponent as aE, DragListDirective as aF, DragListItemDirective as aG, DraggableDirective as aH, DropdownInputComponent as aI, FILTER_GROUP_CONTEXT as aJ, FILTER_RANGE_MODES as aK, FILTER_VARIANTS as aL, FLEX_VARIANTS as aM, FOLDER_PICK_LISTENER as aN, FORM_ASSET_FOLDER as aO, FileService as aP, FileUploadDirective as aQ, FileUploadInputComponent as aR, FlexComponent as aS, FlexItemComponent as aT, FormGroupComponent as aU, FrameComponent as aV, FreezeService as aW, GRID_BREAKPOINTS as aX, GetNavService as aY, HighlightDirective as aZ, HttpService as a_, ComponentInputComponent as aa, ComponentStepperComponent as ab, ConfigComponent as ac, ConfirmComponent as ad, ContextMenuComponent as ae, CustomIconClass as af, CustomIconEditComponent as ag, DEFAULT_DENIAL as ah, DEFAULT_DOC_DENSITY as ai, DEFAULT_DOC_VARIANT as aj, DEFAULT_FILTER_RANGE_MODE as ak, DEFAULT_FILTER_VARIANT as al, DEFAULT_NAV_PARAM as am, DEFAULT_NAV_SEGMENT as an, DEFAULT_SIZE as ao, DOCK_MIN_PAGE_REMAINDER as ap, DOCS_FOLDER as aq, DOC_ACTION_ICONS as ar, DOC_DENSITIES as as, DOC_EDIT_ACTIONS as at, DOC_TOOLBAR_GROUPS as au, DOC_VARIANTS as av, DashboardCardComponent as aw, DateInputComponent as ax, DatePickerComponent as ay, DeviceService as az, MAX_ZOOM as b, PLATFORM_NAV_MAP as b$, IS_SIDE_PANEL as b0, IconComponent as b1, ImgComponent as b2, InstrumentScoreComponent as b3, InterceptorObservables as b4, JumbotronComponent as b5, KeyValueComponent as b6, LAYOUT_ASSET_FOLDER as b7, LOGIN_COMPONENT as b8, LOGIN_STORE as b9, NAV_STORE_REF as bA, NAV_WC_COMPONENTS as bB, NAV_WIDGET_MAP as bC, NavComponent as bD, NavDetailsComponent as bE, NavHeaderComponent as bF, NavMenuComponent as bG, NavStore as bH, NavTrailComponent as bI, NothingComponent as bJ, NotificationElementComponent as bK, NotificationGroupComponent as bL, NotificationPopupComponent as bM, NotificationService as bN, NotificationStore as bO, NotificationType as bP, NotificationWidgetComponent as bQ, ONE_ASSET_BASE_URL as bR, OPTIONS_SOURCE as bS, OVERLAY_WIDGETS as bT, OneApp as bU, OptionsSourceDirective as bV, OverlayBodyComponent as bW, OverlayRef as bX, OverlayService as bY, PLATFORM_BUTTON_NAV_IDS as bZ, PLATFORM_EXTENSIBLE_NAV_IDS as b_, LanguageComponent as ba, ListComponent as bb, LogoComponent as bc, MAG_SOCKET_EVENT as bd, MHeroColorDirective as be, MHeroComponent as bf, MODAL_STORE_REF as bg, MOUNT_STATIC_SEGMENT as bh, MOUNT_TOKEN as bi, MRefDirective as bj, MStepComponent as bk, MURL_PARAM as bl, MURL_SEP as bm, ManifestEnrichmentService as bn, MarginDirective as bo, MenuComponent as bp, ModalDirective as bq, ModalRef as br, ModalStore as bs, MoneyPipe as bt, MultiRangeInputComponent as bu, MurlUrlSerializer as bv, NAV_DEFAULT_MURL as bw, NAV_ID_SEP as bx, NAV_MAIN_BUTTONS as by, NAV_SEGMENT_RE as bz, cropRect as c, SelectorDirective as c$, PLATFORM_ROOT_CHILDREN as c0, PaddingDirective as c1, PaginationComponent as c2, PanelComponent as c3, PercentagePipe as c4, PlaygroundComponent as c5, PositionDirective as c6, PwaInstallComponent as c7, RECENT_SEARCH_LIMIT as c8, REMOTE_PAGE_RELOAD as c9, SectionBackComponent as cA, SectionBadgesComponent as cB, SectionButtonGroupComponent as cC, SectionCardComponent as cD, SectionCarouselComponent as cE, SectionComponent as cF, SectionFilterComponent as cG, SectionFilterGroupComponent as cH, SectionFilterMenuComponent as cI, SectionFilterPanelComponent as cJ, SectionFilterRangePanelComponent as cK, SectionFooterComponent as cL, SectionFormComponent as cM, SectionFormItemComponent as cN, SectionHeaderComponent as cO, SectionHeroComponent as cP, SectionPaginationComponent as cQ, SectionSearchComponent as cR, SectionStepperComponent as cS, SectionTableCellComponent as cT, SectionTableComponent as cU, SectionTableRowComponent as cV, SectionTableSortPipe as cW, SectionTabsComponent as cX, SectionToggleComponent as cY, SectionToggleItemDirective as cZ, SelectableCardInputComponent as c_, ROOT_NAV$1 as ca, RadioGroupComponent as cb, RadioInputComponent as cc, RatingInputComponent as cd, ReactiveElementComponent as ce, RemoteComponent as cf, RemoteLoaderService as cg, ResizeElementComponent as ch, RouteContainer as ci, RowComponent as cj, SEARCH_QUERY as ck, SEARCH_RESULTS_EVENT as cl, SECTION_ACCORDION_GROUP as cm, SECTION_FORM_CONTEXT as cn, SECTION_TABLE_VARIANTS as co, SHARED_ICONS as cp, SIZE_CONTEXT as cq, SPACING_INWARD as cr, ScoreComponent as cs, ScrollComponent as ct, ScrollService as cu, SearchPanelComponent as cv, SearchStore as cw, SearchUserPanelComponent as cx, SectionAccordionDirective as cy, SectionAccordionGroupDirective as cz, drawFramed as d, bootstrapPwaInstall as d$, SettingsSearchBarComponent as d0, SettingsSearchService as d1, ShapeComponent as d2, SharedStoreRegistry as d3, SidePanelDirective as d4, Size as d5, SocketStore as d6, SortComponent as d7, StatComponent as d8, StepComponent as d9, TooltipComponent as dA, TranslateService as dB, TreeGridComponent as dC, URL_SEP as dD, USER_STORE_REF as dE, USER_TAB_MAP as dF, UniverseComponent as dG, UserApiService as dH, UserAvatarComponent as dI, UserComponent as dJ, UserNavComponent as dK, UserSettingsComponent as dL, UserStore as dM, WC_BUNDLE as dN, WC_NAVIGATE_EVENT as dO, WC_ROUTE_CHANGED_EVENT as dP, WC_SEARCH_GROUPS as dQ, WIN_USER_TAB_HOOK as dR, WIN_USER_TAB_KEY as dS, WatermarkComponent as dT, WcRouterStore as dU, WrapperInputComponent as dV, anchorNavId as dW, applyColorsToElement as dX, applyDocEdit as dY, assetOptions as dZ, bootstrapMagApp as d_, StepperComponent as da, StepsComponent as db, StorageService as dc, StrokeLinecap as dd, StrokeLinejoin as de, SummaryComponent as df, SvgGeneratorComponent as dg, SvgGeneratorService as dh, SvgService as di, TOTAL_COLUMNS as dj, TRANSLATION_SOURCE as dk, TableComponent as dl, TechnicalMeterComponent as dm, TextInputComponent as dn, TextareaInputComponent as dp, ThemeComponent as dq, ThemeDataService as dr, ThemeService as ds, ThemeStore as dt, TimeAgoPipe as du, TimelineComponent as dv, ToggleButtonComponent as dw, ToggleInputComponent as dx, ToggleRadioInputComponent as dy, ToolTipDirective as dz, encodeFramed as e, injectDefaultDenial as e$, buildWcBaseUrl as e0, calculateLuminance as e1, calculateRanks as e2, cellText as e3, checkDoc as e4, checkFilterCondition as e5, childNavId as e6, claimDenial as e7, classListSignal as e8, coerceSize as e9, filterOne as eA, filterPanelOf as eB, filterPanelWidth as eC, filterRange as eD, filterTreeGridRows as eE, filterValueList as eF, filterValues as eG, flattenTreeGridRows as eH, formatBadgeCount as eI, fullName as eJ, generateClipPath as eK, generateTransform as eL, getClassList as eM, getProperty as eN, getScrollParent as eO, getTierFromPreviewPath as eP, getTreeGridRow as eQ, getUniqueId as eR, getValue as eS, hasErrorComputed as eT, hexToRgb as eU, hslToRgb$1 as eV, initMagmoniumApp as eW, initialNotificationState as eX, initialState$2 as eY, initials as eZ, injectAuthenticate as e_, cornerEdge as ea, cornerSide as eb, createMap as ec, createPlatformNavMap as ed, definedWcTierOf as ee, deriveAvatarGradient as ef, deriveContrastColor as eg, deriveOppositeColor as eh, derivePropertyName as ei, docActionKey as ej, docAssetCandidates as ek, docProblemKey as el, docRemotePath as em, emailValidation as en, evaluate as eo, evaluateBool as ep, fieldBoolean as eq, fieldNumber as er, fieldString as es, filterHoldsList as et, filterHoldsOneBound as eu, filterHoldsOptions as ev, filterHoldsRange as ew, filterList as ex, filterNumber as ey, filterNumberList as ez, clampFraming as f, platformNavWidgets as f$, injectInstallApp as f0, injectParentSize as f1, injectScrollSticky as f2, isBootRedirect as f3, isButtonName as f4, isCancelledComputed as f5, isExtensiblePlatformNavId as f6, isJson as f7, isLoadingComputed as f8, isLocalhost as f9, minValidation as fA, miniMarkToHtml as fB, mountFor as fC, mountPatternProblem as fD, mountPatternText as fE, mountSegmentOf as fF, mountTokenOf as fG, navIdChain as fH, navIdFor as fI, navIdSegment as fJ, navIdToRoutePath as fK, navIdToSegments as fL, navParamOf as fM, navTailMatcher as fN, navToId as fO, navVisibilityGuard as fP, nextSectionTableSort as fQ, normalizeAssetOptions as fR, offsetOfLine as fS, parentNavId as fT, parseAddress as fU, parseColor as fV, parseMountPattern as fW, parsePatternNames as fX, patternValidation as fY, patternsValidation as fZ, permissionRefusal as f_, isNavInstanceConfig as fa, isNavMenuConfig as fb, isNavRowsConfig as fc, isNavVisibilityConfig as fd, isPlatformNavId as fe, isSize as ff, isTierPreview as fg, isUrlLocalhost as fh, isValidNavId as fi, isValidNavSegment as fj, isWebComponent as fk, linkToId as fl, linkToNav as fm, loadingActions as fn, mInterceptor as fo, manualValidation as fp, matchFieldValidation as fq, matchMount as fr, maxLengthValidation as fs, maxValidation as ft, mergePlatformNav as fu, mergeUnique as fv, mergeUniqueBy as fw, mergeUniqueWith as fx, minAgeValidation as fy, minLengthValidation as fz, BaseInputComponent as g, privateGuard as g0, processImageToSvg as g1, provideAppContext as g2, provideMagAppConfig as g3, provideMagWcConfig as g4, provideMagWcRoutes as g5, provideModalComponents as g6, provideMurlUrlSerializer as g7, provideNavWidgets as g8, provideOverlayWidgets as g9, setTreeGridChildren as gA, setWcTier as gB, settingsWidgets as gC, shouldShowBadge as gD, sortSectionTableRows as gE, splitNavId as gF, splitOnMatch as gG, stringToColor as gH, tailRouteOf as gI, toAttrBool as gJ, toAttrNumber as gK, toCssLength as gL, toHostNavId as gM, toLength$1 as gN, toLocalNavId as gO, toggleTreeGridRow as gP, unfetchedPlatformNav as gQ, ungroupedDocActions as gR, urlValidation as gS, wcTierOf as gT, providePlatformNavWidgets as ga, provideSearch as gb, provideSizeContext as gc, provideUserTabs as gd, publicGuard as ge, readFieldPatterns as gf, recordDefinedWcTier as gg, remoteOutletRoute as gh, renderAddress as gi, renderDocument as gj, requiredValidation as gk, resolveConfigAsset as gl, resolveIconSize as gm, resolvePallet as gn, resolvePatternRules as go, resolveSize as gp, resolveSpacing as gq, rgbToHex as gr, rgbToHsl as gs, rowHasChildren as gt, samePatterns as gu, sectionTableColumnId as gv, sectionTableColumnWidths as gw, sectionTableFrozenCount as gx, segmentsToNavId as gy, setProperty as gz, BaseTextInputComponent as h, initialFraming as i, TextOutputComponent as j, IS_DESIGN_MODE as k, APP_CONTEXT_REF as l, APP_LINK as m, ASSET_BASE_URL as n, outputSize as o, parseRatio as p, AccordionBodyDirective as q, renameForType as r, AccordionComponent as s, AccordionGroupComponent as t, ActionComponent as u, AnimatedGraphsComponent as v, AppCardComponent as w, AppRelationType as x, AppTileComponent as y, AssetStore as z };
-//# sourceMappingURL=magmonium-one-magmonium-one-Cu45fHus.mjs.map
+export { CheckboxGroupComponent as $, ACCESS_DOMAINS as A, ButtonComponent as B, AssetUrlPipe as C, Assets as D, AuthActivityPageComponent as E, AuthApiService as F, AuthStore as G, HeaderComponent$1 as H, InputType as I, AutosizeDirective as J, BadgeComponent as K, LabelComponent as L, MODAL_REF as M, BandingComponent as N, BaseArrayInputComponent as O, BaseRootWebComponent as P, BaseWebComponent as Q, RangeInputComponent as R, ButtonGroupComponent as S, TranslatePipe as T, CALLING_APP_HEADER as U, COMPONENT_INPUT_REGISTRY as V, CardComponent as W, CardWrapperComponent as X, CarouselComponent as Y, ChartComponent as Z, ChatBubbleComponent as _, MIN_ZOOM as a, ICON_SOURCE as a$, CheckboxInputComponent as a0, ClearableInputComponent as a1, ClipboardService as a2, ColComponent as a3, ColorPickerInputComponent as a4, CommentItemComponent as a5, CommentsApiService as a6, CommentsComponent as a7, CommentsStore as a8, CompactNumberPipe as a9, DocComponent as aA, DocEditorComponent as aB, DomService as aC, Domain as aD, DotGridComponent as aE, DragListDirective as aF, DragListItemDirective as aG, DraggableDirective as aH, DropdownInputComponent as aI, FILTER_GROUP_CONTEXT as aJ, FILTER_RANGE_MODES as aK, FILTER_VARIANTS as aL, FLEX_VARIANTS as aM, FOLDER_PICK_LISTENER as aN, FORM_ASSET_FOLDER as aO, FileService as aP, FileUploadDirective as aQ, FileUploadInputComponent as aR, FlexComponent as aS, FlexItemComponent as aT, FormGroupComponent as aU, FrameComponent as aV, FreezeService as aW, GRID_BREAKPOINTS as aX, GetNavService as aY, HighlightDirective as aZ, HttpService as a_, ComponentInputComponent as aa, ComponentStepperComponent as ab, ConfigComponent as ac, ConfirmComponent as ad, ContextMenuComponent as ae, CustomIconClass as af, CustomIconEditComponent as ag, DEFAULT_DENIAL as ah, DEFAULT_DOC_DENSITY as ai, DEFAULT_DOC_VARIANT as aj, DEFAULT_FILTER_RANGE_MODE as ak, DEFAULT_FILTER_VARIANT as al, DEFAULT_NAV_PARAM as am, DEFAULT_NAV_SEGMENT as an, DEFAULT_SIZE as ao, DOCK_MIN_PAGE_REMAINDER as ap, DOCS_FOLDER as aq, DOC_ACTION_ICONS as ar, DOC_DENSITIES as as, DOC_EDIT_ACTIONS as at, DOC_TOOLBAR_GROUPS as au, DOC_VARIANTS as av, DashboardCardComponent as aw, DateInputComponent as ax, DatePickerComponent as ay, DeviceService as az, MAX_ZOOM as b, PLATFORM_EXTENSIBLE_NAV_IDS as b$, IS_SIDE_PANEL as b0, IconComponent as b1, ImgComponent as b2, InstrumentScoreComponent as b3, InterceptorObservables as b4, JumbotronComponent as b5, KeyValueComponent as b6, LAYOUT_ASSET_FOLDER as b7, LOGIN_COMPONENT as b8, LOGIN_STORE as b9, NAV_SEGMENT_RE as bA, NAV_STORE_REF as bB, NAV_WC_COMPONENTS as bC, NAV_WIDGET_MAP as bD, NavComponent as bE, NavDetailsComponent as bF, NavHeaderComponent as bG, NavMenuComponent as bH, NavStore as bI, NavTrailComponent as bJ, NothingComponent as bK, NotificationElementComponent as bL, NotificationGroupComponent as bM, NotificationPopupComponent as bN, NotificationService as bO, NotificationStore as bP, NotificationType as bQ, NotificationWidgetComponent as bR, ONE_ASSET_BASE_URL as bS, OPTIONS_SOURCE as bT, OVERLAY_WIDGETS as bU, OneApp as bV, OptionsSourceDirective as bW, OverlayBodyComponent as bX, OverlayRef as bY, OverlayService as bZ, PLATFORM_BUTTON_NAV_IDS as b_, LanguageComponent as ba, ListComponent as bb, LogoComponent as bc, MAG_SOCKET_EVENT as bd, MHeroColorDirective as be, MHeroComponent as bf, MODAL_STORE_REF as bg, MOUNT_STATIC_SEGMENT as bh, MOUNT_TOKEN as bi, MRefDirective as bj, MStepComponent as bk, MURL_PARAM as bl, MURL_SEP as bm, ManifestEnrichmentService as bn, MarginDirective as bo, MenuComponent as bp, ModalDirective as bq, ModalRef as br, ModalStore as bs, MoneyPipe as bt, MultiRangeInputComponent as bu, MultiselectInputComponent as bv, MurlUrlSerializer as bw, NAV_DEFAULT_MURL as bx, NAV_ID_SEP as by, NAV_MAIN_BUTTONS as bz, cropRect as c, SelectableCardInputComponent as c$, PLATFORM_NAV_MAP as c0, PLATFORM_ROOT_CHILDREN as c1, PaddingDirective as c2, PaginationComponent as c3, PanelComponent as c4, PercentagePipe as c5, PlaygroundComponent as c6, PositionDirective as c7, PwaInstallComponent as c8, RECENT_SEARCH_LIMIT as c9, SectionAccordionGroupDirective as cA, SectionBackComponent as cB, SectionBadgesComponent as cC, SectionButtonGroupComponent as cD, SectionCardComponent as cE, SectionCarouselComponent as cF, SectionComponent as cG, SectionFilterComponent as cH, SectionFilterGroupComponent as cI, SectionFilterMenuComponent as cJ, SectionFilterPanelComponent as cK, SectionFilterRangePanelComponent as cL, SectionFooterComponent as cM, SectionFormComponent as cN, SectionFormItemComponent as cO, SectionHeaderComponent as cP, SectionHeroComponent as cQ, SectionPaginationComponent as cR, SectionSearchComponent as cS, SectionStepperComponent as cT, SectionTableCellComponent as cU, SectionTableComponent as cV, SectionTableRowComponent as cW, SectionTableSortPipe as cX, SectionTabsComponent as cY, SectionToggleComponent as cZ, SectionToggleItemDirective as c_, REMOTE_PAGE_RELOAD as ca, ROOT_NAV$1 as cb, RadioGroupComponent as cc, RadioInputComponent as cd, RatingInputComponent as ce, ReactiveElementComponent as cf, RemoteComponent as cg, RemoteLoaderService as ch, ResizeElementComponent as ci, RouteContainer as cj, RowComponent as ck, SEARCH_QUERY as cl, SEARCH_RESULTS_EVENT as cm, SECTION_ACCORDION_GROUP as cn, SECTION_FORM_CONTEXT as co, SECTION_TABLE_VARIANTS as cp, SHARED_ICONS as cq, SIZE_CONTEXT as cr, SPACING_INWARD as cs, ScoreComponent as ct, ScrollComponent as cu, ScrollService as cv, SearchPanelComponent as cw, SearchStore as cx, SearchUserPanelComponent as cy, SectionAccordionDirective as cz, drawFramed as d, bootstrapMagApp as d$, SelectorDirective as d0, SettingsSearchBarComponent as d1, SettingsSearchService as d2, ShapeComponent as d3, SharedStoreRegistry as d4, SidePanelDirective as d5, Size as d6, SocketStore as d7, SortComponent as d8, StatComponent as d9, ToolTipDirective as dA, TooltipComponent as dB, TranslateService as dC, TreeGridComponent as dD, URL_SEP as dE, USER_STORE_REF as dF, USER_TAB_MAP as dG, UniverseComponent as dH, UserApiService as dI, UserAvatarComponent as dJ, UserComponent as dK, UserNavComponent as dL, UserSettingsComponent as dM, UserStore as dN, WC_BUNDLE as dO, WC_NAVIGATE_EVENT as dP, WC_ROUTE_CHANGED_EVENT as dQ, WC_SEARCH_GROUPS as dR, WIN_USER_TAB_HOOK as dS, WIN_USER_TAB_KEY as dT, WatermarkComponent as dU, WcRouterStore as dV, WrapperInputComponent as dW, anchorNavId as dX, applyColorsToElement as dY, applyDocEdit as dZ, assetOptions as d_, StepComponent as da, StepperComponent as db, StepsComponent as dc, StorageService as dd, StrokeLinecap as de, StrokeLinejoin as df, SummaryComponent as dg, SvgGeneratorComponent as dh, SvgGeneratorService as di, SvgService as dj, TOTAL_COLUMNS as dk, TRANSLATION_SOURCE as dl, TableComponent as dm, TechnicalMeterComponent as dn, TextInputComponent as dp, TextareaInputComponent as dq, ThemeComponent as dr, ThemeDataService as ds, ThemeService as dt, ThemeStore as du, TimeAgoPipe as dv, TimelineComponent as dw, ToggleButtonComponent as dx, ToggleInputComponent as dy, ToggleRadioInputComponent as dz, encodeFramed as e, injectAuthenticate as e$, bootstrapPwaInstall as e0, buildWcBaseUrl as e1, calculateLuminance as e2, calculateRanks as e3, cellText as e4, checkDoc as e5, checkFilterCondition as e6, childNavId as e7, claimDenial as e8, classListSignal as e9, filterNumberList as eA, filterOne as eB, filterPanelOf as eC, filterPanelWidth as eD, filterRange as eE, filterTreeGridRows as eF, filterValueList as eG, filterValues as eH, flattenTreeGridRows as eI, formatBadgeCount as eJ, fullName as eK, generateClipPath as eL, generateTransform as eM, getClassList as eN, getProperty as eO, getScrollParent as eP, getTierFromPreviewPath as eQ, getTreeGridRow as eR, getUniqueId as eS, getValue as eT, hasErrorComputed as eU, hexToRgb as eV, hslToRgb$1 as eW, initMagmoniumApp as eX, initialNotificationState as eY, initialState$2 as eZ, initials as e_, coerceSize as ea, cornerEdge as eb, cornerSide as ec, createMap as ed, createPlatformNavMap as ee, definedWcTierOf as ef, deriveAvatarGradient as eg, deriveContrastColor as eh, deriveOppositeColor as ei, derivePropertyName as ej, docActionKey as ek, docAssetCandidates as el, docProblemKey as em, docRemotePath as en, emailValidation as eo, evaluate as ep, evaluateBool as eq, fieldBoolean as er, fieldNumber as es, fieldString as et, filterHoldsList as eu, filterHoldsOneBound as ev, filterHoldsOptions as ew, filterHoldsRange as ex, filterList as ey, filterNumber as ez, clampFraming as f, permissionRefusal as f$, injectDefaultDenial as f0, injectInstallApp as f1, injectParentSize as f2, injectScrollSticky as f3, isBootRedirect as f4, isButtonName as f5, isCancelledComputed as f6, isExtensiblePlatformNavId as f7, isJson as f8, isLoadingComputed as f9, minLengthValidation as fA, minValidation as fB, miniMarkToHtml as fC, mountFor as fD, mountPatternProblem as fE, mountPatternText as fF, mountSegmentOf as fG, mountTokenOf as fH, navIdChain as fI, navIdFor as fJ, navIdSegment as fK, navIdToRoutePath as fL, navIdToSegments as fM, navParamOf as fN, navTailMatcher as fO, navToId as fP, navVisibilityGuard as fQ, nextSectionTableSort as fR, normalizeAssetOptions as fS, offsetOfLine as fT, parentNavId as fU, parseAddress as fV, parseColor as fW, parseMountPattern as fX, parsePatternNames as fY, patternValidation as fZ, patternsValidation as f_, isLocalhost as fa, isNavInstanceConfig as fb, isNavMenuConfig as fc, isNavRowsConfig as fd, isNavVisibilityConfig as fe, isPlatformNavId as ff, isSize as fg, isTierPreview as fh, isUrlLocalhost as fi, isValidNavId as fj, isValidNavSegment as fk, isWebComponent as fl, linkToId as fm, linkToNav as fn, loadingActions as fo, mInterceptor as fp, manualValidation as fq, matchFieldValidation as fr, matchMount as fs, maxLengthValidation as ft, maxValidation as fu, mergePlatformNav as fv, mergeUnique as fw, mergeUniqueBy as fx, mergeUniqueWith as fy, minAgeValidation as fz, BaseInputComponent as g, platformNavWidgets as g0, privateGuard as g1, processImageToSvg as g2, provideAppContext as g3, provideMagAppConfig as g4, provideMagWcConfig as g5, provideMagWcRoutes as g6, provideModalComponents as g7, provideMurlUrlSerializer as g8, provideNavWidgets as g9, setProperty as gA, setTreeGridChildren as gB, setWcTier as gC, settingsWidgets as gD, shouldShowBadge as gE, sortSectionTableRows as gF, splitNavId as gG, splitOnMatch as gH, stringToColor as gI, tailRouteOf as gJ, toAttrBool as gK, toAttrNumber as gL, toCssLength as gM, toHostNavId as gN, toLength$1 as gO, toLocalNavId as gP, toggleTreeGridRow as gQ, unfetchedPlatformNav as gR, ungroupedDocActions as gS, urlValidation as gT, wcTierOf as gU, provideOverlayWidgets as ga, providePlatformNavWidgets as gb, provideSearch as gc, provideSizeContext as gd, provideUserTabs as ge, publicGuard as gf, readFieldPatterns as gg, recordDefinedWcTier as gh, remoteOutletRoute as gi, renderAddress as gj, renderDocument as gk, requiredValidation as gl, resolveConfigAsset as gm, resolveIconSize as gn, resolvePallet as go, resolvePatternRules as gp, resolveSize as gq, resolveSpacing as gr, rgbToHex as gs, rgbToHsl as gt, rowHasChildren as gu, samePatterns as gv, sectionTableColumnId as gw, sectionTableColumnWidths as gx, sectionTableFrozenCount as gy, segmentsToNavId as gz, BaseTextInputComponent as h, initialFraming as i, TextOutputComponent as j, IS_DESIGN_MODE as k, APP_CONTEXT_REF as l, APP_LINK as m, ASSET_BASE_URL as n, outputSize as o, parseRatio as p, AccordionBodyDirective as q, renameForType as r, AccordionComponent as s, AccordionGroupComponent as t, ActionComponent as u, AnimatedGraphsComponent as v, AppCardComponent as w, AppRelationType as x, AppTileComponent as y, AssetStore as z };
+//# sourceMappingURL=magmonium-one-magmonium-one-DWeZSPCv.mjs.map