@dataengineeringformachinelearning/viking-ui 1.0.1 → 3.0.0-alpha.2

package/dist/web/badge/viking-badge-wc.d.ts

@@ -0,0 +1,28 @@
+import { HTMLElementBase } from "../core/dom";
+/**
+ * Framework-agnostic Viking badge Web Component.
+ * Tag: `viking-badge` (legacy alias: `viking-badge-wc`)
+ *
+ * @attr tone - Semantic color: accent | secondary | success | warning | danger | info | muted
+ * @attr size - Compact density: sm
+ * @attr icon - Viking icon registry name (pairs with label for a11y)
+ * @attr removable - Shows remove control; dispatches `viking-removed`
+ *
+ * @example
+ * <viking-badge-wc tone="success" icon="check">Healthy</viking-badge-wc>
+ */
+export declare class VikingBadgeWc extends HTMLElementBase {
+    static readonly tag = "viking-badge";
+    static readonly legacyTag = "viking-badge-wc";
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private get tone();
+    private get size();
+    private get removable();
+    private readonly onRemove;
+    private render;
+}
+export declare const registerVikingBadgeWc: () => void;

package/dist/web/button/viking-button-wc.d.ts

@@ -0,0 +1,28 @@
+import { HTMLElementBase } from "../core/dom";
+/**
+ * Framework-agnostic Viking button Web Component.
+ * Tag: `viking-button` (legacy alias: `viking-button-wc`)
+ *
+ * @example
+ * <viking-button variant="primary">Launch</viking-button>
+ */
+export declare class VikingButtonWc extends HTMLElementBase {
+    static readonly tag = "viking-button";
+    static readonly legacyTag = "viking-button-wc";
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    private control;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private readonly onClick;
+    private get variant();
+    private get size();
+    private get disabled();
+    private get loading();
+    private get square();
+    private syncHostSemantics;
+    private render;
+}
+export declare const registerVikingButtonWc: () => void;

package/dist/web/callout/viking-callout-wc.d.ts

@@ -0,0 +1,27 @@
+import { HTMLElementBase } from "../core/dom";
+/**
+ * Framework-agnostic Viking callout Web Component.
+ * Tag: `viking-callout` (legacy alias: `viking-callout-wc`)
+ *
+ * @attr tone - Semantic tone (default: info)
+ * @attr heading - Bold callout title
+ * @attr icon - Override leading icon from the Viking registry
+ * @attr dismissible - Shows dismiss control; dispatches `viking-close`
+ *
+ * @example
+ * <viking-callout-wc tone="warning" heading="Degraded worker">Lag exceeds 3s.</viking-callout-wc>
+ */
+export declare class VikingCalloutWc extends HTMLElementBase {
+    static readonly tag = "viking-callout";
+    static readonly legacyTag = "viking-callout-wc";
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private get tone();
+    private get dismissible();
+    private readonly onDismiss;
+    private render;
+}
+export declare const registerVikingCalloutWc: () => void;

package/dist/web/card/viking-card-wc.d.ts

@@ -0,0 +1,29 @@
+import { HTMLElementBase } from "../core/dom";
+/**
+ * Framework-agnostic Viking card Web Component (light DOM — inherits global viking-card CSS).
+ * Tag: `viking-card` (legacy alias: `viking-card-wc`)
+ *
+ * Uses light DOM so slotted content inherits `viking-card`, `viking-card-header`, and related
+ * classes from the synced static CSS bundle.
+ *
+ * @attr compact - Applies `viking-card-compact` padding
+ * @attr interactive - Hover lift for clickable cards
+ * @attr title - Accessible name when the card is a landmark region
+ *
+ * @example
+ * <viking-card-wc compact title="Event throughput">
+ *   <div class="viking-card-header">
+ *     <h3 class="viking-heading viking-heading-sm">Event throughput</h3>
+ *   </div>
+ *   <p class="viking-text-muted">8.2K events/sec</p>
+ * </viking-card-wc>
+ */
+export declare class VikingCardWc extends HTMLElementBase {
+    static readonly tag = "viking-card";
+    static readonly legacyTag = "viking-card-wc";
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private syncClasses;
+}
+export declare const registerVikingCardWc: () => void;

package/dist/web/core/base.d.ts

@@ -0,0 +1,12 @@
+/** Attaches constructable stylesheet to a shadow root (with fallback). */
+export declare const attachShadowStyles: (shadow: ShadowRoot, css: string) => void;
+/** Reads a boolean attribute presence/value. */
+export declare const readBoolAttr: (el: HTMLElement, name: string) => boolean;
+/** Safely sets form value when ElementInternals is fully supported (e.g. not in jsdom). */
+export declare const setFormValue: (internals: ElementInternals | null, value: string) => void;
+/** Attaches ElementInternals where available without breaking older WebKit or test DOMs. */
+export declare const attachElementInternals: (el: HTMLElement) => ElementInternals | null;
+/** Opens a native dialog when showModal is available. */
+export declare const showModalDialog: (dialog: HTMLDialogElement | null) => void;
+/** Closes a native dialog when close is available. */
+export declare const closeModalDialog: (dialog: HTMLDialogElement | null) => void;

package/dist/web/core/dom.d.ts

@@ -0,0 +1,11 @@
+export declare const HTMLElementBase: typeof HTMLElement;
+/** Stable unique id for associating labels and controls. */
+export declare const vikingWcUid: (prefix: string) => string;
+/** Escape text for safe innerHTML insertion. */
+export declare const escapeHtml: (value: string) => string;
+/** Platform modifier label for keyboard shortcut hints. */
+export declare const modKeyLabel: () => string;
+/** Register a custom element when the runtime supports it (skip during SSR/prerender). */
+export declare const defineCustomElement: (tag: string, ctor: CustomElementConstructor) => void;
+/** Register an alias tag with a fresh subclass; customElements disallows reusing constructors. */
+export declare const defineCustomElementAlias: <T extends CustomElementConstructor>(tag: string, ctor: T) => void;

package/dist/web/core/icons-inline.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Renders a zero-dependency inline SVG icon for Web Components.
+ * Uses the same registry as `viking-icon` in Angular.
+ */
+export declare const renderInlineIcon: (name: string, size?: number, className?: string) => string;
+/** Default tone → icon mapping shared by callout and badge surfaces. */
+export declare const TONE_ICON_NAMES: Record<string, string>;

package/dist/web/core/styles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shadow DOM styles for Viking-UI Web Components.
+ * All values reference --viking-* tokens inherited from the document :root.
+ */
+export declare const VIKING_BUTTON_STYLES = "\n:host {\n  display: inline-flex;\n  font-family: var(--viking-font-family);\n}\n\n:host([full-width]) {\n  display: flex;\n  width: 100%;\n}\n\n:host([full-width]) .viking-btn {\n  width: 100%;\n  min-width: 0;\n}\n\n:host([compact]) .viking-btn {\n  min-width: 0;\n}\n\n:host([square]) {\n  flex: 0 0 auto;\n}\n\n.viking-btn {\n  font-family: inherit;\n  font-size: var(--viking-font-size-ui, var(--viking-font-size-sm));\n  font-weight: var(--viking-font-weight-semibold);\n  letter-spacing: var(--viking-letter-spacing-wide);\n  line-height: var(--viking-line-height-snug);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--viking-space-1);\n  min-height: var(--viking-control-height);\n  padding: 0 var(--viking-control-padding-x);\n  border-radius: var(--viking-radius);\n  border: 1px solid transparent;\n  cursor: pointer;\n  text-decoration: none;\n  transition: var(--viking-transition-interactive);\n  width: auto;\n  min-width: var(--viking-btn-min-width, 120px);\n  white-space: nowrap;\n  position: relative;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  box-sizing: border-box;\n}\n\n.viking-btn:focus-visible {\n  outline: var(--viking-ring-width) solid var(--viking-ring);\n  outline-offset: var(--viking-ring-offset);\n  z-index: 1;\n}\n\n.viking-btn:disabled,\n.viking-btn[aria-busy='true'] {\n  opacity: var(--viking-state-disabled-opacity);\n  cursor: not-allowed;\n  transform: none !important;\n  box-shadow: none !important;\n}\n\n.viking-btn-sm {\n  min-height: var(--viking-control-height-sm);\n  padding: 0 var(--viking-space-2);\n  font-size: var(--viking-font-size-xs);\n  min-width: auto;\n}\n\n.viking-btn-xs {\n  min-height: var(--viking-control-height-xs);\n  padding: 0 var(--viking-space-1);\n  font-size: var(--viking-font-size-xs);\n  min-width: auto;\n}\n\n.viking-btn-square {\n  display: inline-grid;\n  place-items: center;\n  width: var(--viking-control-height);\n  min-width: var(--viking-control-height);\n  max-width: var(--viking-control-height);\n  height: var(--viking-control-height);\n  min-height: var(--viking-control-height);\n  padding: 0;\n  line-height: 1;\n}\n\n.viking-btn-square.viking-btn-sm {\n  width: var(--viking-control-height-sm);\n  min-width: var(--viking-control-height-sm);\n  max-width: var(--viking-control-height-sm);\n  height: var(--viking-control-height-sm);\n  min-height: var(--viking-control-height-sm);\n}\n\n.viking-btn-square.viking-btn-xs {\n  width: var(--viking-control-height-xs);\n  min-width: var(--viking-control-height-xs);\n  max-width: var(--viking-control-height-xs);\n  height: var(--viking-control-height-xs);\n  min-height: var(--viking-control-height-xs);\n}\n\n.viking-btn-square .viking-btn-label {\n  display: inline-grid;\n  place-items: center;\n  width: 100%;\n  height: 100%;\n  line-height: 1;\n}\n\n.viking-btn-square ::slotted(*) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  line-height: 1;\n}\n\n.viking-btn-square ::slotted(svg),\n.viking-btn-square ::slotted([data-viking-icon]) {\n  width: var(--viking-icon-size-md, 20px);\n  height: var(--viking-icon-size-md, 20px);\n}\n\n.viking-btn-outline {\n  background: var(--viking-surface);\n  color: var(--viking-text);\n  border-color: var(--viking-border-strong);\n  box-shadow: var(--viking-shadow-sm);\n}\n\n.viking-btn-outline:hover:not(:disabled):not([aria-busy='true']) {\n  background: var(--viking-surface-alt);\n  border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border-strong));\n  box-shadow: var(--viking-shadow-md);\n  transform: translateY(var(--viking-state-hover-lift));\n}\n\n.viking-btn-primary {\n  background: var(--viking-accent);\n  color: var(--viking-accent-content);\n  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));\n  box-shadow: var(--viking-shadow-sm);\n}\n\n.viking-btn-primary:hover:not(:disabled):not([aria-busy='true']) {\n  background: var(--viking-accent-hover);\n  border-color: var(--viking-accent-hover);\n  box-shadow: var(--viking-shadow-hover);\n  transform: translateY(var(--viking-state-hover-lift));\n}\n\n.viking-btn-secondary {\n  background: var(--viking-accent-secondary);\n  color: var(--viking-accent-secondary-content);\n  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));\n  box-shadow: var(--viking-shadow-sm);\n}\n\n.viking-btn-secondary:hover:not(:disabled):not([aria-busy='true']) {\n  background: var(--viking-accent-secondary-hover);\n  border-color: var(--viking-accent-secondary-hover);\n  box-shadow: var(--viking-shadow-hover);\n  transform: translateY(var(--viking-state-hover-lift));\n}\n\n.viking-btn-filled {\n  background: var(--viking-surface-alt);\n  color: var(--viking-text);\n  border-color: var(--viking-border);\n  box-shadow: var(--viking-shadow-xs);\n}\n\n.viking-btn-filled:hover:not(:disabled):not([aria-busy='true']) {\n  border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border));\n  background: color-mix(in srgb, var(--viking-accent) 8%, var(--viking-surface-alt));\n  box-shadow: var(--viking-shadow-sm);\n  transform: translateY(var(--viking-state-hover-lift));\n}\n\n.viking-btn-danger {\n  background: var(--viking-danger);\n  color: var(--viking-on-danger);\n  border-color: color-mix(in srgb, var(--viking-danger) 85%, var(--viking-black));\n  box-shadow: var(--viking-shadow-sm);\n}\n\n.viking-btn-danger:hover:not(:disabled):not([aria-busy='true']) {\n  background: color-mix(in srgb, var(--viking-danger) 88%, var(--viking-white));\n  box-shadow: var(--viking-shadow-hover);\n  transform: translateY(var(--viking-state-hover-lift));\n}\n\n.viking-btn-ghost {\n  background: transparent;\n  color: var(--viking-text);\n  min-width: auto;\n  box-shadow: none;\n  border-color: transparent;\n}\n\n.viking-btn-ghost:hover:not(:disabled):not([aria-busy='true']) {\n  background: var(--viking-accent-soft);\n  color: var(--viking-accent-strong);\n}\n\n.viking-btn-subtle {\n  background: transparent;\n  color: var(--viking-text-muted);\n  border-color: var(--viking-border-subtle);\n  min-width: auto;\n  box-shadow: none;\n}\n\n.viking-btn-subtle:hover:not(:disabled):not([aria-busy='true']) {\n  color: var(--viking-text);\n  background: var(--viking-accent-soft);\n  border-color: var(--viking-border-strong);\n}\n\n.viking-btn:active:not(:disabled):not([aria-busy='true']) {\n  transform: translateY(0) scale(var(--viking-state-active-scale));\n}\n\n.viking-btn-label {\n  display: inline-flex;\n  align-items: center;\n  line-height: inherit;\n}\n\n.viking-btn-spinner {\n  width: 1.125rem;\n  height: 1.125rem;\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: viking-spin 0.8s linear infinite;\n}\n\n@keyframes viking-spin {\n  to { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .viking-btn-spinner { animation-duration: 0.01ms; }\n  .viking-btn { transition-duration: 0.01ms; }\n}\n";
+export declare const VIKING_INPUT_STYLES = "\n:host {\n  display: block;\n  font-family: var(--viking-font-family);\n}\n\n.viking-input-shell {\n  display: flex;\n  align-items: center;\n  gap: var(--viking-space-1);\n  min-height: var(--viking-control-height);\n  padding: 0 var(--viking-space-2);\n  font-family: inherit;\n  font-size: var(--viking-font-size);\n  color: var(--viking-text);\n  background: var(--viking-surface-alt);\n  border: 1px solid var(--viking-border);\n  border-radius: var(--viking-radius-sm);\n  box-shadow: var(--viking-shadow-xs);\n  transition: var(--viking-transition-interactive);\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.viking-input-shell:hover:not(.viking-disabled):not(.viking-loading) {\n  border-color: color-mix(in srgb, var(--viking-accent) 35%, var(--viking-border-strong));\n  box-shadow: var(--viking-shadow-sm);\n}\n\n.viking-input-shell:focus-within:not(.viking-loading) {\n  outline: var(--viking-ring-width) solid var(--viking-ring);\n  outline-offset: var(--viking-ring-offset);\n  border-color: var(--viking-accent);\n  box-shadow: var(--viking-shadow-sm);\n}\n\n.viking-input-shell.viking-disabled,\n.viking-input-shell.viking-loading {\n  opacity: var(--viking-state-disabled-opacity);\n}\n\n.viking-input-shell.viking-loading {\n  cursor: wait;\n}\n\n.viking-input-native {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  border: none;\n  outline: none !important;\n  background: transparent;\n  color: var(--viking-text);\n  font-family: inherit;\n  font-size: inherit;\n  padding: 0;\n}\n\n.viking-input-native::placeholder {\n  color: var(--viking-text-muted);\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  border: none;\n  outline: none !important;\n  background: transparent;\n  color: var(--viking-text);\n  font-family: inherit;\n  font-size: inherit;\n  padding: 0;\n}\n\ninput::placeholder {\n  color: var(--viking-text-muted);\n}\n\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.viking-input-clear {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--viking-touch-target-comfort, 44px);\n  min-height: var(--viking-touch-target-comfort, 44px);\n  border: none;\n  background: transparent;\n  color: var(--viking-text-muted);\n  cursor: pointer;\n  padding: var(--viking-space-half);\n  border-radius: var(--viking-radius-pill);\n  transition: var(--viking-transition-interactive);\n  flex-shrink: 0;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.viking-input-clear:hover {\n  color: var(--viking-text);\n  background: var(--viking-accent-soft);\n}\n\n.viking-input-clear:focus-visible {\n  outline: var(--viking-ring-width) solid var(--viking-ring);\n  outline-offset: var(--viking-ring-offset);\n}\n\n.viking-input-spinner {\n  width: 1rem;\n  height: 1rem;\n  border: 2px solid var(--viking-text-muted);\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: viking-spin 0.8s linear infinite;\n  flex-shrink: 0;\n}\n\n@keyframes viking-spin {\n  to { transform: rotate(360deg); }\n}\n";
+export declare const VIKING_FIELD_STYLES = "\n:host {\n  display: block;\n  font-family: var(--viking-font-family);\n  color: var(--viking-text);\n  min-width: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([width='full']) {\n  width: 100%;\n}\n\n:host([width='half']) {\n  width: 100%;\n  max-width: var(--viking-select-half-max-width, min(100%, 24rem));\n}\n\n.viking-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--viking-space-1);\n}\n\n.viking-field-label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--viking-space-2);\n}\n\n.viking-field-label {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--viking-space-half);\n  font-size: var(--viking-font-size-ui);\n  font-weight: var(--viking-font-weight-bold);\n  color: var(--viking-text);\n  line-height: var(--viking-line-height-snug);\n  cursor: pointer;\n}\n\n.viking-field-required {\n  color: var(--viking-danger-text);\n}\n\n.viking-field-control {\n  min-width: 0;\n}\n\n.viking-field-description,\n.viking-field-error {\n  margin: 0;\n  font-size: var(--viking-font-size-xs);\n  line-height: var(--viking-line-height-relaxed);\n}\n\n.viking-field-description {\n  color: var(--viking-text-muted);\n}\n\n.viking-field-error {\n  color: var(--viking-danger-text);\n}\n";
+export declare const VIKING_BADGE_STYLES = "\n:host {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--viking-space-half);\n  padding: var(--viking-space-half) var(--viking-space-1);\n  font-family: var(--viking-font-family);\n  font-size: var(--viking-font-size-xs);\n  font-weight: var(--viking-font-weight-semibold);\n  letter-spacing: var(--viking-letter-spacing-wide);\n  line-height: var(--viking-line-height-snug);\n  border-radius: var(--viking-radius-pill);\n  border: 1px solid var(--viking-border);\n  background: var(--viking-surface-alt);\n  color: var(--viking-text);\n  white-space: nowrap;\n  transition: var(--viking-transition-interactive);\n  box-shadow: var(--viking-shadow-xs);\n}\n\n:host([size='sm']) {\n  padding: 0 var(--viking-space-1);\n  font-size: var(--viking-font-size-2xs);\n}\n\n:host([tone='accent']) {\n  background: var(--viking-accent);\n  border-color: color-mix(in srgb, var(--viking-accent) 80%, var(--viking-black));\n  color: var(--viking-accent-content);\n  box-shadow: var(--viking-shadow-sm);\n}\n\n:host([tone='secondary']) {\n  background: color-mix(in srgb, var(--viking-accent-secondary) 16%, var(--viking-surface));\n  border-color: color-mix(in srgb, var(--viking-accent-secondary) 55%, transparent);\n  color: var(--viking-accent-secondary);\n}\n\n:host([tone='success']) {\n  background: color-mix(in srgb, var(--viking-success) 16%, var(--viking-surface));\n  border-color: color-mix(in srgb, var(--viking-success) 55%, transparent);\n  color: var(--viking-success);\n}\n\n:host([tone='warning']) {\n  background: color-mix(in srgb, var(--viking-warning) 18%, var(--viking-surface));\n  border-color: color-mix(in srgb, var(--viking-warning) 55%, transparent);\n  color: var(--viking-warning);\n}\n\n:host([tone='danger']) {\n  background: color-mix(in srgb, var(--viking-danger) 14%, var(--viking-surface));\n  border-color: color-mix(in srgb, var(--viking-danger) 50%, transparent);\n  color: var(--viking-danger-text);\n}\n\n:host([tone='info']) {\n  background: color-mix(in srgb, var(--viking-info) 14%, var(--viking-surface));\n  border-color: color-mix(in srgb, var(--viking-info) 50%, transparent);\n  color: var(--viking-info);\n}\n\n:host([tone='muted']),\n:host([tone='subtle']) {\n  color: var(--viking-text-muted);\n  background: var(--viking-surface);\n  border-color: var(--viking-border-subtle);\n}\n\n.viking-wc-icon {\n  flex-shrink: 0;\n}\n\n.viking-badge-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--viking-touch-target-comfort, 44px);\n  min-height: var(--viking-touch-target-comfort, 44px);\n  border: none;\n  background: transparent;\n  color: currentColor;\n  cursor: pointer;\n  padding: var(--viking-space-half);\n  border-radius: var(--viking-radius-pill);\n  transition: var(--viking-transition-interactive);\n  margin-left: calc(var(--viking-space-half) * -1);\n}\n\n.viking-badge-remove:hover {\n  background: color-mix(in srgb, currentColor 12%, transparent);\n}\n\n.viking-badge-remove:focus-visible {\n  outline: var(--viking-ring-width) solid var(--viking-ring);\n  outline-offset: var(--viking-ring-offset);\n}\n";
+export declare const VIKING_CALLOUT_STYLES = "\n:host {\n  display: block;\n  font-family: var(--viking-font-family);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.viking-callout {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--viking-space-2);\n  padding: var(--viking-space-2);\n  border-radius: var(--viking-radius-lg);\n  border: 1px solid var(--viking-border);\n  border-left-width: 3px;\n  background: var(--viking-surface-alt);\n  color: var(--viking-text);\n  font-size: var(--viking-font-size-sm);\n  box-shadow: var(--viking-shadow-sm);\n}\n\n.viking-callout-icon {\n  flex-shrink: 0;\n  margin-top: 2px;\n  color: var(--viking-text-muted);\n}\n\n.viking-callout-body {\n  flex: 1;\n  min-width: 0;\n}\n\n.viking-callout-heading {\n  margin: 0 0 var(--viking-space-half);\n  font-size: var(--viking-font-size-ui);\n  font-weight: var(--viking-font-weight-bold);\n  color: var(--viking-text);\n}\n\n.viking-callout-text {\n  margin: 0;\n  color: var(--viking-text);\n  line-height: var(--viking-line-height-relaxed);\n}\n\n.viking-callout-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--viking-touch-target-comfort, 44px);\n  min-height: var(--viking-touch-target-comfort, 44px);\n  border: none;\n  background: transparent;\n  color: var(--viking-text-muted);\n  cursor: pointer;\n  padding: var(--viking-space-half);\n  border-radius: var(--viking-radius);\n  transition: var(--viking-transition-interactive);\n  flex-shrink: 0;\n}\n\n.viking-callout-close:hover {\n  color: var(--viking-text);\n  background: color-mix(in srgb, currentColor 8%, transparent);\n}\n\n.viking-callout-close:focus-visible {\n  outline: var(--viking-ring-width) solid var(--viking-ring);\n  outline-offset: var(--viking-ring-offset);\n}\n\n.viking-callout-accent {\n  border-color: var(--viking-accent);\n  border-left-color: var(--viking-accent);\n  background: var(--viking-accent-soft);\n}\n\n.viking-callout-accent .viking-callout-icon {\n  color: var(--viking-accent);\n}\n\n.viking-callout-secondary {\n  border-color: color-mix(in srgb, var(--viking-accent-secondary) 45%, transparent);\n  border-left-color: var(--viking-accent-secondary);\n  background: var(--viking-accent-secondary-soft);\n}\n\n.viking-callout-secondary .viking-callout-icon {\n  color: var(--viking-accent-secondary);\n}\n\n.viking-callout-info {\n  border-color: color-mix(in srgb, var(--viking-info) 45%, transparent);\n  border-left-color: var(--viking-info);\n  background: color-mix(in srgb, var(--viking-info) 10%, var(--viking-surface));\n}\n\n.viking-callout-info .viking-callout-icon {\n  color: var(--viking-info);\n}\n\n.viking-callout-success {\n  border-color: color-mix(in srgb, var(--viking-success) 45%, transparent);\n  border-left-color: var(--viking-success);\n  background: color-mix(in srgb, var(--viking-success) 10%, var(--viking-surface));\n}\n\n.viking-callout-success .viking-callout-icon {\n  color: var(--viking-success);\n}\n\n.viking-callout-warning {\n  border-color: color-mix(in srgb, var(--viking-warning) 45%, transparent);\n  border-left-color: var(--viking-warning);\n  background: color-mix(in srgb, var(--viking-warning) 12%, var(--viking-surface));\n}\n\n.viking-callout-warning .viking-callout-icon {\n  color: var(--viking-warning);\n}\n\n.viking-callout-danger {\n  border-color: var(--viking-danger);\n  border-left-color: var(--viking-danger);\n  background: color-mix(in srgb, var(--viking-crimson-600) 22%, var(--viking-surface));\n  color: var(--viking-white);\n}\n\n.viking-callout-danger .viking-callout-icon {\n  color: var(--viking-crimson-400);\n}\n\n.viking-callout-danger .viking-callout-text {\n  color: var(--viking-white);\n}\n";
+export declare const VIKING_SELECT_STYLES = "\n:host {\n  display: block;\n  font-family: var(--viking-font-family);\n  min-width: 0;\n}\n\n:host([width='full']) {\n  width: 100%;\n}\n\n:host([width='half']) {\n  width: 100%;\n  max-width: var(--viking-select-half-max-width, min(100%, 24rem));\n}\n\n.viking-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--viking-space-1);\n}\n\n.viking-field-label {\n  font-size: var(--viking-font-size-ui);\n  font-weight: var(--viking-font-weight-bold);\n  color: var(--viking-text);\n}\n\n.viking-field-description {\n  margin: 0;\n  font-size: var(--viking-font-size-xs);\n  color: var(--viking-text-muted);\n}\n\n.viking-field-error {\n  margin: 0;\n  font-size: var(--viking-font-size-xs);\n  color: var(--viking-danger);\n}\n\n.viking-select-native {\n  width: 100%;\n  min-height: var(--viking-control-height);\n  padding: 0 var(--viking-space-2);\n  border: 1px solid var(--viking-border-strong);\n  border-radius: var(--viking-radius);\n  background: var(--viking-surface);\n  color: var(--viking-text);\n  font-family: inherit;\n  font-size: var(--viking-font-size);\n  cursor: pointer;\n  transition: var(--viking-transition-interactive);\n  box-shadow: var(--viking-shadow-sm);\n}\n\n.viking-select-native:hover:not(:disabled) {\n  border-color: var(--viking-accent-strong);\n  box-shadow: var(--viking-shadow-md);\n}\n\n.viking-select-native:focus-visible {\n  outline: var(--viking-ring-width) solid var(--viking-ring);\n  outline-offset: var(--viking-ring-offset);\n}\n\n.viking-select-native:disabled {\n  opacity: var(--viking-state-disabled-opacity);\n  cursor: not-allowed;\n}\n\n.viking-select-native[aria-invalid='true'] {\n  border-color: var(--viking-danger);\n}\n";
+export declare const VIKING_MODAL_STYLES = "\n:host {\n  display: contents;\n}\n\n.viking-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: var(--viking-z-overlay, 10001);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--viking-space-3);\n  background: var(--viking-overlay-backdrop);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border: none;\n  animation: viking-backdrop-in var(--viking-duration-fast) var(--viking-ease-out);\n}\n\n.viking-modal-panel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--viking-space-2);\n  width: min(522px, calc(100vw - var(--viking-space-4)));\n  max-height: calc(100vh - var(--viking-space-6));\n  padding: var(--viking-space-3);\n  border: 1px solid var(--viking-border-strong);\n  border-radius: var(--viking-radius-lg);\n  background: var(--viking-surface);\n  color: var(--viking-text);\n  box-shadow: var(--viking-shadow-lg);\n  font-family: var(--viking-font-family);\n  position: relative;\n  overflow: hidden;\n  animation: viking-modal-in var(--viking-duration) var(--viking-ease-default);\n}\n\n.viking-modal-panel::before {\n  content: '';\n  position: absolute;\n  inset: 0 0 auto;\n  height: 1px;\n  background: linear-gradient(\n    90deg,\n    transparent,\n    color-mix(in srgb, var(--viking-metallic-200) 22%, transparent),\n    transparent\n  );\n  pointer-events: none;\n}\n\n.viking-modal-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--viking-space-2);\n  padding-bottom: var(--viking-space-1);\n  border-bottom: 1px solid var(--viking-border-subtle);\n}\n\n.viking-modal-heading {\n  margin: 0;\n  font-size: var(--viking-font-size-md);\n  font-weight: var(--viking-font-weight-bold);\n  letter-spacing: var(--viking-letter-spacing-tight);\n  color: var(--viking-text);\n  line-height: var(--viking-line-height-tight);\n}\n\n.viking-modal-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--viking-touch-target-comfort, 44px);\n  min-height: var(--viking-touch-target-comfort, 44px);\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--viking-text-muted);\n  cursor: pointer;\n  border-radius: var(--viking-radius);\n  transition: var(--viking-transition-interactive);\n  flex-shrink: 0;\n}\n\n.viking-modal-close:hover {\n  color: var(--viking-text);\n  background: var(--viking-accent-soft);\n  border-color: var(--viking-border-subtle);\n}\n\n.viking-modal-close:focus-visible {\n  outline: var(--viking-ring-width) solid var(--viking-ring);\n  outline-offset: var(--viking-ring-offset);\n}\n\n.viking-modal-body {\n  overflow-y: auto;\n  color: var(--viking-text-muted);\n  font-size: var(--viking-font-size);\n  line-height: var(--viking-line-height-relaxed);\n}\n\n.viking-modal-footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--viking-space-2);\n  justify-content: flex-end;\n  padding-top: var(--viking-space-2);\n  border-top: 1px solid var(--viking-border-subtle);\n}\n\n.viking-modal-footer:empty {\n  display: none;\n}\n\n@keyframes viking-backdrop-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes viking-modal-in {\n  from {\n    opacity: 0;\n    transform: translateY(var(--viking-space-1)) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .viking-modal-backdrop,\n  .viking-modal-panel {\n    animation: none;\n  }\n}\n";
+export declare const VIKING_SEARCH_PALETTE_STYLES = "\n:host {\n  display: contents;\n}\n\n.viking-search-palette-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: var(--viking-z-overlay, 10001);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 10vh var(--viking-space-2) var(--viking-space-2);\n  background: var(--viking-overlay-backdrop);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border: none;\n  animation: viking-backdrop-in var(--viking-duration-fast) var(--viking-ease-out);\n}\n\n.viking-search-palette-backdrop:not([open]) {\n  display: none !important;\n  pointer-events: none;\n}\n\n.viking-search-palette {\n  display: flex;\n  flex-direction: column;\n  background: var(--viking-surface-raised, var(--viking-surface));\n  border: 1px solid var(--viking-border-strong);\n  border-radius: var(--viking-radius-lg);\n  box-shadow: var(--viking-shadow-lg);\n  overflow: hidden;\n  max-width: 600px;\n  width: min(100%, 600px);\n  margin: 0 auto;\n  font-family: var(--viking-font-family);\n  color: var(--viking-text);\n  animation: viking-modal-in var(--viking-duration) var(--viking-ease-default);\n  position: relative;\n  isolation: isolate;\n}\n\n.viking-search-palette::before {\n  content: '';\n  position: absolute;\n  inset: 0 0 auto;\n  height: 1px;\n  background: linear-gradient(\n    90deg,\n    transparent,\n    color-mix(in srgb, var(--viking-metallic-200) 22%, transparent),\n    transparent\n  );\n  pointer-events: none;\n  z-index: 1;\n}\n\n.viking-search-palette-header {\n  display: flex;\n  align-items: center;\n  padding: var(--viking-space-2);\n  border-bottom: 1px solid var(--viking-border);\n  gap: var(--viking-space-1);\n  background: color-mix(in srgb, var(--viking-bg) 26%, var(--viking-surface-raised));\n}\n\n.viking-search-palette-header:focus-within {\n  border-bottom-color: var(--viking-accent);\n  box-shadow: inset 0 -2px 0 var(--viking-accent-soft);\n}\n\n.viking-search-palette-icon {\n  color: var(--viking-text-muted);\n  flex-shrink: 0;\n}\n\n.viking-search-palette-input {\n  flex: 1;\n  background: none;\n  border: none;\n  outline: none;\n  font-size: calc(var(--viking-font-size) * 1.05);\n  color: var(--viking-text);\n  font-family: inherit;\n  min-width: 0;\n}\n\n.viking-search-palette-input::placeholder {\n  color: var(--viking-text-muted);\n}\n\n.viking-search-palette-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--viking-touch-target-comfort, 44px);\n  min-height: var(--viking-touch-target-comfort, 44px);\n  border: none;\n  background: transparent;\n  color: var(--viking-text-muted);\n  cursor: pointer;\n  padding: var(--viking-space-half);\n  border-radius: var(--viking-radius);\n  transition: var(--viking-transition-interactive);\n  flex-shrink: 0;\n}\n\n.viking-search-palette-close:hover {\n  color: var(--viking-text);\n  background: var(--viking-accent-soft);\n}\n\n.viking-search-palette-close:focus-visible {\n  outline: var(--viking-ring-width) solid var(--viking-ring);\n  outline-offset: var(--viking-ring-offset);\n}\n\n.viking-search-palette-body {\n  max-height: 50vh;\n  overflow-y: auto;\n  padding: var(--viking-space-2);\n}\n\n.viking-search-palette-footer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--viking-space-1);\n  padding: var(--viking-space-1) var(--viking-space-2);\n  border-top: 1px solid var(--viking-border);\n  font-size: calc(var(--viking-font-size) * 0.85);\n  color: var(--viking-text-muted);\n}\n\n.viking-kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.5rem;\n  padding: 2px 6px;\n  font-family: inherit;\n  font-size: calc(var(--viking-font-size) * 0.75);\n  border-radius: calc(var(--viking-radius) / 2);\n  border: 1px solid var(--viking-border);\n  background: var(--viking-surface-alt);\n}\n\n.viking-search-results {\n  display: flex;\n  flex-direction: column;\n  gap: var(--viking-space-1);\n}\n\n.viking-search-group-label {\n  margin: var(--viking-space-1) 0 var(--viking-space-half);\n  padding: 0 var(--viking-space-1);\n  font-size: var(--viking-font-size-2xs);\n  font-weight: var(--viking-font-weight-semibold);\n  letter-spacing: var(--viking-letter-spacing-caps);\n  text-transform: uppercase;\n  color: var(--viking-text-muted);\n}\n\n.viking-search-result {\n  display: flex;\n  align-items: center;\n  min-height: var(--viking-control-height-sm, 36px);\n  padding: var(--viking-space-1) var(--viking-space-2);\n  border-radius: var(--viking-radius);\n  background: var(--viking-surface-alt);\n  border: 1px solid var(--viking-border-subtle);\n  cursor: pointer;\n  transition: var(--viking-transition-interactive);\n  gap: var(--viking-space-1);\n  text-decoration: none;\n  color: inherit;\n}\n\n.viking-search-result:hover,\n.viking-search-result.is-selected {\n  background: color-mix(in srgb, var(--viking-accent) 10%, var(--viking-surface-alt));\n  border-color: color-mix(in srgb, var(--viking-accent) 42%, var(--viking-border-strong));\n  box-shadow: var(--viking-shadow-sm);\n}\n\n.viking-search-result:focus-visible {\n  outline: var(--viking-ring-width) solid var(--viking-ring);\n  outline-offset: var(--viking-ring-offset);\n}\n\n.viking-search-result-title {\n  font-size: var(--viking-font-size-sm);\n  font-weight: var(--viking-font-weight-semibold);\n  color: var(--viking-text);\n}\n\n.viking-search-result-snippet {\n  font-size: var(--viking-font-size-xs);\n  color: var(--viking-text-muted);\n}\n\n.viking-search-empty {\n  padding: var(--viking-space-3);\n  text-align: center;\n  color: var(--viking-text-muted);\n  font-size: var(--viking-font-size-sm);\n}\n\n@keyframes viking-backdrop-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes viking-modal-in {\n  from {\n    opacity: 0;\n    transform: translateY(var(--viking-space-1)) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .viking-search-palette-backdrop,\n  .viking-search-palette {\n    animation: none;\n  }\n}\n";

package/dist/web/core/types.d.ts

@@ -0,0 +1,10 @@
+/** Shared Web Component item types. */
+export type VikingSearchPaletteItem = {
+    title: string;
+    href: string;
+    snippet?: string;
+    group?: string;
+    keywords?: string[];
+    action?: "cookie-settings" | "bug-report";
+};
+export type VikingWcTone = "accent" | "secondary" | "success" | "warning" | "danger" | "info" | "muted" | "subtle";

package/dist/web/field/viking-field-wc.d.ts

@@ -0,0 +1,32 @@
+import { HTMLElementBase } from "../core/dom";
+/**
+ * Framework-agnostic Viking field stack Web Component.
+ * Tag: `viking-field` (legacy alias: `viking-field-wc`)
+ *
+ * @attr label - Visible field label
+ * @attr description - Helper text below the control
+ * @attr error - Validation message; sets aria-invalid on the slotted control
+ * @attr required - Adds a non-color-only required marker
+ * @attr width - full | half
+ *
+ * @slot default - Form control, usually `viking-input`, `viking-select`, or native input/select
+ */
+export declare class VikingFieldWc extends HTMLElementBase {
+    static readonly tag = "viking-field";
+    static readonly legacyTag = "viking-field-wc";
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    private readonly labelId;
+    private readonly descriptionId;
+    private readonly errorId;
+    private slotEl;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private get control();
+    private readonly focusControl;
+    private readonly syncControlA11y;
+    private render;
+}
+export declare const registerVikingFieldWc: () => void;

package/dist/web/index.d.ts

@@ -0,0 +1,15 @@
+export { VikingBadgeWc, registerVikingBadgeWc } from "./badge/viking-badge-wc";
+export { VikingButtonWc, registerVikingButtonWc, } from "./button/viking-button-wc";
+export { VikingCalloutWc, registerVikingCalloutWc, } from "./callout/viking-callout-wc";
+export { VikingCardWc, registerVikingCardWc } from "./card/viking-card-wc";
+export { VikingFieldWc, registerVikingFieldWc } from "./field/viking-field-wc";
+export { VikingInputWc, registerVikingInputWc } from "./input/viking-input-wc";
+export { VikingModalWc, registerVikingModalWc } from "./modal/viking-modal-wc";
+export { VikingSearchPaletteWc, registerVikingSearchPaletteWc, type VikingSearchPaletteItem, } from "./search-palette/viking-search-palette-wc";
+export { VikingSuiteSearchPaletteWc, registerVikingSuiteSearchPaletteWc, } from "./suite-search-palette/viking-suite-search-palette-wc";
+export { VikingSuiteHeaderWc, registerVikingSuiteHeaderWc, } from "./suite-header/viking-suite-header-wc";
+export { VikingSelectWc, registerVikingSelectWc, } from "./select/viking-select-wc";
+export { VikingThemeToggleWc, registerVikingThemeToggleWc, } from "./theme-toggle/viking-theme-toggle-wc";
+export type { VikingWcTone } from "./core/types";
+/** Register all Viking-UI Web Components. Safe to call multiple times. */
+export declare const registerVikingElements: () => void;

package/dist/web/input/viking-input-wc.d.ts

@@ -0,0 +1,32 @@
+import { HTMLElementBase } from "../core/dom";
+/**
+ * Framework-agnostic Viking input Web Component with form association.
+ * Tag: `viking-input` (legacy alias: `viking-input-wc`)
+ *
+ * @example
+ * <viking-input placeholder="Email" name="email" type="email"></viking-input>
+ */
+export declare class VikingInputWc extends HTMLElementBase {
+    static readonly formAssociated = true;
+    static readonly tag = "viking-input";
+    static readonly legacyTag = "viking-input-wc";
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    private readonly internals;
+    private input;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get value(): string;
+    set value(next: string);
+    private get disabled();
+    private get loading();
+    private get clearable();
+    private get bare();
+    private readonly onInput;
+    private readonly onBlur;
+    private readonly onClear;
+    private syncFormValue;
+    private render;
+}
+export declare const registerVikingInputWc: () => void;

package/dist/web/modal/viking-modal-wc.d.ts

@@ -0,0 +1,50 @@
+import { HTMLElementBase } from "../core/dom";
+/**
+ * Framework-agnostic modal Web Component using native `<dialog>` semantics.
+ * Tag: `viking-modal` (legacy aliases: `viking-modal-wc`, `viking-dialog`)
+ *
+ * @attr open - When present, shows the modal
+ * @attr title - Dialog title for aria-label / heading
+ * @attr dismissible - Allow Escape and backdrop click to close (default: true)
+ *
+ * @slot default - Modal body content
+ * @slot actions - Footer action buttons
+ *
+ * @method openModal() - Programmatically open
+ * @method closeModal() - Programmatically close
+ *
+ * @event viking-close - Fired when the dialog closes
+ *
+ * @example
+ * <viking-modal title="Confirm deploy">
+ *   <p>Push v2.0.0 to production?</p>
+ *   <viking-button slot="actions" variant="primary">Deploy</viking-button>
+ * </viking-modal>
+ */
+export declare class VikingModalWc extends HTMLElementBase {
+    static readonly tag = "viking-modal";
+    static readonly legacyTag = "viking-modal-wc";
+    static readonly dialogTag = "viking-dialog";
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    private dialogEl;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** Opens the modal dialog. */
+    openModal(): void;
+    /** Closes the modal dialog. */
+    closeModal(): void;
+    /** @deprecated Use openModal() */
+    open(): void;
+    /** @deprecated Use closeModal() */
+    close(): void;
+    private get dismissible();
+    private readonly onClose;
+    private readonly onBackdropClick;
+    private syncOpen;
+    private updateTitle;
+    private render;
+}
+export declare const registerVikingModalWc: () => void;

package/dist/web/search-palette/viking-search-palette-wc.d.ts

@@ -0,0 +1,64 @@
+import { HTMLElementBase } from "../core/dom";
+import type { VikingSearchPaletteItem } from "../core/types";
+export type { VikingSearchPaletteItem };
+/**
+ * Framework-agnostic command palette / search overlay Web Component.
+ * Tag: `viking-command-palette`
+ * Aliases: `viking-search-palette`, `viking-search-palette-wc`
+ *
+ * @attr open - When present, shows the palette
+ * @attr global-shortcut - Bind ⌘K / Ctrl+K to open
+ * @attr placeholder - Search input placeholder
+ * @attr items - JSON array of `{ title, href, snippet?, group? }`
+ *
+ * @method openPalette() - Programmatically open
+ * @method closePalette() - Programmatically close
+ *
+ * @event viking-close - Palette closed
+ * @event viking-query - `{ detail: { query: string } }` on input
+ * @event viking-select - `{ detail: { item } }` when a result is activated
+ *
+ * @example
+ * <viking-command-palette
+ *   global-shortcut
+ *   items='[{"title":"Components","href":"/components","group":"Docs"}]'
+ * ></viking-command-palette>
+ */
+export declare class VikingSearchPaletteWc extends HTMLElementBase {
+    static readonly tag = "viking-command-palette";
+    static readonly searchTag = "viking-search-palette";
+    static readonly legacyTag = "viking-search-palette-wc";
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    private dialogEl;
+    private inputEl;
+    private resultsEl;
+    private globalKeyHandler;
+    private readonly resultsId;
+    private readonly inputId;
+    private query;
+    private activeIndex;
+    private flatResults;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** Opens the command palette. */
+    openPalette(): void;
+    /** Closes the command palette. */
+    closePalette(): void;
+    /** Sets the query string and re-renders filtered results. */
+    search(query: string): void;
+    private readonly onClose;
+    private readonly onBackdropClick;
+    private readonly onInput;
+    private readonly onInputKeydown;
+    private bindGlobalShortcut;
+    private unbindGlobalShortcut;
+    private syncOpen;
+    private scrollActiveIntoView;
+    private activateItem;
+    private renderResults;
+    private render;
+}
+export declare const registerVikingSearchPaletteWc: () => void;

package/dist/web/select/viking-select-wc.d.ts

@@ -0,0 +1,48 @@
+import { HTMLElementBase } from "../core/dom";
+/**
+ * Framework-agnostic native select Web Component with form association.
+ * Tag: `viking-select` (legacy alias: `viking-select-wc`)
+ *
+ * Place `<option>` elements as light DOM children; they are mirrored into the shadow select.
+ *
+ * @attr label - Visible field label
+ * @attr name - Form field name (participates in form submission via ElementInternals)
+ * @attr value - Selected option value
+ * @attr placeholder - Placeholder option text when no value is selected
+ * @attr description - Helper text below the control
+ * @attr error - Validation message; sets aria-invalid
+ * @attr width - full | half (default: half)
+ * @attr disabled - Disables the control
+ * @attr required - Marks field as required
+ *
+ * @event viking-change - `{ detail: { value: string } }`
+ *
+ * @example
+ * <viking-select-wc label="Retention" name="retention" value="30d">
+ *   <option value="7d">7 days</option>
+ *   <option value="30d">30 days</option>
+ * </viking-select-wc>
+ */
+export declare class VikingSelectWc extends HTMLElementBase {
+    static readonly formAssociated = true;
+    static readonly tag = "viking-select";
+    static readonly legacyTag = "viking-select-wc";
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    private readonly internals;
+    private selectEl;
+    private optionObserver;
+    private readonly controlId;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get value(): string;
+    set value(next: string);
+    private readonly onChange;
+    private syncFormValue;
+    private observeOptions;
+    private render;
+    private syncOptions;
+}
+export declare const registerVikingSelectWc: () => void;

package/dist/web/suite-header/viking-suite-header-wc.d.ts

@@ -0,0 +1,36 @@
+import { HTMLElementBase } from "../core/dom";
+/**
+ * Unified framework-agnostic DEML suite header.
+ * Tag: `viking-suite-header`
+ *
+ * @attr context - Surface: app | marketing | backend | docs (auto-detected when omitted)
+ * @attr authenticated - Render the user menu instead of Sign In
+ * @attr user-name - Display name for the authenticated user menu
+ * @attr user-email - Secondary user menu label
+ * @attr sign-in-href - Fallback href for static Sign In navigation
+ */
+export declare class VikingSuiteHeaderWc extends HTMLElementBase {
+    static readonly tag = "viking-suite-header";
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    private menuOpen;
+    private userMenuOpen;
+    private paletteEl;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    openSearch(): void;
+    private readonly onDocumentClick;
+    private readonly onSearchClick;
+    private readonly onMenuClick;
+    private readonly onUserClick;
+    private readonly onSignInClick;
+    private readonly onSignOutClick;
+    private syncOpenState;
+    private renderNavLinks;
+    private renderAuth;
+    private getDashboardHref;
+    private render;
+}
+export declare const registerVikingSuiteHeaderWc: () => void;

package/dist/web/suite-search-palette/viking-suite-search-palette-wc.d.ts

@@ -0,0 +1,39 @@
+import { HTMLElementBase } from "../core/dom";
+/**
+ * Unified cross-suite command palette Web Component.
+ * Tag: `viking-suite-command-palette`
+ * Aliases: `viking-suite-search-palette`, `viking-suite-search-palette-wc`
+ *
+ * Curated ⌘K navigation for marketing, docs, deml.app, and backend surfaces.
+ * Composes `viking-command-palette` with suite links from site-drakkar config.
+ *
+ * @attr context - Surface: app | marketing | backend | docs (auto-detected when omitted)
+ * @attr app-url - Override deml.app origin
+ * @attr marketing-url - Override marketing origin
+ * @attr backend-url - Override backend origin
+ * @attr global-shortcut - Bind ⌘K / Ctrl+K (default: on)
+ * @attr placeholder - Search input placeholder
+ *
+ * @method openPalette() - Programmatically open
+ * @method closePalette() - Programmatically close
+ *
+ * @example
+ * <viking-suite-command-palette context="marketing" global-shortcut></viking-suite-command-palette>
+ */
+export declare class VikingSuiteSearchPaletteWc extends HTMLElementBase {
+    static readonly tag = "viking-suite-command-palette";
+    static readonly searchTag = "viking-suite-search-palette";
+    static readonly legacyTag = "viking-suite-search-palette-wc";
+    static get observedAttributes(): string[];
+    private paletteEl;
+    private itemsLoaded;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** Opens the unified command palette. */
+    openPalette(): void;
+    /** Closes the unified command palette. */
+    closePalette(): void;
+    private ensurePalette;
+    private loadItems;
+}
+export declare const registerVikingSuiteSearchPaletteWc: () => void;

package/dist/web/theme-toggle/viking-theme-toggle-wc.d.ts

@@ -0,0 +1,19 @@
+import { HTMLElementBase } from "../core/dom";
+/**
+ * Framework-agnostic theme toggle Web Component.
+ * Tag: `viking-theme-toggle-wc`
+ */
+export declare class VikingThemeToggleWc extends HTMLElementBase {
+    static readonly tag = "viking-theme-toggle-wc";
+    private readonly shadow;
+    private button;
+    private sunIcon;
+    private moonIcon;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly onClick;
+    private syncIcons;
+    private render;
+}
+export declare const registerVikingThemeToggleWc: () => void;

package/dist/web/types.d.ts

@@ -0,0 +1,40 @@
+import type { VikingSearchPaletteItem } from "./core/types";
+/** Custom events dispatched by Viking-UI Web Components. */
+export type VikingWcChangeDetail = {
+    value: string;
+};
+export type VikingWcQueryDetail = {
+    query: string;
+};
+export type VikingWcSelectDetail = {
+    item: VikingSearchPaletteItem;
+};
+declare global {
+    interface HTMLElementTagNameMap {
+        "viking-badge": import("./badge/viking-badge-wc").VikingBadgeWc;
+        "viking-badge-wc": import("./badge/viking-badge-wc").VikingBadgeWc;
+        "viking-button": import("./button/viking-button-wc").VikingButtonWc;
+        "viking-button-wc": import("./button/viking-button-wc").VikingButtonWc;
+        "viking-callout": import("./callout/viking-callout-wc").VikingCalloutWc;
+        "viking-callout-wc": import("./callout/viking-callout-wc").VikingCalloutWc;
+        "viking-card": import("./card/viking-card-wc").VikingCardWc;
+        "viking-card-wc": import("./card/viking-card-wc").VikingCardWc;
+        "viking-field": import("./field/viking-field-wc").VikingFieldWc;
+        "viking-field-wc": import("./field/viking-field-wc").VikingFieldWc;
+        "viking-input": import("./input/viking-input-wc").VikingInputWc;
+        "viking-input-wc": import("./input/viking-input-wc").VikingInputWc;
+        "viking-dialog": import("./modal/viking-modal-wc").VikingModalWc;
+        "viking-modal": import("./modal/viking-modal-wc").VikingModalWc;
+        "viking-modal-wc": import("./modal/viking-modal-wc").VikingModalWc;
+        "viking-command-palette": import("./search-palette/viking-search-palette-wc").VikingSearchPaletteWc;
+        "viking-search-palette": import("./search-palette/viking-search-palette-wc").VikingSearchPaletteWc;
+        "viking-search-palette-wc": import("./search-palette/viking-search-palette-wc").VikingSearchPaletteWc;
+        "viking-select": import("./select/viking-select-wc").VikingSelectWc;
+        "viking-select-wc": import("./select/viking-select-wc").VikingSelectWc;
+        "viking-suite-command-palette": import("./suite-search-palette/viking-suite-search-palette-wc").VikingSuiteSearchPaletteWc;
+        "viking-suite-search-palette": import("./suite-search-palette/viking-suite-search-palette-wc").VikingSuiteSearchPaletteWc;
+        "viking-suite-search-palette-wc": import("./suite-search-palette/viking-suite-search-palette-wc").VikingSuiteSearchPaletteWc;
+        "viking-theme-toggle-wc": import("./theme-toggle/viking-theme-toggle-wc").VikingThemeToggleWc;
+    }
+}
+export {};

package/dist/web-components/index.d.ts

@@ -0,0 +1 @@
+export * from "../web/index";