@magmonium/one 0.1.18 → 0.1.19

package/fesm2022/{magmonium-one-magmonium-one-DqEB7539.mjs → magmonium-one-magmonium-one-BSbTn-74.mjs}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, signal, computed, DestroyRef, DOCUMENT, ApplicationRef, RendererFactory2, createComponent, EnvironmentInjector, Pipe, ChangeDetectorRef, ElementRef, afterNextRender, input, ChangeDetectionStrategy, Component, effect, Injector, reflectComponentType, untracked, model, HostListener, Renderer2, Directive, output, viewChild, ViewEncapsulation, forwardRef, contentChild, TemplateRef, ViewContainerRef, inputBinding, outputBinding, linkedSignal, afterRenderEffect, runInInjectionContext, Input, booleanAttribute, EventEmitter, Output, ViewChild, ContentChild, provideZonelessChangeDetection, makeEnvironmentProviders, HostBinding, provideAppInitializer, provideBrowserGlobalErrorListeners, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { InjectionToken, inject, Injectable, signal, computed, DestroyRef, DOCUMENT, ApplicationRef, RendererFactory2, createComponent, EnvironmentInjector, Pipe, ChangeDetectorRef, ElementRef, afterNextRender, input, ChangeDetectionStrategy, Component, effect, Injector, reflectComponentType, untracked, model, HostListener, Renderer2, Directive, output, viewChild, ViewEncapsulation, forwardRef, contentChild, TemplateRef, ViewContainerRef, inputBinding, outputBinding, linkedSignal, afterRenderEffect, runInInjectionContext, Input, booleanAttribute, HostAttributeToken, EventEmitter, Output, ViewChild, ContentChild, provideZonelessChangeDetection, makeEnvironmentProviders, HostBinding, provideAppInitializer, provideBrowserGlobalErrorListeners, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { HttpClient, HttpParams, provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
 import { firstValueFrom, of, tap, catchError, throwError, shareReplay, finalize, map, forkJoin, Observable, pipe, interval, fromEvent, switchMap as switchMap$1, filter, EMPTY, combineLatest, Subject, race, take, from } from 'rxjs';
 import { rxResource, toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -6499,7 +6499,7 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.TOGGLE: {
-                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-DAuDrcHw.mjs');
+                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-BYujoexg.mjs');
                     this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                     break;
                 }
@@ -6511,12 +6511,12 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.PASSWORD: {
-                    const { PasswordInputComponent } = await import('./magmonium-one-password-CsCnHV0b.mjs');
+                    const { PasswordInputComponent } = await import('./magmonium-one-password-ChSqmvi4.mjs');
                     this.createDynamicComponent(seq, PasswordInputComponent);
                     break;
                 }
                 case InputType.OTP: {
-                    const { OtpInputComponent } = await import('./magmonium-one-otp-B24CBOMZ.mjs');
+                    const { OtpInputComponent } = await import('./magmonium-one-otp-Dt96oQ44.mjs');
                     this.createDynamicComponent(seq, OtpInputComponent);
                     break;
                 }
@@ -8305,163 +8305,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 const SECTION_CONTEXT = new InjectionToken('SECTION_CONTEXT');
 
-/**
- * Resolves an attribute directive's value — `mModal`/`mSidePanel`,
- * `mAccordion`/`mAccordionGroup` — where an asset name resolves through
- * `AssetStore` and an inline config object passes through unchanged.
- */
-function resolveOverlayValue(assetStore, subFolder, value, elementRef) {
-    if (value === undefined || value === null)
-        return of({});
-    if (typeof value === 'string') {
-        const isOne = elementRef.nativeElement.tagName.startsWith('M-ONE');
-        return resolveConfigAsset(assetStore, subFolder, value, isOne, undefined);
-    }
-    return of(value);
-}
-
-const SECTION_ACCORDION_GROUP = new InjectionToken('SECTION_ACCORDION_GROUP');
-
-/**
- * Groups the SectionAccordions nested beneath this Section — at most one
- * open at a time. Coexists with `mAccordion` on the same `<m-section>`:
- * this only governs its accordion descendants, it doesn't collapse itself.
- */
-class SectionAccordionGroupDirective {
-    mAccordionGroup = input(undefined, ...(ngDevMode ? [{ debugName: "mAccordionGroup" }] : /* istanbul ignore next */ []));
-    elementRef = inject(ElementRef);
-    assetStore = inject(AssetStore);
-    configResource = rxResource({
-        params: () => this.mAccordionGroup(),
-        stream: ({ params }) => resolveOverlayValue(this.assetStore, 'section_accordion_groups', params, this.elementRef),
-    });
-    resolvedConfig = computed(() => this.configResource.value() ?? {}, ...(ngDevMode ? [{ debugName: "resolvedConfig" }] : /* istanbul ignore next */ []));
-    // Overrides every member's own icon/toggleIcon when set (CONTEXT.md
-    // SectionAccordionGroup) — read by SectionAccordionDirective.
-    icon = computed(() => this.resolvedConfig()?.icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    toggleIcon = computed(() => this.resolvedConfig()?.toggleIcon, ...(ngDevMode ? [{ debugName: "toggleIcon" }] : /* istanbul ignore next */ []));
-    accordions = [];
-    register(accordion) {
-        this.accordions.push(accordion);
-        accordion.setOpen(this.accordions.length === 1);
-    }
-    unregister(accordion) {
-        const index = this.accordions.indexOf(accordion);
-        if (index !== -1)
-            this.accordions.splice(index, 1);
-    }
-    onOpened(accordion) {
-        this.accordions.forEach((a) => {
-            if (a !== accordion)
-                a.setOpen(false);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionAccordionGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: SectionAccordionGroupDirective, isStandalone: true, selector: "m-section[mAccordionGroup]", inputs: { mAccordionGroup: { classPropertyName: "mAccordionGroup", publicName: "mAccordionGroup", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            { provide: SECTION_ACCORDION_GROUP, useExisting: SectionAccordionGroupDirective },
-        ], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionAccordionGroupDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'm-section[mAccordionGroup]',
-                    providers: [
-                        { provide: SECTION_ACCORDION_GROUP, useExisting: SectionAccordionGroupDirective },
-                    ],
-                }]
-        }], propDecorators: { mAccordionGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "mAccordionGroup", required: false }] }] } });
-
-let counter = 0;
-/**
- * Makes an `<m-section>` collapse — a toggle button renders at the start of
- * its projected `m-section-header` (nothing renders, and the Section never
- * collapses, if it has no header) and everything below the header collapses
- * as one region. Ungrouped, starts open; inside an `mAccordionGroup`, only
- * the first-registered member starts open (CONTEXT.md SectionAccordion).
- */
-class SectionAccordionDirective {
-    mAccordion = input(undefined, ...(ngDevMode ? [{ debugName: "mAccordion" }] : /* istanbul ignore next */ []));
-    elementRef = inject(ElementRef);
-    assetStore = inject(AssetStore);
-    // Inert on the Canvas — the glyph renders but a click never collapses the
-    // Section, so its children stay visible and droppable while composing
-    // (m-one-ui CONTEXT.md).
-    isDesignMode = !!inject(IS_DESIGN_MODE, { optional: true });
-    // skipSelf: this element's own provider is the boundary above — skip it to
-    // find the real ancestor group, if any.
-    group = inject(SECTION_ACCORDION_GROUP, { optional: true, skipSelf: true });
-    // Same instance as `group` when one exists — injected by concrete class
-    // (rather than through the token) purely to read its icon/toggleIcon,
-    // which aren't part of the minimal SectionAccordionGroupContext contract.
-    groupDirective = inject(SectionAccordionGroupDirective, {
-        optional: true,
-        skipSelf: true,
-    });
-    configResource = rxResource({
-        params: () => this.mAccordion(),
-        stream: ({ params }) => resolveOverlayValue(this.assetStore, 'section_accordions', params, this.elementRef),
-    });
-    resolvedConfig = computed(() => this.configResource.value() ?? {}, ...(ngDevMode ? [{ debugName: "resolvedConfig" }] : /* istanbul ignore next */ []));
-    icon = computed(() => this.groupDirective?.icon() ?? this.resolvedConfig()?.icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    toggleIcon = computed(() => this.groupDirective?.toggleIcon() ?? this.resolvedConfig()?.toggleIcon, ...(ngDevMode ? [{ debugName: "toggleIcon" }] : /* istanbul ignore next */ []));
-    // 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 */ []));
-    sectionAccordionId = `m-section-accordion-${++counter}`;
-    headerId = `${this.sectionAccordionId}-header`;
-    bodyId = `${this.sectionAccordionId}-body`;
-    ngOnInit() {
-        this.group?.register(this);
-    }
-    ngOnDestroy() {
-        this.group?.unregister(this);
-    }
-    setOpen(value) {
-        this._open.set(value);
-    }
-    toggle() {
-        if (this.isDesignMode)
-            return;
-        const next = !this.isOpen();
-        this._open.set(next);
-        if (next)
-            this.group?.onOpened(this);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionAccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: SectionAccordionDirective, isStandalone: true, selector: "m-section[mAccordion]", inputs: { mAccordion: { classPropertyName: "mAccordion", publicName: "mAccordion", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                // Boundary (ADR 0006): block an ancestor group from reaching past this
-                // Section into its own descendants, unless this same Section is also
-                // an `mAccordionGroup` host — then that's the correct value anyway.
-                provide: SECTION_ACCORDION_GROUP,
-                useFactory: () => inject(SectionAccordionGroupDirective, { optional: true, self: true }) ??
-                    null,
-            },
-        ], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionAccordionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'm-section[mAccordion]',
-                    providers: [
-                        {
-                            // Boundary (ADR 0006): block an ancestor group from reaching past this
-                            // Section into its own descendants, unless this same Section is also
-                            // an `mAccordionGroup` host — then that's the correct value anyway.
-                            provide: SECTION_ACCORDION_GROUP,
-                            useFactory: () => inject(SectionAccordionGroupDirective, { optional: true, self: true }) ??
-                                null,
-                        },
-                    ],
-                }]
-        }], propDecorators: { mAccordion: [{ type: i0.Input, args: [{ isSignal: true, alias: "mAccordion", required: false }] }] } });
-
 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 */ []));
+    // 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 */ []));
@@ -8480,6 +8337,13 @@ class SectionHeaderComponent {
     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()), ...(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 */ []));
@@ -8497,16 +8361,18 @@ class SectionHeaderComponent {
             variant: 'ghost',
         };
     }, ...(ngDevMode ? [{ debugName: "actionConfig" }] : /* istanbul ignore next */ []));
-    // Ancestor injection (no self/skipSelf) — finds the SectionAccordion on the
-    // `<m-section>` this header is projected into, if any (CONTEXT.md).
-    accordion = inject(SectionAccordionDirective, {
-        optional: true,
-    });
+    // 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;
+        const accordion = this.accordion();
         if (!accordion)
             return undefined;
         const toggleIcon = accordion.toggleIcon();
@@ -8515,21 +8381,21 @@ class SectionHeaderComponent {
         }
         return accordion.icon() ?? 'accordion_chevron';
     }, ...(ngDevMode ? [{ debugName: "toggleIconName" }] : /* istanbul ignore next */ []));
-    toggleRotates = computed(() => !this.accordion?.toggleIcon(), ...(ngDevMode ? [{ debugName: "toggleRotates" }] : /* istanbul ignore next */ []));
+    toggleRotates = computed(() => !this.accordion()?.toggleIcon(), ...(ngDevMode ? [{ debugName: "toggleRotates" }] : /* istanbul ignore next */ []));
     onToggleClick() {
-        this.accordion?.toggle();
+        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 }, 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()" }, classAttribute: "m-section-header" }, ngImport: i0, template: "@if (spacing()) {\n  <div class=\"section-header__container\" [style.max-width]=\"maxWidth()\">\n    <div class=\"section-header__inner\">\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: 'arrow_back', iconOnly: true }\"\n            (clicked)=\"back.emit()\" />\n        </div>\n      } @else if (icon(); as iconName) {\n        <m-icon [name]=\"iconName\" />\n      }\n      <div class=\"section-header__title\">\n        <ng-content>\n          <m-header [level]=\"level()\" [label]=\"label()\" />\n        </ng-content>\n        @if (subLabel(); as sub) {\n          <span class=\"section-header__sub\">{{ sub | translate }}</span>\n        }\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    </div>\n  </div>\n} @else {\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: 'arrow_back', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (icon(); as iconName) {\n    <m-icon [name]=\"iconName\" />\n  }\n  <div class=\"section-header__title\">\n    <ng-content>\n      <m-header [level]=\"level()\" [label]=\"label()\" />\n    </ng-content>\n    @if (subLabel(); as sub) {\n      <span class=\"section-header__sub\">{{ sub | translate }}</span>\n    }\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}\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%;margin:0 auto}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;padding:1rem 1.5rem}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.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__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__back{display:flex;align-items:center;flex-shrink:0}.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: "component", type: ContextMenuComponent, selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted"], outputs: ["toggleChange", "action"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate"], 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", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 }, 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()" }, 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: 'arrow_back', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (icon(); as iconName) {\n    <m-icon [name]=\"iconName\" />\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        [noTranslate]=\"noTranslate()\" />\n    }\n    <ng-content select=\"[sub]\" />\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\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@if (spacing()) {\n  <div class=\"section-header__container\" [style.max-width]=\"maxWidth()\">\n    <div class=\"section-header__inner\">\n      <ng-container [ngTemplateOutlet]=\"body\" />\n    </div>\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"body\" />\n}\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%;margin:0 auto}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;padding:1rem 1.5rem}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.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__back{display:flex;align-items:center;flex-shrink:0}.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"], outputs: ["toggleChange", "action"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate"], 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", "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,
-                        TranslatePipe,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'm-section-header',
                         '[class.is-sticky-enabled]': 'sticky()',
@@ -8541,8 +8407,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[class.has-sidepanel]': 'sidepanel()',
                         '[class.no-border]': 'noBorder()',
                         '[class.spacing]': 'spacing()',
-                    }, template: "@if (spacing()) {\n  <div class=\"section-header__container\" [style.max-width]=\"maxWidth()\">\n    <div class=\"section-header__inner\">\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: 'arrow_back', iconOnly: true }\"\n            (clicked)=\"back.emit()\" />\n        </div>\n      } @else if (icon(); as iconName) {\n        <m-icon [name]=\"iconName\" />\n      }\n      <div class=\"section-header__title\">\n        <ng-content>\n          <m-header [level]=\"level()\" [label]=\"label()\" />\n        </ng-content>\n        @if (subLabel(); as sub) {\n          <span class=\"section-header__sub\">{{ sub | translate }}</span>\n        }\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    </div>\n  </div>\n} @else {\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: 'arrow_back', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (icon(); as iconName) {\n    <m-icon [name]=\"iconName\" />\n  }\n  <div class=\"section-header__title\">\n    <ng-content>\n      <m-header [level]=\"level()\" [label]=\"label()\" />\n    </ng-content>\n    @if (subLabel(); as sub) {\n      <span class=\"section-header__sub\">{{ sub | translate }}</span>\n    }\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}\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%;margin:0 auto}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;padding:1rem 1.5rem}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.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__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__back{display:flex;align-items:center;flex-shrink:0}.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 }] }], 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"] }] } });
+                    }, 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: 'arrow_back', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (icon(); as iconName) {\n    <m-icon [name]=\"iconName\" />\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        [noTranslate]=\"noTranslate()\" />\n    }\n    <ng-content select=\"[sub]\" />\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\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@if (spacing()) {\n  <div class=\"section-header__container\" [style.max-width]=\"maxWidth()\">\n    <div class=\"section-header__inner\">\n      <ng-container [ngTemplateOutlet]=\"body\" />\n    </div>\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"body\" />\n}\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%;margin:0 auto}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;padding:1rem 1.5rem}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.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__back{display:flex;align-items:center;flex-shrink:0}.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 }] }], 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: 'arrow-left',
@@ -12011,15 +11877,201 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     }, styles: [":host{display:block;width:100%}:host.sticky{position:sticky;top:0;width:100%;height:100svh;z-index:10;pointer-events:auto;transition:opacity .3s ease-out}:host.sticky[style*=\"opacity: 0\"]{pointer-events:none;visibility:hidden}.m-carousel-container{position:relative;width:100%;height:var(--m-carousel-height, 500px);min-height:400px;overflow:hidden;border-radius:var(--m-carousel-radius, 16px);background:var(--m-carousel-background, transparent);box-shadow:var(--m-carousel-shadow, 0 10px 30px rgba(0, 0, 0, .1));transition:all .5s cubic-bezier(.4,0,.2,1)}.m-carousel-container.sticky{height:100%}.m-carousel-container.space-half.div-vertical{width:50%}.m-carousel-container.space-half.div-horizontal{height:50%}.m-carousel-container.not-rounded{border-radius:0}.m-carousel-container.pos-left .m-carousel-content-wrapper{flex-direction:row-reverse}.m-carousel-container.pos-top .m-carousel-content-wrapper{flex-direction:column-reverse}.m-carousel-container.pos-bottom .m-carousel-content-wrapper{flex-direction:column}.m-carousel-container .m-carousel-slides{width:100%;height:100%;position:relative}.m-carousel-container .m-carousel-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .5s ease-in-out,visibility .5s}.m-carousel-container .m-carousel-slide.active{opacity:1;visibility:visible;z-index:1}.m-carousel-container .m-carousel-content-wrapper{display:flex;flex-direction:row;width:100%;height:100%;align-items:stretch}.m-carousel-container .m-carousel-image-area{flex:1;min-width:0;position:relative;overflow:hidden;background:var(--m-carousel-image-background, #111)}.m-carousel-container .m-carousel-image-area img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease-out}.m-carousel-container .m-carousel-image-area .m-carousel-image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--m-carousel-overlay-background, linear-gradient(to right, rgba(0, 0, 0, 0) 85%, rgb(15, 15, 15) 100%));opacity:var(--m-carousel-overlay-opacity, 1);z-index:1;pointer-events:none}.m-carousel-container .m-carousel-slide.active .m-carousel-image-area img{transform:scale(1.05)}.m-carousel-container .m-carousel-component-area,.m-carousel-container .m-carousel-default-info{flex:0 0 40%;min-width:0;background:var(--m-carousel-component-background, #0f0f0f);display:flex;flex-direction:column;justify-content:center;padding:var(--m-carousel-component-padding, 60px);color:var(--m-carousel-component-color, #fff);-webkit-backdrop-filter:var(--m-carousel-component-backdrop, none);backdrop-filter:var(--m-carousel-component-backdrop, none);z-index:2}.m-carousel-container .m-carousel-default-info h2{font-size:2.5rem;margin-bottom:1rem;font-weight:700;background:linear-gradient(45deg,#fff,#aaa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.m-carousel-container .m-carousel-default-info p{font-size:1.1rem;line-height:1.6;color:#fffc}.m-carousel-container .m-carousel-dots{position:absolute;display:flex;gap:12px;z-index:10;padding:20px}.m-carousel-container .m-carousel-dots.dots-bottom{bottom:var(--m-carousel-dots-bottom, 0);left:var(--m-carousel-dots-left, 50%);transform:var(--m-carousel-dots-transform, translateX(-50%))}.m-carousel-container .m-carousel-dots.dots-top{top:0;left:50%;transform:translate(-50%)}.m-carousel-container .m-carousel-dots.dots-left{left:20px;top:50%;transform:translateY(-50%);flex-direction:column}.m-carousel-container .m-carousel-dots.dots-right{right:20px;top:50%;transform:translateY(-50%);flex-direction:column}.m-carousel-container .m-carousel-dot{width:var(--m-carousel-dot-width, 12px);height:var(--m-carousel-dot-height, 12px);border-radius:var(--m-carousel-dot-radius, 50%);border:var(--m-carousel-dot-border, 2px solid rgba(255, 255, 255, .5));background:var(--m-carousel-dot-background, transparent);cursor:pointer;transition:all .3s ease;padding:0}.m-carousel-container .m-carousel-dot:hover{background:#ffffff4d}.m-carousel-container .m-carousel-dot.active{background:var(--m-carousel-dot-active-background, #fff);border-color:var(--m-carousel-dot-active-border-color, #fff);width:var(--m-carousel-dot-active-width, 24px);border-radius:var(--m-carousel-dot-active-radius, 6px)}.m-carousel-container .m-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:none;color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:all .3s ease;opacity:0}.m-carousel-container .m-carousel-nav svg{width:24px;height:24px}.m-carousel-container .m-carousel-nav:hover{background:#fff3;transform:translateY(-50%) scale(1.1)}.m-carousel-container .m-carousel-container:hover .m-carousel-nav{opacity:1}.m-carousel-container .m-carousel-prev{left:20px}.m-carousel-container .m-carousel-next{right:20px}@media(min-width:768px)and (max-width:991px){.m-carousel-container .m-carousel-component-area,.m-carousel-container .m-carousel-default-info{padding:var(--m-carousel-component-padding, 30px)}}@media(max-width:767px){.m-carousel-container{height:auto;min-height:500px}.m-carousel-container .m-carousel-content-wrapper{flex-direction:column!important}.m-carousel-container .m-carousel-image-area{flex:0 0 280px;width:100%}.m-carousel-container .m-carousel-image-area .m-carousel-image-overlay{background:linear-gradient(to bottom,#0000 60%,#0f0f0f)}.m-carousel-container .m-carousel-component-area,.m-carousel-container .m-carousel-default-info{flex:1;width:100%;padding:24px;background:#0f0f0f}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
 
+/**
+ * Resolves an attribute directive's value — `mModal`/`mSidePanel`,
+ * `mAccordion`/`mAccordionGroup` — where an asset name resolves through
+ * `AssetStore` and an inline config object passes through unchanged.
+ */
+function resolveOverlayValue(assetStore, subFolder, value, elementRef) {
+    if (value === undefined || value === null)
+        return of({});
+    if (typeof value === 'string') {
+        const isOne = elementRef.nativeElement.tagName.startsWith('M-ONE');
+        return resolveConfigAsset(assetStore, subFolder, value, isOne, undefined);
+    }
+    return of(value);
+}
+
+const SECTION_ACCORDION_GROUP = new InjectionToken('SECTION_ACCORDION_GROUP');
+
+/**
+ * Groups the SectionAccordions nested beneath this Section — at most one
+ * open at a time. Coexists with `mAccordion` on the same `<m-section>`:
+ * this only governs its accordion descendants, it doesn't collapse itself.
+ */
+class SectionAccordionGroupDirective {
+    mAccordionGroup = input(undefined, ...(ngDevMode ? [{ debugName: "mAccordionGroup" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    assetStore = inject(AssetStore);
+    // Same test SectionAccordionDirective makes: a plain `mAccordionGroup`
+    // attribute is a group outright, while the Canvas binds the property on
+    // every Section, so there only a bound value (a configs bag, `{}` at
+    // minimum) marks a group the author actually attached.
+    staticAttribute = inject(new HostAttributeToken('mAccordionGroup'), { optional: true });
+    // `!= null`: the Canvas binds through safe navigation, which resolves to
+    // null for an unattached Section (see SectionAccordionDirective).
+    isActive = computed(() => this.staticAttribute !== null || this.mAccordionGroup() != null, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    configResource = rxResource({
+        params: () => this.mAccordionGroup(),
+        stream: ({ params }) => resolveOverlayValue(this.assetStore, 'section_accordion_groups', params, this.elementRef),
+    });
+    resolvedConfig = computed(() => this.configResource.value() ?? {}, ...(ngDevMode ? [{ debugName: "resolvedConfig" }] : /* istanbul ignore next */ []));
+    // Overrides every member's own icon/toggleIcon when set (CONTEXT.md
+    // SectionAccordionGroup) — read by SectionAccordionDirective.
+    icon = computed(() => this.resolvedConfig()?.icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    toggleIcon = computed(() => this.resolvedConfig()?.toggleIcon, ...(ngDevMode ? [{ debugName: "toggleIcon" }] : /* istanbul ignore next */ []));
+    accordions = [];
+    register(accordion) {
+        this.accordions.push(accordion);
+        accordion.setOpen(this.accordions.length === 1);
+    }
+    unregister(accordion) {
+        const index = this.accordions.indexOf(accordion);
+        if (index !== -1)
+            this.accordions.splice(index, 1);
+    }
+    onOpened(accordion) {
+        this.accordions.forEach((a) => {
+            if (a !== accordion)
+                a.setOpen(false);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionAccordionGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: SectionAccordionGroupDirective, isStandalone: true, selector: "m-section[mAccordionGroup]", inputs: { mAccordionGroup: { classPropertyName: "mAccordionGroup", publicName: "mAccordionGroup", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: SECTION_ACCORDION_GROUP, useExisting: SectionAccordionGroupDirective },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionAccordionGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'm-section[mAccordionGroup]',
+                    providers: [
+                        { provide: SECTION_ACCORDION_GROUP, useExisting: SectionAccordionGroupDirective },
+                    ],
+                }]
+        }], propDecorators: { mAccordionGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "mAccordionGroup", required: false }] }] } });
+
+let counter = 0;
+/**
+ * Makes an `<m-section>` collapse — a toggle button renders at the start of
+ * its projected `m-section-header` (nothing renders, and the Section never
+ * collapses, if it has no header) and everything below the header collapses
+ * as one region. Ungrouped, starts open; inside an `mAccordionGroup`, only
+ * the first-registered member starts open (CONTEXT.md SectionAccordion).
+ */
+class SectionAccordionDirective {
+    mAccordion = input(undefined, ...(ngDevMode ? [{ debugName: "mAccordion" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    assetStore = inject(AssetStore);
+    // Inert on the Canvas — the glyph renders but a click never collapses the
+    // Section, so its children stay visible and droppable while composing
+    // (m-one-ui CONTEXT.md).
+    isDesignMode = !!inject(IS_DESIGN_MODE, { optional: true });
+    // skipSelf: this element's own provider is the boundary above — skip it to
+    // find the real ancestor group, if any.
+    group = inject(SECTION_ACCORDION_GROUP, { optional: true, skipSelf: true });
+    // Same instance as `group` when one exists — injected by concrete class
+    // (rather than through the token) purely to read its icon/toggleIcon,
+    // which aren't part of the minimal SectionAccordionGroupContext contract.
+    groupDirective = inject(SectionAccordionGroupDirective, {
+        optional: true,
+        skipSelf: true,
+    });
+    configResource = rxResource({
+        params: () => this.mAccordion(),
+        stream: ({ params }) => resolveOverlayValue(this.assetStore, 'section_accordions', params, this.elementRef),
+    });
+    resolvedConfig = computed(() => this.configResource.value() ?? {}, ...(ngDevMode ? [{ debugName: "resolvedConfig" }] : /* istanbul ignore next */ []));
+    // Written as a plain attribute (`<m-section mAccordion>`) this is set —
+    // an empty string — and the Section is an accordion whatever the input
+    // resolves to. A property binding leaves it null, which is how the design
+    // Canvas renders every Section: `[mAccordion]` is written statically in
+    // DesignRenderer's template, so this directive instantiates even where the
+    // author never attached the behaviour and every header grew a toggle
+    // glyph. There the bound value is what decides — an attached behaviour
+    // always carries a configs bag (`{}` at minimum), an unattached one binds
+    // `undefined`. Deliberately not keyed on DesignMode: the Canvas binds the
+    // same way under Preview, where DesignMode is off.
+    staticAttribute = inject(new HostAttributeToken('mAccordion'), { optional: true });
+    // `!= null` rather than `!== undefined`: Angular's safe-navigation operator
+    // resolves to null, and DesignRenderer binds `node.directives?.mAccordion
+    // ?.configs` — an unattached Section arrives as null, not undefined.
+    isActive = computed(() => this.staticAttribute !== null || this.mAccordion() != null, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    // An inert Canvas group is read past — its icons belong to a group the
+    // author never attached.
+    activeGroup = computed(() => this.groupDirective?.isActive() ? this.groupDirective : null, ...(ngDevMode ? [{ debugName: "activeGroup" }] : /* istanbul ignore next */ []));
+    icon = computed(() => this.activeGroup()?.icon() ?? this.resolvedConfig()?.icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    toggleIcon = computed(() => this.activeGroup()?.toggleIcon() ?? this.resolvedConfig()?.toggleIcon, ...(ngDevMode ? [{ debugName: "toggleIcon" }] : /* istanbul ignore next */ []));
+    // 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 */ []));
+    sectionAccordionId = `m-section-accordion-${++counter}`;
+    headerId = `${this.sectionAccordionId}-header`;
+    bodyId = `${this.sectionAccordionId}-body`;
+    ngOnInit() {
+        // The ancestor group is skipped when it too is only an inert Canvas
+        // instance — registering there would close every member but the first.
+        if (!this.isActive() || this.groupDirective?.isActive() === false)
+            return;
+        this.group?.register(this);
+    }
+    ngOnDestroy() {
+        this.group?.unregister(this);
+    }
+    setOpen(value) {
+        this._open.set(value);
+    }
+    toggle() {
+        if (this.isDesignMode)
+            return;
+        const next = !this.isOpen();
+        this._open.set(next);
+        if (next)
+            this.group?.onOpened(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionAccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: SectionAccordionDirective, isStandalone: true, selector: "m-section[mAccordion]", inputs: { mAccordion: { classPropertyName: "mAccordion", publicName: "mAccordion", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                // Boundary (ADR 0006): block an ancestor group from reaching past this
+                // Section into its own descendants, unless this same Section is also
+                // an `mAccordionGroup` host — then that's the correct value anyway.
+                provide: SECTION_ACCORDION_GROUP,
+                useFactory: () => inject(SectionAccordionGroupDirective, { optional: true, self: true }) ??
+                    null,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionAccordionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'm-section[mAccordion]',
+                    providers: [
+                        {
+                            // Boundary (ADR 0006): block an ancestor group from reaching past this
+                            // Section into its own descendants, unless this same Section is also
+                            // an `mAccordionGroup` host — then that's the correct value anyway.
+                            provide: SECTION_ACCORDION_GROUP,
+                            useFactory: () => inject(SectionAccordionGroupDirective, { optional: true, self: true }) ??
+                                null,
+                        },
+                    ],
+                }]
+        }], propDecorators: { mAccordion: [{ type: i0.Input, args: [{ isSignal: true, alias: "mAccordion", required: false }] }] } });
+
 class SectionComponent extends ConfigComponent {
     subFolder = LAYOUT_ASSET_FOLDER.section;
     // self: true — only present when this same `<m-section>` carries `mAccordion`.
     // SectionHeaderComponent (a projected child) injects the same instance to
     // render the toggle button (CONTEXT.md SectionAccordion).
-    accordion = inject(SectionAccordionDirective, {
+    accordionDirective = inject(SectionAccordionDirective, {
         optional: true,
         self: true,
     });
+    // Null while the directive is inert — DesignRenderer binds `[mAccordion]`
+    // 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 */ []));
@@ -12110,6 +12162,7 @@ class SectionComponent extends ConfigComponent {
                         sidepanel: self.resolvedSidepanel,
                         variant: self.resolvedVariant,
                         align: self.resolvedAlign,
+                        accordion: self.accordion,
                     };
                 },
             },
@@ -12119,10 +12172,10 @@ class SectionComponent extends ConfigComponent {
     }
     <div
       class="m-section__collapsible"
-      [id]="accordion?.bodyId"
-      [class.is-collapsed]="accordion && !accordion.isOpen()"
-      [attr.role]="accordion ? 'region' : null"
-      [attr.aria-labelledby]="accordion?.headerId"
+      [id]="accordion()?.bodyId"
+      [class.is-collapsed]="accordion() && !accordion()!.isOpen()"
+      [attr.role]="accordion() ? 'region' : null"
+      [attr.aria-labelledby]="accordion()?.headerId"
     >
       <div class="m-section__collapsible-content">
         @if (hero()) {
@@ -12174,10 +12227,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     }
     <div
       class="m-section__collapsible"
-      [id]="accordion?.bodyId"
-      [class.is-collapsed]="accordion && !accordion.isOpen()"
-      [attr.role]="accordion ? 'region' : null"
-      [attr.aria-labelledby]="accordion?.headerId"
+      [id]="accordion()?.bodyId"
+      [class.is-collapsed]="accordion() && !accordion()!.isOpen()"
+      [attr.role]="accordion() ? 'region' : null"
+      [attr.aria-labelledby]="accordion()?.headerId"
     >
       <div class="m-section__collapsible-content">
         @if (hero()) {
@@ -12251,6 +12304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                                     sidepanel: self.resolvedSidepanel,
                                     variant: self.resolvedVariant,
                                     align: self.resolvedAlign,
+                                    accordion: self.accordion,
                                 };
                             },
                         },
@@ -17127,7 +17181,7 @@ class ColorPickerBoxComponent {
       </div>
     </div>
   </m-section>
-  </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)}}.color-picker-box{width:100%;box-sizing:border-box;background:var(--m-background);border:var(--m-input-border-width, 2px) solid var(--m-text-input-border, var(--m-input-color, var(--m-mm, #4169e1)));border-radius:var(--m-input-radius, 4px);overflow:hidden;box-shadow:none;animation:color-picker-in .2s ease-out}.color-picker-box .color-picker-box-header{position:sticky;display:flex;flex-direction:row;top:0;left:0;width:100%;z-index:5260;align-items:center;justify-content:space-between;background:var(--m-background);border-bottom:1px solid var(--border-color)}.color-picker-box .color-picker-box-header .color-preview{height:2em;width:2em;border-radius:5px;margin:.5em}.color-picker-box .color-picker-box-header .color-header{flex:1;padding:0 .5em}.color-picker-box .color-area{position:relative;width:100%;height:5em;overflow:hidden}.color-picker-box .color-area .color-base{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(180deg,#fff,#fff0,#000),linear-gradient(90deg,gray,#fff0);pointer-events:none}.color-picker-box .color-area .saturation-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgb(128,128,128) 0%,transparent 100%)}.color-picker-box .color-area .brightness-gradient{position:absolute;inset:0;background:linear-gradient(180deg,#ffffff 0%,transparent 50%,#000000 100%)}.color-picker-box .color-area .color-pointer{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d;cursor:pointer;z-index:1}.color-picker-box .color-sliders{display:flex;flex-direction:column;gap:.5em;padding:.5em 1em;box-sizing:border-box}.color-picker-box .color-sliders .hue-slider,.color-picker-box .color-sliders .opacity-slider{height:.5em;position:relative;border-radius:.5em}.color-picker-box .color-sliders .hue-slider .pointer,.color-picker-box .color-sliders .opacity-slider .pointer{width:.5em;height:.5em;border-radius:50%;transform:translate(-50%,calc(-50% + 4px));border:2px solid var(--mag-border-color);box-shadow:0 1px 3px #0003;cursor:pointer;margin:0;padding:0;border:2px solid white;transition:scale .2s ease}.color-picker-box .color-sliders .hue-slider .pointer:hover,.color-picker-box .color-sliders .opacity-slider .pointer:hover{scale:1.2;box-shadow:0 2px 4px #0003}.color-picker-box .color-sliders .hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker-box .suggested-colors{padding:.5em;box-sizing:border-box;width:100%}.color-picker-box .suggested-colors .suggested-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5em;padding:.25em 0;border-bottom:1px solid var(--mag-border-color)}.color-picker-box .suggested-colors .suggested-header span{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:.75em;font-weight:500;color:var(--mm-color);display:flex;align-items:center;gap:.5em}.color-picker-box .suggested-colors .color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:8px;width:100%;padding:.25rem}.color-picker-box .suggested-colors .color-grid .color-option{width:24px;height:24px;border-radius:4px;cursor:pointer;border:1px solid var(--border-color);transition:all .2s ease;margin:auto;position:relative;padding:0}.color-picker-box .suggested-colors .color-grid .color-option:hover{transform:scale(1.1);z-index:1;box-shadow:0 2px 4px #0003}.color-picker-box .suggested-colors .color-grid .color-option:active{transform:scale(.95)}.color-picker-box .suggested-colors .color-grid .color-option[data-alpha]{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}@keyframes color-picker-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "directive", type: DraggableDirective, selector: "[mDraggable]", inputs: ["mDraggable", "handleSelector", "pos", "max", "min"], outputs: ["mDraggableChange", "dragStart", "dragEnd"] }, { kind: "directive", type: ToolTipDirective, selector: "[mToolTip]", inputs: ["mToolTip"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { 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", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: FileUploadDirective, selector: "[mFileUpload]", inputs: ["mFileUpload"], outputs: ["fileSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  </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)}}.color-picker-box{width:100%;box-sizing:border-box;background:var(--m-background);border:var(--m-input-border-width, 2px) solid var(--m-text-input-border, var(--m-input-color, var(--m-mm, #4169e1)));border-radius:var(--m-input-radius, 4px);overflow:hidden;box-shadow:none;animation:color-picker-in .2s ease-out}.color-picker-box .color-picker-box-header{position:sticky;display:flex;flex-direction:row;top:0;left:0;width:100%;z-index:5260;align-items:center;justify-content:space-between;background:var(--m-background);border-bottom:1px solid var(--border-color)}.color-picker-box .color-picker-box-header .color-preview{height:2em;width:2em;border-radius:5px;margin:.5em}.color-picker-box .color-picker-box-header .color-header{flex:1;padding:0 .5em}.color-picker-box .color-area{position:relative;width:100%;height:5em;overflow:hidden}.color-picker-box .color-area .color-base{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(180deg,#fff,#fff0,#000),linear-gradient(90deg,gray,#fff0);pointer-events:none}.color-picker-box .color-area .saturation-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgb(128,128,128) 0%,transparent 100%)}.color-picker-box .color-area .brightness-gradient{position:absolute;inset:0;background:linear-gradient(180deg,#ffffff 0%,transparent 50%,#000000 100%)}.color-picker-box .color-area .color-pointer{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d;cursor:pointer;z-index:1}.color-picker-box .color-sliders{display:flex;flex-direction:column;gap:.5em;padding:.5em 1em;box-sizing:border-box}.color-picker-box .color-sliders .hue-slider,.color-picker-box .color-sliders .opacity-slider{height:.5em;position:relative;border-radius:.5em}.color-picker-box .color-sliders .hue-slider .pointer,.color-picker-box .color-sliders .opacity-slider .pointer{width:.5em;height:.5em;border-radius:50%;transform:translate(-50%,calc(-50% + 4px));border:2px solid var(--mag-border-color);box-shadow:0 1px 3px #0003;cursor:pointer;margin:0;padding:0;border:2px solid white;transition:scale .2s ease}.color-picker-box .color-sliders .hue-slider .pointer:hover,.color-picker-box .color-sliders .opacity-slider .pointer:hover{scale:1.2;box-shadow:0 2px 4px #0003}.color-picker-box .color-sliders .hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker-box .suggested-colors{padding:.5em;box-sizing:border-box;width:100%}.color-picker-box .suggested-colors .suggested-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5em;padding:.25em 0;border-bottom:1px solid var(--mag-border-color)}.color-picker-box .suggested-colors .suggested-header span{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:.75em;font-weight:500;color:var(--mm-color);display:flex;align-items:center;gap:.5em}.color-picker-box .suggested-colors .color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:8px;width:100%;padding:.25rem}.color-picker-box .suggested-colors .color-grid .color-option{width:24px;height:24px;border-radius:4px;cursor:pointer;border:1px solid var(--border-color);transition:all .2s ease;margin:auto;position:relative;padding:0}.color-picker-box .suggested-colors .color-grid .color-option:hover{transform:scale(1.1);z-index:1;box-shadow:0 2px 4px #0003}.color-picker-box .suggested-colors .color-grid .color-option:active{transform:scale(.95)}.color-picker-box .suggested-colors .color-grid .color-option[data-alpha]{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}@keyframes color-picker-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "directive", type: DraggableDirective, selector: "[mDraggable]", inputs: ["mDraggable", "handleSelector", "pos", "max", "min"], outputs: ["mDraggableChange", "dragStart", "dragEnd"] }, { kind: "directive", type: ToolTipDirective, selector: "[mToolTip]", inputs: ["mToolTip"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "noTranslate", "reverse", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { 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", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: FileUploadDirective, selector: "[mFileUpload]", inputs: ["mFileUpload"], outputs: ["fileSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ColorPickerBoxComponent, decorators: [{
             type: Component,
@@ -17629,7 +17683,7 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.TOGGLE: {
-                const { ToggleInputComponent } = await import('./magmonium-one-toggle-DAuDrcHw.mjs');
+                const { ToggleInputComponent } = await import('./magmonium-one-toggle-BYujoexg.mjs');
                 this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                 break;
             }
@@ -17641,12 +17695,12 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.PASSWORD: {
-                const { PasswordInputComponent } = await import('./magmonium-one-password-CsCnHV0b.mjs');
+                const { PasswordInputComponent } = await import('./magmonium-one-password-ChSqmvi4.mjs');
                 this.createDynamicComponent(seq, PasswordInputComponent);
                 break;
             }
             case InputType.OTP: {
-                const { OtpInputComponent } = await import('./magmonium-one-otp-B24CBOMZ.mjs');
+                const { OtpInputComponent } = await import('./magmonium-one-otp-Dt96oQ44.mjs');
                 this.createDynamicComponent(seq, OtpInputComponent);
                 break;
             }
@@ -24586,7 +24640,7 @@ class TimelineComponent extends ConfigComponent {
         return { item, ...(timeline.componentInputs ?? {}) };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TimelineComponent, isStandalone: true, selector: "m-timeline, m-one-timeline", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, usesInheritance: true, ngImport: i0, template: "@if (config(); as timeline) {\n  <m-section>\n    @if (timeline.label) {\n      <m-section-header [label]=\"timeline.label\" [level]=\"3\" />\n    }\n    <m-col>\n      <div\n        class=\"m-timeline\"\n        [class.m-timeline--compact]=\"timeline.variant === 'compact'\"\n        [class.m-timeline--mobile]=\"timeline.mobileOnly\"\n      >\n        @if (timeline.isLoading) {\n          <div class=\"m-timeline__skeleton\">\n            @for (i of skeletonItems; track $index) {\n              <div class=\"m-timeline__row\">\n                <div class=\"m-timeline__date\">\n                  <span class=\"m-timeline__skeleton-date\"></span>\n                </div>\n                <div class=\"m-timeline__connector\">\n                  <div class=\"m-timeline__dot m-timeline__dot--skeleton\"></div>\n                  <div class=\"m-timeline__line m-timeline__line--skeleton\"></div>\n                </div>\n                <div class=\"m-timeline__content\">\n                  <div class=\"m-timeline__skeleton-content\"></div>\n                </div>\n              </div>\n            }\n          </div>\n        } @else if (!timeline.items?.length) {\n          <div class=\"m-timeline__empty\">\n            <span class=\"m-timeline__empty-label\">{{ 'no-timeline-entries' | translate }}</span>\n          </div>\n        } @else {\n          @for (item of visibleItems(); track $index; let last = $last) {\n            <div\n              class=\"m-timeline__row\"\n              [class.m-timeline__row--last]=\"last && !hasMore()\"\n            >\n              <div class=\"m-timeline__date\">\n                @if (timeline.dateFormat !== 'relative') {\n                  <span class=\"m-timeline__date-absolute\">\n                    {{ item.timestamp | date: 'MMM d' }}\n                  </span>\n                }\n                @if (timeline.dateFormat !== 'absolute') {\n                  <span class=\"m-timeline__date-relative\">\n                    {{ item.timestamp | timeAgo }}\n                  </span>\n                }\n              </div>\n\n              <div class=\"m-timeline__connector\">\n                <div class=\"m-timeline__dot\"></div>\n                @if (!last && timeline.showLine !== false) {\n                  <div class=\"m-timeline__line\"></div>\n                }\n              </div>\n\n              <div class=\"m-timeline__content\">\n                @if (timeline.component) {\n                  <ng-container\n                    [ngComponentOutlet]=\"timeline.component\"\n                    [ngComponentOutletInputs]=\"resolveInputs(item, timeline)\"\n                  />\n                } @else if (item.label) {\n                  <span class=\"m-timeline__label\">{{ item.label }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          @if (hasMore()) {\n            <div class=\"m-timeline__more\">\n              <m-button\n                [config]=\"{\n                  label: 'view-more',\n                  icon: 'chevron-down',\n                  fullWidth: true,\n                }\"\n                (clicked)=\"loadMore()\"\n              />\n            </div>\n          }\n        }\n      </div>\n    </m-col>\n  </m-section>\n}\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:100%}.m-timeline{display:flex;flex-direction:column;width:100%}.m-timeline--compact{padding:1rem;gap:.25rem}.m-timeline--compact .m-timeline__row{gap:0 .5rem}.m-timeline--compact .m-timeline__dot{width:8px;height:8px}.m-timeline--compact .m-timeline__content{padding-bottom:0}.m-timeline--mobile{padding:.4rem!important}.m-timeline--mobile .m-timeline__row{grid-template-columns:1.25rem 1fr!important;grid-template-rows:auto auto;gap:0!important;padding:.4rem .25rem!important}.m-timeline--mobile .m-timeline__date{grid-column:2;grid-row:1;align-items:flex-start!important;padding:0 0 .2rem!important;flex-direction:row!important;gap:.4rem!important}.m-timeline--mobile .m-timeline__date-absolute{font-size:.7rem!important}.m-timeline--mobile .m-timeline__date-relative{font-size:.65rem!important;opacity:.5}.m-timeline--mobile .m-timeline__connector{grid-column:1;grid-row:1/3}.m-timeline--mobile .m-timeline__dot{width:6px!important;height:6px!important;margin-top:.35rem!important}.m-timeline--mobile .m-timeline__line{width:1px!important;margin:.4rem 0!important;opacity:.3!important}.m-timeline--mobile .m-timeline__content{grid-column:2;grid-row:2;padding-bottom:1.25rem!important}.m-timeline__row{display:grid;grid-template-columns:5.5rem 2rem 1fr;gap:0 .5rem;position:relative;padding:.25rem .5rem;transition:background-color .3s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(20px);animation:timeline-entry .6s cubic-bezier(.2,.8,.2,1) forwards}.m-timeline__row:nth-child(1){animation-delay:.08s}.m-timeline__row:nth-child(2){animation-delay:.16s}.m-timeline__row:nth-child(3){animation-delay:.24s}.m-timeline__row:nth-child(4){animation-delay:.32s}.m-timeline__row:nth-child(5){animation-delay:.4s}.m-timeline__row:nth-child(6){animation-delay:.48s}.m-timeline__row:nth-child(7){animation-delay:.56s}.m-timeline__row:nth-child(8){animation-delay:.64s}.m-timeline__row:nth-child(9){animation-delay:.72s}.m-timeline__row:nth-child(10){animation-delay:.8s}.m-timeline__row:nth-child(11){animation-delay:.88s}.m-timeline__row:nth-child(12){animation-delay:.96s}.m-timeline__row:nth-child(13){animation-delay:1.04s}.m-timeline__row:nth-child(14){animation-delay:1.12s}.m-timeline__row:nth-child(15){animation-delay:1.2s}.m-timeline__row:nth-child(16){animation-delay:1.28s}.m-timeline__row:nth-child(17){animation-delay:1.36s}.m-timeline__row:nth-child(18){animation-delay:1.44s}.m-timeline__row:nth-child(19){animation-delay:1.52s}.m-timeline__row:nth-child(20){animation-delay:1.6s}.m-timeline__row:hover{background:color-mix(in srgb,var(--m-mm) 4%,transparent)}.m-timeline__row:hover .m-timeline__dot{transform:scale(1.3);box-shadow:0 0 15px color-mix(in srgb,var(--m-mm) 50%,transparent)}.m-timeline__row--last .m-timeline__content{padding-bottom:0}.m-timeline__date{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;padding-top:.4rem;gap:.1rem;min-width:0}.m-timeline__date-absolute{font-size:.75rem;font-weight:800;color:var(--m-text);white-space:nowrap;font-feature-settings:\"tnum\";letter-spacing:-.01em}.m-timeline__date-relative{font-size:.6rem;font-weight:700;color:var(--m-text-tertiary);white-space:nowrap;text-transform:uppercase}.m-timeline__connector{display:flex;flex-direction:column;align-items:center;position:relative}.m-timeline__dot{width:8px;height:8px;border-radius:50%;background:var(--m-mm);box-shadow:0 0 10px color-mix(in srgb,var(--m-mm) 40%,transparent);flex-shrink:0;margin-top:.55rem;z-index:1;transition:all .3s ease}.m-timeline__dot--skeleton{background:var(--m-border);box-shadow:none;animation:timeline-pulse 1.4s ease-in-out infinite}.m-timeline__line{display:block;flex:1;width:2px;background:linear-gradient(to bottom,var(--m-mm),transparent);min-height:1.5rem;margin:.5rem 0;opacity:.6;transition:all .3s ease;animation:timeline-fade-in 1s ease-in}.m-timeline__content{padding-top:.1rem;padding-bottom:2rem;min-width:0}.m-timeline__label{font-size:.9rem;color:var(--m-text-secondary);line-height:1.5;font-weight:500}.m-timeline__empty{display:flex;align-items:center;justify-content:center;padding:4rem 1rem}.m-timeline__empty-label{font-size:.9rem;font-weight:600;color:var(--m-text-tertiary);text-transform:uppercase;letter-spacing:.1em}.m-timeline__skeleton{display:flex;flex-direction:column;gap:1.5rem}.m-timeline__skeleton-date{display:block;height:.75rem;width:4rem;background:var(--m-border);border-radius:4px;margin-top:.25rem;animation:timeline-pulse 1.4s ease-in-out infinite;align-self:flex-end}.m-timeline__skeleton-content{height:3.5rem;background:var(--m-border);border-radius:.75rem;animation:timeline-pulse 1.4s ease-in-out infinite;opacity:.6}.m-timeline__more{display:grid;grid-template-columns:5.5rem 2rem 1fr;gap:0 .5rem;padding:1rem 0 4rem}.m-timeline__more m-button{grid-column:1/-1}.m-timeline__more-button{grid-column:3;margin-bottom:2rem;width:fit-content}.m-timeline__more-icon,.m-timeline__more-text{display:none}@keyframes timeline-entry{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes timeline-fade-in{0%{opacity:0}to{opacity:.6}}@keyframes timeline-pulse{0%,to{opacity:.35}50%{opacity:.7}}@media(max-width:600px){.m-timeline{padding:.4rem!important}.m-timeline__row{grid-template-columns:1.25rem 1fr!important;grid-template-rows:auto auto;gap:0!important;padding:.4rem .25rem!important}.m-timeline__date{grid-column:2;grid-row:1;align-items:flex-start!important;padding:0 0 .2rem!important;flex-direction:row!important;gap:.4rem!important}.m-timeline__date-absolute{font-size:.7rem!important}.m-timeline__date-relative{font-size:.65rem!important;opacity:.5}.m-timeline__connector{grid-column:1;grid-row:1/3}.m-timeline__dot{width:6px!important;height:6px!important;margin-top:.35rem!important}.m-timeline__line{width:1px!important;margin:.4rem 0!important;opacity:.3!important}.m-timeline__content{grid-column:2;grid-row:2;padding-bottom:1.25rem!important}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { 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", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TimelineComponent, isStandalone: true, selector: "m-timeline, m-one-timeline", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, usesInheritance: true, ngImport: i0, template: "@if (config(); as timeline) {\n  <m-section>\n    @if (timeline.label) {\n      <m-section-header [label]=\"timeline.label\" [level]=\"3\" />\n    }\n    <m-col>\n      <div\n        class=\"m-timeline\"\n        [class.m-timeline--compact]=\"timeline.variant === 'compact'\"\n        [class.m-timeline--mobile]=\"timeline.mobileOnly\"\n      >\n        @if (timeline.isLoading) {\n          <div class=\"m-timeline__skeleton\">\n            @for (i of skeletonItems; track $index) {\n              <div class=\"m-timeline__row\">\n                <div class=\"m-timeline__date\">\n                  <span class=\"m-timeline__skeleton-date\"></span>\n                </div>\n                <div class=\"m-timeline__connector\">\n                  <div class=\"m-timeline__dot m-timeline__dot--skeleton\"></div>\n                  <div class=\"m-timeline__line m-timeline__line--skeleton\"></div>\n                </div>\n                <div class=\"m-timeline__content\">\n                  <div class=\"m-timeline__skeleton-content\"></div>\n                </div>\n              </div>\n            }\n          </div>\n        } @else if (!timeline.items?.length) {\n          <div class=\"m-timeline__empty\">\n            <span class=\"m-timeline__empty-label\">{{ 'no-timeline-entries' | translate }}</span>\n          </div>\n        } @else {\n          @for (item of visibleItems(); track $index; let last = $last) {\n            <div\n              class=\"m-timeline__row\"\n              [class.m-timeline__row--last]=\"last && !hasMore()\"\n            >\n              <div class=\"m-timeline__date\">\n                @if (timeline.dateFormat !== 'relative') {\n                  <span class=\"m-timeline__date-absolute\">\n                    {{ item.timestamp | date: 'MMM d' }}\n                  </span>\n                }\n                @if (timeline.dateFormat !== 'absolute') {\n                  <span class=\"m-timeline__date-relative\">\n                    {{ item.timestamp | timeAgo }}\n                  </span>\n                }\n              </div>\n\n              <div class=\"m-timeline__connector\">\n                <div class=\"m-timeline__dot\"></div>\n                @if (!last && timeline.showLine !== false) {\n                  <div class=\"m-timeline__line\"></div>\n                }\n              </div>\n\n              <div class=\"m-timeline__content\">\n                @if (timeline.component) {\n                  <ng-container\n                    [ngComponentOutlet]=\"timeline.component\"\n                    [ngComponentOutletInputs]=\"resolveInputs(item, timeline)\"\n                  />\n                } @else if (item.label) {\n                  <span class=\"m-timeline__label\">{{ item.label }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          @if (hasMore()) {\n            <div class=\"m-timeline__more\">\n              <m-button\n                [config]=\"{\n                  label: 'view-more',\n                  icon: 'chevron-down',\n                  fullWidth: true,\n                }\"\n                (clicked)=\"loadMore()\"\n              />\n            </div>\n          }\n        }\n      </div>\n    </m-col>\n  </m-section>\n}\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:100%}.m-timeline{display:flex;flex-direction:column;width:100%}.m-timeline--compact{padding:1rem;gap:.25rem}.m-timeline--compact .m-timeline__row{gap:0 .5rem}.m-timeline--compact .m-timeline__dot{width:8px;height:8px}.m-timeline--compact .m-timeline__content{padding-bottom:0}.m-timeline--mobile{padding:.4rem!important}.m-timeline--mobile .m-timeline__row{grid-template-columns:1.25rem 1fr!important;grid-template-rows:auto auto;gap:0!important;padding:.4rem .25rem!important}.m-timeline--mobile .m-timeline__date{grid-column:2;grid-row:1;align-items:flex-start!important;padding:0 0 .2rem!important;flex-direction:row!important;gap:.4rem!important}.m-timeline--mobile .m-timeline__date-absolute{font-size:.7rem!important}.m-timeline--mobile .m-timeline__date-relative{font-size:.65rem!important;opacity:.5}.m-timeline--mobile .m-timeline__connector{grid-column:1;grid-row:1/3}.m-timeline--mobile .m-timeline__dot{width:6px!important;height:6px!important;margin-top:.35rem!important}.m-timeline--mobile .m-timeline__line{width:1px!important;margin:.4rem 0!important;opacity:.3!important}.m-timeline--mobile .m-timeline__content{grid-column:2;grid-row:2;padding-bottom:1.25rem!important}.m-timeline__row{display:grid;grid-template-columns:5.5rem 2rem 1fr;gap:0 .5rem;position:relative;padding:.25rem .5rem;transition:background-color .3s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(20px);animation:timeline-entry .6s cubic-bezier(.2,.8,.2,1) forwards}.m-timeline__row:nth-child(1){animation-delay:.08s}.m-timeline__row:nth-child(2){animation-delay:.16s}.m-timeline__row:nth-child(3){animation-delay:.24s}.m-timeline__row:nth-child(4){animation-delay:.32s}.m-timeline__row:nth-child(5){animation-delay:.4s}.m-timeline__row:nth-child(6){animation-delay:.48s}.m-timeline__row:nth-child(7){animation-delay:.56s}.m-timeline__row:nth-child(8){animation-delay:.64s}.m-timeline__row:nth-child(9){animation-delay:.72s}.m-timeline__row:nth-child(10){animation-delay:.8s}.m-timeline__row:nth-child(11){animation-delay:.88s}.m-timeline__row:nth-child(12){animation-delay:.96s}.m-timeline__row:nth-child(13){animation-delay:1.04s}.m-timeline__row:nth-child(14){animation-delay:1.12s}.m-timeline__row:nth-child(15){animation-delay:1.2s}.m-timeline__row:nth-child(16){animation-delay:1.28s}.m-timeline__row:nth-child(17){animation-delay:1.36s}.m-timeline__row:nth-child(18){animation-delay:1.44s}.m-timeline__row:nth-child(19){animation-delay:1.52s}.m-timeline__row:nth-child(20){animation-delay:1.6s}.m-timeline__row:hover{background:color-mix(in srgb,var(--m-mm) 4%,transparent)}.m-timeline__row:hover .m-timeline__dot{transform:scale(1.3);box-shadow:0 0 15px color-mix(in srgb,var(--m-mm) 50%,transparent)}.m-timeline__row--last .m-timeline__content{padding-bottom:0}.m-timeline__date{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;padding-top:.4rem;gap:.1rem;min-width:0}.m-timeline__date-absolute{font-size:.75rem;font-weight:800;color:var(--m-text);white-space:nowrap;font-feature-settings:\"tnum\";letter-spacing:-.01em}.m-timeline__date-relative{font-size:.6rem;font-weight:700;color:var(--m-text-tertiary);white-space:nowrap;text-transform:uppercase}.m-timeline__connector{display:flex;flex-direction:column;align-items:center;position:relative}.m-timeline__dot{width:8px;height:8px;border-radius:50%;background:var(--m-mm);box-shadow:0 0 10px color-mix(in srgb,var(--m-mm) 40%,transparent);flex-shrink:0;margin-top:.55rem;z-index:1;transition:all .3s ease}.m-timeline__dot--skeleton{background:var(--m-border);box-shadow:none;animation:timeline-pulse 1.4s ease-in-out infinite}.m-timeline__line{display:block;flex:1;width:2px;background:linear-gradient(to bottom,var(--m-mm),transparent);min-height:1.5rem;margin:.5rem 0;opacity:.6;transition:all .3s ease;animation:timeline-fade-in 1s ease-in}.m-timeline__content{padding-top:.1rem;padding-bottom:2rem;min-width:0}.m-timeline__label{font-size:.9rem;color:var(--m-text-secondary);line-height:1.5;font-weight:500}.m-timeline__empty{display:flex;align-items:center;justify-content:center;padding:4rem 1rem}.m-timeline__empty-label{font-size:.9rem;font-weight:600;color:var(--m-text-tertiary);text-transform:uppercase;letter-spacing:.1em}.m-timeline__skeleton{display:flex;flex-direction:column;gap:1.5rem}.m-timeline__skeleton-date{display:block;height:.75rem;width:4rem;background:var(--m-border);border-radius:4px;margin-top:.25rem;animation:timeline-pulse 1.4s ease-in-out infinite;align-self:flex-end}.m-timeline__skeleton-content{height:3.5rem;background:var(--m-border);border-radius:.75rem;animation:timeline-pulse 1.4s ease-in-out infinite;opacity:.6}.m-timeline__more{display:grid;grid-template-columns:5.5rem 2rem 1fr;gap:0 .5rem;padding:1rem 0 4rem}.m-timeline__more m-button{grid-column:1/-1}.m-timeline__more-button{grid-column:3;margin-bottom:2rem;width:fit-content}.m-timeline__more-icon,.m-timeline__more-text{display:none}@keyframes timeline-entry{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes timeline-fade-in{0%{opacity:0}to{opacity:.6}}@keyframes timeline-pulse{0%,to{opacity:.35}50%{opacity:.7}}@media(max-width:600px){.m-timeline{padding:.4rem!important}.m-timeline__row{grid-template-columns:1.25rem 1fr!important;grid-template-rows:auto auto;gap:0!important;padding:.4rem .25rem!important}.m-timeline__date{grid-column:2;grid-row:1;align-items:flex-start!important;padding:0 0 .2rem!important;flex-direction:row!important;gap:.4rem!important}.m-timeline__date-absolute{font-size:.7rem!important}.m-timeline__date-relative{font-size:.65rem!important;opacity:.5}.m-timeline__connector{grid-column:1;grid-row:1/3}.m-timeline__dot{width:6px!important;height:6px!important;margin-top:.35rem!important}.m-timeline__line{width:1px!important;margin:.4rem 0!important;opacity:.3!important}.m-timeline__content{grid-column:2;grid-row:2;padding-bottom:1.25rem!important}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { 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", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "noTranslate", "reverse", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
@@ -25972,7 +26026,7 @@ class NavHeaderComponent {
     }, ...(ngDevMode ? [{ debugName: "_trail" }] : /* istanbul ignore next */ []));
     _header = computed(() => this._isUser() ? null : this._navStore.breadcrumb().header, ...(ngDevMode ? [{ debugName: "_header" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NavHeaderComponent, isStandalone: true, selector: "m-nav-header", ngImport: i0, template: "<m-section>\n  @if (_trail(); as trail) {\n    <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n      <m-nav-trail [config]=\"trail\" />\n    </m-section-back>\n  }\n\n  @if (_isSearch()) {\n    <m-section-search\n      [value]=\"_searchStore.query()\"\n      [startOpen]=\"true\"\n      (searchChange)=\"_searchStore.updateQuery($event)\"\n    />\n  } @else if (_header(); as h) {\n    @if (h.label) {\n      <m-section-header class=\"nav-header__title\" [icon]=\"h.icon\" [label]=\"h.label\" />\n    }\n  }\n</m-section>\n", dependencies: [{ kind: "component", type: NavTrailComponent, selector: "m-nav-trail", inputs: ["config"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: SectionBackComponent, selector: "m-section-back", inputs: ["back", "label", "html", "padding", "paddingX", "paddingY"], outputs: ["navigate"] }, { kind: "component", type: SectionSearchComponent, selector: "m-section-search, m-one-section-search", inputs: ["value", "config", "required", "disabled", "invalid", "touched", "focused", "errors", "label", "searchLabel", "placeholder", "debounce", "startOpen", "sticky"], outputs: ["valueChange", "touchedChange", "searchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NavHeaderComponent, isStandalone: true, selector: "m-nav-header", ngImport: i0, template: "<m-section>\n  @if (_trail(); as trail) {\n    <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n      <m-nav-trail [config]=\"trail\" />\n    </m-section-back>\n  }\n\n  @if (_isSearch()) {\n    <m-section-search\n      [value]=\"_searchStore.query()\"\n      [startOpen]=\"true\"\n      (searchChange)=\"_searchStore.updateQuery($event)\"\n    />\n  } @else if (_header(); as h) {\n    @if (h.label) {\n      <m-section-header class=\"nav-header__title\" [icon]=\"h.icon\" [label]=\"h.label\" />\n    }\n  }\n</m-section>\n", dependencies: [{ kind: "component", type: NavTrailComponent, selector: "m-nav-trail", inputs: ["config"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "noTranslate", "reverse", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: SectionBackComponent, selector: "m-section-back", inputs: ["back", "label", "html", "padding", "paddingX", "paddingY"], outputs: ["navigate"] }, { kind: "component", type: SectionSearchComponent, selector: "m-section-search, m-one-section-search", inputs: ["value", "config", "required", "disabled", "invalid", "touched", "focused", "errors", "label", "searchLabel", "placeholder", "debounce", "startOpen", "sticky"], outputs: ["valueChange", "touchedChange", "searchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavHeaderComponent, decorators: [{
             type: Component,
@@ -30318,7 +30372,7 @@ class SvgGeneratorToolBoxComponent {
         }
       </div>
     </m-section>
-  </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)}}.svg-generator-tool-box{width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:1rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background-color:var(--m-backdrop-standard);border:1px solid var(--m-backdrop-border);border-radius:.5rem;overflow:hidden;max-height:300px;overflow-y:auto}.svg-generator-tool-box .svg-generator-tool-box-header{border-bottom:1px solid var(--border-color);top:0;position:sticky;z-index:5260;background:var(--background, #ffffff);padding:.5em 1em;display:flex;align-items:center;gap:.5em;justify-content:flex-start;width:100%;box-sizing:border-box}.svg-generator-tool-box .svg-generator-tool-box-header .m-header{display:block;width:100%;height:100%}.svg-generator-tool-box .svg-generator-tool-box-header h2{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:.8em;color:var(--mm-color)}.svg-generator-tool-box .svg-generator-tool-box-header .icon-container{display:flex;width:1em;height:1em}.svg-generator-tool-box .svg-generator-tool-box-content{display:flex;flex-direction:column;box-sizing:border-box}.svg-generator-tool-box .svg-generator-tool-box-content .options{display:flex;flex-direction:column;padding:0 1em;box-sizing:border-box;gap:.5em}.svg-generator-tool-box .svg-generator-tool-box-content .options h3{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:.8em}.svg-generator-tool-box .svg-generator-tool-box-content .form-radio{display:flex;flex-direction:column;gap:4px;padding:4px 0}.svg-generator-tool-box .svg-generator-tool-box-content .form-radio .form-radio__label{font-size:.75em;opacity:.7}.svg-generator-tool-box .svg-generator-tool-box-content .form-radio .form-radio__options{display:flex;gap:8px;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: FormGroupComponent, selector: "m-form, m-one-form", inputs: ["data", "state", "validation", "options", "fieldConfigs", "aclResolver", "autofocus", "readonly", "fieldRenderIds", "elements", "templates", "datas", "label", "subtitle"], outputs: ["dataChange", "act", "stateChange"] }, { kind: "component", type: MenuComponent, selector: "m-menu", inputs: ["config", "file", "root", "url", "extra", "hide", "hideLink", "isAdmin", "visibilityRule", "disableRule", "extraData"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  </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)}}.svg-generator-tool-box{width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:1rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background-color:var(--m-backdrop-standard);border:1px solid var(--m-backdrop-border);border-radius:.5rem;overflow:hidden;max-height:300px;overflow-y:auto}.svg-generator-tool-box .svg-generator-tool-box-header{border-bottom:1px solid var(--border-color);top:0;position:sticky;z-index:5260;background:var(--background, #ffffff);padding:.5em 1em;display:flex;align-items:center;gap:.5em;justify-content:flex-start;width:100%;box-sizing:border-box}.svg-generator-tool-box .svg-generator-tool-box-header .m-header{display:block;width:100%;height:100%}.svg-generator-tool-box .svg-generator-tool-box-header h2{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:.8em;color:var(--mm-color)}.svg-generator-tool-box .svg-generator-tool-box-header .icon-container{display:flex;width:1em;height:1em}.svg-generator-tool-box .svg-generator-tool-box-content{display:flex;flex-direction:column;box-sizing:border-box}.svg-generator-tool-box .svg-generator-tool-box-content .options{display:flex;flex-direction:column;padding:0 1em;box-sizing:border-box;gap:.5em}.svg-generator-tool-box .svg-generator-tool-box-content .options h3{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:.8em}.svg-generator-tool-box .svg-generator-tool-box-content .form-radio{display:flex;flex-direction:column;gap:4px;padding:4px 0}.svg-generator-tool-box .svg-generator-tool-box-content .form-radio .form-radio__label{font-size:.75em;opacity:.7}.svg-generator-tool-box .svg-generator-tool-box-content .form-radio .form-radio__options{display:flex;gap:8px;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "noTranslate", "reverse", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: FormGroupComponent, selector: "m-form, m-one-form", inputs: ["data", "state", "validation", "options", "fieldConfigs", "aclResolver", "autofocus", "readonly", "fieldRenderIds", "elements", "templates", "datas", "label", "subtitle"], outputs: ["dataChange", "act", "stateChange"] }, { kind: "component", type: MenuComponent, selector: "m-menu", inputs: ["config", "file", "root", "url", "extra", "hide", "hideLink", "isAdmin", "visibilityRule", "disableRule", "extraData"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SvgGeneratorToolBoxComponent, decorators: [{
             type: Component,
@@ -31585,4 +31639,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 
 export { DateInputComponent as $, ACCESS_DOMAINS as A, BaseInputComponent as B, COMPONENT_INPUT_REGISTRY as C, CardComponent as D, CardWrapperComponent as E, CarouselComponent as F, ChartComponent as G, CheckboxInputComponent as H, IS_DESIGN_MODE as I, ClearableInputComponent as J, ColComponent as K, LabelComponent as L, ColorPickerInputComponent as M, CommentItemComponent as N, CommentsApiService as O, CommentsComponent as P, CommentsStore as Q, ComponentInputComponent as R, ComponentStepperComponent as S, TranslatePipe as T, ConfigComponent as U, ConfirmComponent as V, ContextMenuComponent as W, CustomIconClass as X, CustomIconEditComponent as Y, DEFAULT_SIZE as Z, DashboardCardComponent as _, BaseTextInputComponent as a, NavComponent as a$, DatePickerComponent as a0, DeviceService as a1, DomService as a2, Domain as a3, DotGridComponent as a4, DragListDirective as a5, DragListItemDirective as a6, DraggableDirective as a7, DropdownInputComponent as a8, FLEX_VARIANTS as a9, LOGIN_STORE as aA, LanguageComponent as aB, LogoComponent as aC, MAG_SOCKET_EVENT as aD, MHeroColorDirective as aE, MHeroComponent as aF, MODAL_REF as aG, MODAL_STORE_REF as aH, MRefDirective as aI, MStepComponent as aJ, MURL_PARAM as aK, MURL_SEP as aL, ManifestEnrichmentService as aM, MenuComponent as aN, ModalDirective as aO, ModalRef as aP, ModalStore as aQ, MoneyPipe as aR, MultiRangeInputComponent as aS, MurlUrlSerializer as aT, NAV_DEFAULT_MURL as aU, NAV_ID_SEP as aV, NAV_MAIN_BUTTONS as aW, NAV_SEGMENT_RE as aX, NAV_STORE_REF as aY, NAV_WC_COMPONENTS as aZ, NAV_WIDGET_MAP as a_, FOLDER_PICK_LISTENER as aa, FORM_ASSET_FOLDER as ab, FileService as ac, FileUploadDirective as ad, FileUploadInputComponent as ae, FlexComponent as af, FlexItemComponent as ag, FormGroupComponent as ah, FrameComponent as ai, FreezeService as aj, GRID_BREAKPOINTS as ak, GetNavService as al, HeaderComponent$1 as am, HighlightDirective as an, HttpService as ao, ICON_SOURCE as ap, IS_SIDE_PANEL as aq, IconComponent as ar, ImgComponent as as, InputType as at, InstrumentScoreComponent as au, InterceptorObservables as av, JumbotronComponent as aw, KeyValueComponent as ax, LAYOUT_ASSET_FOLDER as ay, LOGIN_COMPONENT as az, TextOutputComponent as b, SectionFormComponent as b$, NavDetailsComponent as b0, NavHeaderComponent as b1, NavMenuComponent as b2, NavStore as b3, NavTrailComponent as b4, NothingComponent as b5, NotificationElementComponent as b6, NotificationGroupComponent as b7, NotificationPopupComponent as b8, NotificationService as b9, ReactiveElementComponent as bA, RemoteComponent as bB, RemoteLoaderService as bC, ResizeElementComponent as bD, RouteContainer as bE, RowComponent as bF, SEARCH_QUERY as bG, SEARCH_RESULTS_EVENT as bH, SECTION_ACCORDION_GROUP as bI, SECTION_FORM_CONTEXT as bJ, SHARED_ICONS as bK, SIZE_CONTEXT as bL, ScoreComponent as bM, ScrollComponent as bN, ScrollService as bO, SearchPanelComponent as bP, SearchStore as bQ, SearchUserPanelComponent as bR, SectionAccordionDirective as bS, SectionAccordionGroupDirective as bT, SectionBackComponent as bU, SectionBadgesComponent as bV, SectionButtonGroupComponent as bW, SectionCardComponent as bX, SectionComponent as bY, SectionFilterComponent as bZ, SectionFooterComponent as b_, NotificationStore as ba, NotificationType as bb, NotificationWidgetComponent as bc, ONE_ASSET_BASE_URL as bd, OPTIONS_SOURCE as be, OVERLAY_WIDGETS as bf, OneApp as bg, OptionsSourceDirective as bh, OverlayBodyComponent as bi, OverlayRef as bj, OverlayService as bk, PLATFORM_BUTTON_NAV_IDS as bl, PLATFORM_EXTENSIBLE_NAV_IDS as bm, PLATFORM_NAV_MAP as bn, PLATFORM_ROOT_CHILDREN as bo, PaginationComponent as bp, PanelComponent as bq, PercentagePipe as br, PlaygroundComponent as bs, PositionDirective as bt, PwaInstallComponent as bu, ROOT_NAV$1 as bv, RadioGroupComponent as bw, RadioInputComponent as bx, RangeInputComponent as by, RatingInputComponent as bz, ButtonComponent as c, WatermarkComponent as c$, SectionFormItemComponent as c0, SectionHeaderComponent as c1, SectionHeroComponent as c2, SectionSearchComponent as c3, SectionStepperComponent as c4, SectionTabsComponent as c5, SectionToggleComponent as c6, SectionToggleItemDirective as c7, SelectableCardInputComponent as c8, SelectorDirective as c9, ThemeDataService as cA, ThemeService as cB, ThemeStore as cC, TimeAgoPipe as cD, TimelineComponent as cE, ToggleButtonComponent as cF, ToggleInputComponent as cG, ToggleRadioInputComponent as cH, ToolTipDirective as cI, TooltipComponent as cJ, TranslateService as cK, TreeGridComponent as cL, URL_SEP as cM, USER_STORE_REF as cN, USER_TAB_MAP as cO, UlComponent as cP, UniverseComponent as cQ, UserApiService as cR, UserAvatarComponent as cS, UserComponent as cT, UserNavComponent as cU, UserSettingsComponent as cV, UserStore as cW, WC_ROUTE_CHANGED_EVENT as cX, WC_SEARCH_GROUPS as cY, WIN_USER_TAB_HOOK as cZ, WIN_USER_TAB_KEY as c_, SettingsSearchBarComponent as ca, SettingsSearchService as cb, ShapeComponent as cc, SharedStoreRegistry as cd, SidePanelDirective as ce, Size as cf, SocketStore as cg, SortComponent as ch, StatComponent as ci, StepComponent as cj, StepperComponent as ck, StepsComponent as cl, StorageService as cm, StrokeLinecap as cn, StrokeLinejoin as co, SummaryComponent as cp, SvgGeneratorComponent as cq, SvgGeneratorService as cr, SvgService as cs, TOTAL_COLUMNS as ct, TRANSLATION_SOURCE as cu, TableComponent as cv, TechnicalMeterComponent as cw, TextInputComponent as cx, TextareaInputComponent as cy, ThemeComponent as cz, APP_CONTEXT_REF as d, linkToNav as d$, WcRouterStore as d0, WrapperInputComponent as d1, anchorNavId as d2, applyColorsToElement as d3, bootstrapMagApp as d4, bootstrapPwaInstall as d5, buildWcBaseUrl as d6, calculateLuminance as d7, calculateRanks as d8, cellText as d9, getUniqueId as dA, getValue as dB, hasErrorComputed as dC, hexToRgb as dD, hslToRgb$1 as dE, initMagmoniumApp as dF, initialNotificationState as dG, initialState$2 as dH, initials as dI, injectAuthenticate as dJ, injectInstallApp as dK, injectParentSize as dL, injectScrollSticky as dM, isButtonName as dN, isCancelledComputed as dO, isExtensiblePlatformNavId as dP, isJson as dQ, isLoadingComputed as dR, isLocalhost as dS, isPlatformNavId as dT, isSize as dU, isTierPreview as dV, isUrlLocalhost as dW, isValidNavId as dX, isValidNavSegment as dY, isWebComponent as dZ, linkToId as d_, checkFilterCondition as da, childNavId as db, classListSignal as dc, coerceSize as dd, cornerEdge as de, cornerSide as df, createMap as dg, createPlatformNavMap as dh, deriveAvatarGradient as di, deriveContrastColor as dj, deriveOppositeColor as dk, derivePropertyName as dl, emailValidation as dm, evaluate as dn, evaluateBool as dp, flattenTreeGridRows as dq, formatBadgeCount as dr, fullName as ds, generateClipPath as dt, generateTransform as du, getClassList as dv, getProperty as dw, getScrollParent as dx, getTierFromPreviewPath as dy, getTreeGridRow as dz, ASSET_BASE_URL as e, toCssLength as e$, loadingActions as e0, mInterceptor as e1, manualValidation as e2, matchFieldValidation as e3, maxLengthValidation as e4, maxValidation as e5, mergePlatformNav as e6, mergeUnique as e7, mergeUniqueBy as e8, mergeUniqueWith as e9, provideOverlayWidgets as eA, providePlatformNavWidgets as eB, provideSearch as eC, provideSizeContext as eD, provideUserTabs as eE, publicGuard as eF, readFieldPatterns as eG, renderAddress as eH, requiredValidation as eI, resolveConfigAsset as eJ, resolveIconSize as eK, resolvePallet as eL, resolvePatternRules as eM, resolveSize as eN, rgbToHex as eO, rgbToHsl as eP, rowHasChildren as eQ, samePatterns as eR, segmentsToNavId as eS, setProperty as eT, setTreeGridChildren as eU, settingsWidgets as eV, shouldShowBadge as eW, splitNavId as eX, stringToColor as eY, toAttrBool as eZ, toAttrNumber as e_, minAgeValidation as ea, minLengthValidation as eb, minValidation as ec, miniMarkToHtml as ed, navIdChain as ee, navIdFor as ef, navIdSegment as eg, navIdToRoutePath as eh, navIdToSegments as ei, navToId as ej, parentNavId as ek, parseAddress as el, parseColor as em, parsePatternNames as en, patternValidation as eo, patternsValidation as ep, platformNavWidgets as eq, privateGuard as er, processImageToSvg as es, provideAppContext as et, provideMagAppConfig as eu, provideMagWcConfig as ev, provideMagWcRoutes as ew, provideModalComponents as ex, provideMurlUrlSerializer as ey, provideNavWidgets as ez, AccordionBodyDirective as f, toHostNavId as f0, toLength$1 as f1, toLocalNavId as f2, toggleTreeGridRow as f3, unfetchedPlatformNav as f4, urlValidation as f5, AccordionComponent as g, AccordionGroupComponent as h, ActionComponent as i, AnimatedGraphsComponent as j, AppCardComponent as k, AppRelationType as l, AppTileComponent as m, AssetStore as n, AssetUrlPipe as o, Assets as p, AuthActivityPageComponent as q, AuthApiService as r, AuthStore as s, AutosizeDirective as t, BadgeComponent as u, BandingComponent as v, BaseArrayInputComponent as w, BaseRootWebComponent as x, BaseWebComponent as y, ButtonGroupComponent as z };
-//# sourceMappingURL=magmonium-one-magmonium-one-DqEB7539.mjs.map
+//# sourceMappingURL=magmonium-one-magmonium-one-BSbTn-74.mjs.map