@pitchfork-ui/react 0.2.0 → 0.6.0

package/dist/styles.css

@@ -15,16 +15,16 @@
   --color-gray-700: #334155;
   --color-gray-800: #1e293b;
   --color-gray-900: #0f172a;
-  --color-brand-50: #eff6ff;
-  --color-brand-100: #dbeafe;
-  --color-brand-200: #bfdbfe;
-  --color-brand-300: #93c5fd;
-  --color-brand-400: #60a5fa;
-  --color-brand-500: #3b82f6;
-  --color-brand-600: #2563eb;
-  --color-brand-700: #1d4ed8;
-  --color-brand-800: #1e40af;
-  --color-brand-900: #1e3a8a;
+  --color-brand-50: #eef2ff;
+  --color-brand-100: #e0e7ff;
+  --color-brand-200: #c7d2fe;
+  --color-brand-300: #a5b4fc;
+  --color-brand-400: #818cf8;
+  --color-brand-500: #6366f1;
+  --color-brand-600: #4f46e5;
+  --color-brand-700: #4338ca;
+  --color-brand-800: #3730a3;
+  --color-brand-900: #312e81;
   --color-success-50: #ecfdf3;
   --color-success-100: #d1fadf;
   --color-success-200: #a6f4c5;
@@ -55,6 +55,12 @@
   --color-danger-700: #b42318;
   --color-danger-800: #912018;
   --color-danger-900: #7a271a;
+  --duration-fast: 120ms;
+  --duration-moderate: 180ms;
+  --duration-slow: 280ms;
+  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
   --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
   --shadow-md: 0 8px 24px rgb(15 23 42 / 0.12);
   --shadow-lg: 0 18px 48px rgb(15 23 42 / 0.16);
@@ -85,7 +91,7 @@
   --size-icon-sm: 1rem;
   --size-icon-md: 1.25rem;
   --size-icon-lg: 1.5rem;
-  --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-family-sans: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-size-2xs: 0.6875rem;
   --font-size-xs: 0.75rem;
   --font-size-sm: 0.875rem;
@@ -148,8 +154,13 @@
   --pf-focus-ring: 0 0 0 var(--pf-focus-ring-width)
     color-mix(in srgb, var(--pf-focus-ring-color) 35%, transparent);
   --pf-focus-outline: var(--pf-focus-ring-width) solid var(--pf-focus-ring-color);
-  --pf-transition-fast: 120ms ease;
-  --pf-transition-medium: 180ms ease;
+  /* Motion — durations and easings come from Style Dictionary (--duration-*, --easing-*) */
+  --pf-transition-fast: var(--duration-fast) var(--easing-standard);
+  --pf-transition-medium: var(--duration-moderate) var(--easing-standard);
+  --pf-transition-slow: var(--duration-slow) var(--easing-standard);
+  /* Directional easings for enter/exit animations */
+  --pf-transition-enter: var(--duration-moderate) var(--easing-decelerate);
+  --pf-transition-exit: var(--duration-fast) var(--easing-accelerate);
 
   /* Control aliases */
   --pf-control-height-sm: var(--size-control-sm, 36px);
@@ -361,6 +372,19 @@
   --pf-utility-btn-danger-text: var(--color-semantic-status-danger-foreground);
   --pf-utility-btn-danger-bg-hover: var(--color-danger-100);
 
+  /* Accordion aliases */
+  --pf-accordion-border: var(--color-semantic-border-default);
+  --pf-accordion-trigger-text: var(--color-semantic-text-default);
+  --pf-accordion-trigger-bg-hover: var(--color-semantic-background-subtle);
+  --pf-accordion-icon: var(--color-semantic-text-muted);
+  --pf-accordion-content-text: var(--color-semantic-text-muted);
+
+  /* Heatmap aliases */
+  --pf-heatmap-color: var(--color-semantic-action-primary);
+  --pf-heatmap-empty: var(--color-semantic-background-subtle);
+  --pf-heatmap-label-color: var(--color-semantic-text-muted);
+  --pf-heatmap-cell-radius: var(--radius-sm);
+
   /* GaugeChart aliases */
   --pf-gauge-color: var(--color-semantic-action-primary);
   --pf-gauge-track-color: var(--color-semantic-background-subtle);
@@ -400,6 +424,9 @@
   --pf-notification-text: var(--color-semantic-text-default);
   --pf-notification-text-muted: var(--color-semantic-text-muted);
   --pf-notification-bg-subtle: var(--color-semantic-background-subtle);
+  /* Surface the variant tints blend toward; white in light, a dark raised
+     surface in dark so cards stay dark and text keeps contrast. */
+  --pf-notification-mix-base: var(--color-base-white);
   --pf-notification-info-bg: var(--color-brand-50);
   --pf-notification-info-border: var(--color-brand-300);
   --pf-notification-info-icon: var(--color-brand-700);
@@ -697,6 +724,7 @@
   --color-semantic-status-danger-bright: var(--color-danger-400);
 
   /* Info state overrides — light brand colors (brand-50/100/300) are invisible on dark surfaces */
+  --pf-notification-mix-base: var(--color-semantic-background-raised);
   --pf-notification-info-bg: var(--color-brand-900);
   --pf-notification-info-border: var(--color-brand-700);
   --pf-notification-info-icon: var(--color-brand-300);
@@ -735,6 +763,12 @@
   /* GaugeChart — track uses background-subtle (gray-700) which is 1.72:1 against gray-900 */
   --pf-gauge-track-color: var(--color-semantic-border-strong);
 
+  /* ProgressSteps — semantic success bg shades flip in dark mode, so the marker
+     numbers need opposite text colors to keep ≥4.5:1.
+     complete: white on success-700 = 5.4:1; current: success-900 on success-300 = 6.4:1 */
+  --pf-progress-steps-complete-text: var(--color-base-white);
+  --pf-progress-steps-current-text: var(--color-success-900);
+
   /* TreeView — border-default (gray-700) is 1.73:1 against gray-900, fails WCAG non-text contrast.
      border-strong (gray-500) gives 3.75:1. */
   --pf-treeview-border: var(--color-semantic-border-strong);
@@ -783,6 +817,91 @@ body {
   vertical-align: var(--pf-icon-vertical-align, middle);
   color: var(--pf-icon-color, currentColor);
 }
+.pf-accordion {
+  border: 1px solid var(--pf-accordion-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.pf-accordion__item + .pf-accordion__item {
+  border-top: 1px solid var(--pf-accordion-border);
+}
+
+.pf-accordion__heading {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+.pf-accordion__trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--pf-accordion-trigger-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-3);
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  text-align: start;
+  width: 100%;
+}
+
+.pf-accordion__trigger:hover:not(:disabled) {
+  background: var(--pf-accordion-trigger-bg-hover);
+}
+
+.pf-accordion__trigger:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.pf-accordion__trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pf-accordion__icon {
+  align-items: center;
+  color: var(--pf-accordion-icon);
+  display: inline-flex;
+  flex-shrink: 0;
+  transition: transform var(--pf-transition-fast);
+}
+
+.pf-accordion__item--open .pf-accordion__icon {
+  transform: rotate(180deg);
+}
+
+/* Animate open/close height with the grid-template-rows 0fr → 1fr technique */
+.pf-accordion__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--pf-transition-medium);
+}
+
+.pf-accordion__panel--open {
+  grid-template-rows: 1fr;
+}
+
+.pf-accordion__content {
+  min-height: 0;
+  overflow: hidden;
+  color: var(--pf-accordion-content-text);
+}
+
+.pf-accordion__content-inner {
+  padding: 0 var(--space-4) var(--space-4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-accordion__panel,
+  .pf-accordion__icon {
+    transition: none;
+  }
+}
 .pf-alert {
   align-items: flex-start;
   border: 1px solid var(--pf-alert-border);
@@ -858,7 +977,7 @@ body {
   display: inline-flex;
   font-size: var(--font-size-md);
   justify-content: center;
-  margin-left: auto;
+  margin-inline-start: auto;
   padding: 0;
 }
 
@@ -866,6 +985,34 @@ body {
   box-shadow: var(--pf-alert-focus-ring, var(--pf-focus-ring));
   outline: none;
 }
+
+/* Exit: fade and collapse so surrounding content reflows when dismissed. */
+.pf-alert--exiting {
+  animation: pf-alert-out var(--duration-moderate) var(--easing-accelerate) forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@keyframes pf-alert-out {
+  from {
+    opacity: 1;
+    max-height: 480px;
+  }
+  to {
+    opacity: 0;
+    max-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-alert--exiting {
+    animation: none;
+  }
+}
 .pf-avatar {
   --pf-avatar-status-size: 10px;
   --pf-avatar-status-offset: -2px;
@@ -943,7 +1090,7 @@ body {
   top: var(--pf-avatar-status-offset);
   height: var(--pf-avatar-status-size, 10px);
   position: absolute;
-  right: var(--pf-avatar-status-offset);
+  inset-inline-end: var(--pf-avatar-status-offset);
   width: var(--pf-avatar-status-size, 10px);
   z-index: 1;
 }
@@ -977,10 +1124,10 @@ body {
   min-height: 40px;
   text-decoration: none;
   transition:
-    background-color 120ms ease,
-    border-color 120ms ease,
-    color 120ms ease,
-    box-shadow 120ms ease;
+    background-color var(--pf-transition-fast),
+    border-color var(--pf-transition-fast),
+    color var(--pf-transition-fast),
+    box-shadow var(--pf-transition-fast);
 }
 
 .pf-button:focus-visible {
@@ -1084,13 +1231,13 @@ body {
 }
 
 .pf-badge-group--leading .pf-badge-group__text {
-  margin-left: -1px;
-  padding-left: calc(var(--space-2) + 2px);
+  margin-inline-start: -1px;
+  padding-inline-start: calc(var(--space-2) + 2px);
 }
 
 .pf-badge-group--trailing .pf-badge-group__text {
-  margin-right: -1px;
-  padding-right: calc(var(--space-2) + 2px);
+  margin-inline-end: -1px;
+  padding-inline-end: calc(var(--space-2) + 2px);
 }
 
 .pf-badge-group--leading .pf-badge-group__badge {
@@ -1187,7 +1334,7 @@ body {
   gap: var(--space-2);
   justify-content: center;
   line-height: 1;
-  margin-left: -1px;
+  margin-inline-start: -1px;
   min-height: 40px;
   padding: 0 var(--space-4);
   position: relative;
@@ -1201,7 +1348,7 @@ body {
 .pf-button-group__button:first-child {
   border-bottom-left-radius: var(--radius-md);
   border-top-left-radius: var(--radius-md);
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 .pf-button-group__button:last-child {
@@ -1691,7 +1838,7 @@ body {
   color: var(--pf-dropdown-text-muted);
   display: inline-flex;
   height: var(--pf-dropdown-icon-size);
-  transition: transform 140ms ease;
+  transition: transform var(--pf-transition-fast);
   width: var(--pf-dropdown-icon-size);
 }
 
@@ -1715,6 +1862,19 @@ body {
   padding: var(--space-1);
   position: fixed;
   z-index: 1000;
+  transform-origin: top center;
+  animation: pf-dropdown-menu-in var(--duration-fast) var(--easing-decelerate);
+}
+
+@keyframes pf-dropdown-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 .pf-dropdown__item {
@@ -1729,7 +1889,7 @@ body {
   justify-content: space-between;
   min-height: 34px;
   padding: 0 var(--space-2);
-  text-align: left;
+  text-align: start;
   width: 100%;
 }
 
@@ -1779,6 +1939,10 @@ body {
   .pf-dropdown__chevron {
     transition: none;
   }
+
+  .pf-dropdown__menu {
+    animation: none;
+  }
 }
 .pf-calendar {
   background: var(--pf-calendar-bg);
@@ -1944,7 +2108,8 @@ body {
 
 .pf-carousel__track {
   display: flex;
-  transition: transform var(--pf-carousel-transition-duration, 180ms) ease-out;
+  transition: transform var(--pf-carousel-transition-duration, var(--duration-moderate))
+    var(--easing-decelerate);
   width: 100%;
 }
 
@@ -2021,7 +2186,8 @@ body {
   cursor: pointer;
   height: var(--pf-carousel-indicator-size, 8px);
   padding: 0;
-  transition: all var(--pf-carousel-indicator-transition-duration, 120ms) ease-out;
+  transition: all var(--pf-carousel-indicator-transition-duration, var(--duration-fast))
+    var(--easing-decelerate);
   width: var(--pf-carousel-indicator-size, 8px);
 }
 
@@ -2180,8 +2346,8 @@ body {
 .pf-code-snippet__line-number {
   color: var(--pf-code-snippet-line-number, var(--color-gray-400));
   min-width: 2.5ch;
-  padding-right: var(--space-3);
-  text-align: right;
+  padding-inline-end: var(--space-3);
+  text-align: end;
   user-select: none;
   vertical-align: top;
 }
@@ -2210,8 +2376,8 @@ body {
 }
 
 .pf-content-divider--inset {
-  padding-left: var(--space-2);
-  padding-right: var(--space-2);
+  padding-inline-start: var(--space-2);
+  padding-inline-end: var(--space-2);
 }
 
 .pf-content-divider__line {
@@ -2258,7 +2424,7 @@ body {
   min-height: 40px;
   min-width: 0;
   padding: 0 var(--space-3);
-  text-align: left;
+  text-align: start;
 }
 
 .pf-date-picker__trigger:hover:not(:disabled) {
@@ -2633,6 +2799,64 @@ body {
   gap: var(--space-3);
   grid-template-columns: auto 1fr;
   padding: var(--space-3);
+  position: relative;
+}
+
+/* Leave room for the centered dismiss button so content/action don't crowd it */
+.pf-inline-cta--dismissible {
+  padding-inline-end: var(--space-12);
+}
+
+.pf-inline-cta__dismiss {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--color-semantic-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  position: absolute;
+  inset-inline-end: var(--space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 28px;
+}
+
+.pf-inline-cta__dismiss:hover,
+.pf-inline-cta__dismiss:focus-visible {
+  background: var(--color-semantic-background-subtle);
+  color: var(--color-semantic-text-default);
+  outline: none;
+}
+
+/* Exit: fade and collapse so surrounding content reflows when dismissed. */
+.pf-inline-cta--exiting {
+  animation: pf-inline-cta-out var(--duration-moderate) var(--easing-accelerate) forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@keyframes pf-inline-cta-out {
+  from {
+    opacity: 1;
+    max-height: 480px;
+  }
+  to {
+    opacity: 0;
+    max-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-inline-cta--exiting {
+    animation: none;
+  }
 }
 
 @media (min-width: 768px) {
@@ -2727,7 +2951,24 @@ body {
 }
 
 .pf-gauge__fill {
-  transition: stroke-dasharray var(--pf-transition-medium, 180ms ease);
+  stroke-dashoffset: var(--pf-gauge-offset);
+  /* Animate the arc filling from empty to its value on mount, and smoothly
+     when the value changes afterward. */
+  animation: pf-gauge-fill var(--duration-slow) var(--easing-decelerate);
+  transition: stroke-dashoffset var(--pf-transition-medium);
+}
+
+@keyframes pf-gauge-fill {
+  from {
+    stroke-dashoffset: var(--pf-gauge-circumference);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-gauge__fill {
+    animation: none;
+    transition: none;
+  }
 }
 
 .pf-gauge__center {
@@ -2756,6 +2997,106 @@ body {
   font-size: var(--font-size-sm);
   line-height: 1;
 }
+.pf-heatmap {
+  display: inline-block;
+  font-family: var(--font-family-sans);
+}
+
+.pf-heatmap__empty {
+  color: var(--color-semantic-text-muted);
+  font-size: var(--font-size-sm);
+  padding: var(--space-4);
+  text-align: center;
+}
+
+.pf-heatmap__body {
+  display: flex;
+  gap: var(--pf-heatmap-cell-gap);
+}
+
+.pf-heatmap__weekdays {
+  display: flex;
+  flex-direction: column;
+}
+
+.pf-heatmap__weekday-spacer {
+  display: block;
+  height: calc(var(--font-size-xs) + var(--space-1));
+}
+
+.pf-heatmap__weekday-grid {
+  display: grid;
+  grid-template-rows: repeat(7, var(--pf-heatmap-cell-size));
+  gap: var(--pf-heatmap-cell-gap);
+}
+
+.pf-heatmap__weekday {
+  align-items: center;
+  color: var(--pf-heatmap-label-color);
+  display: flex;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  padding-inline-end: var(--space-1);
+}
+
+.pf-heatmap__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.pf-heatmap__months {
+  display: grid;
+  gap: var(--pf-heatmap-cell-gap);
+  height: var(--font-size-xs);
+}
+
+.pf-heatmap__month {
+  color: var(--pf-heatmap-label-color);
+  font-size: var(--font-size-xs);
+  line-height: 1;
+}
+
+.pf-heatmap__grid {
+  display: grid;
+  grid-template-rows: repeat(7, var(--pf-heatmap-cell-size));
+  grid-auto-flow: column;
+  grid-auto-columns: var(--pf-heatmap-cell-size);
+  gap: var(--pf-heatmap-cell-gap);
+}
+
+.pf-heatmap__cell {
+  border-radius: var(--pf-heatmap-cell-radius);
+  height: var(--pf-heatmap-cell-size);
+  width: var(--pf-heatmap-cell-size);
+}
+
+.pf-heatmap__cell--empty {
+  background: transparent;
+}
+
+/* Staggered fade-in on mount — per-column animation-delay is set inline so
+   the grid wipes in left-to-right (oldest week → newest). */
+.pf-heatmap__cell {
+  animation: pf-heatmap-cell-in var(--duration-moderate) var(--easing-decelerate) both;
+}
+
+@keyframes pf-heatmap-cell-in {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-heatmap__cell {
+    animation: none;
+  }
+}
 /* ─── Chart color palette ─────────────────────────────────────────────── */
 :root {
   --pf-chart-color-1: var(--color-brand-600);
@@ -3182,6 +3523,8 @@ body {
 }
 
 .pf-modal__body {
+  display: grid;
+  gap: var(--space-4);
   overflow-y: auto;
   padding: var(--space-3);
 }
@@ -3227,6 +3570,66 @@ body {
   color: var(--pf-modal-text);
   outline: none;
 }
+
+/* Entrance animation — uses motion tokens via theme aliases */
+@keyframes pf-modal-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes pf-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.pf-modal__overlay {
+  animation: pf-modal-overlay-in var(--pf-transition-fast);
+}
+
+.pf-modal {
+  animation: pf-modal-in var(--pf-transition-enter);
+}
+
+/* Exit animation — plays while the dialog is being dismissed (presence handling) */
+@keyframes pf-modal-overlay-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes pf-modal-out {
+  to {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+}
+
+.pf-modal__overlay--exiting {
+  animation: pf-modal-overlay-out var(--pf-transition-fast) forwards;
+}
+
+.pf-modal--exiting {
+  animation: pf-modal-out var(--pf-transition-fast) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-modal__overlay,
+  .pf-modal,
+  .pf-modal__overlay--exiting,
+  .pf-modal--exiting {
+    animation: none;
+  }
+}
 .pf-multi-select {
   position: relative;
 }
@@ -3244,7 +3647,7 @@ body {
   justify-content: space-between;
   min-height: 40px;
   padding: var(--space-1) var(--space-2) var(--space-1) var(--space-2);
-  text-align: left;
+  text-align: start;
   width: 100%;
   transition:
     background 0.2s,
@@ -3307,7 +3710,7 @@ body {
   justify-content: center;
   width: 20px;
   transform-origin: center;
-  transition: transform 140ms ease;
+  transition: transform var(--pf-transition-fast);
 }
 
 .pf-multi-select__icon svg {
@@ -3332,6 +3735,19 @@ body {
   padding: var(--space-1);
   position: fixed;
   z-index: 1000;
+  transform-origin: top center;
+  animation: pf-multi-select-menu-in var(--duration-fast) var(--easing-decelerate);
+}
+
+@keyframes pf-multi-select-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
 }
 
 .pf-multi-select__option {
@@ -3383,6 +3799,10 @@ body {
   .pf-multi-select__icon {
     transition: none;
   }
+
+  .pf-multi-select__menu {
+    animation: none;
+  }
 }
 .pf-notification-stack {
   display: grid;
@@ -3445,6 +3865,45 @@ body {
   max-width: none;
   padding: var(--space-3);
   width: 100%;
+  animation: pf-notification-in var(--duration-moderate) var(--easing-decelerate);
+}
+
+@keyframes pf-notification-in {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+}
+
+/* Exit: slide off to the right and collapse so stacked siblings reflow. */
+.pf-notification--exiting {
+  animation: pf-notification-out var(--duration-moderate) var(--easing-accelerate) forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@keyframes pf-notification-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+    max-height: 480px;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+    max-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-notification,
+  .pf-notification--exiting {
+    animation: none;
+  }
 }
 
 @media (min-width: 768px) {
@@ -3455,22 +3914,38 @@ body {
 }
 
 .pf-notification--info {
-  background: color-mix(in srgb, var(--pf-notification-info-bg) 45%, var(--color-base-white));
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-info-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
   border-color: var(--pf-notification-info-border);
 }
 
 .pf-notification--success {
-  background: color-mix(in srgb, var(--pf-notification-success-bg) 45%, var(--color-base-white));
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-success-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
   border-color: var(--pf-notification-success-border);
 }
 
 .pf-notification--warning {
-  background: color-mix(in srgb, var(--pf-notification-warning-bg) 45%, var(--color-base-white));
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-warning-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
   border-color: var(--pf-notification-warning-border);
 }
 
 .pf-notification--danger {
-  background: color-mix(in srgb, var(--pf-notification-danger-bg) 45%, var(--color-base-white));
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-danger-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
   border-color: var(--pf-notification-danger-border);
 }
 
@@ -3780,6 +4255,38 @@ body {
   position: relative;
 }
 
+/* The conic-gradient lives on a masked layer so it can sweep ("build out")
+   clockwise on mount without clipping the center label. */
+@property --pf-pie-sweep {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
+.pf-pie-chart__visual::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-image: var(--pf-pie-gradient);
+  --pf-pie-sweep: 100%;
+  -webkit-mask: conic-gradient(#000 var(--pf-pie-sweep), #0000 0);
+  mask: conic-gradient(#000 var(--pf-pie-sweep), #0000 0);
+  animation: pf-pie-sweep var(--duration-slow) var(--easing-decelerate);
+}
+
+@keyframes pf-pie-sweep {
+  from {
+    --pf-pie-sweep: 0%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-pie-chart__visual::before {
+    animation: none;
+  }
+}
+
 .pf-pie-chart__visual--empty {
   outline: 1px solid var(--pf-piechart-border-muted);
 }
@@ -3794,6 +4301,8 @@ body {
   font-weight: var(--font-weight-semibold);
   justify-content: center;
   line-height: 1.2;
+  position: relative;
+  z-index: 1;
   text-align: center;
 }
 
@@ -3858,8 +4367,16 @@ body {
   background: var(--pf-progress-accent);
   border-radius: inherit;
   height: 100%;
-  transition: width 200ms ease;
   width: var(--pf-progress-fill, 0%);
+  /* Animate fill in from 0 on mount, and smoothly between values on change */
+  transition: width var(--pf-transition-slow);
+  animation: pf-progress-bar-in var(--duration-slow) var(--easing-decelerate);
+}
+
+@keyframes pf-progress-bar-in {
+  from {
+    width: 0;
+  }
 }
 
 .pf-progress-bar__value {
@@ -3896,7 +4413,16 @@ body {
 .pf-progress-circle__fill {
   stroke: var(--pf-progress-accent);
   stroke-linecap: round;
-  transition: stroke-dashoffset 200ms ease;
+  stroke-dashoffset: var(--pf-progress-dashoffset);
+  /* Animate fill in from empty on mount, and smoothly between values on change */
+  transition: stroke-dashoffset var(--pf-transition-slow);
+  animation: pf-progress-circle-in var(--duration-slow) var(--easing-decelerate);
+}
+
+@keyframes pf-progress-circle-in {
+  from {
+    stroke-dashoffset: var(--pf-progress-circ);
+  }
 }
 
 .pf-progress-circle__value {
@@ -3913,6 +4439,7 @@ body {
   .pf-progress-bar__fill,
   .pf-progress-circle__fill {
     transition: none;
+    animation: none;
   }
 }
 .pf-progress-steps {
@@ -3979,13 +4506,21 @@ body {
   width: 28px;
   position: relative;
   z-index: 1;
+  /* Animate marker as its status changes when the current step advances */
+  transition:
+    background-color var(--pf-transition-medium),
+    border-color var(--pf-transition-medium),
+    color var(--pf-transition-medium),
+    box-shadow var(--pf-transition-medium);
 }
 
 .pf-progress-steps__connector {
   background: var(--pf-progress-steps-border);
   display: block;
   flex: 1;
-  margin-left: var(--space-2);
+  margin-inline-start: var(--space-2);
+  /* Connector "activates" with a smooth fill as the step completes */
+  transition: background-color var(--pf-transition-slow);
 }
 
 .pf-progress-steps--horizontal .pf-progress-steps__connector {
@@ -3997,7 +4532,7 @@ body {
     display: block;
     height: 1px;
     left: 50%;
-    margin-left: 0;
+    margin-inline-start: 0;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -4028,7 +4563,7 @@ body {
 
 .pf-progress-steps--vertical .pf-progress-steps__connector {
   bottom: calc(var(--space-3) * -1);
-  left: 14px;
+  inset-inline-start: 14px;
   margin: 0;
   position: absolute;
   top: 28px;
@@ -4044,6 +4579,7 @@ body {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   margin: var(--space-1) 0 0;
+  transition: color var(--pf-transition-medium);
 }
 
 .pf-progress-steps__description {
@@ -4073,6 +4609,14 @@ body {
 .pf-progress-steps__item--current .pf-progress-steps__title {
   color: var(--pf-progress-steps-current-title);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-progress-steps__marker,
+  .pf-progress-steps__connector,
+  .pf-progress-steps__title {
+    transition: none;
+  }
+}
 .pf-radar-chart {
   align-items: stretch;
   display: inline-flex;
@@ -4170,6 +4714,28 @@ body {
   padding: var(--space-4);
   text-align: center;
 }
+
+/* Grow the value polygon out from the center on mount */
+.pf-radar-chart__value {
+  animation: pf-radar-grow var(--duration-slow) var(--easing-decelerate);
+}
+
+@keyframes pf-radar-grow {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-radar-chart__value {
+    animation: none;
+  }
+}
 .pf-radio-field {
   align-items: center;
   display: inline-flex;
@@ -4438,7 +5004,7 @@ body {
   color: var(--pf-rte-text-muted);
   font-size: var(--font-size-sm);
   margin: var(--space-2) 0 0;
-  text-align: right;
+  text-align: end;
 }
 .pf-section-footer {
   align-items: flex-start;
@@ -4655,7 +5221,7 @@ body {
   grid-template-columns: auto 1fr auto;
   min-height: 36px;
   padding: 0 var(--space-2);
-  text-align: left;
+  text-align: start;
   text-decoration: none;
   width: 100%;
 }
@@ -4710,6 +5276,54 @@ body {
 .pf-sparkline__dot {
   fill: var(--pf-sparkline-color-override, var(--pf-sparkline-color));
 }
+
+/* Opt-in mount animation: draw the line, fade in the area and end dot.
+   The line path sets pathLength="1" so dash math is length-independent. */
+.pf-sparkline--animated .pf-sparkline__line {
+  stroke-dasharray: 1;
+  animation: pf-sparkline-draw var(--duration-slow) var(--easing-standard) both;
+}
+
+@keyframes pf-sparkline-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.pf-sparkline--animated .pf-sparkline__area {
+  animation: pf-sparkline-fade var(--duration-slow) var(--easing-standard) both;
+}
+
+@keyframes pf-sparkline-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+.pf-sparkline--animated .pf-sparkline__dot {
+  animation: pf-sparkline-dot var(--duration-fast) var(--easing-decelerate) var(--duration-moderate)
+    both;
+}
+
+@keyframes pf-sparkline-dot {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-sparkline--animated .pf-sparkline__line,
+  .pf-sparkline--animated .pf-sparkline__area,
+  .pf-sparkline--animated .pf-sparkline__dot {
+    animation: none;
+  }
+}
 .pf-slideout__portal {
   inset: 0;
   position: fixed;
@@ -4721,7 +5335,7 @@ body {
   opacity: 1;
   inset: 0;
   position: absolute;
-  transition: opacity 220ms ease;
+  transition: opacity var(--pf-transition-slow);
 }
 
 .pf-slideout__viewport {
@@ -4750,7 +5364,7 @@ body {
   height: 100%;
   max-width: 100%;
   pointer-events: auto;
-  transition: transform 220ms ease;
+  transition: transform var(--pf-transition-slow);
   will-change: transform;
 }
 
@@ -4947,7 +5561,7 @@ body {
   justify-content: space-between;
   min-height: 40px;
   padding: 0 var(--space-3);
-  text-align: left;
+  text-align: start;
   width: 100%;
   transition:
     background 0.2s,
@@ -5001,7 +5615,7 @@ body {
   justify-content: center;
   width: 20px;
   transform-origin: center;
-  transition: transform 140ms ease;
+  transition: transform var(--pf-transition-fast);
 }
 
 .pf-select__icon svg {
@@ -5026,6 +5640,25 @@ body {
   padding: var(--space-1);
   position: fixed;
   z-index: 1000;
+  transform-origin: top center;
+  animation: pf-select-menu-in var(--duration-fast) var(--easing-decelerate);
+}
+
+@keyframes pf-select-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-select__menu {
+    animation: none;
+  }
 }
 
 .pf-select__option {
@@ -5218,7 +5851,7 @@ body {
   display: inline-flex;
   height: 18px;
   justify-content: center;
-  margin-right: -2px;
+  margin-inline-end: -2px;
   padding: 0;
   width: 18px;
 }
@@ -5259,9 +5892,9 @@ body {
   font-size: var(--font-size-sm);
   min-height: 56px;
   padding-top: var(--space-3);
-  padding-right: var(--space-4, 16px);
+  padding-inline-end: var(--space-4, 16px);
   padding-bottom: var(--space-3);
-  padding-left: var(--space-4, 16px);
+  padding-inline-start: var(--space-4, 16px);
 }
 
 .pf-table__head-cell,
@@ -5342,7 +5975,7 @@ body {
 }
 
 .pf-table__cell--left {
-  text-align: left;
+  text-align: start;
 }
 
 .pf-table__cell--center {
@@ -5350,7 +5983,7 @@ body {
 }
 
 .pf-table__cell--right {
-  text-align: right;
+  text-align: end;
 }
 
 .pf-table__empty {
@@ -5377,6 +6010,31 @@ body {
 .pf-tabs__list {
   display: flex;
   overflow-x: auto;
+  position: relative;
+}
+
+.pf-tabs__indicator {
+  position: absolute;
+  pointer-events: none;
+  transition:
+    left var(--pf-transition-medium),
+    width var(--pf-transition-medium),
+    top var(--pf-transition-medium),
+    height var(--pf-transition-medium);
+}
+
+.pf-tabs__indicator--underline {
+  bottom: 0;
+  height: var(--pf-tabs-underline-width);
+  background: var(--pf-tabs-text);
+  border-radius: var(--radius-full);
+}
+
+.pf-tabs__indicator--pills {
+  background: var(--pf-tabs-bg);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--pf-tabs-elevation-tab-active-shadow, var(--pf-elevation-tab-active-shadow));
+  z-index: 0;
 }
 
 .pf-tabs__list--full-width {
@@ -5405,7 +6063,8 @@ body {
   font-weight: var(--font-weight-medium);
   min-width: 0;
   position: relative;
-  transition: color 160ms ease;
+  z-index: 1;
+  transition: color var(--pf-transition-medium);
   white-space: nowrap;
 }
 
@@ -5440,7 +6099,7 @@ body {
 }
 
 .pf-tabs__tab--underline.pf-tabs__tab--active {
-  border-bottom-color: var(--pf-tabs-text);
+  /* The sliding indicator draws the underline; keep the transparent border for spacing */
   color: var(--pf-tabs-text);
 }
 
@@ -5454,8 +6113,7 @@ body {
 }
 
 .pf-tabs__tab--pills.pf-tabs__tab--active {
-  background: var(--pf-tabs-bg);
-  box-shadow: var(--pf-tabs-elevation-tab-active-shadow, var(--pf-elevation-tab-active-shadow));
+  /* The sliding indicator draws the pill background */
   color: var(--pf-tabs-text);
 }
 
@@ -5471,7 +6129,8 @@ body {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .pf-tabs__tab {
+  .pf-tabs__tab,
+  .pf-tabs__indicator {
     transition: none;
   }
 }
@@ -5553,6 +6212,41 @@ body {
   position: fixed;
   z-index: 1100;
 }
+
+/* Entrance animation — uses motion tokens via theme aliases */
+@keyframes pf-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.pf-tooltip {
+  animation: pf-tooltip-in var(--pf-transition-fast);
+}
+
+/* Exit fade — plays while the tooltip is dismissed (presence handling) */
+@keyframes pf-tooltip-out {
+  to {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+}
+
+.pf-tooltip--exiting {
+  animation: pf-tooltip-out var(--duration-fast) var(--easing-accelerate) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-tooltip,
+  .pf-tooltip--exiting {
+    animation: none;
+  }
+}
 .pf-tree-view {
   background: var(--pf-treeview-bg);
   border: 1px solid var(--pf-treeview-border);
@@ -5575,7 +6269,7 @@ body {
   display: grid;
   grid-template-columns: auto 1fr;
   min-width: 0;
-  padding-left: calc(var(--pf-tree-level, 0) * var(--space-4));
+  padding-inline-start: calc(var(--pf-tree-level, 0) * var(--space-4));
 }
 
 .pf-tree-view__toggle-wrap {
@@ -5624,7 +6318,7 @@ body {
   min-height: 34px;
   min-width: 0;
   padding: 0 var(--space-2);
-  text-align: left;
+  text-align: start;
   width: 100%;
 }