@salesforce/templates 66.13.6 → 66.13.8

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/input/input.ts

@@ -3,34 +3,77 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatFormFieldModule, type MatFormFieldAppearance } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
+import { HlmInputGroupImports } from '@spartan-ng/styles/input-group';
+import { HlmLabelImports } from '@spartan-ng/styles/label';
 import type { AppFieldSize } from '../field-size';
+import type { AppFieldAppearance } from '../field-appearance';
+import { IconComponent, type AppIconName } from '../icon/icon';
+
+const SIZE_CLASSES: Record<AppFieldSize, string> = {
+	sm: 'h-6 text-xs',
+	default: 'h-8',
+	lg: 'h-10',
+};
+
+const APPEARANCE_CLASSES: Record<AppFieldAppearance, string> = {
+	outline: '',
+	fill: 'border-transparent bg-muted',
+};
 
-/** Thin wrapper over Material's `mat-form-field` + `matInput`. */
 @Component({
 	selector: 'app-input',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [FormsModule, MatFormFieldModule, MatInputModule],
+	imports: [FormsModule, HlmInputGroupImports, HlmLabelImports, IconComponent],
+	host: { class: 'block min-w-0' },
 	templateUrl: './input.html',
-	styleUrl: './input.scss',
 })
 export class InputComponent {
-	/** Two-way bindable value. Supports `[(value)]`. */
 	readonly value = model<string>('');
-
 	readonly placeholder = input<string>('');
 	readonly label = input<string>('');
 	readonly type = input<string>('text');
-	readonly disabled = input<boolean>(false);
-	readonly appearance = input<MatFormFieldAppearance>('outline');
-	/** Field height: `sm` = 24px, `default` = 32px, `lg` = 40px. */
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly appearance = input<AppFieldAppearance>('outline');
+	readonly error = input(false, { transform: booleanAttribute });
+	readonly errorMessage = input<string>('');
 	readonly size = input<AppFieldSize>('default');
-
-	/** `id` on the inner control, so an outer `app-field` label's `for` resolves. */
 	readonly id = input<string>('');
-
 	readonly ariaDescribedby = input<string>('');
+	// Accessible name for inputs with no visible <label> (e.g. an icon-only
+	// search box); harmless when a label is present.
+	readonly ariaLabel = input<string>('');
+	// Optional leading/trailing icons. When set the input renders inside an
+	// input-group so the icon sits inside the shared border.
+	readonly icon = input<AppIconName | ''>('');
+	readonly iconEnd = input<AppIconName | ''>('');
+
+	private static _uid = 0;
+	private readonly _autoId = `app-input-${InputComponent._uid++}`;
+	protected readonly resolvedId = computed(() => this.id() || this._autoId);
+	protected readonly errorId = computed(() => `${this.resolvedId()}-error`);
+
+	// Link the error message to the input via aria-describedby (merged with any
+	// caller-supplied ids) so screen readers announce it; null when absent.
+	protected readonly describedBy = computed(() => {
+		const ids = [this.ariaDescribedby(), this.error() && this.errorMessage() ? this.errorId() : '']
+			.filter(Boolean)
+			.join(' ');
+		return ids || null;
+	});
+
+	// Size + appearance apply to the input-group wrapper, which owns the border.
+	protected readonly groupClasses = computed(() =>
+		[SIZE_CLASSES[this.size()], APPEARANCE_CLASSES[this.appearance()]].filter(Boolean).join(' '),
+	);
 }
+
+export const InputImports = [InputComponent] as const;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/label/label.ts

@@ -4,14 +4,18 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { HlmLabelImports } from '@spartan-ng/styles/label';
 
-/** Thin wrapper over the native `<label>` element. */
 @Component({
 	selector: 'app-label',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	templateUrl: './label.html',
+	imports: [HlmLabelImports],
+	template: `
+		<label hlmLabel [for]="for() ?? undefined" class="mb-1.5 block"><ng-content /></label>
+	`,
 })
 export class LabelComponent {
-	/** Optional `for` attribute forwarded to the underlying `<label>`. */
-	readonly for = input<string | null>(null);
+	readonly for = input<string | null | undefined>(undefined);
 }
+
+export const LabelImports = [LabelComponent] as const;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/paginator/paginator.html

@@ -1,10 +1,74 @@
-<mat-paginator
-	[length]="length()"
-	[pageIndex]="pageIndex()"
-	[pageSize]="pageSize()"
-	[pageSizeOptions]="pageSizeOptions()"
-	[hidePageSize]="hidePageSize()"
-	[showFirstLastButtons]="showFirstLastButtons()"
-	[disabled]="disabled()"
-	(page)="page.emit($event)"
-/>
+@if (!hidePageSize()) {
+	<div class="flex items-center gap-2">
+		<span [id]="pageSizeLabelId" class="text-muted-foreground text-nowrap">Items per page:</span>
+		@if (pageSizeOptions().length > 0) {
+			<select
+				class="h-8 rounded-md border border-input bg-background px-2 text-sm"
+				[attr.aria-labelledby]="pageSizeLabelId"
+				[disabled]="disabled()"
+				(change)="onPageSizeChange($event)"
+			>
+				@for (opt of pageSizeOptions(); track opt) {
+					<option [value]="opt" [selected]="opt === pageSize()">{{ opt }}</option>
+				}
+			</select>
+		} @else {
+			<span class="text-muted-foreground">{{ pageSize() }}</span>
+		}
+	</div>
+}
+<div class="text-muted-foreground text-nowrap">
+	{{ rangeLabel() }}
+</div>
+<nav hlmPagination class="w-auto mx-0">
+	<ul hlmPaginationContent>
+		@if (showFirstLastButtons()) {
+			<li hlmPaginationItem>
+				<button
+					type="button"
+					class="inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+					[disabled]="disabled() || clampedPageIndex() === 0"
+					(click)="goToPage(0)"
+					aria-label="First page"
+				>
+					<ng-icon name="lucideChevronFirst" size="16" />
+				</button>
+			</li>
+		}
+		<li hlmPaginationItem>
+			<button
+				type="button"
+				class="inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+				[disabled]="disabled() || clampedPageIndex() === 0"
+				(click)="goToPage(clampedPageIndex() - 1)"
+				aria-label="Previous page"
+			>
+				<ng-icon name="lucideChevronLeft" size="16" />
+			</button>
+		</li>
+		<li hlmPaginationItem>
+			<button
+				type="button"
+				class="inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+				[disabled]="disabled() || clampedPageIndex() >= lastPage()"
+				(click)="goToPage(clampedPageIndex() + 1)"
+				aria-label="Next page"
+			>
+				<ng-icon name="lucideChevronRight" size="16" />
+			</button>
+		</li>
+		@if (showFirstLastButtons()) {
+			<li hlmPaginationItem>
+				<button
+					type="button"
+					class="inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+					[disabled]="disabled() || clampedPageIndex() >= lastPage()"
+					(click)="goToPage(lastPage())"
+					aria-label="Last page"
+				>
+					<ng-icon name="lucideChevronLast" size="16" />
+				</button>
+			</li>
+		}
+	</ul>
+</nav>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/paginator/paginator.ts

@@ -3,35 +3,91 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import { booleanAttribute, ChangeDetectionStrategy, Component, input, output } from '@angular/core';
-import { MatPaginator, type PageEvent } from '@angular/material/paginator';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+	output,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+	lucideChevronFirst,
+	lucideChevronLast,
+	lucideChevronLeft,
+	lucideChevronRight,
+} from '@ng-icons/lucide';
+import { HlmPaginationImports } from '@spartan-ng/styles/pagination';
+import type { PageEvent } from './types';
+
+export type { PageEvent } from './types';
 
-/**
- * Thin wrapper over Material's `mat-paginator`. Presentation only — the host
- * decides what each page change means by listening to `(page)`.
- */
 @Component({
 	selector: 'app-paginator',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [MatPaginator],
+	imports: [HlmPaginationImports, NgIcon],
+	providers: [
+		provideIcons({ lucideChevronFirst, lucideChevronLast, lucideChevronLeft, lucideChevronRight }),
+	],
+	host: { class: 'flex items-center justify-end gap-4 text-sm' },
 	templateUrl: './paginator.html',
 })
 export class PaginatorComponent {
-	/** Total item count; Material derives the page count as `ceil(length / pageSize)`. */
 	readonly length = input<number>(0);
-	/** Zero-based index of the current page. */
-	readonly pageIndex = input<number>(0);
-	/** Items shown per page. */
-	readonly pageSize = input<number>(10);
-	/** Selectable page sizes; omit/empty to hide the size selector. */
+	readonly pageIndex = model<number>(0);
+	readonly pageSize = model<number>(10);
 	readonly pageSizeOptions = input<readonly number[]>([]);
-	/** Disable navigation buttons and the size select (e.g. while loading). */
 	readonly disabled = input(false, { transform: booleanAttribute });
-	/** Hide the "Items per page" selector. */
 	readonly hidePageSize = input(false, { transform: booleanAttribute });
-	/** Show the first / last page jump buttons. */
 	readonly showFirstLastButtons = input(false, { transform: booleanAttribute });
-
-	/** Emitted when the user changes page or page size. */
 	readonly page = output<PageEvent>();
+
+	private static _uid = 0;
+	// Unique so the label→select association survives multiple paginators on a page.
+	protected readonly pageSizeLabelId = `app-paginator-page-size-${PaginatorComponent._uid++}`;
+
+	protected readonly lastPage = computed(() =>
+		Math.max(0, Math.ceil(this.length() / this.pageSize()) - 1),
+	);
+
+	protected readonly clampedPageIndex = computed(() =>
+		Math.max(0, Math.min(this.pageIndex(), this.lastPage())),
+	);
+
+	protected readonly rangeLabel = computed(() => {
+		const len = this.length();
+		if (len === 0) return '0 of 0';
+		const idx = this.clampedPageIndex();
+		const start = idx * this.pageSize() + 1;
+		const end = Math.min((idx + 1) * this.pageSize(), len);
+		return `${start} – ${end} of ${len}`;
+	});
+
+	protected goToPage(index: number): void {
+		const previousPageIndex = this.pageIndex();
+		this.pageIndex.set(index);
+		this.page.emit({
+			pageIndex: index,
+			previousPageIndex,
+			pageSize: this.pageSize(),
+			length: this.length(),
+		});
+	}
+
+	protected onPageSizeChange(event: Event): void {
+		const newSize = Number((event.target as HTMLSelectElement).value);
+		const previousPageIndex = this.pageIndex();
+		this.pageSize.set(newSize);
+		this.pageIndex.set(0);
+		this.page.emit({
+			pageIndex: 0,
+			previousPageIndex,
+			pageSize: newSize,
+			length: this.length(),
+		});
+	}
 }
+
+export const PaginatorImports = [PaginatorComponent] as const;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/paginator/types.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/** Payload emitted by PaginatorComponent's `(page)` output. */
+export interface PageEvent {
+	pageIndex: number;
+	previousPageIndex: number;
+	pageSize: number;
+	length: number;
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/popover/popover.html

@@ -1,41 +1,13 @@
-<span
-	cdkOverlayOrigin
-	#origin="cdkOverlayOrigin"
-	role="button"
-	tabindex="0"
-	[attr.aria-expanded]="open()"
-	(click)="toggle()"
-	(keydown.enter)="toggle()"
-	(keydown.space)="$event.preventDefault(); toggle()"
+<hlm-popover
+	[align]="align()"
+	[sideOffset]="sideOffset()"
+	[state]="open() ? 'open' : 'closed'"
+	(stateChanged)="onStateChanged($event)"
 >
-	<ng-content select="[trigger]" />
-</span>
-
-<ng-template
-	cdkConnectedOverlay
-	[cdkConnectedOverlayOrigin]="origin"
-	[cdkConnectedOverlayOpen]="open()"
-	[cdkConnectedOverlayHasBackdrop]="true"
-	cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
-	[cdkConnectedOverlayOffsetY]="sideOffset()"
-	[cdkConnectedOverlayPositions]="[
-		{
-			originX: align(),
-			originY: 'bottom',
-			overlayX: align(),
-			overlayY: 'top',
-		},
-		{
-			originX: align(),
-			originY: 'top',
-			overlayX: align(),
-			overlayY: 'bottom',
-		},
-	]"
-	(backdropClick)="close()"
-	(detach)="close()"
->
-	<div class="bg-white text-sm rounded-lg shadow-md ring-1 ring-black/10 outline-none">
+	<button hlmPopoverTrigger type="button" [class]="triggerClass()" [attr.aria-label]="ariaLabel()">
+		<ng-content select="[trigger]" />
+	</button>
+	<div hlmPopoverContent *hlmPopoverPortal>
 		<ng-content />
 	</div>
-</ng-template>
+</hlm-popover>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/popover/popover.ts

@@ -3,32 +3,23 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import { HlmPopoverImports } from '@spartan-ng/styles/popover';
 
-/**
- * Popover backed by CDK Overlay. Slots: `[trigger]` (anchor, toggles the
- * popover) and default (body). `open` is a two-way model; a backdrop click
- * closes it.
- */
 @Component({
 	selector: 'app-popover',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [CdkConnectedOverlay, CdkOverlayOrigin],
+	imports: [HlmPopoverImports],
 	templateUrl: './popover.html',
 })
 export class PopoverComponent {
-	/**
-	 * Two-way bindable open state. Supports `[(open)]`, a plain `[open]`
-	 * input, or listening to the auto-generated `(openChange)` event.
-	 */
 	readonly open = model<boolean>(false);
-
-	/** Panel alignment relative to the trigger. Defaults to below-start. */
 	readonly align = input<'start' | 'center' | 'end'>('start');
-
-	/** Vertical gap between the trigger and the panel, in px. */
 	readonly sideOffset = input<number>(4);
+	// The wrapper owns the single real trigger `<button>` (so callers project
+	// plain content, never a nested button); these style/label it.
+	readonly triggerClass = input<string>('');
+	readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
 
 	toggle(): void {
 		this.open.set(!this.open());
@@ -37,4 +28,10 @@ export class PopoverComponent {
 	close(): void {
 		this.open.set(false);
 	}
+
+	protected onStateChanged(state: 'open' | 'closed'): void {
+		this.open.set(state === 'open');
+	}
 }
+
+export const PopoverImports = [PopoverComponent] as const;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/select/select.html

@@ -1,24 +1,36 @@
-<mat-form-field
-	class="w-full"
-	[class]="'size-' + size()"
-	[appearance]="appearance()"
-	subscriptSizing="dynamic"
->
-	@if (label()) {
-		<mat-label>{{ label() }}</mat-label>
-	}
-	<mat-select
-		[multiple]="multiple()"
-		[placeholder]="placeholder()"
+@if (label()) {
+	<label hlmLabel [for]="labelId" class="mb-1.5 block">{{ label() }}</label>
+}
+@if (!multiple()) {
+	<hlm-select
+		[value]="value()"
+		(valueChange)="onSingleChange($event)"
 		[disabled]="disabled()"
-		[ngModel]="selection()"
-		(ngModelChange)="onSelectionChange($event)"
+		[itemToString]="itemToString"
 	>
-		@if (multiple()) {
-			<mat-select-trigger>{{ multiTriggerLabel() }}</mat-select-trigger>
-		}
-		@for (option of options(); track option.value) {
-			<mat-option [value]="option.value">{{ option.label }}</mat-option>
-		}
-	</mat-select>
-</mat-form-field>
+		<hlm-select-trigger [buttonId]="labelId" [size]="size()" [class]="triggerClasses()">
+			<hlm-select-value [placeholder]="placeholder()" />
+		</hlm-select-trigger>
+		<hlm-select-content *hlmSelectPortal>
+			@for (option of options(); track option.value) {
+				<hlm-select-item [value]="option.value">{{ option.label }}</hlm-select-item>
+			}
+		</hlm-select-content>
+	</hlm-select>
+} @else {
+	<hlm-select-multiple
+		[value]="$any(values())"
+		(valueChange)="onMultiChange($event)"
+		[disabled]="disabled()"
+		[itemToString]="itemToString"
+	>
+		<hlm-select-trigger [buttonId]="labelId" [size]="size()" [class]="triggerClasses()">
+			<hlm-select-value [placeholder]="placeholder()" />
+		</hlm-select-trigger>
+		<hlm-select-content *hlmSelectPortal>
+			@for (option of options(); track option.value) {
+				<hlm-select-item [value]="option.value">{{ option.label }}</hlm-select-item>
+			}
+		</hlm-select-content>
+	</hlm-select-multiple>
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/select/select.ts

@@ -4,69 +4,60 @@
  * For full license text, see the LICENSE.txt file
  */
 import {
-	booleanAttribute,
 	ChangeDetectionStrategy,
 	Component,
+	booleanAttribute,
 	computed,
 	input,
 	model,
 } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatFormFieldModule, type MatFormFieldAppearance } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
+import { HlmSelectImports } from '@spartan-ng/styles/select';
+import { HlmLabelImports } from '@spartan-ng/styles/label';
 import type { AppFieldSize } from '../field-size';
+import type { AppFieldAppearance } from '../field-appearance';
 
-/** Shape of an option rendered in the dropdown. */
 export interface AppSelectOption {
 	value: string;
 	label: string;
 }
 
-/** Thin wrapper over Material's `mat-form-field` + `mat-select`. */
 @Component({
 	selector: 'app-select',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [FormsModule, MatFormFieldModule, MatSelectModule],
+	imports: [HlmSelectImports, HlmLabelImports],
+	host: { class: 'block min-w-0' },
 	templateUrl: './select.html',
-	styleUrl: './select.scss',
 })
 export class SelectComponent {
-	/** Two-way bindable single-select value. Ignored when `multiple` is set. */
 	readonly value = model<string>('');
-
-	/** Two-way bindable multi-select values. Used only when `multiple` is `true`. */
 	readonly values = model<readonly string[]>([]);
-
-	/** Render checkbox options and allow more than one selection. */
 	readonly multiple = input(false, { transform: booleanAttribute });
-
 	readonly options = input<readonly AppSelectOption[]>([]);
 	readonly placeholder = input<string>('');
 	readonly label = input<string>('');
-	readonly disabled = input<boolean>(false);
-	readonly appearance = input<MatFormFieldAppearance>('outline');
-	/** Field height: `sm` = 24px, `default` = 32px, `lg` = 40px. */
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly appearance = input<AppFieldAppearance>('outline');
 	readonly size = input<AppFieldSize>('default');
 
-	/** Value handed to `mat-select`: the `values` array when `multiple`, else `value`. */
-	protected readonly selection = computed(() => (this.multiple() ? this.values() : this.value()));
+	private static _uid = 0;
+	protected readonly labelId = `app-select-${SelectComponent._uid++}`;
 
-	/** Multi-select trigger summary: the sole option's label, else "N selected". */
-	protected readonly multiTriggerLabel = computed(() => {
-		const selected = this.values();
-		if (selected.length === 1) {
-			const only = selected[0];
-			return this.options().find((o) => o.value === only)?.label ?? only;
-		}
-		return `${selected.length} selected`;
+	protected readonly itemToString = (value: string): string => {
+		return this.options().find((o) => o.value === value)?.label ?? value;
+	};
+
+	protected readonly triggerClasses = computed(() => {
+		if (this.appearance() === 'fill') return 'border-transparent bg-muted';
+		return '';
 	});
 
-	/** Single change handler — routes to the right model based on `multiple`. */
-	protected onSelectionChange(next: string | string[]): void {
-		if (this.multiple()) {
-			this.values.set((next as string[]) ?? []);
-		} else {
-			this.value.set((next as string) ?? '');
-		}
+	protected onSingleChange(event: string | null | undefined): void {
+		this.value.set(event ?? '');
+	}
+
+	protected onMultiChange(event: string[] | readonly string[] | null | undefined): void {
+		this.values.set(event ?? []);
 	}
 }
+
+export const SelectImports = [SelectComponent] as const;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/separator/separator.ts

@@ -3,54 +3,29 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import {
-	booleanAttribute,
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	input,
-} from '@angular/core';
-import { MatDivider } from '@angular/material/divider';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { BrnSeparator } from '@spartan-ng/brain/separator';
+import { hlmSeparatorClass } from '@spartan-ng/styles/separator';
+import { classes } from '@spartan-ng/styles/utils';
 
-/** Layout axis of the separator line. */
 export type AppSeparatorOrientation = 'horizontal' | 'vertical';
 
-const BASE_CLASSES = 'shrink-0';
-const ORIENTATION_CLASSES: Record<AppSeparatorOrientation, string> = {
-	horizontal: 'block w-full',
-	vertical: 'self-stretch',
-};
-
-/**
- * Divider built on Material's `mat-divider`. `decorative` (default) hides the
- * host from assistive tech (`role="none"`); when false it exposes
- * `role="separator"` + `aria-orientation`. The inner `mat-divider` is marked
- * `role="presentation"` so it never announces a duplicate separator.
- */
 @Component({
 	selector: 'app-separator',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [MatDivider],
-	templateUrl: './separator.html',
-	styleUrl: './separator.scss',
+	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
 	host: {
 		'data-slot': 'separator',
-		'[attr.data-orientation]': 'orientation()',
-		'[attr.role]': "decorative() ? 'none' : 'separator'",
-		'[attr.aria-orientation]':
-			"decorative() ? null : (orientation() === 'vertical' ? 'vertical' : 'horizontal')",
-		'[class]': 'hostClass()',
 	},
+	template: '',
 })
 export class SeparatorComponent {
 	readonly orientation = input<AppSeparatorOrientation>('horizontal');
 	readonly decorative = input(true, { transform: booleanAttribute });
-	/** Adds Material's horizontal inset margin so the line doesn't run edge-to-edge. */
-	readonly inset = input(false, { transform: booleanAttribute });
 
-	protected readonly isVertical = computed(() => this.orientation() === 'vertical');
-
-	protected readonly hostClass = computed(
-		() => `${BASE_CLASSES} ${ORIENTATION_CLASSES[this.orientation()]}`,
-	);
+	constructor() {
+		classes(() => hlmSeparatorClass);
+	}
 }
+
+export const SeparatorImports = [SeparatorComponent] as const;