@magmonium/one 0.2.93 → 0.2.94

package/fesm2022/{magmonium-one-magmonium-one-CzCUYYvz.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-qK5wYbFE.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-DCpAXJIf.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-BGGcDB4H.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 {
@@ -19675,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)) {
@@ -19690,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"
@@ -19727,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"
@@ -19768,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 */ []));
@@ -19844,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();
@@ -19906,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);
@@ -19978,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()" />
@@ -20029,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()" />
@@ -21293,7 +21393,7 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.TOGGLE: {
-                const { ToggleInputComponent } = await import('./magmonium-one-toggle-qK5wYbFE.mjs');
+                const { ToggleInputComponent } = await import('./magmonium-one-toggle-DvD5jGYQ.mjs');
                 this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                 break;
             }
@@ -21305,12 +21405,12 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.PASSWORD: {
-                const { PasswordInputComponent } = await import('./magmonium-one-password-DCpAXJIf.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-BGGcDB4H.mjs');
+                const { OtpInputComponent } = await import('./magmonium-one-otp-OeNODjrN.mjs');
                 this.createDynamicComponent(seq, OtpInputComponent);
                 break;
             }
@@ -23017,7 +23117,7 @@ class FileUploadInputComponent extends BaseInputComponent {
         const modalStore = this.modalStore;
         if (!modalStore)
             return undefined;
-        const { ImageEditorComponent } = await import('./magmonium-one-image-editor-BBxyHfY_.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();
@@ -29899,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,
@@ -29917,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 {
@@ -35379,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,
@@ -36741,4 +36841,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 
 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-CzCUYYvz.mjs.map
+//# sourceMappingURL=magmonium-one-magmonium-one-CORH8s0K.mjs.map