@magmonium/one 0.2.92 → 0.2.94

package/fesm2022/{magmonium-one-magmonium-one-CVoYIQ9Y.mjs → magmonium-one-magmonium-one-CORH8s0K.mjs}

@@ -7265,7 +7265,7 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.TOGGLE: {
-                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-BVPZzlCL.mjs');
+                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-DvD5jGYQ.mjs');
                     this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                     break;
                 }
@@ -7277,12 +7277,12 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.PASSWORD: {
-                    const { PasswordInputComponent } = await import('./magmonium-one-password-C8kP0ebV.mjs');
+                    const { PasswordInputComponent } = await import('./magmonium-one-password-BMb2G_AM.mjs');
                     this.createDynamicComponent(seq, PasswordInputComponent);
                     break;
                 }
                 case InputType.OTP: {
-                    const { OtpInputComponent } = await import('./magmonium-one-otp-C9WJQTVy.mjs');
+                    const { OtpInputComponent } = await import('./magmonium-one-otp-OeNODjrN.mjs');
                     this.createDynamicComponent(seq, OtpInputComponent);
                     break;
                 }
@@ -8809,6 +8809,8 @@ class MenuComponent {
     hide = input(...(ngDevMode ? [undefined, { debugName: "hide" }] : /* istanbul ignore next */ []));
     hideLink = input(false, ...(ngDevMode ? [{ debugName: "hideLink" }] : /* istanbul ignore next */ []));
     isAdmin = input(false, ...(ngDevMode ? [{ debugName: "isAdmin" }] : /* istanbul ignore next */ []));
+    /** Focus the first item once rendered — a popover menu opened from a trigger. */
+    autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
     action = output();
     visibilityRule = input(...(ngDevMode ? [undefined, { debugName: "visibilityRule" }] : /* istanbul ignore next */ []));
     disableRule = input(...(ngDevMode ? [undefined, { debugName: "disableRule" }] : /* istanbul ignore next */ []));
@@ -8817,6 +8819,11 @@ class MenuComponent {
     #httpService = inject(HttpService);
     #tree = signal([], ...(ngDevMode ? [{ debugName: "#tree" }] : /* istanbul ignore next */ []));
     #treeMap = signal({}, ...(ngDevMode ? [{ debugName: "#treeMap" }] : /* istanbul ignore next */ []));
+    #host = inject(ElementRef);
+    // Whether the next settled render should focus the first item: `autoFocus`
+    // decides the first one, a drill or back decides after (its rows replace
+    // the focused one, which would drop focus to the body).
+    #focusPending;
     back = signal(undefined, ...(ngDevMode ? [{ debugName: "back" }] : /* istanbul ignore next */ []));
     slideDirection = signal('none', ...(ngDevMode ? [{ debugName: "slideDirection" }] : /* istanbul ignore next */ []));
     #asyncOptions = rxResource({
@@ -8858,12 +8865,41 @@ class MenuComponent {
         }))
             .filter((group) => group.length > 0);
         const source = back
-            ? back.options ?? async ?? []
-            : async ?? config ?? [];
+            ? (back.options ?? async ?? [])
+            : (async ?? config ?? []);
         const result = filterGroups(source);
         return extra?.length && !back ? [...result, extra] : result;
     }, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     isLoading = computed(() => this.#asyncOptions.isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterRenderEffect(() => {
+            this.options();
+            if (this.isLoading())
+                return;
+            const pending = this.#focusPending ?? untracked(this.autoFocus);
+            this.#focusPending = false;
+            if (pending) {
+                this.#host.nativeElement
+                    .querySelector('.menu-item:not(.is-disabled)')
+                    ?.focus();
+            }
+        });
+    }
+    // ↑/↓ walk the focusable rows (back row included), wrapping; Enter on a
+    // row is its own `selectItem`.
+    moveFocus(event, step) {
+        const rows = Array.from(this.#host.nativeElement.querySelectorAll('.back-btn, .menu-item:not(.is-disabled)'));
+        if (!rows.length)
+            return;
+        event.preventDefault();
+        const current = rows.indexOf(document.activeElement);
+        const next = current < 0
+            ? step > 0
+                ? 0
+                : rows.length - 1
+            : (current + step + rows.length) % rows.length;
+        rows[next].focus();
+    }
     // --- Handlers ---
     selectItem(item) {
         const dRule = this.disableRule();
@@ -8875,12 +8911,14 @@ class MenuComponent {
             this.#treeMap.update((map) => ({ ...map, [item.id]: item }));
             this.#tree.update((t) => [...t, item.id]);
             this.back.set(item);
+            this.#focusPending = this.#hasFocus();
             return;
         }
         this.action.emit(item);
     }
     goBack() {
         this.slideDirection.set('backward');
+        this.#focusPending = this.#hasFocus();
         const currentTree = this.#tree();
         if (currentTree.length <= 1) {
             this.#tree.set([]);
@@ -8892,6 +8930,9 @@ class MenuComponent {
         const parentId = newTree[newTree.length - 1];
         this.back.set(this.#treeMap()[parentId]);
     }
+    #hasFocus() {
+        return this.#host.nativeElement.contains(document.activeElement);
+    }
     isSelected(item) {
         // A NavRef knows what it points at, so selection is an id comparison —
         // no path normalising, and it works for panels as well as pages.
@@ -8912,12 +8953,15 @@ class MenuComponent {
             (dRule && dRule(item.disableKey ?? item.id, this.extraData())));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuComponent, isStandalone: true, selector: "m-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, extra: { classPropertyName: "extra", publicName: "extra", isSignal: true, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null }, hideLink: { classPropertyName: "hideLink", publicName: "hideLink", isSignal: true, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", 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 } }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"menu-container\" [attr.data-slide]=\"slideDirection()\">\n  @if (back()) {\n    <div\n      class=\"back-btn\"\n      tabindex=\"0\"\n      role=\"button\"\n      (click)=\"goBack()\"\n      (keydown.enter)=\"goBack()\"\n      (keydown.space)=\"goBack()\"\n    >\n      <div class=\"back-icon\">\n        <m-icon [name]=\"'chevron-left'\" color=\"currentColor\" />\n      </div>\n      <span class=\"back-text\">{{ back()!.label | translate }}</span>\n    </div>\n  }\n\n  <div class=\"menu-content\">\n    @if (isLoading()) {\n      <div class=\"menu-loading\">\n        <div class=\"spinner\"></div>\n      </div>\n    } @else {\n      <div class=\"menu-groups\">\n        @for (group of options(); track $index; let last = $last) {\n          <div class=\"menu-group\" [class.has-separator]=\"!last\">\n            @for (item of group; track item.id) {\n              @if (!item.hidden) {\n                <div\n                  class=\"menu-item\"\n                  [attr.data-testid]=\"item.id + '-btn'\"\n                  [class.is-selected]=\"isSelected(item)\"\n                  [class.is-disabled]=\"isItemDisabled(item)\"\n                  [attr.aria-disabled]=\"isItemDisabled(item) || null\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"selectItem(item)\"\n                  (keydown.enter)=\"selectItem(item)\"\n                  (keydown.space)=\"selectItem(item)\"\n                >\n                  @if (item.icon) {\n                    <div class=\"item-icon\">\n                      <m-icon [name]=\"item.icon\" color=\"currentColor\" />\n                    </div>\n                  }\n                  <span class=\"item-text\">{{ item.label | translate }}</span>\n                  @if (item.options || item.file) {\n                    <div class=\"item-arrow\">\n                      <m-icon [name]=\"'chevron-right'\" color=\"currentColor\" />\n                    </div>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.menu-container{display:flex;flex-direction:column;width:100%;border-radius:0;background:var(--m-menu-background, var(--m-background));border:none;overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1)}.back-btn{height:calc(var(--input-size, .9375rem) * 2);min-height:calc(var(--input-size, .9375rem) * 2);border-width:max(1px,var(--input-size, .9375rem) * .0625);border-radius:calc(var(--input-size, .9375rem) * .4);padding:calc(var(--input-size, .9375rem) * .5) calc(var(--input-size, .9375rem) * .5);gap:calc(var(--input-size, .9375rem) * .375);font-size:var(--input-size, .9375rem);border-color:var(--m-text-secondary);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.back-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-text-secondary) 6%,transparent)}.back-btn:disabled{opacity:.6;cursor:not-allowed}.back-btn{height:auto;min-height:0;padding:calc(.9375rem * .625) calc(.9375rem * 1.25);gap:calc(.9375rem * .375);border-style:solid;display:inline-flex;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;padding:.5859375rem 1.171875rem;border-radius:0;border:none;border-bottom:1px solid var(--m-backdrop-border);color:var(--m-text-secondary);font-weight:400;text-align:left;width:100%;transition:filter .15s ease,background .15s ease,color .15s ease}.back-btn:hover{background:color-mix(in srgb,var(--m-text) 8%,transparent);color:var(--m-text)}.back-btn:active{transform:scale(.97)}.back-btn .back-icon{display:flex;align-items:center}.back-btn .back-text{font-size:.9rem;font-weight:500}.menu-content{position:relative;width:100%}.menu-groups{display:flex;flex-direction:column;padding:6px}.menu-group{display:flex;flex-direction:column;gap:2px}.menu-group.has-separator{border-bottom:1px solid var(--m-backdrop-border);margin-bottom:6px;padding-bottom:6px}.menu-item{height:calc(var(--input-size, var(--menu-item-size, .9375rem)) * 2);min-height:calc(var(--input-size, var(--menu-item-size, .9375rem)) * 2);border-width:max(1px,var(--input-size, var(--menu-item-size, .9375rem)) * .0625);border-radius:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .4);padding:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .5) calc(var(--input-size, var(--menu-item-size, .9375rem)) * .5);gap:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .375);font-size:var(--input-size, var(--menu-item-size, .9375rem));border-color:var(--m-text);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.menu-item:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-text) 6%,transparent)}.menu-item:disabled{opacity:.6;cursor:not-allowed}.menu-item{height:auto;min-height:0;padding:calc(var(--menu-item-size, .9375rem) * .625) calc(var(--menu-item-size, .9375rem) * 1.25);gap:calc(var(--menu-item-size, .9375rem) * .375);border-style:solid;display:inline-flex;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:0;border:none;color:var(--m-text);font-weight:400;text-align:left;width:100%;transition:filter .15s ease,background .15s ease,color .15s ease}.menu-item:hover:not(.is-disabled):not(.menu-item.is-selected){background:color-mix(in srgb,var(--m-text) 8%,transparent);color:var(--m-text)}.menu-item:active:not(.is-disabled){transform:scale(.97)}.menu-item.is-selected{background:var(--m-backdrop-mm);color:var(--m-mm);font-weight:600}.menu-item.is-selected .item-icon{color:var(--m-mm)}.menu-item.is-selected:hover{background:color-mix(in srgb,var(--m-backdrop-mm) 88%,black)}.menu-item.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none;filter:grayscale(75%)}.menu-item .item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--m-text-secondary)}.menu-item .item-text{flex:1;font-size:var(--menu-text-size, .9375rem)}.menu-item .item-arrow{display:flex;align-items:center;color:var(--m-text-quaternary)}.menu-container[data-size=sm]{--menu-item-size: .8125rem;--menu-item-padding: calc(.8125rem * .625) calc(.8125rem * 1.25);--menu-text-size: .8125rem;--menu-icon-size: 20px}.menu-container[data-size=md]{--menu-item-size: .9375rem;--menu-item-padding: calc(.9375rem * .625) calc(.9375rem * 1.25);--menu-text-size: .9375rem;--menu-icon-size: 24px}.menu-container[data-size=lg]{--menu-item-size: 1.0625rem;--menu-item-padding: calc(1.0625rem * .625) calc(1.0625rem * 1.25);--menu-text-size: 1rem;--menu-icon-size: 28px}.menu-item{padding:var(--menu-item-padding, 8px 12px)}.menu-item .item-icon{width:var(--menu-icon-size, 24px);height:var(--menu-icon-size, 24px)}.menu-loading{display:flex;align-items:center;justify-content:center;padding:24px}.menu-loading .spinner{width:20px;height:20px;border:2px solid var(--m-backdrop-border);border-top-color:var(--m-mm);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slide-forward{0%{opacity:0;transform:translate(15px)}to{opacity:1;transform:translate(0)}}@keyframes slide-backward{0%{opacity:0;transform:translate(-15px)}to{opacity:1;transform:translate(0)}}.menu-container[data-slide=forward] .menu-content{animation:slide-forward .4s cubic-bezier(.165,.84,.44,1)}.menu-container[data-slide=backward] .menu-content{animation:slide-backward .4s cubic-bezier(.165,.84,.44,1)}:host-context(.align-bottom) .menu-container{border:none;border-radius:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuComponent, isStandalone: true, selector: "m-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, extra: { classPropertyName: "extra", publicName: "extra", isSignal: true, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null }, hideLink: { classPropertyName: "hideLink", publicName: "hideLink", isSignal: true, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", 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 } }, outputs: { action: "action" }, host: { listeners: { "keydown.arrowdown": "moveFocus($event, 1)", "keydown.arrowup": "moveFocus($event, -1)" } }, ngImport: i0, template: "<div class=\"menu-container\" [attr.data-slide]=\"slideDirection()\">\n  @if (back()) {\n    <div\n      class=\"back-btn\"\n      tabindex=\"0\"\n      role=\"button\"\n      (click)=\"goBack()\"\n      (keydown.enter)=\"goBack()\"\n      (keydown.space)=\"goBack()\"\n    >\n      <div class=\"back-icon\">\n        <m-icon [name]=\"'chevron-left'\" color=\"currentColor\" />\n      </div>\n      <span class=\"back-text\">{{ back()!.label | translate }}</span>\n    </div>\n  }\n\n  <div class=\"menu-content\">\n    @if (isLoading()) {\n      <div class=\"menu-loading\">\n        <div class=\"spinner\"></div>\n      </div>\n    } @else {\n      <div class=\"menu-groups\">\n        @for (group of options(); track $index; let last = $last) {\n          <div class=\"menu-group\" [class.has-separator]=\"!last\">\n            @for (item of group; track item.id) {\n              @if (!item.hidden) {\n                <div\n                  class=\"menu-item\"\n                  [attr.data-testid]=\"item.id + '-btn'\"\n                  [class.is-selected]=\"isSelected(item)\"\n                  [class.is-disabled]=\"isItemDisabled(item)\"\n                  [attr.aria-disabled]=\"isItemDisabled(item) || null\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"selectItem(item)\"\n                  (keydown.enter)=\"selectItem(item)\"\n                  (keydown.space)=\"selectItem(item)\"\n                >\n                  @if (item.icon) {\n                    <div class=\"item-icon\">\n                      <m-icon [name]=\"item.icon\" color=\"currentColor\" />\n                    </div>\n                  }\n                  <span class=\"item-text\">{{ item.label | translate }}</span>\n                  @if (item.options || item.file) {\n                    <div class=\"item-arrow\">\n                      <m-icon [name]=\"'chevron-right'\" color=\"currentColor\" />\n                    </div>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.menu-container{display:flex;flex-direction:column;width:100%;border-radius:0;background:var(--m-menu-background, var(--m-background));border:none;overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1)}.back-btn{height:calc(var(--input-size, .9375rem) * 2);min-height:calc(var(--input-size, .9375rem) * 2);border-width:max(1px,var(--input-size, .9375rem) * .0625);border-radius:calc(var(--input-size, .9375rem) * .4);padding:calc(var(--input-size, .9375rem) * .5) calc(var(--input-size, .9375rem) * .5);gap:calc(var(--input-size, .9375rem) * .375);font-size:var(--input-size, .9375rem);border-color:var(--m-text-secondary);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.back-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-text-secondary) 6%,transparent)}.back-btn:disabled{opacity:.6;cursor:not-allowed}.back-btn{height:auto;min-height:0;padding:calc(.9375rem * .625) calc(.9375rem * 1.25);gap:calc(.9375rem * .375);border-style:solid;display:inline-flex;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;padding:.5859375rem 1.171875rem;border-radius:0;border:none;border-bottom:1px solid var(--m-backdrop-border);color:var(--m-text-secondary);font-weight:400;text-align:left;width:100%;transition:filter .15s ease,background .15s ease,color .15s ease}.back-btn:hover,.back-btn:focus-visible{outline:none;background:color-mix(in srgb,var(--m-text) 8%,transparent);color:var(--m-text)}.back-btn:active{transform:scale(.97)}.back-btn .back-icon{display:flex;align-items:center}.back-btn .back-text{font-size:.9rem;font-weight:500}.menu-content{position:relative;width:100%}.menu-groups{display:flex;flex-direction:column;padding:6px}.menu-group{display:flex;flex-direction:column;gap:2px}.menu-group.has-separator{border-bottom:1px solid var(--m-backdrop-border);margin-bottom:6px;padding-bottom:6px}.menu-item{height:calc(var(--input-size, var(--menu-item-size, .9375rem)) * 2);min-height:calc(var(--input-size, var(--menu-item-size, .9375rem)) * 2);border-width:max(1px,var(--input-size, var(--menu-item-size, .9375rem)) * .0625);border-radius:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .4);padding:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .5) calc(var(--input-size, var(--menu-item-size, .9375rem)) * .5);gap:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .375);font-size:var(--input-size, var(--menu-item-size, .9375rem));border-color:var(--m-text);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.menu-item:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-text) 6%,transparent)}.menu-item:disabled{opacity:.6;cursor:not-allowed}.menu-item{height:auto;min-height:0;padding:calc(var(--menu-item-size, .9375rem) * .625) calc(var(--menu-item-size, .9375rem) * 1.25);gap:calc(var(--menu-item-size, .9375rem) * .375);border-style:solid;display:inline-flex;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:0;border:none;color:var(--m-text);font-weight:400;text-align:left;width:100%;transition:filter .15s ease,background .15s ease,color .15s ease}.menu-item:focus-visible{outline:none}.menu-item:hover:not(.is-disabled):not(.menu-item.is-selected),.menu-item:focus-visible:not(.is-selected){background:color-mix(in srgb,var(--m-text) 8%,transparent);color:var(--m-text)}.menu-item:active:not(.is-disabled){transform:scale(.97)}.menu-item.is-selected{background:var(--m-backdrop-mm);color:var(--m-mm);font-weight:600}.menu-item.is-selected .item-icon{color:var(--m-mm)}.menu-item.is-selected:hover,.menu-item.is-selected:focus-visible{background:color-mix(in srgb,var(--m-backdrop-mm) 88%,black)}.menu-item.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none;filter:grayscale(75%)}.menu-item .item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--m-text-secondary)}.menu-item .item-text{flex:1;font-size:var(--menu-text-size, .9375rem)}.menu-item .item-arrow{display:flex;align-items:center;color:var(--m-text-quaternary)}.menu-container[data-size=sm]{--menu-item-size: .8125rem;--menu-item-padding: calc(.8125rem * .625) calc(.8125rem * 1.25);--menu-text-size: .8125rem;--menu-icon-size: 20px}.menu-container[data-size=md]{--menu-item-size: .9375rem;--menu-item-padding: calc(.9375rem * .625) calc(.9375rem * 1.25);--menu-text-size: .9375rem;--menu-icon-size: 24px}.menu-container[data-size=lg]{--menu-item-size: 1.0625rem;--menu-item-padding: calc(1.0625rem * .625) calc(1.0625rem * 1.25);--menu-text-size: 1rem;--menu-icon-size: 28px}.menu-item{padding:var(--menu-item-padding, 8px 12px)}.menu-item .item-icon{width:var(--menu-icon-size, 24px);height:var(--menu-icon-size, 24px)}.menu-loading{display:flex;align-items:center;justify-content:center;padding:24px}.menu-loading .spinner{width:20px;height:20px;border:2px solid var(--m-backdrop-border);border-top-color:var(--m-mm);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slide-forward{0%{opacity:0;transform:translate(15px)}to{opacity:1;transform:translate(0)}}@keyframes slide-backward{0%{opacity:0;transform:translate(-15px)}to{opacity:1;transform:translate(0)}}.menu-container[data-slide=forward] .menu-content{animation:slide-forward .4s cubic-bezier(.165,.84,.44,1)}.menu-container[data-slide=backward] .menu-content{animation:slide-backward .4s cubic-bezier(.165,.84,.44,1)}:host-context(.align-bottom) .menu-container{border:none;border-radius:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'm-menu', imports: [TranslatePipe, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu-container\" [attr.data-slide]=\"slideDirection()\">\n  @if (back()) {\n    <div\n      class=\"back-btn\"\n      tabindex=\"0\"\n      role=\"button\"\n      (click)=\"goBack()\"\n      (keydown.enter)=\"goBack()\"\n      (keydown.space)=\"goBack()\"\n    >\n      <div class=\"back-icon\">\n        <m-icon [name]=\"'chevron-left'\" color=\"currentColor\" />\n      </div>\n      <span class=\"back-text\">{{ back()!.label | translate }}</span>\n    </div>\n  }\n\n  <div class=\"menu-content\">\n    @if (isLoading()) {\n      <div class=\"menu-loading\">\n        <div class=\"spinner\"></div>\n      </div>\n    } @else {\n      <div class=\"menu-groups\">\n        @for (group of options(); track $index; let last = $last) {\n          <div class=\"menu-group\" [class.has-separator]=\"!last\">\n            @for (item of group; track item.id) {\n              @if (!item.hidden) {\n                <div\n                  class=\"menu-item\"\n                  [attr.data-testid]=\"item.id + '-btn'\"\n                  [class.is-selected]=\"isSelected(item)\"\n                  [class.is-disabled]=\"isItemDisabled(item)\"\n                  [attr.aria-disabled]=\"isItemDisabled(item) || null\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"selectItem(item)\"\n                  (keydown.enter)=\"selectItem(item)\"\n                  (keydown.space)=\"selectItem(item)\"\n                >\n                  @if (item.icon) {\n                    <div class=\"item-icon\">\n                      <m-icon [name]=\"item.icon\" color=\"currentColor\" />\n                    </div>\n                  }\n                  <span class=\"item-text\">{{ item.label | translate }}</span>\n                  @if (item.options || item.file) {\n                    <div class=\"item-arrow\">\n                      <m-icon [name]=\"'chevron-right'\" color=\"currentColor\" />\n                    </div>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.menu-container{display:flex;flex-direction:column;width:100%;border-radius:0;background:var(--m-menu-background, var(--m-background));border:none;overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1)}.back-btn{height:calc(var(--input-size, .9375rem) * 2);min-height:calc(var(--input-size, .9375rem) * 2);border-width:max(1px,var(--input-size, .9375rem) * .0625);border-radius:calc(var(--input-size, .9375rem) * .4);padding:calc(var(--input-size, .9375rem) * .5) calc(var(--input-size, .9375rem) * .5);gap:calc(var(--input-size, .9375rem) * .375);font-size:var(--input-size, .9375rem);border-color:var(--m-text-secondary);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.back-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-text-secondary) 6%,transparent)}.back-btn:disabled{opacity:.6;cursor:not-allowed}.back-btn{height:auto;min-height:0;padding:calc(.9375rem * .625) calc(.9375rem * 1.25);gap:calc(.9375rem * .375);border-style:solid;display:inline-flex;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;padding:.5859375rem 1.171875rem;border-radius:0;border:none;border-bottom:1px solid var(--m-backdrop-border);color:var(--m-text-secondary);font-weight:400;text-align:left;width:100%;transition:filter .15s ease,background .15s ease,color .15s ease}.back-btn:hover{background:color-mix(in srgb,var(--m-text) 8%,transparent);color:var(--m-text)}.back-btn:active{transform:scale(.97)}.back-btn .back-icon{display:flex;align-items:center}.back-btn .back-text{font-size:.9rem;font-weight:500}.menu-content{position:relative;width:100%}.menu-groups{display:flex;flex-direction:column;padding:6px}.menu-group{display:flex;flex-direction:column;gap:2px}.menu-group.has-separator{border-bottom:1px solid var(--m-backdrop-border);margin-bottom:6px;padding-bottom:6px}.menu-item{height:calc(var(--input-size, var(--menu-item-size, .9375rem)) * 2);min-height:calc(var(--input-size, var(--menu-item-size, .9375rem)) * 2);border-width:max(1px,var(--input-size, var(--menu-item-size, .9375rem)) * .0625);border-radius:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .4);padding:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .5) calc(var(--input-size, var(--menu-item-size, .9375rem)) * .5);gap:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .375);font-size:var(--input-size, var(--menu-item-size, .9375rem));border-color:var(--m-text);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.menu-item:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-text) 6%,transparent)}.menu-item:disabled{opacity:.6;cursor:not-allowed}.menu-item{height:auto;min-height:0;padding:calc(var(--menu-item-size, .9375rem) * .625) calc(var(--menu-item-size, .9375rem) * 1.25);gap:calc(var(--menu-item-size, .9375rem) * .375);border-style:solid;display:inline-flex;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:0;border:none;color:var(--m-text);font-weight:400;text-align:left;width:100%;transition:filter .15s ease,background .15s ease,color .15s ease}.menu-item:hover:not(.is-disabled):not(.menu-item.is-selected){background:color-mix(in srgb,var(--m-text) 8%,transparent);color:var(--m-text)}.menu-item:active:not(.is-disabled){transform:scale(.97)}.menu-item.is-selected{background:var(--m-backdrop-mm);color:var(--m-mm);font-weight:600}.menu-item.is-selected .item-icon{color:var(--m-mm)}.menu-item.is-selected:hover{background:color-mix(in srgb,var(--m-backdrop-mm) 88%,black)}.menu-item.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none;filter:grayscale(75%)}.menu-item .item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--m-text-secondary)}.menu-item .item-text{flex:1;font-size:var(--menu-text-size, .9375rem)}.menu-item .item-arrow{display:flex;align-items:center;color:var(--m-text-quaternary)}.menu-container[data-size=sm]{--menu-item-size: .8125rem;--menu-item-padding: calc(.8125rem * .625) calc(.8125rem * 1.25);--menu-text-size: .8125rem;--menu-icon-size: 20px}.menu-container[data-size=md]{--menu-item-size: .9375rem;--menu-item-padding: calc(.9375rem * .625) calc(.9375rem * 1.25);--menu-text-size: .9375rem;--menu-icon-size: 24px}.menu-container[data-size=lg]{--menu-item-size: 1.0625rem;--menu-item-padding: calc(1.0625rem * .625) calc(1.0625rem * 1.25);--menu-text-size: 1rem;--menu-icon-size: 28px}.menu-item{padding:var(--menu-item-padding, 8px 12px)}.menu-item .item-icon{width:var(--menu-icon-size, 24px);height:var(--menu-icon-size, 24px)}.menu-loading{display:flex;align-items:center;justify-content:center;padding:24px}.menu-loading .spinner{width:20px;height:20px;border:2px solid var(--m-backdrop-border);border-top-color:var(--m-mm);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slide-forward{0%{opacity:0;transform:translate(15px)}to{opacity:1;transform:translate(0)}}@keyframes slide-backward{0%{opacity:0;transform:translate(-15px)}to{opacity:1;transform:translate(0)}}.menu-container[data-slide=forward] .menu-content{animation:slide-forward .4s cubic-bezier(.165,.84,.44,1)}.menu-container[data-slide=backward] .menu-content{animation:slide-backward .4s cubic-bezier(.165,.84,.44,1)}:host-context(.align-bottom) .menu-container{border:none;border-radius:0}\n"] }]
-        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: false }] }], root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], extra: [{ type: i0.Input, args: [{ isSignal: true, alias: "extra", required: false }] }], hide: [{ type: i0.Input, args: [{ isSignal: true, alias: "hide", required: false }] }], hideLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLink", required: false }] }], isAdmin: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAdmin", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], 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 }] }] } });
+            args: [{ selector: 'm-menu', imports: [TranslatePipe, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(keydown.arrowdown)': 'moveFocus($event, 1)',
+                        '(keydown.arrowup)': 'moveFocus($event, -1)',
+                    }, template: "<div class=\"menu-container\" [attr.data-slide]=\"slideDirection()\">\n  @if (back()) {\n    <div\n      class=\"back-btn\"\n      tabindex=\"0\"\n      role=\"button\"\n      (click)=\"goBack()\"\n      (keydown.enter)=\"goBack()\"\n      (keydown.space)=\"goBack()\"\n    >\n      <div class=\"back-icon\">\n        <m-icon [name]=\"'chevron-left'\" color=\"currentColor\" />\n      </div>\n      <span class=\"back-text\">{{ back()!.label | translate }}</span>\n    </div>\n  }\n\n  <div class=\"menu-content\">\n    @if (isLoading()) {\n      <div class=\"menu-loading\">\n        <div class=\"spinner\"></div>\n      </div>\n    } @else {\n      <div class=\"menu-groups\">\n        @for (group of options(); track $index; let last = $last) {\n          <div class=\"menu-group\" [class.has-separator]=\"!last\">\n            @for (item of group; track item.id) {\n              @if (!item.hidden) {\n                <div\n                  class=\"menu-item\"\n                  [attr.data-testid]=\"item.id + '-btn'\"\n                  [class.is-selected]=\"isSelected(item)\"\n                  [class.is-disabled]=\"isItemDisabled(item)\"\n                  [attr.aria-disabled]=\"isItemDisabled(item) || null\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"selectItem(item)\"\n                  (keydown.enter)=\"selectItem(item)\"\n                  (keydown.space)=\"selectItem(item)\"\n                >\n                  @if (item.icon) {\n                    <div class=\"item-icon\">\n                      <m-icon [name]=\"item.icon\" color=\"currentColor\" />\n                    </div>\n                  }\n                  <span class=\"item-text\">{{ item.label | translate }}</span>\n                  @if (item.options || item.file) {\n                    <div class=\"item-arrow\">\n                      <m-icon [name]=\"'chevron-right'\" color=\"currentColor\" />\n                    </div>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.menu-container{display:flex;flex-direction:column;width:100%;border-radius:0;background:var(--m-menu-background, var(--m-background));border:none;overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1)}.back-btn{height:calc(var(--input-size, .9375rem) * 2);min-height:calc(var(--input-size, .9375rem) * 2);border-width:max(1px,var(--input-size, .9375rem) * .0625);border-radius:calc(var(--input-size, .9375rem) * .4);padding:calc(var(--input-size, .9375rem) * .5) calc(var(--input-size, .9375rem) * .5);gap:calc(var(--input-size, .9375rem) * .375);font-size:var(--input-size, .9375rem);border-color:var(--m-text-secondary);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.back-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-text-secondary) 6%,transparent)}.back-btn:disabled{opacity:.6;cursor:not-allowed}.back-btn{height:auto;min-height:0;padding:calc(.9375rem * .625) calc(.9375rem * 1.25);gap:calc(.9375rem * .375);border-style:solid;display:inline-flex;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;padding:.5859375rem 1.171875rem;border-radius:0;border:none;border-bottom:1px solid var(--m-backdrop-border);color:var(--m-text-secondary);font-weight:400;text-align:left;width:100%;transition:filter .15s ease,background .15s ease,color .15s ease}.back-btn:hover,.back-btn:focus-visible{outline:none;background:color-mix(in srgb,var(--m-text) 8%,transparent);color:var(--m-text)}.back-btn:active{transform:scale(.97)}.back-btn .back-icon{display:flex;align-items:center}.back-btn .back-text{font-size:.9rem;font-weight:500}.menu-content{position:relative;width:100%}.menu-groups{display:flex;flex-direction:column;padding:6px}.menu-group{display:flex;flex-direction:column;gap:2px}.menu-group.has-separator{border-bottom:1px solid var(--m-backdrop-border);margin-bottom:6px;padding-bottom:6px}.menu-item{height:calc(var(--input-size, var(--menu-item-size, .9375rem)) * 2);min-height:calc(var(--input-size, var(--menu-item-size, .9375rem)) * 2);border-width:max(1px,var(--input-size, var(--menu-item-size, .9375rem)) * .0625);border-radius:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .4);padding:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .5) calc(var(--input-size, var(--menu-item-size, .9375rem)) * .5);gap:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .375);font-size:var(--input-size, var(--menu-item-size, .9375rem));border-color:var(--m-text);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.menu-item:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-text) 6%,transparent)}.menu-item:disabled{opacity:.6;cursor:not-allowed}.menu-item{height:auto;min-height:0;padding:calc(var(--menu-item-size, .9375rem) * .625) calc(var(--menu-item-size, .9375rem) * 1.25);gap:calc(var(--menu-item-size, .9375rem) * .375);border-style:solid;display:inline-flex;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:0;border:none;color:var(--m-text);font-weight:400;text-align:left;width:100%;transition:filter .15s ease,background .15s ease,color .15s ease}.menu-item:focus-visible{outline:none}.menu-item:hover:not(.is-disabled):not(.menu-item.is-selected),.menu-item:focus-visible:not(.is-selected){background:color-mix(in srgb,var(--m-text) 8%,transparent);color:var(--m-text)}.menu-item:active:not(.is-disabled){transform:scale(.97)}.menu-item.is-selected{background:var(--m-backdrop-mm);color:var(--m-mm);font-weight:600}.menu-item.is-selected .item-icon{color:var(--m-mm)}.menu-item.is-selected:hover,.menu-item.is-selected:focus-visible{background:color-mix(in srgb,var(--m-backdrop-mm) 88%,black)}.menu-item.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none;filter:grayscale(75%)}.menu-item .item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--m-text-secondary)}.menu-item .item-text{flex:1;font-size:var(--menu-text-size, .9375rem)}.menu-item .item-arrow{display:flex;align-items:center;color:var(--m-text-quaternary)}.menu-container[data-size=sm]{--menu-item-size: .8125rem;--menu-item-padding: calc(.8125rem * .625) calc(.8125rem * 1.25);--menu-text-size: .8125rem;--menu-icon-size: 20px}.menu-container[data-size=md]{--menu-item-size: .9375rem;--menu-item-padding: calc(.9375rem * .625) calc(.9375rem * 1.25);--menu-text-size: .9375rem;--menu-icon-size: 24px}.menu-container[data-size=lg]{--menu-item-size: 1.0625rem;--menu-item-padding: calc(1.0625rem * .625) calc(1.0625rem * 1.25);--menu-text-size: 1rem;--menu-icon-size: 28px}.menu-item{padding:var(--menu-item-padding, 8px 12px)}.menu-item .item-icon{width:var(--menu-icon-size, 24px);height:var(--menu-icon-size, 24px)}.menu-loading{display:flex;align-items:center;justify-content:center;padding:24px}.menu-loading .spinner{width:20px;height:20px;border:2px solid var(--m-backdrop-border);border-top-color:var(--m-mm);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slide-forward{0%{opacity:0;transform:translate(15px)}to{opacity:1;transform:translate(0)}}@keyframes slide-backward{0%{opacity:0;transform:translate(-15px)}to{opacity:1;transform:translate(0)}}.menu-container[data-slide=forward] .menu-content{animation:slide-forward .4s cubic-bezier(.165,.84,.44,1)}.menu-container[data-slide=backward] .menu-content{animation:slide-backward .4s cubic-bezier(.165,.84,.44,1)}:host-context(.align-bottom) .menu-container{border:none;border-radius:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: false }] }], root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], extra: [{ type: i0.Input, args: [{ isSignal: true, alias: "extra", required: false }] }], hide: [{ type: i0.Input, args: [{ isSignal: true, alias: "hide", required: false }] }], hideLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLink", required: false }] }], isAdmin: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAdmin", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], 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 }] }] } });
 
 class ContextMenuBoxComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -8934,11 +8978,11 @@ class ContextMenuBoxComponent {
         this.action.emit(item);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContextMenuBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContextMenuBoxComponent, isStandalone: true, selector: "m-context-menu-box", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", 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 } }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"m-context-menu-box\" [style.width]=\"width()\" [style.max-height]=\"height()\">\n  <m-menu\n    [config]=\"options()\"\n    [hide]=\"hide()\"\n    [file]=\"file()\"\n    [isAdmin]=\"isAdmin()\"\n    [visibilityRule]=\"visibilityRule()\"\n    [disableRule]=\"disableRule()\"\n    [extraData]=\"extraData()\"\n    (action)=\"emitAction($event)\"\n  />\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-context-menu-box{overflow-y:auto;padding:.375rem;border-radius:var(--m-input-radius, .5rem);border:var(--m-input-border-width, 1px) solid color-mix(in srgb,var(--m-text) 18%,var(--m-background));background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:context-menu-in .2s ease-out}@keyframes context-menu-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom){display:block;width:100%!important;max-width:100%!important}:host-context(.align-bottom) .m-context-menu-box{width:100%!important;max-width:100%!important;max-height:70vh!important;border-left:none;border-right:none;border-bottom:none}\n"], dependencies: [{ 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContextMenuBoxComponent, isStandalone: true, selector: "m-context-menu-box", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", 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 } }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"m-context-menu-box\" [style.width]=\"width()\" [style.max-height]=\"height()\">\n  <m-menu\n    [config]=\"options()\"\n    [hide]=\"hide()\"\n    [file]=\"file()\"\n    [isAdmin]=\"isAdmin()\"\n    [autoFocus]=\"true\"\n    [visibilityRule]=\"visibilityRule()\"\n    [disableRule]=\"disableRule()\"\n    [extraData]=\"extraData()\"\n    (action)=\"emitAction($event)\"\n  />\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-context-menu-box{overflow-y:auto;padding:.375rem;border-radius:var(--m-input-radius, .5rem);border:var(--m-input-border-width, 1px) solid color-mix(in srgb,var(--m-text) 18%,var(--m-background));background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:context-menu-in .2s ease-out}@keyframes context-menu-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom){display:block;width:100%!important;max-width:100%!important}:host-context(.align-bottom) .m-context-menu-box{width:100%!important;max-width:100%!important;max-height:70vh!important;border-left:none;border-right:none;border-bottom:none}\n"], dependencies: [{ kind: "component", type: MenuComponent, selector: "m-menu", inputs: ["config", "file", "root", "url", "extra", "hide", "hideLink", "isAdmin", "autoFocus", "visibilityRule", "disableRule", "extraData"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContextMenuBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'm-context-menu-box', imports: [MenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"m-context-menu-box\" [style.width]=\"width()\" [style.max-height]=\"height()\">\n  <m-menu\n    [config]=\"options()\"\n    [hide]=\"hide()\"\n    [file]=\"file()\"\n    [isAdmin]=\"isAdmin()\"\n    [visibilityRule]=\"visibilityRule()\"\n    [disableRule]=\"disableRule()\"\n    [extraData]=\"extraData()\"\n    (action)=\"emitAction($event)\"\n  />\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-context-menu-box{overflow-y:auto;padding:.375rem;border-radius:var(--m-input-radius, .5rem);border:var(--m-input-border-width, 1px) solid color-mix(in srgb,var(--m-text) 18%,var(--m-background));background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:context-menu-in .2s ease-out}@keyframes context-menu-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom){display:block;width:100%!important;max-width:100%!important}:host-context(.align-bottom) .m-context-menu-box{width:100%!important;max-width:100%!important;max-height:70vh!important;border-left:none;border-right:none;border-bottom:none}\n"] }]
+            args: [{ selector: 'm-context-menu-box', imports: [MenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"m-context-menu-box\" [style.width]=\"width()\" [style.max-height]=\"height()\">\n  <m-menu\n    [config]=\"options()\"\n    [hide]=\"hide()\"\n    [file]=\"file()\"\n    [isAdmin]=\"isAdmin()\"\n    [autoFocus]=\"true\"\n    [visibilityRule]=\"visibilityRule()\"\n    [disableRule]=\"disableRule()\"\n    [extraData]=\"extraData()\"\n    (action)=\"emitAction($event)\"\n  />\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-context-menu-box{overflow-y:auto;padding:.375rem;border-radius:var(--m-input-radius, .5rem);border:var(--m-input-border-width, 1px) solid color-mix(in srgb,var(--m-text) 18%,var(--m-background));background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:context-menu-in .2s ease-out}@keyframes context-menu-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom){display:block;width:100%!important;max-width:100%!important}:host-context(.align-bottom) .m-context-menu-box{width:100%!important;max-width:100%!important;max-height:70vh!important;border-left:none;border-right:none;border-bottom:none}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], hide: [{ type: i0.Input, args: [{ isSignal: true, alias: "hide", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], isAdmin: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAdmin", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], 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 }] }] } });
 
 class ContextMenuComponent extends ConfigComponent {
@@ -14577,6 +14621,21 @@ function linkToId(link) {
     return navToId(linkToNav(link));
 }
 
+/**
+ * The api refusing work for a User Role the User lacks answers 406 with a
+ * `permission` hint naming the reason (api ADR 0005) — never 403, which this
+ * client reads as an expired token. Answers that reason, or `undefined` for
+ * any other error, so a caller can branch on it and the interceptor can leave
+ * it to the caller rather than toasting it.
+ */
+const permissionRefusal = (error) => {
+    const { status, error: body } = (error ?? {});
+    const hint = body?.hint;
+    return status === 406 && hint?.type === 'permission'
+        ? hint.which ?? ''
+        : undefined;
+};
+
 const JUMBOTRON_ANIMATION_CLASSES = new Set([
     'gradient',
     'particles',
@@ -16790,6 +16849,9 @@ const AuthStore = signalStore({ providedIn: 'root' }, withState(initialState$2),
 }), withComputed(({ identities, identity, otp, otpCounter, registerNewUser, resetPassword, showTerms, user, }) => ({
     userId: computed(() => user()?.id),
     isLoggedIn: computed(() => user()?.id !== undefined),
+    // A GlobalRule (m-one-ui GlobalRuleCatalog): hides or disables what
+    // only an `app-author` may do. The api still refuses on its own.
+    isAppAuthor: computed(() => (user()?.roles ?? []).includes('app-author')),
     variant: computed(() => ({
         create_new_user: registerNewUser() !== undefined,
         identity_exiest: identity() !== undefined,
@@ -16823,6 +16885,9 @@ const AuthStore = signalStore({ providedIn: 'root' }, withState(initialState$2),
 // `undefined`, and an id nobody supplied is never the signed-in User.
 withMethods((store) => ({
     isCurrentUser: (id) => id !== undefined && id !== '' && store.userId() === id,
+    // A GlobalRule (m-one-ui GlobalRuleCatalog): the gate a call site draws in
+    // front of what only one role may do. The api still refuses on its own.
+    hasRole: (role) => !!role && (store.user()?.roles ?? []).some((held) => held === role),
 })), withMethods((store, api = inject(AuthApiService), storage = inject(StorageService), modalStore = inject(ModalStore)) => {
     const closeAfterAuthentication = () => {
         if (store.userId() && store.tokens()) {
@@ -16876,6 +16941,7 @@ withMethods((store) => ({
                         username: data.user.username ?? data.user.id,
                         lang: data.user.lang,
                         dob: data.user.dob,
+                        roles: data.user.roles,
                     },
             });
         },
@@ -17345,6 +17411,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * A User Role refusal (api ADR 0005) is always answered with a dialog. Either
+ * the call site drew its own — a CallOutcome `denied` arm's DenialDialog, which
+ * claims the error inside its store's `catchError` — or nobody did, and the
+ * library's default opens once the error has finished travelling.
+ */
+const claimed = new WeakSet();
+const DEFAULT_DENIAL = {
+    header: 'permission-denied',
+    body: 'permission-denied-body',
+};
+/**
+ * Answers the refused reason of a permission refusal and marks it answered, so
+ * the default dialog stays shut; `undefined` for any other error, untouched.
+ */
+const claimDenial = (error) => {
+    const reason = permissionRefusal(error);
+    if (reason !== undefined && typeof error === 'object' && error !== null)
+        claimed.add(error);
+    return reason;
+};
+/**
+ * The interceptor's half: sees every refusal first, and waits one microtask —
+ * the error reaches the caller's `catchError` synchronously — before opening
+ * the default for one nobody claimed.
+ */
+function injectDefaultDenial() {
+    const modal = inject(ModalStore);
+    return (error) => {
+        const reason = permissionRefusal(error);
+        if (reason === undefined)
+            return;
+        queueMicrotask(() => {
+            if (typeof error === 'object' && error !== null && claimed.has(error))
+                return;
+            modal
+                .ask({
+                header: DEFAULT_DENIAL.header,
+                body: DEFAULT_DENIAL.body,
+                kind: 'yes',
+                type: 'warning',
+                params: { role: reason },
+            })
+                .subscribe();
+        });
+    };
+}
+
 class NotificationService {
     store = inject(NotificationStore);
     autoCloseDelay = 5000;
@@ -17464,6 +17578,7 @@ const mInterceptor = (request, next) => {
     const isRefreshCall = request.url === httpService.buildUrl('auth', ['refresh']);
     const actions = SharedStoreRegistry.getLoadingActions() ?? loadingActions;
     const notificationService = inject(NotificationService);
+    const defaultDenial = injectDefaultDenial();
     /**
      * Counts one request in flight and reports its failure. Applied at the point
      * a request is actually sent rather than at the point the interceptor is
@@ -17479,7 +17594,10 @@ const mInterceptor = (request, next) => {
         return source.pipe(tap({
             error: (e) => {
                 actions.setError();
-                if (e.status !== 403)
+                // A User Role refusal is a dialog, never a toast (api ADR 0005).
+                if (permissionRefusal(e) !== undefined)
+                    defaultDenial(e);
+                else if (e.status !== 403)
                     notificationService.notifyHttpError(e.status, e.error, e.message);
             },
         }), finalize(() => actions.stopLoading()));
@@ -17562,7 +17680,9 @@ const mInterceptor = (request, next) => {
     // reported by the outer pipe this branch no longer has.
     authFailed$.pipe(take(1), switchMap$1((err) => {
         actions.setError();
-        if (err.status !== 403)
+        if (permissionRefusal(err) !== undefined)
+            defaultDenial(err);
+        else if (err.status !== 403)
             notificationService.notifyHttpError(err.status, err.error, err.message);
         return throwError(() => err);
     })));
@@ -19599,7 +19719,19 @@ class DropdownBoxComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     selected = input('', ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    activeIndex = input(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     action = output();
+    host = inject(ElementRef);
+    // Keep the keyboard-active option in view as ↑/↓ walk a scrolled list.
+    constructor() {
+        effect(() => {
+            const index = this.activeIndex();
+            if (index < 0)
+                return;
+            this.host.nativeElement
+                .querySelectorAll('.dropdown-box__option')[index]?.scrollIntoView?.({ block: 'nearest' });
+        });
+    }
     isSelected = (value) => {
         const sel = this.selected();
         if (Array.isArray(sel)) {
@@ -19614,14 +19746,15 @@ class DropdownBoxComponent {
         this.action.emit(option);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DropdownBoxComponent, isStandalone: true, selector: "m-dropdown-box", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DropdownBoxComponent, isStandalone: true, selector: "m-dropdown-box", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
     <ul class="dropdown-box" role="listbox">
-      @for (option of options(); track option.value) {
+      @for (option of options(); track option.value; let i = $index) {
         @let selectedState = isSelected(option.value);
         <li
           class="dropdown-box__option"
           [class.dropdown-box__option--selected]="selectedState"
           [class.dropdown-box__option--disabled]="option.disabled"
+          [class.dropdown-box__option--active]="i === activeIndex()"
           role="option"
           [attr.aria-selected]="selectedState"
           [attr.data-value]="option.value"
@@ -19651,18 +19784,19 @@ class DropdownBoxComponent {
         </li>
       }
     </ul>
-  `, 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)}}.dropdown-box{overflow-y:auto;max-height:15rem;margin:0;padding:.375rem;list-style:none;border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:dropdown-in .2s ease-out}.dropdown-box__checkbox{flex-shrink:0;width:14px;height:14px;margin-right:8px;pointer-events:none;accent-color:var(--m-mm);cursor:pointer}.dropdown-box__option{display:flex;align-items:center;padding:.625rem .75rem;border-radius:.375rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:background .15s ease}.dropdown-box__option:hover{background:color-mix(in srgb,var(--m-focus) 8%,transparent)}.dropdown-box__option--selected{font-weight:600;color:var(--m-mm)}.dropdown-box__option--disabled{opacity:.4;pointer-events:none}.dropdown-box__empty{padding:.75rem;text-align:center;color:var(--m-text-tertiary);font-size:.875rem}@keyframes dropdown-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host(.open-upward) .dropdown-box{animation:dropdown-in-up .2s ease-out}@keyframes dropdown-in-up{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom) .dropdown-box{max-height:70vh;border:none;border-radius:0;background:transparent;box-shadow:none;animation:none}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.dropdown-box{overflow-y:auto;max-height:15rem;margin:0;padding:.375rem;list-style:none;border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:dropdown-in .2s ease-out}.dropdown-box__checkbox{flex-shrink:0;width:14px;height:14px;margin-right:8px;pointer-events:none;accent-color:var(--m-mm);cursor:pointer}.dropdown-box__option{display:flex;align-items:center;padding:.625rem .75rem;border-radius:.375rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:background .15s ease}.dropdown-box__option:hover,.dropdown-box__option--active{background:color-mix(in srgb,var(--m-focus) 8%,transparent)}.dropdown-box__option--selected{font-weight:600;color:var(--m-mm)}.dropdown-box__option--disabled{opacity:.4;pointer-events:none}.dropdown-box__empty{padding:.75rem;text-align:center;color:var(--m-text-tertiary);font-size:.875rem}@keyframes dropdown-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host(.open-upward) .dropdown-box{animation:dropdown-in-up .2s ease-out}@keyframes dropdown-in-up{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom) .dropdown-box{max-height:70vh;border:none;border-radius:0;background:transparent;box-shadow:none;animation:none}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'm-dropdown-box', imports: [TranslatePipe], template: `
     <ul class="dropdown-box" role="listbox">
-      @for (option of options(); track option.value) {
+      @for (option of options(); track option.value; let i = $index) {
         @let selectedState = isSelected(option.value);
         <li
           class="dropdown-box__option"
           [class.dropdown-box__option--selected]="selectedState"
           [class.dropdown-box__option--disabled]="option.disabled"
+          [class.dropdown-box__option--active]="i === activeIndex()"
           role="option"
           [attr.aria-selected]="selectedState"
           [attr.data-value]="option.value"
@@ -19692,8 +19826,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </li>
       }
     </ul>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.dropdown-box{overflow-y:auto;max-height:15rem;margin:0;padding:.375rem;list-style:none;border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:dropdown-in .2s ease-out}.dropdown-box__checkbox{flex-shrink:0;width:14px;height:14px;margin-right:8px;pointer-events:none;accent-color:var(--m-mm);cursor:pointer}.dropdown-box__option{display:flex;align-items:center;padding:.625rem .75rem;border-radius:.375rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:background .15s ease}.dropdown-box__option:hover{background:color-mix(in srgb,var(--m-focus) 8%,transparent)}.dropdown-box__option--selected{font-weight:600;color:var(--m-mm)}.dropdown-box__option--disabled{opacity:.4;pointer-events:none}.dropdown-box__empty{padding:.75rem;text-align:center;color:var(--m-text-tertiary);font-size:.875rem}@keyframes dropdown-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host(.open-upward) .dropdown-box{animation:dropdown-in-up .2s ease-out}@keyframes dropdown-in-up{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom) .dropdown-box{max-height:70vh;border:none;border-radius:0;background:transparent;box-shadow:none;animation:none}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.dropdown-box{overflow-y:auto;max-height:15rem;margin:0;padding:.375rem;list-style:none;border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:dropdown-in .2s ease-out}.dropdown-box__checkbox{flex-shrink:0;width:14px;height:14px;margin-right:8px;pointer-events:none;accent-color:var(--m-mm);cursor:pointer}.dropdown-box__option{display:flex;align-items:center;padding:.625rem .75rem;border-radius:.375rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:background .15s ease}.dropdown-box__option:hover,.dropdown-box__option--active{background:color-mix(in srgb,var(--m-focus) 8%,transparent)}.dropdown-box__option--selected{font-weight:600;color:var(--m-mm)}.dropdown-box__option--disabled{opacity:.4;pointer-events:none}.dropdown-box__empty{padding:.75rem;text-align:center;color:var(--m-text-tertiary);font-size:.875rem}@keyframes dropdown-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host(.open-upward) .dropdown-box{animation:dropdown-in-up .2s ease-out}@keyframes dropdown-in-up{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom) .dropdown-box{max-height:70vh;border:none;border-radius:0;background:transparent;box-shadow:none;animation:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
 class DropdownInputComponent extends BaseInputComponent {
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -19768,6 +19902,19 @@ class DropdownInputComponent extends BaseInputComponent {
             return label.includes(search) || o.value.toLowerCase().includes(search);
         });
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    /** The option ↑/↓ point at while the panel is open; -1 is none. Reset as the search narrows the list. */
+    activeIndex = linkedSignal({ ...(ngDevMode ? { debugName: "activeIndex" } : /* istanbul ignore next */ {}), source: this.filteredOptions,
+        computation: (options) => this.searchTerm() ? this.nextEnabled(options, -1, 1) : -1 });
+    /** The enabled option `step` rows past `from`, wrapping; `from` itself when none. */
+    nextEnabled = (options, from, step) => {
+        for (let i = 1; i <= options.length; i++) {
+            const index = (((from + step * i) % options.length) + options.length) %
+                options.length;
+            if (!options[index].disabled)
+                return index;
+        }
+        return from;
+    };
     displayValue = computed(() => {
         if (this.toggle())
             return this.searchTerm();
@@ -19830,32 +19977,57 @@ class DropdownInputComponent extends BaseInputComponent {
             inputBinding('options', this.filteredOptions),
             inputBinding('selected', this.value),
             inputBinding('multiple', this.isMultiselect),
-            outputBinding('action', (option) => {
-                if (this.isMultiselect()) {
-                    const val = this.value();
-                    const current = Array.isArray(val) ? val : val ? [val] : [];
-                    const index = current.indexOf(option.value);
-                    let nextValue;
-                    if (index > -1) {
-                        nextValue = current.filter((v) => v !== option.value);
-                    }
-                    else {
-                        nextValue = [...current, option.value];
-                    }
-                    this.setValue(nextValue);
-                }
-                else {
-                    this.setValue(option.value);
-                    this.toggle.set(false);
-                    this.searchTerm.set('');
-                    setTimeout(() => this.wrapperRef()?.nativeElement.click(), 0);
-                }
-            }),
+            inputBinding('activeIndex', this.activeIndex),
+            outputBinding('action', this.selectOption),
         ],
     }), ...(ngDevMode ? [{ debugName: "selectorConfig" }] : /* istanbul ignore next */ []));
+    selectOption = (option) => {
+        if (this.isMultiselect()) {
+            const val = this.value();
+            const current = Array.isArray(val) ? val : val ? [val] : [];
+            const index = current.indexOf(option.value);
+            let nextValue;
+            if (index > -1) {
+                nextValue = current.filter((v) => v !== option.value);
+            }
+            else {
+                nextValue = [...current, option.value];
+            }
+            this.setValue(nextValue);
+        }
+        else {
+            this.setValue(option.value);
+            this.toggle.set(false);
+            this.searchTerm.set('');
+            setTimeout(() => this.wrapperRef()?.nativeElement.click(), 0);
+        }
+    };
     onOpened = () => {
         this.toggle.set(true);
         this.searchTerm.set('');
+        const val = this.value();
+        const current = Array.isArray(val) ? val[0] : val;
+        this.activeIndex.set(this.filteredOptions().findIndex((o) => o.value === current));
+    };
+    // Focus stays in the trigger input (it is the search box), so ↑/↓ move the
+    // active option rather than DOM focus. Closed, ArrowDown bubbles on to
+    // SelectorDirective, which opens the panel.
+    onArrow = (event, step) => {
+        if (!this.toggle())
+            return;
+        event.preventDefault();
+        this.activeIndex.update((index) => this.nextEnabled(this.filteredOptions(), index, step));
+    };
+    // Enter never reaches SelectorDirective (it would toggle the panel); open,
+    // it picks the active option.
+    onEnter = (event) => {
+        event.stopPropagation();
+        if (!this.toggle())
+            return;
+        event.preventDefault();
+        const option = this.filteredOptions()[this.activeIndex()];
+        if (option && !option.disabled)
+            this.selectOption(option);
     };
     onClosed = () => {
         this.toggle.set(false);
@@ -19902,7 +20074,9 @@ class DropdownInputComponent extends BaseInputComponent {
           (valueChange)="onInput($event)"
           (click)="preventToggleWhenOpen($event)"
           (keydown.space)="$event.stopPropagation()"
-          (keydown.enter)="$event.stopPropagation()"
+          (keydown.enter)="onEnter($event)"
+          (keydown.arrowdown)="onArrow($event, 1)"
+          (keydown.arrowup)="onArrow($event, -1)"
           (keydown.tab)="$event.stopPropagation()"
         />
         <m-button [disabled]="disabled()" [config]="chevron()" />
@@ -19953,7 +20127,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           (valueChange)="onInput($event)"
           (click)="preventToggleWhenOpen($event)"
           (keydown.space)="$event.stopPropagation()"
-          (keydown.enter)="$event.stopPropagation()"
+          (keydown.enter)="onEnter($event)"
+          (keydown.arrowdown)="onArrow($event, 1)"
+          (keydown.arrowup)="onArrow($event, -1)"
           (keydown.tab)="$event.stopPropagation()"
         />
         <m-button [disabled]="disabled()" [config]="chevron()" />
@@ -21217,7 +21393,7 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.TOGGLE: {
-                const { ToggleInputComponent } = await import('./magmonium-one-toggle-BVPZzlCL.mjs');
+                const { ToggleInputComponent } = await import('./magmonium-one-toggle-DvD5jGYQ.mjs');
                 this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                 break;
             }
@@ -21229,12 +21405,12 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.PASSWORD: {
-                const { PasswordInputComponent } = await import('./magmonium-one-password-C8kP0ebV.mjs');
+                const { PasswordInputComponent } = await import('./magmonium-one-password-BMb2G_AM.mjs');
                 this.createDynamicComponent(seq, PasswordInputComponent);
                 break;
             }
             case InputType.OTP: {
-                const { OtpInputComponent } = await import('./magmonium-one-otp-C9WJQTVy.mjs');
+                const { OtpInputComponent } = await import('./magmonium-one-otp-OeNODjrN.mjs');
                 this.createDynamicComponent(seq, OtpInputComponent);
                 break;
             }
@@ -22941,7 +23117,7 @@ class FileUploadInputComponent extends BaseInputComponent {
         const modalStore = this.modalStore;
         if (!modalStore)
             return undefined;
-        const { ImageEditorComponent } = await import('./magmonium-one-image-editor-Cv8o5oZ6.mjs');
+        const { ImageEditorComponent } = await import('./magmonium-one-image-editor-DEX3Iyxj.mjs');
         const ratio = String(this.config()?.ratio ?? '');
         return new Promise((resolve) => {
             const modalRef = new ModalRef();
@@ -29823,7 +29999,7 @@ class StatComponent {
         return resolvePallet(color, this.themeStore.color()).color;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: StatComponent, isStandalone: true, selector: "m-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, noTranslate: { classPropertyName: "noTranslate", publicName: "noTranslate", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, cornerPosition: { classPropertyName: "cornerPosition", publicName: "cornerPosition", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, cornerColor: { classPropertyName: "cornerColor", publicName: "cornerColor", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-design-mode": "isDesignMode", "class.corner-left": "side() === \"left\"", "class.corner-bottom": "edge() === \"bottom\"", "class.align-left": "align() === \"left\"", "class.align-center": "align() === \"center\"", "class.align-right": "align() === \"right\"", "class.has-color": "!!resolvedColor()", "class.has-corner-color": "!!resolvedCornerColor()", "attr.data-variant": "variant()", "attr.data-surface": "surface()", "style.--m-stat-color": "resolvedColor()", "style.--m-stat-corner-color": "resolvedCornerColor()" }, classAttribute: "m-stat-host" }, ngImport: i0, template: "<div class=\"m-stat\">\n  <m-key-value variant=\"bento\">\n    <span key class=\"m-stat__label\" [class.m-stat__ghost]=\"labelGhost()\">{{\n      labelDisplay()\n    }}</span>\n    <span value class=\"m-stat__value\">\n      <!-- Both slots are wrappers this component owns rather than bare\n           `ng-content`: what a caller projects carries the *caller's*\n           encapsulation attribute, so `.m-stat__figure` and `.m-stat__corner`\n           could not be put on it from here. The wrappers hold the ordering,\n           the tone colour and the corner's superscript size; whatever lands\n           inside them is the caller's own markup (ADR 0021). -->\n      <span class=\"m-stat__figure\"><ng-content select=\"[value]\" /></span>\n      <!-- One corner, ordered and aligned by CSS rather than written twice:\n           `cornerPosition` is four values and the slot is one node. -->\n      <span class=\"m-stat__corner\"><ng-content select=\"[corner]\" /></span>\n    </span>\n  </m-key-value>\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;line-height:1.4;--_tone: var(--m-mm);--_pad-y: .85em;--_pad-x: 1em;--_kv-pad: 0}:host(.is-design-mode){min-width:8em;min-height:4em}.m-stat{display:flex;flex-direction:column;min-width:0;padding:var(--_pad-y) var(--_pad-x);border-radius:.75em}.m-stat__value{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.35em;min-width:0}.m-stat__figure{order:0;min-width:0;display:inline-flex;align-items:center;gap:.35em;font-size:.6060606061em}.m-stat__corner{order:1;align-self:flex-start;display:inline-flex;align-items:center;gap:.25em}.m-stat__corner:empty{display:none}.m-stat__corner{font-size:.5em;font-weight:300;white-space:nowrap;letter-spacing:.01em;color:var(--m-text-tertiary);background:none;-webkit-text-fill-color:currentColor}.m-stat__ghost{color:var(--m-text-tertiary);opacity:.6;-webkit-text-fill-color:currentColor}:host(.corner-left) .m-stat__corner{order:-1}:host(.corner-bottom) .m-stat__corner{align-self:flex-end}:host(.is-design-mode) .m-stat__value{flex-direction:column;align-items:flex-start}:host(.is-design-mode) .m-stat__corner{align-self:flex-start}:host(.align-left) .m-stat{text-align:left;--_kv-align: flex-start}:host(.align-center) .m-stat{text-align:center;--_kv-align: center}:host(.align-right) .m-stat{text-align:right;--_kv-align: flex-end}:host(.m-stat-host) .m-stat:has(m-section,m-section-form){--_kv-align: stretch}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__value{display:flex}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__figure{flex:1 1 auto;align-self:stretch;display:grid}:host([data-variant=compact]){--_pad-y: .45em;--_pad-x: .6em}:host([data-variant=no-padding]){--_pad-y: 0;--_pad-x: 0}:host([data-variant=no-x-padding]){--_pad-x: 0}:host(.has-color) .m-stat__figure{color:var(--m-stat-color);-webkit-text-fill-color:var(--m-stat-color)}:host(.has-corner-color) .m-stat__corner{color:var(--m-stat-corner-color)}:host([data-surface=card]) .m-stat{background:color-mix(in srgb,var(--m-background-lite) 70%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 70%,transparent)}:host([data-surface=shadow]) .m-stat{background:var(--m-background-lite);border:1px solid color-mix(in srgb,var(--m-border) 45%,transparent);box-shadow:0 10px 30px #0000000f;transition:box-shadow .2s ease,transform .2s ease}:host([data-surface=shadow]) .m-stat:hover{box-shadow:0 18px 44px #0000001a;transform:translateY(-2px)}:host([data-surface=glow]) .m-stat{background:color-mix(in srgb,var(--_tone) 10%,transparent);border:1px solid color-mix(in srgb,var(--_tone) 28%,transparent);box-shadow:0 12px 34px color-mix(in srgb,var(--_tone) 18%,transparent)}:host([data-surface=glow]) .m-stat__figure{text-shadow:0 2px 14px color-mix(in srgb,var(--_tone) 40%,transparent)}:host([data-surface=gradient]) .m-stat{background:linear-gradient(135deg,color-mix(in srgb,var(--_tone) 18%,transparent),color-mix(in srgb,var(--m-background-lite) 85%,transparent));border:1px solid color-mix(in srgb,var(--_tone) 20%,transparent);box-shadow:0 8px 24px #0000000d}:host([data-surface=gradient]) .m-stat__figure{text-shadow:0 1px 0 color-mix(in srgb,var(--m-background) 70%,transparent)}\n"], dependencies: [{ kind: "component", type: KeyValueComponent, selector: "m-key-value", inputs: ["variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: StatComponent, isStandalone: true, selector: "m-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, noTranslate: { classPropertyName: "noTranslate", publicName: "noTranslate", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, cornerPosition: { classPropertyName: "cornerPosition", publicName: "cornerPosition", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, cornerColor: { classPropertyName: "cornerColor", publicName: "cornerColor", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-design-mode": "isDesignMode", "class.corner-left": "side() === \"left\"", "class.corner-bottom": "edge() === \"bottom\"", "class.align-left": "align() === \"left\"", "class.align-center": "align() === \"center\"", "class.align-right": "align() === \"right\"", "class.has-color": "!!resolvedColor()", "class.has-corner-color": "!!resolvedCornerColor()", "attr.data-variant": "variant()", "attr.data-surface": "surface()", "style.--m-stat-color": "resolvedColor()", "style.--m-stat-corner-color": "resolvedCornerColor()" }, classAttribute: "m-stat-host" }, ngImport: i0, template: "<div class=\"m-stat\">\n  <m-key-value variant=\"bento\">\n    <span key class=\"m-stat__label\" [class.m-stat__ghost]=\"labelGhost()\">{{\n      labelDisplay()\n    }}</span>\n    <span value class=\"m-stat__value\">\n      <!-- Both slots are wrappers this component owns rather than bare\n           `ng-content`: what a caller projects carries the *caller's*\n           encapsulation attribute, so `.m-stat__figure` and `.m-stat__corner`\n           could not be put on it from here. The wrappers hold the ordering,\n           the tone colour and the corner's superscript size; whatever lands\n           inside them is the caller's own markup (ADR 0021). -->\n      <span class=\"m-stat__figure\"><ng-content select=\"[value]\" /></span>\n      <!-- One corner, ordered and aligned by CSS rather than written twice:\n           `cornerPosition` is four values and the slot is one node. -->\n      <span class=\"m-stat__corner\"><ng-content select=\"[corner]\" /></span>\n    </span>\n  </m-key-value>\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;line-height:1.4;--_tone: var(--m-mm);--_pad-y: .85em;--_pad-x: 1em;--_kv-pad: 0}:host(.is-design-mode){min-width:8em;min-height:4em}.m-stat{display:flex;flex-direction:column;min-width:0;padding:var(--_pad-y) var(--_pad-x);border-radius:.75em}.m-stat__value{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.35em;min-width:0}.m-stat__figure{order:0;min-width:0;display:inline-flex;align-items:center;gap:.35em;font-size:.6060606061em}.m-stat__corner{order:1;align-self:flex-start;display:inline-flex;align-items:center;gap:.25em}.m-stat__corner:empty{display:none}.m-stat__corner{font-size:.5em;font-weight:300;white-space:nowrap;letter-spacing:.01em;color:var(--m-text-tertiary);background:none;-webkit-text-fill-color:currentColor}.m-stat__ghost{color:var(--m-text-tertiary);opacity:.6;-webkit-text-fill-color:currentColor}:host(.corner-left) .m-stat__corner{order:-1}:host(.corner-bottom) .m-stat__corner{align-self:flex-end}:host(.is-design-mode) .m-stat__value{flex-direction:column;align-items:flex-start}:host(.is-design-mode) .m-stat__corner{align-self:flex-start}:host(.align-left) .m-stat{text-align:left;--_kv-align: flex-start}:host(.align-center) .m-stat{text-align:center;--_kv-align: center}:host(.align-right) .m-stat{text-align:right;--_kv-align: flex-end}:host(.m-stat-host) .m-stat:has(m-section,m-section-form){--_kv-align: stretch}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__value{display:flex}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__figure{flex:1 1 auto;align-self:stretch;display:grid;-webkit-text-fill-color:currentColor}:host([data-variant=compact]){--_pad-y: .45em;--_pad-x: .6em}:host([data-variant=no-padding]){--_pad-y: 0;--_pad-x: 0}:host([data-variant=no-x-padding]){--_pad-x: 0}:host(.has-color) .m-stat__figure{color:var(--m-stat-color);-webkit-text-fill-color:var(--m-stat-color)}:host(.has-corner-color) .m-stat__corner{color:var(--m-stat-corner-color)}:host([data-surface=card]) .m-stat{background:color-mix(in srgb,var(--m-background-lite) 70%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 70%,transparent)}:host([data-surface=shadow]) .m-stat{background:var(--m-background-lite);border:1px solid color-mix(in srgb,var(--m-border) 45%,transparent);box-shadow:0 10px 30px #0000000f;transition:box-shadow .2s ease,transform .2s ease}:host([data-surface=shadow]) .m-stat:hover{box-shadow:0 18px 44px #0000001a;transform:translateY(-2px)}:host([data-surface=glow]) .m-stat{background:color-mix(in srgb,var(--_tone) 10%,transparent);border:1px solid color-mix(in srgb,var(--_tone) 28%,transparent);box-shadow:0 12px 34px color-mix(in srgb,var(--_tone) 18%,transparent)}:host([data-surface=glow]) .m-stat__figure{text-shadow:0 2px 14px color-mix(in srgb,var(--_tone) 40%,transparent)}:host([data-surface=gradient]) .m-stat{background:linear-gradient(135deg,color-mix(in srgb,var(--_tone) 18%,transparent),color-mix(in srgb,var(--m-background-lite) 85%,transparent));border:1px solid color-mix(in srgb,var(--_tone) 20%,transparent);box-shadow:0 8px 24px #0000000d}:host([data-surface=gradient]) .m-stat__figure{text-shadow:0 1px 0 color-mix(in srgb,var(--m-background) 70%,transparent)}\n"], dependencies: [{ kind: "component", type: KeyValueComponent, selector: "m-key-value", inputs: ["variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StatComponent, decorators: [{
             type: Component,
@@ -29841,7 +30017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-surface]': 'surface()',
                         '[style.--m-stat-color]': 'resolvedColor()',
                         '[style.--m-stat-corner-color]': 'resolvedCornerColor()',
-                    }, template: "<div class=\"m-stat\">\n  <m-key-value variant=\"bento\">\n    <span key class=\"m-stat__label\" [class.m-stat__ghost]=\"labelGhost()\">{{\n      labelDisplay()\n    }}</span>\n    <span value class=\"m-stat__value\">\n      <!-- Both slots are wrappers this component owns rather than bare\n           `ng-content`: what a caller projects carries the *caller's*\n           encapsulation attribute, so `.m-stat__figure` and `.m-stat__corner`\n           could not be put on it from here. The wrappers hold the ordering,\n           the tone colour and the corner's superscript size; whatever lands\n           inside them is the caller's own markup (ADR 0021). -->\n      <span class=\"m-stat__figure\"><ng-content select=\"[value]\" /></span>\n      <!-- One corner, ordered and aligned by CSS rather than written twice:\n           `cornerPosition` is four values and the slot is one node. -->\n      <span class=\"m-stat__corner\"><ng-content select=\"[corner]\" /></span>\n    </span>\n  </m-key-value>\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;line-height:1.4;--_tone: var(--m-mm);--_pad-y: .85em;--_pad-x: 1em;--_kv-pad: 0}:host(.is-design-mode){min-width:8em;min-height:4em}.m-stat{display:flex;flex-direction:column;min-width:0;padding:var(--_pad-y) var(--_pad-x);border-radius:.75em}.m-stat__value{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.35em;min-width:0}.m-stat__figure{order:0;min-width:0;display:inline-flex;align-items:center;gap:.35em;font-size:.6060606061em}.m-stat__corner{order:1;align-self:flex-start;display:inline-flex;align-items:center;gap:.25em}.m-stat__corner:empty{display:none}.m-stat__corner{font-size:.5em;font-weight:300;white-space:nowrap;letter-spacing:.01em;color:var(--m-text-tertiary);background:none;-webkit-text-fill-color:currentColor}.m-stat__ghost{color:var(--m-text-tertiary);opacity:.6;-webkit-text-fill-color:currentColor}:host(.corner-left) .m-stat__corner{order:-1}:host(.corner-bottom) .m-stat__corner{align-self:flex-end}:host(.is-design-mode) .m-stat__value{flex-direction:column;align-items:flex-start}:host(.is-design-mode) .m-stat__corner{align-self:flex-start}:host(.align-left) .m-stat{text-align:left;--_kv-align: flex-start}:host(.align-center) .m-stat{text-align:center;--_kv-align: center}:host(.align-right) .m-stat{text-align:right;--_kv-align: flex-end}:host(.m-stat-host) .m-stat:has(m-section,m-section-form){--_kv-align: stretch}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__value{display:flex}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__figure{flex:1 1 auto;align-self:stretch;display:grid}:host([data-variant=compact]){--_pad-y: .45em;--_pad-x: .6em}:host([data-variant=no-padding]){--_pad-y: 0;--_pad-x: 0}:host([data-variant=no-x-padding]){--_pad-x: 0}:host(.has-color) .m-stat__figure{color:var(--m-stat-color);-webkit-text-fill-color:var(--m-stat-color)}:host(.has-corner-color) .m-stat__corner{color:var(--m-stat-corner-color)}:host([data-surface=card]) .m-stat{background:color-mix(in srgb,var(--m-background-lite) 70%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 70%,transparent)}:host([data-surface=shadow]) .m-stat{background:var(--m-background-lite);border:1px solid color-mix(in srgb,var(--m-border) 45%,transparent);box-shadow:0 10px 30px #0000000f;transition:box-shadow .2s ease,transform .2s ease}:host([data-surface=shadow]) .m-stat:hover{box-shadow:0 18px 44px #0000001a;transform:translateY(-2px)}:host([data-surface=glow]) .m-stat{background:color-mix(in srgb,var(--_tone) 10%,transparent);border:1px solid color-mix(in srgb,var(--_tone) 28%,transparent);box-shadow:0 12px 34px color-mix(in srgb,var(--_tone) 18%,transparent)}:host([data-surface=glow]) .m-stat__figure{text-shadow:0 2px 14px color-mix(in srgb,var(--_tone) 40%,transparent)}:host([data-surface=gradient]) .m-stat{background:linear-gradient(135deg,color-mix(in srgb,var(--_tone) 18%,transparent),color-mix(in srgb,var(--m-background-lite) 85%,transparent));border:1px solid color-mix(in srgb,var(--_tone) 20%,transparent);box-shadow:0 8px 24px #0000000d}:host([data-surface=gradient]) .m-stat__figure{text-shadow:0 1px 0 color-mix(in srgb,var(--m-background) 70%,transparent)}\n"] }]
+                    }, template: "<div class=\"m-stat\">\n  <m-key-value variant=\"bento\">\n    <span key class=\"m-stat__label\" [class.m-stat__ghost]=\"labelGhost()\">{{\n      labelDisplay()\n    }}</span>\n    <span value class=\"m-stat__value\">\n      <!-- Both slots are wrappers this component owns rather than bare\n           `ng-content`: what a caller projects carries the *caller's*\n           encapsulation attribute, so `.m-stat__figure` and `.m-stat__corner`\n           could not be put on it from here. The wrappers hold the ordering,\n           the tone colour and the corner's superscript size; whatever lands\n           inside them is the caller's own markup (ADR 0021). -->\n      <span class=\"m-stat__figure\"><ng-content select=\"[value]\" /></span>\n      <!-- One corner, ordered and aligned by CSS rather than written twice:\n           `cornerPosition` is four values and the slot is one node. -->\n      <span class=\"m-stat__corner\"><ng-content select=\"[corner]\" /></span>\n    </span>\n  </m-key-value>\n</div>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;line-height:1.4;--_tone: var(--m-mm);--_pad-y: .85em;--_pad-x: 1em;--_kv-pad: 0}:host(.is-design-mode){min-width:8em;min-height:4em}.m-stat{display:flex;flex-direction:column;min-width:0;padding:var(--_pad-y) var(--_pad-x);border-radius:.75em}.m-stat__value{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.35em;min-width:0}.m-stat__figure{order:0;min-width:0;display:inline-flex;align-items:center;gap:.35em;font-size:.6060606061em}.m-stat__corner{order:1;align-self:flex-start;display:inline-flex;align-items:center;gap:.25em}.m-stat__corner:empty{display:none}.m-stat__corner{font-size:.5em;font-weight:300;white-space:nowrap;letter-spacing:.01em;color:var(--m-text-tertiary);background:none;-webkit-text-fill-color:currentColor}.m-stat__ghost{color:var(--m-text-tertiary);opacity:.6;-webkit-text-fill-color:currentColor}:host(.corner-left) .m-stat__corner{order:-1}:host(.corner-bottom) .m-stat__corner{align-self:flex-end}:host(.is-design-mode) .m-stat__value{flex-direction:column;align-items:flex-start}:host(.is-design-mode) .m-stat__corner{align-self:flex-start}:host(.align-left) .m-stat{text-align:left;--_kv-align: flex-start}:host(.align-center) .m-stat{text-align:center;--_kv-align: center}:host(.align-right) .m-stat{text-align:right;--_kv-align: flex-end}:host(.m-stat-host) .m-stat:has(m-section,m-section-form){--_kv-align: stretch}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__value{display:flex}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__figure{flex:1 1 auto;align-self:stretch;display:grid;-webkit-text-fill-color:currentColor}:host([data-variant=compact]){--_pad-y: .45em;--_pad-x: .6em}:host([data-variant=no-padding]){--_pad-y: 0;--_pad-x: 0}:host([data-variant=no-x-padding]){--_pad-x: 0}:host(.has-color) .m-stat__figure{color:var(--m-stat-color);-webkit-text-fill-color:var(--m-stat-color)}:host(.has-corner-color) .m-stat__corner{color:var(--m-stat-corner-color)}:host([data-surface=card]) .m-stat{background:color-mix(in srgb,var(--m-background-lite) 70%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 70%,transparent)}:host([data-surface=shadow]) .m-stat{background:var(--m-background-lite);border:1px solid color-mix(in srgb,var(--m-border) 45%,transparent);box-shadow:0 10px 30px #0000000f;transition:box-shadow .2s ease,transform .2s ease}:host([data-surface=shadow]) .m-stat:hover{box-shadow:0 18px 44px #0000001a;transform:translateY(-2px)}:host([data-surface=glow]) .m-stat{background:color-mix(in srgb,var(--_tone) 10%,transparent);border:1px solid color-mix(in srgb,var(--_tone) 28%,transparent);box-shadow:0 12px 34px color-mix(in srgb,var(--_tone) 18%,transparent)}:host([data-surface=glow]) .m-stat__figure{text-shadow:0 2px 14px color-mix(in srgb,var(--_tone) 40%,transparent)}:host([data-surface=gradient]) .m-stat{background:linear-gradient(135deg,color-mix(in srgb,var(--_tone) 18%,transparent),color-mix(in srgb,var(--m-background-lite) 85%,transparent));border:1px solid color-mix(in srgb,var(--_tone) 20%,transparent);box-shadow:0 8px 24px #0000000d}:host([data-surface=gradient]) .m-stat__figure{text-shadow:0 1px 0 color-mix(in srgb,var(--m-background) 70%,transparent)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], noTranslate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noTranslate", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], cornerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerPosition", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], cornerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerColor", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }] } });
 
 class PwaInstallComponent {
@@ -35303,7 +35479,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", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "noTranslate", "params", "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 });
+  </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", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "noTranslate", "params", "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", "autoFocus", "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,
@@ -36664,5 +36840,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ColComponent as $, ACCESS_DOMAINS as A, ButtonComponent as B, Assets as C, AuthActivityPageComponent as D, AuthApiService as E, AuthStore as F, AutosizeDirective as G, HeaderComponent$1 as H, InputType as I, BadgeComponent as J, BandingComponent as K, LabelComponent as L, MODAL_REF as M, BaseArrayInputComponent as N, BaseRootWebComponent as O, BaseWebComponent as P, ButtonGroupComponent as Q, RangeInputComponent as R, COMPONENT_INPUT_REGISTRY as S, TranslatePipe as T, CardComponent as U, CardWrapperComponent as V, CarouselComponent as W, ChartComponent as X, ChatBubbleComponent as Y, CheckboxInputComponent as Z, ClearableInputComponent as _, MIN_ZOOM as a, MHeroComponent as a$, ColorPickerInputComponent as a0, CommentItemComponent as a1, CommentsApiService as a2, CommentsComponent as a3, CommentsStore as a4, CompactNumberPipe as a5, ComponentInputComponent as a6, ComponentStepperComponent as a7, ConfigComponent as a8, ConfirmComponent as a9, FileUploadDirective as aA, FileUploadInputComponent as aB, FlexComponent as aC, FlexItemComponent as aD, FormGroupComponent as aE, FrameComponent as aF, FreezeService as aG, GRID_BREAKPOINTS as aH, GetNavService as aI, HighlightDirective as aJ, HttpService as aK, ICON_SOURCE as aL, IS_SIDE_PANEL as aM, IconComponent as aN, ImgComponent as aO, InstrumentScoreComponent as aP, InterceptorObservables as aQ, JumbotronComponent as aR, KeyValueComponent as aS, LAYOUT_ASSET_FOLDER as aT, LOGIN_COMPONENT as aU, LOGIN_STORE as aV, LanguageComponent as aW, ListComponent as aX, LogoComponent as aY, MAG_SOCKET_EVENT as aZ, MHeroColorDirective as a_, ContextMenuComponent as aa, CustomIconClass as ab, CustomIconEditComponent as ac, DEFAULT_FILTER_RANGE_MODE as ad, DEFAULT_FILTER_VARIANT as ae, DEFAULT_NAV_PARAM as af, DEFAULT_NAV_SEGMENT as ag, DEFAULT_SIZE as ah, DashboardCardComponent as ai, DateInputComponent as aj, DatePickerComponent as ak, DeviceService as al, DomService as am, Domain as an, DotGridComponent as ao, DragListDirective as ap, DragListItemDirective as aq, DraggableDirective as ar, DropdownInputComponent as as, FILTER_GROUP_CONTEXT as at, FILTER_RANGE_MODES as au, FILTER_VARIANTS as av, FLEX_VARIANTS as aw, FOLDER_PICK_LISTENER as ax, FORM_ASSET_FOLDER as ay, FileService as az, MAX_ZOOM as b, SEARCH_RESULTS_EVENT as b$, MODAL_STORE_REF as b0, MRefDirective as b1, MStepComponent as b2, MURL_PARAM as b3, MURL_SEP as b4, ManifestEnrichmentService as b5, MenuComponent as b6, ModalDirective as b7, ModalRef as b8, ModalStore as b9, OVERLAY_WIDGETS as bA, OneApp as bB, OptionsSourceDirective as bC, OverlayBodyComponent as bD, OverlayRef as bE, OverlayService as bF, PLATFORM_BUTTON_NAV_IDS as bG, PLATFORM_EXTENSIBLE_NAV_IDS as bH, PLATFORM_NAV_MAP as bI, PLATFORM_ROOT_CHILDREN as bJ, PaginationComponent as bK, PanelComponent as bL, PercentagePipe as bM, PlaygroundComponent as bN, PositionDirective as bO, PwaInstallComponent as bP, ROOT_NAV$1 as bQ, RadioGroupComponent as bR, RadioInputComponent as bS, RatingInputComponent as bT, ReactiveElementComponent as bU, RemoteComponent as bV, RemoteLoaderService as bW, ResizeElementComponent as bX, RouteContainer as bY, RowComponent as bZ, SEARCH_QUERY as b_, MoneyPipe as ba, MultiRangeInputComponent as bb, MurlUrlSerializer as bc, NAV_DEFAULT_MURL as bd, NAV_ID_SEP as be, NAV_MAIN_BUTTONS as bf, NAV_SEGMENT_RE as bg, NAV_STORE_REF as bh, NAV_WC_COMPONENTS as bi, NAV_WIDGET_MAP as bj, NavComponent as bk, NavDetailsComponent as bl, NavHeaderComponent as bm, NavMenuComponent as bn, NavStore as bo, NavTrailComponent as bp, NothingComponent as bq, NotificationElementComponent as br, NotificationGroupComponent as bs, NotificationPopupComponent as bt, NotificationService as bu, NotificationStore as bv, NotificationType as bw, NotificationWidgetComponent as bx, ONE_ASSET_BASE_URL as by, OPTIONS_SOURCE as bz, cropRect as c, ThemeService as c$, SECTION_ACCORDION_GROUP as c0, SECTION_FORM_CONTEXT as c1, SHARED_ICONS as c2, SIZE_CONTEXT as c3, ScoreComponent as c4, ScrollComponent as c5, ScrollService as c6, SearchPanelComponent as c7, SearchStore as c8, SearchUserPanelComponent as c9, 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, ThemeDataService as c_, SectionAccordionDirective as ca, SectionAccordionGroupDirective as cb, SectionBackComponent as cc, SectionBadgesComponent as cd, SectionButtonGroupComponent as ce, SectionCardComponent as cf, SectionCarouselComponent as cg, SectionComponent as ch, SectionFilterComponent as ci, SectionFilterGroupComponent as cj, SectionFilterMenuComponent as ck, SectionFilterPanelComponent as cl, SectionFilterRangePanelComponent as cm, SectionFooterComponent as cn, SectionFormComponent as co, SectionFormItemComponent as cp, SectionHeaderComponent as cq, SectionHeroComponent as cr, SectionPaginationComponent as cs, SectionSearchComponent as ct, SectionStepperComponent as cu, SectionTabsComponent as cv, SectionToggleComponent as cw, SectionToggleItemDirective as cx, SelectableCardInputComponent as cy, SelectorDirective as cz, drawFramed as d, filterPanelOf as d$, ThemeStore as d0, TimeAgoPipe as d1, TimelineComponent as d2, ToggleButtonComponent as d3, ToggleInputComponent as d4, ToggleRadioInputComponent as d5, ToolTipDirective as d6, TooltipComponent as d7, TranslateService as d8, TreeGridComponent as d9, cellText as dA, checkFilterCondition as dB, childNavId as dC, classListSignal as dD, coerceSize as dE, cornerEdge as dF, cornerSide as dG, createMap as dH, createPlatformNavMap as dI, deriveAvatarGradient as dJ, deriveContrastColor as dK, deriveOppositeColor as dL, derivePropertyName as dM, emailValidation as dN, evaluate as dO, evaluateBool as dP, fieldBoolean as dQ, fieldNumber as dR, fieldString as dS, filterHoldsList as dT, filterHoldsOneBound as dU, filterHoldsOptions as dV, filterHoldsRange as dW, filterList as dX, filterNumber as dY, filterNumberList as dZ, filterOne as d_, URL_SEP as da, USER_STORE_REF as db, USER_TAB_MAP as dc, UniverseComponent as dd, UserApiService as de, UserAvatarComponent as df, UserComponent as dg, UserNavComponent as dh, UserSettingsComponent as di, UserStore as dj, WC_ROUTE_CHANGED_EVENT as dk, WC_SEARCH_GROUPS as dl, WIN_USER_TAB_HOOK as dm, WIN_USER_TAB_KEY as dn, WatermarkComponent as dp, WcRouterStore as dq, WrapperInputComponent as dr, anchorNavId as ds, applyColorsToElement as dt, assetOptions as du, bootstrapMagApp as dv, bootstrapPwaInstall as dw, buildWcBaseUrl as dx, calculateLuminance as dy, calculateRanks as dz, encodeFramed as e, navIdSegment as e$, filterPanelWidth as e0, filterRange as e1, filterTreeGridRows as e2, filterValueList as e3, filterValues as e4, flattenTreeGridRows as e5, formatBadgeCount as e6, fullName as e7, generateClipPath as e8, generateTransform as e9, isNavRowsConfig as eA, isNavVisibilityConfig as eB, isPlatformNavId as eC, isSize as eD, isTierPreview as eE, isUrlLocalhost as eF, isValidNavId as eG, isValidNavSegment as eH, isWebComponent as eI, linkToId as eJ, linkToNav as eK, loadingActions as eL, mInterceptor as eM, manualValidation as eN, matchFieldValidation as eO, maxLengthValidation as eP, maxValidation as eQ, mergePlatformNav as eR, mergeUnique as eS, mergeUniqueBy as eT, mergeUniqueWith as eU, minAgeValidation as eV, minLengthValidation as eW, minValidation as eX, miniMarkToHtml as eY, navIdChain as eZ, navIdFor as e_, getClassList as ea, getProperty as eb, getScrollParent as ec, getTierFromPreviewPath as ed, getTreeGridRow as ee, getUniqueId as ef, getValue as eg, hasErrorComputed as eh, hexToRgb as ei, hslToRgb$1 as ej, initMagmoniumApp as ek, initialNotificationState as el, initialState$2 as em, initials as en, injectAuthenticate as eo, injectInstallApp as ep, injectParentSize as eq, injectScrollSticky as er, isButtonName as es, isCancelledComputed as et, isExtensiblePlatformNavId as eu, isJson as ev, isLoadingComputed as ew, isLocalhost as ex, isNavInstanceConfig as ey, isNavMenuConfig as ez, clampFraming as f, navIdToRoutePath as f0, navIdToSegments as f1, navParamOf as f2, navToId as f3, navVisibilityGuard as f4, normalizeAssetOptions as f5, parentNavId as f6, parseAddress as f7, parseColor as f8, parsePatternNames as f9, rgbToHex as fA, rgbToHsl as fB, rowHasChildren as fC, samePatterns as fD, segmentsToNavId as fE, setProperty as fF, setTreeGridChildren as fG, settingsWidgets as fH, shouldShowBadge as fI, splitNavId as fJ, splitOnMatch as fK, stringToColor as fL, toAttrBool as fM, toAttrNumber as fN, toCssLength as fO, toHostNavId as fP, toLength$1 as fQ, toLocalNavId as fR, toggleTreeGridRow as fS, unfetchedPlatformNav as fT, urlValidation as fU, patternValidation as fa, patternsValidation as fb, platformNavWidgets as fc, privateGuard as fd, processImageToSvg as fe, provideAppContext as ff, provideMagAppConfig as fg, provideMagWcConfig as fh, provideMagWcRoutes as fi, provideModalComponents as fj, provideMurlUrlSerializer as fk, provideNavWidgets as fl, provideOverlayWidgets as fm, providePlatformNavWidgets as fn, provideSearch as fo, provideSizeContext as fp, provideUserTabs as fq, publicGuard as fr, readFieldPatterns as fs, renderAddress as ft, requiredValidation as fu, resolveConfigAsset as fv, resolveIconSize as fw, resolvePallet as fx, resolvePatternRules as fy, resolveSize as fz, BaseInputComponent as g, BaseTextInputComponent as h, initialFraming as i, TextOutputComponent as j, IS_DESIGN_MODE as k, APP_CONTEXT_REF as l, ASSET_BASE_URL as m, AccordionBodyDirective as n, outputSize as o, parseRatio as p, AccordionComponent as q, renameForType as r, AccordionGroupComponent as s, ActionComponent as t, AnimatedGraphsComponent as u, AppCardComponent as v, AppRelationType as w, AppTileComponent as x, AssetStore as y, AssetUrlPipe as z };
-//# sourceMappingURL=magmonium-one-magmonium-one-CVoYIQ9Y.mjs.map
+export { ColComponent as $, ACCESS_DOMAINS as A, ButtonComponent as B, Assets as C, AuthActivityPageComponent as D, AuthApiService as E, AuthStore as F, AutosizeDirective as G, HeaderComponent$1 as H, InputType as I, BadgeComponent as J, BandingComponent as K, LabelComponent as L, MODAL_REF as M, BaseArrayInputComponent as N, BaseRootWebComponent as O, BaseWebComponent as P, ButtonGroupComponent as Q, RangeInputComponent as R, COMPONENT_INPUT_REGISTRY as S, TranslatePipe as T, CardComponent as U, CardWrapperComponent as V, CarouselComponent as W, ChartComponent as X, ChatBubbleComponent as Y, CheckboxInputComponent as Z, ClearableInputComponent as _, MIN_ZOOM as a, MHeroColorDirective as a$, ColorPickerInputComponent as a0, CommentItemComponent as a1, CommentsApiService as a2, CommentsComponent as a3, CommentsStore as a4, CompactNumberPipe as a5, ComponentInputComponent as a6, ComponentStepperComponent as a7, ConfigComponent as a8, ConfirmComponent as a9, FileService as aA, FileUploadDirective as aB, FileUploadInputComponent as aC, FlexComponent as aD, FlexItemComponent as aE, FormGroupComponent as aF, FrameComponent as aG, FreezeService as aH, GRID_BREAKPOINTS as aI, GetNavService as aJ, HighlightDirective as aK, HttpService as aL, ICON_SOURCE as aM, IS_SIDE_PANEL as aN, IconComponent as aO, ImgComponent as aP, InstrumentScoreComponent as aQ, InterceptorObservables as aR, JumbotronComponent as aS, KeyValueComponent as aT, LAYOUT_ASSET_FOLDER as aU, LOGIN_COMPONENT as aV, LOGIN_STORE as aW, LanguageComponent as aX, ListComponent as aY, LogoComponent as aZ, MAG_SOCKET_EVENT as a_, ContextMenuComponent as aa, CustomIconClass as ab, CustomIconEditComponent as ac, DEFAULT_DENIAL as ad, DEFAULT_FILTER_RANGE_MODE as ae, DEFAULT_FILTER_VARIANT as af, DEFAULT_NAV_PARAM as ag, DEFAULT_NAV_SEGMENT as ah, DEFAULT_SIZE as ai, DashboardCardComponent as aj, DateInputComponent as ak, DatePickerComponent as al, DeviceService as am, DomService as an, Domain as ao, DotGridComponent as ap, DragListDirective as aq, DragListItemDirective as ar, DraggableDirective as as, DropdownInputComponent as at, FILTER_GROUP_CONTEXT as au, FILTER_RANGE_MODES as av, FILTER_VARIANTS as aw, FLEX_VARIANTS as ax, FOLDER_PICK_LISTENER as ay, FORM_ASSET_FOLDER as az, MAX_ZOOM as b, SEARCH_QUERY as b$, MHeroComponent as b0, MODAL_STORE_REF as b1, MRefDirective as b2, MStepComponent as b3, MURL_PARAM as b4, MURL_SEP as b5, ManifestEnrichmentService as b6, MenuComponent as b7, ModalDirective as b8, ModalRef as b9, OPTIONS_SOURCE as bA, OVERLAY_WIDGETS as bB, OneApp as bC, OptionsSourceDirective as bD, OverlayBodyComponent as bE, OverlayRef as bF, OverlayService as bG, PLATFORM_BUTTON_NAV_IDS as bH, PLATFORM_EXTENSIBLE_NAV_IDS as bI, PLATFORM_NAV_MAP as bJ, PLATFORM_ROOT_CHILDREN as bK, PaginationComponent as bL, PanelComponent as bM, PercentagePipe as bN, PlaygroundComponent as bO, PositionDirective as bP, PwaInstallComponent as bQ, ROOT_NAV$1 as bR, RadioGroupComponent as bS, RadioInputComponent as bT, RatingInputComponent as bU, ReactiveElementComponent as bV, RemoteComponent as bW, RemoteLoaderService as bX, ResizeElementComponent as bY, RouteContainer as bZ, RowComponent as b_, ModalStore as ba, MoneyPipe as bb, MultiRangeInputComponent as bc, MurlUrlSerializer as bd, NAV_DEFAULT_MURL as be, NAV_ID_SEP as bf, NAV_MAIN_BUTTONS as bg, NAV_SEGMENT_RE as bh, NAV_STORE_REF as bi, NAV_WC_COMPONENTS as bj, NAV_WIDGET_MAP as bk, NavComponent as bl, NavDetailsComponent as bm, NavHeaderComponent as bn, NavMenuComponent as bo, NavStore as bp, NavTrailComponent as bq, NothingComponent as br, NotificationElementComponent as bs, NotificationGroupComponent as bt, NotificationPopupComponent as bu, NotificationService as bv, NotificationStore as bw, NotificationType as bx, NotificationWidgetComponent as by, ONE_ASSET_BASE_URL as bz, cropRect as c, ThemeDataService as c$, SEARCH_RESULTS_EVENT as c0, SECTION_ACCORDION_GROUP as c1, SECTION_FORM_CONTEXT as c2, SHARED_ICONS as c3, SIZE_CONTEXT as c4, ScoreComponent as c5, ScrollComponent as c6, ScrollService as c7, SearchPanelComponent as c8, SearchStore as c9, SelectorDirective as cA, SettingsSearchBarComponent as cB, SettingsSearchService as cC, ShapeComponent as cD, SharedStoreRegistry as cE, SidePanelDirective as cF, Size as cG, SocketStore as cH, SortComponent as cI, StatComponent as cJ, StepComponent as cK, StepperComponent as cL, StepsComponent as cM, StorageService as cN, StrokeLinecap as cO, StrokeLinejoin as cP, SummaryComponent as cQ, SvgGeneratorComponent as cR, SvgGeneratorService as cS, SvgService as cT, TOTAL_COLUMNS as cU, TRANSLATION_SOURCE as cV, TableComponent as cW, TechnicalMeterComponent as cX, TextInputComponent as cY, TextareaInputComponent as cZ, ThemeComponent as c_, SearchUserPanelComponent as ca, SectionAccordionDirective as cb, SectionAccordionGroupDirective as cc, SectionBackComponent as cd, SectionBadgesComponent as ce, SectionButtonGroupComponent as cf, SectionCardComponent as cg, SectionCarouselComponent as ch, SectionComponent as ci, SectionFilterComponent as cj, SectionFilterGroupComponent as ck, SectionFilterMenuComponent as cl, SectionFilterPanelComponent as cm, SectionFilterRangePanelComponent as cn, SectionFooterComponent as co, SectionFormComponent as cp, SectionFormItemComponent as cq, SectionHeaderComponent as cr, SectionHeroComponent as cs, SectionPaginationComponent as ct, SectionSearchComponent as cu, SectionStepperComponent as cv, SectionTabsComponent as cw, SectionToggleComponent as cx, SectionToggleItemDirective as cy, SelectableCardInputComponent as cz, drawFramed as d, filterNumberList as d$, ThemeService as d0, ThemeStore as d1, TimeAgoPipe as d2, TimelineComponent as d3, ToggleButtonComponent as d4, ToggleInputComponent as d5, ToggleRadioInputComponent as d6, ToolTipDirective as d7, TooltipComponent as d8, TranslateService as d9, calculateRanks as dA, cellText as dB, checkFilterCondition as dC, childNavId as dD, claimDenial as dE, classListSignal as dF, coerceSize as dG, cornerEdge as dH, cornerSide as dI, createMap as dJ, createPlatformNavMap as dK, deriveAvatarGradient as dL, deriveContrastColor as dM, deriveOppositeColor as dN, derivePropertyName as dO, emailValidation as dP, evaluate as dQ, evaluateBool as dR, fieldBoolean as dS, fieldNumber as dT, fieldString as dU, filterHoldsList as dV, filterHoldsOneBound as dW, filterHoldsOptions as dX, filterHoldsRange as dY, filterList as dZ, filterNumber as d_, TreeGridComponent as da, URL_SEP as db, USER_STORE_REF as dc, USER_TAB_MAP as dd, UniverseComponent as de, UserApiService as df, UserAvatarComponent as dg, UserComponent as dh, UserNavComponent as di, UserSettingsComponent as dj, UserStore as dk, WC_ROUTE_CHANGED_EVENT as dl, WC_SEARCH_GROUPS as dm, WIN_USER_TAB_HOOK as dn, WIN_USER_TAB_KEY as dp, WatermarkComponent as dq, WcRouterStore as dr, WrapperInputComponent as ds, anchorNavId as dt, applyColorsToElement as du, assetOptions as dv, bootstrapMagApp as dw, bootstrapPwaInstall as dx, buildWcBaseUrl as dy, calculateLuminance as dz, encodeFramed as e, miniMarkToHtml as e$, filterOne as e0, filterPanelOf as e1, filterPanelWidth as e2, filterRange as e3, filterTreeGridRows as e4, filterValueList as e5, filterValues as e6, flattenTreeGridRows as e7, formatBadgeCount as e8, fullName as e9, isLocalhost as eA, isNavInstanceConfig as eB, isNavMenuConfig as eC, isNavRowsConfig as eD, isNavVisibilityConfig as eE, isPlatformNavId as eF, isSize as eG, isTierPreview as eH, isUrlLocalhost as eI, isValidNavId as eJ, isValidNavSegment as eK, isWebComponent as eL, linkToId as eM, linkToNav as eN, loadingActions as eO, mInterceptor as eP, manualValidation as eQ, matchFieldValidation as eR, maxLengthValidation as eS, maxValidation as eT, mergePlatformNav as eU, mergeUnique as eV, mergeUniqueBy as eW, mergeUniqueWith as eX, minAgeValidation as eY, minLengthValidation as eZ, minValidation as e_, generateClipPath as ea, generateTransform as eb, getClassList as ec, getProperty as ed, getScrollParent as ee, getTierFromPreviewPath as ef, getTreeGridRow as eg, getUniqueId as eh, getValue as ei, hasErrorComputed as ej, hexToRgb as ek, hslToRgb$1 as el, initMagmoniumApp as em, initialNotificationState as en, initialState$2 as eo, initials as ep, injectAuthenticate as eq, injectDefaultDenial as er, injectInstallApp as es, injectParentSize as et, injectScrollSticky as eu, isButtonName as ev, isCancelledComputed as ew, isExtensiblePlatformNavId as ex, isJson as ey, isLoadingComputed as ez, clampFraming as f, navIdChain as f0, navIdFor as f1, navIdSegment as f2, navIdToRoutePath as f3, navIdToSegments as f4, navParamOf as f5, navToId as f6, navVisibilityGuard as f7, normalizeAssetOptions as f8, parentNavId as f9, resolveIconSize as fA, resolvePallet as fB, resolvePatternRules as fC, resolveSize as fD, rgbToHex as fE, rgbToHsl as fF, rowHasChildren as fG, samePatterns as fH, segmentsToNavId as fI, setProperty as fJ, setTreeGridChildren as fK, settingsWidgets as fL, shouldShowBadge as fM, splitNavId as fN, splitOnMatch as fO, stringToColor as fP, toAttrBool as fQ, toAttrNumber as fR, toCssLength as fS, toHostNavId as fT, toLength$1 as fU, toLocalNavId as fV, toggleTreeGridRow as fW, unfetchedPlatformNav as fX, urlValidation as fY, parseAddress as fa, parseColor as fb, parsePatternNames as fc, patternValidation as fd, patternsValidation as fe, permissionRefusal as ff, platformNavWidgets as fg, privateGuard as fh, processImageToSvg as fi, provideAppContext as fj, provideMagAppConfig as fk, provideMagWcConfig as fl, provideMagWcRoutes as fm, provideModalComponents as fn, provideMurlUrlSerializer as fo, provideNavWidgets as fp, provideOverlayWidgets as fq, providePlatformNavWidgets as fr, provideSearch as fs, provideSizeContext as ft, provideUserTabs as fu, publicGuard as fv, readFieldPatterns as fw, renderAddress as fx, requiredValidation as fy, resolveConfigAsset as fz, BaseInputComponent as g, BaseTextInputComponent as h, initialFraming as i, TextOutputComponent as j, IS_DESIGN_MODE as k, APP_CONTEXT_REF as l, ASSET_BASE_URL as m, AccordionBodyDirective as n, outputSize as o, parseRatio as p, AccordionComponent as q, renameForType as r, AccordionGroupComponent as s, ActionComponent as t, AnimatedGraphsComponent as u, AppCardComponent as v, AppRelationType as w, AppTileComponent as x, AssetStore as y, AssetUrlPipe as z };
+//# sourceMappingURL=magmonium-one-magmonium-one-CORH8s0K.mjs.map