@dataengineeringformachinelearning/viking-ui 4.0.2 → 4.0.4

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;
   }
 }
 
@@ -247,10 +247,63 @@
   flex-shrink: 1;
   min-width: 0;
   white-space: nowrap;
+  border-bottom: 1px solid transparent;
+  box-shadow: none;
+}
+
+.navbar-search::part(control),
+.menu-toggle-btn::part(control),
+.theme-toggle-btn::part(control),
+.navbar-search-trigger::part(control),
+.navbar-search-mobile-btn::part(control),
+.auth-btn::part(control),
+.mobile-auth-btn::part(control),
+.auth-signout-btn::part(control),
+.navbar .theme-toggle-btn::part(control),
+.navbar .menu-toggle-btn::part(control),
+.navbar .navbar-search-trigger::part(control),
+.navbar .navbar-search-mobile-btn::part(control),
+viking-button-wc.menu-toggle-btn::part(control),
+viking-button-wc.theme-toggle-btn::part(control),
+viking-button-wc.navbar-search-trigger::part(control),
+viking-button-wc.mobile-auth-btn::part(control),
+viking-button-wc.auth-btn::part(control),
+viking-button-wc.auth-signout-btn::part(control) {
+  border-color: inherit;
+}
+
+.nav-btn:focus-visible,
+.mobile-nav-btn:focus-visible,
+.auth-btn:focus-visible,
+.auth-signout-btn:focus-visible,
+.menu-toggle-btn:focus-visible,
+.theme-toggle-btn:focus-visible,
+.navbar-search-trigger:focus-visible,
+.navbar-search-mobile-btn:focus-visible,
+.mobile-auth-btn:focus-visible {
+  outline: var(--viking-ring-width, 2px) solid
+    var(--viking-ring, var(--focus-ring-color));
+  outline-offset: var(--viking-ring-offset, 2px);
+}
+
+.viking-button-wc.nav-btn:focus-visible::part(control),
+.viking-button-wc.auth-btn:focus-visible::part(control),
+.viking-button-wc.auth-signout-btn:focus-visible::part(control),
+.viking-button-wc.menu-toggle-btn:focus-visible::part(control),
+.viking-button-wc.theme-toggle-btn:focus-visible::part(control),
+.viking-button-wc.navbar-search-trigger:focus-visible::part(control),
+.viking-button-wc.navbar-search-mobile-btn:focus-visible::part(control) {
+  outline: var(--viking-ring-width, 2px) solid var(--viking-ring, var(--focus-ring-color));
+  outline-offset: var(--viking-ring-offset, 2px);
 }
 
 .nav-btn[hidden],
-.mobile-nav-btn[hidden] {
+.mobile-nav-btn[hidden],
+.auth-btn[hidden],
+.auth-signout-btn[hidden],
+.mobile-auth-btn[hidden],
+viking-button-wc[hidden],
+viking-button[hidden] {
   display: none !important;
 }
 
@@ -304,35 +357,9 @@
   height: 16px;
 }
 
-.nav-btn::before {
-  content: '';
-  position: absolute;
-  inset: auto 16px 0;
-  height: 2px;
-  border-radius: 2px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    color-mix(in srgb, var(--viking-accent) 80%, transparent),
-    transparent
-  );
-  opacity: 0;
-  transform: scaleX(0.4);
-  transition:
-    opacity 0.25s ease,
-    transform 0.25s ease;
-  pointer-events: none;
-}
-
 .nav-btn:hover {
   color: var(--text-color) !important;
   background-color: color-mix(in srgb, var(--viking-accent) 10%, transparent) !important;
-  transform: translateY(-1px);
-}
-
-.nav-btn:hover::before {
-  opacity: 1;
-  transform: scaleX(1);
 }
 
 html[data-theme='light'] {
@@ -364,11 +391,6 @@ html[data-theme='light'] {
     0 0 12px color-mix(in srgb, var(--viking-accent) 18%, transparent) !important;
 }
 
-.nav-btn.active::before {
-  opacity: 1;
-  transform: scaleX(1);
-}
-
 .navbar .theme-toggle-btn,
 .theme-toggle-btn {
   @include viking-navbar-utility-btn;
@@ -488,7 +510,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 +521,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 +561,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;
@@ -536,6 +588,8 @@ button.auth-btn {
   display: none;
   flex-direction: column;
   position: absolute;
+  visibility: hidden;
+  pointer-events: none;
   top: var(--viking-navbar-height, var(--navbar-height, 64px));
   left: 0;
   right: 0;
@@ -554,12 +608,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%;
   }
@@ -577,6 +636,7 @@ button.auth-btn {
   opacity: 1;
   pointer-events: auto;
   display: flex;
+  visibility: visible;
 }
 
 .mobile-nav-btn {
@@ -694,6 +754,11 @@ button.auth-btn {
   }
 }
 
+.navbar [hidden],
+.mobile-menu [hidden] {
+  display: none !important;
+}
+
 .algolia-autocomplete-host {
   display: none;
   font-family: var(--viking-font-family, inherit);
@@ -1134,6 +1199,15 @@ button.auth-btn {
 
   .mobile-menu:not(.open) {
     display: none !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+  }
+
+  .mobile-menu.open {
+    display: none !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    visibility: hidden !important;
   }
 
   .navbar-right {

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) +