prime-ui-kit 0.9.2 → 0.9.3

package/dist/index.css

@@ -217,28 +217,21 @@
   --prime-card-padding-m: var(--prime-ref-space-5);
   --prime-card-padding-s: var(--prime-ref-space-4);
   --prime-card-radius: var(--prime-ref-radius-12);
-  --prime-card-shadow: var(--prime-shadow-raised);
   --prime-color-accent-default: var(--prime-ref-color-cobalt-700);
   --prime-color-accent-fg: var(--prime-ref-color-white);
   --prime-color-accent-hover: var(--prime-ref-color-cobalt-800);
   --prime-color-accent-soft: var(--prime-ref-color-cobalt-100);
   --prime-color-accent-soft-hover: var(--prime-ref-color-cobalt-200);
   --prime-color-accent-text: var(--prime-ref-color-cobalt-700);
-  --prime-color-bg-canvas: var(--prime-ref-color-gray-50);
   --prime-color-bg-edge-shadow: rgba(17, 19, 24, 0.14);
   --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-0) 58%, transparent);
   --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.85);
   --prime-color-bg-inverse: var(--prime-ref-color-gray-925);
-  --prime-color-bg-raised: var(--prime-ref-color-gray-0);
   --prime-color-bg-scrim: rgba(17, 19, 24, 0.44);
-  --prime-color-bg-sunken: var(--prime-ref-color-gray-75);
-  --prime-color-bg-surface: var(--prime-ref-color-gray-0);
   --prime-color-border-control: transparent;
   --prime-color-border-default: var(--prime-ref-color-gray-150);
   --prime-color-border-faint: var(--prime-ref-color-gray-75);
   --prime-color-border-subtle: var(--prime-ref-color-gray-100);
-  --prime-color-card-bg: var(--prime-color-bg-surface);
-  --prime-color-control-selected: var(--prime-ref-color-gray-0);
   --prime-color-control-thumb: var(--prime-ref-color-white);
   --prime-color-danger-border: var(--prime-ref-color-red-500);
   --prime-color-danger-default: var(--prime-ref-color-red-600);
@@ -246,14 +239,8 @@
   --prime-color-danger-hover: var(--prime-ref-color-red-700);
   --prime-color-danger-soft: var(--prime-ref-color-red-100);
   --prime-color-danger-text: var(--prime-ref-color-red-700);
-  --prime-color-field-bg: color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent);
   --prime-color-field-bg-disabled: color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent);
-  --prime-color-field-bg-focus: var(--prime-ref-color-gray-0);
-  --prime-color-field-bg-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 12%, transparent);
-  --prime-color-field-bg-surface: color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent);
   --prime-color-fill-faint: rgba(17, 19, 24, 0.04);
-  --prime-color-fill-muted: color-mix(in srgb, var(--prime-ref-color-gray-925) 7%, transparent);
-  --prime-color-fill-muted-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 10%, transparent);
   --prime-color-fill-strong: color-mix(in srgb, var(--prime-ref-color-gray-925) 15%, transparent);
   --prime-color-fill-strong-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 22%, transparent);
   --prime-color-fill-subtle: rgba(17, 19, 24, 0.04);
@@ -263,6 +250,38 @@
   --prime-color-info-fg: var(--prime-ref-color-white);
   --prime-color-info-soft: var(--prime-ref-color-sky-100);
   --prime-color-info-text: var(--prime-ref-color-sky-800);
+  --prime-color-layer-0-bg: #f3f4f6;
+  --prime-color-layer-0-fill: #e9eaec;
+  --prime-color-layer-0-fill-hover: #dfe0e2;
+  --prime-color-layer-0-selected: #ffffff;
+  --prime-color-layer-1-bg: #ffffff;
+  --prime-color-layer-1-fill: #f4f5f7;
+  --prime-color-layer-1-fill-hover: #eaebed;
+  --prime-color-layer-1-selected: #ffffff;
+  --prime-color-layer-2-bg: #f4f5f7;
+  --prime-color-layer-2-fill: #eaebed;
+  --prime-color-layer-2-fill-hover: #e0e1e3;
+  --prime-color-layer-2-selected: #ffffff;
+  --prime-color-layer-3-bg: #ffffff;
+  --prime-color-layer-3-fill: #f4f5f7;
+  --prime-color-layer-3-fill-hover: #eaebed;
+  --prime-color-layer-3-selected: #ffffff;
+  --prime-color-layer-4-bg: #f4f5f7;
+  --prime-color-layer-4-fill: #eaebed;
+  --prime-color-layer-4-fill-hover: #e0e1e3;
+  --prime-color-layer-4-selected: #ffffff;
+  --prime-color-layer-floating-bg: #ffffff;
+  --prime-color-layer-floating-fill: #f4f5f7;
+  --prime-color-layer-floating-fill-hover: #eaebed;
+  --prime-color-layer-floating-selected: #ffffff;
+  --prime-color-layer-floating1-bg: #f4f5f7;
+  --prime-color-layer-floating1-fill: #eaebed;
+  --prime-color-layer-floating1-fill-hover: #e0e1e3;
+  --prime-color-layer-floating1-selected: #ffffff;
+  --prime-color-layer-floating2-bg: #ffffff;
+  --prime-color-layer-floating2-fill: #f4f5f7;
+  --prime-color-layer-floating2-fill-hover: #eaebed;
+  --prime-color-layer-floating2-selected: #ffffff;
   --prime-color-palette-blue-soft: var(--prime-ref-color-cobalt-100);
   --prime-color-palette-blue-solid: var(--prime-ref-color-cobalt-700);
   --prime-color-palette-blue-solid-fg: var(--prime-ref-color-white);
@@ -314,6 +333,8 @@
   --prime-color-text-primary: var(--prime-ref-color-gray-925);
   --prime-color-text-secondary: var(--prime-ref-color-gray-700);
   --prime-color-tooltip-bg: var(--prime-ref-color-gray-925);
+  --prime-color-tooltip-fill: rgba(255, 255, 255, 0.14);
+  --prime-color-tooltip-muted: var(--prime-ref-color-gray-300);
   --prime-color-tooltip-text: var(--prime-ref-color-gray-0);
   --prime-color-warning-default: var(--prime-ref-color-orange-700);
   --prime-color-warning-fg: var(--prime-ref-color-white);
@@ -443,6 +464,7 @@
   --prime-modal-width-m: 35rem;
   --prime-modal-width-s: 27.5rem;
   --prime-modal-width-xl: 60rem;
+  --prime-motion-blur: 2px;
   --prime-motion-duration-base: var(--prime-ref-duration-380);
   --prime-motion-duration-fast: var(--prime-ref-duration-230);
   --prime-motion-duration-slow: var(--prime-ref-duration-570);
@@ -581,11 +603,33 @@
   --prime-thumbnail-xs-radius: var(--prime-ref-radius-4);
   --prime-tooltip-arrow-height: 0.3125rem;
   --prime-tooltip-arrow-width: 0.625rem;
+  --prime-tooltip-l-line-height: var(--prime-ref-font-line-height-20);
+  --prime-tooltip-l-padding-x: var(--prime-ref-space-3);
+  --prime-tooltip-l-padding-y: var(--prime-ref-space-2);
+  --prime-tooltip-l-radius: var(--prime-ref-radius-8);
+  --prime-tooltip-l-text-size: var(--prime-ref-font-size-14);
+  --prime-tooltip-m-line-height: var(--prime-ref-font-line-height-20);
+  --prime-tooltip-m-padding-x: 0.625rem;
+  --prime-tooltip-m-padding-y: 0.375rem;
+  --prime-tooltip-m-radius: var(--prime-ref-radius-6);
+  --prime-tooltip-m-text-size: var(--prime-ref-font-size-13);
   --prime-tooltip-max-width: 17.5rem;
   --prime-tooltip-offset: var(--prime-ref-space-2);
-  --prime-tooltip-padding-x: var(--prime-ref-space-2);
-  --prime-tooltip-padding-y: var(--prime-ref-space-1);
-  --prime-tooltip-radius: var(--prime-ref-radius-6);
+  --prime-tooltip-s-line-height: var(--prime-ref-font-line-height-16);
+  --prime-tooltip-s-padding-x: var(--prime-ref-space-2);
+  --prime-tooltip-s-padding-y: 0.375rem;
+  --prime-tooltip-s-radius: var(--prime-ref-radius-6);
+  --prime-tooltip-s-text-size: var(--prime-ref-font-size-12);
+  --prime-tooltip-xl-line-height: var(--prime-ref-font-line-height-24);
+  --prime-tooltip-xl-padding-x: var(--prime-ref-space-4);
+  --prime-tooltip-xl-padding-y: var(--prime-ref-space-2);
+  --prime-tooltip-xl-radius: var(--prime-ref-radius-8);
+  --prime-tooltip-xl-text-size: var(--prime-ref-font-size-16);
+  --prime-tooltip-xs-line-height: var(--prime-ref-font-line-height-16);
+  --prime-tooltip-xs-padding-x: 0.375rem;
+  --prime-tooltip-xs-padding-y: var(--prime-ref-space-1);
+  --prime-tooltip-xs-radius: var(--prime-ref-radius-4);
+  --prime-tooltip-xs-text-size: var(--prime-ref-font-size-12);
   --prime-z-overlay: var(--prime-ref-z-index-overlay);
   --prime-z-sticky: var(--prime-ref-z-index-sticky);
   --prime-z-toast: var(--prime-ref-z-index-toast);
@@ -599,32 +643,21 @@
   --prime-color-accent-soft: var(--prime-ref-color-cobalt-950);
   --prime-color-accent-soft-hover: color-mix(in srgb, var(--prime-ref-color-cobalt-500) 28%, transparent);
   --prime-color-accent-text: var(--prime-ref-color-cobalt-400);
-  --prime-color-bg-canvas: var(--prime-ref-color-gray-950);
   --prime-color-bg-edge-shadow: rgba(0, 0, 0, 0.5);
   --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-875) 56%, transparent);
   --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.16);
   --prime-color-bg-inverse: var(--prime-ref-color-gray-100);
-  --prime-color-bg-raised: var(--prime-ref-color-gray-875);
   --prime-color-bg-scrim: rgba(0, 0, 0, 0.6);
-  --prime-color-bg-sunken: var(--prime-ref-color-gray-950);
-  --prime-color-bg-surface: var(--prime-ref-color-gray-900);
   --prime-color-border-default: var(--prime-ref-color-gray-750);
   --prime-color-border-faint: var(--prime-ref-color-gray-850);
   --prime-color-border-subtle: var(--prime-ref-color-gray-800);
-  --prime-color-control-selected: var(--prime-ref-color-gray-750);
   --prime-color-control-thumb: var(--prime-ref-color-gray-100);
   --prime-color-danger-border: var(--prime-ref-color-red-400);
   --prime-color-danger-hover: var(--prime-ref-color-red-500);
   --prime-color-danger-soft: color-mix(in srgb, var(--prime-ref-color-red-500) 16%, transparent);
   --prime-color-danger-text: var(--prime-ref-color-red-300);
-  --prime-color-field-bg: color-mix(in srgb, var(--prime-ref-color-gray-100) 6%, transparent);
   --prime-color-field-bg-disabled: color-mix(in srgb, var(--prime-ref-color-gray-100) 4%, transparent);
-  --prime-color-field-bg-focus: var(--prime-ref-color-gray-925);
-  --prime-color-field-bg-hover: color-mix(in srgb, var(--prime-ref-color-gray-100) 12%, transparent);
-  --prime-color-field-bg-surface: color-mix(in srgb, var(--prime-ref-color-gray-100) 6%, transparent);
   --prime-color-fill-faint: rgba(233, 235, 240, 0.02);
-  --prime-color-fill-muted: color-mix(in srgb, var(--prime-ref-color-gray-100) 7%, transparent);
-  --prime-color-fill-muted-hover: color-mix(in srgb, var(--prime-ref-color-gray-100) 10%, transparent);
   --prime-color-fill-strong: color-mix(in srgb, var(--prime-ref-color-gray-100) 16%, transparent);
   --prime-color-fill-strong-hover: color-mix(in srgb, var(--prime-ref-color-gray-100) 22%, transparent);
   --prime-color-fill-subtle: rgba(233, 235, 240, 0.05);
@@ -634,6 +667,38 @@
   --prime-color-info-fg: var(--prime-ref-color-gray-950);
   --prime-color-info-soft: color-mix(in srgb, var(--prime-ref-color-sky-500) 16%, transparent);
   --prime-color-info-text: var(--prime-ref-color-sky-300);
+  --prime-color-layer-0-bg: #0d0f13;
+  --prime-color-layer-0-fill: #14161a;
+  --prime-color-layer-0-fill-hover: #1a1c21;
+  --prime-color-layer-0-selected: #212428;
+  --prime-color-layer-1-bg: #14161a;
+  --prime-color-layer-1-fill: #1a1c21;
+  --prime-color-layer-1-fill-hover: #212428;
+  --prime-color-layer-1-selected: #292b2f;
+  --prime-color-layer-2-bg: #1a1c21;
+  --prime-color-layer-2-fill: #212428;
+  --prime-color-layer-2-fill-hover: #292b2f;
+  --prime-color-layer-2-selected: #303237;
+  --prime-color-layer-3-bg: #212428;
+  --prime-color-layer-3-fill: #292b2f;
+  --prime-color-layer-3-fill-hover: #303237;
+  --prime-color-layer-3-selected: #383a3f;
+  --prime-color-layer-4-bg: #292b2f;
+  --prime-color-layer-4-fill: #303237;
+  --prime-color-layer-4-fill-hover: #383a3f;
+  --prime-color-layer-4-selected: #3f4247;
+  --prime-color-layer-floating-bg: #1a1c21;
+  --prime-color-layer-floating-fill: #212428;
+  --prime-color-layer-floating-fill-hover: #292b2f;
+  --prime-color-layer-floating-selected: #303237;
+  --prime-color-layer-floating1-bg: #212328;
+  --prime-color-layer-floating1-fill: #282a2f;
+  --prime-color-layer-floating1-fill-hover: #303237;
+  --prime-color-layer-floating1-selected: #373a3e;
+  --prime-color-layer-floating2-bg: #282a2f;
+  --prime-color-layer-floating2-fill: #303237;
+  --prime-color-layer-floating2-fill-hover: #373a3e;
+  --prime-color-layer-floating2-selected: #3f4146;
   --prime-color-palette-blue-soft: color-mix(in srgb, var(--prime-ref-color-cobalt-500) 16%, transparent);
   --prime-color-palette-blue-solid: var(--prime-ref-color-cobalt-400);
   --prime-color-palette-blue-solid-fg: var(--prime-ref-color-gray-950);
@@ -683,8 +748,10 @@
   --prime-color-text-placeholder: var(--prime-ref-color-gray-400);
   --prime-color-text-primary: var(--prime-ref-color-gray-100);
   --prime-color-text-secondary: var(--prime-ref-color-gray-300);
-  --prime-color-tooltip-bg: var(--prime-ref-color-gray-750);
-  --prime-color-tooltip-text: var(--prime-ref-color-gray-100);
+  --prime-color-tooltip-bg: var(--prime-ref-color-gray-100);
+  --prime-color-tooltip-fill: rgba(17, 19, 24, 0.08);
+  --prime-color-tooltip-muted: var(--prime-ref-color-gray-600);
+  --prime-color-tooltip-text: var(--prime-ref-color-gray-925);
   --prime-color-warning-default: var(--prime-ref-color-orange-400);
   --prime-color-warning-fg: var(--prime-ref-color-gray-950);
   --prime-color-warning-soft: color-mix(in srgb, var(--prime-ref-color-orange-500) 16%, transparent);
@@ -699,7 +766,7 @@
 :root {
   font-family: var(--prime-font-family-sans);
   color: var(--prime-color-text-primary);
-  background: var(--prime-color-bg-canvas);
+  background: var(--prime-color-layer-0-bg);
   text-rendering: optimizeLegibility;
   font-kerning: normal;
   font-feature-settings: "cv11", "ss01";
@@ -712,7 +779,7 @@
   color-scheme: dark;
 }
 body {
-  background: var(--prime-color-bg-canvas);
+  background: var(--prime-color-layer-0-bg);
   color: var(--prime-color-text-primary);
   font-size: var(--prime-text-body-m-size);
   line-height: var(--prime-text-body-m-line-height);
@@ -754,6 +821,105 @@ input::-moz-focus-inner {
     --prime-color-border-subtle: var(--prime-color-text-muted);
   }
 }
+:root,
+[data-theme],
+[data-depth="0"] {
+  --prime-color-layer-current: var(--prime-color-layer-0-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-1-bg);
+  --prime-color-field-bg: var(--prime-color-layer-0-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-0-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-0-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-0-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-0-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-0-selected);
+  --prime-layer-shadow: none;
+}
+[data-depth="1"] {
+  --prime-color-layer-current: var(--prime-color-layer-1-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-2-bg);
+  --prime-color-field-bg: var(--prime-color-layer-1-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-1-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-1-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-1-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-1-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-1-selected);
+  --prime-layer-shadow: var(--prime-shadow-raised);
+}
+[data-depth="2"] {
+  --prime-color-layer-current: var(--prime-color-layer-2-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-3-bg);
+  --prime-color-field-bg: var(--prime-color-layer-2-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-2-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-2-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-2-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-2-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-2-selected);
+  --prime-layer-shadow: none;
+}
+[data-depth="3"] {
+  --prime-color-layer-current: var(--prime-color-layer-3-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-4-bg);
+  --prime-color-field-bg: var(--prime-color-layer-3-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-3-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-3-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-3-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-3-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-3-selected);
+  --prime-layer-shadow: none;
+}
+[data-depth="4"] {
+  --prime-color-layer-current: var(--prime-color-layer-4-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-4-bg);
+  --prime-color-field-bg: var(--prime-color-layer-4-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-4-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-4-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-4-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-4-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-4-selected);
+  --prime-layer-shadow: none;
+}
+[data-depth=floating] {
+  --prime-color-layer-current: var(--prime-color-layer-floating-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-floating1-bg);
+  --prime-color-field-bg: var(--prime-color-layer-floating-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-floating-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-floating-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-floating-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-floating-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-floating-selected);
+  --prime-layer-shadow: none;
+}
+[data-depth=floating-1] {
+  --prime-color-layer-current: var(--prime-color-layer-floating1-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-floating2-bg);
+  --prime-color-field-bg: var(--prime-color-layer-floating1-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-floating1-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-floating1-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-floating1-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-floating1-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-floating1-selected);
+  --prime-layer-shadow: none;
+}
+[data-depth=floating-2] {
+  --prime-color-layer-current: var(--prime-color-layer-floating2-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-floating2-bg);
+  --prime-color-field-bg: var(--prime-color-layer-floating2-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-floating2-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-floating2-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-floating2-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-floating2-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-floating2-selected);
+  --prime-layer-shadow: none;
+}
+[data-depth=tinted] {
+  --prime-color-field-bg: var(--prime-color-fill-subtle-active);
+  --prime-color-field-bg-hover: var(--prime-color-fill-strong);
+  --prime-color-field-bg-focus: var(--prime-color-layer-floating-bg);
+  --prime-color-fill-muted: var(--prime-color-fill-subtle-active);
+  --prime-color-fill-muted-hover: var(--prime-color-fill-strong);
+  --prime-color-control-selected: var(--prime-color-layer-floating-bg);
+  --prime-layer-shadow: none;
+}
 [data-theme-switching],
 [data-theme-switching] *,
 [data-theme-switching] *::before,
@@ -898,6 +1064,77 @@ input::-moz-focus-inner {
   background: var(--prime-color-field-bg-focus);
 }
 
+/* src/internal/VisuallyHidden.module.css */
+.VisuallyHidden_root {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  width: var(--prime-border-width);
+  height: var(--prime-border-width);
+  padding: 0;
+  margin: calc(-1 * var(--prime-border-width));
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* src/internal/MorphText.module.css */
+.MorphText_root {
+  display: inline-block;
+  max-width: 100%;
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+.MorphText_morphing {
+  position: relative;
+  overflow: visible;
+  transition: width var(--prime-motion-duration-base) var(--prime-motion-easing-emphasized);
+}
+.MorphText_sizer {
+  display: inline-block;
+  visibility: hidden;
+}
+.MorphText_layer {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  display: inline-flex;
+  translate: -50% 0;
+  pointer-events: none;
+}
+.MorphText_letter {
+  display: inline-block;
+  white-space: pre;
+  animation-delay: calc(var(--prime-motion-stagger) * var(--morph-i) / 6);
+}
+.MorphText_letterOut {
+  animation-name: MorphText_primeMorphOut;
+  animation-duration: var(--prime-motion-duration-fast);
+  animation-timing-function: var(--prime-motion-easing-exit);
+  animation-fill-mode: both;
+}
+.MorphText_letterIn {
+  animation-name: MorphText_primeMorphIn;
+  animation-duration: var(--prime-motion-duration-base);
+  animation-timing-function: var(--prime-motion-easing-emphasized);
+  animation-fill-mode: both;
+}
+@keyframes MorphText_primeMorphOut {
+  to {
+    opacity: 0;
+    transform: translateY(-0.5em);
+    filter: blur(var(--prime-motion-blur));
+  }
+}
+@keyframes MorphText_primeMorphIn {
+  from {
+    opacity: 0;
+    transform: translateY(0.5em);
+    filter: blur(var(--prime-motion-blur));
+  }
+}
+
 /* src/internal/touchTarget.module.css */
 @media (pointer: coarse) {
   :where(.touchTarget_target, .touchTarget_targetBlock) {
@@ -971,21 +1208,6 @@ input::-moz-focus-inner {
   color: var(--prime-color-danger-text);
 }
 
-/* src/internal/VisuallyHidden.module.css */
-.VisuallyHidden_root {
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-  width: var(--prime-border-width);
-  height: var(--prime-border-width);
-  padding: 0;
-  margin: calc(-1 * var(--prime-border-width));
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
 /* src/components/spinner/Spinner.module.css */
 .Spinner_root {
   position: relative;
@@ -1215,6 +1437,55 @@ input::-moz-focus-inner {
   inset: 0;
   margin: auto;
 }
+.Button_root:has(> .Button_fillTrack) {
+  --btn-fill-dir: -1;
+  isolation: isolate;
+}
+.Button_root:dir(rtl) {
+  --btn-fill-dir: 1;
+}
+.Button_fillTrack {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.Button_fill {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: color-mix(in srgb, var(--btn-fg) 18%, transparent);
+  opacity: 0;
+  translate: calc(var(--btn-fill-dir) * 100%) 0;
+  transition: opacity var(--prime-motion-duration-fast) var(--prime-motion-easing-exit), translate 0s linear var(--prime-motion-duration-fast);
+}
+.Button_root[data-progress=true] .Button_fill {
+  opacity: 1;
+  translate: calc(var(--btn-fill-dir) * (1 - var(--btn-progress)) * 100%) 0;
+  transition: translate var(--prime-motion-duration-fast) var(--prime-motion-easing-standard), opacity var(--prime-motion-duration-fast) var(--prime-motion-easing-standard);
+}
+.Button_root[data-hold] .Button_fill {
+  background: color-mix(in srgb, var(--btn-fg) 32%, transparent);
+}
+.Button_root[data-hold=holding] .Button_fill {
+  opacity: 1;
+  translate: 0 0;
+  transition: translate var(--btn-hold-duration) linear, opacity var(--prime-motion-duration-xfast) var(--prime-motion-easing-standard);
+}
+.Button_root[data-hold=done] .Button_fill {
+  opacity: 1;
+  translate: 0 0;
+  transition: none;
+}
+.Button_root[data-hold=cancel] .Button_fill {
+  opacity: 1;
+  transition: translate var(--prime-motion-duration-fast) var(--prime-motion-easing-exit);
+}
+.Button_root[data-hold] {
+  -webkit-touch-callout: none;
+}
 
 /* src/components/divider/Divider.module.css */
 .Divider_root {
@@ -1401,7 +1672,7 @@ input::-moz-focus-inner {
   min-width: 0;
   padding-block: max(var(--prime-space-3), env(safe-area-inset-top, 0px)) var(--prime-space-3);
   padding-inline: var(--shell-gutter, var(--prime-space-4));
-  background: var(--prime-color-bg-surface);
+  background: var(--prime-color-layer-current);
   color: var(--prime-color-text-primary);
 }
 @media (max-height: 479px) {
@@ -1596,10 +1867,10 @@ input::-moz-focus-inner {
   --fade-dir: to left;
 }
 .ScrollContainer_root[data-fade][data-overflow-start=true] {
-  --fade-start: var(--prime-space-8);
+  --fade-start: min(var(--prime-space-8), var(--edge-start, var(--prime-space-8)));
 }
 .ScrollContainer_root[data-fade][data-overflow-end=true] {
-  --fade-end: var(--prime-space-8);
+  --fade-end: min(var(--prime-space-8), var(--edge-end, var(--prime-space-8)));
 }
 .ScrollContainer_root[data-fade]:is([data-overflow-start=true], [data-overflow-end=true]) {
   mask-image:
@@ -1621,7 +1892,7 @@ input::-moz-focus-inner {
   width: 100%;
   min-width: 0;
   min-height: 100dvh;
-  background: var(--prime-color-bg-canvas);
+  background: var(--prime-color-layer-current);
   color: var(--prime-color-text-primary);
 }
 .AppShell_root:not(:has(> .AppShell_nav)) {
@@ -1658,9 +1929,6 @@ input::-moz-focus-inner {
   min-height: 0;
 }
 .AppShell_panel {
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
-  --prime-color-card-bg: var(--prime-color-bg-sunken);
-  --prime-card-shadow: none;
   isolation: isolate;
   box-sizing: border-box;
   display: flex;
@@ -1668,7 +1936,7 @@ input::-moz-focus-inner {
   min-width: 0;
   min-height: 0;
   overflow: clip;
-  background: var(--prime-color-bg-surface);
+  background: var(--prime-color-layer-current);
   color: var(--prime-color-text-primary);
 }
 .AppShell_footer {
@@ -1765,6 +2033,40 @@ input::-moz-focus-inner {
   --hue-solid-fg: var(--prime-color-palette-teal-solid-fg);
 }
 
+/* src/internal/RollingNumber.module.css */
+.RollingNumber_root {
+  display: inline-flex;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.RollingNumber_digit {
+  position: relative;
+  display: inline-block;
+  height: 1lh;
+  overflow: hidden;
+  -webkit-text-fill-color: transparent;
+  mask-image:
+    linear-gradient(
+      transparent,
+      var(--prime-color-text-primary) 20%,
+      var(--prime-color-text-primary) 80%,
+      transparent);
+}
+.RollingNumber_digit::before {
+  content: "0\a 1\a 2\a 3\a 4\a 5\a 6\a 7\a 8\a 9";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+  -webkit-text-fill-color: currentColor;
+  white-space: pre;
+  text-align: center;
+  transform: translateY(calc(var(--rolling-n) * -1lh));
+  transition: transform var(--prime-motion-duration-base) var(--prime-motion-easing-emphasized);
+}
+.RollingNumber_char {
+  white-space: pre;
+}
+
 /* src/components/badge/Badge.module.css */
 .Badge_root {
   --badge-lh: var(--prime-text-caption-line-height);
@@ -2067,7 +2369,7 @@ input::-moz-focus-inner {
   min-height: var(--prime-bottom-nav-height);
   padding-inline: var(--prime-bottom-nav-padding-x);
   padding-block-end: env(safe-area-inset-bottom, 0px);
-  background: var(--prime-color-bg-surface);
+  background: var(--prime-color-layer-current);
   box-shadow: inset 0 var(--prime-border-width) 0 var(--prime-color-border-faint);
 }
 .BottomNav_root[data-icon-only=true] {
@@ -2120,7 +2422,7 @@ input::-moz-focus-inner {
 }
 @media (prefers-reduced-transparency: reduce) {
   .BottomNav_root[data-floating=true] {
-    background: var(--prime-color-bg-raised);
+    background: var(--prime-color-layer-floating-bg);
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
@@ -2278,7 +2580,7 @@ input::-moz-focus-inner {
   height: calc(var(--avatar-size) * 0.3);
   border-radius: var(--prime-radius-full);
   background: var(--prime-color-success-default);
-  box-shadow: 0 0 0 calc(2 * var(--prime-border-width)) var(--avatar-ring, var(--prime-color-bg-canvas));
+  box-shadow: 0 0 0 calc(2 * var(--prime-border-width)) var(--avatar-ring, var(--prime-color-layer-current));
 }
 .Avatar_status[data-status=offline] {
   background: var(--prime-color-palette-gray-solid);
@@ -2296,16 +2598,16 @@ input::-moz-focus-inner {
   isolation: isolate;
 }
 .Avatar_group > * {
-  box-shadow: 0 0 0 calc(2 * var(--prime-border-width)) var(--avatar-ring, var(--prime-color-bg-canvas));
+  box-shadow: 0 0 0 calc(2 * var(--prime-border-width)) var(--avatar-ring, var(--prime-color-layer-current));
 }
 .Avatar_group > .Avatar_root {
-  background: linear-gradient(var(--hue-soft), var(--hue-soft)), var(--avatar-ring, var(--prime-color-bg-canvas));
+  background: linear-gradient(var(--hue-soft), var(--hue-soft)), var(--avatar-ring, var(--prime-color-layer-current));
 }
 .Avatar_group > * + * {
   margin-inline-start: calc(var(--avatar-size) * -0.25);
 }
 .Avatar_overflow {
-  background: linear-gradient(var(--prime-color-fill-muted), var(--prime-color-fill-muted)), var(--avatar-ring, var(--prime-color-bg-canvas));
+  background: linear-gradient(var(--prime-color-fill-muted), var(--prime-color-fill-muted)), var(--avatar-ring, var(--prime-color-layer-current));
   color: var(--prime-color-text-secondary);
   font-variant-numeric: tabular-nums;
   font-size: calc(var(--avatar-size) * 0.36);
@@ -2313,7 +2615,6 @@ input::-moz-focus-inner {
 
 /* src/internal/floatingSurface.module.css */
 .floatingSurface_surface {
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
   position: fixed;
   box-sizing: border-box;
   display: flex;
@@ -2325,7 +2626,7 @@ input::-moz-focus-inner {
   margin: 0;
   border: 0;
   border-radius: var(--prime-panel-radius);
-  background: var(--prime-color-bg-raised);
+  background: var(--prime-color-layer-current);
   box-shadow: var(--prime-shadow-overlay);
   color: var(--prime-color-text-primary);
   font-family: var(--prime-font-family-sans);
@@ -2340,7 +2641,6 @@ input::-moz-focus-inner {
   background: var(--prime-color-bg-scrim);
 }
 .floatingSurface_sheet {
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
   --float-max-h: calc(100dvh - var(--prime-sheet-top-gap) - var(--prime-sheet-handle-area));
   --prime-panel-max-height: var(--float-max-h);
   position: fixed;
@@ -2354,8 +2654,8 @@ input::-moz-focus-inner {
   padding-block-end: max(var(--prime-space-2), env(safe-area-inset-bottom, 0px));
   border-start-start-radius: var(--prime-sheet-radius);
   border-start-end-radius: var(--prime-sheet-radius);
-  background: var(--prime-color-bg-raised);
-  box-shadow: 0 var(--prime-space-6) 0 0 var(--prime-color-bg-raised), var(--prime-shadow-modal);
+  background: var(--prime-color-layer-current);
+  box-shadow: 0 var(--prime-space-6) 0 0 var(--prime-color-layer-current), var(--prime-shadow-modal);
   color: var(--prime-color-text-primary);
   font-family: var(--prime-font-family-sans);
   outline: none;
@@ -2550,9 +2850,7 @@ input::-moz-focus-inner {
   --po-lh: var(--prime-control-m-line-height);
   --po-desc: var(--prime-control-m-label-size);
   --po-desc-lh: var(--prime-control-m-label-line-height);
-  --prime-color-card-bg: var(--prime-color-bg-sunken);
-  --prime-card-shadow: none;
-  --avatar-ring: var(--prime-color-bg-raised);
+  --avatar-ring: var(--prime-color-layer-current);
   gap: var(--po-gap);
   max-height: var(--float-max-h, none);
   padding: var(--po-pad);
@@ -2640,31 +2938,40 @@ input::-moz-focus-inner {
 /* src/components/tooltip/Tooltip.module.css */
 .Tooltip_content {
   --tt-arrow: var(--float-arrow, 50%);
-  --tt-text: var(--prime-text-caption-size);
-  --tt-lh: var(--prime-text-caption-line-height);
-  --tt-px: var(--prime-tooltip-padding-x);
-  --tt-py: var(--prime-tooltip-padding-y);
+  --tt-text: var(--prime-tooltip-m-text-size);
+  --tt-lh: var(--prime-tooltip-m-line-height);
+  --tt-px: var(--prime-tooltip-m-padding-x);
+  --tt-py: var(--prime-tooltip-m-padding-y);
+  --tt-radius: var(--prime-tooltip-m-radius);
   --tt-arrow-w: var(--prime-tooltip-arrow-width);
   --tt-arrow-h: var(--prime-tooltip-arrow-height);
   --tt-arrow-out: calc(100% - var(--prime-border-width));
+  --prime-color-text-primary: var(--prime-color-tooltip-text);
+  --prime-color-text-secondary: var(--prime-color-tooltip-muted);
+  --prime-color-text-muted: var(--prime-color-tooltip-muted);
+  --prime-color-fill-subtle: var(--prime-color-tooltip-fill);
+  --prime-color-fill-subtle-active: var(--prime-color-tooltip-fill);
+  --prime-color-fill-muted: var(--prime-color-tooltip-fill);
   position: fixed;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
+  display: block;
   max-width: min(var(--prime-tooltip-max-width), calc(100vw - var(--prime-space-4)));
   padding-block: var(--tt-py);
   padding-inline: var(--tt-px);
-  border-radius: var(--prime-tooltip-radius);
+  border-radius: var(--tt-radius);
   background: var(--prime-color-tooltip-bg);
   color: var(--prime-color-tooltip-text);
   font-family: var(--prime-font-family-sans);
   font-size: var(--tt-text);
   font-weight: var(--prime-font-weight-regular);
   line-height: var(--tt-lh);
-  letter-spacing: var(--prime-text-caption-tracking);
   overflow-wrap: anywhere;
   isolation: isolate;
 }
+.Tooltip_content :where(kbd) {
+  margin-block: calc((var(--tt-lh) - var(--chip-h, var(--tt-lh))) / 2);
+  vertical-align: top;
+}
 .Tooltip_content[data-state][data-side=top] {
   transform-origin: var(--tt-arrow) calc(100% + var(--tt-arrow-h));
 }
@@ -2680,14 +2987,33 @@ input::-moz-focus-inner {
 .Tooltip_content[data-state][data-instant=true] {
   animation: none;
 }
-.Tooltip_content[data-size=l],
-.Tooltip_content[data-size=xl] {
-  --tt-text: var(--prime-text-body-s-size);
-  --tt-lh: var(--prime-text-body-s-line-height);
+.Tooltip_content[data-size=xs] {
+  --tt-text: var(--prime-tooltip-xs-text-size);
+  --tt-lh: var(--prime-tooltip-xs-line-height);
+  --tt-px: var(--prime-tooltip-xs-padding-x);
+  --tt-py: var(--prime-tooltip-xs-padding-y);
+  --tt-radius: var(--prime-tooltip-xs-radius);
+}
+.Tooltip_content[data-size=s] {
+  --tt-text: var(--prime-tooltip-s-text-size);
+  --tt-lh: var(--prime-tooltip-s-line-height);
+  --tt-px: var(--prime-tooltip-s-padding-x);
+  --tt-py: var(--prime-tooltip-s-padding-y);
+  --tt-radius: var(--prime-tooltip-s-radius);
+}
+.Tooltip_content[data-size=l] {
+  --tt-text: var(--prime-tooltip-l-text-size);
+  --tt-lh: var(--prime-tooltip-l-line-height);
+  --tt-px: var(--prime-tooltip-l-padding-x);
+  --tt-py: var(--prime-tooltip-l-padding-y);
+  --tt-radius: var(--prime-tooltip-l-radius);
 }
 .Tooltip_content[data-size=xl] {
-  --tt-px: var(--prime-space-3);
-  --tt-py: var(--prime-space-2);
+  --tt-text: var(--prime-tooltip-xl-text-size);
+  --tt-lh: var(--prime-tooltip-xl-line-height);
+  --tt-px: var(--prime-tooltip-xl-padding-x);
+  --tt-py: var(--prime-tooltip-xl-padding-y);
+  --tt-radius: var(--prime-tooltip-xl-radius);
 }
 .Tooltip_arrow {
   position: absolute;
@@ -2801,14 +3127,14 @@ input::-moz-focus-inner {
   --sb-logo: min(calc(var(--sb-h) - var(--prime-space-2)), var(--prime-space-8));
   --sb-action-inset: calc((var(--sb-h) - var(--sb-action-h)) / 2);
   --sb-action-shift: calc( var(--sb-action-inset) + var(--sb-action-h) + var(--prime-space-1) - var(--sb-item-pad) );
-  --avatar-ring: var(--prime-color-bg-canvas);
+  --avatar-ring: var(--prime-color-layer-current);
   position: relative;
   box-sizing: border-box;
   flex: none;
   width: var(--sb-width);
   height: 100%;
   min-height: 0;
-  background: var(--prime-color-bg-canvas);
+  background: var(--prime-color-layer-current);
   clip-path: polygon(0 0, 100% 0, 100% var(--sb-notch-top), calc(100% + var(--sb-notch)) var(--sb-notch-top), calc(100% + var(--sb-notch)) var(--sb-notch-bottom), 100% var(--sb-notch-bottom), 100% 100%, 0 100%);
   contain: layout style;
   transition: width var(--sb-duration) var(--sb-ease), clip-path var(--sb-duration) var(--sb-ease);
@@ -3120,7 +3446,7 @@ input::-moz-focus-inner {
     linear-gradient(
       to right,
       transparent,
-      var(--prime-color-bg-canvas));
+      var(--prime-color-layer-current));
   opacity: 0;
   pointer-events: none;
   transition: inset-inline-end var(--sb-duration) var(--sb-ease), opacity var(--sb-duration) var(--sb-ease);
@@ -3228,8 +3554,7 @@ input::-moz-focus-inner {
 }
 .Sidebar_item[data-state=active],
 .Sidebar_item[aria-current=page] {
-  --sb-fill: var(--prime-color-bg-surface);
-  --sb-lift: var(--prime-shadow-raised);
+  --sb-fill: var(--prime-color-fill-muted-hover);
   color: var(--prime-color-text-primary);
 }
 .Sidebar_item[data-active-path] {
@@ -3302,7 +3627,7 @@ input::-moz-focus-inner {
   inset-block-start: calc(50% - var(--sb-icon) / 2 - var(--prime-space-1) / 2);
   inset-inline-start: calc(var(--sb-item-pad) + var(--sb-icon) - var(--prime-space-1));
   display: inline-flex;
-  box-shadow: 0 0 0 calc(2 * var(--prime-border-width)) var(--prime-color-bg-canvas);
+  box-shadow: 0 0 0 calc(2 * var(--prime-border-width)) var(--prime-color-layer-current);
   opacity: 0;
   scale: var(--sb-edge-scale);
   pointer-events: none;
@@ -3547,7 +3872,7 @@ input::-moz-focus-inner {
   padding: 0;
   border-radius: var(--sb-radius);
   color: var(--prime-color-text-muted);
-  box-shadow: 0 0 0 0 var(--prime-color-bg-canvas);
+  box-shadow: 0 0 0 0 var(--prime-color-layer-current);
   opacity: 1;
   translate: calc(var(--sb-expanded) - var(--sb-pad) - var(--sb-toggle)) 0;
   scale: 1;
@@ -3574,7 +3899,7 @@ input::-moz-focus-inner {
 }
 .Sidebar_root[data-panel-mode=compact]:not([data-off-canvas]) .Sidebar_headerToggle {
   border-radius: calc(var(--sb-toggle) / 2);
-  box-shadow: 0 0 0 var(--sb-edge-ring) var(--prime-color-bg-canvas);
+  box-shadow: 0 0 0 var(--sb-edge-ring) var(--prime-color-layer-current);
   translate: calc(var(--sb-compact) - var(--sb-toggle) / 2) 0;
   scale: var(--sb-edge-scale);
 }
@@ -3605,8 +3930,7 @@ input::-moz-focus-inner {
   translate: none;
 }
 .Sidebar_root[data-panel-mode=compact]:not([data-off-canvas]) .Sidebar_item[data-active-path] {
-  --sb-fill: var(--prime-color-bg-surface);
-  --sb-lift: var(--prime-shadow-raised);
+  --sb-fill: var(--prime-color-fill-muted-hover);
 }
 .Sidebar_root[data-panel-mode=compact]:not([data-off-canvas]) .Sidebar_item[aria-haspopup][aria-expanded=true] {
   --sb-fill: var(--prime-color-fill-subtle);
@@ -3641,7 +3965,7 @@ input::-moz-focus-inner {
   z-index: var(--prime-z-overlay);
   width: min(var(--sb-expanded), calc(100% - var(--prime-space-12)));
   min-width: 0;
-  background: var(--prime-color-bg-canvas);
+  background: var(--prime-color-layer-current);
   box-shadow: var(--prime-shadow-modal);
   transform: translateX(-100%);
   visibility: hidden;
@@ -3668,7 +3992,6 @@ input::-moz-focus-inner {
   --acc-pad-x: var(--prime-space-4);
   --acc-pad-y: var(--prime-space-3);
   --acc-min-height: calc(var(--prime-control-m-height) + var(--prime-space-4));
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -3677,7 +4000,7 @@ input::-moz-focus-inner {
   max-width: 100%;
   overflow: hidden;
   border-radius: var(--prime-card-radius);
-  background: var(--prime-color-card-bg);
+  background: var(--prime-color-layer-current);
   color: var(--prime-color-text-primary);
   font-family: var(--prime-font-family-sans);
 }
@@ -3740,8 +4063,8 @@ input::-moz-focus-inner {
   overflow: hidden;
   border-top: 0;
   border-radius: var(--prime-card-radius);
-  background: var(--prime-color-card-bg);
-  box-shadow: var(--prime-card-shadow);
+  background: var(--prime-color-layer-current);
+  box-shadow: var(--prime-layer-shadow);
 }
 .Accordion_header {
   display: flex;
@@ -3773,11 +4096,11 @@ input::-moz-focus-inner {
 }
 @media (hover: hover) {
   .Accordion_trigger:hover:not(:disabled) {
-    background: var(--prime-color-fill-subtle);
+    background: var(--prime-color-fill-muted-hover);
   }
 }
 .Accordion_trigger:active:not(:disabled) {
-  background: var(--prime-color-fill-subtle-active);
+  background: var(--prime-color-fill-strong);
 }
 .Accordion_trigger:focus-visible {
   outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
@@ -4000,7 +4323,7 @@ input::-moz-focus-inner {
   --bn-desc-color: var(--prime-color-text-secondary);
 }
 .Banner_root[data-variant=outline] {
-  --bn-bg: var(--prime-color-card-bg);
+  --bn-bg: var(--prime-color-layer-current);
   --bn-fg: var(--prime-color-text-primary);
   --bn-icon-color: var(--bn-text);
   --bn-desc-color: var(--prime-color-text-secondary);
@@ -4399,25 +4722,20 @@ button.LinkButton_root {
   --card-icon-box: var(--prime-control-l-height);
   --card-hairline: linear-gradient( var(--prime-color-border-faint), var(--prime-color-border-faint) );
   --card-hairline-size: calc(100% - 2 * var(--card-pad)) var(--prime-border-width);
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
   container-type: inline-size;
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
   max-width: 100%;
   border-radius: var(--prime-card-radius);
-  --avatar-ring: var(--prime-color-card-bg);
-  background: var(--prime-color-card-bg);
+  --avatar-ring: var(--prime-color-layer-current);
+  background: var(--prime-color-layer-current);
   color: var(--prime-color-text-primary);
   font-family: var(--prime-font-family-sans);
   text-align: start;
 }
 .Card_root:not([data-flat=true]) {
-  box-shadow: var(--prime-card-shadow);
-}
-.Card_root > * {
-  --prime-color-card-bg: var(--prime-color-bg-sunken);
-  --prime-card-shadow: none;
+  box-shadow: var(--prime-layer-shadow);
 }
 .Card_root[data-variant=stat-trend],
 .Card_root[data-variant=cta] {
@@ -4677,7 +4995,7 @@ button.LinkButton_root {
   min-height: calc(var(--prime-space-16) * 2);
   max-height: calc(var(--prime-space-24) * 2);
   overflow: hidden;
-  background: var(--prime-color-bg-sunken);
+  background: var(--prime-color-layer-nested);
 }
 .Card_root[data-variant=cover] > .Card_media > * {
   display: block;
@@ -4727,6 +5045,42 @@ button.LinkButton_root {
   }
 }
 
+/* src/internal/CheckMark.module.css */
+.CheckMark_svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.CheckMark_check,
+.CheckMark_bar {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--check-stroke, 2.25);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  transform-box: fill-box;
+  transform-origin: center;
+  transform: scale(0.6);
+  opacity: 0;
+  transition:
+    stroke-dashoffset var(--prime-motion-duration-fast) var(--prime-motion-easing-exit),
+    transform var(--prime-motion-duration-fast) var(--prime-motion-easing-exit),
+    opacity var(--prime-motion-duration-fast) var(--prime-motion-easing-exit);
+}
+.CheckMark_svg[data-state=checked] .CheckMark_check,
+.CheckMark_svg[data-state=indeterminate] .CheckMark_bar {
+  stroke-dashoffset: 0;
+  transform: scale(1);
+  opacity: 1;
+  transition:
+    stroke-dashoffset var(--prime-motion-duration-base) var(--prime-motion-easing-enter),
+    transform var(--prime-motion-duration-base) var(--prime-motion-easing-emphasized),
+    opacity var(--prime-motion-duration-fast) var(--prime-motion-easing-standard);
+}
+
 /* src/internal/enterMotion.module.css */
 .enterMotion_enter {
   animation: enterMotion_primeEnter var(--prime-motion-duration-fast) var(--prime-motion-easing-enter) both;
@@ -5112,40 +5466,6 @@ button.LinkButton_root {
 :is(.Checkbox_root[data-disabled=true] .Checkbox_control, .Checkbox_indicator[data-disabled=true]) {
   color: var(--prime-color-text-disabled);
 }
-.Checkbox_svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
-.Checkbox_checkPath,
-.Checkbox_indeterminateLine {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2.25;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-dasharray: 1;
-  stroke-dashoffset: 1;
-  transform-box: fill-box;
-  transform-origin: center;
-  transform: scale(0.6);
-  opacity: 0;
-  transition:
-    stroke-dashoffset var(--prime-motion-duration-fast) var(--prime-motion-easing-exit),
-    transform var(--prime-motion-duration-fast) var(--prime-motion-easing-exit),
-    opacity var(--prime-motion-duration-fast) var(--prime-motion-easing-exit);
-}
-:is(.Checkbox_root, .Checkbox_indicator)[data-state=checked] .Checkbox_checkPath,
-:is(.Checkbox_root, .Checkbox_indicator)[data-state=indeterminate] .Checkbox_indeterminateLine {
-  stroke-dashoffset: 0;
-  transform: scale(1);
-  opacity: 1;
-  transition:
-    stroke-dashoffset var(--prime-motion-duration-base) var(--prime-motion-easing-enter),
-    transform var(--prime-motion-duration-base) var(--prime-motion-easing-emphasized),
-    opacity var(--prime-motion-duration-fast) var(--prime-motion-easing-standard);
-}
 
 /* src/components/code-block/CodeBlock.module.css */
 .CodeBlock_root {
@@ -5169,7 +5489,7 @@ button.LinkButton_root {
   letter-spacing: var(--prime-text-code-tracking);
 }
 .CodeBlock_root[data-variant=soft][data-theme] {
-  background: var(--prime-color-bg-raised);
+  background: var(--prime-color-layer-floating-bg);
 }
 .CodeBlock_root[data-variant=ghost] {
   padding: 0;
@@ -5214,7 +5534,7 @@ button.LinkButton_root {
   border-radius: inherit;
 }
 .swatch_checker {
-  background: repeating-conic-gradient(var(--prime-color-bg-surface) 0deg 90deg, var(--prime-color-fill-strong) 90deg 180deg) 0 0 / 50% 50%;
+  background: repeating-conic-gradient(var(--prime-color-layer-current) 0deg 90deg, var(--prime-color-fill-strong) 90deg 180deg) 0 0 / 50% 50%;
 }
 .swatch_tier {
   --swatch-base-control: var(--prime-control-m-height);
@@ -5289,15 +5609,11 @@ button.LinkButton_root {
     transform: scale(1.08);
   }
 }
-.swatch_swatch[data-state=checked] {
-  outline: var(--prime-focus-width) solid var(--prime-color-accent-default);
-  outline-offset: var(--prime-focus-offset);
-}
 .swatch_swatch:focus-visible {
   outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
   outline-offset: var(--prime-focus-offset);
 }
-.swatch_swatch:focus:not(:focus-visible):not([data-state=checked]) {
+.swatch_swatch:focus:not(:focus-visible) {
   outline: none;
 }
 .swatch_swatch:disabled {
@@ -5306,8 +5622,11 @@ button.LinkButton_root {
   opacity: 0.5;
 }
 .swatch_check {
+  --check-stroke: 3;
   position: relative;
   z-index: 1;
+  width: var(--prime-icon-size);
+  height: var(--prime-icon-size);
   color: var(--prime-color-control-thumb);
   pointer-events: none;
 }
@@ -5399,8 +5718,8 @@ button.LinkButton_root {
   gap: var(--swatch-gap);
   min-width: 0;
 }
-.ColorSwatches_grid[data-invalid=true] > [data-state=checked] {
-  outline-color: var(--prime-color-danger-border);
+.ColorSwatches_grid[data-invalid=true] > *::after {
+  box-shadow: inset 0 0 0 var(--prime-border-width) var(--prime-color-danger-border);
 }
 
 /* src/components/empty-page/EmptyPage.module.css */
@@ -5576,8 +5895,6 @@ button.LinkButton_root {
   --dialog-hairline: linear-gradient( var(--prime-color-border-faint), var(--prime-color-border-faint) );
   --dialog-hairline-size: calc(100% - 2 * var(--dialog-padding)) var(--prime-border-width);
   container: DialogParts_prime-dialog / inline-size;
-  --prime-color-card-bg: var(--prime-color-bg-sunken);
-  --prime-card-shadow: none;
 }
 .DialogParts_header {
   display: grid;
@@ -5756,8 +6073,7 @@ button.LinkButton_root {
 }
 .Modal_content {
   --modal-width: var(--prime-modal-width-m);
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
-  --avatar-ring: var(--prime-color-bg-raised);
+  --avatar-ring: var(--prime-color-layer-current);
   --dialog-padding: var(--prime-modal-padding);
   box-sizing: border-box;
   display: flex;
@@ -5766,7 +6082,7 @@ button.LinkButton_root {
   max-height: calc(100dvh - 2 * var(--prime-modal-viewport-padding));
   min-height: 0;
   overflow: hidden;
-  background: var(--prime-color-bg-raised);
+  background: var(--prime-color-layer-current);
   color: var(--prime-color-text-primary);
   border-radius: var(--prime-modal-radius);
   box-shadow: var(--prime-shadow-modal);
@@ -5796,7 +6112,7 @@ button.LinkButton_root {
     border-start-end-radius: var(--prime-sheet-radius);
     border-end-start-radius: 0;
     border-end-end-radius: 0;
-    box-shadow: 0 var(--prime-space-6) 0 0 var(--prime-color-bg-raised), var(--prime-shadow-modal);
+    box-shadow: 0 var(--prime-space-6) 0 0 var(--prime-color-layer-current), var(--prime-shadow-modal);
   }
 }
 
@@ -6009,7 +6325,6 @@ button.LinkButton_root {
 .CommandMenu_content[role=dialog] {
   --cm-max-height: calc(var(--prime-panel-max-height) * 1.5);
   --cm-inset: calc(var(--prime-space-2) + var(--prime-panel-item-padding-x));
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
   box-sizing: border-box;
   display: flex;
   flex: 0 1 auto;
@@ -6022,7 +6337,7 @@ button.LinkButton_root {
   padding: 0;
   overflow: hidden;
   border-radius: var(--prime-modal-radius);
-  background: var(--prime-color-bg-raised);
+  background: var(--prime-color-layer-current);
   box-shadow: var(--prime-shadow-modal);
   color: var(--prime-color-text-primary);
   font-family: var(--prime-font-family-sans);
@@ -6177,9 +6492,9 @@ button.LinkButton_root {
   --dt-indent: calc(var(--prime-avatar-m) + var(--dt-gap));
   --dt-select-w: calc(var(--dt-choice) + 2 * var(--dt-pad-x));
   --dt-toggle-w: var(--dt-toggle);
-  --dt-surface: var(--prime-color-card-bg);
-  --dt-step: color-mix(in srgb, var(--dt-surface) 96%, var(--prime-color-text-primary));
-  --dt-head-bg: color-mix(in srgb, var(--dt-surface) 92%, var(--prime-color-text-primary));
+  --dt-surface: var(--prime-color-layer-current);
+  --dt-step: var(--prime-color-field-bg);
+  --dt-head-bg: var(--prime-color-field-bg-hover);
   --dt-divider-color: var(--prime-color-border-subtle);
   --dt-divider-width: var(--prime-border-width);
   --dt-column-divider-width: var(--prime-border-width);
@@ -6189,7 +6504,6 @@ button.LinkButton_root {
   --dt-edge-depth: var(--prime-space-4);
   --dt-edge-shadow: var(--prime-color-bg-edge-shadow);
   --dt-edge-dir: to right;
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
   container-type: inline-size;
   display: flex;
   flex-direction: column;
@@ -6374,12 +6688,11 @@ button.LinkButton_root {
   z-index: var(--dt-z-sticky-header);
 }
 .DataTable_headLabel {
-  display: inline-block;
+  display: block;
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  vertical-align: middle;
 }
 .DataTable_sortButton {
   display: flex;
@@ -6502,9 +6815,49 @@ button.LinkButton_root {
 .DataTable_toggleCell [aria-expanded=true] .DataTable_chevron {
   transform: rotate(90deg);
 }
-.DataTable_row[data-depth] > .DataTable_cell[data-first-column=true] {
+.DataTable_row[data-level] > .DataTable_cell[data-first-column=true] {
   padding-inline-start: calc(var(--dt-pad-x) + var(--dt-depth) * var(--dt-indent));
 }
+.DataTable_row[data-fold] > .DataTable_cell {
+  height: auto;
+  padding-block: 0;
+  transition: background-color var(--prime-motion-duration-xfast) var(--prime-motion-easing-standard), border-top-width var(--prime-motion-duration-base) var(--prime-motion-easing-standard);
+}
+.DataTable_fold {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transition: grid-template-rows var(--prime-motion-duration-base) var(--prime-motion-easing-standard), opacity var(--prime-motion-duration-base) var(--prime-motion-easing-standard);
+}
+.DataTable_foldItem {
+  min-height: 0;
+}
+.DataTable_row:is([data-fold=opening], [data-fold=closed]) .DataTable_foldItem {
+  overflow: hidden;
+}
+.DataTable_foldPad {
+  box-sizing: border-box;
+  display: grid;
+  align-content: center;
+  min-height: var(--dt-row-height);
+  padding-block: var(--dt-pad-y);
+}
+.DataTable_row[data-fold=opening] .DataTable_fold {
+  animation: DataTable_dt-fold-open var(--prime-motion-duration-base) var(--prime-motion-easing-standard);
+}
+@keyframes DataTable_dt-fold-open {
+  from {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+}
+.DataTable_row[data-fold=closed] .DataTable_fold {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+.DataTable_row[data-fold=closed] > .DataTable_cell {
+  border-top-width: 0;
+}
 .DataTable_measureBody > .DataTable_row {
   visibility: collapse;
 }
@@ -6520,12 +6873,12 @@ button.LinkButton_root {
 }
 @media (hover: hover) {
   .DataTable_root[data-highlight-row=true] .DataTable_row:hover {
-    --dt-wash: var(--prime-color-fill-subtle);
+    --dt-wash: var(--prime-color-fill-subtle-active);
   }
 }
 .DataTable_root[data-highlight-column=true] .DataTable_cell[data-column-hovered=true],
 .DataTable_root[data-highlight-column=true] .DataTable_headCell[data-column-hovered=true] {
-  background-image: linear-gradient(var(--prime-color-fill-subtle), var(--prime-color-fill-subtle));
+  background-image: linear-gradient(var(--prime-color-fill-subtle-active), var(--prime-color-fill-subtle-active));
 }
 .DataTable_row[data-expanded=true] {
   --dt-cell-bg: var(--dt-step);
@@ -6536,13 +6889,12 @@ button.LinkButton_root {
 .DataTable_detailCell {
   padding: 0;
   background: var(--dt-step);
-  border-top: var(--dt-divider-width) solid var(--dt-divider-color);
 }
 .DataTable_detailMotion {
   display: grid;
   grid-template-rows: 0fr;
   opacity: 0;
-  transition: grid-template-rows var(--prime-motion-duration-fast) var(--prime-motion-easing-exit), opacity var(--prime-motion-duration-fast) var(--prime-motion-easing-exit);
+  transition: grid-template-rows var(--prime-motion-duration-base) var(--prime-motion-easing-standard), opacity var(--prime-motion-duration-base) var(--prime-motion-easing-standard);
 }
 .DataTable_detailRow[data-state=open] .DataTable_detailMotion {
   grid-template-rows: 1fr;
@@ -6558,10 +6910,13 @@ button.LinkButton_root {
     opacity: 0;
   }
 }
-.DataTable_detailContent {
+.DataTable_detailClip {
   min-height: 0;
   overflow: hidden;
+}
+.DataTable_detailContent {
   padding: var(--prime-space-3) var(--dt-pad-x) var(--prime-space-4) calc(var(--dt-lead) + var(--dt-pad-x));
+  border-top: var(--dt-divider-width) solid var(--dt-divider-color);
   font-size: var(--prime-text-body-s-size);
   line-height: var(--prime-text-body-s-line-height);
   color: var(--prime-color-text-secondary);
@@ -6582,7 +6937,7 @@ button.LinkButton_root {
   cursor: pointer;
 }
 .DataTable_root[data-highlight-row=true] .DataTable_row[data-clickable=true]:active {
-  --dt-wash: var(--prime-color-fill-subtle-active);
+  --dt-wash: var(--prime-color-fill-strong);
 }
 .DataTable_firstColumnSticky {
   position: sticky;
@@ -6993,7 +7348,6 @@ button.LinkButton_root {
   max-width: var(--float-max-w, calc(100vw - 2 * var(--prime-space-2)));
 }
 .Datepicker_panel {
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
   display: flex;
   min-width: 0;
   color: var(--prime-color-text-primary);
@@ -7295,8 +7649,8 @@ button.LinkButton_root {
   width: fit-content;
   max-width: 100%;
   border-radius: var(--prime-card-radius);
-  background: var(--prime-color-card-bg);
-  box-shadow: var(--prime-card-shadow);
+  background: var(--prime-color-layer-current);
+  box-shadow: var(--prime-layer-shadow);
 }
 .Datepicker_panel[data-embedded=true] .Datepicker_main {
   padding: var(--prime-card-padding-s);
@@ -7337,6 +7691,7 @@ button.LinkButton_root {
   --digit-gap: var(--prime-space-3);
   --digit-cell-text: var(--prime-text-heading-s-size);
   --digit-cell-line-height: var(--prime-text-heading-s-line-height);
+  position: relative;
   display: flex;
   flex-wrap: wrap;
   gap: var(--digit-gap);
@@ -7420,6 +7775,42 @@ button.LinkButton_root {
 .DigitInput_cell:disabled {
   -webkit-text-fill-color: var(--prime-color-text-disabled);
 }
+.DigitInput_ring {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  border-radius: var(--digit-radius);
+  outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
+  outline-offset: var(--prime-focus-offset-inset);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--prime-motion-duration-fast) var(--prime-motion-easing-emphasized),
+    opacity var(--prime-motion-duration-xfast) var(--prime-motion-easing-standard),
+    outline-color var(--prime-motion-duration-fast) var(--prime-motion-easing-standard);
+}
+.DigitInput_ring[data-visible] {
+  opacity: 1;
+}
+.DigitInput_root[data-invalid=true] .DigitInput_ring {
+  outline-color: var(--prime-color-danger-border);
+}
+.DigitInput_root[data-focus-ring=false] .DigitInput_ring {
+  display: none;
+}
+.DigitInput_cell[data-filled=true] {
+  animation: DigitInput_primeDigitIn var(--prime-motion-duration-fast) var(--prime-motion-easing-enter);
+}
+@keyframes DigitInput_primeDigitIn {
+  from {
+    color: transparent;
+  }
+}
+.DigitInput_root[data-success=true] .DigitInput_cell {
+  background: var(--prime-color-success-soft);
+  color: var(--prime-color-success-text);
+  transition-delay: calc(var(--digit-i) * var(--prime-motion-stagger) / 2);
+}
 
 /* src/components/dnd/Dnd.module.css */
 .Dnd_overlay {
@@ -7433,7 +7824,7 @@ button.LinkButton_root {
 .Dnd_overlay:empty {
   display: none;
 }
-.Dnd_lift {
+.Dnd_overlay > .Dnd_lift {
   box-shadow: var(--prime-shadow-modal);
   transform-origin: center;
   animation: Dnd_lift var(--prime-motion-duration-fast) var(--prime-motion-easing-standard) both;
@@ -7545,7 +7936,7 @@ li.Dnd_placeholder {
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .Dnd_lift,
+  .Dnd_overlay > .Dnd_lift,
   .Dnd_dropZone[data-dnd-flash] {
     animation: none;
   }
@@ -7570,7 +7961,6 @@ li.Dnd_placeholder {
 }
 .Drawer_panel {
   --drawer-width: var(--prime-drawer-width-m);
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
   --dialog-padding: var(--prime-drawer-padding);
   position: fixed;
   top: 0;
@@ -7582,8 +7972,8 @@ li.Dnd_placeholder {
   width: min(100vw, var(--drawer-width));
   min-height: 0;
   overflow: hidden;
-  --avatar-ring: var(--prime-color-bg-raised);
-  background: var(--prime-color-bg-raised);
+  --avatar-ring: var(--prime-color-layer-current);
+  background: var(--prime-color-layer-current);
   color: var(--prime-color-text-primary);
   box-shadow: var(--prime-shadow-modal);
   outline: none;
@@ -7614,10 +8004,10 @@ li.Dnd_placeholder {
   touch-action: pan-y;
 }
 .Drawer_panel[data-side=right] {
-  box-shadow: var(--prime-space-6) 0 0 0 var(--prime-color-bg-raised), var(--prime-shadow-modal);
+  box-shadow: var(--prime-space-6) 0 0 0 var(--prime-color-layer-current), var(--prime-shadow-modal);
 }
 .Drawer_panel[data-side=left] {
-  box-shadow: calc(-1 * var(--prime-space-6)) 0 0 0 var(--prime-color-bg-raised), var(--prime-shadow-modal);
+  box-shadow: calc(-1 * var(--prime-space-6)) 0 0 0 var(--prime-color-layer-current), var(--prime-shadow-modal);
 }
 .Drawer_panel[data-side=bottom] {
   width: min(100vw, max(var(--drawer-width), var(--prime-sheet-min-width)));
@@ -7629,7 +8019,7 @@ li.Dnd_placeholder {
   padding-block-end: env(safe-area-inset-bottom, 0px);
   border-start-start-radius: var(--prime-sheet-radius);
   border-start-end-radius: var(--prime-sheet-radius);
-  box-shadow: 0 var(--prime-space-6) 0 0 var(--prime-color-bg-raised), var(--prime-shadow-modal);
+  box-shadow: 0 var(--prime-space-6) 0 0 var(--prime-color-layer-current), var(--prime-shadow-modal);
 }
 @media (max-width: 639px) {
   .Drawer_panel {
@@ -7998,7 +8388,6 @@ li.Dnd_placeholder {
 
 /* src/components/example-frame/ExampleFrame.module.css */
 .ExampleFrame_root {
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
   --frame-padding: var(--prime-space-1);
   box-sizing: border-box;
   display: flex;
@@ -8010,7 +8399,7 @@ li.Dnd_placeholder {
   padding: 0 var(--frame-padding) var(--frame-padding);
   overflow: hidden;
   border-radius: var(--prime-radius-xl);
-  background: var(--prime-color-bg-sunken);
+  background: var(--prime-color-layer-current);
   box-shadow: inset 0 0 0 var(--prime-border-width) var(--prime-color-border-subtle);
   color: var(--prime-color-text-primary);
   text-align: start;
@@ -8139,9 +8528,7 @@ li.Dnd_placeholder {
   min-height: calc(var(--prime-space-20) * 2);
   padding: var(--prime-space-6) var(--prime-space-4);
   border-radius: var(--prime-radius-l);
-  background: var(--prime-color-bg-canvas);
-  --prime-color-card-bg: var(--prime-color-bg-surface);
-  --prime-card-shadow: var(--prime-shadow-raised);
+  background: var(--prime-color-layer-current);
   box-shadow: inset 0 0 0 var(--prime-border-width) var(--prime-color-border-subtle);
   color: var(--prime-color-text-primary);
   overflow: hidden;
@@ -8278,7 +8665,7 @@ li.Dnd_placeholder {
   padding: var(--prime-space-4);
   overflow: auto;
   border-radius: var(--prime-radius-l);
-  background: var(--prime-color-bg-canvas);
+  background: var(--prime-color-layer-current);
   box-shadow: inset 0 0 0 var(--prime-border-width) var(--prime-color-border-subtle);
   color: var(--prime-color-text-primary);
   font-size: var(--prime-text-code-size);
@@ -8429,6 +8816,35 @@ li.Dnd_placeholder {
 .ProgressBar_bar[data-segment-gap=hairline] .ProgressBar_rest {
   background: var(--pb-rest);
 }
+.ProgressBar_bar[data-steps=true] {
+  gap: var(--pb-gap);
+  overflow: visible;
+  border-radius: 0;
+  background: transparent;
+}
+.ProgressBar_step {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: var(--prime-radius-full);
+  background: var(--pb-rest);
+}
+.ProgressBar_step::after {
+  content: "";
+  display: block;
+  height: 100%;
+  background: var(--pb-fill);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform var(--prime-motion-duration-base) var(--prime-motion-easing-emphasized), background-color var(--prime-motion-duration-base) var(--prime-motion-easing-standard);
+  transition-delay: calc(var(--pb-step-order) * var(--prime-motion-stagger) / 2);
+}
+.ProgressBar_bar:dir(rtl) .ProgressBar_step::after {
+  transform-origin: right center;
+}
+.ProgressBar_step[data-filled]::after {
+  transform: scaleX(1);
+}
 
 /* src/components/file-upload/FileUpload.module.css */
 .FileUpload_root {
@@ -8548,7 +8964,7 @@ li.Dnd_placeholder {
   transition: background-color var(--prime-motion-duration-fast) var(--prime-motion-easing-standard), color var(--prime-motion-duration-fast) var(--prime-motion-easing-standard);
 }
 .FileUpload_root[data-state=active] .FileUpload_icon {
-  background: var(--prime-color-bg-surface);
+  background: var(--prime-color-control-selected);
   color: var(--prime-color-accent-text);
 }
 .FileUpload_root[data-invalid=true]:not([data-state=active]) .FileUpload_icon {
@@ -8877,6 +9293,24 @@ li.Dnd_placeholder {
   background: transparent;
   cursor: not-allowed;
 }
+.Input_strengthWord {
+  flex-shrink: 0;
+  color: var(--prime-color-text-secondary);
+  font-weight: var(--prime-font-weight-medium);
+  transition: color var(--prime-motion-duration-base) var(--prime-motion-easing-standard);
+}
+.Input_strengthWord[data-tone=danger] {
+  color: var(--prime-color-danger-text);
+}
+.Input_strengthWord[data-tone=warning] {
+  color: var(--prime-color-warning-text);
+}
+.Input_strengthWord[data-tone=accent] {
+  color: var(--prime-color-accent-text);
+}
+.Input_strengthWord[data-tone=success] {
+  color: var(--prime-color-success-text);
+}
 
 /* src/components/kanban/Kanban.module.css */
 .Kanban_root {
@@ -8911,7 +9345,7 @@ li.Dnd_placeholder {
   min-height: 0;
   padding-block-start: var(--prime-space-2);
   border-radius: var(--prime-radius-l);
-  background: var(--prime-color-fill-faint);
+  background: var(--prime-color-fill-muted);
   scroll-snap-align: start;
 }
 @container (width < 40rem) {
@@ -8984,7 +9418,7 @@ html[data-dnd-active] .Kanban_scroller {
   display: grid;
   place-content: center;
   border-radius: var(--prime-radius-m);
-  background: var(--prime-color-fill-faint);
+  background: var(--prime-color-fill-muted-hover);
   pointer-events: none;
   transition: opacity var(--prime-motion-duration-fast) var(--prime-motion-easing-standard);
 }
@@ -9001,24 +9435,15 @@ html[data-dnd-active] .Kanban_scroller {
   min-width: 0;
   padding: var(--prime-space-3);
   border-radius: var(--prime-radius-m);
-  background: var(--prime-color-bg-raised);
-  box-shadow: var(--prime-card-shadow);
+  background: var(--prime-color-control-selected);
+  box-shadow: var(--prime-shadow-raised);
   list-style: none;
-}
-.Kanban_item::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  border-radius: inherit;
-  background: var(--prime-color-fill-subtle);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--prime-motion-duration-fast) var(--prime-motion-easing-standard);
+  transition: box-shadow var(--prime-motion-duration-fast) var(--prime-motion-easing-standard);
 }
 @media (hover: hover) {
-  .Kanban_item:not([data-disabled]):hover::after {
-    opacity: 1;
+  .Kanban_item:not([data-disabled]):is(:hover, [data-dnd-hover]) {
+    z-index: 1;
+    box-shadow: var(--prime-shadow-overlay);
   }
 }
 .Kanban_item[data-disabled] {
@@ -9090,7 +9515,7 @@ html[data-dnd-active] .Kanban_scroller {
 }
 @media (prefers-reduced-motion: reduce) {
   .Kanban_empty,
-  .Kanban_item::after {
+  .Kanban_item {
     transition: none;
   }
 }
@@ -9150,7 +9575,6 @@ html[data-dnd-active] .Kanban_scroller {
   --lf-field-gap: var(--prime-space-5);
   --lf-logo: var(--prime-control-xl-height);
   --lf-logo-icon: var(--prime-icon-l);
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -9160,13 +9584,13 @@ html[data-dnd-active] .Kanban_scroller {
   min-width: 0;
   padding: var(--lf-pad);
   border-radius: var(--prime-card-radius);
-  background: var(--prime-color-card-bg);
+  background: var(--prime-color-layer-current);
   color: var(--prime-color-text-primary);
   font-family: var(--prime-font-family-sans);
   text-align: start;
 }
 .LoginForm_root:not([data-flat=true]) {
-  box-shadow: var(--prime-card-shadow);
+  box-shadow: var(--prime-layer-shadow);
 }
 .LoginForm_root[data-size=xs],
 .LoginForm_root[data-size=s] {
@@ -9205,7 +9629,7 @@ html[data-dnd-active] .Kanban_scroller {
   height: var(--lf-logo);
   margin-block-end: var(--prime-space-3);
   border-radius: var(--prime-radius-full);
-  background: var(--prime-color-bg-sunken);
+  background: var(--prime-color-fill-muted);
   color: var(--prime-color-accent-text);
   overflow: hidden;
 }
@@ -9444,7 +9868,6 @@ html[data-dnd-active] .Kanban_scroller {
   --ntf-title-line-height: var(--prime-control-m-line-height);
   --ntf-desc-size: var(--prime-text-body-s-size);
   --ntf-desc-line-height: var(--prime-text-body-s-line-height);
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
   position: relative;
   box-sizing: border-box;
   display: grid;
@@ -9455,7 +9878,7 @@ html[data-dnd-active] .Kanban_scroller {
   padding: var(--ntf-pad);
   overflow: hidden;
   border-radius: var(--prime-panel-radius);
-  background: var(--prime-color-bg-raised);
+  background: var(--prime-color-layer-current);
   box-shadow: var(--prime-shadow-overlay);
   color: var(--prime-color-text-primary);
   font-family: var(--prime-font-family-sans);
@@ -10511,6 +10934,123 @@ html[data-dnd-active] .Kanban_scroller {
   margin-inline-start: auto;
 }
 
+/* src/components/sparkline/Sparkline.module.css */
+.Sparkline_root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-1);
+  min-width: 0;
+  font-family: var(--prime-font-family-sans);
+}
+.Sparkline_head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--prime-space-3);
+  min-width: 0;
+  font-size: var(--prime-text-body-s-size);
+  line-height: var(--prime-text-body-s-line-height);
+  color: var(--prime-color-text-secondary);
+}
+.Sparkline_label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.Sparkline_date {
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+.Sparkline_valueRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--prime-space-2);
+  min-width: 0;
+}
+.Sparkline_value {
+  font-size: var(--prime-text-heading-m-size);
+  line-height: var(--prime-text-heading-m-line-height);
+  font-weight: var(--prime-font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.Sparkline_change {
+  flex-shrink: 0;
+}
+.Sparkline_trend {
+  transition: rotate var(--prime-motion-duration-base) var(--prime-motion-easing-emphasized);
+}
+.Sparkline_trend[data-down] {
+  rotate: 180deg;
+}
+.Sparkline_plot {
+  --sparkline-dot: var(--prime-space-2);
+  --sparkline-h: var(--prime-space-20);
+  position: relative;
+  height: var(--sparkline-h);
+  margin-block-start: var(--prime-space-2);
+  margin-inline: calc(var(--sparkline-dot) / 2);
+  border-radius: var(--prime-radius-xs);
+  touch-action: pan-y;
+  cursor: crosshair;
+  outline: none;
+}
+.Sparkline_plot:focus-visible {
+  outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
+  outline-offset: var(--prime-focus-offset);
+}
+.Sparkline_svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.Sparkline_line {
+  fill: none;
+  stroke: var(--prime-color-accent-default);
+  stroke-width: calc(var(--prime-border-width) * 2);
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+.Sparkline_area {
+  fill: color-mix(in srgb, var(--prime-color-accent-default) 12%, transparent);
+  stroke: none;
+}
+.Sparkline_cursor {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  transform: translateX(calc(var(--sparkline-x) * 100%));
+  transition: transform var(--prime-motion-duration-base) var(--prime-motion-easing-emphasized);
+}
+.Sparkline_guide {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: var(--prime-border-width);
+  background: var(--prime-color-border-default);
+}
+.Sparkline_dot {
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  width: var(--sparkline-dot);
+  height: var(--sparkline-dot);
+  margin: calc(var(--sparkline-dot) / -2);
+  border-radius: var(--prime-radius-full);
+  background: var(--prime-color-bg-surface);
+  box-shadow: 0 0 0 calc(var(--prime-border-width) * 2) var(--prime-color-accent-default);
+  transform: translateY(calc(var(--sparkline-y) * var(--sparkline-h)));
+  transition: transform var(--prime-motion-duration-base) var(--prime-motion-easing-emphasized);
+}
+.Sparkline_root[data-scrubbing] .Sparkline_cursor,
+.Sparkline_root[data-scrubbing] .Sparkline_dot {
+  transition: none;
+}
+
 /* src/components/stepper/Stepper.module.css */
 .Stepper_root {
   --st-circle: var(--prime-control-xs-height);
@@ -10932,12 +11472,12 @@ html[data-dnd-active] .Kanban_scroller {
   gap: var(--prime-space-4);
   min-width: 0;
 }
-.Tabs_root[data-orientation=horizontal] {
+.Tabs_root {
   overflow: hidden;
   border-radius: var(--prime-radius-xl);
-  background: var(--prime-color-bg-sunken);
+  background: var(--prime-color-fill-muted-hover);
 }
-.Tabs_root[data-orientation=horizontal] .Tabs_layout {
+.Tabs_layout {
   gap: 0;
 }
 .Tabs_root[data-orientation=vertical] {
@@ -10945,8 +11485,7 @@ html[data-dnd-active] .Kanban_scroller {
 }
 .Tabs_root[data-orientation=vertical] .Tabs_layout {
   flex-direction: row;
-  align-items: flex-start;
-  gap: var(--prime-space-6);
+  align-items: stretch;
 }
 .Tabs_list {
   position: relative;
@@ -10962,9 +11501,12 @@ html[data-dnd-active] .Kanban_scroller {
 }
 .Tabs_root[data-orientation=vertical] .Tabs_list {
   flex-direction: column;
-  flex-shrink: 0;
+  flex: none;
   gap: var(--prime-space-1);
   min-width: var(--tabs-two-line-min);
+  max-width: 40%;
+  padding-block: var(--tabs-rise);
+  padding-inline-start: var(--tabs-rise);
   overflow: visible;
 }
 .Tabs_indicator {
@@ -10986,50 +11528,65 @@ html[data-dnd-active] .Kanban_scroller {
     opacity var(--prime-motion-duration-fast) var(--prime-motion-easing-standard);
 }
 .Tabs_indicatorFolder {
-  border-radius: var(--tabs-folder-radius) var(--tabs-folder-radius) 0 0;
-  background: var(--prime-color-bg-surface);
+  scroll-margin-top: var(--tabs-flare);
+  background: var(--prime-color-layer-current);
 }
 .Tabs_indicatorFolder::before,
 .Tabs_indicatorFolder::after {
   content: "";
   position: absolute;
-  bottom: 0;
   width: var(--tabs-flare);
   height: var(--tabs-flare);
 }
-.Tabs_indicatorFolder::before {
+.Tabs_indicatorFolder[data-axis=x] {
+  border-radius: var(--tabs-folder-radius) var(--tabs-folder-radius) 0 0;
+}
+.Tabs_indicatorFolder[data-axis=x]::before,
+.Tabs_indicatorFolder[data-axis=x]::after {
+  bottom: 0;
+}
+.Tabs_indicatorFolder[data-axis=x]::before {
   right: 100%;
   background:
     radial-gradient(
       circle at 0 0,
       transparent calc(var(--tabs-flare) - var(--prime-border-width) / 2),
-      var(--prime-color-bg-surface) var(--tabs-flare));
+      var(--prime-color-layer-current) var(--tabs-flare));
 }
-.Tabs_indicatorFolder::after {
+.Tabs_indicatorFolder[data-axis=x]::after {
   left: 100%;
   background:
     radial-gradient(
       circle at 100% 0,
       transparent calc(var(--tabs-flare) - var(--prime-border-width) / 2),
-      var(--prime-color-bg-surface) var(--tabs-flare));
+      var(--prime-color-layer-current) var(--tabs-flare));
 }
-.Tabs_indicatorFolder[data-edge-start=true]::before,
-.Tabs_indicatorFolder[data-edge-end=true]::after {
-  visibility: hidden;
+.Tabs_indicatorFolder[data-axis=y] {
+  border-radius: var(--tabs-folder-radius) 0 0 var(--tabs-folder-radius);
 }
-.Tabs_indicatorPill {
-  z-index: 0;
-  border-radius: var(--tabs-radius);
-  background: var(--prime-color-fill-muted);
+.Tabs_indicatorFolder[data-axis=y]::before,
+.Tabs_indicatorFolder[data-axis=y]::after {
+  right: 0;
 }
-.Tabs_indicatorPill::before {
-  content: "";
-  position: absolute;
-  inset-block: var(--prime-space-2);
-  inset-inline-start: var(--prime-space-1);
-  width: var(--tabs-indicator);
-  border-radius: var(--prime-radius-full);
-  background: var(--prime-color-accent-default);
+.Tabs_indicatorFolder[data-axis=y]::before {
+  bottom: 100%;
+  background:
+    radial-gradient(
+      circle at 0 0,
+      transparent calc(var(--tabs-flare) - var(--prime-border-width) / 2),
+      var(--prime-color-layer-current) var(--tabs-flare));
+}
+.Tabs_indicatorFolder[data-axis=y]::after {
+  top: 100%;
+  background:
+    radial-gradient(
+      circle at 0 100%,
+      transparent calc(var(--tabs-flare) - var(--prime-border-width) / 2),
+      var(--prime-color-layer-current) var(--tabs-flare));
+}
+.Tabs_indicatorFolder[data-edge-start=true]::before,
+.Tabs_indicatorFolder[data-edge-end=true]::after {
+  display: none;
 }
 .Tabs_item {
   position: relative;
@@ -11080,8 +11637,13 @@ html[data-dnd-active] .Kanban_scroller {
   padding: 0 calc(var(--tabs-pad-x) + var(--prime-space-1));
   outline: none;
 }
+.Tabs_root[data-orientation=vertical] .Tabs_item {
+  border-radius: var(--tabs-folder-radius) 0 0 var(--tabs-folder-radius);
+}
 .Tabs_root[data-orientation=vertical] .Tabs_tab {
   justify-content: flex-start;
+  padding: 0 calc(var(--tabs-pad-x) + var(--prime-space-1));
+  outline: none;
 }
 .Tabs_content {
   position: relative;
@@ -11114,43 +11676,36 @@ html[data-dnd-active] .Kanban_scroller {
   min-width: var(--tabs-two-line-min);
   padding-block: var(--prime-space-2);
 }
-.Tabs_root[data-orientation=horizontal] .Tabs_item::before,
-.Tabs_root[data-orientation=horizontal] .Tabs_tab::after {
+.Tabs_item::before,
+.Tabs_tab::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
 }
-.Tabs_root[data-orientation=horizontal] .Tabs_item::before {
+.Tabs_item::before {
   z-index: 0;
   background: var(--prime-color-fill-faint);
   opacity: 0;
   transition: opacity var(--prime-motion-duration-fast) var(--prime-motion-easing-standard);
 }
 @media (hover: hover) {
-  .Tabs_root[data-orientation=horizontal] .Tabs_item:hover:not([data-disabled=true], [data-state=active])::before {
+  .Tabs_item:hover:not([data-disabled=true], [data-state=active])::before {
     opacity: 1;
     transition-duration: var(--prime-motion-duration-xfast);
   }
 }
-.Tabs_root[data-orientation=horizontal] .Tabs_tab::after {
+.Tabs_tab::after {
   z-index: 2;
 }
-.Tabs_root[data-orientation=horizontal] .Tabs_tab:focus-visible::after {
+.Tabs_tab:focus-visible::after {
   box-shadow: inset 0 0 0 var(--prime-focus-width) var(--prime-color-focus-ring);
 }
-.Tabs_root[data-orientation=vertical] .Tabs_tab:focus-visible {
-  outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
-  outline-offset: var(--prime-focus-offset-inset);
-}
 @media (hover: hover) {
   .Tabs_item:hover:not([data-disabled=true]) .Tabs_tab {
     color: var(--prime-color-text-primary);
   }
-  .Tabs_root[data-orientation=vertical] .Tabs_tab:hover:not([data-disabled=true], [aria-selected=true]) {
-    background: var(--prime-color-fill-subtle);
-  }
 }
 .Tabs_tab[aria-selected=true] {
   color: var(--prime-color-text-primary);
@@ -11299,7 +11854,9 @@ html[data-dnd-active] .Kanban_scroller {
   margin-inline: var(--prime-space-2);
 }
 .Tabs_root[data-orientation=vertical] .Tabs_separator {
+  width: auto;
   margin-block: var(--prime-space-2);
+  margin-inline: var(--tabs-pad-x);
 }
 .Tabs_panel {
   box-sizing: border-box;
@@ -11309,16 +11866,11 @@ html[data-dnd-active] .Kanban_scroller {
   line-height: var(--tabs-line-height);
   color: var(--prime-color-text-primary);
 }
-.Tabs_root[data-orientation=horizontal] .Tabs_panel {
+.Tabs_panel {
   padding: var(--tabs-panel-pad);
-  background: var(--prime-color-bg-surface);
+  background: var(--prime-color-layer-current);
 }
 .Tabs_panel:focus-visible {
-  outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
-  outline-offset: var(--prime-focus-offset);
-  border-radius: var(--prime-radius-xs);
-}
-.Tabs_root[data-orientation=horizontal] .Tabs_panel:focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 var(--prime-focus-width) var(--prime-color-focus-ring);
 }
@@ -11328,17 +11880,29 @@ html[data-dnd-active] .Kanban_scroller {
 .Tabs_panelContent {
   min-width: 0;
 }
+@container (width > 37.5rem) {
+  .Tabs_root[data-orientation=vertical] .Tabs_list.Tabs_list {
+    overflow: visible;
+    mask-image: none;
+  }
+}
 @container (max-width: 37.5rem) {
   .Tabs_root[data-orientation=vertical] .Tabs_layout {
     flex-direction: column;
-    align-items: stretch;
-    gap: var(--prime-space-4);
   }
   .Tabs_root[data-orientation=vertical] .Tabs_list {
     flex-direction: row;
     min-width: 0;
+    max-width: 100%;
+    padding: var(--tabs-rise) 0 0;
     overflow-x: auto;
   }
+  .Tabs_root[data-orientation=vertical] .Tabs_item {
+    border-radius: var(--tabs-folder-radius) var(--tabs-folder-radius) 0 0;
+  }
+  .Tabs_root[data-orientation=vertical] .Tabs_tab {
+    height: var(--tabs-item-height);
+  }
   .Tabs_root[data-orientation=vertical] .Tabs_separator {
     display: none;
   }
@@ -12067,10 +12631,9 @@ html[data-dnd-active] .Kanban_scroller {
   min-width: 0;
 }
 .ColorPicker_panel[data-surface=raised] {
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
   padding: var(--prime-panel-content-padding);
   border-radius: var(--prime-panel-radius);
-  background: var(--prime-color-bg-raised);
+  background: var(--prime-color-layer-current);
   box-shadow: var(--prime-shadow-overlay);
 }
 .ColorPicker_slider {