@dataengineeringformachinelearning/viking-ui 4.0.1 → 4.0.3

package/src/styles/static-navbar.scss

@@ -216,7 +216,7 @@
 
   viking-button,
   viking-button-wc {
-    min-width: auto;
+    min-width: var(--viking-btn-min-width, 120px) !important;
   }
 }
 
@@ -488,7 +488,7 @@ button.auth-btn {
   align-items: center !important;
   justify-content: center !important;
   gap: var(--viking-space-1, 8px) !important;
-  min-width: auto !important;
+  min-width: var(--viking-btn-min-width, 120px) !important;
   height: var(--viking-control-height, 40px) !important;
   min-height: var(--viking-control-height, 40px) !important;
   padding: 0 var(--viking-space-2, 16px) !important;
@@ -499,6 +499,23 @@ button.auth-btn {
   line-height: 1 !important;
 }
 
+.auth-btn::part(control),
+viking-button.auth-btn::part(control),
+viking-button.auth-btn viking-button-wc::part(control),
+viking-button.auth-btn viking-button-wc,
+viking-button-wc.auth-btn::part(control),
+.auth-btn.viking-full::part(control) {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: var(--viking-space-1, 8px) !important;
+  min-width: var(--viking-btn-min-width, 120px) !important;
+  min-height: var(--viking-control-height, 40px) !important;
+  height: var(--viking-control-height, 40px) !important;
+  padding: 0 var(--viking-space-2, 16px) !important;
+  box-sizing: border-box !important;
+}
+
 .auth-signout-btn {
   background: transparent !important;
   color: var(--text-muted) !important;
@@ -522,6 +539,19 @@ button.auth-btn {
   display: none !important;
 }
 
+.auth-btn [data-viking-icon],
+.auth-btn [data-viking-icon] svg,
+.auth-signout-btn [data-viking-icon],
+.auth-signout-btn [data-viking-icon] svg {
+  margin: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 16px !important;
+  height: 16px !important;
+  line-height: 1 !important;
+}
+
 .auth-signout-btn:hover {
   color: var(--text-color) !important;
   border-color: var(--viking-crimson-500) !important;
@@ -554,12 +584,17 @@ button.auth-btn {
   z-index: 49;
   gap: var(--viking-space-half, 4px);
 
-  viking-button {
+  viking-button,
+  viking-button-wc,
+  .mobile-auth-btn {
     width: 100%;
   }
 
   .mobile-auth-btn,
-  .auth-signout-btn {
+  .auth-signout-btn,
+  .mobile-auth-btn::part(control),
+  .mobile-auth-btn.auth-btn::part(control),
+  .mobile-auth-btn.auth-signout-btn::part(control) {
     flex-shrink: 0;
     width: 100%;
   }
@@ -1136,6 +1171,10 @@ button.auth-btn {
     display: none !important;
   }
 
+  .mobile-menu.open {
+    display: none !important;
+  }
+
   .navbar-right {
     gap: var(--viking-space-2, 16px);
   }

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,28 @@
   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);
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background:
+      linear-gradient(
+        90deg,
+        transparent,
+        color-mix(in srgb, var(--viking-accent) 10%, transparent),
+        transparent
+      );
+    opacity: 0.03;
+  }
 }
 
 @media (min-width: 768px) {
   .showcase-page {
-    padding-block: var(--viking-space-5);
+    padding-block: var(--viking-space-8);
   }
 }
 
@@ -29,6 +45,21 @@
   display: grid;
   gap: var(--viking-space-5);
   align-items: center;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: auto 0 -2px 0;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      color-mix(in srgb, var(--viking-accent) 35%, transparent),
+      transparent
+    );
+    opacity: 0.4;
+  }
 }
 
 @media (min-width: 960px) {
@@ -42,6 +73,20 @@
   display: flex;
   flex-direction: column;
   gap: var(--viking-space-3);
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: -10px;
+    left: 0;
+    width: 22px;
+    height: 14px;
+    border-top: 1px solid color-mix(in srgb, var(--viking-accent) 40%, transparent);
+    border-left: 1px solid color-mix(in srgb, var(--viking-accent) 24%, transparent);
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }
 
 .showcase-hero-badge {
@@ -54,6 +99,18 @@
   border-radius: var(--viking-radius-pill);
   background: var(--viking-surface);
   box-shadow: var(--viking-shadow-sm);
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 1px;
+    right: 1px;
+    top: 0;
+    height: 1px;
+    background: color-mix(in srgb, var(--viking-accent) 35%, transparent);
+    opacity: 0.55;
+  }
 }
 
 .showcase-hero-badge-dot {
@@ -71,10 +128,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);
   }
 }
 
@@ -88,7 +147,6 @@
   margin: 0;
   font-size: clamp(2rem, 4.5vw, 3rem);
   font-weight: var(--viking-font-weight-bold, 800);
-  line-height: var(--viking-line-height-tight);
   letter-spacing: var(--viking-letter-spacing-tight);
   color: var(--viking-text);
 }
@@ -113,10 +171,15 @@
   gap: var(--viking-space-2);
   position: relative;
   overflow: hidden;
+  border: 1px solid var(--viking-border);
+  border-radius: var(--viking-radius-lg);
+  padding: var(--viking-space-2);
+  background: var(--viking-surface);
+  box-shadow: var(--viking-shadow-sm);
 }
 
 .showcase-hero-panel::before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0 0 auto;
   height: 1px;
@@ -127,6 +190,7 @@
     transparent
   );
   pointer-events: none;
+  opacity: 0.7;
 }
 
 /* ── Toolbar ── */
@@ -155,7 +219,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 +269,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 +281,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 +297,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);
 }
 
@@ -241,20 +314,29 @@
   flex-direction: column;
   gap: var(--viking-space-4);
   padding-block: var(--viking-space-5);
+  border-top: 1px solid color-mix(in srgb, var(--viking-accent) 20%, transparent);
   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 +385,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 +442,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 +458,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 +494,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 +751,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 +764,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 +774,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 +836,7 @@
 }
 
 .landing-preview-panel::before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0 0 auto 0;
   height: 1px;
@@ -754,7 +852,7 @@
 .landing-preview-form {
   display: flex;
   flex-direction: column;
-  gap: var(--viking-space-2);
+  gap: var(--viking-space-3);
 }
 
 .landing-preview-toolbar {
@@ -766,7 +864,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 +1063,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 {