@spartan-ng/cli 0.0.1-alpha.720 → 1.0.0

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

@@ -1,7 +1,8 @@
 import { type NumberInput } from '@angular/cdk/coercion';
 import { CdkMenu } from '@angular/cdk/menu';
-import { Directive, inject, input, numberAttribute, signal } from '@angular/core';
+import { Directive, ElementRef, inject, input, numberAttribute, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { deriveMenuSideFromTransformOrigin, MENU_SIDE, type MenuSide } from '@spartan-ng/brain/core';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
@@ -16,9 +17,12 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmDropdownMenu {
 	private readonly _host = inject(CdkMenu);
+	private readonly _elementRef = inject(ElementRef<HTMLElement>);
+	// The trigger provides its configured side; CDK parents this content's injector under the trigger's.
+	private readonly _menuSide = inject(MENU_SIDE, { optional: true });
 
 	protected readonly _state = signal('open');
-	protected readonly _side = signal('top');
+	protected readonly _side = signal<MenuSide>(this._menuSide?.side() ?? 'bottom');
 
 	public readonly sideOffset = input<number, NumberInput>(1, { transform: numberAttribute });
 
@@ -28,35 +32,17 @@ export class HlmDropdownMenu {
 				'spartan-dropdown-menu-content my-[--spacing(var(--side-offset))] overflow-x-hidden overflow-y-auto outline-none',
 		);
 
-		this.setSideWithDarkMagic();
+		this.setSideFromTransformOrigin();
 		// this is a best effort, but does not seem to work currently
 		// TODO: figure out a way for us to know the host is about to be closed. might not be possible with CDK
 		this._host.closed.pipe(takeUntilDestroyed()).subscribe(() => this._state.set('closed'));
 	}
 
-	private setSideWithDarkMagic() {
-		/**
-		 * This is an ugly workaround to at least figure out the correct side of where a submenu
-		 * will appear and set the attribute to the host accordingly
-		 *
-		 * First of all we take advantage of the menu stack not being aware of the root
-		 * object immediately after it is added. This code executes before the root element is added,
-		 * which means the stack is still empty and the peek method returns undefined.
-		 */
-		const isRoot = this._host.menuStack.peek() === undefined;
+	private setSideFromTransformOrigin() {
+		const side = this._menuSide?.side() ?? 'bottom';
+		// CDK sets transform-origin on this element synchronously on attach; read it next tick and derive side
 		setTimeout(() => {
-			// our menu trigger directive leaves the last position used for use immediately after opening
-			// we can access it here and determine the correct side.
-			// eslint-disable-next-line
-			const ps = (this._host as any)._parentTrigger._spartanLastPosition;
-			if (!ps) {
-				// if we have no last position we default to the most likely option
-				// I hate that we have to do this and hope we can revisit soon and improve
-				this._side.set(isRoot ? 'top' : 'left');
-				return;
-			}
-			const side = isRoot ? ps.originY : ps.originX === 'end' ? 'right' : 'left';
-			this._side.set(side);
+			this._side.set(deriveMenuSideFromTransformOrigin(this._elementRef.nativeElement.style.transformOrigin, side));
 		});
 	}
 }

package/src/generators/ui/libs/input-otp/files/lib/hlm-input-otp-fake-caret.ts.template

@@ -1,12 +1,15 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-input-otp-fake-caret',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
-		<div class="spartan-input-otp-caret pointer-events-none absolute inset-0 flex items-center justify-center">
-			<div class="spartan-input-otp-caret-line"></div>
-		</div>
+		<div class="spartan-input-otp-caret-line"></div>
 	`,
 })
-export class HlmInputOtpFakeCaret {}
+export class HlmInputOtpFakeCaret {
+	constructor() {
+		classes(() => 'spartan-input-otp-caret pointer-events-none absolute inset-0 flex items-center justify-center');
+	}
+}

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

@@ -1,13 +1,13 @@
 import { type BooleanInput } from '@angular/cdk/coercion';
 import { CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
-import { booleanAttribute, computed, Directive, effect, inject, input } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { createMenuPosition, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
+import { booleanAttribute, computed, Directive, effect, forwardRef, inject, input } from '@angular/core';
+import { createMenuPosition, MENU_SIDE, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
 import { classes } from '<%- importAlias %>/utils';
 import { injectHlmMenubarConfig } from './hlm-menubar-token';
 
 @Directive({
 	selector: 'button[hlmMenubarTrigger]',
+	providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmMenubarTrigger) }],
 	hostDirectives: [
 		{
 			directive: CdkMenuItem,
@@ -37,17 +37,11 @@ export class HlmMenubarTrigger {
 	private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));
 
 	constructor() {
-		// once the trigger opens we wait until the next tick and then grab the last position
-		// used to position the menu. we store this in our trigger which the brnMenu directive has
-		// access to through DI
-		this._cdkTrigger.opened.pipe(takeUntilDestroyed()).subscribe(() =>
-			setTimeout(
-				() =>
-					// eslint-disable-next-line
-					((this._cdkTrigger as any)._spartanLastPosition = // eslint-disable-next-line
-						(this._cdkTrigger as any).overlayRef._positionStrategy._lastPosition),
-			),
-		);
+		// CDK sets transform-origin on the menu content (a shared hlm-dropdown-menu) from the resolved
+		// position; the content reads it to animate from the anchored corner and to derive its data-side.
+		// Cast tolerates @angular/cdk < 21.2 (we still support >=21.0), where the property is absent and
+		// the assignment is a harmless no-op.
+		(this._cdkTrigger as { transformOriginSelector?: string }).transformOriginSelector = '[data-slot="dropdown-menu"]';
 
 		effect(() => {
 			this._cdkTrigger.menuPosition = this._menuPosition();

package/src/generators/ui/libs/pagination/files/lib/hlm-numbered-pagination-query-params.ts.template

@@ -1,8 +1,8 @@
 import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import {
+	booleanAttribute,
 	ChangeDetectionStrategy,
 	Component,
-	booleanAttribute,
 	computed,
 	input,
 	model,
@@ -10,6 +10,7 @@ import {
 	untracked,
 } from '@angular/core';
 import { HlmSelectImports } from '<%- importAlias %>/select';
+import { classes } from '<%- importAlias %>/utils';
 import { createPageArray, outOfBoundCorrection } from './hlm-numbered-pagination';
 import { HlmPagination } from './hlm-pagination';
 import { HlmPaginationContent } from './hlm-pagination-content';
@@ -33,70 +34,68 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
-		<div class="flex items-center justify-between gap-2 px-4 py-2">
-			<div class="flex items-center gap-1 text-sm text-nowrap text-gray-600">
-				<b>{{ totalItems() }}</b>
-				total items |
-				<b>{{ _lastPageNumber() }}</b>
-				pages
-			</div>
-
-			<nav hlmPagination>
-				<ul hlmPaginationContent>
-					@if (showEdges() && !_isFirstPageActive()) {
-						<li hlmPaginationItem>
-							<hlm-pagination-previous
-								[link]="link()"
-								[queryParams]="{ page: currentPage() - 1 }"
-								queryParamsHandling="merge"
-							/>
-						</li>
-					}
-
-					@for (page of _pages(); track page) {
-						<li hlmPaginationItem>
-							@if (page === '...') {
-								<hlm-pagination-ellipsis />
-							} @else {
-								<a
-									hlmPaginationLink
-									[link]="currentPage() !== page ? link() : undefined"
-									[queryParams]="{ page }"
-									queryParamsHandling="merge"
-									[isActive]="currentPage() === page"
-								>
-									{{ page }}
-								</a>
-							}
-						</li>
-					}
+		<div class="flex items-center gap-1 text-sm text-nowrap text-gray-600">
+			<b>{{ totalItems() }}</b>
+			total items |
+			<b>{{ _lastPageNumber() }}</b>
+			pages
+		</div>
 
-					@if (showEdges() && !_isLastPageActive()) {
-						<li hlmPaginationItem>
-							<hlm-pagination-next
-								[link]="link()"
-								[queryParams]="{ page: currentPage() + 1 }"
+		<nav hlmPagination>
+			<ul hlmPaginationContent>
+				@if (showEdges() && !_isFirstPageActive()) {
+					<li hlmPaginationItem>
+						<hlm-pagination-previous
+							[link]="link()"
+							[queryParams]="{ page: currentPage() - 1 }"
+							queryParamsHandling="merge"
+						/>
+					</li>
+				}
+
+				@for (page of _pages(); track page) {
+					<li hlmPaginationItem>
+						@if (page === '...') {
+							<hlm-pagination-ellipsis />
+						} @else {
+							<a
+								hlmPaginationLink
+								[link]="currentPage() !== page ? link() : undefined"
+								[queryParams]="{ page }"
 								queryParamsHandling="merge"
-							/>
-						</li>
-					}
-				</ul>
-			</nav>
-
-			<!-- Show Page Size selector -->
-			<hlm-select [(value)]="itemsPerPage" class="ml-auto">
-				<hlm-select-trigger class="w-fit">
-					<hlm-select-value />
-				</hlm-select-trigger>
-				<hlm-select-content *hlmSelectPortal>
-					<hlm-select-group>
-						@for (pageSize of _pageSizesWithCurrent(); track pageSize) {
-							<hlm-select-item [value]="pageSize">{{ pageSize }}</hlm-select-item>
+								[isActive]="currentPage() === page"
+							>
+								{{ page }}
+							</a>
 						}
-					</hlm-select-group>
-				</hlm-select-content>
-			</hlm-select>
-		</div>
+					</li>
+				}
+
+				@if (showEdges() && !_isLastPageActive()) {
+					<li hlmPaginationItem>
+						<hlm-pagination-next
+							[link]="link()"
+							[queryParams]="{ page: currentPage() + 1 }"
+							queryParamsHandling="merge"
+						/>
+					</li>
+				}
+			</ul>
+		</nav>
+
+		<!-- Show Page Size selector -->
+		<hlm-select [(value)]="itemsPerPage" class="ml-auto">
+			<hlm-select-trigger class="w-fit">
+				<hlm-select-value />
+			</hlm-select-trigger>
+			<hlm-select-content *hlmSelectPortal>
+				<hlm-select-group>
+					@for (pageSize of _pageSizesWithCurrent(); track pageSize) {
+						<hlm-select-item [value]="pageSize">{{ pageSize }}</hlm-select-item>
+					}
+				</hlm-select-group>
+			</hlm-select-content>
+		</hlm-select>
 	`,
 })
 export class HlmNumberedPaginationQueryParams {
@@ -174,4 +173,8 @@ export class HlmNumberedPaginationQueryParams {
 
 		return createPageArray(correctedCurrentPage, this.itemsPerPage(), this.totalItems(), this.maxSize());
 	});
+
+	constructor() {
+		classes(() => 'flex items-center justify-between gap-2 px-4 py-2');
+	}
 }

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

@@ -17,9 +17,6 @@ export class HlmPopoverContent {
 			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
 		});
 
-		classes(
-			() =>
-				'spartan-popover-content data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 relative flex w-72 flex-col outline-none',
-		);
+		classes(() => 'spartan-popover-content relative flex w-72 flex-col outline-none');
 	}
 }

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

@@ -11,12 +11,7 @@ import type { ClassValue } from 'clsx';
 export class HlmSheetOverlay {
 	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'spartan-sheet-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0',
-			this.userClass(),
-		),
-	);
+	protected readonly _computedClass = computed(() => hlm('spartan-sheet-overlay', this.userClass()));
 
 	constructor() {
 		effect(() => {

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

@@ -40,7 +40,7 @@ export class HlmSidebarService {
 		this.restoreStateFromCookie();
 
 		afterNextRender(() => {
-			if (!this._window) return;
+			if (!this._window || typeof this._window.matchMedia !== 'function') return;
 
 			// Initialize MediaQueryList
 			this._mediaQuery = this._window.matchMedia(`(max-width: ${this._config.mobileBreakpoint})`);

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

@@ -7,7 +7,7 @@ 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 = 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',
+	'spartan-tooltip-content bg-foreground text-background data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-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', {

package/src/generators/ui/style-luma.css

@@ -147,11 +147,11 @@
 	}
 
 	.spartan-button-group-orientation-horizontal {
-		@apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-4xl!;
+		@apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-4xl;
 	}
 
 	.spartan-button-group-orientation-vertical {
-		@apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl!;
+		@apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl;
 	}
 
 	.spartan-button-group-text {
@@ -288,7 +288,7 @@
 	}
 
 	.spartan-combobox-status {
-		@apply text-muted-foreground gap-2 py-2 text-sm;
+		@apply text-muted-foreground gap-2 px-4.5 py-2 text-sm;
 	}
 
 	/* MARK: Input Group */
@@ -454,7 +454,7 @@
 
 	/* MARK: Alert Dialog */
 	.spartan-alert-dialog-overlay {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm;
+		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm;
 	}
 
 	.spartan-alert-dialog-content {
@@ -532,7 +532,7 @@
 	}
 
 	.spartan-autocomplete-status {
-		@apply text-muted-foreground gap-2 py-2 text-sm;
+		@apply text-muted-foreground gap-2 px-4.5 py-2 text-sm;
 	}
 
 	/* MARK: Avatar */
@@ -665,7 +665,7 @@
 
 	/* MARK: Dialog */
 	.spartan-dialog-overlay {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm;
+		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm;
 	}
 
 	.spartan-dialog-content {
@@ -724,7 +724,7 @@
 
 	/* MARK: Dropdown Menu */
 	.spartan-dropdown-menu-content {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/5 dark:ring-foreground/10 bg-popover text-popover-foreground min-w-48 rounded-3xl p-1.5 shadow-lg ring-1 duration-100;
+		@apply motion-safe:data-open:animate-in motion-safe:data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/5 dark:ring-foreground/10 bg-popover text-popover-foreground min-w-48 rounded-3xl p-1.5 shadow-lg ring-1 duration-100;
 	}
 
 	.spartan-dropdown-menu-item {
@@ -756,7 +756,7 @@
 	}
 
 	.spartan-dropdown-menu-sub-content {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/5 dark:ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-3xl p-1.5 shadow-lg ring-1 duration-100;
+		@apply motion-safe:data-open:animate-in motion-safe:data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/5 dark:ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-3xl p-1.5 shadow-lg ring-1 duration-100;
 	}
 
 	/* MARK: Item */
@@ -1073,7 +1073,7 @@
 
 	/* MARK: Sheet */
 	.spartan-sheet-overlay {
-		@apply bg-black/30 supports-backdrop-filter:backdrop-blur-sm;
+		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm;
 	}
 
 	.spartan-sheet-content {

package/src/generators/ui/style-lyra.css

@@ -50,7 +50,7 @@
 
 	/* MARK: Alert Dialog */
 	.spartan-alert-dialog-overlay {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+		@apply 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;
 	}
 
 	.spartan-alert-dialog-content {
@@ -103,7 +103,7 @@
 	}
 
 	.spartan-autocomplete-status {
-		@apply text-muted-foreground gap-2 py-2 text-xs;
+		@apply text-muted-foreground gap-2 px-2 py-2 text-xs;
 	}
 
 	/* MARK: Avatar */
@@ -361,7 +361,7 @@
 	}
 
 	.spartan-combobox-status {
-		@apply text-muted-foreground gap-2 py-2 text-xs;
+		@apply text-muted-foreground gap-2 px-2 py-2 text-xs;
 	}
 
 	/* MARK: Command */
@@ -419,7 +419,7 @@
 
 	/* MARK: Dialog */
 	.spartan-dialog-overlay {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+		@apply 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;
 	}
 
 	.spartan-dialog-content {
@@ -474,7 +474,7 @@
 
 	/* MARK: Dropdown Menu */
 	.spartan-dropdown-menu-content {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100;
+		@apply motion-safe:data-open:animate-in motion-safe:data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100;
 	}
 
 	.spartan-dropdown-menu-item {
@@ -506,7 +506,7 @@
 	}
 
 	.spartan-dropdown-menu-sub-content {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100;
+		@apply motion-safe:data-open:animate-in motion-safe:data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100;
 	}
 
 	/* MARK: Empty */
@@ -898,7 +898,7 @@
 
 	/* MARK: Sheet */
 	.spartan-sheet-overlay {
-		@apply bg-black/10 text-xs/relaxed supports-backdrop-filter:backdrop-blur-xs;
+		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 text-xs/relaxed duration-100 supports-backdrop-filter:backdrop-blur-xs;
 	}
 
 	.spartan-sheet-content {

package/src/generators/ui/style-maia.css

@@ -26,7 +26,7 @@
 
 	/* MARK: Alert Dialog */
 	.spartan-alert-dialog-overlay {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
 	}
 
 	.spartan-alert-dialog-content {
@@ -104,7 +104,7 @@
 	}
 
 	.spartan-autocomplete-status {
-		@apply text-muted-foreground gap-2 py-2 text-sm;
+		@apply text-muted-foreground gap-2 px-4 py-2 text-sm;
 	}
 
 	/* MARK: Avatar */
@@ -249,11 +249,11 @@
 	}
 
 	.spartan-button-group-orientation-horizontal {
-		@apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-4xl!;
+		@apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-4xl;
 	}
 
 	.spartan-button-group-orientation-vertical {
-		@apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl!;
+		@apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl;
 	}
 
 	.spartan-button-group-text {
@@ -379,7 +379,7 @@
 	}
 
 	.spartan-combobox-status {
-		@apply text-muted-foreground gap-2 py-2 text-sm;
+		@apply text-muted-foreground gap-2 px-4 py-2 text-sm;
 	}
 
 	/* MARK: Command */
@@ -437,7 +437,7 @@
 
 	/* MARK: Dialog */
 	.spartan-dialog-overlay {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
 	}
 
 	.spartan-dialog-content {
@@ -496,7 +496,7 @@
 
 	/* MARK: Dropdown Menu */
 	.spartan-dropdown-menu-content {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/5 bg-popover text-popover-foreground dark:ring-foreground/10 min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100;
+		@apply motion-safe:data-open:animate-in motion-safe:data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/5 bg-popover text-popover-foreground dark:ring-foreground/10 min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100;
 	}
 
 	.spartan-dropdown-menu-item {
@@ -528,7 +528,7 @@
 	}
 
 	.spartan-dropdown-menu-sub-content {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100;
+		@apply motion-safe:data-open:animate-in motion-safe:data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100;
 	}
 
 	/* MARK: Empty */
@@ -920,7 +920,7 @@
 
 	/* MARK: Sheet */
 	.spartan-sheet-overlay {
-		@apply bg-black/80 supports-backdrop-filter:backdrop-blur-xs;
+		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
 	}
 
 	.spartan-sheet-content {

package/src/generators/ui/style-mira.css

@@ -26,7 +26,7 @@
 
 	/* MARK: Alert Dialog */
 	.spartan-alert-dialog-overlay {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
 	}
 
 	.spartan-alert-dialog-content {
@@ -104,7 +104,7 @@
 	}
 
 	.spartan-autocomplete-status {
-		@apply text-muted-foreground gap-2 py-2 text-xs/relaxed;
+		@apply text-muted-foreground gap-2 px-3 py-2 text-xs/relaxed;
 	}
 
 	/* MARK: Avatar */
@@ -249,11 +249,11 @@
 	}
 
 	.spartan-button-group-orientation-horizontal {
-		@apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-md!;
+		@apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-md;
 	}
 
 	.spartan-button-group-orientation-vertical {
-		@apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!;
+		@apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md;
 	}
 
 	.spartan-button-group-text {
@@ -379,7 +379,7 @@
 	}
 
 	.spartan-combobox-status {
-		@apply text-muted-foreground gap-2 py-2 text-xs/relaxed;
+		@apply text-muted-foreground gap-2 px-3 py-2 text-xs/relaxed;
 	}
 
 	/* MARK: Command */
@@ -437,7 +437,7 @@
 
 	/* MARK: Dialog */
 	.spartan-dialog-overlay {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
 	}
 
 	.spartan-dialog-content {
@@ -496,7 +496,7 @@
 
 	/* MARK: Dropdown Menu */
 	.spartan-dropdown-menu-content {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100;
+		@apply motion-safe:data-open:animate-in motion-safe:data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100;
 	}
 
 	.spartan-dropdown-menu-item {
@@ -528,7 +528,7 @@
 	}
 
 	.spartan-dropdown-menu-sub-content {
-		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100;
+		@apply motion-safe:data-open:animate-in motion-safe:data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100;
 	}
 
 	/* MARK: Empty */
@@ -920,7 +920,7 @@
 
 	/* MARK: Sheet */
 	.spartan-sheet-overlay {
-		@apply bg-black/80 supports-backdrop-filter:backdrop-blur-xs;
+		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
 	}
 
 	.spartan-sheet-content {