@dataengineeringformachinelearning/viking-ui 4.0.1 → 4.0.3

package/src/styles/_buttons.scss

@@ -15,7 +15,7 @@
   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;
@@ -24,8 +24,12 @@
   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;
+  overflow: hidden;
+  box-shadow: var(--viking-shadow-sm);
 
   &:focus-visible {
     outline: var(--viking-ring-width) solid var(--viking-ring);
@@ -33,6 +37,46 @@
     z-index: 1;
   }
 
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 1px 1px auto 1px;
+    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);
+  }
+
+  &::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);
+  }
+
   &:disabled,
   &[aria-busy='true'] {
     opacity: var(--viking-state-disabled-opacity);
@@ -41,14 +85,35 @@
     box-shadow: none !important;
   }
 
+  &[aria-busy='true']::before,
   &[aria-busy='true'] .viking-btn-label {
     opacity: 0.85;
+    transform: translateY(1px);
   }
 
   viking-icon,
-  .viking-icon {
+  .viking-icon,
+  [data-viking-icon] {
     flex-shrink: 0;
+    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-btn-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--viking-space-1);
+    line-height: 1.2;
+    min-width: 0;
+    justify-content: center;
+    text-align: center;
+    white-space: nowrap;
   }
 }
 
@@ -68,7 +133,10 @@
 
   &:active:not(:disabled):not([aria-busy='true']) {
     transform: translateY(0) scale(var(--viking-state-active-scale));
-    box-shadow: var(--viking-shadow-sm);
+    border-color: var(--viking-border-strong);
+    box-shadow: inset 0 1px 2px
+        color-mix(in srgb, var(--viking-black) 28%, transparent),
+      var(--viking-shadow-sm);
   }
 }
 
@@ -88,7 +156,10 @@
 
   &: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) 82%, var(--viking-black));
+    box-shadow: inset 0 1px 2px
+        color-mix(in srgb, var(--viking-black) 28%, transparent),
+      var(--viking-shadow-sm);
   }
 }
 
@@ -108,7 +179,10 @@
 
   &: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-secondary) 82%, var(--viking-black));
+    box-shadow: inset 0 1px 2px
+        color-mix(in srgb, var(--viking-black) 28%, transparent),
+      var(--viking-shadow-sm);
   }
 }
 
@@ -127,6 +201,9 @@
 
   &: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));
   }
 }
 
@@ -146,6 +223,8 @@
 
   &: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: var(--viking-shadow-sm);
   }
 }
@@ -163,7 +242,9 @@
   }
 
   &:active:not(:disabled):not([aria-busy='true']) {
-    transform: scale(var(--viking-state-active-scale));
+    transform: translateY(0) scale(var(--viking-state-active-scale));
+    background: var(--viking-accent-soft);
+    color: var(--viking-accent-strong);
   }
 }
 
@@ -181,7 +262,11 @@
   }
 
   &:active:not(:disabled):not([aria-busy='true']) {
-    transform: scale(var(--viking-state-active-scale));
+    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);
   }
 }
 

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