ng-hub-ui-nav 22.4.0 → 22.6.0

package/fesm2022/ng-hub-ui-nav.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, Injectable, computed, inject, TemplateRef, Directive, input, ElementRef, output, NgZone, PLATFORM_ID, effect, ChangeDetectionStrategy, Component, ViewContainerRef, viewChildren, HostListener, contentChild } from '@angular/core';
+import { InjectionToken, signal, Injectable, computed, inject, TemplateRef, Directive, input, ElementRef, output, NgZone, PLATFORM_ID, effect, ChangeDetectionStrategy, Component, ViewContainerRef, viewChildren, contentChild } from '@angular/core';
 import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { RouterLink, Router, NavigationEnd } from '@angular/router';
 import { filter } from 'rxjs';
-import { HubOverflowTooltipDirective, OverlayService } from 'ng-hub-ui-utils';
+import { HubOverflowTooltipDirective, OverlayService, resolveHubAccent } from 'ng-hub-ui-utils';
 
 /**
  * Default configuration values for the `hub-nav` component.
@@ -1582,12 +1582,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             args: [{ selector: 'hub-nav-item-list', standalone: true, imports: [HubNavItemComponent, HubNavSeparatorComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'hub-nav-item-list',
                         '[class.hub-nav-item-list--force-accordion]': 'forceAccordionMode()',
-                        '[attr.role]': 'depth() === 0 ? "menubar" : "menu"'
+                        '[attr.role]': 'depth() === 0 ? "menubar" : "menu"',
+                        '(keydown)': 'onKeyDown($event)'
                     }, template: "@for (item of items(); track item.id) {\n\t@if (item.type === 'separator') {\n\t\t<hub-nav-separator />\n\t} @else {\n\t\t<div\n\t\t\t#itemWrapper\n\t\t\tclass=\"hub-nav-item-wrapper\"\n\t\t\t[class.hub-nav-item-wrapper--has-dropdown]=\"hasChildren(item)\"\n\t\t\t(mouseenter)=\"onItemMouseEnter(item)\"\n\t\t\t(mouseleave)=\"onItemMouseLeave(item)\"\n\t\t>\n\t\t\t<hub-nav-item\n\t\t\t\t[item]=\"item\"\n\t\t\t\t[depth]=\"depth()\"\n\t\t\t\t[isActive]=\"isItemActive(item)\"\n\t\t\t\t[isExpanded]=\"isExpanded(item)\"\n\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t(clicked)=\"onItemClick($event)\"\n\t\t\t\t(toggleDropdown)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\n\t\t\t<ng-template #overlayDropdownTemplate>\n\t\t\t\t<div class=\"hub-nav-dropdown\" role=\"menu\">\n\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t[items]=\"item.children ?? []\"\n\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\n\t\t\t<!-- Children: accordion (inline), flyout/dropdown (positioned), or panel (external) -->\n\t\t\t@if (hasChildren(item) && isExpanded(item) && getItemExpandMode(item) !== 'panel' && !shouldRenderDropdownInOverlay(item)) {\n\t\t\t\t@if (getItemExpandMode(item) === 'accordion') {\n\t\t\t\t\t<!-- Accordion: children expand inline with indentation -->\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-nav-accordion\"\n\t\t\t\t\t\trole=\"group\"\n\t\t\t\t\t\t[style.padding-left]=\"'var(--hub-nav-accordion-indent, 1rem)'\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t\t[items]=\"item.children!\"\n\t\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<!-- Flyout / Dropdown: positioned panel -->\n\t\t\t\t\t<div class=\"hub-nav-dropdown\" role=\"menu\">\n\t\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t\t[items]=\"item.children!\"\n\t\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);list-style:none;margin:0;padding:0}.hub-nav-item-wrapper{position:relative}.hub-nav-dropdown{position:absolute;z-index:var(--hub-nav-dropdown-zindex, 1000);min-width:var(--hub-nav-dropdown-min-width, 12rem);background-color:var(--hub-nav-dropdown-bg, #fff);color:var(--hub-nav-dropdown-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-dropdown-border-color, #dee2e6);border-radius:var(--hub-nav-dropdown-border-radius, .25rem);box-shadow:var(--hub-nav-dropdown-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));padding:var(--hub-nav-dropdown-padding-y, .5rem) 0}.hub-nav-accordion{overflow:hidden;animation:hubNavAccordionExpand var(--hub-nav-accordion-transition, .35s ease) forwards}@keyframes hubNavAccordionExpand{0%{max-height:0;opacity:0}to{max-height:100vh;opacity:1}}:host-context(.hub-nav--horizontal){flex-direction:row;align-items:center}:host-context(.hub-nav--horizontal)>.hub-nav-item-wrapper{flex:0 0 auto}:host-context(.hub-nav--horizontal) .hub-nav-item-wrapper>.hub-nav-dropdown{top:100%;left:0;margin-top:4px}:host-context(.hub-nav--horizontal) .hub-nav-dropdown .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-top:0;margin-left:4px}:host-context(.hub-nav--vertical) .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-left:4px}:host-context(.hub-nav--vertical) .hub-nav-dropdown .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-left:4px;margin-top:0}:host-context(.hub-nav-dropdown){flex-direction:column;align-items:stretch}:host-context(.hub-nav-accordion){flex-direction:column;align-items:stretch}:host(.hub-nav-item-list--force-accordion){width:100%;flex-direction:column;align-items:stretch;gap:var(--hub-nav-mobile-accordion-gap, .25rem)}:host(.hub-nav-item-list--force-accordion)>.hub-nav-item-wrapper{display:block;width:100%;flex:1 1 auto}:host(.hub-nav-item-list--force-accordion) .hub-nav-item-wrapper>.hub-nav-dropdown{position:static;top:auto;left:auto;margin:0;min-width:0;width:100%;box-shadow:none}:host(.hub-nav-item-list--force-accordion) .hub-nav-accordion{margin-block-start:var(--hub-nav-mobile-accordion-nested-spacing, .25rem)}@media(prefers-reduced-motion:reduce){.hub-nav-accordion{animation:none}}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], forceAccordionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceAccordionMode", required: false }] }], dropdownRenderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRenderMode", required: false }] }], overlayOwnerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOwnerClass", required: false }] }], overlayOrientationClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOrientationClass", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }], panelOpen: [{ type: i0.Output, args: ["panelOpen"] }], itemWrappers: [{ type: i0.ViewChildren, args: ['itemWrapper', { isSignal: true }] }], overlayTemplates: [{ type: i0.ViewChildren, args: ['overlayDropdownTemplate', { isSignal: true }] }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], forceAccordionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceAccordionMode", required: false }] }], dropdownRenderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRenderMode", required: false }] }], overlayOwnerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOwnerClass", required: false }] }], overlayOrientationClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOrientationClass", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }], panelOpen: [{ type: i0.Output, args: ["panelOpen"] }], itemWrappers: [{ type: i0.ViewChildren, args: ['itemWrapper', { isSignal: true }] }], overlayTemplates: [{ type: i0.ViewChildren, args: ['overlayDropdownTemplate', { isSignal: true }] }] } });
 
 /**
  * Renders a single side panel in the stacked panel navigation.
@@ -1741,12 +1739,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[style.width]': 'panelWidth()',
                         role: 'navigation',
                         '[attr.aria-label]': 'ariaLabel()',
-                        tabindex: '-1'
+                        tabindex: '-1',
+                        '(keydown)': 'onKeyDown($event)'
                     }, template: "@if (showHeader()) {\n\t<div class=\"hub-nav-panel__header\">\n\t\t@if (panel().isDrillDown) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-panel__back\"\n\t\t\t\taria-label=\"Go back\"\n\t\t\t\t(click)=\"onBackClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&#8592;</span>\n\t\t\t</button>\n\t\t}\n\t\t<span class=\"hub-nav-panel__title\">{{ currentLabel() }}</span>\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-nav-panel__close\"\n\t\t\taria-label=\"Close panel\"\n\t\t\t(click)=\"onCloseClick()\"\n\t\t>\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n}\n\n<div class=\"hub-nav-panel__body\">\n\t<hub-nav-item-list\n\t\t[items]=\"panel().items\"\n\t\t[depth]=\"0\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t(itemClick)=\"onItemClick($event)\"\n\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t/>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-width:0;flex-shrink:0;position:relative;z-index:var(--hub-nav-panel-zindex, 1000);background:var(--hub-nav-panel-bg);color:var(--hub-nav-panel-color);border-inline-start:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-shadow);overflow:hidden}:host-context(.hub-nav--horizontal){width:100%!important;height:auto;min-height:0;flex-direction:row;border-inline-start:none;border-inline-end:none;border-top:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:none;animation:none}.hub-nav-panel__header{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);height:var(--hub-nav-panel-header-height);min-height:var(--hub-nav-panel-header-height);padding:0 var(--hub-nav-panel-header-padding-x);background:var(--hub-nav-panel-header-bg);border-bottom:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color);font-size:var(--hub-nav-panel-header-font-size);font-weight:var(--hub-nav-panel-header-font-weight)}:host-context(.hub-nav--horizontal) .hub-nav-panel__header{flex:0 0 var(--hub-nav-panel-width, 16rem);height:auto;min-height:0;max-height:none;border-bottom:none;border-inline-end:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}:host-context(.hub-nav--horizontal):host-context([dir=rtl]) .hub-nav-panel__header{order:2;border-inline-end:none;border-inline-start:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}.hub-nav-panel__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-nav-panel__back,.hub-nav-panel__close{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-panel-back-size);height:var(--hub-nav-panel-back-size);padding:0;border:none;border-radius:var(--hub-nav-item-border-radius, .25rem);background:none;color:var(--hub-nav-panel-back-color);font-size:var(--hub-ref-font-size-lg, 1.25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}.hub-nav-panel__back:hover,.hub-nav-panel__close:hover{background:var(--hub-nav-panel-back-hover-bg)}.hub-nav-panel__back:focus-visible,.hub-nav-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-panel__close{margin-inline-start:auto}.hub-nav-panel__body{flex:1;overflow-y:auto;overflow-x:hidden;padding-block:var(--hub-nav-vertical-panel-padding-block, 0);padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}.hub-nav-panel__body::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}.hub-nav-panel__body::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}.hub-nav-panel__body::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body{display:flex;align-items:center;justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body>hub-nav-item-list{flex:0 0 auto;width:max-content;min-width:max-content;margin-inline:auto}:host{animation:hubNavPanelEnter .3s ease forwards}@keyframes hubNavPanelEnter{0%{opacity:0;transform:translate(-1rem)}to{opacity:1;transform:translate(0)}}:host-context(.hub-nav-panel-container--right){border-inline-start:none;border-inline-end:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);animation-name:hubNavPanelEnterRight}@keyframes hubNavPanelEnterRight{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:hubNavPanelDrillDown .2s ease forwards}@keyframes hubNavPanelDrillDown{0%{opacity:0;transform:translate(.5rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:none}}\n"] }]
-        }], propDecorators: { panel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panel", required: true }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], dropdownRenderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRenderMode", required: false }] }], overlayOwnerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOwnerClass", required: false }] }], overlayOrientationClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOrientationClass", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }], backClick: [{ type: i0.Output, args: ["backClick"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }], panelOpen: [{ type: i0.Output, args: ["panelOpen"] }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+        }], propDecorators: { panel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panel", required: true }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], dropdownRenderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRenderMode", required: false }] }], overlayOwnerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOwnerClass", required: false }] }], overlayOrientationClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOrientationClass", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }], backClick: [{ type: i0.Output, args: ["backClick"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }], panelOpen: [{ type: i0.Output, args: ["panelOpen"] }] } });
 
 /**
  * Container that renders the stack of side panels in a horizontal flex layout.
@@ -1995,24 +1991,24 @@ class HubNavComponent {
     autoOpenFromRoute = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "autoOpenFromRoute" }] : /* istanbul ignore next */ []));
     /**
-     * Semantic accent applied to the hover/active affordances of the nav items.
-     * The built-in values (`primary` / `success` / `danger` / `warning` / `info`)
-     * render with the design-system tints; any other string is also accepted —
-     * the nav reads `--hub-sys-color-<variant>` from the host application, so a
-     * custom accent palette interconnects with no changes to this library.
+     * Accent applied to the hover/active affordances of the nav items. Accepts
+     * ANY colour: a semantic/built-in name (`primary` / `success` / `danger` /
+     * `warning` / `info`), a custom registered accent name, a CSS named colour,
+     * or a literal `#hex` / `rgb()` / `oklch()` / `var()`. Bareword names resolve
+     * to the design-system `--hub-sys-color-<variant>` token (falling back to the
+     * word itself as a raw colour); literals are passed through unchanged.
      * Defaults to `primary` when omitted.
      */
     variant = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /**
-     * Inline accent fed to the nav styles: `var(--hub-sys-color-<variant>)` for the
-     * active variant, or `null` to keep the `primary` default. Keeps the variant
-     * set open — any accent token the host app defines is picked up by name.
+     * Inline accent fed to the nav styles. A bareword (semantic name / registered
+     * accent / CSS named colour) resolves to `var(--hub-sys-color-<variant>, <variant>)`
+     * — the ds token with the word itself as a raw fallback — while a literal
+     * `#hex` / `rgb()` / `oklch()` / `var()` is passed through untouched. Returns
+     * `null` when no variant is set, keeping the `primary` default.
      */
-    groupAccent = computed(() => {
-        const variant = this.variant();
-        return variant ? `var(--hub-sys-color-${variant})` : null;
-    }, /* @ts-ignore */
+    groupAccent = computed(() => resolveHubAccent(this.variant()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "groupAccent" }] : /* istanbul ignore next */ []));
     /** Start slot template projected via `hubNavStart` directive. */
     startDirective = contentChild(HubNavStartDirective, /* @ts-ignore */