@omkarux/vela 0.2.0

package/dist/vela.css

@@ -0,0 +1,897 @@
+/*! @omkarux/vela — design tokens + component styles. MIT. */
+
+/* ============================================================================
+   VELA — Design tokens
+   Two layers: primitives (raw scale values) and semantics (role-named).
+   Always bind to semantics. Primitives exist so semantics can be re-pointed
+   for theming — binding a primitive directly defeats the entire architecture.
+   Numeric tokens carry their unit. Use them directly; never calc(... * 1px).
+   ============================================================================ */
+
+:root {
+  color-scheme: light;
+
+  /* ---- Primitives: neutral ---- */
+  --vela-black: #191d1f;
+  --vela-white: #ffffff;
+  --vela-grey-50: #f7f9f9;
+  --vela-grey-100: #eef2f2;
+  --vela-grey-200: #dde3e4;
+  --vela-grey-300: #c8d0d2;
+  --vela-grey-400: #a3aeb1;
+  --vela-grey-500: #7f8c90;
+  --vela-grey-600: #667377;   /* AA-safe de-emphasized text on white */
+  --vela-grey-700: #49555a;
+  --vela-grey-800: #333d41;
+  --vela-grey-850: #262e31;
+  --vela-grey-900: #1b2225;
+  --vela-grey-950: #11171a;
+
+  /* ---- Primitives: brand / blue ---- */
+  --vela-primary-300: #5fb8c9;
+  --vela-primary-400: #2f9db3;
+  --vela-primary-500: #0a6c7d;
+  --vela-primary-600: #075462;
+  --vela-blue-100: #e6eefb;
+  --vela-blue-150: #cfdff7;
+  --vela-blue-300: #85aae8;
+  --vela-blue-500: #3d7fd6;
+  --vela-blue-700: #35558a;
+  --vela-blue-950: #0e1a2e;
+
+  /* ---- Primitives: red / critical ---- */
+  --vela-red-100: #fce8e6;
+  --vela-red-300: #f0918c;
+  --vela-red-500: #dd4b3e;
+  --vela-red-700: #ab3125;
+  --vela-red-950: #2a1310;
+  --vela-critical-100: #f2d6d4;
+  --vela-critical-300: #cc6f68;
+  --vela-critical-500: #a81c14;
+  --vela-critical-700: #7d150f;
+  --vela-critical-950: #2b100e;
+
+  /* ---- Primitives: yellow / orange / green ---- */
+  --vela-yellow-100: #fdf1d3;
+  --vela-yellow-300: #f7d382;
+  --vela-yellow-500: #f0c14e;
+  --vela-yellow-600: #c99a10;
+  --vela-yellow-700: #9a7a0c;
+  --vela-yellow-800: #7a6224;
+  --vela-yellow-950: #26200e;
+  --vela-orange-100: #fde7d0;
+  --vela-orange-300: #f5ad63;
+  --vela-orange-500: #ea7f1a;
+  --vela-orange-600: #c86a0d; /* AA-safe status dot on white */
+  --vela-orange-700: #9c5408;
+  --vela-orange-950: #281a0b;
+  --vela-green-100: #dcefe0;
+  --vela-green-300: #86c795;
+  --vela-green-500: #4aa863;
+  --vela-green-700: #1f7340;
+  --vela-green-800: #175c33;  /* AA-safe success text on green-100 */
+  --vela-green-950: #0d2318;
+
+  /* ---- Semantic: surface ---- */
+  --vela-bg-global: var(--vela-white);
+  --vela-bg-container: var(--vela-grey-100);
+  --vela-bg-raised: var(--vela-white);
+  --vela-bg-hover: var(--vela-grey-100);
+  --vela-bg-tooltip: var(--vela-grey-800);
+  --vela-bg-inactive: var(--vela-grey-100);
+  --vela-bg-selected: var(--vela-blue-100);
+  --vela-primary-tint: var(--vela-blue-100);
+  --vela-primary-active-bg: var(--vela-primary-500);
+
+  /* ---- Semantic: border ---- */
+  --vela-border-default: var(--vela-grey-500);
+  --vela-border-subtle: var(--vela-grey-200);
+  --vela-border-active: var(--vela-primary-500);
+  --vela-border-inactive: var(--vela-grey-200);
+  --vela-border-action: var(--vela-grey-700);
+
+  /* ---- Semantic: text ---- */
+  --vela-text-default: var(--vela-grey-700);
+  --vela-text-heading: var(--vela-black);
+  --vela-text-de-emphasized: var(--vela-grey-600);
+  --vela-text-inactive: var(--vela-grey-400);
+  --vela-text-link: var(--vela-primary-500);
+  --vela-text-on-brand: var(--vela-white);
+  --vela-text-on-tint: var(--vela-grey-700);
+  --vela-text-error: var(--vela-red-700);
+
+  /* ---- Semantic: icon ---- */
+  --vela-icon-default: var(--vela-grey-500);
+  --vela-icon-strong: var(--vela-grey-700);
+  --vela-icon-selected: var(--vela-primary-500);
+  --vela-icon-disabled: var(--vela-grey-300);
+  --vela-icon-on-brand: var(--vela-white);
+
+  /* ---- Semantic: button ---- */
+  --vela-btn-primary-bg: var(--vela-primary-500);
+  --vela-btn-primary-hover-bg: var(--vela-primary-600);
+  --vela-btn-primary-border: var(--vela-primary-500);
+  --vela-btn-primary-text: var(--vela-white);
+  --vela-btn-standard-bg: var(--vela-grey-100);
+  --vela-btn-standard-hover-bg: var(--vela-grey-200);
+  --vela-btn-standard-text: var(--vela-grey-700);
+  --vela-btn-hollow-primary-text: var(--vela-primary-500);
+  --vela-btn-hollow-primary-border: var(--vela-primary-500);
+  --vela-btn-disabled-bg: var(--vela-grey-200);
+  --vela-btn-disabled-text: var(--vela-text-inactive);
+
+
+  /* ---- Semantic: destructive button ----
+     NOTE: red-500 on white is 4.08:1 and fails WCAG AA for normal text.
+     Destructive filled therefore binds red-700 (6.57:1). This is a
+     deliberate divergence from a naive "use the signal color" mapping. */
+  --vela-btn-destructive-bg: var(--vela-red-700);
+  --vela-btn-destructive-hover-bg: var(--vela-critical-500);
+  --vela-btn-destructive-text: var(--vela-white);
+  --vela-btn-destructive-hollow-text: var(--vela-red-700);
+  --vela-btn-standard-border: var(--vela-grey-600);
+  --vela-btn-hollow-hover-bg: var(--vela-primary-tint);
+
+  /* ---- Semantic: form control ---- */
+  --vela-control-bg: var(--vela-white);
+  --vela-control-border: var(--vela-grey-500);
+  --vela-control-border-hover: var(--vela-grey-500);
+  --vela-control-border-active: var(--vela-primary-500);
+  --vela-control-border-error: var(--vela-red-500);
+  --vela-control-bg-disabled: var(--vela-grey-100);
+  --vela-control-placeholder: var(--vela-grey-600);
+  --vela-toggle-off-bg: var(--vela-grey-400);
+  --vela-toggle-on-bg: var(--vela-primary-500);
+  --vela-toggle-knob: var(--vela-white);
+
+  /* ============================================================================
+     SEVERITY — 6 levels. Describes events and alerts.
+     Never interchange with Risk or Status. There is no "high severity".
+     Every level defines the full row: bg, border, signal, icon, text, indicator.
+     ============================================================================ */
+  --vela-bg-severity-success: var(--vela-green-100);
+  --vela-border-severity-success: var(--vela-green-300);
+  --vela-signal-severity-success: var(--vela-green-500);
+  --vela-icon-severity-success: var(--vela-green-800);
+  --vela-text-severity-success: var(--vela-green-800);
+  --vela-border-severity-success-indicator: var(--vela-green-700);
+
+  --vela-bg-severity-info: var(--vela-blue-100);
+  --vela-border-severity-info: var(--vela-blue-300);
+  --vela-signal-severity-info: var(--vela-blue-500);
+  --vela-icon-severity-info: var(--vela-blue-700);
+  --vela-text-severity-info: var(--vela-blue-700);
+  --vela-border-severity-info-indicator: var(--vela-blue-700);
+
+  --vela-bg-severity-warning: var(--vela-yellow-100);
+  --vela-border-severity-warning: var(--vela-yellow-300);
+  --vela-signal-severity-warning: var(--vela-yellow-500);
+  --vela-icon-severity-warning: var(--vela-yellow-800);
+  --vela-text-severity-warning: var(--vela-yellow-800);
+  --vela-border-severity-warning-indicator: var(--vela-yellow-700);
+
+  --vela-bg-severity-minor: var(--vela-orange-100);
+  --vela-border-severity-minor: var(--vela-orange-300);
+  --vela-signal-severity-minor: var(--vela-orange-500);
+  --vela-icon-severity-minor: var(--vela-orange-700);
+  --vela-text-severity-minor: var(--vela-orange-700);
+  --vela-border-severity-minor-indicator: var(--vela-orange-700);
+
+  --vela-bg-severity-major: var(--vela-red-100);
+  --vela-border-severity-major: var(--vela-red-300);
+  --vela-signal-severity-major: var(--vela-red-500);
+  --vela-icon-severity-major: var(--vela-red-700);
+  --vela-text-severity-major: var(--vela-red-700);
+  --vela-border-severity-major-indicator: var(--vela-red-700);
+
+  --vela-bg-severity-critical: var(--vela-critical-100);
+  --vela-border-severity-critical: var(--vela-critical-300);
+  --vela-signal-severity-critical: var(--vela-critical-500);
+  --vela-icon-severity-critical: var(--vela-critical-700);
+  --vela-text-severity-critical: var(--vela-critical-700);
+  --vela-border-severity-critical-indicator: var(--vela-critical-700);
+
+  /* ============================================================================
+     RISK — 3 levels. Describes scoring. There is no "critical risk".
+     ============================================================================ */
+  --vela-bg-risk-low: var(--vela-green-100);
+  --vela-border-risk-low: var(--vela-green-300);
+  --vela-signal-risk-low: var(--vela-green-500);
+  --vela-icon-risk-low: var(--vela-green-800);
+  --vela-text-risk-low: var(--vela-green-800);
+  --vela-border-risk-low-indicator: var(--vela-green-700);
+
+  --vela-bg-risk-medium: var(--vela-yellow-100);
+  --vela-border-risk-medium: var(--vela-yellow-300);
+  --vela-signal-risk-medium: var(--vela-yellow-500);
+  --vela-icon-risk-medium: var(--vela-yellow-800);
+  --vela-text-risk-medium: var(--vela-yellow-800);
+  --vela-border-risk-medium-indicator: var(--vela-yellow-700);
+
+  --vela-bg-risk-high: var(--vela-red-100);
+  --vela-border-risk-high: var(--vela-red-300);
+  --vela-signal-risk-high: var(--vela-red-500);
+  --vela-icon-risk-high: var(--vela-red-700);
+  --vela-text-risk-high: var(--vela-red-700);
+  --vela-border-risk-high-indicator: var(--vela-red-700);
+
+  /* ============================================================================
+     STATUS — 5 health states. Status Indicator dots only. Neither of the above.
+     ============================================================================ */
+  --vela-signal-status-unknown: var(--vela-grey-500);
+  --vela-signal-status-healthy: var(--vela-green-700);
+  --vela-signal-status-warning: var(--vela-yellow-700);
+  --vela-signal-status-medium: var(--vela-orange-600);
+  --vela-signal-status-unhealthy: var(--vela-red-500);
+
+  /* ---- Spacing: 5px base. 25 exists; 50 does not. ---- */
+  --vela-space-5: 5px;
+  --vela-space-10: 10px;
+  --vela-space-15: 15px;
+  --vela-space-20: 20px;
+  --vela-space-25: 25px;
+  --vela-space-30: 30px;
+  --vela-space-40: 40px;
+  --vela-space-60: 60px;
+  --vela-space-80: 80px;
+
+  /* ---- Icon sizes ---- */
+  --vela-icon-12: 12px;
+  --vela-icon-16: 16px;
+  --vela-icon-20: 20px;
+  --vela-icon-24: 24px;
+
+  /* ---- Control heights ---- */
+  --vela-control-height-24: 24px;
+  --vela-control-height-25: 25px;
+  --vela-control-height-26: 26px;
+  --vela-control-height-35: 35px;
+  --vela-control-height-40: 40px;
+  --vela-control-height-48: 48px;
+  --vela-control-height-60: 60px;
+
+  /* ---- Radius ---- */
+  --vela-radius-3: 3px;
+  --vela-radius-4: 4px;
+  --vela-radius-8: 8px;
+  --vela-radius-12: 12px;
+  --vela-radius-full: 9999px;
+
+  /* ---- Typography: family & weight ---- */
+  --vela-font-family-primary: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --vela-font-family-display: "Oswald", "Open Sans", -apple-system, sans-serif;
+  --vela-font-weight-light: 300;
+  --vela-font-weight-regular: 400;
+  --vela-font-weight-semibold: 600;
+
+  /* ---- Typography: scale (size / weight / line-height triples) ---- */
+  --vela-text-h1-size: 32px;   --vela-text-h1-weight: 300; --vela-text-h1-line-height: 42px;
+  --vela-text-h2-size: 24px;   --vela-text-h2-weight: 300; --vela-text-h2-line-height: 33px;
+  --vela-text-h3-size: 20px;   --vela-text-h3-weight: 300; --vela-text-h3-line-height: 27px;
+  --vela-text-h4-size: 16px;   --vela-text-h4-weight: 400; --vela-text-h4-line-height: 24px;
+  --vela-text-h5-size: 14px;   --vela-text-h5-weight: 600; --vela-text-h5-line-height: 21px;
+  --vela-text-h6-size: 12px;   --vela-text-h6-weight: 600; --vela-text-h6-line-height: 18px;
+  --vela-text-body-size: 14px; --vela-text-body-weight: 400; --vela-text-body-line-height: 21px;
+  --vela-text-meta-size: 12px; --vela-text-meta-weight: 400; --vela-text-meta-line-height: 18px;
+  --vela-text-meta-tracking: 0.3px;
+
+  --vela-text-button-tiny-size: 12px;    --vela-text-button-tiny-line-height: 18px;
+  --vela-text-button-regular-size: 14px; --vela-text-button-regular-line-height: 21px;
+  --vela-text-button-large-size: 15px;   --vela-text-button-large-line-height: 22px;
+  --vela-text-button-huge-size: 16px;    --vela-text-button-huge-line-height: 24px;
+
+  --vela-text-tab-size: 14px;       --vela-text-tab-line-height: 19px;
+  --vela-text-tab-large-size: 18px; --vela-text-tab-large-line-height: 25px;
+
+  /* ---- Focus ---- */
+  --vela-focus-ring-width: 2px;
+  --vela-focus-ring-offset: 2px;
+  --vela-focus-ring-color: var(--vela-border-active);
+
+  /* ---- Motion (respects reduced-motion in components.css) ---- */
+  --vela-duration-fast: 120ms;
+  --vela-duration-base: 180ms;
+  --vela-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
+}
+
+/* -- dark: OS preference, unless an explicit light choice overrides it ------ */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    /* ============================================================================
+       DARK THEME
+       Note what is NOT here: primitives. Not one raw hex is redefined below.
+       Dark mode is achieved entirely by re-pointing semantic tokens onto a
+       different part of the same scale. That is the return on the two-layer
+       architecture — and the reason components never bind primitives directly.
+       Contrast ratios are asserted in src/styles/contrast.test.ts.
+       ============================================================================ */
+    color-scheme: dark;
+
+    /* ---- Surface ---- */
+    --vela-bg-global: var(--vela-grey-950);
+    --vela-bg-container: var(--vela-grey-900);
+    --vela-bg-raised: var(--vela-grey-850);
+    --vela-bg-hover: var(--vela-grey-850);
+    --vela-bg-tooltip: var(--vela-grey-700);
+    --vela-bg-inactive: var(--vela-grey-900);
+    --vela-bg-selected: var(--vela-blue-950);
+    --vela-primary-tint: var(--vela-blue-950);
+    --vela-primary-active-bg: var(--vela-primary-500);
+
+    /* ---- Border ---- */
+    --vela-border-default: var(--vela-grey-600);
+    --vela-border-subtle: var(--vela-grey-850);
+    --vela-border-active: var(--vela-primary-400);
+    --vela-border-inactive: var(--vela-grey-850);
+    --vela-border-action: var(--vela-grey-500);
+
+    /* ---- Text ---- */
+    --vela-text-default: var(--vela-grey-300);
+    --vela-text-heading: var(--vela-grey-50);
+    --vela-text-de-emphasized: var(--vela-grey-500);
+    --vela-text-inactive: var(--vela-grey-700);
+    --vela-text-link: var(--vela-primary-400);
+    --vela-text-on-brand: var(--vela-white);
+    --vela-text-on-tint: var(--vela-grey-300);
+    --vela-text-error: var(--vela-red-300);
+
+    /* ---- Icon ---- */
+    --vela-icon-default: var(--vela-grey-500);
+    --vela-icon-strong: var(--vela-grey-300);
+    --vela-icon-selected: var(--vela-primary-400);
+    --vela-icon-disabled: var(--vela-grey-700);
+    --vela-icon-on-brand: var(--vela-white);
+
+    /* ---- Button ---- */
+    --vela-btn-primary-bg: var(--vela-primary-500);
+    --vela-btn-primary-hover-bg: var(--vela-primary-400);
+    --vela-btn-primary-border: var(--vela-primary-500);
+    --vela-btn-primary-text: var(--vela-white);
+    --vela-btn-standard-bg: var(--vela-grey-850);
+    --vela-btn-standard-hover-bg: var(--vela-grey-800);
+    --vela-btn-standard-text: var(--vela-grey-300);
+    --vela-btn-hollow-primary-text: var(--vela-primary-300);
+    --vela-btn-hollow-primary-border: var(--vela-primary-400);
+    --vela-btn-disabled-bg: var(--vela-grey-850);
+    --vela-btn-disabled-text: var(--vela-grey-700);
+
+
+    --vela-btn-destructive-bg: var(--vela-red-700);
+    --vela-btn-destructive-hover-bg: var(--vela-red-500);
+    --vela-btn-destructive-text: var(--vela-white);
+    --vela-btn-destructive-hollow-text: var(--vela-red-300);
+    --vela-btn-standard-border: var(--vela-grey-500);
+    --vela-btn-hollow-hover-bg: var(--vela-primary-tint);
+
+    /* ---- Form control ---- */
+    --vela-control-bg: var(--vela-grey-900);
+    --vela-control-border: var(--vela-grey-600);
+    --vela-control-border-hover: var(--vela-grey-500);
+    --vela-control-border-active: var(--vela-primary-400);
+    --vela-control-border-error: var(--vela-red-500);
+    --vela-control-bg-disabled: var(--vela-grey-900);
+    --vela-control-placeholder: var(--vela-grey-500);
+    --vela-toggle-off-bg: var(--vela-grey-700);
+    --vela-toggle-on-bg: var(--vela-primary-500);
+    --vela-toggle-knob: var(--vela-white);
+
+    /* ---- Severity (6) ---- */
+    --vela-bg-severity-success: var(--vela-green-950);
+    --vela-border-severity-success: var(--vela-green-700);
+    --vela-signal-severity-success: var(--vela-green-500);
+    --vela-icon-severity-success: var(--vela-green-300);
+    --vela-text-severity-success: var(--vela-green-300);
+    --vela-border-severity-success-indicator: var(--vela-green-500);
+
+    --vela-bg-severity-info: var(--vela-blue-950);
+    --vela-border-severity-info: var(--vela-blue-700);
+    --vela-signal-severity-info: var(--vela-blue-500);
+    --vela-icon-severity-info: var(--vela-blue-300);
+    --vela-text-severity-info: var(--vela-blue-300);
+    --vela-border-severity-info-indicator: var(--vela-blue-500);
+
+    --vela-bg-severity-warning: var(--vela-yellow-950);
+    --vela-border-severity-warning: var(--vela-yellow-700);
+    --vela-signal-severity-warning: var(--vela-yellow-500);
+    --vela-icon-severity-warning: var(--vela-yellow-300);
+    --vela-text-severity-warning: var(--vela-yellow-300);
+    --vela-border-severity-warning-indicator: var(--vela-yellow-500);
+
+    --vela-bg-severity-minor: var(--vela-orange-950);
+    --vela-border-severity-minor: var(--vela-orange-700);
+    --vela-signal-severity-minor: var(--vela-orange-500);
+    --vela-icon-severity-minor: var(--vela-orange-300);
+    --vela-text-severity-minor: var(--vela-orange-300);
+    --vela-border-severity-minor-indicator: var(--vela-orange-500);
+
+    --vela-bg-severity-major: var(--vela-red-950);
+    --vela-border-severity-major: var(--vela-red-700);
+    --vela-signal-severity-major: var(--vela-red-500);
+    --vela-icon-severity-major: var(--vela-red-300);
+    --vela-text-severity-major: var(--vela-red-300);
+    --vela-border-severity-major-indicator: var(--vela-red-500);
+
+    --vela-bg-severity-critical: var(--vela-critical-950);
+    --vela-border-severity-critical: var(--vela-critical-500);
+    --vela-signal-severity-critical: var(--vela-critical-300);
+    --vela-icon-severity-critical: var(--vela-critical-300);
+    --vela-text-severity-critical: var(--vela-critical-300);
+    --vela-border-severity-critical-indicator: var(--vela-critical-300);
+
+    /* ---- Risk (3) ---- */
+    --vela-bg-risk-low: var(--vela-green-950);
+    --vela-border-risk-low: var(--vela-green-700);
+    --vela-signal-risk-low: var(--vela-green-500);
+    --vela-icon-risk-low: var(--vela-green-300);
+    --vela-text-risk-low: var(--vela-green-300);
+    --vela-border-risk-low-indicator: var(--vela-green-500);
+
+    --vela-bg-risk-medium: var(--vela-yellow-950);
+    --vela-border-risk-medium: var(--vela-yellow-700);
+    --vela-signal-risk-medium: var(--vela-yellow-500);
+    --vela-icon-risk-medium: var(--vela-yellow-300);
+    --vela-text-risk-medium: var(--vela-yellow-300);
+    --vela-border-risk-medium-indicator: var(--vela-yellow-500);
+
+    --vela-bg-risk-high: var(--vela-red-950);
+    --vela-border-risk-high: var(--vela-red-700);
+    --vela-signal-risk-high: var(--vela-red-500);
+    --vela-icon-risk-high: var(--vela-red-300);
+    --vela-text-risk-high: var(--vela-red-300);
+    --vela-border-risk-high-indicator: var(--vela-red-500);
+
+    /* ---- Status (5 dots) ---- */
+    --vela-signal-status-unknown: var(--vela-grey-500);
+    --vela-signal-status-healthy: var(--vela-green-500);
+    --vela-signal-status-warning: var(--vela-yellow-500);
+    --vela-signal-status-medium: var(--vela-orange-500);
+    --vela-signal-status-unhealthy: var(--vela-red-500);
+
+    /* ---- Focus ---- */
+    --vela-focus-ring-color: var(--vela-primary-400);
+
+  }
+}
+
+/* -- dark: explicit opt-in, wins over the OS preference -------------------- */
+:root[data-theme="dark"] {
+  /* ============================================================================
+     DARK THEME
+     Note what is NOT here: primitives. Not one raw hex is redefined below.
+     Dark mode is achieved entirely by re-pointing semantic tokens onto a
+     different part of the same scale. That is the return on the two-layer
+     architecture — and the reason components never bind primitives directly.
+     Contrast ratios are asserted in src/styles/contrast.test.ts.
+     ============================================================================ */
+  color-scheme: dark;
+
+  /* ---- Surface ---- */
+  --vela-bg-global: var(--vela-grey-950);
+  --vela-bg-container: var(--vela-grey-900);
+  --vela-bg-raised: var(--vela-grey-850);
+  --vela-bg-hover: var(--vela-grey-850);
+  --vela-bg-tooltip: var(--vela-grey-700);
+  --vela-bg-inactive: var(--vela-grey-900);
+  --vela-bg-selected: var(--vela-blue-950);
+  --vela-primary-tint: var(--vela-blue-950);
+  --vela-primary-active-bg: var(--vela-primary-500);
+
+  /* ---- Border ---- */
+  --vela-border-default: var(--vela-grey-600);
+  --vela-border-subtle: var(--vela-grey-850);
+  --vela-border-active: var(--vela-primary-400);
+  --vela-border-inactive: var(--vela-grey-850);
+  --vela-border-action: var(--vela-grey-500);
+
+  /* ---- Text ---- */
+  --vela-text-default: var(--vela-grey-300);
+  --vela-text-heading: var(--vela-grey-50);
+  --vela-text-de-emphasized: var(--vela-grey-500);
+  --vela-text-inactive: var(--vela-grey-700);
+  --vela-text-link: var(--vela-primary-400);
+  --vela-text-on-brand: var(--vela-white);
+  --vela-text-on-tint: var(--vela-grey-300);
+  --vela-text-error: var(--vela-red-300);
+
+  /* ---- Icon ---- */
+  --vela-icon-default: var(--vela-grey-500);
+  --vela-icon-strong: var(--vela-grey-300);
+  --vela-icon-selected: var(--vela-primary-400);
+  --vela-icon-disabled: var(--vela-grey-700);
+  --vela-icon-on-brand: var(--vela-white);
+
+  /* ---- Button ---- */
+  --vela-btn-primary-bg: var(--vela-primary-500);
+  --vela-btn-primary-hover-bg: var(--vela-primary-400);
+  --vela-btn-primary-border: var(--vela-primary-500);
+  --vela-btn-primary-text: var(--vela-white);
+  --vela-btn-standard-bg: var(--vela-grey-850);
+  --vela-btn-standard-hover-bg: var(--vela-grey-800);
+  --vela-btn-standard-text: var(--vela-grey-300);
+  --vela-btn-hollow-primary-text: var(--vela-primary-300);
+  --vela-btn-hollow-primary-border: var(--vela-primary-400);
+  --vela-btn-disabled-bg: var(--vela-grey-850);
+  --vela-btn-disabled-text: var(--vela-grey-700);
+
+
+  --vela-btn-destructive-bg: var(--vela-red-700);
+  --vela-btn-destructive-hover-bg: var(--vela-red-500);
+  --vela-btn-destructive-text: var(--vela-white);
+  --vela-btn-destructive-hollow-text: var(--vela-red-300);
+  --vela-btn-standard-border: var(--vela-grey-500);
+  --vela-btn-hollow-hover-bg: var(--vela-primary-tint);
+
+  /* ---- Form control ---- */
+  --vela-control-bg: var(--vela-grey-900);
+  --vela-control-border: var(--vela-grey-600);
+  --vela-control-border-hover: var(--vela-grey-500);
+  --vela-control-border-active: var(--vela-primary-400);
+  --vela-control-border-error: var(--vela-red-500);
+  --vela-control-bg-disabled: var(--vela-grey-900);
+  --vela-control-placeholder: var(--vela-grey-500);
+  --vela-toggle-off-bg: var(--vela-grey-700);
+  --vela-toggle-on-bg: var(--vela-primary-500);
+  --vela-toggle-knob: var(--vela-white);
+
+  /* ---- Severity (6) ---- */
+  --vela-bg-severity-success: var(--vela-green-950);
+  --vela-border-severity-success: var(--vela-green-700);
+  --vela-signal-severity-success: var(--vela-green-500);
+  --vela-icon-severity-success: var(--vela-green-300);
+  --vela-text-severity-success: var(--vela-green-300);
+  --vela-border-severity-success-indicator: var(--vela-green-500);
+
+  --vela-bg-severity-info: var(--vela-blue-950);
+  --vela-border-severity-info: var(--vela-blue-700);
+  --vela-signal-severity-info: var(--vela-blue-500);
+  --vela-icon-severity-info: var(--vela-blue-300);
+  --vela-text-severity-info: var(--vela-blue-300);
+  --vela-border-severity-info-indicator: var(--vela-blue-500);
+
+  --vela-bg-severity-warning: var(--vela-yellow-950);
+  --vela-border-severity-warning: var(--vela-yellow-700);
+  --vela-signal-severity-warning: var(--vela-yellow-500);
+  --vela-icon-severity-warning: var(--vela-yellow-300);
+  --vela-text-severity-warning: var(--vela-yellow-300);
+  --vela-border-severity-warning-indicator: var(--vela-yellow-500);
+
+  --vela-bg-severity-minor: var(--vela-orange-950);
+  --vela-border-severity-minor: var(--vela-orange-700);
+  --vela-signal-severity-minor: var(--vela-orange-500);
+  --vela-icon-severity-minor: var(--vela-orange-300);
+  --vela-text-severity-minor: var(--vela-orange-300);
+  --vela-border-severity-minor-indicator: var(--vela-orange-500);
+
+  --vela-bg-severity-major: var(--vela-red-950);
+  --vela-border-severity-major: var(--vela-red-700);
+  --vela-signal-severity-major: var(--vela-red-500);
+  --vela-icon-severity-major: var(--vela-red-300);
+  --vela-text-severity-major: var(--vela-red-300);
+  --vela-border-severity-major-indicator: var(--vela-red-500);
+
+  --vela-bg-severity-critical: var(--vela-critical-950);
+  --vela-border-severity-critical: var(--vela-critical-500);
+  --vela-signal-severity-critical: var(--vela-critical-300);
+  --vela-icon-severity-critical: var(--vela-critical-300);
+  --vela-text-severity-critical: var(--vela-critical-300);
+  --vela-border-severity-critical-indicator: var(--vela-critical-300);
+
+  /* ---- Risk (3) ---- */
+  --vela-bg-risk-low: var(--vela-green-950);
+  --vela-border-risk-low: var(--vela-green-700);
+  --vela-signal-risk-low: var(--vela-green-500);
+  --vela-icon-risk-low: var(--vela-green-300);
+  --vela-text-risk-low: var(--vela-green-300);
+  --vela-border-risk-low-indicator: var(--vela-green-500);
+
+  --vela-bg-risk-medium: var(--vela-yellow-950);
+  --vela-border-risk-medium: var(--vela-yellow-700);
+  --vela-signal-risk-medium: var(--vela-yellow-500);
+  --vela-icon-risk-medium: var(--vela-yellow-300);
+  --vela-text-risk-medium: var(--vela-yellow-300);
+  --vela-border-risk-medium-indicator: var(--vela-yellow-500);
+
+  --vela-bg-risk-high: var(--vela-red-950);
+  --vela-border-risk-high: var(--vela-red-700);
+  --vela-signal-risk-high: var(--vela-red-500);
+  --vela-icon-risk-high: var(--vela-red-300);
+  --vela-text-risk-high: var(--vela-red-300);
+  --vela-border-risk-high-indicator: var(--vela-red-500);
+
+  /* ---- Status (5 dots) ---- */
+  --vela-signal-status-unknown: var(--vela-grey-500);
+  --vela-signal-status-healthy: var(--vela-green-500);
+  --vela-signal-status-warning: var(--vela-yellow-500);
+  --vela-signal-status-medium: var(--vela-orange-500);
+  --vela-signal-status-unhealthy: var(--vela-red-500);
+
+  /* ---- Focus ---- */
+  --vela-focus-ring-color: var(--vela-primary-400);
+
+}
+
+/* ============================================================================
+   Base — applied only inside .vela-root so the kit never fights a host app's
+   global styles. Wrap your app (or any subtree) in <div class="vela-root">.
+   ============================================================================ */
+
+.vela-root {
+  font-family: var(--vela-font-family-primary);
+  font-size: var(--vela-text-body-size);
+  font-weight: var(--vela-text-body-weight);
+  line-height: var(--vela-text-body-line-height);
+  color: var(--vela-text-default);
+  background: var(--vela-bg-global);
+  -webkit-font-smoothing: antialiased;
+}
+
+.vela-root *,
+.vela-root *::before,
+.vela-root *::after {
+  box-sizing: border-box;
+}
+
+/* Every focusable element in the kit uses one focus treatment. */
+.vela-root :focus-visible {
+  outline: var(--vela-focus-ring-width) solid var(--vela-focus-ring-color);
+  outline-offset: var(--vela-focus-ring-offset);
+}
+
+/* Visually hidden, still read by screen readers. */
+.vela-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vela-root *,
+  .vela-root *::before,
+  .vela-root *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+/* ============================================================================
+   Typography utilities. Use the class that matches the ROLE, rather than
+   setting font properties by hand — that is what keeps the scale intact.
+   ============================================================================ */
+
+.vela-h1 { font-family: var(--vela-font-family-primary); font-size: var(--vela-text-h1-size); font-weight: var(--vela-text-h1-weight); line-height: var(--vela-text-h1-line-height); color: var(--vela-text-heading); margin: 0; }
+.vela-h2 { font-family: var(--vela-font-family-primary); font-size: var(--vela-text-h2-size); font-weight: var(--vela-text-h2-weight); line-height: var(--vela-text-h2-line-height); color: var(--vela-text-heading); margin: 0; }
+.vela-h3 { font-family: var(--vela-font-family-primary); font-size: var(--vela-text-h3-size); font-weight: var(--vela-text-h3-weight); line-height: var(--vela-text-h3-line-height); color: var(--vela-text-heading); margin: 0; }
+.vela-h4 { font-family: var(--vela-font-family-primary); font-size: var(--vela-text-h4-size); font-weight: var(--vela-text-h4-weight); line-height: var(--vela-text-h4-line-height); color: var(--vela-text-heading); margin: 0; }
+.vela-h5 { font-family: var(--vela-font-family-primary); font-size: var(--vela-text-h5-size); font-weight: var(--vela-text-h5-weight); line-height: var(--vela-text-h5-line-height); color: var(--vela-text-heading); margin: 0; }
+.vela-h6 { font-family: var(--vela-font-family-primary); font-size: var(--vela-text-h6-size); font-weight: var(--vela-text-h6-weight); line-height: var(--vela-text-h6-line-height); color: var(--vela-text-heading); margin: 0; }
+
+.vela-body { font-size: var(--vela-text-body-size); font-weight: var(--vela-text-body-weight); line-height: var(--vela-text-body-line-height); }
+.vela-meta { font-size: var(--vela-text-meta-size); font-weight: var(--vela-text-meta-weight); line-height: var(--vela-text-meta-line-height); letter-spacing: var(--vela-text-meta-tracking); color: var(--vela-text-de-emphasized); }
+.vela-link { color: var(--vela-text-link); font-weight: var(--vela-font-weight-semibold); text-decoration: none; }
+.vela-link:hover { text-decoration: underline; }
+
+/* ---------------------------------------------------------------- Button -- */
+.vela-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--vela-space-5);
+  width: auto;                       /* hugs content — never fix a button width */
+  border-radius: var(--vela-radius-4);
+  border: 1px solid transparent;
+  font-family: var(--vela-font-family-primary);
+  font-weight: var(--vela-font-weight-regular);
+  cursor: pointer;
+  text-decoration: none;
+  transition: background-color var(--vela-duration-fast) var(--vela-ease-standard),
+              border-color var(--vela-duration-fast) var(--vela-ease-standard),
+              color var(--vela-duration-fast) var(--vela-ease-standard);
+}
+
+/* -- sizes -- */
+.vela-btn--tiny    { height: var(--vela-control-height-24); padding: 0 var(--vela-space-10); font-size: var(--vela-text-button-tiny-size);    line-height: var(--vela-text-button-tiny-line-height); }
+.vela-btn--regular { height: var(--vela-control-height-35); padding: 0 var(--vela-space-15); font-size: var(--vela-text-button-regular-size); line-height: var(--vela-text-button-regular-line-height); }
+.vela-btn--large   { height: var(--vela-control-height-40); padding: 0 var(--vela-space-20); font-size: var(--vela-text-button-large-size);   line-height: var(--vela-text-button-large-line-height); }
+.vela-btn--huge    { height: var(--vela-control-height-60); padding: 0 var(--vela-space-30); font-size: var(--vela-text-button-huge-size);    line-height: var(--vela-text-button-huge-line-height); }
+
+.vela-btn__icon { display: inline-flex; flex: none; }
+.vela-btn--tiny .vela-btn__icon    { width: var(--vela-icon-12); height: var(--vela-icon-12); }
+.vela-btn--regular .vela-btn__icon,
+.vela-btn--large .vela-btn__icon,
+.vela-btn--huge .vela-btn__icon    { width: var(--vela-icon-16); height: var(--vela-icon-16); }
+.vela-btn__icon > svg { width: 100%; height: 100%; display: block; }
+
+/* -- primary -- */
+.vela-btn--primary.vela-btn--filled { background: var(--vela-btn-primary-bg); color: var(--vela-btn-primary-text); border-color: var(--vela-btn-primary-border); }
+.vela-btn--primary.vela-btn--filled:hover:not(:disabled) { background: var(--vela-btn-primary-hover-bg); border-color: var(--vela-btn-primary-hover-bg); }
+.vela-btn--primary.vela-btn--hollow { background: transparent; color: var(--vela-btn-hollow-primary-text); border-color: var(--vela-btn-hollow-primary-border); }
+.vela-btn--primary.vela-btn--hollow:hover:not(:disabled) { background: var(--vela-btn-hollow-hover-bg); }
+
+/* -- standard -- */
+.vela-btn--standard.vela-btn--filled { background: var(--vela-btn-standard-bg); color: var(--vela-btn-standard-text); border-color: var(--vela-btn-standard-border); }
+.vela-btn--standard.vela-btn--filled:hover:not(:disabled) { background: var(--vela-btn-standard-hover-bg); }
+.vela-btn--standard.vela-btn--hollow { background: transparent; color: var(--vela-btn-standard-text); border-color: var(--vela-btn-standard-border); }
+.vela-btn--standard.vela-btn--hollow:hover:not(:disabled) { background: var(--vela-bg-hover); }
+
+/* -- destructive -- */
+.vela-btn--destructive.vela-btn--filled { background: var(--vela-btn-destructive-bg); color: var(--vela-btn-destructive-text); border-color: var(--vela-btn-destructive-bg); }
+.vela-btn--destructive.vela-btn--filled:hover:not(:disabled) { background: var(--vela-btn-destructive-hover-bg); border-color: var(--vela-btn-destructive-hover-bg); }
+.vela-btn--destructive.vela-btn--hollow { background: transparent; color: var(--vela-btn-destructive-hollow-text); border-color: var(--vela-btn-destructive-hollow-text); }
+.vela-btn--destructive.vela-btn--hollow:hover:not(:disabled) { background: var(--vela-bg-severity-major); }
+
+/* -- text-link (primary only, tiny/regular only, never underlined) -- */
+.vela-btn--text-link { background: transparent; border-color: transparent; color: var(--vela-text-link); padding: 0; height: auto; text-decoration: none; }
+.vela-btn--text-link:hover:not(:disabled) { color: var(--vela-btn-primary-hover-bg); text-decoration: none; }
+
+/* -- disabled -- */
+.vela-btn:disabled { cursor: not-allowed; background: var(--vela-btn-disabled-bg); color: var(--vela-btn-disabled-text); border-color: var(--vela-border-inactive); }
+.vela-btn--hollow:disabled,
+.vela-btn--text-link:disabled { background: transparent; color: var(--vela-btn-disabled-text); border-color: var(--vela-border-inactive); }
+.vela-btn--text-link:disabled { border-color: transparent; }
+
+/* -- loading -- */
+.vela-btn[aria-busy="true"] { cursor: progress; }
+.vela-btn__spinner {
+  display: inline-block; flex: none;
+  width: var(--vela-icon-12); height: var(--vela-icon-12);
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--vela-radius-full);
+  animation: vela-spin 700ms linear infinite;
+}
+.vela-btn--regular .vela-btn__spinner,
+.vela-btn--large .vela-btn__spinner,
+.vela-btn--huge .vela-btn__spinner { width: var(--vela-icon-16); height: var(--vela-icon-16); }
+@keyframes vela-spin { to { transform: rotate(360deg); } }
+
+/* ---------------------------------------------------------------- Toggle -- */
+.vela-toggle { display: inline-flex; align-items: center; gap: var(--vela-space-10); cursor: pointer; }
+.vela-toggle--disabled { cursor: not-allowed; }
+.vela-toggle--left { flex-direction: row-reverse; }
+
+.vela-toggle__track {
+  position: relative; flex: none;
+  width: 34px; height: 20px;
+  background: var(--vela-toggle-off-bg);
+  border: none; border-radius: var(--vela-radius-full);
+  padding: 0; cursor: inherit;
+  transition: background-color var(--vela-duration-base) var(--vela-ease-standard);
+}
+.vela-toggle--tiny .vela-toggle__track { width: 26px; height: 15px; }
+
+.vela-toggle__knob {
+  position: absolute; top: 2px; left: 2px;
+  width: 16px; height: 16px;
+  background: var(--vela-toggle-knob);
+  border-radius: var(--vela-radius-full);
+  transition: transform var(--vela-duration-base) var(--vela-ease-standard);
+}
+.vela-toggle--tiny .vela-toggle__knob { width: 11px; height: 11px; }
+
+.vela-toggle__track[aria-checked='true'] { background: var(--vela-toggle-on-bg); }
+.vela-toggle__track[aria-checked='true'] .vela-toggle__knob { transform: translateX(14px); }
+.vela-toggle--tiny .vela-toggle__track[aria-checked='true'] .vela-toggle__knob { transform: translateX(11px); }
+
+.vela-toggle__track:disabled { background: var(--vela-border-inactive); cursor: not-allowed; }
+.vela-toggle__track:disabled .vela-toggle__knob { background: var(--vela-bg-global); }
+
+.vela-toggle__label { font-size: var(--vela-text-body-size); line-height: var(--vela-text-body-line-height); color: var(--vela-text-default); }
+.vela-toggle--disabled .vela-toggle__label { color: var(--vela-text-inactive); }
+
+/* ----------------------------------------------------------------- Input -- */
+.vela-field { display: flex; flex-direction: column; gap: var(--vela-space-5); }
+.vela-field__label { font-size: var(--vela-text-h6-size); font-weight: var(--vela-font-weight-semibold); line-height: var(--vela-text-h6-line-height); color: var(--vela-text-default); }
+.vela-field__required { color: var(--vela-text-error); margin-left: 2px; }
+
+.vela-input {
+  width: 100%;
+  background: var(--vela-control-bg);
+  color: var(--vela-text-default);
+  border: 1px solid var(--vela-control-border);
+  border-radius: var(--vela-radius-4);
+  font-family: var(--vela-font-family-primary);
+  font-size: var(--vela-text-body-size);
+  line-height: var(--vela-text-body-line-height);
+  transition: border-color var(--vela-duration-fast) var(--vela-ease-standard);
+}
+.vela-input--tiny    { height: var(--vela-control-height-25); padding: 0 var(--vela-space-5);  font-size: var(--vela-text-meta-size); }
+.vela-input--regular { height: var(--vela-control-height-26); padding: 0 var(--vela-space-10); }
+.vela-input--large   { height: var(--vela-control-height-35); padding: 0 var(--vela-space-10); }
+
+.vela-input::placeholder { color: var(--vela-control-placeholder); }
+.vela-input:hover:not(:disabled):not([aria-invalid='true']) { border-color: var(--vela-control-border-hover); }
+.vela-input:focus { border-color: var(--vela-control-border-active); }
+.vela-input[aria-invalid='true'] { border-color: var(--vela-control-border-error); }
+.vela-input:disabled { background: var(--vela-control-bg-disabled); color: var(--vela-text-inactive); border-color: var(--vela-border-inactive); cursor: not-allowed; }
+
+.vela-field__hint  { font-size: var(--vela-text-meta-size); line-height: var(--vela-text-meta-line-height); color: var(--vela-text-de-emphasized); }
+.vela-field__error { font-size: var(--vela-text-meta-size); line-height: var(--vela-text-meta-line-height); color: var(--vela-text-error); }
+
+/* -------------------------------------------------------- ContextualAlert -- */
+.vela-alert {
+  display: flex; align-items: flex-start; gap: var(--vela-space-10);
+  padding: var(--vela-space-10) var(--vela-space-15);
+  border: 1px solid; border-radius: var(--vela-radius-4);
+  font-size: var(--vela-text-body-size); line-height: var(--vela-text-body-line-height);
+}
+.vela-alert__icon  { flex: none; width: var(--vela-icon-16); height: var(--vela-icon-16); margin-top: 2px; }
+.vela-alert__body  { flex: 1 1 auto; min-width: 0; }
+.vela-alert__title { font-weight: var(--vela-font-weight-semibold); display: block; }
+.vela-alert__dismiss {
+  flex: none; background: none; border: none; padding: 2px; margin: -2px -4px -2px 0;
+  color: inherit; cursor: pointer; border-radius: var(--vela-radius-3);
+  width: var(--vela-icon-20); height: var(--vela-icon-20);
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.vela-alert__dismiss:hover { background: rgb(0 0 0 / 0.06); }
+
+.vela-alert--success  { background: var(--vela-bg-severity-success);  border-color: var(--vela-border-severity-success);  color: var(--vela-text-severity-success); }
+.vela-alert--info     { background: var(--vela-bg-severity-info);     border-color: var(--vela-border-severity-info);     color: var(--vela-text-severity-info); }
+.vela-alert--warning  { background: var(--vela-bg-severity-warning);  border-color: var(--vela-border-severity-warning);  color: var(--vela-text-severity-warning); }
+.vela-alert--minor    { background: var(--vela-bg-severity-minor);    border-color: var(--vela-border-severity-minor);    color: var(--vela-text-severity-minor); }
+.vela-alert--major    { background: var(--vela-bg-severity-major);    border-color: var(--vela-border-severity-major);    color: var(--vela-text-severity-major); }
+.vela-alert--critical { background: var(--vela-bg-severity-critical); border-color: var(--vela-border-severity-critical); color: var(--vela-text-severity-critical); }
+
+.vela-alert--success  .vela-alert__icon { color: var(--vela-icon-severity-success); }
+.vela-alert--info     .vela-alert__icon { color: var(--vela-icon-severity-info); }
+.vela-alert--warning  .vela-alert__icon { color: var(--vela-icon-severity-warning); }
+.vela-alert--minor    .vela-alert__icon { color: var(--vela-icon-severity-minor); }
+.vela-alert--major    .vela-alert__icon { color: var(--vela-icon-severity-major); }
+.vela-alert--critical .vela-alert__icon { color: var(--vela-icon-severity-critical); }
+
+/* ------------------------------------------------------- StatusIndicator -- */
+.vela-status { display: inline-flex; align-items: center; gap: var(--vela-space-5); }
+.vela-status__dot {
+  flex: none;
+  width: 10px; height: 10px;
+  border-radius: var(--vela-radius-full);   /* the ONLY component that uses radius-full */
+}
+.vela-status--small .vela-status__dot { width: 8px; height: 8px; }
+.vela-status__label { font-size: var(--vela-text-meta-size); line-height: var(--vela-text-meta-line-height); color: var(--vela-text-default); }
+
+.vela-status--unknown   .vela-status__dot { background: var(--vela-signal-status-unknown); }
+.vela-status--healthy   .vela-status__dot { background: var(--vela-signal-status-healthy); }
+.vela-status--warning   .vela-status__dot { background: var(--vela-signal-status-warning); }
+.vela-status--medium    .vela-status__dot { background: var(--vela-signal-status-medium); }
+.vela-status--unhealthy .vela-status__dot { background: var(--vela-signal-status-unhealthy); }
+
+/* ------------------------------------------------------------------ Tabs -- */
+.vela-tabs { display: flex; flex-direction: column; }
+
+.vela-tabs__list {
+  display: flex; align-items: stretch; gap: var(--vela-space-20);
+  border-bottom: 1px solid var(--vela-border-subtle);
+  overflow-x: auto;
+}
+
+.vela-tabs__trigger {
+  position: relative;
+  background: none; border: none; padding: var(--vela-space-10) 0;
+  margin-bottom: -1px;
+  font-family: var(--vela-font-family-primary);
+  font-size: var(--vela-text-tab-size);
+  line-height: var(--vela-text-tab-line-height);
+  font-weight: var(--vela-font-weight-regular);
+  color: var(--vela-text-de-emphasized);
+  cursor: pointer; white-space: nowrap;
+  border-bottom: 2px solid transparent;
+  transition: color var(--vela-duration-fast) var(--vela-ease-standard),
+              border-color var(--vela-duration-fast) var(--vela-ease-standard);
+}
+.vela-tabs--large .vela-tabs__trigger { font-size: var(--vela-text-tab-large-size); line-height: var(--vela-text-tab-large-line-height); }
+
+.vela-tabs__trigger:hover:not(:disabled) { color: var(--vela-text-default); }
+.vela-tabs__trigger[aria-selected='true'] { color: var(--vela-text-link); border-bottom-color: var(--vela-border-active); }
+.vela-tabs__trigger:disabled { color: var(--vela-text-inactive); cursor: not-allowed; }
+
+.vela-tabs__count { margin-left: var(--vela-space-5); font-weight: var(--vela-font-weight-semibold); }
+
+.vela-tabs__panel { padding-top: var(--vela-space-15); }
+.vela-tabs__panel:focus-visible { outline: var(--vela-focus-ring-width) solid var(--vela-focus-ring-color); outline-offset: var(--vela-focus-ring-offset); }