@dataengineeringformachinelearning/viking-ui 4.0.0 → 4.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataengineeringformachinelearning/viking-ui",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Universal Viking-UI design system for Astro, Angular, and Django.",
   "license": "Apache-2.0",
   "type": "module",

package/src/lib/auth-panel/auth-panel.ts

@@ -78,16 +78,16 @@ import { VikingSeparator } from "../separator/separator";
       :host {
         display: block;
         width: 100%;
-        max-width: 480px;
+        max-width: 520px;
         margin-inline: auto;
         font-family: var(--viking-font-family);
       }
       .viking-auth-panel {
         display: flex;
         flex-direction: column;
-        gap: var(--viking-space-3);
+        gap: var(--viking-space-4);
         width: 100%;
-        padding: var(--viking-space-3);
+        padding: var(--viking-card-padding);
         background: var(--viking-surface);
         border: 1px solid var(--viking-border);
         border-radius: var(--viking-radius-lg);
@@ -111,8 +111,8 @@ import { VikingSeparator } from "../separator/separator";
       .viking-auth-header {
         display: flex;
         flex-direction: column;
-        gap: var(--viking-space-1);
-        margin-bottom: var(--viking-space-1);
+        gap: var(--viking-space-2);
+        margin-bottom: var(--viking-space-2);
       }
       .viking-auth-tag-row {
         display: flex;
@@ -158,13 +158,13 @@ import { VikingSeparator } from "../separator/separator";
       .viking-auth-body {
         display: flex;
         flex-direction: column;
-        gap: var(--viking-space-2);
+        gap: var(--viking-space-3);
         width: 100%;
       }
       :host ::ng-deep .viking-auth-stack {
         display: flex;
         flex-direction: column;
-        gap: var(--viking-space-2);
+        gap: var(--viking-space-3);
         width: 100%;
       }
       :host ::ng-deep .viking-auth-stack viking-callout {
@@ -174,13 +174,13 @@ import { VikingSeparator } from "../separator/separator";
       :host ::ng-deep .login-form {
         display: flex;
         flex-direction: column;
-        gap: var(--viking-space-2);
+        gap: var(--viking-space-3);
         width: 100%;
       }
       .viking-auth-social {
         display: flex;
         flex-direction: column;
-        gap: var(--viking-space-2);
+        gap: var(--viking-space-3);
         width: 100%;
       }
       .viking-auth-footer {

package/src/styles/surfaces/backend.scss

@@ -14,7 +14,13 @@ body {
 body {
   background-color: var(--viking-bg, var(--bg-color));
   color: var(--viking-text, var(--text-color));
-  font-family: var(--viking-font-family, "Inter", ui-sans-serif, system-ui, sans-serif);
+  font-family: var(
+    --viking-font-family,
+    "Inter",
+    ui-sans-serif,
+    system-ui,
+    sans-serif
+  );
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -23,7 +29,7 @@ body {
 .backend-landing-shell {
   display: flex;
   flex-direction: column;
-  gap: var(--viking-page-section-gap, var(--viking-space-7, 56px));
+  gap: var(--viking-space-8);
   min-height: calc(100vh - var(--viking-navbar-height, 64px));
 }
 
@@ -32,6 +38,7 @@ body {
   align-items: center;
   max-width: var(--viking-content-readable-max-width, 48rem);
   margin-inline: auto;
+  padding-block: var(--viking-space-7);
   box-shadow: var(--viking-shadow-sm);
 }
 
@@ -51,13 +58,16 @@ body {
 
 @keyframes backend-status-pulse {
   0% {
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--viking-success) 70%, transparent);
+    box-shadow: 0 0 0 0
+      color-mix(in srgb, var(--viking-success) 70%, transparent);
   }
   70% {
-    box-shadow: 0 0 0 var(--viking-space-1) color-mix(in srgb, var(--viking-success) 0%, transparent);
+    box-shadow: 0 0 0 var(--viking-space-1)
+      color-mix(in srgb, var(--viking-success) 0%, transparent);
   }
   100% {
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--viking-success) 0%, transparent);
+    box-shadow: 0 0 0 0
+      color-mix(in srgb, var(--viking-success) 0%, transparent);
   }
 }
 
@@ -68,28 +78,28 @@ body {
 
 .backend-hero-cta {
   justify-content: center;
-  margin-top: var(--viking-space-1);
+  margin-top: var(--viking-space-3);
 }
 
 /* ── Feature cards (VikingCard WC + icon tile) ─────────────────────────────── */
 .backend-feature-grid {
   display: flex;
   flex-direction: column;
-  gap: var(--viking-space-3);
+  gap: var(--viking-space-4);
   width: 100%;
 }
 
 .backend-feature-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
-  gap: var(--viking-space-3);
+  gap: var(--viking-space-4);
   width: 100%;
 }
 
 .backend-feature-card-body {
   display: flex;
   flex-direction: column;
-  gap: var(--viking-space-2);
+  gap: var(--viking-space-3);
 }
 
 .backend-feature-icon {
@@ -119,7 +129,9 @@ body.backend-404 .backend-error-logo {
   max-width: 100px;
   width: 100%;
   margin: 0 auto var(--viking-space-3);
-  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--viking-black) 15%, transparent));
+  filter: drop-shadow(
+    0 4px 12px color-mix(in srgb, var(--viking-black) 15%, transparent)
+  );
 }
 
 body.backend-404 .backend-error-card .viking-heading-xl {

package/src/styles/surfaces/docs-shell.scss

@@ -114,9 +114,14 @@
   justify-content: center;
   width: var(--viking-control-height, 40px);
   height: var(--viking-control-height, 40px);
-  border: 1px solid color-mix(in srgb, var(--viking-accent) 32%, var(--viking-border-strong));
+  border: 1px solid
+    color-mix(in srgb, var(--viking-accent) 32%, var(--viking-border-strong));
   border-radius: var(--viking-radius);
-  background: color-mix(in srgb, var(--viking-accent) 8%, var(--viking-surface));
+  background: color-mix(
+    in srgb,
+    var(--viking-accent) 8%,
+    var(--viking-surface)
+  );
   color: var(--viking-accent-strong, var(--viking-teal-400));
   box-shadow: var(--viking-shadow-sm);
   cursor: pointer;
@@ -125,7 +130,11 @@
 
 .theme-toggle-btn:hover {
   border-color: var(--viking-accent-strong, var(--viking-teal-400));
-  background: color-mix(in srgb, var(--viking-accent) 14%, var(--viking-surface));
+  background: color-mix(
+    in srgb,
+    var(--viking-accent) 14%,
+    var(--viking-surface)
+  );
   color: var(--viking-accent-strong, var(--viking-teal-400));
   box-shadow: var(--viking-shadow-md);
 }
@@ -135,10 +144,18 @@
   outline-offset: 2px;
 }
 
-html[data-theme='dark'] .theme-icon-sun { display: block; }
-html[data-theme='dark'] .theme-icon-moon { display: none; }
-html[data-theme='light'] .theme-icon-sun { display: none; }
-html[data-theme='light'] .theme-icon-moon { display: block; }
+html[data-theme="dark"] .theme-icon-sun {
+  display: block;
+}
+html[data-theme="dark"] .theme-icon-moon {
+  display: none;
+}
+html[data-theme="light"] .theme-icon-sun {
+  display: none;
+}
+html[data-theme="light"] .theme-icon-moon {
+  display: block;
+}
 
 /* ── Horizontal sub-navigation (replaces sidebar) ── */
 .showcase-subnav {
@@ -191,8 +208,16 @@ html[data-theme='light'] .theme-icon-moon { display: block; }
 
 .showcase-subnav-link.is-active {
   color: var(--viking-accent);
-  border-color: color-mix(in srgb, var(--viking-accent) 28%, var(--viking-border));
-  background: color-mix(in srgb, var(--viking-accent) 10%, var(--viking-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--viking-accent) 28%,
+    var(--viking-border)
+  );
+  background: color-mix(
+    in srgb,
+    var(--viking-accent) 10%,
+    var(--viking-surface)
+  );
 }
 
 .docs-layout {
@@ -213,12 +238,12 @@ html[data-theme='light'] .theme-icon-moon { display: block; }
 
 .docs-content {
   flex: 1;
-  padding: var(--viking-space-4) var(--viking-space-2);
+  padding: 0;
 }
 
 @media (min-width: 768px) {
   .docs-content {
-    padding: var(--viking-space-5) var(--viking-space-4);
+    padding: 0;
   }
 }
 
@@ -394,19 +419,19 @@ html[data-theme='light'] .theme-icon-moon { display: block; }
 .contribute-steps {
   display: flex;
   flex-direction: column;
-  gap: var(--viking-space-2);
+  gap: var(--viking-page-stack-gap);
   counter-reset: step;
 }
 
 .contribute-step {
-  padding: var(--viking-space-3);
+  padding: var(--viking-card-padding);
   border: 1px solid var(--viking-border);
   border-radius: var(--viking-radius-lg);
-  background: var(--viking-surface);
+  background: var(--viking-surface-recipe, var(--viking-surface));
 }
 
 .contribute-step h3::before {
   counter-increment: step;
-  content: counter(step, decimal-leading-zero) ' — ';
+  content: counter(step, decimal-leading-zero) " — ";
   color: var(--viking-accent);
 }

package/src/styles/surfaces/docs-showcase.scss

@@ -15,12 +15,12 @@
   display: flex;
   flex-direction: column;
   gap: var(--viking-page-section-gap, var(--viking-space-5));
-  padding-block: var(--viking-space-4);
+  padding-block: var(--viking-space-6);
 }
 
 @media (min-width: 768px) {
   .showcase-page {
-    padding-block: var(--viking-space-5);
+    padding-block: var(--viking-space-8);
   }
 }
 
@@ -71,10 +71,12 @@
 @keyframes showcasePulseDot {
   0%,
   100% {
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--viking-accent) 60%, transparent);
+    box-shadow: 0 0 0 0
+      color-mix(in srgb, var(--viking-accent) 60%, transparent);
   }
   50% {
-    box-shadow: 0 0 0 6px color-mix(in srgb, var(--viking-accent) 0%, transparent);
+    box-shadow: 0 0 0 6px
+      color-mix(in srgb, var(--viking-accent) 0%, transparent);
   }
 }
 
@@ -116,7 +118,7 @@
 }
 
 .showcase-hero-panel::before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0 0 auto;
   height: 1px;
@@ -155,7 +157,9 @@
 /* ── Category bar (sticky horizontal nav) ── */
 .showcase-category-bar {
   position: sticky;
-  top: calc(var(--viking-navbar-height, 64px) + var(--showcase-subnav-height, 52px));
+  top: calc(
+    var(--viking-navbar-height, 64px) + var(--showcase-subnav-height, 52px)
+  );
   z-index: 40;
   border-block: 1px solid var(--viking-border);
   background: color-mix(in srgb, var(--viking-bg) 94%, transparent);
@@ -203,7 +207,11 @@
 
 .showcase-category-chip.is-active {
   border-color: var(--viking-accent);
-  background: color-mix(in srgb, var(--viking-accent) 10%, var(--viking-surface));
+  background: color-mix(
+    in srgb,
+    var(--viking-accent) 10%,
+    var(--viking-surface)
+  );
   color: var(--viking-accent);
 }
 
@@ -211,10 +219,13 @@
 .showcase-category {
   display: flex;
   flex-direction: column;
-  gap: var(--viking-space-3);
-  padding: var(--viking-space-4) 0;
+  gap: var(--viking-space-4);
+  padding: var(--viking-space-6) 0;
   border-bottom: 1px solid var(--viking-border);
-  scroll-margin-top: calc(var(--viking-navbar-height, 64px) + var(--showcase-subnav-height, 52px) + 56px);
+  scroll-margin-top: calc(
+    var(--viking-navbar-height, 64px) + var(--showcase-subnav-height, 52px) +
+      56px
+  );
 }
 
 .showcase-category:last-child {
@@ -224,8 +235,8 @@
 .showcase-category-header {
   display: flex;
   flex-direction: column;
-  gap: var(--viking-space-1);
-  padding-bottom: var(--viking-space-2);
+  gap: var(--viking-space-2);
+  padding-bottom: var(--viking-space-3);
   border-bottom: 1px solid var(--viking-border-subtle);
 }
 
@@ -242,19 +253,27 @@
   gap: var(--viking-space-4);
   padding-block: var(--viking-space-5);
   border-bottom: 1px solid var(--viking-border);
-  scroll-margin-top: calc(var(--viking-navbar-height, 64px) + var(--showcase-subnav-height, 52px) + 56px);
+  scroll-margin-top: calc(
+    var(--viking-navbar-height, 64px) + var(--showcase-subnav-height, 52px) +
+      56px
+  );
   position: relative;
 }
 
 .showcase-section::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 80px;
   height: 1px;
-  background: linear-gradient(90deg, transparent, var(--viking-accent), transparent);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--viking-accent),
+    transparent
+  );
   opacity: 0.25;
 }
 
@@ -303,9 +322,12 @@
 .component-showcase-card {
   display: flex;
   flex-direction: column;
-  gap: var(--viking-space-2);
+  gap: var(--viking-space-3);
   padding: var(--viking-card-padding);
-  scroll-margin-top: calc(var(--viking-navbar-height, 64px) + var(--showcase-subnav-height, 52px) + 56px);
+  scroll-margin-top: calc(
+    var(--viking-navbar-height, 64px) + var(--showcase-subnav-height, 52px) +
+      56px
+  );
   transition:
     transform var(--viking-duration-normal) var(--viking-ease-out),
     border-color var(--viking-duration-normal) var(--viking-ease-out),
@@ -357,10 +379,14 @@
 
 .component-showcase-preview {
   padding: var(--viking-space-3);
-  background: color-mix(in srgb, var(--viking-bg) 30%, var(--viking-surface-alt));
+  background: color-mix(
+    in srgb,
+    var(--viking-bg) 30%,
+    var(--viking-surface-alt)
+  );
   border: 1px solid var(--viking-border-subtle);
   border-radius: var(--viking-radius-lg);
-  min-height: 5rem;
+  min-height: 7rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -369,14 +395,18 @@
 }
 
 .component-showcase-preview::before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0 0 auto;
   height: 1px;
   background: linear-gradient(
     90deg,
     transparent,
-    color-mix(in srgb, var(--viking-metallic-200, var(--viking-border)) 22%, transparent),
+    color-mix(
+      in srgb,
+      var(--viking-metallic-200, var(--viking-border)) 22%,
+      transparent
+    ),
     transparent
   );
   pointer-events: none;
@@ -401,7 +431,11 @@
 .component-framework-chip {
   padding: var(--viking-space-half) var(--viking-space-1);
   border-radius: var(--viking-radius-sm);
-  background: color-mix(in srgb, var(--viking-accent) 8%, var(--viking-surface-alt));
+  background: color-mix(
+    in srgb,
+    var(--viking-accent) 8%,
+    var(--viking-surface-alt)
+  );
   border: 1px solid color-mix(in srgb, var(--viking-accent) 15%, transparent);
   font-size: var(--viking-font-size-2xs, var(--viking-font-size-xs));
   font-weight: var(--viking-font-weight-medium);
@@ -654,7 +688,8 @@
   height: var(--viking-space-1);
   border-radius: 50%;
   background: var(--viking-accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--viking-accent) 30%, transparent);
+  box-shadow: 0 0 0 2px
+    color-mix(in srgb, var(--viking-accent) 30%, transparent);
 }
 
 .landing-hero-actions {
@@ -666,7 +701,7 @@
 .landing-stats {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: var(--viking-space-2);
+  gap: var(--viking-space-3);
 }
 
 @media (min-width: 640px) {
@@ -676,7 +711,7 @@
 }
 
 .landing-stat {
-  padding: var(--viking-space-2);
+  padding: var(--viking-card-padding-compact);
   border: 1px solid var(--viking-border);
   border-radius: var(--viking-radius);
   background: var(--viking-surface-recipe, var(--viking-surface));
@@ -738,7 +773,7 @@
 }
 
 .landing-preview-panel::before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0 0 auto 0;
   height: 1px;
@@ -754,7 +789,7 @@
 .landing-preview-form {
   display: flex;
   flex-direction: column;
-  gap: var(--viking-space-2);
+  gap: var(--viking-space-3);
 }
 
 .landing-preview-toolbar {
@@ -766,7 +801,7 @@
 .landing-preview-grid {
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--viking-space-2);
+  gap: var(--viking-space-3);
 }
 
 @media (min-width: 560px) {
@@ -965,7 +1000,11 @@
   gap: var(--viking-space-1);
   padding: var(--viking-space-2);
   border-bottom: 1px solid var(--viking-border);
-  background: color-mix(in srgb, var(--viking-bg) 26%, var(--viking-surface-raised));
+  background: color-mix(
+    in srgb,
+    var(--viking-bg) 26%,
+    var(--viking-surface-raised)
+  );
 }
 
 .showcase-search-icon {