@ojiepermana/angular-navigation 22.0.41 → 22.0.43

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -391,7 +391,7 @@ class NavigationItemContentComponent {
     ...(ngDevMode ? [{ debugName: "subtitleClasses" }] : /* istanbul ignore next */ []));
     compactFallbackClasses = computed(() => cn('inline-flex h-5 min-w-5 items-center justify-center text-xs font-semibold uppercase'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "compactFallbackClasses" }] : /* istanbul ignore next */ []));
-    defaultBadgeClasses = computed(() => cn('ml-auto inline-flex h-5 shrink-0 items-center rounded-full px-2 text-xs font-medium', this.active() ? 'bg-background text-foreground' : 'bg-muted text-muted-foreground'), /* @ts-ignore */
+    defaultBadgeClasses = computed(() => cn('nav-badge ml-auto inline-flex h-5 shrink-0 items-center rounded-full px-2', this.active() ? 'bg-background text-foreground' : 'bg-muted text-muted-foreground'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "defaultBadgeClasses" }] : /* istanbul ignore next */ []));
     defaultIconSize = computed(() => (this.usesStraightVerticalSurface() ? 18 : 16), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "defaultIconSize" }] : /* istanbul ignore next */ []));
@@ -594,10 +594,10 @@ class NavigationItemComponent {
         this.nav.closeDrawer(this.navId());
     }
     leafClasses(active) {
-        return cn('NavigationItem group/nav inline-flex min-w-0 items-center rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.orientation() === 'horizontal' && this.level() === 0 ? 'h-9 px-3 py-2' : 'w-full px-3 py-1.5 text-left', this.orientation() === 'horizontal' && this.level() === 0 ? 'gap-3' : 'gap-1.5', this.compact() && 'h-10 w-10 justify-center gap-0 px-0 text-center', this.interactiveStateClasses(active), this.item().disabled && 'pointer-events-none opacity-50', this.item().classes?.wrapper, this.itemClass());
+        return cn('NavigationItem nav-text group/nav inline-flex min-w-0 items-center rounded-md font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.orientation() === 'horizontal' && this.level() === 0 ? 'h-9 px-3 py-2' : 'w-full px-3 py-1.5 text-left', this.orientation() === 'horizontal' && this.level() === 0 ? 'gap-3' : 'gap-1.5', this.compact() && 'h-10 w-10 justify-center gap-0 px-0 text-center', this.interactiveStateClasses(active), this.item().disabled && 'pointer-events-none opacity-50', this.item().classes?.wrapper, this.itemClass());
     }
     triggerClasses(active) {
-        return cn('nav-trigger group/nav inline-flex min-w-0 items-center rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.orientation() === 'horizontal' && this.level() === 0 ? 'h-9 px-3 py-2' : 'w-full px-3 py-1.5 text-left', this.orientation() === 'horizontal' && this.level() === 0 ? 'gap-3' : 'gap-1.5', this.compact() && 'h-10 w-10 justify-center gap-0 px-0 text-center', this.interactiveStateClasses(active), this.item().classes?.wrapper, this.itemClass());
+        return cn('nav-trigger nav-text group/nav inline-flex min-w-0 items-center rounded-md font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.orientation() === 'horizontal' && this.level() === 0 ? 'h-9 px-3 py-2' : 'w-full px-3 py-1.5 text-left', this.orientation() === 'horizontal' && this.level() === 0 ? 'gap-3' : 'gap-1.5', this.compact() && 'h-10 w-10 justify-center gap-0 px-0 text-center', this.interactiveStateClasses(active), this.item().classes?.wrapper, this.itemClass());
     }
     interactiveStateClasses(active) {
         const showsNestedActiveConnector = active &&
@@ -626,7 +626,7 @@ class NavigationItemComponent {
         return cn(this.orientation() === 'horizontal' && this.level() === 0 ? 'mx-1 h-5 w-px' : 'my-2 w-full px-2');
     }
     groupHeadingClasses() {
-        return cn('px-3 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground', this.item().classes?.title);
+        return cn('nav-heading px-3 py-2 text-muted-foreground', this.item().classes?.title);
     }
     childListClasses() {
         const isGroupedBranch = this.item().type === 'group' || this.item().type === 'mega';
@@ -1245,7 +1245,7 @@ class NavigationDockbarMenuComponent {
         return this.nav.isItemActive(entry, this.activeIds(), this.activeUrl());
     }
     triggerClasses(entry) {
-        return cn('group/nav inline-flex h-10 w-10 items-center justify-center rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.isGroupOpen(entry)
+        return cn('nav-text group/nav inline-flex h-10 w-10 items-center justify-center rounded-md font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.isGroupOpen(entry)
             ? 'bg-accent text-accent-foreground'
             : this.isGroupActive(entry)
                 ? 'font-semibold text-foreground'
@@ -1632,7 +1632,7 @@ class NavigationEntryGridComponent {
         return cn('m-0 grid list-none grid-cols-1 gap-1 p-0', columns >= 2 && 'sm:grid-cols-2', columns >= 3 && 'md:grid-cols-3', columns >= 4 && 'lg:grid-cols-4');
     }
     entryClasses(item, active) {
-        return cn('group/nav flex w-full items-center gap-3 px-3 py-2.5 text-left text-sm transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.isBorderRail()
+        return cn('group/nav nav-text flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.isBorderRail()
             ? cn('rounded-none', active ? 'text-primary' : 'text-foreground hover:text-primary')
             : cn('rounded-lg', active
                 ? 'bg-accent text-accent-foreground'
@@ -1649,7 +1649,7 @@ class NavigationEntryGridComponent {
         return cn('text-current', item.classes?.icon);
     }
     entryTitleClasses(item, active) {
-        return cn('block truncate text-sm font-medium', this.isBorderRail() ? 'text-current' : 'text-foreground', active && 'font-semibold', item.classes?.title);
+        return cn('block truncate font-medium', this.isBorderRail() ? 'text-current' : 'text-foreground', active && 'font-semibold', item.classes?.title);
     }
     entrySubtitleClasses(item) {
         return cn('mt-0.5 block truncate text-xs text-muted-foreground', item.classes?.subtitle);
@@ -1838,7 +1838,7 @@ class NavigationEntryGridComponent {
         <span
           [class]="
             badge.classes ??
-            'inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-xs font-medium text-muted-foreground'
+            'nav-badge inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-muted-foreground'
           "
           >{{ badge.title }}</span
         >
@@ -2027,7 +2027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
         <span
           [class]="
             badge.classes ??
-            'inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-xs font-medium text-muted-foreground'
+            'nav-badge inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-muted-foreground'
           "
           >{{ badge.title }}</span
         >
@@ -2261,17 +2261,17 @@ class NavigationFlyoutMenuComponent {
         const iconOnly = this.showIconOnly();
         const base = 'nav-trigger group/nav inline-flex min-w-0 items-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
         if (this.variant() === 'link') {
-            return cn(base, 'text-sm underline-offset-4 hover:underline', 
+            return cn(base, 'nav-text underline-offset-4 hover:underline', 
             // Icon-only tetap punya target ≥ 36px (WCAG 2.5.8) walau tanpa chrome tautan.
             iconOnly ? 'h-9 w-9 justify-center gap-0' : 'gap-1.5', this.isOpen() ? 'text-primary underline' : 'text-primary/90 hover:text-primary', this.itemClass());
         }
         if (this.variant() === 'plain') {
-            return cn(base, 'gap-2 rounded-md text-sm', iconOnly ? 'h-9 w-9 justify-center' : 'h-9 px-3 py-2', this.isOpen()
+            return cn(base, 'gap-2 rounded-md nav-text', iconOnly ? 'h-9 w-9 justify-center' : 'h-9 px-3 py-2', this.isOpen()
                 ? 'bg-accent text-accent-foreground'
                 : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', this.itemClass());
         }
         // button (pil, default)
-        return cn(base, 'h-10 gap-2 rounded-full border border-[hsl(var(--border)/var(--opacity-60))] bg-background px-4 py-2 text-sm shadow-sm', iconOnly && 'w-10 justify-center gap-0 px-0', this.isBorderRail()
+        return cn(base, 'h-10 gap-2 rounded-full border border-[hsl(var(--border)/var(--opacity-60))] bg-background px-4 py-2 nav-text shadow-sm', iconOnly && 'w-10 justify-center gap-0 px-0', this.isBorderRail()
             ? this.isOpen()
                 ? 'text-primary'
                 : 'text-foreground/80 hover:text-primary'
@@ -2317,7 +2317,7 @@ class NavigationFlyoutMenuComponent {
         // `-my-2 self-stretch` untuk membatalkan `py-2` row; tombol `h-full` mengisi penuh
         // sehingga sisinya rata dengan border row — sudut pada sisi border dibuat siku
         // agar menyambung (bawah di mode top, atas di mode bottom).
-        'nav-trigger group/nav inline-flex h-full min-h-9 min-w-0 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors', this.isBottom() ? 'rounded-t-none' : 'rounded-b-none', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.isBorderRail()
+        'nav-trigger nav-text group/nav inline-flex h-full min-h-9 min-w-0 items-center gap-2 rounded-md px-3 font-medium transition-colors', this.isBottom() ? 'rounded-t-none' : 'rounded-b-none', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.isBorderRail()
             ? this.isBranchOpen(item) || this.isItemActive(item)
                 ? 'rounded-none text-primary'
                 : 'rounded-none text-foreground/80 hover:text-primary'
@@ -2769,7 +2769,7 @@ class NavigationHorizontalComponent {
         return cn(this.groupClass(), item.classes?.container);
     }
     triggerClasses(item) {
-        return cn('nav-trigger group/nav inline-flex min-w-0 items-center gap-3 rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', 'h-9 px-3 py-2', this.compact() && 'w-10 justify-center px-0', this.isBorderRail()
+        return cn('nav-trigger nav-text group/nav inline-flex min-w-0 items-center gap-3 rounded-md font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', 'h-9 px-3 py-2', this.compact() && 'w-10 justify-center px-0', this.isBorderRail()
             ? this.isPanelOpen(item) || this.isItemActive(item)
                 ? 'rounded-none text-primary'
                 : 'rounded-none text-foreground/80 hover:text-primary'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-navigation",
-  "version": "22.0.41",
+  "version": "22.0.43",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"
@@ -13,7 +13,7 @@
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
     "@angular/router": ">=22.0.0",
-    "@ojiepermana/angular-component": "^22.0.41",
+    "@ojiepermana/angular-component": "^22.0.43",
     "rxjs": ">=7.8.0"
   },
   "dependencies": {