style: adopt pine motion duration tokens for component transitions

libs/core/src/components/pds-combobox/pds-combobox.scss

@@ -39,7 +39,7 @@
   flex: 1;
   font: var(--pine-typography-body-medium);
   padding: var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);
-  transition: border-color 0.2s ease;
+  transition: border-color var(--pine-motion-duration-base) ease;
   width: 100%;
 
   &:hover:not(:disabled) {

libs/core/src/components/pds-filters/pds-filter/pds-filter.scss

@@ -25,7 +25,7 @@
   line-height: var(--pine-line-height-150);
   padding: var(--pine-dimension-025) var(--pine-dimension-125);
   position: relative;
-  transition: all 0.2s ease;
+  transition: all var(--pine-motion-duration-base) ease;
 
   pds-icon {
     block-size: var(--pine-font-size-100);

libs/core/src/components/pds-input/pds-input.scss

@@ -240,7 +240,7 @@
   min-height: var(--pds-input-field-min-height);
   min-width: var(--pine-dimension-none);
   padding: var(--pds-input-padding-y) var(--pds-input-padding-x);
-  transition: border-color 0.2s ease;
+  transition: border-color var(--pine-motion-duration-base) ease;
   width: 100%;
 
   &:hover:not(:disabled) {

libs/core/src/components/pds-multiselect/pds-multiselect.scss

@@ -46,7 +46,7 @@
   padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
   position: relative;
   text-align: start;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;
   width: 100%;
 
   &:hover:not(.pds-multiselect__trigger--disabled) {

libs/core/src/components/pds-radio/pds-radio.scss

@@ -259,7 +259,7 @@ label:has(input:disabled) {
     justify-content: center;
     overflow: hidden;
     position: relative;
-    transition: all 0.2s ease;
+    transition: all var(--pine-motion-duration-base) ease;
 
     &:hover {
       border-color: var(--pine-color-border-hover);

libs/core/src/components/pds-toast/pds-toast.scss

@@ -1,6 +1,6 @@
 :host {
-  --animation-duration: 0.3s;
-  --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
+  --animation-duration: var(--pine-motion-duration-slow);
+  --animation-timing: var(--pine-motion-easing-in-out);
   --padding-inline: var(--pine-dimension-md);
   --padding-inline-desktop: var(--pine-dimension-2xl);
   --sizing-height-default: 68px;

libs/core/src/components/pds-toast/pds-toast.tsx

@@ -1,4 +1,7 @@
-import { Component, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+
+/** Fallback when computed `--animation-duration` is unavailable (matches `--pine-motion-duration-slow`). */
+const TOAST_DISMISS_ANIMATION_MS = 300;
 
 /**
  * @part dismiss
@@ -9,6 +12,8 @@ import { Component, Event, EventEmitter, h, Host, Method, Prop, State, Watch } f
   shadow: true,
 })
 export class PdsToast {
+  @Element() el!: HTMLPdsToastElement;
+
   // Props
   /**
    * A unique identifier used for the underlying component `id` attribute.
@@ -90,15 +95,56 @@ export class PdsToast {
     // Start the animation out
     this.isAnimatingOut = true;
 
-    // Wait for animation to complete before hiding and cleanup
-    await new Promise((resolve) => setTimeout(resolve, 300)); // Match --animation-duration
+    await this.waitForDismissAnimation();
 
     this.isVisible = false;
     this.cleanup();
     this.pdsToastDismissed.emit({ componentId: this.componentId });
   }
 
   // Private methods
+  private waitForDismissAnimation(): Promise<void> {
+    const durationMs = this.getDismissAnimationDurationMs();
+    if (durationMs <= 0) {
+      return Promise.resolve();
+    }
+    return new Promise((resolve) => window.setTimeout(resolve, durationMs));
+  }
+
+  private getDismissAnimationDurationMs(): number {
+    if (typeof window === 'undefined') {
+      return TOAST_DISMISS_ANIMATION_MS;
+    }
+
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      return 0;
+    }
+
+    const fromCss = this.parseCssDurationToMs(
+      getComputedStyle(this.el).getPropertyValue('--animation-duration').trim(),
+    );
+
+    return fromCss ?? TOAST_DISMISS_ANIMATION_MS;
+  }
+
+  private parseCssDurationToMs(value: string): number | undefined {
+    if (!value) {
+      return undefined;
+    }
+    if (value === '0' || value === '0ms' || value === '0s') {
+      return 0;
+    }
+    if (value.endsWith('ms')) {
+      const ms = Number.parseFloat(value);
+      return Number.isFinite(ms) ? ms : undefined;
+    }
+    if (value.endsWith('s')) {
+      const seconds = Number.parseFloat(value);
+      return Number.isFinite(seconds) ? seconds * 1000 : undefined;
+    }
+    return undefined;
+  }
+
   private cleanup(): void {
     if (this.dismissTimer) {
       window.clearTimeout(this.dismissTimer);

libs/core/src/components/pds-toast/test/pds-toast.spec.tsx

@@ -169,6 +169,52 @@ describe('pds-toast', () => {
     expect(dismissSpy).toHaveBeenCalledWith({ componentId: 'test-toast' });
   });
 
+  it('should dismiss without exit-animation delay when prefers-reduced-motion is reduce', async () => {
+    const originalMatchMedia = window.matchMedia;
+    const setTimeoutSpy = jest.spyOn(window, 'setTimeout');
+
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      writable: true,
+      value: (query: string) =>
+        ({
+          matches: query.includes('prefers-reduced-motion'),
+          media: query,
+          onchange: null,
+          addListener: jest.fn(),
+          removeListener: jest.fn(),
+          addEventListener: jest.fn(),
+          removeEventListener: jest.fn(),
+          dispatchEvent: jest.fn(),
+        }) as MediaQueryList,
+    });
+
+    try {
+      const page = await newSpecPage({
+        components: [PdsToast],
+        html: `<pds-toast component-id="test-toast" duration="0"></pds-toast>`,
+      });
+
+      const component = page.rootInstance as PdsToast;
+
+      await component.dismiss();
+
+      const exitAnimationDelays = setTimeoutSpy.mock.calls
+        .map(([, delay]) => delay)
+        .filter((delay) => delay === 300);
+
+      expect(exitAnimationDelays).toHaveLength(0);
+      expect(component.isVisible).toBe(false);
+    } finally {
+      setTimeoutSpy.mockRestore();
+      Object.defineProperty(window, 'matchMedia', {
+        configurable: true,
+        writable: true,
+        value: originalMatchMedia,
+      });
+    }
+  });
+
   // Test for button onClick calling dismiss
   it('should dismiss when dismiss button is clicked', async () => {
     const page = await newSpecPage({