@aurorajs.dev/catalyst-cli 1.0.2 → 1.1.3

package/dist/templates/frontend/application/libs/ui/sheet/src/lib/hlm-sheet-overlay.ts

@@ -7,16 +7,13 @@ import type { ClassValue } from 'clsx';
 @Directive({
   selector: '[hlmSheetOverlay],hlm-sheet-overlay',
   hostDirectives: [BrnSheetOverlay],
-  host: {
-    '[class]': '_computedClass()',
-  },
 })
 export class HlmSheetOverlay {
   private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
   public readonly userClass = input<ClassValue>('', { alias: 'class' });
   protected readonly _computedClass = computed(() =>
     hlm(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/50',
+      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
       this.userClass(),
     ),
   );

package/dist/templates/frontend/application/libs/ui/sheet/src/lib/hlm-sheet-title.ts

@@ -5,12 +5,10 @@ import { classes } from '@spartan-ng/helm/utils';
 @Directive({
   selector: '[hlmSheetTitle]',
   hostDirectives: [BrnSheetTitle],
-  host: {
-    'data-slot': 'sheet-title',
-  },
+  host: { 'data-slot': 'sheet-title' },
 })
 export class HlmSheetTitle {
   constructor() {
-    classes(() => 'text-foreground font-semibold');
+    classes(() => 'text-foreground font-medium');
   }
 }

package/dist/templates/frontend/application/libs/ui/sheet/src/lib/hlm-sheet-trigger.ts

@@ -4,8 +4,6 @@ import { BrnSheetTrigger } from '@spartan-ng/brain/sheet';
 @Directive({
   selector: 'button[hlmSheetTrigger]',
   hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
-  host: {
-    'data-slot': 'sheet-trigger',
-  },
+  host: { 'data-slot': 'sheet-trigger' },
 })
 export class HlmSheetTrigger {}

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-content.ts

@@ -12,7 +12,7 @@ export class HlmSidebarContent {
   constructor() {
     classes(
       () =>
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        'no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden',
     );
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-footer.ts

@@ -10,6 +10,6 @@ import { classes } from '@spartan-ng/helm/utils';
 })
 export class HlmSidebarFooter {
   constructor() {
-    classes(() => 'flex flex-col gap-2 p-2');
+    classes(() => 'gap-2 p-2 flex flex-col');
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-group-action.ts

@@ -10,11 +10,9 @@ import { classes } from '@spartan-ng/helm/utils';
 })
 export class HlmSidebarGroupAction {
   constructor() {
-    classes(() => [
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none hover:cursor-pointer focus-visible:ring-2 disabled:hover:cursor-default [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0',
-      // Increases the hit area of the button on mobile.
-      'after:absolute after:-inset-2 after:md:hidden',
-      'group-data-[collapsible=icon]:hidden',
-    ]);
+    classes(
+      () =>
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 w-5 rounded-md p-0 focus-visible:ring-2 [&>ng-icon]:text-[length:--spacing(4)] flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>ng-icon]:shrink-0',
+    );
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-group-content.ts

@@ -10,6 +10,6 @@ import { classes } from '@spartan-ng/helm/utils';
 })
 export class HlmSidebarGroupContent {
   constructor() {
-    classes(() => 'w-full text-sm');
+    classes(() => 'text-sm w-full');
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-group-label.ts

@@ -10,9 +10,9 @@ import { classes } from '@spartan-ng/helm/utils';
 })
 export class HlmSidebarGroupLabel {
   constructor() {
-    classes(() => [
-      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opa] duration-200 ease-linear outline-none focus-visible:ring-2 [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0',
-      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-    ]);
+    classes(
+      () =>
+        'text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>ng-icon]:text-[length:--spacing(4)] flex shrink-0 items-center outline-hidden [&>ng-icon]:shrink-0',
+    );
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-group.ts

@@ -10,6 +10,6 @@ import { classes } from '@spartan-ng/helm/utils';
 })
 export class HlmSidebarGroup {
   constructor() {
-    classes(() => 'relative flex w-full min-w-0 flex-col p-2');
+    classes(() => 'p-2 relative flex w-full min-w-0 flex-col');
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-header.ts

@@ -10,6 +10,6 @@ import { classes } from '@spartan-ng/helm/utils';
 })
 export class HlmSidebarHeader {
   constructor() {
-    classes(() => 'flex flex-col gap-2 p-2');
+    classes(() => 'gap-2 p-2 flex flex-col');
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-input.ts

@@ -1,20 +1,17 @@
 import { Directive } from '@angular/core';
-import { HlmInput, inputVariants } from '@spartan-ng/helm/input';
+import { HlmInput } from '@spartan-ng/helm/input';
 import { classes } from '@spartan-ng/helm/utils';
 
 @Directive({
   selector: 'input[hlmSidebarInput]',
+  hostDirectives: [HlmInput],
   host: {
     'data-slot': 'sidebar-input',
     'data-sidebar': 'input',
   },
 })
-export class HlmSidebarInput extends HlmInput {
+export class HlmSidebarInput {
   constructor() {
-    super();
-    classes(() => [
-      inputVariants({ error: this._state().error }),
-      'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',
-    ]);
+    classes(() => 'bg-background h-8 w-full shadow-none');
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-inset.ts

@@ -3,15 +3,13 @@ import { classes } from '@spartan-ng/helm/utils';
 
 @Directive({
   selector: 'main[hlmSidebarInset]',
-  host: {
-    'data-slot': 'sidebar-inset',
-  },
+  host: { 'data-slot': 'sidebar-inset' },
 })
 export class HlmSidebarInset {
   constructor() {
-    classes(() => [
-      'bg-background relative flex w-full flex-1 flex-col',
-      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-    ]);
+    classes(
+      () =>
+        'bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 relative flex w-full flex-1 flex-col',
+    );
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-menu-action.ts

@@ -16,15 +16,9 @@ export class HlmSidebarMenuAction {
 
   constructor() {
     classes(() => [
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none hover:cursor-pointer focus-visible:ring-2 disabled:hover:cursor-default [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0',
-      // Increases the hit area of the button on mobile.
-      'after:absolute after:-inset-2 after:md:hidden',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>ng-icon]:text-[length:--spacing(4)] flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>ng-icon]:shrink-0',
       this.showOnHover() &&
-        'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        'peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0',
     ]);
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-menu-badge.ts

@@ -10,13 +10,9 @@ import { classes } from '@spartan-ng/helm/utils';
 })
 export class HlmSidebarMenuBadge {
   constructor() {
-    classes(() => [
-      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
-      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-    ]);
+    classes(
+      () =>
+        'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute end-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden',
+    );
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-menu-button.ts

@@ -16,18 +16,18 @@ import { HlmSidebarService } from './hlm-sidebar.service';
 import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center justify-start gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] outline-none group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 hover:cursor-pointer focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 disabled:hover:cursor-default aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0 group-data-[collapsible=icon]:[&>span]:hidden [&>span:last-child]:truncate',
+  'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-start text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_ng-icon]:shrink-0 [&_ng-icon]:text-[length:--spacing(4)] [&>span:last-child]:truncate',
   {
     variants: {
       variant: {
         default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
         outline:
-          'bg-background shadow-sidebar-border hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-sidebar-accent',
+          'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
       },
       size: {
         default: 'h-8 text-sm',
         sm: 'h-7 text-xs',
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
       },
     },
     defaultVariants: {

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-menu-skeleton.ts

@@ -10,7 +10,6 @@ import { classes } from '@spartan-ng/helm/utils';
   host: {
     'data-slot': 'sidebar-menu-skeleton',
     'data-sidebar': 'menu-skeleton',
-    '[style.--skeleton-width]': '_width',
   },
   template: `
     @if (showIcon()) {
@@ -20,7 +19,8 @@ import { classes } from '@spartan-ng/helm/utils';
       />
     } @else {
       <hlm-skeleton
-        class="h-4 max-w-[var(--skeleton-width)] flex-1"
+        class="h-4 max-w-(--skeleton-width) flex-1"
+        [style.--skeleton-width]="_width"
         data-sidebar="menu-skeleton-text"
       />
     }
@@ -31,6 +31,6 @@ export class HlmSidebarMenuSkeleton {
   protected readonly _width = `${Math.floor(Math.random() * 40) + 50}%`;
 
   constructor() {
-    classes(() => 'flex h-8 items-center gap-2 rounded-md px-2');
+    classes(() => 'h-8 gap-2 rounded-md px-2 flex items-center');
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-menu-sub-button.ts

@@ -25,13 +25,15 @@ export class HlmSidebarMenuSubButton {
 
   public readonly size = input<'sm' | 'md'>('md');
   public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
   constructor() {
-    classes(() => [
-      `text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>_ng-icon:not([class*='text-'])]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none hover:cursor-pointer focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 disabled:hover:cursor-default aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0 [&>span:last-child]:truncate`,
-      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-      'data-[size=md]:text-sm data-[size=sm]:text-xs',
-      'group-data-[collapsible=icon]:hidden',
-    ]);
+    /* #region customizations */
+    // Customization over h-7 to min-h-7 py-1, so that the menu item expands vertically.
+    classes(
+      () =>
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>ng-icon]:text-[length:--spacing(4)] flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>ng-icon]:shrink-0 [&>span:last-child]:truncate',
+    );
+    /* #endregion customizations */
   }
 
   protected onClick(): void {

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-menu-sub.ts

@@ -10,9 +10,13 @@ import { classes } from '@spartan-ng/helm/utils';
 })
 export class HlmSidebarMenuSub {
   constructor() {
-    classes(() => [
-      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-      'group-data-[collapsible=icon]:hidden',
-    ]);
+    /* #region customizations */
+    // Customization over mx-3.5 to ml-3.5, to provide more space for the text in the submenus.
+    // Customization over px-2.5 to pl-2.5, to provide more space for the text in the submenus.
+    classes(
+      () =>
+        'border-sidebar-border ml-3.5 translate-x-px gap-1 border-s pl-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px flex min-w-0 flex-col',
+    );
+    /* #endregion customizations */
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-menu.ts

@@ -10,6 +10,6 @@ import { classes } from '@spartan-ng/helm/utils';
 })
 export class HlmSidebarMenu {
   constructor() {
-    classes(() => 'flex w-full min-w-0 flex-col gap-1');
+    classes(() => 'gap-1 flex w-full min-w-0 flex-col');
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-rail.ts

@@ -19,8 +19,8 @@ export class HlmSidebarRail {
 
   constructor() {
     classes(() => [
-      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-      'group-data-[side=left]:cursor-w-resize group-data-[side=right]:cursor-e-resize',
+      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
+      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
       '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
       'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
       '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-separator.ts

@@ -4,7 +4,7 @@ import { classes } from '@spartan-ng/helm/utils';
 
 @Directive({
   selector: '[hlmSidebarSeparator],hlm-sidebar-separator',
-  hostDirectives: [{ directive: HlmSeparator }],
+  hostDirectives: [HlmSeparator],
   host: {
     'data-slot': 'sidebar-separator',
     'data-sidebar': 'separator',

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-trigger.ts

@@ -1,44 +1,33 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { provideIcons } from '@ng-icons/core';
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucidePanelLeft } from '@ng-icons/lucide';
 import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
-import { HlmIconImports } from '@spartan-ng/helm/icon';
 import { HlmSidebarService } from './hlm-sidebar.service';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'button[hlmSidebarTrigger]',
-  imports: [HlmIconImports],
+  imports: [NgIcon],
   providers: [
     provideIcons({ lucidePanelLeft }),
-    provideBrnButtonConfig({ variant: 'ghost', size: 'icon' }),
+    provideBrnButtonConfig({ variant: 'ghost', size: 'icon-sm' }),
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [
-    {
-      directive: HlmButton,
-    },
-  ],
+  hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
   host: {
     'data-slot': 'sidebar-trigger',
     'data-sidebar': 'trigger',
     '(click)': '_onClick()',
   },
   template: `
-    <ng-icon
-      name="lucidePanelLeft"
-      hlm
-      size="sm"
-    ></ng-icon>
+    <ng-icon name="lucidePanelLeft" />
+    <span class="sr-only">{{ srOnlyText() }}</span>
   `,
 })
 export class HlmSidebarTrigger {
-  private readonly _hlmBtn = inject(HlmButton);
   private readonly _sidebarService = inject(HlmSidebarService);
 
-  constructor() {
-    this._hlmBtn.setClass('size-7');
-  }
+  public readonly srOnlyText = input<string>('Toggle Sidebar');
 
   protected _onClick(): void {
     this._sidebarService.toggleSidebar();

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar-wrapper.ts

@@ -18,7 +18,7 @@ export class HlmSidebarWrapper {
 
   constructor() {
     classes(
-      () => 'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',
+      () => 'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
     );
   }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar.service.ts

@@ -1,3 +1,4 @@
+import { isPlatformServer } from '@angular/common';
 import {
   afterNextRender,
   computed,
@@ -5,6 +6,8 @@ import {
   DOCUMENT,
   inject,
   Injectable,
+  PLATFORM_ID,
+  REQUEST,
   type Signal,
   signal,
 } from '@angular/core';
@@ -14,10 +17,12 @@ export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
 
 @Injectable({ providedIn: 'root' })
 export class HlmSidebarService {
+  private readonly _platformId = inject(PLATFORM_ID);
+  private readonly _request = inject(REQUEST, { optional: true });
   private readonly _config = injectHlmSidebarConfig();
   private readonly _document = inject(DOCUMENT);
   private readonly _window = this._document.defaultView;
-  private readonly _open = signal<boolean>(true);
+  private readonly _open = signal<boolean>(this._config.defaultOpen);
   private readonly _openMobile = signal<boolean>(false);
   private readonly _isMobile = signal<boolean>(false);
   private readonly _variant = signal<SidebarVariant>('sidebar');
@@ -34,17 +39,10 @@ export class HlmSidebarService {
 
   constructor() {
     const destroyRef = inject(DestroyRef);
-    afterNextRender(() => {
-      if (!this._window) return;
-      // Initialize from cookie
-      const cookie = this._document.cookie
-        .split('; ')
-        .find((row) => row.startsWith(`${this._config.sidebarCookieName}=`));
+    this.restoreStateFromCookie();
 
-      if (cookie) {
-        const value = cookie.split('=')[1];
-        this._open.set(value === 'true');
-      }
+    afterNextRender(() => {
+      if (!this._window || typeof this._window.matchMedia !== 'function') return;
 
       // Initialize MediaQueryList
       this._mediaQuery = this._window.matchMedia(`(max-width: ${this._config.mobileBreakpoint})`);
@@ -116,4 +114,23 @@ export class HlmSidebarService {
       this.setOpen(!this._open());
     }
   }
+
+  private restoreStateFromCookie(): void {
+    const cookieString = isPlatformServer(this._platformId)
+      ? this._request?.headers.get('cookie')
+      : this._document.cookie;
+
+    if (!cookieString) return;
+
+    const prefix = `${this._config.sidebarCookieName}=`;
+    const cookieValue = cookieString
+      .split(';')
+      .map((c) => c.trim())
+      .find((c) => c.startsWith(prefix))
+      ?.slice(prefix.length);
+
+    if (cookieValue !== undefined) {
+      this._open.set(cookieValue === 'true');
+    }
+  }
 }

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar.token.ts

@@ -1,6 +1,7 @@
 import { inject, InjectionToken, type ValueProvider } from '@angular/core';
 
 export interface HlmSidebarConfig {
+  defaultOpen: boolean;
   sidebarWidth: string;
   sidebarWidthMobile: string;
   sidebarWidthIcon: string;
@@ -12,6 +13,7 @@ export interface HlmSidebarConfig {
 }
 
 const defaultConfig: HlmSidebarConfig = {
+  defaultOpen: true,
   sidebarWidth: '16rem',
   sidebarWidthMobile: '18rem',
   sidebarWidthIcon: '3rem',

package/dist/templates/frontend/application/libs/ui/sidebar/src/lib/hlm-sidebar.ts

@@ -32,7 +32,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
       >
         <hlm-sheet-content
           *hlmSheetPortal="let ctx"
-          class="bg-sidebar text-sidebar-foreground h-svh w-[var(--sidebar-width)] p-0 [&>button]:hidden"
+          class="bg-sidebar text-sidebar-foreground h-svh w-(--sidebar-width) p-0 [&>button]:hidden"
           [style.--sidebar-width]="sidebarWidthMobile()"
           data-slot="sidebar"
           data-sidebar="sidebar"
@@ -50,11 +50,12 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
         data-slot="sidebar-gap"
       ></div>
       <div
+        [attr.data-side]="_dataSide()"
         [class]="_sidebarContainerComputedClass()"
         data-slot="sidebar-container"
       >
         <div
-          class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+          class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
         >
@@ -75,25 +76,22 @@ export class HlmSidebar {
 
   protected readonly _sidebarGapComputedClass = computed(() =>
     hlm(
-      'relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear',
+      'transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent',
       'group-data-[collapsible=offcanvas]:w-0',
       'group-data-[side=right]:rotate-180',
       this.variant() === 'floating' || this.variant() === 'inset'
-        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
-        : 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]',
+        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
     ),
   );
 
   public readonly sidebarContainerClass = input<ClassValue>('');
   protected readonly _sidebarContainerComputedClass = computed(() =>
     hlm(
-      'fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex',
-      this.side() === 'left'
-        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+      'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',
       this.variant() === 'floating' || this.variant() === 'inset'
-        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-        : 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
       this.sidebarContainerClass(),
     ),
   );
@@ -133,13 +131,11 @@ export class HlmSidebar {
 
     classes(() => {
       if (this.collapsible() === 'none') {
-        return hlm(
-          'bg-sidebar text-sidebar-foreground flex h-svh w-[var(--sidebar-width)] flex-col',
-        );
+        return hlm('bg-sidebar text-sidebar-foreground flex h-svh w-(--sidebar-width) flex-col');
       } else if (this._sidebarService.isMobile()) {
         return '';
       } else {
-        return hlm('text-sidebar-foreground group peer hidden md:block');
+        return hlm('group peer text-sidebar-foreground hidden md:block');
       }
     });
   }

package/dist/templates/frontend/application/libs/ui/slider/src/lib/hlm-slider.ts

@@ -36,7 +36,7 @@ import { classes } from '@spartan-ng/helm/utils';
       class="relative flex w-full items-center group-data-vertical:w-auto group-data-vertical:flex-col"
     >
       <div
-        class="bg-muted relative grow overflow-hidden rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        class="bg-muted relative grow overflow-hidden rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5"
         brnSliderTrack
       >
         <div
@@ -47,7 +47,7 @@ import { classes } from '@spartan-ng/helm/utils';
 
       @for (i of _slider.thumbIndexes(); track i) {
         <span
-          class="border-ring ring-ring/50 absolute block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px]"
+          class="border-primary ring-ring/50 absolute block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden"
           brnSliderThumb
         ></span>
       }
@@ -55,7 +55,7 @@ import { classes } from '@spartan-ng/helm/utils';
 
     @if (_slider.showTicks()) {
       <div
-        class="text-muted-foreground mt-3 flex w-full items-start justify-between gap-1 px-1.5 text-xs font-medium group-data-horizontal:group-data-inverted:flex-row-reverse group-data-vertical:ms-3 group-data-vertical:mt-0 group-data-vertical:w-auto group-data-vertical:flex-col-reverse group-data-vertical:px-0 group-data-vertical:py-1.5 group-data-vertical:group-data-inverted:flex-col"
+        class="text-muted-foreground mt-3 flex w-full items-start justify-between gap-1 px-2 text-xs font-medium group-data-horizontal:group-data-inverted:flex-row-reverse group-data-vertical:ms-3 group-data-vertical:mt-0 group-data-vertical:w-auto group-data-vertical:flex-col-reverse group-data-vertical:px-0 group-data-vertical:py-2 group-data-vertical:group-data-inverted:flex-col"
       >
         <div
           *brnSliderTick="let tick; let formattedTick = formattedTick"

package/dist/templates/frontend/application/libs/ui/sonner/src/lib/hlm-toaster.ts

@@ -45,7 +45,7 @@ import type { ClassValue } from 'clsx';
       [duration]="duration()"
       [visibleToasts]="visibleToasts()"
       [closeButton]="closeButton()"
-      [toastOptions]="toastOptions()"
+      [toastOptions]="_computedToastOptions()"
       [offset]="offset()"
     >
       <ng-template #loadingIcon>
@@ -104,6 +104,17 @@ export class HlmToaster {
     transform: booleanAttribute,
   });
   public readonly toastOptions = input<ToasterProps['toastOptions']>({});
+
+  protected readonly _computedToastOptions = computed(() => {
+    const options = this.toastOptions();
+    return {
+      ...options,
+      classes: {
+        ...options?.classes,
+        toast: hlm('rounded-2xl!', options?.classes?.toast),
+      },
+    };
+  });
   public readonly offset = input<ToasterProps['offset']>(null);
   public readonly userClass = input<ClassValue>('', { alias: 'class' });
   public readonly userStyle = input<Record<string, string>>(