@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.4

package/dist/web-components.js

@@ -1877,10 +1877,7 @@ var VikingCardWc = class extends HTMLElementBase {
       "viking-card-interactive",
       this.hasAttribute("interactive")
     );
-    this.classList.toggle(
-      "viking-card-loading",
-      this.hasAttribute("loading")
-    );
+    this.classList.toggle("viking-card-loading", this.hasAttribute("loading"));
     const title = this.getAttribute("title");
     if (title) {
       this.setAttribute("role", "region");
@@ -2361,6 +2358,7 @@ var VikingSearchPaletteWc = class extends HTMLElementBase {
   }
   connectedCallback() {
     this.render();
+    this.removeAttribute("open");
     this.syncOpen();
     this.bindGlobalShortcut();
     this.dialogEl?.addEventListener("close", this.onClose);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataengineeringformachinelearning/viking-ui",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "Universal Viking-UI design system for Astro, Angular, and Django.",
   "license": "Apache-2.0",
   "type": "module",

package/src/lib/card/card.ts

@@ -42,11 +42,10 @@ 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), inset 0 1px 0 color-mix(
-            in srgb,
-            var(--viking-white-pure) 6%,
-            transparent
-          );
+        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);
@@ -104,13 +103,16 @@ import { VikingSkeleton } from "../skeleton/skeleton";
       }
       :host(.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);
+        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: inset 0 1px 2px
+        box-shadow:
+          inset 0 1px 2px
             color-mix(in srgb, var(--viking-black) 24%, transparent),
           var(--viking-shadow-sm);
       }

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,7 +116,8 @@ import {
               <viking-button
                 variant="primary"
                 icon="arrow-right"
-                class="auth-btn"
+                class="auth-btn auth-btn-desktop"
+                id="auth-btn-desktop"
                 [loading]="isBusy()"
                 (pressed)="login.emit()"
               >
@@ -124,7 +127,8 @@ import {
               <viking-button
                 variant="primary"
                 icon="home"
-                class="auth-btn"
+                class="auth-btn auth-btn-desktop"
+                id="auth-btn-desktop"
                 [href]="urls().app + '/dashboard'"
               >
                 Dashboard
@@ -132,6 +136,7 @@ import {
               <viking-button
                 variant="ghost"
                 class="auth-btn auth-signout-btn"
+                id="auth-signout-desktop"
                 [loading]="isBusy()"
                 (pressed)="logout.emit()"
                 >Sign Out</viking-button
@@ -149,6 +154,7 @@ import {
             [square]="true"
             class="menu-toggle-btn"
             [icon]="mobileMenuOpen() ? 'x' : 'menu'"
+            id="mobile-menu-btn"
             [label]="
               mobileMenuOpen()
                 ? 'Close navigation menu'
@@ -195,6 +201,7 @@ import {
             variant="primary"
             icon="arrow-right"
             class="mobile-auth-btn auth-btn"
+            id="auth-btn-mobile"
             [loading]="isBusy()"
             [fullWidth]="true"
             (pressed)="login.emit(); closeMobileMenu()"
@@ -206,6 +213,7 @@ import {
             variant="primary"
             icon="home"
             class="mobile-auth-btn auth-btn"
+            id="auth-btn-mobile"
             [fullWidth]="true"
             [href]="urls().app + '/dashboard'"
             (pressed)="closeMobileMenu()"
@@ -215,6 +223,7 @@ import {
           <viking-button
             variant="ghost"
             class="mobile-auth-btn auth-btn auth-signout-btn"
+            id="auth-signout-mobile"
             [loading]="isBusy()"
             [fullWidth]="true"
             (pressed)="logout.emit(); closeMobileMenu()"

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()"
     >

package/src/styles/components/footer.scss

@@ -1,10 +1,11 @@
 .viking-footer,
 .mega-footer {
-  background-color: var(--viking-surface, var(--color-surface));
-  border-top: 1px solid var(--viking-border-strong, var(--border-layout));
+  background-color: var(--viking-surface, var(--card-bg, #05070f));
+  border-top: 1px solid
+    var(--viking-border-strong, var(--border-layout, var(--border, #243246)));
   padding: calc(var(--viking-space-2) * 2) var(--viking-space-2);
   font-family: var(--viking-font-family);
-  color: var(--viking-text-muted);
+  color: var(--viking-text-muted, var(--text-muted, #9aa5b1));
 }
 
 .viking-footer-content,
@@ -19,7 +20,8 @@
   grid-template-columns: 1fr;
   gap: calc(var(--viking-space-2) * 1.75);
   padding-bottom: calc(var(--viking-space-2) * 2);
-  border-bottom: 1px solid var(--viking-border-strong, var(--border-layout));
+  border-bottom: 1px solid
+    var(--viking-border-strong, var(--border-layout, var(--border, #243246)));
 }
 
 @media (min-width: 600px) {
@@ -40,7 +42,7 @@
 .footer-column-title {
   font-size: var(--viking-font-size);
   font-weight: 700;
-  color: var(--viking-text);
+  color: var(--viking-text, var(--text-color, #e5edf5));
   margin: 0 0 var(--viking-space-2);
   letter-spacing: 0.05em;
 }
@@ -58,7 +60,7 @@
 .viking-footer-list a,
 .footer-list a {
   font-size: var(--viking-font-size);
-  color: var(--viking-text-muted);
+  color: var(--viking-text-muted, var(--text-muted, #a4b0be));
   text-decoration: none !important;
   border-bottom: 1px solid transparent;
   transition: color 0.2s ease, border-color 0.2s ease;
@@ -66,7 +68,7 @@
 
 .viking-footer-list a:hover,
 .footer-list a:hover {
-  color: var(--viking-text);
+  color: var(--viking-text, var(--text-color, #e5edf5));
   border-bottom-color: var(--viking-text);
 }
 
@@ -126,19 +128,30 @@
   padding: var(--viking-space-1) var(--viking-space-2);
   border-radius: var(--viking-radius-pill);
   background-color: transparent;
-  border: 1px solid var(--viking-border);
-  cursor: default;
+  border: 1px solid var(--viking-border, var(--border, #243246));
+  cursor: pointer;
   transition: var(--viking-transition-colors);
   font-size: var(--viking-font-size);
   font-weight: 500;
-  color: var(--viking-text-muted);
+  color: var(--viking-text-muted, var(--text-muted, #9aa5b1));
+}
+
+.viking-usa-badge:focus-visible,
+.usa-badge:focus-visible {
+  outline: var(--viking-ring-width, 2px) solid
+    var(--viking-ring, var(--focus-ring-color, #38e6f7));
+  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%);
-  border-color: var(--viking-border-strong);
-  color: var(--viking-text);
+  background-color: color-mix(
+    in srgb,
+    var(--viking-surface, var(--card-bg, #05070f)) 95%,
+    var(--viking-accent, var(--color-primary, #12a3a8)) 5%
+  );
+  border-color: var(--viking-border-strong, var(--viking-border, var(--border, #243246)));
+  color: var(--viking-text, var(--text-color, #e5edf5));
   box-shadow: var(--viking-shadow-sm);
 }
 

package/src/styles/static-navbar.scss

@@ -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;
@@ -566,6 +588,8 @@ viking-button-wc.auth-btn::part(control),
   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;
@@ -612,6 +636,7 @@ viking-button-wc.auth-btn::part(control),
   opacity: 1;
   pointer-events: auto;
   display: flex;
+  visibility: visible;
 }
 
 .mobile-nav-btn {
@@ -729,6 +754,11 @@ viking-button-wc.auth-btn::part(control),
   }
 }
 
+.navbar [hidden],
+.mobile-menu [hidden] {
+  display: none !important;
+}
+
 .algolia-autocomplete-host {
   display: none;
   font-family: var(--viking-font-family, inherit);
@@ -1169,10 +1199,15 @@ viking-button-wc.auth-btn::part(control),
 
   .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/swagger-ui.scss

@@ -136,6 +136,10 @@ body.backend-swagger {
   background: transparent !important;
 }
 
+.swagger-ui .scheme-container span {
+  color: var(--viking-text, var(--text-color));
+}
+
 .swagger-ui .scheme-container .schemes > label {
   color: var(--viking-text-muted, var(--text-muted));
   font-size: 0.72rem;
@@ -211,9 +215,14 @@ body.backend-swagger {
   outline-offset: var(--viking-ring-offset, 2px);
 }
 
+.swagger-ui .scheme-container span.scheme-title {
+  color: var(--viking-text, var(--text-color));
+}
+
 .swagger-ui .btn.authorize,
 .swagger-ui .btn.authorize.unlocked,
-.swagger-ui .btn.execute {
+.swagger-ui .btn.execute,
+.swagger-ui .authorization__btn {
   background: var(--viking-accent, var(--color-primary));
   border-color: color-mix(
     in srgb,
@@ -224,10 +233,41 @@ body.backend-swagger {
   box-shadow: var(--viking-shadow-sm);
   min-height: var(--viking-control-height, 40px);
   border-radius: var(--viking-radius, 8px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--viking-space-1, 8px);
+  text-align: center;
+  line-height: 1;
+  min-width: auto;
+  white-space: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.swagger-ui .btn.authorize .viking-icon,
+.swagger-ui .btn.authorize svg,
+.swagger-ui .btn.execute .viking-icon,
+.swagger-ui .btn.execute svg,
+.swagger-ui .authorization__btn svg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.swagger-ui .btn.authorize .viking-icon,
+.swagger-ui .btn.authorize svg,
+.swagger-ui .btn.execute .viking-icon,
+.swagger-ui .btn.execute svg,
+.swagger-ui .authorization__btn svg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .swagger-ui .btn.authorize:hover,
 .swagger-ui .btn.authorize.unlocked:hover,
+.swagger-ui .authorization__btn:hover,
 .swagger-ui .btn.execute:hover {
   background: var(--viking-accent-hover, var(--viking-teal-500));
   border-color: color-mix(
@@ -239,6 +279,57 @@ body.backend-swagger {
   box-shadow: var(--viking-shadow-md);
 }
 
+.swagger-ui .btn.authorize svg,
+.swagger-ui .btn.execute svg,
+.swagger-ui .btn.authorization__btn svg,
+.swagger-ui .authorization__btn svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  fill: var(--viking-accent-content, var(--viking-white-pure));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.swagger-ui .btn.authorize .viking-icon,
+.swagger-ui .btn.execute .viking-icon,
+.swagger-ui .authorization__btn .viking-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.swagger-ui .btn.authorize .viking-icon svg,
+.swagger-ui .btn.execute .viking-icon svg,
+.swagger-ui .authorization__btn .viking-icon svg {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+  margin: 0;
+}
+
+.swagger-ui .btn.authorize .authorization-btn-icon,
+.swagger-ui .btn.execute .authorization-btn-icon,
+.swagger-ui .authorization__btn .authorization-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.swagger-ui .scheme-container .authorization__btn,
+.swagger-ui .btn.authorization__btn {
+  min-height: var(--viking-control-height, 40px);
+  height: var(--viking-control-height, 40px);
+  padding: 0 var(--viking-space-2, 16px);
+  box-sizing: border-box;
+  text-align: center;
+}
+
 /* ── Tag groups ──────────────────────────────────────────────────────────── */
 .swagger-ui .opblock-tag-section {
   margin: 0;

package/src/styles/viking-ui.scss

@@ -9,6 +9,8 @@
 @use 'layout-enforcement';
 @use 'page-shell';
 @use 'layout-shell';
+@use 'static-navbar';
+@use 'components/footer';
 
 // ============================================================================
 // Viking-UI design tokens

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

@@ -48,10 +48,7 @@ export class VikingCardWc extends HTMLElementBase {
       "viking-card-interactive",
       this.hasAttribute("interactive"),
     );
-    this.classList.toggle(
-      "viking-card-loading",
-      this.hasAttribute("loading"),
-    );
+    this.classList.toggle("viking-card-loading", this.hasAttribute("loading"));
 
     const title = this.getAttribute("title");
     if (title) {

package/src/web/search-palette/viking-search-palette-wc.ts

@@ -125,6 +125,7 @@ export class VikingSearchPaletteWc extends HTMLElementBase {
 
   connectedCallback(): void {
     this.render();
+    this.removeAttribute("open");
     this.syncOpen();
     this.bindGlobalShortcut();
     this.dialogEl?.addEventListener("close", this.onClose);