@dataengineeringformachinelearning/viking-ui 4.0.5 → 4.1.0

package/dist/package.json

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

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { Type, Provider, ElementRef, InjectionToken, OnDestroy, OnInit, AfterViewInit } from '@angular/core';
+import { Type, Provider, ElementRef, OnDestroy, InjectionToken, OnInit, AfterViewInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import * as _dataengineeringformachinelearning_viking_ui from '@dataengineeringformachinelearning/viking-ui';
 import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
@@ -384,14 +384,15 @@ declare const registerVikingBadgeWc: () => void;
 
 /**
  * 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>
  */
 declare class VikingButtonWc extends HTMLElementBase {
-    static readonly tag = "viking-button";
-    static readonly legacyTag = "viking-button-wc";
+    /** Reserved for Angular `viking-button` — do not register as a custom element. */
+    static readonly angularTag = "viking-button";
+    static readonly tag = "viking-button-wc";
     static get observedAttributes(): string[];
     private readonly shadow;
     private control;
@@ -405,7 +406,6 @@ declare class VikingButtonWc extends HTMLElementBase {
     private get disabled();
     private get loading();
     private get square();
-    private syncHostSemantics;
     private render;
 }
 declare const registerVikingButtonWc: () => void;
@@ -532,7 +532,7 @@ declare const registerVikingInputWc: () => void;
 
 /**
  * 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
@@ -547,14 +547,15 @@ declare const registerVikingInputWc: () => void;
  * @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>
  */
 declare class VikingModalWc extends HTMLElementBase {
-    static readonly tag = "viking-modal";
-    static readonly legacyTag = "viking-modal-wc";
+    /** Reserved for Angular `viking-modal` — do not register as a custom element. */
+    static readonly angularTag = "viking-modal";
+    static readonly tag = "viking-modal-wc";
     static readonly dialogTag = "viking-dialog";
     static get observedAttributes(): string[];
     private readonly shadow;
@@ -653,6 +654,71 @@ declare class VikingSearchPaletteWc extends HTMLElementBase {
 }
 declare const registerVikingSearchPaletteWc: () => void;
 
+/**
+ * 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
+ */
+declare class VikingStatusCardWc extends HTMLElementBase {
+    static readonly tag = "viking-status-card";
+    static readonly legacyTag = "viking-status-card-wc";
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private get compact();
+    private get loading();
+    private get interactive();
+    private get href();
+    private get target();
+    private get statusTone();
+    private get statusDot();
+    private get cardTitle();
+    private get subtitle();
+    private get status();
+    private render;
+}
+declare const registerVikingStatusCardWc: () => void;
+
+/**
+ * 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`
+ */
+declare class VikingStatusPillWc extends HTMLElementBase {
+    static readonly tag = "viking-status-pill";
+    static readonly legacyTag = "viking-status-pill-wc";
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private get tone();
+    private get compact();
+    private get removable();
+    private get href();
+    private get icon();
+    private get showDot();
+    private readonly onRemove;
+    private render;
+}
+declare const registerVikingStatusPillWc: () => void;
+
 /**
  * Unified cross-suite command palette Web Component.
  * Tag: `viking-suite-command-palette`
@@ -786,9 +852,11 @@ declare class VikingThemeToggleWc extends HTMLElementBase {
     private button;
     private sunIcon;
     private moonIcon;
+    private readonly onStorage;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private readonly onThemeChange;
     private readonly onClick;
     private syncIcons;
     private render;
@@ -995,6 +1063,7 @@ declare class VikingSiteNavbar {
     protected onBrandClick(event: MouseEvent): void;
     protected toggleMobileMenu(): void;
     protected closeMobileMenu(): void;
+    protected closeMobileMenuOnOutsideClick(event: MouseEvent): void;
     protected openSearch(): void;
     protected closeMobileMenuOnDesktop(): void;
     protected closeMobileMenuOnEscape(): void;
@@ -2022,12 +2091,13 @@ declare class VikingMenubarItem {
  * viking-modal — dialog built on the native <dialog> element
  *. Toggle via the `open` model.
  */
-declare class VikingModal {
+declare class VikingModal implements OnDestroy {
     private readonly dialogRef;
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly heading: _angular_core.InputSignal<string>;
     readonly dismissible: _angular_core.InputSignal<boolean>;
     constructor(host: ElementRef<HTMLElement>);
+    ngOnDestroy(): void;
     protected onBackdropClick: (event: MouseEvent) => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<VikingModal, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<VikingModal, "viking-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[vikingModalActions]"], true, never>;
@@ -2423,6 +2493,25 @@ declare class VikingSpinner {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<VikingSpinner, "viking-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * viking-status-card — wrapper around the web component.
+ */
+declare class VikingStatusCard {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string>;
+    readonly status: _angular_core.InputSignal<string>;
+    readonly statusTone: _angular_core.InputSignal<VikingTone>;
+    readonly statusDot: _angular_core.InputSignal<boolean>;
+    readonly href: _angular_core.InputSignal<string>;
+    readonly target: _angular_core.InputSignal<string>;
+    readonly compact: _angular_core.InputSignal<boolean>;
+    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly interactive: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VikingStatusCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VikingStatusCard, "viking-status-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusTone": { "alias": "statusTone"; "required": false; "isSignal": true; }; "statusDot": { "alias": "statusDot"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /**
  * viking-status-metric-row — icon + title/subtitle + value row for status cards.
  */
@@ -2435,6 +2524,23 @@ declare class VikingStatusMetricRow {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<VikingStatusMetricRow, "viking-status-metric-row", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * viking-status-pill — status badge for status cards and operational states.
+ */
+declare class VikingStatusPill {
+    readonly tone: _angular_core.InputSignal<VikingTone>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly dot: _angular_core.InputSignal<boolean>;
+    readonly compact: _angular_core.InputSignal<boolean>;
+    readonly removable: _angular_core.InputSignal<boolean>;
+    readonly href: _angular_core.InputSignal<string>;
+    readonly target: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly removed: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VikingStatusPill, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VikingStatusPill, "viking-status-pill", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
+}
+
 /**
  * viking-slider — range slider.
  * ControlValueAccessor-compatible.
@@ -2749,5 +2855,5 @@ declare class VikingSuiteSearchPalette implements OnInit, AfterViewInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<VikingSuiteSearchPalette, "viking-suite-search-palette", never, { "context": { "alias": "context"; "required": false; "isSignal": true; }; "urls": { "alias": "urls"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "bindShortcut": { "alias": "bindShortcut"; "required": false; "isSignal": true; }; "onRegister": { "alias": "onRegister"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { BUG_REPORT_QUERY, COOKIE_SETTINGS_QUERY, DEFAULT_SITE_URLS, MATERIAL_ICON_ALIASES, SITE_FOOTER_COLUMNS, SITE_NAV_LINKS, VIKING_BRAND_ICON_FILLED_PATHS, VIKING_BRAND_ICON_NAMES, VIKING_BRAND_ICON_NAMES_LIST, VIKING_BRAND_ICON_PATHS, VIKING_DRAKKAR_ICON_FILLED_PATHS, VIKING_DRAKKAR_ICON_NAMES_LIST, VIKING_DRAKKAR_ICON_PATHS, VIKING_FILLED_ICON_NAMES, VIKING_ICON_FILLED_PATHS, VIKING_ICON_NAMES, VIKING_ICON_PATHS$1 as VIKING_ICON_PATHS, VIKING_ICON_SIZE_PRESETS, VIKING_INTEGRATION_BRAND_COLORS, VIKING_INTEGRATION_BRAND_NAMES, VIKING_INTEGRATION_BRAND_SVGS, VIKING_INTEGRATION_ICON_NAMES_LIST, VIKING_INTEGRATION_ICON_PATHS, 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, panChartWindow, provideVikingCva, registerVikingBadgeWc, registerVikingButtonWc, registerVikingCalloutWc, registerVikingCardWc, registerVikingElements, registerVikingFieldWc, registerVikingInputWc, registerVikingModalWc, registerVikingSearchPaletteWc, registerVikingSelectWc, registerVikingSuiteHeaderWc, registerVikingSuiteSearchPaletteWc, registerVikingThemeToggleWc, resolveBrandHref, resolveFooterHref, resolveNavHref, resolveVikingIcon, resolveVikingIconColor, resolveVikingIconSize, sliceChartData, vikingIconViewBox, visibleNavLinks, zoomChartWindow };
+export { BUG_REPORT_QUERY, COOKIE_SETTINGS_QUERY, DEFAULT_SITE_URLS, MATERIAL_ICON_ALIASES, SITE_FOOTER_COLUMNS, SITE_NAV_LINKS, VIKING_BRAND_ICON_FILLED_PATHS, VIKING_BRAND_ICON_NAMES, VIKING_BRAND_ICON_NAMES_LIST, VIKING_BRAND_ICON_PATHS, VIKING_DRAKKAR_ICON_FILLED_PATHS, VIKING_DRAKKAR_ICON_NAMES_LIST, VIKING_DRAKKAR_ICON_PATHS, VIKING_FILLED_ICON_NAMES, VIKING_ICON_FILLED_PATHS, VIKING_ICON_NAMES, VIKING_ICON_PATHS$1 as VIKING_ICON_PATHS, VIKING_ICON_SIZE_PRESETS, VIKING_INTEGRATION_BRAND_COLORS, VIKING_INTEGRATION_BRAND_NAMES, VIKING_INTEGRATION_BRAND_SVGS, VIKING_INTEGRATION_ICON_NAMES_LIST, VIKING_INTEGRATION_ICON_PATHS, 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, panChartWindow, provideVikingCva, registerVikingBadgeWc, registerVikingButtonWc, registerVikingCalloutWc, registerVikingCardWc, registerVikingElements, registerVikingFieldWc, registerVikingInputWc, registerVikingModalWc, registerVikingSearchPaletteWc, registerVikingSelectWc, registerVikingStatusCardWc, registerVikingStatusPillWc, registerVikingSuiteHeaderWc, registerVikingSuiteSearchPaletteWc, registerVikingThemeToggleWc, resolveBrandHref, resolveFooterHref, resolveNavHref, resolveVikingIcon, resolveVikingIconColor, resolveVikingIconSize, sliceChartData, vikingIconViewBox, visibleNavLinks, zoomChartWindow };
 export type { ChartZoomWindow, SiteDrakkarContext, SiteFooterColumn, SiteFooterLink, SiteNavLink, SiteUrls, SuiteSearchItem, VikingBrandIconName, VikingBreadcrumb, VikingButtonVariant, VikingChartCurve, VikingChartEmptyLayout, VikingChartEmptyTone, VikingChartKind, VikingChartPanelBody, VikingChartPanelSize, VikingChartSeries, VikingCommandItem, VikingConfirmDialogData, VikingDialogKind, VikingDialogState, VikingDonutSegment, VikingDrakkarIconName, VikingFormSectionLayout, VikingIconBadgeTone, VikingIconColorToken, VikingIconName$1 as VikingIconName, VikingIconSizePreset, VikingIconVariant, VikingIntegrationBrandName, VikingIntegrationIconName, VikingKanbanCard, VikingKanbanColumn, VikingKanbanMove, VikingNavItem, VikingSearchPaletteItem, VikingSelectOption, VikingSelectWidth, VikingSeriesPreset, VikingSheetSide, VikingSidebarNavTreeItemVariant, VikingSize, VikingToastInstance, VikingToastOptions, VikingTone, VikingUptimeStatus, VikingWcTone, VikingWizardStep };

package/dist/viking-components.css

@@ -316,11 +316,27 @@
 
 .viking-progress-bar {
   height: 100%;
+  width: var(--viking-progress-value, 0%);
   background: var(--viking-accent);
   border-radius: inherit;
   transition: width var(--viking-duration) var(--viking-ease-out);
 }
 
+.viking-progress-value-33,
+.viking-bar-value-33 {
+  --viking-progress-value: 33%;
+}
+
+.viking-progress-value-72,
+.viking-bar-value-72 {
+  --viking-progress-value: 72%;
+}
+
+.viking-progress-value-94,
+.viking-bar-value-94 {
+  --viking-progress-value: 94%;
+}
+
 .viking-progress-indeterminate .viking-progress-bar {
   width: 40%;
   animation: viking-progress-slide 1.2s ease-in-out infinite;
@@ -842,6 +858,7 @@
 
 .viking-bar-fill {
   height: 100%;
+  width: var(--viking-progress-value, 0%);
   background: var(--viking-accent);
   border-radius: inherit;
 }
@@ -954,6 +971,14 @@
   gap: var(--viking-space-half);
 }
 
+.viking-icon-color-accent {
+  color: var(--viking-accent);
+}
+
+.viking-icon-color-muted {
+  color: var(--viking-text-muted);
+}
+
 .viking-whitepaper-cta-static {
   display: flex;
   flex-direction: column;
@@ -963,12 +988,16 @@
 
 .viking-search-result-static {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: var(--viking-space-half);
+  width: 100%;
   padding: var(--viking-space-1) var(--viking-space-2);
   border-radius: var(--viking-radius);
   border: 1px solid transparent;
+  background: transparent;
+  cursor: default;
   text-decoration: none;
+  text-align: left;
   color: inherit;
   transition: var(--viking-transition-interactive);
 }