release: WRNexusJS 0.5.12

2026-07-30 18:59:01 +05:30
parent f37303b22d
commit d64e899993
462 changed files with 75432 additions and 2570 deletions
@@ -1,6 +1,6 @@
 # WRNexus UI component reference

-This reference is generated from the 90 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default.
+This reference is generated from the 108 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default.

 ## Advanced-forms

@@ -56,7 +56,7 @@ Theme-aware, responsive search box component.
 - Mount: `data-component="SearchBox"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Search Box"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "search"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
- Events: `input`, `change`, `search`, `submit`, `clear`
+- Events: None

 ### StrongPassword

@@ -222,6 +222,15 @@ Theme-aware, responsive file upload progress component.
 - Slots: None
 - Events: `cancel`, `retry`, `complete`

+### HeroActions
+
+Responsive action group for hero and call-to-action sections.
+
+- Mount: `data-component="HeroActions"`
+- Props: `actions: string = []`, `align: string = "left"`, `orientation: string = "horizontal"`, `stackOnMobile: boolean = true`, `fullWidthMobile: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
 ### LegendIndicator

 Theme-aware, responsive legend indicator component.
@@ -238,7 +247,7 @@ Theme-aware, responsive list component.
 - Mount: `data-component="List"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
- Events: `select`, `click`
+- Events: None

 ### ListGroup

@@ -256,7 +265,7 @@ Theme-aware, responsive marquee component.
 - Mount: `data-component="Marquee"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Marquee"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
- Events: `pause`, `resume`
+- Events: None

 ### Progress

@@ -310,7 +319,7 @@ Theme-aware, responsive timeline component.
 - Mount: `data-component="Timeline"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Timeline"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
- Events: `select`
+- Events: None

 ### Toast

@@ -332,6 +341,78 @@ Theme-aware, responsive tree view component.

 ## Blocks

+### AnnouncementBar
+
+Accessible public announcement, emergency, maintenance, or status bar.
+
+- Mount: `data-component="AnnouncementBar"`
+- Props: `badge: string = ""`, `badgeIcon: string = ""`, `message: string = "Announcement"`, `description: string = ""`, `icon: string = "icon-[lucide--megaphone]"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss announcement"`, `sticky: boolean = false`, `compact: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "soft"`, `role: string = "status"`, `live: string = "polite"`, `class: string = ""`
+- Slots: None
+- Events: None
+
+### CTASection
+
+Reusable closing call-to-action section with primary and secondary actions.
+
+- Mount: `data-component="CTASection"`
+- Props: `eyebrow: string = ""`, `title: string = "Ready to get started?"`, `description: string = ""`, `icon: string = ""`, `align: string = "center"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `backgroundImage: string = ""`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: `default`, `actions`, `visual`, `footer`
+- Events: None
+
+### FeatureCard
+
+Reusable linked feature or service card with icon, badge, description, and action.
+
+- Mount: `data-component="FeatureCard"`
+- Props: `icon: string = ""`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `actionIcon: string = ""`, `badge: string = ""`, `badgeColor: string = "primary"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `hover: string = "lift"`, `align: string = "left"`, `disabled: boolean = false`, `class: string = ""`
+- Slots: `icon`, `default`, `footer`
+- Events: None
+
+### FeatureIconCard
+
+Feature card with a prominent themed icon treatment.
+
+- Mount: `data-component="FeatureIconCard"`
+- Props: `icon: string = "icon-[lucide--sparkles]"`, `iconSize: string = "md"`, `iconVariant: string = "soft"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Explore"`, `badge: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `hover: string = "lift"`, `class: string = ""`
+- Slots: `default`, `footer`
+- Events: None
+
+### Hero
+
+Reusable public-page hero with actions, trust items, badges, and visual slots.
+
+- Mount: `data-component="Hero"`
+- Props: `eyebrow: string = ""`, `title: string = "Build something remarkable"`, `highlight: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `tertiaryLabel: string = ""`, `tertiaryHref: string = ""`, `badges: string = []`, `trustItems: string = []`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: `eyebrow`, `actions`, `trust`, `default`, `visual`, `footer`
+- Events: None
+
+### MarketingSectionHeader
+
+Marketing section heading with an optional linked action.
+
+- Mount: `data-component="MarketingSectionHeader"`
+- Props: `id: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "split"`, `size: string = "default"`, `color: string = "primary"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `actionExternal: boolean = false`, `class: string = ""`
+- Slots: `icon`, `actions`, `default`
+- Events: None
+
+### MetricCard
+
+Single statistic or operational metric with icon, trend, and optional action.
+
+- Mount: `data-component="MetricCard"`
+- Props: `label: string = "Metric"`, `value: string = "0"`, `description: string = ""`, `icon: string = ""`, `prefix: string = ""`, `suffix: string = ""`, `trend: string = ""`, `trendLabel: string = ""`, `trendDirection: string = "neutral"`, `href: string = ""`, `actionLabel: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `class: string = ""`
+- Slots: None
+- Events: None
+
+### PageHeader
+
+Public and application page header with breadcrumbs, metadata, and actions.
+
+- Mount: `data-component="PageHeader"`
+- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `icon: string = ""`, `align: string = "left"`, `size: string = "default"`, `compact: boolean = false`, `showBreadcrumbs: boolean = false`, `breadcrumbs: string = []`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`
+- Slots: `meta`, `actions`, `default`
+- Events: None
+
 ### PortalDashboard

 Responsive portal dashboard with metrics, actions, tasks, and updates.
@@ -341,6 +422,24 @@ Responsive portal dashboard with metrics, actions, tasks, and updates.
 - Slots: `hero-action`
 - Events: `action`, `navigate`

+### SplitHero
+
+Two-column hero with configurable content and visual placement.
+
+- Mount: `data-component="SplitHero"`
+- Props: `eyebrow: string = ""`, `title: string = "A better digital experience"`, `highlight: string = ""`, `description: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `visualPosition: string = "right"`, `reverse: boolean = false`, `ratio: string = "balanced"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `trustItems: string = []`, `class: string = ""`
+- Slots: `actions`, `trust`, `default`, `visual`
+- Events: None
+
+### StatsBar
+
+Compact responsive statistics strip.
+
+- Mount: `data-component="StatsBar"`
+- Props: `items: string = []`, `columns: number = 4`, `compact: boolean = true`, `dividers: boolean = true`, `icons: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: None
+- Events: None
+
 ## Forms

 ### AuthForm
@@ -541,7 +640,7 @@ Theme-aware, responsive map component.
 - Mount: `data-component="Map"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
- Events: `ready`, `move`, `zoom`, `markerClick`
+- Events: None

 ### ToastNotifications

@@ -608,6 +707,15 @@ Theme-aware, responsive divider component.
 - Slots: None
 - Events: None

+### FeatureGrid
+
+Responsive equal-height grid for feature and service cards.
+
+- Mount: `data-component="FeatureGrid"`
+- Props: `color: string = "primary"`, `size: string = "default"`, `columns: number = 3`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `minItemWidth: string = ""`, `equalHeight: boolean = true`, `align: string = "stretch"`, `maxWidth: string = "full"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
 ### Grid

 Theme-aware, responsive grid component.
@@ -624,7 +732,7 @@ Theme-aware, responsive image component.
 - Mount: `data-component="Image"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `src: string = ""`, `alt: string = ""`, `width: string = ""`, `height: string = ""`, `loading: string = "lazy"`, `rounded: boolean = false`, `class: string = ""`
 - Slots: `default`
- Events: `load`, `error`
+- Events: None

 ### Kbd

@@ -651,6 +759,51 @@ Theme-aware, responsive link component.
 - Mount: `data-component="Link"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Link"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `class: string = ""`
 - Slots: `default`
+- Events: None
+
+### MetricGrid
+
+Responsive collection of metric cards.
+
+- Mount: `data-component="MetricGrid"`
+- Props: `items: string = []`, `columns: number = 4`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `equalHeight: boolean = true`, `dividers: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### PublicPageShell
+
+Consistent structural wrapper for public-facing pages.
+
+- Mount: `data-component="PublicPageShell"`
+- Props: `maxWidth: string = "full"`, `fullWidth: boolean = true`, `headerOffset: string = "none"`, `background: string = "default"`, `overflow: string = "clip"`, `minHeight: string = "screen"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`
+- Slots: `before`, `default`, `after`
+- Events: None
+
+### Section
+
+Theme-aware page section with consistent spacing, width, background, and border controls.
+
+- Mount: `data-component="Section"`
+- Props: `id: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `spacing: string = "lg"`, `maxWidth: string = "xl"`, `fullWidth: boolean = false`, `borderTop: boolean = false`, `borderBottom: boolean = false`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### SectionHeader
+
+Reusable accessible section heading with eyebrow, title, description, icon, and actions.
+
+- Mount: `data-component="SectionHeader"`
+- Props: `id: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `headingLevel: number = 2`, `maxWidth: string = "3xl"`, `class: string = ""`
+- Slots: `icon`, `default`, `actions`
+- Events: None
+
+### TextLink
+
+Styled inline action link with icons, arrows, external state, and disabled handling.
+
+- Mount: `data-component="TextLink"`
+- Props: `label: string = "Learn more"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `showArrow: boolean = true`, `underline: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `disabled: boolean = false`, `class: string = ""`
+- Slots: None
 - Events: `click`, `focus`, `blur`

 ### Typography
@@ -664,6 +817,15 @@ Theme-aware, responsive typography component.

 ## Navigation

+### BackToTop
+
+Accessible scroll-to-top control with visibility threshold.
+
+- Mount: `data-component="BackToTop"`
+- Props: `threshold: number = 500`, `label: string = "Back to top"`, `ariaLabel: string = "Scroll back to top"`, `icon: string = "icon-[lucide--arrow-up]"`, `position: string = "right"`, `offset: string = "md"`, `behavior: string = "smooth"`, `showProgress: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `class: string = ""`
+- Slots: None
+- Events: None
+
 ### Breadcrumb

 Theme-aware, responsive breadcrumb component.
@@ -679,7 +841,7 @@ Responsive application footer with structured links and pre/post content slots.

 - Mount: `data-component="Footer"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Footer navigation"`, `items: string = []`, `columns: number = 3`, `maxWidth: string = "compact"`, `copyright: string = ""`, `class: string = ""`
- Slots: `pre-footer`, `post-footer`, `copyright-left`, `copyright-right`
+- Slots: `pre-footer`, `copyright-left`, `copyright-right`, `post-footer`
 - Events: `select`, `action`

 ### MegaMenu
@@ -761,7 +923,7 @@ Theme-aware, responsive tabs component.
 - Mount: `data-component="Tabs"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Tabs"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
 - Slots: `default`
- Events: `change`, `select`
+- Events: None

 ## Overlays