@salesforce/templates 66.11.0 → 66.12.0

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/button/button.component.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { MatButtonModule, type MatButtonAppearance } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+/** Material's appearances plus `destructive`, which Material doesn't provide. */
+export type AppButtonAppearance = MatButtonAppearance | 'destructive';
+
+/** Button size variants. */
+export type AppButtonSize =
+	| 'default'
+	| 'xs'
+	| 'sm'
+	| 'lg'
+	| 'icon'
+	| 'icon-xs'
+	| 'icon-sm'
+	| 'icon-lg';
+
+/**
+ * Thin wrapper over `matButton`. Adds a `destructive` appearance and a `size`
+ * scale Material lacks; inputs drive the inner button (a host class/aria attr
+ * would land on `<app-button>`, not the real `<button>`).
+ */
+@Component({
+	selector: 'app-button',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatButtonModule, MatIconModule],
+	templateUrl: './button.component.html',
+	styleUrl: './button.component.scss',
+})
+export class ButtonComponent {
+	readonly appearance = input<AppButtonAppearance>('filled');
+	readonly size = input<AppButtonSize>('default');
+	readonly type = input<'button' | 'submit' | 'reset'>('button');
+	readonly disabled = input<boolean>(false);
+	readonly ariaLabel = input<string>();
+	readonly ariaExpanded = input<boolean>();
+	/** Extra classes for the inner button — `class` on the host forwards here. */
+	readonly classes = input<string>('', { alias: 'class' });
+	/** Leading / trailing Material icon ligature names, e.g. `search`. */
+	readonly icon = input<string>('');
+	readonly iconEnd = input<string>('');
+	readonly clicked = output<MouseEvent>();
+
+	/** `destructive` renders as a filled button carrying the destructive class. */
+	protected readonly matAppearance = computed<MatButtonAppearance>(() =>
+		this.appearance() === 'destructive' ? 'filled' : (this.appearance() as MatButtonAppearance),
+	);
+	protected readonly isDestructive = computed(() => this.appearance() === 'destructive');
+	/** Size class merged with any caller-supplied classes, applied to the button. */
+	protected readonly buttonClass = computed(() => `size-${this.size()} ${this.classes()}`.trim());
+}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/card/card.component.scss

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+// `size="sm"` — compact padding. Material hardcodes the card's 16px padding
+// (there is no padding design token to override), so the compact size tightens
+// the real Material padding classes. `::ng-deep` is required because the slot
+// content (`mat-card-header/content/actions`) is projected — it lives in the
+// consumer's view, not this wrapper's — so a plain scoped selector can't reach
+// it. The rules are anchored under `.app-card-sm`, a class only this component
+// applies, so the deep selector stays contained to compact cards.
+.app-card-sm {
+	::ng-deep .mat-mdc-card-header {
+		padding: 0.75rem 0.75rem 0;
+	}
+
+	::ng-deep .mat-mdc-card-content {
+		padding: 0 0.75rem;
+
+		&:first-child {
+			padding-top: 0.75rem;
+		}
+
+		&:last-child {
+			padding-bottom: 0.75rem;
+		}
+	}
+
+	::ng-deep .mat-mdc-card-actions {
+		padding: 0.75rem;
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/card/card.component.ts

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import {
+	MatCard,
+	MatCardActions,
+	MatCardContent,
+	MatCardHeader,
+	MatCardSubtitle,
+	MatCardTitle,
+} from '@angular/material/card';
+
+/** Card container density. */
+export type AppCardSize = 'default' | 'sm';
+
+/**
+ * Thin wrapper over `mat-card`. Preserves the `app-card` / `app-card-*` slot API
+ * while Material drives the visual. `size="sm"` maps to a compact-padding class.
+ */
+@Component({
+	selector: 'app-card',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatCard],
+	template:
+		'<mat-card appearance="outlined" [class]="classes()" [class.app-card-sm]="size() === \'sm\'"><ng-content /></mat-card>',
+	styleUrl: './card.component.scss',
+})
+export class CardComponent {
+	readonly size = input<AppCardSize>('default');
+	/** Extra classes forwarded to the inner `mat-card` (host `class` lands here). */
+	readonly classes = input<string>('', { alias: 'class' });
+}
+
+/**
+ * Header slot — wraps `mat-card-header` and recreates its title/subtitle stack
+ * so the slots project by element selector (Material's static
+ * `[mat-card-title]` projection can't see the runtime attribute across this
+ * boundary, and would otherwise render title + subtitle side by side).
+ */
+@Component({
+	selector: 'app-card-header',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatCardHeader],
+	template: `<mat-card-header [class]="classes()">
+		<ng-content select="[mat-card-avatar]" />
+		<div class="app-card-header-text">
+			<ng-content select="app-card-title" />
+			<ng-content select="app-card-description" />
+		</div>
+		<ng-content />
+	</mat-card-header>`,
+	styles: '.app-card-header-text { display: flex; flex-direction: column; gap: 0.25rem; }',
+})
+export class CardHeaderComponent {
+	/** Extra classes forwarded to the inner `mat-card-header`. */
+	readonly classes = input<string>('', { alias: 'class' });
+}
+
+/** Title slot — Material's `MatCardTitle` styling. */
+@Component({
+	selector: 'app-card-title',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [MatCardTitle],
+	template: '<ng-content />',
+})
+export class CardTitleComponent {}
+
+/** Description slot — Material's `mat-card-subtitle` styling. */
+@Component({
+	selector: 'app-card-description',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [MatCardSubtitle],
+	template: '<ng-content />',
+})
+export class CardDescriptionComponent {}
+
+/** Action slot — pinned to the trailing edge of `app-card-header`. */
+@Component({
+	selector: 'app-card-action',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { style: 'margin-inline-start: auto; align-self: flex-start;' },
+	template: '<ng-content />',
+})
+export class CardActionComponent {}
+
+/** Body slot — Material's `mat-card-content`. */
+@Component({
+	selector: 'app-card-content',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [MatCardContent],
+	template: '<ng-content />',
+})
+export class CardContentComponent {}
+
+/**
+ * Footer slot — Material's `mat-card-actions` (a flex-row action bar).
+ * Material ships no inter-button spacing, so `:host` (the actions element)
+ * sets a `gap`.
+ */
+@Component({
+	selector: 'app-card-footer',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [MatCardActions],
+	styles: ':host { gap: 0.5rem; }',
+	template: '<ng-content />',
+})
+export class CardFooterComponent {}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/collapsible/collapsible.component.html

@@ -0,0 +1,10 @@
+<mat-expansion-panel [expanded]="open()" (expandedChange)="open.set($event)">
+	<mat-expansion-panel-header>
+		@if (title()) {
+			<mat-panel-title>{{ title() }}</mat-panel-title>
+		} @else {
+			<ng-content select="[collapsibleHeader]" />
+		}
+	</mat-expansion-panel-header>
+	<ng-content />
+</mat-expansion-panel>

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/collapsible/collapsible.component.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import { MatExpansionModule } from '@angular/material/expansion';
+
+/**
+ * Thin wrapper over Material's `mat-expansion-panel`. Two-way bindable `open`
+ * and a `title`; body via `<ng-content>`. For custom header content, omit
+ * `title` and project `[collapsibleHeader]`.
+ */
+@Component({
+	selector: 'app-collapsible',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatExpansionModule],
+	templateUrl: './collapsible.component.html',
+})
+export class CollapsibleComponent {
+	/** Two-way bindable expanded state. Supports `[(open)]`. */
+	readonly open = model<boolean>(false);
+
+	/** Header title text. Omit and project `[collapsibleHeader]` for custom content. */
+	readonly title = input<string>('');
+}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/date-picker/date-picker.component.html

@@ -0,0 +1,25 @@
+<mat-form-field
+	class="w-full"
+	[class]="'size-' + size()"
+	[appearance]="appearance()"
+	subscriptSizing="dynamic"
+>
+	@if (label()) {
+		<mat-label>{{ label() }}</mat-label>
+	}
+	<input
+		matInput
+		[matDatepicker]="picker"
+		[min]="min()"
+		[max]="max()"
+		[placeholder]="placeholder()"
+		[disabled]="disabled()"
+		[readonly]="readonly()"
+		[(ngModel)]="value"
+		(click)="readonly() && picker.open()"
+		(keydown.enter)="readonly() && picker.open()"
+		(keydown.space)="readonly() && picker.open()"
+	/>
+	<mat-datepicker-toggle matIconSuffix [for]="picker" />
+	<mat-datepicker #picker />
+</mat-form-field>

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/date-picker/date-picker.component.scss

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+@use '../field-size' as field-size;
+
+/*
+ * Form-field-specific structural styling. Height comes from the `size` input
+ * (see field-size.scss); colour comes from the --mat-sys-* remap (styles.css).
+ * Here we only: give the outline our design-token radius, emit the size
+ * classes, and collapse the empty hint/error subscript row.
+ */
+@include field-size.sizes;
+
+:host {
+	display: block;
+	/*
+	 * Allow the host to shrink below the mat-form-field's intrinsic width when
+	 * used as a flex item (e.g. two side-by-side pickers in a date-range filter,
+	 * or a picker beside an operator select). Without this, the default
+	 * `min-width: auto` on a flex item keeps each field at its content width and
+	 * the row overflows its container.
+	 */
+	min-width: 0;
+}
+
+.mat-mdc-form-field {
+	--mdc-outlined-text-field-container-shape: var(--radius-md);
+	font-size: 0.875rem; /* text-sm, matches the React inputs */
+}
+
+.mat-mdc-form-field-subscript-wrapper {
+	display: none;
+}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/date-picker/date-picker.component.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule, type MatFormFieldAppearance } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import type { AppFieldSize } from '../field-size';
+
+/**
+ * Thin wrapper over Material's `mat-form-field` + `matInput` + `mat-datepicker`.
+ * Relies on `provideNativeDateAdapter()`, so `value` is a plain `Date`.
+ */
+@Component({
+	selector: 'app-date-picker',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [FormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule],
+	templateUrl: './date-picker.component.html',
+	styleUrl: './date-picker.component.scss',
+})
+export class DatePickerComponent {
+	/** Two-way bindable date value. `null` clears the field. Supports `[(value)]`. */
+	readonly value = model<Date | null>(null);
+
+	readonly label = input<string>('');
+	readonly placeholder = input<string>('');
+	readonly disabled = input<boolean>(false);
+	readonly appearance = input<MatFormFieldAppearance>('outline');
+	/** Field height: `sm` = 24px, `default` = 32px, `lg` = 40px. */
+	readonly size = input<AppFieldSize>('default');
+
+	/** Earliest / latest selectable date; `null` leaves that bound open. */
+	readonly min = input<Date | null>(null);
+	readonly max = input<Date | null>(null);
+
+	/** When `true`, calendar-only: typing is blocked, clicking opens the picker. */
+	readonly readonly = input<boolean>(false);
+}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/date-range-picker/date-range-picker.component.html

@@ -0,0 +1,34 @@
+<mat-form-field
+	class="w-full"
+	[class]="'size-' + size()"
+	[appearance]="appearance()"
+	subscriptSizing="dynamic"
+>
+	@if (label()) {
+		<mat-label>{{ label() }}</mat-label>
+	}
+	<mat-date-range-input [rangePicker]="picker" [min]="min()" [max]="max()" [disabled]="disabled()">
+		<input
+			matStartDate
+			[placeholder]="startPlaceholder()"
+			[value]="value()?.start ?? null"
+			[readonly]="readonly()"
+			(dateChange)="onStartChange($event.value)"
+			(click)="readonly() && picker.open()"
+			(keydown.enter)="readonly() && picker.open()"
+			(keydown.space)="readonly() && picker.open()"
+		/>
+		<input
+			matEndDate
+			[placeholder]="endPlaceholder()"
+			[value]="value()?.end ?? null"
+			[readonly]="readonly()"
+			(dateChange)="onEndChange($event.value)"
+			(click)="readonly() && picker.open()"
+			(keydown.enter)="readonly() && picker.open()"
+			(keydown.space)="readonly() && picker.open()"
+		/>
+	</mat-date-range-input>
+	<mat-datepicker-toggle matIconSuffix [for]="picker" />
+	<mat-date-range-picker #picker />
+</mat-form-field>

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/date-range-picker/date-range-picker.component.scss

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+@use '../field-size' as field-size;
+
+/*
+ * Form-field-specific structural styling. Height comes from the `size` input
+ * (see field-size.scss); colour comes from the --mat-sys-* remap (styles.css).
+ * Here we only: give the outline our design-token radius, emit the size
+ * classes, and collapse the empty hint/error subscript row.
+ */
+@include field-size.sizes;
+
+:host {
+	display: block;
+	/*
+	 * Allow the host to shrink below the mat-form-field's intrinsic width when
+	 * used as a flex item, so the row doesn't overflow its container.
+	 */
+	min-width: 0;
+}
+
+.mat-mdc-form-field {
+	--mdc-outlined-text-field-container-shape: var(--radius-md);
+	font-size: 0.875rem; /* text-sm, matches the React inputs */
+}
+
+.mat-mdc-form-field-subscript-wrapper {
+	display: none;
+}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/date-range-picker/date-range-picker.component.ts

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule, type MatFormFieldAppearance } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import type { AppFieldSize } from '../field-size';
+
+export { DateRange } from '@angular/material/datepicker';
+
+/**
+ * Thin wrapper over Material's `mat-form-field` + `mat-date-range-input` +
+ * `mat-date-range-picker`. Relies on `provideNativeDateAdapter()`, so the value
+ * is Material's `DateRange<Date>` (`{ start, end }`) of plain `Date`s.
+ */
+@Component({
+	selector: 'app-date-range-picker',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [FormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule],
+	templateUrl: './date-range-picker.component.html',
+	styleUrl: './date-range-picker.component.scss',
+})
+export class DateRangePickerComponent {
+	/** Two-way bindable range value. `null` clears the field. Supports `[(value)]`. */
+	readonly value = model<DateRange<Date> | null>(null);
+
+	readonly label = input<string>('');
+	readonly startPlaceholder = input<string>('Start');
+	readonly endPlaceholder = input<string>('End');
+	readonly disabled = input<boolean>(false);
+	readonly appearance = input<MatFormFieldAppearance>('outline');
+	/** Field height: `sm` = 24px, `default` = 32px, `lg` = 40px. */
+	readonly size = input<AppFieldSize>('default');
+
+	/** Earliest / latest selectable date; `null` leaves that bound open. */
+	readonly min = input<Date | null>(null);
+	readonly max = input<Date | null>(null);
+
+	/** When `true`, calendar-only: typing is blocked, clicking opens the picker. */
+	readonly readonly = input<boolean>(false);
+
+	/** Start/end come off the range input's `(dateChange)` events as a pair. */
+	protected onStartChange(start: Date | null): void {
+		this.setRange(start, this.value()?.end ?? null);
+	}
+
+	protected onEndChange(end: Date | null): void {
+		this.setRange(this.value()?.start ?? null, end);
+	}
+
+	/**
+	 * Commit a range, guarding against an inverted `start > end` that the two
+	 * independent `(dateChange)` events can otherwise produce mid-selection.
+	 */
+	private setRange(start: Date | null, end: Date | null): void {
+		if (start && end && start.getTime() > end.getTime()) {
+			this.value.set(new DateRange(end, start));
+			return;
+		}
+		this.value.set(new DateRange(start, end));
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/dialog/dialog.component.html

@@ -0,0 +1,37 @@
+<ng-template
+	cdkConnectedOverlay
+	[cdkConnectedOverlayOpen]="open()"
+	[cdkConnectedOverlayHasBackdrop]="true"
+	cdkConnectedOverlayBackdropClass="cdk-overlay-dark-backdrop"
+	[cdkConnectedOverlayPositions]="[
+		{
+			originX: 'center',
+			originY: 'center',
+			overlayX: 'center',
+			overlayY: 'center',
+		},
+	]"
+	(backdropClick)="onBackdropClick()"
+	(overlayKeydown)="$event.key === 'Escape' && close()"
+	(detach)="close()"
+>
+	<div
+		role="dialog"
+		aria-modal="true"
+		[attr.aria-label]="ariaLabel()"
+		[attr.aria-labelledby]="ariaLabelledby()"
+		cdkTrapFocus
+		[cdkTrapFocusAutoCapture]="true"
+		class="bg-card text-card-foreground flex w-full max-w-md flex-col gap-4 rounded-xl p-6 shadow-lg ring-1 ring-black/10 outline-none"
+	>
+		<div data-slot="dialog-header" class="flex flex-col gap-1">
+			<ng-content select="[header]" />
+		</div>
+		<div data-slot="dialog-body" class="text-sm">
+			<ng-content />
+		</div>
+		<div data-slot="dialog-footer" class="flex items-center justify-end gap-2">
+			<ng-content select="[footer]" />
+		</div>
+	</div>
+</ng-template>

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/dialog/dialog.component.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
+
+/**
+ * Modal dialog backed by CDK Overlay. Slots: `[header]`, default (body),
+ * `[footer]`. `open` is a two-way model; a backdrop click or Escape closes it
+ * and emits `(closed)`. `cdkTrapFocus` keeps focus inside the panel while open.
+ */
+@Component({
+	selector: 'app-dialog',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [CdkConnectedOverlay, CdkTrapFocus],
+	templateUrl: './dialog.component.html',
+})
+export class DialogComponent {
+	/** Two-way bindable open state. Supports `[(open)]`. */
+	readonly open = model<boolean>(false);
+
+	/** When true a backdrop click closes the dialog. */
+	readonly closeOnBackdrop = input<boolean>(true);
+
+	/** Accessible name for the dialog (or use `ariaLabelledby`). */
+	readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
+
+	/** `id` of an element (e.g. the projected header) that names the dialog. */
+	readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });
+
+	/** Emitted whenever the dialog transitions to closed. */
+	readonly closed = output<void>();
+
+	/** Imperatively open the dialog. */
+	show(): void {
+		this.open.set(true);
+	}
+
+	/** Imperatively close the dialog and notify listeners. */
+	close(): void {
+		if (this.open()) {
+			this.open.set(false);
+			this.closed.emit();
+		}
+	}
+
+	protected onBackdropClick(): void {
+		if (this.closeOnBackdrop()) {
+			this.close();
+		}
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/field/field.component.html

@@ -0,0 +1,21 @@
+@if (label()) {
+	<label [attr.for]="htmlFor()" class="text-sm leading-none font-medium select-none">
+		{{ label() }}
+		@if (required()) {
+			<span aria-hidden="true" class="text-destructive">*</span>
+		}
+	</label>
+}
+
+<ng-content />
+
+@if (error()) {
+	<p
+		[id]="htmlFor() ? htmlFor() + '-error' : null"
+		data-slot="field-error"
+		role="alert"
+		class="text-destructive text-sm"
+	>
+		{{ error() }}
+	</p>
+}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/field/field.component.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+/**
+ * Form-field wrapper: renders a `<label>`, the projected control, and an error
+ * message when present. Composes around `app-input` and other controls.
+ */
+@Component({
+	selector: 'app-field',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	templateUrl: './field.component.html',
+	host: {
+		'data-slot': 'field',
+		class: 'flex flex-col gap-1.5',
+	},
+})
+export class FieldComponent {
+	/** Optional label text rendered above the control. */
+	readonly label = input<string>('');
+
+	/**
+	 * Error message; renders in a `role="alert"` region. When `htmlFor` is set
+	 * the region gets id `<htmlFor>-error` for the control's `aria-describedby`.
+	 */
+	readonly error = input<string | null>(null);
+
+	/** Marks the field required and renders an asterisk next to the label. */
+	readonly required = input<boolean>(false);
+
+	/** `id` of the projected control; forwarded to the label's `for`. */
+	readonly htmlFor = input<string | null>(null);
+}

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/field-size.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/** Form-field height scale: `sm` = 24px, `default` = 32px, `lg` = 40px. */
+export type AppFieldSize = 'sm' | 'default' | 'lg';

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/input/input.component.html

@@ -0,0 +1,19 @@
+<mat-form-field
+	class="w-full"
+	[class]="'size-' + size()"
+	[appearance]="appearance()"
+	subscriptSizing="dynamic"
+>
+	@if (label()) {
+		<mat-label>{{ label() }}</mat-label>
+	}
+	<input
+		matInput
+		[type]="type()"
+		[placeholder]="placeholder()"
+		[disabled]="disabled()"
+		[attr.id]="id() || null"
+		[attr.aria-describedby]="ariaDescribedby() || null"
+		[(ngModel)]="value"
+	/>
+</mat-form-field>