@goliapkg/gds 1.7.0 → 2.0.1

package/dist/tokens.css

@@ -67,21 +67,51 @@
 }
 
 /* depth utility classes — context-aware (used by container components with .gds-ctx) */
-@utility gds-ctx-pad { padding: var(--gds-ctx-pad); }
-@utility gds-ctx-pad-x { padding-left: var(--gds-ctx-pad); padding-right: var(--gds-ctx-pad); }
-@utility gds-ctx-pad-y { padding-top: var(--gds-ctx-pad); padding-bottom: var(--gds-ctx-pad); }
-@utility gds-ctx-gap { gap: var(--gds-ctx-gap); }
-@utility gds-ctx-radius { border-radius: var(--gds-ctx-radius); }
-@utility gds-ctx-shadow { box-shadow: var(--gds-ctx-shadow); }
-@utility gds-ctx-text { font-size: var(--gds-ctx-text); }
-@utility gds-ctx-heading { font-size: var(--gds-ctx-heading); font-weight: 600; }
+@utility gds-ctx-pad {
+  padding: var(--gds-ctx-pad);
+}
+@utility gds-ctx-pad-x {
+  padding-left: var(--gds-ctx-pad);
+  padding-right: var(--gds-ctx-pad);
+}
+@utility gds-ctx-pad-y {
+  padding-top: var(--gds-ctx-pad);
+  padding-bottom: var(--gds-ctx-pad);
+}
+@utility gds-ctx-gap {
+  gap: var(--gds-ctx-gap);
+}
+@utility gds-ctx-radius {
+  border-radius: var(--gds-ctx-radius);
+}
+@utility gds-ctx-shadow {
+  box-shadow: var(--gds-ctx-shadow);
+}
+@utility gds-ctx-text {
+  font-size: var(--gds-ctx-text);
+}
+@utility gds-ctx-heading {
+  font-size: var(--gds-ctx-heading);
+  font-weight: 600;
+}
 
 /* backward compat aliases for depth utilities (no conflicts with density utilities below) */
-@utility gds-pad { padding: var(--gds-ctx-pad); }
-@utility gds-radius { border-radius: var(--gds-ctx-radius); }
-@utility gds-shadow { box-shadow: var(--gds-ctx-shadow); }
-@utility gds-text { font-size: var(--gds-ctx-text); }
-@utility gds-heading { font-size: var(--gds-ctx-heading); font-weight: 600; }
+@utility gds-pad {
+  padding: var(--gds-ctx-pad);
+}
+@utility gds-radius {
+  border-radius: var(--gds-ctx-radius);
+}
+@utility gds-shadow {
+  box-shadow: var(--gds-ctx-shadow);
+}
+@utility gds-text {
+  font-size: var(--gds-ctx-text);
+}
+@utility gds-heading {
+  font-size: var(--gds-ctx-heading);
+  font-weight: 600;
+}
 
 /* ===== DENSITY-AWARE COMPONENT UTILITIES =====
  * these consume --gds-* vars set by size-system.ts
@@ -89,64 +119,174 @@
  */
 
 /* component height scale (fallbacks = default density) */
-@utility gds-h-xs { height: var(--gds-h-xs, 24px); }
-@utility gds-h-sm { height: var(--gds-h-sm, 28px); }
-@utility gds-h { height: var(--gds-h, 32px); }
-@utility gds-h-lg { height: var(--gds-h-lg, 36px); }
-@utility gds-h-xl { height: var(--gds-h-xl, 40px); }
+@utility gds-h-xs {
+  height: var(--gds-h-xs, 24px);
+}
+@utility gds-h-sm {
+  height: var(--gds-h-sm, 28px);
+}
+@utility gds-h {
+  height: var(--gds-h, 32px);
+}
+@utility gds-h-lg {
+  height: var(--gds-h-lg, 36px);
+}
+@utility gds-h-xl {
+  height: var(--gds-h-xl, 40px);
+}
 
 /* square variants (icon buttons, avatars) */
-@utility gds-sq-xs { height: var(--gds-h-xs, 24px); width: var(--gds-h-xs, 24px); }
-@utility gds-sq-sm { height: var(--gds-h-sm, 28px); width: var(--gds-h-sm, 28px); }
-@utility gds-sq { height: var(--gds-h, 32px); width: var(--gds-h, 32px); }
-@utility gds-sq-lg { height: var(--gds-h-lg, 36px); width: var(--gds-h-lg, 36px); }
+@utility gds-sq-xs {
+  height: var(--gds-h-xs, 24px);
+  width: var(--gds-h-xs, 24px);
+}
+@utility gds-sq-sm {
+  height: var(--gds-h-sm, 28px);
+  width: var(--gds-h-sm, 28px);
+}
+@utility gds-sq {
+  height: var(--gds-h, 32px);
+  width: var(--gds-h, 32px);
+}
+@utility gds-sq-lg {
+  height: var(--gds-h-lg, 36px);
+  width: var(--gds-h-lg, 36px);
+}
 
 /* icon size scale */
-@utility gds-icon-xs { width: var(--gds-icon-xs, 12px); height: var(--gds-icon-xs, 12px); }
-@utility gds-icon-sm { width: var(--gds-icon-sm, 14px); height: var(--gds-icon-sm, 14px); }
-@utility gds-icon { width: var(--gds-icon, 16px); height: var(--gds-icon, 16px); }
-@utility gds-icon-lg { width: var(--gds-icon-lg, 20px); height: var(--gds-icon-lg, 20px); }
+@utility gds-icon-xs {
+  width: var(--gds-icon-xs, 12px);
+  height: var(--gds-icon-xs, 12px);
+}
+@utility gds-icon-sm {
+  width: var(--gds-icon-sm, 14px);
+  height: var(--gds-icon-sm, 14px);
+}
+@utility gds-icon {
+  width: var(--gds-icon, 16px);
+  height: var(--gds-icon, 16px);
+}
+@utility gds-icon-lg {
+  width: var(--gds-icon-lg, 20px);
+  height: var(--gds-icon-lg, 20px);
+}
 
 /* icon sizing within parent (replaces [&>svg]:h-3.5 [&>svg]:w-3.5 pattern) */
-@utility gds-icon-child-xs { & > svg { width: var(--gds-icon-xs, 12px); height: var(--gds-icon-xs, 12px); } }
-@utility gds-icon-child-sm { & > svg { width: var(--gds-icon-sm, 14px); height: var(--gds-icon-sm, 14px); } }
-@utility gds-icon-child { & > svg { width: var(--gds-icon, 16px); height: var(--gds-icon, 16px); } }
-@utility gds-icon-child-lg { & > svg { width: var(--gds-icon-lg, 20px); height: var(--gds-icon-lg, 20px); } }
+@utility gds-icon-child-xs {
+  & > svg {
+    width: var(--gds-icon-xs, 12px);
+    height: var(--gds-icon-xs, 12px);
+  }
+}
+@utility gds-icon-child-sm {
+  & > svg {
+    width: var(--gds-icon-sm, 14px);
+    height: var(--gds-icon-sm, 14px);
+  }
+}
+@utility gds-icon-child {
+  & > svg {
+    width: var(--gds-icon, 16px);
+    height: var(--gds-icon, 16px);
+  }
+}
+@utility gds-icon-child-lg {
+  & > svg {
+    width: var(--gds-icon-lg, 20px);
+    height: var(--gds-icon-lg, 20px);
+  }
+}
 
 /* density-aware text scale */
-@utility gds-text-caption { font-size: var(--gds-text-caption, 10px); }
-@utility gds-text-label { font-size: var(--gds-text-label, 11px); }
-@utility gds-text-body { font-size: var(--gds-text-body, 13px); }
+@utility gds-text-caption {
+  font-size: var(--gds-text-caption, 10px);
+}
+@utility gds-text-label {
+  font-size: var(--gds-text-label, 11px);
+}
+@utility gds-text-body {
+  font-size: var(--gds-text-body, 13px);
+}
 
 /* semantic radius (driven by shape axis) */
-@utility gds-radius-button { border-radius: var(--gds-radius-button, 6px); }
-@utility gds-radius-input { border-radius: var(--gds-radius-input, 6px); }
-@utility gds-radius-badge { border-radius: var(--gds-radius-badge, 9999px); }
-@utility gds-radius-card { border-radius: var(--gds-radius-card, 12px); }
-@utility gds-radius-modal { border-radius: var(--gds-radius-modal, 12px); }
-@utility gds-radius-popover { border-radius: var(--gds-radius-popover, 8px); }
-@utility gds-radius-tooltip { border-radius: var(--gds-radius-tooltip, 6px); }
+@utility gds-radius-button {
+  border-radius: var(--gds-radius-button, 6px);
+}
+@utility gds-radius-input {
+  border-radius: var(--gds-radius-input, 6px);
+}
+@utility gds-radius-badge {
+  border-radius: var(--gds-radius-badge, 9999px);
+}
+@utility gds-radius-card {
+  border-radius: var(--gds-radius-card, 12px);
+}
+@utility gds-radius-modal {
+  border-radius: var(--gds-radius-modal, 12px);
+}
+@utility gds-radius-popover {
+  border-radius: var(--gds-radius-popover, 8px);
+}
+@utility gds-radius-tooltip {
+  border-radius: var(--gds-radius-tooltip, 6px);
+}
 
 /* density-aware gap scale */
-@utility gds-gap-xs { gap: var(--gds-gap-xs, 4px); }
-@utility gds-gap-sm { gap: var(--gds-gap-sm, 6px); }
-@utility gds-gap { gap: var(--gds-gap, 8px); }
-@utility gds-gap-lg { gap: var(--gds-gap-lg, 12px); }
+@utility gds-gap-xs {
+  gap: var(--gds-gap-xs, 4px);
+}
+@utility gds-gap-sm {
+  gap: var(--gds-gap-sm, 6px);
+}
+@utility gds-gap {
+  gap: var(--gds-gap, 8px);
+}
+@utility gds-gap-lg {
+  gap: var(--gds-gap-lg, 12px);
+}
 
 /* density-aware padding scale */
-@utility gds-pad-x-sm { padding-left: var(--gds-pad-x-sm, 8px); padding-right: var(--gds-pad-x-sm, 8px); }
-@utility gds-pad-x { padding-left: var(--gds-pad-x, 12px); padding-right: var(--gds-pad-x, 12px); }
-@utility gds-pad-x-lg { padding-left: var(--gds-pad-x-lg, 16px); padding-right: var(--gds-pad-x-lg, 16px); }
-@utility gds-pad-y-sm { padding-top: var(--gds-pad-y-sm, 4px); padding-bottom: var(--gds-pad-y-sm, 4px); }
-@utility gds-pad-y { padding-top: var(--gds-pad-y, 6px); padding-bottom: var(--gds-pad-y, 6px); }
-@utility gds-pad-y-lg { padding-top: var(--gds-pad-y-lg, 8px); padding-bottom: var(--gds-pad-y-lg, 8px); }
+@utility gds-pad-x-sm {
+  padding-left: var(--gds-pad-x-sm, 8px);
+  padding-right: var(--gds-pad-x-sm, 8px);
+}
+@utility gds-pad-x {
+  padding-left: var(--gds-pad-x, 12px);
+  padding-right: var(--gds-pad-x, 12px);
+}
+@utility gds-pad-x-lg {
+  padding-left: var(--gds-pad-x-lg, 16px);
+  padding-right: var(--gds-pad-x-lg, 16px);
+}
+@utility gds-pad-y-sm {
+  padding-top: var(--gds-pad-y-sm, 4px);
+  padding-bottom: var(--gds-pad-y-sm, 4px);
+}
+@utility gds-pad-y {
+  padding-top: var(--gds-pad-y, 6px);
+  padding-bottom: var(--gds-pad-y, 6px);
+}
+@utility gds-pad-y-lg {
+  padding-top: var(--gds-pad-y-lg, 8px);
+  padding-bottom: var(--gds-pad-y-lg, 8px);
+}
 
 /* shadow scale (driven by elevation axis) */
-@utility gds-shadow-xs { box-shadow: var(--gds-shadow-xs, 0 1px 2px rgba(0,0,0,0.05)); }
-@utility gds-shadow-sm { box-shadow: var(--gds-shadow-sm, 0 1px 3px rgba(0,0,0,0.1)); }
-@utility gds-shadow-md { box-shadow: var(--gds-shadow-md, 0 4px 6px rgba(0,0,0,0.1)); }
-@utility gds-shadow-lg { box-shadow: var(--gds-shadow-lg, 0 10px 15px rgba(0,0,0,0.1)); }
-@utility gds-shadow-xl { box-shadow: var(--gds-shadow-xl, 0 20px 25px rgba(0,0,0,0.1)); }
+@utility gds-shadow-xs {
+  box-shadow: var(--gds-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
+}
+@utility gds-shadow-sm {
+  box-shadow: var(--gds-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
+}
+@utility gds-shadow-md {
+  box-shadow: var(--gds-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+}
+@utility gds-shadow-lg {
+  box-shadow: var(--gds-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+}
+@utility gds-shadow-xl {
+  box-shadow: var(--gds-shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1));
+}
 
 /* ===== GLASS MATERIAL SYSTEM =====
  * glass = backdrop-filter blur + semi-transparent bg + subtle border
@@ -157,37 +297,72 @@
 
 /* glass surface — use this ON the container, it handles bg + blur + border + fallback */
 @utility gds-glass {
-  background-color: color-mix(in srgb, var(--gds-surface) calc(var(--gds-glass-bg-opacity, 0.15) * 100%), transparent);
-  backdrop-filter: blur(var(--gds-glass-blur-md, 20px)) saturate(var(--gds-glass-saturate-md, 180%));
-  -webkit-backdrop-filter: blur(var(--gds-glass-blur-md, 20px)) saturate(var(--gds-glass-saturate-md, 180%));
+  background-color: color-mix(
+    in srgb,
+    var(--gds-surface) calc(var(--gds-glass-bg-opacity, 0.15) * 100%),
+    transparent
+  );
+  backdrop-filter: blur(var(--gds-glass-blur-md, 20px))
+    saturate(var(--gds-glass-saturate-md, 180%));
+  -webkit-backdrop-filter: blur(var(--gds-glass-blur-md, 20px))
+    saturate(var(--gds-glass-saturate-md, 180%));
   border-color: color-mix(in srgb, var(--gds-border) 30%, transparent);
 }
 
 @utility gds-glass-sm {
-  background-color: color-mix(in srgb, var(--gds-surface) calc(var(--gds-glass-bg-opacity, 0.15) * 100%), transparent);
-  backdrop-filter: blur(var(--gds-glass-blur-sm, 8px)) saturate(var(--gds-glass-saturate-sm, 150%));
-  -webkit-backdrop-filter: blur(var(--gds-glass-blur-sm, 8px)) saturate(var(--gds-glass-saturate-sm, 150%));
+  background-color: color-mix(
+    in srgb,
+    var(--gds-surface) calc(var(--gds-glass-bg-opacity, 0.15) * 100%),
+    transparent
+  );
+  backdrop-filter: blur(var(--gds-glass-blur-sm, 8px))
+    saturate(var(--gds-glass-saturate-sm, 150%));
+  -webkit-backdrop-filter: blur(var(--gds-glass-blur-sm, 8px))
+    saturate(var(--gds-glass-saturate-sm, 150%));
   border-color: color-mix(in srgb, var(--gds-border) 20%, transparent);
 }
 
 @utility gds-glass-lg {
-  background-color: color-mix(in srgb, var(--gds-surface) calc(var(--gds-glass-bg-opacity, 0.15) * 100%), transparent);
-  backdrop-filter: blur(var(--gds-glass-blur-lg, 40px)) saturate(var(--gds-glass-saturate-lg, 200%));
-  -webkit-backdrop-filter: blur(var(--gds-glass-blur-lg, 40px)) saturate(var(--gds-glass-saturate-lg, 200%));
+  background-color: color-mix(
+    in srgb,
+    var(--gds-surface) calc(var(--gds-glass-bg-opacity, 0.15) * 100%),
+    transparent
+  );
+  backdrop-filter: blur(var(--gds-glass-blur-lg, 40px))
+    saturate(var(--gds-glass-saturate-lg, 200%));
+  -webkit-backdrop-filter: blur(var(--gds-glass-blur-lg, 40px))
+    saturate(var(--gds-glass-saturate-lg, 200%));
   border-color: color-mix(in srgb, var(--gds-border) 40%, transparent);
 }
 
 /* glass fallback — when backdrop-filter is unsupported, solid semi-transparent bg */
 @supports not (backdrop-filter: blur(1px)) {
-  .gds-glass, .gds-glass-sm, .gds-glass-lg {
+  .gds-glass,
+  .gds-glass-sm,
+  .gds-glass-lg {
     background-color: color-mix(in srgb, var(--gds-surface) 85%, transparent);
   }
 }
 
 /* backward compat aliases */
-@utility glass { backdrop-filter: blur(var(--gds-glass-blur-md, 20px)) saturate(var(--gds-glass-saturate-md, 180%)); -webkit-backdrop-filter: blur(var(--gds-glass-blur-md, 20px)) saturate(var(--gds-glass-saturate-md, 180%)); }
-@utility glass-sm { backdrop-filter: blur(var(--gds-glass-blur-sm, 8px)) saturate(var(--gds-glass-saturate-sm, 150%)); -webkit-backdrop-filter: blur(var(--gds-glass-blur-sm, 8px)) saturate(var(--gds-glass-saturate-sm, 150%)); }
-@utility glass-lg { backdrop-filter: blur(var(--gds-glass-blur-lg, 40px)) saturate(var(--gds-glass-saturate-lg, 200%)); -webkit-backdrop-filter: blur(var(--gds-glass-blur-lg, 40px)) saturate(var(--gds-glass-saturate-lg, 200%)); }
+@utility glass {
+  backdrop-filter: blur(var(--gds-glass-blur-md, 20px))
+    saturate(var(--gds-glass-saturate-md, 180%));
+  -webkit-backdrop-filter: blur(var(--gds-glass-blur-md, 20px))
+    saturate(var(--gds-glass-saturate-md, 180%));
+}
+@utility glass-sm {
+  backdrop-filter: blur(var(--gds-glass-blur-sm, 8px))
+    saturate(var(--gds-glass-saturate-sm, 150%));
+  -webkit-backdrop-filter: blur(var(--gds-glass-blur-sm, 8px))
+    saturate(var(--gds-glass-saturate-sm, 150%));
+}
+@utility glass-lg {
+  backdrop-filter: blur(var(--gds-glass-blur-lg, 40px))
+    saturate(var(--gds-glass-saturate-lg, 200%));
+  -webkit-backdrop-filter: blur(var(--gds-glass-blur-lg, 40px))
+    saturate(var(--gds-glass-saturate-lg, 200%));
+}
 
 /* ===== MOTION ANIMATION SYSTEM =====
  * all animations use token durations (--gds-duration-*) and easings (--gds-ease-*)
@@ -197,36 +372,155 @@
  */
 
 /* keyframes */
-@keyframes gds-fade-in { from { opacity: 0; } to { opacity: 1; } }
-@keyframes gds-fade-out { from { opacity: 1; } to { opacity: 0; } }
-@keyframes gds-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
-@keyframes gds-scale-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
-@keyframes gds-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
-@keyframes gds-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
-@keyframes gds-slide-left { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
-@keyframes gds-slide-right { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
-@keyframes marquee-scroll { from { transform: translateX(var(--marquee-from, 0%)); } to { transform: translateX(var(--marquee-to, -50%)); } }
-@keyframes gds-ripple { from { transform: scale(0); opacity: 0.3; } to { transform: scale(2); opacity: 0; } }
+@keyframes gds-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes gds-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes gds-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes gds-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+@keyframes gds-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes gds-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes gds-slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes gds-slide-right {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes marquee-scroll {
+  from {
+    transform: translateX(var(--marquee-from, 0%));
+  }
+  to {
+    transform: translateX(var(--marquee-to, -50%));
+  }
+}
+@keyframes gds-ripple {
+  from {
+    transform: scale(0);
+    opacity: 0.3;
+  }
+  to {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
 
 /* animation utility classes — all token-driven */
-@utility animate-fade-in { animation: gds-fade-in var(--gds-duration-normal, 200ms) var(--gds-ease-default, ease) both; }
-@utility animate-fade-out { animation: gds-fade-out var(--gds-duration-normal, 200ms) var(--gds-ease-default, ease) both; }
-@utility animate-scale-in { animation: gds-scale-in var(--gds-duration-normal, 200ms) var(--gds-ease-out, ease) both; }
-@utility animate-scale-out { animation: gds-scale-out var(--gds-duration-fast, 100ms) var(--gds-ease-in, ease) both; }
-@utility animate-slide-up { animation: gds-slide-up var(--gds-duration-normal, 200ms) var(--gds-ease-out, ease) both; }
-@utility animate-slide-down { animation: gds-slide-down var(--gds-duration-normal, 200ms) var(--gds-ease-out, ease) both; }
-@utility animate-slide-left { animation: gds-slide-left var(--gds-duration-normal, 200ms) var(--gds-ease-out, ease) both; }
-@utility animate-slide-right { animation: gds-slide-right var(--gds-duration-normal, 200ms) var(--gds-ease-out, ease) both; }
+@utility animate-fade-in {
+  animation: gds-fade-in var(--gds-duration-normal, 200ms)
+    var(--gds-ease-default, ease) both;
+}
+@utility animate-fade-out {
+  animation: gds-fade-out var(--gds-duration-normal, 200ms)
+    var(--gds-ease-default, ease) both;
+}
+@utility animate-scale-in {
+  animation: gds-scale-in var(--gds-duration-normal, 200ms)
+    var(--gds-ease-out, ease) both;
+}
+@utility animate-scale-out {
+  animation: gds-scale-out var(--gds-duration-fast, 100ms)
+    var(--gds-ease-in, ease) both;
+}
+@utility animate-slide-up {
+  animation: gds-slide-up var(--gds-duration-normal, 200ms)
+    var(--gds-ease-out, ease) both;
+}
+@utility animate-slide-down {
+  animation: gds-slide-down var(--gds-duration-normal, 200ms)
+    var(--gds-ease-out, ease) both;
+}
+@utility animate-slide-left {
+  animation: gds-slide-left var(--gds-duration-normal, 200ms)
+    var(--gds-ease-out, ease) both;
+}
+@utility animate-slide-right {
+  animation: gds-slide-right var(--gds-duration-normal, 200ms)
+    var(--gds-ease-out, ease) both;
+}
 
-@utility animate-ripple { animation: gds-ripple 600ms ease-out forwards; }
+@utility animate-ripple {
+  animation: gds-ripple 600ms ease-out forwards;
+}
 
 /* speed variants — override default timing */
-@utility animate-fast { animation-duration: var(--gds-duration-fast, 100ms); }
-@utility animate-slow { animation-duration: var(--gds-duration-slow, 300ms); }
+@utility animate-fast {
+  animation-duration: var(--gds-duration-fast, 100ms);
+}
+@utility animate-medium {
+  animation-duration: var(--gds-duration-medium, 150ms);
+}
+@utility animate-slow {
+  animation-duration: var(--gds-duration-slow, 300ms);
+}
 
 /* prefers-reduced-motion — global kill switch */
 @media (prefers-reduced-motion: reduce) {
-  *, ::before, ::after {
+  *,
+  ::before,
+  ::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
@@ -237,23 +531,94 @@
  * custom utilities used by GDS components that are not built into Tailwind
  * consumers get these automatically via tokens.css import
  */
-@utility rounded-inherit { border-radius: inherit; }
-@utility -z-1 { z-index: -1; }
+@utility rounded-inherit {
+  border-radius: inherit;
+}
+@utility -z-1 {
+  z-index: -1;
+}
 
 /* ===== INTERACTION DEFAULTS =====
  * user-select off by default — gestures need this
  * selectable areas opt-in via [data-selectable], input, textarea, pre, code, td
  */
 @layer base {
-  * { user-select: none; touch-action: manipulation; }
-  [data-selectable], [data-selectable] *,
-  [contenteditable], [contenteditable] *,
-  input, textarea, select, pre, code, td { user-select: text; }
-  button, [role="button"] { cursor: pointer; }
+  * {
+    user-select: none;
+    touch-action: manipulation;
+  }
+  [data-selectable],
+  [data-selectable] *,
+  [contenteditable],
+  [contenteditable] *,
+  input,
+  textarea,
+  select,
+  pre,
+  code,
+  td {
+    user-select: text;
+  }
+  button,
+  [role='button'] {
+    cursor: pointer;
+  }
 }
 
 /* depth cascade (static) */
-.gds-ctx { --gds-ctx-gap: 16px; --gds-ctx-pad: 16px; --gds-ctx-radius: 10px; --gds-ctx-shadow: var(--gds-shadow-sm); --gds-ctx-text: 12px; --gds-ctx-heading: 14px; --gds-ctx-fg-alpha: 0.95; }
-.gds-ctx .gds-ctx { --gds-ctx-gap: 12px; --gds-ctx-pad: 12px; --gds-ctx-radius: 8px; --gds-ctx-shadow: none; --gds-ctx-text: 11px; --gds-ctx-heading: 13px; --gds-ctx-fg-alpha: 0.88; }
-.gds-ctx .gds-ctx .gds-ctx { --gds-ctx-gap: 8px; --gds-ctx-pad: 8px; --gds-ctx-radius: 6px; --gds-ctx-shadow: none; --gds-ctx-text: 10px; --gds-ctx-heading: 12px; --gds-ctx-fg-alpha: 0.80; }
-.gds-ctx .gds-ctx .gds-ctx .gds-ctx { --gds-ctx-gap: 6px; --gds-ctx-pad: 6px; --gds-ctx-radius: 4px; --gds-ctx-shadow: none; --gds-ctx-text: 10px; --gds-ctx-heading: 11px; --gds-ctx-fg-alpha: 0.72; }
+.gds-ctx {
+  --gds-ctx-gap: 16px;
+  --gds-ctx-pad: 16px;
+  --gds-ctx-radius: 10px;
+  --gds-ctx-shadow: var(--gds-shadow-sm);
+  --gds-ctx-text: 12px;
+  --gds-ctx-heading: 14px;
+  --gds-ctx-fg-alpha: 0.95;
+}
+.gds-ctx .gds-ctx {
+  --gds-ctx-gap: 12px;
+  --gds-ctx-pad: 12px;
+  --gds-ctx-radius: 8px;
+  --gds-ctx-shadow: none;
+  --gds-ctx-text: 11px;
+  --gds-ctx-heading: 13px;
+  --gds-ctx-fg-alpha: 0.88;
+}
+.gds-ctx .gds-ctx .gds-ctx {
+  --gds-ctx-gap: 8px;
+  --gds-ctx-pad: 8px;
+  --gds-ctx-radius: 6px;
+  --gds-ctx-shadow: none;
+  --gds-ctx-text: 10px;
+  --gds-ctx-heading: 12px;
+  --gds-ctx-fg-alpha: 0.8;
+}
+.gds-ctx .gds-ctx .gds-ctx .gds-ctx {
+  --gds-ctx-gap: 6px;
+  --gds-ctx-pad: 6px;
+  --gds-ctx-radius: 4px;
+  --gds-ctx-shadow: none;
+  --gds-ctx-text: 10px;
+  --gds-ctx-heading: 11px;
+  --gds-ctx-fg-alpha: 0.72;
+}
+
+/* depth reset — escape hatch for deep nesting (e.g. EmailThread > message > attachment > preview) */
+.gds-ctx-reset {
+  --gds-ctx-gap: 16px;
+  --gds-ctx-pad: 16px;
+  --gds-ctx-radius: 10px;
+  --gds-ctx-shadow: var(--gds-shadow-sm);
+  --gds-ctx-text: 12px;
+  --gds-ctx-heading: 14px;
+  --gds-ctx-fg-alpha: 0.95;
+}
+@utility gds-ctx-reset {
+  --gds-ctx-gap: 16px;
+  --gds-ctx-pad: 16px;
+  --gds-ctx-radius: 10px;
+  --gds-ctx-shadow: var(--gds-shadow-sm);
+  --gds-ctx-text: 12px;
+  --gds-ctx-heading: 14px;
+  --gds-ctx-fg-alpha: 0.95;
+}