@dataengineeringformachinelearning/viking-ui 4.0.2 → 4.0.4

package/dist/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 @@
       "types": "./types/dataengineeringformachinelearning-viking-ui.d.ts",
       "default": "./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/dist/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,7 @@ 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/dist/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/dist/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);

package/dist/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;
+  }
 }
 `;
 

package/dist/types/dataengineeringformachinelearning-viking-ui.d.ts

@@ -888,6 +888,7 @@ declare class VikingSiteNavbar {
     readonly context: _angular_core.InputSignal<SiteDrakkarContext>;
     readonly urls: _angular_core.InputSignal<SiteUrls>;
     readonly isAuthenticated: _angular_core.InputSignal<boolean>;
+    readonly isBusy: _angular_core.InputSignal<boolean>;
     readonly theme: _angular_core.InputSignal<"dark" | "light">;
     readonly showSearch: _angular_core.InputSignal<boolean>;
     readonly login: _angular_core.OutputEmitterRef<void>;
@@ -904,7 +905,7 @@ declare class VikingSiteNavbar {
     protected closeMobileMenu(): void;
     protected openSearch(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<VikingSiteNavbar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VikingSiteNavbar, "viking-site-navbar", never, { "context": { "alias": "context"; "required": false; "isSignal": true; }; "urls": { "alias": "urls"; "required": false; "isSignal": true; }; "isAuthenticated": { "alias": "isAuthenticated"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; }, { "login": "login"; "logout": "logout"; "themeToggle": "themeToggle"; "searchOpen": "searchOpen"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VikingSiteNavbar, "viking-site-navbar", never, { "context": { "alias": "context"; "required": false; "isSignal": true; }; "urls": { "alias": "urls"; "required": false; "isSignal": true; }; "isAuthenticated": { "alias": "isAuthenticated"; "required": false; "isSignal": true; }; "isBusy": { "alias": "isBusy"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; }, { "login": "login"; "logout": "logout"; "themeToggle": "themeToggle"; "searchOpen": "searchOpen"; }, never, never, true, never>;
 }
 
 /**
@@ -916,7 +917,7 @@ declare class VikingSiteFooter {
     readonly year: _angular_core.InputSignal<number>;
     readonly cookieSettings: _angular_core.OutputEmitterRef<Event>;
     readonly bugReport: _angular_core.OutputEmitterRef<Event>;
-    readonly usaBadgeHover: _angular_core.OutputEmitterRef<MouseEvent>;
+    readonly usaBadgeHover: _angular_core.OutputEmitterRef<Event>;
     protected readonly columns: readonly _dataengineeringformachinelearning_viking_ui.SiteFooterColumn[];
     protected readonly cookieSettingsUrl: () => string;
     protected resolveHref: (link: SiteFooterLink) => string;