@salesforce/templates 66.13.6 → 66.13.8

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

@@ -1,112 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-@use '@angular/material' as mat;
-
-// Compact density themes — Material's canonical heights (36 / 32 / 28px).
-$-lg: mat.define-theme(
-	(
-		density: (
-			scale: -1,
-		),
-	)
-);
-$-md: mat.define-theme(
-	(
-		density: (
-			scale: -2,
-		),
-	)
-);
-$-sm: mat.define-theme(
-	(
-		density: (
-			scale: -3,
-		),
-	)
-);
-
-@mixin -height($h) {
-	--mat-button-filled-container-height: #{$h};
-	--mat-button-outlined-container-height: #{$h};
-	--mat-button-text-container-height: #{$h};
-	--mat-button-tonal-container-height: #{$h};
-	--mat-button-protected-container-height: #{$h};
-}
-
-@mixin -label-size($s) {
-	--mat-button-filled-label-text-size: #{$s};
-	--mat-button-outlined-label-text-size: #{$s};
-	--mat-button-text-label-text-size: #{$s};
-	--mat-button-tonal-label-text-size: #{$s};
-	--mat-button-protected-label-text-size: #{$s};
-}
-
-:host {
-	display: inline-flex;
-}
-
-.mat-mdc-button-base {
-	width: 100%;
-	font-weight: 500;
-	--mat-button-filled-container-shape: var(--radius-md);
-	--mat-button-outlined-container-shape: var(--radius-md);
-	--mat-button-text-container-shape: var(--radius-md);
-	--mat-button-tonal-container-shape: var(--radius-md);
-	--mat-button-protected-container-shape: var(--radius-md);
-}
-
-// Heights via Material's density scale; 24px (xs) sits below the button
-// density floor (-3 = 28px), so it sets the height token directly.
-.size-default,
-.size-icon {
-	@include mat.button-density($-md);
-}
-.size-sm,
-.size-icon-sm {
-	@include mat.button-density($-sm);
-}
-.size-lg,
-.size-icon-lg {
-	@include mat.button-density($-lg);
-}
-.size-xs,
-.size-icon-xs {
-	@include -height(1.5rem);
-}
-
-// Font-size isn't a density concern, so it stays a label token.
-.size-default,
-.size-lg {
-	@include -label-size(0.875rem);
-}
-.size-sm {
-	@include -label-size(0.8rem);
-}
-.size-xs {
-	@include -label-size(0.75rem);
-}
-
-// Icon-only: square, no min-width or horizontal padding. Material's leading-icon
-// margins assume a text label, so zero them to keep the icon centred.
-.size-icon,
-.size-icon-xs,
-.size-icon-sm,
-.size-icon-lg {
-	width: auto;
-	min-width: 0;
-	padding: 0;
-	aspect-ratio: 1;
-
-	.mat-icon {
-		margin: 0;
-	}
-}
-
-// Destructive: subtle red tint + red text, matching React's bg-destructive/10.
-.destructive {
-	--mat-button-filled-container-color: color-mix(in oklch, var(--destructive) 10%, transparent);
-	--mat-button-filled-label-text-color: var(--destructive);
-}

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

@@ -1,34 +0,0 @@
-/**
- * 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/date-picker/date-picker.scss

@@ -1,36 +0,0 @@
-/**
- * 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-range-picker/date-range-picker.scss

@@ -1,33 +0,0 @@
-/**
- * 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/input/input.scss

@@ -1,35 +0,0 @@
-/**
- * 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 inputs in a numeric/date
-	 * range). 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/label/label.html

@@ -1,3 +0,0 @@
-<label [attr.for]="for()" class="text-sm leading-none font-medium select-none">
-	<ng-content />
-</label>

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

@@ -1,35 +0,0 @@
-/**
- * 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. the operator select beside a date picker in a
-	 * date filter row). Without this, the default `min-width: auto` on a flex
-	 * item keeps each field at its content width and the row overflows.
-	 */
-	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/separator/separator.html

@@ -1 +0,0 @@
-<mat-divider role="presentation" [vertical]="isVertical()" [inset]="inset()" />

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

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-/*
- * Material's `mat-divider` draws a full-height border for the vertical variant,
- * so its element must fill the host. The host itself carries `self-stretch`
- * (see component `hostClass`) to take the flex row's height; here we make the
- * inner divider fill that height. Horizontal needs nothing extra — the divider
- * is already `display:block; width:100%`.
- */
-:host {
-	// A vertical divider is a zero-width line; keep it out of flex growth math.
-	&[data-orientation='vertical'] {
-		display: flex;
-	}
-}
-
-.mat-divider-vertical {
-	height: 100%;
-}

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

@@ -1 +0,0 @@
-<ng-content />

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

@@ -1,28 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-/*
- * The skeleton is a block by default so call sites only need to supply a width
- * and height (`h-4 w-32`) — no `block` utility to repeat. The pulse lives here
- * (rather than Tailwind's `animate-pulse`) so it can be switched off for users
- * who ask for reduced motion.
- */
-:host {
-	display: block;
-	animation: app-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes app-skeleton-pulse {
-	50% {
-		opacity: 0.5;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	:host {
-		animation: none;
-	}
-}

package/lib/templates/uiBundles/angularbasic/src/theme.scss

@@ -1,39 +0,0 @@
-// Copyright (c) 2026, Salesforce, Inc.,
-// All rights reserved.
-// For full license text, see the LICENSE.txt file
-
-// Angular Material M3 theme.
-// See https://material.angular.dev/guide/theming.
-//
-// This replaces the prebuilt azure-blue theme so we can set a negative
-// `density` — the standard, system-driven way to get the compact control
-// heights the React reference uses (no hardcoded pixel heights anywhere).
-//
-// Colour is intentionally NOT finalised here: the shadcn design tokens are
-// applied on top by remapping `--mat-sys-*` in styles.css, which loads after
-// this file. The palette below only seeds Material's base system variables.
-@use '@angular/material' as mat;
-
-html {
-	@include mat.theme(
-		(
-			color: (
-				theme-type: light,
-				primary: mat.$azure-palette,
-				tertiary: mat.$blue-palette,
-			),
-			// Font family reads Tailwind's system stack (`--font-sans`, the same
-			// default the React reference uses) instead of Material's Roboto, so
-			// Material components and Tailwind-styled text share one font. Tailwind
-			// is the single source of the family; the typescale sizes/weights stay
-			// Material's own.
-			typography: (
-					plain-family: var(--font-sans),
-					brand-family: var(--font-sans),
-				),
-			// Compact density (scale 0 to -5). Drives control heights via
-			// Material's own tokens instead of hardcoded px.
-			density: -2,
-		)
-	);
-}