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

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/pages/account-detail/account-detail-page.ts

@@ -7,16 +7,13 @@ import { ChangeDetectionStrategy, Component, computed, inject, signal } from "@a
 import { ActivatedRoute, Router } from "@angular/router";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { map } from "rxjs/operators";
-// Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
-// they land at uiBundles/<target>/src/app/components/ui/..., three levels up from this
-// page folder (app/features/account-search/ -> app/components/ui/).
 import { AlertComponent } from "../../components/ui/alert/alert";
+import { IconComponent } from "../../components/ui/icon/icon";
 import { ButtonComponent } from "../../components/ui/button/button";
 import { CardComponent, CardContentComponent } from "../../components/ui/card/card";
 import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible";
 import { SeparatorComponent } from "../../components/ui/separator/separator";
 import { SkeletonComponent } from "../../components/ui/skeleton/skeleton";
-// Object-search feature building blocks (Waves 1-2), two levels up.
 import { ObjectBreadcrumbComponent } from "../../features/object-search/breadcrumb/breadcrumb";
 import { createAsyncData } from "../../utils/async-data";
 import {
@@ -26,13 +23,11 @@ import {
 } from "../../features/object-search/utils/field-utils";
 import { AccountSearchService } from "../../api/account/account-search.service";
 
-/** `Intl` options for the created / last-modified timestamps (matches React). */
 const DATE_TIME_OPTIONS: Intl.DateTimeFormatOptions = {
 	dateStyle: "medium",
 	timeStyle: "short",
 };
 
-/** A `{ label, value }` pair rendered in a field grid. */
 interface Field {
 	label: string;
 	value: string | null;
@@ -40,21 +35,12 @@ interface Field {
 	telephone?: boolean;
 }
 
-/**
- * Account detail page. The Angular analogue of the React
- * `AccountObjectDetailPage`: a breadcrumb plus a card of collapsible sections
- * (top fields, Additional / Address / System information), with loading,
- * error, and not-found states.
- *
- * The record id comes from the `:recordId` route param (reactively, so a
- * client-side nav between two detail routes refetches). Data flows through
- * {@link createAsyncData} for latest-wins fetching.
- */
 @Component({
 	selector: "app-account-detail-page",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [
 		AlertComponent,
+		IconComponent,
 		ButtonComponent,
 		CardComponent,
 		CardContentComponent,
@@ -64,14 +50,13 @@ interface Field {
 		ObjectBreadcrumbComponent,
 	],
 	templateUrl: "./account-detail-page.html",
-	styleUrl: "./account-detail-page.scss",
 })
 export class AccountDetailPageComponent {
 	private readonly service = inject(AccountSearchService);
 	private readonly route = inject(ActivatedRoute);
 	private readonly router = inject(Router);
 
-	/** Reactive `:recordId` param — drives (and re-drives) the fetch. */
+	// Reactive param so a client-side nav between two detail routes refetches.
 	private readonly recordId = toSignal(
 		this.route.paramMap.pipe(map((p) => p.get("recordId") ?? "")),
 		{ initialValue: this.route.snapshot.paramMap.get("recordId") ?? "" },
@@ -84,15 +69,12 @@ export class AccountDetailPageComponent {
 	protected readonly account = this.result.data;
 	protected readonly loading = this.result.loading;
 	protected readonly error = this.result.error;
-	/** True once a resolved fetch returned no record (distinct from loading). */
 	protected readonly notFound = computed(() => !this.loading() && !this.error() && !this.account());
 
-	/** Per-section collapsible open state (all default open, matching React). */
 	protected readonly additionalOpen = signal<boolean>(true);
 	protected readonly addressOpen = signal<boolean>(true);
 	protected readonly systemOpen = signal<boolean>(true);
 
-	/** Placeholder rows for skeleton field grids. */
 	protected readonly skeletonRows = [0, 1, 2];
 
 	// -- Breadcrumb leaf label -------------------------------------------------
@@ -184,12 +166,10 @@ export class AccountDetailPageComponent {
 		return [fieldValue(name ?? null), formatted].filter(Boolean).join(" ") || null;
 	}
 
-	/** Navigate back to the previous view (mirrors the React `navigate(-1)`). */
 	protected goBack(): void {
 		void this.router.navigate(["/accounts"]);
 	}
 
-	/** Full page reload retry, matching the React "Retry" affordance. */
 	protected reload(): void {
 		window.location.reload();
 	}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/pages/account-search/account-search-page.html

@@ -4,7 +4,6 @@
 	<h1 class="text-2xl font-bold mb-4">Search Accounts</h1>
 
 	<div class="flex flex-col lg:flex-row gap-6">
-		<!-- Sidebar — Filter Panel -->
 		<aside class="w-full lg:w-80 shrink-0">
 			<app-collapsible title="Filters" [(open)]="filtersOpen">
 				<div class="space-y-1">
@@ -19,7 +18,6 @@
 			</app-collapsible>
 		</aside>
 
-		<!-- Main area — Sort + Results -->
 		<div class="flex-1 min-w-0">
 			<div class="flex flex-wrap items-center gap-2 mb-4">
 				<app-sort-control [sortFields]="sortConfigs" />
@@ -74,22 +72,7 @@
 				</ul>
 				} @else {
 				<div class="flex flex-col items-center justify-center py-16 text-center">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="size-12 text-muted-foreground mb-4"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						aria-hidden="true"
-					>
-						<path d="m13.5 8.5-5 5" />
-						<path d="m8.5 8.5 5 5" />
-						<circle cx="11" cy="11" r="8" />
-						<path d="m21 21-4.3-4.3" />
-					</svg>
+					<app-icon name="noResults" size="3rem" class="text-muted-foreground mb-4" />
 					<h2 class="text-lg font-semibold mb-1">No accounts found</h2>
 					<p class="text-sm text-muted-foreground">
 						Try adjusting your filters or search criteria.
@@ -98,7 +81,6 @@
 				}
 			</div>
 
-			<!-- Pagination — always visible, disabled while loading or on error -->
 			<app-pagination-controls
 				[totalCount]="totalCount()"
 				[hasNextPage]="hasNextPage()"

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/pages/account-search/account-search-page.ts

@@ -5,13 +5,10 @@
  */
 import { ChangeDetectionStrategy, Component, computed, inject, signal } from "@angular/core";
 import { RouterLink } from "@angular/router";
-// Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
-// they land at uiBundles/<target>/src/app/components/ui/..., three levels up from this
-// page folder (app/features/account-search/ -> app/components/ui/).
 import { AlertComponent } from "../../components/ui/alert/alert";
+import { IconComponent } from "../../components/ui/icon/icon";
 import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible";
 import { SkeletonComponent } from "../../components/ui/skeleton/skeleton";
-// Object-search feature building blocks (Waves 1-2), two levels up.
 import { ObjectBreadcrumbComponent } from "../../features/object-search/breadcrumb/breadcrumb";
 import { SortControlComponent } from "../../features/object-search/sort-control/sort-control";
 import { ActiveFiltersComponent } from "../../features/object-search/filters/active-filters";
@@ -37,18 +34,14 @@ import {
 	type AccountSearchOptions,
 } from "../../api/account/account-search.service";
 
-/** Cursor-pagination config for the account search (mirrors the React reference). */
 const PAGINATION_CONFIG: PaginationConfig = {
 	defaultPageSize: 7,
 	validPageSizes: [7, 14, 28, 42],
 };
 
-/**
- * Filter field configs — the single source of truth for URL (de)serialization
- * and GraphQL `where` building. The picklist option lists for Industry / Type
- * are filled in at runtime (see the component's computed configs) from the
- * distinct-value aggregate queries.
- */
+// Single source of truth for URL (de)serialization and GraphQL `where`
+// building. Picklist options for Industry / Type are filled in at runtime
+// (see the component's computed configs) from the distinct-value queries.
 const FILTER_CONFIGS: FilterFieldConfig[] = [
 	{
 		field: "search",
@@ -70,7 +63,6 @@ const FILTER_CONFIGS: FilterFieldConfig[] = [
 	},
 ];
 
-/** Sortable fields exposed by the sort control (mirrors the React reference). */
 const ACCOUNT_SORT_CONFIGS: SortFieldConfig[] = [
 	{ field: "Name", label: "Name" },
 	{ field: "AnnualRevenue", label: "Annual Revenue" },
@@ -78,20 +70,9 @@ const ACCOUNT_SORT_CONFIGS: SortFieldConfig[] = [
 	{ field: "CreatedDate", label: "Created Date" },
 ];
 
-/**
- * Account search / list page. The Angular analogue of the React `AccountSearch`
- * example page: a sidebar filter panel (Card + Collapsible) plus a main results
- * area with sort control, active-filter chips, a results list, and cursor
- * pagination.
- *
- * State lives in a page-scoped {@link ObjectSearchStateService} (provided here,
- * NOT in root) so each search page owns its own filters / sort / cursor stack.
- * The filter components projected into the sidebar inject that same instance.
- *
- * Data flows through {@link createAsyncData}: whenever the derived query args
- * (where / orderBy / pageSize / afterCursor) change, the search re-runs with
- * latest-wins semantics.
- */
+// State lives in a page-scoped ObjectSearchStateService (provided here, NOT
+// in root) so each search page owns its own filters / sort / cursor stack;
+// the filter components projected into the sidebar inject that same instance.
 @Component({
 	selector: "app-account-search-page",
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -99,6 +80,7 @@ const ACCOUNT_SORT_CONFIGS: SortFieldConfig[] = [
 	imports: [
 		RouterLink,
 		AlertComponent,
+		IconComponent,
 		CollapsibleComponent,
 		SkeletonComponent,
 		ObjectBreadcrumbComponent,
@@ -119,21 +101,16 @@ export class AccountSearchPageComponent {
 	private readonly service = inject(AccountSearchService);
 	private readonly state = inject(ObjectSearchStateService);
 
-	/** Sortable field configs surfaced to the sort control. */
 	protected readonly sortConfigs = ACCOUNT_SORT_CONFIGS;
-	/** Allowed page sizes forwarded to the pagination controls. */
 	protected readonly pageSizeOptions = PAGINATION_CONFIG.validPageSizes;
 
-	/** Collapsible open state for the sidebar filter panel. */
 	protected readonly filtersOpen = signal<boolean>(true);
 
-	/** Derived, API-ready `where` / `orderBy` signals from the shared state. */
 	private readonly query = this.state.init<
 		AccountSearchOptions["where"],
 		AccountSearchOptions["orderBy"]
 	>(FILTER_CONFIGS, PAGINATION_CONFIG);
 
-	/** Live page-size / cursor signals from the shared state. */
 	protected readonly pageSize = this.state.pageSize;
 	protected readonly hasPreviousPage = this.state.hasPreviousPage;
 
@@ -177,7 +154,6 @@ export class AccountSearchPageComponent {
 	protected readonly hasNextPage = computed(() => this.pageInfo()?.hasNextPage ?? false);
 	protected readonly endCursor = computed(() => this.pageInfo()?.endCursor ?? undefined);
 
-	/** Non-null account nodes from the current page's edges. */
 	protected readonly nodes = computed<AccountSearchNode[]>(() => {
 		const edges = this.result.data()?.edges ?? [];
 		const out: AccountSearchNode[] = [];
@@ -187,15 +163,12 @@ export class AccountSearchPageComponent {
 		return out;
 	});
 
-	/** Pagination controls (and the results list) are inert while fetching/errored. */
 	protected readonly controlsDisabled = computed(() => this.loading() || !!this.error());
 
-	/** Placeholder rows for the loading skeleton — one per requested page size. */
 	protected readonly skeletonRows = computed(() =>
 		Array.from({ length: this.pageSize() }, (_, i) => i),
 	);
 
-	/** Result-count copy above the list, matching the React reference wording. */
 	protected readonly resultCountLabel = computed(() => {
 		const total = this.totalCount();
 		const shown = this.nodes().length;
@@ -205,7 +178,6 @@ export class AccountSearchPageComponent {
 		return `Showing ${shown} account${shown !== 1 ? "s" : ""}`;
 	});
 
-	/** Display helpers for the results list (mirrors `fieldValue` in the template). */
 	protected name(node: AccountSearchNode): string {
 		return fieldValue(node.Name) ?? "—";
 	}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/pages/home/home.html

@@ -1,6 +1,17 @@
-<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-	<div class="text-center">
-		<h1 class="text-4xl font-bold text-gray-900 mb-4">Home</h1>
-		<p class="text-lg text-gray-600 mb-8">Welcome to your Angular application.</p>
+<main class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="flex items-center gap-6 mb-6">
+		<h1 class="text-2xl font-bold">Account Search</h1>
+		<app-button appearance="outlined" size="sm" (clicked)="browseAll()"
+			>Browse All Accounts</app-button
+		>
 	</div>
+	<form class="flex gap-2 items-end" (submit)="onSubmit($event)">
+		<app-search-bar
+			class="flex-1"
+			placeholder="Search by name, phone, or industry..."
+			ariaLabel="Search accounts"
+			[(value)]="term"
+		/>
+		<app-button type="submit" [disabled]="!canSearch()">Search</app-button>
+	</form>
 </main>

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/pages/home/home.spec.ts

@@ -1,23 +1,25 @@
-import { TestBed } from '@angular/core/testing';
-import { HomeComponent } from './home';
+import { TestBed } from "@angular/core/testing";
+import { provideRouter } from "@angular/router";
+import { HomeComponent } from "./home";
 
-describe('HomeComponent', () => {
+describe("HomeComponent", () => {
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
 			imports: [HomeComponent],
+			providers: [provideRouter([])],
 		}).compileComponents();
 	});
 
-	it('should create the component', () => {
+	it("should create the component", () => {
 		const fixture = TestBed.createComponent(HomeComponent);
 		const component = fixture.componentInstance;
 		expect(component).toBeTruthy();
 	});
 
-	it('should render main landmark', async () => {
+	it("should render main landmark", async () => {
 		const fixture = TestBed.createComponent(HomeComponent);
 		await fixture.whenStable();
 		const compiled = fixture.nativeElement as HTMLElement;
-		expect(compiled.querySelector('main')).toBeTruthy();
+		expect(compiled.querySelector("main")).toBeTruthy();
 	});
 });

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/pages/home/home.ts

@@ -3,11 +3,63 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from "@angular/core";
+import { Router } from "@angular/router";
+// Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
+// they land at uiBundles/<target>/src/app/components/ui/{button,input}/..., three levels
+// up from this page folder (app/pages/home/ -> app/components/ui/).
+import { ButtonComponent } from "../../components/ui/button/button";
+import { SearchBarComponent } from "../../features/object-search/search-bar/search-bar";
 
+/**
+ * Account-search landing page. Mirrors the React `Home` page: a single search
+ * box plus a "Browse All Accounts" shortcut. Submitting navigates to the
+ * `accounts` list, carrying the typed term as the `q` query param so the search
+ * page's {@link ObjectSearchStateService} seeds the multi-field search filter.
+ *
+ * Named `HomeComponent` (selector `app-home`) so it overwrites the base app's
+ * placeholder home at compose, leaving the composed app with a single `home`
+ * component.
+ *
+ * Uses the presentational `app-search-bar` (icon + input) with its own local
+ * `term` signal and submit-to-navigate flow — Home has no shared search state;
+ * it just seeds `?q=` and routes into the search page.
+ */
 @Component({
-	selector: 'app-home',
+	selector: "app-home",
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	templateUrl: './home.html',
+	imports: [ButtonComponent, SearchBarComponent],
+	templateUrl: "./home.html",
 })
-export class HomeComponent {}
+export class HomeComponent {
+	private readonly router = inject(Router);
+
+	/** Minimum characters required before a search can be submitted. */
+	private static readonly MIN_SEARCH_LENGTH = 3;
+
+	/** Bound to the search input; forwarded as `?q=` on submit. */
+	protected readonly term = signal<string>("");
+
+	/** True once the trimmed term meets the minimum length — gates the Search button. */
+	protected readonly canSearch = computed(
+		() => this.term().trim().length >= HomeComponent.MIN_SEARCH_LENGTH,
+	);
+
+	/**
+	 * Navigate to the search page, seeding the search term. No-op unless the
+	 * trimmed term meets the minimum length (covers both the button click and the
+	 * Enter/submit path).
+	 */
+	protected onSubmit(event: Event): void {
+		event.preventDefault();
+		if (!this.canSearch()) return;
+		this.browseAll(this.term().trim());
+	}
+
+	/** Go to the accounts list, optionally with a seeded search term. */
+	protected browseAll(q?: string): void {
+		void this.router.navigate(["/accounts"], {
+			queryParams: q ? { q } : {},
+		});
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/alert/hlm-alert-action.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmAlertAction]',
+	host: {
+		'data-slot': 'alert-action',
+	},
+})
+export class HlmAlertAction {
+	constructor() {
+		classes(() => 'absolute end-2 top-2');
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/alert/hlm-alert-description.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmAlertDescription]',
+	host: {
+		'data-slot': 'alert-description',
+	},
+})
+export class HlmAlertDescription {
+	constructor() {
+		classes(
+			() =>
+				'text-sm text-balance md:text-pretty group-has-[>ng-icon]/alert:col-start-2 [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/alert/hlm-alert-title.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmAlertTitle]',
+	host: {
+		'data-slot': 'alert-title',
+	},
+})
+export class HlmAlertTitle {
+	constructor() {
+		classes(
+			() =>
+				'font-medium group-has-[>ng-icon]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/alert/hlm-alert.ts

@@ -0,0 +1,35 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const alertVariants = cva(
+	'relative w-full grid gap-0.5 items-start rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:pe-18 has-[>ng-icon]:grid-cols-[auto_1fr] has-[>ng-icon]:gap-x-2 *:[ng-icon]:row-span-2 *:[ng-icon]:translate-y-0.5 *:[ng-icon]:text-current *:[ng-icon:not([class*=text-])]:text-[length:--spacing(4)] group/alert',
+	{
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive: 'bg-card text-destructive',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;
+
+@Directive({
+	selector: 'hlm-alert,[hlmAlert]',
+	host: {
+		'data-slot': 'alert',
+		role: 'alert',
+	},
+})
+export class HlmAlert {
+	public readonly variant = input<AlertVariants['variant']>('default');
+
+	constructor() {
+		classes(() => alertVariants({ variant: this.variant() }));
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/alert/index.ts

@@ -0,0 +1,16 @@
+import { HlmAlert } from './hlm-alert';
+import { HlmAlertAction } from './hlm-alert-action';
+import { HlmAlertDescription } from './hlm-alert-description';
+import { HlmAlertTitle } from './hlm-alert-title';
+
+export * from './hlm-alert';
+export * from './hlm-alert-action';
+export * from './hlm-alert-description';
+export * from './hlm-alert-title';
+
+export const HlmAlertImports = [
+	HlmAlert,
+	HlmAlertAction,
+	HlmAlertDescription,
+	HlmAlertTitle,
+] as const;

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/button/hlm-button.token.ts

@@ -0,0 +1,22 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import type { ButtonVariants } from './hlm-button';
+
+export interface BrnButtonConfig {
+	variant: ButtonVariants['variant'];
+	size: ButtonVariants['size'];
+}
+
+const defaultConfig: BrnButtonConfig = {
+	variant: 'default',
+	size: 'default',
+};
+
+const BrnButtonConfigToken = new InjectionToken<BrnButtonConfig>('BrnButtonConfig');
+
+export function provideBrnButtonConfig(config: Partial<BrnButtonConfig>): ValueProvider {
+	return { provide: BrnButtonConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectBrnButtonConfig(): BrnButtonConfig {
+	return inject(BrnButtonConfigToken, { optional: true }) ?? defaultConfig;
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/button/hlm-button.ts

@@ -0,0 +1,72 @@
+import { Directive, input, signal } from '@angular/core';
+import { BrnButton } from '@spartan-ng/brain/button';
+import { classes } from '@spartan-ng/styles/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+import { injectBrnButtonConfig } from './hlm-button.token';
+
+export const buttonVariants = cva(
+	"focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px data-[matches-spartan-invalid=true]:ring-3 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				outline:
+					'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+				ghost:
+					'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+				destructive:
+					'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default:
+					'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2',
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3)]",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
+				lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3',
+				icon: 'size-8',
+				'icon-xs':
+					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3)]",
+				'icon-sm':
+					'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+				'icon-lg': 'size-9',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+@Directive({
+	selector: 'button[hlmBtn], a[hlmBtn]',
+	exportAs: 'hlmBtn',
+	hostDirectives: [{ directive: BrnButton, inputs: ['disabled'] }],
+	host: { 'data-slot': 'button' },
+})
+export class HlmButton {
+	private readonly _config = injectBrnButtonConfig();
+
+	private readonly _additionalClasses = signal<ClassValue>('');
+
+	public readonly variant = input<ButtonVariants['variant']>(this._config.variant);
+
+	public readonly size = input<ButtonVariants['size']>(this._config.size);
+
+	constructor() {
+		classes(() => [
+			buttonVariants({ variant: this.variant(), size: this.size() }),
+			this._additionalClasses(),
+		]);
+	}
+
+	setClass(classes: string): void {
+		this._additionalClasses.set(classes);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/button/index.ts

@@ -0,0 +1,6 @@
+import { HlmButton } from './hlm-button';
+
+export * from './hlm-button';
+export * from './hlm-button.token';
+
+export const HlmButtonImports = [HlmButton] as const;