@dataengineeringformachinelearning/viking-ui 4.0.2 → 4.0.3

package/dist/web-components.js

@@ -375,7 +375,7 @@ var 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;
@@ -384,9 +384,29 @@ var 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 {
@@ -403,6 +423,36 @@ var 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);
@@ -467,6 +517,20 @@ var 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);
@@ -481,6 +545,14 @@ var 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);
@@ -495,6 +567,14 @@ var 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);
@@ -509,6 +589,14 @@ var 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);
@@ -523,6 +611,13 @@ var 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);
@@ -532,10 +627,20 @@ var 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);
@@ -549,6 +654,12 @@ var 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);
@@ -563,6 +674,13 @@ var 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));
 }
@@ -570,7 +688,12 @@ var 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 {
@@ -1737,7 +1860,7 @@ var VikingCardWc = class extends HTMLElementBase {
   static tag = "viking-card";
   static legacyTag = "viking-card-wc";
   static get observedAttributes() {
-    return ["compact", "interactive", "title"];
+    return ["compact", "interactive", "title", "loading"];
   }
   connectedCallback() {
     this.syncClasses();
@@ -1754,6 +1877,10 @@ var VikingCardWc = class extends HTMLElementBase {
       "viking-card-interactive",
       this.hasAttribute("interactive")
     );
+    this.classList.toggle(
+      "viking-card-loading",
+      this.hasAttribute("loading")
+    );
     const title = this.getAttribute("title");
     if (title) {
       this.setAttribute("role", "region");
@@ -3402,6 +3529,17 @@ var 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);
@@ -3554,6 +3692,10 @@ viking-suite-command-palette {
   .suite-header__menu-button {
     display: none;
   }
+
+  .suite-header[data-menu-open='true'] .suite-header__mobile {
+    display: none;
+  }
 }
 `;
 var detectContext2 = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataengineeringformachinelearning/viking-ui",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Universal Viking-UI design system for Astro, Angular, and Django.",
   "license": "Apache-2.0",
   "type": "module",
@@ -24,7 +24,13 @@
       "import": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
       "default": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs"
     },
+    "./angular": {
+      "types": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
+      "import": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
+      "default": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs"
+    },
     "./dist/index.js": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
+    "./dist/index.d.ts": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
     "./dist/viking-ui.css": "./dist/viking-ui.css",
     "./dist/viking-ui-elements.js": "./dist/viking-ui-elements.js",
     "./dist/web-components.js": "./dist/web-components.js",

package/src/index.ts

@@ -1 +1 @@
-export * from "./web/index";
+export * from "./public-api";

package/src/lib/button/button.scss

@@ -2,6 +2,7 @@
 
 :host {
   display: inline-flex;
+  align-items: center;
 }
 
 :host(.viking-full) {
@@ -18,6 +19,20 @@
 
 .viking-btn {
   @include btn.viking-btn-base;
+  line-height: 1;
+}
+
+.viking-btn viking-icon,
+.viking-btn .viking-icon,
+.viking-btn [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;
 }
 
 .viking-sm {
@@ -79,7 +94,15 @@
 .viking-btn-label {
   display: inline-flex;
   align-items: center;
+  gap: var(--viking-space-1);
   line-height: inherit;
+  min-width: 0;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+.viking-btn kbd {
+  margin-top: 0;
 }
 
 .viking-btn-kbd {

package/src/lib/card/card.ts

@@ -42,13 +42,19 @@ import { VikingSkeleton } from "../skeleton/skeleton";
         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, var(--viking-space-3));
         color: var(--viking-text);
         transition: var(--viking-transition-interactive);
         position: relative;
+        isolation: isolate;
         overflow: hidden;
         min-width: 0;
+        background-clip: padding-box;
       }
       :host(.viking-card-headerless) .viking-card-header,
       :host(.viking-card-headerless) viking-card-header {
@@ -72,17 +78,41 @@ import { VikingSkeleton } from "../skeleton/skeleton";
         );
         pointer-events: none;
       }
+
+      :host::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;
+      }
+
       :host(.viking-card-interactive) {
         cursor: pointer;
       }
+
+      :host(.viking-card-interactive):focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
       :host(.viking-card-interactive):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));
       }
       :host(.viking-card-interactive):active {
         transform: translateY(0) scale(var(--viking-state-active-scale));
-        box-shadow: var(--viking-shadow-md);
+        box-shadow: inset 0 1px 2px
+            color-mix(in srgb, var(--viking-black) 24%, transparent),
+          var(--viking-shadow-sm);
       }
       :host(.viking-card-interactive):focus-visible {
         outline: var(--viking-ring-width) solid var(--viking-ring);
@@ -132,7 +162,6 @@ export class VikingCard {
         gap: var(--viking-space-2);
         padding-bottom: var(--viking-space-2);
         margin-bottom: var(--viking-space-2);
-        border-bottom: 1px solid var(--viking-border-subtle);
       }
       /* Support slotted left meta + right actions uniformly */
       :host ::ng-deep > * {
@@ -162,7 +191,6 @@ export class VikingCardHeader {}
         gap: var(--viking-space-2);
         padding-top: var(--viking-space-2);
         margin-top: var(--viking-space-2);
-        border-top: 1px solid var(--viking-border-subtle);
       }
     `,
   ],

package/src/lib/site-drakkar/site-navbar.ts

@@ -114,6 +114,8 @@ import {
               <viking-button
                 variant="primary"
                 icon="arrow-right"
+                class="auth-btn"
+                [loading]="isBusy()"
                 (pressed)="login.emit()"
               >
                 Sign In
@@ -122,11 +124,16 @@ import {
               <viking-button
                 variant="primary"
                 icon="home"
+                class="auth-btn"
                 [href]="urls().app + '/dashboard'"
               >
                 Dashboard
               </viking-button>
-              <viking-button variant="ghost" (pressed)="logout.emit()"
+              <viking-button
+                variant="ghost"
+                class="auth-btn auth-signout-btn"
+                [loading]="isBusy()"
+                (pressed)="logout.emit()"
                 >Sign Out</viking-button
               >
             }
@@ -187,7 +194,8 @@ import {
           <viking-button
             variant="primary"
             icon="arrow-right"
-            class="mobile-auth-btn"
+            class="mobile-auth-btn auth-btn"
+            [loading]="isBusy()"
             [fullWidth]="true"
             (pressed)="login.emit(); closeMobileMenu()"
           >
@@ -197,7 +205,7 @@ import {
           <viking-button
             variant="primary"
             icon="home"
-            class="mobile-auth-btn"
+            class="mobile-auth-btn auth-btn"
             [fullWidth]="true"
             [href]="urls().app + '/dashboard'"
             (pressed)="closeMobileMenu()"
@@ -206,7 +214,8 @@ import {
           </viking-button>
           <viking-button
             variant="ghost"
-            class="mobile-auth-btn"
+            class="mobile-auth-btn auth-btn auth-signout-btn"
+            [loading]="isBusy()"
             [fullWidth]="true"
             (pressed)="logout.emit(); closeMobileMenu()"
           >
@@ -221,6 +230,7 @@ export class VikingSiteNavbar {
   readonly context = input<SiteDrakkarContext>("app");
   readonly urls = input<SiteUrls>(DEFAULT_SITE_URLS);
   readonly isAuthenticated = input<boolean>(false);
+  readonly isBusy = input<boolean>(false);
   readonly theme = input<"light" | "dark">("dark");
   readonly showSearch = input<boolean>(false);
 

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