@mk-kit/ui 0.39.0 → 0.41.0

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

@@ -1310,6 +1310,8 @@ class MkNavGroup {
     ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     /** Id of the items region (for `aria-controls`). */
     regionId = mkUniqueId('mk-nav-group');
+    /** Id of the header, used to name the nested item list. */
+    headerId = `${this.regionId}-label`;
     /** Whether the enclosing list is a collapsed icon rail. */
     railCollapsed = computed(() => this.list?.collapsed() ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "railCollapsed" }] : /* istanbul ignore next */ []));
@@ -1321,17 +1323,19 @@ class MkNavGroup {
             this.expanded.update((v) => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNavGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkNavGroup, isStandalone: true, selector: "mk-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label() || null", "class.mk-nav-group--collapsed-rail": "railCollapsed()", "class.mk-nav-group--closed": "collapsible() && !expanded()" }, classAttribute: "mk-nav-group" }, ngImport: i0, template: "@if (collapsible() && !railCollapsed()) {\n  <button\n    type=\"button\"\n    class=\"mk-nav-group__header mk-nav-group__header--toggle\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"regionId\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"mk-nav-group__label\">{{ label() }}</span>\n    <span class=\"mk-nav-group__chevron\" aria-hidden=\"true\"></span>\n  </button>\n} @else if (!railCollapsed()) {\n  <p class=\"mk-nav-group__header\">\n    <span class=\"mk-nav-group__label\">{{ label() }}</span>\n  </p>\n}\n\n<div\n  class=\"mk-nav-group__items\"\n  [id]=\"regionId\"\n  [attr.hidden]=\"itemsVisible() ? null : ''\"\n>\n  <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host+:host{margin-top:var(--mk-space-3)}.mk-nav-group__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-2);width:100%;margin:0;padding:var(--mk-space-1) var(--mk-space-3);background:transparent;border:0;color:var(--mk-text-subtle);font-family:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase}.mk-nav-group__header--toggle{cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-nav-group__header--toggle:hover{color:var(--mk-text-muted);background-color:var(--mk-hover-overlay)}.mk-nav-group__header--toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-nav-group__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-nav-group__chevron{flex:none;width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-nav-group--closed) .mk-nav-group__chevron{transform:rotate(-45deg)}:host(.mk-nav-group--closed:dir(rtl)) .mk-nav-group__chevron{transform:rotate(135deg)}.mk-nav-group__items{display:flex;flex-direction:column;gap:2px}.mk-nav-group__items[hidden]{display:none}:host(.mk-nav-group--collapsed-rail)+:host(.mk-nav-group--collapsed-rail){margin-top:var(--mk-space-2);padding-top:var(--mk-space-2);border-top:var(--mk-border-width) solid var(--mk-border-subtle)}@media(prefers-reduced-motion:reduce){.mk-nav-group__chevron{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkNavGroup, isStandalone: true, selector: "mk-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { attributes: { "role": "listitem" }, properties: { "class.mk-nav-group--collapsed-rail": "railCollapsed()", "class.mk-nav-group--closed": "collapsible() && !expanded()" }, classAttribute: "mk-nav-group" }, ngImport: i0, template: "@if (collapsible() && !railCollapsed()) {\n  <button\n    type=\"button\"\n    class=\"mk-nav-group__header mk-nav-group__header--toggle\"\n    [id]=\"headerId\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"regionId\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"mk-nav-group__label\">{{ label() }}</span>\n    <span class=\"mk-nav-group__chevron\" aria-hidden=\"true\"></span>\n  </button>\n} @else if (!railCollapsed()) {\n  <p class=\"mk-nav-group__header\" [id]=\"headerId\">\n    <span class=\"mk-nav-group__label\">{{ label() }}</span>\n  </p>\n}\n\n<div\n  class=\"mk-nav-group__items\"\n  role=\"list\"\n  [id]=\"regionId\"\n  [attr.aria-labelledby]=\"railCollapsed() ? null : headerId\"\n  [attr.aria-label]=\"railCollapsed() ? label() || null : null\"\n  [attr.hidden]=\"itemsVisible() ? null : ''\"\n>\n  <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host+:host{margin-top:var(--mk-space-3)}.mk-nav-group__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-2);width:100%;margin:0;padding:var(--mk-space-1) var(--mk-space-3);background:transparent;border:0;color:var(--mk-text-subtle);font-family:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase}.mk-nav-group__header--toggle{cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-nav-group__header--toggle:hover{color:var(--mk-text-muted);background-color:var(--mk-hover-overlay)}.mk-nav-group__header--toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-nav-group__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-nav-group__chevron{flex:none;width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-nav-group--closed) .mk-nav-group__chevron{transform:rotate(-45deg)}:host(.mk-nav-group--closed:dir(rtl)) .mk-nav-group__chevron{transform:rotate(135deg)}.mk-nav-group__items{display:flex;flex-direction:column;gap:2px}.mk-nav-group__items[hidden]{display:none}:host(.mk-nav-group--collapsed-rail)+:host(.mk-nav-group--collapsed-rail){margin-top:var(--mk-space-2);padding-top:var(--mk-space-2);border-top:var(--mk-border-width) solid var(--mk-border-subtle)}@media(prefers-reduced-motion:reduce){.mk-nav-group__chevron{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNavGroup, decorators: [{
             type: Component,
             args: [{ selector: 'mk-nav-group', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'mk-nav-group',
-                        role: 'group',
-                        '[attr.aria-label]': 'label() || null',
+                        // The group is an item of the enclosing `role="list"`; its own items form a
+                        // nested list below (see the template). Anything else breaks the ARIA
+                        // list → listitem contract for both the outer list and the items.
+                        role: 'listitem',
                         '[class.mk-nav-group--collapsed-rail]': 'railCollapsed()',
                         '[class.mk-nav-group--closed]': 'collapsible() && !expanded()',
-                    }, template: "@if (collapsible() && !railCollapsed()) {\n  <button\n    type=\"button\"\n    class=\"mk-nav-group__header mk-nav-group__header--toggle\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"regionId\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"mk-nav-group__label\">{{ label() }}</span>\n    <span class=\"mk-nav-group__chevron\" aria-hidden=\"true\"></span>\n  </button>\n} @else if (!railCollapsed()) {\n  <p class=\"mk-nav-group__header\">\n    <span class=\"mk-nav-group__label\">{{ label() }}</span>\n  </p>\n}\n\n<div\n  class=\"mk-nav-group__items\"\n  [id]=\"regionId\"\n  [attr.hidden]=\"itemsVisible() ? null : ''\"\n>\n  <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host+:host{margin-top:var(--mk-space-3)}.mk-nav-group__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-2);width:100%;margin:0;padding:var(--mk-space-1) var(--mk-space-3);background:transparent;border:0;color:var(--mk-text-subtle);font-family:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase}.mk-nav-group__header--toggle{cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-nav-group__header--toggle:hover{color:var(--mk-text-muted);background-color:var(--mk-hover-overlay)}.mk-nav-group__header--toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-nav-group__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-nav-group__chevron{flex:none;width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-nav-group--closed) .mk-nav-group__chevron{transform:rotate(-45deg)}:host(.mk-nav-group--closed:dir(rtl)) .mk-nav-group__chevron{transform:rotate(135deg)}.mk-nav-group__items{display:flex;flex-direction:column;gap:2px}.mk-nav-group__items[hidden]{display:none}:host(.mk-nav-group--collapsed-rail)+:host(.mk-nav-group--collapsed-rail){margin-top:var(--mk-space-2);padding-top:var(--mk-space-2);border-top:var(--mk-border-width) solid var(--mk-border-subtle)}@media(prefers-reduced-motion:reduce){.mk-nav-group__chevron{transition:none}}\n"] }]
+                    }, template: "@if (collapsible() && !railCollapsed()) {\n  <button\n    type=\"button\"\n    class=\"mk-nav-group__header mk-nav-group__header--toggle\"\n    [id]=\"headerId\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"regionId\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"mk-nav-group__label\">{{ label() }}</span>\n    <span class=\"mk-nav-group__chevron\" aria-hidden=\"true\"></span>\n  </button>\n} @else if (!railCollapsed()) {\n  <p class=\"mk-nav-group__header\" [id]=\"headerId\">\n    <span class=\"mk-nav-group__label\">{{ label() }}</span>\n  </p>\n}\n\n<div\n  class=\"mk-nav-group__items\"\n  role=\"list\"\n  [id]=\"regionId\"\n  [attr.aria-labelledby]=\"railCollapsed() ? null : headerId\"\n  [attr.aria-label]=\"railCollapsed() ? label() || null : null\"\n  [attr.hidden]=\"itemsVisible() ? null : ''\"\n>\n  <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host+:host{margin-top:var(--mk-space-3)}.mk-nav-group__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-2);width:100%;margin:0;padding:var(--mk-space-1) var(--mk-space-3);background:transparent;border:0;color:var(--mk-text-subtle);font-family:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase}.mk-nav-group__header--toggle{cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-nav-group__header--toggle:hover{color:var(--mk-text-muted);background-color:var(--mk-hover-overlay)}.mk-nav-group__header--toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-nav-group__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-nav-group__chevron{flex:none;width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-nav-group--closed) .mk-nav-group__chevron{transform:rotate(-45deg)}:host(.mk-nav-group--closed:dir(rtl)) .mk-nav-group__chevron{transform:rotate(135deg)}.mk-nav-group__items{display:flex;flex-direction:column;gap:2px}.mk-nav-group__items[hidden]{display:none}:host(.mk-nav-group--collapsed-rail)+:host(.mk-nav-group--collapsed-rail){margin-top:var(--mk-space-2);padding-top:var(--mk-space-2);border-top:var(--mk-border-width) solid var(--mk-border-subtle)}@media(prefers-reduced-motion:reduce){.mk-nav-group__chevron{transition:none}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
 
 /**