@mk-kit/ui 0.34.1 → 0.36.0

package/fesm2022/mk-kit-ui-feedback.mjs

@@ -433,7 +433,7 @@ class MkPopover {
         this.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkPopover, isStandalone: true, selector: "mk-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "mk-popover" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], exportAs: ["mkPopover"], ngImport: i0, template: "@if (opened()) {\n  <div\n    #panel\n    class=\"mk-popover__panel\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"ariaLabel()\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [placement]=\"placement()\"\n    [gap]=\"8\"\n    (dismiss)=\"close(false)\"\n    (keydown.escape)=\"onEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.mk-popover__panel{min-width:12rem;max-width:min(22rem,100vw - var(--mk-space-4));padding:var(--mk-space-3) var(--mk-space-4);color:var(--mk-text);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);animation:mk-popover-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-popover__panel:focus-visible{outline:none}@keyframes mk-popover-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-popover__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkPopover, isStandalone: true, selector: "mk-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "mk-popover" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], exportAs: ["mkPopover"], ngImport: i0, template: "@if (opened()) {\n  <div\n    #panel\n    class=\"mk-popover__panel\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"ariaLabel()\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [placement]=\"placement()\"\n    [gap]=\"8\"\n    (dismiss)=\"close(false)\"\n    (keydown.escape)=\"onEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.mk-popover__panel{min-width:12rem;max-width:min(22rem,100vw - var(--mk-space-4));padding:var(--mk-space-3) var(--mk-space-4);color:var(--mk-text);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);animation:mk-popover-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-popover__panel:focus-visible{outline:none}@keyframes mk-popover-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-popover__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPopover, decorators: [{
             type: Component,
@@ -846,7 +846,7 @@ class MkHovercard {
         this.clearCloseTimer();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHovercard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkHovercard, isStandalone: true, selector: "mk-hovercard", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "mk-hovercard" }, exportAs: ["mkHovercard"], ngImport: i0, template: "@if (opened()) {\n  <div\n    #panel\n    class=\"mk-hovercard__panel\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"ariaLabel()\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [placement]=\"placement()\"\n    [gap]=\"8\"\n    (dismiss)=\"close()\"\n    (mouseenter)=\"onCardEnter()\"\n    (mouseleave)=\"onCardLeave()\"\n    (focusin)=\"onCardEnter()\"\n    (focusout)=\"onCardFocusout($event)\"\n    (keydown.escape)=\"onEscape($event)\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.mk-hovercard__panel{pointer-events:auto;min-width:16rem;max-width:min(24rem,100vw - var(--mk-space-4));padding:var(--mk-space-4);color:var(--mk-text);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);animation:mk-hovercard-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-hovercard__panel:focus-visible{outline:none}@keyframes mk-hovercard-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-hovercard__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkHovercard, isStandalone: true, selector: "mk-hovercard", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "mk-hovercard" }, exportAs: ["mkHovercard"], ngImport: i0, template: "@if (opened()) {\n  <div\n    #panel\n    class=\"mk-hovercard__panel\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"ariaLabel()\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [placement]=\"placement()\"\n    [gap]=\"8\"\n    (dismiss)=\"close()\"\n    (mouseenter)=\"onCardEnter()\"\n    (mouseleave)=\"onCardLeave()\"\n    (focusin)=\"onCardEnter()\"\n    (focusout)=\"onCardFocusout($event)\"\n    (keydown.escape)=\"onEscape($event)\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.mk-hovercard__panel{pointer-events:auto;min-width:16rem;max-width:min(24rem,100vw - var(--mk-space-4));padding:var(--mk-space-4);color:var(--mk-text);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);animation:mk-hovercard-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-hovercard__panel:focus-visible{outline:none}@keyframes mk-hovercard-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-hovercard__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHovercard, decorators: [{
             type: Component,
@@ -1068,7 +1068,7 @@ class MkNotificationCenter {
         (mkGetFocusable(panel)[0] ?? panel).focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNotificationCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkNotificationCenter, isStandalone: true, selector: "mk-notification-center", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, panelTitle: { classPropertyName: "panelTitle", publicName: "panelTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notifications: "notificationsChange", itemClick: "itemClick", read: "read", markedAllRead: "markedAllRead" }, host: { classAttribute: "mk-notification-center" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-notification-center__trigger\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"open() ? panelId : null\"\n  [attr.aria-label]=\"triggerLabel()\"\n  (click)=\"toggle()\"\n>\n  <mk-icon name=\"bell\" />\n  @if (unreadCount() > 0) {\n    <mk-badge\n      class=\"mk-notification-center__count\"\n      tone=\"danger\"\n      variant=\"solid\"\n      size=\"sm\"\n      aria-hidden=\"true\"\n    >\n      {{ badgeText() }}\n    </mk-badge>\n  }\n</button>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-notification-center__panel\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-labelledby]=\"titleId\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"trigger\"\n    placement=\"bottom-end\"\n    [gap]=\"8\"\n    (dismiss)=\"close(false)\"\n    (keydown.escape)=\"onEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <header class=\"mk-notification-center__header\">\n      <h2 [id]=\"titleId\" class=\"mk-notification-center__title\">\n        {{ panelTitle() }}\n      </h2>\n      <!--\n        aria-disabled (not [disabled]) so the button stays focusable when it\n        disables itself after activation; markAllRead() guards the no-op case.\n      -->\n      <button\n        type=\"button\"\n        class=\"mk-notification-center__mark-all\"\n        [attr.aria-disabled]=\"unreadCount() === 0\"\n        (click)=\"markAllRead()\"\n      >\n        {{ i18n.markAllRead }}\n      </button>\n    </header>\n\n    @if (notifications().length > 0) {\n      <ul\n        class=\"mk-notification-center__list\"\n        [style.max-height]=\"maxHeight()\"\n      >\n        @for (item of notifications(); track item.id) {\n          <li>\n            <button\n              type=\"button\"\n              class=\"mk-notification-center__item\"\n              [class.mk-notification-center__item--unread]=\"!item.read\"\n              (click)=\"onRowClick(item)\"\n            >\n              <span\n                class=\"mk-notification-center__dot\"\n                aria-hidden=\"true\"\n              ></span>\n              @if (!item.read) {\n                <span class=\"mk-visually-hidden\">{{ i18n.unread }}</span>\n              }\n              <span class=\"mk-notification-center__body\">\n                <span class=\"mk-notification-center__item-title\">\n                  {{ item.title }}\n                </span>\n                @if (item.body) {\n                  <span class=\"mk-notification-center__item-text\">\n                    {{ item.body }}\n                  </span>\n                }\n                @if (item.time) {\n                  <span class=\"mk-notification-center__item-time\">\n                    {{ item.time }}\n                  </span>\n                }\n              </span>\n            </button>\n          </li>\n        }\n      </ul>\n    } @else {\n      <mk-empty-state\n        class=\"mk-notification-center__empty\"\n        icon=\"bell\"\n        size=\"sm\"\n        [title]=\"emptyText()\"\n      />\n    }\n  </div>\n}\n", styles: [":host{display:inline-block}.mk-notification-center__trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;font-family:var(--mk-font-sans);line-height:1}.mk-notification-center__trigger:hover{background:var(--mk-hover-overlay)}.mk-notification-center__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-notification-center__count{position:absolute;top:.125rem;inset-inline-end:.125rem;pointer-events:none;transform:translate(35%,-35%)}.mk-notification-center__count:dir(rtl){transform:translate(-35%,-35%)}.mk-notification-center__panel{display:flex;flex-direction:column;width:min(22rem,100vw - var(--mk-space-4));color:var(--mk-text);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);overflow:hidden;animation:mk-notification-center-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-notification-center__panel:focus-visible{outline:none}.mk-notification-center__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-notification-center__title{margin:0;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug)}.mk-notification-center__mark-all{padding:0;color:var(--mk-primary);background:transparent;border:none;cursor:pointer;font:inherit;font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-notification-center__mark-all:hover:not([aria-disabled=true]){text-decoration:underline}.mk-notification-center__mark-all:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-sm)}.mk-notification-center__mark-all[aria-disabled=true]{color:var(--mk-text-muted);cursor:default}.mk-notification-center__list{margin:0;padding:0;list-style:none;overflow-y:auto}.mk-notification-center__list li+li{border-top:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-notification-center__item{display:flex;align-items:flex-start;gap:var(--mk-space-2);width:100%;padding:var(--mk-space-3) var(--mk-space-4);color:inherit;background:transparent;border:none;cursor:pointer;font:inherit;text-align:start}.mk-notification-center__item:hover{background:var(--mk-hover-overlay)}.mk-notification-center__item:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-notification-center__dot{flex:none;width:.5rem;height:.5rem;margin-top:.375rem;border-radius:var(--mk-radius-circle);background:transparent}.mk-notification-center__item--unread .mk-notification-center__dot{background:var(--mk-primary)}.mk-notification-center__body{display:flex;flex-direction:column;gap:var(--mk-space-1);min-width:0}.mk-notification-center__item-title{font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-notification-center__item--unread .mk-notification-center__item-title{font-weight:var(--mk-font-weight-semibold)}.mk-notification-center__item-text{font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-notification-center__item-time{font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}@keyframes mk-notification-center-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-notification-center__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }, { kind: "component", type: MkBadge, selector: "mk-badge", inputs: ["tone", "variant", "size", "dot"] }, { kind: "component", type: MkEmptyState, selector: "mk-empty-state", inputs: ["icon", "title", "description", "size"] }, { kind: "component", type: MkIcon, selector: "mk-icon", inputs: ["name", "size", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkNotificationCenter, isStandalone: true, selector: "mk-notification-center", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, panelTitle: { classPropertyName: "panelTitle", publicName: "panelTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notifications: "notificationsChange", itemClick: "itemClick", read: "read", markedAllRead: "markedAllRead" }, host: { classAttribute: "mk-notification-center" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-notification-center__trigger\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"open() ? panelId : null\"\n  [attr.aria-label]=\"triggerLabel()\"\n  (click)=\"toggle()\"\n>\n  <mk-icon name=\"bell\" />\n  @if (unreadCount() > 0) {\n    <mk-badge\n      class=\"mk-notification-center__count\"\n      tone=\"danger\"\n      variant=\"solid\"\n      size=\"sm\"\n      aria-hidden=\"true\"\n    >\n      {{ badgeText() }}\n    </mk-badge>\n  }\n</button>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-notification-center__panel\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-labelledby]=\"titleId\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"trigger\"\n    placement=\"bottom-end\"\n    [gap]=\"8\"\n    (dismiss)=\"close(false)\"\n    (keydown.escape)=\"onEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <header class=\"mk-notification-center__header\">\n      <h2 [id]=\"titleId\" class=\"mk-notification-center__title\">\n        {{ panelTitle() }}\n      </h2>\n      <!--\n        aria-disabled (not [disabled]) so the button stays focusable when it\n        disables itself after activation; markAllRead() guards the no-op case.\n      -->\n      <button\n        type=\"button\"\n        class=\"mk-notification-center__mark-all\"\n        [attr.aria-disabled]=\"unreadCount() === 0\"\n        (click)=\"markAllRead()\"\n      >\n        {{ i18n.markAllRead }}\n      </button>\n    </header>\n\n    @if (notifications().length > 0) {\n      <ul\n        class=\"mk-notification-center__list\"\n        [style.max-height]=\"maxHeight()\"\n      >\n        @for (item of notifications(); track item.id) {\n          <li>\n            <button\n              type=\"button\"\n              class=\"mk-notification-center__item\"\n              [class.mk-notification-center__item--unread]=\"!item.read\"\n              (click)=\"onRowClick(item)\"\n            >\n              <span\n                class=\"mk-notification-center__dot\"\n                aria-hidden=\"true\"\n              ></span>\n              @if (!item.read) {\n                <span class=\"mk-visually-hidden\">{{ i18n.unread }}</span>\n              }\n              <span class=\"mk-notification-center__body\">\n                <span class=\"mk-notification-center__item-title\">\n                  {{ item.title }}\n                </span>\n                @if (item.body) {\n                  <span class=\"mk-notification-center__item-text\">\n                    {{ item.body }}\n                  </span>\n                }\n                @if (item.time) {\n                  <span class=\"mk-notification-center__item-time\">\n                    {{ item.time }}\n                  </span>\n                }\n              </span>\n            </button>\n          </li>\n        }\n      </ul>\n    } @else {\n      <mk-empty-state\n        class=\"mk-notification-center__empty\"\n        icon=\"bell\"\n        size=\"sm\"\n        [title]=\"emptyText()\"\n      />\n    }\n  </div>\n}\n", styles: [":host{display:inline-block}.mk-notification-center__trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;font-family:var(--mk-font-sans);line-height:1}.mk-notification-center__trigger:hover{background:var(--mk-hover-overlay)}.mk-notification-center__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-notification-center__count{position:absolute;top:.125rem;inset-inline-end:.125rem;pointer-events:none;transform:translate(35%,-35%)}.mk-notification-center__count:dir(rtl){transform:translate(-35%,-35%)}.mk-notification-center__panel{display:flex;flex-direction:column;width:min(22rem,100vw - var(--mk-space-4));color:var(--mk-text);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);overflow:hidden;animation:mk-notification-center-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-notification-center__panel:focus-visible{outline:none}.mk-notification-center__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-notification-center__title{margin:0;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug)}.mk-notification-center__mark-all{padding:0;color:var(--mk-primary);background:transparent;border:none;cursor:pointer;font:inherit;font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-notification-center__mark-all:hover:not([aria-disabled=true]){text-decoration:underline}.mk-notification-center__mark-all:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-sm)}.mk-notification-center__mark-all[aria-disabled=true]{color:var(--mk-text-muted);cursor:default}.mk-notification-center__list{margin:0;padding:0;list-style:none;overflow-y:auto}.mk-notification-center__list li+li{border-top:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-notification-center__item{display:flex;align-items:flex-start;gap:var(--mk-space-2);width:100%;padding:var(--mk-space-3) var(--mk-space-4);color:inherit;background:transparent;border:none;cursor:pointer;font:inherit;text-align:start}.mk-notification-center__item:hover{background:var(--mk-hover-overlay)}.mk-notification-center__item:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-notification-center__dot{flex:none;width:.5rem;height:.5rem;margin-top:.375rem;border-radius:var(--mk-radius-circle);background:transparent}.mk-notification-center__item--unread .mk-notification-center__dot{background:var(--mk-primary)}.mk-notification-center__body{display:flex;flex-direction:column;gap:var(--mk-space-1);min-width:0}.mk-notification-center__item-title{font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-notification-center__item--unread .mk-notification-center__item-title{font-weight:var(--mk-font-weight-semibold)}.mk-notification-center__item-text{font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-notification-center__item-time{font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}@keyframes mk-notification-center-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-notification-center__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }, { kind: "component", type: MkBadge, selector: "mk-badge", inputs: ["tone", "variant", "size", "dot"] }, { kind: "component", type: MkEmptyState, selector: "mk-empty-state", inputs: ["icon", "title", "description", "size"] }, { kind: "component", type: MkIcon, selector: "mk-icon", inputs: ["name", "size", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNotificationCenter, decorators: [{
             type: Component,
@@ -2169,7 +2169,7 @@ class MkTourPopup {
         (mkGetFocusable(panel)[0] ?? panel).focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTourPopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTourPopup, isStandalone: true, selector: "mk-tour-popup", host: { classAttribute: "mk-tour" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #panel\n  class=\"mk-tour__popup\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  tabindex=\"-1\"\n  [attr.aria-label]=\"data.step.title ?? data.step.body\"\n  mkAnchoredPanel\n  [mkAnchoredPanelFor]=\"data.anchor\"\n  [placement]=\"data.step.placement ?? 'bottom'\"\n  [gap]=\"12\"\n  (dismiss)=\"onDismiss()\"\n  (keydown.escape)=\"onEscape($event)\"\n  (keydown.tab)=\"onTab($event)\"\n  (keydown.shift.tab)=\"onTab($event)\"\n>\n  @if (data.step.title; as title) {\n    <h3 class=\"mk-tour__title\">{{ title }}</h3>\n  }\n  <p class=\"mk-tour__body\">{{ data.step.body }}</p>\n\n  <div class=\"mk-tour__footer\">\n    <span class=\"mk-tour__indicator\">\n      {{ i18n.tourStepOf(data.index + 1, data.total) }}\n    </span>\n    <div class=\"mk-tour__actions\">\n      <button type=\"button\" class=\"mk-tour__btn mk-tour__btn--ghost\" (click)=\"skip()\">\n        {{ i18n.tourSkip }}\n      </button>\n      @if (data.index > 0) {\n        <button type=\"button\" class=\"mk-tour__btn\" (click)=\"prev()\">\n          {{ i18n.tourPrevious }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"mk-tour__btn mk-tour__btn--primary\"\n        (click)=\"next()\"\n      >\n        {{ isLast() ? i18n.tourDone : i18n.tourNext }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}.mk-tour__popup{box-sizing:border-box;width:min(20rem,100vw - var(--mk-space-4));padding:var(--mk-space-4);color:var(--mk-text);background:var(--mk-surface);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);animation:mk-tour-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-tour__popup:focus-visible{outline:none}.mk-tour__title{margin:0 0 var(--mk-space-2);font-size:var(--mk-font-size-lg);font-weight:600;line-height:1.3}.mk-tour__body{margin:0;color:var(--mk-text-muted);line-height:1.5}.mk-tour__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-3);margin-top:var(--mk-space-4)}.mk-tour__indicator{color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-tour__actions{display:flex;gap:var(--mk-space-2)}.mk-tour__btn{padding:var(--mk-space-1) var(--mk-space-3);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font:inherit;font-size:var(--mk-font-size-sm);cursor:pointer}.mk-tour__btn:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-tour__btn--ghost{color:var(--mk-text-muted);border-color:transparent}.mk-tour__btn--primary{color:var(--mk-primary-contrast);background:var(--mk-primary);border-color:var(--mk-primary)}@keyframes mk-tour-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-tour__popup{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTourPopup, isStandalone: true, selector: "mk-tour-popup", host: { classAttribute: "mk-tour" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #panel\n  class=\"mk-tour__popup\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  tabindex=\"-1\"\n  [attr.aria-label]=\"data.step.title ?? data.step.body\"\n  mkAnchoredPanel\n  [mkAnchoredPanelFor]=\"data.anchor\"\n  [placement]=\"data.step.placement ?? 'bottom'\"\n  [gap]=\"12\"\n  (dismiss)=\"onDismiss()\"\n  (keydown.escape)=\"onEscape($event)\"\n  (keydown.tab)=\"onTab($event)\"\n  (keydown.shift.tab)=\"onTab($event)\"\n>\n  @if (data.step.title; as title) {\n    <h3 class=\"mk-tour__title\">{{ title }}</h3>\n  }\n  <p class=\"mk-tour__body\">{{ data.step.body }}</p>\n\n  <div class=\"mk-tour__footer\">\n    <span class=\"mk-tour__indicator\">\n      {{ i18n.tourStepOf(data.index + 1, data.total) }}\n    </span>\n    <div class=\"mk-tour__actions\">\n      <button type=\"button\" class=\"mk-tour__btn mk-tour__btn--ghost\" (click)=\"skip()\">\n        {{ i18n.tourSkip }}\n      </button>\n      @if (data.index > 0) {\n        <button type=\"button\" class=\"mk-tour__btn\" (click)=\"prev()\">\n          {{ i18n.tourPrevious }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"mk-tour__btn mk-tour__btn--primary\"\n        (click)=\"next()\"\n      >\n        {{ isLast() ? i18n.tourDone : i18n.tourNext }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}.mk-tour__popup{box-sizing:border-box;width:min(20rem,100vw - var(--mk-space-4));padding:var(--mk-space-4);color:var(--mk-text);background:var(--mk-surface);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);animation:mk-tour-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-tour__popup:focus-visible{outline:none}.mk-tour__title{margin:0 0 var(--mk-space-2);font-size:var(--mk-font-size-lg);font-weight:600;line-height:1.3}.mk-tour__body{margin:0;color:var(--mk-text-muted);line-height:1.5}.mk-tour__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-3);margin-top:var(--mk-space-4)}.mk-tour__indicator{color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-tour__actions{display:flex;gap:var(--mk-space-2)}.mk-tour__btn{padding:var(--mk-space-1) var(--mk-space-3);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font:inherit;font-size:var(--mk-font-size-sm);cursor:pointer}.mk-tour__btn:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-tour__btn--ghost{color:var(--mk-text-muted);border-color:transparent}.mk-tour__btn--primary{color:var(--mk-primary-contrast);background:var(--mk-primary);border-color:var(--mk-primary)}@keyframes mk-tour-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-tour__popup{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTourPopup, decorators: [{
             type: Component,