@salesforce/ui-bundle-template-app-angular-template-b2x 11.60.0 → 11.62.1

package/dist/force-app/main/default/uiBundles/angularextapp/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;

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/components/ui/skeleton/skeleton.ts

@@ -4,21 +4,17 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { HlmSkeleton } from '@spartan-ng/styles/skeleton';
 
-/**
- * Loading skeleton — a pulsing block sized by host `class` utilities (e.g.
- * `class="h-4 w-32"`); it has no intrinsic size, so always set width/height.
- * `aria-hidden`, so announce loading via the container's `aria-busy`.
- */
 @Component({
 	selector: 'app-skeleton',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	templateUrl: './skeleton.html',
-	styleUrl: './skeleton.scss',
+	hostDirectives: [HlmSkeleton],
 	host: {
-		'data-slot': 'skeleton',
 		'aria-hidden': 'true',
-		class: 'bg-accent rounded-md',
 	},
+	template: '<ng-content />',
 })
 export class SkeletonComponent {}
+
+export const SkeletonImports = [SkeletonComponent] as const;

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/components/ui/spinner/spinner.ts

@@ -4,32 +4,25 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { MatProgressSpinnerModule, ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import { HlmSpinnerImports } from '@spartan-ng/styles/spinner';
+import { classes } from '@spartan-ng/styles/utils';
 
-/**
- * Thin wrapper over Material's `mat-progress-spinner`. Defaults to an
- * indeterminate 24px spinner. `ariaLabel` names the `role="progressbar"`.
- */
 @Component({
 	selector: 'app-spinner',
+	imports: [HlmSpinnerImports],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [MatProgressSpinnerModule],
-	template: `
-		<mat-progress-spinner
-			[mode]="mode()"
-			[diameter]="diameter()"
-			[value]="value()"
-			[attr.aria-label]="ariaLabel()"
-		/>
-	`,
+	host: {
+		role: 'status',
+		'[attr.aria-label]': 'ariaLabel()',
+	},
+	template: `<hlm-spinner />`,
 })
 export class SpinnerComponent {
-	readonly diameter = input<number>(24);
-	readonly mode = input<ProgressSpinnerMode>('indeterminate');
+	public readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
 
-	/** Progress value (0–100) used only when `mode` is `determinate`. */
-	readonly value = input<number>(0);
-
-	/** Accessible name announced by assistive tech. */
-	readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
+	constructor() {
+		classes(() => 'text-[length:--spacing(4)]');
+	}
 }
+
+export const SpinnerImports = [SpinnerComponent] as const;

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/authentication/auth-form/auth-form.html

@@ -14,8 +14,7 @@
 		</app-status-alert>
 		} } @if (success()) {
 		<app-status-alert variant="success" [message]="success()!" />
-		}
-
+		} @if (!showAuthAlert()) {
 		<form (ngSubmit)="onSubmit()">
 			<ng-content />
 			<app-submit-button
@@ -29,6 +28,6 @@
 
 		@if (footer(); as f) {
 		<app-footer-link [text]="f.text ?? ''" [to]="f.link" [linkText]="f.linkText" />
-		}
+		} }
 	</div>
 </app-card-layout>

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/authentication/menu/auth-menu/auth-menu.html

@@ -1,26 +1,36 @@
 @if (loading()) {
 <app-skeleton class="size-8 rounded-full" />
 } @else {
-<button matIconButton [matMenuTriggerFor]="menu" aria-label="User menu">
-	<mat-icon>person</mat-icon>
-</button>
+<app-dropdown-menu
+	align="end"
+	aria-label="User menu"
+	triggerClass="inline-flex size-8 items-center justify-center rounded-full hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+>
+	<app-icon trigger name="person" size="24" />
 
-<mat-menu #menu="matMenu" xPosition="before">
-	@if (isAuthenticated()) {
-	<div class="px-3 py-2 font-medium truncate">{{ user()?.name }}</div>
-	<hr />
-	<a mat-menu-item [routerLink]="routes.PROFILE.PATH">Edit Profile</a>
-	<ng-content select="[menuItems]" />
-	<button mat-menu-item type="button" (click)="onLogout()">Sign Out</button>
-	} @else {
-	<a mat-menu-item [routerLink]="routes.LOGIN.PATH">
-		<mat-icon>login</mat-icon>
-		<span>Log In</span>
-	</a>
-	<a mat-menu-item [routerLink]="routes.REGISTER.PATH">
-		<mat-icon>person_add</mat-icon>
-		<span>Register</span>
-	</a>
-	}
-</mat-menu>
+	<ng-template appDropdownMenuContent>
+		@if (isAuthenticated()) {
+		<app-dropdown-menu-label class="truncate">{{ user()?.name }}</app-dropdown-menu-label>
+		<app-dropdown-menu-separator />
+		<a appDropdownMenuItem [routerLink]="routes.PROFILE.PATH">
+			<app-icon name="editProfile" />
+			<span>Edit Profile</span>
+		</a>
+		<ng-content select="[menuItems]" />
+		<button appDropdownMenuItem type="button" (triggered)="onLogout()">
+			<app-icon name="logout" />
+			<span>Sign Out</span>
+		</button>
+		} @else {
+		<a appDropdownMenuItem [routerLink]="routes.LOGIN.PATH">
+			<app-icon name="login" />
+			<span>Log In</span>
+		</a>
+		<a appDropdownMenuItem [routerLink]="routes.REGISTER.PATH">
+			<app-icon name="personAdd" />
+			<span>Register</span>
+		</a>
+		}
+	</ng-template>
+</app-dropdown-menu>
 }

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/authentication/menu/auth-menu/auth-menu.ts

@@ -5,31 +5,19 @@
  */
 import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
 import { RouterLink } from "@angular/router";
-import { MatButtonModule } from "@angular/material/button";
-import { MatIconModule } from "@angular/material/icon";
-import { MatMenuModule } from "@angular/material/menu";
+import { DropdownMenuImports } from "../../../../components/ui/dropdown-menu/dropdown-menu";
+import { IconComponent } from "../../../../components/ui/icon/icon";
 import { SkeletonComponent } from "../../../../components/ui/skeleton/skeleton";
 import { AuthService } from "../../auth/auth.service";
 import { ROUTES } from "../../config/authentication.config";
 
-/**
- * Auth menu — the Angular port of the React `AuthMenu`. A header dropdown that
- * shows the authenticated user's name + Edit Profile / Sign Out, or Log In /
- * Register for guests. While auth state is loading it shows a skeleton avatar.
- *
- * Owns its own trigger and `mat-menu` (the canonical Material menu shape): an
- * icon-only person button carries `matMenuTriggerFor`, so the trigger — with its
- * `aria-haspopup` / `aria-expanded` / keyboard handling — sits on a real focusable
- * `<button>`. Extra items can be inserted before Sign Out via `[menuItems]`
- * projection.
- *
- * Reads `AuthService` directly (the `providedIn: 'root'` replacement for
- * `useAuth`), so no inputs are needed for auth state.
- */
+// Header dropdown: shows the user's name + Edit Profile / Sign Out, or Log In
+// / Register for guests. Shows a skeleton avatar while auth state is loading.
+// Extra items can be inserted before Sign Out via [menuItems] projection.
 @Component({
 	selector: "app-auth-menu",
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [RouterLink, MatButtonModule, MatIconModule, MatMenuModule, SkeletonComponent],
+	imports: [RouterLink, IconComponent, SkeletonComponent, ...DropdownMenuImports],
 	templateUrl: "./auth-menu.html",
 })
 export class AuthMenuComponent {

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/authentication/session/session.html

@@ -27,10 +27,10 @@
 		</div>
 
 		<div class="flex gap-4 justify-end">
-			<app-button variant="outlined" (clicked)="onLogoutClick()">
+			<app-button appearance="outlined" (clicked)="onLogoutClick()">
 				{{ labels.logoutButton }}
 			</app-button>
-			<app-button variant="filled" (clicked)="onContinue()">
+			<app-button appearance="filled" (clicked)="onContinue()">
 				{{ labels.continueButton }}
 			</app-button>
 		</div>

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/authentication/submit-button/submit-button.html

@@ -1,5 +1,9 @@
-<app-button type="submit" [disabled]="submitting() || disabled()" class="w-full">
-	@if (submitting()) {
-	<app-spinner [diameter]="16" aria-hidden="true" />
-	{{ loadingLabel() }} } @else { {{ label() }} }
+<app-button
+	type="submit"
+	class="w-full"
+	[loading]="submitting()"
+	[loadingLabel]="loadingLabel()"
+	[disabled]="disabled()"
+>
+	{{ label() }}
 </app-button>

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/authentication/submit-button/submit-button.ts

@@ -5,31 +5,19 @@
  */
 import { ChangeDetectionStrategy, Component, input } from "@angular/core";
 import { ButtonComponent } from "../../../components/ui/button/button";
-import { SpinnerComponent } from "../../../components/ui/spinner/spinner";
 
-/**
- * Submit button that reflects form submission state — the Angular port of the
- * React `SubmitButton`, which subscribed to `form.isSubmitting`.
- *
- * Reactive Forms have no equivalent subscription; instead the parent passes the
- * form's `pending`/submitting flag via `[submitting]` and the caller-provided
- * `[disabled]`. While submitting the button is disabled and shows a spinner with
- * the loading label — the same UX (prevents double-submit + gives feedback).
- */
+// Submit button reflecting form submission state: the parent passes its
+// submitting flag via [submitting]. While submitting the base button is
+// disabled and shows a spinner with the loading label (prevents double-submit).
 @Component({
 	selector: "app-submit-button",
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [ButtonComponent, SpinnerComponent],
+	imports: [ButtonComponent],
 	templateUrl: "./submit-button.html",
-	styleUrl: "./submit-button.scss",
 })
 export class SubmitButtonComponent {
-	/** Button text when not submitting. */
 	readonly label = input.required<string>();
-	/** Button text while submitting. */
 	readonly loadingLabel = input<string>("Submitting…");
-	/** True while the form submission is in flight. */
 	readonly submitting = input<boolean>(false);
-	/** Additional disabled condition from the caller (e.g. already authenticated). */
 	readonly disabled = input<boolean>(false);
 }

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/breadcrumb/breadcrumb.html

@@ -6,18 +6,8 @@
 		<li class="inline-flex items-center gap-1.5">
 			<a [routerLink]="'/'" class="hover:text-foreground transition-colors">{{ homeLabel() }}</a>
 		</li>
-		<li aria-hidden="true" class="[&>svg]:size-3.5">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<polyline points="9 18 15 12 9 6" />
-			</svg>
+		<li aria-hidden="true">
+			<app-icon name="chevronRight" size="14px" class="flex" />
 		</li>
 		} @if (isDetailView()) {
 		<li class="inline-flex items-center gap-1.5">
@@ -25,18 +15,8 @@
 				>{{ listLabel() }}</a
 			>
 		</li>
-		<li aria-hidden="true" class="[&>svg]:size-3.5">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<polyline points="9 18 15 12 9 6" />
-			</svg>
+		<li aria-hidden="true">
+			<app-icon name="chevronRight" size="14px" class="flex" />
 		</li>
 		<li class="inline-flex items-center gap-1.5">
 			@if (loading() && !recordName()) {

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/breadcrumb/breadcrumb.ts

@@ -5,36 +5,23 @@
  */
 import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
 import { RouterLink } from "@angular/router";
+import { IconComponent } from "../../../components/ui/icon/icon";
 import { SkeletonComponent } from "../../../components/ui/skeleton/skeleton";
 
-/**
- * Object-search breadcrumb — Home > Records list > (optional) Record name.
- *
- * Mirrors the React `ObjectBreadcrumb`. Renders the list-only crumb by default
- * and switches to the detail-view crumb (with record name + skeleton fallback)
- * as soon as `loading` or `recordName` is set. Uses Angular `routerLink` where
- * the React version uses `react-router`'s `Link`.
- */
+/** Object-search breadcrumb — Home > Records list > (optional) Record name. */
 @Component({
 	selector: "app-object-breadcrumb",
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [RouterLink, SkeletonComponent],
+	imports: [RouterLink, IconComponent, SkeletonComponent],
 	templateUrl: "./breadcrumb.html",
 })
 export class ObjectBreadcrumbComponent {
-	/** Router path for the object list view (e.g. `/accounts`). */
 	readonly listPath = input.required<string>();
-	/** Label for the list crumb (e.g. `Accounts`). */
 	readonly listLabel = input.required<string>();
-	/** Record name for the detail-view leaf crumb; omit for list-only view. */
 	readonly recordName = input<string | undefined>(undefined);
-	/** Show a skeleton in the leaf crumb while the record is loading. */
 	readonly loading = input<boolean>(false);
-	/** Prepend a Home crumb (default `true`). */
 	readonly includeHome = input<boolean>(true);
-	/** Label for the Home crumb (default `Home`). */
 	readonly homeLabel = input<string>("Home");
 
-	/** `true` when the crumb should render list + record leaves. */
 	protected readonly isDetailView = computed(() => this.loading() || !!this.recordName());
 }

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/filters/date-filter.ts

@@ -85,7 +85,7 @@ export class DateFilterComponent {
 		if (date) this.emit(op, date);
 	}
 
-	protected onDateChange(date: Date | null): void {
+	protected onDateChange(date: Date | null | undefined): void {
 		const cfg = this.config();
 		if (!date) {
 			this.state.removeFilter(cfg.field);

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/filters/date-range-filter.html

@@ -1,6 +1,7 @@
-<app-filter-field-wrapper [label]="config().label" [helpText]="config().helpText">
+<app-filter-field-wrapper [helpText]="config().helpText">
 	<app-date-range-picker
 		class="w-full"
+		[label]="config().label"
 		startPlaceholder="Start"
 		endPlaceholder="End"
 		[readonly]="true"

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/filters/date-range-filter.ts

@@ -4,8 +4,6 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
-// Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
-// it lands at uiBundles/<target>/src/app/components/ui/date-range-picker/..., three levels up.
 import {
 	DateRange,
 	DateRangePickerComponent,
@@ -16,13 +14,8 @@ import { toDate, toDateString } from "./date-filter";
 import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
- * Date range filter — a single two-ended range picker. Emits a `daterange`
- * (or `datetimerange`) filter with `min` / `max` as `YYYY-MM-DD` strings; the
- * filter builder wires each end into a `gte` / `lte` clause.
- *
- * Thin bridge over the base `app-date-range-picker` (Material's
- * `mat-date-range-picker`): it maps the picker's `DateRange<Date>` value to and
- * from the `min` / `max` string split the filter state stores.
+ * Date range filter — a two-ended range picker. Emits a `daterange` (or
+ * `datetimerange`) filter with `min` / `max` as `YYYY-MM-DD` strings.
  */
 @Component({
 	selector: "app-date-range-filter",
@@ -33,17 +26,15 @@ import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 export class DateRangeFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);
 
-	/** Field config: `field`, `label`, `helpText`, ... */
 	readonly config = input.required<FilterFieldConfig>();
-	/** Underlying filter type — `'daterange'` (default) or `'datetimerange'`. */
 	readonly filterType = input<FilterFieldType>("daterange");
 
 	private readonly active = computed(() => this.state.filterFor(this.config().field));
 
-	/** The active filter's `min` / `max` strings surfaced as a picker range. */
-	protected readonly range = computed<DateRange<Date>>(
-		() => new DateRange(toDate(this.active()?.min), toDate(this.active()?.max)),
-	);
+	protected readonly range = computed<DateRange<Date>>(() => ({
+		start: toDate(this.active()?.min),
+		end: toDate(this.active()?.max),
+	}));
 
 	/** Cap the picker at today when the field can't hold a future date. */
 	protected readonly maxDate = computed<Date | null>(() =>

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/filters/filter-field-wrapper.html

@@ -1,5 +1,7 @@
 <div class="space-y-1">
+	@if (label()) {
 	<app-label [for]="htmlFor()">{{ label() }}</app-label>
+	}
 	<ng-content />
 	<div class="min-h-4">
 		@if (error(); as err) {

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/filters/filter-field-wrapper.ts

@@ -4,20 +4,9 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-// Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
-// it lands at uiBundles/<target>/src/app/components/ui/label/..., three levels up from this
-// filter folder (app/object-search/filters/ -> app/components/ui/).
+// Post-compose, this lands 3 levels up at app/components/ui/label/__inherit__label.
 import { LabelComponent } from "../../../components/ui/label/label";
 
-/**
- * Standard label + control + help/error scaffold shared by every filter
- * component (the Angular analogue of the React `FilterFieldWrapper`).
- *
- * The control itself is content-projected so each filter can supply the
- * primitive that fits its data type (input, select, popover, date picker, ...)
- * while the wrapper keeps the layout, label, and error/help affordances
- * consistent across the search page.
- */
 @Component({
 	selector: "app-filter-field-wrapper",
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -25,12 +14,8 @@ import { LabelComponent } from "../../../components/ui/label/label";
 	templateUrl: "./filter-field-wrapper.html",
 })
 export class FilterFieldWrapperComponent {
-	/** Visible field label rendered above the control. */
-	readonly label = input.required<string>();
-	/** Optional `for` attribute forwarded to the underlying `<label>`. */
+	readonly label = input<string>("");
 	readonly htmlFor = input<string | null>(null);
-	/** Advisory copy rendered below the control when there is no error. */
 	readonly helpText = input<string | undefined>(undefined);
-	/** Validation message; when set, replaces the help text. */
 	readonly error = input<string | undefined>(undefined);
 }

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/filters/multi-select-filter.html

@@ -1,6 +1,7 @@
-<app-filter-field-wrapper [label]="config().label" [helpText]="config().helpText">
+<app-filter-field-wrapper [helpText]="config().helpText">
 	<app-select
 		multiple
+		[label]="config().label"
 		[size]="size()"
 		[options]="config().options ?? []"
 		[placeholder]="placeholder()"

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/filters/numeric-range-filter.ts

@@ -16,11 +16,6 @@ import {
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Subject } from "rxjs";
 import { debounceTime } from "rxjs/operators";
-import { MatInputModule } from "@angular/material/input";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { FormsModule } from "@angular/forms";
-// Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
-// it lands at uiBundles/<target>/src/app/components/ui/input/..., three levels up.
 import { InputComponent } from "../../../components/ui/input/input";
 import { ObjectSearchStateService } from "../object-search-state.service";
 import { FILTER_DEBOUNCE_MS } from "../utils/debounce";
@@ -30,34 +25,21 @@ import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 /**
  * Numeric range filter — paired `min` / `max` inputs whose committed values are
  * written as strings on a `type: 'numeric'` filter (numeric coercion happens
- * in `buildSingleFilter`).
- *
- * Local signals drive the inputs immediately; a trailing debounce commits the
- * pair, but only when the range is self-consistent (`min <= max`) and within
- * `boundMin` / `boundMax` if provided — an inverted or out-of-bounds pair
- * shows the same inline error the React reference renders and skips the write.
+ * in `buildSingleFilter`). A trailing debounce commits the pair, skipping
+ * writes when the range is inverted or out of `boundMin` / `boundMax`.
  */
 @Component({
 	selector: "app-numeric-range-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [
-		InputComponent,
-		FilterFieldWrapperComponent,
-		FormsModule,
-		MatFormFieldModule,
-		MatInputModule,
-	],
+	imports: [InputComponent, FilterFieldWrapperComponent],
 	templateUrl: "./numeric-range-filter.html",
 })
 export class NumericRangeFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);
 	private readonly destroyRef = inject(DestroyRef);
 
-	/** Field config: `field`, `label`, `helpText`, ... */
 	readonly config = input.required<FilterFieldConfig>();
-	/** Optional lower bound accepted by the field (used for validation only). */
 	readonly boundMin = input<number | undefined>(undefined);
-	/** Optional upper bound accepted by the field (used for validation only). */
 	readonly boundMax = input<number | undefined>(undefined);
 
 	protected readonly localMin = signal<string>("");

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/filters/search-filter.html

@@ -1,6 +1,6 @@
-<app-filter-field-wrapper [label]="config().label" [htmlFor]="inputId()">
-	<app-input
-		type="search"
+<app-filter-field-wrapper [label]="config().label" [htmlFor]="fieldId()">
+	<app-search-bar
+		[inputId]="fieldId()"
 		[placeholder]="config().placeholder ?? 'Search...'"
 		[value]="localValue()"
 		(valueChange)="onValueChange($event)"