@spartan-ng/cli 0.0.1-alpha.710 → 0.0.1-alpha.712

package/src/generators/ui/libs/dialog/files/lib/hlm-dialog-header.ts.template

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDialogHeader],hlm-dialog-header',
-	host: {
-		'data-slot': 'dialog-header',
-	},
+	host: { 'data-slot': 'dialog-header' },
 })
 export class HlmDialogHeader {
 	constructor() {
-		classes(() => 'flex flex-col gap-2 text-center sm:text-start');
+		classes(() => 'spartan-dialog-header flex flex-col');
 	}
 }

package/src/generators/ui/libs/dialog/files/lib/hlm-dialog-overlay.ts.template

@@ -2,10 +2,9 @@ import { computed, Directive, effect, input, untracked } from '@angular/core';
 import { injectCustomClassSettable } from '@spartan-ng/brain/core';
 import { BrnDialogOverlay } from '@spartan-ng/brain/dialog';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
-export const hlmDialogOverlayClass =
-	'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';
+export const hlmDialogOverlayClass = hlm('spartan-dialog-overlay');
 
 @Directive({
 	selector: '[hlmDialogOverlay],hlm-dialog-overlay',

package/src/generators/ui/libs/dialog/files/lib/hlm-dialog-title.ts.template

@@ -5,12 +5,10 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmDialogTitle]',
 	hostDirectives: [BrnDialogTitle],
-	host: {
-		'data-slot': 'dialog-title',
-	},
+	host: { 'data-slot': 'dialog-title' },
 })
 export class HlmDialogTitle {
 	constructor() {
-		classes(() => 'text-lg leading-none font-semibold');
+		classes(() => 'spartan-dialog-title');
 	}
 }

package/src/generators/ui/libs/dialog/files/lib/hlm-dialog-trigger.ts.template

@@ -4,8 +4,6 @@ import { BrnDialogTrigger } from '@spartan-ng/brain/dialog';
 @Directive({
 	selector: 'button[hlmDialogTrigger],button[hlmDialogTriggerFor]',
 	hostDirectives: [{ directive: BrnDialogTrigger, inputs: ['id', 'brnDialogTriggerFor: hlmDialogTriggerFor', 'type'] }],
-	host: {
-		'data-slot': 'dialog-trigger',
-	},
+	host: { 'data-slot': 'dialog-trigger' },
 })
 export class HlmDialogTrigger {}

package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-close.ts.template

@@ -4,8 +4,6 @@ import { BrnSheetClose } from '@spartan-ng/brain/sheet';
 @Directive({
 	selector: 'button[hlmSheetClose]',
 	hostDirectives: [{ directive: BrnSheetClose, inputs: ['delay'] }],
-	host: {
-		'data-slot': 'sheet-close',
-	},
+	host: { 'data-slot': 'sheet-close' },
 })
 export class HlmSheetClose {}

package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-content.ts.template

@@ -16,28 +16,8 @@ import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-
 import { HlmButton } from '<%- importAlias %>/button';
 import { HlmIconImports } from '<%- importAlias %>/icon';
 import { classes } from '<%- importAlias %>/utils';
-import { cva } from 'class-variance-authority';
 import { HlmSheetClose } from './hlm-sheet-close';
 
-export const sheetVariants = cva(
-	'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-	{
-		variants: {
-			side: {
-				top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-				bottom:
-					'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-				left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-				right:
-					'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-			},
-		},
-		defaultVariants: {
-			side: 'right',
-		},
-	},
-);
-
 @Component({
 	selector: 'hlm-sheet-content',
 	imports: [HlmIconImports, HlmButton, HlmSheetClose],
@@ -45,13 +25,14 @@ export const sheetVariants = cva(
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'data-slot': 'sheet-content',
+		'[attr.data-side]': '_sideProvider.side()',
 		'[attr.data-state]': 'state()',
 	},
 	template: `
 		<ng-content />
 
 		@if (showCloseButton()) {
-			<button hlmBtn variant="ghost" size="icon-sm" class="absolute end-4 top-4" hlmSheetClose>
+			<button hlmBtn variant="ghost" size="icon-sm" class="spartan-sheet-close" hlmSheetClose>
 				<span class="sr-only">Close</span>
 				<ng-icon hlm size="sm" name="lucideX" />
 			</button>
@@ -60,7 +41,7 @@ export const sheetVariants = cva(
 })
 export class HlmSheetContent {
 	private readonly _stateProvider = injectExposesStateProvider({ host: true });
-	private readonly _sideProvider = injectExposedSideProvider({ host: true });
+	protected readonly _sideProvider = injectExposedSideProvider({ host: true });
 	public readonly state = this._stateProvider.state ?? signal('closed');
 	private readonly _renderer = inject(Renderer2);
 	private readonly _element = inject(ElementRef);
@@ -68,7 +49,14 @@ export class HlmSheetContent {
 	public readonly showCloseButton = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
 
 	constructor() {
-		classes(() => sheetVariants({ side: this._sideProvider.side() }));
+		classes(() => [
+			'spartan-sheet-content',
+			'data-open:animate-in data-closed:animate-out',
+			'data-[side=top]:data-closed:slide-out-to-top data-[side=top]:data-open:slide-in-from-top',
+			'data-[side=bottom]:data-closed:slide-out-to-bottom data-[side=bottom]:data-open:slide-in-from-bottom',
+			'data-[side=left]:data-closed:slide-out-to-left data-[side=left]:data-open:slide-in-from-left',
+			'data-[side=right]:data-closed:slide-out-to-right data-[side=right]:data-open:slide-in-from-right',
+		]);
 		effect(() => {
 			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
 		});

package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-description.ts.template

@@ -5,12 +5,10 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmSheetDescription]',
 	hostDirectives: [BrnSheetDescription],
-	host: {
-		'data-slot': 'sheet-description',
-	},
+	host: { 'data-slot': 'sheet-description' },
 })
 export class HlmSheetDescription {
 	constructor() {
-		classes(() => 'text-muted-foreground text-sm');
+		classes(() => 'spartan-sheet-description');
 	}
 }

package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-footer.ts.template

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSheetFooter],hlm-sheet-footer',
-	host: {
-		'data-slot': 'sheet-footer',
-	},
+	host: { 'data-slot': 'sheet-footer' },
 })
 export class HlmSheetFooter {
 	constructor() {
-		classes(() => 'mt-auto flex flex-col gap-2 p-4');
+		classes(() => 'spartan-sheet-footer mt-auto flex flex-col');
 	}
 }

package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-header.ts.template

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSheetHeader],hlm-sheet-header',
-	host: {
-		'data-slot': 'sheet-header',
-	},
+	host: { 'data-slot': 'sheet-header' },
 })
 export class HlmSheetHeader {
 	constructor() {
-		classes(() => 'flex flex-col gap-1.5 p-4');
+		classes(() => 'spartan-sheet-header flex flex-col');
 	}
 }

package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-overlay.ts.template

@@ -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',
+			'spartan-sheet-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-title.ts.template

@@ -5,12 +5,10 @@ import { classes } from '<%- importAlias %>/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(() => 'spartan-sheet-title');
 	}
 }

package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-trigger.ts.template

@@ -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/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-content.ts.template

@@ -10,6 +10,9 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmSidebarContent {
 	constructor() {
-		classes(() => 'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden');
+		classes(
+			() =>
+				'spartan-sidebar-content flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+		);
 	}
 }

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-footer.ts.template

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

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-group-action.ts.template

@@ -10,11 +10,9 @@ import { classes } from '<%- importAlias %>/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(
+			() =>
+				'spartan-sidebar-group-action 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/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-group-content.ts.template

@@ -10,6 +10,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmSidebarGroupContent {
 	constructor() {
-		classes(() => 'w-full text-sm');
+		classes(() => 'spartan-sidebar-group-content w-full');
 	}
 }

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-group-label.ts.template

@@ -10,9 +10,6 @@ import { classes } from '<%- importAlias %>/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(() => 'spartan-sidebar-group-label flex shrink-0 items-center outline-hidden [&>ng-icon]:shrink-0');
 	}
 }

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-group.ts.template

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

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-header.ts.template

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

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-inset.ts.template

@@ -3,15 +3,10 @@ import { classes } from '<%- importAlias %>/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(() => 'spartan-sidebar-inset relative flex w-full flex-1 flex-col');
 	}
 }

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-action.ts.template

@@ -14,15 +14,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',
+			'spartan-sidebar-menu-action 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/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-badge.ts.template

@@ -10,13 +10,9 @@ import { classes } from '<%- importAlias %>/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(
+			() =>
+				'spartan-sidebar-menu-badge flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden',
+		);
 	}
 }

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-button.ts.template

@@ -12,18 +12,17 @@ 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',
+	'spartan-sidebar-menu-button 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-[calc(var(--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',
+				default: 'spartan-sidebar-menu-button-variant-default',
+				outline: 'spartan-sidebar-menu-button-variant-outline',
 			},
 			size: {
-				default: 'h-8 text-sm',
-				sm: 'h-7 text-xs',
-				lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+				default: 'spartan-sidebar-menu-button-size-default',
+				sm: 'spartan-sidebar-menu-button-size-sm',
+				lg: 'spartan-sidebar-menu-button-size-lg',
 			},
 		},
 		defaultVariants: {

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-skeleton.ts.template

@@ -10,13 +10,16 @@ import { classes } from '<%- importAlias %>/utils';
 	host: {
 		'data-slot': 'sidebar-menu-skeleton',
 		'data-sidebar': 'menu-skeleton',
-		'[style.--skeleton-width]': '_width',
 	},
 	template: `
 		@if (showIcon()) {
-			<hlm-skeleton data-sidebar="menu-skeleton-icon" class="size-4 rounded-md" />
+			<hlm-skeleton data-sidebar="menu-skeleton-icon" class="spartan-sidebar-menu-skeleton-icon" />
 		} @else {
-			<hlm-skeleton data-sidebar="menu-skeleton-text" class="h-4 max-w-[var(--skeleton-width)] flex-1" />
+			<hlm-skeleton
+				data-sidebar="menu-skeleton-text"
+				class="spartan-sidebar-menu-skeleton-text max-w-(--skeleton-width) flex-1"
+				[style.--skeleton-width]="_width"
+			/>
 		}
 	`,
 })
@@ -25,6 +28,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(() => 'spartan-sidebar-menu-skeleton flex items-center');
 	}
 }

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-sub-button.ts.template

@@ -25,13 +25,12 @@ 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',
-		]);
+		classes(
+			() =>
+				'spartan-sidebar-menu-sub-button 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',
+		);
 	}
 
 	protected onClick(): void {

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-sub.ts.template

@@ -10,9 +10,6 @@ import { classes } from '<%- importAlias %>/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',
-		]);
+		classes(() => 'spartan-sidebar-menu-sub flex min-w-0 flex-col');
 	}
 }

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu.ts.template

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

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-rail.ts.template

@@ -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',
+			'spartan-sidebar-rail 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/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-trigger.ts.template

@@ -1,37 +1,30 @@
-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 '<%- importAlias %>/button';
-import { HlmIconImports } from '<%- importAlias %>/icon';
 import { HlmSidebarService } from './hlm-sidebar.service';
 
 @Component({
 	// eslint-disable-next-line @angular-eslint/component-selector
 	selector: 'button[hlmSidebarTrigger]',
-	imports: [HlmIconImports],
-	providers: [provideIcons({ lucidePanelLeft }), provideBrnButtonConfig({ variant: 'ghost', size: 'icon' })],
+	imports: [NgIcon],
+	providers: [provideIcons({ lucidePanelLeft }), 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 hlm name="lucidePanelLeft" 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('Toggle Sidebar');
 
 	protected _onClick(): void {
 		this._sidebarService.toggleSidebar();

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-wrapper.ts.template

@@ -17,6 +17,6 @@ export class HlmSidebarWrapper {
 	public readonly sidebarWidthIcon = input<string>(this._config.sidebarWidthIcon);
 
 	constructor() {
-		classes(() => 'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full');
+		classes(() => 'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full');
 	}
 }

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar.ts.template

@@ -35,7 +35,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 					data-slot="sidebar"
 					data-sidebar="sidebar"
 					data-mobile="true"
-					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()"
 				>
 					<div class="flex h-full w-full flex-col">
@@ -46,12 +46,8 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 		} @else {
 			<!-- Sidebar gap on desktop -->
 			<div data-slot="sidebar-gap" [class]="_sidebarGapComputedClass()"></div>
-			<div data-slot="sidebar-container" [class]="_sidebarContainerComputedClass()">
-				<div
-					data-sidebar="sidebar"
-					data-slot="sidebar-inner"
-					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"
-				>
+			<div data-slot="sidebar-container" [attr.data-side]="_dataSide()" [class]="_sidebarContainerComputedClass()">
+				<div data-sidebar="sidebar" data-slot="sidebar-inner" class="spartan-sidebar-inner flex size-full flex-col">
 					<ng-container *ngTemplateOutlet="contentContainer" />
 				</div>
 			</div>
@@ -69,25 +65,22 @@ export class HlmSidebar {
 
 	protected readonly _sidebarGapComputedClass = computed(() =>
 		hlm(
-			'relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear',
+			'spartan-sidebar-gap 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(),
 		),
 	);
@@ -127,11 +120,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/src/generators/ui/libs/tooltip/files/lib/hlm-tooltip.ts.template

@@ -6,8 +6,9 @@ import { cva } from 'class-variance-authority';
 export const DEFAULT_TOOLTIP_SVG_CLASS =
 	'bg-foreground fill-foreground z-50 block size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]';
 
-export const DEFAULT_TOOLTIP_CONTENT_CLASSES =
-	'spartan-tooltip-content bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) text-balance';
+export const DEFAULT_TOOLTIP_CONTENT_CLASSES = hlm(
+	'spartan-tooltip-content bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) text-balance',
+);
 
 export const tooltipPositionVariants = cva('absolute', {
 	variants: {