@dataengineeringformachinelearning/viking-ui 4.0.6 → 4.1.0

package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs

@@ -364,7 +364,7 @@ const attachShadowStyles = (shadow, css) => {
     shadow.append(style);
 };
 /** Reads a boolean attribute presence/value. */
-const readBoolAttr = (el, name) => el.hasAttribute(name) && el.getAttribute(name) !== "false";
+const readBoolAttr$1 = (el, name) => el.hasAttribute(name) && el.getAttribute(name) !== "false";
 /** Safely sets form value when ElementInternals is fully supported (e.g. not in jsdom). */
 const setFormValue = (internals, value) => {
     if (internals && typeof internals.setFormValue === "function") {
@@ -1124,14 +1124,29 @@ const 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);
@@ -1659,6 +1674,11 @@ const VIKING_MODAL_STYLES = `
   display: contents;
 }
 
+.viking-modal-backdrop:not([open]) {
+  display: none !important;
+  pointer-events: none;
+}
+
 .viking-modal-backdrop {
   position: fixed;
   inset: 0;
@@ -2026,7 +2046,7 @@ const VIKING_SEARCH_PALETTE_STYLES = `
 }
 `;
 
-const TONES$1 = new Set([
+const TONES$3 = new Set([
     "accent",
     "secondary",
     "success",
@@ -2070,7 +2090,7 @@ class VikingBadgeWc extends HTMLElementBase {
     }
     get tone() {
         const value = (this.getAttribute("tone") ?? "");
-        return TONES$1.has(value) ? value : null;
+        return TONES$3.has(value) ? value : null;
     }
     get size() {
         return this.getAttribute("size") === "sm" ? "sm" : null;
@@ -2126,14 +2146,15 @@ const VARIANTS = new Set([
 const SIZES = new Set(["sm", "xs"]);
 /**
  * Framework-agnostic Viking button Web Component.
- * Tag: `viking-button` (legacy alias: `viking-button-wc`)
+ * Tag: `viking-button-wc` (Angular reserves `viking-button` for its wrapper component)
  *
  * @example
- * <viking-button variant="primary">Launch</viking-button>
+ * <viking-button-wc variant="primary">Launch</viking-button-wc>
  */
 class VikingButtonWc 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",
@@ -2159,7 +2180,6 @@ class VikingButtonWc extends HTMLElementBase {
     }
     connectedCallback() {
         this.render();
-        this.syncHostSemantics();
         this.control?.addEventListener("click", this.onClick);
     }
     disconnectedCallback() {
@@ -2168,7 +2188,6 @@ class VikingButtonWc extends HTMLElementBase {
     attributeChangedCallback() {
         if (this.isConnected) {
             this.render();
-            this.syncHostSemantics();
         }
     }
     onClick = (event) => {
@@ -2192,18 +2211,13 @@ class VikingButtonWc extends HTMLElementBase {
         return value && SIZES.has(value) ? value : null;
     }
     get disabled() {
-        return readBoolAttr(this, "disabled");
+        return readBoolAttr$1(this, "disabled");
     }
     get loading() {
-        return readBoolAttr(this, "loading");
+        return readBoolAttr$1(this, "loading");
     }
     get square() {
-        return readBoolAttr(this, "square");
-    }
-    syncHostSemantics() {
-        if (!this.hasAttribute("role")) {
-            this.setAttribute("role", this.getAttribute("href") ? "link" : "button");
-        }
+        return readBoolAttr$1(this, "square");
     }
     render() {
         const href = this.getAttribute("href");
@@ -2244,10 +2258,9 @@ class VikingButtonWc extends HTMLElementBase {
 }
 const registerVikingButtonWc = () => {
     defineCustomElement(VikingButtonWc.tag, VikingButtonWc);
-    defineCustomElementAlias(VikingButtonWc.legacyTag, VikingButtonWc);
 };
 
-const TONES = new Set([
+const TONES$2 = new Set([
     "accent",
     "secondary",
     "success",
@@ -2290,7 +2303,7 @@ class VikingCalloutWc extends HTMLElementBase {
     }
     get tone() {
         const value = (this.getAttribute("tone") ?? "info");
-        return TONES.has(value) ? value : "info";
+        return TONES$2.has(value) ? value : "info";
     }
     get dismissible() {
         return (this.hasAttribute("dismissible") &&
@@ -2458,7 +2471,7 @@ class VikingFieldWc extends HTMLElementBase {
                 control.removeAttribute("error");
             }
         }
-        if (readBoolAttr(this, "required")) {
+        if (readBoolAttr$1(this, "required")) {
             control.setAttribute("required", "");
         }
     };
@@ -2466,7 +2479,7 @@ class VikingFieldWc extends HTMLElementBase {
         const label = this.getAttribute("label") ?? "";
         const description = this.getAttribute("description") ?? "";
         const error = this.getAttribute("error") ?? "";
-        const required = readBoolAttr(this, "required");
+        const required = readBoolAttr$1(this, "required");
         this.shadow.innerHTML = `
       <div class="viking-field" part="field" role="group" aria-labelledby="${this.labelId}">
         ${label
@@ -2566,16 +2579,16 @@ class VikingInputWc extends HTMLElementBase {
         this.syncFormValue();
     }
     get disabled() {
-        return readBoolAttr(this, "disabled");
+        return readBoolAttr$1(this, "disabled");
     }
     get loading() {
-        return readBoolAttr(this, "loading");
+        return readBoolAttr$1(this, "loading");
     }
     get clearable() {
-        return readBoolAttr(this, "clearable");
+        return readBoolAttr$1(this, "clearable");
     }
     get bare() {
-        return readBoolAttr(this, "bare");
+        return readBoolAttr$1(this, "bare");
     }
     onInput = () => {
         const next = this.input?.value ?? "";
@@ -2615,8 +2628,8 @@ class VikingInputWc extends HTMLElementBase {
         const maxLength = escapeHtml(this.getAttribute("maxlength") ?? "");
         const pattern = escapeHtml(this.getAttribute("pattern") ?? "");
         const error = this.getAttribute("error") ?? "";
-        const required = readBoolAttr(this, "required");
-        const readonly = readBoolAttr(this, "readonly");
+        const required = readBoolAttr$1(this, "required");
+        const readonly = readBoolAttr$1(this, "readonly");
         const showClear = this.clearable && value.length > 0 && !this.loading && !this.bare;
         const nativeAttrs = `
       ${this.disabled || this.loading ? "disabled" : ""}
@@ -2674,7 +2687,7 @@ const registerVikingInputWc = () => {
 
 /**
  * Framework-agnostic modal Web Component using native `<dialog>` semantics.
- * Tag: `viking-modal` (legacy aliases: `viking-modal-wc`, `viking-dialog`)
+ * Tag: `viking-modal-wc` (Angular reserves `viking-modal`; alias: `viking-dialog`)
  *
  * @attr open - When present, shows the modal
  * @attr title - Dialog title for aria-label / heading
@@ -2689,14 +2702,15 @@ const registerVikingInputWc = () => {
  * @event viking-close - Fired when the dialog closes
  *
  * @example
- * <viking-modal title="Confirm deploy">
+ * <viking-modal-wc title="Confirm deploy">
  *   <p>Push v2.0.0 to production?</p>
- *   <viking-button slot="actions" variant="primary">Deploy</viking-button>
- * </viking-modal>
+ *   <viking-button-wc slot="actions" variant="primary">Deploy</viking-button-wc>
+ * </viking-modal-wc>
  */
 class VikingModalWc 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"];
@@ -2820,7 +2834,6 @@ class VikingModalWc extends HTMLElementBase {
 }
 const registerVikingModalWc = () => {
     defineCustomElement(VikingModalWc.tag, VikingModalWc);
-    defineCustomElementAlias(VikingModalWc.legacyTag, VikingModalWc);
     defineCustomElementAlias(VikingModalWc.dialogTag, VikingModalWc);
 };
 
@@ -3034,7 +3047,7 @@ class VikingSearchPaletteWc extends HTMLElementBase {
         }
     };
     bindGlobalShortcut() {
-        if (!readBoolAttr(this, "global-shortcut")) {
+        if (!readBoolAttr$1(this, "global-shortcut")) {
             return;
         }
         this.globalKeyHandler = (event) => {
@@ -3223,10 +3236,571 @@ class VikingSearchPaletteWc extends HTMLElementBase {
         });
     }
 }
-const registerVikingSearchPaletteWc = () => {
-    defineCustomElement(VikingSearchPaletteWc.tag, VikingSearchPaletteWc);
-    defineCustomElementAlias(VikingSearchPaletteWc.searchTag, VikingSearchPaletteWc);
-    defineCustomElementAlias(VikingSearchPaletteWc.legacyTag, VikingSearchPaletteWc);
+const registerVikingSearchPaletteWc = () => {
+    defineCustomElement(VikingSearchPaletteWc.tag, VikingSearchPaletteWc);
+    defineCustomElementAlias(VikingSearchPaletteWc.searchTag, VikingSearchPaletteWc);
+    defineCustomElementAlias(VikingSearchPaletteWc.legacyTag, VikingSearchPaletteWc);
+};
+
+const TONES$1 = new Set([
+    "accent",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "muted",
+]);
+/**
+ * Framework-agnostic status page card with title/subtitle, optional status chip,
+ * and optional action slot.
+ * Tag: `viking-status-card` (legacy alias: `viking-status-card-wc`)
+ *
+ * @attr title - Card heading
+ * @attr subtitle - Supporting body text
+ * @attr status - Optional status chip label
+ * @attr status-tone - accent | secondary | success | warning | danger | info | muted
+ * @attr status-clickable - Wrap status in anchor style token (visual-only)
+ * @attr href - Optional outbound/intra-app card link
+ * @attr compact - Reduce padding and spacing
+ * @attr loading - Reserved loading state class
+ */
+class VikingStatusCardWc 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 TONES$1.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}>
+    `;
+    }
+}
+const 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;
+}
+`;
+const registerVikingStatusCardWc = () => {
+    defineCustomElement(VikingStatusCardWc.tag, VikingStatusCardWc);
+    defineCustomElementAlias(VikingStatusCardWc.legacyTag, VikingStatusCardWc);
+};
+
+const TONES = new Set([
+    "accent",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "muted",
+]);
+/**
+ * Framework-agnostic Viking status pill.
+ * Tag: `viking-status-pill` (legacy alias: `viking-status-pill-wc`)
+ *
+ * @attr tone - accent | secondary | success | warning | danger | info | muted
+ * @attr icon - Optional icon name for leading glyph
+ * @attr href - Optional navigation target
+ * @attr compact - Reduced pill footprint
+ * @attr dot - Shows a status dot
+ * @attr removable - Renders a close control; emits `viking-pill-removed`
+ */
+class VikingStatusPillWc 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 TONES.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);
+    }
+}
+const 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;
+}
+`;
+const registerVikingStatusPillWc = () => {
+    defineCustomElement(VikingStatusPillWc.tag, VikingStatusPillWc);
+    defineCustomElementAlias(VikingStatusPillWc.legacyTag, VikingStatusPillWc);
 };
 
 /** Primary navbar links (desktop + mobile). Shown on every surface. */
@@ -3446,6 +4020,381 @@ const DEFAULT_SITE_URLS = {
     backend: "https://backend.deml.app",
 };
 
+const VALID_CONTEXTS$3 = new Set([
+    "app",
+    "marketing",
+    "backend",
+    "docs",
+]);
+const detectContext$3 = () => {
+    const explicit = document.documentElement.getAttribute("data-deml-context");
+    if (explicit && VALID_CONTEXTS$3.has(explicit)) {
+        return explicit;
+    }
+    const host = window.location.hostname;
+    if (host.startsWith("backend.")) {
+        return "backend";
+    }
+    if (host.includes("deml.app")) {
+        return "app";
+    }
+    return "marketing";
+};
+const readContext$3 = (el) => {
+    const attr = el.getAttribute("context");
+    if (attr && VALID_CONTEXTS$3.has(attr)) {
+        return attr;
+    }
+    return detectContext$3();
+};
+const readUrls$3 = (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,
+    };
+};
+const readYear = (el) => {
+    const raw = el.getAttribute("year");
+    const value = raw ? Number(raw) : new Date().getFullYear();
+    return Number.isFinite(value) ? value : new Date().getFullYear();
+};
+const 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("");
+};
+/**
+ * viking-site-footer-wc — unified static Drakkar footer for non-Angular surfaces.
+ */
+class VikingSiteFooterWc 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$3(this);
+        const urls = readUrls$3(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">🇺🇸</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 © ${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>
+    `;
+    }
+}
+const registerVikingSiteFooterWc = () => {
+    defineCustomElement(VikingSiteFooterWc.tag, VikingSiteFooterWc);
+    defineCustomElementAlias(VikingSiteFooterWc.legacyTag, VikingSiteFooterWc);
+};
+
+const VALID_CONTEXTS$2 = new Set([
+    "app",
+    "marketing",
+    "backend",
+    "docs",
+]);
+const detectContext$2 = () => {
+    const explicit = document.documentElement.getAttribute("data-deml-context");
+    if (explicit && VALID_CONTEXTS$2.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";
+};
+const readContext$2 = (el) => {
+    const attr = el.getAttribute("context");
+    if (attr && VALID_CONTEXTS$2.has(attr)) {
+        return attr;
+    }
+    return detectContext$2();
+};
+const readBoolAttr = (el, name) => {
+    const value = el.getAttribute(name);
+    return value !== null && value !== "false";
+};
+const readUrls$2 = (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,
+    };
+};
+const readAuthState = (el) => readBoolAttr(el, "authenticated");
+const readShowSearch = (el) => {
+    const explicit = el.getAttribute("show-search");
+    if (explicit === null) {
+        return true;
+    }
+    return readBoolAttr(el, "show-search");
+};
+const 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)}`;
+};
+/**
+ * viking-site-navbar-wc — unified static Drakkar navbar for non-Angular surfaces.
+ * Styling is supplied by viking-ui global CSS.
+ */
+class VikingSiteNavbarWc 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)
+            ? "⌘K"
+            : "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 = readContext$2(this);
+        const urls = readUrls$2(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>
+    `;
+    }
+}
+const registerVikingSiteNavbarWc = () => {
+    defineCustomElement(VikingSiteNavbarWc.tag, VikingSiteNavbarWc);
+    defineCustomElementAlias(VikingSiteNavbarWc.legacyTag, VikingSiteNavbarWc);
+};
+
 const dedupeItems = (items) => {
     const seen = new Set();
     return items.filter((item) => {
@@ -3721,7 +4670,7 @@ class VikingSuiteSearchPaletteWc extends HTMLElementBase {
             return;
         }
         if (name === "global-shortcut" && this.paletteEl) {
-            if (readBoolAttr(this, "global-shortcut") ||
+            if (readBoolAttr$1(this, "global-shortcut") ||
                 !this.hasAttribute("global-shortcut")) {
                 this.paletteEl.setAttribute("global-shortcut", "");
             }
@@ -3755,7 +4704,7 @@ class VikingSuiteSearchPaletteWc extends HTMLElementBase {
         const placeholder = this.getAttribute("placeholder") ??
             "Search documentation, dashboard, settings…";
         this.paletteEl.setAttribute("placeholder", placeholder);
-        if (readBoolAttr(this, "global-shortcut") ||
+        if (readBoolAttr$1(this, "global-shortcut") ||
             !this.hasAttribute("global-shortcut")) {
             this.paletteEl.setAttribute("global-shortcut", "");
         }
@@ -3867,22 +4816,29 @@ class VikingThemeToggleWc 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);
@@ -3894,9 +4850,10 @@ class VikingThemeToggleWc extends HTMLElementBase {
         }));
     };
     syncIcons = () => {
-        const isLight = readTheme() === "light";
-        this.sunIcon?.classList.toggle("is-visible", isLight);
-        this.moonIcon?.classList.toggle("is-visible", !isLight);
+        // Match Angular viking-theme-toggle: sun in dark mode (switch to light).
+        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";
@@ -4494,7 +5451,7 @@ class VikingSuiteHeaderWc extends HTMLElementBase {
     render() {
         const context = readContext(this);
         const urls = readUrls(this);
-        const authenticated = readBoolAttr(this, "authenticated");
+        const authenticated = readBoolAttr$1(this, "authenticated");
         const navLinks = this.renderNavLinks(context, urls, authenticated);
         const brandHref = resolveBrandHref(context, urls);
         const shortcut = `${modKeyLabel()}K`;
@@ -4766,8 +5723,12 @@ const registerVikingElements = () => {
     registerVikingSelectWc();
     registerVikingModalWc();
     registerVikingSearchPaletteWc();
+    registerVikingStatusCardWc();
+    registerVikingStatusPillWc();
     registerVikingSuiteHeaderWc();
     registerVikingSuiteSearchPaletteWc();
+    registerVikingSiteNavbarWc();
+    registerVikingSiteFooterWc();
     registerVikingThemeToggleWc();
 };
 // Auto-register when loaded as a script bundle (Astro, Django, static HTML).
@@ -5083,7 +6044,7 @@ class VikingButton {
       } @else if (icon()) {
         <viking-icon [name]="icon()!" [size]="iconSize()" />
       }
-      <span class="viking-btn-label"><ng-content /></span>
+      <ng-content />
       @if (!loading() && iconTrailing()) {
         <viking-icon [name]="iconTrailing()!" [size]="iconSize()" />
       }
@@ -5119,7 +6080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       } @else if (icon()) {
         <viking-icon [name]="icon()!" [size]="iconSize()" />
       }
-      <span class="viking-btn-label"><ng-content /></span>
+      <ng-content />
       @if (!loading() && iconTrailing()) {
         <viking-icon [name]="iconTrailing()!" [size]="iconSize()" />
       }
@@ -5214,6 +6175,22 @@ class VikingSiteNavbar {
     closeMobileMenu() {
         this.mobileMenuOpen.set(false);
     }
+    closeMobileMenuOnOutsideClick(event) {
+        if (!this.mobileMenuOpen())
+            return;
+        const target = event.target;
+        if (!(target instanceof Node))
+            return;
+        const path = typeof event.composedPath === 'function' ? event.composedPath() : [target];
+        const menu = document.getElementById('mobile-menu');
+        const toggle = document.getElementById('mobile-menu-btn');
+        const clickedInside = path.some((node) => node instanceof Node &&
+            ((menu && (node === menu || menu.contains(node))) ||
+                (toggle && (node === toggle || toggle.contains(node)))));
+        if (!clickedInside) {
+            this.closeMobileMenu();
+        }
+    }
     openSearch() {
         this.closeMobileMenu();
         this.searchOpen.emit();
@@ -5230,7 +6207,7 @@ class VikingSiteNavbar {
         this.closeMobileMenu();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: VikingSiteNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: VikingSiteNavbar, isStandalone: true, selector: "viking-site-navbar", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, urls: { classPropertyName: "urls", publicName: "urls", isSignal: true, isRequired: false, transformFunction: null }, isAuthenticated: { classPropertyName: "isAuthenticated", publicName: "isAuthenticated", isSignal: true, isRequired: false, transformFunction: null }, isBusy: { classPropertyName: "isBusy", publicName: "isBusy", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", logout: "logout", themeToggle: "themeToggle", searchOpen: "searchOpen" }, host: { listeners: { "window:resize": "closeMobileMenuOnDesktop()", "document:keydown.escape": "closeMobileMenuOnEscape()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: VikingSiteNavbar, isStandalone: true, selector: "viking-site-navbar", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, urls: { classPropertyName: "urls", publicName: "urls", isSignal: true, isRequired: false, transformFunction: null }, isAuthenticated: { classPropertyName: "isAuthenticated", publicName: "isAuthenticated", isSignal: true, isRequired: false, transformFunction: null }, isBusy: { classPropertyName: "isBusy", publicName: "isBusy", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", logout: "logout", themeToggle: "themeToggle", searchOpen: "searchOpen" }, host: { listeners: { "document:click": "closeMobileMenuOnOutsideClick($event)", "window:resize": "closeMobileMenuOnDesktop()", "document:keydown.escape": "closeMobileMenuOnEscape()" } }, ngImport: i0, template: `
     <header class="navbar">
       <div class="navbar-content">
         <div class="navbar-left">
@@ -5639,7 +6616,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       </nav>
     </header>
   ` }]
-        }], propDecorators: { context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], urls: [{ type: i0.Input, args: [{ isSignal: true, alias: "urls", required: false }] }], isAuthenticated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAuthenticated", required: false }] }], isBusy: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBusy", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], login: [{ type: i0.Output, args: ["login"] }], logout: [{ type: i0.Output, args: ["logout"] }], themeToggle: [{ type: i0.Output, args: ["themeToggle"] }], searchOpen: [{ type: i0.Output, args: ["searchOpen"] }], closeMobileMenuOnDesktop: [{
+        }], propDecorators: { context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], urls: [{ type: i0.Input, args: [{ isSignal: true, alias: "urls", required: false }] }], isAuthenticated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAuthenticated", required: false }] }], isBusy: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBusy", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], login: [{ type: i0.Output, args: ["login"] }], logout: [{ type: i0.Output, args: ["logout"] }], themeToggle: [{ type: i0.Output, args: ["themeToggle"] }], searchOpen: [{ type: i0.Output, args: ["searchOpen"] }], closeMobileMenuOnOutsideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], closeMobileMenuOnDesktop: [{
                 type: HostListener,
                 args: ["window:resize"]
             }], closeMobileMenuOnEscape: [{
@@ -8636,6 +9616,12 @@ class VikingModal {
             }
         });
     }
+    ngOnDestroy() {
+        const dialog = this.dialogRef()?.nativeElement;
+        if (dialog?.open) {
+            dialog.close();
+        }
+    }
     onBackdropClick = (event) => {
         if (this.dismissible() && event.target === this.dialogRef().nativeElement) {
             this.open.set(false);
@@ -8674,7 +9660,7 @@ class VikingModal {
         </footer>
       </div>
     </dialog>
-  `, isInline: true, styles: [".viking-modal{padding:0;border:1px solid var(--viking-border-strong);border-radius:var(--viking-radius-lg);background:var(--viking-surface);color:var(--viking-text);box-shadow:var(--viking-shadow-lg);width:min(522px,calc(100vw - var(--viking-space-4)));animation:viking-modal-in var(--viking-duration) var(--viking-ease-default);overflow:hidden}.viking-modal::backdrop{background:var(--viking-overlay-backdrop);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:viking-backdrop-in var(--viking-duration-fast) var(--viking-ease-default)}.viking-modal-surface{display:flex;flex-direction:column;padding:var(--viking-space-3);gap:var(--viking-space-2);font-family:var(--viking-font-family);position:relative}.viking-modal-surface:before{content:\"\";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--viking-metallic-200) 22%,transparent),transparent);pointer-events:none}.viking-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--viking-space-2);padding-bottom:var(--viking-space-1);border-bottom:1px solid var(--viking-border-subtle)}.viking-modal-heading{margin:0;font-size:var(--viking-font-size-md);font-weight:var(--viking-font-weight-bold);letter-spacing:var(--viking-letter-spacing-tight);color:var(--viking-text);line-height:var(--viking-line-height-tight)}.viking-modal-close{display:inline-flex;align-items:center;justify-content:center;width:var(--viking-control-height-sm);height:var(--viking-control-height-sm);border:1px solid transparent;background:transparent;color:var(--viking-text-muted);cursor:pointer;padding:0;border-radius:var(--viking-radius);transition:var(--viking-transition-interactive);flex-shrink:0}.viking-modal-close:hover{color:var(--viking-text);background:var(--viking-accent-soft);border-color:var(--viking-border-subtle)}.viking-modal-close:active{transform:scale(var(--viking-state-active-scale))}.viking-modal-close:focus-visible{outline:var(--viking-ring-width) solid var(--viking-ring);outline-offset:var(--viking-ring-offset)}.viking-modal-body{font-size:var(--viking-font-size);line-height:var(--viking-line-height-relaxed);color:var(--viking-text-muted);animation:viking-fade-in var(--viking-duration) var(--viking-ease-default)}.viking-modal-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--viking-space-2);padding-top:var(--viking-space-2);border-top:1px solid var(--viking-border-subtle)}.viking-modal-footer:empty{display:none}:host ::ng-deep .viking-modal-footer [vikingModalActions]{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:var(--viking-space-2);width:100%}@media(prefers-reduced-motion:reduce){.viking-modal{animation:none}.viking-modal::backdrop{animation:none}.viking-modal-body{animation:none}}\n"], dependencies: [{ kind: "component", type: VikingIcon, selector: "viking-icon", inputs: ["name", "size", "sizePreset", "variant", "color", "backdrop", "backdropTone", "spin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".viking-modal{padding:0;border:1px solid var(--viking-border-strong);border-radius:var(--viking-radius-lg);background:var(--viking-surface);color:var(--viking-text);box-shadow:var(--viking-shadow-lg);width:min(522px,calc(100vw - var(--viking-space-4)));animation:viking-modal-in var(--viking-duration) var(--viking-ease-default);overflow:hidden}.viking-modal:not([open]){display:none!important;pointer-events:none}.viking-modal::backdrop{background:var(--viking-overlay-backdrop);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:viking-backdrop-in var(--viking-duration-fast) var(--viking-ease-default)}.viking-modal-surface{display:flex;flex-direction:column;padding:var(--viking-space-3);gap:var(--viking-space-2);font-family:var(--viking-font-family);position:relative}.viking-modal-surface:before{content:\"\";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--viking-metallic-200) 22%,transparent),transparent);pointer-events:none}.viking-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--viking-space-2);padding-bottom:var(--viking-space-1);border-bottom:1px solid var(--viking-border-subtle)}.viking-modal-heading{margin:0;font-size:var(--viking-font-size-md);font-weight:var(--viking-font-weight-bold);letter-spacing:var(--viking-letter-spacing-tight);color:var(--viking-text);line-height:var(--viking-line-height-tight)}.viking-modal-close{display:inline-flex;align-items:center;justify-content:center;width:var(--viking-control-height-sm);height:var(--viking-control-height-sm);border:1px solid transparent;background:transparent;color:var(--viking-text-muted);cursor:pointer;padding:0;border-radius:var(--viking-radius);transition:var(--viking-transition-interactive);flex-shrink:0}.viking-modal-close:hover{color:var(--viking-text);background:var(--viking-accent-soft);border-color:var(--viking-border-subtle)}.viking-modal-close:active{transform:scale(var(--viking-state-active-scale))}.viking-modal-close:focus-visible{outline:var(--viking-ring-width) solid var(--viking-ring);outline-offset:var(--viking-ring-offset)}.viking-modal-body{font-size:var(--viking-font-size);line-height:var(--viking-line-height-relaxed);color:var(--viking-text-muted);animation:viking-fade-in var(--viking-duration) var(--viking-ease-default)}.viking-modal-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--viking-space-2);padding-top:var(--viking-space-2);border-top:1px solid var(--viking-border-subtle)}.viking-modal-footer:empty{display:none}:host ::ng-deep .viking-modal-footer [vikingModalActions]{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:var(--viking-space-2);width:100%}@media(prefers-reduced-motion:reduce){.viking-modal{animation:none}.viking-modal::backdrop{animation:none}.viking-modal-body{animation:none}}\n"], dependencies: [{ kind: "component", type: VikingIcon, selector: "viking-icon", inputs: ["name", "size", "sizePreset", "variant", "color", "backdrop", "backdropTone", "spin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: VikingModal, decorators: [{
             type: Component,
@@ -8710,7 +9696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         </footer>
       </div>
     </dialog>
-  `, styles: [".viking-modal{padding:0;border:1px solid var(--viking-border-strong);border-radius:var(--viking-radius-lg);background:var(--viking-surface);color:var(--viking-text);box-shadow:var(--viking-shadow-lg);width:min(522px,calc(100vw - var(--viking-space-4)));animation:viking-modal-in var(--viking-duration) var(--viking-ease-default);overflow:hidden}.viking-modal::backdrop{background:var(--viking-overlay-backdrop);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:viking-backdrop-in var(--viking-duration-fast) var(--viking-ease-default)}.viking-modal-surface{display:flex;flex-direction:column;padding:var(--viking-space-3);gap:var(--viking-space-2);font-family:var(--viking-font-family);position:relative}.viking-modal-surface:before{content:\"\";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--viking-metallic-200) 22%,transparent),transparent);pointer-events:none}.viking-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--viking-space-2);padding-bottom:var(--viking-space-1);border-bottom:1px solid var(--viking-border-subtle)}.viking-modal-heading{margin:0;font-size:var(--viking-font-size-md);font-weight:var(--viking-font-weight-bold);letter-spacing:var(--viking-letter-spacing-tight);color:var(--viking-text);line-height:var(--viking-line-height-tight)}.viking-modal-close{display:inline-flex;align-items:center;justify-content:center;width:var(--viking-control-height-sm);height:var(--viking-control-height-sm);border:1px solid transparent;background:transparent;color:var(--viking-text-muted);cursor:pointer;padding:0;border-radius:var(--viking-radius);transition:var(--viking-transition-interactive);flex-shrink:0}.viking-modal-close:hover{color:var(--viking-text);background:var(--viking-accent-soft);border-color:var(--viking-border-subtle)}.viking-modal-close:active{transform:scale(var(--viking-state-active-scale))}.viking-modal-close:focus-visible{outline:var(--viking-ring-width) solid var(--viking-ring);outline-offset:var(--viking-ring-offset)}.viking-modal-body{font-size:var(--viking-font-size);line-height:var(--viking-line-height-relaxed);color:var(--viking-text-muted);animation:viking-fade-in var(--viking-duration) var(--viking-ease-default)}.viking-modal-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--viking-space-2);padding-top:var(--viking-space-2);border-top:1px solid var(--viking-border-subtle)}.viking-modal-footer:empty{display:none}:host ::ng-deep .viking-modal-footer [vikingModalActions]{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:var(--viking-space-2);width:100%}@media(prefers-reduced-motion:reduce){.viking-modal{animation:none}.viking-modal::backdrop{animation:none}.viking-modal-body{animation:none}}\n"] }]
+  `, styles: [".viking-modal{padding:0;border:1px solid var(--viking-border-strong);border-radius:var(--viking-radius-lg);background:var(--viking-surface);color:var(--viking-text);box-shadow:var(--viking-shadow-lg);width:min(522px,calc(100vw - var(--viking-space-4)));animation:viking-modal-in var(--viking-duration) var(--viking-ease-default);overflow:hidden}.viking-modal:not([open]){display:none!important;pointer-events:none}.viking-modal::backdrop{background:var(--viking-overlay-backdrop);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:viking-backdrop-in var(--viking-duration-fast) var(--viking-ease-default)}.viking-modal-surface{display:flex;flex-direction:column;padding:var(--viking-space-3);gap:var(--viking-space-2);font-family:var(--viking-font-family);position:relative}.viking-modal-surface:before{content:\"\";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--viking-metallic-200) 22%,transparent),transparent);pointer-events:none}.viking-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--viking-space-2);padding-bottom:var(--viking-space-1);border-bottom:1px solid var(--viking-border-subtle)}.viking-modal-heading{margin:0;font-size:var(--viking-font-size-md);font-weight:var(--viking-font-weight-bold);letter-spacing:var(--viking-letter-spacing-tight);color:var(--viking-text);line-height:var(--viking-line-height-tight)}.viking-modal-close{display:inline-flex;align-items:center;justify-content:center;width:var(--viking-control-height-sm);height:var(--viking-control-height-sm);border:1px solid transparent;background:transparent;color:var(--viking-text-muted);cursor:pointer;padding:0;border-radius:var(--viking-radius);transition:var(--viking-transition-interactive);flex-shrink:0}.viking-modal-close:hover{color:var(--viking-text);background:var(--viking-accent-soft);border-color:var(--viking-border-subtle)}.viking-modal-close:active{transform:scale(var(--viking-state-active-scale))}.viking-modal-close:focus-visible{outline:var(--viking-ring-width) solid var(--viking-ring);outline-offset:var(--viking-ring-offset)}.viking-modal-body{font-size:var(--viking-font-size);line-height:var(--viking-line-height-relaxed);color:var(--viking-text-muted);animation:viking-fade-in var(--viking-duration) var(--viking-ease-default)}.viking-modal-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--viking-space-2);padding-top:var(--viking-space-2);border-top:1px solid var(--viking-border-subtle)}.viking-modal-footer:empty{display:none}:host ::ng-deep .viking-modal-footer [vikingModalActions]{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:var(--viking-space-2);width:100%}@media(prefers-reduced-motion:reduce){.viking-modal{animation:none}.viking-modal::backdrop{animation:none}.viking-modal-body{animation:none}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dialogRef: [{ type: i0.ViewChild, args: ["dialog", { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }] } });
 
 /**
@@ -12693,6 +13679,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     }, template: `<ng-content />`, styles: [":host(.viking-sidebar-nav){padding:var(--viking-space-1) var(--viking-space-1) var(--viking-space-1);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}@media(min-width:901px){:host(.viking-sidebar-nav){padding:var(--viking-space-2) 0;flex-direction:column;flex-wrap:nowrap;gap:var(--viking-space-1)}}:host(.viking-sidebar-nav-link){display:contents}:host(.viking-sidebar-nav-link) a{display:flex;align-items:center;gap:var(--viking-space-1);padding:10px 14px;color:var(--text-color);text-decoration:none;font-weight:var(--viking-font-weight-semibold);font-size:var(--viking-font-size-base);transition:color var(--viking-duration) var(--viking-ease-default),background-color var(--viking-duration) var(--viking-ease-default),border-color var(--viking-duration) var(--viking-ease-default);border-left:3px solid transparent;border-bottom:3px solid transparent;border-radius:var(--viking-radius);flex:0 0 auto;min-height:44px;white-space:nowrap;cursor:pointer;background:transparent;font-family:var(--viking-font-family);box-sizing:border-box;width:auto}:host(.viking-sidebar-nav-link) a:hover{background-color:var(--sidebar-hover-bg);color:var(--text-color)}:host(.viking-sidebar-nav-link) a:focus-visible{outline:var(--viking-ring-width) solid var(--viking-ring);outline-offset:var(--viking-ring-offset)}:host(.viking-sidebar-nav-link) a.viking-sidebar-nav-link-active{background:var(--sidebar-active-bg);border-left-color:transparent;border-bottom-color:var(--sidebar-active-border);color:var(--sidebar-active-border)}@media(min-width:901px){:host(.viking-sidebar-nav-link) a{width:100%;padding:var(--viking-space-1) var(--viking-space-2);border-bottom:none;border-left:3px solid transparent;border-radius:0;min-height:0}:host(.viking-sidebar-nav-link) a.viking-sidebar-nav-link-active{border-left-color:var(--sidebar-active-border);border-bottom-color:transparent}}:host(.viking-sidebar-nav-tree){display:flex;flex-direction:column;flex:1 1 100%;width:100%;margin:4px 0 0;padding-top:var(--viking-space-1);border-top:1px solid var(--sidebar-border)}@media(min-width:901px){:host(.viking-sidebar-nav-tree){flex:none;width:auto;margin:var(--viking-space-1) 0;padding-top:0;border-top:none}}:host(.viking-sidebar-nav-tree-header){display:flex;align-items:center;justify-content:space-between;padding:var(--viking-space-1) var(--viking-space-2) var(--viking-space-1) 56px;color:var(--text-muted);font-size:var(--viking-font-size-base);font-weight:var(--viking-font-weight-bold);text-transform:uppercase;letter-spacing:var(--viking-letter-spacing-wide);cursor:pointer;transition:color var(--viking-duration) var(--viking-ease-default);font-family:var(--viking-font-family);border:none;background:transparent;width:100%;text-align:left}:host(.viking-sidebar-nav-tree-header):hover{color:var(--text-color)}:host(.viking-sidebar-nav-tree-header):focus-visible{outline:var(--viking-ring-width) solid var(--viking-ring);outline-offset:var(--viking-ring-offset)}:host(.viking-sidebar-nav-tree-children){display:flex;flex-direction:column;padding:0;margin:0;border:none}:host(.viking-sidebar-nav-tree-item){display:flex;align-items:center;gap:var(--viking-space-1);padding:var(--viking-space-1) var(--viking-space-2) var(--viking-space-1) 56px;color:var(--text-muted);font-size:var(--viking-font-size-base);font-weight:var(--viking-font-weight-medium);cursor:pointer;transition:color var(--viking-duration) var(--viking-ease-default),background-color var(--viking-duration) var(--viking-ease-default),border-color var(--viking-duration) var(--viking-ease-default);border-left:3px solid transparent;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent;font-family:var(--viking-font-family);border-top:none;border-right:none;border-bottom:none;width:100%;text-align:left;box-sizing:border-box}:host(.viking-sidebar-nav-tree-item):hover{background-color:var(--sidebar-hover-bg);color:var(--text-color)}:host(.viking-sidebar-nav-tree-item):focus-visible{outline:var(--viking-ring-width) solid var(--viking-ring);outline-offset:var(--viking-ring-offset)}:host(.viking-sidebar-nav-tree-item).viking-sidebar-nav-tree-item-active{background:var(--sidebar-active-bg);border-left-color:var(--sidebar-active-border);color:var(--sidebar-active-border);font-weight:var(--viking-font-weight-semibold)}:host(.viking-sidebar-nav-tree-item).viking-sidebar-nav-tree-item-empty{font-style:italic;color:var(--text-muted);cursor:default}:host(.viking-sidebar-nav-tree-item).viking-sidebar-nav-tree-item-empty:hover{background-color:transparent;color:var(--text-muted)}:host(.viking-sidebar-nav-tree-item).viking-sidebar-nav-tree-item-accent{color:var(--status-accent);font-weight:var(--viking-font-weight-semibold);border-left:3px solid transparent}:host(.viking-sidebar-nav-tree-item).viking-sidebar-nav-tree-item-accent:hover{background-color:var(--sidebar-hover-bg);color:var(--status-accent)}.viking-sidebar-nav-tree-arrow{font-size:20px;width:20px;height:20px;line-height:20px;color:var(--text-muted)}.viking-sidebar-nav-tree-icon{font-size:var(--viking-icon-size-md, var(--base-font-size));width:var(--viking-icon-size-md, var(--base-font-size));height:var(--viking-icon-size-md, var(--base-font-size));line-height:var(--viking-icon-size-md, var(--base-font-size))}\n"] }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 
+registerVikingElements();
+/**
+ * viking-status-card — wrapper around the web component.
+ */
+class VikingStatusCard {
+    title = input("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    status = input("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    statusTone = input("muted", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusTone" }] : /* istanbul ignore next */ []));
+    statusDot = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusDot" }] : /* istanbul ignore next */ []));
+    href = input("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    target = input("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    interactive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    ariaLabel = input("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: VikingStatusCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: VikingStatusCard, isStandalone: true, selector: "viking-status-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusTone: { classPropertyName: "statusTone", publicName: "statusTone", isSignal: true, isRequired: false, transformFunction: null }, statusDot: { classPropertyName: "statusDot", publicName: "statusDot", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <viking-status-card-wc
+      [attr.title]="title()"
+      [attr.subtitle]="subtitle()"
+      [attr.status]="status()"
+      [attr.status-tone]="statusTone()"
+      [attr.status-dot]="statusDot() || null"
+      [attr.href]="href()"
+      [attr.target]="target()"
+      [attr.compact]="compact() || null"
+      [attr.loading]="loading() || null"
+      [attr.interactive]="interactive() || null"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <ng-content />
+    </viking-status-card-wc>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: VikingStatusCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "viking-status-card",
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <viking-status-card-wc
+      [attr.title]="title()"
+      [attr.subtitle]="subtitle()"
+      [attr.status]="status()"
+      [attr.status-tone]="statusTone()"
+      [attr.status-dot]="statusDot() || null"
+      [attr.href]="href()"
+      [attr.target]="target()"
+      [attr.compact]="compact() || null"
+      [attr.loading]="loading() || null"
+      [attr.interactive]="interactive() || null"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <ng-content />
+    </viking-status-card-wc>
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusTone", required: false }] }], statusDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusDot", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
 /**
  * viking-status-metric-row — icon + title/subtitle + value row for status cards.
  */
@@ -12749,6 +13807,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
   `, styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--viking-space-2);padding:var(--viking-space-2);border:1px solid var(--viking-border);border-radius:var(--viking-radius-lg);background:var(--viking-surface)}.stat-info{display:flex;align-items:center;gap:var(--viking-space-2);min-width:0}.stat-title{display:block;font-size:var(--viking-font-size-sm);font-weight:var(--viking-font-weight-semibold);color:var(--viking-text)}.stat-subtitle{display:block;font-size:var(--viking-font-size-sm);color:var(--viking-text-muted)}.stat-value{font-size:calc(var(--viking-font-size) * 1.25);font-weight:700;color:var(--viking-text)}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
+registerVikingElements();
+/**
+ * viking-status-pill — status badge for status cards and operational states.
+ */
+class VikingStatusPill {
+    tone = input("muted", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    icon = input("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    dot = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dot" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    removable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+    href = input("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    target = input("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    ariaLabel = input("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    removed = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: VikingStatusPill, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: VikingStatusPill, isStandalone: true, selector: "viking-status-pill", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: `
+    <viking-status-pill-wc
+      [attr.tone]="tone()"
+      [attr.icon]="icon()"
+      [attr.dot]="dot() || null"
+      [attr.compact]="compact() || null"
+      [attr.removable]="removable() || null"
+      [attr.href]="href()"
+      [attr.target]="target()"
+      [attr.aria-label]="ariaLabel()"
+      (viking-pill-removed)="removed.emit()"
+    >
+      <ng-content />
+    </viking-status-pill-wc>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: VikingStatusPill, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "viking-status-pill",
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <viking-status-pill-wc
+      [attr.tone]="tone()"
+      [attr.icon]="icon()"
+      [attr.dot]="dot() || null"
+      [attr.compact]="compact() || null"
+      [attr.removable]="removable() || null"
+      [attr.href]="href()"
+      [attr.target]="target()"
+      [attr.aria-label]="ariaLabel()"
+      (viking-pill-removed)="removed.emit()"
+    >
+      <ng-content />
+    </viking-status-pill-wc>
+  `,
+                }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+
 /**
  * viking-slider — range slider.
  * ControlValueAccessor-compatible.
@@ -13971,5 +15092,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BUG_REPORT_QUERY, COOKIE_SETTINGS_QUERY, DEFAULT_SITE_URLS, MATERIAL_ICON_ALIASES$1 as MATERIAL_ICON_ALIASES, SITE_FOOTER_COLUMNS, SITE_NAV_LINKS, VIKING_BRAND_ICON_FILLED_PATHS$1 as VIKING_BRAND_ICON_FILLED_PATHS, VIKING_BRAND_ICON_NAMES$1 as VIKING_BRAND_ICON_NAMES, VIKING_BRAND_ICON_NAMES_LIST$1 as VIKING_BRAND_ICON_NAMES_LIST, VIKING_BRAND_ICON_PATHS$1 as VIKING_BRAND_ICON_PATHS, VIKING_DRAKKAR_ICON_FILLED_PATHS$1 as VIKING_DRAKKAR_ICON_FILLED_PATHS, VIKING_DRAKKAR_ICON_NAMES_LIST$1 as VIKING_DRAKKAR_ICON_NAMES_LIST, VIKING_DRAKKAR_ICON_PATHS$1 as VIKING_DRAKKAR_ICON_PATHS, VIKING_FILLED_ICON_NAMES$1 as VIKING_FILLED_ICON_NAMES, VIKING_ICON_FILLED_PATHS$1 as VIKING_ICON_FILLED_PATHS, VIKING_ICON_NAMES$1 as VIKING_ICON_NAMES, VIKING_ICON_PATHS$1 as VIKING_ICON_PATHS, VIKING_ICON_SIZE_PRESETS$1 as VIKING_ICON_SIZE_PRESETS, VIKING_INTEGRATION_BRAND_COLORS$1 as VIKING_INTEGRATION_BRAND_COLORS, VIKING_INTEGRATION_BRAND_NAMES$1 as VIKING_INTEGRATION_BRAND_NAMES, VIKING_INTEGRATION_BRAND_SVGS$1 as VIKING_INTEGRATION_BRAND_SVGS, VIKING_INTEGRATION_ICON_NAMES_LIST$1 as VIKING_INTEGRATION_ICON_NAMES_LIST, VIKING_INTEGRATION_ICON_PATHS$1 as VIKING_INTEGRATION_ICON_PATHS, VIKING_LUCIDE_ICON_NAMES$1 as VIKING_LUCIDE_ICON_NAMES, VIKING_SERIES_DEFAULT, VIKING_SERIES_PRESETS, VIKING_TABS, VIKING_TOGGLE_GROUP, VikingAccordion, VikingAccordionItem, VikingAppHeader, VikingAppSidebar, VikingAuthPanel, VikingAutocomplete, VikingAvatar, VikingBadge, VikingBadgeWc, VikingBar, VikingBrand, VikingBreadcrumbs, VikingButton, VikingButtonGroup, VikingButtonWc, VikingCalendar, VikingCallout, VikingCalloutWc, VikingCard, VikingCardFooter, VikingCardHeader, VikingCardTitle, VikingCardWc, VikingCarousel, VikingCarouselSlide, VikingChart, VikingChartCardHeader, VikingChartEmptyState, VikingChartPanel, VikingCheckbox, VikingColorPicker, VikingCommand, VikingComposer, VikingConfirmDialog, VikingContext, VikingControl, VikingDatePicker, VikingDialogService, VikingDropdown, VikingEditor, VikingEmptyState, VikingFab, VikingField, VikingFieldWc, VikingFileUpload, VikingFooter, VikingFormPanel, VikingFormSection, VikingGaugeArc, VikingHeading, VikingHudPanel, VikingIcon, VikingIconBadge, VikingIcon as VikingIconComponent, VikingIconHeading, VikingIconText, VikingInput, VikingInputWc, VikingKanban, VikingKbd, VikingLabel, VikingLoadingOverlay, VikingMenuItem, VikingMenubar, VikingMenubarItem, VikingMetricCard, VikingMetricRow, VikingModal, VikingModalWc, VikingNativeSelect, VikingNavbar, VikingNavbarItem, VikingNavigationMenu, VikingOtpInput, VikingPageBackLink, VikingPageHeader, VikingPagination, VikingPillbox, VikingPopover, VikingProfile, VikingProgress, VikingRadioGroup, VikingRingGauge, VikingScrollArea, VikingSearchPalette, VikingSearchPaletteWc, VikingSelect, VikingSelectWc, VikingSeparator, VikingSheet, VikingSidebarNav, VikingSidebarNavLink, VikingSidebarNavTree, VikingSidebarNavTreeChildren, VikingSidebarNavTreeHeader, VikingSidebarNavTreeItem, VikingSiteFooter, VikingSiteNavbar, VikingSkeleton, VikingSlider, VikingSpinner, VikingStatusMetricRow, VikingSuiteHeaderWc, VikingSuiteSearchPalette, VikingSuiteSearchPaletteWc, VikingSwitch, VikingTab, VikingTabPanel, VikingTable, VikingTabs, VikingText, VikingTextarea, VikingThemeToggle, VikingThemeToggleWc, VikingTimePicker, VikingTimeline, VikingTimelineItem, VikingToastService, VikingToaster, VikingToggle, VikingToggleGroup, VikingTooltip, VikingUptimeBar, VikingVerificationCodeField, VikingWhitepaperCta, VikingWizard, bugReportHref, buildSuiteSearchItems, clampChartWindow, cookieSettingsHref, fullChartWindow, isAppRouterPath, isIntegrationBrandIcon$1 as isIntegrationBrandIcon, panChartWindow, provideVikingCva, registerVikingBadgeWc, registerVikingButtonWc, registerVikingCalloutWc, registerVikingCardWc, registerVikingElements, registerVikingFieldWc, registerVikingInputWc, registerVikingModalWc, registerVikingSearchPaletteWc, registerVikingSelectWc, registerVikingSuiteHeaderWc, registerVikingSuiteSearchPaletteWc, registerVikingThemeToggleWc, resolveBrandHref, resolveFooterHref, resolveNavHref, resolveVikingIcon$1 as resolveVikingIcon, resolveVikingIconColor$1 as resolveVikingIconColor, resolveVikingIconSize$1 as resolveVikingIconSize, sliceChartData, vikingIconViewBox$1 as vikingIconViewBox, visibleNavLinks, zoomChartWindow };
+export { BUG_REPORT_QUERY, COOKIE_SETTINGS_QUERY, DEFAULT_SITE_URLS, MATERIAL_ICON_ALIASES$1 as MATERIAL_ICON_ALIASES, SITE_FOOTER_COLUMNS, SITE_NAV_LINKS, VIKING_BRAND_ICON_FILLED_PATHS$1 as VIKING_BRAND_ICON_FILLED_PATHS, VIKING_BRAND_ICON_NAMES$1 as VIKING_BRAND_ICON_NAMES, VIKING_BRAND_ICON_NAMES_LIST$1 as VIKING_BRAND_ICON_NAMES_LIST, VIKING_BRAND_ICON_PATHS$1 as VIKING_BRAND_ICON_PATHS, VIKING_DRAKKAR_ICON_FILLED_PATHS$1 as VIKING_DRAKKAR_ICON_FILLED_PATHS, VIKING_DRAKKAR_ICON_NAMES_LIST$1 as VIKING_DRAKKAR_ICON_NAMES_LIST, VIKING_DRAKKAR_ICON_PATHS$1 as VIKING_DRAKKAR_ICON_PATHS, VIKING_FILLED_ICON_NAMES$1 as VIKING_FILLED_ICON_NAMES, VIKING_ICON_FILLED_PATHS$1 as VIKING_ICON_FILLED_PATHS, VIKING_ICON_NAMES$1 as VIKING_ICON_NAMES, VIKING_ICON_PATHS$1 as VIKING_ICON_PATHS, VIKING_ICON_SIZE_PRESETS$1 as VIKING_ICON_SIZE_PRESETS, VIKING_INTEGRATION_BRAND_COLORS$1 as VIKING_INTEGRATION_BRAND_COLORS, VIKING_INTEGRATION_BRAND_NAMES$1 as VIKING_INTEGRATION_BRAND_NAMES, VIKING_INTEGRATION_BRAND_SVGS$1 as VIKING_INTEGRATION_BRAND_SVGS, VIKING_INTEGRATION_ICON_NAMES_LIST$1 as VIKING_INTEGRATION_ICON_NAMES_LIST, VIKING_INTEGRATION_ICON_PATHS$1 as VIKING_INTEGRATION_ICON_PATHS, VIKING_LUCIDE_ICON_NAMES$1 as VIKING_LUCIDE_ICON_NAMES, VIKING_SERIES_DEFAULT, VIKING_SERIES_PRESETS, VIKING_TABS, VIKING_TOGGLE_GROUP, VikingAccordion, VikingAccordionItem, VikingAppHeader, VikingAppSidebar, VikingAuthPanel, VikingAutocomplete, VikingAvatar, VikingBadge, VikingBadgeWc, VikingBar, VikingBrand, VikingBreadcrumbs, VikingButton, VikingButtonGroup, VikingButtonWc, VikingCalendar, VikingCallout, VikingCalloutWc, VikingCard, VikingCardFooter, VikingCardHeader, VikingCardTitle, VikingCardWc, VikingCarousel, VikingCarouselSlide, VikingChart, VikingChartCardHeader, VikingChartEmptyState, VikingChartPanel, VikingCheckbox, VikingColorPicker, VikingCommand, VikingComposer, VikingConfirmDialog, VikingContext, VikingControl, VikingDatePicker, VikingDialogService, VikingDropdown, VikingEditor, VikingEmptyState, VikingFab, VikingField, VikingFieldWc, VikingFileUpload, VikingFooter, VikingFormPanel, VikingFormSection, VikingGaugeArc, VikingHeading, VikingHudPanel, VikingIcon, VikingIconBadge, VikingIcon as VikingIconComponent, VikingIconHeading, VikingIconText, VikingInput, VikingInputWc, VikingKanban, VikingKbd, VikingLabel, VikingLoadingOverlay, VikingMenuItem, VikingMenubar, VikingMenubarItem, VikingMetricCard, VikingMetricRow, VikingModal, VikingModalWc, VikingNativeSelect, VikingNavbar, VikingNavbarItem, VikingNavigationMenu, VikingOtpInput, VikingPageBackLink, VikingPageHeader, VikingPagination, VikingPillbox, VikingPopover, VikingProfile, VikingProgress, VikingRadioGroup, VikingRingGauge, VikingScrollArea, VikingSearchPalette, VikingSearchPaletteWc, VikingSelect, VikingSelectWc, VikingSeparator, VikingSheet, VikingSidebarNav, VikingSidebarNavLink, VikingSidebarNavTree, VikingSidebarNavTreeChildren, VikingSidebarNavTreeHeader, VikingSidebarNavTreeItem, VikingSiteFooter, VikingSiteNavbar, VikingSkeleton, VikingSlider, VikingSpinner, VikingStatusCard, VikingStatusCardWc, VikingStatusMetricRow, VikingStatusPill, VikingStatusPillWc, VikingSuiteHeaderWc, VikingSuiteSearchPalette, VikingSuiteSearchPaletteWc, VikingSwitch, VikingTab, VikingTabPanel, VikingTable, VikingTabs, VikingText, VikingTextarea, VikingThemeToggle, VikingThemeToggleWc, VikingTimePicker, VikingTimeline, VikingTimelineItem, VikingToastService, VikingToaster, VikingToggle, VikingToggleGroup, VikingTooltip, VikingUptimeBar, VikingVerificationCodeField, VikingWhitepaperCta, VikingWizard, bugReportHref, buildSuiteSearchItems, clampChartWindow, cookieSettingsHref, fullChartWindow, isAppRouterPath, isIntegrationBrandIcon$1 as isIntegrationBrandIcon, panChartWindow, provideVikingCva, registerVikingBadgeWc, registerVikingButtonWc, registerVikingCalloutWc, registerVikingCardWc, registerVikingElements, registerVikingFieldWc, registerVikingInputWc, registerVikingModalWc, registerVikingSearchPaletteWc, registerVikingSelectWc, registerVikingStatusCardWc, registerVikingStatusPillWc, registerVikingSuiteHeaderWc, registerVikingSuiteSearchPaletteWc, registerVikingThemeToggleWc, resolveBrandHref, resolveFooterHref, resolveNavHref, resolveVikingIcon$1 as resolveVikingIcon, resolveVikingIconColor$1 as resolveVikingIconColor, resolveVikingIconSize$1 as resolveVikingIconSize, sliceChartData, vikingIconViewBox$1 as vikingIconViewBox, visibleNavLinks, zoomChartWindow };
 //# sourceMappingURL=dataengineeringformachinelearning-viking-ui.mjs.map