@dataengineeringformachinelearning/viking-ui 4.0.2 → 4.0.4

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,7 @@ 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");
@@ -2234,6 +2358,7 @@ var VikingSearchPaletteWc = class extends HTMLElementBase {
   }
   connectedCallback() {
     this.render();
+    this.removeAttribute("open");
     this.syncOpen();
     this.bindGlobalShortcut();
     this.dialogEl?.addEventListener("close", this.onClose);
@@ -3402,6 +3527,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 +3690,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.4",
   "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,18 @@ 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 +77,44 @@ 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 +164,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 +193,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/footer/footer.scss

@@ -127,13 +127,20 @@
   border-radius: var(--viking-radius-pill);
   background-color: transparent;
   border: 1px solid var(--viking-border);
-  cursor: default;
+  cursor: pointer;
   transition: var(--viking-transition-colors);
   font-size: var(--viking-font-size);
   font-weight: 500;
   color: var(--viking-text-muted);
 }
 
+.viking-usa-badge:focus-visible,
+.usa-badge:focus-visible {
+  outline: var(--viking-ring-width, 2px) solid
+    var(--viking-ring, var(--viking-ring));
+  outline-offset: var(--viking-ring-offset, 2px);
+}
+
 .viking-usa-badge:hover,
 .usa-badge:hover {
   background-color: color-mix(in srgb, var(--viking-surface) 95%, var(--viking-accent) 5%);

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

@@ -71,6 +71,10 @@ import {
             class="usa-badge viking-usa-badge"
             id="usa-badge"
             (mouseenter)="usaBadgeHover.emit($event)"
+            (focusin)="usaBadgeHover.emit($event)"
+            (click)="usaBadgeHover.emit($event)"
+            role="button"
+            tabindex="0"
           >
             <span
               class="usa-badge-icon viking-usa-badge-icon"
@@ -105,7 +109,7 @@ export class VikingSiteFooter {
 
   readonly cookieSettings = output<Event>();
   readonly bugReport = output<Event>();
-  readonly usaBadgeHover = output<MouseEvent>();
+  readonly usaBadgeHover = output<Event>();
 
   protected readonly columns = SITE_FOOTER_COLUMNS;
 

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

@@ -100,8 +100,10 @@ import {
             <div class="navbar-search" role="search">
               <viking-button
                 variant="outline"
+                class="navbar-search-trigger"
                 [square]="true"
                 [compact]="true"
+                id="navbar-search-trigger"
                 icon="search"
                 label="Open search (⌘K)"
                 (pressed)="openSearch()"
@@ -114,6 +116,9 @@ import {
               <viking-button
                 variant="primary"
                 icon="arrow-right"
+                class="auth-btn auth-btn-desktop"
+                id="auth-btn-desktop"
+                [loading]="isBusy()"
                 (pressed)="login.emit()"
               >
                 Sign In
@@ -122,11 +127,18 @@ import {
               <viking-button
                 variant="primary"
                 icon="home"
+                class="auth-btn auth-btn-desktop"
+                id="auth-btn-desktop"
                 [href]="urls().app + '/dashboard'"
               >
                 Dashboard
               </viking-button>
-              <viking-button variant="ghost" (pressed)="logout.emit()"
+              <viking-button
+                variant="ghost"
+                class="auth-btn auth-signout-btn"
+                id="auth-signout-desktop"
+                [loading]="isBusy()"
+                (pressed)="logout.emit()"
                 >Sign Out</viking-button
               >
             }
@@ -142,6 +154,7 @@ import {
             [square]="true"
             class="menu-toggle-btn"
             [icon]="mobileMenuOpen() ? 'x' : 'menu'"
+            id="mobile-menu-btn"
             [label]="
               mobileMenuOpen()
                 ? 'Close navigation menu'
@@ -187,7 +200,9 @@ import {
           <viking-button
             variant="primary"
             icon="arrow-right"
-            class="mobile-auth-btn"
+            class="mobile-auth-btn auth-btn"
+            id="auth-btn-mobile"
+            [loading]="isBusy()"
             [fullWidth]="true"
             (pressed)="login.emit(); closeMobileMenu()"
           >
@@ -197,7 +212,8 @@ import {
           <viking-button
             variant="primary"
             icon="home"
-            class="mobile-auth-btn"
+            class="mobile-auth-btn auth-btn"
+            id="auth-btn-mobile"
             [fullWidth]="true"
             [href]="urls().app + '/dashboard'"
             (pressed)="closeMobileMenu()"
@@ -206,7 +222,9 @@ import {
           </viking-button>
           <viking-button
             variant="ghost"
-            class="mobile-auth-btn"
+            class="mobile-auth-btn auth-btn auth-signout-btn"
+            id="auth-signout-mobile"
+            [loading]="isBusy()"
             [fullWidth]="true"
             (pressed)="logout.emit(); closeMobileMenu()"
           >
@@ -221,6 +239,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/lib/theme-toggle/theme-toggle.ts

@@ -22,6 +22,7 @@ import { VikingIcon } from "../icon/icon";
     <button
       type="button"
       class="theme-toggle-btn"
+      id="theme-toggle-btn"
       aria-label="Toggle light and dark theme"
       (click)="toggle.emit()"
     >