angular · adolgachev · Sep 8, 2025 · Sep 8, 2025 · Sep 8, 2025 · Sep 8, 2025
@@ -19,16 +19,25 @@ export class HeaderTagManager {
   private readonly _document = inject(DOCUMENT);
 
   /**
-   * Sets the canonical link in the header.
-   * It supposes the header link is already present in the index.html
+   * Sets the canonical link in the header. If the link already exists,
+   * it will be updated. Otherwise, a new link will be created and inserted.
    *
    * The function behave invariably and will always point to angular.dev,
    * no matter if it's a specific version build
    */
   setCanonical(absolutePath: string): void {
     const pathWithoutFragment = this._normalizePath(absolutePath).split('#')[0];
     const fullPath = `${MAT_ANGULAR_DEV}/${pathWithoutFragment}`;
-    this._document.querySelector('link[rel=canonical]')?.setAttribute('href', fullPath);
+    let canonicalLink = this._document.querySelector<HTMLLinkElement>('link[rel=canonical]');
+
+    if (canonicalLink) {
+      canonicalLink.setAttribute('href', fullPath);
+    } else {
+      canonicalLink = this._document.createElement('link');
+      canonicalLink.setAttribute('rel', 'canonical');
+      canonicalLink.setAttribute('href', fullPath);
+      this._document.head.appendChild(canonicalLink);
+    }
   }
 
   private _normalizePath(path: string): string {

@@ -3,7 +3,6 @@
 <head>
   <meta charset="utf-8">
   <title>Angular Material UI Component Library</title>
-  <link rel="canonical" href="https://material.angular.dev">
   <base href="/">
 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

@@ -66,7 +66,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     getFreeDragPosition(): Readonly<Point>;
     getPlaceholderElement(): HTMLElement;
     getRootElement(): HTMLElement;
-    lockAxis: DragAxis;
+    lockAxis: DragAxis | null;
     readonly moved: Observable<CdkDragMove<T>>;
     // (undocumented)
     static ngAcceptInputType_disabled: unknown;
@@ -259,7 +259,7 @@ export class CdkDropList<T = any> implements OnDestroy {
     getSortedItems(): CdkDrag[];
     hasAnchor: boolean;
     id: string;
-    lockAxis: DragAxis;
+    lockAxis: DragAxis | null;
     // (undocumented)
     static ngAcceptInputType_autoScrollDisabled: unknown;
     // (undocumented)
@@ -330,7 +330,7 @@ export interface DragDropConfig extends Partial<DragRefConfig> {
     // (undocumented)
     listOrientation?: DropListOrientation;
     // (undocumented)
-    lockAxis?: DragAxis;
+    lockAxis?: DragAxis | null;
     // (undocumented)
     previewClass?: string | string[];
     // (undocumented)
@@ -423,7 +423,7 @@ export class DragRef<T = any> {
     getRootElement(): HTMLElement;
     getVisibleElement(): HTMLElement;
     isDragging(): boolean;
-    lockAxis: 'x' | 'y';
+    lockAxis: 'x' | 'y' | null;
     readonly moved: Observable<{
         source: DragRef;
         pointerPosition: {
@@ -523,7 +523,7 @@ export class DropListRef<T = any> {
     isDragging(): boolean;
     _isOverContainer(x: number, y: number): boolean;
     isReceiving(): boolean;
-    lockAxis: 'x' | 'y';
+    lockAxis: 'x' | 'y' | null;
     readonly receivingStarted: Subject<{
         receiver: DropListRef;
         initiator: DropListRef;

@@ -29,7 +29,7 @@ export const CDK_DRAG_CONFIG = new InjectionToken<DragDropConfig>('CDK_DRAG_CONF
  * items and drop lists within a module or a component.
  */
 export interface DragDropConfig extends Partial<DragRefConfig> {
-  lockAxis?: DragAxis;
+  lockAxis?: DragAxis | null;
   dragStartDelay?: DragStartDelay;
   constrainPosition?: DragConstrainPosition;
   previewClass?: string | string[];

@@ -91,7 +91,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
   @Input('cdkDragData') data: T;
 
   /** Locks the position of the dragged element along the specified axis. */
-  @Input('cdkDragLockAxis') lockAxis: DragAxis;
+  @Input('cdkDragLockAxis') lockAxis: DragAxis | null = null;
 
   /**
    * Selector that will be used to determine the root draggable element, starting from
@@ -560,10 +560,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
 
     this.disabled = draggingDisabled == null ? false : draggingDisabled;
     this.dragStartDelay = dragStartDelay || 0;
-
-    if (lockAxis) {
-      this.lockAxis = lockAxis;
-    }
+    this.lockAxis = lockAxis || null;
 
     if (constrainPosition) {
       this.constrainPosition = constrainPosition;

@@ -95,7 +95,7 @@ export class CdkDropList<T = any> implements OnDestroy {
   @Input() id: string = inject(_IdGenerator).getId('cdk-drop-list-');
 
   /** Locks the position of the draggable elements inside the container along the specified axis. */
-  @Input('cdkDropListLockAxis') lockAxis: DragAxis;
+  @Input('cdkDropListLockAxis') lockAxis: DragAxis | null = null;
 
   /** Whether starting a dragging sequence from this container is disabled. */
   @Input({alias: 'cdkDropListDisabled', transform: booleanAttribute})
@@ -425,10 +425,7 @@ export class CdkDropList<T = any> implements OnDestroy {
     this.sortingDisabled = sortingDisabled == null ? false : sortingDisabled;
     this.autoScrollDisabled = listAutoScrollDisabled == null ? false : listAutoScrollDisabled;
     this.orientation = listOrientation || 'vertical';
-
-    if (lockAxis) {
-      this.lockAxis = lockAxis;
-    }
+    this.lockAxis = lockAxis || null;
   }
 
   /** Syncs up the registered drag items with underlying drop list ref. */

@@ -293,7 +293,7 @@ export class DragRef<T = any> {
   private _cachedShadowRoot: ShadowRoot | null | undefined;
 
   /** Axis along which dragging is locked. */
-  lockAxis: 'x' | 'y';
+  lockAxis: 'x' | 'y' | null = null;
 
   /**
    * Amount of milliseconds to wait after the user has put their

@@ -63,7 +63,7 @@ export class DropListRef<T = any> {
   sortingDisabled: boolean = false;
 
   /** Locks the position of the draggable elements inside the container along the specified axis. */
-  lockAxis: 'x' | 'y';
+  lockAxis: 'x' | 'y' | null = null;
 
   /**
    * Whether auto-scrolling the view when the user

@@ -1,7 +1,6 @@
 @use '@angular/cdk';
 @use './m3-progress-bar';
 @use '../core/tokens/token-utils';
-@use '../core/style/vendor-prefixes';
 
 $fallbacks: m3-progress-bar.get-tokens();
 
@@ -104,18 +103,18 @@ $fallbacks: m3-progress-bar.get-tokens();
 }
 
 .mdc-linear-progress__buffer-dots {
-  $mask: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' " +
-         "xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' " +
-         "enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' " +
-         "preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E";
-
-  @include vendor-prefixes.mask-image(url($mask));
+  $circle-color: token-utils.slot(progress-bar-track-color, $fallbacks);
+  $circle-size: calc(#{token-utils.slot(progress-bar-track-height, $fallbacks)} / 2);
+  background-image: radial-gradient(circle, #{$circle-color} #{$circle-size}, transparent 0);
   background-repeat: repeat-x;
+  background-size: calc(#{$circle-size} * 5);
+  // The `background-position` prevents the animation from jumping around when the progress
+  // changes. Note that we shouldn't invert it in RTL, because the animation direction is reversed.
+  background-position: left;
   flex: auto;
   transform: rotate(180deg);
   animation: mdc-linear-progress-buffering
     calc(250ms * var(--mat-progress-bar-animation-multiplier)) infinite linear;
-  background-color: token-utils.slot(progress-bar-track-color, $fallbacks);
 
   @include cdk.high-contrast {
     background-color: ButtonBorder;

@@ -28,6 +28,7 @@
       slider-with-tick-marks-container-shape: 50%,
       slider-with-tick-marks-container-size: 2px,
       slider-with-tick-marks-inactive-container-opacity: 0.6,
+      slider-value-indicator-transform-origin: bottom,
     ),
     color: map.merge(private-get-color-palette-color-tokens($theme, primary), (
       slider-disabled-active-track-color: map.get($system, on-surface),

@@ -7,6 +7,8 @@
 /// @param {String} $color-variant The color variant to use for the component
 @function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
   $system: m3-utils.get-system($theme);
+  $indicator-size: 28px;
+
   @if $color-variant {
     $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
   }
@@ -15,8 +17,8 @@
     base: (
       slider-value-indicator-opacity: 1,
       slider-value-indicator-padding: 0,
-      slider-value-indicator-width: 28px,
-      slider-value-indicator-height: 28px,
+      slider-value-indicator-width: $indicator-size,
+      slider-value-indicator-height: $indicator-size,
       slider-value-indicator-caret-display: none,
       slider-value-indicator-border-radius: 50% 50% 50% 0,
       slider-value-indicator-text-transform: rotate(45deg),
@@ -29,6 +31,7 @@
       slider-with-tick-marks-active-container-opacity: 0.38,
       slider-with-tick-marks-container-size: 2px,
       slider-with-tick-marks-inactive-container-opacity: 0.38,
+      slider-value-indicator-transform-origin: 0 $indicator-size,
     ),
     color: (
       slider-active-track-color: map.get($system, primary),

@@ -104,7 +104,7 @@ $fallbacks: m3-slider.get-tokens();
   display: flex;
   align-items: center;
   transform: scale(0);
-  transform-origin: bottom;
+  transform-origin: token-utils.slot(slider-value-indicator-transform-origin, $fallbacks);
   transition: transform 100ms cubic-bezier(0.4, 0, 1, 1);
 
   // Stop parent word-break from altering

@@ -11,7 +11,7 @@ interface ExtractedToken {
   /** Full prefix of the token. */
   prefix: string;
   /** Type of the token (color, typography etc.) */
-  type: string;
+  type: 'color' | 'typography' | 'density' | 'base';
   /** Value of the token. */
   value: string | number;
   /** Name under which the token can be referred to inside the `overrides` mixin. */
@@ -25,7 +25,7 @@ interface Token {
   /** Full prefix of the token. */
   prefix: string;
   /** Type of the token (color, typography etc.) */
-  type: string;
+  type: 'color' | 'typography' | 'density' | 'base';
   /** Name under which the token can be referred to inside the `overrides` mixin. */
   overridesName: string;
   /** Name of the system-level token that this token was derived from. */
@@ -172,8 +172,8 @@ function getUsageExample(themes: ThemeData[]): string | null {
     `// Customize the entire app. Change :root to your selector if you want to scope the styles.`,
     `:root {`,
     `  @include mat.${mixin.overridesMixin}((`,
-    `    ${firstToken.overridesName}: orange,`,
-    ...(secondToken ? [`    ${secondToken.overridesName}: red,`] : []),
+    `    ${getTokenExample(firstToken, 'first')},`,
+    ...(secondToken ? [`    ${getTokenExample(secondToken, 'second')},`] : []),
     `  ));`,
     `}`,
   ];
@@ -350,6 +350,30 @@ function jsonStringifyImplementation(
   `;
 }
 
+/** Generates an example string for a token. */
+function getTokenExample(token: Token, position: 'first' | 'second'): string {
+  const name = token.overridesName;
+  let value: string;
+
+  // Attempt to come up with a real-looking example based on the token's shape.
+  if (name.includes('shape')) {
+    value = position === 'first' ? '12px' : '16px';
+  } else if (name.includes('opacity')) {
+    value = position === 'first' ? '0.8' : '0.2';
+  } else if (name.includes('size')) {
+    value = position === 'first' ? '16px' : '10px';
+  } else if (name.includes('shadow')) {
+    value =
+      position === 'first'
+        ? '10px 10px 5px 0px rgba(0, 0, 0, 0.75)'
+        : '-4px -4px 5px 0px rgba(0, 0, 0, 0.5)';
+  } else {
+    value = position === 'first' ? 'orange' : 'red';
+  }
+
+  return `${name}: ${value}`;
+}
+
 /**
  * Gets the substring between two strings.
  * @param text String from which to extract the substring.