@dataengineeringformachinelearning/viking-ui 4.0.5 → 4.1.0

package/dist/web-components.js

@@ -699,14 +699,29 @@ var VIKING_BUTTON_STYLES = `
 .viking-btn-label {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: var(--viking-space-1);
   line-height: 1.2;
   min-width: 0;
-  justify-content: center;
   text-align: center;
   white-space: nowrap;
 }
 
+.viking-btn-label ::slotted(*) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  line-height: 1;
+}
+
+.viking-btn-label ::slotted([data-viking-icon]),
+.viking-btn-label ::slotted(svg),
+.viking-btn-label ::slotted(viking-icon) {
+  width: var(--viking-icon-size-md);
+  height: var(--viking-icon-size-md);
+}
+
 .viking-btn-spinner {
   flex: 0 0 auto;
   width: var(--viking-icon-size-sm, 18px);
@@ -1234,6 +1249,11 @@ var VIKING_MODAL_STYLES = `
   display: contents;
 }
 
+.viking-modal-backdrop:not([open]) {
+  display: none !important;
+  pointer-events: none;
+}
+
 .viking-modal-backdrop {
   position: fixed;
   inset: 0;
@@ -1687,8 +1707,9 @@ var VARIANTS = /* @__PURE__ */ new Set([
 ]);
 var SIZES = /* @__PURE__ */ new Set(["sm", "xs"]);
 var VikingButtonWc = class extends HTMLElementBase {
-  static tag = "viking-button";
-  static legacyTag = "viking-button-wc";
+  /** Reserved for Angular `viking-button` — do not register as a custom element. */
+  static angularTag = "viking-button";
+  static tag = "viking-button-wc";
   static get observedAttributes() {
     return [
       "variant",
@@ -1714,7 +1735,6 @@ var VikingButtonWc = class extends HTMLElementBase {
   }
   connectedCallback() {
     this.render();
-    this.syncHostSemantics();
     this.control?.addEventListener("click", this.onClick);
   }
   disconnectedCallback() {
@@ -1723,7 +1743,6 @@ var VikingButtonWc = class extends HTMLElementBase {
   attributeChangedCallback() {
     if (this.isConnected) {
       this.render();
-      this.syncHostSemantics();
     }
   }
   onClick = (event) => {
@@ -1757,11 +1776,6 @@ var VikingButtonWc = class extends HTMLElementBase {
   get square() {
     return readBoolAttr(this, "square");
   }
-  syncHostSemantics() {
-    if (!this.hasAttribute("role")) {
-      this.setAttribute("role", this.getAttribute("href") ? "link" : "button");
-    }
-  }
   render() {
     const href = this.getAttribute("href");
     const isLink = Boolean(href);
@@ -1799,7 +1813,6 @@ var VikingButtonWc = class extends HTMLElementBase {
 };
 var registerVikingButtonWc = () => {
   defineCustomElement(VikingButtonWc.tag, VikingButtonWc);
-  defineCustomElementAlias(VikingButtonWc.legacyTag, VikingButtonWc);
 };
 
 // src/web/callout/viking-callout-wc.ts
@@ -2173,8 +2186,9 @@ var registerVikingInputWc = () => {
 
 // src/web/modal/viking-modal-wc.ts
 var VikingModalWc = class extends HTMLElementBase {
-  static tag = "viking-modal";
-  static legacyTag = "viking-modal-wc";
+  /** Reserved for Angular `viking-modal` — do not register as a custom element. */
+  static angularTag = "viking-modal";
+  static tag = "viking-modal-wc";
   static dialogTag = "viking-dialog";
   static get observedAttributes() {
     return ["open", "title", "dismissible"];
@@ -2299,7 +2313,6 @@ var VikingModalWc = class extends HTMLElementBase {
 };
 var registerVikingModalWc = () => {
   defineCustomElement(VikingModalWc.tag, VikingModalWc);
-  defineCustomElementAlias(VikingModalWc.legacyTag, VikingModalWc);
   defineCustomElementAlias(VikingModalWc.dialogTag, VikingModalWc);
 };
 
@@ -2687,6 +2700,530 @@ var registerVikingSearchPaletteWc = () => {
   );
 };
 
+// src/web/status-card/viking-status-card-wc.ts
+var TONES3 = /* @__PURE__ */ new Set([
+  "accent",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "muted"
+]);
+var VikingStatusCardWc = class extends HTMLElementBase {
+  static tag = "viking-status-card";
+  static legacyTag = "viking-status-card-wc";
+  static get observedAttributes() {
+    return [
+      "title",
+      "subtitle",
+      "status",
+      "status-tone",
+      "status-dot",
+      "href",
+      "target",
+      "compact",
+      "loading",
+      "interactive",
+      "aria-label"
+    ];
+  }
+  shadow = this.attachShadow({ mode: "open" });
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.render();
+    }
+  }
+  get compact() {
+    const compact = this.getAttribute("compact");
+    return compact !== null && compact !== "false";
+  }
+  get loading() {
+    const loading = this.getAttribute("loading");
+    return loading !== null && loading !== "false";
+  }
+  get interactive() {
+    const interactive = this.getAttribute("interactive");
+    return interactive !== null && interactive !== "false";
+  }
+  get href() {
+    return this.getAttribute("href");
+  }
+  get target() {
+    return this.getAttribute("target");
+  }
+  get statusTone() {
+    const raw = this.getAttribute("status-tone") ?? "muted";
+    return TONES3.has(raw) ? raw : "muted";
+  }
+  get statusDot() {
+    const statusDot = this.getAttribute("status-dot");
+    return statusDot !== null && statusDot !== "false";
+  }
+  get cardTitle() {
+    return this.getAttribute("title") ?? "";
+  }
+  get subtitle() {
+    return this.getAttribute("subtitle") ?? "";
+  }
+  get status() {
+    return this.getAttribute("status") ?? "";
+  }
+  render() {
+    const hasStatus = this.status.length > 0;
+    const title = this.cardTitle;
+    const subtitle = this.subtitle;
+    const compactClass = this.compact ? " status-card--compact" : "";
+    const loadingClass = this.loading ? " status-card--loading" : "";
+    const interactiveClass = this.interactive ? " status-card--interactive" : "";
+    const wrapperClass = `status-card${compactClass}${loadingClass}${interactiveClass}`;
+    const rel = this.target === "_blank" ? ' rel="noopener noreferrer"' : "";
+    const statusDot = this.statusDot ? '<span class="status-card__status-dot" aria-hidden="true"></span>' : "";
+    const statusChip = hasStatus ? `<span class="status-card__status status-card__status-${this.statusTone}" part="status">${statusDot}<span>${escapeHtml(this.status)}</span></span>` : "";
+    const safeHref = this.href ? escapeHtml(this.href) : "";
+    const safeLabel = escapeHtml(this.getAttribute("aria-label") ?? "");
+    const wrapperTag = safeHref ? "a" : "div";
+    const header = `
+      <header class="status-card__header">
+        <div class="status-card__title-wrap">
+          ${title ? `<h3 class="status-card__title" part="title">${escapeHtml(title)}</h3>` : ""}
+          ${subtitle ? `<p class="status-card__subtitle" part="subtitle">${escapeHtml(subtitle)}</p>` : ""}
+        </div>
+        ${hasStatus || statusDot ? `<div class="status-card__status-wrap">${statusChip}</div>` : ""}
+      </header>
+    `;
+    this.shadow.innerHTML = `
+      <style>
+        ${VIKING_STATUS_CARD_STYLES}
+      </style>
+      <${wrapperTag}
+        class="${wrapperClass}"
+        part="card"
+        ${safeHref ? `href="${safeHref}"` : ""}
+        ${this.target ? `target="${escapeHtml(this.target)}"` : ""}
+        ${safeHref ? rel : ""}
+        ${safeLabel ? `aria-label="${safeLabel}"` : ""}
+      >
+        ${header}
+        <section class="status-card__body">
+          <slot></slot>
+        </section>
+      </${wrapperTag}>
+    `;
+  }
+};
+var VIKING_STATUS_CARD_STYLES = `
+:host {
+  display: block;
+}
+
+:host([compact]) .status-card,
+:host .status-card--compact {
+  padding: var(--viking-card-padding-compact);
+  gap: var(--viking-space-2);
+}
+
+.status-card {
+  display: grid;
+  gap: var(--viking-space-3);
+  width: 100%;
+  padding: var(--viking-card-padding);
+  border-radius: var(--viking-radius-lg);
+  border: 1px solid var(--viking-border);
+  background: var(--viking-surface);
+  color: var(--viking-text);
+  box-shadow: var(--viking-shadow-sm);
+  box-sizing: border-box;
+  position: relative;
+  transition: var(--viking-transition-interactive);
+  text-decoration: none;
+  overflow: hidden;
+}
+
+.status-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--viking-metallic-200) 24%, transparent),
+    transparent
+  );
+  pointer-events: none;
+}
+
+.status-card--interactive {
+  cursor: pointer;
+}
+
+.status-card--interactive:hover {
+  border-color: var(--viking-accent-strong);
+  box-shadow: var(--viking-shadow-hover);
+  transform: translateY(var(--viking-state-hover-lift));
+}
+
+.status-card--loading {
+  pointer-events: none;
+  opacity: var(--viking-state-disabled-opacity);
+}
+
+.status-card__header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--viking-space-3);
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.status-card__title-wrap {
+  display: grid;
+  gap: var(--viking-space-1);
+  min-width: 0;
+}
+
+.status-card__title {
+  margin: 0;
+  font-size: var(--viking-font-size-xl);
+  font-weight: var(--viking-font-weight-bold);
+  letter-spacing: var(--viking-letter-spacing-tight);
+  line-height: var(--viking-line-height-tight);
+}
+
+.status-card__subtitle {
+  margin: 0;
+  max-width: 60ch;
+  color: var(--viking-text-muted);
+  font-size: var(--viking-font-size-base);
+  line-height: var(--viking-line-height-relaxed);
+}
+
+.status-card__status-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.status-card__status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--viking-space-1);
+  max-width: fit-content;
+  padding: calc(var(--viking-space-half) - 1px) var(--viking-space-1);
+  border-radius: var(--viking-radius-pill);
+  border: 1px solid var(--viking-border-subtle);
+  background: color-mix(in srgb, var(--viking-surface) 92%, transparent);
+  color: var(--viking-text-muted);
+  text-transform: capitalize;
+  font-size: var(--viking-font-size-xs);
+  font-weight: var(--viking-font-weight-semibold);
+  letter-spacing: var(--viking-letter-spacing-wide);
+}
+
+.status-card__status-dot {
+  width: var(--viking-space-1);
+  height: var(--viking-space-1);
+  border-radius: var(--viking-radius-full);
+  background: currentColor;
+  flex: 0 0 auto;
+}
+
+.status-card__status-success {
+  background: color-mix(in srgb, var(--viking-success) 12%, var(--viking-surface));
+  border-color: color-mix(in srgb, var(--viking-success) 40%, transparent);
+  color: var(--viking-success);
+}
+
+.status-card__status-warning {
+  background: color-mix(in srgb, var(--viking-warning) 12%, var(--viking-surface));
+  border-color: color-mix(in srgb, var(--viking-warning) 40%, transparent);
+  color: var(--viking-warning);
+}
+
+.status-card__status-danger {
+  background: color-mix(in srgb, var(--viking-danger) 12%, var(--viking-surface));
+  border-color: color-mix(in srgb, var(--viking-danger) 45%, transparent);
+  color: var(--viking-danger-text);
+}
+
+.status-card__status-accent {
+  background: color-mix(in srgb, var(--viking-accent) 12%, var(--viking-surface));
+  border-color: color-mix(in srgb, var(--viking-accent) 40%, transparent);
+  color: var(--viking-accent);
+}
+
+.status-card__status-secondary {
+  background: color-mix(in srgb, var(--viking-accent-secondary) 12%, var(--viking-surface));
+  border-color: color-mix(in srgb, var(--viking-accent-secondary) 40%, transparent);
+  color: var(--viking-accent-secondary);
+}
+
+.status-card__status-info {
+  background: color-mix(in srgb, var(--viking-info) 12%, var(--viking-surface));
+  border-color: color-mix(in srgb, var(--viking-info) 40%, transparent);
+  color: var(--viking-info);
+}
+
+.status-card__status-muted {
+  background: var(--viking-surface);
+  border-color: var(--viking-border-subtle);
+  color: var(--viking-text-muted);
+}
+
+.status-card__body {
+  display: grid;
+  gap: var(--viking-space-3);
+  min-width: 0;
+}
+`;
+var registerVikingStatusCardWc = () => {
+  defineCustomElement(VikingStatusCardWc.tag, VikingStatusCardWc);
+  defineCustomElementAlias(VikingStatusCardWc.legacyTag, VikingStatusCardWc);
+};
+
+// src/web/status-pill/viking-status-pill-wc.ts
+var TONES4 = /* @__PURE__ */ new Set([
+  "accent",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "muted"
+]);
+var VikingStatusPillWc = class extends HTMLElementBase {
+  static tag = "viking-status-pill";
+  static legacyTag = "viking-status-pill-wc";
+  static get observedAttributes() {
+    return ["tone", "icon", "href", "target", "compact", "dot", "removable", "aria-label"];
+  }
+  shadow;
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    attachShadowStyles(this.shadow, VIKING_STATUS_PILL_STYLES);
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.render();
+    }
+  }
+  get tone() {
+    const raw = this.getAttribute("tone") ?? "muted";
+    return TONES4.has(raw) ? raw : "muted";
+  }
+  get compact() {
+    const compact = this.getAttribute("compact");
+    return compact !== null && compact !== "false";
+  }
+  get removable() {
+    const removable = this.getAttribute("removable");
+    return removable !== null && removable !== "false";
+  }
+  get href() {
+    return this.getAttribute("href");
+  }
+  get icon() {
+    return this.getAttribute("icon");
+  }
+  get showDot() {
+    const dot = this.getAttribute("dot");
+    return dot !== null && dot !== "false";
+  }
+  onRemove = () => {
+    this.dispatchEvent(
+      new CustomEvent("viking-pill-removed", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  };
+  render() {
+    const tone = this.tone;
+    const compact = this.compact ? " status-pill--compact" : "";
+    const icon = this.icon ? renderInlineIcon(this.icon, 14, "status-pill__icon") : "";
+    const dot = this.showDot ? `<span class="status-pill__dot" aria-hidden="true"></span>` : "";
+    const label = `<span class="status-pill__label" part="label"><slot></slot></span>`;
+    const ariaLabel = escapeHtml(this.getAttribute("aria-label") ?? "");
+    const href = this.href;
+    const target = this.getAttribute("target");
+    const rel = href && target === "_blank" ? ' rel="noopener noreferrer"' : "";
+    if (href) {
+      this.shadow.innerHTML = `
+        <a
+          class="status-pill status-pill-${tone}${compact}"
+          part="control"
+          href="${escapeHtml(href)}"
+          ${target ? `target="${escapeHtml(target)}"${rel}` : ""}
+          ${ariaLabel ? `aria-label="${ariaLabel}"` : ""}
+        >
+          ${dot}
+          ${icon}
+          ${label}
+        </a>
+      `;
+      return;
+    }
+    this.shadow.innerHTML = `
+      <span
+        class="status-pill status-pill-${tone}${compact}"
+        part="control"
+        ${ariaLabel ? `role="status" aria-label="${ariaLabel}"` : ""}
+      >
+        ${dot}
+        ${icon}
+        ${label}
+        ${this.removable ? '<button type="button" class="status-pill__remove" part="remove" aria-label="Remove"><span class="status-pill__remove-icon" aria-hidden="true">&times;</span></button>' : ""}
+      </span>
+    `;
+    this.shadow.querySelector(".status-pill__remove")?.addEventListener("click", this.onRemove);
+  }
+};
+var VIKING_STATUS_PILL_STYLES = `
+:host {
+  display: inline-flex;
+}
+
+.status-pill {
+  --viking-status-pill-bg: color-mix(in srgb, var(--viking-surface-alt) 88%, var(--viking-surface));
+  --viking-status-pill-text: var(--viking-text-muted);
+  --viking-status-pill-border: var(--viking-border-subtle);
+  --viking-status-pill-shadow: var(--viking-shadow-xs);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--viking-space-half);
+  padding: var(--viking-space-half) var(--viking-space-2);
+  border-radius: var(--viking-radius-pill);
+  border: 1px solid var(--viking-status-pill-border);
+  background: var(--viking-status-pill-bg);
+  color: var(--viking-status-pill-text);
+  font-family: var(--viking-font-family);
+  font-size: var(--viking-font-size-xs);
+  font-weight: var(--viking-font-weight-semibold);
+  letter-spacing: var(--viking-letter-spacing-caps);
+  line-height: var(--viking-line-height-snug);
+  white-space: nowrap;
+  text-transform: uppercase;
+  box-shadow: var(--viking-status-pill-shadow);
+}
+
+:host(:hover) .status-pill {
+  text-decoration: none;
+}
+
+.status-pill--compact {
+  padding: var(--viking-space-half);
+  font-size: var(--viking-font-size-2xs);
+}
+
+.status-pill__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+.status-pill__dot {
+  width: var(--viking-space-1);
+  height: var(--viking-space-1);
+  border-radius: var(--viking-radius-full);
+  background: currentColor;
+  flex: 0 0 auto;
+}
+
+.status-pill__icon,
+::slotted([data-viking-icon]) {
+  width: var(--viking-space-3);
+  height: var(--viking-space-3);
+  color: currentColor;
+  flex-shrink: 0;
+}
+
+.status-pill__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  background: transparent;
+  color: currentColor;
+  border-radius: var(--viking-radius-full);
+  width: var(--viking-touch-target-min);
+  height: var(--viking-touch-target-min);
+  margin-right: calc(var(--viking-space-half) * -1);
+  padding: 0;
+  cursor: pointer;
+}
+
+.status-pill__remove:hover {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.status-pill__remove:focus-visible {
+  outline: var(--viking-ring-width) solid var(--viking-ring);
+  outline-offset: var(--viking-ring-offset);
+}
+
+.status-pill-accent {
+  --viking-status-pill-bg: color-mix(in srgb, var(--viking-accent) 18%, var(--viking-surface));
+  --viking-status-pill-text: var(--viking-accent);
+  --viking-status-pill-border: color-mix(in srgb, var(--viking-accent) 52%, transparent);
+}
+
+.status-pill-secondary {
+  --viking-status-pill-bg: color-mix(in srgb, var(--viking-accent-secondary) 16%, var(--viking-surface));
+  --viking-status-pill-text: var(--viking-accent-secondary);
+  --viking-status-pill-border: color-mix(in srgb, var(--viking-accent-secondary) 52%, transparent);
+}
+
+.status-pill-success {
+  --viking-status-pill-bg: color-mix(in srgb, var(--viking-success) 16%, var(--viking-surface));
+  --viking-status-pill-text: var(--viking-success);
+  --viking-status-pill-border: color-mix(in srgb, var(--viking-success) 55%, transparent);
+}
+
+.status-pill-warning {
+  --viking-status-pill-bg: color-mix(in srgb, var(--viking-warning) 16%, var(--viking-surface));
+  --viking-status-pill-text: var(--viking-warning);
+  --viking-status-pill-border: color-mix(in srgb, var(--viking-warning) 55%, transparent);
+}
+
+.status-pill-danger {
+  --viking-status-pill-bg: color-mix(in srgb, var(--viking-danger) 14%, var(--viking-surface));
+  --viking-status-pill-text: var(--viking-danger-text);
+  --viking-status-pill-border: color-mix(in srgb, var(--viking-danger) 50%, transparent);
+}
+
+.status-pill-info {
+  --viking-status-pill-bg: color-mix(in srgb, var(--viking-info) 14%, var(--viking-surface));
+  --viking-status-pill-text: var(--viking-info);
+  --viking-status-pill-border: color-mix(in srgb, var(--viking-info) 50%, transparent);
+}
+
+.status-pill-muted {
+  --viking-status-pill-bg: var(--viking-surface);
+  --viking-status-pill-text: var(--viking-text-muted);
+  --viking-status-pill-border: var(--viking-border-subtle);
+}
+
+.status-pill a {
+  color: inherit;
+}
+
+a.status-pill {
+  text-decoration: none;
+}
+`;
+var registerVikingStatusPillWc = () => {
+  defineCustomElement(VikingStatusPillWc.tag, VikingStatusPillWc);
+  defineCustomElementAlias(VikingStatusPillWc.legacyTag, VikingStatusPillWc);
+};
+
 // src/lib/site-drakkar/site-drakkar.config.ts
 var SITE_NAV_LINKS = [
   {
@@ -2902,6 +3439,376 @@ var DEFAULT_SITE_URLS = {
   backend: "https://backend.deml.app"
 };
 
+// src/web/site-footer/viking-site-footer-wc.ts
+var VALID_CONTEXTS = /* @__PURE__ */ new Set([
+  "app",
+  "marketing",
+  "backend",
+  "docs"
+]);
+var detectContext = () => {
+  const explicit = document.documentElement.getAttribute("data-deml-context");
+  if (explicit && VALID_CONTEXTS.has(explicit)) {
+    return explicit;
+  }
+  const host = window.location.hostname;
+  if (host.startsWith("backend.")) {
+    return "backend";
+  }
+  if (host.includes("deml.app")) {
+    return "app";
+  }
+  return "marketing";
+};
+var readContext = (el) => {
+  const attr = el.getAttribute("context");
+  if (attr && VALID_CONTEXTS.has(attr)) {
+    return attr;
+  }
+  return detectContext();
+};
+var readUrls = (el) => {
+  const env = globalThis.__DEML ?? {};
+  return {
+    app: el.getAttribute("app-url") ?? env.app ?? DEFAULT_SITE_URLS.app,
+    marketing: el.getAttribute("marketing-url") ?? env.marketing ?? DEFAULT_SITE_URLS.marketing,
+    backend: el.getAttribute("backend-url") ?? env.backend ?? DEFAULT_SITE_URLS.backend
+  };
+};
+var readYear = (el) => {
+  const raw = el.getAttribute("year");
+  const value = raw ? Number(raw) : (/* @__PURE__ */ new Date()).getFullYear();
+  return Number.isFinite(value) ? value : (/* @__PURE__ */ new Date()).getFullYear();
+};
+var renderFooterLinks = (context, urls) => {
+  return SITE_FOOTER_COLUMNS.map((column) => {
+    const links = column.links.map((link) => {
+      const href = resolveFooterHref(link, context, urls);
+      return `
+          <li>
+            <a href="${escapeHtml(href)}">${escapeHtml(link.label)}</a>
+          </li>
+        `;
+    }).join("");
+    return `
+      <div class="footer-column">
+        <h3 class="footer-column-title">${escapeHtml(column.title)}</h3>
+        <ul class="footer-list">
+          ${links}
+        </ul>
+      </div>
+    `;
+  }).join("");
+};
+var VikingSiteFooterWc = class extends HTMLElement {
+  static tag = "viking-site-footer";
+  static legacyTag = "viking-site-footer-wc";
+  static get observedAttributes() {
+    return ["context", "app-url", "marketing-url", "backend-url", "year"];
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.render();
+    }
+  }
+  render() {
+    const context = readContext(this);
+    const urls = readUrls(this);
+    const year = readYear(this);
+    const links = renderFooterLinks(context, urls);
+    this.innerHTML = `
+      <footer class="mega-footer">
+        <div class="footer-content">
+          <nav class="footer-directory" aria-label="Footer Directory">
+            ${links}
+          </nav>
+
+          <section class="footer-bottom">
+            <div class="footer-badges-top">
+              <span
+                class="usa-badge"
+                id="usa-badge"
+                role="button"
+                tabindex="0"
+                aria-label="Made in the U.S.A."
+              >
+                <span class="usa-badge-icon" aria-hidden="true">\u{1F1FA}\u{1F1F8}</span>
+                <span>Made in the U.S.A</span>
+              </span>
+            </div>
+
+            <div class="footer-compliance-row">
+              <div class="copyright-info">
+                <span class="copyright-text">
+                  Copyright \xA9 ${year} Data Engineering for Machine Learning by
+                  <a href="https://joealongi.dev/" target="_blank" rel="noopener noreferrer">Joe Alongi</a>.
+                  All rights reserved.
+                </span>
+              </div>
+            </div>
+          </section>
+        </div>
+      </footer>
+    `;
+  }
+};
+var registerVikingSiteFooterWc = () => {
+  defineCustomElement(VikingSiteFooterWc.tag, VikingSiteFooterWc);
+  defineCustomElementAlias(VikingSiteFooterWc.legacyTag, VikingSiteFooterWc);
+};
+
+// src/web/site-navbar/viking-site-navbar-wc.ts
+var VALID_CONTEXTS2 = /* @__PURE__ */ new Set([
+  "app",
+  "marketing",
+  "backend",
+  "docs"
+]);
+var detectContext2 = () => {
+  const explicit = document.documentElement.getAttribute("data-deml-context");
+  if (explicit && VALID_CONTEXTS2.has(explicit)) {
+    return explicit;
+  }
+  const host = window.location.hostname;
+  if (host.startsWith("ui.")) {
+    return "docs";
+  }
+  if (host.startsWith("backend.")) {
+    return "backend";
+  }
+  if (host.includes("deml.app")) {
+    return "app";
+  }
+  return "marketing";
+};
+var readContext2 = (el) => {
+  const attr = el.getAttribute("context");
+  if (attr && VALID_CONTEXTS2.has(attr)) {
+    return attr;
+  }
+  return detectContext2();
+};
+var readBoolAttr2 = (el, name) => {
+  const value = el.getAttribute(name);
+  return value !== null && value !== "false";
+};
+var readUrls2 = (el) => {
+  const env = globalThis.__DEML ?? {};
+  return {
+    app: el.getAttribute("app-url") ?? env.app ?? DEFAULT_SITE_URLS.app,
+    marketing: el.getAttribute("marketing-url") ?? env.marketing ?? DEFAULT_SITE_URLS.marketing,
+    backend: el.getAttribute("backend-url") ?? env.backend ?? DEFAULT_SITE_URLS.backend
+  };
+};
+var readAuthState = (el) => readBoolAttr2(el, "authenticated");
+var readShowSearch = (el) => {
+  const explicit = el.getAttribute("show-search");
+  if (explicit === null) {
+    return true;
+  }
+  return readBoolAttr2(el, "show-search");
+};
+var readSignInHref = (el, urls) => {
+  const explicit = el.getAttribute("sign-in-href");
+  if (explicit) {
+    return explicit;
+  }
+  const landing = el.getAttribute("return-url") ?? window.location.href;
+  return `${urls.app}/login?returnUrl=${encodeURIComponent(landing)}`;
+};
+var VikingSiteNavbarWc = class extends HTMLElement {
+  static tag = "viking-site-navbar";
+  static legacyTag = "viking-site-navbar-wc";
+  static get observedAttributes() {
+    return [
+      "context",
+      "app-url",
+      "marketing-url",
+      "backend-url",
+      "authenticated",
+      "show-search",
+      "sign-in-href",
+      "dashboard-href",
+      "return-url"
+    ];
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.render();
+    }
+  }
+  renderNavLinks(context, urls, kind = "desktop") {
+    const linkClass = kind === "mobile" ? "mobile-nav-btn" : "nav-btn";
+    return SITE_NAV_LINKS.map((link) => {
+      const href = resolveNavHref(link, context, urls);
+      const isProtected = link.requireAuth;
+      const hidden = isProtected ? " hidden" : "";
+      const authAttr = isProtected ? ' data-require-auth="true"' : "";
+      return `
+        <a
+          href="${escapeHtml(href)}"
+          class="${linkClass}"
+          data-nav-id="${escapeHtml(link.id)}"
+          ${authAttr}
+          ${hidden}
+        >
+          <span data-viking-icon="${escapeHtml(link.icon)}" data-viking-icon-size="16" aria-hidden="true"></span>
+          <span>${escapeHtml(link.label)}</span>
+        </a>
+      `;
+    }).join("");
+  }
+  renderAuthDesktop(authenticated, signInHref, dashboardHref) {
+    const href = authenticated ? dashboardHref : signInHref;
+    return `
+      <div class="desktop-auth">
+        <viking-button-wc
+          variant="primary"
+          class="auth-btn"
+          href="${escapeHtml(href)}"
+          id="auth-btn-desktop"
+        >
+          <span
+            id="auth-icon-desktop"
+            data-viking-icon="${authenticated ? "home" : "arrow-right"}"
+            data-viking-icon-size="16"
+            aria-hidden="true"
+          ></span>
+          <span id="auth-text-desktop">${authenticated ? "Dashboard" : "Sign In"}</span>
+        </viking-button-wc>
+        <viking-button-wc
+          variant="ghost"
+          class="auth-btn auth-signout-btn"
+          id="auth-signout-desktop"
+          ${authenticated ? "" : " hidden"}
+        >
+          Sign Out
+        </viking-button-wc>
+      </div>
+    `;
+  }
+  renderAuthMobile(authenticated, dashboardHref, signInHref) {
+    return `
+      <div class="mobile-divider"></div>
+      <viking-button-wc
+        variant="primary"
+        full-width
+        class="mobile-auth-btn auth-btn"
+        href="${escapeHtml(authenticated ? dashboardHref : signInHref)}"
+        id="auth-btn-mobile"
+      >
+        <span
+          id="auth-icon-mobile"
+          data-viking-icon="${authenticated ? "home" : "arrow-right"}"
+          data-viking-icon-size="16"
+          aria-hidden="true"
+        ></span>
+        <span id="auth-text-mobile">${authenticated ? "Dashboard" : "Sign In"}</span>
+      </viking-button-wc>
+      <viking-button-wc
+        variant="ghost"
+        full-width
+        class="mobile-auth-btn auth-btn auth-signout-btn"
+        id="auth-signout-mobile"
+        ${authenticated ? "" : " hidden"}
+      >
+        Sign Out
+      </viking-button-wc>
+    `;
+  }
+  renderSearchButton(showSearch) {
+    if (!showSearch) {
+      return "";
+    }
+    const shortcut = navigator.platform.match(/Mac|iPhone|iPad/i) ? "\u2318K" : "Ctrl+K";
+    return `
+      <div class="navbar-search" role="search">
+        <viking-button-wc
+          variant="outline"
+          square
+          compact
+          class="navbar-search-trigger"
+          aria-label="Open search (${shortcut})"
+          id="navbar-search-trigger"
+        >
+          <span data-viking-icon="search" data-viking-icon-size="20" aria-hidden="true"></span>
+        </viking-button-wc>
+      </div>
+    `;
+  }
+  render() {
+    const context = readContext2(this);
+    const urls = readUrls2(this);
+    const authenticated = readAuthState(this);
+    const showSearch = readShowSearch(this);
+    const brandHref = resolveBrandHref(context, urls);
+    const signInHref = readSignInHref(this, urls);
+    const dashboardHref = this.getAttribute("dashboard-href") ?? `${urls.app}/dashboard`;
+    const desktopNavLinks = this.renderNavLinks(context, urls, "desktop");
+    const mobileNavLinks = this.renderNavLinks(context, urls, "mobile");
+    const desktopAuth = this.renderAuthDesktop(
+      authenticated,
+      signInHref,
+      dashboardHref
+    );
+    const mobileAuth = this.renderAuthMobile(authenticated, dashboardHref, signInHref);
+    const search = this.renderSearchButton(showSearch);
+    this.innerHTML = `
+      <header class="navbar">
+        <div class="navbar-content">
+          <div class="navbar-left">
+            <a href="${escapeHtml(brandHref)}" class="navbar-brand" aria-label="Go to homepage" id="navbar-brand-link">
+              <span
+                class="brand-icon navbar-logo"
+                data-viking-icon="drakkar"
+                data-viking-icon-color="accent"
+                data-viking-icon-size="28"
+                aria-hidden="true"
+              ></span>
+            </a>
+          </div>
+
+          <nav class="navbar-center desktop-nav" aria-label="Main navigation">
+            ${desktopNavLinks}
+          </nav>
+
+          <div class="navbar-right">
+            ${search}
+            ${desktopAuth}
+            <viking-theme-toggle-wc class="theme-toggle-btn" aria-label="Toggle light and dark theme"></viking-theme-toggle-wc>
+            <viking-button-wc
+              variant="outline"
+              square
+              class="menu-toggle-btn"
+              aria-label="Toggle navigation menu"
+              aria-controls="mobile-menu"
+              aria-expanded="false"
+              id="mobile-menu-btn"
+            >
+              <span data-viking-icon="menu" data-viking-icon-size="24" aria-hidden="true"></span>
+            </viking-button-wc>
+          </div>
+        </div>
+
+        <nav class="mobile-menu" id="mobile-menu" aria-label="Mobile navigation" hidden>
+          ${mobileNavLinks}
+          ${mobileAuth}
+        </nav>
+      </header>
+    `;
+  }
+};
+var registerVikingSiteNavbarWc = () => {
+  defineCustomElement(VikingSiteNavbarWc.tag, VikingSiteNavbarWc);
+  defineCustomElementAlias(VikingSiteNavbarWc.legacyTag, VikingSiteNavbarWc);
+};
+
 // src/lib/site-drakkar/suite-search-items.ts
 var dedupeItems = (items) => {
   const seen = /* @__PURE__ */ new Set();
@@ -3086,15 +3993,15 @@ var buildSuiteSearchItems = (context, urls, options) => {
 };
 
 // src/web/suite-search-palette/viking-suite-search-palette-wc.ts
-var VALID_CONTEXTS = /* @__PURE__ */ new Set([
+var VALID_CONTEXTS3 = /* @__PURE__ */ new Set([
   "app",
   "marketing",
   "backend",
   "docs"
 ]);
-var detectContext = () => {
+var detectContext3 = () => {
   const explicit = document.documentElement.getAttribute("data-deml-context");
-  if (explicit && VALID_CONTEXTS.has(explicit)) {
+  if (explicit && VALID_CONTEXTS3.has(explicit)) {
     return explicit;
   }
   const host = window.location.hostname;
@@ -3109,7 +4016,7 @@ var detectContext = () => {
   }
   return "marketing";
 };
-var readUrls = (el) => {
+var readUrls3 = (el) => {
   const env = globalThis.__DEML ?? {};
   return {
     app: el.getAttribute("app-url") ?? env.app ?? DEFAULT_SITE_URLS.app,
@@ -3117,12 +4024,12 @@ var readUrls = (el) => {
     backend: el.getAttribute("backend-url") ?? env.backend ?? DEFAULT_SITE_URLS.backend
   };
 };
-var readContext = (el) => {
+var readContext3 = (el) => {
   const raw = el.getAttribute("context");
-  if (raw && VALID_CONTEXTS.has(raw)) {
+  if (raw && VALID_CONTEXTS3.has(raw)) {
     return raw;
   }
-  return detectContext();
+  return detectContext3();
 };
 var VikingSuiteSearchPaletteWc = class extends HTMLElementBase {
   static tag = "viking-suite-command-palette";
@@ -3194,8 +4101,8 @@ var VikingSuiteSearchPaletteWc = class extends HTMLElementBase {
     if (!this.paletteEl || this.itemsLoaded && !force) {
       return;
     }
-    const context = readContext(this);
-    const urls = readUrls(this);
+    const context = readContext3(this);
+    const urls = readUrls3(this);
     let items = buildSuiteSearchItems(
       context,
       urls,
@@ -3301,22 +4208,29 @@ var VikingThemeToggleWc = class extends HTMLElementBase {
   button = null;
   sunIcon = null;
   moonIcon = null;
+  onStorage = () => {
+    this.syncIcons();
+  };
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
     attachShadowStyles(this.shadow, VIKING_THEME_TOGGLE_STYLES);
   }
   connectedCallback() {
-    if (!this.hasAttribute("role")) {
-      this.setAttribute("role", "button");
-    }
     this.render();
     this.syncIcons();
     this.button?.addEventListener("click", this.onClick);
+    window.addEventListener("storage", this.onStorage);
+    window.addEventListener("viking-theme-change", this.onThemeChange);
   }
   disconnectedCallback() {
     this.button?.removeEventListener("click", this.onClick);
+    window.removeEventListener("storage", this.onStorage);
+    window.removeEventListener("viking-theme-change", this.onThemeChange);
   }
+  onThemeChange = () => {
+    this.syncIcons();
+  };
   onClick = () => {
     const next = readTheme() === "light" ? "dark" : "light";
     applyTheme(next);
@@ -3330,9 +4244,9 @@ var VikingThemeToggleWc = class extends HTMLElementBase {
     );
   };
   syncIcons = () => {
-    const isLight = readTheme() === "light";
-    this.sunIcon?.classList.toggle("is-visible", isLight);
-    this.moonIcon?.classList.toggle("is-visible", !isLight);
+    const isDark = readTheme() === "dark";
+    this.sunIcon?.classList.toggle("is-visible", isDark);
+    this.moonIcon?.classList.toggle("is-visible", !isDark);
   };
   render() {
     const label = this.getAttribute("aria-label") ?? "Toggle light and dark theme";
@@ -3357,7 +4271,7 @@ var registerVikingThemeToggleWc = () => {
 };
 
 // src/web/suite-header/viking-suite-header-wc.ts
-var VALID_CONTEXTS2 = /* @__PURE__ */ new Set([
+var VALID_CONTEXTS4 = /* @__PURE__ */ new Set([
   "app",
   "marketing",
   "backend",
@@ -3708,9 +4622,9 @@ viking-suite-command-palette {
   }
 }
 `;
-var detectContext2 = () => {
+var detectContext4 = () => {
   const explicit = document.documentElement.getAttribute("data-deml-context");
-  if (explicit && VALID_CONTEXTS2.has(explicit)) {
+  if (explicit && VALID_CONTEXTS4.has(explicit)) {
     return explicit;
   }
   const host = window.location.hostname;
@@ -3725,14 +4639,14 @@ var detectContext2 = () => {
   }
   return "marketing";
 };
-var readContext2 = (el) => {
+var readContext4 = (el) => {
   const raw = el.getAttribute("context");
-  if (raw && VALID_CONTEXTS2.has(raw)) {
+  if (raw && VALID_CONTEXTS4.has(raw)) {
     return raw;
   }
-  return detectContext2();
+  return detectContext4();
 };
-var readUrls2 = (el) => {
+var readUrls4 = (el) => {
   const env = globalThis.__DEML ?? {};
   return {
     app: el.getAttribute("app-url") ?? env.app ?? DEFAULT_SITE_URLS.app,
@@ -3917,8 +4831,8 @@ var VikingSuiteHeaderWc = class extends HTMLElementBase {
     return this.getAttribute("dashboard-href") ?? `${urls.app}/dashboard`;
   }
   render() {
-    const context = readContext2(this);
-    const urls = readUrls2(this);
+    const context = readContext4(this);
+    const urls = readUrls4(this);
     const authenticated = readBoolAttr(this, "authenticated");
     const navLinks = this.renderNavLinks(context, urls, authenticated);
     const brandHref = resolveBrandHref(context, urls);
@@ -4163,8 +5077,12 @@ var registerVikingElements = () => {
   registerVikingSelectWc();
   registerVikingModalWc();
   registerVikingSearchPaletteWc();
+  registerVikingStatusCardWc();
+  registerVikingStatusPillWc();
   registerVikingSuiteHeaderWc();
   registerVikingSuiteSearchPaletteWc();
+  registerVikingSiteNavbarWc();
+  registerVikingSiteFooterWc();
   registerVikingThemeToggleWc();
 };
 if (typeof globalThis !== "undefined" && typeof document !== "undefined") {
@@ -4184,6 +5102,10 @@ export {
   VikingModalWc,
   VikingSearchPaletteWc,
   VikingSelectWc,
+  VikingSiteFooterWc,
+  VikingSiteNavbarWc,
+  VikingStatusCardWc,
+  VikingStatusPillWc,
   VikingSuiteHeaderWc,
   VikingSuiteSearchPaletteWc,
   VikingThemeToggleWc,
@@ -4197,6 +5119,10 @@ export {
   registerVikingModalWc,
   registerVikingSearchPaletteWc,
   registerVikingSelectWc,
+  registerVikingSiteFooterWc,
+  registerVikingSiteNavbarWc,
+  registerVikingStatusCardWc,
+  registerVikingStatusPillWc,
   registerVikingSuiteHeaderWc,
   registerVikingSuiteSearchPaletteWc,
   registerVikingThemeToggleWc