@salesforce/ui-bundle-template-base-angular-app 11.59.2 → 11.62.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.62.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.61.0...v11.62.0) (2026-08-17)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-angular-app
+
+## [11.61.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.60.0...v11.61.0) (2026-08-17)
+
+### Features
+
+- @W-23807677: Migrating from Angular Material to Spartan NG ([#882](https://github.com/salesforce-experience-platform-emu/webapps/issues/882)) ([b83d66f](https://github.com/salesforce-experience-platform-emu/webapps/commit/b83d66f522ec85be2390211d35c2a6af3c487246))
+
+## [11.60.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.59.2...v11.60.0) (2026-08-17)
+
+### Features
+
+- angular design-mode via native source-locations - @W-23486249@ ([#839](https://github.com/salesforce-experience-platform-emu/webapps/issues/839)) ([51b9f6b](https://github.com/salesforce-experience-platform-emu/webapps/commit/51b9f6bbb382f76ef6fa0101e5ce66f0998f725e))
+
 ## [11.59.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.59.1...v11.59.2) (2026-08-15)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-angular-app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-base-angular-app",
-  "version": "11.59.2",
+  "version": "11.62.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {
     "access": "public"

package/src/force-app/main/default/uiBundles/base-angular-app/angular.json

@@ -14,7 +14,7 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "scss"
+          "style": "css"
         }
       },
       "root": "",
@@ -37,12 +37,7 @@
                 "input": "public"
               }
             ],
-            "styles": ["src/theme.scss", "src/styles.scss"],
-            "stylePreprocessorOptions": {
-              "sass": {
-                "silenceDeprecations": ["import"]
-              }
-            },
+            "styles": ["src/styles.css"],
             "plugins": []
           },
           "configurations": {

package/src/force-app/main/default/uiBundles/base-angular-app/components.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "node_modules/@spartan-ng/cli/src/generators/ui/schema.json",
+  "componentsPath": "src/app/shared/spartan",
+  "importAlias": "@spartan-ng/styles",
+  "style": "nova"
+}

package/src/force-app/main/default/uiBundles/base-angular-app/eslint.config.js

@@ -12,7 +12,15 @@ const angularGraphqlPlugin = createPlugin({ schemaPath });
 export default tseslint.config(
 	// Global ignores
 	{
-		ignores: ['dist/**/*', '.angular/**/*', 'coverage/**/*', 'node_modules/**/*'],
+		ignores: [
+			'dist/**/*',
+			'.angular/**/*',
+			'coverage/**/*',
+			'node_modules/**/*',
+			// Vendored Spartan primitives use upstream hlm*/brn* selectors and are
+			// not authored here, so they can't satisfy the app-prefix/a11y rules.
+			'**/shared/spartan/**',
+		],
 	},
 	// TypeScript files
 	{

package/src/force-app/main/default/uiBundles/base-angular-app/package.json

@@ -8,29 +8,33 @@
   },
   "scripts": {
     "dev": "sf-angular-serve",
-    "dev:design": "sf-angular-serve",
-    "build": "ng build",
+    "dev:design": "sf-angular-serve --design",
+    "build": "ng lint && ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "lint": "ng lint",
-    "build:e2e": "ng build && node scripts/rewrite-e2e-assets.mjs",
+    "build:e2e": "ng lint && ng build && node scripts/rewrite-e2e-assets.mjs",
     "e2e": "playwright test",
     "graphql:schema": "node scripts/get-graphql-schema.mjs",
     "graphql:codegen": "graphql-codegen"
   },
   "dependencies": {
-    "@angular/animations": "^21.2.0",
     "@angular/cdk": "^21.2.0",
     "@angular/common": "^21.2.0",
     "@angular/compiler": "^21.2.0",
     "@angular/core": "^21.2.0",
     "@angular/forms": "^21.2.0",
-    "@angular/material": "^21.2.0",
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
-    "@salesforce/angular-plugin-ui-bundle": "^11.59.2",
-    "@salesforce/platform-sdk": "^11.59.2",
+    "@ng-icons/core": "^32.2.0",
+    "@ng-icons/lucide": "^32.2.0",
+    "@salesforce/angular-plugin-ui-bundle": "^11.62.0",
+    "@salesforce/platform-sdk": "^11.62.0",
+    "@spartan-ng/brain": "^1.3.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "rxjs": "~7.8.0",
+    "tailwind-merge": "^3.5.0",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
@@ -40,11 +44,16 @@
     "@angular/cli": "^21.2.11",
     "@angular/compiler-cli": "^21.2.0",
     "@eslint/js": "^9.0.0",
+    "@graphql-codegen/cli": "^6.1.0",
+    "@graphql-codegen/typescript-operations": "^5.0.6",
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@playwright/test": "^1.49.0",
+    "@spartan-ng/cli": "^1.3.1",
     "@tailwindcss/postcss": "^4.0.0",
     "angular-eslint": "^21.0.0",
     "eslint": "^9.0.0",
+    "graphql": "^16.11.0",
+    "graphql-codegen-typescript-operation-types": "^2.0.2",
     "jsdom": "^28.0.0",
     "postcss": "^8.5.0",
     "serve": "^14.2.5",
@@ -52,11 +61,7 @@
     "typescript": "~5.9.2",
     "typescript-eslint": "^8.0.0",
     "vitest": "^4.1.0",
-    "@salesforce/graphiti": "^11.59.2",
-    "@graphql-codegen/cli": "^6.1.0",
-    "@graphql-codegen/typescript-operations": "^5.0.6",
-    "graphql": "^16.11.0",
-    "graphql-codegen-typescript-operation-types": "^2.0.2"
+    "@salesforce/graphiti": "^11.62.0"
   },
   "overrides": {
     "undici": "^7.28.0"

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/app.config.ts

@@ -5,8 +5,8 @@
  */
 import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
 import { provideRouter } from '@angular/router';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { provideNativeDateAdapter } from '@angular/material/core';
+import { provideNativeDateAdapter as provideBrnNativeDateAdapter } from '@spartan-ng/brain/date-time';
+import { provideNgIconsConfig } from '@ng-icons/core';
 
 import { routes } from './app.routes';
 
@@ -14,9 +14,7 @@ export const appConfig: ApplicationConfig = {
 	providers: [
 		provideBrowserGlobalErrorListeners(),
 		provideRouter(routes),
-		provideAnimationsAsync(),
-		// Enables mat-datepicker (used by the object-search Date / DateRange
-		// filters) with the browser's native Date, avoiding a moment/luxon dep.
-		provideNativeDateAdapter(),
+		provideBrnNativeDateAdapter(),
+		provideNgIconsConfig({ size: '1rem' }),
 	],
 };

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/alert/alert.html

@@ -1,16 +1,18 @@
 @if (icon()) {
-	<mat-icon class="row-span-2 translate-y-0.5 !size-4 !text-base leading-4" aria-hidden="true">{{
-		icon()
-	}}</mat-icon>
+	<ng-icon
+		[name]="icon()"
+		class="row-span-2 translate-y-0.5 size-4 text-base leading-4"
+		aria-hidden="true"
+	/>
 }
+<ng-content select="[icon]" />
 
 @if (title()) {
-	<div data-slot="alert-title" class="col-start-2 font-medium">{{ title() }}</div>
+	<div hlmAlertTitle>{{ title() }}</div>
 }
 @if (description()) {
 	<div
-		data-slot="alert-description"
-		class="col-start-2 text-sm"
+		hlmAlertDescription
 		[class.text-muted-foreground]="variant() === 'default'"
 		[class.text-destructive]="variant() === 'destructive'"
 	>
@@ -18,14 +20,8 @@
 	</div>
 }
 
-<!--
-	Default slot for callers that project body content (e.g. app-status-alert
-	composing a message with a link) instead of the `description` input. Sits in
-	the second grid column to align with the icon. Inert when only inputs are used.
--->
-<div class="col-start-2 text-sm">
+<div class="text-sm empty:hidden group-has-[>ng-icon]/alert:col-start-2">
 	<ng-content />
 </div>
 
-<!-- Optional caller-owned trailing control, pinned top-right. -->
 <ng-content select="app-alert-action" />

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/alert/alert.ts

@@ -3,51 +3,39 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+	HlmAlert,
+	HlmAlertAction,
+	HlmAlertDescription,
+	HlmAlertTitle,
+} from '@spartan-ng/styles/alert';
+import { APP_ICONS, type AppIconName } from '../icon/icon';
 
-/** Visual variant. */
 export type AppAlertVariant = 'default' | 'destructive';
 
-const BASE_CLASSES =
-	'relative w-full grid grid-cols-[auto_1fr] items-start gap-x-2 gap-y-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-[app-alert-action]:pr-18';
-const VARIANT_CLASSES: Record<AppAlertVariant, string> = {
-	default: 'bg-card text-card-foreground',
-	destructive: 'bg-card text-destructive',
-};
-
-/** Alert banner. Optional trailing control via the `app-alert-action` slot. */
 @Component({
 	selector: 'app-alert',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [MatIconModule],
+	imports: [NgIcon, HlmAlertTitle, HlmAlertDescription],
+	providers: [provideIcons(APP_ICONS)],
+	hostDirectives: [{ directive: HlmAlert, inputs: ['variant'] }],
 	templateUrl: './alert.html',
-	host: {
-		'data-slot': 'alert',
-		role: 'alert',
-		'[class]': 'hostClass()',
-	},
 })
 export class AlertComponent {
 	readonly variant = input<AppAlertVariant>('default');
 	readonly title = input<string>('');
 	readonly description = input<string>('');
-	/** Material icon ligature name, e.g. `info`, `error`, `warning`. */
-	readonly icon = input<string>('');
-
-	protected readonly hostClass = computed(
-		() => `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]}`,
-	);
+	readonly icon = input<AppIconName | ''>('');
 }
 
-/** Trailing action slot for `app-alert`, pinned to the top-right. */
 @Component({
 	selector: 'app-alert-action',
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmAlertAction],
 	template: '<ng-content />',
-	host: {
-		'data-slot': 'alert-action',
-		class: 'absolute top-2 right-2',
-	},
 })
 export class AlertActionComponent {}
+
+export const AlertImports = [AlertComponent, AlertActionComponent] as const;

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/button/button.html

@@ -1,18 +1,27 @@
 <button
-	[matButton]="matAppearance()"
-	[class]="buttonClass()"
-	[class.destructive]="isDestructive()"
+	hlmBtn
+	[variant]="hlmVariant()"
+	[size]="size()"
+	[disabled]="disabled() || loading()"
 	[type]="type()"
-	[disabled]="disabled()"
 	[attr.aria-label]="ariaLabel()"
 	[attr.aria-expanded]="ariaExpanded()"
+	[attr.aria-busy]="loading() || null"
+	[class]="classes()"
 	(click)="clicked.emit($event)"
 >
-	@if (icon()) {
-		<mat-icon aria-hidden="true">{{ icon() }}</mat-icon>
-	}
-	<ng-content />
-	@if (iconEnd()) {
-		<mat-icon aria-hidden="true" iconPositionEnd>{{ iconEnd() }}</mat-icon>
+	@if (loading()) {
+		<app-spinner data-icon="inline-start" class="flex items-center" aria-hidden="true" />
+		@if (loadingLabel()) {
+			{{ loadingLabel() }}
+		}
+	} @else {
+		@if (icon()) {
+			<ng-icon [name]="icon()" class="size-4" aria-hidden="true" />
+		}
+		<ng-content />
+		@if (iconEnd()) {
+			<ng-icon [name]="iconEnd()" class="size-4" aria-hidden="true" />
+		}
 	}
 </button>

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/button/button.ts

@@ -3,14 +3,20 @@
  * 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';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	output,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { HlmButtonImports } from '@spartan-ng/styles/button';
+import { APP_ICONS, type AppIconName } from '../icon/icon';
+import { SpinnerComponent } from '../spinner/spinner';
 
-/** Material's appearances plus `destructive`, which Material doesn't provide. */
-export type AppButtonAppearance = MatButtonAppearance | 'destructive';
-
-/** Button size variants. */
+export type AppButtonAppearance = 'filled' | 'outlined' | 'text' | 'destructive';
 export type AppButtonSize =
 	| 'default'
 	| 'xs'
@@ -21,37 +27,40 @@ export type AppButtonSize =
 	| '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>`).
- */
+const APPEARANCE_TO_VARIANT: Record<AppButtonAppearance, string> = {
+	filled: 'default',
+	outlined: 'outline',
+	text: 'ghost',
+	destructive: 'destructive',
+};
+
 @Component({
 	selector: 'app-button',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [MatButtonModule, MatIconModule],
+	imports: [HlmButtonImports, NgIcon, SpinnerComponent],
+	providers: [provideIcons(APP_ICONS)],
 	templateUrl: './button.html',
-	styleUrl: './button.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 disabled = input(false, { transform: booleanAttribute });
+	// While loading the button is disabled and shows a spinner; loadingLabel
+	// replaces the content (empty label => spinner only).
+	readonly loading = input(false, { transform: booleanAttribute });
+	readonly loadingLabel = input<string>('');
 	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 icon = input<AppIconName | ''>('');
+	readonly iconEnd = input<AppIconName | ''>('');
 	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 hlmVariant = computed(
+		() =>
+			APPEARANCE_TO_VARIANT[this.appearance()] as 'default' | 'outline' | 'ghost' | 'destructive',
 	);
-	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());
 }
+
+export const ButtonImports = [ButtonComponent] as const;

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/card/card.ts

@@ -5,106 +5,96 @@
  */
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import {
-	MatCard,
-	MatCardActions,
-	MatCardContent,
-	MatCardHeader,
-	MatCardSubtitle,
-	MatCardTitle,
-} from '@angular/material/card';
+	HlmCard,
+	HlmCardAction,
+	HlmCardAvatar,
+	HlmCardContent,
+	HlmCardDescription,
+	HlmCardFooter,
+	HlmCardHeader,
+	HlmCardTitle,
+} from '@spartan-ng/styles/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.scss',
+	hostDirectives: [{ directive: HlmCard, inputs: ['size'] }],
+	host: { '[class]': 'classes()' },
+	template: '<ng-content />',
 })
 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; }',
+	hostDirectives: [HlmCardHeader],
+	host: { '[class]': 'classes()' },
+	template: '<ng-content />',
 })
 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],
+	hostDirectives: [HlmCardTitle],
 	template: '<ng-content />',
 })
 export class CardTitleComponent {}
 
-/** Description slot — Material's `mat-card-subtitle` styling. */
 @Component({
 	selector: 'app-card-description',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	hostDirectives: [MatCardSubtitle],
+	hostDirectives: [HlmCardDescription],
 	template: '<ng-content />',
 })
 export class CardDescriptionComponent {}
 
-/** Action slot — pinned to the trailing edge of `app-card-header`. */
+@Component({
+	selector: 'app-card-avatar',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmCardAvatar],
+	template: '<ng-content />',
+})
+export class CardAvatarComponent {}
+
 @Component({
 	selector: 'app-card-action',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: { style: 'margin-inline-start: auto; align-self: flex-start;' },
+	hostDirectives: [HlmCardAction],
 	template: '<ng-content />',
 })
 export class CardActionComponent {}
 
-/** Body slot — Material's `mat-card-content`. */
 @Component({
 	selector: 'app-card-content',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	hostDirectives: [MatCardContent],
+	hostDirectives: [HlmCardContent],
 	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; }',
+	hostDirectives: [HlmCardFooter],
+	host: { class: 'gap-2' },
 	template: '<ng-content />',
 })
 export class CardFooterComponent {}
+
+export const CardImports = [
+	CardComponent,
+	CardHeaderComponent,
+	CardTitleComponent,
+	CardDescriptionComponent,
+	CardAvatarComponent,
+	CardActionComponent,
+	CardContentComponent,
+	CardFooterComponent,
+] as const;

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/collapsible/collapsible.html

@@ -1,10 +1,38 @@
-<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>
+<div
+	hlmCollapsible
+	[expanded]="open()"
+	[disabled]="disabled()"
+	(expandedChange)="open.set($event)"
+	class="rounded-[12px] bg-card shadow-md overflow-hidden"
+>
+	<button
+		hlmCollapsibleTrigger
+		type="button"
+		class="flex w-full items-center justify-between px-6 min-h-12 font-medium transition-[min-height,background-color] duration-225 rounded-[inherit] disabled:pointer-events-none disabled:text-foreground/[0.38]"
+		[class.min-h-16]="open()"
+		[disabled]="disabled()"
+	>
+		<span class="flex flex-1 items-center overflow-hidden">
+			@if (title()) {
+				<span>{{ title() }}</span>
+			} @else {
+				<ng-content select="[collapsibleHeader]" />
+			}
+		</span>
+		<svg
+			class="size-6 shrink-0 transition-transform duration-225 fill-foreground/60"
+			[class.rotate-180]="open()"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 -960 960 960"
+			aria-hidden="true"
+			focusable="false"
+		>
+			<path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" />
+		</svg>
+	</button>
+	<div hlmCollapsibleContent>
+		<div class="px-6 pb-4">
+			<ng-content />
+		</div>
+	</div>
+</div>

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/components/ui/collapsible/collapsible.ts

@@ -3,24 +3,19 @@
  * 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';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import { HlmCollapsibleImports } from '@spartan-ng/styles/collapsible';
 
-/**
- * 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],
+	imports: [HlmCollapsibleImports],
 	templateUrl: './collapsible.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>('');
+	readonly disabled = input(false, { transform: booleanAttribute });
 }
+
+export const CollapsibleImports = [CollapsibleComponent] as const;