@dataengineeringformachinelearning/viking-ui 4.0.2 → 4.0.3

package/src/styles/_layout-enforcement.scss

@@ -53,7 +53,11 @@
   background: var(--viking-surface-recipe, var(--viking-surface));
   border: 1px solid var(--viking-border);
   border-radius: var(--viking-radius-lg);
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow: var(--viking-shadow-sm), inset 0 1px 0 color-mix(
+      in srgb,
+      var(--viking-white-pure) 6%,
+      transparent
+    );
   padding: var(--viking-card-padding);
   color: var(--viking-text);
   min-width: var(--viking-card-min-width);
@@ -63,6 +67,21 @@
   overflow: hidden;
   transition: var(--viking-transition-interactive);
 
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0 auto auto 0;
+    right: 0;
+    width: 1px;
+    height: 28px;
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--viking-metallic-100) 22%, transparent),
+      transparent
+    );
+    pointer-events: none;
+  }
+
   @include viking-surface-hairline;
 
   &.viking-card-compact,
@@ -70,11 +89,55 @@
     padding: var(--viking-card-padding-compact);
   }
 
-  &.viking-card-interactive:hover {
+  &.viking-card-interactive:hover,
+  &[data-interactive='true']:hover {
     border-color: var(--viking-accent-strong);
-    box-shadow: var(--viking-shadow-hover);
+    box-shadow: var(--viking-shadow-hover),
+      inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 6%, transparent);
     transform: translateY(var(--viking-state-hover-lift));
   }
+
+  &.viking-card-interactive:active,
+  &[data-interactive='true']:active {
+    transform: translateY(0) scale(var(--viking-state-active-scale));
+    box-shadow: inset 0 1px 2px
+        color-mix(in srgb, var(--viking-black) 24%, transparent),
+      var(--viking-shadow-sm);
+  }
+
+  &.viking-card-interactive:focus-visible,
+  &[data-interactive='true']:focus-visible {
+    outline: var(--viking-ring-width) solid var(--viking-ring);
+    outline-offset: var(--viking-ring-offset);
+  }
+
+  &.viking-card-loading {
+    pointer-events: none;
+  }
+}
+
+.viking-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--viking-space-2);
+  margin-bottom: var(--viking-space-2);
+}
+
+.viking-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--viking-space-2);
+  margin-top: var(--viking-space-2);
+}
+
+.viking-card-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--viking-space-1);
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 // ── Form width constraints ──────────────────────────────────────────────────

package/src/styles/components/icon-inline.scss

@@ -12,6 +12,19 @@ viking-icon,
   vertical-align: middle;
 }
 
+[data-viking-icon] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+[data-viking-icon] svg {
+  display: inline-block;
+  line-height: 1;
+}
+
 .nav-btn,
 .mobile-nav-btn,
 .auth-btn,
@@ -35,6 +48,8 @@ viking-icon,
 .nav-btn viking-app-icon,
 .nav-btn viking-icon,
 .mobile-nav-btn viking-app-icon,
+.nav-btn [data-viking-icon],
+.mobile-nav-btn [data-viking-icon],
 .auth-btn viking-app-icon,
 .mobile-auth-btn viking-app-icon {
   width: var(--viking-icon-size-md, var(--base-font-size));
@@ -42,6 +57,14 @@ viking-icon,
   align-self: center;
 }
 
+.nav-btn [data-viking-icon] svg,
+.mobile-nav-btn [data-viking-icon] svg,
+.auth-btn [data-viking-icon] svg,
+.mobile-auth-btn [data-viking-icon] svg {
+  width: var(--viking-icon-size-md, var(--base-font-size));
+  height: var(--viking-icon-size-md, var(--base-font-size));
+}
+
 .theme-toggle-btn viking-app-icon,
 .theme-toggle-btn viking-icon,
 .menu-toggle-btn viking-app-icon,

package/src/styles/components.scss

@@ -60,18 +60,76 @@ a {
 
 .viking-card {
   display: block;
+  position: relative;
+  overflow: hidden;
+  background-clip: padding-box;
+  isolation: isolate;
   padding: var(--viking-card-padding);
   border: 1px solid var(--viking-border);
   border-radius: var(--viking-radius-lg);
   background: var(--viking-surface-recipe);
   color: var(--viking-text);
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow: var(--viking-shadow-sm), inset 0 1px 0 color-mix(
+      in srgb,
+      var(--viking-white-pure) 6%,
+      transparent
+    );
+}
+
+.viking-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--viking-metallic-200) 22%, transparent),
+    transparent
+  );
+  pointer-events: none;
+}
+
+.viking-card::after {
+  content: "";
+  position: absolute;
+  inset: 0 auto auto 0;
+  right: 0;
+  width: 1px;
+  height: 28px;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--viking-metallic-100) 22%, transparent),
+    transparent
+  );
+  pointer-events: none;
 }
 
 .viking-card[data-compact="true"] {
   padding: var(--viking-card-padding-compact);
 }
 
+.viking-card[data-interactive="true"],
+.viking-card.viking-card-interactive {
+  cursor: pointer;
+}
+
+.viking-card[data-interactive="true"]:hover,
+.viking-card.viking-card-interactive:hover {
+  border-color: var(--viking-accent-strong);
+  box-shadow: var(--viking-shadow-hover),
+    inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 6%, transparent);
+  transform: translateY(var(--viking-state-hover-lift));
+}
+
+.viking-card[data-interactive="true"]:active,
+.viking-card.viking-card-interactive:active {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  box-shadow: inset 0 1px 2px
+      color-mix(in srgb, var(--viking-black) 24%, transparent),
+    var(--viking-shadow-sm);
+}
+
 .viking-button,
 .viking-btn {
   display: inline-flex;
@@ -81,19 +139,100 @@ a {
   gap: var(--viking-space-1);
   padding: 0 var(--viking-control-padding-x);
   border: 1px solid var(--viking-border-strong);
-  border-radius: var(--viking-radius);
+  border-radius: var(--viking-radius-lg);
   background: var(--viking-surface);
   color: var(--viking-text);
   box-shadow: var(--viking-shadow-sm);
+  background-clip: padding-box;
+  overflow: hidden;
+  position: relative;
   cursor: pointer;
-  font: inherit;
-  font-size: var(--viking-font-size-sm);
+  font-family: var(--viking-font-family);
+  font-size: var(--viking-font-size-ui, var(--viking-font-size-sm));
   font-weight: var(--viking-font-weight-semibold);
+  letter-spacing: var(--viking-letter-spacing-wide);
   line-height: var(--viking-line-height-snug);
   text-decoration: none;
   transition: var(--viking-transition-interactive);
 }
 
+.viking-button:disabled,
+.viking-btn:disabled,
+.viking-button[aria-busy='true'],
+.viking-btn[aria-busy='true'] {
+  opacity: var(--viking-state-disabled-opacity);
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+.viking-button[aria-busy='true'] .viking-btn-label,
+.viking-btn[aria-busy='true'] .viking-btn-label {
+  opacity: 0.85;
+  transform: translateY(1px);
+}
+
+.viking-button::before,
+.viking-btn::before {
+  content: "";
+  position: absolute;
+  inset: 1px 1px auto;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--viking-metallic-100) 45%, transparent),
+    transparent
+  );
+  pointer-events: none;
+  opacity: 0.82;
+  transition: var(--viking-transition-interactive);
+}
+
+.viking-button::after,
+.viking-btn::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--viking-metallic-100) 18%, transparent),
+    transparent
+  );
+  pointer-events: none;
+  opacity: 0.45;
+  transition: var(--viking-transition-interactive);
+}
+
+.viking-button viking-icon,
+.viking-button .viking-icon,
+.viking-button [data-viking-icon],
+.viking-btn viking-icon,
+.viking-btn .viking-icon,
+.viking-btn [data-viking-icon] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--viking-icon-size-md);
+  height: var(--viking-icon-size-md);
+  line-height: 1;
+  pointer-events: none;
+  flex: 0 0 auto;
+}
+
+.viking-button-label,
+.viking-btn-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--viking-space-1);
+  line-height: 1.2;
+  min-width: 0;
+  white-space: nowrap;
+}
+
 .viking-button:hover,
 .viking-btn:hover {
   border-color: color-mix(
@@ -101,18 +240,41 @@ a {
     var(--viking-accent) 45%,
     var(--viking-border-strong)
   );
+  box-shadow: var(--viking-shadow-md);
   transform: translateY(var(--viking-state-hover-lift));
 }
 
+.viking-button:active,
+.viking-btn:active {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+}
+
 .viking-button[data-variant="primary"],
 .viking-btn-primary {
-  border-color: color-mix(
-    in srgb,
-    var(--viking-accent) 82%,
-    var(--viking-black)
-  );
+  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
   background: var(--viking-accent);
   color: var(--viking-accent-content);
+  box-shadow: var(--viking-shadow-sm), inset 0 1px 0 color-mix(
+      in srgb,
+      var(--viking-white-pure) 8%,
+      transparent
+    );
+}
+
+.viking-button[data-variant="primary"]:hover,
+.viking-btn-primary:hover {
+  background: var(--viking-accent-hover);
+  border-color: var(--viking-accent-hover);
+  box-shadow: var(--viking-shadow-hover);
+  transform: translateY(var(--viking-state-hover-lift));
+}
+
+.viking-button[data-variant="primary"]:active,
+.viking-btn-primary:active {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent),
+    var(--viking-shadow-sm);
 }
 
 .viking-button[data-variant="secondary"],
@@ -126,13 +288,118 @@ a {
   color: var(--viking-accent-secondary-content);
 }
 
+.viking-button[data-variant="secondary"]:hover,
+.viking-btn-secondary:hover {
+  background: var(--viking-accent-secondary-hover);
+  border-color: var(--viking-accent-secondary-hover);
+  box-shadow: var(--viking-shadow-hover);
+  transform: translateY(var(--viking-state-hover-lift));
+}
+
+.viking-button[data-variant="secondary"]:active,
+.viking-btn-secondary:active {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  border-color: color-mix(
+    in srgb,
+    var(--viking-accent-secondary) 82%,
+    var(--viking-black)
+  );
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent),
+    var(--viking-shadow-sm);
+}
+
+.viking-button[data-variant="filled"],
+.viking-btn-filled {
+  background: var(--viking-surface-alt);
+  border-color: var(--viking-border);
+  color: var(--viking-text);
+  box-shadow: var(--viking-shadow-xs);
+}
+
+.viking-button[data-variant="filled"]:hover,
+.viking-btn-filled:hover {
+  border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border));
+  background: color-mix(in srgb, var(--viking-accent) 8%, var(--viking-surface-alt));
+  box-shadow: var(--viking-shadow-sm);
+  transform: translateY(var(--viking-state-hover-lift));
+}
+
+.viking-button[data-variant="filled"]:active,
+.viking-btn-filled:active {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  border-color: color-mix(in srgb, var(--viking-accent) 20%, var(--viking-border));
+  background: color-mix(in srgb, var(--viking-surface-alt) 84%, var(--viking-accent));
+  box-shadow: var(--viking-shadow-sm);
+}
+
+.viking-button[data-variant="danger"],
+.viking-btn-danger {
+  background: var(--viking-danger);
+  color: var(--viking-on-danger);
+  border-color: color-mix(in srgb, var(--viking-danger) 85%, var(--viking-black));
+  box-shadow: var(--viking-shadow-sm);
+}
+
+.viking-button[data-variant="danger"]:hover,
+.viking-btn-danger:hover {
+  background: color-mix(in srgb, var(--viking-danger) 88%, var(--viking-white));
+  border-color: color-mix(in srgb, var(--viking-danger) 92%, var(--viking-white));
+  box-shadow: var(--viking-shadow-hover);
+  transform: translateY(var(--viking-state-hover-lift));
+}
+
+.viking-button[data-variant="danger"]:active,
+.viking-btn-danger:active {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  border-color: color-mix(in srgb, var(--viking-danger) 72%, var(--viking-black));
+  background: color-mix(in srgb, var(--viking-danger) 84%, var(--viking-black));
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent),
+    var(--viking-shadow-sm);
+}
+
 .viking-button[data-variant="ghost"],
 .viking-btn-ghost {
+  background: transparent;
   border-color: transparent;
+  box-shadow: none;
+}
+
+.viking-button[data-variant="ghost"]:hover,
+.viking-btn-ghost:hover {
+  background: var(--viking-accent-soft);
+  color: var(--viking-accent-strong);
+}
+
+.viking-button[data-variant="ghost"]:active,
+.viking-btn-ghost:active {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  background: var(--viking-accent-soft);
+  color: var(--viking-accent-strong);
+}
+
+.viking-button[data-variant="subtle"],
+.viking-btn-subtle {
   background: transparent;
+  color: var(--viking-text-muted);
+  border-color: var(--viking-border-subtle);
   box-shadow: none;
 }
 
+.viking-button[data-variant="subtle"]:hover,
+.viking-btn-subtle:hover {
+  color: var(--viking-text);
+  background: var(--viking-accent-soft);
+  border-color: var(--viking-border-strong);
+}
+
+.viking-button[data-variant="subtle"]:active,
+.viking-btn-subtle:active {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  border-color: var(--viking-border);
+  background: color-mix(in srgb, var(--viking-accent-soft) 70%, var(--viking-surface));
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 24%, transparent);
+}
+
 .viking-field {
   display: grid;
   gap: var(--viking-space-1);

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/docs-showcase.scss

@@ -16,6 +16,22 @@
   flex-direction: column;
   gap: var(--viking-page-section-gap, var(--viking-space-5));
   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) {
@@ -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 {
@@ -90,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);
 }
@@ -115,6 +171,11 @@
   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 {
@@ -129,6 +190,7 @@
     transparent
   );
   pointer-events: none;
+  opacity: 0.7;
 }
 
 /* ── Toolbar ── */
@@ -252,6 +314,7 @@
   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) +