@dataengineeringformachinelearning/viking-ui 4.0.1 → 4.0.3

package/src/styles/viking-ui.scss

@@ -132,22 +132,22 @@
   --viking-control-height: var(--viking-touch-target-min, 44px);
   --viking-control-height-sm: 40px;
   --viking-control-height-xs: 24px;
-  --viking-control-padding-x: var(--space-2, var(--viking-space-2, 16px));
+  --viking-control-padding-x: var(--viking-space-2, 16px);
   --viking-btn-min-width: var(--btn-min-width, 120px);
 
-  /* Spacing — 4px grid with legacy aliases */
+  /* Spacing — canonical 4px grid. Legacy --space-* aliases map to these values. */
   --viking-grid-unit: 4px;
   --viking-space-0: 0;
-  --viking-space-half: var(--space-half, 4px);
-  --viking-space-1: var(--space-1, 8px);
-  --viking-space-1-5: var(--space-1-5, 12px);
-  --viking-space-2: var(--space-2, 16px);
-  --viking-space-3: var(--space-3, 24px);
-  --viking-space-4: var(--space-4, 32px);
-  --viking-space-5: var(--space-5, 40px);
-  --viking-space-6: var(--space-6, 48px);
-  --viking-space-7: var(--space-7, 56px);
-  --viking-space-8: var(--space-8, 64px);
+  --viking-space-half: 4px;
+  --viking-space-1: 8px;
+  --viking-space-1-5: 12px;
+  --viking-space-2: 16px;
+  --viking-space-3: 24px;
+  --viking-space-4: 32px;
+  --viking-space-5: 40px;
+  --viking-space-6: 48px;
+  --viking-space-7: 56px;
+  --viking-space-8: 64px;
 
   /* Chart axis labels */
   --viking-chart-axis-size: 12px;

package/src/web/card/viking-card-wc.ts

@@ -28,7 +28,7 @@ export class VikingCardWc extends HTMLElementBase {
   static readonly legacyTag = "viking-card-wc";
 
   static get observedAttributes(): string[] {
-    return ["compact", "interactive", "title"];
+    return ["compact", "interactive", "title", "loading"];
   }
 
   connectedCallback(): void {
@@ -48,6 +48,10 @@ export class VikingCardWc extends HTMLElementBase {
       "viking-card-interactive",
       this.hasAttribute("interactive"),
     );
+    this.classList.toggle(
+      "viking-card-loading",
+      this.hasAttribute("loading"),
+    );
 
     const title = this.getAttribute("title");
     if (title) {

package/src/web/core/styles.ts

@@ -39,7 +39,7 @@ export const VIKING_BUTTON_STYLES = `
   gap: var(--viking-space-1);
   min-height: var(--viking-control-height);
   padding: 0 var(--viking-control-padding-x);
-  border-radius: var(--viking-radius);
+  border-radius: var(--viking-radius-lg);
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
@@ -48,9 +48,29 @@ export const VIKING_BUTTON_STYLES = `
   min-width: var(--viking-btn-min-width, 120px);
   white-space: nowrap;
   position: relative;
+  background-clip: padding-box;
+  isolation: isolate;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   box-sizing: border-box;
+  overflow: hidden;
+  box-shadow: var(--viking-shadow-sm);
+}
+
+.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-btn:focus-visible {
@@ -67,6 +87,36 @@ export const VIKING_BUTTON_STYLES = `
   box-shadow: none !important;
 }
 
+.viking-btn[aria-busy='true']::before,
+.viking-btn[aria-busy='true'] .viking-btn-label {
+  opacity: 0.85;
+  transform: translateY(1px);
+}
+
+.viking-btn[aria-busy='true'] .viking-btn-spinner {
+  opacity: 0.85;
+}
+
+.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-btn-sm {
   min-height: var(--viking-control-height-sm);
   padding: 0 var(--viking-space-2);
@@ -131,6 +181,20 @@ export const VIKING_BUTTON_STYLES = `
   height: var(--viking-icon-size-md, 20px);
 }
 
+::slotted(viking-icon),
+::slotted(.viking-icon),
+::slotted([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;
+  flex-shrink: 0;
+  pointer-events: none;
+  flex: 0 0 auto;
+}
+
 .viking-btn-outline {
   background: var(--viking-surface);
   color: var(--viking-text);
@@ -145,6 +209,14 @@ export const VIKING_BUTTON_STYLES = `
   transform: translateY(var(--viking-state-hover-lift));
 }
 
+.viking-btn-outline:active:not(:disabled):not([aria-busy='true']) {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  box-shadow: inset 0 1px 2px
+      color-mix(in srgb, var(--viking-black) 28%, transparent),
+    var(--viking-shadow-sm);
+  border-color: var(--viking-border-strong);
+}
+
 .viking-btn-primary {
   background: var(--viking-accent);
   color: var(--viking-accent-content);
@@ -159,6 +231,14 @@ export const VIKING_BUTTON_STYLES = `
   transform: translateY(var(--viking-state-hover-lift));
 }
 
+.viking-btn-primary:active:not(:disabled):not([aria-busy='true']) {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  box-shadow: inset 0 1px 2px
+      color-mix(in srgb, var(--viking-black) 28%, transparent),
+    var(--viking-shadow-sm);
+  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
+}
+
 .viking-btn-secondary {
   background: var(--viking-accent-secondary);
   color: var(--viking-accent-secondary-content);
@@ -173,6 +253,14 @@ export const VIKING_BUTTON_STYLES = `
   transform: translateY(var(--viking-state-hover-lift));
 }
 
+.viking-btn-secondary:active:not(:disabled):not([aria-busy='true']) {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  box-shadow: inset 0 1px 2px
+      color-mix(in srgb, var(--viking-black) 28%, transparent),
+    var(--viking-shadow-sm);
+  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
+}
+
 .viking-btn-filled {
   background: var(--viking-surface-alt);
   color: var(--viking-text);
@@ -187,6 +275,13 @@ export const VIKING_BUTTON_STYLES = `
   transform: translateY(var(--viking-state-hover-lift));
 }
 
+.viking-btn-filled:active:not(:disabled):not([aria-busy='true']) {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  box-shadow: var(--viking-shadow-sm);
+  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));
+}
+
 .viking-btn-danger {
   background: var(--viking-danger);
   color: var(--viking-on-danger);
@@ -196,10 +291,20 @@ export const VIKING_BUTTON_STYLES = `
 
 .viking-btn-danger:hover:not(:disabled):not([aria-busy='true']) {
   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-btn-danger:active:not(:disabled):not([aria-busy='true']) {
+  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-btn-ghost {
   background: transparent;
   color: var(--viking-text);
@@ -213,6 +318,12 @@ export const VIKING_BUTTON_STYLES = `
   color: var(--viking-accent-strong);
 }
 
+.viking-btn-ghost:active:not(:disabled):not([aria-busy='true']) {
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  background: var(--viking-accent-soft);
+  color: var(--viking-accent-strong);
+}
+
 .viking-btn-subtle {
   background: transparent;
   color: var(--viking-text-muted);
@@ -227,6 +338,13 @@ export const VIKING_BUTTON_STYLES = `
   border-color: var(--viking-border-strong);
 }
 
+.viking-btn-subtle:active:not(:disabled):not([aria-busy='true']) {
+  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-btn:active:not(:disabled):not([aria-busy='true']) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
 }
@@ -234,7 +352,12 @@ export const VIKING_BUTTON_STYLES = `
 .viking-btn-label {
   display: inline-flex;
   align-items: center;
-  line-height: inherit;
+  gap: var(--viking-space-1);
+  line-height: 1.2;
+  min-width: 0;
+  justify-content: center;
+  text-align: center;
+  white-space: nowrap;
 }
 
 .viking-btn-spinner {

package/src/web/suite-header/viking-suite-header-wc.ts

@@ -204,6 +204,17 @@ const VIKING_SUITE_HEADER_STYLES = `
   text-transform: uppercase;
 }
 
+.suite-header__auth-icon,
+.suite-header__menu-icon,
+.suite-header__action-icon,
+.suite-header__avatar-icon,
+.suite-header__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
 .suite-header__auth-link:hover {
   background: var(--viking-accent-hover);
   color: var(--viking-accent-content);
@@ -356,6 +367,10 @@ viking-suite-command-palette {
   .suite-header__menu-button {
     display: none;
   }
+
+  .suite-header[data-menu-open='true'] .suite-header__mobile {
+    display: none;
+  }
 }
 `;